/* The brochure demo pages (views/demo.ejs). One phone-first column per product link: the stage plays
   the tap, under it the visitor picks what is tapped (card, plate) and what opens (theme).
   Light only, so it reads as a continuation of the printed brochure. */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --mute: #6e6e73;
  --line: #dcdce1;
  --accent: #b4231b;
  --phone: #121214;
  --on-ink: #fff;
  --well: #e8e8ed;
  --gap: #f5f5f7;
  --display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pw: clamp(188px, 52vw, 244px);
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
/* the hidden attribute wins over any display rule (a .pick is a flex box) */
[hidden] {
  display: none !important;
}
html,
body {
  background: var(--bg);
  color: var(--ink);
}
body {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.fs-open {
  overflow: hidden;
}
.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 12px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.top img {
  height: 20px;
  width: auto;
  display: block;
}
.live {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  font: 700 24px/1.12 var(--display);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.hero p {
  margin: 4px 0 0;
  color: var(--mute);
  font-size: 14px;
  text-wrap: balance;
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  height: calc(var(--pw) * 2.53 + 10px);
  margin-inline: auto;
  width: 100%;
  max-width: 360px;
}
.phone {
  position: absolute;
  left: calc(50% - var(--pw) / 2);
  top: calc(var(--pw) * 0.36);
  width: var(--pw);
  aspect-ratio: 400 / 868;
  background: var(--phone);
  border-radius: calc(var(--pw) * 0.16);
  padding: calc(var(--pw) * 0.028);
  box-shadow:
    0 0 0 1px #2c2c30,
    0 1px 0 2px #3a3a3e inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.45),
    0 12px 24px -12px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: transform 0.18s ease;
}
.phone.bump {
  transform: translateY(-7px) rotate(-1.2deg);
}
.phone.lifted {
  z-index: 100;
  transition: none;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--pw) * 0.135);
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
/* full screen: the phone's own screen grows to fill the viewport, so what was showing carries on */
.screen.full {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  z-index: 100;
  cursor: auto;
  transform-origin: 0 0;
}
.screen.full .island {
  display: none;
}
.island {
  position: absolute;
  top: calc(var(--pw) * 0.035);
  left: 50%;
  width: 30%;
  height: calc(var(--pw) * 0.085);
  transform: translateX(-50%);
  background: #000;
  border-radius: 99px;
  z-index: 6;
}
.vp {
  position: absolute;
  left: var(--vx, 0px);
  top: 0;
  width: 390px;
  height: 844px;
  transform-origin: 0 0;
  transform: scale(var(--k, 0.55));
}

.lock {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 20% 0%, #41476b 0%, transparent 60%),
    radial-gradient(120% 80% at 100% 100%, #6b3a4f 0%, transparent 55%), #15151c;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 118px;
  transition: opacity 0.45s ease;
}
.lock .date {
  font: 500 19px/1 var(--body);
  opacity: 0.85;
}
.lock .time {
  font: 600 96px/1 var(--display);
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.lock .hint {
  position: absolute;
  bottom: 70px;
  font: 500 17px/1.3 var(--body);
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lock .hint svg {
  width: 34px;
  height: 34px;
}
.banner {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 60px;
  background: rgba(245, 245, 247, 0.92);
  color: #1d1d1f;
  border-radius: 26px;
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  transform: translateY(-160%);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15),
    opacity 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.banner.on {
  transform: translateY(0);
  opacity: 1;
}
.banner .ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.banner .ic svg {
  width: 28px;
  height: 28px;
}
.banner b {
  display: block;
  font: 600 17px/1.2 var(--body);
}
.banner span {
  font-size: 16px;
  color: #3c3c43;
}

.page {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page::-webkit-scrollbar {
  display: none;
}
.page.on {
  opacity: 1;
  transform: none;
}
img.poster {
  display: block;
  width: 390px;
  height: auto;
}

.device {
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: 50% 50%;
  z-index: 1;
  transition:
    transform 0.8s cubic-bezier(0.5, 0, 0.2, 1),
    filter 0.8s;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.28));
  cursor: pointer;
}
.device img,
.device svg {
  display: block;
  width: 100%;
  height: auto;
}
.device.rest {
  transform: translateX(-50%) perspective(900px) translateY(-8%) rotateX(54deg) rotateZ(-7deg) scale(0.92);
}
.device.tap {
  transform: translateX(-50%) perspective(900px) translateY(var(--tapY, 120px)) rotateX(8deg) rotateZ(0) scale(1.06);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}
.device.k-card {
  width: calc(var(--pw) * 1.02);
}
.device.k-plate {
  width: calc(var(--pw) * 0.86);
}

.rings {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
}
.rings i {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(180, 35, 27, 0.35);
  opacity: 0;
}
.rings.go i {
  animation: ring 1s ease-out forwards;
}
.rings.go i:nth-child(2) {
  animation-delay: 0.16s;
}
.rings.go i:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes ring {
  0% {
    transform: scale(0.3);
    opacity: 0.95;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* invitation card drawn from the world's own tokens */
.invite {
  width: 100%;
  aspect-ratio: 85.6 / 54;
  border-radius: 9px;
  background: var(--w-dark);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}
.invite::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--w-gold);
  border-radius: 5px;
  opacity: 0.8;
}
.invite .se {
  font: 600 7.5px/1 var(--body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--w-gold);
}
.invite .nm {
  font-family: var(--w-script);
  font-size: 27px;
  line-height: 1.05;
  color: var(--w-cream);
}
.invite .dt {
  font: 600 8px/1 var(--body);
  letter-spacing: 0.2em;
  color: var(--w-gold2);
}
.invite .nfc {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 14px;
  height: 14px;
  color: var(--w-gold);
}

/* ---------- pickers ---------- */
.pick {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ctl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ctl-head h2 {
  font: 600 15px/1.2 var(--display);
  margin: 0;
}
.ctl-head span {
  font-size: 12px;
  color: var(--mute);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.tile {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--body);
  color: var(--ink);
  min-width: 0;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.tile .th {
  width: 100%;
  aspect-ratio: 85.6 / 54;
  display: grid;
  place-items: center;
}
.tile .th > * {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  display: block;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18));
}
.tile .th svg {
  width: 100%;
  height: auto;
}
.tile b {
  font: 600 13px/1.1 var(--body);
}
.tile small {
  font-size: 11px;
  color: var(--mute);
  line-height: 1.2;
  text-align: center;
}
.tile[aria-checked="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 2px 8px;
  margin-inline: -16px;
  padding-inline: 16px;
  scrollbar-width: none;
  scroll-padding-inline: 16px;
}
.rail::-webkit-scrollbar {
  display: none;
}
.grp {
  flex: none;
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding-inline: 4px 2px;
}
.chip {
  flex: none;
  scroll-snap-align: start;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 99px;
  padding: 7px 13px 7px 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--body);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.chip .sw {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: conic-gradient(var(--a) 0 35%, var(--b) 35% 100%);
}
.chip[aria-checked="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.chip .tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a6a1f;
  background: #f6edd6;
  padding: 3px 6px;
  border-radius: 6px;
}
.tile:focus-visible,
.chip:focus-visible,
.btn:focus-visible,
.link-btn:focus-visible,
.fs-close:focus-visible,
.fs-btn:focus-visible,
.device:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note {
  margin: 0;
  font-size: 13px;
  color: var(--mute);
  min-height: 19px;
}
.note b {
  color: var(--ink);
  font-weight: 600;
}
.act-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.link-btn {
  appearance: none;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 13px/1 var(--body);
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.link-btn svg {
  width: 15px;
  height: 15px;
}

.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 14px;
  font: 600 15px/1 var(--body);
  text-decoration: none;
  padding: 0 14px;
  text-align: center;
}
.btn.primary {
  background: var(--ink);
  color: #fff;
}
.btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.fine {
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  margin: 0;
}

/* full screen view of the theme */
.fs-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  z-index: 8;
  display: none;
  appearance: none;
  border: 0;
  background: rgba(20, 20, 22, 0.88);
  color: #fff;
  border-radius: 99px;
  height: 38px;
  padding: 0 15px;
  font: 600 13.5px/1 var(--body);
  cursor: pointer;
  align-items: center;
  gap: 7px;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.screen.full .fs-close {
  display: inline-flex;
}

/* review look-alike, drawn at 390 x 844 */
.rv {
  position: absolute;
  inset: 0;
  background: #fff;
  color: #202124;
  font-family: var(--body);
  display: flex;
  flex-direction: column;
}
.rv .bar {
  height: 104px;
  padding: 58px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
}
.rv .bar .x {
  font-size: 28px;
  line-height: 1;
  color: #5f6368;
}
.rv .post {
  font: 600 16px/1 var(--body);
  color: #fff;
  background: #1a73e8;
  border: 0;
  border-radius: 20px;
  padding: 11px 22px;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.rv .post.ok {
  opacity: 1;
}
.rv .biz {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 22px 10px;
}
.rv .logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #1c1412;
  border: 3px solid #d9472b;
  color: #e7b14d;
  display: grid;
  place-items: center;
  font: 700 17px/1 var(--display);
}
.rv .biz b {
  display: block;
  font: 600 22px/1.2 var(--display);
}
.rv .biz span {
  font-size: 15px;
  color: #5f6368;
}
.rv .who {
  padding: 4px 22px 0;
  font-size: 14px;
  color: #5f6368;
}
.rv .stars {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 30px 0 8px;
}
.rv .stars button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.rv .stars svg {
  width: 50px;
  height: 50px;
  fill: none;
  stroke: #9aa0a6;
  stroke-width: 1.4;
  transition: transform 0.15s;
}
.rv .stars button.on svg {
  fill: #fbbc04;
  stroke: #fbbc04;
}
.rv .stars button:active svg {
  transform: scale(0.9);
}
.rv .lbl {
  text-align: center;
  font-size: 16px;
  color: #5f6368;
  height: 22px;
}
.rv .quick {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 22px 22px 12px;
}
.rv .quick button {
  appearance: none;
  border: 1px solid #dadce0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font: 500 15px/1 var(--body);
  color: #3c4043;
  cursor: pointer;
}
.rv .quick button.on {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #174ea6;
}
.rv .text {
  margin: 6px 22px;
  min-height: 140px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  color: #202124;
}
.rv .text:empty::before {
  content: "Share details of your own experience at this place";
  color: #80868b;
}
.rv .done {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.rv .done.on {
  opacity: 1;
  pointer-events: auto;
}
.rv .done .tick {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e6f4ea;
  display: grid;
  place-items: center;
}
.rv .done .tick svg {
  width: 52px;
  height: 52px;
  stroke: #188038;
  stroke-width: 3;
  fill: none;
}
.rv .done b {
  font: 600 26px/1.2 var(--display);
}
.rv .done span {
  color: #5f6368;
  font-size: 16px;
}
.rv .again {
  margin-top: 10px;
  appearance: none;
  border: 1px solid #dadce0;
  background: #fff;
  border-radius: 20px;
  padding: 11px 20px;
  font: 600 15px/1 var(--body);
  color: #1a73e8;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .device,
  .page,
  .lock,
  .banner,
  .phone {
    transition: none !important;
  }
  .rings,
  .live::before {
    animation: none !important;
    display: none;
  }
}

/* ---------- live pages in the phone ---------- */
.page iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.veil.on {
  opacity: 1;
}
.veil i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #e3e3e8;
  border-top-color: #1d1d1f;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* full screen sits beside the phone, so it never covers the page */
.fs-btn {
  position: absolute;
  z-index: 3;
  left: calc(50% + var(--pw) / 2 + 10px);
  top: calc(var(--pw) * 0.36 + var(--pw) * 0.62);
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.fs-btn.on {
  opacity: 1;
}
.fs-btn .fs-ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  position: relative;
}
.fs-btn .fs-ic svg {
  width: 20px;
  height: 20px;
}
.fs-btn .fs-tx {
  font: 600 11px/1.15 var(--body);
  text-align: center;
}
.fs-btn.hello .fs-ic::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  animation: hello 1.1s ease-out 3;
  pointer-events: none;
}
@keyframes hello {
  0% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.brand {
  display: block;
  line-height: 0;
}
.brand svg {
  display: block;
  height: 20px;
  width: auto;
}

/* /demo index */
.index {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.index-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
}
.index-row b {
  font: 600 16px/1.2 var(--display);
}
.index-row span {
  font-size: 13px;
  color: var(--mute);
}

@media (prefers-reduced-motion: reduce) {
  .fs-btn.hello .fs-ic::after,
  .veil i {
    animation: none;
  }
}

/* ---------- theme thumbnails: the theme is the point, so it gets pictures ---------- */
.rail.thumbs {
  gap: 10px;
  padding-block: 4px 12px;
}
.thumb {
  flex: none;
  width: 86px;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  scroll-snap-align: start;
  color: var(--ink);
  font: 500 12px/1.2 var(--body);
}
.thumb .im {
  position: relative;
  width: 86px;
  aspect-ratio: 9 / 16;
  border-radius: 13px;
  overflow: hidden;
  background: var(--well);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 8px 16px -10px rgba(0, 0, 0, 0.45);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}
.thumb .im img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb .tag {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b4f12;
  background: #f6edd6;
  padding: 3px 5px;
  border-radius: 5px;
}
.thumb[aria-checked="true"] .im {
  box-shadow:
    0 0 0 2px var(--gap),
    0 0 0 4px var(--ink),
    0 10px 18px -10px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
.thumb[aria-checked="true"] .l {
  font-weight: 700;
}
.thumb:focus-visible {
  outline: none;
}
.thumb:focus-visible .im {
  box-shadow:
    0 0 0 2px var(--gap),
    0 0 0 4px var(--accent);
}

/* ---------- the card type: a plain switch ---------- */
.segment {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--well);
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
}
.seg {
  appearance: none;
  border: 0;
  background: transparent;
  font: 600 13px/1 var(--body);
  color: var(--mute);
  padding: 9px 15px;
  border-radius: 8px;
  cursor: pointer;
}
.seg[aria-checked="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---------- why it works ---------- */
.usp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.usp h2 {
  font: 700 20px/1.2 var(--display);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 16px 6px;
}
.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding-inline: 6px;
  min-width: 0;
}
.fact + .fact {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.fact b {
  font: 700 24px/1 var(--display);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.fact span {
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.74);
}
.usp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.usp-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.usp-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fbeceb;
  color: var(--accent);
  display: grid;
  place-items: center;
}
.usp-ic svg {
  width: 20px;
  height: 20px;
}
.usp-list b {
  display: block;
  font: 600 14px/1.25 var(--display);
}
.usp-list p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mute);
}
@media (max-width: 340px) {
  .usp-list {
    grid-template-columns: 1fr;
  }
}

.btn {
  white-space: nowrap;
}
@media (max-width: 370px) {
  .btn {
    font-size: 14px;
    padding: 0 10px;
    gap: 6px;
  }
}

/* ---------- what is tapped: a plain switch on top ---------- */
.pick-top {
  display: flex;
  justify-content: center;
}
.pick-top .segment {
  width: 100%;
  max-width: 360px;
}
.pick-top .seg {
  padding: 10px 6px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- order buttons stay on screen ---------- */
.wrap {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px max(16px, calc((100vw - 480px) / 2 + 16px)) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 245, 247, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.buybar .btn {
  min-height: 50px;
}
.buybar .btn.ghost {
  padding: 0 16px;
}
body.fs-open .buybar {
  visibility: hidden;
}

/* ---------- embedded in a product page (?embed=1) ---------- */
/* The store frames this page under its own heading and buy box: no header,
   benefits or order bar here, and less air so the iframe stays short. */
body.embed {
  margin: 0;
}
body.embed .wrap {
  padding-block: 4px 8px;
  gap: 12px;
}
body.embed .actions {
  min-height: 0;
}

/* On the store's dark product pages (?tone=dark): the store's own background
   shows through (the frame is transparent; color-scheme stays light so the
   browser paints no backdrop of its own), the controls turn light on dark. */
:root[data-tone="dark"] {
  --bg: transparent;
  --surface: #2a2a2d;
  --ink: #f5f5f7;
  --mute: #a1a1a6;
  --line: #3a3a3e;
  --accent: #ff6b61;
  --on-ink: #1d1d1f;
  --well: #2c2c2f;
  --gap: #1f1f1f;
}
:root[data-tone="dark"] .phone {
  box-shadow:
    0 0 0 1px #4a4a50,
    0 1px 0 2px #3a3a3e inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
:root[data-tone="dark"] .thumb:not([aria-checked="true"]):not(:focus-visible) .im {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ---------- wider screens ----------
   The page was one 480 px phone column at every width, so a tablet or a laptop
   showed a narrow strip with the themes in a sideways scroller. From a tablet
   up the themes are a grid (all of them in view), and from a laptop up the
   phone stands on the left while the words, the switch, the order buttons and
   the themes sit beside it. The embed (a product page's frame) follows the
   same steps without the header, benefits and order buttons. */
@media (min-width: 600px) {
  :root {
    --pw: 244px;
  }
  .wrap {
    max-width: 680px;
    padding-inline: 24px;
  }
  .stage {
    max-width: 400px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero p {
    font-size: 15px;
  }
  .rail.thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 14px 10px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    justify-items: center;
  }
  .rail.thumbs .grp {
    grid-column: 1 / -1;
    justify-self: start;
    padding-inline: 0;
  }
  .rail.thumbs .thumb {
    width: 100%;
    max-width: 104px;
  }
  .rail.thumbs .thumb .im {
    width: 100%;
  }
  .buybar {
    padding-inline: max(24px, calc((100vw - 680px) / 2 + 24px));
  }
  .usp-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  :root {
    --pw: 272px;
  }
  .wrap {
    max-width: 1160px;
    padding-inline: 40px;
    padding-bottom: 48px;
    display: grid;
    grid-template-columns: minmax(380px, 440px) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "stage hero"
      "stage switch"
      "stage buy"
      "stage pick"
      "stage note"
      "stage usp"
      "stage fine";
    grid-template-rows: auto auto auto auto auto auto auto 1fr;
    column-gap: 72px;
    row-gap: 20px;
    align-items: start;
  }
  .top {
    grid-area: top;
  }
  .hero {
    grid-area: hero;
    text-align: left;
    align-items: flex-start;
    padding-top: 28px;
  }
  .hero h1 {
    font-size: 40px;
    line-height: 1.06;
  }
  .hero p {
    font-size: 16px;
  }
  .pick-top {
    grid-area: switch;
    justify-content: flex-start;
  }
  .stage {
    grid-area: stage;
    position: sticky;
    top: 24px;
    max-width: 440px;
    justify-self: center;
  }
  .pick {
    grid-area: pick;
  }
  .actions {
    grid-area: note;
  }
  .usp {
    grid-area: usp;
    margin-top: 12px;
  }
  .usp-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fine {
    grid-area: fine;
    text-align: left;
  }
  /* beside the phone, under the switch: no longer a bar fixed to the screen */
  .buybar {
    grid-area: buy;
    position: static;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    grid-template-columns: minmax(0, 260px) auto;
  }
  body.embed .wrap {
    max-width: 1000px;
    padding-bottom: 8px;
    grid-template-columns: minmax(340px, 420px) minmax(0, 520px);
    grid-template-areas:
      "stage switch"
      "stage pick"
      "stage note";
    grid-template-rows: auto auto 1fr;
    justify-content: center;
    column-gap: 56px;
    align-items: center;
  }
  body.embed .stage {
    position: relative;
    top: auto;
  }
}