/* =========================================================================
   ForeverAfter.life — public memorial page (+ private gate)
   Ported from templates/theme_dev/memorial.css; tokens remapped to --ff-*,
   trimmed to the sections this phase renders (hero, life story, service),
   with the deferred sections (timeline, gallery, candles, guestbook, family)
   and the editorial direction dropped. Loaded only on the memorial page.
   ========================================================================= */

/* ---- Reveal animation (visible by default; .pre hides for scroll-in) -- */
.reveal { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.pre { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.pre { transition: none; opacity: 1; transform: none; } }

/* mockup base class with no ff- analogue */
.serif { font-family: var(--ff-font-serif); }

/* quiet text button (topbar Share) — not in the global button set */
.btn-quiet {
  --bs-btn-color: var(--ff-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ff-accent-deep);
  --bs-btn-hover-bg: var(--ff-surface-2);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ff-accent-deep);
  --bs-btn-active-bg: var(--ff-surface-2);
  --bs-btn-active-border-color: transparent;
}

/* ---- Top bar ---------------------------------------------------------- */
.m-topbar { position: sticky; top: 0; z-index: 50; background: oklch(1 0 0 / 0.82); backdrop-filter: saturate(1.1) blur(14px); border-bottom: 1px solid var(--ff-line-soft); }
.m-topbar-in { max-width: var(--ff-shell-max); margin: 0 auto; padding: 13px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.m-topbar-mid { color: var(--ff-ink-2); font-size: 1.05rem; letter-spacing: -0.01em; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.m-topbar-mid.show { opacity: 1; }
.m-topbar-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .m-topbar-mid { display: none; } }

/* ---- Draft notice (owner preview) ------------------------------------ */
.m-draftbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; padding: 14px 24px; background: var(--ff-accent-soft); border-bottom: 1px solid var(--ff-line); color: var(--ff-accent-deep); }
.m-draftbar-text { font-size: 0.94rem; }
.m-draftbar-text strong { font-weight: 600; }
.m-draftbar form { margin: 0; }
.m-draftbar .btn { padding-block: 0.5rem; }

/* ---- Section scaffolding --------------------------------------------- */
.m-shell { max-width: var(--ff-shell-max); margin: 0 auto; }
.m-section { padding: 92px 32px; }
.m-section-head { max-width: 100%; margin: 0 auto 48px; text-align: center; }
.m-section-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin-top: 10px; font-weight: 500; }
.m-section-soft { background: var(--ff-surface-2); }


/* ---- Content width ----------------------------------------------------
   Every block above fills .m-shell (--ff-shell-max, the same width the site
   header uses) rather than sitting in its own narrower column. The page reads
   as one container instead of a ribbon down the middle of a wide screen.

   The one place that is not purely a win is the biography: prose at 1400px is
   a very long line to track back from. If it reads badly on a wide monitor,
   put a measure back on .m-story alone -- say 90ch -- and everything else
   stays full width.
   ---------------------------------------------------------------------- */

/* ---- Hero (portrait) -------------------------------------------------- */
.m-hero { text-align: center; }
.m-hero-portrait { max-width: var(--ff-shell-max); margin: 0 auto; padding: 80px 32px 64px; display: flex; flex-direction: column; align-items: center; }
.m-hero-eyebrow { margin-bottom: 26px; }
.m-portrait { width: 236px; height: 236px; border-radius: 50%; box-shadow: var(--ff-shadow-lg); }
.m-portrait.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.m-portrait.ff-ph { position: relative; inset: auto; }
.m-hero-name { font-size: clamp(2.9rem, 6.4vw, 4.8rem); line-height: 1.02; margin: 28px 0 10px; font-weight: 500; }
.m-hero-years { font-size: 1.35rem; color: var(--ff-accent-deep); font-weight: 500; }
.m-hero-meta { display: inline-flex; gap: 12px; align-items: center; white-space: nowrap; font-size: 1.18rem; }
.m-hero-dot { opacity: .5; }

/* Lifespan band: full dates flanking the computed age (when full ISO dates exist). */
.m-lifespan { display: flex; align-items: center; gap: 18px; max-width: 560px; margin: 0 auto; }
.m-lifespan-date { white-space: nowrap; font-size: 1.18rem; }
.m-lifespan-age { white-space: nowrap; font-weight: 600; color: var(--ff-ink); font-size: 1.05rem; }
.m-lifespan-rule { flex: 1; height: 1px; background: var(--ff-line); min-width: 24px; }
.m-hero-place { margin-top: 10px; font-size: 1.02rem; }

/* Pay respect — a once-per-day, one-way gesture. */
.m-respect { margin-top: 18px; text-align: center; }
.m-respect form { display: inline-flex; }
.m-respect-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; background: var(--ff-accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: filter .15s, transform .15s; box-shadow: 0 4px 12px oklch(0.6 0.1 234 / 0.26); }
.m-respect-btn svg { width: 16px; height: 16px; }
.m-respect-btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.m-respect-btn:disabled { cursor: default; }
.m-respect-btn.is-paid { background: var(--ff-accent-soft); color: var(--ff-accent-deep); border-color: var(--ff-line); box-shadow: none; }
.m-respect-count { font-variant-numeric: tabular-nums; min-width: 1ch; }

/* "Pay respect" label, now a hover tooltip above the button. */
.m-respect-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--ff-ink); color: #fff; font-size: 0.8rem; font-weight: 500; padding: 5px 11px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.m-respect-btn:hover .m-respect-tip,
.m-respect-btn:focus-visible .m-respect-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.m-hero-role { margin: 8px 0 0; font-size: 1.02rem; }
.m-hero-epitaph { font-family: var(--ff-font-serif); font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-style: italic; color: var(--ff-ink-2); margin: 24px 0 0; max-width: 540px; line-height: 1.4; }
.m-hero-dust { margin: 30px 0; }
.m-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ---- Life story ------------------------------------------------------- */
.m-story { max-width: 100%; margin: 0 auto; }
.m-story-p { font-size: 1.2rem; line-height: 1.78; color: var(--ff-ink); margin: 0 0 24px; }
.m-story-p:first-of-type::first-letter { font-family: var(--ff-font-serif); font-size: 3.4em; line-height: 0.82; float: left; padding: 8px 12px 0 0; color: var(--ff-accent-deep); font-weight: 500; }
.m-story-sign { display: flex; justify-content: center; margin-top: 16px; }

/* ---- Timeline --------------------------------------------------------- */
.m-timeline { position: relative; max-width: 100%; margin: 0 auto; padding-left: 8px; }
.m-tl-spine { position: absolute; left: 92px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--ff-line) 8%, var(--ff-line) 92%, transparent); }
.m-tl-item { display: grid; grid-template-columns: 76px 28px 1fr; align-items: start; padding: 16px 0; }
.m-tl-year { font-size: 1.18rem; color: var(--ff-accent-deep); text-align: right; padding-top: 1px; font-weight: 500; }
.m-tl-node { position: relative; justify-self: center; margin-top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--ff-surface); border: 2px solid var(--ff-accent); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
.m-section-soft .m-tl-node { background: var(--ff-surface-2); }
.m-tl-title { font-size: 1.12rem; font-weight: 600; margin-bottom: 3px; }
.m-tl-text { color: var(--ff-ink-2); margin: 0; }
@media (max-width: 600px) {
  .m-tl-item { grid-template-columns: 54px 22px 1fr; }
  .m-tl-year { font-size: 1.02rem; }
  .m-tl-spine { left: 65px; }
}

/* ---- Family ----------------------------------------------------------- */
.m-family { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 720px) { .m-family { grid-template-columns: repeat(2, 1fr); } }
.m-family-card { text-align: center; }
.m-family-avatar { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-family: var(--ff-font-sans); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--ff-accent-deep); background: var(--ff-accent-soft); }
.m-family-rel { font-size: 11px; margin-bottom: 4px; }
.m-family-name { font-size: 1.3rem; font-weight: 500; line-height: 1.15; }
.m-family-note { font-size: 0.9rem; margin-top: 2px; font-style: italic; }

/* ---- Gallery (uniform square thumbnails) ------------------------------ */
.m-gallery { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.m-gallery-item { display: block; border-radius: var(--ff-radius-lg); overflow: hidden; box-shadow: var(--ff-shadow-sm); background: var(--ff-surface-2); cursor: pointer; }
.m-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .3s ease; }
.m-gallery-item:hover img, .m-gallery-item:focus-visible img { transform: scale(1.04); }
@media (max-width: 480px) { .m-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---- Lightbox --------------------------------------------------------- */
.m-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: oklch(0.18 0.02 250 / 0.92); backdrop-filter: blur(2px); }
.m-lightbox[hidden] { display: none; }
.m-lightbox-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 1100px); }
.m-lightbox-stage img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 70px oklch(0 0 0 / 0.5); }
.m-lightbox-cap { color: oklch(1 0 0 / 0.85); font-size: 0.95rem; line-height: 1.5; text-align: center; max-width: 70ch; }
.m-lightbox-cap[hidden] { display: none; }
.m-lightbox-x { position: absolute; top: 16px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: oklch(1 0 0 / 0.1); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .18s; }
.m-lightbox-x:hover { background: oklch(1 0 0 / 0.22); }
.m-lightbox-nav { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: oklch(1 0 0 / 0.1); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .18s; }
.m-lightbox-nav:hover { background: oklch(1 0 0 / 0.22); }
@media (max-width: 560px) { .m-lightbox { padding: 14px; } .m-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); } .m-lightbox-nav.prev { left: 8px; } .m-lightbox-nav.next { right: 8px; } }

/* ---- Share popover (QR + link) ---------------------------------------- */
body.m-share-open { overflow: hidden; }
.m-share { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 24px; background: oklch(0.18 0.02 250 / 0.55); backdrop-filter: blur(3px); }
.m-share[hidden] { display: none; }
.m-share-card { position: relative; width: min(430px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-lg); padding: 34px 32px 28px; text-align: center; }
.m-share-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ff-ink-3); font-size: 22px; line-height: 1; cursor: pointer; transition: background .18s, color .18s; }
.m-share-x:hover { background: var(--ff-surface-2); color: var(--ff-ink); }
.m-share-title { margin: 6px 0 20px; font-size: 1.45rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ff-ink); }
.m-share-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--ff-line); border-radius: var(--ff-radius); box-shadow: var(--ff-shadow-sm); }
.m-share-qr img { display: block; width: 212px; height: 212px; }
.m-share-hint { font-size: 0.85rem; line-height: 1.5; margin: 14px auto 18px; max-width: 300px; }
.m-share-link { display: flex; align-items: center; gap: 10px; background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: 12px; padding: 7px 7px 7px 14px; margin-bottom: 14px; }
.m-share-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; color: var(--ff-ink-2); text-align: left; }
.m-share-link .btn { flex: none; }
.m-share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 560px) { .m-share { padding: 14px; } .m-share-card { padding: 28px 20px 22px; } }

/* ---- Service ---------------------------------------------------------- */
.m-service-card { max-width: 640px; margin: 0 auto; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 32px; }
.m-section-soft .m-service-card { background: var(--ff-surface); }
.m-service-when { display: flex; flex-direction: column; gap: 2px; padding-bottom: 20px; border-bottom: 1px solid var(--ff-line-soft); margin-bottom: 20px; }
.m-service-date { font-size: 1.7rem; font-weight: 500; }
.m-service-dl { margin: 0; }
.m-service-dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; }
.m-service-dl dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ff-ink-3); padding-top: 3px; }
.m-service-dl dd { margin: 0; color: var(--ff-ink); }

/* Embedded resting-place map, shown inside the service-style card. */
.m-resting-map { display: block; width: 100%; height: 320px; margin-top: 22px; border: 0; border-radius: 14px; }

/* ---- Form fields (shared by the private gate) ------------------------- */
.m-field { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; margin-bottom: 14px; }
.m-field > span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ff-ink-2); }
.m-field input { font: inherit; font-size: 0.98rem; color: var(--ff-ink); background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-sm); padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.m-field input:focus { outline: none; border-color: var(--ff-accent); background: var(--ff-surface); box-shadow: 0 0 0 4px var(--ff-accent-tint); }

/* ---- Sympathy messages ------------------------------------------------ */
.m-guestbook { max-width: 760px; margin: 0 auto; }
.m-gb-flash { padding: 12px 16px; border-radius: 12px; font-size: 0.92rem; margin-bottom: 18px; }
.m-gb-flash.is-ok { color: var(--ff-accent-deep); background: var(--ff-accent-soft); border: 1px solid var(--ff-accent-soft); }
.m-gb-flash.is-error { color: var(--ff-danger-deep); background: var(--ff-danger-soft); border: 1px solid var(--ff-danger-line); }

.m-gb-form-wrap { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 28px 28px 24px; margin-bottom: 40px; }
.m-gb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .m-gb-form-row { grid-template-columns: 1fr; } }
.m-field em { font-style: normal; font-weight: 400; color: var(--ff-ink-3); }
.m-field textarea { font: inherit; font-size: 0.98rem; color: var(--ff-ink); background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: 11px; padding: 12px 14px; resize: vertical; transition: border-color .2s, box-shadow .2s, background .2s; }
.m-field textarea:focus { outline: none; border-color: var(--ff-accent); background: var(--ff-surface); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
.m-gb-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; flex-wrap: wrap; }
.m-gb-hint { font-size: 0.84rem; }
.m-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.m-gb-empty { text-align: center; }
.m-gb-list { display: flex; flex-direction: column; gap: 16px; }
.m-gb-more { display: flex; justify-content: center; margin-top: 20px; }
.m-gb-more-btn[disabled] { opacity: 0.6; cursor: default; }
.m-tribute { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 22px 24px; }
.m-tribute-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.m-tribute-meta { min-width: 0; }
.m-avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--ff-font-sans); font-size: 0.85rem; font-weight: 700; color: var(--ff-accent-deep); background: var(--ff-accent-soft); }
.m-tribute-name { font-weight: 600; }
.m-tribute-rel { font-size: 0.82rem; }
.m-tribute-body { margin: 0; color: var(--ff-ink); line-height: 1.62; }

/* Owner moderation */
.m-gb-pending { margin-bottom: 36px; }
.m-gb-pending-h { font-family: var(--ff-font-sans); font-size: 0.92rem; font-weight: 600; color: var(--ff-ink-2); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.m-tribute.is-pending { border-style: dashed; background: var(--ff-surface-2); }
.m-gb-badge { display: inline-grid; place-items: center; font-family: var(--ff-font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ff-accent-deep); background: var(--ff-accent-soft); border-radius: 999px; padding: 2px 9px; }
.m-tribute-head .m-gb-badge { margin-left: auto; }
.m-gb-mod { display: flex; gap: 8px; margin-top: 14px; }
.m-gb-mod form { margin: 0; }
.m-gb-mod-btn { font: inherit; font-size: 0.84rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ff-line); background: var(--ff-surface); cursor: pointer; transition: border-color .18s, color .18s, background .18s; }
.m-gb-mod-btn.approve { color: #fff; background: var(--ff-accent); border-color: var(--ff-accent); }
.m-gb-mod-btn.approve:hover { filter: brightness(1.04); }
.m-gb-mod-btn.remove { color: var(--ff-ink-2); }
.m-gb-mod-btn.remove:hover { border-color: oklch(0.6 0.16 25); color: oklch(0.52 0.17 25); background: oklch(0.97 0.03 25); }

/* ---- Footer ----------------------------------------------------------- */
.m-footer { background: var(--ff-surface-2); border-top: 1px solid var(--ff-line-soft); padding: 72px 32px; }
.m-footer-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.m-footer-epitaph { font-size: clamp(1.5rem, 3vw, 2.1rem); font-style: italic; color: var(--ff-ink); max-width: 600px; margin: 6px 0; line-height: 1.4; }
.m-footer-meta { letter-spacing: 0.04em; font-size: 0.92rem; }
.m-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--ff-line); width: min(420px, 100%); }
.m-footer-note { font-size: 0.85rem; }

/* ---- Floating section nav (serene) ------------------------------------ */
.m-secnav { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: oklch(1 0 0 / 0.7); backdrop-filter: blur(10px); border: 1px solid var(--ff-line-soft); border-radius: 16px; box-shadow: var(--ff-shadow-sm); }
.m-secnav:empty { display: none; }
.m-secnav-link { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--ff-ink-3); font-size: 0.84rem; padding: 7px 0; transition: color .2s; text-align: left; width: 100%; cursor: pointer; }
.m-secnav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ff-line); transition: all .2s; flex: none; }
.m-secnav-link:hover { color: var(--ff-ink-2); }
.m-secnav-link.active { color: var(--ff-accent-deep); font-weight: 600; }
.m-secnav-link.active .m-secnav-dot { background: var(--ff-accent); box-shadow: 0 0 0 4px var(--ff-accent-tint); }
@media (max-width: 1180px) { .m-secnav { display: none; } }

/* ---- Back to top ------------------------------------------------------ */
.m-totop { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ff-line); background: oklch(1 0 0 / 0.9); backdrop-filter: saturate(1.1) blur(8px); color: var(--ff-ink-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ff-shadow-sm); opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none; transition: opacity .25s, transform .25s, color .18s, border-color .18s; }
.m-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.m-totop:hover { color: var(--ff-accent-deep); border-color: var(--ff-accent); }
.m-totop svg { width: 19px; height: 19px; }
@media (max-width: 560px) { .m-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* ---- Private gate ----------------------------------------------------- */
.m-gate { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px; background: linear-gradient(168deg, var(--ff-accent-soft), oklch(0.99 0.006 234)); }
.m-gate-card { width: 100%; max-width: 420px; background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 24px; box-shadow: var(--ff-shadow-lg); padding: 40px 36px 34px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.m-gate-card .ff-brand { margin-bottom: 18px; }
.m-gate-lock { width: 56px; height: 56px; border-radius: 50%; background: var(--ff-accent-soft); color: var(--ff-accent-deep); display: grid; place-items: center; margin-bottom: 16px; }
.m-gate-lock svg { width: 26px; height: 26px; }
.m-gate-name { font-size: 1.9rem; font-weight: 500; line-height: 1.1; }
.m-gate-lede { font-size: 0.98rem; line-height: 1.55; margin: 6px 0 20px; max-width: 320px; }
.m-gate-error { width: 100%; margin-bottom: 16px; padding: 11px 14px; font-size: 0.86rem; font-weight: 500; color: oklch(0.45 0.16 25); background: oklch(0.97 0.02 25); border: 1px solid oklch(0.85 0.07 25); border-radius: 11px; }
.m-gate-form { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.m-gate-form .btn { width: 100%; margin-top: 6px; }

/* ---- Phone ------------------------------------------------------------ */
@media (max-width: 600px) {
  .m-topbar-in { padding: 12px 18px; }
  .m-topbar-actions .btn-quiet { display: none; }
  .m-section { padding: 64px 20px; }
  .m-section-head { margin-bottom: 36px; }
  .m-hero-portrait { padding: 52px 22px 48px; }
  .m-hero-meta { white-space: normal; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 1.05rem; }
  .m-lifespan { flex-direction: column; gap: 4px; }
  .m-lifespan-rule { display: none; }
  .m-portrait { width: 200px; height: 200px; }
  .m-service-card { padding: 26px 22px; }
  .m-resting-map { height: 240px; }
}