/* ==========================================================================
   DistilBook (TR) — style.css
   Design tokens + base
   ========================================================================== */

:root{
  --ink:#0f1729;
  --muted:#64748b;
  --muted2:#94a3b8;
  --line:#e9eef5;
  --line2:#f1f5f9;
  --panel:#f8fafc;
  --tint:#e8effd;
  --blue:#3b69f3;
  --blue-soft:#93c5fd;
  --green:#22c55e;
  --green-soft:#86efac;
  --pink:#db2777;
  --pink-soft:#f9a8d4;
  --red:#EB5757;
  --docx:#185ABD;

  --r-xl:28px;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:14px;
  --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(15,23,41,.04);
  --shadow-sm:0 1px 3px rgba(15,23,41,.05), 0 1px 2px rgba(15,23,41,.03);
  --shadow-md:0 6px 18px rgba(15,23,41,.06), 0 2px 6px rgba(15,23,41,.04);
  --shadow-blue:0 6px 18px rgba(59,105,243,.18);

  --pad-section:110px;
  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Fonts (self-hosted Inter) ---------- */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/inter-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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:400;
  font-display:swap;
  src:url('assets/fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/inter-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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:500;
  font-display:swap;
  src:url('assets/fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/inter-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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:600;
  font-display:swap;
  src:url('assets/fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/inter-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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:700;
  font-display:swap;
  src:url('assets/fonts/inter-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('assets/fonts/inter-latin-800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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:800;
  font-display:swap;
  src:url('assets/fonts/inter-latin-ext-800.woff2') format('woff2');
  unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Reset / base ---------- */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.12;
  color:var(--ink);
}

p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

strong{ font-weight:600; }

:focus-visible{
  outline:3px solid rgba(59,105,243,.5);
  outline-offset:2px;
  border-radius:6px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--blue);
  color:#fff;
  padding:12px 20px;
  border-radius:0 0 12px 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 24px;
}
.wrap--narrow{ max-width:840px; }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.btn-sm{ padding:10px 18px; font-size:15px; }
.btn-lg{ padding:15px 28px; font-size:16.5px; }
.btn-block{ width:100%; padding:14px 22px; font-size:16px; }

.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:var(--shadow-blue);
}
.btn-primary:hover{ background:#2f59e0; }
.btn-primary:active{ background:#2a4ecb; transform:translateY(1px); }

.btn-ghost{
  background:#fff;
  color:var(--ink);
  border-color:var(--line);
  box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{ border-color:#d7e0ee; background:var(--panel); }
.btn-ghost:active{ transform:translateY(1px); }

/* ---------- Header / nav ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 0 rgba(15,23,41,.02);
}

.nav-wrap{
  display:flex;
  align-items:center;
  gap:24px;
  height:72px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.brand-mark{ flex:0 0 auto; }
.brand-name{
  font-weight:700;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--ink);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
}
.nav-links a{
  font-size:15.5px;
  font-weight:500;
  color:var(--muted);
  padding:6px 0;
  transition:color .18s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }

.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
}
.nav-toggle-bars{
  display:block;
  position:relative;
  width:18px;
  height:12px;
}
.nav-toggle-bars span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .22s var(--ease), opacity .18s var(--ease), top .22s var(--ease);
}
.nav-toggle-bars span:nth-child(1){ top:0; }
.nav-toggle-bars span:nth-child(2){ top:5px; }
.nav-toggle-bars span:nth-child(3){ top:10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ top:5px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ top:5px; transform:rotate(-45deg); }

.mobile-menu{
  border-top:1px solid var(--line);
  background:#fff;
  animation:menuIn .22s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.mobile-menu-inner{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-top:14px;
  padding-bottom:22px;
}
.mobile-menu-inner a{
  font-size:17px;
  font-weight:500;
  color:var(--ink);
  padding:12px 4px;
  border-radius:10px;
}
.mobile-menu-inner a:hover{ background:var(--panel); }
.mobile-menu-inner a.mobile-menu-cta{ margin-top:10px; color:#fff; }
.mobile-menu-inner a.mobile-menu-cta:hover{ background:#2f59e0; }

/* ---------- Section rhythm ---------- */

.section{ padding:var(--pad-section) 0; }
.section--panel{
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head{
  max-width:720px;
  margin:0 auto 56px;
  text-align:center;
}
.section-title{
  font-size:clamp(30px,4vw,44px);
  letter-spacing:-.03em;
}
.section-sub{
  margin-top:16px;
  color:var(--muted);
  font-size:18px;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  padding:72px 0 96px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-200px -10% auto -10%;
  height:620px;
  background:
    radial-gradient(560px 340px at 18% 30%, rgba(59,105,243,.10), transparent 70%),
    radial-gradient(460px 300px at 88% 14%, rgba(219,39,119,.07), transparent 70%),
    radial-gradient(420px 280px at 62% 68%, rgba(34,197,94,.06), transparent 70%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;
  align-items:center;
}

.eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--tint);
  color:#2c4fbf;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.005em;
  padding:8px 16px;
  border-radius:var(--r-pill);
  margin-bottom:26px;
}
.eyebrow-pill .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 3px rgba(59,105,243,.18);
}

.hero-title{
  font-size:clamp(38px,4.6vw,64px);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.05;
  max-width:18ch;
  text-wrap:balance;
}

.hero-sub{
  margin-top:24px;
  font-size:clamp(17px,1.4vw,19.5px);
  color:var(--muted);
  line-height:1.6;
  max-width:52ch;
}

.hero-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:32px;
}
.chips-label{
  font-size:14.5px;
  font-weight:600;
  color:var(--muted);
  margin-right:2px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px 7px 11px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:#fff;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  box-shadow:var(--shadow-xs);
}
.chips-more{
  font-size:14px;
  color:var(--muted2);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero-micro{
  margin-top:18px;
  font-size:14.5px;
  color:var(--muted2);
}

/* ---------- Hero visual ---------- */

.hero-visual{ position:relative; }

/* The hero shows the editor itself rather than a diagram of it: a real window
   with a scene rail, a canvas and a timeline, so the section reads as dense as
   the product it is selling. */
.appwin{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 24px 60px -24px rgba(15,23,42,.22), 0 0 0 6px rgba(255,255,255,.55);
}

/* title bar */
.appwin-bar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:11px 14px;
  border-bottom:1px solid var(--line2);
  background:linear-gradient(#fbfcfe,#f6f8fc);
}
.appwin-dots{ display:flex; gap:6px; flex:none; }
.appwin-dots i{ width:10px; height:10px; border-radius:50%; background:#e2e8f0; }
.appwin-dots i:first-child{ background:#fca5a5; }
.appwin-dots i:nth-child(2){ background:#fcd34d; }
.appwin-dots i:nth-child(3){ background:#86efac; }
.appwin-file{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  color:#334155;
  white-space:nowrap;
}
.appwin-meta{
  font-size:12.5px;
  color:var(--muted2);
  white-space:nowrap;
}
.appwin-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
}
/* The bar is a single line at every width: the pieces that give way are the
   meta readout and the palette label, never the export button. */
.appwin-bar > *{ flex:none; }
.appwin-meta{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.appwin-pal{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--muted2);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:4px 10px 4px 5px;
}
.appwin-pal .sw{
  width:16px;
  height:16px;
  border-radius:5px;
  background:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.appwin-cta{
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  background:var(--blue);
  border-radius:var(--r-pill);
  padding:6px 14px;
}

/* body: rail · canvas · narration */
.appwin-body{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 158px;
  min-height:352px;
}
.appwin-rail{
  border-right:1px solid var(--line2);
  background:#fbfcfe;
  padding:14px 10px;
}
.rail-head{
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
  margin:0 0 9px 6px;
}
/* Two rows per scene: number + thumbnail on top, the name underneath. A single
   row cannot hold a Turkish scene title in a rail this narrow. */
.rail-item{
  display:grid;
  grid-template-columns:14px 34px minmax(0,1fr);
  grid-template-areas:
    "n th ."
    "n t  t";
  align-items:center;
  gap:3px 8px;
  padding:7px 8px 8px;
  border-radius:9px;
  margin-bottom:3px;
  border:1px solid transparent;
}
.rail-n{ grid-area:n; align-self:start; margin-top:3px; }
.rail-th{ grid-area:th; }
.rail-t{ grid-area:t; }
.rail-item.is-active{
  background:#fff;
  border-color:#cfdcfb;
  box-shadow:0 1px 2px rgba(59,105,243,.10);
}
.rail-n{
  font-size:11px;
  font-weight:700;
  color:#94a3b8;
  text-align:center;
}
.rail-item.is-active .rail-n{ color:var(--blue); }
.rail-th{
  height:20px;
  border-radius:4px;
  border:1px solid rgba(15,23,42,.06);
}
.r1{ background:linear-gradient(135deg,#c7d7f5,#e8effd); }
.r2{ background:linear-gradient(135deg,#fde3c8,#fff1e0); }
.r3{ background:linear-gradient(135deg,#c9e7d8,#e9f6ef); }
.r4{ background:linear-gradient(135deg,#ddd6f3,#f0ecfb); }
.rail-t{
  font-size:11.5px;
  font-weight:600;
  line-height:1.3;
  color:#475569;
}
.rail-item.is-active .rail-t{ color:#1e293b; }

.appwin-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 24px 14px;
  background:
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(0deg, rgba(15,23,42,.035) 1px, transparent 1px) 0 0/22px 22px,
    #fff;
}
.stage-canvas{
  position:relative;
  width:100%;
  max-width:400px;
  aspect-ratio:460/300;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.stage-caret{
  position:absolute;
  right:16%;
  bottom:26%;
  width:2px;
  height:20px;
  background:var(--blue);
  border-radius:1px;
  animation:caretBlink 1.1s steps(1,end) infinite;
}
@keyframes caretBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.stage-cap{
  margin:12px 0 0;
  font-size:12px;
  font-weight:600;
  color:var(--muted2);
}

.appwin-side{
  border-left:1px solid var(--line2);
  background:#fbfcfe;
  padding:14px 12px;
}
.side-head{
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
  margin:14px 0 8px 2px;
}
.side-head:first-child{ margin-top:0; }
.side-line{
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 7px;
  padding:7px 9px;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--line2);
}
.side-line.is-cur{
  border-color:#cfdcfb;
  color:#1e293b;
  font-weight:500;
  box-shadow:0 1px 2px rgba(59,105,243,.10);
}
.side-swatches{ display:flex; gap:6px; }
.side-swatches i{
  flex:1;
  height:20px;
  border-radius:5px;
  background:#e2e8f0;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
}
.side-swatches i.is-on{
  background:var(--blue);
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #cfdcfb;
}
.side-bar{
  height:6px;
  border-radius:var(--r-pill);
  background:var(--line2);
  overflow:hidden;
}
.side-bar span{
  display:block;
  width:64%;
  height:100%;
  border-radius:var(--r-pill);
  background:var(--blue);
}

/* timeline strip */
.appwin-tl{
  position:relative;
  border-top:1px solid var(--line2);
  background:#fbfcfe;
  padding:10px 14px 14px;
}
.tl-ruler{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}
.tl-ruler i{
  width:1px;
  height:6px;
  background:#dbe3ee;
}
.tl-track{
  display:flex;
  gap:5px;
  margin-bottom:6px;
}
.clip{
  height:26px;
  border-radius:6px;
  background:#e6ecf8;
  border:1px solid #d3ddf0;
  font-size:11px;
  font-weight:700;
  color:#7c8aa5;
  display:flex;
  align-items:center;
  padding-left:9px;
}
.clip--on{
  background:#e0e8fd;
  border-color:var(--blue);
  color:var(--blue);
  box-shadow:0 1px 3px rgba(59,105,243,.18);
}
.tl-track--thin{ margin-bottom:0; }
.clip--audio{
  height:12px;
  padding:0;
  border-radius:4px;
  background:repeating-linear-gradient(90deg,#bfd3f7 0 2px,transparent 2px 4px);
  border-color:#cfdcfb;
}
.tl-head{
  position:absolute;
  left:36%;
  top:34px;
  bottom:12px;
  width:2px;
  background:var(--blue);
  border-radius:1px;
}
.tl-head::before{
  content:"";
  position:absolute;
  top:-4px;
  left:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
}

/* ---------- Trust strip ---------- */

.trust{ padding:8px 0 84px; }
.trust-line{
  text-align:center;
  color:var(--muted);
  font-size:15.5px;
  margin-bottom:30px;
}
/* Each name carries its own mark so the row reads as logos, not as a list of
   words. The marks are monochrome and low-contrast on purpose — a row of
   full-colour brands at this point in the page fights the hero above it. */
.trust-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:22px 46px;
}
.tl{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted2);
  font-weight:600;
  font-size:16.5px;
  letter-spacing:-.01em;
  opacity:.82;
  transition:opacity .18s var(--ease), color .18s var(--ease);
}
.tl:hover{ opacity:1; color:#4a5568; }
.tl-mark{ flex:0 0 auto; }

/* ---------- How it works ----------
   Four alternating rows rather than four equal cards: copy on one side, a
   mockup of the actual interface on the other, flipped every other row. Each
   mockup is built from elements so it shows the product, not a diagram of it. */

.feats{
  display:grid;
  gap:76px;
}
.feat{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:56px;
  align-items:center;
}
.feat--flip{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
.feat--flip .feat-copy{ order:2; }

.feat-eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
}
.feat-title{
  font-size:clamp(24px,2.5vw,32px);
  line-height:1.2;
  letter-spacing:-.026em;
  margin-bottom:14px;
}
.feat-text{
  color:var(--muted);
  font-size:16.5px;
  line-height:1.65;
}
.feat-list{
  margin-top:20px;
  display:grid;
  gap:10px;
}
.feat-list li{
  position:relative;
  padding-left:26px;
  font-size:15.5px;
  color:#334155;
}
.feat-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/10px 10px no-repeat,
    var(--blue);
}

/* The mockup well: a tinted stage the interface sits on. */
.feat-visual{
  background:var(--tint);
  border:1px solid #dce6fa;
  border-radius:20px;
  padding:26px;
}

.mock{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -22px rgba(15,23,42,.26);
}
.mock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  font-weight:700;
  color:#1e293b;
  padding-bottom:11px;
  margin-bottom:11px;
  border-bottom:1px solid var(--line2);
}
.mock-count{
  font-size:12px;
  font-weight:600;
  color:var(--muted2);
}
.mock-sub{
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
  margin:14px 0 8px;
}

/* --- sources list --- */
.src{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  border-radius:8px;
  border:1px solid transparent;
}
.src--on{
  background:#f8fbff;
  border-color:#e3ecfb;
}
.src-ic{
  display:flex;
  align-items:center;
  justify-content:center;
  height:26px;
  border-radius:6px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.03em;
  color:#fff;
}
.ic-pdf{ background:#EB5757; }
.ic-doc{ background:#185ABD; }
.ic-url{ background:#0f766e; }
.ic-img{ background:#7c3aed; }
.src-name{
  font-size:13.5px;
  font-weight:600;
  color:#334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.src-meta{
  font-size:11.5px;
  color:var(--muted2);
  white-space:nowrap;
}
.mock-bar{
  margin-top:13px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--line2);
  overflow:hidden;
}
.mock-bar span{
  display:block;
  height:100%;
  border-radius:var(--r-pill);
  background:var(--blue);
}

/* --- template grid --- */
.tpl-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.tpl{
  aspect-ratio:16/10;
  border-radius:7px;
  border:1px solid var(--line2);
  background:#f4f7fc;
}
.tpl--on{
  border:2px solid var(--blue);
  background:#e8effd;
  box-shadow:0 0 0 3px rgba(59,105,243,.14);
}
.t1{ background:linear-gradient(135deg,#eef4ff,#dbe7fd); }
.t2{ background:linear-gradient(135deg,#fdf2e9,#f8e2ca); }
.t3{ background:linear-gradient(135deg,#eaf3ef,#d6ebe0); }
.t4{ background:linear-gradient(135deg,#f3eefb,#e3d9f6); }
.t5{ background:linear-gradient(135deg,#fdeef4,#f8d8e6); }
.brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:#fbfcfe;
}
.brand-logo{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  color:#334155;
}
.brand-pal{ display:flex; gap:5px; }
.brand-pal i{
  width:18px;
  height:18px;
  border-radius:5px;
  background:#e2e8f0;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.05);
}
.brand-pal i.on{
  background:var(--blue);
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #cfdcfb;
}

/* --- agent script --- */
.sc{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  font-size:13.5px;
  color:#475569;
}
.sc--live{
  background:#f8fbff;
  border:1px solid #e3ecfb;
  color:#1e293b;
  font-weight:500;
}
.sc--dim{ color:#94a3b8; }
.sc-n{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#eef2f8;
  font-size:11px;
  font-weight:700;
  color:#7c8aa5;
}
.sc--live .sc-n{ background:var(--blue); color:#fff; }
.sc-typing{
  display:inline-block;
  width:2px;
  height:13px;
  margin-left:3px;
  background:var(--blue);
  vertical-align:-2px;
  animation:caretBlink 1.1s steps(1,end) infinite;
}
/* Waveform: bars carry an inline pixel height and bottom-align, so the shape
   reads as a level meter rather than a row of equal dashes. */
.wave{
  display:flex;
  align-items:flex-end;
  gap:2.5px;
  height:32px;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid var(--line2);
  box-sizing:content-box;
}
.wave i{
  flex:1;
  border-radius:2px;
  background:#bfd3f7;
}

/* --- editor --- */
.ed-canvas{
  position:relative;
  aspect-ratio:16/9;
  border-radius:9px;
  background:
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(0deg, rgba(15,23,42,.035) 1px, transparent 1px) 0 0/20px 20px,
    #fbfcfe;
  border:1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ed-art{
  display:block;
  width:52%;
  height:44%;
  border-radius:6px;
  background:linear-gradient(135deg,#e8effd,#c7d7f5);
}
/* selection frame with corner handles, as the real editor draws it */
.ed-sel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58%;
  height:52%;
  border:1.5px solid var(--blue);
  border-radius:4px;
}
.ed-sel .h{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:2px;
  background:#fff;
  border:1.5px solid var(--blue);
}
.h-tl{ top:-4px; left:-4px; }
.h-tr{ top:-4px; right:-4px; }
.h-bl{ bottom:-4px; left:-4px; }
.h-br{ bottom:-4px; right:-4px; }
.ed-guide{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(59,105,243,.5);
}
.ed-tools{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:11px;
  padding:7px 9px;
  border:1px solid var(--line2);
  border-radius:8px;
  background:#fbfcfe;
  font-size:11.5px;
  font-weight:600;
  color:#475569;
}
.ed-tool{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border-radius:6px;
  background:#fff;
  border:1px solid var(--line2);
  white-space:nowrap;
}
.ed-tool--play{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.ed-tool--del{ color:#dc2626; }
.ed-time{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  color:var(--muted2);
}
.g-zoom{
  display:block;
  width:22px;
  height:4px;
  border-radius:2px;
  background:var(--blue);
}
/* Clips lay out on one line and the audio stripe wraps to a second, full-width
   line. Flex (not grid) so each clip's inline width percentage is a share of
   the track itself — which is what makes the clips read as a timeline. */
.ed-track{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:9px;
}
.ed-clip{
  flex:0 0 auto;
  height:20px;
  border-radius:5px;
  background:#e6ecf8;
  border:1px solid #d3ddf0;
  box-sizing:border-box;
}
.ed-clip--on{
  background:#e0e8fd;
  border-color:var(--blue);
  box-shadow:0 1px 3px rgba(59,105,243,.18);
}
.ed-clip--audio{
  flex:1 1 100%;
  height:9px;
  background:repeating-linear-gradient(90deg,#bfd3f7 0 2px,transparent 2px 4px);
  border-color:#cfdcfb;
}

/* ---------- Style gallery ---------- */

.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:44px;
}
.filter-tab{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:9px 20px;
  font-size:15px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.filter-tab:hover{ color:var(--ink); border-color:#d7e0ee; }
.filter-tab.is-active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:var(--shadow-blue);
}

/* Split view, as the real product page does it: one large preview holding the
   stage, and a compact scrollable list of rows beside it. Rows carry their
   thumbnail, name and use case on a single line, so fourteen styles fit in the
   space a four-up card grid used to waste. */
.styles-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
}

.styles-preview{
  position:sticky;
  top:96px;
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
/* The artwork is 160x110 in the row. Stretched to a 520px frame it reads as a
   magnified icon, so the preview composes it as a slide instead: the art holds
   its own ground colour at a sane size, and a lower third carries the style's
   name over it — the way the same art appears in a finished video. */
.styles-preview-frame{
  position:relative;
  aspect-ratio:16/10;
  background:#eaeef5;
  padding:20px;
}
.styles-slide{
  position:absolute;
  inset:20px;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.06), 0 12px 28px -14px rgba(15,23,42,.20);
}
.styles-slide-art{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px 30px 74px;
}
.styles-slide-art svg{
  width:100%;
  height:100%;
  max-width:420px;
  border-radius:8px;
}
/* the caption sits on the artwork, so it needs its own ground to stay legible
   whatever colour the style's illustration happens to be */
.styles-slide-lower{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px 20px 18px;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.92) 42%, #fff);
}
.styles-slide-name{
  display:block;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.022em;
  color:var(--ink);
}
.styles-slide-desc{
  display:block;
  margin-top:3px;
  font-size:13.5px;
  color:var(--muted);
}
.styles-preview-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 20px;
  border-top:1px solid var(--line2);
}
.styles-preview-note{
  font-size:14.5px;
  color:var(--muted);
}
.styles-preview-tag{
  flex:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue);
  background:var(--tint);
  border-radius:var(--r-pill);
  padding:6px 12px;
}

.style-list{
  display:grid;
  gap:8px;
  max-height:640px;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
}
.style-item[hidden]{ display:none; }

.style-card{
  width:100%;
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px 16px 10px 10px;
  cursor:pointer;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease),
             background-color .2s var(--ease);
}
.style-card:hover{
  border-color:#dfe6f1;
  box-shadow:var(--shadow-sm);
}
.style-card.is-selected{
  border-color:var(--blue);
  background:#fbfcff;
  box-shadow:0 0 0 3px rgba(59,105,243,.13);
}

.style-thumb{
  display:block;
  border-radius:9px;
  overflow:hidden;
  aspect-ratio:16/11;
  background:var(--line2);
}
.style-thumb svg{ width:100%; height:100%; }

.style-text{ min-width:0; }
.style-name{
  display:block;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.018em;
  color:var(--ink);
}
.style-desc{
  display:block;
  margin-top:2px;
  font-size:13.5px;
  color:var(--muted);
  line-height:1.45;
}
/* the tick that marks the row feeding the preview */
.style-card::after{
  content:"";
  width:20px;
  height:20px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:#fff;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.style-card.is-selected::after{
  border-color:var(--blue);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center/13px 13px no-repeat,
    var(--blue);
}

.style-live{
  margin-top:26px;
  text-align:center;
  font-size:15px;
  font-weight:600;
  color:var(--blue);
  min-height:24px;
}

/* ---------- Output gallery (three marquee rows of rendered scenes) ----------
   The real product page proves the output with a wall of finished frames, not
   with a claim. Three rows drifting at different speeds and alternating
   directions give that wall the depth of a real gallery without a single
   particle or glow. */

/* Plain white, deliberately: it sits between the tinted templates panel and
   the tinted proof bento, so a third tint here would flatten the rhythm. */
.gallery{ padding-bottom:calc(var(--pad-section) - 18px); }

.galaxy{
  overflow:hidden;
  display:grid;
  gap:22px;
  padding:8px 0 10px;
  /* Rows bleed past the wrap so the marquee reads as continuing off-frame
     rather than stopping inside the content column. */
  margin:8px 0 26px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Vertical padding buys the tile shadows somewhere to fall inside the clip;
   without it `overflow:hidden` shears them off flat at the row edge. */
.grow{ overflow:hidden; padding:4px 0 22px; }
.gtrack{
  display:flex;
  width:max-content;
}
.grow[data-dir="l"] .gtrack{ animation:gSlide 58s linear infinite; }
.grow[data-dir="r"] .gtrack{ animation:gSlide 72s linear infinite reverse; }
@keyframes gSlide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Spacing lives on the tile as a margin, never as a flex `gap`: the track is
   translated by exactly half its width, and a gap would add a trailing space
   that half-width doesn't account for, popping the seam once per loop. */
.gt{
  flex:0 0 auto;
  width:268px;
  margin-right:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 10px 0;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 40px -28px rgba(15,23,42,.35);
}
.gt-scene{
  position:relative;
  aspect-ratio:240/140;
  border-radius:11px;
  overflow:hidden;
  background:#f7f9fc;
  border:1px solid var(--line2);
}
.gt-scene svg{ display:block; width:100%; height:100%; }
.gt-play{
  position:absolute;
  right:9px;
  bottom:9px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--blue);
  box-shadow:0 1px 3px rgba(15,23,42,.18);
}
.gt-foot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 4px 12px;
}
.gt-name{
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gt-dur{
  flex:0 0 auto;
  font-size:12px;
  font-weight:600;
  color:var(--muted2);
  font-variant-numeric:tabular-nums;
}
.galaxy-note{
  margin:0;
  text-align:center;
  font-size:15px;
  color:var(--muted);
}

/* ---------- Social proof (testimonials + stats in one bento) ----------
   The real product page runs its quotes and its numbers through a single
   3-column bento rather than two separate bands, which is what keeps that
   stretch of the page reading dense instead of like two short lists. */

.proof{
  background:var(--tint);
  padding:var(--pad-section) 0;
}
.proof-lede{
  max-width:64ch;
  margin:0 auto 46px;
  text-align:center;
  font-size:17.5px;
  line-height:1.6;
  color:#31456f;
}

/* Six tiles on a twelve-column grid, arranged so every row closes exactly and
   the two quotes sit on opposite diagonals rather than stacked:
     7 + 5   quote beside a stat
     6 + 6   two stats
     5 + 7   a stat beside the quote
   A quote spans wider than a stat because its copy is longer, which is what
   keeps the block reading as a bento and not as three equal rows. */
.bento{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.bento > li:nth-child(1){ grid-column:span 7; }
.bento > li:nth-child(2){ grid-column:span 5; }
.bento > li:nth-child(3){ grid-column:span 6; }
.bento > li:nth-child(4){ grid-column:span 6; }
.bento > li:nth-child(5){ grid-column:span 5; }
.bento > li:nth-child(6){ grid-column:span 7; }

/* Stat tile: number, label, then the supporting line, anchored to the bottom
   so the three stat tiles share a baseline even at unequal copy lengths. */
.stat{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px 30px;
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
/* the soft corner wash the real tiles carry */
.stat::before{
  content:"";
  position:absolute;
  top:-70px;
  right:-60px;
  width:210px;
  height:170px;
  background:radial-gradient(closest-side, rgba(59,105,243,.20), transparent 72%);
  pointer-events:none;
}
.stat-value{
  position:relative;
  display:block;
  font-size:clamp(30px,3.3vw,44px);
  font-weight:700;
  letter-spacing:-.032em;
  color:var(--ink);
  line-height:1.12;
  min-height:1.12em;
}
/* Text tiles (not counted) sit a touch smaller so the group keeps one weight */
.stat-value[data-text]{
  font-size:clamp(23px,2.5vw,33px);
  letter-spacing:-.026em;
}
.stat-label{
  position:relative;
  display:block;
  margin-top:12px;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
}
.stat-note{
  position:relative;
  display:block;
  margin-top:8px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
}
/* Push the number group down so every stat tile's figure lands on one line
   whatever the length of its supporting copy. */
.stat > .stat-value{ margin-top:auto; }

/* ---------- Testimonials ---------- */

.quote-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:40px 36px 32px;
  box-shadow:var(--shadow-xs);
  display:flex;
  flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.quote-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

.quote-mark{
  position:absolute;
  top:22px;
  left:30px;
  font-size:64px;
  line-height:1;
  font-weight:700;
  color:var(--tint);
  pointer-events:none;
  user-select:none;
}

.quote-text{
  position:relative;
  margin:26px 0 0;
  font-size:17.5px;
  line-height:1.65;
  color:#25324a;
}

.quote-foot{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:26px;
}
.avatar{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--tint);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
.quote-who{ display:flex; flex-direction:column; line-height:1.35; }
.quote-who strong{ font-size:16px; font-weight:600; }
.quote-who small{ color:var(--muted); font-size:14px; }

/* the rating rides the right edge of the byline row */
.stars{
  margin-left:auto;
  flex:none;
  display:inline-flex;
  gap:2px;
  color:#f5b73b;
  align-self:center;
}

.quote-link{
  margin-top:18px;
  font-size:15px;
  font-weight:600;
  color:var(--blue);
  align-self:flex-start;
}
.quote-link:hover{ color:#2f59e0; text-decoration:underline; }

/* ---------- Pricing ---------- */

.billing{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:-16px 0 44px;
}
.billing-toggle{
  display:inline-flex;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:4px;
  box-shadow:var(--shadow-xs);
}
.billing-btn{
  border:0;
  background:transparent;
  border-radius:var(--r-pill);
  padding:9px 22px;
  font-size:15px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.billing-btn.is-active{
  background:var(--blue);
  color:#fff;
}
.billing-badge{
  background:var(--tint);
  color:#2c4fbf;
  font-size:13.5px;
  font-weight:600;
  padding:8px 16px;
  border-radius:var(--r-pill);
}

.plans{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.plan{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:34px 30px 36px;
  box-shadow:var(--shadow-xs);
  display:flex;
  flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plan:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.plan--popular{
  border:2px solid var(--blue);
  box-shadow:0 0 0 4px rgba(59,105,243,.10), var(--shadow-md);
  padding:32px 28px 34px;
}
.plan-flag{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--blue);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:6px 16px;
  border-radius:var(--r-pill);
  white-space:nowrap;
}

.plan-name{
  font-size:20px;
  letter-spacing:-.02em;
}
.plan-price{
  margin-top:14px;
  display:flex;
  align-items:baseline;
  gap:5px;
}
.plan-amount{
  font-size:46px;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
}
.plan-period{
  font-size:16px;
  font-weight:500;
  color:var(--muted);
}
.plan-note{
  margin-top:8px;
  font-size:14px;
  color:var(--muted2);
  min-height:21px;
}

.plan .btn-block{ margin:22px 0 26px; }

.plan-specs{
  margin:0 0 22px;
  border-top:1px solid var(--line);
}
.plan-specs > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line2);
}
.plan-specs dt{
  font-size:14.5px;
  color:var(--muted);
}
.plan-specs dd{
  margin:0;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  text-align:right;
}

.plan-features{ display:flex; flex-direction:column; gap:11px; }
.plan-features li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15px;
  color:#33415a;
}
.plan-features svg{ flex:0 0 auto; margin-top:2px; }

.pricing-note{
  margin-top:38px;
  text-align:center;
  color:var(--muted);
  font-size:15.5px;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.credit-note{
  margin:10px auto 0;
  text-align:center;
  color:var(--muted2);
  font-size:14.5px;
  max-width:720px;
}
.credit-note strong{
  color:var(--muted);
  margin-right:6px;
}

/* ---------- FAQ ---------- */

.faq-split{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:72px;
  align-items:start;
}
.faq-aside{
  position:sticky;
  top:104px;
}
.faq-aside .section-title{ margin:0; }
.faq-aside-text{
  margin:16px 0 26px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.65;
  max-width:34ch;
}

/* The three routes out of the page, mirroring the support cards the real site
   parks in this column. */
.help-list{ display:grid; gap:10px; }
.help{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.help:hover{
  border-color:#c9d8fb;
  box-shadow:0 10px 26px -18px rgba(15,23,42,.4);
  transform:translateY(-1px);
}
.help-ic{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  background:#f1f3f7;
  color:#4a5568;
}
.help-text{ display:block; min-width:0; }
.help-name{ display:block; font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.help-desc{ display:block; margin-top:3px; font-size:13.5px; line-height:1.45; color:var(--muted); }

.faq{
  border-top:1px solid var(--line);
  counter-reset:faq;
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{ margin:0; font-size:inherit; font-weight:inherit; letter-spacing:normal; }

.faq-toggle{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:22px;
  text-align:left;
  background:transparent;
  border:0;
  padding:22px 4px;
  cursor:pointer;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  transition:color .18s var(--ease);
}
.faq-toggle::before{
  counter-increment:faq;
  content:counter(faq,decimal-leading-zero);
  flex:0 0 auto;
  width:26px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--muted2);
  font-variant-numeric:tabular-nums;
  transition:color .18s var(--ease);
}
.faq-toggle > span{ flex:1 1 auto; }
.faq-toggle:hover{ color:var(--blue); }
.faq-toggle:hover::before,
.faq-toggle[aria-expanded="true"]::before{ color:var(--blue); }
.faq-chev{
  flex:0 0 auto;
  align-self:center;
  color:var(--muted2);
  transition:transform .28s var(--ease), color .18s var(--ease);
}
.faq-toggle[aria-expanded="true"] .faq-chev{
  transform:rotate(180deg);
  color:var(--blue);
}

.faq-panel{
  overflow:hidden;
  transition:height .32s var(--ease);
}
.faq-panel[hidden]{ display:none; }
.faq-panel p{
  padding:0 4px 26px 48px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.7;
  max-width:66ch;
}

/* ---------- Final CTA ---------- */

.final-cta{ padding:0 0 var(--pad-section); }
.cta-panel{
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(59,105,243,.12), transparent 70%),
    radial-gradient(520px 280px at 88% 100%, rgba(219,39,119,.08), transparent 70%),
    var(--tint);
  border:1px solid #d8e3fb;
  border-radius:var(--r-xl);
  padding:80px 48px;
  text-align:center;
}
.cta-title{
  font-size:clamp(28px,3.6vw,42px);
  max-width:20ch;
  margin:0 auto;
}
.cta-sub{
  margin:20px auto 34px;
  color:#3f5680;
  font-size:18px;
  max-width:52ch;
}

/* ---------- Footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:68px 0 34px;
  background:#fff;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:36px;
}
.footer-tagline{
  margin-top:18px;
  color:var(--muted);
  font-size:15px;
  max-width:34ch;
  line-height:1.6;
}
.social{
  display:flex;
  gap:9px;
  margin-top:20px;
}
.social a{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#f3f5f9;
  color:#5a6577;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.social a:hover{ background:var(--blue); color:#fff; }

.footer-head{
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
  margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{
  font-size:15px;
  color:var(--muted);
  transition:color .18s var(--ease);
}
.footer-col a:hover{ color:var(--blue); }

.footer-bottom{
  margin-top:56px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14.5px;
  color:var(--muted2);
}
.footer-legal{ display:flex; gap:24px; }
.footer-legal a{ transition:color .18s var(--ease); }
.footer-legal a:hover{ color:var(--blue); }

/* ---------- Reveal on scroll ----------
   The animated state is opt-in: it only applies once script.js has added
   `js-reveal` to <html>. Without JS — or if IntersectionObserver never
   reports, as it does in some embedded/headless Chromium builds — every
   `.reveal` block stays fully visible instead of the whole page rendering
   blank. */

.js-reveal .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  will-change:opacity, transform;
}
.js-reveal .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet and below */
@media (max-width:1080px){
  :root{ --pad-section:96px; }

  .hero-inner{ gap:48px; }
  .hero-title{ max-width:13ch; }

  /* The split view stacks before the rows lose their thumbnails, so the
     preview stays legible on a tablet. */
  .styles-split{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .styles-preview{ position:static; }
  .style-list{ max-height:520px; }

  /* The FAQ aside gives width back to the answers before it stacks. */
  .faq-split{ grid-template-columns:minmax(0,296px) minmax(0,1fr); gap:44px; }

  /* Feature rows narrow their copy column before they stack. */
  .feat{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:36px; }
  .feat--flip{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .feats{ gap:60px; }

  /* The rail is the first thing to go when the window narrows; the canvas and
     the timeline carry the idea on their own. */
  .appwin-body{ grid-template-columns:minmax(0,1fr) 150px; }
  .appwin-rail{ display:none; }
  .appwin-meta{ display:none; }
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-right .btn-sm{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-wrap{ height:66px; }
  html{ scroll-padding-top:80px; }

  .hero{ padding:48px 0 72px; }
  .hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:52px;
  }
  .hero-title{ max-width:none; }
  .hero-sub{ max-width:none; }
  .hero-visual{ order:2; }

  /* Feature rows stack; copy always comes first so the eye reads the claim
     before the mockup that proves it, whichever side it sat on. */
  .feat,
  .feat--flip{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .feat--flip .feat-copy{ order:0; }
  .feats{ gap:52px; }
  .feat-title{ font-size:24px; }
  .feat-visual{ padding:18px; }

  .trust{ padding-bottom:64px; }
  .trust-logos{ gap:16px 36px; font-size:16px; }

  .section-head{ margin-bottom:44px; }

  /* Two tiles per row, and each row must close. Quotes take the full width;
     the four stats pair up 2+2 between them, so nothing is ever left alone on
     a line with half the row empty. */
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .bento > li:nth-child(1),
  .bento > li:nth-child(6){ grid-column:span 2; }
  .bento > li:nth-child(2),
  .bento > li:nth-child(3),
  .bento > li:nth-child(4),
  .bento > li:nth-child(5){ grid-column:span 1; }
  .bento > li:nth-child(6){ order:2; }
  .stat{ padding:26px 24px 24px; }

  .plans{ grid-template-columns:minmax(0,1fr); max-width:520px; margin:0 auto; }

  .faq-split{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .faq-aside{ position:static; }
  .faq-aside-text{ max-width:none; margin-bottom:20px; }
  .help-list{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 28px;
  }
  .footer-brand{ grid-column:1 / -1; }
}

/* Small tablet / large phone */
@media (max-width:768px){
  body{ font-size:16.5px; }

  /* Rows keep their shape but give the tick back to the text column. */
  .style-card{ grid-template-columns:80px minmax(0,1fr); gap:13px; padding:9px 14px 9px 9px; }
  .style-card::after{ display:none; }
  .style-name{ font-size:15px; }
  .style-desc{ font-size:13px; }
  .styles-slide-name{ font-size:16px; }
  .styles-slide-desc{ font-size:12.5px; }
  .styles-slide-art{ padding:20px 22px 64px; }

  .appwin-body{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .appwin-side{ display:none; }
  .appwin-stage{ padding:18px 18px 14px; }
  .appwin-actions .appwin-pal{ display:none; }
  .appwin-file{ font-size:12px; }
  .appwin-cta{ padding:5px 11px; font-size:12px; }

  .cta-panel{ padding:58px 28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Phones */
@media (max-width:560px){
  :root{ --pad-section:72px; }

  .wrap{ padding:0 20px; }

  .feats{ gap:44px; }
  .feat-visual{ padding:14px; border-radius:16px; }
  .mock{ padding:13px; }
  .src{ grid-template-columns:34px minmax(0,1fr); gap:9px; }
  .src-meta{ grid-column:2; }
  .ed-tools{ overflow-x:auto; }
  .ed-time{ margin-left:0; }

  .filter-tabs{ gap:7px; margin-bottom:32px; }
  .filter-tab{ padding:8px 16px; font-size:14px; }

  /* Phones: one column, every tile spanning it. The two quotes still sit at
     the ends so the numbers stay grouped between them. */
  .bento{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .bento .quote-card:nth-child(1),
  .bento .quote-card:nth-child(6){ grid-column:auto; }
  .bento .quote-card:nth-child(6){ order:2; }
  .stat{ padding:24px 22px 22px; }
  .proof-lede{ font-size:16px; margin-bottom:34px; }
  .stat-value{ font-size:30px; }
  .stat-value[data-text]{ font-size:22px; }

  /* Phones: the preview moves below the list, so the styles are still
     reachable without scrolling past a large image first. */
  .styles-preview{ order:2; }
  .style-list{ max-height:none; overflow:visible; padding-right:0; order:1; }
  .styles-split{ display:flex; flex-direction:column; }
  .styles-preview-tag{ display:none; }

  .hero-actions .btn{ flex:1 1 auto; }

  .quote-card{ padding:32px 24px 28px; }
  .quote-mark{ left:20px; }

  .plan{ padding:28px 22px 30px; }
  .plan--popular{ padding:26px 20px 28px; }

  .footer-grid{ grid-template-columns:minmax(0,1fr); gap:30px; }

  /* Phones: the number column is too costly at this width — the question
     itself is the index. */
  .faq-toggle{ gap:14px; padding:19px 2px; font-size:16.5px; }
  .faq-toggle::before{ display:none; }
  .faq-panel p{ padding:0 2px 22px; font-size:16px; }

  /* Phones: smaller tiles, tighter rows, so two full frames stay in view. */
  .galaxy{ gap:14px; margin:4px 0 22px; }
  .grow{ padding:4px 0 16px; }
  .gt{ width:210px; margin-right:14px; border-radius:14px; }
  .gt-name{ font-size:12.5px; }
  .gt-dur{ font-size:11px; }
  .galaxy-note{ font-size:14px; }

  .cta-panel{ padding:48px 22px; }

  /* Phones: the window keeps its shape but drops to a single column, and the
     rail scrolls horizontally rather than disappearing entirely. */
  .appwin-bar{ gap:10px; padding:10px 12px; }
  .appwin-meta{ display:none; }
  .appwin-rail{
    display:block;
    border-right:0;
    border-bottom:1px solid var(--line2);
    padding:10px;
    overflow-x:auto;
    white-space:nowrap;
  }
  .rail-head{ display:none; }
  .rail-item{
    display:inline-grid;
    grid-template-columns:14px 30px minmax(0,1fr);
    width:132px;
    margin:0 5px 0 0;
    vertical-align:top;
  }
  .appwin-stage{ padding:14px 12px 10px; }
  .stage-canvas{ max-width:none; }
  .appwin-tl{ padding:8px 12px 12px; }
  .clip{ height:22px; font-size:10px; }
}

@media (max-width:400px){
  .brand-name{ font-size:20px; }
  .chip{ font-size:12.5px; padding:6px 12px 6px 10px; }
  .stat-value{ font-size:24px; }
  .billing-btn{ padding:8px 16px; font-size:14px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .stage-caret{ animation:none; opacity:1; }

  /* The marquee is decorative; with motion reduced it holds its first frame
     rather than scrolling forever. */
  .gtrack{ animation:none !important; }

  .reveal{ opacity:1; transform:none; }

  .style-card:hover,.plan:hover,.quote-card:hover{ transform:none; }
  .sc-typing{ animation:none; opacity:1; }
}