/* Souva: layout modelled on a fixed copy column + scrolling panel column */

:root {
  --copy-column: max(534px, 37.083333vw);
  --panel-gap: 40px;

  --bg: #fbfaf7;
  --ink: #141412;
  --muted: rgba(20, 20, 18, 0.42);
  --muted-strong: rgba(20, 20, 18, 0.62);
  --panel: #f1eee8;
  --line: rgba(20, 20, 18, 0.08);

  --coral: #f58d72;
  --coral-deep: #c4533b;
  --charcoal: #2a2a2a;

  --steel-0: #0b0c0e;
  --steel-1: #14171c;
  --steel-blue: #5f7893;
  --paper: #f2f1ec;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --cjk-serif: Georgia;
  --cjk-sans: "Helvetica Neue";
  --serif: "Playfair Display", Georgia, var(--cjk-serif), serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, var(--cjk-sans), "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

::selection { background: rgba(245, 141, 114, 0.35); }

:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- page grid ---------- */

.landing-page {
  position: relative;
  display: grid;
  grid-template-columns: var(--copy-column) minmax(0, 1fr);
  min-height: 100svh;
}

.copy-pane {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  align-self: start;
  min-width: 0;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  transform: translate(-50%, -52%);
  text-align: center;
}

.hero-icon {
  display: block;
  width: 85.5px;
  height: 85.5px;
  flex: 0 0 auto;
  border-radius: 22.8px;
  object-fit: cover;
}

.hero-icon--light {
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px -12px rgba(20, 20, 18, 0.25);
}

.hero-icon--dark {
  box-shadow: 0 14px 34px -12px rgba(11, 12, 14, 0.55);
}

.message-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

h1, h2, h3, p { margin: 0; }

h1 {
  width: 100%;
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 500;
  line-height: 72px;
  letter-spacing: -1.92px;
}

h1 span {
  display: block;
  white-space: nowrap;
}

.message-group p {
  width: 100%;
  color: var(--muted);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.6px;
}

.message-group .eyebrow { margin-bottom: -8px; font-size: 13px; line-height: 1; letter-spacing: 0.08em; }

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- CTA that morphs into a QR card ---------- */

.cta-shell {
  position: relative;
  z-index: 5;
  width: var(--cta-w, 158px);
  height: 62px;
}

.cta {
  position: absolute;
  z-index: 1;
  right: 50%;
  bottom: 0;
  display: inline-flex;
  width: var(--cta-w, 158px);
  height: 62px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
  background: var(--ink);
  border-radius: 1000px;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  transform: translateX(50%);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition:
    width 280ms var(--ease-spring),
    height 280ms var(--ease-spring),
    border-radius 220ms var(--ease-out),
    background-color 220ms ease,
    box-shadow 280ms ease;
}

.cta-text {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -0.6px;
  transition: opacity 140ms ease;
}

.cta-qr {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease 80ms;
}

.cta-qr-code {
  position: relative;
  display: block;
  width: 196px;
  height: 196px;
  padding: 12px;
  background: #ffffff;
  border-radius: 14px;
}

.cta-qr-code img {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-qr-code .qr-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px #ffffff;
}

.cta-caption {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.05px;
}

@media (hover: hover) and (pointer: fine) {
  .cta-shell::before {
    position: absolute;
    z-index: 0;
    right: 50%;
    bottom: -4px;
    width: calc(100% + 8px);
    height: 70px;
    border-radius: 1000px;
    content: "";
    transform: translateX(50%);
  }

  .cta-shell:hover::before,
  .cta-shell:focus-within::before {
    width: 272px;
    height: 312px;
    border-radius: 32px;
  }

  .cta-shell:hover .cta,
  .cta-shell:focus-within .cta {
    width: 264px;
    height: 304px;
    border-radius: 28px;
    box-shadow:
      0 60px 140px -20px rgba(20, 20, 18, 0.32),
      0 30px 80px -10px rgba(20, 20, 18, 0.2),
      0 8px 24px rgba(20, 20, 18, 0.16);
  }

  .cta-shell:hover .cta-text,
  .cta-shell:focus-within .cta-text { opacity: 0; }

  .cta-shell:hover .cta-qr,
  .cta-shell:focus-within .cta-qr { opacity: 1; }

  /* plain buttons (no QR) only lift slightly */
  .cta-shell--plain:hover::before,
  .cta-shell--plain:focus-within::before { width: calc(100% + 8px); height: 70px; border-radius: 1000px; }

  .cta-shell--plain:hover .cta,
  .cta-shell--plain:focus-within .cta {
    width: calc(100% + 8px);
    height: 66px;
    border-radius: 1000px;
    box-shadow: 0 18px 40px -14px rgba(20, 20, 18, 0.4);
  }

  .cta-shell--plain:hover .cta-text,
  .cta-shell--plain:focus-within .cta-text { opacity: 1; }
}

/* ---------- footer under the copy column ---------- */

.site-footer {
  position: absolute;
  bottom: 40px;
  left: 0;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer a.is-active,
.site-footer a[aria-current="page"] {
  color: var(--ink);
}

.brand-link {
  position: absolute;
  top: 36px;
  left: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-decoration: none;
}

.brand-link img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------- right column panels ---------- */

.panel-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--panel-gap);
  padding: 40px 40px 40px 0;
}

.panel {
  position: relative;
  display: flex;
  min-height: calc(100svh - 80px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background: var(--panel);
  scroll-margin-top: 40px;
}

.panel--auto { min-height: 0; }

.js .panel[data-reveal] {
  opacity: 0;
  transform: translateY(72px);
  transition:
    opacity 600ms var(--ease-out),
    transform 760ms var(--ease-out);
}

.js .panel[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.panel--steel {
  color: var(--paper);
  background:
    radial-gradient(70% 26% at 50% 0%, rgba(221, 227, 235, 0.08) 0%, rgba(221, 227, 235, 0) 70%),
    linear-gradient(180deg, #0c1015 0%, #0a0d11 48%, #0e141b 100%);
}

.panel--night {
  color: var(--paper);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(242, 241, 236, 0.07) 0%, rgba(242, 241, 236, 0) 70%),
    radial-gradient(70% 70% at 50% 55%, #121418 0%, #0b0c0e 70%, #08090a 100%);
}

.panel--coral {
  color: #ffffff;
  background-image: linear-gradient(216.7deg, #c4533b 4.8%, #e07e63 91.2%);
}

.panel--paper { background: var(--paper); }

.panel--souva {
  background:
    radial-gradient(70% 30% at 50% 0%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #f6f2ec 0%, #f0ebe3 55%, #efe6dc 100%);
}

.panel-caption--dark { color: var(--muted); }
.panel-caption--dark a { color: var(--ink); }
.panel-caption--dark a:hover { color: var(--coral-deep); }

/* ---------- Souva phone: the mark is drawn line by line, then filled ---------- */

.phone-stage--brand { aspect-ratio: 440 / 800; }

.phone-screen.brand-screen {
  color: #141412;
  background: radial-gradient(80% 48% at 50% 46%, #fefcf9 0%, #f4f0ea 60%, #ece6dd 100%);
}

.brand-mark {
  left: 50%;
  top: 46%;
  width: calc(var(--p) * 124);
  height: calc(var(--p) * 124);
  transform: translate(-50%, -50%);
  animation: brand-pop 9s var(--ease-out) infinite;
}

.brand-mark > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand-lines { overflow: visible; }

.ln {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  opacity: 0;
}

.ln-top { stroke: #f58d72; animation: ln-top 9s cubic-bezier(0.55, 0.1, 0.35, 1) infinite; }
.ln-bot { stroke: #2a2a2a; animation: ln-bot 9s cubic-bezier(0.55, 0.1, 0.35, 1) infinite; }

.brand-fill { opacity: 1; animation: brand-fill 9s ease infinite; }
.brand-fill-bot { animation-name: brand-fill-bot; }

@keyframes ln-top {
  0%, 4% { stroke-dashoffset: 1; opacity: 1; }
  38% { stroke-dashoffset: 0; opacity: 1; }
  52% { stroke-dashoffset: 0; opacity: 1; }
  62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ln-bot {
  0%, 14% { stroke-dashoffset: 1; opacity: 1; }
  46% { stroke-dashoffset: 0; opacity: 1; }
  54% { stroke-dashoffset: 0; opacity: 1; }
  64%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes brand-fill {
  0%, 40% { opacity: 0; }
  54%, 88% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@keyframes brand-fill-bot {
  0%, 46% { opacity: 0; }
  58%, 88% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@keyframes brand-pop {
  0%, 52% { transform: translate(-50%, -50%) scale(1); }
  60% { transform: translate(-50%, -50%) scale(1.05); }
  70%, 100% { transform: translate(-50%, -50%) scale(1); }
}

.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.panel-caption {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  color: rgba(242, 241, 236, 0.5);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.panel-caption a {
  color: rgba(242, 241, 236, 0.9);
  text-decoration: none;
  transition: color 160ms ease;
}

.panel-caption a:hover { color: #ffffff; }

/* text column inside a panel */
.panel-copy {
  position: relative;
  display: flex;
  width: min(601px, calc(100% - 144px));
  margin: 0 auto;
  padding: 104px 0;
  flex-direction: column;
  gap: 40px;
}

.panel-title {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -1.2px;
}

.panel-lede {
  color: var(--muted);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.6px;
}

.panel--coral .panel-lede { color: rgba(255, 255, 255, 0.86); }

.panel--coral .eyebrow,
.panel--steel .eyebrow,
.panel--night .eyebrow { color: rgba(255, 255, 255, 0.62); }

.panel--steel .panel-lede,
.panel--night .panel-lede { color: rgba(242, 241, 236, 0.62); }

/* quote-style list (studio principles) */
.quote-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.quote-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quote-item blockquote,
.quote-item .quote-text {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.6px;
}

.quote-item cite,
.quote-item .label {
  order: 2; /* the title sits under its paragraph, as before */
  margin: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  opacity: 0.72;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.6px;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat,
    rgba(20, 20, 18, 0.06);
  content: "";
  transition: transform 260ms var(--ease-out);
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p {
  padding: 0 52px 24px 0;
  color: var(--muted-strong);
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: -0.3px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 32px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 20px;
}

.contact-card h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.8px;
}

.contact-card p {
  color: rgba(242, 241, 236, 0.55);
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.3px;
}

.pill-link {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 1000px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: transform 220ms var(--ease-spring), background-color 160ms ease;
}

.pill-link:hover { transform: scale(1.04); background: #ffffff; }

.pill-link .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

/* ---------- legal / support documents ---------- */

.doc {
  position: relative;
  display: flex;
  width: min(640px, calc(100% - 144px));
  margin: 0 auto;
  padding: 96px 0;
  flex-direction: column;
  gap: 0;
}

.doc-section {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 8px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.doc-section:first-child { border-top: 0; padding-top: 0; }

.doc-num {
  padding-top: 4px;
  color: var(--coral-deep);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.doc-section h2 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.6px;
}

.doc-section p {
  color: var(--muted-strong);
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.25px;
}

.doc-section p + p { margin-top: 12px; }

.doc-section a { text-decoration-color: rgba(20, 20, 18, 0.25); text-underline-offset: 3px; }

.doc-note {
  margin: 8px 0 40px;
  padding: 22px 24px;
  color: var(--muted-strong);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

/* ---------- phone stage (scales with its container) ---------- */

.phone-stage {
  --p: calc(100cqw / 440);
  position: relative;
  width: min(440px, calc(100% - 48px), calc((100svh - 220px) * 0.55));
  aspect-ratio: 440 / 800;
  container-type: inline-size;
}

.phone-stage > * { position: absolute; }

.phone {
  left: calc(var(--p) * 52);
  top: calc(var(--p) * 52);
  width: calc(var(--p) * 336);
  height: calc(var(--p) * 706.6);
  z-index: 2;
}

.phone-body {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--p) * 52);
  background: #060607;
  box-shadow: 0 0 0 1px #2e3137, 0 calc(var(--p) * 40) calc(var(--p) * 80) rgba(0, 0, 0, 0.6);
}

.phone-btn {
  position: absolute;
  width: calc(var(--p) * 3);
  border-radius: 2px;
  background: #24262b;
}

.phone-screen {
  position: absolute;
  left: calc(var(--p) * 10);
  top: calc(var(--p) * 10);
  width: calc(var(--p) * 316);
  height: calc(var(--p) * 686.6);
  overflow: hidden;
  border-radius: calc(var(--p) * 42);
  background:
    radial-gradient(120% 50% at 30% 0%, rgba(60, 68, 80, 0.35) 0%, rgba(20, 22, 26, 0) 60%),
    linear-gradient(180deg, #121419 0%, #0c0e12 55%, #0e1116 100%);
  font-family: "Montserrat", var(--sans);
  color: #f2f2f2;
}

.phone-screen > * { position: absolute; }

.island {
  left: 50%;
  top: calc(var(--p) * 10);
  width: calc(var(--p) * 92);
  height: calc(var(--p) * 27);
  margin-left: calc(var(--p) * -46);
  border-radius: calc(var(--p) * 14);
  background: #000;
  z-index: 5;
}

.status {
  left: 0;
  right: 0;
  top: calc(var(--p) * 14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--p) * 26) 0 calc(var(--p) * 36);
  font-family: -apple-system, "SF Pro Text", var(--sans);
  font-size: calc(var(--p) * 13);
  font-weight: 600;
  z-index: 5;
}

.status svg { height: calc(var(--p) * 10); width: auto; }
.status .icons { display: flex; gap: calc(var(--p) * 5); align-items: center; }

.ui-btn {
  display: grid;
  width: calc(var(--p) * 48);
  height: calc(var(--p) * 48);
  place-items: center;
  border-radius: 50%;
  background: #1d2026;
}

.ui-btn svg { width: calc(var(--p) * 18); height: calc(var(--p) * 18); }

.ui-refresh { left: calc(var(--p) * 18); top: calc(var(--p) * 64); }
.ui-grid { left: calc(var(--p) * 18); bottom: calc(var(--p) * 40); }
.ui-person { right: calc(var(--p) * 18); bottom: calc(var(--p) * 100); }
.ui-theme { right: calc(var(--p) * 18); bottom: calc(var(--p) * 40); }

.ui-pill {
  left: 50%;
  bottom: calc(var(--p) * 39);
  display: flex;
  height: calc(var(--p) * 50);
  align-items: center;
  gap: calc(var(--p) * 10);
  padding: 0 calc(var(--p) * 20) 0 calc(var(--p) * 16);
  border-radius: 1000px;
  background: #1d2026;
  font-size: calc(var(--p) * 13.5);
  font-weight: 600;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ui-pill svg { width: calc(var(--p) * 14); height: calc(var(--p) * 16); }

/* quote cards */
.deck {
  left: calc(var(--p) * 44);
  top: calc(var(--p) * 214);
  width: calc(var(--p) * 228);
  height: calc(var(--p) * 256);
}

.qcard {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--p) * 30);
  border-radius: calc(var(--p) * 30);
  color: #1b1a17;
  background:
    repeating-linear-gradient(0deg, rgba(60, 50, 30, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60, 50, 30, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 30% 0%, #efebe4 0%, #e2ddd3 55%, #d6d0c4 100%);
  box-shadow: 0 calc(var(--p) * 3) 0 #b4aea2, 0 calc(var(--p) * 20) calc(var(--p) * 40) rgba(0, 0, 0, 0.45);
  font-family: "EB Garamond", Georgia, var(--cjk-serif), serif;
  font-size: calc(var(--p) * 19);
  line-height: 1.38;
  text-align: center;
  transform-origin: 50% 100%;
  transition:
    transform 760ms var(--ease-out),
    opacity 520ms ease,
    filter 520ms ease;
}

.qcard .qtools {
  position: absolute;
  top: calc(var(--p) * 18);
  right: calc(var(--p) * 18);
  display: flex;
  gap: calc(var(--p) * 18);
  color: #3a3833;
}

.qcard .qtools svg { width: calc(var(--p) * 15); height: calc(var(--p) * 15); }

.qcard.is-back {
  transform: translateY(calc(var(--p) * 12)) scale(0.94);
  filter: brightness(0.72);
  z-index: 1;
}

.qcard.is-front { z-index: 2; }

.qcard.is-leaving {
  z-index: 3;
  opacity: 0;
  transform: translateY(calc(var(--p) * -70)) rotate(-7deg) scale(0.98);
}

.qcard.no-anim { transition: none; }

/* floating chips */
.chip {
  z-index: 9;
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 11);
  padding: calc(var(--p) * 12) calc(var(--p) * 18) calc(var(--p) * 12) calc(var(--p) * 14);
  border-radius: calc(var(--p) * 20);
  color: var(--steel-0);
  background: var(--paper);
  box-shadow: 0 calc(var(--p) * 22) calc(var(--p) * 44) rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  white-space: nowrap;
  font-family: "Montserrat", var(--sans);
  animation: float 6s ease-in-out infinite;
}

.chip svg { width: calc(var(--p) * 22); height: calc(var(--p) * 22); flex: none; }
.chip b { display: block; font-size: calc(var(--p) * 17); font-weight: 700; letter-spacing: -0.2px; line-height: 1.1; }
.chip small { display: block; margin-top: 2px; color: #6e7076; font-size: calc(var(--p) * 11.5); font-weight: 600; line-height: 1.2; }

.chip--fire {
  color: #1a0e05;
  background: linear-gradient(135deg, #ffb35c 0%, #ff8a2b 55%, #f2621f 100%);
}

.chip--fire small { color: rgba(26, 14, 5, 0.72); }

.chip-slot {
  z-index: 9;
  transition: opacity 380ms ease, scale 520ms var(--ease-spring);
}

.chip-slot.is-hidden { opacity: 0; scale: 0.9; }
.chip-slot.is-swapping { opacity: 0; scale: 0.96; transition-duration: 220ms; }

.chip-a { left: calc(var(--p) * 6); top: calc(var(--p) * 250); --r: -3deg; }
.chip-b { left: calc(var(--p) * 214); top: calc(var(--p) * 590); --r: 4deg; }
.phone-stage[data-chip-at="disciplines"] .chip-a { left: calc(var(--p) * 196); top: calc(var(--p) * 600); --r: 3deg; }
.phone-stage[data-chip-at="milestone"] .chip-a { top: calc(var(--p) * 452); }
.chip-a .chip { animation-delay: -1.5s; }
.chip-b .chip { animation-delay: -4s; }

.chip-ico { display: flex; }

.float-icon {
  left: calc(var(--p) * 322);
  top: calc(var(--p) * 18);
  z-index: 9;
  width: calc(var(--p) * 82);
  height: calc(var(--p) * 82);
  border-radius: calc(var(--p) * 19);
  box-shadow: 0 calc(var(--p) * 20) calc(var(--p) * 40) rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --r: 8deg;
  animation: float 7s ease-in-out infinite;
  animation-delay: -2.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(calc(var(--p) * -8)) rotate(var(--r, 0deg)); }
}

/* entrance for floating pieces */
.js .panel[data-reveal] .chip,
.js .panel[data-reveal] .float-icon {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 600ms ease, translate 900ms var(--ease-spring);
}

.js .panel[data-reveal].is-in .chip,
.js .panel[data-reveal].is-in .float-icon {
  opacity: 1;
  translate: 0 0;
}

.js .panel[data-reveal].is-in .float-icon { transition-delay: 350ms; }
.js .panel[data-reveal].is-in .chip-a .chip { transition-delay: 500ms; }
.js .panel[data-reveal].is-in .chip-b .chip { transition-delay: 650ms; }

/* ---------- phone scenes ---------- */

.scene {
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition:
    opacity 560ms ease,
    transform 820ms var(--ease-out),
    visibility 0s linear 820ms;
}

.scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  z-index: 2;
}

.scene.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: scale(0.965);
  z-index: 1;
}

.scene-quotes > * { position: absolute; }

/* a leaving scene keeps its finished state while it fades */
.scene.is-leaving .fx,
.scene.is-leaving .t,
.scene-mile.is-leaving > *,
.scene-splash.is-leaving .splash-flame { opacity: 1; }

.scene .fx { opacity: 0; }

.scene.is-active .fx {
  animation: fx-up 720ms var(--ease-out) both;
  animation-delay: calc(var(--d, 0ms) + 120ms);
}

@keyframes fx-up {
  from { opacity: 0; transform: translateY(calc(var(--p) * 16)); }
  to { opacity: 1; transform: none; }
}

/* 1 · launch */
.scene-splash {
  display: grid;
  place-items: center;
  background: radial-gradient(70% 42% at 50% 47%, #171a20 0%, #0a0b0d 62%, #060607 100%);
}

.splash-flame {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--p) * 46);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.scene-splash.is-active .splash-flame { animation: flame-in 1200ms var(--ease-out) 200ms both, flame-breathe 2.6s ease-in-out 1400ms infinite; }

@keyframes flame-in {
  from { opacity: 0; filter: blur(8px); transform: translate(-50%, -42%) scale(0.86); }
  to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
}

@keyframes flame-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.035); }
}

/* 3 · disciplines */
.scene-disc,
.scene-themes {
  display: flex;
  flex-direction: column;
  padding: calc(var(--p) * 60) calc(var(--p) * 15) 0;
  font-family: "Montserrat", var(--sans);
}

.scene-disc { padding-top: calc(var(--p) * 92); background: #0c0d10; }
.scene-themes { background: #0c0d10; }

.d-head {
  display: grid;
  grid-template-columns: calc(var(--p) * 34) 1fr calc(var(--p) * 34);
  align-items: center;
  text-align: center;
}

.d-head b { font-size: calc(var(--p) * 15); font-weight: 700; }

.d-x {
  display: grid;
  width: calc(var(--p) * 34);
  height: calc(var(--p) * 34);
  place-items: center;
  border-radius: 50%;
  background: #1f232a;
}

.d-x svg { width: calc(var(--p) * 13); height: calc(var(--p) * 13); }

.d-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(var(--p) * 14);
}

.d-date { color: #a7a8ac; font-size: calc(var(--p) * 10); font-weight: 600; }
.d-count { margin-top: calc(var(--p) * 3); font-size: calc(var(--p) * 20); font-weight: 800; letter-spacing: -0.3px; }

.d-ring {
  position: relative;
  display: grid;
  width: calc(var(--p) * 40);
  height: calc(var(--p) * 40);
  place-items: center;
}

.d-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.d-ring circle { fill: none; stroke-width: 3; }
.d-ring .trk { stroke: #1f2227; }
.d-ring .bar { stroke: #e8e6e0; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 50; transition: stroke-dashoffset 700ms var(--ease-out); }
.d-ring b { font-size: calc(var(--p) * 12); font-weight: 800; }
.scene-disc.is-step .d-ring .bar { stroke-dashoffset: 25; }

.d-label {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--p) * 14);
  color: #8e9096;
  font-size: calc(var(--p) * 7.5);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.d-label span:last-child { letter-spacing: 0.02em; text-transform: none; font-weight: 600; }
.d-label i { display: inline-block; width: calc(var(--p) * 4); height: calc(var(--p) * 4); margin-left: calc(var(--p) * 3); border-radius: 50%; background: #55585e; vertical-align: middle; }

.d-slider {
  position: relative;
  display: grid;
  height: calc(var(--p) * 50);
  margin-top: calc(var(--p) * 7);
  place-items: center;
  padding-left: calc(var(--p) * 40);
  border-radius: 1000px;
  background: #15171b;
  color: #7c7e84;
  font-size: calc(var(--p) * 11);
  font-weight: 600;
}

.d-knob {
  position: absolute;
  left: calc(var(--p) * 4);
  top: calc(var(--p) * 4);
  display: grid;
  width: calc(var(--p) * 42);
  height: calc(var(--p) * 42);
  place-items: center;
  border-radius: 50%;
  color: #0b0c0e;
  background: #f2f1ec;
}

.d-knob svg { width: calc(var(--p) * 15); height: calc(var(--p) * 15); }

.d-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--p) * 6);
  margin-top: calc(var(--p) * 7);
}

.d-opts span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--p) * 4);
  padding: calc(var(--p) * 8) 0;
  border-radius: calc(var(--p) * 13);
  background: #15171b;
  font-size: calc(var(--p) * 9.5);
  font-weight: 600;
}

.d-opts svg { width: calc(var(--p) * 11); height: calc(var(--p) * 11); color: #d0d0d0; }

.d-card {
  margin-top: calc(var(--p) * 9);
  padding: calc(var(--p) * 11) calc(var(--p) * 11) calc(var(--p) * 12);
  border-radius: calc(var(--p) * 18);
  background: #14161a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.d-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--p) * 8); }
.d-card-head b { display: block; font-size: calc(var(--p) * 11.5); font-weight: 700; line-height: 1.2; }
.d-card-head small { display: block; margin-top: calc(var(--p) * 3); color: #9a9ca1; font-size: calc(var(--p) * 9); font-weight: 600; }

.d-check {
  position: relative;
  display: grid;
  flex: none;
  width: calc(var(--p) * 30);
  height: calc(var(--p) * 30);
  place-items: center;
  border-radius: 50%;
  color: #121418;
  background: #1c1f24;
  transition: background-color 300ms ease, transform 420ms var(--ease-spring);
}

.d-check > svg { width: calc(var(--p) * 13); height: calc(var(--p) * 13); }
.d-check.is-done { background: #dad5cb; }
.d-check-blue.is-done { background: #8fa3b8; }
.d-check-gold.is-done { background: #c9a86a; transform: scale(1.08); }

.d-check .d-prog { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.d-check .d-prog circle { fill: none; stroke: #c9a86a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 40; transition: stroke-dashoffset 800ms var(--ease-out), opacity 200ms ease; }
.d-check .d-plus { color: #7c7e84; }
.d-check .d-tick { position: absolute; opacity: 0; transition: opacity 200ms ease 150ms; }
.scene-disc.is-filling .d-prog circle { stroke-dashoffset: 0; }
.d-check-gold.is-done .d-prog,
.d-check-gold.is-done .d-plus { opacity: 0; }
.d-check-gold.is-done .d-tick { opacity: 1; }

.d-grid {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  gap: calc(var(--p) * 1.5);
  margin-top: calc(var(--p) * 9);
}

.d-grid i { display: block; aspect-ratio: 1; border-radius: calc(var(--p) * 1.6); background: #1d2024; transition: background-color 300ms ease, transform 360ms var(--ease-spring); }
.d-grid[data-tone="white"] i.on { background: #dad5cb; }
.d-grid[data-tone="gold"] i.on { background: #c9a86a; }
.d-grid[data-tone="gold"] i.today { background: #4a4032; }
.d-grid[data-tone="gold"] i.today.on { background: #c9a86a; transform: scale(1.25); }
.d-grid[data-tone="blue"] i.on { background: #8fa3b8; }
.d-grid i.off { visibility: hidden; }

/* 4 · milestone */
.scene-mile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--p) * 108);
  background:
    radial-gradient(60% 28% at 50% 22%, rgba(221, 227, 235, 0.1) 0%, rgba(221, 227, 235, 0) 100%),
    #08090b;
  font-family: "Montserrat", var(--sans);
  text-align: center;
}

.scene-mile > * { opacity: 0; }
.m-hex { width: calc(var(--p) * 92); height: auto; filter: drop-shadow(0 calc(var(--p) * 10) calc(var(--p) * 24) rgba(0, 0, 0, 0.6)); }
.m-num { margin-top: calc(var(--p) * 26); color: #dfe2e6; font-size: calc(var(--p) * 50); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.m-label { margin-top: calc(var(--p) * 6); font-size: calc(var(--p) * 11.5); font-weight: 700; }
.m-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--p) * 3); width: calc(var(--p) * 128); margin-top: calc(var(--p) * 14); }
.m-grid i { display: block; aspect-ratio: 1; border-radius: calc(var(--p) * 2.4); background: #1d2024; transition: background-color 200ms ease, transform 300ms var(--ease-spring); }
.m-grid i.on { background: #dad5cb; }
.m-title { margin-top: calc(var(--p) * 16); font-size: calc(var(--p) * 14); font-weight: 800; }
.m-sub { margin-top: calc(var(--p) * 6); color: #9a9ca1; font-size: calc(var(--p) * 9.5); font-weight: 600; }
.m-btn, .m-share { position: absolute; left: calc(var(--p) * 18); right: calc(var(--p) * 18); }
.m-btn { bottom: calc(var(--p) * 84); display: grid; height: calc(var(--p) * 42); place-items: center; border-radius: 1000px; color: #0b0c0e; background: #f2f1ec; font-size: calc(var(--p) * 12); font-weight: 700; }
.m-share { bottom: calc(var(--p) * 58); color: #9a9ca1; font-size: calc(var(--p) * 10.5); font-weight: 700; }

.scene-mile.is-active > * { animation: fx-up 700ms var(--ease-out) both; }
.scene-mile.is-active .m-hex { animation: hex-in 900ms var(--ease-spring) 150ms both; }
.scene-mile.is-active .m-num { animation-delay: 380ms; }
.scene-mile.is-active .m-label { animation-delay: 440ms; }
.scene-mile.is-active .m-grid { animation-delay: 480ms; }
.scene-mile.is-active .m-title { animation-delay: 700ms; }
.scene-mile.is-active .m-sub { animation-delay: 760ms; }
.scene-mile.is-active .m-btn,
.scene-mile.is-active .m-share { animation-delay: 900ms; }

@keyframes hex-in {
  from { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}

/* 5 · themes */
.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--p) * 9);
  margin-top: calc(var(--p) * 18);
}

.t {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: calc(var(--p) * 17);
  color: #f4f3ef;
  background: #1a1d24;
  font-size: calc(var(--p) * 22);
  font-weight: 800;
  outline: calc(var(--p) * 2) solid transparent;
  outline-offset: calc(var(--p) * 3);
  opacity: 0;
  transition: outline-color 300ms ease;
}

.t:not(.t1)::after {
  position: absolute;
  top: calc(var(--p) * 9);
  right: calc(var(--p) * 10);
  width: calc(var(--p) * 7);
  height: calc(var(--p) * 6);
  border: calc(var(--p) * 1.2) solid currentColor;
  border-radius: calc(var(--p) * 1.5);
  opacity: 0.55;
  content: "";
}

.t.is-selected { outline-color: #e8e8e8; }

.scene-themes.is-active .t { animation: tile-in 600ms var(--ease-out) both; }

@keyframes tile-in {
  from { opacity: 0; transform: translateY(calc(var(--p) * 18)) scale(0.94); }
  to { opacity: 1; transform: none; }
}

.t1 { background: radial-gradient(120% 90% at 50% 0%, #252a33, #12151b); }
.t2 { color: #1b1a17; background: radial-gradient(120% 100% at 30% 10%, #f6f2ec, #e3dbcf); }
.t3 { background: linear-gradient(118deg, transparent 46%, rgba(255,255,255,.22) 47%, transparent 48%), linear-gradient(64deg, transparent 60%, rgba(255,255,255,.14) 61%, transparent 62%), #0b0b0c; }
.t4 { background: radial-gradient(100% 100% at 50% 0%, #34363a, #1f2023); font-weight: 600; }
.t5 { color: #2a241c; background: radial-gradient(110% 100% at 50% 20%, #e3d6bf, #c9b896); font-family: "EB Garamond", Georgia, var(--cjk-serif), serif; font-weight: 400; font-size: calc(var(--p) * 25); }
.t6 { background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.18) 39%, transparent 40%), linear-gradient(160deg, transparent 55%, rgba(255,255,255,.12) 56%, transparent 57%), #0d0e10; font-family: "EB Garamond", Georgia, var(--cjk-serif), serif; font-weight: 400; font-size: calc(var(--p) * 25); }
.t7 { color: #1d1c19; background: linear-gradient(130deg, transparent 50%, rgba(0,0,0,.12) 51%, transparent 52%), radial-gradient(#f3f2ef, #dddbd5); font-family: "EB Garamond", Georgia, var(--cjk-serif), serif; font-weight: 400; font-size: calc(var(--p) * 25); }
.t8 { background: linear-gradient(180deg, #343a45, #20242c); font-weight: 600; font-size: calc(var(--p) * 18); }
.t9 { background: linear-gradient(115deg, transparent 44%, rgba(160,220,180,.25) 45%, transparent 46%), #0f2419; font-family: "EB Garamond", Georgia, var(--cjk-serif), serif; font-weight: 400; font-size: calc(var(--p) * 25); }
.t10 { background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), #26282c; font-family: "Playfair Display", Georgia, var(--cjk-serif), serif; font-weight: 500; }
.t11 { color: #1d1c19; background: radial-gradient(#d9d6d0, #bfbbb3); font-weight: 700; }
.t12 { background: linear-gradient(120deg, transparent 50%, rgba(255,180,180,.25) 51%, transparent 52%), #3b1013; font-family: "EB Garamond", Georgia, var(--cjk-serif), serif; font-weight: 400; font-size: calc(var(--p) * 25); }
.t13 { background: radial-gradient(#7a7976, #555452); }
.t14 { background: radial-gradient(90% 60% at 50% 0%, #2c3e5a, #0d121b 70%); font-family: "Playfair Display", Georgia, var(--cjk-serif), serif; font-weight: 500; }
.t15 { background: radial-gradient(circle at 50% 18%, #000 26%, rgba(255,255,255,.75) 28%, rgba(255,255,255,0) 36%), #08090a; align-items: end; padding-bottom: calc(var(--p) * 12); }
.t16 { background: linear-gradient(#1a1c20, #111215); font-family: "Playfair Display", Georgia, var(--cjk-serif), serif; font-weight: 500; }
.t17 { background: radial-gradient(90% 60% at 50% 0%, #34507a, #0f1520 70%); }
.t18 { background: radial-gradient(90% 70% at 50% 100%, #6b3416, #1d0f08 75%); font-family: "EB Garamond", Georgia, var(--cjk-serif), serif; font-weight: 400; font-size: calc(var(--p) * 25); }

/* ---------- streak widget ---------- */

.feature-block {
  position: relative;
  display: flex;
  width: min(560px, calc(100% - 64px));
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 96px 0;
  text-align: center;
}

.feature-block .panel-title { max-width: 480px; text-wrap: balance; }

.widget {
  width: 100%;
  padding: 26px 26px 24px;
  color: #f2f2f2;
  background: #16181c;
  border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  font-family: "Montserrat", var(--sans);
  text-align: left;
}

.widget-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.widget-title { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px; }
.widget-sub { margin-top: 6px; color: #9a9ca1; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.widget-check {
  display: grid;
  flex: none;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: #141619;
  background: #2a2d33;
  transform: scale(0.9);
  transition: background-color 300ms ease, transform 420ms var(--ease-spring);
}

.widget-check svg { width: 20px; height: 20px; opacity: 0.25; transition: opacity 300ms ease; }
.widget.is-done .widget-check { background: #dad5cb; transform: scale(1); }
.widget.is-done .widget-check svg { opacity: 1; }

.streak-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
}

.streak-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: #1f2226;
  transition: background-color 220ms ease, transform 320ms var(--ease-spring);
}

.streak-grid i.on { background: #dad5cb; transform: scale(1); }
.streak-grid i.pop { transform: scale(1.18); }

/* ---------- discipline lock slider ---------- */

.lock-card {
  width: 100%;
  padding: 28px;
  color: #f2f2f2;
  background: #0f1114;
  border-radius: 28px;
  box-shadow: 0 40px 80px -24px rgba(11, 12, 14, 0.55);
  font-family: "Montserrat", var(--sans);
  text-align: left;
}

.lock-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #8e9096;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lock-label .state { letter-spacing: 0.04em; text-transform: none; font-weight: 600; transition: color 300ms ease; }
.lock-card.is-locked .lock-label .state { color: #f2f1ec; }

.lock-track {
  position: relative;
  height: 68px;
  overflow: hidden;
  border-radius: 1000px;
  background: #16181c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.lock-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a3038, #3a4350);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--ease-out);
}

.lock-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 60px;
  color: #8e9096;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

.lock-card.is-locked .lock-text { padding: 0 60px 0 0; color: #f2f1ec; }

.lock-knob {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  color: #0b0c0e;
  background: #f2f1ec;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transition: left 1100ms var(--ease-out);
}

.lock-knob svg { width: 22px; height: 22px; }
.lock-knob .shackle { transition: transform 300ms var(--ease-spring); }
.lock-card:not(.is-locked) .lock-knob .shackle { transform: translate(4px, -2px) rotate(18deg); transform-origin: 15.8px 10.5px; }

.lock-card.is-locked .lock-fill { transform: scaleX(1); }
.lock-card.is-locked .lock-knob { left: calc(100% - 62px); }

.lock-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.lock-opts span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 18px;
  background: #16181c;
  font-size: 14px;
  font-weight: 600;
}

.lock-opts svg { width: 18px; height: 18px; color: #c9c9c9; }

/* ---------- themes demo ---------- */

.theme-demo {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.tcard-stack {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 300 / 336;
}

.tface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px 36px;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14), 0 40px 70px -24px rgba(20, 20, 18, 0.45);
  opacity: 0;
  transform: translateY(14px) scale(0.96) rotate(-1.5deg);
  transition: opacity 520ms ease, transform 760ms var(--ease-spring);
}

.tface.is-on { opacity: 1; transform: none; z-index: 1; }

.tface span {
  position: relative;
  font-size: 27px;
  line-height: 1.32;
  text-align: center;
}

/* the six previewed themes, shared by cards and swatches */
.th-linen {
  color: #1b1a17;
  background:
    repeating-linear-gradient(0deg, rgba(60, 50, 30, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60, 50, 30, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 30% 0%, #efebe4 0%, #e2ddd3 55%, #d6d0c4 100%);
  font-family: "EB Garamond", Georgia, var(--cjk-serif), serif;
}

.th-night {
  color: #f4f3ef;
  background: radial-gradient(120% 80% at 50% 0%, #2a3140 0%, #12151b 70%);
  font-family: "Montserrat", var(--sans);
  font-weight: 800;
}

.th-night span { font-size: 23px; letter-spacing: -0.3px; }

.th-marble {
  color: #f4f3ef;
  background:
    linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, 0.2) 46.6%, transparent 47.4%),
    linear-gradient(64deg, transparent 62%, rgba(255, 255, 255, 0.12) 62.5%, transparent 63.2%),
    linear-gradient(150deg, transparent 22%, rgba(255, 255, 255, 0.08) 22.4%, transparent 23%),
    #0b0b0c;
  font-family: "EB Garamond", Georgia, var(--cjk-serif), serif;
}

.th-sand {
  color: #2a241c;
  background:
    radial-gradient(rgba(90, 70, 40, 0.12) 0.8px, transparent 1.2px) 0 0 / 11px 11px,
    radial-gradient(110% 100% at 50% 20%, #e7dbc6 0%, #cdbd9c 100%);
  font-family: "Playfair Display", Georgia, var(--cjk-serif), serif;
  font-weight: 500;
}

.th-jade {
  color: #eef3ef;
  background:
    linear-gradient(115deg, transparent 44%, rgba(160, 220, 180, 0.24) 44.6%, transparent 45.4%),
    linear-gradient(40deg, transparent 66%, rgba(160, 220, 180, 0.14) 66.5%, transparent 67.2%),
    #0f2419;
  font-family: "EB Garamond", Georgia, var(--cjk-serif), serif;
}

.th-eclipse {
  color: #f4f3ef;
  background:
    radial-gradient(circle at 50% 0%, #000 26%, rgba(255, 255, 255, 0.7) 27.5%, rgba(255, 255, 255, 0.08) 33%, rgba(255, 255, 255, 0) 42%),
    #08090a;
  font-family: "Montserrat", var(--sans);
  font-weight: 700;
}

.th-eclipse span { margin-top: 40px; font-size: 22px; }

.tswatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sw {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  font-size: 16px;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 3px;
  box-shadow: 0 6px 14px -6px rgba(20, 20, 18, 0.35);
  transition: outline-color 260ms ease, transform 300ms var(--ease-spring);
}

.sw:hover { transform: translateY(-2px); }
.sw.is-on { outline-color: var(--ink); }
.sw.th-night, .sw.th-eclipse { font-size: 14px; }
.sw.th-eclipse { padding-top: 10px; }

/* ---------- milestone demo ---------- */

.mile {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Montserrat", var(--sans);
}

.mile-ring {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 1;
}

.mile-dots { position: absolute; inset: 0; }

.mile-dots i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 3px;
  background: #22262c;
  transition: background-color 220ms ease, scale 320ms var(--ease-spring);
}

.mile-dots i.on { background: #dad5cb; }
.mile-dots i.pop { scale: 1.35; }

.mile-hex {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 34%;
  height: auto;
  opacity: 0.18;
  filter: grayscale(1) drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6));
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 400ms ease, filter 400ms ease, transform 700ms var(--ease-spring);
}

.mile.is-unlocked .mile-hex { opacity: 1; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.6)); transform: translate(-50%, -50%) scale(1); }

.mile-shine { transform: skewX(-18deg) translateX(0); }
.mile.is-unlocked .mile-shine { animation: mile-shine 1100ms ease 250ms both; }

@keyframes mile-shine {
  from { transform: skewX(-18deg) translateX(0); }
  to { transform: skewX(-18deg) translateX(220px); }
}

.mile-wave {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 34%;
  aspect-ratio: 1;
  border: 2px solid rgba(218, 213, 203, 0.7);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

.mile.is-unlocked .mile-wave { animation: mile-wave 1100ms var(--ease-out) both; }

@keyframes mile-wave {
  from { opacity: 0.9; transform: translate(-50%, -50%) scale(0.7); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

.mile-count {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(46% + 22%);
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  color: #dfe2e6;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mile-count small { color: #8e9096; font-size: 13px; font-weight: 700; }

.mile-title,
.mile-sub {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 700ms var(--ease-out);
}

.mile-title { margin-top: 6px; font-size: 20px; font-weight: 800; }
.mile-sub { margin-top: 6px; color: #9a9ca1; font-size: 14px; font-weight: 600; transition-delay: 80ms; }
.mile.is-unlocked .mile-title,
.mile.is-unlocked .mile-sub { opacity: 1; transform: none; }

/* ---------- feature list ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 40px;
}

.feature-grid .quote-item .quote-text { font-size: 19px; }
.feature-grid .quote-item p { color: var(--muted-strong); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.2px; }

.feature-grid .num {
  color: var(--coral-deep);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.message-group .soon-badge {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  width: auto;
  margin-bottom: -6px;
  padding: 7px 14px;
  color: var(--wine);
  background: rgba(59, 26, 33, 0.07);
  border-radius: 1000px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.soon-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  animation: soon-pulse 2.4s ease-in-out infinite;
}

.hero-icon.tyst-icon { box-shadow: 0 14px 34px -12px rgba(22, 35, 28, 0.55), 0 0 0 1px rgba(20, 20, 18, 0.06); }

.page-tyst .phone-stage .chip-a { left: calc(var(--p) * 214); top: calc(var(--p) * 600); --r: 3deg; }

/* =====================================================================
   TYST: the app's Night theme: Geist, hairlines, square edges.
   The page stays light; the dark lives behind the demos.
   ===================================================================== */

.page-tyst {
  --ty-night: #0a0a0a;
  --ty-ink: #eceae5;
  --ty-ink-2: rgba(236, 234, 229, 0.62);
  --ty-ink-3: rgba(236, 234, 229, 0.4);
  --ty-rule: rgba(236, 234, 229, 0.1);
  --ty-sheet: #141413;
  --ty-raised: #1d1d1c;
  --ty-sans: "Geist", var(--cjk-sans), sans-serif;
  --ty-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

.hero-icon.tyst-icon { box-shadow: 0 14px 34px -12px rgba(10, 10, 10, 0.55); }
.page-tyst h1 { font-family: var(--ty-sans); font-size: 58px; font-weight: 500; letter-spacing: -0.035em; }
.page-tyst .message-group p { font-family: var(--ty-sans); font-weight: 500; }
.page-tyst .message-group .soon-badge { color: var(--ty-night); background: rgba(10, 10, 10, 0.06); border-radius: 0; font-family: var(--ty-mono); font-weight: 400; }
.page-tyst .soon-badge .dot { background: var(--ty-night); border-radius: 0; animation: none; }
.cta--tyst { background: var(--ty-night); font-family: var(--ty-sans); }
.page-tyst .cta,
.page-tyst .cta-shell::before { border-radius: 0 !important; }

/* panels */
.ty-panel { color: var(--ty-ink); background: var(--ty-night); font-family: var(--ty-sans); }
.ty-panel .eyebrow { color: var(--ty-ink-3); font-family: var(--ty-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; }
.ty-panel .panel-title { font-family: var(--ty-sans); font-size: 40px; font-weight: 500; letter-spacing: -0.035em; }
.ty-panel .panel-lede { color: var(--ty-ink-2); font-family: var(--ty-sans); font-size: 18px; font-weight: 400; line-height: 27px; letter-spacing: -0.2px; }

.page-tyst .faq-list,
.page-tyst .faq-list details { border-color: var(--ty-rule); }
.page-tyst .faq-list summary { font-family: var(--ty-sans); font-size: 18px; font-weight: 500; }
.page-tyst .faq-list summary::after {
  border-radius: 0;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.25px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.25px 12px no-repeat,
    rgba(236, 234, 229, 0.08);
}
.page-tyst .faq-list details p { color: var(--ty-ink-2); font-family: var(--ty-sans); }
.page-tyst .contact-card { background: var(--ty-sheet); border-radius: 0; box-shadow: inset 0 0 0 1px var(--ty-rule); }
.page-tyst .contact-card h3 { font-family: var(--ty-sans); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; }
.page-tyst .pill-link { border-radius: 0; }
.page-tyst .pill-link .dot { background: var(--ty-night); border-radius: 0; }

.chip--tyst { color: var(--ty-night); background: var(--ty-ink); border-radius: 0; font-family: var(--ty-sans); }
.chip--tyst small { color: #6b6a66; font-family: var(--ty-mono); }

.ty-card { background: var(--ty-sheet); border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(236, 234, 229, 0.06); }

/* the eight widget typefaces: family, then a size factor */
.ty-f-grotesk { --ty-font: "Geist", sans-serif; --fz: 1; }
.ty-f-mono { --ty-font: "Geist Mono", monospace; --fz: 0.93; }
.ty-f-serif { --ty-font: "Instrument Serif", serif; --fz: 1.17; }
.ty-f-typewriter { --ty-font: "Courier Prime", monospace; --fz: 0.93; }
.ty-f-pixel { --ty-font: "Pixelify Sans", sans-serif; --fz: 1; }
.ty-f-arcade { --ty-font: "Press Start 2P", monospace; --fz: 0.6; }
.ty-f-terminal { --ty-font: "VT323", monospace; --fz: 1.3; }
.ty-f-block { --ty-font: "Jersey 10", sans-serif; --fz: 1.22; }

/* nine of the ten themes (OLED reads as Night here) */
.ty-t-night { --tb: #0a0a0a; --ti: #eceae5; }
.ty-t-paper { --tb: #eeebe5; --ti: #161614; }
.ty-t-fog { --tb: #c9cac6; --ti: #121313; }
.ty-t-sand { --tb: #dcd3c4; --ti: #29241d; }
.ty-t-slate { --tb: #1c2024; --ti: #dde2e6; }
.ty-t-oxide { --tb: #2b1f1b; --ti: #ebddd3; }
.ty-t-navy { --tb: #0e1524; --ti: #d9dfea; }
.ty-t-phosphor { --tb: #050a06; --ti: #8cff9e; }
.ty-t-amber { --tb: #0a0a0a; --ti: #ffb347; }

/* ---------- phone ---------- */

.phone-screen.ty-screen { contain: paint; color: var(--ty-ink); background: #000; font-family: var(--ty-sans); }
.ty-screen .scene { background: #000; }
.ty-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ty-home { color: var(--ti); background: var(--tb) !important; }

.ty-home-in {
  position: absolute;
  left: calc(var(--p) * 30);
  right: calc(var(--p) * 30);
  top: calc(var(--p) * 74);
  bottom: calc(var(--p) * 150);
  display: flex;
  flex-direction: column;
}

.ty-h-clock { font-family: var(--ty-font); font-size: calc(var(--p) * 62 * var(--fz)); line-height: 0.95; font-variant-numeric: tabular-nums; }
.ty-h-date { margin-top: calc(var(--p) * 8); opacity: 0.58; font-family: "Geist", sans-serif; font-size: calc(var(--p) * 12); }
.ty-h-rule { height: 1px; margin: calc(var(--p) * 16) 0 calc(var(--p) * 4); background: currentColor; opacity: 0.16; }
.ty-h-apps { display: flex; flex: 1; flex-direction: column; justify-content: space-around; }
.ty-h-apps i { font-family: var(--ty-font); font-size: calc(var(--p) * 23 * var(--fz)); font-style: normal; line-height: 1; white-space: nowrap; }

.ty-h-focus {
  display: flex;
  height: calc(var(--p) * 38);
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--p) * 13);
  border: 1px solid currentColor;
  font-family: "Geist Mono", monospace;
  font-size: calc(var(--p) * 12);
}

.ty-h-focus b { font-weight: 400; }

/* ---------- words, not icons ---------- */

.ty-pair { display: flex; justify-content: center; gap: 22px; }
.ty-pair figure { display: flex; margin: 0; flex-direction: column; align-items: center; gap: 12px; }
.ty-pair img { display: block; width: 150px; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px var(--ty-rule); }
.ty-pair figcaption { color: var(--ty-ink-3); font-family: var(--ty-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.ty-pair figure:last-child figcaption { color: var(--ty-ink); }
.ty-pair.is-playing figure { animation: fx-up 640ms var(--ease-out) both; }
.ty-pair.is-playing figure:last-child { animation-delay: 160ms; }

/* ---------- themes and type ---------- */

.ty-lookdemo { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.ty-look {
  display: flex;
  width: 300px;
  height: 300px;
  flex-direction: column;
  padding: 24px 26px;
  color: var(--ti);
  background: var(--tb);
  box-shadow: inset 0 0 0 1px rgba(236, 234, 229, 0.08);
  text-align: left;
  transition: background-color 420ms ease, color 420ms ease;
}

.ty-look-clock { font-family: var(--ty-font); font-size: calc(58px * var(--fz)); line-height: 1; font-variant-numeric: tabular-nums; }
.ty-look-apps { display: flex; margin-top: auto; flex-direction: column; gap: 6px; }
.ty-look-apps i { font-family: var(--ty-font); font-size: calc(24px * var(--fz)); font-style: normal; line-height: 1.1; white-space: nowrap; }
.ty-look-name { color: var(--ty-ink-2); font-family: var(--ty-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- widgets ---------- */

.ty-widgets { display: grid; grid-template-columns: repeat(2, 160px); gap: 14px; text-align: left; }

.ty-w { display: flex; height: 160px; flex-direction: column; padding: 16px; }
.ty-w-head { display: flex; justify-content: space-between; color: var(--ty-ink-2); font-family: var(--ty-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.ty-w-head b { font-weight: 400; letter-spacing: 0; }
.ty-w-digits { margin: auto 0; font-family: var(--ty-mono); font-size: 40px; font-weight: 300; text-align: center; }

.ty-w-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--ty-rule);
  color: var(--ty-ink-2);
  font-family: var(--ty-mono);
  font-size: 11px;
}

.ty-w-foot svg { width: 11px; height: 11px; }

.ty-w--clock { align-items: center; justify-content: center; gap: 8px; }
.ty-w-time { font-family: var(--ty-sans); font-size: 50px; font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.ty-w-date { color: var(--ty-ink-2); font-family: var(--ty-mono); font-size: 11px; letter-spacing: 0.12em; }

.ty-w--weather { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 16px 10px; }
.ty-day { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 10px; }
.ty-day b { font-size: 14px; font-weight: 400; }
.ty-day b:last-child { font-size: 16px; font-variant-numeric: tabular-nums; }
.ty-day svg { width: 22px; height: 22px; }

.ty-widgets.is-playing .ty-w { animation: fx-up 640ms var(--ease-out) both; }
.ty-widgets.is-playing .ty-w:nth-child(2) { animation-delay: 100ms; }
.ty-widgets.is-playing .ty-w:nth-child(3) { animation-delay: 200ms; }

/* ---------- focus ---------- */

.ty-timer-demo { display: flex; width: min(360px, 100%); flex-direction: column; gap: 18px; padding: 22px 24px 18px; text-align: center; }
.ty-big { font-family: var(--ty-mono); font-size: 84px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ty-bar { display: block; height: 1px; background: var(--ty-rule); }
.ty-bar i { display: block; width: 0; height: 100%; background: var(--ty-ink); }
.ty-timer-demo.is-playing .ty-bar i { animation: ty-fill 1500s linear both; }
.ty-timer-demo .ty-w-foot { padding-top: 0; border: 0; }

@keyframes ty-fill {
  from { width: 0; }
  to { width: 100%; }
}

/* ---------- phone time, in years ---------- */

.ty-years { display: flex; width: min(420px, 100%); flex-direction: column; align-items: center; gap: 14px; }
.ty-years-q { color: var(--ty-ink-2); font-size: 17px; }
.ty-years-big { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
.ty-years-big b { font-size: 112px; font-weight: 300; line-height: 1; letter-spacing: -0.05em; }
.ty-years-big span { color: var(--ty-ink-2); font-size: 18px; }
.ty-years-math { width: 100%; padding-top: 14px; border-top: 1px solid var(--ty-rule); color: var(--ty-ink-3); font-family: var(--ty-mono); font-size: 12.5px; }
.ty-years.is-playing .ty-years-big b { animation: fx-up 800ms var(--ease-out) 200ms both; }

/* ---------- setup guide ---------- */

.ty-setup { display: flex; align-items: center; gap: 30px; text-align: left; }

.ty-setup-shot { position: relative; display: grid; width: 150px; flex: none; }
.ty-setup-shot figure { display: flex; margin: 0; grid-area: 1 / 1; flex-direction: column; gap: 12px; opacity: 0; transition: opacity 500ms ease; }
.ty-setup-shot figure.is-on { opacity: 1; }
.ty-setup-shot img { display: block; width: 150px; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px var(--ty-rule); }
.ty-setup-shot figcaption { min-height: 3.6em; color: var(--ty-ink-2); font-family: var(--ty-mono); font-size: 11px; line-height: 1.4; }

.ty-steps { display: flex; width: 220px; margin: 0; padding: 0; flex-direction: column; list-style: none; }

.ty-steps li {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--ty-rule);
  font-size: 15.5px;
}

.ty-steps li:last-child { border-bottom: 1px solid var(--ty-rule); }
.ty-steps small { margin-left: auto; color: var(--ty-ink-3); font-family: var(--ty-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

.ty-check { position: relative; display: block; flex: none; width: 18px; height: 18px; border: 1px solid var(--ty-ink); background: var(--ty-ink); }

.ty-check::after {
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--ty-night);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
  content: "";
}

.ty-setup.is-playing .ty-check { animation: ty-check 300ms ease both; }
.ty-setup.is-playing .ty-check::after { animation: ty-tick 300ms ease both; animation-delay: inherit; }
.ty-setup.is-playing li:nth-child(1) .ty-check { animation-delay: 600ms; }
.ty-setup.is-playing li:nth-child(2) .ty-check { animation-delay: 1400ms; }
.ty-setup.is-playing li:nth-child(3) .ty-check { animation-delay: 2200ms; }
.ty-setup.is-playing li:nth-child(4) .ty-check { animation-delay: 3000ms; }
.ty-setup.is-playing li:nth-child(5) .ty-check { animation-delay: 3800ms; }
.ty-setup.is-playing li:nth-child(6) .ty-check { animation-delay: 4600ms; }

@keyframes ty-check {
  from { background: transparent; }
  to { background: var(--ty-ink); }
}

@keyframes ty-tick {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1163px) {
  .page-tyst h1 { font-size: clamp(40px, 12vw, 52px); }
  .ty-panel .panel-title { font-size: clamp(30px, 8vw, 40px); }
}

@media (max-width: 480px) {
  .ty-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-w { height: auto; aspect-ratio: 1; }
  .ty-w--weather { aspect-ratio: auto; }
  .ty-setup { flex-direction: column; gap: 22px; }
  .ty-steps { width: 100%; }
  .ty-pair img { width: 128px; }
  .ty-years-big b { font-size: 88px; }
}

/* =====================================================================
   /apps: one page with every app, link-in-bio style (mostly opened on phones)
   ===================================================================== */

.links-page {
  display: flex;
  width: min(480px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding:
    max(48px, calc(env(safe-area-inset-top) + 32px))
    max(16px, env(safe-area-inset-right))
    max(28px, calc(env(safe-area-inset-bottom) + 16px))
    max(16px, env(safe-area-inset-left));
  flex-direction: column;
  align-items: center;
}

.links-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.links-logo img {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px -12px rgba(20, 20, 18, 0.25);
}

.links-head h1 { margin-top: 10px; font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
.links-head p { color: var(--muted); font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }

.links-list {
  display: flex;
  width: 100%;
  margin: 32px 0 0;
  padding: 0;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.link-card {
  border-radius: 22px;
  transition: transform 260ms var(--ease-spring), filter 160ms ease;
}

.link-main {
  display: flex;
  min-height: 84px;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 13px;
  color: inherit;
  border-radius: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.link-card:active { transform: scale(0.98); filter: brightness(1.08); }

@media (hover: hover) and (pointer: fine) {
  .link-card:hover { transform: translateY(-2px); }
}

.link-icon {
  display: grid;
  flex: none;
  width: 56px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.link-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.link-text h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.link-text small { opacity: 0.68; font-size: 13.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.1px; }

.link-badge {
  display: inline-flex;
  flex: none;
  height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 10px;
  color: #141412;
  background: #fbfaf7;
  border-radius: 1000px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.link-badge svg { width: 14px; height: 14px; margin-top: -2px; }
.link-badge--soon { padding: 0 11px; color: inherit; background: rgba(255, 255, 255, 0.1); font-weight: 600; }

.link-card--nomercy {
  color: #f4f4f6;
  background: #07080a;
}

.link-card--nomercy .link-icon { box-shadow: inset 0 0 0 1px rgba(244, 244, 246, 0.1); }

.link-card--tyst {
  color: #eceae5;
  background: #1a1a19;
  box-shadow: 0 16px 36px -22px rgba(10, 10, 10, 0.9);
}

.link-card--tyst .link-badge { color: #0a0a0a; background: #eceae5; }
.link-card--tyst .link-badge--soon { color: #eceae5; background: rgba(236, 234, 229, 0.1); }

.links-mail {
  display: inline-flex;
  height: 48px;
  margin-top: 28px;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  color: var(--ink);
  background: var(--panel);
  border-radius: 1000px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms var(--ease-spring);
}

.links-mail:active { transform: scale(0.97); }
.links-mail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

.links-foot {
  display: flex;
  margin-top: auto;
  padding-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

/* roomy tap targets in a small footer */
.links-foot > a,
.links-foot summary { display: inline-flex; min-height: 40px; align-items: center; padding: 0 8px; }
.links-foot a { text-decoration: none; transition: color 160ms ease; }
.links-foot a:hover { color: var(--ink); }

/* entrance */
.js .links-head,
.js .link-card,
.js .links-mail { animation: fx-up-flat 640ms var(--ease-out) both; }
.js .link-card:nth-child(1) { animation-delay: 70ms; }
.js .link-card:nth-child(2) { animation-delay: 120ms; }
.js .link-card:nth-child(3) { animation-delay: 170ms; }
.js .link-card:nth-child(4) { animation-delay: 220ms; }
.js .links-mail { animation-delay: 290ms; }

@keyframes fx-up-flat {
  from { opacity: 0; translate: 0 12px; }
}

/* small phones (iPhone SE, mini) */
@media (max-width: 360px) {
  .link-main { gap: 11px; padding: 11px; }
  .link-icon { width: 48px; height: 48px; border-radius: 12px; }
  .link-text h2 { font-size: 16px; }
  .link-text small { font-size: 12.5px; }
  .link-badge { height: 30px; padding: 0 10px 0 8px; font-size: 11.5px; }
  .link-badge--soon { padding: 0 9px; }
}

/* larger screens get a little more air */
@media (min-width: 600px) {
  .links-page { padding-top: 88px; }
  .links-head h1 { font-size: 40px; }
  .links-list { margin-top: 44px; gap: 14px; }
  .link-main { min-height: 92px; padding: 16px 18px 16px 16px; gap: 16px; }
  .link-icon { width: 60px; height: 60px; border-radius: 15px; }
  .link-text h2 { font-size: 18px; }
  .link-text small { font-size: 14px; }
}

/* =====================================================================
   NoMercy: flat night: type, spacing and one accent. No glow, no texture.
   ===================================================================== */

.page-nomercy {
  --nm-night: #07080a;
  --nm-card: #0d0d0d;
  --nm-raised: #121212;
  --nm-sheet: #141414;
  --nm-accent: #ff4d1a;
  --nm-text: #f4f4f6;
  --nm-text-2: rgba(244, 244, 246, 0.62);
  --nm-text-3: rgba(244, 244, 246, 0.42);
  --nm-line: rgba(244, 244, 246, 0.08);
  --nm-sans: "Montserrat", var(--cjk-sans), sans-serif;
  --nm-serif: "Instrument Serif", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif KR", Georgia, serif;
}

.page-nomercy ::selection { background: rgba(255, 77, 26, 0.4); }
.page-nomercy :focus-visible { outline-color: var(--nm-accent); }

.page-nomercy em { font-family: var(--nm-serif); font-size: 1.22em; font-style: italic; font-weight: 400; letter-spacing: 0; }

/* copy column: the site's light page, NoMercy's type */
.nm-hero-icon { box-shadow: 0 14px 34px -12px rgba(7, 8, 10, 0.55); }
.page-nomercy h1 { font-family: var(--nm-sans); font-size: 54px; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.page-nomercy h1 span { white-space: normal; text-wrap: balance; }
.page-nomercy .message-group p { font-family: var(--nm-sans); font-weight: 500; }
.page-nomercy .cta { background: var(--nm-night); font-family: var(--nm-sans); }

/* panels */
.nm-panel { color: var(--nm-text); background: var(--nm-night); font-family: var(--nm-sans); }
.nm-panel .eyebrow { color: var(--nm-text-3); font-family: var(--nm-sans); }
.nm-panel .panel-title { font-family: var(--nm-sans); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.nm-panel .panel-lede { color: var(--nm-text-2); font-family: var(--nm-sans); font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: -0.2px; }
.nm-faq-title { font-family: var(--nm-serif) !important; font-size: 40px !important; font-style: italic; font-weight: 400 !important; letter-spacing: 0 !important; }

.page-nomercy .faq-list,
.page-nomercy .faq-list details { border-color: var(--nm-line); }
.page-nomercy .faq-list summary { font-family: var(--nm-sans); font-size: 18px; }
.page-nomercy .faq-list summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat,
    rgba(244, 244, 246, 0.08);
}
.page-nomercy .faq-list details p { color: var(--nm-text-2); }
.page-nomercy .contact-card { background: var(--nm-sheet); box-shadow: inset 0 0 0 1px var(--nm-line); }
.page-nomercy .contact-card h3 { font-family: var(--nm-sans); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.page-nomercy .pill-link .dot { background: var(--nm-accent); }

.chip--nm { color: var(--nm-night); background: var(--nm-text); font-family: var(--nm-sans); }
.chip--nm .chip-ico { color: var(--nm-accent); }
.chip--nm small { color: #5c5d63; }

.nm-flame-svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- phone ---------- */

.phone-screen.nm-screen { contain: paint; color: var(--nm-text); background: var(--nm-night); font-family: var(--nm-sans); }
.nm-screen .scene { background: var(--nm-night); }

.nm-splash { display: grid; place-items: center; }
.nm-flame--fill { position: relative !important; display: grid; width: calc(var(--p) * 62); }
.nm-flame--fill svg { grid-area: 1 / 1; }
.nm-flame--fill svg:first-child { color: rgba(244, 244, 246, 0.18); }
.nm-flame--fill svg:last-child { color: var(--nm-accent); clip-path: inset(100% 0 0 0); }
.nm-splash.is-active .nm-flame--fill svg:last-child { animation: nm-rise 1300ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
.nm-splash.is-leaving .nm-flame--fill svg:last-child { clip-path: inset(0); }

@keyframes nm-rise {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.nm-today,
.nm-streak { padding: calc(var(--p) * 60) calc(var(--p) * 16) 0; }
.nm-today > *,
.nm-streak > *,
.nm-shield > * { position: relative; }

.nm-big { font-size: calc(var(--p) * 42); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.nm-big small { color: var(--nm-text-3); font-size: calc(var(--p) * 11); font-weight: 500; letter-spacing: 0; }
.nm-quote { margin-top: calc(var(--p) * 10); color: var(--nm-text-2); font-family: var(--nm-serif); font-size: calc(var(--p) * 15); font-style: italic; }

.nm-eyebrow { margin-top: calc(var(--p) * 22); color: var(--nm-text-3); font-size: calc(var(--p) * 8.5); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.nm-streak > .nm-eyebrow:first-child { margin-top: 0; }
.nm-eyebrow--gap { margin-top: calc(var(--p) * 26) !important; }

.nm-list {
  display: flex;
  margin: calc(var(--p) * 8) 0 0;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--p) * 14);
  background: var(--nm-card);
  list-style: none;
}

.nm-list li {
  display: flex;
  min-height: calc(var(--p) * 38);
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--p) * 10);
  padding: calc(var(--p) * 6) calc(var(--p) * 12);
  border-top: 1px solid var(--nm-line);
  font-size: calc(var(--p) * 11);
  font-weight: 500;
}

.nm-list li:first-child { border-top: 0; }
.nm-list small { display: block; margin-top: 1px; color: var(--nm-text-3); font-size: calc(var(--p) * 8); font-weight: 500; }

.nm-list i {
  position: relative;
  flex: none;
  width: calc(var(--p) * 16);
  height: calc(var(--p) * 16);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.3px rgba(244, 244, 246, 0.35);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.nm-list i::after {
  position: absolute;
  left: 35%;
  top: 22%;
  width: 22%;
  height: 40%;
  border: solid var(--nm-night);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
  content: "";
  opacity: 0;
  transition: opacity 200ms ease;
}

.nm-list li.is-done span { color: var(--nm-text-3); }
.nm-list li.is-done i { background: rgba(244, 244, 246, 0.42); box-shadow: none; }
.nm-list li.is-done i::after { opacity: 1; }

.nm-status {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: calc(var(--p) * 30);
  color: var(--nm-text-3);
  font-size: calc(var(--p) * 9);
  font-weight: 500;
  text-align: center;
}

.nm-shield {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--p) * 150) calc(var(--p) * 22) 0;
  text-align: center;
}

.nm-ring { display: grid; width: calc(var(--p) * 92); aspect-ratio: 1; place-items: center; }
.nm-ring > * { grid-area: 1 / 1; }
.nm-ring svg:not(.nm-flame-svg) { width: 100%; height: 100%; rotate: -90deg; }
.nm-ring circle { fill: none; stroke: rgba(244, 244, 246, 0.1); stroke-width: 3; }
.nm-ring circle.arc { stroke: var(--nm-accent); stroke-dasharray: 100; stroke-dashoffset: 33; stroke-linecap: round; }
.nm-ring .nm-flame-svg { width: 32%; color: rgba(244, 244, 246, 0.42); }
.nm-shield.is-active .nm-ring circle.arc { animation: nm-arc 1200ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }

@keyframes nm-arc {
  from { stroke-dashoffset: 100; }
}

.nm-not { margin-top: calc(var(--p) * 26); font-size: calc(var(--p) * 24); font-weight: 600; letter-spacing: -0.02em; }
.nm-shield-text { margin-top: calc(var(--p) * 10); color: var(--nm-text-2); font-size: calc(var(--p) * 11.5); line-height: 1.45; }
.nm-left { margin-top: calc(var(--p) * 14); color: var(--nm-text-3); font-size: calc(var(--p) * 9); font-weight: 500; }

.nm-btn {
  position: absolute !important;
  left: calc(var(--p) * 18);
  right: calc(var(--p) * 18);
  bottom: calc(var(--p) * 36);
  display: grid;
  height: calc(var(--p) * 44);
  place-items: center;
  color: var(--nm-night);
  background: var(--nm-text);
  border-radius: 1000px;
  font-size: calc(var(--p) * 12.5);
  font-weight: 600;
}

.nm-d7 { margin-top: calc(var(--p) * 6); font-size: calc(var(--p) * 22); font-weight: 600; letter-spacing: -0.02em; }

.nm-chain {
  display: grid;
  margin-top: calc(var(--p) * 18);
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: calc(var(--p) * 4);
}

.nm-chain i { display: block; aspect-ratio: 1; border-radius: calc(var(--p) * 3); background: rgba(244, 244, 246, 0.07); }
.nm-chain i.on { background: var(--nm-accent); }

.nm-count { margin-top: calc(var(--p) * 4); }
.nm-count b { font-size: calc(var(--p) * 56); font-weight: 300; letter-spacing: -0.03em; }
.nm-count em { color: var(--nm-text-2); font-size: calc(var(--p) * 15); }

.nm-streak.is-active .nm-chain i.on,
.nm-streakdemo.is-playing .nm-chain i.on { animation: nm-pop 360ms cubic-bezier(0.34, 1.18, 0.64, 1) both; }
.nm-chain i.on:nth-child(1) { animation-delay: 400ms !important; }
.nm-chain i.on:nth-child(2) { animation-delay: 460ms !important; }
.nm-chain i.on:nth-child(3) { animation-delay: 520ms !important; }
.nm-chain i.on:nth-child(4) { animation-delay: 580ms !important; }
.nm-chain i.on:nth-child(5) { animation-delay: 640ms !important; }
.nm-chain i.on:nth-child(6) { animation-delay: 700ms !important; }
.nm-chain i.on:nth-child(7) { animation-delay: 760ms !important; }
.nm-chain i.on:nth-child(8) { animation-delay: 820ms !important; }
.nm-chain i.on:nth-child(9) { animation-delay: 880ms !important; }
.nm-chain i.on:nth-child(10) { animation-delay: 940ms !important; }
.nm-chain i.on:nth-child(11) { animation-delay: 1000ms !important; }

@keyframes nm-pop {
  from { background: rgba(244, 244, 246, 0.07); transform: scale(0.7); }
}

/* ---------- panels: demos ---------- */

.nm-lockdemo { display: flex; width: min(360px, 100%); flex-direction: column; gap: 12px; text-align: left; }

.nm-notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--nm-sheet);
  border-radius: 20px;
}

.nm-notif img { width: 36px; height: 36px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--nm-line); }
.nm-notif span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.nm-notif b { font-size: 14px; font-weight: 600; }
.nm-notif small { color: var(--nm-text-2); font-size: 12.5px; font-weight: 500; }
.nm-notif em { align-self: flex-start; color: var(--nm-text-3); font-family: var(--nm-sans); font-size: 11px; font-style: normal; }

.nm-card { background: var(--nm-sheet); border-radius: 24px; }

.nm-card--shield { display: flex; flex-direction: column; align-items: center; padding: 30px 24px; text-align: center; }
.nm-card--shield .nm-ring { --p: 1.05px; }
.nm-card--shield .nm-not { margin-top: 20px; font-size: 24px; }
.nm-card--shield .nm-left { margin-top: 10px; font-size: 13px; }

.nm-lockdemo.is-playing .nm-notif { animation: nm-drop 700ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
.nm-lockdemo.is-playing .nm-ring circle.arc { animation: nm-arc 1200ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both; }

@keyframes nm-drop {
  from { opacity: 0; transform: translateY(-14px); }
}

.nm-plans { display: flex; width: min(400px, 100%); flex-direction: column; gap: 10px; text-align: left; }

.nm-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--nm-sheet);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--nm-line);
}

.nm-plan.is-on { box-shadow: inset 0 0 0 1.5px var(--nm-text); }
.nm-plan-rec { color: var(--nm-text-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.nm-plan-head { display: flex; align-items: baseline; gap: 10px; }
.nm-plan-head b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.nm-plan-head small { flex: 1; color: var(--nm-text-3); font-size: 12.5px; font-weight: 500; }
.nm-plan-head i { position: relative; flex: none; align-self: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(244, 244, 246, 0.35); }
.nm-plan.is-on .nm-plan-head i { box-shadow: inset 0 0 0 1.5px var(--nm-text); }
.nm-plan.is-on .nm-plan-head i::after { position: absolute; inset: 4px; border-radius: 50%; background: var(--nm-text); content: ""; }
.nm-plan-text { color: var(--nm-text-2); font-size: 13.5px; font-weight: 500; line-height: 1.4; }

.nm-plans.is-playing .nm-plan { animation: fx-up 640ms var(--ease-out) both; }
.nm-plans.is-playing .nm-plan:nth-child(2) { animation-delay: 90ms; }
.nm-plans.is-playing .nm-plan:nth-child(3) { animation-delay: 180ms; }

.nm-todaydemo { width: min(400px, 100%); padding: 6px; text-align: left; }
.nm-todaydemo .nm-list { --p: 1.35px; margin: 0; background: transparent; }
.nm-todaydemo.is-playing .nm-tick i { animation: nm-check 1ms linear 1200ms both; }
.nm-todaydemo.is-playing .nm-tick i::after { animation: nm-tick-in 200ms ease 1200ms both; }
.nm-todaydemo.is-playing .nm-tick span { animation: nm-dim 300ms ease 1200ms both; }

@keyframes nm-check { to { background: rgba(244, 244, 246, 0.42); box-shadow: none; } }
@keyframes nm-tick-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nm-dim { to { color: var(--nm-text-3); } }

.nm-streakdemo { display: flex; width: min(380px, 100%); flex-direction: column; align-items: center; gap: 6px; }
.nm-streakdemo .nm-chain { --p: 1.6px; width: 100%; margin-top: 0; }
.nm-streakdemo .nm-count { --p: 1.25px; }

.nm-tiers { display: flex; margin-top: 8px; flex-wrap: wrap; justify-content: center; gap: 6px; }

.nm-tiers i {
  padding: 5px 10px;
  color: var(--nm-text-3);
  border-radius: 1000px;
  box-shadow: inset 0 0 0 1px var(--nm-line);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}

.nm-tiers i.on { color: var(--nm-text); }
.nm-tiers i.on + i:not(.on) { color: var(--nm-accent); box-shadow: inset 0 0 0 1px rgba(255, 77, 26, 0.5); }

.nm-widgets { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; text-align: left; }

.nm-w {
  display: flex;
  height: 160px;
  flex-direction: column;
  padding: 16px;
  background: var(--nm-sheet);
  border-radius: 26px;
}

.nm-w--small { width: 160px; }
.nm-w-flame { display: block; width: 24px; color: var(--nm-accent); }
.nm-w--small b { margin-top: auto; font-size: 48px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.nm-w--small small { margin-top: 4px; color: var(--nm-text-2); font-size: 12px; font-weight: 500; }

.nm-w--medium { width: 230px; }
.nm-w-head { display: flex; flex-direction: column; gap: 2px; }
.nm-w-head b { font-size: 14px; font-weight: 600; }
.nm-w-head small { color: var(--nm-text-3); font-size: 11px; font-weight: 500; }
.nm-list--mini { --p: 1.05px; margin-top: auto; background: transparent; border-radius: 0; }
.nm-list--mini li { min-height: 28px; padding: 0; }

.nm-widgets.is-playing .nm-w { animation: fx-up 640ms var(--ease-out) both; }
.nm-widgets.is-playing .nm-w:nth-child(2) { animation-delay: 120ms; }

@media (max-width: 1163px) {
  .page-nomercy h1 { font-size: clamp(38px, 11vw, 50px); }
  .nm-panel .panel-title,
  .nm-faq-title { font-size: clamp(30px, 8vw, 40px) !important; }
}

/* ---------- headlines that carry a long approved line ---------- */

h1.hero-fit-m { font-size: 54px; line-height: 62px; }
h1.hero-fit-s { font-size: 44px; line-height: 52px; }
.page-nomercy h1.hero-fit-m { font-size: 48px; }
.page-nomercy h1.hero-fit-s { font-size: 42px; }

@media (max-width: 1163px) {
  h1.hero-fit-m { font-size: clamp(36px, 11vw, 48px); line-height: 1.15; }
  h1.hero-fit-s { font-size: clamp(30px, 9vw, 40px); line-height: 1.15; }
}

/* ---------- language switcher (footer) ---------- */

.lang-switch {
  position: relative;
  display: inline-block;
}

.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease;
}

.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover,
.lang-switch[open] summary { color: var(--ink); }
.lang-switch summary svg { width: 15px; height: 15px; }

.lang-switch ul {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 12px);
  left: 50%;
  display: grid;
  min-width: 196px;
  margin: 0;
  padding: 6px;
  list-style: none;
  text-align: left;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px -18px rgba(20, 20, 18, 0.35);
  transform: translateX(-50%);
  animation: lang-pop 220ms var(--ease-out);
}

.lang-switch:not([open]) ul { display: none; }

@keyframes lang-pop {
  from { opacity: 0; transform: translate(-50%, 6px) scale(0.98); }
}

.lang-switch li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  color: var(--muted-strong);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
}

.lang-switch li a:hover { color: var(--ink); background: rgba(20, 20, 18, 0.05); }

.lang-switch li a[aria-current="true"] { color: var(--ink); font-weight: 600; }

.lang-switch li a[aria-current="true"]::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  content: "";
}

@media (max-width: 600px) {
  .lang-switch ul {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    transform: none;
    animation-name: lang-sheet;
  }
}

@keyframes lang-sheet {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- Japanese & Korean ---------- */

/* Japanese: Hiragino Sans / Noto Sans JP. Korean: Apple SD Gothic Neo / Noto Sans KR.
   The Latin display serif has no CJK glyphs, so headings switch to the CJK sans. */
html[lang="ja"] { --cjk-serif: "Hiragino Sans", "Noto Sans JP"; --cjk-sans: "Hiragino Sans", "Noto Sans JP"; }
html[lang="ko"] { --cjk-serif: "Apple SD Gothic Neo", "Noto Sans KR"; --cjk-sans: "Apple SD Gothic Neo", "Noto Sans KR"; }

html[lang="ja"] :is(h1, .panel-title, .contact-card h3),
html[lang="ko"] :is(h1, .panel-title, .contact-card h3) {
  font-family: "Inter", var(--cjk-sans), sans-serif;
  font-weight: 600;
}

html[lang="ja"] h1,
html[lang="ko"] h1 { letter-spacing: 0; line-height: 1.3; }

html[lang="ja"] :is(.message-group p, .panel-title, .panel-lede, .quote-item .quote-text, .faq-list summary, .doc-section h2),
html[lang="ko"] :is(.message-group p, .panel-title, .panel-lede, .quote-item .quote-text, .faq-list summary, .doc-section h2) { letter-spacing: 0; }

html[lang="ja"] body { line-break: strict; word-break: auto-phrase; }
html[lang="ko"] body { word-break: keep-all; }

/* ---------- tablet & phone ---------- */

@media (max-width: 1163px) {
  .landing-page {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
  }

  .copy-pane { display: contents; }

  .brand-link { top: 28px; left: 24px; }

  .hero-content {
    position: static;
    order: 1;
    width: min(438px, 100%);
    margin: 0 auto;
    padding: 104px 24px 52px;
    transform: none;
  }

  .panel-column { order: 2; }
  .site-footer { order: 3; }

  .hero-icon { margin-bottom: -8px; }

  h1 {
    font-size: clamp(42px, 13.33vw, 56px);
    line-height: 1.125;
    letter-spacing: -0.03em;
  }

  .message-group p {
    font-size: clamp(18px, 4.65vw, 20px);
    letter-spacing: -0.03em;
  }

  .panel-column {
    padding: 0 24px;
    gap: 24px;
  }

  .panel {
    min-height: 0;
    scroll-margin-top: 24px;
  }

  .panel--media { padding: 56px 0; }

  .panel-copy,
  .doc {
    width: auto;
    padding: 48px 28px;
    gap: 32px;
  }

  .panel-title { font-size: clamp(32px, 8.5vw, 44px); }

  .feature-block { width: calc(100% - 40px); padding: 56px 0; gap: 36px; }

  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .panel-caption { position: static; margin-top: 8px; }
  .panel--media { flex-direction: column; }

  .site-footer {
    position: static;
    width: 100%;
    padding: 40px 24px;
  }

  .doc-section { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .doc-num { padding-top: 0; }
}

@media (max-width: 480px) {
  .widget { padding: 20px 18px; }
  .streak-grid { gap: 3px; }
  .lock-card { padding: 20px; }
  .lock-text { font-size: 14px; }
  .faq-list details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .panel[data-reveal],
  .js .panel[data-reveal] .chip,
  .js .panel[data-reveal] .float-icon {
    opacity: 1;
    transform: none;
    translate: none;
  }
}

/* TYST FAQ: fits one screen in every language (desktop) */
@media (min-width: 1164px) {
  .ty-panel .panel-copy { padding: 72px 0; gap: 30px; }
  .page-tyst .faq-list summary { padding: 18px 0; }
}

/* =====================================================================
   Phones: the whole site behaves like /apps (roomy taps, safe areas, quick feedback)
   ===================================================================== */

.cta,
.pill-link,
.site-footer a,
.lang-switch summary,
.faq-list summary,
.brand-link { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.panel-caption--dark { color: var(--muted-strong); }

@media (max-width: 1163px) {
  .brand-link { top: max(18px, env(safe-area-inset-top)); left: 14px; min-height: 44px; padding: 0 10px; }

  .site-footer {
    gap: 2px 4px;
    padding: 32px max(16px, env(safe-area-inset-right)) max(28px, calc(env(safe-area-inset-bottom) + 16px)) max(16px, env(safe-area-inset-left));
  }

  .site-footer > a,
  .site-footer .lang-switch summary { display: inline-flex; min-height: 44px; align-items: center; padding: 0 9px; }

  .cta-shell:active .cta,
  .pill-link:active,
  .links-mail:active { transform: scale(0.97); }
  .cta-shell:active .cta { transform: translateX(50%) scale(0.97); }

  .panel-column { padding: 0 max(16px, env(safe-area-inset-left)); gap: 16px; }
  .panel { border-radius: 24px; }

  .contact-card { padding: 24px; gap: 14px; }
  .contact-card h3 { font-size: 26px; }
  .faq-list summary { padding: 18px 0; font-size: 18px; }
  .faq-list details p { font-size: 16px; line-height: 25px; }

  .panel-caption--dark { padding: 0 20px; text-align: center; }

  /* NoMercy widgets sit side by side on small screens */
  .nm-widgets { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .nm-w { height: auto; min-height: 150px; padding: 14px; }
  .nm-w--small { width: 42%; flex: none; }
  .nm-w--medium { flex: 1; width: auto; min-width: 0; }
  .nm-w--small b { font-size: 40px; }
}

@media (max-width: 480px) {
  .feature-block { width: calc(100% - 32px); padding: 44px 0; gap: 28px; }
  .panel-copy,
  .doc { padding: 40px 20px; gap: 26px; }
  .panel-title { font-size: clamp(28px, 8vw, 36px); }
  .panel-lede,
  .nm-panel .panel-lede,
  .ty-panel .panel-lede { font-size: 16px; line-height: 24px; }
}