/* NextGen Lab — Observatory v2. Evolved from 2026-09-12 „02 Emerald Observatory“ (owner's pick, 2026-09-14). */

@font-face { font-family: Sofia; src: url('./assets/fonts/SofiaSans-cyrillic-400-700.woff2') format('woff2'); font-weight: 400 700; unicode-range: U+0400-052F, U+2DE0-2DFF, U+A640-A69F; font-display: swap; }
@font-face { font-family: Sofia; src: url('./assets/fonts/SofiaSans-latin-400-700.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --night: #061f19;
  --night-2: #0a2a21;
  --film-bg: #061f19;
  --ink-light: #e5f1df;
  --muted-light: #a9bfb0;
  --paper: #e4ede0;
  --paper-2: #dce9d2;
  --ink: #123d31;
  --muted-dark: #5d7064;
  --mint: #b6d6b0;
  --lime: #a9d392;
  --cream: #e0edce;
  --pad: clamp(20px, 5vw, 88px);
  --header: 84px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--header); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink-light); font-family: Sofia, Arial, sans-serif; font-size: 18px; line-height: 1.45; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -.045em; font-weight: 500; }
h2 { font-size: clamp(40px, 5vw, 76px); }
h3 { font-size: 30px; }
p { max-width: 60ch; }
em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
::selection { background: #c8e896; color: #07382a; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }

.eyebrow { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.38; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 100; background: #fff; color: #000; padding: 14px; }
.skip:focus { top: 10px; }

.dark { background: var(--night); color: var(--ink-light); --line: #c3e2ce2a; --muted: var(--muted-light); }
.light { background: var(--paper); color: var(--ink); --line: #123d3133; --muted: var(--muted-dark); }
.section { padding: clamp(72px, 9vw, 120px) var(--pad); position: relative; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.section-head > p { max-width: 34ch; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 48px; padding: 14px 24px; border: 1px solid transparent; border-radius: 50px; background: var(--ink); color: var(--cream); font-size: 16px; line-height: 1.1; white-space: nowrap; transition: transform .16s var(--ease-out), background-color .2s ease; }
.btn:active { transform: scale(.97); }
.btn.cream { background: var(--cream); color: var(--ink); }
.btn.outline { background: transparent; border-color: currentColor; color: inherit; }
.text-link { background: none; border: 0; padding: 6px 0; border-bottom: 1px solid currentColor; font-size: 16px; transition: opacity .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #1f5a47; }
  .btn.cream:hover { background: #f0f7e6; }
  .btn.outline:hover { background: #e5f1df14; }
  .text-link:hover { opacity: .72; }
}

/* ---------------------------------------------------------------- header */
.header { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--header); padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--ink-light); }
.header::before { content: ''; position: absolute; inset: 0; background: #061f19f0; border-bottom: 1px solid #c3e2ce1f; opacity: 0; transition: opacity .25s ease; z-index: -1; }
.header.solid::before { opacity: 1; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 24px; letter-spacing: -1px; font-weight: 600; white-space: nowrap; }
.brand img { width: 42px; height: 42px; object-fit: contain; background: #edf3e6; border-radius: 50%; padding: 5px; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; }
.nav-links a { position: relative; padding: 8px 0; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links .nav-case { display: none; }
.header-cta { font-size: 14px; min-height: 44px; padding: 11px 20px; }
.menu-toggle { display: none; background: transparent; border: 1px solid #c3e2ce44; border-radius: 40px; padding: 10px 16px; min-height: 44px; }

/* ---------------------------------------------------------------- film */
.film { position: relative; height: 300svh; background: var(--film-bg); color: var(--ink-light); }
.film-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--film-bg); }
.film-canvas, .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-poster { object-fit: cover; object-position: 50% 58%; }
.film.ready .film-poster { visibility: hidden; }
.film-canvas { opacity: 0; transition: opacity .3s ease; }
.film.ready .film-canvas { opacity: 1; }
/* soft darkening under the text so captions stay readable over the orbits */
.film-shade { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 60% 26% at 50% 0%, color-mix(in srgb, var(--film-bg) 75%, transparent), transparent 72%),
  radial-gradient(ellipse 50% 38% at 50% 100%, color-mix(in srgb, var(--film-bg) 92%, transparent), transparent 78%),
  linear-gradient(90deg, color-mix(in srgb, var(--film-bg) 82%, transparent), transparent 42%); }

[data-film-layer], .film-caption, .film-index, .film-progress i { will-change: transform, opacity; }
/* a soft mint light that swells while the zirconia is milled; app.js drives opacity and follows the film horizontally */
.film-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 30% 38% at var(--glow-x, 50%) 50%, #7fe0b02e, transparent 72%); }
.film-caption > * { will-change: transform, opacity; }

.film-intro { position: absolute; top: clamp(104px, 14svh, 150px); left: 0; right: 0; text-align: center; z-index: 2; pointer-events: none; padding: 0 var(--pad); transform: translateY(var(--intro-y, 0px)); }
.film-intro .eyebrow { margin-bottom: 22px; color: #bbd2ba; font-size: 11px; }
.film-intro h1 { font-size: clamp(54px, min(6.8vw, 11svh), 105px); max-width: 13ch; margin: auto; line-height: .96; }
.film-intro h1 em { font-size: 1.05em; color: var(--mint); }

.film-buy { position: absolute; left: 50%; bottom: clamp(26px, 5svh, 56px); z-index: 3; width: min(820px, calc(100% - 2 * var(--pad))); transform: translate(var(--buy-x, -50%), var(--buy-y, 0px)); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.film-buy > p { font-size: 19px; max-width: 46ch; }
.promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-top: 1px solid #c3e2ce2e; border-bottom: 1px solid #c3e2ce2e; }
.promise div { padding: 10px 22px; text-align: left; }
.promise div + div { border-left: 1px solid #c3e2ce2e; }
.promise dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); }
.promise dd { font-size: 15px; }
.actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }

.orbital-word { position: absolute; left: var(--pad); top: 34%; writing-mode: vertical-rl; font-size: 10px; letter-spacing: .24em; opacity: .8; z-index: 2; }

.film-index { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 3; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.film-index button { position: relative; display: grid; grid-template-columns: 26px auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0 8px 16px; background: none; border: 0; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .45; transition: opacity .2s ease; }
.film-index button::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #c3e2ce33; }
.film-index button::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--lime); transform: scaleY(var(--fill, 0)); transform-origin: top; }
.film-index button[aria-current='step'] { opacity: 1; }
.film-index .n { color: var(--lime); }
/* macro frames can pass behind the index: a soft dark pool and shadow keep it readable */
.film-index::before { content: ''; position: absolute; inset: -48px -36px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--film-bg) 78%, transparent), transparent); }
.film-index button { text-shadow: 0 1px 10px #000c; }
@media (hover: hover) { .film-index button:hover { opacity: 1; } }

.film-captions { position: absolute; left: var(--pad); bottom: clamp(48px, 11svh, 120px); width: min(440px, 36vw); height: 300px; z-index: 3; }
.film-caption { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; }
.film-caption .eyebrow { color: var(--lime); margin-bottom: 16px; }
.film-caption h2 { font-size: clamp(34px, 3.3vw, 52px); margin-bottom: 16px; }
.film-caption p { font-size: 17px; color: #c9dccd; }
.film-caption h2, .film-caption p, .film-caption .eyebrow, .film-intro h1, .film-buy > p { text-shadow: 0 2px 22px #000b; }
.header .nav-links a, .header .brand span { text-shadow: 0 1px 12px #0009; }
.film-caption .btn { margin-top: 24px; }

.film-cue { position: absolute; left: 50%; top: calc(100% - 22px); transform: translate(-50%, -100%); display: none; }
.film-progress { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 2px; background: #c3e2ce1a; z-index: 3; }
.film-progress i { display: block; height: 100%; background: var(--lime); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------------------------------------------------------------- solutions */
.solutions .section-head h2 { max-width: 20ch; }
.orbital-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.orbital-card { display: flex; flex-direction: column; padding: 32px 24px 26px; border-right: 1px solid var(--line); }
.orbital-card:first-child { padding-left: 0; }
.orbital-card:last-child { border-right: 0; padding-right: 0; }
.orbital-card .num { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #6d8671; }
.card-symbol { height: 170px; margin: 22px auto 26px; display: flex; align-items: center; justify-content: center; }
.card-symbol img { width: 100%; height: 190px; object-fit: contain; transition: transform .3s var(--ease-out); }
.orbital-card h3 { font-size: 31px; margin-bottom: 14px; }
.orbital-card p { font-size: 16px; color: var(--muted); margin-bottom: 22px; }
.card-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.term { font-size: 13px; letter-spacing: .06em; color: #3f6b55; }
.card-send { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 1px solid currentColor; font-size: 15px; transition: transform .16s var(--ease-out); }
.card-send span { transition: transform .22s var(--ease-out); }
.card-send:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .orbital-card:hover .card-symbol img { transform: translateY(-6px) rotate(-2deg); }
  .card-send:hover span { transform: translate(3px, -3px); }
}
.also { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.also .eyebrow { margin-right: 10px; color: var(--muted); }
.also button { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 40px; background: transparent; font-size: 15px; transition: transform .16s var(--ease-out), background-color .2s ease; }
.also button:active { transform: scale(.97); }
@media (hover: hover) { .also button:hover { background: #123d310d; } }
.price-note { margin-left: auto; font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- case */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; overflow: clip; }
.case::before { content: ''; position: absolute; left: -10%; right: -10%; top: 40px; height: 220px; border-top: 1px solid #78ad8566; border-radius: 50%; pointer-events: none; }
.case-intro { position: sticky; top: calc(var(--header) + 32px); display: flex; flex-direction: column; gap: 22px; }
.case-intro .eyebrow { color: var(--lime); }
.case-intro h2 { font-size: clamp(52px, 6vw, 96px); }
.case-intro h2 em { color: var(--mint); }
.case-intro .lead { color: #c9dccd; }
.readout { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; background: #0a2a2199; }
.readout .eyebrow { color: var(--muted-light); font-size: 11px; margin-bottom: 10px; }
.case-line { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; min-height: 34px; }
.case-line span { display: inline-block; padding: 6px 12px; border-radius: 30px; background: #e0edce14; border: 1px solid #c3e2ce33; font-size: 14px; animation: chip-in .22s var(--ease-out); }
.case-line span:first-child { background: var(--cream); color: var(--ink); border-color: var(--cream); }
@keyframes chip-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.case-talk { font-size: 15px; color: var(--muted-light); }
.case-talk .text-link { color: var(--ink-light); font-size: 15px; margin-left: 4px; }
.proto-note { font-size: 13px; color: #8ea596; }

.case-form { border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 3vw, 40px); background: linear-gradient(180deg, #0b2c23, #07221b); min-width: 0; }
.case-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.case-steps button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 0; border-top: 2px solid #c3e2ce26; background: none; font-size: 14px; text-align: left; opacity: .55; transition: opacity .2s ease; }
.case-steps button:disabled { cursor: default; opacity: .32; }
.case-steps button[aria-current='step'] { opacity: 1; border-top-color: var(--lime); }
.case-steps button.done { opacity: .85; border-top-color: #a9d39266; }
.case-steps .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; flex: none; }
.case-steps button.done .n { background: var(--lime); color: var(--ink); border-color: var(--lime); }

.case-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.case-step:focus { outline: none; }
.case-step.entering { animation: step-in .26s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } }
.case-step > legend { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 20px; padding: 0; }
.service-options { display: grid; gap: 8px; }
.service-options label { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.service-options input { width: 18px; height: 18px; margin: 0; accent-color: var(--lime); }
.service-options label:has(input:checked) { border-color: #a9d392aa; background: #a9d39214; }
.service-options .opt-time { font-size: 13px; color: var(--muted-light); white-space: nowrap; }
@media (hover: hover) { .service-options label:hover { background: #e5f1df0a; } }
.case-note, .date-hint, .tooth-summary { font-size: 14px; color: var(--muted-light); margin-top: 14px; }
.tooth-summary { color: var(--ink-light); font-size: 16px; min-height: 24px; }
.warn { color: #f2d08a !important; }
.step-error { color: #ffb4a3; font-size: 14px; min-height: 20px; margin-top: 6px; }
.step-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.step-actions .btn:only-child { margin-left: auto; }

.chart-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chart-tools button { min-height: 40px; padding: 8px 14px; border-radius: 30px; border: 1px solid var(--line); background: transparent; font-size: 14px; transition: transform .16s var(--ease-out), background-color .2s ease; }
.chart-tools button:active { transform: scale(.97); }
@media (hover: hover) { .chart-tools button:hover { background: #e5f1df0f; } }
.chart-tools input { flex: 1 1 140px; min-width: 0; }
.tooth-chart { position: relative; width: 100%; max-width: 560px; aspect-ratio: 440 / 292; margin: 18px auto 0; }
.tooth-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arch-guide { fill: none; stroke: #c3e2ce26; stroke-width: 1; }
.jaw { fill: #8ea596; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.bridge { stroke: var(--lime); stroke-width: 3.2; stroke-linecap: round; }
.tooth { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; border-radius: 48%; border: 1px solid #c3e2ce4d; background: #0d3128; color: #cfe3d3; font-size: clamp(8px, 1.9vw, 11px); line-height: 1; transition: transform .16s var(--ease-out), background-color .18s ease, color .18s ease, border-color .18s ease; }
.tooth[aria-pressed='true'] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tooth:active { transform: translate(-50%, -50%) scale(.92); }
@media (hover: hover) and (pointer: fine) { .tooth:hover { border-color: var(--lime); } }

.field { display: block; font-size: 13px; letter-spacing: .04em; color: var(--muted-light); margin: 18px 0 8px; }
.optional { color: #7f9587; font-size: 12px; }
.case-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .case-form select, .case-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid #c3e2ce38; background: #06201a; color: var(--ink-light); font-size: 16px; }
.case-form textarea { resize: vertical; }
.case-form input::placeholder, .case-form textarea::placeholder { color: #7f9587; }
.case-form input[type=date] { color-scheme: dark; }
.case-form [aria-invalid='true'] { border-color: #ffb4a3 !important; }
.shade-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.shade { min-height: 42px; border-radius: 10px; border: 2px solid transparent; background: var(--c); color: #3b3222; font-size: 12px; font-weight: 600; transition: transform .16s var(--ease-out); }
.shade:active { transform: scale(.95); }
.shade[aria-checked='true'] { border-color: var(--lime); box-shadow: 0 0 0 2px #061f19 inset; }
.shade-later { grid-column: 1 / -1; min-height: 42px; border-radius: 10px; border: 1px dashed #c3e2ce44; background: transparent; font-size: 14px; }
.shade-later[aria-checked='true'] { border-style: solid; border-color: var(--lime); }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 20px; border: 1px dashed #c3e2ce55; border-radius: 16px; text-align: center; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone span { font-size: 14px; color: var(--muted-light); }
.dropzone.drag, .dropzone:focus-within { border-color: var(--lime); background: #a9d39212; }
.file-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.file-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #e5f1df0d; font-size: 14px; overflow-wrap: anywhere; }
.file-list small { margin-left: 10px; color: var(--muted-light); }
.file-list button { background: none; border: 0; font-size: 20px; min-width: 36px; min-height: 36px; }
.send-other { border: 0; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.send-other legend { font-size: 13px; color: var(--muted-light); margin-bottom: 8px; padding: 0; }
.send-other label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 30px; font-size: 14px; cursor: pointer; }
.send-other label:has(input:checked) { border-color: #a9d392aa; background: #a9d39214; }
.send-other input { accent-color: var(--lime); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.case-done:focus { outline: none; }
.case-done { animation: step-in .3s var(--ease-out); }
.proto-flag { display: inline-block; font-size: 12px; letter-spacing: .06em; padding: 6px 12px; border-radius: 30px; background: #f2d08a1f; color: #f2d08a; margin-bottom: 18px; }
.case-done h3 { font-size: clamp(32px, 3vw, 44px); margin-bottom: 8px; }
.case-ref { display: block; font-size: 14px; letter-spacing: .12em; color: var(--lime); margin-bottom: 16px; }
.case-done > p { color: #c9dccd; font-size: 16px; }
.case-status { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 13px; }
.case-status li { padding-top: 10px; border-top: 2px solid #c3e2ce26; color: var(--muted-light); }
.case-status li.now { border-top-color: var(--lime); color: var(--ink-light); }
#case-summary { display: grid; gap: 0; border-top: 1px solid var(--line); }
#case-summary div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
#case-summary dt { color: var(--muted-light); }

/* ---------------------------------------------------------------- process */
.process .section-head h2 { font-size: clamp(48px, 6vw, 96px); }
.orbit-steps { position: relative; list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.orbit-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line); }
.orbit-steps li { position: relative; padding-top: 34px; }
.orbit-steps li::before { content: ''; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1px solid #3f6b55; }
.step-n { display: block; font-size: 14px; color: #3f6b55; margin-bottom: 14px; letter-spacing: .08em; }
.orbit-steps p { font-size: 18px; line-height: 1.35; }
.process-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.accept-list { border-top: 1px solid var(--line); }
.accept-list div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.accept-list dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 26px; line-height: 1; transition: transform .22s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 22px 0; color: var(--muted); font-size: 17px; }

/* ---------------------------------------------------------------- lab */
.lab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.lab-copy { display: flex; flex-direction: column; gap: 22px; }
.lab-copy .eyebrow { color: var(--lime); }
.lab-copy h2 em { color: var(--mint); }
.lab-copy .lead { color: #c9dccd; }
.contact-list { border-top: 1px solid var(--line); }
.contact-list div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.contact-list dt { color: var(--muted-light); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.contact-list a { border-bottom: 1px solid #e5f1df55; overflow-wrap: anywhere; }
.machine-facts summary { cursor: pointer; font-size: 15px; color: var(--mint); min-height: 44px; display: flex; align-items: center; }
.machine-facts dl { margin: 6px 0 10px; }
.machine-facts dl div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 8px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.machine-facts dt { color: var(--muted-light); }
.source-note { font-size: 13px; color: var(--muted-light); }
.source-note a { border-bottom: 1px solid currentColor; }
.lab-photos { display: grid; grid-template-columns: 1fr 34%; gap: 14px; align-items: end; }
.photo { position: relative; overflow: hidden; border-radius: 18px; }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.photo-main { height: clamp(320px, 38vw, 520px); }
.photo-side { height: clamp(220px, 24vw, 330px); }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 10px; padding: 36px 16px 12px; font-size: 12px; letter-spacing: .06em; background: linear-gradient(transparent, #061f19cc); color: #e5f1df; }
@media (hover: hover) { .photo:hover img { transform: scale(1.03); } }

/* ---------------------------------------------------------------- footer */
.footer { padding: 70px var(--pad) 26px; background: var(--paper-2); }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-bottom: 64px; }
.footer h2 { max-width: 17ch; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; font-size: 12px; }
.footer-bottom .brand { font-size: 18px; }
.footer-bottom .disclosure { max-width: 46ch; color: var(--muted); }


/* ---------------------------------------------------------------- hero details (owner chose variant Б): promise icons, italic numeral, orbit ring on the CTA */
.promise div { position: relative; padding: 10px 16px 10px 48px; }
.promise-icon { display: block; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
  fill: none; stroke: var(--lime); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.promise-icon .fill { fill: var(--lime); stroke: none; }
.promise .num { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 1.9em;
  line-height: .6; color: var(--mint); vertical-align: -.1em; margin: 0 .05em; }
@property --orbit-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes orbit-spin { to { --orbit-a: 360deg; } }
.film-buy .btn.cream, .film-caption .btn.cream { position: relative; isolation: isolate; }
.film-buy .btn.cream::after, .film-caption .btn.cream::after {
  content: ''; position: absolute; inset: -5px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--orbit-a), transparent 0 62%, #b6f0cf 82%, #ffffff 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .film-buy .btn.cream:hover::after, .film-caption .btn.cream:hover::after { opacity: 1; animation: orbit-spin 2.6s linear infinite; }
}
@media (max-width: 1100px) and (min-width: 641px) { .promise div:first-child { padding-left: 48px; } }
@media (min-aspect-ratio: 19/10) and (min-width: 1100px) {
  .film-buy { width: min(860px, 50vw); }
  .promise div:first-child { padding-left: 30px; }
  .promise div:first-child .promise-icon { left: 0; }
}
@media (max-width: 640px) {
  /* phone: icon on the left, label above value, all left-aligned */
  .promise div, .promise div:first-child { display: block; padding: 9px 0 9px 36px; }
  .promise dd { text-align: left; }
  .promise-icon, .promise div:first-child .promise-icon { left: 2px; width: 22px; height: 22px; }
  .promise .num { font-size: 1.6em; }
}
@media (prefers-reduced-motion: reduce) { .btn.cream:hover::after { animation: none; } }

/* ---------------------------------------------------------------- dialog */
.talk-dialog { border: 1px solid #123d3122; border-radius: 26px; background: var(--paper); color: var(--ink); padding: clamp(28px, 5vw, 60px); width: min(600px, calc(100% - 30px)); max-height: 90dvh; overflow: auto; }
.talk-dialog[open] { animation: dialog-in .24s var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: scale(.97) translateY(6px); } }
.talk-dialog::backdrop { background: #061e17b3; }
.talk-dialog .close { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; font-size: 26px; border: 0; background: none; }
.talk-dialog h2 { font-size: clamp(34px, 5vw, 44px); margin: 18px 0; }
.talk-dialog p { font-size: 17px; margin-bottom: 22px; }
.talk-dialog .email { display: inline-block; font-size: clamp(17px, 3vw, 23px); border-bottom: 1px solid; overflow-wrap: anywhere; }
.talk-dialog .private-note { font-size: 13px; margin: 24px 0 0; color: var(--muted-dark); }
.talk-form label { display: block; font-size: 13px; letter-spacing: .04em; color: var(--muted-dark); margin: 16px 0 8px; }
.talk-form input:not(.talk-trap) { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid #123d3155; background: #f3f8ee; color: var(--ink); font-size: 17px; }
.talk-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.talk-form .talk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.talk-form .btn { width: 100%; margin-top: 22px; }
.talk-dialog .talk-error { margin: 14px 0 0; font-size: 15px; color: #9c2b1c; }
.talk-dialog .private-note a { text-decoration: underline; text-underline-offset: 3px; }
.talk-done:focus { outline: none; }
.talk-dialog .talk-direct { margin: 26px 0 6px; font-size: 14px; color: var(--muted-dark); }
.talk-dialog .email { margin-right: 18px; }
/* the cookie banner while the dialog is open (app.js moves it in): pinned to the bottom of the dialog */
.talk-dialog .consent { position: sticky; left: auto; right: auto; bottom: 0; max-width: none; margin: 22px 0 0; }
.talk-dialog .consent p { font-size: 15px; margin: 0 0 14px; }
.noscript { padding: 20px var(--pad); }

/* ---------------------------------------------------------------- reveal */
.reveal { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .film-captions { width: min(380px, 40vw); }
  .orbital-grid { grid-template-columns: 1fr 1fr; }
  .orbital-card:nth-child(2) { border-right: 0; padding-right: 0; }
  .orbital-card:nth-child(3) { padding-left: 0; }
  .orbital-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .orbit-steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .orbit-steps::before { display: none; }
}
@media (max-width: 980px) {
  .case, .lab, .process-grid { grid-template-columns: 1fr; }
  .case::before { display: none; }
  /* one column: title and lede, then the form, then the order readout and the notes */
  .case { row-gap: 20px; }
  .case-intro { display: contents; }
  .case-intro > * { order: 2; }
  .case-intro > .eyebrow, .case-intro > h2, .case-intro > .lead { order: 0; }
  .case-form { order: 1; margin: 12px 0; }
  .film-buy { bottom: 22px; }
  .film-index { display: none; }
}
@media (max-width: 860px) {
  :root { --header: 72px; }
  .nav-links { display: none; position: absolute; top: calc(var(--header) - 6px); left: var(--pad); right: var(--pad); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 22px; background: #0a2a21; border: 1px solid #c3e2ce2a; border-radius: 18px; }
  .nav-links.open { display: flex; animation: step-in .2s var(--ease-out); }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid #c3e2ce1f; }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .nav-case { display: block; color: var(--lime); }
  .header-cta { display: none; }
  .menu-toggle { display: block; }
  .brand { font-size: 21px; }
  .brand img { width: 36px; height: 36px; }
  .orbital-word { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .film { height: 280svh; }
  .film-stage { min-height: 560px; }
  .film-shade { background:
    radial-gradient(ellipse 90% 26% at 50% 0%, color-mix(in srgb, var(--film-bg) 80%, transparent), transparent 75%),
    linear-gradient(0deg, color-mix(in srgb, var(--film-bg) 95%, transparent) 0%, color-mix(in srgb, var(--film-bg) 70%, transparent) 30%, transparent 52%); }
  .film-intro { top: 92px; }
  .film-intro .eyebrow { font-size: 9px; margin-bottom: 14px; }
  .film-intro h1 { font-size: clamp(44px, 13vw, 58px); }
  .film-buy { bottom: 18px; gap: 14px; }
  .film-buy > p { font-size: 16px; }
  .promise { flex-direction: column; border: 0; width: 100%; }
  .promise div, .promise div:first-child { display: block; padding: 7px 0 7px 36px; border-top: 1px solid #c3e2ce26; }
  .promise div + div { border-left: 0; }
  .promise dd { font-size: 14px; text-align: left; }
  .actions { gap: 18px; }
  .film-captions { left: 20px; right: 20px; width: auto; bottom: 30px; height: 260px; }
  .film-caption h2 { font-size: 32px; }
  .film-caption p { font-size: 16px; }
  .section-head { display: block; margin-bottom: 34px; }
  .section-head > p { margin-top: 18px; }
  .orbital-grid { grid-template-columns: 1fr; }
  .orbital-card, .orbital-card:nth-child(n) { display: grid; grid-template-columns: 110px 1fr; column-gap: 16px; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .orbital-card .num { grid-column: 1 / -1; margin-bottom: 8px; }
  .card-symbol { grid-column: 1; grid-row: 2 / 4; height: 110px; width: 110px; margin: 0; }
  .card-symbol img { height: 120px; }
  .orbital-card h3 { grid-column: 2; font-size: 25px; margin-bottom: 8px; }
  .orbital-card p { grid-column: 2; font-size: 15px; margin-bottom: 0; }
  .card-foot { grid-column: 1 / -1; margin-top: 14px; flex-direction: column; align-items: flex-start; }
  .price-note { margin-left: 0; width: 100%; }
  .case-form { padding: 20px 16px; border-radius: 20px; }
  .case-steps { gap: 4px; }
  .case-steps button { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; padding: 8px 4px; }
  .service-options label { grid-template-columns: 20px 1fr; }
  .service-options .opt-time { grid-column: 2; }
  .shade-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-pair { grid-template-columns: 1fr; }
  #case-summary div { grid-template-columns: 96px 1fr; }
  .orbit-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 44px; }
  .orbit-steps li { padding: 0 0 26px 34px; }
  .orbit-steps li::before { top: 4px; }
  .orbit-steps li::after { content: ''; position: absolute; left: 6px; top: 20px; bottom: 0; width: 1px; background: var(--line); }
  .orbit-steps li:last-child::after { display: none; }
  .accept-list div, .contact-list div { grid-template-columns: 96px 1fr; }
  .lab-photos { grid-template-columns: 1fr; }
  .photo-main { height: 280px; }
  .photo-side { height: 220px; }
  .footer-main { display: block; padding-bottom: 40px; }
  .footer-main .btn { margin-top: 26px; }
  .footer-bottom { flex-wrap: wrap; padding-bottom: 40px; }
  .footer-bottom .disclosure { max-width: none; width: 100%; }
  
}
@media (max-height: 760px) and (min-width: 641px) {
  .film-intro { top: 94px; }
  .film-intro .eyebrow { margin-bottom: 12px; }
  .film-buy { gap: 12px; bottom: 18px; }
  .film-buy > p { font-size: 17px; }
}
/* wide, short screens such as the owner's 2.4:1 monitor: text column on the left, the film on the right */
@media (min-aspect-ratio: 19/10) and (min-width: 1100px) {
  .film-stage { --film-x: .64; }
  .film-intro { left: var(--pad); right: auto; width: min(48vw, 820px); padding: 0; text-align: left; top: clamp(110px, 20svh, 200px); }
  .film-intro h1 { margin: 0; max-width: none; }
  .film-buy { left: var(--pad); width: min(760px, 46vw); align-items: flex-start; text-align: left; --buy-x: 0px; }
  .promise { justify-content: flex-start; }
  .promise div:first-child { padding-left: 30px; }
  .actions { justify-content: flex-start; }
  .orbital-word { display: none; }
  .film-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--film-bg) 86%, transparent), transparent 50%); }
}

/* ---------------------------------------------------------------- reduced motion: no scrubbing, one still */
/* Keep complete rows at tablet widths instead of wrapping isolated items. */
@media (max-width: 1100px) {
  .also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .also .eyebrow, .also .price-note { grid-column: 1 / -1; margin: 0; }
  .also button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; border-radius: 18px; text-align: left; }
}
@media (max-width: 860px) {
  .promise { grid-template-columns: 1fr; border: 0; }
  .promise div, .promise div:first-child { padding: 7px 0 7px 36px; border-top: 1px solid #c3e2ce26; }
  .promise div + div { border-left: 0; }
  .promise-icon, .promise div:first-child .promise-icon { left: 2px; width: 22px; height: 22px; }
  .promise dd { text-align: left; }
  .film-buy .actions > * { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) {
  .also { grid-template-columns: 1fr; }
  .also button { width: 100%; }
}
@media (max-width: 480px) {
  .film-stage { min-height: 680px; }
  .film-buy .actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .film-buy .actions .text-link { border: 1px solid #c3e2ce55; border-radius: 50px; padding: 12px 24px; }
  .step-actions { gap: 12px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .film { height: auto; }
  .film-stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header) + 24px) var(--pad) 40px; gap: 32px; }
  .film-intro, .film-buy, .film-captions, .film-caption { position: relative; inset: auto; left: auto; bottom: auto; top: auto; transform: none; }
  .film-intro { padding: 0; }
  .film-buy { width: 100%; margin: 40vh auto 0; }
  .film-captions { width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .film-caption { opacity: 1 !important; visibility: visible !important; }
  .film-caption .btn { display: none; }
  .film-index, .film-progress, .orbital-word { display: none; }
  .film-shade { background: linear-gradient(0deg, var(--film-bg) 0%, color-mix(in srgb, var(--film-bg) 90%, transparent) 40%, transparent 70%); }
  .film-canvas, .film-poster { height: 100svh; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .film-captions { grid-template-columns: 1fr; }
  .film-buy { margin-top: 34vh; }
}

/* ---------------------------------------------------------------- footer legal row, honeypot, legal pages and 404 */
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 16px; font-size: 12px; color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal-links a { border-bottom: 1px solid currentColor; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.proto-note .text-link { font-size: 13px; padding: 0; margin-left: 4px; }

.legal-body { background: var(--paper); color: var(--ink); --line: #123d3133; --muted: var(--muted-dark); }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--pad); background: var(--night); color: var(--ink-light); }
.legal-main { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--pad) 80px; }
.legal-main h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 14px; }
.legal-main .updated { color: var(--muted); font-size: 14px; margin-bottom: 32px; }
.legal-main h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.15; margin: 40px 0 12px; }
.legal-main p, .legal-main li, .legal-main dd { font-size: 17px; line-height: 1.6; color: #25493d; max-width: 70ch; }
.legal-main p + p { margin-top: 12px; }
.legal-main ul { padding-left: 20px; margin: 10px 0; }
.legal-main li + li { margin-top: 6px; }
.legal-main a { border-bottom: 1px solid currentColor; }
.legal-main dl { border-top: 1px solid var(--line); margin: 12px 0; }
.legal-main dl div { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.legal-main dt { color: var(--muted); font-size: 15px; padding-top: 2px; }
.draft-note { display: block; padding: 12px 16px; border-radius: 12px; background: #f2d08a40; color: #6b4d12; font-size: 14px; margin-bottom: 28px; }
.todo-mark { background: #f2d08a66; padding: 0 5px; border-radius: 4px; }
.notfound-main { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
@media (max-width: 640px) { .legal-main dl div { grid-template-columns: 1fr; gap: 2px; } .legal-header .btn { display: none; } }

/* Case details: preserve native hidden semantics and readable summaries. */
#shade-picker[hidden], #case-material[hidden] { display: none; }
.implant-later { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.implant-later input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
#case-summary dd { overflow-wrap: anywhere; white-space: pre-wrap; }

/* Cookie consent (consent.js) */
.consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; padding: 20px 22px; border: 1px solid rgba(182,214,176,.28); border-radius: 22px; background: rgba(6,31,25,.96); color: var(--ink-light); box-shadow: 0 18px 50px rgba(0,0,0,.35); font-size: 15px; line-height: 1.45; backdrop-filter: blur(10px); }
.consent p { margin: 0 0 14px; }
.consent a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { flex: 1; min-height: 44px; padding: 10px 18px; font-size: 15px; }
.cookie-settings { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Prices (generated section, tools/build_prices.py) */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.price-group { padding: 28px 28px 8px 0; }
.price-group + .price-group { padding-left: 28px; border-left: 1px solid var(--line); }
.price-group h3 { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #3f6b55; }
.price-group dl { margin: 0; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.price-row:last-child { border-bottom: 0; }
.price-row dt small { font-size: 13px; color: var(--muted); margin-left: 6px; }
.price-row dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-row dd.ask { font-weight: 400; font-size: 14px; color: var(--muted); }
.price-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.price-foot p { margin: 0; color: var(--muted); font-size: 15px; max-width: 46ch; }
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-group, .price-group + .price-group { padding: 24px 0 4px; border-left: 0; }
  .price-group + .price-group { border-top: 1px solid var(--line); }
}

/* Case form: live estimate (price + ready date) */
.estimate { margin: 18px 0 4px; padding: 16px 18px; border: 1px solid #c3e2ce40; border-radius: 16px; background: #c3e2ce0d; }
.estimate[hidden] { display: none; }
.estimate .est-price { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; }
.estimate .est-price b { font-weight: 600; }
.estimate .est-date { margin-top: 4px; font-size: 15px; color: var(--mint); }
.estimate .est-note { margin-top: 8px; font-size: 13px; color: var(--muted); }