/* ==========================================================================
   BlueFlow LP — redesign 2026-07
   Palette:  bg #FAF9F5 / ink #131F2B / accent #3A7CA5 / navy #10233A
   Type:     Newsreader (serif display) + Helvetica Neue (body) + mono labels
   ========================================================================== */

:root {
  --bg: #FAF9F5;
  --ink: #131F2B;
  --ink-soft: #4A5865;
  --ink-muted: #5A6875;
  --mono-muted: #8A96A0;
  --accent: #3A7CA5;
  --accent-light: #7FA8C4;
  --navy: #10233A;
  --navy-btn: #14293D;
  --navy-btn-hover: #1E3D5C;
  --navy-border: #24405C;
  --navy-chip-border: #2C4A66;
  --border: #E5E2DA;
  --chip-border: #D8D4CA;
  --dark-text: #E9EDF0;
  --dark-text-soft: #B6C2CC;
  --dark-mono: #728899;
  --warn: #A05252;
  --panel-light: #F0F5F8;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 1120px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

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

/* ---------- header / nav ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 32px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* full-bleed background bar behind the sticky header */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: rgba(250, 249, 245, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: -1;
}

.brand {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-mark { display: none; }

.brand-logo {
  display: block;
  width: 184px;
  height: auto;
  flex: 0 0 auto;
}

.footer-logo {
  display: block;
  width: 148px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: none;
}

.nav-links a:hover { color: var(--ink); }

.nav-cta {
  font-size: 14px;
  color: var(--bg);
  background: var(--navy-btn);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav-cta:hover { background: var(--navy-btn-hover); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hamburger button for the mobile nav-links dropdown. Hidden on desktop,
   where .nav-links already shows inline in the header (see the ≤720px
   media query below for the mobile-only appearance and behavior). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--navy-chip-border);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover { border-color: var(--ink-muted); }

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--ink-muted);
  border-radius: 1px;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 1.5px;
  background: var(--ink-muted);
  border-radius: 1px;
  transition: transform 0.15s ease;
}

.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

.site-header.nav-open .nav-toggle-bars { background: transparent; }
.site-header.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.lang-toggle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--navy-chip-border);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.lang-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Full word by default; the ≤720px media query below swaps in the "EN"/"JP"
   short label so the toggle fits next to the hamburger and CTA on one row. */
.lang-toggle .lang-short { display: none; }

/* ---------- shared ---------- */

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 32px;
}

.section-inner.narrow { max-width: 760px; }

.kicker,
.section-kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 24px;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.mono-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
}

/* buttons */

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  line-height: 1.3;
}

.button.primary {
  color: var(--bg);
  background: var(--navy-btn);
}

.button.primary:hover { background: var(--navy-btn-hover); }

.button.secondary {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--chip-border);
}

.button.secondary:hover { border-color: var(--ink); }

.button.text {
  color: var(--ink-muted);
  background: transparent;
  padding: 15px 18px;
}

.button.text:hover { color: var(--ink); }

.button.full {
  display: block;
  width: 100%;
}

/* ---------- hero ---------- */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px 32px 120px;
}

.hero-kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 28px;
}

.hero h1 {
  font-size: clamp(44px, 6.5vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 800px;
  text-wrap: balance;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 32px 0 44px;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-link {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid #C9CFD4;
  padding-bottom: 2px;
}

.hero-link:hover { color: var(--ink); }

.hero-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
  margin-top: 20px;
}

/* ---------- problem ---------- */

.problem-section { border-top: 1px solid var(--border); }

.problem-section h2 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 56px;
  max-width: 620px;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.problem-grid > div {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

.problem-grid strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 10px;
}

.problem-grid p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
  text-wrap: pretty;
}

.problem-close {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  margin: 72px 0 0;
  max-width: 640px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- dark sections ---------- */

.dark-section {
  background: var(--navy);
  color: var(--dark-text);
}

.dark-section .kicker,
.dark-section .section-kicker { color: var(--accent-light); }

.dark-section h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.15;
  max-width: 720px;
  text-wrap: balance;
  margin: 0 0 28px;
}

.dark-section .dark-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dark-text-soft);
  max-width: 620px;
  margin: 0 0 48px;
  text-wrap: pretty;
}

.chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.chips span {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dark-text);
  border: 1px solid var(--navy-chip-border);
  border-radius: 999px;
  padding: 9px 18px;
}

.dark-quote {
  font-family: var(--serif);
  font-size: 26px;
  font-style: italic;
  line-height: 1.5;
  color: var(--dark-text);
  max-width: 640px;
  margin: 72px 0 0;
  border-left: 2px solid var(--accent);
  padding-left: 28px;
  text-wrap: pretty;
}

/* ---------- flow check (diagnosis) ---------- */

.diagnosis-section { border-top: 1px solid var(--border); }

.diagnosis-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 110px 32px;
}

.diagnosis-head { text-align: center; }

.diagnosis-head .kicker { margin-bottom: 24px; }

.diagnosis-head h2 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 16px;
}

.diagnosis-head p {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 8px;
  text-wrap: pretty;
}

.mini-metrics {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 36px 0 24px;
}

.mini-metrics div { text-align: center; }

.mini-metrics strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
}

.mini-metrics span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
}

.diagnosis-card { margin-top: 24px; }

.form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 16px;
}

.form-head h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
}

.form-head p {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
  margin: 4px 0 0;
}

.progress {
  display: none;
}

.question {
  border: none;
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 30px 0;
}

.question legend {
  font-size: 17px;
  font-weight: 500;
  padding: 0;
  margin-bottom: 18px;
  float: left;
  width: 100%;
}

.choices {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  clear: both;
}

.choice { position: relative; }

.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: inline-block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
}

.choice:hover span { border-color: var(--ink-muted); }

.choice input:checked + span {
  background: var(--navy-btn);
  color: var(--bg);
  border-color: var(--navy-btn);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.form-note {
  font-size: 13px;
  color: var(--mono-muted);
  margin-top: 24px;
  line-height: 1.6;
}

/* ---------- result ---------- */

.result-section .section-inner { padding-top: 0; }

.result-card {
  background: var(--navy);
  color: var(--dark-text);
  border-radius: 16px;
  padding: 48px;
  display: grid;
  /* minmax(0, Nfr) rather than a bare Nfr: grid columns refuse to shrink below
     their content by default, so anything wide on one side pushes the other
     one flat. This keeps the split at 6:5 whatever the columns contain. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
}

.result-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-light);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.result-main h2 {
  font-size: 44px;
  margin: 0 0 16px;
}

.result-condition {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent-light);
  border: 1px solid var(--navy-chip-border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 20px;
  max-width: 520px;
}

.result-summary {
  font-size: 16px;
  line-height: 1.7;
  color: var(--dark-text-soft);
  margin: 0 0 28px;
  text-wrap: pretty;
}

.next-action {
  border-left: 2px solid var(--accent);
  padding-left: 24px;
}

.next-action h3 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent-light);
  margin: 0 0 10px;
}

.next-action p {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.result-side h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 12px;
}

.result-side > p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--dark-text-soft);
  margin: 0 0 20px;
}

.price-box {
  border: 1px solid var(--navy-chip-border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.price-box span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: block;
  margin-bottom: 4px;
}

.price-box strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
}

.price-box p {
  font-size: 13px;
  color: var(--dark-text-soft);
  margin: 6px 0 0;
}

.lead-fields {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  /* Grid items default to min-width:auto and grow to fit their content, which
     makes a child's max-width:100% resolve against the grown width and stop
     constraining anything. Pinning these to 0 is what gives that cap meaning --
     for a resized textarea, and equally for an unbroken long address typed
     into the input. */
  min-width: 0;
}

.lead-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.lead-fields span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-mono);
}

.lead-fields input,
.lead-fields textarea {
  font-family: var(--sans);
  /* 16px is a hard floor for anything focusable on iOS Safari: below it, the
     browser zooms the page in on focus and the layout is then cut off at the
     edges. See the shared rule near the end of this file. */
  font-size: 16px;
  color: var(--dark-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--navy-chip-border);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  /* Dragging the handle sideways used to widen the whole column and squeeze
     the result text beside it into a vertical sliver. Height is the dimension
     worth adjusting for a longer answer; width is fixed by the layout. */
  max-width: 100%;
}

.lead-fields textarea {
  resize: vertical;
  /* Bounded so the card cannot be stretched past the point where the button
     below it leaves the screen. */
  min-height: 84px;
  max-height: 320px;
}

.lead-fields input::placeholder,
.lead-fields textarea::placeholder { color: var(--dark-mono); }

.lead-fields input:focus,
.lead-fields textarea:focus {
  outline: none;
  border-color: var(--accent-light);
}

.result-side h3 .beta-tag {
  color: var(--accent-light);
  border-color: var(--navy-chip-border);
  font-size: 11px;
  vertical-align: 4px;
}

.preorder-note {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dark-mono);
  margin: 18px 0 0;
}

/* Result of the pre-registration submit. Sits directly under the button so the
   answer appears where the visitor is already looking. */
.preorder-notice {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  margin: 12px 0 0;
  color: var(--dark-mono);
}

.preorder-notice[data-tone="success"] {
  color: #7fd6a8;
}

.preorder-notice[data-tone="error"] {
  color: #f0a58c;
}

.result-side .button.primary {
  color: var(--navy);
  background: var(--dark-text);
  margin-bottom: 12px;
}

.result-side .button.primary:hover { background: #FFFFFF; }

.result-side .button.secondary {
  color: var(--dark-text);
  border-color: var(--navy-chip-border);
}

.result-side .button.secondary:hover { border-color: var(--dark-text-soft); }

/* ---------- daily flow check ---------- */

.daily-section { position: relative; }

.daily-retro {
  border: 1px solid var(--accent-light);
  background: var(--panel-light);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 36px;
}

.daily-retro-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.daily-retro-text {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 18px;
}

.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
}

.pill:hover { border-color: var(--ink-muted); }

.pill.selected {
  background: var(--navy-btn);
  color: var(--bg);
  border-color: var(--navy-btn);
}

.daily-question {
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
}

.daily-questions .daily-question:first-child { border-top: 1px solid var(--ink); }

.daily-q-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}

.daily-q-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
}

.daily-q-title {
  font-size: 17px;
  font-weight: 500;
}

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

.daily-result {
  background: var(--navy);
  color: var(--dark-text);
  border-radius: 16px;
  padding: 40px 44px;
  margin-top: 12px;
}

.daily-result-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 12px;
}

.daily-result-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--dark-text-soft);
  margin: 0 0 26px;
  max-width: 560px;
}

.daily-comeback {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dark-mono);
  margin: 26px 0 0;
}

.daily-redo { margin-top: 10px; padding-left: 0; }

.daily-track { margin-top: 44px; }

.daily-track-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mono-muted);
  margin: 0 0 12px;
}

.week-strip {
  display: flex;
  gap: 8px;
}

.day-cell {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}

.day-cell .day-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mono-muted);
  margin-bottom: 6px;
}

.day-cell .day-mark {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--mono-muted);
}

.day-cell.logged .day-mark { color: var(--accent); }

.day-cell.today {
  border-color: var(--accent);
  background: var(--panel-light);
}

.strip-legend {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mono-muted);
  margin: 12px 0 0;
}

.strip-legend strong {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
  margin-right: 4px;
}

.daily-rhythm {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 18px 0 0;
}

.daily-rhythm a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
}

.daily-deep-link {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 36px 0 0;
}

.daily-deep-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
}

/* ---------- how it works ---------- */

.how-section { border-top: 1px solid var(--border); }

.how-section h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  margin: 0 0 72px;
  max-width: 620px;
}

.how-rows { border-top: 1px solid var(--ink); }

.how-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}

.how-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--mono-muted);
  padding-top: 4px;
}

.how-body strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.how-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
}

.how-price {
  font-family: var(--mono);
  font-size: 15px;
  padding-top: 4px;
  white-space: nowrap;
}

.how-price.free { color: var(--accent); }
.how-price.muted { color: var(--mono-muted); }

.beta-tag {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  vertical-align: 3px;
  margin-left: 6px;
  font-weight: 400;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-width: 720px;
  margin-top: 28px;
}

.days-grid > div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
}

.days-grid > div.final {
  border-color: var(--accent);
  background: var(--panel-light);
}

.days-grid .day-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mono-muted);
  margin-bottom: 6px;
}

.days-grid > div.final .day-label { color: var(--accent); }

.days-grid .day-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}

.how-link {
  display: inline-block;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
  padding-bottom: 1px;
  margin-top: 14px;
}

.how-link:hover { color: var(--navy-btn); }

/* ---------- promises ---------- */

.promises-section { border-top: 1px solid var(--border); }

.promises-section h2 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 64px;
  max-width: 620px;
}

.promises-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.promise-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.promise-label.will { color: var(--accent); }
.promise-label.never { color: var(--warn); }

.promises-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.promises-grid li {
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.promises-grid .never-list li { color: var(--ink-muted); }

.promise-close {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  max-width: 640px;
  margin: 64px 0 0;
  text-wrap: pretty;
}

/* ---------- order panel ---------- */

.order-section .section-inner { padding-top: 0; }

.order-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 48px;
}

.order-card h2 {
  font-size: 28px;
  margin: 0 0 12px;
}

.order-card > div > p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 28px;
  max-width: 640px;
}

.order-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.lead-status {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
  margin: 22px 0 0;
}

/* ---------- admin ---------- */

.admin-section { border-top: 1px solid var(--border); }

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.admin-head h2 {
  font-size: 28px;
  margin: 0 0 10px;
}

.admin-head p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
  max-width: 560px;
}

.admin-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.admin-metric {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

.admin-metric strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
}

.admin-metric span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mono-muted);
}

.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mono-muted);
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--ink);
  padding: 10px 12px;
}

.admin-table td {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  color: var(--ink-soft);
}

.csv-preview {
  display: grid;
  gap: 8px;
  margin-top: 28px;
}

.csv-preview span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mono-muted);
}

.csv-preview textarea {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #FFFFFF;
  padding: 14px;
  width: 100%;
}

/* ---------- origin ---------- */

.origin-section { border-top: 1px solid var(--border); }

.origin-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
}

.origin-visual {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid #DDE3E7;
  background: repeating-linear-gradient(-45deg, #E8EDF0 0, #E8EDF0 10px, #F1F4F6 10px, #F1F4F6 20px);
  overflow: hidden;
}

.origin-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.origin-copy h2 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 24px;
}

.origin-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.origin-copy p strong {
  font-weight: 500;
  color: var(--ink);
}

.origin-copy .button { margin-top: 8px; }

/* ---------- final CTA + footer ---------- */

.final-cta {
  background: var(--navy);
  color: var(--dark-text);
}

.final-cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 130px 32px;
  text-align: center;
}

.final-cta h2 {
  font-size: clamp(38px, 5.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.final-cta h2 em {
  font-style: italic;
  color: var(--accent-light);
}

.final-cta p {
  font-size: 16px;
  color: var(--dark-text-soft);
  margin: 0 0 44px;
}

.final-cta .button.primary {
  color: var(--navy);
  background: var(--dark-text);
  padding: 17px 36px;
}

.final-cta .button.primary:hover { background: #FFFFFF; }

.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--navy-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 32px;
  font-size: 13px;
  color: var(--dark-mono);
}

.site-footer a {
  color: var(--dark-mono);
  text-decoration: none;
  border-bottom: 1px solid var(--navy-border);
  padding-bottom: 1px;
}

.site-footer a:hover { color: var(--dark-text); }

.site-footer .footer-brand {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--dark-text);
}

.site-footer .footer-tag {
  font-family: var(--mono);
  font-size: 12px;
}

.footer-copyright {
  flex-basis: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dark-mono);
  margin-top: 10px;
}

/* ---------- legal pages / 404 ---------- */

.legal-page { min-height: 60vh; }

.legal-body { padding-top: 64px; }

.legal-body h1 {
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 28px;
}

.legal-body h2 {
  font-size: 21px;
  margin: 36px 0 10px;
}

.legal-body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.legal-alert {
  font-size: 14px;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 10px;
  padding: 14px 18px;
  background: rgba(160, 82, 82, 0.05);
}

.legal-list {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--ink);
}

.legal-list dt {
  font-size: 14px;
  font-weight: 500;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
}

.legal-list dd {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.7;
}

/* ---------- flow channel beta page ---------- */

.channel-hero {
  background: var(--navy);
  color: var(--dark-text);
}

.channel-hero .section-inner { padding: 96px 32px 110px; }

.channel-hero h1 {
  font-size: clamp(38px, 5.5vw, 56px);
  line-height: 1.1;
  margin: 0 0 24px;
}

.channel-hero p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dark-text-soft);
  max-width: 620px;
  margin: 0;
  text-wrap: pretty;
}

.channel-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  align-items: start;
}

.channel-block {
  border-top: 1px solid var(--ink);
  padding: 28px 0 12px;
}

.channel-block h2 {
  font-size: 24px;
  margin: 0 0 16px;
}

.channel-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.channel-block li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}

.channel-block li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.channel-signup {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  background: #FFFFFF;
  position: sticky;
  top: 24px;
}

.channel-signup h2 {
  font-size: 26px;
  margin: 0 0 20px;
}

.channel-price {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.channel-price span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}

.channel-price strong {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
}

.channel-price p {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 6px 0 0;
}

.channel-signup .lead-fields span { color: var(--mono-muted); }

.channel-signup .lead-fields input,
.channel-signup .lead-fields textarea {
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--chip-border);
}

.channel-signup .lead-fields input::placeholder,
.channel-signup .lead-fields textarea::placeholder { color: var(--mono-muted); }

.channel-signup .lead-fields input:focus,
.channel-signup .lead-fields textarea:focus { border-color: var(--accent); }

.channel-actions {
  display: grid;
  gap: 12px;
}

.channel-status {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
  margin: 18px 0 0;
  line-height: 1.6;
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .result-card {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 36px 28px;
  }

  .origin-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .channel-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .channel-signup { position: static; }

  .days-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 720px) {
  .site-header { padding: 12px 14px; gap: 10px; }

  .brand-logo { width: 112px; }

  /* Rightmost in the header-actions row (after the language toggle and the
     CTA button), not first -- .header-actions has no explicit order on its
     other children (both default to 0), so this alone pushes the hamburger
     to the end while preserving their relative order. */
  .nav-toggle { display: inline-flex; order: 1; }

  /* .nav-links stays in the DOM (each page already fills it with its own
     page-appropriate links) but becomes a collapsed dropdown panel instead
     of an inline row. .site-header already has position:sticky, which also
     serves as the containing block for this absolutely-positioned panel, so
     no extra positioning rule is needed on the header itself. Toggled by
     .nav-open, set via [data-nav-toggle] click handling in i18n.js. */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 4px 20px 12px;
    box-shadow: 0 16px 24px -16px rgba(19, 31, 43, 0.22);
  }

  .site-header.nav-open .nav-links { display: flex; }

  .nav-links a {
    font-size: 16px;
    padding: 15px 2px;
    border-bottom: 1px solid var(--border);
  }

  .nav-links a:last-child { border-bottom: none; }

  /* The JA CTA label ("今日のフローチェックへ") plus the language toggle
     don't both fit on one line next to the logo on real phone widths
     (~375-430px) -- confirmed overflowing off the right edge of the
     viewport on production, reported via screenshot 2026-07-17. Rather than
     shrink text until it *happens* to fit one specific device width (fragile
     against future copy/font changes and accessibility text zoom), let the
     actions cluster wrap onto its own second line, right-aligned under the
     logo. Verified against real rendered text (both languages) at 375px and
     390px-equivalent widths with no clipping before shipping. */
  .header-actions {
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }

  /* "EN"/"JP" instead of "English"/"日本語" -- frees up enough width that
     the hamburger, language toggle, and CTA fit on one row at mainstream
     phone widths (~390px+; verified with real rendered text before
     shipping). Smaller/older phones (~375px and below) still have the
     flex-wrap fallback above, same as the CTA-clipping fix. */
  .lang-toggle { padding: 6px 9px; font-size: 11px; }
  .lang-toggle .lang-full { display: none; }
  .lang-toggle .lang-short { display: inline; }

  .nav-cta { padding: 7px 12px; font-size: 12px; }

  .section-inner,
  .hero,
  .diagnosis-inner { padding-left: 20px; padding-right: 20px; }

  .section-inner { padding-top: 72px; padding-bottom: 72px; }

  .hero { padding-top: 56px; padding-bottom: 80px; }

  .problem-grid { grid-template-columns: 1fr; gap: 32px; }

  .promises-grid { grid-template-columns: 1fr; gap: 44px; }

  .how-row {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }

  .how-price {
    grid-column: 2;
    padding-top: 10px;
  }

  .days-grid { grid-template-columns: repeat(2, 1fr); }

  .mini-metrics { gap: 24px; }

  .form-head { flex-wrap: wrap; }

  .admin-head { flex-direction: column; }

  .order-card { padding: 28px 22px; }

  .legal-list { grid-template-columns: 1fr; }

  .legal-list dt { border-bottom: none; padding-bottom: 2px; }

  .legal-list dd { padding-top: 2px; }
}

/* ---------- katsuura page (extends existing patterns above) ---------- */

.katsuura-photo-band-section { border-top: 1px solid var(--border); }

.katsuura-photo-band {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 32px 0;
}

.katsuura-photo-band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 16px;
}

.katsuura-photo-band .mono-note {
  margin: 14px 0 0;
}

.room-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 56px;
}

.room-gallery figure { margin: 0; }

.room-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #DDE3E7;
}

.room-gallery figcaption {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mono-muted);
  margin-top: 10px;
}

.promise-group { margin-bottom: 32px; }

.promise-group:last-child { margin-bottom: 0; }

.note-panel {
  border: 1px solid var(--accent-light);
  background: var(--panel-light);
  border-radius: 14px;
  padding: 32px 36px;
  margin-top: 32px;
}

.note-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

.note-panel li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}

.note-panel li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.katsuura-rates {
  margin: 0 0 24px;
  border-top: 1px solid var(--navy-chip-border);
}

.katsuura-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--navy-chip-border);
}

.katsuura-rate-row span:first-child {
  font-size: 14px;
  color: var(--dark-text-soft);
}

.katsuura-rate-row span:last-child {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--dark-text);
  white-space: nowrap;
}

.katsuura-rate-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--dark-mono);
  margin: 0 0 28px;
  max-width: 560px;
}

.beds24-placeholder {
  border: 1px dashed var(--navy-chip-border);
  border-radius: 12px;
  padding: 20px 22px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--dark-mono);
}

.facility-info dl.legal-list { margin-top: 0; }

@media (max-width: 720px) {
  .room-gallery { grid-template-columns: 1fr; gap: 16px; }

  .katsuura-photo-band { padding-top: 40px; }

  .katsuura-rate-row { font-size: 14px; }
}

/* ---------- katsuura page v2: photo hero, greeting, access, faq ---------- */

.katsuura-hero-photo {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy);
}

.katsuura-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.katsuura-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(16, 35, 58, 0.9) 0%,
    rgba(16, 35, 58, 0.6) 30%,
    rgba(16, 35, 58, 0.12) 58%,
    rgba(16, 35, 58, 0.3) 100%
  );
}

.katsuura-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 32px 64px;
  width: 100%;
}

.katsuura-hero-inner .section-kicker { color: var(--accent-light); }

.katsuura-hero-inner h1 {
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.15;
  color: var(--dark-text);
  max-width: 760px;
  margin: 0 0 20px;
  text-wrap: balance;
}

.katsuura-hero-meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--dark-text-soft);
  margin: 0;
}

/* greeting (ごあいさつ) */

.greeting-section { border-top: 1px solid var(--border); }

.greeting-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 72px;
  align-items: center;
}

.greeting-visual {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid #DDE3E7;
  overflow: hidden;
}

.greeting-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.greeting-copy {
  border-left: 3px solid var(--accent);
  padding-left: 32px;
}

.greeting-copy h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  margin: 0 0 20px;
}

.greeting-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

/* shared sub-heading used inside merged rooms+amenities section */

.section-subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 64px 0 32px;
}

/* access */

.access-section { border-top: 1px solid var(--border); }

.access-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: start;
}

.access-info .legal-list { margin-top: 0; grid-template-columns: 96px 1fr; }

.access-info .legal-list dt,
.access-info .legal-list dd {
  padding-bottom: 20px;
}

.access-transport {
  margin-top: 36px;
  display: grid;
  gap: 20px;
}

.access-transport-item { border-top: 1px solid var(--border); padding-top: 16px; }

.access-transport-item:first-child {
  border-top: none;
  padding-top: 0;
}

.access-transport-item strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.access-transport-item p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

.access-route-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.access-route-list li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #DDE3E7;
  background: var(--panel-light);
}

.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* faq accordion */

.faq-section { border-top: 1px solid var(--border); }

.faq-list { border-top: 1px solid var(--ink); }

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 26px;
  max-width: 640px;
  text-wrap: pretty;
}

@media (max-width: 960px) {
  .greeting-grid,
  .access-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .katsuura-hero-photo { min-height: 72vh; }

  .katsuura-hero-inner { padding: 32px 20px 40px; }

  .greeting-copy { padding-left: 20px; }

  .map-frame { aspect-ratio: 1 / 1; }

  .access-info .legal-list { grid-template-columns: 1fr; }

  .access-info .legal-list dt { border-bottom: none; padding-bottom: 2px; }

  .access-info .legal-list dd { padding-top: 2px; }

  .faq-item summary { font-size: 15px; }
}

/* ---------- media page (members' photo sharing) ---------- */

/* Compact intro bar: on this page the gallery is the main event, so the
   title/lead copy and the sign-in CTA are deliberately smaller and lighter
   than the site's standard .hero (which stays full-size on index.html). */
.media-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 56px;
  padding-bottom: 36px;
}

.media-hero-copy { max-width: 620px; }

.media-hero-copy .kicker { margin-bottom: 10px; }

.media-hero-copy h1 {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.media-hero-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0;
}

.media-hero-auth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.media-auth-area {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.media-auth-area .button.primary {
  padding: 12px 24px;
  font-size: 14px;
}

.media-hero-auth .media-auth-message { margin: 0; }

.media-auth-status {
  font-size: 15px;
  color: var(--ink-soft);
}

.media-auth-status strong {
  color: var(--ink);
  font-weight: 500;
}

.media-auth-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mono-muted);
}

.media-auth-message {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--warn);
  margin: 16px 0 0;
}

.share-section { border-top: 1px solid var(--border); }

.share-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 48px;
}

.share-panel h2 {
  font-size: 24px;
  margin: 0 0 28px;
}

.share-field {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.share-field span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mono-muted);
}

.share-field input[type="text"] {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--chip-border);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}

.share-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.share-field input[type="file"] {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-soft);
}

.share-status {
  font-size: 14px;
  color: var(--accent);
  margin: 20px 0 0;
}

.share-status.is-error { color: var(--warn); }

.gallery-section { border-top: 1px solid var(--border); }

.gallery-section .section-inner { padding-top: 40px; }

.gallery-section .kicker { margin-bottom: 10px; }

.gallery-section h2 {
  font-size: clamp(20px, 2.4vw, 24px);
  margin: 0 0 32px;
  max-width: 640px;
}

.gallery-empty {
  border: 1px dashed var(--chip-border);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
}

.gallery-empty p {
  color: var(--ink-muted);
  font-size: 15px;
  margin: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.gallery-card {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel-light);
}

.gallery-card figcaption {
  padding: 16px 18px 18px;
}

.gallery-caption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
  word-break: break-word;
}

.gallery-caption:empty { display: none; }

.gallery-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mono-muted);
  margin: 0;
}

.gallery-actions {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

.gallery-actions button {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gallery-actions button:hover { color: var(--ink); }

.gallery-actions .gallery-delete-btn:hover { color: var(--warn); }

.gallery-edit-fields {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.gallery-edit-fields input {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--chip-border);
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}

.gallery-edit-fields input:focus {
  outline: none;
  border-color: var(--accent);
}

.gallery-edit-actions {
  display: flex;
  gap: 12px;
}

.load-more-wrap {
  text-align: center;
  margin-top: 48px;
}

/* ---------- media admin review (unlisted /admin/media-review.html) ---------- */

.admin-denied {
  border: 1px solid var(--warn);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 520px;
}

.admin-denied p {
  color: var(--warn);
  font-size: 14px;
  margin: 0;
}

.admin-thumb {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-light);
  display: block;
}

.admin-caption-cell {
  max-width: 280px;
  word-break: break-word;
}

.admin-row-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.admin-row-actions button {
  font-family: var(--sans);
  font-size: 13px;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--chip-border);
  background: #FFFFFF;
  color: var(--ink);
}

.admin-row-actions .approve-btn {
  color: var(--bg);
  background: var(--navy-btn);
  border-color: var(--navy-btn);
}

.admin-row-actions .approve-btn:hover { background: var(--navy-btn-hover); }

.admin-row-actions .reject-btn:hover {
  border-color: var(--warn);
  color: var(--warn);
}

@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .share-panel { padding: 28px 22px; }

  .media-hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 28px;
    gap: 24px;
  }

  .gallery-section .section-inner { padding-top: 28px; }

  .gallery-grid { grid-template-columns: 1fr; gap: 20px; }

  .admin-thumb { width: 72px; height: 54px; }
}

/* ---------- katsuura rooms detail page (public/katsuura-rooms.html) ---------- */

.room-modules { border-top: 1px solid var(--ink); }

.room-module {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}

.room-module-copy { margin-bottom: 28px; }

.room-module-floor {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.room-module-copy h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.room-module-copy p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}

.room-module-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.room-module-photos figure { margin: 0; }

.room-module-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #DDE3E7;
}

.room-module-photos figcaption {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mono-muted);
  margin-top: 10px;
}

/* floor plan image (shown at natural aspect ratio, not cropped) */

.floorplan-figure { margin: 0; }

.floorplan-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid #DDE3E7;
}

.floorplan-figure figcaption {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin-top: 20px;
  text-wrap: pretty;
}

/* equipment photo groups */

.equip-groups {
  display: grid;
  gap: 72px;
}

.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.equip-card { margin: 0; }

.equip-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #DDE3E7;
  background: var(--panel-light);
}

.equip-card figcaption {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mono-muted);
  margin-top: 12px;
}

.equip-groups .promise-label {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 28px;
}

/* amenity checklist (BlueFlow KATSUURA custom icon set) — compact multi-column layout */

.amenity-groups {
  column-count: 3;
  column-gap: 56px;
}

.amenity-group {
  break-inside: avoid;
  margin-bottom: 40px;
}

.amenity-group .promise-label {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--ink);
}

.amenity-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.amenity-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.amenity-row img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.amenity-row span {
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}

@media (max-width: 960px) {
  .equip-grid { grid-template-columns: repeat(2, 1fr); }

  .amenity-groups { column-count: 2; }
}

@media (max-width: 720px) {
  .room-module { padding: 40px 0; }

  .equip-grid { grid-template-columns: 1fr; gap: 16px; }

  .floorplan-figure figcaption { font-size: 13px; }

  .amenity-groups { column-count: 1; }
}

/* iOS Safari zooms the page in whenever a focused field renders below 16px,
   and the zoomed layout is then clipped at the screen edges -- the content
   does not come back until the visitor pinches out again. Every focusable
   control is pinned to 16px for that reason, including any added later that
   forgets its own rule. Fixing it with maximum-scale on the viewport would
   also work but would take away pinch-zoom from everyone. */
@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* Answer evidence and the editorial Mirror Report sample share the site palette. */
.data-note { font-size: 14px; line-height: 1.7; color: var(--ink-muted); margin: 18px 0; }
.data-note a { color: inherit; text-underline-offset: 3px; }
.result-card .data-note { color: var(--dark-text-soft); }
.result-evidence { margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--navy-chip-border); color: var(--dark-text-soft); font-size: 15px; line-height: 1.75; }
.result-evidence h3 { font-family: var(--sans); font-size: 16px; color: var(--dark-text); margin: 0 0 16px; }
.result-evidence p, .result-tie-note { font-size: 14px; line-height: 1.8; }
.result-evidence-answers { list-style: none; padding: 0; margin: 14px 0; }
.result-evidence-answers li { margin: 14px 0; }
.result-evidence-answers strong, .result-evidence-answers span { display: block; }
.result-evidence-answers strong { font-size: 13px; font-weight: 400; color: var(--dark-text-soft); }
.result-evidence-answers span { color: var(--dark-text); }
.result-evidence summary { cursor: pointer; color: var(--dark-text); padding: 8px 0; }
.result-tie-note { color: var(--dark-text-soft); margin: 20px 0; }
.sample-link { color: var(--dark-text); font-size: 15px; text-underline-offset: 4px; }
.pill:focus-visible, .result-evidence summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.daily-result-title:focus-visible, #resultType:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 6px; }
/* Keep the same centered content as the shared header, with a background
   spanning the page without the scrollbar overflow caused by 100vw. */
.mirror-sample .site-header {
  max-width: none;
  padding-inline: max(32px, calc((100% - var(--max)) / 2 + 32px));
}
.mirror-sample .site-header::before { width: 100%; }
@media (max-width: 720px) {
  .mirror-sample .site-header { padding-inline: 14px; }
}
.mirror-sample main > .section-inner { max-width: 960px; padding: 48px 32px 80px; }
.mirror-sample h1 { font-family: var(--serif); font-size: clamp(32px, 5vw, 54px); line-height: 1.3; }
.mirror-sample h2 { font-size: 30px; line-height: 1.4; margin: 0 0 20px; }
.mirror-sample h3 { font-size: 19px; }
.mirror-sample .sample-section { padding: 40px 0; border-bottom: 1px solid var(--border); }
.mirror-sample p, .mirror-sample li { overflow-wrap: anywhere; }
.sample-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.sample-note { padding: 20px 24px; border: 1px solid var(--chip-border); border-radius: 12px; background: var(--panel-light); }
.sample-evidence { margin: 24px 0; }
.sample-evidence dt { font-size: 14px; color: var(--ink-soft); margin-top: 20px; }
.sample-evidence dd { margin: 6px 0 0; font-size: 19px; }
.sample-observation { font-size: 14px; color: var(--ink-soft); padding-top: 10px; border-top: 1px solid var(--border); }
.sample-plan { list-style: none; padding: 0; display: grid; gap: 18px; }
.sample-plan > li, .sample-plan > article { padding: 22px 24px; border: 1px solid var(--border); border-radius: 12px; }
.sample-plan p { margin: 8px 0; }
@media (max-width: 640px) {
  .mirror-sample main > .section-inner { padding: 32px 20px 56px; }
  .sample-grid { grid-template-columns: minmax(0,1fr); }
  .sample-note, .sample-plan > li, .sample-plan > article { padding: 18px; }
}

/* ---------- journal: approved long-form articles ---------- */
.journal-page .site-header {
  max-width: none;
  padding-inline: max(32px, calc((100% - var(--max)) / 2 + 32px));
}
.journal-page .site-header::before { width: 100%; }
.journal-page .lang-toggle { text-decoration: none; }
.journal-skip {
  position: fixed; top: 8px; left: 16px; z-index: 200;
  padding: 10px 16px; background: var(--bg); color: var(--ink);
  transform: translateY(-160%);
}
.journal-skip:focus { transform: translateY(0); }
.journal-article { max-width: 808px; margin: 0 auto; padding: 72px 32px 88px; }
.journal-heading { padding-bottom: 36px; margin-bottom: 40px; border-bottom: 1px solid var(--border); }
.journal-heading h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.5; overflow-wrap: anywhere; text-wrap: balance; }
.journal-byline { margin: 24px 0 0; font-size: 13px; color: var(--ink-muted); }
.journal-byline span { padding-inline: 10px; }
.journal-copy { font-size: 18px; line-height: 2; overflow-wrap: anywhere; }
.journal-copy p { margin: 0 0 1.6em; }
.journal-copy blockquote {
  margin: 36px 0; padding: 22px 26px; border-left: 3px solid var(--accent);
  background: var(--panel-light); color: var(--ink-soft);
}
.journal-copy blockquote p { margin: 0; }
.journal-copy .journal-action { margin: 32px 0 48px; }
.journal-copy .button { white-space: normal; text-align: center; }
.journal-back { font-size: 14px; color: var(--accent); text-underline-offset: 4px; }
.journal-teaser { border-top: 1px solid var(--border); }
.journal-teaser .section-inner { padding-block: 64px; }
.journal-teaser h2 { max-width: 780px; font-size: clamp(26px, 3vw, 36px); line-height: 1.5; }
.journal-teaser p:not(.section-kicker) { max-width: 760px; color: var(--ink-soft); margin: 20px 0 28px; }
@media (max-width: 720px) {
  .journal-page .site-header { padding-inline: 14px; }
  .journal-article { padding: 44px 20px 60px; }
  .journal-heading { padding-bottom: 28px; margin-bottom: 32px; }
  .journal-heading h1 { font-size: 26px; }
  .journal-heading .section-kicker { font-size: 11px; letter-spacing: 0.08em; }
  .journal-copy { font-size: 17px; line-height: 1.95; }
  .journal-copy blockquote { padding: 20px; }
  .journal-teaser .section-inner { padding-block: 48px; }
}

/* Keep the expanded service navigation readable at tablet widths. */
.has-journal-nav .nav-links a { white-space: nowrap; }
@media (min-width: 721px) and (max-width: 1040px) {
  .has-journal-nav .nav-toggle { display: inline-flex; order: 1; }
  .has-journal-nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 4px 20px 12px;
    box-shadow: 0 16px 24px -16px rgba(19, 31, 43, 0.22);
  }
  .has-journal-nav.nav-open .nav-links { display: flex; }
  .has-journal-nav .nav-links a {
    font-size: 16px; padding: 15px 2px;
    border-bottom: 1px solid var(--border);
  }
  .has-journal-nav .nav-links a:last-child { border-bottom: none; }
}

/* "日本語版はこちら" hint (i18n.js), shown on the English pages to visitors
   whose browser prefers Japanese. In normal flow above the sticky
   header, so it scrolls away instead of covering content. */
.lang-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 48px 10px 16px;
  position: relative;
  background: var(--navy);
  color: var(--dark-text);
  font-size: 14px;
  line-height: 1.4;
}

.lang-hint-link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lang-hint-link:hover,
.lang-hint-link:focus-visible {
  color: var(--accent-light);
}

.lang-hint-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dark-text-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lang-hint-close:hover,
.lang-hint-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}