/* ============================================================
   Franchises & multi-location — the network page.
   Borrowed principles, not borrowed pages (attio.com):
   · the page sits in a hairline frame; sections and cells are ruled;
   · two-tone headings, ink trailing into grey, kept to a sensible size;
   · live product windows with app chrome that do things;
   · a workflow of connected steps with a pulse running through it.
   The page follows one question (what doesn't add up?) through four
   colour-coded gaps to an answer, with a small tracker that fills in as
   each gap is reached.
   ============================================================ */

:root{
  /* one colour per gap, with a soft tint, and brighter versions for the dark reveal */
  --c1:#2F4FE0;--c1t:#E8ECFD;--c1d:#7D93FF;
  --c2:#C2611F;--c2t:#FBEADB;--c2d:#F0A565;
  --c3:#0E7C6B;--c3t:#DCF1EC;--c3d:#4FD1B8;
  --c4:#9A3B8C;--c4t:#F5E4F1;--c4d:#E58FD3;
  --fr-accent:#2F4FE0;
  --fr-accent-tint:#E8ECFD;
  --fr-cell:#F4F5F3;
  --fr-ok:#0F6B45;
  --fr-warn:#B5651D;
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
:root[data-theme="dark"]{
  --c1:#8DA2FF;--c1t:#1A1F33;--c2:#E39A5E;--c2t:#2A1D12;--c3:#4CC3AE;--c3t:#10241F;--c4:#DB8BCB;--c4t:#27162A;
  --fr-accent:#8DA2FF;
  --fr-accent-tint:#1A1F33;
  --fr-cell:#121412;
  --fr-ok:#22A876;
  --fr-warn:#E9A56B;
}

/* ---------- the frame ---------- */
.fr-frame{max-width:1280px;margin:0 auto;border-inline:1px solid var(--line);position:relative}
.fr-row{border-top:1px solid var(--line);position:relative}
.fr-pad{padding:clamp(4.5rem,9vw,8rem) clamp(1.25rem,5vw,4.5rem)}
/* a little cross where rails meet a rule, as on a drafting sheet */
.fr-row::before,.fr-row::after{content:'';position:absolute;top:-5px;width:9px;height:9px;
  background:linear-gradient(var(--faint),var(--faint)) center/1px 100% no-repeat,
             linear-gradient(var(--faint),var(--faint)) center/100% 1px no-repeat;opacity:.55}
.fr-row::before{left:-5px}.fr-row::after{right:-5px}

/* ---------- type ---------- */
.fr-pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--s);font-size:.84rem;font-weight:500;
  color:var(--soft);padding:.4rem .9rem;border:1px solid var(--line);border-radius:100px;background:var(--paper)}
.fr-pill i{width:7px;height:7px;border-radius:50%;background:var(--fr-accent);font-style:normal;
  box-shadow:0 0 0 4px var(--fr-accent-tint)}
.fr-display{font-family:var(--d);font-weight:400;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(3.2rem,8vw,7.2rem);color:var(--ink);text-wrap:balance}
.fr-display span{color:var(--faint)}
.fr-kicker{font-family:var(--m);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fr-kicker b{color:var(--fr-accent);font-weight:500}
.fr-lead{font-size:clamp(1.12rem,1.6vw,1.34rem);color:var(--soft);line-height:1.6;max-width:44ch}
.fr-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--s);font-size:.98rem;font-weight:600;
  padding:.85rem 1.4rem;border-radius:10px;border:1px solid var(--ink);transition:transform .2s,border-color .2s}
.fr-btn.fill{background:var(--ink);color:var(--cream)}
.fr-btn.fill:hover{transform:translateY(-2px)}
.fr-btn.line{color:var(--ink);border-color:var(--line);background:var(--paper)}
.fr-btn.line:hover{border-color:var(--ink)}
.fr-btn .a{transition:transform .2s}.fr-btn:hover .a{transform:translateX(3px)}

/* ---------- app windows ---------- */
.fr-win{border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(14,30,25,.45)}
.fr-win-bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--fr-cell)}
.fr-win-bar .dots{display:flex;gap:6px}
.fr-win-bar .dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.fr-win-bar .dots i:nth-child(1){background:#F26B5E}.fr-win-bar .dots i:nth-child(2){background:#F5BF4F}.fr-win-bar .dots i:nth-child(3){background:#5CC55B}
.fr-win-bar b{font-family:var(--s);font-size:.88rem;font-weight:600;color:var(--ink)}
.fr-win-bar em{margin-left:auto;font-style:normal;font-family:var(--m);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.fr-win-body{padding:clamp(1rem,2.2vw,1.5rem)}

/* ---------- 1 · hero ---------- */
.fr-hero{text-align:center;padding-top:clamp(8rem,12vw,10.5rem);padding-bottom:0;overflow:hidden}
.fr-hero .fr-display{margin:1.6rem auto 0;max-width:15ch}
.fr-hero .fr-lead{margin:1.6rem auto 0;max-width:48ch}
.fr-hero .fr-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.fr-hero-stage{position:relative;margin-top:clamp(3rem,6vw,4.5rem);padding:0 clamp(1rem,4vw,3.5rem)}
.fr-hero-stage::before{content:'';position:absolute;left:-10%;right:-10%;bottom:-40%;height:90%;z-index:0;
  background:radial-gradient(60% 60% at 50% 60%,var(--fr-accent-tint),transparent 70%);filter:blur(10px);
  animation:frGlow 9s ease-in-out infinite alternate}
@keyframes frGlow{from{transform:translateX(-4%) scale(1)}to{transform:translateX(4%) scale(1.08)}}
.fr-hero-stage .fr-win{position:relative;z-index:1;max-width:1020px;margin:0 auto;text-align:left;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}

.fr-map{width:100%;border-collapse:collapse;font-family:var(--s)}
.fr-map th{font-family:var(--m);font-size:.7rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:.4rem .7rem .8rem}
.fr-map td{padding:.85rem .7rem;border-top:1px solid var(--line);font-size:1rem;color:var(--ink);vertical-align:middle;transition:background .4s}
.fr-map tr.live td{background:var(--fr-accent-tint)}
.fr-map .loc{font-weight:600;white-space:nowrap}
.fr-map .loc small{display:block;font-family:var(--m);font-size:.7rem;font-weight:400;color:var(--faint);margin-top:.1rem}
.fr-map .raw{font-family:var(--m);font-size:.92rem;color:var(--soft);min-width:12rem}
.fr-map .raw .caret{display:inline-block;width:2px;height:1em;background:var(--fr-accent);vertical-align:-.12em;animation:frBlink 1s steps(1) infinite}
@keyframes frBlink{50%{opacity:0}}
.fr-map .arrow{color:var(--faint);width:2rem;text-align:center;opacity:0;transition:opacity .3s}
.fr-map .one span{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;padding:.3rem .7rem;border-radius:8px;
  background:var(--fr-accent-tint);color:var(--fr-accent);opacity:0;transform:scale(.9);transition:opacity .35s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.fr-map .one span::before{content:'✓';font-weight:700}
.fr-map tr.done .arrow{opacity:1}
.fr-map tr.done .one span{opacity:1;transform:none}
.fr-map-foot{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.fr-map-foot div{font-family:var(--m);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.fr-map-foot b{display:block;font-family:var(--s);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;text-transform:none;color:var(--ink);margin-top:.2rem}
@media(max-width:700px){.fr-map .arrow{display:none}.fr-map .loc small{display:none}}

/* chapter 2 — a messy listing becoming clean fields */
.fr-before{font-family:var(--m);font-size:.92rem;line-height:1.6;color:var(--soft);padding:1rem 1.1rem;border-radius:10px;
  border:1px dashed var(--line);background:var(--fr-cell)}
.fr-before small,.fr-fields small{display:block;font-family:var(--m);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:.4rem}
.fr-fields{margin-top:1rem}
.fr-field{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line);
  font-size:1rem;opacity:0;transform:translateX(-8px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--i) * 260ms + 400ms)}
.in .fr-field{opacity:1;transform:none}
.fr-field span{font-family:var(--m);font-size:.86rem;color:var(--faint)}
.fr-field b{font-weight:600;color:var(--ink)}

/* chapter 3 — an AI buyer's question, answered by an API */
.fr-ask{display:inline-block;max-width:34rem;padding:.9rem 1.1rem;border-radius:14px 14px 14px 4px;background:var(--fr-cell);
  border:1px solid var(--line);font-size:1.02rem;line-height:1.5;color:var(--ink)}
.fr-ask small{display:block;font-family:var(--m);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}
.fr-api{margin-top:1rem;border-radius:12px;background:#0E1511;color:#CFE3D6;padding:1rem 1.2rem;min-height:12.5rem;
  font-family:var(--m);font-size:.9rem;line-height:1.65;white-space:pre-wrap;overflow-x:auto}
.fr-api .k{color:#8FB8FF}.fr-api .s{color:#F2C897}.fr-api .n{color:#9FE0C4}
.fr-api-head{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#6F8A7A;margin-bottom:.6rem}
.fr-api-head b{color:#9FE0C4;font-weight:500}

/* chapter 4 — hours reconciling into a payroll file */
.fr-pay{width:100%;border-collapse:collapse;font-size:.98rem}
.fr-pay th{font-family:var(--m);font-size:.68rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);text-align:left;padding:.3rem .5rem .7rem}
.fr-pay td{padding:.75rem .5rem;border-top:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.fr-pay tr{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s;transition-delay:calc(var(--i) * 280ms + 300ms)}
.in .fr-pay tr{opacity:1;transform:none}
.fr-pay thead tr{opacity:1;transform:none}
.fr-st{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;padding:.22rem .6rem;border-radius:100px}
.fr-st.ok{background:rgba(15,107,69,.1);color:var(--fr-ok)}
.fr-st.warn{background:rgba(181,101,29,.12);color:var(--fr-warn)}
.fr-pay-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.fr-pay-foot>span:first-child{font-family:var(--m);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.fr-ready{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;padding:.5rem 1rem;border-radius:10px;
  background:var(--ink);color:var(--cream);opacity:0;transform:scale(.92);transition:opacity .5s 2s,transform .5s cubic-bezier(.3,1.6,.5,1) 2s}
.in .fr-ready{opacity:1;transform:none}

/* ---------- 4 · how we get you there: a workflow with a pulse ---------- */
.fr-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.8rem,1.8vw,1.4rem);margin-top:clamp(2.8rem,5.5vw,4rem);position:relative}
@media(max-width:980px){.fr-flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fr-flow{grid-template-columns:1fr}}
.fr-node{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:1.4rem 1.3rem 1.5rem;
  opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),border-color .4s;
  transition-delay:calc(var(--i) * 160ms)}
.fr-flow.in .fr-node{opacity:1;transform:none}
.fr-node.lit{border-color:var(--fr-accent);box-shadow:0 0 0 4px var(--fr-accent-tint)}
.fr-node span{font-family:var(--m);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fr-accent)}
.fr-node h3{margin-top:.8rem;font-family:var(--s);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.15;color:var(--ink)}
.fr-node p{margin-top:.6rem;font-size:1rem;color:var(--soft);line-height:1.5}
/* the connector between nodes, with light running along it */
.fr-node:not(:last-child)::after{content:'';position:absolute;top:2.1rem;left:100%;width:clamp(.8rem,1.8vw,1.4rem);height:2px;
  background:linear-gradient(90deg,var(--line),var(--fr-accent),var(--line));background-size:300% 100%;animation:frFlow 1.8s linear infinite}
@keyframes frFlow{from{background-position:100% 0}to{background-position:-200% 0}}
@media(max-width:980px){.fr-node::after{display:none}}

/* ---------- 5 · point of view + proof ---------- */
.fr-pov{font-family:var(--d);font-weight:400;letter-spacing:-.025em;line-height:1;font-size:clamp(2.6rem,6vw,5.2rem);
  color:var(--ink);max-width:17ch;text-wrap:balance}
.fr-pov em{font-style:italic;color:var(--fr-accent)}
.fr-split{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:900px){.fr-split{grid-template-columns:1fr}}
.fr-split>div{padding:clamp(3.2rem,6.5vw,5.5rem) clamp(1.25rem,4.5vw,4rem)}
.fr-split>div+div{border-left:1px solid var(--line)}
@media(max-width:900px){.fr-split>div+div{border-left:0;border-top:1px solid var(--line)}}
.fr-proof h3{margin-top:1.2rem;font-family:var(--d);font-weight:400;letter-spacing:-.02em;font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1}
.fr-proof p{margin-top:1.1rem;font-size:clamp(1.1rem,1.5vw,1.26rem);color:var(--soft);line-height:1.58;max-width:40ch}
.fr-proof .pending{margin-top:1.6rem;padding:1rem 1.2rem;border-radius:12px;border:1px dashed var(--line);font-size:1rem;color:var(--faint);font-style:italic}
.fr-proof a{display:inline-flex;gap:.4rem;margin-top:1.6rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}

/* ---------- 6 · close ---------- */
.fr-close{text-align:center;overflow:hidden;isolation:isolate}
.fr-close .fr-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}
.fr-close::before{content:'';position:absolute;left:10%;right:10%;bottom:-60%;height:100%;
  background:radial-gradient(50% 50% at 50% 50%,var(--fr-accent-tint),transparent 70%);animation:frGlow 10s ease-in-out infinite alternate;z-index:-1}

@media(prefers-reduced-motion:reduce){
  .fr-hero-stage::before,.fr-close::before,.fr-node::after{animation:none}
  .fr-field,.fr-pay tr,.fr-ready,.fr-node{opacity:1;transform:none}
}

/* ---------- hero scorecard: Monday's numbers assembling themselves ---------- */
.fr-sources{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1.1rem}
.fr-sources>small{font-family:var(--m);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-right:.3rem}
.fr-src{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--s);font-size:.84rem;font-weight:600;padding:.32rem .7rem;
  border-radius:100px;border:1px solid var(--line);color:var(--faint);transition:all .4s}
.fr-src::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .4s,box-shadow .4s}
.fr-src.on{color:var(--ink);border-color:transparent;background:var(--fr-accent-tint)}
.fr-src.on::before{background:var(--fr-accent);box-shadow:0 0 0 3px rgba(47,79,224,.18)}
.fr-score td,.fr-score th{white-space:nowrap}
.fr-score td.num{font-variant-numeric:tabular-nums;text-align:right}
.fr-score th.num{text-align:right}
.fr-score tr.pend td{color:var(--faint)}
.fr-score tr.pend td.num{opacity:.35}
.fr-score td.fl{text-align:right;width:1%}
.fr-flag{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;padding:.28rem .65rem;border-radius:100px;
  background:rgba(181,101,29,.12);color:var(--fr-warn);opacity:0;transform:scale(.9);transition:opacity .35s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.fr-flag::before{content:'!';font-weight:800}
.fr-score tr.show .fr-flag{opacity:1;transform:none}
.fr-score td.hot{color:var(--fr-warn);font-weight:700}
@media(max-width:820px){.fr-score .opt{display:none}}

/* ---------- chapter 1: as reported vs comparable ---------- */
.fr-recon{width:100%;border-collapse:collapse;font-size:1rem}
.fr-recon th{font-family:var(--m);font-size:.68rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);text-align:left;padding:.3rem .5rem .8rem}
.fr-recon th.num,.fr-recon td.num{text-align:right}
.fr-recon td{padding:.9rem .5rem;border-top:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.fr-recon td.loc{font-weight:600;white-space:nowrap}
.fr-recon td.rep{color:var(--soft)}
.fr-recon td.cmp{font-weight:700;color:var(--fr-accent);font-size:1.08rem}
.fr-recon .why{display:flex;flex-wrap:wrap;gap:.3rem}
.fr-recon .why em{font-style:normal;font-size:.78rem;font-weight:600;padding:.22rem .55rem;border-radius:6px;
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i) * 300ms + var(--j) * 120ms + 300ms)}
.fr-recon .why em.bad{background:rgba(181,101,29,.12);color:var(--fr-warn)}
.fr-recon .why em.ok{background:rgba(15,107,69,.1);color:var(--fr-ok)}
.in .fr-recon .why em{opacity:1;transform:none}
.fr-recon td.cmp span{opacity:0;transition:opacity .5s;transition-delay:calc(var(--i) * 300ms + 900ms)}
.in .fr-recon td.cmp span{opacity:1}
.fr-rule{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--soft);line-height:1.5}
.fr-rule b{color:var(--ink)}


/* ---------- salons and dessert shops, side by side ---------- */
.fr-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.2vw,1.6rem);align-items:start}
@media(max-width:860px){.fr-pair{grid-template-columns:1fr}}
.fr-col{min-width:0}
.fr-vtag{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.8rem;font-family:var(--m);font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.fr-vtag::before{content:'';width:9px;height:9px;border-radius:3px;background:var(--fr-accent)}
.fr-col[data-v="b"] .fr-vtag::before{background:#C2611F}
.fr-hero-stage .fr-pair{max-width:1120px;margin:0 auto;text-align:left;position:relative;z-index:1}
.fr-hero-stage .fr-win{border-bottom-left-radius:16px;border-bottom-right-radius:16px;border-bottom:1px solid var(--line)}
.fr-hero-stage{padding-bottom:clamp(3rem,6vw,4.5rem)}
.fr-gap-demo .fr-pair .fr-win{max-width:none}
/* compact tables for half-width windows */
.fr-score td,.fr-score th{padding:.7rem .45rem}
.fr-score .loc .fr-flag{display:flex;width:max-content;margin-top:.45rem;font-size:.74rem}
.fr-recon td,.fr-recon th{padding:.75rem .4rem}
.fr-recon td.loc small{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem;font-weight:400}
.fr-pay{font-size:.92rem}
.fr-pay td,.fr-pay th{padding:.65rem .4rem}
.fr-pay .fr-st{white-space:normal;line-height:1.3}
.fr-api{font-size:.84rem;min-height:11rem}
.fr-ask{font-size:.98rem}

/* ---------- section 01: three plain truths, in ruled cells ---------- */
.fr-truths{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
@media(max-width:860px){.fr-truths{grid-template-columns:1fr}}
.fr-truth{position:relative;padding:clamp(2.4rem,4.8vw,3.6rem) clamp(1.25rem,3vw,2.4rem);border-right:1px solid var(--line);
  opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 180ms + 150ms)}
.fr-truth:last-child{border-right:0}
@media(max-width:860px){.fr-truth{border-right:0;border-bottom:1px solid var(--line)}}
.in .fr-truth{opacity:1;transform:none}
.fr-truth span{font-family:var(--m);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fr-accent)}
.fr-truth h3{margin-top:1.1rem;font-family:var(--s);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.9rem,3.2vw,2.7rem);color:var(--ink);max-width:12ch}
.fr-truth p{margin-top:1.1rem;font-size:clamp(1.1rem,1.45vw,1.24rem);color:var(--soft);line-height:1.55;max-width:30ch}
/* a quiet rule that draws across each cell as it arrives */
.fr-truth::after{content:'';position:absolute;left:clamp(1.25rem,3vw,2.4rem);top:0;height:2px;width:3rem;background:var(--fr-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 180ms + 500ms)}
.in .fr-truth::after{transform:scaleX(1)}
.fr-lead-wide{margin-top:1.6rem;font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--soft);line-height:1.6;max-width:50ch}
@media(prefers-reduced-motion:reduce){.fr-truth{opacity:1;transform:none}.fr-truth::after{transform:none}}

/* each pair now names its own two franchise types; left is blue, right is amber */
.fr-col[data-v] .fr-vtag::before{background:var(--fr-accent)}
.fr-col:nth-child(2) .fr-vtag::before{background:#C2611F}
/* half-width staff tables: hours never break across lines */
.fr-pay td:nth-child(2),.fr-pay td:nth-child(3){white-space:nowrap}
.fr-pay .fr-st{white-space:nowrap}

/* ============================================================
   The gaps: calmer type, four coloured gaps, the answer, a tracker
   ============================================================ */
.fr-display{font-size:clamp(2.8rem,6.4vw,5.6rem)}
.fr-hero .fr-display{max-width:16ch}
.fr-h{margin-top:1.1rem;font-family:var(--s);font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.9rem,3.4vw,2.9rem);color:var(--ink);max-width:22ch;text-wrap:balance}
.fr-h span{color:var(--faint);font-weight:500}
.fr-body{font-size:clamp(1.06rem,1.3vw,1.18rem);color:var(--soft);line-height:1.62;max-width:46ch}
.fr-headrow{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
@media(max-width:900px){.fr-headrow{grid-template-columns:1fr}}

/* hero: when these numbers arrive */
.fr-stamp{max-width:1120px;margin:0 auto 1.1rem;display:flex;align-items:center;gap:.8rem;text-align:left;
  font-family:var(--s);font-size:.98rem;color:var(--soft);position:relative;z-index:1}
.fr-stamp b{font-family:var(--m);font-size:.72rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:6px;background:var(--ink);color:var(--cream)}

/* the scene: each truth carries a colour */
.fr-truth{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,transparent),transparent 70%)}
.fr-truth span{color:var(--c)}
.fr-truth::after{background:var(--c)}
.fr-truth h3{font-size:clamp(1.5rem,2.4vw,2rem);max-width:14ch}
.fr-truth p{font-size:clamp(1.04rem,1.3vw,1.14rem)}

/* a gap: heading and story side by side, the example screens below on its own tint */
.fr-gap{position:relative;border-top:1px solid var(--line);scroll-margin-top:80px}
.fr-gap::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:4px;background:var(--c)}
.fr-gap-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;
  padding:clamp(3rem,6vw,4.8rem) clamp(1.25rem,5vw,4.5rem) clamp(2.2rem,4vw,3rem)}
@media(max-width:900px){.fr-gap-text{grid-template-columns:1fr}}
.fr-gap-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--m);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:100px;background:var(--ct);color:var(--c)}
.fr-gap-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.fr-gap-h{margin-top:1.1rem;font-family:var(--s);font-weight:600;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.8rem,3vw,2.6rem);color:var(--ink);max-width:16ch}
.fr-fix{margin-top:1.4rem;padding-left:1rem;border-left:2px solid var(--c);font-size:clamp(1.02rem,1.25vw,1.12rem);color:var(--ink);line-height:1.55;max-width:46ch}
.fr-fix i{display:block;font-style:normal;font-family:var(--m);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--c);margin-bottom:.35rem}
.fr-fix a{color:var(--c);border-bottom:1px solid currentColor}
.fr-gap-demo{padding:clamp(1.8rem,4vw,3.2rem) clamp(1.25rem,5vw,4.5rem);background-color:var(--ct);
  background-image:radial-gradient(color-mix(in srgb,var(--c) 22%,transparent) 1px,transparent 1.3px);background-size:16px 16px}
.fr-gap .fr-col .fr-vtag::before{background:var(--c)}
.fr-gap .fr-col:nth-child(2) .fr-vtag::before{background:var(--ink)}

/* the reveal: a dark band where the four threads become one */
.fr-reveal{background:#0E1412;color:#F4F1EA;overflow:hidden;isolation:isolate}
.fr-reveal::before,.fr-reveal::after{display:none}
.fr-reveal .fr-pad::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.55;
  background:radial-gradient(40% 50% at 8% 20%,rgba(125,147,255,.35),transparent 70%),radial-gradient(35% 45% at 30% 95%,rgba(240,165,101,.28),transparent 70%),
             radial-gradient(40% 50% at 75% 10%,rgba(79,209,184,.25),transparent 70%),radial-gradient(35% 50% at 95% 85%,rgba(229,143,211,.28),transparent 70%)}
.fr-reveal .fr-kicker{color:rgba(244,241,234,.55)}
.fr-reveal .fr-kicker b{color:#F4F1EA}
.fr-reveal-h{margin-top:1.3rem;font-family:var(--d);font-weight:400;letter-spacing:-.025em;line-height:1;font-size:clamp(2.5rem,5.6vw,4.8rem);max-width:17ch;text-wrap:balance}
.fr-reveal-h em{font-style:italic;background:linear-gradient(90deg,#7D93FF,#4FD1B8 40%,#F0A565 70%,#E58FD3);-webkit-background-clip:text;background-clip:text;color:transparent}
.fr-threads{margin-top:clamp(2.4rem,5vw,3.6rem)}
.fr-threads svg{display:block;width:100%;height:auto;overflow:visible}
.th{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i,0) * 200ms + 200ms)}
.th.one{stroke:#F4F1EA;stroke-width:4;transition-delay:1.5s;transition-duration:.8s}
.in .th{stroke-dashoffset:0}
.th-lbl text{font-family:var(--m);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.th-end{opacity:0;transform-origin:956px 125px;transform:scale(.6);transition:opacity .5s 2.2s,transform .6s cubic-bezier(.3,1.6,.5,1) 2.2s}
.in .th-end{opacity:1;transform:none}
.th-end circle{fill:#F4F1EA}
.th-end text{font-family:var(--d);font-style:italic;font-size:32px;fill:#0E1412}
.fr-thread-chips{display:none}
@media(max-width:640px){
  .fr-threads .th-lbl{display:none}
  .fr-thread-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
  .fr-thread-chips span{font-family:var(--m);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .6rem;border-radius:100px;border:1px solid var(--c);color:var(--c)}
  .fr-thread-chips b{font-family:var(--s);font-size:.85rem;font-weight:600;align-self:center;margin-left:.2rem}
}
.fr-reveal-foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,4vw,4rem);margin-top:clamp(2.2rem,4.5vw,3.2rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid rgba(244,241,234,.14)}
@media(max-width:760px){.fr-reveal-foot{grid-template-columns:1fr}}
.fr-reveal-foot p{font-size:clamp(1.06rem,1.35vw,1.2rem);line-height:1.6;color:rgba(244,241,234,.72);max-width:44ch}
.fr-reveal-foot b{color:#F4F1EA;font-weight:600}
@media(prefers-reduced-motion:reduce){.th{stroke-dashoffset:0;transition:none}.th-end{opacity:1;transform:none;transition:none}}

/* the five steps pick up the gap colours */
.fr-node span{color:var(--c)}
.fr-node.lit{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 16%,transparent)}
.fr-node h3{font-size:clamp(1.15rem,1.5vw,1.35rem)}
.fr-flow{margin-top:clamp(2.2rem,4.5vw,3.2rem)}
.fr-proof h3{font-size:clamp(1.8rem,3vw,2.5rem)}
.fr-close .fr-h{text-align:center}
.fr-close::before{background:radial-gradient(30% 50% at 35% 50%,var(--c1t),transparent 70%),radial-gradient(30% 50% at 65% 50%,var(--c4t),transparent 70%)}

/* gaps found: a small pill that follows you and fills in */
.fr-tally{position:fixed;left:50%;bottom:20px;z-index:40;display:flex;align-items:center;gap:.8rem;
  padding:.55rem .6rem .55rem 1rem;border-radius:100px;background:#101614;color:#F4F1EA;
  border:1px solid rgba(244,241,234,.14);box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.fr-tally.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.fr-tally-lbl{font-family:var(--m);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.fr-tally-dots{display:flex;gap:.4rem}
.fr-tally-dots a{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--c);transition:background .4s,transform .3s}
.fr-tally-dots a.got{background:var(--c);transform:scale(1.1)}
.fr-tally-dots a:nth-child(1){--c:#7D93FF!important}.fr-tally-dots a:nth-child(2){--c:#F0A565!important}
.fr-tally-dots a:nth-child(3){--c:#4FD1B8!important}.fr-tally-dots a:nth-child(4){--c:#E58FD3!important}
.fr-tally b{font-family:var(--s);font-size:.84rem;font-weight:600;padding:.3rem .7rem;border-radius:100px;background:rgba(244,241,234,.1);white-space:nowrap}
.fr-tally.closed b{background:#F4F1EA;color:#101614}
.fr-reveal-h{color:#F4F1EA}
@media(max-width:560px){.fr-tally-lbl{display:none}.fr-tally{gap:.6rem;padding-left:.8rem}}
/* phone: the Monday scorecard fits without scrolling sideways */
@media(max-width:520px){
  .fr-score td,.fr-score th{padding:.6rem .28rem;font-size:.9rem}
  .fr-score th{font-size:.62rem}
}
.fr-win-body{overflow-x:auto}
/* the drafting marks sit just outside the frame; never let them widen the page */
#main{overflow-x:clip}
@media(max-width:520px){.fr-score td.loc{white-space:normal}.fr-score .loc .fr-flag{width:auto;max-width:9rem;white-space:normal;line-height:1.3}}
/* hero: smaller, two to three lines */
.fr-hero .fr-display{font-size:clamp(2.6rem,5.4vw,4.8rem);max-width:19ch}

/* ---------- scratch-off: each hidden phrase sits under a foil in its gap's colour ---------- */
.fr-display,.fr-gap-h{position:relative}
.fr-redact{background:none;color:var(--c);padding:0}
.fr-foil{position:absolute;z-index:2;display:block;touch-action:none;cursor:grab;transition:opacity .45s ease}
.fr-foil.gone{opacity:0;pointer-events:none}
/* little flecks of foil that fall away as it's scratched */
.fr-fleck{position:absolute;z-index:3;width:5px;height:4px;border-radius:1px;pointer-events:none;
  animation:frFleck .8s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes frFleck{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}

/* ---------- the scene: an owner's desk, in sticky notes ---------- */
.fr-board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,1.8rem);
  padding:clamp(3rem,6vw,4.4rem) clamp(1.25rem,5vw,4.5rem) clamp(3rem,6vw,4.4rem);border-top:1px solid var(--line);
  background:#F3EDE2;background-image:radial-gradient(rgba(120,90,50,.09) 1px,transparent 1.3px);background-size:14px 14px}
:root[data-theme="dark"] .fr-board{background-color:#1C1A16;background-image:radial-gradient(rgba(255,235,200,.06) 1px,transparent 1.3px)}
@media(max-width:980px){.fr-board{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fr-board{grid-template-columns:1fr}}
.fr-board-cap{position:absolute;left:clamp(1.25rem,5vw,4.5rem);top:clamp(1rem,2vw,1.4rem);font-family:'Caveat',cursive;font-size:1.35rem;color:#8A6E4B}
.fr-note{position:relative;margin:0;min-height:230px;padding:1.7rem 1.4rem 1.2rem;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--n);color:#2B2418;border-radius:3px 3px 18px 3px;box-shadow:0 18px 30px -18px rgba(60,40,10,.45),0 2px 0 rgba(0,0,0,.04);
  transform:rotate(var(--r)) translateY(-40px);opacity:0;
  transition:opacity .6s ease,transform .9s cubic-bezier(.3,1.5,.5,1),box-shadow .3s;transition-delay:calc(var(--i) * 160ms + 150ms)}
.in .fr-note{opacity:1;transform:rotate(var(--r))}
.fr-note:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 26px 40px -20px rgba(60,40,10,.5);transition-delay:0s}
/* a strip of tape holding each note up */
.fr-note::before{content:'';position:absolute;top:-11px;left:50%;width:84px;height:24px;transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.fr-note.y{--n:#FFE27A}.fr-note.p{--n:#FFC2D1}.fr-note.b{--n:#BFE0FF}.fr-note.g{--n:#C6EFCB}
.fr-note p{font-family:'Caveat',cursive;font-weight:500;font-size:clamp(1.55rem,2vw,1.85rem);line-height:1.12}
.fr-note u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(0,0,0,.1) 62%)}
.fr-note figcaption{margin-top:1.2rem;padding-top:.8rem;border-top:1.5px dashed rgba(43,36,24,.22);font-family:var(--s);font-size:.98rem;font-weight:600;color:#2B2418}
.fr-note figcaption b{display:block;font-family:var(--m);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(43,36,24,.55);margin-bottom:.2rem}
@media(prefers-reduced-motion:reduce){.fr-note{opacity:1;transform:rotate(var(--r));transition:none}}