/* The Royal Card — public pages.
   The app's own room: warm black, green baize, ivory paper, restrained brass
   (src/styles/base.css has the same tokens). Materials are the app's
   pictures (assets/img); nothing here draws an ornament. */
@font-face {
  font-family: "Cormorant Garamond Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("fonts/cormorant-garamond-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The app's sans, its Latin letters and figures only (33 KB). Kana, kanji,
   hanzi and hangul are set in the reader's own faces, as the app does for
   Chinese and Korean: a whole Japanese face is megabytes. */
@font-face {
  font-family: "Noto Sans JP Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/noto-sans-jp-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans JP Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/noto-sans-jp-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #080b09;
  --panel: #111711;
  --line: rgba(201, 177, 132, 0.16);
  --line-strong: rgba(201, 177, 132, 0.34);
  --gold: #c9b184;
  --gold-bright: #e6d3a6;
  --ivory: #f0e8d7;
  --text: #e7e1d2;
  --text-dim: #b3ae9b;
  --alert: #e0a07e;
  --sans: "Noto Sans JP Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Cormorant Garamond Variable", Georgia, "Times New Roman", serif;
  --gutter: 20px;
  --wide: 1120px;
  color-scheme: dark;
}
/* Each script in a face that has its letters (the app's rules, base.css). */
:lang(ja) {
  --sans: "Noto Sans JP Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI",
    "Yu Gothic", Meiryo, sans-serif;
  /* Japanese titles in the device's Mincho: the voice the Latin titles have
     in Cormorant (the app's page titles, shell.css). */
  --display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", var(--sans);
}
:lang(zh-Hans) {
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC",
    "Source Han Sans SC", -apple-system, "Segoe UI", sans-serif;
  --display: "Cormorant Garamond Variable", var(--sans);
}
:lang(zh-Hant) {
  --sans: "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC",
    "Source Han Sans TC", -apple-system, "Segoe UI", sans-serif;
  --display: "Cormorant Garamond Variable", var(--sans);
}
:lang(ko) {
  --sans: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", -apple-system, "Segoe UI", sans-serif;
  --display: "Cormorant Garamond Variable", var(--sans);
}
:lang(en),
:lang(es),
:lang(fr),
:lang(de),
:lang(pt) {
  --sans: "Noto Sans JP Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Cormorant Garamond Variable", Georgia, "Times New Roman", serif;
}
[lang] {
  font-family: var(--sans);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-synthesis: none;
  /* (Cormorant's own figures are old-style: its 1 reads as an I.) */
  font-variant-numeric: lining-nums;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  /* The app's room: a dark woven ground, a little light from above. */
  background:
    radial-gradient(ellipse 90% 520px at 50% -80px, rgba(40, 58, 42, 0.34), transparent 70%),
    var(--bg) url("img/room.webp") 0 0 / 256px;
}
/* Line breaking, by script. Japanese and Chinese: the strict rule set (no
   line begins with a small kana, a long-vowel mark or a closing bracket).
   Korean breaks between words, never inside one. */
:lang(ja),
:lang(zh) {
  line-break: strict;
  overflow-wrap: anywhere;
}
:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}
p,
li,
dd,
td,
th {
  overflow-wrap: break-word;
  text-wrap: pretty;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  text-wrap: balance;
}
p {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
  -webkit-touch-callout: none;
}
a {
  color: var(--gold-bright);
  text-decoration-color: rgba(230, 211, 166, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover {
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--ivory);
  color: #14110a;
  text-decoration: none;
  border-radius: 4px;
}
.skip:focus {
  top: 12px;
}
.wrap {
  width: 100%;
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* A draft says so on every screen of every page. */
.draft {
  position: relative;
  z-index: 50;
  padding: 7px var(--gutter);
  background: #3a1d10;
  border-bottom: 1px solid rgba(224, 160, 126, 0.5);
  color: #f6d9c4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
}
.draft span {
  margin-left: 0.9em;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.86;
}
.draft-tab {
  position: fixed;
  left: 0;
  bottom: 18px;
  z-index: 50;
  padding: 5px 12px 5px 10px;
  background: #3a1d10;
  border: 1px solid rgba(224, 160, 126, 0.5);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  color: #f6d9c4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.blank {
  padding: 0.1em 0.45em;
  border: 1px dashed var(--alert);
  border-radius: 3px;
  background: rgba(224, 160, 126, 0.1);
  color: #f3c8ae;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.blank-tag {
  margin-right: 0.5em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--alert);
}

/* Top of every page: the mark, the way to support, the languages. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.top-mark {
  display: block;
  flex: none;
  line-height: 0;
}
.top-mark img {
  width: 104px;
}
.top-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 14px;
}
.top-links > a,
.lang > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}
.top-links > a:hover,
.lang > summary:hover,
.lang[open] > summary {
  color: var(--gold-bright);
}
.lang {
  position: relative;
}
.lang > summary {
  list-style: none;
  gap: 8px;
  -webkit-user-select: none;
  user-select: none;
}
.lang > summary::-webkit-details-marker {
  display: none;
}
.lang > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.lang[open] > summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #0d120e;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}
.lang li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}
.lang li a:hover {
  background: rgba(201, 177, 132, 0.08);
  color: var(--gold-bright);
}
.lang li a[aria-current] {
  color: var(--gold-bright);
}

/* ── The product page ─────────────────────────────────────────────────── */
.hero {
  display: grid;
  gap: 44px;
  padding-top: 20px;
  padding-bottom: 72px;
  text-align: center;
}
.hero h1 {
  line-height: 0;
}
.wordmark {
  width: min(74vw, 300px);
}
.hero-sub {
  margin-top: 26px;
  font-family: var(--display);
  font-size: clamp(22px, 5.6vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ivory);
  text-wrap: balance;
}
:lang(ja) .hero-sub,
:lang(ja) .sec-title,
:lang(ja) .doc-head h1 {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
/* The opening lines are said quietly: the Mincho's light weight. */
:lang(ja) .statement {
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 2;
}
/* A phrase stays whole: lines of display text end where a phrase ends
   (Japanese and Chinese have no spaces to break at). */
.ph {
  display: inline-block;
}
.st {
  display: block;
}
.nb {
  white-space: nowrap;
}
.hero-promo {
  max-width: 31em;
  margin: 18px auto 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.9;
}
.store {
  margin-top: 30px;
}
.store a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 7px solid transparent;
  border-image: url("img/button-gold.webp") 18 fill / 7px / 0 stretch;
  background: #c4a96f;
  background-clip: padding-box;
  color: #21190b;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.store a.badge {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.store a.badge img {
  display: block;
  height: 52px;
  width: auto;
}
.hero-screens {
  position: relative;
  width: min(66vw, 290px);
  margin: 0 auto;
}
.screen {
  display: block;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  border-radius: 9% / 4.2%;
  background: #0b0f0c;
  box-shadow:
    0 0 0 1px rgba(201, 177, 132, 0.3),
    0 28px 60px rgba(0, 0, 0, 0.62);
}
.hero-screens .screen + .screen {
  display: none;
}

.statement {
  max-width: 27em;
  margin: 0 auto;
  padding-top: 56px;
  padding-bottom: 88px;
  font-family: var(--display);
  font-size: clamp(21px, 5.2vw, 30px);
  line-height: 1.75;
  color: var(--ivory);
  text-align: center;
  text-wrap: balance;
}
:lang(en) .statement,
:lang(es) .statement,
:lang(fr) .statement,
:lang(de) .statement,
:lang(pt) .statement {
  max-width: 25em;
  font-size: clamp(23px, 5.8vw, 34px);
  line-height: 1.42;
}

.sec {
  padding-top: 72px;
  padding-bottom: 72px;
}
.sec-title {
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ivory);
}
.sec-title small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  font-feature-settings: normal;
}
.sec-lead {
  margin-top: 20px;
  max-width: 34em;
  color: var(--text);
}
.points {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  max-width: 36em;
}
.points li {
  padding: 15px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}
.points li:last-child {
  border-bottom: 1px solid var(--line);
}
.points b {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.03em;
}
.feature {
  display: grid;
  gap: 44px;
  align-items: center;
}
.feature-shots {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.feature-shots .screen {
  width: min(62vw, 270px);
}
.feature-shots.two .screen {
  width: min(43vw, 230px);
}
.feature-shots.two .screen:last-child {
  margin-top: 36px;
}

/* One large screen, and room round it. */
.stage-grid {
  display: grid;
  margin-top: 32px;
}
.stage-screen {
  order: -1;
  justify-self: center;
  width: min(74vw, 300px);
  margin-bottom: 36px;
}
.stage .points {
  margin-top: 0;
  max-width: none;
}
.stage .side.a li:last-child {
  border-bottom: 0;
}
.ways {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.ways li {
  padding: 20px 0 22px;
  border-top: 1px solid var(--line-strong);
}
.ways h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
}
.ways p {
  margin-top: 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.8;
}
/* The collection lies on the table's own cloth, inside its leather rail. */
.felt {
  position: relative;
  margin: 40px 0;
  padding: 104px 0 108px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, rgba(126, 180, 138, 0.2), transparent 78%),
    #164731 url("img/felt.webp") 0 0 / 384px;
  box-shadow:
    inset 0 60px 80px -40px rgba(0, 0, 0, 0.55),
    inset 0 -60px 80px -40px rgba(0, 0, 0, 0.55);
  color: var(--ivory);
}
.felt::before,
.felt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  background: #2a1d14 url("img/leather.webp") 0 0 / 256px;
}
.felt::before {
  top: 0;
  box-shadow:
    0 1px 0 rgba(201, 177, 132, 0.55),
    0 10px 18px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(0, 0, 0, 0.5);
}
.felt::after {
  bottom: 0;
  box-shadow:
    0 -1px 0 rgba(201, 177, 132, 0.55),
    0 -10px 18px rgba(0, 0, 0, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.5);
}
.felt .wrap {
  text-align: center;
}
.felt .sec-lead {
  margin-left: auto;
  margin-right: auto;
  color: var(--ivory);
  text-wrap: balance;
}
.crowns,
.backs {
  display: grid;
  justify-content: center;
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
}
.crowns {
  grid-template-columns: repeat(3, minmax(0, 104px));
  gap: 22px 20px;
}
.crowns img {
  display: block;
  width: 100%;
  border-radius: 50%;
  filter: saturate(0.9) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}
.backs {
  grid-template-columns: repeat(5, minmax(0, 76px));
  gap: 10px;
  margin-top: 40px;
}
.backs img {
  display: block;
  width: 100%;
  border-radius: 6.5% / 4.6%;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.5),
    2px 7px 12px rgba(0, 0, 0, 0.45);
}

/* Membership: the three plans, each shown as it looks at a seat. */
.tiers {
  display: grid;
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.tier {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 12px;
  padding: 26px 18px 22px;
  border: 6px solid transparent;
  border-image: url("img/panel-frame.webp") 45 fill / 6px / 0 stretch;
  background: #0e130d;
  background-clip: padding-box;
}
.seat {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 116px;
}
.seat img {
  width: 62px;
  border-radius: 50%;
  filter: saturate(0.9);
}
.plaque {
  display: grid;
  min-width: 104px;
  padding: 1px 8px 2px;
  border: 7px solid transparent;
  border-image: url("img/nameplate.webp") 30 fill / 7px / 0 stretch;
  background: #11170f;
  background-clip: padding-box;
  text-align: center;
  line-height: 1.3;
}
.plaque b {
  font-size: 14px;
  font-weight: 400;
  color: #ddd7c6;
}
.plaque span {
  font-size: 15px;
  font-weight: 600;
  color: #e9d6a6;
  font-variant-numeric: tabular-nums;
}
.plaque.vip {
  border-image-source: url("img/nameplate-vip.webp");
  background-color: #1e1205;
}
.plaque.vip b {
  color: #f6e7c4;
}
.plaque.vip span {
  color: #f0d088;
}
/* (The VVIP frame is twice as deep in its picture: the app's own numbers,
   src/styles/table.css.) */
.plaque.vvip {
  border-image-source: url("img/nameplate-vvip.webp");
  border-image-slice: 60 fill;
  border-image-width: 2;
  border-image-outset: 0 0 0.5;
  background-color: #070706;
}
.plaque.vvip b {
  color: #f4f4f0;
}
.plaque.vvip span {
  color: #dfe4ea;
}
.tier h3 {
  margin-top: 4px;
  font-family: "Cormorant Garamond Variable", var(--display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
}
.tier-lines {
  justify-self: stretch;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}
.tier-lines li + li {
  margin-top: 4px;
}
.terms-list {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  max-width: 40em;
  color: var(--text-dim);
  font-size: 15px;
}
.terms-list li + li {
  margin-top: 12px;
}
.terms-list li.strong {
  color: var(--ivory);
}
.notes {
  display: grid;
  gap: 48px;
}
.note h2 {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ivory);
}
:lang(ja) .note h2 {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 21px;
}
.note p {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 15px;
}
.adults {
  padding: 30px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.adults h2 {
  font-family: var(--display);
  font-size: 24px;
  color: var(--ivory);
}
:lang(ja) .adults h2 {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 21px;
}
.adults p {
  margin-top: 10px;
  max-width: 40em;
  color: var(--text);
}
.closing {
  padding-top: 8px;
  padding-bottom: 72px;
  color: var(--text-dim);
  font-size: 15px;
  text-align: center;
}
.closing p {
  max-width: 34em;
  margin: 0 auto;
}

/* ── The foot of every page ───────────────────────────────────────────── */
.foot {
  margin-top: 40px;
  padding: 48px 0 56px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-dim);
}
.foot-mark img {
  width: 132px;
}
.foot-nav,
.foot-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text);
  text-decoration: none;
}
.foot a:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}
.foot-langs {
  margin-top: 6px;
  gap: 0 18px;
  font-size: 13px;
}
.foot-langs a {
  color: var(--text-dim);
}
.foot-langs a[aria-current] {
  color: var(--gold-bright);
}
.foot-op {
  margin-top: 26px;
  color: var(--text);
}
.foot-small {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ── Documents: terms, policy, rules, notice, support ──────────────────── */
.doc {
  padding-bottom: 64px;
}
.doc-head {
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--line-strong);
}
.doc-head h1 {
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.25;
  color: var(--ivory);
}
.doc-meta {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-dim);
}
.doc-ref {
  max-width: 44em;
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(201, 177, 132, 0.06);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.doc-grid {
  display: grid;
  gap: 8px;
}
.toc-d {
  display: none;
}
.toc-m {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(13, 18, 14, 0.7);
}
.toc-m > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.toc-m > summary::-webkit-details-marker {
  display: none;
}
.toc-m > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
}
.toc-m[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc-m ol {
  padding: 0 8px 10px;
}
.toc a {
  display: block;
  padding: 9px 8px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 4px;
}
.toc a:hover {
  color: var(--gold-bright);
}
.toc .l3 a {
  padding-left: 22px;
}
.prose {
  min-width: 0;
  max-width: 41em;
  padding-top: 12px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text);
}
:lang(en) .prose {
  max-width: 35em;
  font-size: 17px;
  line-height: 1.72;
}
.prose h2 {
  margin: 2.6em 0 0.9em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.35;
  color: var(--ivory);
}
:lang(ja) .prose h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
.prose h2:first-child {
  margin-top: 1.4em;
  padding-top: 0;
  border-top: 0;
}
.prose h2 .h-no {
  margin-right: 0.5em;
  font-family: "Cormorant Garamond Variable", Georgia, serif;
  font-weight: 500;
  font-size: 1.12em;
  letter-spacing: 0;
  color: var(--gold);
  font-feature-settings: normal;
  font-variant-numeric: lining-nums;
}
.prose h3 {
  margin: 2.2em 0 0.6em;
  font-size: 1.06em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
}
.prose h3.lead,
.prose h4.lead,
.prose h5.lead {
  margin: 1.9em 0 0.45em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ivory);
}
.prose .q {
  padding-top: 1.3em;
  border-top: 1px solid var(--line);
}
.prose h3 + .q,
.prose h2 + .q {
  padding-top: 0;
  border-top: 0;
  margin-top: 1em;
}
.prose p {
  margin: 0.85em 0;
}
.prose p.lines {
  line-height: 1.85;
}
.prose strong {
  font-weight: 600;
  color: var(--ivory);
}
.prose ul {
  margin: 0.8em 0;
  padding-left: 1.3em;
}
.prose li {
  margin: 0.4em 0;
  padding-left: 0.2em;
}
.prose li::marker {
  color: var(--gold);
}
.prose a.ext {
  word-break: break-all;
}
.clause {
  margin: 1em 0;
  scroll-margin-top: 24px;
}
.clause > p:first-child {
  margin-top: 0;
}
.clause-no {
  margin-right: 0.7em;
  font-family: "Cormorant Garamond Variable", Georgia, serif;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.sub {
  margin: 0.6em 0;
  padding: 0;
  list-style: none;
}
.sub li {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  margin: 0.5em 0;
  padding: 0;
}
.sub-mark {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.prose :target {
  animation: target 2.4s ease-out;
}
@keyframes target {
  from {
    background: rgba(201, 177, 132, 0.16);
  }
}
/* Tables. On a phone each row is a short entry of its own: its first cell
   the heading, the others under the name of their column. */
.table-wrap {
  margin: 1.4em 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94em;
  line-height: 1.75;
}
.prose thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.prose tr {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.prose tr:last-child {
  border-bottom: 1px solid var(--line);
}
.prose tbody th,
.prose td {
  display: block;
  padding: 0;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.prose tbody th {
  color: var(--text);
}
.prose table.cols-2 tbody th {
  color: var(--ivory);
  font-weight: 500;
}
.prose td {
  margin-top: 8px;
  color: var(--text);
}
.prose table:not(.cols-2) td::before {
  content: attr(data-label);
  display: block;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.summary-en {
  margin-top: 56px;
  padding-top: 8px;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 400px) {
  .crowns {
    grid-template-columns: repeat(3, minmax(0, 112px));
    gap: 26px 28px;
  }
}
@media (min-width: 720px) {
  :root {
    --gutter: 40px;
  }
  .top-mark img {
    width: 118px;
  }
  .hero {
    padding-bottom: 96px;
  }
  .wordmark {
    width: 340px;
  }
  .hero-screens {
    width: 300px;
  }
  .sec {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .crowns {
    grid-template-columns: repeat(6, minmax(0, 104px));
    gap: 24px;
  }
  .backs {
    grid-template-columns: repeat(5, minmax(0, 92px));
    gap: 16px;
  }
  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .ways {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 40px;
  }
  .ways.n3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tier {
    gap: 14px;
    padding: 30px 22px 28px;
    align-content: start;
  }
  .sec.after {
    padding-top: 0;
  }
  .notes {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .notes.n2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .prose thead {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
  .prose tr {
    display: table-row;
    padding: 0;
    border: 0;
  }
  .prose tbody th,
  .prose td,
  .prose thead th {
    display: table-cell;
    padding: 13px 18px 13px 0;
    border-top: 1px solid var(--line);
  }
  .prose td {
    margin-top: 0;
  }
  .prose thead th {
    border-top: 0;
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-align: left;
    white-space: nowrap;
  }
  .prose tbody tr:last-child > * {
    border-bottom: 1px solid var(--line);
  }
  .prose table:not(.cols-2) td::before {
    content: none;
  }
  .prose tbody th {
    width: 36%;
  }
  .prose table.cols-3 td:nth-child(2) {
    width: 21%;
  }
  .prose table.cols-2 tbody th {
    width: 32%;
  }
  .clause {
    position: relative;
    padding-left: 3.6em;
  }
  .clause-no {
    position: absolute;
    left: 0;
    top: -0.06em;
    margin: 0;
  }
}
@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 72px;
    padding-top: 36px;
    padding-bottom: 120px;
    text-align: left;
  }
  .wordmark {
    width: 400px;
    margin-left: -10px;
  }
  .hero-promo {
    margin-left: 0;
    font-size: 17px;
  }
  .hero-screens {
    width: 560px;
    height: 690px;
    margin: 0;
  }
  .hero-screens .screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 310px;
    z-index: 2;
  }
  .hero-screens .screen + .screen {
    display: block;
    left: auto;
    right: 0;
    top: 64px;
    width: 270px;
    z-index: 1;
    filter: brightness(0.82);
  }
  .statement {
    padding-top: 72px;
    padding-bottom: 120px;
  }
  .sec {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 88px;
  }
  .feature.flip .feature-shots {
    order: -1;
  }
  .ways.n4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 36px;
  }
  .stage > .sec-title,
  .stage > .sec-lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .stage-grid {
    grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    margin-top: 64px;
  }
  .stage-screen {
    order: 0;
    width: 340px;
    margin-bottom: 0;
  }
  .stage .side.a li:last-child {
    border-bottom: 1px solid var(--line);
  }
  .ways {
    margin-top: 44px;
  }
  .feature-shots .screen {
    width: 290px;
  }
  .feature-shots.two .screen {
    width: 244px;
  }
  .feature-shots.two .screen:last-child {
    margin-top: 56px;
  }
  .felt {
    padding: 136px 0 140px;
  }
  .crowns {
    grid-template-columns: repeat(6, 124px);
    gap: 32px;
  }
  .backs {
    grid-template-columns: repeat(5, 104px);
    gap: 22px;
    margin-top: 56px;
  }
  .doc-grid {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
  .toc-m {
    display: none;
  }
  .toc-d {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    margin-top: 40px;
    padding-right: 8px;
    overflow-y: auto;
  }
  .toc-d h2 {
    margin-bottom: 8px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--gold);
  }
  .toc-d a {
    padding: 6px 8px;
    font-size: 13.5px;
  }
  .prose {
    padding-top: 28px;
  }
}
/* A wide window: a table may take the room beside the column of text. */
@media (min-width: 1280px) {
  .table-wrap {
    margin-right: -9em;
  }
}
@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }
  .top-links > a,
  .lang > summary {
    padding: 0 8px;
  }
  .backs {
    gap: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .prose :target {
    animation: none;
  }
}

/* Paper: black on white, the text and nothing else. */
@media print {
  @page {
    margin: 18mm 16mm 20mm;
  }
  html,
  body {
    background: #fff !important;
    color: #000;
    font-size: 10.5pt;
  }
  .top,
  .foot-nav,
  .foot-langs,
  .foot-mark,
  .toc-m,
  .skip,
  .draft-tab,
  .store,
  .hero-screens,
  .feature-shots {
    display: none !important;
  }
  .draft {
    background: none;
    border: 1px solid #000;
    color: #000;
  }
  .wrap {
    max-width: none;
    padding: 0;
  }
  .doc-grid {
    display: block;
  }
  .toc-d {
    display: block;
    position: static;
    max-height: none;
    margin: 12pt 0 0;
    overflow: visible;
    break-after: avoid;
  }
  .toc-d a {
    padding: 2pt 0;
  }
  .prose,
  .doc-head h1,
  .prose h2,
  .prose h3,
  .prose .lead,
  .prose strong,
  .prose tbody th,
  .prose td,
  .doc-meta,
  .doc-ref,
  .toc a,
  .toc-d h2,
  .clause-no,
  .sub-mark,
  .prose h2 .h-no,
  .foot,
  .foot-op,
  .foot-small,
  a {
    color: #000 !important;
  }
  .prose {
    max-width: none;
    font-size: 10.5pt;
    line-height: 1.7;
  }
  .prose h2,
  .prose h3,
  .prose .lead {
    break-after: avoid;
  }
  .prose h2,
  .doc-head,
  .prose tr,
  .prose tbody th,
  .prose td,
  .prose thead th,
  .prose .q,
  .foot {
    border-color: #999 !important;
  }
  .clause,
  .prose tr,
  .prose li {
    break-inside: avoid;
  }
  .table-wrap {
    margin-right: 0;
  }
  .doc-ref {
    background: none;
    border-left: 2pt solid #000;
  }
  .blank {
    border: 1px dashed #000;
    background: none;
    color: #000;
  }
  .blank-tag {
    color: #000;
  }
  .prose a.ext::after {
    content: " ‹" attr(href) "›";
    font-size: 0.85em;
    word-break: break-all;
  }
  .prose td::before {
    color: #444 !important;
  }
  .prose li::marker {
    color: #000;
  }
}

/* Prelaunch status is typography, not a disabled purchase button. */
.coming-soon { font-family: "Cormorant Garamond Variable", Georgia, serif; font-size: clamp(30px, 5vw, 52px); letter-spacing: .08em; color: #d8c49a; margin: 24px 0 12px; }
.prelaunch .hero { min-height: 72svh; }