/* ============================================================
   StayQ — London short-let management
   Paper/ink base, one ultramarine accent.
   Signature: the ultramarine grade over the London photograph.
   ============================================================ */

:root{
  --ink:#0A0A0B;
  --ink-80:#2B2B31;
  --paper:#FFFFFF;
  --soft:#F3F3F5;
  --line:rgba(10,10,11,.11);
  --line-dk:rgba(255,255,255,.13);
  --mute:#6C6C77;
  --mute-inv:#9A9AA6;
  --blue:#0F2BFF;
  --blue-dk:#0A1FCC;
  --blue-lite:#8296FF;      /* the accent, lifted for dark surfaces */
  --blue-soft:#E8EAFF;
  /* The third colour has one job and never strays from it: money you gain.
     Ultramarine stays StayQ itself — the product, the navigation, the marks.
     Warm is the upside — deltas against last year, peak months, the margin
     over the street. Two accents only work when each owns a meaning. */
  --warm:#FF5A2B;
  --warm-dk:#E8461A;
  --warm-lite:#FF9E7A;
  --warm-soft:#FFEDE4;
  --red:#D93025;
  --red-inv:#FF6B5A;

  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,9vw,132px);
  --r:16px;
  --r-sm:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}

/* Lenis smooth scroll. Without Lenis loaded none of this applies,
   and the page falls back to the plain native scroll. */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, а не hidden: hidden создаёт лишний скролл-контейнер, из-за которого
     страдают position:sticky и Lenis. Обрезка та же, побочных эффектов нет. */
  overflow-x:clip;
}

/* Все меняющиеся цифры — моноширинными знаками. Иначе при пересчёте
   калькулятора суммы «дёргаются» по ширине, потому что единица
   в пропорциональном шрифте уже семёрки. */
.num,.delta__n,td,
#aNet,#aGross,#aFee,#aBills,#aLong{
  font-variant-numeric:tabular-nums;
}

/* Абзацы не оставляют одинокое слово на последней строке.
   Для заголовков это уже сделано через text-wrap:balance. */
p,.sub,.lede,.note{text-wrap:pretty}

/* ── View Transitions на пересчёте калькулятора ──────────────
   Имя назначается ТОЛЬКО меняющимся числам: тогда браузер анимирует
   именно их, а не кроссфейдит страницу целиком. Имя должно быть
   уникальным — два элемента с одним именем ломают переход. */
#aGross{view-transition-name:v-gross}
#aFee  {view-transition-name:v-fee}
#aBills{view-transition-name:v-bills}
#aNet  {view-transition-name:v-net}
#aLong {view-transition-name:v-long}

::view-transition-old(v-net),::view-transition-new(v-net),
::view-transition-old(v-gross),::view-transition-new(v-gross),
::view-transition-old(v-fee),::view-transition-new(v-fee),
::view-transition-old(v-bills),::view-transition-new(v-bills),
::view-transition-old(v-long),::view-transition-new(v-long){
  animation-duration:.32s;animation-timing-function:cubic-bezier(.16,1,.3,1);
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(*),::view-transition-new(*){animation:none}
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:900px}

/* ── typography ─────────────────────────────────────── */
.h1{
  font-family:var(--display);
  font-size:clamp(2.7rem,5.6vw,5.4rem);
  line-height:.96;letter-spacing:-.035em;font-weight:700;
  margin:.3em 0 .5em;text-wrap:balance;
}
/* Full size on the photograph, where there is room for it. */
.h1--hero{color:#fff;max-width:15ch;font-size:clamp(2.3rem,3.7vw,3.5rem);line-height:1;margin:.2em 0 .4em}
.h1__l{display:block}
.mark{
  font-style:normal;background:var(--blue);color:#fff;
  padding:0 .16em .06em;display:inline-block;
  transform:rotate(-1.2deg);border-radius:6px;
}
.h2{
  font-family:var(--display);
  font-size:clamp(2rem,3.9vw,3.4rem);
  line-height:1.02;letter-spacing:-.03em;font-weight:700;
  margin:.15em 0 .5em;max-width:19ch;text-wrap:balance;
}
.h2--inv{color:#fff}
.sub{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--mute);max-width:62ch;margin:0 0 1.6em}
.sub--inv{color:var(--mute-inv)}
.lede{font-size:clamp(1.04rem,1.35vw,1.24rem);color:var(--ink-80);max-width:56ch;margin:0 0 2em}
.lede--inv{color:rgba(255,255,255,.88);text-shadow:0 1px 20px rgba(10,10,11,.5);margin-bottom:1.5em;max-width:60ch}

.eyebrow{
  display:flex;align-items:center;gap:10px;margin:0 0 4px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);
}
.eyebrow--inv{color:rgba(255,255,255,.75)}
.dot{width:7px;height:7px;background:var(--blue);border-radius:50%;flex:none}

/* ── buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;text-decoration:none;font-weight:600;
  padding:14px 24px;border:0;border-radius:100px;cursor:pointer;
  letter-spacing:-.01em;transition:background .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{background:var(--blue-dk);transform:translateY(-2px)}
.btn--sm{padding:10px 18px;font-size:.92rem}
.btn--lg{padding:17px 30px;font-size:1.02rem}
.btn--full{width:100%}
.btn--ghost{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.lnk{
  color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:2px solid var(--blue);padding-bottom:2px;
  transition:color .18s var(--ease);
}
.lnk:hover{color:var(--blue)}
.lnk--inv{color:#fff;border-bottom-color:var(--blue-lite)}
.lnk--inv:hover{color:var(--blue-lite)}

/* ── promise bar ────────────────────────────────────── */
.topbar{background:var(--ink);color:#fff}
/* The strip runs edge to edge rather than inside the page gutter: a marquee
   that stops short of the screen looks like it is stuck behind something.
   The mask fades both ends so words dissolve instead of being guillotined. */
.tbar{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);
}
/* width:max-content stops the two lists wrapping; -50% is exactly one list,
   which is what makes the restart invisible. */
.tbar__row{display:flex;width:max-content;animation:tbFlow 52s linear infinite}
.tbar:hover .tbar__row,.tbar:focus-within .tbar__row{animation-play-state:paused}
.tbar__set{display:flex;list-style:none;margin:0;padding:0}
.tbar__set li{
  display:flex;align-items:center;white-space:nowrap;padding:9px 0;
  font-family:var(--mono);font-size:.7rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute-inv);
}
.tbar__set li.is-key{color:#fff}
/* A small turned square between beats — quieter than a bullet, and it is the
   only ornament in the bar, so it can carry the accent colour. */
.tbar__set li::after{
  content:"";flex:none;width:4px;height:4px;margin:0 clamp(20px,2.4vw,34px);
  background:var(--blue-lite);rotate:45deg;
}
@keyframes tbFlow{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.rate{display:flex;align-items:center;gap:7px}
.rate b{font-weight:700}
.stars{color:var(--blue-lite);font-style:normal;letter-spacing:-.06em;font-size:.86rem}
.rate span{color:var(--mute-inv)}

/* ── header ─────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo__mark{
  width:30px;height:30px;background:var(--blue);color:#fff;border-radius:9px;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.05rem;
}
.logo__word{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.18rem}
.logo__word b{color:var(--blue);font-weight:700}
.logo--inv .logo__word{color:#fff}

.nav{display:flex;gap:24px;margin-inline:auto}
.nav a{text-decoration:none;font-size:.94rem;color:var(--ink-80);transition:color .16s var(--ease)}
.nav a:hover{color:var(--blue)}
.hdr__right{display:flex;align-items:center;gap:14px;flex:none}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mnav{display:none;flex-direction:column;gap:2px;padding:8px var(--pad) 22px;border-top:1px solid var(--line);background:#fff}
.mnav a{text-decoration:none;padding:13px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.mnav .btn{margin-top:14px;border-bottom:0}

/* ── hero ───────────────────────────────────────────── */
/* The photograph is graded into the brand rather than used raw: it is
   desaturated, then an ultramarine wash is laid over it, so a stock
   interior reads as ours and white type stays readable on top. */
.hero{
  position:relative;isolation:isolate;color:#fff;
  padding:clamp(30px,3.6vw,52px) 0 clamp(26px,3vw,42px);
  background:var(--ink);
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 44%;z-index:-2;
  /* Mirrored on purpose: in the original the bridge sits on the left,
     exactly where the headline needs the frame dark. Flipped, the view
     lands in the bright half where it can actually be seen. */
  transform:scaleX(-1);
  /* graded, not drowned: the view out of the window is the selling point */
  filter:grayscale(.4) contrast(1.05) brightness(1) saturate(.95);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg, rgba(10,10,11,.93) 0%, rgba(10,10,11,.78) 32%, rgba(10,10,11,.34) 58%, rgba(10,10,11,.14) 100%),
    linear-gradient(180deg, rgba(15,43,255,.26) 0%, rgba(15,43,255,.10) 60%, rgba(10,10,11,.22) 100%);
}
/* Two rows: the promise beside the headline where the frame is empty,
   the tool underneath where the hand goes. */
.hero__in{
  max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(20px,3vw,38px);align-items:start;
}
.hero__copy{grid-column:1;grid-row:1;max-width:52ch;align-self:center}
.hero__tool{grid-column:1/-1;grid-row:2;align-self:start}
.hero .lede--inv{margin-bottom:0}

/* the tool: the one white surface on the screen, so it pulls the eye */
.hero__tool{
  background:#fff;color:var(--ink);border-radius:var(--r);
  padding:clamp(18px,2vw,26px);width:100%;
  box-shadow:0 40px 80px -46px rgba(10,10,11,.8);
}
.tool__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.tool__l{font-family:var(--display);font-size:1.16rem;font-weight:700;letter-spacing:-.02em}
.tool__note{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

/* our take on the market's "free photography" seal: a stamped ticket */
.stamp{
  grid-column:2;grid-row:1;align-self:center;justify-self:end;
  background:var(--blue);color:#fff;border-radius:var(--r);
  padding:20px 22px;width:min(100%,286px);
  box-shadow:0 30px 60px -38px rgba(10,10,11,.9);
  display:grid;gap:10px;
}
.stamp__l{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.stamp ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* display:grid outranks the hidden attribute — say it explicitly */
.stamp ul[hidden]{display:none}
.stamp li{position:relative;padding-left:18px;font-size:.86rem;line-height:1.3}
.stamp li::before{
  content:"";position:absolute;left:0;top:.38em;width:10px;height:6px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.stamp__v{
  font-family:var(--display);font-size:2.4rem;font-weight:800;letter-spacing:-.05em;
  line-height:1;justify-self:end;margin-top:-6px;
}

/* ── the rotating line inside the ticket ─────────────────
   One claim at a time, its market price struck through, and a
   thin bar showing how long the line stays. */
.slot{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding-bottom:14px;min-height:74px}
.slot__tick{width:18px;height:18px;grid-row:1/3;align-self:start;margin-top:2px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slot__tick path{stroke-dasharray:26;stroke-dashoffset:26}
.slot__tick.is-drawn path{animation:draw .5s var(--ease) .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.slot__name{margin:0;font-size:1rem;font-weight:600;line-height:1.25}
.slot__price{margin:0;font-family:var(--mono);font-size:.74rem;color:rgba(255,255,255,.72)}
.slot__price s{color:rgba(255,255,255,.95);text-decoration-thickness:1.5px}
.slot.is-in .slot__name{animation:slotIn .45s var(--ease) both}
.slot.is-in .slot__price{animation:slotIn .45s var(--ease) .06s both}
@keyframes slotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slot__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.slot__bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stamp .stamp__v{transition:opacity .3s var(--ease)}

/* the market-standard finder bar, answering in net rather than gross */
/* The estimate row inside the card: area, bedrooms, then one wide
   button — the shape owners already know from every booking site. */
.finder{
  display:grid;grid-template-columns:1.7fr 1fr auto;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:100px;padding:6px 6px 6px 0;
}
.finder__f{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-width:0;padding:13px clamp(14px,1.6vw,20px);border-right:1px solid var(--line);
}
.finder__f--sm{border-right:0}
.finder .btn{justify-self:end;align-self:center;padding-inline:clamp(24px,3vw,42px);white-space:nowrap}

/* bedrooms as a stepper: fewer taps than a dropdown on a phone */
.beds{display:flex;align-items:center;gap:10px}
.beds__b{
  width:30px;height:30px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:#fff;font-size:1rem;line-height:1;
  display:grid;place-items:center;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.beds__b:hover{border-color:var(--ink);background:var(--soft)}
.beds__b[disabled]{opacity:.35;cursor:default}
.beds__b[disabled]:hover{border-color:var(--line);background:#fff}
.beds__v{min-width:64px;text-align:center;font-size:1.02rem;font-weight:600}
.finder__l{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.finder select{
  appearance:none;cursor:pointer;background:transparent;color:var(--ink);
  border:0;padding:0 24px 0 0;font-size:1.04rem;font-weight:600;width:100%;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 11px) 58%,calc(100% - 6px) 58%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.finder select:focus{outline:none}

/* the answer, revealed inside the card once the owner asks for it */
.answer{
  margin-top:clamp(16px,2vw,22px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--line);
  display:grid;gap:14px;animation:fade .45s var(--ease);
}
.answer[hidden]{display:none}
.answer__hero{display:grid;gap:2px}
/* full width now, so the answer reads left to right: figure, bars, lines */
@media (min-width:901px){
  .answer{grid-template-columns:minmax(210px,.85fr) 1.15fr 1fr;gap:clamp(20px,3vw,44px);align-items:center}
  .answer .lnk{grid-column:1/-1}
}
.answer.is-fresh{animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.985);opacity:.6}to{transform:none;opacity:1}}
.answer__l{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.answer__big{font-family:var(--display);font-size:clamp(2.4rem,4vw,3.3rem);font-weight:700;letter-spacing:-.04em;line-height:.95;color:var(--blue);margin:2px 0}
.answer__per{color:var(--mute);font-size:.9rem}

/* two bars on one scale: ours, and the alternative */
.vs{display:grid;gap:9px;margin-top:4px}
.vs__row{display:grid;grid-template-columns:82px 1fr auto;gap:11px;align-items:center}
.vs__k em{display:block;font-style:normal;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:2px}
.vs__k{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.vs__bar{height:12px;background:var(--soft);border-radius:3px;overflow:hidden}
.vs__fill{display:block;height:100%;background:#9A9AA6;border-radius:0 3px 3px 0;transition:width .6s var(--ease)}
.vs__fill--us{background:var(--blue)}
.vs__v{font-family:var(--mono);font-size:.86rem}
.vs__cap{margin:2px 0 0;font-size:.74rem;color:var(--mute)}
.answer .lnk{justify-self:start}
.answer__rows{list-style:none;margin:0;padding:0;display:grid;gap:0}
.answer__rows li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--mute)}
.answer__rows b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}

/* ── stats bar ──────────────────────────────────────────
   White, so the dark hero ends on a clean edge and the proof
   reads as a statement of record rather than more hero. */
.stats{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);padding-block:clamp(28px,3.6vw,44px)}
.stats__in div{display:flex;flex-direction:column;gap:4px}
.stats .num{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.7rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.stats span{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}

/* ── sections ───────────────────────────────────────── */
.sec{padding:var(--sec-y) 0}
.sec--tight{padding:clamp(44px,5vw,70px) 0}
.sec--dark{background:var(--ink);color:#fff}
.sec--blue{background:var(--blue);color:#fff}
.sec--soft{background:var(--soft)}
.sec--rule{background:var(--blue-soft)}
.sec--apply{background:var(--ink);color:#fff}

/* ── guest-ready gallery ────────────────────────────────
   Cross-fade rather than a slider: no horizontal scrolling to trap
   a touch gesture, and the frame never shifts the page height. */
/* a link straight after a tick list needs air, or it reads as an item */
.gal{margin:0;display:grid;gap:16px;justify-items:center}
.gal__frame{position:relative;width:100%;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.gal__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
}
.gal__frame img.is-on{opacity:1}
.gal__dots{display:flex;gap:9px}
.gal__dot{
  width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background .2s var(--ease),transform .2s var(--ease);
}
.gal__dot:hover{background:var(--mute)}
.gal__dot.is-on{background:var(--ink);transform:scale(1.15)}

/* ── comparison ─────────────────────────────────────── */
.cmp{display:grid;gap:clamp(14px,2vw,22px);margin-top:0}
.cmp--3{grid-template-columns:repeat(3,1fr)}
.cmp__col{background:#141419;border:1px solid var(--line-dk);border-radius:var(--r);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column}
.cmp__col--win{background:#fff;color:var(--ink);border-color:#fff}
/* the period sits under the column name, so every row below it is read
   as a year without repeating the word eight times */
.cmp__h em{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:400}
.cmp__h{font-family:var(--display);font-size:1.22rem;font-weight:700;letter-spacing:-.02em;margin:0 0 18px}
.cmp__rows{list-style:none;margin:0;padding:0;flex:1}
.cmp__rows li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-dk);font-size:.94rem}
.cmp__col--win .cmp__rows li{border-bottom-color:var(--line)}
.cmp__rows b{font-family:var(--mono);font-weight:500;white-space:nowrap}
.cmp__rows .neg{color:var(--red-inv)}
.cmp__col--win .cmp__rows .neg{color:var(--red)}
.cmp__rows .inc{color:var(--blue-lite);font-family:var(--body);font-weight:600}
.cmp__col--win .cmp__rows .inc{color:var(--blue)}
.cmp__rows .warn{color:#F5B544;font-family:var(--body);font-weight:600}
.cmp__tot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:20px;padding-top:18px;border-top:2px solid var(--line-dk)}
.cmp__tot span{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute-inv)}
.cmp__tot b{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:700;letter-spacing:-.03em}
.cmp__tot--win{border-top-color:var(--ink)}
.cmp__tot--win span{color:var(--mute)}
.cmp__tot--win b{color:var(--warm)}

/* ── three ways to hold the same flat ────────────────
   The photograph is the argument: it is the same flat in all three cases,
   so the only thing that changes is the number pinned to it. */
.maths{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4.5vw,76px);align-items:center}
.maths__fig{
  position:relative;margin:0;border-radius:var(--r);overflow:visible;
  aspect-ratio:4/5;
}
.maths__fig img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r);
  filter:saturate(.9) contrast(1.02);
}
.maths__fig figcaption{
  position:absolute;left:0;right:0;bottom:-30px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute-inv);
}
/* the three outcomes, pinned to the same picture and arriving in order */
.tagx{
  position:absolute;display:grid;gap:2px;padding:11px 16px;border-radius:12px;
  background:#fff;color:var(--ink);box-shadow:0 22px 40px -20px rgba(0,0,0,.75);
  opacity:0;transform:translateY(10px) scale(.94);
}
.tagx i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute)}
.tagx b{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.tagx--1{left:-18px;top:11%}
.tagx--2{right:-14px;top:39%}
.tagx--3{left:-6px;bottom:12%;background:var(--warm);color:#fff;padding:14px 20px}
.tagx--3 i{color:rgba(255,255,255,.85)}
.tagx--3 b{font-size:1.55rem}
.maths__fig.is-in .tagx{animation:tagIn .6s var(--ease-back) both}
.maths__fig.is-in .tagx--1{animation-delay:.25s}
.maths__fig.is-in .tagx--2{animation-delay:.5s}
.maths__fig.is-in .tagx--3{animation-delay:.85s}
@keyframes tagIn{to{opacity:1;transform:none}}

/* ── the three-scenario bar chart ───────────────────
   One measure (money in your account), one scale, every bar labelled with
   its own value so the colour is never the only thing telling them apart. */
.bars{margin:clamp(24px,3vw,38px) 0 0;display:grid;gap:clamp(10px,1.4vw,16px)}
.bars__row{display:grid;grid-template-columns:minmax(120px,170px) 1fr auto;
  gap:clamp(12px,1.6vw,22px);align-items:center}
.bars__k{display:flex;flex-direction:column;gap:3px;font-size:.96rem;color:#fff}
.bars__k em{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute-inv)}
.bars__track{display:block;height:clamp(26px,2.5vw,34px);border-radius:9px;
  background:rgba(255,255,255,.07);overflow:hidden}
.bars__fill{display:block;height:100%;border-radius:9px;background:var(--blue-lite);
  transform-origin:left}
.bars__fill--us{background:var(--warm)}
.bars.rv .bars__fill{transform:scaleX(0)}
.bars.is-in .bars__fill{transform:scaleX(1);transition:transform 1.1s var(--ease)}
.bars.is-in .bars__row:nth-child(2) .bars__fill{transition-delay:.12s}
.bars.is-in .bars__row:nth-child(3) .bars__fill{transition-delay:.24s}
.bars__v{font-family:var(--mono);font-size:1.02rem;color:#fff;min-width:7ch;text-align:right}
.bars__row--win .bars__k{font-weight:600}
.bars__row--win .bars__v{color:var(--warm-lite)}
.bars__cap{margin-top:14px;font-size:.9rem;color:var(--mute-inv);max-width:58ch;line-height:1.5}

.delta{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,40px);padding-top:24px;border-top:1px solid var(--line-dk)}
.delta__n{font-family:var(--display);font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-.035em;color:var(--warm-lite);line-height:1}
.delta__t{color:var(--mute-inv);max-width:52ch}

/* ── what's included: lists · photo · price ─────────────
   The market's clearest layout for "what do I get" — three plain
   columns, a picture of the work, and the fee beside them. */
/* All three columns share one height: the photo stretches and the
   price column spreads, so nothing ends in a ragged gap. */
.inc{
  display:grid;grid-template-columns:1.35fr .8fr .85fr;
  gap:clamp(20px,2.6vw,38px);align-items:stretch;margin-top:clamp(24px,3vw,40px);
}
.inc__cols{display:grid;gap:clamp(20px,2.4vw,30px)}
.inc__h{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin:0 0 10px;font-weight:500;
}
.inc__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.inc__cols li{font-size:1rem;color:var(--ink-80)}
/* the photo set now lives in the middle column, dots and all */
.inc__gal{align-self:stretch;gap:14px;grid-template-rows:1fr auto;height:100%}
.inc__gal .gal__frame{aspect-ratio:auto;height:100%;min-height:340px}
.inc__price{
  background:var(--blue);color:#fff;border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);display:grid;gap:8px;align-content:start;
}
.inc__price-l{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
/* the fee is quoted before VAT, so the unit rides under the figure
   rather than getting lost at the end of a sentence */
.inc__price-v i{display:block;font-style:normal;font-family:var(--mono);font-size:.26em;
  letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-top:6px;font-weight:400}
.inc__price-v{font-family:var(--display);font-size:clamp(3rem,4.6vw,4.2rem);font-weight:800;letter-spacing:-.05em;line-height:.9}
.inc__price-s{margin:2px 0 12px;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.9)}
.inc__price .btn{background:#fff;color:var(--blue)}
.inc__price .btn:hover{background:var(--ink);color:#fff}
/* price card and its sign-off travel together in the third column,
   so the line sits directly under the card rather than at the foot
   of the whole section */
.inc__side{display:grid;gap:clamp(16px,2vw,22px);align-content:space-between}
.inc__foot{margin:0;font-size:.9rem;line-height:1.5;color:var(--mute)}

/* ── platforms: badges over a photograph ────────────────
   The market shows real logos here; we use lettered discs, which
   say the same thing without borrowing anyone's trade marks. */
.plats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.plats__art{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate}
.plats__art img{width:100%;aspect-ratio:1.05;object-fit:cover;filter:grayscale(.5) brightness(.95)}
.plats__art::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.42)}
.plats__grid{
  position:absolute;inset:0;z-index:1;list-style:none;margin:0;
  padding:clamp(16px,3vw,34px);
  display:grid;grid-template-columns:repeat(3,1fr);align-content:center;
  gap:clamp(10px,1.8vw,20px);
}
.plat{
  aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-content:center;text-align:center;padding:6px;
  box-shadow:0 14px 30px -18px rgba(10,10,11,.55);
  transition:transform .2s var(--ease);
}
.plat:hover{transform:translateY(-3px)}
.plat span{font-family:var(--display);font-weight:800;font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:-.03em;line-height:1}
.plat i{display:block;font-style:normal;font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.plat--own{background:var(--blue);color:#fff}
.plat--own i{color:rgba(255,255,255,.75)}
.plats__copy .btn{margin-top:6px}

/* ── ticks / crosses ────────────────────────────────── */
.ticks,.crosses{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li,.crosses li{position:relative;padding-left:29px;font-size:.96rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:8px;
  border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(-45deg);
}
.ticks--inv li::before{border-color:var(--blue-lite)}
.crosses li{color:var(--mute-inv)}
.crosses li::before{content:"×";position:absolute;left:2px;top:-.06em;font-size:1.35rem;color:var(--mute-inv);line-height:1.3}

/* ── pricing ────────────────────────────────────────── */

/* ── tabs ───────────────────────────────────────────── */
.tabs{margin-top:clamp(22px,3vw,36px)}
.tabs__btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,28px)}
.tab{
  background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:11px 20px;cursor:pointer;font-size:.94rem;font-weight:500;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.tab:hover{border-color:var(--ink)}
.tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* photo left, argument right — the market's standard tab panel */
.pane{display:none;background:#fff;border-radius:var(--r);overflow:hidden}
.pane.is-on{display:grid;grid-template-columns:.85fr 1.15fr;animation:fade .45s var(--ease)}
.pane__fig{margin:0}
.pane__fig img{width:100%;height:100%;min-height:340px;object-fit:cover}
.pane__body{padding:clamp(26px,3.4vw,52px);align-self:center;max-width:62ch}
.pane__body .btn{margin-top:clamp(18px,2.2vw,26px)}
/* round ticks, so the list reads as a checklist rather than bullets */
.ticks--round li{padding-left:34px}
.ticks--round li::before{
  content:"";position:absolute;left:0;top:.1em;width:20px;height:20px;border:0;
  border-radius:50%;background:var(--ink);transform:none;
}
.ticks--round li::after{
  content:"";position:absolute;left:6px;top:.52em;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane h3{font-family:var(--display);font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
.pane p{color:var(--mute);margin:0 0 20px;max-width:62ch}

/* ── steps ──────────────────────────────────────────── */
.steps{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.steps li{background:#fff;display:grid;grid-template-columns:60px minmax(0,1fr) 110px;gap:clamp(16px,2.4vw,32px);align-items:baseline;padding:clamp(20px,2.4vw,30px) 0}
.steps__n{font-family:var(--mono);font-size:.85rem;color:var(--blue)}
.steps__b{display:grid;gap:6px}
.steps li h3{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;margin:0}
.steps li p{margin:0;color:var(--mute);font-size:.95rem;max-width:62ch}
.steps__d{font-family:var(--mono);font-size:.74rem;color:var(--mute);text-align:right}

/* ── owner dashboard mock ───────────────────────────── */
/* ── the wide dashboard panel ─────────────────────────────
   Arrives from depth like a window being opened, then its calendar
   fills in. Same engine as the handset, more room to read it. */
.dash{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,68px);align-items:center;perspective:1400px;perspective-origin:60% 40%}
.scr{
  position:relative;background:#141419;border:1px solid var(--line-dk);
  border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.9);
  transform-style:preserve-3d;
}
.scr.rv{
  opacity:0;filter:blur(14px) saturate(.5);
  transform:translateY(140px) rotateX(34deg) rotateZ(-5deg) scale(.78);
  transition:opacity .7s var(--ease),filter .9s var(--ease),
             transform 1.2s var(--ease-back),box-shadow 1.2s var(--ease);
}
.scr.rv.is-in{
  opacity:1;filter:none;transform:none;
  box-shadow:0 80px 130px -60px rgba(0,0,0,1),0 0 0 1px rgba(130,150,255,.22);
}
/* a band of light sweeps across as it lands */
.scr::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 46%,rgba(130,150,255,.2) 52%,transparent 68%);
  transform:translateX(-120%);
}
.scr.is-in::after{animation:sheen 1.1s var(--ease) .45s both}
@keyframes sheen{0%{opacity:1;transform:translateX(-120%)}100%{opacity:0;transform:translateX(120%)}}

.scr__top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-dk)}
.scr__dot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none}
.scr__title{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-inv)}

.scr__tabs{display:flex;gap:2px;padding:10px 12px 0;border-bottom:1px solid var(--line-dk)}
.scr__tab{
  background:none;border:0;cursor:pointer;padding:9px 14px;border-radius:8px 8px 0 0;
  font-size:.86rem;font-weight:600;color:var(--mute-inv);position:relative;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.scr__tab:hover{color:#fff}
.scr__tab.is-on{color:#fff;background:rgba(255,255,255,.06)}
.scr__tab.is-on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--blue)}

.scr__pane{display:none;padding:clamp(16px,2vw,22px)}
.scr__pane.is-on{display:block;animation:fade .4s var(--ease)}
.scr__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;font-size:.86rem;color:var(--mute-inv)}
.scr__row b{font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:#fff}


/* ── the owner app: three handsets ──────────────────────
   Drawn in the page rather than screenshotted: sharp on any screen,
   nothing to re-export when the product changes. */
.app{display:block;text-align:center;perspective:1600px;perspective-origin:50% 30%}
.app__eyebrow{justify-content:center}
.app__h{max-width:22ch;margin-inline:auto}
.app__sub{max-width:64ch;margin-inline:auto}
.app__acts{display:flex;justify-content:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;color:var(--mute);font-size:.95rem;margin:6px 0 20px}
.app__cta{display:flex;width:max-content;margin:0 auto clamp(30px,4vw,54px)}

.phones{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.6vw,26px);align-items:end;justify-items:center;
  max-width:1000px;margin-inline:auto;
}
.ph{
  width:100%;max-width:296px;border-radius:34px;background:#0d0d11;
  border:7px solid #1c1c22;box-shadow:0 34px 60px -30px rgba(10,10,11,.55);
  overflow:hidden;text-align:left;
  opacity:0;transform:translateY(90px) rotateX(26deg) scale(.86);
  transition:opacity .8s var(--ease),transform 1.1s var(--ease-back);
}
.phones.is-live .ph{opacity:1;transform:none}
.phones.is-live .ph--front{transition-delay:.1s}
.phones.is-live .ph--side:first-child{transition-delay:.28s}
.phones.is-live .ph--side:last-child{transition-delay:.42s}
.ph--front{max-width:310px;z-index:2}
.ph--side{max-width:270px;margin-bottom:clamp(10px,2vw,34px)}
.ph__bar{display:grid;place-items:center;padding:9px 0 4px;background:var(--blue)}
.ph__bar i{width:52px;height:5px;border-radius:100px;background:rgba(255,255,255,.5)}
.ph__scr{padding:11px;display:grid;gap:8px;height:430px;overflow:hidden;align-content:start}
.ph__t{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:2px 0 2px;color:#fff}
.ph__card{background:#17171d;border:1px solid var(--line-dk);border-radius:14px;padding:11px 12px;display:grid;gap:7px}
.ph__l{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-inv)}
.ph__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ph__row b{font-family:var(--display);font-size:1.1rem;letter-spacing:-.02em}
.ph__note{margin:0;font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lite)}

.rates{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.rates li{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mute-inv)}
.rates b{color:#fff;font-family:var(--mono);font-weight:500}
.ph__guest{display:flex;align-items:center;gap:9px}
.ph__guest img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid rgba(255,255,255,.85)}
.ph__guest b{display:block;font-size:.78rem}
.ph__guest span{font-size:.68rem;color:var(--mute-inv)}

.ph__chart{display:flex;align-items:flex-end;gap:3px;height:74px}
.ph__chart i{flex:1;background:rgba(255,255,255,.18);border-radius:3px 3px 0 0}
.ph__chart i.peak{background:var(--warm)}

.donut{display:flex;align-items:center;gap:12px}
.donut__ring{
  width:78px;height:78px;flex:none;border-radius:50%;
  background:conic-gradient(var(--blue) calc(var(--pct) * 1%), rgba(255,255,255,.14) 0);
  display:grid;place-items:center;position:relative;
}
.donut__ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#17171d}
.donut__ring b{position:relative;font-family:var(--display);font-size:1.15rem;letter-spacing:-.03em}
.donut__ring b i{font-style:normal;font-size:.6em}
.donut__key{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:.66rem;color:var(--mute-inv)}
.donut__key li{display:flex;align-items:center;gap:6px}
.k{width:8px;height:8px;border-radius:2px;flex:none}
.k--on{background:var(--blue)}
.k--free{background:rgba(255,255,255,.25)}
.k--you{background:#5B6BFF}

.feed{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.68rem;color:var(--mute-inv)}
.feed li{display:flex;align-items:center;gap:7px;line-height:1.3}
.fd{width:7px;height:7px;border-radius:50%;flex:none}
.fd--in{background:var(--blue)}
.fd--up{background:#5B6BFF}
.fd--cl{background:rgba(255,255,255,.4)}

.ph .cal__pop{
  position:static!important;width:auto;margin-top:9px;
  box-shadow:none;border:1px solid var(--line);
}
.ph .cal__pop::before{display:none}

/* ── booking calendar mock ──────────────────────────────
   Stays are grid spans across a week row, so a booking that runs
   over a Sunday simply continues on the next line — the way the
   real calendar behaves. Bars draw themselves in on first view. */
.cal{position:relative}
.cal__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cal__month{font-weight:600;font-size:.82rem}
.cal__nav{display:flex;gap:4px;color:var(--mute-inv)}
.cal__nav i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-dk);font-size:.9rem}
.cal__pct{margin-left:auto;font-family:var(--display);font-size:.9rem;letter-spacing:-.02em}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px}
.cal__dow span{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-inv);text-align:center}
.cal__weeks{display:grid;gap:6px}
.cal__week{position:relative;display:grid;gap:4px}
.cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__days i{
  font-style:normal;font-family:var(--mono);font-size:.5rem;color:var(--mute-inv);
  aspect-ratio:1.6;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border-radius:6px;
}
.cal__days .out{opacity:.35}
.cal__track{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;height:22px;margin-top:-16px}

/* Drawn with clip-path rather than scaleX: a scaled bar would squash
   the guest photo inside it. */
.stay{
  display:flex;align-items:center;gap:5px;min-width:0;
  border-radius:100px;padding:0 5px;font-size:.56rem;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;
  clip-path:inset(0 100% 0 0 round 100px);
}
/* One booking at a time: the guest lands first, the nights unroll
   from under them — the way an arrival actually happens. */
.cal.is-live .stay{animation:drawStay .55s var(--ease) both;animation-delay:var(--d,1s)}
@keyframes drawStay{
  0%{clip-path:inset(0 100% 0 0 round 100px);filter:brightness(2.2)}
  60%{filter:brightness(1.3)}
  100%{clip-path:inset(0 0 0 0 round 100px);filter:brightness(1)}
}
.stay img{opacity:0;transform:scale(.4)}
.cal.is-live .stay img{
  animation:avIn .42s var(--ease-back) both;
  animation-delay:calc(var(--d,1s) - .18s);
}
@keyframes avIn{to{opacity:1;transform:none}}
.stay img{
  width:15px;height:15px;flex:none;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.9);margin-left:-4px;
}
.stay--a{background:var(--blue)}
.stay--b{background:#5B6BFF}
.stay--c{background:#8B93B8}
.stay--cont{border-radius:0 100px 100px 0;padding-left:10px}
/* the bar the card is talking about */
.stay{transition:box-shadow .3s var(--ease),filter .3s var(--ease)}
.stay.is-active{box-shadow:0 0 0 2px rgba(255,255,255,.9);filter:saturate(1.15)}

.clean{
  align-self:center;justify-self:center;width:14px;height:14px;border-radius:4px;
  background:rgba(255,255,255,.16);position:relative;
}
.clean::after{
  content:"";position:absolute;inset:3px;border-radius:2px;
  background:linear-gradient(135deg,var(--mute-inv) 45%,transparent 45%);
}

/* Positioned by script against the active booking; left/top are set
   inline, the arrow slides along the edge via --arrow. */
.cal__pop{
  position:absolute;left:0;top:0;width:min(180px,86%);
  background:#fff;color:var(--ink);border-radius:12px;padding:9px 11px;
  display:grid;gap:1px;font-size:.62rem;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.85);
  opacity:0;transform:translateY(8px);
}
.cal__pop.is-in{animation:popIn .5s var(--ease-back) both}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.cal__pop-l{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cal__pop b{font-size:.74rem}
.cal__pop span{color:var(--mute)}
.cal__pop-src{font-family:var(--mono);font-size:.6rem;color:var(--blue)!important;margin-top:2px}
.cal__pop::before{
  content:"";position:absolute;left:var(--arrow,26px);top:-5px;width:11px;height:11px;
  background:#fff;transform:rotate(45deg);
}
.cal__pop.is-above::before{top:auto;bottom:-5px}

.scr__list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-dk);border-radius:10px;overflow:hidden}
.scr__list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#17171d;padding:11px 14px;font-size:.88rem}
.scr__list b{font-family:var(--mono);font-weight:500;color:#fff}
.scr__list span{color:var(--mute-inv)}
.scr__list--pay li{grid-template-columns:1fr auto}
.pin{width:7px;height:7px;border-radius:2px;background:var(--blue)}
.pin--free{background:rgba(255,255,255,.25)}

.scr__chart{display:flex;align-items:flex-end;gap:4px;height:112px;margin-bottom:16px}
.scr__chart i{flex:1;background:rgba(255,255,255,.16);border-radius:3px 3px 0 0;transition:height .6s var(--ease)}
.scr__chart i.peak{background:var(--blue)}
.scr__kpi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scr__kpi li{display:grid;gap:2px}
.scr__kpi b{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.scr__kpi span{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--mute-inv)}
.scr__note{margin:14px 0 0;font-size:.78rem;color:var(--mute-inv)}

/* ── the London demand curve ────────────────────────── */
.curve__switch{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:4px;width:max-content;margin-top:clamp(18px,2.2vw,26px)}
.curve__btn{
  background:none;border:0;cursor:pointer;border-radius:100px;padding:9px 18px;
  font-size:.9rem;font-weight:600;color:var(--mute);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.curve__btn:hover{color:var(--ink)}
.curve__btn.is-on{background:var(--ink);color:#fff}
.curve{margin:clamp(18px,2.4vw,28px) 0 clamp(26px,3.4vw,42px)}
.curve__plot{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(4px,.8vw,10px);align-items:end;height:clamp(160px,20vw,240px)}
/* Explicit rows: the bar needs a sized track to take a % height in,
   otherwise it collapses to nothing inside auto rows. */
.curve__col{display:grid;grid-template-rows:auto 1fr auto;gap:8px;height:100%;text-align:center}
/* Rows are pinned: hiding the price on small screens must not let the
   bar fall into an auto row, where a % height resolves to zero. */
.curve__v{grid-row:1;font-family:var(--mono);font-size:.66rem;color:var(--ink);font-weight:500}
.curve__bar{
  grid-row:2;background:#C9C9D2;border-radius:5px 5px 0 0;align-self:end;width:100%;
  animation:rise .8s var(--ease) both;
}
.curve__bar--peak{background:var(--blue)}
.curve__m{grid-row:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.curve__cap{margin:14px 0 0;font-size:.82rem;color:var(--mute);max-width:70ch}
@keyframes rise{from{height:0!important}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts article{background:#fff;padding:clamp(18px,2vw,26px);display:grid;gap:4px}
.facts b{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.035em;color:var(--blue);line-height:1}
.facts span{font-size:.86rem;color:var(--mute);line-height:1.4}

/* ── local ──────────────────────────────────────────── */
.local{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,68px);align-items:center}
.local__fig{margin:0;border-radius:var(--r);overflow:hidden}
.local__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── the performance panel ───────────────────────
   Three white cards on ultramarine: the year of rates, the score the guests
   give it back, and three of them saying it in their own words. Assembles
   once when it arrives, then stays still. */
.panel{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,40px);
  margin-top:clamp(30px,4vw,52px);
  padding-bottom:clamp(40px,5vw,80px);   /* room for the card that hangs low */
}
.panel__main{
  background:#fff;border-radius:var(--r);padding:clamp(20px,2.4vw,32px);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.6);align-self:start;
}
.panel__top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.panel__top b{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.panel__main .curve__cap{color:var(--mute)}
.panel__main .curve__m,.panel__main .curve__v{color:var(--mute)}

/* the ratings card leans over the chart's bottom-right corner */
.panel__rate{
  position:absolute;left:24%;bottom:0;width:min(30%,326px);z-index:3;
  background:#fff;border-radius:var(--r);padding:clamp(18px,2vw,26px);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.7);
}
.panel__rate h3{margin:0 0 14px;font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.rate6{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rate6 li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-size:.9rem;color:var(--ink-80)}
.rate6 .is-head{font-weight:600;color:var(--ink);padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:2px}
.rate6 b{font-family:var(--mono);font-size:.86rem;font-weight:500;color:var(--ink);min-width:3ch;text-align:right}
.panel__note{margin:14px 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;color:var(--mute);line-height:1.5}

/* five stars, filled to the fraction: a grey set with a clipped blue set
   on top, so a 4.7 shows as four and most of a fifth */
.strs{position:relative;display:inline-block;font-size:.92rem;letter-spacing:.05em;line-height:1}
.strs s,.strs u{text-decoration:none}
.strs s{color:#DDDDE3}
.strs u{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--blue);width:0}
.panel.is-in .strs u{
  width:calc(var(--p) * 1%);
  transition:width .7s var(--ease);
  transition-delay:calc(.55s + var(--i) * .09s);
}

/* the reviews drift downwards for ever: the list is printed twice and the
   track slides exactly one copy, so the seam never shows */
.panel__revs{
  position:relative;overflow:hidden;
  height:clamp(380px,36vw,520px);
  /* soft ends instead of a hard cut */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
}
.revs__track{display:grid;gap:clamp(12px,1.4vw,18px);align-content:start;will-change:transform}
.panel.is-in .revs__track{animation:revsDown 46s linear .4s infinite}
.panel__revs:hover .revs__track,
.panel__revs:focus-within .revs__track{animation-play-state:paused}
@keyframes revsDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.rev{
  margin:0;background:#fff;border-radius:var(--r);padding:clamp(18px,2vw,26px);
  box-shadow:0 30px 60px -38px rgba(0,0,0,.6);
}
.rev p{margin:0 0 16px;color:var(--ink-80);font-size:.95rem;line-height:1.55}
.rev figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.rev img{grid-row:span 2;width:44px;height:44px;border-radius:50%;object-fit:cover}
.rev b{font-size:.95rem;color:var(--ink)}
.rev span{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--mute)}

/* the section's own text sits on ultramarine */
/* the fact strip is white-on-white by default; on ultramarine it becomes
   an outline instead of a set of cards */
#insights .facts{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.26)}
#insights .facts article{background:var(--blue)}
#insights .facts b{color:#fff}
#insights .facts span{color:rgba(255,255,255,.74)}
#insights .curve__btn{border-color:var(--line);color:var(--mute)}
#insights .curve__btn.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.dot--inv{background:#fff}

/* ── where the guests come from ────────────────────
   A strip of our own flats, each labelled with where that booking came from,
   then the same figures as a table. Country codes rather than flag emoji:
   Windows draws those as two letters in a box anyway, and a code sits better
   next to a monospaced number. */
.gst__strip{
  display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:2px;
  padding:2px 2px 16px;margin:0 -2px;cursor:grab;scrollbar-width:none;
}
.gst__strip::-webkit-scrollbar{display:none}
.gst__strip.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.gst__strip:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r)}
.gcard{
  position:relative;margin:0;flex:0 0 clamp(210px,22vw,290px);scroll-snap-align:start;
  border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:var(--line);
}
.gcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:scale .5s var(--ease),filter .4s var(--ease)}
.gcard:hover img{scale:1.05}
.gcard figcaption{
  position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border-radius:10px;
  padding:9px 12px;display:flex;align-items:center;gap:9px;font-size:.9rem;
  box-shadow:0 14px 26px -16px rgba(10,10,11,.55);
}
.gcard figcaption i{
  font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;
  background:var(--blue-soft);color:var(--blue);border-radius:5px;padding:3px 5px;flex:none;
}
.gcard figcaption b{font-weight:600;white-space:nowrap}
.gcard figcaption span{
  margin-left:auto;font-family:var(--mono);font-size:.64rem;color:var(--mute);white-space:nowrap;
}

.gst__copy{max-width:62ch;margin-top:clamp(26px,3.4vw,44px)}
.gst__copy p{margin:0 0 14px;color:var(--ink-80);line-height:1.6}
.gst__copy p:last-child{margin-bottom:0}
.gst__copy .h2{margin-bottom:18px}

.gst__tabs{display:flex;gap:clamp(18px,2.4vw,34px);margin:clamp(28px,3.4vw,46px) 0 0;border-bottom:1px solid var(--line)}
.gst__tab{
  background:none;border:0;cursor:pointer;padding:0 0 14px;position:relative;
  font-size:1.02rem;font-weight:600;color:var(--mute);transition:color .2s var(--ease);
}
.gst__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.gst__tab:hover{color:var(--ink)}
.gst__tab.is-on{color:var(--ink)}
.gst__tab.is-on::after{transform:scaleX(1)}
.gst__pane{padding-top:clamp(20px,2.6vw,32px)}
.gst__pane[hidden]{display:none}
.gst__pane.is-on{animation:fade .35s var(--ease)}

/* one measure per chart: the bar is the share of nights, nothing else */
.gst__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gst__list li{
  display:grid;grid-template-columns:32px minmax(9ch,15ch) 1fr auto auto;
  gap:clamp(10px,1.4vw,18px);align-items:center;padding:11px 8px;border-radius:9px;
  transition:background .18s var(--ease);
}
.gst__list li:not(.gst__head):hover{background:#fff}
.gst__head{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);padding-bottom:4px!important;
}
.gst__head:hover{background:none}
.gst__list i{
  font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:4px 0;text-align:center;color:var(--mute);
}
.gst__head i{background:none;border:0}
.gst__list span{font-size:.98rem;color:var(--ink)}
.gst__bar{height:10px;border-radius:99px;background:var(--blue);width:var(--w);min-width:6px}
.gst__list li:nth-child(2) .gst__bar{background:var(--blue)}
.gst__list li:last-child .gst__bar{background:var(--blue-lite)}
.gst__list em{font-style:normal;font-family:var(--mono);font-size:.9rem;color:var(--ink);min-width:4ch;text-align:right}
.gst__list s{text-decoration:none;font-family:var(--mono);font-size:.9rem;color:var(--mute);min-width:5ch;text-align:right}
.gst__head em,.gst__head s{font-family:var(--mono);font-size:.62rem;color:var(--mute);min-width:0}

.gst__stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);
}
.gst__stats li{background:var(--paper);border-radius:var(--r-sm);padding:clamp(18px,2vw,26px)}
.gst__stats b{
  display:block;font-family:var(--display);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;
}
.gst__stats span{display:block;margin-top:8px;font-size:.9rem;color:var(--mute);line-height:1.4}
.gst__note{margin:clamp(18px,2.2vw,26px) 0 0;max-width:64ch;font-size:.92rem;color:var(--mute);line-height:1.55}
.gst__cta{margin-top:clamp(24px,3vw,38px)}

/* ── how it begins ─────────────────────────────
   Three steps, and the third one is the payoff, so it is the only card that
   carries the warm accent and the only one that asks for anything. */
.begin__head{text-align:center;max-width:44ch;margin:0 auto}
.begin__head .sub{margin-left:auto;margin-right:auto}
.begin__cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(30px,4vw,56px);align-items:stretch;
}
/* ── the three cards are the animation ───────────────
   Identical treatment on all three: each turns in from depth like a card
   being dealt, then leans towards the cursor with a light following it.
   Every part of the transform is a variable, so the arrival and the tilt
   can share one rule instead of fighting over it. */
.begin__cards{perspective:1200px;perspective-origin:50% 40%}
.begin__cards .bcard{
  --y:44px; --s:.96; --rx:7deg; --ry:-13deg; --o:0;
  opacity:var(--o);
  transform:translateY(var(--y)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transform-style:preserve-3d;
  transition:opacity .55s var(--ease),transform .85s var(--ease-back),box-shadow .35s var(--ease);
}
.begin__cards.is-in .bcard{--y:0px; --s:1; --rx:0deg; --ry:0deg; --o:1}
.begin__cards.is-in .bcard:nth-child(2){transition-delay:.14s}
.begin__cards.is-in .bcard:nth-child(3){transition-delay:.28s}

/* the lean: short transition so it tracks the pointer, long one on the way out */
.bcard.is-tilt{transition:transform .12s linear,box-shadow .3s var(--ease)}
.bcard:hover{box-shadow:0 40px 70px -34px rgba(10,10,11,.4)}
.bcard--win:hover{box-shadow:0 40px 70px -30px rgba(255,90,43,.6)}

/* a soft light sits where the cursor is */
.bcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.55),transparent 62%);
}
.bcard--win::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(255,255,255,.3),transparent 62%)}
.bcard:hover::after{opacity:1}
.bcard{position:relative;overflow:hidden}
.bcard--win{overflow:visible}          /* its notch must not be clipped away */

/* the eyebrow slides in just ahead of its card */
.begin__cards.is-in .bcard__l{animation:beginStepIn .5s var(--ease) both}
.begin__cards.is-in .bcard:nth-child(2) .bcard__l{animation-delay:.13s}
.begin__cards.is-in .bcard:nth-child(3) .bcard__l{animation-delay:.26s}
@keyframes beginStepIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.bcard{
  background:var(--soft);border-radius:var(--r);padding:clamp(24px,2.6vw,36px);
  display:flex;flex-direction:column;gap:14px;
}
.bcard p{margin:0;color:var(--ink-80);max-width:34ch;line-height:1.55}
.bcard__l{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink)!important;margin-bottom:clamp(14px,2vw,26px)!important;
}
/* the figure and the phrase share a baseline, the way a headline and a
   subhead would — the number carries the weight, the words carry the sense */
.bcard__n{
  display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap;
  max-width:none!important;margin-bottom:clamp(10px,1.4vw,18px)!important;
}
.bcard__n b{
  font-family:var(--display);font-size:clamp(2.6rem,4.1vw,3.7rem);font-weight:700;
  letter-spacing:-.045em;line-height:.85;color:var(--ink);
}
.bcard__n span{
  font-family:var(--display);font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.05;color:var(--ink);max-width:9ch;
}
.bcard--win{
  background:var(--warm);color:#fff;
  /* the notch on the right shoulder: this card is the one that sticks out */
  clip-path:polygon(0 0,84% 0,84% 9%,100% 9%,100% 100%,0 100%);
}
.bcard--win p,.bcard--win .bcard__n b,.bcard--win .bcard__n span{color:#fff}
/* the per-cent sign is wide: this figure needs a notch less size to keep
   its phrase on the same line as the other two cards */
.bcard--win .bcard__n b{font-size:clamp(2.3rem,3.6vw,3.2rem)}
.bcard--win .bcard__l{color:rgba(255,255,255,.82)!important}
.bcard--win p{color:rgba(255,255,255,.94)!important;max-width:36ch}
.bcard__cta{
  margin-top:auto;padding-top:clamp(14px,2vw,22px);
  display:inline-flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;font-weight:600;font-size:1.02rem;
  border-bottom:1px solid rgba(255,255,255,.45);align-self:flex-start;
  transition:gap .2s var(--ease),border-color .2s var(--ease);
}
.bcard__cta span{transition:transform .25s var(--ease)}
.bcard__cta:hover{gap:14px;border-color:#fff}
.bcard__cta:hover span{transform:translateX(3px)}

/* ── the software collage ───────────────────────
   Two overlapping cards per topic, swapped by the list on the right.
   Drawn in the page, so every screen stays true to the product. */
/* tops level, and the collage never drops below the last line of text:
   the stage is exactly as tall as the deepest arrangement needs */
.soft{display:grid;grid-template-columns:1.42fr .88fr;gap:clamp(28px,4.5vw,72px);align-items:start}
.soft__stage{position:relative;min-height:clamp(440px,49vw,660px)}
.soft__set{position:absolute;left:0;right:0;top:34px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
/* `top` above is only the value before the script measures and centres */
.soft__set.is-on{opacity:1;pointer-events:auto}
.soft__set.is-on .card{
  animation:cardIn .55s var(--ease) both,
            cardFloat 15s ease-in-out 1.2s infinite;
}
/* each card breathes at its own length and its own turn, so the group never
   moves as one block — that is what reads as mechanical */
.soft__set.is-on .card--b{animation-delay:.09s,3.4s;animation-duration:.55s,18s}
.soft__set.is-on .card--c{animation-delay:.18s,5.8s;animation-duration:.55s,16.5s}
.card--a{--amp:-4px}
.card--b{--amp:-6px}
.card--c{--amp:5px}
/* named for the block it belongs to — `drift` is already the rail chevrons */
@keyframes cardFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,var(--amp,-8px),0)}
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.card{
  position:absolute;background:#fff;border:1px solid rgba(10,10,11,.16);border-radius:var(--r);
  padding:clamp(18px,2vw,26px);box-shadow:0 34px 66px -34px rgba(10,10,11,.42);
  display:grid;gap:12px;
}
/* the main card is the only one in the flow — it gives the set its height,
   and the other two hang off its corners by a fixed amount */
.card--a{
  position:relative;margin:26px 0 0;width:min(74%,436px);z-index:1;
  min-height:clamp(210px,23vw,300px);
  /* a reserved strip along the bottom: the corner card is allowed to lean
     over it, so an overlap never hides a number */
  padding-bottom:calc(clamp(16px,1.8vw,22px) + 64px);
}
/* and the meta moves under the title, out from behind the top-right card */
.card--a .card__top{flex-direction:column;align-items:flex-start;gap:4px}
.card--b{right:0;top:-32px;width:min(50%,318px);z-index:3}
.card--c{left:0;top:calc(100% - 60px);width:min(47%,296px);z-index:4}
.card--blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.card--blue span{color:rgba(255,255,255,.85)}
.card__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:1.02rem;letter-spacing:-.01em}
.card__top span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.card__big{font-family:var(--display);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.card__big i{display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:7px}
.card__rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border-radius:10px;overflow:hidden}
.card__rows li{display:flex;justify-content:space-between;gap:12px;background:#fff;padding:11px 13px;font-size:.94rem;color:var(--ink-80)}
.card__rows b{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--ink)}
.card__rows .ok{color:var(--blue)}
.card__rows .up{color:var(--warm);font-weight:500}
.card--b b,.card--c b{font-size:1.16rem;letter-spacing:-.02em}
.card--b span,.card--c span{font-size:.92rem;color:var(--ink-80);line-height:1.45}
.tagline{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}

/* the overview collage — three cards that read as one dashboard.
   Earnings sit behind; the feed and the occupancy ring lean over its corners. */


.bars6{
  position:relative;padding:8px 0 0 42px;height:clamp(150px,17vw,206px);
  border-bottom:1.5px solid var(--ink);
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 11px),
    repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 11px),
    repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 11px);
  background-size:calc(100% - 42px) 1px;background-repeat:no-repeat;
  background-position:42px 8px,42px 41%,42px 74%;
}
.bars6__y{
  position:absolute;left:0;top:2px;bottom:0;width:38px;
  display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;color:var(--mute);text-align:right;
  padding-bottom:14px;
}
.bars6__plot{display:flex;align-items:flex-end;gap:clamp(6px,1vw,13px);height:100%}
.bars6 i{
  position:relative;flex:1;height:var(--h);border-radius:5px 5px 0 0;
  background:var(--blue-lite);transform-origin:bottom;
}
.is-in .soft__set.is-on .bars6 i{animation:growBar .75s var(--ease) both;animation-delay:calc(.2s + var(--n)*.07s)}
.bars6 i.peak{background:var(--warm)}
.bars6 i em{
  position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
  font-style:normal;font-family:var(--mono);font-size:.63rem;color:var(--ink);white-space:nowrap;
}
.is-in .soft__set.is-on .bars6 i em{animation:fade .5s var(--ease) 1s both}
@keyframes growBar{from{transform:scaleY(.03);opacity:.35}to{transform:none;opacity:1}}
.bars6__x{
  display:flex;gap:clamp(6px,1vw,13px);padding-left:42px;margin-top:2px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--mute);
}
.bars6__x span.on{color:var(--warm)}
.bars6__x span{flex:1;text-align:center}

.afeed{list-style:none;margin:0;padding:0;display:grid}
.afeed li{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:12px 0;border-top:1px solid var(--line);font-size:.9rem;
}
.afeed li:first-child{border-top:0}
.afeed time{font-family:var(--mono);font-size:.64rem;color:var(--mute);white-space:nowrap}
.af{
  width:30px;height:30px;flex:none;border-radius:9px;background:var(--blue-soft);
  position:relative;display:block;
}
.af::after{content:"";position:absolute;background:var(--blue)}
.af--clean::after{inset:6px;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.af--rate::after{inset:7px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.af--pay::after{left:6px;right:6px;top:9px;height:8px;border-radius:2px}
.af--book::after{
  left:8px;top:9px;width:9px;height:5px;background:none;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);
}

.occ3{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.occ3__key{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.occ3__key li{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:center}
.occ3__key b{font-family:var(--mono);font-size:1.02rem;font-weight:500;letter-spacing:-.01em}
.occ3__key span{grid-column:2;font-size:.76rem;color:var(--mute);margin-top:-3px}
.occ3__k{width:28px;height:9px;border-radius:99px;grid-row:span 2;align-self:center}
.occ3__k--on{background:var(--blue)}
.occ3__k--vac{background:var(--ink)}
.occ3__k--blk{background:var(--line)}
@property --occ{syntax:"<angle>";inherits:false;initial-value:336.6deg}
.occ3__ring{
  width:clamp(84px,9vw,104px);aspect-ratio:1;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:conic-gradient(var(--blue) 0 var(--occ),var(--ink) var(--occ) calc(var(--occ) + 17.6deg),var(--line) calc(var(--occ) + 17.6deg) 360deg);
}
/* named for what it is: the ticket's loading bar already owns `sweep`,
   and a second @keyframes of the same name silently replaces the first */
.is-in .soft__set.is-on .occ3__ring{animation:occSweep 1.1s var(--ease) .3s both}
@keyframes occSweep{from{--occ:0deg}to{--occ:336.6deg}}
.occ3__ring::before{content:"";position:absolute;inset:17px;background:#fff;border-radius:50%}
.occ3__ring b{
  position:relative;font-family:var(--display);font-size:1.35rem;font-weight:700;
  letter-spacing:-.03em;line-height:1;text-align:center;
}
.occ3__ring i{display:block;font-style:normal;font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:3px}

.mini{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mini u{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--mute);
  text-align:center;text-decoration:none;padding-bottom:2px;
}
.mini i{
  aspect-ratio:1;border-radius:6px;background:var(--soft);display:grid;place-items:center;
  font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--mute);
}
.mini i.on{background:var(--blue);color:#fff}

.spark{display:flex;align-items:flex-end;gap:5px;height:88px}
.spark i{flex:1;background:#DDDDE3;border-radius:4px 4px 0 0}
.spark__x{display:flex;gap:5px;margin-top:6px;font-family:var(--mono);font-size:.58rem;color:var(--mute)}
.spark__x span{flex:1;text-align:center}
.spark__x span.on{color:var(--warm)}
.spark i.peak{background:var(--warm)}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.95rem}
.checks li{position:relative;padding-left:30px;color:var(--ink-80)}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;border:1.5px solid rgba(10,10,11,.2)}
.checks .done{color:var(--ink)}
.checks .done::before{background:var(--blue);border-color:var(--blue)}
.checks .done::after{content:"";position:absolute;left:5.5px;top:7.5px;width:8px;height:4px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg)}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.shots i{aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--soft);display:block}
.shots img{width:100%;height:100%;object-fit:cover;display:block}

/* channels, lettered rather than branded — nine logos would be nine
   trademarks and a slower page for no extra meaning */
.discs{display:flex;gap:6px}
.discs i{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-soft);border:1px solid rgba(15,43,255,.18);
  color:var(--blue);font-style:normal;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  transition:background .2s var(--ease),color .2s var(--ease),scale .2s var(--ease-back);
}
.discs i:hover{background:var(--blue);color:#fff;scale:1.12}

/* you against the street — two bars on one scale, the gain in warm */
.vs2{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.vs2 li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;font-size:.86rem;color:var(--ink-80)}
.vs2__b{height:12px;border-radius:99px;background:#DDDDE3;width:var(--w);transition:filter .2s var(--ease)}
.vs2__b--you{background:var(--warm)}
.vs2 li:hover .vs2__b{filter:brightness(.92)}
.vs2 b{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--ink)}

/* the cleaners' score */
.rate{display:flex;align-items:baseline;gap:9px}
.rate b{font-family:var(--display);font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.rate .stars{color:var(--blue);font-size:1.05rem;letter-spacing:-.03em}

/* a year of repairs in three numbers */
.trio{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.trio b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.trio span{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:block;margin-top:5px}

.steps2{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps2 li{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;font-size:.92rem}
.steps2 i{width:26px;height:26px;border-radius:50%;background:var(--blue-soft);position:relative}
.steps2 i::after{content:"";position:absolute;inset:6px;border-radius:2px;background:var(--blue)}
.steps2 em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--mute);white-space:nowrap}

/* the list is an accordion: the open row explains itself in a sentence and
   its screen is the one on the left. One row open at a time — two would put
   two explanations against one picture. */
/* ── the stage under the pointer ───────────────────
   `translate` and `scale` are separate properties from `transform`, so the
   arrival keyframes and these hover states never fight over one value. */
.soft__stage{--mx:0;--my:0}
.soft__set.is-on .card{
  translate:calc(var(--mx) * var(--depth,7px)) calc(var(--my) * var(--depth,7px));
  transition:translate .55s var(--ease),scale .3s var(--ease),box-shadow .3s var(--ease);
}
.card--a{--depth:6px}
.card--b{--depth:-13px}
.card--c{--depth:-9px}
.soft__set.is-on .card:hover{
  scale:1.035;z-index:9;
  box-shadow:0 44px 80px -38px rgba(10,10,11,.62);
}

/* one tooltip pattern for every readable mark in the block */
.soft [data-tip]{position:relative}
.soft [data-tip]::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translate(-50%,5px);white-space:nowrap;z-index:12;pointer-events:none;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.05em;padding:6px 9px;border-radius:8px;
  opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.soft [data-tip]:hover::after{opacity:1;transform:translate(-50%,0)}

/* overview — a bar answers with its own month */
.bars6 i{transition:background .2s var(--ease),filter .2s var(--ease)}
.bars6 i:hover{background:var(--blue);filter:brightness(1.05)}
.bars6 i.peak:hover{background:var(--warm-dk)}
.afeed li{border-radius:9px;transition:background .2s var(--ease),padding-left .2s var(--ease)}
.afeed li:hover{background:var(--soft);padding-left:8px}
.occ3__ring{transition:scale .3s var(--ease-back)}
.card--occ:hover .occ3__ring{scale:1.06}

/* calendar — the night lifts and names its guest */
.mini i{transition:scale .2s var(--ease-back),background .2s var(--ease)}
.mini i:hover{scale:1.35;z-index:11;position:relative}

/* performance — the column names its rate */
.spark i{transition:background .2s var(--ease),scale .2s var(--ease)}
.spark i:hover{background:var(--blue);scale:1.06 1}
.spark i.peak:hover{background:var(--warm-dk)}

/* housekeeping — the photo strip opens under the cursor */
.shots i{transition:scale .3s var(--ease-back),filter .3s var(--ease)}
.shots i:hover{scale:1.22;z-index:11;position:relative;filter:brightness(1.06)}
/* the line opens to say who did it and when — an inline reveal, because the
   tick already occupies this row's ::after and a tooltip would erase it */
.checks li{transition:color .2s var(--ease)}
.checks li:hover{color:var(--ink)}
.checks em{
  display:block;font-style:normal;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.04em;color:var(--mute);max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s var(--ease),opacity .25s var(--ease),margin-top .3s var(--ease);
}
.checks li:hover em{max-height:2.4em;opacity:1;margin-top:4px}

/* maintenance — the step tells you what actually happened */
.steps2 li{border-radius:9px;padding:4px 6px;margin:-4px -6px;transition:background .2s var(--ease)}
.steps2 li:hover{background:var(--soft)}

.soft__nav{list-style:none;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;display:grid}
.soft__item{border-top:1px solid var(--line)}
.soft__item:last-child{border-bottom:1px solid var(--line)}
.soft__nav h3{margin:0;font:inherit}
.soft__go{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 2px;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.soft__go i{
  position:relative;width:30px;height:30px;flex:none;border-radius:50%;
  border:1px solid var(--line);
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .3s var(--ease);
}
/* the chevron is drawn, so it can turn from "open me" to "open" in one move */
.soft__go i::before,.soft__go i::after{
  content:"";position:absolute;top:50%;left:50%;width:8px;height:1.6px;border-radius:2px;
  background:var(--ink);transition:background .22s var(--ease),transform .3s var(--ease);
}
.soft__go i::before{transform:translate(-72%,-50%) rotate(45deg)}
.soft__go i::after{transform:translate(-28%,-50%) rotate(-45deg)}
.soft__go:hover{color:var(--ink);padding-left:8px}
.soft__go:hover i{border-color:var(--ink)}
.soft__go.is-on{color:var(--ink)}
.soft__go.is-on i{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.soft__go.is-on i::before,.soft__go.is-on i::after{background:#fff}

/* rows animate between 0fr and 1fr, which is the one way a grid row can
   transition to its natural height without measuring it in script */
.soft__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease),opacity .3s var(--ease);
  opacity:0;
}
.soft__panel > p{overflow:hidden;margin:0;color:var(--mute);max-width:46ch;line-height:1.55}
.soft__item.is-on .soft__panel{grid-template-rows:1fr;opacity:1;padding-bottom:18px}
.soft__item.is-on .soft__panel > p{transition:padding .3s var(--ease)}

/* ── outside verdict, above our own quotes ────────────── */
.scores{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);
  margin:clamp(18px,2.4vw,28px) 0 clamp(6px,1vw,14px);
  padding-bottom:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line);
}
.score{display:flex;align-items:baseline;gap:9px}
.score b{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.03em}
/* The denominator is a unit, not part of the score — it stays quiet and small. */
.score b small{font-size:.5em;font-weight:600;color:var(--mute);letter-spacing:0;margin-left:1px}
.score .stars{color:var(--blue);font-size:.9rem;letter-spacing:-.05em}
.score__l{font-size:.88rem;color:var(--mute)}
.score__l--wide{max-width:22ch;line-height:1.35}

/* ── owner quotes ───────────────────────────────────── */
/* the rail — twelve stories on one line, read at the reader's pace */
.rail{margin-top:clamp(24px,3vw,40px)}
.rail__head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}
.rail__hint{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center}
/* three chevrons drifting right — the cheapest way to say "this moves" */
.rail__swipe{display:inline-flex;gap:3px;margin-right:9px;vertical-align:-1px}
.rail__swipe i{
  width:5px;height:5px;border-top:1.5px solid var(--blue);border-right:1.5px solid var(--blue);
  transform:rotate(45deg);animation:drift 1.8s var(--ease) infinite;
}
.rail__swipe i:nth-child(2){animation-delay:.15s}
.rail__swipe i:nth-child(3){animation-delay:.3s}
@keyframes drift{0%,60%,100%{opacity:.25;transform:rotate(45deg) translate(0,0)}30%{opacity:1;transform:rotate(45deg) translate(2px,-2px)}}
.rail__count{margin:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--mute);white-space:nowrap;display:flex;align-items:baseline;gap:5px}
.rail__count b{font-size:1rem;color:var(--ink);font-weight:500}

/* the arrows live on the rail itself, half over the cards, where a reader
   looking at the edge of a cut-off card is already looking */
.rail__view{position:relative}
.rail__btn{
  position:absolute;top:calc(50% - 34px);z-index:4;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:1.05rem;color:var(--ink);
  box-shadow:0 18px 34px -18px rgba(10,10,11,.5);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),
             transform .18s var(--ease),opacity .25s var(--ease);
}
.rail__btn--prev{left:-16px}
.rail__btn--next{right:-16px}
.rail__btn:hover:not(:disabled){background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.08)}
.rail__btn:disabled{opacity:0;pointer-events:none}

/* the edge dissolves only while there is something under it to reach */
.rail__view::before,.rail__view::after{
  content:"";position:absolute;top:0;bottom:34px;width:clamp(44px,6.5vw,96px);z-index:3;
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
}
.rail__view::before{left:0;background:linear-gradient(90deg,var(--paper) 15%,transparent)}
.rail__view::after{right:0;background:linear-gradient(270deg,var(--paper) 15%,transparent)}
.rail__view.has-left::before,.rail__view.has-right::after{opacity:1}

.quotes{
  --rail-gap:clamp(22px,2.6vw,34px);
  display:flex;gap:var(--rail-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  /* the padding keeps borders and focus rings off the clip edge; without the
     matching scroll-padding a snap would rest 4px in and never read as "start" */
  padding:4px 4px 34px;margin:-4px -4px 0;scroll-padding-inline:4px;
  cursor:grab;scrollbar-width:none;
}
.quotes::-webkit-scrollbar{display:none}
.quotes.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.quotes.is-hint{scroll-snap-type:none}
.quotes:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:var(--r)}
/* twelve dashes, one per story, so the bar says how many as well as how far */
.rail__bar{
  position:relative;height:7px;border-radius:99px;margin-top:6px;
  background-image:linear-gradient(90deg,var(--line) calc(100% - 5px),transparent 0);
  background-size:calc(100% / 12) 100%;
}
.rail__bar i{
  position:absolute;left:0;top:0;height:100%;width:30%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--ink));
  box-shadow:0 4px 14px -4px rgba(15,43,255,.7);
  transform-origin:left;transition:width .2s linear,transform .25s var(--ease);
}
.rail__count b{
  display:inline-block;font-size:1.5rem;color:var(--ink);font-weight:500;
  min-width:2ch;text-align:right;
}
.rail__count.is-tick b{animation:tick .34s var(--ease-back)}
@keyframes tick{
  0%{transform:translateY(-40%);opacity:0}
  100%{transform:none;opacity:1}
}
.q{
  position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:16px;
  flex:0 0 clamp(268px,25vw,340px);scroll-snap-align:start;
}
/* The seam between two stories draws itself top-down as it arrives from the
   right. The timeline is the rail's own scroll position, so the drawing is
   tied to the hand doing the dragging — no script, no listener.
   Where scroll-driven animation is missing, the zero-second fallback lands on
   the finished state and the seam is simply there. */
.q:not(:last-child)::after{
  content:"";position:absolute;top:14px;bottom:14px;right:calc(var(--rail-gap) / -2 - 1.5px);
  width:3px;border-radius:99px;transform-origin:top;
  background:linear-gradient(180deg,var(--blue) 0,var(--blue-lite) 42%,var(--line) 78%,transparent 100%);
  animation:seam linear both;
  animation-timeline:view(inline);
  animation-range:entry 5% entry 85%;
}
@keyframes seam{
  from{transform:scaleY(0);opacity:0}
  to{transform:scaleY(1);opacity:1}
}
.q blockquote{flex:1}
.sec--soft .q{border-color:transparent}
/* the quote mark and the rating share one line: the money still leads,
   these two say "a person said this" before the sentence starts */
.q__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:-6px}
/* the glyph lives in the top of its em box, so the box is cropped to that
   part — otherwise a 4rem quote mark drags an inch of empty space with it */
.q__mark{
  font-family:var(--display);font-size:4.4rem;font-weight:700;line-height:1;
  color:var(--blue-lite);display:block;height:.4em;overflow:hidden;
}
.q__stars{color:var(--blue);font-size:1rem;letter-spacing:-.03em;margin-top:2px}

.q__delta{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.q__delta b{font-family:var(--display);font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:var(--warm);line-height:1}
.q__delta span{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.09em;color:var(--mute)}
.q blockquote{margin:0;font-size:.99rem;line-height:1.6;flex:1}
.q figcaption{
  display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:1px;
  align-items:center;font-size:.88rem;
}
.q__face{
  grid-row:1/3;width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:0 6px 14px -8px rgba(10,10,11,.8);
}
.q figcaption b{font-weight:600}
.q figcaption span{color:var(--mute);font-size:.82rem}
/* Six stories convince; the rest are one click away. */

/* ── channels ───────────────────────────────────────── */
.chan__lead{max-width:62ch;color:var(--mute);margin:0 0 24px}
.chan{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chan li{font-family:var(--mono);font-size:.82rem;border:1px solid var(--line);border-radius:100px;padding:9px 17px;color:var(--ink-80)}
.chan li:last-child{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── areas ──────────────────────────────────────────── */
.areas{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,52px);align-items:start;margin-top:clamp(20px,2.6vw,34px)}
/* Thirty-three names in one column is a wall, so they sit in five labelled
   groups and flow down two columns. break-inside keeps a heading welded to
   its own list instead of stranding it at the foot of a column. */
.areas__grid{columns:3;column-gap:clamp(18px,2vw,30px)}
.areas__g{break-inside:avoid;margin:0 0 clamp(18px,1.8vw,26px)}
.areas__g h3{margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}
.areas__g ul{list-style:none;margin:0;padding:0}
@media (max-width:1180px){ .areas__grid{columns:2} }   /* single column comes later, with the rest of the mobile layout */
.areas__g li{padding:4px 0;font-size:.94rem;line-height:1.35}
.areas__note{margin:20px 0 0;font-size:.9rem;color:var(--mute);max-width:38ch}
/* The block search engines read: kept small and quiet so it informs
   without competing with the page's own voice. */
.seo{margin-top:clamp(22px,2.6vw,32px);padding-top:20px;border-top:1px solid var(--line)}
.seo h3{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.seo p{margin:0;font-size:.86rem;line-height:1.6;color:var(--mute)}
.areas__pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.areas__pics img{border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;width:100%}
.areas__pics img:nth-child(1),.areas__pics img:nth-child(4){aspect-ratio:1}

/* ── faq ────────────────────────────────────────────── */
.faq{margin-top:clamp(20px,2.6vw,34px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-family:var(--display);font-size:clamp(1.04rem,1.6vw,1.22rem);font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:calc(50% - 1px);width:15px;height:2px;background:var(--blue)}
.faq summary::before{content:"";position:absolute;right:14.5px;top:calc(50% - 8px);width:2px;height:16px;background:var(--blue);transition:transform .2s var(--ease)}
.faq details[open] summary::before{transform:scaleY(0)}
.faq p{margin:-4px 0 22px;color:var(--mute);max-width:70ch}

/* ── apply ──────────────────────────────────────────── */
.apply{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:start}
.apply__call{margin:26px 0 0;font-size:.95rem;color:var(--mute-inv)}
.apply__call a{color:#fff;font-family:var(--mono);text-decoration:none;border-bottom:1px solid var(--blue-lite)}

.form{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(22px,2.8vw,34px);display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:block}
.fld__l{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin-bottom:7px}
.fld select,.fld input{
  width:100%;padding:14px 16px;background:#fff;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .16s var(--ease);
}
.fld select:hover,.fld input:hover{border-color:var(--ink)}
.fld select:focus,.fld input:focus{border-color:var(--blue);outline:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--mute);line-height:1.45}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--blue);flex:none}
.form__msg{margin:0;font-size:.9rem;min-height:1.2em}
.form__msg.is-ok{color:var(--blue);font-weight:600}
.form__msg.is-err{color:var(--red)}
.fld input:invalid.is-touched,.fld select:invalid.is-touched{border-color:var(--red)}

/* ── footer ─────────────────────────────────────────── */
/* ── everything in one place ────────────────────
   A summary band right before the questions: what the service is, in words a
   search engine can read, and one photograph of the thing being described. */
.band{
  display:grid;grid-template-columns:1.14fr .86fr;align-items:stretch;
  border-radius:var(--r);overflow:hidden;background:var(--soft);
}
.band__copy{
  padding:clamp(28px,3.4vw,54px);display:flex;flex-direction:column;
  justify-content:center;gap:16px;
}
/* a narrower measure would break this heading into four lines and stretch
   the whole band with it */
.band__copy .h2{margin:0 0 6px;max-width:30ch;font-size:clamp(1.75rem,3.1vw,2.6rem)}
.band__copy p{margin:0;color:var(--ink-80);line-height:1.65;max-width:52ch}
.band__copy .lnk{margin-top:10px;align-self:flex-start}
.band__fig{position:relative;margin:0;overflow:hidden;min-height:clamp(260px,28vw,400px)}
.band__fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:scale 1.1s var(--ease);
}
/* the photograph settles as the band arrives, then answers the cursor */
.band__fig.rv img{scale:1.07}
.band__fig.rv.is-in img{scale:1}
.band:hover .band__fig img{scale:1.04}

/* ── the footer ─────────────────────────────────
   Four columns of real links, one way to reach a person, one line of law. */
.ftr{background:var(--ink);color:var(--mute-inv);padding:clamp(52px,6.5vw,86px) 0 26px}
.ftr__in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.05fr);
  gap:clamp(22px,2.6vw,44px);align-items:start;
}
.ftr__col{display:grid;gap:11px;align-content:start}
.ftr__col h3{
  margin:0 0 6px;font-family:var(--display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.02em;color:#fff;
}
.ftr__col a{
  text-decoration:none;font-size:.92rem;color:var(--mute-inv);width:fit-content;
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.ftr__col a:hover{color:#fff;transform:translateX(3px)}

.ftr__talk{display:grid;gap:8px;justify-items:start}
.ftr__talk span{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase}
.ftr__talk a{
  font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:700;
  letter-spacing:-.03em;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .18s var(--ease);
}
.ftr__talk a:hover{border-color:#fff}
.ftr__talk p{margin:6px 0 0;font-size:.86rem;max-width:26ch;line-height:1.5}

.ftr__bar{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  margin-top:clamp(40px,4.5vw,64px);padding-top:22px;
  border-top:1px solid var(--line-dk);font-size:.8rem;
}
.ftr__mark{flex:none}
.ftr__mark .logo__mark{margin:0}
.ftr__note{margin-left:auto;text-align:right}

/* ── scroll reveal ──────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────── */
@media (max-width:1080px){
  .nav{display:none}
  .cmp--3{grid-template-columns:1fr}
  .stats__in{grid-template-columns:1fr 1fr;gap:24px}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  /* the photograph goes on top, where a phone reader meets it first */
  .band{grid-template-columns:1fr}
  .band__fig{order:-1;min-height:240px}
  .ftr__in{grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,40px)}
  .ftr__talk{grid-column:1/-1;margin-top:8px}
  /* stacked: the ratings card stops leaning and takes its own row, and the
     reviews stop moving — a marquee inside a scrolling page reads as a glitch */
  .panel{grid-template-columns:1fr;padding-bottom:0}
  .panel__rate{position:static;width:auto}
  .panel__revs{height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .panel.is-in .revs__track{animation:none}
  .revs__track .rev:nth-child(n+4){display:none}
  /* the picture goes above the argument, and the tags tuck inside its edges */
  .maths{grid-template-columns:1fr;gap:clamp(40px,6vw,60px)}
  .maths__fig{aspect-ratio:4/3;max-width:520px}
  .tagx--1{left:12px}
  .tagx--2{right:12px}
  .tagx--3{left:12px}
  .gst__stats{grid-template-columns:1fr 1fr}
  /* three steps will not read side by side on a tablet: two, then one */
  .begin__cards{grid-template-columns:1fr 1fr}
  .bcard--win{grid-column:1/-1}
  body{font-size:16px}
  .hero__in,.local,.areas,.apply,.plats,.inc,.dash,.soft{grid-template-columns:1fr}
  /* the collage cannot overlap on a narrow screen: stack the cards */
  .soft__stage{min-height:0}
  .soft__set{position:static;translate:none;display:none}
  .soft__set.is-on{display:grid;gap:14px}
  /* stacked, nothing leans on anything, so the reserved strip along the
     bottom of the main card would just be a hole */
  .card{position:static;width:100%!important;min-height:0;margin:0;
    padding-bottom:clamp(18px,2vw,26px)}
  /* three handsets side by side do not fit a phone: stack the two that
     carry the story and drop the reviews screen */
  .phones{grid-template-columns:1fr;gap:clamp(20px,5vw,32px);perspective:900px}
  .ph{max-width:320px}
  .ph--side{margin-bottom:0}
  .ph--side:first-child{display:none}
  .ph__scr{height:auto;max-height:430px}
  .pane.is-on{grid-template-columns:1fr}
  .pane__fig img{min-height:220px;max-height:300px}
  /* a card just short of full width shows the next one's edge, which is
     the only cue a phone reader needs that the rail keeps going */
  .q{flex-basis:min(78vw,300px)}
  .rail__btn{display:none}
  /* the counter grew, so the hint gives back the width to keep one line */
  .rail__hint{font-size:.6rem;letter-spacing:.06em}
  .rail__count{font-size:.72rem}
  .rail__count b{font-size:1.3rem}
  .inc__cols{grid-template-columns:1fr 1fr}
  .inc__fig{order:-1}
  .inc__fig img{min-height:200px;max-height:280px}
  /* twelve columns of prices will not fit: keep the shape, drop the
     per-month figures and let the caption carry the numbers */
  .curve__v{display:none}
  .curve__plot{gap:3px;height:150px}
  .curve__m{font-size:.54rem}
  /* one column: every hero child drops into the same track */
  .hero__copy,.hero__tool,.stamp{grid-column:1;grid-row:auto}
  .hero__tool{width:100%}
  /* the ticket becomes a plain note under the tool */
  .stamp{width:100%;justify-self:stretch;transform:none;grid-template-columns:1fr auto;align-items:center}
  .stamp__l{grid-column:1/-1}
  .stamp__v{margin-top:0;align-self:center}
  .answer{grid-template-columns:1fr;gap:16px}
  /* the bar cannot stay one row on a phone: stack it, square the corners */
  .finder{grid-template-columns:1fr;border-radius:var(--r);padding:8px}
  .finder__f{border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .finder .btn{margin:8px 0 0;width:100%;justify-self:stretch}
  .bars__row{grid-template-columns:1fr auto;row-gap:6px}
  .bars__track{grid-column:1/-1}
  .local__fig{order:-1}
  .ftr__in{grid-template-columns:1fr;gap:30px}
  .burger{display:flex}
  .mnav{display:none}
  .mnav.is-open{display:flex}
  .steps li{grid-template-columns:44px minmax(0,1fr)}
  .steps__d{grid-column:2;text-align:left;padding-top:4px}
  .hero::after{background:linear-gradient(180deg,rgba(10,10,11,.88) 0%,rgba(10,10,11,.9) 60%,rgba(10,10,11,.72) 100%)}
  /* a wide table cannot shrink: let it scroll inside its own box */
}
@media (max-width:640px){
  .ftr__in{grid-template-columns:1fr}
  .ftr__note{margin-left:0;text-align:left}
  .bars__row{grid-template-columns:1fr auto}
  .tagx{padding:9px 12px}
  .tagx b{font-size:1rem}
  .tagx--3 b{font-size:1.25rem}
  .gst__stats{grid-template-columns:1fr}
  /* the table loses its bar column on a phone: the figure carries it alone,
     and the column headings go with it — a per cent and a pound sign are
     their own labels */
  .gst__list li{grid-template-columns:30px 1fr auto auto;gap:10px}
  .gst__head{display:none}
  .gst__bar{display:none}
  .gst__list span{font-size:.9rem}
  .begin__cards{grid-template-columns:1fr}
  .bcard--win{grid-column:auto;clip-path:none}
  .bcard p,.bcard--win p{max-width:none}
}
@media (max-width:560px){
  .form__row{grid-template-columns:1fr}
  .stack{grid-template-columns:1fr 1fr;gap:14px}
  .stack__bar i span{font-size:.68rem}
  .vs__row{grid-template-columns:70px 1fr auto;gap:8px}
  .areas__grid{columns:1}
  .hdr__right .btn--sm{display:none}
  .stats__in{grid-template-columns:1fr 1fr;gap:20px}
}

@media (prefers-reduced-motion:reduce){
  /* Nothing moves on its own; the strip becomes a normal scrollable row. */
  .tbar__row{animation:none}
  .tbar{overflow-x:auto;scrollbar-width:none}
  .tbar::-webkit-scrollbar{display:none}

  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .begin__cards .bcard{--y:0px;--s:1;--rx:0deg;--ry:0deg;--o:1}
  .soft__set.is-on .card{animation:none}
  .panel.is-in .revs__track{animation:none}
}

/* ══════════════════════════════════════════════════════════
   THE ESTIMATE PAGE (estimate.html)
   Form on the left, a card on the right that recalculates as the
   flat is described. Its own screen, so it carries its own layout
   rather than borrowing the landing page's sections.
   ══════════════════════════════════════════════════════════ */
/* read aloud, never drawn — the progress bar shows sighted visitors where
   they are, and this tells everyone else the same thing */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.est-body{background:var(--paper)}
.est__top{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:clamp(20px,2.4vw,30px) var(--pad);position:relative;z-index:3;
}
.est__back{font-size:.94rem}

.est{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,80px);align-items:start;
  padding:clamp(16px,2vw,32px) var(--pad) clamp(60px,8vw,120px);
  max-width:var(--wrap);margin:0 auto;
}

/* ── the form column ─────────────────────────────────────── */
.est__form{max-width:34rem}
.est__intro{margin:0 0 clamp(22px,2.6vw,32px);color:var(--mute);max-width:44ch;line-height:1.6}
.est__bar{list-style:none;display:flex;gap:8px;margin:0 0 clamp(26px,3vw,38px);padding:0}
.est__bar li{
  flex:1;height:4px;border-radius:99px;background:var(--line);
  transition:background .35s var(--ease);
}
.est__bar li.is-done{background:var(--blue-lite)}
.est__bar li.is-on{background:var(--ink)}
.est__h{
  font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.02;margin:0 0 clamp(22px,2.6vw,32px);
  text-wrap:balance;outline:none;
}
.step{display:none}
.step.is-on{display:block;animation:wizStepIn .45s var(--ease) both}
@keyframes wizStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.step .fld{margin-bottom:16px}
.fld--set{border:0;padding:0;margin:0 0 22px}
.fld__hint{margin:9px 0 0;font-size:.86rem;color:var(--mute);line-height:1.5;max-width:46ch}
.fld__l em{font-style:normal;color:var(--mute);text-transform:none;letter-spacing:0}

/* the bedroom stepper */
.stepper{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;width:fit-content}
.stepper__v{
  min-width:9ch;display:grid;place-items:center;padding:12px 18px;
  font-family:var(--mono);font-size:.94rem;background:#fff;
}
.stepper__b{
  width:48px;border:0;background:var(--soft);cursor:pointer;font-size:1.1rem;color:var(--ink);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.stepper__b:hover{background:var(--ink);color:#fff}

/* radio rows that behave like buttons */
.picks{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.picks label{position:relative;cursor:pointer}
.picks input{position:absolute;inset:0;opacity:0;cursor:pointer}
.picks span{
  display:block;padding:11px 18px;border:1px solid var(--line);border-radius:99px;
  font-size:.94rem;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.picks label:hover span{border-color:var(--ink)}
.picks input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.picks input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}

.est__nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px)}
.est__small{margin:14px 0 0;font-size:.84rem;color:var(--mute);max-width:44ch;line-height:1.5}
.est__done{margin:0 0 20px;color:var(--ink-80);line-height:1.65;max-width:50ch}

/* ── the panel on the right ──────────────────────────────── */
.est__side{position:relative;min-height:clamp(420px,46vw,620px)}
/* the ultramarine block, notched at the bottom-left the way the reference
   notches its yellow one */
.est__shape{
  position:absolute;top:0;bottom:-10vh;left:16%;right:calc(var(--pad) * -1);
  background:var(--blue);border-radius:0 0 0 var(--r);
  clip-path:polygon(0 0,100% 0,100% 100%,26% 100%,26% 86%,0 86%);
}
.est__card{
  position:relative;z-index:2;margin:clamp(30px,5vw,70px) 0 0 0;
  background:#fff;border-radius:var(--r);padding:clamp(24px,2.8vw,38px);
  box-shadow:0 44px 80px -40px rgba(10,10,11,.5);max-width:26rem;
}
.est__card.is-fresh{animation:cardFresh .5s var(--ease)}
@keyframes cardFresh{0%{transform:translateY(-3px)}100%{transform:none}}
.est__cardL{
  margin:0 0 10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);
}
.est__big{
  display:block;font-family:var(--display);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
}
.est__unit{display:block;margin-top:8px;font-size:.9rem;color:var(--mute);max-width:28ch;line-height:1.45}
.est__rows{list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0;display:grid;gap:1px;background:var(--line);border-radius:10px;overflow:hidden}
.est__rows li{display:flex;justify-content:space-between;gap:12px;background:#fff;padding:11px 14px;font-size:.92rem;color:var(--ink-80)}
.est__rows b{font-family:var(--mono);font-weight:500;color:var(--ink)}
.est__rows .up{color:var(--warm)}
.est__cardP{margin:18px 0 0;font-size:.9rem;color:var(--mute);line-height:1.55}
.est__stars{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.est__stars .stars{color:var(--blue);font-size:1rem;letter-spacing:-.03em}
.est__stars em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--mute)}

@media (max-width:900px){
  .est{grid-template-columns:1fr;gap:clamp(34px,6vw,56px)}
  .est__form{max-width:none}
  .est__side{min-height:0;order:-1}
  /* on a phone the shape would be a stripe down the middle of nothing */
  .est__shape{display:none}
  .est__card{margin:0;max-width:none;box-shadow:0 26px 50px -34px rgba(10,10,11,.45)}
}

/* ── damage cover ────────────────────────────────────────────
   Four steps in the order they actually happen, so the reader can
   find the one that answers their worry. The last one is ours to
   pay, so it is the only one that carries the warm accent. */
.cover{
  list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);
}
.cover__s{
  position:relative;background:var(--paper);border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px);display:grid;gap:10px;align-content:start;
  border:1px solid transparent;transition:border-color .2s var(--ease),transform .3s var(--ease);
}
.cover__s:hover{border-color:var(--line);transform:translateY(-3px)}
.cover__n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--blue);
}
.cover__s h3{
  margin:0;font-family:var(--display);font-size:clamp(1.1rem,1.7vw,1.35rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.2;max-width:26ch;
}
.cover__s p{margin:0;color:var(--ink-80);line-height:1.6;max-width:48ch}
.cover__s--win{background:var(--warm);color:#fff}
.cover__s--win .cover__n{color:rgba(255,255,255,.8)}
.cover__s--win p{color:rgba(255,255,255,.95)}
.cover__s--win:hover{border-color:rgba(255,255,255,.35)}

.cover__foot{
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,48px);
  align-items:center;margin-top:clamp(26px,3vw,40px);
  padding-top:clamp(24px,2.8vw,34px);border-top:1px solid var(--line);
}
.cover__foot .ticks{margin:0}

@media (max-width:900px){
  .cover{grid-template-columns:1fr}
  .cover__foot{grid-template-columns:1fr;align-items:start}
}

/* ── cookie banner ───────────────────────────────────────────
   Bottom-left, small, out of the way of the call to action. It asks
   once and remembers; "decline" is a real button, not a grey hint. */
.ck{
  position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:60;
  width:min(420px,calc(100vw - 24px));background:var(--ink);color:#fff;
  border-radius:var(--r);padding:clamp(18px,2vw,24px);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8);
  opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.ck.is-in{opacity:1;transform:none}
.ck__t{margin:0 0 16px;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.86)}
.ck__t a{color:#fff}
.ck__b{display:flex;gap:10px;flex-wrap:wrap}
.ck__b .btn{padding:10px 18px;font-size:.9rem}
.ck__b .btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
.ck__b .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── the plain document pages: privacy, and anything like it ── */
.doc{max-width:44rem;margin:0 auto;padding:clamp(16px,2vw,32px) var(--pad) clamp(70px,9vw,120px)}
.doc__h{font-family:var(--display);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:700;
  letter-spacing:-.04em;line-height:1.02;margin:14px 0 20px}
.doc__lead{font-size:1.06rem;color:var(--ink-80);line-height:1.65;margin:0 0 clamp(28px,3.4vw,44px)}
.doc h2{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:-.025em;
  margin:clamp(30px,3.4vw,44px) 0 12px}
.doc p{margin:0 0 14px;color:var(--ink-80);line-height:1.7}
.doc .ticks{margin:0 0 14px}
.doc__t{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:.94rem}
.doc__t th,.doc__t td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc__t th{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.doc__t td{color:var(--ink-80);line-height:1.5}
.doc [data-fill]{background:var(--warm-soft);color:var(--warm-dk);padding:1px 6px;border-radius:5px;
  font-family:var(--mono);font-size:.86em}
.doc__back{margin-top:clamp(34px,4vw,52px)}

/* ── page not found ──────────────────────────────────────────── */
.e404{max-width:46rem;margin:0 auto;padding:clamp(40px,7vw,110px) var(--pad) clamp(70px,9vw,120px)}
.e404__h{font-family:var(--display);font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:700;
  letter-spacing:-.045em;line-height:.98;margin:14px 0 20px}
.e404__p{font-size:1.06rem;color:var(--ink-80);line-height:1.65;max-width:46ch;margin:0 0 28px}
.e404__go{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(34px,4vw,50px)}
.e404__list{list-style:none;margin:0;padding:clamp(22px,2.6vw,30px) 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.e404__list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:border-color .18s var(--ease)}
.e404__list a:hover{border-color:var(--ink)}
.e404__mail{margin-top:28px;font-size:.92rem;color:var(--mute)}

@media (max-width:640px){
  .ck{left:8px;right:8px;bottom:8px;width:auto}
}