/* ==========================================================================
   CIPS — LANDING PAGE STYLESHEET
   Token diwarisi langsung dari source app Cips (styles.css v143) sebagai
   single source of truth visual. Landing page ini terisolasi total dari
   app produksi — tidak ada dependency runtime ke localStorage/IndexedDB/
   Supabase/auth/service worker milik app.
   ========================================================================== */

:root{
  /* --- diwarisi langsung dari app Cips, JANGAN diubah --- */
  --bg: #020203;
  --surface: #181B24;
  --surface-2: #20242F;
  --hairline: #2B303C;
  --text: #F1F3F9;
  --text-muted: #A3ACC0;

  --habit: #96FFBE;
  --ibadah: #FFD68C;
  --kesehatan: #82CDFF;
  --financial: #FFAA78;
  --settings: #C3A6FF;
  --danger: #FF5C5C;

  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* --- baru, khusus landing page, turunan dari token di atas --- */
  --surface-elevated: #23283A;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --accent-primary: var(--habit);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 4px 12px -4px rgba(0,0,0,0.4);
  --shadow-md: 0 20px 40px -12px rgba(0,0,0,0.5);
  --shadow-lg: 0 40px 80px -20px rgba(0,0,0,0.55), 0 0 60px -10px rgba(150,255,190,0.14);

  --container: 1200px;
  --container-narrow: 760px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --fs-hero:  clamp(2rem, 5vw + 1rem, 3.75rem);
  --fs-h2:    clamp(1.5rem, 3vw + 0.8rem, 2.5rem);
  --fs-h3:    clamp(1.15rem, 1.4vw + 0.8rem, 1.5rem);
  --fs-body:  clamp(0.95rem, 0.3vw + 0.85rem, 1.05rem);
  --fs-small: 0.85rem;
  --fs-price: clamp(2.25rem, 4vw + 1rem, 3.25rem);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:
    radial-gradient(circle at 18% -10%, rgba(150,255,190,0.05) 0%, transparent 45%),
    radial-gradient(circle at 88% 8%, rgba(255,170,120,0.04) 0%, transparent 40%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100%;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1, h2, h3{ font-family:'Space Grotesk', sans-serif; line-height:1.15; letter-spacing:-0.01em; }

:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
@media (min-width:900px){ .container{ padding-inline:5vw; } }
.container-narrow{ width:100%; max-width:var(--container-narrow); margin-inline:auto; padding-inline:24px; }

section{ padding-block:var(--space-8); }
@media (min-width:900px){ section{ padding-block:var(--space-9); } }

.mono{ font-family:'JetBrains Mono', monospace; }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease-premium), transform .4s var(--ease-premium); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   SECTION HEADING
   ========================================================================== */
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:var(--fs-small);
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--text-muted);
  display:inline-block;
  margin-bottom:var(--space-3);
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent-primary); color:#04120a; font-weight:600;
  padding:12px 20px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
.section-heading{ margin-bottom:var(--space-7); }
.section-heading h2{ font-size:var(--fs-h2); font-weight:600; margin-bottom:var(--space-3); }
.section-heading p{ color:var(--text-muted); font-size:var(--fs-body); max-width:52ch; }
.section-heading.center{ text-align:center; }
.section-heading.center p{ margin-inline:auto; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-md);
  font-weight:600; font-size:0.95rem; text-align:center;
  transition:transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium), border-color .25s var(--ease-premium), background .25s var(--ease-premium);
  max-width:100%;
}
.btn:active{ transform:scale(.97); transition:transform .12s var(--ease-spring); }
.btn-primary{
  background:var(--accent-primary); color:#04120a; box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text);
}
.btn-ghost:hover{ border-color:var(--border-strong); }
.btn-block{ width:100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:65;
  padding-block:16px;
  background:rgba(2,2,3,0.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease-premium), border-color .25s var(--ease-premium);
}
.site-header.scrolled{ background:rgba(2,2,3,0.85); border-bottom-color:var(--hairline); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.1rem; }
.brand-mark{ width:28px; height:28px; border-radius:8px; background:var(--habit); flex-shrink:0; }
.site-nav{ display:none; align-items:center; gap:var(--space-6); }
.site-nav a{ font-size:0.9rem; color:var(--text-muted); transition:color .2s var(--ease-premium); }
.site-nav a:hover{ color:var(--text); }
.header-actions{ display:flex; align-items:center; gap:var(--space-4); }
.header-actions .btn{ padding:10px 20px; font-size:0.88rem; }
@media (min-width:800px){ .site-nav{ display:flex; } }
@media (max-width:420px){
  /* Di layar sangat sempit (320-360px), tombol CTA header + hamburger
     berebut ruang dengan brand dan bisa overflow. CTA penuh tetap ada
     di mobile-nav drawer (full-width), jadi aman disembunyikan di sini. */
  .header-actions .btn{ display:none; }
}

.nav-toggle{ display:flex; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-4px; position:relative; z-index:70; }
@media (min-width:800px){ .nav-toggle{ display:none; } }
.nav-toggle .icon-close{ display:none; }
.nav-toggle.is-active .icon-burger{ display:none; }
.nav-toggle.is-active .icon-close{ display:block; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding-top:var(--space-9); padding-bottom:var(--space-9); }
.hero .container{ display:grid; gap:var(--space-8); align-items:center; }
@media (min-width:960px){ .hero .container{ grid-template-columns:1.05fr 0.95fr; } }
.hero-copy h1{ font-size:var(--fs-hero); font-weight:600; margin-bottom:var(--space-5); }
.hero-copy p.lead{ font-size:var(--fs-body); color:var(--text-muted); max-width:46ch; margin-bottom:0; }

/* ==========================================================================
   DEVICE EMBED — render the real product at its native reference size
   (380x800, matching the real app's own .phone desktop-mockup constant)
   inside the iframe, then visually scale the WHOLE rendering down with a
   CSS transform to fit whatever box we want to display it in.
   Why: squeezing the real app's CSS into a narrower-than-natural iframe
   (e.g. 240px) made its own internal layout overlap/collide — the product
   was never designed/tested below normal phone widths. Scaling a
   full-fidelity render is the same trick used for device-preview mockups
   everywhere: 100% faithful proportions at any display size.
   .device-embed = the visible box (sized/responsive via width + aspect-ratio
   elsewhere); .device-embed-inner = fixed 380x800, scaled by JS
   (initDeviceScale in landing.js) to exactly fill its parent.
   ========================================================================== */
.device-embed{ position:relative; overflow:hidden; }
.device-embed-inner{
  position:absolute; top:0; left:0; width:380px; height:800px;
  transform-origin:top left; will-change:transform;
}
.device-embed .preview-iframe{ width:380px; height:800px; }

/* ==========================================================================
   PHONE-FRAME PRODUCT PREVIEW
   Reuse langsung palet/radius/shadow dari .phone milik app Cips asli,
   supaya preview terasa sebagai bagian dari produk sungguhan.
   ========================================================================== */
.phone-frame{
  width:min(320px, 100%); aspect-ratio:380/800; margin-inline:auto;
  background:
    radial-gradient(circle at 14% 8%, rgba(150,255,190,0.05) 0%, transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255,214,140,0.045) 0%, transparent 30%),
    radial-gradient(circle at 80% 78%, rgba(130,205,255,0.04) 0%, transparent 34%),
    var(--bg);
  border-radius:var(--radius-xl);
  border:8px solid #05060A;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), var(--shadow-lg);
  padding:20px 16px; display:flex; flex-direction:column; gap:14px; overflow:hidden;
  position:relative;
}
.phone-frame .p-greeting{ font-size:0.72rem; color:var(--text-muted); }
.phone-frame .p-date{ font-size:0.62rem; color:var(--text-muted); opacity:.7; margin-bottom:4px; }

/* ==========================================================================
   PROBLEM / PHILOSOPHY (copy-heavy, narrow container)
   ========================================================================== */
.problem-list{ display:grid; gap:var(--space-4); margin-top:var(--space-6); }
.problem-item{
  display:flex; gap:var(--space-4); align-items:flex-start;
  padding:var(--space-4) 0; border-bottom:1px solid var(--hairline);
  color:var(--text-muted); font-size:var(--fs-body);
}
.problem-item .num{ font-family:'JetBrains Mono', monospace; color:var(--danger); font-size:0.85rem; flex-shrink:0; }
.problem-closing{
  margin-top:var(--space-6); font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:var(--fs-h3); color:var(--text);
}
.philosophy{ text-align:center; }
.philosophy blockquote{ font-family:'Space Grotesk', sans-serif; font-size:var(--fs-h2); font-weight:500; margin-block:var(--space-5); }
.philosophy p{ color:var(--text-muted); max-width:56ch; margin-inline:auto; }

/* ==========================================================================
   PRODUCT OVERVIEW — 4 module micro cards
   ========================================================================== */
.overview-grid{ display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:800px){ .overview-grid{ grid-template-columns:repeat(4,1fr); } }
.overview-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-5); transition:transform .25s var(--ease-premium), border-color .25s var(--ease-premium);
}
.overview-card:hover{ transform:translateY(-2px); }
.overview-card .icon-dot{ width:12px; height:12px; border-radius:50%; margin-bottom:var(--space-3); }
.overview-card h3{ font-size:1rem; font-weight:600; margin-bottom:6px; }
.overview-card p{ font-size:var(--fs-small); color:var(--text-muted); }
.overview-cta{ text-align:center; margin-top:var(--space-7); }

/* ==========================================================================
   MODULE NAVIGATOR — elegant jump-links to each module section below
   (replaces the old live-switching tab+iframe preview: clicking a module
   here scrolls straight to that module's own real-UI showcase, instead of
   swapping content inline behind a "Demo Mode" badge)
   ========================================================================== */
.module-nav-grid{
  display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .module-nav-grid{ grid-template-columns:repeat(5,1fr); } }
.module-nav-item{
  display:flex; flex-direction:column; gap:10px; padding:var(--space-5) var(--space-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:transform .25s var(--ease-premium), border-color .25s var(--ease-premium), background .25s var(--ease-premium);
}
.module-nav-item:hover{ transform:translateY(-3px); border-color:var(--border-strong); background:var(--surface-elevated); }
.module-nav-icon{ width:10px; height:10px; border-radius:50%; }
.module-nav-name{ font-family:'Space Grotesk', sans-serif; font-size:0.95rem; font-weight:600; color:var(--text); }
.module-nav-desc{ font-size:0.78rem; color:var(--text-muted); line-height:1.4; }

/* ==========================================================================
   MODULE SECTIONS (Dashboard / Habit / Finance / Health / Religion)
   ========================================================================== */
.module-section .container{ display:grid; grid-template-columns:1fr; gap:var(--space-7); align-items:center; }
@media (min-width:960px){ .module-section .container{ grid-template-columns:1fr 1fr; } }
.module-section.flip .container{ direction:rtl; }
.module-section.flip .container > *{ direction:ltr; }
.module-copy .eyebrow{ display:flex; align-items:center; gap:8px; }
.module-copy .eyebrow .dot{ width:8px; height:8px; border-radius:50%; }
.module-copy h2{ font-size:var(--fs-h2); margin-bottom:var(--space-4); }
.module-copy .lede{ font-size:var(--fs-body); color:var(--text-muted); margin-bottom:var(--space-5); }
.module-facts{ display:grid; gap:var(--space-3); margin-bottom:var(--space-6); }
.module-facts .fact{ padding-left:var(--space-4); border-left:2px solid var(--border-strong); }
.module-facts .fact b{ display:block; font-size:0.9rem; margin-bottom:2px; }
.module-facts .fact span{ font-size:var(--fs-small); color:var(--text-muted); }
.module-visual{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6); min-height:280px; display:flex; flex-direction:column; justify-content:center; gap:var(--space-3);
}

/* Module showcase: real, live UI (not a recreation) — a smaller sibling of
   the same sandboxed preview/app-demo.html used in #interactive-preview,
   opened directly to the relevant module via ?view=. Sized at the real
   app's native width (380px, same as .phone) rather than shrunk down, so
   type/icons/spacing render at true size instead of looking cramped.
   Width: on mobile/tablet (stacked single-column, <960px) the frame fills
   100% of the column with NO max-width cap, so its left/right edges line
   up exactly with the copy text above/below it instead of floating
   narrower in the middle of the screen. From 960px up, the two-column
   layout already gives the image its own half-width column, so a max-width
   keeps the mockup from ballooning to an oversized phone on very wide
   desktop viewports. */
.module-visual.module-device{ padding:var(--space-6) 0; align-items:center; background:transparent; border:none; min-height:0; }
.module-device-frame{
  width:100%; aspect-ratio:380/800; margin-inline:auto;
  border-radius:40px; border:8px solid #05060A;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05), var(--shadow-lg);
  transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
@media (min-width:960px){ .module-device-frame{ max-width:400px; } }
.module-device-frame:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px rgba(255,255,255,0.07), var(--shadow-lg); }
.module-device-badge{
  display:block; text-align:center; margin-top:var(--space-5);
  font-family:'JetBrains Mono', monospace; font-size:0.66rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-muted);
}

/* Dashboard module section has no second device-preview column (its visual
   already lives in the hero, so we don't repeat the same screenshot twice
   on one page) — the copy runs full-width instead of sharing a 2-col grid. */
.module-section-solo .container{ grid-template-columns:1fr; }
.module-copy-wide{ max-width:64ch; margin-inline:auto; text-align:center; }
.module-copy-wide .eyebrow{ justify-content:center; }
.module-facts-row{ grid-template-columns:1fr; text-align:left; max-width:52ch; margin-inline:auto; }
@media (min-width:700px){ .module-facts-row{ grid-template-columns:repeat(3,1fr); } }
.module-copy-wide .btn{ margin-inline:auto; }

/* ==========================================================================
   CONNECTS + DAILY WORKFLOW
   ========================================================================== */
.workflow-track{ display:grid; gap:var(--space-4); margin-top:var(--space-7); }
@media (min-width:800px){ .workflow-track{ grid-template-columns:repeat(3,1fr); } }
.workflow-step{ position:relative; padding:var(--space-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.workflow-step .time{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-2); }
.workflow-step h3{ font-size:1rem; font-weight:600; margin-bottom:6px; }
.workflow-step p{ font-size:var(--fs-small); color:var(--text-muted); }
.workflow-closing{ margin-top:var(--space-7); text-align:center; font-size:var(--fs-body); color:var(--text-muted); max-width:52ch; margin-inline:auto; }

/* ==========================================================================
   EARLY ACCESS NOTE (pricing section)
   ========================================================================== */
.early-access-note{
  text-align:center; font-size:var(--fs-small); color:var(--text-muted);
  max-width:52ch; margin:var(--space-4) auto 0;
}

/* ==========================================================================
   SECTION CTA (repeated mid-page CTAs)
   ========================================================================== */
.section-cta{ margin-top:var(--space-6); text-align:center; }

/* ==========================================================================
   COMPARISON TABLE (Why Cips / Yearly vs Lifetime)
   ========================================================================== */
.compare-table{
  margin-top:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--surface);
}
.compare-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; align-items:center;
  padding:14px var(--space-5); border-bottom:1px solid var(--hairline); font-size:var(--fs-small);
}
.compare-row:last-child{ border-bottom:none; }
.compare-row span{ text-align:center; color:var(--text-muted); }
.compare-row span[role="rowheader"]{ text-align:left; color:var(--text); font-weight:500; }
.compare-head{ background:var(--surface-2); font-weight:600; }
.compare-head span{ color:var(--text); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; }
.compare-row .yes{ color:var(--accent-primary); font-weight:700; }
.compare-row .no{ color:var(--text-muted); opacity:.5; }
.compare-footnote{ margin-top:var(--space-4); font-size:var(--fs-small); color:var(--text-muted); text-align:center; }
@media (max-width:480px){
  .compare-row{ padding:12px var(--space-4); grid-template-columns:1.2fr 1fr 1fr; }
}

/* ==========================================================================
   SOCIAL PROOF — honest "built from real use" framing (no fabricated
   testimonials/ratings/user counts; see TODO comment in index.html for
   where to drop in real testimonials once they exist)
   ========================================================================== */
.founder-quote-card{
  margin-top:var(--space-7); padding:var(--space-6); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.founder-quote-text{
  font-family:'Space Grotesk', sans-serif; font-size:1.05rem; font-weight:500;
  line-height:1.5; color:var(--text); margin-bottom:var(--space-5);
}
.founder-quote-attr{ display:flex; align-items:center; gap:12px; }
.founder-avatar{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:50%; background:var(--surface-elevated);
  border:1px solid var(--border-strong); font-family:'Space Grotesk', sans-serif;
  font-size:0.78rem; font-weight:600; color:var(--accent-primary);
}
.founder-attr-text{ display:flex; flex-direction:column; font-size:0.85rem; }
.founder-attr-text b{ color:var(--text); font-weight:600; }
.founder-attr-text span{ color:var(--text-muted); font-size:0.78rem; }
.proof-facts{ display:grid; gap:var(--space-3); margin-top:var(--space-6); }
@media (min-width:700px){ .proof-facts{ grid-template-columns:repeat(3,1fr); } }
.proof-fact{
  display:flex; align-items:center; gap:10px; padding:var(--space-4);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:0.85rem; color:var(--text-muted);
}
.proof-fact .icon-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-primary); flex-shrink:0; }
.proof-placeholder-note{
  margin-top:var(--space-5); padding:var(--space-4); text-align:center;
  border:1px dashed var(--border-strong); border-radius:var(--radius-md);
  font-size:var(--fs-small); color:var(--text-muted);
}

/* ==========================================================================
   FEATURE DISCOVERY
   ========================================================================== */
.feature-grid{ display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); margin-top:var(--space-6); }
@media (max-width:480px){ .feature-grid{ grid-template-columns:1fr; } }
@media (min-width:800px){ .feature-grid{ grid-template-columns:repeat(3,1fr); } }
.feature-item{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-md); }
.feature-item .icon-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-primary); margin-top:6px; flex-shrink:0; }
.feature-item span{ font-size:var(--fs-small); color:var(--text-muted); }

/* ==========================================================================
   TRUST
   ========================================================================== */
.trust-grid{ display:grid; gap:var(--space-5); margin-top:var(--space-6); }
@media (min-width:800px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
.trust-card{ padding:var(--space-6); border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.trust-card h3{ font-size:1.05rem; margin-bottom:var(--space-3); }
.trust-card p{ font-size:var(--fs-small); color:var(--text-muted); }
.trust-note{ margin-top:var(--space-6); font-size:var(--fs-small); color:var(--text-muted); max-width:70ch; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-grid{ display:grid; gap:var(--space-6); margin-top:var(--space-7); max-width:820px; margin-inline:auto; }
@media (min-width:700px){ .pricing-grid{ grid-template-columns:1fr 1fr; align-items:start; } }
.price-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-7); position:relative; }
.price-card.elevated{
  background:var(--surface-elevated); border-color:var(--accent-primary); box-shadow:var(--shadow-md);
}
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--accent-primary); color:#04120a; font-size:0.7rem; font-weight:700;
  padding:6px 14px; border-radius:999px; letter-spacing:0.05em; text-transform:uppercase;
}
.price-card .plan-name{ font-size:var(--fs-small); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--space-3); }
.price-card .plan-price{ font-family:'JetBrains Mono', monospace; font-size:var(--fs-price); font-weight:600; margin-bottom:2px; }
.price-card .plan-period{ font-size:var(--fs-small); color:var(--text-muted); margin-bottom:var(--space-5); }
.price-card .plan-desc{ font-size:var(--fs-small); color:var(--text-muted); margin-bottom:var(--space-5); min-height:44px; }
@media (max-width:420px){
  .price-card{ padding:var(--space-5) var(--space-4); }
}

.pricing-trust-row{
  display:flex; flex-direction:column; gap:10px;
  margin-top:var(--space-5); max-width:460px; margin-inline:auto;
}
@media (min-width:640px){
  .pricing-trust-row{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:var(--space-3) var(--space-6); max-width:820px; }
}
.pricing-trust-item{
  display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-small); color:var(--text-muted);
  text-align:left; line-height:1.45;
}
.pricing-trust-item .icon-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-primary); flex-shrink:0; margin-top:6px; }

.plan-feature-list{ list-style:none; margin:0 0 var(--space-6); padding:0; display:flex; flex-direction:column; gap:10px; }
.plan-feature-list li{
  font-size:var(--fs-small); color:var(--text); padding-left:22px; position:relative; line-height:1.4;
}
.plan-feature-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent-primary); font-weight:700; font-size:0.8rem;
}
.price-card.elevated .plan-feature-list li::before{ color:var(--habit); }
.plan-microcopy{ font-size:0.72rem; color:var(--text-muted); text-align:center; margin-top:var(--space-3); }
.pricing-footnote{
  text-align:center; font-size:var(--fs-small); color:var(--text-muted); margin-top:var(--space-7);
}
.pricing-footnote a{ color:var(--accent-primary); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ margin-top:var(--space-6); }
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-item summary{
  padding:var(--space-5) 0; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  font-weight:500; font-size:var(--fs-body); transition:color .2s var(--ease-premium);
}
.faq-item summary:hover{ color:var(--accent-primary); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chevron{ flex-shrink:0; transition:transform .3s var(--ease-premium); color:var(--text-muted); }
.faq-item[open] summary .chevron{ transform:rotate(180deg); }
.faq-item p{ padding-bottom:var(--space-5); color:var(--text-muted); font-size:var(--fs-body); max-width:65ch; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{ background:var(--surface-2); text-align:center; border-top:1px solid var(--hairline); }
.final-cta h2{ font-size:var(--fs-h2); margin-bottom:var(--space-4); max-width:22ch; margin-inline:auto; }
.final-cta-sub{ font-size:var(--fs-body); color:var(--text-muted); max-width:42ch; margin:0 auto var(--space-6); }
.final-cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--hairline); padding-block:var(--space-7); }
.footer-grid{ display:grid; gap:var(--space-6); }
@media (min-width:700px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-col h3{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:var(--space-3); }
.footer-col a{ display:block; font-size:var(--fs-small); color:var(--text-muted); padding-block:4px; transition:color .2s; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{ margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); font-family:'JetBrains Mono', monospace; font-size:0.75rem; color:var(--text-muted); }

/* ==========================================================================
   MODAL (checkout placeholder)
   ========================================================================== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-premium);
}
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-xl);
  padding:var(--space-7); max-width:420px; width:100%; box-shadow:var(--shadow-lg);
  transform:scale(0.96); transition:transform .3s var(--ease-premium);
}
.modal-backdrop.open .modal-box{ transform:scale(1); }
.modal-box h3{ font-size:var(--fs-h3); margin-bottom:var(--space-3); }
.modal-box p{ font-size:var(--fs-body); color:var(--text-muted); margin-bottom:var(--space-6); }
.modal-close{ margin-top:var(--space-2); }
@media (max-width:420px){
  .modal-backdrop{ padding:16px; }
  .modal-box{ padding:var(--space-5); }
}

/* ==========================================================================
   MOBILE NAV DRAWER
   ========================================================================== */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(300px,80vw); background:var(--surface);
  border-left:1px solid var(--hairline); padding:var(--space-7) var(--space-5);
  transform:translateX(100%); transition:transform .35s var(--ease-premium); z-index:60;
  display:flex; flex-direction:column; gap:var(--space-5);
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ font-size:1rem; color:var(--text); padding-block:var(--space-2); }
@media (min-width:800px){ .mobile-nav{ display:none; } }

.mobile-nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease-premium);
}
.mobile-nav-backdrop.open{ opacity:1; pointer-events:auto; }
@media (min-width:800px){ .mobile-nav-backdrop{ display:none; } }

/* Sticky mobile CTA bar (hero & pricing) */
.mobile-cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(2,2,3,0.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--hairline);
  display:none;
}
@media (max-width:640px){ .mobile-cta-bar.active{ display:block; } }
.mobile-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.mobile-cta-info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.mobile-cta-plan{ font-family:'Space Grotesk', sans-serif; font-size:0.8rem; font-weight:600; color:var(--text); white-space:nowrap; }
.mobile-cta-price{ font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--accent-primary); white-space:nowrap; }
.mobile-cta-price .mobile-cta-note{ color:var(--text-muted); font-family:'Inter', sans-serif; }
.mobile-cta-bar .btn{ flex-shrink:0; padding-inline:var(--space-5); }

/* ---------- Back-to-top button ---------- */
.back-to-top{
  position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:50;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-elevated); color:var(--accent-primary);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-sm);
  cursor:pointer; transition:opacity .25s var(--ease-premium), transform .25s var(--ease-premium), bottom .25s var(--ease-premium);
  opacity:0; visibility:hidden; transform:translateY(8px);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--surface-2); }
@media (max-width:640px){
  .mobile-cta-bar.active ~ .back-to-top{ bottom:calc(var(--space-4) + 64px); }
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition:opacity .01ms, visibility .01ms; }
}

/* ==========================================================================
   LIVE PRODUCT PREVIEW (real Cips UI, embedded via sandboxed iframe)
   .phone-frame keeps the device-chrome look defined above; phone-frame-live
   (combined with .device-embed in the HTML) renders the real app shell
   (preview/app-demo.html) at native size and scales it to fit — see the
   DEVICE EMBED block above for why.
   ========================================================================== */
.phone-frame-live{ padding:0; display:block; width:100%; max-width:380px; margin-inline:auto; }
.preview-iframe{
  width:100%; height:100%; border:0; display:block; border-radius:calc(var(--radius-xl) - 8px);
  background:var(--bg);
}