/* ══════════════════════════════════════════════════════════════════
   talyq — landing page 2
   structure follows the lp2 spec: outcome → inside the dashboard →
   track vices / track virtues → performance & analysis → price → close.

   tokens are the app's own (see app style.css).
   ⚠ body must stay background-color:transparent — the fixed body::before
     layer sits at z-index:-1 and any colour on body covers it for
     exactly one viewport height.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --charcoal:#161614;
  --panel:#1e1e1b;
  --panel-2:#232320;
  --line:#2e2e2a;
  --line-soft:#26262234;
  --cream:#ede8dd;
  --amber:#b86a2e;
  --amber-lit:#c17f3e;
  --stone:#9a9590;
  --stone-dim:#6f6a65;
  --vice:#9c3a1f;
  --btn-bg:#373633;
  --max:1040px;
  --pad:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --topbar-h:65px;   /* fallback; JS measures the real height on load */

  /* type pairing — Fraunces for display (the "know your delta" face
     from the previous landing page), IBM Plex Sans for everything else */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:#161614;
  overflow-x:hidden;          /* body alone doesn't reliably clip */
}

body{
  background-color:transparent;      /* ⚠ see note above */
  color:var(--cream);
  font-family:var(--font-body);
  font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* fixed background layer — pattern only, no gradient */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--charcoal);
  background-image:url('assets/bg-pattern.jpg.png');
  background-repeat:repeat;
  background-size:300px auto;
}

a{color:inherit;text-decoration:none}
b,strong{font-weight:500;color:var(--cream)}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.fade{color:var(--stone)}

/* ── top bar ─────────────────────────────────────────────────────
   position:fixed, not sticky. a sticky bar rides the rubber-band on
   iOS, so pulling down to refresh dragged the whole header with it.
   Fixed leaves the document flow, so main gets --topbar-h back.   */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(22,22,20,.92);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
main{padding-top:var(--topbar-h)}
.topbar-in{
  max-width:var(--max);margin:0 auto;padding:11px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.mark{display:flex;align-items:center}
.mark-img{display:block;height:20px;width:auto}
.topbar-right{display:flex;align-items:center;gap:10px}

/* legal links live in the bar on desktop, in the menu on mobile */
.top-links{display:none;gap:20px;margin-left:auto;margin-right:22px;font-size:14px;color:var(--stone)}
.top-links a{transition:color .15s var(--ease)}
.top-links a:hover{color:var(--cream)}

/* ── menu (mobile) ───────────────────────────────────────────────
   Three tally strokes rather than a hamburger, so the control comes
   from the mark instead of a generic icon set.                    */
.menu-btn{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:8px;
  background:var(--btn-bg);border:1px solid #454339;color:var(--cream);
  cursor:pointer;
  transition:background .18s var(--ease);
}
.menu-btn:hover{background:#413f3a}
.menu-btn[aria-expanded="true"]{background:#413f3a}
.menu-btn[aria-expanded="true"] svg line:nth-child(2){stroke:var(--amber)}

.menu-panel{
  position:absolute;right:var(--pad);top:calc(var(--topbar-h) + 8px);
  min-width:186px;
  background:var(--panel);
  border:1px solid var(--line);border-radius:10px;
  padding:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.menu-panel.is-open{opacity:1;visibility:visible;transform:none}
.menu-panel a{
  padding:11px 12px;border-radius:6px;
  font-size:15px;color:var(--stone);
  transition:background .14s var(--ease),color .14s var(--ease);
}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--panel-2);color:var(--cream)}
.menu-panel a + a{margin-top:1px}
.top-cta{
  background:var(--btn-bg);border:1px solid #454339;color:var(--cream);
  padding:9px 15px;border-radius:8px;font-size:14px;white-space:nowrap;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.top-cta:hover{background:#413f3a;transform:translateY(-1px)}

/* ── section rhythm ──────────────────────────────────────────────── */
section{padding:70px 0;position:relative}
section + section{border-top:1px solid var(--line)}

.eyebrow{
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stone-dim);margin-bottom:18px;
}

/* display tier — Fraunces. to restrict it to the hero only,
   delete h2 from the selector below.                          */
h1,h2{font-family:var(--font-display);font-optical-sizing:auto}

h1{
  font-size:clamp(38px,8.2vw,74px);line-height:1.0;
  font-weight:500;letter-spacing:-.025em;margin-bottom:28px;
}
h1 .l1,h1 .l2{display:block}
h1 .l2{color:var(--stone);font-weight:300}

h2{
  font-size:clamp(29px,5.1vw,46px);line-height:1.1;
  font-weight:500;letter-spacing:-.022em;margin-bottom:20px;
}
h3{font-size:20px;font-weight:500;letter-spacing:-.01em;margin-bottom:9px}

p{margin-bottom:16px;max-width:60ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,2.2vw,19.5px);color:var(--stone);line-height:1.62}
.lead b{color:var(--cream)}

/* ── buttons ─────────────────────────────────────────────────────── */
.cta{
  display:inline-block;background:var(--cream);color:#161614;
  padding:17px 32px;border-radius:10px;
  font-size:17px;font-weight:500;letter-spacing:-.01em;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .18s var(--ease);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.cta:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.cta:active{transform:translateY(0)}
.cta-note{font-size:14px;color:var(--stone);margin-top:14px}

/* ── hero ────────────────────────────────────────────────────────── */
.hero{padding-top:74px;padding-bottom:62px;overflow:hidden}
.hero .lead{margin-bottom:20px}
.hero .lead + .lead{margin-bottom:34px}

/* .hero-delta removed — it collided with the headline on desktop */

/* ── 02 · the slider ─────────────────────────────────────────────── */
.inside{padding-bottom:76px}
.slider{margin-top:36px;position:relative}
.slider-viewport{overflow:hidden}

.slider-track{
  display:flex;gap:var(--slide-gap,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad);
  padding:6px var(--pad) 10px;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.slider-track::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}
.slider-track{scrollbar-color:transparent transparent}
.slider-track.dragging{cursor:grabbing;scroll-snap-type:none}
.slider-track:focus-visible{outline:1px solid var(--amber);outline-offset:6px;border-radius:14px}

.slide{
  --w:min(262px,66vw);              /* frame maths keys off this */
  flex:0 0 auto;width:var(--w);
  scroll-snap-align:center;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  opacity:.42;transform:scale(.955);
}
.slide.is-active{opacity:1;transform:scale(1)}
.slide figcaption{
  margin-top:13px;font-size:13.5px;color:var(--stone);line-height:1.45;
  padding:0 2px;
}
.slide figcaption b{display:block;color:var(--cream);font-size:14px;margin-bottom:2px}

/* ── mockups ─────────────────────────────────────────────────────
   The finalised mockup files already contain the device frame, with a
   transparent rounded-corner alpha channel. So no bezel, no border and
   no background here — anything we drew would double-frame them. The
   shadow is a filter rather than a box-shadow so it follows the phone's
   rounded silhouette instead of a rectangle.                        */
.slide-shell{position:relative}
.slide-screen{position:relative;width:100%}
.slide-screen img{
  display:block;width:100%;height:auto;
  aspect-ratio:820/1670;      /* holds the box before the file arrives */
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.38));
}

/* placeholder shown when a slide's image is missing */
.slide-screen.empty{
  aspect-ratio:820/1670;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:24px;
  border:1px dashed #3a3934;border-radius:34px;background:var(--panel);
}
.slide-screen.empty .ph-tag{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-dim);
}
.slide-screen.empty .ph-name{font-size:14px;color:var(--stone)}

/* ── mockups in the two-up and the analysis rows ─────────────────
   Same rule as the slider: the file carries its own frame, so this is
   a sizing wrapper only. Phones are capped rather than filling their
   grid column — a phone stretched to 520px would be 1,000px tall.  */
.phone,.frame{
  max-width:300px;margin:0 auto;background:none;border:0;box-shadow:none;
}
.phone img,.frame img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.38));
}

.slider-ui{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:22px;
}
.s-arrow{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--stone);
  font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.s-arrow:hover:not(:disabled){background:var(--btn-bg);color:var(--cream);border-color:#454339}
.s-arrow:disabled{opacity:.28;cursor:default}
.s-dots{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:60%}
.s-dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  background:#3d3b36;border:0;
  transition:background .25s var(--ease),width .25s var(--ease);
}
.s-dot.on{background:var(--amber);width:20px;border-radius:4px}

/* ── 03 · track vices / track virtues ────────────────────────────── */
.two-up{display:grid;grid-template-columns:1fr;gap:44px;margin-top:40px}
.col-head{margin-bottom:22px}
.col-kicker{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 10px;border-radius:5px;margin-bottom:12px;
}
.vice-k{color:#c9705a;background:rgba(156,58,31,.14);border:1px solid rgba(156,58,31,.32)}
.virtue-k{color:var(--amber-lit);background:rgba(184,106,46,.13);border:1px solid rgba(184,106,46,.3)}
.col-head p{font-size:16.5px;color:var(--stone);margin-top:2px}
.two-up .phone{max-width:330px}

/* ── 04 · performance & analysis ─────────────────────────────────── */
.stack{display:flex;flex-direction:column;gap:56px;margin-top:42px}
.row{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.row-txt p{font-size:16.5px;color:var(--stone)}
.quote{
  color:var(--amber-lit);font-weight:400;
  border-bottom:1px solid rgba(184,106,46,.35);
}
.frame{
  border-radius:14px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}

/* ── 05 · price ──────────────────────────────────────────────────── */
.price-card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;
  padding:34px 28px;max-width:450px;
  box-shadow:0 22px 54px rgba(0,0,0,.4);
}
.price-row{display:flex;align-items:baseline;gap:15px;margin-bottom:5px}
.price-was{
  font-size:25px;color:var(--stone-dim);
  text-decoration:line-through;text-decoration-thickness:1.5px;
}
.price-now{font-size:56px;line-height:1;letter-spacing:-.035em}
.price-unit{font-size:15px;color:var(--stone)}
.price-seats{font-size:14.5px;color:var(--amber);margin:16px 0 24px}
.price-card .cta{display:block;text-align:center;width:100%}
.price-install{
  font-size:13.5px;line-height:1.5;color:var(--stone);
  margin-top:16px;text-align:center;
}
.price-fine{font-size:13px;color:var(--stone-dim);margin-top:14px;text-align:center}
.price-fine a{text-decoration:underline;text-underline-offset:3px}

/* ── 06 · close ──────────────────────────────────────────────────── */
.close{padding-bottom:88px}
.close h2{max-width:20ch}

/* ── legal pages (privacy / terms / refund) ──────────────────────
   These three load this same stylesheet. The rules they depend on
   lived in the old landing CSS and were lost in the rewrite, which
   left all three rendering as unstyled HTML. Ported here and mapped
   onto the current tokens. Do not delete.                        */
.legal-page{
  max-width:720px;
  margin:0 auto;
  padding:80px 40px 120px;
}
.legal-back{
  display:inline-block;
  font-family:var(--font-body);
  font-size:12px;letter-spacing:.06em;
  color:var(--stone);
  margin-bottom:56px;
}
.legal-back:hover{color:var(--cream)}

.legal-page h1{
  font-family:var(--font-display);
  font-weight:500;font-size:40px;line-height:1.12;
  letter-spacing:-.02em;
  color:var(--cream);
  margin-bottom:8px;
}
.legal-date{
  display:block;
  font-family:var(--font-body);
  font-size:12px;letter-spacing:.06em;
  color:var(--stone);
  margin-bottom:56px;
}
.legal-page h2{
  font-family:var(--font-display);
  font-weight:500;font-size:24px;
  letter-spacing:-.015em;
  color:var(--cream);
  margin-top:48px;margin-bottom:14px;
}
.legal-page p{
  font-family:var(--font-body);
  font-size:15px;line-height:1.75;
  color:var(--stone);
  margin-bottom:16px;
  max-width:none;
}
.legal-page ul{
  list-style:disc;
  padding-left:20px;
  margin-bottom:16px;
}
.legal-page ul li{
  font-family:var(--font-body);
  font-size:15px;line-height:1.75;
  color:var(--stone);
  margin-bottom:6px;
}
.legal-page strong,.legal-page b{color:var(--cream);font-weight:500}
.legal-page a{
  color:var(--cream);
  text-decoration:underline;text-underline-offset:3px;
}
hr.section-divider{
  border:none;
  border-top:1px solid rgba(154,149,144,.15);
  margin:40px 0;
}

@media (max-width:720px){
  .legal-page{padding:48px 24px 80px}
  .legal-page h1{font-size:32px}
  .legal-page h2{font-size:21px}
}

/* ── footer ──────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:36px 0 58px;font-size:13px;color:var(--stone-dim)}
footer a{text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--stone)}
.foot-row{display:flex;flex-wrap:wrap;gap:9px 18px;margin-bottom:14px}
.foot-mark{margin-top:6px}

/* ── scroll reveal ───────────────────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.34s}

/* ── desktop ─────────────────────────────────────────────────────── */
@media (min-width:720px){
  .topbar{position:sticky}       /* no rubber-band to fight on desktop */
  main{padding-top:0}
  /* Exactly three phones, evenly spaced, at their existing 284px size.
     932 = 3 slides (852) + 2 gaps (80). The 64px side padding is wider
     than an arrow (46px) so the arrows never sit over a mockup.       */
  /* Phones are SPREAD, not packed: a 96px gap between them. --view is an
     exact multiple of slides + gaps at every tier, so a partial phone is
     impossible. The gutters sit outside the viewport and belong to the
     arrows alone. Mockup size never changes — only the count.          */
  .slider{
    --slide-gap:96px;
    --view:284px;                       /* 1-up on a narrow desktop */
    --gutter:64px;
    max-width:calc(var(--view) + var(--gutter) * 2);
    margin-left:auto;margin-right:auto;
  }
  .slider-viewport{
    width:var(--view);
    margin:0 var(--gutter);
    overflow:hidden;
  }
  .slider-track{
    overflow-x:auto;
    scroll-snap-type:none;
    cursor:default;
    padding-left:0;padding-right:0;
  }
  /* arrows only — no dots on desktop */
  .s-dots{display:none}
  .slider-ui{position:static;margin-top:0;min-height:0}
  .s-arrow{
    position:absolute;top:34%;z-index:5;
    width:46px;height:46px;font-size:17px;
    background:var(--panel);
    box-shadow:none;
  }
  #prevBtn{left:8px}
  #nextBtn{right:8px}
  /* several phones are visible at once here, so nothing is "inactive" */
  .slide{opacity:1;transform:none}
  .mark-img{height:22px}
  .top-links{display:flex}       /* privacy / terms / refund in the bar */
  .menu-btn,.menu-panel{display:none}
  section{padding:96px 0}
  .hero{padding-top:112px;padding-bottom:86px}
  .hero h1,.hero .lead{max-width:none}
  .hero .lead{max-width:56ch}
  .slide{--w:284px}
  .two-up{grid-template-columns:1fr 1fr;gap:48px}
  .row{grid-template-columns:0.92fr 1.08fr;gap:44px}
  .row.alt .row-txt{order:2}
  .row.alt .frame{order:1}
  .inside{padding-bottom:100px}
}

/* count steps up only when the exact width fits, so it never half-crops */
@media (min-width:860px){
  .slider{--view:664px}              /* 2 x 284 + 1 x 96 */
}
@media (min-width:1200px){
  .slider{--view:1044px}             /* 3 x 284 + 2 x 96 */
}

/* ── reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .slide{opacity:1;transform:none;transition:none}
  .cta,.top-cta{transition:none}
}