/* ============================================================
   Katana — marketing site
   Bauhaus monochrome. Space Grotesk (display) + Inter (body).
   Palette copied from the app's design tokens.
   ============================================================ */

:root{
  --ink:#0A0A0A; --ink-2:#242422; --graphite:#6B6B6B; --mist:#B4B4B0;
  --hair:#E6E5E2; --hair-2:#F1F0EE; --fill:#F5F4F2; --paper:#FFFFFF; --canvas:#EFEEEC;
  --danger:#C62F2A;
  --disp:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:20px; --r-s:14px;
  --wrap:1140px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);letter-spacing:-0.02em;line-height:1.05}

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

/* Anchor targets clear the sticky header (so "Get the app" / nav links don't
   scroll their target under the nav and hide it). */
#get,#method,#features,#premium,#faq{scroll-margin-top:92px}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-weight:600;font-size:15px;
  height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--ink-2)}
.btn--line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}

/* ---------- eyebrow / section title ---------- */
.eyebrow{
  font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist);margin-bottom:18px;
}
.eyebrow--center{text-align:center}
.eyebrow.light{color:rgba(255,255,255,.5)}
.section-title{font-size:clamp(28px,4.2vw,46px);font-weight:700;letter-spacing:-0.03em}
.section-title.center{text-align:center}
.section-title.light{color:var(--paper)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{border-radius:50%}
.brand__word{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.02em}
.nav__links{display:flex;gap:34px}
.nav__links a{font-size:15px;color:var(--graphite);font-weight:500;transition:color .15s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{height:42px;font-size:14px}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:flex;flex-direction:column;gap:4px;padding:12px 24px 22px;border-bottom:1px solid var(--hair);background:var(--paper)}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:12px 4px;font-size:17px;font-weight:500;border-bottom:1px solid var(--hair-2)}
.mobile-menu .btn{margin-top:12px;height:52px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding-block:clamp(48px,7vw,96px);
}
.hero__title{font-size:clamp(52px,8.5vw,104px);font-weight:700;letter-spacing:-0.045em;line-height:.9}
.hero__sub{margin-top:26px;max-width:460px;font-size:clamp(16px,1.7vw,19px);color:var(--graphite);line-height:1.6}

.stores{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.stores--center{justify-content:center}
.store{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--ink);color:var(--paper);
  padding:11px 20px 11px 17px;border-radius:14px;transition:transform .12s ease,opacity .2s;
}
.store:hover{transform:translateY(-2px)}
.store svg{width:26px;height:26px;fill:currentColor;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store small{font-size:11px;opacity:.8;font-weight:400}
.store strong{font-family:var(--disp);font-size:18px;font-weight:600}
.store--light{background:var(--paper);color:var(--ink)}
.stores__note{margin-top:16px;font-size:13.5px;color:var(--mist)}

/* ---------- scan-to-download QR ---------- */
.qr-hint{
  display:flex;align-items:center;gap:16px;margin-top:26px;padding:14px 16px;
  border:1px solid var(--hair);border-radius:16px;max-width:370px;
}
.qr-hint__img{width:92px;height:92px;flex:none;border-radius:8px}
.qr-hint__text{display:flex;flex-direction:column;gap:3px;text-align:left}
.qr-hint__text strong{font-family:var(--disp);font-weight:600;font-size:15px}
.qr-hint__text span{font-size:12.5px;color:var(--graphite);line-height:1.45}
/* On a phone you're already holding the device — the store buttons are enough. */
@media (max-width:920px){.qr-hint{display:none}}

/* ---------- phone mockup ---------- */
.hero__art{display:flex;justify-content:center}
.phone{
  width:300px;max-width:82vw;aspect-ratio:300/620;
  background:#0b0b0c;border-radius:52px;padding:12px;position:relative;
  box-shadow:
    0 40px 90px -30px rgba(10,10,10,.5),
    0 10px 28px -14px rgba(10,10,10,.35),
    inset 0 0 0 1.5px #2a2a2e;
}
/* Dynamic Island */
.phone::before{content:"";position:absolute;top:25px;left:50%;transform:translateX(-50%);width:92px;height:27px;background:#000;border-radius:16px;z-index:5}
.phone__screen{width:100%;height:100%;background:var(--paper);border-radius:40px;overflow:hidden}

/* ---------- store "coming soon" ---------- */
.store--soon{opacity:.45;cursor:default}
.store--soon:hover{transform:none}

/* ---------- screenshot carousel ---------- */
.carousel{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
/* Screenshots already include their own status bar + Dynamic Island. */
.phone--shots::before{display:none}
.phone--shots .phone__screen{background:var(--fill)}
.shots__track{
  display:flex;margin:0;padding:0;list-style:none;width:100%;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
}
.shots__track::-webkit-scrollbar{display:none}
.shot{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;margin:0}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

.carousel__ui{display:flex;align-items:center;justify-content:center;gap:16px}
.carousel__caption{
  font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);
  text-align:center;min-width:210px;margin:0;
}
.carousel__arrow{
  width:36px;height:36px;flex:none;border-radius:50%;border:1.5px solid var(--hair);
  background:var(--paper);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px;
  transition:border-color .15s ease,transform .12s ease;
}
.carousel__arrow:hover{border-color:var(--ink);transform:translateY(-1px)}
.carousel__arrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dots{display:flex;gap:9px;justify-content:center}
.dot{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;
  background:var(--hair);cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.dot:hover{background:var(--mist)}
.dot[aria-selected="true"]{background:var(--ink);transform:scale(1.3)}
.dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.shots__track{scroll-behavior:auto}}
.app{padding:13px 20px 22px;text-align:left}
.statusbar{display:flex;align-items:center;justify-content:space-between;height:26px;margin-bottom:12px;padding:0 6px}
.sb-time{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--ink)}
.sb-icons{display:flex;align-items:center;gap:6px;color:var(--ink)}
.sb-ic{height:11px;width:auto;display:block;fill:currentColor}
.sb-ic--wifi .fill{fill:currentColor}
.sb-ic--wifi .stroke{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.app__greet{font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.app__month{font-family:var(--disp);font-size:21px;font-weight:600;margin-top:6px;letter-spacing:-0.02em}

.ring{position:relative;width:200px;height:200px;margin:14px auto 4px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__track{fill:none;stroke:#ECEBE8;stroke-width:14}
.ring__value{fill:none;stroke:var(--ink);stroke-width:14;stroke-linecap:round;
  transition:stroke-dasharray 1.1s cubic-bezier(.22,1,.36,1)}
.ring__tick{stroke:var(--paper);stroke-width:3;stroke-linecap:round;transform-origin:center}
.ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring__amount{font-family:var(--disp);font-size:34px;font-weight:700;letter-spacing:-0.03em}
.ring__cap{font-family:var(--disp);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);margin-top:4px}
.ring__goal{font-size:12px;color:var(--graphite);margin-top:5px}
.app__status{text-align:center;font-family:var(--disp);font-weight:600;font-size:13px;margin:12px 0 16px}

.cells{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cell{background:var(--fill);border-radius:var(--r-s);padding:12px 13px}
.cell span{display:block;font-size:9px;font-family:var(--disp);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.cell strong{font-family:var(--disp);font-size:19px;font-weight:700;margin-top:4px;display:block;letter-spacing:-0.02em}
.cell--ink{background:var(--ink)}
.cell--ink span{color:rgba(255,255,255,.55)}
.cell--ink strong{color:var(--paper)}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.pillar{padding:34px 26px 34px 24px;border-right:1px solid var(--hair)}
.pillar:first-child{padding-left:0}
.pillar:last-child{border-right:0}
.pillar__k{font-family:var(--disp);font-size:12px;font-weight:600;color:var(--mist);letter-spacing:.1em}
.pillar h3{font-size:22px;font-weight:600;margin:10px 0 6px}
.pillar p{font-size:14px;color:var(--graphite)}

/* ============================================================
   METHOD
   ============================================================ */
.method{padding-block:clamp(64px,9vw,120px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.step{border:1.5px solid var(--hair);border-radius:var(--r);padding:32px 28px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.step:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 24px 50px -30px rgba(10,10,10,.4)}
.step__num{font-family:var(--disp);font-weight:700;font-size:22px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);border-radius:50%}
.step h3{font-size:22px;font-weight:600;margin:22px 0 10px}
.step p{color:var(--graphite);font-size:15px}

/* ============================================================
   FEATURES
   ============================================================ */
.features{padding-block:clamp(48px,7vw,96px);background:var(--fill)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.feature{background:var(--paper);border-radius:var(--r);padding:30px 28px;border:1px solid var(--hair);transition:transform .2s ease,box-shadow .2s ease}
.feature:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(10,10,10,.4)}
.feature__icon{width:52px;height:52px;border-radius:15px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feature__icon svg{width:26px;height:26px;fill:none;stroke:var(--paper);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:20px;font-weight:600;margin-bottom:9px}
.feature p{color:var(--graphite);font-size:15px}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{padding-block:clamp(64px,9vw,120px);text-align:center}
.quote blockquote{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3.6vw,40px);line-height:1.25;letter-spacing:-0.02em;max-width:880px;margin-inline:auto}
.quote__by{margin-top:24px;color:var(--mist);font-family:var(--disp);font-size:14px;letter-spacing:.04em}

/* ============================================================
   PREMIUM (dark)
   ============================================================ */
.premium{background:var(--ink);color:var(--paper);padding-block:clamp(64px,9vw,120px)}
.premium__lede{text-align:center;max-width:620px;margin:20px auto 0;color:rgba(255,255,255,.66);font-size:17px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin:52px auto 0}
.plan{background:#141414;border:1px solid #2a2a2a;border-radius:var(--r);padding:34px 30px;position:relative}
.plan--pro{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.plan__tag{position:absolute;top:-13px;left:30px;background:var(--ink);color:var(--paper);border:1.5px solid var(--paper);font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan__name{font-size:22px;font-weight:600}
.plan__price{font-family:var(--disp);font-size:34px;font-weight:700;margin:8px 0 22px;letter-spacing:-0.02em}
.plan__price span{display:block;font-size:13px;font-weight:500;color:var(--mist);letter-spacing:0;margin-top:2px}
.plan--pro .plan__price span{color:var(--graphite)}
.plan__list{list-style:none;display:flex;flex-direction:column;gap:13px}
.plan__list li{position:relative;padding-left:28px;font-size:15px;color:rgba(255,255,255,.8)}
.plan--pro .plan__list li{color:var(--ink-2)}
.plan__list li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.7}
.premium__note{text-align:center;max-width:620px;margin:34px auto 0;color:rgba(255,255,255,.4);font-size:13px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-block:clamp(64px,9vw,120px)}
.faq__list{max-width:780px;margin:48px auto 0}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{font-family:var(--disp);font-weight:600;font-size:19px;padding:24px 40px 24px 0;cursor:pointer;position:relative;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--mist);transition:transform .2s}
.qa[open] summary::after{content:"\2013"}
.qa p{padding:0 40px 26px 0;color:var(--graphite);font-size:16px;max-width:680px}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--canvas);padding-block:clamp(64px,9vw,110px)}
.cta__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__mark{border-radius:50%;margin-bottom:22px}
.cta h2{font-size:clamp(30px,4.6vw,52px);font-weight:700;letter-spacing:-0.03em}
.cta p{margin-top:16px;color:var(--graphite);font-size:18px;max-width:480px}
.cta .stores{margin-top:32px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--paper);padding-block:56px 30px}
.footer__inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid #2a2a2a}
.footer__brand{display:flex;flex-direction:column;gap:0}
.footer__brand img{border-radius:50%}
.footer__brand .brand__word{margin-top:12px;color:var(--paper)}
.footer__tag{color:var(--mist);font-size:14px;margin-top:6px}
.footer__links{display:flex;flex-wrap:wrap;gap:14px 28px;align-content:flex-start;max-width:520px}
.footer__links a{color:rgba(255,255,255,.7);font-size:15px;transition:color .15s}
.footer__links a:hover{color:var(--paper)}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;color:var(--mist);font-size:13px}
.footer__jp{font-family:var(--disp);letter-spacing:.04em}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero__sub{margin-inline:auto}
  .stores{justify-content:center}
  .hero__art{order:-1}
  .pillars{grid-template-columns:1fr 1fr}
  .pillar{border-right:0;padding:26px 20px}
  .pillar:nth-child(odd){border-right:1px solid var(--hair)}
  .pillar:nth-child(1),.pillar:nth-child(2){border-bottom:1px solid var(--hair)}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan--pro{order:-1}
  .footer__inner{flex-direction:column;gap:28px}
}