.dl .app[data-out]:where(:not(.v16-root *)){display:block!important}
.dl .app[data-out] .tabbar:where(:not(.v16-root *)),.dl .app[data-out] .side:where(:not(.v16-root *)){display:none!important}
.dl .app[data-out] .main:where(:not(.v16-root *)){padding-bottom:0}
.dl .in:not([hidden]):where(:not(.v16-root *)){display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.dl .in [hidden]:where(:not(.v16-root *)){display:none!important}
.dl .in-top:where(:not(.v16-root *)){display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  padding-inline:max(var(--g),env(safe-area-inset-left,0px)) max(var(--g),env(safe-area-inset-right,0px))}
.dl .in-back:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:-8px;padding:0 8px;border-radius:12px;
  font-size:var(--t-small);font-weight:var(--w-ui);color:var(--fg2);transition:color .15s}
.dl .in-back .i:where(:not(.v16-root *)){font-size:17px}
.dl .in-top .logo svg:where(:not(.v16-root *)){height:28px}
@media (hover:hover) and (pointer:fine){.dl .in-back:hover:where(:not(.v16-root *)){color:var(--fg)}}
/* ============ Plans and checkout (founder pick B, 15 Oct 2026: "B for plans"; the four ways are in
   archive/identity-probes/plans-options/): today's table in Daylight, with one Pro column. Pro's column sits on the sunk paper,
   the one amber is Get Pro (in its column on a laptop, in the bar over the tabs on a phone), and the plans' heads stay in view
   while the rows scroll, as today's do. Checkout puts Pay under the price, says right under Pay when the payment window did not
   open, then lists what you get, with How you pay and After you pay beside it. Nothing is red: red means a wrong answer ============ */
.dl .pl:where(:not(.v16-root *)){display:grid;gap:var(--gap);padding-bottom:28px;--pl-stick:calc(56px + env(safe-area-inset-top,0px))}
.dl .wrap.pl:where(:not(.v16-root *)){max-width:960px}
/* a laptop's bar scrolls away with the page, so there the heads hold the top of the window */
@media (min-width:1000px){.dl .pl:where(:not(.v16-root *)){--pl-stick:0px}}
.dl .pl .head:where(:not(.v16-root *)){padding-bottom:6px}
/* the table: the heads are three grid cells that stay in view under the bar, and every row lines up with them */
.dl .pl-t:where(:not(.v16-root *)){display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));padding:0}
.dl .pl-lead:where(:not(.v16-root *)),.dl .pl-col:where(:not(.v16-root *)){position:sticky;top:var(--pl-stick);z-index:3;background:var(--card)}
.dl .pl-lead:where(:not(.v16-root *)){display:flex;align-items:flex-end;padding:22px 24px;border-top-left-radius:var(--r-card);box-shadow:0 1px 0 var(--line);
  font-size:var(--t-small);color:var(--fg2);text-wrap:pretty}
.dl .pl-col:where(:not(.v16-root *)){display:grid;gap:3px;align-content:start;padding:22px 20px 20px;box-shadow:-1px 0 0 var(--line),0 1px 0 var(--line)}
.dl .pl-col.pro:where(:not(.v16-root *)){background:var(--sunk);border-top-right-radius:var(--r-card)}
.dl .pl-name:where(:not(.v16-root *)){font-size:var(--t-small);font-weight:var(--w-head)}
.dl .pl-amt:where(:not(.v16-root *)){font-size:1.75rem;font-weight:var(--w-head);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.dl .pl-note:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3)}
.dl .pl-buy:where(:not(.v16-root *)){display:grid;gap:6px;margin-top:12px}
.dl .pl-foot:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3);text-wrap:pretty}
.dl .pl-mine:where(:not(.v16-root *)){margin-top:12px;font-size:var(--t-small);font-weight:var(--w-head)}
.dl .pl-row:where(:not(.v16-root *)),.dl .pl-shared:where(:not(.v16-root *)){grid-column:1 / -1;display:grid;grid-template-columns:subgrid}
.dl .pl-row:where(:not(.v16-root *)){align-items:stretch;box-shadow:0 1px 0 var(--line)}
.dl .pl-l:where(:not(.v16-root *)){display:flex;align-items:center;padding:13px 24px;font-size:var(--t-small)}
.dl .pl-c:where(:not(.v16-root *)){display:flex;align-items:center;padding:13px 20px;font-size:var(--t-small);color:var(--fg2);box-shadow:-1px 0 0 var(--line)}
.dl .pl-c.pro:where(:not(.v16-root *)){background:var(--sunk)}
.dl .pl-c .tick:where(:not(.v16-root *)){width:20px;height:20px}
.dl .pl-c .tick svg:where(:not(.v16-root *)){width:12px;height:12px}
.dl .pl-dash:where(:not(.v16-root *)){display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--line2)}
.dl .pl-tfoot:where(:not(.v16-root *)){grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;padding:14px 24px 12px}
.dl .pl-tfoot p:where(:not(.v16-root *)){max-width:56ch;font-size:var(--t-meta);color:var(--fg3);text-wrap:pretty}
.dl .pl-disc:where(:not(.v16-root *)){display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--t-small);font-weight:var(--w-ui);transition:opacity .1s}
.dl .pl-disc:active:where(:not(.v16-root *)){opacity:.6}
.dl .pl-disc .i:where(:not(.v16-root *)){font-size:17px;stroke-width:2;transition:transform .2s var(--ease)}
.dl .pl-disc[aria-expanded="true"] .i:where(:not(.v16-root *)){transform:rotate(180deg)}
.dl .pl-receipt:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3);line-height:1.6;text-wrap:pretty}
.dl .pl-close:where(:not(.v16-root *)){font-size:var(--t-small);color:var(--fg2);text-wrap:pretty}
.dl .pl-help:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3);text-wrap:pretty}
.dl .pl-close a:where(:not(.v16-root *)),.dl .pl-help a:where(:not(.v16-root *)){color:var(--fg);font-weight:var(--w-ui);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
/* the moment after paying: one line with the ink tick, above the table, until it is put away */
.dl .pl-ok:where(:not(.v16-root *)){display:flex;align-items:center;gap:12px;padding:14px 16px 14px 14px}
.dl .pl-ok p:where(:not(.v16-root *)){flex:1 1 auto;font-size:var(--t-small);font-weight:var(--w-ui);text-wrap:pretty}
.dl .pl-ok .iconbtn:where(:not(.v16-root *)){flex:none;margin:-8px -8px -8px 0}
.dl .pl-bar:where(:not(.v16-root *)),.dl .pl-pad:where(:not(.v16-root *)){display:none}

/* a phone: each plan's head is a button, and the bar over the tabs carries the chosen plan's action, as today's does; the lead
   reads first, and the heads alone stay in view */
@media (max-width:759px){
  .dl .pl-t:where(:not(.v16-root *)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl .pl-lead:where(:not(.v16-root *)){grid-column:1 / -1;position:static;padding:16px 16px 6px;border-top-right-radius:var(--r-card);box-shadow:none}
  .dl .pl-col:where(:not(.v16-root *)){padding:12px 16px 16px;box-shadow:0 1px 0 var(--line)}
  .dl .pl-col.pro:where(:not(.v16-root *)){border-top-right-radius:0;box-shadow:-1px 0 0 var(--line),0 1px 0 var(--line)}
  .dl .pl-col[aria-pressed]:where(:not(.v16-root *)){cursor:pointer;-webkit-user-select:none;user-select:none}
  .dl .pl-col[aria-pressed="true"]:where(:not(.v16-root *)){box-shadow:inset 0 -2px 0 var(--fg)}
  .dl .pl-col.pro[aria-pressed="true"]:where(:not(.v16-root *)){box-shadow:-1px 0 0 var(--line),inset 0 -2px 0 var(--fg)}
  .dl .pl-col .pl-buy:where(:not(.v16-root *)){display:none}
  .dl .pl-l:where(:not(.v16-root *)){grid-column:1 / -1;padding:12px 16px 2px;font-weight:var(--w-ui)}
  .dl .pl-c:where(:not(.v16-root *)){padding:4px 16px 12px;box-shadow:none}
  .dl .pl-c.pro:where(:not(.v16-root *)){box-shadow:-1px 0 0 var(--line)}
  .dl .pl-tfoot:where(:not(.v16-root *)){padding:12px 16px}
  .dl .pl-bar:where(:not(.v16-root *)){position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:38;display:flex;align-items:center;gap:12px;min-height:64px;
    padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:var(--bg);box-shadow:0 -1px 0 var(--line)}
  .dl .app[data-out] .pl-bar:where(:not(.v16-root *)){bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .dl .pl-bar .t:where(:not(.v16-root *)){flex:1 1 auto;min-width:0;display:grid;gap:1px}
  .dl .pl-bar b:where(:not(.v16-root *)){font-size:var(--t-small);font-weight:var(--w-head)}
  .dl .pl-bar small:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3);text-wrap:pretty}
  .dl .pl-bar .btn:where(:not(.v16-root *)){flex:none}
  .dl .pl-pad:where(:not(.v16-root *)){display:block;height:76px}
  .dl .app[data-out] .pl-pad:where(:not(.v16-root *)){height:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* a visitor: the same page under the logo, with Log in at the right and no tabs */
.dl .pl-out:where(:not(.v16-root *)){flex:1 1 auto}
.dl .pl-out .pl:where(:not(.v16-root *)){--pl-stick:env(safe-area-inset-top,0px);padding-bottom:40px}
.dl .pl-out .head h1:where(:not(.v16-root *)){font-size:var(--t-title)}

/* checkout */
.dl .pl-co:where(:not(.v16-root *)){display:grid;gap:var(--gap);align-items:start}
@media (min-width:1000px){.dl .pl-co:where(:not(.v16-root *)){grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.dl .pl-plan:where(:not(.v16-root *)){display:grid;gap:14px}
.dl .pl-plan h2:where(:not(.v16-root *)){font-size:var(--t-h2);font-weight:var(--w-head);letter-spacing:-.015em}
.dl .pl-plan .blurb:where(:not(.v16-root *)){margin-top:-8px;font-size:var(--t-small);color:var(--fg2);text-wrap:pretty}
.dl .pl-price:where(:not(.v16-root *)){display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.dl .pl-price b:where(:not(.v16-root *)){font-size:2.25rem;font-weight:var(--w-head);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.dl .pl-price span:where(:not(.v16-root *)){font-size:var(--t-small);color:var(--fg3)}
.dl .pl .btn:disabled:where(:not(.v16-root *)){opacity:.45;box-shadow:none;cursor:default;transform:none}
.dl .pl-err:where(:not(.v16-root *)){display:grid;gap:10px;padding:14px 16px;border-radius:var(--r-inner);box-shadow:0 0 0 1.5px var(--fg) inset;font-size:var(--t-small)}
.dl .pl-err b:where(:not(.v16-root *)){font-weight:var(--w-head)}
.dl .pl-err .btn:where(:not(.v16-root *)){justify-self:start}
.dl .pl-fine:where(:not(.v16-root *)){font-size:var(--t-meta);color:var(--fg3);text-align:center;text-wrap:pretty}
.dl .pl-h:where(:not(.v16-root *)){margin-bottom:-6px;font-size:var(--t-meta);font-weight:var(--w-ui);color:var(--fg3)}
.dl .pl-list li:where(:not(.v16-root *)){display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:var(--t-small)}
.dl .pl-list .tick:where(:not(.v16-root *)){width:20px;height:20px;margin-top:1px}
.dl .pl-list .tick svg:where(:not(.v16-root *)){width:12px;height:12px}
.dl .pl-side:where(:not(.v16-root *)){display:grid;gap:var(--gap)}
.dl .pl-card:where(:not(.v16-root *)){display:grid;gap:10px;padding:20px}
.dl .pl-card .lbl:where(:not(.v16-root *)){display:flex;align-items:center;gap:12px;font-size:var(--t-small);font-weight:var(--w-head)}
.dl .pl-card .ico:where(:not(.v16-root *)){width:38px;height:38px}
.dl .pl-card p:where(:not(.v16-root *)){font-size:var(--t-small);color:var(--fg2);text-wrap:pretty}
.dl .pl-card .go:where(:not(.v16-root *)){justify-self:start;margin-block:-6px -10px}
/* added: Pro's two lengths, above the table */
.dl .pl-len:where(:not(.v16-root *)){justify-self:start}
/* added: focus and anything brought into view stop clear of the bar pinned over the tabs (rule 37) */
@media (max-width:759px){
  html:has(.dl .pl-bar){scroll-padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  html:has(.dl .app[data-out] .pl-bar){scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}