/* ==========================================================================
   undae — marketing site
   Palette and type inherited from the app's design system (design-system.html)
   ========================================================================== */
:root{
  /* surface + ink */
  --bg:#EDEEE8;
  --panel:#F4F5EF;
  --panel-raised:#FFFFFF;
  --ink:#1E231F;
  --ink-soft:#4E5650;
  --ink-faint:#626960;
  --line:#DCDACE;
  --line-soft:#E6E4DA;

  /* brand */
  --accent:#3F6355;
  --accent-deep:#2A4136;
  --accent-ink:#F3F6F1;
  --accent-soft:#B8D3B5;
  --accent-wash:#E4EDE2;
  --highlight:#D9A441;
  --highlight-soft:#F6E7C8;
  --highlight-ink:#6F520C;
  --rose:#B8574A;

  /* on the dark band */
  --dark-bg:#1B211C;
  --dark-ink:#F3F6F1;
  --dark-ink-soft:#A8B8A9;

  /* geometry */
  --radius:24px;
  --radius-md:20px;
  --radius-sm:14px;
  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(30,35,31,.04), 0 8px 24px -12px rgba(30,35,31,.16);
  --shadow-float:0 2px 4px rgba(30,35,31,.05), 0 24px 48px -20px rgba(30,35,31,.28);
  --shadow-device:0 4px 8px rgba(30,35,31,.06), 0 40px 72px -28px rgba(30,35,31,.38);

  /* spacing scale, 4-unit base */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px;  --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --font-display:'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --maxw:1160px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--ink);
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--font-display); font-weight:700; margin:0;
  font-optical-sizing:auto; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;
}
p{ margin:0; line-height:1.62; color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:24px; }
.narrow{ max-width:720px; }

/* browser surfaces */
::selection{ background:var(--accent-soft); color:var(--accent-deep); }
:root{ scrollbar-color:var(--line) transparent; caret-color:var(--accent); accent-color:var(--accent); }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------- reveal ---------------------------------- */
/* Visible by default; the hidden state is only applied once JS is confirmed. */
.js [data-reveal]{ opacity:0; transform:translateY(14px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}

/* ---------------------------------- header ---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:20;
  padding:14px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom-color:var(--line-soft);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:34px; height:34px; border-radius:10px; }
.brand span{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:-.02em; color:var(--ink);
}
.header-links{ display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:600; }
.header-links a{ text-decoration:none; color:var(--ink-soft); transition:color .15s ease; }
.header-links a:hover{ color:var(--ink); }
.header-links a.current{ color:var(--ink); }

/* ---------------------------------- primitives ---------------------------------- */
.btn{
  appearance:none; border:none; border-radius:var(--radius-pill); padding:15px 26px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  transition:transform .12s ease, box-shadow .2s var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ink); color:var(--accent-ink); box-shadow:var(--shadow-card); }
.btn-primary:hover{ box-shadow:var(--shadow-float); }
.btn-outline{ background:var(--panel-raised); color:var(--ink); border:1.5px solid var(--line); }
.btn-outline:hover{ border-color:var(--ink); }

.pill-note{
  display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700;
  letter-spacing:.01em; color:var(--highlight-ink); background:var(--highlight-soft);
  padding:11px 20px 11px 17px; border-radius:var(--radius-pill);
}
.pill-note .dot{
  width:7px; height:7px; border-radius:50%; background:var(--highlight);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--highlight) 22%, transparent);
}
.fine{ font-size:13.5px; line-height:1.55; color:var(--ink-faint); }

.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(30px,4.4vw,44px); line-height:1.08; }
.section-head p{ margin-top:var(--sp-5); font-size:18px; max-width:56ch; }

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative;
  padding:clamp(48px,7vw,88px) 0 clamp(72px,9vw,112px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-30% -12% -6% -12%;
  background:
    radial-gradient(42% 42% at 78% 40%, color-mix(in srgb, var(--accent-soft) 60%, transparent) 0%, transparent 70%),
    radial-gradient(46% 34% at 10% 78%, color-mix(in srgb, var(--highlight) 32%, transparent) 0%, transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 97%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 97%);
  pointer-events:none;
}
.hero .wrap{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  align-items:center; gap:clamp(32px,5vw,72px);
}
.hero h1{
  font-size:clamp(40px,5.2vw,66px); line-height:1.02; letter-spacing:-.028em;
}
.hero .lede{
  margin-top:var(--sp-6); font-size:clamp(17px,1.6vw,19.5px); line-height:1.55;
  color:var(--ink-soft); max-width:44ch;
}
.hero-actions{ margin-top:clamp(28px,3.5vw,40px); display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); }

.spec-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4);
  margin:0; padding:0; list-style:none;
}
.spec-line li{
  font-size:13.5px; font-weight:600; color:var(--ink-faint);
  display:flex; align-items:center; gap:var(--sp-4); white-space:nowrap;
}
.spec-line li:not(:last-child)::after{
  content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45; flex:none;
}

.hero-media{ position:relative; display:flex; justify-content:center; }
.hero-media .phone-shot{ width:min(286px,88%); }
.hero-pogo{
  position:absolute; left:-14%; bottom:4px; width:112px; height:112px;
  filter:drop-shadow(0 14px 22px rgba(30,35,31,.16));
}

/* ---------------------------------- device ---------------------------------- */
.phone-shot{
  width:min(272px,100%); height:auto;
  border-radius:38px; border:9px solid #14170F; background:#14170F;
  box-shadow:var(--shadow-device);
}

/* ---------------------------------- premise / steps ---------------------------------- */
.premise{ padding:clamp(56px,6vw,80px) 0 clamp(48px,6vw,72px); }
.premise .wrap{ display:grid; gap:clamp(40px,5vw,64px); }
.premise-head{ max-width:760px; }
.premise-head h2{ font-size:clamp(30px,4.4vw,46px); line-height:1.05; }
.premise-head p{ margin-top:var(--sp-5); font-size:18px; max-width:54ch; }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); overflow:hidden;
}
.step{ background:var(--panel-raised); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:var(--sp-3); }
.step .num{
  font-family:var(--font-display); font-weight:700; font-size:13px;
  color:var(--accent); letter-spacing:.02em;
}
.step h3{ font-size:19.5px; letter-spacing:-.015em; }
.step p{ font-size:15.5px; color:var(--ink-soft); }

/* ---------------------------------- feature rows ---------------------------------- */
.features{ padding:clamp(40px,5vw,64px) 0 clamp(64px,8vw,104px); }
.features.cont{ padding-block:clamp(56px,7vw,88px) clamp(32px,4vw,48px); }
.features .wrap{ display:flex; flex-direction:column; gap:clamp(72px,9vw,120px); }

.feature-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,6vw,80px); }
.feature-row.reverse .feature-media{ order:2; }
.feature-copy{ max-width:480px; }
.feature-copy h2{ font-size:clamp(25px,3vw,33px); line-height:1.14; }
.feature-copy p{ margin-top:var(--sp-5); font-size:16.5px; max-width:50ch; }
.feature-media{ display:flex; justify-content:center; }

/* the lead feature gets a surface and more air */
.feature-row.lead{
  background:var(--panel-raised); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(32px,5vw,64px);
  gap:clamp(32px,5vw,64px);
}
.feature-row.lead .feature-copy h2{ font-size:clamp(28px,3.6vw,40px); }
.feature-row.lead .feature-copy p{ font-size:17.5px; }
.feature-row.lead .phone-shot{ width:min(300px,100%); }

.stat{
  display:inline-flex; align-items:baseline; gap:var(--sp-3);
  margin-top:var(--sp-6); padding:10px 18px;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:700; font-size:16px;
  letter-spacing:-.01em; color:var(--ink);
}
.stat span{
  font-family:var(--font-body);
  font-size:13.5px; font-weight:600; color:var(--ink-faint); letter-spacing:0;
}

/* ---------------------------------- statement band ---------------------------------- */
.statement{
  position:relative; background:var(--dark-bg); color:var(--dark-ink);
  padding:clamp(72px,10vw,136px) 0; overflow:hidden;
}
.statement::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 85% 15%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 68%);
  pointer-events:none;
}
.statement .wrap{ position:relative; max-width:900px; }
.statement h2{
  color:var(--dark-ink); font-size:clamp(32px,5vw,56px); line-height:1.04; letter-spacing:-.028em;
  max-width:21ch;
}
.statement p{
  color:var(--dark-ink-soft); font-size:clamp(17px,1.7vw,19.5px); margin-top:var(--sp-6); max-width:52ch;
}
.statement .kicker{
  margin-top:var(--sp-7); font-family:var(--font-display); font-weight:600;
  font-size:clamp(19px,2.2vw,26px); line-height:1.3; color:var(--accent-soft);
  letter-spacing:-.02em;
}

/* ---------------------------------- facts / spec sheet ---------------------------------- */
.facts{ padding:clamp(64px,8vw,104px) 0; }
.facts .facts-head{ margin-bottom:clamp(32px,4vw,48px); max-width:680px; }
.facts .facts-head h2{ font-size:clamp(28px,3.8vw,40px); line-height:1.08; }
.facts .facts-head p{ margin-top:var(--sp-5); font-size:17px; }

.facts-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); overflow:hidden;
  margin:0; padding:0;
}
.fact{
  background:var(--panel-raised); padding:clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.fact dt{
  font-family:var(--font-display); font-weight:600; font-size:16.5px;
  letter-spacing:-.015em; color:var(--ink); line-height:1.3;
}
.fact dd{ margin:0; font-size:15px; line-height:1.55; color:var(--ink-soft); }

/* ---------------------------------- closing ---------------------------------- */
.closing{ padding:clamp(24px,4vw,48px) 0 clamp(72px,9vw,112px); }
.closing-card{
  position:relative; overflow:hidden;
  background:var(--accent-wash); border-radius:var(--radius);
  padding:clamp(40px,6vw,72px) clamp(28px,5vw,72px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,56px);
}
.closing-card::before{
  content:""; position:absolute; inset:auto -10% -60% 30%; height:140%;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--highlight) 26%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.closing-text{ position:relative; max-width:520px; }
.closing-text h2{ font-size:clamp(28px,3.8vw,42px); line-height:1.06; }
.closing-text p{ margin-top:var(--sp-5); font-size:17px; color:var(--ink-soft); max-width:46ch; }
.closing-actions{ margin-top:var(--sp-6); display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
.closing-pogo{ position:relative; width:clamp(140px,15vw,190px); height:auto; flex:none; align-self:flex-end; filter:drop-shadow(0 16px 24px rgba(30,35,31,.16)); }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{ padding:clamp(32px,4vw,44px) 0 clamp(40px,5vw,56px); border-top:1px solid var(--line-soft); }
.site-footer .wrap{ display:flex; flex-direction:column; gap:var(--sp-5); }
.footer-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.footer-links{ display:flex; flex-wrap:wrap; gap:24px; font-size:14px; font-weight:600; }
.footer-links a{ text-decoration:none; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--ink); }
.footer-fine{ font-size:13px; color:var(--ink-faint); line-height:1.65; max-width:70ch; }
.footer-fine a{ color:var(--ink-faint); text-decoration:underline; }

/* ---------------------------------- legal pages ---------------------------------- */
.legal{ padding:clamp(32px,5vw,56px) 0 clamp(64px,8vw,96px); }
.legal-head{ margin-bottom:var(--sp-7); }
.legal-head .eyebrow{
  font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.legal-head h1{ font-size:clamp(32px,5vw,46px); line-height:1.06; margin-bottom:10px; }
.legal-head .updated{ font-size:13.5px; color:var(--ink-faint); }
.legal-card{
  background:var(--panel-raised); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(28px,6vw,56px);
}
.legal-card h2{ font-size:19px; margin:36px 0 12px; }
.legal-card h2:first-child{ margin-top:0; }
.legal-card p{ font-size:15.5px; margin-bottom:14px; }
.legal-card ul{ margin:0 0 14px; padding-left:20px; }
.legal-card li{ font-size:15.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:8px; }
.legal-card a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.legal-card strong{ color:var(--ink); }
.callout{
  background:var(--panel); border-radius:var(--radius-sm); padding:16px 20px; margin:20px 0;
  font-size:14.5px; color:var(--ink-soft); border:1px solid var(--line);
}

/* ---------------------------------- responsive ---------------------------------- */
@media (max-width: 1000px){
  .hero-pogo{ width:96px; height:96px; left:-9%; }
}

@media (max-width: 860px){
  body{ font-size:16.5px; }
  .hero{ padding-bottom:clamp(56px,8vw,72px); }
  .hero .wrap{ grid-template-columns:1fr; gap:clamp(36px,7vw,52px); }
  .hero h1{ font-size:clamp(38px,9vw,54px); }
  .hero .lede{ max-width:52ch; }
  .hero-media{ justify-content:flex-start; }
  .hero-media .phone-shot{ width:min(250px,62%); }
  .hero-pogo{ left:auto; right:6%; bottom:8px; }

  .steps{ grid-template-columns:1fr; }

  .facts-grid{ grid-template-columns:1fr; }
  .feature-row, .feature-row.reverse{ grid-template-columns:1fr; gap:var(--sp-7); }
  .feature-row.reverse .feature-media{ order:0; }
  .feature-copy{ max-width:56ch; }

  .closing-card{ flex-direction:column; align-items:flex-start; }
  .closing-pogo{ align-self:flex-end; margin-top:calc(var(--sp-5) * -1); }
}

@media (max-width: 620px){
  .header-links{ gap:18px; font-size:13.5px; }
  .brand span{ font-size:17.5px; }
  .hero-media .phone-shot{ width:min(230px,70%); }
  .statement h2{ max-width:none; }
}

@media (max-width: 420px){
  .wrap{ padding-inline:20px; }
  .hero-pogo{ width:80px; height:80px; }
  .closing-pogo{ width:110px; }
}