/* ==========================================================================
   LiveDeck Studio — site.css (marketing layout, base typography, components)
   Transactional pages add checkout.css on top; keep .tx-* rules out of here.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#08090B; --bg-2:#0C0D11; --panel:#101115; --panel-2:#16181C; --ctrl:#212429; --ctrl-2:#2A2E34;
  --text:#F0F1F3; --muted:#9BA0A8; --dim:#6B7079; --steel:#4E535B;
  --program:#E5484D; --program-2:#d63d43; --preview:#2FB36E; --amber:#F2A33A;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --glow-red:rgba(229,72,77,.45); --glow-green:rgba(47,179,110,.4);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","PingFang TC","Hiragino Sans","Microsoft YaHei","Microsoft JhengHei","Apple SD Gothic Neo","Malgun Gothic","Nirmala UI","Kohinoor Devanagari","Kohinoor Bangla","Tamil Sangam MN","Noto Sans","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Tamil",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --container:1200px; --gutter:clamp(16px,4vw,40px);
  --nav-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* fluid type scale */
  --t-xs:12.5px; --t-sm:14px; --t-base:16px; --t-md:clamp(17px,1.1vw + 13px,19px);
  --t-lg:clamp(20px,1.4vw + 14px,24px); --t-xl:clamp(26px,2.4vw + 16px,36px);
  --t-2xl:clamp(32px,3.6vw + 16px,52px); --t-hero:clamp(44px,6.4vw + 4px,86px);
}
:root[data-theme="light"]{ /* the product is dark; light is not a supported theme, tokens kept for completeness */ }

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 1,"cv11" 1;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
h1{font-size:var(--t-2xl)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg);letter-spacing:-.015em} h4{font-size:var(--t-base);letter-spacing:0}
ul,ol{margin:0 0 1em;padding-left:1.25em}
button{font:inherit;color:inherit}
code,kbd,.mono{font-family:var(--mono);font-size:.92em}
kbd{background:var(--ctrl);border:1px solid var(--ctrl-2);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:.85em;color:var(--text)}
code{background:var(--ctrl);border-radius:5px;padding:1px 6px}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:rgba(229,72,77,.35);color:#fff}
:focus-visible{outline:2px solid var(--preview);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--panel);padding:8px 14px;border:1px solid var(--line-2);border-radius:8px}
.skip:focus{left:8px}
.ic{width:1.15em;height:1.15em;flex:0 0 auto}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container-narrow{max-width:820px}
.container-wide{max-width:1360px}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.red{color:var(--program)} .green{color:var(--preview)} .amber{color:var(--amber)}
.tabular{font-variant-numeric:tabular-nums}
.small{font-size:var(--t-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- announcement ---------- */
.announce{background:linear-gradient(90deg,rgba(229,72,77,.18),rgba(229,72,77,.06) 60%,transparent);border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--text)}
.announce .container{display:flex;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.announce-dot{width:8px;height:8px;border-radius:50%;background:var(--program);box-shadow:0 0 10px var(--glow-red);flex:0 0 8px;animation:blink 2.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(8,9,11,.55);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgba(8,9,11,.78)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:17px;white-space:nowrap}
.brand-icon{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 1px var(--line)}
.brand-word span{color:var(--muted);font-weight:500}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 14px;border-radius:8px;font-size:15px;font-weight:500;color:var(--muted);transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-mobile-cta{display:none}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-account{font-size:14px;color:var(--muted);padding:8px 12px;border-radius:8px}
.nav-account:hover{color:var(--text)}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:transparent;border-radius:10px;align-items:center;justify-content:center;cursor:pointer;margin-left:4px}
.nav-burger .ic{width:22px;height:22px}
.nav-burger .ic-close{display:none}
body.nav-open .nav-burger .ic-menu{display:none}
body.nav-open .nav-burger .ic-close{display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:12px;font-weight:600;font-size:15.5px;line-height:1.2;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--ease),background .15s,border-color .15s,box-shadow .2s,color .15s;user-select:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ic{width:18px;height:18px}
.btn-program{background:var(--program);color:#fff;box-shadow:0 0 0 1px rgba(229,72,77,.4),0 8px 28px -8px var(--glow-red)}
.btn-program:hover{background:var(--program-2);box-shadow:0 0 0 1px rgba(229,72,77,.6),0 12px 34px -8px var(--glow-red)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.btn-preview{background:rgba(47,179,110,.12);color:#6fdca0;border-color:rgba(47,179,110,.35)}
.btn-preview:hover{background:rgba(47,179,110,.2);border-color:rgba(47,179,110,.6);color:#8ae7b3}
.btn-solid{background:var(--text);color:#0B0C0F}
.btn-solid:hover{background:#fff}
.btn-lg{padding:16px 28px;font-size:17px;border-radius:14px}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}
.btn-block{width:100%}
.btn-link{background:none;border:0;padding:0;color:var(--muted);font-weight:500;gap:6px}
.btn-link:hover{color:var(--text);transform:none}
.btn-link .ic{transition:transform .2s}
.btn-link:hover .ic{transform:translateX(3px)}

/* ---------- decorations ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow .tally{width:8px;height:8px}
.eyebrow.red{color:var(--program)}
.eyebrow.green{color:var(--preview)}
.tally{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--steel)}
.tally-red{background:var(--program);box-shadow:0 0 12px var(--glow-red)}
.tally-green{background:var(--preview);box-shadow:0 0 12px var(--glow-green)}
.tc{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.badge .ic{width:15px;height:15px}
.badge-red{color:#ff8d91;border-color:rgba(229,72,77,.35);background:rgba(229,72,77,.08)}
.badge-green{color:#6fdca0;border-color:rgba(47,179,110,.35);background:rgba(47,179,110,.08)}
.badge-amber{color:#ffc46d;border-color:rgba(242,163,58,.35);background:rgba(242,163,58,.08)}

/* meters: pure-CSS VU strip used as decoration */
.meter{display:flex;gap:3px;align-items:flex-end;height:26px}
.meter i{display:block;width:4px;background:var(--preview);border-radius:1px;opacity:.85;animation:meter 1.6s ease-in-out infinite}
.meter i:nth-child(2){animation-delay:.2s;height:60%}.meter i:nth-child(3){animation-delay:.4s;height:90%}.meter i:nth-child(4){animation-delay:.1s;height:45%}
.meter i:nth-child(5){animation-delay:.5s;height:70%}.meter i:nth-child(6){animation-delay:.3s;height:100%;background:var(--amber)}.meter i:nth-child(7){animation-delay:.6s;height:55%}
.meter i:nth-child(8){animation-delay:.25s;height:80%}.meter i:nth-child(9){animation-delay:.45s;height:35%;}
@keyframes meter{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.meter i{transform-origin:bottom}

/* ---------- sections ---------- */
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section-tight{padding:clamp(40px,6vw,72px) 0}
.section-head{max-width:720px;margin-bottom:clamp(36px,5vw,64px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{font-size:var(--t-md);color:var(--muted);margin:0}
.section-head h2{margin-bottom:.45em}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 50px -30px rgba(0,0,0,.8);transition:border-color .25s,transform .25s var(--ease)}
.card:hover{border-color:var(--line-2)}
.card-glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(229,72,77,.5),transparent 40%,transparent 60%,rgba(47,179,110,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.card-icon{width:42px;height:42px;border-radius:11px;background:var(--ctrl);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--text)}
.card-icon .ic{width:21px;height:21px}
.card-icon.red{color:var(--program);background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.3)}
.card-icon.green{color:var(--preview);background:rgba(47,179,110,.1);border-color:rgba(47,179,110,.3)}
.card-icon.amber{color:var(--amber);background:rgba(242,163,58,.1);border-color:rgba(242,163,58,.3)}
.card h3{margin-bottom:.35em}
.card p{color:var(--muted);font-size:15px;margin:0}
.card ul{list-style:none;padding:0;margin:14px 0 0}
.card li{display:flex;gap:9px;font-size:14.5px;color:#c9ccd2;padding:4px 0}
.card li .ic{color:var(--preview);width:17px;height:17px;margin-top:4px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,84px) 0 0;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);
  animation:gridDrift 30s linear infinite}
@keyframes gridDrift{from{background-position:center 0}to{background-position:center 64px}}
.hero-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.hero-glow-red{width:640px;height:520px;left:calc(50% - 560px);top:-120px;background:radial-gradient(circle,rgba(229,72,77,.55),transparent 65%);animation:floatA 14s ease-in-out infinite}
.hero-glow-green{width:560px;height:480px;right:calc(50% - 560px);top:40px;background:radial-gradient(circle,rgba(47,179,110,.35),transparent 65%);animation:floatB 17s ease-in-out infinite}
.hero-glow-steel{width:900px;height:500px;left:50%;top:420px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(78,83,91,.5),transparent 65%)}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,20px)}}
.hero-copy{text-align:center;max-width:1040px;margin:0 auto}
.hero-copy .eyebrow{margin-bottom:26px}
.hero h1{font-size:var(--t-hero);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:0 0 26px}
.hero h1 .w{display:inline-block;background:linear-gradient(180deg,#fff,#c7cad0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .w-switch{background:linear-gradient(180deg,#ff8d91,var(--program));-webkit-background-clip:text;background-clip:text}
.hero h1 .w-stream{background:linear-gradient(180deg,#8ae7b3,var(--preview));-webkit-background-clip:text;background-clip:text}
.hero .lead{font-size:clamp(17px,1.4vw + 12px,21px);color:var(--muted);max-width:680px;margin:0 auto 34px;line-height:1.55}
.hero .lead b{color:var(--text);font-weight:600}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.cta-row .price{font-weight:500;opacity:.9;font-variant-numeric:tabular-nums}
.platforms{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.platforms .badge{gap:8px}
.hero-note{margin-top:14px;font-size:13px;color:var(--dim)}
.hero-new{display:flex;width:fit-content;margin:0 auto 18px;white-space:normal;text-align:left;line-height:1.35;max-width:100%}
.hero-new .ic{width:14px;height:14px;flex:none}
.hero-new:hover{background:rgba(47,179,110,.14)}
.hero-points{list-style:none;padding:0;margin:22px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:900px}
.hero-points li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.hero-points .ic{width:16px;height:16px;color:var(--preview);flex:none}
@media (max-width:640px){.hero-points{flex-direction:column;align-items:flex-start;width:fit-content;gap:8px}.hero-points li{font-size:14px;text-align:left;align-items:flex-start}.hero-points .ic{margin-top:3px}}
.release{padding:28px 0;border-top:1px solid var(--line)}
.release:first-of-type{border-top:0}
.release-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:12px}
.release-head h2{font-size:var(--t-lg,26px);margin:0}
.release-date{font-family:var(--mono);font-size:13px;color:var(--dim)}
.release ul{margin:0;padding-left:20px;color:var(--muted)}
.release li{margin:6px 0;line-height:1.55}
.release li b{color:var(--text)}

/* device frame */
.hero-visual{margin:clamp(36px,5vw,56px) auto 0;max-width:1120px;perspective:1600px;position:relative}
.device{position:relative;border-radius:var(--r-xl);background:#0B0C0F;border:1px solid rgba(255,255,255,.12);padding:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 100px -30px rgba(0,0,0,.9),0 0 90px -20px var(--glow-red),0 0 120px -50px var(--glow-green);
  transform:rotateX(10deg) translateY(0);transform-origin:center top;transition:transform .2s linear;will-change:transform}
.device-screen{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/10.4;border:1px solid rgba(255,255,255,.08)}
.device-screen img{width:100%;height:100%;object-fit:cover;object-position:center top}
.device-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(8,9,11,.55));pointer-events:none}
.device-edge{position:absolute;top:18%;bottom:18%;width:3px;border-radius:3px;z-index:2}
.device-edge.left{left:-2px;background:var(--program);box-shadow:0 0 18px 3px var(--glow-red),0 0 40px 6px rgba(229,72,77,.25)}
.device-edge.right{right:-2px;background:var(--preview);box-shadow:0 0 18px 3px var(--glow-green),0 0 40px 6px rgba(47,179,110,.2)}
.device-label{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(8,9,11,.75);border:1px solid var(--line-2);backdrop-filter:blur(8px);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
.device-label.pgm{left:22px;top:22px;color:#ff8d91;border-color:rgba(229,72,77,.4)}
.device-label.pvw{right:22px;top:22px;color:#6fdca0;border-color:rgba(47,179,110,.4)}
.device-label.tc{left:50%;transform:translateX(-50%);bottom:22px}
.device-label .tally{width:7px;height:7px}
.hero-fade{height:140px;margin-top:-140px;background:linear-gradient(180deg,transparent,var(--bg));position:relative;z-index:2;pointer-events:none}

/* ---------- trusted strip ---------- */
.trusted{padding:36px 0 8px;text-align:center}
.trusted .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.trusted-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;color:var(--muted);font-weight:600;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.01em}
.trusted-row span{display:inline-flex;align-items:center;gap:10px;opacity:.85}
.trusted-row span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--steel)}
.trusted-row span:first-child::before{display:none}

/* ---------- feature sections ---------- */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(40px,6vw,88px) 0}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .feature-copy{order:2}
.feature-copy{max-width:520px}
.feature-copy h2{margin-bottom:.5em}
.feature-copy p{color:var(--muted);font-size:var(--t-md);margin-bottom:22px}
.feature-copy ul{list-style:none;padding:0;margin:0 0 26px}
.feature-copy li{display:flex;gap:11px;padding:6px 0;font-size:15.5px;color:#d5d8dd;line-height:1.5}
.feature-copy li .ic{color:var(--preview);width:18px;height:18px;flex:0 0 18px;margin-top:4px}
.feature-icon{width:44px;height:44px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--text)}
.feature-icon .ic{width:22px;height:22px}
.feature-icon.red{color:var(--program);background:rgba(229,72,77,.1);border-color:rgba(229,72,77,.35);box-shadow:0 0 30px -8px var(--glow-red)}
.feature-icon.green{color:var(--preview);background:rgba(47,179,110,.1);border-color:rgba(47,179,110,.35);box-shadow:0 0 30px -8px var(--glow-green)}
.feature-icon.amber{color:var(--amber);background:rgba(242,163,58,.1);border-color:rgba(242,163,58,.35)}
.shot{position:relative;border-radius:var(--r-lg);background:#0B0C0F;border:1px solid var(--line-2);padding:8px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 60px -30px var(--glow-red)}
.shot.green{box-shadow:0 30px 80px -30px rgba(0,0,0,.9),0 0 60px -30px var(--glow-green)}
.shot-inner{border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line);aspect-ratio:16/10}
.shot-inner img{width:100%;height:100%;object-fit:cover;object-position:left top}
.shot-inner.top img{object-position:center top}
.shot-inner.zoom img{transform:scale(1.35);transform-origin:left top}
.shot-inner.zoom-center img{transform:scale(1.55);transform-origin:52% 44%}
.shot-inner.zoom-scripture img{transform:scale(1.25);transform-origin:0% 32%}
.shot-cap{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(8,9,11,.8);border:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);backdrop-filter:blur(8px)}

/* ---------- works with ---------- */
.works{padding:clamp(48px,6vw,80px) 0}
.works-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.works-row .badge{padding:10px 16px;font-size:14px;color:var(--text);background:rgba(255,255,255,.03)}
.works-row .badge i{width:6px;height:6px;border-radius:50%;background:var(--steel)}
.works-row .badge.on i{background:var(--preview);box-shadow:0 0 8px var(--glow-green)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:28px}
.plan.featured{border-color:rgba(229,72,77,.45);background:linear-gradient(180deg,rgba(229,72,77,.08),rgba(255,255,255,.012) 40%)}
.plan.featured::after{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--program),transparent)}
.plan-flag{position:absolute;z-index:2;top:-13px;left:50%;transform:translateX(-50%);background:#1c1215;box-shadow:0 0 0 4px var(--bg)}
.plan-name{font-size:17px;font-weight:600;margin-bottom:4px;display:flex;gap:10px;align-items:center}
.plan-name .ic{width:18px;height:18px;color:var(--muted)}
.plan-tag{color:var(--muted);font-size:14px;min-height:22px}
.plan-price{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px}
.plan-price b{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.plan-price s{color:var(--dim);font-size:17px;font-weight:500}
.plan-once{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.plan li{display:flex;gap:9px;padding:6px 0;font-size:14.5px;color:#d5d8dd;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li .ic{width:17px;height:17px;color:var(--preview);margin-top:3px}
.plan .btn{width:100%}
.plan-seats{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);margin-top:12px;text-align:center}
.store-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px;color:var(--muted);font-size:14.5px;align-items:center}
.store-row .btn{gap:8px}
.ghs-note{margin-top:18px;text-align:center;font-size:13.5px;color:var(--dim)}

/* comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
table.cmp thead th{border-top:0;background:rgba(255,255,255,.03);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
table.cmp th.plan-col{color:var(--text);text-transform:none;letter-spacing:0;font-size:15px}
table.cmp td.c{text-align:center}
table.cmp td .ic{width:18px;height:18px;color:var(--preview);margin:0 auto}
table.cmp td .no{color:var(--dim)}
table.cmp tbody th{font-weight:500;color:#d5d8dd}
table.cmp tr.group th{background:rgba(255,255,255,.025);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:600;padding-top:10px;padding-bottom:10px}
.doc-table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc-table th,.doc-table td{padding:11px 14px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.doc-table thead th{border-top:0;background:rgba(255,255,255,.03);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.doc-table tbody th{font-weight:500;color:#d5d8dd;white-space:nowrap}

/* ---------- FAQ accordion ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--line-2);background:rgba(255,255,255,.035)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-weight:600;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:20px;height:20px;color:var(--muted);flex:0 0 20px;transition:transform .25s var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg);color:var(--text)}
.faq .faq-body{padding:0 20px 18px;color:var(--muted);font-size:15px;line-height:1.65}
.faq .faq-body p:last-child{margin-bottom:0}
.faq .faq-body b{color:var(--text)}
.faq .tag{display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--ctrl);color:var(--muted);font-weight:600;vertical-align:middle}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(44px,6vw,80px) clamp(24px,5vw,72px);text-align:center;
  background:radial-gradient(ellipse 60% 80% at 50% 120%,rgba(229,72,77,.28),transparent 70%),linear-gradient(180deg,#101115,#0B0C0F)}
.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent);pointer-events:none}
.cta-band > *{position:relative}
.cta-band h2{font-size:var(--t-2xl);margin-bottom:.4em}
.cta-band p{color:var(--muted);font-size:var(--t-md);max-width:560px;margin:0 auto 28px}
.cta-band .tc{margin-top:22px;display:block}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 50% 60% at 50% -10%,rgba(229,72,77,.18),transparent 70%)}
.page-hero h1{font-size:clamp(36px,4.5vw + 14px,64px);font-weight:800;letter-spacing:-.04em;margin-bottom:.35em}
.page-hero .lead{font-size:var(--t-md);color:var(--muted);max-width:660px;margin:0}
.page-hero.center{text-align:center}
.page-hero.center .lead{margin:0 auto}
.page-hero.center .eyebrow{justify-content:center}

/* ---------- download ---------- */
.dl-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dl-card{padding:30px}
.dl-card.is-you{border-color:rgba(47,179,110,.5);box-shadow:0 0 0 1px rgba(47,179,110,.2),0 30px 60px -30px var(--glow-green)}
.dl-card .you{display:none;position:absolute;z-index:2;top:-13px;right:22px;background:#0e1a14;box-shadow:0 0 0 4px var(--bg)}
.dl-card.is-you .you{display:inline-flex}
.dl-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dl-head .os{width:50px;height:50px;border-radius:14px;background:var(--ctrl);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center}
.dl-head .os .ic{width:26px;height:26px}
.dl-head h2{font-size:22px;margin:0}
.dl-head .sub{color:var(--muted);font-size:14px}
.dl-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:18px 0 22px;font-size:14px}
.dl-meta div{border-top:1px solid var(--line);padding-top:8px}
.dl-meta dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.dl-meta dd{margin:0;font-family:var(--mono);font-size:13.5px;color:#d5d8dd}
.dl-notes{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--muted);margin-bottom:20px;white-space:pre-line}
.dl-notes b{color:var(--text);display:block;margin-bottom:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.dl-actions{display:flex;flex-direction:column;gap:10px}
.dl-actions .btn-ghost{color:var(--muted)}
.dl-sha{font-family:var(--mono);font-size:11px;color:var(--dim);word-break:break-all;margin-top:12px}
.req{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--line);font-size:15px;color:#d5d8dd}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--mono);font-size:12px;color:var(--program);letter-spacing:.06em}
.steps li b{color:var(--text)}

/* ---------- docs / prose pages (support, privacy, terms) ---------- */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-bottom:clamp(64px,8vw,110px)}
.doc-nav{position:sticky;top:calc(var(--nav-h) + 24px)}
.doc-nav .lbl{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.doc-nav ol,.doc-nav ul{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
.doc-nav a{display:block;padding:6px 14px;font-size:14px;color:var(--muted);border-left:2px solid transparent;margin-left:-1px;transition:color .15s,border-color .15s}
.doc-nav a:hover{color:var(--text)}
.doc-nav a.active{color:var(--text);border-left-color:var(--program)}
.prose{max-width:760px;font-size:16px}
.prose h2{font-size:clamp(24px,2vw + 12px,30px);margin:2.2em 0 .6em;padding-top:.4em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:1.8em 0 .5em}
.prose p,.prose li{color:#c9ccd2}
.prose li{margin-bottom:.35em}
.prose b,.prose strong{color:var(--text)}
.prose a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--steel)}
.prose a:hover{text-decoration-color:#fff}
.prose .quick a,.prose .btn,.prose .doc-nav a{text-decoration:none}
.prose .quick a b{color:var(--text)}
.prose .note{border:1px solid rgba(242,163,58,.35);background:rgba(242,163,58,.07);border-radius:12px;padding:14px 16px;font-size:15px;margin:18px 0}
.prose .good{border:1px solid rgba(47,179,110,.35);background:rgba(47,179,110,.07);border-radius:12px;padding:14px 16px;font-size:15px;margin:18px 0}
.prose .table-wrap{margin:18px 0}
.prose .meta{font-family:var(--mono);font-size:12.5px;color:var(--dim);letter-spacing:.04em;margin-bottom:28px}
.prose .muted{font-size:14px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 36px}
.quick a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
.quick a:hover{border-color:var(--line-2);background:rgba(255,255,255,.045)}
.quick a b{display:block;font-size:15px;margin-bottom:2px}
.quick a span{font-size:13px;color:var(--muted)}
.quick a .ic{width:20px;height:20px;color:var(--program);margin-bottom:10px}
.search{position:relative;margin:0 0 28px}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--dim)}
.search input{width:100%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);border-radius:12px;padding:13px 14px 13px 44px;font:inherit;font-size:15px;outline:none}
.search input:focus{border-color:var(--steel);box-shadow:0 0 0 3px rgba(78,83,91,.3)}
.empty{display:none;color:var(--muted);padding:14px;border:1px dashed var(--line-2);border-radius:12px}
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 36px}
.glance .card{padding:18px}
.glance .card b{display:block;font-size:15px;margin:8px 0 4px}
.glance .card span{font-size:13.5px;color:var(--muted)}
.contact-boxes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-boxes .card p{color:#c9ccd2}

/* sticky in-page nav (features.php) */
.subnav{position:sticky;top:var(--nav-h);z-index:50;background:rgba(8,9,11,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav .container{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.subnav .container::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:14px;color:var(--muted);font-weight:500;white-space:nowrap;border:1px solid transparent}
.subnav a:hover{color:var(--text)}
.subnav a.active{color:var(--text);background:rgba(255,255,255,.06);border-color:var(--line)}

/* ---------- forms (base; checkout.css adds .tx-* specifics) ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--ctrl);border:1px solid var(--ctrl-2);color:var(--text);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--steel);box-shadow:0 0 0 3px rgba(78,83,91,.3)}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA0A8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px!important}

/* transactional pages: give the tx wrapper a soft top glow so they feel like the rest of the site */
.page-checkout main,.page-verify main,.page-account main,.page-contact main,.page-error main{background:radial-gradient(ellipse 50% 40% at 50% 0,rgba(229,72,77,.12),transparent 70%)}
.tx h1,.tx-narrow h1{letter-spacing:-.03em}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) 0 32px;background:linear-gradient(180deg,var(--bg),#050607);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand p{color:var(--muted);font-size:14.5px;max-width:340px;margin:16px 0 18px}
.footer-tally{display:flex;align-items:center;gap:8px}
.footer-tally .mono{font-size:11.5px;color:var(--dim);letter-spacing:.1em;margin-left:6px}
.footer h4{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:9px}
.footer li a{color:var(--muted);font-size:14.5px}
.footer li a:hover{color:var(--text)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;font-size:13px;color:var(--dim)}
.footer-tm{max-width:640px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
}
@media (max-width:960px){
  .nav-links{position:absolute;top:100%;left:0;right:0;height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));flex-direction:column;align-items:stretch;gap:2px;padding:14px var(--gutter) 32px;background:var(--bg);border-top:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease);overflow:auto}
  body.nav-open .nav-links{transform:none;opacity:1;pointer-events:auto}
  body.nav-open .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg);border-bottom-color:var(--line)}
  body.nav-open{overflow:hidden}
  .nav-links a{font-size:18px;padding:14px 10px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-mobile-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px}
  .nav-mobile-cta .btn{width:100%;font-size:16px;padding:14px;border-bottom:0}
  .nav-links .nav-mobile-cta .btn-program{color:#fff;border-bottom:1px solid transparent}
  .nav-links .nav-mobile-cta .btn-ghost{color:var(--text);border-bottom:1px solid var(--line-2)}
  .nav-account,.nav-actions .btn-program{display:none}
  .nav-burger{display:inline-flex}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan.featured{order:-1}
  .feature,.feature.flip{grid-template-columns:1fr}
  .feature.flip .feature-copy{order:0}
  .feature-copy{max-width:640px}
  .doc{grid-template-columns:1fr}
  .doc-nav{position:static;margin-bottom:8px}
  .doc-nav ol,.doc-nav ul{display:flex;flex-wrap:wrap;gap:6px;border:0}
  .doc-nav a{border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin:0;font-size:13px}
  .doc-nav a.active{border-color:var(--line-2);background:rgba(255,255,255,.05)}
  .glance,.quick{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--nav-h:58px}
  .grid-2,.grid-3,.grid-4,.dl-cards,.req,.contact-boxes,.glance,.quick{grid-template-columns:1fr}
  .hero{padding-top:44px}
  .hero h1{line-height:1}
  .cta-row .btn{width:100%}
  .device{padding:6px;border-radius:16px;transform:none}
  .device-screen{border-radius:10px;aspect-ratio:4/3.4}
  .device-label.tc{display:none}
  .device-label{padding:4px 7px;font-size:10px}
  .device-label.pgm{left:12px;top:12px}.device-label.pvw{right:12px;top:12px}
  .shot{padding:5px}
  .shot-inner{border-radius:8px}
  .card{padding:20px}
  .plan{padding:24px 20px}
  .plan-price b{font-size:38px}
  .dl-meta{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .cta-band{border-radius:18px}
  .faq summary{padding:15px 16px;font-size:15px}
  .faq .faq-body{padding:0 16px 16px}
  .trusted-row{gap:8px 18px;font-size:15px}
}
@media (max-width:400px){
  .brand-word span{display:none}
  .hero h1{font-size:44px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .device{transform:none!important}
}

/* ---------- print ---------- */
@media print{
  .nav,.footer,.announce,.subnav,.cta-band,.hero-bg,.device-edge,.device-label,.search,.nav-burger{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .prose p,.prose li,.card p,.plan li{color:#111}
  .card,.plan,.table-wrap{border-color:#ccc;box-shadow:none;background:#fff}
  .reveal{opacity:1;transform:none}
  .faq details{break-inside:avoid}
  .faq details>*{display:block}
}

/* ---------- language menu ---------- */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{color:var(--text);background:rgba(255,255,255,.05)}
.lang-menu summary .ic{width:16px;height:16px}
.lang-menu ul{position:absolute;right:0;top:calc(100% + 8px);z-index:60;margin:0;padding:6px;list-style:none;min-width:200px;max-height:min(70vh,520px);overflow:auto;background:#101115;border:1px solid var(--line-2,rgba(255,255,255,.14));border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.lang-menu li a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--muted)}
.lang-menu li a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.lang-menu li a[aria-current]{color:var(--text);background:rgba(47,179,110,.12)}
.footer-langs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:18px 0;margin-top:8px;border-top:1px solid var(--line);font-size:13px}
.footer-langs .ic{width:15px;height:15px;color:var(--dim)}
.footer-langs a{color:var(--dim)}
.footer-langs a:hover,.footer-langs a[aria-current]{color:var(--text)}
html:not([lang^="en"]) .eyebrow,html:not([lang^="en"]) .plan-seats{letter-spacing:.04em}
:lang(zh-Hans) body,:lang(zh-Hant) body,:lang(ko) body,:lang(hi) body,:lang(bn) body,:lang(ta) body{line-height:1.7}
:lang(zh-Hans) h1,:lang(zh-Hant) h1,:lang(ko) h1,:lang(hi) h1,:lang(bn) h1,:lang(ta) h1{letter-spacing:0;line-height:1.25}
:lang(ta) h1{font-size:clamp(30px,4.4vw,56px)}
/* ---------- long words / translated labels never widen the page ---------- */
.grid>*,.dl-cards>*,.req>*,.plans>*,.footer-grid>*{min-width:0}
.steps .mono,.mono{overflow-wrap:anywhere}
.btn{max-width:100%}
@media (max-width:640px){.dl-actions .btn,.cta-row .btn{white-space:normal;text-align:center;height:auto;min-height:44px}}
.steps li{display:block}