/* Hallmark · shape: Workbench (the monthly plan is the product) · genre: modern-minimal · theme: dose (by request, blue ground) · redesign: full · job: hire (quote, WhatsApp, callback)
 * dose: blue · paper: oklch(97.6% 0.011 88) · accent: oklch(48% 0.096 240) · display: Schibsted Grotesk 700 · body: Instrument Sans 400/500 · outlier: DM Mono (times on the label) · hero: Stage on the blue field (text 5, the weekly organiser 6) · nav: three-part bar (5 real destinations, sticky, solid paper) · footer: index columns (a hub with a real sitemap) under a mast · signature: the Dose organiser, seven plastic boxes for the week, any lid opens, the approved Reel label rises with its stamp
 * axes: light/grotesk-sans/cool · posture: committed, the blue ground with window light for hero and close, ink bands and plastic bands alternating with grained paper (owner asked for less white) · imagery: product built in hero, 5 screenshots of sample sites (capture), founder portrait · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, an agency page argues little; led with the deliverable and the public price instead of claims */
/* Hallmark · dropped #geo section, its fact moved into the SEO row (id kept) · the homepage had eleven sections and two of them repeated each other */
/* Hallmark · dropped hotel figures 94 %, +23 % RevPAR, 4.9, −40 % · 46a names unsourced metrics; the hotel row links to hotel-solutions.html */
/* Hallmark · dropped "100 % Maßgeschneidert", "∞ Support" tiles · 46a, an unlimited support claim nobody can keep */
/* Hallmark · dropped onclick="toggleFaq(this)" · the FAQ is native details and summary now, same eight questions, same text */
/* Hallmark · dropped js/motion.js, js/reveal.js · one IntersectionObserver reveal and js/chrome.js replace 145 KB of motion and menu code on this page */
/* Hallmark · dropped #ck-pref, #ck-stats, #ck-mkt, #det-ck-pref, #det-ck-stats, #det-ck-mkt, syncCkToggle, acceptAllCookies, acceptSelected, rejectCookies, cookieTab, openCalendly(); return false, assets.calendly.com, calendly.com/privacy, policies.google.com/privacy · the inline cookie dialog is replaced by the shared js/consent.js with the same storage keys; Calendly opens through via35Consent.openCalendly */
/* Hallmark · dropped #concierge-cta, #hv-ig and the Unsplash hotlinks · the hotel chat mock and the stock phone mockups left with their sections */
/* Hallmark · dropped #ruckruf-thema, field with no name · the textarea is still there, now named thema and labelled */
/* Hallmark · waive 71 · the flagged h3 sit inside FAQ summary rows · each FAQ row is its own hairline-parted control, the h3 is its label */
/* Hallmark · answered F17 · the plan cells are a calendar of a sample month; six columns keep a week on one row */
/* Hallmark · waive 38iii · the Hauptleistung tag inside the Social Media row title labels the main service · it is a label of the row, not an accented word */
/* Hallmark · waive 39b · the seven lids are the organiser boxes themselves, 104 to 115px tall in the 3D scene · each day box is pressed whole, like the Dose theme organiser it adapts */
/* Hallmark · answered F4 · the nav keeps a filled quote button because ad visitors land mid-page and the quote is the one action */
@import url("./site.css?v=202610301235");

/* ── hero: the brand blue field, the weekly organiser beside the offer ── */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero--blue { background: var(--color-accent); color: var(--color-blue-ink); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; min-height: calc(100dvh - var(--nav-h) - var(--space-2xl) - var(--space-3xl)); }
.hero h1 { max-width: 14ch; font-size: clamp(2.75rem, 3.6vw + 1rem, 4.75rem); color: var(--color-blue-ink); }
.hero__lead { margin-top: var(--space-lg); color: var(--color-blue-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__actions .btn { padding-inline: var(--space-md) var(--space-lg); }
.hero--blue .btn--quiet { color: var(--color-blue-ink); border-color: var(--color-blue-rule); }
.hero--blue .btn--quiet:hover { background: var(--color-blue-deep); border-color: var(--color-blue-muted); }
.hero--blue .btn--wa .icon { color: var(--color-blue-ink); }
.hero--blue :focus-visible { outline-color: var(--color-blue-focus); }
.hero__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-blue-muted); }
.hero__note b { color: var(--color-blue-ink); font-weight: 500; }


/* the organiser (after the Hallmark theme "Dose"): seven plastic boxes turned three-quarter on the blue,
   lids hinged at the back, the open day's label rising out of its box, a stamp, a ripple carrying the tick to the chips */
.hero__visual { margin: 0; --W: 92px; --G: calc(var(--W) * 0.075); --D: calc(var(--W) * 1.2); --H: calc(var(--W) * 0.44);
  --orgW: calc(7 * var(--W) + 6 * var(--G)); --tx: 46cqw; --ty: 56%; --lw: 236px; --ls: 0.9; --tilt: 52deg; --turn: 19deg;
  position: relative; min-height: 600px; container-type: inline-size; }
.scene { position: absolute; inset: 0; perspective: 1050px; perspective-origin: var(--tx) 6%; pointer-events: none; }
.org { position: absolute; left: calc(var(--tx) - var(--orgW) / 2); top: calc(var(--ty) - var(--D) / 2); width: var(--orgW); height: var(--D); transform-style: preserve-3d; transform: rotateX(var(--tilt)) rotateZ(var(--turn)); }
.org__shade { position: absolute; inset: 6% -2% -26% 3%; border-radius: 30px; background: var(--org-shade); filter: blur(18px); transform: translate(2.5%, 8%) translateZ(-2px); }

.box { --t-deep: oklch(from var(--t) calc(l - 0.2) calc(c + 0.05) h); position: absolute; top: 0; left: calc(var(--i) * (var(--W) + var(--G))); width: var(--W); height: var(--D); transform-style: preserve-3d; }
.box > i { position: absolute; display: block; }
.box__pool { left: 50%; top: 40%; width: 100%; height: 100%; border-radius: calc(var(--W) * 0.2); transform: translateZ(-1px) rotate(calc(-0.5 * var(--turn)));
  background: linear-gradient(160deg, transparent 30%, oklch(from var(--t) 99% calc(c * 0.7) h / 0.9) 46%, transparent 60%), linear-gradient(180deg, oklch(from var(--t) calc(l - 0.08) calc(c + 0.06) h / 0.5), oklch(from var(--t) calc(l - 0.02) calc(c + 0.03) h / 0.3));
  box-shadow: inset 0 0 0 2px oklch(from var(--t) 98% calc(c * 0.6) h / 0.6); filter: blur(4px); }
.box__floor { inset: 0; border-radius: calc(var(--W) * 0.1); background: radial-gradient(70% 60% at 40% 40%, oklch(from var(--t) calc(l + 0.06) c h / 0.5), transparent 70%), oklch(from var(--t) l c h / 0.5); box-shadow: inset 0 0 calc(var(--W) * 0.14) calc(var(--W) * 0.02) oklch(from var(--t-deep) l c h / 0.45); }
.box__wall { background: linear-gradient(180deg, oklch(from var(--t) calc(l + 0.04) c h / 0.62), oklch(from var(--t) calc(l - 0.05) calc(c + 0.03) h / 0.82)); }
.box__wall--front { left: 0; right: 0; bottom: 0; height: var(--H); transform-origin: 50% 100%; transform: rotateX(-90deg); border-radius: 3px 3px calc(var(--W) * 0.06) calc(var(--W) * 0.06); box-shadow: inset 0 2px 0 oklch(from var(--glint) l c h / 0.7), inset 0 -3px 4px -2px oklch(from var(--t-deep) l c h / 0.35); }
.box__wall--back { left: 0; right: 0; top: 0; height: var(--H); transform-origin: 50% 0; transform: rotateX(90deg); opacity: 0.8; }
.box__wall--l { left: 0; top: 0; width: var(--H); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, oklch(from var(--t) calc(l + 0.06) c h / 0.7), oklch(from var(--t) l c h / 0.6)); }
.box__wall--r { right: 0; top: 0; width: var(--H); height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, oklch(from var(--t) calc(l - 0.08) calc(c + 0.03) h / 0.85), oklch(from var(--t) calc(l - 0.02) c h / 0.7)); }

.lid { position: absolute; inset: calc(var(--W) * -0.035); margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; border-radius: calc(var(--W) * 0.12); transform-style: preserve-3d; transform-origin: 50% 0; transform: translateZ(calc(var(--H) + 1px)) rotateX(var(--open, 0deg)); transition: transform 900ms var(--ease-out); }
.lid > span { position: absolute; display: block; }
.lid > .lid__top, .lid > .lid__under { inset: 0; border-radius: inherit; backface-visibility: hidden; }
.lid > .lid__top { display: grid; place-items: center; background: linear-gradient(180deg, oklch(from var(--glint) l c h / 0.26), transparent 28%), radial-gradient(110% 80% at 30% 0%, oklch(from var(--t) calc(l + 0.07) c h / 0.6), transparent 62%), oklch(from var(--t) l c h / 0.8);
  box-shadow: inset 0 0 0 1px oklch(from var(--t-deep) l c h / 0.32), inset 0 calc(var(--W) * 0.05) calc(var(--W) * 0.08) calc(var(--W) * -0.06) oklch(from var(--t-deep) l c h / 0.3), inset 0 -3px 1px -1px oklch(from var(--glint) l c h / 0.85); }
.lid__top::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, oklch(from var(--glint) l c h / 0.95) 30%, oklch(from var(--glint) l c h / 0.95) 70%, transparent); filter: blur(0.6px); }
.lid__top b { font: 700 calc(var(--W) * 0.3)/1 var(--font-display); letter-spacing: -0.02em; color: oklch(from var(--t) calc(l - 0.18) calc(c + 0.03) h / 0.9); text-shadow: 0 1.5px 0 oklch(from var(--glint) l c h / 0.7), 0 -1px 0 oklch(from var(--t-deep) calc(l - 0.12) c h / 0.35); transform: translateY(-4%); }
.lid > .lid__under { transform: rotateX(180deg); background: linear-gradient(0deg, oklch(from var(--glint) l c h / 0.3), transparent 30%), oklch(from var(--t) calc(l - 0.02) c h / 0.72); box-shadow: inset 0 0 0 1px oklch(from var(--t-deep) l c h / 0.3), inset 0 0 calc(var(--W) * 0.1) oklch(from var(--t-deep) l c h / 0.2); }
.lid__edge { left: 4px; right: 4px; bottom: 0; height: calc(var(--W) * 0.06); transform-origin: 50% 100%; transform: rotateX(90deg); border-radius: 0 0 4px 4px; background: oklch(from var(--t) calc(l - 0.04) calc(c + 0.02) h / 0.9); box-shadow: inset 0 1px 0 oklch(from var(--glint) l c h / 0.8); }
.lid__tab { left: 34%; right: 34%; bottom: calc(var(--W) * -0.085); height: calc(var(--W) * 0.1); border-radius: 0 0 9px 9px; background: oklch(from var(--t) l c h / 0.85); box-shadow: inset 0 -2px 1px -1px oklch(from var(--glint) l c h / 0.8); backface-visibility: hidden; }
.lid:hover { --open: 9deg; }
.lid:active { --open: 4deg; }
.lid:focus-visible { outline: 3px solid var(--color-blue-focus); outline-offset: 3px; }
.box.is-open .lid { --open: 122deg; }
.box.is-open .box__floor { background: linear-gradient(180deg, oklch(from var(--t-deep) l c h / 0.55), transparent 34%), radial-gradient(70% 55% at 42% 62%, oklch(from var(--t) 99% calc(c * 0.5) h / 0.85), transparent 72%), oklch(from var(--t) calc(l + 0.02) c h / 0.55); box-shadow: inset 0 0 calc(var(--W) * 0.12) calc(var(--W) * 0.03) oklch(from var(--t-deep) l c h / 0.5); }
.box.is-open .box__wall--back { opacity: 1; background: linear-gradient(0deg, oklch(from var(--t-deep) l c h / 0.6), oklch(from var(--t) l c h / 0.75)); }

/* the label: a flat slip over the open box (outside the 3D scene, so no lid cuts through it);
   script anchors its stub at the box's front wall (--ax, --ay) and the clip line at the wall's rim (--gap) */
@property --sink { syntax: "<length>"; inherits: false; initial-value: 0px; }
.label { --sw: calc(var(--W, 92px) * 0.96 / var(--ls, 1)); position: relative; width: var(--lw); color: var(--color-ink); filter: drop-shadow(0 1px 1px var(--org-drop-1)) drop-shadow(8px 14px 14px var(--org-drop-2)); }
.hero__visual > .label { position: absolute; z-index: 2; left: var(--lx, calc(58% - var(--lw) + var(--sw) / 2)); top: var(--ay, 52%); translate: 0 -100%; transform-origin: var(--sx, calc(var(--lw) - var(--sw) / 2)) 100%; transform: translateY(var(--sink)) scale(var(--ls)); clip-path: inset(-80px -80px calc((var(--sink) - var(--gap, 0px)) / var(--ls)) -80px); pointer-events: none; transition: --sink 1000ms var(--ease-out); }
.hero__visual > .label.is-sunk { --sink: 480px; transition: --sink 560ms var(--ease-in); }
.hero__visual > .label.is-moving { transition: none; }
.label p { margin: 0; }
.label__head, .label__row, .label__stub, .stamp { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.label__main { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-md) var(--space-lg) var(--space-lg); border-radius: 10px; background: var(--grain), linear-gradient(180deg, var(--glint), var(--color-paper)); }
.label__head { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); margin-bottom: var(--space-sm) !important; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.label__what { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--color-ink); }
.label__row { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-3xs) !important; font-size: var(--text-sm); color: var(--color-ink-2); }
.label__row .num { font-size: 1rem; font-weight: 500; color: var(--color-ink); }
.label__stub { width: var(--sw); min-height: 92px; margin: -1px 0 0 var(--sm, auto) !important; padding: var(--space-sm) var(--space-sm) 0; border-radius: 0 0 4px 4px; background: radial-gradient(circle, var(--color-rule) 1.1px, transparent 1.5px) 4px 0 / 7px 3px repeat-x, linear-gradient(0deg, oklch(from var(--cast, var(--p-thu)) l c h / 0.5), transparent 70%), var(--color-paper-2); font-size: var(--text-xs); line-height: 1.3; text-align: center; color: var(--color-muted); }

.stamp { justify-self: start; display: grid; gap: 1px; margin-top: var(--space-md) !important; padding: var(--space-xs) var(--space-md) var(--space-sm); border-radius: 8px; color: var(--color-stamp); box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4.5px var(--color-paper), inset 0 0 0 5.5px currentColor; font-size: var(--text-sm); line-height: 1.3; rotate: -2.5deg; transform-origin: 30% 60%; transition: opacity 140ms var(--ease-out), scale 320ms var(--ease-out); }
.stamp > :first-child { font-weight: 500; }
.stamp > :last-child { font-weight: 400; }
.stamp[data-kind="due"] { color: var(--color-muted); rotate: 0deg; box-shadow: inset 0 0 0 1.5px var(--color-rule); }
.label.is-unstamped .stamp { opacity: 0; scale: 1.3; transition: none; }

/* the chips: who has seen it; the tick travels to each */
.ripple { position: absolute; z-index: 2; width: 1100px; height: 1100px; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 64%, var(--org-ripple) 68.5%, var(--org-ripple-soft) 70%, transparent 71%); }
.ripple.is-on { animation: org-ripple 2200ms var(--ease-out) forwards; }
@keyframes org-ripple { from { opacity: 1; transform: scale(0.04); } 70% { opacity: 0.8; } to { opacity: 0; transform: scale(1); } }
.kin { position: absolute; z-index: 3; left: 46%; translate: -50% 0; bottom: 4%; display: flex; gap: var(--space-md); margin: 0; padding: 0; list-style: none; filter: drop-shadow(0 1px 1px var(--org-drop-1)) drop-shadow(5px 8px 8px var(--org-drop-2)); }
.chip { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); border-radius: var(--radius-inner); background: linear-gradient(180deg, var(--color-paper), var(--color-paper-2)); color: var(--color-ink); }
.chip:nth-child(1) { rotate: -2deg; } .chip:nth-child(2) { rotate: 1.2deg; translate: 0 6px; } .chip:nth-child(3) { rotate: -0.8deg; }
.chip__screen { position: relative; display: grid; place-items: center; width: 32px; height: 50px; border-radius: 8px; background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-rule), 1px 2px 4px -2px var(--org-drop-2); }
.chip__screen svg { position: relative; z-index: 1; width: 12px; height: 12px; fill: none; stroke: var(--color-accent-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 360ms var(--ease-out) 160ms; }
.chip__screen::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%; background: var(--color-stamp); scale: 0; transition: scale 360ms var(--ease-out); }
.chip__screen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--org-ping); opacity: 0; }
.chip.is-ticked .chip__screen::before { scale: 1; }
.chip.is-ticked .chip__screen svg { stroke-dashoffset: 0; }
.chip.is-ticked .chip__screen::after { animation: org-ping 1200ms var(--ease-out); }
@keyframes org-ping { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.chip__text { display: grid; font-size: var(--text-sm); line-height: 1.25; white-space: nowrap; }
.chip__text b { font-weight: 500; }
.chip__text [data-s] { color: var(--color-muted); }
.hero__visual figcaption { position: absolute; left: 0; right: 0; bottom: -2rem; text-align: center; font-size: var(--text-xs); color: var(--color-blue-muted); }

@media (prefers-reduced-motion: reduce) {
  .lid, .hero__visual > .label, .stamp, .chip__screen svg, .chip__screen::before { transition: none; }
  .ripple.is-on, .chip.is-ticked .chip__screen::after { animation: none; }
}
@media (max-width: 75rem) {
  .hero__visual { --tx: 50cqw; --ty: 56%; min-height: 560px; }
}
@media (max-width: 60rem) {
  .hero__visual { --W: 88px; --ty: 54%; --ls: 0.86; min-height: 500px; }
  .kin { left: 50%; bottom: 0; }
}
@media (max-width: 40rem) {
  .hero__visual { --W: 44px; --tx: 50cqw; --ty: 60%; --ls: 0.7; --turn: 16deg; min-height: 440px; margin-bottom: var(--space-2xl); }
  .kin { gap: var(--space-xs); }
  .chip { padding: var(--space-xs); gap: var(--space-xs); }
  .chip__screen { width: 24px; height: 38px; }
  .chip__text { font-size: var(--text-xs); }
  .hero__visual figcaption { bottom: -3rem; }
  .label__stub { padding-inline: var(--space-3xs); font-size: 0.625rem; overflow-wrap: anywhere; }
  .kin { bottom: 0; }
}

.plan__mark { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-inner); background: var(--color-night); color: var(--color-night-ink); font-size: var(--text-xs); font-weight: 500; }

/* offer, on the night band */
.offer { background: var(--color-night); color: var(--color-night-ink); }
.offer .lead { color: var(--color-night-muted); }
.offer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.offer__main { grid-column: 1 / 6; }
.offer__main .lead { margin-top: var(--space-lg); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-2xl); }
.price small { font-size: var(--text-lg); color: var(--color-night-muted); }
.price b { font: 700 clamp(5rem, 10vw, 9rem)/0.9 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price__per { flex-basis: 100%; font-size: var(--text-md); color: var(--color-night-muted); }
.offer__main .btn { margin-top: var(--space-xl); }
.offer .btn--quiet { background: color-mix(in oklab, var(--glint) 6%, transparent); color: var(--color-night-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--glint) 20%, transparent), 0 0 0 1px var(--color-night-rule), 0 3px 0 var(--color-night-rule); }
.offer .btn--quiet:hover { background: var(--color-night-2); }
.offer .btn:focus-visible, .offer .link:focus-visible { outline-color: var(--color-night-focus); }
.offer__list { grid-column: 7 / 13; margin: 0; }
.offer__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--color-night-rule); }
.offer__row:last-of-type { border-bottom: 1px solid var(--color-night-rule); }
.offer__row dt { font: 700 var(--text-2xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.offer__row dd { margin: 0; color: var(--color-night-muted); align-self: center; }
.offer__note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-night-muted); }

/* one post, phone by phone: each stage a band of tinted plastic, its number at display size,
   the minute each step happened in DM Mono, two phone screens of the product on it (Dose: a sequence as plastic bands) */
.seq__list { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) var(--space-3xl); border-radius: calc(var(--radius-card) + 10px);
  background: linear-gradient(color-mix(in oklab, var(--glint) 34%, transparent), transparent 22%), color-mix(in oklab, var(--t) 66%, transparent);
  box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -28px 40px -30px color-mix(in oklab, var(--t) 40%, var(--color-ink)), 0 18px 40px -26px color-mix(in oklab, var(--t) 60%, var(--color-ink)); }
.band__text { grid-column: 1 / 6; }
.band__n { display: block; font: 700 clamp(4.5rem, 6vw + 1rem, 7.5rem)/0.85 var(--font-display); letter-spacing: -0.05em; color: oklch(from var(--t) calc(l - 0.24) calc(c + 0.04) h / 0.6); text-shadow: 0 1.5px 0 color-mix(in oklab, var(--glint) 70%, transparent); }
.band h3 { margin-top: var(--space-md); font-size: var(--text-2xl); line-height: 1.08; max-width: 16ch; }
.band__times { margin: var(--space-lg) 0 0; }
.band__times div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); }
.band__times dt { font-size: var(--text-sm); font-weight: 500; color: oklch(from var(--t) calc(l - 0.5) calc(c + 0.04) h); padding-top: 0.15em; }
.band__times dd { margin: 0; color: var(--color-ink-2); max-width: 38ch; }
.band__phones { grid-column: 7 / 13; display: flex; justify-content: flex-end; gap: var(--space-lg); }

.phone { display: flex; flex-direction: column; gap: var(--space-xs); width: 220px; aspect-ratio: 9 / 17; padding: var(--space-lg) var(--space-md) var(--space-md); border-radius: 28px; background: var(--grain), linear-gradient(var(--glint), var(--color-paper)); color: var(--color-ink); box-shadow: 0 0 0 1px color-mix(in oklab, var(--t) 55%, var(--color-rule)), var(--shadow-lift); font-size: var(--text-xs); line-height: 1.35; overflow: hidden; }
.phone p { margin: 0; }
.phone:nth-child(2) { translate: 0 var(--space-lg); }
.phone__kick { color: var(--color-muted); }
.phone__title { font: 700 var(--text-md)/1.2 var(--font-display); letter-spacing: -0.01em; }
.phone__title--c, .phone__sub--c { text-align: center; }
.phone__sub { color: var(--color-muted); }
.phone__time { font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); }
.phone__list, .phone__rows { display: grid; margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.phone__list li, .phone__rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.phone__rows li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
.phone__list .mono, .phone__rows .mono { color: var(--color-muted); }
.phone__foot { margin-top: auto !important; color: var(--color-muted); }
.phone__shot { display: block; flex: 1 1 auto; min-height: 0; border-radius: var(--radius-inner); overflow: hidden; background: var(--color-paper-3); }
.phone__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.phone__lines { display: flex; align-items: center; gap: var(--space-2xs); }
.phone__lines .mono { margin-left: auto; color: var(--color-muted); }
.pill { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink-2); font-size: 0.75rem; white-space: nowrap; }
.pill--ok { background: var(--color-accent-soft); color: var(--color-accent-2); }
.phone__btn { display: grid; place-items: center; min-height: 36px; border-radius: var(--radius-input); box-shadow: 0 0 0 1px var(--color-rule), 0 2px 0 var(--color-rule); font-size: var(--text-sm); }
.phone__btn--ok { margin-top: auto; background: linear-gradient(var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink); box-shadow: 0 0 0 1px var(--color-accent-2), 0 2px 0 var(--color-blue-deep); }
.phone__tick { display: grid; place-items: center; width: 52px; height: 52px; margin: auto auto var(--space-sm); border-radius: 50%; background: var(--color-stamp); box-shadow: 0 0 0 6px var(--color-accent-soft); }
.phone__tick svg { width: 24px; height: 24px; fill: none; stroke: var(--color-accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.phone__note { margin-top: auto !important; padding: var(--space-xs); border-radius: var(--radius-inner); background: var(--color-accent-wash); color: var(--color-accent-2); text-align: center; }
.phone__who { display: flex; align-items: center; gap: var(--space-xs); font-weight: 500; }
.phone__who .plan__mark { width: 26px; height: 26px; border-radius: 50%; font-size: 0.6875rem; }
.phone__cap { color: var(--color-ink-2); }

/* ── home responsive ── */
@media (max-width: 75rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-3xl); }
  .hero h1 { max-width: 16ch; }
  .band { padding: var(--space-xl); }
  .band__text { grid-column: 1 / 7; }
  .band__phones { grid-column: 7 / 13; gap: var(--space-md); }
  .phone { width: 188px; }
}
@media (max-width: 60rem) {
  .offer__grid, .band { grid-template-columns: minmax(0, 1fr); }
  .offer__grid > *, .band > * { grid-column: 1 / -1 !important; }
  .band__phones { justify-content: flex-start; padding-bottom: var(--space-lg); }
}
@media (max-width: 40rem) {
  .hero { padding-block: var(--space-xl) var(--space-3xl); }
  .offer__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .seq__list { gap: var(--space-md); }
  .band { padding: var(--space-lg) var(--space-md) var(--space-xl); gap: var(--space-lg); border-radius: var(--radius-card); }
  .band h3 { font-size: var(--text-xl); }
  .band__times div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .band__phones { gap: var(--space-sm); justify-content: center; }
  .phone { width: auto; flex: 1 1 0; min-width: 0; max-width: 180px; padding: var(--space-md) var(--space-sm) var(--space-sm); border-radius: 22px; }
  .phone__title { font-size: var(--text-sm); }
  .phone__time { font-size: var(--text-xl); }
  .phone__rows li { grid-template-columns: 1.5rem auto; justify-content: space-between; }
  .phone__rows li > span:nth-child(2), .phone__list .mono { display: none; }
  .phone__list li > span, .phone__title { min-width: 0; overflow-wrap: anywhere; }
  .phone__shot { min-height: 72px; }
  .pill { padding: 0 var(--space-2xs); font-size: 0.6875rem; }
}