:root{
  --ink:#0a0a0b;
  --ink-2:#121316;
  --panel:#17181c;
  --line:#2a2c31;
  --gray:#7a818a;
  --gray-2:#a6adb4;
  --paper:#e7ebee;
  --paper-dim:#aeb4ba;
  --orange:#ff6108;
  --orange-soft:#ff8a3d;
  --sky:#f4d9a0;
  --board:#101113;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:'Spline Sans Mono',monospace}

/* ---- nav ---- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em;font-size:15px}
.brand-logo{height:44px;width:auto;mix-blend-mode:lighten}
.brand .qmark{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--gray);position:relative;flex:none;
}
.brand .qmark::after{
  content:"";position:absolute;width:7px;height:2px;background:var(--gray);
  bottom:3px;right:1px;transform:rotate(45deg);border-radius:2px;
}
.brand .qmark::before{
  content:"";position:absolute;inset:-6px -6px auto -6px;height:9px;
  border-top:2px solid var(--orange);border-radius:50%;
}
.nav-links{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:500;color:var(--paper-dim)}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:var(--paper)}
.nav-cta{
  background:var(--orange);color:#1a0d03;font-weight:700;
  padding:9px 16px;border-radius:7px;font-size:13.5px;
  transition:transform .12s,background .15s;
}
.nav-cta:hover{background:var(--orange-soft);transform:translateY(-1px)}
.nav-toggle{display:none}

/* ---- hero ---- */
.hero{position:relative;padding:0 0 56px;text-align:center;overflow:hidden}
.hero-logo{
  width:clamp(260px,40vw,440px);margin:0 auto 10px;
  mix-blend-mode:lighten;
}
.hero-cover{
  width:100%;display:block;margin:0 0 32px;
  position:relative;z-index:1;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% -10%, rgba(255,97,8,.16), transparent 55%);
  pointer-events:none;
}
.eyebrow{
  font-family:'Spline Sans Mono',monospace;font-size:12.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--orange);margin-bottom:22px;margin-top:4px;
}
.hero h1{
  font-size:clamp(38px,7vw,80px);font-weight:900;line-height:.98;
  letter-spacing:-.02em;max-width:14ch;margin:0 auto 22px;
}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lede{
  font-size:clamp(16px,2vw,20px);color:var(--paper-dim);max-width:52ch;
  margin:0 auto 38px;line-height:1.55;
}

/* ---- split-flap board (signature) ---- */
.board{
  margin:0 auto 30px;max-width:760px;
  background:linear-gradient(180deg,#1d1f24 0%, #131418 100%);
  border:1px solid #3c3f47;border-radius:14px;
  padding:18px 20px 16px;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 0 6px rgba(255,255,255,.015);
}
.board-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray-2);
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.board-head .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--orange);margin-right:7px;box-shadow:0 0 9px var(--orange);
  animation:blink 2.2s infinite}
@keyframes blink{0%,70%{opacity:1}85%{opacity:.25}100%{opacity:1}}
.flap-row{display:flex;align-items:center;gap:4px;justify-content:center;flex-wrap:nowrap}
.flap{
  font-family:'Spline Sans Mono',monospace;font-weight:600;
  width:clamp(26px,5.2vw,46px);height:clamp(38px,7vw,64px);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,4vw,38px);
  background:linear-gradient(#222428 0 49.5%, #1a1c20 50.5% 100%);
  border-radius:5px;color:var(--paper);
  position:relative;flex:none;
  box-shadow:inset 0 0 0 1px #000, 0 1px 0 rgba(255,255,255,.04);
}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(0,0,0,.6)}
.flap.gap{background:none;box-shadow:none;width:clamp(10px,2vw,18px)}
.flap.lit{color:var(--orange)}
.board-foot{
  font-family:'Spline Sans Mono',monospace;font-size:11px;
  color:var(--gray-2);text-align:center;margin-top:14px;letter-spacing:.1em;
}

.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.btn-store{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--paper);color:#0a0a0b;border-radius:11px;
  padding:13px 22px;font-weight:700;transition:transform .12s;
}
.btn-store:hover{transform:translateY(-2px)}
.btn-store svg{width:24px;height:24px}
.btn-store .small{font-size:10.5px;font-weight:500;display:block;line-height:1;color:#444}
.btn-store .big{font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.01em}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);color:var(--paper);border-radius:11px;
  padding:13px 22px;font-weight:600;font-size:15px;transition:border-color .15s,background .15s;
}
.btn-ghost:hover{border-color:var(--gray-2);background:var(--ink-2)}

/* ---- section scaffolding ---- */
section{position:relative}
.sec-label{
  display:flex;align-items:center;gap:14px;margin-bottom:30px;
  font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gray-2);
}
.sec-label::before{content:"";width:34px;height:1px;background:var(--orange)}

/* ---- flagship feature ---- */
.flagship{padding:90px 0;border-top:1px solid var(--line)}
.flag-top{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-bottom:48px}
.flag-copy h2{font-size:clamp(30px,4.2vw,50px);font-weight:900;letter-spacing:-.02em;line-height:1.02;margin-bottom:20px}
.flag-copy .tag{
  display:inline-block;font-family:'Spline Sans Mono',monospace;font-size:12px;
  color:var(--sky);border:1px solid #3a3320;background:#1c1810;border-radius:999px;
  padding:5px 13px;margin-bottom:22px;letter-spacing:.08em;
}
.flag-copy p{color:var(--paper-dim);font-size:16.5px;margin-bottom:24px;max-width:46ch}
.feat-list{list-style:none;margin:6px 0 0;display:grid;gap:13px;align-content:start}
.feat-list li{display:flex;gap:12px;font-size:15px;color:var(--paper)}
.feat-list li::before{content:"›";color:var(--orange);font-weight:800;font-size:18px;line-height:1.3}
/* real screenshot showcase */
.shotframe{margin:0}
.shotframe img{
  width:100%;border-radius:14px;display:block;
  border:1px solid var(--line);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02);
}
.shotframe figcaption{
  font-family:'Spline Sans Mono',monospace;font-size:12px;color:var(--gray-2);
  letter-spacing:.04em;text-align:center;margin-top:16px;
}

/* ---- studio strip ---- */
.studio{padding:86px 0;border-top:1px solid var(--line);background:var(--ink-2)}
.studio-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
.studio h2{font-size:clamp(26px,3.6vw,40px);font-weight:900;letter-spacing:-.02em;margin-bottom:18px;line-height:1.05}
.studio p{color:var(--paper-dim);font-size:16.5px;margin-bottom:16px;max-width:50ch}
.studio .pull{color:var(--paper);font-weight:600}
.principles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.principle{background:var(--ink);padding:22px 22px}
.principle .n{font-family:'Spline Sans Mono',monospace;font-size:12px;color:var(--orange);letter-spacing:.1em}
.principle h3{font-size:17px;font-weight:700;margin:8px 0 6px}
.principle p{font-size:14px;color:var(--gray-2);margin:0;max-width:none}

/* ---- support ---- */
.support{padding:86px 0;border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.faq{border:1px solid var(--line);border-radius:12px;background:var(--ink-2);overflow:hidden}
.faq summary{
  cursor:pointer;padding:18px 20px;font-weight:600;font-size:15.5px;
  display:flex;justify-content:space-between;align-items:center;list-style:none;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--orange);font-size:22px;font-weight:400;transition:transform .2s;flex:none}
.faq[open] summary .plus{transform:rotate(45deg)}
.faq .body{padding:0 20px 18px;color:var(--paper-dim);font-size:14.5px;line-height:1.6}
.faq .body a{color:var(--orange-soft);text-decoration:underline;text-underline-offset:2px}
.support-direct{
  margin-top:30px;border:1px dashed var(--line);border-radius:12px;padding:24px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.support-direct .mono{color:var(--gray-2);font-size:14px}
.support-direct b{color:var(--paper)}
.mail-btn{background:var(--orange);color:#1a0d03;font-weight:700;padding:11px 20px;border-radius:9px;font-size:14.5px;transition:background .15s}
.mail-btn:hover{background:var(--orange-soft)}

/* ---- legal / content sub-pages ---- */
.subhero{padding:64px 0 38px;border-bottom:1px solid var(--line);position:relative}
.subhero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% -10%, rgba(255,97,8,.12), transparent 55%);
  pointer-events:none;
}
.subhero h1{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.02}
.subhero .updated{font-family:'Spline Sans Mono',monospace;font-size:12.5px;color:var(--gray-2);margin-top:16px;letter-spacing:.04em}
.prose{padding:46px 0 84px;max-width:780px}
.prose h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:36px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16px;font-weight:700;margin:20px 0 8px}
.prose p{color:var(--paper-dim);font-size:15.5px;margin-bottom:14px;line-height:1.66}
.prose ul{color:var(--paper-dim);font-size:15.5px;margin:0 0 16px 1.15em;line-height:1.66}
.prose li{margin-bottom:7px}
.prose a{color:var(--orange-soft);text-decoration:underline;text-underline-offset:2px}
.prose b,.prose strong{color:var(--paper)}
.prose .lead{color:var(--paper);font-size:17px;font-weight:600;margin-bottom:22px}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:13.5px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;color:var(--paper-dim);vertical-align:top}
.prose th{color:var(--paper);font-weight:700;background:var(--ink-2)}
.prose .note{border-left:2px solid var(--orange);background:var(--ink-2);padding:14px 18px;border-radius:0 8px 8px 0;color:var(--gray-2);font-size:14px;margin:18px 0}
.back-link{display:inline-block;margin-bottom:8px;font-family:'Spline Sans Mono',monospace;font-size:13px;color:var(--gray-2)}
.back-link:hover{color:var(--paper)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--ink-2)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-logo{max-width:220px}
.foot-logo img{border-radius:10px;border:1px solid var(--line)}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h4{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray-2);margin-bottom:14px}
.foot-col a{display:block;color:var(--paper-dim);font-size:14px;margin-bottom:10px;transition:color .15s}
.foot-col a:hover{color:var(--paper)}
.foot-base{margin-top:42px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:var(--gray)}

/* ---- responsive ---- */
@media(max-width:860px){
  .nav-links{display:none}
  .flag-top,.studio-grid{grid-template-columns:1fr;gap:32px}
  .faq-grid{grid-template-columns:1fr}
}
/* phones: the 13 split-flap cells must fit inside the board (no horizontal overflow) */
@media(max-width:480px){
  .board{padding:14px 10px 12px}
  .flap-row{gap:2px}
  .flap{
    width:clamp(13px,5.2vw,26px);
    height:clamp(22px,8vw,40px);
    font-size:clamp(11px,4.4vw,22px);
    border-radius:4px;
  }
  .flap.gap{width:clamp(5px,2vw,12px)}
  .board-head{font-size:10px;letter-spacing:.1em}
  .board-foot{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* ---- official App Store badge (Apple artwork, unaltered) ---- */
.appstore{display:inline-flex;align-items:center;transition:transform .12s}
.appstore:hover{transform:translateY(-2px)}
.appstore img{height:56px;width:auto;display:block}