/* Reppex site. Colors are the app's own tokens (androidApp ui/theme/Color.kt, ReppexColors):
   light by default, dark when the reader's system asks for it. */

:root{
  --base:#FFFFFF;
  --card:#F5F5F6;
  --inset:#EBEBED;
  --raised:#FFFFFF;
  --line:#E6E6E8;
  --line-strong:#D4D4D8;
  --track:#E1E1E4;
  --ink:#111214;
  --muted:#5F6064;
  --accent:#C63D21;
  --accent-ink:#B0361C;
  --on-accent:#FFFFFF;
  --done:#176B40;
  --now:#8A5502;
  /* Always-dark panels (the watch feature, the rules band), drawn with the app's dark tokens. */
  --d-base:#0A0B0B;
  --d-card:#141516;
  --d-raised:#232426;
  --d-line:#26272A;
  --d-ink:#ECECEC;
  --d-muted:#9A9C9F;
  --d-accent:#F4664A;

  --font:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --wrap:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --base:#0A0B0B;
    --card:#141516;
    --inset:#1C1D1F;
    --raised:#232426;
    --line:#26272A;
    --line-strong:#36383B;
    --track:#2C2D30;
    --ink:#ECECEC;
    --muted:#9A9C9F;
    --accent:#F4664A;
    --accent-ink:#F4664A;
    --on-accent:#1A0C08;
    --done:#34C77B;
    --now:#E8A33D;
    --d-base:#141516;
    --d-card:#1C1D1F;
    color-scheme:dark;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--base); color:var(--ink); font:400 16px/1.55 var(--font); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; }
a{ color:var(--accent-ink); }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:24px; padding-right:24px; }
@media (max-width:560px){ .wrap{ padding-left:16px; padding-right:16px; } }

.kicker{ font:500 12.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap; }
.btn:hover{ filter:brightness(.94); }
.btn-sm{ min-height:38px; padding:0 16px; font-size:14px; }

/* Header and the progress strip */
.site-header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--base) 88%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.site-header > .wrap{ display:flex; align-items:center; gap:28px; height:64px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand .mark{ width:32px; height:32px; border-radius:8px; }
.brand .word{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.main-nav{ display:flex; gap:22px; margin-inline-start:auto; }
.main-nav a{ color:var(--muted); text-decoration:none; font-size:15px; font-weight:500; }
.main-nav a:hover{ color:var(--ink); }
@media (max-width:820px){ .main-nav{ display:none; } .site-header .btn{ margin-inline-start:auto; } }

.pg-strip{ display:block; border-top:1px solid var(--line); text-decoration:none; color:var(--muted); }
.pg-strip-in{ display:flex; align-items:center; gap:14px; height:34px; font:500 12px/1 var(--mono); letter-spacing:.03em; }
.pg-strip-label{ text-transform:uppercase; white-space:nowrap; }
.pg-strip-count{ white-space:nowrap; color:var(--ink); }
.pg-strip:hover .pg-strip-count{ color:var(--accent-ink); }
.pg-track{ position:relative; flex:1 1 auto; height:6px; border-radius:999px; background:var(--track); overflow:hidden; }
.pg-fill{ position:absolute; inset-block:0; inset-inline-start:0; width:0; border-radius:inherit; background:var(--accent); transition:width .9s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){ .pg-fill{ transition:none; } }
@media (max-width:480px){ .pg-strip-label{ display:none; } }

/* Hero */
.hero{ display:flex; flex-wrap:wrap; align-items:center; gap:48px; padding-top:56px; padding-bottom:64px; }
.hero-copy{ flex:999 1 520px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.badge{ display:inline-flex; align-self:flex-start; align-items:center; gap:10px; padding:6px 14px 6px 6px; border:1px solid var(--line); background:var(--card); border-radius:999px; font-size:13px; font-weight:600; }
.badge-tag{ padding:4px 10px; border-radius:999px; background:var(--accent); color:var(--on-accent); font:500 11.5px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.05em; }
/* Same size as the Audex and studio home headlines. */
.hero h1{ font-size:clamp(32px,6.4vw,40px); line-height:.98; letter-spacing:-.045em; font-weight:800; text-wrap:balance; }
.accent{ color:var(--accent-ink); }
.lede{ max-width:600px; font-size:18.5px; line-height:1.6; color:var(--muted); }
.hero-visual{ flex:1 1 340px; min-width:0; display:flex; justify-content:center; align-items:flex-end; }

/* Device frames and the screenshot slots they hold until the real captures arrive */
.phone{ width:260px; padding:9px; border-radius:40px; background:var(--d-base); box-shadow:0 40px 80px -40px rgba(10,11,11,.6), 0 0 0 1px var(--line-strong); }
.watch{ width:150px; height:150px; padding:8px; border-radius:50%; background:var(--d-base); box-shadow:0 30px 60px -30px rgba(10,11,11,.7), 0 0 0 1px var(--line-strong); }
.hero .watch{ margin-inline-start:-48px; margin-bottom:28px; position:relative; }
@media (max-width:560px){ .hero .phone{ width:210px; } .hero .watch-hero{ width:150px; height:150px; margin-inline-start:-56px; } .feature-shot .shot{ width:220px; } }
.phone img,.phone video{ display:block; width:100%; height:auto; border-radius:31px; }
.watch img,.watch video{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:#000; }
.watch{ background:#000; }
.hero .watch-hero{ width:190px; height:190px; margin-inline-start:-70px; }
.feature-shot .shot{ display:block; width:250px; height:auto; border:8px solid var(--d-base); border-radius:38px; box-shadow:0 30px 60px -30px rgba(10,11,11,.55), 0 0 0 1px var(--line-strong); background:var(--d-base); }
/* Pause button for the watch loop (it runs longer than 5 seconds). Its text is for screen readers. */
.loop-btn{ position:absolute; bottom:4px; inset-inline-end:4px; width:32px; height:32px; border:1px solid var(--line-strong); border-radius:50%; background:var(--raised); color:var(--ink); cursor:pointer; display:grid; place-items:center; padding:0; }
.loop-btn[hidden]{ display:none; }
.loop-btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.loop-btn::before{ content:""; width:10px; height:12px; background:linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.loop-btn.paused::before{ width:11px; background:currentColor; clip-path:polygon(10% 0, 100% 50%, 10% 100%); margin-left:2px; }
.slot{ display:grid; place-items:center; text-align:center; background:repeating-linear-gradient(135deg, var(--d-card) 0 12px, var(--d-raised) 12px 13px); color:var(--d-muted); font:500 12px/1.4 var(--mono); letter-spacing:.03em; }
.slot-phone{ aspect-ratio:9/19.5; border-radius:31px; }
.slot-watch{ width:100%; height:100%; border-radius:50%; }

/* Sections */
.section{ padding-top:72px; padding-bottom:72px; display:flex; flex-direction:column; gap:32px; }
.section-head{ display:flex; flex-direction:column; gap:12px; max-width:720px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); line-height:1.06; letter-spacing:-.035em; font-weight:800; }
.section-head p:not(.kicker){ font-size:17px; color:var(--muted); }

/* How it works */
.feature{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; padding:44px 40px; border-radius:30px; background:var(--card); border:1px solid var(--line); }
.feature-copy{ display:flex; flex-direction:column; gap:12px; }
.feature h3{ font-size:clamp(26px,3vw,36px); line-height:1.1; letter-spacing:-.03em; font-weight:800; }
.feature-copy p:not(.kicker){ font-size:16.5px; color:var(--muted); max-width:520px; }
.feature-shot{ display:flex; justify-content:center; }
.feature-shot .slot-phone{ width:230px; border:8px solid var(--d-base); border-radius:36px; box-shadow:0 30px 60px -30px rgba(10,11,11,.55); }
.feature-dark{ background:var(--d-base); border-color:var(--d-line); color:var(--d-ink); }
.feature-dark .kicker{ color:var(--d-accent); }
.feature-dark .feature-copy p:not(.kicker){ color:var(--d-muted); }
.feature-shot-watch{ position:relative; min-height:260px; align-items:center; }
.feature-dark .watch{ box-shadow:0 30px 60px -24px rgba(0,0,0,.8), 0 0 0 1px #36383B; background:#000; }
.watch-lg{ width:230px; height:230px; }
.watch-sm{ width:140px; height:140px; margin-inline-start:-40px; margin-top:120px; }
.feature-accent .bad-day{ display:grid; gap:12px; }
.bad-day li{ display:flex; flex-direction:column; gap:2px; padding:16px 18px; border-radius:18px; background:var(--raised); border:1px solid var(--line); border-inline-start:4px solid var(--accent); }
.bad-day b{ font-size:17px; }
.bad-day span{ font-size:14.5px; color:var(--muted); }
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; padding:30px 22px; gap:28px; }
  .feature-shot-watch{ min-height:0; }
  .watch-lg{ width:190px; height:190px; }
  .watch-sm{ width:116px; height:116px; margin-top:100px; }
}

/* Progress */
.pg-summary{ display:flex; flex-direction:column; gap:12px; padding:24px 26px; border-radius:22px; background:var(--card); border:1px solid var(--line); }
.pg-summary-count{ font:500 15px/1.3 var(--mono); }
.pg-track-lg{ height:12px; }
.pg-stages{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px; counter-reset:stage; }
.pg-stage{ display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:22px; border:1px solid var(--line); background:var(--base); }
.pg-stage-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pg-stage h3{ font-size:19px; font-weight:800; letter-spacing:-.01em; }
.pg-stage h3::before{ counter-increment:stage; content:counter(stage) ". "; color:var(--muted); font-weight:600; }
.pg-stage > p{ font-size:14.5px; color:var(--muted); }
.pg-status{ flex:none; font:500 11px/1 var(--mono); text-transform:uppercase; letter-spacing:.05em; padding:5px 9px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); }
.pg-status:empty{ display:none; }
.pg-stage[data-status="done"] .pg-status{ color:var(--done); border-color:currentColor; }
.pg-stage[data-status="now"]{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pg-stage[data-status="now"] .pg-status{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* Questions */
.faq{ gap:12px; max-width:820px; }
.faq h2{ font-size:clamp(28px,3.4vw,38px); letter-spacing:-.03em; font-weight:800; margin-bottom:10px; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 22px; }
.faq summary{ font-size:16.5px; font-weight:700; cursor:pointer; }
.faq details p{ margin-top:10px; font-size:15.5px; color:var(--muted); }

/* Waitlist form (hero and closing box) */
.wl{ display:grid; gap:10px; max-width:560px; }
.wl-title{ font-size:15px; font-weight:600; }
.wl-row{ display:flex; flex-wrap:wrap; gap:8px; }
.wl-row input{ flex:1 1 220px; min-width:0; height:48px; padding:0 16px; border-radius:14px; border:1px solid var(--line-strong); background:var(--raised); color:var(--ink); font:inherit; font-size:16px; }
.wl-row input::placeholder{ color:var(--muted); }
.wl-row button{ height:48px; padding:0 22px; border:0; border-radius:14px; background:var(--accent); color:var(--on-accent); font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.wl-row button:disabled{ opacity:.6; cursor:default; }
.wl-msg{ font-size:14.5px; }
.wl-msg[data-state="ok"]{ color:var(--done); font-weight:600; }
.wl-msg[data-state="bad"],.wl-msg[data-state="err"]{ color:var(--accent-ink); font-weight:700; }
.wl-note{ font-size:13px; color:var(--muted); }
.wl-note a{ color:inherit; }

.final{ padding-top:24px; padding-bottom:72px; }
.final-box{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px; padding:52px 44px; border-radius:32px; background:var(--d-base); color:var(--d-ink); border:1px solid var(--d-line); }
.final-box h2{ flex:1 1 320px; font-size:clamp(30px,4.4vw,52px); line-height:1.02; letter-spacing:-.04em; font-weight:800; color:#fff; }
.final-box .wl{ flex:1 1 380px; }
.final-box .wl-title{ color:var(--d-ink); }
.final-box .wl-row input{ background:#000; border-color:#36383B; color:#fff; }
.final-box .wl-row input::placeholder{ color:var(--d-muted); }
.final-box .wl-row button{ background:var(--d-accent); color:#1A0C08; }
.final-box .wl-note{ color:var(--d-muted); }
.final-box .wl-msg[data-state="ok"]{ color:#34C77B; }
.final-box .wl-msg[data-state="bad"],.final-box .wl-msg[data-state="err"]{ color:var(--d-accent); }
@media (max-width:560px){ .final-box{ padding:34px 22px; } }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding-top:40px; }
.footer-in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; padding-bottom:28px; }
.footer-brand{ display:flex; flex-direction:column; gap:12px; max-width:360px; }
.footer-brand p{ font-size:14.5px; color:var(--muted); }
.social{ display:flex; gap:10px; }
.social a{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); color:var(--ink); }
.social a:hover{ border-color:var(--accent); color:var(--accent-ink); }
.social svg{ width:17px; height:17px; fill:currentColor; }
.footer-links{ display:flex; flex-wrap:wrap; gap:12px 24px; align-self:center; }
.footer-links a{ color:var(--muted); text-decoration:none; font-size:15px; }
.footer-links a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:18px; padding-bottom:32px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }