/* /self-employed only. Loaded after tokens.css and site.css, so it reuses the homepage's tokens, type, sections,
   ledgers, badges, deflist and footer, and adds only what this page has that the homepage doesn't. No prototype was
   approved for this page; the layout follows spec §4 and the homepage's own patterns. */

/* ---- the week strip: the earlier rounds' prototype strip (round 4-10 launch pages), verbatim ---- */
.stamp{ display:block; font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-wrap:balance; }
.nowrap{ white-space:nowrap; }
.strip-fig > figcaption .stamp{ text-wrap:balance; }
/* strips (prototype) */
.strip-fig{ margin:0; }
.strip-fig > figcaption{ margin-bottom:var(--s3); }
.strip{ --n:7; --top:36px; position:relative; padding-top:var(--top); }
.strip__cells{ list-style:none; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); }
.strip__cell{ position:relative; display:flex; flex-direction:column; align-items:stretch; text-align:center; border-left:1px solid var(--line); }
.strip__cell:first-child{ border-left:0; }
.strip__day{ display:flex; flex-direction:column; align-items:center; padding:var(--s1) 0 var(--s2); }
.strip__wd{ font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding-left:.14em; }
.strip__d{ font:500 var(--fs-body)/1.3 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (min-width:760px){ .strip__d{ font-size:var(--fs-lead); } }
.strip__note{ display:block; min-height:calc(var(--fs-micro) * 1.6); margin-top:var(--s1); font:400 var(--fs-micro)/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:.14em; }
@media (max-width:759px){ .strip__wd,.strip__note{ letter-spacing:0; padding-left:0; } }
.strip__cell.is-past{ color:var(--muted); }
.strip__cell.is-today .strip__day{ background:var(--ink); color:var(--bg); }
.strip__cell.is-close .strip__day{ box-shadow:inset 0 -2px 0 var(--ink); }
.strip__flag{ position:absolute; bottom:100%; left:50%; margin-bottom:4px; height:25.9px; width:calc(25.9px * 16.89 / 19.78);
  transform:translateX(-35%); overflow:visible; color:inherit; }
.strip__bracket{ position:absolute; top:0; left:calc(100% * var(--from) / var(--n)); width:calc(100% * var(--span) / var(--n));
  display:flex; flex-direction:column; align-items:center; font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.strip__bracket::after{ content:""; align-self:stretch; height:6px; margin:3px 6px 0; border:1.5px solid var(--ink); border-bottom:0; }
.strip__marks{ margin-top:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.strip__mark{ display:block; width:max-content; max-width:100%; }
.strip__mark--at{ margin-left:calc(100% * (var(--at) + .5) / var(--n)); transform:translateX(-50%); }
.strip__mark--end{ margin-left:auto; text-align:right; }
.home-week{ --n:7; --at:3; }
.home-se__strip{ width:100%; }

/* ---- SE0: the current page in the masthead, marked by a 2px underline as well as the URL (spec §4.1) ---- */
.masthead__nav a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--ink); }

/* ---- SE1: the hero ---- */
.se-hero{ padding-block:var(--s5) var(--s5); }
@media (min-width:1024px){ .se-hero{ padding-bottom:var(--s6); } }
.se-hero__h1{ font:900 var(--fs-h3)/var(--lh-head) var(--display); letter-spacing:-.04em; text-wrap:balance; }
@media (min-width:760px){ .se-hero__h1{ font-size:var(--fs-display); } }
.se-hero__sub{ margin-top:var(--s3); max-width:var(--measure); font-size:var(--fs-body); line-height:var(--lh-body); text-wrap:pretty; }
@media (min-width:760px){ .se-hero__sub{ font-size:var(--fs-lead); } }
.se-deps{ margin-top:var(--s4); }
.se-deps caption{ caption-side:top; text-align:left; padding-bottom:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.se-deps thead th{ font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding-bottom:var(--s1) !important; border-bottom:1px solid var(--line); }
.se-deps thead th + th{ text-align:right; padding-left:var(--s3) !important; }   /* a real gap between the heads (they touched at 320px) */
@media (max-width:419px){ .se-deps thead th{ letter-spacing:.06em; } }
.se-deps tbody th{ padding-right:var(--s3) !important; }
.se-deps .rule-double{ margin-top:var(--s1); }
.se-hero .rule-double{ margin-top:var(--s1); }
.se-hero__cap{ margin-top:var(--s2); max-width:var(--measure); color:var(--muted); text-wrap:pretty; }
.se-hero .get{ margin-top:var(--s4); }

/* ---- SE2 and SE3: words beside an amounts column from 1024px; stacked below ---- */
.se-split{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:var(--s5); }
@media (min-width:1024px){ .se-split{ grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); column-gap:var(--s5); align-items:start; } }
.se-amount{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding-bottom:var(--s2); border-bottom:1px solid var(--line); }
.se-amount__label{ color:var(--muted); }
.se-amount__fig{ font:500 var(--fs-h3)/1.1 var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
@media (min-width:760px){ .se-amount__fig{ font-size:var(--fs-display); } }
.se-figcol{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--s4); }
@media (max-width:1023px){ .se-figcol{ align-items:center; } .se-figcol .se-amount{ align-self:stretch; } }
.se-aside{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); max-width:var(--measure); }
.se-aside__note{ margin-top:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono); color:var(--muted); }
.se-aside__note a{ display:inline-block; padding-block:12px; margin-block:-12px; }
.se-aside sup{ font-size:.7em; line-height:0; }
.se-strip{ margin-top:var(--s5); }
.se-strip .strip{ --top:40px; }

/* ---- the O4-Varies screen (canvas, current), rebuilt under .nscr--o4 from its inline styles; tokens for its literals ---- */
.nscr--o4 .o4{ width:390px; height:844px; padding:60px 24px 40px; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font-family:var(--body); text-align:left; pointer-events:none; -webkit-user-select:none; user-select:none; }
.nscr--o4 p, .nscr--o4 h1{ margin:0; }
.nscr--o4 .o4__top{ display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.nscr--o4 .o4__back{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:-12px; }
.nscr--o4 .o4__back svg{ fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.nscr--o4 .o4__bar{ flex-grow:1; height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.nscr--o4 .o4__fill{ display:block; width:40%; height:100%; background:var(--brand); border-radius:99px; }
.nscr--o4 .o4__step{ font:400 12.6px/normal var(--mono); color:var(--muted); }
.nscr--o4 .o4__h{ font:900 32.9px/1.12 var(--display); letter-spacing:-.025em; }
.nscr--o4 .o4__p{ margin-top:8px; font-size:15.5px; line-height:1.55; color:var(--muted); }
.nscr--o4 .o4__field{ margin-top:25.9px; }
.nscr--o4 .o4__label{ display:block; margin-bottom:8px; font:400 12.6px/normal var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nscr--o4 .o4__box{ display:flex; align-items:baseline; gap:4px; background:var(--surface); border:2px solid var(--brand-deep); border-radius:9.9px; padding:14px 16px; }
.nscr--o4 .o4__cur{ font:500 32.9px/normal var(--mono); color:var(--muted); }
.nscr--o4 .o4__val{ flex-grow:1; min-height:44px; font:500 32.9px/normal var(--mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
/* the crop: the screen down to 16px below the field block, clear of the cards and the filled "Next" (spec §4.3) */
.phone-frame[data-screen="O4-Varies"]{ --crop-b:389.4;  /* measured: the field block ends at 373.4 */ }
.phone-frame[data-screen="O4-Varies"] .phone-frame__device{ border-bottom:1px dashed var(--line); }
.phone-frame--o4-fit{--k:0.74;--frame:image-set(url("/assets/phone-front-k074@1x.png") 1x, url("/assets/phone-front-k074@2x.png") 2x, url("/assets/phone-front-k074@3x.png") 3x);--frame-w:327px;--frame-h:660px;}
@media (min-width:375px){ .phone-frame--o4-fit{--k:0.76;--frame:image-set(url("/assets/phone-front-k076@1x.png") 1x, url("/assets/phone-front-k076@2x.png") 2x, url("/assets/phone-front-k076@3x.png") 3x);--frame-w:335px;--frame-h:678px;} }
@media (min-width:390px){ .phone-frame--o4-fit{--k:0.8;--frame:image-set(url("/assets/phone-front-k080@1x.png") 1x, url("/assets/phone-front-k080@2x.png") 2x, url("/assets/phone-front-k080@3x.png") 3x);--frame-w:353px;--frame-h:714px;} }

/* ---- counsel.tax on: SE1's receipt, SE3's moved table, SE4's amount block, SE5's ledger (spec §4.2, §4.4-§4.6) ---- */
.se-hero__stamp{ margin-bottom:var(--s2); }
.se-receipt{ margin-top:var(--s4); }
.se-receipt caption,.se-paid__t caption{ caption-side:top; text-align:left; padding-bottom:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.se-receipt tbody th,.se-paid__t tbody th{ padding-right:var(--s3) !important; }
.se-receipt tfoot :is(th,td){ height:auto; padding-top:var(--s2) !important; font-weight:500; }
.se-receipt__total{ font-size:var(--fs-h3) !important; letter-spacing:-.02em; }
@media (min-width:760px){ .se-receipt__total{ font-size:var(--fs-display) !important; } }
.se-share .se-deps,.flow > .se-deps{ margin-top:var(--s4); }
.se-deps__rule{ margin-top:var(--s1); }
.se-paid{ align-items:stretch; }
.se-paid__t :is(th,td){ height:32px; font-size:var(--fs-body); }
.se-paid__t td{ font-size:var(--fs-lead); }
.se-paid__t tfoot :is(th,td){ color:var(--ink); font-weight:500; font-size:var(--fs-h3); }
@media (max-width:419px){ .se-receipt caption,.se-paid__t caption{ letter-spacing:.06em; } }