/* ─────────────────────────────────────────────────────────────────────────────
   La Boda · landing page (landing.html)
   Builds on landing-v2.css for tokens, reset and base components; everything
   here is scoped to html.preview-2 so Preview 1 (landing-v2.html) is untouched.
   Order: tokens · shell · bar · hero · type · buttons · tour · tools · themes ·
   assistant · pricing · finale + mail button · colour picker · dock + sheet · responsive · motion.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── tokens ─────────────────────────────────────────────────────────────── */
@font-face{font-family:"Imperial Script";src:url("/fonts/ImperialScript-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
html.preview-2{
  --script:"Imperial Script","Snell Roundhand",cursive; /* the accent word always opens on a capital */
  --paper:#F5ECE0; --ivory:#FBF6EE; --card:#FFFCF7; --dark:#321F15; --dark-card:#3B261B;
  --line:#DCCDBB; --ink:#472D20; --ink-soft:#5E4334; --ink-muted:#75604F;
  --mocha:#6B4632; --kick-ink:#7A4E3A; --page:#F5EDE2;
  --slab-radius:clamp(26px, 3vw, 40px);
  --shadow-slab:0 36px 84px -20px rgba(48,29,19,.36), 0 14px 32px -12px rgba(48,29,19,.18);
  --shadow-soft:0 20px 52px -18px rgba(70,43,25,.16), 0 2px 6px rgba(70,43,25,.05);
  --pad-y:clamp(80px, 8.5vw, 128px); --pad-x:clamp(22px, 5vw, 72px); --inset:clamp(10px, 1.6vw, 24px);
  --slab-ground:radial-gradient(ellipse 72% 64% at 14% 8%, rgba(158,108,76,.42), transparent 72%),
                radial-gradient(ellipse 64% 58% at 90% 96%, rgba(128,84,56,.40), transparent 70%),
                linear-gradient(158deg, #4A3024 0%, #36221A 52%, #2A1A11 100%);
  overflow-x:clip; scroll-behavior:auto;
}
html.preview-2 svg:has(> use[href^="#i-"]){fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── shell ──────────────────────────────────────────────────────────────── */
.scroll-preview{overflow-x:clip;background:var(--dark)}
.scroll-preview::before{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html.preview-2 .preview-content{position:relative;isolation:isolate;background:var(--page);padding-bottom:1px}
html.preview-2 .block{padding:var(--pad-y) var(--pad-x);scroll-margin-top:84px}
html.preview-2 .block{background:transparent}
html.preview-2 .block[data-surface]{--bg:var(--page);--surface:var(--card)}
html.preview-2 :focus-visible{outline:2px solid var(--mocha);outline-offset:3px}
html.preview-2 [data-header-tone="dark"] :focus-visible{outline-color:var(--on-dark)}
html.preview-2 a,html.preview-2 button{-webkit-tap-highlight-color:transparent}

/* ── bar: brand left, nav in the true centre, log in right ──────────────── */
html.preview-2 .bar{display:grid;grid-template-columns:1fr auto 1fr;top:16px;width:min(1240px, calc(100vw - 32px));min-height:62px;padding:8px 10px 8px 18px;animation:none;
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease}
html.preview-2 .bar.scrolled{top:16px}
html.preview-2 .bar[data-on-hero]{-webkit-backdrop-filter:none;backdrop-filter:none;--bar-bg:rgba(34,21,14,.30);--bar-line:rgba(255,249,239,.14);box-shadow:none}
html.preview-2 .brand{justify-self:start}
html.preview-2 .brand svg{width:36px;height:36px}
html.preview-2 .brand-name{transition:opacity .4s ease, transform .5s var(--ease-out-expo)}
html.preview-2[data-mark="hero"] .bar .brand svg{opacity:0;transition:none}
html.preview-2[data-mark="hero"] .bar .brand-name{opacity:0;transform:translateX(-6px)}
html.preview-2 .bar-section{display:none}
html.preview-2 .nav{justify-self:center}
html.preview-2 .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;opacity:.9}
html.preview-2 .nav a:hover,html.preview-2 .nav a.active{opacity:1}
html.preview-2 .brand{min-width:44px;min-height:44px}
html.preview-2 .nav .nav-login{display:none}
html.preview-2 .bar-actions{justify-self:end}
html.preview-2 .bar-login{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;opacity:.82;transition:opacity .25s}
html.preview-2 .bar-login::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:11px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out-expo)}
html.preview-2 .bar-login:hover{opacity:1}
html.preview-2 .bar-login:hover::after,html.preview-2 .bar-login:focus-visible::after{transform:none}

/* ── hero: held while the tagline fades, then it scrolls away with the film still
   running; one LB monogram becomes the header logo. The picture runs --curve below
   the fold and ends in one soft arc over the next section, unseen until it moves. */
.scroll-hero{--hold-progress:0;--parallax:0px;--intro-scroll-distance:clamp(150px, 24svh, 260px);--curve:clamp(22px, 3.2vw, 52px);
  position:relative;z-index:2;height:100svh;color:var(--on-dark);background:var(--dark)}
.scroll-hero[data-scrub="loading"],.scroll-hero[data-scrub="ready"],.scroll-hero[data-scrub="still"]{height:calc(100svh + var(--intro-scroll-distance) + var(--curve));margin-bottom:calc(-1 * var(--curve));background:none}
.scroll-hero__stage{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;isolation:isolate;background:var(--dark)}
.scroll-hero[data-scrub="loading"] .scroll-hero__stage,.scroll-hero[data-scrub="ready"] .scroll-hero__stage,.scroll-hero[data-scrub="still"] .scroll-hero__stage{height:calc(100svh + var(--curve))}
/* The arc is a cap in the page's own colour laid over the stage's last --curve, not a mask or a
   rounded clip: either of those sends the whole stage through an offscreen pass on every frame
   the canvas changes, and the page behind the arc is flat --page, so this is the same picture. */
.scroll-hero__edge{display:none;position:absolute;left:0;bottom:-1px;width:100%;height:calc(var(--curve) + 1px);fill:var(--page);pointer-events:none}
.scroll-hero[data-scrub="loading"] .scroll-hero__edge,.scroll-hero[data-scrub="ready"] .scroll-hero__edge,.scroll-hero[data-scrub="still"] .scroll-hero__edge{display:block}
html[data-fx-off~="arc"] .scroll-hero__edge{display:none}
html[data-fx-off~="blur"] *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html[data-fx-off~="blur"] .hero-mark svg{filter:none !important}
.scroll-hero__poster,.scroll-hero__frames{position:absolute;inset:0;width:100%;height:100%;transform:translate3d(0, var(--parallax), 0)}
.scroll-hero__poster img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.scroll-hero__frames{display:block;opacity:0;pointer-events:none}
.scroll-hero__poster{transition:opacity .25s ease}
.scroll-hero[data-frame-ready] .scroll-hero__frames{opacity:1}
.scroll-hero[data-frame-ready] .scroll-hero__poster{opacity:0}
.scroll-hero__veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 30% at 50% 47%, rgba(28,17,11,.34), transparent 72%),
             linear-gradient(180deg, rgba(20,12,8,.28), transparent 22%, transparent 70%, rgba(20,12,8,.42))}
.scroll-hero__line{position:absolute;left:0;right:0;top:calc(50svh + var(--mark-size, 120px) * .62 + 14px);margin:0;text-align:center;
  font:400 clamp(1.05rem, 1.5vw, 1.3rem)/1.3 var(--serif);letter-spacing:.02em;color:var(--on-dark);
  opacity:clamp(0, calc(1 - var(--hold-progress) * 1.15), 1);transform:translateY(calc(var(--hold-progress) * -18px));
  text-shadow:0 2px 18px rgba(20,12,8,.45)}
.scroll-hero__line em{font-style:italic}
html:not([data-mark]) .scroll-hero__line{display:none}
.scroll-hero__guidance{position:absolute;left:0;right:0;bottom:max(22px, env(safe-area-inset-bottom));display:grid;justify-items:center;gap:14px;font:500 .64rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark);pointer-events:none}
.scroll-hero__hint{display:grid;justify-items:center;gap:12px;opacity:clamp(0, calc(1 - var(--hold-progress) * 2), .9)}
.scroll-hero__hint i{display:block;width:1px;height:38px;background:linear-gradient(currentColor, transparent);transform-origin:top;animation:heroHint 2.2s var(--ease-out-expo) infinite}
@keyframes heroHint{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.scroll-hero[data-scrub="loading"] .scroll-hero__guidance,.scroll-hero[data-scrub="ready"] .scroll-hero__guidance,.scroll-hero[data-scrub="still"] .scroll-hero__guidance{bottom:calc(var(--curve) + max(22px, env(safe-area-inset-bottom)))}
.scroll-hero[data-complete] .scroll-hero__guidance{visibility:hidden}
.scroll-hero[data-complete] .scroll-hero__hint i{animation:none}
.scroll-hero:not([data-scrub="loading"]):not([data-scrub="ready"]):not([data-scrub="still"]) .scroll-hero__hint{display:none}

html.preview-2 .hero-mark{--t:0;position:fixed;left:0;top:0;z-index:95;width:var(--mark-size, 120px);height:var(--mark-size, 120px);color:var(--mark-ink, #F7EFE4);pointer-events:none;opacity:0;transform-origin:0 0;will-change:transform}
html.preview-2 .hero-mark svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 4px 22px rgba(20,12,8,calc(.4 * (1 - var(--t)))))}
html.preview-2[data-mark="hero"] .hero-mark{opacity:1}
html.preview-2[data-mark] .hero-mark svg{animation:markIn 1.4s var(--ease-out-expo) .15s both}
@keyframes markIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Touch-phone renderer. Desktop/tablet keep the original selectors above.
   The older-browser paint fallback retains the JS trajectory; native adds compositor-eligible
   transform/opacity timelines with the same geometry and exact cubic easing. */
html.preview-2[data-phone-motion] .hero-mark{color:#F7EFE4}
html.preview-2[data-phone-motion] .hero-mark svg{filter:none}
html.preview-2[data-phone-motion="native"] .hero-mark{
  animation:phoneMarkFlight auto linear both, phoneMarkLeave auto steps(1, end) both;
  animation-timeline:scroll(root block), scroll(root block);
  animation-range:var(--phone-mark-start) var(--phone-mark-end), 0px var(--phone-mark-end);
}
html.preview-2[data-phone-motion="native"] .bar .brand svg{
  animation:phoneMarkArrive auto steps(1, end) both;
  animation-timeline:scroll(root block);animation-range:0px var(--phone-mark-end);
}
html.preview-2[data-phone-motion="native"] .scroll-hero__line{
  animation:phoneHeroLine auto linear both;
  animation-timeline:scroll(root block);animation-range:var(--phone-hold-start) var(--phone-hold-end);
}
html.preview-2[data-phone-motion="native"] .scroll-hero__hint{
  animation:phoneHeroHint auto linear both;
  animation-timeline:scroll(root block);animation-range:var(--phone-hold-start) var(--phone-hold-end);
}
@keyframes phoneMarkFlight{
  0%{transform:var(--phone-mark-from);animation-timing-function:cubic-bezier(.3333333333, 0, .6666666667, 0)}
  50%{transform:var(--phone-mark-mid);animation-timing-function:cubic-bezier(.3333333333, 1, .6666666667, 1)}
  100%{transform:var(--phone-mark-to)}
}
@keyframes phoneMarkLeave{from{opacity:1}to{opacity:0}}
@keyframes phoneMarkArrive{from{opacity:0}to{opacity:1}}
@keyframes phoneHeroLine{0%{opacity:1;transform:translateY(0)}86.9565217391%{opacity:0}100%{opacity:0;transform:translateY(-18px)}}
@keyframes phoneHeroHint{0%,5%{opacity:.9}50%,100%{opacity:0}}

/* ── section entry: each block settles in once as it arrives (sectionEntry in landing.js).
   Hidden is opacity alone and the rise is an animation, so a layer exists only while a small
   element is actually moving; large blocks only fade. ── */
html.reveal-on [data-reveal]{opacity:0}
html.reveal-on [data-reveal].is-in{animation:settle 1s var(--ease-out-expo) var(--reveal-delay, 0s) both}
html.reveal-on [data-reveal="fade"].is-in{animation-name:settleFade}
@keyframes settle{from{opacity:0;transform:translate3d(0, 22px, 0)}to{opacity:1;transform:none}}
@keyframes settleFade{from{opacity:0}to{opacity:1}}
/* the older scroll-linked rise would fight it where it exists, and never existed in Safari */
html.preview-2 .section-head,html.preview-2 .stage-wrap,html.preview-2 .tier,html.preview-2 .tier:nth-child(2),html.preview-2 .tier:nth-child(3){animation:none}

/* ── type ───────────────────────────────────────────────────────────────── */
html.preview-2 .section-head{display:grid;justify-items:center;gap:1rem;margin:0 auto clamp(36px, 4.5vw, 60px);text-align:center}
html.preview-2 .section-title{max-width:none;font-size:clamp(2rem, 3.9vw, 3.5rem);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance;hyphens:none}
html.preview-2 .section-title em{display:inline-block;margin:-.12em .06em 0;font-size:1.5em;line-height:.7;letter-spacing:-.01em;text-transform:capitalize;vertical-align:baseline;color:var(--mocha)}
html.preview-2 [data-header-tone="dark"] .section-title em{color:var(--on-dark)}
html.preview-2 .kicker{margin:0 0 .15rem;font:650 .62rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--kick-ink)}
html.preview-2 [data-header-tone="dark"] .kicker{color:var(--on-dark-muted)}
html.preview-2 .lead{max-width:46ch;font-size:clamp(1.1rem, 1.4vw, 1.28rem);line-height:1.5;color:var(--fg-soft)}

/* ── buttons: one system, with real hover, press and focus states ───────── */
html.preview-2 .button{min-height:52px;padding:0 1.65rem;gap:0;letter-spacing:.15em;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .4s var(--ease-out-expo), transform .4s var(--ease-out-expo)}
html.preview-2 .button::after{content:"→";position:static;inset:auto;display:inline-block;width:0;margin-left:0;overflow:hidden;background:none;opacity:0;transform:none;
  font:500 .95rem/1 var(--sans);letter-spacing:0;transition:width .35s var(--ease-out-expo), margin .35s var(--ease-out-expo), opacity .25s ease}
html.preview-2 .button--clay{background:var(--mocha);border-color:var(--mocha);color:var(--paper)}
html.preview-2 .button--line{background:transparent;border-color:rgba(71,45,32,.34);color:var(--ink)}
html.preview-2 .button:active{transform:translateY(0) scale(.98)}
@media (hover:hover){
  html.preview-2 .button:hover{transform:translateY(-2px)}
  html.preview-2 .button:hover::after,html.preview-2 .button:focus-visible::after{width:1em;margin-left:.65em;opacity:1}
  html.preview-2 .button--clay:hover{background:var(--dark);border-color:var(--dark);box-shadow:0 16px 30px -12px rgba(50,31,21,.55)}
  html.preview-2 .button--line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:0 16px 30px -12px rgba(50,31,21,.45)}
}
@media (hover:none){
  html.preview-2 .button:hover{transform:none;box-shadow:none}
  html.preview-2 .button--clay:active{background:var(--dark);border-color:var(--dark)}
  html.preview-2 .button--line:active{background:rgba(71,45,32,.08)}
}

/* ── 2 · tour: icon tiles that page six at a time, and a stage that becomes a phone */
html.preview-2 .tour > .inner{width:min(1160px, 100%);container-type:inline-size}
html.preview-2 .tour-picker{display:grid;grid-template-columns:44px minmax(0, 1fr) 44px;align-items:center;gap:8px;width:min(720px, 100%);margin:0 auto 12px}
html.preview-2 .tour-picker__arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(71,45,32,.14);border-radius:50%;background:rgba(255,253,249,.7);color:var(--ink-soft);cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ease-out-expo), opacity .25s ease}
html.preview-2 .tour-picker__arrow svg{width:16px;height:16px;transform:rotate(90deg)}
html.preview-2 .tour-picker__arrow[data-page="1"] svg{transform:rotate(-90deg)}
html.preview-2 .tour-picker__arrow:disabled{opacity:.28;cursor:default}
@media (hover:hover){html.preview-2 .tour-picker__arrow:not(:disabled):hover{background:#fff;border-color:rgba(71,45,32,.3);color:var(--ink);transform:translateY(-1px)}}
html.preview-2 .tour-picker__arrow:not(:disabled):active{transform:scale(.94)}
html.preview-2 .tour-tabs{position:relative;overflow:hidden;padding:14px 28px 30px;margin:-14px -28px -30px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);mask-image:linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent)}
html.preview-2 .tour-tabs__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 8px) / 6);gap:8px;transform:translateX(calc(var(--tp, 0) * -1 * (100% + 8px)));transition:transform .6s var(--ease-out-expo)}
html.preview-2 .tour-tabs:not([data-ready]) .tour-tabs__track{transition:none}
html.preview-2 .tour-tile{display:grid;justify-items:center;align-content:start;gap:9px;padding:2px 4px 0;border:0;background:none;color:var(--ink-muted);font:500 .68rem/1.15 var(--sans);letter-spacing:.02em;text-align:center;cursor:pointer;transition:color .3s ease}
html.preview-2 .tour-tile__disc{display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(71,45,32,.14);border-radius:50%;background:#FFFDF9;color:var(--ink-soft);box-shadow:0 6px 16px -10px rgba(48,29,19,.35);
  transition:transform .4s var(--ease-out-expo), background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .4s var(--ease-out-expo)}
html.preview-2 .tour-tile__disc svg{width:26px;height:26px;stroke-width:1.4}
html.preview-2 .tour-tile__name{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (hover:hover){
  html.preview-2 .tour-tile:not([aria-selected="true"]):hover{color:var(--ink)}
  html.preview-2 .tour-tile:not([aria-selected="true"]):hover .tour-tile__disc{transform:translateY(-3px);background:#fff;border-color:rgba(71,45,32,.3);color:var(--mocha);box-shadow:0 12px 22px -10px rgba(48,29,19,.4)}
}
html.preview-2 .tour-tile:active .tour-tile__disc{transform:scale(.96)}
html.preview-2 .tour-tile[aria-selected="true"]{color:var(--ink);font-weight:600}
html.preview-2 .tour-tile[aria-selected="true"] .tour-tile__disc{background:var(--dark);border-color:var(--dark);color:var(--paper);box-shadow:0 12px 24px -10px rgba(48,29,19,.5), 0 0 0 4px rgba(50,31,21,.08)}
html.preview-2 .tour-tile:focus-visible{outline:0}
html.preview-2 .tour-tile:focus-visible .tour-tile__disc{outline:2px solid var(--mocha);outline-offset:3px}
html.preview-2 .tour-dots{display:flex;justify-content:center;gap:6px;margin:0 0 clamp(22px, 3vw, 32px)}
html.preview-2 .tour-dots i{width:6px;height:6px;border-radius:50%;background:rgba(71,45,32,.2);transition:background-color .3s ease, transform .3s ease}
html.preview-2 .tour-dots i.is-on{background:var(--mocha);transform:scale(1.25)}

html.preview-2 .stage-wrap{--h:min(calc(100cqw / 1.6), 78svh);position:relative;display:grid;place-items:center;height:var(--h);transition:height .7s var(--ease-out-expo)}
html.preview-2 .tour-stage{position:relative;width:100%;height:100%;aspect-ratio:auto;overflow:hidden;border:0;border-radius:var(--slab-radius);background:#FBF6EE;box-shadow:var(--shadow-slab);
  transition:width .7s var(--ease-out-expo), height .7s var(--ease-out-expo), border-radius .7s var(--ease-out-expo), box-shadow .7s ease}
html.preview-2 .tour-stage::before{display:none}
html.preview-2 .tour-stage::after{content:"";position:absolute;z-index:2;top:12px;left:50%;width:30%;height:22px;border-radius:999px;background:#140C08;opacity:0;transform:translateX(-50%);transition:opacity .3s ease}
html.preview-2 .tour-stage video{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:cover;object-position:top center;transition:opacity .28s ease}
html.preview-2 .tour-stage.is-swapping video{opacity:0}
html.preview-2 .stage-wrap[data-device="phone"] .tour-stage{--ph:calc(var(--h) - clamp(40px, 6cqw, 72px));width:calc(var(--ph) * 1288 / 2310);height:var(--ph);border-radius:calc(var(--ph) * .075);
  box-shadow:0 0 0 9px #22160F, 0 0 0 10px rgba(255,249,239,.10), 0 44px 80px -28px rgba(40,24,14,.6)}
html.preview-2 .stage-wrap[data-device="phone"] .tour-stage::after{opacity:1;transition-delay:.45s}
html.preview-2 .tour-foot{display:flex;justify-content:center;margin-top:clamp(22px, 2.6vw, 30px);padding-bottom:clamp(12px, 2vw, 28px)}
html.preview-2 .device-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;min-width:250px;padding:4px;border:1px solid rgba(71,45,32,.1);border-radius:999px;background:rgba(71,45,32,.05)}
html.preview-2 .device-switch button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--ink-muted);font:500 .78rem/1 var(--sans);transition:color .3s ease}
html.preview-2 .device-switch button svg{width:16px;height:16px}
html.preview-2 .device-switch button[aria-pressed="true"]{color:var(--ink)}
@media (hover:hover){html.preview-2 .device-switch button:not([aria-pressed="true"]):hover{color:var(--ink-soft)}}
html.preview-2 .device-switch__glide{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#FFFFFF;box-shadow:0 2px 10px rgba(48,29,19,.12);transition:transform .5s var(--ease-out-expo)}
html.preview-2 .device-switch:has([data-device="phone"][aria-pressed="true"]) .device-switch__glide{transform:translateX(100%)}

/* ── 3 · tools: an index with a preview beside it ───────────────────────── */
html.preview-2 .tools,html.preview-2 .assistant{position:relative;z-index:2;margin:clamp(20px, 2.6vw, 36px) var(--inset);border-radius:var(--slab-radius);background:var(--slab-ground);
  box-shadow:0 50px 90px -40px rgba(48,29,19,.45), 0 18px 36px -18px rgba(48,29,19,.25)}
html.preview-2 .tools,html.preview-2 .assistant{background:#34261F}
html.preview-2 .tools > .inner{width:min(1120px, 100%)}
html.preview-2 .ix-pane{display:none}
/* the app's segmented control: one track, the active item a filled pill that glides */
html.preview-2 .seg{position:relative;display:flex;flex-wrap:wrap;width:max-content;max-width:100%;align-items:center;gap:4px;padding:5px;border:1px solid rgba(71,45,32,.12);border-radius:999px;background:rgba(71,45,32,.06)}
html.preview-2 .seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--ink-muted);font:600 .8rem/1 var(--sans);white-space:nowrap;cursor:pointer;transition:color .2s ease}
html.preview-2 .seg button[aria-pressed="true"],html.preview-2 .seg button[aria-selected="true"]{color:var(--paper)}
@media (hover:hover){html.preview-2 .seg button:not([aria-pressed="true"]):not([aria-selected="true"]):hover{color:var(--ink)}}
html.preview-2 .seg button:focus-visible{outline:2px solid var(--mocha);outline-offset:2px}
html.preview-2 .seg__glide{position:absolute;z-index:0;top:var(--gy, 5px);left:0;width:var(--gw, 0);height:var(--gh, 38px);border-radius:999px;background:var(--ink);box-shadow:0 6px 14px -8px rgba(48,29,19,.5);transform:translateX(var(--gx, 0));transition:transform .5s var(--ease-out-expo), width .5s var(--ease-out-expo)}
html.preview-2 .seg:not([data-ready]) .seg__glide{transition:none}
html.preview-2 .seg--dark{border-color:rgba(247,239,228,.16);background:rgba(247,239,228,.08)}
html.preview-2 .seg--dark button{color:var(--on-dark-muted)}
html.preview-2 .seg--dark button[aria-pressed="true"],html.preview-2 .seg--dark button[aria-selected="true"]{color:var(--dark)}
@media (hover:hover){html.preview-2 .seg--dark button:not([aria-pressed="true"]):not([aria-selected="true"]):hover{color:var(--on-dark)}}
html.preview-2 .seg--dark .seg__glide{background:var(--on-dark);box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
html.preview-2 .seg--dark button:focus-visible{outline-color:var(--on-dark)}
html.preview-2 .ix-tabs{margin:0 auto 22px}

html.preview-2 .ix-index{max-width:640px;margin:0 auto}
html.preview-2 .ix-chapter{display:none}
html.preview-2 .ix-chapter.is-active{display:block}
html.preview-2 .ix-title{display:none}
html.preview-2 .ix-list{display:grid}
html.preview-2 .ix-item{border-bottom:1px solid rgba(247,239,228,.12)}
html.preview-2 .ix-row{display:grid;grid-template-columns:24px minmax(0, 1fr) 18px;align-items:center;gap:0 16px;width:100%;min-height:68px;padding:12px 4px;border:0;background:none;color:var(--on-dark);text-align:left}
html.preview-2 .ix-ico{width:22px;height:22px;opacity:.85}
html.preview-2 .ix-copy{display:grid;gap:3px;min-width:0}
html.preview-2 .ix-copy b{font:500 1.18rem/1.15 var(--serif)}
html.preview-2 .ix-copy i{font:400 italic .95rem/1.3 var(--serif);color:var(--on-dark-soft)}
html.preview-2 .ix-chev{width:18px;height:18px;opacity:.6;transition:transform .4s var(--ease-out-expo)}
html.preview-2 .ix-item.is-open .ix-chev{transform:rotate(180deg)}
html.preview-2 .ix-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out-expo)}
html.preview-2 .ix-more > div{min-height:0;overflow:hidden;padding-left:44px}
html.preview-2 .ix-item.is-open .ix-more{grid-template-rows:1fr}
html.preview-2 .ix-more p{margin:0 0 14px;font:400 1rem/1.5 var(--serif);color:var(--on-dark-soft)}
html.preview-2 .ix-tour{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0 0 14px;font:600 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark);text-decoration:none}
html.preview-2 .ix-tour svg{width:15px;height:15px;transition:transform .3s var(--ease-out-expo)}
html.preview-2 .ix-tour:hover svg{transform:translateX(3px)}
@media (min-width:1021px) and (hover:hover){
  html.preview-2 .ix{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);gap:clamp(32px, 4vw, 64px);align-items:stretch}
  html.preview-2 .ix-index{display:flex;flex-direction:column}
  html.preview-2 .ix-chapter.is-active{display:grid;flex:1}
  html.preview-2 .ix-chapter.is-active .ix-list{grid-auto-rows:minmax(0, 1fr)}
  html.preview-2 .ix-pane{position:sticky;top:104px;align-self:stretch;display:flex;flex-direction:column;height:auto;min-height:560px;overflow:hidden;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
  html.preview-2 .ix-pane__media{position:relative;flex:0 0 auto;aspect-ratio:1200 / 753;overflow:hidden;background:var(--slab-ground)}
  html.preview-2 .ix-pane__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;transform-origin:50% 40%;transition:opacity .25s ease, transform 1.2s var(--ease-out-expo)}
  html.preview-2 .ix-pane:hover .ix-pane__media img{transform:scale(1.03)}
  html.preview-2 .ix-pane__ico{position:absolute;inset:0;width:46px;height:46px;margin:auto;color:var(--on-dark);opacity:0;transition:opacity .25s ease}
  html.preview-2 .ix-pane[data-noshot] .ix-pane__media img{opacity:0}
  html.preview-2 .ix-pane[data-noshot] .ix-pane__ico{opacity:.9}
  html.preview-2 .ix-pane__chip{position:absolute;right:14px;bottom:14px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(251,246,238,.92);color:var(--mocha);box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
  html.preview-2 .ix-pane__chip svg{width:19px;height:19px}
  html.preview-2 .ix-pane[data-noshot] .ix-pane__chip{display:none}
  html.preview-2 .ix-pane__body{display:grid;grid-template-rows:auto auto 1fr auto;flex:1;min-height:0;gap:8px;padding:22px 26px 24px;transition:opacity .22s ease, transform .4s var(--ease-out-expo)}
  html.preview-2 .ix-pane.is-swapping .ix-pane__body{opacity:0;transform:translateY(6px)}
  html.preview-2 .ix-pane.is-swapping img{opacity:0}
  html.preview-2 .ix-pane__kicker{font:650 .56rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--kick-ink)}
  html.preview-2 .ix-pane__title{font:500 1.75rem/1.05 var(--serif);letter-spacing:-.01em}
  html.preview-2 .ix-pane__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:400 1.04rem/1.5 var(--serif);color:var(--ink-soft)}
  html.preview-2 .ix-pane__cta{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:36px;margin-top:4px;font:650 .6rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--mocha);text-decoration:none;transition:opacity .2s ease}
  html.preview-2 .ix-pane__cta svg{width:15px;height:15px;transition:transform .3s var(--ease-out-expo)}
  html.preview-2 .ix-pane__cta:hover svg{transform:translateX(3px)}
  html.preview-2 .ix-pane[data-notour] .ix-pane__cta{opacity:0;pointer-events:none}
  html.preview-2 .ix-tabs{margin:0 0 14px}
  html.preview-2 .ix-index{max-width:none;margin:0}
  html.preview-2 .ix-chapter.is-active{animation:ixIn .45s var(--ease-out-expo) both}
  @keyframes ixIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  html.preview-2 .ix-row{grid-template-columns:22px minmax(0, 1fr);min-height:72px;margin:0 -12px;width:calc(100% + 24px);padding:12px;border-radius:12px;cursor:default;transition:background-color .25s ease}
  html.preview-2 .ix-item[data-tour] .ix-row{cursor:pointer}
  html.preview-2 .ix-row:hover,html.preview-2 .ix-item.is-active .ix-row{background:rgba(247,239,228,.08)}
  html.preview-2 .ix-item.is-active .ix-row::before{content:"";position:absolute;left:2px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--on-dark);transform:translateY(-50%)}
  html.preview-2 .ix-row{position:relative}
  html.preview-2 .ix-item.is-active .ix-ico{opacity:1}
  html.preview-2 .ix-chev,html.preview-2 .ix-more{display:none}
  html.preview-2 .ix-copy b{font-size:1.2rem}
  html.preview-2 .ix-copy i{font-size:.95rem}
}

/* ── 4 · themes ─────────────────────────────────────────────────────────── */
html.preview-2 .themes > .inner{width:min(980px, 100%)}
html.preview-2 .theme-stage{--stage-pad:clamp(26px, 4vw, 52px);--bg:#FAF7F3;--surface:#FFFFFF;--fg:#472D20;--fg-soft:#67483B;--fg-muted:#8A796C;--rule:#E3D8CB;--accent:#472D20;
  position:relative;padding:var(--stage-pad);border-radius:var(--slab-radius);background:var(--bg);color:var(--fg);
  box-shadow:0 44px 90px -44px rgba(48,29,19,.38), 0 14px 30px -18px rgba(48,29,19,.18);transition:background-color .6s ease, color .6s ease}
html.preview-2 .swatch-row{display:flex;flex-wrap:wrap;justify-content:center;gap:20px clamp(16px, 2.6vw, 34px);margin:0}
html.preview-2 .swatch{gap:11px;min-width:64px}
html.preview-2 .swatch i{display:grid;place-items:center;width:58px;height:58px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 10px 22px -8px rgba(48,29,19,.3)}
html.preview-2 .swatch[aria-pressed="true"] i{box-shadow:0 0 0 3px var(--bg), 0 0 0 4.5px var(--accent), 0 12px 26px -8px rgba(48,29,19,.3)}
html.preview-2 .swatch span{font-size:1rem}
@media (hover:hover){html.preview-2 .swatch:hover{color:var(--fg)}}
html.preview-2 .swatch--custom i{background:transparent;border:1.5px dashed color-mix(in srgb, var(--fg) 40%, transparent);box-shadow:none;color:var(--fg-soft)}
html.preview-2 .swatch--custom i svg{width:22px;height:22px;transition:transform .45s var(--ease-out-expo)}
html.preview-2 .swatch--custom[aria-expanded="true"] i svg{transform:rotate(45deg)}
html.preview-2 .swatch--custom[aria-pressed="true"] i{border-style:solid;background:conic-gradient(from 210deg, var(--a, #F6EFE6) 0 34%, var(--b, #8C5A3C) 0 67%, var(--c, #3B2A20) 0);color:transparent}
html.preview-2 .custom-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out-expo)}
html.preview-2 .custom-panel.is-open{grid-template-rows:1fr}
html.preview-2 .custom-panel__in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;min-height:0;overflow:hidden;padding:0 4px}
html.preview-2 .custom-panel.is-open .custom-panel__in{padding-top:26px}
html.preview-2 .colour{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:6px 16px 6px 7px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--fg);font:500 .8rem/1 var(--sans);cursor:pointer;transition:border-color .25s, box-shadow .35s var(--ease-out-expo), transform .35s var(--ease-out-expo)}
html.preview-2 .colour i{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background-color .2s}
html.preview-2 .colour[aria-expanded="true"]{border-color:var(--fg);box-shadow:0 10px 24px -14px rgba(48,29,19,.45)}
@media (hover:hover){html.preview-2 .colour:hover{border-color:color-mix(in srgb, var(--fg) 40%, transparent);transform:translateY(-1px)}}
html.preview-2 .custom-panel__note{flex-basis:100%;margin:4px 0 0;text-align:center;font:400 italic .98rem/1.4 var(--serif);color:var(--fg-muted)}
/* the real planner, read-only, wearing the palette: a native-size frame scaled to fit */
html.preview-2 .mock-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:clamp(28px, 3.6vw, 44px) auto 18px}
html.preview-2 .mock-tabs.seg,html.preview-2 .mock-device.seg{margin:0}
html.preview-2 .mock-tabs button{min-height:36px;padding:0 18px;font-size:.76rem}
/* desktop or phone: two icons in the same pill as the page tabs */
html.preview-2 .mock-device button{min-height:36px;min-width:44px;padding:0 12px}
html.preview-2 .mock-device svg{width:17px;height:17px}
html.preview-2 .preview{width:min(860px, 100%);margin:0 auto}
html.preview-2 .preview__canvas{position:relative;width:var(--pcw, 100%);max-width:100%;height:var(--ph, 520px);margin-inline:auto;overflow:hidden;border:1px solid var(--rule);border-radius:var(--slab-radius);background:var(--surface);box-shadow:var(--shadow-slab);transition:border-color .6s ease}
/* The shape eases only when the visitor switches device, never while the page is still settling. */
html.preview-2 .preview.is-switching .preview__canvas{transition:width .5s var(--ease-out-expo), height .5s var(--ease-out-expo), border-radius .5s var(--ease-out-expo), border-color .6s ease}
html.preview-2 .preview[data-device="phone"] .preview__canvas{border-radius:30px}
html.preview-2 .preview__scale{position:absolute;top:0;left:0;width:var(--pw, 1440px);height:var(--pnh, 900px);transform:scale(var(--ps, 1));transform-origin:top left}
html.preview-2 .preview__scale iframe{display:block;width:100%;height:100%;border:0;background:transparent}
/* A shield takes the pointer until the visitor opts in, so the frame's own hit-testing never changes under it. */
html.preview-2 .preview__shield{position:absolute;inset:0;z-index:1}
html.preview-2 .preview.is-live .preview__shield{display:none}
html.preview-2 .preview__poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center;transition:opacity .6s ease}
html.preview-2 .preview[data-preview-ready] .preview__poster{opacity:0;pointer-events:none}
html.preview-2 .preview__start{position:absolute;left:50%;bottom:22px;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100% - 24px);min-height:44px;padding:10px 20px;border:1px solid rgba(255,255,255,.6);border-radius:999px;
  background:rgba(251,246,238,.8);color:var(--ink);font:600 .66rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;white-space:normal;cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(30,18,12,.5), inset 0 1px 0 rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  transform:translateX(-50%);transition:opacity .3s ease, transform .45s var(--ease-out-expo), background-color .25s ease}
html.preview-2 .preview__start svg{flex:none;width:15px;height:15px;transform:rotate(90deg)}
@media (hover:hover){html.preview-2 .preview__start:hover{background:#fff;transform:translateX(-50%) translateY(-2px)}}
html.preview-2 .preview.is-live .preview__start,html.preview-2 .preview[data-preview-failed] .preview__start{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}
html.preview-2 .preview.is-live .preview__canvas{box-shadow:var(--shadow-slab), 0 0 0 3px var(--bg), 0 0 0 4.5px var(--accent)}
html.preview-2 .preview__status{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid rgba(255,255,255,.6);border-radius:999px;
  background:rgba(251,246,238,.84);color:var(--ink);font:500 .72rem/1 var(--sans);letter-spacing:.06em;white-space:nowrap;box-shadow:0 16px 34px -14px rgba(30,18,12,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translate(-50%, -50%);transition:opacity .3s ease}
html.preview-2 .preview__status::before{content:"";width:14px;height:14px;border:1.5px solid rgba(71,45,32,.25);border-top-color:var(--mocha);border-radius:50%;animation:previewSpin .9s linear infinite}
html.preview-2 .preview[data-preview-ready] .preview__status,html.preview-2 .preview__status:empty{display:none}
html.preview-2 .preview[data-preview-failed] .preview__status::before{display:none}
html.preview-2 .preview__status button{border:0;padding:0;background:none;color:var(--mocha);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes previewSpin{to{transform:rotate(360deg)}}
@media (hover:hover) and (pointer:fine){
  html.preview-2 .preview__shield,html.preview-2 .preview__start{display:none}
  html.preview-2 .preview.is-live .preview__canvas{box-shadow:var(--shadow-slab)}
}


/* ── 5 · assistant: the real chat panel, with charts ────────────────────── */
html.preview-2 .assistant > .inner{width:min(1100px, 100%)}
html.preview-2 .ask{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr);grid-template-areas:"copy window" "prompts window";gap:28px clamp(40px, 6vw, 88px);align-items:start}
html.preview-2 .ask-copy{grid-area:copy;align-self:end;display:grid;gap:1rem}
html.preview-2 .ask-copy .section-title{font-size:clamp(1.9rem, 3.3vw, 3rem)}
html.preview-2 .ask-copy .lead{max-width:38ch}
html.preview-2 .ask-prompts{grid-area:prompts;display:grid;align-content:start}
html.preview-2 .ask-prompts__label{margin:0 0 6px;font:650 .58rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-muted)}
html.preview-2 .ask-prompts button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 2px;border:0;border-top:1px solid rgba(247,239,228,.12);background:none;color:var(--on-dark-soft);text-align:left;font:400 1.18rem/1.3 var(--serif);transition:color .3s ease, padding .4s var(--ease-out-expo)}
html.preview-2 .ask-prompts button:last-child{border-bottom:1px solid rgba(247,239,228,.12)}
html.preview-2 .ask-prompts button svg{flex:0 0 auto;width:18px;height:18px;opacity:0;transform:translateX(-6px);transition:opacity .3s ease, transform .4s var(--ease-out-expo)}
html.preview-2 .ask-prompts button::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--on-dark);transform:scaleX(0);transform-origin:left}
html.preview-2 .ask-prompts button[aria-pressed="true"]{color:var(--on-dark);padding-left:10px}
html.preview-2 .ask-prompts button[aria-pressed="true"] svg{opacity:1;transform:none}
html.preview-2 .ask.is-playing .ask-prompts button[aria-pressed="true"]::before{animation:askProgress var(--turn-ms, 8000ms) linear both}
@keyframes askProgress{to{transform:scaleX(1)}}
@media (hover:hover){html.preview-2 .ask-prompts button:hover{color:var(--on-dark)}html.preview-2 .ask-prompts button:hover svg{opacity:.7;transform:none}}
html.preview-2 .ask-window{grid-area:window;contain:layout paint;display:flex;flex-direction:column;height:min(560px, 74svh);overflow:hidden;border-radius:24px;background:var(--card);color:var(--ink);box-shadow:0 44px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,250,242,.4)}
html.preview-2 .ask-head{display:flex;align-items:center;gap:11px;min-height:64px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--line)}
html.preview-2 .ask-avatar{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--dark);color:var(--on-dark)}
html.preview-2 .ask-avatar svg{width:20px;height:20px;fill:currentColor}
html.preview-2 .ask-head__name{display:grid;gap:4px;min-width:0}
html.preview-2 .ask-head__name b{font:600 1.12rem/1.1 var(--serif)}
html.preview-2 .ask-head__name span{display:flex;align-items:center;gap:6px;font:500 .7rem/1.2 var(--sans);color:var(--ink-muted)}
html.preview-2 .ask-head__name span i{width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 3px rgba(143,146,92,.18)}
html.preview-2 .ask-head__tools{display:flex;gap:4px;margin-left:auto;color:var(--ink-muted)}
html.preview-2 .ask-head__tools svg{width:34px;height:34px;padding:9px;border-radius:10px}
html.preview-2 .ask-thread{contain:layout paint;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;padding:18px 20px 16px}
html.preview-2 .am{display:grid;gap:7px;max-width:100%;transition:opacity .3s ease, transform .4s var(--ease-out-expo)}
html.preview-2 .am.is-dim{opacity:.35}
html.preview-2 .am.is-leaving{opacity:0;transform:translateY(-12px)}
html.preview-2 .am.is-in{animation:amIn .55s var(--ease-out-expo) both}
@keyframes amIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.preview-2 .am-head{display:flex;align-items:center;gap:7px;font:650 .7rem/1 var(--sans);color:var(--ink-muted)}
html.preview-2 .am-ava{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--dark);color:var(--on-dark)}
html.preview-2 .am-ava svg{width:13px;height:13px;fill:currentColor}
html.preview-2 .am-ava--you{background:#EDE2D4;color:var(--ink-soft);font:700 .58rem/1 var(--sans)}
html.preview-2 .am--you{align-self:flex-end;justify-items:end;max-width:86%;text-align:right}
html.preview-2 .am--you .am-head{flex-direction:row-reverse}
html.preview-2 .am--you .am-body{width:max-content;max-width:100%;text-align:left;padding:11px 14px;border-radius:16px 16px 6px 16px;background:var(--dark);color:var(--on-dark);font:400 .9rem/1.5 var(--sans)}
html.preview-2 .am--ai .am-body{display:grid;gap:12px;font:400 .9rem/1.6 var(--sans);color:var(--ink)}
html.preview-2 .am-body p{margin:0}
html.preview-2 .am-body ul{display:grid;gap:2px;margin:0;padding-left:1.1rem;list-style:disc;color:var(--ink-soft)}
html.preview-2 .am-typing{display:flex;gap:5px;padding:6px 0 0 31px}
html.preview-2 .am-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-muted);animation:dots 1.1s ease-in-out infinite}
html.preview-2 .am-typing i:nth-child(2){animation-delay:.15s}
html.preview-2 .am-typing i:nth-child(3){animation-delay:.3s}
html.preview-2 .ac-donut{display:flex;align-items:center;gap:22px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#FFFFFF}
html.preview-2 .ac-donut svg{flex:0 0 auto;width:112px;height:112px;transform:rotate(-90deg)}
html.preview-2 .am.is-in .ac-donut svg{animation:donutIn .9s var(--ease-out-expo) .15s both}
@keyframes donutIn{from{opacity:0;transform:rotate(-150deg) scale(.86)}to{opacity:1;transform:rotate(-90deg)}}
html.preview-2 .ac-donut circle{fill:none;stroke-width:5.5}
html.preview-2 .ac-legend{display:grid;gap:7px;min-width:0;font:500 .78rem/1.2 var(--sans);color:var(--ink-soft)}
html.preview-2 .ac-legend span{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px}
html.preview-2 .ac-legend i{width:10px;height:10px;border-radius:3px}
html.preview-2 .ac-legend b{font-weight:600;color:var(--ink)}
html.preview-2 .ac-bars{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#FFFFFF}
html.preview-2 .ac-bar{display:grid;grid-template-columns:78px 1fr 56px;align-items:center;gap:10px;font:500 .76rem/1.2 var(--sans);color:var(--ink-soft)}
html.preview-2 .ac-bar b{font-weight:600;color:var(--ink);text-align:right}
html.preview-2 .ac-track{position:relative;height:10px;border-radius:999px;background:#F2EAE0;overflow:hidden}
html.preview-2 .ac-track i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;transform-origin:left;animation:acGrow .9s var(--ease-out-expo) both}
html.preview-2 .ac-track i:first-child{background:#D9C8B4}
html.preview-2 .ac-track i + i{background:var(--mocha);animation-delay:.15s}
html.preview-2 .ac-key{display:flex;gap:14px;font:500 .68rem/1 var(--sans);color:var(--ink-muted)}
html.preview-2 .ac-key span{display:inline-flex;align-items:center;gap:6px}
html.preview-2 .ac-key i{width:9px;height:9px;border-radius:3px}
@keyframes acGrow{from{transform:scaleX(0)}to{transform:none}}
html.preview-2 .ac-table{display:grid;border:1px solid var(--line);border-radius:14px;background:#FFFFFF;overflow:hidden;font:500 .8rem/1.3 var(--sans)}
html.preview-2 .ac-table > div{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:10px 14px;border-top:1px solid var(--line)}
html.preview-2 .ac-table > div:first-child{border-top:0;font:650 .56rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
html.preview-2 .ac-table span:last-child{text-align:right;min-width:62px}
html.preview-2 .ac-actions{display:flex;flex-wrap:wrap;gap:6px}
html.preview-2 .ac-actions span{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#FFFFFF;font:600 .68rem/1 var(--sans);color:var(--ink-soft)}
html.preview-2 .ask-compose{display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:6px 6px 6px 16px;border:1px solid var(--line);border-radius:999px;background:#FFFFFF;color:var(--ink-muted);transition:border-color .3s, box-shadow .3s}
html.preview-2 .ask-input{flex:1;min-width:0;min-height:1.2em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 .9rem/1.2 var(--sans)}
html.preview-2 .ask-mic{flex:0 0 auto;width:20px;height:20px}
html.preview-2 .ask-send{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--mocha);color:var(--paper);transition:background-color .3s, transform .3s var(--ease-out-expo)}
html.preview-2 .ask-send svg{width:17px;height:17px}
html.preview-2 .ask-window.is-typing .ask-compose{border-color:var(--mocha);box-shadow:0 0 0 3px rgba(107,70,50,.12);color:var(--ink)}
html.preview-2 .ask-window.is-typing .ask-input::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;background:currentColor;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
html.preview-2 .ask-window.is-typing .ask-send{background:var(--dark);transform:scale(1.06)}

/* ── 6 · pricing ────────────────────────────────────────────────────────── */
html.preview-2 .pricing-grid{gap:18px;align-items:stretch}
html.preview-2 .tier{gap:.4rem;justify-items:center;padding:clamp(34px, 3.4vw, 46px) clamp(24px, 2.6vw, 34px) clamp(28px, 3vw, 36px);text-align:center;border-radius:26px;border-color:rgba(77,45,28,.1);
  background:linear-gradient(180deg, #FFFDFA 0%, #FCF7EF 100%);box-shadow:0 20px 44px -30px rgba(70,43,25,.26), 0 1px 2px rgba(70,43,25,.04);
  transition:transform .5s cubic-bezier(.22,1.3,.4,1), box-shadow .5s var(--ease-out-expo), border-color .35s ease}

html.preview-2 .tier:focus-within{transform:translateY(-10px);border-color:rgba(107,70,50,.26);box-shadow:0 46px 72px -34px rgba(70,43,25,.42), 0 14px 26px -14px rgba(70,43,25,.22)}
@media (hover:hover){
  html.preview-2 .tier:hover{transform:translateY(-10px);border-color:rgba(107,70,50,.26);box-shadow:0 46px 72px -34px rgba(70,43,25,.42), 0 14px 26px -14px rgba(70,43,25,.22)}
  html.preview-2 .tier--featured:hover,html.preview-2 .tier--featured:focus-within{border-color:rgba(247,239,228,.22);box-shadow:0 54px 82px -32px rgba(48,29,19,.7), 0 16px 28px -14px rgba(48,29,19,.4)}
  html.preview-2 .tier--featured .button--clay:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--dark)}
}
@media (hover:none){html.preview-2 .tier:active{transform:translateY(-4px)}}
html.preview-2 .tier h3{font-size:.58rem;letter-spacing:.3em;color:var(--ink-muted)}
html.preview-2 .tier .price{margin-top:.55rem;font-size:clamp(2.6rem, 3.6vw, 3.3rem);letter-spacing:-.035em}
html.preview-2 .tier .price small{font-size:.34em;letter-spacing:.02em}
html.preview-2 .tier .price-sub{width:100%;max-width:260px;padding-bottom:clamp(16px, 2vw, 22px);border-bottom:1px solid rgba(71,45,32,.12);font-size:.96rem}
html.preview-2 .tier .check-list{width:100%;max-width:290px;margin:1.25rem auto 1.5rem;text-align:left;font-size:.98rem}
html.preview-2 .tier .check-list li{padding-block:.44rem;padding-left:1.5rem;color:var(--ink-soft)}
html.preview-2 .tier .check-list li::before{width:10px;height:5px;border-width:1.2px;border-color:var(--mocha);opacity:.85}
html.preview-2 .tier .button{width:100%;max-width:300px}
html.preview-2 .tier--featured{--fg:var(--on-dark);--fg-soft:var(--on-dark-soft);--fg-muted:var(--on-dark-muted);--rule:var(--on-dark-line);--surface:#34261F;color:var(--on-dark);border-color:rgba(247,239,228,.1);background:#34261F;box-shadow:0 34px 64px -30px rgba(48,29,19,.62), 0 2px 4px rgba(48,29,19,.12)}
html.preview-2 .tier--featured h3,html.preview-2 .tier--featured .price small,html.preview-2 .tier--featured .price-sub{color:var(--on-dark-muted)}
html.preview-2 .tier--featured .price-sub{border-bottom-color:var(--on-dark-line)}
html.preview-2 .tier--featured .check-list li{color:var(--on-dark-soft)}
html.preview-2 .tier--featured .check-list li::before{border-color:var(--on-dark)}
html.preview-2 .tier--featured .button--clay{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
html.preview-2 .tier--featured .tier-badge{background:var(--paper);color:var(--dark);box-shadow:0 10px 20px -10px rgba(20,12,8,.6)}

html.preview-2 .tier-badge{background:var(--mocha);color:var(--paper);padding:.5rem .95rem;letter-spacing:.18em;box-shadow:0 10px 20px -10px rgba(107,70,50,.6)}
html.preview-2 .pricing-dots{display:none;justify-content:center;gap:6px;margin-top:16px}
html.preview-2 .pricing-dots i{width:6px;height:6px;border-radius:50%;background:rgba(71,45,32,.2);transition:background-color .3s, transform .3s}
html.preview-2 .pricing-dots i.is-on{background:var(--mocha);transform:scale(1.25)}
html.preview-2 .pricing-compare{display:flex;justify-content:center;margin:clamp(30px, 3.6vw, 48px) 0 0}
html.preview-2 .pricing-compare .button--line{min-height:44px;padding:0 18px;font-size:.62rem;letter-spacing:.13em;border-color:var(--rule);color:var(--ink-soft)}
html.preview-2 .pricing-compare .button--line svg{width:15px;height:15px}
html.preview-2 .modal{position:fixed;inset:0;z-index:86;display:grid;place-items:center;padding:clamp(16px, 4vh, 48px) 16px;opacity:0;transition:opacity .3s ease;pointer-events:none}
html.preview-2 .modal.is-open{opacity:1;pointer-events:auto}
html.preview-2 .modal[hidden]{display:none}
html.preview-2 .modal__panel{display:flex;flex-direction:column;width:min(720px, 100%);max-height:min(84svh, 860px);overflow:hidden;border-radius:26px;background:var(--card);color:var(--ink);
  box-shadow:0 50px 110px -30px rgba(30,18,12,.5), 0 2px 8px rgba(30,18,12,.06);transform:translateY(18px) scale(.985);transition:transform .5s var(--ease-out-expo)}
html.preview-2 .modal.is-open .modal__panel{transform:none}
html.preview-2 .modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 20px 16px 32px}
html.preview-2 .modal__head .kicker{margin-bottom:.5rem}
html.preview-2 .modal__title{margin:0;font:400 clamp(1.7rem, 2.6vw, 2.2rem)/1 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
html.preview-2 .modal__title em{margin-right:.08em;font:400 1.4em/.7 var(--script);letter-spacing:-.01em;text-transform:capitalize;color:var(--mocha)}
html.preview-2 .modal__body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 32px 10px}
html.preview-2 .modal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 32px 22px;border-top:1px solid var(--line);font:400 italic 1rem/1.4 var(--serif);color:var(--ink-muted)}
html.preview-2 .modal__foot .button{min-height:46px;padding:0 1.4rem}
html.preview-2 .compare-table{width:100%;border-collapse:collapse;font:400 1rem/1.35 var(--serif)}
html.preview-2 .compare-table th{position:sticky;top:0;z-index:1;padding:14px 0 12px;background:var(--card);font:650 .56rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);text-align:left;border-bottom:1px solid var(--line)}
html.preview-2 .compare-table td{padding:0;height:52px;border-bottom:1px solid rgba(71,45,32,.1);color:var(--ink-soft)}
html.preview-2 .compare-table th:not(:first-child),html.preview-2 .compare-table td:not(:first-child){width:19%;text-align:center}
html.preview-2 .compare-table th:last-child,html.preview-2 .compare-table td:last-child{border-left:1px solid rgba(71,45,32,.1);color:var(--ink)}
html.preview-2 .compare-table .group td{height:auto;padding:24px 0 8px;border-bottom:0;border-left:0;font:650 .56rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--kick-ink)}
html.preview-2 .compare-table .yes{color:var(--mocha);font-size:1.05rem}
html.preview-2 .compare-table .no{color:rgba(71,45,32,.3)}
html.preview-2 .pricing-note{margin-top:1.6rem;text-align:center}

/* ── 7 · finale: closing line, the mail button, and the signature bar ── */
/* the finale: the hero's wall and its tree, no figure, under an arched top; the signature bar sits on it */
html.preview-2 .finale{--arch:clamp(54px, 8vw, 132px);--finale-shade:linear-gradient(180deg, rgba(28,17,11,.18), rgba(28,17,11,.34) 46%, rgba(28,17,11,.62));
  position:relative;z-index:2;margin:clamp(24px, 3vw, 40px) var(--inset) var(--inset);padding:calc(var(--arch) + clamp(40px, 5vw, 72px)) clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px);
  border-radius:50% 50% var(--slab-radius) var(--slab-radius) / var(--arch) var(--arch) var(--slab-radius) var(--slab-radius);overflow:hidden;
  background:var(--finale-shade), url(/images/landing/finale-wall-wide.webp) center top / cover no-repeat, #34261F;
  color:var(--on-dark);box-shadow:0 44px 90px -44px rgba(48,29,19,.5), 0 12px 28px -18px rgba(48,29,19,.24)}
@media (orientation:portrait), (max-width:720px){
  html.preview-2 .finale{background:var(--finale-shade), url(/images/landing/finale-wall-tall.webp) center top / cover no-repeat, #34261F}
}
/* the leaves: a canvas redraws the same still and shade with the shadows stirred, so it fades in unseen */
html.preview-2 .finale__leaves{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease;pointer-events:none}
html.preview-2 .finale[data-leaves] .finale__leaves{opacity:1}
html.preview-2 .finale__in,html.preview-2 .finale__bar{position:relative;z-index:1}
html.preview-2 .finale .mail-form .form-status{color:var(--on-dark-soft)}
html.preview-2 .finale .mail-alt{color:var(--on-dark-muted)}
html.preview-2 .finale .mail-alt a{color:var(--on-dark-soft)}
html.preview-2 .finale .mail-form .button{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
html.preview-2 .finale .mail-form .button:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--dark)}
html.preview-2 .finale__in{display:grid;justify-items:center;gap:14px;padding:0 var(--pad-x) clamp(26px, 3vw, 40px);text-align:center}
html.preview-2 .finale__line{margin:0 0 .3em;font:400 clamp(2rem, 3.9vw, 3.4rem)/1.02 var(--serif);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
html.preview-2 .finale__line{text-shadow:0 2px 24px rgba(20,12,8,.45)}
html.preview-2 .finale__line em{display:inline-block;margin:-.12em .06em 0;font:400 1.75em/.7 var(--script);letter-spacing:-.01em;text-transform:capitalize;color:#E8CDAE}
html.preview-2 .finale__in > .button{margin-top:14px;min-height:44px;padding:0 22px;font-size:.6rem;background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
html.preview-2 .finale__in > .button:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--dark)}

/* the big mail button from the live landing page: a round envelope that opens the form beneath */
html.preview-2 .mailer{display:grid;justify-items:center;gap:0;width:100%;margin:clamp(18px, 2.4vw, 28px) 0 0}
html.preview-2 .mailer__toggle{display:grid;place-items:center;width:86px;height:86px;border:1px solid rgba(71,45,32,.16);border-radius:50%;background:var(--card);color:var(--mocha);cursor:pointer;
  box-shadow:0 16px 34px -24px rgba(60,40,30,.45);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease}
html.preview-2 .mailer__toggle svg{width:36px;height:36px}
@media (hover:hover){
  html.preview-2 .mailer__toggle:hover{transform:translateY(-4px) rotate(-2deg);border-color:var(--mocha);background:#FAF7F3;box-shadow:0 22px 42px -22px rgba(60,40,30,.48)}
  html.preview-2 .mailer__toggle:hover svg{animation:mailWiggle .7s ease both}
}
html.preview-2 .mailer__toggle:focus-visible{outline:2px solid var(--mocha);outline-offset:5px}
html.preview-2 .mailer__toggle:active{transform:scale(.96)}
html.preview-2 .mailer__toggle[aria-expanded="true"]{background:var(--mocha);color:var(--paper);border-color:var(--mocha)}
@keyframes mailWiggle{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-5deg)}62%{transform:translateY(1px) rotate(4deg)}}
html.preview-2 .mailer__label{margin:14px 0 0;font:600 .6rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-soft)}
html.preview-2 .mailer__panel{display:grid;grid-template-rows:0fr;width:min(560px, 100%);opacity:0;transform:translateY(-8px);transition:grid-template-rows .45s var(--ease-out-expo), opacity .3s ease, transform .45s var(--ease-out-expo), margin .45s var(--ease-out-expo)}
html.preview-2 .mailer__panel > div{min-height:0;overflow:hidden}
html.preview-2 .mailer.is-open .mailer__panel{grid-template-rows:1fr;opacity:1;transform:none;margin-top:22px}
html.preview-2 .mail-form{display:grid;gap:12px;padding:4px 2px 8px;text-align:left}
html.preview-2 .mail-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html.preview-2 .mail-form input,html.preview-2 .mail-form textarea{width:100%;padding:.8rem 1rem;border:1px solid rgba(58,39,26,.18);border-radius:14px;background:#FFFFFF;color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .25s, box-shadow .25s}
html.preview-2 .mail-form textarea{min-height:112px;resize:vertical}
html.preview-2 .mail-form input:focus,html.preview-2 .mail-form textarea:focus{outline:0;border-color:var(--mocha);box-shadow:0 0 0 3px rgba(107,70,50,.12)}
html.preview-2 .mail-form .button{width:100%;margin-top:2px}
html.preview-2 .mail-form .form-status{min-height:0;margin:0;text-align:center;font:400 italic .98rem/1.4 var(--serif);color:var(--ink-soft)}
html.preview-2 .mail-form .form-status:empty{display:none}
html.preview-2 .mail-alt{margin:0;text-align:center;font:500 .72rem/1.5 var(--sans);color:var(--ink-muted);overflow-wrap:anywhere}
html.preview-2 .mail-alt a{color:var(--ink-soft);text-underline-offset:3px}
/* the signature bar, after the wedding website's footer */
html.preview-2 .finale__bar{display:grid;justify-items:center;padding:clamp(30px, 3.4vw, 44px) clamp(20px, 4vw, 48px);border-radius:calc(var(--slab-radius) - 8px);border:1px solid rgba(247,239,228,.1);background:rgba(36,24,18,.86);color:var(--on-dark)} /* no live blur: it sits over a canvas that repaints on scroll */
html.preview-2 .finale__sign{display:flex;align-items:center;gap:clamp(16px, 2vw, 24px);min-height:44px;color:inherit;text-decoration:none}
html.preview-2 .finale__sign svg{width:clamp(42px, 4vw, 54px);height:clamp(42px, 4vw, 54px);fill:currentColor}
html.preview-2 .finale__rule{width:1px;height:clamp(42px, 4vw, 54px);background:rgba(247,239,228,.26)}
html.preview-2 .finale__name{display:grid;gap:8px;text-align:left}
html.preview-2 .finale__name b{font:400 clamp(1.4rem, 2vw, 1.75rem)/1 var(--serif);letter-spacing:.01em}
html.preview-2 .finale__name small{font:500 .56rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark-muted)}
html.preview-2 .finale__meta{display:none}
html.preview-2 .finale__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 2px;width:min(640px, 100%);margin:clamp(30px, 4vw, 48px) 0 0;padding-top:clamp(22px, 2.6vw, 32px);border-top:1px solid var(--on-dark-line)}
html.preview-2 .finale__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 11px;font:600 .58rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-soft);text-decoration:none;transition:color .25s}
html.preview-2 .finale__links a::after{content:"";position:absolute;left:10px;right:10px;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out-expo)}
html.preview-2 .finale__links a:hover{color:var(--on-dark)}
html.preview-2 .finale__links a:hover::after{transform:none}
html.preview-2 .finale__legal-status{flex-basis:100%;margin:8px 0;font:500 .65rem/1.5 var(--sans);color:var(--on-dark-soft);text-align:center}
html.preview-2 .finale__copy{margin:2px 0 0;font:500 .56rem/1.8 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
html.preview-2 .finale__copy a{display:inline-block;padding:14px 2px;color:inherit;text-decoration:none}
html.preview-2 .finale__copy a:hover{color:var(--on-dark)}

/* ── colour picker (a light port of the planner's swatch popover) ─────── */
html.preview-2 .lb-colour-pop{position:fixed;z-index:88;width:304px;max-height:min(560px, calc(100svh - 24px));overflow:auto;overscroll-behavior:contain;padding:12px 14px 14px;border:1px solid rgba(71,45,32,.1);border-radius:20px;background:var(--card);color:var(--ink);
  box-shadow:0 30px 70px -24px rgba(30,18,12,.42), 0 2px 8px rgba(30,18,12,.06);opacity:0;transform:translateY(6px) scale(.98);transform-origin:50% 0;transition:opacity .2s ease, transform .35s var(--ease-out-expo)}
html.preview-2 .lb-colour-pop.is-open{opacity:1;transform:none}
html.preview-2 .lcp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
html.preview-2 .lcp-head b{font:500 1.2rem/1 var(--serif)}
html.preview-2 .lcp-close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:var(--ink-muted);cursor:pointer}
html.preview-2 .lcp-close:hover{background:rgba(71,45,32,.07);color:var(--ink)}
html.preview-2 .lcp-close svg{width:16px;height:16px}
html.preview-2 .lcp-label{margin:12px 2px 7px;font:650 .54rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
html.preview-2 .lcp-row{display:flex;flex-wrap:wrap;gap:6px}
html.preview-2 .lcp-swatch{width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:transform .25s var(--ease-out-expo), box-shadow .2s}
@media (hover:hover){html.preview-2 .lcp-swatch:hover{transform:scale(1.14)}}
html.preview-2 .lcp-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--card), 0 0 0 3.5px var(--ink)}
html.preview-2 .lcp-swatch:focus-visible{outline:2px solid var(--mocha);outline-offset:3px}
html.preview-2 .lcp-more{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
html.preview-2 .lcp-hex{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid rgba(58,39,26,.18);border-radius:10px;background:#FFFFFF;color:var(--ink);font:500 .82rem/1 var(--sans)}
html.preview-2 .lcp-hex:focus{outline:0;border-color:var(--mocha);box-shadow:0 0 0 3px rgba(107,70,50,.12)}
html.preview-2 .lcp-hex[aria-invalid="true"]{border-color:#B84A4F}
html.preview-2 .lcp-use{height:36px;padding:0 14px;border:1px solid rgba(58,39,26,.18);border-radius:10px;background:#FFFFFF;color:var(--ink);font:600 .72rem/1 var(--sans);cursor:pointer;transition:background-color .2s, color .2s}
html.preview-2 .lcp-use:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ── dock (quick answers) and its panel ─────────────────────────────────── */
html.preview-2 .dock{position:fixed;right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));z-index:80;display:grid;justify-items:end;gap:10px;
  transition:opacity .4s ease, transform .5s var(--ease-out-expo), visibility 0s linear 0s}
html.preview-2 .dock[data-hidden]{opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;transition:opacity .3s ease, transform .4s ease, visibility 0s linear .4s}
html.preview-2 .dock-btn{--dk-bg:rgba(251,246,238,.84);--dk-ink:var(--ink);--dk-line:rgba(71,45,32,.12);
  display:inline-flex;align-items:center;height:48px;padding:0 13px;border:1px solid var(--dk-line);border-radius:999px;background:var(--dk-bg);color:var(--dk-ink);
  box-shadow:0 12px 30px -12px rgba(30,18,12,.35);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease}
html.preview-2 .dock[data-tone="dark"] .dock-btn{--dk-bg:rgba(45,30,22,.62);--dk-ink:var(--on-dark);--dk-line:rgba(255,249,239,.16)}
html.preview-2 .dock-btn svg{flex:0 0 auto;width:20px;height:20px}
html.preview-2 .dock-btn__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font:600 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  transition:max-width .45s var(--ease-out-expo), margin .45s var(--ease-out-expo), opacity .25s ease}
@media (hover:hover){
  html.preview-2 .dock-btn:hover .dock-btn__label,html.preview-2 .dock-btn:focus-visible .dock-btn__label{max-width:10em;margin:0 3px 0 10px;opacity:1}
  html.preview-2 .dock-btn:hover{box-shadow:0 16px 36px -12px rgba(30,18,12,.45)}
}
html.preview-2 .dock-btn[aria-expanded="true"]{--dk-bg:var(--dark);--dk-ink:var(--on-dark);--dk-line:var(--dark)}
html.preview-2 .dock-btn:active{transform:scale(.96)}
html.preview-2 .scrim{position:fixed;inset:0;z-index:84;background:rgba(28,17,11,.34);opacity:0;transition:opacity .3s ease}
html.preview-2 .scrim.is-open{opacity:1}
html.preview-2 .sheet{position:fixed;z-index:85;right:max(18px, env(safe-area-inset-right));bottom:calc(max(18px, env(safe-area-inset-bottom)) + 62px);display:flex;flex-direction:column;
  width:min(380px, calc(100vw - 36px));max-height:min(560px, calc(100svh - 220px));overflow:hidden;border:1px solid rgba(71,45,32,.1);border-radius:22px;background:var(--card);color:var(--ink);
  box-shadow:0 34px 80px -24px rgba(30,18,12,.42), 0 2px 8px rgba(30,18,12,.06);
  opacity:0;transform:translateY(10px) scale(.98);transform-origin:100% 100%;transition:opacity .28s ease, transform .45s var(--ease-out-expo)}
html.preview-2 .sheet.is-open{opacity:1;transform:none}
html.preview-2 .sheet[hidden]{display:none}
html.preview-2 .sheet--glass{height:min(560px, calc(100svh - 220px));border-color:rgba(255,255,255,.55);background:rgba(251,246,238,.74);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 34px 80px -24px rgba(30,18,12,.42), 0 2px 8px rgba(30,18,12,.06), inset 0 1px 0 rgba(255,255,255,.6)}
html.preview-2 .sheet--glass .sheet__foot{border-top-color:rgba(71,45,32,.1)}
html.preview-2 .sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 14px 12px 20px}
html.preview-2 .sheet__head > div{display:grid;gap:4px}
html.preview-2 .sheet__head b{font:500 1.4rem/1.1 var(--serif)}
html.preview-2 .sheet__head span{font:500 .74rem/1.4 var(--sans);color:var(--ink-muted)}
html.preview-2 .sheet__close{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;margin:-4px 0 0;border:0;border-radius:50%;background:transparent;color:var(--ink-muted);transition:background-color .25s, color .25s}
html.preview-2 .sheet__close:hover{background:rgba(71,45,32,.07);color:var(--ink)}
html.preview-2 .sheet__close svg{width:18px;height:18px}
html.preview-2 .sheet__body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px 20px 18px}
html.preview-2 .sheet__foot{padding:8px 14px 12px;border-top:1px solid var(--line)}
html.preview-2 .sheet__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--ink-soft);font:600 .62rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;transition:color .25s}
html.preview-2 .sheet__link svg{width:15px;height:15px;transition:transform .3s var(--ease-out-expo)}
html.preview-2 .sheet__link:hover{color:var(--ink)}
html.preview-2 .sheet__link:hover svg{transform:translateX(3px)}
html.preview-2 .mail-form{display:grid;gap:12px}
html.preview-2 .mail-form .field{display:grid;gap:6px}
html.preview-2 .mail-form .field span{font:650 .58rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
html.preview-2 .mail-form input,html.preview-2 .mail-form textarea{width:100%;padding:.75rem .9rem;border:1px solid rgba(58,39,26,.18);border-radius:12px;background:#FFFFFF;color:var(--ink);font:400 1rem/1.4 var(--sans);transition:border-color .25s, box-shadow .25s}
html.preview-2 .mail-form textarea{min-height:104px;resize:vertical}
html.preview-2 .mail-form input:focus,html.preview-2 .mail-form textarea:focus{outline:0;border-color:var(--mocha);box-shadow:0 0 0 3px rgba(107,70,50,.12)}
html.preview-2 .mail-form .button{width:100%;margin-top:4px}
html.preview-2 .mail-form .form-status{min-height:0;margin:0;text-align:center;font:400 italic .98rem/1.4 var(--serif);color:var(--ink-soft)}
html.preview-2 .mail-form .form-status:empty{display:none}
html.preview-2 .mail-alt{margin:0;text-align:center;font:500 .72rem/1.5 var(--sans);color:var(--ink-muted);overflow-wrap:anywhere}
html.preview-2 .mail-alt a{color:var(--ink-soft);text-underline-offset:3px}
html.preview-2 .faq-topics.seg{flex:0 0 auto;width:auto;gap:2px;margin:0 16px 8px;padding:4px;border-color:rgba(71,45,32,.08);background:rgba(255,255,255,.38);overflow-x:auto;scrollbar-width:none}
html.preview-2 .faq-topics::-webkit-scrollbar{display:none}
html.preview-2 .faq-topics.seg button{flex:1 0 auto;min-height:32px;padding:0 12px;font-size:.64rem;letter-spacing:.04em}
html.preview-2 .faq-topics.seg button[aria-pressed="true"]{color:var(--ink)}
html.preview-2 .faq-topics.seg .seg__glide{top:4px;background:#FFFFFF;box-shadow:0 2px 8px rgba(48,29,19,.14)}
html.preview-2 .sheet__body.faq-list{flex:1 1 auto}
html.preview-2 .faq-item{border-bottom:1px solid var(--line)}
html.preview-2 .faq-item:last-child{border-bottom:0}
html.preview-2 .faq-item[hidden]{display:none}
html.preview-2 .faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:52px;padding:12px 0;border:0;background:none;color:var(--ink);text-align:left;font:500 1.06rem/1.3 var(--serif)}
html.preview-2 .faq-q svg{flex:0 0 auto;width:16px;height:16px;color:var(--ink-muted);transition:transform .4s var(--ease-out-expo)}
html.preview-2 .faq-q[aria-expanded="true"] svg{transform:rotate(180deg)}
html.preview-2 .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out-expo)}
html.preview-2 .faq-a > div{min-height:0;overflow:hidden}
html.preview-2 .faq-a p{margin:0 0 14px;font:400 .88rem/1.6 var(--sans);color:var(--ink-soft)}
html.preview-2 .faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}

/* ── tablet ─────────────────────────────────────────────────────────────── */
@media (max-width:1020px){
  html.preview-2{--pad-y:88px;--pad-x:40px}
  html.preview-2 .ask{grid-template-columns:minmax(0, 1fr);grid-template-areas:"copy" "window" "prompts";gap:28px;max-width:640px;margin:0 auto}
  html.preview-2 .ask-copy{justify-items:center;text-align:center}
  html.preview-2 .ask-prompts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  html.preview-2 .ask-prompts__label{grid-column:1 / -1;text-align:center}
  html.preview-2 .ask-prompts button,html.preview-2 .ask-prompts button:last-child{min-height:64px;padding:12px 14px;border:1px solid rgba(247,239,228,.14);border-radius:16px;font-size:1.02rem}
  html.preview-2 .ask-prompts button[aria-pressed="true"]{padding-left:14px;background:rgba(247,239,228,.08);border-color:rgba(247,239,228,.3)}
  html.preview-2 .ask-prompts button::before{display:none}
  html.preview-2 .ask-prompts button svg{display:none}
  html.preview-2 .pricing-grid{grid-template-columns:minmax(0, 1fr);max-width:540px;margin:0 auto}
  html.preview-2 .tier--featured{order:-1}
  html.preview-2 .finale__meta{justify-content:center;text-align:center}
  html.preview-2 .finale__links{justify-content:center;margin:0}
}
@media (max-width:860px){
  html.preview-2 .nav a{padding:.75rem .55rem;letter-spacing:.1em}
}

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (pointer:coarse){
  html.preview-2 .seg button,html.preview-2 .mock-tabs button,html.preview-2 .mock-device button,html.preview-2 .device-switch button{min-height:44px}
  html.preview-2 .lcp-swatch{width:44px;height:44px}
  html.preview-2 .lcp-hex,html.preview-2 .lcp-use{height:44px;font-size:16px}
}
@media (max-width:720px){
  html.preview-2{--pad-y:68px;--pad-x:20px;--inset:8px;--slab-radius:26px}
  html.preview-2 .bar{grid-template-columns:auto minmax(0, 1fr) auto;gap:8px;top:12px;width:calc(100vw - 24px);min-height:58px;padding:7px 8px 7px 12px;touch-action:pan-y}
  html.preview-2 .bar.scrolled{top:12px}
  /* the current section's name rides in the bar, sliding in from the side you came from */
  html.preview-2 .bar-section{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 1.2rem/1 var(--serif);letter-spacing:.01em;opacity:0}
  html.preview-2 .bar-section.is-on{animation:barSectionIn .55s var(--ease-out-expo) both}
  html.preview-2 .bar-section[data-dir="right"].is-on{animation-name:barSectionInRight}
  html.preview-2 body.menu-open .bar-section{opacity:0;animation:none}
  html.preview-2 .bar-login{display:inline-flex;min-height:44px;padding:0 .7rem;font-size:.58rem}
  html.preview-2 .bar-login::after{display:none}
  /* the toggle: two lines that become a cross, no disc behind them */
  html.preview-2 .menu-toggle{position:relative;width:44px;height:44px;border-radius:50%;background:none}
  html.preview-2 .menu-toggle span{display:none}
  html.preview-2 .menu-toggle::before,html.preview-2 .menu-toggle::after{position:absolute;left:50%;top:50%;width:20px;height:1.5px;margin:-1px 0 0 -10px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease-out-expo)}
  html.preview-2 .menu-toggle::before{transform:translateY(-3.5px)}
  html.preview-2 .menu-toggle::after{transform:translateY(3.5px)}
  html.preview-2 body.menu-open .menu-toggle::before{transform:rotate(45deg)}
  html.preview-2 body.menu-open .menu-toggle::after{transform:rotate(-45deg)}
  html.preview-2 .menu-toggle:active{transform:scale(.94)}
  /* the menu: a glass panel in the bar's own language, serif links, the log-in pill last */
  html.preview-2 .nav{position:fixed;z-index:90;top:80px;left:12px;right:12px;justify-self:stretch;display:grid;gap:0;padding:6px 8px 10px;border:1px solid rgba(255,249,239,.16);border-radius:calc(var(--radius-xl) - 14px);color:var(--on-dark);
    background:rgba(45,33,27,.78);box-shadow:0 30px 70px -22px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%);
    opacity:0;pointer-events:none;transform:translateY(-8px) scale(.985);transform-origin:top center;transition:opacity .28s ease, transform .5s var(--ease-out-expo)}
  html.preview-2 body.menu-open .nav{opacity:1;pointer-events:auto;transform:none}
  html.preview-2 .nav a{justify-content:flex-start;min-height:54px;padding:0 14px;border-bottom:1px solid rgba(255,249,239,.1);opacity:.9;font:400 1.35rem/1 var(--serif);letter-spacing:.01em;text-transform:none;transform:translateY(6px);transition:opacity .3s ease, transform .5s var(--ease-out-expo)}
  html.preview-2 .nav a:nth-child(5){border-bottom:0}
  html.preview-2 .nav a.active{opacity:1}
  html.preview-2 .nav a{gap:10px}
  html.preview-2 .nav a.active::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
  html.preview-2 body.menu-open .nav a{opacity:.85;transform:none}
  html.preview-2 body.menu-open .nav a.active{opacity:1}
  html.preview-2 body.menu-open .nav a:nth-child(2){transition-delay:.04s}
  html.preview-2 body.menu-open .nav a:nth-child(3){transition-delay:.08s}
  html.preview-2 body.menu-open .nav a:nth-child(4){transition-delay:.12s}
  html.preview-2 body.menu-open .nav a:nth-child(5){transition-delay:.16s}
  html.preview-2 body.menu-open .nav a:nth-child(6){transition-delay:.2s}
  html.preview-2 .nav .nav-login{display:flex;justify-content:center;min-height:48px;margin:10px 0 0;border:0;border-radius:999px;background:var(--on-dark);color:var(--dark);font:600 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:1}
  html.preview-2 .nav .nav-login::before{display:none}
  html.preview-2 body.menu-open .nav .nav-login{opacity:1}
  html.preview-2 .section-title{font-size:clamp(2rem, 8.6vw, 2.6rem);line-height:1.16}
  /* wrapped titles: a smaller script word, so its swashes stay clear of the line beside it */
  html.preview-2 .section-title em{font-size:1.32em}
  html.preview-2 .lead{font-size:1.08rem}
  html.preview-2 .tour-picker{grid-template-columns:44px minmax(0, 1fr) 44px;gap:6px;width:100%}
  html.preview-2 .tour-picker__arrow{width:44px;height:44px}
  html.preview-2 .tour-tabs{padding:12px 20px 26px;margin:-12px -20px -26px;-webkit-mask-image:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);mask-image:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent)}
  html.preview-2 .tour-tabs__track{grid-auto-columns:calc((100% - 2 * 8px) / 3)}
  html.preview-2 .tour-tile{font-size:.66rem;gap:7px}
  html.preview-2 .tour-tile__disc{width:50px;height:50px}
  html.preview-2 .tour-tile__disc svg{width:23px;height:23px}
  html.preview-2 .stage-wrap{--h:calc(100cqw / 1.6)}
  html.preview-2 .stage-wrap[data-device="phone"]{--h:min(66svh, 540px)}
  html.preview-2 .stage-wrap[data-device="phone"] .tour-stage{--ph:calc(var(--h) - 20px)}
  html.preview-2 .tour-stage{border-radius:20px}
  html.preview-2 .tools,html.preview-2 .assistant{padding-inline:18px}
  html.preview-2 .theme-stage{--stage-pad:18px}
  html.preview-2 .ix-tabs.seg{width:100%}
  html.preview-2 .ix-tabs button{flex:1 1 auto;padding:0 8px;font-size:.72rem}
  html.preview-2 .ix-more > div{padding-left:40px}
  html.preview-2 .swatch-row{flex-wrap:nowrap;justify-content:flex-start;gap:18px;margin:0 calc(-1 * var(--stage-pad));padding:6px var(--stage-pad) 4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)}
  html.preview-2 .swatch-row::-webkit-scrollbar{display:none}
  html.preview-2 .swatch{flex:0 0 auto;scroll-snap-align:center}
  html.preview-2 .swatch i{width:52px;height:52px}
  html.preview-2 .swatch span{font-size:.92rem}
  html.preview-2 .mock-controls{margin-top:24px}
  html.preview-2 .mock-tabs.seg{width:100%}
  html.preview-2 .mock-tabs button{flex:1 1 auto;padding:0 8px}
  /* Thumbs and enlarged text: keep the hit area, let the segments reflow. */
  html.preview-2 .seg button,html.preview-2 .mock-tabs button,html.preview-2 .device-switch button{min-height:44px}
  /* a phone always holds the phone planner: a desktop at a fifth of its size says nothing */
  html.preview-2 .mock-device{display:none}
  html.preview-2 .preview__canvas,html.preview-2 .preview[data-device="phone"] .preview__canvas{border-radius:20px}
  html.preview-2 .preview__start{bottom:14px;padding:10px 16px;font-size:.6rem}
  html.preview-2 .ask{grid-template-areas:"copy" "prompts" "window";gap:22px}
  html.preview-2 .ask-window{height:min(440px, 62svh);border-radius:20px}
  html.preview-2 .ask-head{padding:8px 10px 8px 14px}
  html.preview-2 .ask-thread{padding:14px 14px 12px}
  html.preview-2 .ask-compose{margin:0 10px 10px}
  /* the prompts are one row of pills above the window; ends padded and faded so a cut pill reads as "more" */
  html.preview-2 .ask-prompts{display:flex;gap:8px;margin:0 calc(-1 * var(--pad-x));padding:2px var(--pad-x);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad-x);scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);mask-image:linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent)}
  html.preview-2 .ask-prompts::-webkit-scrollbar{display:none}
  html.preview-2 .ask-prompts__label{display:none}
  html.preview-2 .ask-prompts button,html.preview-2 .ask-prompts button:last-child{flex:0 0 auto;scroll-snap-align:start;min-height:44px;padding:0 17px;border-radius:999px;font-size:.98rem;line-height:1;white-space:nowrap}
  html.preview-2 .ask-prompts button[aria-pressed="true"]{padding-left:17px;background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
  html.preview-2 .ac-donut{gap:16px;padding:12px}
  html.preview-2 .ac-donut svg{width:92px;height:92px}
  html.preview-2 .ac-bar{grid-template-columns:1fr auto;grid-template-areas:"label value" "track track";gap:5px 10px}
  html.preview-2 .ac-bar > span{grid-area:label}
  html.preview-2 .ac-bar > b{grid-area:value}
  html.preview-2 .ac-bar > .ac-track{grid-area:track}
  html.preview-2 .ac-table > div{grid-template-columns:1fr auto;gap:2px 12px}
  html.preview-2 .ac-table > div > span:nth-child(2){grid-column:1;grid-row:2;color:var(--ink-muted);font-size:.74rem}
  html.preview-2 .ac-table > div > span:last-child{grid-row:1 / span 2;align-self:center}
  html.preview-2 .ac-table > div:first-child{display:none}
  html.preview-2 .ac-table > div:nth-child(2){border-top:0}
  /* an overflow scroller clips its children's shadows: give them room, and take it back with the margins */
  html.preview-2 .pricing-grid{display:flex;gap:12px;max-width:none;margin:-18px calc(-1 * var(--pad-x)) -48px;padding:26px var(--pad-x) 64px;scroll-padding-inline:var(--pad-x);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  html.preview-2 .pricing-grid::-webkit-scrollbar{display:none}
  html.preview-2 .tier{flex:0 0 calc(100% - 32px);scroll-snap-align:center;border-radius:24px}
  html.preview-2 .tier--featured{order:-1}
  html.preview-2 .pricing-dots{display:flex}
  html.preview-2 .modal{padding:0;align-items:end}
  html.preview-2 .modal__panel{width:100%;max-height:92svh;border-radius:22px 22px 0 0;transform:translateY(28px)}
  html.preview-2 .modal__head{padding:22px 12px 12px 20px}
  html.preview-2 .modal__body{padding:0 20px 8px}
  html.preview-2 .modal__foot{padding:14px 20px calc(18px + env(safe-area-inset-bottom));justify-content:center;text-align:center}
  html.preview-2 .compare-table{font-size:.94rem}
  html.preview-2 .compare-table td{height:48px}
  html.preview-2 .compare-table th:not(:first-child),html.preview-2 .compare-table td:not(:first-child){width:21%}
  html.preview-2 .mail-form__row{grid-template-columns:1fr}
  html.preview-2 .mail-form input,html.preview-2 .mail-form textarea{font-size:16px}
  html.preview-2 .finale{margin-bottom:calc(var(--inset) + 64px);padding-top:calc(var(--arch) + 38px)}
  html.preview-2 .finale__in{padding-inline:8px}
  html.preview-2 .finale__sign{gap:14px}
  html.preview-2 .finale__links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;max-width:300px}
  html.preview-2 .lb-colour-pop.is-sheet{left:0 !important;right:0;top:auto !important;bottom:0;width:100%;max-height:82svh;padding:10px 18px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;transform:translateY(28px);transform-origin:50% 100%}
  html.preview-2 .lb-colour-pop.is-sheet.is-open{transform:none}
  html.preview-2 .lb-colour-pop.is-sheet .lcp-swatch{width:44px;height:44px}
  html.preview-2 .lb-colour-pop.is-sheet .lcp-row{gap:8px}
  html.preview-2 .lcp-hex,html.preview-2 .lcp-use{height:44px;font-size:16px}
  html.preview-2 .dock{right:12px;bottom:max(12px, env(safe-area-inset-bottom));gap:8px}
  html.preview-2 .dock-btn{height:44px;padding:0 11px}
  html.preview-2 .sheet{left:0;right:0;bottom:0;width:100%;max-height:86svh;padding-bottom:env(safe-area-inset-bottom);border-radius:22px 22px 0 0;border-bottom:0;transform:translateY(28px);transform-origin:50% 100%}
  html.preview-2 .sheet--glass{height:min(620px, 82svh);background:rgba(251,246,238,.86)}
  html.preview-2 .sheet::before{content:"";align-self:center;flex:0 0 auto;width:38px;height:4px;margin-top:9px;border-radius:999px;background:rgba(71,45,32,.18)}
  html.preview-2 .sheet__head{padding-top:12px}
  html.preview-2 .faq-q{min-height:56px}
}
@media (max-width:380px){
  html.preview-2 .ac-donut{flex-direction:column;align-items:flex-start}
}
html.preview-2 body.sheet-lock{overflow:hidden}
html.preview-2 body.menu-open .hero-mark,
html.preview-2[data-phone-motion="native"]:has(.sheet.is-open, .modal.is-open) .hero-mark{visibility:hidden}
/* the flying monogram sits above everything; while it is still on the hero, an open sheet or dialog covers it */
html.preview-2[data-mark="hero"]:has(.sheet.is-open, .modal.is-open) .hero-mark{opacity:0;transition:opacity .2s ease}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .scroll-hero[data-scrub]{height:100svh}
  .scroll-hero__stage{position:relative}
  .scroll-hero__hint{display:none}
  html.preview-2 .hero-mark{display:none}
  html.preview-2 .am.is-in .ac-donut svg{animation:none}
  html.preview-2 .mailer__pill,html.preview-2 .mailer__label,html.preview-2 .mailer__slot input{transition:none}
  html.preview-2 .mailer__pill:hover .mailer__icon,html.preview-2 .mailer__pill::after{animation:none}
}
@keyframes barSectionIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes barSectionInRight{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}