/* ------------------------------------------------------------------
   Two Cents landing page.
   Tokens are the app's design-system tokens verbatim; the night skin is
   the same override map the design ships, moved from JS into CSS so the
   page is correct before any script runs.
   ------------------------------------------------------------------ */

:root{
  /* Neutrals: cool, near-monochrome. The system is mostly this. */
  --neutral-000:#FFFFFF;--neutral-050:#FAFAFA;--neutral-100:#F4F4F5;--neutral-200:#E9E9EC;
  --neutral-300:#D4D4D8;--neutral-400:#A1A1AA;--neutral-500:#71717A;--neutral-600:#52525B;
  --neutral-700:#3F3F46;--neutral-800:#27272A;--neutral-900:#18181B;--neutral-950:#09090B;

  /* Accent is ink, not colour. Colour is reserved for the budget bar. */
  --accent-500:#09090B;--accent-600:#1F1F23;

  --success-100:#E7F7EF;--success-500:#00A96E;--success-600:#008757;

  --text-strong:var(--neutral-950);
  --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-inverse-muted:rgba(250,250,250,.60);

  --surface-page:var(--neutral-050);
  --surface-card:var(--neutral-000);
  --surface-sunken:var(--neutral-100);
  --surface-success-soft:var(--success-100);
  --surface-scrim:rgba(9,9,11,.50);

  --border-hairline:rgba(9,9,11,.07);
  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-300);

  --action-primary:var(--accent-500);
  --action-primary-hover:var(--accent-600);
  --state-disabled-bg:var(--neutral-100);
  --state-disabled-text:var(--neutral-400);

  --radius-card:14px;
  --shadow-sheet:0 -10px 40px -18px rgba(9,9,11,.32);

  --bezel-bg:#09090B;
  --bezel-border:transparent;
  --bezel-shadow:0 40px 80px -30px rgba(9,9,11,.34);

  --font-ui:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* The night skin. Written once, applied both by the toggle and — for
   visitors without script — by the system preference. */
:root[data-theme="dark"]{
  --surface-page:#09090B;--surface-card:#18181B;--surface-sunken:#27272A;
  --surface-scrim:rgba(0,0,0,.62);
  --surface-success-soft:rgba(0,169,110,.16);
  --text-strong:#FAFAFA;--text-body:rgba(250,250,250,.82);--text-muted:rgba(250,250,250,.58);
  --text-inverse-muted:rgba(9,9,11,.6);
  --border-hairline:rgba(255,255,255,.09);--border-subtle:rgba(255,255,255,.13);
  --border-strong:rgba(255,255,255,.2);
  --accent-500:#FAFAFA;--accent-600:#FFFFFF;
  --action-primary:#FAFAFA;--action-primary-hover:#FFFFFF;
  --neutral-000:#09090B;--neutral-050:#09090B;--neutral-100:#27272A;
  --neutral-200:rgba(255,255,255,.14);--neutral-300:rgba(255,255,255,.26);
  --neutral-400:rgba(250,250,250,.45);--neutral-900:#FAFAFA;
  --state-disabled-bg:rgba(255,255,255,.1);--state-disabled-text:rgba(250,250,250,.4);
  --success-600:#34D399;
  --bezel-bg:#3F3F46;
  --bezel-border:rgba(255,255,255,.22);
  --bezel-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 90px -34px rgba(0,0,0,.9);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --surface-page:#09090B;--surface-card:#18181B;--surface-sunken:#27272A;
    --surface-scrim:rgba(0,0,0,.62);
    --surface-success-soft:rgba(0,169,110,.16);
    --text-strong:#FAFAFA;--text-body:rgba(250,250,250,.82);--text-muted:rgba(250,250,250,.58);
    --text-inverse-muted:rgba(9,9,11,.6);
    --border-hairline:rgba(255,255,255,.09);--border-subtle:rgba(255,255,255,.13);
    --border-strong:rgba(255,255,255,.2);
    --accent-500:#FAFAFA;--accent-600:#FFFFFF;
    --action-primary:#FAFAFA;--action-primary-hover:#FFFFFF;
    --neutral-000:#09090B;--neutral-050:#09090B;--neutral-100:#27272A;
    --neutral-200:rgba(255,255,255,.14);--neutral-300:rgba(255,255,255,.26);
    --neutral-400:rgba(250,250,250,.45);--neutral-900:#FAFAFA;
    --state-disabled-bg:rgba(255,255,255,.1);--state-disabled-text:rgba(250,250,250,.4);
    --success-600:#34D399;
    --bezel-bg:#3F3F46;
    --bezel-border:rgba(255,255,255,.22);
    --bezel-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 90px -34px rgba(0,0,0,.9);
  }
}

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

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-strong);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent-500);text-decoration:none}
a:hover{color:var(--accent-600)}

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

h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}

/* One rule sets the page gutter everywhere: content tops out at 1152px,
   which is the design's 1280px canvas minus its 64px padding. */
.topbar,.hero,.story-grid,.pricing,.closing,.foot{
  padding-inline:max(24px, calc((100% - 1152px) / 2));
}

.page{width:100%;overflow-x:clip}

/* ---------------- header ---------------- */

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:26px;
}
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.brand:hover{color:inherit}
.brand-name{font-size:19px;font-weight:600;letter-spacing:-0.035em}
.brand-name-sm{font-size:14px;letter-spacing:-0.025em}
.brand-sm{gap:9px}
.mark{display:block;flex:0 0 auto}

.topbar-right{display:flex;align-items:center;gap:20px}
.topbar-link{font-size:14px;font-weight:600;letter-spacing:-0.015em;color:var(--text-body)}
.topbar-link:hover{color:var(--text-strong)}

.theme-toggle{
  display:flex;align-items:center;gap:2px;padding:3px;margin:0;
  border:1px solid var(--border-subtle);border-radius:999px;
  background:var(--surface-card);cursor:pointer;
}
.theme-pill{
  width:30px;height:30px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text-muted);
  transition:background 140ms ease,color 140ms ease;
}
.theme-pill-light{background:var(--accent-500);color:var(--neutral-050)}
:root[data-theme="dark"] .theme-pill-light{background:transparent;color:var(--text-muted)}
:root[data-theme="dark"] .theme-pill-dark{background:var(--accent-500);color:var(--neutral-050)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .theme-pill-light{background:transparent;color:var(--text-muted)}
  :root:not([data-theme]) .theme-pill-dark{background:var(--accent-500);color:var(--neutral-050)}
}

/* ---------------- hero ---------------- */

.hero{
  display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center;
  padding-block:56px 96px;
}
.hero-copy{animation:tcl-rise 520ms cubic-bezier(.32,1.28,.5,1) both}
.hero-title{
  font-size:clamp(44px,6.4vw,76px);font-weight:600;letter-spacing:-0.05em;line-height:1.02;
  margin-bottom:22px;
}
.hero-lede{
  font-size:19px;line-height:1.5;letter-spacing:-0.02em;color:var(--text-body);
  max-width:440px;margin-bottom:38px;text-wrap:pretty;
}

.store-row{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.store-row-center{justify-content:center;margin-bottom:0}
.store-btn{
  display:flex;align-items:center;gap:12px;height:60px;padding:0 26px;
  border-radius:999px;transition:background 110ms ease;
}
.store-btn-primary{background:var(--action-primary);color:var(--neutral-050)}
.store-btn-primary:hover{background:var(--action-primary-hover);color:var(--neutral-050)}
.store-btn-secondary{
  background:var(--surface-card);border:1px solid var(--border-strong);color:var(--text-strong);
}
.store-btn-secondary:hover{background:var(--neutral-100);color:var(--text-strong)}
.store-btn svg{flex:0 0 auto}
.store-kicker{
  display:block;font:400 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);
}
.store-btn-primary .store-kicker{color:var(--text-inverse-muted)}
.store-name{display:block;font-size:17px;font-weight:600;letter-spacing:-0.025em;margin-top:1px}

.rating{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);letter-spacing:-0.01em}
.stars{display:flex;gap:2px;color:var(--text-strong)}
.stars svg{display:block}

/* ---------------- phone ---------------- */

.phone-stage{
  --ps:1;
  justify-self:center;
  /* The hero centres its copy on narrow screens; the screen inside the phone
     must not follow it. */
  text-align:left;
  width:calc(340px * var(--ps));height:calc(680px * var(--ps));
  animation:tcl-rise 620ms cubic-bezier(.32,1.28,.5,1) both;animation-delay:90ms;
}
.phone{
  width:340px;height:680px;border-radius:46px;padding:11px;
  background:var(--bezel-bg);border:1px solid var(--bezel-border);
  box-shadow:var(--bezel-shadow);
  transform:scale(var(--ps));transform-origin:top left;
}
.phone-screen{
  width:100%;height:100%;border-radius:36px;background:var(--surface-page);
  overflow:hidden;position:relative;padding:44px 22px 0;
}
.phone-notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:88px;height:22px;border-radius:999px;background:var(--bezel-bg);
}

.ph-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ph-month{font-size:24px;font-weight:600;letter-spacing:-0.035em}
.ph-faces{display:flex}
.ph-face{
  width:28px;height:28px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font:600 11px var(--font-mono);border:2px solid var(--surface-page);
}
.ph-face-e{background:var(--neutral-900);color:var(--neutral-050)}
.ph-face-j{background:var(--neutral-300);color:var(--neutral-900);margin-left:-8px}

.ph-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card)}
.ph-budget{padding:17px;margin-bottom:20px}
.ph-budget-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px}
.ph-budget-label{font-size:12px;color:var(--text-muted)}
.ph-budget-of{font:400 12px var(--font-mono);color:var(--text-muted)}
.ph-left{
  font:600 44px/1.05 var(--font-mono);letter-spacing:-0.05em;margin:2px 0 12px;
  transform-origin:left center;transition:transform 420ms cubic-bezier(.32,1.28,.5,1);
}
.ph-track{height:7px;border-radius:999px;background:var(--neutral-200);overflow:hidden}
.ph-fill{height:100%;border-radius:999px;background:var(--success-500);transition:width 620ms cubic-bezier(.22,1,.36,1)}

.ph-rows{padding:2px 15px}
.ph-row{
  display:flex;align-items:center;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--border-hairline);
  animation:tcl-drop 420ms cubic-bezier(.32,1.28,.5,1) both;
}
.ph-row:nth-child(1){animation-delay:260ms}
.ph-row:nth-child(2){animation-delay:350ms}
.ph-row:nth-child(3){animation-delay:440ms}
.ph-row:nth-child(4){animation-delay:530ms}
.ph-row:nth-child(5){animation-delay:620ms}
.ph-row-icon{
  width:34px;height:34px;border-radius:9px;background:var(--surface-sunken);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--text-strong);
}
.ph-row-text{flex:1;min-width:0}
.ph-row-cat{font-size:13px;font-weight:600;letter-spacing:-0.02em}
.ph-row-sub{font-size:11px;color:var(--text-muted)}
.ph-who{
  width:19px;height:19px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;font:600 9px var(--font-mono);
}
.ph-who-e{background:var(--neutral-900);color:var(--neutral-050)}
.ph-who-j{background:var(--neutral-300);color:var(--neutral-900)}
.ph-row-amt{font:600 14px var(--font-mono);letter-spacing:-0.02em}

.ph-fab{
  position:absolute;right:22px;bottom:34px;width:56px;height:56px;border-radius:999px;
  background:var(--action-primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 24px -8px rgba(9,9,11,.4);
  transition:transform 180ms cubic-bezier(.32,1.28,.5,1);
}
.ph-fab.is-pressed{transform:scale(.9)}

.ph-scrim{
  position:absolute;inset:0;background:var(--surface-scrim);opacity:0;
  transition:opacity 200ms ease;pointer-events:none;
}
.ph-scrim.is-on{opacity:1}

.ph-sheet{
  position:absolute;left:0;right:0;bottom:0;background:var(--surface-card);
  border-radius:20px 20px 0 0;box-shadow:var(--shadow-sheet);padding:10px 18px 22px;
  transform:translateY(102%);transition:transform 300ms cubic-bezier(.32,1.28,.5,1);
}
.ph-sheet.is-open{transform:translateY(0)}
.ph-grabber{width:34px;height:4px;border-radius:999px;background:var(--neutral-300);margin:0 auto 12px}
.ph-payer{
  display:flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 3px;border-radius:999px;
  background:var(--surface-sunken);width:fit-content;margin-bottom:10px;
}
.ph-payer-face{
  width:24px;height:24px;border-radius:999px;background:var(--neutral-300);color:var(--neutral-900);
  display:flex;align-items:center;justify-content:center;font:600 10px var(--font-mono);
}
.ph-payer-face.is-e{background:var(--neutral-900);color:var(--neutral-050)}
.ph-payer-name{font-size:12px;color:var(--text-body)}
.ph-amount{display:flex;align-items:baseline;justify-content:center;gap:3px;padding:2px 0 4px}
.ph-amount-cur{font:600 22px var(--font-mono);letter-spacing:-0.03em;color:var(--neutral-400)}
.ph-amount-val{font:600 42px/1 var(--font-mono);letter-spacing:-0.05em;color:var(--neutral-300)}
.ph-amount-val.is-typed{color:var(--text-strong)}
.ph-hint{text-align:center;font-size:11px;color:var(--text-muted);margin-bottom:12px}
.ph-cats{display:flex;gap:6px;margin-bottom:12px}
.ph-cat{
  display:flex;align-items:center;gap:5px;height:34px;padding:0 11px;
  border:1px solid var(--border-subtle);background:var(--surface-page);color:var(--text-strong);
  border-radius:999px;font-size:12px;font-weight:600;letter-spacing:-0.01em;flex:0 0 auto;
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease;
}
.ph-cat.is-on{background:var(--accent-500);border-color:var(--accent-500);color:var(--neutral-050)}
.ph-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.ph-key{
  height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;
  background:var(--surface-page);border:1px solid var(--border-subtle);
  font:600 15px var(--font-mono);color:var(--text-strong);transition:background 120ms ease;
}
.ph-key.is-hot{background:var(--neutral-200)}
.ph-cta{
  height:44px;border-radius:999px;background:var(--state-disabled-bg);color:var(--state-disabled-text);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;letter-spacing:-0.015em;
  transition:transform 160ms cubic-bezier(.32,1.28,.5,1);
}
.ph-cta.is-ready{background:var(--action-primary);color:var(--neutral-050)}
.ph-cta.is-pressed{transform:scale(.97)}

/* ---------------- three-beat story ---------------- */

.story{
  background:var(--surface-card);
  border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
  padding-block:76px;
}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.beat-art{display:block;width:100%;height:150px;margin-bottom:26px}
.eyebrow{
  font:400 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:9px;
}
.beat-title{font-size:24px;font-weight:600;letter-spacing:-0.03em;margin-bottom:8px}
.beat-body{font-size:15px;line-height:1.5;letter-spacing:-0.015em;color:var(--text-body);text-wrap:pretty}

.bar{animation:tcl-bar 620ms cubic-bezier(.22,1,.36,1) both}
.trend{animation:tcl-draw 900ms cubic-bezier(.22,1,.36,1) both;animation-delay:340ms}

/* ---------------- pricing ---------------- */

.pricing{padding-block:96px 76px}
.pricing-head{text-align:center;margin-bottom:44px}
.pricing-head .eyebrow{margin-bottom:14px}
.section-title{
  font-size:clamp(32px,4.6vw,52px);font-weight:600;letter-spacing:-0.05em;line-height:1.08;
  margin-bottom:16px;text-wrap:pretty;
}
.section-sub{font-size:17px;color:var(--text-body);letter-spacing:-0.02em}

.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:840px;margin:0 auto 32px}
.plan{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:32px;
}
.plan .eyebrow{margin-bottom:18px}
.plan-featured{border:1.5px solid var(--accent-500);position:relative}
.plan-badge{
  position:absolute;top:-11px;left:32px;height:22px;padding:0 11px;
  display:flex;align-items:center;border-radius:999px;
  background:var(--accent-500);color:var(--neutral-050);
  font:600 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.plan-figure{font:600 clamp(38px,5vw,52px) var(--font-mono);letter-spacing:-0.05em}
.plan-per{font-size:15px;color:var(--text-muted)}
.plan-note{font-size:14px;color:var(--text-muted);letter-spacing:-0.015em}

.included{display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.included li{
  display:flex;align-items:center;gap:9px;
  font-size:15px;letter-spacing:-0.015em;color:var(--text-body);
}
.included svg{color:var(--success-600);flex:0 0 auto}

/* ---------------- closing ---------------- */

.closing{padding-block:76px 96px;text-align:center;border-top:1px solid var(--border-subtle)}
.closing .section-title{margin-bottom:18px}
.closing-sub{margin-bottom:36px}

/* ---------------- footer ---------------- */

.foot{
  border-top:1px solid var(--border-subtle);padding-block:28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot-links{display:flex;gap:26px;font-size:13px}
.foot-links a{color:var(--text-muted)}
.foot-links a:hover{color:var(--text-strong)}

/* ---------------- motion ---------------- */

@keyframes tcl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes tcl-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tcl-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes tcl-drop{0%{transform:translateY(-6px);opacity:0}100%{transform:translateY(0);opacity:1}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------------- responsive ---------------- */

@media (max-width:1080px){
  .hero{grid-template-columns:1fr;gap:56px;justify-items:center;text-align:center;padding-block:40px 72px}
  .hero-lede{margin-left:auto;margin-right:auto}
  .store-row{justify-content:center}
  .rating{justify-content:center}
}

@media (max-width:880px){
  .story-grid{grid-template-columns:1fr;gap:44px;max-width:520px;margin-inline:auto}
  .story{padding-block:60px}
  .pricing{padding-block:72px 60px}
  .closing{padding-block:60px 76px}
}

@media (max-width:640px){
  .plans{grid-template-columns:1fr}
  .plan{padding:26px}
  .plan-badge{left:26px}
  .included{gap:14px 24px}
  .topbar{padding-block:20px}
  .hero-lede{font-size:17px;margin-bottom:30px}
  .section-sub{font-size:16px}
  .store-btn{height:56px;padding:0 22px}
  .foot{justify-content:center;gap:16px}
}

@media (max-width:400px){
  .phone-stage{--ps:.86}
  .store-row{gap:10px}
}

/* ---------------- legal documents ---------------- */

.doc{max-width:none;padding-block:8px 72px}
.doc-head{padding-block:44px 8px;border-bottom:1px solid var(--border-subtle);margin-bottom:36px}
.doc-head .eyebrow{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;
}
.doc-head h1{font-size:clamp(30px,4.6vw,44px);line-height:1.06;letter-spacing:-.035em;margin:0 0 14px}
.doc-lede{font-size:clamp(16px,2vw,18px);color:var(--text-body);max-width:60ch;margin:0 0 16px}
.doc-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin:0}
.doc-section{max-width:68ch;margin-bottom:36px}
.doc-section h2{font-size:22px;letter-spacing:-.02em;margin:0 0 10px}
.doc-section h3{font-size:16px;margin:22px 0 6px}
.doc-section p{color:var(--text-body);margin:0 0 12px;line-height:1.7}
.doc-section ul{color:var(--text-body);margin:0 0 12px;padding-left:20px;line-height:1.7}
.doc-section li{margin-bottom:6px}
.doc-section a{color:var(--text-strong);text-decoration:underline;text-underline-offset:3px}
.doc-table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:14.5px}
.doc-table th{
  text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);font-weight:500;
  padding:0 14px 8px 0;border-bottom:1px solid var(--border-strong);
}
.doc-table td{padding:11px 14px 11px 0;border-bottom:1px solid var(--border-subtle);color:var(--text-body);vertical-align:top}
.doc-table td:first-child{color:var(--text-strong);white-space:nowrap}
.doc-links{display:flex;gap:22px;font-size:14px;margin-top:8px}