/* ============================================================
   ALICE — Landing Page system (test pages)
   Navy ink · violet accent · soft pastel hero · editorial serif
   Shared skeleton across A/B/C; only hero angle/copy differs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink:#0E1636; --ink-2:#1A2350;
  --violet:#6B5BF5; --violet-2:#4B3DD9; --violet-soft:#EFECFD;
  --peach:#FBE4D3; --lavender:#E6DCF6; --sky:#DCE7F3;
  --n-0:#FFFFFF; --n-25:#F9F7F3; --n-50:#F2EFEA; --n-100:#E8E4DC;
  --n-200:#D5D0C5; --n-300:#B4AE9F;
  --fg-1:#0E1636; --fg-2:#3D3A4E; --fg-3:#6B6878; --fg-muted:#9A98A5;
  --fg-inverse:#F4F2EE; --fg-inverse-2:#A7AAC2;
  --ok:#2F7A3E;
  --border-hair:rgba(14,22,54,0.06);
  --border:rgba(14,22,54,0.10);
  --border-strong:rgba(14,22,54,0.16);

  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-serif:'DM Serif Display','Tiempos Headline',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --bg-hero:linear-gradient(150deg,#FBE7D8 0%,#EFE2F3 42%,#E1E9F4 100%);
  --shadow-sm:0 1px 2px rgba(14,22,54,.06),0 0 0 1px rgba(14,22,54,.04);
  --shadow-md:0 8px 24px rgba(14,22,54,.08),0 1px 3px rgba(14,22,54,.05);
  --shadow-lg:0 24px 60px rgba(14,22,54,.14),0 3px 10px rgba(14,22,54,.06);
  --shadow-xl:0 40px 90px rgba(14,22,54,.18),0 6px 16px rgba(14,22,54,.07);
  --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:26px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--n-25); color:var(--fg-1);
  font-family:var(--font-sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
::selection{background:rgba(107,91,245,.22);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; color:var(--violet-2);
}
.serif{font-family:var(--font-serif); font-weight:400;}
.it{font-style:italic; color:var(--violet);}
.muted{color:var(--fg-3);}

/* ---------- top bar ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(249,247,243,.78); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border-hair);
}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; gap:28px;}
.nav .logo{height:26px; width:auto;}
.nav-links{display:flex; gap:26px; margin-left:8px;}
.nav-links a{font-size:14.5px; color:var(--fg-2); font-weight:500;}
.nav-links a:hover{color:var(--ink);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:18px;}
.lang{font-family:var(--font-mono); font-size:12px; color:var(--fg-3);
  border:1px solid var(--border); border-radius:var(--r-pill); padding:4px 10px;}
.nav-login{font-size:14.5px; font-weight:500; color:var(--fg-2);}
.nav-login:hover{color:var(--ink);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:15px; white-space:nowrap;
  border-radius:var(--r-pill); padding:13px 22px; cursor:pointer;
  border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s;}
.btn svg{width:17px; height:17px;}
.btn-primary{background:var(--violet); color:#fff; box-shadow:0 8px 20px rgba(107,91,245,.30);}
.btn-primary:hover{background:var(--violet-2); transform:translateY(-1px); box-shadow:0 12px 26px rgba(107,91,245,.36);}
.btn-ink{background:var(--ink); color:#fff;}
.btn-ink:hover{background:var(--ink-2); transform:translateY(-1px);}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-1px);}
.btn-sm{padding:10px 18px; font-size:14px;}
.btn-lg{padding:16px 28px; font-size:16px;}

/* ---------- email capture ---------- */
.capture{display:flex; gap:10px; flex-wrap:wrap; max-width:480px;}
.capture input{
  flex:1; min-width:220px; font-family:var(--font-sans); font-size:15px;
  padding:14px 18px; border-radius:var(--r-pill); border:1px solid var(--border-strong);
  background:#fff; color:var(--ink); outline:none; transition:border .2s, box-shadow .2s;}
.capture input::placeholder{color:var(--fg-muted);}
.capture input:focus{border-color:var(--violet); box-shadow:0 0 0 3px rgba(107,91,245,.20);}
.capture .btn{white-space:nowrap;}
.cta-sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; font-size:13.5px; color:var(--fg-3);}
.cta-sub .dot{width:3px; height:3px; border-radius:50%; background:var(--fg-muted);}
.cta-sub b{color:var(--fg-2); font-weight:600;}
.demo-link{color:var(--violet-2); font-weight:600;}
.demo-link:hover{text-decoration:underline;}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--bg-hero); overflow:hidden;}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 80% -10%, rgba(255,255,255,.5), transparent 60%);}
.hero-in{max-width:var(--maxw); margin:0 auto; padding:66px 32px 0;
  position:relative; z-index:1;}
.hero h1{
  font-family:var(--font-sans); font-weight:600; letter-spacing:-.022em;
  font-size:clamp(38px,5vw,60px); line-height:1.04; color:var(--ink);
  max-width:16ch; margin:18px 0 0;}
.hero h1 .serif{font-weight:400; letter-spacing:-.01em;}
.hero-sub{font-size:19px; line-height:1.5; color:var(--fg-2);
  max-width:46ch; margin:20px 0 26px;}
.hero-cta{margin-bottom:30px;}
.rotword{color:var(--violet); font-family:var(--font-serif); font-style:italic; font-weight:400;}

/* product plate */
.plate{
  position:relative; margin-top:30px; border-radius:16px 16px 0 0;
  background:#fff; box-shadow:var(--shadow-xl);
  border:1px solid rgba(255,255,255,.7); overflow:hidden;
  max-width:1020px; margin-left:auto; margin-right:auto;}
.plate-bar{display:flex; align-items:center; gap:7px; padding:12px 16px;
  background:#fff; border-bottom:1px solid var(--border-hair);}
.plate-bar i{width:11px; height:11px; border-radius:50%; display:block;}
.dotr{background:#FF5F57;} .doty{background:#FEBC2E;} .dotg{background:#28C840;}
.plate-bar .url{margin-left:14px; font-family:var(--font-mono); font-size:12px;
  color:var(--fg-muted); background:var(--n-50); padding:5px 14px; border-radius:var(--r-pill);}
.plate img{width:100%; display:block;}

/* floating proof chip on plate */
.proof-chip{position:absolute; z-index:3; background:#fff; border-radius:14px;
  box-shadow:var(--shadow-lg); padding:14px 18px; display:flex; align-items:center; gap:12px;
  border:1px solid var(--border-hair);}
.proof-chip .num{font-family:var(--font-mono); font-weight:500; font-size:26px; color:var(--violet-2); line-height:1;}
.proof-chip .lbl{font-size:12.5px; color:var(--fg-3); line-height:1.25; max-width:13ch;}

/* ---------- logo carousel (marquee) ---------- */
.rail{background:transparent; border:0; padding:38px 0; overflow:hidden;}
.rail-lead{text-align:center; font-size:13.5px; color:var(--fg-3); margin-bottom:26px;}
.rail-lead b{color:var(--ink); font-weight:600;}
.marquee{position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee-track{display:flex; width:max-content; align-items:center; gap:64px;
  animation:marquee 56s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track img{height:30px; width:auto; max-width:160px; object-fit:contain;
  filter:grayscale(1); opacity:.55; transition:opacity .25s, filter .25s; flex:none;}
.marquee-track img:hover{filter:grayscale(0); opacity:1;}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none; flex-wrap:wrap; justify-content:center; gap:40px;}}

/* ---------- section scaffolding ---------- */
section{padding:96px 0;}
.sec-head{max-width:62ch;}
.sec-head.center{margin:0 auto; text-align:center;}
.sec-head h2{font-family:var(--font-sans); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(30px,3.4vw,42px); line-height:1.1; color:var(--ink); margin-top:14px;}
.sec-head h2 .serif{font-weight:400;}
.sec-head p{font-size:18px; color:var(--fg-2); margin-top:16px; line-height:1.55;}

/* ---------- stats band ---------- */
.stats{background:var(--ink); color:var(--fg-inverse);}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.stat{padding:4px 34px; position:relative;}
.stat:first-child{padding-left:0;}
.stat + .stat::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:rgba(255,255,255,.12);}
.stat .n{font-family:var(--font-serif); font-weight:400; font-size:clamp(40px,4.6vw,58px);
  letter-spacing:-.01em; line-height:1; color:#fff;}
.stat .c{margin-top:14px; font-size:14.5px; color:var(--fg-inverse-2); max-width:24ch; line-height:1.45;}

/* ---------- pillars (Analyze/Research/Argue/Draft) ---------- */
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:50px;}
.pillar{background:#fff; border:1px solid var(--border-hair); border-radius:var(--r-xl);
  padding:30px 30px 0; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.pillar .tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-2);}
.pillar .tag .i{width:7px; height:7px; border-radius:2px; background:var(--violet);}
.pillar h3{font-size:23px; font-weight:600; letter-spacing:-.015em; color:var(--ink); margin:14px 0 8px;}
.pillar p{font-size:15px; color:var(--fg-2); line-height:1.55;}
.pillar .shot{margin:24px -1px 0; border-top:1px solid var(--border-hair);
  border-radius:12px 12px 0 0; overflow:hidden; background:var(--n-25);}
.pillar .shot img{width:100%; display:block;}

/* ---------- differentiators ---------- */
.diffs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px;}
.diff{background:#fff; border:1px solid var(--border-hair); border-radius:var(--r-xl);
  padding:30px 28px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
.diff::before{content:""; position:absolute; left:0; top:28px; bottom:28px; width:3px;
  background:linear-gradient(var(--violet),var(--violet-2)); border-radius:3px; opacity:0; transition:opacity .25s;}
.diff:hover::before{opacity:1;}
.diff .ic{width:46px; height:46px; border-radius:13px;
  background:linear-gradient(150deg,var(--violet-soft),#fff);
  border:1px solid var(--border); box-shadow:inset 0 1px 0 #fff, var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; color:var(--violet-2); margin-bottom:18px;}
.diff .ic svg{width:23px; height:23px;}
.diff h4{font-size:18px; font-weight:600; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em;}
.diff p{font-size:14.5px; color:var(--fg-2); line-height:1.55;}

/* ---------- trust strip ---------- */
.trust{background:var(--n-50); border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair);}
.trust .wrap{display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:space-between;}
.trust .lead{max-width:30ch;}
.trust .lead .eyebrow{margin-bottom:10px; display:block;}
.trust .lead h3{font-size:24px; font-weight:600; letter-spacing:-.015em; color:var(--ink); line-height:1.2;}
.trust-badges{display:flex; flex-wrap:wrap; gap:12px; max-width:560px;}
.tb{display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-pill); padding:9px 16px; font-size:13.5px; font-weight:500; color:var(--fg-2);}
.tb svg{width:15px; height:15px; color:var(--ok);}

/* ---------- testimonial ---------- */
.quote{background:var(--bg-hero);}
.quote .wrap{max-width:880px; text-align:center;}
.quote blockquote{font-family:var(--font-serif); font-weight:400;
  font-size:clamp(26px,3.2vw,38px); line-height:1.25; color:var(--ink); letter-spacing:-.01em;}
.quote .by{margin-top:30px; display:flex; align-items:center; justify-content:center; gap:14px;}
.quote .av{width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:var(--shadow-md);}
.quote .who{text-align:left;}
.quote .who b{display:block; font-size:15px; color:var(--ink); font-weight:600;}
.quote .who span{font-size:13.5px; color:var(--fg-3);}

/* ---------- pricing ---------- */
.pricing .grid{display:grid; grid-template-columns:1.1fr 1fr; gap:22px; margin-top:46px;}
.plan{background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:34px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
.plan.feat{border-color:var(--violet); box-shadow:0 20px 50px rgba(107,91,245,.16); position:relative;}
.plan .pl-badge{position:absolute; top:-12px; left:34px; background:var(--violet); color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:5px 13px; border-radius:var(--r-pill);}
.plan h3{font-size:22px; font-weight:600; color:var(--ink);}
.plan .desc{font-size:14.5px; color:var(--fg-3); margin:10px 0 18px; line-height:1.5;}
.plan .for{font-size:14.5px; font-weight:600; color:var(--ink); padding:14px 0; border-top:1px solid var(--border-hair); border-bottom:1px solid var(--border-hair); margin-bottom:22px;}
.plan .price-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; min-height:62px;}
.plan .price{display:flex; align-items:baseline; gap:5px;}
.plan .price .c{font-family:var(--font-serif); font-size:30px; color:var(--ink);}
.plan .price .v{font-family:var(--font-serif); font-size:58px; letter-spacing:-.01em; color:var(--ink); line-height:.9;}
.plan .price .per{font-size:14.5px; color:var(--fg-3);}
.plan .custom{font-family:var(--font-serif); font-size:46px; color:var(--ink); letter-spacing:-.01em; line-height:1;}
/* monthly/yearly toggle */
.toggle{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.toggle .sw{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-3); font-weight:500; cursor:pointer; user-select:none;}
.toggle .sw .track{width:42px; height:24px; border-radius:999px; background:var(--ink); position:relative; transition:background .2s;}
.toggle .sw .track::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .22s var(--ease);}
.toggle .sw .on{color:var(--ink); font-weight:600;}
.toggle .save{font-size:11.5px; font-weight:600; color:var(--ok); background:rgba(47,122,62,.12); padding:4px 11px; border-radius:999px;}
.plan[data-billing="yearly"] .sw .track::after{transform:translateX(18px);}
.plan ul{list-style:none; margin:24px 0; display:flex; flex-direction:column; gap:13px;}
.plan li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--fg-2);}
.plan li svg{width:17px; height:17px; color:var(--violet-2); flex:none; margin-top:2px;}
.plan .plan-cta{margin-top:auto;}
.plan .skip{margin-top:14px; font-size:13.5px; color:var(--fg-3); text-align:center;}
.plan .skip a{color:var(--violet-2); font-weight:600;}
.plan .skip a:hover{text-decoration:underline;}

/* ---------- final CTA ---------- */
.final{background:var(--ink); color:#fff; text-align:center;}
.final .eyebrow{color:#A79BF7;}
.final h2{font-family:var(--font-sans); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(32px,4vw,52px); line-height:1.06; margin:16px auto 0; max-width:18ch; color:#fff;}
.final h2 .serif{font-weight:400;}
.final p{color:var(--fg-inverse-2); font-size:18px; margin:18px auto 30px; max-width:48ch;}
.final .capture{margin:0 auto;}
.final .capture input{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#fff;}
.final .capture input::placeholder{color:#8E91AC;}
.final .cta-sub{justify-content:center; color:var(--fg-inverse-2);}
.final .cta-sub b{color:#fff;}
.final .demo-link{color:#A79BF7;}

/* ---------- footer ---------- */
.foot{background:#0A0F26; color:var(--fg-inverse-2); padding:46px 0;}
.foot .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.foot img{height:24px; opacity:.92;}
.foot .links{display:flex; gap:24px; flex-wrap:wrap; font-size:14px;}
.foot .links a:hover{color:#fff;}
.foot .cpy{font-size:13px; color:#5C6080; width:100%; border-top:1px solid rgba(255,255,255,.07); padding-top:22px; margin-top:6px;}

/* ---------- reveal motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .js .reveal.in{opacity:1; transform:none;}
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .nav-links{display:none;}
  .pillars{grid-template-columns:1fr;}
  .diffs{grid-template-columns:1fr;}
  .stats .wrap{grid-template-columns:1fr 1fr; gap:28px;}
  .pricing .grid{grid-template-columns:1fr;}
  section{padding:70px 0;}
}