/* Flow's site pages (About, the founder sample, Home): round 4 of the sites sprint (26-27 Oct 2026), ported 27 Oct.
   Loaded only by templates/site/_base.html, so no product page changes. Sits on card_page.css and uses only its tokens
   (paper, ink, line, amber, pers, pine, navy) and its components (fc-fit, fc-btn, fc-free, fc-tg, fc-row, fc-lcard,
   fc-note, fc-cvq, fc-stepper, ws-art). Nothing here adds a colour, font or effect family.
   The amber highlighter is the shared mark; orange (pers) is used only to strike a line that is not backed.
   Source: command center SITES_MOCKS_2026_10_25_DRAFT/round4/site.css (Home B's rules and the mock-only review tag left out). */
html{-webkit-text-size-adjust:100%}
body{margin:0}
.fc img{display:block;max-width:100%}
.fc ul{margin:0;padding:0}
.s-w{max-width:1180px;margin:0 auto;padding:0 20px}

/* header, as on apply.withflow.co */
.s-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0}
.s-bar{border-bottom:1px solid var(--line);background:var(--paper)}
.s-logo{font:italic 800 27px/1 var(--sans);letter-spacing:-.02em;text-decoration:none}
.s-logo small{font:500 15px var(--sans);font-style:normal;margin-left:6px}
.s-nav .r{display:flex;gap:18px;align-items:center;font:600 15px var(--sans)}
.s-nav .r a{text-decoration:none}
@media(max-width:640px){.s-nav .hide-s{display:none}}

/* type: product voice. Sans 800 heads, italic serif under the highlighter, mono labels, serif card titles */
.s-k{font:600 12px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.fc .s-h1{font:800 clamp(38px,6vw,76px)/1.06 var(--sans);letter-spacing:-.025em;margin-top:14px}
.fc .s-h2{font:800 clamp(28px,3.7vw,46px)/1.12 var(--sans);letter-spacing:-.02em;margin-top:12px}
.s-h3{font:800 21px/1.25 var(--sans);word-spacing:.04em}
.s-h1 em,.s-h2 em,.s-h3 em{font:italic 500 1.05em/1.1 var(--serif);letter-spacing:-.01em;background:linear-gradient(transparent 58%,var(--amber) 58%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.s-title{font:600 clamp(22px,2.4vw,28px)/1.12 var(--serif);letter-spacing:-.01em}
.s-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:36em}
.s-body{font-size:17px;line-height:1.6;color:var(--ink2);max-width:34em}
.s-body p+p{margin-top:12px}
.fc .s-cap{font:500 12px/1.5 var(--mono);color:var(--ink3);margin-top:14px}
.s-cap a{color:var(--ink)}
.s-sec{padding:clamp(48px,6vw,88px) 0}
.s-rule{border-top:1px solid var(--line)}
.s-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* the marks */
.s-strike{text-decoration:line-through;text-decoration-color:var(--pers);text-decoration-thickness:2px}
.s-backed{box-shadow:inset 0 -2px 0 var(--pine)}
.s-ins{white-space:nowrap;font-style:normal;font-weight:700;background:var(--amber);border-radius:4px;padding:0 4px;text-decoration:none}
.s-hid{letter-spacing:-.1em;opacity:.85}
.s-confirm{font:600 .86em var(--mono);background:#FFF4D6;border-radius:4px;padding:0 3px;box-shadow:inset 0 -2px 0 #E0B44C}

/* one mark draws in per section: the highlighter (transform only), or a card rising (transform + opacity) */
.s-draw{position:relative;display:inline-block;white-space:nowrap;font:italic 500 1.05em/1.1 var(--serif);letter-spacing:-.01em;z-index:0}
.s-draw::before{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.04em;height:.44em;background:var(--amber);z-index:-1;transform-origin:left center;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.js .s-draw:not(.in)::before{transform:scaleX(0);transition:none}
.s-pop{transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.2,1)}
.js .s-pop:not(.in){opacity:0;transform:translateY(8px);transition:none}
@media (prefers-reduced-motion:reduce){
  .js .s-draw:not(.in)::before{transform:none}.s-draw::before{transition:none}
  .js .s-pop:not(.in){opacity:1;transform:none}.s-pop{transition:none}
}

/* media: one frame style; squircle on media only */
.s-photo{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--paper2)}
.s-photo img{width:100%;height:100%;object-fit:cover}
.s-phone{border:2px solid var(--ink);border-radius:32px;background:#fff;overflow:hidden}
.s-phone .url{font:600 11px var(--mono);color:var(--ink3);text-align:center;padding:9px 0;border-bottom:1px solid var(--line)}
.s-phone img{width:100%;aspect-ratio:390/740;object-fit:cover;object-position:top}
@supports (corner-shape: squircle){.s-photo{border-radius:30px;corner-shape:squircle}.s-phone{border-radius:46px;corner-shape:squircle}}

/* white card, as fc-row */
.fc .s-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.fc .s-card+.s-card{margin-top:12px}

/* the title wall (900+) */
.s-wall{position:relative;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);padding:22px;height:340px}
.s-wall .t{font:600 clamp(16px,1.6vw,20px)/1.55 var(--serif);color:var(--ink);opacity:.2;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.s-wall .t span+span::before{content:" · ";color:var(--ink3)}
.s-wall .n{position:absolute;left:0;bottom:0;right:0;padding:56px 22px 22px;background:linear-gradient(rgba(255,255,255,0),#fff 45%)}
.s-num{font:800 clamp(44px,6vw,76px)/1 var(--sans);letter-spacing:-.04em}
.fc .s-num+p{margin-top:8px;font-size:15px;color:var(--ink2);max-width:22em}

@media (max-width:640px){.s-w{padding:0 16px}}
footer.s-foot{padding:32px 0 56px;font-size:14px;color:var(--ink3)}
footer.s-foot a{margin-right:16px}
/* labels inside the amber note stay mono, as "LEAD WITH THIS" on the live result page */
.fc .fc-note .s-k{font:600 12px/1.35 var(--mono);font-style:normal;letter-spacing:.08em;color:var(--ink);margin-bottom:6px}
/* closing question keeps "coming up?" together on phones */
.fc .last .s-h2 em,.fc .end .s-h2 em{white-space:nowrap}

/* ===== ROUND 4 (26 Oct) =====
   Surfaces, not new colours: paper, paper2, and one full-bleed amber field per page with white cards.
   Pine and orange stay inside real product objects. Drawn marks are vector strokes in the semantic colours. */
.s-amber{background:var(--amber)}
.s-paper2{background:var(--paper2)}
.s-amber.s-rule,.s-paper2.s-rule,.s-amber+.s-rule,.s-paper2+.s-rule{border-top-color:transparent}
.fc .s-amber .s-card,.fc .s-paper2 .s-card{border-color:rgba(22,20,15,.08)}

/* drawn recruiter marks: circle, underline, tick, margin arrow. Strokes draw once (stroke-dashoffset), at hand speed:
   circle 1.5 s, underline 1.3 s, arrow 1.1 s, tick 0.75 s, on a gentle ease (no rush in the middle). A second stroke in the
   same mark (the arrow head, the underline's second pass) starts after a short pen lift. Hiding is instant; only drawing moves. */
.mk{position:relative;display:inline-block;white-space:nowrap}
.mk>svg{position:absolute;pointer-events:none;overflow:visible}
.mk-c>svg{left:-14%;top:-30%;width:128%;height:160%}
.mk-u>svg{left:-1%;width:102%;bottom:-.26em;height:.42em}
.mk svg path{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mk-pers path{stroke:var(--pers)}.mk-pine path{stroke:var(--pine)}.mk-ink path{stroke:var(--ink)}.mk-navy path{stroke:var(--navy)}
svg.tick,svg.arrow{display:inline-block;vertical-align:middle;overflow:visible}
svg.tick path,svg.arrow path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.js .mk:not(.in) path,.js .draw:not(.in) path{stroke-dasharray:1;stroke-dashoffset:1}
.mk path,.draw path{stroke-dasharray:1;stroke-dashoffset:0;--dur:1.2s}
.mk-c path{--dur:1.5s}.mk-u path{--dur:1.3s}svg.arrow path{--dur:1.1s}svg.tick path{--dur:.75s}
.js .mk.in path,.js .draw.in path{transition:stroke-dashoffset var(--dur) cubic-bezier(.35,.15,.3,1)}
.js .mk.in path.p2,.js .draw.in path.p2{transition-duration:.55s;transition-delay:calc(var(--dur) + .14s)}

/* the top demonstration: one calm pass of the real line check (about 8 s, once; replay and pause) */
.demo .d{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.demo.run .d:not(.on){opacity:0;transform:translateY(6px)}
.demo .st{background:linear-gradient(var(--pers),var(--pers)) 0 58%/100% 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.2s cubic-bezier(.35,.15,.3,1)}
.demo .bk{background:linear-gradient(var(--pine),var(--pine)) 0 100%/100% 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.2s cubic-bezier(.35,.15,.3,1)}
.demo.run .st:not(.on),.demo.run .bk:not(.on){background-size:0% 2px}
/* only the way in is animated; going back to the start (load, Play again) is instant */
.demo.run .d:not(.on),.demo.run .st:not(.on),.demo.run .bk:not(.on){transition:none}
.demo .prog{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin:2px 0 12px}
.demo .prog i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,1))}
.demo .fixed .arrow{margin-right:6px;vertical-align:-3px}
.demo .tickc{display:inline-flex;align-items:center;gap:6px}
.demo-ctl{display:none;gap:8px;align-items:center;margin-top:12px}
.demo-ctl button{font:600 12px var(--mono);letter-spacing:.04em;background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;cursor:pointer;color:var(--ink)}
.demo-ctl button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.has-demo .demo-ctl{display:flex}

/* link cards, as fc-next: mono label, the value, an arrow, and who should write for what */
.s-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fc .s-link{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.s-link small{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.s-link b{display:flex;justify-content:space-between;gap:12px;font:600 clamp(20px,2vw,25px)/1.2 var(--serif);overflow-wrap:anywhere}
.s-link b i{font-style:normal;font-family:var(--sans)}
.fc .s-link p{font-size:15px;line-height:1.5;color:var(--ink2)}
.s-link:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(22,20,15,.08)}
.s-link:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media(max-width:700px){.s-links{grid-template-columns:1fr}}

/* the rules (Home and About, one block from tools/rules.part.html): a lead card that shows the rule kept,
   with the real draft line and its [confirm] gap, and four short rules beside it. Replaces the "No" list. */
.rules{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:28px}
.fc .rules .s-card{margin:0;display:flex;flex-direction:column;gap:8px;padding:20px 22px}
.fc .rules .lead{grid-row:span 2;justify-content:space-between;gap:20px;padding:24px 26px}
.rules h3{font:800 19px/1.25 var(--sans);letter-spacing:-.01em}
.rules .lead h3{font-size:clamp(25px,2.5vw,32px);letter-spacing:-.02em}
.fc .rules p{font-size:15.5px;line-height:1.5;color:var(--ink2)}
.fc .rules .lead>div>p:not(.n){font-size:17px}
.fc .rules .n{font:600 12px var(--mono);color:var(--ink3)}
.rules .pf{margin:0;background:var(--paper2);border-radius:12px;padding:16px 18px}
.rules .pf .ws-art{font-size:18px}
.rules .pf .s-cap{margin-top:10px}
/* desktop reads down the columns, as the eye does after the tall lead card: 2 above 3, then 4 above 5 */
@media(min-width:901px){.rules>:nth-child(2){grid-area:1/2}.rules>:nth-child(3){grid-area:2/2}.rules>:nth-child(4){grid-area:1/3}.rules>:nth-child(5){grid-area:2/3}}
@media(max-width:900px){.rules{grid-template-columns:1fr 1fr}.fc .rules .lead{grid-column:1/-1;grid-row:auto}}
@media(max-width:560px){.rules{grid-template-columns:1fr}}

/* links that are cards lift, as the product's list cards do (fc-lcard); cards that are not links stay still */
.fc a.fc-next{transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.fc a.fc-next:hover,.fc .s-link:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(22,20,15,.10);border-color:#D6CFBB}
.fc a.fc-next:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fc a.fc-next,.fc .s-link{transition:none}.fc a.fc-next:hover,.fc .s-link:hover{transform:none}}

/* pencil marks, version 2 (default). #v1 or ?marks=v1 in the address goes back to version 1.
   A light grain on the stroke (an SVG displacement filter), a thinner line, and paths that overshoot like a hand:
   the circle loops past its start, the underline gets a second short stroke. */
.pencil .mk svg path,.pencil .draw svg path{stroke-width:1.9;filter:url(#pencil-grain)}
.pencil .mk-c svg path{stroke-width:2}
.s-phone video{display:block;width:100%;aspect-ratio:390/740;object-fit:cover;object-position:top;background:#fff}

/* the cookie notice, as on the product's pages (base.html), in the site's own type */
.s-cookie{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;padding:12px 16px;background:var(--ink);color:var(--paper);font-size:14px;line-height:1.4}
.fc .s-cookie p{margin:0;max-width:44em}