/* Hallmark · macrostructure: Split Studio (hero diptych + single-column trust body) · genre: editorial · tone: austere, accountable
 * theme: custom (vibe: "calm, accountable, plain-spoken studio") · paper oklch(97.6% 0.009 85) · accent oklch(42% 0.065 190) deep teal
 * type: Manrope variable, self-hosted (house SOP: one typeface for new sites) · nav: N1a (one destination) · footer: Ft1 legal line
 * enrichment: E5-style hand-built HTML example conversation, labelled as an illustration · motion: hero sequence + scroll reveal
 * pre-emit critique: P4 H4 E4 S4 R5 V4 · contrast: pass (40-41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49-57)
 */
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --color-paper:oklch(97.6% 0.009 85);
  --color-surface:oklch(99.3% 0.004 85);
  --color-ink:oklch(24% 0.02 250);
  --color-muted:oklch(44% 0.018 250);
  --color-line:oklch(88% 0.012 85);
  --color-accent:oklch(42% 0.065 190);
  --color-accent-hover:oklch(36% 0.06 190);
  --color-accent-ink:oklch(98% 0.006 85);
  --color-accent-soft:oklch(94% 0.022 190);
  --color-bubble:oklch(93.5% 0.01 85);
  --color-mark:oklch(84% 0.06 180);
  --color-focus:oklch(48% 0.12 250);
  --color-grad2:oklch(52% 0.11 160);
  --color-band:oklch(42% 0.075 190);--color-band-ink:oklch(98% 0.006 85);--color-band-muted:oklch(90% 0.025 190);
  --font-body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
  --radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-full:999px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-short:240ms;--dur-layout:500ms;--dur-reveal:700ms;
  --measure:40rem;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --color-paper:oklch(24% 0.035 235);--color-surface:oklch(29% 0.04 230);--color-bubble:oklch(38% 0.025 235);--color-line:oklch(37% 0.035 230);
  --color-ink:oklch(94% 0.008 85);--color-muted:oklch(76% 0.012 85);
  --color-accent:oklch(80% 0.075 185);--color-accent-hover:oklch(86% 0.06 185);--color-accent-ink:#181818;
  --color-accent-soft:oklch(40% 0.085 185);--color-mark:oklch(36% 0.05 185);--color-focus:oklch(82% 0.1 250);
  --color-grad2:oklch(86% 0.13 150);
  --color-band:oklch(78% 0.085 185);--color-band-ink:oklch(20% 0.03 230);--color-band-muted:oklch(30% 0.04 220);
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-lg);line-height:1.6;font-weight:400}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance;overflow-wrap:anywhere;min-width:0}
p,li,dd{text-wrap:pretty}
p{margin:0 0 var(--space-4)}
a{color:var(--color-accent);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-short) var(--ease-out)}
a:hover{color:var(--color-accent-hover)}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}
.wrap{max-width:72rem;margin:0 auto;padding:0 var(--space-4)}
@media (min-width:40rem){.wrap{padding:0 var(--space-8)}}

.skip{position:absolute;left:var(--space-4);top:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-sm);transform:translateY(-200%);z-index:10}
.skip:focus{transform:none}

/* Header */
.site-head{padding:var(--space-4) 0;position:sticky;top:0;z-index:5;background:color-mix(in oklch,var(--color-paper) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in oklch,var(--color-line) 60%,transparent)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--color-ink);text-decoration:none;font-weight:800;font-size:var(--text-lg);letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand svg{width:32px;height:32px;flex:none}
.brand:hover{color:var(--color-ink)}
.head-link{font-size:var(--text-sm);font-weight:600;white-space:nowrap;line-height:1}

/* Hero: diptych */
.hero{padding:var(--space-8) 0 var(--space-16);display:grid;gap:var(--space-10);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:60rem){.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-16);padding:var(--space-16) 0 var(--space-24)}}
.hero h1{font-size:var(--text-3xl);max-width:16ch}
@media (min-width:30rem){.hero h1{font-size:var(--text-4xl)}}
@media (min-width:60rem){.hero h1{font-size:clamp(3rem,4.6vw,4.25rem)}}
.grad{background:linear-gradient(90deg,var(--color-accent),var(--color-grad2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:var(--text-lg);color:var(--color-muted);max-width:34rem;margin:var(--space-5) 0 var(--space-6)}
@media (min-width:60rem){.hero .lead{font-size:var(--text-xl)}}
.proof{display:flex;gap:var(--space-3);align-items:flex-start;margin:var(--space-6) 0 0;max-width:32rem;font-size:var(--text-sm);line-height:1.55;color:var(--color-muted)}
.proof svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--color-accent)}
.proof strong{color:var(--color-ink);font-weight:700}

.btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-accent-ink);font-weight:700;font-size:var(--text-base);line-height:1;text-decoration:none;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.btn:hover{background:var(--color-accent-hover);color:var(--color-accent-ink)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;transition:transform var(--dur-short) var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.cta-alt{font-size:var(--text-sm);color:var(--color-muted)}

/* Example conversation (illustration, not a real chat) */
.example{margin:0;position:relative;isolation:isolate;box-shadow:0 30px 80px -30px color-mix(in oklch,var(--color-accent) 45%,transparent);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-5)}
@media (min-width:40rem){.example{padding:var(--space-8)}}
.example figcaption{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-5);display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.example figcaption b{color:var(--color-ink);font-weight:700}
.chat{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);font-size:var(--text-base);line-height:1.5}
.msg{max-width:88%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)}
.msg .who{display:block;font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-1);color:var(--color-muted)}
.msg.q{justify-self:end;background:var(--color-bubble);border-bottom-right-radius:var(--radius-sm)}
.msg.a{position:relative;justify-self:start;background:var(--color-accent-soft);border-bottom-left-radius:var(--radius-sm)}
.msg.a .who{color:var(--color-accent)}
@media (prefers-color-scheme:dark){.msg.a,.msg.q{color:oklch(97% 0.005 85)}.msg.a .who{color:oklch(90% 0.08 175)}.msg.q .who{color:oklch(82% 0.01 230)}}
:root[data-theme=dark] .msg.a,:root[data-theme=dark] .msg.q{color:oklch(97% 0.005 85)}
.src{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--color-line);background:var(--color-surface);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:var(--color-ink);white-space:nowrap}
.src svg{width:14px;height:14px;color:var(--color-accent)}
.label{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-muted)}

/* Body sections */
.section{padding:var(--space-16) 0;border-top:1px solid var(--color-line)}
.section h2{font-size:var(--text-3xl);margin-bottom:var(--space-6);max-width:var(--measure)}
@media (min-width:60rem){.section h2{font-size:var(--text-4xl)}}
.section .intro{max-width:var(--measure);color:var(--color-muted)}
.split{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:60rem){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-16)}}

.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--space-8);max-width:var(--measure)}
.steps li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--color-accent);color:var(--color-accent);font-weight:800;font-size:var(--text-base)}
.steps h3{font-size:var(--text-xl);margin:var(--space-2) 0 var(--space-2);letter-spacing:-.01em}
.steps p{margin:0;color:var(--color-muted)}

.terms{margin:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--color-line);max-width:48rem}
.terms div{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1);padding:var(--space-5) 0;border-bottom:1px solid var(--color-line)}
@media (min-width:40rem){.terms div{grid-template-columns:11rem minmax(0,1fr);gap:var(--space-6)}}
.terms dt{font-weight:700}
.terms dd{margin:0;color:var(--color-muted)}

.faq{max-width:48rem}
.faq details{border-bottom:1px solid var(--color-line)}
.faq details:first-of-type{border-top:1px solid var(--color-line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;font-weight:700;font-size:var(--text-lg);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-accent)}
.faq summary svg{flex:none;width:20px;height:20px;color:var(--color-accent);transition:transform var(--dur-short) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .ans{padding:0 0 var(--space-5);color:var(--color-muted);max-width:var(--measure)}
.faq .ans p:last-child{margin-bottom:0}

.final{padding:var(--space-20) 0;border-top:1px solid var(--color-line)}
.final h2{font-size:var(--text-3xl);max-width:22ch;margin-bottom:var(--space-4)}
@media (min-width:60rem){.final h2{font-size:var(--text-4xl)}}
.final p{max-width:var(--measure);color:var(--color-muted)}

.company{display:grid;gap:var(--space-1);font-style:normal;max-width:var(--measure)}
.company p{margin:0}
.note{margin-top:var(--space-6);font-size:var(--text-base);color:var(--color-muted)}

.site-foot{border-top:1px solid var(--color-line);padding:var(--space-8) 0 var(--space-12);font-size:var(--text-sm);color:var(--color-muted)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);justify-content:space-between}
.site-foot p{margin:0}
.site-foot a{white-space:nowrap}

/* Simple pages (privacy, 404) */
.doc{padding:var(--space-8) 0 var(--space-16);max-width:var(--measure)}
.doc h1{font-size:var(--text-4xl);margin-bottom:var(--space-3)}
.doc h2{font-size:var(--text-xl);margin:var(--space-10) 0 var(--space-3)}
.doc .lead{color:var(--color-muted)}
.lost{padding:var(--space-16) 0 var(--space-24);max-width:var(--measure)}
.lost h1{font-size:var(--text-4xl);margin-bottom:var(--space-4)}
.lost p{color:var(--color-muted)}

/* Motion: one orchestrated moment (hero conversation) + quiet scroll reveals.
 * Without JS everything is visible; the hero sequence is pure CSS. */
@media (prefers-reduced-motion:no-preference){
  .seq{animation:rise var(--dur-reveal) var(--ease-out) both;animation-delay:var(--d,0ms)}
  .js .reveal{opacity:0;transform:translateY(32px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
  .js .reveal.in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation:none!important}
}

/* Redesign 2026-11-10 pm: colour, branding, scroll moments */
.example::before{content:"";position:absolute;inset:-12% -8% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:var(--color-accent);opacity:.18;filter:blur(70px);z-index:-1;pointer-events:none}
.dots{display:none}
@media (prefers-reduced-motion:no-preference){
  .msg.a .t{animation:fadein 400ms var(--ease-out) both;animation-delay:calc(var(--d) + 900ms)}
  .msg.a .dots{display:flex;gap:5px;position:absolute;left:var(--space-4);bottom:var(--space-3);animation:fadeout 200ms linear both;animation-delay:calc(var(--d) + 850ms)}
  .dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;animation:blink 900ms ease-in-out infinite}
  .dots i:nth-child(2){animation-delay:150ms}.dots i:nth-child(3){animation-delay:300ms}
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeout{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.9;transform:translateY(-3px)}}

.tagline{padding:var(--space-20) 0;border-top:1px solid var(--color-line)}
.tagline p{margin:0;max-width:20ch;font-size:clamp(2rem,5.5vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-.025em}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .tagline p{view-timeline:--tag block}
    .tagline span{opacity:.18;animation:lit linear both;animation-timeline:--tag;animation-range:cover calc(35% + var(--i) * 3.5%) cover calc(42% + var(--i) * 3.5%)}
    .steps::before{transform:scaleY(0);transform-origin:top;animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  }
}
@keyframes lit{to{opacity:1;color:var(--color-ink)}}
@keyframes draw{to{transform:scaleY(1)}}

.band{background:var(--color-band);color:var(--color-band-ink);padding:var(--space-20) 0}
.band h2{font-size:var(--text-3xl);margin-bottom:var(--space-6)}
@media (min-width:60rem){.band h2{font-size:var(--text-4xl)}}
.band .intro{color:var(--color-band-muted);max-width:var(--measure)}
.band .steps{position:relative}
.band .steps::before{content:"";position:absolute;left:1.25rem;top:1.25rem;bottom:1.25rem;width:2px;background:var(--color-band-ink);opacity:.35}
.band .steps li::before{background:var(--color-band-ink);color:var(--color-band);border:0;position:relative}
.band .steps p{color:var(--color-band-muted)}
.band + .section{border-top:0}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-8);max-width:48rem}
.tile{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-4)}
.tile b{display:block;font-size:clamp(1.6rem,6vw,2.25rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--color-accent);margin-bottom:var(--space-2)}
.tile span{font-size:var(--text-sm);color:var(--color-muted);line-height:1.4;display:block}

.final{border-top:0;padding:var(--space-12) 0 var(--space-20)}
.panel{background:var(--color-band);color:var(--color-band-ink);border-radius:24px;padding:var(--space-10) var(--space-6);position:relative;overflow:hidden;isolation:isolate}
@media (min-width:40rem){.panel{padding:var(--space-16)}}
.panel::after{content:"";position:absolute;right:-10%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:var(--color-grad2);opacity:.35;filter:blur(80px);z-index:-1}
.final .panel p{color:var(--color-band-muted)}
.panel .btn{background:var(--color-band-ink);color:var(--color-band)}
.panel .btn:hover{background:var(--color-band-ink);color:var(--color-band);opacity:.9}
.panel .cta-alt{color:var(--color-band-muted)}
.panel a:focus-visible{outline-color:var(--color-band-ink)}
/* Annie feedback 2026-11-11: audience line above the H1, followers-get list */
.eyebrow{font-size:var(--text-sm, .9rem);font-weight:600;color:var(--color-accent);margin:0 0 var(--space-3);max-width:34rem}
.gets{list-style:none;padding:0;margin:0 0 var(--space-5);display:grid;gap:var(--space-3)}
.gets li{position:relative;padding-left:1.6rem;max-width:var(--measure)}
.gets li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;border-radius:50%;background:var(--color-accent)}
.gets + p{color:var(--color-muted);max-width:var(--measure)}