/* ==== assets/fonts.css ==== */
/* Self-hosted fonts. Cormorant Garamond for the headline, Inter for UI, JetBrains Mono for labels.
   The six faces used on the first screen ship as WOFF2 (made with fontTools) with TTF fallback.
   The remaining faces also use lossless WOFF2, retaining their original WOFF and TTF fallbacks. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/demo/shared-static/459eb253057a3b829f61-latin.woff2) format('woff2'),url(/demo/shared-static/0b9a8a33cfaa624d30f7.ttf) format('truetype')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/demo/shared-static/0e15af435464d311b6ee-latin.woff2) format('woff2'),url(/demo/shared-static/4537ad74f14d6e9ab79d.woff) format('woff'),url(/demo/shared-static/14efb9443652199ade5b.ttf) format('truetype')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/demo/shared-static/d4a478b1420d2e62a0ef-latin.woff2) format('woff2'),url(/demo/shared-static/7284ef5a74b0dc4e97ee.woff) format('woff'),url(/demo/shared-static/6d37a86241a25d63f8fe.ttf) format('truetype')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/demo/shared-static/d97e72d6499262bb7655-latin.woff2) format('woff2'),url(/demo/shared-static/1724047c8988ca5155bf.ttf) format('truetype')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/demo/shared-static/c0610e47360b93018fdf-latin.woff2) format('woff2'),url(/demo/shared-static/59ea79c0b5b80ee3a0ba.woff) format('woff'),url(/demo/shared-static/69e7ae35cba23d962227.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/demo/shared-static/d565d84dc531eaa81732-latin.woff2) format('woff2'),url(/demo/shared-static/1b08e7fc267a5c7e1d61.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/demo/shared-static/18d1aeb683ebf32e0e5b-latin.woff2) format('woff2'),url(/demo/shared-static/8c883f63b2c4157d9973.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/demo/shared-static/1e591b6e84c93771cd5b-latin.woff2) format('woff2'),url(/demo/shared-static/663138b1636c5ef69e98.woff) format('woff'),url(/demo/shared-static/e7a1aaf7eda9f2fad413.ttf) format('truetype')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/demo/shared-static/75e8e5c159dc34320865-latin.woff2) format('woff2'),url(/demo/shared-static/44ce4a84f20d60f24539.ttf) format('truetype')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/demo/shared-static/e25c3eac6e88fcad4810-latin.woff2) format('woff2'),url(/demo/shared-static/3386a05f6ece969e4537.ttf) format('truetype')}
/* Space Grotesk (portal examples): the same variable-weight files Google Fonts served, now from this site. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(/demo/shared-static/054c266fbb441ee05936.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(/demo/shared-static/a0d054c4af557de20afd.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/demo/shared-static/054c266fbb441ee05936.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/demo/shared-static/a0d054c4af557de20afd.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/demo/shared-static/054c266fbb441ee05936.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/demo/shared-static/a0d054c4af557de20afd.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{font-family:'Inter';font-style:normal;font-weight:200;font-display:swap;src:url(/demo/shared-static/8af1daaebd197a3bd003-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/demo/shared-static/3b9f2184554849e906e3-latin.woff2) format('woff2')}

/* ==== styles.css ==== */
/* Venzor website concept, Version B · cut from the accepted portal's visual system.
   Tokens, chamfers, mono metadata, bronze structure, cyan current.
   One phone: it is measured into the hero slot and docked in the demonstration stage by app.js. */

:root{
  --bg:#0B0B0D;--bg-deep:#080A0B;--panel:#131316;--raised:#17171B;--line:#26262C;
  --text:#EDEDEF;--muted:#8B8B95;--dim:#5C5C66;--muted-warm:#A7A29C;--fine:#8F8A84;
  --accent:#78D2DE;--accent-deep:#3CB8CC;--win:#E4C065;--ok:#6FBF9E;--warn:#D9B36A;--bad:#CF6F6F;
  --bronze:#B9875B;--bronze-bright:#D8AF86;--ivory:#E9E2D9;--paper:#F4EEE7;
  --v-accent:#D8AF86;
  --serif:'Cormorant Garamond','Iowan Old Style',Palatino,'Palatino Linotype',Georgia,serif;
  --sans:Inter,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --grot:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',Menlo,'SF Mono',Consolas,monospace;
  --nav-h:72px;--wrap:1240px;--gutter:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.9,.2,1);
  /* Phone sizes. The dock is the phone's true layout box; the hero slot is slightly smaller so the phone enlarges as the demonstration begins.
     The dock never drops below 300px so the portal screens stay readable. */
  --pw-dock:clamp(300px,calc((100vh - var(--nav-h) - 100px) * 9 / 19.4),372px);
  --pw-hero:calc(var(--pw-dock) * .94);
  --stage-top:calc(var(--nav-h) + 24px);
  /* Minimum control size inside the phone: 40px with a pointer, 44px on touch screens. */
  --tap:40px;
}
html[data-vertical="med-spa"]{--v-accent:#D8AF86}
html[data-vertical="health"]{--v-accent:#78D2DE}
html[data-vertical="law"]{--v-accent:#E4C065}
html[data-vertical="professionals"]{--v-accent:#C9CDDA}
html[data-vertical="dental"]{--v-accent:#6FBF9E}
html[data-vertical="real-estate"]{--v-accent:#D9B36A}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--text);background:var(--bg);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
a{color:inherit}
::selection{background:var(--accent);color:#0B0B0D}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);color:#08181B;padding:8px 14px;font-weight:600}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Stable large-viewport height probe for the small-screen phone travel (toolbars collapsing must not move it). */
.vh-probe{position:fixed;top:0;left:0;width:0;height:100vh;height:100lvh;visibility:hidden;pointer-events:none}

/* Symbol colours: the mark inherits --mark, the wordmark inherits color, the E stays cyan. */
.vz-ring circle{fill:var(--mark,#B9875B)}
.vz-l{fill:currentColor}
.vz-e{fill:var(--e,#78D2DE)}
.lockup{--mark:#B9875B;color:var(--paper);height:34px;width:auto}

.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.center{text-align:center}

.grain{position:fixed;inset:-120px;z-index:70;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainmove 7s steps(10) infinite}
@keyframes grainmove{0%{transform:translate(0,0)}25%{transform:translate(-26px,18px)}50%{transform:translate(22px,-24px)}75%{transform:translate(-16px,-20px)}100%{transform:translate(0,0)}}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7vw,96px);line-height:.92;letter-spacing:-.035em;color:var(--paper)}
.display .l1,.display .l2{display:block}
.display .l2{color:var(--bronze);font-style:italic}
.display-2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,4.6vw,64px);line-height:.98;letter-spacing:-.03em;color:var(--paper)}
.display-3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.2vw,44px);line-height:1.02;letter-spacing:-.02em;color:var(--paper)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--bronze-bright);display:flex;align-items:center;gap:16px}
.kicker::after{content:"";width:38px;height:1px;background:var(--bronze);flex:none}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--muted-warm);max-width:56ch}
.sub{color:var(--muted-warm);font-size:17px;line-height:1.65;max-width:60ch}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--grot);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:15px 26px;min-height:48px;border:1px solid var(--bronze);color:var(--bronze-bright);text-decoration:none;background:rgba(185,135,91,.06);white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:background .2s,color .2s,border-color .2s,transform .12s,box-shadow .2s}
.btn:hover{background:var(--bronze);color:#0A0B0B}
.btn:active{transform:scale(.985);border-color:var(--accent);color:var(--accent);background:rgba(120,210,222,.12)}
/* The chamfer clip would hide an outer outline, so focus is drawn inside the box. */
.btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);color:var(--paper)}
.btn:disabled{opacity:.38;pointer-events:none}
.btn-ghost{border-color:rgba(185,135,91,.28);background:transparent;color:var(--muted-warm)}
.btn-ghost:hover{background:rgba(185,135,91,.08);color:var(--paper);border-color:rgba(120,210,222,.4)}
.btn-primary,.btn-nav{color:var(--accent);background:rgba(185,135,91,.09)}
.btn-primary:hover,.btn-nav:hover{background:rgba(185,135,91,.22);border-color:var(--bronze-bright);color:var(--paper)}
.btn-nav{padding:0 18px;min-height:44px;font-size:12.5px}
.btn-large{padding:19px 34px;font-size:16px}
@media (forced-colors:active){
  .btn:focus-visible,.guide-step:focus-visible,.chooser [role="radio"]:focus-visible,.phone button:focus-visible{outline:2px solid CanvasText;outline-offset:-3px}
}

/* ---------- header ----------
   Composition: the lockup on the left, an open middle, and a right-hand cluster of the four indexed section links,
   a hairline, and the booking action. The bar is glass over the hero and firms up once the page has scrolled.
   The booking action is a framed control whose upper-right diagonal is a drawn 1px line that meets both sides. */
@property --frame{syntax:'<color>';inherits:false;initial-value:transparent}
@property --fill{syntax:'<color>';inherits:false;initial-value:transparent}
@property --bw{syntax:'<length>';inherits:false;initial-value:1px}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;column-gap:clamp(16px,2vw,30px);padding:0 var(--gutter);
  background:rgba(8,10,11,.6);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);transition:background .45s var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;opacity:.75;transition:opacity .45s var(--ease);
  background:linear-gradient(90deg,transparent 0,rgba(185,135,91,.4) 9%,rgba(185,135,91,.4) 91%,transparent 100%)}
.nav.is-scrolled{background:rgba(8,10,11,.9)}
.nav.is-scrolled::after{opacity:1}
.js .nav{opacity:0;animation:navIn .8s var(--ease) .15s forwards}
@keyframes navIn{to{opacity:1}}
/* Lockup: white lettering (the E included); the dot emblem stays bronze. Other lockups keep the accepted asset colours. */
.brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.brand .lockup{height:36px;color:#FFFFFF;--e:#FFFFFF;transition:filter .3s var(--ease)}
.brand:hover .lockup{filter:drop-shadow(0 0 7px rgba(185,135,91,.3))}
.brand:focus-visible{outline:1.5px solid var(--accent);outline-offset:6px;border-radius:2px}
/* Section links: Space Grotesk small caps with a bronze index numeral, 44px targets, a marker line that travels to the
   hovered link and rests under the section in view, and a hairline before the booking action. */
.nav-links{position:relative;grid-column:3;display:flex;align-items:center;gap:clamp(2px,.8vw,12px);font-family:var(--grot);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.nav-links::after{content:"";flex:none;width:1px;height:22px;margin-left:clamp(12px,1.4vw,22px);background:linear-gradient(180deg,transparent,rgba(185,135,91,.55),transparent)}
.nav-links a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;color:rgba(120,210,222,.8);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
.nav-links a .nn{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.1em;color:rgba(216,175,134,.7);transform:translateY(-1px);transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover .nn{color:var(--accent)}
.nav-links a[aria-current="true"]{color:var(--accent)}
.nav-links a[aria-current="true"] .nn{color:var(--bronze-bright)}
.nav-links a:focus-visible{outline:1.5px solid var(--accent);outline-offset:-6px;border-radius:2px;color:var(--paper)}
.nav-marker{position:absolute;left:var(--nx,0);bottom:7px;width:var(--nw,0);height:1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(120,210,222,.15),var(--accent) 28%,var(--accent) 72%,rgba(120,210,222,.15));box-shadow:0 0 10px rgba(120,210,222,.45);
  transition:left .45s var(--ease),width .45s var(--ease),opacity .3s var(--ease)}
.nav-marker.on{opacity:1}
/* Booking action. One element draws the frame: the frame colour fills the chamfered box, and the fill is painted one
   frame-width inside with a matching chamfer, so the diagonal is a real line that meets the top and right edges. */
.nav .btn-nav,.nav .btn-nav:hover,.nav .btn-nav:focus-visible,.nav .btn-nav:active{
  background:linear-gradient(-135deg,transparent calc(var(--cut) * .7071 + var(--bw)),var(--fill) 0) var(--bw) var(--bw) / calc(100% - var(--bw) * 2) calc(100% - var(--bw) * 2) no-repeat,var(--frame);
  border:0;box-shadow:none}
.nav .btn-nav{--cut:12px;--bw:1px;--frame:rgba(185,135,91,.88);--fill:rgba(185,135,91,.12);grid-column:4;position:relative;gap:10px;padding:0 20px;min-height:44px;font-size:12.5px;letter-spacing:.02em;color:var(--accent);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:--frame .25s var(--ease),--fill .25s var(--ease),--bw .15s var(--ease),color .2s var(--ease),transform .12s}
.nav .btn-nav::after{content:"\2192";font-size:1.05em;line-height:1;transition:transform .3s var(--ease)}
.nav .btn-nav:hover{--fill:rgba(185,135,91,.3);--frame:var(--bronze-bright);color:var(--paper)}
.nav .btn-nav:hover::after{transform:translateX(3px)}
.nav .btn-nav:focus-visible{--bw:2px;--frame:var(--accent);--fill:rgba(120,210,222,.1);color:var(--paper);outline:none}
.nav .btn-nav:active{--frame:var(--accent);--fill:rgba(120,210,222,.16);color:var(--accent)}

/* ---------- signal spine (desktop) ---------- */
.spine{position:fixed;left:26px;top:var(--nav-h);bottom:0;width:1px;z-index:40;pointer-events:none}
.spine-line{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(185,135,91,.42) 10%,rgba(185,135,91,.42) 90%,transparent)}
.spine-current{position:absolute;left:-1px;top:0;width:3px;height:140px;border-radius:2px;background:linear-gradient(180deg,transparent,var(--accent) 50%,transparent);
  box-shadow:0 0 14px rgba(120,210,222,.55);transform:translateY(calc(var(--p,0)*(100vh - var(--nav-h) - 140px)));will-change:transform}
.spine-label{position:absolute;left:14px;bottom:34px;transform-origin:left bottom;transform:rotate(-90deg);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:#7B7068;white-space:nowrap;transition:opacity .3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;padding:calc(var(--nav-h) + clamp(32px,6vh,72px)) 0 clamp(48px,8vh,88px);display:flex;align-items:center;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(52% 44% at 70% 50%,rgba(185,135,91,.075),transparent 70%),
    radial-gradient(30% 30% at 18% 78%,rgba(120,210,222,.035),transparent 70%),
    linear-gradient(rgba(185,135,91,.028) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,rgba(185,135,91,.028) 1px,transparent 1px) 0 0/72px 72px,
    var(--bg-deep)}
.hero-geo{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,var(--bg-deep) 0%,rgba(8,10,11,.55) 38%,transparent 60%),url('assets/access-geometry.svg') 72% 42%/min(1300px,130vw) auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.hero-grid,.demo-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero-copy{max-width:680px}
.hero .kicker{margin-bottom:34px;font-size:10px;letter-spacing:.26em}
.hero .display{margin-bottom:28px}
.hero .lede{margin-bottom:38px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:44px}
.flow-strip{display:flex;flex-wrap:wrap;list-style:none;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:#7B7068}
.flow-strip li{display:flex;align-items:center;gap:10px}
.flow-strip li b{font-weight:500;color:var(--bronze-bright)}
.flow-strip li+li::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,rgba(185,135,91,.5),rgba(120,210,222,.5));margin:0 14px}
/* The slot and its caption stack in flow, so the caption can never sit under the phone. */
.hero-stage{position:relative;display:grid;justify-items:center;align-content:center;gap:14px;min-height:min(760px,calc(100vh - var(--nav-h) - 96px))}
.slot-wrap{position:relative;z-index:1;display:grid;justify-items:center}
.phone-slot{position:relative;z-index:2;width:var(--pw-hero);aspect-ratio:9/19.4;pointer-events:none}
.stage-note{position:relative;z-index:2;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fine);white-space:nowrap;opacity:clamp(0,calc(1 - var(--slot-p,0) * 5),1)}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#7B7068;text-decoration:none}
.scroll-cue span{position:relative;width:1px;height:38px;background:linear-gradient(180deg,transparent,var(--bronze));overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--accent);animation:cueDrop 2.2s ease-in-out infinite}
@keyframes cueDrop{0%{top:-40%}100%{top:110%}}

.js .rise{opacity:0;transform:translateY(18px);animation:riseIn .9s var(--ease) forwards;animation-delay:calc(.1s + var(--r,0)*90ms)}
@keyframes riseIn{to{opacity:1;transform:none}}

/* ---------- ring ---------- */
.ring{position:absolute;aspect-ratio:1;pointer-events:none}
.ring-hero{width:min(760px,62vw);left:50%;top:50%;transform:translate(-50%,-50%);z-index:0}
.ring-art{width:100%;height:100%;overflow:visible;--mark:var(--bronze)}
.ring-hero .ring-art{opacity:.5}
.ring .dot,.ring .vz-ring circle{fill:var(--mark);transform-box:fill-box;transform-origin:center}
.js .ring.draw .dot{opacity:0;transform:scale(.15);animation:dotIn .7s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:calc(.25s + var(--i,0)*9ms)}
.js .ring.draw.is-sweeping .dot{animation:dotIn .7s cubic-bezier(.2,.9,.3,1.2) forwards,ringSweep .22s cubic-bezier(.4,0,.2,1) 1 both;animation-delay:calc(.25s + var(--i,0)*9ms),var(--sweep-delay,0s)}
.js .ring:not(.draw).is-sweeping .dot{animation:ringSweep .22s cubic-bezier(.4,0,.2,1) 1 both;animation-delay:var(--sweep-delay,0s)}
@keyframes dotIn{to{opacity:1;transform:scale(1)}}
@keyframes ringSweep{
  0%{fill:var(--mark);filter:none}
  32%,68%{fill:var(--accent-deep);filter:drop-shadow(0 0 4px rgba(60,184,204,.78)) drop-shadow(0 0 9px rgba(60,184,204,.38))}
  100%{fill:var(--mark);filter:none}}
.ring-current{position:absolute;inset:6%;border-radius:50%;pointer-events:none;opacity:.22;
  background:conic-gradient(from 0deg,transparent 0 12%,rgba(120,210,222,.08) 16%,rgba(120,210,222,.62) 19%,rgba(120,210,222,.1) 23%,transparent 28% 61%,rgba(120,210,222,.42) 65%,rgba(120,210,222,.06) 69%,transparent 74% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 47.1%,#000 47.7% 48.6%,transparent 49.3%);mask:radial-gradient(circle,transparent 0 47.1%,#000 47.7% 48.6%,transparent 49.3%);
  filter:drop-shadow(0 0 5px rgba(120,210,222,.34));animation:ringCurrent 7.2s linear infinite}
@keyframes ringCurrent{0%{transform:rotate(0deg);opacity:.16}42%{opacity:.3}68%{opacity:.21}100%{transform:rotate(360deg);opacity:.16}}

/* ---------- demonstration section ----------
   Reading order at every width: heading, phone, controls. On wide screens the phone takes the right column across both rows. */
.demo{position:relative;padding-top:clamp(64px,9vh,110px)}
.demo-grid{align-items:start;grid-template-areas:"head stage" "controls stage";grid-template-rows:auto 1fr;row-gap:0}
.demo-head{grid-area:head;min-width:0;max-width:820px;margin-bottom:clamp(24px,3.5vh,36px)}
.demo-head .kicker{margin-bottom:22px}
.demo-head .sub,.how .sec-head .sub{margin-top:18px}
.demo-controls{grid-area:controls;position:relative;z-index:1;min-width:0}
.demo-controls .sub{margin-bottom:clamp(22px,3vh,30px)}
.rail-label{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze-bright);margin-bottom:12px}
.chooser{display:flex;flex-wrap:wrap;gap:8px}
.chooser [role="radio"]{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:0 16px;min-height:44px;border:1px solid rgba(185,135,91,.3);color:var(--muted);
  background:rgba(10,12,13,.6);white-space:nowrap;transition:color .2s,border-color .2s,background .2s;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.chooser [role="radio"]:hover{color:var(--paper);border-color:rgba(120,210,222,.5)}
.chooser [role="radio"]:focus-visible,.tabs [role="tab"]:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent);color:var(--paper)}
.chooser [role="radio"][aria-checked="true"]{color:var(--accent);border-color:rgba(120,210,222,.55);background:rgba(120,210,222,.07)}
.choose-status{display:none;margin-top:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fine)}
.demo-includes{list-style:none;display:grid;gap:10px;margin:20px 0 28px;color:var(--muted-warm);font-size:15px;line-height:1.55}
.demo-includes li{position:relative;padding-left:22px}
.demo-includes li::before{content:"+";position:absolute;left:0;color:var(--accent);font-family:var(--mono)}
.guide{list-style:none;display:grid;gap:6px;margin:clamp(24px,3.5vh,36px) 0 clamp(20px,3vh,28px);border-top:1px solid rgba(185,135,91,.16)}
.guide-step{width:100%;display:grid;grid-template-columns:36px 1fr;gap:2px 14px;align-items:baseline;text-align:left;padding:16px 14px 16px 10px;min-height:44px;
  border-left:2px solid transparent;border-bottom:1px solid rgba(185,135,91,.12);color:var(--muted);transition:background .2s,border-color .2s,color .2s}
.guide-step:hover{background:rgba(185,135,91,.05);color:var(--paper);border-left-color:rgba(120,210,222,.45)}
.guide-step[aria-current="step"]{border-left-color:var(--accent);background:rgba(120,210,222,.045);color:var(--paper)}
.guide-step:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.industry-route,.back-to-demo{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.industry-route:hover,.back-to-demo:hover{color:var(--paper)}
.g-num{font-size:10px;letter-spacing:.18em;color:var(--bronze-bright)}
.g-title{font-family:var(--grot);font-weight:600;font-size:16px;color:inherit}
.g-text{grid-column:2;font-size:13.5px;line-height:1.55;color:#9A948E}
.guide-step[aria-current="step"] .g-text{color:#B4AEA7}
.demo-ctl{display:flex;flex-wrap:wrap;gap:10px;transition:opacity .35s var(--ease)}
/* The rail belongs to the docked phone: it is hidden while the phone is still on its way (app.js mirrors the phone's travel state on the stage). */
.js .demo-stage:not([data-travel="docked"]) .demo-ctl{opacity:0;pointer-events:none}
.demo-controls .note{margin-top:22px}
/* The stage is a three-column grid: the dock in the middle column stays centred (the side columns share the leftover width
   equally and may be narrower than the rail), the rail sits in the right column beside the phone, outside it. */
.demo-stage{grid-area:stage;position:sticky;top:var(--stage-top);height:calc(100vh - var(--nav-h) - 48px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-items:center;justify-self:center;width:100%;align-self:start}
.phone-dock{grid-column:2;position:relative;width:var(--pw-dock);height:calc(var(--pw-dock) * 19.4 / 9);flex:none}
@media (min-width:1001px){
  .demo-ctl{grid-column:3;justify-self:start;align-self:center;flex-direction:column;flex-wrap:nowrap;gap:8px;margin-left:clamp(14px,1.6vw,24px)}
  .rail-btn{flex-direction:column;justify-content:center;gap:7px;width:92px;min-width:0;min-height:68px;padding:11px 6px 10px;font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;text-align:center;white-space:normal}
  .rail-btn .rb-ico{font-family:var(--grot);font-weight:500;font-size:19px;line-height:1}
  .rail-btn .rb-txt{display:block;max-width:80px}
}
/* Narrow desktop widths: the side column beside the 300px phone is about 64px, so the rail is a little slimmer and closer, and never leaves the viewport. */
@media (min-width:1001px) and (max-width:1120px){
  .demo-ctl{margin-left:6px}
  .rail-btn{width:80px;padding:10px 4px 9px}
  .rail-btn .rb-txt{max-width:72px}
}
.stage-cap{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fine)}
/* A first keyboard focus into a not-yet-revealed block must not land on an invisible control. */
.js .reveal:focus-within{opacity:1;transform:none;transition:none}

/* ---------- the phone ---------- */
@property --phone-ring{syntax:'<color>';inherits:false;initial-value:rgba(185,135,91,.28)}
.phone{--pw:var(--pw-dock);--phone-ring:rgba(185,135,91,.28);position:absolute;left:0;top:0;z-index:3;width:var(--pw);aspect-ratio:9/19.4;transform-origin:0 0;will-change:transform;border-radius:calc(var(--pw)*.145);background:#0A0C0D;border:1px solid rgba(185,135,91,.55);
  box-shadow:0 0 0 5px #06070A,0 0 0 6px var(--phone-ring),0 50px 110px rgba(0,0,0,.65),0 18px 40px rgba(0,0,0,.4);
  overflow:hidden;color:var(--text);font-size:calc(var(--pw)*.037);line-height:1.4;font-family:var(--sans);isolation:isolate;
  transition:border-color .45s var(--ease),--phone-ring .45s var(--ease)}
/* The interaction cue: the inner line eases to Venzor cyan and the outer ring takes a hint of it. No flash, no movement, nothing over the screen. */
@media (hover:hover){.phone:hover{border-color:var(--accent);--phone-ring:rgba(120,210,222,.34)}}
.phone:focus-within{border-color:var(--accent);--phone-ring:rgba(120,210,222,.34)}
.phone.in-slot{--pw:var(--pw-hero)}
.phone.is-fixed{position:fixed}
.phone .island{position:absolute;z-index:6;top:calc(var(--pw)*.038);left:50%;transform:translateX(-50%);width:29%;height:calc(var(--pw)*.085);border-radius:99px;background:#000}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--pw)*.14) calc(var(--pw)*.055) calc(var(--pw)*.05);
  background:radial-gradient(circle at 72% 12%,rgba(185,135,91,.09),transparent 34%),linear-gradient(135deg,#0a0d0e,#080a0b 55%,#0b0d0e)}
.ps-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:.6em;border-bottom:1px solid rgba(185,135,91,.2)}
/* Inner screens use their own back row as the app bar, like the portal's reader. */
.phone:not([data-state="week"]) .ps-bar,.phone:not([data-state="week"]) .ps-client{display:none}
.ps-logo{height:1.8em;width:auto;--mark:#A8A4A0;color:var(--paper)}
.ps-demo{font-family:var(--mono);font-size:.68em;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-bright)}
.ps-client{font-family:var(--serif);color:var(--bronze);font-size:1.3em;text-align:center;padding:.45em 0 .3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-views{position:relative;flex:1;min-height:0}
.ps{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);transition:opacity .28s var(--ease),transform .28s var(--ease);pointer-events:none;visibility:hidden}
.phone[data-state="week"] .ps.week,.phone[data-state="brief"] .ps.brief,.phone[data-state="direction"] .ps.direction{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.ps-body{flex:1;min-height:0;overflow:hidden}
.ps-tabs{display:grid;grid-template-columns:repeat(3,1fr);flex:none;border-top:1px solid rgba(185,135,91,.15);border-bottom:1px solid rgba(185,135,91,.15);margin-bottom:1em}
.ps-tabs button{position:relative;text-align:center;font-size:.78em;min-height:44px;padding:.55em 0;color:#9A948E}
.ps-tabs button[aria-selected="true"]{color:var(--text)}
.ps-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:2px;background:var(--accent);box-shadow:0 0 10px rgba(120,210,222,.3)}
.ps-pill{display:inline-block;font-family:var(--mono);font-size:.68em;letter-spacing:.3em;text-transform:uppercase;color:var(--v-accent);
  border:1px solid color-mix(in srgb,var(--v-accent) 55%,transparent);padding:.5em 1em;border-radius:2px;background:color-mix(in srgb,var(--v-accent) 7%,transparent)}
.ps-title{font-family:var(--serif);font-weight:500;font-size:2.7em;line-height:.85;letter-spacing:-.04em;color:var(--paper);margin:.3em 0 .2em}
.ps-title i{color:var(--bronze-bright)}
.ps-meta{display:flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.68em;letter-spacing:.16em;text-transform:uppercase;color:#8F8A84;margin-bottom:.9em;white-space:nowrap}
.ps-meta b{width:.6em;height:.6em;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(120,210,222,.6);flex:none}
.ps-meta i{width:1px;height:1.6em;background:rgba(185,135,91,.25)}
.ps-list{display:grid;gap:.5em}
.ps-card{position:relative;display:block;width:100%;text-align:left;border:1px solid rgba(185,135,91,.38);padding:.85em 1.2em .75em;background:linear-gradient(145deg,rgba(25,27,27,.9),rgba(10,13,13,.95));
  clip-path:polygon(0 0,calc(100% - 1.4em) 0,100% 1.4em,100% 100%,0 100%);transition:border-color .16s,background .16s}
.ps-card::before{content:"";position:absolute;inset:.5em;border:1px solid rgba(185,135,91,.08);pointer-events:none}
.ps-card:hover{border-color:rgba(120,210,222,.55)}
.ps-card:hover::before{border-color:rgba(120,210,222,.14)}
.ps-card:hover .ps-open{color:var(--paper)}
/* Card buttons hold phrasing content only, so their rows are spans laid out as blocks. */
.ps-card-head{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin-bottom:.4em;padding-right:1em}
.ps-label{display:block;font-family:var(--mono);font-size:.7em;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.45em}
.ps-index{font-family:var(--serif);font-style:italic;font-size:1.6em;line-height:1;color:var(--bronze-bright)}
.ps-index span{font-family:var(--mono);font-style:normal;font-size:.4em;letter-spacing:.18em;text-transform:uppercase;margin-right:.5em;color:#8F8A84}
.ps-topic{display:block;font-family:var(--serif);font-weight:500;font-size:1.5em;line-height:1.05;letter-spacing:-.02em;color:#F1EAE2;margin:0 0 .35em}
.ps-card.lead .ps-topic{font-size:1.65em}
.ps-hook{display:block;font-size:.86em;line-height:1.5;color:#B4AEA7;margin:0 0 .5em}
.ps-acts{display:flex;justify-content:space-between;align-items:center;gap:.5em;border-top:1px solid rgba(185,135,91,.14);padding-top:.45em}
.ps-stars-static{color:#3A3632;font-size:1.1em;letter-spacing:.12em}
.ps-stars-static.rated{color:#E7B96B}
.ps-open{font-family:var(--mono);font-size:.7em;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ps-hint{font-family:var(--mono);font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:#8F8A84;text-align:center;margin-top:.7em}
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:2px;border:1px solid;white-space:nowrap}
.phone .pill{font-size:.64em;padding:.45em .8em;letter-spacing:.12em}
.pill.ready{color:var(--accent);border-color:rgba(120,210,222,.32);background:rgba(120,210,222,.045)}
.pill.review{color:var(--bronze-bright);border-color:rgba(185,135,91,.38);background:rgba(185,135,91,.055)}
.pill.held{color:#E09393;border-color:rgba(207,111,111,.4);background:rgba(207,111,111,.12)}
/* inner screens */
.ps-nav{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin-bottom:.2em}
.ps-back{display:inline-flex;align-items:center;gap:.35em;min-height:max(var(--tap),3.1em);padding:0 .4em 0 0;font-family:var(--mono);font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-bright)}
.ps-back:hover{color:var(--paper)}
.ps-tag{font-family:var(--mono);font-size:.68em;letter-spacing:.16em;text-transform:uppercase;color:#8F8A84;white-space:nowrap}
.ps-h{font-family:var(--serif);font-weight:500;font-size:1.55em;line-height:1.02;letter-spacing:-.025em;color:var(--paper);margin:0 0 .45em}
.ps-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6em}
.ps-sec-head .ps-label{margin-bottom:.5em}
.ps-sec-hint{font-family:var(--mono);font-size:.64em;letter-spacing:.06em;color:var(--bronze-bright);white-space:nowrap}
.ps-opts{display:grid;gap:.35em;margin-bottom:.6em}
.ps-opt{width:100%;text-align:left;display:grid;grid-template-columns:1fr 1.6em;gap:.15em .6em;align-items:center;min-height:max(var(--tap),3.1em);padding:.45em .7em .45em .8em;
  border:1px solid rgba(185,135,91,.24);background:rgba(185,135,91,.025);color:#B8B2AC;font-size:.84em;line-height:1.4;transition:border-color .16s,background .16s,color .16s;
  clip-path:polygon(0 0,calc(100% - .8em) 0,100% .8em,100% 100%,0 100%)}
.ps-opt:hover{border-color:rgba(120,210,222,.5);color:var(--text)}
.ps-opt[aria-pressed="true"]{border-color:var(--bronze);background:rgba(185,135,91,.07);color:var(--text)}
.ps-opt .o-num{grid-column:1;font-family:var(--mono);font-size:.76em;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-bright)}
.ps-opt .o-text{grid-column:1}
.ps-opt .o-check{grid-column:2;grid-row:1/3;width:1.6em;height:1.6em;border-radius:50%;border:1px solid rgba(120,210,222,.45);color:var(--accent);display:grid;place-items:center;font-size:.9em;opacity:.35;transition:opacity .18s,transform .18s}
.ps-opt[aria-pressed="true"] .o-check{opacity:1;background:rgba(120,210,222,.12);box-shadow:0 0 10px rgba(120,210,222,.3)}
.ps-script{border:1px solid rgba(185,135,91,.26);background:linear-gradient(180deg,rgba(24,26,26,.95),rgba(12,14,14,.96));padding:.7em .85em .8em;clip-path:polygon(0 0,calc(100% - 1em) 0,100% 1em,100% 100%,0 100%)}
.ps-script .ps-label{margin-bottom:.35em}
.ps-script p{font-size:.86em;line-height:1.5;color:#D2CCC5;margin:0}
.ps-script .open{color:var(--paper);font-weight:500}
.ps-script .close{color:var(--accent)}
.ps-field{margin-bottom:.9em}
.ps-field .v{font-size:.86em;line-height:1.5;color:#D2CCC5}
.ps-field .v .kw{display:inline-block;font-family:var(--mono);font-weight:500;color:var(--accent);background:rgba(120,210,222,.08);border:1px solid rgba(120,210,222,.3);border-radius:3px;padding:0 .5em;margin-right:.5em;font-size:.9em}
.ps-field .v .tags{display:block;font-family:var(--mono);font-size:.84em;letter-spacing:.02em;color:var(--accent);margin-top:.35em}
.ps-chips{display:flex;flex-wrap:wrap;gap:.4em;margin:0 0 .9em}
.ps-chips span{font-family:var(--mono);font-size:.64em;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-bright);border:1px solid rgba(185,135,91,.35);padding:.5em .8em;border-radius:2px}
.ps-review{border:1px solid rgba(185,135,91,.23);background:rgba(185,135,91,.035);padding:.8em .9em;margin-bottom:.9em;clip-path:polygon(0 0,calc(100% - 1em) 0,100% 1em,100% 100%,0 100%)}
.ps-review .rv-head{display:flex;justify-content:space-between;align-items:center;gap:.6em;margin-bottom:.4em}
.ps-review .rv-title{font-family:var(--mono);font-size:.7em;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-bright)}
.ps-review .flags{font-family:var(--mono);font-size:.68em;letter-spacing:.04em;line-height:1.6;color:var(--ok)}
.ps-rate{display:grid;grid-template-columns:1fr;gap:.15em}
.ps-rate .rq{font-size:.86em;color:var(--text)}
.ps-stars{display:flex;gap:.1em}
.ps-star{width:max(var(--tap),2.6em);height:max(var(--tap),2.6em);display:grid;place-items:center;font-size:1.5em;line-height:1;color:#3A3632;transition:transform .12s,color .12s}
.ps-star:hover{color:var(--bronze-bright)}
.ps-star.on{color:var(--accent)}
.ps-stars.tone-gold .ps-star.on{color:#E7B96B;text-shadow:0 0 8px rgba(231,185,107,.5)}
.ps-stars.tone-orange .ps-star.on{color:#F28C45;text-shadow:0 0 8px rgba(242,140,69,.5)}
.ps-stars.tone-red .ps-star.on{color:#E06B6B;text-shadow:0 0 8px rgba(224,107,107,.45)}
.ps-stars.pulse .ps-star.selected{animation:starpop .6s cubic-bezier(.16,.84,.24,1) both}
@keyframes starpop{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1.15)}}
.ps-learn{font-family:var(--mono);font-size:.68em;letter-spacing:.04em;min-height:1.6em;color:var(--accent)}
.ps-learn.tone-gold{color:#E7B96B}.ps-learn.tone-orange{color:#F28C45}.ps-learn.tone-red{color:#E06B6B}
.ps-foot-bar{display:grid;grid-template-columns:1fr 1fr;gap:.5em;padding-top:.5em;margin-top:.3em;border-top:1px solid rgba(185,135,91,.18)}
.ps-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:max(var(--tap),3.2em);padding:.4em .7em;font-family:var(--grot);font-weight:600;font-size:.86em;letter-spacing:.01em;
  border:1px solid rgba(185,135,91,.4);color:var(--bronze-bright);background:rgba(185,135,91,.06);transition:background .16s,color .16s,border-color .16s;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - .7em) 0,100% .7em,100% 100%,0 100%)}
.ps-btn:hover{background:var(--bronze);color:#0A0B0B}
.ps-btn.primary{border-color:var(--accent);color:var(--accent);background:rgba(120,210,222,.08)}
.ps-btn.primary:hover{background:var(--accent);color:#08181B}
/* Focus inside the phone is drawn inside the box so the chamfers and rounded corners cannot hide it. */
.phone button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}
.js .phone.assemble .ln{opacity:0;transform:translateY(10px);animation:lnIn .6s var(--ease) forwards;animation-delay:calc(.9s + var(--d,0)*130ms);pointer-events:none}
@keyframes lnIn{to{opacity:1;transform:none}}

/* ---------- sections ---------- */
main>section{padding:clamp(80px,12vh,150px) 0}
.sec-head{max-width:820px;margin-bottom:clamp(40px,6vh,72px)}
.sec-head .kicker{margin-bottom:22px}
.sec-head .display-2{margin-bottom:20px}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.swap{transition:opacity .26s var(--ease),transform .26s var(--ease)}
.swap.out{opacity:0;transform:translateY(6px)}
.note{margin-top:22px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fine);line-height:1.8}

/* ---------- how it works (three steps, one trace) ---------- */
.how{position:relative;background:linear-gradient(180deg,var(--bg),var(--bg-deep) 40%,var(--bg))}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);position:relative;padding-top:34px}
.how-steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(185,135,91,.15),rgba(185,135,91,.5) 20%,rgba(120,210,222,.55) 55%,rgba(185,135,91,.5) 80%,rgba(185,135,91,.15))}
.how-step{position:relative;padding-top:6px}
.how-step::before{content:"";position:absolute;left:0;top:-38px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(120,210,222,.6)}
.how-glyph{height:56px;display:flex;align-items:flex-end;margin-bottom:22px;color:var(--accent)}
.glyph-signal{width:120px;height:40px;overflow:visible}
.glyph-signal .axis{stroke:rgba(185,135,91,.28);stroke-width:1}
.glyph-signal .quiet{fill:none;stroke:rgba(185,135,91,.5);stroke-width:1.4;stroke-linecap:round}
.glyph-signal .live{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(120,210,222,.5))}
.glyph-signal .now{fill:var(--accent);filter:drop-shadow(0 0 4px rgba(120,210,222,.8))}
.how-glyph img{width:46px;height:46px;opacity:.9}
.glyph-brief{position:relative;width:52px;height:46px;border:1px solid rgba(185,135,91,.55);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);background:rgba(185,135,91,.05);padding:10px 9px;display:grid;gap:6px;align-content:start}
.glyph-brief i{display:block;height:2px;background:var(--bronze-bright);opacity:.8}
.glyph-brief i:first-child{width:60%;background:var(--accent)}
.glyph-brief i:last-child{width:75%}
.step-num{display:inline-flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-bright);margin-bottom:18px}
.step-num b{font-weight:500;color:var(--paper);font-size:13px}
.step-num::after{content:"";width:38px;height:1px;background:var(--bronze)}
.how-step h3{margin-bottom:18px;font-size:clamp(26px,2.2vw,32px)}
.how-step p{color:var(--muted-warm);font-size:16px;line-height:1.65;max-width:42ch}

/* ---------- vertical switcher ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vh,48px)}
.tabs [role="tab"]{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:0 20px;min-height:46px;border:1px solid rgba(185,135,91,.3);color:var(--muted);
  background:rgba(10,12,13,.6);white-space:nowrap;transition:color .2s,border-color .2s,background .2s;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.tabs [role="tab"]:hover{color:var(--paper);border-color:rgba(120,210,222,.5)}
#tabs-label{margin-bottom:12px}
.tabs [role="tab"][aria-selected="true"]{color:var(--accent);border-color:rgba(120,210,222,.55);background:rgba(120,210,222,.07)}
.v-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.v-audience{font-family:var(--serif);font-size:clamp(24px,2.2vw,32px);line-height:1.2;color:var(--paper);margin-bottom:34px;letter-spacing:-.01em}
.v-facts{display:grid;border-top:1px solid rgba(185,135,91,.18)}
.v-facts>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid rgba(185,135,91,.13)}
.v-facts dt{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-bright);padding-top:4px}
.v-facts dd{color:#B4AEA7;font-size:14.5px;line-height:1.6}
.back-to-demo{margin-top:28px}
.v-topics{list-style:none;display:grid;gap:8px}
.v-topics li{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:baseline;color:var(--paper);font-size:15px}
.v-topics li span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:#7B7068}
.v-states{display:flex;flex-wrap:wrap;gap:8px}

/* Portal board tile, as accepted. */
.tile{position:relative;border:1px solid rgba(185,135,91,.34);border-radius:14px;padding:28px 25px 24px;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(27,28,28,.91),rgba(16,18,18,.94) 58%,rgba(10,12,12,.96));
  box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)}
.tile::before{content:"";position:absolute;inset:9px;border:1px solid rgba(185,135,91,.075);border-radius:8px;pointer-events:none}
.tile::after{content:"";position:absolute;width:34px;height:1px;right:-5px;top:11px;background:rgba(185,135,91,.55);transform:rotate(45deg);pointer-events:none}
.v-card{min-height:470px;display:flex;flex-direction:column}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-right:22px}
.tlabel{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--v-accent)}
.card-section+.card-section{margin-top:20px;padding-top:19px;border-top:1px solid rgba(185,135,91,.1)}
.card-topic-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:8px}
.card-label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.card-topic-head .card-label{margin:0;padding-top:2px}
.script-index{font-family:var(--serif);font-style:italic;font-size:42px;line-height:1;color:var(--bronze-bright);display:flex;align-items:baseline;gap:6px;margin-top:-8px}
.script-index span{font-family:var(--mono);font-style:normal;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#7B7068}
.v-card .topic{font-family:var(--serif);font-size:29px;font-weight:500;line-height:1.05;letter-spacing:-.025em;color:#F1EAE2}
.v-card .hook{color:#B4AEA7;font-size:13.5px;line-height:1.58}
.v-card .script-preview{color:#8F8A84;font-size:12.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.v-card .acts{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:9px;padding-top:17px;border-top:1px solid rgba(185,135,91,.12)}
.stars-static{color:#3A3632;font-size:20px;letter-spacing:.1em;line-height:1}
.openhint{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- compact questions ---------- */
.details-section{padding:clamp(76px,10vw,136px) 0;background:linear-gradient(180deg,var(--bg),var(--bg-deep) 60%,var(--bg))}
.question-list{max-width:920px;border-top:1px solid rgba(185,135,91,.24)}
.question-list details{border-bottom:1px solid rgba(185,135,91,.18)}
.question-list summary{position:relative;list-style:none;cursor:pointer;padding:24px 54px 24px 0;font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.1;color:var(--paper)}
.question-list summary::-webkit-details-marker{display:none}
.question-list summary::after{content:"+";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:20px;color:var(--accent)}
.question-list details[open] summary::after{content:"−"}
.question-list details p{max-width:68ch;padding:0 54px 24px 0;color:var(--muted-warm);font-size:16px;line-height:1.7}
.question-list summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- process and trust ---------- */
.process{background:linear-gradient(180deg,var(--bg),var(--bg-deep) 60%,var(--bg))}
.process-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.72fr) minmax(0,1fr);gap:clamp(18px,2.5vw,36px);align-items:stretch}
.p-card{padding:26px 24px 22px;display:flex;flex-direction:column;gap:14px}
.p-tag{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--v-accent);padding-right:26px}
.p-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.2vw,32px);line-height:1.05;letter-spacing:-.02em;color:var(--paper)}
.p-facts{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:10.5px;letter-spacing:.08em;color:#B4AEA7;border-top:1px solid rgba(185,135,91,.14);padding-top:14px}
.p-facts dt{color:#7B7068;text-transform:uppercase;letter-spacing:.18em;font-size:9px;padding-top:2px}
.p-facts dd b{color:var(--accent);font-weight:500}
.p-card .trace{width:100%;height:56px;overflow:visible;margin-top:auto}
.p-card .trace .axis{stroke:rgba(185,135,91,.25);stroke-width:1}
.p-card .trace .quiet{fill:none;stroke:rgba(185,135,91,.42);stroke-width:1.4;stroke-linecap:round}
.p-card .trace .live{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s;filter:drop-shadow(0 0 5px rgba(120,210,222,.5))}
.p-card .trace .now{fill:var(--accent);opacity:0;transition:opacity .5s var(--ease) 1.5s;filter:drop-shadow(0 0 4px rgba(120,210,222,.8))}
.in .p-card .trace .live{stroke-dashoffset:0}
.in .p-card .trace .now{opacity:1}
.trace-legend{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#7B7068;margin-top:-6px}
.trace-legend b{font-weight:500;color:var(--accent)}
.p-foot{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fine)}
.p-list{list-style:none;display:grid;gap:9px;border-top:1px solid rgba(185,135,91,.14);padding-top:14px}
.p-list-head{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#7B7068}
.p-list li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:baseline}
.p-list li.p-list-head{display:block}
.p-list li span{font-size:9px;letter-spacing:.18em;color:#7B7068}
.p-list li b{font-family:var(--sans);font-weight:500;color:var(--paper);font-size:13.5px;letter-spacing:0;text-transform:none}
.p-list li em{font-style:normal;text-transform:uppercase;font-size:8.5px;letter-spacing:.16em;color:var(--accent);white-space:nowrap}
.shape-col{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:10px 6px 10px 22px}
/* The divider runs along the column's left edge, clear of the checkmarks. */
.shape-col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(185,135,91,.4) 15%,rgba(185,135,91,.4) 85%,transparent)}
.shape-col::after{content:"";position:absolute;left:-1px;top:0;width:3px;height:100%;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:0;transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease),opacity .4s}
.in .shape-col::after{opacity:.7;transform:scaleY(1)}
.shape-col .p-tag{margin-left:34px;margin-bottom:4px}
.shape-steps{list-style:none;display:grid;gap:14px}
.shape-step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;color:#B4AEA7;font-size:14px;line-height:1.5}
.shape-step .chk{width:22px;height:22px;border-radius:50%;border:1px solid rgba(120,210,222,.35);display:grid;place-items:center;color:var(--accent);font-size:11px;background:var(--bg);position:relative;left:3px;
  opacity:0;transform:scale(.6);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(.35s + var(--i,0)*.28s)}
.in .shape-step .chk{opacity:1;transform:none}
.shape-step b{display:block;color:var(--paper);font-weight:500;font-family:var(--grot);font-size:14px;margin-bottom:2px}
.out-card .ps-label{color:var(--accent);margin-bottom:6px;font-size:10px}
.out-card p{color:#B4AEA7;font-size:14px;line-height:1.6}
.out-card .p-open{color:var(--paper);border-left:2px solid var(--accent);padding-left:12px}
.p-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(185,135,91,.14)}
.p-chips span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-bright);border:1px solid rgba(185,135,91,.35);padding:5px 9px;border-radius:2px}
.fine{margin-top:26px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fine);line-height:1.8}

/* ---------- founder ---------- */
.founder{background:linear-gradient(180deg,var(--bg),var(--bg-deep))}
.founder-grid{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.founder-slot{position:relative;aspect-ratio:9/16;border:1px solid rgba(185,135,91,.5);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);
  background:linear-gradient(160deg,rgba(14,17,18,.8),rgba(8,10,11,.88)),url('assets/access-geometry-ancient.svg') center/cover;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;box-shadow:0 34px 90px rgba(0,0,0,.5)}
.founder-slot::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(185,135,91,.3);pointer-events:none}
.slot-corner{position:absolute;top:18px;left:18px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-bright)}
.play{width:64px;height:64px;fill:none;stroke:var(--bronze);stroke-width:1.2}
.play path{fill:rgba(185,135,91,.15);stroke:var(--bronze-bright)}
.slot-title{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper);line-height:1.9}
.slot-sub{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8F8A84;line-height:1.9}
.founder-copy .kicker{margin-bottom:22px}
.founder-copy .display-2{margin-bottom:26px;font-size:clamp(30px,3.4vw,50px)}
.founder-copy p{color:var(--muted-warm);font-size:17px;line-height:1.65;max-width:58ch;margin-bottom:16px}
.founder-copy .sig{display:flex;align-items:baseline;gap:16px;margin-top:26px}
.founder-copy .sig .serif{font-size:26px;color:var(--bronze);font-style:italic}
.founder-copy .sig .mono{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#7B7068}

/* ---------- walkthrough ---------- */
.book{position:relative;overflow:hidden;padding:clamp(120px,18vh,200px) 0;text-align:center;background:radial-gradient(50% 60% at 50% 50%,rgba(185,135,91,.07),transparent 70%),var(--bg-deep)}
.ring-book{width:auto;height:min(900px,calc(100% - 28px));aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.26;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 74%,rgba(0,0,0,.55) 90%,rgba(0,0,0,.18) 100%);mask-image:radial-gradient(circle closest-side,#000 74%,rgba(0,0,0,.55) 90%,rgba(0,0,0,.18) 100%)}
.ring-book .ring-art{--mark:var(--bronze)}
.book-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.kicker.center{justify-content:center}
.kicker.center::after{display:none}
.book .display{margin:26px 0 24px;font-size:clamp(40px,6vw,86px)}
.book .lede{margin-bottom:38px;text-align:center}
.personal-service{width:100%;max-width:660px;margin-bottom:32px;padding-top:24px;border-top:1px solid rgba(185,135,91,.24)}
.personal-service h3{font-family:var(--grot);font-size:18px;font-weight:600;line-height:1.4;color:var(--paper);margin-bottom:12px}
.personal-service p{font-size:16px;line-height:1.7;color:var(--muted-warm)}
.book-url{margin-top:18px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#7B7068}
.book-url a{color:inherit;text-decoration:none}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(185,135,91,.16);padding:56px 0 40px;background:var(--bg-deep)}
.foot-grid{display:grid;gap:18px;justify-items:start}
.foot-logo{height:30px;--mark:#A8A4A0}
.foot-line{color:var(--muted-warm);font-size:15px}
.foot-meta{list-style:none;display:grid;gap:8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fine);line-height:1.7}

/* ---------- responsive ---------- */
@media (max-width:1180px){.spine{display:none}}
/* Tall desktop windows: the demonstration grid is at least one stage plus 160px tall, so the stuck phone has a real interval before it is released. */
@media (min-width:1001px) and (min-height:795px){
  .demo-grid{min-height:calc(100vh - var(--nav-h) - 48px + 160px)}
}
/* Short desktop windows: a fixed comfortable phone that scrolls with the page after it docks, so it is never cut off by a sticky stage. */
@media (min-width:1001px) and (max-height:794px){
  :root{--pw-dock:300px}
  .demo-stage{position:static;height:auto;padding:0 0 36px}
}
@media (max-width:1000px){
  #demo{--phone-height:min(760px,calc(100svh - 190px))}
  .demo-stage .phone-dock,.demo-stage .phone{height:var(--phone-height);min-height:500px;aspect-ratio:auto}
  /* Phone width: 86% of the screen, biased down to 82% on short screens so it fits under the nav, never above 380px. */
  :root{--tap:44px;--pw-dock:min(86vw,380px);--pw-dock:min(380px,max(82vw,min(86vw,calc((100lvh - var(--nav-h) - 16px) * 9 / 19.4))))}
  .nav-links{display:none}
  .nav{grid-template-columns:auto 1fr auto}
  .nav .btn-nav{grid-column:3;justify-self:end}
  .grain{animation:none}
  /* Hero: copy only. The phone that follows belongs to the demonstration and peeks in as the hero's visual preview. */
  .hero{min-height:0;align-items:flex-start;padding-top:calc(var(--nav-h) + 40px);padding-bottom:10px}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{position:relative;z-index:1;max-width:680px}
  .hero-stage{position:absolute;inset:0;min-height:0;z-index:0;display:block}
  .ring-hero{width:min(620px,150vw);left:70%;top:58%;transform:translate(-50%,-50%);opacity:.55}
  .phone-slot,.stage-note,.scroll-cue{display:none}
  .cta-row{margin-bottom:28px}
  /* Demonstration: heading, phone in normal flow (not sticky), then the controls. */
  .demo{padding-top:30px}
  .demo-grid{grid-template-columns:1fr;grid-template-areas:"head" "stage" "controls";grid-template-rows:auto auto auto;gap:0}
  .demo-head{margin-bottom:18px}
  .demo-head .kicker{margin-bottom:14px}
  .demo-head .display-2{font-size:clamp(28px,8vw,44px)}
  .demo-stage{position:static;height:auto;display:grid;grid-template-columns:1fr;justify-items:center;padding:0 0 4px}
  .phone-dock{grid-column:auto}
  .stage-cap{position:static;margin-top:16px;order:1}
  .demo-ctl{order:2;width:var(--pw-dock);max-width:100%;margin:14px 0 0}
  .slot-wrap{display:contents}
  .demo-controls{margin-top:30px}
  .demo-controls .sub{margin-bottom:22px}
  #demo-back,#demo-next{display:none}
  .demo-ctl .btn{min-width:0;width:100%}
  .choose-status{display:block}
  .chooser{display:grid;grid-template-columns:repeat(3,1fr)}
  .chooser [role="radio"]{white-space:normal;text-align:center;padding:0 8px;font-size:9.5px;letter-spacing:.14em;line-height:1.35}
  .how-steps{grid-template-columns:1fr;gap:40px;padding-top:0;padding-left:26px}
  .how-steps::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,rgba(185,135,91,.15),rgba(185,135,91,.5) 20%,rgba(120,210,222,.55) 55%,rgba(185,135,91,.5) 80%,rgba(185,135,91,.15))}
  .how-step::before{left:-23px;top:22px}
  .how-step p{max-width:none}
  .v-panel{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .shape-col{padding:14px 0}
  .founder-grid{grid-template-columns:1fr;gap:40px}
  .founder-media{max-width:300px}
}
@media (max-width:720px){
  /* ---------- phone composition (720px and below) ----------
     The header, the hero, its geometry, the calls to action, the step into the portal, and the portal's outer
     presentation are composed for a phone here. The 721px to 1000px rules above stay as they are for tablets.
     The sections farther down the page keep their earlier layouts; only their type sizes are set at the end. */
  :root{--nav-h:62px;
    /* Portal panel width: nearly full width (the gutter plus 4px each side), never taller than the screen under
       the header, never above 400px, and never under 78% of the screen. */
    --pw-dock:min(400px,calc(100vw - var(--gutter) * 2 - 8px));
    --pw-dock:min(400px,max(78vw,min(calc(100vw - var(--gutter) * 2 - 8px),calc((100lvh - var(--nav-h) - 20px) * 9 / 19.4))))}
  html{scroll-padding-top:calc(var(--nav-h) + 12px);scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 12px)}

  /* Header: a phone-sized logo and one compact booking control, kept clear of the iPhone status bar and corners. */
  .nav{gap:12px;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}
  .brand .lockup{height:24px}
  .nav .btn-nav{--cut:11px;padding:0 16px;min-height:40px;font-size:12.5px;letter-spacing:.02em}
  /* The booking link keeps its full text for assistive technology and shows its short label (data-short) on screen. */
  .btn-nav-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .nav .btn-nav::after{content:attr(data-short);font-size:inherit;transform:none}

  /* Hero: copy only and shorter. The kicker breaks at its separator, the headline scales with the screen without dominating it. */
  .hero{padding-top:calc(var(--nav-h) + 28px);padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 28px);padding-bottom:0}
  /* 256px holds "professionals who teach on camera" (237.6px) but not the line with the separator (273.6px), so the break lands at the separator. */
  .hero .kicker{margin-bottom:22px;max-width:256px;font-size:9px;letter-spacing:.2em;line-height:1.75}
  .hero .kicker::after{display:none}
  .display{font-size:clamp(44px,12.5vw,60px)}
  .hero .display{margin-bottom:22px}
  .hero .lede{margin-bottom:26px}

  /* Geometry: the background field is off, and the animated ring is one faint accent cropped into the top right
     corner, placed so no dot sits under the kicker, the headline, the paragraph, the buttons, or the strip. */
  .hero-geo{display:none}
  /* The ring is positioned inside the hero grid (its containing block), which starts at the hero's top padding. */
  .ring-hero{width:380px;left:auto;right:-270px;top:-184px;transform:none;opacity:.2}

  /* Calls to action: one full-width primary button, then the portal link as a quiet mono control with a trailing line. */
  .cta-row{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:22px}
  .cta-row .btn-primary{width:100%;min-height:52px;font-size:15px;padding:15px 22px}
  .cta-row .btn-ghost{width:auto;min-height:44px;padding:0 2px;border:0;background:none;clip-path:none;gap:12px;
    font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-bright)}
  .cta-row .btn-ghost::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--bronze),rgba(120,210,222,.6));transition:width .25s var(--ease)}
  .cta-row .btn-ghost:hover,.cta-row .btn-ghost:active{border:0;background:none;color:var(--paper);transform:none}
  .cta-row .btn-ghost:hover::after{width:38px}
  .cta-row .btn-ghost:focus-visible{box-shadow:none;outline:2px solid var(--accent);outline-offset:4px;color:var(--paper)}

  /* Signal, voice, brief: one quiet line under a hairline, the connectors sharing the leftover width. */
  .flow-strip{flex-wrap:nowrap;align-items:center;font-size:9.5px;letter-spacing:.2em;padding-top:16px;border-top:1px solid rgba(185,135,91,.14)}
  .flow-strip li{flex:0 0 auto;gap:8px;white-space:nowrap}
  .flow-strip li+li{flex:1 1 auto}
  .flow-strip li+li::before{flex:1 1 auto;width:auto;min-width:14px;margin:0 12px}

  /* Into the portal: the heading follows the strip closely and the panel peeks in under it. */
  .demo{padding-top:26px}
  .demo-head{margin-bottom:16px}
  .demo-head .kicker{margin-bottom:12px;font-size:9.5px;letter-spacing:.22em}
  .demo-head .display-2{font-size:clamp(28px,8vw,40px)}
  .stage-cap{margin-top:14px}

  /* Portal presentation: the phone hardware (island, rounded shell, double bezel) belongs to the wide layouts.
     Here the same portal, with the same screens, is a chamfered panel; the screen only loses the island clearance. */
  .phone{border-radius:4px;border-color:rgba(185,135,91,.42);box-shadow:none;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
  .phone::after{content:"";position:absolute;z-index:7;right:-4px;top:8px;width:26px;height:1px;background:rgba(185,135,91,.6);transform:rotate(45deg);pointer-events:none}
  .phone .island{display:none}
  .screen{padding-top:calc(var(--pw)*.065)}

  /* Type sizes for the sections farther down the page; their layouts are unchanged in this pass. */
  .display-2{font-size:clamp(32px,9vw,44px)}
  .display-3{font-size:clamp(27px,7.5vw,34px)}
  .lede,.sub,.how-step p,.founder-copy p{font-size:16px}
  .kicker{font-size:10px;letter-spacing:.28em}
  .how-step h3{font-size:clamp(26px,7vw,32px)}
  .tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .tabs [role="tab"]{white-space:normal;text-align:center;padding:10px 8px;font-size:9.5px;letter-spacing:.16em;line-height:1.4}
  .v-facts>div{grid-template-columns:1fr;gap:8px}
  .v-card{min-height:0}
  .book .display{font-size:clamp(38px,11vw,56px)}
  .btn-large{width:100%;font-size:15px;padding:17px 22px}
  .foot-meta{letter-spacing:.1em;font-size:9px}
}

/* Very small screens (320px class): use more of the width and let the phone type scale with it. */
@media (max-width:340px){
  :root{--pw-dock:90vw;--tap:40px}
}

/* ---------- reduced motion: the page is finished without movement ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .nav,.js .reveal,.js .rise{opacity:1;transform:none}
  .js .ring.draw .dot,.js .ring .dot{opacity:1;transform:none}
  .js .phone.assemble .ln{opacity:1;transform:none;pointer-events:auto}
  .ring-current,.scroll-cue span::after,.spine-current,.grain{display:none}
  .p-card .trace .live,.p-card .trace .now,.shape-col::after,.shape-step .chk{opacity:1;transform:none;stroke-dashoffset:0}
  .shape-col::after{opacity:.7}
}
html.reduce-motion .js .reveal,html.reduce-motion.js .reveal,html.reduce-motion.js .rise,html.reduce-motion.js .nav{opacity:1;transform:none}
html.reduce-motion.js .ring .dot,html.reduce-motion.js .phone.assemble .ln{opacity:1;transform:none;animation:none;pointer-events:auto}
html.reduce-motion .ring-current,html.reduce-motion .spine-current,html.reduce-motion .grain{display:none}
html.reduce-motion .ps{transition:none}

.hero-phone-label-cleanup{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Complete the cut corner with a diagonal that meets the existing border. */
.glyph-brief{--edge-cut:10px}
.ps-card{--edge-cut:1.4em}
.ps-opt{--edge-cut:.8em}
.ps-script,.ps-review{--edge-cut:1em}
.glyph-brief,.ps-card,.ps-opt,.ps-script,.ps-review{position:relative}
.glyph-brief::after,.ps-card::after,.ps-opt::after,.ps-script::after,.ps-review::after{
  content:"";position:absolute;pointer-events:none;right:-1px;top:calc(var(--edge-cut) - 1px);
  width:calc(var(--edge-cut) * 1.414214);height:0;border-top:2px solid;border-color:inherit;
  transform-origin:100% 0;transform:rotate(45deg)
}

/* Place the desktop sections and phone comfortably inside an anchor landing. */
@media (min-width:1001px){
  #how{min-height:88svh;padding-bottom:88px}
  #demo{padding-top:72px;padding-bottom:96px}
  .demo-grid{min-height:0}
  .demo-stage{height:auto;min-height:0;padding:0 0 32px;top:48px}
  #verticals{padding-top:72px;padding-bottom:88px}
  #details,#book{padding-top:calc(clamp(80px,12vh,150px) + 24px)}
  #verticals .sec-head{margin-bottom:32px}
  #verticals .tabs{margin-bottom:28px}
}

/* Full-bleed backgrounds; centered reading columns below the full-width hero. */
@media (min-width:1001px){
  main > section:not(.hero) > .wrap,.foot > .wrap{width:100%;max-width:1520px;padding-inline:48px}
  main > #demo > .wrap{max-width:1640px}
}

/* Larger desktop reading text; retain the existing display headings and phone proportions. */
@media (min-width:1001px){
  .lede,.sub,.how-step p,.demo-includes,.v-facts dd,.v-topics li,.question-list details p,.personal-service p,.foot-line{font-size:22px}
  .g-title,.personal-service h3{font-size:23px}
  .g-text,.v-card .hook,.v-card .script-preview{font-size:20px}
  .v-card .script-preview{-webkit-line-clamp:unset;display:block;overflow:visible}
  .kicker,.rail-label,.step-num,.tabs [role="tab"],.v-facts dt,.card-label,.tlabel,.note,.industry-route,.back-to-demo,.book-url,.foot-meta{font-size:14px}
  .tabs [role="tab"]{letter-spacing:.16em}
  .pill,.rail-btn,.stage-cap{font-size:12px}
  .btn:not(.rail-btn){font-size:19px}
  .phone .ps-script p,.phone .ps-opt,.phone .ps-field .v,.phone .ps-rate .rq{font-size:19px;line-height:1.55}
  .phone .ps-hook{font-size:18px}
  .phone .ps-topic,.phone .ps-card.lead .ps-topic,.phone .ps-h{font-size:28px;line-height:1.1}
  .phone .ps-label,.phone .ps-tag,.phone .ps-back,.phone .ps-open,.phone .ps-hint,.phone .ps-meta,.phone .ps-review .rv-title,.phone .ps-review .flags,.phone .ps-learn{font-size:12px}
  .phone .pill{font-size:12px;letter-spacing:.04em;white-space:normal}
  .phone .ps-sec-head,.phone .ps-nav,.phone .ps-review .rv-head,.phone .ps-card-head,.phone .ps-meta{flex-wrap:wrap}
  .phone .ps-sec-hint{font-size:12px;white-space:normal}
  .phone .ps-body{overflow:hidden}
  .phone .ps-foot-bar{flex-shrink:0}
  .phone .ps-btn{font-size:16px;white-space:normal;line-height:1.2;text-align:center}
}

/* The demo is a stationary reader: page content, never scroll inside the device. */
.phone .ps-body{position:relative;overflow:hidden}
.phone .ps-page{position:absolute;inset:0;overflow:hidden;outline:none}
.phone .ps-page[hidden]{display:none}
.phone .ps-page > *{margin-bottom:12px}
.phone .ps-page > .ps-card{margin-bottom:6px}
.phone .ps-pagination{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:44px;border-top:1px solid rgba(185,135,91,.2);margin-top:8px}
.phone .ps-pagination button{min-height:44px;font-size:15px;color:var(--accent);text-align:left}
.phone .ps-pagination button:last-child{text-align:right}
.phone .ps-pagination button:disabled{visibility:hidden}
.phone .ps-pagination span{font:12px var(--mono);color:var(--bronze-bright)}
.phone .ps{transition:none;transform:none}
.phone .ps-title{font-size:38px;line-height:1;margin:10px 0}
.phone .ps-tabs{margin-bottom:22px}
.phone .ps-pill{display:none}
.phone .ps-card{padding:8px 15px}
.phone .ps-acts{padding-top:4px;line-height:1}
.phone .ps-stars-static{font-size:17px;line-height:1}
.phone .ps-open{line-height:18px}
.phone .ps-card{display:flex;flex-direction:column}
.phone .ps-card-open{display:flex;flex-direction:column;flex:1;width:100%;text-align:left;color:inherit;padding:0}
.phone .ps-card-open .ps-open{position:absolute;right:15px;bottom:16px}
.phone .ps-card-head{width:100%}
.phone .ps-save{min-height:32px;margin-right:72px;padding:4px 8px;font:12px var(--mono);color:var(--accent);border:1px solid rgba(120,210,222,.24);border-radius:3px}
.phone .ps-save[aria-pressed="true"]{color:var(--bronze-bright);border-color:var(--bronze)}
.phone .ps-page.cards-fill:not([hidden]){display:flex;flex-direction:column;gap:10px}
.phone .ps[data-pages="1"] > .ps-pagination{display:none}
.phone .ps-page.cards-fill > *{flex:none;margin:0}
.phone .ps-page.cards-fill > .ps-card{flex:1 0 auto;margin:0}
.phone .ps-page.cards-fill > .ps-title{margin-bottom:4px}
.phone .ps-help,.phone .ps-empty p{font-size:15px;line-height:1.45;color:#B4AEA7}
.phone .ps-post-form{display:grid;gap:10px}
.phone .ps-post-form label{font-size:14px;line-height:1.4;color:var(--paper)}
.phone .ps-post-form input,.phone .ps-post-form textarea{width:100%;min-width:0;background:#101314;border:1px solid rgba(185,135,91,.4);border-radius:4px;padding:10px;color:var(--paper);font:16px/1.4 var(--sans)}
.phone .ps-post-form textarea{resize:none;min-height:72px}
.phone .ps-post-form .ps-btn{margin-top:4px;min-height:44px;justify-content:center}
.phone .ps-post-notice{padding:10px;border:1px solid rgba(120,210,222,.35);color:var(--accent);font-size:14px;line-height:1.4}
.phone .ps-submitted{padding-block:10px;border-top:1px solid rgba(185,135,91,.2);font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.phone .ps-submitted p{margin:0}
.phone .ps-submitted span:not(.ps-label){display:block;margin-top:6px;color:#B4AEA7}
.phone .ps-tabs button:focus-visible,.phone .ps-save:focus-visible,.phone .ps-card-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.phone .ps-script{padding:0;border:0;clip-path:none;background:none}
.phone .ps-script::after{display:none}
.phone .ps-script p{font-size:18px;line-height:1.5}
.phone .ps-opt,.phone .ps-field .v{font-size:18px;line-height:1.45}
.phone .ps-script .close{color:var(--accent)}
.phone .ps-script .open{color:var(--paper)}
.phone .ps-tag{white-space:normal}
.demo-stage{position:relative;top:auto}
#demo{overflow-anchor:none}

@media (min-width:1001px){
  #how{min-height:0;padding-block:80px 96px}
  #demo{--phone-height:min(880px,calc(100svh - 60px));--pw-dock:calc(var(--phone-height) / 2.05);padding-block:24px 64px}
  .demo-grid{grid-template-columns:minmax(0,1fr) minmax(460px,.85fr);column-gap:48px}
  .demo-head{align-self:end;margin-bottom:18px;padding-top:12px}
  .demo-head .kicker{margin-bottom:18px}
  .demo-controls{align-self:start}
  .demo-controls .note{margin-top:0}
  .demo-includes{margin-block:18px 24px;gap:5px}
  .guide-step{padding-block:14px}
  .g-text{font-size:18px;line-height:1.4}
  .industry-route{margin-top:20px}
  .demo-stage{position:relative;top:auto;display:flex;flex-direction:column;padding:0;gap:12px}
  .demo-stage .phone-dock,.demo-stage .phone{width:var(--pw-dock);height:var(--phone-height);min-height:0;aspect-ratio:1/2.05}
  .demo-stage .phone{border-radius:48px;will-change:auto}
  .demo-stage .screen{padding:52px 24px 20px}
  .demo-ctl{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;margin:0;width:var(--pw-dock)}
  .demo-ctl .rail-btn{flex:1;width:auto;min-height:42px;padding:8px;font-size:12px}
  .demo-ctl .rb-ico{display:none}
  .stage-cap{position:static;margin:0;order:2}
  .phone .ps-topic,.phone .ps-card.lead .ps-topic{font-size:25px;line-height:1.08}
  .phone .ps-card-head{margin-bottom:4px}
  .phone .ps-card .pill{padding:3px 8px}
  .phone .ps-bar{padding-bottom:6px}
  .phone .ps-client{font-size:19px;padding:7px 0}
  .phone .ps-meta{font-size:11px;letter-spacing:.08em}
  .phone .ps-hint{font-size:11px}
  .phone .ps-h{font-size:28px}
  .phone .ps-script p,.phone .ps-opt,.phone .ps-field .v{font-size:19px;line-height:1.45}
  #verticals{padding-block:64px 80px}
  .v-panel{grid-template-columns:minmax(0,1fr) minmax(360px,.64fr);gap:clamp(40px,6vw,100px)}
  .v-card-wrap{width:100%;max-width:500px;justify-self:end}
  .v-card{width:100%;min-width:0;min-height:690px;aspect-ratio:auto;padding:32px}
  .v-card .card-top{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:24px}
  .v-card .card-section+.card-section{margin-top:26px;padding-top:24px}
  .v-card .acts{margin-top:auto;padding-top:24px}
  #details{padding-block:80px}
  .question-list{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:72px;border-top:0;align-items:start}
  .question-list details{border-top:1px solid rgba(185,135,91,.24)}
  .question-list summary{font-size:30px}
}
@media (max-width:1000px){
  .phone .ps-label,.phone .ps-review .rv-title,.phone .ps-review .flags,.phone .ps-learn{font-size:11px}
  .phone .ps-topic,.phone .ps-card.lead .ps-topic{font-size:23px}
  .phone .ps-btn{font-size:14px}
  .phone .ps-sec-head,.phone .ps-nav,.phone .ps-review .rv-head{flex-wrap:wrap}
  .phone .ps-sec-hint{font-size:11px;white-space:normal}
  .v-card-wrap{width:100%;max-width:500px;justify-self:center}
}
/* Compact overview spacing on shorter screens; retain the tall device and reader type. */
@media (max-height:820px) and (min-width:1001px), (max-width:1000px){
  .demo-stage .screen{padding:44px 18px 18px}
  .phone .ps-title{font-size:32px}
  .phone .ps-tabs{margin-bottom:16px}
  .phone .ps-tabs button{font-size:12px}
  .phone .ps-card{padding:6px 10px}
  .phone .ps-card .ps-topic,.phone .ps-card.lead .ps-topic{font-size:21px;line-height:1.08;margin-bottom:.2em}
  .phone .ps-card-head{flex-wrap:nowrap;padding-right:0;gap:5px}
  .phone .ps-card .pill{font-size:9px;padding:3px 5px;letter-spacing:.02em}
  .phone .ps-index{font-size:20px;white-space:nowrap}
  .phone .ps-index span{font-size:8px;letter-spacing:.06em}
  .phone .ps-stars-static{font-size:14px;letter-spacing:.08em}
  .phone .ps-save{font-size:11px;margin-right:62px}
  .phone .ps-card-open .ps-open{right:10px;font-size:11px}
  .phone .ps-meta{font-size:10px;letter-spacing:.05em}
  .phone .ps-page > .ps-title{margin:0 0 8px}
  .phone .ps-page > .ps-meta{margin-bottom:8px}
  .phone .ps-page.cards-fill{gap:6px}
}

/* ==== artwork.css ==== */
/* Full accepted image, intact; selective warm-metal color grade below. */
:root{--nav-h:0px;--grot:Inter,system-ui,sans-serif}
.grain,.accepted-artwork .nav,.accepted-artwork .spine{display:none}
.accepted-artwork .hero{position:relative;display:block;margin:0;padding:0;min-height:0;height:auto;overflow:visible;background:none}
.accepted-artwork .hero-copy,.accepted-artwork .hero .scroll-cue{display:none}
.accepted-artwork .hero-art{position:relative;inset:auto;width:min(100%,calc(100svh * 5056 / 3392));height:auto;margin:0 auto;padding:0;overflow:visible;pointer-events:none}
.accepted-artwork .hero-art::before,.accepted-artwork .hero-art::after{display:none;content:none}
.accepted-artwork .hero-art img{position:static;display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;transform:none;filter:none;opacity:1;clip-path:none;mask-image:none;-webkit-mask-image:none}
/* Keep the existing interactive portal in its separate section below the image. */
.accepted-artwork #phone{transform:none!important}

#ring-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:normal}
.artwork-links{position:absolute;inset:0;pointer-events:none}
.artwork-links a{position:absolute;display:block;pointer-events:auto;border-radius:2px}
.artwork-links a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.artwork-links a:focus-visible{outline:2px solid #0ff7fb;outline-offset:3px;background:rgb(15 247 251 / .06)}
.motion-toggle{display:none;margin:8px auto 16px;padding:8px 12px;background:#0b0b0d;border:1px solid #333;color:#aebaba;font:11px Inter,Arial,sans-serif;border-radius:4px;cursor:pointer}
.motion-toggle:focus-visible{outline:2px solid #0ff7fb;outline-offset:3px}

/* A restrained gold tint on warm copper pixels only; full-resolution source is unchanged. */
.accepted-artwork .hero-art img{filter:url(#venzor-soft-gold)}

.header-correction{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.header-correction a{pointer-events:auto}
.header-correction a:focus-visible{outline:2px solid #0ff7fb}

/* Local ring attenuation is below the motion and all header/button corrections. */
#ring-soften{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Draw a continuous chamfer on action controls throughout the scrolling site. */
.accepted-artwork .btn,.accepted-artwork .ps-btn,.accepted-artwork .chooser [role="radio"],.accepted-artwork .tabs [role="tab"]{--plain-cut:12px;position:relative;clip-path:polygon(0 0,calc(100% - var(--plain-cut)) 0,100% var(--plain-cut),100% 100%,0 100%)}
.accepted-artwork .btn::before,.accepted-artwork .ps-btn::before,.accepted-artwork .chooser [role="radio"]::before,.accepted-artwork .tabs [role="tab"]::before{content:"";position:absolute;pointer-events:none;inset:-1px;width:auto;height:auto;background:currentColor;clip-path:polygon(calc(100% - var(--plain-cut)) 0,100% var(--plain-cut),100% calc(var(--plain-cut) + 1.8px),calc(100% - var(--plain-cut) - 1.8px) 0);opacity:.85}

/* Upright original-style demo phone with a restrained bronze border and black face. */
.accepted-artwork .phone-dock{transform:none}
.accepted-artwork #phone{border:2px solid #b99a76;border-radius:calc(var(--pw-dock) * .145);clip-path:none;background:#000;box-shadow:0 0 0 5px #06070a,0 0 0 6px #b99a766b,0 32px 70px #0009;overflow:hidden}
.accepted-artwork #phone .screen{inset:0;background:#000}
.accepted-artwork #phone::after{content:none;display:none}
/* Keep the desktop control rail within the viewport. */
@media(min-width:1001px) and (max-width:1300px){.accepted-artwork .demo-ctl{margin-left:12px}.accepted-artwork .rail-btn{width:82px}}


/* Remove the baked bottom three-step strip and its border; blend the scene into the page just above it. */
.accepted-artwork .hero-art{-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 88.4%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 88.4%,transparent 100%)}

/* Keep the original scene fade on its existing layers; the subtle repair can continue below it. */
.accepted-artwork .hero-art{-webkit-mask-image:none;mask-image:none}
.accepted-artwork .hero-art > picture{display:contents}
.accepted-artwork .hero-art > img,.accepted-artwork .hero-art > picture > img,.accepted-artwork .hero-art > #ring-soften,.accepted-artwork .hero-art > #ring-light,.accepted-artwork .hero-art > .header-correction{-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 88.4%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 88.4%,transparent 100%)}
.floor-ring-repair{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Existing shading, decoded once as a lossless alpha mask instead of recalculated per visit. */
.accepted-artwork .hero-art > #ring-soften.precomputed-soften{background:#000;-webkit-mask-image:url(/demo/shared-static/e19986bb126de63fca94.webp);mask-image:url(/demo/shared-static/e19986bb126de63fca94.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-repeat:no-repeat}
/* Reveal the complete hero together; the navigation remains available while it loads.
   Keep layout space reserved and prevent the copy/buttons appearing before the phone. */
.accepted-artwork .hero-art,.accepted-artwork .hero-copy{opacity:1;transition:opacity .3s ease-out}
html.hero-loading .hero-art,html.hero-loading .hero-copy{opacity:0;pointer-events:none;transition:none}
html.hero-loading .hero-copy{visibility:hidden}
.accepted-artwork .hero-copy .rise{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.accepted-artwork .hero-art,.accepted-artwork .hero-copy{transition:none}}
/* Phone copy and actions are usable while the separate artwork loads. */
@media(max-width:1000px){html.hero-loading .hero-copy{opacity:1;visibility:visible;pointer-events:auto;transition:none}}

/* Full browser background; size the artwork by both available width and height. */
@media(min-width:1001px){
  .accepted-artwork .hero-art{width:min(100%,calc(100svh * 5056 / 3392));margin-inline:auto}
  .accepted-artwork .hero{width:100%;min-height:100svh;background:#090a0d}
}
.hero-phone-copy{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;font-family:var(--mono)}
.hero-ui-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
.hero-ui-body{font-family:Inter,Arial,sans-serif}

/* Wide desktop: lay out lettering and navigation independently of the fitted artwork. */
.opening-nav,.opening-lettering{display:none}
@media(min-width:1001px) and (min-aspect-ratio:3/2){
  .accepted-artwork .hero{height:100svh;min-height:0;overflow:hidden}
  .accepted-artwork .hero-art{width:min(100%,calc(100svh * 5056 / 3392));margin:0 auto;top:auto;mask-image:none;-webkit-mask-image:none}
  .embedded-header,.embedded-lettering,.accepted-artwork .artwork-links{display:none}
  .opening-nav{position:absolute;z-index:3;top:0;left:0;width:100%;padding:clamp(20px,3.4svh,38px) 7.9%;display:flex;align-items:center;gap:clamp(50px,12vw,220px)}
  .opening-logo{display:block;width:clamp(185px,15vw,260px);flex-shrink:0}
  .opening-logo img{display:block;width:100%;height:auto}
  .opening-menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:28px;white-space:nowrap}
  .opening-menu a{font-family:Inter,Arial,sans-serif;font-size:clamp(12px,1vw,17px);letter-spacing:.12em;color:#d9d9db;text-decoration:none}
  .opening-menu a+a{border-left:1px solid #0ff7fb80;padding-left:28px}
  .opening-menu a:hover{color:#fff}
  .opening-nav a:focus-visible{outline:2px solid #0ff7fb;outline-offset:6px}
  .opening-lettering{display:block;position:absolute;z-index:2;left:7.9%;top:calc(46% - 20px);transform:translateY(-50%);width:min(39.1vw,71.4svh);height:auto;overflow:visible;pointer-events:none}
  html.hero-loading .opening-lettering{opacity:0}
}

/* ==== r4.css ==== */
/* R4 local preview. The original artwork.css and source asset remain untouched. */
.hero-phone-copy{inset:0 auto auto 0;width:360px;height:690px;transform-origin:0 0;will-change:transform}
.accepted-artwork .hero-copy .btn{border:1px solid #b99a76;color:#ddc5a6;background:rgba(185,154,118,.09)}
.accepted-artwork .hero-copy .btn::before{background:#b99a76;opacity:1}
.accepted-artwork .hero-copy .btn::after{display:none}
.accepted-artwork .hero-copy .btn:hover{border-color:#ddc5a6;background:rgba(185,154,118,.18);color:#f1e8dc}
.accepted-artwork .hero-copy .btn:focus-visible{box-shadow:inset 0 0 0 2px #ddc5a6}
.hero-phone-link{position:absolute;left:59%;top:18%;width:24%;height:69%;pointer-events:auto;clip-path:polygon(22% 0,100% 0,78% 100%,0 100%);z-index:3}
.opening-book{margin-left:auto;font:14px/1.2 Inter,Arial,sans-serif;color:#ddc5a6;border:1px solid #927451;padding:13px 17px;white-space:nowrap}
#mobile-menu-toggle,#mobile-menu{display:none}
.accepted-artwork .hero-copy{display:block;position:absolute;z-index:3;left:7.9%;top:64%;width:min(37vw,590px);pointer-events:auto}
.hero-copy .kicker,.hero-copy h1,.hero-copy .flow-strip{display:none}
.hero-copy .lede{font:20px/1.55 Inter,Arial,sans-serif;color:#c5c1bd;margin:0 0 24px;text-align:center}
.hero-copy .cta-row{gap:14px}
.hero-copy .btn{font-size:13px;min-height:46px;padding:12px 18px}
.setup-line{font:20px/1.65 var(--sans);max-width:1000px;border-top:1px solid #b9875b38;margin:36px 0 0;padding-top:26px;color:#d3c8bc}
.demo-heading{max-width:900px;margin-bottom:36px}
.showcase-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.85fr);gap:64px;align-items:start}
.showcase-fields{padding-top:32px;max-width:650px}
.showcase-fields .tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 32px}
.showcase-fields .tabs button{min-height:56px;padding:14px 16px;font:15px/1.35 var(--sans);text-transform:none;letter-spacing:0;text-align:left;border:1px solid #65513e;background:#101115;color:#e0d7cc}
.showcase-fields .tabs button[aria-selected="true"]{border-color:#78d2de;background:#142025;color:#abedf1}
.v-audience{font-size:22px;line-height:1.6}
.demo-notice{font:16px/1.6 var(--sans);color:#a8a29c;margin:24px 0}
.demo-stage{display:block;width:100%;position:static;grid-area:auto;grid-column:2;grid-row:1}
.phone-dock{margin-inline:auto;position:relative}
.phone{position:relative!important;inset:auto!important;flex-shrink:0}
.phone .ps-preview{font:15px/1.4 var(--sans);color:#aaa49e;margin-top:8px;display:block}
.phone .ps-feedback-state{font:11px/1.4 var(--mono);color:#a29b91}
.phone .ps-card-head .pill{display:none}
.phone .ps-save{min-height:36px;margin-right:74px}
.phone .ps-acts{align-items:center}
.phone .ps-topic,.phone .ps-card.lead .ps-topic{font-size:25px;line-height:1.13}
.phone .ps-client{font-family:var(--sans);font-size:16px}
.phone .ps[data-screen="brief"]{padding:0}
.phone .ps-views{min-height:0;position:relative;flex:1}
.phone .ps{overflow:hidden}
.phone .reader-heading{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;flex-shrink:0}
.reader-heading>div{flex:1;min-width:0}
.reader-heading h3{font:500 25px/1.12 var(--serif);margin:6px 0 0;color:#eee6da}
.reader-done{font:15px/1.2 var(--sans);padding:10px;min-height:44px;color:#96e5eb;border:1px solid #427078;border-radius:4px;flex-shrink:0}
.reader-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;flex-shrink:0;margin-bottom:10px}
.reader-sections button{min-height:44px;padding:6px;font:12px/1.2 var(--sans);color:#bab1a5;border:1px solid #49423a;border-radius:3px;background:#111214}
.reader-sections button[aria-pressed="true"]{background:#173033;color:#abedf1;border-color:#79cbd3}
.reader-sections button:focus-visible,.reader-done:focus-visible{outline:2px solid #9ee9ef;outline-offset:2px}
.reader-section-label{font:13px/1.4 var(--mono);color:#cfb28e;margin-bottom:10px;flex-shrink:0}
.phone .ps-script p{font:18px/1.55 var(--sans);margin:0}
.phone .ps-label{font:11px/1.4 var(--mono);margin-bottom:5px}
.phone .ps-opt{font-size:18px;line-height:1.45;min-height:44px;padding:12px 20px 12px 12px}
.phone .o-num{font-size:11px}
.phone .o-text{font-size:18px;line-height:1.4}
.display-sample{border:1px solid #8d7356;padding:18px;background:#121316;color:#f2e6d5}
.display-sample p{font:500 29px/1.25 var(--serif);margin:0}
.phone .ps-rate{display:block}
.phone .ps-stars{display:flex;justify-content:space-between;margin:18px 0}
.phone .ps-star{font-size:32px;width:44px;height:44px}
.phone .rq{font-size:20px}
.phone .ps-learn{font-size:15px}
.phone .ps-help{font:15px/1.45 var(--sans)}
.phone .ps-pagination{margin:6px 0 0}
.included-section{padding:70px 0;border-top:1px solid #b9875b25}
.included-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.included-layout h2{font-size:clamp(36px,3.5vw,56px)}
.included-layout .demo-includes{margin:0;font-size:20px;line-height:1.6;gap:12px}
.personal-service p{font-size:20px;line-height:1.65}
#mobile-reader{padding:0;border:0}
@media(min-width:1001px){
  .hero-copy h1{display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
  #demo{--phone-height:min(880px,calc(100svh - 60px));--pw-dock:calc(var(--phone-height) / 2.05);padding:48px 0 80px;scroll-margin-top:-32px}
  #demo>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.85fr);column-gap:64px}
  .demo-heading{grid-column:1;grid-row:1;align-self:end}
  .showcase-layout{display:contents}
  .showcase-fields{grid-column:1;grid-row:2;align-self:start;padding-top:0}
  .demo-stage{grid-column:2;grid-row:1 / span 2}
  .phone .screen{display:flex;flex-direction:column}
  .phone[data-state="brief"] .ps-bar,.phone[data-state="brief"] .ps-client{display:none}
  .phone[data-state="brief"] .screen{padding-top:48px}
  .opening-menu{gap:20px}
  .opening-menu a+a{padding-left:20px}
  .opening-menu a{font-size:13px}
}
@media(min-width:1001px) and (max-aspect-ratio:3/2){
  .opening-nav{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:center;padding:22px 6%}
  .opening-logo{width:190px}.opening-logo img{width:100%;height:auto}
  .opening-menu{display:none}
  .embedded-header,.artwork-links{display:none}
  .accepted-artwork .hero-copy{top:66%;left:7%;width:37%}
  .hero-copy .lede{font-size:18px}
}
@media(max-width:1000px){
  :root{--nav-h:0px}
  /* Chrome on iPhone lays the page out under its own toolbar and reports that height as the top safe-area inset; Safari reports 0 here, so nothing moves there. */
  .accepted-artwork .hero{display:flex;flex-direction:column;background:#090a0d;overflow:hidden;min-height:0;padding-top:env(safe-area-inset-top,0px)}
  .opening-nav{display:flex;position:relative;z-index:5;align-items:center;gap:12px;padding:14px 24px;width:100%;height:76px}
  .opening-logo{display:block;width:126px;margin-right:auto}
  .opening-logo img{display:block;width:100%;height:auto}
  .opening-menu{display:none}
  .opening-book{font-size:13px;margin:0;padding:12px}
  #mobile-menu-toggle{display:block;color:#dec6a5;border:1px solid #5d4e3c;padding:8px;font-size:21px;min-width:44px;min-height:44px}
  #mobile-menu:not([hidden]){position:absolute;display:grid;top:70px;right:24px;left:24px;padding:16px;background:#111215;border:1px solid #6f5b46;box-shadow:0 16px 30px #0008}
  #mobile-menu a{padding:14px;color:#e7ddd0;font:17px var(--sans)}
  .opening-lettering{display:none}
  .accepted-artwork .hero-copy{display:block;position:relative;inset:auto;order:2;width:auto;margin:12px 24px 32px}
  .hero-copy .kicker{display:block;font:11px var(--mono);letter-spacing:.16em;margin-bottom:16px}
  .hero-copy h1{display:block;font:500 clamp(38px,9.8vw,64px)/1.04 var(--serif);letter-spacing:-.025em;margin:0 0 24px}
  .hero-copy .lede{font-size:18px;line-height:1.55;margin-bottom:24px}
  .hero-copy .btn{font-size:12px;min-height:48px;padding:12px 16px}
  .hero-copy .cta-row{gap:10px}
  .accepted-artwork .hero-art{order:1;width:215%;max-width:none;margin-left:-99%;margin-top:-12%;margin-bottom:-21%;top:auto;align-self:flex-start}
  .embedded-header,.embedded-lettering,.artwork-links{display:none}
  .hero-phone-link{display:block}
  /* Small screens: the cyan pulse layer is off entirely, so the rings and spheres read bronze throughout.
     The blue glow low on the right is part of the artwork itself and stays. Wide screens keep the live layer. */
  html.accepted-artwork #ring-light{display:none}
  main>section:not(.hero)>.wrap,.foot>.wrap{padding-inline:24px;width:100%}
  #how{padding:56px 0}
  .sec-head .sub,.demo-heading .sub,.how-step p,.setup-line{font-size:18px;line-height:1.55}
  .how-steps{gap:28px}
  .how-step h3{font-size:30px}
  .setup-line{margin-top:28px;padding-top:22px}
  #demo{padding:32px 0 56px;--pw-dock:100%}
  .showcase-layout{display:block}
  .demo-heading{margin-bottom:28px}
  .demo-heading h2{font-size:40px}
  .showcase-fields{padding-top:0;max-width:none}
  .showcase-fields .tabs{gap:8px;margin:12px 0 18px}
  .showcase-fields .tabs button{font-size:15px;min-height:52px;padding:12px}
  .showcase-fields .v-audience{font-size:18px;line-height:1.55}
  .demo-notice{font-size:15px;line-height:1.5;margin:18px 0}
  #demo-reset{margin-bottom:24px;min-height:44px}
  .demo-stage{height:auto!important;min-height:0;padding:0}
  .hero-copy .cta-row{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center}
  .hero-copy .cta-row .btn{flex:0 1 auto;width:auto}
  .hero-copy .cta-row .btn-ghost{font:600 12px var(--sans);letter-spacing:0;padding:12px 16px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
  .accepted-artwork #phone,.phone-dock{width:100%;height:auto;min-height:0;aspect-ratio:auto}
  .accepted-artwork #phone{border:0!important;border-radius:0!important;box-shadow:none!important;background:none;overflow:visible}
  .phone .island,.phone .ps-bar,.phone .ps-client{display:none}
  .phone .screen{position:relative;inset:auto;display:block;padding:0!important;overflow:visible;background:none!important}
  .phone .ps-views{position:relative;height:auto;overflow:visible}
  .phone .ps{display:none!important}
  .phone[data-state="week"] .ps.week{display:flex!important;position:relative;height:auto;overflow:visible;padding:0}
  .phone .ps.week .ps-body{position:relative;height:auto;overflow:visible;flex:auto}
  .phone .ps-list{display:grid;gap:12px}
  .phone .ps-title{font-size:34px;margin:20px 0 10px}
  .phone .ps-meta{font-size:12px;margin-bottom:16px}
  .phone .ps-card{padding:18px;margin:0;min-height:195px}
  .phone .ps-card-open{min-height:125px}
  .phone .ps-topic,.phone .ps-card.lead .ps-topic{font-size:27px}
  .phone .ps-preview{font-size:16px;line-height:1.5;margin-top:10px}
  .phone .ps-acts{margin-top:12px}
  .phone .ps-tabs{margin-bottom:0}
  .phone .ps-tabs button{font-size:15px;min-height:48px}
  .phone .ps-card .ps-open{font-size:13px;bottom:25px;right:18px}
  .phone .ps-save{min-height:44px;font-size:13px;padding:8px 12px}
  .phone .ps-feedback-state{font-size:12px}
  .phone .ps-post-form{gap:14px}
  .phone .ps-post-form label,.phone .ps-help,.phone .ps-empty p{font-size:17px}
  .phone .ps-post-form input,.phone .ps-post-form textarea{font-size:18px;min-height:48px}
  .included-section{padding:48px 0}
  .included-layout{grid-template-columns:1fr;gap:28px}
  .included-layout .demo-includes,.personal-service p{font-size:18px}
  .question-list summary{font-size:25px;line-height:1.25;min-height:56px}
  .question-list p{font-size:18px;line-height:1.6}
  #book{padding:56px 0}
  .book .display{font-size:43px}
  .book .lede{font-size:18px;line-height:1.55}
  .reader-open{overflow:hidden}
  #mobile-reader[open]{display:flex;position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;background:#0b0c0f;color:#eee6da;padding:env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px);overflow:hidden}
  #mobile-reader::backdrop{background:#090a0d}
  #mobile-reader #phone{height:100%;width:100%;display:flex;flex-direction:column}
  #mobile-reader .screen{height:100%;display:flex;flex-direction:column}
  #mobile-reader .ps-views{flex:1;min-height:0;height:100%;overflow:hidden}
  #mobile-reader .ps.brief{display:flex!important;position:absolute;inset:0;flex-direction:column;padding:16px 0 6px;overflow:hidden}
  #mobile-reader .ps-body{position:relative;flex:1;min-height:0;overflow:hidden}
  #mobile-reader .reader-heading h3{font-size:24px;line-height:1.15}
  #mobile-reader .reader-heading .ps-label{font-size:11px}
  #mobile-reader .reader-heading{gap:12px}
  #mobile-reader .reader-sections{grid-template-columns:repeat(3,minmax(0,1fr))}
  #mobile-reader .reader-sections button{font-size:12px}
  #mobile-reader .reader-section-label{font-size:13px;margin-bottom:10px}
  #mobile-reader .ps-script p,#mobile-reader .o-text{font-size:19px;line-height:1.5}
  #mobile-reader .ps-help{font-size:16px;line-height:1.5}
  #mobile-reader .ps-page{position:absolute;inset:0;overflow:hidden}
  #mobile-reader .ps-pagination{display:grid!important;min-height:48px}
  #mobile-reader .ps-pagination button{min-height:48px;font-size:16px}
  #mobile-reader .display-sample p{font-size:29px}
}
@media(max-width:1000px) and (max-height:500px){
  #mobile-reader[open]{padding-inline:20px}
  #mobile-reader .ps.brief{padding-top:8px}
  #mobile-reader .reader-heading{margin-bottom:6px;align-items:center}
  #mobile-reader .reader-heading h3{font:500 20px/1.2 var(--serif);margin:2px 0 0}
  #mobile-reader .reader-sections{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:6px}
  #mobile-reader .reader-sections button{min-height:44px;font-size:11px;padding:4px}
  #mobile-reader .reader-section-label{margin-bottom:6px;font-size:11px}
  #mobile-reader .ps-script p,#mobile-reader .o-text{font-size:18px;line-height:1.4}
  #mobile-reader .ps-page>*{margin-bottom:8px}
  #mobile-reader .display-sample{padding:10px}
  #mobile-reader .display-sample p{font-size:26px}
}

/* Phone-only adjustment: keep the header anchored and lift the content below it. */
@media(max-width:600px){
  .accepted-artwork .hero-art{margin-top:calc(-12% - 12px)}
  .accepted-artwork .hero-copy h1{font-size:clamp(36px,12.25vw,70px);margin-bottom:48px;transform:translateX(-6px)}
  .accepted-artwork .hero-copy .cta-row .btn{font-size:13px;font-weight:400;letter-spacing:0;min-height:48px;padding:12px 18px;border-width:1px;--plain-cut:10px}
  .accepted-artwork .hero-copy .lede,.accepted-artwork .sec-head .sub,.accepted-artwork .how-step p,.accepted-artwork .question-list p,.accepted-artwork .book .lede{font-size:16px;line-height:1.55}
  .accepted-artwork .sec-head .display-2,.accepted-artwork .demo-heading h2{font-size:32px;line-height:1.08}
  .accepted-artwork .how-step h3{font-size:26px;line-height:1.15}
  .accepted-artwork .question-list summary{font-size:22px}
  .accepted-artwork .book .display{font-size:34px;line-height:1.08}
  .accepted-artwork .book .btn{width:auto;min-height:44px;padding:11px 18px;font-size:13px;font-weight:400;letter-spacing:0;--plain-cut:10px}
  .accepted-artwork #book .book-url{font-size:12px;line-height:1.5;letter-spacing:.06em;margin-top:16px}
  #mobile-fields{scroll-margin-top:24px}
  #mobile-menu-toggle{border:0;background:transparent;padding:0;width:44px;height:50px;font-size:30px;line-height:1;transform:translateY(-3px)}
}

/* ==== version-two-wide.css ==== */
/* Selected Version Two: original phone/rings, independent website copy.
   Keep the original assets and earlier presentation layers recoverable. */
.hero-phone-copy,
.embedded-header,
.embedded-lettering,
.artwork-links { display: none !important; }

/* Existing cyan light layer: masked off the original phone and lettering. */
.accepted-artwork #ring-light { display: block; }

#who { scroll-margin-top: 32px; }
.hero-phone-link:focus-visible { outline: 2px solid #9ee9ef; outline-offset: -5px; }
.accepted-artwork .hero-copy .btn { text-transform: none; }
.accepted-artwork .hero-copy .btn-primary { color: var(--accent); }
/* Booking chamfer follows its bronze frame independently of the blue label. */
.accepted-artwork .book .btn-primary::before { background: var(--bronze); opacity: 1; }

@media (max-width: 1000px) {
  /* Keep the kicker below the platform rather than on its final ring. */
  .accepted-artwork .hero-copy { margin-top: 40px; }
  .accepted-artwork .hero-copy .btn {
    font-size: 14.4px;
    padding: 14.4px 19.2px;
    min-height: 57.6px;
    border-width: 1.2px;
    --plain-cut: 14.4px;
  }
}

@media (min-width: 1001px) {
  .accepted-artwork .hero {
    --hero-height: max(760px, 100svh);
    height: var(--hero-height);
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: #090a0d;
  }
  .accepted-artwork .hero-art {
    position: absolute;
    left: auto;
    right: 0;
    top: calc((var(--hero-height) - 54.663vw) / 2);
    width: 81.48441%; /* Original artwork width × 1.05; midpoint of the approved sizes. */
    height: auto;
    margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 19%, #000 37%);
    mask-image: linear-gradient(to right, transparent 19%, #000 37%);
  }
  .opening-nav {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    z-index: 5;
    width: 100%;
    padding: clamp(24px, 3.5svh, 42px) 7.2917%;
  }
  .opening-logo { display: block; width: clamp(165px, 12.5vw, 260px); }
  .opening-logo img { display: block; width: 100%; height: auto; }
  .opening-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.46vw, 28px);
    white-space: nowrap;
  }
  .opening-menu a {
    font: clamp(11px, .65vw, 15px)/1.4 Inter, Arial, sans-serif;
    letter-spacing: .12em;
    color: #d9d9db;
    text-decoration: none;
    padding-block: 12px;
  }
  .opening-menu a + a { border-left: 1px solid #0ff7fb80; padding-left: clamp(16px, 1.46vw, 28px); }
  .opening-menu a:hover { color: #fff; }
  .opening-nav a:focus-visible { outline: 2px solid #9ee9ef; outline-offset: 5px; }
  .accepted-artwork .hero-copy {
    position: absolute;
    inset: 30% auto auto 7.2917%;
    width: 38.28125%;
    max-width: none;
    margin: 0;
    z-index: 3;
  }
  .accepted-artwork .opening-lettering {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    overflow: hidden;
  }
  .hero-copy .lede {
    font: clamp(18px, 1.0417vw, 22px)/1.55 Inter, Arial, sans-serif;
    color: #c5c1bd;
    margin: 27px 0 30px;
    max-width: 680px;
  }
  .hero-copy .cta-row { display: flex; flex-wrap: wrap; gap: 16px; }
  .accepted-artwork .hero-copy .btn {
    font: 600 16.8px/1.3 Inter, Arial, sans-serif;
    padding: 18px 28.8px;
    min-height: 60px;
    border-width: 1.2px;
    --plain-cut: 14.4px;
    letter-spacing: 0;
  }
}

/* Only desktop Safari: avoid an oversized opening section in tall windows.
   Chrome keeps its existing viewport-height spacing. */
@media (min-width: 1001px) {
  /* 8 Oct 2026 (Will, from Safari): the first screen is one window tall like in Chrome, so "How it works" does not show under it. */
  html.desktop-safari.accepted-artwork .hero {
    --hero-height: max(760px, 100svh);
  }
}

/* Short, wide phone screens: keep artwork beside the copy instead of
   stretching the portrait artwork across several screenfuls. */
@media (min-width: 601px) and (max-width: 1000px) and (max-height: 500px) {
  .accepted-artwork .hero { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center; }
  .accepted-artwork .opening-nav { grid-column:1 / -1;grid-row:1; }
  .accepted-artwork .hero-copy { grid-column:1;grid-row:2;width:auto;max-width:none;margin:24px 12px 32px 24px; }
  .accepted-artwork .hero-art { grid-column:2;grid-row:2;align-self:center;width:200%;margin:-16% 0 -20% -100%; }
}

/* Preserve laptop proportions as desktop windows grow. Full-screen panels
   retain their height; type and spacing grow with the existing artwork. */
@media (min-width: 1001px) {
  .accepted-artwork { --desktop-unit: max(1px, .05555556vw); }
  html.accepted-artwork .hero { --hero-height: max(760px, 100svh); }
  html.accepted-artwork main > :is(#how, #demo, #details, #book) > .wrap,
  html.accepted-artwork .foot > .wrap { width: 100%; max-width: 1520px; padding-inline: 48px; }
}
@media (min-width: 1800px) {
  html.accepted-artwork .opening-nav { padding-left: 5.33333vw; }
  html.accepted-artwork .hero-copy { left: 5.33333vw; }
  .accepted-artwork .opening-logo { width: 12.5vw; }
  .accepted-artwork .opening-menu { gap: 1.46vw; }
  .accepted-artwork .opening-menu a { font-size: clamp(11px, .65vw, 15px); padding-block: calc(12 * var(--desktop-unit)); }
  .accepted-artwork .opening-menu a + a { padding-left: 1.46vw; }
  .accepted-artwork .hero-copy .lede {
    font-size: 1.0417vw;
    max-width: calc(680 * var(--desktop-unit));
    margin: calc(27 * var(--desktop-unit)) 0 calc(30 * var(--desktop-unit));
  }
  .accepted-artwork .hero-copy .cta-row { gap: calc(16 * var(--desktop-unit)); }
  html.accepted-artwork .hero-copy .btn {
    font-size: calc(16 * var(--desktop-unit));
    padding: calc(15 * var(--desktop-unit)) calc(25 * var(--desktop-unit));
    min-height: calc(54 * var(--desktop-unit));
    --plain-cut: calc(14.4 * var(--desktop-unit));
  }
  .accepted-artwork #how { min-height: 100svh; display: flex; align-items: center; padding-block: 8svh; }
  html.accepted-artwork main > :is(#how, #demo, #details, #book) > .wrap,
  html.accepted-artwork .foot > .wrap { max-width: 84.44444vw; padding-inline: 2.66667vw; }
  .accepted-artwork #how .sec-head { max-width: 50vw; margin-bottom: 2.66667vw; }
  .accepted-artwork #how .display-2 { font-size: 3.55556vw; }
  .accepted-artwork #how .sub, .accepted-artwork #how .how-step p { font-size: 1.22222vw; }
  .accepted-artwork #how .how-step h3 { font-size: 1.77778vw; margin-bottom: 1vw; }
  .accepted-artwork #how .kicker { font-size: .72222vw; }
  .accepted-artwork #how .step-num { font-size: .77778vw; }
  .accepted-artwork #how .how-steps { gap: 2.66667vw; }
}

/* ==== copy-review.css ==== */
/* Approved page spacing, typography and portal presentation. */
#how { padding-bottom:48px; }
#how .sec-head { max-width:900px;margin-bottom:48px; }
#demo { padding-top:48px; }
.demo-heading .kicker { margin-bottom:22px; }
.demo-heading h2 { margin-bottom:24px; }
.demo-heading .sub { margin-top:0; }
.demo-heading { margin-bottom:40px; }
#how .kicker, #demo .kicker, #details .kicker, #book .kicker { font-size:13px; }
@media (min-width:1001px) {
  #how { min-height:100svh; }
  #details { min-height:100svh;display:flex;align-items:center; }
  .how-step h3 { line-height:1.15; }
}
@media (max-width:1000px) {
  #how .kicker, #demo .kicker, #details .kicker, #book .kicker { font-size:16px; }
  #how { padding-bottom:32px; }
  #demo { padding-top:32px; }
  #how .sec-head { margin-bottom:36px; }
  .demo-heading { margin-bottom:32px; }
}

/* Portal review: consistent cards, full script text still available in the reader. */
.demo-reset-row { display:flex;justify-content:center;margin-top:20px; }
.demo-reset-row #demo-reset { margin:0; }
/* Rounded bronze edge with restrained reflections and a darker sidewall. */
@media (min-width:1001px) {
  /* Keep the shorter height and widen the selected phone frame by exactly 3%. */
  #demo { --phone-height:min(840px,calc(100svh - 100px));--pw-dock:calc(min(880px,calc(100svh - 60px)) / 2.05 * 1.03); }
  /* Keep reset reachable inside the black phone header, above the logo baseline. */
  .demo-reset-row { position:absolute;top:28px;right:24px;z-index:7;margin:0; }
  .accepted-artwork .demo-reset-row #demo-reset {
    min-height:44px;min-width:88px;padding:0 4px;border:0;border-radius:0;
    background:transparent;color:#fff;font:400 12px/1.2 Inter,Arial,sans-serif;
    letter-spacing:0;text-transform:none;clip-path:none;box-shadow:none;
  }
  .accepted-artwork .demo-reset-row #demo-reset::before { content:none; }
  .accepted-artwork .demo-reset-row #demo-reset:hover { text-decoration:underline; }
  .accepted-artwork .demo-reset-row #demo-reset:focus-visible { outline:1px solid #fff;outline-offset:2px; }
  .accepted-artwork #phone-dock { isolation:isolate;transform:scale(.96);transform-origin:top center; }
  .accepted-artwork #phone-dock::before,
  .accepted-artwork #phone-dock::after { filter:brightness(.8); }
  .accepted-artwork #phone-dock::before {
    content:"";position:absolute;inset:-12px;z-index:0;pointer-events:none;
    border-radius:calc(var(--pw-dock) * .125 + 12px);
    /* Reflected light over the existing bronze material, with a dark glass edge. */
    background:linear-gradient(180deg,#fff7ed3d 0%,#fff7ed08 9%,transparent 28%,#0002 70%,#fff7ed14 100%),linear-gradient(105deg,#614738 0%,#a78970 18%,#775540 35%,#3b2b23 51%,#73513f 67%,#b4977d 82%,#694b3b 100%);
    border:1px solid #95715a;
    box-shadow:inset 1px 1px 1px #d7bfa58c,inset 3px 0 3px #bd96714d,inset -4px -2px 4px #201611b3,3px 3px 0 1px #604737,6px 6px 0 1px #171210,12px 22px 30px #0008,0 36px 70px #000b;
  }
  .accepted-artwork #phone-dock::after {
    content:"";position:absolute;right:-18px;top:25%;width:6px;height:80px;
    border-radius:3px;pointer-events:none;
    background:linear-gradient(90deg,#2b1e19 0%,#9f7963 28%,#efdbca 43%,#bd9780 54%,#54392d 76%,#241915 100%);
    border:1px solid #765342;
    box-shadow:inset 0 1px 1px #e2c9ad66,inset 0 -1px 1px #0009,1px 1px 2px #0009;
  }
  .accepted-artwork #phone {
    border:2px solid #0b0c0e;border-radius:calc(var(--pw-dock) * .125);
    box-shadow:0 0 0 1px #e6ded073,0 0 0 2px #292321,0 0 0 3px #b8a08a80,0 0 0 5px #050607;
  }
  .accepted-artwork #phone::before {
    content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
    /* A thin glass reflection follows the curved rim; the screen stays clear. */
    padding:3px;
    background:linear-gradient(125deg,#fffaf078 0%,#eee8dd24 19%,transparent 38%,transparent 62%,#f6edea38 84%,#ffffff12 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
  }
  .accepted-artwork #phone .island {
    display:none;
    top:15px;width:27%;height:29px;
    background:linear-gradient(#020304,#08090b);
    border:1px solid #26282b;box-shadow:0 1px 1px #ffffff0d,inset 0 1px 3px #000;
  }
  .accepted-artwork #phone .island::before {
    content:"";position:absolute;right:9px;top:8px;width:11px;height:11px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#3a5c71 0 9%,#12202d 20%,#090d17 50%,#020304 67%);
    box-shadow:0 0 0 1px #181b23,inset 0 0 2px #74899555;
  }
  .accepted-artwork #phone .island::after {
    content:"";position:absolute;left:15px;right:33px;top:12px;height:3px;border-radius:3px;
    background:repeating-linear-gradient(90deg,#1c1e21 0 1px,#08090b 1px 3px);
  }
}
.phone .ps-page.cards-fill > .ps-card { flex:1 1 0;min-height:0; }
.phone .ps-card .ps-topic { margin-bottom:6px; }
.phone .ps-preview { margin-top:4px;margin-bottom:8px; }
.phone .ps-card-head { margin-bottom:6px; }
.phone .ps-card .ps-acts { margin-top:auto; }
@media (min-width:1001px) {
  .phone .ps-card .ps-topic, .phone .ps-card.lead .ps-topic { font-size:23px; }
  .phone .ps-card .ps-preview { font-size:14px;margin-bottom:4px; }
  .phone .ps-card-head { margin-bottom:4px; }
}
@media (max-width:1000px) {
  .phone .ps-list { grid-auto-rows:1fr; }
  .demo-reset-row { margin-top:24px; }
}

/* Selected Higgsfield option 1: original asset under the live portal UI. */
.demo-generated-frame { display:none; }
@media (min-width:1001px) {
  .demo-generated-frame {
    display:block;position:absolute;inset:-12px;width:calc(100% + 24px);max-width:none;height:calc(100% + 24px);
    z-index:0;pointer-events:none;overflow:hidden;
  }
  .accepted-artwork #phone-dock::before,
  .accepted-artwork #phone-dock::after,
  .accepted-artwork #phone::before { content:none; }
  .accepted-artwork #phone { border:2px solid transparent;background:transparent;box-shadow:none; }
  .accepted-artwork #phone .screen { background:transparent; }
}

/* ==== portal-examples.css ==== */
/* Approved portal master displayed as real mobile UI inside both selected frames. */
.hero-portal-projection { position:absolute;inset:0;z-index:2;pointer-events:none; }
.hero-portal-plane { width:1907px;height:1280px;transform-origin:0 0;perspective:1000px;perspective-origin:0 0;transform:scale(var(--hero-portal-scale,0)); }
.hero-portal-screen { position:absolute;left:0;top:0;width:390px;height:940px;border:0;border-radius:62px 58px 52px 48px;overflow:hidden;background:#000;transform-origin:0 0;transform:matrix3d(0.726882753,-0.079578083,0.117009226,0,-0.193146816,0.848218299,0.070018169,0,0,0,1,0,1254,220,0,1); }
.hero-portal-screen iframe { display:block;width:100%;height:100%;border:0;pointer-events:none;
 /* The board's last hook wraps onto a second line at 932px of the 940px screen, so its top edge peeked past the bezel.
    The screen content fades out just under the first line (929px); the screen's own black shows beneath. Both views
    share this 390x940 frame, so the same clip serves desktop and mobile. */
 -webkit-mask-image:linear-gradient(to bottom,#000 929px,transparent 934px);mask-image:linear-gradient(to bottom,#000 929px,transparent 934px); }
.accepted-artwork #phone .approved-portal-demo { position:absolute;inset:20px 14px 18px;width:calc(100% - 28px);height:calc(100% - 38px);border:0;background:#000;border-radius:32px;max-width:none; }
@media(max-width:1000px){
 .accepted-artwork #phone .approved-portal-demo { inset:0;width:100%;height:100%;border-radius:0; }
 .accepted-artwork #phone { min-height:740px; }
}

/* The reader owns its screen; return to the board to use Reset demo. */
.portal-reading .demo-reset-row { display:none; }

/* One continuous native glass bevel follows the exact screen silhouette.
   No raster fragments or masked text pass over the live portal. */
.hero-glass-tone,.hero-phone-label-cleanup{display:none}
.hero-portal-screen .approved-screen-glass{
 position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
 box-shadow:inset 0 1px 1px rgba(216,201,184,.38),
 inset 0 10px 8px -7px rgba(220,216,210,.5),
 inset 4px 0 6px -4px rgba(239,226,209,.24),
 inset -4px 0 6px -4px rgba(218,204,188,.24),
 inset 0 -3px 4px -3px rgba(218,204,188,.18);
}

/* Pass 89 (1 Oct): the screen projection is now a true 3D transform under a 1000px perspective on the plane. Safari ignores the
   m14/m24 perspective terms of a flat matrix3d, which drew the live screen as a parallelogram and exposed the painted screen beside it. */

/* ==== mobile-demo.css ==== */
/* Mobile demo presentation (1000px and below).
   Closed: the demo iframe sits inside a portrait phone silhouette as a non-interactive preview with one Open button.
   Open: the dock becomes a full-viewport view with one compact control row: field dropdown · Reset · Close.
   Reader: the row carries Back to scripts · Close. Nothing else is fixed, so the demo scrolls to its bottom edge.
   Wide screens: the wrapper is transparent to layout and every control here stays hidden. */
.demo-fs-top,.demo-open,.demo-fs-back,.demo-fs-backdrop,.demo-notice-mobile,.demo-fields-mobile,.how-copy-mobile{display:none}
@media (min-width:1001px){
  .demo-screen{display:contents}
  .demo-fs-menu{display:none}
}
@media (max-width:1000px){
  /* Ambient motion is off on small screens: keyframe animations on the page rest at their finished state.
     (The ring canvas keeps one deliberately frozen frame; the demo frames keep their one-shot dot sweep.) */
  *,*::before,*::after{animation:none!important}
  .js .rise,.js .reveal,.js .ring .dot{opacity:1;transform:none}
  .ring-current,.scroll-cue span::after{display:none}

  /* Section order: heading, the six fields as compact text, a bronze divider, the short sample note, then the phone.
     Field choice lives inside the open demo. */
  .demo-heading{margin-bottom:20px}
  .demo-heading h2{margin-bottom:0}
  .demo-heading .sub{display:none}
  .demo-fields-mobile{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;margin:16px 0 0;font:15px/1.5 Inter,Arial,sans-serif;color:#d3c8bc}
  .demo-fields-mobile-label{flex:0 0 100%;font:10.5px/1.4 var(--mono,'JetBrains Mono',monospace);letter-spacing:.16em;text-transform:uppercase;color:#bca17f}
  .demo-fields-mobile-list{display:flex;flex-wrap:wrap;gap:4px 0}
  .demo-fields-mobile-list span{white-space:nowrap}
  .demo-fields-mobile-list span:not(:last-child)::after{content:"\00b7";margin:0 8px;color:#b9875b}
  .showcase-fields #tabs-label,.showcase-fields .tabs{display:none}
  .showcase-fields{padding-top:0}
  /* Small-screen wording for steps two and three; the wide layout keeps its paragraphs. */
  .how-step p.how-copy-mobile{display:block}
  .how-step p.how-copy-mobile+p,.how-step p:has(+p.how-copy-mobile){display:none}
  .showcase-fields .demo-notice{display:none}
  .showcase-fields .demo-notice.demo-notice-mobile{display:block;margin:0 0 24px;padding-top:20px;border-top:1px solid rgba(185,135,91,.32)}
  .accepted-artwork .demo-stage .phone-dock{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center}
  /* One visible gap between sections, 74px, measured content edge to content edge:
     hero buttons to "How it works" (22 + 16 + 36), last "How it works" text to "Explore the portal" (37 + 37),
     preview phone to "Questions" (30 + 44). Spacing inside sections is untouched. */
  .accepted-artwork .hero-copy{margin-bottom:16px}
  #how{padding-top:36px;padding-bottom:37px}
  #demo{padding-top:37px;padding-bottom:30px}
  #details{padding-top:44px}
  /* The ghost button's cut corner and its diagonal border line follow the same cut size (the primary button already does). */
  .accepted-artwork .hero-copy .cta-row .btn-ghost{clip-path:polygon(0 0,calc(100% - var(--plain-cut,12px)) 0,100% var(--plain-cut,12px),100% 100%,0 100%)}
  .accepted-artwork .demo-stage .phone-dock .demo-reset-row{display:none}

  /* Closed: a 9:19 portrait silhouette holding the same demo at its 390px layout, uniformly scaled, not interactive.
     276px wide (8% under the earlier 300px) so the phone and its Open button sit comfortably inside a browser viewport with bars showing. */
  .demo-screen{position:relative;box-sizing:border-box;width:min(100% - 24px,276px);aspect-ratio:9/19;margin:0 auto;border-radius:40px;border:2px solid #b99a76;background:#000;box-shadow:0 0 0 5px #06070a,0 0 0 6px #b99a766b,0 28px 60px #0009;overflow:hidden;isolation:isolate}
  .accepted-artwork .demo-stage .demo-screen #phone{position:absolute!important;inset:0!important;width:100%;height:100%;min-height:0;border:0!important;border-radius:0!important;box-shadow:none!important;background:#000;overflow:hidden}
  .accepted-artwork .demo-screen #phone .approved-portal-demo{inset:0;width:390px;height:calc(100% / var(--demo-preview-scale,1));transform:scale(var(--demo-preview-scale,1));transform-origin:0 0;pointer-events:none;border-radius:0}
  .demo-open{display:flex;position:absolute;inset:0;z-index:4;align-items:flex-end;justify-content:center;padding:0 16px 30px;margin:0;border:0;border-radius:inherit;background:linear-gradient(to top,rgba(0,0,0,.88) 0,rgba(0,0,0,.55) 22%,transparent 42%);color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .demo-open span{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:#78d2de;color:#08121a;font:600 14px/1 Inter,Arial,sans-serif;letter-spacing:.02em;box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 1px rgba(120,210,222,.35);transition:transform .15s ease}
  .demo-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .demo-open:focus-visible{outline:3px solid #9ee9ef;outline-offset:-3px}
  .demo-open:active span{transform:scale(.97)}

  /* Match the desktop phone frame and frosted invitation, without its QR code. */
  html:not(.demo-fullscreen).accepted-artwork .demo-stage .phone-dock{width:min(100% - 24px,276px)}
  html:not(.demo-fullscreen) .demo-generated-frame{display:block;position:absolute;inset:-8px;width:calc(100% + 16px);max-width:none;height:calc(100% + 16px);z-index:0;pointer-events:none;overflow:hidden}
  html:not(.demo-fullscreen) .demo-screen{width:100%;aspect-ratio:1/2.05;border:10px solid transparent;border-radius:28px;background:transparent;box-shadow:none}
  .demo-open{align-items:center;padding:16px;background:rgba(18,20,23,.16);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .demo-open span{padding:17px 20px;border:1px solid #c5a17b;border-radius:5px;background:linear-gradient(145deg,#46392e,#211d19);box-shadow:0 8px 28px #0007,inset 0 1px 0 #e4c29a30;color:#36cfe8;font:600 16px/1.2 Inter,Arial,sans-serif;letter-spacing:0}
  .demo-open svg{display:none}
  .demo-open span::after{content:'→';margin-left:4px}

  /* Open state */
  html.demo-fullscreen body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  html.demo-fullscreen.accepted-artwork .demo-stage .phone-dock{position:fixed;inset:0;z-index:2147483000;width:100%;height:100vh;height:100dvh;margin:0;padding:0;background:#0b0c0f;display:flex;flex-direction:column;align-items:stretch;overscroll-behavior:contain}
  /* One compact control row: field dropdown on the left, Close demo on the right (Back to scripts replaces the field while reading). */
  html.demo-fullscreen .demo-fs-top{display:flex;flex:none;position:relative;z-index:6;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 4px) 10px 4px 12px;background:#0b0c0f;border-bottom:1px solid rgba(185,135,91,.35)}
  .demo-fs-close,.demo-fs-back{flex:none;min-height:44px;padding:0 14px;border:1px solid #65513e;border-radius:4px;background:#101115;color:#e0d7cc;font:500 14px/1 Inter,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
  .demo-fs-close{border-color:#78d2de;background:#142025;color:#abedf1;font-weight:600}
  .demo-fs-close span{margin-left:6px}
  .demo-fs-back{margin-right:auto;color:#ddc5a6;border-color:#8a6d4e}
  .demo-fs-close:focus-visible,.demo-fs-back:focus-visible,.demo-fs-field-btn:focus-visible{outline:2px solid #9ee9ef;outline-offset:2px}
  /* Field dropdown: a small "Your field" label over the selected name (long names wrap to two lines rather than clipping); opens a list of all six. */
  .demo-fs-field{flex:1 1 auto;min-width:0;position:relative}
  .demo-fs-field-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:5px 10px 5px 12px;border:1px solid #8a6d4e;border-radius:4px;background:#101115;color:#f1e8dc;text-align:left;-webkit-tap-highlight-color:transparent}
  .demo-fs-field-btn[aria-expanded="true"]{border-color:#78d2de;background:#142025}
  .demo-fs-field-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .demo-fs-field-kicker{font:10px/1.1 var(--mono,'JetBrains Mono',monospace);letter-spacing:.14em;text-transform:uppercase;color:#bca17f}
  .demo-fs-field-name{font:500 14px/1.2 Inter,Arial,sans-serif;color:#f1e8dc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .demo-fs-field-btn[aria-expanded="true"] .demo-fs-field-name{color:#abedf1}
  .demo-fs-caret{flex:none;width:12px;height:8px;fill:none;stroke:#bca17f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
  .demo-fs-field-btn[aria-expanded="true"] .demo-fs-caret{transform:rotate(180deg);stroke:#78d2de}
  .demo-fs-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:100%;width:max-content;max-width:calc(100vw - 24px);display:grid;gap:2px;padding:6px;background:#101115;border:1px solid #8a6d4e;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .demo-fs-menu[hidden]{display:none}
  .demo-fs-menu [role="radio"]{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px 0 12px;border:0;border-radius:3px;background:transparent;color:#e0d7cc;font:500 15px/1.2 Inter,Arial,sans-serif;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .demo-fs-menu [role="radio"]::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:1px solid #65513e;background:transparent}
  .demo-fs-menu [role="radio"][aria-checked="true"]{background:#142025;color:#abedf1}
  .demo-fs-menu [role="radio"][aria-checked="true"]::before{border-color:#78d2de;background:radial-gradient(circle,#78d2de 0 44%,transparent 50%)}
  .demo-fs-menu [role="radio"]:focus-visible{outline:2px solid #9ee9ef;outline-offset:-2px}
  html.demo-fullscreen .demo-fs-backdrop{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.5)}
  html.demo-fullscreen .demo-fs-backdrop[hidden]{display:none}
  html.demo-fullscreen .demo-screen{flex:1 1 auto;min-height:0;width:100%;max-width:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#000;padding-bottom:env(safe-area-inset-bottom,0px)}
  html.demo-fullscreen.accepted-artwork .demo-screen #phone .approved-portal-demo{width:100%;height:100%;transform:none;pointer-events:auto}
  html.demo-fullscreen .demo-open,html.demo-fullscreen .demo-generated-frame{display:none}
  /* Reader mode (the demo marks the dock with .portal-reading while a script is open): Back to scripts · Close demo only. */
  html.demo-fullscreen #phone-dock.portal-reading .demo-fs-field{display:none}
  html.demo-fullscreen #phone-dock.portal-reading .demo-fs-back{display:inline-flex;align-items:center;gap:8px}
}

/* ==== desktop-demo.css ==== */
/* Wide layout (1001px and up): the invitation above the interactive phone and the phone's 12px nudge toward the field tabs.
   The invitation is placed above the phone frame without moving the phone; the section's own spacing is unchanged. */
.demo-invite{display:none}
.desktop-demo-gate,.desktop-demo-close{display:none}
@media (min-width:1001px){
  .desktop-demo-ready .desktop-demo-gate{display:flex;position:absolute;inset:20px 14px 18px;z-index:8;border-radius:32px;align-items:center;justify-content:center;background:rgba(18,20,23,.09);backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}
  .desktop-demo-ready:not(.desktop-demo-entered) .approved-portal-demo{pointer-events:none}
  .desktop-demo-enter{padding:17px 23px;border:1px solid #c5a17b;border-radius:5px;background:linear-gradient(145deg,#46392e,#211d19);box-shadow:0 8px 28px #0007,inset 0 1px 0 #e4c29a30;color:#f1e8dc;font:500 16px/1.2 Inter,Arial,sans-serif;cursor:pointer}
  .desktop-demo-enter span{margin-left:14px;color:#78d2de}
  .desktop-demo-enter:focus-visible,.desktop-demo-close:focus-visible{outline:2px solid #78d2de;outline-offset:4px}
  .desktop-demo-entered .desktop-demo-gate{display:none}
  html.desktop-demo-active{overflow:hidden;scrollbar-gutter:stable}
  html.desktop-demo-active body{overflow:hidden}
  .accepted-artwork #phone-dock.desktop-demo-entered{transform:translateX(8px) scale(1)}
  .desktop-demo-close:not([hidden]){display:block;position:fixed;top:20px;right:24px;z-index:2147483001;min-height:44px;padding:10px 18px;border:1px solid #78d2de;border-radius:5px;background:#142025;color:#abedf1;font:600 14px/1.2 Inter,Arial,sans-serif;cursor:pointer;box-shadow:0 6px 24px #0007}
  .desktop-demo-preview #demo-reset{display:none}
  .desktop-demo-preview .desktop-demo-close:not([hidden]){display:block;position:absolute;top:28px;right:34px;z-index:9;min-height:44px;padding:10px 18px;border:1px solid #78d2de;border-radius:5px;background:#142025;color:#36cfe8;font:500 14px/1.2 Inter,Arial,sans-serif;cursor:pointer;box-shadow:0 6px 24px #0007}
}
@media (min-width:1001px){
  .demo-stage{position:relative}
  .demo-invite{display:block;position:absolute;left:0;right:0;bottom:calc(100% + 24px);text-align:center;transform:translateX(-24px);pointer-events:none}
  .demo-invite-lead{margin:0;font:600 16px/1.3 Inter,Arial,sans-serif;letter-spacing:.01em;color:#f1e8dc}
  .demo-invite-lead span{margin-left:4px;color:#78d2de}
  .demo-invite-sub{margin:4px 0 0;font:13px/1.4 Inter,Arial,sans-serif;color:#a7a29c}
  /* Phone nudged 24px left toward the field tabs (12px in pass 11, 12px more in pass 12); size and vertical position unchanged. */
  .accepted-artwork #phone-dock{transform:translateX(-24px) scale(.96)}
  /* Match the breathing room between How It Works and the portal; keep question rows unchanged. */
  #details{min-height:0;display:block;padding-block:clamp(128px,calc(30svh - 40px),440px) clamp(143px,calc(30svh - 174px),306px)}
  #details .sec-head{margin-bottom:40px}
}

/* Keep the desktop portal size while letting its content determine section height. */
@media (min-width:1001px){
  #demo{min-height:0;scroll-margin-top:0;--phone-height:min(960px,calc(100svh - 48px));--pw-dock:calc(var(--phone-height) / 2.05 * 1.03);padding-block:24px 40px}
  #demo .demo-heading .display-2{font-size:clamp(48px,4.4vw,76px)}
  #demo .demo-heading .sub{font-size:clamp(20px,1.5vw,26px)}
  #demo .tabs [role="tab"]{min-height:68px;font-size:17px}
  #demo .demo-notice{font-size:14px}
  .accepted-artwork #phone-dock:not(.desktop-demo-entered){transform:translateX(8px) scale(1)}
}

/* One desktop type scale for the two opening sections. */
@media (min-width:1001px){
  .accepted-artwork :is(#how,#demo) .kicker{font-size:max(13px,.72222vw)}
  .accepted-artwork :is(#how,#demo) .display-2{font-size:max(64px,3.55556vw)}
  .accepted-artwork :is(#how,#demo) .sub{font-size:max(22px,1.22222vw)}
}

/* Requested hero paragraph refinement; headline artwork stays unchanged. */
@media(min-width:1001px){
 html.accepted-artwork .hero-copy .lede{
  font-size:clamp(17px,.9vw,20px);
  line-height:1.6;
  text-wrap:pretty;
  max-width:88%;
  margin:max(24px,1.33333vw) auto max(44px,2.44444vw)
 }
 html.accepted-artwork .hero-copy .cta-row{width:88%;margin-left:max(16px,.88889vw);justify-content:center}
}

/* Requested smaller supporting copy and slightly larger hero buttons. */
@media(min-width:1001px){
 html.accepted-artwork #how .sub,
 html.accepted-artwork #how .how-step p{font-size:max(20px,1.11111vw)}
 html.accepted-artwork .hero-copy .btn{font-size:max(17px,.94444vw);padding:max(17px,.94444vw) max(28px,1.55556vw);min-height:max(58px,3.22222vw)}
}

/* Small desktop logo reduction and optical paragraph alignment. */
@media(min-width:1001px){
 .accepted-artwork .opening-logo{width:11.5vw}
 html.accepted-artwork .hero-copy .lede{position:relative;left:-8px}
}

/* 5 Oct 2026 (Will): no Exit demo button. Nothing sits outside or over the phone; the opened demo simply stays open. */
.desktop-demo-close,.desktop-demo-close:not([hidden]),.desktop-demo-preview .desktop-demo-close:not([hidden]){display:none !important}

/* ==== inline-head-a.css ==== */
/* was inline <style> at index.html line 80 (30 Sep 2026) */
@media(min-width:1001px){
html.accepted-artwork .opening-nav{padding-left:24px}
.accepted-artwork .hero-copy{left:96px}
@media(min-width:1001px){.accepted-artwork .opening-lettering{margin:-20px 0 -28px -24px}}
/* 30 Sep (Will, matching his screenshot): "Stop wondering" sits closer under "Ready to record" (16px closer on a 14in MacBook, in proportion on larger screens). */
@media(min-width:1001px){html.accepted-artwork .hero .hero-copy .lede{margin-top:calc(min(47vw,87svh) * 0.2113 + 22px)}}
.accepted-artwork .hero-copy .btn{font-weight:500;font-size:16px;letter-spacing:.01em;padding:15px 25px;min-height:54px;border-width:1px;border-color:rgba(185,154,118,.62);background:rgba(185,154,118,.055)}
.accepted-artwork .hero-copy .btn::before{background:rgba(185,154,118,.62)}
.accepted-artwork .hero-copy .btn:hover{border-color:#ddc5a6;background:rgba(185,154,118,.14)}
.accepted-artwork .hero-copy .btn:hover::before{background:#ddc5a6}
#demo{padding-top:128px;--phone-height:min(883px,calc(92svh - 44px))}
#demo .showcase-fields{transform:scale(1.05);transform-origin:left center}
.desktop-demo-ready .desktop-demo-gate{background:rgba(18,20,23,.16);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.desktop-demo-enter{padding:20px 28px;font-size:20px;font-weight:600;color:#36CFE8;animation:website-demo-breathe 2.8s ease-in-out infinite!important}
@media(prefers-reduced-motion:reduce){.desktop-demo-enter{animation:none!important}}
.desktop-demo-enter span{color:inherit}
.desktop-demo-ready .desktop-demo-gate{flex-direction:column;justify-content:center;gap:clamp(48px,10svh,96px);padding:36px 16px}
.desktop-demo-qr{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;text-align:center;color:#f4eee7;font:500 15px/1.5 Inter,Arial,sans-serif}
.desktop-demo-qr img{display:block;width:168px;height:168px;box-sizing:content-box;border:4px solid transparent;border-radius:8px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#e4c29a 0%,#b9875b 22%,#71503a 48%,#d8af86 73%,#a56e47 100%) border-box;box-shadow:0 0 0 1px #c5a17b,0 8px 28px #0007}
.desktop-demo-qr figcaption{max-width:210px;color:#36CFE8}
@keyframes website-demo-breathe{0%,100%{opacity:1;color:#36CFE8;text-shadow:0 0 6px rgba(54,207,232,.5)}50%{opacity:1;color:#FFFFFF;text-shadow:0 0 6px rgba(255,255,255,.8),0 0 16px rgba(54,207,232,1),0 0 30px rgba(54,207,232,.8)}}
}
/* This standalone preview explicitly demonstrates the requested motion. */

/* was inline <style> at index.html line 105 (30 Sep 2026) */
#book .book-url{margin-top:30px;font-size:18px;line-height:1.6}#book .book-url a{color:#36CFE8;text-decoration:underline;text-underline-offset:5px}

/* was inline <style> at index.html line 106 (30 Sep 2026) */
/* Match the existing fade against the solid hero background without a live mask
   around the entire artwork and animated embedded phone. */
@media(min-width:1001px){
.accepted-artwork .hero-art{mask-image:none;-webkit-mask-image:none;isolation:isolate}
.accepted-artwork .hero-art::before{content:"";display:block;position:absolute;inset:0;z-index:4;background:linear-gradient(to right,#090a0d 19%,transparent 37%);pointer-events:none}
}

/* ==== preview-copy.css ==== */
/* Scoped review: approved copy and closing artwork. */
#book{position:relative;overflow:hidden;isolation:isolate}
#book .ring-book{display:none}
#book .cwb-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
#book .book-inner{position:relative}
#book .lede{background:radial-gradient(ellipse,rgba(9,10,13,.8),transparent 75%)}

/* Keep the current closing presentation beneath the restored layout. */
@media (min-width:1001px){
  #book .lede{font-size:18px;line-height:1.65}
  #book .kicker{font-size:11px}
  #book .display{font-size:64px;line-height:1.05}
  #book .btn{font-size:16px}
  #book .book-url{font-size:15px}
}

/* ==== closing-wave-a.css ==== */
/* Closing + footer: Option A sound meter (separate preview, 24 September 2026, round 2).
   Only the closing background, the email link's position and the footer change.
   The kicker, headline, paragraph and call button keep every rule from the
   site's own stylesheets. */

/* One scene: the canvas starts at the top of the closing section and runs to the
   bottom of the footer (height set by closing-wave-a.js), so there is no seam. */
#book{overflow:visible;background:transparent}
#book>.wave-canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
#book .book-inner{z-index:1}
#book .lede{background:none}   /* the continuous clearing replaces the old patch behind the paragraph */

/* Footer: no rule and no separate panel; the waveform continues behind it and
   turns to frosted glass, fading in over the footer's top so there is no edge. */
.foot.foot-v2{position:relative;z-index:1;border-top:0;background:transparent;padding:88px 0 26px;overflow:hidden}
.foot.foot-v2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(11,11,13,.24);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 150px);mask-image:linear-gradient(to bottom,transparent,#000 150px)}
/* The brand and the links sit in the page's own corners, not inside the content width. */
html.accepted-artwork .foot.foot-v2>.wrap,.foot.foot-v2>.wrap{width:100%;max-width:none;padding-inline:32px}
.foot-v2-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;column-gap:40px;row-gap:28px}
.foot-brand{grid-column:1}.foot-nav{grid-column:2}.foot-side{grid-column:3}

.foot-brand{display:grid;justify-items:start}
.foot-brand-logo{display:block;width:150px;line-height:0}
.foot-brand-logo img{display:block;width:100%;height:auto}
.foot-v2 .foot-line{margin:0;font-size:13px;line-height:1.6;color:#9d978f}

.foot-side{display:grid;justify-items:end;gap:14px;text-align:right}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px 34px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.foot-nav a{color:#b3ada6;text-decoration:none;transition:color .2s}
.foot-nav a:hover,.foot-nav a:focus-visible{color:#78D2DE}
/* The email link, moved from beneath the call button: same label and address, shown once, in cyan. */
.foot-nav a.foot-email{color:#36CFE8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.foot-nav a.foot-email:hover,.foot-nav a.foot-email:focus-visible{color:#8fe6f3}

.foot-v2 .foot-meta{justify-items:stretch;gap:6px;margin:0;width:300px;font-size:8.5px;letter-spacing:.1em;line-height:1.7;color:#6f6a64}
.foot-v2 .foot-meta li{text-align:justify;text-align-last:right}

/* Phones and narrow tablets: one left-aligned column; the brand stays small at the bottom left. */
@media (max-width:760px){
  .foot.foot-v2{padding:72px 0 24px}
  .foot.foot-v2::before{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 110px);mask-image:linear-gradient(to bottom,transparent,#000 110px)}
  html.accepted-artwork .foot.foot-v2>.wrap,.foot.foot-v2>.wrap{padding-inline:22px}
  .foot-v2-grid{grid-template-columns:1fr;row-gap:30px}
  .foot-brand,.foot-nav,.foot-side{grid-column:1}
  .foot-nav{order:-2;justify-content:flex-start;text-align:left;gap:14px 22px}
  .foot-nav a{padding:4px 0}
  .foot-nav a.foot-email{order:-1;flex-basis:100%;font-size:12px}
  .foot-side{order:-1;justify-items:start;text-align:left}
  .foot-v2 .foot-meta{justify-items:start;letter-spacing:.1em}
  .foot-brand-logo{width:136px}
}

/* ==== hero-column.css ==== */
/* Hero left column (Claude, 24 September 2026, Will's brief):
   one left edge shared by the logo, headline, paragraph and button; the copper
   rule beside the paragraph; paragraph 20px on a 52-character measure; 28px
   rhythm; the whole block centred on the phone; one copper button plus a quiet
   link. Wording, headline artwork, phone and everything else untouched.
   Desktop only: phones keep their existing stacked layout. */
@media (min-width:1001px){
  html.accepted-artwork .opening-nav{padding-left:48px}   /* logo nearer the page edge (Will), balancing the phone bleeding off the right */
  /* The lettering lives inside .hero-copy, so it is pinned to that box's top and the
     box itself is placed so its centre sits on the phone's centre (51% of the hero):
     lettering height plus about 234px of paragraph, gap and button. */
  html.accepted-artwork .opening-lettering{position:absolute;left:0;top:0;transform:none;width:100%}
  /* 38.27vw is the headline's existing rendered width (551px at 1440, 896px at 2341); its height is that x 200/590. */
  html.accepted-artwork .hero-copy{left:max(96px,5.33333vw);top:calc(51% - 6.487vw - 117px);width:38.27vw;text-align:left}
  html.accepted-artwork .hero-copy .lede{position:relative;left:0;margin:calc(12.973vw + 18px) 0 0;padding-left:30px;max-width:52ch;font-size:20px;line-height:1.55;color:#cfcac4;text-align:left}
  html.accepted-artwork .hero-copy .lede::before{content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:2px;background:linear-gradient(#d8af86,rgba(216,175,134,.15))}
  html.accepted-artwork .hero-copy .cta-row{display:flex;align-items:center;justify-content:flex-start;gap:28px;width:auto;margin:28px 0 0 30px}
  html.accepted-artwork .hero-copy .cta-row .btn{width:auto;font-size:16px;padding:0 26px;min-height:54px}
  html.accepted-artwork .hero-copy .cta-row{gap:14px}
  /* Second action as a quiet box (Will, 24 Sept): same shape, no fill, muted border and text. */
  /* Both buttons share one border (between the old bright and muted copper); the second reads in warm cream. */
  html.accepted-artwork .hero-copy .cta-row .btn{border:1px solid rgba(203,172,136,.78)}
  html.accepted-artwork .hero-copy .cta-row .btn::before{background:rgba(203,172,136,.78)}
  html.accepted-artwork .hero-copy .cta-row .btn-ghost{background:transparent;color:#ddc5a6}
  html.accepted-artwork .hero-copy .cta-row .btn:hover{border-color:#ddc5a6}
  html.accepted-artwork .hero-copy .cta-row .btn:hover::before{background:#ddc5a6}
  html.accepted-artwork .hero-copy .cta-row .btn-ghost:hover{background:rgba(185,154,118,.08);color:#f1e8dc}
}

/* Portal section (Will, 24 Sept): the text column was vertically centred against the
   tall phone, leaving about 100px of air above the title after "The portal" is clicked.
   Top-align it with the phone instead, with a small offset so the kicker sits level
   with the phone's screen. */
@media (min-width:1001px){
  html.accepted-artwork #demo{padding-top:104px}   /* 280px from the How it works content to the phone */
  html.accepted-artwork #demo > .wrap{grid-template-rows:auto 1fr;align-content:start}
  html.accepted-artwork #demo .demo-heading{align-self:start;padding-top:8px;margin-bottom:36px}
  html.accepted-artwork #demo .showcase-fields{align-self:start}
}

/* Section type sync + Questions on its own screen (Will, 24 Sept, ~15:30). Desktop only.
   Labels and section headings take the How it works sizes everywhere; Questions fills a
   screen with its content centred, so the closing gets its own breathing room. */
@media (min-width:1001px){
  html.accepted-artwork :is(#how,#demo,#details,#book) .kicker{font-size:max(13px,.72222vw)}
  html.accepted-artwork :is(#details,#book) h2{font-size:max(64px,3.5556vw);letter-spacing:-.03em}
  html.accepted-artwork #details{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
}

/* Uniform section rhythm (Will, 24 Sept ~16:00), desktop: How it works, the portal and
   Questions each fill one screen, and each one's label starts 120px from its top. The
   portal phone is sized to sit 120px from top and bottom, so it is centred and level
   with the text at any window height. */
@media (min-width:1001px){
  html.accepted-artwork :is(#how,#demo,#details){box-sizing:border-box;min-height:100svh;padding-top:120px;padding-bottom:80px;display:flex;flex-direction:column;justify-content:flex-start}
  html.accepted-artwork #demo{--phone-height:min(883px,calc(100svh - 240px))}
  html.accepted-artwork #demo .demo-heading{padding-top:0}
  html.accepted-artwork #how > .wrap,html.accepted-artwork #details > .wrap{margin-top:0}
}

/* Portal text block centred on the phone (Will, 24 Sept ~16:05): spacer rows above and
   below the heading + fields, phone spanning all four rows. */
@media (min-width:1001px){
  html.accepted-artwork #demo > .wrap{grid-template-rows:1fr auto auto 1fr;align-content:start}
  html.accepted-artwork #demo .demo-heading{grid-column:1;grid-row:2;align-self:end;padding-top:0;margin-bottom:36px}
  html.accepted-artwork #demo .showcase-fields{grid-column:1;grid-row:3;align-self:start}
  html.accepted-artwork #demo .demo-stage{grid-column:2;grid-row:1 / span 4}
}

/* Bigger portal phone (Will, 24 Sept ~16:20): 56px above and below, everything else to the phone. */
@media (min-width:1001px){
  html.accepted-artwork #demo{padding-top:56px;padding-bottom:56px;--phone-height:min(1100px,calc(100svh - 112px))}
}

/* Questions centred on its screen (Will, 24 Sept ~16:45). */
@media (min-width:1001px){
  html.accepted-artwork #details{justify-content:center;padding-top:80px;padding-bottom:80px}
}

/* ==== inline-head-b.css ==== */
/* was inline <style> at index.html line 117 (30 Sep 2026) */
.hero-platform-line{margin:18px 0 0;color:#cfcac4;font-size:16px;line-height:1.5}
@media(min-width:1001px){.accepted-artwork .hero-platform-line{margin-left:30px}}
.demo-kit-note{font-size:14px;line-height:1.5;color:var(--muted,#96959c);margin-top:12px}

/* was inline <style> at index.html line 122 (30 Sep 2026) */
@media(max-width:1000px){.demo-heading .sub{display:block;margin-top:18px}}

/* was inline <style> at index.html line 123 (30 Sep 2026) */
.plan-comparison{padding:100px 0;background:var(--bg);color:#ece9e3}
.plan-comparison .sec-head{margin-bottom:36px}
.plan-comparison .plan-table{width:100%;table-layout:fixed;border-collapse:collapse;font:inherit;font-size:16px;line-height:1.6;text-align:left}
.plan-comparison .plan-table th,.plan-comparison .plan-table td{padding:20px 22px;border-bottom:1px solid rgba(185,154,118,.22);vertical-align:top;overflow-wrap:break-word}
.plan-comparison .plan-table th{font-weight:500}
.plan-comparison .plan-table thead th{font-size:18px;color:#ddc5a6;border-top:1px solid rgba(185,154,118,.35)}
.plan-comparison .plan-table thead th:first-child{width:28%}
.plan-comparison .plan-divider{background:rgba(185,154,118,.055)}
.plan-comparison .plan-divider th{color:#ddc5a6}
.plan-comparison .plan-info-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid rgba(185,154,118,.5);border-radius:50%;background:transparent;color:#ddc5a6;font:inherit;cursor:pointer;vertical-align:middle}
.plan-comparison .plan-info-button:focus-visible{outline:2px solid #36cfe8;outline-offset:4px}
.plan-comparison .plan-info-text{margin:12px 0 0;font-size:14px;font-weight:400;color:#cfcac4}
.plan-comparison .plan-info-text[hidden]{display:none}
.plan-comparison .plan-note{margin-top:20px;font-size:14px;color:#96959c}
@media(min-width:1001px){.plan-comparison .sec-head{margin-bottom:24px}.plan-comparison .plan-table th,.plan-comparison .plan-table td{padding:12px 22px}.plan-comparison .plan-table thead th:nth-child(n+2){color:#36cfe8}}
@media(max-width:600px){.plan-comparison{padding:64px 0}.plan-comparison .plan-table{font-size:13px;line-height:1.55}.plan-comparison .plan-table th,.plan-comparison .plan-table td{padding:14px 8px}.plan-comparison .plan-table thead th{font-size:15px}.plan-comparison .plan-table thead th:first-child{width:30%}.plan-comparison .plan-info-button{width:30px;height:30px;margin-top:5px}.plan-comparison .plan-info-text{font-size:12px}}

/* was inline <style> at index.html line 141 (30 Sep 2026) */
.venzor-team{padding:88px 0 100px;background:var(--bg);color:#ece9e3}
.venzor-team .sec-head{max-width:900px;margin-bottom:20px}
.venzor-team .team-review-note{margin:0 0 30px;color:#96959c;font-size:14px;line-height:1.5}
.venzor-team .team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:start}
.venzor-team .team-photo-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;border:1px solid rgba(185,154,118,.3);border-radius:12px;background:linear-gradient(145deg,#1a1919,#111114);color:#96959c;font-size:13px;text-align:center;padding:16px}
.venzor-team .team-member h3{margin:18px 0 6px;font:inherit;font-size:18px;font-weight:500;line-height:1.35}
.venzor-team .team-member p{margin:0;color:#cfcac4;font-size:14px;line-height:1.5}
@media(max-width:1000px){.venzor-team .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.venzor-team .team-founder{grid-column:1/-1;max-width:220px}}
@media(max-width:600px){.venzor-team{padding:64px 0}.venzor-team .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.venzor-team .team-founder{max-width:180px}.venzor-team .team-member h3{font-size:16px}}

/* was inline <style> at index.html line 152 (30 Sep 2026) */
/* Trial: bounded desktop type and content widths from the saved September 22 source.
   Hero headline, artwork, phone sizing, copy, interactions and mobile rules are preserved. */
@media (min-width: 1001px) {
  html.accepted-artwork main > :is(#how,#demo,#details,#book) > .wrap,
  html.accepted-artwork .foot > .wrap {
    width: 100%; max-width: 1520px; padding-inline: 48px;
  }
  html.accepted-artwork main > #demo > .wrap { max-width: 1640px; }
  html.accepted-artwork :is(#how,#demo,#details,#book) .kicker { font-size: 13px; }
  html.accepted-artwork #how .display-2,
  html.accepted-artwork :is(#details,#book) h2 { font-size: clamp(36px,4.6vw,64px); }
  html.accepted-artwork #how .sub,
  html.accepted-artwork #how .how-step p { font-size: 22px; }
  html.accepted-artwork #how .how-step h3 { font-size: clamp(26px,2.2vw,32px); }
  html.accepted-artwork #how .step-num { font-size: 14px; }
  html.accepted-artwork #demo .demo-heading .display-2 { font-size: clamp(48px,4.4vw,76px); }
  html.accepted-artwork #demo .demo-heading .sub { font-size: clamp(20px,1.5vw,26px); }
}

/* ==== desktop-bounded-pass.css ==== */
/* Bounded desktop refinements for the five content sections. */
.venzor-team .team-member img.team-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 1001px) {
  /* Keep the hero copy centred after the headline artwork changes to 630:165. */
  html.accepted-artwork .hero-copy {
    max-width: none;
    top: calc(51% - 5.5vw - 117px);
    width: 42vw;
  }
  html.accepted-artwork .hero-copy .lede { margin-top: calc(15vw + 2px); }

  /* Let the three columns set this section's height at laptop and wide sizes. */
  html.accepted-artwork #how {
    min-height: 0;
    display: block;
    padding-block: clamp(88px, 6vw, 128px);
  }
  html.accepted-artwork #how .sec-head {
    max-width: 820px;
    margin-bottom: clamp(56px, 4.2vw, 80px);
  }
  html.accepted-artwork #how .how-steps { gap: clamp(30px, 2.3vw, 50px); }

  /* Match the existing desktop demo heading, including its later size override. */
  html.accepted-artwork :is(#how, #demo, #details, #plans, #team) :is(.sec-head, .demo-heading) h2.display-2 {
    font-family: var(--serif);
    font-size: clamp(48px, 4.4vw, 76px);
    font-weight: 500;
    line-height: .98;
  }

  html.accepted-artwork :is(#details, #plans, #team) .sec-head > p.sub {
    font-size: 22px;
    line-height: 1.6;
  }
  html.accepted-artwork #how .sec-head > p.sub { font-size: clamp(17px, .92vw, 20px); line-height: 1.6; max-width: 40em; }
  html.accepted-artwork #demo .demo-heading > p.sub { font-size: clamp(18px, .95vw, 22px); line-height: 1.55; }
  #demo #panel-verticals > .demo-notice:not(.demo-notice-mobile) { margin-bottom: 4px; }
  #demo #panel-verticals > .demo-kit-note { margin: 0; font-size: 14px; }

  #how .how-glyph {
    height: 56px;
    align-items: center;
    margin-bottom: 18px;
  }
  #how .how-glyph img { width: 54px; height: 54px; object-fit: contain; }
  #how .glyph-signal { width: 130px; height: auto; aspect-ratio: 3 / 1; }
  #how .glyph-brief { width: 56px; height: 51px; padding: 11px 10px; gap: 6px; }
  html.accepted-artwork #how .how-step .step-num { margin-bottom: 12px; }
  html.accepted-artwork #how .how-step h3.display-3 {
    min-height: 2.16em;
    max-width: 11.5em;
    margin-bottom: 22px;
    font-size: clamp(32px, 1.85vw, 40px);
    line-height: 1.08;
    text-wrap: balance;
  }
  html.accepted-artwork #how .sec-head h2.display-2 { font-size: clamp(40px, 3.1vw, 56px); }
  html.accepted-artwork #how .how-step h3 .how-br { display: inline; }
  html.accepted-artwork #how .how-step > p:not(.how-copy-mobile) { font-size: clamp(17px, .92vw, 20px); line-height: 1.6; max-width: 27em; }

  #details .question-list details p { font-size: 22px; line-height: 1.6; }

  #plans .sec-head { margin-bottom: 24px; }
  #plans .plan-table { width: 100%; table-layout: fixed; text-align: left; }
  #plans .plan-table th, #plans .plan-table td { padding: 12px 22px; vertical-align: top; }
  #plans .plan-table thead th:first-child { font-size: 20px; font-weight: 600; color: #ece9e3; }
  #plans .plan-table thead th:nth-child(n+2) { color: #36cfe8; }
  #plans .plan-table .plan-divider th { font-size: 18px; font-weight: 600; color: #ddc5a6; }

  #team .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #team .team-photo-placeholder, #team .team-member img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  #team .team-photo-placeholder { display: flex; }
  #team .team-member h3 { color: #36cfe8; }
  #team .team-member p { color: #cfcac4; }
}

#how .how-br { display: none; }
@media (min-width: 1001px) { html.accepted-artwork #how .how-step h3 .how-br { display: inline; } }

/* Portal section shares the same side edges as every other section. */
@media (min-width: 1001px) { html.accepted-artwork main > #demo > .wrap { max-width: 1520px; } }

/* Hero headline: natural letter shapes (no vertical stretch), set larger. */
@media (min-width: 1001px) { html.accepted-artwork .opening-lettering { width: min(47vw, 87svh); max-width: none; } }

@media (min-width: 1001px) { html.accepted-artwork #how .how-steps { padding-top: calc(clamp(56px, 4.2vw, 80px) - 6px); }
  html.accepted-artwork #how .how-step::before { top: calc(2px - clamp(56px, 4.2vw, 80px)); } }

@media (min-width: 1001px) {
  html.accepted-artwork #how { padding-top: clamp(56px, 3.6vw, 80px); min-height: 100svh; }
  #demo #panel-verticals > .demo-kit-note { font-size: 13px; color: rgb(168, 162, 156); }
}

@media (min-width: 1001px) { html.accepted-artwork :is(#how, #demo, #details, #plans, #team) :is(.sec-head, .demo-heading) h2.display-2 { font-size: clamp(40px, 3.1vw, 56px); } }

/* Hero supporting block one notch smaller. */
@media (min-width: 1001px) {
  html.accepted-artwork .hero-copy .lede { font-size: 18px; line-height: 1.55; }
  html.accepted-artwork .hero-copy .hero-platform-line { font-size: 14px; }
  html.accepted-artwork .hero-copy .cta-row .btn { font-size: 14.5px; min-height: 0; height: 48px; padding: 0 22px; }
}

/* Hero headline option A (approved 2026-09-29): lighter white line, taller orange line. */
@media (min-width: 1001px) { html.accepted-artwork .hero-copy .lede { margin-top: calc(min(47vw, 87svh) * 0.2338 + 22px); } }

/* Plan table hierarchy: row labels read as titles, values sit quieter. */
@media (min-width: 1001px) {
  #plans .plan-table thead th:nth-child(n+2) { font-size: 22px; font-weight: 500; }
  #plans .plan-table tbody tr:not(.plan-divider) th { font-size: 18px; font-weight: 500; color: #f1eee8; }
  #plans .plan-table .plan-divider th { font-size: 20px; }
}

/* Nav sits a little closer to the top. Plan table: header colour + clearer section breaks. */
@media (min-width: 1001px) {
  html.accepted-artwork .opening-nav { padding-top: clamp(12px, 2svh, 24px); padding-bottom: clamp(12px, 2svh, 24px); }
  #plans .plan-table thead th:first-child { color: #ddc5a6; }
  #plans .plan-table .plan-divider > * { border-top: 2px solid rgba(221, 197, 166, .6); padding-top: 22px; }
}

/* Round 26: portal heading breathing room, step label spacing, blue plan values. */
@media (min-width: 1001px) {
  html.accepted-artwork #demo .demo-heading { margin-bottom: 48px; }
  html.accepted-artwork #how .how-step .step-num { margin-bottom: 22px; }
}

/* Only the three Max-only differentiators are blue. */
#plans .plan-table tbody td.plan-max-highlight { color: #36cfe8; }

/* Plan table: logo cyan (the E in VENZOR). */
@media (min-width: 1001px) {
  #plans .plan-table thead th:nth-child(n+2) { color: #0ff7fb; }
}
#plans .plan-table tbody td.plan-max-highlight { color: #0ff7fb; }

/* Hero text block: same proportions and spacing, scaled down as one unit. */
@media (min-width: 1001px) { html.accepted-artwork .hero-copy { scale: .96; transform-origin: left center; } }

/* Round 32: smaller portal notes and plan table body text. */
@media (min-width: 1001px) {
  #demo #panel-verticals > .demo-notice:not(.demo-notice-mobile) { font-size: 13px; }
  #plans .plan-table tbody tr:not(.plan-divider) th { font-size: 17px; }
  #plans .plan-table tbody td { font-size: 15px; }
}

/* Portal notes sit closer to the field buttons. */
@media (min-width: 1001px) {
  html.accepted-artwork #demo .showcase-fields .tabs { margin-bottom: 18px; }
  #demo #panel-verticals > .demo-notice:not(.demo-notice-mobile) { margin-top: 0; }
}

/* Hero phone screen gets its own compositing layer for a cleaner tilted raster. */
.hero-portal-screen { will-change: transform; }

/* Section intro paragraphs match the How it works intro size. */
@media (min-width: 1001px) { html.accepted-artwork :is(#details, #plans, #team) .sec-head > p.sub { font-size: clamp(17px, .92vw, 20px); line-height: 1.6; } }

/* Hero load: the outer-ring layer sits outside .hero-art, so it showed before the artwork. Gate it the same way. */
.accepted-artwork .hero-outer-ring-source { transition: opacity .3s ease-out; }
html.hero-loading .hero-outer-ring-source { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .accepted-artwork .hero-outer-ring-source { transition: none; } }

/* Hero clean-up: black out the leftover floor-grid patch in the empty lower-left, above the ring overlay (z1), below the copy (z3). */
@media (min-width: 1001px) {
  .accepted-artwork .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to right, #090a0d 0%, #090a0d 40%, rgba(9,10,13,0) 47%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 68%);
    mask-image: linear-gradient(to bottom, transparent 58%, #000 68%);
  }
}
@media (min-width: 1001px) {
  /* Second cover for the streaks under the floor rings (below the ring tips, so the rings stay intact). */
  .accepted-artwork .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to right, #090a0d 0%, #090a0d 50%, rgba(9,10,13,0) 56%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 86%);
    mask-image: linear-gradient(to bottom, transparent 80%, #000 86%);
  }
}

/* Vector card outlines drawn over the tilted hero phone screen (see hero-card-outline.js). */
.hero-card-outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.hero-card-outline path { fill: none; stroke: #b98a5e; stroke-width: 1.2px; stroke-linejoin: round; shape-rendering: geometricPrecision; }

/* More breathing room between "Meet the people behind Venzor" and its intro paragraph. */
@media (min-width: 1001px) { html.accepted-artwork #team .sec-head h2.display-2 { margin-bottom: 34px; } }

/* One vertical rhythm for every section below the hero: sections size to their content
   (no forced full-screen heights) and share the same space above and below. */
@media (min-width: 1001px) {
  html.accepted-artwork { --section-space: clamp(88px, 9svh, 136px); }
  html.accepted-artwork main > :is(#how, #demo, #details) { min-height: 0; justify-content: flex-start; }
  html.accepted-artwork main > #how { padding-bottom: var(--section-space); }
  html.accepted-artwork main > :is(#demo, #plans, #team, #details) { padding-top: var(--section-space); padding-bottom: var(--section-space); }
}

/* Plan table: "not included" marks, quieter than the checkmarks. */
#plans .plan-table td.plan-no { color: #6f6a66; }
#plans .plan-table td.plan-no > span[aria-hidden] { font-size: .95em; }
#plans .plan-table td.plan-no .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Plan table info icons: a little smaller, with more space after the label. */
#plans .plan-comparison .plan-info-button, .plan-comparison .plan-info-button { width: 24px; height: 24px; margin-left: 12px; font-size: 14px; }

#plans .plan-table .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Launch QA pass 69 (1 Oct evening): iPad Pro portrait (1024px) gets the desktop layout, and the demo phone (553px) overflowed its
   440px stage by 85px, so the page scrolled sideways. Between 1001px and 1120px the stage is scaled to fit and the section clips.
   Normal desktops (1121px and up) are untouched. */
@media (min-width: 1001px) and (max-width: 1120px) {
  #demo { overflow-x: clip; }
  #demo-stage { transform: scale(.78); transform-origin: top left; }
}

/* 1 Oct evening (Will): "Video scripts in your voice / Ready to record" three pixels taller on desktop (2px on 1 Oct, then one more). */
@media (min-width: 1001px) {
  html.accepted-artwork .hero-copy h1 .l1, html.accepted-artwork .hero-copy h1 .l2 { font-size: calc(min(7vw, 96px) + 3px); }
}

/* 8 Oct 2026: team and questions each fill a laptop window, growing with their content.
   The opening navigation scrolls away; neighbouring full-height sections use the whole viewport. */
@media (min-width: 1001px) {
  html.accepted-artwork main > :is(#team, #details) {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/* 8 Oct 2026: centre the portal dock in the laptop viewport after an anchor jump.
   Cancel the root's 16px scroll padding; 36px includes the frame's 12px overhang and 24px clear space. */
@media (min-width: 1001px) {
  html.accepted-artwork main > #demo {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 36px;
    justify-content: center;
    scroll-margin-top: -16px;
    /* 8 Oct 2026 (Will): the phone is a little smaller, about 80 px of air above and below it. */
    --phone-height: min(1100px, calc(100vh - 160px));
    --phone-height: min(1100px, calc(100svh - 160px));
  }
  html.accepted-artwork #demo .demo-stage { height: var(--phone-height); }
}

/* ==== hero-phone-wide.css ==== */
/* Hero phone (approved version 1, 2026-09-29): phone 1.103x wide, 1.05x tall, standing on its base (anchor x=1398, y=1108 in 1907x1280 art space).
   Rings and orbs untouched; the live screen gets 5% more layout width so text keeps its natural shape. */
/* Hidden below desktop; must out-rank artwork.css's `.accepted-artwork .hero-art > img` rule. */
.accepted-artwork .hero-art > .hero-phone-wide { display: none; }
@media (min-width: 1001px) {
  .accepted-artwork .hero-art > .hero-phone-wide {
    display: block; position: absolute; z-index: 1; pointer-events: none;
    left: 58.1618%; top: 10.4375%; width: 29.8895%; height: 77.3555%;
    -webkit-mask-image: none; mask-image: none; max-width: none;
  }
  .accepted-artwork .hero-portal-screen {
    width: 409.5px;
    transform: matrix3d(0.779195346,-0.073404457,0.111437363,0,-0.202911111,0.894508221,0.070018169,0,0,0,1,0,1239.24,175.6,0,1); /* pass 89: desktop chain folded into one perspective-safe matrix */
  }
}



/* Wider screen reflows the portal: "The angle" label ends at 921px and the next line starts at 927px.
   End the screen content just after the label so no sliver of the next line shows. */
@media (min-width: 1001px) { .accepted-artwork .hero-portal-screen iframe { -webkit-mask-image: linear-gradient(to bottom, #000 922px, transparent 925px); mask-image: linear-gradient(to bottom, #000 922px, transparent 925px); } }

/* ==== mobile-pass.css ==== */
/* Phone pass (2026-09-29). Small screens only; desktop is untouched. */
@media (max-width: 1000px) {
  /* Portal: the two sample notes sit under the phone, not above it. */
  html.accepted-artwork #demo .showcase-layout { display: flex; flex-direction: column; }
  html.accepted-artwork #demo .showcase-layout > #who { order: 2; margin-top: 28px; }
  html.accepted-artwork #demo .showcase-layout > .demo-stage { order: 1; }
}

/* What you get: on phones each feature becomes a small card with a labelled Light line and Max line. */
@media (max-width: 1000px) {
  /* Notes sit close under the phone, both in the small muted style, with no divider line. */
  html.accepted-artwork #demo .showcase-layout { gap: 0; row-gap: 0; }
  html.accepted-artwork #demo .showcase-layout > #who { margin-top: 24px; }
  html.accepted-artwork #demo #panel-verticals > .demo-notice-mobile,
  html.accepted-artwork #demo #panel-verticals > .demo-kit-note {
    margin: 0; padding: 0; border: 0; font-size: 13px; line-height: 1.5; color: rgb(139, 139, 149);
  }
  html.accepted-artwork #demo #panel-verticals > .demo-kit-note { margin-top: 4px; }
  #plans .plan-table, #plans .plan-table tbody, #plans .plan-table tr, #plans .plan-table th, #plans .plan-table td { display: block; width: auto; }
  #plans .plan-table thead { display: none; }
  #plans .plan-table { border: 0; }
  #plans .plan-table tbody tr:not(.plan-divider) {
    margin: 0 0 12px; padding: 16px 16px 8px;
    border: 1px solid rgba(185, 154, 118, .26); border-radius: 12px;
    background: rgba(255, 255, 255, .018);
  }
  #plans .plan-table tbody tr:not(.plan-divider) > th {
    padding: 0 0 12px; border: 0; font-size: 17px; font-weight: 500; line-height: 1.35; color: #f1eee8;
  }
  #plans .plan-table tbody td {
    display: flex; gap: 12px; align-items: baseline;
    padding: 10px 0; border: 0; border-top: 1px solid rgba(185, 154, 118, .14);
    font-size: 15px; line-height: 1.5; color: #d9d5cf; text-align: left;
  }
  #plans .plan-table tbody td::before {
    flex: 0 0 52px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: #ddc5a6; transform: translateY(-1px);
  }
  #plans .plan-table tbody td:nth-child(2)::before { content: "Light"; }
  #plans .plan-table tbody td:nth-child(3)::before { content: "Max"; color: #0ff7fb; }
  #plans .plan-table tbody td.plan-max-highlight { color: #0ff7fb; }
  #plans .plan-table tbody td.plan-yes::after { content: "Included"; margin-left: -4px; color: #d9d5cf; }
  #plans .plan-table tbody td.plan-no { color: #8a857f; }
  #plans .plan-table tbody td.plan-no > span[aria-hidden] { margin-right: -4px; }
  #plans .plan-table tbody td.plan-no .visually-hidden {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal;
  }
  /* Section breaks ("Personal support", "Filming kit") become plain headings between the cards. */
  #plans .plan-table tbody tr.plan-divider { margin: 28px 0 12px; padding: 0; border: 0; background: none; }
  #plans .plan-table tbody tr.plan-divider > th { padding: 0; border: 0; font-size: 19px; font-weight: 600; color: #ddc5a6; }
  #plans .plan-table tbody tr.plan-divider > td { display: none; }
  #plans .plan-table .plan-info-button { width: 22px; height: 22px; margin-left: 8px; vertical-align: -3px; }
}

@media (max-width: 1000px) { #plans .plan-note { display: none; } }

/* Team titles in Venzor blue (all screen sizes). */
#team .team-member p { color: #0ff7fb; }

@media (max-width: 1000px) {
  /* Team on phones: every photo the same size; the founder sits centred on the first row. */
  #team .team-grid > .team-member:first-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
}

/* Phone hero: headline on the first screen, and a calmer text + button block. */
@media (max-width: 600px) {
  .accepted-artwork .hero-art { width: 200%; margin-left: -94.5%; margin-top: calc(-9% - 26px); margin-bottom: -11%; }
  .accepted-artwork .hero-copy { margin: 0 24px 28px; }
  .accepted-artwork .hero-copy h1 { font-size: clamp(36px, 11.6vw, 66px); line-height: 1.04; margin-top: 0; margin-bottom: 20px; transform: none; }
  /* Same hierarchy as the desktop headline: white two-line lead-in, larger orange italic line below. */
  .accepted-artwork .hero-copy h1 .l1 { display: block; font-size: 11.5vw; line-height: 1.03; color: #f4f4f3; }
  .accepted-artwork .hero-copy h1 .l2 { display: block; font-size: 13.6vw; line-height: 1.04; margin-top: 0; color: #e09665; }
  .accepted-artwork .hero-copy h1 .l1 { text-wrap: balance; }
  .accepted-artwork .hero-copy .lede { font-size: 16px; line-height: 1.6; text-align: left; color: #c5c1bd; margin: 0 0 14px; max-width: 34em; }
  .accepted-artwork .hero-copy .hero-platform-line {
    margin: 0 0 22px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.6;
    letter-spacing: .1em; text-transform: uppercase; color: #8b8b95;
  }
  .accepted-artwork .hero-copy .cta-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; }
  .accepted-artwork .hero-copy .cta-row .btn { width: 100%; justify-content: center; text-align: center; min-height: 52px; font-size: 15px; font-weight: 500; }
  .accepted-artwork .hero-copy .cta-row .btn:first-child { background: rgba(185, 154, 118, .22); color: #0ff7fb; }
}

/* Phone pass 3: calmer section titles, tighter hand-offs between sections. */
@media (max-width: 600px) {
  html.accepted-artwork main > section:is(#how, #demo, #plans, #team, #details, #book) .kicker { font-size: 11px; letter-spacing: .18em; margin-bottom: 12px; }
  html.accepted-artwork main > section:is(#how, #demo, #plans, #team, #details) :is(.sec-head, .demo-heading) h2 { font-size: 30px; line-height: 1.1; }
  html.accepted-artwork #demo .demo-fields-mobile-label { color: #0ff7fb; }
  html.accepted-artwork #demo .demo-fields-mobile-list { font-size: 14px; }
  html.accepted-artwork main > #demo { padding-bottom: 20px; }
  html.accepted-artwork main > #plans { padding-top: 40px; padding-bottom: 28px; }
  html.accepted-artwork main > #team { padding-top: 36px; }
  /* First screen shows the artwork and the headline only; the paragraph starts just below the fold.
     (Superseded below.) */
  /* Measured headline bottom = 152.5vw + 48px (art 200%, headline 11.5/13.6vw); paragraph starts just below the first screen. */
  .accepted-artwork .hero-copy h1 { margin-bottom: max(20px, calc(100svh - 152.5vw - 44px)); }
  /* Soft finish where the floor rings end, instead of a hard edge (phone base sits above 87%). */
  html.accepted-artwork .hero .hero-art { -webkit-mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,.35) 89%, transparent 92%); mask-image: linear-gradient(to bottom, #000 86%, rgba(0,0,0,.35) 89%, transparent 92%); }
}

/* Plan summary cards: phones only; desktop keeps the full table. */
.plan-cards { display: none; }
@media (max-width: 1000px) {
  #plans .plan-cards { display: grid; gap: 14px; margin-bottom: 8px; }
  #plans .plan-card { padding: 20px 20px 16px; border: 1px solid rgba(185, 154, 118, .3); border-radius: 14px; background: rgba(255, 255, 255, .02); }
  #plans .plan-card-max { border-color: rgba(15, 247, 251, .45); background: linear-gradient(180deg, rgba(15, 247, 251, .06), rgba(15, 247, 251, .015)); }
  #plans .plan-card h3 { margin: 0 0 12px; font: 500 22px/1.2 Inter, system-ui, sans-serif; color: #ddc5a6; }
  #plans .plan-card-max h3 { color: #0ff7fb; margin-bottom: 4px; }
  #plans .plan-card-plus { margin: 0 0 12px; font: 11px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #ddc5a6; }
  #plans .plan-card ul { list-style: none; margin: 0; padding: 0; }
  #plans .plan-card li { position: relative; padding: 8px 0 8px 26px; font-size: 15px; line-height: 1.5; color: #e4e0da; border-top: 1px solid rgba(185, 154, 118, .12); }
  #plans .plan-card li:first-child { border-top: 0; padding-top: 2px; }
  #plans .plan-card li::before { content: "✓"; position: absolute; left: 2px; top: 8px; color: #ddc5a6; font-size: 14px; }
  #plans .plan-card li:first-child::before { top: 2px; }
  #plans .plan-card-max li::before { color: #0ff7fb; }
  #plans .plan-cards-note { margin: 2px 0 6px; font-size: 13px; color: #8b8b95; }
  #plans .plan-compare-toggle {
    width: 100%; min-height: 50px; margin: 0; padding: 12px 18px; border: 1px solid rgba(185, 154, 118, .55); border-radius: 10px;
    background: transparent; color: #ddc5a6; font: 500 15px/1.3 Inter, system-ui, sans-serif; cursor: pointer;
  }
  #plans .plan-compare-toggle span { margin-left: 8px; color: #0ff7fb; }
  /* The detailed per-feature cards stay available behind the toggle. */
  #plans:not(.plans-open) .plan-table { display: none; }
  #plans.plans-open .plan-table { margin-top: 18px; }
}

@media (max-width: 600px) { html.accepted-artwork main :is(h2, h3) { text-wrap: balance; } }
@media (max-width: 1000px) { html.accepted-artwork #demo #panel-verticals > p { text-wrap: balance; } }

@media (max-width: 1000px) { .accepted-artwork .hero-portal-screen iframe { -webkit-mask-image: none; mask-image: none; } }


/* Phone pass 5 */
@media (max-width: 1000px) {
  html.accepted-artwork #demo .demo-fields-mobile { margin-top: 26px; }
  html.accepted-artwork #demo #panel-verticals > p { text-align: center; }
}
.vz-blue { color: #0ff7fb; }

/* "Book a free discovery call": the label breathes from Venzor blue to white and back. */
@keyframes vz-breathe {
  0%, 100% { color: #0ff7fb; text-shadow: 0 0 0 rgba(15, 247, 251, 0); }
  50% { color: #ffffff; text-shadow: 0 0 14px rgba(15, 247, 251, .45); }
}
@media (prefers-reduced-motion: no-preference) {
  html.accepted-artwork a.btn-primary[href="request-call.html"] { animation: vz-breathe 3.2s ease-in-out infinite !important; }
}
html.accepted-artwork.motion-on a.btn-primary[href="request-call.html"] { animation: vz-breathe 3.2s ease-in-out infinite !important; }

/* How it works, step 02: the cyan pulse travels left to right along the waveform. */
.glyph-signal-anim .bar { stroke: rgba(185, 135, 91, .5); stroke-width: 1.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transform: scaleY(var(--s)); }
.glyph-signal-anim .bar.is-live { stroke: #78d2de; }
@keyframes vz-signal {
  0%, 44%, 100% { transform: scaleY(var(--q)); stroke: rgba(185, 135, 91, .5); }
  22% { transform: scaleY(1); stroke: #78d2de; }
}
@media (prefers-reduced-motion: no-preference) {
  html.accepted-artwork .glyph-signal-anim .bar { animation: vz-signal 3.2s ease-in-out calc(var(--i) * .1333s - 3.2s) infinite !important; }
}
html.accepted-artwork.motion-on .glyph-signal-anim .bar { animation: vz-signal 3.2s ease-in-out calc(var(--i) * .1333s - 3.2s) infinite !important; }

/* Footer legal line. */
.foot-v2 .foot-meta .foot-legal a { color: inherit; text-decoration: none; }
.foot-v2 .foot-meta .foot-legal a:hover { color: #0ff7fb; }

/* Portal demo button breathes like the Book button (phone: "Open the demo", desktop: "Enter the portal"). */
@media (prefers-reduced-motion: no-preference) {
  html.accepted-artwork :is(.demo-open span, .desktop-demo-enter) { animation: vz-breathe 3.2s ease-in-out infinite !important; }
}
html.accepted-artwork.motion-on :is(.demo-open span, .desktop-demo-enter) { animation: vz-breathe 3.2s ease-in-out infinite !important; }

/* How it works, step 01: a cyan scan passes down the fingerprint ridges, with a thin scanner line. */
.glyph-fp { position: relative; display: inline-flex; line-height: 0; }
.glyph-fp::after, .glyph-fp::before { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.glyph-fp::after {
  inset: 0;
  -webkit-mask: url("assets/fingerprint-vector.svg?v=accent-2") center / contain no-repeat;
  mask: url("assets/fingerprint-vector.svg?v=accent-2") center / contain no-repeat;
  background: linear-gradient(180deg, rgba(15,247,251,0) 0%, rgba(15,247,251,0) 36%, rgba(140,235,245,1) 50%, rgba(15,247,251,0) 64%, rgba(15,247,251,0) 100%) 0 100% / 100% 260% no-repeat;
  filter: drop-shadow(0 0 3px rgba(15,247,251,.6));
}
.glyph-fp::before { left: -6%; right: -6%; height: 1px; top: 0; background: linear-gradient(90deg, transparent, rgba(15,247,251,.9), transparent); box-shadow: 0 0 6px rgba(15,247,251,.7); }
@keyframes vz-fp-scan { 0% { background-position: 0 100%; opacity: 1; } 62% { background-position: 0 0; opacity: 1; } 70%, 100% { background-position: 0 0; opacity: 0; } }
@keyframes vz-fp-line { 0% { top: 0; opacity: 0; } 6% { opacity: 1; } 56% { opacity: 1; } 62% { top: 100%; opacity: 0; } 100% { top: 100%; opacity: 0; } }

/* How it works, step 03: the script lines write themselves in, one after another. */
.glyph-brief-anim i { transform-origin: left center; }
@keyframes vz-brief-write {
  0% { transform: scaleX(0); opacity: 1; }
  16% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 6px rgba(15,247,251,.6); }
  30% { box-shadow: none; }
  82% { transform: scaleX(1); opacity: 1; }
  94%, 100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html.accepted-artwork .glyph-fp::after { animation: vz-fp-scan 3.6s ease-in-out infinite !important; }
  html.accepted-artwork .glyph-fp::before { animation: vz-fp-line 3.6s ease-in-out infinite !important; }
  html.accepted-artwork .glyph-brief-anim i { animation: vz-brief-write 3.6s ease-out infinite !important; }
  html.accepted-artwork .glyph-brief-anim i:nth-child(2) { animation-delay: .35s !important; }
  html.accepted-artwork .glyph-brief-anim i:nth-child(3) { animation-delay: .7s !important; }
}
html.accepted-artwork.motion-on .glyph-fp::after { animation: vz-fp-scan 3.6s ease-in-out infinite !important; }
html.accepted-artwork.motion-on .glyph-fp::before { animation: vz-fp-line 3.6s ease-in-out infinite !important; }
html.accepted-artwork.motion-on .glyph-brief-anim i { animation: vz-brief-write 3.6s ease-out infinite !important; }
html.accepted-artwork.motion-on .glyph-brief-anim i:nth-child(2) { animation-delay: .35s !important; }
html.accepted-artwork.motion-on .glyph-brief-anim i:nth-child(3) { animation-delay: .7s !important; }

/* Desktop "What you get": the same premium plan cards as on phones, side by side,
   with the full feature table one click away (styled as a framed panel). */
@media (min-width: 1001px) {
  #plans .plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 8px 0 0; align-items: start; }
  #plans .plan-card { padding: 34px 36px 26px; border: 1px solid rgba(185, 154, 118, .32); border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); }
  #plans .plan-card-max { border-color: rgba(15, 247, 251, .5);
    background: linear-gradient(180deg, rgba(15,247,251,.075), rgba(15,247,251,.012));
    box-shadow: 0 0 0 1px rgba(15,247,251,.08) inset, 0 20px 60px rgba(15,247,251,.06); }
  #plans .plan-card h3 { margin: 0 0 16px; font: 500 30px/1.15 Inter, system-ui, sans-serif; color: #ddc5a6; }
  #plans .plan-card-max h3 { color: #0ff7fb; margin-bottom: 6px; }
  #plans .plan-card-plus { margin: 0 0 16px; font: 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #ddc5a6; }
  #plans .plan-card ul { list-style: none; margin: 0; padding: 0; }
  #plans .plan-card li { position: relative; padding: 12px 0 12px 30px; font-size: 17px; line-height: 1.5; color: #e4e0da; border-top: 1px solid rgba(185,154,118,.13); }
  #plans .plan-card li:first-child { border-top: 0; padding-top: 2px; }
  #plans .plan-card li::before { content: "✓"; position: absolute; left: 2px; top: 12px; color: #ddc5a6; font-size: 15px; }
  #plans .plan-card li:first-child::before { top: 2px; }
  #plans .plan-card-max li::before { color: #0ff7fb; }
  #plans .plan-cards-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: #8b8b95; }
  #plans .plan-compare-toggle { grid-column: 1 / -1; justify-self: start; min-width: 320px; min-height: 52px; margin: 4px 0 0; padding: 12px 26px;
    border: 1px solid rgba(185,154,118,.55); border-radius: 10px; background: transparent; color: #ddc5a6; font: 500 16px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
  #plans .plan-compare-toggle:hover { background: rgba(185,154,118,.1); }
  #plans .plan-compare-toggle span { margin-left: 8px; color: #0ff7fb; }
  #plans:not(.plans-open) .plan-table { display: none; }
  #plans.plans-open .plan-table { margin-top: 28px; }
  /* Framed panel for the full table, with the Max column lightly lit. */
  #plans .plan-table { border: 1px solid rgba(185,154,118,.28); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
  #plans .plan-table :is(th, td):nth-child(3) { background: rgba(15,247,251,.035); }
  #plans .plan-table thead th:nth-child(3) { box-shadow: inset 0 3px 0 rgba(15,247,251,.55); }
  #plans .plan-note { display: none; }
}

/* Phone pass 8 */
@media (max-width: 1000px) {
  /* The headline arrives together with the phone artwork instead of before it. */
  html.hero-loading .accepted-artwork .hero-copy, html.accepted-artwork.hero-loading .hero-copy { opacity: 0 !important; visibility: hidden !important; }
  /* The travelling blue light runs over the rings on phones too. */
  html.accepted-artwork #ring-light { display: block; }
  /* Questions -> Talk with our team: tighter hand-off. */
  html.accepted-artwork main > #details { padding-bottom: 36px; }
  html.accepted-artwork main > #book { padding-top: 28px; }
  /* Footer: links centred, logo centred beneath, legal lines at the very bottom. */
  .foot-v2-grid { display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: 26px; }
  .foot-v2-grid > .foot-nav { order: 1; justify-content: center; align-items: center; text-align: center; }
  .foot-v2-grid > .foot-nav a.foot-email { text-align: center; }
  .foot-v2-grid > .foot-brand { order: 2; display: flex; justify-content: center; }
  .foot-v2-grid > .foot-side { order: 3; display: flex; justify-content: center; }
  .foot-v2 .foot-meta { justify-items: center; width: auto; }
  .foot-v2 .foot-meta li { text-align: center; text-align-last: center; }
}

/* Website table: checkmarks and X marks centred in their columns. */
@media (min-width: 1001px) {
  #plans .plan-table tbody td:is(.plan-yes, .plan-no) { text-align: center; }
}

/* Website "What you get": the Venzor Max card pulses its blue. */
@keyframes vz-max-pulse {
  0%, 100% { border-color: rgba(15,247,251,.42); box-shadow: 0 0 0 1px rgba(15,247,251,.06) inset, 0 20px 60px rgba(15,247,251,.05); }
  50% { border-color: rgba(15,247,251,.95); box-shadow: 0 0 0 1px rgba(15,247,251,.22) inset, 0 0 46px rgba(15,247,251,.2); }
}
@keyframes vz-max-ink { 0%, 100% { color: #0ff7fb; text-shadow: none; } 50% { color: #c8feff; text-shadow: 0 0 12px rgba(15,247,251,.55); } }
/* Max card breathes at every width (phones too). */
@media (prefers-reduced-motion: no-preference) {
  html.accepted-artwork #plans .plan-card-max { animation: vz-max-pulse 3.2s ease-in-out infinite !important; }
  html.accepted-artwork #plans .plan-card-max h3, html.accepted-artwork #plans .plan-card-max li::before { animation: vz-max-ink 3.2s ease-in-out infinite !important; }
}
@media all {
  html.accepted-artwork.motion-on #plans .plan-card-max { animation: vz-max-pulse 3.2s ease-in-out infinite !important; }
  html.accepted-artwork.motion-on #plans .plan-card-max h3, html.accepted-artwork.motion-on #plans .plan-card-max li::before { animation: vz-max-ink 3.2s ease-in-out infinite !important; }
}

/* One black for the whole page: every section uses the hero's #090a0d, so no seams between sections (was #0b0b0d / #080a0b gradients). */
:root { --bg: #090A0D; --bg-deep: #090A0D; }
.foot.foot-v2::before { background: rgba(9, 10, 13, .24); }
/* The two lower-left hero covers (desktop-bounded-pass.css) are replaced by hero-bg-clean; their soft edges drew faint vertical stripes. */
@media (min-width: 1001px) { html.accepted-artwork .hero::before, html.accepted-artwork .hero::after { content: none; } }
/* Safari/WebKit (incl. every iPhone browser): give the moving ring light its own compositing layer. Without it each
   animation frame repainted the whole hero art layer (~200ms/frame in WebKit), so the light started late and stuttered. */
.accepted-artwork .hero-art > #ring-light { will-change: transform; transform: translateZ(0); }

/* Blue electricity (electric.js): along the letter edges of "See what you'll receive weekly", and around the Venzor Max card rim. */
.vz-zap { position: relative; }
#plans .plan-card-max { position: relative; overflow: visible; }
.vz-electric { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; will-change: transform; transform: translateZ(0); }

/* Phone pass 9 (Will, 30 Sep evening): only the Book button under the hero text; the platform line centred with
   "YouTube Shorts" on its own line; "Fields in the demo" and its list centred. Desktop unchanged. */
.platform-break { display: none; }
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .hero-platform-line { text-align: center; }
  html.accepted-artwork .hero-copy .platform-break { display: inline; }
  html.accepted-artwork .hero-copy .cta-row .btn-ghost { display: none; }
  html.accepted-artwork #demo .demo-fields-mobile { justify-content: center; text-align: center; }
  html.accepted-artwork #demo .demo-fields-mobile-label { text-align: center; }
  html.accepted-artwork #demo .demo-fields-mobile-list { justify-content: center; }
}

/* Phone pass 10 (Will, 1 Oct, from his phone): centred headings, What you get at the portal heading's size with the
   Light & Max line under it, smaller plan panels, centred team heading. Phones only. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 { text-align: center; }
  html.accepted-artwork #demo .demo-heading .kicker, html.accepted-artwork #demo .demo-heading .display-2 { text-align: center; }
  html.accepted-artwork #plans .sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
  html.accepted-artwork #plans .sec-head .display-2 { font-size: 38px; line-height: 1.02; }
  html.accepted-artwork #plans .sec-head .kicker { order: 2; margin: 12px 0 0; font-size: 12px; }
  html.accepted-artwork #team .sec-head h2, html.accepted-artwork #team .sec-head .sub { text-align: center; }
  /* Smaller plan panels. */
  html.accepted-artwork #plans .plan-card { padding: 16px 16px 12px; }
  html.accepted-artwork #plans .plan-card h3 { font-size: 19px; margin-bottom: 8px; }
  html.accepted-artwork #plans .plan-card .plan-card-plus { font-size: 11px; margin-bottom: 10px; }
  html.accepted-artwork #plans .plan-card li { font-size: 14px; line-height: 1.45; padding: 2px 0 7px 24px; }
  html.accepted-artwork #plans .plan-offer { margin-bottom: 16px; padding-bottom: 14px; }
  html.accepted-artwork #plans .plan-offer-now { font-size: 32px; }
  html.accepted-artwork #plans .plan-offer-per { font-size: 14px; }
  html.accepted-artwork #plans .plan-offer-cta.btn { margin-top: 14px; min-height: 46px; font-size: 14px; }
  html.accepted-artwork #plans .plan-offer-fine { font-size: 12px; margin-top: 10px; }
}
@media (max-width: 1000px) {
  /* Centred section labels lose their trailing dash on phones. */
  html.accepted-artwork #demo .demo-heading .kicker, html.accepted-artwork #plans .sec-head .kicker { justify-content: center; text-align: center; }
}

/* Phone pass 11 (Will, 1 Oct): centre the hero paragraph and the remaining section text on phones. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede { text-align: center; }
  html.accepted-artwork #how .sec-head, html.accepted-artwork #how .sec-head .display-2, html.accepted-artwork #how .sec-head .sub { text-align: center; }
  html.accepted-artwork #how .sec-head .kicker { justify-content: center; text-align: center; }
  html.accepted-artwork #how .hs-card .hs-body { text-align: center; }
  html.accepted-artwork #how .hs-card .hs-body .step-num { justify-content: center; }
  html.accepted-artwork #demo .demo-notice, html.accepted-artwork #demo .demo-kit-note { text-align: center; }
  html.accepted-artwork #plans .plan-cards-note { text-align: center; }
  html.accepted-artwork #plans .plan-compare-toggle { display: flex; justify-content: center; width: 100%; }
  html.accepted-artwork #details .sec-head, html.accepted-artwork #details .sec-head h2, html.accepted-artwork #details .sec-head .sub { text-align: center; }
  html.accepted-artwork #details .sec-head .kicker { justify-content: center; text-align: center; }
  html.accepted-artwork #team .team-member { text-align: center; }
  html.accepted-artwork #team .team-member img { margin-left: auto; margin-right: auto; }
}

/* Phone pass 12 (Will picked option C, 1 Oct; the section hairline was removed again the same night at his request): the
   section label sits in a short rule on each side with its number ("01 HOW IT WORKS"), one size bigger. The numbers
   are spans hidden on desktop, so wide screens are untouched. The team section has no label and gets the line only. */
.sec-num { display: none; }
@media (max-width: 1000px) {
  html.accepted-artwork main > section:not(#hero) .kicker { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-left: 0; margin-right: 0; font-size: 12px; letter-spacing: .2em; }
  html.accepted-artwork main > section:not(#hero) .kicker::before,
  html.accepted-artwork main > section:not(#hero) .kicker::after { content: ""; display: block; flex: 1 1 0; min-width: 0; max-width: 110px; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,154,118,.6)); }
  html.accepted-artwork main > section:not(#hero) .kicker::after { background: linear-gradient(90deg, rgba(185,154,118,.6), transparent); }
  html.accepted-artwork main > section:not(#hero) .kicker .sec-num { display: inline; color: #0ff7fb; font-weight: 600; margin-right: 2px; }
}

/* Phone pass 13 (Will, 1 Oct): hero lettering like the desktop, first line a little smaller and Ready to record bigger. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 .l1 { font-size: 9.8vw; line-height: 1.04; }
  html.accepted-artwork .hero-copy h1 .l2 { font-size: 15vw; line-height: 1; margin-top: .04em; }
}

/* Phone pass 14 (Will picked S3, 1 Oct): more air between sections, and every other section (portal, team, closing)
   sits on a slightly lighter panel so the page reads as pages. Phones only. */
@media (max-width: 1000px) {
  html.accepted-artwork main > section:not(#hero) { margin-top: 56px; }
  html.accepted-artwork main > section#how { margin-top: 40px; }
  html.accepted-artwork :is(#demo, #team, #book) { background: #101217 !important; }
  html.accepted-artwork #book .wave-canvas { opacity: .9; }
}

/* Phone pass 14, menu (Will picked M1): the ☰ panel uses the site's notched bronze frame on dark glass, numbered
   labels like the section labels, and the Book button; the ☰ becomes ✕ while open (app.js). Phones only. */
@media (max-width: 1000px) {
  #mobile-menu:not([hidden]) { position: absolute; top: 84px; left: 16px; right: 16px; z-index: 50; display: grid; gap: 0; padding: 6px 22px 22px; counter-reset: mi;
    background: rgba(9,10,13,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgb(101,81,62); border-radius: 0; box-shadow: 0 24px 60px rgba(0,0,0,.6);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  #mobile-menu::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: rgb(224,215,204);
    clip-path: polygon(calc(100% - 16px) 0, 100% 16px, 100% calc(16px + 1.8px), calc(100% - 16px - 1.8px) 0); }
  #mobile-menu a { display: flex; align-items: center; gap: 14px; padding: 19px 0; border-top: 1px solid rgba(185,154,118,.22); font: 12.5px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #e4d6c4; text-decoration: none; }
  #mobile-menu a:first-child { border-top: 0; }
  #mobile-menu a::before { content: counter(mi, decimal-leading-zero); counter-increment: mi; color: #0ff7fb; font-weight: 600; }
  #mobile-menu .vz-blue { color: #0ff7fb; }
  #mobile-menu a.mm-cta { display: flex; justify-content: center; margin-top: 18px; min-height: 50px; padding: 0 20px; border: 1px solid rgba(203,172,136,.78); background: rgba(185,154,118,.22); color: #0ff7fb; font: 500 15px/1.2 Inter, Arial, sans-serif; letter-spacing: 0; text-transform: none; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
  #mobile-menu a.mm-cta::before { display: none; }
  #mobile-menu-toggle[aria-expanded="true"] { color: #0ff7fb; }
}

/* Phone pass 15 (Will, 1 Oct): more air between the portal title and Fields in the demo; What you get bigger. */
@media (max-width: 1000px) {
  html.accepted-artwork #demo .demo-fields-mobile { margin-top: 44px; }
  html.accepted-artwork #plans .sec-head .display-2 { font-size: 50px; line-height: 1; }
}

/* Phone pass 16 (Will, 1 Oct): body text thinner on phones (Inter 300; ?thin=200 previews Extra Light). Same font, lighter weight. */
@media (max-width: 1000px) {
  html.accepted-artwork :is(.hero-copy .lede, .hero-platform-line, #how .sec-head .sub, #how .hs-body p, #demo .demo-fields-mobile, #demo .demo-notice, #demo .demo-kit-note, #team .sec-head .sub, #team .team-member p, #plans .plan-card li, #plans .plan-cards-note, #plans .plan-offer-fine, #plans .plan-offer-per, #details details p, #details summary, #book .lede) { font-weight: 300; color: #d8d3cc; }
  html.accepted-artwork.thin-200 :is(.hero-copy .lede, .hero-platform-line, #how .sec-head .sub, #how .hs-body p, #demo .demo-fields-mobile, #demo .demo-notice, #demo .demo-kit-note, #team .sec-head .sub, #team .team-member p, #plans .plan-card li, #plans .plan-cards-note, #plans .plan-offer-fine, #plans .plan-offer-per, #details details p, #details summary, #book .lede) { font-weight: 200; color: #e0dbd4; }
}

/* Phone pass 17 (Will picked option 2, 1 Oct): "Video scripts in your voice" on one row, Ready to record big, and the
   paragraph kept clear below the headline. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 .l1 { font-size: 8.2vw; line-height: 1.05; letter-spacing: -.005em; }
  html.accepted-artwork .hero-copy h1 .l2 { font-size: 15.5vw; line-height: 1; margin-top: .02em; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 34px; }
}

/* Phone pass 18 (Will picked option 2, 1 Oct): the platform line leaves the hero and becomes a small strip between the
   hero and How it works. The hero line is hidden on phones only (desktop keeps it); the strip exists only on phones. */
.platform-strip { display: none; }
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .hero-platform-line { display: none; }
  .platform-strip { display: block; margin: 0 24px; padding: 18px 0; text-align: center; font: 11px/1.6 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: #bca17f; border-top: 1px solid rgba(185,154,118,.25); border-bottom: 1px solid rgba(185,154,118,.25); }
  html.accepted-artwork main > section#how { margin-top: 28px; }
}

/* Phone pass 19 (Will, 1 Oct): room between the phone artwork and the headline; headline sits closer to the paragraph. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy { margin-top: 40px; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 24px; }
}

/* Phone pass 20 to 22 (Will, 1 Oct): the first screen is the phone and the headline; the button may sit below the fold.
   The artwork file is the old desktop mock-up; phones only ever show its right half (phone centred). It is drawn at
   200% of the viewport width (edge to edge, full-size phone) with the empty top 7% and bottom 10% clipped, pulled up so
   the rings run behind the logo bar (nav kept above it). The side fades go through the background-coloured overlay (the
   artwork's own mask is the bottom fade in artwork.css) and keep the lettering baked into the file's left half hidden.
   Target sizes: Instagram in-app browser 393x620 and 430x690, Safari 393x664. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { width: 200%; margin-left: -94.8%; clip-path: inset(7% 0 10% 0); margin-top: calc(-9.4vw - 60px); margin-bottom: -13.4vw; z-index: 0; }
  html.accepted-artwork .opening-nav { position: relative; z-index: 5; }
  html.accepted-artwork .hero-art > .hero-fade-overlay { -webkit-mask: linear-gradient(90deg, #000 49%, transparent 56%, transparent 93%, #000 97.5%) 0 0/100% 100% no-repeat; mask: linear-gradient(90deg, #000 49%, transparent 56%, transparent 93%, #000 97.5%) 0 0/100% 100% no-repeat; }
  html.accepted-artwork .hero-copy { margin-top: 0; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 14px; }
  html.accepted-artwork .hero-copy .lede { margin-bottom: 8px; }
}

/* Phone pass 23 (Will, 1 Oct): the hero sizes itself to the screen. The artwork width (and so its height) comes from
   the visible screen height: whatever is left after the logo bar, the headline and the paragraph (about 290px). Tall
   screens get a bigger phone, short ones (Instagram's in-app browser, small iPhones) a smaller one, never wider than
   edge to edge (200vw) and never smaller than 150vw. The phone stays centred; the clip and fades from pass 22 remain. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art {
    --hero-w: min(200vw, max(150vw, calc((100svh - 290px) / 0.556)));
    width: var(--hero-w);
    margin-left: calc(50vw - 0.724 * var(--hero-w));
    margin-top: calc(-0.0469 * var(--hero-w) - 60px);
    margin-bottom: calc(-0.067 * var(--hero-w));
  }
}

/* Phone pass 24 (Will, 1 Oct): the phone must fill the width on every browser, so the artwork never goes below edge to
   edge (200vw); tall screens may grow it a little (up to 230vw). The headline and paragraph step down a size to give
   that height back, so the headline still lands on the first screen in Instagram's browser on a regular iPhone. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(230vw, max(200vw, calc((100svh - 262px) / 0.556))); }
  html.accepted-artwork .hero-copy h1 .l1 { font-size: 7.2vw; line-height: 1.05; }
  html.accepted-artwork .hero-copy h1 .l2 { font-size: 13vw; line-height: 1; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 12px; }
  html.accepted-artwork .hero-copy .lede { font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; }
}

/* Phone pass 25 (Will, 1 Oct): first line a touch bigger; the paragraph finer (Inter 200) and smaller with more air above
   it, so the headline and the paragraph read as two things. Phone size unchanged. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 .l1 { font-size: 8vw; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 22px; }
  html.accepted-artwork .hero-copy .lede { font-size: 14px; line-height: 1.55; font-weight: 200; color: #e0dbd4; max-width: none; }
}

/* Phone pass 26 (Will, 1 Oct): first line bigger (8.5vw is the largest size that stays on one row on a 375px phone);
   the gap between Ready to record and the paragraph a little smaller. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 .l1 { font-size: 8.5vw; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 16px; }
}

/* Phone pass 27 (Will, 1 Oct): a little air between the two headline lines, taken from the gap below Ready to record. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 .l2 { margin-top: 8px; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 10px; }
}

/* Phone pass 28 (Will, 1 Oct): the platform line sits right under the Book button with no rules, a little bigger and
   brighter, then plain space before How it works. */
@media (max-width: 1000px) {
  .platform-strip { margin: 14px 24px 0; padding: 0; border: 0; font-size: 12.5px; letter-spacing: .2em; color: #d8c5a8; }
  html.accepted-artwork .hero { padding-bottom: 0; }
  html.accepted-artwork .hero-copy { margin-bottom: 0; }
  html.accepted-artwork main > section#how { margin-top: 64px; }
}

/* Phone pass 29 (Will, 1 Oct): portal section: tighter gap under the title, Fields in the demo a size up.
   (The phone-to-headline gap added here was rolled back to the V88 spacing at Will's request.) */
@media (max-width: 1000px) {
  html.accepted-artwork #demo .demo-fields-mobile { margin-top: 26px; }
  html.accepted-artwork #demo .demo-fields-mobile-label { font-size: 12px; }
  html.accepted-artwork #demo .demo-fields-mobile-list { font-size: 16px; }
}

/* Phone pass 30 (Will, 1 Oct): room before the Swipe sideways line, which is Venzor blue. (Hero gaps rolled back to V88.) */
@media (max-width: 1000px) {
  html.accepted-artwork #plans .compare-hint { margin-top: 28px; color: #0ff7fb; }
}

/* Phone pass 32 (Will, 1 Oct): a hair more space under the phone; Ready to record a hair closer to the first line. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy h1 .l2 { margin-top: 5px; }  /* the +6px under the phone was taken back out (Will: too much room) */
}

/* Phone pass 33 (Will, 1 Oct): simplified first screen. The hero keeps the headline, the tagline "Stop wondering what to
   post." (bigger, light) and the Book button; the rest of the paragraph and the platforms line move to the top and
   bottom of the How it works intro. Desktop: untouched (the span split is invisible there; the phone-only paragraph
   and the moved platform line are hidden). */
.how-intro-phone { display: none; }
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-rest { display: none; }
  html.accepted-artwork .hero-copy .lede { font-size: 19px; line-height: 1.35; font-weight: 300; color: #ece6de; margin: 0 0 6px; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 10px; }
  html.accepted-artwork #how .how-intro-phone { display: block; margin: 18px 0 0; font: 300 16px/1.6 Inter, Arial, sans-serif; color: #d8d3cc; text-align: center; }
  html.accepted-artwork #how .sec-head .sub { margin-top: 14px; }
  .platform-strip { margin: 16px 0 0; font-size: 11px; color: #bca17f; }
  html.accepted-artwork main > section#how { margin-top: 48px; }
}

/* Phone pass 34 (Will, 1 Oct): the tagline leads. "Stop wondering what to post." sits above the headline, big and white
   in the headline serif; the headline answers it a size up; the Book button becomes a small blue pill. Phones only. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy { display: flex; flex-direction: column; margin-top: 4px; }
  html.accepted-artwork .hero-copy .lede { order: -1; margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 7.4vw; line-height: 1.1; letter-spacing: 0; color: #f4eee7; }
  html.accepted-artwork .hero-copy h1 .l1 { font-size: 8.5vw; color: #cfc8bf; }
  html.accepted-artwork .hero-copy h1 .l2 { font-size: 15vw; margin-top: 4px; }
  html.accepted-artwork .hero-copy h1 { margin-bottom: 14px; }
  html.accepted-artwork .hero-copy .cta-row .btn { width: auto; min-width: 0; margin: 0 auto; padding: 0 26px; min-height: 46px; border: 1px solid rgba(15,247,251,.6); background: rgba(15,247,251,.08); clip-path: none; border-radius: 999px; color: #0ff7fb; font: 500 15px/1 Inter, Arial, sans-serif; }
  html.accepted-artwork .hero-copy .cta-row .btn::before, html.accepted-artwork .hero-copy .cta-row .btn::after { display: none; }
}

/* Phone pass 35 (Will, 1 Oct): the hero text tapers like a V (tagline widest, each line narrower, pill at the point);
   How it works shows one merged intro paragraph on phones (the desktop .sub is hidden there). */
@media (max-width: 1000px) {
  /* V-shape sizes rolled back at Will's request; V106 sizes apply again, with the tagline a hair bigger (7.4 -> 7.7vw). */
  html.accepted-artwork .hero-copy .lede { font-size: 7.4vw; letter-spacing: 0; }  /* V106 size: the tagline sits a little in from the line below, and the block narrows from there (Will) */
  html.accepted-artwork #how .sec-head .sub { display: none; }
  html.accepted-artwork #how .how-intro-phone { margin-top: 16px; }
  html.accepted-artwork #how .platform-strip { margin-top: 14px; }
}

/* Phone pass 37 (Will, 1 Oct, colour option 2): the tagline carries the bronze italic; both headline lines are white. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede, html.accepted-artwork .hero-copy .lede .lede-tag { color: #e09665 !important; font-style: italic; }
  html.accepted-artwork .hero-copy h1 .l1 { color: #f4eee7; }
  html.accepted-artwork .hero-copy h1 .l2 { color: #f4eee7; }
}

/* Phone pass 39 (Will, 1 Oct): the first screen says one thing. "Stop wondering what to post." big on two rows, then the
   pill; the two headline lines are hidden on phones (desktop keeps them). */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede { font-size: 12.5vw; line-height: 1.02; margin: 0 0 18px; }
  html.accepted-artwork .hero-copy h1 { display: none; }
}

/* Phone pass 40 (Will, 1 Oct): the first screen fills the Instagram window. The artwork is sized from the visible
   height (whatever is left after the logo bar, the tagline and the pill: about 250px), up to 260vw wide, and sits a
   little lower under the logo; the tagline is bigger and the pill lands at the bottom edge. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(260vw, max(200vw, calc((100svh - 250px) / 0.556))); margin-top: calc(-0.0469 * var(--hero-w) - 36px); }
  html.accepted-artwork .hero-copy { margin-top: 14px; }
  html.accepted-artwork .hero-copy .lede { font-size: 14.5vw; line-height: 1; margin: 0 0 20px; }
  html.accepted-artwork .hero-copy .cta-row .btn { min-height: 50px; font-size: 16px; padding: 0 30px; }
}

/* Phone pass 41 (Will, 1 Oct): tagline white; the pill small so the block narrows to a point under the words. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede, html.accepted-artwork .hero-copy .lede .lede-tag { color: #f4eee7 !important; }
  html.accepted-artwork .hero-copy .lede { margin-bottom: 16px; }
  html.accepted-artwork .hero-copy .cta-row .btn { min-height: 38px; font-size: 13px; padding: 0 18px; }
}

/* Phone pass 42 (Will, 1 Oct): first screen = big phone with "Stop wondering what to post." in bronze at the bottom;
   no button on the first screen (the Book button stays in the menu and further down). Phones only. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 212px) / 0.556))); margin-top: calc(-0.0469 * var(--hero-w) - 36px); }
  html.accepted-artwork .hero-copy { margin-top: 10px; }
  html.accepted-artwork .hero-copy .lede, html.accepted-artwork .hero-copy .lede .lede-tag { color: #e09665 !important; font-style: italic; }
  html.accepted-artwork .hero-copy .lede { font-size: 11.5vw; line-height: 1; margin: 0 0 8px; }
  html.accepted-artwork .hero-copy .cta-row { display: none; }
}

/* Phone pass 43 (Will, 1 Oct: "premium, smooth, make someone want to go down and look more"). Phones only.
   1) Staged entrance when motion is on: the phone settles in over 1.2s, then the bronze line fades up.
   2) The tagline gets a hair more air below it and a quiet bronze scroll cue (thin line with a slow cyan drop).
   3) Reduce Motion: no entrance, cue line stays static. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede { font-size: 10.8vw; letter-spacing: -.012em; margin: 0 0 4px; text-wrap: balance; }
  html.accepted-artwork .hero .scroll-cue { display: flex; order: 99; position: relative; left: auto; bottom: auto; transform: none; margin: 6px auto 0; gap: 6px; font-size: 8.5px; letter-spacing: .34em; color: rgba(224,150,101,.62); }
  html.accepted-artwork .hero .scroll-cue span { height: 22px; background: linear-gradient(180deg, transparent, rgba(224,150,101,.75)); }
  html.accepted-artwork.motion-on .hero .scroll-cue span::after { display: block; animation: cueDrop 2.6s ease-in-out infinite !important; }
  html.accepted-artwork.motion-on:not(.hero-loading) .hero-art { animation: vz-hero-settle 1.2s cubic-bezier(.22,.61,.36,1) both !important; }
  html.accepted-artwork.motion-on:not(.hero-loading) .hero-copy .lede { animation: vz-tag-up .9s cubic-bezier(.22,.61,.36,1) .45s both !important; }
  html.accepted-artwork.motion-on:not(.hero-loading) .hero .scroll-cue { animation: vz-tag-up .9s cubic-bezier(.22,.61,.36,1) .9s both !important; }
  @keyframes vz-hero-settle { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes vz-tag-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Phone pass 44 (Will, 1 Oct): "Stop wondering what to post" bigger. Two rows at 13.2vw; artwork gives up the extra height. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 236px) / 0.556))); }
  html.accepted-artwork .hero-copy .lede { font-size: 13.2vw; line-height: .98; }
}

/* Phone pass 45 (Will, 1 Oct): tagline bigger again. 16vw, two rows ("Stop wondering" / "what to post."); artwork gives up the height. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 262px) / 0.556))); }
  html.accepted-artwork .hero-copy .lede { font-size: 16vw; line-height: .96; letter-spacing: -.018em; }
}

/* Phone pass 46 (Will picked option A, 1 Oct): tagline in the phone's "This Week" treatment. First line white upright,
   second line bronze italic. Sized so the two lines fill the width; artwork trimmed to keep the Scroll cue on screen. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 262px) / 0.556))); }
  html.accepted-artwork .hero-copy { margin-top: -4px; }
  html.accepted-artwork .hero-copy .lede { font-size: 15.8vw; line-height: .94; letter-spacing: -.035em; text-wrap: initial; }
  html.accepted-artwork .hero-copy .lede, html.accepted-artwork .hero-copy .lede .lede-tag { color: #f4eee7 !important; font-style: normal; }
  html.accepted-artwork .hero-copy .lede .lede-tag-1 { white-space: nowrap; }
  html.accepted-artwork .hero-copy .lede .lede-tag-2 { color: #e09665 !important; font-style: italic; display: block; white-space: nowrap; }
}


/* Phone pass 47 (Will, 1 Oct): "Stop wondering" uses the exact "This Week" title treatment from the phone screen
   (Cormorant Garamond 500 upright, -.04em). "what to post." stays as it was. Size refitted so each line keeps one row. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-tag-1 { font-weight: 500; letter-spacing: -.04em; }
  html.accepted-artwork .hero-copy .lede { font-size: 15.4vw; }
}

/* Phone pass 48 (Will, 1 Oct): "Stop" in the upright font we already have (Cormorant 500), "wondering what to post." in the
   italic. Line 1 white, line 2 bronze. Scaled up so the block fills the space above the Scroll cue; lines tightened. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 214px) / 0.556))); }
  html.accepted-artwork .hero-copy .lede { line-height: .86; }
  html.accepted-artwork .hero-copy .lede .lede-tag-1 { display: block; font-size: 17.4vw; font-weight: 300; font-style: italic; letter-spacing: -.03em; }
  html.accepted-artwork .hero-copy .lede .lede-tag-1 .lede-w1 { font-weight: 500; font-style: normal; letter-spacing: -.04em; }
  html.accepted-artwork .hero-copy .lede .lede-tag-2 { font-size: 14.4vw; margin-top: .01em; }
  html.accepted-artwork .hero .scroll-cue { margin-top: 4px; }
}

/* Phone pass 49 (Will, 1 Oct): the d of "wondering" was touching the phone and the p of "Stop" was on the w of "what".
   First line a little smaller, a bit of air above it and between the two lines. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 228px) / 0.556))); }
  html.accepted-artwork .hero-copy { margin-top: 12px; }
  html.accepted-artwork .hero-copy .lede { line-height: .92; }
  html.accepted-artwork .hero-copy .lede .lede-tag-1 { font-size: 16.2vw; }
  html.accepted-artwork .hero-copy .lede .lede-tag-2 { font-size: 14vw; margin-top: .06em; }
}

/* Phone pass 50 (Will, 1 Oct evening, from his phone): "Stop wondering" moves up 12px, closer to the phone (hero-copy
   margin-top 12px to 0; tested -4px, the d of wondering sat on the bezel again on an iPhone 15). "Stop" bolder: Cormorant 600
   upright (file already shipped), was 500. Nothing else changed. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy { margin-top: 0; }
  html.accepted-artwork .hero-copy .lede .lede-tag-1 .lede-w1 { font-weight: 600; }
}

/* Phone pass 51 (Will, 1 Oct evening, from his Pro Max screenshot): the p of "Stop" and the h of "what" were nearly touching.
   Gap between the two tagline rows .06em to .2em (about 8px more on a Pro Max). Nothing else changed. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-tag-2 { margin-top: .2em; }
}

/* Phone pass 52 (Will, 1 Oct evening): "Stop" a little less bold than 600 but more than 500. Cormorant only ships 500 and 600,
   so: weight 500 plus a .45px same-colour text stroke as the half step. Nothing else changed. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-tag-1 .lede-w1 { font-weight: 500; -webkit-text-stroke: .45px #f4eee7; }
}

/* Phone pass 53 (Will, 1 Oct evening): the p of "Stop" and the h of "what" still a little close, gap .2em to .28em
   (about 5px more on a Pro Max). "Stop" a touch lighter: stroke .45px to .25px, still weight 500. Nothing else changed. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-tag-2 { margin-top: .28em; }
  html.accepted-artwork .hero-copy .lede .lede-tag-1 .lede-w1 { -webkit-text-stroke: .25px #f4eee7; }
}

/* Phone pass 54 (Will, 1 Oct evening): (1) p of "Stop" and h of "what" still a little close, gap .28em to .36em.
   (2) The platform line under the How it works intro looked like an afterthought (11px mono, "SHORTS" orphaned).
   Now the hero's bronze Cormorant italic at 26px, two balanced rows with a forced break after "TikTok and", full stop added
   to match the desktop hero line. Desktop unchanged (the strip is display:none above 1000px). */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-tag-2 { margin-top: .36em; }
  html.accepted-artwork #how .platform-strip { margin: 22px 0 0; font: italic 300 26px/1.2 'Cormorant Garamond', Georgia, serif; letter-spacing: -.01em; text-transform: none; color: #e09665; }
}

/* Phone pass 55 (Claude, 1 Oct evening): after passes 51 to 54 the Scroll cue sat 3px below the fold on a 430x812 Instagram
   view (815/812). The artwork gives up 8px of height (228px to 236px in the formula) so the cue is on screen on both sizes. */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, max(200vw, calc((100svh - 236px) / 0.556))); }
}

/* Phone pass 56 (Will, 1 Oct evening): (1) under "What you get" the "Venzor Light & Venzor Max" line is Venzor blue, the
   whole line (was bronze with only the 03 in blue). (2) "Built around you / Backed by real people": the two rows a little
   further apart (line-height 1.1 to 1.18), same ask as the tagline p and h. Phones only. */
@media (max-width: 1000px) {
  html.accepted-artwork #plans .sec-head .kicker { color: #0ff7fb; }
  html.accepted-artwork #how .sec-head .display-2 { line-height: 1.18; }
}

/* Phone pass 57 (Will, 1 Oct evening, correction): under "What you get" ONLY "Venzor Max" is blue; "Venzor Light &" stays
   bronze. Max is the only blue plan word on the page. Pass 56's whole-line blue is withdrawn. Phones only; desktop kicker unchanged. */
@media (max-width: 1000px) {
  html.accepted-artwork #plans .sec-head .kicker { color: inherit; }
  html.accepted-artwork #plans .sec-head .kicker .kicker-max { color: #0ff7fb; }
}

/* Phone pass 58 (Will, 1 Oct evening): the side-by-side comparison only shows if they want it. A tab under the plan cards
   opens it; closed by default. Desktop unchanged: the tab is hidden above 1000px and the table stays open there. */
.compare-toggle { display: none; }
@media (max-width: 1000px) {
  html.accepted-artwork #plans .compare-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 26px auto 0; padding: 13px 22px; width: auto; max-width: 100%; border: 1px solid rgba(15,247,251,.4); border-radius: 999px; background: rgba(15,247,251,.05); font: 11px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #0ff7fb; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html.accepted-artwork #plans .plan-cards + .compare-toggle { display: flex; }
  html.accepted-artwork #plans .compare-toggle-arrow { font-size: 13px; transition: transform .25s ease; }
  html.accepted-artwork #plans.compare-open .compare-toggle-arrow { transform: rotate(180deg); }
  html.accepted-artwork #plans .compare-hint, html.accepted-artwork #plans .compare-wrap { display: none; }
  html.accepted-artwork #plans.compare-open .compare-hint { display: block; }
  html.accepted-artwork #plans.compare-open .compare-wrap { display: block; }
}

/* Phone pass 59 (Will, 1 Oct evening): (1) the compare tab takes the site's button look: Venzor bronze border and tint,
   pale cyan text, same as the plan buttons. (2) Less gap between the tab and "Meet the people" (team section
   margin-top 56px to 0, padding-top 36px to 24px). Greta's title is a copy change in index.html (President to Creative Director). */
@media (max-width: 1000px) {
  html.accepted-artwork #plans .compare-toggle { border-color: #b9875b; background: rgba(185,135,91,.09); color: #c5fdfe; }
  html.accepted-artwork main > #team { margin-top: 0; padding-top: 24px; }
}

/* Phone pass 60 (1 Oct evening): pass 59's margin-top: 0 lost to the general section rule (main > section:not(#hero), 56px).
   Same intent, winning selector. */
@media (max-width: 1000px) {
  html.accepted-artwork main > section#team { margin-top: 0; }
}

/* Phone pass 61 (Will, 1 Oct evening): a little more gap between the compare tab and "Meet the people" (team padding-top 24px to 40px). */
@media (max-width: 1000px) {
  html.accepted-artwork main > section#team { padding-top: 40px; }
}

/* Phone pass 62 (Will, 1 Oct evening): more gap again between the compare tab and "Meet the people" (team padding-top 40px to 64px). */
@media (max-width: 1000px) {
  html.accepted-artwork main > section#team { padding-top: 64px; }
}

/* Launch QA pass 69 (1 Oct evening), phones only.
   (1) Short screens (iPhone SE in Instagram 375x549, iPhone 15 in Chrome 393x652): the 200vw floor on the phone artwork pushed
       the tagline and Scroll cue below the fold. Under 700px of visible height the floor is dropped so the first screen always fits
       (SE: cue ends 526/549, 15 Chrome: 635/652). Taller phones are unchanged.
   (2) iPad portrait (768, 820): the How it works card strip used a 4vw gutter while the wrap pads 24px, so the strip stuck out 7 to 9px
       and the page scrolled sideways. The strip's bleed now never exceeds the wrap padding (pass 70: selector strengthened, how-stories.css is built after this file). */
@media (max-width: 1000px) and (max-height: 700px) {
  html.accepted-artwork .hero-art { --hero-w: min(280vw, calc((100svh - 236px) / 0.556)); }
}
@media (max-width: 1000px) {
  html.accepted-artwork main #how ol.how-stories { margin: 0 calc(-1 * min(var(--gutter, 24px), 24px)); padding-left: min(var(--gutter, 24px), 24px); padding-right: min(var(--gutter, 24px), 24px); scroll-padding-inline: min(var(--gutter, 24px), 24px); }
}

/* Speed pass 78 (Will, 1 Oct evening, the draft felt slow): the headline and tagline show as soon as the page paints instead
   of waiting for the artwork to decode. The artwork still fades in when ready. Phone entrance animations no longer depend on
   the loading gate, so the tagline cannot pop twice. All widths. */
html.hero-loading .hero-copy, html.hero-loading .accepted-artwork .hero-copy, html.accepted-artwork.hero-loading .hero-copy { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
@media (max-width: 1000px) {
  html.accepted-artwork.motion-on .hero-copy .lede { animation: vz-tag-up .9s cubic-bezier(.22,.61,.36,1) .2s both !important; }
  html.accepted-artwork.motion-on .hero .scroll-cue { animation: vz-tag-up .9s cubic-bezier(.22,.61,.36,1) .6s both !important; }
}

/* hero-screen-fade (speed pass, 1 Oct evening): the live screen inside the phone fades in once its board is ready, so the
   artwork no longer waits for it. Until then the phone shows its painted screen. All widths. */
/* Pass 91 (1 Oct, Will's recording): the painted screen in the artwork must never show. The screen box (dark glass, correctly
   projected since pass 89) is visible from the first frame; only the live content fades in once its board exists. */
html.accepted-artwork .hero-art:not([data-screen]) .hero-portal-screen iframe { opacity: 0; }
html.accepted-artwork .hero-art .hero-portal-screen iframe { transition: opacity .35s ease; }
html.accepted-artwork .hero-portal-screen { background: #050607; }

/* 5 Oct 2026: the Both plans line sits at the very bottom of the plans, under the compare table. */
#plans .plan-cards-note { text-align: center; margin: 26px 0 0; }

/* Phone pass (Will, 8 Oct evening): "Stop wondering" 14% smaller, it sat too close to "what to post." */
@media (max-width: 1000px) {
  html.accepted-artwork .hero-copy .lede .lede-tag-1 { font-size: 13.93vw; }
  /* The text block is only as wide as its first line; with the shorter line it sat left. Centre it. */
  html.accepted-artwork .hero .hero-copy { align-self: center; margin-top: 6px; } /* 6 px of air under the phone picture (Will, 8 Oct) */
}

/* ==== how-stories.css ==== */
/* Preview only (preview-how-stories.html): "How it works" as three story cards, calmer motion.
   Desktop: three cards in a row. Phones: a swipe rail, one card at a time. */
#how .how-stories { list-style: none; margin: 0; padding: clamp(40px, 3.6vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 1.6vw, 26px); }
#how .hs-card { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; border: 1px solid rgba(233, 226, 217, .1); background: linear-gradient(180deg, #15181d, #0c0e11 72%); }
#how .hs-bars { display: flex; gap: 5px; padding: 14px 16px 0; }
#how .hs-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(233, 226, 217, .16); }
#how .hs-bars i.on { background: var(--ivory, #E9E2D9); }
#how .hs-viz { position: relative; margin: 14px 14px 0; aspect-ratio: 4 / 3.2; border-radius: 20px; overflow: hidden; border: 1px solid rgba(233, 226, 217, .08);
  background: radial-gradient(80% 70% at 50% 42%, #1b1611, #090a0d 76%); display: grid; place-content: center; justify-items: center; gap: 18px; }
#how .hs-body { padding: 24px 24px 30px; }
#how .hs-body .step-num { display: flex; align-items: baseline; gap: 10px; }
#how .hs-body h3 { margin: 14px 0 14px; font-size: clamp(26px, 2.1vw, 32px); text-wrap: balance; }
#how .hs-body p { color: var(--muted-warm, #A7A29C); font-size: 15.5px; line-height: 1.68; }

/* 01 Your voice: fingerprint with a slow glow, no waveform */
#how .hs-fp { position: relative; width: 104px; height: 104px; }
#how .hs-fp img { position: relative; width: 104px; height: 104px; }
#how .hs-fp::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 247, 251, .16), rgba(15, 247, 251, 0)); opacity: .5; }
#how .hs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 12px; }
#how .hs-chips span { font: 500 11.5px/1 var(--sans, Inter, sans-serif); padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(15, 247, 251, .3); color: #c5fbfc; }

/* 02 Top performers: 20 creator accounts, the picks lit */
#how .hs-accounts { display: grid; grid-template-columns: repeat(5, 40px); gap: 12px 14px; }
#how .hs-accounts i { position: relative; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 210deg, #5a4331, #2c2119, #5a4331); }
#how .hs-accounts i::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; border: 2px solid #0a0b0e;
  background: radial-gradient(circle at 50% 38%, #4a4039 0 22%, transparent 23%), radial-gradient(ellipse 60% 42% at 50% 96%, #4a4039 0 99%, transparent 100%), #1d1a18; }
#how .hs-accounts i.pick { background: conic-gradient(from 210deg, #0ff7fb, var(--bronze-bright, #D8AF86), #ffd7a8, #0ff7fb); box-shadow: 0 0 16px rgba(15, 247, 251, .3); }
#how .hs-accounts i.pick::before { background: radial-gradient(circle at 50% 38%, #d8b89b 0 22%, transparent 23%), radial-gradient(ellipse 60% 42% at 50% 96%, #d8b89b 0 99%, transparent 100%), #2a221c; }
#how .hs-scan { position: absolute; top: 0; bottom: 0; left: 6%; width: 1.5px; background: #0ff7fb; box-shadow: 0 0 14px 2px rgba(15, 247, 251, .45); opacity: .55; }

/* 03 Record & rate: one script card, a rating, REC */
#how .hs-rate { width: min(226px, 78%); padding: 16px 16px 14px; border-radius: 14px; border: 1px solid rgba(185, 135, 91, .55); background: linear-gradient(180deg, #121419, #0a0b0e); }
#how .hs-label { display: block; font: 500 9.5px/1 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .2em; color: #0ff7fb; }
#how .hs-label.dim { color: var(--fine, #8F8A84); letter-spacing: .14em; }
#how .hs-hook { font: 500 19px/1.2 var(--serif, 'Cormorant Garamond', serif); color: var(--paper, #F4EEE7); margin: 8px 0 14px; }
#how .hs-stars { font-size: 21px; letter-spacing: 4px; line-height: 1; margin-top: 7px; color: #3b3c41; }
#how .hs-stars b { font-weight: 400; color: var(--bronze-bright, #D8AF86); }
#how .hs-rec { position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--mono, monospace); letter-spacing: .1em; color: var(--paper, #F4EEE7); padding: 7px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); }
#how .hs-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4655; box-shadow: 0 0 8px rgba(255, 70, 85, .7); }

/* Calm motion: one slow glow, one slow sweep, one slow REC pulse. Off with Reduce Motion (unless ?motion=on). */
@keyframes hs-glow { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .8; transform: scale(1.04); } }
@keyframes hs-sweep { 0% { left: 6%; opacity: 0; } 12% { opacity: .55; } 55% { left: 94%; opacity: .55; } 66%, 100% { left: 94%; opacity: 0; } }
@keyframes hs-rec { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: no-preference) {
  #how .hs-fp::before { animation: hs-glow 6s ease-in-out infinite !important; }
  #how .hs-scan { animation: hs-sweep 9s ease-in-out infinite !important; }
  #how .hs-rec i { animation: hs-rec 2.6s ease-in-out infinite !important; }
}
html.motion-on #how .hs-fp::before { animation: hs-glow 6s ease-in-out infinite !important; }
html.motion-on #how .hs-scan { animation: hs-sweep 9s ease-in-out infinite !important; }
html.motion-on #how .hs-rec i { animation: hs-rec 2.6s ease-in-out infinite !important; }

/* Phones and tablets: swipe through the cards like stories */
@media (max-width: 1000px) {
  #how .how-stories { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter, 24px)); padding: 30px var(--gutter, 24px) 8px; scroll-padding-inline: var(--gutter, 24px); }
  #how .how-stories::-webkit-scrollbar { display: none; }
  #how .hs-card { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
  #how .hs-body { padding: 20px 20px 24px; }
  #how .hs-body h3 { font-size: 27px; }
  #how .hs-body p { font-size: 15px; }
  #how .hs-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  #how .hs-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(233, 226, 217, .25); transition: background .3s; }
  #how .hs-dots i.on { background: #0ff7fb; }
}
@media (min-width: 1001px) { #how .hs-dots { display: none; } }
/* fit tweaks after first render */
@media (min-width: 1001px) { #how .hs-viz { aspect-ratio: 16 / 10.5; } }
@media (max-width: 1000px) {
  #how .hs-viz { aspect-ratio: 4 / 3.1; gap: 14px; }
  #how .hs-accounts { grid-template-columns: repeat(5, 34px); gap: 10px 11px; }
  #how .hs-accounts i { width: 34px; height: 34px; }
  #how .hs-fp, #how .hs-fp img { width: 88px; height: 88px; }
  #how .hs-chips span { font-size: 11px; padding: 6px 9px; }
}
@media (max-width: 1000px) {
  #how .hs-rate { width: 76%; padding: 12px 13px 11px; margin-top: 16px; }
  #how .hs-hook { font-size: 16px; margin: 6px 0 10px; }
  #how .hs-stars { font-size: 17px; letter-spacing: 3px; }
  #how .hs-rec { top: 10px; right: 10px; padding: 5px 8px; font-size: 10px; }
}
@media (max-width: 1000px) { #how .hs-rec { top: auto; bottom: 10px; right: 10px; } }
@media (max-width: 1000px) { #how .hs-rec { display: none; } #how .hs-label.dim { letter-spacing: .08em; white-space: nowrap; font-size: 9px; } }

/* Round 2 (Will): no story bars, no chips; bigger fingerprint with the original page's scanner (.glyph-fp in mobile-pass.css);
   Record & rate: the stars fill in one at a time, like someone rating the script, then reset. */
#how .hs-viz { margin-top: 16px; }
#how .hs-fp-big img { width: clamp(150px, 12vw, 190px); height: auto; opacity: .95; }
#how .hs-rating i { font-style: normal; display: inline-block; color: #3b3c41; }
#how .hs-rating i:nth-child(-n+4) { color: var(--bronze-bright, #D8AF86); }
@keyframes hs-star { 0%, 8% { color: #3b3c41; transform: scale(1); } 14% { color: var(--bronze-bright, #D8AF86); transform: scale(1.35); } 20%, 82% { color: var(--bronze-bright, #D8AF86); transform: scale(1); } 90%, 100% { color: #3b3c41; transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  #how .hs-rating i:nth-child(-n+4) { animation: hs-star 5.5s ease-in-out infinite !important; }
}
html.motion-on #how .hs-rating i:nth-child(-n+4) { animation: hs-star 5.5s ease-in-out infinite !important; }
#how .hs-rating i:nth-child(2) { animation-delay: .35s !important; }
#how .hs-rating i:nth-child(3) { animation-delay: .7s !important; }
#how .hs-rating i:nth-child(4) { animation-delay: 1.05s !important; }
@media (max-width: 1000px) { #how .hs-fp-big img { width: 128px; } }

/* Round 3 (Will): sharper fingerprint, cards closer to the heading, bigger section title. Preview only. */
#how .hs-fp-big::after { -webkit-mask-image: url("assets/fingerprint-sharp.svg?v=1"); mask-image: url("assets/fingerprint-sharp.svg?v=1"); }
#how .hs-fp-big img { opacity: 1; }
html.accepted-artwork main > section#how .sec-head { margin-bottom: 0 !important; }
html.accepted-artwork main > section#how .sec-head h2.display-2 { font-size: clamp(38px, 4vw, 62px) !important; line-height: 1.02 !important; }
#how .how-stories { padding-top: clamp(36px, 3.4vw, 52px); }
@media (max-width: 1000px) { #how .how-stories { padding-top: 32px; } }

/* Round 4 (Will): fit the whole section on a MacBook screen; crisp vector account circles; even-width fingerprint. Preview only. */
#how .hs-fp-big::after { -webkit-mask-image: url("assets/fingerprint-sharp.svg?v=2"); mask-image: url("assets/fingerprint-sharp.svg?v=2"); }
#how .hs-accounts i, #how .hs-accounts i.pick { background: url("assets/hs-avatar.svg?v=1") center / 100% 100% no-repeat; }
#how .hs-accounts i.pick { background-image: url("assets/hs-avatar-pick.svg?v=1"); }
#how .hs-accounts i::before { display: none; }
@media (min-width: 1001px) {
  /* Heading on the left, intro paragraph on the right: the cards move up by the paragraph's height. */
  html.accepted-artwork main > section#how .sec-head { max-width: none !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
  #how .sec-head .kicker { grid-column: 1; grid-row: 1; }
  html.accepted-artwork main > section#how .sec-head h2.display-2 { grid-column: 1; grid-row: 2; margin-bottom: 0 !important; }
  html.accepted-artwork main > section#how .sec-head .sub { grid-column: 2; grid-row: 2; margin: 0 !important; max-width: none; padding-bottom: 4px; }
  #how .how-stories { padding-top: clamp(32px, 2.8vw, 48px); }
  #how .hs-viz { aspect-ratio: 16 / 8.4; }
  #how .hs-body { padding: 20px 24px 24px; }
  #how .hs-body h3 { margin: 12px 0 10px; }
}

/* Round 4b (Will): cards too big for the rest of the site. Match the plan cards' scale: tighter corners, shorter picture panel, smaller visuals and card titles. */
#how .hs-card { border-radius: 18px; }
#how .hs-viz { border-radius: 12px; margin: 12px 12px 0; }
@media (min-width: 1001px) {
  #how .hs-viz { aspect-ratio: 16 / 6.4; gap: 12px; }
  #how .hs-fp-big img { width: clamp(108px, 8.4vw, 132px); }
  #how .hs-accounts { grid-template-columns: repeat(5, 30px); gap: 8px 12px; }
  #how .hs-accounts i { width: 30px; height: 30px; }
  #how .hs-accounts i.pick { box-shadow: 0 0 12px rgba(15, 247, 251, .28); }
  #how .hs-rate { width: min(210px, 70%); padding: 12px 14px 11px; }
  #how .hs-hook { font-size: 16.5px; margin: 6px 0 10px; }
  #how .hs-stars { font-size: 17px; letter-spacing: 3px; margin-top: 5px; }
  #how .hs-rec { top: 10px; right: 10px; padding: 5px 8px; font-size: 10px; }
  #how .hs-body { padding: 18px 22px 22px; }
  #how .hs-body h3 { font-size: clamp(24px, 1.8vw, 28px); margin: 10px 0 10px; }
  #how .hs-body p { font-size: 15px; line-height: 1.62; }
}
@media (max-width: 1000px) {
  #how .hs-viz { aspect-ratio: 4 / 2.6; }
  #how .hs-fp-big img { width: 108px; }
  #how .hs-accounts { grid-template-columns: repeat(5, 28px); gap: 8px 10px; }
  #how .hs-accounts i { width: 28px; height: 28px; }
  #how .hs-body h3 { font-size: 25px; }
}

/* Round 5 (Will): round 4 cards went too small. Sit halfway between round 3 and round 4: taller, more card-like. */
#how .hs-card { border-radius: 22px; }
#how .hs-viz { border-radius: 16px; margin: 14px 14px 0; }
@media (min-width: 1001px) {
  #how .hs-viz { aspect-ratio: 16 / 8.8; gap: 14px; }
  #how .hs-fp-big img { width: clamp(136px, 10.4vw, 164px); }
  #how .hs-accounts { grid-template-columns: repeat(5, 36px); gap: 10px 14px; }
  #how .hs-accounts i { width: 36px; height: 36px; }
  #how .hs-rate { width: min(226px, 74%); padding: 14px 16px 13px; }
  #how .hs-hook { font-size: 18px; margin: 7px 0 12px; }
  #how .hs-stars { font-size: 19px; letter-spacing: 3.5px; margin-top: 6px; }
  #how .hs-rec { top: 12px; right: 12px; padding: 6px 9px; font-size: 10.5px; }
  #how .hs-body { padding: 22px 24px 28px; }
  #how .hs-body h3 { font-size: clamp(26px, 2vw, 30px); margin: 12px 0 12px; }
  #how .hs-body p { font-size: 15.5px; line-height: 1.65; }
}
@media (max-width: 1000px) {
  #how .hs-viz { aspect-ratio: 4 / 2.9; }
  #how .hs-fp-big img { width: 118px; }
  #how .hs-accounts { grid-template-columns: repeat(5, 31px); gap: 9px 11px; }
  #how .hs-accounts i { width: 31px; height: 31px; }
  #how .hs-body h3 { font-size: 26px; }
}

/* Round 6 (Will): heading and intro back stacked on the left (like the original); cards taller, round 3 shape, keeping the crisp art. */
@media (min-width: 1001px) {
  html.accepted-artwork main > section#how .sec-head { display: block; max-width: 820px !important; }
  html.accepted-artwork main > section#how .sec-head h2.display-2 { margin-bottom: 20px !important; }
  html.accepted-artwork main > section#how .sec-head .sub { margin: 0 !important; max-width: 680px; padding-bottom: 0; }
  #how .how-stories { padding-top: clamp(36px, 3.2vw, 52px); }
  #how .hs-card { border-radius: 24px; }
  #how .hs-viz { aspect-ratio: 16 / 10.5; gap: 16px; border-radius: 18px; }
  #how .hs-fp-big img { width: clamp(150px, 12vw, 184px); }
  #how .hs-accounts { grid-template-columns: repeat(5, 40px); gap: 12px 14px; }
  #how .hs-accounts i { width: 40px; height: 40px; }
  #how .hs-rate { width: min(226px, 78%); padding: 16px 16px 14px; }
  #how .hs-hook { font-size: 19px; margin: 8px 0 14px; }
  #how .hs-stars { font-size: 21px; letter-spacing: 4px; margin-top: 7px; }
  #how .hs-rec { top: 14px; right: 14px; padding: 7px 10px; font-size: 11px; }
  #how .hs-body { padding: 24px 24px 30px; }
  #how .hs-body h3 { font-size: clamp(28px, 2.1vw, 32px); margin: 14px 0 14px; }
  #how .hs-body p { font-size: 15.5px; line-height: 1.68; }
}
/* Round 6 (Will): same bronze border as the plan cards. */
#how .hs-card { border: 1px solid rgba(185, 154, 118, 0.32); }

/* Round 7 (Will, 14in MacBook Pro): smaller cards so the section has breathing room above and below. */
@media (min-width: 1001px) {
  html.accepted-artwork main > section#how .sec-head .kicker { margin-bottom: 18px; }
  html.accepted-artwork main > section#how .sec-head h2.display-2 { margin-bottom: 16px !important; }
  #how .how-stories { padding-top: clamp(30px, 2.6vw, 44px); gap: clamp(18px, 1.8vw, 28px); }
  #how .hs-card { border-radius: 20px; }
  #how .hs-viz { aspect-ratio: 16 / 7.4; gap: 12px; border-radius: 14px; margin: 12px 12px 0; }
  #how .hs-fp-big img { width: clamp(118px, 9vw, 140px); }
  #how .hs-accounts { grid-template-columns: repeat(5, 32px); gap: 8px 13px; }
  #how .hs-accounts i { width: 32px; height: 32px; }
  #how .hs-rate { width: min(214px, 72%); padding: 12px 14px 11px; }
  #how .hs-hook { font-size: 17px; margin: 6px 0 10px; }
  #how .hs-stars { font-size: 18px; letter-spacing: 3px; margin-top: 5px; }
  #how .hs-rec { top: 10px; right: 10px; padding: 5px 8px; font-size: 10px; }
  #how .hs-body { padding: 18px 22px 22px; }
  #how .hs-body h3 { font-size: clamp(26px, 1.9vw, 29px); margin: 10px 0 10px; }
  #how .hs-body p { font-size: 15px; line-height: 1.6; }
}
/* Explore the portal: bigger heading, "you'll receive weekly" on its own line (one text node so the electric sweep still traces both lines). */
#demo .demo-heading h2.vz-zap { white-space: pre-line; }
html.accepted-artwork main > section#demo .demo-heading h2.display-2 { font-size: clamp(38px, 4vw, 62px) !important; line-height: 1.02 !important; }
@media (min-width: 1001px) {
  html.accepted-artwork main > section#how .sec-head { max-width: 900px !important; }
  html.accepted-artwork main > section#how .sec-head .sub { max-width: 860px; }
  #how .hs-viz { aspect-ratio: 16 / 6.6; }
}

/* Round 8 (Will): the site's notch motif and the same bronze border as "Book a free discovery call" (.btn-primary):
   square corners, top-right corner cut, a thin bronze line along the cut. */
#how .hs-card { --hs-line: rgba(203, 172, 136, 0.78); --hs-cut: 18px; position: relative; border-radius: 0; border: 1px solid var(--hs-line);
  clip-path: polygon(0 0, calc(100% - var(--hs-cut)) 0, 100% var(--hs-cut), 100% 100%, 0 100%); }
#how .hs-card::before { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; background: var(--hs-line);
  clip-path: polygon(calc(100% - var(--hs-cut)) 0, 100% var(--hs-cut), 100% calc(var(--hs-cut) + 1.8px), calc(100% - var(--hs-cut) - 1.8px) 0); }
/* Picture panel inside: square with a small matching cut, so it doesn't fight the card's corners. */
#how .hs-viz { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
#how .hs-viz::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: rgba(233, 226, 217, .14);
  clip-path: polygon(calc(100% - 12px) 0, 100% 12px, 100% 13.4px, calc(100% - 13.4px) 0); }
/* Hook card inside card 03: same motif and border. */
#how .hs-rate { position: relative; border-radius: 0; border: 1px solid rgba(203, 172, 136, 0.78); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
#how .hs-rate::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: rgba(203, 172, 136, 0.78);
  clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 11.6px, calc(100% - 11.6px) 0); }

/* Round 9 (Will): every box uses the field-button border exactly: 1px rgb(101,81,62), square corners, 12px top-right cut,
   ivory rgb(224,215,204) line along the cut. Venzor Max uses the selected-field (cyan) version. Preview only. */
#how .hs-card, #how .hs-rate, #plans .plan-card, #plans .plan-compare-toggle {
  --box-line: rgb(101, 81, 62); --box-cut-line: rgb(224, 215, 204); --box-cut: 12px;
  position: relative; border-radius: 0 !important; border: 1px solid var(--box-line) !important;
  clip-path: polygon(0 0, calc(100% - var(--box-cut)) 0, 100% var(--box-cut), 100% 100%, 0 100%) !important; }
#plans .plan-card.plan-card-max { --box-line: rgb(120, 210, 222); --box-cut-line: rgb(171, 237, 241); }
#how .hs-card::before, #how .hs-rate::before, #plans .plan-card::before, #plans .plan-compare-toggle::before {
  content: "" !important; position: absolute !important; inset: -1px !important; z-index: 3; pointer-events: none; background: var(--box-cut-line) !important;
  border: 0 !important; border-radius: 0 !important; transform: none !important; opacity: 1 !important; width: auto !important; height: auto !important;
  clip-path: polygon(calc(100% - var(--box-cut)) 0, 100% var(--box-cut), 100% calc(var(--box-cut) + 1.8px), calc(100% - var(--box-cut) - 1.8px) 0) !important; }

/* One gap under the three section titles (How it works, See what you'll receive weekly, What you get): 28px. */
@media (min-width: 1001px) {
  html.accepted-artwork main > section#how .sec-head h2.display-2 { margin-bottom: 28px !important; }
  html.accepted-artwork main > section#plans .sec-head { margin-bottom: 0 !important; }
  html.accepted-artwork main > section#plans .sec-head h2.display-2 { margin-bottom: 28px !important; }
  html.accepted-artwork main > section#demo .demo-heading { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  html.accepted-artwork main > section#demo .demo-heading h2.display-2 { margin-bottom: 28px !important; }
}
@media (min-width: 1001px) { html.accepted-artwork main > section#demo .showcase-fields { transform-origin: left top; } }
/* Venzor Max: keep the notch cut but let the electric rim glow spill 20px past the edges (the plain notch clip was cutting it in half). */
#plans .plan-card.plan-card-max { clip-path: polygon(-20px -20px, calc(100% - 32px) -20px, calc(100% + 20px) 32px, calc(100% + 20px) calc(100% + 20px), -20px calc(100% + 20px)) !important; }

/* Round 10 (Will): plan cards are about twice as wide as the field buttons, so their notch doubles (24px); title gap 28px to 36px on all three sections. */
#plans .plan-card { --box-cut: 24px; }
#plans .plan-card.plan-card-max { clip-path: polygon(-20px -20px, calc(100% - 44px) -20px, calc(100% + 20px) 44px, calc(100% + 20px) calc(100% + 20px), -20px calc(100% + 20px)) !important; }
#plans .plan-card::before { clip-path: polygon(calc(100% - var(--box-cut)) 0, 100% var(--box-cut), 100% calc(var(--box-cut) + 2.4px), calc(100% - var(--box-cut) - 2.4px) 0) !important; }
@media (min-width: 1001px) {
  html.accepted-artwork main > section#how .sec-head h2.display-2,
  html.accepted-artwork main > section#plans .sec-head h2.display-2,
  html.accepted-artwork main > section#demo .demo-heading h2.display-2 { margin-bottom: 36px !important; }
}

/* Round 11 hero-button override removed 30 Sep (Will: hero back to how it was before today). */

/* Headline options (preview only, desktop only): live text in the site's Cormorant Garamond instead of the lettering image,
   on the same left edge as the paragraph's bronze bar. ?headline=1..4. Phone layout unchanged. */
.hero-copy h1 br.hl-br { display: none; }
@media (min-width: 1001px) {
  html.hl .opening-lettering { display: none !important; }
  html.accepted-artwork.hl .hero-copy h1 { display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
    overflow: visible !important; clip-path: none !important; transform: none !important; font-family: var(--serif, "Cormorant Garamond"), serif; font-weight: 500; letter-spacing: -.018em; }
  html.hl .hero-copy h1 .l1 { display: block; color: #f4f4f3; }
  html.hl .hero-copy h1 .l2 { display: block; font-style: italic; color: #e09665; -webkit-text-stroke: .3px #e09665; }
  html.accepted-artwork.hl .hero-copy .lede { margin-top: clamp(28px, 2.4vw, 44px) !important; }
  /* 1 Tighter: same two lines, italic line brought closer to the first line's size. */
  html.hl-1 .hero-copy h1 .l1 { font-size: 4.2vw; line-height: 1.08; }
  html.hl-1 .hero-copy h1 .l2 { font-size: 5.3vw; line-height: 1.02; }
  /* 2 Block: both lines the same width, a neat rectangle. */
  html.hl-2 .hero-copy h1 .l1 { font-size: 3.44vw; line-height: 1.12; letter-spacing: -.005em; }
  html.hl-2 .hero-copy h1 .l2 { font-size: 6.35vw; line-height: .98; }
  /* 3 Three lines: "Video scripts / in your voice / Ready to record", a taller, narrower block like the section titles. */
  html.hl-3 .hero-copy h1 br.hl-br { display: inline; }
  html.hl-3 .hero-copy h1 .l1 { font-size: 4.6vw; line-height: 1.02; }
  html.hl-3 .hero-copy h1 .l2 { font-size: 5.6vw; line-height: 1.04; }
  /* 4 Statement: small lead line, "Ready to record" as the big statement. */
  html.hl-4 .hero-copy h1 .l1 { font-size: 2.15vw; line-height: 1.2; letter-spacing: 0; color: #e7e1da; margin-bottom: .1em; }
  html.hl-4 .hero-copy h1 .l2 { font-size: 7.9vw; line-height: .96; }
}
/* Option switcher bar (preview only). */
.hl-switch { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9999; display: flex; gap: 4px; padding: 6px; background: rgba(12, 13, 16, .92);
  border: 1px solid rgb(101, 81, 62); font: 500 13px/1 Inter, sans-serif; backdrop-filter: blur(6px); }
.hl-switch a { color: #cfc6bb; text-decoration: none; padding: 9px 12px; white-space: nowrap; }
.hl-switch a.on { background: rgba(120, 210, 222, .14); color: #abedf1; outline: 1px solid rgb(120, 210, 222); }
@media (max-width: 1000px) { .hl-switch { display: none; } }
@media (min-width: 1001px) { html.hl .hero-copy h1 .l1, html.hl .hero-copy h1 .l2 { white-space: nowrap; } html.hl-3 .hero-copy h1 .l1 { white-space: normal; } }

/* Top menu: "Max" in Venzor blue, like everywhere Venzor Max appears. */
.nav a .vz-blue, #mobile-menu .vz-blue { color: #0ff7fb; }

/* More headline options (round 2), built on a uniform shape. Measured widths at 1512: "Video scripts in your voice" is 9.8x its font size,
   "Ready to record" italic 5.2x, "Video scripts" / "in your voice" 4.6x. */
@media (min-width: 1001px) {
  /* 5 Even block: both lines end at the same width (about 600px on a 14in MacBook), first line bigger than option 2. */
  html.hl-5 .hero-copy h1 .l1 { font-size: 4.04vw; line-height: 1.1; letter-spacing: -.005em; }
  html.hl-5 .hero-copy h1 .l2 { font-size: 7.6vw; line-height: .96; }
  /* 6 Even stack: three lines, all the same width; "Video scripts / in your voice" bigger, italic under it. */
  html.hl-6 .hero-copy h1 br.hl-br { display: inline; }
  html.hl-6 .hero-copy h1 .l1 { white-space: normal; font-size: 6.2vw; line-height: .98; }
  html.hl-6 .hero-copy h1 .l2 { font-size: 5.55vw; line-height: 1.04; }
  /* 7 Centered: the two lines centered on each other, and the paragraph and buttons centered under them. */
  html.hl-7 .hero-copy { text-align: center !important; }
  html.hl-7 .hero-copy h1 .l1 { font-size: 4.3vw; line-height: 1.08; }
  html.hl-7 .hero-copy h1 .l2 { font-size: 6.6vw; line-height: 1; }
  html.accepted-artwork.hl-7 .hero-copy .lede { padding-left: 0 !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
  html.hl-7 .hero-copy .lede::before { display: none; }
  html.hl-7 .hero-copy .hero-platform-line { text-align: center; padding-left: 0 !important; margin-left: 0 !important; }
  html.accepted-artwork.hl-7 .hero-copy .cta-row { justify-content: center !important; margin-left: 0 !important; }
}
.opening-menu a .vz-blue { color: #0ff7fb; }

/* Option 7 round 2 (Will): first line a hair taller than "Ready to record" so the two lines form a V; wider column so the first line fits
   starting on the page edge; optical centering offsets (em) added after measuring the ink of each line. */
@media (min-width: 1001px) {
  html.accepted-artwork.hl-7 .hero-copy { width: 46vw !important; }
  html.hl-7 .hero-copy h1 .l1 { font-size: 4.6vw; line-height: 1.1; letter-spacing: -.012em; transform: translateX(var(--hl7-x1, 0em)); }
  html.hl-7 .hero-copy h1 .l2 { font-size: 4.34vw; line-height: 1.08; letter-spacing: 0; transform: translateX(var(--hl7-x2, 0em)); margin-top: .02em; }
}
/* Measured ink offsets at 1512 (line 1 +1.9px, line 2 +0.7px right of center), corrected in em so they scale with the type. */
@media (min-width: 1001px) { html.hl-7 { --hl7-x1: -0.0273em; --hl7-x2: -0.0107em; } }

/* Phone headline options (preview only): ?phone=a centered stack, ?phone=b centered two-line V. Default phone view unchanged. */
@media (max-width: 1000px) {
  html.ph-a .hero-copy, html.ph-b .hero-copy { text-align: center; }
  html.ph-a .hero-copy h1 .l1, html.ph-a .hero-copy h1 .l2, html.ph-b .hero-copy h1 .l1, html.ph-b .hero-copy h1 .l2 { text-align: center; text-wrap: nowrap; }
  html.accepted-artwork.ph-a .hero-copy h1, html.accepted-artwork.ph-b .hero-copy h1 { transform: none !important; }
  html.ph-a .hero-copy .lede, html.ph-b .hero-copy .lede { text-align: center; margin-left: auto; margin-right: auto; padding-left: 0 !important; }
  html.ph-a .hero-copy .lede::before, html.ph-b .hero-copy .lede::before { display: none; }
  html.ph-a .hero-copy .hero-platform-line, html.ph-b .hero-copy .hero-platform-line { text-align: center; padding-left: 0 !important; margin-left: 0 !important; }
  html.ph-a .hero-copy .cta-row, html.ph-b .hero-copy .cta-row { justify-content: center; align-items: center; margin-left: 0 !important; }
  /* A: "Video scripts / in your voice" a hair taller than "Ready to record"; three centered lines about the same width. */
  html.ph-a .hero-copy h1 br.hl-br { display: inline; }
  html.accepted-artwork.ph-a .hero-copy h1 .l1 { font-size: 11.5vw !important; line-height: 1.03 !important; }
  html.accepted-artwork.ph-a .hero-copy h1 .l2 { font-size: 10.4vw !important; line-height: 1.08 !important; }
  /* B: true V, two lines; first line fills the width, "Ready to record" a hair smaller under it. */
  html.accepted-artwork.ph-b .hero-copy h1 .l1 { font-size: 9.1vw !important; line-height: 1.1 !important; letter-spacing: -.012em; }
  html.accepted-artwork.ph-b .hero-copy h1 .l2 { font-size: 8.6vw !important; line-height: 1.1 !important; }
}
@media (max-width: 1000px) {
  html.accepted-artwork.ph-b .hero-copy h1 .l1 { font-size: 8.6vw !important; }
  html.accepted-artwork.ph-b .hero-copy h1 .l2 { font-size: 8.15vw !important; }
}

/* Desktop hero placement (Will, 30 Sep evening, approved from a before/after render): the phone, the text block and the
   background plate move down 50px together so the composition is centred in the band under the nav instead of on the
   whole window (phone centre 49% -> 55% at 1512x860). Nav untouched; phones untouched.
   5 Oct 2026: the outer-ring correction layer was missing from this list, so it sat 50px above the artwork and doubled the
   rings (Will: "it's like an echo"). It moves with the artwork now. */
@media (min-width: 1001px) {
  html.accepted-artwork .hero > .hero-art,
  html.accepted-artwork .hero .hero-copy,
  html.accepted-artwork .hero .hero-bg-clean,
  html.accepted-artwork .hero > .hero-outer-ring-source,
  html.accepted-artwork .hero > picture { transform: translateY(50px); }
}

/* Desktop nav text a little bigger (Will, 30 Sep evening): 11px -> 12.5px on a 14in MacBook, 15px -> 17px on a 40in. */
@media (min-width: 1001px) {
  html.accepted-artwork .opening-menu a { font-size: clamp(12.5px, .8vw, 17px); }
}

/* Desktop body text thinner (Will, 1 Oct): same font, Inter 300, everything that is not a title. Titles untouched. */
@media (min-width: 1001px) {
  html.accepted-artwork :is(.hero-copy .lede, .hero-platform-line, #how .sec-head .sub, #how .hs-body p, #demo .demo-heading .sub, #demo .demo-notice, #demo .demo-kit-note, #team .sec-head .sub, #team .team-member p, #plans .plan-card li, #plans .plan-cards-note, #plans .plan-offer-fine, #plans .plan-offer-per, #plans .plan-table td, #details details p, #details summary, #book .lede) { font-weight: 300; color: #d8d3cc; }
}

/* ==== inline-body.css ==== */
/* was inline <style> at index.html line 256 (30 Sep 2026) */
/* Same left-side fade as the old SVG filter, as a plain overlay so the phone and its live screen are not rasterised through a filter (which blurred them on Retina screens). */.accepted-artwork .hero-art>.hero-fade-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:#090a0d;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201907%201280%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22x%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22620%22%20x2%3D%221000%22%3E%3Cstop%20stop-color%3D%22white%22/%3E%3Cstop%20offset%3D%22.2%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.94%22/%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.68%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.32%22/%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.07%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22y%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22white%22/%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22white%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3Cmask%20id%3D%22v%22%3E%3Crect%20y%3D%22180%22%20width%3D%221000%22%20height%3D%22925%22%20fill%3D%22url%28%23y%29%22/%3E%3C/mask%3E%3C/defs%3E%3Crect%20y%3D%22180%22%20width%3D%221000%22%20height%3D%22925%22%20fill%3D%22url%28%23x%29%22%20mask%3D%22url%28%23v%29%22/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201907%201280%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22x%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22620%22%20x2%3D%221000%22%3E%3Cstop%20stop-color%3D%22white%22/%3E%3Cstop%20offset%3D%22.2%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.94%22/%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.68%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.32%22/%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22white%22%20stop-opacity%3D%22.07%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id%3D%22y%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22white%22/%3E%3Cstop%20offset%3D%22.84%22%20stop-color%3D%22white%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22/%3E%3C/linearGradient%3E%3Cmask%20id%3D%22v%22%3E%3Crect%20y%3D%22180%22%20width%3D%221000%22%20height%3D%22925%22%20fill%3D%22url%28%23y%29%22/%3E%3C/mask%3E%3C/defs%3E%3Crect%20y%3D%22180%22%20width%3D%221000%22%20height%3D%22925%22%20fill%3D%22url%28%23x%29%22%20mask%3D%22url%28%23v%29%22/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

/* was inline <style> at index.html line 402 (30 Sep 2026) */
.hero-outer-ring-source,.hero-bg-clean{display:none}
@media(min-width:1001px){
.hero-outer-ring-source{display:block;position:absolute;right:0;top:calc((var(--hero-height) - 54.663vw) / 2);width:81.48441%;height:auto;aspect-ratio:5056 / 3392;z-index:1;pointer-events:none;overflow:hidden}
/* Flattens the faint smudges left of the rings (old ring-overlay seams, 1-2 shades off black) to the page black; rings are left untouched. */
.hero-bg-clean{display:block;position:absolute;right:0;top:calc((var(--hero-height) - 54.663vw) / 2);width:81.48441%;height:auto;aspect-ratio:5056 / 3392;z-index:1;pointer-events:none}
}

/* ==== pricing-offer.css ==== */
/* Monthly plan prices and discovery-call buttons. Source for site.css; run build-css.js. */
.plan-offer { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid rgba(185,154,118,.22); }
.plan-card-max .plan-offer { border-bottom-color: rgba(15,247,251,.22); }
.plan-offer-price { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.plan-offer-now { font: 500 46px/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #f1e8dc; }
.plan-card-max .plan-offer-now { color: #ffffff; }
.plan-offer-per { font: 400 16px/1.2 Inter, system-ui, sans-serif; color: #cfcac4; }
.plan-offer-cta.btn { margin: 18px 0 0; width: 100%; justify-content: center; text-align: center; }
.plan-offer-fine { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #8b8b95; }
@media (max-width: 1000px) { .plan-offer-now { font-size: 40px; } }

/* 1 Oct (Will: the block read as one blob): rows get air and thin bronze rules between the groups. */
.plan-offer-cta.btn { margin-top: 22px; }
.plan-offer-fine { margin-top: 14px; }
.plan-offer { padding-bottom: 24px; margin-bottom: 26px; }
@media (max-width: 1000px) {
  html.accepted-artwork #plans .plan-offer-cta.btn { margin-top: 18px; }
  html.accepted-artwork #plans .plan-offer { padding-bottom: 20px; margin-bottom: 22px; }
}
/* 1 Oct: billing line removed (Will); the button closes the block. */
.plan-offer .plan-offer-cta.btn { margin-bottom: 2px; }
/* 8 Oct 2026 (Will): the corner notch on the two plan buttons is bronze like the other buttons, not the blue of the label. */
.accepted-artwork #plans .plan-offer-cta.btn::before { background: var(--bronze); opacity: 1; }
/* 10 Oct 2026 (Will): the two plan buttons a little narrower on phones, not full card width. */
@media (max-width: 1000px) {
  html.accepted-artwork #plans .plan-offer-cta.btn { width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
}

/* ==== compare.css ==== */
/* Comparison table preview (1 Oct): feature column stays put, plan columns scroll on phones; Max column lit. */
.compare-wrap { margin: 28px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.compare-wrap::-webkit-scrollbar { display: none; }
.compare { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; color: #e4e0da; }
.compare th, .compare td { padding: 16px 14px; vertical-align: top; text-align: left; border-bottom: 1px dashed rgba(185,154,118,.28); }
.compare thead th { font: 500 18px/1.2 Inter, system-ui, sans-serif; color: #ddc5a6; padding-bottom: 18px; border-bottom: 1px solid rgba(185,154,118,.4); }
.compare thead th small { display: block; margin-top: 6px; font: 300 13px/1.3 Inter, system-ui, sans-serif; color: #96959c; }
.compare th.c-feature { width: 36%; }
.compare tbody th { font-weight: 300; color: #e4e0da; }
.compare tbody th, .compare th.c-feature { position: sticky; left: 0; z-index: 2; background: #090a0d; box-shadow: 8px 0 12px -8px rgba(0,0,0,.8); }
.compare .c-group th { padding-top: 26px; font: 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #ddc5a6; border-bottom: 0; }
.compare td.c-text { font-weight: 300; }
.compare .c-mark { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 600; }
.compare td.c-yes .c-mark { background: rgba(15,247,251,.16); color: #0ff7fb; }
.compare td.c-no .c-mark { color: #6b6a70; border: 1px solid #3a3a40; }
.compare thead th.c-max, .compare td:nth-child(3) { background: rgba(15,247,251,.045); }
.compare thead th.c-max { color: #0ff7fb; box-shadow: inset 0 3px 0 rgba(15,247,251,.55); }
@media (min-width: 1001px) { .compare { min-width: 0; } }
@media (max-width: 1000px) {
  .compare { min-width: 620px; font-size: 14px; }
  .compare th.c-feature { width: 150px; min-width: 150px; }
  .compare th, .compare td { padding: 14px 12px; }
  .compare tbody th { background: #090a0d; }
  html.accepted-artwork #plans .compare tbody th { text-align: left; }
  .compare-hint { margin: 10px 0 0; font: 11px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8b8b95; text-align: center; }
}

/* Phone fixes: group labels stay pinned like the feature column; sticky column fully opaque so nothing shows beneath;
   Light column text has room; a hint says the table scrolls sideways. */
@media (max-width: 1000px) {
  .compare .c-group th { position: sticky; left: 0; z-index: 2; background: #090a0d; width: auto; }
  .compare tbody th, .compare th.c-feature { background: #0b0c10; box-shadow: 10px 0 14px -6px rgba(0,0,0,.9); }
  .compare { min-width: 700px; }
  .compare th.c-light, .compare th.c-max { min-width: 240px; }
}

/* 1 Oct (Will): the plan columns were cut off while swiping; the feature column is narrower and the plan text runs as
   a column (one plan fills the view at a time on phones). */
@media (max-width: 1000px) {
  .compare { min-width: calc(112px + 2 * (100vw - 48px - 112px)); font-size: 13.5px; }
  .compare th.c-feature { width: 112px; min-width: 112px; }
  .compare tbody th { font-size: 12.5px; line-height: 1.35; padding-right: 8px; }
  .compare th.c-light, .compare th.c-max { min-width: calc(100vw - 48px - 112px); }
  .compare td { width: calc(100vw - 48px - 112px); }
}

/* 1 Oct evening (Will, option A): feature names in one bronze, a touch heavier; separators are solid hairlines in a light
   Venzor blue instead of dashed bronze; "Personal support" and "Filming kit" labels a little bigger. Desktop and phones (shared table). */
.compare th, .compare td { border-bottom: 1px solid rgba(15,247,251,.22); }
.compare thead th { border-bottom-color: rgba(15,247,251,.4); }
.compare tbody th { font-weight: 400; color: #d8b791; }
.compare .c-group th { font-size: 14px; letter-spacing: .18em; color: #e6cfae; border-bottom: 0; }

/* 1 Oct evening (Will): the Venzor Max column keeps its original separators (dashed bronze); the blue lines stay on the
   feature and Light columns only. */
.compare td:nth-child(3) { border-bottom: 1px dashed rgba(185,154,118,.28); }
.compare thead th.c-max { border-bottom: 1px solid rgba(185,154,118,.4); }

/* 1 Oct evening (Will): the side-by-side comparison opens from a button on desktop as well, same as phones, so the page stays clean. */
@media (min-width: 1001px) {
  html.accepted-artwork #plans .compare-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 30px auto 0; padding: 13px 24px; border: 1px solid #b9875b; border-radius: 999px; background: rgba(185,135,91,.09); font: 12px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #c5fdfe; cursor: pointer; }
  html.accepted-artwork #plans .plan-cards + .compare-toggle { display: flex; width: max-content; }
  html.accepted-artwork #plans .compare-toggle-arrow { font-size: 13px; transition: transform .25s ease; }
  html.accepted-artwork #plans.compare-open .compare-toggle-arrow { transform: rotate(180deg); }
  html.accepted-artwork #plans .compare-hint { display: none; }
  html.accepted-artwork #plans .compare-wrap { display: none; }
  html.accepted-artwork #plans.compare-open .compare-wrap { display: block; }
}

/* ==== max-sell.css ==== */
/* Max proposal (2 Oct 2026): the Venzor Max plan card leads with the team (faces + first-month steps), then groups the
   research and the per-script extras. Light card untouched. Desktop values first, phone values inside max-width 1000px. */
#plans .plan-card.plan-card-max .max-team { margin: 0 0 22px; padding: 20px 22px 18px; border: 1px solid rgba(15,247,251,.28); background: rgba(15,247,251,.045); }
#plans .plan-card.plan-card-max .max-team-head { display: flex; align-items: center; gap: 16px; }
#plans .plan-card.plan-card-max .max-team-faces { display: flex; flex: none; }
#plans .plan-card.plan-card-max .max-team-faces img { width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; border: 2px solid #0b1a1d; object-fit: cover; object-position: 50% 12%; }
#plans .plan-card.plan-card-max .max-team-faces img:first-child { margin-left: 0; }
#plans .plan-card.plan-card-max .max-team-title { margin: 0; font: 500 21px/1.2 Inter, system-ui, sans-serif; color: #f4f1ec; }
#plans .plan-card.plan-card-max .max-team-sub { margin: 12px 0 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: #cfcac4; }
#plans .plan-card.plan-card-max .max-steps { list-style: none; margin: 18px 0 0; padding: 0; }
#plans .plan-card.plan-card-max .max-steps li { position: relative; padding: 0 0 16px 28px; border-top: 0; font-size: 16px; line-height: 1.5; color: #e4e0da; }
#plans .plan-card.plan-card-max .max-steps li:last-child { padding-bottom: 0; }
#plans .plan-card.plan-card-max .max-steps li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #0ff7fb; background: #0b1a1d; animation: none !important; }
#plans .plan-card.plan-card-max .max-steps li::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: -3px; width: 1px; background: rgba(15,247,251,.3); }
#plans .plan-card.plan-card-max .max-steps li:last-child::after { display: none; }
#plans .plan-card.plan-card-max .max-step-when { display: block; margin: 0 0 3px; font: 11px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #ddc5a6; }
#plans .plan-card.plan-card-max .max-group { margin: 22px 0 12px; font: 12px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #ddc5a6; }
#plans .plan-card.plan-card-max .plan-card-plus + .max-group { margin-top: 0; }
#plans .plan-card.plan-card-max ul + .max-team { margin-top: 22px; }
@media (max-width: 1000px) {
  #plans .plan-card.plan-card-max .max-team { margin-bottom: 16px; padding: 14px 14px 14px; }
  #plans .plan-card.plan-card-max .max-team-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  #plans .plan-card.plan-card-max .max-team-faces img { width: 36px; height: 36px; margin-left: -9px; }
  #plans .plan-card.plan-card-max .max-team-title { font-size: 17px; }
  #plans .plan-card.plan-card-max .max-team-sub { margin-top: 10px; font-size: 14px; line-height: 1.45; }
  #plans .plan-card.plan-card-max .max-steps { margin-top: 14px; }
  #plans .plan-card.plan-card-max .max-steps li { padding: 0 0 12px 24px; font-size: 14px; line-height: 1.45; }
  #plans .plan-card.plan-card-max .max-steps li::before { left: 2px; top: 4px; }
  #plans .plan-card.plan-card-max .max-steps li::after { left: 7px; top: 17px; }
  #plans .plan-card.plan-card-max .max-step-when { font-size: 10px; letter-spacing: .12em; }
  #plans .plan-card.plan-card-max .max-group { margin: 16px 0 8px; font-size: 11px; letter-spacing: .14em; }
}
/* Compare button made more pronounced (Will, 2 Oct 2026): larger type, brighter bronze edge, soft glow, full width on phones. */
html.accepted-artwork #plans .plan-cards + .compare-toggle { min-height: 62px; margin-top: 36px; padding: 18px 40px; gap: 14px; border-color: #e0b184; background: linear-gradient(180deg, rgba(185,135,91,.26), rgba(185,135,91,.12)); box-shadow: 0 0 0 1px rgba(224,177,132,.25), 0 0 28px rgba(185,135,91,.28); font-size: 15px; font-weight: 500; letter-spacing: .16em; color: #ffffff; }
html.accepted-artwork #plans .plan-cards + .compare-toggle .compare-toggle-arrow { font-size: 18px; color: #0ff7fb; }
@media (hover: hover) { html.accepted-artwork #plans .plan-cards + .compare-toggle:hover { background: linear-gradient(180deg, rgba(185,135,91,.36), rgba(185,135,91,.18)); } }
@media (max-width: 1000px) {
  html.accepted-artwork #plans .plan-cards + .compare-toggle { width: 100%; min-height: 58px; margin-top: 22px; padding: 16px 14px; gap: 10px; font-size: 12.5px; letter-spacing: .12em; }
  html.accepted-artwork #plans .plan-cards + .compare-toggle .compare-toggle-arrow { font-size: 16px; }
}
/* Research group graphic (VENZOR_BUSINESS, 2 Oct 2026): account ring marks feeding into one script card, Venzor blue. */
#plans .plan-card.plan-card-max .max-research { margin: 0 0 22px; padding: 20px 22px 18px; border: 1px solid rgba(15,247,251,.28); background: rgba(15,247,251,.045); }
#plans .plan-card.plan-card-max .max-research .max-group { margin: 14px 0 10px; }
#plans .plan-card.plan-card-max .max-research ul li:first-child { padding-top: 2px; }
#plans .plan-card.plan-card-max .max-research-viz { display: flex; align-items: center; gap: 12px; height: 44px; }
#plans .plan-card.plan-card-max .mr-accounts { display: grid; grid-template-columns: repeat(4, 18px); gap: 6px 7px; }
#plans .plan-card.plan-card-max .mr-accounts i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(185,154,118,.55); background: #0b1a1d; }
#plans .plan-card.plan-card-max .mr-accounts i.pick { border-color: #0ff7fb; background: radial-gradient(circle, rgba(15,247,251,.55) 0 30%, #0b1a1d 32%); box-shadow: 0 0 10px rgba(15,247,251,.35); }
#plans .plan-card.plan-card-max .mr-flow { flex: none; width: 36px; height: 1px; background: linear-gradient(90deg, rgba(185,154,118,.5), #0ff7fb); position: relative; }
#plans .plan-card.plan-card-max .mr-flow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-right: 1px solid #0ff7fb; border-top: 1px solid #0ff7fb; transform: rotate(45deg); }
#plans .plan-card.plan-card-max .mr-script { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 46px; height: 44px; padding: 7px 8px; border: 1px solid #0ff7fb; border-radius: 4px; background: rgba(15,247,251,.08); box-shadow: 0 0 14px rgba(15,247,251,.25); }
#plans .plan-card.plan-card-max .mr-script b { display: block; height: 2px; border-radius: 1px; background: rgba(15,247,251,.7); }
#plans .plan-card.plan-card-max .mr-script b:nth-child(1) { width: 70%; background: #0ff7fb; }
#plans .plan-card.plan-card-max .mr-script b:nth-child(3) { width: 85%; }
#plans .plan-card.plan-card-max .mr-script b:nth-child(4) { width: 55%; }
#plans .plan-card.plan-card-max .max-team-head { margin-bottom: 2px; }
#plans .plan-card.plan-card-max .max-research + .max-team { margin-top: 0; }
@media (max-width: 1000px) {
  #plans .plan-card.plan-card-max .max-research { margin-bottom: 16px; padding: 14px; }
  #plans .plan-card.plan-card-max .max-research .max-group { margin: 12px 0 8px; }
}
/* Calmer Max card (Will yes, 2 Oct 2026): no inner outlines, thin separators between the three groups, larger team faces,
   and "Everything in Light, plus:" as a plain sentence instead of a second label. */
html.accepted-artwork #plans .plan-card.plan-card-max .plan-card-plus { margin: 0 0 20px; font: 300 17px/1.5 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #cfcac4; }
#plans .plan-card.plan-card-max .max-research { margin: 0; padding: 0; border: 0; background: none; }
#plans .plan-card.plan-card-max .max-team, #plans .plan-card.plan-card-max .max-research + .max-team { margin: 14px 0 0; padding: 26px 0 0; border: 0; border-top: 1px solid rgba(15,247,251,.18); background: none; }
#plans .plan-card.plan-card-max .max-team + .max-group { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(15,247,251,.18); }
#plans .plan-card.plan-card-max .max-team-head { gap: 18px; }
#plans .plan-card.plan-card-max .max-team-faces img { width: 56px; height: 56px; margin-left: -14px; }
#plans .plan-card.plan-card-max .max-team-faces img:first-child { margin-left: 0; }
#plans .plan-card.plan-card-max .max-team-title { font-size: 23px; }
#plans .plan-card.plan-card-max .max-team-sub { margin-top: 14px; }
@media (max-width: 1000px) {
  html.accepted-artwork #plans .plan-card.plan-card-max .plan-card-plus { margin-bottom: 14px; font-size: 14px; }
  #plans .plan-card.plan-card-max .max-research { margin: 0; padding: 0; }
  #plans .plan-card.plan-card-max .max-team, #plans .plan-card.plan-card-max .max-research + .max-team { margin-top: 10px; padding: 20px 0 0; }
  #plans .plan-card.plan-card-max .max-team + .max-group { margin-top: 20px; padding-top: 20px; }
  #plans .plan-card.plan-card-max .max-team-head { gap: 12px; }
  #plans .plan-card.plan-card-max .max-team-faces img { width: 50px; height: 50px; margin-left: -12px; }
  #plans .plan-card.plan-card-max .max-team-faces img:first-child { margin-left: 0; }
  #plans .plan-card.plan-card-max .max-team-title { font-size: 19px; }
  #plans .plan-card.plan-card-max .max-team-sub { margin-top: 10px; }
}
/* "Best if" line under each plan name (VENZOR_BUSINESS, 2 Oct 2026). */
html.accepted-artwork #plans .plan-card h3 { margin-bottom: 8px; }
html.accepted-artwork #plans .plan-card .plan-card-best { margin: 0 0 18px; font: 400 17px/1.45 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #f1e8dc; }
html.accepted-artwork #plans .plan-card.plan-card-max .plan-card-best { margin-bottom: 10px; }
html.accepted-artwork #plans .plan-card.plan-card-max .plan-card-plus { color: #a9a6a3; }
@media (max-width: 1000px) {
  html.accepted-artwork #plans .plan-card .plan-card-best { margin-bottom: 12px; font-size: 14.5px; }
  html.accepted-artwork #plans .plan-card.plan-card-max .plan-card-best { margin-bottom: 8px; }
}

/* 8 Oct 2026 (Will): "Venzor Max" is Venzor blue wherever it is written, also in the plans label on laptops. */
html.accepted-artwork #plans .sec-head .kicker .kicker-max { color: #0ff7fb; }
/* 8 Oct 2026 (Will): the plans label reads like the top menu: "Venzor &" in the menu's light grey, "Venzor Max" in Venzor blue. */
@media (min-width: 1001px) { html.accepted-artwork #plans .sec-head .kicker .kicker-base { color: #d9d9db; } }

/* ==== legal-links.css ==== */
/* Footer policy links: one row that wraps, each link a 44px tap target. */
.foot-v2 .foot-meta .foot-policy{display:flex;flex-wrap:wrap;gap:0 18px;justify-content:flex-start;text-align:left;text-align-last:left}
.foot-v2 .foot-meta .foot-legal a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:801px){.foot-v2 .foot-meta .foot-policy{justify-content:flex-end}}

/* 5 Oct 2026 (Will: "Idea 2"). Computer widths only: the menu row sits lower, away from the wave,
   and copyright, Contact and the policy links run as one centered row close under it. */
@media (min-width:1001px){
  .foot-v2 .foot-v2-grid{row-gap:10px;padding-bottom:10px}
  .foot-v2 .foot-brand,.foot-v2 .foot-nav{margin-top:56px}
  .foot-v2 .foot-side{grid-column:1/-1;display:block;width:100%;justify-self:stretch;text-align:center;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
  .foot-v2 .foot-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 26px;width:100%;margin:0;padding:0;font-size:11px}
  .foot-v2 .foot-meta li{display:flex;align-items:center;gap:26px;white-space:nowrap;text-align:center;text-align-last:center}
  .foot-v2 .foot-meta .foot-policy{gap:26px;justify-content:center}
  .foot-v2 .foot-meta .foot-legal a{min-height:0;padding:6px 0}
}