/* ==========================================================================
   Costa del Sol Websites — base
   Tokens, reset, type, layout, buttons, pills, chips, cards, form fields,
   device frames and motion states. Section styles follow in their own blocks.
   ========================================================================== */

:root{
  /* brand — sampled from the logo */
  --navy-950:#020F22;
  --navy-900:#041A36;
  --navy-800:#07254A;
  --navy:#022D5B;
  --navy-600:#0D4683;
  --navy-300:#8FA6C4;
  --teal:#0CA5B5;
  --teal-700:#06737F;
  --teal-300:#76D2DB;
  --teal-100:#D3EFF2;
  --teal-50:#ECF8F9;
  --sun:#FCB900;
  --sun-600:#E5A700;
  --sun-300:#FFD45C;
  --sun-100:#FFF1C2;

  /* surfaces */
  --paper:#FFFFFF;
  --foam:#EEF5F5;
  --foam-2:#DDEAEA;
  --line:#DCE5E6;
  --line-2:#C5D2D4;
  --line-ctl:#7C8C9C;               /* form-control boundaries: 3:1 on white and foam */

  /* text */
  --ink:#0F2440;
  --ink-2:#34465F;
  --mute:#5A6A7E;
  --on-dark:#FFFFFF;
  --on-dark-2:#BCC9DB;
  --on-dark-3:#8396B2;
  --line-dark:rgba(255,255,255,.13);

  /* status */
  --ok:#1E9E63;
  --err:#C93838;
  --wa:#25D366;

  /* type */
  --f-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:13px;
  --fs-sm:15px;
  --fs-base:17px;
  --fs-md:19px;
  --fs-lg:clamp(19px,1.55vw,22px);
  --fs-h3:clamp(22px,2.1vw,28px);
  --fs-h2:clamp(36px,5vw,66px);
  --fs-h1:clamp(46px,7.4vw,108px);

  /* layout */
  --wrap:1240px;
  --wrap-narrow:880px;
  --gutter:clamp(16px,4vw,40px);
  --section-y:clamp(88px,11vw,156px);
  --header-h:76px;

  /* shape */
  --r-xs:8px;
  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --r-xl:36px;
  --r-pill:999px;

  /* elevation — only for things that float */
  --sh-float:0 30px 60px -28px rgba(4,26,54,.38),0 8px 22px -12px rgba(4,26,54,.18);
  --sh-lift:0 16px 36px -20px rgba(4,26,54,.32);
  --sh-sun:0 14px 30px -14px rgba(229,167,0,.7);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);scroll-padding-bottom:88px}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:400 var(--fs-base)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:var(--teal-700);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--navy)}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
dialog{color:inherit}
::selection{background:var(--sun-300);color:var(--navy)}
:focus-visible{outline:3px solid var(--teal-700);outline-offset:3px;border-radius:6px}
.section--dark :focus-visible,.on-dark :focus-visible{outline-color:var(--sun)}
/* anchor offset comes from html scroll-padding (also keeps focused elements clear of the fixed header) */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
html.is-locked,html.is-locked body{overflow:hidden}

/* cross-document page transitions (supporting browsers) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:var(--ease-out)}

/* ---------- accessibility helpers ---------- */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:600;text-decoration:none;transition:top .25s var(--ease-out)}
.skip-link:focus{top:16px;color:#fff}
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* ---------- type ---------- */
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.05;letter-spacing:-.025em;color:inherit;font-optical-sizing:auto;text-wrap:balance}
.h1{font-size:var(--fs-h1);font-weight:800;line-height:.96;letter-spacing:-.04em}
.h2{font-size:var(--fs-h2);font-weight:750;line-height:1;letter-spacing:-.035em}
.h3{font-size:var(--fs-h3);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h1,.h1,h2,.h2{color:var(--navy)}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-2);max-width:36em}
.muted{color:var(--mute)}
.text-teal{color:var(--teal-700)}
.text-sun{color:var(--sun-600)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(var(--wrap-narrow) + 2 * var(--gutter))}
.section{position:relative;padding-block:var(--section-y);overflow-x:clip}
.section--foam{background:var(--foam)}
.section--dark{background:var(--navy-900);color:var(--on-dark)}
.section--dark h1,.section--dark .h1,.section--dark h2,.section--dark .h2,.section--dark h3,.section--dark .h3{color:#fff}
.section--dark .lead{color:var(--on-dark-2)}
.section--dark .muted{color:var(--on-dark-3)}
.section--dark a:not(.btn){color:var(--teal-300)}
.section--dark a:not(.btn):hover{color:#fff}
.section-head{max-width:820px;margin-bottom:clamp(44px,6vw,80px)}
.section-head .h2+.lead{margin-top:clamp(18px,2vw,26px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}

/* ---------- icons & flags ---------- */
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i--fill{fill:currentColor;stroke:none}
.flag{display:inline-block;flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(4,26,54,.14);background:#eee}
.flag svg{width:100%;height:100%}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:transparent;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 28px;border-radius:var(--r-pill);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font:600 16px/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .25s,color .25s,border-color .25s;
}
.btn:hover{color:var(--btn-fg);translate:0 -2px}
.btn:active{translate:0 0;scale:.98}
.btn .i{width:19px;height:19px}
.btn--primary{--btn-bg:var(--sun);--btn-fg:var(--navy);box-shadow:var(--sh-sun)}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);translate:-110% 0;transition:translate .9s var(--ease-out)}
.btn--primary:hover::before{translate:110% 0}
.btn--primary:hover{--btn-bg:#FFC21F}
.btn--dark{--btn-bg:var(--navy);--btn-fg:#fff}
.btn--dark:hover{--btn-bg:var(--navy-600)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bd:var(--navy);--btn-bg:rgba(2,45,91,.04)}
.btn--light{--btn-bg:#fff;--btn-fg:var(--navy)}
.btn--light:hover{--btn-bg:var(--teal-50)}
.btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.32)}
.btn--ghost-light:hover{--btn-bd:#fff;--btn-bg:rgba(255,255,255,.06)}
.btn--wa{--btn-bg:var(--wa);--btn-fg:#04381C}
.btn--wa:hover{--btn-bg:#3BE07A}
.btn--lg{min-height:62px;padding:0 34px;font-size:17px}
.btn--sm{min-height:42px;padding:0 18px;font-size:14.5px;gap:8px}
.btn--sm .i{width:16px;height:16px}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
@media (max-width:480px){.btn--block,.btn--lg{white-space:normal;text-align:center;line-height:1.2;padding-block:14px;height:auto}}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);font:600 13.5px/1.2 var(--f-body);background:var(--foam);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.pill .i{width:15px;height:15px}
.pill--sun{background:var(--sun-100);color:#634500;border-color:#F4D98A}
.pill--teal{background:var(--teal-50);color:var(--teal-700);border-color:var(--teal-100)}
.pill--dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}
.pill--glass{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--sh-lift)}
.live-dot{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:live-ping 2s var(--ease-out) infinite}
/* paused while off-screen (core.js toggles .is-off) */
.live-dot.is-off::after{animation-play-state:paused}
@keyframes live-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.8);opacity:0}}

/* ---------- chips (selectable) ---------- */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:#fff;color:var(--ink-2);font:500 15px/1.1 var(--f-body);cursor:pointer;user-select:none;transition:background-color .25s,border-color .25s,color .25s,scale .35s var(--ease-spring)}
.chip .i{width:17px;height:17px}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip:active{scale:.96}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip[aria-selected="true"],.chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.section--dark .chip{background:transparent;border-color:rgba(255,255,255,.24);color:var(--on-dark-2)}
.section--dark .chip:hover{border-color:#fff;color:#fff}
.section--dark .chip[aria-pressed="true"],.section--dark .chip[aria-checked="true"],.section--dark .chip[aria-selected="true"],.section--dark .chip.is-active{background:#fff;border-color:#fff;color:var(--navy)}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.section--dark .card{background:rgba(255,255,255,.04);border-color:var(--line-dark)}

/* ---------- forms ---------- */
.field{display:grid;gap:8px;min-width:0}
.field__label{font:600 15px/1.35 var(--f-body);color:var(--navy)}
.field__hint{font-size:14px;color:var(--mute)}
.field__error{font-size:14px;font-weight:500;color:var(--err)}
.input,.select,.textarea{width:100%;min-height:56px;padding:15px 18px;border:1.5px solid var(--line-ctl);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:400 16px/1.4 var(--f-body);transition:border-color .2s,box-shadow .25s,background-color .2s;-webkit-appearance:none;appearance:none}
.input::placeholder,.textarea::placeholder{color:var(--mute);opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--navy-600)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--teal-700);box-shadow:0 0 0 2px var(--teal-700)}
.select{padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022D5B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px;cursor:pointer}
.textarea{min-height:128px;resize:vertical}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--err);box-shadow:0 0 0 4px rgba(201,56,56,.12)}
.check{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:0;border:1.5px solid var(--line-ctl);border-radius:6px;background:#fff;-webkit-appearance:none;appearance:none;display:grid;place-content:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.check input::after{content:"";width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .3s var(--ease-spring)}
.check input:checked{background:var(--navy);border-color:var(--navy)}
.check input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}

/* toggle switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;color:var(--navy);user-select:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.switch__track{position:relative;flex:none;width:54px;height:32px;border-radius:var(--r-pill);background:var(--line-ctl);transition:background-color .3s}
.switch__track::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(4,26,54,.25);transition:translate .45s var(--ease-spring)}
.switch input:checked+.switch__track{background:var(--teal-700)}
.switch input:checked+.switch__track::after{translate:22px 0}
.switch input:focus-visible+.switch__track{outline:3px solid var(--teal-700);outline-offset:3px}

/* ---------- device frames ---------- */
.browser{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid rgba(4,26,54,.1);box-shadow:var(--sh-float)}
.browser__bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:#F2F5F6;border-bottom:1px solid var(--line)}
.browser__dots{display:flex;gap:7px;flex:none}
.browser__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#D5DDE0}
.browser__dots i:nth-child(1){background:#FF6159}
.browser__dots i:nth-child(2){background:#FFBD2E}
.browser__dots i:nth-child(3){background:#28C941}
.browser__url{flex:1;min-width:0;max-width:360px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid var(--line);font:500 12.5px/1 var(--f-body);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__url .i{width:12px;height:12px;color:var(--ok);stroke-width:2.4}
.browser__body{position:relative;overflow:hidden}
.phone{--ph-w:250px;position:relative;width:var(--ph-w);aspect-ratio:9/19.2;border-radius:calc(var(--ph-w) * .16);background:#0A1324;padding:calc(var(--ph-w) * .034);box-shadow:var(--sh-float),inset 0 0 0 1.5px rgba(255,255,255,.1)}
.phone__screen{position:relative;width:100%;height:100%;border-radius:calc(var(--ph-w) * .128);overflow:hidden;background:#fff}
.phone__notch{position:absolute;z-index:5;top:calc(var(--ph-w) * .03);left:50%;translate:-50% 0;width:30%;height:calc(var(--ph-w) * .072);border-radius:var(--r-pill);background:#0A1324}

/* ---------- decor ---------- */
.glow{position:absolute;pointer-events:none;border-radius:50%;z-index:0}
.glow--sun{background:radial-gradient(closest-side,rgba(252,185,0,.32),rgba(252,185,0,.1) 55%,transparent)}
.glow--teal{background:radial-gradient(closest-side,rgba(12,165,181,.26),rgba(12,165,181,.08) 55%,transparent)}
.wave-sep{position:absolute;left:0;width:100%;height:clamp(36px,5vw,80px);pointer-events:none;fill:currentColor}

/* ---------- motion states (see core.js) ---------- */
.js:not(.no-motion) [data-reveal]:not(.is-in){opacity:0}
.js:not(.no-motion) [data-reveal-group]:not(.is-in)>*{opacity:0}
.js:not(.no-motion) [data-split]:not(.is-split){opacity:0}
.split-line-mask{padding-bottom:.1em;margin-bottom:-.1em}
.i18n-pending body{opacity:0}
/* visitor paused animations (core.js CSW.setMotionPaused) */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
body{transition:opacity .2s ease}


/* ==========================================================================
   chrome
   ========================================================================== */
/* Site chrome: header (hd-), mobile menu (mm-), footer (ftr-), floating WhatsApp (wa-), 404 page (nf-).
   Layers: header 100, mobile menu 95, floating WhatsApp 90, footer 3 (its wave edge overlaps the section above). */

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);color:var(--navy);transition:height .4s var(--ease-out),transform .45s var(--ease-out)}
.hd::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:inset 0 -1px 0 rgba(4,26,54,.09);opacity:0;transition:opacity .35s var(--ease-out) .08s}
.is-scrolled .hd::before,.page .hd::before{opacity:1}
.is-scrolled .hd{height:64px}
html.mm-open .hd::before{opacity:0;transition-delay:.3s}
html.mm-open .hd :focus-visible{outline-color:var(--sun)}
@media (max-width:1023.98px){
  html.is-scrolling-down:not(.mm-open) .hd{transform:translate3d(0,-100%,0)}
  html.is-scrolling-down .hd:has(:focus-visible){transform:none}
}

.hd-bar{position:relative;height:100%;display:flex;align-items:center;gap:12px}

.hd-logo{position:relative;flex:none;display:block;border-radius:8px;transform-origin:0 50%;transition:transform .4s var(--ease-out)}
.hd-logo__img{display:block;width:auto;height:36px;transition:opacity .3s var(--ease-out) .08s}
.hd-logo__img--light{position:absolute;top:0;left:0;opacity:0}
.mm-open .hd-logo__img{opacity:0;transition-delay:.3s}
.mm-open .hd-logo__img--light{opacity:1}
.is-scrolled .hd-logo{transform:scale(.92)}

/* desktop nav with the sliding wave */
.hd-nav{display:none}
.hd-nav__list{display:flex;align-items:center;list-style:none}
.hd-nav__link{display:inline-flex;align-items:center;min-height:44px;padding:0 clamp(9px,.95vw,15px);border-radius:var(--r-pill);color:var(--ink-2);font:500 15.5px/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:color .25s}
.hd-nav__link:hover,.hd-nav__link[aria-current="true"]{color:var(--navy)}
.hd-nav__wave{position:absolute;left:0;bottom:1px;width:28px;height:8px;fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.is-ready:not(.no-motion) .hd-nav__wave{transition:opacity .3s var(--ease-out),transform .6s var(--ease-out)}
.is-ready:not(.no-motion) .hd-nav__wave--jump{transition:opacity .3s var(--ease-out)}
.hd-nav__wave--on{opacity:1}

.hd-end{display:flex;align-items:center;gap:6px;margin-left:auto}
.hd-lang{transition:opacity .3s var(--ease-out) .1s,visibility 0s linear 0s}
.hd-cta{transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .25s,color .25s,opacity .3s var(--ease-out) .1s,visibility 0s linear 0s}
.mm-open .hd-lang,.mm-open .hd-cta{opacity:0;visibility:hidden;transition:opacity .2s var(--ease-out),visibility 0s linear .2s}

/* language flags: the ring slides to the active one */
.hd-lang{position:relative;display:flex;flex:none}
.hd-lang__btn{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.hd-lang__btn .flag{width:26px;height:26px;transition:opacity .3s,filter .3s,transform .45s var(--ease-spring)}
.hd-lang__btn[aria-pressed="false"] .flag{opacity:.78;transform:scale(.88)}
.hd-lang__btn:hover .flag{opacity:1;filter:none;transform:scale(1.08)}
.hd-lang__ring{position:absolute;top:4px;left:4px;width:36px;height:36px;border:2px solid var(--teal-700);border-radius:50%;pointer-events:none}
.is-ready .hd-lang__ring{transition:transform .55s var(--ease-spring)}
html[lang="es"] .hd-lang__ring{transform:translateX(44px)}

.hd-cta{display:none}
.mm-open .hd-cta{transition:translate .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .25s,color .25s,opacity .2s var(--ease-out),visibility 0s linear .2s}

/* burger that morphs into an X */
.hd-burger{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;margin-right:-8px;border-radius:12px;color:var(--navy);transition:color .3s var(--ease-out) .08s}
.mm-open .hd-burger{color:#fff;transition-delay:.3s}
.hd-burger__lines{position:relative;display:block;width:22px;height:14px}
.hd-burger__lines i{position:absolute;left:0;display:block;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease-out),opacity .25s var(--ease-out)}
.hd-burger__lines i:nth-child(1){top:0}
.hd-burger__lines i:nth-child(2){top:6px}
.hd-burger__lines i:nth-child(3){top:12px}
.mm-open .hd-burger__lines i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm-open .hd-burger__lines i:nth-child(2){opacity:0;transform:scaleX(.2)}
.mm-open .hd-burger__lines i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
html:not(.js) .hd-burger{display:none}

/* reading progress along the bottom edge */
.hd-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;transition:opacity .3s}
.mm-open .hd-progress{opacity:0}

@media (min-width:480px){
  .hd-end{gap:10px}
  .hd-cta{display:inline-flex}
}
@media (min-width:1024px){
  .hd-logo__img{height:44px}
  .hd-nav{position:relative;display:block;margin-inline:auto}
  .hd-end{margin-left:0;gap:12px}
  .hd-burger{display:none}
}
@media (min-width:1200px){
  .hd-nav{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}
  .hd-end{margin-left:auto}
}

/* ---------- mobile menu ---------- */
.mm{position:fixed;inset:0;z-index:95;background:var(--navy-900);color:#fff}
.mm-crest{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(28px,6vw,56px);fill:var(--navy-900);pointer-events:none}
.mm-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mm-inner{min-height:100%;display:flex;flex-direction:column;padding-top:calc(var(--header-h) + 16px);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.mm-list{list-style:none}
.mm-link{display:inline-flex;align-items:center;gap:.3em;padding:.12em 0;color:#fff;font-family:var(--f-display);font-weight:700;font-size:clamp(34px,10vw,64px);font-size:clamp(32px,min(10vw,6.3svh),64px);line-height:1.04;letter-spacing:-.035em;text-decoration:none;font-optical-sizing:auto;transition:color .25s}
.mm-link:hover{color:var(--teal-300)}
.mm-link::after{content:"";flex:none;width:.6em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none' stroke='%2376D2DB' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M1.5 4.5Q4.75 1 8 4.5T14.5 4.5T21 4.5T26.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:translateX(-.25em);transition:opacity .3s var(--ease-out),transform .45s var(--ease-out)}
.mm-link[aria-current="true"]{color:var(--teal-300)}
.mm-link[aria-current="true"]::after{opacity:1;transform:none}

.mm-waves{position:relative;flex:none;height:50px;margin:auto calc(var(--gutter) * -1) clamp(14px,2.6svh,28px);padding-top:clamp(16px,3svh,32px);overflow:hidden;box-sizing:content-box}
.mm-waves__line{position:absolute;left:0;width:200%;max-width:none;height:22px;fill:none;stroke:var(--teal-300);stroke-width:2;stroke-linecap:round}
.mm-waves__line path{vector-effect:non-scaling-stroke}
.mm-waves__line--1{bottom:28px;opacity:.6}
.mm-waves__line--2{bottom:14px;opacity:.36}
.mm-waves__line--3{bottom:0;opacity:.2}

.mm-side{display:grid;gap:14px;width:100%;max-width:520px}
.mm-lang{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--line-dark);border-radius:var(--r-pill);background:rgba(255,255,255,.05)}
.mm-lang__btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:var(--r-pill);color:var(--on-dark-2);font:600 16px/1 var(--f-body);transition:color .35s var(--ease-out)}
.mm-lang__btn:hover{color:#fff}
.mm-lang__btn[aria-pressed="true"]{color:var(--navy)}
.mm-lang__btn .flag{width:24px;height:24px;box-shadow:0 0 0 1.5px rgba(255,255,255,.2)}
.mm-lang__btn[aria-pressed="true"] .flag{box-shadow:0 0 0 1.5px rgba(4,26,54,.14)}
.mm-lang__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--r-pill);background:#fff;pointer-events:none}
.is-ready .mm-lang__thumb{transition:transform .55s var(--ease-spring)}
html[lang="es"] .mm-lang__thumb{transform:translateX(100%)}

.mm-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none}
.mm-contact__link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:66px;padding:8px 4px;border:1px solid var(--line-dark);border-radius:var(--r);color:#fff;font:600 14.5px/1.1 var(--f-body);text-align:center;text-decoration:none;transition:background-color .25s,border-color .25s}
.mm-contact__link:hover{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.mm-contact__link .i{width:22px;height:22px;color:var(--teal-300)}
.mm-contact__link--wa .i{color:var(--wa)}
.mm-note{font-size:14px;color:var(--on-dark-3)}

/* entrance: the panel rises like the tide, then the links stagger in */
.is-ready:not(.no-motion) .mm{transform:translate3d(0,calc(100% + 64px),0);transition:transform .55s var(--ease-in-out)}
.is-ready.mm-open:not(.no-motion) .mm{transform:none;transition:transform .8s var(--ease-out)}
.is-ready:not(.no-motion) .mm-item,.is-ready:not(.no-motion) .mm-waves,.is-ready:not(.no-motion) .mm-side{opacity:0;transform:translate3d(0,28px,0);transition:opacity .2s var(--ease-out),transform .4s var(--ease-out)}
.is-ready.mm-open:not(.no-motion) .mm-item{opacity:1;transform:none;transition:opacity .6s var(--ease-out) calc(.2s + var(--i,0) * .055s),transform .9s var(--ease-out) calc(.2s + var(--i,0) * .055s)}
.is-ready.mm-open:not(.no-motion) .mm-waves{opacity:1;transform:none;transition:opacity .9s var(--ease-out) .42s,transform 1s var(--ease-out) .42s}
.is-ready.mm-open:not(.no-motion) .mm-side{opacity:1;transform:none;transition:opacity .7s var(--ease-out) .5s,transform .9s var(--ease-out) .5s}
.is-ready.mm-open:not(.no-motion) .mm-waves__line--1{animation:mm-drift 26s linear infinite}
.is-ready.mm-open:not(.no-motion) .mm-waves__line--2{animation:mm-drift 34s linear infinite reverse}
.is-ready.mm-open:not(.no-motion) .mm-waves__line--3{animation:mm-drift 44s linear infinite}
@keyframes mm-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (max-height:640px){
  .mm-waves{height:34px}
  .mm-note{display:none}
}
@media (min-width:640px){
  .mm-inner{padding-top:calc(var(--header-h) + 40px)}
}
@media (min-width:1024px){
  .mm{display:none!important}
}

/* ---------- footer ---------- */
.ftr{position:relative;z-index:3;background:var(--navy-900);color:var(--on-dark-2)}
.ftr-edge{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(44px,6.5vw,104px);overflow:hidden;pointer-events:none}
.ftr-edge__layer{position:absolute;inset:0;width:100%;height:100%}
.ftr-edge__layer--back{fill:var(--teal)}
.ftr-edge__layer--front{fill:var(--navy-900)}

.ftr-cta{display:grid;gap:clamp(28px,4vw,48px);padding-block:clamp(40px,6vw,96px) clamp(56px,7vw,104px)}
.ftr .ftr-cta__title{max-width:9.5em;color:#fff;font-size:clamp(50px,8.4vw,128px);font-weight:800;line-height:.94;letter-spacing:-.045em}
.ftr-cta__line{max-width:30em;margin-top:clamp(16px,2vw,26px);font-size:var(--fs-lg);line-height:1.5;color:var(--on-dark-2)}
.ftr-cta__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,40px)}
.ftr-scene{order:-1;width:100%;aspect-ratio:520/220}
.ftr-scene svg{width:100%;height:100%}

.ftr-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"brand brand" "contact contact" "explore legal";gap:40px 24px;padding-block:clamp(44px,5vw,64px);border-top:1px solid var(--line-dark)}
.ftr-brand{grid-area:brand}
.ftr-col--explore{grid-area:explore}
.ftr-col--contact{grid-area:contact}
.ftr-col--legal{grid-area:legal}
.ftr-logo{display:inline-block;border-radius:8px}
.ftr-logo img{width:auto;height:clamp(50px,4.6vw,60px)}
.ftr-tagline{max-width:24ch;margin-top:16px;color:var(--on-dark-2)}
.ftr .ftr-col__title{margin-bottom:8px;color:#fff;font:600 15px/1.3 var(--f-body);letter-spacing:0}
.ftr-links{list-style:none}
.ftr-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--on-dark-2);font-size:16px;line-height:1.3;text-decoration:none;transition:color .25s}
.ftr-link:hover{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.ftr-link .i{width:18px;height:18px;color:var(--teal-300)}
.ftr-link--wa .i{color:var(--wa)}
.ftr-area{display:flex;gap:10px;max-width:30ch;margin-top:10px;font-size:15px;line-height:1.45;color:var(--on-dark-3)}
.ftr-area .i{width:18px;height:18px;margin-top:2px}

.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:22px calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--line-dark);font-size:14px;color:var(--on-dark-3)}

@media (max-width:559.98px){
  .ftr-cta__actions .btn{width:100%}
}
@media (min-width:768px){
  .ftr-main{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.8fr);grid-template-areas:"brand brand brand" "explore contact legal"}
}
@media (min-width:900px){
  .ftr-cta{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .ftr-scene{order:0;align-self:center;aspect-ratio:2/1}
}
@media (min-width:1100px){
  .ftr-main{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.7fr);grid-template-areas:"brand explore contact legal"}
}

/* ---------- floating WhatsApp ---------- */
.wa{position:fixed;z-index:90;right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));display:flex;flex-direction:column;align-items:flex-end;gap:12px;transform-origin:100% 100%;pointer-events:none}
.wa>*{pointer-events:auto}
.wa-armed .wa{transition:opacity .45s var(--ease-out),transform .6s var(--ease-spring),visibility 0s linear 0s}
.wa-armed .wa:not(.wa--shown),.mm-open .wa{opacity:0;visibility:hidden;transform:translate3d(0,20px,0) scale(.85);transition:opacity .25s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .35s}

.wa-btn{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#04381C;text-decoration:none;box-shadow:0 16px 30px -14px rgba(4,56,28,.6),0 6px 16px -8px rgba(4,26,54,.3);transition:transform .45s var(--ease-spring),background-color .25s}
.wa-btn:hover{color:#04381C;background:#3BE07A;transform:scale(1.07)}
.wa-btn:active{transform:scale(.96)}
.wa-btn .i{width:30px;height:30px}
.wa-btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 16px 30px -14px rgba(4,56,28,.6)}
.wa-btn::after{content:"";position:absolute;inset:0;border:2px solid var(--wa);border-radius:50%;opacity:0;pointer-events:none}
.is-ready:not(.no-motion) .wa--bubble .wa-btn::after{animation:wa-ping 1.8s var(--ease-out) .3s 2}
@keyframes wa-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}

.wa-bubble{position:relative;max-width:min(256px,calc(100vw - 32px));padding:13px 46px 13px 16px;border:1px solid var(--line);border-radius:18px 18px 6px 18px;background:#fff;color:var(--navy);box-shadow:var(--sh-float);cursor:pointer;visibility:hidden;opacity:0;transform:translate3d(0,10px,0) scale(.92);transform-origin:100% 100%;transition:opacity .25s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .3s}
.wa--bubble .wa-bubble{visibility:inherit;opacity:1;transform:none;transition:opacity .4s var(--ease-out),transform .6s var(--ease-spring),visibility 0s linear 0s}
.wa-bubble__text{font:600 15px/1.35 var(--f-body)}
.wa-bubble__close{position:absolute;top:0;right:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--mute);transition:color .2s}
.wa-bubble__close:hover{color:var(--navy)}
.wa-bubble__close .i{width:18px;height:18px}

@media (min-width:768px){
  .wa{right:max(28px,calc(env(safe-area-inset-right) + 16px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px))}
}

/* ---------- 404 ---------- */
.nf{position:relative;background:var(--paper)}
.nf-stage{--nf-f:clamp(150px,36vw,440px);position:relative;overflow:hidden;padding-top:calc(var(--header-h) + clamp(20px,5vw,64px));padding-bottom:calc(var(--nf-f) * .12)}
.nf .nf-glow{top:-24%;right:-20%;width:min(96vw,860px);aspect-ratio:1}
.nf-code-wrap{position:relative;z-index:2}
.nf-code{display:flex;color:var(--navy);font-family:var(--f-display);font-size:var(--nf-f);font-weight:800;line-height:.8;letter-spacing:-.06em;font-optical-sizing:auto;user-select:none}
.nf-digit{display:block;transform-origin:50% 85%}
.nf-sea{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nf-f) * .5);overflow:hidden;pointer-events:none}
.nf-sea--back{z-index:1}
.nf-sea--front{z-index:3}
.nf-wave{position:absolute;left:0;bottom:0;width:200%;height:100%;max-width:none}
.nf-wave--back{fill:var(--teal-300);opacity:.55}
.nf-wave--mid{fill:var(--teal)}
.nf-wave--near{fill:var(--foam)}

.nf-body{position:relative;margin-top:-1px;padding-block:clamp(8px,2vw,24px) clamp(108px,12vw,180px);background:var(--foam)}
.nf-grid{display:grid;gap:20px 64px}
.nf .nf-title{max-width:11em;color:var(--navy);font-size:clamp(38px,5.6vw,80px);font-weight:800;line-height:1;letter-spacing:-.04em}
.nf-line{max-width:28em;font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2)}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* the digits surface, then bob; the sea drifts (motion only, paused off-screen) */
.js:not(.no-motion):not(.is-ready) .nf-digit{opacity:0}
.is-ready:not(.no-motion) .nf-digit{animation:nf-rise 1.3s var(--ease-out) both,nf-bob-a 5.6s ease-in-out 1.3s infinite alternate}
.is-ready:not(.no-motion) .nf-digit:nth-child(2){animation-name:nf-rise,nf-bob-b;animation-duration:1.3s,6.4s;animation-delay:.1s,1.4s}
.is-ready:not(.no-motion) .nf-digit:nth-child(3){animation-duration:1.3s,5.9s;animation-delay:.2s,1.5s}
.is-ready:not(.no-motion) .nf-wave--back{animation:nf-drift 36s linear infinite}
.is-ready:not(.no-motion) .nf-wave--mid{animation:nf-drift 26s linear infinite reverse}
.is-ready:not(.no-motion) .nf-wave--near{animation:nf-drift 44s linear infinite}
.is-ready .nf.nf--paused .nf-digit,.is-ready .nf.nf--paused .nf-wave{animation-play-state:paused}
@keyframes nf-rise{from{opacity:0;transform:translate3d(0,46%,0) rotate(6deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
@keyframes nf-bob-a{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,4%,0) rotate(-2.5deg)}}
@keyframes nf-bob-b{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,5%,0) rotate(2deg)}}
@keyframes nf-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (max-width:479.98px){
  .nf-actions .btn{flex:1 1 100%}
}
@media (min-width:900px){
  .nf-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end}
}


/* ==========================================================================
   hero
   ========================================================================== */
/* hero: headline, free-preview promise and the demo site that builds itself */
.section.sec-hero{
  padding-top:calc(var(--header-h) + clamp(28px,5.5vw,76px));
  padding-bottom:0;
  background:var(--paper);
  overflow:clip;
}
.sec-hero .hero-glow{top:calc(-1 * min(420px,46vw));right:calc(-1 * min(360px,42vw));width:min(1040px,150vw);aspect-ratio:1}
.sec-hero .hero-defs{position:absolute;width:0;height:0;overflow:hidden}

.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(44px,8vw,64px)}
.hero-copy{min-width:0}
.sec-hero .hero-title{font-size:clamp(44px,11.2vw,74px);max-width:11.5em}
.sec-hero .hero-lead{margin-top:clamp(20px,2.4vw,28px);max-width:34em}

.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(28px,3.2vw,38px)}
.hero-mag{display:inline-flex}
.hero-assure{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:clamp(22px,2.6vw,30px);list-style:none}
.hero-assure li{display:inline-flex;align-items:center;gap:10px;font:500 15.5px/1.3 var(--f-body);color:var(--ink-2)}
.hero-assure__ic{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal-100);color:var(--teal-700)}
.hero-assure__ic .i{width:14px;height:14px;stroke-width:3}

@media (max-width:519px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-mag,.hero-mag .btn,.hero-ctas>.btn{display:flex;width:100%}
  .hero-assure{flex-direction:column;gap:12px}
}

/* ---------- stage: computer + phone ---------- */
.hero-stage{position:relative;min-width:0}
.hero-devices{
  --s-dark:#0F4A33;--s-accent:#FCB900;--s-accent-ink:#2B2100;--s-soft:#EEF6F1;
  position:relative;container-type:inline-size;padding-bottom:42%;
}
.sec-hero .hero-browser{width:88%;transform-origin:50% 100%}
.sec-hero .hero-browser .browser__bar{gap:10px;padding:0 10px 0 14px}
.sec-hero .hero-browser .browser__url{max-width:300px}
.sec-hero .hero-tag{flex:none;padding:4px 10px;font-size:12px}
.hero-phone{position:absolute;z-index:2;right:0;bottom:0}
.sec-hero .hero-phone{--ph-w:36cqi}

@media (max-width:419px){
  .sec-hero .hero-browser .browser__dots{display:none}
}
@media (min-width:640px){
  .hero-devices{padding-bottom:18%}
  .sec-hero .hero-browser{width:86%}
  .sec-hero .hero-phone{--ph-w:25cqi}
}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:clamp(40px,4.5vw,80px);align-items:center}
  .sec-hero .hero-title{font-size:clamp(58px,5.7vw,96px)}
  .hero-stage{margin-right:calc(-1 * clamp(0px,3.2vw,60px))}
  .hero-devices{padding-bottom:15%}
  .sec-hero .hero-phone{--ph-w:23cqi}
}

/* ---------- the demo site inside the computer ----------
   A shared frame (nav, footer) around a main area that each business lays out its own way;
   hero.js rebuilds it from SITE[key]. Sizes are em of the screen width, so it all scales as one. */
.hero-screen{container-type:inline-size;container-name:hero-screen;background:#fff}
.hero-site,.hero-wire{font:500 max(6.6px,1.6cqi)/1.3 var(--f-body)}
.hero-site{position:relative;color:#1D2733;background:#fff}
.hero-site b{font-weight:inherit}

.hero-s-nav{display:flex;align-items:center;gap:1.5em;height:4em;padding:0 1.8em;border-bottom:1px solid rgba(15,36,64,.07)}
.hero-s-logo{display:flex;align-items:center;gap:.6em;flex:none}
.hero-s-mark{display:block;flex:none;width:1.5em;height:1.5em;border-radius:50%;background:var(--s-accent);box-shadow:inset 0 0 0 .28em var(--s-dark)}
.hero-s-name{font:800 1.3em/1 var(--f-display);letter-spacing:-.02em;color:var(--s-dark);white-space:nowrap}
.hero-s-links{display:flex;gap:1.5em;min-width:0;margin-left:auto;overflow:hidden;color:#5A6472;white-space:nowrap}
.hero-s-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;height:2.5em;padding:0 1.15em;border-radius:99em;font-size:.95em;font-weight:700;white-space:nowrap}
.hero-s-btn--nav,.hero-s-btn--dark{background:var(--s-dark);color:#fff}
.hero-s-btn--acc{background:var(--s-accent);color:var(--s-accent-ink)}
.hero-s-btn--line{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.hero-s-btn--ghost{color:var(--s-dark);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-dark) 35%,transparent)}
.hero-s-btn--block{width:100%;height:2.8em;background:var(--s-dark);color:#fff}

.hero-s-main{display:grid;gap:1.1em;height:28.7em;padding:1.2em;overflow:hidden}
.hero-s-main>*{min-width:0;min-height:0}
.hero-s-card{position:relative;border-radius:1em;background:var(--s-soft);border:1px solid rgba(15,36,64,.06);overflow:hidden}
.hero-s-title{display:block;font:700 1.08em/1.2 var(--f-display);letter-spacing:-.01em;color:#16202C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-stars{display:inline-flex;gap:.1em;color:#F2A900}
.hero-stars .i{width:1em;height:1em}

/* the dark hero panel (bar, laundry, venue) */
.hero-s-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:1em;padding:1.8em 2em;border-radius:1.3em;background:var(--s-dark);color:#fff;overflow:hidden}
.hero-s-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 95% at 88% 8%,color-mix(in srgb,var(--s-accent) 34%,transparent),transparent 72%)}
.hero-s-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-s-h{display:block;max-height:3.12em;overflow:hidden;font:800 2.4em/1.04 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.hero-s-sub{margin-top:.7em;font-size:1.1em;color:rgba(255,255,255,.84);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-s-ctas{display:flex;gap:.6em;margin-top:1.3em}
.hero-s-art{position:relative;min-width:0}
.hero-ill{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible;transform-origin:50% 60%}
.hero-ill.is-on{opacity:1}

/* map with a pin (bar, both screens) */
.hero-map{position:absolute;inset:0;width:100%;height:100%}
.hero-pin{position:absolute;left:54%;top:34%;width:2.1em;height:2.1em;margin:-1.05em 0 0 -1.05em;border-radius:50% 50% 50% 0;background:var(--s-dark);rotate:-45deg;box-shadow:-.15em .3em .6em -.2em rgba(15,36,64,.45)}
.hero-pin::after{content:"";position:absolute;inset:.55em;border-radius:50%;background:var(--s-accent)}
.hero-map-tag{position:absolute;left:.8em;bottom:.8em;display:grid;gap:.15em;max-width:calc(100% - 1.6em);padding:.5em .75em;border-radius:.6em;background:#fff;box-shadow:0 .3em .8em -.4em rgba(15,36,64,.35);font-size:.9em;line-height:1.2;white-space:nowrap}
.hero-map-tag b{font-weight:700;color:var(--s-dark)}
.hero-map-tag span{overflow:hidden;text-overflow:ellipsis;color:#56616F}

/* sports bar: hero, this week's matches, and where to find it */
.hero-site[data-biz="bar"] .hero-s-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:15.2em minmax(0,1fr)}
.hero-site[data-biz="bar"] .hero-s-hero{grid-column:1/-1}
.hero-s-fix{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto repeat(3,minmax(0,1fr));padding:.85em 1.2em .3em}
.hero-s-fix .hero-s-title{margin-bottom:.3em}
.hero-s-fix__row{display:grid;grid-template-columns:5.8em minmax(0,1fr) auto;align-items:center;gap:.8em;border-top:1px solid rgba(15,36,64,.08)}
.hero-s-fix__when{font-size:.92em;font-weight:700;color:var(--s-dark);white-space:nowrap}
.hero-s-fix__what{font:700 1.05em/1.15 var(--f-display);color:#16202C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-s-fix__where{font-size:.88em;color:#56616F;white-space:nowrap}
.hero-s-map{background:#EEF2EA}

/* café: light intro with its rating, a tall photo with a review on it, and the menu */
.hero-site[data-biz="cafe"] .hero-s-main{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:minmax(0,1fr) 10.2em}
.hero-s-intro{display:flex;flex-direction:column;justify-content:center;padding:0 .8em;overflow:hidden}
.hero-s-intro .hero-s-h{color:var(--s-dark)}
.hero-s-intro .hero-s-sub{color:#5A6472}
.hero-s-rate{display:flex;align-items:center;gap:.45em;margin-bottom:1.1em;font-size:.95em;color:#56616F;white-space:nowrap}
.hero-s-rate b{font-weight:800;color:#16202C}
.hero-s-rate span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hero-s-photo{grid-column:2;grid-row:1/-1;position:relative;isolation:isolate;border-radius:1.3em;background:var(--s-dark);overflow:hidden}
.hero-s-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(75% 55% at 68% 22%,color-mix(in srgb,var(--s-accent) 40%,transparent),transparent 72%)}
.hero-s-photo .hero-s-art{position:absolute;left:10%;right:10%;top:7%;height:54%}
.hero-s-review{position:absolute;left:1em;right:1em;bottom:1em;display:grid;gap:.5em;padding:1em 1.1em;border-radius:.9em;background:#fff;box-shadow:0 .5em 1.2em -.6em rgba(0,0,0,.45)}
.hero-s-review p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:650 1.02em/1.3 var(--f-display);color:#16202C}
.hero-s-review__who{display:flex;align-items:center;gap:.5em;min-width:0;font-size:.88em;color:#56616F;white-space:nowrap}
.hero-s-review__who i{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:50%;background:var(--s-soft);color:var(--s-dark);font-style:normal;font-weight:800}
.hero-s-review__who b{font-weight:700;color:#16202C}
.hero-s-menu{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto repeat(3,minmax(0,1fr));padding:.85em 1.2em .3em}
.hero-s-menu__row{display:flex;align-items:center;gap:.7em;min-width:0}
.hero-s-menu__row b{min-width:0;overflow:hidden;font-weight:700;color:#16202C;white-space:nowrap;text-overflow:ellipsis}
.hero-s-menu__dots{flex:1;min-width:1em;margin-top:.55em;border-bottom:.16em dotted rgba(15,36,64,.25)}
.hero-s-menu__price{flex:none;font-weight:800;color:var(--s-dark)}
.hero-dish{flex:none;width:2.1em;height:2.1em;border-radius:50%;background:radial-gradient(circle,var(--d) 0 52%,#fff 54% 100%);box-shadow:0 0 0 1px rgba(15,36,64,.08),0 .3em .6em -.3em rgba(15,36,64,.3)}

/* laundry: hero, a pick-up booking form, and how it works */
.hero-site[data-biz="laundry"] .hero-s-main{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 8.6em}
.hero-site[data-biz="laundry"] .hero-s-hero{grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr)}
.hero-site[data-biz="laundry"] .hero-s-h{font-size:2.15em}
.hero-s-book{grid-column:2;grid-row:1/-1;display:flex;flex-direction:column;gap:.8em;padding:1.3em 1.3em 1.1em;border-radius:1.1em;background:#fff;border:1px solid rgba(15,36,64,.1);box-shadow:0 .8em 1.8em -1em rgba(15,36,64,.35);overflow:hidden}
.hero-s-field{display:grid;gap:.35em;min-width:0}
.hero-s-field__l{font-size:.85em;font-weight:700;color:#56616F}
.hero-s-field__v{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 .8em;border-radius:.6em;border:1px solid rgba(15,36,64,.14);background:#F8FAFB;white-space:nowrap;overflow:hidden}
.hero-s-field__v .i{width:1.1em;height:1.1em;color:var(--s-dark)}
.hero-s-days{display:flex;gap:.4em;min-width:0}
.hero-s-day{flex:1;display:grid;place-items:center;min-width:0;height:2.4em;padding:0 .4em;border-radius:99em;border:1px solid rgba(15,36,64,.14);font-size:.92em;font-weight:700;white-space:nowrap;overflow:hidden}
.hero-s-day.is-on{background:var(--s-dark);border-color:var(--s-dark);color:#fff}
.hero-s-book .hero-s-btn--block{margin-top:auto}
.hero-s-book__area{display:flex;align-items:flex-start;gap:.45em;font-size:.85em;line-height:1.3;color:#56616F}
.hero-s-book__area .i{flex:none;width:1.2em;height:1.2em;color:var(--s-dark)}
.hero-s-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8em;padding:1em 1.2em}
.hero-s-step{display:grid;align-content:center;gap:.25em;min-width:0;overflow:hidden}
.hero-s-step__n{position:relative;display:grid;place-items:center;width:1.9em;height:1.9em;margin-bottom:.3em;border-radius:50%;background:var(--s-dark);color:#fff;font-size:.95em;font-weight:700}
.hero-s-step:not(:last-child) .hero-s-step__n::after{content:"";position:absolute;left:calc(100% + .5em);top:50%;width:100em;border-top:.14em dashed color-mix(in srgb,var(--s-dark) 35%,transparent)}
.hero-s-step b{font:700 1.05em/1.15 var(--f-display);color:#16202C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-s-step span:last-child{font-size:.9em;color:#56616F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* music venue: a poster hero and the next three gigs as tickets */
.hero-site[data-biz="venue"] .hero-s-main{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 8.8em}
.hero-site[data-biz="venue"] .hero-s-hero{grid-column:1/-1;grid-template-columns:minmax(0,1fr);place-items:center;text-align:center}
.hero-site[data-biz="venue"] .hero-s-hero::before{background:radial-gradient(55% 110% at 50% 0,color-mix(in srgb,var(--s-accent) 42%,transparent),transparent 75%)}
.hero-site[data-biz="venue"] .hero-s-copy{align-items:center;max-width:34em}
.hero-site[data-biz="venue"] .hero-s-h{font-size:2.6em}
.hero-site[data-biz="venue"] .hero-s-art{position:absolute;inset:0;z-index:-1;opacity:.32}
.hero-s-gig{position:relative;display:grid;grid-template-columns:4.8em minmax(0,1fr);border-radius:1em;background:var(--s-soft);border:1px solid rgba(15,36,64,.06);overflow:hidden}
.hero-s-gig::before,.hero-s-gig::after{content:"";position:absolute;z-index:1;left:4.8em;width:1.1em;height:1.1em;margin-left:-.55em;border-radius:50%;background:#fff}
.hero-s-gig::before{top:-.55em}
.hero-s-gig::after{bottom:-.55em}
.hero-s-gig__date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;background:var(--s-dark);color:#fff;border-right:.14em dashed rgba(255,255,255,.4)}
.hero-s-gig__date span{font-size:.78em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.hero-s-gig__date b{font:800 2.1em/1 var(--f-display)}
.hero-s-gig__info{display:flex;flex-direction:column;justify-content:center;gap:.25em;min-width:0;padding:.6em .9em}
.hero-s-gig__time{font-size:.88em;font-weight:700;color:var(--s-accent)}
.hero-s-gig__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:700 1.08em/1.15 var(--f-display);color:#16202C}
.hero-s-gig__foot{display:flex;align-items:center;gap:.5em;white-space:nowrap}
.hero-s-gig__price{font-weight:800;color:var(--s-dark)}
.hero-s-gig__tag{padding:.2em .6em;border-radius:99em;background:var(--s-accent);color:var(--s-accent-ink);font-size:.78em;font-weight:700}
.hero-s-gig.is-out .hero-s-gig__tag{background:#E4E7EB;color:#56616F}
.hero-s-gig.is-out .hero-s-gig__price{color:#8A939D;text-decoration:line-through}

.hero-s-foot{display:flex;align-items:center;justify-content:space-between;gap:1em;height:3.4em;padding:0 1.8em;border-top:1px solid rgba(15,36,64,.07);color:#3E4A58}
.hero-s-open{display:flex;align-items:center;gap:.65em;min-width:0;white-space:nowrap;overflow:hidden}
.hero-s-open .live-dot,.hero-m-open .live-dot{width:.75em;height:.75em}
.hero-s-wa{display:inline-flex;align-items:center;gap:.4em;flex:none;height:2.3em;padding:0 1em;border-radius:99em;background:var(--wa);color:#04381C;font-size:.92em;font-weight:700}
.hero-s-wa .i{width:1.2em;height:1.2em}

/* phones: the browser is narrower than its em layout and the phone covers its right side */
@container hero-screen (max-width:440px){
  .hero-s-link:nth-child(3),.hero-s-btn--line,.hero-s-btn--ghost,.hero-s-fix__where{display:none}
  .hero-site[data-biz="cafe"] .hero-s-h{font-size:2.1em}
  .hero-site[data-biz="laundry"] .hero-s-hero{grid-template-columns:minmax(0,1fr) minmax(0,.45fr)}
  .hero-s-step b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
  .hero-s-step>span:last-child{display:none}
  .hero-s-day{padding:0 .2em;font-size:.85em}
}

/* typing caret while the headline types itself */
.hero-s-h.is-typing::after{content:"";display:inline-block;width:.07em;height:.86em;margin-left:.05em;vertical-align:-.04em;background:currentColor;animation:hero-caret .7s steps(1) infinite}
@keyframes hero-caret{50%{opacity:0}}

/* ---------- the wireframe it starts as (the sports bar's layout) ---------- */
.hero-wire{position:absolute;inset:0;z-index:2;background:#F7F9FA;opacity:0;visibility:hidden;pointer-events:none}
.hero-w{display:block;border-radius:.45em;background:#E0E7EA;transform-origin:0 50%}
.hero-w-nav{display:flex;align-items:center;gap:1.5em;height:4em;padding:0 1.8em;border-bottom:1px solid #E6ECEF}
.hero-w--logo{width:9em;height:1.5em}
.hero-w--link{width:3.6em;height:.9em}
.hero-w--logo+.hero-w--link{margin-left:auto}
.hero-w--btn{width:5.6em;height:2.5em;border-radius:99em}
.hero-w-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:15.2em minmax(0,1fr);gap:1.1em;height:28.7em;padding:1.2em}
.hero-w-hero,.hero-w-box{position:relative}
.hero-w-hero{grid-column:1/-1}
.hero-w-hero .hero-w,.hero-w-box .hero-w{position:absolute;background:#D2DBE0}
.hero-w-hero .hero-w--panel{inset:0;border-radius:1.3em;background:#E8EDF0}
.hero-w--h1{left:2em;top:3.2em;width:46%;height:2.1em}
.hero-w--h2{left:2em;top:5.9em;width:32%;height:2.1em}
.hero-w--txt{left:2em;top:8.9em;width:28%;height:.9em}
.hero-w--cta{left:2em;top:10.9em;width:8.5em;height:2.5em;border-radius:99em!important}
.hero-w--cta2{left:11.2em;top:10.9em;width:7em;height:2.5em;border-radius:99em!important}
.hero-w--art{right:3.5em;top:2.1em;width:11em;height:11em;border-radius:50%!important}
.hero-w-box .hero-w--tile{inset:0;border-radius:1em;background:#EBF0F2}
.hero-w--title{left:1.2em;top:1.1em;width:42%;height:1em}
.hero-w--line{left:1.2em;width:calc(100% - 2.4em);height:.8em}
.hero-w--line:nth-child(3){top:3.6em}
.hero-w--line:nth-child(4){top:5.6em}
.hero-w--line:nth-child(5){top:7.6em}
.hero-w--pin{left:calc(54% - 1.05em);top:calc(34% - 1.05em);width:2.1em;height:2.1em;border-radius:50%!important}
.hero-w-foot{display:flex;align-items:center;justify-content:space-between;height:3.4em;padding:0 1.8em;border-top:1px solid #E6ECEF}
.hero-w--open{width:13em;height:.9em}
.hero-w--wa{width:6.4em;height:2.3em;border-radius:99em}

/* ---------- the same business on the phone (sized from the phone width: 5% of the screen) ---------- */
.hero-m{display:flex;flex-direction:column;height:100%;font:500 calc(var(--ph-w) * .0466)/1.3 var(--f-body);color:#1D2733;background:#fff}
.hero-m b{font-weight:inherit}
.hero-m-status{display:flex;align-items:center;justify-content:space-between;flex:none;height:2.9em;padding:0 1.7em 0 2.2em;font-size:.9em}
.hero-m-status b{font-weight:700}
.hero-m-sig{display:flex;align-items:flex-end;gap:.16em;height:.9em}
.hero-m-sig i{display:block;width:.26em;border-radius:.1em;background:#1D2733}
.hero-m-sig i:nth-child(1){height:35%}.hero-m-sig i:nth-child(2){height:55%}.hero-m-sig i:nth-child(3){height:78%}.hero-m-sig i:nth-child(4){height:100%}
.hero-m-top{display:flex;align-items:center;gap:.5em;flex:none;height:2.8em;padding:0 1.1em}
.hero-m-top .hero-s-mark{width:1.3em;height:1.3em}
.hero-m-name{font:800 1.25em/1 var(--f-display);letter-spacing:-.02em;color:var(--s-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-m-main{display:flex;flex-direction:column;gap:.6em;flex:1 1 auto;min-height:0;padding:0 .8em;overflow:hidden}
.hero-m-main>*{flex:none;min-width:0}
.hero-m-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;height:14em;padding:1.1em;border-radius:1.1em;background:var(--s-dark);color:#fff;overflow:hidden}
.hero-m-hero::before,.hero-m-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 60% at 80% 10%,color-mix(in srgb,var(--s-accent) 32%,transparent),transparent 72%)}
.hero-m-art{position:absolute;top:.7em;right:.5em;width:64%;height:46%}
.hero-m-h,.hero-m-cta{position:relative}
.hero-m-h{display:block;max-height:3.12em;overflow:hidden;font:800 1.65em/1.04 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.hero-m-cta{align-self:flex-start;margin-top:.8em;font-size:.88em}
.hero-m-title{display:block;font:700 1em/1.2 var(--f-display);color:#16202C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-m-list{display:grid;gap:.45em}
.hero-m-row{display:flex;align-items:center;justify-content:space-between;gap:.5em;min-width:0;padding:.6em .7em;border-radius:.65em;background:var(--s-soft);font-size:.92em}
.hero-m-row b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.hero-m-row span{flex:none;font-weight:700;color:var(--s-dark)}
.hero-m-map{position:relative;height:6.6em;border-radius:.9em;background:#EEF2EA;overflow:hidden}
.hero-m-map .hero-pin{left:76%;top:38%;width:1.8em;height:1.8em;margin:-.9em 0 0 -.9em}
.hero-m-map .hero-pin::after{inset:.47em}
.hero-m-map .hero-map-tag{left:.55em;bottom:.55em;font-size:.8em}
/* café */
.hero-m-photo{position:relative;isolation:isolate;height:11em;border-radius:1.1em;background:var(--s-dark);overflow:hidden}
.hero-m-photo .hero-m-art{inset:8% 12% 6%;width:auto;height:auto}
.hero-m-rate{position:absolute;left:.65em;bottom:.65em;display:flex;align-items:center;gap:.3em;padding:.35em .65em;border-radius:99em;background:#fff;font-size:.85em;color:#16202C}
.hero-m-rate .i{width:1em;height:1em;color:#F2A900}
.hero-m-rate b{font-weight:800}
.hero-m-copy{display:flex;flex-direction:column;align-items:flex-start;padding:.2em .2em 0}
.hero-m-copy .hero-m-h{color:var(--s-dark)}
.hero-m-copy .hero-m-cta{margin-top:.6em}
.hero-m-review{display:grid;gap:.35em;padding:.7em .8em;border-radius:.9em;background:var(--s-soft)}
.hero-m-review p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:650 .92em/1.3 var(--f-display);color:#16202C}
/* laundry */
.hero-m-hero--short{height:11em}
.hero-m-hero--short .hero-m-art{width:46%;height:52%}
.hero-m-book{display:grid;gap:.55em;padding:.8em;border-radius:.9em;border:1px solid rgba(15,36,64,.12);background:#fff;box-shadow:0 .5em 1.2em -.8em rgba(15,36,64,.4)}
.hero-m-book .hero-s-day{height:2.3em;font-size:.82em}
.hero-m-book .hero-s-field__v{height:2.4em;font-size:.9em}
.hero-m-book .hero-s-btn--block{height:2.6em;font-size:.9em}
.hero-m-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4em}
.hero-m-steps span{display:flex;flex-direction:column;align-items:center;gap:.35em;min-width:0;padding:.55em .25em;border-radius:.7em;background:var(--s-soft);font-size:.76em;font-weight:700;line-height:1.15;text-align:center}
.hero-m-steps i{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:var(--s-dark);color:#fff;font-style:normal}
/* venue */
.hero-m-hero--poster{height:15em;align-items:center;justify-content:center;text-align:center}
.hero-m-hero--poster::before{background:radial-gradient(70% 70% at 50% 0,color-mix(in srgb,var(--s-accent) 45%,transparent),transparent 75%)}
.hero-m-hero--poster .hero-m-art{inset:0;width:auto;height:auto;opacity:.35}
.hero-m-hero--poster .hero-m-cta{align-self:center}
.hero-m-gigs{display:grid;gap:.45em}
.hero-m-gig{display:flex;align-items:center;gap:.65em;min-width:0;padding:.4em;border-radius:.75em;background:var(--s-soft)}
.hero-m-gig__date{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:3.4em;height:3.4em;border-radius:.6em;background:var(--s-dark);color:#fff;font-size:.78em;font-weight:700;line-height:1.05;text-transform:uppercase}
.hero-m-gig__date b{font:800 1.5em/1 var(--f-display)}
.hero-m-gig__info{display:grid;gap:.1em;min-width:0}
.hero-m-gig__info b{overflow:hidden;font-size:.95em;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.hero-m-gig__info span{font-size:.82em;color:#56616F}
.hero-m-gig.is-out{opacity:.5}

.hero-m-open{display:flex;align-items:center;gap:.55em;padding:.5em 1.1em;font-size:.85em;color:#3E4A58;white-space:nowrap;overflow:hidden}
.hero-m-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;margin-top:auto;padding:.55em .2em 1.6em;border-top:1px solid #E6ECEF;background:#fff}
.hero-m-bar>span{display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:0;font-size:.74em;font-weight:600;color:#3E4A58;white-space:nowrap}
.hero-m-bar .i{width:1.9em;height:1.9em;color:var(--s-dark)}
.hero-m-bar .hero-m-bar__wa .i{color:#1EB956}

/* the message that lands on the phone */
.hero-note{position:absolute;z-index:3;top:9%;right:-2%;display:flex;align-items:flex-start;gap:10px;width:clamp(196px,40cqi,262px);padding:11px 13px 12px 11px;border-radius:16px;background:rgba(255,255,255,.97);border:1px solid rgba(4,26,54,.08);box-shadow:var(--sh-float);font:500 12.5px/1.38 var(--f-body);color:var(--ink-2)}
.hero-note__ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--wa);color:#fff}
.hero-note__ic .i{width:17px;height:17px}
.hero-note__body{display:grid;gap:2px;min-width:0}
.hero-note__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hero-note__top b{font-weight:700;color:var(--navy)}
.hero-note__top span{font-size:11.5px;color:var(--mute)}
.hero-note__msg{display:block}

/* ---------- business switcher ---------- */
.hero-switch{margin-top:clamp(20px,2.6vw,28px)}
.hero-switch__hint{margin-bottom:12px;font-size:15px;font-weight:600;color:var(--ink-2)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.sec-hero .hero-chip{position:relative;overflow:hidden;padding:0 16px}
.hero-pause{margin-top:12px;min-height:44px;padding:0 14px;font-size:14px}
/* the label says what a click does, so it swaps instead of using aria-pressed */
.motion-paused .sec-hero .hero-pause{background:#fff;border-color:var(--navy);color:var(--navy)}
.hero-pause__ic{width:14px;height:14px;flex:none;fill:currentColor}
.hero-pause__play,.hero-pause__on,.motion-paused .hero-pause__bars,.motion-paused .hero-pause__off{display:none}
.motion-paused .hero-pause__play,.motion-paused .hero-pause__on{display:inline}
html:not(.js) .hero-pause,.no-motion .hero-pause{display:none}
.hero-chip__fill{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--sun);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- page-load gate: only while the intro is about to play ---------- */
.js:not(.no-motion) .sec-hero:not(.hero-go) .hero-devices,
.js:not(.no-motion) .sec-hero:not(.hero-go) .hero-switch{visibility:hidden}

/* ---------- marquee of the businesses we work for ---------- */
.hero-marquee{position:relative;z-index:1;margin-top:clamp(56px,8vw,104px);padding-block:clamp(18px,2.4vw,26px);border-block:1px solid var(--line);overflow:hidden}
.hero-marquee::before,.hero-marquee::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:clamp(28px,8vw,140px);pointer-events:none}
.hero-marquee::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(255,255,255,0))}
.hero-marquee::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(255,255,255,0))}
.hero-marquee__track{display:flex;width:max-content;animation:hero-marquee 64s linear infinite}
.hero-marquee:hover .hero-marquee__track,.hero-marquee.is-off .hero-marquee__track,.motion-paused .hero-marquee__track{animation-play-state:paused}
.hero-marquee__set{display:flex;align-items:center;gap:clamp(36px,4.4vw,68px);padding-right:clamp(36px,4.4vw,68px);list-style:none}
.hero-marquee__set li{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;font:650 clamp(18px,1.75vw,24px)/1 var(--f-display);letter-spacing:-.015em;color:var(--navy)}
.hero-marquee__ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--foam);color:var(--teal-700)}
.hero-marquee__ic .i{width:21px;height:21px}
@keyframes hero-marquee{to{transform:translate3d(-50%,0,0)}}

@media (prefers-reduced-motion:reduce){
  .hero-marquee__track{width:auto;animation:none}
  .hero-pause{display:none}
  .hero-marquee__set{flex-wrap:wrap;gap:16px 32px;padding-inline:var(--gutter)}
  .hero-marquee__set[aria-hidden="true"]{display:none}
  .hero-marquee::before,.hero-marquee::after{display:none}
}


/* ==========================================================================
   why
   ========================================================================== */
/* Built for your business: four editorial "moments", each a statement beside a live visual.
   Every visual is drawn in its final state by default; why.js rewinds and plays it when motion is on. */

.sec-why{overflow-x:clip}
.sec-why .why-head{margin-bottom:clamp(64px,9vw,128px)}

/* ---------- the sequence ---------- */
.why-list{display:grid;gap:clamp(88px,12vw,168px)}
.why-m{display:grid;gap:clamp(28px,4vw,44px);align-items:center}
.why-m__copy{max-width:33rem}
.why-m__title{margin:0;font-family:var(--f-display);font-size:clamp(32px,4.1vw,52px);font-weight:750;line-height:1.02;letter-spacing:-.036em;color:var(--navy);text-wrap:balance}
.why-m__text{margin-top:clamp(16px,1.8vw,24px);max-width:30em;font-size:var(--fs-md);line-height:1.55;color:var(--ink-2)}
.why-m__fig{margin:0;min-width:0}
.why-m__cap{margin-top:16px;max-width:44em;font-size:var(--fs-sm);line-height:1.5;color:var(--mute)}

/* the shared stage: a flat sea-foam panel with the brand wave along its foot */
.why-stage{--why-pad:clamp(18px,4vw,44px);position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;padding:var(--why-pad);background:var(--foam);border:1px solid var(--line);border-radius:var(--r-lg)}
.why-sea{position:absolute;z-index:-1;left:0;bottom:0;width:100%;height:26%;fill:var(--foam-2);pointer-events:none}
html:not(.js) .why-ctrl{display:none}

@media (min-width:900px){
  .sec-why{--why-bleed:calc(var(--gutter) + max(0px,(100vw - var(--wrap) - 2 * var(--gutter)) / 2))}
  .why-m{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,104px)}
  .why-m:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .why-m:nth-child(even) .why-m__fig{order:-1}
  /* visuals run off the page edge on alternating sides; the padding keeps their content in the column */
  .why-m:nth-child(odd) .why-stage{margin-right:calc(-1 * var(--why-bleed));padding-right:calc(var(--why-pad) + var(--why-bleed));border-right:0;border-radius:var(--r-lg) 0 0 var(--r-lg)}
  .why-m:nth-child(even) .why-stage{margin-left:calc(-1 * var(--why-bleed));padding-left:calc(var(--why-pad) + var(--why-bleed));border-left:0;border-radius:0 var(--r-lg) var(--r-lg) 0}
}

/* shared mock pieces */
.why-mini__burger,.why-ly__burger{position:relative;display:block;flex:none;width:1.5em;height:.95em;margin-left:auto;border-block:.18em solid var(--navy)}
.why-mini__burger::after,.why-ly__burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:.18em;margin-top:-.09em;background:var(--navy)}
.why-road{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.why-road--thin{stroke-width:3}

/* ==========================================================================
   1. Speed: a slow website next to yours
   ========================================================================== */
.why-sp{display:flex;flex-direction:column;align-items:center;gap:18px}
.why-sp__pair{position:relative;z-index:1;display:flex;justify-content:center;gap:24px;gap:clamp(14px,6cqi,48px)}
.why-sp__col{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.why-sp .phone{--ph-w:min(196px,43cqi)}
.why-sp__tag{font:600 var(--fs-sm)/1.25 var(--f-body);color:var(--navy);text-align:center}
.why-sp__meta{display:inline-flex;align-items:center;gap:6px;min-height:20px;font:600 14px/1 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums;transition:color .3s}
.why-sp__meta .i{width:16px;height:16px}
.why-sp__meta--slow.why-late{color:var(--err)}
.why-sp__meta--ok .i{color:var(--ok);stroke-width:2.6}
.why-sp__screen{font-size:calc(var(--ph-w) * .05)}

/* slow: crawling bar, skeleton, spinner, then the visitor leaves */
.why-sp__bar{position:absolute;z-index:2;left:0;top:calc(var(--ph-w) * .118);width:100%;height:calc(var(--ph-w) * .016);min-height:2px;border-radius:0 4px 4px 0;background:var(--teal);transform-origin:0 50%;transform:scaleX(.62)}
.why-sk,.why-mini{position:absolute;inset:0;display:flex;flex-direction:column;gap:.75em;padding:calc(var(--ph-w) * .15) 1em 1em}
.why-sk__b{display:block;flex:none;border-radius:.45em;background:var(--foam-2)}
.why-sk__nav,.why-mini__nav{display:flex;align-items:center;gap:.55em;flex:none}
.why-sk__dot{width:1.6em;height:1.6em;border-radius:50%}
.why-sk__nm{width:5em;height:.6em}
.why-sk__hero{height:7.4em;border-radius:.9em}
.why-sk__h{width:88%;height:1.05em}
.why-sk__h--2{width:56%;margin-top:-.35em}
.why-sk__l{width:94%;height:.5em}
.why-sk__l--2{width:72%;margin-top:-.3em}
.why-sk__btns{display:flex;gap:.5em;flex:none}
.why-sk__btns .why-sk__b{flex:1;height:2.5em;border-radius:2em}
.why-sp__spin{position:absolute;z-index:2;left:50%;top:calc(var(--ph-w) * .45);width:2.8em;height:2.8em;margin:-1.4em 0 0 -1.4em;fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:36 100}
.why-sp.why-playing .why-sk__b{animation:why-pulse 1.3s ease-in-out infinite}
.why-sp.why-playing .why-sk__b:nth-child(even){animation-delay:-.45s}
.why-sp.why-playing .why-sp__spin{animation:why-spin .85s linear infinite}
.why-sp.why-paused .why-sk__b,.why-sp.why-paused .why-sp__spin{animation-play-state:paused}
@keyframes why-pulse{50%{opacity:.45}}
@keyframes why-spin{to{rotate:360deg}}
.why-sp__dim{position:absolute;z-index:3;inset:0;background:rgba(4,26,54,.56)}
.why-sp__left{position:absolute;z-index:4;left:0;right:0;bottom:16%;width:max-content;max-width:92%;margin-inline:auto;display:flex;align-items:center;gap:.35em;padding:.75em 1.1em .75em .8em;border-radius:2em;background:#fff;color:var(--navy);font:700 1.1em/1 var(--f-body);white-space:nowrap;box-shadow:var(--sh-lift)}
.why-sp__left .i{width:1.2em;height:1.2em;color:var(--err);stroke-width:2.8}
.why-sp__finger{position:absolute;z-index:3;width:3em;height:3em;border-radius:50%;background:rgba(2,45,91,.14);box-shadow:inset 0 0 0 2px rgba(2,45,91,.3);opacity:0;pointer-events:none}
.why-sp__finger--slow{right:10%;top:58%}
.why-sp__finger--fast{left:50%;top:74%;margin-left:-1.5em}

/* yours: simply there */
.why-mini{background:#fff}
.why-mini__logo{display:block;flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--sun)}
.why-mini__nm{display:block;flex:none;width:5em;height:.6em;border-radius:1em;background:var(--navy)}
.why-mini__hero{position:relative;flex:none;height:7.4em;border-radius:.9em;overflow:hidden;background:var(--sun-100)}
.why-mini__hero svg{width:100%;height:100%}
.why-art-sun{fill:var(--sun)}
.why-art-sea{fill:var(--teal)}
.why-art-sea2{fill:var(--teal-700)}
.why-mini__h{flex:none;font:750 1.5em/1.04 var(--f-display);letter-spacing:-.025em;color:var(--navy);text-wrap:balance}
.why-mini__l{display:block;flex:none;width:94%;height:.5em;border-radius:1em;background:var(--line)}
.why-mini__l--2{width:70%;margin-top:-.3em}
.why-mini__btns{display:flex;gap:.5em;flex:none}
.why-mini__btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.35em;height:2.5em;border-radius:2em;font:700 .9em/1 var(--f-body);white-space:nowrap}
.why-mini__btn .i{width:1.15em;height:1.15em}
.why-mini__btn--call{background:var(--sun);color:var(--navy)}
.why-mini__btn--wa{background:var(--wa);color:#04381C}
.why-mini__menu{display:flex;flex-direction:column;gap:.8em;flex:none;padding-top:.8em;border-top:1px solid var(--line)}
.why-mini__row{display:flex;align-items:center;justify-content:space-between;gap:1em}
.why-mini__row i{display:block;width:58%;height:.55em;border-radius:1em;background:var(--ink-2);opacity:.5}
.why-mini__row b{display:block;width:2.2em;height:.55em;border-radius:1em;background:var(--teal-700)}
.why-mini__row:nth-child(2) i{width:44%}
.why-mini__row:nth-child(3) i{width:64%}
.why-mini__row:nth-child(4) i{width:38%}
.why-mini__row:nth-child(5) i{width:52%}
.why-mini__map{position:relative;flex:none;height:6.5em;border-radius:.9em;overflow:hidden;background:var(--teal-50)}
.why-mini__map svg{width:100%;height:100%}
.why-mini__pin{position:absolute;left:58%;top:42%;width:1.3em;height:1.3em;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--navy);box-shadow:0 0 0 .3em rgba(252,185,0,.45)}
.why-mini__foot{display:block;flex:none;height:10em;border-radius:.9em .9em 0 0;background:var(--navy)}

.why-replay{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px 0 16px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-2);color:var(--navy);font:600 14.5px/1 var(--f-body);transition:border-color .3s var(--ease-out)}
.why-replay .i{width:17px;height:17px;transition:rotate .6s var(--ease-out)}
.why-replay:hover{border-color:var(--navy)}
.why-replay:hover .i{rotate:-180deg}
.no-motion .why-replay{display:none}
@media (prefers-reduced-motion:reduce){.why-replay{display:none}}

/* ==========================================================================
   2. Made for you: one layout, re-arranged per business
   ========================================================================== */
.why-ly{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px}
.why-ly .phone{--ph-w:min(244px,62cqi);flex:none}
.why-ly__site{position:absolute;inset:0;display:flex;flex-direction:column;gap:.7em;padding:calc(var(--ph-w) * .15) .75em .75em;font-size:calc(var(--ph-w) * .052);background:#fff}
.why-ly__nav{display:flex;align-items:center;gap:.55em;flex:none}
.why-ly__logo{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:var(--navy);color:#fff}
.why-ly__ico{grid-area:1/1;width:1.15em;height:1.15em;opacity:0;scale:.5;transition:opacity .35s var(--ease-out),scale .5s var(--ease-spring)}
.why-fit[data-layout="cafe"] .why-ly__ico[data-for="cafe"],
.why-fit[data-layout="clean"] .why-ly__ico[data-for="clean"],
.why-fit[data-layout="venue"] .why-ly__ico[data-for="venue"]{opacity:1;scale:1}
.why-ly__name{display:block;flex:none;width:5.4em;height:.65em;border-radius:1em;background:var(--navy)}

.why-ly__grid{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,2.3fr) minmax(0,1fr) minmax(0,.85fr);grid-template-areas:"p p" "a b" "c c";gap:.55em}
.why-fit[data-layout="clean"] .why-ly__grid{grid-template-rows:minmax(0,2.05fr) minmax(0,1fr) minmax(0,1.05fr)}
.why-fit[data-layout="venue"] .why-ly__grid{grid-template-rows:minmax(0,2.5fr) minmax(0,.9fr) minmax(0,.8fr)}
.why-fit[data-layout="cafe"] .why-blk--menu,.why-fit[data-layout="clean"] .why-blk--quote,.why-fit[data-layout="venue"] .why-blk--gigs{grid-area:p}
.why-fit[data-layout="cafe"] .why-blk--photos,.why-fit[data-layout="clean"] .why-blk--reviews,.why-fit[data-layout="venue"] .why-blk--map{grid-area:a}
.why-fit[data-layout="cafe"] .why-blk--reviews,.why-fit[data-layout="clean"] .why-blk--map,.why-fit[data-layout="venue"] .why-blk--photos{grid-area:b}
.why-fit[data-layout="cafe"] .why-blk--map,.why-fit[data-layout="clean"] .why-blk--photos,.why-fit[data-layout="venue"] .why-blk--reviews{grid-area:c}
.why-fit[data-layout="cafe"] .why-blk:not([data-in~="cafe"]):not(.why-blk--ghost),
.why-fit[data-layout="clean"] .why-blk:not([data-in~="clean"]):not(.why-blk--ghost),
.why-fit[data-layout="venue"] .why-blk:not([data-in~="venue"]):not(.why-blk--ghost){display:none}
.why-fit .why-ly__grid .why-blk--ghost{position:absolute;z-index:0;grid-area:auto;pointer-events:none}

.why-blk{position:relative;z-index:1;min-width:0;min-height:0;overflow:hidden;border-radius:.75em;background:#fff;border:1px solid var(--line);transform-origin:0 0}
.why-blk__in{position:absolute;inset:0;display:flex;flex-direction:column;gap:.5em;padding:.65em .7em;transform-origin:0 0}
.why-blk__lbl{display:flex;align-items:center;gap:.35em;flex:none;font:600 1em/1.1 var(--f-body);color:var(--navy);white-space:nowrap}
.why-blk__lbl .i{width:1.1em;height:1.1em}

.why-blk--menu{background:var(--sun-100);border-color:var(--sun-300)}
.why-rows{display:flex;flex-direction:column;gap:.62em;padding-top:.2em}
.why-row{display:flex;align-items:center;gap:.4em}
.why-row__a{display:block;flex:none;width:42%;height:.5em;border-radius:1em;background:var(--navy);opacity:.7}
.why-row__d{flex:1;min-width:0;border-bottom:.14em dotted rgba(2,45,91,.35)}
.why-row__p{display:block;flex:none;width:1.9em;height:.5em;border-radius:1em;background:var(--navy)}
.why-row:nth-child(2) .why-row__a{width:30%}
.why-row:nth-child(3) .why-row__a{width:50%}
.why-row:nth-child(4) .why-row__a{width:36%}
.why-row:nth-child(5) .why-row__a{width:46%}
.why-row:nth-child(6) .why-row__a{width:28%}

.why-blk--quote{background:var(--teal-50);border-color:var(--teal-100)}
.why-inp{display:block;flex:none;height:1.9em;border-radius:.45em;background:#fff;border:1px solid var(--teal-100)}
.why-inp--short{height:3em}
.why-qbtn{display:flex;align-items:center;justify-content:center;flex:none;height:2.2em;border-radius:2em;background:var(--sun);color:var(--navy);font:700 .9em/1 var(--f-body);white-space:nowrap}

.why-blk--gigs{background:var(--navy);border-color:var(--navy)}
.why-blk--gigs .why-blk__lbl{color:#fff}
.why-gig{display:flex;align-items:center;gap:.55em;flex:none}
.why-gig__d{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:.45em;background:var(--sun);color:var(--navy);font:800 .95em/1 var(--f-display)}
.why-gig__t{display:block;flex:1;max-width:58%;height:.5em;border-radius:1em;background:rgba(255,255,255,.7)}
.why-gig:nth-child(odd) .why-gig__t{max-width:42%}
.why-gig__k{display:block;flex:none;width:2.6em;height:1.3em;margin-left:auto;border-radius:1em;background:var(--teal)}

.why-tiles{display:flex;gap:.35em;flex:1;min-height:0}
.why-tiles i{display:block;flex:none;height:100%;aspect-ratio:1;border-radius:.45em;background:var(--teal-100)}
.why-tiles i:nth-child(2){background:var(--sun-100)}
.why-tiles i:nth-child(3){background:var(--foam-2)}
.why-tiles i:nth-child(4){background:var(--teal-300)}

.why-stars{display:flex;gap:.12em;flex:none;color:var(--sun-600)}
.why-stars .i{width:1em;height:1em}
.why-ln{display:block;flex:none;width:90%;height:.45em;border-radius:1em;background:var(--line-2)}
.why-ln--short{width:60%}

.why-blk--map{background:var(--teal-50)}
.why-blk__map{position:absolute;inset:0;width:100%;height:100%}
.why-blk__lbl--chip{position:relative;align-self:flex-start;padding:.3em .55em .3em .4em;border-radius:2em;background:#fff;box-shadow:0 1px 3px rgba(4,26,54,.14)}
.why-blk__pin{position:absolute;right:24%;top:50%;width:1.3em;height:1.3em;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--navy);box-shadow:0 0 0 .3em rgba(252,185,0,.45)}

/* business picker */
.why-seg{position:relative;z-index:1;display:flex;gap:4px;width:100%;max-width:400px;padding:5px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.why-seg__b{flex:1 1 0;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border-radius:17px;font:600 13.5px/1.15 var(--f-body);color:var(--ink-2);text-align:center;transition:background-color .35s var(--ease-out),color .35s var(--ease-out)}
.why-seg__b .i{width:20px;height:20px}
.why-seg__b:hover{color:var(--navy);background:var(--foam)}
.why-seg__b[aria-pressed="true"]{background:var(--navy);color:#fff}
@container (min-width:540px){
  .why-ly{flex-direction:row;justify-content:center;gap:clamp(28px,7cqi,64px)}
  .why-seg{flex-direction:column;width:auto;max-width:none;padding:6px;border-radius:26px}
  .why-seg__b{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;min-height:54px;padding:0 24px 0 18px;border-radius:20px;font-size:15.5px;text-align:left;white-space:nowrap}
}

/* the caption names the business on show; all three stay in one cell so nothing below moves */
.why-fit__cap{display:grid;font-weight:600;color:var(--navy)}
.why-fit__cap>span{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility .4s}
.why-fit[data-layout="cafe"] [data-cap="cafe"],
.why-fit[data-layout="clean"] [data-cap="clean"],
.why-fit[data-layout="venue"] [data-cap="venue"]{opacity:1;visibility:visible}

/* ==========================================================================
   3. Found and chosen: a local search result on a phone
   ========================================================================== */
.why-fd{display:flex;justify-content:center;align-items:flex-start;padding-bottom:0}
.why-fd .phone{--ph-w:min(262px,68cqi);position:relative;z-index:1;flex:none;margin-bottom:calc(var(--ph-w) * -.6)}
.why-fd__app{position:absolute;inset:0;display:flex;flex-direction:column;gap:.75em;padding:calc(var(--ph-w) * .15) .9em .9em;font-size:calc(var(--ph-w) * .046);background:#fff}
.why-fd__search{display:flex;align-items:center;gap:.55em;flex:none;height:2.9em;padding:0 1.1em;border-radius:2em;background:var(--foam);border:1px solid var(--line);font:500 1.05em/1 var(--f-body);color:var(--ink);white-space:nowrap;overflow:hidden}
.why-fd__search .i{flex:none;width:1.15em;height:1.15em;color:var(--mute)}
.why-fd__caret{display:block;flex:none;width:.12em;min-width:1.5px;height:1.2em;margin-left:-.45em;background:var(--teal-700);opacity:0}
.why-fd.why-typing .why-fd__caret{opacity:1;animation:why-blink 1s steps(1) infinite}
@keyframes why-blink{50%{opacity:0}}
.why-fd__map{position:relative;flex:none;height:calc(var(--ph-w) * .34);border-radius:.9em;overflow:hidden;background:var(--teal-50)}
.why-fd__map svg{width:100%;height:100%}
.why-fd__water{fill:var(--teal-100)}
.why-fd__pin{position:absolute;left:46%;top:46%;translate:-50% -50%;display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:var(--navy);color:#fff;box-shadow:0 0 0 .35em rgba(252,185,0,.5)}
.why-fd__pin .i{width:1.25em;height:1.25em}
.why-fd__card{display:flex;flex-direction:column;gap:.3em}
.why-fd__name{font:750 1.5em/1.1 var(--f-display);letter-spacing:-.025em;color:var(--navy)}
.why-fd__stars{display:flex;gap:.1em;color:var(--sun-600)}
.why-fd__stars .i{width:1.1em;height:1.1em}
.why-fd__open{display:flex;align-items:center;gap:.5em;font-weight:600;color:var(--ink-2)}
.why-fd__open .live-dot{width:.6em;height:.6em}
.why-fd__addr{color:var(--mute)}
.why-fd__bubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:.4em;height:2.3em;margin-top:.2em}
.why-fd__bub{justify-self:center;display:inline-flex;align-items:center;padding:.42em .65em;border-radius:2em;background:var(--navy);color:#fff;font:700 .88em/1 var(--f-body);white-space:nowrap;box-shadow:0 6px 14px -6px rgba(4,26,54,.45)}
.why-fd__acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45em}
.why-fd__act{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;min-width:0;height:3.9em;border-radius:.85em;border:1px solid var(--line-2);background:#fff;color:var(--navy);font:600 .9em/1 var(--f-body);white-space:nowrap}
.why-fd__act .i{width:1.35em;height:1.35em}
.why-fd__act--call{background:var(--navy);border-color:var(--navy);color:#fff}
.why-fd__act--wa{background:var(--wa);border-color:var(--wa);color:#04381C}
.why-fd__tap,.why-fd__ring{position:absolute;left:50%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;opacity:0;pointer-events:none}
.why-fd__tap{background:rgba(255,255,255,.5);box-shadow:0 0 0 2px rgba(2,45,91,.28)}
.why-fd__ring{box-shadow:0 0 0 2px var(--sun)}

/* ==========================================================================
   4. Speaks their language: one button, five languages, no layout shift
   ========================================================================== */
.why-lg{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px}
.why-lg__browser{width:100%;max-width:580px}
.why-lg__site{background:var(--navy);color:#fff}
.why-lg__nav{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-inline:clamp(12px,4cqi,20px);border-bottom:1px solid rgba(255,255,255,.12)}
.why-lg__mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun);color:var(--navy)}
.why-lg__mark .i{width:17px;height:17px}
.why-lg__navbar{display:block;flex:none;width:56px;width:clamp(36px,14cqi,80px);height:8px;border-radius:8px;background:rgba(255,255,255,.5)}
.why-lg__cur{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font:600 13px/1 var(--f-body)}
.why-lg__stack{display:grid;overflow:hidden}
.why-lg__v{grid-area:1/1;opacity:0;visibility:hidden}
.why-lg__v.why-on{opacity:1;visibility:visible}
.why-lg__flag{width:22px;height:22px;border-radius:50%}
.sec-why .why-lg__flag .flag{width:22px;height:22px;box-shadow:none}
.why-lg__name{padding-block:2px}
.why-lg__hero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:20px;gap:clamp(16px,4.5cqi,26px);padding:36px 24px 64px;padding:clamp(24px,8cqi,52px) clamp(18px,6cqi,40px) clamp(48px,15cqi,88px)}
.why-lg__art{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:auto}
.why-lg__sun{fill:var(--sun)}
.why-lg__w1{fill:var(--teal)}
.why-lg__w2{fill:var(--teal-700)}
.why-lg__head{position:relative;z-index:1;width:100%;max-width:11.5em;margin:0;padding-bottom:.08em;font:750 30px/1.02 var(--f-display);font-size:clamp(25px,7.4cqi,46px);letter-spacing:-.032em;color:#fff}
.why-lg__btn{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:46px;min-height:clamp(42px,10cqi,54px);padding:0 22px;padding-inline:clamp(18px,5cqi,28px);border-radius:var(--r-pill);background:var(--sun);color:var(--navy);font:700 15px/1.2 var(--f-body);font-size:clamp(14px,3.4cqi,16.5px);white-space:nowrap;box-shadow:var(--sh-sun)}

.why-flags{display:flex;gap:4px;padding:5px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line)}
.why-flags__b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;transition:background-color .3s var(--ease-out)}
.sec-why .why-flags__b .flag{width:28px;height:28px;transition:scale .45s var(--ease-spring),box-shadow .3s}
.why-flags__b:hover{background:var(--foam)}
.why-flags__b[aria-pressed="true"]{background:var(--navy)}
.sec-why .why-flags__b[aria-pressed="true"] .flag{scale:1.1;box-shadow:0 0 0 2px #fff}

/* browsers without container units */
@supports not (width:1cqi){
  .why-sp .phone{--ph-w:136px}
  .why-ly .phone{--ph-w:200px}
  .why-fd .phone{--ph-w:220px}
}


/* ==========================================================================
   work
   ========================================================================== */
/* Work: two real client sites as alternating rows, plus an empty "your business" frame.
   Each row sits on a flat plate in the client's own brand tint that runs off the page edge. */
.sec-work{overflow-x:clip}
.sec-work .work-head{max-width:860px}

.work-rows{display:grid;gap:clamp(84px,11vw,168px)}
.work-row{--work-tint:var(--teal-100);display:grid;gap:clamp(30px,5vw,44px);align-items:center}
.work-row--dbk{--work-tint:#CFE1F3}
.work-row--biddy{--work-tint:#CDE5D5}

/* ---------- media side ---------- */
.work-media{position:relative;min-width:0}
.work-plate{position:absolute;z-index:0;top:18%;bottom:-10%;left:-100vw;right:20%;border-radius:0 var(--r-xl) var(--r-xl) 0;background:var(--work-tint);pointer-events:none}
.work-row--flip .work-plate{left:20%;right:-100vw;border-radius:var(--r-xl) 0 0 var(--r-xl)}
.work-stage{position:relative;z-index:1}
.sec-work .work-frame{box-shadow:0 40px 70px -36px rgba(4,26,54,.45),0 10px 26px -14px rgba(4,26,54,.22)}
.work-shot{aspect-ratio:1600/882;background:var(--work-tint)}
.work-img{width:100%;height:100%;object-fit:cover;object-position:left top;transform-origin:0 0}
.work-anim .work-img{will-change:transform}

/* ---------- story side ---------- */
.work-copy{min-width:0;max-width:34rem}
.work-name{font-size:clamp(34px,4.2vw,58px);font-weight:750;line-height:1;letter-spacing:-.038em;color:var(--navy)}
.work-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:16px;font:600 16px/1.4 var(--f-body);color:var(--teal-700)}
.work-meta__place{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-weight:500}
.work-meta__place .i{width:17px;height:17px}
.work-story{margin-top:20px;font-size:var(--fs-md);line-height:1.6;color:var(--ink-2)}
.work-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.sec-work .work-tags .pill{background:#fff;border-color:var(--line);color:var(--ink-2);white-space:normal}

.work-link{display:inline-flex;align-items:center;gap:9px;min-height:48px;margin-top:22px;font:600 17px/1.2 var(--f-body);color:var(--navy);text-decoration:none}
.work-link>span{background:linear-gradient(var(--teal),var(--teal)) 0 100%/100% 2px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease-out)}
.work-link .i{width:18px;height:18px;color:var(--teal-700);transition:translate .4s var(--ease-out)}
.work-link:hover{color:var(--navy)}
.work-link:hover>span{background-size:0 2px;background-position:100% 100%}
.work-link:hover .i{translate:2px -2px}

/* ---------- "your business could be next" ---------- */
.work-media--next{max-width:560px}
.work-glow{width:150%;aspect-ratio:1;left:50%;top:50%;translate:-50% -50%}
.work-ghost{position:relative;border:2px dashed var(--navy-300);border-radius:var(--r);background:rgba(255,255,255,.6);overflow:hidden}
.work-ghost__bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:2px dashed var(--line-2)}
.work-ghost__dots{display:flex;gap:7px;flex:none}
.work-ghost__dots i{display:block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--navy-300)}
.work-ghost__url{flex:1;min-width:0;max-width:260px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid var(--line);font:500 12.5px/1 var(--f-body);color:var(--mute);white-space:nowrap;overflow:hidden}
.work-ghost__url .i{width:12px;height:12px;color:var(--navy-300);stroke-width:2.4}
.work-ghost__typed{--p:0%;position:relative;display:inline-block}
.work-ghost__text{display:inline-block;clip-path:inset(0 var(--p) 0 0)}
.work-ghost__caret{position:absolute;top:50%;left:calc(100% - var(--p));width:1.5px;height:14px;margin:-7px 0 0 2px;background:var(--teal-700)}
.work-anim .work-ghost__caret{animation:work-blink 1.1s steps(1) infinite;animation-play-state:paused}
.work-anim.work-on .work-ghost__caret{animation-play-state:running}
@keyframes work-blink{50%{opacity:0}}
.work-ghost__body{aspect-ratio:1600/882;display:grid;grid-template-rows:auto 1fr auto;gap:5%;padding:5% 6%}
.work-ghost__nav{display:flex;justify-content:space-between;gap:12px}
.work-ghost__nav i{display:block;height:10px;border-radius:var(--r-pill);border:1.5px dashed var(--line-2)}
.work-ghost__nav i:first-child{width:26%}
.work-ghost__nav i:last-child{width:16%}
.work-ghost__hero{display:grid;place-items:center;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--teal)}
.work-ghost__mark{width:min(34%,150px);height:auto;opacity:.75}
.work-ghost__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.work-ghost__tiles i{display:block;height:clamp(18px,4vw,34px);border-radius:10px;border:1.5px dashed var(--line-2)}
.work-copy--next .work-story{margin-top:16px}
.sec-work .work-cta{margin-top:28px;white-space:normal;text-align:center;line-height:1.2}
.work-name--next{font-size:clamp(30px,3.4vw,46px)}

/* ---------- desktop: alternating 7/5 composition ---------- */
@media (min-width:960px){
  .work-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px)}
  .work-media{grid-column:1/span 7;grid-row:1}
  .work-copy{grid-column:8/span 5;grid-row:1}
  .work-row--flip .work-media{grid-column:6/span 7}
  .work-row--flip .work-copy{grid-column:1/span 5}
  .work-plate{top:16%;bottom:-12%;right:26%}
  .work-row--flip .work-plate{left:26%}
  .work-row--next .work-media{grid-column:2/span 5}
  .work-row--next .work-copy{grid-column:8/span 5}
}
@media (max-width:959.98px){
  .work-media--next{margin-inline:auto;width:min(100%,520px)}
}
@media (max-width:480px){
  .work-ghost__url{max-width:none}
  .sec-work .work-cta{width:100%}
}


/* ==========================================================================
   preview
   ========================================================================== */
/* Free preview: dark band. The default (no JS / no motion) state is the finished story:
   stamp gone, real address, "Live" pill on. JS rewinds it to the preview state and plays it
   with scroll (desktop scrub, one-shot on phones). */
.sec-preview{overflow:clip;isolation:isolate}
.sec-preview .pv-sep{top:-1px;z-index:1;color:var(--foam)}

/* ---------- background: one sun glow + slow sea lines ---------- */
.pv-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pv-glow{--gw:min(1200px,170vw);width:var(--gw);height:var(--gw);left:62%;top:40%;margin:calc(var(--gw) / -2) 0 0 calc(var(--gw) / -2)}
.pv-waves{position:absolute;left:0;right:0;bottom:0;height:60%}
.pv-wave{--w:420px;--h:36px;--t:50%;--o:.2;--d:60s;position:absolute;left:0;top:var(--t);width:calc(100% + var(--w));height:var(--h);opacity:var(--o);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20Q90 4 180 20T360 20' fill='none' stroke='%2376D2DB' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") repeat-x 0 50%/var(--w) var(--h)}
.pv-wave--sun{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20Q90 4 180 20T360 20' fill='none' stroke='%23FFD45C' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.pv-wave:nth-child(1){--t:6%;--w:520px;--h:30px;--o:.1;--d:96s}
.pv-wave:nth-child(2){--t:20%;--w:440px;--h:34px;--o:.14;--d:74s}
.pv-wave:nth-child(3){--t:33%;--w:380px;--h:36px;--o:.16;--d:62s}
.pv-wave:nth-child(4){--t:47%;--w:470px;--h:40px;--o:.2;--d:80s}
.pv-wave:nth-child(5){--t:60%;--w:340px;--h:38px;--o:.22;--d:54s}
.pv-wave:nth-child(6){--t:73%;--w:430px;--h:44px;--o:.26;--d:68s}
.pv-wave:nth-child(7){--t:86%;--w:360px;--h:40px;--o:.3;--d:50s}
.pv-anim .pv-wave{will-change:transform;animation:pv-wave var(--d) linear infinite;animation-play-state:paused}
.pv-anim .pv-wave:nth-child(even){animation-direction:reverse}
.pv-anim.pv-run .pv-wave{animation-play-state:running}
.pv-anim .pv-glow{will-change:transform}
@keyframes pv-wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--w)),0,0)}}

/* ---------- layout ---------- */
.pv-inner{position:relative;z-index:1}
.sec-preview .pv-head{max-width:1120px}
.sec-preview .pv-title{font-size:clamp(42px,6.7vw,100px);line-height:.97;letter-spacing:-.042em}
.pv-grid{display:grid;gap:clamp(48px,7vw,64px)}
.pv-copy{min-width:0;max-width:36rem}
.sec-preview .pv-lead{color:#fff;font-size:clamp(20px,1.75vw,24px)}
.pv-steps{list-style:none;display:grid;gap:16px;margin-top:34px}
.pv-step{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;align-items:center;font-size:var(--fs-md);line-height:1.45;color:var(--on-dark)}
.pv-step__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);color:var(--teal-300)}
.pv-step__icon .i{width:20px;height:20px}

/* ---------- the browser frame ---------- */
.pv-figure{margin:0;min-width:0}
.pv-stage{position:relative}
.sec-preview .pv-browser{border-color:transparent;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 60px 100px -46px rgba(0,0,0,.75),0 22px 44px -26px rgba(0,0,0,.55)}
.sec-preview .pv-url{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;max-width:420px;padding:0 10px}
.pv-url__draft,.pv-url__live{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.pv-url__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-preview .pv-url__draft .i{color:var(--mute)}
.pv-url__live{color:var(--ink)}
/* final state */
.pv-url__draft{opacity:0;visibility:hidden}

/* mock website, scaled like a picture (all sizes in container units) */
.pv-site{container-type:inline-size;aspect-ratio:100/58;display:flex;flex-direction:column;background:#fff;color:var(--navy);font-family:var(--f-body);user-select:none}
.pv-site__nav{flex:none;display:flex;align-items:center;gap:3cqi;height:8.5cqi;padding:0 4cqi;border-bottom:1px solid #EDF2F4}
.pv-site__brand{display:flex;align-items:center;gap:1cqi;font:700 2.3cqi/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.pv-site__mark{width:3.6cqi;height:3.6cqi}
.pv-site__links{margin-left:auto;display:flex;gap:2.8cqi;font:500 1.7cqi/1 var(--f-body);color:var(--mute);white-space:nowrap}
.pv-site__book{padding:1.1cqi 2.4cqi;border-radius:var(--r-pill);background:var(--navy);color:#fff;font:600 1.7cqi/1 var(--f-body);white-space:nowrap}
.pv-site__hero{position:relative;flex:1;min-height:0;overflow:hidden}
.pv-site__art{position:absolute;inset:0;width:100%;height:100%}
.pv-site__copy{position:relative;max-width:56cqi;padding:4.4cqi 4cqi 0}
.pv-site__title{font:800 5.6cqi/.98 var(--f-display);letter-spacing:-.035em;color:var(--navy);text-wrap:balance}
.pv-site__open{display:flex;align-items:center;gap:.8cqi;margin-top:1.8cqi;font:500 1.75cqi/1.2 var(--f-body);color:var(--ink-2)}
.pv-site__open .i{width:2cqi;height:2cqi;color:var(--teal-700)}
.pv-site__btns{display:flex;gap:1.2cqi;margin-top:2.6cqi}
.pv-site__btn{display:inline-flex;align-items:center;gap:.8cqi;padding:1.2cqi 2.3cqi;border-radius:var(--r-pill);font:600 1.75cqi/1 var(--f-body);white-space:nowrap}
.pv-site__btn .i{width:2cqi;height:2cqi}
.pv-site__btn--wa{background:var(--wa);color:#04381C}
.pv-site__btn--call{background:#fff;color:var(--navy);box-shadow:0 0 0 1px rgba(2,45,91,.12)}
.pv-site__tiles{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqi;padding:2.4cqi 4cqi}
.pv-site__tile{display:flex;align-items:center;gap:1.4cqi;min-width:0;padding:1.6cqi 1.8cqi;border-radius:1.6cqi;background:#F2F6F7}
.pv-site__ico{flex:none;display:grid;place-items:center;width:4.4cqi;height:4.4cqi;border-radius:50%;background:#fff;color:var(--teal-700)}
.pv-site__ico .i{width:2.2cqi;height:2.2cqi}
.pv-site__tx{display:grid;gap:.5cqi;min-width:0}
.pv-site__tx b,.pv-site__tx small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-site__tx b{font:600 1.75cqi/1.1 var(--f-body);color:var(--navy)}
.pv-site__tx small{font:500 1.5cqi/1.1 var(--f-body);color:var(--mute)}
.pv-site__tx .pv-site__stars{display:flex;gap:.2cqi;color:var(--sun-600)}
.pv-site__stars .i{width:1.6cqi;height:1.6cqi}

/* the stamp (the only all-caps word on the page: it is a stamp on the mock) */
.pv-stamp{position:absolute;z-index:2;inset:0;margin:auto;width:max-content;height:max-content;padding:.12em .42em .06em;
  border:.085em solid currentColor;border-radius:.2em;outline:.028em solid currentColor;outline-offset:-.19em;
  background:rgba(255,255,255,.82);color:var(--navy);font:800 9.6cqi/1 var(--f-display);letter-spacing:.06em;white-space:nowrap;
  box-shadow:0 .25em .7em -.3em rgba(4,26,54,.45);pointer-events:none;
  transform:rotate(-12deg);opacity:0;visibility:hidden}
html[lang="es"] .pv-stamp{font-size:6.6cqi}

/* "Live" pill hanging off the frame corner */
.pv-live{position:absolute;z-index:3;top:-17px;right:clamp(14px,5%,36px);display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border-radius:var(--r-pill);background:#fff;color:var(--navy);font:600 14.5px/1 var(--f-body);white-space:nowrap;box-shadow:0 16px 32px -14px rgba(0,0,0,.6)}

/* preview → live track under the frame */
.pv-cap{margin-top:24px}
.pv-track{display:grid;grid-template-columns:auto minmax(28px,1fr) auto;align-items:center;gap:12px;font:500 14.5px/1.3 var(--f-body);color:var(--on-dark-2)}
.pv-track__step{display:inline-flex;align-items:center;gap:9px;min-width:0}
.pv-track__dot{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--teal)}
.pv-track__dot--end{background:rgba(255,255,255,.2)}
.pv-track__on{position:absolute;inset:0;border-radius:50%;background:var(--ok)}
.pv-track__line{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.pv-track__fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--ok));transform-origin:0 50%}

/* ---------- three facts, set large ---------- */
.pv-facts{list-style:none;display:grid;margin-top:clamp(72px,9vw,124px);border-top:1px solid var(--line-dark)}
.pv-fact{display:grid;align-content:start;gap:10px;padding:24px 0 28px;border-bottom:1px solid var(--line-dark)}
.pv-fact__value{font:800 clamp(60px,8.2vw,124px)/.9 var(--f-display);letter-spacing:-.045em;color:#fff;white-space:nowrap}
.pv-fact__value--sun{color:var(--sun)}
.pv-fact__value [data-count]{font-variant-numeric:tabular-nums}
.pv-fact__unit{margin-left:.14em;font-size:.36em;font-weight:650;letter-spacing:-.015em;color:var(--on-dark-2)}
.pv-fact__label{max-width:18em;font-size:var(--fs-md);line-height:1.4;color:var(--on-dark-2)}

.pv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(44px,5vw,64px)}
.sec-preview .pv-cta__btn{white-space:normal;text-align:center;line-height:1.2}
.pv-cta__note{font-size:var(--fs-sm);color:var(--on-dark-2)}

/* ---------- breakpoints ---------- */
@media (min-width:760px){
  .pv-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv-fact{padding:30px clamp(20px,3vw,44px) 6px;border-bottom:0;border-left:1px solid var(--line-dark)}
  .pv-fact:first-child{padding-left:0;border-left:0}
}
@media (min-width:960px){
  .pv-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);align-items:center}
  .pv-copy{grid-column:1/span 5}
  .pv-figure{grid-column:6/span 7}
  .pv-glow{--gw:min(1300px,100vw);left:72%;top:42%}
}
@media (min-width:1280px){
  /* bleed into the outer margin only, never past the screen edge */
  .pv-figure{margin-right:calc(-1 * clamp(0px, (100vw - 1240px) / 2 - 40px, 64px))}
}
@media (max-width:520px){
  .sec-preview .pv-cta__btn{width:100%;padding-inline:22px}
  .pv-live{font-size:13.5px;padding:8px 13px 8px 11px}
}

/* ---------- preview state (set by JS without animation when motion is off) ---------- */
.sec-preview.pv-is-preview .pv-stamp{opacity:1;visibility:visible}
.sec-preview.pv-is-preview .pv-url__draft{opacity:1;visibility:visible}
.sec-preview.pv-is-preview .pv-url__live{opacity:0;transform:translateY(100%)}
.sec-preview.pv-is-preview .pv-live{opacity:0;transform:scale(.6)}
.sec-preview.pv-is-preview .pv-track__fill{transform:scaleX(0)}
.sec-preview.pv-is-preview .pv-track__on{transform:scale(0)}
@media (prefers-reduced-motion:no-preference){
  .sec-preview:not(.pv-anim) :is(.pv-stamp,.pv-url__draft,.pv-url__live,.pv-live,.pv-track__fill,.pv-track__on){transition:opacity .5s var(--ease-out),transform .6s var(--ease-out),visibility .5s}
}


/* ==========================================================================
   features
   ========================================================================== */
/* Features: a rail of features + one stage where each demo plays.
   Without JS every panel is shown, one after another. With JS (html.js) the
   panels share one grid cell so switching never changes the page height. */

.sec-features{overflow-x:clip}
.ft-head{max-width:860px}
.ft-incl{display:flex;align-items:center;gap:12px;margin-top:22px;font-weight:600;font-size:var(--fs-base);color:var(--navy)}
.ft-incl__ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-100)}
.ft-incl__ico .i{width:16px;height:16px;stroke-width:2.6}

/* ---------- explorer layout ---------- */
.ft-x{display:grid;gap:18px;min-width:0}
.ft-stage{position:relative;display:grid;gap:64px;min-width:0;padding:clamp(12px,2.6vw,36px);border-radius:30px;background:var(--foam);border:1px solid var(--foam-2)}
.js .ft-stage{gap:0}
html:not(.js) .ft-rail,html:not(.js) .ft-add,html:not(.js) .ft-tally-wrap,html:not(.js) .ft-now{display:none}

.ft-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.js .ft-panel{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none}
.js .ft-panel.is-active{visibility:inherit;opacity:1;pointer-events:auto}
.ft-motion .ft-panel{transform:translateY(14px);transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.ft-motion .ft-panel.is-active{transform:none;transition:opacity .55s var(--ease-out) .1s,transform .85s var(--ease-out) .1s,visibility 0s}

.ft-panel__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 28px}
.ft-panel__copy{flex:1 1 320px;min-width:0;max-width:600px}
.ft-panel__title{font-size:var(--fs-h3);color:var(--navy)}
.ft-panel__text{margin-top:8px;font-size:clamp(15.5px,1.3vw,16.5px);line-height:1.55;color:var(--ink-2);max-width:56ch}
/* keep pill and circle shapes when focused (base focus ring sets a 6px radius) */
.sec-features :is(.ft-tab,.ft-add,.ft-seg__b,.ft-tool-btn,.ft-lang__b,.ft-circ,.ft-dot,.ft-wa-fab,.ft-wa-sheet__send,.ft-ps__chip,.ft-book__go):focus-visible{border-radius:var(--r-pill)}
.sec-features .ft-gal__tile:focus-visible{border-radius:10px}
.ft-note{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.ft-note .i{width:17px;height:17px;margin-top:1px;color:var(--teal-700)}

/* ---------- rail: chips on phones and tablets ---------- */
.ft-rail{position:relative;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));padding:8px var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
.ft-ind{display:none}
.ft-tab{position:relative;flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px 0 6px;border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:#fff;color:var(--ink-2);font:600 15px/1.1 var(--f-body);white-space:nowrap;text-align:left;transition:background-color .25s,border-color .25s,color .25s}
.ft-tab:hover{border-color:var(--navy);color:var(--navy)}
.ft-tab__ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal-50);color:var(--teal-700);transition:background-color .25s,color .25s}
.ft-tab__ico .i{width:18px;height:18px}
.ft-tab__ico--wa{color:#128C4B}
.ft-tab__name,.ft-tab__ben{display:none}
.ft-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.ft-tab[aria-selected="true"] .ft-tab__ico{background:rgba(255,255,255,.14);color:#fff}
.ft-tab__added{display:none;place-items:center;flex:none;width:22px;height:22px;margin-left:2px;border-radius:50%;background:var(--sun);color:var(--navy)}
.ft-tab__added .i{width:13px;height:13px;stroke-width:3}
.ft-tab.is-added .ft-tab__added{display:inline-grid}
.ft-motion .ft-tab.is-added .ft-tab__added{animation:ft-pop .5s var(--ease-spring)}
/* sun mark: the feature comes with Growth (on the tabs and in the legend above them) */
.ft-sunmark{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--sun-100);color:#8A5A00;border:1px solid #F4D98A;vertical-align:-6px}
.ft-sunmark .i{width:13px;height:13px}
.ft-incl .ft-sunmark{margin:0 2px}
.ft-only{margin-bottom:12px}

/* ---------- rail: vertical list with a sliding highlight on desktop ---------- */
@media (min-width:1024px){
  .ft-x{grid-template-columns:minmax(290px,350px) minmax(0,1fr);gap:clamp(32px,3.6vw,56px);align-items:start}
  .ft-rail{flex-direction:column;gap:2px;overflow:visible;margin:0;padding:0;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none}
  .ft-ind{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,var(--teal) 0 4px,var(--foam) 4px);clip-path:inset(var(--t,0px) 0 var(--b,100%) 0 round 16px)}
  .ft-motion .ft-ind{transition:clip-path .6s cubic-bezier(.3,1.22,.5,1)}
  .ft-tab{z-index:1;display:flex;align-items:flex-start;width:100%;min-height:0;gap:14px;padding:14px 16px 14px 18px;border:0;border-radius:16px;background:transparent;white-space:normal}
  .ft-tab:hover{color:inherit}
  .ft-tab[aria-selected="true"]{background:transparent;color:inherit}
  .ft-tab__ico{width:40px;height:40px;border-radius:12px}
  .ft-tab[aria-selected="true"] .ft-tab__ico{background:var(--navy);color:#fff}
  .ft-tab__txt{flex:1;min-width:0}
  .ft-tab__short{display:none}
  .ft-tab__name{display:block;font:700 17.5px/1.2 var(--f-display);letter-spacing:-.012em;color:var(--ink-2);transition:color .25s}
  .ft-tab__ben{display:block;margin-top:4px;font:400 14.5px/1.4 var(--f-body);color:var(--mute)}
  .ft-tab:hover .ft-tab__name,.ft-tab[aria-selected="true"] .ft-tab__name{color:var(--navy)}
  .ft-tab[aria-selected="true"] .ft-tab__ben{color:var(--ink-2)}
  .ft-tab__added,.ft-tab .ft-sunmark{align-self:center;margin-left:0}
  .sec-features .ft-tab:focus-visible{border-radius:16px;outline-offset:-3px}
}

/* ---------- "Add to my preview" toggle ---------- */
.ft-add{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:48px;padding:0 20px 0 8px;border-radius:var(--r-pill);background:#fff;border:1.5px solid var(--line-2);color:var(--navy);font:600 15.5px/1.15 var(--f-body);text-align:left;transition:background-color .25s,border-color .25s,color .25s}
.ft-add:hover{border-color:var(--navy)}
.ft-add__ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--sun);color:var(--navy)}
.ft-add__ico .i{grid-area:1/1;width:18px;height:18px;stroke-width:2.6}
.ft-add__check{opacity:0;transform:scale(.3) rotate(-35deg)}
.ft-add__on{display:none}
.ft-add.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.ft-add.is-on .ft-add__plus{opacity:0;transform:scale(.3) rotate(90deg)}
.ft-add.is-on .ft-add__check{opacity:1;transform:none}
.ft-add.is-on .ft-add__off{display:none}
.ft-add.is-on .ft-add__on{display:inline}
.ft-motion .ft-add .i{transition:opacity .22s ease,transform .55s var(--ease-spring)}
.ft-motion .ft-add{transition:background-color .25s,border-color .25s,color .25s,scale .35s var(--ease-spring)}
.ft-motion .ft-add:active{scale:.96}
.ft-motion .ft-add.is-on .ft-add__ico{animation:ft-pop .55s var(--ease-spring)}
@keyframes ft-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}

/* ---------- demo controls ---------- */
.ft-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ft-seg{display:inline-flex;max-width:100%;padding:4px;gap:2px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line)}
.ft-seg__b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;white-space:nowrap;padding:0 16px;border-radius:var(--r-pill);font:600 14.5px/1.1 var(--f-body);color:var(--ink-2);transition:background-color .25s,color .25s}
.ft-seg__b .i{width:17px;height:17px}
.ft-seg__b:hover{color:var(--navy)}
.ft-seg__b[aria-pressed="true"]{background:var(--navy);color:#fff}
.ft-tool-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);font:600 14.5px/1.1 var(--f-body);color:var(--navy);transition:border-color .25s}
.ft-tool-btn:hover{border-color:var(--navy)}
.ft-tool-btn .i{width:17px;height:17px}
@media (max-width:479px){
  .ft-tools .ft-seg{display:flex;width:100%}
  .ft-seg__b{flex:1;padding:0 10px}
  .ft-seg__b .i{display:none}
}

/* ---------- device frames ---------- */
.sec-features .ft-device{display:flex;flex-direction:column;flex:1;min-height:0}
.sec-features .ft-device .browser__body{display:flex;flex-direction:column;flex:1;min-height:440px;container-type:inline-size}
.sec-features .ft-device .browser__url span{overflow:hidden;text-overflow:ellipsis}
@media (min-width:640px){.sec-features .ft-device .browser__body{min-height:400px}}
@media (max-width:639px){
  .sec-features .ft-device .browser__dots{display:none}
  .sec-features .ft-device .browser__bar{height:36px;padding:0 10px}
}
.ft-phone-stage{flex:1;display:grid;place-items:center;padding:4px 0}
.sec-features .ft-phone{--ph-w:238px;aspect-ratio:9/17.6}
@media (min-width:640px){.sec-features .ft-phone{--ph-w:244px}}

/* ---------- shared mini-site pieces ---------- */
.ft-mini-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px clamp(14px,4.5cqi,26px);min-height:52px}
.ft-mini-nav--dark{color:#fff}
.ft-mini-nav--navy{background:var(--navy);color:#fff}
.ft-mini-nav--line{border-bottom:1px solid var(--line);background:#fff}
.ft-mini-logo{display:inline-flex;align-items:center;gap:8px;font:750 15px/1 var(--f-display);letter-spacing:-.015em;white-space:nowrap}
.ft-mini-logo--brisa{color:#06737F}
.ft-mini-logo--solana{color:#2E4A2B}
.ft-mini-mark{flex:none;width:18px;height:18px;border-radius:50%}
.ft-mini-mark--sun{background:radial-gradient(circle at 50% 50%,var(--sun) 0 45%,transparent 47%),conic-gradient(from 0deg,var(--sun) 0 10%,transparent 10% 25%,var(--sun) 25% 35%,transparent 35% 50%,var(--sun) 50% 60%,transparent 60% 75%,var(--sun) 75% 85%,transparent 85%)}
.ft-mini-mark--teal{background:radial-gradient(circle at 35% 35%,#fff 0 18%,transparent 20%),var(--teal)}
.ft-mini-mark--olive{border-radius:50% 50% 50% 0;background:#4E7A45;transform:rotate(-45deg)}
.ft-mini-mark--pink{border-radius:4px;background:linear-gradient(135deg,#FF5FA2,#7B5CFF)}
.ft-mini-links{display:none;gap:16px;font-size:13.5px;font-weight:600;opacity:.92}
@container (min-width:460px){.ft-mini-links{display:flex}}
.ft-mini-pill{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--foam);color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap}
.ft-mini-pill--dark{background:rgba(255,255,255,.12);color:#fff}
.ft-mini-pill--sample{background:var(--sun-100);color:#634500}
.ft-mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 18px;border-radius:var(--r-pill);font:600 14px/1 var(--f-body);white-space:nowrap}
.ft-mini-btn .i{width:16px;height:16px}
.ft-mini-btn--sun{background:var(--sun);color:var(--navy)}
.ft-mini-btn--glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.ft-mini-btn--teal{background:#06737F;color:#fff}
.ft-mini-btn--olive{background:#3E6A37;color:#fff}
.ft-mini-btn--white{background:#fff;color:#06737F}
.ft-hero :focus-visible,.ft-gal :focus-visible,.ft-ps--dark :focus-visible,.ft-lb :focus-visible{outline-color:var(--sun)}

/* ---------- 1. header styles ---------- */
.ft-hero{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--navy-900);color:#fff}
.ft-hero__bg{position:absolute;inset:0;z-index:-1;opacity:0;visibility:hidden}
.ft-hero--photo .ft-hero__photo,.ft-hero--video .ft-hero__video,.ft-hero--type .ft-hero__type{opacity:1;visibility:inherit}
.ft-motion .ft-hero__bg{transition:opacity .7s var(--ease-out),visibility 0s linear .7s}
.ft-motion .ft-hero--photo .ft-hero__photo,.ft-motion .ft-hero--video .ft-hero__video,.ft-motion .ft-hero--type .ft-hero__type{transition:opacity .7s var(--ease-out),visibility 0s}
/* a sunny terrace, drawn: sky, low sun, sea, two parasols */
.ft-hero__photo{background:radial-gradient(circle at 74% 66%,#FFF4C9 0 4%,rgba(255,214,92,.85) 4.6%,rgba(252,185,0,.28) 13%,transparent 26%),linear-gradient(180deg,#0E3866 0%,#2D6A9C 32%,#D99A5E 60%,#F6BE58 67.5%,#0B7480 68%,#075563 82%,#052F45 100%)}
.ft-hero__photo::before{content:"";position:absolute;left:0;right:0;top:68%;bottom:0;background:repeating-linear-gradient(180deg,rgba(255,236,170,.22) 0 2px,transparent 2px 10px);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 65%,transparent 95%);mask-image:linear-gradient(90deg,transparent 30%,#000 65%,transparent 95%)}
.ft-hero__photo::after,.ft-hero__video::after,.ft-hero__type::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(4,26,54,.92) 0%,rgba(4,26,54,.55) 38%,rgba(4,26,54,0) 70%)}
.ft-par{position:absolute;bottom:0;width:30%;aspect-ratio:2/1.15}
.ft-par::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;border-radius:999px 999px 0 0;background:repeating-linear-gradient(90deg,#041A36 0 16.6%,#0D4683 16.6% 33.3%)}
.ft-par::after{content:"";position:absolute;left:calc(50% - 1.5px);top:40%;bottom:0;width:3px;background:#041A36}
.ft-par--1{right:4%}
.ft-par--2{right:30%;width:22%;bottom:-2%;opacity:.85}
/* a slow moving gradient standing in for a video loop */
.ft-hero__video{overflow:hidden;background:#06213F}
.ft-hero__film{position:absolute;top:0;bottom:0;left:0;width:300%;background:radial-gradient(ellipse 12% 30% at 18% 18%,rgba(255,244,201,.4),transparent 70%),radial-gradient(ellipse 12% 30% at 52% 14%,rgba(118,210,219,.35),transparent 70%),radial-gradient(ellipse 12% 30% at 84% 20%,rgba(252,185,0,.35),transparent 70%),linear-gradient(100deg,#041A36 0%,#0D4683 15%,#0B6E7A 30%,#1E5B3C 45%,#06213F 58%,#6E3A12 72%,#0D4683 86%,#041A36 100%)}
.ft-hero__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sun);transform-origin:0 50%;transform:scaleX(.35);z-index:1}
.ft-motion .ft-hero__film{animation:ft-film 18s linear infinite alternate;animation-play-state:paused}
.ft-motion .ft-hero__prog{animation:ft-prog 8s linear infinite;animation-play-state:paused}
.ft-motion.ft-live .ft-panel.is-active .ft-hero--video .ft-hero__film,.ft-motion.ft-live .ft-panel.is-active .ft-hero--video .ft-hero__prog{animation-play-state:running}
@keyframes ft-film{to{transform:translateX(-66.66%)}}
@keyframes ft-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ft-hero__rec{position:absolute;top:58px;right:clamp(14px,4.5cqi,26px);z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:12.5px;font-weight:600;opacity:0;visibility:hidden}
.ft-hero__rec .i{width:11px;height:11px}
.ft-hero--video .ft-hero__rec{opacity:1;visibility:inherit}
.ft-hero__type{background:radial-gradient(circle at 88% 8%,rgba(252,185,0,.32),transparent 42%),radial-gradient(circle at 0% 100%,rgba(12,165,181,.34),transparent 52%),var(--navy-900)}
.ft-hero__copy{position:relative;margin-top:auto;padding:clamp(18px,6cqi,40px)}
.ft-hero__modes{display:grid}
.ft-hero__mode{grid-area:1/1;align-self:end;opacity:0;visibility:hidden}
.ft-hero--photo .ft-hero__mode--photo,.ft-hero--video .ft-hero__mode--video,.ft-hero--type .ft-hero__mode--type{opacity:1;visibility:inherit}
.ft-motion .ft-hero__mode{transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.ft-motion .ft-hero--photo .ft-hero__mode--photo,.ft-motion .ft-hero--video .ft-hero__mode--video,.ft-motion .ft-hero--type .ft-hero__mode--type{transform:none;transition:opacity .6s var(--ease-out) .15s,transform .8s var(--ease-out) .15s,visibility 0s}
.ft-hero__h{font:800 clamp(27px,7.4cqi,50px)/.98 var(--f-display);letter-spacing:-.035em;max-width:13ch;text-wrap:balance}
.ft-hero__h--type{max-width:none}
.ft-hero__p{margin-top:12px;font-size:clamp(14.5px,2.6cqi,16.5px);line-height:1.45;color:rgba(255,255,255,.88);max-width:36ch}
.ft-hero__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ft-rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ft-rot__w{grid-area:1/1;color:var(--sun);white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(105%)}
.ft-rot__w.is-on{opacity:1;visibility:inherit;transform:none}
.ft-rot__w.is-out{transform:translateY(-105%)}
.ft-motion .ft-rot__w{transition:transform .75s var(--ease-out),opacity .5s ease,visibility 0s linear .75s}
.ft-motion .ft-rot__w.is-on{transition:transform .75s var(--ease-out),opacity .5s ease,visibility 0s}
@container (max-width:420px){.ft-rot{display:grid}}

/* ---------- 2. languages ---------- */
.ft-lang{flex:1;display:flex;flex-direction:column;background:#fff}
.ft-lang .ft-mini-nav{flex-wrap:wrap}
.ft-lang__sw{display:flex;gap:4px}
.ft-lang__b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--r-pill);border:1.5px solid transparent;font:700 13px/1 var(--f-body);color:var(--ink-2);transition:border-color .25s,background-color .25s,color .25s}
.ft-lang__b .flag{width:20px;height:20px}
.ft-lang__b:hover{border-color:var(--line-2)}
.ft-lang__b[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-50);color:#06737F}
@container (max-width:380px){.ft-lang__code{display:none}.ft-lang__b{padding:0}}
.ft-lang__art{position:relative;height:clamp(84px,22cqi,120px);overflow:hidden;background:linear-gradient(120deg,#0CA5B5,#06737F)}
.ft-lang__bub{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),rgba(255,255,255,.18) 45%,rgba(255,255,255,.05) 70%);border:1px solid rgba(255,255,255,.4)}
.ft-lang__bub--1{width:46px;height:46px;left:58%;top:16%}
.ft-lang__bub--2{width:24px;height:24px;left:72%;top:58%}
.ft-lang__bub--3{width:70px;height:70px;left:80%;top:-20%}
.ft-lang__shirt{position:absolute;left:clamp(14px,4.5cqi,26px);bottom:14px;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);color:#fff}
.ft-lang__shirt .i{width:28px;height:28px}
.ft-motion.ft-live .ft-panel.is-active .ft-lang__bub{animation:ft-float 7s ease-in-out infinite alternate}
.ft-motion.ft-live .ft-panel.is-active .ft-lang__bub--2{animation-duration:5s}
@keyframes ft-float{to{transform:translateY(-10px)}}
.ft-lang__stack{display:grid;padding:clamp(16px,5cqi,30px)}
.ft-lang__v{grid-area:1/1;opacity:0;visibility:hidden}
.ft-lang__v.is-on{opacity:1;visibility:inherit}
.ft-motion .ft-lang__v{transition:opacity .35s ease,visibility 0s linear .35s}
.ft-motion .ft-lang__v.is-on{transition:opacity .5s var(--ease-out) .05s,visibility 0s}
.ft-lang__h{font:750 clamp(20px,5cqi,28px)/1.08 var(--f-display);letter-spacing:-.025em;color:var(--navy)}
.ft-lang__p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:48ch}
.ft-lang__prices{list-style:none;margin:14px 0 16px;display:grid;gap:6px;max-width:420px}
.ft-lang__prices li{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--ink-2)}
.ft-lang__prices li::after{content:"";order:2;flex:1;min-width:16px;border-bottom:2px dotted var(--line-2);transform:translateY(-4px)}
.ft-lang__prices b{order:3;color:var(--navy);white-space:nowrap}

/* ---------- 3. menu ---------- */
.ft-menu{flex:1;display:flex;flex-direction:column;background:#fff}
.ft-menu__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:16px clamp(14px,5cqi,28px) 6px}
.ft-menu__h{font:750 clamp(22px,5cqi,30px)/1 var(--f-display);letter-spacing:-.025em;color:#2E4A2B}
.ft-menu__legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--mute)}
.ft-leg{display:inline-flex;align-items:center;gap:5px}
.ft-alg{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font:700 10.5px/1 var(--f-body);color:#fff}
.ft-alg--g{background:#7A5300}
.ft-alg--l{background:#1D5A9E}
.ft-alg--e{background:#8C3B1E}
.ft-menu__list{list-style:none;display:grid;gap:0;padding:0 clamp(14px,5cqi,28px) 16px}
.ft-dish{display:flex;align-items:center;gap:8px;padding:13px 0;border-bottom:1px dashed var(--line-2)}
.ft-dish:last-child{border-bottom:0}
.ft-dish__ph{display:none}
.ft-dish__name{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.ft-dish__alg{display:inline-flex;gap:3px;flex:none}
.ft-dish__lead{flex:1;min-width:10px;border-bottom:2px dotted var(--line-2);transform:translateY(5px)}
.ft-dish__price{flex:none;font:700 15.5px/1 var(--f-display);color:#2E4A2B;white-space:nowrap}
.ft-menu--cards .ft-menu__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ft-menu--cards .ft-dish{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ph ph" "name name" "alg price";align-items:center;gap:7px 8px;padding:0 0 11px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ft-menu--cards .ft-dish:last-child{border-bottom:1px solid var(--line)}
.ft-menu--cards .ft-dish__ph{display:block;grid-area:ph;aspect-ratio:5/2}
.ft-menu--cards .ft-dish__name{grid-area:name;padding:0 11px;font-size:14px}
.ft-menu--cards .ft-dish__alg{grid-area:alg;padding-left:11px}
.ft-menu--cards .ft-dish__price{grid-area:price;padding-right:11px}
.ft-menu--cards .ft-dish__lead{display:none}
@container (min-width:560px){
  .ft-menu--cards .ft-menu__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft-menu--cards .ft-dish__ph{aspect-ratio:4/3}
}
.ft-dish__ph--1{background:radial-gradient(circle at 50% 55%,#E3B46F 0 17%,#B97B33 18% 21%,transparent 22%),radial-gradient(circle at 50% 55%,#fff 0 30%,#E6E0D6 31% 33%,transparent 34%),linear-gradient(135deg,#F6C453,#E39A2D)}
.ft-dish__ph--2{background:radial-gradient(circle at 50% 55%,#F3CE57 0 18%,#D8A72E 19% 21%,transparent 22%),radial-gradient(circle at 50% 55%,#fff 0 30%,#E6E0D6 31% 33%,transparent 34%),linear-gradient(135deg,#76D2DB,#0CA5B5)}
.ft-dish__ph--3{background:radial-gradient(circle at 50% 55%,#C99868 0 12%,#6B3E1F 13% 17%,#fff 18% 21%,transparent 22%),radial-gradient(circle at 50% 55%,#fff 0 30%,#E6E0D6 31% 33%,transparent 34%),linear-gradient(135deg,#0D4683,#022D5B)}
.ft-dish__ph--4{background:radial-gradient(circle at 50% 55%,#FFF7EA 0 8%,#E07A2B 9% 18%,#FFF7EA 19% 21%,transparent 22%),radial-gradient(circle at 50% 55%,#fff 0 30%,#E6E0D6 31% 33%,transparent 34%),linear-gradient(135deg,#FFD45C,#FCB900)}

/* ---------- 4. booking ---------- */
.ft-book{flex:1;display:flex;flex-direction:column;background:#fff}
.ft-book__form{padding:16px clamp(14px,5cqi,28px) 18px}
.ft-book__fs{min-width:0;margin:0;padding:0;border:0}
.ft-book__h{padding:0;margin-bottom:14px;font:750 clamp(20px,4.8cqi,28px)/1.05 var(--f-display);letter-spacing:-.025em;color:#2E4A2B}
.ft-book__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container (min-width:640px){.ft-book__grid{grid-template-columns:1.2fr 1fr .8fr 1.4fr}}
.ft-f{display:grid;align-content:start;gap:5px;min-width:0}
.ft-f__l{font:600 13.5px/1.2 var(--f-body);color:var(--ink-2)}
.ft-in{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);font:400 16px/1.2 var(--f-body);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .25s}
.ft-in::placeholder{color:#7D8B9B}
.ft-in::-webkit-date-and-time-value{text-align:left}
.ft-in:hover{border-color:var(--navy-300)}
.ft-in:focus{outline:none;border-color:#3E6A37;box-shadow:0 0 0 4px rgba(62,106,55,.18)}
.ft-in--sel{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23022D5B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;cursor:pointer}
.ft-f.is-invalid .ft-in{border-color:var(--err);box-shadow:0 0 0 4px rgba(201,56,56,.12)}
.ft-f__e{font-size:13px;font-weight:500;line-height:1.3;color:var(--err)}
.ft-book__go{width:100%;min-height:48px;margin-top:16px;font-size:15px;cursor:pointer;transition:background-color .25s}
.ft-book__go:hover{background:#2E5528}
.ft-book__ok{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:22px clamp(16px,6cqi,36px)}
.ft-book__tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ok);color:#fff}
.ft-book__tick .i{width:28px;height:28px;stroke-width:2.8;stroke-dasharray:24;stroke-dashoffset:0}
.ft-motion .ft-book__tick{animation:ft-pop .6s var(--ease-spring)}
.ft-motion .ft-book__tick .i{animation:ft-draw .55s var(--ease-out) .15s both}
@keyframes ft-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
.ft-book__okh{font:750 clamp(22px,5cqi,30px)/1.05 var(--f-display);letter-spacing:-.025em;color:var(--navy);outline:none}
.ft-book__sum{font-size:16px;font-weight:600;color:var(--ink)}
.ft-book__note{display:flex;gap:10px;align-items:flex-start;max-width:46ch;padding:12px 14px;border-radius:var(--r-sm);background:var(--foam);font-size:14px;line-height:1.45;color:var(--ink-2)}
.ft-book__note .i{width:18px;height:18px;flex:none;margin-top:1px;color:#128C4B}
.ft-link{min-height:44px;font-weight:600;font-size:15px;color:var(--teal-700);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1.5px}
.ft-link:hover{color:var(--navy)}

/* ---------- 5. reviews ---------- */
.ft-rev{flex:1;display:flex;flex-direction:column;background:#fff}
.ft-rev__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(14px,5cqi,28px) 12px}
.ft-rev__h{font:750 clamp(20px,4.8cqi,28px)/1.05 var(--f-display);letter-spacing:-.025em;color:#2E4A2B}
.ft-rev__ctl{display:flex;gap:8px;flex:none}
.ft-circ{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;color:var(--navy);transition:border-color .25s,background-color .25s}
.ft-circ:hover{border-color:var(--navy)}
.ft-circ .i{width:20px;height:20px}
.ft-rev__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(14px,5cqi,28px);padding:4px clamp(14px,5cqi,28px) 6px;border-radius:4px}
@container (min-width:560px){.ft-rev__track{grid-auto-columns:76%}}
.ft-rev__card{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;margin:0;padding:clamp(16px,4cqi,24px);border:1px solid var(--line);border-radius:16px;background:#fff}
.ft-stars{display:flex;gap:2px;color:var(--sun)}
.ft-stars .i{width:19px;height:19px}
.ft-stars__row{display:block;width:101px;height:19px;fill:currentColor}
.ft-rev__q{margin:0;font-size:clamp(15.5px,3.2cqi,18px);line-height:1.5;color:var(--ink)}
.ft-rev__by{display:flex;align-items:center;gap:10px;margin-top:auto}
.ft-rev__av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#4E7A45;color:#fff;font:700 15px/1 var(--f-display)}
.ft-rev__av--2{background:var(--navy-600)}
.ft-rev__av--3{background:#8C3B1E}
.ft-rev__who{display:grid;gap:2px;font-size:14px;line-height:1.2}
.ft-rev__who b{color:var(--ink)}
.ft-rev__who small{font-size:13px;color:var(--mute)}
.ft-rev__dots{display:flex;justify-content:center;padding:4px 0 8px}
.ft-dot{display:grid;place-items:center;width:44px;height:44px}
.ft-dot::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--line-2);transition:width .4s var(--ease-out),background-color .3s}
.ft-dot[aria-current="true"]::before{width:22px;background:#2E4A2B}

/* ---------- 6. gallery ---------- */
.ft-gal{flex:1;display:flex;flex-direction:column;background:#0B0820;color:#fff}
.ft-gal__grid{list-style:none;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(92px,1fr);gap:6px;padding:4px clamp(8px,2.6cqi,14px) clamp(8px,2.6cqi,14px)}
.ft-gal__grid>li{display:flex;min-width:0}
.ft-gal__tile{position:relative;flex:1;display:block;overflow:hidden;border-radius:10px;isolation:isolate}
.ft-gal__tile .ft-ph{position:absolute;inset:0;z-index:-1}
.ft-motion .ft-gal__tile .ft-ph{transition:transform .7s var(--ease-out)}
.ft-motion .ft-gal__tile:hover .ft-ph{transform:scale(1.06)}
.ft-gal__cap{position:absolute;left:0;right:0;bottom:0;display:none;padding:22px 10px 8px;background:linear-gradient(to top,rgba(5,3,12,.85),transparent);font:600 12.5px/1.25 var(--f-body);text-align:left}
@container (min-width:480px){.ft-gal__cap{display:block}}

/* drawn "photos" for the gallery, lightbox and the phone poster */
.ft-ph{display:block;overflow:hidden;background-color:#120A24}
.ft-ph::before,.ft-ph::after{content:"";position:absolute;inset:0;pointer-events:none}
.ft-ph--1{background:conic-gradient(from 158deg at 28% -6%,transparent 0deg,rgba(255,214,92,.55) 10deg,transparent 24deg),conic-gradient(from 178deg at 74% -6%,transparent 0deg,rgba(118,210,219,.5) 10deg,transparent 24deg),radial-gradient(ellipse 70% 34% at 50% 100%,rgba(255,95,162,.6),transparent 70%),linear-gradient(180deg,#1B1035,#0A0718)}
.ft-ph--1::after{background:radial-gradient(circle at 50% 100%,#05030C 0 54%,transparent 56%) 0 100%/13% 22% repeat-x,radial-gradient(circle at 50% 100%,#140B2A 0 54%,transparent 56%) 6% 92%/15% 22% repeat-x}
.ft-ph--2{background:radial-gradient(circle at 20% 12%,rgba(255,214,92,.7),transparent 18%),radial-gradient(circle at 60% 12%,rgba(255,214,92,.6),transparent 16%),linear-gradient(180deg,#2A1608 0 30%,#7A4A1A 30% 32%,#2A1608 32% 56%,#7A4A1A 56% 58%,#3A1F0B 58% 70%,#B8742A 70% 76%,#5A3210 76%)}
.ft-ph--2::before{top:12%;bottom:46%;background:repeating-linear-gradient(90deg,transparent 0 5%,rgba(118,210,219,.55) 5% 7%,transparent 7% 10%,rgba(255,190,110,.6) 10% 12%,transparent 12% 15%)}
.ft-ph--3{background:radial-gradient(circle at 50% 64%,#FFF1C2 0 6%,rgba(252,185,0,.7) 7%,transparent 28%),linear-gradient(180deg,#3B2A6B 0%,#C0567A 36%,#F59E5B 56%,#FCB900 64%,#0B6E7A 64.5%,#062E44 100%)}
.ft-ph--3::after{top:auto;height:30%;background:linear-gradient(#140A1F,#140A1F) 0 0/100% 6% no-repeat,repeating-linear-gradient(90deg,#140A1F 0 3px,transparent 3px 18px)}
.ft-ph--4{background:radial-gradient(ellipse 46% 80% at 50% 0%,rgba(255,241,194,.5),transparent 72%),linear-gradient(#0B3B4F,#041A36)}
.ft-ph--4::before{background:radial-gradient(circle at 50% 36%,#E6F4F5 0 5%,#8FA6C4 5.5% 6.5%,transparent 7%),linear-gradient(90deg,transparent calc(50% - 1.5px),#C5D2D4 calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)) 0 100%/100% 58% no-repeat}
.ft-ph--4::after{background:radial-gradient(ellipse 22% 5% at 50% 96%,#C5D2D4 0 60%,transparent 64%)}
.ft-ph--5{background:radial-gradient(circle at 80% 20%,rgba(12,165,181,.45),transparent 40%),linear-gradient(#0A1F3A,#041A36)}
.ft-ph--5::before{top:30%;left:8%;right:8%;bottom:14%;background:repeating-linear-gradient(90deg,transparent 0 2%,var(--teal-300) 2% 9%,transparent 9% 11%);clip-path:polygon(0 70%,11% 70%,11% 30%,22% 30%,22% 55%,33% 55%,33% 10%,44% 10%,44% 45%,55% 45%,55% 0,66% 0,66% 40%,77% 40%,77% 62%,88% 62%,88% 25%,100% 25%,100% 100%,0 100%)}
.ft-ph--5::after{top:auto;height:14%;background:repeating-linear-gradient(90deg,rgba(252,185,0,.8) 0 6%,transparent 6% 9%) 8% 0/84% 30% no-repeat}
.ft-ph--6{background:radial-gradient(circle at 18% 18%,rgba(255,95,162,.65),transparent 38%),radial-gradient(circle at 82% 14%,rgba(12,165,181,.65),transparent 38%),radial-gradient(circle at 50% 40%,rgba(255,241,194,.25),transparent 30%),#120A24}
.ft-ph--6::before{background:linear-gradient(80deg,transparent 46%,#05030C 46% 49%,transparent 49%) 22% 70%/18% 34% no-repeat,linear-gradient(100deg,transparent 46%,#05030C 46% 49%,transparent 49%) 70% 66%/18% 36% no-repeat}
.ft-ph--6::after{background:radial-gradient(circle at 50% 100%,#05030C 0 54%,transparent 56%) 0 100%/11% 24% repeat-x,radial-gradient(circle at 50% 100%,#1E1238 0 54%,transparent 56%) 5% 90%/12% 22% repeat-x}

/* lightbox */
.ft-lb{width:min(92vw,880px,calc((86vh - 80px) * 4 / 3));max-width:none;max-height:none;padding:0;border:0;background:transparent;color:#fff;overflow:visible}
.ft-lb::backdrop{background:rgba(2,15,34,.88)}
.ft-lb__in{position:relative;display:grid;gap:14px}
.ft-lb__img{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh-float);touch-action:pan-y;user-select:none}
.ft-lb__img .ft-ph{position:absolute;inset:0}
.ft-lb__bar{display:flex;align-items:center;gap:10px}
.ft-lb__cap{flex:1;min-width:0;font:700 clamp(17px,2vw,21px)/1.2 var(--f-display);letter-spacing:-.015em}
.ft-lb__count{font-size:14px;color:var(--on-dark-2);white-space:nowrap}
.ft-lb .ft-circ{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.ft-lb .ft-circ:hover{border-color:#fff}
.ft-lb .ft-lb__x{position:absolute;top:12px;right:12px;z-index:2;background:#fff;border-color:#fff;color:var(--navy)}

/* ---------- 7. map and hours ---------- */
.ft-hours{flex:1;display:flex;flex-direction:column;background:#fff}
.ft-hours__grid{flex:1;display:grid;grid-template-rows:minmax(132px,1fr) auto}
@container (min-width:560px){.ft-hours__grid{grid-template-columns:1.05fr 1fr;grid-template-rows:none}}
.ft-map{position:relative;min-height:132px;overflow:hidden;background:#E7EEF0}
.ft-map__art{position:absolute;inset:0;background:linear-gradient(28deg,transparent 0 47%,#fff 47% 50%,transparent 50%),linear-gradient(-58deg,transparent 0 61%,#fff 61% 63%,transparent 63%),linear-gradient(90deg,transparent 0 68%,#fff 68% 70.5%,transparent 70.5%),linear-gradient(0deg,transparent 0 44%,#fff 44% 46.5%,transparent 46.5%),linear-gradient(90deg,transparent 0 24%,#F6F8F8 24% 25.5%,transparent 25.5%),radial-gradient(ellipse 16% 13% at 20% 26%,#CDE7C6 0 96%,transparent 100%),#E7EEF0}
.ft-map__sea{position:absolute;inset:0;background:linear-gradient(160deg,#A6DCE3,#7CC9D3);clip-path:polygon(0 84%,22% 78%,46% 84%,70% 74%,100% 66%,100% 100%,0 100%)}
.ft-map__pin{position:absolute;left:44%;top:30%;display:grid;place-items:center;width:40px;height:40px;color:var(--navy);transform-origin:50% 100%}
.ft-map__pin .i{width:38px;height:38px;fill:var(--sun);stroke:var(--navy);stroke-width:1.8}
.ft-map__pin::after{content:"";position:absolute;left:50%;bottom:-2px;width:18px;height:6px;margin-left:-9px;border-radius:50%;background:radial-gradient(closest-side,rgba(4,26,54,.35),transparent);z-index:-1}
.ft-motion .ft-panel.is-active .ft-map__pin{animation:ft-drop .9s var(--ease-spring) .35s both}
@keyframes ft-drop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
.ft-map__load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding:12px;color:var(--ink-2);text-decoration:none}
.ft-map__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--navy);color:#fff;font:600 14.5px/1 var(--f-body);transition:background-color .25s}
.ft-map__load:hover .ft-map__btn{background:var(--navy-600)}
.ft-map__btn .i{width:17px;height:17px}
.ft-map__note{padding:3px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);font-size:12.5px;line-height:1.35;text-align:center;color:var(--ink-2)}
.ft-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lenis.lenis-smooth .sec-features .ft-map iframe{pointer-events:auto}
.ft-hours__info{padding:12px clamp(14px,5cqi,24px) 14px}
.ft-now{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.ft-now__badge{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px;border-radius:var(--r-pill);background:#E3F5EC;color:#11663F;font:700 14px/1 var(--f-body)}
.ft-now.is-closed .ft-now__badge{background:#FBE7E7;color:#9E2626}
.ft-now__dot{position:relative;width:8px;height:8px;border-radius:50%;background:currentColor}
.ft-motion.ft-live .ft-panel.is-active .ft-now:not(.is-closed) .ft-now__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:live-ping 2s var(--ease-out) infinite}
.ft-now__more{font-size:13.5px;color:var(--mute)}
.ft-hours__tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.ft-hours__tbl th,.ft-hours__tbl td{padding:4px 8px;line-height:1.35}
.ft-hours__tbl th{text-align:left;font-weight:500;color:var(--ink-2)}
.ft-hours__tbl td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.ft-hours__tbl tr.is-today th,.ft-hours__tbl tr.is-today td{background:var(--sun-100);font-weight:700;color:var(--navy)}
.ft-hours__tbl tr.is-today th{border-radius:8px 0 0 8px}
.ft-hours__tbl tr.is-today td{border-radius:0 8px 8px 0}
.ft-today{display:none;margin-left:6px;padding:2px 7px;border-radius:var(--r-pill);background:var(--navy);color:#fff;font-size:11px;font-weight:700;vertical-align:1px}
.ft-hours__tbl tr.is-today .ft-today{display:inline-block}

/* ---------- 8 + 9. phone demos ---------- */
.ft-ps{isolation:isolate;display:flex;flex-direction:column;font-size:13px;line-height:1.4;color:var(--ink)}
.ft-ps--dark{background:#0B0820;color:#fff}
.ft-ps__top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:76px;padding:28px 6px 4px 16px}
.ft-ps--brisa .ft-ps__top{border-bottom:1px solid var(--line);padding-right:16px}
.ft-ps__burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:inherit}
.ft-ps__burger .i{width:22px;height:22px}
.ft-ps__body{flex:1;display:flex;flex-direction:column;gap:10px;padding:4px 14px 14px;min-height:0;transition:padding-bottom .4s var(--ease-out)}
.ft-ps__poster{position:relative;min-height:128px;border-radius:14px;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;isolation:isolate}
.ft-ps__poster::before,.ft-ps__poster::after{z-index:-1}
.ft-ps__tag{align-self:flex-start;padding:3px 9px;border-radius:var(--r-pill);background:#FF5FA2;color:#1A0614;font-size:11.5px;font-weight:700}
.ft-ps__title{margin-top:6px;font:800 21px/1.02 var(--f-display);letter-spacing:-.03em}
.ft-ps__sub{margin-top:4px;font-weight:700;font-size:13px;color:var(--on-dark-2)}
.ft-ps__list{list-style:none;display:grid;gap:6px}
.ft-ps__list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.07);font-weight:600}
.ft-ps__date{display:grid;place-items:center;flex:none;min-width:36px;height:24px;padding:0 6px;border-radius:6px;background:rgba(255,95,162,.2);color:#FF8DBE;font-size:11.5px;font-weight:700}
.ft-ps__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px 14px;background:#fff;border-top:1px solid var(--line);color:var(--ink-2);transform:translateY(105%);visibility:hidden}
[data-mode="bar"] .ft-ps__bar{transform:none;visibility:inherit}
[data-mode="bar"] .ft-ps__burger{visibility:hidden}
[data-mode="bar"] .ft-ps__body{padding-bottom:84px}
.ft-motion .ft-ps__bar{transition:transform .55s var(--ease-out),visibility 0s linear .55s}
.ft-motion [data-mode="bar"] .ft-ps__bar{transition:transform .65s var(--ease-spring),visibility 0s}
.ft-ps__act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;border-radius:12px;font-size:11px;font-weight:700;color:var(--ink-2)}
.ft-ps__act .i{width:21px;height:21px}
.ft-ps__act--call{color:var(--navy)}
.ft-ps__act--call .i{color:var(--teal-700)}
.ft-ps__act--wa .i{color:#128C4B}
.ft-ps__drawer{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:76px 20px 20px;background:var(--navy-900);color:#fff;transform:translateX(102%);visibility:hidden}
.ft-ps__drawer.is-open{transform:none;visibility:inherit}
.ft-motion .ft-ps__drawer{transition:transform .5s var(--ease-out),visibility 0s linear .5s}
.ft-motion .ft-ps__drawer.is-open{transition:transform .55s var(--ease-out),visibility 0s}
.ft-ps__x{position:absolute;top:26px;right:8px;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff}
.ft-ps__link{min-height:46px;font:700 22px/1 var(--f-display);letter-spacing:-.02em;color:#fff;text-align:left}
.ft-ps__link:hover{color:var(--sun)}
.ft-ps__dquick{display:flex;gap:8px;margin-top:auto}
.ft-ps__chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);font-weight:700;font-size:12.5px;color:#fff}
.ft-ps__chip .i{width:16px;height:16px}
.ft-ps__chip--wa{background:var(--wa);color:#04381C}
.ft-ps__toast{position:absolute;left:12px;right:12px;bottom:16px;z-index:6;padding:10px 12px;border-radius:12px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;line-height:1.35;box-shadow:var(--sh-lift);opacity:0;transform:translateY(8px);pointer-events:none}
.ft-ps__toast:empty{display:none}
[data-mode="bar"] .ft-ps__toast{bottom:84px}
.ft-ps__toast.is-on{opacity:1;transform:none}
.ft-motion .ft-ps__toast{transition:opacity .3s ease,transform .45s var(--ease-out)}

.ft-ps--brisa{background:#fff}
.ft-ps__hero{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 14px;border-radius:14px;background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.35) 0 10%,transparent 11%),radial-gradient(circle at 78% 30%,rgba(255,255,255,.25) 0 5%,transparent 6%),linear-gradient(135deg,#0CA5B5,#06737F);color:#fff}
.ft-ps__hero .ft-ps__title{margin:0;font-size:19px}
.ft-ps__hero .ft-mini-btn{min-height:34px;padding:0 14px;font-size:12.5px}
.ft-ps__svc{list-style:none;display:grid;gap:6px}
.ft-ps__svc li{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;font-weight:600;color:var(--ink-2)}
.ft-ps__svc .i{width:18px;height:18px;color:#06737F}
.ft-wa-fab{position:absolute;right:14px;bottom:16px;z-index:3;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 10px 22px -8px rgba(18,140,75,.65);isolation:isolate}
.ft-wa-fab .i{width:28px;height:28px}
.ft-wa-fab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--wa);opacity:0}
.ft-motion .ft-wa-fab::before{animation:ft-ring 2.4s var(--ease-out) infinite;animation-play-state:paused}
.ft-motion.ft-live .ft-panel.is-active .ft-wa-fab::before{animation-play-state:running}
@keyframes ft-ring{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(1.7);opacity:0}}
.ft-wa-bubble{position:absolute;right:14px;bottom:82px;z-index:3;display:block;max-width:78%;padding:10px 12px;border-radius:16px 16px 4px 16px;background:#fff;box-shadow:var(--sh-lift);border:1px solid var(--line);font-size:13px;line-height:1.4;font-weight:500;color:var(--ink);text-align:left;transform-origin:100% 100%;opacity:0;visibility:hidden;transform:scale(.6) translateY(10px)}
.ft-wa-bubble.is-shown{opacity:1;visibility:inherit;transform:none}
.ft-motion .ft-wa-bubble{transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s}
.ft-motion .ft-wa-bubble.is-shown{transition:opacity .3s ease,transform .6s var(--ease-spring),visibility 0s}
.ft-wa-bubble__dots{display:none;gap:4px;padding:4px 2px}
.ft-wa-bubble__dots i{width:7px;height:7px;border-radius:50%;background:var(--navy-300)}
.ft-motion .ft-wa-bubble__dots i{animation:ft-dots 1s ease-in-out infinite}
.ft-wa-bubble__dots i:nth-child(2){animation-delay:.15s}
.ft-wa-bubble__dots i:nth-child(3){animation-delay:.3s}
@keyframes ft-dots{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.ft-wa-bubble.is-typing .ft-wa-bubble__dots{display:flex}
.ft-wa-bubble.is-typing .ft-wa-bubble__txt{display:none}
.ft-wa-sheet{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:#EAF2EF;transform:translateY(102%);visibility:hidden}
.ft-wa-sheet.is-open{transform:none;visibility:inherit}
.ft-motion .ft-wa-sheet{transition:transform .5s var(--ease-out),visibility 0s linear .5s}
.ft-motion .ft-wa-sheet.is-open{transition:transform .6s var(--ease-out),visibility 0s}
.ft-wa-sheet__top{display:flex;align-items:center;gap:10px;padding:30px 6px 8px 14px;background:#0B5E55;color:#fff}
.ft-wa-sheet__av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);font:700 14px/1 var(--f-display)}
.ft-wa-sheet__who{flex:1;min-width:0;display:grid;line-height:1.2}
.ft-wa-sheet__who b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-wa-sheet__who small{font-size:11.5px;opacity:.85}
.ft-wa-sheet__x{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:#fff}
.ft-wa-sheet__msgs{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;overflow:hidden}
.ft-msg{max-width:84%;padding:8px 11px;border-radius:12px 12px 12px 4px;background:#fff;font-size:12.5px;line-height:1.4;box-shadow:0 1px 1px rgba(4,26,54,.08)}
.ft-msg--out{align-self:flex-end;border-radius:12px 12px 4px 12px;background:#D9FDD3}
.ft-msg--typing .ft-wa-bubble__dots{display:flex}
.ft-wa-sheet__note{margin:0 12px 8px;padding:7px 10px;border-radius:10px;background:var(--sun-100);color:#634500;font-size:11.5px;font-weight:600;line-height:1.35}
.ft-wa-sheet__compose{display:flex;align-items:center;gap:8px;padding:8px 10px 14px}
.ft-wa-sheet__draft{flex:1;min-width:0;padding:9px 12px;border-radius:18px;background:#fff;font-size:12px;line-height:1.35;color:var(--ink)}
.ft-wa-sheet__draft:empty{visibility:hidden}
.ft-wa-sheet__send{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--wa);color:#04381C}
.ft-wa-sheet__send .i{width:19px;height:19px}
.ft-wa-sheet__send[disabled],.ft-wa-sheet__send[aria-disabled="true"]{opacity:.45;cursor:default}

/* ---------- live tally under the explorer ---------- */
.ft-tally-wrap{min-height:76px;margin-top:22px}
.ft-tally{display:inline-flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:100%;padding:10px 10px 10px 14px;border-radius:var(--r-pill);background:var(--navy);color:#fff;box-shadow:var(--sh-lift)}
.ft-tally__line{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;line-height:1.3}
.ft-tally__n{display:inline-grid;place-items:center;flex:none;min-width:34px;height:34px;padding:0 9px;border-radius:var(--r-pill);background:var(--sun);color:var(--navy);font:800 17px/1 var(--f-display)}
.sec-features .ft-tally .btn:focus-visible{outline-color:var(--sun)}
.sec-features .ft-tally__go{min-height:48px}
@media (max-width:559px){
  .ft-tally-wrap{min-height:124px}
  .ft-tally{display:flex;border-radius:24px;padding:12px}
  .ft-tally__go{width:100%}
}


/* ==========================================================================
   process
   ========================================================================== */
/* How it works: call, preview, refine, publish, grow.
   Default (no JS, reduced motion, phones, tablets): a numbered timeline where every
   step carries a small copy of its device scene in its final state.
   Desktop with motion: process.js adds .ps-pinned and a .ps-stage (one large device
   cloned from the step scenes) and scrubs the story while the section is pinned.
   Scene internals are sized in cqi of the device body, so the same markup scales. */

.sec-process{
  --ps-gap:clamp(44px,8vw,72px);
  --ps-dim:#5B7189;          /* upcoming step titles: 4.5:1 on foam */
}
.sec-process .ps-head{max-width:880px}
.ps-lead strong{font-weight:650;color:var(--navy)}

/* ---------- the timeline ---------- */
.ps-steps{list-style:none;margin:0;padding:0}
.ps-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding-bottom:var(--ps-gap)}
.ps-step:last-child{padding-bottom:0}
.ps-step__marker{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center}
.ps-step__num{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font:800 18px/1 var(--f-display);transition:background-color .45s var(--ease-out),color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.ps-step__line{position:relative;flex:1 1 auto;width:2px;min-height:20px;margin:8px 0 calc(8px - var(--ps-gap));border-radius:2px;background:var(--line-2);overflow:hidden}
.ps-step__line i{position:absolute;inset:0;background:var(--teal);transform-origin:50% 0}
.ps-step__copy{grid-column:2;grid-row:1;min-width:0;padding-top:3px}
.ps-step__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:34px}
.ps-step__title{font-size:var(--fs-h3);color:var(--navy);transition:color .35s var(--ease-out)}
.sec-process .ps-step__when{padding:6px 12px;font-size:13px}
.sec-process .ps-step__when .i{width:14px;height:14px}
.ps-step__text{margin-top:10px;max-width:34em;color:var(--ink-2)}
.ps-step__visual{grid-column:2;grid-row:2;position:relative;z-index:1;margin:24px 0 0 -56px}

/* phones with motion: numbers fill as you reach them (process.js sets .is-reached) */
.ps-motion .ps-step:not(.is-reached) .ps-step__num{background:var(--paper);color:var(--navy);box-shadow:inset 0 0 0 2px var(--line-2)}

@media (min-width:760px){
  .ps-step{grid-template-columns:44px minmax(0,5fr) minmax(0,6fr);column-gap:0}
  .ps-step__marker{grid-row:1}
  .ps-step__num{width:44px;height:44px;font-size:20px}
  .ps-step__copy{padding:5px clamp(28px,4vw,64px) 0 20px}
  .ps-step__visual{grid-column:3;grid-row:1;margin:0}
}

.ps-note{display:flex;align-items:center;gap:8px;margin-top:36px;font-size:14px;line-height:1.4;color:var(--mute)}
.ps-note .i{width:16px;height:16px;color:var(--teal-700)}

/* ---------- desktop: pinned story ---------- */
.ps-stage{display:none}
.ps-step__hit{position:absolute;inset:-8px -12px 6px -10px;z-index:2;border-radius:var(--r-sm)}
.sec-process.ps-pinned .ps-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-process.ps-pinned .ps-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto;column-gap:clamp(40px,5.5vw,96px);align-items:center}
.ps-pinned .ps-steps{grid-column:1;grid-row:1 / span 2}
.ps-pinned .ps-step{--ps-gap:16px;grid-template-columns:44px minmax(0,1fr)}
.ps-pinned .ps-step__visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ps-pinned .ps-step__copy{padding:5px 0 0 18px}
.ps-pinned .ps-step__title{color:var(--ps-dim)}
.ps-pinned .ps-step.is-done .ps-step__title,.ps-pinned .ps-step.is-active .ps-step__title{color:var(--navy)}
.ps-pinned .ps-step:hover .ps-step__title{color:var(--teal-700)}
.ps-pinned .ps-step__num{background:var(--paper);color:var(--ps-dim);box-shadow:inset 0 0 0 2px var(--line-2)}
.ps-pinned .ps-step.is-done .ps-step__num{background:var(--teal-100);color:var(--teal-700);box-shadow:none}
.ps-pinned .ps-step.is-active .ps-step__num{background:var(--navy);color:#fff;box-shadow:0 0 0 6px rgba(2,45,91,.08)}
.ps-pinned .ps-step__more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease-out),opacity .25s ease}
.ps-pinned .ps-step__more-in{min-height:0;overflow:hidden}
.ps-pinned .ps-step.is-active .ps-step__more{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s var(--ease-out),opacity .5s ease .12s}
.ps-measure .ps-step__more,.ps-measure .ps-step__title,.ps-measure .ps-step__num{transition:none!important}
.ps-pinned .ps-stage{display:block;position:relative;isolation:isolate;grid-column:2;grid-row:1}
.ps-pinned .ps-note{grid-column:2;grid-row:2;justify-self:end;margin-top:16px}
.ps-stage__device{position:relative;display:grid;grid-template-columns:minmax(0,1fr);width:min(100%,calc((100vh - var(--header-h) - 170px) * 1.6));margin-left:auto;border-radius:var(--r);box-shadow:var(--sh-float)}
.ps-stage__device>.ps-scene{grid-area:1 / 1;box-shadow:none}
.ps-stage .ps-glow{left:50%;top:50%;width:116%;aspect-ratio:1;translate:-50% -50%;z-index:-1}

/* ---------- closing line ---------- */
.ps-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(56px,8vw,104px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line-2)}
.ps-end__text{max-width:26em;font:700 clamp(22px,2.4vw,30px)/1.18 var(--f-display);letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
@media (max-width:479px){
  .sec-process .ps-end .btn{width:100%;padding-inline:18px;font-size:16px}
}

/* ==========================================================================
   Device scenes (shared by the step visuals and the desktop stage)
   ========================================================================== */
.ps-scene{container:ps-scene / inline-size;width:100%}
.ps-scene .browser__url{gap:6px}
.ps-url__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-url__ic{display:grid;flex:none}
.ps-url__ic>.i{grid-area:1 / 1}
.ps-scene .ps-url__eye{color:var(--mute)}
.ps-tags{display:grid;flex:none}
.ps-tags>*{grid-area:1 / 1;justify-self:end}
.ps-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:600 11.5px/1 var(--f-body);white-space:nowrap}
.ps-tag .i{width:13px;height:13px}
.ps-tag--preview{background:var(--sun-100);color:#634500;border:1px solid #F4D98A}
.ps-tag--live{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ps-tag .live-dot{width:7px;height:7px}
.ps-scene--publish .ps-url__eye,.ps-scene--publish .ps-tag--preview{opacity:0;visibility:hidden}
@container ps-scene (max-width:420px){
  .ps-scene .browser__bar{height:34px;gap:8px;padding:0 10px}
  .ps-scene .browser__dots{gap:5px}
  .ps-scene .browser__dots i{width:8px;height:8px}
  .ps-scene .browser__url{height:22px;padding:0 8px;font-size:10.5px}
  .ps-tag{height:20px;padding:0 8px;font-size:10px}
  .ps-tag--preview .i{display:none}
}

.ps-body{container:ps-body / inline-size;aspect-ratio:4 / 3;background:#FFFDF8;font-family:var(--f-body);line-height:1.3;
  --ps-t1:max(6px,1.4cqi);      /* text inside the mini website */
  --ps-t2:max(9.5px,1.7cqi);    /* overlays that must stay readable */
}
@container ps-scene (min-width:480px){ .ps-body{aspect-ratio:16 / 10} }

/* ---------- scene 1: the call ---------- */
.ps-call{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:max(6px,2cqi);padding:max(6px,2cqi);background:#0B1A2E}
.ps-call__video{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:max(6px,1.6cqi);min-height:0}
.ps-call__tiles{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:max(5px,1.4cqi);min-height:0}
.ps-tile{position:relative;min-height:0;border-radius:max(8px,1.6cqi);overflow:hidden}
.ps-tile--you{background:radial-gradient(120% 95% at 28% 18%,#F7CF95 0%,#D08A47 52%,#8A4B22 100%)}
.ps-tile--us{background:radial-gradient(110% 100% at 50% 25%,#0D4683 0%,#041A36 75%);box-shadow:inset 0 0 0 2px var(--teal)}
.ps-person{position:absolute;left:50%;bottom:0;height:80%;aspect-ratio:1;translate:-50% 0}
.ps-person::before,.ps-person::after{content:"";position:absolute;background:#4A2410;opacity:.5}
.ps-person::before{left:32%;top:4%;width:36%;aspect-ratio:1;border-radius:50%}
.ps-person::after{left:8%;right:8%;bottom:0;height:44%;border-radius:50% 50% 0 0 / 85% 85% 0 0}
.ps-tile__logo{position:absolute;left:50%;top:44%;width:22%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ps-tile__logo img{width:72%;height:auto}
.ps-tile__name{position:absolute;left:max(5px,1.2cqi);bottom:max(5px,1.2cqi);display:inline-flex;align-items:center;gap:.5em;max-width:calc(100% - 2 * max(5px,1.2cqi));padding:.35em .7em;border-radius:.6em;background:rgba(2,15,34,.62);color:#fff;font:600 var(--ps-t2)/1.15 var(--f-body);white-space:nowrap;overflow:hidden}
.ps-tile__wave{display:inline-flex;align-items:flex-end;gap:2px;flex:none;height:.85em}
.ps-tile__wave i{width:2px;border-radius:2px;background:var(--teal-300)}
.ps-tile__wave i:nth-child(1){height:45%}
.ps-tile__wave i:nth-child(2){height:100%}
.ps-tile__wave i:nth-child(3){height:65%}
.ps-call__ctrl{display:flex;justify-content:center;gap:max(6px,1.4cqi)}
.ps-call__ctrl>span{display:grid;place-items:center;width:max(20px,4.4cqi);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
.ps-call__ctrl .i{width:48%;height:48%}
.ps-call__ctrl .ps-call__end{background:#E5484D}
.ps-call__end .i{rotate:135deg}
.ps-notes{display:flex;flex-direction:column;gap:max(6px,1.3cqi);min-height:0;padding:max(8px,2cqi);border-radius:max(8px,1.6cqi);background:#fff;color:var(--ink);overflow:hidden}
.ps-notes__head{display:flex;align-items:center;gap:.5em;padding-bottom:max(5px,1cqi);border-bottom:1px solid var(--line);font:650 var(--ps-t2)/1.2 var(--f-body);color:var(--navy)}
.ps-notes__head .i{width:1.1em;height:1.1em;color:var(--teal-700)}
.ps-notes__list{list-style:none;display:grid;gap:max(4px,1cqi);font-size:var(--ps-t2);line-height:1.32;color:var(--ink-2)}
.ps-notes__list li{position:relative;padding-left:1.05em}
.ps-notes__list li::before{content:"";position:absolute;left:.1em;top:.48em;width:.42em;height:.42em;border-radius:50%;background:var(--teal);transition:opacity .2s}
.ps-notes__list li:has(.is-empty)::before{opacity:0}
.ps-type__off{color:transparent}
.ps-type.is-typing .ps-type__on::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-right:-1.5px;vertical-align:-.16em;background:var(--teal-700)}

/* ---------- the café website (scenes 2 to 5) ---------- */
.ps-site{position:absolute;inset:0;display:grid;grid-template-rows:12% minmax(0,1fr) 29%;background:#FFFDF8;color:#3A2618;overflow:hidden}
.ps-site__nav{display:flex;align-items:center;gap:2.4cqi;min-width:0;padding:0 3.4cqi;border-bottom:1px solid rgba(74,44,26,.08);font-size:var(--ps-t1);line-height:1.2}
.ps-site__logo{display:inline-flex;align-items:center;gap:.8cqi;font:700 max(8px,2.2cqi)/1 var(--f-display);letter-spacing:-.02em;color:#4A2C1A;white-space:nowrap}
.ps-site__mark{width:max(7px,1.8cqi);aspect-ratio:1;border-radius:50%;background:#E9A23B;box-shadow:0 0 0 max(1.5px,.45cqi) rgba(233,162,59,.25)}
.ps-site__links{display:flex;gap:2.2cqi;margin-left:auto;color:#6B5444;white-space:nowrap}
.ps-site__cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;padding:.8cqi 1.8cqi;border-radius:var(--r-pill);background:#4F6672;color:#fff;font-weight:600;white-space:nowrap}
.ps-site__cta>span{position:relative;z-index:1}
.ps-warm{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none}
.ps-site__cta>.ps-warm{background:#A3602A}
.ps-site--refined .ps-warm{opacity:1}
.ps-site__hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3cqi;align-items:center;min-height:0;padding:2.6cqi 3.4cqi}
.ps-site__band{position:absolute;inset:0;background:linear-gradient(135deg,#EEF3F5,#DCE6EA)}
.ps-site__band.ps-warm{border-radius:0;background:linear-gradient(135deg,#FDF0DA,#F5D9AE)}
.ps-site__copy,.ps-site__media{position:relative;min-width:0}
.ps-site__h{font:750 max(11px,3.7cqi)/1.02 var(--f-display);letter-spacing:-.03em;color:#3A2618;text-wrap:balance}
.ps-site__sub{margin-top:1.1cqi;font-size:var(--ps-t1);color:#6B5444}
.ps-site__hours{position:relative;display:grid;justify-items:start;gap:.5cqi;width:max-content;max-width:100%;margin-top:1.3cqi;font-size:var(--ps-t1);color:#4A2C1A}
.ps-site__hours>span{display:inline-flex;align-items:center;gap:.6cqi;white-space:nowrap}
.ps-site__hours .i{width:1.15em;height:1.15em}
.ps-site:not(.ps-site--refined) .ps-site__sun{visibility:hidden}
.ps-site__btns{display:flex;flex-wrap:wrap;gap:1cqi;margin-top:1.8cqi}
.ps-site__btn{display:inline-flex;align-items:center;gap:.6cqi;padding:.85cqi 1.6cqi;border:1px solid rgba(74,44,26,.22);border-radius:var(--r-pill);background:rgba(255,255,255,.65);color:#4A2C1A;font-size:var(--ps-t1);font-weight:600;line-height:1.2;white-space:nowrap}
.ps-site__btn--wa{border-color:transparent;background:var(--wa);color:#04381C}
.ps-site__btn .i{width:1.15em;height:1.15em}
.ps-site__media{align-self:stretch;display:flex}
.ps-site__photo{position:relative;flex:1;border-radius:max(6px,1.8cqi);overflow:hidden;transform-origin:100% 50%;background:linear-gradient(180deg,#FFD49A 0%,#FDE8C8 47%,#5CB8C2 47.5%,#3C98A5 63%,#E8C99C 63.5%,#D6AC77 100%)}
.ps-site:not(.ps-site--refined) .ps-site__photo{transform:scale(.84)}
.ps-ph__sun{position:absolute;right:20%;top:13%;width:15%;aspect-ratio:1;border-radius:50%;background:#FFD45C;box-shadow:0 0 0 max(2px,.9cqi) rgba(255,212,92,.35)}
.ps-ph__cup{position:absolute;left:50%;bottom:11%;width:30%;aspect-ratio:1.3;translate:-58% 0}
.ps-ph__cup::before{content:"";position:absolute;left:14%;right:24%;top:4%;bottom:24%;border-radius:8% 8% 42% 42% / 10% 10% 62% 62%;background:#fff;box-shadow:inset 0 max(2px,.7cqi) 0 #7A4A26}
.ps-ph__cup::after{content:"";position:absolute;left:0;right:6%;bottom:6%;height:20%;border-radius:50%;background:#FFF8EE;box-shadow:0 max(1px,.35cqi) 0 rgba(74,44,26,.2)}
.ps-ph__cup b{position:absolute;right:8%;top:16%;width:22%;height:34%;border:max(2px,.6cqi) solid #fff;border-left:0;border-radius:0 50% 50% 0}
.ps-site__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8cqi;align-content:center;min-height:0;padding:1.6cqi 3.4cqi 2.6cqi}
.ps-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.2cqi;row-gap:.5cqi;align-items:center;min-width:0;padding:1.2cqi;border:1px solid rgba(74,44,26,.1);border-radius:max(5px,1.4cqi);background:#fff}
.ps-card__img{grid-row:1 / span 2;width:max(14px,5.2cqi);aspect-ratio:1;border-radius:max(4px,1cqi);background:radial-gradient(circle at 35% 30%,var(--a),var(--b))}
.ps-card__name{align-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ps-t1);font-weight:600;line-height:1.2;color:#3A2618}
.ps-card__price{align-self:start;justify-self:start;font-size:var(--ps-t1);font-weight:600;line-height:1.2;color:#8A5A2B}

/* wireframe twin (added by process.js for the build animation) */
.ps-site--wire{background:#F7F9FA;color:transparent}
.ps-site--wire .ps-site__band{background:#EEF2F3}
.ps-site--wire .ps-warm,.ps-site--wire .ps-pin{display:none}
.ps-site--wire .ps-site__nav,.ps-site--wire .ps-card{border-color:#E6ECEE;background:transparent}
.ps-site--wire .ps-w{color:transparent;background:#DCE4E7;border-color:transparent;box-shadow:none;border-radius:max(2px,.5cqi);transform-origin:0 50%}
.ps-site--wire .ps-w *{visibility:hidden}
.ps-site--wire .ps-site__photo{border-radius:max(6px,1.8cqi);transform-origin:100% 50%}
.ps-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;visibility:hidden}
.ps-sweep::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:linear-gradient(180deg,var(--sun),var(--teal));box-shadow:0 0 16px 3px rgba(252,185,0,.45)}

.sec-process .ps-chip{position:absolute;left:3%;bottom:4%;z-index:4;gap:.45em;padding:.45em .9em;font-size:max(10px,1.55cqi)}
.sec-process .ps-chip .i{width:1.15em;height:1.15em;color:var(--teal-700)}

/* ---------- scene 3: comment pins ---------- */
.ps-pin{position:absolute;z-index:4;display:flex;align-items:center;gap:max(4px,.7cqi);font-size:var(--ps-t2);white-space:nowrap;pointer-events:none}
.ps-pin__dot{position:relative;display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50% 50% 50% 4px;background:var(--navy);color:#fff;box-shadow:0 0 0 2px #fff,var(--sh-lift)}
.ps-pin__dot>.i{width:52%;height:52%}
.ps-pin__ok{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;background:var(--ok);color:#fff}
.ps-pin__ok .i{width:56%;height:56%;stroke-width:3}
.ps-pin__txt{position:relative;padding:.45em .8em;border-radius:var(--r-pill);background:#fff;color:var(--ink);font-weight:600;line-height:1.2;box-shadow:var(--sh-lift)}
.ps-pin__label{opacity:.6}
.ps-pin__strike{position:absolute;left:.8em;right:.8em;top:52%;height:1.5px;background:var(--ink-2);transform-origin:0 50%}
.ps-pin--photo{left:6%;top:9%}
.ps-pin--hours{left:calc(100% + .6em);top:50%;translate:0 -50%}
.ps-pin--warm{left:36%;top:0;translate:0 -50%}

/* ---------- scene 4: search result ---------- */
.ps-serp{position:absolute;right:3.5%;bottom:5%;z-index:4;width:min(56%,380px);padding:max(8px,1.6cqi);border:1px solid var(--line);border-radius:max(10px,1.8cqi);background:#fff;box-shadow:var(--sh-float);color:var(--ink);font-size:var(--ps-t2);line-height:1.3}
.ps-serp__q{display:flex;align-items:center;gap:.55em;padding:.5em .85em;border:1px solid var(--line);border-radius:var(--r-pill)}
.ps-serp__q .i{width:1.1em;height:1.1em;color:var(--mute)}
.ps-serp__res{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25em .7em;margin-top:max(6px,1.2cqi)}
.ps-serp__fav{grid-row:1 / span 3;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:#FDF0DA;color:#8A5A2B}
.ps-serp__fav .i{width:58%;height:58%}
.ps-serp__site{display:flex;flex-direction:column;font-size:.86em;font-weight:600;line-height:1.2}
.ps-serp__site span{font-weight:400;color:var(--mute)}
.ps-serp__title{font-weight:650;color:var(--navy-600)}
.ps-serp__snip{font-size:.92em;color:var(--ink-2)}



/* ==========================================================================
   pricing
   ========================================================================== */
/* Pricing (#pricing, prefix pr-)
   Two plans centred as a pair (max 980px), a monthly-care switch that fills an
   add-on slot in each card, and a calm explanation of care, rounds of changes
   and the fine print underneath. Root state classes, set by pricing.js:
   .pr-ready (JS is running), .pr-care-on, .pr-nocare-all;
   per card: .pr-card--nocare, .pr-glow-run. */

.sec-pricing{overflow:hidden;overflow:clip}
.sec-pricing .section-head{margin-bottom:clamp(28px,3.6vw,44px)}
/* keep copy above the sun glow that sits behind the Growth card */
.pr-head,.pr-toggle,.pr-more,.pr-fine{position:relative;z-index:2}
.pr-noanim *,.pr-noanim *::before,.pr-noanim *::after{transition:none!important}

/* ---------- care switch ---------- */
.pr-toggle{display:flex;justify-content:center;margin-bottom:clamp(28px,3.8vw,48px)}
.sec-pricing .pr-switch{max-width:100%;min-height:64px;padding:10px 26px 10px 12px;gap:14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:var(--paper);transition:border-color .3s,background-color .3s}
.sec-pricing .pr-switch:hover{border-color:var(--line-2)}
.pr-care-on .pr-switch,.pr-care-on .pr-switch:hover{border-color:var(--teal);background:var(--teal-50)}
.pr-switch__text{display:grid;gap:1px;min-width:0}
.pr-switch__label{font:600 16px/1.3 var(--f-body);color:var(--navy)}
.pr-switch__hint{font:500 14px/1.3 var(--f-body);color:var(--mute)}
.pr-nocare-all .pr-toggle,.pr-nocare-all .pr-more__care,.pr-nocare-all .pr-care{display:none}

/* ---------- the pair ---------- */
.pr-plans{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:520px;margin-inline:auto}
.pr-glow{width:min(760px,130vw);aspect-ratio:1;right:-55%;bottom:-6%;opacity:.7}

/* ---------- card ---------- */
.pr-card{
  --pr-pad:clamp(22px,3.2vw,40px);
  --pr-fg:var(--navy);
  --pr-text:var(--ink-2);
  --pr-mute:var(--mute);
  --pr-accent:var(--teal-700);
  --pr-tick-bg:var(--teal-50);
  --pr-tick:var(--teal-700);
  --pr-soft:var(--foam);
  --pr-dash:var(--line-2);
  --pr-care-bg:var(--teal-50);
  --pr-care-bd:var(--teal);
  --pr-care-fg:var(--teal-700);
  --pr-cur:var(--teal-700);
  position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;
  border-radius:var(--r-lg);overflow:hidden;overflow:clip;background:var(--paper);color:var(--ink);
}
.pr-card--growth{
  --pr-fg:#fff;
  --pr-text:var(--on-dark-2);
  --pr-mute:var(--on-dark-2);
  --pr-accent:var(--teal-300);
  --pr-tick-bg:rgba(118,210,219,.15);
  --pr-tick:var(--teal-300);
  --pr-soft:rgba(255,255,255,.06);
  --pr-dash:rgba(255,255,255,.26);
  --pr-care-bg:rgba(12,165,181,.18);
  --pr-care-bd:var(--teal-300);
  --pr-care-fg:var(--teal-300);
  --pr-cur:var(--sun);
  background:var(--navy);color:#fff;
}

/* border ring drawn on top, so the full-bleed ribbon keeps a crisp edge */
.pr-rim{position:absolute;inset:0;z-index:3;border-radius:inherit;border:1.5px solid var(--line);pointer-events:none}
.pr-card--growth .pr-rim{border-color:rgba(118,210,219,.34)}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .pr-card--growth .pr-rim{
    overflow:hidden;border:0;padding:1.5px;
    background:linear-gradient(155deg,rgba(118,210,219,.55),rgba(255,255,255,.1) 40%,rgba(255,255,255,.08) 62%,rgba(252,185,0,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  }
  /* slow sun + sea light travelling round the rim; runs only while on screen (pricing.js) */
  .pr-card--growth .pr-rim::before{
    content:"";position:absolute;left:50%;top:50%;width:max(250%,980px);aspect-ratio:1;translate:-50% -50%;
    background:conic-gradient(from 0deg,transparent 0deg,rgba(118,210,219,0) 8deg,rgba(118,210,219,.95) 46deg,transparent 94deg,transparent 182deg,rgba(252,185,0,1) 226deg,transparent 274deg);
    animation:pr-spin 18s linear infinite paused;
  }
  .pr-card--growth.pr-glow-run .pr-rim::before{animation-play-state:running}
}
@keyframes pr-spin{to{transform:rotate(1turn)}}

/* ribbon with a wave edge (the brand's wave) */
.pr-ribbon{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:50px;margin:0;padding:12px var(--pr-pad);background:var(--teal-50);color:var(--teal-700);font:600 14.5px/1.3 var(--f-body)}
.pr-ribbon .i{width:18px;height:18px;flex:none}
.pr-ribbon::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:9px;background:inherit;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M0 0h40v3c-5 0-5 6-10 6s-5-6-10-6-5 6-10 6S5 3 0 3z'/%3E%3C/svg%3E") 0 0/40px 9px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Cpath d='M0 0h40v3c-5 0-5 6-10 6s-5-6-10-6-5 6-10 6S5 3 0 3z'/%3E%3C/svg%3E") 0 0/40px 9px repeat-x;
}
.pr-card--growth .pr-ribbon{background:#123B66;color:var(--sun-300)}

.pr-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:30px var(--pr-pad) 0}
.pr-name{font-size:clamp(28px,2.6vw,34px);font-weight:750;line-height:1.05;letter-spacing:-.03em;color:var(--pr-fg)}
.pr-badge{padding:6px 13px 6px 10px}
.pr-for{padding:10px var(--pr-pad) 0;max-width:32em;color:var(--pr-text);font-size:16px;line-height:1.5}

/* ---------- price ---------- */
.pr-price{padding:26px var(--pr-pad) 0;container-type:inline-size}
.pr-amount{margin:0}
.pr-amount__vis{
  display:inline-flex;align-items:flex-start;
  font-family:var(--f-display);font-weight:800;font-optical-sizing:auto;font-variant-numeric:tabular-nums;
  font-size:clamp(80px,10vw,132px);font-size:clamp(80px,36cqi,148px);
  line-height:.82;letter-spacing:-.055em;color:var(--pr-fg);
}
.pr-cur{font-size:.4em;font-weight:700;letter-spacing:0;line-height:1;margin:.1em .08em 0 0;color:var(--pr-cur)}
.pr-amount__vis--cur-last .pr-cur{margin:.1em 0 0 .14em}
.pr-num{position:relative;display:inline-block}
.pr-num__ghost{visibility:hidden}
.pr-num__live{position:absolute;top:0;left:0;white-space:nowrap}
.pr-amount__vis--cur-last .pr-num__live{left:auto;right:0}
.pr-terms{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:16px 0 0}
.pr-terms__once{font:600 16px/1.3 var(--f-body);color:var(--pr-fg)}
.pr-terms__vat{font:500 14px/1.3 var(--f-body);color:var(--pr-mute)}

/* ---------- monthly care slot: dashed while empty, filled when care is on ---------- */
.pr-care{position:relative;display:grid;min-height:60px;margin:20px var(--pr-pad) 0;border:1.5px dashed var(--pr-dash);border-radius:var(--r-sm);overflow:hidden;overflow:clip;transition:background-color .35s,border-color .35s}
.pr-care__state{grid-area:1/1;display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:0;padding:10px 16px;font-size:15px;line-height:1.3}
.pr-care__state .i{width:18px;height:18px;flex:none}
.pr-care__state:focus-visible{outline-offset:-3px;border-radius:var(--r-sm)}
.pr-care__off,.pr-care__na{color:var(--pr-mute)}
.pr-care__on{color:var(--pr-fg)}
.pr-care__on .i{color:var(--pr-care-fg)}
.pr-care__amt{font:700 23px/1.1 var(--f-display);letter-spacing:-.02em;color:var(--pr-care-fg);white-space:nowrap}
.pr-care__label{font-size:14.5px;color:var(--pr-text)}
.pr-care__on,.pr-care__na{opacity:0;visibility:hidden;transform:translateY(70%)}
.pr-care-on .pr-card:not(.pr-card--nocare) .pr-care{border-style:solid;border-color:var(--pr-care-bd);background:var(--pr-care-bg)}
.pr-care-on .pr-card:not(.pr-card--nocare) .pr-care__on,
.pr-care-on .pr-card--nocare .pr-care__na{opacity:1;visibility:visible;transform:none}
.pr-care-on .pr-card:not(.pr-card--nocare) .pr-care__off,
.pr-care-on .pr-card--nocare .pr-care__off{opacity:0;visibility:hidden;transform:translateY(-70%)}
:root:not(.no-motion) .pr-care__state{transition:opacity .25s var(--ease-out),transform .45s var(--ease-out),visibility 0s linear .45s}
:root:not(.no-motion) .pr-care-on .pr-card:not(.pr-card--nocare) .pr-care__on,
:root:not(.no-motion) .pr-care-on .pr-card--nocare .pr-care__na,
:root:not(.no-motion) .sec-pricing:not(.pr-care-on) .pr-care__off{transition:opacity .4s var(--ease-out) .06s,transform .7s var(--ease-spring) .06s,visibility 0s}
:root:not(.no-motion) .pr-care-on .pr-card:not(.pr-card--nocare) .pr-care{animation:pr-pop .7s var(--ease-spring)}
@keyframes pr-pop{0%{transform:scale(.94)}100%{transform:none}}

/* ---------- plan list ---------- */
.pr-list{list-style:none;display:flex;flex-direction:column;padding:22px var(--pr-pad) 28px}
.pr-li{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:16px;line-height:1.45;color:var(--pr-fg)}
.pr-tick{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:50%;background:var(--pr-tick-bg);color:var(--pr-tick)}
.pr-tick .i{width:14px;height:14px;stroke-width:2.6}

/* the Growth extra */
.pr-li--extra{margin:8px 0 2px;padding:12px 14px;border:1px solid rgba(252,185,0,.36);border-radius:14px;background:rgba(252,185,0,.12);font-weight:650}
.pr-li--extra .pr-tick{background:var(--sun);color:var(--navy)}
.pr-li--extra .pr-tick .i{stroke-width:2.2}

/* care benefit, slides in when care is on */
.pr-care-li{display:grid;grid-template-rows:0fr}
.pr-care-li__clip{min-height:0;overflow:hidden;visibility:hidden}
.pr-care-li__row{display:flex;align-items:flex-start;gap:12px;padding:9px 0 3px;font-size:16px;line-height:1.45;font-weight:600;color:var(--pr-fg);opacity:0;transform:translateX(-18px)}
.pr-tick--care{background:var(--pr-care-bd);color:var(--navy)}
.pr-care-on .pr-card:not(.pr-card--nocare) .pr-care-li{grid-template-rows:1fr}
.pr-care-on .pr-card:not(.pr-card--nocare) .pr-care-li__clip{visibility:visible}
.pr-care-on .pr-card:not(.pr-card--nocare) .pr-care-li__row{opacity:1;transform:none}
:root:not(.no-motion) .pr-care-li{transition:grid-template-rows .6s var(--ease-out)}
:root:not(.no-motion) .pr-care-li__clip{transition:visibility 0s linear .6s}
:root:not(.no-motion) .pr-care-li__row{transition:opacity .25s var(--ease-out),transform .4s var(--ease-out)}
:root:not(.no-motion) .pr-care-on .pr-card:not(.pr-card--nocare) .pr-care-li__clip{transition:visibility 0s}
:root:not(.no-motion) .pr-care-on .pr-card:not(.pr-card--nocare) .pr-care-li__row{transition:opacity .45s var(--ease-out) .12s,transform .8s var(--ease-spring) .12s}

.pr-foot{margin-top:auto;padding:0 var(--pr-pad) var(--pr-pad)}

/* ---------- two columns: cards side by side, rows aligned across the pair ---------- */
@media (min-width:760px){
  .pr-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2.4vw,28px);max-width:980px}
  .pr-glow{width:min(820px,72vw);right:-22%;top:-20%;bottom:auto}
}
@supports (grid-template-rows:subgrid){
  @media (min-width:760px){
    .pr-plans{grid-template-rows:repeat(7,auto)}
    .pr-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
    .pr-foot{align-self:end}
  }
}

/* ---------- under the cards: care, rounds of changes, fine print ---------- */
.pr-more{display:grid;gap:44px;max-width:980px;margin:clamp(52px,6vw,84px) auto 0;padding-top:clamp(36px,4vw,52px);border-top:1px solid var(--line)}
.pr-more__title{font-size:clamp(22px,1.9vw,25px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--navy)}
.pr-more__text{margin-top:10px;max-width:34em;color:var(--ink-2);font-size:16.5px;line-height:1.6}

.pr-carelist{margin:22px 0 0}
.pr-carerow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 18px;align-items:center;padding:15px 16px;border-top:1px solid var(--line);border-radius:var(--r-sm);transition:background-color .4s,border-color .4s}
.pr-carerow:last-child{border-bottom:1px solid var(--line)}
.pr-carerow__name{grid-column:1;font-weight:600;color:var(--navy)}
.pr-carerow__price{grid-column:2;grid-row:1/span 2;margin:0;font:700 22px/1 var(--f-display);letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
.pr-carerow__what{grid-column:1;margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.45}
.pr-care-on .pr-carerow{background:var(--teal-50);border-color:transparent}
.pr-care-on .pr-carerow__price{color:var(--teal-700)}

.pr-chat{display:grid;gap:10px;max-width:360px;margin-top:22px}
.pr-chat__msg{max-width:90%;padding:12px 16px;border-radius:20px;font-size:15px;line-height:1.45}
.pr-chat__msg--you{justify-self:end;border:1px solid var(--teal-100);border-bottom-right-radius:6px;background:var(--teal-50);color:var(--ink)}
.pr-chat__list{list-style:none;display:grid;gap:4px}
.pr-chat__list li{position:relative;padding-left:16px}
.pr-chat__list li::before{content:"";position:absolute;left:1px;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.pr-chat__msg--us{justify-self:start;display:flex;align-items:center;gap:10px;border-bottom-left-radius:6px;background:var(--navy);color:#fff}
.pr-chat__msg--us .i{width:18px;height:18px;flex:none;color:var(--sun)}

.pr-fine{max-width:980px;margin:clamp(36px,4vw,52px) auto 0;font-size:14px;line-height:1.55;color:var(--mute)}

@media (min-width:860px){
  .pr-more{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(44px,6vw,88px)}
}
@media (max-width:420px){
  .sec-pricing .pr-switch{padding-right:20px;border-radius:24px}
  .pr-carerow{padding-inline:12px}
}

/* empty care slot doubles as a shortcut to switch care on */
.pr-care__add{width:100%;font:inherit;font-size:15px;font-weight:600;text-align:left;color:var(--teal-700);cursor:pointer;transition:color .25s,opacity .25s var(--ease-out),transform .45s var(--ease-out)}
.pr-card--growth .pr-care__add{color:var(--teal-300)}
.pr-care:has(.pr-care__add:hover){border-color:var(--teal)}
.pr-care__add:focus-visible{outline-offset:-3px;border-radius:var(--r-sm)}


/* ==========================================================================
   faq
   ========================================================================== */
/* FAQ (#faq, prefix faq-)
   Sticky intro column + accordion. Every answer is visible without JS; faq.js
   adds .faq-ready to make items collapsible, one open at a time. */

.faq-grid{display:grid;gap:clamp(36px,6vw,56px)}
.faq-side{min-width:0}
.faq-intro{margin-top:clamp(16px,2vw,24px);max-width:24em}

/* "Still unsure? Ask us on WhatsApp" */
.faq-wa{display:inline-flex;align-items:center;gap:14px;max-width:100%;min-height:60px;margin-top:clamp(24px,3vw,34px);padding:8px 24px 8px 8px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--paper);color:var(--navy);text-decoration:none;transition:border-color .3s,translate .45s var(--ease-out)}
.faq-wa:hover{border-color:var(--wa);color:var(--navy);translate:0 -2px}
.faq-wa__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--wa);color:#04381C}
.faq-wa__icon .i{width:22px;height:22px}
.faq-wa__text{display:grid;min-width:0;line-height:1.25}
.faq-wa__q{font-size:14px;color:var(--mute)}
.faq-wa__a{font-weight:600;font-size:16.5px}
.faq-reply{margin-top:14px;font-size:14.5px;color:var(--mute)}

/* ---------- accordion ---------- */
.faq-list{--faq-bleed:clamp(12px,2vw,28px);min-width:0}
.faq-item{position:relative;border-top:1px solid var(--line-2);transition:border-color .3s}
.faq-item:last-child{border-bottom:1px solid var(--line-2)}
.faq-item::before{content:"";position:absolute;z-index:0;inset:0 calc(var(--faq-bleed) * -1);border-radius:var(--r-lg);background:var(--paper);opacity:0;transform:scale(.97);pointer-events:none}
.faq-ready .faq-item--open::before{opacity:1;transform:none}
.faq-ready .faq-item--open,.faq-ready .faq-item--open+.faq-item{border-top-color:transparent}
.faq-ready .faq-item--open:last-child{border-bottom-color:transparent}

.faq-q{position:relative;z-index:1;margin:0;font:inherit}
.faq-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:72px;padding:20px 0;text-align:left;font:650 clamp(19px,1.65vw,23px)/1.25 var(--f-display);letter-spacing:-.018em;color:var(--navy);border-radius:10px}
.faq-btn__text{min-width:0;transition:color .25s}
.faq-btn:hover .faq-btn__text{color:var(--teal-700)}

/* plus that turns into a minus */
.faq-icon{position:relative;flex:none;width:40px;height:40px;border:1.5px solid var(--line-2);border-radius:50%;color:var(--navy)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:currentColor}
.faq-icon::after{transform:rotate(90deg)}
.faq-btn:hover .faq-icon{border-color:var(--navy)}
.faq-ready .faq-item--open .faq-icon{transform:rotate(180deg);border-color:var(--navy);background:var(--navy);color:#fff}
.faq-ready .faq-item--open .faq-icon::after{transform:rotate(0deg)}
.sec-faq:not(.faq-ready) .faq-icon{display:none}

.faq-panel{position:relative;z-index:1;display:grid;grid-template-rows:1fr}
.faq-panel__clip{min-height:0;overflow:hidden}
.faq-panel__inner{max-width:44em;padding:0 clamp(8px,6vw,60px) 26px 0;color:var(--ink-2);font-size:17px;line-height:1.65}
.faq-ready .faq-item:not(.faq-item--open) .faq-panel{grid-template-rows:0fr}
.faq-ready .faq-item:not(.faq-item--open) .faq-panel__clip{visibility:hidden}
.faq-ready .faq-item:not(.faq-item--open) .faq-panel__inner{opacity:0;transform:translateY(-8px)}

:root:not(.no-motion) .faq-item::before{transition:opacity .4s var(--ease-out),transform .55s var(--ease-out)}
:root:not(.no-motion) .faq-icon{transition:transform .65s var(--ease-spring),background-color .3s,border-color .3s,color .3s}
:root:not(.no-motion) .faq-icon::after{transition:transform .55s var(--ease-spring)}
:root:not(.no-motion) .faq-panel{transition:grid-template-rows .55s var(--ease-out)}
:root:not(.no-motion) .faq-panel__inner{transition:opacity .45s var(--ease-out) .1s,transform .6s var(--ease-out) .08s}
:root:not(.no-motion) .faq-ready .faq-item:not(.faq-item--open) .faq-panel__clip{transition:visibility 0s linear .55s}
:root:not(.no-motion) .faq-ready .faq-item:not(.faq-item--open) .faq-panel__inner{transition:opacity .2s var(--ease-out),transform .3s var(--ease-out)}
.faq-noanim *,.faq-noanim *::before,.faq-noanim *::after{transition:none!important}

/* answer extras */
.faq-panel__inner>*+*{margin-top:12px}
.faq-points{list-style:none;display:grid;gap:8px}
.faq-points li{position:relative;padding-left:22px}
.faq-points li::before{content:"";position:absolute;left:3px;top:.64em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.faq-points strong{font-weight:600;color:var(--navy)}
.faq-langs{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:4px}
.faq-langs__group{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--mute)}
.faq-langs__group>span:last-child{margin-left:4px}
.faq-langs .flag{width:22px;height:22px}

@media (min-width:960px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(56px,7vw,112px);align-items:start}
  .faq-side{position:sticky;top:calc(var(--header-h) + 40px)}
}
@media (max-width:520px){
  .faq-btn{min-height:64px;padding:18px 0;gap:14px}
  .faq-icon{width:36px;height:36px}
  .faq-panel__inner{font-size:16.5px;padding-bottom:22px}
}


/* ==========================================================================
   contact
   ========================================================================== */
/* Contact: progressive preview request, live ticket, direct contact, coverage map.
   Every selector is scoped to .sec-contact / ct-. Motion-only states live under
   .ct-motion (added by contact.js when CSW.motion is true). */

/* ---------- layout ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,6vw,64px)}
.ct-aside,.ct-aside__in{display:contents}
.ct-intro{order:1}
.ct-panel{order:2}
.ct-ticketwrap{order:3;max-width:560px}
.ct-direct{order:4;max-width:560px}
.ct-where{order:5}
.ct-lead{margin-top:clamp(18px,2vw,24px)}

/* tablet: ticket and direct contact share a row under the form */
@media (min-width:700px) and (max-width:999px){
  .ct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
  .ct-intro,.ct-panel,.ct-where{grid-column:1/-1}
  .ct-ticketwrap,.ct-direct{max-width:none}
}

@media (min-width:1000px){
  .ct-grid{grid-template-columns:minmax(0,42fr) minmax(0,58fr);column-gap:clamp(48px,5vw,88px);row-gap:clamp(96px,9vw,128px);align-items:start}
  /* the outer box fills row 1, so the sticky inner box stops at the end of the form
     instead of sliding over the direct contact below */
  .ct-aside{display:block;grid-column:1;grid-row:1;align-self:stretch}
  .ct-aside__in{display:flex;flex-direction:column;gap:clamp(36px,3.2vw,48px);position:sticky;top:var(--ct-top,calc(var(--header-h) + 24px))}
  .ct-panel{grid-column:2;grid-row:1}
  .ct-direct{grid-column:1;grid-row:2}
  .ct-where{grid-column:2;grid-row:2}
  .ct-ticketwrap,.ct-direct{max-width:none}
}

/* ---------- form panel ---------- */
.ct-panel{position:relative;background:var(--foam);border-radius:32px;padding:clamp(24px,4vw,52px) clamp(18px,4vw,52px)}
.ct-panel.is-anim{overflow:hidden}
@media (max-width:639px){
  .ct-panel{margin-inline:calc(8px - var(--gutter));border-radius:26px}
}

/* progress */
.ct-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px 16px;margin-bottom:clamp(28px,3.4vw,40px)}
.ct-progress__text{font:600 15px/1.3 var(--f-body);color:var(--navy)}
.ct-progress__time{font-size:14px;line-height:1.3;color:var(--mute);text-align:right}
.ct-progress__bar{grid-column:1/-1;height:6px;border-radius:var(--r-pill);background:rgba(2,45,91,.09);overflow:hidden}
.ct-progress__bar i{display:block;height:100%;border-radius:inherit;background:var(--teal);transform-origin:0 50%;transform:scaleX(var(--ct-p,.06))}
.ct-motion .ct-progress__bar i{transition:transform .9s var(--ease-out)}
.ct-form:not(.ct-on) .ct-progress{display:none}

/* steps: all visible without JS; contact.js reveals them one by one */
.ct-step{position:relative;padding-bottom:clamp(28px,3vw,36px)}
.ct-on .ct-step:not(.is-open),.ct-on .ct-final:not(.is-open){display:none}
.ct-step.is-anim,.ct-final.is-anim{overflow:hidden}
.ct-fs{min-width:0;margin:0;padding:0;border:0}
.ct-q{display:flex;align-items:flex-start;gap:14px;width:100%;margin:0 0 16px;padding:0;font:650 clamp(20px,1.1vw + 14px,25px)/1.22 var(--f-display);letter-spacing:-.018em;color:var(--navy);font-optical-sizing:auto}
legend.ct-q{float:left}
.ct-fs>.ct-step__body{clear:left}
label.ct-q{cursor:pointer}
.ct-q__text{padding-top:2px;min-width:0}
.ct-opt{flex:none;align-self:center;margin-left:2px;padding:6px 10px;border-radius:var(--r-pill);background:rgba(2,45,91,.07);font:500 13px/1 var(--f-body);letter-spacing:0;color:var(--ink-2)}

/* step number: turns into a check once answered */
.ct-num{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;color:var(--navy);font:700 14px/1 var(--f-display);letter-spacing:0}
.ct-num>*{grid-area:1/1}
.ct-num .i{width:16px;height:16px;stroke-width:3;color:#fff;opacity:0;scale:.4}
.ct-step.is-done .ct-num{background:var(--teal-700);border-color:var(--teal-700)}
.ct-step.is-done .ct-num__n{opacity:0;scale:.4}
.ct-step.is-done .ct-num .i{opacity:1;scale:1}
.ct-motion .ct-num{transition:background-color .3s,border-color .3s}
.ct-motion .ct-num>*{transition:opacity .25s,scale .5s var(--ease-spring)}

@media (min-width:560px){
  .ct-step__body,.ct-final{padding-left:46px}
  .ct-on .ct-step.is-passed::before{content:"";position:absolute;left:15.25px;top:40px;bottom:6px;width:1.5px;border-radius:2px;background:var(--teal-300)}
}

/* text rows: input + Next */
.ct-row{display:flex;align-items:stretch;gap:10px}
.ct-row>.input,.ct-row>.ct-tel{flex:1;min-width:0}
.sec-contact .ct-input{min-height:60px;padding-inline:20px;font-size:17px}
.sec-contact .ct-textarea{min-height:132px;font-size:17px;padding:16px 20px}
.sec-contact .ct-select{min-height:60px;max-width:440px;font-size:17px;padding-left:20px}
.sec-contact .ct-select:invalid{color:var(--mute)}
.sec-contact .ct-select option{color:var(--ink)}
.sec-contact .ct-next{flex:none;min-height:60px;padding:0 22px;border-radius:var(--r-sm)}
.sec-contact .ct-next:hover{translate:none}
.ct-form:not(.ct-on) .ct-next,.ct-form:not(.ct-on) .ct-enter,.ct-step.is-passed .ct-next,.ct-step.is-passed .ct-enter{display:none}
.ct-enter{display:none;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--mute)}
.ct-enter kbd{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:#fff;font:600 12px/1 var(--f-body);color:var(--navy)}
@media (hover:hover) and (pointer:fine){.ct-on .ct-enter{display:flex}}

/* chips */
.ct-chips{display:flex;flex-wrap:wrap;gap:10px}
.sec-contact .ct-chip{position:relative;min-height:52px;padding:0 20px;gap:9px;font-size:16px}
.sec-contact .ct-chip input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.sec-contact .ct-chip .i{width:18px;height:18px;color:var(--teal-700);transition:color .25s}
.sec-contact .ct-chip:has(input:checked),.sec-contact .ct-chip.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.sec-contact .ct-chip:has(input:checked) .i,.sec-contact .ct-chip.is-active .i{color:var(--sun)}
.sec-contact .ct-chip:has(input:focus-visible){outline:3px solid var(--teal-700);outline-offset:3px}
.ct-chip__price{font-weight:600;color:var(--teal-700);transition:color .25s}
.ct-chip:has(input:checked) .ct-chip__price,.ct-chip.is-active .ct-chip__price{color:var(--sun-300)}
.ct-chips--sm{gap:8px}
.sec-contact .ct-chips--sm .ct-chip{min-height:44px;padding:0 16px;font-size:15px}
.ct-motion .ct-chip.is-pop{animation:ct-pop .5s var(--ease-out)}

/* monthly care */
.ct-care{display:grid;gap:6px;margin-top:22px}
.sec-contact .ct-care .check{font-size:16px;color:var(--ink)}
.ct-care__label{font-weight:600;color:var(--navy)}
.ct-care__price{color:var(--ink-2)}
.ct-care__hint{padding-left:34px}

/* dynamic contact field */
.ct-on .ct-dyn:not(.is-on){display:none}
.ct-dynwrap.is-anim{overflow:hidden}
.ct-dyn{padding-top:22px}
.sec-contact .ct-dyn__label{display:block;margin-bottom:10px;font-size:16px}
.ct-dyn .field__hint{margin-top:8px}
.ct-times{min-width:0;margin:20px 0 0;padding:0;border:0}
.ct-times legend{float:left;width:100%;margin:0 0 10px;padding:0}
.ct-times .ct-chips{clear:left}

.ct-tel{position:relative}
.sec-contact .ct-tel .input{padding-left:100px}
.ct-tel__cc{position:absolute;left:8px;top:8px;bottom:8px;z-index:1;display:grid;place-items:center;min-width:78px;padding:0 10px;border-radius:9px;background:var(--foam);color:var(--navy);font:600 16px/1 var(--f-body);pointer-events:none}
.ct-tel__cc>*{grid-area:1/1}
.ct-tel__es{display:inline-flex;align-items:center;gap:7px}
.ct-tel__es .flag{width:18px;height:18px}
.ct-tel__intl{width:21px;height:21px;color:var(--teal-700);opacity:0;scale:.6}
.ct-tel.is-intl .ct-tel__es{opacity:0;scale:.7}
.ct-tel.is-intl .ct-tel__intl{opacity:1;scale:1}
.ct-motion .ct-tel__es,.ct-motion .ct-tel__intl{transition:opacity .25s,scale .4s var(--ease-spring)}

/* errors */
.sec-contact .ct-err{display:flex;align-items:flex-start;gap:8px;margin-top:10px;line-height:1.4}
.sec-contact .ct-err:empty{display:none}
.ct-err::before{content:"";flex:none;width:17px;height:17px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C93838' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E") center/contain no-repeat}
.sec-contact .ct-input[aria-invalid="true"],.sec-contact .ct-select[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px rgba(201,56,56,.12)}
.sec-contact .ct-step.is-invalid .ct-fs .ct-chip:not(:has(input:checked)){border-color:rgba(201,56,56,.6)}
.sec-contact .ct-consent.is-invalid input{border-color:var(--err);box-shadow:0 0 0 4px rgba(201,56,56,.12)}
.ct-motion .is-shake{animation:ct-shake .42s var(--ease-out)}

/* features picked elsewhere on the page */
.ct-wish{margin-top:16px}
.ct-wish__label{margin-bottom:10px;font:600 14.5px/1.3 var(--f-body);color:var(--navy)}
.ct-wish__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.ct-wchip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 16px;border-radius:var(--r-pill);border:1.5px solid var(--teal-100);background:#fff;color:var(--navy);font:500 15px/1.2 var(--f-body);text-align:left;transition:border-color .2s}
.ct-wchip__x{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--foam);transition:background-color .2s,color .2s}
.ct-wchip__x .i{width:15px;height:15px;stroke-width:2.6}
.ct-wchip:hover{border-color:var(--navy)}
.ct-wchip:hover .ct-wchip__x{background:var(--navy);color:#fff}
.ct-wish__note{display:flex;gap:8px;margin-top:12px;font-size:14.5px;line-height:1.45;color:#634500}
.ct-wish__note::before{content:'';flex:none;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--sun)}
.ct-wish__empty{;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px;line-height:1.45;color:var(--mute)}
.ct-wish__empty .i{width:18px;height:18px;color:var(--teal-700)}
.ct-wish__empty a{font-weight:600}
.ct-wish__has:not([hidden])+.ct-wish__empty{margin-top:14px}

/* consent, honeypot, submit */
.sec-contact .ct-consent{font-size:15.5px}
.ct-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.ct-submit{margin-top:24px}
.sec-contact .ct-submit{white-space:normal;text-align:center;line-height:1.2;padding:12px 22px}
.ct-submit__label{transition:opacity .2s}
.ct-spin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid rgba(2,45,91,.22);border-top-color:var(--navy);opacity:0;transition:opacity .2s}
.ct-submit.is-busy{pointer-events:none}
.ct-submit.is-busy .ct-submit__label{opacity:0}
.ct-submit.is-busy .ct-spin{opacity:1;animation:ct-spin .8s linear infinite}
.ct-dp{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.ct-dp a{color:inherit;text-decoration:underline}
.ct-final__note{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--mute)}
.ct-final__note .i{width:19px;height:19px;margin-top:1px;color:var(--teal-700)}

/* ---------- fallback + success views ---------- */
.ct-send,.ct-done{display:grid;justify-items:start}
.ct-send[hidden],.ct-done[hidden]{display:none}
.ct-view__title:focus,.ct-done__title:focus{outline:none}
.ct-send__icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:22px;border-radius:50%;background:#fff;color:var(--teal-700)}
.ct-send__icon .i{width:28px;height:28px}
.ct-view__text{margin-top:12px;max-width:34em;font-size:var(--fs-md);line-height:1.5;color:var(--ink-2)}
.ct-send__btns{display:grid;gap:12px;width:100%;margin-top:28px}
.sec-contact .ct-send__btns .btn{white-space:normal;text-align:center;line-height:1.2}
.ct-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;font:600 15.5px/1.2 var(--f-body);color:var(--teal-700);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.ct-link .i{width:17px;height:17px}
.ct-link:hover{color:var(--navy)}

.ct-check{width:84px;height:84px;margin-bottom:22px;overflow:visible}
.ct-check__disc{fill:var(--sun-100);transform-box:fill-box;transform-origin:center}
.ct-check__ring{fill:none;stroke:var(--sun);stroke-width:3.5}
.ct-check__tick{fill:none;stroke:var(--navy);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ct-motion .ct-done.is-shown .ct-check__disc{animation:ct-disc .7s var(--ease-spring) both}
.ct-motion .ct-done.is-shown .ct-check__ring{stroke-dasharray:1;animation:ct-draw .8s var(--ease-out) .1s both}
.ct-motion .ct-done.is-shown .ct-check__tick{stroke-dasharray:1;animation:ct-draw .55s var(--ease-out) .5s both}
.ct-done__title{font:750 clamp(30px,3vw,42px)/1.05 var(--f-display);letter-spacing:-.03em;color:var(--navy)}
.ct-done__next{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:14px 18px;border-radius:16px;background:#fff;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.ct-done__next .i{width:19px;height:19px;margin-top:1px;color:var(--teal-700)}
.ct-done__note{margin-top:14px;font-size:14.5px;line-height:1.45;color:var(--mute)}

/* ---------- live ticket ---------- */
.ct-ticket{position:relative;padding:22px clamp(18px,2vw,26px) 0;border-radius:24px;background:var(--navy);color:#fff}
.ct-ticket__head{display:flex;align-items:flex-start;gap:14px}
.ct-ticket__mark{flex:none;width:42px;height:42px}
.ct-ticket__id{flex:1;min-width:0}
.ct-ticket__title{font:700 18px/1.2 var(--f-display);letter-spacing:-.01em;color:#fff}
.ct-ticket__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.ct-ticket__date{font-size:13.5px;line-height:1.2;color:var(--on-dark-2)}
.ct-ticket__date:empty{display:none}
.ct-status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);font:600 13px/1 var(--f-body);color:#fff}
.ct-status__dot{width:8px;height:8px;border-radius:50%;background:var(--teal-300)}
.ct-ticket[data-state="ready"] .ct-status{border-color:var(--sun);background:var(--sun);color:var(--navy)}
.ct-ticket[data-state="ready"] .ct-status__dot{background:var(--navy)}
.ct-ticket[data-state="sent"] .ct-status{border-color:#fff;background:#fff;color:var(--navy)}
.ct-ticket[data-state="sent"] .ct-status__dot{background:var(--ok)}
.ct-motion .ct-status,.ct-motion .ct-status__dot{transition:background-color .35s,border-color .35s,color .35s}

.ct-ticket__list{margin:20px 0 0}
.ct-tline{position:relative;display:grid;grid-template-columns:minmax(84px,31%) minmax(0,1fr);align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.1)}
.ct-tline::after{content:"";position:absolute;inset:1px -10px 0;border-radius:10px;background:rgba(252,185,0,.16);opacity:0;pointer-events:none}
.ct-tline dt{font-size:13.5px;line-height:1.35;color:var(--on-dark-2)}
.ct-tline dd{position:relative;min-width:0;min-height:22px;margin:0;font:600 15.5px/1.4 var(--f-body);color:#fff;overflow-wrap:anywhere}
.ct-tline__ph{position:absolute;left:0;top:7px;width:var(--w,60%);height:8px;border-radius:4px;background:rgba(255,255,255,.14);transform-origin:0 50%}
.ct-tline__opt{position:absolute;left:0;top:0;font-weight:400;font-style:italic;color:var(--on-dark-2)}
.ct-tline.is-filled .ct-tline__ph,.ct-tline.is-filled .ct-tline__opt{opacity:0;scale:0 1}
.ct-tline__val{display:block}
.ct-tline__val--icon{display:flex;align-items:center;gap:8px}
.ct-tline__icon{width:17px;height:17px;color:var(--sun)}
.ct-tline:not(.is-filled) .ct-tline__icon{visibility:hidden}
.ct-motion .ct-tline dd{overflow:hidden}
.ct-motion .ct-tline__val{opacity:0;transform:translateY(110%);transition:transform .7s var(--ease-out),opacity .45s ease}
.ct-motion .ct-tline.is-filled .ct-tline__val{opacity:1;transform:none}
.ct-motion .ct-tline__ph,.ct-motion .ct-tline__opt{transition:scale .5s var(--ease-out),opacity .35s ease}
.ct-motion .ct-tline.is-flash::after{animation:ct-flash 1.4s var(--ease-out)}
.ct-motion .ct-tline.is-pulse dd{animation:ct-nudge .5s var(--ease-out)}

.ct-ticket__perf{position:relative;height:30px;margin:6px calc(-1 * clamp(18px,2vw,26px)) 0}
.ct-ticket__perf::before{content:"";position:absolute;left:24px;right:24px;top:50%;border-top:2px dashed rgba(255,255,255,.24)}
.ct-ticket__perf i{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--paper)}
.ct-ticket__perf i:first-child{left:-15px}
.ct-ticket__perf i:last-child{right:-15px}
.ct-ticket__stub{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:10px 0 24px}
.ct-ticket__pay{font:600 15px/1.3 var(--f-body);color:#fff}
.ct-ticket__note{margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--on-dark-2)}
.ct-ticket__zero{font:800 clamp(40px,4vw,54px)/1 var(--f-display);letter-spacing:-.04em;color:var(--sun);white-space:nowrap}

.ct-stamp{position:absolute;z-index:2;top:-24px;right:12px;display:grid;place-items:center;align-content:center;gap:3px;width:88px;height:88px;border:3px solid var(--sun);border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px var(--paper);color:var(--sun);font:800 16px/1 var(--f-display);letter-spacing:-.01em;text-align:center;rotate:-12deg;opacity:0;scale:1.18;pointer-events:none}
.ct-stamp::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(252,185,0,.7);border-radius:50%}
.ct-stamp .i{width:24px;height:24px;stroke-width:3}
.ct-ticket.is-sent .ct-stamp{opacity:1;scale:1}
.ct-motion .ct-stamp{transition:opacity .25s ease,scale .65s var(--ease-spring)}

/* ---------- direct contact ---------- */
.ct-sub{margin-bottom:22px}
.ct-ways{list-style:none;border-top:1px solid var(--line)}
.ct-ways li{border-bottom:1px solid var(--line)}
.ct-way{display:flex;align-items:center;gap:16px;min-height:76px;margin-inline:-10px;padding:12px 10px;border-radius:16px;color:var(--ink);text-decoration:none;transition:background-color .25s}
.ct-way:hover{background:var(--foam);color:var(--ink)}
.ct-way__icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;transition:scale .45s var(--ease-spring)}
.ct-way:hover .ct-way__icon{scale:1.08}
.ct-way__icon .i{width:22px;height:22px}
.ct-way--wa .ct-way__icon{background:var(--wa);color:#04381C}
.ct-way--call .ct-way__icon{background:var(--navy);color:#fff}
.ct-way--mail .ct-way__icon{border:1.5px solid var(--teal-100);background:var(--teal-50);color:var(--teal-700)}
.ct-way__text{display:grid;gap:2px;min-width:0}
.ct-way__title{font:600 17px/1.25 var(--f-body);color:var(--navy)}
.ct-way__value{font-size:15px;line-height:1.35;color:var(--mute);overflow-wrap:anywhere}

/* ---------- where we work ---------- */
.ct-modes{display:grid;gap:12px;list-style:none}
.ct-modes li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-md);line-height:1.45;color:var(--ink-2)}
.ct-modes .i{flex:none;width:22px;height:22px;margin-top:2px;color:var(--teal-700)}

.ct-map{position:relative;isolation:isolate;margin:28px 0 0;aspect-ratio:1000/520;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--teal-100);overflow:hidden}
.ct-map__svg{position:absolute;inset:0;width:100%;height:100%}
.ct-map__land{fill:var(--foam)}
.ct-map__ridge--back{fill:var(--foam-2);opacity:.55}
.ct-map__ridge--front{fill:var(--foam-2)}
.ct-map__sand{fill:none;stroke:var(--sun-100);stroke-width:16;stroke-linejoin:round}
.ct-map__surf{fill:none;stroke:#fff;stroke-width:2.5;opacity:.9}
.ct-map__waves path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.9}
.ct-map__coast{fill:none;stroke:var(--navy-600);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

.ct-towns{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.ct-town{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.ct-pin{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px #fff}
.ct-town__name{position:absolute;left:0;display:block;white-space:nowrap;translate:-50% 0;font:600 13px/1.15 var(--f-body);letter-spacing:-.005em;color:var(--navy)}
.ct-town[data-side="up"] .ct-town__name{bottom:13px;text-shadow:0 0 2px var(--foam),0 0 4px var(--foam),0 0 8px var(--foam)}
.ct-town[data-side="down"] .ct-town__name{top:13px;text-shadow:0 0 2px var(--teal-100),0 0 4px var(--teal-100),0 0 8px var(--teal-100)}
.ct-town--first .ct-town__name{translate:-16px 0}
.ct-town--last .ct-town__name{translate:calc(-100% + 16px) 0}
.ct-map__sea{position:absolute;right:4%;bottom:6%;font:italic 500 13px/1 var(--f-body);letter-spacing:.01em;color:var(--navy-600)}
@media (min-width:768px){
  .ct-town__name{font-size:14px}
  .ct-map__sea{font-size:14px}
}

/* ---------- small screens ---------- */
@media (max-width:559px){
  .ct-q{gap:12px;font-size:20px}
  .ct-num{width:30px;height:30px;font-size:13px}
  .ct-chips{gap:8px}
  .sec-contact .ct-chip{min-height:50px;padding:0 16px;font-size:15.5px}
  .sec-contact .ct-next{padding:0 18px}
  .sec-contact .ct-input{padding-inline:16px}
  .sec-contact .ct-tel .input{padding-left:96px}
  .ct-care__hint{padding-left:34px}
}

/* ---------- keyframes ---------- */
@keyframes ct-pop{0%{scale:1}35%{scale:.94}70%{scale:1.03}100%{scale:1}}
@keyframes ct-shake{0%,100%{translate:0 0}20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
@keyframes ct-spin{to{rotate:360deg}}
@keyframes ct-flash{0%{opacity:1}100%{opacity:0}}
@keyframes ct-nudge{from{opacity:.2;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes ct-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ct-disc{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}


/* ==========================================================================
   legal
   ========================================================================== */
/* Legal pages (legal.html, privacy.html, cookies.html): one shared structure.
   Compact sea-foam hero with a sun rising over the waves, a sticky contents rail on desktop
   that fills as you read, a readable article column, and links to the other two pages. */

/* ---------- hero ---------- */
.lg-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--foam);padding:calc(var(--header-h) + clamp(36px,5.4vw,80px)) 0 clamp(84px,9.4vw,136px)}
.lg-hero__glow{width:clamp(560px,72vw,1000px);aspect-ratio:1;top:clamp(-560px,-32vw,-240px);right:clamp(-460px,-20vw,-180px)}
.lg-hero__inner{position:relative;z-index:2;display:grid;gap:40px;align-items:end}
.lg-hero__copy{min-width:0}
.lg-hero__title{font-size:clamp(40px,5.8vw,84px);font-weight:800;line-height:.98;letter-spacing:-.042em;color:var(--navy);max-width:13ch}
.lg-hero__lead{margin-top:clamp(16px,2vw,26px);max-width:32em;font-size:var(--fs-lg);line-height:1.5;color:var(--ink-2)}
.lg-meta{list-style:none;display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:clamp(24px,3vw,40px);font-size:15px;line-height:1.45;color:var(--ink-2)}
.lg-meta__item{display:flex;align-items:flex-start;gap:10px;max-width:30em}
.lg-meta__item .i{width:18px;height:18px;margin-top:1px;color:var(--teal-700)}
.lg-meta time{font-weight:600;color:var(--navy)}
.lg-hero__art{display:none}
.lg-hero__wave{bottom:-1px;color:var(--paper)}

/* sun over the waves (line art; fully drawn without motion) */
.lg-art{width:100%;height:auto;overflow:visible}
.lg-art path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lg-art .lg-art__disc{fill:var(--sun-100);stroke:none}
.lg-art .lg-art__arc{stroke:var(--sun);stroke-width:3.5}
.lg-art .lg-art__ray{stroke:var(--sun-600);stroke-width:3}
.lg-art .lg-art__wave{stroke:var(--teal);stroke-width:3.5}
.lg-art .lg-art__wave--2{stroke:var(--teal-300)}

@media (min-width:768px){
  .lg-hero__inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,80px)}
  .lg-hero__art{display:block;width:clamp(220px,27vw,380px);margin-bottom:clamp(-30px,-1.6vw,-10px)}
}

/* ---------- body: contents + article ---------- */
.lg-body{padding-block:clamp(36px,5.5vw,80px) clamp(88px,10vw,144px)}
.lg-layout{display:grid;gap:clamp(24px,4vw,36px)}
.lg-tocnav{min-width:0}

/* contents: a disclosure on phones and tablets */
.lg-toc{border:1.5px solid var(--line-2);border-radius:var(--r);background:var(--paper)}
.lg-toc__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px 0 20px;border-radius:calc(var(--r) - 2px);list-style:none;cursor:pointer;font:600 16px/1.3 var(--f-body);color:var(--navy);-webkit-tap-highlight-color:transparent}
.lg-toc__sum::-webkit-details-marker{display:none}
.lg-toc__sum::marker{content:""}
.lg-toc__sum .i{width:20px;height:20px;color:var(--teal-700);transition:rotate .4s var(--ease-out)}
.lg-toc[open] .lg-toc__sum .i{rotate:180deg}
.lg-toc__list{list-style:none;margin:0;padding:0 10px 12px}
.lg-toc__list li+li{margin-top:2px}
.lg-toc__link{position:relative;display:flex;align-items:baseline;gap:12px;min-height:44px;padding:11px 10px;border-radius:var(--r-sm);font-size:15.5px;line-height:1.35;color:var(--ink-2);text-decoration:none;transition:color .25s,background-color .25s}
.lg-toc__link:hover{color:var(--navy);background:var(--foam)}
.lg-toc__link[aria-current="true"]{color:var(--navy);background:var(--teal-50)}
.lg-toc__n{flex:none;min-width:1.3em;font-weight:600;color:var(--teal-700);font-variant-numeric:tabular-nums}

/* article */
.lg-article{min-width:0;max-width:66ch;font-size:var(--fs-base);line-height:1.72;color:var(--ink-2);overflow-wrap:break-word}
.lg-article a{overflow-wrap:anywhere}
.lg-article strong{font-weight:600;color:var(--navy)}

/* "in plain words" summary */
.lg-short{background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--r-lg);padding:clamp(24px,3.6vw,40px)}
.lg-short__title{font-size:clamp(24px,2.3vw,30px);font-weight:700;line-height:1.1;letter-spacing:-.022em;color:var(--navy)}
.lg-short__list{list-style:none;display:grid;gap:16px;margin-top:clamp(18px,2vw,24px)}
.lg-short__list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.lg-short__list p{color:var(--ink);line-height:1.55}
.lg-short__tick{display:grid;place-items:center;width:28px;height:28px;margin-top:-1px;border-radius:50%;background:var(--paper);border:1px solid var(--teal-100);color:var(--teal-700)}
.lg-short__tick .i{width:15px;height:15px;stroke-width:2.8}

/* numbered sections */
.lg-sec{margin-top:clamp(28px,3.4vw,48px);padding-top:28px}
.lg-sec>*+*{margin-top:1em}
.lg-h2{display:flex;align-items:baseline;gap:.55em;font-size:clamp(26px,2.7vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.026em;color:var(--navy)}
.lg-h2+*{margin-top:clamp(14px,1.6vw,20px)}
.lg-num{flex:none;min-width:1.05em;color:var(--teal-700);font-variant-numeric:tabular-nums}
.lg-sec .lg-h3{margin-top:1.9em;font-size:clamp(19px,1.6vw,21px);font-weight:700;line-height:1.25;letter-spacing:-.012em;color:var(--navy)}
.lg-sec .lg-h3+*{margin-top:.5em}
.lg-sec .lg-h2+.lg-h3{margin-top:clamp(14px,1.6vw,20px)}

.lg-list{list-style:none;display:grid;gap:.55em}
.lg-list li{position:relative;padding-left:1.45em}
.lg-list li::before{content:"";position:absolute;left:.2em;top:.64em;width:.44em;height:.44em;border-radius:50%;background:var(--teal)}

/* placeholders the owner still has to fill in */
.lg-todo{padding:.05em .38em;border:1.5px dashed var(--sun-600);border-radius:6px;background:var(--sun-100);color:#5C4100;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* owner details */
.lg-sec .lg-facts{margin-top:1.3em;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.lg-facts__row{display:grid;gap:2px 24px;padding:14px 20px;border-top:1px solid var(--line)}
.lg-facts__row:first-child{border-top:0}
.lg-facts dt{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--mute)}
.lg-facts dd{margin:0;line-height:1.5;color:var(--ink)}

/* tables (stack into blocks on phones) */
.lg-sec .lg-tablewrap{margin-top:1.3em}
.lg-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:15.5px;line-height:1.55;text-align:left}
.lg-table th{padding:13px 18px;background:var(--foam);font-size:14.5px;font-weight:600;line-height:1.35;color:var(--navy);vertical-align:bottom}
.lg-table th:first-child{border-top-left-radius:calc(var(--r) - 1px)}
.lg-table th:last-child{border-top-right-radius:calc(var(--r) - 1px)}
.lg-table td{padding:15px 18px;border-top:1px solid var(--line);vertical-align:top}
.lg-cell-label{display:none}
.lg-cell-title{display:block;font-weight:600;color:var(--navy)}
.lg-cell-note{display:block;margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.lg-code{padding:.1em .45em;border:1px solid var(--teal-100);border-radius:6px;background:var(--teal-50);font:600 .95em/1.4 var(--f-body);color:var(--navy);white-space:nowrap}
.lg-table--storage td:first-child{width:1%;white-space:nowrap}

/* browser help links */
.lg-sec .lg-ext{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2em}
.lg-ext a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--paper);font:600 15px/1.2 var(--f-body);color:var(--navy);text-decoration:none;transition:border-color .25s,background-color .25s}
.lg-ext a:hover{border-color:var(--navy);background:var(--foam);color:var(--navy)}
.lg-ext .i{width:16px;height:16px;color:var(--teal-700)}

@media (min-width:560px){
  .lg-facts__row{grid-template-columns:minmax(140px,32%) minmax(0,1fr);align-items:baseline}
}

@media (max-width:639px){
  .lg-table,.lg-table tbody,.lg-table tr,.lg-table td{display:block}
  .lg-table{border:0;border-radius:0;background:none}
  .lg-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .lg-table tr{padding:8px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
  .lg-table tr+tr{margin-top:12px}
  .lg-table td{padding:8px 18px;border:0}
  .lg-table td:first-child{padding-top:12px}
  .lg-table--storage td:first-child{width:auto}
  .lg-cell-label{display:block;margin-bottom:1px;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--mute)}
}

@media (min-width:768px){
  .lg-article{font-size:18px}
}

/* desktop: contents become a sticky rail beside the article */
@media (min-width:1024px){
  .lg-layout{grid-template-columns:clamp(220px,19vw,260px) minmax(0,1fr);column-gap:clamp(56px,6vw,104px);align-items:start}
  .lg-tocnav{position:sticky;top:calc(var(--header-h) + 32px);max-height:calc(100vh - var(--header-h) - 64px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px 4px 4px 0}
  .lg-toc{border:0;border-radius:0;background:none}
  .js .lg-toc::details-content{content-visibility:visible}
  .lg-toc__sum{min-height:0;padding:0 0 14px;cursor:default;font-size:15px;color:var(--mute)}
  .js .lg-toc__sum .i{display:none}
  .lg-toc__list{padding:0;border-left:2px solid var(--line)}
  .lg-toc__list li+li{margin-top:0}
  .lg-toc__link{min-height:0;margin-left:-2px;padding:8px 0 8px 18px;border-radius:0;font-size:15px;color:var(--mute)}
  .lg-toc__link::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease-out),background-color .3s}
  .lg-toc__link:hover{background:none;color:var(--navy)}
  .lg-toc__link.is-read::before{transform:scaleY(1);background:var(--teal-300)}
  .lg-toc__link[aria-current="true"]{background:none;color:var(--navy)}
  .lg-toc__link[aria-current="true"]::before{transform:scaleY(1);background:var(--teal)}
  .lg-toc__link:focus-visible{outline-offset:2px}
}

/* ---------- other legal pages ---------- */
.lg-more{position:relative;background:var(--foam);padding-block:clamp(64px,8vw,112px)}
.lg-more__grid{display:grid;gap:clamp(32px,5vw,72px)}
.lg-more__head{min-width:0}
.lg-more__title{font-size:clamp(34px,4.2vw,56px);font-weight:750;line-height:1.02;letter-spacing:-.036em;color:var(--navy)}
.lg-more__text{margin-top:clamp(14px,1.6vw,20px);max-width:30em;font-size:var(--fs-base);line-height:1.6;color:var(--ink-2)}
.lg-more .lg-more__cta{margin-top:clamp(22px,2.6vw,30px)}
.lg-docs{display:grid;min-width:0;border-top:1px solid var(--line-2)}
.lg-doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 6px 22px 0;border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none}
.lg-doc__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--teal-700);transition:background-color .3s,border-color .3s,color .3s}
.lg-doc__icon .i{width:22px;height:22px}
.lg-doc__body{min-width:0}
.lg-doc__title{display:block;font:700 clamp(22px,2.3vw,30px)/1.1 var(--f-display);letter-spacing:-.022em;color:var(--navy);transition:color .25s}
.lg-doc__desc{display:block;margin-top:6px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.lg-doc__chev{width:22px;height:22px;color:var(--mute);transition:translate .45s var(--ease-out),color .25s}
.lg-doc:hover{color:inherit}
.lg-doc:hover .lg-doc__title{color:var(--teal-700)}
.lg-doc:hover .lg-doc__icon{border-color:var(--teal);background:var(--teal);color:var(--paper)}
.lg-doc:hover .lg-doc__chev{translate:4px 0;color:var(--teal-700)}
.lg-doc:focus-visible{outline-offset:4px}

@media (min-width:900px){
  .lg-more__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}

/* ---------- print: just the text ---------- */
@media print{
  .lg-hero{padding:0 0 16px;background:none}
  .lg-hero__glow,.lg-hero__art,.lg-hero__wave,.lg-tocnav,.lg-more{display:none!important}
  .lg-hero__title{font-size:32px;max-width:none}
  .lg-body{padding:0}
  .lg-layout{display:block}
  .lg-article{max-width:none;font-size:11pt;color:#000}
  .lg-short{border-color:#999;background:none}
  .lg-sec{break-inside:auto}
  .lg-h2{break-after:avoid}
  .lg-todo{background:none}
}