/* aethoscounter.com, next homepage draft (localhost only).
   Rift Record look: Rift Blue ground, hex circuitry, condensed titles,
   Nunito text, rounded numerals, gold as chrome, square plates, one border. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Caveat:wght@700&family=M+PLUS+Rounded+1c:wght@800;900&family=Nunito:wght@500;600;700;800;900&display=swap");

:root {
  --ground: #030812; --ground-hi: #091428; --ground-light: #0F2440; --arcane: #0AC8B9;
  --gold: #C8AA6E; --gold-light: #F0E6D2; --gold-mid: #D8B56E; --gold-dark: #785A28; --victory: #F4C660;
  --ink: #F0E6D2; --ink2: #CFC8B8; --mute: #A09B8C; --dim: #5B5A56; --hair: rgba(240,230,210,.09);
  --f-title: "DIN Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-num: "M PLUS Rounded 1c", "Nunito", system-ui, sans-serif;
  --f-read: "Nunito", system-ui, -apple-system, sans-serif;
  --f-hand: "Caveat", "Bradley Hand", cursive;
  --frame: linear-gradient(180deg, #C8AA6E, #785A28);
  --gold-type: linear-gradient(180deg, #F6EBD3 10%, #C8AA6E 65%, #8C6A33 100%);
  --plate: linear-gradient(180deg, #0c1a33, #050c18);
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97'%3E%3Cpath d='M42 1L83 25L83 72L42 96L1 72L1 25Z M42 25L62 37 M42 25L42 1 M22 37L42 25 M62 37L62 60L83 72' fill='none' stroke='%236EBEE6' stroke-opacity='.2' stroke-width='.8'/%3E%3Cg fill='%230AC8B9' fill-opacity='.3'%3E%3Ccircle cx='62' cy='37' r='1.6'/%3E%3Ccircle cx='22' cy='37' r='1.6'/%3E%3Ccircle cx='62' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --hex-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97'%3E%3Cpath d='M42 1L83 25L83 72L42 96L1 72L1 25Z M42 25L62 37 M42 25L42 1 M22 37L42 25 M62 37L62 60L83 72' fill='none' stroke='%236EBEE6' stroke-opacity='.07' stroke-width='.8'/%3E%3Cg fill='%230AC8B9' fill-opacity='.1'%3E%3Ccircle cx='62' cy='37' r='1.6'/%3E%3Ccircle cx='22' cy='37' r='1.6'/%3E%3Ccircle cx='62' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  --wrap: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 500 17px/1.6 var(--f-read); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--gold-mid); text-underline-offset: 3px; }
::selection { background: rgba(200,170,110,.35); color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.g { background: var(--gold-type); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h1, h2, h3 { font-family: var(--f-title); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: 0; }
h2 { font-size: clamp(40px, 5.4vw, 64px); }
h3, .h3 { font-size: clamp(28px, 3vw, 36px); }
p { margin: 0; color: var(--ink2); }

/* eyebrow: gold words between two rules */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 14px/1 var(--f-read); color: var(--gold-mid); letter-spacing: .02em; }
.eyebrow::before, .eyebrow::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, rgba(200,170,110,0), rgba(200,170,110,.7)); }
.eyebrow::after { background: linear-gradient(90deg, rgba(200,170,110,.7), rgba(200,170,110,0)); }
.eyebrow.left::before { display: none; }

/* plates and devices */
.plate { position: relative; background: var(--plate); border: 1px solid rgba(200,170,110,.28); }
.phone { position: relative; width: 280px; aspect-ratio: 1206 / 2622; border-radius: 42px; padding: 9px; background: linear-gradient(160deg, #2a2f3a, #0b0e14 40%, #1d2129); box-shadow: 0 0 0 1px rgba(240,230,210,.12), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 120px -40px rgba(200,170,110,.35); }
.phone > img, .phone > video { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: #000; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 10px; text-decoration: none; color: var(--gold-light); border: 1px solid transparent; background: linear-gradient(var(--ground-hi), var(--ground-hi)) padding-box, var(--frame) border-box; box-shadow: inset 0 0 0 1px rgba(200,170,110,.14); transition: background .15s; }
.btn:hover { background: linear-gradient(#0c1a33, #0c1a33) padding-box, var(--frame) border-box; }
.btn svg { flex: none; }
.btn .t { display: flex; flex-direction: column; line-height: 1; }
.btn .t small { font: 700 11px/1 var(--f-read); color: var(--mute); letter-spacing: .04em; }
.btn .t b { font: 700 22px/1 var(--f-title); padding-top: 3px; }
.btn.quiet { padding: 10px 16px 8px; font: 700 18px/1 var(--f-title); }

/* ------------------------------------------------------------ nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(3,8,18,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 24px/1 var(--f-title); letter-spacing: .06em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a { color: var(--ink2); text-decoration: none; font: 700 15px/1 var(--f-read); }
.nav-links a:hover { color: var(--gold-light); }
@media (max-width: 860px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ----------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: 72px 0 40px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(/matches/art/duel/kai-sa.webp) right 20% / cover no-repeat; opacity: .32; mask-image: linear-gradient(90deg, transparent 15%, #000 70%), linear-gradient(transparent 60%, #000); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hex-soft) 0 0 / 84px 97px, radial-gradient(90% 70% at 25% 30%, rgba(9,20,40,.2), var(--ground) 80%); opacity: .9; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(54px, 7.6vw, 104px); line-height: .92; }
.hero h1 .strike { position: relative; display: inline-block; color: var(--mute); }
.hero h1 .strike::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 6px; background: var(--victory); transform: rotate(-4deg); border-radius: 3px; box-shadow: 0 0 18px rgba(244,198,96,.5); }
.scribble { display: block; font: 700 clamp(30px, 3.6vw, 44px)/1 var(--f-hand); color: var(--victory); transform: rotate(-3deg); margin: 6px 0 0 6px; }
.hero .claim { margin: 22px 0 0; font: 700 clamp(24px, 2.5vw, 30px)/1.15 var(--f-title); color: var(--ink); max-width: 20em; }
.hero .lede { margin: 16px 0 0; font-size: 19px; max-width: 34em; }
.hero .lede b { color: var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font: 700 14px/1 var(--f-read); color: var(--mute); }
.ticks span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--arcane); transform: rotate(45deg); margin-right: 9px; vertical-align: 2px; }
.rating { margin-top: 20px; font: 700 14px/1 var(--f-read); color: var(--mute); }
.rating b { color: var(--victory); letter-spacing: 2px; margin-right: 8px; }

.stage { position: relative; height: 640px; }
.stage .phone { position: absolute; top: 0; }
.stage .p-board { left: 50%; translate: -50% 0; z-index: 3; width: 290px; }
.stage .p-binder { right: -10px; top: 70px; z-index: 2; width: 250px; }
.stage .p-deck { left: -10px; top: 70px; z-index: 1; width: 250px; }
.stage .chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font: 800 14px/1.1 var(--f-read); color: var(--ink); }
.stage .chip i { font: 900 22px/1 var(--f-num); font-style: normal; color: var(--victory); }
.stage .c1 { left: 6%; bottom: 46px; }
.stage .c2 { right: 2%; bottom: 20px; }
.stage .c3 { right: 6%; top: 12px; }
.stage .tag { position: absolute; z-index: 5; font: 700 26px/1 var(--f-hand); color: var(--victory); white-space: nowrap; }
.stage .tag.t1 { left: 50%; translate: -50% 0; top: -34px; }
.stage .tag.t2 { right: 20px; top: 34px; transform: rotate(5deg); }
.stage .tag.t3 { left: 10px; top: 52px; transform: rotate(-6deg); }
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { height: 560px; max-width: 520px; margin: 30px auto 0; width: 100%; }
  .stage .p-board { width: 240px; }
  .stage .p-binder { width: 200px; }
  .stage .p-deck { width: 200px; }
}
@media (max-width: 520px) {
  .stage { height: 470px; }
  .stage .p-board { width: 200px; }
  .stage .p-binder { width: 160px; right: 0; }
  .stage .p-deck { width: 150px; left: 0; }
  .stage .c3 { display: none; }
}

/* --------------------------------------------- three things strip */
.trio { padding: 40px 0 90px; }
.trio .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio a { display: block; text-decoration: none; padding: 26px 26px 24px; color: var(--ink); transition: border-color .15s, translate .15s; }
.trio a:hover { border-color: rgba(200,170,110,.6); translate: 0 -2px; }
.trio .n { font: 900 13px/1 var(--f-num); color: var(--gold-dark); letter-spacing: .1em; }
.trio h3 { margin-top: 10px; font-size: 34px; }
.trio p { margin-top: 8px; font-size: 16px; }
.trio .first { border-color: rgba(244,198,96,.6); box-shadow: inset 0 0 0 1px rgba(244,198,96,.15), 0 0 60px -30px rgba(244,198,96,.5); }
.trio .first .n { color: var(--victory); }
.trio .badge { display: inline-block; margin-left: 10px; padding: 3px 7px 2px; font: 800 11px/1 var(--f-read); letter-spacing: .06em; color: var(--ground); background: var(--victory); vertical-align: 6px; }
@media (max-width: 820px) { .trio .grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- chapters */
.chapter { position: relative; padding: 110px 0; border-top: 1px solid var(--hair); }
.chapter.alt { background: radial-gradient(70% 60% at 50% 0%, rgba(15,36,64,.6), transparent 70%); }
.chapter-head { max-width: 760px; }
.chapter-head .lede { margin-top: 18px; font-size: 19px; }
.chapter-head .num { font: 900 15px/1 var(--f-num); color: var(--victory); letter-spacing: .14em; margin-bottom: 14px; display: block; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 64px; }
.split.flip > :first-child { order: 2; }
.feats { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.feats li { position: relative; padding-left: 26px; color: var(--ink2); }
.feats li b { color: var(--ink); font-weight: 800; }
.feats li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.duo { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.duo .phone { width: 250px; }
.duo .phone:nth-child(2) { margin-top: 60px; }
.duo .shot { width: 260px; margin-top: 60px; border-radius: 30px 30px 0 0; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); border: 1px solid rgba(200,170,110,.35); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); }
.caption { margin-top: 12px; font: 700 13px/1.4 var(--f-read); color: var(--mute); text-align: center; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.flip > :first-child { order: 0; }
  .duo .phone { width: 46%; }
  .duo .shot { width: 52%; }
  .duo .phone:nth-child(2) { margin-top: 30px; }
}

/* the counter chapter gets the biggest room */
.board-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; align-items: start; }
.board-row figure { margin: 0; }
.board-row .phone { width: 100%; max-width: 300px; margin: 0 auto; }
.board-row figure:nth-child(2) .phone { max-width: 330px; }
.board-row figcaption { margin: 22px auto 0; max-width: 300px; }
.board-row figcaption b { display: block; font: 700 24px/1.1 var(--f-title); color: var(--ink); }
.board-row figcaption span { display: block; margin-top: 6px; font-size: 15px; color: var(--ink2); }
@media (max-width: 900px) { .board-row { grid-template-columns: 1fr; gap: 56px; } .board-row .phone { max-width: 280px; } }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border: 1px solid rgba(200,170,110,.22); background: var(--plate); }
.facts { margin-left: 0; margin-right: 0; }
.facts div { padding: 24px 22px; border-left: 1px solid var(--hair); }
.facts dd { margin: 0; }
.facts div:first-child { border-left: 0; }
.facts dt { display: block; font: 900 30px/1 var(--f-num); color: var(--victory); }
.facts dd { display: block; margin-top: 8px; font: 700 14px/1.35 var(--f-read); color: var(--ink2); }
@media (max-width: 820px) { .facts dt { font-size: 24px; } .facts { grid-template-columns: 1fr 1fr; } .facts div:nth-child(3) { border-left: 0; } .facts div:nth-child(n+3) { border-top: 1px solid var(--hair); } }

/* --------------------------------------------------- the thread */
.thread { padding: 110px 0; border-top: 1px solid var(--hair); text-align: center; }
.thread h2 { max-width: 16em; margin: 18px auto 0; }
.chain { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 56px auto 0; max-width: 1000px; text-align: left; }
.chain .plate { padding: 22px 22px 20px; }
.chain .k { font: 800 12px/1 var(--f-read); letter-spacing: .12em; color: var(--gold-mid); text-transform: uppercase; }
.chain .v { margin-top: 10px; font: 700 26px/1.08 var(--f-title); color: var(--ink); }
.chain .s { margin-top: 8px; font-size: 15px; }
.chain .arrow { align-self: center; color: var(--gold); font: 900 24px/1 var(--f-num); }
@media (max-width: 860px) { .chain { grid-template-columns: 1fr; } .chain .arrow { justify-self: center; rotate: 90deg; } }

/* --------------------------------------------------- web extra */
.desk { padding: 80px 0; border-top: 1px solid var(--hair); }
.desk .plate { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 40px; }
.desk h3 { font-size: 34px; }
.desk p { margin-top: 12px; }
.desk .links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.desk .small { margin-top: 14px; font-size: 14px; color: var(--mute); }
.desk .laptop { border: 1px solid rgba(200,170,110,.3); }
@media (max-width: 860px) { .desk .plate { grid-template-columns: 1fr; padding: 26px; } }

/* --------------------------------------------------- pricing */
.pricing { padding: 110px 0; border-top: 1px solid var(--hair); }
.pricing .head { text-align: center; max-width: 740px; margin: 0 auto; }
.pricing .head p { margin-top: 18px; font-size: 18px; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin: 54px auto 0; }
.price { padding: 32px; }
.price.hi { border-color: rgba(244,198,96,.6); box-shadow: 0 0 80px -40px rgba(244,198,96,.6); }
.price .tag { margin: 0;  font: 800 13px/1 var(--f-read); letter-spacing: .12em; color: var(--gold-mid); text-transform: uppercase; }
.price .amt { margin-top: 14px; font: 900 48px/1 var(--f-num); color: var(--ink); }
.price .amt small { font: 700 16px var(--f-read); color: var(--mute); margin-left: 6px; }
.price .sub { margin-top: 6px; font-size: 15px; color: var(--mute); }
.price ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.price li { position: relative; padding-left: 24px; font-size: 16px; color: var(--ink2); }
.price li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: var(--arcane); transform: rotate(45deg); }
.price.hi li::before { background: var(--victory); }
.price .grp { margin-top: 18px; font: 800 12px/1 var(--f-read); letter-spacing: .1em; color: var(--mute); text-transform: uppercase; }
.price .foot { margin-top: 22px; font-size: 14px; color: var(--mute); }
@media (max-width: 760px) { .price-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- faq */
.faq { padding: 100px 0; border-top: 1px solid var(--hair); }
.faq .wrap { max-width: 860px; }
.faq h2 { text-align: center; }
.faq details { border-bottom: 1px solid var(--hair); padding: 20px 0; }
.faq summary h3 { font: inherit; margin: 0; }
.faq summary { cursor: pointer; list-style: none; font: 700 24px/1.2 var(--f-title); color: var(--ink); display: flex; justify-content: space-between; gap: 20px; }
.faq summary::after { content: "+"; font: 900 22px/1 var(--f-num); color: var(--gold); }
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: 12px; }
.faq .list { margin-top: 40px; }

/* --------------------------------------------------- finale */
.finale { position: relative; padding: 130px 0; text-align: center; border-top: 1px solid var(--hair); overflow: hidden; isolation: isolate; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/matches/art/duel/akali.webp) center 30% / cover; opacity: .18; -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent); }
.finale h2 { max-width: 14em; margin: 0 auto; }
.finale p { margin: 18px auto 0; max-width: 32em; font-size: 18px; }
.finale .cta { justify-content: center; }

footer { padding: 40px 0 60px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--mute); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer a { color: var(--ink2); text-decoration: none; }
footer .legal { flex-basis: 100%; font-size: 13px; color: var(--dim); }

/* reveal on scroll, skipped for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
  .js .rv.in { opacity: 1; translate: 0 0; }
  .hero h1 .strike::after { transform-origin: left; animation: strike .5s .9s cubic-bezier(.6,0,.2,1) both; }
  .scribble { animation: write .6s 1.35s ease-out both; }
  @keyframes strike { from { transform: rotate(-4deg) scaleX(0); } to { transform: rotate(-4deg) scaleX(1); } }
  @keyframes write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
}

/* round 2 */
.chapter .num, .split .num { font: 900 15px/1 var(--f-num); color: var(--victory); letter-spacing: .14em; display: block; margin-bottom: 14px; }
.split .lede { margin-top: 18px; font-size: 19px; }
.pricing .head h2 { margin-top: 16px; }
.desk .h3 { margin-top: 14px; }
.thread .define { max-width: 760px; margin: 22px auto 0; font-size: 18px; }
.quotes { padding: 100px 0; border-top: 1px solid var(--hair); }
.quotes .head { text-align: center; }
.quotes h2 { margin-top: 16px; }
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.q-grid figure { margin: 0; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.q-grid blockquote { margin: 0; font: 600 18px/1.5 var(--f-read); color: var(--ink); }
.q-grid figcaption { font: 800 13px/1 var(--f-read); color: var(--gold-mid); letter-spacing: .04em; }
.q-grid figcaption::before { content: "★★★★★"; display: block; color: var(--victory); letter-spacing: 2px; margin-bottom: 8px; }
@media (max-width: 860px) { .q-grid { grid-template-columns: 1fr; } }
.founder { padding: 20px 0 90px; }
.founder .plate { display: flex; gap: 28px; align-items: flex-start; padding: 34px; }
.founder img { width: 72px; height: 72px; border-radius: 16px; flex: none; }
.founder p { margin-top: 12px; }
@media (max-width: 600px) { .founder .plate { flex-direction: column; padding: 24px; } }
footer .brand { font-size: 20px; }
footer .brand img { width: 24px; height: 24px; }
footer .fresh { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; color: var(--mute); }

/* mobile hero: claim and buttons first, phones right after, details below */
@media (max-width: 620px) {
  .hero { padding-top: 40px; }
  .hero .lede .more { display: none; }
  .hero .lede { font-size: 17px; }
  .cta { gap: 10px; }
  .cta .btn { flex: 1 1 0; justify-content: center; padding: 10px 10px 8px; gap: 8px; }
  .cta .btn .t b { font-size: 19px; }
  .cta .btn svg { width: 20px; height: 20px; }
  .ticks { gap: 8px 16px; font-size: 13px; }
  .stage { margin-top: 44px; }
}
.hero h1 { margin-top: 18px; }
@media (max-width: 620px) { .hero .scribble { margin-top: 2px; } .stage { margin-top: 36px; } .rating { margin-top: 14px; } }
/* round 3 */
img { height: auto; }
.phone > img { height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .duo > :nth-child(2) { display: none; }
  .duo .phone, .duo .shot { width: 72%; margin-top: 0; }
}
/* round 4: deck card in the hero instead of a cluttered phone */
.stage .poster { position: absolute; z-index: 1; left: -20px; top: 120px; width: 260px; border: 1px solid rgba(200,170,110,.45); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 80px -40px rgba(200,170,110,.4); rotate: -4deg; }
.stage .poster img { width: 100%; }
.stage .c1 { left: -2%; bottom: 8px; }
.trio h3 { margin-top: 10px; font-size: 34px; }
@media (max-width: 980px) { .stage .poster { width: 210px; } }
@media (max-width: 520px) { .stage .poster { width: 165px; left: 0; top: 110px; } .stage .c1 { left: 0; bottom: 0; } }
@media (min-width: 981px) { .stage .poster { left: -90px; } }
/* round 5 */
@media (min-width: 981px) { .stage .poster { left: -30px; } }
.hero-copy { position: relative; z-index: 6; }
.phone.top { background-color: #1d2129; }
.phone.top > img { object-fit: contain; object-position: top; background: #050b16; }
.duo .phone.top { margin-top: 60px; }
@media (max-width: 520px) { .stage .c1 { bottom: 64px; } .stage .c2 { bottom: 0; } }
/* round 6: on phones both chips sit under the phones, clear of the board */
@media (max-width: 520px) {
  .stage { height: 490px; }
  .stage .c1 { left: 0; right: auto; bottom: 0; }
  .stage .c2 { right: 0; left: auto; bottom: 0; }
  .stage .chip { padding: 8px 10px; font-size: 12px; }
  .stage .chip i { font-size: 18px; }
}

/* ===================================================== round 7: experience */
/* hero layers: each one leans a different depth toward the pointer and
   drifts apart as the page scrolls away */
.stage .layer { position: absolute; inset: 0; pointer-events: none; }
.stage .layer > * { pointer-events: auto; }
.stage .l-front { z-index: 3; } .stage .l-mid { z-index: 2; } .stage .l-back { z-index: 1; }
.stage .p-deck { left: -10px; top: 80px; width: 245px; }
.stage .tag.t3 { left: -6px; top: 46px; }
.hero::before { transition: translate .8s cubic-bezier(.2,.7,.2,1); }
html.rm .hero::before { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px + var(--sy, 0) * 120px); }
html.rm .stage { perspective: 1400px; }
html.rm .stage .layer { transition: translate .7s cubic-bezier(.2,.7,.2,1), rotate .7s cubic-bezier(.2,.7,.2,1); }
html.rm .stage .l-front { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px + var(--sy, 0) * -60px); rotate: y calc(var(--px, 0) * 6deg); }
html.rm .stage .l-mid { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 16px + var(--sy, 0) * 40px); rotate: y calc(var(--px, 0) * 8deg); }
html.rm .stage .l-back { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * 12px + var(--sy, 0) * 90px); rotate: y calc(var(--px, 0) * 8deg); }

/* hero entrance */
@keyframes rm-rise { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; translate: none; filter: none; } }
@keyframes rm-phone { from { opacity: 0; translate: 0 80px; scale: .94; } to { opacity: 1; translate: none; scale: none; } }
@keyframes rm-pop { 0% { opacity: 0; translate: 0 8px; scale: .9; } 60% { opacity: 1; translate: 0 -2px; scale: 1.04; } 100% { opacity: 1; translate: none; scale: none; } }
@keyframes rm-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
html.rm .hero-copy > * { animation: rm-rise .9s cubic-bezier(.2,.7,.2,1) both; }
html.rm .hero-copy > :nth-child(2) { animation-delay: .1s; }
html.rm .hero-copy > :nth-child(4) { animation-delay: .5s; }
html.rm .hero-copy > :nth-child(5) { animation-delay: .6s; }
html.rm .hero-copy > :nth-child(6) { animation-delay: .7s; }
html.rm .hero-copy > :nth-child(n+7) { animation-delay: .8s; }
html.rm .hero-copy > .scribble { animation: write .6s 1.35s ease-out both; }
html.rm .stage .phone { animation: rm-phone 1.1s cubic-bezier(.2,.75,.2,1) both; }
html.rm .stage .p-board { animation-delay: .2s; }
html.rm .stage .p-binder { animation-delay: .45s; }
html.rm .stage .p-deck { animation-delay: .6s; }
html.rm .stage .chip, html.rm .stage .tag { animation: rm-pop .6s cubic-bezier(.2,.8,.2,1) both; }
html.rm .stage .c1 { animation-delay: 1.2s; } html.rm .stage .c2 { animation-delay: 1.4s; }
html.rm .stage .t1 { animation-delay: 1.6s; } html.rm .stage .t2 { animation-delay: 1.75s; } html.rm .stage .t3 { animation-delay: 1.9s; }

/* gold words catch one light when they land */
html.rm .g.lit { background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,250,235,.95) 50%, rgba(255,255,255,0) 65%) 160% 0 / 250% 100% no-repeat, var(--gold-type);
  -webkit-background-clip: text; background-clip: text; animation: rm-shine 1.6s cubic-bezier(.4,0,.2,1) .3s both; }

/* reveals, stronger than the plain version */
.js .rv { opacity: 1; translate: none; }
html.rm .rv { opacity: 0; translate: 0 34px; filter: blur(4px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), filter .9s; transition-delay: var(--d, 0s); }
html.rm .rv.in { opacity: 1; translate: none; filter: none; }
html.rm .eyebrow::before, html.rm .eyebrow::after { transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
html.rm .eyebrow::before { transform-origin: right; } html.rm .eyebrow::after { transform-origin: left; }
html.rm .in .eyebrow::before, html.rm .in .eyebrow::after, html.rm .eyebrow.in::before, html.rm .eyebrow.in::after { transform: scaleX(1); }

/* phones in the chapters drift slower than the page */
html.rm .duo .phone, html.rm .board-row .phone { translate: 0 var(--dy, 0); }

/* ------------------------------------------------------------ ribbon */
.ribbon { position: relative; z-index: 1; padding: 10px 0 70px; overflow: hidden; }
.ribbon-cap { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 22px; font: 700 14px/1 var(--f-read); color: var(--gold-mid); }
.ribbon-cap::before, .ribbon-cap::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, rgba(200,170,110,0), rgba(200,170,110,.7)); }
.ribbon-cap::after { background: linear-gradient(90deg, rgba(200,170,110,.7), rgba(200,170,110,0)); }
.ribbon-row { display: flex; gap: 1px; width: max-content; background: rgba(0,0,0,.6); border-block: 1px solid rgba(180,186,197,.22); will-change: transform; }
.ribbon-row + .ribbon-row { margin-top: 14px; }
.rt, .rc { position: relative; width: clamp(130px, 12vw, 178px); aspect-ratio: 1 / 1.3; overflow: hidden; background: #0b1424; flex: none; }
.rt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .4s; }
.rt.lost img { filter: saturate(.35) brightness(.6); }
.rt::after, .rc::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 38%, rgba(0,0,0,.9)); }
.rt-plate, .rc-plate { position: absolute; z-index: 1; left: 0; right: 0; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rt-plate b, .rc-plate b { font: 900 30px/1 var(--f-num); color: var(--ink); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.rt-plate span { font: 700 19px/1 var(--f-title); color: var(--ink); padding-top: 2px; }
.rt-plate span i { font: 900 11px/1 var(--f-read); font-style: normal; color: rgba(240,230,210,.85); margin-right: 3px; }
.rt-bar { position: absolute; z-index: 1; left: 25%; right: 25%; bottom: 0; height: 3px; background: var(--victory); }
.rt.lost .rt-bar { background: rgba(209,54,57,.8); }
.rc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; scale: 1.25; transition: scale .5s cubic-bezier(.2,.7,.2,1); }
.rc-plate b { font-size: 24px; color: var(--victory); }
.rc-plate span { font: 800 12px/1 var(--f-read); color: var(--ink2); letter-spacing: .03em; }
.rt:hover img { transform: scale(1.06); filter: none; } .rc:hover img { scale: 1.32; }
@media (max-width: 899px) { .rt, .rc { width: 120px; } .rt-plate b { font-size: 24px; } .rt-plate span { font-size: 16px; } .rc-plate b { font-size: 20px; } }

/* -------------------------------------------------------------- tour */
.tour { position: relative; border-top: 1px solid var(--hair); }
.tour-pin { padding: 70px 0 60px; overflow: hidden; }
.tour-head h2 { margin-top: 14px; max-width: 18em; }
.tour-tabs { display: flex; gap: 8px; margin-top: 22px; }
.tour-tabs span { font: 800 13px/1 var(--f-read); letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px 8px; border: 1px solid rgba(200,170,110,.25); color: var(--mute); transition: all .3s; }
.tour-tabs span.on { color: var(--ground); background: var(--victory); border-color: var(--victory); }
.tour-track { display: flex; gap: 46px; padding: 46px max(24px, calc((100vw - var(--wrap)) / 2 + 24px)) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tour-track::-webkit-scrollbar { display: none; }
.stop { flex: none; width: 250px; margin: 0; scroll-snap-align: center; }
.stop .phone { width: 100%; }
.stop figcaption { margin-top: 20px; font-size: 15px; color: var(--ink2); }
.stop figcaption b { display: block; font: 700 24px/1.1 var(--f-title); color: var(--ink); margin-bottom: 6px; }
.stop[data-k="collect"] figcaption b { color: var(--gold-light); }
.tour-rail { display: none; }
.tour.pinned .tour-pin { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.tour.pinned .tour-track { overflow: visible; scroll-snap-type: none; will-change: transform; padding-right: 30vw; }
.tour.pinned .stop { width: clamp(220px, 19vw, 270px); transition: opacity .4s; opacity: calc(.35 + var(--f, 0) * .65); }
.tour.pinned .stop .phone { scale: calc(.86 + var(--f, 0) * .14); transition: scale .25s linear; }
.tour.pinned .stop.on .phone { box-shadow: 0 0 0 1px rgba(244,198,96,.55), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 120px -30px rgba(244,198,96,.55); }
.tour.pinned .tour-rail { display: block; position: relative; height: 2px; margin: 26px auto 0; width: min(var(--wrap), calc(100% - 48px)); background: var(--hair); }
.tour.pinned .tour-rail i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--k, 0)); background: linear-gradient(90deg, #785A28, #F0E6D2); }
@media (max-height: 760px) { .tour.pinned .stop { width: 200px; } .tour.pinned .stop figcaption { font-size: 14px; } }

/* the deck block sits inside the collection chapter, a step down */
.builds { margin-top: 110px; padding-top: 80px; border-top: 1px solid var(--hair); }
.h2s { font-size: clamp(34px, 4.2vw, 50px); }
.duo.one .phone { width: 270px; margin-top: 0; }
.duo2 .grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .duo2 .grid { grid-template-columns: 1fr; } }

/* the chain lights link by link as you scroll */
html.rm .chain .plate { opacity: .35; transition: opacity .5s, border-color .5s, box-shadow .5s; }
html.rm .chain .arrow { opacity: .2; transition: opacity .4s, translate .4s; translate: -6px 0; }
html.rm .chain .lit { opacity: 1; translate: none; }
html.rm .chain .plate.lit { border-color: rgba(244,198,96,.55); box-shadow: 0 0 60px -30px rgba(244,198,96,.6); }

/* pointer light: buttons glow arcane, plates catch a gold edge */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 120%), rgba(10,200,185,.38), rgba(10,200,185,0) 70%); }
.btn:hover::after { opacity: 1; }
.plate::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity .3s; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(240,230,210,.55), rgba(200,170,110,.15) 40%, rgba(200,170,110,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plate:hover::after { opacity: 1; }
.rm-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; transform-origin: left; transform: scaleX(var(--prog, 0)); background: linear-gradient(90deg, #785A28, #F0E6D2 85%, #FBF1D8); }

@media (max-width: 520px) { .stage .p-deck { width: 150px; top: 90px; } .stage .tag.t3 { display: none; } }
/* centring without translate: the entrance animation owns translate */
.stage .p-board { translate: none; left: calc(50% - 145px); }
.stage .tag.t1 { translate: none; left: calc(50% - 30px); }
@media (max-width: 980px) { .stage .p-board { left: calc(50% - 120px); } }
@media (max-width: 520px) { .stage .p-board { left: calc(50% - 100px); } }
/* the pinned tour fits the viewport height */
.tour.pinned .tour-pin { justify-content: flex-start; padding-top: max(24px, calc((100vh - 64px - (min(15vw, (100vh - 400px) * .46) * 2.17 + 330px)) / 2)); }
.tour.pinned .tour-head h2 { font-size: clamp(34px, 4vw, 52px); }
.tour.pinned .tour-tabs { margin-top: 14px; }
.tour.pinned .tour-track { padding-top: 28px; gap: 40px; }
.tour.pinned .stop { width: min(15vw, (100vh - 400px) * .46); min-width: 170px; }
.tour.pinned .stop figcaption { margin-top: 14px; font-size: 14px; }
.tour.pinned .stop figcaption b { font-size: 21px; }
/* round 8: the frame is painted around each screenshot at its own shape;
   nothing is cropped to fit the frame */
.phone { aspect-ratio: auto; height: auto; }
.phone > img, .phone > video { height: auto; object-fit: initial; display: block; }
.phone.top { aspect-ratio: 1206 / 2622; }
.phone.top > img { height: 100%; object-fit: contain; object-position: top; }
.stage .phone { top: 0; }
/* hero: side phones smaller and further out, so each one reads */
.stage .p-board { width: 280px; left: calc(50% - 140px); top: 10px; }
.stage .p-deck { width: 220px; left: -60px; top: 90px; }
.stage .p-binder { width: 220px; right: -60px; top: 90px; }
.stage .c1 { left: -40px; bottom: 30px; }
.stage .c2 { right: -40px; bottom: 30px; }
.stage .tag.t3 { left: -40px; top: 56px; }
.stage .tag.t2 { right: -20px; top: 56px; }
@media (max-width: 1180px) { .stage .p-deck { left: -20px; } .stage .p-binder { right: -20px; } .stage .c1 { left: -10px; } .stage .c2 { right: -10px; } }
@media (max-width: 980px) { .stage .p-board { width: 240px; left: calc(50% - 120px); } .stage .p-deck, .stage .p-binder { width: 190px; } .stage .p-deck { left: 0; } .stage .p-binder { right: 0; } }
@media (max-width: 520px) { .stage .p-board { width: 200px; left: calc(50% - 100px); } .stage .p-deck, .stage .p-binder { width: 150px; top: 80px; } .stage .c1 { left: 0; bottom: 0; } .stage .c2 { right: 0; bottom: 0; } }
/* round 9: the title adds, it does not cross out. "+ collection" is written
   in by hand under the printed name, so a first-time visitor reads both */
.hero h1 .plus { display: block; font: 700 .62em/1 var(--f-hand); color: var(--victory); transform: rotate(-3deg); transform-origin: left; margin: .12em 0 0 .08em; text-shadow: 0 0 24px rgba(244,198,96,.35); }
.hero h1 .plus .caret { display: inline-block; font-family: var(--f-num); font-weight: 900; font-size: .8em; translate: 0 -.06em; }
@media (prefers-reduced-motion: no-preference) {
  html.rm .hero h1 .plus { animation: write .7s 1.1s ease-out both; }
}
/* round 10: the website extras, one step below the app */
.desk h2.h3 { margin-top: 12px; }
.web-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.web-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color .2s, translate .2s; }
.web-card > img { width: 100%; aspect-ratio: 16 / 8.4; object-fit: cover; object-position: top; border-bottom: 1px solid var(--hair); }
.web-card > div { padding: 22px 24px 24px; }
.web-card .k { font: 800 12px/1 var(--f-read); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-mid); }
.web-card h3 { margin-top: 10px; font-size: 28px; }
.web-card p { margin-top: 8px; font-size: 15px; }
.web-card .go { display: inline-block; margin-top: 14px; font: 700 18px/1 var(--f-title); color: var(--gold-light); }
a.web-card:hover { border-color: rgba(200,170,110,.6); translate: 0 -2px; }
.web-card .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 820px) { .web-grid { grid-template-columns: 1fr; } }
.desk .plate.web-card { display: flex; flex-direction: column; padding: 0; gap: 0; grid-template-columns: none; align-items: stretch; }
/* round 11: the web app gets a full band; the tier list is one line */
.desk .plate.web-app { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 40px; }
.desk .web-app .h3 { margin-top: 14px; }
.desk .web-app .laptop { border: 1px solid rgba(200,170,110,.3); }
@media (max-width: 860px) { .desk .plate.web-app { grid-template-columns: 1fr; padding: 26px; } }
footer .side { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; color: var(--mute); }
footer .side a { color: var(--gold-mid); text-decoration: underline; }
/* phones: the collection chapter shows a screen right after its heading */
@media (max-width: 768px) {
  #collection .split:first-child { display: flex; flex-direction: column; gap: 0; }
  #collection .split:first-child > .rv:first-child { display: contents; }
  #collection .split:first-child .feats { order: 3; }
  #collection .split:first-child > .duo { order: 2; margin: 28px 0 4px; }
}

/* ===================================================== carried from the old homepage */
/* Match link recall: the /g/<CODE> page left a code here, so offer it back. */
.link-recall { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 640px;
  margin: 16px auto 0; padding: 12px 18px; border: 1px solid rgba(244,198,96,.45); background: rgba(244,198,96,.07); text-decoration: none; color: var(--ink); }
.link-recall[hidden] { display: none; }
.link-recall .lr-label { font-size: 14px; color: var(--mute); }
.link-recall .lr-code { font: 800 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.link-recall .lr-go { font: 700 18px/1 var(--f-title); color: var(--victory); }
@media (max-width: 520px) { .link-recall { margin: 12px 16px 0; } }

/* Sticky download dock once the hero has scrolled away. */
.dock { position: fixed; z-index: 55; left: 50%; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; text-decoration: none; color: var(--ink);
  border: 1px solid transparent; background: linear-gradient(#071226, #071226) padding-box, var(--frame) border-box; box-shadow: 0 20px 50px -14px rgba(0,0,0,.9);
  translate: -50% 140%; opacity: 0; transition: translate .4s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.dock.show { translate: -50% 0; opacity: 1; }
.dock img { width: 36px; height: 36px; border-radius: 8px; }
.dock-t { display: flex; flex-direction: column; line-height: 1.15; }
.dock-t b { font: 700 18px/1.05 var(--f-title); }
.dock-t span { font-size: 12px; color: var(--mute); }
.dock-cta { margin-left: 8px; padding: 10px 14px 8px; font: 700 17px/1 var(--f-title); color: var(--ground); background: var(--victory); }
@media (max-width: 420px) { .dock { left: 12px; right: 12px; translate: 0 140%; } .dock.show { translate: 0 0; } .dock-t b { font-size: 16px; } }

/* The web app sits next to Get the app: a lighter outline so the store button stays the main one. */
.nav .nav-web { background: none; box-shadow: none; border-color: rgba(200,170,110,.35); color: var(--ink2); }
.nav .nav-web:hover { color: var(--gold-light); border-color: rgba(200,170,110,.6); background: none; }
.nav .nav-web + .btn { margin-left: -16px; }
@media (max-width: 860px) { .nav .nav-web { margin-left: auto; } .nav .nav-web + .btn { margin-left: -16px; } }
@media (max-width: 520px) { .nav .nav-web { display: none; } .nav .nav-web + .btn { margin-left: auto; } }