/* Night Ledger v3, round 3 (ZT-160 design lab): the service pages (/bookkeeping, /tax, /insurance). Loaded after style.css,
   which carries the tokens, buttons, header, footer, dock, reveals and the shared Guidance section. This file owns the
   service hero and its stage, the page sections, and the widgets' static fallbacks. Each widget module styles its mounted
   UI in its own file, scoped to its slot (CONTRACT.md).
   Look (Ivo, Sep 27, "quieter realism"): one real object per page, smaller and dimmer, on a plain dark stage under a soft top
   light, with a floor shadow; no office, no skyline. Gold only for figures, hairlines and one highlight per screen. */

/* ---------- The service hero: words left, the stage right ---------- */
.svc-hero{position:relative;isolation:isolate;overflow:clip;background:var(--night-0);color:var(--paper)}
/* The room: near-black, with the faintest lift toward the stage so the object sits in light, not in a box. */
.svc-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(52% 70% at 74% 30%,rgba(251,250,247,.035),transparent 70%)}
.svc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;min-height:min(100svh,920px);padding-top:calc(var(--head-h) + var(--s7));padding-bottom:var(--s8)}
.svc-copy{grid-column:1/span 7;grid-row:1;min-width:0}
.svc-hero h1{max-width:9.2em;color:var(--paper);font-size:var(--t-ch);line-height:.98;letter-spacing:-.045em}
.svc-hero .deck{max-width:25em}
@media (min-width:561px){.svc-hero h1{word-spacing:.08em}}

/* Breadcrumbs: the landing, then this page with its glyph. The separator is a pearl stroke at the bolt angle. */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 var(--s5);padding:0;list-style:none;font-size:var(--t-small)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";flex:none;width:1px;height:15px;margin:0 16px 0 14px;background:var(--pearl-rule);transform:rotate(26.565deg)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:4px;transition:color var(--dur-ui) var(--ease-out),text-decoration-color var(--dur-ui) var(--ease-out)}
.crumbs a:hover{color:var(--paper);text-decoration-color:var(--gold-l)}
.crumbs [aria-current]{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--paper);font-weight:600}
.crumb-g{flex:none;width:26px;height:26px;color:var(--pearl);--gbg:var(--night-0)}

/* ---------- The stage: [data-stage="books|tax|insurance"] ---------- */
/* A fixed box (6:5, 5:4 on phones) with the finished composite inside: a soft pearl light from above, a faint pool where it
   lands, the object dimmed and desaturated a little, and a contact shadow at its visible base. Everything is placed in the
   box's own width (cqw), so it holds at every size. --ar is the cutout's height over its width; --y1 is where its visible
   base sits, as a fraction of its height (measured from the alpha); --base is the floor line. The stage module reads the
   same numbers (or the elements' boxes) and never moves them. --obj-b and --obj-s are the object's resting brightness and
   saturation: the page's filter, the head hold's light-up and world/stage.css all read them, so the light-up ends on them.
   The portfolio runs a little cooler (.72, .65): it was the most gold object on any page. Its files were retouched on Sep 27
   (the baked star glints out, the gold rim cooled about 30%, same size and alpha), so it needs less than the first .7, .55. */
.svc-fig{grid-column:8/-1;grid-row:1;display:grid;justify-items:end;min-width:0;margin:0}
.svc-stage{--ar:.655;--y1:.9;--ow:72cqw;--base:65cqw;--floor:78%;--obj-b:.74;--obj-s:.78;position:relative;container-type:inline-size;width:100%;max-width:560px;aspect-ratio:6/5}
[data-stage="books"]{--ar:.655;--y1:.902}
[data-stage="tax"]{--ar:.664;--y1:.94;--ow:66cqw}
[data-stage="insurance"]{--ar:.654;--y1:.813;--ow:74cqw;--obj-b:.72;--obj-s:.65}
.stage-fb{position:absolute;inset:0;transition:opacity var(--dur-reveal-out) var(--ease-in)}
/* Optional hand-over: a module that redraws the object itself sets data-ready on the slot, and the still fades out. */
.svc-stage[data-ready] .stage-fb{opacity:0}
/* The light reaches above the box (inset -50% on top) and fades out before any edge, so no line ever shows. */
.stage-fb::before{content:"";position:absolute;inset:-50% -25% -10%;pointer-events:none;background:
  radial-gradient(30% 40% at 50% 34%,rgba(251,250,247,.085),rgba(251,250,247,.03) 50%,transparent 100%),
  radial-gradient(31% 7% at 50% calc(31.25% + var(--floor) * .625),rgba(251,250,247,.06),transparent 100%)}
.stage-fb::after{content:"";position:absolute;left:50%;top:calc(var(--base) - 3cqw);width:calc(var(--ow) * .9);height:7cqw;translate:-50% 0;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.34) 56%,transparent)}
.stage-obj{position:absolute;z-index:1;left:50%;top:calc(var(--base) - var(--ow) * var(--ar) * var(--y1));width:var(--ow);height:auto;max-width:none;translate:-50% 0;filter:brightness(var(--obj-b)) saturate(var(--obj-s)) contrast(1.04)}
/* The first visit's hold: the head script sets html[data-stage-intro] (motion allowed, no Save-Data, not yet seen this visit),
   so the first paint is the unlit stage, a dark silhouette, and stage.js lights it up (world/stage.css owns the stage from
   then on). If stage.js never runs, the light comes back on its own after 2.5 s. */
html[data-stage-intro] .stage-fb::before{animation:nl-stage-light 520ms var(--ease-move) 2.5s both}
html[data-stage-intro] .stage-obj{animation:nl-stage-obj 600ms var(--ease-move) 2.5s both}
@keyframes nl-stage-light{from{opacity:0}to{opacity:1}}
@keyframes nl-stage-obj{from{filter:brightness(.25) saturate(var(--obj-s)) contrast(1.04)}to{filter:brightness(var(--obj-b)) saturate(var(--obj-s)) contrast(1.04)}}
/* The label on the AI image: small, under the stage, right-aligned. Not aria-hidden: it is a disclosure. */
.svc-cap{margin-top:var(--s2);color:var(--on-dark-2);font-size:12.5px;line-height:1.4;text-align:right}

@media (max-width:900px){
  .svc-grid{grid-template-rows:auto;min-height:0;padding-top:calc(var(--head-h) + var(--s5));padding-bottom:var(--s8)}
  .svc-copy{grid-column:1/-1}
  .svc-fig{grid-column:1/-1;grid-row:2;justify-items:center;margin-top:var(--s6)}
  .svc-stage{--ow:68cqw;--base:62cqw;--floor:77%;max-width:440px;aspect-ratio:5/4}
  [data-stage="tax"]{--ow:62cqw}
  [data-stage="insurance"]{--ow:70cqw}
  .svc-cap{text-align:center}
}
@media (max-width:560px){
  .svc-hero h1{font-size:clamp(34px,10.4vw,46px);line-height:1}
  .crumbs ol{margin-bottom:var(--s3)}
  .svc-hero .deck{margin-top:var(--s4);font-size:18px;line-height:1.45}
  .svc-fig{margin-top:var(--s5)}
}

/* ---------- Sections ---------- */
.sv-sec{padding-block:var(--s10)}
.sec-head h2{color:var(--paper);font-size:clamp(30px,2.4vw + 14px,56px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.sec-head p{margin-top:var(--s5);max-width:30em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.6}
/* Four layouts, so no two neighbours share one:
   split: the heading left, the list right, an aside under the heading;
   side: the heading left (four columns), the widget right;
   mirror: the widget left, the heading right;
   wide: the heading on top, the widget across the page. */
.sv-split,.sv-side,.sv-mirror,.sv-wide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.sv-split>.sec-head{grid-column:1/span 5;grid-row:1}
.sv-split>:nth-child(2){grid-column:7/-1;grid-row:1/span 2}
.sv-split>:nth-child(3){grid-column:1/span 5;grid-row:2;margin-top:var(--s7)}
.sv-side>.sec-head{grid-column:1/span 4;grid-row:1}
.sv-side>.widget{grid-column:5/-1;grid-row:1/span 2}
.sv-side>.wg-cap{grid-column:5/-1;grid-row:3}
.sv-mirror>.sec-head{grid-column:9/-1;grid-row:1}
.sv-mirror>.widget{grid-column:1/span 7;grid-row:1/span 2}
.sv-mirror>.wg-cap{grid-column:1/span 7;grid-row:3}
.sv-wide>.sec-head{grid-column:1/span 7}
.sv-wide>.widget,.sv-wide>.wg-cap{grid-column:1/-1}
.sv-wide>.widget{margin-top:var(--s7)}
@media (max-width:1060px){
  .sv-split>*,.sv-side>*,.sv-mirror>*,.sv-wide>*{grid-column:1/-1!important;grid-row:auto!important}
  .sv-split>:nth-child(2),.sv-side>.widget,.sv-mirror>.widget,.sv-wide>.widget{margin-top:var(--s7)}
  .sv-split>:nth-child(3){margin-top:var(--s7)}
  .sv-mirror>.sec-head{order:-1}
}
@media (max-width:640px){
  .sv-sec{padding-block:var(--s9)}
  .sv-split>:nth-child(2),.sv-side>.widget,.sv-mirror>.widget,.sv-wide>.widget,.sv-split>:nth-child(3){margin-top:var(--s6)}
}

/* ---------- Widget slots: [data-widget="…"] ---------- */
/* A slot is a plate: near-black (charcoal on the near-black sections), a pearl hairline, the bolt notch. Its fallback reads
   complete on its own; a module that mounts sets data-ready on the slot and the fallback steps aside. */
.widget{position:relative;isolation:isolate;display:grid;min-width:0}
.widget[data-ready]>.wg-fallback{display:none}
.wg-fallback{min-width:0}
.wg-plate{--n:28px;padding:clamp(20px,2.6vw,36px);background:rgba(11,13,16,.62);box-shadow:inset 0 0 0 1px var(--pearl-faint);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.night0 .wg-plate{background:var(--night)}
.wg-cap{margin-top:var(--s3);color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.5}
@media (max-width:640px){.wg-plate{--n:20px}}

/* Close the month (fallback): the chronograph at rest beside the closed sample ledger. The net and its double rule are this
   screen's gold. */
.close-fb{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--s7);align-items:center}
.close-dial{position:relative;justify-self:center;width:100%;max-width:280px;aspect-ratio:1;color:var(--pearl-line)}
.close-dial::before{content:"";position:absolute;inset:7.75%;border-radius:50%;background:radial-gradient(circle at 38% 30%,rgba(251,250,247,.06),rgba(22,25,29,.9) 64%)}
.close-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.close-hand{position:absolute;left:calc(50% - .5px);bottom:50%;width:1px;height:36%;background:var(--paper);transform-origin:50% 100%}
.close-pin{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--paper);translate:-50% -50%}
.close-k{color:var(--on-dark-2);font-size:var(--t-small)}
.close-m{color:var(--paper);font-weight:600}
.close-ledger{width:100%;margin-top:var(--s3);border-collapse:collapse}
.close-ledger th,.close-ledger td{padding:10px 0;border-top:1px solid var(--pearl-faint);font-size:16px;line-height:1.35}
.close-ledger th{color:var(--on-dark);font-weight:400;text-align:left}
.close-ledger td{padding-left:var(--s4);color:var(--paper);text-align:right;white-space:nowrap}
.close-ledger tfoot tr{border-bottom:3px double var(--gold-rule)}
.close-ledger tfoot th,.close-ledger tfoot td{padding-block:14px 12px;border-top:1px solid var(--gold-rule);color:var(--paper);font-weight:600}
.close-ledger tfoot td{color:var(--gold-l);font-size:20px}
.close-ok{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);color:var(--paper);font-size:var(--t-small);font-weight:600}
.close-ok::before{content:"";width:12px;height:6px;margin-top:-4px;border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);transform:rotate(-45deg)}
@media (max-width:640px){
  .close-fb{grid-template-columns:1fr;gap:var(--s5)}
  .close-dial{max-width:170px}
  .close-ledger th,.close-ledger td{font-size:15px}
}

/* Month at a glance (fallback): the six sample months as a ledger table; the last month is "this month", its "What's left"
   in gold. */
.glance-t{width:100%;border-collapse:collapse}
.glance-t caption{padding-bottom:var(--s3);color:var(--paper);font-size:var(--t-small);font-weight:600;text-align:left}
.glance-t th,.glance-t td{padding:11px 0;border-top:1px solid var(--pearl-faint);font-size:16px;line-height:1.35}
.glance-t thead th{padding-top:0;border-top:0;color:var(--on-dark-2);font-size:var(--t-cap);font-weight:400;text-align:right}
.glance-t thead th:first-child{text-align:left}
.glance-t tbody th{color:var(--on-dark);font-weight:400;text-align:left}
.glance-t td{padding-left:var(--s4);color:var(--paper);text-align:right;white-space:nowrap}
.glance-t tbody tr:last-child th{color:var(--paper);font-weight:600}
.glance-t tbody tr:last-child td:last-child{color:var(--gold-l)}
.glance-t tbody tr:last-child>*{border-bottom:1px solid var(--gold-rule)}
@media (max-width:480px){.glance-t th,.glance-t td{font-size:14px}.glance-t td{padding-left:10px}}

/* Pile to your return (fallback): the two piles side by side, business first, each ending in the return it goes into (a
   paper card, the one light object on the screen). */
.pile-fb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}
.pile-k{padding-bottom:var(--s3);color:var(--paper);font-size:20px;letter-spacing:-.02em}
.pile-docs{margin:0;padding:0;list-style:none;border-top:1px solid var(--pearl-faint)}
.pile-docs li{display:grid;grid-template-columns:minmax(6.5em,.34fr) minmax(0,1fr);gap:var(--s4);padding:12px 0 11px;border-bottom:1px solid var(--pearl-faint);font-size:15px;line-height:1.45}
.pile-docs b{color:var(--paper);font:600 14px/1.5 var(--f-display);letter-spacing:-.01em}
.pile-docs span{color:var(--on-dark)}
.pile-ret{display:grid;gap:6px;margin-top:var(--s5);padding:16px 18px 18px;background:var(--paper);color:var(--ink)}
.pile-ret b{font:600 17px/1.2 var(--f-display);letter-spacing:-.02em}
.pile-ret span{color:var(--mute);font-size:14.5px;line-height:1.45}
.pile-note{margin-top:var(--s3);color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.5}
@media (max-width:760px){.pile-fb{grid-template-columns:1fr;gap:var(--s6)}}
@media (max-width:420px){.pile-docs li{grid-template-columns:1fr;gap:2px}}

/* The IRS letter decoder (fallback): one line and the IRS's own notice lookup. */
.decoder-fb{display:grid;align-content:center;justify-items:start;gap:var(--s4);min-height:200px}
.decoder-k{max-width:34em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}

/* People who count on you (fallback): three people, each with a health line and a life line. */
.people-fb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin:0;padding:0;list-style:none}
.people-fb>li{min-width:0;padding-top:var(--s4);border-top:1px solid var(--pearl-rule)}
.people-fb h3{color:var(--paper);font-size:20px;letter-spacing:-.02em}
.people-fb p{margin-top:var(--s3);color:var(--on-dark);font-size:15px;line-height:1.5}
.people-fb b{display:block;margin-bottom:2px;color:var(--paper);font-size:var(--t-cap);font-weight:600}
@media (max-width:760px){.people-fb{grid-template-columns:1fr}}
/* The star chart's mounted height where it is taller than the list (ins-people.js, measured at every width from 496 to 1920
   after the chart grew to 400 px, Sep 27): the slot keeps it from the first paint, so nothing below moves when the chart
   mounts. Each band reserves its tallest mounted height; elsewhere the list is the taller one. */
@media (min-width:506px) and (max-width:539px){[data-widget="ins-people"]{min-height:627px}}
@media (min-width:761px) and (max-width:899px){[data-widget="ins-people"]{min-height:346px}}
@media (min-width:900px) and (max-width:1060px){[data-widget="ins-people"]{min-height:355px}}
@media (min-width:1061px) and (max-width:1199px){[data-widget="ins-people"]{min-height:342px}}
@media (min-width:1200px) and (max-width:1279px){[data-widget="ins-people"]{min-height:347px}}
@media (min-width:1280px) and (max-width:1359px){[data-widget="ins-people"]{min-height:355px}}
@media (min-width:1360px){[data-widget="ins-people"]{min-height:367px}}

/* ---------- Bookkeeping: what you get each month ---------- */
.terms{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--pearl-faint)}
.terms li{display:grid;grid-template-columns:minmax(9em,.4fr) minmax(0,1fr);column-gap:var(--s5);padding:15px 0 14px;border-top:1px solid var(--pearl-faint);font-size:16px;line-height:1.5}
.terms b{color:var(--paper);font-weight:600}
.terms span{color:var(--on-dark)}
.sv-aside{max-width:30em;padding-top:var(--s5);border-top:1px solid var(--pearl-faint)}
.sv-aside h3{color:var(--paper);font-size:20px;letter-spacing:-.02em}
.sv-aside p{margin-top:var(--s3);color:var(--on-dark);font-size:16px;line-height:1.55}
@media (max-width:640px){.terms li{grid-template-columns:1fr;row-gap:2px}}

/* ---------- Tax: what we prepare, the deadline, IRS letters ---------- */
.forms{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--pearl-faint)}
.forms li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s5);padding:15px 0 14px;border-top:1px solid var(--pearl-faint);font-size:16px;line-height:1.45}
.forms b{color:var(--paper);font-weight:600}
.forms span{color:var(--on-dark);text-align:right}
@media (max-width:640px){.forms li{grid-template-columns:1fr;row-gap:2px}.forms span{text-align:left}}
/* The date complication, like a watch's date window, the day in a gold aperture ([data-gimmick="tax-deadline"]): the screen's
   gold. At most 416 px wide, so the source line wraps inside it. */
.tax-date{position:relative;display:grid;gap:6px;width:min(100%,416px);padding:18px 22px 16px;background:rgba(11,13,16,.8);border:1px solid var(--pearl-faint)}
.td-k{color:var(--on-dark-2);font-size:var(--t-cap)}
.td-v{display:flex;align-items:center;color:var(--paper);font:600 20px/1.2 var(--f-display);letter-spacing:-.01em}
.td-v time{display:flex;align-items:center;gap:10px}
.td-d{display:inline-grid;place-items:center;min-width:2.2em;height:1.9em;padding:0 .3em;border:1px solid var(--gold-l);color:var(--gold-l);font-size:22px}
.td-y{color:var(--on-dark);letter-spacing:0}
.td-src{padding-top:8px;margin-top:4px;border-top:1px solid var(--pearl-faint);color:var(--on-dark-2);font-size:12.5px}
/* The countdown's mounted height where it wraps (details.js), so nothing moves when it mounts. */
@media (max-width:356px){.gimmick[data-gimmick="tax-deadline"]{min-height:91px}}
.tax-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);padding-top:var(--s7)}
.tax-row .link{margin-top:var(--s3)}
.tax-row{padding:var(--s5) var(--s6) var(--s5) 0;border-top:1px solid var(--pearl-rule);border-bottom:1px solid var(--pearl-faint)}
.tax-row h3{color:var(--paper);font:600 20px/1.3 var(--f-body);letter-spacing:0}
.tax-row p{margin-top:var(--s2);max-width:34em;color:var(--on-dark);font-size:16px;line-height:1.55}
@media (max-width:760px){.tax-rows{grid-template-columns:1fr;row-gap:var(--s5);padding-top:var(--s6)}}

/* ---------- Insurance: the two lines, open enrollment ---------- */
.ins-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7) var(--s6);margin:0;padding:0;list-style:none}
.ins-lines>li{position:relative;padding-top:var(--s5);border-top:1px solid var(--pearl-rule)}
.ins-lines>li::before{content:"";position:absolute;left:0;top:-3.5px;width:6px;height:6px;border-radius:50%;background:var(--pearl)}
.ins-lines h3{color:var(--paper);font-size:21px;letter-spacing:-.02em}
.ins-lines ul{margin:var(--s3) 0 0;padding:0;list-style:none}
.ins-lines ul li{position:relative;padding-left:20px;color:var(--on-dark);font-size:16px;line-height:1.5}
.ins-lines ul li+li{margin-top:6px}
.ins-lines ul li::before{content:"";position:absolute;left:0;top:.78em;width:9px;height:1px;background:var(--pearl-line)}
@media (max-width:640px){.ins-lines{grid-template-columns:1fr;gap:var(--s6)}}
/* The open-enrollment note: a small framed complication, the same family as the tax date window. details.js turns its dates
   into a year dial; the slot reserves the dial's measured height, so nothing moves when it mounts. */
.enroll{justify-self:start;width:min(100%,360px);padding:18px 22px 16px;background:rgba(22,25,29,.9);border:1px solid var(--pearl-faint)}
.enroll-k{color:var(--on-dark-2);font:400 var(--t-cap)/1.3 var(--f-body);letter-spacing:0}
.gimmick{position:relative;isolation:isolate;display:grid;min-width:0}
.gm-fallback{min-width:0}
.gimmick[data-ready]>.gm-fallback{display:none}
.gimmick[data-gimmick="enroll"]{margin-top:var(--s2);min-height:206px}
.enroll-v{color:var(--paper);font-size:16px;line-height:1.45}
.enroll-v time,.enroll-by time{color:var(--gold-l);font-weight:600;white-space:nowrap}
.enroll-by{margin-top:6px;color:var(--on-dark);font-size:14.5px;line-height:1.5}
.enroll-sep{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--pearl-faint);color:var(--on-dark);font-size:14.5px;line-height:1.5}
.enroll-src{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--pearl-faint);color:var(--on-dark-2);font-size:12.5px}
@media (max-width:560px){.gimmick[data-gimmick="enroll"]{min-height:249px}}
@media (max-width:374px){.gimmick[data-gimmick="enroll"]{min-height:292px}}
@media (max-width:349px){.gimmick[data-gimmick="enroll"]{min-height:333px}}

/* ---------- Who you'll work with ---------- */
/* A plain list (Jorge, Sep 27: "I prefer a list"): one row per advisor, the name in the display face and the credentials
   word for word beside it. No photos (firm first); it grows a row at a time as advisors join. */
.sv-who{padding-block:var(--s9)}
.sv-h{color:var(--paper);font-size:clamp(30px,2.4vw + 14px,56px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.team{margin:var(--s7) 0 0;padding:0;list-style:none;border-bottom:1px solid var(--pearl-faint)}
.team li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--col-gap);align-items:baseline;padding:var(--s5) 0;border-top:1px solid var(--pearl-rule)}
.team-n{color:var(--paper);font:600 clamp(20px,.8vw + 15px,26px)/1.2 var(--f-display);letter-spacing:-.02em}
.team-c{color:var(--on-dark);font-size:var(--t-lead);line-height:1.5}
.team-c i{font-style:normal;color:var(--gold-l)}
.sv-who .lab-flag{margin-top:var(--s7)}
@media (max-width:640px){.team li{grid-template-columns:1fr;row-gap:var(--s2)}}

/* ---------- The quiet CTA: one line and the buttons, the mark as a faint watermark off the corner ---------- */
.sv-cta{overflow:clip;padding-block:var(--s10)}
.cta-mark{position:absolute;right:-3%;top:50%;width:auto;height:150%;max-width:none;opacity:.045;translate:0 -50%;pointer-events:none}
.cta-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.cta-row h2{grid-column:1/span 7;max-width:11em;color:var(--paper);font-size:clamp(32px,2.8vw + 14px,64px);line-height:1;letter-spacing:-.045em}
.cta-side{grid-column:8/-1;padding-bottom:.3em}
.cta-side p{max-width:26em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.cta-side .ctas{margin-top:var(--s5)}
@media (max-width:1060px){
  .cta-row h2,.cta-side{grid-column:1/-1}
  .cta-side{margin-top:var(--s6)}
}
@media (max-width:640px){.sv-cta{padding-block:var(--s9)}}

/* ---------- IRS letters page (Jorge, Sep 27: the finder moved off the tax page, kept for search) ---------- */
.page-top{padding-top:calc(var(--head-h) + var(--s8))}
.page-top .sec-head p{max-width:24em}
.notice-list{margin:var(--s7) 0 0;padding:0;list-style:none;border-bottom:1px solid var(--pearl-faint)}
.notice-list li{border-top:1px solid var(--pearl-faint)}
.notice-list summary{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;column-gap:var(--s5);align-items:baseline;padding:var(--s4) 0;min-height:44px;cursor:pointer;list-style:none;color:var(--on-dark);font-size:var(--t-lead);line-height:1.45}
.notice-list summary::-webkit-details-marker{display:none}
.notice-list summary::after{content:"+";color:var(--gold-l);font-size:20px;line-height:1;transition:transform var(--dur-ui) var(--ease-out)}
.notice-list details[open] summary::after{transform:rotate(45deg)}
.notice-list summary b{color:var(--paper);font-weight:600}
.notice-list summary:hover span{color:var(--paper)}
.notice-list details>:not(summary){margin:0 0 var(--s3) calc(7.5em + var(--s5));max-width:40em;color:var(--on-dark);font-size:16px;line-height:1.6}
.notice-list details>a{display:inline-block;margin-bottom:var(--s5)}
.nl-time b{color:var(--paper);font-weight:600}
@media (max-width:640px){
  .notice-list summary{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .notice-list summary b{grid-column:1}
  .notice-list summary span{grid-column:1;grid-row:2}
  .notice-list summary::after{grid-column:2;grid-row:1/span 2;align-self:center}
  .notice-list details>:not(summary){margin-left:0}
}
.dock:has(>.btn:only-child){grid-template-columns:1fr}

/* ---------- Bookkeeping: the client app screens (shared .as-screen styles in style.css) ---------- */
.as-pl{display:grid;gap:4px;margin:2px 0 0}
.as-pl div{display:flex;justify-content:space-between;padding:4px 8px;border-radius:8px;background:rgba(251,250,247,.05)}
.as-pl dt{color:var(--on-dark-2)}
.as-pl dd{margin:0;font-weight:600}
.as-pl .left dd{color:var(--gold-l)}
.as-q{margin:0;font-size:14px;line-height:1.35}
.as-chips{display:flex;gap:6px;margin:4px 0 0}
.as-chips span{padding:5px 10px;border:1px solid var(--pearl-rule);border-radius:999px;font-size:12px}
.as-chips span:last-child{border-color:var(--gold-l);color:var(--gold-l)}
#portal .as-note{margin:0}

/* ---------- Insurance: health and life as two equal cards (the star chart is gone) ---------- */
.ins-cards{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ins-cards>li{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);border:1px solid var(--pearl-faint);border-radius:20px;background:linear-gradient(180deg,rgba(251,250,247,.035),rgba(251,250,247,0))}
.ins-cards h3{color:var(--paper);font-size:clamp(22px,.8vw + 17px,28px);letter-spacing:-.02em}
.ins-cards p{max-width:26em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.5}
.ins-cards .ins-by{max-width:none;margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--pearl-faint);font-size:16px}
.ph{color:var(--gold-l)}
@media (max-width:640px){.ins-cards{grid-template-columns:1fr}.ins-cards>li{padding:var(--s5)}}

/* The IRS letter decoder's room, held before its module mounts (ZT-433, Oct 4: it grew from about 240 px to its full height
   after load and pushed the next section down). Measured at 320-1920 px with its first notice open, plus a little, so it
   never grows into the next section. */
[data-widget="tax-decoder"]{min-height:calc(2144px - 168vw)}
@media (min-width:561px){[data-widget="tax-decoder"]{min-height:calc(2030px - 152vw)}}
@media (min-width:768px){[data-widget="tax-decoder"]{min-height:calc(1120px - 34vw)}}
@media (min-width:1061px){[data-widget="tax-decoder"]{min-height:calc(2017px - 93vw)}}
@media (min-width:1200px){[data-widget="tax-decoder"]{min-height:calc(1448px - 45.6vw)}}
@media (min-width:1280px){[data-widget="tax-decoder"]{min-height:max(815px,calc(1265px - 31.25vw))}}