/* Homepage — D2 register in Lime North's own expression (BUILD-QUEUE-2026-10-09-homepage-devices.md).
   Taken from D2: dark atmospheric hero, floating product cards, bento of product scenes, dark set-piece
   sections, a pale band for steps. Kept Lime North: ink/lime tokens, Sora/DM Sans/JetBrains Mono, lime
   CTA, light sticky nav, straight hero edge. Not taken: navy-to-coral gradient, serif-italic accent word,
   glowing white pill, glass nav, rounded sheet over the hero, ledger-line horizon. */

/* ---------- hero: ink night, lime dawn ---------- */
/* Night to dawn (13 Oct): deep ink at the top, a very dark forest-olive through the middle, a soft lime
   dawn low in the hero (behind the window's top edge), then the fade to the page behind the window.
   Tones are custom properties so page overrides change one value, not the whole gradient:
   --hd-end (what the fade lands on), --hd-fade (how far above the foot the fade starts), --hd-tail
   (a flat run of --hd-end at the very foot). */
.hero-d{--hd-0:#070906;--hd-1:#0B1009;--hd-2:#111A0C;--hd-3:#2C3A1F;--hd-end:#fff;--hd-fade:300px;--hd-tail:0px;
  background:
    radial-gradient(62% 300px at 50% calc(100% - var(--hd-fade) - 40px),rgba(200,240,90,.17),transparent 72%),
    radial-gradient(40% 260px at 10% calc(100% - var(--hd-fade) - 140px),rgba(78,107,0,.38),transparent 75%),
    radial-gradient(40% 260px at 90% calc(100% - var(--hd-fade) - 160px),rgba(78,107,0,.32),transparent 75%),
    linear-gradient(180deg,var(--hd-0) 0,var(--hd-1) 34%,var(--hd-2) calc(100% - var(--hd-fade) - 80px),var(--hd-3) calc(100% - var(--hd-fade) + 80px),var(--hd-end) calc(100% - var(--hd-tail)),var(--hd-end) 100%);
  padding:84px 0 0;isolation:isolate}
.hero-d:before{inset:120px -20% auto;height:760px;background:radial-gradient(680px 280px at 50% 76%,rgba(200,240,90,.20),transparent 70%),radial-gradient(460px 280px at 14% 40%,rgba(78,107,0,.20),transparent 70%),radial-gradient(460px 280px at 86% 34%,rgba(78,107,0,.16),transparent 70%);z-index:-1}
.hero-d:after{content:"";position:absolute;inset:0 0 300px;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hd-sky{position:absolute;inset:0 0 300px;z-index:-1;overflow:hidden;pointer-events:none}
.hd-sky i{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(80px);opacity:.14;background:#C8F05A;animation:hdDrift 26s ease-in-out infinite alternate}
.hd-sky i:nth-child(1){left:-120px;top:120px;background:#4E6B00;opacity:.42}
.hd-sky i:nth-child(2){right:-140px;top:40px;animation-duration:32s;background:#3D5410;opacity:.38}
.hd-sky i:nth-child(3){left:40%;top:420px;width:520px;height:300px;animation-duration:38s;opacity:.10}
@keyframes hdDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,-40px,0)}}
.hero-d h1{color:#fff}
.hero-d h1 .hl{color:var(--lime)}
.hero-d h1 .hl:after{content:none}
.hero-d .sub{color:#C9CEBF}
.hero-d .tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#E9EDE1}
.hero-d .tag .dot{background:var(--lime)}
.hero-d .fine{color:#A9AF9E}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.hero-d .btn-lime{box-shadow:0 14px 34px -14px rgba(200,240,90,.7)}
.hero-d .win{background:#F5F7F0;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(200,240,90,.18),0 60px 120px -40px rgba(0,0,0,.85)}
.hero-d .mock::before{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.hero-d .illus{color:var(--muted);padding:18px 0 22px;margin:0}
.hero-d .float{border:1px solid rgba(200,240,90,.28)}
.hd-card{position:absolute;left:-84px;bottom:96px;width:250px;padding:16px 18px;border-radius:16px;background:rgba(20,24,16,.86);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);font-family:var(--text);color:#fff;z-index:2;font-variant-numeric:tabular-nums}
.hd-card small{font-size:13px;font-weight:500;display:block;color:var(--lime);margin-bottom:10px}
.hd-card p{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#C9CEBF;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.hd-card p b{color:#fff;font-weight:600}
.hd-card em{display:block;font-style:normal;font-size:12px;color:#B9E06A;margin-top:10px}
@media (max-width:1180px){.hd-card{display:none}}
@media (prefers-reduced-motion:reduce){.hd-sky i{animation:none}}

/* ---------- services bento: each tile a product scene ---------- */
.bento{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento .gcard:nth-child(1),.bento .gcard:nth-child(4){grid-column:span 2}
.bento .gcard{display:flex;flex-direction:column}
.bento .gcard ul{flex:1}
.bento .gcard:hover{box-shadow:0 1px 0 rgba(14,15,12,.04),0 30px 60px -28px rgba(78,107,0,.45)}
.scene{position:relative;background:linear-gradient(160deg,#F3F6EC,#FAFBF7);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;margin:0 0 22px;min-height:150px;font-family:var(--text);overflow:hidden;font-variant-numeric:tabular-nums}
.scene:before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(200,240,90,.35),transparent)}
.sc-l{position:relative;display:block;font-size:12.5px;font-weight:600;color:var(--olive);margin-bottom:10px}
.sc-f{position:relative;display:block;font-size:12.5px;color:var(--muted);margin-top:10px}
.scene ul{position:relative;display:grid;gap:7px;list-style:none;flex:none}
.scene li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--ink)}
.scene li:before{content:none}
.scene li b{margin-left:auto;font-weight:600}
.sc-pay li i{font-style:normal;width:20px;height:20px;border-radius:6px;background:var(--lime-soft);color:var(--olive);display:grid;place-items:center;font-size:11px;font-weight:700}
.sc-lc li.t{background:var(--ink);color:#fff;border-color:var(--ink)}
.sc-lc li.t b{color:var(--lime)}
.sc-months{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sc-months i{font-style:normal;text-align:center;padding:8px 0;border-radius:8px;font-size:12px;font-weight:600;border:1px dashed #C9CEC0;color:var(--muted);background:#fff}
.sc-months i.d{background:var(--ink);border:1px solid var(--ink);color:var(--lime)}
.sc-months i.n{background:var(--lime-soft);border:1px solid #CFE79A;color:var(--olive)}
.sc-cf svg{position:relative;width:100%;height:84px}
.sc-cf .area{fill:rgba(200,240,90,.28)}
.sc-cf .ln{fill:none;stroke:var(--olive);stroke-width:2;vector-effect:non-scaling-stroke}
.sc-cf .po{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
@media (max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .gcard:nth-child(1),.bento .gcard:nth-child(4){grid-column:auto}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}}

/* ---------- objection set-piece ---------- */
.obj-wrap{padding:0;background:#0B0D09}
.obj{position:relative;isolation:isolate;padding:104px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.obj:before{content:"";position:absolute;inset:auto -10% -220px;height:520px;z-index:-1;background:radial-gradient(560px 300px at 30% 70%,rgba(200,240,90,.22),transparent 70%)}
.obj .kicker{color:var(--lime)}
.obj h2{color:#fff}
.obj .hl-d{display:block;color:var(--lime)}
.obj-copy p{color:#C9CEBF;margin:18px 0 24px;max-width:520px}
.more-d{color:var(--lime)}
.more-d:hover{color:#fff}
.obj-card{background:#FBFCF8;border-radius:20px;padding:24px 26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);color:var(--ink)}
.oc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.oc-head b{font:600 17px var(--head);letter-spacing:-.015em}
.oc-head span{font:600 12.5px var(--text);color:var(--olive)}
.obj-card ul{list-style:none}
.obj-card li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px;color:var(--body)}
.obj-card li b{font:600 14px var(--mono);color:var(--ink);text-align:right}
.obj-card li b.pill{background:var(--ink);color:var(--lime);padding:3px 10px;border-radius:999px;font-size:12.5px}
.obj-card li b.y{color:var(--pos)}
.obj-card li b.n{color:#B42318}
.oc-foot{font:500 12.5px var(--text);color:var(--muted);margin-top:14px;font-variant-numeric:tabular-nums}
@media (max-width:960px){.obj{grid-template-columns:minmax(0,1fr);padding:72px 0;gap:36px}.obj-copy{order:-1}}
@media (max-width:560px){.obj{padding:56px 0}.obj-card{padding:20px 18px}.obj-card li{font-size:14px}}

/* ---------- steps on a line, in a pale dawn band ---------- */
.dawn{background:var(--bg-2)}
.steps-line{position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.steps-line:before{content:"";position:absolute;left:12.5%;right:12.5%;top:25px;height:4px;border-radius:4px;background:var(--lime)}
.steps-line .step{position:relative;background:none;border:0;padding:0 6px}
.steps-line .step .no{position:relative;width:54px;height:54px;border-radius:50%;margin:0 auto 18px;background:var(--ink);color:var(--lime);border:4px solid var(--bg-2);font-size:16px}

@media (max-width:880px){.steps-line{grid-template-columns:minmax(0,1fr);gap:28px;text-align:left}.steps-line:before{left:25px;right:auto;top:28px;bottom:28px;width:4px;height:auto;background:var(--lime)}.steps-line .step{display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:18px;padding:0}.steps-line .step .no{margin:0;grid-row:span 2}.steps-line .step p{margin-top:4px}}

/* ---------- inline mini calculator ---------- */
.mini-calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;margin-top:48px;padding:40px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.mc-copy h3{font-size:26px;letter-spacing:-.03em;margin-bottom:10px}
.mc-copy p{margin-bottom:18px}
.mc-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.mc-form label{display:grid;gap:6px;font:600 13px var(--text);color:var(--ink)}
.mc-form label span{display:block}
.mc-form input{width:100%;font:500 16px var(--mono);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#FAFBF7;color:var(--ink);min-height:46px}
.mc-form input:focus-visible{outline:3px solid var(--olive);outline-offset:1px;border-color:var(--olive)}
.mc-form input[aria-invalid=true]{border-color:#B42318}
.mc-out{grid-column:1/-1;display:grid;gap:0;border-top:2px solid var(--ink);margin-top:6px;padding-top:4px}
.mc-out div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:1px dashed var(--line)}
.mc-out div:last-child{border-bottom:0}
.mc-out small{font:500 13px var(--text);color:var(--muted)}
.mc-out b{font:600 18px var(--mono);color:var(--ink);overflow-wrap:anywhere;text-align:right}
.mc-out div:nth-child(2){background:var(--lime-soft);border-radius:10px;border-bottom:0;padding:12px 12px}
.mc-out div:nth-child(2) b{color:var(--olive);font-size:22px}
.mc-note{grid-column:1/-1;font:500 12.5px var(--text);color:var(--muted);min-height:1em;font-variant-numeric:tabular-nums}
@media (max-width:960px){.mini-calc{grid-template-columns:minmax(0,1fr);padding:24px;gap:24px}}
@media (max-width:520px){.mc-form{grid-template-columns:minmax(0,1fr);padding:18px}}

/* ---------- FAQ split ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq-split .faq{margin:0;max-width:none}
.fs-head{position:sticky;top:100px}
.fs-head p{margin-top:16px}
.fs-head a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lime);text-decoration-thickness:2px}
@media (max-width:880px){.faq-split{grid-template-columns:minmax(0,1fr);gap:28px}.fs-head{position:static}}

/* ---------- final CTA: two doors + one line that lowers the ask ---------- */
.final-btns{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.final-line{font:500 13px var(--text);margin:18px auto 0!important;color:#A9AF9E!important;font-variant-numeric:tabular-nums}
/* fixes after first render */
.obj a.more-d{color:var(--lime)}
.obj a.more-d:hover{color:#fff}
.bento{text-align:left}
.bento .gcard ul{align-content:start}
.bento .gcard .scene{margin-right:48px}

/* QA fixes (9 Oct): caption above the window shadow, mobile highlight, focus on dark, phone scenes, catch-up bar */
.hero-d .illus{position:relative;z-index:1}
.hero-d h1 .hl{background:none!important;padding:0!important;margin:0!important}
.hero-d .fine{text-wrap:balance}
@media (max-width:640px){.bento .gcard .scene{margin-right:0;margin-top:46px}}
.sc-seg{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.sc-seg i{height:14px;border-radius:3px;background:#E3E6DC}
.sc-seg i.d{background:var(--ink)}
.sc-seg i.n{background:repeating-linear-gradient(45deg,var(--lime) 0 4px,#E4F5B8 4px 8px)}
.sc-seg-l{position:relative;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:4px 0 8px}
.scene ul.sc-led li{padding:6px 10px;font-size:12px}
.sc-led li b{font-weight:600}
.sc-led li:last-child b{color:var(--olive)}
.hd-card{left:-118px;bottom:64px}
.hero-d .illus{color:var(--body)}

/* ---------- inner pages: the same dark hero, shorter (rollout 9 Oct) ----------
   Add `hero-d` to an inner hero (`hero center inner hero-d`). Without a product window the hero
   ends on dark with a straight edge; with one, the window rises into the page as on the homepage. */
.hero-d.inner{padding:64px 0 0}
.hero-d.inner:not(:has(.mock)){background:radial-gradient(60% 200px at 50% 100%,rgba(200,240,90,.13),transparent 75%),radial-gradient(45% 240px at 8% 70%,rgba(78,107,0,.30),transparent 75%),linear-gradient(180deg,var(--hd-0),var(--hd-1) 45%,var(--hd-2));padding-bottom:88px}
.hero-d.inner:not(:has(.mock)):before{inset:-120px -20% auto;height:640px}
.hero-d.inner:not(:has(.mock)) .hd-sky,.hero-d.inner:not(:has(.mock)):after{inset:0}
.hero-d .crumbs ol{color:#A9AF9E}
.hero-d .crumbs li+li:before{color:#5C6152}
.hero-d .crumbs a{color:#E9EDE1;text-decoration-color:rgba(200,240,90,.5)}
.hero-d .crumbs a:hover{color:#fff}
.hero-d .fill{background:#FFF1B8;color:#5A4500}
.hero-d .btn-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
.hero-d .btn-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.hero-d .btn-dark{background:var(--lime);color:var(--ink);box-shadow:0 14px 34px -14px rgba(200,240,90,.7)}
.hero-d .btn-dark:hover{background:#D6F77A}
.hero-d > .wrap > .kicker{color:var(--lime)}
.hero-d > .wrap > p:not(.illus):not(.fine),.hero-d > .wrap > .lead{color:#C9CEBF}
.hero-d .tag.tag-ok{background:rgba(200,240,90,.12);border-color:rgba(200,240,90,.3);color:#E9EDE1}
/* base contrast (rollout findings): fine print on the lime glow; caption above the window shadow in ink */
.hero-d .fine{color:#E1E5D8}
.hero-d .illus{color:var(--ink)}
.obj-wrap{overflow:hidden}
/* perf audit (9 Oct): the lights drift twice (~1 min) then rest — no endless GPU redraw; calculator label AA */
.hd-sky i{animation-iteration-count:2}
.mc-out small{color:#60655A}

/* =====================================================================================================
   Homepage upgrade (13 Oct): denser product UI, merged sections, line icons, one caption fix.
   ===================================================================================================== */

/* sample caption under every dark-hero window: its own solid strip, the window's footer, so it never
   sits on the shadow or the mid-grey of the fade (measured 2.6–3.5:1 before). Page files may still
   recolour or pad it; /uk/ keeps its own narrow-screen version. */
.hero-d .mock > .illus{position:relative;z-index:1;margin:0;padding:12px 16px 14px;background:#F5F7F0;border:1px solid rgba(255,255,255,.55);border-top:1px solid var(--line);color:var(--body);text-align:center;font:500 13px/1.4 var(--text);text-wrap:balance}
.hero-d .mock > .win + .illus{border-top-color:#E1E5D8}

/* status chips used inside product scenes */
.chip{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--text);padding:5px 8px;border-radius:999px;background:var(--bg-2);color:var(--body);border:1px solid var(--line);white-space:nowrap;flex:none}
.chip-ok{background:#E8F4EC;color:#17603C;border-color:#CDE6D7}
.chip-ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-rv{background:#FFF5D9;color:#6B4E00;border-color:#EEDDA6}
.chip-rv::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}
.chip-line{background:#fff}

/* hero dashboard: header row, KPIs, chart + payouts table, the close timeline */
.dash-x{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1060px){.dash-x{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dx-head{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dx-head > div{margin-right:auto;display:grid;gap:2px}
.dx-head small{font:500 13px var(--text);color:var(--muted)}
.dx-head strong{font:600 17px var(--head);letter-spacing:-.02em}
.dash-x .chart{grid-column:span 2}
.dash-x .bars{height:132px;gap:8px}
.payx{grid-column:span 2;border:1px solid var(--line);border-radius:14px;padding:18px}
.payx h2{letter-spacing:-.01em;font:600 14px var(--head);margin-bottom:10px;display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.payx h2 span{color:var(--muted);font-weight:500}
.payx table{width:100%;border-collapse:collapse;font:500 12.5px var(--text);color:var(--ink);font-variant-numeric:tabular-nums}
.payx th{font:500 13px var(--text);color:var(--muted);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--line)}
.payx td{padding:8px 0;border-bottom:1px dashed var(--line)}
.payx .n{text-align:right;padding-right:12px;white-space:nowrap}
.payx td:last-child{text-align:right}
.payx tr.t td{font-weight:600;border-bottom:0;border-top:2px solid var(--ink)}
.payx p{font:500 12.5px var(--text);color:var(--muted);margin-top:8px;text-align:right;font-variant-numeric:tabular-nums}
.ctl{grid-column:1/-1;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ctl li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:12px 14px;box-shadow:inset 0 3px 0 var(--olive)}
.ctl li+li{border-left:1px solid var(--line)}
.ctl small{font:500 13px var(--text);color:var(--muted)}
.ctl b{grid-column:1;font:600 12.5px var(--text);color:var(--ink);font-variant-numeric:tabular-nums}
.ctl .chip{grid-column:2;grid-row:1/span 2}
@media (max-width:1060px){.dash-x .chart,.payx,.ctl{grid-column:1/-1}}
@media (max-width:560px){
  .dash-x .chart{display:none}          /* the bars are decoration; the table carries the numbers */
  .dx-head strong{font-size:15px}
  .dx-head .chip-line,.dx-head .chip:not(.chip-ok){display:none}
  .payx{padding:14px}
  .payx th:nth-child(2),.payx td:nth-child(2){display:none}
  .ctl{grid-template-columns:1fr 1fr}
  .ctl li:nth-child(3){border-left:0}
  .ctl li:nth-child(n+3){border-top:1px solid var(--line)}
  .ctl li{padding:10px;grid-template-columns:minmax(0,1fr)}
  .ctl .chip{display:none}
  .kpi{padding:12px}
  .kpi em{font-size:12px;line-height:1.4;display:block}
}

/* line icons: one tile style for facts and problem cards */
.fact .ic,.fix-ic .fx .ic{width:44px;height:44px;border-radius:12px;background:var(--lime-soft);border:1px solid #DCEFAE;color:var(--olive);display:grid;place-items:center;flex:none}
.fix-ic .fx .ic{margin-bottom:18px}

/* services: who-it's-for folded in as one line; bento scenes */
.who-line{max-width:780px;margin:18px auto 0;font-size:15.5px;color:var(--body);text-wrap:balance}
.who-line span{font:600 13.5px var(--text);color:var(--olive);margin-right:8px}
.svc-more{margin-top:28px}
.scene .chip{margin-left:10px}
.sc-mo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px}
.sc-col{position:relative;min-width:0}
.sc-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.sc-days i{font-style:normal;font-size:10.5px;font-weight:600;text-align:center;padding:5px 0;border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.sc-days i.r,.sc-key i.r{background:var(--ink);border-color:var(--ink);color:#fff}
.sc-days i.i,.sc-key i.i{background:var(--olive);border-color:var(--olive);color:#fff}
.sc-days i.v,.sc-key i.v{background:var(--lime-soft);border-color:#CFE79A;color:var(--olive)}
.sc-days i.s,.sc-key i.s{background:#fff;border:2px solid var(--olive);color:var(--olive)}
.sc-key{position:relative;display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:8px;font-size:12px;color:var(--muted)}
.sc-key span{display:inline-flex;align-items:center;gap:5px}
.sc-key i{width:9px;height:9px;border-radius:3px;border:1px solid}
.scene .sc-closed{margin:10px 0 0}
.sc-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sc-f .chip{margin-left:0}
.sc-q li.t{background:var(--ink);color:#fff;border-color:var(--ink)}
.sc-q li.t b{color:var(--lime)}
.sc-seg.sc-seg5{grid-template-columns:repeat(5,1fr);gap:4px;margin-top:12px}
.sc-seg i.n{background:repeating-linear-gradient(45deg,var(--olive) 0 3px,var(--lime-soft) 3px 7px)}
@media (max-width:760px){.sc-mo{grid-template-columns:minmax(0,1fr)}}

/* problems: icon cards; on phones the icon sits beside the heading */
.fix-ic{text-align:left}
@media (max-width:640px){
  .fix-ic{gap:12px;margin-top:32px}
  .fix-ic .fx{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:18px}
  .fix-ic .fx .ic{grid-row:span 2;margin:0}
  .fix-ic .fx p{margin-top:4px;font-size:15px}
}

/* a repeated free-review door with its friction line */
.cta-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:40px}
.cta-row > span{font:500 13px var(--text);color:var(--body);font-variant-numeric:tabular-nums}
@media (max-width:560px){.cta-row{flex-direction:column;margin-top:32px}.cta-row .btn{width:100%;justify-content:center}}

/* how it works: the step circles sit on white here (the line punches through a white ring) */
#close .steps-line .step .no{border-color:#fff}
/* the monthly close as a 15-day calendar track */
.closecal{margin-top:52px;text-align:left;background:linear-gradient(180deg,#fff,#FBFCF8);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--shadow)}
.cc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap}
.cc-head b{font:600 19px var(--head);letter-spacing:-.02em}
.cc-head span{font-size:14.5px;color:var(--muted)}
.cc-track{list-style:none;position:relative;display:grid;grid-template-columns:repeat(var(--cd,15),minmax(0,1fr));margin-top:22px;padding-top:14px}
.cc-track::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,#D5D9CD 0 1px,transparent 1px calc(100% / var(--cd,15)));border-left:0}
.cc-track li{grid-column:var(--s)/calc(var(--e) + 1);position:relative;padding:18px 16px 0 0;display:grid;gap:4px;align-content:start}
.cc-track li::before{content:"";position:absolute;left:0;right:6px;top:0;height:6px;border-radius:6px;background:var(--ink)}
.cc-track li:nth-child(2)::before{background:#33470A}
.cc-track li:nth-child(3)::before{background:var(--olive)}
.cc-track li:nth-child(4)::before{background:repeating-linear-gradient(45deg,var(--olive) 0 4px,#B9CF85 4px 8px)}
.cc-track small{font:600 13.5px var(--text);color:var(--olive)}
.cc-track b{font:600 16px var(--head);letter-spacing:-.015em}
.cc-track span{font-size:14px;line-height:1.5;color:var(--body)}
.cc-roles{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.cc-roles b{font:600 15px var(--head);color:var(--ink);letter-spacing:-.01em}
.cc-roles b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--olive);margin-right:8px;vertical-align:1px}
@media (max-width:860px){
  .closecal{padding:22px 20px;margin-top:40px}
  .cc-track{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:0;margin-top:18px}
  .cc-track::before{display:none}
  .cc-track li{grid-column:auto;padding:0 0 0 18px}
  .cc-track li::before{left:0;right:auto;top:2px;bottom:2px;width:5px;height:auto}
  .cc-roles{flex-direction:column}
}

/* what you receive: the year-end package as the last deliverable */
.home .pack .sub{margin-top:14px}
.pack li.ye-pack{align-items:flex-start}
.pack li.ye-pack small{display:block;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:4px;line-height:1.45}
.pack-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}

/* section intros on the homepage: the sub sits 14px under its heading */
.home h2 + .sub{margin-top:14px}

/* tools: compact cards on phones (every link kept) */
@media (max-width:640px){
  .home .tools{gap:12px;margin-top:28px}
  .home .tool{min-height:0;padding:20px;gap:6px}
  .home .mini-calc{margin-top:32px}
}
/* phones: a little less air between sections */
@media (max-width:560px){.home main > section:not(.obj-wrap):not(.hero){padding:56px 0}.home .obj{padding:56px 0}}

/* dark-hero sky and grain: fade out instead of stopping on a hard line 300px above the foot
   (pages with their own mask in hero-d-a / hero-d-b keep theirs — their selectors are more specific) */
.hd-sky,.hero-d:after{-webkit-mask-image:linear-gradient(#000 calc(100% - 200px),transparent);mask-image:linear-gradient(#000 calc(100% - 200px),transparent)}

/* ---------- phones: the homepage reads in about two-thirds of the scrolling it used to ---------- */
@media (max-width:640px){
  /* services: the arrow moves beside the price, so the scene starts at the top of the card */
  .bento .gcard{padding:22px}
  .bento .gcard .scene{margin:0 0 18px}
  .bento .gcard .go{top:auto;bottom:18px;right:18px}
  .bento .gcard .svc-price{padding-right:52px}
  .sc-mo .sc-calx{display:none}     /* the close calendar is shown in full under "How it works" */
  .bento .gcard p{margin:8px 0 14px}
  /* problems: a list with hairlines instead of six boxed cards */
  .fix-ic{gap:0;border-top:1px solid var(--line)}
  .fix-ic .fx{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:16px 0}
  .fix-ic .fx:hover{box-shadow:none}
  /* how it works: the close track keeps day ranges and titles; the steps above carry the detail */
  .cc-track{grid-template-columns:1fr 1fr;gap:14px 12px}
  .cc-track li{padding-left:14px}
  .cc-track span{display:none}
  .cc-roles{gap:6px;margin-top:16px;padding-top:14px}
  .cc-head span{font-size:13.5px}
  /* tools: each card is one tappable row */
  .home .tool{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:16px 18px}
  .home .tool small{flex-basis:100%}
  .home .tool h3{flex:1;font-size:17px}
  .home .tool p,.home .tool b{display:none}
  .home .tool h3::after{content:" →";color:var(--olive)}
  .home .mc-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home .mc-form label{font-size:12.5px}
  /* pricing cards: a little less padding */
  .home .plan{padding:24px;gap:14px}
  .home .pack{gap:36px}
  .home .pack li{padding:12px 14px}
}
@media (max-width:640px){
  /* bento on phones: the scene and the sentence sell the service; the two bullets repeat it */
  .home .bento .gcard > ul{display:none}
  .home .bento .sc-cf{display:none}
  .home .svc-also{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;text-align:left}
  .home .svc-also span{grid-column:1/-1;margin:0 0 4px}
  .home .svc-also a{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;background:none}
  /* facts: icon beside the two lines, two per row */
  .home .facts .wrap{gap:14px 12px;padding-top:20px;padding-bottom:20px}
  .home .fact,.home .fact:last-child{flex-direction:row;align-items:flex-start;gap:10px}
  .home .fact .ic{width:36px;height:36px;border-radius:10px}
  .home .fact .ic svg{width:19px;height:19px}
  .home .fact b{font-size:14px}
  .home .fact span{font-size:12.5px}
  .home .hero-d .sub{font-size:17px}
  .home .kpi em{display:none}
  .home .cc-head span{display:none}
}
@media (max-width:640px){
  .home .moves{display:none}        /* the pricing intro already names what sets the price */
  .home .who-line{font-size:14.5px}
}

/* 13 Oct, second look */
.who-line i{font-style:normal;white-space:nowrap}
.who-line i:not(:last-child)::after{content:" ·";color:#A3AA92}
@media (min-width:1181px){.home .hero-d .hd-card{bottom:auto;top:300px}}
.sc-cfl{margin-top:10px}
.scene .sc-cfl li .chip{margin-left:auto}
/* the glow layer is 760px tall and stopped on a visible line on short or phone heroes: fade its foot */
.hero-d:before{-webkit-mask-image:linear-gradient(#000 62%,transparent 96%);mask-image:linear-gradient(#000 62%,transparent 96%)}
/* Hero payout table title is a <p> since 14 Oct (SEO audit O1); same look as the old .payx h2 */
.payx p.rc-t{letter-spacing:-.01em;font:600 14px var(--head);margin:0 0 10px;display:flex;justify-content:space-between;color:var(--ink);text-align:left;text-wrap:balance;font-variant-numeric:tabular-nums}
.payx p.rc-t span{color:var(--muted);font-weight:500}