/*
 * GALULU landing page styles.
 * Colours and fonts are set once in :root below; each page section has its own block.
 */

/* ========== Fonts (self-hosted, SIL Open Font License; see fonts/LICENSE-*.txt) ========== */

@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/titan-one-latin-400.woff2') format('woff2');
  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: 'Rubik Variable';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/rubik-latin-variable.woff2') format('woff2');
  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: 'DM Sans Variable';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-variable.woff2') format('woff2');
  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;
}

/* Shinjuku sections only: condensed headings and handwritten notes (browsers download these only where used). */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-400.woff2') format('woff2');
  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: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-brush-latin-400.woff2') format('woff2');
  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;
}

/* ========== Base: colours, fonts, layout helpers, buttons ========== */

:root {
  --c-bg: #050505;
  --c-ink: #050505;
  --c-text: #ffffff;
  --c-pink: #ff69d4;
  --c-pink-light: #ff9be3;
  --c-pink-deep: #f24dc2;
  /* Sampled from heisei-section-background.png */
  --c-panel: #fc8ad1;
  --c-panel-rim: #fc80e2;
  /* Plans & pricing: note and prices */
  --c-pink-soft: #ff80cc;

  --font-display: 'Titan One', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
  --font-ui: 'Rubik Variable', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'DM Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 1320px;
  --gutter: clamp(20px, 3.6vw, 56px);

  /* Motion (see "Motion" at the end of this file) */
  --m-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ease-loop: ease-in-out;
  --m-dur-fast: 200ms;
  --m-dur-hover: 320ms;
  --m-dur-lift: 450ms;
  --m-dur-zoom: 600ms;
  --m-dur-pop: 600ms;
  --m-dur-in: 700ms;
  --m-dur-card: 800ms;
  --m-dur-panel: 900ms;
  --m-dur-settle: 1100ms;
  --m-dist: 16px;
  --m-dist-card: 24px;
  --m-zoom: 1.03;

  color-scheme: dark;
}

@media (min-width: 40rem) {
  :root {
    --m-dist: 24px;
    --m-dist-card: 40px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

[id] {
  scroll-margin-top: 16px;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Pink pill button with a northeast arrow */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.8em 1.7em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-pink-light) 0%, var(--c-pink) 48%, var(--c-pink-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 0 rgb(120 0 80 / 0.18);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 0 rgb(120 0 80 / 0.18),
    0 10px 24px -10px rgb(255 105 212 / 0.8);
}

.btn:active {
  transform: translateY(0);
}

.btn > span {
  /* With an enlarged browser font a label may need two lines; keep them even. */
  text-wrap: balance;
}

.icon-arrow {
  flex: none;
  width: 0.95em;
  height: 0.95em;
}

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover {
    transition: none;
    transform: none;
  }
}

/* ========== Header and navigation ========== */

.site-header {
  --logo-w: 124px;
  --heart-w: 40px;
  --bar-gap: 12px;
  position: relative;
  z-index: 20;
  background: var(--c-bg);
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr var(--logo-w) 1fr;
  align-items: center;
  column-gap: var(--bar-gap);
  padding-block: 10px 6px;
}

.site-header__brand {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: block;
  border-radius: 12px;
}

.site-header__brand img {
  width: 100%;
}

.site-header__heart {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: var(--heart-w);
  rotate: -8deg;
}

/* Desktop navigation */
.site-nav {
  display: none;
}

.site-nav__group {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  list-style: none;
}

.site-nav__group li {
  display: flex;
  align-items: center;
}

.site-nav__group li + li::before {
  content: '';
  width: 2px;
  height: 30px;
  margin-inline: clamp(8px, 1.4vw, 22px);
  border-radius: 1px;
  background: rgb(255 255 255 / 0.32);
}

.site-nav a,
.mobile-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--c-text);
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav a {
  padding-inline: 6px;
  font-size: clamp(1rem, 0.6rem + 0.65vw, 1.25rem);
  text-shadow: 0 2px 6px rgb(0 0 0 / 0.6);
}

.site-nav a:hover,
.mobile-menu a:hover {
  color: var(--c-pink-light);
}

.site-nav__heart {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--heart-w);
  translate: 0 -50%;
  rotate: 8deg;
}

/* Mobile menu */
.menu-button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 2px solid var(--c-pink);
  border-radius: 999px;
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-button:hover {
  background: rgb(255 105 212 / 0.14);
}

.menu-button__icon {
  display: grid;
  gap: 4px;
  width: 18px;
}

.menu-button__icon span {
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.menu-button[aria-expanded='true'] .menu-button__icon span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-button[aria-expanded='true'] .menu-button__icon span:nth-child(2) {
  opacity: 0;
}

.menu-button[aria-expanded='true'] .menu-button__icon span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-bottom: 2px solid var(--c-pink);
  background: var(--c-bg);
  box-shadow: 0 24px 40px -12px rgb(0 0 0 / 0.8);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu ul {
  padding: 4px 0 16px;
  list-style: none;
}

.mobile-menu li + li {
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.mobile-menu a {
  width: 100%;
  min-height: 56px;
  font-size: 1.25rem;
}

/* BOOK as a pink button in the header and the phone menu (every page since 7 October 2026): the .btn look, sized
   for the header. No divider bar before it, and no hover underline (the Motion section's nav underline). */
.site-nav__group li.site-nav__cta::before {
  background: none;
}

.site-nav a.btn,
.mobile-menu a.btn {
  min-height: 44px;
  padding: 0.5em 1.25em;
  color: var(--c-ink);
  text-shadow: none;
}

.site-nav a.btn:hover,
.mobile-menu a.btn:hover {
  color: var(--c-ink);
}

.site-nav a.btn:not([aria-current])::after {
  content: none;
}

.mobile-menu li.mobile-menu__cta {
  padding-block: 14px 4px;
}

.mobile-menu a.btn {
  min-height: 52px;
}

/* Instagram / TikTok icons at the bottom of the phone menu */
.mobile-menu li.mobile-menu__social {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 12px;
  border-top: 0;
}

.mobile-menu__social a {
  justify-content: center;
  width: auto;
  min-width: 48px;
  color: var(--c-pink);
}

.mobile-menu__social svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .menu-button__icon span {
    transition: none;
  }
}

/* The 50rem term only matters with an enlarged browser font (20px font -> 1000px, 24px -> 1200px): below it the
   four header links would crowd the logo, so the menu button is used instead. Same query in js/menu.js. */
@media (min-width: 960px) and (min-width: 50rem) {
  .site-header {
    --logo-w: clamp(160px, 14vw, 205px);
    --heart-w: clamp(40px, 3.6vw, 52px);
    --bar-gap: clamp(16px, 2.2vw, 36px);
  }

  .site-header__bar {
    padding-block: 12px 4px;
  }

  .site-nav {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr var(--logo-w) 1fr;
    align-items: center;
    column-gap: var(--bar-gap);
  }

  .site-nav__group--left {
    grid-column: 1;
    padding-inline-start: var(--heart-w);
  }

  .site-nav__group--right {
    grid-column: 3;
    padding-inline-end: var(--heart-w);
  }

  .site-header__heart,
  .menu-button,
  .mobile-menu {
    display: none;
  }
}

@media (forced-colors: active) {
  .menu-button__icon span {
    background: CanvasText;
  }
}

/* ========== Hero ========== */

.hero {
  position: relative;
  z-index: 2;
  padding-block: clamp(8px, 1.5vw, 16px) clamp(20px, 3vw, 32px);
}

.hero__inner {
  display: grid;
  gap: 28px;
}

.hero__copy {
  container-type: inline-size;
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  color: var(--c-pink);
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 4.4cqi, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.hero__title {
  margin-top: 0.3em;
  color: var(--c-text);
  font-family: var(--font-display);
  /* px minimum so an enlarged browser font size cannot push the nowrap lines off-screen */
  font-size: clamp(36px, 13.3cqi, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-shadow:
    0 0.055em 0 var(--c-pink),
    0 0.06em 0.35em rgb(255 105 212 / 0.35);
}

.hero__title span {
  display: block;
  white-space: nowrap;
}

.hero__lede {
  margin-top: 0.75em;
  color: var(--c-text);
  font-size: clamp(1.0625rem, 5cqi, 1.75rem);
  font-weight: 500;
  line-height: 1.45;
}

/* One plain sentence on what GALULU is, where and how to book (for visitors, search engines and AI assistants); smaller
   and softer than the lede, so the slogan and lede stay the hero's voice. On desktop it fits beside the collage. */
.hero__intro {
  max-width: 34em;
  margin-top: 0.85em;
  color: rgb(255 255 255 / 0.78);
  font-size: clamp(0.9375rem, 3.4cqi, 1.0625rem);
  font-weight: 500;
  line-height: 1.55;
}

.hero__nowrap {
  white-space: nowrap;
}

@container (min-width: 380px) {
  .hero__lede-line {
    display: block;
  }
}

.hero__cta {
  margin-top: clamp(20px, 5cqi, 32px);
  font-size: clamp(1rem, 4.2cqi, 1.5rem);
  min-height: clamp(56px, 13cqi, 76px);
  padding-inline: 2.1em;
}

@media (max-width: 359px) {
  .hero__cta {
    padding-inline: 1.1em;
  }
}

.hero__stickers {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 6cqi, 40px);
  margin-top: clamp(14px, 4cqi, 24px);
}

.hero__gal-forever {
  width: clamp(180px, 44cqi, 240px);
  rotate: -3deg;
}

.hero__star {
  width: clamp(48px, 12cqi, 72px);
  margin-top: -6px;
  rotate: 14deg;
}

/* Stacked layout (phones and tablets): the collage comes first, above the headline. */
.hero__art {
  order: -1;
}

.hero__art img {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

/* Landscape phones: keep the whole collage within the screen height. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero__art img {
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - 24px);
  }
}

/* Two columns on desktop, and on landscape phones where stacking would be very tall. */
@media (min-width: 960px), (min-width: 600px) and (orientation: landscape) and (max-height: 540px) {
  .hero__inner {
    /* The copy column keeps a minimum so short landscape windows never squeeze it under the collage. */
    grid-template-columns: minmax(16.5rem, 43fr) minmax(0, 57fr);
    align-items: center;
    gap: clamp(12px, 2.4vw, 40px);
  }

  .hero__art {
    order: 0;
    margin-inline-end: calc(-1 * min(var(--gutter), 24px));
  }
}

@media (min-width: 960px) {
  .hero__art img {
    max-width: 100%;
  }
}

@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px) {
  .hero__cta {
    padding-inline: 1em;
  }
}

/* ========== What Is Heisei GAL? ========== */

.heisei {
  position: relative;
  /* Tuck the transparent top of the artwork under the hero, like layered stickers. */
  margin-top: calc(-1 * min(5.6vw, 92px));
  /* Room for the wave that hangs below the stacked text panel. */
  padding-bottom: clamp(26px, 5.5vw, 48px);
}

/* rem, not px: with an enlarged browser font the overlay switches on later, so text stays on the panel. */
@media (min-width: 68.75rem) {
  .heisei {
    padding-bottom: 0;
  }
}

.heisei__panel {
  container: heisei / inline-size;
  position: relative;
  max-width: 1680px;
  margin-inline: auto;
}

.heisei__panel picture {
  display: block;
}

.heisei__art {
  position: relative;
  z-index: 1;
  width: 100%;
}

/*
 * Stacked layout (phones and tablets): the full artwork at its natural 2:1 ratio,
 * then the live text on a matching pink surface. The surface is tucked under the
 * artwork's lower wave so no black shows through, and ends in its own wave edge.
 * Offsets are measured from the artwork: its lowest trough sits at 41.5% of the
 * width from the top, and its rounded bottom corners at 1.7% / 98.3%.
 */
.heisei__copy {
  position: relative;
  margin: -8.7cqi 1.8cqi 0;
  padding: calc(8.7cqi + 18px) var(--gutter) clamp(20px, 5cqi, 36px);
  background: var(--c-panel);
  color: var(--c-ink);
}

/*
 * Phones in portrait show the square artwork (see the <picture> in index.html). Its lowest
 * trough sits at 91.7% of its height and its rounded bottom corners at 3% / 98.2%.
 */
@media (max-width: 759px) and (orientation: portrait) {
  .heisei__copy {
    margin: -8.3cqi 1.8cqi 0 3cqi;
    padding-top: calc(8.3cqi + 18px);
  }
}

.heisei__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9.6cqi, 3rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.98;
}

.heisei__title span {
  display: block;
}

.heisei__text {
  max-width: 36em;
  margin-top: 0.9em;
  font-size: clamp(1.0625rem, 0.95rem + 0.5cqi, 1.25rem);
  font-weight: 500;
  line-height: 1.55;
}

.heisei__text strong {
  font-weight: 800;
}

.heisei__wave {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: clamp(22px, 5.5cqi, 44px);
  overflow: visible;
}

.heisei__wave-fill {
  fill: var(--c-panel);
}

.heisei__wave-rim {
  fill: none;
  stroke: var(--c-panel-rim);
  stroke-width: 5px;
  filter: drop-shadow(0 0 6px rgb(252 128 226 / 0.7));
}

/*
 * Desktop overlay: live text sits in the clear pink area on the right of the artwork,
 * clear of the TOKYO ticket, the stars, the faces and the SAME GIRLS slogan.
 */
@container heisei (min-width: 68.75rem) {
  .heisei__copy {
    position: absolute;
    z-index: 2;
    top: 28.5%;
    left: 50.5%;
    width: 37.5%;
    margin: 0;
    padding: 0;
    background: none;
  }

  /* Capped so the hero headline stays the strongest text on the page. */
  .heisei__title {
    font-size: min(5.1cqi, 72px);
  }

  /* The paragraph stays left of the SAME GIRLS slogan (x ≥ 79.5%), so it may run lower. */
  .heisei__text {
    max-width: 29cqi;
    margin-top: 1.4cqi;
    font-size: clamp(1rem, 1.42cqi, 1.5rem);
    line-height: 1.5;
  }

  .heisei__wave {
    display: none;
  }
}

/* ========== Plans & pricing ========== */

.pricing {
  --pricing-gap: clamp(16px, 1.6vw, 22px);
  position: relative;
  /* Includes room for the wavy trims at the top and bottom edge. */
  padding-block: clamp(60px, 2.75rem + 3.8vw, 100px);
}

/* Homepage: Pricing follows What Is Heisei GAL? directly. Keep a band of black between the pink
   panel's hanging wave and the neon trim (the studio cards sat between them until 7 October 2026). Stacked Heisei layout
   only: the wide layout has no hanging wave. */
@media (max-width: 68.74rem) {
  .heisei + .pricing {
    margin-top: clamp(44px, 6.5vw, 72px);
  }
}

.pricing__wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(18px, 3.2vw, 44px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgb(255 105 212 / 0.55));
}

.pricing__wave--top {
  top: clamp(4px, 1vw, 12px);
}

.pricing__wave--bottom {
  bottom: clamp(4px, 1vw, 12px);
  scale: 1 -1;
}

/* Below the footer's 960px breakpoint its pink rule sits right under this section:
   keep the bottom wave well clear of it. */
@media (max-width: 959.98px) {
  .pricing {
    padding-bottom: calc(clamp(60px, 2.75rem + 3.8vw, 100px) + 18px);
  }

  .pricing__wave--bottom {
    bottom: calc(clamp(4px, 1vw, 12px) + 18px);
  }
}

.pricing__wave-line {
  fill: none;
  stroke: var(--c-pink);
  stroke-width: 4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pricing__wave-line--thin {
  stroke: var(--c-pink-light);
  stroke-width: 1.5px;
  opacity: 0.75;
}

.pricing__inner {
  position: relative;
}

.pricing__head {
  position: relative;
  margin-bottom: clamp(22px, 3vw, 36px);
  text-align: center;
}

.pricing__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 24px);
}

.pricing__title {
  min-width: 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(min(2.125rem, 10.5vw), 1.25rem + 3.9vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-shadow: 0 0 0.35em rgb(255 105 212 / 0.35);
  text-wrap: balance;
}

.pricing__star {
  flex: none;
  width: clamp(28px, 4.2vw, 60px);
}

.pricing__star--left {
  rotate: -12deg;
}

.pricing__star--right {
  rotate: 10deg;
  translate: 0 -8%;
}

.pricing__note {
  margin-top: 0.5em;
  color: var(--c-pink-soft);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Decorations never take clicks or cover content. */
.pricing__star,
.pricing__heart,
.pricing__accent-star {
  pointer-events: none;
}

.pricing__heart {
  position: absolute;
  top: -44px;
  right: 2px;
  width: 38px;
  rotate: 10deg;
}

/* Phones: extra top room keeps the small heart clear of the wavy trim. */
@media (max-width: 39.99rem) {
  .pricing {
    padding-top: 72px;
  }
}

/* Where the heading cannot fit on one line, wrap it as PLANS & / PRICING
   in a narrow box so the stars stay next to the words. */
@media (max-width: 28.49rem) {
  .pricing__title {
    max-inline-size: 4.6em;
  }
}

.pricing__accent-star {
  display: none;
}

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pricing-gap);
  padding: 0;
  list-style: none;
}

/* The photo and caption are informational; the only links are the booking buttons at the bottom of each card.
   On hover only the photo zooms a little (see Motion). */
.plan-card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--c-pink);
  border-radius: 20px;
  background: #000;
  box-shadow: 0 0 22px -6px rgb(255 105 212 / 0.6);
}

/* Thin inner highlight for the glossy border */
.plan-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgb(255 214 240 / 0.45);
  pointer-events: none;
}

.plan-card__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1315 / 1196;
  object-fit: cover;
}

/* Title and price sit together at the bottom of the caption (spare row height goes
   above the title), so prices line up across a row without a fixed caption height. */
.plan-card__caption {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 4.5cqi, 22px) clamp(14px, 4cqi, 20px) clamp(18px, 5cqi, 22px);
  text-align: center;
}

.plan-card__title {
  margin-block: auto 0;
  color: var(--c-text);
  font-family: var(--font-display);
  /* The minimum also shrinks with very narrow cards so a much larger browser font
     cannot push PHOTOSHOOT out of a 320px-wide phone card. */
  font-size: clamp(min(1.875rem, 11.5cqi), 9.4cqi, 2.625rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Always smaller than the title (max 1.75rem vs title min 1.875rem). */
.plan-card__price {
  margin-top: clamp(8px, 2.4cqi, 12px);
  color: var(--c-pink-soft);
  font-family: var(--font-display);
  font-size: clamp(min(1.375rem, 8cqi), 6cqi, 1.75rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

/* Start times (every hour from 10:00 until the plan's last start) */
.plan-card__times {
  margin-top: clamp(6px, 1.8cqi, 10px);
  color: rgb(255 255 255 / 0.78);
  font-family: var(--font-ui);
  font-size: clamp(0.8125rem, 3.6cqi, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Booking buttons at the bottom of each card (Shinjuku, the only branch since October 2026; the row also fits two
   buttons side by side, stacking them when the card is too narrow). Each links to that plan on RESERVA. */
.plan-card__book {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 clamp(14px, 4cqi, 20px) clamp(16px, 4.5cqi, 20px);
}

.plan-book {
  display: inline-flex;
  /* at least the width of a one-line label, so a pair stacks instead of wrapping its words */
  flex: 1 1 12.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 46px;
  padding: 0.55em 1em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

/* Only with a much larger browser font on a narrow phone can a full-width label need two lines: keep them even. */
.plan-book > span {
  text-wrap: balance;
}

.plan-book .icon-arrow {
  flex: none;
  width: 0.95em;
  height: 0.95em;
}

/* Booking open: the site's pink pill (as .btn) */
a.plan-book[href] {
  background: linear-gradient(180deg, var(--c-pink-light) 0%, var(--c-pink) 48%, var(--c-pink-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 0 rgb(120 0 80 / 0.18);
  color: var(--c-ink);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

a.plan-book[href]:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 0 rgb(120 0 80 / 0.18),
    0 10px 24px -10px rgb(255 105 212 / 0.8);
}

/* Until booking opens the button has no href (tools/open-booking.py): muted, dashed, no arrow, never looks
   clickable, with "Online booking opens soon." under the buttons. Both go away by themselves once it has an href. */
.plan-book:not([href]) {
  border-style: dashed;
  border-color: rgb(255 128 204 / 0.75);
  color: rgb(255 255 255 / 0.82);
  cursor: default;
}

.plan-book:not([href]) .icon-arrow {
  display: none;
}

.plan-card__book:has(> .plan-book:not([href]))::after {
  content: 'Online booking opens soon.';
  flex-basis: 100%;
  margin-top: 2px;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  a.plan-book[href],
  a.plan-book[href]:hover {
    transition: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .plan-book {
    border-color: ButtonText;
  }
}

@media (min-width: 40rem) {
  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Tablet: the fifth card is centred at the same width as the others. */
  .plan-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--pricing-gap)) / 2);
  }

  .pricing__heart {
    top: clamp(-40px, -3vw, -12px);
    width: clamp(48px, 6vw, 96px);
  }
}

/* Desktop: 3 cards, then 2 slightly wider centred cards (12-column grid). */
@media (min-width: 64rem) {
  .pricing {
    --pricing-gap: clamp(20px, 1.6vw, 22px);
  }

  .pricing__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .plan-card__title {
    font-size: clamp(2rem, 9.4cqi, 2.625rem);
  }

  .plan-card__price {
    font-size: clamp(1.5rem, 6cqi, 1.75rem);
  }

  .plan-card {
    grid-column: span 4;
  }

  .plan-card:nth-child(4) {
    grid-column: 2 / span 5;
  }

  .plan-card:nth-child(5) {
    grid-column: 7 / span 5;
    justify-self: stretch;
    width: auto;
  }

  .pricing__accent-star {
    position: absolute;
    bottom: 28px;
    left: 0;
    display: block;
    width: clamp(48px, 5vw, 72px);
    rotate: -10deg;
  }
}

/* ========== Gallery ========== */

.gallery {
  --gallery-gap: clamp(10px, 1.4vw, 18px);
  padding-block: clamp(16px, 3vw, 40px) clamp(48px, 7vw, 88px);
}

.gallery__head,
.faq__head {
  margin-bottom: clamp(22px, 3vw, 36px);
  text-align: center;
}

.gallery__title-row,
.faq__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 24px);
}

.gallery__title,
.faq__title {
  min-width: 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(min(2.125rem, 8.8vw), min(1.25rem + 3.9vw, 8.8vw), 4.5rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.02;
  text-shadow: 0 0 0.35em rgb(255 105 212 / 0.35);
  text-wrap: balance;
}

.gallery__star,
.faq__star {
  flex: none;
  width: clamp(28px, 4.2vw, 60px);
  pointer-events: none;
}

.gallery__star--left,
.faq__star--left {
  rotate: 12deg;
}

.gallery__star--right,
.faq__star--right {
  rotate: -10deg;
  translate: 0 -8%;
}

.gallery__note,
.faq__note {
  margin-top: 0.5em;
  color: var(--c-pink-soft);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Masonry-style columns keep every photo uncropped at its own shape. */
.gallery__grid {
  columns: 2;
  column-gap: var(--gallery-gap);
  padding: 0;
  list-style: none;
}

.gallery__cell {
  break-inside: avoid;
  margin-bottom: var(--gallery-gap);
  /* Room for the tile glow inside the column box. */
  padding: 2px;
}

.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--c-pink);
  border-radius: 16px;
  background: #1a1016;
  box-shadow: 0 0 16px -6px rgb(255 105 212 / 0.55);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.gallery__item img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

/* Small "expand" badge that marks the photos as openable */
.gallery__item::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E")
      center / 15px no-repeat,
    var(--c-pink);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .gallery__item::after {
    opacity: 0;
    transform: scale(0.8);
  }

  .gallery__item:hover,
  .gallery__item:focus-visible {
    border-color: var(--c-pink-light);
    box-shadow: 0 0 24px -4px rgb(255 105 212 / 0.8);
  }

  .gallery__item:hover::after,
  .gallery__item:focus-visible::after {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery__item:hover img {
    transform: scale(1.04);
  }
}

/* Decorative sticker tile, shown only in the 4-column layout where it evens out the columns. */
.gallery__sticker {
  position: relative;
  display: none;
  aspect-ratio: 10 / 7;
  pointer-events: none;
}

.gallery__sticker-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  translate: -50% -50%;
  rotate: -6deg;
}

.gallery__sticker-star {
  position: absolute;
  top: 4%;
  right: 6%;
  width: 20%;
  rotate: 14deg;
}

@media (min-width: 40rem) {
  .gallery__grid {
    columns: 3;
  }
}

@media (min-width: 64rem) {
  .gallery__grid {
    columns: 4;
  }

  .gallery__sticker {
    display: block;
  }
}

/* ========== Full-screen photo viewer ========== */

html.is-lightbox-open {
  overflow: hidden;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);
  color: var(--c-text);
  overscroll-behavior: contain;
}

.lightbox::backdrop {
  background: rgb(5 5 5 / 0.9);
}

.lightbox[open] {
  display: grid;
  grid-template: 'stage' 1fr 'bar' auto / 1fr;
}

.lightbox__stage {
  grid-area: stage;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 64px 16px 8px;
  touch-action: pan-y pinch-zoom;
}

.lightbox__img {
  width: auto;
  max-width: min(100%, 1600px);
  height: auto;
  max-height: calc(100dvh - 150px);
  border: 2px solid var(--c-pink);
  border-radius: 14px;
  background: #1a1016;
  box-shadow: 0 0 40px -10px rgb(255 105 212 / 0.7);
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__img.is-loading {
  opacity: 0;
}

.lightbox__counter {
  grid-area: bar;
  justify-self: center;
  align-self: center;
  min-height: 52px;
  padding: 0 72px;
  color: var(--c-pink-soft);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 52px;
  margin-bottom: 14px;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--c-pink);
  border-radius: 50%;
  background: rgb(5 5 5 / 0.75);
  color: var(--c-text);
  cursor: pointer;
  /* No double-tap zoom when tapping Next quickly on phones */
  touch-action: manipulation;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

@media (hover: hover) {
  .lightbox__btn:hover {
    background: var(--c-pink);
    color: var(--c-ink);
  }
}

.lightbox__btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__close {
  top: 12px;
  right: 12px;
}

/* Phones: arrows sit in the bottom bar either side of the counter. */
.lightbox__prev,
.lightbox__next {
  bottom: 14px;
}

.lightbox__prev {
  left: calc(50% - 120px);
}

.lightbox__next {
  right: calc(50% - 120px);
}

@media (min-width: 48rem) {
  .lightbox__stage {
    padding: 72px 96px 8px;
  }

  .lightbox__counter {
    margin-bottom: 0;
  }

  .lightbox__prev,
  .lightbox__next {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }

  .lightbox__prev {
    left: 24px;
  }

  .lightbox__next {
    right: 24px;
  }

  .lightbox__close {
    top: 20px;
    right: 24px;
  }
}

/* Phones turned sideways: arrows move to the sides so the photo can use the full height. */
@media (orientation: landscape) and (max-height: 30rem) {
  .lightbox__stage {
    padding: 12px 88px 0;
  }

  .lightbox__img {
    max-height: calc(100dvh - 64px);
  }

  .lightbox__counter {
    margin-bottom: 0;
  }

  .lightbox__prev,
  .lightbox__next {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }

  .lightbox__prev {
    left: 16px;
  }

  .lightbox__next {
    right: 16px;
  }

  .lightbox__close {
    top: 12px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-in 0.2s ease;
  }
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
}

@media (forced-colors: active) {
  .lightbox__btn svg {
    stroke: ButtonText;
  }
}

/* ========== Footer ========== */

.site-footer {
  padding-block: 4px 28px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 14px;
  text-align: center;
}

.site-footer__rule {
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--c-pink);
  box-shadow: 0 0 10px rgb(255 105 212 / 0.55);
}

.site-footer__rule--right {
  display: none;
}

.site-footer__brand {
  display: block;
  width: 136px;
  margin-top: -2px;
  border-radius: 12px;
}

.site-footer__brand img {
  width: 100%;
}

.site-footer__heart {
  order: 1;
  width: 42px;
  rotate: -10deg;
}

.site-footer__tagline {
  color: var(--c-pink);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.6;
}

.site-footer__nowrap {
  white-space: nowrap;
}

.site-footer__outline-heart {
  display: inline-block;
  width: 16px;
  margin-inline-start: 0.35em;
  vertical-align: -0.3em;
}

@media (min-width: 960px) {
  .site-footer {
    padding-block: 8px 24px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(16px, 2vw, 28px);
    row-gap: 0;
    text-align: start;
  }

  .site-footer__rule {
    grid-row: 1;
    align-self: center;
  }

  .site-footer__rule--right {
    display: block;
    grid-column: 3;
  }

  .site-footer__brand {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: clamp(130px, 11vw, 160px);
    margin-top: 0;
  }

  .site-footer__heart {
    order: 0;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: clamp(40px, 3.4vw, 50px);
  }

  .site-footer__tagline {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    font-size: 0.8125rem;
    letter-spacing: 0.3em;
  }
}

/* Footer link row (both pages) */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: clamp(10px, 1.6vw, 16px);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  text-align: center;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(10px, 2.4vw, 28px);
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: rgb(255 255 255 / 0.86);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.site-footer__links a:hover {
  color: var(--c-pink-light);
}

.site-footer__links a[aria-current='page'] {
  color: var(--c-pink);
}

.site-footer__nav {
  display: grid;
  justify-items: center;
}

.site-footer__links--legal a {
  color: rgb(255 255 255 / 0.66);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.site-footer__copyright {
  color: rgb(255 255 255 / 0.6);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* "Operated by ROVE LLC" links to the operator's company page; tall enough to tap comfortably */
.site-footer__copyright a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.site-footer__copyright a:hover {
  color: var(--c-pink-light);
  text-decoration-color: currentColor;
}

/* Instagram / TikTok links above the footer menu */
.site-footer__social {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 32px);
  margin-top: clamp(14px, 2.4vw, 22px);
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--c-pink);
  transition: color 0.15s ease;
}

.site-footer__social svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.site-footer__social a:hover {
  color: var(--c-pink-light);
}

/* ========== Cancellation & rescheduling policy page ========== */

.policy {
  padding-block: clamp(20px, 4vw, 56px) clamp(48px, 7vw, 88px);
}

.policy__inner {
  width: min(100% - 2 * var(--gutter), 860px);
  margin-inline: auto;
}

.policy__head {
  margin-bottom: clamp(24px, 4vw, 40px);
  text-align: center;
}

.policy__heart {
  width: clamp(44px, 5vw, 56px);
  margin: 0 auto 14px;
  rotate: -8deg;
}

.policy__title {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.1rem + 3.4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.06;
  text-shadow:
    0 0.055em 0 var(--c-pink),
    0 0.06em 0.35em rgb(255 105 212 / 0.35);
  text-transform: uppercase;
  text-wrap: balance;
}

.policy__lede {
  max-width: 34em;
  margin: 0.9em auto 0;
  color: var(--c-pink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
}

.policy-card {
  margin-top: clamp(14px, 2vw, 20px);
  padding: clamp(20px, 3.5vw, 32px);
  border: 1.5px solid rgb(255 105 212 / 0.55);
  border-radius: 18px;
  background: rgb(255 105 212 / 0.04);
  box-shadow: 0 0 22px -12px rgb(255 105 212 / 0.6);
}

.policy-card__title {
  margin-bottom: 0.65em;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-transform: uppercase;
}

.policy-card p,
.policy-list li,
.policy-fees li {
  color: rgb(255 255 255 / 0.92);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
}

.policy-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.policy-list li {
  position: relative;
  padding-left: 26px;
}

.policy-list li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-pink);
  box-shadow: 0 0 8px rgb(255 105 212 / 0.8);
}

.policy-list strong {
  color: var(--c-pink-light);
  font-weight: 700;
}

/* Fee schedule: timing on the left, the fee as a pink pill */
.policy-fees {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.policy-fees li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 16px 14px 20px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.05);
  line-height: 1.45;
}

.policy-fees strong {
  padding: 0.3em 0.95em;
  border-radius: 999px;
  background: var(--c-pink);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: 0.95em;
  font-weight: 800;
  text-align: center;
}

.policy__back {
  margin-top: clamp(28px, 4vw, 40px);
  text-align: center;
}

@media (forced-colors: active) {
  .policy-fees strong {
    border: 2px solid CanvasText;
  }
}

/* ========== FAQ ========== */

.faq {
  padding-block: clamp(8px, 2vw, 24px) clamp(48px, 7vw, 88px);
}

.faq__inner {
  width: min(100% - 2 * var(--gutter), 860px);
  margin-inline: auto;
}

.faq__list {
  display: grid;
  gap: 12px;
}

.faq-item {
  overflow: hidden;
  border: 1.5px solid rgb(255 105 212 / 0.55);
  border-radius: 18px;
  background: rgb(255 105 212 / 0.04);
  box-shadow: 0 0 22px -12px rgb(255 105 212 / 0.6);
  transition: border-color 0.2s ease;
}

.faq-item[open] {
  border-color: var(--c-pink);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 18px 14px 22px;
  cursor: pointer;
  list-style: none;
}

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

.faq-item__question h3 {
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.15s ease;
}

/* Pink "+" that turns into "×" when the answer is open */
.faq-item__question::after {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
      center / 16px no-repeat,
    var(--c-pink);
  transition: rotate 0.2s ease;
}

.faq-item[open] .faq-item__question::after {
  rotate: 45deg;
}

@media (hover: hover) {
  .faq-item__question:hover h3 {
    color: var(--c-pink-light);
  }
}

/* The card clips its contents, so the focus ring sits inside the edge. */
.faq-item__question:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  border-radius: 16px;
}

.faq-item__answer {
  padding: 0 22px 22px;
}

.faq-item__answer p {
  max-width: 62ch;
  color: rgb(255 255 255 / 0.9);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.6;
}

.faq-item__answer a {
  color: var(--c-pink-light);
  font-weight: 600;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item__question::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .faq-item__question::after {
    border: 2px solid CanvasText;
  }
}

/* ========== Legal pages (Terms, Privacy, Cookies) ========== */

/* Shown while a legal page is still a draft awaiting the owner's details and review. */
.policy-draft {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: clamp(18px, 3vw, 28px);
  padding: 14px 18px;
  border: 2px dashed #ffd54a;
  border-radius: 14px;
  background: rgb(255 213 74 / 0.08);
  color: #ffe9a3;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.policy-draft strong {
  color: #ffd54a;
  white-space: nowrap;
}

/* Details GALULU still has to fill in, e.g. [contact email] */
.placeholder {
  padding: 0 0.3em;
  border-radius: 4px;
  background: rgb(255 213 74 / 0.18);
  box-shadow: inset 0 -1px 0 rgb(255 213 74 / 0.6);
  color: #ffe9a3;
  font-style: normal;
}

.policy__meta {
  margin-top: 0.6em;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.875rem;
}

.policy-card p + p,
.policy-card p + .policy-list,
.policy-card .policy-list + p {
  margin-top: 0.8em;
}

.policy-card a {
  color: var(--c-pink-light);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ========== How it works ========== */

.hiw {
  --hiw-pink: #f69bcb;
  --hiw-pink-light: #ffb4dc;
  --hiw-pink-deep: #f38fc4;
  --hiw-accent: #ed399b;
  --hiw-ink: #080808;
  --hiw-wave: clamp(14px, 3vw, 44px);
  padding-block: clamp(20px, 3vw, 44px);
}

/* Procedural pink panel: CSS gradient plus SVG wave edges (never a stretched bitmap). */
.hiw__panel {
  position: relative;
  width: min(100% - 2 * clamp(8px, 2vw, 32px), 1440px);
  margin: var(--hiw-wave) auto;
  padding: clamp(10px, 1.6vw, 22px) clamp(20px, 4.2vw, 24px) clamp(18px, 2.6vw, 34px);
  background: linear-gradient(180deg, var(--hiw-pink-light) 0%, var(--hiw-pink) 55%, var(--hiw-pink-deep) 100%);
  box-shadow: 0 0 44px -14px rgb(255 105 212 / 0.5);
  color: var(--hiw-ink);
}

/* Soft inset edge highlight on the sides, fading out where the SVG waves take over. */
.hiw__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 8px 0 16px -10px rgb(255 255 255 / 0.75),
    inset -8px 0 16px -10px rgb(237 57 155 / 0.5);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--hiw-wave), #000 calc(100% - var(--hiw-wave)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--hiw-wave), #000 calc(100% - var(--hiw-wave)), transparent);
  pointer-events: none;
}

.hiw__wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--hiw-wave);
  overflow: visible;
  pointer-events: none;
}

.hiw__wave--top {
  bottom: calc(100% - 1px);
}

.hiw__wave--bottom {
  top: calc(100% - 1px);
  scale: 1 -1;
}

.hiw__wave--top .hiw__wave-fill {
  fill: var(--hiw-pink-light);
}

.hiw__wave--bottom .hiw__wave-fill {
  fill: var(--hiw-pink-deep);
}

.hiw__wave-rim {
  fill: none;
  stroke: rgb(255 255 255 / 0.6);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.hiw__wave--bottom .hiw__wave-rim {
  stroke: rgb(237 57 155 / 0.55);
}

/* Corner decorations: kept at the panel edges, clear of text and faces. */
.hiw__deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hiw__deco--heart-tl {
  top: calc(-1 * var(--hiw-wave) - 10px);
  left: 0;
  width: clamp(44px, 6vw, 92px);
  rotate: -14deg;
}

.hiw__deco--heart-br {
  right: 0;
  bottom: calc(-1 * var(--hiw-wave) - 10px);
  width: clamp(44px, 6vw, 92px);
  rotate: 12deg;
}

.hiw__deco--star-tr,
.hiw__deco--star-bl {
  display: none;
  width: clamp(30px, 3vw, 50px);
}

.hiw__deco--star-tr {
  top: 7%;
  right: 0.8%;
  rotate: 14deg;
}

.hiw__deco--star-bl {
  bottom: 9%;
  left: 0.8%;
  rotate: -10deg;
}

.hiw__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  margin-bottom: clamp(16px, 2.4vw, 32px);
}

.hiw__star {
  flex: none;
  width: clamp(30px, 4.6vw, 72px);
}

.hiw__star--left {
  rotate: -14deg;
}

.hiw__star--right {
  rotate: 12deg;
  translate: 0 -6%;
}

/* Glossy black bubble lettering with a restrained highlight (also used by the final CTA) */
.hiw__title,
.cta__title {
  min-width: 0;
  background: linear-gradient(180deg, #555 0%, #161616 42%, #000 100%);
  /* repeat the bevel once per line when the heading wraps */
  background-size: 100% 1lh;
  -webkit-background-clip: text;
  background-clip: text;
  color: #080808;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgb(255 255 255 / 0.6)) drop-shadow(0 6px 10px rgb(150 20 90 / 0.3));
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}

.hiw__steps {
  --gap-x: clamp(12px, 1.4vw, 20px);
  --gap-y: clamp(28px, 3vw, 40px);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 34px;
  padding: 0;
  list-style: none;
}

.hiw-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hiw-step__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Phones: each illustration at its own shape, capped in both directions. */
.hiw-step__img {
  width: auto;
  max-width: min(100%, 330px);
  max-height: 280px;
  object-fit: contain;
}

.hiw-step__num {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
}

.hiw-step__title {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.625rem);
  font-weight: 800;
  line-height: 1.2;
}

.hiw-step__sub {
  margin-top: 4px;
  color: rgb(8 8 8 / 0.82);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  font-weight: 500;
}

/* Small phones: the heading wraps to HOW IT / WORKS in a narrow box so the stars stay beside it. */
@media (max-width: 28.49rem) {
  .hiw__title {
    max-inline-size: 4.1em;
  }
}

/* Phones: full-width panel and small hand-drawn arrows down between steps (decorative only). */
@media (max-width: 39.99rem) {
  .hiw__panel {
    width: 100%;
  }

  /* width:100% lets the width/height attributes reserve the space before the image loads */
  .hiw-step__img {
    width: 100%;
    height: auto;
  }

  .hiw__deco--heart-tl {
    left: 6px;
  }

  .hiw__deco--heart-br {
    right: 6px;
  }

  /* Each step reads top to bottom as one group: number, title, text, then its illustration. The steps sit further
     apart than the parts of a step, and the arrow is centred in that larger gap, so it always leads from a
     finished step to the next number. (Visual order only; the illustrations are decorative.) */
  .hiw__steps {
    --hiw-step-gap: 68px;
    row-gap: var(--hiw-step-gap);
  }

  .hiw-step__num {
    order: 1;
    margin-top: 0;
  }

  .hiw-step__title {
    order: 2;
    margin-top: 4px;
  }

  .hiw-step__sub {
    order: 3;
    margin-top: 2px;
  }

  .hiw-step__art {
    order: 4;
    margin-top: 12px;
  }

  .hiw-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(100% + (var(--hiw-step-gap) - 26px) / 2);
    left: calc(50% - 10px);
    width: 20px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28' fill='none' stroke='%23080808' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2c-2 7 1 13 0 21'/%3E%3Cpath d='M4 17l6 7 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }
}

/* Tablet: two columns in order (three rows of two), no connectors. */
@media (min-width: 40rem) {
  .hiw__panel {
    padding-inline: clamp(24px, 4.2vw, 32px);
  }

  .hiw__deco--heart-tl {
    left: -8px;
  }

  .hiw__deco--heart-br {
    right: -8px;
  }

  .hiw__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 32px);
    row-gap: 32px;
  }

  .hiw-step__art {
    height: clamp(220px, 28vw, 260px);
  }

  .hiw-step__img {
    max-width: 100%;
    max-height: 100%;
  }
}

/* Desktop: two rows of three steps (12-column grid, each step spans 4). */
@media (min-width: 64rem) {
  .hiw__panel {
    padding-inline: clamp(40px, 4.2vw, 64px);
  }

  .hiw__deco--star-tr,
  .hiw__deco--star-bl {
    display: block;
  }

  .hiw__steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-x);
    row-gap: var(--gap-y);
  }

  .hiw-step {
    --art-h: clamp(280px, 22vw, 340px);
    grid-column: span 4;
  }

  .hiw-step__art {
    height: var(--art-h);
  }

  .hiw-step__num {
    font-size: clamp(44px, 3.6vw, 56px);
  }

  /* Arrows to the next step in the same row */
  .hiw-step--01::after,
  .hiw-step--02::after,
  .hiw-step--04::after,
  .hiw-step--05::after {
    content: '';
    position: absolute;
    top: calc(var(--art-h) * 0.5 - 12px);
    right: calc(-0.5 * var(--gap-x) - clamp(15px, 1.5vw, 22px));
    width: clamp(30px, 3vw, 44px);
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23080808' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15c9-6 22-8 37-4'/%3E%3Cpath d='M32 4.5l9 6.8-8.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }

  /* 03 → 04: from under step 03, back left through the row gap, down into step 04 (their centres are 8 columns apart) */
  .hiw-step--03::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    width: calc(8 * (100cqi + var(--gap-x)) / 12);
    height: var(--gap-y);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none' fill='none' stroke='%23080808' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M996 3C997 36 986 48 952 49L48 51C16 52 4 62 4 97'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
  }

  .hiw-step--04::before {
    content: '';
    position: absolute;
    top: -9px;
    /* aligned with the end of the 03→04 path (0.4% of its 8-column width from the left) */
    left: calc(50% - 8px + 0.032 * (100cqi + var(--gap-x)) / 12);
    width: 16px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%23080808' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l7 9 7-9'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }
}

@media (forced-colors: active) {
  .hiw__title,
  .cta__title {
    background: none;
    filter: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* ========== Final CTA ========== */

.cta {
  --cta-pink: #f58dc5;
  --cta-pink-light: #ffa9d4;
  --cta-ink: #080808;
  --cta-wave: clamp(16px, 3.4vw, 52px);
  padding-block: clamp(24px, 4vw, 56px) clamp(40px, 6vw, 80px);
}

/* Procedural pink panel with SVG wave edges, so it can grow with its content. */
.cta__panel {
  position: relative;
  width: min(100% - 2 * clamp(8px, 2vw, 32px), 1400px);
  margin: var(--cta-wave) auto;
  padding: clamp(14px, 2vw, 28px) clamp(16px, 4vw, 56px) clamp(28px, 3.4vw, 48px);
  background: linear-gradient(180deg, var(--cta-pink-light) 0%, var(--cta-pink) 60%, #f283bf 100%);
  box-shadow: 0 0 50px -14px rgb(255 105 212 / 0.55);
  color: var(--cta-ink);
}

/* Bright rim and inset highlight on the straight sides, fading out where the SVG waves take over. */
.cta__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 3px 0 0 rgb(255 214 236 / 0.85),
    inset -3px 0 0 rgb(255 214 236 / 0.85),
    inset 10px 0 18px -12px rgb(255 255 255 / 0.9),
    inset -10px 0 18px -12px rgb(237 57 155 / 0.55);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--cta-wave), #000 calc(100% - var(--cta-wave)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--cta-wave), #000 calc(100% - var(--cta-wave)), transparent);
  pointer-events: none;
}

.cta__wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--cta-wave);
  overflow: visible;
  pointer-events: none;
}

.cta__wave--top {
  bottom: calc(100% - 3px);
}

.cta__wave--bottom {
  top: calc(100% - 3px);
  scale: 1 -1;
}

.cta__wave--top .cta__wave-fill {
  fill: var(--cta-pink-light);
}

.cta__wave--bottom .cta__wave-fill {
  fill: #f283bf;
}

.cta__wave-rim {
  fill: none;
  stroke: rgb(255 214 236 / 0.9);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgb(255 105 212 / 0.6));
}

/* Decorations: panel corners only, clear of faces, text and buttons. */
.cta__deco,
.cta__star {
  pointer-events: none;
}

.cta__deco {
  position: absolute;
  z-index: 1;
}

.cta__deco--heart-tl {
  top: calc(-1 * var(--cta-wave) - 14px);
  left: 0;
  width: clamp(48px, 7vw, 116px);
  rotate: -14deg;
}

.cta__deco--heart-tl-small {
  display: none;
  top: calc(-1 * var(--cta-wave) + clamp(48px, 7vw, 116px) - 6px);
  left: 2px;
  width: clamp(28px, 3.4vw, 54px);
  rotate: 10deg;
}

.cta__deco--heart-br {
  right: 0;
  bottom: calc(-1 * var(--cta-wave) - 16px);
  width: clamp(48px, 7vw, 112px);
  rotate: 12deg;
}

.cta__deco--star-bl {
  display: none;
  bottom: calc(-1 * var(--cta-wave) - 6px);
  left: clamp(10px, 2vw, 28px);
  width: clamp(36px, 4vw, 62px);
  rotate: -12deg;
}

.cta__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.2vw, 36px);
}

.cta__star {
  flex: none;
  width: clamp(30px, 5.4vw, 88px);
}

.cta__star--left {
  rotate: -12deg;
}

.cta__star--right {
  rotate: 14deg;
  translate: 0 -6%;
}

.cta__title {
  font-size: clamp(36px, 6.5vw, 96px);
  line-height: 1.04;
}

.cta__title span {
  display: inline;
}

.cta__sub {
  margin-top: clamp(6px, 1vw, 12px);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 7vw, 40px) clamp(24px, 2.6vw, 36px);
  margin-top: clamp(18px, 2.6vw, 32px);
}

.cta-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-card__media {
  position: relative;
  width: 100%;
  /* The photo sits under the centre of the chrome rim. Rim centre in the 1612px-wide frame:
     54px sides, 86px top, 92px bottom, 70px corner radius (1cqi = 16.12 frame px). */
  padding: 5.335cqi 3.35cqi 5.707cqi;
}

.cta-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 4.34cqi;
  object-fit: cover;
}

/* Chrome frame overlay: the kit frame extended to 1612x1306 for the 4:3 photo (tools/optimize-images.py
   stretches only the straight side-rim band, so the corners keep their exact shape). */
.cta-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cta-card__title {
  margin-top: clamp(4px, 1.6cqi, 12px);
  font-family: var(--font-display);
  font-size: clamp(34px, 11cqi, 68px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-shadow: 0 2px 0 rgb(255 255 255 / 0.55);
}

.cta-card__tagline {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 3.4cqi, 1.375rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: clamp(14px, 3.4cqi, 22px);
}

/* Big black pill; margin-top:auto keeps both buttons on the same line. */
.cta-card__book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 100%;
  min-height: clamp(56px, 12.5cqi, 78px);
  margin-top: auto;
  padding: 0.5em 1em;
  border: 3px solid rgb(255 220 240 / 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #2a2a2a 0%, #0b0b0b 45%, #000 100%);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.22),
    inset 0 -3px 0 rgb(255 105 212 / 0.25),
    0 6px 16px -8px rgb(80 0 40 / 0.6);
  color: #fff;
  font-family: var(--font-ui);
  font-size: clamp(1.25rem, 5cqi, 2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-decoration: none;
}

.cta-card__book .icon-arrow {
  width: 1em;
  height: 1em;
}

a.cta-card__book[href] {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

a.cta-card__book[href]:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.22),
    inset 0 -3px 0 rgb(255 105 212 / 0.35),
    0 10px 22px -8px rgb(80 0 40 / 0.7);
}

a.cta-card__book[href]:focus-visible {
  outline: 3px solid var(--cta-ink);
  outline-offset: 4px;
}

/* Until booking opens the pill has data-href instead of href (tools/open-booking.py switches it on): shown muted so it
   never looks clickable. */
.cta-card__book:not([href]) {
  border-style: dashed;
  background: rgb(8 8 8 / 0.72);
  box-shadow: none;
  color: rgb(255 255 255 / 0.85);
  cursor: default;
}

.cta-card__note {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (min-width: 40rem) {
  /* One card (Shinjuku) since October 2026, centred */
  .cta__grid {
    grid-template-columns: minmax(0, 660px);
    justify-content: center;
  }

  .cta__deco--heart-tl-small {
    display: block;
  }
}

@media (min-width: 64rem) {
  .cta__title span {
    display: block;
  }

  .cta__deco--star-bl {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.cta-card__book[href],
  a.cta-card__book[href]:hover {
    transition: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .cta-card__book {
    border: 2px solid ButtonText;
  }
}

/* ========== Legal notice (特定商取引法に基づく表記) ========== */

/* Titan One has no Japanese glyphs: a rounded, heavy system Japanese font on the English page; the Japanese pages use
   the Japanese display font instead (the "Japanese pages" block at the end). */
.policy__title--ja {
  font-family: 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', var(--font-body);
  font-size: clamp(1.625rem, 1rem + 2.8vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.legal-table {
  margin: 0;
}

.legal-table__row {
  display: grid;
  gap: 6px 24px;
  padding-block: 16px;
  border-bottom: 1px solid rgb(255 105 212 / 0.25);
}

.legal-table__row:first-child {
  padding-top: 0;
}

.legal-table__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.legal-table dt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--c-pink-light);
  font-weight: 700;
  line-height: 1.4;
}

.legal-table dt [lang='ja'] {
  font-size: 1rem;
}

.legal-table dd,
.legal-table dd p {
  margin: 0;
  color: rgb(255 255 255 / 0.92);
  font-size: 1rem;
  line-height: 1.7;
}

.legal-table dd p + p,
.legal-table dd p + ul,
.legal-table dd ul + p,
.legal-table dd ul + ul {
  margin-top: 6px;
}

.legal-table .legal-table__en {
  color: rgb(255 255 255 / 0.66);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.55;
}

.legal-table dt .legal-table__en {
  color: rgb(255 255 255 / 0.6);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.legal-table__list {
  padding-left: 1.2em;
}

.legal-table__list li + li {
  margin-top: 2px;
}

.legal-table a {
  color: var(--c-pink-light);
  font-weight: 600;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
  .legal-table__row {
    grid-template-columns: minmax(10.5rem, 30%) 1fr;
  }
}

/* Keep the operator's name on one line (e.g. 合同会社ROVE on narrow phones). */
.site-footer__copyright [lang='ja'],
.legal-table__en [lang='ja'] {
  white-space: nowrap;
}

/* ========== Shinjuku hero and Why Shinjuku (homepage; on their own page, shinjuku.html, until 7 October 2026) ========== */

/* The Shinjuku colours and fonts, used only inside these two sections */
.sj-hero,
.sj-why {
  --sj-ink: #08060d;
  --sj-plum: #210c32;
  --sj-violet: #a151dd;
  --sj-pink: #f61999;
  --sj-lilac: #e6c7f7;
  --sj-paper: #fff9ff;
  --sj-silver: #c9c6d5;
  --font-condensed: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-hand: 'Caveat Brush', 'Marker Felt', 'Comic Sans MS', cursive;
}

.sj-heart-glyph {
  display: inline-block;
  width: 0.85em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  vertical-align: -0.05em;
}

.sj-deco {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.sj-deco--purple {
  filter: hue-rotate(295deg) saturate(1.1);
}

/* ---------- Hero ---------- */

.sj-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(20px, 3vw, 40px) clamp(56px, 6vw, 96px);
  background:
    radial-gradient(ellipse 60% 55% at 78% 40%, rgb(122 44 170 / 0.32), transparent 70%),
    radial-gradient(ellipse 45% 50% at 12% 60%, rgb(90 28 120 / 0.28), transparent 70%),
    var(--sj-ink);
}

.sj-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 44px);
}

.sj-hero__copy {
  position: relative;
  z-index: 2;
}

.sj-hero__title {
  margin: 0;
}

.sj-hero__title-art {
  width: 100%;
  max-width: 600px;
}

.sj-hero__brand {
  display: inline-block;
  margin-top: clamp(10px, 1.6vw, 18px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(255 249 255 / 0.55);
  color: var(--sj-paper);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.8rem + 0.8vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.3em;
}

.sj-hero__brand-name {
  color: var(--sj-violet);
  font-weight: 800;
}

.sj-hero__brand-sep {
  margin-inline: 0.35em;
  opacity: 0.8;
}

.sj-hero__lede {
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(10px, 1.4vw, 16px);
  color: var(--sj-paper);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.45;
}

/* Glossy pink booking pill (shine built from gradients, border and inset shadows) */
.sj-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  width: 100%;
  min-height: 56px;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding: 0.6em 2em;
  border: 2px solid #ffc5e9;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff9edd 0%, #ff31b2 25%, #df007f 76%, #fc66c2 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 0.9),
    inset 0 -4px 6px #85024e,
    0 0 22px rgb(230 36 153 / 0.35);
  color: #fff;
  font-family: var(--font-ui);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.sj-book .icon-arrow {
  width: 1.05em;
  height: 1.05em;
}

a.sj-book[href]:hover {
  filter: brightness(1.06);
}

a.sj-book[href]:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

/* Until booking opens the pill has data-href instead of href (tools/open-booking.py switches it on): shown muted
   with a dashed rim. */
.sj-book:not([href]) {
  border-style: dashed;
  filter: saturate(0.5) brightness(0.72);
  box-shadow: none;
  cursor: default;
}

.sj-hero__note {
  margin-top: 8px;
  color: rgb(255 249 255 / 0.75);
  font-size: 0.9375rem;
}

/* Handwritten peripheral notes (desktop only) */
.sj-note {
  position: absolute;
  z-index: 1;
  display: none;
  color: var(--sj-paper);
  font-family: var(--font-hand);
  font-size: clamp(1rem, 0.6rem + 0.7vw, 1.375rem);
  line-height: 1.02;
  pointer-events: none;
}

.sj-note--tokyo {
  top: 0;
  left: 0;
  rotate: -12deg;
}

.sj-note--neon {
  top: 0;
  left: 58%;
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 0.5rem + 0.45vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  rotate: -3deg;
}

.sj-note--same {
  bottom: 0;
  left: 2%;
  rotate: -14deg;
}

.sj-deco--star-note {
  display: none;
  top: 6px;
  left: 26%;
  width: clamp(40px, 4vw, 64px);
  rotate: 12deg;
}

.sj-deco--star-copy {
  display: none;
  right: 0;
  bottom: calc(clamp(104px, 8.5vw, 128px) + 112px);
  width: clamp(36px, 3.4vw, 54px);
  rotate: -8deg;
}

.sj-deco--heart-copy {
  display: none;
  bottom: 8px;
  left: 30%;
  width: clamp(54px, 5vw, 80px);
  rotate: -10deg;
}

/* Photo collage: purple chrome frame + polaroid, all in document flow height */
.sj-hero__art {
  position: relative;
}

.sj-collage {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  padding-bottom: 20%;
}

.sj-frame {
  container-type: inline-size;
  position: relative;
  width: 78%;
  margin: 0;
  aspect-ratio: 1122 / 1402;
  rotate: 2deg;
}

/* Photo sits under the chrome rim of the 1122x1402 frame: sides at the rim centre (92px); top at 126px,
   7px under the 133px inner edge, so the whole Kabukicho sign stays visible; bottom under the bottom rim. */
.sj-frame__photo {
  position: absolute;
  top: 9%;
  left: 8.24%;
  width: 83.52%;
  height: 83.9%;
  border-radius: 5cqi;
  object-fit: cover;
  object-position: 40% 43%;
}

.sj-frame__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sj-polaroid {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 44%;
  margin: 0;
  padding: 4% 4% 13%;
  background: #fbf8fc;
  box-shadow:
    0 12px 26px -8px rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(0 0 0 / 0.06);
  rotate: 5deg;
}

.sj-polaroid__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 9;
  object-fit: cover;
}

.sj-polaroid__doodle {
  position: absolute;
  bottom: 3%;
  left: 7%;
  color: #1d1022;
  font-size: clamp(22px, 5cqi, 34px);
  rotate: -12deg;
}

.sj-sticker {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0.3em 0.6em 0.35em;
  background: var(--sj-lilac);
  box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.6);
  color: #26102f;
  font-family: var(--font-hand);
  font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  line-height: 0.95;
  pointer-events: none;
}

.sj-sticker--glam {
  top: 14%;
  right: 4%;
  rotate: -9deg;
}

.sj-sticker--era {
  right: 0;
  bottom: 1%;
  rotate: -7deg;
}

.sj-deco--heart-frame {
  top: -2%;
  right: 22%;
  width: clamp(56px, 12%, 110px);
  rotate: 14deg;
  filter: hue-rotate(295deg) saturate(1.1);
}

.sj-deco--star-top {
  display: none;
}

.sj-deco--star-bottom {
  bottom: 2%;
  left: 40%;
  width: clamp(40px, 9%, 70px);
  rotate: 8deg;
}

/* Decorative neon sign (not an address or route) */
.sj-neon {
  display: none;
}

/* ---------- Why Shinjuku ---------- */

.sj-why {
  position: relative;
  padding-block: clamp(44px, 6vw, 88px) clamp(52px, 6vw, 96px);
  background:
    /* soft fade into the black page below, where the Plans & Pricing trim takes over */
    linear-gradient(to bottom, transparent calc(100% - 140px), var(--c-bg)),
    radial-gradient(ellipse 70% 38% at 50% 12%, rgb(84 30 116 / 0.75), transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 70%, rgb(110 40 150 / 0.35), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgb(110 40 150 / 0.3), transparent 70%),
    var(--sj-plum);
  color: var(--sj-paper);
  text-align: center;
}

/* Wave ribbons sit across the section edges as overlays; they never take layout space. */
.sj-wave {
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.sj-wave img {
  width: 100%;
}

.sj-wave--top {
  top: 0;
  translate: 0 -50%;
}

.sj-why__inner {
  position: relative;
  z-index: 3;
}

.sj-why__eyebrow {
  display: inline-block;
  padding: 0.3em 1.2em;
  border: 2px solid rgb(230 199 247 / 0.85);
  border-radius: 999px;
  color: var(--sj-paper);
  font-family: var(--font-ui);
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sj-why__title {
  margin-top: clamp(12px, 1.6vw, 20px);
  color: var(--sj-paper);
  font-family: var(--font-condensed);
  font-size: clamp(30px, 1.2rem + 3.4vw, 64px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-shadow: 0 0 22px rgb(161 81 221 / 0.55);
  text-wrap: balance;
}

.sj-why__lede {
  max-width: 40em;
  margin: clamp(10px, 1.4vw, 16px) auto 0;
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3125rem);
  line-height: 1.45;
}

.sj-deco--star-why-left,
.sj-deco--star-why-right {
  display: none;
}

.sj-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 520px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.sj-feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--sj-silver);
  border-radius: 20px;
  background: #200e2e;
  box-shadow:
    0 0 0 2px #692956,
    0 0 26px -6px rgb(161 81 221 / 0.55);
}

.sj-feature__media {
  margin: 0;
}

.sj-feature__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.95;
  object-fit: cover;
}

.sj-feature__body {
  position: relative;
  flex: 1;
  padding: 20px 18px 24px;
  border-top: 2px solid rgb(230 199 247 / 0.5);
}

.sj-feature__heart {
  position: absolute;
  top: -30px;
  left: 12px;
  width: 58px;
  rotate: -10deg;
  pointer-events: none;
}

.sj-feature:nth-child(2) .sj-feature__heart {
  filter: hue-rotate(295deg) saturate(1.1);
}

.sj-feature__title {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(230 199 247 / 0.6);
  color: var(--sj-paper);
  font-family: var(--font-condensed);
  font-size: clamp(1.375rem, 1rem + 0.9vw, 1.6875rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.sj-feature__text {
  margin-top: 10px;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1875rem);
  line-height: 1.45;
}

.sj-why__footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 36px);
  color: rgb(255 249 255 / 0.8);
  font-size: 0.875rem;
}

.sj-why__footnote::before,
.sj-why__footnote::after {
  content: '';
  flex: 0 1 90px;
  height: 1px;
  background: rgb(255 249 255 / 0.5);
}

/* ---------- Breakpoints ---------- */

@media (min-width: 40rem) {
  .sj-book {
    width: auto;
    display: inline-flex;
    min-width: 320px;
  }

  .sj-collage {
    width: min(100%, 620px);
  }
}

/* Three feature cards once each stays legible */
@media (min-width: 56rem) {
  .sj-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 2vw, 28px);
    max-width: none;
  }

  .sj-deco--star-why-left,
  .sj-deco--star-why-right {
    display: block;
    width: clamp(48px, 4.4vw, 72px);
  }

  /* four-point sparkles beside the heading (decorative, not read out) */
  .sj-why__title::before,
  .sj-why__title::after {
    content: '\2726' / '';
    display: inline-block;
    margin-inline: 0.35em;
    color: var(--sj-lilac);
    font-size: 0.45em;
    vertical-align: 0.6em;
  }

  .sj-deco--star-why-left {
    top: 20%;
    left: -1%;
    rotate: -14deg;
  }

  .sj-deco--star-why-right {
    top: 30%;
    right: -1%;
    rotate: 12deg;
  }
}

/* Desktop: 45% copy / 55% collage */
@media (min-width: 64rem) {
  .sj-hero {
    padding-block: clamp(24px, 3vw, 44px) clamp(72px, 7vw, 110px);
  }

  .sj-hero__inner {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    min-height: clamp(640px, 50vw, 760px);
  }

  .sj-book {
    min-height: 60px;
  }

  .sj-hero__copy {
    padding-top: clamp(96px, 8vw, 124px);
    /* room for the SAME CITY note under the booking button */
    padding-bottom: clamp(104px, 8.5vw, 128px);
  }

  .sj-note,
  .sj-deco--star-note,
  .sj-deco--heart-copy,
  .sj-deco--star-top {
    display: block;
  }

  .sj-collage {
    width: 100%;
    max-width: none;
    padding-bottom: 10%;
  }

  .sj-frame {
    width: 76%;
    rotate: 3deg;
  }

  .sj-polaroid {
    right: 2%;
    bottom: 0;
    width: 50%;
    rotate: 10deg;
  }

  .sj-sticker--glam {
    top: 16%;
    right: 3%;
  }

  .sj-sticker--era {
    right: -1%;
    bottom: 2%;
  }

  .sj-deco--star-top {
    top: -2%;
    left: 52%;
    width: clamp(40px, 7%, 64px);
    rotate: -10deg;
  }

  .sj-deco--star-bottom {
    bottom: 3%;
    left: 38%;
  }
}

@media (min-width: 75rem) {
  /* star beside the lede only where the copy column is wide enough to leave it free */
  .sj-deco--star-copy {
    display: block;
  }

  .sj-neon {
    position: absolute;
    top: 0;
    right: calc(-1 * min(var(--gutter), 48px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 2px solid rgb(246 25 153 / 0.8);
    border-radius: 10px;
    background: rgb(40 8 40 / 0.6);
    box-shadow:
      0 0 16px rgb(246 25 153 / 0.5),
      inset 0 0 12px rgb(246 25 153 / 0.35);
    color: #ff7ccf;
    text-shadow:
      0 0 6px #ff3fb0,
      0 0 14px rgb(246 25 153 / 0.8);
    pointer-events: none;
  }

  .sj-neon__ja {
    writing-mode: vertical-rl;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .sj-neon__en {
    writing-mode: vertical-rl;
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .sj-neon .sj-heart-glyph {
    width: 22px;
    height: 20px;
  }

  .sj-sticker--glam {
    right: 7%;
  }
}

@media (forced-colors: active) {
  .sj-book {
    border: 2px solid ButtonText;
  }
}

/* ========== Video hero (homepage, above the existing hero) ========== */
/* A full-width 16:9 film (js/video-hero.js), a thin line under the header, a very shallow wave across the bottom
   and a small sparkle; the existing hero follows directly below in normal flow. */

.video-hero {
  --vh-wave-h: clamp(14px, 2.2vw, 32px);
  /* how dark the overlay on the film is (0 = none, 1 = black); it is a little darker towards the bottom */
  --vh-dim: 0.3;
  position: relative;
  background: var(--c-bg);
}

/* Desktop (from 960px, where the full navigation appears): the film is 80% of the page width, centred, with the page
   black at its sides. Phones and tablets keep it full width. */
@media (min-width: 960px) and (min-width: 50rem) {
  .video-hero__frame {
    width: 80%;
    margin-inline: auto;
  }
}

/* desktop layout (from 960px): the wave stays at least 26px tall */
@media (min-width: 960px) {
  .video-hero {
    --vh-wave-h: clamp(26px, 2.2vw, 32px);
  }
}

.video-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* the thin pink-purple line between the header and the film */
.video-hero__frame::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #d947f5, #ba4cff 50%, #ee44db);
  box-shadow: 0 0 8px rgb(217 71 245 / 0.55);
  pointer-events: none;
}

.video-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop only (from 960px, with the 80% film): a dark overlay on the film (and its poster), so it sits with the
   page's black and dark-pink sections. Phones and tablets show the film at full brightness.
   Above the film, below the wave, the buttons and the line at the top. */
@media (min-width: 960px) and (min-width: 50rem) {
  .video-hero__frame::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(
      rgb(5 5 5 / var(--vh-dim)),
      rgb(5 5 5 / var(--vh-dim)) 55%,
      rgb(5 5 5 / calc(var(--vh-dim) + 0.2))
    );
    pointer-events: none;
  }
}

/* Wave: its fill covers the film below the contour; the thin gradient line glows a little. */
.video-hero__wave {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: calc(var(--vh-wave-h) + 1px);
  overflow: visible;
  filter: drop-shadow(0 0 4px rgb(217 71 245 / 0.55));
  pointer-events: none;
}

.video-hero__wave-fill {
  fill: var(--c-bg);
}

.video-hero__wave-line {
  fill: none;
  stroke-width: 2px;
}

.video-hero__sparkle {
  display: block;
  width: clamp(12px, 1.3vw, 18px);
  height: auto;
  aspect-ratio: 1;
  margin: clamp(4px, 0.8vw, 10px) auto 0;
  fill: #e5b4f3;
  filter: drop-shadow(0 0 6px rgb(229 180 243 / 0.6));
}

/* The Shinjuku hero follows How It Works: its tinted background fades in from the page black instead of starting
   with a hard edge. z-index 0 with nothing before it: it paints above the hero's background but below all of the
   hero's content. */
.hiw + .sj-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(90px, 14vw, 220px);
  background: linear-gradient(var(--c-bg), rgb(5 5 5 / 0));
  pointer-events: none;
}

/* Pause/play and sound: round, translucent, thin pink rim, 44px touch targets, above the wave */
.video-hero__controls {
  position: absolute;
  z-index: 3;
  right: clamp(10px, 2.2vw, 32px);
  bottom: calc(var(--vh-wave-h) + clamp(8px, 1.4vw, 20px));
  display: flex;
  gap: clamp(8px, 1vw, 12px);
}

/* hidden until js/video-hero.js runs, and again if the film fails to load */
.video-hero__controls[hidden] {
  display: none;
}

.video-hero__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgb(255 105 212 / 0.85);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-hero__btn:hover {
  background: rgb(0 0 0 / 0.7);
}

/* white ring with a dark halo, so focus shows on bright and dark frames alike */
.video-hero__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgb(0 0 0 / 0.85);
}

.video-hero__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-hero__icon--play {
  fill: currentColor;
}

.video-hero__btn[data-state='playing'] .video-hero__icon--play,
.video-hero__btn[data-state='paused'] .video-hero__icon--pause,
.video-hero__btn[data-state='muted'] .video-hero__icon--sound,
.video-hero__btn[data-state='on'] .video-hero__icon--muted {
  display: none;
}

@media (forced-colors: active) {
  .video-hero__btn {
    border-color: ButtonText;
  }
}

/* ========== Header over the film (homepage: <html class="header-over-film">) ========== */
/* From 640px wide the header floats over the film: transparent with a soft dark fade so the logo and menu
   stay readable, then black once the page is scrolled (js/video-hero.js adds .is-solid). On phones the film is only
   about 220px tall and the header would cover the people in it, so there the header stays above the film as before.
   Other pages keep the normal header. Without JavaScript a <noscript> rule in the page keeps the normal header. */

@media (min-width: 40rem) {
  .header-over-film {
    /* in-page links and focused elements stop below the fixed header (--header-h is measured by js/video-hero.js) */
    scroll-padding-top: var(--header-h, 100px);
  }

  .header-over-film .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: transparent;
  }

  /* Two layers so the change can fade: the dark fade (over the film) and the black fill (scrolled). */
  .header-over-film .site-header::before,
  .header-over-film .site-header::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .header-over-film .site-header::before {
    bottom: -40px;
    background: linear-gradient(rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.3) 65%, rgb(0 0 0 / 0));
  }

  .header-over-film .site-header::after {
    background: var(--c-bg);
    /* the thin pink-purple line now sits under the black header */
    box-shadow:
      0 2px 0 #c44cf5,
      0 2px 10px rgb(217 71 245 / 0.45);
    opacity: 0;
  }

  /* separate rules: a browser without :has() then only misses the menu-open case */
  .header-over-film .site-header.is-solid::before {
    opacity: 0;
  }

  .header-over-film .site-header:has(.menu-button[aria-expanded='true'])::before {
    opacity: 0;
  }

  .header-over-film .site-header.is-solid::after {
    opacity: 1;
  }

  .header-over-film .site-header:has(.menu-button[aria-expanded='true'])::after {
    opacity: 1;
  }

  /* the MENU button (the only navigation up to 959px) gets the film buttons' dark fill to stay readable */
  .header-over-film .menu-button {
    background: rgb(0 0 0 / 0.45);
    text-shadow: 0 2px 6px rgb(0 0 0 / 0.6);
  }

  .header-over-film .menu-button:hover {
    background: linear-gradient(rgb(255 105 212 / 0.14), rgb(255 105 212 / 0.14)), rgb(0 0 0 / 0.45);
  }

  /* the header is over the film now, so the film needs no line of its own at the top */
  .header-over-film .video-hero__frame::before {
    display: none;
  }

  /* the tablet menu opens below the fixed header: it scrolls if it is taller than the screen */
  .header-over-film .mobile-menu {
    max-height: calc(100dvh - var(--header-h, 100px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Short screens (phones held sideways, zoomed laptops): the header still sits over the film at the top, but scrolls
   away with the page instead of covering a large part of the screen. */
@media (min-width: 40rem) and (max-height: 30rem) {
  .header-over-film {
    scroll-padding-top: 0;
  }

  .header-over-film .site-header {
    position: absolute;
  }
}

@media (min-width: 40rem) and (prefers-reduced-motion: reduce) {
  .header-over-film .site-header::before,
  .header-over-film .site-header::after {
    transition: none;
  }
}

@media print {
  .header-over-film .site-header {
    position: static;
  }
}

/* ========== Motion (homepage) ========== */

/*
 * Load intros, scroll reveals, hovers and short idle flourishes. js/motion.js (homepage
 * only) marks the scroll-reveal elements. Everything that moves sits inside
 * prefers-reduced-motion: no-preference. Idle flourishes (twinkle, float, beat, sparkle) run once and
 * stop within 5 seconds of starting, so no movement runs on without a way to stop it (WCAG 2.2.2).
 *
 * Property roles, so no effect overwrites another or the layout's own rotate/translate values:
 *   opacity + transform  one-shot entrances, always fill-mode backwards, so afterwards the element's
 *                        own transform (e.g. the .btn hover) works again
 *   translate            hover lifts, or the float flourish (never both on one element, and never on an
 *                        element that already declares translate)
 *   scale + filter       twinkle and heartbeat flourishes, small hover pops, and the photo settle
 *                        (scale, so it composes with the photos' transform hover zoom)
 *   rotate               never animated (a rotate() inside transform keyframes is fine)
 * Inline SVGs animate transform only: Chrome does not composite individual transform properties on SVG.
 */

@keyframes m-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--m-dist), 0);
  }
}

@keyframes m-fade {
  from {
    opacity: 0;
  }
}

@keyframes m-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.98);
  }
}

@keyframes m-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes m-pop-soft {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

@keyframes m-draw {
  from {
    opacity: 0;
    transform: scaleX(0.15);
  }
}

/* Photos inside a clipping box: a slow zoom-out as they appear. No opacity: the card fades instead. */
@keyframes m-settle {
  from {
    scale: 1.08;
  }
}

/* Hero art, the Shinjuku title art and its main frame: movement only, never hidden. */
@keyframes m-lcp {
  from {
    transform: translate3d(0, 16px, 0) scale(0.97);
  }
}

/* Paper stickers: slapped on, overshooting slightly below full size. */
@keyframes m-slap {
  from {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes m-toss {
  from {
    opacity: 0;
    transform: translate3d(var(--m-toss-x, 16px), 32px, 0) rotate(var(--m-toss-r, 8deg)) scale(0.94);
  }
}

/* Neon sign switching on: two dips within 0.9s, once (well under three flashes a second). */
@keyframes m-flicker {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  16% {
    opacity: 0.25;
  }

  30% {
    opacity: 1;
  }

  38% {
    opacity: 0.45;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes m-menu {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes m-twinkle {
  50% {
    scale: 1.06;
    filter: brightness(1.2);
  }
}

@keyframes m-float {
  50% {
    translate: 0 -6px;
  }
}

@keyframes m-beat {
  0%,
  40%,
  100% {
    scale: 1;
  }

  10% {
    scale: 1.14;
  }

  20% {
    scale: 1;
  }

  30% {
    scale: 1.08;
  }
}

/* The same beat with transform, for inline SVG hearts */
@keyframes m-beat-svg {
  0%,
  20%,
  40%,
  100% {
    transform: none;
  }

  10% {
    transform: scale(1.14);
  }

  30% {
    transform: scale(1.08);
  }
}

@keyframes m-sparkle {
  50% {
    opacity: 0.5;
    scale: 0.8;
  }
}

/* Static helpers (nothing moves here). Sections with decorations near the screen edge never widen the page. */
.hiw,
.cta,
.sj-why {
  overflow-x: clip;
}

/* Clip the zoomed feature photos so they never cover the card body's top border. */
.sj-feature__media {
  overflow: hidden;
}

/* Plan photos have no wrapper: zoom from the bottom edge so the photo never grows over the caption. */
.plan-card__photo {
  transform-origin: 50% 100%;
}

/* Split card: each half grows away from the centre seam. */

/* Rule lines grow outward from the text. */
.sj-why__footnote::before {
  transform-origin: 100% 50%;
}

.sj-why__footnote::after {
  transform-origin: 0 50%;
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* ----- Scroll reveals: js/motion.js sets data-reveal, then .is-shown (already on screen) or .is-in (entered) ----- */

  /* waiting to enter: invisible, and not clickable until it appears */
  .has-motion [data-reveal]:not(.is-in):not(.is-shown) {
    opacity: 0;
    pointer-events: none;
  }

  [data-reveal='up'] {
    --m-in: m-up var(--m-dur-in) var(--m-ease-out);
  }

  [data-reveal='card'] {
    --m-in: m-up var(--m-dur-card) var(--m-ease-out);
    --m-dist: var(--m-dist-card);
  }

  [data-reveal='fade'] {
    --m-in: m-fade var(--m-dur-in) var(--m-ease-out);
  }

  [data-reveal='rise'] {
    --m-in: m-rise var(--m-dur-panel) var(--m-ease-out);
  }

  [data-reveal='pop'] {
    --m-in: m-pop var(--m-dur-pop) var(--m-ease-back);
  }

  [data-reveal='pop-soft'] {
    --m-in: m-pop-soft var(--m-dur-pop) var(--m-ease-out);
  }

  [data-reveal='draw'] {
    --m-in: m-draw var(--m-dur-panel) var(--m-ease-out);
  }

  /* 'intro': a section whose own CSS intro (below) waits until it scrolls into view: the section stays visible and
     its children's intro animations are held at their first frame (the Shinjuku hero). */
  [data-reveal='intro'] {
    --m-in: none;
  }

  .has-motion [data-reveal='intro']:not(.is-in):not(.is-shown) {
    opacity: 1;
    pointer-events: auto;
  }

  .has-motion [data-reveal='intro']:not(.is-in):not(.is-shown) * {
    animation-play-state: paused;
  }

  /* --m-d is the stagger delay set by js/motion.js; --m-loop is an optional idle flourish (below). */
  .has-motion [data-reveal].is-in {
    animation:
      var(--m-in) var(--m-d, 0ms) backwards,
      var(--m-loop, none);
  }

  .has-motion [data-reveal].is-shown {
    animation: var(--m-loop, none);
  }

  /* Children that enter with their revealed parent (they inherit its --m-d) */
  .has-motion .heisei__panel.is-in .heisei__title {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 200ms backwards;
  }

  .has-motion .heisei__panel.is-in .heisei__text {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 300ms backwards;
  }

  .has-motion .plan-card.is-in .plan-card__photo,
  .has-motion .gallery__cell.is-in .gallery__item img,
  .has-motion .sj-feature.is-in .sj-feature__photo {
    animation: m-settle var(--m-dur-settle) var(--m-ease-out) var(--m-d, 0ms) backwards;
  }

  .has-motion .sj-feature.is-in .sj-feature__heart {
    animation: m-pop var(--m-dur-pop) var(--m-ease-back) calc(var(--m-d, 0ms) + 300ms) backwards;
  }

  .has-motion .sj-why__footnote.is-in::before,
  .has-motion .sj-why__footnote.is-in::after {
    animation: m-draw var(--m-dur-in) var(--m-ease-out) 150ms backwards;
  }

  /* ----- Idle flourishes of revealed decorations (started with their entrance; each stops within 5s) ----- */

  .pricing__star--left,
  .hiw__star--left,
  .gallery__star--left,
  .faq__star--left,
  .cta__star--left,
  .sj-deco--star-why-left {
    --m-loop: m-twinkle 4s var(--m-ease-loop) 1;
  }

  .pricing__star--right,
  .hiw__star--right,
  .gallery__star--right,
  .faq__star--right,
  .cta__star--right,
  .sj-deco--star-why-right {
    --m-loop: m-twinkle 4s var(--m-ease-loop) 300ms 1;
  }

  .pricing__accent-star,
  .hiw__deco--star-tr,
  .gallery__sticker-star,
  .cta__deco--star-bl {
    --m-loop: m-twinkle 4s var(--m-ease-loop) 150ms 1;
  }

  .hiw__deco--star-bl {
    --m-loop: m-twinkle 4s var(--m-ease-loop) 450ms 1;
  }

  .pricing__heart,
  .hiw__deco--heart-tl,
  .cta__deco--heart-tl {
    --m-loop: m-float 4.4s var(--m-ease-loop) 1;
  }

  .cta__deco--heart-tl-small {
    --m-loop: m-float 4.4s var(--m-ease-loop) 100ms 1;
  }

  .hiw__deco--heart-br,
  .cta__deco--heart-br {
    --m-loop: m-float 4.4s var(--m-ease-loop) 200ms 1;
  }

  /* ----- Other idle flourishes (once, on load) ----- */

  /* Header and footer hearts only on the homepage (the class comes from js/motion.js). */
  .has-motion .site-nav__heart,
  .has-motion .site-header__heart {
    animation: m-beat 4s var(--m-ease-loop) 800ms 1;
  }

  .has-motion .site-footer__heart {
    animation: m-float 4.4s var(--m-ease-loop) 300ms 1;
  }

  .sj-why__title::before {
    animation: m-sparkle 2.6s var(--m-ease-loop) 1;
  }

  .sj-why__title::after {
    animation: m-sparkle 2.6s var(--m-ease-loop) 650ms 1;
  }

  /* ----- Home hero intro (CSS only, plays on load; settled by about 1.3s) ----- */

  .hero__art img {
    animation: m-lcp var(--m-dur-panel) var(--m-ease-out) backwards;
  }

  .hero__eyebrow {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 60ms backwards;
  }

  .hero__title > span {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 140ms backwards;
  }

  .hero__title > span:nth-child(2) {
    animation-delay: 220ms;
  }

  .hero__title > span:nth-child(3) {
    animation-delay: 300ms;
  }

  .hero__lede {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 400ms backwards;
  }

  .hero__intro {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 440ms backwards;
  }

  .hero__cta {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 480ms backwards;
  }

  .hero__gal-forever {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 620ms backwards,
      m-float 4.4s var(--m-ease-loop) 1;
  }

  .hero__star {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 720ms backwards,
      m-twinkle 4s var(--m-ease-loop) 150ms 1;
  }

  /* ----- Shinjuku hero intro (CSS only; settled by about 1.5s) ----- */

  .sj-hero__title-art,
  .sj-frame {
    animation: m-lcp var(--m-dur-panel) var(--m-ease-out) backwards;
  }

  .sj-hero__brand {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 100ms backwards;
  }

  .sj-hero__lede {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 180ms backwards;
  }

  /* Opacity and transform only: the pending pill's muted look is its filter, which must stay. */
  .sj-book {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 260ms backwards;
  }

  .sj-hero__note {
    animation: m-up var(--m-dur-in) var(--m-ease-out) 340ms backwards;
  }

  .sj-polaroid {
    --m-toss-x: 16px;
    --m-toss-r: 8deg;
    animation: m-toss var(--m-dur-card) var(--m-ease-out) 200ms backwards;
  }

  .sj-note--tokyo {
    animation: m-fade var(--m-dur-in) var(--m-ease-out) 420ms backwards;
  }

  .sj-note--neon {
    animation: m-fade var(--m-dur-in) var(--m-ease-out) 480ms backwards;
  }

  .sj-note--same {
    animation: m-fade var(--m-dur-in) var(--m-ease-out) 560ms backwards;
  }

  .sj-sticker--glam {
    animation: m-slap 450ms var(--m-ease-back) 560ms backwards;
  }

  .sj-sticker--era {
    animation: m-slap 450ms var(--m-ease-back) 680ms backwards;
  }

  .sj-deco--star-note {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 520ms backwards,
      m-twinkle 4s var(--m-ease-loop) 1;
  }

  .sj-deco--star-copy {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 600ms backwards,
      m-twinkle 4s var(--m-ease-loop) 300ms 1;
  }

  .sj-deco--heart-copy {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 640ms backwards,
      m-float 4.4s var(--m-ease-loop) 1;
  }

  .sj-deco--heart-frame {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 720ms backwards,
      m-float 4.4s var(--m-ease-loop) 200ms 1;
  }

  .sj-deco--star-top {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 780ms backwards,
      m-twinkle 4s var(--m-ease-loop) 150ms 1;
  }

  .sj-deco--star-bottom {
    animation:
      m-pop var(--m-dur-pop) var(--m-ease-back) 840ms backwards,
      m-twinkle 4s var(--m-ease-loop) 450ms 1;
  }

  .sj-neon {
    animation: m-flicker 900ms linear 600ms backwards;
  }

  /* ----- Phone/tablet menu (all pages): drops in on every open; closing stays instant ----- */

  .mobile-menu:not([hidden]) {
    animation: m-menu 220ms var(--m-ease-out);
  }

  .mobile-menu:not([hidden]) li {
    animation: m-menu 320ms var(--m-ease-out) backwards;
  }

  .mobile-menu:not([hidden]) li:nth-child(2) {
    animation-delay: 40ms;
  }

  .mobile-menu:not([hidden]) li:nth-child(3) {
    animation-delay: 80ms;
  }

  .mobile-menu:not([hidden]) li:nth-child(n + 4) {
    animation-delay: 120ms;
  }
}

/*
 * Hovers. The element that receives :hover never moves by more than 2px (only .btn and the live
 * booking pills do), so a pointer resting on an edge can't make it jitter: cards and collages
 * react through a wrapper that stays still. Links and buttons get the same effect on keyboard focus.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Header and footer logos (all pages) */
  .site-header__brand img,
  .site-footer__brand img {
    transition:
      transform var(--m-dur-hover) var(--m-ease-back),
      filter var(--m-dur-hover) ease;
  }

  .site-header__brand:hover img,
  .site-header__brand:focus-visible img,
  .site-footer__brand:hover img,
  .site-footer__brand:focus-visible img {
    filter: drop-shadow(0 0 12px rgb(255 105 212 / 0.55));
    transform: rotate(-2deg) scale(1.04);
  }

  /* Nav and footer link underlines grow in (all pages); the current page keeps its own style */
  .site-nav a:not([aria-current])::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 4px;
    left: 6px;
    height: 4px;
    border-radius: 2px;
    background: var(--c-pink);
    transform: scaleX(0);
    transition: transform var(--m-dur-hover) var(--m-ease-out);
  }

  .site-footer__links a:not([aria-current]) {
    position: relative;
  }

  .site-footer__links a:not([aria-current])::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 10px;
    left: 4px;
    height: 2px;
    border-radius: 1px;
    background: var(--c-pink);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--m-dur-hover) var(--m-ease-out);
  }

  .site-nav a:not([aria-current]):hover::after,
  .site-nav a:not([aria-current]):focus-visible::after,
  .site-footer__links a:not([aria-current]):hover::after,
  .site-footer__links a:not([aria-current]):focus-visible::after {
    transform: none;
  }

  /* Arrow nudges on real links only (the pending pills have no href, so these never match them) */
  .btn .icon-arrow,
  a.sj-book[href] .icon-arrow,
  a.cta-card__book[href] .icon-arrow {
    transition: translate var(--m-dur-fast) var(--m-ease-out);
  }

  .btn:hover .icon-arrow,
  .btn:focus-visible .icon-arrow {
    translate: 2px -2px;
  }

  a.sj-book[href]:hover .icon-arrow,
  a.sj-book[href]:focus-visible .icon-arrow,
  a.cta-card__book[href]:hover .icon-arrow,
  a.cta-card__book[href]:focus-visible .icon-arrow {
    translate: 3px 0;
  }

  /* The Shinjuku hero's booking pill once it has a booking link: the same lift as .btn */
  a.sj-book[href] {
    transition:
      translate 180ms ease,
      filter 180ms ease;
  }

  a.sj-book[href]:hover {
    translate: 0 -2px;
  }

  a.sj-book[href]:active {
    translate: none;
  }

  /* Informational cards: the photo zooms a little; no lift, glow or cursor change */
  .plan-card__photo,
  .sj-feature__photo {
    transition: transform var(--m-dur-zoom) var(--m-ease-out);
  }

  .plan-card:hover .plan-card__photo,
  .sj-feature:hover .sj-feature__photo {
    transform: scale(var(--m-zoom));
  }

  .sj-feature__heart {
    transition:
      translate var(--m-dur-hover) var(--m-ease-back),
      scale var(--m-dur-hover) var(--m-ease-back);
  }

  .sj-feature:hover .sj-feature__heart {
    translate: 0 -5px;
    scale: 1.1;
  }

  /* How It Works: the illustration hops like a sticker */
  .hiw-step__img {
    transition: transform var(--m-dur-lift) var(--m-ease-back);
  }

  .hiw-step:hover .hiw-step__img {
    transform: translate3d(0, -6px, 0) rotate(-2deg);
  }

  .hiw-step:nth-child(even):hover .hiw-step__img {
    transform: translate3d(0, -6px, 0) rotate(2deg);
  }

  /* FAQ: the + / × icon pops (rotate stays with the open state) */
  .faq-item__question::after {
    transition:
      rotate 0.2s ease,
      scale var(--m-dur-fast) var(--m-ease-back);
  }

  .faq-item__question:hover::after,
  .faq-item__question:focus-visible::after {
    scale: 1.12;
  }

  /* Final CTA: the chrome polaroid (photo and frame together) tilts; the card and pill don't react */
  .cta-card__media > img {
    transition: transform var(--m-dur-lift) var(--m-ease-back);
  }

  .cta-card--shinjuku .cta-card__media:hover > img {
    transform: translate3d(0, -4px, 0) rotate(1.5deg);
  }

  /* Shinjuku hero collage: the polaroid lifts and the stickers peel up; the main frame stays still */
  .sj-polaroid,
  .sj-sticker {
    transition: translate var(--m-dur-lift) var(--m-ease-out);
  }

  .sj-collage:hover .sj-polaroid,
  .sj-collage:hover .sj-sticker--era {
    translate: 0 -8px;
  }

  .sj-collage:hover .sj-sticker--glam {
    translate: 0 -4px;
  }
}

@media (forced-colors: active) {
  .site-nav a:not([aria-current])::after,
  .site-footer__links a:not([aria-current])::after {
    background: CanvasText;
  }
}

/* ========== Cookie consent banner (js/consent.js) ========== */
/* "Accept" and "Decline" look exactly the same, so declining is as easy as accepting. */

.consent {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 10px max(10px, env(safe-area-inset-bottom));
  pointer-events: none;
}

/* While the banner shows, the page gets room at the bottom so the footer and focused links are never hidden under it
   (--consent-space is the banner's height, set by js/consent.js). */
html {
  scroll-padding-bottom: var(--consent-space, 0px);
}

body {
  padding-bottom: var(--consent-space, 0px);
}

.consent__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 24px;
  align-items: center;
  max-width: 820px;
  margin-inline: auto;
  padding: 14px 16px;
  border: 2px solid var(--c-pink);
  border-radius: 18px;
  background: rgb(12 8 14 / 0.97);
  box-shadow:
    0 14px 34px -10px rgb(0 0 0 / 0.8),
    0 0 26px -8px rgb(255 105 212 / 0.5);
  color: var(--c-text);
  pointer-events: auto;
  /* never taller than the screen (short phones with large text): the banner scrolls instead */
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
}

.consent__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.consent__text,
.consent__status {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.consent__text a {
  color: var(--c-pink-light);
  text-underline-offset: 2px;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0.55em 0.8em;
  border: 2px solid var(--c-pink);
  border-radius: 999px;
  background: rgb(255 105 212 / 0.08);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.1;
  cursor: pointer;
}

.consent__btn:hover {
  background: rgb(255 105 212 / 0.22);
}

.consent__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (min-width: 40rem) {
  .consent {
    padding-inline: var(--gutter);
  }

  .consent__text,
  .consent__status {
    font-size: 0.9375rem;
    line-height: 1.45;
  }
}

@media (min-width: 48rem) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 22px;
  }

  .consent__btn {
    flex: 0 0 auto;
    min-width: 8.5em;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .consent__inner {
    animation: m-up var(--m-dur-in) var(--m-ease-out);
  }
}

@media (forced-colors: active) {
  .consent__inner {
    border-color: CanvasText;
  }

  .consent__btn {
    border-color: ButtonText;
  }
}

/* "Cookie settings" in the footer's legal row: a button that looks like the links next to it */
.site-footer__cookie-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 0.66);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}

.site-footer__cookie-btn:hover {
  color: var(--c-pink-light);
}

/* ========== Languages: the flag menu (every page) and the Japanese pages (website/ja/, tools/translate.py) ========== */

/* Round flags (images/flags.svg) with a white ring; the current language gets the pink ring. */
.flag {
  display: block;
  flex: none;
  width: var(--flag, 30px);
  height: var(--flag, 30px);
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.92), 0 3px 8px rgb(0 0 0 / 0.55);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The current language's flag opens the list (<details>; js/menu.js closes it on Escape or a click outside).
   Phones: in the leopard heart's place, left of the logo. Desktop: at the left end, mirroring the heart. */
.lang-menu {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.lang-menu ~ .site-header__heart {
  display: none;
}

/* Phone/tablet header: the logo gives way first on very narrow screens or with enlarged text, so the flag never
   pushes MENU off screen (below the desktop navigation's breakpoint only) */
@media (max-width: 959.98px), (max-width: 49.99rem) {
  .site-header__bar {
    grid-template-columns: 1fr minmax(0, var(--logo-w)) 1fr;
  }
}

/* 320-339px phones: the 44px flag button (wider than the old heart) keeps its tap area but takes 32px of the bar */
@media (max-width: 339.98px) {
  .site-header {
    --bar-gap: 8px;
  }

  .lang-menu > summary {
    margin-inline: -6px;
  }
}

.lang-menu > summary {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
  --flag: 32px;
}

.lang-menu > summary::-webkit-details-marker {
  display: none;
}

.lang-menu > summary:hover .flag,
.lang-menu[open] > summary .flag {
  box-shadow: 0 0 0 2px var(--c-pink-light), 0 0 14px rgb(255 105 212 / 0.7);
}

.lang-menu__chevron {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-pink);
  box-shadow: 0 0 0 2px var(--c-bg);
  color: var(--c-ink);
}

.lang-menu__chevron svg {
  width: 10px;
  height: 10px;
  transition: rotate 0.2s ease;
}

.lang-menu[open] .lang-menu__chevron svg {
  rotate: 180deg;
}

.lang-menu__list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 2px solid var(--c-pink);
  border-radius: 18px;
  background: var(--c-bg);
  box-shadow: 0 18px 36px -10px rgb(0 0 0 / 0.85), 0 0 22px -6px rgb(255 105 212 / 0.55);
}

.lang-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  --flag: 28px;
}

/* Each language name in fonts made for its script, whatever the page's language */
.lang-menu__link:lang(ja) {
  font-family: 'Rubik Variable', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
}

.lang-menu__link:lang(ko) {
  font-family: 'Rubik Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

.lang-menu__link:lang(zh-Hans) {
  font-family: 'Rubik Variable', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

.lang-menu__link:lang(zh-Hant) {
  font-family: 'Rubik Variable', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
}

.lang-menu__link:lang(th) {
  font-family: 'Rubik Variable', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
}

.lang-menu__link:hover,
.lang-menu__link:focus-visible {
  background: rgb(255 105 212 / 0.16);
}

.lang-menu__link[aria-current='true'] .flag {
  box-shadow: 0 0 0 2.5px var(--c-pink), 0 0 14px rgb(255 105 212 / 0.8);
}

.lang-menu__link[aria-current='true']::after {
  content: '';
  width: 14px;
  height: 8px;
  margin-left: auto;
  border-bottom: 3px solid var(--c-pink);
  border-left: 3px solid var(--c-pink);
  rotate: -45deg;
  translate: 0 -2px;
}

@media (min-width: 960px) and (min-width: 50rem) {
  /* room for the flag at the left end of the header (the right end has the heart) */
  .site-nav__group--left {
    padding-inline-start: 52px; /* the 44px flag button + 8px */
  }
}

@media (forced-colors: active) {
  .lang-menu__chevron {
    border: 1px solid CanvasText;
  }

  .lang-menu__link[aria-current='true']::after {
    border-color: CanvasText;
  }
}

/* Shown only on translated policy pages (data-i18n-only): "this page is a translation; English applies" */
.policy__translation-note {
  max-width: 40em;
  margin: 1.1em auto 0;
  padding: 10px 16px;
  border: 1px solid rgb(255 105 212 / 0.55);
  border-radius: 12px;
  color: var(--c-pink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Japanese plan cards: the RESERVA plan name under the English one */
.plan-card__sub {
  display: block;
  margin-top: 0.35em;
  color: var(--c-pink-light);
  font-family: var(--font-ui);
  font-size: max(0.8125rem, 0.36em);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

/* ----- Japanese pages ----- */

/* Mochiy Pop P One (SIL OFL 1.1, fonts/LICENSE-mochiy-pop-p-one.txt), cut down by tools/translate.py fonts to the
   Japanese characters the pages use. Latin letters keep Titan One (listed first); Japanese falls through to it. */
@font-face {
  font-family: 'GALULU JP Display';
  src: url('../fonts/mochiy-pop-p-one-ja.woff?v=e17b98acb3') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html:lang(ja) {
  --font-display: 'Titan One', 'GALULU JP Display', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-ui: 'Rubik Variable', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
  --font-body: 'DM Sans Variable', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
  line-break: strict;
  /* the display font has one weight: no fake bold */
  font-synthesis: none;
}

/* Phrase-based line breaks (where supported) for headings and short labels only: in long text they leave ragged
   lines and make each phrase a minimum width that can widen grid columns. */
html:lang(ja) :is(h1, h2, h3, .btn, .plan-book, .sj-book, .site-nav a, .hero__eyebrow, .cta__sub) {
  word-break: auto-phrase;
}

/* policy lists: the single column may shrink to the card, so long Japanese phrases wrap */
html:lang(ja) .policy-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Japanese display font first, so '×' (in the subset) is drawn by it; Latin letters still fall through to Anton */
html:lang(ja) :is(.sj-hero, .sj-why) {
  --font-condensed: 'GALULU JP Display', 'Anton', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}

/* Japanese hero title. "今日はうちらが主役♪" is about 9.45em wide (9.8em in the system font shown until the web font
   has loaded). On desktop it wraps, and only at the <wbr> before 主役: keep-all stops Safari, which ignores auto-phrase,
   from splitting 主|役, and a no-break span keeps ♪ with 主役. On phones and tablets (portrait and landscape, below 960px)
   the title is sized so that line fits on one row in either font; the English lines fit at the normal size. */
html:lang(ja) .hero__title span {
  white-space: normal;
  word-break: keep-all;
}

@media (max-width: 959.98px) {
  html:lang(ja) .hero__title {
    font-size: min(4.6rem, 10cqi);
  }
}

/* Japanese "平成ギャルって？" on one line: its two spans sit side by side (flex leaves out the space between them) and
   the size follows the panel width; the text is about 7.35em wide, so it fits with room to spare at every width */
html:lang(ja) .heisei__title {
  display: flex;
  flex-wrap: wrap;
  font-size: min(3rem, 10.5cqi);
}

@container heisei (min-width: 68.75rem) {
  html:lang(ja) .heisei__title {
    font-size: min(4.9cqi, 72px);
  }
}

/* Japanese Legal Notice title: the Japanese display font */
html:lang(ja) .policy__title--ja {
  font-family: 'GALULU JP Display', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', var(--font-body);
}

/* A word too long for a whole line in a policy heading (e.g. RESCHEDULING with enlarged text on a 320px phone) breaks
   instead of running off the screen; everything else wraps as before */
:is(.policy__title, .policy-card__title) {
  overflow-wrap: break-word;
}

/* Latin words inside Japanese labels keep their spelling (Cookieポリシー, not COOKIEポリシー) */
html:lang(ja) :is(.site-footer__links a, .site-footer__cookie-btn, .policy__title, .policy-card__title, .consent__title) {
  text-transform: none;
}

@media (min-width: 75rem) {
  /* keep the longer Japanese lede clear of the star beside it (.sj-deco--star-copy) */
  html:lang(ja) .sj-hero__lede {
    max-width: calc(100% - clamp(48px, 4.4vw, 70px));
  }
}

/* final CTA on 320-339px phones: keep ギャルタイム、 on one line */
@media (max-width: 339.98px) {
  html:lang(ja) .cta__title {
    font-size: clamp(30px, 9.4vw, 96px);
  }
}

/* ----- Korean, Chinese and Thai pages (shared) ----- */

/* Latin words inside translated labels keep their spelling (Cookie政策, not COOKIE政策) */
html:is(:lang(ko), :lang(zh), :lang(th)) :is(.site-footer__links a, .site-footer__cookie-btn, .policy__title, .policy-card__title, .consent__title) {
  text-transform: none;
}

/* policy lists: the single column may shrink to the card, so long words and phrases wrap */
html:is(:lang(ko), :lang(zh), :lang(th)) .policy-list {
  grid-template-columns: minmax(0, 1fr);
}

/* Headings and short lines break into even lines instead of leaving one word alone on the last line */
html:is(:lang(ko), :lang(zh), :lang(th)) :is(h1, h2, h3, .hero__lede, .cta__sub, .plan-card__sub, .btn, .sj-hero__lede,
  .sj-feature__text, .sj-why__lede, .sj-why__footnote, .policy__lede, .policy__translation-note, .pricing__note) {
  text-wrap: balance;
}

/* Japanese text on these pages (the Legal Notice's Japanese lines, 合同会社ROVE) keeps Japanese fonts and line breaking,
   as on the English pages, so its kanji and full-width punctuation are not drawn in a Korean, Chinese or Thai font */
html:is(:lang(ko), :lang(zh), :lang(th)) [lang|='ja']:not(.policy__title--ja, .sj-neon__ja, .lang-menu__link) {
  font-family: 'DM Sans Variable', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
  line-break: strict;
  word-break: normal;
}

/* the Legal Notice's Japanese title breaks between phrases (where supported), as on the Japanese page */
html:is(:lang(ko), :lang(zh), :lang(th)) h1.policy__title--ja {
  word-break: auto-phrase;
}

/* The translated hero lines may wrap (between words); the English lines are short enough never to need it */
html:is(:lang(ko), :lang(zh), :lang(th)) .hero__title span {
  white-space: normal;
}

/* ----- Korean pages ----- */

/* Jua (SIL OFL 1.1, fonts/LICENSE-jua.txt), cut down by tools/translate.py fonts to the Korean characters the pages
   use in headings. Latin letters keep Titan One (listed first). */
@font-face {
  font-family: 'GALULU KO Display';
  src: url('../fonts/jua-ko.woff?v=df8f6b5471') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html:lang(ko) {
  --font-display: 'Titan One', 'GALULU KO Display', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-ui: 'Rubik Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-body: 'DM Sans Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  /* Korean wraps between words (at spaces), never inside one */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* the display font has one weight: no fake bold */
  font-synthesis: none;
}

/* The same cut, used only for ! ( ) , . ? ~ in the Korean headings below: Titan One's punctuation is much heavier than
   the Hangul next to it (English headings on Korean pages keep Titan One's) */
@font-face {
  font-family: 'GALULU KO Punctuation';
  src: url('../fonts/jua-ko.woff?v=df8f6b5471') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0021, U+0028-0029, U+002C, U+002E, U+003F, U+007E;
}

html:lang(ko) :is(.hero__title, .heisei__title, .policy__title:not(.policy__title--ja), .policy-card__title) {
  font-family: 'GALULU KO Punctuation', var(--font-display);
}

html:lang(ko) .sj-why__title {
  font-family: 'GALULU KO Punctuation', var(--font-condensed);
}

/* Korean display font first in the condensed sections, so Hangul uses it; Latin letters still fall through to Anton */
html:lang(ko) :is(.sj-hero, .sj-why) {
  --font-condensed: 'GALULU KO Display', 'Anton', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* ----- Simplified Chinese pages ----- */

/* ZCOOL KuaiLe (SIL OFL 1.1, fonts/LICENSE-zcool-kuaile.txt), cut down by tools/translate.py fonts to the Chinese
   characters the pages use in headings. Latin letters keep Titan One (listed first). */
@font-face {
  font-family: 'GALULU SC Display';
  src: url('../fonts/zcool-kuaile-zh-hans.woff?v=d25204f7b0') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The same cut, used only for Latin letters, digits and signs inside the Chinese headings below, so they match the
   Chinese characters' weight (Titan One is much heavier; English headings on Chinese pages keep it) */
@font-face {
  font-family: 'GALULU SC Latin';
  src: url('../fonts/zcool-kuaile-zh-hans.woff?v=d25204f7b0') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

/* Chinese dashes, quotes and ellipses from the visitor's Chinese system font instead of the Latin text fonts, which
   draw —— as two short dashes and “ ” as narrow Latin quotes */
@font-face {
  font-family: 'GALULU SC Punctuation';
  src: local('PingFangSC-Regular'), local('PingFang SC Regular'), local('MicrosoftYaHei'), local('Microsoft YaHei'),
    local('NotoSansCJKsc-Regular'), local('Noto Sans CJK SC'), local('NotoSansSC-Regular'), local('Noto Sans SC');
  font-weight: 100 500;
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026;
}

@font-face {
  font-family: 'GALULU SC Punctuation';
  src: local('PingFangSC-Semibold'), local('PingFang SC Semibold'), local('MicrosoftYaHei-Bold'),
    local('Microsoft YaHei Bold'), local('NotoSansCJKsc-Bold'), local('Noto Sans CJK SC Bold'), local('NotoSansSC-Bold');
  font-weight: 600 900;
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026;
}

html:lang(zh-Hans) {
  --font-display: 'Titan One', 'GALULU SC Display', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-ui: 'GALULU SC Punctuation', 'Rubik Variable', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-body: 'GALULU SC Punctuation', 'DM Sans Variable', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  /* the display font has one weight: no fake bold */
  font-synthesis: none;
}

/* Chinese display font first in the condensed sections, so Chinese uses it; Latin letters still fall through to Anton */
html:lang(zh-Hans) :is(.sj-hero, .sj-why) {
  --font-condensed: 'GALULU SC Display', 'Anton', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

html:lang(zh-Hans) :is(.hero__title, .heisei__title, .policy__title:not(.policy__title--ja), .policy-card__title) {
  font-family: 'GALULU SC Latin', var(--font-display);
}

html:lang(zh-Hans) :is(.sj-why__title, .sj-feature__title) {
  font-family: 'GALULU SC Latin', var(--font-condensed);
}

/* ----- Chinese pages (Simplified and Traditional, shared) ----- */

/* Headings and short lines wrap only between phrases: the translations mark the phrase boundaries with <wbr>, and
   keep-all stops breaks between the other characters (a phrase too long for its line still breaks where it must) */
html:lang(zh) :is(h1, h2, h3, .sj-hero__lede, .sj-why__footnote, .cta__sub) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* the same for longer centred lines whose translation marks its phrases (<wbr>) */
html:lang(zh) :is(.sj-feature__text, .sj-why__lede, .policy__translation-note, .policy__lede):has(wbr) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* the hero lede's two lines stay whole on the narrowest phones (from 380px they are separate lines anyway) */
@container (max-width: 379.98px) {
  html:is(:lang(zh), :lang(th)) .hero__lede-line {
    display: inline-block;
  }
}

/* labels mixing Latin (Rubik) and Chinese: semibold, the heaviest weight of the Chinese system fonts, so both halves
   look equally heavy */
html:lang(zh) :is(.plan-card__times, .hiw-step__title, .policy-fees strong) {
  font-weight: 600;
}

/* The Legal Notice's Japanese title is bold as on the English page (its rounded system font has one weight, so the
   bold is synthesized; the translated pages switch synthesis off for their single-weight display fonts) */
html:is(:lang(ko), :lang(zh), :lang(th)) .policy__title--ja {
  font-synthesis: weight;
}

/* ----- Traditional Chinese pages ----- */

/* Chiron GoRound TC (SIL OFL 1.1, fonts/LICENSE-chiron-goround-tc.txt) at weight 900, cut down by
   tools/translate.py fonts to the characters the pages use in headings. Latin letters keep Titan One (listed first),
   except in the Chinese headings below, which take them from this cut (GALULU TC Latin) to match its weight. */
@font-face {
  font-family: 'GALULU TC Display';
  src: url('../fonts/chiron-goround-tc-zh-hant.woff?v=352b8fe45b') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GALULU TC Latin';
  src: url('../fonts/chiron-goround-tc-zh-hant.woff?v=352b8fe45b') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

/* Chinese dashes, quotes and ellipses from the visitor's Chinese system font (see GALULU SC Punctuation) */
@font-face {
  font-family: 'GALULU TC Punctuation';
  src: local('PingFangTC-Regular'), local('PingFang TC Regular'), local('MicrosoftJhengHeiRegular'),
    local('Microsoft JhengHei'), local('NotoSansCJKtc-Regular'), local('Noto Sans CJK TC'), local('NotoSansTC-Regular'),
    local('Noto Sans TC');
  font-weight: 100 500;
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026;
}

@font-face {
  font-family: 'GALULU TC Punctuation';
  src: local('PingFangTC-Semibold'), local('PingFang TC Semibold'), local('MicrosoftJhengHeiBold'),
    local('Microsoft JhengHei Bold'), local('NotoSansCJKtc-Bold'), local('Noto Sans CJK TC Bold'), local('NotoSansTC-Bold');
  font-weight: 600 900;
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026;
}

html:lang(zh-Hant) {
  --font-display: 'Titan One', 'GALULU TC Display', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --font-ui: 'GALULU TC Punctuation', 'Rubik Variable', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --font-body: 'GALULU TC Punctuation', 'DM Sans Variable', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  /* the display font cut has one weight: no fake bold */
  font-synthesis: none;
}

/* Chinese display font first in the condensed sections, so Chinese uses it; Latin letters still fall through to Anton */
html:lang(zh-Hant) :is(.sj-hero, .sj-why) {
  --font-condensed: 'GALULU TC Display', 'Anton', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
}

html:lang(zh-Hant) :is(.hero__title, .heisei__title, .policy__title:not(.policy__title--ja), .policy-card__title) {
  font-family: 'GALULU TC Latin', var(--font-display);
}

html:lang(zh-Hant) :is(.sj-why__title, .sj-feature__title) {
  font-family: 'GALULU TC Latin', var(--font-condensed);
}

/* ----- Thai pages ----- */

/* Mitr Bold (SIL OFL 1.1, fonts/LICENSE-mitr.txt), cut down by tools/translate.py fonts to the Thai block. Latin
   letters keep Titan One (listed first), which is about as heavy. */
@font-face {
  font-family: 'GALULU TH Display';
  src: url('../fonts/mitr-bold-th.woff?v=1a938d44bc') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html:lang(th) {
  --font-display: 'Titan One', 'GALULU TH Display', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
  --font-ui: 'Rubik Variable', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
  --font-body: 'DM Sans Variable', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
  /* the display font cut has one weight: no fake bold */
  font-synthesis: none;
}

/* Thai display font first in the condensed sections, so Thai uses it; Latin letters still fall through to Anton */
html:lang(th) :is(.sj-hero, .sj-why) {
  --font-condensed: 'GALULU TH Display', 'Anton', 'Thonburi', 'Leelawadee UI', 'Noto Sans Thai', sans-serif;
}

/* Thai vowels and tone marks sit above and below the letters: the translated headings, labels and buttons get taller
   lines and no negative letter spacing, so marks never touch the line above or below (the English-only section
   titles keep the English design) */
html:lang(th) :is(.hero__title, .heisei__title, .policy__title:not(.policy__title--ja), .policy-card__title,
  .sj-why__title, .sj-feature__title, .hiw-step__title, .plan-card__sub, .cta__sub, .faq-item__question, .btn,
  .plan-book, .sj-book, .cta-card__sub) {
  line-height: 1.35;
  letter-spacing: 0;
}

/* running text: Thai reads best with a little more leading than Latin text */
html:lang(th) :is(.policy-card, .faq-item__answer, .legal-table, .policy__head) :is(p, li, dd, dt),
html:lang(th) :is(.hero__lede, .hero__intro, .heisei__text, .sj-hero__lede, .sj-feature__text, .sj-why__lede, .sj-why__footnote,
  .policy__lede, .policy__translation-note, .consent__text) {
  line-height: 1.7;
}

/* longer Thai paragraphs avoid a lone word on their last line */
html:lang(th) :is(.heisei__text, .faq-item__answer p, .policy-card p, .policy-card li, .legal-table dd p) {
  text-wrap: pretty;
}

/* labels mixing Latin (Rubik) and Thai: semibold, so the Latin half is no heavier than the Thai system font's bold */
html:lang(th) :is(.plan-card__times, .plan-card__sub, .hiw-step__title, .policy-fees strong) {
  font-weight: 600;
}

/* Thai is not letter-spaced: only GALULU and the slash keep the label's tracking (GALULU / ชินจูกุ) */
html:lang(th) .sj-hero__brand {
  letter-spacing: 0.02em;
}

html:lang(th) :is(.sj-hero__brand-name, .sj-hero__brand-sep) {
  letter-spacing: 0.3em;
}

/* Words kept on one line (tools/translate.py wraps Thai compounds, Chinese numbers with their units and Korean
   particles in it); !important because heading spans elsewhere are set to block and to normal wrapping */
.nobr {
  display: inline !important;
  white-space: nowrap !important;
}