/* Pretendard v1.3.9 official files (SIL OFL 1.1). License: fonts/LICENSE.txt */
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Bold.woff2") format("woff2"); }
/* Layout: 카테고리별 화면 전환형 사이트. 위에 고정 메뉴, 화면마다 큰 제목 + 카드 묶음, 흰 바탕과 회색 띠 교차. 움직임은 화면 전환, 스크롤 등장, 숫자 카운트, 영수증·한 벌 계산 애니메이션, 할인율 슬라이더에 모은다. 계산기와 같은 블루·Pretendard 토큰. */
:root {
  --bg: #FFFFFF;
  --band: #F2F4F6;
  --card: #FFFFFF;
  --fill: #F2F4F6;
  --fill-2: #E5E8EB;
  --bar: #C9CFD6;
  --t1: #1a2233;
  --t2: #4e5968;
  --t3: #8b95a1;
  --line: #E5E8EB;
  --accent: #2f6fed;
  --accent-ink: #2b63d9;
  --accent-soft: rgba(47, 111, 237, 0.10);
  --loss: #e5484d;
  --loss-ink: #d33b40;
  --ring: rgba(47, 111, 237, 0.5);
  --shadow: 0 24px 48px -30px rgba(26, 34, 51, 0.38);
  --shadow-sm: 0 10px 24px -18px rgba(26, 34, 51, 0.35);
  --cta-bg: #2f6fed;
  --cta-fg: #FFFFFF;
  --cta-t2: #dce6fd;
  --cta-box: rgba(255, 255, 255, 0.12);
  --cta-line: rgba(255, 255, 255, 0.26);
  --copy-fg: #2b63d9;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --paper: #FFFFFF;
  --logo-ink: #1b2a44;
  --logo-dot: #3fc1b0;
  
  
  --logo-url: var(--logo-l);
  --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1320; --band: #121a29; --card: #182235; --fill: #1b2536; --fill-2: #2a3547; --bar: #3d4a60;
    --t1: #f1f3f6; --t2: #b4bcc8; --t3: #7f8999; --line: #253043;
    --accent: #5b8cff; --accent-ink: #7aa2ff; --accent-soft: rgba(91, 140, 255, 0.16); --loss: #ff6b6f; --loss-ink: #ff8a8d; --ring: rgba(91, 140, 255, 0.6);
    --shadow: none; --shadow-sm: none; --cta-bg: #2453c7; --cta-fg: #FFFFFF; --cta-t2: #cfdcff; --cta-box: rgba(255, 255, 255, 0.10); --cta-line: rgba(255, 255, 255, 0.22);
    --copy-fg: #2453c7; --nav-bg: rgba(13, 19, 32, 0.86); --paper: #182235; --logo-ink: #e8ecf2; --logo-url: var(--logo-d);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1320; --band: #121a29; --card: #182235; --fill: #1b2536; --fill-2: #2a3547; --bar: #3d4a60;
  --t1: #f1f3f6; --t2: #b4bcc8; --t3: #7f8999; --line: #253043;
  --accent: #5b8cff; --accent-ink: #7aa2ff; --accent-soft: rgba(91, 140, 255, 0.16); --loss: #ff6b6f; --loss-ink: #ff8a8d; --ring: rgba(91, 140, 255, 0.6);
  --shadow: none; --shadow-sm: none; --cta-bg: #2453c7; --cta-fg: #FFFFFF; --cta-t2: #cfdcff; --cta-box: rgba(255, 255, 255, 0.10); --cta-line: rgba(255, 255, 255, 0.22);
  --copy-fg: #2453c7; --nav-bg: rgba(13, 19, 32, 0.86); --paper: #182235; --logo-ink: #e8ecf2; --logo-url: var(--logo-d);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
html, body { margin: 0; }
body { background: var(--bg); color: var(--t1); font-family: var(--font); font-size: 16px; line-height: 1.75; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bg); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: -0.03em; }
p { margin: 0; }
a { color: var(--accent-ink); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tn { font-variant-numeric: tabular-nums; }
.neg { color: var(--loss-ink); }
.pos { color: var(--accent-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--logo-ink); text-decoration: none; min-width: 0; flex: none; }
.lockup { display: block; flex: none; height: 40px; aspect-ratio: 431 / 132; background: var(--logo-url) center / contain no-repeat; }
.lockup.f { height: 34px; }
.logo .dot { fill: var(--logo-dot); }
.logo b { font-size: 15px; font-weight: 700; letter-spacing: 0.2em; }
.menu { position: relative; display: flex; align-items: center; gap: 2px; }
.menu a { position: relative; z-index: 1; font-size: 15px; font-weight: 600; color: var(--t2); text-decoration: none; padding: 8px 12px; border-radius: 10px; transition: color 0.2s; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--t1); }
.menu .ind { position: absolute; z-index: 0; top: 50%; height: 38px; margin-top: -19px; left: 0; width: 0; border-radius: 10px; background: var(--fill); opacity: 0; transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.2s; }
.menu a.nav-cta { color: var(--accent-ink); background: var(--accent-soft); margin-left: 8px; }
.menu a.nav-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--t1); cursor: pointer; position: relative; }
.burger i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease), opacity 0.2s; }
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 21px; } .burger i:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mnav { position: fixed; z-index: 25; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top, 0px)); bottom: 0; background: var(--bg); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.mnav a { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; font-size: 22px; font-weight: 700; color: var(--t1); text-decoration: none; border-bottom: 1px solid var(--line); letter-spacing: -0.03em; }
.mnav a small { font-size: 14px; font-weight: 600; color: var(--t3); letter-spacing: -0.01em; }
.mnav a[aria-current="page"] { color: var(--accent-ink); }
.mnav a.m-cta { margin-top: 20px; border: 0; justify-content: center; background: var(--accent); color: #FFFFFF; border-radius: 16px; font-size: 18px; }
.mnav.open a { animation: slideIn 0.5s var(--ease) both; }
.mnav.open a:nth-child(2) { animation-delay: 30ms; } .mnav.open a:nth-child(3) { animation-delay: 60ms; } .mnav.open a:nth-child(4) { animation-delay: 90ms; }
.mnav.open a:nth-child(5) { animation-delay: 120ms; } .mnav.open a:nth-child(6) { animation-delay: 150ms; } .mnav.open a:nth-child(7) { animation-delay: 180ms; } .mnav.open a:nth-child(8) { animation-delay: 210ms; } .mnav.open a:nth-child(9) { animation-delay: 240ms; }
@media (max-width: 1000px) { .menu { display: none; } .burger { display: block; } }

/* ---------- Motion primitives ---------- */
@keyframes slideIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes viewIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes pop { 0% { transform: scale(0.86); opacity: 0.4; } 60% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.view.enter { animation: viewIn 0.55s var(--ease) both; }
[data-rv="wait"] { opacity: 0; transform: translateY(28px); }
[data-rv="in"] { opacity: 1; transform: none; transition: opacity 0.75s var(--ease), transform 0.85s var(--ease); transition-delay: var(--d, 0ms); }
.lift { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
@media (hover: hover) { .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); } }

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 26px; border-radius: 16px; font-size: 17px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: transform 0.18s var(--ease), filter 0.18s; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) { .btn:hover { filter: brightness(1.05); transform: translateY(-1px); } }
.btn.primary { background: var(--accent); color: #FFFFFF; }
.btn.soft { background: var(--accent-soft); color: var(--accent-ink); }
.arrow { display: inline-block; transition: transform 0.3s var(--ease); }
a:hover .arrow { transform: translateX(4px); }

/* ---------- Sections ---------- */
.band { background: var(--band); }
.sec { padding-block: clamp(56px, 8vw, 96px); }
.sec.tight { padding-block: clamp(40px, 6vw, 64px); }
.eyebrow { font-size: 16px; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.01em; }
.head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 760px; }
.head h2 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 700; line-height: 1.32; letter-spacing: -0.04em; }
.head .lead, .phead .lead { font-size: clamp(16px, 1.8vw, 18px); color: var(--t2); max-width: 38em; }
.phead { display: grid; gap: 14px; padding-block: clamp(48px, 8vw, 88px) clamp(28px, 4vw, 44px); max-width: 820px; }
.phead h1 { font-size: clamp(34px, 5.6vw, 56px); font-weight: 700; line-height: 1.24; letter-spacing: -0.045em; }
.phead h1:focus { outline: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { background: var(--fill); border-radius: 24px; padding: clamp(24px, 3vw, 32px); min-width: 0; }
.band .tile { background: var(--card); }
.tag { font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.tile h3 { font-size: 20px; font-weight: 700; line-height: 1.45; margin: 8px 0 10px; }
.tile p { color: var(--t2); }
.note { font-size: 14px; color: var(--t3); margin-top: 18px; }
.sub-h { font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; line-height: 1.36; letter-spacing: -0.035em; margin-bottom: 8px; }
.sub-p { color: var(--t2); margin-bottom: 22px; max-width: 40em; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; color: var(--t1); line-height: 1.6; }
.checks li::before { content: ""; position: absolute; left: 6px; top: 0.3em; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.checks.muted li { color: var(--t2); }
.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nots li { position: relative; padding-left: 28px; color: var(--t2); line-height: 1.6; }
.nots li::before, .nots li::after { content: ""; position: absolute; left: 4px; top: 0.78em; width: 13px; height: 2.2px; border-radius: 2px; background: var(--t3); transform: rotate(45deg); }
.nots li::after { transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { text-align: center; padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 64px); }
.hero .wrap { display: grid; justify-items: center; gap: 20px; }
.hero h1 { font-size: clamp(36px, 6.2vw, 62px); font-weight: 700; line-height: 1.24; letter-spacing: -0.045em; }
.hero .sub { font-size: clamp(17px, 2vw, 20px); color: var(--t2); max-width: 33em; line-height: 1.7; }
.hero .btns { justify-content: center; margin-top: 10px; }
.stage { width: 100%; margin-top: clamp(28px, 5vw, 48px); background: var(--band); border-radius: 32px; padding: clamp(32px, 6vw, 64px) 16px clamp(44px, 7vw, 76px); display: grid; justify-items: center; position: relative; overflow: hidden; }
.receipt { position: relative; width: 100%; max-width: 440px; margin: 0; background: var(--paper); border-radius: 20px 20px 0 0; padding: 26px 24px 22px; text-align: left; box-shadow: var(--shadow); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; background: conic-gradient(from -45deg at 50% 100%, var(--paper) 90deg, transparent 0) 0 0 / 18px 9px repeat-x; }
.rh { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--t3); padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--fill-2); }
.rh b { color: var(--t1); font-weight: 700; }
.rrow { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--t2); }
.track { position: relative; height: 12px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--bar); transform-origin: left center; }
.track i.loss { background: color-mix(in srgb, var(--loss) 70%, transparent); }
.track i.hatch { background: repeating-linear-gradient(135deg, var(--bar) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--bar); }
.track i.keep { background: var(--accent); }
.receipt.play .track i { animation: grow 0.7s var(--ease) backwards; }
.receipt.play .rrow:nth-of-type(2) i { animation-delay: 0.10s; } .receipt.play .rrow:nth-of-type(3) i { animation-delay: 0.32s; }
.receipt.play .rrow:nth-of-type(4) i { animation-delay: 0.46s; } .receipt.play .rrow:nth-of-type(5) i { animation-delay: 0.60s; }
.receipt.play .rrow:nth-of-type(6) i { animation-delay: 0.74s; } .receipt.play .rrow:nth-of-type(7) i { animation-delay: 0.88s; }
.receipt.play .rrow:nth-of-type(8) i { animation-delay: 1.02s; } .receipt.play .rrow:nth-of-type(9) i { animation-delay: 1.16s; }
.receipt.play .rrow:nth-of-type(10) i { animation-delay: 1.5s; animation-duration: 0.9s; }
.rrow.total { border-top: 1.5px dashed var(--fill-2); margin-top: 8px; padding-top: 14px; color: var(--t1); font-weight: 700; }
.rnote { font-size: 12.5px; color: var(--t3); margin-top: 14px; line-height: 1.55; }


/* ---------- Scroll hero (첫 화면 스크롤 연출) ---------- */
.hs { position: relative; }
.hs-pin { position: relative; padding-block: clamp(56px, 9vw, 104px) clamp(40px, 6vw, 64px); }
.hs-copy { text-align: center; display: grid; justify-items: center; gap: 20px; }
.hs-copy h1 { font-size: clamp(36px, 6.2vw, 62px); font-weight: 700; line-height: 1.24; letter-spacing: -0.045em; }
.hs-copy h1:focus { outline: none; }
.hs-copy .sub { font-size: clamp(17px, 2vw, 20px); color: var(--t2); max-width: 33em; line-height: 1.7; }
.hs-copy .btns { justify-content: center; margin-top: 10px; }
.hs-stage { margin: clamp(28px, 5vw, 48px) auto 0; max-width: 1080px; background: var(--band); border-radius: 32px; padding: clamp(32px, 6vw, 64px) 16px clamp(44px, 7vw, 76px); display: grid; justify-items: center; }
.hs-glow, .hs-end, .hs-chips, .hs-cue { display: none; }
.track i.rem { display: none; }
.rrow.gone span { color: var(--t3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.rrow.total.lit span { color: var(--accent-ink); }

.hs.live { height: 300vh; }
.hs.live .hs-pin { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); height: calc(100vh - 64px - env(safe-area-inset-top, 0px)); height: calc(100svh - 64px - env(safe-area-inset-top, 0px)); padding: 0; overflow: hidden; }
.hs.live .hs-copy { position: absolute; left: 0; right: 0; top: clamp(24px, 7vh, 88px); margin: 0 auto; z-index: 3; will-change: transform, opacity; }
.hs.live .hs-stage { position: absolute; left: 50%; top: 50%; width: min(440px, calc(100% - 32px)); margin: 0; padding: 0; background: none; border-radius: 0; display: block; z-index: 2; transform: translate(-50%, -50%); will-change: transform; }
.hs.live .receipt { max-width: none; }
.hs.live .hs-glow { display: block; position: absolute; left: 50%; top: 55%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%); opacity: 0; z-index: 1; pointer-events: none; will-change: transform, opacity; }
.hs.live .hs-end { display: block; position: absolute; left: 0; right: 0; top: clamp(20px, 5.5vh, 64px); padding-inline: 16px; text-align: center; font-size: clamp(24px, 3.6vw, 38px); font-weight: 700; line-height: 1.32; letter-spacing: -0.04em; opacity: 0; z-index: 3; }
.hs.live .hs-end span { display: block; font-size: 15px; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.01em; margin-bottom: 8px; }
.hs.live .hs-chips { display: block; position: absolute; inset: 0; pointer-events: none; }
.hc { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; color: var(--t1); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.hc::before { content: "\2212"; color: var(--loss-ink); font-weight: 700; }
.hc::after { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--bar); order: -1; }
.hc.loss::after { background: color-mix(in srgb, var(--loss) 70%, transparent); }
.hc.hatch::after { background: repeating-linear-gradient(135deg, var(--bar) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--bar); }
.hs.live .track i.rem { display: block; background: var(--accent); opacity: 0.9; }
.hs.live .track i.c { transform-origin: right center; transform: scaleX(0); }
.hs.live .track i.keep { transform-origin: left center; transform: scaleX(0); }
.hs.live .hs-cue { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--t3); }
.mouse { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--bar); position: relative; }
.mouse i { position: absolute; left: 50%; top: 7px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 860px) {
  .hs.live { height: 250vh; }
  .hs.live .hs-chips { display: none; }
  .hs.live .hs-cue { display: none; }
  .hs.live .hs-copy { gap: 14px; }
}
@media (max-width: 400px) { .hs-copy .btns .btn { width: 100%; } }

/* Marquee of working principles */
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding-block: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker ul { display: flex; gap: 0; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee 48s linear infinite; }
.ticker li { display: inline-flex; align-items: center; gap: 12px; padding-right: 36px; font-size: 15px; font-weight: 600; color: var(--t2); white-space: nowrap; }
.ticker li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ticker:hover ul { animation-play-state: paused; }

/* ---------- One-bill scrollytelling ---------- */
.scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.stp-col { display: grid; }
.stp { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-block: 24px; opacity: 0.32; transition: opacity 0.45s var(--ease); }
.stp:first-child { min-height: 40vh; }
.stp:last-child { min-height: 64vh; }
.stp.on { opacity: 1; }
.stp .k { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.stp h3 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; }
.stp h3 .neg { color: var(--loss-ink); }
.stp p { color: var(--t2); font-size: 17px; max-width: 26em; }
.no-js .stp, .static .stp { opacity: 1; }
.ledger { position: sticky; top: calc(96px + env(safe-area-inset-top, 0px)); background: var(--card); border-radius: 28px; padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow); min-width: 0; }
.band .ledger { background: var(--card); }
.band .def { background: var(--card); }
.lg-cap { font-size: 14px; font-weight: 600; color: var(--t3); }
.lg-total { display: block; font-size: clamp(34px, 4.6vw, 48px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; margin-top: 2px; }
.lg-pct { display: block; font-size: 14px; color: var(--t2); margin-top: 4px; }
.lg-bar { position: relative; height: 14px; border-radius: 7px; background: repeating-linear-gradient(135deg, var(--fill-2) 0 4px, var(--fill) 4px 8px); margin: 18px 0 8px; overflow: hidden; }
.lg-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--accent); transition: width 0.7s var(--ease); }
.lg-now { font-size: 14px; color: var(--t2); min-height: 1.6em; }
.lg-rows { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--fill-2); display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.lg-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 10px; font-size: 15px; color: var(--t3); transition: background 0.35s, color 0.35s; }
.lg-rows li b { font-weight: 600; }
.lg-rows li.done { color: var(--t2); }
.lg-rows li.done b.neg { color: var(--loss-ink); }
.lg-rows li.cur { background: var(--accent-soft); color: var(--t1); }
.lg-rows li.cur b { font-weight: 700; }
.lg-rows li.total { margin-top: 6px; border-top: 1px dashed var(--fill-2); border-radius: 0; padding-top: 12px; }
.lg-rows li.total.done, .lg-rows li.total.cur { color: var(--t1); font-weight: 700; }
.lg-rows li.total.cur { border-radius: 10px; }
.lg-note { font-size: 12.5px; color: var(--t3); margin-top: 14px; line-height: 1.55; }

/* ---------- Teasers / next ---------- */
.teaser { display: grid; gap: 10px; align-content: start; background: var(--card); border-radius: 28px; padding: clamp(26px, 4vw, 40px); text-decoration: none; color: var(--t1); min-width: 0; }
.teaser h3 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; line-height: 1.3; }
.teaser p { color: var(--t2); }
.teaser .go { margin-top: 10px; font-weight: 700; color: var(--accent-ink); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.endcap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.next { display: grid; gap: 6px; align-content: center; background: var(--fill); border-radius: 24px; padding: clamp(22px, 3vw, 30px); text-decoration: none; color: var(--t1); min-width: 0; }
.next small { font-size: 14px; font-weight: 600; color: var(--t3); }
.next b { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.next span { color: var(--t2); font-size: 15px; }
.mini-cta { display: grid; gap: 14px; align-content: center; background: var(--cta-bg); color: var(--cta-fg); border-radius: 24px; padding: clamp(22px, 3vw, 30px); min-width: 0; }
.mini-cta p { font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; }
.mini-cta a { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 12px; background: #FFFFFF; color: var(--copy-fg); font-weight: 700; text-decoration: none; }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 700; line-height: 1; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.chip.ok { background: var(--accent-soft); color: var(--accent-ink); }
.chip.hold { background: var(--fill-2); color: var(--t2); }
.chip.no { background: transparent; color: var(--t1); box-shadow: inset 0 0 0 1.5px var(--t1); }
.chip.pop { animation: pop 0.45s var(--ease); }

/* ---------- Service page ---------- */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--fill); border-radius: 16px; padding: 4px; margin-bottom: clamp(24px, 4vw, 36px); max-width: 100%; }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--card); box-shadow: 0 1px 3px rgba(26, 34, 51, 0.12); transition: transform 0.45s var(--ease); }
.seg[data-tab="review"] .thumb { transform: translateX(100%); }
.seg a { position: relative; z-index: 1; display: block; text-align: center; padding: 12px clamp(16px, 3vw, 28px); font-size: 16px; font-weight: 700; color: var(--t3); text-decoration: none; border-radius: 12px; white-space: nowrap; transition: color 0.3s; }
.seg a[aria-current="page"] { color: var(--t1); }
.panel.enter { animation: viewIn 0.5s var(--ease) both; }
.svc { background: var(--card); border-radius: 28px; padding: clamp(26px, 4vw, 40px); min-width: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(20px, 4vw, 44px); }
.band .svc { background: var(--card); }
.svc .main { display: grid; gap: 10px; align-content: start; }
.svc h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.04em; }
.svc .q { font-size: 18px; color: var(--t2); line-height: 1.6; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.facts { margin: 0; display: grid; gap: 0; align-content: start; background: var(--fill); border-radius: 20px; padding: 8px 20px; }
.facts div { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--fill-2); }
.facts div:first-child { border-top: 0; }
.facts dt { font-size: 13px; font-weight: 600; color: var(--t3); }
.facts dd { margin: 0; font-weight: 600; color: var(--t1); line-height: 1.55; }

/* Report mock */
.report { margin-top: 16px; background: var(--card); border-radius: 28px; padding: clamp(20px, 3.4vw, 36px); min-width: 0; }
.rp-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rp-top h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; }
.rp-top p { font-size: 13px; color: var(--t3); font-weight: 600; }
.stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 6px 10px; border-radius: 8px; }
.rtabs { display: flex; gap: 6px; margin: 18px 0 20px; overflow-x: auto; padding-bottom: 2px; }
.rtabs button { flex: none; border: 0; background: var(--fill); color: var(--t2); font-size: 14px; font-weight: 700; padding: 10px 14px; border-radius: 10px; cursor: pointer; transition: background 0.25s, color 0.25s; }
.rtabs button[aria-selected="true"] { background: var(--t1); color: var(--bg); }
.rpanel.enter { animation: viewIn 0.45s var(--ease) both; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--fill); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.kpi .l { font-size: 13px; font-weight: 600; color: var(--t3); }
.kpi .v { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.3; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v small { font-size: 14px; font-weight: 600; color: var(--t2); margin-left: 2px; letter-spacing: -0.01em; }
.kpi .s { font-size: 12.5px; color: var(--t2); margin-top: 4px; line-height: 1.5; }
.rp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.rp-box { border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.rp-box h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.todo { list-style: none; margin: 0; padding: 0; counter-reset: t; display: grid; gap: 8px; }
.todo li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14.5px; color: var(--t2); line-height: 1.55; }
.todo li::before { counter-increment: t; content: counter(t); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; margin-top: 1px; }
.todo b { color: var(--t1); font-weight: 600; }

/* Tables */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hint { display: none; font-size: 12.5px; color: var(--t3); margin-top: 8px; }
table.dt { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.dt th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--t3); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
table.dt td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); color: var(--t1); white-space: nowrap; vertical-align: middle; }
table.dt tr:last-child td { border-bottom: 0; }
table.dt .r { text-align: right; }
table.dt .c { text-align: center; }
table.dt td.wrap-cell { white-space: normal; min-width: 180px; color: var(--t2); }
table.dt tr.hl td { background: var(--accent-soft); }
table.dt tr.hl td:first-child { border-radius: 10px 0 0 10px; padding-left: 10px; }
table.dt tr.hl td:last-child { border-radius: 0 10px 10px 0; }
table.dt tbody tr { transition: background 0.2s; }
@media (hover: hover) { table.dt tbody tr:hover td { background: var(--fill); } }
.cell { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sym { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1; }
.sym.ok { background: var(--accent-soft); color: var(--accent-ink); }
.sym.hold { background: var(--fill-2); color: var(--t2); }
.sym.no { box-shadow: inset 0 0 0 1.4px var(--t1); color: var(--t1); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--t2); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-foot { font-size: 12.5px; color: var(--t3); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.6; }

/* Slider demo */
.demo { margin-top: 16px; background: var(--card); border-radius: 28px; padding: clamp(22px, 3.4vw, 36px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.demo h3 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; line-height: 1.38; margin: 6px 0 10px; }
.demo .txt p { color: var(--t2); }
.dm { background: var(--fill); border-radius: 22px; padding: clamp(18px, 3vw, 26px); min-width: 0; }
.dm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dm-top label { font-size: 14px; font-weight: 600; color: var(--t2); }
.dm-top output { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 8px 0 2px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--fill-2) var(--p, 50%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--fill-2); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #FFFFFF; border: 0; box-shadow: 0 2px 8px rgba(26, 34, 51, 0.28); transition: transform 0.15s; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; border: 0; box-shadow: 0 2px 8px rgba(26, 34, 51, 0.28); }
.ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; padding: 0 4px; }
.dm-bars { display: grid; gap: 10px; margin: 18px 0 16px; }
.dm-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; gap: 10px; align-items: center; font-size: 14px; color: var(--t2); }
.dm-bar .tr { height: 12px; border-radius: 6px; background: var(--card); overflow: hidden; }
.dm-bar .tr i { display: block; height: 100%; border-radius: 6px; background: var(--bar); transition: width 0.5s var(--ease), background 0.3s; }
.dm-bar.ev .tr i { background: var(--accent); }
.dm-bar.ev .tr i.lo { background: var(--loss); }
.dm-bar b { text-align: right; font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; }
.dm-out { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--fill-2); }
.dm-out .l { font-size: 13px; font-weight: 600; color: var(--t3); }
.dm-out .big { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dm-why { font-size: 13.5px; color: var(--t2); margin-top: 10px; min-height: 3em; }

/* Callout & def */
.callout { margin-top: 16px; background: var(--accent-soft); border-radius: 28px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 40px); align-items: center; }
.callout h3 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; line-height: 1.38; margin-bottom: 12px; }
.callout .txt p { color: var(--t2); }
.sheet-tbl { background: var(--card); border-radius: 20px; padding: 20px 22px; min-width: 0; }
.sheet-tbl .cap { font-size: 13px; font-weight: 600; color: var(--t3); margin-bottom: 8px; }
table.ex { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
table.ex th { text-align: left; font-size: 13px; font-weight: 600; color: var(--t3); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.ex td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); color: var(--t1); font-weight: 600; white-space: nowrap; }
table.ex tr:last-child td { border-bottom: 0; }
table.ex td:last-child, table.ex th:last-child { padding-right: 0; text-align: right; }
.sheet-tbl .foot { font-size: 13px; color: var(--t3); margin-top: 10px; }
.def { margin-top: 16px; background: var(--fill); border-radius: 20px; padding: 22px clamp(22px, 3vw, 30px); font-size: 15px; color: var(--t2); line-height: 1.75; }
.def b { color: var(--t1); font-weight: 700; }
.premise { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; background: var(--card); border-radius: 24px; padding: clamp(22px, 3vw, 30px); }
.premise h3 { grid-column: 1 / -1; font-size: 18px; font-weight: 700; margin-bottom: 4px; }

/* ---------- Criteria page ---------- */
.rules { margin: 14px 0 0; display: grid; gap: 0; }
.rules div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--fill-2); }
.rules div:first-child { border-top: 0; }
.rules dt { margin: 0; }
.rules dd { margin: 0; color: var(--t2); font-size: 15.5px; line-height: 1.6; padding-top: 2px; }
.order { counter-reset: o; }
.order tbody tr td:first-child { font-weight: 700; color: var(--accent-ink); }
.fx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fx .tile { display: grid; gap: 10px; align-content: start; }
.fx h3 { margin: 0; font-size: 18px; }
.formula { background: var(--card); border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--t1); line-height: 1.7; font-variant-numeric: tabular-nums; overflow-x: auto; }
.band .formula { background: var(--fill); }
.formula span { display: block; white-space: nowrap; }
.formula em { font-style: normal; color: var(--accent-ink); }
.fx .tile p { font-size: 14.5px; color: var(--t2); }
.gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gate { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--card); border-radius: 22px; padding: 22px; }
.gate .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; }
.gate .ic svg { width: 22px; height: 22px; stroke: var(--accent-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.gate p { font-size: 14.5px; color: var(--t2); line-height: 1.6; }
.gate .val { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vals div { background: var(--fill); border-radius: 18px; padding: 16px 18px; }
.vals b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vals span { font-size: 13.5px; color: var(--t2); }

/* ---------- Process page ---------- */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 56px; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--fill-2); }
.timeline .prog { position: absolute; left: 19px; top: 8px; width: 2px; height: var(--h, 100%); max-height: calc(100% - 16px); border-radius: 2px; background: var(--accent); transition: height 0.2s linear; }
.timeline li { position: relative; background: var(--card); border-radius: 24px; padding: clamp(22px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px 28px; }
.timeline li::before { content: attr(data-n); position: absolute; left: -56px; top: 24px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--t3); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--fill-2); transition: background 0.4s, color 0.4s, box-shadow 0.4s; font-variant-numeric: tabular-nums; }
.timeline li.lit::before { background: var(--accent); color: #FFFFFF; box-shadow: none; }
.timeline .num { font-size: 15px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 21px; font-weight: 700; margin: 4px 0 8px; }
.timeline p { color: var(--t2); }
.timeline dl { margin: 0; display: grid; gap: 10px; align-content: start; background: var(--fill); border-radius: 18px; padding: 16px 18px; }
.timeline dl div { display: grid; gap: 2px; }
.timeline dt { font-size: 12.5px; font-weight: 600; color: var(--t3); }
.timeline dd { margin: 0; font-size: 14.5px; color: var(--t1); line-height: 1.55; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flow span { background: var(--card); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--t1); }
.flow i { width: 14px; height: 2px; background: var(--bar); border-radius: 2px; }

/* ---------- Price page ---------- */
.plan { background: var(--fill); border-radius: 28px; padding: clamp(26px, 4vw, 40px); min-width: 0; display: grid; align-content: start; gap: 6px; }
.band .plan { background: var(--card); }
.plan h3 { font-size: 18px; font-weight: 600; color: var(--t2); letter-spacing: -0.02em; }
.plan .price { font-size: clamp(36px, 5vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 18px; font-weight: 600; color: var(--t3); letter-spacing: -0.01em; margin-left: 6px; }
.plan .checks { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--fill-2); }
.band .plan .checks { border-top-color: var(--line); }
table.cmp td.c, table.cmp th.c { text-align: center; }
.yes { display: inline-block; width: 7px; height: 12px; border: solid var(--accent); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) translateY(-2px); }
.dash { color: var(--t3); }

/* ---------- Data page ---------- */
.data { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; }
.box { background: var(--card); border-radius: 24px; padding: clamp(22px, 3vw, 32px); min-width: 0; }
.box h3 { font-size: 19px; font-weight: 700; margin-bottom: 14px; }
.items { margin: 0; }
.items div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.items div:first-child { border-top: 0; padding-top: 0; }
.items dt { font-weight: 700; color: var(--t1); }
.items dd { margin: 0; color: var(--t2); font-size: 15.5px; }
.items div.opt dt { color: var(--t3); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.pills.off span { background: var(--fill); color: var(--t3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.band .pills.off span { background: var(--card); }
.where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.where div { background: var(--fill); border-radius: 20px; padding: 18px 20px; }
.where b { display: block; font-weight: 700; margin-bottom: 4px; }
.where span { font-size: 14.5px; color: var(--t2); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; font-size: clamp(16px, 1.9vw, 18px); font-weight: 600; color: var(--t1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border: solid var(--t3); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.35s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq details p { color: var(--t2); padding: 0 4px 24px; max-width: 46em; }

/* ---------- Contact ---------- */
.cta { background: var(--cta-bg); color: var(--cta-fg); border-radius: 32px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 44px); align-items: center; }
.cta h2 { color: var(--cta-fg); font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; line-height: 1.36; letter-spacing: -0.04em; }
.cta .txt > p { color: var(--cta-t2); margin-top: 14px; font-size: 17px; }
.after { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.after li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--cta-fg); font-weight: 600; }
.after li i { width: 28px; height: 28px; border-radius: 50%; background: var(--cta-box); border: 1px solid var(--cta-line); display: grid; place-items: center; }
.after li i::before { content: ""; width: 6px; height: 10px; border: solid var(--cta-fg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.mailbox { background: var(--cta-box); border: 1px solid var(--cta-line); border-radius: 22px; padding: 24px; min-width: 0; }
.mailbox .lb { font-size: 14px; font-weight: 600; color: var(--cta-t2); }
.addr { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; color: var(--cta-fg); margin: 4px 0 16px; user-select: all; -webkit-user-select: all; word-break: break-all; letter-spacing: -0.02em; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.copy { background: #FFFFFF; color: var(--copy-fg); border: 0; border-radius: 12px; height: 44px; padding: 0 18px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 0.18s var(--ease); }
.copy:active { transform: scale(0.96); }
.mail { color: var(--cta-fg); font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
.status { display: block; min-height: 1.6em; font-size: 14px; color: var(--cta-t2); margin-top: 8px; }
.send { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--cta-line); }
.send ul { margin: 6px 0 0; padding-left: 1.1em; color: var(--cta-t2); font-size: 15px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); }
footer .wrap { padding-block: 40px 56px; display: grid; gap: 14px; font-size: 14px; color: var(--t3); }
.fline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.fline b { color: var(--t2); font-weight: 600; }
.fnav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fnav a { color: var(--t2); text-decoration: none; font-weight: 600; }
.fnav a:hover { color: var(--t1); }
.biz { font-size: 13px; line-height: 1.8; }
.privacy summary { cursor: pointer; font-weight: 600; color: var(--t2); width: fit-content; }
.privacy dl { margin: 12px 0 0; display: grid; gap: 8px; font-size: 13px; }
.privacy dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
.privacy dl div.full { grid-template-columns: minmax(0, 1fr); }
.privacy dt { color: var(--t2); font-weight: 600; }
.privacy dd { margin: 0; }

/* ---------- Product pages (상품 A · B) ---------- */
.seg-k { display: block; font-size: 12px; font-weight: 600; color: var(--t3); letter-spacing: 0; line-height: 1.3; }
.seg a[aria-current="page"] .seg-k { color: var(--accent-ink); }
.seg[data-tab="b"] .thumb { transform: translateX(100%); }
.p-hero { background: var(--card); border-radius: 28px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 18px clamp(24px, 4vw, 44px); align-items: end; }
.p-hero h2 { font-size: clamp(30px, 4.2vw, 42px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.25; margin-top: 6px; }
.p-sum { font-size: clamp(16px, 1.9vw, 19px); color: var(--t2); line-height: 1.7; margin-top: 12px; max-width: 34em; }
.p-meta { margin: 0; background: var(--fill); border-radius: 20px; padding: 4px 18px; }
.p-meta div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--fill-2); }
.p-meta div:first-child { border-top: 0; }
.p-meta dt { font-size: 12.5px; font-weight: 600; color: var(--t3); }
.p-meta dd { margin: 0; font-weight: 700; color: var(--t1); line-height: 1.5; }
.p-src { grid-column: 1 / -1; font-size: 12.5px; color: var(--t3); padding-top: 14px; border-top: 1px solid var(--line); }
.product.enter { animation: viewIn 0.5s var(--ease) both; }
.p-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; margin-top: 16px; align-items: start; }
.subnav { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; gap: 2px; background: var(--card); border-radius: 22px; padding: 10px; }
.subnav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--t2); text-decoration: none; transition: background 0.25s, color 0.25s, transform 0.25s var(--ease); white-space: nowrap; }
.subnav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fill-2); flex: none; transition: background 0.25s, transform 0.3s var(--ease); }
@media (hover: hover) { .subnav a:hover { background: var(--fill); color: var(--t1); } }
.subnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.subnav a[aria-current="page"]::before { background: var(--accent); transform: scale(1.3); }
.p-content { min-width: 0; background: var(--card); border-radius: 28px; padding: clamp(22px, 3.6vw, 40px); }
.sub { min-width: 0; }
.sub.enter { animation: viewIn 0.45s var(--ease) both; }
.sub-t { font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.36; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sub-t.blk { margin-top: 40px; }
.sub-p { color: var(--t2); margin: -6px 0 18px; }
.blk-s { margin-top: 18px; }
.blk-h { font-size: 17px; font-weight: 700; margin: 28px 0 10px; letter-spacing: -0.02em; }
.blk-h .soft { font-size: 13.5px; font-weight: 600; color: var(--t3); margin-left: 6px; }
.pill-v { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 9px; border-radius: 8px; letter-spacing: 0; }
.p-content .tile, .band .p-content .tile { background: var(--fill); }
.p-content .formula, .band .p-content .formula { background: var(--fill); }
.p-content .def { background: var(--fill); }
.p-content .report { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); margin-top: 28px; }
.p-content .report.flat { box-shadow: none; padding: 0; margin-top: 0; }
.p-content .report.flat .rtabs { margin-top: 0; }
.p-content .demo { background: transparent; box-shadow: inset 0 0 0 1px var(--line); margin-top: 28px; }
.formula.big { font-size: clamp(15px, 1.8vw, 17px); padding: 18px 20px; }
.inline-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.callout-s { margin-top: 14px; background: var(--accent-soft); color: var(--t1); border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 600; line-height: 1.6; }
.addon { margin-top: 20px; background: var(--fill); border-radius: 20px; padding: 20px 22px; }
.addon h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fit li { position: relative; background: var(--fill); border-radius: 18px; padding: 18px 18px 18px 50px; font-weight: 600; line-height: 1.55; }
.fit li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.fit li::after { content: ""; position: absolute; left: 26px; top: 22px; width: 5px; height: 10px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qs li { display: grid; gap: 6px; background: var(--fill); border-radius: 18px; padding: 18px 20px; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.02em; }
.qs small { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); letter-spacing: 0; }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.case { background: var(--fill); border-radius: 20px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.case h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.case p:last-child { color: var(--t2); font-size: 14.5px; line-height: 1.6; }
.terms { margin: 0; display: grid; gap: 10px; }
.terms div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; background: var(--fill); border-radius: 18px; padding: 18px 20px; }
.terms dt { font-weight: 700; color: var(--accent-ink); }
.terms dd { margin: 0; color: var(--t1); line-height: 1.65; }
.calc-ex { margin-top: 16px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); padding: 20px; display: grid; gap: 10px; }
.calc-ex .cap { font-size: 13px; font-weight: 600; color: var(--t3); }
.calc-ex > p:last-child { font-size: 14.5px; color: var(--t2); }

/* Report page thumbnails */
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg { margin: 0; display: grid; gap: 14px; align-content: start; background: var(--fill); border-radius: 22px; padding: 16px; }
.sheet { position: relative; aspect-ratio: 3 / 4; max-width: 100%; background: var(--card); border-radius: 10px; padding: 12% 10%; display: flex; flex-direction: column; gap: 7%; box-shadow: var(--shadow-sm); overflow: hidden; }
.sheet i, .sheet b { display: block; border-radius: 3px; background: var(--fill-2); transform-origin: left center; }
.sheet .ttl { height: 7%; width: 62%; background: var(--t1); opacity: 0.85; }
.sheet .kp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6%; height: 26%; }
.sheet .kp i { height: 100%; background: var(--accent-soft); }
.sheet .ln { height: 3.2%; width: 100%; }
.sheet .ln.s { width: 70%; }
.sheet .tr { display: grid; grid-template-columns: 1fr 22%; gap: 8%; align-items: center; height: 6%; }
.sheet .tr i { height: 55%; }
.sheet .tr b { height: 100%; border-radius: 4px; }
.sheet b.ok { background: var(--accent-soft); }
.sheet b.hold { background: var(--fill-2); }
.sheet b.no { background: transparent; box-shadow: inset 0 0 0 1.3px var(--t1); }
.sheet .mx { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4%; flex: 1; align-content: start; }
.sheet .mx b { aspect-ratio: 1; border-radius: 3px; }
.pg figcaption { display: grid; gap: 6px; }
.pg figcaption b { font-size: 17px; font-weight: 700; }
.pg figcaption ul { margin: 0; padding-left: 1.05em; color: var(--t2); font-size: 14.5px; line-height: 1.6; display: grid; gap: 2px; }
[data-rv="in"] .sheet i, [data-rv="in"] .sheet b { animation: grow 0.8s var(--ease) backwards; animation-delay: calc(var(--d, 0ms) + 120ms); }
[data-rv="in"] .sheet .mx b { animation-name: pop; }

/* Form template skeleton */
.form-tbl td { padding-block: 16px; }
.skel { display: block; height: 10px; width: 80%; border-radius: 5px; background: linear-gradient(90deg, var(--fill) 0%, var(--fill-2) 50%, var(--fill) 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
.skel.s { width: 52%; }
.skel.chipk { width: 64px; height: 24px; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Loop diagram */
.loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 8px; }
.node { background: var(--fill); border-radius: 20px; padding: 20px 14px; text-align: center; display: grid; gap: 2px; }
.node small { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.node b { font-size: clamp(15px, 1.8vw, 18px); font-weight: 700; letter-spacing: -0.02em; }
.links { display: grid; gap: 18px; }
.lnk { display: grid; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--t2); line-height: 1.4; }
.lnk i { position: relative; display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); background-size: 28px 2px; animation: dash 1.2s linear infinite; }
.lnk.back i { background-image: repeating-linear-gradient(90deg, var(--t3) 0 8px, transparent 8px 14px); animation-direction: reverse; }
.lnk.fwd i::after, .lnk.back i::before { content: ""; position: absolute; top: -5px; border: 6px solid transparent; }
.lnk.fwd i::after { right: -6px; border-left-color: var(--accent); }
.lnk.back i::before { left: -6px; border-right-color: var(--t3); }
@keyframes dash { to { background-position: 28px 0; } }

/* Sticky first column for wide matrices */
table.dt.sticky1 th:first-child, table.dt.sticky1 td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
table.dt.sticky1 td:first-child { font-weight: 600; }
table.dt.line1 { min-width: 520px; }

/* Mobile bottom bar */
.mbar { display: none; }

@media (max-width: 860px) {
  .p-hero { grid-template-columns: minmax(0, 1fr); }
  .p-body { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
  .subnav { top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 6; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 2px; margin-bottom: 4px; border-radius: 0; background: var(--band); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--card); font-size: 14px; }
  .subnav a::before { display: none; }
  .subnav a[aria-current="page"] { background: var(--t1); color: var(--bg); }
  .p-content { border-radius: 24px; }
  .fit, .qs, .cases, .pages { grid-template-columns: minmax(0, 1fr); }
  .pages .pg { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .terms div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mbar { display: flex; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--line); transition: transform 0.4s var(--ease); }
  .mbar p { font-size: 13.5px; font-weight: 600; color: var(--t2); line-height: 1.4; min-width: 0; }
  .mbar a { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--accent); color: #FFFFFF; font-weight: 700; text-decoration: none; }
  .mbar.off { transform: translateY(120%); }
  footer .wrap { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  table.dt.stk, table.dt.stk tbody, table.dt.stk tr, table.dt.stk td { display: block; width: 100%; }
  table.dt.stk { min-width: 0 !important; }
  table.dt.stk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.dt.stk tr { background: var(--fill); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
  table.dt.stk td { display: grid; grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); gap: 10px; align-items: start; border: 0; padding: 6px 0; white-space: normal; text-align: left !important; min-width: 0; color: var(--t1); }
  table.dt.stk td::before { content: attr(data-label); font-size: 12.5px; font-weight: 600; color: var(--t3); line-height: 1.7; }
  table.dt.stk td:first-child { grid-template-columns: minmax(0, 1fr); font-size: 16px; font-weight: 700; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fill-2); }
  table.dt.stk td:first-child::before { display: none; }
  table.dt.stk tr.hl td { background: transparent; }
  table.dt.stk tr.hl { box-shadow: inset 0 0 0 2px var(--accent); }
  table.dt.stk.order td:first-child { font-size: 14px; }
  .scroll:has(> table.dt.stk) { overflow: visible; }
  .kpis.two, .kpis.three { grid-template-columns: minmax(0, 1fr); }
  .loop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; }
  .node { padding: 14px 8px; }
  .lnk { font-size: 11.5px; }
}

/* Pager */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--fill); text-decoration: none; color: var(--t1); min-width: 0; transition: background 0.25s, transform 0.25s var(--ease); }
@media (hover: hover) { .pager a:hover { background: var(--accent-soft); } }
.pager a:active { transform: scale(0.98); }
.pager small { font-size: 12.5px; font-weight: 600; color: var(--t3); }
.pager b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.pager .nx { text-align: right; grid-column: 2; }
@media (max-width: 400px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager .nx { grid-column: 1; } }


/* ---------- v3.2 additions ---------- */
.chip.zone { background: var(--fill-2); color: var(--t2); }
.chip.loss { background: transparent; color: var(--loss-ink); box-shadow: inset 0 0 0 1.5px var(--loss-ink); }
.rules.wide div { grid-template-columns: 116px minmax(0, 1fr); }
.track i.dash { background: transparent; box-shadow: inset 0 0 0 1.5px var(--t3); border-radius: 3px; background-image: repeating-linear-gradient(90deg, transparent 0 3px, var(--fill) 3px 6px); }
.rrow.ref { color: var(--t3); font-size: 13px; }
.rrow.ref small { font-size: 11px; font-weight: 600; margin-left: 2px; }
.flow4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.flow4.in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcard { position: relative; display: grid; gap: 8px; align-content: start; background: var(--fill); border-radius: 22px; padding: 22px 20px; text-decoration: none; color: var(--t1); min-width: 0; }
.band .fcard { background: var(--card); }
.p-content .fcard, .band .p-content .fcard { background: var(--fill); }
.fcard h3 { font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; }
.fcard h3 small { font-size: 12.5px; font-weight: 600; color: var(--t3); margin-left: 4px; letter-spacing: 0; }
.fcard p { font-size: 15px; color: var(--t2); line-height: 1.6; }
.fcard .go { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
.flow4 .fcard:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -12px; width: 12px; height: 2px; background: var(--bar); }
.flow4.in .fcard::after { display: none; }
.when { display: inline-flex; justify-self: start; width: fit-content; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 9px; border-radius: 8px; }
.sub > .when { margin-bottom: 10px; }
.qline { font-size: clamp(17px, 2vw, 19px); font-weight: 600; color: var(--t2); margin: -4px 0 18px; }
.callout.in { margin-top: 26px; padding: clamp(20px, 3vw, 28px); grid-template-columns: minmax(0, 1fr); }
table.ex th small { display: block; font-size: 11.5px; font-weight: 600; color: var(--t3); margin-top: 2px; }
table.ex.ex4 { min-width: 520px; }
table.ex.ex4 td:last-child, table.ex.ex4 th:last-child { text-align: right; }
.demo2 { margin-top: 24px; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); padding: clamp(20px, 3.4vw, 32px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 40px); align-items: center; }
.demo2 h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; line-height: 1.38; margin: 6px 0 10px; }
.demo2 .txt p { color: var(--t2); }
.ticks.t3 { padding: 0 2px; }
.pseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--card); border-radius: 12px; padding: 4px; margin: 16px 0 6px; }
.pseg button { border: 0; background: transparent; color: var(--t2); font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 6px; border-radius: 9px; cursor: pointer; transition: background 0.25s, color 0.25s; }
.pseg button[aria-pressed="true"] { background: var(--t1); color: var(--bg); }
.scale { margin: 18px 0 8px; }
.sc-track { position: relative; height: 14px; border-radius: 7px; background: var(--card); }
.sc-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--accent); transition: width 0.55s var(--ease); }
.sc-track .mk { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--t2); border-radius: 1px; }
.sc-track .mk.mx { background: var(--t1); }
.sc-lab { position: relative; height: 22px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--t3); }
.sc-lab span { position: absolute; white-space: nowrap; }
.sc-lab span.l { transform: translateX(calc(-100% - 4px)); }
.sc-lab span.r { transform: translateX(4px); }
.mtl { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.mtl::before { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; background: var(--fill-2); }
.mtl li { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 28px; min-width: 0; }
.mtl li::before { content: ""; position: absolute; top: 2px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--bar); }
.mtl li.on::before { background: var(--accent); box-shadow: none; }
.mtl b { font-size: 14.5px; font-weight: 700; }
.mtl span { font-size: 12.5px; color: var(--t2); line-height: 1.45; padding: 0 4px; }
.box3 { margin-top: 26px; border-radius: 22px; background: var(--fill); padding: clamp(20px, 3vw, 28px); }
.box3 .cap { font-size: 13px; font-weight: 600; color: var(--t3); margin-bottom: 8px; }
.box3 dl { margin: 0; display: grid; }
.box3 dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--fill-2); }
.box3 dl div:first-child { border-top: 0; }
.box3 dt { color: var(--t2); font-weight: 600; }
.box3 dd { margin: 0; font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.box3 .sum { border-top: 1.5px solid var(--t1) !important; }
.box3 .sum dt { color: var(--t1); }
.box3 .foot { font-size: 13.5px; color: var(--t2); margin-top: 10px; line-height: 1.6; }
.plan.one { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px clamp(24px, 5vw, 56px); align-items: center; }
.plan.one .checks { margin-top: 0; padding-top: 0; border-top: 0; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--fill-2); }
.ledger .lg-total.pos { color: var(--accent-ink); }
@media (max-width: 860px) {
  .flow4, .flow4.in { grid-template-columns: minmax(0, 1fr); }
  .flow4 .fcard::after { display: none; }
  .demo2 { grid-template-columns: minmax(0, 1fr); }
  .plan.one { grid-template-columns: minmax(0, 1fr); }
  .plan.one .checks { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--fill-2); }
  .mtl { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mtl::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .mtl li { justify-items: start; text-align: left; padding: 0 0 0 30px; }
  .mtl li::before { top: 2px; left: 0; margin-left: 0; }
  .mtl span { padding: 0; }
}
@media (max-width: 520px) { .box3 dl div { flex-direction: column; gap: 2px; } .rules.wide div { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid2, .grid3, .callout, .data, .cta, .svc, .demo, .endcap, .fx, .gates, .rp-cols, .premise, .where { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .items div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .hint { display: block; }
  .scrolly { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ledger { top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 5; order: -1; padding: 16px 18px; border-radius: 20px; }
  .lg-rows, .lg-note { display: none; }
  .lg-total { font-size: 30px; }
  .lg-bar { margin: 10px 0 6px; height: 10px; }
  .stp { min-height: 46vh; }
  .stp:first-child { min-height: 30vh; }
  .stp:last-child { min-height: 52vh; }
}
@media (max-width: 520px) {
  .timeline { padding-left: 0; }
  .timeline::before, .timeline .prog { display: none; }
  .timeline li::before { position: static; margin-bottom: -4px; }
  .seg { display: grid; width: 100%; }
  .seg a { padding-inline: 8px; font-size: 15px; }
}
@media (max-width: 400px) {
  .btns .btn { width: 100%; }
  .rrow { grid-template-columns: 64px minmax(0, 1fr); }
  .rules div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .dm-bar { grid-template-columns: 52px minmax(0, 1fr) 76px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
  .ticker ul { width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
  .ticker li[aria-hidden="true"] { display: none; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
}


/* FRAMIVIO: restrained palette and refinements over the supplied template. */
:root, :root:not([data-theme="light"]), :root[data-theme="light"] {
  color-scheme: light;
  --bg:#faf9f6; --band:#f0eee8; --card:#fffefa; --fill:#f1efe9; --fill-2:#e1ddd3; --bar:#b8ad98;
  --t1:#252923; --t2:#5e635b; --t3:#74776d; --line:#dedbd2;
  --accent:#716039; --accent-ink:#75603a; --accent-soft:#eae4d7; --loss:#9c7b61; --loss-ink:#805d42;
  --ring:#9a7943; --shadow:0 24px 70px rgba(41,41,31,.08); --shadow-sm:0 12px 32px rgba(41,41,31,.06);
  --cta-bg:#252c26; --cta-fg:#fbf8ef; --cta-t2:#cbcbbd; --cta-box:rgba(255,255,255,.045); --cta-line:rgba(225,214,185,.2);
  --copy-fg:#3b4339; --nav-bg:rgba(250,249,246,.94); --paper:#fffefa; --logo-ink:#252923;
}
html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
.wrap { max-width:1120px; padding-inline:28px; }
.top .wrap { height:76px; }
.top { border-bottom:1px solid var(--line); }
.wordmark { font-family:Georgia,'Times New Roman',serif; font-size:26px; font-weight:400; letter-spacing:.14em; }
.brand-note { display:block; font-size:8px; letter-spacing:.27em; color:var(--t3); margin-top:-5px; text-transform:uppercase; }
.menu a { font-size:13px; padding:8px 11px; border-radius:5px; }
.menu .ind { border-radius:5px; }
.menu a.nav-cta { color:var(--cta-fg); background:var(--cta-bg); padding:10px 18px; }
.btn { border-radius:7px; height:52px; padding:0 24px; font-size:15px; }
.btn.primary { background:var(--cta-bg); color:var(--cta-fg); }
.btn.soft { border:1px solid var(--line); background:transparent; color:var(--t1); }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.head { gap:14px; }
.head h2 { font-weight:600; }
.tile,.plan,.box,.fcard,.ledger,.next,.cta,.mailbox { border-radius:12px; }
.tile,.plan,.box,.fcard { border:1px solid var(--line); }
.hs-pin { padding-top:76px; padding-bottom:54px; }
.hs-copy { gap:23px; }
.hs-copy h1 { font-size:clamp(36px,5.4vw,60px); font-weight:600; line-height:1.26; letter-spacing:-.055em; }
.hs-copy h1 em { font-style:normal; color:var(--accent-ink); }
.hs-copy .sub { max-width:37em; font-size:17px; }
.hs-copy .btns { margin-top:2px; }
.hero-meta { display:flex; justify-content:center; gap:24px; color:var(--t3); font-size:12px; margin-top:3px; }
.hero-meta span+span { padding-left:24px; border-left:1px solid var(--line); }
.hs-stage { position:relative; max-width:780px; padding:28px; border:1px solid var(--line); border-radius:14px; background:#eae7df; margin-top:45px; }
.edit-window { width:100%; display:grid; grid-template-columns:1fr 1.15fr; gap:24px; }
.edit-poster { border-radius:7px; background:#28332b; color:#f5f0e3; min-height:240px; padding:26px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.edit-poster::after { content:''; position:absolute; width:210px; height:210px; border:1px solid #8d987b; border-radius:50%; right:-90px; top:30px; box-shadow:0 0 0 32px #ffffff06,0 0 0 65px #ffffff04; }
.edit-poster small { font-size:9px; letter-spacing:.23em; color:#d1c4a1; }
.edit-poster strong { font:italic 39px/1.15 Georgia,serif; z-index:1; }
.edit-poster span { font-size:11px; color:#d6d9ca; }
.receipt { padding:6px 0; border-radius:0; background:transparent; box-shadow:none; max-width:none; }
.receipt::after { display:none; }
.rh { border-bottom-style:solid; }
.rrow { grid-template-columns:60px minmax(0,1fr); font-size:12px; padding:9px 0; }
.track { height:15px; background:#ddd8cc; border-radius:3px; }
.track i { background:#7e8874; border-radius:3px; }
.rrow:nth-child(3) .track i { background:#a28d63; }
.rrow:nth-child(4) .track i { background:#a8ae9a; }
.rrow.total { border-top-style:solid; font-size:12px; }
.rnote { font-size:10px; }
.playhead { position:absolute; width:1px; background:#544c3b; height:134px; top:77px; left:70%; }
.ticker { background:var(--bg); padding-block:15px; }
.ticker li { font-size:12px; letter-spacing:.03em; }
.sec { padding-block:88px; }
.section-top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; }
.section-top .head { margin:0; }
.section-count { font:italic 42px Georgia,serif; color:#b0a58e; }
.sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; }
.sample { min-width:0; }
.sample-art { aspect-ratio:4/3; padding:24px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; border-radius:9px; border:1px solid #00000008; }
.sample-art::after { content:''; position:absolute; width:150px; height:150px; border:1px solid currentColor; opacity:.15; border-radius:50%; right:-30px; top:35px; box-shadow:0 0 0 20px #ffffff10,0 0 0 42px #ffffff08; }
.sample-art small { font-size:9px; letter-spacing:.18em; }
.sample-art strong { font:italic 33px/1.1 Georgia,serif; z-index:1; }
.sample-art span { font-size:10px; letter-spacing:.06em; opacity:.8; }
.art1 { background:#3f4c3d; color:#f4eddc; }.art2 { background:#e8ded3; color:#665348; }
.art3 { background:#333b3c; color:#e8e1d1; }.art4 { background:#a29783; color:#fffdf4; }
.art5 { background:#d9ddcf; color:#46513c; }.art6 { background:#635d52; color:#f3eadd; }
.sample h3 { font-size:17px; margin-top:15px; font-weight:600; }
.sample p { font-size:12px; color:var(--t2); margin-top:4px; }
.sample-state { display:block; margin-top:7px; font-size:11px; color:var(--accent-ink); }
.sample-note { display:flex; gap:18px; align-items:baseline; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); color:var(--t2); font-size:13px; }
.sample-note b { white-space:nowrap; color:var(--t1); }
.plan { padding:29px 25px; position:relative; gap:9px; display:flex; flex-direction:column; }
.plan .tag { font-size:11px; letter-spacing:.13em; font-weight:500; }
.plan h3 { font-size:21px; font-weight:600; color:var(--t1); margin-top:3px; }
.plan .price { font-size:34px; margin-top:9px; }
.plan .price small { font-size:14px; margin-left:3px; }
.plan .plan-desc { color:var(--t2); font-size:13px; min-height:44px; }
.plan .checks { margin-top:8px; margin-bottom:25px; gap:12px; font-size:14px; flex:1; }
.plan .btn { width:100%; font-size:14px; }
.plan.featured { background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-bg); }
.plan.featured h3 { color:var(--cta-fg); }.plan.featured .tag { color:#d4bd86; }
.plan.featured .plan-desc,.plan.featured .price small { color:var(--cta-t2); }
.plan.featured .checks { border-color:#ffffff26; }.plan.featured .checks li { color:var(--cta-fg); }
.plan.featured .checks li::before { border-color:#c6ad76; }
.plan.featured .btn { background:#d8c69b; color:#252c26; }
.scope { margin-top:32px; padding:28px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.scope h3 { font-size:17px; margin-bottom:17px; }
.scope dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:15px 28px; }
.scope dl div { display:grid; grid-template-columns:66px 1fr; gap:10px; font-size:13px; }
.scope dt { font-weight:600; }.scope dd { margin:0; color:var(--t2); }
.scope .note { font-size:12px; color:var(--t2); }
.extras { margin-top:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.extras summary { cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; font-size:15px; font-weight:600; list-style:none; }
.extras summary::after { content:'+'; color:var(--accent-ink); }.extras[open] summary::after { content:'−'; }
.extras table { width:100%; border-collapse:collapse; font-size:13px; }
.extras th { text-align:left; font-weight:600; background:var(--fill); padding:12px; }
.extras td { padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--t2); }
.extras td:first-child { color:var(--t1); width:27%; }.extras td:nth-child(2) { width:25%; }
.extras .note { padding-bottom:22px; color:var(--t2); }
.scrolly { gap:70px; }.stp { min-height:280px; opacity:.48; }.stp:first-child { min-height:230px; }.stp:last-child { min-height:280px; }
.stp h3 { font-size:29px; }.stp p { font-size:16px; }
.ledger { border:1px solid var(--line); top:110px; padding:30px; }
.lg-total { font:400 42px/1.25 Georgia,serif; margin-top:15px; }
.lg-pct { margin-top:12px; }.lg-now { color:var(--accent-ink); }.lg-bar { height:5px; background:var(--fill-2); }
.lg-rows li { font-size:13px; padding:10px; }.lg-note { margin-top:22px; }
.timeline { gap:16px; }.timeline li { border:1px solid var(--line); border-radius:10px; }
.timeline dl { border-radius:7px; }.timeline .num { display:none; }
.contact-section { padding-bottom:88px; }.cta { align-items:start; }
.cta .eyebrow { color:#d1b982; margin-bottom:20px; }
.cta .txt > p { font-size:15px; }.after { font-size:14px; gap:16px; }
.contact-form { display:grid; gap:16px; }
.field { display:grid; gap:6px; }.field label { font-size:12px; color:var(--cta-t2); }
.field input,.field select,.field textarea { width:100%; min-width:0; padding:11px 12px; background:#ffffff07; border:1px solid #ffffff32; border-radius:5px; font:14px/1.5 var(--font); color:var(--cta-fg); }
.field input::placeholder,.field textarea::placeholder { color:#aeb5a8; }.field select option { color:#252923; background:#fffefa; }
.field textarea { min-height:95px; resize:vertical; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-note { font-size:12px; color:var(--cta-t2); line-height:1.7; }.contact-form .btn { background:#d8c69b; color:#252c26; width:100%; }
.form-status { font-size:13px; color:#e7d8b5; min-height:1.7em; }
.draft-output { width:100%; background:#1c221e; border:1px solid #6c735e; padding:12px; border-radius:6px; color:#fbf8ef; font:13px/1.7 var(--font); min-height:180px; }
.mnav { top:76px; }.mnav a.m-cta { background:var(--cta-bg); border-radius:7px; }
.mbar { display:none; }
.fline span { max-width:450px; font-size:12px; }.biz { font-size:12px; }
.skip { position:fixed; z-index:100; left:20px; top:-80px; padding:10px 18px; background:var(--cta-bg); color:#fff; }.skip:focus { top:12px; }
@media(max-width:860px) {
  .wrap { padding-inline:22px; }.sec { padding-block:62px; }.hs-pin { padding-top:55px; }
  .hs-copy .sub { font-size:15px; }.hs-stage { margin-inline:22px; max-width:none; padding:20px; }
  .sample-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 15px; }
  .grid3.plans { grid-template-columns:1fr; }.plan .plan-desc { min-height:0; }
  .plan { padding:28px; }.scope dl { grid-template-columns:1fr; }
  .scrolly { gap:20px; }.ledger { position:relative; top:0; order:0; }.lg-rows,.lg-note { display:block; }
  .lg-rows { display:grid; }.stp,.stp:first-child,.stp:last-child { min-height:0; padding:24px 0; opacity:1; border-bottom:1px solid var(--line); }
  .stp h3 { font-size:24px; }.stp-col { gap:5px; }.contact-section { padding-bottom:60px; }
  .mbar { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:20; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); align-items:center; justify-content:space-between; gap:16px; background:var(--bg); border-top:1px solid var(--line); }
  .mbar p { font-size:12px; color:var(--t2); }.mbar a { padding:11px 17px; border-radius:5px; background:var(--cta-bg); color:var(--cta-fg); text-decoration:none; font-size:13px; }
  .mbar.off { display:none; }footer .wrap { padding-bottom:110px; }.section-count { font-size:32px; }
}
@media(max-width:520px) {
  .wordmark { font-size:23px; }.hs-copy h1 { font-size:35px; }.hs-copy { gap:19px; }
  .hero-meta { gap:12px; font-size:10px; }.hero-meta span+span { padding-left:12px; }
  .edit-window { grid-template-columns:1fr; gap:19px; }.edit-poster { min-height:180px; }.edit-poster strong { font-size:33px; }
  .receipt { padding:0 3px; }.hs-stage { padding:17px; }.sample-art { padding:17px; aspect-ratio:3/4; }.sample-art strong { font-size:25px; }
  .sample h3 { font-size:15px; }.sample p { font-size:11px; }.sample-art small { font-size:8px; }
  .sample-note { flex-direction:column; gap:7px; }.form-row { grid-template-columns:1fr; }
  .extras td,.extras th { padding:10px 7px; font-size:12px; }.scope { padding:22px; }.scope dl div { grid-template-columns:1fr; gap:2px; }
  .cta { padding:28px 24px; }.section-count { display:none; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.stp { opacity:1; } }

/* Multi-page revision: same palette and components, shorter focused pages. */
/* Preserve the original premium revision palette without further color overrides. */
body { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
.brand-emblem { width:42px;height:48px;overflow:visible;flex:none;background:transparent;display:grid;place-items:center; }
.brand-emblem img { width:100%;height:100%;object-fit:contain;transform:none;display:block; }
.logo { gap:12px; }.wordmark { font-size:23px; }.brand-note { font-size:7px;letter-spacing:.25em; }
.menu { gap:0; }.menu a { font-size:12px;padding:8px 9px; }.menu a.nav-cta { padding:10px 13px; }
.menu a[aria-current="page"] { background:var(--fill);color:var(--accent-ink); }.menu a.nav-cta[aria-current="page"] { background:var(--cta-bg);color:var(--cta-fg); }
.breadcrumb { padding-top:28px;font-size:12px;color:var(--t3);display:flex;gap:10px;align-items:center; }
.breadcrumb a { color:var(--t2);text-decoration:none; }.breadcrumb span[aria-hidden] { color:#a89d89; }
.sec { padding-block:45px 55px; }
.head { margin-bottom:30px;max-width:790px; }.head h1 { font-size:clamp(29px,3.5vw,42px);font-weight:600;line-height:1.35;letter-spacing:-.045em; }.head .lead { font-size:16px; }
.head h1:focus { outline:none; }
.hs-pin { padding-block:50px 36px; }.hs-copy h1 { font-size:clamp(34px,4.6vw,51px); }.hs-copy { gap:19px; }
.hs-stage { margin-top:32px;padding:18px 24px;max-width:720px; }.edit-window { grid-template-columns:.85fr 1.15fr;align-items:center;gap:24px; }
.home-logo { display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:6px; }
.hero-meta { margin-top:0; }.ticker { display:none; }
.home-links { padding-block:28px 45px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.home-links .next { background:var(--card);border:1px solid var(--line);padding:22px;gap:7px; }.home-links .next b { font-size:19px; }.home-links .next span { font-size:13px; }
.plans { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start; }
.plan { padding:23px 19px;gap:11px; }.plan h2 { font-size:20px;line-height:1.35;letter-spacing:-.04em; }.plan .tag { font-size:9px;letter-spacing:.1em; }
.plan .plan-desc { font-size:13px;min-height:44px; }.plan .price { font-size:32px;margin-top:0; }.plan .price small { font-size:13px; }
.plan-facts { display:grid;gap:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0; }
.plan-facts div { display:grid;grid-template-columns:65px 1fr;gap:5px;padding:6px 0;font-size:12px; }.plan-facts dt { color:var(--t2); }.plan-facts dd { margin:0;font-weight:600; }
.plan.featured .plan-facts { border-color:#ffffff25; }.plan.featured .plan-facts dt,.plan.featured .plan-desc { color:var(--cta-t2); }
.plan.featured h2 { color:var(--cta-fg); }.plan.monthly { border-color:#bca984; }
.plan .btn { height:44px;padding-inline:10px;font-size:13px; }.plan-details { font-size:13px; }
.plan-details summary { list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:10px 0 3px;gap:8px;font-size:13px;font-weight:600; }
.plan-details summary::after { content:'+';font-size:19px;font-weight:400; }.plan-details[open] summary::after { content:'−'; }
.plan-details summary::-webkit-details-marker { display:none; }
.detail-list { margin:18px 0 0;display:grid;gap:13px; }.detail-list dt { font-weight:600;font-size:12px; }.detail-list dd { margin:4px 0 0;color:var(--t2);font-size:12px;line-height:1.7; }
.plan.featured .detail-list dd,.plan.featured .plan-example { color:var(--cta-t2); }
.plan-example { border-top:1px solid var(--line);margin-top:18px;padding-top:15px;font-size:12px;color:var(--t2); }.plan.featured .plan-example { border-color:#ffffff25; }
.plan-note { margin-top:12px;font-size:12px;color:var(--t2); }.plan.featured .plan-note { color:var(--cta-t2); }
.plan-index { display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap; }.plan-index a { padding:7px 12px;font-size:12px;border:1px solid var(--line);border-radius:5px;text-decoration:none;color:var(--t2);background:var(--card); }
.scope { margin-top:18px;padding:0 24px; }.scope>summary { cursor:pointer;list-style:none;padding:20px 0;font-size:15px;font-weight:600;display:flex;justify-content:space-between; }.scope>summary::after { content:'+'; }.scope[open]>summary::after { content:'−'; }.scope dl { padding-bottom:22px; }.scope .note { padding-bottom:20px; }
.pricing-bottom { margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--t2);font-size:13px; }
.pricing-bottom a { white-space:nowrap; }
.page-cta { margin-top:28px;padding:22px 25px;background:var(--fill);border:1px solid var(--line);border-radius:9px;display:flex;justify-content:space-between;align-items:center;gap:20px; }.page-cta p { font-size:14px;color:var(--t2); }.page-cta b { display:block;font-size:18px;color:var(--t1);margin-bottom:4px; }.page-cta .btn { height:44px;font-size:13px;white-space:nowrap; }
.agency-flow { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px; }.agency-flow .tile { padding:24px 21px; }.agency-flow .k { font-size:11px;color:var(--accent-ink);letter-spacing:.08em; }.agency-flow h2 { font-size:20px;line-height:1.4;margin:14px 0 13px; }.agency-flow p { font-size:14px; }
.mix-example { margin-top:25px;padding:25px;background:var(--card);border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:.8fr 1.2fr;gap:35px; }.mix-example h2 { font-size:23px;margin-bottom:10px; }.mix-example p { color:var(--t2);font-size:13px; }.mix-example table { width:100%;border-collapse:collapse;font-size:13px; }.mix-example td,.mix-example th { text-align:left;padding:11px 7px;border-bottom:1px solid var(--line); }.mix-example th { font-size:12px;color:var(--t2); }.mix-example tfoot { font-weight:700; }.mix-example td:nth-child(n+2),.mix-example th:nth-child(n+2) { white-space:nowrap;text-align:right; }
.process-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0; }.process-grid li { background:var(--card);border:1px solid var(--line);border-radius:10px;padding:25px; }.process-grid .step-no { color:var(--accent-ink);font:italic 26px Georgia,serif; }.process-grid h2 { margin:10px 0;font-size:20px;line-height:1.4; }.process-grid p { font-size:14px;color:var(--t2); }.process-grid dl { margin:19px 0 0;padding-top:15px;border-top:1px solid var(--line);font-size:12px; }.process-grid dt { font-weight:600;margin-bottom:5px; }.process-grid dd { margin:0;color:var(--t2); }
.contact-section { padding-top:28px;padding-bottom:45px; }.contact-section h1 { color:var(--cta-fg);font-size:36px;line-height:1.35;font-weight:600; }
footer .wrap { padding-block:25px 30px;gap:10px; }.footer-row { display:flex;align-items:center;justify-content:space-between;gap:24px; }.footer-row .wordmark { font-size:19px; }.footer-row .brand-emblem { width:32px;height:38px; }.fnav { gap:8px 17px;font-size:12px; }
.back-top { position:fixed;right:22px;bottom:22px;z-index:24;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--t1);padding:12px 15px;box-shadow:var(--shadow-sm);font:600 12px var(--font);cursor:pointer; }.back-top span { margin-right:6px; }
.mbar { display:none; }
.faq { max-width:860px; }.faq summary { padding-block:21px; }.faq details p { font-size:15px; }
@media(max-width:1050px) { .plans { grid-template-columns:repeat(2,minmax(0,1fr)); }.agency-flow { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:860px) { .sec { padding-block:30px 40px; }.plan { padding:25px; }.process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.home-links { grid-template-columns:1fr;gap:10px; }.home-links .next { padding:17px 20px; }.home-links .next b { font-size:17px; }.footer-row { align-items:start;flex-direction:column;gap:17px; }.fnav { gap:10px 19px; }.mix-example { grid-template-columns:1fr;gap:20px; }.page-cta { padding:20px; }.back-top { right:15px;bottom:15px; }.contact-section { padding-top:20px; }.plan-index { position:sticky;top:76px;z-index:10;background:var(--band);padding-block:10px;margin-top:-10px; }.plan { scroll-margin-top:150px; } }
@media(max-width:560px) { .plans,.agency-flow,.process-grid { grid-template-columns:1fr; }.plan .plan-desc { min-height:0; }.plan-facts div { grid-template-columns:90px 1fr; }.plan .price { font-size:36px; }.plan-index a { font-size:11px;padding:7px 8px; }.plan-index { gap:5px; }.plan-index a:nth-child(n+3) { background:var(--accent-soft); }.page-cta { align-items:start;flex-direction:column;gap:15px; }.page-cta .btn { width:100%; }.pricing-bottom { align-items:start;flex-direction:column;gap:8px; }.hs-stage { padding:15px; }.edit-window { grid-template-columns:.8fr 1.2fr;gap:15px; }.receipt .rrow { font-size:10px;grid-template-columns:40px 1fr;gap:5px;padding:5px 0; }.receipt .rh { font-size:9px;padding-bottom:8px;gap:5px; }.receipt .track { height:9px; }.receipt .rnote { font-size:9px; }.receipt .rrow.total { display:block; }.home-logo { min-height:0;object-fit:contain; }.contact-section h1 { font-size:30px; }.scope { padding:0 19px; }.scope dl { grid-template-columns:1fr; }.mix-example { padding:20px; }.mix-example td,.mix-example th { font-size:11px;padding:10px 5px; }.back-top { padding:11px 13px; }.back-top span { margin-right:3px; } }

/* Keep each page focused while giving the content room to breathe. */
.sec { padding-block:58px 68px; }
.reading-section { border-top:1px solid var(--line); }
.reading-section .wrap { padding-block:64px 70px; }
.reading-head { max-width:720px;margin-bottom:32px; }
.reading-head h2 { font-size:clamp(26px,3vw,34px);line-height:1.4;letter-spacing:-.04em;font-weight:600;margin:14px 0; }
.reading-head>p:last-child { color:var(--t2);font-size:16px;line-height:1.8; }
.reading-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.reading-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.reading-card { border:1px solid var(--line);border-radius:10px;background:var(--card);padding:28px 30px; }
.reading-card .card-label { color:var(--accent-ink);font-size:11px;letter-spacing:.12em;font-weight:600; }
.reading-card h3 { font-size:22px;font-weight:600;line-height:1.45;letter-spacing:-.035em;margin:12px 0; }
.reading-card p { color:var(--t2);font-size:14px;line-height:1.85; }
.reading-card ul { padding:0;margin:20px 0 0;list-style:none;display:grid;gap:10px; }
.reading-card li { border-top:1px solid var(--line);padding-top:10px;font-size:13px;line-height:1.75;color:var(--t2); }
.reading-card li b { color:var(--t1);font-weight:600; }
.reading-link { display:inline-flex;align-items:center;gap:18px;margin-top:23px;color:var(--accent-ink);font-size:13px;font-weight:600;text-decoration:none; }
.reading-link:hover { text-decoration:underline;text-underline-offset:5px; }
.reading-note { border-left:2px solid var(--accent-ink);padding:4px 0 4px 18px;margin-top:28px;font-size:13px;line-height:1.8;color:var(--t2); }
.brief-example { display:grid;grid-template-columns:.65fr 1.35fr;gap:32px;align-items:start;margin-top:28px;padding:25px 28px;background:var(--fill);border:1px solid var(--line);border-radius:9px; }
.brief-example h3 { font-size:18px;font-weight:600;line-height:1.6; }
.brief-example blockquote { margin:0;font-size:14px;line-height:1.9;color:var(--t2); }
.faq-intro { max-width:680px;color:var(--t2);font-size:16px;line-height:1.8;margin-top:17px; }
.faq-group-label { font-size:12px;letter-spacing:.06em;color:var(--accent-ink);margin:30px 0 15px;font-weight:600; }
.faq details p { max-width:760px;line-height:1.85; }
@media(max-width:860px) {
  .sec { padding-block:38px 48px; }
  .reading-section .wrap { padding-block:42px 48px; }
  .reading-head { margin-bottom:24px; }
  .reading-grid,.reading-grid.three { gap:14px; }
  .reading-card { padding:22px; }
  .reading-card h3 { font-size:20px; }
  .reading-grid.three { grid-template-columns:1fr; }
  .brief-example { grid-template-columns:1fr;gap:12px;padding:22px; }
}
@media(max-width:560px) {
  .reading-grid { grid-template-columns:1fr; }
  .reading-head>p:last-child,.faq-intro { font-size:14px; }
  .reading-card ul { margin-top:15px;gap:8px; }
  .reading-card h3 { margin-block:9px; }
  .reading-note { margin-top:22px; }
}

/* Company details use the existing brand palette. */
footer .wrap { padding-block:32px 34px;gap:0; }
.business-info { display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:25px;padding-block:25px 27px;border-top:1px solid var(--line);font-size:13px;line-height:1.8;color:var(--t2); }
.business-group { min-width:0; }
.business-group h2 { margin:0 0 15px;font-size:13px;font-weight:600;line-height:1.5;color:var(--t1); }
.business-group dl { display:grid;gap:9px;margin:0; }
.business-group dl > div { display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:baseline; }
.business-info dt { font-weight:400; }
.business-info dd { margin:0;color:var(--t1);word-break:keep-all;overflow-wrap:anywhere; }
.business-contact dl > div { grid-template-columns:82px minmax(0,1fr); }
.business-info a { color:inherit;text-decoration:none; }
.business-info a:hover { text-decoration:underline;text-underline-offset:4px; }
footer .fline { margin-top:0;padding-top:18px;padding-right:92px;border-top:1px solid var(--line);gap:12px 24px; }
.contact-channels { display:grid;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--cta-line); }
.contact-channels a { display:flex;flex-wrap:wrap;gap:4px 15px;align-items:baseline;color:var(--cta-fg);text-decoration:none; }
.contact-channels span { font-size:12px;color:var(--cta-t2);min-width:72px; }
.contact-channels strong { font-size:16px;font-weight:500;overflow-wrap:anywhere; }
.contact-channels a:hover strong { text-decoration:underline;text-underline-offset:4px; }
@media(max-width:760px) { .business-info { grid-template-columns:1fr;gap:25px;margin-top:22px;padding-block:24px; }.business-group h2 { margin-bottom:13px; }.business-group dl > div { grid-template-columns:120px minmax(0,1fr);gap:12px; }footer .fline { padding-right:0; } }
@media(max-width:560px) { footer .wrap { padding-bottom:72px; }.business-info { font-size:12px; }.contact-channels strong { font-size:15px; } }

/* Brand message: retain the original logo and palette beside the timer. */
.hs-stage { max-width:780px;padding:24px 28px; }
.edit-window { grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:34px; }
.time-story { --timer-turn:360deg;--timer-offset:0;width:100%;text-align:left;min-width:0; }
.time-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px; }
.time-heading p { font-size:11px;letter-spacing:.035em;font-weight:600;color:var(--t2); }
.timer-toggle { display:grid;place-items:center;flex:none;width:34px;height:34px;padding:8px;border:1px solid var(--line);border-radius:50%;color:var(--t2);background:transparent;cursor:pointer; }
.timer-toggle[hidden] { display:none; }
.timer-toggle:hover { background:var(--bg);color:var(--t1); }
.timer-toggle:focus-visible { outline:2px solid var(--accent);outline-offset:3px; }
.timer-toggle svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.timer-play-icon,.timer-replay-icon { display:none; }
.time-story[data-paused="true"] .timer-pause-icon { display:none; }
.time-story[data-paused="true"] .timer-play-icon { display:block; }
.time-story[data-phase="complete"] .timer-pause-icon,.time-story[data-phase="complete"] .timer-play-icon { display:none; }
.time-story[data-phase="complete"] .timer-replay-icon { display:block; }
.timer-scene { display:grid; }
.timer-scene > div { grid-area:1 / 1;min-width:0; }
/* Both states reserve their space to prevent the page jumping after three seconds. */
.timer-scene > [hidden] { display:block !important;visibility:hidden;pointer-events:none; }
.timer-finish { padding-top:16px; }
.time-returned { display:flex;align-items:center;gap:11px;margin-bottom:20px;font-size:12px;font-weight:500;color:var(--accent-ink); }
.time-returned svg { width:40px;height:40px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round; }
.time-consult { display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:44px;margin-top:22px;padding:10px 18px;border-radius:6px;background:var(--cta-bg);color:var(--cta-fg);font-size:13px;font-weight:500;text-decoration:none; }
.time-consult:hover { background:var(--t1); }
.time-consult:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.time-story[data-phase="complete"] .timer-finish { animation:time-reveal .5s ease-out both; }
@keyframes time-reveal { from { opacity:0;transform:translateY(7px); }to { opacity:1;transform:translateY(0); } }
.timer-display { display:flex;align-items:center;gap:20px;margin:15px 0 18px; }
.timer-dial { width:100px;height:100px;flex:none;overflow:visible; }
.timer-outline { fill:none;stroke:var(--accent);stroke-opacity:.18;stroke-width:1; }
.timer-ticks { stroke:var(--accent);stroke-opacity:.45;stroke-width:1; }
.timer-sweep { fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:var(--timer-offset);stroke-linecap:round;transform:rotate(-90deg);transform-origin:60px 60px; }
.timer-hand { transform:rotate(var(--timer-turn));transform-origin:60px 60px; }
.timer-hand path { fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round; }
.timer-hand circle,.timer-center { fill:var(--accent); }
.timer-readout { display:flex;flex-direction:column;gap:2px; }
.timer-kicker { color:var(--accent-ink);font-size:9px;letter-spacing:.18em;font-weight:500; }
.timer-digits { color:var(--t1);font-family:Georgia,'Times New Roman',serif;font-size:52px;line-height:1.2;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.045em;white-space:nowrap; }
.timer-digits span { color:var(--accent);padding-inline:2px; }
.time-story h2 { margin:0;font-size:28px;line-height:1.42;font-weight:600;letter-spacing:-.045em;color:var(--t1); }
.time-story h2 em { font-style:normal;color:var(--accent-ink); }
.time-description { margin-top:12px;font-size:12px;line-height:1.85;color:var(--t2); }
.time-signoff { display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:10px;color:var(--t2); }
.timer-status-dot { width:5px;height:5px;flex:none;border-radius:50%;background:var(--accent);opacity:.65; }
.time-story[data-running="true"] .timer-status-dot { animation:time-breathe 2.8s ease-in-out infinite; }
@keyframes time-breathe { 50% { opacity:.25; } }
@media(max-width:860px) { .hs-stage { margin-inline:auto;max-width:720px; }.edit-window { gap:26px; } }
@media(max-width:560px) {
  .hs-stage { margin:28px 22px 0;padding:22px; }
  .edit-window { grid-template-columns:1fr;gap:22px; }
  .home-logo { width:146px;justify-self:center; }
  .time-story { border-top:1px solid var(--line);padding-top:14px; }
  .timer-toggle { width:40px;height:40px; }
  .timer-display { justify-content:center;gap:24px;margin:8px 0 18px; }
  .timer-dial { width:86px;height:86px; }
  .timer-digits { font-size:50px; }
  .time-story h2 { font-size:27px;text-align:center; }
  .timer-finish { text-align:center; }
  .timer-finish h2 { font-size:24px; }
  .time-returned { justify-content:center; }
  .time-consult { width:100%; }
  .time-description { text-align:center; }
  .time-signoff { justify-content:center;font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .time-story .timer-status-dot,.time-story .timer-finish { animation:none; } }



.footer-row .original-emblem {width:35px;height:35px;overflow:hidden;border-radius:6px;background:#211e1b;} .original-emblem img {object-fit:cover;transform:scale(2.45);transform-origin:50% 49%;}



.business-phones { display:flex;flex-wrap:wrap;gap:2px 16px; }.business-phones a { white-space:nowrap; }



.contact-phone-row { display:grid;grid-template-columns:72px minmax(0,1fr);gap:15px;align-items:baseline; }.contact-phone-numbers { display:grid;gap:12px; }

/* FRAMIVIO_MONTHLY_START */
.mf-page{padding:42px 0 0;color:var(--t1)}
.mf-intro{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:37px}.mf-intro h1{font-size:clamp(36px,4.5vw,55px);font-weight:600;line-height:1.22;letter-spacing:-.06em;margin:19px 0 0}.mf-intro h1 em{font-style:normal;color:var(--accent-ink)}
.mf-intro-aside{padding-bottom:3px}.mf-intro-aside>span{font:italic 13px Georgia,serif;letter-spacing:.04em;color:#8c7b58}.mf-intro-aside p{font-size:13px;color:var(--t2);line-height:1.9;margin:13px 0 0}.mf-intro-aside p:last-child{font-size:11px;margin-top:14px;color:var(--t1)}.mf-intro-aside b{margin-left:14px;font-weight:400}
.mf-brand-brief{display:flex;align-items:center;gap:30px;border-block:1px solid var(--line);padding:23px 0}.mf-brand-name{display:flex;align-items:center;gap:14px;min-width:215px}.mf-brand-symbol{display:grid;place-items:center;width:54px;height:54px;border:1px solid #c8bc9e;border-radius:50%;font-size:17px;font-weight:300;letter-spacing:-.12em;color:#705b3c;background:#eeeadf}.mf-brand-name b{display:block;font-size:16px;font-weight:600}.mf-brand-name div>span{display:block;font-size:10px;color:var(--t2);margin-top:5px}.mf-brand-brief>p{font-size:12px;line-height:1.9;margin:0}.mf-brand-brief>p span{color:var(--t2)}.mf-brief-tags{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}.mf-brief-tags span{font-size:10px;padding:5px 8px;border:1px solid #dedbd0;border-radius:3px;color:#6f705f}
.mf-feed-top{display:flex;justify-content:space-between;align-items:center;margin:27px 0 17px;gap:15px}.mf-filters{display:flex;gap:5px;flex-wrap:wrap}.mf-filters button{border:0;background:none;color:#77796e;font:500 12px var(--font);cursor:pointer;padding:9px 12px;border-radius:3px}.mf-filters button[aria-pressed=true]{background:#293128;color:#fff}.mf-filters button:hover{background:#e8e7df;color:#252923}.mf-filters button[aria-pressed=true]:hover{background:#3a4536;color:#fff}.mf-filters button span{margin-left:5px;font-size:9px;opacity:.7}.mf-feed-top>p{font-size:10px;letter-spacing:.015em;color:#797e72;margin:0}
.mf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 14px;align-items:start;min-height:290px}.mf-post{min-width:0}.mf-post[hidden]{display:none!important}.mf-post-button{display:block;width:100%;text-align:left;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.mf-post-button:focus-visible{outline:2px solid #716039;outline-offset:5px;border-radius:2px}.mf-cover{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5;width:100%;background:#e9e2d2;color:#fff;container-type:inline-size;transition:box-shadow .25s,transform .25s}
.mf-cover>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .55s cubic-bezier(.2,.6,.2,1)}.mf-post-button:hover .mf-cover>img{transform:scale(1.045)}.mf-post-button:hover .mf-cover{box-shadow:0 7px 15px -8px #4b392d50;transform:translateY(-2px)}.mf-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#261a0d30,transparent 70%,#261a0d45)}
.mf-cover-brand{position:absolute;left:9%;top:7%;font-size:17px;font-size:8cqw;font-weight:400;letter-spacing:-.09em;line-height:1.4}.mf-cover-brand>span{display:block;font-size:5px;font-size:2.3cqw;letter-spacing:.16em;margin-top:3px;opacity:.85}.mf-cover-copy{position:absolute;top:29%;left:9%;right:6%}.mf-cover-copy small{display:block;font-size:5px;font-size:2.5cqw;letter-spacing:.13em;margin-bottom:12px;line-height:1.5}.mf-cover-copy strong{display:block;font-size:22px;font-size:10.3cqw;font-weight:500;line-height:1.45;letter-spacing:-.05em;word-break:keep-all}.mf-cover-bottom{position:absolute;bottom:7%;left:9%;right:9%;display:flex;justify-content:space-between;align-items:center;font-size:5px;font-size:2.5cqw;letter-spacing:.12em}.mf-cover-bottom>span:last-child{font-size:14px;font-size:6cqw}
.mf-post-caption{display:flex;justify-content:space-between;gap:5px;margin-top:10px;font-size:10px;line-height:1.5;color:#656b5e}.mf-post-caption b{font:italic 13px Georgia,serif;color:#8a7859;margin-right:7px}.mf-post-caption>span:last-child{font-size:8px;color:#888c80}.mf-post-caption i{font-style:normal;margin-left:5px;color:#716039}
.mf-morning{color:#35291f}.mf-morning .mf-shade{background:linear-gradient(180deg,#f5e7cd50,transparent 65%,#fff0)}.mf-morning .mf-cover-copy{top:27%}.mf-morning .mf-cover-bottom{color:#fff}
.mf-standard{background:#43382c;color:#f0e8d4}.mf-standard .mf-shade{background:none}.mf-standard .mf-cover-copy{top:34%;}.mf-standard .mf-cover-copy small{font:italic 10.5cqw/1.3 Georgia,serif;letter-spacing:-.04em;margin-bottom:14px;max-width:95%}.mf-standard .mf-cover-copy strong{font-size:6cqw;letter-spacing:.02em;line-height:1.7}.mf-standard .mf-art-detail{position:absolute;width:45%;aspect-ratio:1;right:-12%;top:12%;border:1px solid #aa957849;border-radius:50%}.mf-standard .mf-art-detail:after{content:'';position:absolute;inset:12%;border:1px solid #aa957849;border-radius:50%}
.mf-space .mf-cover-copy{top:29%}.mf-space .mf-cover-copy strong{font-size:9.5cqw}.mf-space .mf-shade{background:linear-gradient(180deg,#241b0d68,transparent 75%,#1b140b45)}
.mf-pastry .mf-cover-copy{top:26%}.mf-pastry .mf-shade{background:linear-gradient(180deg,#26160678,transparent 70%,#26160655)}
.mf-brew .mf-cover-copy{top:48%}.mf-brew .mf-cover-copy strong{font-size:9cqw}.mf-brew .mf-shade{background:linear-gradient(180deg,#1a100a35,transparent 25%,#23170877 75%,#1c120966)}
.mf-pairing{background:#e6deca;color:#5c432d}.mf-pairing>img{width:80%;height:40%;inset:auto -4% 11% auto;border-radius:50%;object-position:50% 80%;transform:rotate(-12deg)}.mf-post-button:hover .mf-pairing>img{transform:rotate(-12deg) scale(1.045)}.mf-pairing .mf-shade{background:none}.mf-pairing .mf-cover-copy{top:25%}.mf-pairing .mf-cover-copy small{display:none}.mf-pairing .mf-cover-copy strong{font-size:11cqw;line-height:1.3}.mf-pairing .mf-cover-bottom{color:#604b34}
.mf-question{background:#efebdf;color:#434a37}.mf-question .mf-shade{background:none}.mf-question .mf-art-detail:before{content:'Q.';position:absolute;right:7%;top:12%;font:italic 49cqw/.9 Georgia,serif;color:#c7c7af;z-index:-1}.mf-question .mf-cover-copy{top:48%}.mf-question .mf-cover-copy strong{font-size:10cqw}.mf-question .mf-cover-copy small{font-size:2.8cqw}
.mf-choice{background:#3f4b3e;color:#efeadc}.mf-choice .mf-shade{background:none}.mf-choice .mf-cover-copy{top:26%}.mf-choice .mf-cover-copy small{font:italic 18cqw/1.25 Georgia,serif;letter-spacing:-.04em;max-width:100%;margin-bottom:13px}.mf-choice .mf-cover-copy strong{font-size:6cqw}.mf-choice .mf-art-detail{position:absolute;width:35%;aspect-ratio:1;border:1px solid #d9d5b830;border-radius:50%;right:-14%;bottom:15%}
.mf-afternoon>img{object-position:64% 85%;transform:scale(1.25)}.mf-post-button:hover .mf-afternoon>img{transform:scale(1.3)}.mf-afternoon .mf-cover-copy{top:31%}.mf-afternoon .mf-shade{background:linear-gradient(180deg,#36251740,#36251715 40%,#36251760)}
.mf-closing{background:#4c382b;color:#f0e6d1}.mf-closing>img{inset:auto 7% 14% auto;width:49%;height:32%;object-position:50% 80%;opacity:.8}.mf-closing .mf-shade{background:none}.mf-closing .mf-cover-copy{top:28%}.mf-closing .mf-cover-copy strong{font-size:9cqw}.mf-closing .mf-art-detail{position:absolute;width:28%;height:37%;left:10%;bottom:13%;border:1px solid #c3a98370}
.mf-note{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding:20px 0 24px;border-bottom:1px solid var(--line);font-size:9px;color:#828577;line-height:1.8}.mf-note p{margin:0}.mf-note b{color:#8a7c5e;font-size:8px;letter-spacing:.06em;font-weight:500;margin-right:10px}.mf-note>span{font-size:9px}
.mf-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:40px 0 52px}.mf-bottom h2{font-size:28px;font-weight:500;letter-spacing:-.045em;line-height:1.4;margin:12px 0 0}.mf-bottom>div>p:not(.eyebrow){font-size:12px;line-height:1.9;color:var(--t2);margin:0 0 17px}.mf-bottom .btn{font-size:12px;padding:13px 18px;height:auto;min-height:44px}
.mf-dialog{padding:0;border:1px solid #d9d3c6;border-radius:5px;width:min(860px,calc(100vw - 38px));max-width:none;max-height:calc(100dvh - 40px);overflow:auto;background:#faf9f6;color:#292c24;box-shadow:0 25px 90px #18190f50}.mf-dialog::backdrop{background:#181b18a6;backdrop-filter:blur(4px)}.mf-dialog:not([open]){display:none}.mf-dialog-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dedbd0;padding:12px 21px;gap:20px;background:#faf9f6;position:sticky;top:0;z-index:4}.mf-dialog-top>span:first-child{font:italic 16px Georgia,serif;color:#8b7656}.mf-dialog-top>span:nth-child(2){font-size:8px;letter-spacing:.16em;color:#7b8071}.mf-dialog button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}.mf-dialog-top button{font-size:27px;line-height:1;width:32px;height:32px}.mf-dialog-inner{display:grid;grid-template-columns:.85fr 1.15fr}.mf-dialog-visual{background:#eae5da;padding:28px;display:flex;align-items:center;justify-content:center}.mf-dialog-visual .mf-cover{aspect-ratio:4/5;max-width:310px;box-shadow:0 8px 25px #4733221c}.mf-dialog-copy{padding:27px 30px 23px;min-width:0}.mf-dialog-copy .eyebrow{font-size:9px}.mf-dialog-copy h2{font-size:27px;line-height:1.4;letter-spacing:-.04em;margin:10px 0 11px;font-weight:600}.mf-detail-goal{font-size:12px;color:#69705e;line-height:1.85;margin:0}.mf-hook{border-left:2px solid #8c7852;padding:2px 0 2px 13px;margin:21px 0}.mf-hook>span{font-size:9px;color:#8a7d60}.mf-hook p{font-size:15px;font-weight:500;line-height:1.7;margin:5px 0 0;word-break:keep-all}.mf-dialog-copy h3{font-size:11px;font-weight:600;margin:21px 0 12px}.mf-scenes{list-style:none;padding:0;margin:0;display:grid;gap:13px}.mf-scenes li{display:grid;grid-template-columns:57px 1fr;gap:12px}.mf-scenes span{font:10px/1.8 Georgia,serif;color:#897454;white-space:nowrap}.mf-scenes p{font-size:11px;line-height:1.8;color:#656c5b;margin:0;word-break:keep-all}.mf-materials{border-top:1px solid #dfded4;padding-top:14px;margin-top:20px;display:grid;grid-template-columns:68px 1fr;gap:10px;font-size:10px;line-height:1.8;color:#717765}.mf-materials b{font-weight:500;color:#494e41}.mf-dialog-cta{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:#293128;color:#fff;text-decoration:none;font-size:11px;margin-top:21px;border-radius:3px;gap:15px}.mf-dialog-note{font-size:9px;line-height:1.7;color:#909385;margin:9px 0 0}.mf-dialog-nav{border-top:1px solid #dedbd0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 20px;background:#f4f1e9}.mf-dialog-nav>span{font-size:8px;color:#848777}.mf-dialog-nav button{font-size:11px;padding:7px 0}.mf-dialog button:focus-visible,.mf-dialog-cta:focus-visible,.mf-filters button:focus-visible{outline:2px solid #716039;outline-offset:3px}.mf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1000px){.mf-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 10px}.mf-intro h1{font-size:44px}.mf-brand-brief{gap:20px}.mf-brief-tags{max-width:150px}.mf-post-caption{font-size:9px}.mf-post-caption b{font-size:11px;margin-right:5px}.mf-note{flex-direction:column;gap:3px}}
@media(max-width:760px){.mf-page{padding-top:24px}.mf-intro{gap:25px}.mf-intro h1{font-size:38px}.mf-intro-aside{max-width:220px}.mf-intro-aside p{font-size:11px}.mf-brand-brief{flex-wrap:wrap;gap:18px}.mf-brand-name{min-width:190px}.mf-brand-brief>p{font-size:11px}.mf-brief-tags{display:none}.mf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:21px 13px}.mf-feed-top>p{display:none}.mf-dialog-inner{grid-template-columns:.75fr 1fr}.mf-dialog-visual{padding:18px}.mf-dialog-copy{padding:22px}.mf-dialog-copy h2{font-size:23px}.mf-scenes li{grid-template-columns:47px 1fr;gap:8px}.mf-bottom h2{font-size:25px}}
@media(max-width:560px){.mf-intro{display:block;margin-bottom:27px}.mf-intro h1{font-size:36px;margin-top:16px}.mf-intro .eyebrow{font-size:8px}.mf-intro-aside{max-width:none;margin-top:21px}.mf-intro-aside>span{display:none}.mf-intro-aside p{font-size:12px}.mf-intro-aside p:last-child{font-size:11px;margin-top:10px}.mf-brand-brief{padding:18px 0;gap:14px}.mf-brand-name{min-width:0;width:100%}.mf-brand-symbol{width:44px;height:44px;font-size:15px}.mf-brand-name b{font-size:14px}.mf-brand-name div>span{font-size:9px}.mf-brand-brief>p{font-size:11px;padding-left:58px}.mf-feed-top{margin-top:20px;margin-bottom:15px}.mf-filters{gap:2px}.mf-filters button{padding:9px;font-size:11px}.mf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.mf-post-caption{font-size:9px;margin-top:8px}.mf-post-caption>span:last-child{font-size:8px}.mf-note{padding:19px 0;font-size:8px}.mf-note b{display:block;margin-bottom:3px}.mf-note>span{font-size:8px}.mf-bottom{display:block;padding:30px 0 40px}.mf-bottom h2{font-size:25px}.mf-bottom>div+div{margin-top:19px}.mf-bottom .btn{font-size:11px}.mf-dialog{width:calc(100vw - 22px);max-height:calc(100dvh - 24px)}.mf-dialog-top{padding:9px 15px}.mf-dialog-inner{display:block}.mf-dialog-visual{padding:20px}.mf-dialog-visual .mf-cover{width:155px;flex-shrink:0}.mf-dialog-copy{padding:23px}.mf-dialog-copy h2{font-size:24px}.mf-detail-goal{font-size:12px}.mf-scenes p{font-size:11px}.mf-dialog-nav{padding:11px 16px}.mf-dialog-nav>span{display:none}}
@media(prefers-reduced-motion:reduce){.mf-page *{transition:none!important}.mf-post-button:hover .mf-cover{transform:none}.mf-post-button:hover .mf-cover>img{transform:none}}


.mf-gallery-bar{border-top:1px solid var(--line);padding:25px 0 22px}.mf-industries{display:flex;flex-wrap:wrap;gap:7px}.mf-industries button{border:1px solid #deddd4;border-radius:3px;padding:10px 16px;background:transparent;color:#5e6558;font:500 12px var(--font);cursor:pointer;min-height:42px}.mf-industries button span{font-size:9px;opacity:.65;margin-left:10px}.mf-industries button[aria-pressed=true]{background:#293128;color:#fff;border-color:#293128}.mf-industries button:focus-visible{outline:2px solid #8c7852;outline-offset:3px}.mf-gallery-bar>p{font-size:10px;color:#797e72;margin:14px 0 0}.mf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 19px}.mf-grid[data-filter]:not([data-filter=all]){grid-template-columns:repeat(3,minmax(0,1fr))}.mf-post-info{padding:13px 0 0}.mf-post-info>span{font-size:9px;color:#8a7c5e;letter-spacing:.04em}.mf-post-info h2{font-size:15px;font-weight:500;letter-spacing:-.035em;line-height:1.5;margin:4px 0 10px}.mf-card-inquiry{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #dfded5;padding:10px 0 0;font-size:11px;text-decoration:none;color:#434b3c;min-height:35px}.mf-card-inquiry:hover{color:#8d7044}.mf-cover-brand{font-size:5.5cqw;letter-spacing:.03em;font-weight:500}.mf-cover-brand>span{font-size:2.2cqw;letter-spacing:.12em}.mf-cover-copy strong{font-size:10cqw}.mf-space .mf-cover-copy strong{font-size:9.5cqw}.mf-brew .mf-cover-copy strong{font-size:9cqw}.mf-beauty,.mf-product,.mf-custom{color:#3d3035}.mf-beauty .mf-shade,.mf-product .mf-shade,.mf-custom .mf-shade{background:linear-gradient(180deg,#fff2,transparent 60%)}.mf-beauty .mf-cover-bottom,.mf-product .mf-cover-bottom,.mf-custom .mf-cover-bottom{color:#3d3035}.mf-beauty .mf-cover-copy,.mf-product .mf-cover-copy,.mf-custom .mf-cover-copy{top:27%}.mf-product{color:#263747}.mf-product .mf-cover-bottom{color:#263747}.mf-fitness{color:#f9f5e9}.mf-fitness .mf-shade{background:linear-gradient(180deg,#12201435,transparent 65%,#12201444)}.mf-fitness .mf-cover-bottom{color:#fff}.mf-dining{color:#fff6e4}.mf-dining .mf-shade{background:linear-gradient(180deg,#200b0660,transparent 70%,#200b0645)}.mf-dining.mf-morning .mf-cover-bottom{color:#fff}.mf-custom .mf-cover-copy strong{font-size:9.3cqw}.mf-custom .mf-cover-copy small{font-size:2.3cqw}.mf-post .mf-pairing>img{inset:0;width:100%;height:100%;border-radius:0;object-position:center;transform:none}.mf-post .mf-pairing .mf-cover-copy{top:27%}.mf-dialog .mf-pairing>img{inset:0;width:100%;height:100%;border-radius:0;object-position:center;transform:none}.mf-dialog .mf-pairing .mf-cover-copy{top:27%}.mf-dialog .mf-cover-brand{font-size:5.5cqw}.mf-dialog-nav>span{font-size:9px}
@media(max-width:1000px){.mf-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:27px 14px}.mf-industries button{padding:10px 12px}.mf-post-info h2{font-size:14px}}
@media(max-width:760px){.mf-grid,.mf-grid[data-filter]:not([data-filter=all]){grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 13px}.mf-intro-aside{max-width:230px}.mf-post-info h2{font-size:13px}}
@media(max-width:560px){.mf-grid,.mf-grid[data-filter]:not([data-filter=all]){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.mf-industries{gap:6px}.mf-industries button{padding:9px 11px;font-size:11px;min-height:39px}.mf-industries button span{margin-left:6px;font-size:8px}.mf-intro h1{font-size:34px}.mf-intro-aside{max-width:none}.mf-post-info{padding-top:10px}.mf-post-info h2{font-size:13px;margin-bottom:8px}.mf-card-inquiry{font-size:10px}.mf-gallery-bar{padding:20px 0}.mf-cover-copy small{margin-bottom:8px}.mf-intro-aside p{font-size:12px}}
 .mf-custom .mf-shade{background:linear-gradient(180deg,#f8f4e740,#f8f4e750 45%,transparent 70%)}.mf-dining.mf-brew .mf-cover-copy{top:27%}
/* FRAMIVIO_MONTHLY_END */