/* Finishwork landing page — the whole stylesheet, no framework under it.

   Every rule is scoped under .fw. That scope was load-bearing on cresalto.com,
   where this page's palette (Cresalto State — iron, diazo, indigo, Chivo) had to
   stay off a site that is terracotta on vellum with Geist and EB Garamond. Here
   it costs nothing and buys the same thing in reverse: a second page added to
   this repo starts from a blank sheet rather than from this one's opinions.
   The reset below is deliberately outside it, because html and body are. */

html { background: #E9EFEC; }
body { margin: 0; }

/* Cresalto "State" (docs/design-language.md, adopted 2026-09-04).
     Colour reports a fact; it does not set a mood. Chartreuse means LIVE or
     HAPPENING NOW — the open counter, the one question a typical proposal
     answers, and the beta, which is the state this product is in. Indigo is
     where Finishwork acts, and it is spent as a field exactly once: on the
     offer, which is the only place the page asks for anything. Everything else
     is iron on diazo with hairlines separating. Chivo 400/700, Chivo Mono for tracked labels only.
     No serif. Radius 0. Single theme on purpose: the brand defines one palette,
     and a page selling the brand should look the same to everyone. */
.fw {
    --ink: #16292F;
    --ink-2: #263C41;
    --muted: #4B5F62;
    --faint: #6D8480;
    --surface: #E9EFEC;
    --card: #FFFFFF;
    --wash: #F2F6F4;
    --line: #C9D8D1;
    --line-strong: #A9BDB4;
    --accent: #26307F;
    --accent-lift: #4E5BD4;
    --live: #B4C630;
    --warn: #B4552F;
    --rail-text: #C4D2D3;
    --rail-quiet: #8FA3A5;
    --rail-line: #2D444B;
    --mono: "Chivo Mono", ui-monospace, Menlo, monospace;
    --sans: "Chivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  }

  .fw, .fw * { box-sizing: border-box; }
  .fw { background: var(--surface); }
  .fw {
    background: var(--surface); color: var(--ink);
    font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .fw .band { padding: 0 24px; }
  .fw .inner { max-width: 1100px; margin: 0 auto; }

  .fw h1, .fw h2, .fw h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
  .fw h1 { font-size: clamp(36px, 6.4vw, 66px); line-height: 0.98; letter-spacing: -0.038em; }
  .fw h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.032em; }
  .fw h3 { font-size: 19px; letter-spacing: -0.015em; }
  .fw p { margin: 0; max-width: 56ch; }
  .fw .lead { font-size: 20.5px; font-weight: 500; color: var(--ink-2); }
  .fw .fine { font-size: 16.5px; color: var(--ink-2); }
  .fw .eyebrow {
    font-family: var(--mono); font-size: 15px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--ink); font-weight: 700; line-height: 1.3;
    display: flex; align-items: center; gap: 14px;
  }
  .fw .eyebrow::before { content: ""; width: 30px; height: 4px; background: var(--accent); flex: 0 0 auto; }
    /* A section's name, not a footnote: 11px read as small print on a page this size. */
  @media (max-width: 640px){ .fw .eyebrow { font-size: 13px; gap: 11px; } .fw .eyebrow::before { width: 22px; height: 3px; } }
  .fw .onink .eyebrow { color: #fff; }
  .fw .onink .eyebrow::before { background: var(--accent-lift); }

  .fw .btns { display: flex; flex-wrap: wrap; gap: 10px; }
  .fw .btn {
    font-family: var(--mono); font-size: 14.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 18px 30px; text-decoration: none; display: inline-block;
    border: 1px solid var(--accent); color: var(--accent); background: transparent;
  }
  .fw .btn.solid { background: var(--accent); color: #fff; }
  .fw .btn:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
  .fw .onink .btn { border-color: var(--rail-text); color: #fff; }
  .fw .onink .btn.solid { background: var(--accent-lift); border-color: var(--accent-lift); }

  .fw section { padding: 72px 0; border-top: 1px solid var(--line); }
  .fw section.first { border-top: none; }
  .fw .stack { display: flex; flex-direction: column; gap: 20px; }
  .fw .stack-s { display: flex; flex-direction: column; gap: 10px; }

  /* Alternating grounds. The page was one flat surface end to end, which read
     as careful rather than confident. Paper bands break it without adding a
     colour the brand does not have. */
.fw .onpaper { background: var(--card); }
  .fw .onpaper section { border-top: none; }

  .fw .onink { background: var(--ink); color: var(--rail-text); }
  .fw .onink strong { color: #fff; }
  .fw .onink section { border-top: none; }
  .fw .onink h2, .fw .onink h3 { color: #fff; }
  .fw .onink .eyebrow { color: var(--rail-quiet); }
  .fw .onink p { color: var(--rail-text); }
  .fw .onink .fine { color: var(--rail-quiet); }

  /* header */
.fw .top { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .fw .wordmark { font-weight: 700; font-size: 27px; letter-spacing: -0.03em; }
  @media (max-width: 640px){ .fw .wordmark { font-size: 23px; } }
  .fw .wordmark::after { content: "."; color: var(--accent); }
  .fw .brand { display: flex; align-items: center; gap: 14px; }
  .fw .builtby { display: flex; align-items: center; gap: 8px; padding-left: 14px;
    border-left: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); text-decoration: none; }
  .fw .builtby img { display: block; width: auto; height: 15px; }
  .fw .builtby:hover { color: var(--ink); }
    /* No room beside two nav buttons on a phone; the footer still says who makes it. */
  @media (max-width: 640px){ .fw .builtby { display: none; } }
  .fw .top nav { display: flex; gap: 34px; align-items: center; }
  .fw .top nav a { font-family: var(--mono); font-size: 13.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
  .fw .top nav a:hover { color: var(--ink); }
  /* All-caps mono links ran together as one phrase. Wider gaps split the two
     section links, and a hairline (the same one beside "Built by") sets
     Sign in apart as the account link rather than a third section. */
  .fw .top nav a.stay, .fw .top nav a.sep { padding-left: 34px; border-left: 1px solid var(--line-strong); }
  /* Between laptop and phone the wide gaps push the header past the screen. */
  @media (max-width: 1060px){ .fw .top nav { gap: 22px; } .fw .top nav a.stay, .fw .top nav a.sep { padding-left: 22px; } }
  @media (max-width: 960px){ .fw .builtby { display: none; } }
  /* Matches the 760px rule that hides the section links: no divider without them. */
  @media (max-width: 760px){ .fw .top nav a.stay { padding-left: 0; border-left: 0; } }
    /* The offer is the one nav item that is a button, so it is not just a fourth
     link in a row of equals. */
  .fw .top nav a.keep { background: var(--accent); color: #fff; padding: 10px 14px; }
  .fw .top nav a.keep:hover { background: var(--ink); color: #fff; }
  @media (max-width: 640px){ .fw .top nav a { font-size: 12px; } .fw .top nav a.keep { padding: 8px 10px; } }
    /* "Free" does not fit beside the wordmark on a small phone, and the beta
     banner directly above already says it. */
  @media (max-width: 420px){ .fw .top nav .free { display: none; } }

  /* hero */
.fw .hero { padding: 58px 0 66px; }
  .fw .hero h1 { max-width: 13ch; }
  /* The setup steps back a shade so the payoff carries the block. Both are ink;
     this is a half-step, not a grey-out. */
.fw .hero h1 .setup { color: var(--ink-2); }
  .fw .hero .lead { font-size: 22.5px; }
  /* Em dashes as bullets read as stray punctuation. In a language made of
     hairlines, the rule above each row is the marker. */
.fw ul.gets { list-style: none; margin: 6px 0 0; padding: 0;
    display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
  .fw ul.gets li { font-size: 19px; color: var(--ink-2); line-height: 1.35;
    padding: 11px 0; border-top: 1px solid var(--line); }
  .fw .betaline { font-family: var(--mono); font-size: 13.5px; color: var(--muted); }

  /* BETA BANNER — a slim bar above the nav, before the wordmark. Dark against
     the page's light surface so it reads as a strip and not as a section, and
     the whole bar is the link: on a phone the text wraps to two lines and a
     small tap target at the end of it would be the only way in. */
  .fw .betabar { display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px 14px; padding: 15px 24px; background: var(--ink);
    color: var(--rail-text); text-decoration: none; text-align: center;
    font-family: var(--mono); font-size: 15px; line-height: 1.5;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
  /* In-page links (#offer, #fit, #how) would otherwise land under the sticky bar. */
  .fw [id] { scroll-margin-top: 52px; }
  @media (max-width: 640px){ .fw [id] { scroll-margin-top: 70px; } }
  .fw .betadot { width: 9px; height: 9px; background: var(--live); flex: 0 0 auto; }
  .fw .betatxt strong { color: #fff; font-weight: 700; }
  .fw .betago { color: var(--live); white-space: nowrap; }
  .fw .betabar:hover .betago { color: #fff; }
  /* On a phone the sentence cannot stay on one line, and centered ragged wrap
     reads as a mistake, so go left-aligned. The explainer costs a third line of
     the fold and the offer section says the same thing in full, so it drops and
     the bar keeps only the offer and the ask. */
  @media (max-width: 640px){
    .fw .betabar { justify-content: flex-start; text-align: left;
      font-size: 13px; padding: 13px 20px; gap: 6px 10px; }
    .fw .betatxt { min-width: 0; }
    .fw .betawhy { display: none; }
  }

  /* WEDGE — the three lines that mark the boundary against template tools: what
     a nicer template still cannot answer, what we refuse to let the model write,
     and the fact that you never retype a job you already priced. One treatment
     on all three, so a reader who only scans still collects one argument. */
  .fw .wedge { border-left: 3px solid var(--accent); padding-left: 14px;
    font-size: 19px; font-weight: 600; color: var(--ink); }
  .fw .onink .wedge, .fw .onoffer .wedge { border-left-color: var(--live); color: #fff; }

  .fw .herogrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
  .fw .heroart { display: flex; flex-direction: column; gap: 11px; align-items: center; }
  .fw .artcap { font-family: var(--mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--muted); }

  /* stake */
/* The quote first, then the arithmetic stacked under it as the page's own
     commentary, below a dashed rule. Quote bar, number and eyebrow all share
     the section's left edge; the blockquote's browser margin used to indent
     the quote alone, which is what made the section look misaligned. */
.fw .math { max-width: 720px; display: flex; flex-direction: column; gap: 12px;
    border-top: 1px dashed var(--line-strong); padding-top: 28px; margin-top: 6px; }
  .fw .math .odds { margin-bottom: 8px; }
  .fw .math p { max-width: 58ch; }
  .fw .math .point { font-size: 19.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
  .fw .math .aside { color: var(--muted); }
  .fw .odds { font-weight: 700; font-size: clamp(46px, 7.5vw, 82px); line-height: 1;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 11px; }
  .fw .odds .to { font-size: 0.36em; color: var(--faint); font-weight: 400; }
  .fw .odds .gain { color: var(--accent); }
  .fw .quote { margin: 0; border-left: 3px solid var(--accent); padding-left: 26px; max-width: 720px;
    display: flex; flex-direction: column; gap: 16px; }
  .fw .quote p { font-size: clamp(25px, 3.6vw, 40px); font-weight: 700; line-height: 1.18;
    letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }
  .fw .quote cite { display: block; line-height: 1.65; font-style: normal; font-family: var(--mono);
    font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

  /* the problem: one clear table, light on the dark band, so it reads as a
     single object instead of shapes floating on the background. Real gridlines.
     The template column is quiet off-white with an X where each answer should
     be; the Finishwork column carries a pale indigo tint under a solid indigo
     header, so the eye lands there. */
  .fw .versuslead { font-size: 20px; max-width: none; }
.fw .versus { width: 100%; border-collapse: collapse; margin-top: 10px; background: var(--card);
    color: var(--ink); box-shadow: 0 18px 44px rgba(0,0,0,0.28); }
  .fw .versus th, .fw .versus td { text-align: left; vertical-align: middle; padding: 16px 22px;
    line-height: 1.4; border: 1px solid var(--line); }
  .fw .versus thead th, .fw .versus thead td { background: var(--wash); font-size: 15.5px; font-weight: 700;
    padding-top: 18px; padding-bottom: 18px; }
  .fw .versus tbody th { width: 34%; font-size: 18px; font-weight: 500; color: var(--ink); background: var(--card); }
  .fw .versus .tpl { width: 26%; text-align: center; background: var(--wash); color: var(--muted);
    font-size: 16.5px; font-weight: 500; }
  .fw .versus .ours { width: 40%; background: #EEF0FA; color: var(--ink); font-size: 17px; font-weight: 700; }
  .fw .versus thead .tpl { color: var(--muted); }
  .fw .versus thead .ours { background: var(--accent); color: #fff; border-color: var(--accent); }
  .fw .versus .x { display: block; position: relative; width: 16px; height: 16px; margin: 0 auto; }
  .fw .versus .x::before, .fw .versus .x::after { content: ""; position: absolute; left: 7px; top: -1px;
    width: 2.5px; height: 18px; background: var(--warn); transform: rotate(45deg); }
  .fw .versus .x::after { transform: rotate(-45deg); }
  .fw .versus .none { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fw .versus tr.live th { font-weight: 700; }
  .fw .versus .pip { display: inline-block; width: 9px; height: 9px; margin-right: 9px;
    background: var(--live); outline: 1px solid var(--ink); vertical-align: 1px; }
  @media (max-width: 700px){
    .fw .versus, .fw .versus tbody, .fw .versus tr, .fw .versus th, .fw .versus td { display: block; width: auto; }
    .fw .versus { background: none; box-shadow: none; }
    .fw .versus thead { display: none; }
    .fw .versus tbody th, .fw .versus .tpl, .fw .versus .ours { width: auto; }
    .fw .versus tr { margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); }
    .fw .versus th, .fw .versus td { border: 0; }
    .fw .versus tbody th { padding: 14px 14px 8px; font-size: 17.5px; font-weight: 700; }
    .fw .versus .tpl, .fw .versus .ours { padding: 10px 14px; text-align: left; border-top: 1px solid var(--line); }
    .fw .versus .tpl::before { content: "Template: "; color: var(--ink); font-weight: 700; }
    .fw .versus .ours::before { content: "Finishwork: "; color: var(--accent); }
    .fw .versus .x { display: none; }
    .fw .versus .none { position: static; width: auto; height: auto; clip-path: none; }
  }

  /* ---- sources: a row of files, curving into the mark, out as one proposal ----
     Drawn as a single SVG so the curves stay glued to the tiles at every width.
     Deliberately typographic rather than real vendor logos: a wall of logos
     reads as integrations or partnerships, and the argument of this section is
     that there is neither — Finishwork works from the file, not from an account. The
     format badge is the honest thing to show; it is what actually gets read. */
.fw .funnel { border: 1px solid var(--line); background: var(--card); padding: 30px 26px 22px; }
  .fw .funnelsvg { display: block; width: 100%; height: auto; }
  .fw .funnelsvg text { font-family: var(--sans); }
  .fw .funnelsvg .cap, .fw .funnelsvg .fmt, .fw .funnelsvg .amt {
    font-family: var(--mono); text-transform: uppercase; }
  .fw .funnelsvg .cap { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; fill: var(--muted); }
  .fw .funnelsvg .fmt { font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; fill: var(--muted); }
  .fw .funnelsvg .nm { font-size: 12px; letter-spacing: -0.01em; }
  .fw .funnelsvg .amt { font-size: 10px; letter-spacing: 0; fill: var(--ink-2); text-transform: none; }
  .fw .funnelsvg .mark { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; fill: #fff; }
  .fw .funnelsvg .curve { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
  .fw .funnelsvg .head { fill: var(--ink); }

  /* One source lights at a time and a pulse runs its curve into the mark, left
     to right, forever. It is the sentence the section is making, said without
     words: these all end up in the same place. Hovering any tile stops the show
     and holds that one, because a visitor who reaches for a diagram wants to
     look at a part of it, not chase it. */
.fw .funnelsvg .flowline {
    fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
    opacity: 0; stroke-dasharray: 16 84;
    animation: travel 9.8s linear infinite;
  }
  .fw .funnelsvg .lit {
    fill: rgba(38, 48, 127, 0.06); stroke: var(--accent); stroke-width: 1.5;
    opacity: 0; animation: tilelit 9.8s linear infinite;
    pointer-events: none;   /* it sits over the tile; it must not eat the hover */
  }
  .fw .funnelsvg .flowline, .fw .funnelsvg .head, .fw .funnelsvg .curve { pointer-events: none; }
    /* Seven sources, 1.4s apart, so a 9.8s lap. The percentages are the eight-
     source ones scaled by 8/7, so each tile is lit for the same seconds as before. */
  @keyframes travel{
    0%     { stroke-dashoffset: 0;    opacity: 0; }
    1.1%   { opacity: 1; }
    12.6%  { stroke-dashoffset: -100; opacity: 1; }
    16%    { opacity: 0; }
    100%   { stroke-dashoffset: -100; opacity: 0; }
  }
  @keyframes tilelit{
    0%, 100%     { opacity: 0; }
    1.1%, 13.7%  { opacity: 1; }
    17.1%        { opacity: 0; }
  }

  .fw .funnelsvg .chain { transition: opacity .18s ease; }
  .fw .funnelsvg:has(.chain:hover) .flowline, .fw .funnelsvg:has(.chain:hover) .lit { animation: none; opacity: 0; }
  .fw .funnelsvg:has(.chain:hover) .chain:not(:hover) { opacity: 0.28; }
  .fw .funnelsvg .chain:hover .flowline { opacity: 1; stroke-dasharray: none; }
  .fw .funnelsvg .chain:hover .lit { opacity: 1; }

  @media (prefers-reduced-motion: reduce){
    .fw .funnelsvg .flowline, .fw .funnelsvg .lit { animation: none; }}
  .fw .funnel-sm { display: none; }

  /* the stacked version, under 760px */
.fw .funnel-sm { flex-direction: column; align-items: center; gap: 13px; }
  .fw .srcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }
  .fw .src { display: flex; align-items: center; gap: 9px; min-width: 0;
    border: 1px solid var(--line-strong); background: var(--wash); padding: 7px 9px; }
  .fw .src .fmt { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em;
    color: var(--muted); background: var(--card); border: 1px solid var(--line-strong);
    padding: 3px 0; width: 38px; text-align: center; flex: 0 0 auto; }
  .fw .src .nm { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .fw .src.any { background: var(--card); border-style: dashed; }
  .fw .src.any .nm { color: var(--muted); font-weight: 400; }
  .fw .arrow { display: flex; align-items: center; transform: rotate(90deg); color: var(--line-strong); }
  .fw .arrow i { display: block; width: 22px; height: 1px; background: var(--line-strong); }
  .fw .arrow b { display: block; width: 0; height: 0; border: 5px solid transparent;
    border-left-color: var(--ink); border-right: 0; }
  .fw .node { font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
    background: var(--accent); color: #fff; padding: 10px 15px; }
  .fw .node::after { content: "."; color: var(--live); }
  .fw .midcap { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--faint); text-align: center; }
  .fw .doc { width: 100%; max-width: 210px; background: var(--card); border: 1px solid var(--line-strong);
    padding: 13px; display: flex; flex-direction: column; gap: 7px;
    box-shadow: 0 8px 22px rgba(22,41,47,.10); }
  .fw .doc .band-top { height: 20px; background: var(--ink); }
  .fw .doc .ln { height: 5px; background: var(--line); }
  .fw .doc .ln.w70 { width: 70%; } .fw .doc .ln.w45 { width: 45%; } .fw .doc .ln.w85 { width: 85%; }
  .fw .doc .row { display: flex; justify-content: space-between; gap: 10px; align-items: center;
    border-top: 1px solid var(--line); padding-top: 7px; }
  .fw .doc .row .ln { flex: 1; }
  .fw .doc .amt { font-family: var(--mono); font-size: 10px; color: var(--ink-2); }
  .fw .flowcap { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.1em; }

  /* refusals */
.fw .refuse { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .fw .refuse > div { background: var(--card); padding: 17px 19px; display: flex; flex-direction: column; gap: 6px; }
  .fw .refuse .never { font-family: var(--mono); font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--warn); }
  .fw .refuse .what { font-size: 19px; font-weight: 700; }
  .fw .refuse .why { font-size: 16.5px; color: var(--ink-2); }

  /* grid of short things */
.fw .grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
  .fw .grid.three { grid-template-columns: repeat(3, 1fr); }
  .fw .grid > div { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--line); padding-top: 12px; }
  .fw .grid p { font-size: 16.5px; color: var(--ink-2); }
  .fw .onink .grid > div { border-color: var(--rail-line); }
  .fw .onink .grid p { color: var(--rail-quiet); }

  /* two-up */
.fw .two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

  /* phone */
.fw .phone { width: 194px; border: 1px solid var(--line-strong); background: var(--card);
    padding: 9px; display: flex; flex-direction: column; gap: 7px; }
  .fw .phone .top-band { height: 34px; background: var(--ink); display: flex; align-items: center;
    padding: 0 9px; }
  .fw .phone .top-band span { font-family: var(--mono); font-size: 8px; color: var(--rail-text);
    letter-spacing: 0.1em; text-transform: uppercase; }
  .fw .phone .ln { height: 4px; background: var(--line); }
  .fw .phone .ln.w60 { width: 60%; } .fw .phone .ln.w80 { width: 80%; } .fw .phone .ln.w40 { width: 40%; }
  .fw .phone .money { font-family: var(--mono); font-size: 12px; font-weight: 700;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 7px 0; }
  .fw .phone .cta { background: var(--accent); height: 19px; }



  /* the demo film, where the video slot was */
.fw .demo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    background: var(--ink); border: 1px solid var(--line-strong); }

  /* hero composition: the document itself, scrolling.
     The pitch is that this document is deeper than the one they send now, and
     nothing argues depth like watching it go past and not end. It runs through
     two different jobs from the same builder, which is the other half of the
     claim — same company, same week, not the same page. Paused on hover and
     frozen entirely for anyone who asked for less motion. */
.fw .heroart { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .fw .browser { width: 100%; max-width: 460px; background: var(--card);
    border: 1px solid var(--line-strong); box-shadow: 0 16px 40px rgba(22,41,47,.16); }
  .fw .browserbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px;
    background: var(--wash); border-bottom: 1px solid var(--line); }
  .fw .browserbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
  .fw .browserbar span { flex: 1; margin-left: 8px; padding: 3px 10px; background: var(--card);
    font-family: var(--mono); font-size: 10.5px; color: var(--faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fw .reel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card); }
  .fw .reeltrack { animation: proposalreel 28s linear infinite; will-change: transform, opacity; }
  .fw .reeltrack img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 11; }
  .fw .reel:hover .reeltrack { animation-play-state: paused; }
    /* Five equal 8:11 crops in a 4:5 frame, so each crop starts 20% further down
     the track and has 1.8% of the track to spare. It never stops: it drifts
     linearly through that spare 1.8% while lingering on a moment (3s), then
     eases 2.5s to the next. A hard stop after a fast move read as a jerk. After
     the last moment it fades out, jumps to the cover unseen, and fades back in. */
@keyframes proposalreel{
    0%     { transform: translate3d(0, 0, 0);       opacity: 0; }
    2.1%   { opacity: 1; }
    12.5%  { transform: translate3d(0, -1.8%, 0);  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    21.4%  { transform: translate3d(0, -20%, 0); }
    32.1%  { transform: translate3d(0, -21.8%, 0); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    41.1%  { transform: translate3d(0, -40%, 0); }
    51.8%  { transform: translate3d(0, -41.8%, 0); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    60.7%  { transform: translate3d(0, -60%, 0); }
    71.4%  { transform: translate3d(0, -61.8%, 0); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    80.4%  { transform: translate3d(0, -80%, 0); }
    92.9%  { opacity: 1; }
    97.9%  { opacity: 0; }
    100%   { transform: translate3d(0, -81.8%, 0); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){ .fw .reeltrack { animation: none; }}


  /* ---- the ask, repeated ----
     A landing page that asks once at the top and once at the bottom is a
     brochure. This is a thin band that interrupts three times, always with the
     offer attached, because "free" is the reason to click and it should never
     be more than a screen away. */
  /* No rule where it directly follows a dark band: ink on ink reads as overlap. */
  .fw .onink + .band .ctarow { border-top: none; }
.fw .ctarow {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; padding: 24px 0;
    border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  }
  .fw .ctahead { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700;
    letter-spacing: -0.025em; line-height: 1.15; }
  .fw .ctasub { font-family: var(--mono); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }

  /* ---- what your customer gets: six cards, not a row of thin text ----
     This is the list of things a template cannot do, so it is set to be read
     rather than skimmed past: white cards on a hairline grid, an indigo index,
     and a headline heavy enough to carry the claim on its own. */
.fw .blockhead { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1.1; }
  @media (max-width: 1080px){ .fw .gets6 { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 760px){ .fw .gets6 { grid-template-columns: 1fr !important; } }
  .fw .gets6 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); }
  .fw .gets6 > div { background: var(--card); padding: 20px 20px 22px;
    display: flex; flex-direction: column; gap: 8px;
    transition: background .16s ease; }
  .fw .gets6 > div:hover { background: var(--wash); }
  .fw .gets6 .gnum { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
    color: var(--accent); letter-spacing: 0.1em; margin-bottom: 6px; }

  .fw .gets6 h3 { font-size: 21px; letter-spacing: -0.022em; line-height: 1.2; }
    /* Four across, most headings wrap to two lines and one does not; reserve
     two so every paragraph in the row starts at the same height. */
  @media (min-width: 1081px){ .fw .gets6 h3 { min-height: 2.4em; } }
  .fw .gets6 p { font-size: 16.5px; color: var(--ink-2); }
    /* Two product screenshots, both cropped to 16:10: the same moment from the
     customer's side and from yours. One shared panel and the hero's browser
     frame make them a pair instead of two pictures floating on the page. */
  .fw .shots { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; align-items: start;
    background: var(--surface); border: 1px solid var(--line); padding: 28px; }
  .fw .shot { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .fw .shot figcaption { font-size: 17px; color: var(--ink-2); line-height: 1.35; }
  .fw .shot figcaption strong { color: var(--ink); margin-right: 4px; }
  .fw .shotframe { background: var(--card); border: 1px solid var(--line-strong);
    box-shadow: 0 14px 34px rgba(22,41,47,.14); }
  .fw .shotframe img { display: block; width: 100%; height: auto; }
  @media (max-width: 760px){ .fw .shots { padding: 18px; } }

  /* ---- three things a PDF cannot do ---- */
.fw .things { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); }
  .fw .thing { background: var(--card); padding: 22px 20px 20px;
    display: flex; flex-direction: column; gap: 14px; }
  .fw .tnum { font-family: var(--mono); font-size: 13px; font-weight: 700;
    color: var(--accent); letter-spacing: 0.08em; }
  .fw .thing h3 { font-size: 21px; letter-spacing: -0.02em; }
  .fw .thing p { font-size: 16.5px; color: var(--ink-2); }

  /* ---- the offer: the one saturated block on the page ----
     Everything else is iron on paper with hairlines. The moment you are asked
     for something is the moment worth spending the colour on. */
/* The page's own dark slate, the same ground as the problem band. A full-bleed
     navy read harsh next to everything else; the blue now lives only on the
     form's button, where it belongs. */
.fw .onoffer { background: var(--ink); color: #fff; }
  .fw .onoffer .maillink { color: #fff; text-decoration-color: var(--live); text-underline-offset: 3px; }
  .fw .onoffer section { border-top: none; }
  .fw .onoffer h2, .fw .onoffer h3 { color: #fff; }
  .fw .onoffer p, .fw .onoffer li { color: rgba(255,255,255,0.86); }
  .fw .onoffer .lead { color: rgba(255,255,255,0.92); }
  .fw .onoffer .fine { color: rgba(255,255,255,0.68); }
  .fw .onoffer .eyebrow { color: #fff; }
  .fw .onoffer .eyebrow::before { background: var(--live); }
  .fw .onoffer .btn { border-color: rgba(255,255,255,0.55); color: #fff; }
  .fw .onoffer .btn.solid { background: #fff; color: #141A47; border-color: #fff; }

  /* The offer is a value stack beside the ask. The form is the only white
     object in the band, which makes it the only place the eye lands. */
.fw .dealgrid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; }
  .fw .dealcopy { gap: 24px; }
  .fw .dealcopy .signed { margin-top: 0; }
  .fw .dealist { margin: 0; padding-left: 18px; display: flex; flex-direction: column;
    gap: 12px; font-size: 20px; }
  .fw .dealist li::marker { color: var(--live); }

  .fw .signed { display: flex; gap: 20px; align-items: center; margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.22); padding-top: 24px; }
  /* Round and in color: a real person, not a mugshot. */
.fw .mug { width: 96px; height: 96px; object-fit: cover; flex: 0 0 auto;
    border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); }
  .fw .signed .stack-s { gap: 4px; }
  .fw .signedname { font-size: 17px; font-weight: 700; color: #fff; }
  /* The credential does the qualifying, not the title: this is a person who has
     been on both sides of the permit set and also wrote the software. */
.fw .signedcred { font-size: 15.5px; color: rgba(255,255,255,0.7); }

  /* The card is a light island inside a dark band, so it has to opt out of every
     rule the band sets on text and buttons — otherwise its own copy renders
     white on white, which it did. */
.fw .onoffer .askcard p, .fw .onoffer .askcard span, .fw .onoffer .askcard label { color: var(--ink); }
  .fw .onoffer .askcard .asksub, .fw .onoffer .askcard .askfine { color: var(--muted); }
  .fw .onoffer .askcard .field > span { color: var(--muted); }
  .fw .onoffer .askcard .field > span em { color: var(--faint); }
  .fw .onoffer .askcard .askbtn { background: var(--accent); color: #fff; border: 0; }
  .fw .onoffer .askcard .askbtn:hover { background: var(--accent-lift); }
  .fw .askcard { background: var(--card); color: var(--ink); padding: 32px;
    display: flex; flex-direction: column; gap: 15px;
    box-shadow: 0 18px 44px rgba(0,0,0,.3); }
  .fw .askhead { font-size: 29px; font-weight: 700; letter-spacing: -0.028em; }
  .fw .asksub { font-size: 17px; color: var(--muted); margin-top: -8px; }
  .fw .field { display: flex; flex-direction: column; gap: 6px; }
  .fw .field > span { font-family: var(--mono); font-size: 13.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.13em; color: var(--muted); }
  .fw .field > span em { font-style: normal; color: var(--faint); }
  .fw .field input {
    font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--ink);
    background: var(--wash); border: 1px solid var(--line-strong); border-radius: 0;
    padding: 11px 12px; width: 100%;
  }
  /* No placeholder text. The label above the field already says what goes in it,
     and grey type inside an input reads as a filled field until you click it. */
.fw .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px;
    background: var(--card); }
  .fw .askbtn { width: 100%; text-align: center; border: 0; cursor: pointer;
    background: var(--accent); color: #fff; margin-top: 4px; }
  .fw .askbtn:hover { background: var(--accent-lift); }
  .fw .askfine { font-size: 16.5px; color: var(--muted); line-height: 1.55; }
  .fw .askstatus { font-size: 17px; font-weight: 500; line-height: 1.45; }
  .fw .askturnstile:empty { display: none; }
  /* Bait for a bot that fills every field it finds. Off-screen rather than
     display:none, which some bots skip. */
.fw .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .fw .deal { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.25); }
  .fw .deal .side { background: rgba(255,255,255,0.05); padding: 22px 22px 24px;
    display: flex; flex-direction: column; gap: 12px; }
  .fw .sidehead { font-family: var(--mono); font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--live); }
  .fw .deal ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column;
    gap: 8px; font-size: 17px; }
  .fw .deal li::marker { color: rgba(255,255,255,0.5); }
  .fw .sidenote { font-size: 18px; color: #fff; }
  .fw .founder { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 6px; }
  .fw .founder .fine { max-width: 30ch; }

  /* ---- faq ---- */
  /* FAQ: questions that open in place, so five answers cost five lines of
     screen until someone wants one. Native <details>, so no script. */
.fw .faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 760px; }
  .fw .faq details { border-bottom: 1px solid var(--line); }
  .fw .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
    align-items: center; gap: 20px; padding: 18px 2px; font-size: 20px; font-weight: 700;
    letter-spacing: -0.015em; color: var(--ink); }
  .fw .faq summary::-webkit-details-marker { display: none; }
  .fw .faq summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; display: grid;
    place-items: center; border: 1px solid var(--line-strong); font-size: 18px; font-weight: 500;
    color: var(--accent); }
  .fw .faq details[open] summary::after { content: "\2212"; background: var(--accent); color: #fff;
    border-color: var(--accent); }
  .fw .faq summary:hover { color: var(--accent); }
  .fw .faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fw .faq details p { padding: 0 48px 20px 2px; font-size: 17.5px; color: var(--ink-2); }

  /* testimonial with a face */
.fw .said { display: flex; gap: 18px; align-items: flex-start; }

  /* fit */
/* Fit: two cards. "For you" is the solid white one with the accent edge and
     bold lines, so the audience is the first thing read; "isn't for" is the
     dashed, quieter card. Marks are drawn in CSS so no glyph depends on the font. */
.fw .fit { gap: 20px; align-items: stretch; }
  .fw .fitcard { padding: 30px 32px; gap: 14px; }
  .fw .fitcard.yes { background: var(--card); border-top: 4px solid var(--accent); }
  .fw .fitcard.notfor { border: 1px dashed var(--line-strong); padding-top: 33px; }
  .fw .fitcard h3 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; }
  .fw .fitcard.notfor h3 { color: var(--muted); }
  .fw .fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .fw .fit li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid var(--line);
    font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ink); }
  .fw .fit li:first-child { border-top: 0; }
  .fw .fitcard.yes li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 7px; height: 13px;
    border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
  .fw .fitcard.notfor li { font-size: 18.5px; font-weight: 500; color: var(--muted); }
  .fw .fitcard.notfor li::before, .fw .fitcard.notfor li::after { content: ""; position: absolute;
    left: 1px; top: 25px; width: 16px; height: 2.5px; background: var(--faint); transform: rotate(45deg); }
  .fw .fitcard.notfor li::after { transform: rotate(-45deg); }
  .fw .fitnote { margin-top: auto; font-size: 16.5px; color: var(--faint); border-top: 1px solid var(--line); padding-top: 14px; }
  @media (max-width: 640px){
    .fw .fitcard, .fw .fitcard.notfor { padding: 22px 20px; }
    .fw .fit li { font-size: 17.5px; }
    .fw .fitcard.notfor li { font-size: 16.5px; }
  }

  /* Scoped to a class on purpose: a bare `footer` selector also styles the
     footer inside the pull quote, and its space-between split the face off the
     name. */
.fw .pagefoot { padding: 28px 0 42px; font-family: var(--mono); font-size: 13px; color: var(--muted);
    display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

  @media (max-width: 760px){
    .fw .two, .fw .herogrid, .fw .grid.three, .fw .gets6, .fw .shots, .fw .deal, .fw .dealgrid { grid-template-columns: 1fr; }
    .fw .ctarow { flex-direction: column; align-items: flex-start; gap: 16px; }
    .fw .heroart { display: none; }
    .fw .two { gap: 26px; }
    .fw section { padding: 50px 0; }
    .fw .funnel { padding: 20px 18px; }
    .fw .funnelsvg { display: none; }
    .fw .funnel-sm { display: flex; }
    /* The section links collapse on a phone; the two doors do not. .keep is the
       offer, .stay is the way in for someone who already has an account — the
       footer is 10,000 pixels down and is not a way in. */
    .fw .top nav a:not(.keep):not(.stay) { display: none; }
    .fw .top nav { gap: 14px; }}
  @media (prefers-reduced-motion: reduce){ .fw, .fw * { animation: none !important; transition: none !important; }}