/* Homepage: the client's life as one plant, and the product drawn as pinned plates.
   Shared tokens, type and drawing classes come from marketing.css. Every name below is sample data. */
.wrap{max-width:var(--pub-page);margin:0 auto;padding:0 var(--pub-gutter)}
.band{padding-block:clamp(96px,11vw,120px)}
.band-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.band-head h2,.band h2{font-size:var(--pub-text-band);line-height:1.02}
.band-head p{font-size:var(--text-xl);line-height:1.5;color:var(--pub-ink-soft);max-width:40ch}
.fig{font:italic 400 var(--pub-text-17)/1.35 var(--pub-italic);color:var(--pub-ink-soft)}

/* Hero: the headline beside the client drawn as a labelled specimen */
.hero{position:relative;max-width:var(--pub-page);margin:0 auto;padding:clamp(32px,5vw,72px) var(--pub-gutter) 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px 40px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:32px}
.hero h1{font-size:var(--pub-text-hero);line-height:.93;letter-spacing:-.024em}
.hero .intro{font-size:var(--pub-text-intro);line-height:1.52;color:var(--pub-ink-2);max-width:44ch}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-specimen{width:100%;max-width:520px;height:auto;justify-self:end;overflow:visible}
.plate-tag{font:italic 400 var(--pub-text-22) var(--pub-italic);fill:var(--pub-ink)}
.leader{stroke-width:.9;opacity:.8}
.works{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--pub-text-17);color:var(--pub-ink-soft)}
.works>span:first-child{font:italic 400 var(--pub-text-19)/1 var(--pub-italic);margin-right:8px}
.works-item{display:inline-flex;align-items:center;height:42px;padding:0 20px;font-size:var(--pub-text-17);border-radius:var(--radius-pill);background:var(--pub-paper);box-shadow:inset 0 0 0 1px var(--pub-line-warm);font-weight:600;color:var(--pub-ink)}
.works-note{flex-basis:100%;margin-top:4px;font-weight:600;color:var(--pub-ink)}
.works-note::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--pub-amber);vertical-align:1px}

/* The hero plate: a herbarium sheet with the product pinned to it */
.shot{position:relative;max-width:calc(var(--pub-page) + 40px);margin:clamp(40px,4vw,56px) auto 0;padding:0 var(--pub-gutter)}
.sheet{position:relative;z-index:1;margin-inline:clamp(0px,3vw,40px);padding:clamp(16px,2.2vw,32px);border-radius:var(--radius-sm);background:var(--pub-paper);box-shadow:0 1px 0 var(--pub-white) inset,0 30px 60px -36px var(--pub-shade-45),0 0 0 1px var(--pub-line-warm)}
.tape{position:absolute;z-index:3;width:110px;height:30px;background:color-mix(in srgb,var(--pub-ochre) 78%,transparent);box-shadow:0 1px 2px var(--pub-shade-08);mix-blend-mode:multiply}
.tape.t1{top:-12px;left:18%;transform:rotate(-4deg)}
.tape.t2{top:-10px;right:14%;transform:rotate(5deg)}
.tape.t3{bottom:-12px;right:30%;transform:rotate(-3deg)}
.label{position:absolute;z-index:4;left:clamp(14px,2.2vw,30px);bottom:-46px;display:flex;gap:16px;align-items:baseline;padding:12px 16px;border-radius:var(--radius-sm);background:var(--pub-paper);box-shadow:0 0 0 1px var(--pub-line-warm),0 8px 20px -14px var(--pub-shade-50);font:italic 400 var(--pub-text-17)/1.3 var(--pub-italic);color:var(--pub-ink-2);transform:rotate(-1deg)}
.label b{white-space:nowrap;font:400 var(--pub-text-15)/1 var(--pub-serif);font-style:normal;color:var(--pub-ink)}
.shot-note{max-width:var(--pub-page);margin:72px auto 0;padding:0 var(--pub-gutter);font-size:var(--text-sm);color:var(--pub-ink-mute);text-align:right}

.av{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font:700 var(--text-2xs)/1 var(--pub-sans);color:var(--pub-ink);background:var(--pub-olive-light);box-shadow:0 0 0 2px var(--pub-ui)}
.av.ai{border-radius:var(--radius-md);background:var(--pub-ink);color:var(--pub-paper)}
.av.claude{background:var(--pub-claude);color:var(--pub-paper)}.av.chatgpt{background:var(--pub-chatgpt);color:var(--pub-paper)}.av.codex{background:var(--pub-codex);color:var(--pub-paper)}.av.cursor{background:var(--pub-cursor);color:var(--pub-paper)}.av.grok{background:var(--pub-grok);color:var(--pub-paper)}
.av.p-m{background:var(--pub-rust)}.av.p-j{background:var(--pub-ochre)}.av.p-p{background:var(--pub-lilac)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 12px;border-radius:var(--radius-pill);background:var(--pub-ui-chip);font-size:var(--text-xs);font-weight:600;color:var(--pub-ink-2);white-space:nowrap}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--c,var(--pub-olive))}
.chip.ok{background:var(--pub-ui-ok)}.chip.wait{background:var(--pub-amber-wash)}


/* One orchestrated moment: Launch emails goes ready → claimed → saved for review, the feed follows */
.motion .hero-plant .wash{animation:bloomIn 1.4s ease both}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes bloomIn{from{opacity:0}}
.motion [data-reveal]{transition:opacity .8s ease,transform .8s ease}
.motion [data-reveal]:not(.in){opacity:0;transform:translateY(18px)}

/* The growth plate: one client, five stages */
.journey .plate{position:relative;padding:clamp(32px,4vw,56px) clamp(16px,3vw,48px) clamp(32px,4vw,48px);border-radius:var(--radius-md);background:var(--pub-paper);box-shadow:0 0 0 1px var(--pub-line-warm),0 30px 60px -44px var(--pub-shade-50)}
.journey .plate::before{content:"";position:absolute;inset:12px;border:1px solid var(--pub-line-soft);border-radius:var(--radius-sm);pointer-events:none}
.stages{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;counter-reset:stage}
.stages::before{content:"";position:absolute;left:4%;right:4%;top:206px;border-top:1.5px dashed var(--pub-line-warm)}
.stage{counter-increment:stage;display:flex;flex-direction:column;gap:12px;position:relative}
.stage .stage-art{width:100%;max-width:176px;height:auto;margin:0 auto -8px}
.stage .fig::before{content:"Fig. " counter(stage) ".  "}
.stage h3{font-size:var(--pub-text-26);line-height:1.1}
.stage>p{font-size:var(--pub-text-15);line-height:1.5;color:var(--pub-ink-soft)}
.mini-ui{margin-top:auto;padding:12px;border-radius:var(--radius-lg);background:var(--pub-ui);box-shadow:0 0 0 1px var(--pub-ui-frame);font:400 var(--text-xs)/1.4 var(--pub-sans)}
.mini-ui .line{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--pub-ui-chip)}
.mini-ui .line:last-child{border-bottom:0}
.mini-ui .line b{font-weight:600}
.mini-ui .line span:last-child{margin-left:auto;color:var(--pub-ink-mute);white-space:nowrap}
.mini-ui .who{display:flex;gap:8px;align-items:flex-start;padding-top:8px;color:var(--pub-ink-soft)}
.loop{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:32px;font:italic 400 var(--pub-text-17)/1.3 var(--pub-italic);color:var(--pub-ink-soft)}

/* Customers and work, grown as one */
.halves{display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:24px;align-items:stretch}
.part-half{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:var(--pub-r-lg)}
.part-half:first-child{background:var(--pub-rust);color:var(--pub-paper)}
.part-half:last-child{background:var(--pub-olive);color:var(--pub-paper)}
.part-half h3{font-size:var(--text-3xl);color:var(--pub-paper)}
.part-half>p{color:var(--pub-paper);opacity:.9;max-width:40ch}
.part-half-rows{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.part-half-rows li{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--pub-paper);color:var(--pub-ink);font-size:var(--pub-text-15)}
.part-half-rows span{color:var(--pub-ink-soft);text-align:right}
.knot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.graft{width:100%;max-width:200px;height:auto}
.also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.also article{padding:24px;border-radius:var(--pub-r-lg);background:var(--pub-paper);box-shadow:var(--shadow-card)}
.also h3{font-size:var(--pub-text-26);margin-bottom:8px}
.also p{color:var(--pub-ink-soft);font-size:var(--pub-text-15)}
.also article:nth-child(2){background:var(--pub-ochre);box-shadow:none}
.who-for{list-style:none;margin:56px 0 0;padding:32px 0 0;border-top:1px solid var(--pub-line-warm);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.who-for li{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:end}
.who-for .stage-art{grid-row:1/3;width:64px;height:auto}
.who-for b{font:400 var(--text-xl)/1.2 var(--pub-serif)}
.who-for span{font-size:var(--text-md);color:var(--pub-ink-soft)}
/* The record trail on the hero plate: customer, deal, project, tasks */
.trail{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.trail li{position:relative;display:flex;flex-direction:column;padding:8px 12px;border-radius:var(--radius-md);background:var(--pub-ui-chip);font-size:var(--text-xs);line-height:1.3}
.trail li+li::before{content:"";position:absolute;left:-9px;top:50%;width:10px;border-top:1.5px solid var(--pub-ink-mute)}
.trail b{font-size:var(--text-sm)}
.trail span{color:var(--pub-ink-mute)}
.trail .now{background:var(--pub-amber-wash)}

/* How a task moves: the night plate */
.how{position:relative;margin:0 var(--pub-gutter);border-radius:var(--pub-r-lg);background:var(--pub-forest);color:var(--pub-paper);overflow:hidden}
.how::after{content:"";position:absolute;right:-30px;top:-20px;width:300px;height:420px;opacity:.22;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 220'%3E%3Cg fill='none' stroke='%23F2EBDD' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M80 220C76 170 88 130 80 60'/%3E%3Cpath d='M80 190c-30-6-44-24-40-40 18 2 34 18 40 40zM80 160c28-4 40-20 38-36-18 2-32 16-38 36zM80 120c-22-4-32-16-30-30 14 2 26 12 30 30z'/%3E%3Ccircle cx='80' cy='44' r='26'/%3E%3Cpath d='M80 18v52M54 44h52M62 26l36 36M98 26 62 62'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
.how .wrap{position:relative;z-index:1}
.how h2{color:var(--pub-paper);max-width:15ch}
.how .sub{margin-top:16px;max-width:46ch;font-size:var(--text-xl);color:color-mix(in srgb,var(--pub-paper) 78%,transparent)}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:s}
.steps li{counter-increment:s;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--pub-paper) 24%,transparent)}
.steps li::before{content:counter(s);display:block;margin-bottom:16px;font:400 var(--pub-text-46)/1 var(--pub-serif);color:var(--pub-amber-bright)}
.steps h3{color:var(--pub-paper);font-size:var(--text-2xl);line-height:1.15}
.steps p{margin-top:12px;font-size:var(--pub-text-15);color:color-mix(in srgb,var(--pub-paper) 76%,transparent)}

/* Assistants */
.agents{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.agent{grid-column:span 2;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--pub-r-lg);background:var(--pub-paper);box-shadow:var(--shadow-card)}
.agent:nth-child(4),.agent:nth-child(5){grid-column:span 3}
.agent-top{display:flex;align-items:center;gap:12px;font-weight:700}
.agent-top .av{width:34px;height:34px;font-size:var(--text-xs);box-shadow:none}
.agent-top span:last-child{margin-left:auto;font:italic 400 var(--pub-text-15)/1 var(--pub-italic);color:var(--pub-ink-mute);font-weight:400}
.agent blockquote{margin:0;font:400 var(--text-xl)/1.36 var(--pub-serif);color:var(--pub-ink)}
.agent .chips{margin-top:auto}
.agents-note{margin-top:24px;font-size:var(--pub-text-15);color:var(--pub-ink-soft)}

/* No Flori AI credits */
.credits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px);align-items:start;padding:clamp(32px,6vw,72px);border-radius:var(--pub-r-lg);background:var(--pub-ochre)}
.credits h2{font-size:var(--pub-text-faq);line-height:1.04}
.credits .lead-c{margin-top:16px;font-size:var(--text-xl);line-height:1.5;color:var(--pub-ink-2);max-width:34ch}
.bill{width:100%;border-collapse:collapse}
.bill th,.bill td{padding:16px 0;text-align:left;vertical-align:top;border-bottom:1px solid color-mix(in srgb,var(--pub-ink) 16%,transparent)}
.bill th{width:50%;padding-right:24px;font-weight:600}
.bill td{color:var(--pub-ink-2)}
.bill caption{caption-side:bottom;padding-top:16px;text-align:left;font:italic 400 var(--pub-text-15)/1.3 var(--pub-italic);color:var(--pub-ink-soft)}

/* FAQ and closing */
.faq h2{font-size:var(--pub-text-faq);margin-bottom:32px}
.faq-list{display:grid;gap:12px;max-width:880px}
.faq details{padding:0 24px;border-radius:var(--pub-r-md);background:var(--pub-paper);box-shadow:var(--shadow-card)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.6px solid var(--pub-ink);border-bottom:1.6px solid var(--pub-ink);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary h3{font:400 var(--text-xl)/1.3 var(--pub-serif)}
.faq details p{padding:0 0 24px;max-width:68ch;color:var(--pub-ink-soft)}
.closing{text-align:center;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,6vw,80px)}
.faq{padding-bottom:0}
.closing h2{max-width:16ch;margin:0 auto}
.closing .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}

@media(max-width:1100px){
 .stages{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
 .stages::before{display:none}
 .halves{grid-template-columns:1fr 140px 1fr}
 .who-for{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .agent,.agent:nth-child(4),.agent:nth-child(5){grid-column:span 3}
}
@media(max-width:860px){
 .hero{grid-template-columns:1fr}
 .hero-specimen{justify-self:center;max-width:360px;margin-top:8px}
 .band-head,.credits,.merge{grid-template-columns:1fr}
 .sheet{margin-left:0}
 .label{position:relative;left:0;bottom:0;margin-top:16px;transform:none;display:inline-flex}
 .shot-note{margin-top:24px;text-align:left}
 .halves,.also{grid-template-columns:1fr}
 .graft{max-width:120px}
 .stages{grid-template-columns:repeat(2,minmax(0,1fr))}
 .how{margin:0}
 .one li{grid-template-columns:1fr;gap:2px}
}
@media(max-width:560px){
 .stages{grid-template-columns:1fr;row-gap:40px}
 .stage{display:grid;grid-template-columns:110px 1fr;column-gap:16px;align-items:start}
 .stage .stage-art{grid-row:1/5;margin:0}
 .stage .mini-ui{grid-column:1/-1}
 .steps{grid-template-columns:1fr}
 .agents{grid-template-columns:1fr}
 .agent,.agent:nth-child(4),.agent:nth-child(5){grid-column:auto}
 .hero .cta-row .button{flex:1 1 auto}
 .who-for{grid-template-columns:1fr}
 .part-half{padding:24px}
}

/* Product shots (scripts/marketing-shots.mjs): the real app at 2x, framed on the herbarium sheet. */
.shot-img{display:block;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--pub-line-soft),0 18px 40px -28px var(--pub-shade-45);background:var(--pub-paper)}
.inside-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.inside-tabs[hidden]{display:none}
.inside-tabs button{height:40px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--pub-ink-soft);font:500 var(--pub-text-15)/1 var(--pub-sans);cursor:pointer;box-shadow:inset 0 0 0 1.3px var(--pub-line-warm)}
.inside-tabs button[aria-selected=true]{background:var(--pub-forest);color:var(--pub-paper);box-shadow:none}
.inside-tabs button:focus-visible{outline:2px solid var(--pub-forest);outline-offset:2px}
.inside-stage{display:grid;gap:48px}
.inside-shot,.inside-shot>figure{margin:0}
.inside-shot[hidden]{display:none}
.inside-shot .sheet{margin-inline:0;padding:clamp(10px,1.4vw,20px)}
.inside-shot figcaption{display:flex;gap:12px;align-items:baseline;margin-top:16px;font:italic 400 var(--pub-text-17)/1.3 var(--pub-italic);color:var(--pub-ink-soft)}
.inside-shot figcaption b{font:400 var(--pub-text-15)/1 var(--pub-serif);font-style:normal;color:var(--pub-ink);white-space:nowrap}