:root{--bg:#101b1c;--ink:#f6f1e8;--mut:#b5c7c6;--teal:#80c5c5;--cream:#efe8d8;--deep:#233b33;--line:#37494b;--amber:#ecae76;--sage:#a6c7ad}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}
main,header,footer{max-width:1190px;margin:auto;padding:0 5%}
a{color:inherit}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:22px;border-bottom:1px solid #486061}
nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:.86rem}
nav a:hover{text-decoration:underline}
.logo,h1,h2,h3,.price{font-family:Georgia,serif;font-weight:400}
.logo{font-size:32px}
.logo b{background:#6ab8ba;color:#102225;padding:3px 10px;border-radius:6px}
section{padding:66px 0;border-bottom:1px solid var(--line)}
.tag{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#97c9c9}
h1{font-size:clamp(46px,5.5vw,85px);line-height:1.02;margin:18px 0;letter-spacing:-.05em}
h2{font-size:clamp(32px,4vw,52px);line-height:1.12;margin:12px 0 20px}
h3{font-size:25px;margin:0}
p{max-width:58ch}
em{color:#a7d4c3;font-weight:400}
.btn{display:inline-block;text-decoration:none;background:var(--teal);color:#102225;padding:12px 19px;border-radius:8px;font-weight:650;font:inherit;font-weight:650;border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #678374}
.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
button{font:inherit}
button:disabled{cursor:default;opacity:.7}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.pair{display:grid;grid-template-columns:1.15fr 1fr;gap:7%;align-items:center}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#192729;padding:22px;border-radius:10px}
.card p{margin:8px 0;color:#cfdbd8}
.note{font-size:13px;color:var(--mut)}

/* hero */
.hero{display:grid;grid-template-columns:.88fr 1.12fr;gap:4%;align-items:center;padding:42px 0 56px}
.rush{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-size:.88rem;color:#f0d4b8}
.rush i{width:8px;height:8px;border-radius:50%;background:var(--amber);display:inline-block}
.atelier{margin:0;position:relative;perspective:900px}
.atelier img{display:block;width:100%;aspect-ratio:1.04;object-fit:cover;border-radius:48% 48% 3px 3px;transition:transform .25s ease-out;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.atelier figcaption{position:relative;margin:-38px 6% 0;background:#f5ecdc;color:#24372f;padding:13px 18px;box-shadow:0 6px 18px #0003;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.atelier figcaption span{font-size:10px;letter-spacing:.13em}
.atelier figcaption strong{grid-column:1}
.atelier figcaption a{grid-column:2;grid-row:1/3;font-size:.8rem}

/* audience + lens */
.who{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.who button,.tabs button{background:transparent;border:1px solid #678374;border-radius:20px;padding:8px 15px;color:inherit;cursor:pointer}
.who button[aria-pressed=true]{background:var(--teal);color:#102225;border-color:var(--teal);font-weight:650}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{color:#233b33;border-color:#8aa596}
.tabs button[aria-pressed=true]{background:#264a40;color:#fff}
.lens{background:#eee7d8;color:#233b33;border-radius:14px;padding:clamp(20px,4vw,50px)}
.lens .ask{font-family:Georgia,serif;font-size:clamp(20px,2.4vw,28px);margin:0 0 16px}
#lensbody{display:grid;grid-template-columns:1fr 1fr;gap:5%;align-items:center;padding-top:24px;min-height:200px}
#lensbody h3{font-size:clamp(26px,3.4vw,42px)}
#lensbody small{letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:#4e6760}

/* faux product screens (illustrative) */
.scr{background:#fbf7ee;color:#26332e;border:1px solid #d6cdb8;border-radius:10px;padding:12px;font-size:12.5px;line-height:1.4;box-shadow:0 8px 22px #0002}
.scr .bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3dac6;padding-bottom:8px;margin-bottom:8px}
.scr .bar b{font-family:Georgia,serif;font-size:15px;font-weight:400}
.scr .bar span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b7d73}
.scr .row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed #d9d0bb}
.scr .row:first-of-type{border-top:0}
.scr small{display:block;color:#5c6f66;font-size:11.5px;text-transform:none;letter-spacing:0}
.chip{background:#e8efe6;color:#27533f;border-radius:20px;padding:2px 9px;font-size:11px;white-space:nowrap}
.chip.warn{background:#f6e6d2;color:#7a4a15}
.lane{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.lane div{background:#f1ebdb;border-radius:6px;padding:6px;font-size:11px;min-height:52px}
.lane div.on{background:#264a40;color:#fff}
.src{font-size:10px;color:#6b7d73;margin-top:8px;text-align:right}

/* film ticket */
.ticket{background:var(--cream);color:#26332e;padding:32px;border-radius:6px;box-shadow:8px 8px #304749;transform:rotate(-1.2deg);border-top:6px solid var(--sage)}
.ticket .tag{color:#4e6760}
.ticket h3{margin:6px 0}
.ticket .scr{margin:14px 0}

/* peek: cursor-following film preview */
#peek{position:fixed;left:0;top:0;width:min(340px,86vw);z-index:60;background:#f5ecdc;color:#24372f;border-radius:12px;box-shadow:0 18px 50px #000a;opacity:0;pointer-events:none;transform:translate3d(-999px,0,0);transition:opacity .18s;overflow:hidden}
#peek.on{opacity:1}
#peek.docked{left:auto;top:auto;right:16px;bottom:16px;transform:none!important;pointer-events:auto}
#peek .hd{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:#264a40;color:#fff}
#peek .hd button{background:none;border:0;color:#fff;font-size:18px;line-height:1;cursor:pointer;display:none}
#peek.docked .hd button{display:block}
#peek .stage{padding:12px 12px 4px;min-height:196px}
#peek .stage video{width:100%;border-radius:8px;display:block}
#peek .cap{margin:0 0 8px}
#peek .cap strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:18px}
#peek .cap span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#4e6760}
#peek .dots{display:flex;gap:6px;padding:8px 12px 4px}
#peek .dots button{flex:1;height:5px;border:0;border-radius:3px;background:#cfc6b0;padding:0;cursor:pointer;position:relative;overflow:hidden}
#peek .dots button.cur{background:#264a40}
#peek .foot{padding:2px 12px 10px;font-size:10.5px;color:#5c6f66}

/* AI */
.ai{background:#382330;padding:66px 5%;border-radius:14px;border-bottom:0;margin-block:0}
.aiwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:6%;align-items:start;margin-top:26px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid #6b4a60;border-radius:10px;opacity:.6;transition:.2s}
.steps li b{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid #c79ab4;display:grid;place-items:center;font-size:13px}
.steps li strong{display:block}
.steps li span{font-size:.88rem;color:#e0c8d6}
.steps li.now{opacity:1;background:#4a2d3f;border-color:#e6b6cf}
.steps li.done{opacity:1}
.steps li.done b{background:#a7d4c3;color:#10281f;border-color:#a7d4c3}
.rcpt{background:var(--cream);color:#26332e;border-radius:12px;padding:20px;display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}
.paper{background:#fff;border:1px solid #d6cdb8;padding:12px;font:12px/1.5 ui-monospace,Menlo,monospace;color:#444;transform:rotate(-1deg);align-self:start}
.paper hr{border:0;border-top:1px dashed #aaa;margin:6px 0}
.paper .t{display:flex;justify-content:space-between}
.fld{margin-bottom:10px}
.fld label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#4e6760;display:flex;justify-content:space-between;align-items:center}
.fld input[type=text]{font:inherit;padding:8px;width:100%;border-radius:5px;border:1px solid #a9b8ae;background:#fbf7ee;color:#26332e;margin-top:3px}
.fld .ck{display:inline-flex;gap:5px;align-items:center;text-transform:none;letter-spacing:0;font-size:12px;cursor:pointer}
.fld.ai-s input{border-color:#c4678f;background:#fdf2f7}
.rcpt .out{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.guard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.guard div{border-top:1px solid #8a5f78;padding-top:10px;font-size:.92rem;color:#ecd8e4}
.guard strong{display:block;color:#fff}

.price{font-size:62px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:14px 0}
details p{margin:0 0 14px;color:#cfdbd8}
label{display:block}
input{font:inherit;padding:11px;width:100%;margin:4px 0 12px;border-radius:5px;border:1px solid #768f90}
footer{padding-block:30px;color:#b0c4bf}

/* reveal (only when JS is on) */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.js .rv.in{opacity:1;transform:none}

@media(max-width:820px){
 .hero,.pair,.grid,.aiwrap,#lensbody,.rcpt,.guard{grid-template-columns:1fr;gap:22px}
 section{padding:36px 0}
 nav{gap:12px}
 .atelier img{aspect-ratio:1.65;border-radius:90px 90px 4px 4px}
 .atelier figcaption{margin-top:-18px}
 .ticket{padding:22px}
 .ai{padding:36px 5%}
 .guard{gap:8px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .rv{opacity:1;transform:none;transition:none}
 .atelier img{transition:none;transform:none}
 #peek{transition:none}
}

[hidden]{display:none!important}
.icon{width:46px;height:46px;border-radius:12px;background:#223a3c;color:#97d3d3;display:grid;place-items:center;margin-bottom:14px}
.acard{display:block;text-decoration:none;background:#192729;padding:22px;border-radius:12px;border:1px solid transparent;transition:border-color .2s,transform .2s}
.acard:hover{border-color:#486061;transform:translateY(-2px)}
.acard h3{font-size:24px}
.acard .why{color:#e8f0eb;margin:8px 0 4px}
.acard .what{color:#b5c7c6;font-size:.92rem;margin:0}
.acard .more{display:inline-block;margin-top:14px;font-size:.85rem;color:var(--teal)}
.pair2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.prod{background:#192729;border-radius:12px;padding:28px;display:flex;flex-direction:column}
.prod h3{font-size:30px;margin:6px 0 10px}
.prod p{color:#cfdbd8}
.prod .btn{margin-top:auto}
.inboxnote{display:grid;grid-template-columns:1fr 1fr;gap:6%;margin-top:34px;padding-top:26px;border-top:1px solid #6b4a60}
.inboxnote h3{font-size:28px;margin:8px 0}
.inboxnote p{color:#ecd8e4}
.road ul{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.road li{border:1px solid #6b4a60;border-radius:10px;padding:10px 14px}
.road li strong{display:block;color:#fff}
.road li span{font-size:.9rem;color:#e0c8d6}
.road .note{color:#e0c8d6}
/* detail pages */
#sub{padding-bottom:20px}
.crumb{font-size:.85rem;color:var(--mut);margin-bottom:18px}
.crumb a{color:var(--teal)}
.pgh{display:flex;align-items:center;gap:14px}
.pgh .icon{margin:0}
.pg h1{font-size:clamp(38px,4.6vw,66px);margin:14px 0}
.pg .lead{font-size:1.2rem;color:#e8f0eb;max-width:46ch}
.pgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:7%;margin-top:34px;align-items:start}
.pg h2{font-size:26px;margin:26px 0 8px}
.pg h2:first-child{margin-top:0}
.pg ul{padding-left:20px;margin:0}
.pg li{margin:7px 0;color:#d6e2de}
.know{border-left:3px solid var(--amber);padding:2px 0 2px 14px;color:#f0d9bf}
.shot figcaption{font-size:12px;color:var(--mut);margin-top:10px}
.next{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:46px;padding-top:24px;border-top:1px solid var(--line)}
.next a{text-decoration:none}
.next .nl{color:var(--teal)}
.steps5{counter-reset:s;list-style:none;padding:0!important;display:grid;gap:12px;margin-top:6px!important}
.steps5 li{counter-increment:s;background:#192729;border-radius:12px;padding:16px 18px 16px 60px;position:relative;margin:0!important}
.steps5 li::before{content:counter(s);position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:50%;background:#223a3c;color:#97d3d3;display:grid;place-items:center;font-size:13px}
.steps5 strong{display:block;color:#fff}
.chipr{display:inline-block;background:#f6e6d2;color:#7a4a15;border-radius:20px;padding:2px 10px;font-size:11px;margin-left:8px;vertical-align:middle;letter-spacing:0}
@media(max-width:820px){.pair2,.inboxnote,.pgrid{grid-template-columns:1fr;gap:22px}.pg h2{margin-top:20px}}
.moment{margin-top:18px;padding:22px;background:#efe5d2;color:#273b34;border-left:4px solid #9b5866}.moment strong{display:block;font:30px Georgia,serif;margin:8px 0}.moment p{margin:0}.trail{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.trail b{padding:12px 16px;border:1px solid #67837b;border-radius:8px}.bridge{max-width:100%}
.why3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 6px}
.why3 div{border-top:1px solid var(--line);padding-top:12px;color:#cfdbd8;font-size:.95rem}
.why3 strong{display:block;color:#fff;margin-bottom:4px}
#offer .trail{margin:18px 0 22px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.mgrid article{background:#192729;border-radius:12px;padding:20px}
.mgrid h3{font-size:22px;margin:4px 0 8px}
.mgrid p{color:#cfdbd8;font-size:.95rem;margin:0}
.proof{margin-top:6px}
.next3{list-style:none;counter-reset:n;padding:0;margin:16px 0;display:grid;gap:10px}
.next3 li{counter-increment:n;position:relative;padding-left:40px;color:#cfdbd8}
.next3 li::before{content:counter(n);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:#223a3c;color:#97d3d3;display:grid;place-items:center;font-size:13px}
.next3 strong{display:block;color:#fff}
#money,#offer{padding-top:18px}
@media(max-width:980px){.mgrid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.why3,.mgrid{grid-template-columns:1fr}}

#story{border-top:1px solid var(--line);padding-top:30px}
.story{max-width:62ch;margin-top:14px}
.story p{color:#dce7e3;font-size:1.06rem;line-height:1.62}
.story .pull{font-family:var(--serif,Georgia,serif);font-size:1.5rem;line-height:1.4;color:#fff;border-left:3px solid var(--teal);padding-left:18px;margin:20px 0}
#story .tag .chipr{margin-left:10px}

.why3.roles{margin-top:26px}
.teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:6%;align-items:center;border-top:1px solid var(--line);padding-top:30px}
.teaser p{color:#cfdbd8;max-width:48ch}
.svgfig{margin:0}
.svgfig svg{width:100%;height:auto;display:block}
.svgfig.wide{margin:22px 0 10px}
.svgfig figcaption{font-size:12px;color:var(--mut);margin-top:10px;max-width:60ch}
.journey{max-width:760px}
.stats{display:grid;gap:12px;margin-bottom:22px}
.stats div{background:#192729;border-radius:12px;padding:18px 20px}
.stats b{display:block;font-size:30px;color:#fff;font-weight:500}
.stats span{font-size:.9rem;color:#b5c7c6}
.qlinks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.qlinks a{display:block;background:#192729;border-radius:10px;padding:14px 16px;color:#e8f0eb;text-decoration:none;border:1px solid transparent}
.qlinks a:hover{border-color:#486061}
.faqpage{margin-top:22px;max-width:70ch}
.pg h1:focus{outline:none}
.pg .story p{color:#dce7e3;font-size:1.04rem;line-height:1.62}
.roadwrap{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.roadwrap .inboxnote{border-top:0;margin-top:0;padding-top:0}
@media(max-width:820px){.teaser,.qlinks{grid-template-columns:1fr}.teaser .svgfig{max-width:260px}}

.player{margin:22px 0 14px;max-width:960px}
.player video,.pframe{width:100%;aspect-ratio:16/9;border-radius:14px;background:#0b1515;display:block}
.pframe{position:relative;overflow:hidden}
.pframe img{width:100%;height:100%;object-fit:cover;display:block}
.pover{position:absolute;inset:auto 0 0 0;padding:22px;display:flex;gap:12px;flex-wrap:wrap;background:linear-gradient(transparent,rgba(8,16,16,.85))}
.tx{max-width:70ch;margin:8px 0 14px}
.tx p{color:#cfdbd8;font-size:.95rem}
@media(max-width:560px){.pover{padding:12px}.pover .btn{padding:10px 14px;font-size:.9rem}}

/* --- holiday guided-setup banner --- */
.holiday-bar{background:var(--deep);border-bottom:1px solid var(--line);color:var(--ink);text-align:center;padding:10px 16px;font-size:.95rem}
.holiday-bar p{margin:0;max-width:1100px;margin-inline:auto}
.holiday-bar a{color:var(--teal);font-weight:650;text-underline-offset:3px}
.holiday-bar a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media(max-width:560px){.holiday-bar{font-size:.9rem;padding:9px 12px}}
/* --- ported from inline style attributes (CSP: style-src 'self') --- */
.btn-onlight{color:#26332e;border-color:#8aa596}
.muted-onlight{color:#4e6760}
.fig-flush{margin:0}
.mt-10{margin-top:10px}
/* the live access form's states */
.accessdone{margin-top:10px}
.offscreen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- guided-access form ---------------------------------------------------
   The frozen v9 design never contained this form: it shipped a dead preview
   card with different markup, so the extracted stylesheet has no rule for
   .enq, .field, .err or .form-error. Three consequences on the live page, and
   none of them was a spacing problem:
     - select and textarea inherited nothing while input picked up a stray
       light-theme rule, so the controls did not match each other;
     - .err had no hidden state, so every validation message was visible from
       first paint even though the script only marks a field on submit;
     - .accessdone was revealed by adding .show to an element that keeps its
       hidden attribute, and with no rule to outrank [hidden] the thank-you
       never appeared at all - a submission looked like it had vanished.
   What follows styles the form the page actually ships. */

/* A short intro column centred against a tall form is what left the gap down
   the left-hand side. Top-align this pair; the rest of the page keeps centring. */
#access.pair{align-items:start;gap:clamp(28px,5%,64px)}

.enq{display:grid;gap:20px}
.field{display:grid;gap:7px}
.field label{font-weight:600;color:var(--ink);font-size:.95rem;line-height:1.35}
.field label .opt{font-weight:400;color:var(--mut)}

/* One rule for all three controls, so they cannot drift apart again. */
.enq input,.enq select,.enq textarea{
  font:inherit;width:100%;margin:0;padding:12px 13px;min-height:48px;
  border:1px solid #4d6668;border-radius:8px;
  background:#101d1f;color:var(--ink);
  -webkit-appearance:none;appearance:none}
.enq textarea{min-height:104px;resize:vertical;line-height:1.5}
.enq select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23b5c7c6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.enq input::placeholder,.enq textarea::placeholder{color:#7f9694}
.enq input:hover,.enq select:hover,.enq textarea:hover{border-color:#6b8688}
.enq input:focus-visible,.enq select:focus-visible,.enq textarea:focus-visible,
.enq button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-color:var(--teal)}

/* Errors belong to their field and appear only once that field has been marked,
   which the script does on submit and never before. */
.err{display:none;font-size:.86rem;color:var(--amber);line-height:1.4}
.field.bad .err{display:block}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--amber)}

/* A submission-level failure, kept visually distinct from helper text. */
.form-error{margin:0;padding:11px 13px;border-radius:8px;
  border:1px solid var(--amber);background:rgba(236,174,118,.12);
  color:var(--ink);font-size:.92rem;line-height:1.45}
.form-error[hidden]{display:none}

/* The thank-you has to outrank the hidden attribute it is shipped with. */
.accessdone{margin:0}
.accessdone.show{display:block;padding:11px 13px;border-radius:8px;
  border:1px solid var(--sage);background:rgba(166,199,173,.12);color:var(--ink)}
.accessdone:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.enq .btn{justify-self:stretch;width:100%;min-height:48px;text-align:center}
.enq .note{margin:0}

/* The intro column's supporting points. */
.access-points{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.access-points li{position:relative;padding-left:22px;color:#cfdbd8;line-height:1.5}
.access-points li::before{content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--teal)}

@media(max-width:860px){
  #access.pair{gap:24px}
  .enq{gap:18px}
}
/* Comfortable targets stay comfortable when text is enlarged. */
@media(max-width:560px){
  .enq input,.enq select{padding:13px;min-height:50px}
  .enq textarea{padding:13px;min-height:96px}
}

/* --- brand lockup --------------------------------------------------------
   The header drew its own rounded-square T. The real mark is a ticket shape
   with a notch on each side, and it ships with the app, so the site uses that
   file rather than an approximation of it. */
.brandmark{display:flex;align-items:center;gap:12px;text-decoration:none}
.brandmark img{height:34px;width:auto;display:block}
.brandmark .by{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.74rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  border-left:1px solid var(--line);padding-left:12px;white-space:nowrap}
@media(max-width:760px){
  .brandmark .by{display:none}       /* the mobile header stays compact */
  .brandmark img{height:30px}
}

/* --- how it works: four numbered steps --- */
.steps4{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(4,1fr)}
.steps4 .step{background:#192729;border:1px solid var(--line);border-radius:10px;padding:20px}
.steps4 .num{display:inline-block;font-family:Georgia,serif;font-size:1.5rem;color:var(--teal);
  line-height:1}
.steps4 .ico{display:block;color:var(--teal);margin:10px 0 12px}
.steps4 h3{margin:0 0 7px;font-size:1.05rem}
.steps4 p{margin:0;color:#cfdbd8;line-height:1.55}
@media(max-width:980px){.steps4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps4{grid-template-columns:1fr}}
.together{margin:26px 0 6px}
.audience{color:var(--teal);font-weight:600;margin:0 0 10px}

/* --- hero composition ----------------------------------------------------
   The slogan is two sentences and should read as two deliberate lines, not a
   stack of isolated words. At 85px in a .88fr column the second sentence broke
   across three lines. The text column takes a little more of the grid and the
   headline is capped, so "And the customer behind it." sits on one line at
   desktop and on two balanced lines when the viewport cannot hold it. */
.hero{grid-template-columns:1.02fr .98fr;gap:5%}
.hero h1{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.035em;text-wrap:balance}
.hero > div > p{max-width:46ch}            /* a readable measure, not the full column */
@media(max-width:980px){
  .hero h1{font-size:clamp(38px,6.4vw,54px)}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(34px,8.6vw,44px)}
}

/* --- the screens explorer -------------------------------------------------
   One row of tabs, one panel. Activation is deliberate: a click or Enter/Space,
   or an arrow key that moves focus and selects. Nothing switches on hover and
   nothing rotates on a timer. */
#workspace .tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 18px;
  border-bottom:1px solid var(--line);padding-bottom:14px}
#workspace .tabs button{font:inherit;font-weight:600;cursor:pointer;
  background:transparent;color:var(--mut);border:1px solid var(--line);
  border-radius:999px;padding:10px 18px;min-height:44px}
#workspace .tabs button:hover{color:var(--ink);border-color:#6b8688}
#workspace .tabs button[aria-selected="true"]{background:var(--teal);color:#102225;
  border-color:var(--teal)}
#workspace .tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.xpanel{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:start}
.xpanel[hidden]{display:none}
.xpanel figure{margin:0}
.xpanel img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px}
.xpanel figcaption{margin-top:9px;font-size:13px;color:var(--mut)}
.xsay h3{margin:0 0 10px;font-size:1.35rem}
.xsay p{margin:0 0 12px;color:#cfdbd8;line-height:1.6}
.xsay .keeps{color:var(--mut);font-size:.94rem}
.xsay .keeps strong{color:var(--ink)}
@media(max-width:860px){
  .xpanel{grid-template-columns:1fr;gap:18px}
  #workspace .tabs button{padding:10px 14px;font-size:.94rem}
}

/* --- the four steps: what the customer sees beside what the studio does --- */
.pair-cs{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.92rem}
.pair-cs dt{color:var(--teal);font-weight:600;white-space:nowrap}
.pair-cs dd{margin:0;color:var(--mut);line-height:1.5}
@media(max-width:560px){
  .pair-cs{grid-template-columns:1fr;gap:2px}
  .pair-cs dd{margin-bottom:8px}
}
/* --- switching reassurance --- */
.switching{margin-top:26px;padding:20px;border:1px solid var(--line);border-radius:10px;
  background:#162325}
.switching h3{margin:0 0 8px;font-size:1.08rem}
.switching p{margin:0 0 10px;color:#cfdbd8;line-height:1.55}
.switching ol{margin:0 0 10px;padding-left:20px;color:#cfdbd8;line-height:1.7}
.switching .note{margin:0}