/* ============================================================
   KEEN — Landing Page
   Tokens from the live Keen app (warm parchment / Analog system).
   Type: Archivo (display/headlines + body) + JetBrains Mono (index-card UI, eyebrows, labels).
   Authoring base: 16px = 1rem. Layout is rem-first; the root
   font-size scales with the viewport (Scaling System).
   ============================================================ */

:root{
  /* Brand colors (authoritative — match the shipped app) */
  --ink:#2c2a25;            /* primary text */
  --ink-soft:#6f6b60;       /* muted text */
  --rule:rgba(40,34,24,.16);/* dividers */
  --accent:#cb572b;         /* accent / highlight */
  --accent-deep:#a8431d;

  /* Card backgrounds */
  --today:#f7f5ee;
  --next:#e6e9d8;
  --someday:#dccdab;
  --weekly:#f1ece0;

  /* App shell */
  --app-bg:#3f3e33;
  --app-bg-2:#36352b;
  --paper:#fbf8f1;
  --paper-ink:#2c2a25;
  --text-muted:#cbc5b7;     /* legible muted body text on the dark shell (~6:1) */

  /* Category chip colors */
  --chip-github:#000000;
  --chip-jam:#8c39d0;
  --chip-ideogram:#37ae61;
  --chip-personal:#d64d1f;

  /* Shape */
  --radius:10px;
  --radius-lg:16px;

  /* Shadows */
  --shadow:0 1px 1px rgba(0,0,0,.10),0 3px 6px rgba(0,0,0,.13),0 14px 28px rgba(0,0,0,.26),0 34px 64px rgba(0,0,0,.30);
  --shadow-hi:0 2px 3px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.16),0 26px 48px rgba(0,0,0,.30),0 48px 90px rgba(0,0,0,.34);
  --shadow-soft:0 2px 8px rgba(0,0,0,.08),0 18px 40px rgba(40,30,15,.12);

  /* Type */
  --font-display:"Archivo",system-ui,sans-serif;        /* headlines / titles */
  --font-mono:"JetBrains Mono",ui-monospace,monospace;  /* index-card UI, eyebrows, labels */
  --font-body:"Archivo",system-ui,sans-serif;
  --font-hand:"Caveat",ui-rounded,cursive;             /* handwritten accents */

  /* Motion */
  --ease-osmo:cubic-bezier(0.625,0.05,0,1);
  --ease-power3:cubic-bezier(0.215,0.61,0.355,1);

  /* Layout */
  --container:75rem;       /* 1200px */
  --container-wide:82.5rem;/* 1320px */
  --gutter:1.5rem;
  --section-y:7.5rem;
}

/* ---------- Scaling System: root font-size tracks viewport ---------- */
html{ font-size:16px; }
/* Desktop range: scale proportionally from a 1440 reference */
@media screen and (min-width:48rem) and (max-width:90rem){
  html{ font-size:calc(100vw / 1440 * 16); }
}
/* Very large screens: lock so type/layout don't grow without bound */
@media screen and (min-width:90.0625rem){
  html{ font-size:16px; }
}
/* Mobile: scale from a 390 reference, capped */
@media screen and (max-width:47.9375rem){
  html{ font-size:min(calc(100vw / 390 * 16), 17px); }
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--app-bg);
  background-attachment:fixed;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Paper grain + warm vignette over the dark shell (matches app) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 45% at 50% -8%, rgba(255,243,214,.10), transparent 70%);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

main{ position:relative; z-index:1; }

/* ---------- Layout utilities ---------- */
.u-container{ width:min(var(--container), 100% - 2.5rem); margin-inline:auto; }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:3.5rem; }

/* ---------- Typography ---------- */
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; }
.eyebrow{
  font-family:var(--font-mono); font-weight:500; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.2em; color:var(--accent);
  margin-bottom:1.5rem;
}
.h2{ font-size:clamp(2.25rem, 4vw, 3.75rem); line-height:1.02; color:var(--paper); }
.lede{ font-size:1.1875rem; line-height:1.55; color:var(--text-muted); max-width:44rem; font-weight:400; }
.prose{ color:var(--text-muted); font-size:1.0625rem; line-height:1.72; max-width:40rem; }
.prose p + p{ margin-top:1.1rem; }
.prose strong{ color:var(--paper); font-weight:600; }

.section-head{ max-width:48rem; margin:0 auto 4.5rem; text-align:center; }
.section-head .eyebrow{ margin-bottom:1.25rem; }
.section-head .h2{ margin-bottom:0; }
.section-head .lede{ margin-inline:auto; margin-top:1.5rem; }

/* On dark sections, prose strong reads against parchment-less bg */
[data-section="problem"] .prose strong,
[data-section="ritual"] .prose strong{ color:var(--paper); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-weight:500; font-size:.9375rem;
  letter-spacing:.01em; line-height:1; border-radius:8px;
  padding:.9375rem 1.375rem; cursor:pointer;
  transition:transform .18s var(--ease-power3), background-color .2s, color .2s, box-shadow .2s, border-color .2s;
  border:1px solid transparent; white-space:nowrap;
}
.btn--sm{ padding:.625rem 1rem; font-size:.8125rem; }
.btn--lg{ padding:1.0625rem 1.625rem; font-size:1rem; }
.btn--block{ width:100%; justify-content:center; }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(203,87,43,.28); }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 26px rgba(203,87,43,.36); }
.btn--primary:active{ transform:translateY(0); }
.btn--ghost{ background:rgba(247,245,238,.04); border-color:rgba(247,245,238,.22); color:var(--paper); }
.btn--ghost:hover{ background:rgba(247,245,238,.10); transform:translateY(-2px); }
.btn .arrow{ transition:transform .25s var(--ease-power3); }
.btn:hover .arrow{ transform:translateY(3px); }

.cta-row{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:2.25rem; align-items:center; }
.cta-row--center{ justify-content:center; }

/* hero CTA: a row of two buttons */
.hero__cta{ margin-top:2.5rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:padding .3s var(--ease-osmo);
  padding-block:1.125rem;
}
.nav__inner{ display:flex; align-items:center; gap:2rem; position:relative; z-index:1; }
.nav.is-scrolled{ padding-block:.75rem; }

/* Progressive backdrop blur behind the nav — strongest at the top, fading to
   sharp lower down (no hard overlay edge). Keeps nav text readable over any
   content that scrolls beneath it. */
.nav__blur{ position:absolute; left:0; right:0; top:0; height:5.5rem; z-index:0; pointer-events:none; }
.nav__blur-l{ position:absolute; inset:0; }
.nav__blur-l1{
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 28%, transparent 64%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 28%, transparent 64%);
}
.nav__blur-l2{
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
/* faint tint so light content beneath can't wash out the light nav text */
.nav__blur-tint{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(46,45,37,.55), rgba(46,45,37,0) 78%);
}
.nav__logo{ display:inline-flex; align-items:center; gap:.6rem; color:var(--paper); }
.nav__mark{ color:var(--paper); }
.nav__word{ font-family:var(--font-mono); font-weight:600; font-size:1.4375rem; letter-spacing:.01em; }
.nav__links{ display:flex; gap:1.75rem; margin-left:auto; }
.nav__links a{
  font-family:var(--font-mono); font-size:.875rem; color:rgba(244,239,228,.78);
  position:relative; transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-.4rem; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-osmo);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__actions{ display:flex; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:.5rem; }
.nav__burger span{ width:22px; height:2px; background:var(--paper); border-radius:2px; transition:transform .3s, opacity .3s; }

/* ============================================================
   KEEN CARD (shared visual — hero, how, etc.)
   ============================================================ */
.kcard{
  position:relative; background:var(--today); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.625rem 1.5rem 1.375rem;
  display:flex; flex-direction:column; overflow:hidden; color:var(--ink);
}
.kcard--next{ background:var(--next); }
.kcard--someday{ background:var(--someday); }
/* paper grain + sheen inside card (matches app) */
.kcard::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background:radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.45), transparent 42%),
             linear-gradient(180deg, rgba(255,255,255,.10), transparent 18%),
             repeating-linear-gradient(180deg, rgba(0,0,0,.012) 0 2px, transparent 2px 4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -16px 30px rgba(40,30,15,.07);
}
.kcard__head{ display:flex; align-items:flex-start; gap:.625rem; margin-bottom:.875rem; position:relative; z-index:1; }
.kcard__title{ font-size:1.5rem; line-height:1; color:var(--ink); font-weight:600; }
.kcard--mini .kcard__title{ font-size:1.1875rem; }
.kcard__dateline{ margin-left:auto; display:flex; align-items:center; gap:.875rem; }
.kcard__date{ font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft); }
.kcard__dots{ display:flex; gap:.375rem; }
.kcard__dots i{ width:.75rem; height:.75rem; border-radius:50%; border:1.5px solid var(--ink); display:block; transition:background-color .15s, transform .15s; }
.kcard__dots i.on{ background:var(--ink); }
.kcard__lines{ display:flex; flex-direction:column; position:relative; z-index:1; flex:1; }
.krow{
  display:flex; align-items:center; gap:.75rem; min-height:2.625rem;
  border-bottom:1px solid var(--rule); font-family:var(--font-mono); font-size:.875rem;
}
.kcard--mini .krow{ min-height:2.25rem; font-size:.8125rem; }
.krow:last-child{ border-bottom:0; }
.krow .ti{ flex:1; color:var(--ink); transition:color .2s; }
.krow--empty .ti--placeholder{ color:var(--ink-soft); opacity:.6; }
/* completed task — strikethrough + dim, exactly like the app */
.krow.done .ti{ color:var(--ink-soft); text-decoration:line-through; text-decoration-color:rgba(40,30,15,.4); text-decoration-thickness:1.5px; }
.krow.done .chip{ opacity:.45; }
.kcard__foot{
  display:flex; align-items:center; justify-content:space-between; margin-top:1rem;
  font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft); position:relative; z-index:1;
}
.viewall{ color:var(--accent); }

/* Task Signal icons (SVG via mask-free CSS) */
.sig{
  position:relative; width:1.25rem; height:1.25rem; flex:0 0 auto; border-radius:50%;
  border:1.5px solid var(--ink); color:var(--ink);
}
.sig--done{ }
.sig--done::after{ content:""; position:absolute; inset:0; margin:auto; width:.675rem; height:.675rem; border-radius:50%; background:var(--ink); }
.sig--prog::after{ content:""; position:absolute; left:50%; top:0; bottom:0; width:50%; background:var(--ink); border-radius:.7rem 0 0 .7rem; transform:translateX(-100%); }
.sig--prog{ overflow:hidden; }
.sig--del::after{ content:"→"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:var(--ink); }
.sig--sched::after{ content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:600; color:var(--ink); }
.sig--ghost{ border-style:dashed; opacity:.5; }

/* Category chips */
.chip{
  font-family:var(--font-mono); font-size:.59375rem; font-weight:400; text-transform:uppercase;
  letter-spacing:.015em; border-radius:6px; padding:.1875rem .5rem; color:#fff; flex:0 0 auto;
}
.chip--gh{ background:var(--chip-github); }
.chip--jam{ background:var(--chip-jam); }
.chip--ideogram{ background:var(--chip-ideogram); }
.chip--personal{ background:var(--chip-personal); }
.chip--hiring{ background:#3b78c2; }
/* empty category chip (faint dashed label, like the app) */
.chip.is-empty{
  background:transparent; color:var(--ink-soft); border:1px dashed rgba(40,30,15,.28);
  opacity:.45; padding:.125rem .3125rem; display:inline-flex; align-items:center; transition:opacity .15s, background-color .15s, color .15s;
}
.chip.is-empty svg{ width:.8125rem; height:.8125rem; display:block; }
.krow:hover .chip.is-empty{ opacity:.95; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:11rem; padding-bottom:5rem; }
.hero__inner{ display:grid; grid-template-columns:1.12fr .88fr; gap:4rem; align-items:center; }
/* Prevent grid tracks expanding to wide content min-width (overflow guard). */
.hero__inner > *{ min-width:0; }
.hero__title{ font-size:clamp(2.75rem, 4.8vw, 3.9rem); line-height:1.02; color:var(--paper); margin-bottom:1.75rem; text-wrap:balance; }
.hero__title .line{ display:block; }
.line--accent{ color:var(--accent); }
.hero__sub{ max-width:34rem; font-size:1.1875rem; }

/* Interactive card switcher — faithful app UI. Today sits in front; Next and
   Someday peek in from each side. Click/tap a side card to bring it forward. */
.hero__visual{ display:flex; flex-direction:column; align-items:center; }
.cardswitch{
  position:relative; width:100%; max-width:27rem; height:33rem; margin-inline:auto;
}
.cardswitch .kcard{
  position:absolute; top:0; left:50%; width:86%; height:100%;
  padding:1.875rem 1.75rem 1.5rem; transform:translateX(-50%);
  transition:transform .6s var(--ease-osmo), opacity .5s var(--ease-osmo),
             filter .5s var(--ease-osmo), box-shadow .5s var(--ease-osmo);
  will-change:transform; cursor:default; outline:none;
}
/* positions assigned by JS via [data-pos] */
.cardswitch .kcard[data-pos="front"]{ transform:translateX(-50%) scale(1) rotate(0deg); z-index:3; opacity:1; box-shadow:var(--shadow-hi); }
.cardswitch .kcard[data-pos="right"]{ transform:translateX(-14%) scale(.9) rotate(3.5deg); z-index:1; opacity:.94; filter:brightness(.96); cursor:pointer; }
.cardswitch .kcard[data-pos="left"] { transform:translateX(-86%) scale(.9) rotate(-3.5deg); z-index:1; opacity:.94; filter:brightness(.96); cursor:pointer; }
.cardswitch .kcard[data-pos="right"]:hover,
.cardswitch .kcard[data-pos="right"]:focus-visible{ transform:translateX(-8%) scale(.92) rotate(2.5deg); opacity:1; filter:none; }
.cardswitch .kcard[data-pos="left"]:hover,
.cardswitch .kcard[data-pos="left"]:focus-visible { transform:translateX(-92%) scale(.92) rotate(-2.5deg); opacity:1; filter:none; }
.cardswitch__hint{
  margin-top:1.5rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em;
  color:rgba(244,239,228,.62); text-align:center; max-width:30rem;
}
/* the front card's controls are editable */
.cardswitch .kcard[data-pos="front"] .sig,
.cardswitch .kcard[data-pos="front"] .chip,
.cardswitch .kcard[data-pos="front"] .kcard__dots i{ cursor:pointer; }
.cardswitch .kcard[data-pos="front"] .sig{ transition:box-shadow .15s, background-color .15s; }
.cardswitch .kcard[data-pos="front"] .sig:hover{ box-shadow:0 0 0 3px rgba(40,30,15,.10); }
.cardswitch .kcard[data-pos="front"] .chip:hover{ filter:brightness(1.12); }
.cardswitch .kcard[data-pos="front"] .kcard__dots i:hover{ transform:scale(1.18); }
@media (prefers-reduced-motion: reduce){ .cardswitch .kcard{ transition:none; } }

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.proof__inner{ text-align:center; }
.proof__line{ font-family:var(--font-mono); font-size:.9375rem; color:rgba(244,239,228,.6); margin-bottom:1.75rem; }
.proof__logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem 3.5rem; }
.proof__logo{
  font-family:var(--font-mono); font-weight:600; font-size:1.125rem; letter-spacing:.04em;
  color:rgba(244,239,228,.42); transition:color .3s;
}
.proof__logo:nth-child(even){ font-family:var(--font-body); font-weight:600; letter-spacing:0; }
.proof__logo:hover{ color:rgba(244,239,228,.8); }

/* ============================================================
   SPLIT (problem / ritual / faq)
   ============================================================ */
.split{ display:grid; grid-template-columns:16rem 1fr; gap:3rem; }
.split__aside{ position:relative; }
.split__aside .eyebrow{ position:sticky; top:7rem; margin:0; }
.split__main .h2{ margin-bottom:2rem; }
.split--ritual .split__main .h2,
.split--faq .split__aside .eyebrow{ }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.howcard{ display:flex; flex-direction:column; }
.howcard__visual{ margin-bottom:1.75rem; }
.howcard__visual .kcard{ box-shadow:var(--shadow-soft); }
.howcard__title{ font-size:1.5rem; color:var(--paper); margin-bottom:.875rem; }
.howcard__body{ color:var(--text-muted); font-size:.9375rem; line-height:1.65; }
.howcard__body + .howcard__body{ margin-top:.875rem; }
.how__cta{ margin-top:4rem; }

/* ============================================================
   SIGNALS
   ============================================================ */
.signals__inner{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.signals__copy .h2{ margin-bottom:1.5rem; }
.signals__list{
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;
  background:var(--paper); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-soft);
}
.signalrow{ display:flex; align-items:center; gap:1rem; }
.signalrow .sig{ width:1.625rem; height:1.625rem; }
.signalrow .sig--done::after{ width:.875rem; height:.875rem; }
.signalrow__label{ font-family:var(--font-mono); font-size:1rem; color:var(--paper-ink); }

/* ============================================================
   FEATURE LISTS (shared — used by the pricing cards)
   ============================================================ */
.how__grid > *, .signals__inner > *, .footer__inner > *{ min-width:0; }
.featlist{ display:flex; flex-direction:column; gap:.875rem; margin-bottom:2rem; flex:1; }
.featlist li{ position:relative; padding-left:1.75rem; font-size:.9375rem; line-height:1.5; color:var(--paper-ink); }
.featlist li::before{
  content:""; position:absolute; left:0; top:.45em; width:.875rem; height:.875rem; border-radius:50%;
  border:1.5px solid var(--accent);
}
.featlist li::after{ content:""; position:absolute; left:.21875rem; top:calc(.45em + .21875rem); width:.4375rem; height:.4375rem; border-radius:50%; background:var(--accent); }
.featlist__intro{ font-family:var(--font-mono); font-size:.8125rem; color:var(--ink-soft); margin-bottom:.875rem; }

/* ============================================================
   COMPARE TABLE — "One system. However you work." (Personal vs Teams features)
   ============================================================ */
.compare-wrap{ width:min(50rem, 100%); margin-inline:auto; }
.compare{ background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.compare__head, .compare__row{ display:grid; grid-template-columns:1.8fr 1fr 1fr; align-items:center; }
.compare__head{ border-bottom:1px solid var(--rule); }
.compare__corner{ padding:1.5rem 1.75rem; }
.compare__corner-label{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); line-height:1.5; display:block; }
.compare__plan{ display:flex; flex-direction:column; align-items:center; gap:.1875rem; text-align:center; padding:1.5rem 1rem; border-left:1px solid var(--rule); position:relative; }
.compare__plan--featured{ background:rgba(203,87,43,.07); }
.compare__plan-name{ font-size:1.25rem; color:var(--paper-ink); }
.compare__plan-tag{ font-family:var(--font-mono); font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.compare__plan--featured .compare__plan-tag{ color:var(--accent); }
.compare__row{ border-top:1px solid rgba(40,34,24,.06); }
.compare__row:nth-of-type(odd){ background:rgba(40,34,24,.025); }
.compare__row--divider{ border-top:1px solid var(--rule); }
.compare__feature{ padding:.875rem 1.75rem; font-size:.9375rem; color:var(--paper-ink); }
.compare__cell{ display:flex; align-items:center; justify-content:center; padding:.875rem 1rem; border-left:1px solid var(--rule); }
.compare__cell--featured{ background:rgba(203,87,43,.07); }
.compare__note{ text-align:center; margin-top:1.5rem; font-family:var(--font-mono); font-size:.8125rem; color:var(--text-muted); }
.compare__note a{ color:var(--accent); text-decoration:underline; }
/* check / dash marks */
.mark{ position:relative; display:inline-block; width:1.5rem; height:1.5rem; font-size:1rem; }
.mark--yes::after{ content:""; position:absolute; left:.52em; top:.3em; width:.36em; height:.72em; border:solid var(--accent); border-width:0 .16em .16em 0; transform:rotate(45deg); }
.mark--no::after{ content:""; position:absolute; left:.34em; top:.68em; width:.78em; height:.14em; border-radius:2px; background:var(--ink-soft); opacity:.4; }

/* ============================================================
   TESTIMONIALS — line reveal player
   ============================================================ */
.testimonials .section-head{ text-align:center; }
.lrt{ width:min(var(--container), 100% - 2.5rem); }
.lrt__stage{ position:relative; min-height:16rem; display:grid; }
.lrt__item{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; visibility:hidden;
}
.lrt__item.is--active{ visibility:visible; }
.lrt__item:not(.is--active){ pointer-events:none; }
.lrt__quote{
  font-size:clamp(1.5rem, 2.6vw, 2.25rem); line-height:1.32; font-weight:500;
  color:var(--paper); max-width:52rem; letter-spacing:-.01em;
}
/* SplitText mask wrappers */
.lrt .lrt__line{ overflow:hidden; padding-bottom:.06em; }
.lrt__by{ margin-top:2.25rem; display:flex; flex-direction:column; gap:.2rem; overflow:hidden; }
.lrt__name{ font-family:var(--font-mono); font-weight:600; font-size:.9375rem; color:var(--accent); display:block; }
.lrt__title{ font-size:.8125rem; color:var(--text-muted); }
.lrt__controls{ display:flex; align-items:center; justify-content:center; gap:2rem; margin-top:3rem; }
.lrt__dots{ display:flex; gap:.625rem; }
.lrt__dot{ width:.5rem; height:.5rem; border-radius:50%; background:rgba(247,245,238,.22); transition:background-color .25s, transform .25s; }
.lrt__dot.is--active{ background:var(--accent); transform:scale(1.3); }
.lrt__arrows{ display:flex; gap:.75rem; }
.lrt__arrow{
  width:3rem; height:3rem; border-radius:50%; font-size:1.375rem; line-height:1; color:var(--paper);
  background:rgba(247,245,238,.06); border:1px solid rgba(247,245,238,.2);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s, transform .2s;
}
.lrt__arrow:hover{ background:rgba(247,245,238,.14); transform:translateY(-2px); }

/* ============================================================
   PRICING — separate plan cards
   ============================================================ */
.pricing__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; align-items:stretch;
  width:min(58rem, 100%); margin-inline:auto;
}
.pricecard{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
  padding:3.25rem 3rem; display:flex; flex-direction:column; position:relative;
}
.pricecard--featured{
  background:linear-gradient(165deg,#322f26,#26251e); color:var(--paper);
  border:1px solid rgba(203,87,43,.4);
}
.pricecard__badge{
  position:absolute; top:1.5rem; right:1.5rem; font-family:var(--font-mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.1em; color:#fff; background:var(--accent);
  padding:.25rem .625rem; border-radius:99px;
}
.pricecard__name{ font-size:1.5rem; color:var(--paper-ink); margin-bottom:1rem; }
.pricecard--featured .pricecard__name{ color:var(--paper); }
.pricecard__price{ font-family:var(--font-mono); font-weight:600; font-size:2.75rem; color:var(--paper-ink); line-height:1; margin-bottom:.625rem; }
.pricecard--featured .pricecard__price{ color:var(--paper); }
.pricecard__price span{ font-size:.9375rem; font-weight:400; color:var(--ink-soft); }
.pricecard--featured .pricecard__price span{ color:rgba(244,239,228,.7); }
.pricecard__billing{ font-size:.875rem; color:var(--ink-soft); margin-bottom:2.25rem; line-height:1.5; }
.pricecard--featured .pricecard__billing{ color:rgba(244,239,228,.72); }
.pricecard .featlist__intro{ margin-bottom:1rem; }
.pricecard--featured .featlist__intro{ color:rgba(244,239,228,.7); }
.pricecard .featlist{ margin-bottom:2.25rem; }
.pricecard--featured .featlist li{ color:rgba(244,239,228,.9); }
.pricecard .btn{ margin-top:auto; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__item{ border-bottom:1px solid rgba(247,245,238,.14); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  text-align:left; padding:1.5rem 0; font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-size:1.1875rem; color:var(--paper);
  transition:color .2s;
}
.faq__q:hover{ color:var(--accent); }
.faq__icon{ position:relative; width:1.125rem; height:1.125rem; flex:0 0 auto; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; inset:0; margin:auto; background:currentColor; transition:transform .3s var(--ease-osmo); }
.faq__icon::before{ width:1.125rem; height:2px; }
.faq__icon::after{ width:2px; height:1.125rem; }
.faq__item.is-open .faq__icon::after{ transform:scaleY(0); }
.faq__a{ overflow:hidden; height:0; }
.faq__a p{ padding-bottom:1.5rem; color:var(--text-muted); font-size:1rem; line-height:1.65; max-width:48rem; }
.faq__a a{ color:var(--accent); text-decoration:underline; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ text-align:center; }
.final__inner{ max-width:44rem; margin-inline:auto; }
.final__title{ font-size:clamp(2.5rem,4.5vw,3.6rem); line-height:1.02; color:var(--paper); margin-bottom:1.75rem; }
.final__title .line{ display:block; }
.final .lede{ margin-inline:auto; }

/* ============================================================
   MARKER REVEAL (Osmo: highlight-marker-text-reveal)
   ============================================================ */
.marker-line{ position:relative; display:block; }
/* headings that keep explicit line spans (hero / final / signals) */
[data-highlight-marker-reveal] .line{ display:block; position:relative; }
/* inline-block holder → the marker bar hugs the text width (Osmo highlighter look) */
.marker-line__t{ position:relative; display:inline-block; overflow:hidden; margin:-0.055em 0; vertical-align:top; }
.marker-bar{
  position:absolute; inset:-0.055em 0; z-index:2; pointer-events:none;
  background:var(--accent); border-radius:2px;
}

/* ============================================================
   FOOTER (+ parallax wrap — Osmo: footer-parallax-effect)
   ============================================================ */
.footer-wrap{ position:relative; overflow:hidden; }
.footer-wrap__dark{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
}
.footer{ position:relative; z-index:1; background:var(--app-bg-2); padding-block:4rem 3rem; border-top:1px solid rgba(247,245,238,.08); }
.footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer__brand .nav__logo{ margin-bottom:1rem; }
.footer__copy{ font-family:var(--font-mono); font-size:.8125rem; color:rgba(244,239,228,.62); }
.footer__h{ font-family:var(--font-mono); font-size:.8125rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:1.125rem; }
.footer__col{ display:flex; flex-direction:column; gap:.75rem; }
.footer__col a{ font-size:.9375rem; color:rgba(244,239,228,.78); transition:color .2s; }
.footer__col a:hover{ color:var(--paper); }

/* ============================================================
   POPOVER (faithful to the app — signal / category pickers)
   ============================================================ */
.pop-backdrop{ position:fixed; inset:0; z-index:80; display:none; }
.pop-backdrop.open{ display:block; }
.pop{
  position:absolute; z-index:81; background:var(--paper);
  border:1px solid rgba(40,30,15,.12); border-radius:13px;
  box-shadow:0 14px 34px rgba(0,0,0,.32); padding:.375rem; min-width:12.5rem;
  font-family:var(--font-mono); transform-origin:top left;
  animation:popIn .16s cubic-bezier(.2,.9,.3,1);
}
@keyframes popIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.pop h6{ margin:.4375rem .5625rem .3125rem; font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:#a09a8c; font-weight:500; }
.pop .item{
  display:flex; align-items:center; gap:.6875rem; padding:.5625rem; border-radius:9px;
  cursor:pointer; font-size:.8125rem; color:var(--paper-ink); transition:background-color .13s, transform .1s;
}
.pop .item:hover{ background:rgba(40,30,15,.06); transform:translateX(2px); }
.pop .item.is-active{ background:rgba(40,30,15,.06); }
.pop .item.danger{ color:#b23b22; }
.pop .item .lab{ flex:1; }
.pop .item .chk{ color:var(--accent); font-weight:600; }
.pop .item .sig{ width:1.25rem; height:1.25rem; flex:0 0 auto; }
.pop .item .sw{ width:1rem; height:1rem; border-radius:5px; flex:0 0 auto; }
.pop .item .ic{ width:1.125rem; height:1.125rem; flex:0 0 auto; }
.pop .sep{ height:1px; background:rgba(40,30,15,.08); margin:.3125rem .25rem; }

/* ============================================================
   REVEAL (initial states; JS animates to visible)
   ============================================================ */
.js [data-reveal]{ opacity:0; transform:translateY(1.5rem); }
/* Hide masked headlines until JS builds + animates them (no flash of un-masked text).
   Only when motion is allowed — reduced-motion keeps them visible. */
@media not (prefers-reduced-motion: reduce){
  .js [data-reveal-lines]{ visibility:hidden; }
  /* Marker headings + line-reveal quotes stay hidden until their module builds them. */
  .js [data-highlight-marker-reveal]{ visibility:hidden; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:60rem){
  .hero__inner{ grid-template-columns:1fr; gap:3rem; }
  .hero__visual{ order:-1; max-width:24rem; }
  .how__grid{ grid-template-columns:1fr; gap:2.5rem; max-width:30rem; margin-inline:auto; }
  .signals__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .compare-wrap{ width:100%; }
  .pricing__grid{ grid-template-columns:1fr; max-width:30rem; margin-inline:auto; }
  .pricecard--featured{ transform:none; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width:48rem){
  :root{ --section-y:5rem; }
  .nav__links{ display:none; }
  .nav__actions{ display:none; }
  .nav__burger{ display:flex; margin-left:auto; }
  .nav.is-mobile-open .nav__links{
    display:flex; flex-direction:column; gap:1.25rem; position:absolute; top:100%; left:0; right:0;
    background:rgba(46,45,37,.97); backdrop-filter:blur(14px); padding:1.5rem 1.5rem 2rem;
  }
  .split{ grid-template-columns:1fr; gap:1.5rem; }
  .split__aside .eyebrow{ position:static; }
  .signals__list{ grid-template-columns:1fr; padding:2rem; }

  /* Archivo is proportional, so titles fit more per line — but masked .line still
     clips overflow, so keep sizes viewport-aware to avoid cropping long lines. */
  .hero__title{ font-size:clamp(2rem, 9vw, 2.75rem); line-height:1.04; }
  .h2{ font-size:clamp(1.9rem, 7.5vw, 2.5rem); line-height:1.06; }
  .final__title{ font-size:clamp(2rem, 8.5vw, 2.75rem); }
  .hero__sub{ font-size:1.0625rem; }
  .lede{ font-size:1.0625rem; }

  /* Card switcher: tighten the side-card peek so little spills past the viewport. */
  .hero{ padding-top:8rem; }
  .hero__visual{ max-width:21rem; width:100%; margin-inline:auto; }
  .cardswitch{ height:30rem; max-width:21rem; }
  .cardswitch .kcard{ width:84%; padding:1.625rem 1.5rem 1.375rem; }
  .cardswitch .kcard[data-pos="right"]{ transform:translateX(-26%) scale(.88) rotate(3deg); }
  .cardswitch .kcard[data-pos="left"] { transform:translateX(-74%) scale(.88) rotate(-3deg); }
  .cardswitch .kcard[data-pos="right"]:hover,
  .cardswitch .kcard[data-pos="right"]:focus-visible{ transform:translateX(-22%) scale(.9) rotate(2.5deg); }
  .cardswitch .kcard[data-pos="left"]:hover,
  .cardswitch .kcard[data-pos="left"]:focus-visible{ transform:translateX(-78%) scale(.9) rotate(-2.5deg); }
  .kcard__date{ font-size:.6875rem; }

  /* Buttons: allow wrapping and stack full-width so long labels never overflow. */
  .btn{ white-space:normal; text-align:center; }
  .btn--lg{ padding:1rem 1.25rem; font-size:.9375rem; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ width:100%; justify-content:center; }
  .pricecard{ padding-inline:1.75rem; }
  /* compact comparison table on mobile */
  .compare__head, .compare__row{ grid-template-columns:1.5fr .75fr .75fr; }
  .compare__corner{ padding:1.125rem 1rem; }
  .compare__corner-label{ font-size:.625rem; }
  .compare__feature{ padding:.75rem 1rem; font-size:.8125rem; }
  .compare__cell{ padding:.75rem .5rem; }
  .compare__plan{ padding:1.125rem .5rem; }
  .compare__plan-name{ font-size:1.0625rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}