/* FnF brand tokens are copied unchanged from the supplied design system.
   Marketing-specific scale and requested illustrations extend the workstation rules. */
:root{--ink:var(--text-main);--paper:var(--bg-page);--cream:var(--surface-card);--orange:var(--accent);--gray:var(--text-faint);--line:var(--border-default);--blue:var(--accent)}
body{font-family:var(--font-ui);background:var(--bg-page);color:var(--text-main)}
p,.hero-description,.section-top p,.how p,.life p,.faq p{color:var(--text-secondary)}
h1,h2,h3{font-weight:600}h1{letter-spacing:-.055em}h2{letter-spacing:-.045em}
.kicker,.card-label,.stamp,.annotation,.step:before{font-family:var(--font-mono)}
.brand{font-family:var(--font-mono);font-size:19px;letter-spacing:-.05em}.brand-mark{background:none;border:0;transform:none;width:35px;height:35px}.brand-mark img{width:35px;height:35px;object-fit:contain}
.nav{height:76px}.nav-links{color:var(--text-secondary)}
.button{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:500;box-shadow:none;transition:background .13s,border-color .13s}
.button:hover{transform:none;box-shadow:none;background:var(--accent-hover)}.button.light{color:var(--text-main);background:var(--surface-card);border-color:var(--border-strong)}.button.light:hover{background:var(--surface-hover)}
.hero{padding-top:25px;position:relative}.hero .kicker{color:var(--text-secondary);margin-bottom:18px;font-size:10px}.hero h1{font-size:clamp(36px,4.6vw,64px);margin-bottom:8px}.rotator{min-height:1.5em}.phrase span{background:transparent;color:var(--accent);padding:0;box-shadow:none}.phrase:last-child{font-size:.84em}.hero-description{font-size:16px;margin:0 auto 18px;max-width:620px}.hero-note{margin-top:10px}.motion-toggle{color:var(--text-faint)}
.hero-scene{height:145px;max-width:560px;display:flex;align-items:center;justify-content:center;gap:20px;margin:4px auto 14px}.hero-scene .doodle{width:120px;height:120px;min-height:0;max-height:120px;object-fit:contain;mix-blend-mode:normal}.doodle-connector{color:var(--border-strong);font-size:25px;letter-spacing:5px}
.doodle{object-fit:contain;animation:doodle-drift 4.8s ease-in-out infinite;transform-origin:50% 75%;will-change:transform}.clock-doodle{animation-name:doodle-rock;animation-duration:5.3s}.check-doodle{animation-delay:-1.8s}.note-doodle{animation-delay:-.7s}
.promise-strip{padding:16px 25px;font-size:12px;color:var(--text-secondary)}section{padding:88px 0}
.problem-card,.problem-card:nth-child(2){background:var(--surface-card);border-color:var(--border-default);box-shadow:none;transform:none;padding-top:25px;min-height:350px;border-radius:8px}.problem-card:nth-child(1),.problem-card:nth-child(3){transform:none}.problem-card:hover{transform:none;border-color:var(--border-strong)}.problem-card .stamp{display:none}.problem-card .card-label{font-size:10px;color:var(--text-faint);margin-bottom:12px}.problem-card h3{margin-bottom:16px}.problem-card .doodle{width:96px;height:96px;display:block;margin:2px 0 18px}.problem-card:nth-child(2) .doodle{animation-delay:-2s}.problem-card:nth-child(3) .doodle{animation-delay:-3s}
.underlined:after{height:2px}.shift{background:var(--surface-card);border:1px solid var(--border-default);border-radius:12px;padding:55px}.shift .kicker{color:var(--text-faint)}.shift p,.shift-note{color:var(--text-secondary)}.shift-header{position:relative;padding-right:140px;max-width:none}.shift-header .doodle{position:absolute;right:0;top:12px;width:115px;height:115px}.flow-core{background:var(--bg-page);border-color:var(--accent-border)}.flow-col.after .flow-item{background:var(--bg-page);border:1px solid var(--border-default);color:var(--text-main)}.flow-col.after .flow-item:before,.step:before,.fit li:before,summary:after{color:var(--accent)}.flow-item{border-color:var(--border-strong)}.flow-arrow{animation:signal 3.5s ease-in-out infinite}.flow-arrow:nth-of-type(2){animation-delay:.7s}
.tab[aria-selected=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.tab{color:var(--text-secondary)}.example-panel{background:var(--surface-card)}.example-side.after{background:var(--bg-page);border-left:1px solid var(--border-default)}.example-side .kicker{color:var(--text-faint)}.examples> .reveal{position:relative}.section-doodle{width:90px;height:90px;margin:0 auto 15px;display:block}.life{background:var(--surface-card)}.life-grid{grid-template-columns:.65fr 1.35fr}.life .benefit-art{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;max-width:300px}.life .benefit-art .doodle{width:130px;height:130px;mix-blend-mode:normal}.benefit-art .doodle:nth-child(2){animation-delay:-2s}.life .small{color:var(--text-faint)}.benefits span{color:var(--text-secondary)}
.booking{background:var(--surface-card);border-color:var(--border-default)}.booking p{color:var(--text-secondary)}.booking-box{background:var(--bg-page);border-color:var(--border-strong);box-shadow:none;transform:none}.booking-box small{color:var(--text-faint)}.booking .doodle{width:85px;height:85px;display:block;margin-bottom:18px}.faq{background:var(--bg-page)}.motion-ready .reveal{transform:translateY(4px);transition:opacity .32s cubic-bezier(.2,.8,.3,1),transform .32s cubic-bezier(.2,.8,.3,1)}.motion-ready .reveal.visible{transform:none}dialog{background:var(--surface-card);color:var(--text-main);border-color:var(--border-strong)}.close-dialog{color:var(--text-main)}
body.paused .doodle,body.paused .flow-arrow{animation-play-state:paused}
@keyframes doodle-drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes doodle-rock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes signal{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:900px){.shift-header{padding-right:110px}.shift-header .doodle{width:90px;height:90px}.life-grid{grid-template-columns:.7fr 1fr}.life .benefit-art{grid-template-columns:1fr;justify-items:center}.hero h1{font-size:48px}}
@media(max-width:650px){.nav{height:64px}.hero{padding-top:16px}.hero .kicker{font-size:9px;padding:6px 9px;max-width:100%;margin-bottom:17px}.hero h1{font-size:clamp(30px,8.5vw,42px);line-height:1.08}.rotator{min-height:2.22em;margin-top:8px}.hero .phrase:last-child{font-size:.93em}.hero-description{font-size:14px;margin-bottom:16px}.hero-note{font-size:10px}.motion-toggle{padding:5px;font-size:10px}.hero-scene{height:100px;gap:10px;margin-top:0;margin-bottom:10px}.hero-scene .doodle{width:82px;height:82px;max-height:82px}.doodle-connector{font-size:15px;letter-spacing:1px}.actions{gap:15px}.actions .button{font-size:12px;padding:11px 14px}.text-link{font-size:12px}.promise-strip{font-size:9px;padding:13px 15px}section{padding:64px 0}.problem-card{min-height:0}.problem-card .doodle{width:76px;height:76px;float:right;margin:0 0 10px 12px}.problem-card .card-label{margin-bottom:25px}.problem-card h3{max-width:220px}.problem-card p{clear:both}.shift{padding:32px 22px}.shift-header{padding-right:0}.shift-header .doodle{position:static;display:block;margin-bottom:18px;width:70px;height:70px}.example-side.after{border-left:0;border-top:1px solid var(--border-default)}.life-grid{grid-template-columns:1fr}.life .benefit-art{display:flex;gap:20px;max-width:240px;margin-bottom:24px}.life .benefit-art .doodle{width:95px;height:95px}.who,.booking,.faq{padding:64px 0}}
@media(prefers-reduced-motion:reduce){.doodle,.flow-arrow{animation:none!important}.motion-ready .reveal{opacity:1;transform:none}}

/* Works with: AI tools row in the hero */
.works-with{margin:24px auto 36px;text-align:center}
.works-with .kicker{display:block;border:0;border-radius:0;padding:0;background:none;margin-bottom:18px;color:var(--text-main)}
.works-with ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,48px)}
.works-with li{display:grid;justify-items:center;gap:10px;color:var(--text-main)}
.works-with svg{width:36px;height:36px;display:block}
.works-with span{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}

/* Fold: hero + promise strip fill the first screen, with room to breathe */
.hero{min-height:calc(100svh - 76px - 60px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(28px,5vh,64px)}
.hero>.kicker{align-self:center;margin-bottom:clamp(20px,3.5vh,36px)}
.hero h1{font-size:clamp(38px,min(5.4vw,7.4vh),80px);line-height:1.04;margin-bottom:clamp(16px,3.2vh,36px)}
.hero-description{font-size:clamp(16px,2vh,19px);line-height:1.6;margin-bottom:clamp(24px,4.2vh,44px)}
.hero .actions{margin-bottom:0}
.works-with{margin:clamp(36px,7vh,76px) auto 0}
.works-with .kicker{margin-bottom:clamp(14px,2.4vh,22px)}
.works-with svg{width:clamp(30px,4vh,40px);height:clamp(30px,4vh,40px)}
.promise-strip{min-height:60px;padding-block:18px;font-size:13px}
@media(max-width:560px){.works-with ul{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;column-gap:40px;row-gap:22px}}

/* Problem cards: coloured and slightly tilted */
.problem-card{border-color:transparent;color:#18102b}
.problem-card:nth-of-type(1){background:#834dfb;rotate:-2deg}
.problem-card:nth-of-type(2){background:#f0e100;rotate:1.5deg}
.problem-card:nth-of-type(3){background:#18102b;rotate:-1deg}
.problem-card h3,.problem-card p,.problem-card .card-label,.problem-card .stamp{color:#18102b}
.problem-card p{opacity:.82}
.problem-card .card-label{opacity:.75}
.problem-card .doodle{filter:brightness(0);opacity:.8}

/* 03: workflow categories */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;text-align:left}
.cat{background:var(--surface-card);border:1px solid var(--border-default);border-radius:8px;padding:22px 20px;display:grid;align-content:start;gap:16px}
.cat header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--border-default)}
.cat h3{margin:0;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cat-count{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);white-space:nowrap}
.cat ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cat li{position:relative;padding-left:18px;font-size:15px;line-height:1.4;color:var(--text-main)}
.cat li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border:1px solid var(--text-faint);border-radius:2px}
@media(max-width:1000px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}

/* 05: the point of all this */
.point{background:var(--surface-card);padding:clamp(56px,9vw,112px) 0}
.point .kicker{display:block;border:0;border-radius:0;padding:0;background:none;color:var(--text-faint);margin-bottom:clamp(20px,3vw,32px);text-align:left}
.point h2{margin:0;max-width:16.5em;font-size:clamp(40px,7.2vw,100px);line-height:1.02;letter-spacing:-.055em;font-weight:700;color:var(--text-main);text-wrap:balance;text-align:left}
.point h2 .dim{color:var(--text-faint)}
.point-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);margin-top:clamp(44px,7vw,84px)}
.point-label{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.point-col.more .point-label{color:var(--accent)}
.point-col ul{list-style:none;margin:0;padding:0}
.point-col li{padding:6px 0;border-bottom:1px solid var(--border-default);font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.25;color:var(--text-main)}
.point-col.less li{color:var(--text-faint)}
@media(max-width:700px){.point-cols{grid-template-columns:1fr;gap:36px}}