/* features.html — page-specific styles.
   Tokens, reset, nav, buttons, footer, .grid, .specs and .chips come from
   /css/site.css. Everything here is unique to this page.
   Reference: design-reference/Features Restyle.html */

/* ── hero: three stacked layers, never a flat gradient band ── */
.fhero{padding:158px 0 0;color:#fff;
  background:radial-gradient(820px 480px at 18% 0,rgba(118,75,162,.46) 0,transparent 64%),
             radial-gradient(640px 420px at 88% 12%,rgba(102,126,234,.3) 0,transparent 66%),
             linear-gradient(170deg,#171331,#0D0B18)}
.eyebrow{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D8D2FF;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.19);padding:8px 15px;border-radius:999px;margin-bottom:24px}
.fhero h1{font-size:56px;font-weight:800;letter-spacing:-.034em;line-height:1.05;max-width:800px;text-wrap:balance}
.fhero p.lead{font-size:17.5px;line-height:1.7;color:rgba(255,255,255,.74);max-width:600px;margin-top:20px;text-wrap:pretty}
.fhero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.fhero .btn-o{padding:15px 28px;font-size:15px;font-weight:500}
.fhero .trust{margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.58)}

/* Priority rail in the hero foot. position:static is a guard — site.css pins
   nav.site, and a bare nav rule would otherwise fix this to the viewport. */
.jump{position:static;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:18px 18px 0 0;border-bottom:0;overflow:hidden}
.jump a{display:block;padding:22px 22px 26px;background:rgba(255,255,255,.045);transition:background .18s ease}
.jump a:hover{background:rgba(255,255,255,.1)}
.jump b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:9px}
.jump span{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:#fff}
.jump a:hover span{color:#D8D2FF}
.jump a:focus-visible{outline:2px solid #A99BFF;outline-offset:-2px}

/* ── sections ── */
section.s{padding:96px 0}
.tint{background:var(--tint)}
.themehead{margin-bottom:64px;max-width:740px}
.tlabel{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pu);margin-bottom:14px}
.tlabel .pri{color:var(--mute)}
.tlabel .sep{color:var(--line)}
.s h2,.finalin h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;text-wrap:balance}
.themehead .sub{font-size:17.5px;line-height:1.7;color:var(--body);margin-top:16px;text-wrap:pretty}

/* ── tier 1: cornerstone split ──
   align-items:start, not center. Centring is right when the two columns are
   roughly the same height; here they never are. The phone is 791px against
   307px of copy, so centring pushed the copy 242px down the row and dropped a
   void between the section heading and the thing it introduces. Measured on
   every cornerstone row: 185-242px of leading whitespace. Top-aligned, the
   headline sits level with the top of the media and the slack falls at the
   foot of the column, where the media is still filling the other side.
   Check with: node build/measure-gaps.js */
.t1{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.t1+.t1{margin-top:88px;padding-top:88px;border-top:1px solid var(--line)}
.t1.rev .media{order:-1}
.tier-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pu);margin-bottom:14px}
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--grad);border-radius:6px;padding:4px 8px;vertical-align:middle;margin-left:10px;position:relative;top:-3px}
.t1 h3{font-size:31px;font-weight:800;letter-spacing:-.028em;line-height:1.16;text-wrap:balance}
.t1 .copy>p{font-size:17px;line-height:1.72;color:var(--body);margin-top:14px;text-wrap:pretty}
ul.flist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
ul.flist li{position:relative;padding-left:30px;font-size:16px;line-height:1.7;color:var(--body)}
ul.flist li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;background:rgba(102,126,234,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}

/* ── wide media figure ──
   RATIO-CRITICAL. .land is calander-desktop.png (1.98) only; .fit is for
   square-ish assets. Both use contain so no product UI is cropped. */
figure.wide{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--tint);box-shadow:0 22px 54px rgba(21,19,31,.13)}
.tint figure.wide{background:#fff}
figure.wide img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
figure.wide.fit img{aspect-ratio:4/3;object-fit:contain;background:var(--tint);padding:14px}
figure.wide.land img{aspect-ratio:1600/808;object-fit:contain}
.t1.pho{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.phfig{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0}
.phfig figcaption{font-size:12.5px;line-height:1.55;color:var(--mute);text-align:center;max-width:34ch}
.dk .phfig figcaption{color:rgba(255,255,255,.5)}
figure.wide figcaption{padding:13px 18px;border-top:1px solid var(--line);background:#fff;font-size:12.5px;color:var(--mute)}
.needs{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8A5A11;background:#FEF6E7;border:1px solid rgba(240,167,42,.4);border-radius:999px;padding:4px 9px}

/* ── tier 2 wrappers ── */
.also{margin-top:88px}
.also-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.also-h b{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gi{width:36px;height:36px;border-radius:10px;background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.2);display:grid;place-items:center;margin-bottom:18px}
.gi svg{width:18px;height:18px;stroke:var(--pu);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.seeit{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--pu);cursor:pointer}
.seeit svg{width:14px;height:14px;transition:transform .2s ease}
.seeit:hover{color:var(--pu2)}
.seeit:hover svg{transform:translateX(3px)}
.seeit:focus-visible{outline:2px solid var(--pu);outline-offset:3px;border-radius:4px}

/* ── iPhone frame ──
   RATIO-CRITICAL, do not change these numbers.
   0.46 is the SCREEN APERTURE, not the chassis. The 14px bezel inset is
   subtracted from both axes, so the outer box must be 340/706 for the
   aperture to land at 0.46. Setting the outer box to 0.46 shaves pixels
   off both edges of every screenshot. */
.ph{--s:1;position:relative;width:calc(340px * var(--s));max-width:100%;aspect-ratio:340/706;margin:0 auto}
.ph-rail{position:absolute;inset:0;border-radius:calc(61px * var(--s));background:linear-gradient(135deg,#52555c,#1a1b1f 23%,#2e3035 50%,#141519 77%,#45484f);box-shadow:0 26px 56px rgba(9,7,17,.5),inset 0 1px 2px rgba(255,255,255,.22)}
.ph-b{position:absolute;width:calc(4px * var(--s));border-radius:2px}
.ph-b.a{left:calc(-3px * var(--s));top:22.2%;height:7%;background:linear-gradient(90deg,#3a3d44,#17181c)}
.ph-b.u{left:calc(-3px * var(--s));top:31.4%;height:10.8%;background:linear-gradient(90deg,#3a3d44,#17181c)}
.ph-b.d{left:calc(-3px * var(--s));top:44.3%;height:10.8%;background:linear-gradient(90deg,#3a3d44,#17181c)}
.ph-b.p{right:calc(-3px * var(--s));top:29.3%;height:13.8%;background:linear-gradient(270deg,#3a3d44,#17181c)}
.ph-bezel{position:absolute;inset:calc(6px * var(--s));border-radius:calc(54px * var(--s));background:#050609}
.ph-screen{position:absolute;inset:calc(14px * var(--s));border-radius:calc(44px * var(--s));overflow:hidden;background:#0D0B18}
.ph-screen img,.ph-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Assets that aren't exactly 0.46 are contained rather than cropped. */
.ph-screen img.contain{object-fit:contain;background:#0D0B18}

/* ── lightbox ── */
.lb{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:28px;background:rgba(9,7,17,.84);backdrop-filter:blur(8px)}
.lb[hidden]{display:none}
.lb-in{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:100%}
.lb-t{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;text-align:center}
.lb-close{position:absolute;top:20px;right:20px;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:11px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.18)}
.lb-close:focus-visible{outline:2px solid #A99BFF;outline-offset:2px}




/* ── dark theme section (priority 3 only) ── */
.dk{background:radial-gradient(760px 440px at 12% 0,rgba(118,75,162,.4) 0,transparent 64%),radial-gradient(580px 400px at 90% 88%,rgba(102,126,234,.26) 0,transparent 66%),linear-gradient(170deg,#171331,#0D0B18);color:#fff}
.dk h2,.dk h3,.dk h4{color:#fff}
.dk .tlabel{color:#A99BFF}
.dk .tlabel .pri{color:rgba(255,255,255,.44)}
.dk .tlabel .sep{color:rgba(255,255,255,.24)}
.dk .themehead .sub,.dk .t1 .copy>p,.dk .grid p{color:rgba(255,255,255,.72)}
.dk .tier-tag{color:#A99BFF}
.dk ul.flist{border-top-color:rgba(255,255,255,.14)}
.dk ul.flist li{color:rgba(255,255,255,.74)}
.dk ul.flist li::before{background-color:rgba(169,155,255,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A99BFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.dk figure.wide{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(0,0,0,.42)}
.dk figure.wide figcaption{background:rgba(255,255,255,.05);border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.dk figure.wide.land img,.dk figure.wide.fit img{background:rgba(255,255,255,.04)}
.dk .also-h b{color:rgba(255,255,255,.5)}
.dk .grid{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.dk .grid>article{background:rgba(255,255,255,.045)}
.dk .grid>article:hover{background:rgba(255,255,255,.09)}
.dk .gi{background:rgba(169,155,255,.16);border-color:rgba(169,155,255,.3)}
.dk .gi svg{stroke:#C9BEFF}
.dk .seeit{color:#C9BEFF}
.dk .seeit:hover{color:#fff}

/* ── sub-page links ── */
.subs{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.subs a{background:#fff;padding:26px 22px;display:flex;flex-direction:column;gap:10px;transition:background .18s ease}
.subs a:hover{background:var(--tint)}
.subs b{font-size:16.5px;font-weight:700;letter-spacing:-.018em;line-height:1.3;color:var(--ink)}
.subs a:hover b{color:var(--pu)}
.subs span{font-size:13.5px;line-height:1.6;color:var(--body)}
.subs em{margin-top:auto;font-style:normal;font-size:13px;font-weight:700;color:var(--pu);display:inline-flex;align-items:center;gap:6px}

/* ── closing CTA ── */
.final{padding:0 0 96px}
.finalin{position:relative;overflow:hidden;border-radius:24px;padding:64px 48px;text-align:center;color:#fff;background:linear-gradient(150deg,#1B1733,#12101F)}
.finalin::before{content:"";position:absolute;top:-44%;right:-8%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(169,155,255,.26),transparent 68%)}
.finalin>*{position:relative;z-index:1}
.finalin h2{max-width:20ch;margin:0 auto 26px}
.finalin .trust{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.6)}

@media (max-width:1024px){
  .t1{grid-template-columns:1fr;gap:44px}
  .t1.pho{grid-template-columns:1fr}
  .t1.rev .media{order:0}
  .jump{grid-template-columns:1fr 1fr}
  .subs{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .fhero h1{font-size:44px}
  .s h2,.finalin h2{font-size:34px}
  .t1 h3{font-size:27px}
}
@media (max-width:768px){
  .fhero{padding:118px 0 0}
  .fhero h1{font-size:32px}
  .fhero p.lead{font-size:16.5px}
  .fhero .cta .btn{width:100%}
  .jump{grid-template-columns:1fr;margin-top:40px}
  .jump a{padding:18px 20px}
  section.s{padding:64px 0}
  .s h2,.finalin h2{font-size:27px}
  .themehead{margin-bottom:44px}
  .themehead .sub{font-size:16.5px}
  .t1 h3{font-size:24px}
  .t1+.t1{margin-top:56px;padding-top:56px}
  .also{margin-top:56px}
  .subs{grid-template-columns:1fr}
  .finalin{padding:40px 24px;border-radius:18px}
  .final{padding-bottom:64px}
  .ph{--s:.82}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* ── cornerstone gallery ──
   Slides stack in one grid cell, so the container is as tall as the tallest
   slide and switching never makes the page jump. */
.cgal{display:flex;flex-direction:column;align-items:center;gap:16px}
.cgal-stage{display:grid;width:100%;justify-items:center}
.cgal-slide{grid-area:1/1;width:100%;display:flex;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease}
.cgal-slide.on{opacity:1;visibility:visible}
.cgal-slide .ph{margin:0}
.cgal-slide figure.wide{width:100%}
.cgal-slide video{width:100%;height:100%;object-fit:cover;display:block}
.cgal-slide figure.wide video{aspect-ratio:4/3;object-fit:contain;background:var(--tint);padding:14px}
.cgal-nav{display:flex;align-items:center;justify-content:center;gap:16px}
.cgal-arrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--pu);cursor:pointer;transition:background .18s ease,border-color .18s ease}
.cgal-arrow:hover{background:var(--tint);border-color:#C9C4DC}
.cgal-arrow:focus-visible{outline:2px solid var(--pu);outline-offset:2px}
.cgal-arrow svg{width:16px;height:16px}
.cgal-dots{display:flex;gap:7px}
.cgal-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#D5D2E0;cursor:pointer}
.cgal-dots button.on{background:var(--pu)}
.cgal-dots button:focus-visible{outline:2px solid var(--pu);outline-offset:3px}
.cgal-cap{font-size:12.5px;line-height:1.55;color:var(--mute);text-align:center;max-width:44ch}
.dk .cgal-arrow{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#C9BEFF}
.dk .cgal-arrow:hover{background:rgba(255,255,255,.14)}
.dk .cgal-dots button{background:rgba(255,255,255,.28)}
.dk .cgal-dots button.on{background:#A99BFF}
.dk .cgal-cap{color:rgba(255,255,255,.5)}
.dk .cgal-slide figure.wide video{background:rgba(255,255,255,.04)}


/* ── lightbox layout ──
   Mobile: everything stacked. Desktop: the title, caption and controls move
   into a column beside the phone, which frees the ~245px of vertical chrome
   they were taking and lets the frame use the full height of the viewport.
   Slides share one grid cell so stepping never reflows. */
.lb-in{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%;max-height:100%}
.lb-body{display:flex;justify-content:center;min-height:0}
.lb-stage{display:grid;justify-items:center;align-items:center}
.lb-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .22s ease}
.lb-slide.on{opacity:1;visibility:visible}
.lb-slide .ph{margin:0}
.lb-side{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.lb-note{font-size:14px;line-height:1.55;color:rgba(255,255,255,.68);max-width:44ch;min-height:2.9em}
.lb-nav{display:flex;align-items:center;justify-content:center;gap:16px}
.lb-nav:empty{display:none}
.lb-arrow{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:11px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .18s ease}
.lb-arrow:hover{background:rgba(255,255,255,.2)}
.lb-arrow:focus-visible{outline:2px solid #A99BFF;outline-offset:2px}
.lb-arrow svg{width:17px;height:17px}
.lb-dots{display:flex;gap:7px}
.lb-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer}
.lb-dots button.on{background:#A99BFF}
.lb-dots button:focus-visible{outline:2px solid #A99BFF;outline-offset:3px}
.lb figure.wide{width:min(880px,84vw);max-width:min(880px,84vw);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.lb figure.wide img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain}

/* Phone size. Driven by height and clamped to the viewport — width follows from
   the aspect ratio, so it physically cannot overflow. --s still scales the radii
   and side buttons; the clamp only bites on short windows. */
/* Width is set from the height explicitly. With width:auto and aspect-ratio
   inside the centred grid, iOS Safari sized the frame to zero, so every See it
   opened with a title and nothing above it. */
.lb .ph{--h:min(calc(706px * var(--s)), calc(100vh - 104px));height:var(--h);width:calc(var(--h) * 340 / 706);max-width:none;aspect-ratio:auto}
@supports (height:100dvh){ .lb .ph{--h:min(calc(706px * var(--s)), calc(100dvh - 104px))} }
.lb .ph{--s:.58}
@media (min-height:680px){ .lb .ph{--s:.66} }
@media (min-height:780px){ .lb .ph{--s:.78} }
@media (min-height:880px){ .lb .ph{--s:.88} }

@media (min-width:900px){
  .lb-in{flex-direction:row;align-items:center;gap:44px;text-align:left}
  .lb-side{align-items:flex-start;text-align:left;max-width:300px}
  .lb-t{text-align:left}
  .lb-nav{justify-content:flex-start}
  .lb .ph{--s:.8}
}
@media (min-width:900px) and (min-height:720px){ .lb .ph{--s:.88} }
@media (min-width:900px) and (min-height:820px){ .lb .ph{--s:1} }
@media (min-width:900px) and (min-height:920px){ .lb .ph{--s:1.12} }
@media (min-width:900px) and (min-height:1040px){ .lb .ph{--s:1.26} }