: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:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:.92rem}
.pair-cs dt{color:var(--teal);font-weight:600;font-size:.76rem;letter-spacing:.07em;
  text-transform:uppercase}
.pair-cs dd{margin:3px 0 11px;color:var(--mut);line-height:1.55}
.pair-cs dd:last-child{margin-bottom:0}
/* The four step cards hold descriptions of different lengths, so their rules and
   labels sat at different heights. Subgrid makes each card share the grid's rows,
   so number, icon, heading, description and the customer/studio block line up
   across all four. Where subgrid is unsupported the cards simply flow as before. */
@supports (grid-template-rows: subgrid) {
  .steps4{grid-template-rows:auto auto auto auto auto}
  .steps4 .step{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:0}
  .steps4 .step .num{align-self:start}
  .steps4 .step .pair-cs{align-self:start}
/* The section footnote sits under a four-column grid, so the global 58ch
   measure left it as three short lines adrift in the width. Two lines read
   as a caption of the grid above it rather than an orphan. */
.steps4 + .note{max-width:92ch}
@media(max-width:560px){.steps4 + .note{max-width:58ch}}

/* Four section leads are each one sentence introducing the block beneath them.
   The global 58ch measure broke them over two lines in a column wide enough to
   hold one, which read as a wrapped fragment rather than a caption. Above
   1100px they take the column; below it they fall back to the readable
   measure, because a 1000px line of 16px text is not comfortable to read. */
@media(min-width:1100px){
  #workspace > h2 + p,
  #devices > h2 + p,
  #product > h2 + p{max-width:100%}
  .steps4 + .note{max-width:100%}
}
}

/* --- 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}

/* --- the devices figure --------------------------------------------------
   One composed still rather than a device toggle. A switcher reflows the page
   under the reader every time it is pressed, which is the jank worth avoiding;
   a single picture says the same thing and cannot misbehave. */
.devices{margin:22px 0 0}
.devices img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.devices figcaption{margin-top:9px;font-size:13px;color:var(--mut)}

/* --- back to top ---
   The homepage is long enough that reaching the footer leaves no way back
   except scrolling all the way up, and the header is not sticky. This appears
   once the reader is well past the first screen and gets out of the way again
   near the top. It sits clear of the footer text and is a real button, so it
   is reachable by keyboard and announced properly. */
.totop{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;
  align-items:center;gap:7px;min-height:44px;padding:0 14px;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;
  color:#0f1b1c;background:var(--teal);border:1px solid var(--teal);border-radius:999px;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.38);
  opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.totop.show{opacity:1;transform:none}
.totop:hover{filter:brightness(1.07)}
.totop:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:560px){.totop{right:12px;bottom:12px;padding:0 12px}
  .totop span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}