/* Waynick Underwriting — marketing site.
 *
 * Redesigned at 1.158.0 around one idea: the columnar pad. Underwriting was
 * done on pale-green ruled ledger paper long before spreadsheets copied its
 * grid, and this product's argument is that it keeps the discipline of that
 * page (every figure foots, totals are ruled off, a mistake is marked where it
 * was made). So:
 *
 *   ledger  — the light sections: ledger-green paper with faint column rules,
 *             green-black ink, and the accountant's double underline on totals.
 *   night   — the dark sections: the app's own colours, so the screenshots and
 *             the live demos sit in the surface they come from.
 *
 * Every component reads its colours from the surface it is on (--bg, --fg,
 * --mute, --rule, --panel, --accent), so a block can move between the two
 * without a second set of rules. The deal pages still use the old class names
 * (`.paper`, plain `<section>`, `.eyebrow`): those map to the same surfaces.
 *
 * In a file rather than inline so the Content-Security Policy can name a
 * stylesheet and forbid `style=` attributes. The app's tokens are copied, not
 * imported: this site is a separate deploy, and a shared stylesheet is a way
 * for a marketing change to break production. */

:root{
  /* night: the app's palette */
  --night:#0B0F17;
  --night-panel:#111826;
  --night-panel-2:#0E1520;
  --night-rule:#1F2B3D;
  --night-rule-strong:#33445E;
  --night-fg:#E8EDF4;
  --night-mute:#8E9BB0;
  /* ledger: a columnar pad */
  --ledger:#EDF1E9;
  --ledger-sheet:#F7F9F4;
  --ledger-rule:#CBD8C6;
  --ledger-rule-faint:#DEE6D9;
  --ledger-fg:#16221C;
  --ledger-mute:#55635A;
  /* ink */
  --green:#1D9E75;
  --green-lift:#2ABE8E;
  --green-deep:#0E6B4E;
  --amber:#C98A2E;
  --amber-deep:#8A5410;
  --red:#C0392F;
  /* The app's dark theme, copied from frontend/src/index.css (1.160.2) so the
     site's statements are drawn in the app's own colours rather than near
     them. Copied, not imported, for the reason at the top of this file. */
  --app-bg:hsl(220 40% 6%);
  --app-card:hsl(220 32% 11%);
  --app-border:hsl(218 26% 19%);
  --app-fg:hsl(210 30% 96%);
  --app-mute:hsl(215 16% 62%);
  --app-primary:hsl(160 69% 37%);
  --app-positive:hsl(152 62% 50%);
  --app-destructive:hsl(351 85% 60%);
  --app-warning:hsl(38 92% 55%);

  --f-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1360px;
  --gutter:28px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* the surface every component reads; night unless a section says otherwise */
  --bg:var(--night);--fg:var(--night-fg);--mute:var(--night-mute);
  --rule:var(--night-rule);--rule-strong:var(--night-rule-strong);
  --panel:var(--night-panel);--accent:var(--green-lift);--pencil:var(--amber);
}
.ledger,.paper{
  --bg:var(--ledger);--fg:var(--ledger-fg);--mute:var(--ledger-mute);
  --rule:var(--ledger-rule);--rule-strong:#9FB39A;
  --panel:var(--ledger-sheet);--accent:var(--green-deep);--pencil:var(--amber-deep);
}
.night{
  --bg:var(--night);--fg:var(--night-fg);--mute:var(--night-mute);
  --rule:var(--night-rule);--rule-strong:var(--night-rule-strong);
  --panel:var(--night-panel);--accent:var(--green-lift);--pencil:var(--amber);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  margin:0;background:var(--night);color:var(--night-fg);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* A picture waiting to slide in from the right sits past the edge until it
   does. `clip`, not `hidden`: it trims that without making a scroll box, so
   the sticky parts of the page keep sticking. */
main{overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--fg)}
h1,h2{font-family:var(--f-display);font-stretch:74%;letter-spacing:-.012em;line-height:.96}
h3,h4{font-family:var(--f-body);font-weight:600;letter-spacing:-.005em;line-height:1.25}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--f-mono);font-variant-ligatures:none;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--green-lift);outline-offset:3px;border-radius:3px}
.ledger :focus-visible,.paper :focus-visible{outline-color:var(--green-deep)}
::selection{background:rgba(29,158,117,.28)}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- surfaces ---------- */
section{padding:112px 0;background:var(--bg);color:var(--fg);position:relative}
/* The pad's column rules: twelve, faint, centred on the content. */
.ledger,.paper{
  background-color:var(--ledger);
  background-image:linear-gradient(to right,var(--ledger-rule-faint) 1px,transparent 1px);
  background-size:calc((min(100vw,var(--wrap)) - 2 * var(--gutter)) / 12) 100%;
  background-position:center top;
}
.night + .night,.ledger + .ledger{border-top:1px solid var(--rule)}

/* ---------- section heads: the account name in the margin ---------- */
.head{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px 48px;
  margin-bottom:56px;align-items:start;
}
.label,.eyebrow{
  font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--accent);
  margin:10px 0 0;padding-top:12px;border-top:2px solid currentColor;max-width:220px;line-height:1.35;
}
.eyebrow{display:inline-block;margin:0 0 20px}
.head-main{max-width:820px}
h2{font-size:clamp(36px,5vw,64px);margin:0 0 22px;text-wrap:balance}
.sub{color:var(--mute);font-size:18px;line-height:1.6;max-width:42em}
.head-main .sub:last-child{margin-bottom:0}

/* ---------- header ---------- */
.site-bar,body > header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,23,.9);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--night-rule);padding-top:env(safe-area-inset-top);color:var(--night-fg);
}
.bar{display:flex;align-items:center;gap:26px;height:64px;max-width:1360px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-stretch:88%;font-weight:700;font-size:17px;letter-spacing:-.005em;white-space:nowrap}
.brand svg{color:var(--green);flex:none}
nav.links{position:relative;display:flex;gap:24px;margin-left:auto;font-size:14.5px}
nav.links a{color:var(--night-mute);text-decoration:none;padding:21px 0;transition:color .2s;white-space:nowrap}
nav.links a:hover,nav.links a.on,nav.links a[aria-current="page"]{color:#fff}
/* The section you are reading, marked by a rule that moves to it. */
nav.links .spy{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--green-lift);opacity:0;
  transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .2s}
nav.links .spy.on{opacity:1}
.bar-signin{color:var(--night-mute);text-decoration:none;font-size:14.5px;white-space:nowrap}
.bar-signin:hover{color:#fff}
.bar .btn{padding:9px 16px;font-size:14px}
/* Below the width where seven links fit, they fold into a menu (1.159.0):
   until then a phone had no way round the page but scrolling. */
.menu-btn{display:none;align-items:center;gap:8px;margin-left:auto;font:600 14px/1 var(--f-body);color:var(--night-fg);background:transparent;
  border:1px solid var(--night-rule-strong);border-radius:4px;padding:0 14px;min-height:40px;cursor:pointer;transition:border-color .2s}
.menu-btn:hover{border-color:var(--green-lift)}
.menu-btn::before{content:"";width:14px;height:9px;flex:none;
  background:linear-gradient(currentColor,currentColor) top/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 1.5px no-repeat;
  transition:transform .3s var(--ease-out)}
.menu-btn[aria-expanded="true"]::before{transform:scaleY(.25)}
.menu-btn[hidden]{display:none!important}
nav.links .menu-only{display:none}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-weight:600;font-size:15.5px;line-height:1.2;
  padding:13px 22px;border-radius:4px;text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;
  transition:background-color .2s,border-color .2s,color .2s,transform .12s var(--ease-out),box-shadow .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.btn-primary:hover{background:#18B083}
.ledger .btn-primary,.paper .btn-primary{background:var(--green-deep)}
.ledger .btn-primary:hover,.paper .btn-primary:hover{background:#0B5A41}
.btn-ghost{border-color:var(--rule-strong);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.cta-row{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:center;margin-top:30px}
/* The second action on a row: present, plainly subordinate to the first. */
.btn-text{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15.5px;color:var(--fg);
  text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule-strong);text-underline-offset:6px;
  transition:color .2s,text-decoration-color .2s}
.btn-text:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ---------- hero ----------
   Words on the left, the product on the right, both in the first screen
   (1.159.0): the statement used to start below the fold, under a block of
   counts that explained nothing on their own. */
.hero{padding:76px 0 92px;overflow:hidden}
/* The statement needs every year and its total in one view, about 760px;
   the headline takes the rest. (The page's measure widened to the header's
   1360px at 1.159.0 for this, and the screenshots grew with it.) */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px);gap:60px;align-items:center}
.hero-kicker{display:inline-block;font-size:15px;font-weight:600;color:var(--green-lift);margin:0 0 26px;padding-top:12px;border-top:2px solid currentColor}
.hero-title{font-size:clamp(54px,7vw,104px);font-stretch:68%;font-weight:760;line-height:.86;letter-spacing:-.018em;margin:0}
.hero-title > span{display:block}
.hero-side{margin-top:30px}
.lede{font-size:18px;line-height:1.58;color:#B9C4D4;max-width:34em;margin:0}
.hero-terms{font-size:14px;color:var(--night-mute);margin:12px 0 0}
/* The statement: a piece of the app, drawn as the app draws it. */
.statement{margin:0;background:var(--app-card);border:1px solid var(--app-border);border-radius:8px;overflow:hidden;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.statement-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;align-items:baseline;
  padding:16px 22px;border-bottom:1px solid var(--night-rule);background:var(--night-panel-2)}
.statement-title{font-family:var(--f-display);font-stretch:80%;font-weight:700;font-size:20px;color:#fff}
.statement-deal{font-size:12.5px;color:var(--night-mute)}
.statement-body{overflow-x:auto}
.statement-fallback{width:100%;height:auto}
.statement table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* The app's statement, cell for cell (1.160.2): CashFlowStatement.jsx draws
   12px mono throughout, a faint rule between rows, muted labels on ordinary
   lines and full-strength ones on totals, the accent rows tinted with the
   brand at 5% and their figures green or red by sign, and a ruled, sticky
   Total column. `.app-statement` is shared by the hero and the explorer demo,
   so the two cannot drift apart. */
.app-statement th,.app-statement td{padding:6px 12px;text-align:right;font-weight:400;color:var(--app-fg)}
.app-statement thead th{padding-top:8px;padding-bottom:8px;color:var(--app-mute);font-weight:400}
.app-statement thead th:first-child{text-align:left;font-weight:600;min-width:200px}
.app-statement thead th.tot{color:var(--app-fg);font-weight:600}
.app-statement tbody tr{border-top:1px solid hsl(218 26% 19% / .4)}
.app-statement tbody th{text-align:left;color:var(--app-mute)}
.app-statement tr.bold th{color:var(--app-fg);font-weight:700}
.app-statement tr.bold td{font-weight:600}
.app-statement tr.accent{background:hsl(160 69% 37% / .05)}
.app-statement tr.rule{border-bottom:2px solid var(--app-border)}
.app-statement td.tot,.app-statement th.tot{font-weight:600;box-shadow:inset 1px 0 0 var(--app-border)}
.app-statement .t-pos{color:var(--app-positive)}
.app-statement .t-neg{color:var(--app-destructive)}
.app-statement .t-warn{color:var(--app-warning)}
/* The hero holds every year and the total in its column: the app's 12px
   gutters, narrowed, and no minimum on the label column. */
.statement .app-statement th,.statement .app-statement td{padding-left:7px;padding-right:7px}
.statement .app-statement thead th:first-child{min-width:0}
.statement .app-statement th:first-child{padding-left:16px}.statement .app-statement tr > :last-child{padding-right:16px}
.statement-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--night-rule)}
.statement-kpis:empty{display:none}
.statement-kpis div{padding:16px 20px;border-left:1px solid var(--night-rule)}
.statement-kpis div:first-child{border-left:0}
.statement-kpis b{display:block;font-family:var(--f-mono);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.statement-kpis div:first-child b{color:var(--green-lift)}
.statement-kpis span{font-size:13.5px;color:var(--night-mute)}
.statement-kpis i{display:block;font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--night-mute);min-height:1.5em}
.statement-kpis i.up{color:var(--green-lift)}.statement-kpis i.down{color:#E59B90}
/* Two of the app's own levers, under the statement they move. */
.statement-try{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 26px;padding:16px 20px;border-top:1px solid var(--night-rule);background:var(--night-panel-2)}
.statement-try[hidden]{display:none}
.js .statement .statement-try{transition:opacity .6s var(--ease-out) .5s}
.js .statement:not(.ruled) .statement-try{opacity:0;visibility:hidden}
.try-lever{display:grid;gap:6px}
.try-k{font-size:12.5px;color:var(--night-mute)}
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--night-rule-strong);border-radius:5px;overflow:hidden;background:var(--night)}
.stepper button{width:40px;min-height:40px;background:transparent;border:0;color:var(--night-fg);font:500 18px/1 var(--f-mono);cursor:pointer;transition:background-color .15s,color .15s}
.stepper button:hover{background:rgba(42,190,142,.14);color:#fff}
.stepper button:disabled{opacity:.3;cursor:default;background:transparent}
.stepper output{display:flex;align-items:center;justify-content:center;min-width:128px;padding:0 6px;border-left:1px solid var(--night-rule);border-right:1px solid var(--night-rule);
  font:500 13px var(--f-mono);color:#fff;font-variant-numeric:tabular-nums}
.try-reset{background:transparent;border:0;padding:0 2px;min-height:40px;font:600 13.5px var(--f-body);color:var(--green-lift);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.try-reset[hidden]{display:none}
.try-state{flex-basis:100%;margin:0;font-size:13px;color:var(--night-mute)}
/* A figure the change moved shows it, the way a reviewer's highlighter would. */
.statement td.moved{animation:moved 1.6s var(--ease-out)}
@keyframes moved{0%,25%{background:rgba(201,138,46,.28);color:#fff}100%{background:transparent}}
.narrow-only{display:none}
.statement figcaption{padding:14px 20px 16px;border-top:1px solid var(--night-rule);font-size:14px;color:var(--night-mute)}
.statement figcaption a{color:var(--green-lift);text-underline-offset:3px}
/* A crosshair, the way a spreadsheet shows where you are. */
.statement tbody tr:hover th,.statement tbody tr:hover td{background:rgba(255,255,255,.025)}
.statement td.col-on,.statement th.col-on{background:rgba(42,190,142,.06)}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:72px 0 0;padding:0;border-top:1px solid var(--rule-strong)}
.facts > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;padding:20px 20px 0;border-left:1px solid var(--rule)}
.facts > div:first-child{border-left:0;padding-left:0}
.facts dd{margin:0;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.03em;color:var(--fg)}
.facts dt{font-size:13.5px;color:var(--mute);line-height:1.4}

/* ---------- columns of ruled text (were boxed cards) ---------- */
.card{position:relative;padding:22px 0 0;border-top:1px solid var(--rule-strong);min-width:0}
.card h3{font-size:19px;margin-bottom:10px}
.card .kicker{font-size:13.5px;font-weight:600;color:var(--accent);margin:0 0 6px}
.card p{color:var(--mute);font-size:15.5px;margin:0}
.card ul{margin:0;padding:0;list-style:none}
.card li{padding:9px 0 9px 18px;border-top:1px solid var(--rule);font-size:15px;color:var(--mute);position:relative}
.card li:first-of-type{border-top:0}
.card li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--accent)}
.duo,.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;margin-top:48px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 44px;margin-top:48px}
.trio.ruled{margin-top:64px}

/* ---------- the seven things: a ruled ledger ---------- */
.numbered{counter-reset:n;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.numbered li{counter-increment:n;position:relative;padding:26px 0 30px 64px;border-top:1px solid var(--rule)}
.numbered li::before{
  content:counter(n);position:absolute;left:0;top:20px;
  font-family:var(--f-display);font-stretch:70%;font-size:44px;font-weight:700;line-height:1;color:var(--accent);
}
.numbered h3{font-size:20px;margin-bottom:10px}
.numbered p{color:var(--mute);font-size:15.5px;margin:0}

/* ---------- screenshot frames ---------- */
.frame{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--night-panel-2);
  box-shadow:0 40px 80px -48px rgba(0,0,0,.85)}
.ledger .frame,.paper .frame{border-color:#AFC1AA;box-shadow:0 36px 70px -42px rgba(22,34,28,.55)}
.chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--night-rule);background:#0C121C}
.chrome i{width:9px;height:9px;border-radius:50%;background:#26344A;display:block}
.chrome .url{margin-left:12px;font-size:11.5px;color:var(--night-mute)}
.shots{position:relative}
/* Every shot is stacked in the same box and cross-faded. The first one is in
   normal flow so the container keeps its height without a hard-coded aspect
   ratio that would have to be edited whenever a capture size changes. */
.shots img{width:100%;height:auto;opacity:0;transition:opacity .5s ease}
.shots img:not(:first-child){position:absolute;inset:0;height:100%;object-fit:cover;object-position:top}
.shots img.on{opacity:1}
.shot-cap{font-size:13px;color:var(--mute);margin:16px 0 0;min-height:2.6em;max-width:64em}

/* The gallery: the app's own tab strip, as a row you can scroll. */
.gallery-tabs{display:flex;gap:2px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule);position:relative}
.gallery-tabs::-webkit-scrollbar{display:none}
.gallery-tabs button,.ab-controls button{
  flex:none;font-family:var(--f-body);font-size:14.5px;font-weight:500;cursor:pointer;
  background:transparent;border:0;color:var(--mute);padding:12px 14px 14px;min-height:44px;
  position:relative;transition:color .2s;
}
.gallery-tabs button:hover,.ab-controls button:hover{color:var(--fg)}
.gallery-tabs button[aria-selected="true"],.ab-controls button[aria-selected="true"]{color:var(--fg)}
.gallery-tabs button::after,.ab-controls button::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.gallery-tabs button[aria-selected="true"]::after,.ab-controls button[aria-selected="true"]::after{transform:scaleX(1)}

/* ---------- the check that catches you ---------- */
.ab{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:0 36px;align-items:start}
.ab-controls{grid-column:1 / -1;display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.ab > .frame{grid-column:1}
.ab > .shot-cap{grid-column:1}
/* The margin note, in the pencil a reviewer uses: it names what the model
   caught, beside the screen it caught it on, and only while it's showing. */
.pencil{grid-column:2;grid-row:2;align-self:center;margin:0;padding:6px 0 6px 18px;border-left:2px solid var(--pencil);
  color:var(--pencil);font-size:15px;line-height:1.5;font-weight:500;
  opacity:.0;transform:translateX(-10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.ab[data-state="rentroll-warning"] .pencil{opacity:1;transform:none}
.ab-note{margin-top:30px;color:var(--mute);font-size:15.5px;max-width:52em}

/* ---------- feature rows ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:88px}
.head + .feature{margin-top:0}
.feature h3{font-family:var(--f-display);font-stretch:82%;font-weight:700;font-size:clamp(25px,2.6vw,32px);line-height:1.05;letter-spacing:-.01em;margin:0 0 14px}
.feature p{color:var(--mute);margin:0 0 12px}
.feature ul{margin:16px 0 0;padding:0;list-style:none;color:var(--mute)}
.feature li{padding:10px 0 10px 18px;border-top:1px solid var(--rule);position:relative;font-size:15.5px}
.feature li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:1px;background:var(--accent)}
.feature li strong{color:var(--fg);font-weight:600}
.feature.flip > .frame,.feature.flip > .crop{order:2}
.feature.wide{grid-template-columns:1fr;gap:28px}
.feature.wide > div:first-child{max-width:72ch}
.feature .frame img{width:100%;height:auto}
.feature > .phone-frame{max-width:300px;width:100%;justify-self:center}

/* A cropped detail: a window onto one card of a full capture. */
.crop{overflow:hidden;border-radius:8px;background:var(--night);border:1px solid var(--rule)}
.ledger .crop,.paper .crop{border-color:#AFC1AA;box-shadow:0 30px 60px -42px rgba(22,34,28,.5)}
.crop img{width:100%;height:auto;display:block;transform-origin:top left}
.crop[data-zoom] img{width:200%;max-width:none}
.crop-top img{object-position:top}
.crop.framed{margin-top:8px}
/* The clips (1.177.0, §D275): recordings of the app in use, drawn at the
   recorder's shape so nothing jumps when the video replaces its still. */
.clip{position:relative}
.clip video{width:100%;height:auto;aspect-ratio:1600/1000;display:block;background:var(--night)}
/* Moving content over five seconds needs a way to stop it. Small and in the
   corner so it reads as a control and not as part of the recording. */
.clip-toggle{position:absolute;right:12px;bottom:12px;width:36px;height:36px;padding:0;border-radius:50%;
  border:1px solid var(--night-rule-strong);background:rgba(11,15,23,.78);color:var(--night-fg);
  display:grid;place-items:center;cursor:pointer;opacity:.8;transition:opacity .2s}
.clip-toggle:hover,.clip-toggle:focus-visible{opacity:1}
.clip-toggle:focus-visible{outline:2px solid var(--green-lift);outline-offset:2px}
.clip-toggle::before{content:"";width:12px;height:12px;background:currentColor;clip-path:polygon(18% 0,100% 50%,18% 100%)}
.clip-toggle[data-state="playing"]::before{width:11px;clip-path:none;background:linear-gradient(to right,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}

.phone-frame{border:1px solid var(--rule);border-radius:26px;overflow:hidden;background:#fff;padding:8px;
  box-shadow:0 30px 60px -34px rgba(22,34,28,.45)}
.night .phone-frame{background:var(--night-panel)}
.phone-frame img{border-radius:18px;max-height:640px;object-fit:cover;object-position:top}

/* ---------- exports: the browser and the server agree ---------- */
.reconcile{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin:0 0 16px;
  border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);padding:34px 0}
.rec-col{text-align:center}
.rec-head{font-size:13px;color:var(--mute);margin:0 0 10px;font-family:var(--f-body)}
.rec-fig{display:inline-block;font-size:clamp(26px,3.6vw,44px);font-weight:600;color:var(--fg);margin:0;letter-spacing:-.03em;padding-bottom:6px;
  border-bottom:4px double var(--accent)}
.rec-sub{font-size:14px;color:var(--mute);margin:10px 0 0}
.rec-mid{text-align:center}
.rec-tick circle,.rec-tick path{stroke:var(--accent)}
.rec-verdict{font-size:13px;color:var(--accent);margin:6px 0 0}
.rec-ring,.rec-check{stroke-dasharray:1;stroke-dashoffset:1}
.reconcile.in .rec-ring{animation:draw .8s var(--ease-io) forwards}
.reconcile.in .rec-check{animation:draw .45s var(--ease-io) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rec-note{color:var(--mute);font-size:14.5px;max-width:52em}

/* ---------- deal types: pick one, see it ---------- */
.explorer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.dealnav{display:grid;gap:0;margin:0}
.dealnav a{display:block;position:relative;padding:18px 0 18px 22px;border-top:1px solid var(--rule);text-decoration:none;color:inherit;transition:background-color .2s}
.dealnav a:last-child{border-bottom:1px solid var(--rule)}
.dealnav a::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease-out)}
.dealnav a:hover::before,.dealnav a:focus-visible::before,.dealnav a[aria-current="true"]::before{transform:scaleY(1)}
/* Dim the page you are on through its text: the entrance owns the link's own opacity. */
.dealnav a[aria-current="page"]{pointer-events:none}
.dealnav a[aria-current="page"] > *{opacity:.5}
.dealnav strong{display:block;font-family:var(--f-display);font-stretch:80%;font-size:26px;font-weight:700;line-height:1.05;margin-bottom:6px;color:var(--fg)}
.dealnav span{display:block;color:var(--mute);font-size:15px;line-height:1.5}
.explorer-view{position:sticky;top:100px}
.explorer-view .shots img:not(:first-child){object-fit:cover}

/* ---------- responsive rig ---------- */
.rig{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rig-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:545px}
.device{
  background:var(--night-panel-2);border:1px solid var(--night-rule);border-radius:16px;padding:12px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75);
  /* Width AND height, both animated, each step's box matching its capture's
     ratio, so the turn from portrait to landscape is the frame genuinely
     reshaping rather than an image being masked (see the sizes below). */
  transition:width .75s cubic-bezier(.34,1.24,.5,1),height .75s cubic-bezier(.34,1.24,.5,1);
}
/* Outer boxes: the inner screen plus 26px (12px padding a side, 1px border).
       390  508x1100 -> 236 x 481     834  825x1100 -> 300 x 391
      1280 1600x1000 -> 500 x 322    1680  1600x905 -> 540 x 317 */
.device[data-size="390"]{width:236px;height:481px}
.device[data-size="834"]{width:300px;height:391px}
.device[data-size="1280"]{width:500px;height:322px}
.device[data-size="1680"]{width:540px;height:317px}
.device-screen{position:relative;border-radius:8px;overflow:hidden;background:var(--night);width:100%;height:100%}
.device-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .55s ease}
.device-screen img.on{opacity:1}
.device-label{font-size:12.5px;color:var(--mute);margin:0}
.rig-controls{margin-bottom:26px}
.rig-label{display:block;font-size:13px;color:var(--mute);margin-bottom:10px;font-family:var(--f-body)}
.rig-range{width:100%;accent-color:var(--green);height:28px;cursor:pointer}
.rig-ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);margin-top:2px}
.rig-play{margin-top:18px;font-family:var(--f-body);font-size:14px;cursor:pointer;background:transparent;border:1px solid var(--rule-strong);
  color:var(--fg);padding:8px 16px;border-radius:4px;min-height:40px;transition:border-color .2s,color .2s}
.rig-play:hover{border-color:var(--accent);color:var(--accent)}
.rig-notes{list-style:none;margin:0;padding:0}
.rig-notes li{padding:14px 0;border-top:1px solid var(--rule);font-size:15.5px;color:var(--mute)}
.rig-notes li b{color:var(--fg);font-weight:600}

/* ---------- touch: each claim opens to its reasons ---------- */
.touch-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.touch-list{display:grid;gap:0;border-bottom:1px solid var(--rule)}
.touch-item{border-top:1px solid var(--rule)}
.touch-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 0;position:relative}
.touch-item summary::-webkit-details-marker{display:none}
.touch-item summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease-out)}
.touch-item[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.touch-item h3{font-size:18px}
.touch-item > :not(summary){margin-left:96px}
.touch-item p{color:var(--mute);font-size:15.5px;margin:0 0 18px}
.ti-num{flex:none;min-width:80px;font-size:13px;font-weight:600;color:var(--accent)}
.ti-viz{display:flex;align-items:flex-end;gap:16px;margin:0 0 20px 96px}
.tgt{display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;border-radius:6px;color:var(--mute);background:var(--panel)}
.tgt small{font-size:9px;opacity:.7}
.tgt-old{width:32px;height:32px;border:1px dashed #A7B4A2}
.tgt-new{width:67px;height:44px;border:2px solid var(--accent);color:var(--accent);font-weight:600}
.ti-viz.pulse .tgt-new{animation:pulse 1.4s ease 2}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(14,107,78,0)}50%{box-shadow:0 0 0 8px rgba(14,107,78,.14)}}
.ti-scroller{margin:0 0 20px 96px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:6px;background:var(--panel)}
.ti-strip{display:flex;min-width:820px}
.ti-strip span{flex:none;padding:12px 18px;font-size:12px;color:var(--mute);border-right:1px solid var(--rule);white-space:nowrap}
.ti-strip span:last-child{border-right:0}
.touch-foot{margin-top:40px;color:var(--mute);font-size:15.5px;max-width:58em}

/* ---------- notes: the claim visible, the working one click away ----------
   (1.159.0) Firms, security and after-close were each six to eight full
   paragraphs. Each is now a line you can read in passing, and the paragraph
   it came from opens under it, for whoever is doing the security review. */
.notes,.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-bottom:1px solid var(--rule)}
.head + .notes,.head + .faq{margin-top:0}
.notes{margin-top:48px}
.note{border-top:1px solid var(--rule)}
.note summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 14px;gap:6px 20px;padding:20px 0 22px;align-items:start}
.note summary::-webkit-details-marker{display:none}
.note summary h3{font-size:18px;transition:color .2s}
.note summary:hover h3{color:var(--accent)}
.note .gist{grid-column:1;color:var(--mute);font-size:15.5px;line-height:1.5}
.note summary::after{content:"";grid-column:2;grid-row:1;width:14px;height:14px;margin-top:4px;color:var(--mute);
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform .3s var(--ease-out),color .2s}
.note summary:hover::after{color:var(--accent)}
.note[open] summary::after{transform:rotate(45deg)}
.note > p{color:var(--mute);font-size:15.5px;margin:-8px 0 24px;max-width:62ch;padding-left:14px;border-left:2px solid var(--rule-strong)}
.note[open] > p{animation:panel-in .4s var(--ease-out)}
.faq-more{margin:32px 0 0;color:var(--mute);font-size:15.5px}
.faq-more a{color:var(--accent);text-underline-offset:3px}

/* Touch, folded into the any-screen section as its second half. */
.subpart{margin:104px 0 44px;max-width:820px;padding-top:28px;border-top:1px solid var(--rule-strong)}
.subpart-title{font-family:var(--f-display);font-stretch:76%;font-size:clamp(30px,3.6vw,46px);line-height:1;font-weight:700;letter-spacing:-.01em;margin:0 0 14px}
.subpart-lede{color:var(--mute);font-size:17px;margin:0;max-width:42em}

/* ---------- pricing ----------
   (1.159.0) A rate sheet per way of running it — in the cloud, on your own
   computers — with the columns ruled apart inside one panel, rather than five
   boxes of equal weight. Each plan says who it is for before what it costs. */
.tiers-group{font-size:14px;font-weight:600;color:var(--accent);margin:0 0 14px}
.tiers-group ~ .tiers-group{margin-top:64px}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule-strong);border-radius:6px;background:var(--panel);overflow:hidden}
.tiers.tiers-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tier{display:flex;flex-direction:column;min-width:0;padding:30px 30px 28px;border-left:1px solid var(--rule)}
.tier:first-child{border-left:0}
.tier.featured{background:#fff;box-shadow:inset 0 3px 0 var(--accent)}
.night .tier.featured{background:#152033}
.tier .name{font-size:14px;font-weight:600;color:var(--accent);margin:0 0 4px}
.tier .for{font-family:var(--f-display);font-stretch:82%;font-size:22px;font-weight:700;line-height:1.1;color:var(--fg);margin:0 0 22px;min-height:2.2em}
/* A price is a total, so it is ruled off like one. */
.tier .price{align-self:flex-start;font-family:var(--f-display);font-stretch:72%;font-size:54px;font-weight:760;letter-spacing:-.02em;margin:0;line-height:.95;
  padding-bottom:8px;border-bottom:4px double var(--rule-strong)}
.tier.featured .price{border-bottom-color:var(--accent)}
.tier .per{font-size:14px;color:var(--mute);margin:12px 0 20px}
.tier ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.tier li{padding:8px 0 8px 18px;border-top:1px solid var(--rule);font-size:15px;color:var(--mute);position:relative}
.tier li:first-child{border-top:0}
.tier li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--accent)}
.tier .btn{text-align:center;width:100%}
.tier-actions{display:flex;flex-direction:column;gap:8px}
.tier-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute)}
.terms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px;margin:48px 0 0;padding:0;border-top:1px solid var(--rule-strong)}
.terms > div{padding:16px 0 0}
.terms dt{font-size:13.5px;font-weight:600;color:var(--fg);margin:0 0 4px}
.terms dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--mute)}

/* ---------- honesty ---------- */
.honest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.honest > div{padding:24px 0 28px;border-top:1px solid var(--rule)}
.honest h3{font-size:18px;margin-bottom:8px}
.honest p{color:var(--mute);font-size:15.5px;margin:0}
/* The deal pages keep theirs as a list of one-line admissions. */
ul.honest{list-style:none;margin:32px 0 0;padding:0}
ul.honest li{padding:18px 0 20px;border-top:1px solid var(--rule);color:var(--mute);font-size:15.5px;line-height:1.55}
ul.honest strong{color:var(--fg);font-weight:600}

/* ---------- close + footer ---------- */
.close{padding:120px 0 128px}
.close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 72px;align-items:end}
.close h2{font-size:clamp(44px,6.2vw,88px);max-width:13ch}
.close .sub{font-size:19px}
/* The evaluation, in the order you would do it: a real sequence, so numbered. */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 0;padding:16px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s);grid-row:1 / span 2;font-family:var(--f-display);font-stretch:70%;font-size:30px;font-weight:700;line-height:1;color:var(--accent)}
.steps b{font-weight:600;color:var(--fg);font-size:17px}
.steps span{color:var(--mute);font-size:15px}
.site-foot,body > footer{border-top:1px solid var(--night-rule);padding:36px 0 calc(36px + env(safe-area-inset-bottom));background:var(--night);color:var(--night-mute)}
.foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:14px}
.foot .brand{color:var(--night-fg)}
.foot nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.foot nav a{color:var(--night-mute);text-decoration:none}
.foot nav a:hover{color:#fff}
.brand-sm{font-size:16px}

/* ---------- deal pages ---------- */
.dealhero{padding:96px 0 40px}
.dealhero h1{font-size:clamp(44px,7vw,96px);line-height:.9;margin:0 0 24px;font-stretch:70%;max-width:16ch}
.dealhero .lede{max-width:62ch}
.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:40px;border-top:1px solid var(--rule)}
.numbers div{padding:18px 20px 4px;border-left:1px solid var(--rule)}
.numbers div:first-child{border-left:0;padding-left:0}
.numbers b{display:block;font-family:var(--f-mono);font-size:24px;letter-spacing:-.02em;color:var(--fg)}
.numbers span{display:block;margin-top:6px;color:var(--mute);font-size:13.5px;line-height:1.4}
/* The deal pages' own list at their foot: a ruled grid there. */
section:not(#deals) > .wrap > .dealnav{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 28px;margin-top:40px}
section:not(#deals) > .wrap > .dealnav a:last-child{border-bottom:0}

/* ---------------------------------------------------------------------------
   The live demos (1.129.0). Drawn by demo/demo.js over the engine bundled in
   demo/engine.js. Always dark, like the screenshots around them, whichever
   section they sit in: they are a piece of the app, not of the page.
   ------------------------------------------------------------------------ */
.demo-wrap{margin-top:72px}
.head + .demo-wrap{margin-top:0}
.demo-label{font-size:14px;font-weight:600;color:var(--accent);margin:0 0 14px}
.demo{
  --fg:var(--night-fg);--mute:var(--night-mute);--rule:var(--night-rule);
  background:var(--night-panel-2);border:1px solid var(--night-rule);border-radius:8px;padding:18px;color:var(--night-fg);
  box-shadow:0 40px 80px -48px rgba(0,0,0,.8);font-size:15px;line-height:1.5;
}
.demo:not(.ready){min-height:120px;color:var(--night-mute)}
.demo button{font:inherit;color:inherit;cursor:pointer}
.demo-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.demo-hint{font-size:13px;color:var(--night-mute)}
.demo-toggle{display:inline-flex;flex-wrap:wrap;border:1px solid var(--night-rule);border-radius:5px;overflow:hidden}
.demo-toggle button{background:transparent;border:0;padding:8px 14px;font-size:13.5px;color:var(--night-mute);min-height:40px;transition:background-color .2s,color .2s}
.demo-toggle button[aria-pressed="true"]{background:var(--green);color:#fff}
.demo-toggle button:not([aria-pressed="true"]):hover{color:#fff}
.demo-kpis{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12.5px;color:var(--night-mute);margin-bottom:12px}
.demo-kpis b{color:var(--green-lift);font-size:15px;font-weight:600}
.demo-body{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);gap:14px;align-items:start}
.demo-scroll{overflow-x:auto;border:1px solid var(--app-border);border-radius:6px;background:var(--app-card)}
.demo-table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}
/* Rows, weights and tones come from `.app-statement`; these are the parts
   only a scrolling table needs — the header and labels stay put, on the
   app's card colour, as the app's do. */
.demo-table thead th{position:sticky;top:0;background:var(--app-card)}
.demo-table tbody th{position:sticky;left:0;background:var(--app-card);z-index:1}
.demo-table tr.accent th{background:linear-gradient(hsl(160 69% 37% / .05),hsl(160 69% 37% / .05)),var(--app-card)}
.demo-table td.tot,.demo-table th.tot{position:sticky;right:0;background:var(--app-card)}
.demo-table tr.accent td.tot{background:linear-gradient(hsl(160 69% 37% / .05),hsl(160 69% 37% / .05)),var(--app-card)}
/* As the app's ExplainCell: no mark until the pointer is on it, then a
   dotted underline and the brand at 5%. The "Click any figure" hint above
   the table carries the invitation. */
.demo-table .fig{background:transparent;border:0;padding:2px 4px;margin:-2px -4px;border-radius:2px;
  text-decoration:underline dotted transparent;text-underline-offset:4px;transition:background-color .15s,text-decoration-color .15s}
.demo-table .fig:hover{background:hsl(160 69% 37% / .05);text-decoration-color:var(--app-border)}
.demo-table .fig.on{background:var(--green);color:#fff;border-bottom-color:transparent}
.demo-panel{border:1px solid var(--night-rule);border-radius:6px;background:var(--night-panel);padding:14px 16px;min-height:220px}
.demo-panel > *{animation:panel-in .35s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(4px)}}
.demo-panel h4{font-size:17px;margin:0 0 6px;color:#fff}
.demo-panel h4 .mono{font-size:12px;color:var(--night-mute);font-weight:400}
.demo-value{font-size:22px;margin:0 0 6px}
.demo-headline{color:#B6C2D3;font-size:13.5px;margin:0 0 10px}
.demo-formula{font-size:12px;color:var(--night-mute);background:var(--night-panel-2);border:1px solid var(--night-rule);border-radius:5px;padding:7px 10px;margin:0 0 10px}
.demo-empty{color:var(--night-mute);font-size:14px;margin:0}
.demo-factors{margin:0 0 10px}
.demo-factors > div{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0}
.demo-factors dt{color:var(--night-mute)}.demo-factors dd{margin:0}
.demo-panel .note{font-size:11.5px;color:#6F7D93;margin:0 0 4px}
.demo-terms,.demo-terms .kids{list-style:none;margin:0;padding:0}
.demo-terms > li{border-top:1px solid var(--night-rule);padding:6px 0}
.demo-terms .line{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.demo-terms .kids{padding-left:12px;margin-top:4px;border-left:1px solid var(--night-rule)}
.demo-terms .kids .line{font-size:12px;color:var(--night-mute)}
.demo-terms .drill{background:transparent;border:0;padding:0;color:var(--green-lift);text-align:left;text-decoration:underline;text-underline-offset:3px}
.demo-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--night-mute);margin-bottom:8px}
.demo-crumbs button{background:transparent;border:0;padding:0;color:var(--green-lift);text-decoration:underline;text-underline-offset:3px}
.demo-crumbs .here{color:#fff}
.demo-reset{background:transparent;border:1px solid var(--night-rule);border-radius:4px;padding:8px 14px;font-size:13.5px;color:var(--night-mute);min-height:40px}
.demo-reset:hover{color:#fff;border-color:var(--night-rule-strong)}
.demo-levers{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
.demo-sliders{display:grid;gap:14px;border:1px solid var(--night-rule);border-radius:6px;background:var(--night-panel);padding:14px 16px}
.demo-slider{display:block}
.demo-slider .top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:4px}
.demo-slider .top .mono{color:var(--green-lift);font-size:12.5px;white-space:nowrap}
.demo-slider input{width:100%;accent-color:var(--green);min-height:28px}
.demo-out{border:1px solid var(--night-rule);border-radius:6px;background:var(--night-panel);padding:16px}
.demo-irr .k{display:block;font-size:13px;color:var(--night-mute)}
.demo-irr b{display:inline-block;font-size:44px;line-height:1.1;color:var(--green-lift);font-weight:600;margin:4px 0;padding-bottom:4px;border-bottom:4px double rgba(42,190,142,.6)}
.demo-irr .delta{display:block;font-size:12.5px;color:var(--night-mute)}
.demo-irr .delta.up{color:var(--green-lift)}.demo-irr .delta.down{color:#E0685C}
.demo-small{margin:14px 0 0}
.demo-small > div{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-top:1px solid var(--night-rule)}
.demo-small dt{color:var(--night-mute)}.demo-small dd{margin:0}
.demo-seek{margin-top:16px;border:1px solid var(--night-rule);border-radius:6px;background:var(--night-panel);padding:14px 16px}
.demo-seek-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px}
.demo-seek-form input{width:74px;margin:0 4px;background:var(--night-panel-2);border:1px solid var(--night-rule);border-radius:4px;color:#fff;padding:6px 8px;font-size:14px}
.demo-go{background:var(--green);border:0;border-radius:4px;color:#fff;padding:8px 16px;min-height:40px;font-weight:600;transition:background-color .2s}
.demo-go:hover{background:#18B083}
.demo-go:disabled{opacity:.6;cursor:progress}
.demo-answers{list-style:none;margin:12px 0 0;padding:0}
.demo-answers li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:7px 0;border-top:1px solid var(--night-rule);font-size:13.5px;animation:panel-in .35s var(--ease-out)}
.demo-answers li .name{min-width:9.5em;color:#B6C2D3}
.demo-answers li .mono{color:#fff}
.demo-answers li.no,.demo-answers li.pending{color:var(--night-mute)}
.demo-show{margin-left:auto;background:transparent;border:1px solid var(--green);border-radius:4px;color:var(--green-lift);padding:4px 10px;font-size:12.5px;min-height:32px}
.demo-show:hover{background:rgba(42,190,142,.12)}
.demo-foot{font-size:12.5px;color:var(--night-mute);margin:10px 0 0}
.demo-parts{margin:0 0 6px;font-size:12px}
.demo-parts summary{cursor:pointer;color:var(--green-lift)}
.demo-parts ul{list-style:none;margin:4px 0 0;padding:0 0 0 12px;border-left:1px solid var(--night-rule)}
.demo-parts .line{display:flex;justify-content:space-between;gap:12px;color:var(--night-mute);padding:1px 0}
.demo-headline em{font-style:italic;color:#fff}

/* The sensitivity grid (1.158.0): the app's own grid, cell by cell. */
.grid-demo{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:start}
.grid-wrap{overflow-x:auto;border:1px solid var(--night-rule);border-radius:6px;background:var(--night-panel);padding:18px}
.sens{border-collapse:separate;border-spacing:3px;margin:0 auto;font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums}
.sens th{font-weight:500;color:var(--night-mute);font-size:12.5px;padding:6px 10px;white-space:nowrap}
.sens thead th{text-align:center}
.sens tbody th{text-align:right}
.sens th.base{color:var(--green-lift)}
.sens .axis{color:var(--night-mute);font-family:var(--f-body);font-size:12px;text-align:left;line-height:1.3}
.sens td{width:112px;height:50px;text-align:center;color:#fff;border-radius:2px;position:relative;
  background:var(--night-panel-2);transition:background-color .5s ease}
.sens td span{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.sens td.in span{opacity:1;transform:none}
.sens td.base{box-shadow:inset 0 0 0 2px var(--green-lift)}
.sens td.neg span{color:#FFD9D3}
.grid-side{border:1px solid var(--night-rule);border-radius:6px;background:var(--night-panel);padding:16px}
.grid-side .k{display:block;font-size:13px;color:var(--night-mute)}
.grid-side b{display:block;font-family:var(--f-mono);font-size:30px;color:#fff;margin:2px 0 12px;font-weight:600}
.grid-side p{font-size:13.5px;color:#B6C2D3;margin:0 0 10px}
.grid-progress{height:2px;background:var(--night-rule);margin:0 0 12px;overflow:hidden}
.grid-progress i{display:block;height:100%;width:0;background:var(--green-lift);transition:width .2s linear}

/* ---------------------------------------------------------------------------
   Motion. One orchestrated moment (the hero) and, as you scroll, each
   section's headline rising into place, its pictures arriving from the side
   they sit on, and its ruled lists drawing their rules. Everything here is
   armed only once site.js has confirmed it can observe the page (`.js`), so a
   blocked script leaves a complete, static page — and none of it runs for
   anyone who has asked for less motion.
   ------------------------------------------------------------------------ */
.js [data-split] .w,.js .hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.2em;margin-bottom:-.2em}
.js [data-split] .w > span,.js .hero-title .w > span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 38ms)}
.js [data-split].in .w > span,.js .hero.in .hero-title .w > span{transform:none}
.js .hero-title .w > span{transition-duration:1.1s;transition-delay:calc(120ms + var(--i,0) * 70ms)}

.js [data-rise]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-from="left"]{opacity:0;transform:translateX(-36px) scale(.985);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.js [data-from="right"]{opacity:0;transform:translateX(36px) scale(.985);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.js [data-from="below"]{opacity:0;transform:translateY(40px) scale(.99);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.js .in[data-rise],.js .in[data-from]{opacity:1;transform:none}
/* Rules draw left to right as their list arrives. */
.js [data-rules] > *{background-image:linear-gradient(var(--rule-strong),var(--rule-strong));background-repeat:no-repeat;background-size:0 1px;background-position:0 0;
  transition:background-size 1s var(--ease-io);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-rules] > *{border-top-color:transparent}
.js [data-rules].in > *{background-size:100% 1px}

.js .hero-side,.js .hero-kicker{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .hero-side{transition-delay:.55s}
.js .hero.in .hero-side,.js .hero.in .hero-kicker{opacity:1;transform:none}
.js .statement{opacity:0;transform:translateX(28px);transition:opacity 1s var(--ease-out) .45s,transform 1.2s var(--ease-out) .45s}
.js .hero.in .statement{opacity:1;transform:none}
/* The statement prints: rows arrive one after another, then the totals rule off. */
.statement.printing tbody tr{opacity:0;transform:translateY(6px)}
.statement.printing tbody tr.in{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.statement.printing{--ruled:0}
.statement.ruled{--ruled:1}

/* ---------- narrow screens ----------
   The site that argues the app adapts had better adapt. */
@media (max-width:1240px){ nav.links{gap:18px;font-size:14px} }
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-copy{max-width:760px}
  .hero-title{font-size:clamp(54px,10vw,112px)}
}
@media (max-width:1140px){
  .menu-btn{display:inline-flex}
  .bar-signin{display:none}
  .bar-cta{margin-left:0}
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;
    background:rgba(11,15,23,.98);border-bottom:1px solid var(--night-rule);padding:6px var(--gutter) 18px;
    max-height:calc(100vh - 64px);overflow-y:auto}
  .site-bar.menu-open nav.links{display:flex;animation:panel-in .3s var(--ease-out)}
  nav.links a{padding:14px 0;border-top:1px solid var(--night-rule);font-size:16px;color:var(--night-fg)}
  nav.links a:first-child{border-top:0}
  nav.links .menu-only{display:block}
  nav.links .menu-cta{display:none}
  nav.links .spy{display:none}
}
@media (max-width:1000px){
  section{padding:88px 0}
  .head{grid-template-columns:1fr;gap:6px;margin-bottom:40px}
  .label,.eyebrow{margin-top:0}
  .rig,.touch-grid,.explorer,.ab,.grid-demo,.close-grid{grid-template-columns:1fr;gap:36px}
  .explorer-view{position:static}
  .sens td{width:90px;height:44px}
  .ab{gap:0}
  .pencil{grid-column:1;grid-row:auto;margin:20px 0 0}
  .duo,.trio,.quad,.tiers,.numbered,.honest,.notes,.faq{grid-template-columns:1fr}
  .numbered{gap:0}
  .tiers.tiers-two{grid-template-columns:1fr}
  .tier{border-left:0;border-top:1px solid var(--rule)}
  .tier:first-child{border-top:0}
  .tier .for{min-height:0}
  .terms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts > div:nth-child(3){border-left:0;padding-left:0}
  .facts > div{padding-bottom:18px}
  /* The device keeps reshaping on a phone — that turn IS the argument this
     section makes. Only the scale drops; the ratios are the captures'. */
  .rig-stage{min-height:400px}
  .device[data-size="390"]{width:176px;height:351px}
  .device[data-size="834"]{width:224px;height:290px}
  .device[data-size="1280"]{width:300px;height:197px}
  .device[data-size="1680"]{width:320px;height:192px}
  .touch-demo{max-width:300px;margin:0 auto}
  .bar{gap:12px}
}
@media (max-width:860px){
  .statement th,.statement td{padding-left:7px;padding-right:7px}
  .statement thead th:first-child{min-width:0}
  .feature{grid-template-columns:1fr;gap:26px;margin-top:64px}
  /* The shot goes above its words on a narrow screen whichever side it was
     on: a collapsed alternating layout alternates the reading order too. */
  .feature.flip > .frame,.feature.flip > .crop{order:0}
  .demo{padding:12px}
  .demo-body,.demo-levers{grid-template-columns:1fr}
  .demo-panel{min-height:0}
}
@media (max-width:640px){
  :root{--gutter:18px}
  body{font-size:16px}
  section{padding:68px 0}
  .hero{padding:44px 0 64px}
  .hero-grid{gap:36px}
  .hero-kicker{margin-bottom:20px}
  .hero-title{font-size:clamp(50px,17vw,76px)}
  .statement{margin-top:40px}
  /* On a phone the statement keeps the label, year one and the hold's total;
     the caption says the other years are on a wider screen. Wide tables
     elsewhere scroll, but the first thing on the page should be readable
     whole. */
  .statement th:nth-child(n+3):not(.tot),.statement td:nth-child(n+3):not(.tot){display:none}
  .statement th,.statement td{padding:7px 10px}
  .statement tbody th{white-space:normal}
  .narrow-only{display:inline}
  .statement-try{gap:12px 16px;padding:14px}
  .stepper output{min-width:112px;font-size:12.5px}
  .terms{grid-template-columns:1fr}
  .statement-kpis div{padding:14px}
  .statement-kpis span{font-size:12px}
  .reconcile{grid-template-columns:1fr;text-align:center;gap:14px}
  .foot nav{margin-left:0}
  .touch-item > :not(summary),.ti-viz,.ti-scroller{margin-left:0}
  .numbered li{padding-left:48px}
  .numbered li::before{font-size:36px}
  .close{padding:88px 0 96px}
  /* A phone has the hero's button a thumb away; the bar keeps the name and the menu. */
  .bar-cta{display:none}
  nav.links .menu-cta{display:flex;margin-top:12px;border-top:0}
  /* All five columns on a phone, without a sideways scroll: the point of
     the grid is reading across it. */
  .sens{border-spacing:2px;font-size:11px}
  .sens td{width:46px;height:36px;font-size:11px}
  .sens th{padding:4px 4px;font-size:10.5px}
  .sens th small{font-size:9.5px}
  .sens .axis{font-size:10px}
  .grid-wrap{padding:6px}
}
/* Wide, short shots at phone width keep a readable size and scroll sideways
   inside their frame; the page itself never scrolls sideways (the site gate
   checks that at 390px). */
@media (max-width:600px){
  .crop.pan{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* A set width, not `auto`: an auto-sized lazy image is 0px tall until it
     loads, and the page jumped by its height when it did (1.159.0). */
  .crop.pan img{width:1100px;max-width:none;height:auto}
}

/* A grid child defaults to `min-width:auto` and refuses to shrink below its
   content: the touch section's 820px scroller once pushed every paragraph past
   the right edge. */
.touch-list,.touch-item,.rig-side,.rig-stage,.gallery,.ab,.card,.tier,.note,.explorer > *,.grid-demo > *,.hero-grid > *{min-width:0}
.touch-item p,.rig-notes li{overflow-wrap:break-word}

/* Motion is the page's emphasis, not its content: with less motion asked for,
   everything is simply there. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-split] .w > span,.js .hero-title .w > span,.js [data-rise],.js [data-from],.js .hero-side,.js .hero-kicker,.js .statement{opacity:1;transform:none}
  .statement td.moved{animation:none;background:rgba(201,138,46,.18)}
  .js [data-rules] > *{background-size:100% 1px}
  .rec-ring,.rec-check{stroke-dashoffset:0}
  .statement.printing tbody tr{opacity:1;transform:none}
  .statement{--ruled:1}
}

/* ===========================================================================
   Pages, not one long scroll (1.179.0, §D279). The home page keeps the hero,
   the pitch, the recordings, the deal types and the price; the rest is five
   chapters, a page each, read in order.
   ======================================================================== */

/* The deal types under one heading in the bar: on a wide screen a panel that
   opens on hover or focus; the heading itself is a link to the picker on the
   home page, so a touch screen or a page without its script still goes
   somewhere. */
.deal-menu{position:relative;display:flex}
.deal-menu-top::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
nav.links .deal-menu-top[data-here]{color:#fff}
.deal-menu-panel{position:absolute;top:100%;left:-18px;min-width:200px;display:none;flex-direction:column;
  background:rgba(11,15,23,.98);border:1px solid var(--night-rule);border-radius:6px;padding:6px 0;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.8)}
.deal-menu:hover .deal-menu-panel,.deal-menu:focus-within .deal-menu-panel{display:flex;animation:panel-in .25s var(--ease-out)}
nav.links .deal-menu-panel a{padding:10px 18px;color:var(--night-fg)}
nav.links .deal-menu-panel a[aria-current="page"]{color:var(--green-lift)}
nav.links .deal-menu-panel a:hover{background:rgba(255,255,255,.04)}

/* ---------- a chapter's opening ---------- */
.chapter{padding:72px 0 64px}
.chapter h1{font-size:clamp(48px,7.5vw,104px);line-height:.9;margin:44px 0 22px;font-stretch:70%;max-width:14ch}
.chapter .lede{max-width:60ch;font-size:19px;color:var(--mute);margin:0}
/* Where this page sits among the five: one rule each, the current one drawn
   heavier in the accent. It is the same list on every chapter, so it is
   also the quickest way to the others. */
.chapter-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 6px}
.chapter-rail a{display:flex;gap:8px;align-items:baseline;padding:12px 0 0;border-top:2px solid var(--rule);
  color:var(--mute);text-decoration:none;font-size:14px;font-weight:600;line-height:1.3;transition:color .2s,border-color .2s}
.chapter-rail a:hover{color:var(--fg);border-top-color:var(--rule-strong)}
.chapter-rail a[aria-current="page"]{color:var(--fg);border-top:4px solid var(--accent);padding-top:10px}
.chapter-rail .mono{font-size:12px;color:var(--accent)}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.toc a{font-size:14.5px;color:var(--fg);text-decoration:none;border:1px solid var(--rule-strong);border-radius:4px;
  padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;transition:border-color .2s,color .2s}
.toc a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- and its close: the next one, large ---------- */
.chapter-end{padding:96px 0 104px}
.end-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:36px 64px;align-items:end}
.next-chapter{display:block;text-decoration:none;color:inherit;border-top:2px solid var(--accent);padding-top:20px}
.next-label{display:block;font-size:14px;font-weight:600;color:var(--accent);margin-bottom:12px}
.next-chapter strong{display:block;font-family:var(--f-display);font-stretch:70%;font-size:clamp(44px,6vw,84px);line-height:.92;
  color:var(--fg);transition:color .2s}
.next-chapter:hover strong,.next-chapter:focus-visible strong{color:var(--accent)}
.next-lede{display:block;margin-top:16px;color:var(--mute);max-width:52ch}
.end-side{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}

/* ---------- the home page's index of chapters ---------- */
.chapter-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px}
.chapter-cards a{display:block;height:100%;padding:20px 0 26px;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.chapter-cards .mono{display:block;font-size:13px;color:var(--accent);margin-bottom:12px}
.chapter-cards strong{display:block;font-family:var(--f-display);font-stretch:80%;font-size:28px;line-height:1.05;color:var(--fg);
  margin-bottom:10px;transition:color .2s}
.chapter-cards a:hover strong,.chapter-cards a:focus-visible strong{color:var(--accent)}
.chapter-lede{display:block;color:var(--mute);font-size:15px;line-height:1.5}

/* ---------- the recordings, one at a time ---------- */
.reel-tabs[hidden]{display:none}
.reel > .clip{max-width:1100px}
.reel-cap{margin:18px 0 0;color:var(--mute);font-size:16px;max-width:70ch;min-height:3.2em}
.reel-cap a{color:var(--fg);font-weight:600;white-space:nowrap}
.reel-cap a:hover{color:var(--accent)}

.price-numbers{margin-top:0}
.price-more{margin:36px 0 0}

@media (max-width:1140px){
  /* In the folded menu the deal types are listed, not hidden behind a hover. */
  .deal-menu{flex-direction:column}
  nav.links .deal-menu-top{padding:14px 0;border-top:1px solid var(--night-rule)}
  .deal-menu-top::after{display:none}
  .deal-menu-panel{position:static;display:flex;min-width:0;background:none;border:0;box-shadow:none;padding:0 0 6px 16px}
  .deal-menu:hover .deal-menu-panel,.deal-menu:focus-within .deal-menu-panel{animation:none}
  nav.links .deal-menu-panel a{padding:10px 0;border-top:0;font-size:15px;color:var(--night-mute)}
  nav.links .deal-menu-panel a[aria-current="page"]{color:#fff}
}
@media (max-width:820px){
  .end-grid{grid-template-columns:1fr}
  .chapter{padding:48px 0 44px}
  .chapter h1{margin-top:32px}
  /* Five across stops fitting: the numbers stay, the names wrap under them. */
  .chapter-rail a{flex-direction:column;gap:2px;font-size:12.5px}
}