/*
 * LearnKoreanWith.me — page stylesheet.
 *
 * Ported from the approved wireframe (docs/design-variants/wireframe-v1.html)
 * to keep the shipped visual result identical to what was reviewed. Tokens
 * below are declared under the canonical names from
 * design-system/learnkoreanwithme/DESIGN.md; a few extra custom properties
 * (--line, --white, --card-shadow, --serif, --sans, --kr, --fs-*) are kept as
 * aliases because the component rules ported from the wireframe reference
 * them throughout — renaming every occurrence risked introducing visual
 * drift versus the reviewed markup.
 *
 * A short "functional additions" section at the bottom covers states that
 * only exist once the widget talks to the real API (loading skeletons,
 * error messaging, multi-candidate result cards, the extended interview
 * questions) — none of this existed in the static wireframe demo.
 */

:root {
  /* DESIGN.md §1 canonical tokens */
  --paper: #FCFAF4;
  --ink: #1C1917;
  --stone: #78716C;
  --border: #E7E5E4;
  --terracotta: #9A3412;
  --terracotta-dark: #7C2A0E;
  --ink-hover: #33302C;
  --paper-dim: #F5F5F4;      /* placeholder surfaces (cal grid, video frame) */
  --shimmer-mid: #F0EEE9;    /* skeleton shimmer midtone */
  --scrim: rgba(28, 25, 23, 0.55);
  --terracotta-tint: rgba(154, 52, 18, 0.08);
  --surface: #FFFFFF;

  /* Focus ring, as tokens rather than literals: any ancestor with
     overflow:hidden has to reserve room for the ring, and --focus-ring-space
     derives that room instead of restating it. Bump the width or the offset
     and the reserved space follows automatically. The +1px is slack against
     subpixel rounding at fractional zoom. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-space: calc(var(--focus-ring-width) + var(--focus-ring-offset) + 1px);

  /* Aliases used by the component CSS below (ported 1:1 from wireframe-v1) */
  --line: var(--border);
  --white: var(--surface);
  --card-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px rgba(28, 25, 23, .06);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --kr: "Gowun Batang", serif;

  /* 4-step type scale — no in-between sizes (pull-quote 1.5rem sanctioned by DESIGN.md §2) */
  --fs-display: clamp(2.75rem, 6.5vw, 4.75rem);
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-pullquote: 1.5rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  position: relative;
}

/* Whisper-level paper grain (feTurbulence, <=1.5% opacity) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.015'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

header, main, footer { position: relative; z-index: 1; }

::selection { background: var(--terracotta-tint); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--terracotta);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ————— Header ————— */
.site-head {
  padding: 1.5rem 0 0;
}
.site-head .wrap {
  display: flex;
  /* center (was baseline): the brand mark img has no text baseline */
  align-items: center;
  justify-content: space-between;
}
.site-head .brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-head .brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
}
.site-head .brand .dot { color: var(--terracotta); }
/* Segmented control (2026-07-26): bold alone didn't read as "selected" —
   the active language now gets a filled ink pill inside a bordered group. */
.lang-toggle {
  font-size: var(--fs-small);
  color: var(--stone);
  user-select: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  background: var(--white);
}
.lang-toggle .lang-on,
.lang-toggle .lang-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  line-height: 1.4;
}
.lang-toggle .lang-on {
  font-weight: 600;
  color: var(--white);
  background: var(--ink);
}
.lang-toggle .lang-off { color: var(--stone); text-decoration: none; }
.lang-toggle .lang-off:hover,
.lang-toggle .lang-off:focus-visible { color: var(--ink); text-decoration: none; background: var(--paper); }

/* ————— Shared section grammar ————— */
.section {
  padding: 7rem 0;              /* 112px — within 96–128px budget */
  border-top: 1px solid var(--line);
}
.kicker-sec {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.75rem;
}
.section h2 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: var(--fs-lead);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.section .sec-sub {
  color: var(--stone);
  max-width: 38rem;
}
.ph-note {
  font-size: var(--fs-small);
  color: var(--stone);
  font-style: italic;
}

/* Pull-quote component (DESIGN.md §2) — Fraunces italic, ink, wide vertical margin */
.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 560;
  font-size: var(--fs-pullquote);
  line-height: 1.4;
  color: var(--ink);
  max-width: 38rem;
  margin: 3rem auto;
  text-align: center;
}

/* ————— ① Hook (pre-hero strip) ————— */
.hook {
  padding: 3rem 0 0;
}
.hook .pullquote { margin: 0 auto; }

.hero-wrap { position: relative; width: 100%; }
.pullquote--left { text-align: left; margin: 2rem 0; }

/* ————— ② Hero ————— */
.hero {
  position: relative;
  min-height: calc(100svh - 4.5rem);
  display: flex;
  align-items: center;
  padding: 4rem 0 6rem;
}

/* Name cloud — static scattered hangul names, right ~45% of hero */
.name-cloud {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 45%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.nc {
  position: absolute;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  white-space: nowrap;
}
.nc-cap {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: rgba(120, 113, 108, 0.4);
  margin-top: 0.15rem;
}
/* Per-name: font / size ladder (one 9rem max) / opacity ladder 4–12% / sparse rotation */
.nc-1  { top: 2%;  left: 6%;  font-family: "Hahmlet", serif;           font-size: 5rem;    color: rgba(28,25,23,.08); }
.nc-2  { top: 10%; left: 54%; font-family: "Song Myung", serif;        font-size: 4rem;    color: rgba(28,25,23,.10); transform: rotate(2deg); }
.nc-3  { top: 22%; left: 32%; font-family: "Nanum Pen Script", cursive; font-size: 6rem;   color: rgba(28,25,23,.12); }
.nc-4  { top: 37%; left: 6%;  font-family: "Nanum Myeongjo", serif;    font-size: 9rem;    color: rgba(28,25,23,.06); }
.nc-5  { top: 42%; left: 68%; font-family: "Song Myung", serif;        font-size: 3.5rem;  color: rgba(28,25,23,.07); transform: rotate(-6deg); }
.nc-6  { top: 58%; left: 48%; font-family: var(--kr);                  font-size: 3rem;    color: rgba(28,25,23,.05); }
.nc-7  { top: 64%; left: 10%; font-family: "Nanum Myeongjo", serif;    font-size: 4.5rem;  color: rgba(28,25,23,.09); transform: rotate(-2deg); }
.nc-8  { top: 75%; left: 36%; font-family: "Hahmlet", serif;           font-size: 2.5rem;  color: rgba(28,25,23,.04); }
.nc-9  { top: 83%; left: 62%; font-family: var(--kr);                  font-size: 3.25rem; color: rgba(28,25,23,.11); }
.nc-10 { top: 88%; left: 10%; font-family: "Hahmlet", serif;           font-size: 2.75rem; color: rgba(154,52,18,.10); transform: rotate(4deg); }

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: left;
}

.kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: italic;
  font-weight: 560;
  /* brand-color emphasis (live-gate feedback #3) — with the buttons moved to
     ink, terracotta in the headline marks the one phrase that matters */
  color: var(--terracotta);
}

/* teacher-bio name hook — echoes the hero em emphasis so "…o seu nome, Pedro."
   reads as the same brand phrase the headline opened with (2026-07-30) */
.name-hook {
  font-style: italic;
  font-weight: 560;
  color: var(--terracotta);
}

.curiosity {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  max-width: 34rem;
}

.subhead {
  font-size: var(--fs-body);
  color: var(--stone);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.clara {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.clara-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clara-avatar--photo {
  background: none;
  object-fit: cover;
  border: 1px solid var(--line);
}
.clara-line {
  font-size: var(--fs-small);
  color: var(--stone);
}
.clara-line strong { color: var(--ink); font-weight: 600; }

.cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* Button color system (live-gate feedback #3): every button defaults to ink;
   terracotta is reserved for the trial-booking CTAs (.btn-accent — the
   booking card + the mobile fixed bar) so the single conversion action owns
   the brand color. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.btn-primary .arrow {
  display: inline-block;
  transition: transform 200ms ease;
}
.btn-primary:hover { background: var(--ink-hover); }
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: var(--stone);
  cursor: not-allowed;
}
.btn-primary:disabled:hover,
.btn-primary[aria-disabled="true"]:hover { background: var(--stone); }
.btn-primary:disabled:hover .arrow,
.btn-primary[aria-disabled="true"]:hover .arrow { transform: none; }

.btn-accent { background: var(--terracotta); }
.btn-accent:hover { background: var(--terracotta-dark); }

/* In-flight state (live-gate feedback #2): the arrow swaps for a spinner and
   the button keeps its own color — stone would read as "not allowed". */
.btn-primary.is-loading:disabled { background: var(--ink); cursor: progress; }
.btn-accent.is-loading:disabled { background: var(--terracotta); }
.btn-primary.is-loading .arrow { display: none; }
.btn-primary.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid rgba(252, 250, 244, 0.35);
  border-top-color: var(--white);
  border-radius: 999px;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.link-secondary {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.link-secondary:hover { border-bottom-color: var(--ink); }

/* Load motion: fade-up 12px, 80ms stagger, 400ms ease-out (motion budget ①) */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 400ms ease-out forwards;
}
.fade-up.d1 { animation-delay: 80ms; }
.fade-up.d2 { animation-delay: 160ms; }
.fade-up.d3 { animation-delay: 240ms; }
.fade-up.d4 { animation-delay: 320ms; }
.fade-up.d5 { animation-delay: 400ms; }
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ————— ② Widget ————— */
.widget-section {
  padding: 0 0 7rem;
}

.widget {
  max-width: 46rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 2rem 1.25rem 2.25rem;
}

.widget-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--stone);
  margin-bottom: 1.25rem;
}

.widget-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.input-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.input-row input {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.input-row input::placeholder { color: var(--stone); }
.input-row input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-tint);
}

/* Reveal stages (motion budget ②: widget state transitions, 8px · 300ms stagger)
   Height animates via grid-template-rows 0fr→1fr, not a capped max-height. The
   old `max-height: 90rem` (1440px) sized the BOX while `overflow: visible` let
   the CONTENT render past it, so stage3 with three candidate cards (1635-1663px
   at 320-375px wide) spilled 195-223px over the next section — burying the exit
   CTA under the teachers heading on /, and under the video poster (untappable)
   on /pt. Only viewports under 390px were affected, which is why desktop QA
   never saw it. 1fr resolves to the content height, so the box can no longer be
   shorter than what it contains. */
.stage {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: grid-template-rows 300ms ease-out, opacity 300ms ease-out, transform 300ms ease-out;
  scroll-margin-top: 1.25rem;   /* breathing room when the widget scrolls a stage into view */
  /* overflow:hidden is what keeps a collapsed row from leaking, but it also
     clips focus rings on controls sitting flush with the stage edge — the
     first chip of every row, and the exit CTA. Reserve the ring's width via
     --focus-ring-space, cancelled by an equal negative margin so nothing
     moves; .widget's 1.25rem side padding absorbs the overhang. Derived from
     the ring tokens rather than hardcoded, so raising the outline can't
     silently re-clip it. */
  padding: 0 var(--focus-ring-space);
  margin: 0 calc(-1 * var(--focus-ring-space));
}
.stage > .stage-inner {
  min-height: 0;                            /* let the grid row shrink to 0fr */
  padding-bottom: var(--focus-ring-space);  /* ring room for the last control */
}
/* min-height:0 zeroes the content box but NOT the padding, so a collapsed row
   still measures 2.25rem — five stages leave 180px of dead space in the hero
   card. Drop the inner padding while collapsed so 0fr really is zero. */
.stage:not(.open) > .stage-inner { padding-top: 0; padding-bottom: 0; }
.stage.open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.stage.open.s2 { transition-delay: 250ms; }
.stage.open.s3 { transition-delay: 500ms; }

.stage-inner { padding-top: 2.25rem; }

.stage-title {
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}

/* Act 1 card */
.act1 {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
}
.act1 .your-name {
  font-size: var(--fs-small);
  color: var(--stone);
}
.act1 .hangul {
  font-family: var(--kr);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 3.25rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0.25rem 0 0.1rem;
}
.act1 .roman {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--stone);
  margin-bottom: 1rem;
}

.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  /* 0.7rem vertical -> >=44px touch target (DT7) */
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.audio-btn:hover { border-color: var(--stone); }
.audio-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.audio-btn:disabled:hover { border-color: var(--line); }
.audio-btn.is-loading:disabled { cursor: progress; opacity: 1; }
.audio-btn.is-loading .icon-circle svg { display: none; }
.audio-btn.is-loading .icon-circle::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid rgba(252, 250, 244, 0.35);
  border-top-color: var(--white);
  border-radius: 999px;
  animation: btn-spin 700ms linear infinite;
}
.audio-btn .icon-circle {
  width: 1.6rem; height: 1.6rem; flex: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.audio-btn .icon-circle svg { width: 0.75rem; height: 0.75rem; margin-left: 2px; }
.audio-btn .audio-meta { opacity: .55; font-weight: 400; }

.bridge {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  font-weight: 560;
  color: var(--ink);
  max-width: 32rem;
  margin-top: 1.75rem;
}

/* Interview */
.interview-q {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  margin-bottom: 0.9rem;
}
.interview-q .note {
  font-weight: 400;
  color: var(--stone);
}
.interview-group + .interview-group { margin-top: 1.75rem; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.chip {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(120, 113, 108, 0.45);
  border-radius: 999px;
  /* 0.7rem vertical brings chip height to >=44px (DT7 touch target) */
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.chip:hover { border-color: var(--stone); }
.chip[aria-pressed="true"] {
  background: var(--terracotta-tint);
  border-color: var(--terracotta);
  color: var(--terracotta);
}
.chip:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.interview-hint {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.9rem;
}
.interview-actions {
  margin-top: 1.75rem;
}

/* Act 2 card */
.act2-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.act2-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem 1.25rem 1.25rem;
  max-width: 26rem;
}
.act2-card.is-selected {
  border-color: var(--ink);
  box-shadow: var(--card-shadow);
}
.act2-card .hangul-big {
  font-family: var(--kr);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 4rem);
  line-height: 1.15;
  color: var(--ink);
}
.act2-card .roman {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--stone);
  margin-bottom: 0.6rem;
}
.act2-card .meaning {
  font-size: var(--fs-body);
  color: var(--stone);
  margin-bottom: 1.25rem;
}
.act2-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  /* 0.7rem vertical -> >=44px touch target (DT7) */
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.share-btn:hover { background: var(--ink-hover); }
.share-btn svg { width: 0.95rem; height: 0.95rem; }
.choose-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-small);
  /* 0.7rem vertical -> >=44px touch target (DT7) */
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  transition: border-color 180ms ease;
}
.choose-btn:hover { border-color: var(--stone); }
.act2-card.is-selected .choose-btn {
  border-color: var(--ink);
  color: var(--ink);
}
.act2-card .engrave {
  font-family: var(--serif);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--stone);
}

.act2-bridge {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lead);
  font-weight: 560;
  color: var(--ink);
  max-width: 32rem;
  margin-top: 1.75rem;
}
.act2-bridge .go-aulas {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.act2-bridge .go-aulas:hover { border-bottom-color: var(--terracotta); }

/* Video facade placeholder (below widget) */
.video-facade {
  max-width: 46rem;
  margin: 3rem auto 0;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-dim);
  border: 1px dashed var(--stone);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-play {
  width: 64px;
  height: 64px;
  border-radius: 999px;              /* pill radius: circular play button (audio-family) */
  background: var(--ink);            /* ink — not terracotta (accent whitelist) */
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video-play svg { width: 1.4rem; height: 1.4rem; margin-left: 4px; }
.video-ph-label {
  position: absolute;
  left: 1rem;
  bottom: 0.75rem;
  font-size: var(--fs-small);
  color: var(--stone);
  font-style: italic;
}
.video-caption {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.75rem;
  text-align: center;
}

/* ————— ③ Antes → Depois ————— */
.cards-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.shift-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem 1.5rem;
}
.shift-card .lbl {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.25rem;
}
.shift-card .antes {
  color: var(--stone);
  margin-bottom: 1rem;
}
.shift-card .seta {
  color: var(--stone);
  font-size: var(--fs-small);
  margin-bottom: 1rem;
}
.shift-card .depois {
  font-weight: 600;
  color: var(--ink);
}

/* ————— ④ A Clara ————— */
.clara-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
  align-items: start;
}
.clara-photo {
  aspect-ratio: 3 / 4;
  max-width: 20rem;
  background: var(--paper-dim);
  border: 1px dashed var(--stone);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-size: var(--fs-small);
  font-style: italic;
}
.clara-story p {
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 1.25rem;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.trust-item .num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);
}
.trust-item .cap {
  font-size: var(--fs-small);
  color: var(--stone);
}
.clara-quote { text-align: left; margin: 3rem 0 0; }

/* ————— EN /en teachers section (JKI-201/E3) ————— */
.teachers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}
.teacher-card {
  position: relative; /* anchors .teacher-avatar top-right */
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem 1.5rem;
  /* flex column so the CTA bottom-aligns across side-by-side cards of
     unequal content length (grid rows stretch to equal height) */
  display: flex;
  flex-direction: column;
}
.teacher-avatar {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.teacher-avatar--initial {
  background: var(--terracotta);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher-card .name-line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);
  padding-right: 4.75rem; /* keep clear of the avatar */
}
.teacher-card .badge {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.15rem;
}
.teacher-card .tz-line,
.teacher-card .bio { color: var(--ink); margin-top: 1rem; }
.teacher-card .bio { margin-bottom: 1.25rem; }
.teacher-card .teacher-cta { margin-top: auto; align-self: flex-start; }
.teacher-card a.btn-primary.teacher-cta { display: inline-flex; }

/* ————— EN /en booking teacher-select (JKI-201/E3) ————— */
.teacher-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.teacher-tab {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--stone);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}
.teacher-tab:hover { border-color: var(--stone); }
.teacher-tab[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--terracotta);
  background: var(--terracotta-tint);
  /* 선택 상태 보더를 시각 2px로 (2026-07-28 사용자 지시) — border-width를
     늘리면 탭 크기가 1px씩 밀리므로 inset shadow로 겹쳐 레이아웃 불변 */
  box-shadow: inset 0 0 0 1px var(--terracotta);
}

/* ————— ⑤ Como funciona ————— */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--ink);
  padding-top: 1.25rem;
}
.step .n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-lead);
  color: var(--ink);            /* step numbers in ink — never terracotta */
  margin-bottom: 0.5rem;
}
.step h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  margin-bottom: 0.35rem;
}
.step p {
  font-size: var(--fs-small);
  color: var(--stone);
}

/* ————— ⑥ Testemunhos ————— */
.testi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.testi-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--ink);
  flex: 1;
}
.testi-card .who {
  font-size: var(--fs-small);
  color: var(--stone);
}

/* ————— ⑦ Reservar (main CTA) ————— */
.reservar-card {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 2rem 1.25rem;
}
/* one price per line (live-gate feedback #6) — the anchor (normal price)
   above, the trial offer below, each readable at a glance */
.price-anchor {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
}
.price-anchor .normal { display: block; color: var(--stone); font-weight: 400; }
.price-anchor .trial { display: block; }
.includes {
  list-style: none;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.6rem;
}
.includes li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--ink);
}
.includes li::before {
  content: "—";
  color: var(--stone);
  flex: none;
}
.personal-line {
  color: var(--stone);
  margin-bottom: 1.5rem;
}
.cal-embed {
  border: 1px dashed var(--stone);
  border-radius: 12px;
  background: var(--paper-dim);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  max-width: 18rem;
  margin: 0 auto 1rem;
}
.cal-grid span {
  aspect-ratio: 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* author display:grid는 UA의 [hidden]{display:none}을 이기므로 명시 필요 —
   없으면 임베드 로드 후에도 스켈레톤이 영원히 보이는 버그 (2026-07-27 실예약 검수) */
.cal-grid[hidden] { display: none; }
.cal-caption {
  font-size: var(--fs-small);
  color: var(--stone);
}
.reservar-cta-row { margin-top: 1.5rem; text-align: center; }
/* 모바일: 예약 임베드가 좌우 공간을 최대로 쓰도록 3중 패딩 축소
   (wrap 1.25 + card 1.25 + embed 1.25rem이 겹쳐 뷰포트 1/3이 여백이었음) */
@media (max-width: 640px) {
  .reservar-card { padding: 1.5rem 0.75rem; }
  .cal-embed { padding: 1.25rem 0.5rem; }
}

/* ————— ⑧ Email (second track) ————— */
.email-inner { max-width: 40rem; }
.email-form { margin-top: 2rem; }
.field-label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-body);
  margin-bottom: 0.6rem;
}
.email-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.email-row input[type="email"] {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.email-row input[type="email"]:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px var(--terracotta-tint);
}
.btn-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-body);
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.btn-ink:hover { background: var(--ink-hover); }
.btn-ink:disabled { background: var(--stone); cursor: not-allowed; }
.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  max-width: 36rem;
}
.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--terracotta);
}
.consent label {
  font-size: var(--fs-small);
  color: var(--stone);
  line-height: 1.55;
}
/* 2026-07-26 opt-in-less pivot item 6: one-time-use email microcopy (pt/en
   _email_capture partials). .consent above is now dead CSS -- the checkbox
   it styled was removed same day -- left in place, harmless. */
.email-micro {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.email-aux {
  margin-top: 2rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.email-status {
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.email-status[hidden] { display: none; }

/* ————— ⑨ FAQ ————— */
.faq-list {
  max-width: 44rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  min-height: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .mark { color: var(--stone); flex: none; }
.faq-list details[open] summary .mark .plus { display: none; }
.faq-list details:not([open]) summary .mark .minus { display: none; }
.faq-list .faq-a {
  padding: 0 0 1.25rem;
  color: var(--stone);
  max-width: 38rem;
}

/* ————— Footer ————— */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 3rem 0 6rem;
  font-size: var(--fs-small);
  color: var(--stone);
}
.site-foot .foot-main {
  display: flex;
  align-items: flex-start; /* badge tops-aligns with the links row */
  gap: 1.1rem;
}
.site-foot .foot-logo {
  display: block;
  flex: none;
  /* 이전 세로 실루엣(~66px)의 크기감 유지 (2026-07-27 사용자: "그 전 크기가
     크고 좋았는데") — 두 줄 텍스트보다 살짝 큰 60px */
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
}
.site-foot .foot-body {
  flex: 1;
  min-width: 0;
}
/* 링크 행 + 연락처 행을 배지(60px)와 같은 높이로: 첫 줄은 배지 상단,
   둘째 줄은 배지 하단에 정렬 (2026-07-27 사용자 지시) */
.site-foot .foot-id {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.site-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0;
}
.site-foot .foot-contact { margin-bottom: 0; }
.site-foot a {
  color: var(--stone);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.site-foot a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.site-foot p { margin-bottom: 0.25rem; }
.site-foot .foot-legal {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--stone);
  opacity: 0.75;
}
.site-foot .foot-legal p { margin-bottom: 0; }

/* ————— Mobile fixed CTA bar (mobile only; price allowed here — DT9) ————— */
.fixed-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
}
.fixed-cta .btn-primary {
  width: 100%;
  justify-content: center;
}

/* ————— Back-to-top button (live-gate feedback #7) ————— */
.back-to-top {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 11;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--ink-hover); }
.back-to-top svg { width: 1.1rem; height: 1.1rem; }

/* ————— Responsive ————— */
@media (max-width: 767px) {
  .hero { min-height: 0; padding: 3.5rem 0 5rem; }
  /* Keep only the 4 most subtle names, shrunk behind the headline */
  .name-cloud { width: auto; left: 0; }
  .nc { display: none; }
  .nc-4, .nc-5, .nc-6, .nc-8 { display: flex; }
  .nc-4 { top: 1%;  left: 48%; font-size: 4.5rem; }
  .nc-5 { top: 18%; left: 6%;  font-size: 2.5rem; }
  .nc-6 { top: 32%; left: 58%; font-size: 2.25rem; }
  .nc-8 { top: 46%; left: 18%; font-size: 2rem; }
  .nc-cap { display: none; }
  .section { padding: 6rem 0; }   /* 96px — lower edge of budget */
  .fixed-cta.visible { display: block; }
  /* single line even at 320px (codex review 2026-07-24: a wrapped label makes
     the bar taller than the offsets below and the back-to-top button overlaps
     it) — smaller type, vertical padding keeps the >=44px touch target */
  .fixed-cta .btn-primary {
    white-space: nowrap;
    font-size: var(--fs-small);
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  body.has-fixed-cta { padding-bottom: 5rem; }
  /* lift the back-to-top button above the fixed CTA bar */
  body.has-fixed-cta .back-to-top { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

@media (min-width: 640px) {
  .input-row { flex-direction: row; }
  .input-row input { flex: 1; }
  .input-row .btn-primary { flex: none; }
  .cta-row { flex-direction: row; align-items: center; gap: 1.75rem; }
  .widget { padding: 2.5rem 2.75rem 2.75rem; }
  .email-row { flex-direction: row; }
  .email-row input[type="email"] { flex: 1; }
  .email-row .btn-ink { flex: none; }
}

@media (min-width: 768px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .clara-grid { grid-template-columns: 20rem 1fr; }
  .teachers-grid { grid-template-columns: repeat(2, 1fr); }
  .reservar-card { padding: 2.5rem 2.75rem; }
  .act2-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ————— Reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none; opacity: 1; transform: none; }
  .stage, .btn-primary, .btn-primary .arrow, .link-secondary, .chip,
  .audio-btn, .share-btn, .choose-btn, .input-row input, .act2-bridge .go-aulas,
  .email-row input, .btn-ink, .site-foot a, .skeleton-line, .back-to-top {
    transition: none;
    animation: none;
  }
  /* keep the in-flight spinner spinning — it conveys state, not decoration */
  .btn-primary.is-loading::after,
  .audio-btn.is-loading .icon-circle::after { animation: btn-spin 700ms linear infinite; }
}

/* ═════════════════════════════════════════════════════════════════════
   Functional additions beyond wireframe v1 (real API wiring, JKI-150)
   ═════════════════════════════════════════════════════════════════════ */

/* Loading skeleton (Act 1 / Act 2 fetch in flight) — no new accent color,
   just a stone-toned shimmer on the existing card surface. */
.skeleton-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
}
.skeleton-line {
  height: 1rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, var(--shimmer-mid) 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  margin-bottom: 0.6rem;
}
.skeleton-line.short { width: 40%; }
.skeleton-line.tall { height: 2.5rem; width: 60%; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.skeleton-caption {
  font-size: var(--fs-small);
  color: var(--stone);
  margin-top: 0.75rem;
}

/* Error state — stone/ink only, no new accent (DESIGN.md §1 whitelist) */
.widget-error {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 1.25rem 1.25rem;
  color: var(--ink);
  font-size: var(--fs-body);
}
.widget-error a { color: var(--ink); text-decoration: underline; }
.widget-error[hidden] { display: none; }

/* Budget screen. Takes the skeleton's place in the act-2 slot when the
   session's naming budget is spent, so it lands where the visitor is already
   looking. Reads as the widget's last screen, not as an error. */
.widget-done { display: grid; gap: 0.85rem; justify-items: start; }
/* author display must not beat the hidden attribute — this class of bug has
   already shipped twice here (cal-grid 07-27, locale-suggest 07-30) */
.widget-done[hidden] { display: none; }
.widget-done-title { font-weight: 600; font-size: var(--fs-lead); color: var(--ink); }
.widget-done-names {
  font-family: var(--kr);
  font-size: var(--fs-body);
  /* deliberately ink, not terracotta: DESIGN.md §1 reserves the accent for the
     booking CTA, chips, audio buttons and link hover. A terracotta line sitting
     directly above the terracotta button would split the one signal that says
     "this is the thing to press". */
  color: var(--ink);
  line-height: 1.5;
}
.widget-done-names[hidden] { display: none; }
.widget-done-body { color: var(--stone); }
.widget-done-alt[hidden] { display: none; }
/* .widget-error a forces ink + underline on every link in the box (0,1,1 beats
   .btn-primary's 0,1,0), which rendered this CTA as underlined near-black on
   terracotta — 2.39:1, below the 4.5:1 floor. Restore the button's own
   treatment; the box rule still owns the plain links. */
.widget-done .btn-primary {
  margin-top: 0.15rem;
  color: var(--white);
  text-decoration: none;
}
/* the secondary route stays a link, not a second button — one CTA carries the
   weight, per DESIGN.md's single-primary rule — but it still needs a 44px
   touch target, which a bare inline link does not have */
.widget-done .link-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Toggle-style chip group used for anchor (Q3): identical chip visuals,
   exactly one of two can be pressed. */
.anchor-toggle { display: flex; flex-wrap: wrap; gap: 0.55rem; }

/* The widget itself was split into its own section (separate from
   .widget-section, now used only by _video.html.erb) so the two could
   become distinct partials without changing the wireframe's total vertical
   rhythm: zero padding here, .video-facade's own 3rem top margin plus the
   video section's 7rem bottom padding reproduce the original spacing. */
.widget-block { padding: 0; }

/* 결과 카드 아래 인라인 이메일 회수 (2026-08-21). 완주 179건에 이메일 4건
   이었던 이유는 마찰이 아니라 정상 경로에 요청이 없어서였다. 카드와 다음
   단계(act2-bridge) 사이에 두되, 위젯 자체 CTA보다 조용하게 — 실선 하나로
   구분만 하고 배경색은 주지 않는다. */
.act2-keep {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.act2-keep-lead {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.act2-keep .email-form { margin-top: 0.75rem; }

/* Quiet onward link to the /pt/nome-em-coreano tool page (2026-08-11). It sits
   BELOW the widget so it never outranks the widget's own CTAs, and it is
   deliberately not a button: the widget's conversion path (act2-bridge →
   #aulas, doneBox → #reservar) stays the loudest thing on this screen. Muted
   + small so it reads as a footnote, not a fourth competing call to action. */
.widget-aside {
  padding: 1.75rem 0 0;
  font-size: var(--fs-small);
  color: var(--stone);
}
.widget-aside .link-secondary { font-size: inherit; }

/* Honeypot field (ET2) — kept in the layout flow (not display:none) so it
   still gets filled by naive bots, but invisible and unreachable for people. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* interim stock imagery (functional additions) */
.clara-photo--img { padding: 0; overflow: hidden; }
.clara-photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-frame--poster { background-size: cover; background-position: center; }
.video-frame--poster .video-ph-label { background: var(--scrim); color: #FCFAF4; padding: .2rem .6rem; border-radius: 6px; }
/* Cal.com lazy embed (DT5) */
/* 라이브 전환 후에는 placeholder 치장(점선 테두리·회색 배경·안쪽 패딩)을 걷어
   iframe이 카드 폭을 그대로 쓰게 한다 (2026-07-27 모바일 실예약 검수) */
.cal-embed--live {
  min-height: 560px;
  border: 0;
  background: transparent;
  padding: 0;
}
.cal-fallback { margin-top: .75rem; font-size: .875rem; color: var(--stone); }
.cal-fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cal-fallback a:hover { color: var(--terracotta); }

/* privacy page — minimal type conformance (Fraunces headings + measure) */
.privacy-page { padding: 4rem 1.25rem 6rem; max-width: 44rem; }
.privacy-page h1 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.privacy-page h2 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: var(--fs-lead);
  margin: 2.5rem 0 0.75rem;
}
.privacy-page p, .privacy-page li { margin-bottom: 0.75rem; }
.privacy-page ul { padding-left: 1.25rem; }
.privacy-page a { color: var(--ink); }
.privacy-page .legal-notice {
  font-size: var(--fs-small);
  color: var(--stone);
  margin: 1rem 0;
}
.privacy-page .legal-notice p { margin-bottom: 0.15rem; }

/* ————— /alunos (students-only booking, option B) ————— */
.alunos-page { padding: 4rem 1.25rem 6rem; max-width: 46rem; }
.alunos-page h1 {
  font-family: var(--serif);
  font-weight: 580;
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.alunos-sub { color: var(--stone); margin-bottom: 2rem; max-width: 34rem; }
.alunos-error { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--terracotta-dark); }
.alunos-help { margin-top: 2rem; font-size: var(--fs-small); color: var(--stone); }
.alunos-help a, .alunos-page .cal-fallback a { color: var(--ink); }

/* placeholder testimonial marker (removed when real quotes arrive) */
.testi-tag { font-size: 0.75rem; color: var(--stone); border: 1px solid var(--border); border-radius: 999px; padding: 0 .5rem; margin-left: .4rem; vertical-align: middle; }

/* locale suggestion bar — EN root only, shown to Portuguese browsers by
   locale_suggest_controller (2026-07-30 로케일 개편; no cookies, no Vary) */
/* author display가 UA [hidden]을 이기는 함정 — cal-grid 스켈레톤(2026-07-27)과
   같은 부류. display를 주는 요소에 hidden을 쓰면 반드시 이 명시가 필요하다. */
.locale-suggest[hidden] { display: none; }
.locale-suggest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.locale-suggest p { margin: 0; }
.locale-suggest a { font-weight: 600; }
.locale-suggest-close {
  border: 0;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--stone);
  padding: 0.15rem 0.4rem;
}

/* P1 tool page — /pt/nome-em-coreano (2026-07-31) */
.tool-hero { padding-bottom: 0; }
.tool-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.15; margin: 0.5rem 0 0; }
.breadcrumb { font-size: var(--fs-small); color: var(--stone); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--stone); }
.tool-explain h2, .tool-cta h2 { margin-top: 2.25rem; }
.table-scroll { overflow-x: auto; }
.sound-map { border-collapse: collapse; margin: 1rem 0; width: 100%; }
.sound-map th, .sound-map td { text-align: left; padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sound-map th { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; color: var(--stone); }
.tool-cta { padding-bottom: 3rem; }