/* =========================================================
   SOSHUNDO PLASTIC SURGERY — Design tokens & shared styles
   ========================================================= */

:root{
  /* ---- color: SOSHUNDO brand — muted stone, antique gold, warm clay ----
     Softened from an earlier brighter ivory/gold/rose pass toward a
     quieter, more editorial warm-neutral palette (references a refined
     architectural/clinical aesthetic) — same gold identity as SOSHUNDO's
     own printed materials, just deepened and desaturated, with the pink
     secondary swapped for a warmer terracotta so the two accents read as
     one restrained earth-tone family rather than gold+rose jewelry tones. */
  --bg:        #FAF7F1;
  --bg-alt:    #F1EAE0;
  --surface:   #FFFFFF;
  --text:      #2E2A26;
  --text-muted:#84776A;
  --accent:    #A9814A;   /* SOSHUNDO gold, deepened */
  --accent-2:  #A97C63;   /* warm clay/terracotta */
  --line:      rgba(46,42,38,0.10);
  --line-strong: rgba(46,42,38,0.22);
  --on-accent: #FFFCF7;
  --shadow: 0 24px 48px -24px rgba(46,42,38,0.20);

  /* ---- type ---- */
  --font-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-small: 0.85rem;
  --fs-body: 1rem;
  --fs-lead: 1.15rem;
  --fs-h4: 1.25rem;
  --fs-h3: 1.6rem;
  --fs-h2: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);

  --maxw: 1180px;
  --gutter: max(20px, 5vw);
  --radius: 2px;
}

/* SOSHUNDO's own brand materials (newsletters, signage) commit to one
   ivory-and-gold palette with no dark variant — this site follows suit by
   design, now pitched at a quieter, more editorial saturation. */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; font-weight:500; }
/* The gothic body face read a little plain/generic at its default browser
   weight next to the serif headlines. A lighter weight plus a touch of
   letter-spacing on running paragraph text (not buttons, nav, or labels,
   which keep their own explicit weight/tracking) reads closer to the
   quieter, more editorial gothic seen in premium clinic sites. */
p{ font-weight:300; letter-spacing:.01em; }
/* manual line breaks inside headline copy are an editorial choice for wide
   screens; on narrow phones they can land mid-phrase once the text also
   wraps on its own, so they're dropped in favor of text-wrap:balance. */
br.br-editorial{ display:none; }
@media (min-width:640px){
  br.br-editorial{ display:inline; }
}
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--fs-eyebrow); letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); display:inline-block; }

.lead{ font-size:var(--fs-lead); color:var(--text-muted); max-width:60ch; }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.9em; font-size:var(--fs-small); letter-spacing:.08em;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:transparent; color:var(--text); transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); border-color:var(--accent); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-lg{ padding:1.15em 2.6em; font-size:1.02rem; font-weight:500; letter-spacing:.06em; }
@media (max-width:640px){
  /* Buttons were left-aligned and sized to their own label, so any row of
     two or more (hero CTAs, "院長紹介を見る" / "手術へのこだわりを見る",
     the closing button rows on procedure pages, the newsletter card's
     "PDFを読む", …) sat at different widths with a ragged left edge. On
     phone width, stack every button row full-width with centered labels. */
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn, .btn-row .btn-instagram{ width:100%; justify-content:center; }
  .issue-card .btn{ align-self:stretch; justify-content:center; }
}

/* ---------------- Instagram button (footer / mobile menu) ----------------
   A distinct filled pill — reads as "go to Instagram" at a glance rather
   than blending into the plain outline .btn style — but built from the
   site's own gold/clay accent tokens (not the loud official Instagram
   gradient) so it stays in the same soft, editorial palette as the rest
   of the page. */
.btn-instagram{
  display:inline-flex; align-items:center; gap:.65em;
  padding:.85em 1.7em; font-size:var(--fs-small); font-family:var(--font-body);
  letter-spacing:.03em; font-weight:500; line-height:1.2;
  border:none; border-radius:999px; color:var(--on-accent); white-space:nowrap;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 8px 18px rgba(169,124,99,.22);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-instagram svg{ width:1.15em; height:1.15em; flex:none; }
.btn-instagram:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 10px 22px rgba(169,124,99,.32); filter:brightness(1.04); }

/* ---------------- header ---------------- */
/* Transparent over the top of the page — on the homepage that means the
   photo shows through behind it — and only turns white/opaque once the
   page is scrolled (.is-scrolled below). */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:22px;
  border-bottom:1px solid transparent;
  transition:background .4s ease, padding .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled{
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
  padding-block:14px;
  border-color:var(--line);
  box-shadow:0 2px 16px rgba(46,42,38,.06);
}
/* .nav-mobile (the full-screen menu panel) is position:fixed with its own
   z-index, which makes it a *positioned* box. Positioned boxes always
   paint above plain, non-positioned siblings regardless of z-index
   numbers — so without this, .wrap (and the close/X toggle button inside
   it) silently sat UNDER the open menu panel and was never actually
   reachable, no matter what color it was drawn in. */
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  position:relative; z-index:101;
}

.logotype{ display:flex; flex-direction:column; line-height:1.15; }
.logotype .ja{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:.04em; transition:color .3s ease; }
.logotype .en{ font-size:.68rem; letter-spacing:.1em; color:var(--text-muted); margin-top:3px; transition:color .3s ease; }

/* Only on the homepage: before scrolling, the header sits transparent over
   the full-bleed hero photo, so the normal dark "Dr.Miura" wordmark would
   nearly vanish against it. Once .is-scrolled adds the header's light
   backing, the text is back on a plain, light background and the default
   dark color reads fine again, so this only needs to apply for that first,
   transparent moment. */
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .logotype .ja,
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .logotype .en,
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .nav-desktop a,
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .header-actions .tel-link,
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .header-actions .tel-link strong{
  color:var(--on-accent);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .nav-desktop a::after{
  background:var(--on-accent);
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .nav-desktop a[aria-current="page"]{
  color:var(--on-accent);
}
/* Scoped to .header-actions .tel-link specifically — .nav-mobile has its
   own, unrelated <a class="tel-link"> for the big phone number inside the
   open menu panel, and this rule must never touch that one (it isn't part
   of the transparent-hero header state at all, and a bare `.tel-link`
   selector was bleeding into it and washing the number out to near-white
   on the menu's light background). */
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .header-actions .tel-link .tel-sub{
  color:rgba(255,253,249,.78); text-shadow:0 1px 4px rgba(0,0,0,.5);
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .menu-toggle{
  border-color:rgba(255,253,249,.55);
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled) .menu-toggle span{
  background:var(--on-accent);
}
/* While the full-screen mobile menu is open, it paints its own solid
   light backdrop behind the (still-transparent) header, so the white
   hamburger/close icon and logotype from the rule above would go
   invisible against it. Snap those two back to their normal dark
   styling for as long as the menu panel is open. */
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled):has(.nav-mobile.is-open) .logotype .ja,
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled):has(.nav-mobile.is-open) .logotype .en{
  color:var(--text); text-shadow:none;
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled):has(.nav-mobile.is-open) .logotype .en{
  color:var(--text-muted);
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled):has(.nav-mobile.is-open) .menu-toggle{
  border-color:var(--line-strong);
}
body:has(main > .hero-modern:first-child) .site-header:not(.is-scrolled):has(.nav-mobile.is-open) .menu-toggle span{
  background:var(--text);
}

.nav-desktop{ display:none; flex-shrink:0; min-width:0; }
.nav-desktop ul{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; }
.nav-desktop a{
  font-size:.84rem; letter-spacing:.02em; position:relative; padding-block:4px; white-space:nowrap;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent);
  transition:right .3s ease;
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ right:0; }
.nav-desktop a[aria-current="page"]{ color:var(--accent); }

/* Both the wordmark and the phone pill need to stay on one line — if the
   flex row (.site-header .wrap) runs short on space, .nav-desktop's own
   nowrap items already refuse to shrink, so without this the squeeze would
   otherwise land on these two and wrap their text mid-word instead. */
.logotype{ flex-shrink:0; }
.logotype .ja, .logotype .en{ white-space:nowrap; }

.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.tel-link{ display:none; font-size:.86rem; letter-spacing:.03em; white-space:nowrap; }
.tel-link strong{ font-family:var(--font-display); font-size:1rem; margin-left:.4em; }
.tel-link .tel-sub{ display:block; font-size:.66rem; color:var(--text-muted); letter-spacing:.04em; margin-top:2px; text-align:right; white-space:nowrap; }
.nav-mobile .tel-sub{ font-size:.72rem; color:var(--text-muted); letter-spacing:.02em; margin-top:6px; }

/* ---------------- phone-reservation icon (site-wide) ----------------
   A receiver glyph inside a thin outlined circle — both the ring and the
   glyph are painted in one SVG mask (currentColor), so the badge always
   matches whatever button/link it sits in (outline, filled, or the
   header pill below) and needs no extra markup on any page. A border
   can't be combined with mask on the same box (mask would cut the ring
   wherever the glyph doesn't cover it), so the ring is drawn as part of
   the masked artwork itself instead of a real CSS border. */
.tel-link[href^="tel:"]::before,
a.btn[href^="tel:"]::before{
  content:"";
  display:inline-flex; flex:none;
  width:1.9em; height:1.9em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='14' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M12.2 10.8h2.2l1.1 3-1.5 1.1a8 8 0 0 0 4.7 4.7l1.1-1.5 3 1.1v2.2a1.4 1.4 0 0 1-1.5 1.4A12.5 12.5 0 0 1 10.8 12.3a1.4 1.4 0 0 1 1.4-1.5z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/88% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='14' stroke='black' stroke-width='1.3'/%3E%3Cpath d='M12.2 10.8h2.2l1.1 3-1.5 1.1a8 8 0 0 0 4.7 4.7l1.1-1.5 3 1.1v2.2a1.4 1.4 0 0 1-1.5 1.4A12.5 12.5 0 0 1 10.8 12.3a1.4 1.4 0 0 1 1.4-1.5z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/88% no-repeat;
}
/* filled tel buttons ("カウンセリングのご予約" etc.) get the same soft
   gold/clay glow already used on .btn-instagram, for a touch more polish
   without changing the site's flat, sharp-cornered button shape */
a.btn-primary[href^="tel:"]{ box-shadow:0 6px 16px rgba(169,124,99,.18); }
a.btn-primary[href^="tel:"]:hover{ box-shadow:0 9px 20px rgba(169,124,99,.26); }

/* header CTA: the one phone link visible on every page — upgraded from
   plain text to a filled pill (same gold→clay gradient family as the
   Instagram pill) so it reads as the primary action at a glance */
.header-actions .tel-link{
  align-items:center; gap:.55em;
  padding:.6em 1.15em .56em;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:var(--on-accent);
  box-shadow:0 6px 16px rgba(169,124,99,.24);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.header-actions .tel-link .tel-sub{ color:rgba(255,253,249,.82); text-align:left; }
.header-actions .tel-link:hover{ transform:translateY(-2px); box-shadow:0 9px 20px rgba(169,124,99,.32); filter:brightness(1.03); }

.menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:38px; height:38px; background:none; border:1px solid var(--line-strong); border-radius:50%;
}
.menu-toggle span{ width:14px; height:1px; background:var(--text); margin-inline:auto; transition:transform .3s ease, opacity .3s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:84px var(--gutter) 32px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.nav-mobile.is-open{ opacity:1; visibility:visible; transform:none; }
.nav-mobile ul{ display:flex; flex-direction:column; gap:10px; }
.nav-mobile a{ font-family:var(--font-display); font-size:1.28rem; }
.nav-mobile .tel-link{ display:flex; align-items:center; gap:.5em; margin-top:22px; color:var(--text-muted); }
/* .nav-mobile a sets a large display-font size for the nav links; without
   this override that cascades into .btn-instagram (class-specificity tie,
   later rule wins) and blows the pill button's text out past its edges. */
.nav-mobile .insta-link{ display:inline-flex; margin-top:16px; font-size:var(--fs-small); font-family:var(--font-body); }

@media (min-width:900px){
  .nav-desktop{ display:block; }
  .menu-toggle{ display:none; }
  .tel-link{ display:block; }
  .header-actions .tel-link{ display:inline-flex; }
}
@media (min-width:900px) and (max-width:1199px){
  /* The nav links + wordmark + full phone pill don't all comfortably fit
     in this mid-desktop range, so the pill's subtitle line is the first
     thing to go — the phone number itself stays fully visible and
     clickable either way, just without the "24時間受付中" caption. */
  .header-actions .tel-link .tel-sub{ display:none; }
}

/* ---------------- hero ---------------- */
.hero{
  position:relative; padding-block:168px 96px; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .wrap{ display:grid; gap:40px; }
.hero-motif{ position:absolute; right:-6%; top:8%; width:min(52vw,620px); opacity:.55; pointer-events:none; }
.hero-motif path, .hero-motif circle{ fill:none; stroke:var(--accent); stroke-width:1; }
.hero h1{ font-size:var(--fs-h1); margin-top:22px; }
.hero .lead{ margin-top:22px; }
.hero .btn-row{ margin-top:36px; }
.page-hero{ padding-block:150px 70px; }
.page-hero h1{ font-size:var(--fs-h1); }

/* hero with a photograph fading in from the right — gradient stops use the --bg
   color's own rgb value directly (251,248,242) since this site has one fixed
   bright theme; update these rgb values too if --bg ever changes. */
.hero-photo{
  background:
    linear-gradient(to right,
      rgba(251,248,242,1) 0%,
      rgba(251,248,242,1) 52%,
      rgba(251,248,242,.55) 62%,
      rgba(251,248,242,.22) 71%,
      rgba(251,248,242,.05) 80%,
      rgba(251,248,242,0) 92%),
    url('assets/photos/miura-desk.jpg') center right / cover no-repeat;
}
.hero-photo-mobile{ display:none; }
@media (max-width:860px){
  /* on narrow screens the photo becomes a faint watermark sitting behind the
     text, rather than a separate image below it — same rgb note as above. */
  .hero-photo{
    position:relative;
    background:
      linear-gradient(rgba(251,248,242,.87), rgba(251,248,242,.87)),
      url('assets/photos/miura-desk-mobile.jpg') center 20% / cover no-repeat;
    padding-block:168px 60px;
  }
  .hero-photo-mobile{ display:none; }
}

.profile-banner{ margin:0; border-radius:var(--radius); overflow:hidden; }
.profile-banner img{ width:100%; height:auto; display:block; }
.profile-banner figcaption{
  margin-top:14px; font-size:.78rem; letter-spacing:.08em; color:var(--text-muted); text-align:center;
}

.photo-grid{ display:grid; gap:28px; margin:0; }
@media (min-width:720px){ .photo-grid{ grid-template-columns:repeat(3,1fr); } }
.photo-grid figure{ margin:0; }
.photo-grid img{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-radius:var(--radius);
}
.photo-grid figcaption{
  margin-top:12px; font-size:.78rem; letter-spacing:.05em; color:var(--text-muted); text-align:center;
}

.hero-split .wrap{ grid-template-columns:1.05fr 0.95fr; align-items:center; gap:56px; }
.hero-figure{ position:relative; }
.hero-figure img{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 30px rgba(46,42,38,0.12)); }
@media (max-width:860px){
  .hero-split .wrap{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; max-width:320px; margin-inline:auto; }
}

/* ---------------- sections ---------------- */
section{ padding-block:96px; }
.section-alt{ background:var(--bg-alt); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:var(--fs-h2); margin-top:18px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head.center .eyebrow{ justify-content:center; }

/* alternating sections pick up the soft rose accent instead of gold, so the
   gold/rose brand pair both read through the page rather than gold alone
   carrying every accent role. */
.section-alt .eyebrow{ color:var(--accent-2); }
.section-alt .eyebrow::before{ background:var(--accent-2); }

/* ---------------- homepage: distinct background bands ----------------
   Newsletter / Instagram / Access sit back to back on the homepage; each
   gets its own subtly-tinted background (rather than sharing one alt tone)
   so the boundary between blocks reads clearly while scrolling. */
.tone-cream{ background:color-mix(in srgb, var(--accent) 16%, var(--bg-alt)); }
.tone-blush{ background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tone-gold{ background:color-mix(in srgb, var(--accent) 15%, var(--bg-alt)); }
.section-alt .info-note{ border-left-color:var(--accent-2); }

/* ---------------- hero: warm / handwritten variant (draft) ----------------
   Full-bleed photo hero with a handwritten-style catchcopy, used as a design
   option for a softer, more current first view. Requires the 'Klee One'
   Google Font to be linked in the page's <head>. */
.hero-warm{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  overflow:hidden; border-bottom:1px solid var(--line);
}
.hero-warm .hero-warm-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(46,42,38,.08) 0%, rgba(46,42,38,.14) 45%, rgba(46,42,38,.50) 100%),
    url('assets/photos/miura-interior-wide.jpg') center 38% / cover no-repeat;
}
.hero-warm .wrap{ position:relative; z-index:1; padding-block:64px 64px; }
.hero-warm .eyebrow{ color:var(--on-accent); }
.hero-warm .eyebrow::before{ background:var(--on-accent); }
.hero-warm .handwritten{
  display:block; font-family:'Klee One', var(--font-display); font-weight:600;
  color:var(--on-accent); font-size:clamp(2.6rem, 1.5rem + 4.8vw, 5.4rem);
  line-height:1.38; margin-top:22px; text-shadow:0 8px 28px rgba(0,0,0,.18);
}
.hero-warm .lead{ color:rgba(255,253,249,.94); margin-top:22px; max-width:46ch; }
.hero-warm .btn-row{ margin-top:34px; }
.hero-warm .btn{ border-color:rgba(255,253,249,.55); color:var(--on-accent); }
.hero-warm .btn:hover{ border-color:var(--on-accent); }
.hero-warm .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.66rem; letter-spacing:.3em; color:var(--on-accent); opacity:.88;
}
.scroll-cue::after{
  content:""; width:1px; height:34px; background:rgba(255,253,249,.65);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  60%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}
@media (max-width:860px){
  .hero-warm{ min-height:80vh; }
  .hero-warm .wrap{ padding-block:48px 52px; }
}
.section-alt .timeline .year{ color:var(--accent-2); }

.divider{ border:none; border-top:1px solid var(--line); margin-block:0; }

/* ---------------- philosophy / split ---------------- */
.split{
  display:grid; gap:48px; align-items:center;
}
.split > *{ min-width:0; }
@media (min-width:860px){ .split{ grid-template-columns:0.9fr 1.1fr; gap:80px; } }
.split-figure{
  aspect-ratio:4/5; border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-alt), var(--surface));
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.split-figure svg{ position:absolute; inset:0; width:100%; height:100%; }
.split-figure-rose{
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--bg-alt), var(--surface));
}
.split-figure img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  position:absolute; inset:0;
}
.split-figure-photo{
  aspect-ratio:4/3; background:none; border:none; overflow:visible; padding:0; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.split-figure-photo img{
  position:static; width:100%; height:100%; object-fit:contain; object-position:50% 50%;
  border-radius:var(--radius);
  filter:drop-shadow(0 18px 32px rgba(46,42,38,0.16));
}

/* ---------------- treatment cards ---------------- */
.card-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:720px){ .card-grid{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:var(--surface); padding:0 0 44px; display:flex; flex-direction:column; gap:16px;
  transition:background .3s ease;
}
.card:hover{ background:var(--bg-alt); }
.card-thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-alt); margin-bottom:6px; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; }
.card .num, .card h3, .card p, .card .price, .card .more{ margin-inline:34px; }
.card .num{ font-family:var(--font-display); font-size:.8rem; color:var(--accent); letter-spacing:.1em; }
.card:not(:has(.card-thumb)) .num{ margin-top:34px; }
.card h3{ font-size:var(--fs-h4); }
.card p{ color:var(--text-muted); font-size:.94rem; flex:1; }
.card .price{ font-size:.85rem; color:var(--text-muted); border-top:1px solid var(--line); padding-top:14px; font-variant-numeric:tabular-nums; }
a.price{ display:block; transition:color .25s ease; }
a.price:hover{ color:var(--accent); }
.card .more{ font-size:.82rem; letter-spacing:.05em; color:var(--accent); }

/* ---------------- horizontal scroll row ----------------
   Lets a homepage preview section show more items (5 treatments, 5
   newsletter issues) without growing the section's scroll height: cards
   scroll sideways instead of wrapping onto more rows. To make that scrolling
   obvious at a glance (not just a peeking card), this pairs three cues: a
   fixed prev/next control bar below the row (shown on every screen size,
   not just desktop), soft edge fades that show/hide as the row scrolls
   (wired up by initHScroll() in script.js, which also toggles disabled
   state and a one-time attention pulse on the next button), and hint text.
   Applied as a modifier on top of .card-grid / .newsletter-grid, overriding
   their grid layout with a snapping flex row. */
.hscroll-wrap{ position:relative; }
.hscroll{
  display:flex; gap:1px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll > *{ scroll-snap-align:start; flex:0 0 auto; }

.card-grid.hscroll{ display:flex; }
.card-grid.hscroll > .card{ width:min(300px, 78vw); }
@media (min-width:720px){ .card-grid.hscroll > .card{ width:calc((100% - 4px)/3.3); } }

.newsletter-grid.hscroll{ display:flex; }
.newsletter-grid.hscroll > .issue-card{ width:min(260px, 74vw); }
@media (min-width:720px){ .newsletter-grid.hscroll > .issue-card{ width:calc((100% - 4px)/3.3); } }

.hscroll-wrap::before,
.hscroll-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:44px; z-index:1; pointer-events:none;
  transition:opacity .25s ease;
}
.hscroll-wrap::before{ left:0; background:linear-gradient(to right, var(--bg-alt), transparent); }
.hscroll-wrap::after{ right:0; background:linear-gradient(to left, var(--bg-alt), transparent); }
.hscroll-wrap.at-start::before{ opacity:0; }
.hscroll-wrap.at-end::after{ opacity:0; }

.hscroll-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:24px; }
.hscroll-hint{ font-size:.8rem; letter-spacing:.03em; color:var(--accent); font-weight:500; }

.hscroll-btn{
  position:relative; z-index:2; flex:none;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--accent); color:var(--on-accent); font-size:1.35rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, black);
  transition:background .25s ease, opacity .25s ease, transform .2s ease;
}
.hscroll-btn:hover{ background:var(--text); transform:translateY(-1px); }
.hscroll-btn:disabled{ opacity:.3; pointer-events:none; box-shadow:none; }

/* A short, one-time nudge on the next button — three quick pulses on load —
   makes it obvious the row itself scrolls. It stops the moment the row is
   scrolled or the button is used, and the cards never move on their own, so
   this is not an auto-advancing carousel. */
@keyframes hscroll-pulse{
  0%, 100%{ box-shadow:0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, black); }
  50%{ box-shadow:0 10px 22px -12px color-mix(in srgb, var(--accent) 70%, black), 0 0 0 9px color-mix(in srgb, var(--accent) 25%, transparent); }
}
.hscroll-btn.next.pulse{ animation:hscroll-pulse 1.3s ease-in-out 3; }
@media (prefers-reduced-motion: reduce){
  .hscroll-btn.next.pulse{ animation:none; }
}

/* two-up card grid for contour/eyes sub-treatments */
.card-grid-2{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .card-grid-2{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- gallery ---------------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-row button{
  padding:.5em 1.2em; border:1px solid var(--line-strong); border-radius:999px; background:none; color:var(--text-muted); font-size:.82rem; letter-spacing:.03em;
  transition:all .25s ease;
}
.filter-row button[aria-pressed="true"], .filter-row button:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
.gallery-item{ border:1px solid var(--line); background:var(--surface); }
a.gallery-item{ display:block; color:inherit; text-decoration:none; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
a.gallery-item:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px); }
.gallery-thumb{ aspect-ratio:4/3; background:linear-gradient(150deg,var(--bg-alt),var(--surface)); position:relative; overflow:hidden; }
.gallery-thumb svg{ position:absolute; inset:0; margin:auto; width:44%; opacity:.5; }
/* Real before/after case photo, shown as two halves of the thumbnail
   rather than a single image, so the change reads at a glance even
   before opening the case's own detail page. */
.gallery-thumb-photo{ display:flex; }
.gallery-thumb-photo img{ width:50%; height:100%; object-fit:cover; object-position:50% 50%; }
.gallery-cap{ padding:18px 20px; }
.gallery-cap .tag{ font-size:.72rem; color:var(--accent); letter-spacing:.1em; }
.gallery-cap p{ margin-top:6px; font-size:.9rem; }
.gallery-note{
  margin-top:56px; padding:28px 30px; border:1px solid var(--line); background:var(--bg-alt);
  font-size:.86rem; color:var(--text-muted); line-height:1.9;
}

/* ---------------- case report (before / after) ---------------- */
.case-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:640px; margin-inline:auto; }
.case-compare figure{ margin:0; }
.case-compare .case-photo{
  aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); background:var(--bg-alt); border:1px solid var(--line);
}
.case-compare .case-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.case-compare figcaption{ margin-top:14px; text-align:center; font-size:.86rem; }
.case-points{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin:0; }
.case-points li{
  display:flex; align-items:baseline; gap:8px; padding:10px 18px; border:1px solid var(--line);
  border-radius:999px; font-size:.84rem; background:var(--surface);
}
.case-points .num{ font-family:var(--font-display); color:var(--accent); font-size:.72rem; letter-spacing:.04em; }

/* ---------------- price table ---------------- */
.price-block + .price-block{ margin-top:64px; }
.price-block h3{ font-size:var(--fs-h3); margin-bottom:6px; }
.price-block .note{ color:var(--text-muted); font-size:.86rem; margin-bottom:26px; }
table.price-table{ width:100%; border-collapse:collapse; }
.price-table th{ text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:500; padding-bottom:14px; border-bottom:1px solid var(--line-strong); }
.price-table td{ padding:20px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.price-table td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:20px; }
.price-table .item-name{ font-family:var(--font-display); font-size:1.02rem; }
.price-table .item-desc{ font-size:.84rem; color:var(--text-muted); margin-top:6px; max-width:52ch; }
.overflow-x{ overflow-x:auto; }

/* ---------------- profile / timeline ---------------- */
.timeline{ display:flex; flex-direction:column; }
.timeline li{ display:grid; grid-template-columns:96px 1px 1fr; gap:26px; padding-block:22px; }
.timeline li:not(:last-child){ border-bottom:1px solid var(--line); }
.timeline .year{ font-family:var(--font-display); font-size:1.05rem; padding-top:2px; font-variant-numeric:tabular-nums; }
.timeline .rule{ background:var(--line-strong); }
.timeline .desc h4{ font-size:1rem; font-weight:500; font-family:var(--font-body); }
.timeline .desc p{ color:var(--text-muted); font-size:.9rem; margin-top:6px; }

.tag-list{ display:flex; flex-wrap:wrap; gap:10px; }
.tag-list li{ border:1px solid var(--line-strong); padding:.5em 1.1em; font-size:.82rem; border-radius:999px; color:var(--text-muted); }

/* ---------------- news / newsletter ---------------- */
.news-list li{
  display:grid; grid-template-columns:auto 1fr; gap:28px; padding-block:30px; border-bottom:1px solid var(--line);
}
.news-list time{ font-family:var(--font-display); color:var(--accent); font-variant-numeric:tabular-nums; font-size:.92rem; padding-top:2px; white-space:nowrap; }
.news-list h3{ font-size:1.05rem; font-weight:500; font-family:var(--font-body); }
.news-list .cat{ display:inline-block; font-size:.68rem; letter-spacing:.08em; color:var(--text-muted); border:1px solid var(--line-strong); border-radius:999px; padding:.25em .8em; margin-bottom:10px; }
.news-list p{ color:var(--text-muted); font-size:.92rem; margin-top:8px; }
@media (max-width:560px){ .news-list li{ grid-template-columns:1fr; gap:8px; } }

.newsletter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.issue-card{ background:var(--surface); padding:0 0 30px; display:flex; flex-direction:column; gap:14px; }
.issue-card > *:not(.thumb){ margin-inline:30px; }
.issue-card .vol{ margin-top:24px; font-family:var(--font-display); font-size:.78rem; color:var(--accent); letter-spacing:.12em; }
.issue-card h3{ font-size:1.1rem; }
.issue-card .meta{ font-size:.8rem; color:var(--text-muted); }
/* Titles wrap to one or two lines depending on length, which used to leave
   the "PDFを読む" button sitting at a different height card to card.
   Pushing it to the bottom of the flex column keeps every button in the
   row aligned regardless of how much text sits above it. */
.issue-card .btn{ margin-top:auto; align-self:flex-start; }
.issue-card .thumb{ aspect-ratio:595/842; width:100%; overflow:hidden; background:var(--bg-alt); margin:0; border-bottom:1px solid var(--line); }
.issue-card .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
@media (max-width:640px){
  /* on phones the grid is a single column, so a full A4-page thumbnail makes
     each card very tall and the newsletter list scrolls a long way — crop to
     roughly the top half of the page (still enough to read as "a PDF issue")
     instead of the full page. */
  .issue-card .thumb{ aspect-ratio:595/440; }
}

/* newsletter.html's full back-number list: a stack of horizontal rows
   (thumbnail + headline + link) rather than the compact card grid used for
   the homepage's 3-item preview — set by renderNewsletters() adding
   .nl-detailed when the mount has no data-limit. */
.newsletter-grid.nl-detailed{
  display:flex; flex-direction:column; gap:16px;
  background:none; border:none;
}
.nl-row{
  position:relative; display:flex; align-items:center; gap:26px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:20px 26px; box-shadow:0 16px 36px -26px rgba(46,42,38,.28);
}
.nl-row-thumb{
  flex:none; width:88px; aspect-ratio:600/848; border-radius:8px; overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--line);
}
.nl-row-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.nl-row-body{ flex:1 1 auto; min-width:0; }
.nl-row-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; }
.nl-new{
  display:inline-flex; align-items:center; padding:.3em .85em; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-size:.64rem; font-weight:700; letter-spacing:.1em;
}
.nl-vol{ font-family:var(--font-display); font-size:.76rem; letter-spacing:.1em; color:var(--accent); }
.nl-date{ font-size:.76rem; color:var(--text-muted); }
.nl-row h3{ margin-top:8px; font-size:1.14rem; line-height:1.44; }
.nl-sub{ margin-top:4px; font-size:.86rem; color:var(--text-muted); }
.nl-row-link{
  flex:none; margin-left:auto; padding-left:20px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-body); font-size:.86rem; font-weight:500; color:var(--accent); white-space:nowrap;
}
.nl-row-link:hover{ text-decoration:underline; }
@media (max-width:640px){
  .nl-row{ flex-wrap:wrap; padding:16px 18px; gap:14px; border-radius:12px; }
  .nl-row-thumb{ width:64px; }
  .nl-row-body{ flex-basis:calc(100% - 64px - 14px); }
  .nl-row-link{ flex-basis:100%; margin-left:0; padding-left:0; justify-content:flex-end; }
}

.about-newsletter{
  margin-top:70px; padding:40px; border:1px solid var(--line); background:var(--bg-alt);
  display:grid; gap:20px;
}
@media (min-width:760px){ .about-newsletter{ grid-template-columns:1fr 1fr; } }
.about-newsletter h3{ font-size:1.15rem; }
.about-newsletter p{ color:var(--text-muted); font-size:.9rem; }

/* ---------------- access / map ---------------- */
/* A ghost of the clinic interior showing faintly through the section's
   gold wash — low-opacity, desaturated toward the warm palette, and
   multiply-blended so it reads as a soft watermark rather than a photo,
   never competing with the text sitting on top of it. */
.access-veil{ position:relative; overflow:hidden; }
.access-veil .access-veil-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.access-veil .access-veil-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block;
  opacity:.24; mix-blend-mode:multiply;
  filter:sepia(28%) saturate(.9) brightness(1.22) contrast(.92);
}
/* The text column only ever occupies the left ~640px (.wrap below caps at
   max-width:640px), so — same technique as .hero-modern-scrim — repaint
   solid tone-gold over that side to lift the photo's texture out from
   behind the copy, and let the photo read clearly on the right, which is
   otherwise-empty space earmarked for a real entrance photo later. */
.access-veil::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 15%, var(--bg-alt)) 0%,
    color-mix(in srgb, var(--accent) 15%, var(--bg-alt)) 40%,
    transparent 68%);
}
.access-veil > .wrap{ position:relative; z-index:1; }
@media (max-width:640px){
  .access-veil .access-veil-bg img{ opacity:.16; }
  /* Below ~640px the text column is effectively the whole section width,
     so the scrim covers (almost) everything rather than fading partway. */
  .access-veil::after{
    background:color-mix(in srgb, var(--accent) 15%, var(--bg-alt));
  }
}

/* --text on --tone-gold is fine, but the dt labels use --accent (gold) —
   close enough in hue to this section's own gold-tinted background that
   they read as faint even before the photo veil is added. Darken them
   here only; --accent labels elsewhere sit on plain --bg/--surface where
   the contrast is already good. */
.access-veil .info-rows dt{
  color:color-mix(in srgb, var(--accent) 55%, var(--text) 45%);
}

/* This section's buttons sit over a photo-tinted, textured background,
   where the site-wide transparent/outline .btn all but disappears. A
   solid surface fill keeps them reading clearly as buttons no matter
   what's showing through behind them. */
.access-veil .btn{
  background:var(--surface); border-color:var(--line-strong);
}
.access-veil .btn:hover{ background:var(--bg-alt); border-color:var(--accent); }

.access-grid{ display:grid; gap:48px; }
.access-grid > *{ min-width:0; }
@media (min-width:880px){ .access-grid{ grid-template-columns:1fr 1fr; } }
.info-rows dt{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-top:26px; }
.info-rows dt:first-child{ margin-top:0; }
.info-rows dd{ margin:8px 0 0; font-size:1rem; }
.info-rows dd + dt{ margin-top:26px; }

/* Homepage ACCESS teaser: the phone number is the section's real call to
   action (it's how a reservation actually starts), so it reads larger and
   bolder than the surrounding address details rather than blending in. */
.access-tel{
  display:inline-block; font-family:var(--font-display); font-size:1.7rem;
  font-weight:600; letter-spacing:.03em; color:var(--accent); line-height:1.3;
}
@media (min-width:640px){ .access-tel{ font-size:2rem; } }

.map-card{
  border:1px solid var(--line); background:var(--bg-alt); aspect-ratio:4/3; position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:34px;
}
.map-card .pin{ width:34px; height:34px; margin-bottom:18px; }
.map-card p{ font-size:.86rem; color:var(--text-muted); max-width:32ch; }
.map-card .btn{ margin-top:20px; }
.map-card-embed{ padding:0; overflow:hidden; }
.map-card-embed iframe{ width:100%; height:100%; border:0; display:block; }
.map-card-wrap .btn{ margin-top:16px; display:block; text-align:center; }

/* Edge-to-edge Google Map strip: sits outside .wrap so it spans the full
   viewport width instead of being boxed into the page's content column. */
.map-section{ border-top:1px solid var(--line); }
.map-embed-full{ width:100%; height:340px; }
.map-embed-full iframe{ width:100%; height:100%; border:0; display:block; }
@media (min-width:640px){ .map-embed-full{ height:420px; } }
@media (min-width:1100px){ .map-embed-full{ height:480px; } }
.map-cta-wrap{ padding-block:28px; text-align:center; }
.map-cta-wrap .btn{ display:inline-block; }

/* ---------------- instagram ---------------- */
.insta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
@media (min-width:640px){ .insta-grid{ grid-template-columns:repeat(6,1fr); } }
.insta-tile{ aspect-ratio:1; background:linear-gradient(160deg,var(--bg-alt),var(--surface)); position:relative; overflow:hidden; }
.insta-tile svg{ position:absolute; inset:0; margin:auto; width:34%; opacity:.5; }
/* aspect-ratio guarantees a visible fallback height (SnapWidget's own embed
   ratio) even if the widget's auto-resize script doesn't fire; when it does
   fire, its inline height on the iframe itself overrides this. */
.insta-embed{ width:100%; margin-top:44px; border:1px solid var(--line); aspect-ratio:1260/629; overflow:hidden; }
.insta-embed iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){
  .insta-embed{ aspect-ratio:3/4; }
}
.insta-cta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }

/* ---------------- footer ---------------- */
.site-footer{
  /* literal color, not var(--text) — --text itself is redefined below for
     this scope, and background would otherwise resolve against that new
     (light) value instead of the page's normal dark one, washing out to
     near-white-on-near-white */
  background:#2E2A26; border-top:none; padding-block:80px 32px; margin-top:0;
  /* scoped token overrides: everything below reads these instead of the
     light-mode values, so headings, muted labels, hairlines and the
     Instagram .btn all flip to a dark-footer palette automatically */
  --text:var(--on-accent);
  --text-muted:rgba(255,253,249,.62);
  --line:rgba(255,253,249,.14);
  --line-strong:rgba(255,253,249,.4);
  color:var(--text);
}
.footer-grid{ display:grid; gap:44px; }
.footer-grid > *{ min-width:0; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-grid h4{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:500; margin-bottom:18px; font-family:var(--font-body); }
.footer-grid li{ margin-bottom:10px; font-size:.9rem; }
.footer-grid a:hover{ color:var(--accent); }
.footer-brand .en{ font-size:.68rem; letter-spacing:.24em; color:var(--text-muted); margin-top:8px; }
.footer-bottom{ margin-top:64px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; font-size:.78rem; color:var(--text-muted); }

/* ---------------- reveal-on-scroll ---------------- */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
}

/* ---------------- placeholder / preparing ---------------- */
.prep-note{
  display:flex; gap:14px; align-items:flex-start;
  border:1px dashed var(--line-strong); background:var(--bg-alt); padding:20px 22px; font-size:.86rem; color:var(--text-muted); margin-top:18px;
}
.prep-note strong{ color:var(--text); font-weight:500; }

.info-note{
  border-left:3px solid var(--accent); background:var(--surface);
  padding:26px 30px; font-size:.94rem; line-height:1.9;
}
.info-note p+p{ margin-top:12px; }

/* ---------------- publications accordion ---------------- */
.pub-accordion{ display:flex; flex-direction:column; gap:14px; }
.pub-group{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.pub-group summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; font-family:var(--font-display); font-size:1.08rem;
}
.pub-group summary::-webkit-details-marker{ display:none; }
.pub-group summary .count{
  font-family:var(--font-body); font-size:.78rem; color:var(--text-muted);
  border:1px solid var(--line-strong); border-radius:999px; padding:.25em .9em; flex:none;
}
.pub-group summary .chev{ font-size:.8rem; color:var(--accent); transition:transform .3s ease; flex:none; margin-left:auto; }
.pub-group[open] summary .chev{ transform:rotate(90deg); }
.pub-group summary{ margin-left:0; }
.pub-group summary .count{ margin-left:auto; }
.pub-group summary .chev{ margin-left:14px; }

.citation-list{ list-style:none; border-top:1px solid var(--line); }
.citation-item{
  display:grid; grid-template-columns:2.4em 1fr; gap:16px;
  padding:20px 26px; border-bottom:1px solid var(--line);
}
.citation-item:last-child{ border-bottom:none; }
.citation-item .idx{ font-family:var(--font-display); color:var(--accent); font-size:.95rem; padding-top:1px; }
.citation-item .authors{ font-size:.82rem; color:var(--text-muted); }
.citation-item .title{ margin-top:4px; font-size:.95rem; line-height:1.7; }
.citation-item .journal{ margin-top:6px; font-size:.82rem; color:var(--accent-2); font-style:italic; }

.pres-list{ list-style:none; border-top:1px solid var(--line); }
.pres-item{ padding:20px 26px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:8.5em 1fr; gap:16px; }
.pres-item:last-child{ border-bottom:none; }
.pres-item .date{ font-family:var(--font-display); font-size:.88rem; color:var(--text-muted); padding-top:1px; font-variant-numeric:tabular-nums; }
.pres-item .meeting{ font-size:.78rem; color:var(--accent); letter-spacing:.02em; }
.pres-item .session{ font-size:.72rem; color:var(--text-muted); border:1px solid var(--line-strong); border-radius:999px; padding:.1em .8em; margin-left:.6em; }
.pres-item .title{ margin-top:6px; font-size:.95rem; line-height:1.7; }
.pres-item .presenters{ margin-top:6px; font-size:.8rem; color:var(--text-muted); }

@media (max-width:640px){
  .citation-item, .pres-item{ grid-template-columns:1fr; gap:6px; padding:18px 20px; }
  .citation-item .idx{ font-size:.85rem; }
  .pub-group summary{ padding:18px 20px; font-size:1rem; }
}

.disclaimer{ font-size:.78rem; color:var(--text-muted); line-height:2; border-top:1px solid var(--line); padding-top:26px; margin-top:56px; }

/* ---------------- simple numbered steps (facility guides, etc.) ---------------- */
.step-list{ display:flex; flex-direction:column; gap:28px; }
.step-item{ display:flex; gap:20px; }
.step-item .step-num{
  flex:0 0 auto; width:2.4em; height:2.4em; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.05rem; font-weight:600;
}
.step-item .step-body{ flex:1; padding-top:.2em; min-width:0; }
.step-item .step-body h3{ font-size:1.05rem; font-weight:500; font-family:var(--font-body); }
.step-item .step-body p{ margin-top:6px; color:var(--text-muted); font-size:.92rem; }
.step-image{ margin:40px 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
.step-image img{ width:100%; height:auto; display:block; }

/* ---------------- FAQ ---------------- */
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px;
  padding:20px 26px; font-size:.98rem; font-weight:500; line-height:1.6;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q-mark{ color:var(--accent); font-family:var(--font-display); flex:none; }
.faq-item summary .chev{ font-size:.8rem; color:var(--accent); transition:transform .3s ease; flex:none; margin-left:auto; }
.faq-item[open] summary .chev{ transform:rotate(90deg); }
.faq-item .faq-a{ padding:0 26px 22px; font-size:.9rem; line-height:1.9; color:var(--text-muted); }
@media (max-width:640px){
  .faq-item summary{ padding:16px 20px; font-size:.92rem; }
  .faq-item .faq-a{ padding:0 20px 18px; }
}

/* ---------------- hero: modern-motion variant (draft) ----------------
   Same typeface and palette as the rest of the site — the "new" feeling
   comes from a full-bleed photo with a slow zoom, a staggered entrance for
   the copy, and a scroll cue, not from a different type treatment. */
.hero-modern{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden; border-bottom:1px solid var(--line);
}
.hero-modern .hero-modern-bg{ position:absolute; inset:0; overflow:hidden; }
.hero-modern .hero-modern-bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:80% center;
  transform:scale(1.08);
  animation:kenburns 20s ease-out forwards;
}
@keyframes kenburns{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
/* A uniform dark wash over the whole photo fixed the text but buried
   Dr. Miura, who stands on the right side of the frame. Instead, darken
   only the left side where the copy actually sits (it fades out before
   reaching him) plus a light bottom-anchored wash for overall grounding —
   contrast for the text without dimming the portrait itself. */
.hero-modern .hero-modern-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(40,36,32,.72) 0%, rgba(40,36,32,.5) 28%, rgba(40,36,32,.2) 50%, rgba(40,36,32,0) 66%),
    linear-gradient(180deg, rgba(40,36,32,.02) 0%, rgba(40,36,32,.1) 45%, rgba(40,36,32,.32) 100%);
}
.hero-modern .wrap{ position:relative; z-index:1; padding-block:64px 64px; }
.hero-modern .eyebrow{ color:rgba(255,253,249,.92); font-weight:400; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3); }
.hero-modern .eyebrow::before{ background:rgba(255,253,249,.92); }
.hero-modern h1{ margin-top:22px; color:var(--on-accent); text-shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.3); }
/* Bold (500) near-white lead text once read as loud as the serif h1 itself,
   so it was toned down to weight 400 — but pushed too far, it went thin
   and hard to read against the photo. Keep the regular weight (so it still
   sits quietly under the headline) but bring the color back near-solid and
   strengthen the shadow, so the letterforms stay legible at a glance. */
.hero-modern .lead{ margin-top:22px; color:rgba(255,253,249,.97); font-weight:400; text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.35); }
.hero-modern .btn-row{ margin-top:36px; }
.hero-modern .btn{ border-color:rgba(255,253,249,.55); color:var(--on-accent); }
.hero-modern .btn:hover{ border-color:var(--on-accent); }
.hero-modern .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.hero-modern .enter{ opacity:0; transform:translateY(18px); animation:heroEnter .9s ease forwards; }
.hero-modern .enter-1{ animation-delay:.12s; }
.hero-modern .enter-2{ animation-delay:.30s; }
.hero-modern .enter-3{ animation-delay:.48s; }
.hero-modern .enter-4{ animation-delay:.66s; }
@keyframes heroEnter{ to{ opacity:1; transform:none; } }

@media (max-width:860px){
  .hero-modern{ min-height:82vh; }
  .hero-modern .wrap{ padding-block:48px 52px; }
  .hero-modern .hero-modern-bg img{ object-position:65% center; }
}

/* ---------------- section: full-bleed photo with floating text ----------------
   Same photo-background + overlay language as .hero-modern, for a section
   further down the page (e.g. PHILOSOPHY) — text is centered and "floats"
   over the photo instead of sitting beside it. Scroll-triggered via .reveal,
   same as the rest of the site, rather than the hero's on-load entrance. */
.section-photo{
  position:relative; overflow:hidden; padding-block:150px; border-bottom:1px solid var(--line);
}
.section-photo .section-photo-bg{ position:absolute; inset:0; }
.section-photo .section-photo-bg img{
  width:100%; height:100%; object-fit:cover; object-position:right center; display:block;
  filter:sepia(38%) saturate(1.15) brightness(.76) contrast(1.05);
}
.section-photo .section-photo-scrim{
  position:absolute; inset:0;
  /* deliberately near-opaque, and warm brown rather than neutral black — the
     photo should read as a mood/texture behind the text (in the site's own
     gold/brown family), not as a recognizable second portrait right after
     the hero */
  background:linear-gradient(180deg, rgba(76,52,32,.84) 0%, rgba(70,46,28,.78) 45%, rgba(58,38,24,.88) 100%);
}
.section-photo .wrap{ position:relative; z-index:1; max-width:760px; text-align:center; }
.section-photo .eyebrow{ color:var(--on-accent); justify-content:center; }
.section-photo .eyebrow::before{ display:none; }
.section-photo h2{ color:var(--on-accent); font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.section-photo .lead{ color:rgba(255,253,249,1); margin-inline:auto; }
.section-photo .btn-row{ justify-content:center; margin-top:30px; }
.section-photo .btn{ border-color:rgba(255,253,249,.55); color:var(--on-accent); }
.section-photo .btn:hover{ border-color:var(--on-accent); }
@media (max-width:860px){
  .section-photo{ padding-block:100px; }
}

/* ---------------- section: brand-motif background ----------------
   A faint, oversized version of the site's own leaf illustration in the
   corner — for a section that would otherwise sit on a flat single-tone
   background (e.g. the newsletter grid) and read as monotonous next to
   sections that have a photo or card grid to look at. */
.section-motif{ position:relative; overflow:hidden; }
.section-motif::before{
  content:""; position:absolute; top:-10%; right:-4%; z-index:0; pointer-events:none;
  width:min(40vw,440px); aspect-ratio:194/460;
  background:url('assets/illustrations/leaf_motif.png') center / contain no-repeat;
  opacity:.55;
}
.section-motif > .wrap{ position:relative; z-index:1; }
@media (max-width:720px){
  .section-motif::before{ width:min(58vw,300px); top:-6%; right:-8%; }
}

/* Newsletter block only (.tone-cream + .section-motif together): a deeper
   tint plus a fine, all-over geometric lattice in the spirit of asanoha
   (a traditional Japanese hemp-leaf weave) — built from plain CSS line
   gradients rather than an image, so it reads as a considered "柄" instead
   of a flat tint, while staying quiet enough not to fight the text or the
   corner leaf illustration above. Scoped to this combination so the plain
   .section-motif used on newsletter.html itself is untouched. */
.tone-cream.section-motif::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(169,129,74,.16) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(60deg, rgba(169,129,74,.16) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(120deg, rgba(169,129,74,.16) 0 1px, transparent 1px 38px);
}
@media (max-width:640px){
  .tone-cream.section-motif::after{
    background-image:
      repeating-linear-gradient(0deg, rgba(169,129,74,.13) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(60deg, rgba(169,129,74,.13) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(120deg, rgba(169,129,74,.13) 0 1px, transparent 1px 30px);
  }
}

/* The muted gothic copy (.lead, the card publish-date) leans on
   --text-muted for a quiet secondary tone, but against this section's
   warm tan tint (.tone-cream) that muted brown sits at fairly low
   contrast — legible on a bright desktop display, harder to read on a
   phone screen outdoors or at lower brightness. Darken just those two
   spots within the newsletter block rather than changing --text-muted
   site-wide. */
.tone-cream .section-head .lead,
.tone-cream .issue-card .meta{
  color:color-mix(in srgb, var(--text-muted) 35%, var(--text) 65%);
}

/* ---------------- newsletter.html: a full-page press/magazine backdrop ----------------
   .newsletter-press-page wraps BOTH the hero and the back-number list, so
   the torn-newspaper motif reads as one continuous sheet behind both
   sections rather than a band confined to the hero. An oversized "NEWS"
   watermark and a fragment of greeked "column text" anchor the top-left;
   a rotated "SOSHUNDO / PLASTIC SURGERY" masthead sits top-right; a leaf
   sprig and the clinic's own cursive tagline anchor the bottom-left; a
   small torn clipping card echoing the masthead sits bottom-right, near
   the foot of the list. Everything here is built from the clinic's real
   name/tagline or unlabelled placeholder bars — never a fabricated
   headline, quote, or photograph. */
.newsletter-press-page{ position:relative; overflow:hidden; }
.newsletter-press-page::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-image:repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 220px);
}
.newsletter-press-page .wrap{ position:relative; z-index:1; }

.press-watermark{
  position:absolute; top:-.2em; left:-.04em; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(140px,22vw,300px); line-height:1; letter-spacing:.01em;
  color:var(--accent); opacity:.1; white-space:nowrap; transform:rotate(-1deg);
}
.press-masthead{
  /* .newsletter-press-page wraps the hero from its very top edge, above
     where .page-hero's own top padding clears the fixed site header — so
     this needs enough offset on its own to sit below the header rather
     than under it. */
  position:absolute; top:128px; right:var(--gutter); z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:700; text-align:right;
  font-size:clamp(17px,2.1vw,25px); line-height:1.3; letter-spacing:.08em;
  color:var(--accent); opacity:.24; transform:rotate(2deg);
}

/* A fragment of "column text" (greeked bars, not real words) plus a photo
   silhouette under the NEWS mark — reads as the top of an actual front
   page rather than a lone wordmark floating in space. */
.press-frag{
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(150px,20vw,260px); left:var(--gutter); width:min(46vw,260px);
  transform:rotate(-1.5deg);
}
.press-frag .frag-photo{
  width:42%; aspect-ratio:4/3; float:left; margin:0 14px 10px 0;
  background:linear-gradient(150deg, rgba(169,129,74,.24), rgba(46,42,38,.16));
  border:1px solid rgba(46,42,38,.2);
}
.press-frag .frag-bar{ display:block; height:8px; border-radius:1px; background:rgba(46,42,38,.18); margin-bottom:10px; }
.press-frag .frag-bar.w95{ width:95%; }
.press-frag .frag-bar.w80{ width:80%; }
.press-frag .frag-bar.w60{ width:60%; }
.press-frag .frag-bar.w90{ width:90%; }

/* Bottom-right torn clipping, echoing the top-right masthead — the second
   anchor the reference image places near the foot of the page. */
.press-clip-corner{
  position:absolute; bottom:40px; right:2%; z-index:0; pointer-events:none;
  width:min(30vw,200px); opacity:.26; text-align:center;
  background:var(--surface); border:1px solid var(--line-strong);
  box-shadow:0 20px 40px -18px rgba(46,42,38,.3);
  padding:16px 18px; transform:rotate(-3deg);
}
.press-clip-corner .en{
  display:block; font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:1.05rem; line-height:1.3; color:var(--accent-2);
}
.press-clip-corner .ja{
  display:block; margin-top:8px; font-family:var(--font-body); font-size:.62rem;
  letter-spacing:.16em; color:var(--text-muted);
}

.press-leaf{
  position:absolute; z-index:0; pointer-events:none; opacity:.5;
  width:min(18vw,140px); aspect-ratio:194/460;
  background:url('assets/illustrations/leaf_motif.png') center / contain no-repeat;
}
.press-leaf-top{ top:-4%; left:1%; transform:rotate(-18deg); }
.press-leaf-bottom{ bottom:0; left:3%; transform:scaleX(-1) rotate(10deg); }

.press-tagline{
  position:absolute; left:var(--gutter); bottom:40px; z-index:0; pointer-events:none;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size:clamp(19px,2.2vw,26px); line-height:1.35; color:var(--accent-2); opacity:.45;
  transform:rotate(-3deg);
}

@media (max-width:720px){
  .press-masthead, .press-frag, .press-clip-corner{ display:none; }
  .press-watermark{ font-size:clamp(96px,40vw,180px); }
  .press-leaf{ width:min(28vw,110px); }
  .press-tagline{ bottom:24px; }
}

/* The hero itself: a centered title over the backdrop, rather than the
   left-aligned copy other .page-hero sections use. */
.newsletter-hero-v2 .wrap{ text-align:center; max-width:640px; margin-inline:auto; }
.newsletter-hero-v2 h1{ margin-top:0; }
.newsletter-hero-v2 .dash-label{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:18px; font-family:var(--font-body); font-size:.78rem;
  letter-spacing:.28em; color:var(--accent);
}
.newsletter-hero-v2 .dash-label span{ display:block; width:34px; height:1px; background:var(--line-strong); }
.newsletter-hero-v2 .lead{ margin-top:22px; }

/* Bottom padding sized to clear the bottom-right clip / tagline (they sit
   ~40px up from the wrapper's own bottom edge) without the doubled gap a
   full 96px section padding plus the next section's own top padding would
   otherwise leave before "院長通信について". */
.newsletter-list-section{ padding-top:0; padding-bottom:150px; }

/* ---------------- breadcrumb (small wayfinding pages, e.g. reservation guide) ---------------- */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-size:.76rem; letter-spacing:.02em; color:var(--text-muted);
}
.breadcrumb a{ color:var(--text-muted); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .sep{ color:var(--line-strong); }
.breadcrumb .current{ color:var(--text); }

/* ---------------- alert box (important, time-sensitive notice) ---------------- */
.alert-box{
  display:flex; gap:18px; align-items:flex-start;
  background:color-mix(in srgb, var(--accent-2) 14%, var(--surface)); border:1px solid var(--accent-2);
  padding:24px 28px; border-radius:var(--radius);
}
.alert-box .alert-icon{
  flex:0 0 auto; width:2em; height:2em; border-radius:50%; background:var(--accent-2); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem;
}
.alert-box h3{ font-size:1rem; font-weight:600; font-family:var(--font-body); color:var(--text); }
.alert-box p{ margin-top:8px; color:var(--text); font-size:.92rem; line-height:1.9; }

/* ---------------- flow list: numbered steps with a connecting line + small icon ---------------- */
.flow-list{ position:relative; display:flex; flex-direction:column; gap:36px; }
.flow-list::before{
  content:""; position:absolute; left:1.2em; top:1.2em; bottom:1.2em; width:1px; background:var(--line-strong);
}
.flow-list .step-item{ position:relative; z-index:1; }
.flow-list .step-item .step-num{ background:var(--accent); }
.flow-list .step-item.is-branch-root .step-num{ background:var(--text); }
.step-item .step-icon{
  display:inline-flex; margin-left:10px; color:var(--accent); vertical-align:-6px;
}
.step-item .step-icon svg{ width:22px; height:22px; }

/* the SMS-vs-AI-phone branch under a step: two options side by side */
.flow-branch{
  display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:16px; overflow:hidden; border-radius:var(--radius);
}
@media (min-width:640px){ .flow-branch{ grid-template-columns:1fr 1fr; } }
.flow-branch-item{ background:var(--surface); padding:20px 22px; }
.flow-branch-item .branch-head{ display:flex; align-items:center; gap:10px; }
.flow-branch-item .branch-tag{
  font-size:.72rem; letter-spacing:.06em; color:var(--on-accent); background:var(--text);
  border-radius:999px; padding:.25em .9em; flex:none;
}
.flow-branch-item h4{ font-size:.98rem; font-weight:500; font-family:var(--font-body); }
.flow-branch-item p{ margin-top:8px; font-size:.88rem; color:var(--text-muted); }
.flow-branch-item .step-icon{ margin-left:0; margin-right:2px; }

/* ---------------- 3-up info grid (checklist / cautions / FAQ teaser) ---------------- */
.info-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:64px; }
@media (min-width:720px){ .info-grid{ grid-template-columns:repeat(2,1fr); } }
.info-card{ background:var(--surface); padding:28px 26px; }
.info-card h3{ font-size:.98rem; font-weight:600; font-family:var(--font-body); }
.info-card.info-card-caution{ background:color-mix(in srgb, var(--accent-2) 14%, var(--surface)); }
.checklist{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.checklist li{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--text-muted); }
.checklist li::before{
  content:""; flex:0 0 auto; width:1em; height:1em; margin-top:.2em; border:1px solid var(--line-strong); border-radius:3px;
}
.caution-list{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.caution-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--text); line-height:1.7; }
.caution-list li::before{ content:"・"; color:var(--accent-2); flex:none; }
.info-card .link-list{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.info-card .link-list a{ display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:var(--text); transition:color .2s ease; }
.info-card .link-list a:hover{ color:var(--accent); }
.info-card .link-list a::after{ content:"›"; color:var(--accent); flex:none; }

/* ---------------- reservation guide: at-a-glance visual (icon → phone mockups → icon) ---------------- */
.flow-visual{
  display:flex; align-items:flex-start; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:56px 0 0; padding:40px 24px; background:var(--bg-alt); border-radius:var(--radius);
}
.flow-visual-node{ display:flex; flex-direction:column; align-items:center; gap:16px; flex:0 0 auto; width:120px; }
.flow-visual-node .visual-icon{
  width:58px; height:58px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.flow-visual-node .visual-icon svg{ width:26px; height:26px; }
.flow-visual-node .visual-caption{ font-size:.74rem; color:var(--text-muted); text-align:center; line-height:1.7; }
.flow-visual-arrow{ align-self:center; color:var(--line-strong); font-size:1.4rem; flex:0 0 auto; margin-top:36px; }

.phone-mockup{
  width:168px; flex:0 0 auto; background:var(--text); border-radius:20px; padding:8px; box-shadow:var(--shadow);
}
.phone-mockup .phone-screen{
  background:var(--surface); border-radius:13px; padding:14px 12px; min-height:230px;
  display:flex; flex-direction:column; gap:7px; font-size:.66rem; line-height:1.55; color:var(--text);
}
.phone-mockup .phone-title{
  font-family:var(--font-display); font-size:.76rem; font-weight:600; color:var(--text); text-align:center;
  padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:2px;
}
.phone-mockup .phone-label{ font-size:.62rem; color:var(--text-muted); margin-top:2px; }
.phone-mockup .phone-field{
  background:var(--bg-alt); border:1px solid var(--line-strong); border-radius:4px; padding:6px 8px; font-size:.66rem; color:var(--text);
}
.phone-mockup .phone-link{ margin:0; color:var(--accent); word-break:break-all; font-size:.6rem; text-decoration:underline; }
.phone-mockup .phone-btn{
  margin-top:auto; background:var(--accent); color:var(--on-accent); text-align:center; border-radius:4px;
  padding:7px; font-size:.68rem; letter-spacing:.03em;
}
.phone-mockup .phone-check{ display:flex; align-items:center; gap:6px; font-size:.6rem; color:var(--text-muted); margin-top:2px; }
.phone-mockup .phone-check .box{ width:.9em; height:.9em; border:1px solid var(--line-strong); border-radius:2px; flex:none; }
.phone-mockup .phone-sub-link{ margin:0; font-size:.6rem; color:var(--accent); text-align:center; }

/* The horizontal chain (icon → 3 phone mockups → icon) needs roughly
   930px of clear width to lay out in one row without wrapping. .wrap's
   own inner width crosses that only around an ~1050-1100px viewport, so
   using the same 900px breakpoint as the rest of the site left a "dead
   zone" on ordinary laptop-width windows where flex-wrap kicked in and
   scattered the row across two uneven, mis-centered lines. Switching to
   the vertical stacked layout earlier (1100px) keeps it clean through
   that range; it only needs to fit some cards side-by-side once there's
   comfortably enough room. */
@media (max-width:1100px){
  .flow-visual{ flex-direction:column; align-items:center; }
  .flow-visual-arrow{ transform:rotate(90deg); margin:0; }
}