/* Generated by build-frontdoor.py from site/frontdoor/v4/v4.css + v5/v5.css + fd/live.css. Edit those. */
/* Ausavia front door v4: v3 structure, disciplined palette (Chiara 21 Oct 21:58: v3 = "Arlecchino").
   One dominant colour (hero, explainer, footer, accents of type), one accent used only for the CTA buttons and the ticks,
   neutrals for everything else. The hero video is rendered with the same tokens, so the page continues its frame.
   Two themes: html[data-theme=a] petrol + saffron, html[data-theme=b] indigo + apricot. */
@font-face{font-family:Bric;src:url(fonts/bricolage.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Inst;src:url(fonts/instrument.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Hand;src:url(fonts/caveat.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root,[data-theme=a]{
  --dom:#0f3b42;--dom-2:#18525a;--hl:#a9d6d0;--tint:#e5efed;--paper:#f6f3ee;--ink:#0d2529;--muted:#4a5f63;--line:#d3dddb;
  --acc:#f2b544;--acc-ink:#0d2529;--acc-deep:#8a5a00;--acc-press:#d99b26}
[data-theme=b]{
  --dom:#1d2347;--dom-2:#2b3366;--hl:#c0c5f2;--tint:#eceef6;--paper:#f6f5f2;--ink:#151a36;--muted:#525876;--line:#d9dbe6;
  --acc:#ff9466;--acc-ink:#151a36;--acc-deep:#b0431a;--acc-press:#e8774a}
:root{--disp:Bric,ui-sans-serif,sans-serif;--text:Inst,ui-sans-serif,sans-serif;--hand:Hand,cursive}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 18px/1.55 var(--text);color:var(--ink);background:var(--dom);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.logo{font:700 30px/1 var(--disp);letter-spacing:-.04em;text-decoration:none}
.logo i{font-style:normal;color:var(--acc)}

/* header over the hero */
.top{position:absolute;z-index:20;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:28px 48px;color:#fff}
.top nav{display:flex;align-items:center;gap:30px;font:600 16px var(--text)}
.top nav>a{text-decoration:none;opacity:.88}.top nav>a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.langs{display:inline-flex;gap:4px;padding:4px;border-radius:30px;background:rgba(255,255,255,.1)}
.langs a{padding:5px 11px;border-radius:20px;text-decoration:none;font:700 13px var(--text);letter-spacing:.04em;opacity:.75}
.langs a.on{background:#fff;color:var(--dom);opacity:1}

/* hero: the video background is the same --dom, the scrim and the bottom fade melt into the next section */
.hero{position:relative;height:100vh;height:100svh;min-height:720px;overflow:hidden;color:#fff;background:var(--dom)}
.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--dom) 92%,transparent) 0%,color-mix(in srgb,var(--dom) 70%,transparent) 32%,transparent 58%),
  linear-gradient(0deg,var(--dom) 0%,color-mix(in srgb,var(--dom) 60%,transparent) 14%,transparent 30%)}
.hero-in{position:absolute;left:48px;top:50%;transform:translateY(-54%);max-width:min(760px,50vw)}
.kick{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--text);text-transform:uppercase;letter-spacing:.14em;
  padding:9px 14px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.kick .dot{width:8px;height:8px;border-radius:50%;background:var(--hl)}
.kick.dark{background:transparent;color:var(--muted);border-color:var(--line)}
.kick.light{color:var(--hl)}
h1{font:700 clamp(64px,7.8vw,140px)/.92 var(--disp);letter-spacing:-.045em;margin:26px 0 26px;text-wrap:balance}
h1.long{font-size:clamp(56px,6.2vw,118px)}
.hero-in:has(h1.long){max-width:min(860px,56vw)}
h1 .hl{color:var(--hl);display:inline-block;animation:rise .9s .25s both cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(.3em);opacity:0}}
.sub{font:500 clamp(19px,1.45vw,23px)/1.45 var(--text);max-width:560px;color:rgba(255,255,255,.86)}
.ctas{display:flex;align-items:center;gap:26px;margin-top:36px}
/* the accent: buttons only */
.btn{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:60px;background:var(--acc);color:var(--acc-ink);text-decoration:none;
  font:700 18px var(--text);padding:15px 26px;transition:transform .15s,background .15s}
.btn:hover{background:var(--acc-press);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.big{font-size:20px;padding:19px 32px}
.btn span{transition:transform .2s}.btn:hover span{transform:translateX(4px)}
.ghost{font:600 18px var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;opacity:.9}
.ticker{position:absolute;left:0;right:0;bottom:0;color:rgba(255,255,255,.62);padding:22px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.1)}
.tk{display:flex;width:max-content;gap:28px;align-items:center;animation:tick 60s linear infinite;font:600 17px/1 var(--text);letter-spacing:.12em;text-transform:uppercase}
.tk i{font-style:normal;color:var(--hl);opacity:.6;font-size:12px}
@keyframes tick{to{transform:translateX(-50%)}}

/* explainer: continues the hero on the same --dom */
.explain{background:var(--dom);color:#fff;padding:120px 0 110px;position:relative}
.explain:before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 88% 0%,color-mix(in srgb,var(--dom-2) 80%,transparent),transparent 70%);pointer-events:none}
.explain .wrap{position:relative}
.mega{font:700 clamp(52px,6vw,100px)/.95 var(--disp);letter-spacing:-.04em;margin:26px 0 40px;text-wrap:balance}
.explain .mega .under{color:var(--hl)}
.ex-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:60px;align-items:end}
.lead{font:500 clamp(21px,1.7vw,26px)/1.45 var(--text);color:rgba(255,255,255,.88)}
.for{font:600 20px/1.4 var(--text);color:var(--hl);padding-left:24px;border-left:2px solid color-mix(in srgb,var(--hl) 50%,transparent)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:90px 0 0}
.steps li{border-top:1px solid rgba(255,255,255,.22);padding-top:24px}
.steps b{display:block;font:600 15px/1 var(--text);letter-spacing:.14em;color:var(--hl);margin-bottom:18px}
.steps h3{font:700 28px/1.1 var(--disp);letter-spacing:-.02em;margin-bottom:10px}
.steps p{font-size:18px;color:rgba(255,255,255,.74)}

/* what we sell: neutral paper */
.sell{background:var(--paper);padding:110px 0 110px}
.sell-h{font:700 44px/1.05 var(--disp);letter-spacing:-.03em;margin-bottom:34px}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tiles li{background:#fff;color:var(--ink);border-radius:20px;padding:26px 22px 28px;min-height:250px;display:flex;flex-direction:column;
  border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.tiles li:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--dom) 12%,transparent)}
.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--dom);margin-bottom:auto}
.ico svg{width:24px;height:24px}
.tiles h3{font:700 22px/1.12 var(--disp);letter-spacing:-.015em;margin:26px 0 10px}
.tiles p{font:500 15px/1.4 var(--text);color:var(--muted)}
.sell-note{margin-top:40px;font:600 19px var(--text);color:var(--dom)}

/* whiteboard section: light tint of the dominant */
.boardsec{background:var(--tint);color:var(--ink);padding:120px 0 110px;position:relative;overflow:hidden}
.boardsec .wrap{position:relative}
.mega.sm{font-size:clamp(46px,5vw,84px);margin-bottom:18px}
.mega .mark{color:var(--dom)}
.boardsec .mega{color:var(--ink)}
.bsub{font:500 22px/1.45 var(--text);max-width:640px;color:var(--muted);margin-bottom:54px}
.board{position:relative;max-width:1060px;margin:0 auto;background:#fff;color:var(--ink);border-radius:22px;padding:40px 48px 30px;
  border:1px solid var(--line);box-shadow:0 30px 70px color-mix(in srgb,var(--dom) 16%,transparent);
  background-image:linear-gradient(color-mix(in srgb,var(--dom) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--dom) 4%,transparent) 1px,transparent 1px);background-size:40px 40px}
.marker{display:none}
.board-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;border-bottom:1px dashed var(--line);padding-bottom:18px;margin-bottom:22px}
.bof{font:700 40px/1 var(--hand);white-space:nowrap;color:var(--ink)}
.bof b{color:var(--dom)}
.checks{list-style:none;display:flex;gap:22px;font:700 25px/1 var(--hand);white-space:nowrap;padding-top:8px}
.checks li{display:flex;align-items:center;gap:8px;color:#8d969a;transition:color .3s}
.checks i{position:relative;width:22px;height:22px;border:2px solid currentColor;border-radius:4px 6px 3px 5px}
.checks li.on{color:var(--ink)}
.checks li.on i{border-color:var(--acc-deep)}
.checks li.on i:after{content:"✓";position:absolute;left:-1px;top:-15px;font:700 34px/1 var(--hand);color:var(--acc-deep);animation:pop .35s cubic-bezier(.2,.9,.2,1.4)}
@keyframes pop{from{transform:scale(0)}}
.thread{display:flex;flex-direction:column;gap:18px;min-height:220px}
.msg{display:flex;gap:14px;align-items:flex-start;animation:in .35s both}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.msg .av{flex:0 0 38px;height:38px;border-radius:50%;background:var(--dom);color:#fff;display:grid;place-items:center;font:700 19px/1 var(--disp);margin-top:2px}
.msg.bot>p{font:500 20px/1.45 var(--text);padding-top:6px;max-width:760px}
.msg.user{justify-content:flex-end}
.msg.user p{background:var(--tint);color:var(--ink);font:600 18px/1.4 var(--text);padding:14px 20px;max-width:70%;border-radius:20px 20px 6px 20px}
.quick{display:flex;flex-wrap:wrap;gap:10px;padding-left:52px;animation:in .35s .08s both}
.opt{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:40px;padding:10px 18px;font:600 17px/1.2 var(--text);transition:background .15s,border-color .15s;text-align:left}
.opt:hover{background:var(--tint);border-color:var(--dom)}
.opt .e{display:none}
.opt.task{border-radius:16px;padding:14px 18px;max-width:440px;font-size:17px}
.opt.ghost{border-style:dashed;color:var(--muted)}
.quick.trades{display:grid;grid-template-columns:repeat(3,1fr);max-width:860px}
.quick.trades .opt{border-radius:14px;padding:14px 16px;font-size:17px}
.dots{display:inline-flex;gap:6px;padding:14px 0}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--dom);opacity:.25;animation:dot 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{opacity:1;transform:translateY(-4px)}}
.dots em{font:700 22px var(--hand);font-style:normal;margin-left:10px;opacity:.7}
.composer{display:flex;align-items:flex-end;gap:12px;margin-top:26px;background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:12px 12px 12px 22px;
  box-shadow:0 10px 30px color-mix(in srgb,var(--dom) 7%,transparent);transition:border-color .2s,box-shadow .2s}
.composer:focus-within{border-color:var(--dom);box-shadow:0 10px 30px color-mix(in srgb,var(--dom) 14%,transparent)}
.composer textarea{flex:1;border:0;outline:0;resize:none;font:500 19px/1.45 var(--text);color:var(--ink);background:none;padding:9px 0;max-height:200px}
.composer .send{flex:0 0 48px;height:48px;border-radius:50%;border:0;background:var(--dom);color:#fff;font:700 22px/1 var(--text);transition:transform .15s,background .15s}
.composer .send:disabled{background:#cdd3d5;cursor:default}
.composer .send:not(:disabled):hover{background:var(--dom-2);transform:scale(1.05)}
.composer.locked{opacity:.45;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.free{margin-top:14px;font:500 14px var(--text);color:var(--muted);text-align:center}
.linkish{border:0;background:none;text-decoration:underline;color:inherit}

/* proposal on the board */
.prop{position:relative;margin:6px 0 4px 52px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 36px 30px;
  box-shadow:0 24px 50px color-mix(in srgb,var(--dom) 14%,transparent);animation:drop .5s both cubic-bezier(.2,.8,.2,1)}
@keyframes drop{from{opacity:0;transform:translateY(-16px)}}
.prop .pk{font:700 13px var(--text);text-transform:uppercase;letter-spacing:.12em;color:var(--dom)}
.prop h3{font:700 38px/1.05 var(--disp);letter-spacing:-.025em;margin:10px 170px 12px 0}
.prop .line{font:500 19px/1.45 var(--text);color:var(--muted);max-width:640px}
.price{position:absolute;right:30px;top:30px;min-width:130px;border-radius:16px;background:var(--tint);color:var(--dom);display:grid;place-items:center;
  text-align:center;font:700 19px/1.1 var(--disp);letter-spacing:-.01em;padding:14px 16px}
.flow-h,.ex-h{font:700 26px/1 var(--hand);margin:28px 0 14px;color:var(--dom)}
.flow{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch}
.flow .fb{border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;font:600 16.5px/1.35 var(--text);background:var(--paper)}
.flow .fb b{display:block;font:700 14px var(--text);color:var(--dom);margin-bottom:6px}
.flow .ar{display:grid;place-items:center;font:700 32px/1 var(--hand);color:var(--muted)}
.exmsg{display:flex;gap:18px;align-items:flex-start}
.exmsg .bub{position:relative;flex:1;background:var(--tint);border-radius:20px 20px 20px 6px;padding:18px 20px;font:500 18px/1.45 var(--text);max-width:640px}
.exmsg .bub:after{content:"✓ OK";position:absolute;right:14px;bottom:-14px;background:var(--acc);color:var(--acc-ink);font:700 13px var(--text);padding:5px 11px;border-radius:20px}
.exmsg .note{flex:0 0 200px;font:700 22px/1.1 var(--hand);color:var(--muted);padding-top:10px}
.prop .not{margin-top:24px;font-size:15px;color:var(--muted)}
.prop .acts{display:flex;gap:18px;align-items:center;margin-top:24px}
.prop .acts .again{border:0;background:none;font:600 16px var(--text);text-decoration:underline;text-underline-offset:5px}
.prop.no h3{margin-right:0}
.bubble{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;max-width:640px}
.mail{display:flex;gap:10px;margin:12px 0}
.mail input{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font:500 17px var(--text)}
.mail button{border:0;border-radius:14px;background:var(--dom);color:#fff;padding:0 18px;font:700 16px var(--text)}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--muted)}

/* not sure */
.notsure{max-width:1060px;margin:76px auto 0}
.notsure summary{list-style:none;cursor:pointer;font:700 clamp(26px,2.3vw,36px)/1.1 var(--disp);letter-spacing:-.02em;display:inline-flex;gap:14px;align-items:center;color:var(--ink)}
.notsure summary::-webkit-details-marker{display:none}
.notsure summary span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--dom);color:#fff;font-size:20px;transition:transform .3s}
.notsure[open] summary span{transform:rotate(180deg)}
.notsure ul{list-style:none;display:grid;gap:12px;margin-top:26px}
.notsure li{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;background:#fff;color:var(--ink);border-radius:18px;padding:18px 22px;border:1px solid var(--line)}
.notsure li.hit{outline:2px solid var(--dom)}
.notsure .ico{margin:0}
.notsure h4{font:700 21px/1.15 var(--disp)}
.notsure p{font-size:15px;color:var(--muted)}.notsure .nt{color:#7b8689;font-size:14px}
.notsure b{font:700 18px var(--disp);background:var(--tint);color:var(--dom);border-radius:30px;padding:8px 14px;white-space:nowrap}

.foot{background:var(--dom);color:rgba(255,255,255,.72);padding:44px 0;font-size:15px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.foot .logo{color:#fff}

@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(3,1fr)}.quick.trades{grid-template-columns:repeat(2,1fr)}
  .hero-in{max-width:80vw}
}
@media (max-width:760px){
  .wrap{padding:0 22px}.top{padding:20px 22px}.top nav>a{display:none}
  .hero{min-height:640px}.hv{object-position:72% 50%}
  .scrim{background:linear-gradient(0deg,var(--dom) 0%,color-mix(in srgb,var(--dom) 85%,transparent) 45%,color-mix(in srgb,var(--dom) 20%,transparent) 75%)}
  .hero-in{left:22px;right:22px;top:auto;bottom:90px;transform:none;max-width:none}
  h1{font-size:clamp(50px,13vw,70px)}
  .ctas{flex-wrap:wrap;gap:16px}
  .ex-grid,.steps{grid-template-columns:1fr}.steps{gap:30px;margin-top:60px}
  .tiles{grid-template-columns:1fr 1fr}
  .board{padding:24px 18px}.board-head{flex-direction:column}.checks{gap:12px;font-size:21px}.bof{font-size:32px}
  .quick{padding-left:0}.quick.trades{grid-template-columns:1fr 1fr}
  .prop{margin-left:0;padding:26px 20px}.prop h3{font-size:28px;margin-right:0;margin-top:70px}
  .price{right:14px;top:14px}
  .flow{grid-template-columns:1fr}.flow .ar{transform:rotate(90deg);height:36px}
  .exmsg{flex-direction:column}.exmsg .note{flex:none}
  .notsure li{grid-template-columns:40px 1fr}.notsure li b{grid-column:2;justify-self:start}
  .foot .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Ausavia front door v5 "calm": v4 tokens and structure, with the restraint of Chiara's feel reference nuitee.com
   (21 Oct 22:03: clean, calm, trustworthy; a bit more personality, never teenage). Loaded after v4.css.
   Taken from the feel, not copied: one dark surface (the hero) and light pages after it, one plain sans for headings
   with a short type scale, lots of air (sections ~160 px), narrow text columns, plain sentence-case labels instead of
   pills, quiet buttons with small radii, hairline cards that don't jump. Ausavia's own personality: the real phone
   video, the warm accent on the one button that matters and on the ticks, the logo, and the handwritten whiteboard. */
:root{--disp:Inst,ui-sans-serif,sans-serif;--r:12px}
/* palette B, indigo + apricot (Chiara 21 Oct 23:30; A dropped, too close to Travel Coordination) */
:root,[data-theme]{
  --dom:#1d2347;--dom-2:#2b3366;--hl:#c0c5f2;--tint:#eceef6;--paper:#f6f6f4;--ink:#151a36;--muted:#525876;--line:#e2e3e8;
  --acc:#ff9466;--acc-ink:#151a36;--acc-deep:#b0431a;--acc-press:#e8774a}
body{font-size:18px;line-height:1.6;background:var(--paper)}
.logo{font-family:Bric,ui-sans-serif,sans-serif}
.wrap{max-width:1200px;padding:0 56px}

/* labels: plain, sentence case */
.kick,.kick.dark,.kick.light{display:block;padding:0;border:0;background:none;border-radius:0;text-transform:none;letter-spacing:0;
  font:500 16px/1.4 var(--text);color:var(--muted)}
.kick .dot{display:none}
.hero .kick{color:rgba(255,255,255,.72)}

/* hero: still the video on --dom, type smaller and steadier, hard edge into the light page (no fade) */
.top nav{font-weight:500;font-size:15px;gap:28px}
.scrim{background:linear-gradient(90deg,color-mix(in srgb,var(--dom) 94%,transparent) 0%,color-mix(in srgb,var(--dom) 72%,transparent) 34%,transparent 60%)}
.ticker{display:none}
.hero-in,.hero-in:has(h1.long){max-width:min(640px,46vw)}
h1,h1.long{font:600 clamp(54px,5.6vw,86px)/1.02 var(--disp);letter-spacing:-.025em;margin:18px 0 24px}
h1 .hl{animation:none}
.sub{font:400 20px/1.55 var(--text);max-width:520px;color:rgba(255,255,255,.8)}
.ctas{gap:14px;margin-top:40px}
.btn,.btn.big{border-radius:var(--r);font:600 17px var(--text);padding:15px 22px;gap:10px}
.btn:hover{transform:none}
.ghost{display:inline-flex;align-items:center;gap:10px;text-decoration:none;opacity:1;font:500 17px var(--text);padding:14px 20px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.4)}
.ghost:after{content:"↓";font-size:15px;opacity:.8}
.ghost:hover{border-color:#fff}

/* explainer: light now, one dark surface per page is enough */
.explain{background:var(--paper);color:var(--ink);padding:160px 0 150px}
.explain:before{display:none}
.mega,.mega.sm{font:600 clamp(38px,3.6vw,56px)/1.08 var(--disp);letter-spacing:-.02em;margin:14px 0 28px;max-width:820px}
.explain .mega .under,.mega .mark{color:var(--muted)}
.ex-grid{grid-template-columns:minmax(0,640px) 1fr;gap:80px}
.lead{font:400 20px/1.6 var(--text);color:var(--muted)}
.for{font:500 17px/1.5 var(--text);color:var(--ink);border-left:1px solid var(--line)}
.steps{margin-top:110px;gap:40px}
.steps li{border-top:1px solid var(--line);padding-top:28px}
.steps b{font:500 15px/1 var(--text);letter-spacing:0;color:var(--muted);margin-bottom:22px}
.steps h3{font:600 22px/1.25 var(--disp);letter-spacing:-.01em}
.steps p{font-size:17px;color:var(--muted)}

/* what we do: white band, hairline cards, no lift */
.sell{background:#fff;padding:150px 0}
.sell-h{font:600 clamp(32px,2.8vw,42px)/1.1 var(--disp);letter-spacing:-.02em;margin-bottom:48px}
.tiles{gap:16px}
.tiles li{border-radius:var(--r);padding:26px 22px;min-height:230px;background:var(--paper);border:1px solid var(--line)}
.tiles li:hover{transform:none;box-shadow:none;border-color:color-mix(in srgb,var(--dom) 35%,var(--line))}
.ico{width:auto;height:auto;background:none;border-radius:0;justify-content:start}
.tiles h3{font:600 19px/1.25 var(--disp);letter-spacing:-.005em;margin:28px 0 8px}
.tiles p{font:400 15px/1.5 var(--text)}
.sell-note{font:500 17px var(--text);color:var(--muted);margin-top:36px}

/* whiteboard: the one playful place (handwriting stays here only) */
.boardsec{background:var(--paper);padding:160px 0 150px}
.bsub{font:400 20px/1.55 var(--text);margin-bottom:60px}
.board{border-radius:16px;box-shadow:0 1px 2px color-mix(in srgb,var(--dom) 6%,transparent),0 24px 60px color-mix(in srgb,var(--dom) 8%,transparent);
  background-image:linear-gradient(color-mix(in srgb,var(--dom) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--dom) 3%,transparent) 1px,transparent 1px)}
.msg.bot>p{font-weight:400;font-size:19px}
.msg.user p{font-weight:500;font-size:17px;border-radius:14px 14px 4px 14px}
.opt,.quick.trades .opt,.opt.task{border-width:1px;border-radius:10px;font-weight:500;font-size:16px}
.composer{border-width:1px;border-radius:16px;box-shadow:none}
.prop{border-radius:14px;box-shadow:0 18px 44px color-mix(in srgb,var(--dom) 9%,transparent)}
.prop h3{font:600 30px/1.12 var(--disp);letter-spacing:-.015em}
.price{border-radius:10px;font:600 17px/1.2 var(--disp)}
.prop .pk{font:500 14px var(--text);text-transform:none;letter-spacing:0;color:var(--muted)}
.notsure{margin-top:96px}
.notsure summary{font:600 clamp(24px,2vw,30px)/1.2 var(--disp);letter-spacing:-.015em}
.notsure summary span{width:34px;height:34px;font-size:16px;background:none;color:var(--ink);border:1px solid var(--line)}
.notsure li{border-radius:var(--r)}
.notsure h4{font:600 19px/1.25 var(--disp)}
.notsure b{font:600 15px var(--text);border-radius:8px}
.foot{padding:56px 0}

@media (max-width:760px){
  .wrap{padding:0 22px}
  .hero-in,.hero-in:has(h1.long){max-width:none}
  .scrim{background:linear-gradient(0deg,var(--dom) 0%,color-mix(in srgb,var(--dom) 85%,transparent) 45%,color-mix(in srgb,var(--dom) 20%,transparent) 75%)}
  h1,h1.long{font-size:clamp(42px,11vw,56px)}
  .explain,.boardsec{padding:100px 0 90px}.sell{padding:96px 0}
  .ex-grid{grid-template-columns:1fr;gap:28px}.steps{margin-top:64px}
}

/* hero text and header sit on the same column as the sections below */
@media (min-width:761px){
  .top{padding:28px max(56px,calc((100vw - 1200px)/2 + 56px))}
  .hero-in{left:max(56px,calc((100vw - 1200px)/2 + 56px))}
}
@media (max-width:760px){.tiles{grid-template-columns:1fr}.tiles li{min-height:0}.checks{flex-wrap:wrap}}
.board,.notsure{margin-left:0;max-width:none}

/* accent only on the CTA and the ticks (Chiara 21 Oct): the logo dot stays in the text colour */
.logo i{color:inherit}

/* phone: text first, then the video as its own band on the same indigo (no text over the phone, no seam) */
@media (max-width:760px){
  .hero{height:auto;min-height:0;display:flex;flex-direction:column;padding-top:104px}
  .hero-in,.hero-in:has(h1.long){position:static;transform:none;margin:0 22px;order:1}
  .hero .scrim{display:none}
  .hv{position:static;order:2;width:100%;height:min(118vw,520px);object-fit:cover;object-position:97% 50%;margin-top:28px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
  .ctas{margin-top:30px}
}

/* live.css: what the real front door adds to the v5 mock (PA 2026-10-22). Same tokens, no new colours. */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:var(--ink);padding:10px 16px;border-radius:var(--r);font:600 15px var(--text)}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--hl);outline-offset:3px}
.boardsec a:focus-visible,.boardsec button:focus-visible,.boardsec input:focus-visible{outline-color:var(--dom)}
.free a{color:inherit}
.consent a{color:inherit;text-decoration:underline}
.foot .wrap{flex-wrap:wrap}
.foot .fl{display:flex;flex-wrap:wrap;gap:6px 10px}
.foot a{color:inherit;text-decoration:none}.foot .fl a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot .langs a:not(.on){color:#fff}
@media (max-width:760px){.foot .wrap{flex-direction:column;align-items:flex-start;gap:18px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* review round 1 (22 Oct): on phones the price sits above the label (was covering it), the email form stacks
   inside its bubble (it was wider than the bubble and pushed the board sideways), bubbles never exceed the row */
.msg>.bubble,.msg>p{min-width:0}
.mail input{min-width:0}
@media (max-width:760px){
  .prop .price{position:static;display:inline-grid;min-width:0;padding:8px 12px;margin-bottom:14px}
  .prop h3{margin-top:10px}
  .bubble{padding:14px 14px}
  .mail{flex-direction:column}.mail button{padding:12px 18px}
  .thread{overflow-x:hidden}
}
/* review round 3: in the chaos part of the video the flying notes crossed the headline (CA/IT h1 are longer).
   Desktop: phone pushed right as far as the crop allows, and the text column sits on a near-solid indigo. */
@media (min-width:761px){
  .hv{object-position:20% 50%}
  .scrim{background:linear-gradient(180deg,var(--dom) 0,color-mix(in srgb,var(--dom) 80%,transparent) 70px,transparent 130px),linear-gradient(90deg,color-mix(in srgb,var(--dom) 98%,transparent) 0%,color-mix(in srgb,var(--dom) 96%,transparent) 38%,color-mix(in srgb,var(--dom) 55%,transparent) 50%,transparent 62%)}
}

/* guided intake (22 Oct): "2/3" after the question, quiet */
.msg .step { opacity: .55; font-size: .85em; white-space: nowrap; }