/* Otto card store. A dark stage the card turns in, then cream below it. */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── header ─────────────────────────────────────────────────────────── */
.top.dark{background:transparent;border:0;position:absolute;top:0;left:0;right:0;z-index:5;
  padding:16px 20px;backdrop-filter:none}
.top.dark .wm{color:#F9F4E8;font-size:25px;text-decoration:none}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border:1.5px solid rgba(249,244,232,.35);border-radius:999px;
  font:700 14px 'Red Hat Text',sans-serif;color:#F9F4E8;text-decoration:none;transition:.18s}
.pill:hover{border-color:var(--flame);background:var(--flame);color:#fff}

/* ── the stage ──────────────────────────────────────────────────────── */
.stage{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%, #2A1B10 0%, #150E08 42%, #0B0805 100%);
  color:#F9F4E8;padding:86px 20px 46px;display:grid;gap:22px;grid-template-columns:1fr;
  justify-items:center;text-align:center}
@media(min-width:940px){
  .stage{grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;text-align:left;
    justify-items:stretch;padding:100px 48px 80px;max-width:1180px;margin:0 auto;border-radius:0}
  .stage .pitch{order:2}
  .stage .scene{order:1}
}
/* the light behind the card */
.glow{position:absolute;left:50%;top:34%;width:min(760px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,95,30,.30) 0%,rgba(255,159,0,.13) 34%,transparent 66%);
  pointer-events:none;filter:blur(6px)}
@media(min-width:940px){.glow{left:30%;top:50%}}

/* ── the card in three dimensions ───────────────────────────────────── */
.scene{perspective:1400px;width:min(88vw,392px);aspect-ratio:1.586;position:relative;z-index:2;
  cursor:grab;touch-action:pan-y}
.scene.dragging{cursor:grabbing}
.card3d{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(8deg) rotateY(var(--spin,0deg));
  animation:turn 16s linear infinite;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.62))}
.scene.held .card3d,.scene:hover .card3d{animation-play-state:paused}
@keyframes turn{from{transform:rotateX(8deg) rotateY(0deg)}to{transform:rotateX(8deg) rotateY(360deg)}}

.face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;overflow:hidden;
  padding:22px 24px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(255,255,255,.10)}
.front{background:linear-gradient(146deg,#241A12 0%,#0E0B08 46%,#1A1109 100%)}
.back{transform:rotateY(180deg);background:linear-gradient(146deg,#15100B 0%,#0B0806 55%,#1E1409 100%)}
.face-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;position:relative;z-index:2}
.cwm{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:27px;letter-spacing:-.04em;color:#F9F4E8;line-height:1}
.cwm .dot{color:var(--flame)}
.ctag{font:500 10px 'Red Hat Text',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(249,244,232,.5);text-align:right;line-height:1.5}
.bq{font-family:'Red Hat Display',sans-serif;font-weight:800;font-size:19px;line-height:1.15;
  letter-spacing:-.02em;color:#F9F4E8;margin:0 auto 0 0;max-width:13ch;position:relative;z-index:2}
.back{justify-content:space-between;padding-top:26px}
/* the contact chip and the tap arcs */
.face .chip{position:absolute;left:24px;top:22px;width:40px;height:31px;border-radius:6px;
  background:linear-gradient(135deg,#E8B558,#A8792C 48%,#F0CE86);opacity:.92}
.face .chip::after{content:"";position:absolute;inset:5px 7px;border:1px solid rgba(0,0,0,.28);border-radius:3px}
.face .nfc{position:absolute;right:22px;top:20px;width:26px;height:26px;stroke:var(--flame);opacity:.95}
/* light travelling across the surface */
.sheen{position:absolute;inset:-40%;background:linear-gradient(103deg,transparent 38%,
  rgba(255,214,160,.20) 46%,rgba(255,255,255,.42) 50%,rgba(255,180,110,.18) 55%,transparent 63%);
  animation:sweep 16s linear infinite;pointer-events:none}
@keyframes sweep{0%,100%{transform:translateX(-42%)}50%{transform:translateX(42%)}}

/* ── the pitch on the stage ─────────────────────────────────────────── */
.stage .pitch{position:relative;z-index:3;max-width:34rem}
.stage h1{font-family:'Red Hat Display',sans-serif;font-weight:900;letter-spacing:-.03em;
  font-size:clamp(32px,7.2vw,54px);line-height:1;margin:0 0 14px;color:#fff}
.stage h1 span{display:block;color:var(--amber);font-size:.72em;margin-top:.16em}
.stage .lede{font-size:clamp(16px,2vw,18.5px);line-height:1.5;color:rgba(249,244,232,.72);
  margin:0 0 20px;max-width:36ch}
@media(min-width:940px){.stage .lede{margin-left:0}}
.stage .price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 10px;
  margin:0 0 16px;font-size:15.5px;color:rgba(249,244,232,.7)}
@media(min-width:940px){.stage .price{justify-content:flex-start}}
.stage .price strong{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:32px;
  color:#fff;letter-spacing:-.02em}
.stage .price span{font-family:'Red Hat Display',sans-serif;font-weight:800;font-size:16.5px;
  color:var(--amber);letter-spacing:-.01em}
.stage .price em{font-style:normal;font-size:13px;color:rgba(249,244,232,.45);flex-basis:100%}
@media(min-width:940px){.stage .price em{flex-basis:auto}}
.stage .btn-flame{width:100%;max-width:340px;min-height:56px;font-size:17px;
  box-shadow:0 14px 34px -12px rgba(255,95,30,.6)}
@media(min-width:940px){.stage .btn-flame{width:auto;min-width:280px}}
.stage .micro{font-size:13px;color:rgba(249,244,232,.45);margin:12px 0 0;max-width:34ch}
@media(min-width:940px){.stage .micro{margin-left:0}}
@media(max-width:939px){.stage .lede,.stage .micro{margin-left:auto;margin-right:auto}}

/* ── strips ─────────────────────────────────────────────────────────── */
.strip{max-width:1080px;margin:0 auto;padding:52px 20px}
.strip + .strip{border-top:1px solid var(--line)}
.strip h2{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:clamp(24px,3.6vw,34px);
  letter-spacing:-.025em;margin:0 0 22px}
.strip p{margin:0 0 12px;max-width:56ch}

.range .grid{list-style:none;padding:0;margin:0;display:grid;gap:2px;grid-template-columns:1fr;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(min-width:700px){.range .grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.range .grid{grid-template-columns:repeat(3,1fr)}}
.range li{background:var(--paper);padding:20px 22px;margin:0;font-size:15.5px;color:var(--ink-70);line-height:1.5}
.range b{display:block;font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:17.5px;
  color:var(--ink);margin-bottom:5px;letter-spacing:-.01em}

/* ── the vision, where the mascot lives ─────────────────────────────── */
.vision{background:#FBEEDD;--seam:#FBEEDD;display:grid;grid-template-columns:1fr;gap:0;align-items:end}
@media(min-width:820px){.vision{grid-template-columns:.85fr 1.15fr;gap:20px;max-width:1180px;margin:0 auto;
  padding-right:48px;align-items:center}}
.vision .mascot{width:min(74%,300px);height:auto;display:block;margin:14px auto -6px;
  -webkit-mask-image:radial-gradient(115% 108% at 50% 46%,#000 62%,transparent 98%);
  mask-image:radial-gradient(115% 108% at 50% 46%,#000 62%,transparent 98%)}
@media(min-width:820px){.vision .mascot{width:100%;max-width:360px;margin:0 auto -4px}}
.vision > div{padding:6px 20px 46px}
@media(min-width:820px){.vision > div{padding:56px 0}}
.vision h2{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:clamp(25px,3.8vw,36px);
  letter-spacing:-.025em;margin:0 0 14px;max-width:16ch}
.vision p{margin:0 0 14px;max-width:52ch;color:#4A4034}
.vision .by{font-size:14.5px;color:#8A7B67;margin-top:20px}

/* ── second card ────────────────────────────────────────────────────── */
.second{display:grid;gap:26px;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:760px){.second{grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}}
.ship{font-size:14px;color:var(--ink-50);margin-bottom:14px !important}
.second .btn{width:100%}
@media(min-width:520px){.second .btn{width:auto;min-width:250px}}
.minicard{position:relative;width:min(100%,330px);aspect-ratio:1.586;border-radius:14px;
  background:linear-gradient(146deg,#241A12,#0E0B08 55%,#1A1109);display:flex;align-items:flex-end;
  padding:18px 20px;box-shadow:0 20px 40px -20px rgba(0,0,0,.55);justify-self:center}
.minicard span{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:19px;line-height:1.05;
  color:#F9F4E8;max-width:11ch;letter-spacing:-.02em}
.minicard .nfc{position:absolute;right:17px;top:16px;width:21px;height:21px;stroke:var(--flame)}

/* ── plan ───────────────────────────────────────────────────────────── */
.plan hr{border:0;height:1px;background:var(--line);margin:22px 0 16px}
.link{background:none;border:0;padding:0;font:700 16px 'Red Hat Text',sans-serif;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:var(--flame);cursor:pointer}
.link:hover{color:var(--flame)}

/* ── footer ─────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#8C8272;padding:30px 20px 42px;text-align:center}
.foot p{margin:0 0 6px;font-size:13px}
.foot a{color:var(--amber)}
.foot .assistant{margin-top:12px;color:#5E574C}

/* ── sticky bar ─────────────────────────────────────────────────────── */
.stickybar[hidden]{display:none}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,253,246,.97);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -18px rgba(0,0,0,.5)}
.stickybar strong{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:23px}
.stickybar .btn{padding:11px 22px;min-height:46px}
@media(min-width:940px){.stickybar{display:none}}

/* ── the two small pages ────────────────────────────────────────────── */
.simple{max-width:640px;margin:0 auto;padding:30px 20px 60px}
.simple h1{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:clamp(30px,6vw,42px);
  letter-spacing:-.025em;margin:0 0 12px;line-height:1.02}
.simple h2{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:22px;margin:30px 0 8px}
.simple h3{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:18px;margin:26px 0 6px;color:var(--ink)}
.simple p{margin:0 0 14px;color:var(--ink-70);max-width:60ch}
.simple .lede{font-size:18px;color:var(--ink)}
.codeform{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.codeform input{flex:1 1 220px;min-height:52px;padding:0 16px;border:2px solid var(--line);border-radius:999px;
  font:700 17px 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--ink)}
.codeform input:focus{outline:none;border-color:var(--flame)}
.codeform .btn{min-height:52px}
.simple .micro{font-size:13.5px;color:var(--ink-50)}

/* Motion is decoration. Without it the card simply sits at a good angle. */
@media(prefers-reduced-motion:reduce){
  .card3d{animation:none;transform:rotateX(8deg) rotateY(-18deg)}
  .sheen{animation:none;opacity:.25}
  *{transition:none !important}
}