@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bricolage-400.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bricolage-500.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bricolage-600.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bricolage-700.woff2") format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/bricolage-800.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-600-italic.woff2") format("woff2");
}

:root {
  --ink: #14171f;
  --ink-soft: #3c4250;
  --paper: #fff;
  --paper-2: #e6dfd1;
  --raised: #fffaf3;
  --line: #d2c8b6;
  --cobalt: #1c3eef;
  --cobalt-deep: #10268f;
  --cobalt-night: #0a1654;
  --mint: #74ffc8;
  --mint-deep: #0c6b4c;
  --mint-wash: #d9ffe8;
  --stamp: #8f1d14;
  --cream: #fff8f2;
  --shadow: 0 22px 50px rgba(10, 22, 84, 0.16);
  --sans: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-synthesis: none;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.04em; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: var(--cobalt-deep); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--cobalt-night); outline-offset: 3px; }
::selection { background: var(--mint); color: var(--cobalt-night); }

.skip {
  position: absolute;
  left: 0.75rem;
  top: -5rem;
  z-index: 90;
  background: var(--mint);
  color: var(--cobalt-night);
  font-weight: 800;
  text-decoration: none;
  padding: 0.65rem 0.85rem;
}
.skip:focus { top: 0.55rem; }

.wrap { width: min(1120px, calc(100% - 1.5rem)); margin-inline: auto; }

.mast { background: var(--paper); position: relative; z-index: 3; }
.mast-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 1.15rem;
  min-height: 4.2rem;
}
.mast-bar .brand { order: -1; }
.mast-bar .nav-toggle { margin-left: auto; }
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
}
.brand-mark { width: 2rem; height: 2rem; flex: none; }
.brand-name {
  display: block;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: 1.05rem;
}

.nav-toggle, .nav-close, .btn, .index-list, button {
  font: inherit;
  cursor: pointer;
}
.nav-toggle, .nav-close {
  min-height: 44px;
  border: 0;
  font-weight: 800;
  padding: 0 0.9rem;
}
.nav-toggle {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
  gap: 5px;
  align-content: center;
  justify-items: center;
  background: #fff;
  color: var(--cobalt-night);
  box-shadow: inset 0 0 0 1px var(--cobalt-night);
}
.nav-toggle span {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.18s ease;
}
.nav-close {
  align-self: flex-end;
  min-height: 2.4rem;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint);
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  border: 0;
  padding: 0;
  background: rgba(10, 22, 84, 0.46);
  cursor: pointer;
}
.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(20.5rem, 88vw);
  z-index: 80;
  background: var(--cobalt-night);
  color: var(--cream);
  padding: 1.1rem 1.15rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: translateX(105%);
  visibility: hidden;
  overflow: auto;
  transition: transform 0.22s ease;
}
.site-nav.is-open { transform: none; visibility: visible; }
.site-nav ol { list-style: none; margin: 1rem 0 0; padding: 0; }
.site-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 248, 242, 0.22);
  padding: 0.9rem 0;
}
.site-nav .idx {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--mint);
  font-weight: 700;
}
.site-nav a[aria-current="page"] { box-shadow: inset 0 -0.4rem 0 var(--mint); }
.site-nav :focus-visible, .hero-slab :focus-visible, .night :focus-visible { outline-color: var(--mint); }

.eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-deep);
}
.hero-slab .eyebrow, .night .eyebrow, .film .eyebrow { color: var(--mint); }

h1 {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
}
h1 em, .serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
}
h1 em { color: var(--mint); }

.lede { font-size: 1.08rem; max-width: 38rem; color: var(--cream); margin-top: 0.85rem; }
.hero-line {
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--mint);
}
.site-search {
  position: relative;
  z-index: 5;
  margin-top: 1.15rem;
  background: var(--raised);
  color: var(--ink);
  padding: 0.95rem 1rem 1.05rem;
  max-width: 38rem;
}
.site-search label { display: block; font-weight: 800; margin-bottom: 0.45rem; }
.search-field { position: relative; }
.search-row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.search-row .search {
  flex: 1 1 12rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--cobalt-night);
  border-radius: 0;
  padding: 0.55rem 0.1rem;
}
.site-search .btn { min-height: 48px; }
.suggest-list {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  box-shadow: 0 18px 40px rgba(10, 22, 84, 0.18);
  max-height: 22rem;
  overflow: auto;
}
.suggest-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.55rem;
  color: inherit;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.suggest-option.is-active, .suggest-option:hover { background: #f2f2f2; }
.suggest-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 4px;
  flex: none;
}
.suggest-name, .suggest-domain { display: block; }
.hero-slab .suggest-option, .suggest-name { color: var(--ink); }
.suggest-name { font-weight: 800; letter-spacing: -0.03em; }
.suggest-domain { color: var(--ink-soft); font-size: 0.85rem; }
.suggest-score {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--cobalt);
}
.suggest-note { margin: 0.75rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }

.brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
}
.brand-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.28rem 0.75rem 0.28rem 0.28rem;
  background: var(--cream);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}
.logo {
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  flex: none;
}
.logo svg { width: 1.15rem; height: 1.15rem; }
.logo-fb { background: #1877f2; }
.logo-in { background: #0a66c2; }
.logo-ig { background: linear-gradient(135deg, #fccc63, #f77737 35%, #e1306c 62%, #833ab4); }
.logo-gg { background: #fff; }
.logo-gg svg { width: 1.35rem; height: 1.35rem; }
.quiet { color: var(--ink-soft); margin-top: 0.7rem; }

.home-hero {
  position: relative;
  background: #fff;
  color: var(--ink);
  padding: 4.4rem 0 0;
  text-align: center;
}
.home-mark {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--cobalt-night);
}
.home-mark-tl { top: 1.15rem; left: 1.15rem; }
.home-mark-tr { top: 1.15rem; right: 1.15rem; }
.home-mark-bl { bottom: 4.6rem; left: 1.15rem; }
.home-mark-br { bottom: 4.6rem; right: 1.15rem; }
.home-hero h1 {
  max-width: 12ch;
  margin: 0 auto;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.home-hero h1 em { color: var(--mint-deep); }
.home-hero .hero-line {
  color: var(--ink);
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  letter-spacing: -0.02em;
  margin-top: 0.85rem;
}
.home-hero .site-search {
  margin: 1.5rem auto 0;
  max-width: 38rem;
  padding: 0;
  background: transparent;
  text-align: left;
}
.home-hero .site-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.home-hero .search-row {
  flex-wrap: nowrap;
  gap: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c5c9d1;
}
.home-hero .search-row .search {
  border: 0;
  padding: 0.9rem 1rem;
  min-height: 3.35rem;
  font-size: 1rem;
}
.home-hero .search-go {
  width: 3.35rem;
  min-height: 3.35rem;
  flex: none;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--cobalt-night);
  color: #fff;
  cursor: pointer;
}
.home-hero .search-go svg { width: 1.15rem; height: 1.15rem; }
.home-hero .search-go:hover { background: var(--mint-deep); }
.home-hero .suggest-note { text-align: center; }
.home-more { margin: 1.05rem 0 0; }
.home-more a { color: var(--mint-deep); font-weight: 800; }
.home-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.2rem;
  padding: 0.85rem max(1rem, calc((100% - 1120px) / 2));
  background: var(--mint-wash);
  text-align: left;
}
.home-prompt p { margin: 0; display: flex; align-items: center; gap: 0.55rem; font-weight: 700; }
.home-prompt .stars { color: var(--mint-deep); letter-spacing: 0.08em; font-size: 0.95rem; }
.write-review {
  flex: none;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.95rem;
  color: var(--mint-deep);
  font-weight: 800;
  text-decoration: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mint-deep);
}
.write-review:hover { background: var(--mint); color: var(--cobalt-night); }
@media (max-width: 640px) {
  .home-prompt { flex-direction: column; align-items: flex-start; }
  .home-mark-bl, .home-mark-br { bottom: 6.2rem; }
}

.biz-hero .eyebrow { color: var(--mint-deep); margin-bottom: 0.7rem; }
.biz-hero h1 { max-width: 14ch; }
.biz-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.4rem;
}
.biz-actions .btn:not(.btn-ghost-ink) { background: var(--cobalt-night); color: #fff; }
.biz-actions .btn:not(.btn-ghost-ink):hover { background: var(--ink); color: #fff; }
.btn.btn-ghost-ink {
  background: #fff;
  color: var(--cobalt-night);
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
}
.btn.btn-ghost-ink:hover { background: var(--mint); color: var(--cobalt-night); }

.biz-steps {
  padding: 2.6rem 0 1.4rem;
  background: var(--cobalt-night);
  color: var(--cream);
}
.biz-steps .eyebrow { color: var(--mint); }
.biz-steps h2 { color: var(--cream); max-width: 16ch; font-size: clamp(2rem, 4.5vw, 2.8rem); }
.biz-steps .quiet { color: #d5e4dc; max-width: 40rem; margin-top: 0.55rem; font-weight: 600; }
.biz-step-row {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.biz-step-row li {
  background: rgba(255, 248, 242, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 242, 0.22);
  padding: 1rem 1rem 1.1rem;
}
.biz-step-row .idx {
  display: block;
  color: var(--mint);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}
.biz-step-row h3 { color: var(--cream); font-size: 1.15rem; }
.biz-step-row p { margin-top: 0.35rem; color: #d5e4dc; }
@media (min-width: 800px) {
  .biz-step-row { grid-template-columns: repeat(3, 1fr); }
}

.biz-demo { align-items: stretch; }
.biz-demo .eyebrow { margin-bottom: 0.35rem; }
.biz-demo h2 { max-width: 16ch; }
.biz-demo .field {
  background: rgba(255, 255, 255, 0.55);
  border-bottom-color: var(--cobalt-night);
  padding-inline: 0.55rem;
}
.biz-demo-note {
  background: var(--mint);
  color: var(--cobalt-night);
  padding: 1.3rem 1.2rem 1.45rem;
  border-top-right-radius: 2.2rem;
  align-self: stretch;
}
.biz-demo-note h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.45rem;
}
.biz-demo-note .btn {
  margin-top: 1rem;
  background: var(--cobalt-night);
  color: #fff;
}
.biz-demo-note .btn:hover { background: var(--ink); color: #fff; }
@media (min-width: 800px) {
  .biz-demo { grid-template-columns: 1.15fr 0.85fr; }
}

.hero-slab a { color: var(--cream); }
.hero-slab {
  background: var(--cobalt);
  color: var(--cream);
  margin-right: 0.75rem;
  border-bottom-right-radius: 3.2rem;
  padding: 1.5rem 0 1.6rem;
}
.hero-grid { display: grid; gap: 1.3rem; align-items: end; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.fine { margin-top: 0.85rem; color: rgba(255, 248, 242, 0.78); font-size: 0.92rem; }

.portrait { margin: 0; position: relative; width: min(100%, 420px); justify-self: end; }
.portrait img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center 18%;
  border-top-left-radius: 1.8rem;
}
.portrait figcaption {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  background: rgba(10, 22, 84, 0.86);
  color: var(--cream);
  padding: 0.7rem 0.8rem;
}
.portrait figcaption p {
  margin: 0.35rem 0 0;
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}
.portrait strong { display: block; font-weight: 800; letter-spacing: -0.03em; }
.portrait span { color: var(--mint); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; }

.btn {
  min-height: 48px;
  border: 0;
  background: var(--cobalt-night);
  color: var(--mint);
  font-weight: 800;
  padding: 0.65rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover { background: var(--ink); color: var(--mint); }
.btn-mint { background: var(--mint); color: var(--cobalt-night); }
.btn-mint:hover { background: var(--cream); color: var(--cobalt-night); }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 242, 0.7);
}
.btn-ghost:hover { background: var(--cream); color: var(--cobalt-night); }

.section { padding: 2.6rem 0; }
.section h2 {
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 0.55rem;
}

.cats { padding: 1.1rem 0 0.2rem; }
.cat-scroller {
  display: flex;
  gap: 1.35rem;
  overflow-x: auto;
  padding: 0.35rem max(0.75rem, calc((100% - 1120px) / 2)) 0.9rem;
  scrollbar-width: none;
}
.cat-scroller::-webkit-scrollbar { display: none; }
.cat-scroller a {
  flex: none;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
}
.cat-scroller a:hover { color: var(--ink); }
.grow-band { padding: 2rem 0 0.4rem; }
.grow {
  margin-top: 0;
  background: #e6e4fb;
  color: var(--cobalt-night);
  text-align: center;
  padding: 2.4rem 1.2rem 2.2rem;
}
.grow svg { width: 2.4rem; height: 2.4rem; display: block; margin: 0 auto; }
.grow h2 {
  margin: 0.7rem 0 0;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  letter-spacing: -0.03em;
}
.grow p { margin: 0.45rem 0 0; font-size: 1.05rem; }
.grow .btn { margin-top: 1.15rem; background: var(--cobalt-night); color: #fff; }
.grow .btn:hover { background: var(--ink); color: #fff; }

.open-web { padding: 2.4rem 0 0.4rem; }
.open-web-grid {
  display: grid;
  gap: 1.4rem;
  align-items: center;
}
.open-web-art {
  max-width: 18rem;
  width: 100%;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.open-web-art svg { width: 100%; height: auto; display: block; }
.open-web-stat {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.4rem, 8vw, 5.4rem);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--cobalt);
}
.open-web h2 {
  margin: 0.45rem 0 0;
  max-width: 18ch;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.04em;
}
.open-web p:last-child { max-width: 38rem; color: var(--ink-soft); margin-top: 0.7rem; }
@media (min-width: 860px) {
  .open-web-grid { grid-template-columns: 1.05fr 0.95fr; gap: 2rem; }
  .open-web-art { justify-self: center; }
}

.gate {
  margin-top: 1.6rem;
  padding: 2rem 0 1.4rem;
  background: var(--cream);
}
.gate h2 {
  margin-bottom: 0.45rem;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  letter-spacing: -0.04em;
}
.gate-lede {
  max-width: 40rem;
  font-size: 1.08rem;
  color: var(--ink);
  font-weight: 600;
}
.gate-grid {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.gate-grid li {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--cobalt-night);
  padding: 0.6rem 0.7rem 0.75rem;
}
.gate-art { width: 6.4rem; height: auto; display: block; margin-bottom: 0.4rem; background: transparent; }
.gate-kicker {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--cobalt-night);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
}
.gate-kicker svg { width: 0.85rem; height: 0.85rem; }
.gate-grid h3 { margin: 0.2rem 0 0; font-size: 1.05rem; letter-spacing: -0.03em; }
.gate-grid p { margin: 0.25rem 0 0; color: var(--ink-soft); }
@media (min-width: 720px) {
  .gate-grid { grid-template-columns: 1fr 1fr; }
}

.recent { padding: 2.2rem 0 0.6rem; }
.recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.recent-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.recent-nav { display: flex; gap: 0.45rem; }
.recent-nav button {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--cobalt-night);
  box-shadow: inset 0 0 0 1px var(--cobalt-night);
  cursor: pointer;
}
.recent-nav button svg { width: 1rem; height: 1rem; }
.recent-nav button:hover { background: var(--mint); }
.recent-nav button:disabled { opacity: 0.35; cursor: default; background: #fff; }
.recent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.recent-card {
  display: flex;
  flex-direction: column;
  min-height: 17.5rem;
  padding: 1rem 1rem 0.9rem;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--cobalt-night);
}
.recent-card:hover { background: var(--mint-wash); }
.recent-who { display: flex; gap: 0.7rem; align-items: center; }
.recent-who .avatar { width: 2.6rem; height: 2.6rem; font-size: 0.85rem; }
.recent-who strong { display: block; font-size: 0.98rem; letter-spacing: -0.02em; }
.recent-who .stars { margin-top: 0.15rem; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--mint-deep); }
.recent-who .stars .off { color: #c5c9d1; }
.recent-text {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-biz {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.recent-biz img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  background: #fff;
  flex: none;
}
.recent-biz strong { display: block; font-size: 0.92rem; letter-spacing: -0.02em; }
.recent-biz small { display: block; color: var(--ink-soft); font-size: 0.78rem; }
@media (min-width: 720px) {
  .recent-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
  .recent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tally {
  margin-top: 3.2rem;
  padding: 2.4rem 0 2.6rem;
  background: var(--mint-wash);
}
.tally h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.tally-lede { margin: 0.5rem 0 0; max-width: 36rem; color: var(--ink-soft); }
.tally-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.55rem 1.5rem;
  margin-top: 1.55rem;
}
.tally article { min-width: 0; }
.tally-figure { display: flex; align-items: flex-start; gap: 0.28rem; }
.tally .mark-info { margin: 0.2rem 0 0 0.45rem; color: var(--cobalt-night); }
.tally .mark-tip { left: 0; top: calc(100% + 0.4rem); bottom: auto; transform: none; width: min(16rem, 70vw); }
.tally strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--cobalt-night);
}
.tally article p { margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
@media (min-width: 900px) {
  .tally-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.55rem 1.75rem;
  }
}

.bank { padding: 1.4rem 0 0.5rem; }
.see-more {
  min-height: 2.45rem;
  padding: 0 0.95rem;
  border: 0;
  background: #fff;
  color: var(--mint-deep);
  font: inherit;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--mint-deep);
  cursor: pointer;
}
.see-more:hover { background: var(--mint-wash); }
.bank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.bank-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1rem 0.95rem;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--cobalt-night);
}
.bank-card:hover { background: var(--mint-wash); }
.bank-card img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  margin-bottom: 0.7rem;
  background: #fff;
}
.bank-card strong { font-size: 1.02rem; letter-spacing: -0.02em; }
.bank-card .domain { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.84rem; }
.bank-score {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
}
.bank-score .stars { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--mint-deep); }
.bank-score .stars .off { color: #c5c9d1; }
.bank-score strong { font-size: 0.95rem; }
.bank-score .count { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }
.bank-note { margin: 0.85rem 0 0; font-weight: 700; }
@media (min-width: 720px) {
  .bank-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
  .bank-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-band { padding: 2.6rem 0; }
.stat-band strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.6rem, 9vw, 6rem);
  letter-spacing: -0.045em;
  line-height: 0.85;
  color: var(--cobalt-night);
  margin: 0.15rem 0 0.7rem;
}
.stat-band p:last-child { max-width: 38rem; font-size: 1.08rem; }
.stat-band-night { background: var(--cobalt-night); color: var(--cream); }
.stat-band-night .eyebrow, .stat-band-night strong { color: var(--mint); }
.stat-band-night p:last-child { color: #d5e4dc; }
.stat-band-mint { background: var(--mint-wash); }

.index-list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.index-list li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
  padding: 0.95rem 0;
}
.index-list .idx {
  color: var(--cobalt);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding-top: 0.25rem;
}
.index-list h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
}
.index-list p { color: var(--ink-soft); margin-top: 0.3rem; }

.faces {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}
.faces figure { margin: 0; }
.faces img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 15%;
  border-top-right-radius: 2.2rem;
}
.faces figcaption { padding: 0.75rem 0.1rem 0; }
.faces strong { display: block; font-weight: 800; letter-spacing: -0.03em; font-size: 1.15rem; }
.faces span, .faces p { color: var(--ink-soft); font-size: 0.95rem; }
.faces p { margin: 0.3rem 0 0; }

.spread {
  background: var(--mint-wash);
  margin-left: 0.8rem;
  padding: 1.6rem 0;
}
.spread blockquote { margin: 0; max-width: 40rem; }
.spread blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--cobalt-night);
}
.spread footer { margin-top: 0.8rem; font-weight: 700; }

.film {
  position: relative;
  margin: 0 0.75rem 0 0;
  min-height: 38rem;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--cream);
  background: #0a1654 url("img/moons-flowers.jpg") center 28% / cover no-repeat;
}
.film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 28%;
}
.record {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.record article {
  background: var(--raised);
  padding: 1rem 1.05rem 1.1rem;
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
}
.record h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.record p, .record a { font-size: 1.02rem; }
.record strong { font-weight: 800; }
.film figcaption {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 5rem 1.15rem 1.4rem;
  background: linear-gradient(transparent, rgba(10, 22, 84, 0.9) 52%);
  color: var(--cream);
}
.film h2 { color: var(--cream); max-width: 16ch; }
.film p { margin-top: 0.45rem; max-width: 36rem; }
.film-quote { margin: 1.05rem 0 0; max-width: 34rem; }
.film-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.film-quote footer { margin-top: 0.55rem; font-weight: 700; }

.julius { padding-block: 1.6rem; }
.julius-grid { display: grid; gap: 1rem; align-items: center; }
.julius-quote { margin: 0.35rem 0 0; max-width: 34rem; }
.julius-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--cobalt-night);
}
.julius-quote footer { margin-top: 0.65rem; font-weight: 800; }
.bouquet-frame {
  position: relative;
  height: min(18rem, 52vw);
  overflow: hidden;
  background: var(--cobalt-night);
}
.bouquet-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.bouquet-frame img.is-on { opacity: 1; }
.bouquet-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.65rem;
}
.bouquet-nav p { margin: 0; font-weight: 800; letter-spacing: 0.04em; min-width: 3.2rem; text-align: center; }
.bouquet-nav button {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--cobalt-night);
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
}
.bouquet-nav button:hover { background: var(--mint); }
.bouquet-nav button svg { width: 1rem; height: 1rem; }

.night {
  background: var(--cobalt-night);
  color: var(--cream);
  padding: 2.4rem 0;
}
.night h2, .night p, .night h3 { color: var(--cream); }
.night .quiet, .night .index-list p { color: #d5e4dc; }
.night .index-list li { border-top-color: rgba(255, 248, 242, 0.28); }

.rewards {
  display: grid;
  gap: 1.2rem;
  align-items: center;
}
.reward-note {
  background: var(--mint-wash);
  color: var(--cobalt-night);
  padding: 1.3rem 1.2rem 1.45rem;
  border-top-right-radius: 2.2rem;
}
.reward-note h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.45rem;
}

.tools { margin: 1rem 0 0.4rem; }
.search, .field, select.field {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-bottom: 3px solid var(--cobalt-night);
  background: transparent;
  padding: 0.55rem 0.1rem;
  border-radius: 0;
  font: inherit;
  color: inherit;
}
.search:focus, .field:focus { outline: none; border-bottom-color: var(--cobalt); }
.live-count { font-weight: 700; margin: 0.7rem 0; }
.empty {
  padding: 1rem 0;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 1rem;
}
.poster {
  background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
  min-height: 15rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
}
.site-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  flex: 1;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}
.site-link:hover h3 { text-decoration: underline; }
.favicon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: #fff;
  padding: 8px;
}
.poster-feature {
  background: var(--cobalt-night);
  color: var(--cream);
  box-shadow: none;
}
.poster h3 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; }
.poster-domain {
  margin: 0.35rem 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}
.poster-score { margin: 0; }
.poster-score strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.8rem, 7vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.poster-feature .poster-score strong { color: var(--mint); }
.poster p { color: inherit; font-size: 0.95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.chip {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.4rem;
  background: var(--mint-wash);
  color: var(--mint-deep);
}
.poster-feature .chip { background: rgba(116, 255, 200, 0.16); color: var(--mint); }

.score-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; margin-top: 1.2rem; }
.score-row strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.4rem, 8vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--mint);
}
.score-row p { margin: 0; max-width: 22rem; }
.biz-head { display: flex; gap: 1rem; align-items: center; }
.biz-head .favicon { width: 84px; height: 84px; }
.wrap.review-col { max-width: none; }
.review-col > * { max-width: 40rem; }
@media (min-width: 680px) {
  main[data-review-root] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    column-gap: 1.25rem;
    align-items: start;
    width: min(1120px, calc(100% - 1.5rem));
    margin-inline: auto;
  }
  main[data-review-root] > .review-side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0.85rem;
    min-width: 0;
    align-self: start;
    margin: 0.85rem 0 1.5rem;
  }
  main[data-review-root] > .review-side > .hero-slab {
    margin: 0;
    padding: 0.7rem 0.85rem 0.75rem;
    border-bottom-right-radius: 0;
  }
  .review-side .profile {
    margin-top: 0.45rem;
    max-width: none;
    padding: 0.55rem 0.8rem 0.6rem;
    border-bottom-left-radius: 0;
  }
  .review-side .facts { margin-top: 0; }
  .review-side .fact { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.35rem 0; }
  .review-side .tenure { font-weight: 800; }
  .review-side .scam-credit { margin-top: 0.45rem; }
  .review-side .scam-logo { height: 22px; display: block; }
  .review-side .claimed { margin-top: 0.25rem; padding: 0.18rem 0.4rem; }
  .review-side .breakdown { margin-top: 0.35rem; gap: 0; }
  .review-side .bar-row { padding: 0.02rem 0; }
  main[data-review-root] > .section {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-top: 1.35rem;
  }
  main[data-review-root] .hero-slab .wrap,
  main[data-review-root] .wrap.review-col {
    width: auto;
    max-width: none;
    margin: 0;
  }
  main[data-review-root] .review-col > *,
  main[data-review-root] .reviews,
  main[data-review-root] .profile {
    max-width: none;
  }
  main[data-review-root] .hero-slab h1 {
    font-size: 1.45rem;
    line-height: 1;
  }
  main[data-review-root] .hero-line {
    margin-top: 0.15rem;
    font-size: 1.05rem;
  }
  main[data-review-root] .biz-head .favicon { width: 42px; height: 42px; }
  main[data-review-root] .score-row { display: block; margin-top: 0.45rem; }
  main[data-review-root] .score-row strong { font-size: 2.35rem; }
  main[data-review-root] .score-row p { max-width: none; margin-top: 0.55rem; }
  main[data-review-root] .breakdown { max-width: none; }
}
.reviews { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.85rem; max-width: 40rem; }
.profile {
  max-width: 40rem;
  margin-top: 1.8rem;
  padding: 1.25rem 1.2rem 1.15rem;
  background: var(--cobalt-night);
  color: var(--cream);
  border-bottom-left-radius: 1.8rem;
}
.profile h3 { font-size: 1.7rem; margin-bottom: 0.25rem; color: var(--cream); }
.profile .fact { border-top-color: rgba(255, 248, 242, 0.22); }
.profile .fact dt { color: var(--mint); }
.tenure { font-weight: 800; }
.profile .scam-score strong { color: var(--mint); }
.profile .scam-score span { color: #d7e6df; }
.claimed {
  display: inline-block;
  margin: 0.7rem 0 0;
  background: var(--mint);
  color: var(--cobalt-night);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.45rem;
}
.facts { margin: 0.9rem 0 0; }
.fact {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding: 0.75rem 0;
}
.fact dt { font-weight: 800; }
.fact dd { margin: 0; min-width: 0; }
@media (max-width: 720px) {
  .fact { grid-template-columns: 1fr; gap: 0.25rem; }
}
.scam-score { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.scam-logo {
  width: auto;
  height: 34px;
  max-width: 12.5rem;
  object-fit: contain;
  background: #fff;
  padding: 0.28rem 0.4rem;
}
.scam-credit { margin-top: 1rem; }
.scam-credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cream);
  font-weight: 800;
  text-decoration: none;
}
.scam-credit a:hover { color: var(--mint); }
.breakdown { display: grid; gap: 0.28rem; margin-top: 1.15rem; max-width: 28rem; }
.bar-row {
  display: grid;
  grid-template-columns: 6.4rem 1fr 1.6rem;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.bar-stars { letter-spacing: 0.08em; color: var(--mint); white-space: nowrap; }
.bar-stars .off { color: rgba(255, 248, 242, 0.35); }
.bar-track { display: block; height: 0.55rem; background: rgba(255, 248, 242, 0.22); }
.bar-fill { display: block; height: 100%; background: var(--mint); }
.bar-count { text-align: right; }
.bar-row.is-on .bar-track { background: rgba(255, 248, 242, 0.45); }
.bar-row.is-on .bar-fill { background: #fff; }
.review-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 1rem;
}
.sort-btn {
  min-height: 2.4rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.sort-btn.is-on { background: var(--cobalt-night); color: var(--mint); }
.review-empty { margin-top: 0.9rem; }
.useful {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.useful svg { width: 1.05rem; height: 1.05rem; flex: none; }
.useful[aria-pressed="true"] { color: var(--cobalt); }
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.2rem 0.8rem;
  background: rgba(10, 22, 84, 0.62);
  overflow: auto;
}
.modal-card {
  width: min(36rem, 100%);
  margin-top: 4vh;
  background: var(--cream);
  color: var(--ink);
  padding: 1.15rem 1.15rem 1.3rem;
  box-shadow: var(--shadow);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.modal-card h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0.2rem 2.5rem 0.7rem 0; }
.modal-card fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.step-pips { display: flex; gap: 0.8rem; list-style: none; margin: 0 0 1rem; padding: 0; font-weight: 800; }
.step-pips li { color: var(--ink-soft); }
.step-pips li[aria-current="step"] { color: var(--cobalt); box-shadow: inset 0 -0.28rem 0 var(--mint); }
.modal-card label { display: grid; gap: 0.3rem; margin-top: 0.75rem; font-weight: 800; }
.modal-card input, .modal-card textarea, .modal-card select {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--cobalt-night);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0;
}
.modal-card textarea { border: 2px solid var(--cobalt-night); padding: 0.55rem; min-height: 7rem; resize: vertical; }
.password-line { display: flex; gap: 0.5rem; align-items: center; }
.password-line input { flex: 1; }
.password-rules { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.password-rules li { color: var(--ink-soft); font-size: 0.88rem; font-weight: 700; }
.password-rules li.is-met { color: var(--mint-deep); }
.form-error { margin-top: 0.7rem; color: #9d1c2b; font-weight: 800; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.modal-card .btn-ghost,
.modal-card .btn-ghost:hover { color: var(--cobalt-night); box-shadow: inset 0 0 0 2px var(--cobalt-night); background: transparent; }
.scam-score strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: -0.03em;
  line-height: 1;
}
.review {
  background: var(--raised);
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
  padding: 1.1rem 1.15rem 1.2rem;
}
.review-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.review-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.review-actions { display: flex; gap: 0.35rem; }
.icon-btn {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-grid;
  place-items: center;
  gap: 0.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--cobalt-night);
  cursor: pointer;
}
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.icon-btn span { font-size: 0.62rem; font-weight: 800; line-height: 1; }
.icon-btn[aria-pressed="true"] { background: var(--cobalt-night); color: var(--mint); }
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 120;
  margin: 0;
  background: var(--cobalt-night);
  color: var(--mint);
  font-weight: 800;
  padding: 0.7rem 1rem;
}
.who { display: flex; gap: 0.7rem; align-items: flex-start; min-width: 0; }
.avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--cobalt-night);
  color: var(--mint);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.from {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-weight: 800;
}
.from img { width: auto; height: 1.15rem; object-fit: contain; }
.review h3 { font-size: 1.35rem; font-weight: 800; }
.review-date { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }
.stars { margin: 0; letter-spacing: 0.12em; font-weight: 800; color: var(--cobalt); white-space: nowrap; }
.stars .off { color: #cfc6b8; }
.review p { margin-top: 0.75rem; }
.marks { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.95rem; }
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.15rem 0.45rem 0.15rem 0.15rem;
  background: var(--cream);
  font-size: 0.78rem;
  font-weight: 800;
  position: relative;
}
.mark-info {
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.1rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.62rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: help;
  position: relative;
  flex: none;
}
.mark-tip {
  display: none;
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 15rem;
  padding: 0.45rem 0.55rem;
  background: var(--cobalt-night);
  color: var(--cream);
  font-style: normal;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
}
.mark-info:hover .mark-tip,
.mark-info:focus .mark-tip,
.mark-info:focus-visible .mark-tip { display: block; }
.reply {
  margin-top: 0.95rem;
  padding: 0.85rem 0.95rem;
  background: var(--paper);
  border-left: 3px solid var(--cobalt-night);
}
.reply-by {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 800;
  font-size: 0.9rem;
}
.reply-by img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}
.reply p + p { margin-top: 0.35rem; color: var(--ink-soft); }
.mark-kyc, .mark-free {
  padding: 0.35rem 0.55rem;
  letter-spacing: 0.03em;
}
.mark-kyc { background: var(--mint); color: var(--cobalt-night); }
.mark-free { background: var(--cobalt-night); color: var(--mint); }

.plans {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.plan { padding: 1.15rem 1.05rem 1.3rem; min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.plan-free { box-shadow: inset 0 0 0 2px var(--ink); background: transparent; }
.plan-pro { background: var(--raised); box-shadow: var(--shadow); }
.plan-premium {
  background: var(--cobalt-night);
  color: var(--cream);
  border-bottom-left-radius: 2rem;
}
.kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.amount {
  margin: 0;
  font-size: clamp(2.7rem, 7vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.88;
}
.amount .per { font-size: 1rem; letter-spacing: 0; font-weight: 700; margin-left: 0.15rem; }
.plan-premium .amount { color: var(--mint); }
.plan ul { list-style: none; margin: 0.3rem 0 0; padding: 0; flex: 1; }
.plan li {
  padding: 0.45rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-size: 0.98rem;
}
.plan .btn { margin-top: 0.4rem; }
.plan-premium .quiet { color: #d7e6df; }

.table-wrap { overflow-x: auto; margin-top: 0.6rem; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td {
  text-align: left;
  padding: 0.75rem 0.7rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
  font-size: 0.95rem;
}
th { font-weight: 800; }

.acc { border-top: 1px solid var(--line); }
.acc button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.9rem 0;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  letter-spacing: -0.03em;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.acc p { color: var(--ink-soft); margin: 0 0 1rem; }

.demo-form { display: grid; gap: 0.75rem; margin-top: 1rem; }
.two { display: grid; gap: 0.75rem; }
.thanks {
  margin-top: 1rem;
  background: var(--mint);
  color: var(--cobalt-night);
  padding: 1rem;
}
.thanks p { margin-top: 0.35rem; }

.choice { padding: 2.4rem 0 2.8rem; }
.rewards-copy { text-align: right; }
.rewards-copy .quiet { margin-left: auto; }
.rewards-copy h2 {
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.12;
  max-width: 18ch;
  margin-left: auto;
}
.choice-card {
  display: grid;
  gap: 1.3rem;
  align-items: center;
  background: #f8d4c0;
  color: var(--cobalt-night);
  padding: 1.5rem 1.2rem 1.3rem;
}
.choice-card h2 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.choice-card p { margin: 0.65rem 0 0; max-width: 34rem; }
.choice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-top: 1.15rem; }
.choice-card .btn { background: var(--cobalt-night); color: #fff; }
.choice-card .btn:hover { background: var(--ink); color: #fff; }
.choice-social {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #e4a98a;
  cursor: pointer;
}
.choice-social img, .choice-social svg { width: 1.15rem; height: 1.15rem; }
.choice-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.choice-photos img { width: 100%; height: 8.5rem; object-fit: cover; }
@media (min-width: 800px) {
  .choice-card { grid-template-columns: 1.15fr 0.95fr; padding: 2rem 1.6rem; }
  .choice-photos img { height: 11.5rem; }
}

.prose { max-width: 40rem; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.02; margin-bottom: 0.6rem; }
.prose h2 { font-size: 1.35rem; margin: 1.4rem 0 0.3rem; }
.prose p { margin-top: 0.65rem; }
.prose .btn { margin-top: 1rem; }

.colophon {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0 2.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  background: #fff;
}
.colophon .brand { color: var(--ink); }
.foot-note { max-width: 42rem; margin: 1.1rem 0 0; line-height: 1.5; }
.foot-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.8rem;
}
.foot-grid h2 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.foot-grid nav, .foot-grid div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; }
.foot-grid a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.foot-grid a:hover { color: var(--ink); }
.foot-grid p { margin: 0; font-weight: 700; color: var(--ink); }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.2rem;
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.foot-legal a { color: var(--ink-soft); font-weight: 700; text-decoration: none; font-size: 0.88rem; }
.foot-legal a:hover { color: var(--ink); }
.foot-copy { margin: 0.9rem 0 0; font-size: 0.88rem; }
@media (min-width: 800px) {
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 800px) {
  .faces { grid-template-columns: repeat(3, 1fr); }
  .rewards { grid-template-columns: 1.1fr 0.9fr; }
  .rewards:has(.reward-note:first-child) { grid-template-columns: 0.9fr 1.1fr; }
  .julius-grid { grid-template-columns: 1fr 0.9fr; gap: 2.4rem; }
  .two { grid-template-columns: 1fr 1fr; }
  .plans { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
  .plan-premium { transform: translateY(-0.8rem); }
  .posters { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .poster { flex: none; min-height: 18rem; }
}

@media (min-width: 980px) {
  .hero-slab {
    margin-right: 6vw;
    border-bottom-right-radius: 4.5rem;
    padding: 2.1rem 0 2.4rem;
  }
  .hero-grid {
    grid-template-columns: 1.15fr minmax(300px, 420px);
    gap: 2rem;
    align-items: end;
  }
  .film { min-height: 42rem; }
  .film figcaption { padding: 6rem 1.4rem 1.6rem; }
}