/* ---------- tokens (single visual world: the Monty site) ---------- */
:root{
  --ink:#0E1512; --paper:#FFFFFF; --cream:#F6F1E4; --white:#FFFFFF;
  --green:#5EA977; --forest:#1F3D2C; --link:#2F6B48; --pale:#C9F2D8;
  --lime:#DCF55A; --tangerine:#FF7A45; --sky:#9BDDFF; --lilac:#CDB8FF; --warn:#F3E7C9; --stone:#EAEFE9;
  --slate:#4A5651; --line:#DDE2DC; --ink-soft:#D7DED8;
  --display:'Sohne','Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Poppins','Helvetica Neue',Arial,system-ui,sans-serif;
  --wrap:1216px; --gutter:32px; --r-card:8px; --r-panel:8px; --r-tile:8px;
}
/* Söhne: Klim trial files for now (68 glyphs, no punctuation beyond , - . and no accents). Swap in the licensed web fonts before launch; Archivo fills the missing glyphs until then. */
@font-face{font-family:'Sohne';src:url('/fonts/TestSohne-Dreiviertelfett.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sohne';src:url('/fonts/TestSohne-Kraftig.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sohne';src:url('/fonts/TestSohne-Extrafett.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/24px var(--body);letter-spacing:.1px;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0 0 16px}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible{outline-color:var(--green)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
/* phones: a 16px side margin (the iOS standard) instead of 32px, so cards and text use the width a phone has */
@media (max-width:600px){:root{--gutter:16px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:999px;z-index:100}
.skip:focus{left:12px}

/* type */
.statement{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.96}
.statement .accent{color:var(--lime)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.eyebrow .ico{width:22px;height:22px;border-radius:8px;background:var(--green);display:inline-block;flex:0 0 auto}
.eyebrow-light{color:#9CD5B1}
.h-section{font:900 clamp(30px,4vw,46px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:10px 0 14px}
.h-feature{font:700 clamp(22px,2.6vw,30px)/1.15 var(--display);margin:0 0 8px}
.lede{font-size:16px;line-height:1.5;max-width:36em;color:var(--slate)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font:500 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-green{background:var(--green);color:#FFFFFF}
.btn-green:hover{background:#4F9A69}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{border:1.5px solid currentColor;color:var(--paper)}
.btn-ghost-ink{border:1.5px solid var(--ink);color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--link);text-decoration:none}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
.tag-pill{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:7px 11px;background:var(--ink);color:var(--paper)}
.tag-pill.light{background:rgba(14,21,18,.08);color:var(--ink)}
.tag-pill i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}

/* ---------- announcement + header ---------- */
.announce{background:var(--pale);color:var(--ink);font-size:13.5px;line-height:1.3;position:relative;z-index:45}
.announce .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:38px;padding-top:6px;padding-bottom:6px}
.announce-msg{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit}
.announce-msg:hover .msg{text-decoration:underline}
.announce .tag{font:900 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto}
.announce .msg{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce .more{flex:0 0 auto;padding:4px 0;font-weight:600;white-space:nowrap}
.announce .more:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.announce{font-size:12.5px}}
/* Once stuck, the header turns to frosted glass. The blur sits on ::before so the header itself never becomes the
   containing block for the fixed mobile drawer inside it. Pointing at it, or opening a menu, brings back solid white. */
.site-header{background:var(--paper);position:sticky;top:0;z-index:50;transition:background-color .25s ease,box-shadow .25s ease}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);opacity:0;transition:opacity .25s ease}
.site-header.is-stuck{background:transparent;box-shadow:0 1px 0 rgba(14,21,18,.08)}
.site-header.is-stuck::before{opacity:1}
.site-header.is-stuck:has(.has-menu.is-open,.has-menu :focus-visible){background:var(--paper)}
@media (hover:hover){.site-header.is-stuck:hover{background:var(--paper)}}
.util-bar{border-bottom:1px solid #E8E8E8;background:var(--paper);position:relative;z-index:55}
.util{display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:13px;padding-top:8px;padding-bottom:8px}
.util > a{text-decoration:none;color:var(--slate)}
.util > a:hover{color:var(--ink)}
.lang > button{display:inline-flex;align-items:center;gap:7px;font:600 12.5px/1 var(--body);letter-spacing:.02em;border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 5px;background:var(--white);color:var(--ink)}
.lang > button:hover{border-color:var(--ink)}
.flag{display:block;width:20px;height:20px;border-radius:50%;flex:0 0 auto}
.menu-lang .flag{width:22px;height:22px}
.menu-lang{left:auto;right:0;min-width:190px;padding:8px;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 24px 48px rgba(14,21,18,.12)}
.menu-lang a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-card);font-size:14px;text-decoration:none;color:var(--ink)}
.menu-lang a:hover{background:var(--stone)}
.menu-lang a[aria-current]{font-weight:600}
/* It lists every language by its own name (build.mjs): a search box (shown by the script), then a grid that scrolls */
.util .lang .menu-lang{left:auto;right:0;width:min(600px,calc(100vw - 2 * var(--gutter)))}
.lang-find{padding:2px 2px 8px}
.lang-find input{display:block;width:100%;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);font:400 14px/1 var(--body);color:var(--ink)}
.lang-find input::placeholder{color:var(--slate)}
.lang-find input:focus-visible{outline-offset:-1px}
.lang-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px;max-height:min(62vh,452px);overflow-y:auto;overscroll-behavior:contain}
.menu-lang .lang-list a[hidden]{display:none}
.lang-none{margin:4px 10px 6px;font-size:13.5px;color:var(--slate)}
#menu-lang:target{display:block}
@media (max-width:700px){.lang-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.main-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;min-height:72px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{display:block;height:44px;width:auto}
.primary{display:contents}
.primary > ul{display:flex;align-items:center;justify-content:center;gap:40px}
.nav-cta{justify-self:end}
.primary > ul > li{display:flex;align-items:center;height:72px}
.primary > ul > li > a,.primary > ul > li > button{font:500 15px/1 var(--body);text-decoration:none;padding:22px 0;display:inline-block}
.primary > ul > li > a:hover,.primary > ul > li > button:hover{color:var(--link)}
.has-menu{position:static}
.lang.has-menu{position:relative}
.lang > button::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;padding:28px 0 32px;z-index:60}
.scrim{position:fixed;inset:0;background:rgba(14,21,18,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.site-header:not(.is-quiet):has(.primary > ul > .has-menu:hover) ~ .scrim,.site-header:has(.primary > ul > .has-menu :focus-visible, .primary > ul > .has-menu.is-open) ~ .scrim{opacity:1}
.has-menu.is-open > .menu,.has-menu:hover > .menu,.has-menu:has(:focus-visible) > .menu{display:block}
/* after a scroll closes a hovered menu, it stays shut until the pointer comes back onto the nav */
@media (min-width:961px){.site-header.is-quiet .has-menu:hover > .menu{display:none}}
.menu-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:32px}
.menu-inner.three{grid-template-columns:1fr 1fr 1.4fr}
.menu-col > a{display:block;font-size:14px;text-decoration:none;padding:5px 0;color:var(--ink)}
.menu-col > a:hover{color:var(--link)}
.menu-group{font:700 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:12px 0 6px}
.menu-group:first-child{margin-top:0}
.menu-lead{display:block;text-decoration:none;padding:10px 12px;border-radius:var(--r-card);background:var(--stone);margin-bottom:10px}
.menu-col > .menu-lead{padding:12px 14px}
.menu-lead b{display:block;font:700 14px/1.3 var(--display)}
.menu-lead span{display:block;font-size:12.5px;color:var(--slate);line-height:1.35;margin-top:2px}
.menu-lead:hover{background:var(--pale)}
.menu-feature{display:block;text-decoration:none;border-radius:var(--r-tile);padding:18px 16px;margin-top:14px;color:var(--ink)}
.menu-col > .menu-feature{padding:18px 18px 20px}
.menu-feature.lime{background:var(--lime)}
.menu-feature.sky{background:var(--sky)}
.menu-feature .pill-tag{display:inline-block;font:700 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(14,21,18,.35);border-radius:999px;padding:5px 8px}
.menu-feature b{display:block;font:900 26px/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:26px 0 6px}
.menu-feature span:last-child{display:block;font-size:13px;line-height:1.35}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:999px;align-items:center;justify-content:center}
.bars{display:block;width:18px;height:12px;position:relative}
.bars i{position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.bars i:nth-child(1){top:0}.bars i:nth-child(2){top:5px}.bars i:nth-child(3){top:10px}
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.drawer-head,.drawer-foot,.drawer-scrim{display:none}
/* Below 961px the nav is a drawer that slides in from the right over a dimmed page. The dimmer lives inside the
   header too, and the header rises above the utility bar while the drawer is out. Platform and Solutions open in
   place as accordions. */
@media (max-width:960px){
  .main-row{display:flex}
  .burger{display:inline-flex}
  .site-header.nav-up{z-index:90}
  .drawer-scrim{display:block;position:fixed;inset:0;z-index:1;background:rgba(14,21,18,.55);opacity:0;pointer-events:none;transition:opacity .35s ease}
  .site-header.nav-open .drawer-scrim{opacity:1;pointer-events:auto}
  .primary{position:fixed;top:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;width:min(88vw,400px);padding:0 24px 28px;background:var(--paper);box-shadow:-20px 0 50px rgba(14,21,18,.18);overflow-y:auto;overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;transition:transform .42s cubic-bezier(.22,.8,.22,1),visibility 0s linear .42s}
  .primary.is-open{transform:none;visibility:visible;transition:transform .42s cubic-bezier(.22,.8,.22,1),visibility 0s}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;flex:0 0 auto;min-height:64px;margin:0 -24px;padding:0 20px 0 24px;background:var(--paper);border-bottom:1px solid var(--line)}
  .drawer-logo img{display:block;height:35.2px;width:auto}
  .drawer-close{position:relative;flex:0 0 auto;width:40px;height:40px;border:1.5px solid var(--ink);border-radius:999px}
  .drawer-close::before,.drawer-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
  .drawer-close::after{transform:rotate(-45deg)}
  .primary > ul{display:block;margin-top:8px}
  .primary > ul > li{display:block;height:auto;border-bottom:1px solid var(--line)}
  .primary > ul > li > a,.primary > ul > li > button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 0;font:700 19px/1.2 var(--display);text-align:left}
  .primary .has-menu > button::after{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Cpath%20d%3D%22m1015.1%20535.08h-350.16v-350.16c0-35.859-29.156-64.922-64.922-64.922s-64.922%2029.156-64.922%2064.922v350.06l-350.16-0.046875c-35.766%200.14062-64.922%2029.203-64.922%2065.062s29.156%2064.922%2064.922%2064.922h350.06v350.06c0%2035.859%2029.156%2064.922%2064.922%2064.922%2035.766%200%2064.922-29.156%2064.922-64.922l-0.046874-350.06h350.06c35.859%200%2064.922-29.156%2064.922-64.922s-28.922-64.922-64.688-64.922z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .3s ease}
  .primary .has-menu.is-open > button{color:var(--link)}
  .primary .has-menu.is-open > button::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Cpath%20d%3D%22m1064.4%20667.78h-928.78c-37.406%200-67.781-30.375-67.781-67.781s30.375-67.781%2067.781-67.781h928.78c37.406%200%2067.781%2030.375%2067.781%2067.781s-30.375%2067.781-67.781%2067.781z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E");transform:rotate(180deg)}
  .site-header .primary .has-menu > .menu{display:grid;grid-template-rows:0fr;visibility:hidden;position:static;padding:0;border:0;background:transparent;transition:grid-template-rows .35s ease,visibility 0s linear .35s}
  .site-header .primary .has-menu.is-open > .menu{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s ease,visibility 0s}
  .primary .menu-inner,.primary .menu-inner.three{display:block;min-height:0;overflow:hidden;margin:0;padding:0}
  .primary .menu-col:last-child{padding-bottom:14px}
  .primary .menu-col > a{padding:8px 0;font-size:15px}
  .primary .menu-lead,.primary .menu-lead:hover{margin:0;background:none;border-radius:0}
  .primary .menu-lead b{font:inherit}
  .primary .menu-lead span{display:none}
  .primary .menu-group{margin:14px 0 2px}
  .primary .menu-col > .menu-feature{display:none}
  .nav-cta{flex:0 0 auto;margin-top:26px;min-height:52px}
  .drawer-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:20px;font-size:14px}
  .drawer-foot a{display:inline-flex;align-items:center;gap:8px;color:var(--slate);text-decoration:none}
  .drawer-foot a:hover{color:var(--ink)}
  .primary.is-open > ul > li,.primary.is-open > .nav-cta,.primary.is-open > .drawer-foot{animation:drawer-in .5s cubic-bezier(.22,.8,.22,1) .06s both}
  .primary.is-open > ul > li:nth-child(2){animation-delay:.1s}
  .primary.is-open > ul > li:nth-child(3){animation-delay:.14s}
  .primary.is-open > ul > li:nth-child(4){animation-delay:.18s}
  .primary.is-open > ul > li:nth-child(5){animation-delay:.22s}
  .primary.is-open > .nav-cta{animation-delay:.26s}
  .primary.is-open > .drawer-foot{animation-delay:.3s}
  .menu{position:static;box-shadow:none;border:0;border-radius:0;background:transparent}
  .util .menu{position:absolute;top:100%;right:0;left:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 24px 48px rgba(14,21,18,.12);padding:8px}
  .has-menu:hover > .menu{display:none}
  .has-menu.is-open > .menu{display:block}
}
@keyframes drawer-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
html.nav-lock{overflow:hidden}

/* ---------- hero ---------- */
.hero{padding:40px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:28px;align-items:stretch}
.panel{position:relative;background:var(--ink);color:var(--paper);border-radius:var(--r-panel);padding:56px 52px 52px}
.panel .statement{font-size:clamp(38px,4.6vw,62px);margin:18px 0 20px;color:var(--paper)}
.panel p{font-size:16px;line-height:1.5;color:var(--ink-soft);max-width:34em}
.panel .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stage{position:relative;background:linear-gradient(160deg,#F1F8C9 0%,var(--pale) 100%);border-radius:var(--r-panel);padding:22px;display:flex;flex-direction:column;gap:14px;min-height:520px;overflow:hidden}
.stage-photo{position:absolute;inset:0;background-size:cover;opacity:0;transition:opacity .4s ease}
.stage-photo--collect{background-image:url('/images/collect-poolside.webp');background-position:56% 62%}
.stage-photo--listen{background-image:url('/images/listen-review-qr.webp');background-position:58% 46%}
.stage-photo--respond{background-image:url('/images/respond-keyboard.webp');background-position:center 55%}
.stage-photo--grow{background-image:url('/images/grow-keyhandoff.webp');background-position:50% 40%}
.stage-photo--learn{background-image:url('/images/learn-liverpool-view.webp');background-position:58% 42%}
.stage:has(#view-collect.is-active) .stage-photo--collect{opacity:1}
.stage:has(#view-listen.is-active) .stage-photo--listen{opacity:1}
.stage:has(#view-respond.is-active) .stage-photo--respond{opacity:1}
.stage:has(#view-grow.is-active) .stage-photo--grow{opacity:1}
.stage:has(#view-learn.is-active) .stage-photo--learn{opacity:1}
.tags{position:relative;z-index:1;margin:auto -22px -22px;padding:22px}
.tags-track{display:flex;gap:6px;flex-wrap:wrap}
.tags .is-clone{display:none}
.stage:has(#view-collect.is-active, #view-listen.is-active, #view-respond.is-active, #view-learn.is-active, #view-grow.is-active) .tags{padding-top:36px;background:linear-gradient(180deg,rgba(14,21,18,0) 0%,rgba(14,21,18,.55) 55%,rgba(14,21,18,.7) 100%)}
.tags button{font:500 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:9px 13px;background:rgba(14,21,18,.1);color:var(--ink)}
.tags button[aria-selected="true"],.tags .is-clone.is-sel{background:var(--ink);color:var(--paper)}
.stage:has(#view-collect.is-active, #view-listen.is-active, #view-respond.is-active, #view-learn.is-active, #view-grow.is-active) .tags button:not([aria-selected="true"]):not(.is-sel){background:transparent;color:#FFFFFF}
.views{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}
.view{display:none;flex-direction:column;gap:12px}
.view.is-active{display:flex;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ui{background:var(--white);border:1px solid rgba(14,21,18,.08);border-radius:var(--r-tile);padding:16px 18px;box-shadow:0 18px 40px rgba(14,21,18,.12);font-size:13.5px;line-height:1.4;color:var(--ink)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.row + .row{margin-top:8px}
.ui b,.crop b{font-weight:600}
.ui .q,.crop .q{margin:10px 0 8px;font-style:italic;color:#2B3430;font-size:15px}
.ui .s,.crop .s{font-size:12.5px;color:var(--slate)}
.pill{font:500 10.5px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:6px 9px;white-space:nowrap}
.pill.warn{background:var(--warn);color:#4A3A12}
.pill.ok{background:var(--pale);color:#0B3F26}
.pill.info{background:var(--sky);color:#123A57}
.pill.hot{background:var(--lime);color:var(--ink)}
.stars{display:inline-flex;align-items:center;gap:2px;font-size:22px;color:#FFD800}
.stars svg{width:1em;height:1em;fill:currentColor;display:block}
.ui .phone-head{font:700 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.ui .ask{font:700 26px/1.1 var(--display);margin:10px 0 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips span{font:500 11px/1 var(--body);border-radius:999px;padding:6px 9px;background:var(--stone)}
.bar{display:flex;align-items:center;gap:10px;font-size:13px}
.bar i{flex:1;height:8px;border-radius:999px;background:var(--stone);position:relative;overflow:hidden}
.bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--green);border-radius:999px}
.bar i.warn::after{background:var(--tangerine)}
.bar em{font-style:normal;font-variant-numeric:tabular-nums;min-width:38px;text-align:right;font-weight:600}
.rank{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:5px 0;border-top:1px solid var(--line)}
.rank b{font:900 13px/1 var(--display);color:var(--green)}
.rank em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--slate)}
.src{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:8px;font:900 11px/1 var(--display);color:var(--paper);background:var(--ink)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.panel{padding:44px 28px 36px}.stage{min-height:0}}

/* ---------- logo strip ---------- */
.logos{padding:8px 0 108px}
.logos .wrap{padding-top:28px}
.logos .head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.logos .head p{margin:0;font:500 16px/1.3 var(--display)}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:88px;width:max-content;animation:marquee 40s linear infinite;will-change:transform}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
.mark{height:32.2px;width:auto;object-fit:contain;opacity:.6;filter:grayscale(1);flex:0 0 auto}
.mark.is-large{height:43.7px}
/* the Millennium PNG carries a transparent margin (the thin feet of its L and E faded out against the file edge when
   shrunk), so it is set 1/0.8956 taller to keep the same logo size */
.mark.m-mill{height:48.8px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:36px}
.section-head .lede{margin-bottom:0}
.section-head h2{margin-bottom:0}
@media (max-width:900px){.section-head{grid-template-columns:1fr}}
@media (max-width:700px){.section{padding:64px 0}.section-head{text-align:center}}

/* venue cards */
.venues{padding-top:0}
/* Desktop: the section heading takes the first slot of the venue grid and Hostels steps out, so the heading and five
   cards fill two rows of three (.cards dissolves into the wrap's grid). Phones and tablets keep the heading above all
   six cards. */
@media (min-width:901px){
  .venues .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .venues .cards{display:contents}
  .venues .section-head{grid-template-columns:1fr;align-content:start;gap:16px;margin:0;padding-right:24px}
  .venues .section-head h2{margin:0}
  .venues .card[href$="/solutions/hostels"]{display:none}  /* $=: the translated pages link to /<code>/solutions/hostels */
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--stone);border-radius:var(--r-card);padding:40px 36px 32px;display:flex;flex-direction:column;gap:10px;min-height:280px;text-decoration:none;color:var(--ink);transition:background-color .15s ease;position:relative;z-index:0;overflow:hidden}
/* hover tint only where there is a real pointer: a phone keeps :hover on the last card tapped, which left one card green */
@media (hover:hover){.card:hover{background:var(--pale)}}
.card .ico{position:absolute;bottom:-55px;right:-55px;z-index:-1;color:color-mix(in srgb,var(--stone),black 12%);transition:color .15s ease}
@media (hover:hover){.card:hover .ico{color:color-mix(in srgb,var(--pale),black 12%)}}
.card .ico svg{display:block;width:227px;height:227px}
.card h3{font:700 22px/1.2 var(--display)}
.card p{color:var(--slate);flex:1;margin:0}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.card{min-height:0;padding:28px 24px 24px}}

/* pillars bento on ink */
.pillars{background:var(--ink);color:var(--paper)}
.pillars .eyebrow{color:#9CD5B1}
.pillars .section-head{grid-template-columns:1fr;text-align:center}
/* desktop: the heading breaks after "Fix it fast." (the break is only there on desktop) */
.br-desk{display:none}
@media (min-width:901px){.br-desk{display:inline}}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{border-radius:var(--r-tile);padding:30px 30px 0;display:flex;flex-direction:column;gap:12px;color:var(--ink);min-height:360px;overflow:hidden;position:relative}
.tile .tag-pill{align-self:flex-start}
.tile h3{font:700 clamp(22px,2.4vw,28px)/1.15 var(--display)}
.tile p{margin:0;max-width:30em}
.tile .tlink{margin-top:2px}
.tile .crop{margin:auto -6px 0;background:var(--white);border-radius:var(--r-tile) var(--r-tile) 0 0;padding:14px 16px 6px;box-shadow:0 -12px 30px rgba(14,21,18,.12);font-size:13px;line-height:1.35;color:var(--ink)}
.tile.lime{background:var(--lime);grid-column:span 3}
/* Listen: no box of its own; the words sit on the section, under a row of circles that tells the story (a low score,
   a typed complaint, the alert, WhatsApp, the manager, fixed). They overlap like a stack, a ring in the section colour
   cutting each overlap, and now and then one of them (the script picks it at random) springs up and settles back. It
   keeps its place in the stack while it moves (nothing swaps which circle is on top), so the motion never jumps. */
.tile.bare{background:none;color:var(--paper);grid-column:span 3}
.tile.bare .tlink{color:#9CD5B1}
.orbs{display:flex;margin:0 0 20px;padding-top:8px}
.orbs span{--s:60px;display:grid;place-items:center;flex:0 0 auto;width:var(--s);height:var(--s);border-radius:50%;box-shadow:0 0 0 4px var(--ink);transition:transform .7s cubic-bezier(.33,1,.68,1);will-change:transform}
.orbs span+span{margin-left:calc(var(--s) * -.2)}
.orbs span.is-up{transform:translateY(-14px);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.orbs svg{width:44%;height:44%;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.orbs .o-star{background:var(--tangerine)}.orbs .o-star svg{fill:var(--paper);stroke:none}
.orbs .o-note{background:var(--sky)}
.orbs .o-bell{background:var(--lime)}
.orbs .o-wa{background:#25D366}.orbs .o-wa svg{width:52%;height:52%;fill:var(--paper);stroke:none}
.orbs .o-user{background:var(--lilac)}
.orbs .o-done{background:var(--green)}.orbs .o-done svg{stroke:var(--paper);stroke-width:2.6}
.tile.sky{background:var(--sky);grid-column:span 2}
.tile.lilac{background:var(--lilac);grid-column:span 2}
.tile.green{background:var(--green);grid-column:span 2}
.tile.green .tlink,.tile.sky .tlink,.tile.lilac .tlink{color:var(--ink)}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.tile.lime,.tile.bare,.tile.sky,.tile.lilac,.tile.green{grid-column:span 1}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.tile{min-height:0;padding:26px 22px 0}.orbs{margin-bottom:16px}.orbs span{--s:46px}}
/* the cards pop up as they scroll near, one after another, and stay (the script arms this only when motion is allowed) */
.bento.is-armed .tile{opacity:0;transform:translateY(40px) scale(.9);transition:transform .7s cubic-bezier(.34,1.4,.64,1) var(--pop-delay,0s),opacity .45s ease var(--pop-delay,0s)}
.bento.is-armed .tile.is-in{opacity:1;transform:none}

/* timeline: case studies revealed one step at a time. The script adds .is-on to a step and .is-linked to the step before it (its line draws in first). Each step sets --c (its dot) and --n (the next dot, for the line's gradient) */
.night{background:var(--cream)}
.night .h-section{display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-line;transition:opacity .35s ease}  /* each sentence on its own line */
.night .h-section.is-swapping{opacity:0}
.tl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:44px}
.tl-tabs button{font:500 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:10px 15px;background:rgba(14,21,18,.07);color:var(--ink);transition:background-color .2s ease,color .2s ease}
.tl-tabs button:hover{background:rgba(14,21,18,.13)}
.tl-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.tl-stage{position:relative;display:grid}
.tl-panel{grid-area:1/1;visibility:hidden}
.tl-panel.is-active{visibility:visible}
.tl-panel.is-leaving{opacity:0;transition:opacity .4s ease}
.tl-arrow{display:none}
.steps{--d:.95s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto auto auto;isolation:isolate;transition:transform var(--d) cubic-bezier(.65,0,.35,1)}
.step{--lead:var(--d);position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;padding:40px 28px 0 0}
.step:first-child{--lead:0s}
.step::before{content:"";position:absolute;left:0;top:0;z-index:1;width:20px;height:20px;border-radius:50%;background:var(--c);border:4px solid var(--cream);box-shadow:0 0 0 2px var(--c)}
.step::after{content:"";position:absolute;left:10px;top:9px;width:100%;height:2px;background:linear-gradient(90deg,var(--c),var(--n));background:linear-gradient(90deg in oklch,var(--c),var(--n));transform-origin:0 50%}
.step:last-child::after{content:none}
.step time{display:block;font:900 22px/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-bottom:12px}
.step b{display:block;font:700 16px/1.3 var(--display);margin-bottom:6px}
.step span{display:block;max-width:32em;color:var(--slate);font-size:14px;line-height:1.5}
.is-playing .step:not(.is-on)::before,.is-playing .step:not(.is-on)>*{opacity:0}
.is-playing .step:not(.is-linked)::after{transform:scaleX(0)}
.is-playing .step.is-on::before{animation:tl-dot .6s cubic-bezier(.3,.7,.4,1) var(--lead) both}
.is-playing .step.is-linked::after{animation:tl-line var(--d) cubic-bezier(.65,0,.35,1) both}
.is-playing .step.is-on>*{animation:tl-text .5s ease-out calc(var(--lead) + .2s) both}
.is-playing .step.is-on>:nth-child(2){animation-delay:calc(var(--lead) + .28s)}
.is-playing .step.is-on>:nth-child(3){animation-delay:calc(var(--lead) + .36s)}
@keyframes tl-dot{0%{opacity:0;transform:scale(.3);box-shadow:0 0 0 2px var(--c),0 0 0 0 var(--c)}55%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1);box-shadow:0 0 0 2px var(--c),0 0 0 14px transparent}}
@keyframes tl-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tl-line-v{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tl-text{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* hidden until the section scrolls into view; never applied when motion is reduced */
@media (prefers-reduced-motion:no-preference){.timeline.is-armed .tl-panel:not(.is-playing) .step::before,.timeline.is-armed .tl-panel:not(.is-playing) .step::after,.timeline.is-armed .tl-panel:not(.is-playing) .step>*{opacity:0}}
/* vertical layout: a fixed window pans down with the line like a camera; arrows step it between dots */
@media (max-width:900px){
  .tl-tabs{margin-bottom:28px}
  .tl-stage{height:300px;grid-template-rows:minmax(0,1fr)}
  .tl-panel{overflow:hidden;margin:0 -16px;padding:0 16px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 44px,#000 calc(100% - 64px),transparent)}
  .steps{--d:1.9s;grid-template-columns:1fr;grid-template-rows:none;padding:72px 0 140px}
  .step{display:block;grid-row:auto;padding:0 44px 32px 42px}
  .step:last-child{padding-bottom:0}
  .step::before{top:1px}
  .step::after{left:9px;top:11px;width:2px;height:100%;background:linear-gradient(180deg,var(--c),var(--n));background:linear-gradient(180deg in oklch,var(--c),var(--n));transform-origin:50% 0}
  .is-playing .step:not(.is-linked)::after{transform:scaleY(0)}
  .is-playing .step.is-linked::after{animation-name:tl-line-v}
  .step time{margin-bottom:8px}
  .tl-arrow{display:inline-flex;position:absolute;right:0;z-index:2;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:rgba(14,21,18,.06);color:var(--ink);transition:opacity .2s ease,background-color .2s ease}
  .tl-arrow:hover{background:rgba(14,21,18,.12)}
  .tl-arrow:disabled{opacity:.25;cursor:default}
  .tl-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tl-up{top:2px}
  .tl-down{bottom:2px}
}

/* results chart. Desktop: bars standing on the section's bottom line, rising left to right; one open at a time with a
   title, link and photo; the bar after it gets an arrow in the open bar's colour. Below 1024px the same idea turned
   vertical: one stack of cards, each opening (title, link, photo) once its top scrolls above 60% of the screen and
   staying open above that line; an arrow in the last open card's colour points down into the next one. */
.proof .section-head{grid-template-columns:1fr;text-align:center}
.rc-nav,.rc-hit{display:none}
.rc-chart{display:flex;flex-direction:column}
.rc-bar{position:relative;padding:26px 24px;color:var(--ink);text-align:center}
.rc-bar:first-child{border-radius:var(--r-tile) var(--r-tile) 0 0}
.rc-bar:last-child{border-radius:0 0 var(--r-tile) var(--r-tile)}
.rc-bar.green{background:var(--green)}.rc-bar.lime{background:var(--lime)}.rc-bar.forest{background:var(--forest);color:var(--paper)}.rc-bar.tangerine{background:var(--tangerine)}
.rc-stat b{display:block;font:900 clamp(44px,5vw,68px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rc-stat span{display:block;margin:10px auto 0;font:500 12px/1.35 var(--body);letter-spacing:.05em;text-transform:uppercase;max-width:22em}
.rc-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1)}
.rc-in{min-height:0;overflow:hidden}
.rc-bar.is-shown .rc-extra{grid-template-rows:1fr}
.rc-more{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:18px}
.rc-title{margin:0;font:700 18px/1.3 var(--display);max-width:24em}
.rc-more .tlink{color:inherit}
.rc-photo{display:block;width:100%;max-width:560px;aspect-ratio:4/3;margin:18px auto 0;object-fit:cover;border-radius:6px}
@media (max-width:1023px){
  .rc-bar.is-shown+.rc-bar:not(.is-shown)::before{content:"";position:absolute;left:50%;top:0;z-index:2;width:32px;height:16px;margin-left:-16px;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;animation:rc-arrow-v .4s cubic-bezier(.3,.7,.4,1) .3s both}
  .rc-bar.green.is-shown+.rc-bar::before{background:var(--green)}
  .rc-bar.lime.is-shown+.rc-bar::before{background:var(--lime)}
  .rc-bar.forest.is-shown+.rc-bar::before{background:var(--forest)}
  .rc-bar.tangerine.is-shown+.rc-bar::before{background:var(--tangerine)}
}
@keyframes rc-arrow-v{from{transform:scaleY(0)}to{transform:none}}
/* Below 1024px every card's colour is always on screen (cards popping in one by one left white holes in the stack).
   What an opening card reveals pops up instead: its title and link, then its photo. */
@media (max-width:1023px){
  .rc-more,.rc-photo{opacity:0;transform:translateY(16px) scale(.94);transition:opacity .2s ease,transform .2s ease}
  .rc-bar.is-shown .rc-more{opacity:1;transform:none;transition:opacity .4s ease .12s,transform .6s cubic-bezier(.34,1.4,.64,1) .12s}
  .rc-bar.is-shown .rc-photo{opacity:1;transform:none;transition:opacity .45s ease .28s,transform .7s cubic-bezier(.34,1.4,.64,1) .28s}
}
@media (min-width:1024px){
  .proof{padding-bottom:0}
  .rc-nav{display:flex;justify-content:flex-end;gap:10px;margin:-12px 0 22px}
  .rc-arrow{position:relative;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:border-color .2s ease}
  .rc-arrow:hover{border-color:var(--ink)}
  .rc-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .rc-arrow .rc-ring{position:absolute;inset:-1.5px;width:44px;height:44px;transform:rotate(-90deg);pointer-events:none}
  .rc-ring circle{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:132;stroke-dashoffset:132}
  .rc-next.is-timing .rc-ring circle{animation:rc-ring 6s linear forwards}
  .rc-chart{flex-direction:row;align-items:flex-end;gap:0;height:460px}
  .rc-extra,.rc-in{display:contents}
  .rc-bar,.rc-bar:first-child,.rc-bar:last-child{border-radius:var(--r-tile) var(--r-tile) 0 0}
  .rc-bar{flex:1 1 0;min-width:0;min-height:0;height:var(--h);padding:0;display:block;text-align:left;cursor:pointer;transition:flex-grow .6s cubic-bezier(.65,0,.35,1),height .6s cubic-bezier(.65,0,.35,1)}
  .rc-bar:nth-child(1){--h:58%}.rc-bar:nth-child(2){--h:68%}.rc-bar:nth-child(3){--h:78%}.rc-bar:nth-child(4){--h:88%}
  .rc-bar.is-open{flex-grow:3.2;height:100%;cursor:auto}
  .rc-bar::after{content:none}
  .rc-hit{display:block;position:absolute;inset:0;z-index:3;border-radius:inherit}
  .rc-bar.is-open .rc-hit{display:none}
  .rc-stat{position:absolute;top:24px;left:22px;right:22px;bottom:24px;display:flex;flex-direction:column;justify-content:space-between}
  .rc-stat b{font-size:44px}
  .rc-stat span{margin:0}
  .rc-bar.is-open .rc-stat{top:auto;left:30px;right:calc(50% + 10px);bottom:30px;justify-content:flex-end;gap:12px}
  .rc-bar.is-open .rc-stat b{font-size:clamp(56px,5vw,72px)}
  .rc-more{position:absolute;top:30px;left:30px;right:calc(50% + 10px);margin:0;padding:0;align-items:flex-start;gap:16px;visibility:hidden}
  .rc-title{font-size:22px;line-height:1.25}
  .rc-photo{display:block;position:absolute;top:22px;right:22px;width:calc(50% - 32px);max-width:none;height:calc(100% - 44px);margin:0;object-fit:cover;border-radius:6px;visibility:hidden}
  .rc-bar.is-open .rc-more,.rc-bar.is-open .rc-photo{visibility:visible}
  /* content waits for the bar to finish resizing, then fades in (the animation name flips with the state, so it replays) */
  .rc-stat{animation:rc-in-closed .6s ease both}
  .rc-bar.is-open .rc-stat,.rc-bar.is-open .rc-more,.rc-bar.is-open .rc-photo{animation:rc-in-open .7s ease both}
  .rc-bar.is-open+.rc-bar::before{content:"";position:absolute;left:0;top:50%;z-index:2;width:16px;height:32px;margin-top:-16px;clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:0 50%;animation:rc-arrow .4s cubic-bezier(.3,.7,.4,1) .35s both}
  .rc-bar.green.is-open+.rc-bar::before{background:var(--green)}
  .rc-bar.lime.is-open+.rc-bar::before{background:var(--lime)}
  .rc-bar.forest.is-open+.rc-bar::before{background:var(--forest)}
  .rc-bar.tangerine.is-open+.rc-bar::before{background:var(--tangerine)}
}
@keyframes rc-in-open{0%,45%{opacity:0}100%{opacity:1}}
@keyframes rc-in-closed{0%,45%{opacity:0}100%{opacity:1}}
@keyframes rc-arrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes rc-ring{to{stroke-dashoffset:0}}

/* a thin line across the content width at the top of a section: white on the dark bands, grey on white */
.has-rule{position:relative}
.has-rule::before{content:"";position:absolute;top:0;left:50%;width:min(calc(100% - 2 * var(--gutter)),calc(var(--wrap) - 2 * var(--gutter)));height:1px;transform:translateX(-50%);background:var(--line)}
.on-ink.has-rule::before{background:var(--paper)}
.has-rule.rule-full::before{left:0;width:100%;transform:none}

/* testimonials: dark band under the pillars, one quote at a time */
.testimonials{background:var(--ink);color:var(--paper);text-align:center}
.tst{max-width:920px;margin:0 auto}
.tst-view{overflow:hidden}
.tst-track{display:flex;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.tst-slide{flex:0 0 100%;margin:0;padding:0 12px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tst-slide blockquote{margin:0;max-width:22em;font:700 clamp(26px,3.6vw,44px)/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
.tst-slide blockquote::before{content:"\201C";font:900 1.4em/0 var(--display);color:var(--lime);margin-right:6px}
.tst-slide blockquote::after{content:"\201D";font:900 1.4em/0 var(--display);color:var(--lime);margin-left:4px}
.tst-slide figcaption{display:flex;align-items:center;gap:14px;margin-top:30px;text-align:left;font-size:15px;line-height:1.4;color:var(--ink-soft)}
.tst-slide figcaption b{display:block;color:var(--paper);font-weight:600}
.tst-logo{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.tst-logo img{width:28px;height:28px;object-fit:contain}
/* the dots double as the button: the current one opens into "Read the Story", then folds back to a dot as the next quote slides in */
.tst-dots{--w:172px;display:flex;justify-content:center;align-items:center;gap:4px;margin-top:30px}
.tst-dot{display:grid;place-items:center;min-width:24px;height:44px;border-radius:999px;text-decoration:none;color:var(--ink)}
.tst-pill{position:relative;display:grid;place-items:center;width:8px;height:8px;border-radius:999px;background:rgba(247,248,244,.3);overflow:hidden;transition:width .55s cubic-bezier(.65,0,.35,1),height .55s cubic-bezier(.65,0,.35,1),background-color .3s ease,transform .15s ease}
.tst-label{font:500 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .15s ease}
.tst-dot:hover .tst-pill{background:rgba(247,248,244,.6)}
.tst-dot[aria-current="true"] .tst-pill{width:var(--w);height:44px;background:var(--paper)}
.tst-dot[aria-current="true"] .tst-label{opacity:1;transition:opacity .3s ease .3s}
.tst-dot[aria-current="true"]:hover .tst-pill{transform:translateY(-1px)}
/* the open pill doubles as the timer to the next quote: black drains in from the right, turning the text white as it passes
   (a white-on-black copy of the label, revealed by clip-path); a thin white rim keeps the button shape once it is all black */
.tst-fill{position:absolute;inset:1.5px;display:grid;place-items:center;border-radius:999px;background:var(--ink);color:var(--paper);clip-path:inset(0 0 0 100%)}
.tst.is-timing .tst-dot[aria-current="true"] .tst-fill{animation:tst-drain calc(var(--cycle,7s) - .55s) linear .55s forwards}
@keyframes tst-drain{to{clip-path:inset(0 0 0 0)}}

/* integrations */
.integr-card{border-radius:var(--r-panel);padding:0 0 52px;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.integr-copy .lede{margin:14px 0 22px;max-width:34em}
.integr-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.integr-panel{position:relative;background:var(--stone);border-radius:var(--r-tile);padding:14px;overflow:hidden;aspect-ratio:1.25}
.integr-panel::before,.integr-panel::after{content:"";position:absolute;left:0;right:0;height:52px;pointer-events:none;z-index:2}
.integr-panel::before{top:0;background:linear-gradient(to bottom,var(--stone) 0%,transparent 100%)}
.integr-panel::after{bottom:0;background:linear-gradient(to top,var(--stone) 0%,transparent 100%)}
.integr-track{display:flex;flex-direction:column;gap:10px;animation:integr-scroll 22s linear infinite;will-change:transform}
@media (hover:hover){.integr-panel:hover .integr-track{animation-play-state:paused}}
.iitem{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:var(--r-card);padding:11px 14px;flex:0 0 auto;box-shadow:0 1px 2px rgba(14,21,18,.06)}
.iicon{width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font:800 14px/1 var(--display);color:var(--paper);flex:0 0 auto}
.iicon.s,.iicon.m{color:var(--ink)}
.iicon.g{background:var(--green)}.iicon.f{background:var(--forest)}.iicon.s{background:var(--sky)}.iicon.c{background:var(--tangerine)}.iicon.m{background:var(--lime)}
.iicon-img{width:36px;height:36px;border-radius:8px;background:var(--stone);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:7px}
.iicon-img img{width:100%;height:100%;object-fit:contain}
.iinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.iname{display:flex;align-items:center;gap:6px;font:500 13.5px/1.2 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icheck{flex:0 0 auto;color:var(--green)}
.ibar{display:block;height:6px;border-radius:3px;background:var(--line)}
.ibar.w1{width:80%}.ibar.w2{width:46%}
@keyframes integr-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (max-width:800px){.integr-card{grid-template-columns:1fr;padding:0 0 32px}}

/* rules band */
.rules .card-ink{background:var(--ink);color:var(--paper);border-radius:var(--r-panel);padding:52px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;position:relative}
/* clipped-circle notch: a punch mark on the edge of plain text boxes (no photo/animation inside), level with the
   box's heading (--notch-y, measured by the script; the middle of the box without it). Where the venue cards stack
   in one column they alternate: odd cards punched on the left, even ones on the right. */
.panel::before,.card::before,.rules .card-ink::before,.note-card::before{content:"";position:absolute;left:0;top:var(--notch-y,50%);transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--paper);z-index:1}
.rules .card-ink::after{content:"";position:absolute;right:0;top:var(--notch-y,50%);transform:translate(50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--paper);z-index:1}
@media (max-width:560px){.cards .card:nth-child(even)::before{left:auto;right:0;transform:translate(50%,-50%)}}
.rules h2{font:900 clamp(26px,3vw,38px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:12px 0 12px}
.rules p{color:var(--ink-soft);margin:0 0 18px}
.ticks{display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:16px}
/* a white tick drawn on the green circle (it used to be cut out of it, which showed the dark card through) */
.ticks li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:1px;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
.ticks li b{display:block;font:700 17px/1.3 var(--display)}
.ticks li span{display:block;color:var(--ink-soft);font-size:14px}
.rules .tlink{color:#9CD5B1}
@media (max-width:800px){.rules .card-ink{grid-template-columns:1fr;padding:36px 28px}}

/* faq */
.faq{background:var(--cream)}
.faq .inner{max-width:840px;margin:0 auto}
.faq h2{font:900 clamp(28px,3.4vw,40px)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:22px;text-align:center}
.faq details{border-top:1px solid var(--ink-soft);padding:6px 0}
.faq details:last-of-type{border-bottom:1px solid var(--ink-soft)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;font:700 18px/1.3 var(--display);padding:16px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Cpath%20d%3D%22m1015.1%20535.08h-350.16v-350.16c0-35.859-29.156-64.922-64.922-64.922s-64.922%2029.156-64.922%2064.922v350.06l-350.16-0.046875c-35.766%200.14062-64.922%2029.203-64.922%2065.062s29.156%2064.922%2064.922%2064.922h350.06v350.06c0%2035.859%2029.156%2064.922%2064.922%2064.922%2035.766%200%2064.922-29.156%2064.922-64.922l-0.046874-350.06h350.06c35.859%200%2064.922-29.156%2064.922-64.922s-28.922-64.922-64.688-64.922z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") center/13px no-repeat}
.faq details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201200%22%3E%3Cpath%20d%3D%22m1064.4%20667.78h-928.78c-37.406%200-67.781-30.375-67.781-67.781s30.375-67.781%2067.781-67.781h928.78c37.406%200%2067.781%2030.375%2067.781%2067.781s-30.375%2067.781-67.781%2067.781z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E")}
.faq details p{max-width:66ch;color:var(--slate);margin:0 0 18px}

/* closing band */
.cta{background:var(--ink);color:var(--paper);text-align:center;padding:104px 0}
.cta .statement{font-size:clamp(38px,6vw,80px);color:var(--paper)}
.cta .ticks-row{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:26px 0 30px;color:var(--ink-soft);font-size:15px}
/* each promise gets its own white icon in a green circle (Noun Project icons in images/icons): see it on your flow,
   no app or login (a cross), live on Google and TripAdvisor */
.cta .ticks-row span{display:inline-flex;align-items:center;gap:10px;text-align:left}
.cta .ticks-row span::before{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--green) url("/images/icons/promise-see.svg") center/17px no-repeat}
.cta .ticks-row span:nth-child(2)::before{background-image:url("/images/icons/promise-no.svg");background-size:11px}
.cta .ticks-row span:nth-child(3)::before{background-image:url("/images/icons/promise-live.svg");background-size:17px}
.cta .actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* footer */
.site-footer{background:var(--ink);color:var(--paper);border-top:1px solid rgba(247,248,244,.12)}
.foot-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:28px;padding:56px var(--gutter) 40px}
.foot-grid h4{font:700 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#9CD5B1;margin:0 0 12px}
.foot-grid a{display:block;text-decoration:none;font-size:14px;color:var(--ink-soft);padding:3px 0}
.foot-grid a:hover{color:var(--paper)}
.foot-brand .logo{display:inline-flex;padding:0}
.foot-brand .logo img{height:40px}
.foot-brand p{font-size:13.5px;color:var(--ink-soft);max-width:26em;margin:14px 0 0}
.newsletter{background:var(--pale);color:var(--ink)}
.newsletter .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.newsletter p{margin:0;font:700 16px/1.3 var(--display);flex:1;min-width:240px}
.newsletter form{display:flex;gap:8px;flex-wrap:wrap}
.newsletter input{font:inherit;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);min-width:240px}
.newsletter .btn{min-height:44px}
.newsletter .thanks{font-weight:600;display:none}
.legal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px var(--gutter) 28px;font-size:12.5px;color:#9BA59F}
.socials{display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(247,248,244,.2);color:var(--ink-soft);transition:color .2s ease,border-color .2s ease}
.socials a:hover{color:var(--paper);border-color:var(--paper)}
.socials svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.legal nav{display:flex;gap:16px;flex-wrap:wrap}
.legal a{text-decoration:none;color:inherit}
.legal a:hover{color:var(--paper)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- mobile: center content ---------- */
@media (max-width:700px){
  .panel{text-align:center}
  .panel .actions{justify-content:center}
  .logos .head{justify-content:center;text-align:center}
  /* header: smaller logo and row; Contact and Log In left, language right; hero card pulled up */
  .announce .msg-long{display:none}
  .announce .wrap{gap:10px}
  .announce-msg{gap:8px}
  .announce .more-long{display:none}
  .util{justify-content:flex-start}
  .util .lang{order:2;margin-left:auto}
  .main-row{min-height:56px}
  .logo img{height:32px}
  .burger{width:40px;height:40px}
  .hero{padding-top:6px}
  /* hero pills on one line; when they overflow, the script loops them and the edges fade out */
  .tags{padding-left:0;padding-right:0}
  .tags-track{flex-wrap:nowrap;justify-content:center}
  .tags button{flex:0 0 auto}
  .tags.is-loop .tags-view{overflow:hidden;overflow:clip;padding:6px 0;margin:-6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent)}
  .tags.is-loop .tags-track{justify-content:flex-start;transition:transform .55s cubic-bezier(.45,0,.2,1)}
  .tags.is-loop .is-clone{display:block}
  /* every card is a 1:1 square */
  .card,.tile,.integr-panel{aspect-ratio:1/1}
  .card,.tile{min-height:0}
  .tile.bare{aspect-ratio:auto;padding-bottom:10px}  /* no box to square off: just its content, so the next card follows closely */
  .tl-tabs{justify-content:center}
  .card{text-align:center}
  .card .tlink{align-self:center}
  .tile{text-align:center}
  .tile .tag-pill{align-self:center}
  .tile .tlink{align-self:center}
  .tile .orbs{align-self:center}
  .integr-copy{text-align:center}
  .integr-cta{justify-content:center}
  .rules .card-ink>div{text-align:center}
  .foot-grid{text-align:center;grid-template-columns:1fr 1fr;gap:0 16px}
  .foot-brand{padding-bottom:26px}
  .foot-grid > div:not(.foot-brand){border-top:1px solid rgba(247,248,244,.14);padding:20px 0 22px}
  .newsletter form{flex:1 1 100%;flex-wrap:nowrap}
  .newsletter input{flex:1;min-width:0}
  .newsletter .btn{flex:0 0 auto}
  .newsletter .wrap{justify-content:center;text-align:center}
  .legal{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .legal nav{justify-content:center;gap:6px 12px}
}
/* Phones: the venue cards stack as you scroll. Each one sticks a little lower than the one before (under the 56px
   header), so the next slides up over it and the cards behind peek out along the top; the script sinks each covered
   card back (--sink: how many cards now lie on top of it), which shrinks it and darkens it a little per card, like a
   deck (no shadows). A flex column
   rather than a grid, because a sticky grid item can't leave its own row; the empty ::after keeps the finished deck
   in place for a moment (the next section rises up under it meanwhile) before it scrolls away. */
@media (max-width:560px){
  .cards{display:flex;flex-direction:column;gap:16px}
  .cards::after{content:"";flex:0 0 96px}
  .cards .card{position:sticky;top:calc(72px + var(--i,0) * 12px);transform:scale(calc(1 - var(--sink,0) * .04));transform-origin:50% 0;filter:brightness(calc(1 - var(--sink,0) * .04))}
  .cards .card:nth-child(2){--i:1}
  .cards .card:nth-child(3){--i:2}
  .cards .card:nth-child(4){--i:3}
  .cards .card:nth-child(5){--i:4}
  .cards .card:nth-child(6){--i:5}
  .cards .card:hover{background:var(--stone)}
  .cards .card:hover .ico{color:color-mix(in srgb,var(--stone),black 12%)}
  /* while the deck runs, a card wears the hover green only while it is the one in play (--lit, set by the script):
     stone until it starts sliding onto the stack, green as it arrives, back to stone as the next card covers it */
  .cards.deck-on .card,.cards.deck-on .card:hover{background:color-mix(in srgb,var(--pale) calc(var(--lit,0) * 100%),var(--stone))}
  .cards.deck-on .card .ico,.cards.deck-on .card:hover .ico{color:color-mix(in srgb,color-mix(in srgb,var(--pale),black 12%) calc(var(--lit,0) * 100%),color-mix(in srgb,var(--stone),black 12%))}
}

/* ================= inner pages (legal, 404, thank you) ================= */
/* The page header is the homepage's dark hero panel on its own: notch by the eyebrow, uppercase statement. */
.page-hero{padding:40px 0 8px}
.page-hero .statement{font-size:clamp(40px,6vw,76px);margin:18px 0 18px;color:var(--paper)}
.page-hero .panel p{max-width:40em}
.page-meta{margin:16px 0 0;font:500 12px/1.3 var(--body);letter-spacing:.07em;text-transform:uppercase;color:#9CD5B1}
.page-hero .panel .page-meta{margin-top:16px}
@media (max-width:700px){.page-hero{padding-top:6px}.page-hero .panel p{margin-left:auto;margin-right:auto}}
.section-head.solo{grid-template-columns:1fr}

/* a stone box with the notch by its eyebrow (legal summary, contact card) */
.note-card{position:relative;background:var(--stone);border-radius:var(--r-card);padding:28px 32px 26px}
.note-card .eyebrow{color:var(--slate)}

/* legal: sibling-page pills inside the panel */

/* legal: numbered contents beside the text (sticky), the text at a reading width */
.legal-body{padding:64px 0 72px}
.legal-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:72px;align-items:start}
.legal-toc{position:sticky;top:104px}
.legal-toc summary{display:none}
.legal-toc-title{margin:0 0 14px;font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;border-left:2px solid var(--line)}
.legal-toc li{counter-increment:toc}
.legal-toc a{display:flex;gap:12px;margin-left:-2px;padding:8px 0 8px 16px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--slate);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.legal-toc a::before{content:counter(toc,decimal-leading-zero);flex:0 0 auto;font:700 11px/19px var(--display);letter-spacing:.04em;color:var(--green)}
.legal-toc a:hover{color:var(--ink)}
.legal-toc a.is-current{color:var(--ink);font-weight:600;border-left-color:var(--green)}
.legal-text{max-width:720px;counter-reset:sec}
.legal-text > .note-card{margin-bottom:52px}
.legal-text > .note-card p:last-child{margin-bottom:0}
.legal-text h2{counter-increment:sec;display:flex;align-items:baseline;gap:14px;margin:52px 0 14px;font:700 25px/1.25 var(--display);scroll-margin-top:104px}
.legal-text h2::before{content:counter(sec,decimal-leading-zero);flex:0 0 auto;font:900 14px/1 var(--display);letter-spacing:.04em;color:var(--green)}
.legal-text > .note-card + h2{margin-top:0}
.legal-text h3{margin:28px 0 8px;font:700 17px/1.35 var(--display)}
.legal-text p,.legal-text li{font-size:16px;line-height:1.7;color:var(--slate)}
.legal-text p{margin:0 0 16px}
.legal-text a{color:var(--link);text-underline-offset:3px}
.legal-text ul:not(.ticks){list-style:none;margin:0 0 18px;padding:0}
.legal-text ul:not(.ticks) li{position:relative;margin:6px 0;padding-left:24px}
.legal-text ul:not(.ticks) li::before{content:"";position:absolute;left:5px;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.legal-text .ticks{margin:6px 0 22px}
.legal-text .ticks li b{color:var(--ink)}
.legal-text .ticks li span{color:var(--slate);font-size:15px}
.legal-table{overflow-x:auto;margin:8px 0 22px;-webkit-overflow-scrolling:touch}
.legal-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.legal-table th{padding:12px 14px;border-bottom:2px solid var(--ink);text-align:left;vertical-align:bottom;font:700 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.legal-table td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--slate);line-height:1.5}
.legal-table td:first-child{font-weight:600;color:var(--ink)}
.legal-table tbody th{width:190px;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;font:700 14px/1.45 var(--display);letter-spacing:0;text-transform:none;color:var(--ink)}
.legal-table tr:last-child td{border-bottom:0}
@media (max-width:900px){
  .legal-body{padding:40px 0 56px}
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:36px}  /* minmax: a wide table scrolls in its box instead of widening the page */
  /* phones: the contents fold into a dropdown under the header panel */
  .legal-toc{position:static}
  .legal-toc details{background:var(--stone);border-radius:var(--r-card)}
  .legal-toc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;cursor:pointer;list-style:none;font:700 16px/1.3 var(--display)}
  .legal-toc summary::-webkit-details-marker{display:none}
  .legal-toc summary::after{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%20stroke%3D%22white%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/13px no-repeat}
  .legal-toc details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012h14%22%20stroke%3D%22white%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")}
  .legal-toc-title{display:none}
  .legal-toc ol{margin:0 18px 16px;border-left:0}
  .legal-toc a{margin-left:0;padding:9px 0;border-left:0;border-top:1px solid var(--line)}
  .legal-text h2{font-size:22px;margin-top:44px;scroll-margin-top:84px}
}

/* the "questions?" card that closes a legal page */
.page-contact-wrap{padding:0 0 88px}
.page-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:36px 40px}
.page-contact-title{margin:10px 0 8px;font:700 26px/1.2 var(--display)}
.page-contact p:not(.eyebrow){margin:0;color:var(--slate);max-width:38em}
@media (max-width:700px){.page-contact{grid-template-columns:1fr;text-align:center;padding:30px 24px;gap:22px}.page-contact .btn{justify-self:center}.page-contact-wrap{padding-bottom:64px}}

/* 404 and thank you: copy on the left of the panel, a big mark on the right (under it on phones) */
.mark-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;overflow:hidden}
.mark-panel .actions{margin-top:28px}
.err-big{font:900 clamp(120px,14vw,210px)/.8 var(--display);letter-spacing:-.05em;color:var(--lime);padding-right:8px;user-select:none}
.thanks-mark{display:block;width:clamp(120px,13vw,176px);height:auto;margin-right:12px}
.thanks-mark circle{fill:var(--green);transform-box:fill-box;transform-origin:50% 50%;animation:mark-pop .6s cubic-bezier(.34,1.56,.64,1) .15s both}
.thanks-mark path{fill:none;stroke:var(--paper);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:72;animation:mark-tick .5s ease-out .6s both}
@keyframes mark-pop{from{transform:scale(0)}}
@keyframes mark-tick{from{stroke-dashoffset:72}}
@media (max-width:900px){.mark-panel{grid-template-columns:1fr;gap:28px}.mark-panel > :last-child{justify-self:start}}
@media (max-width:700px){.mark-panel > :last-child{justify-self:center}.err-big{font-size:clamp(110px,34vw,150px);padding:0}.thanks-mark{margin:0}}

/* cards that point onwards (404, thank you): the venue-card look, never the phone stack */
.page-links{padding-top:72px}
.link-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.link-cards .card{min-height:230px;aspect-ratio:auto}
@media (max-width:900px){.link-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.link-cards{grid-template-columns:1fr}.link-cards .card{min-height:0}}

/* thank you: what happens next, the timeline's dots and lines standing still */
.thanks-next{background:var(--cream)}
.next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.next li{position:relative;padding:44px 36px 0 0;animation:rise .5s ease both}
.next li:nth-child(2){animation-delay:.12s}.next li:nth-child(3){animation-delay:.24s}
.next li::before{content:"";position:absolute;left:0;top:0;z-index:1;width:20px;height:20px;border-radius:50%;background:var(--c);border:4px solid var(--cream);box-shadow:0 0 0 2px var(--c)}
.next li::after{content:"";position:absolute;left:10px;top:9px;width:100%;height:2px;background:linear-gradient(90deg,var(--c),var(--n))}
.next li:last-child::after{content:none}
.next time{display:block;margin-bottom:12px;font:900 22px/1 var(--display);letter-spacing:-.01em}
.next b{display:block;margin-bottom:6px;font:700 17px/1.3 var(--display)}
.next span{display:block;max-width:24em;color:var(--slate);font-size:14.5px;line-height:1.55}
@media (max-width:900px){
  .next{grid-template-columns:1fr;max-width:520px}
  .next li{padding:0 0 34px 46px}
  .next li:last-child{padding-bottom:0}
  .next li::before{top:1px}
  .next li::after{left:9px;top:11px;width:2px;height:100%;background:linear-gradient(180deg,var(--c),var(--n))}
}
@media (max-width:700px){.next{margin:0 auto}.next li{text-align:left}}

/* ================= How it works: lead form, then the slideshow ================= */
.hiw{width:min(620px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:var(--r-panel);background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(14,21,18,.35);overflow:auto;overscroll-behavior:contain}
.hiw.is-show{width:min(900px,calc(100vw - 32px))}
.hiw::backdrop{background:rgba(14,21,18,.62)}
.hiw[open]{animation:hiw-in .38s cubic-bezier(.22,.8,.22,1)}
.hiw[open]::backdrop{animation:hiw-fade .38s ease}
@keyframes hiw-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes hiw-fade{from{opacity:0}}
html.hiw-lock{overflow:hidden}
.hiw-view{padding:36px 36px 30px}
.hiw-show-view{padding:22px}
.hiw-close{position:absolute;top:16px;right:16px;z-index:5;width:40px;height:40px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper)}
.hiw-close::before,.hiw-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.hiw-close::after{transform:rotate(-45deg)}
.hiw.is-show .hiw-close{top:30px;right:30px;border-color:transparent;background:rgba(14,21,18,.55)}
.hiw.is-show .hiw-close::before,.hiw.is-show .hiw-close::after{background:var(--paper)}
.hiw-title{margin:10px 48px 8px 0;font:700 28px/1.2 var(--display)}
.hiw-lede{margin:0 0 24px;color:var(--slate);max-width:34em}
.hiw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-wide{grid-column:1/-1}
.field span{font:600 13px/1.2 var(--body)}
.field input,.field select{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--ink);font:400 15px/1.2 var(--body);transition:border-color .15s ease,box-shadow .15s ease}
.field input::placeholder{color:#9BA59F}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(94,169,119,.3)}
.field [aria-invalid="true"]{border-color:var(--tangerine)}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background:var(--paper) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%20fill%3D%22none%22%20stroke%3D%22%230E1512%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.hiw-error{margin:14px 0 0;color:#B23C0E;font-size:13.5px}
.hiw-submit{width:100%;margin-top:22px;min-height:52px}
.hiw-note{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--slate)}
.hiw-note a{color:var(--link)}
/* the slideshow: story bars, one slide at a time, arrows (tap either side on phones) */
.hiw-show{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--ink);user-select:none;-webkit-user-select:none}
.hiw-bars{position:absolute;top:16px;left:16px;right:72px;z-index:3;display:flex;gap:6px}
.hiw-bars i{flex:1;height:3px;border-radius:3px;background:rgba(14,21,18,.18);overflow:hidden}
.hiw-show[data-dark] .hiw-bars i{background:rgba(247,248,244,.28)}
.hiw-bars i::after{content:"";display:block;width:0;height:100%;border-radius:3px;background:var(--ink)}
.hiw-show[data-dark] .hiw-bars i::after{background:var(--paper)}
.hiw-bars i.is-done::after{width:100%}
.hiw-bars i.is-on::after{animation:hiw-fill 5s linear forwards}
.hiw-show.is-paused .hiw-bars i.is-on::after{animation-play-state:paused}
@keyframes hiw-fill{from{width:0}to{width:100%}}
.hiw-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:44px 40px 40px;background:var(--c);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.hiw-slide.on-ink{color:var(--paper)}
.hiw-slide.is-on{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.hiw-slide.is-on > *{animation:rise .55s cubic-bezier(.22,.8,.22,1) both}
.hiw-slide.is-on > :nth-child(2){animation-delay:.08s}.hiw-slide.is-on > :nth-child(3),.hiw-slide.is-on > :nth-child(4){animation-delay:.16s}
.hiw-step{margin:0 0 14px;font:700 12px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.hiw-slide h3{max-width:15em;font:900 clamp(26px,4.2vw,46px)/.98 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.hiw-slide .accent{color:var(--lime)}
.hiw-todo{margin:16px 0 0;font-size:13px;opacity:.65}
.hiw-end-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hiw-end-booked{display:none}
.hiw.is-booked .hiw-end-pitch{display:none}
.hiw.is-booked .hiw-end-booked{display:block}
.hiw-arrow{position:absolute;top:50%;z-index:4;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:rgba(247,248,244,.85);color:var(--ink);transition:opacity .2s ease,background-color .2s ease}
.hiw-arrow:hover{background:var(--paper)}
.hiw-arrow:disabled{opacity:0;pointer-events:none}
.hiw-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hiw-prev{left:14px}.hiw-next{right:14px}
@media (max-width:600px){
  /* phones: a sheet that rises from the bottom */
  .hiw,.hiw.is-show{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:14px 14px 0 0}
  .hiw[open]{animation:hiw-up .42s cubic-bezier(.22,.8,.22,1)}
  @keyframes hiw-up{from{transform:translateY(100%)}}
  .hiw-view{padding:28px 20px 24px}
  .hiw-show-view{padding:12px}
  .hiw-grid{grid-template-columns:1fr;gap:12px}
  .hiw-title{font-size:24px}
  .hiw-show{aspect-ratio:4/5}
  .hiw-slide{padding:40px 24px 28px}
  .hiw-arrow{display:none}
  .hiw.is-show .hiw-close{top:20px;right:20px}
}

/* ================= about ================= */
.about-hero{padding:56px 0 64px}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:72px;align-items:center}
.about-copy{max-width:560px}
.about-title{margin:18px 0 22px;font-size:clamp(44px,6vw,76px);color:var(--ink)}
.about-lede{max-width:32em;margin:0 0 30px;font-size:17px;line-height:1.6;color:var(--slate)}
/* The reel: a stream of photos flows right to left through the Monty tile, shrinking to nothing as they reach it
   and growing back out on the other side. The script positions them (a still frame for reduced motion). */
.reel{position:relative;aspect-ratio:1/1;border-radius:var(--r-panel);background:var(--ink);overflow:hidden;container-type:inline-size}
.reel-photo{position:absolute;left:50%;top:50%;width:28%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;transform:translate(-50%,-50%) scale(0);will-change:transform}
.reel-logo{position:absolute;left:50%;top:50%;z-index:2;width:13.5%;aspect-ratio:1/1;display:grid;place-items:center;border-radius:18%;background:var(--paper);transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(255,255,255,.3),0 0 30px rgba(255,255,255,.12);box-shadow:0 0 1.4cqw rgba(255,255,255,.3),0 0 5.2cqw rgba(255,255,255,.12)}
.reel-logo img{display:block;width:60%;height:auto}
@media (max-width:900px){.about-hero-grid{grid-template-columns:1fr;gap:44px}.about-copy{max-width:none}}
/* Stats: big figures under one rule across the row (between them when stacked on phones), counting up the
   first time they scroll into view */
.about-stats{padding:0 0 104px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--line)}
.stat{display:flex;flex-direction:column;align-items:flex-start;padding:40px 0 0}
.stat-num{margin:0;font-size:clamp(48px,5.4vw,76px);line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.stat-label{margin:22px 0 0;font:700 12.5px/1.4 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate);text-wrap:balance}
@media (max-width:900px){.stat{padding-top:32px}}
@media (max-width:700px){.about-hero{padding:24px 0 56px}.about-copy{text-align:center}.about-lede{margin-left:auto;margin-right:auto}
  .stats{grid-template-columns:1fr;gap:0;border-top:0}.stat{align-items:center;text-align:center;padding:30px 0 34px}
  .stat:first-child{padding-top:0}.stat+.stat{border-top:1px solid var(--line)}.stat-label{margin-top:16px}}
/* A row of cards that runs off the right edge (About's team, the role pages' other roles). It scrolls sideways
   (swipe, trackpad or the [data-hs-prev]/[data-hs-next] arrows that name it in aria-controls) and snaps to a card;
   the first card lines up with the page content. */
.hs-track{--edge:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));display:flex;gap:24px;margin:0;padding:0 0 4px var(--edge);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--edge);overscroll-behavior-x:contain;scrollbar-width:none}
.hs-track::-webkit-scrollbar{display:none}
.hs-track::after{content:"";flex:0 0 1px;margin-left:calc(var(--gutter) - 25px)}  /* room after the last card */
.hs-track > *{scroll-snap-align:start}
.hs-nav{display:flex;gap:10px}
.hs-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s ease,opacity .2s ease}
.hs-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hs-arrow[aria-disabled="true"]{opacity:.35;cursor:default}
@media (hover:hover){.hs-arrow:not([aria-disabled="true"]):hover{border-color:var(--ink)}}
@media (max-width:700px){.hs-track{gap:16px}.hs-track::after{margin-left:calc(var(--gutter) - 17px)}.hs-nav{display:none}}

/* Team: dark band with a row of people cards that runs off the right edge. It scrolls sideways (swipe, trackpad or
   the arrows) and snaps to a card; the first card lines up with the page content. A card's .person-photo is an
   <img> once there's a headshot; until then it's the empty box with the initial. */
.team{background:var(--ink);color:var(--paper)}
.team .accent{color:var(--lime)}
.team .lede{margin-top:14px;color:var(--ink-soft)}
.team .section-head{margin-bottom:40px}
.team-nav{display:flex;gap:10px}
.team-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(247,248,244,.3);background:none;color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:border-color .2s ease,opacity .2s ease}
.team-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.team-arrow[aria-disabled="true"]{opacity:.35;cursor:default}
@media (hover:hover){.team-arrow:not([aria-disabled="true"]):hover{border-color:var(--paper)}}
.person{flex:0 0 272px;display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;background:color-mix(in srgb,var(--paper) 7%,var(--ink));scroll-snap-align:start}
.person-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 25%;background:var(--stone)}
.person-photo.is-empty{position:relative;display:grid;place-items:center;color:var(--forest)}
.person-photo.is-empty svg{width:34%;height:auto;fill:currentColor;opacity:.55}
.person-initial{font:900 64px/1 var(--display);opacity:.8}
.person-soon{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 10.5px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.person-body{padding:26px 26px 30px}
.person-name{display:flex;align-items:center;gap:10px;margin:0;font:700 19px/1.25 var(--display);color:var(--paper)}
.person-in{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--paper);color:var(--ink);transition:background-color .2s ease,color .2s ease}
.person-in svg{width:13px;height:13px;fill:currentColor}
@media (hover:hover){.person-in:hover{background:var(--green);color:var(--paper)}}
.person-role{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--paper)}
.person-bio{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:rgba(215,222,216,.78)}
@media (max-width:900px){.team .section-head{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:700px){.team .section-head{grid-template-columns:1fr}.team .lede{margin-left:auto;margin-right:auto}.team-nav{display:none}
  .person{flex-basis:min(78%,300px)}}
/* "Feeling inspired?": a wide borderless panel with photos scattered round the centred text. The script pops them in when the
   panel first shows, then swaps one at a time going round the text: the photo shrinks away and the next pops up.
   Slots are placed in % of the panel (desktop) or of its width (cqw, phones), so the layout scales. */
.inspire{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:3.36/1;min-height:340px;padding:40px 24%;border-radius:var(--r-panel);background:var(--paper);overflow:hidden;text-align:center}
.inspire-pics{position:absolute;inset:0;container-type:inline-size;pointer-events:none}
.ipic{position:absolute;left:var(--l);top:var(--t);width:var(--w);aspect-ratio:var(--ar)}
.ipic img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.ipic.is-out img{transform:scale(0);transition:transform .42s cubic-bezier(.55,0,1,.45)}
.ip1{--l:6.4%;--t:8.2%;--w:9.2%;--ar:.915}
.ip2{--l:0%;--t:47.4%;--w:13.2%;--ar:1.02}
.ip3{--l:14.9%;--t:83.4%;--w:3.8%;--ar:.89}
.ip4{--l:80.2%;--t:15.5%;--w:5.2%;--ar:.88}
.ip5{--l:86.7%;--t:3.7%;--w:13.3%;--ar:1}
.ip6{--l:85.9%;--t:57.4%;--w:14.1%;--ar:1.31}
.inspire-copy{position:relative;z-index:1;max-width:30em}
.inspire-title{margin:0 0 16px;font-size:clamp(40px,4.6vw,62px);color:var(--ink)}
.inspire-copy p{margin:0 auto 24px;max-width:26em;font-size:17px;line-height:1.55;color:var(--ink)}
@media (max-width:900px){
  .inspire{aspect-ratio:auto;min-height:0;padding:calc(40vw + 8px) 20px calc(44vw + 8px)}
  .ip1{--l:6%;--t:7cqw;--w:24%}
  .ip4{--l:37%;--t:19cqw;--w:12%}
  .ip5{--l:68%;--t:3cqw;--w:32%}
  .ip2,.ip3,.ip6{top:auto;bottom:var(--b)}
  .ip2{--l:0%;--b:9cqw;--w:31%}
  .ip3{--l:40%;--b:5cqw;--w:11%}
  .ip6{--l:62%;--b:13cqw;--w:38%}
}

/* ================= contact ================= */
.contact-top{padding:56px 0 88px}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.contact-title{margin:18px 0 18px;font-size:clamp(44px,6vw,76px);color:var(--ink)}
.contact-sub{margin:0 0 32px;max-width:22em;font:700 clamp(20px,2vw,24px)/1.3 var(--display);color:var(--ink)}
.contact-ways{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.contact-ways li{display:flex;align-items:center;gap:16px;font-size:16px;color:var(--ink)}
.contact-ways a{font-weight:600;color:var(--ink);text-decoration:none}
@media (hover:hover){.contact-ways a:hover{color:var(--link);text-decoration:underline}}
.cw-label{display:block;margin-bottom:4px;font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.cw-ico{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:var(--pale);color:var(--forest)}
.cw-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the form sits on a stone panel; fields are the shared .field (as in the How It Works popup) */
.contact-card{border-radius:var(--r-panel);background:var(--stone);padding:40px}
.contact-form-title{margin:0 0 22px;font:700 24px/1.2 var(--display);color:var(--ink)}
.contact-fields{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field .opt{font-style:normal;font-weight:400;color:var(--slate)}
.field textarea{width:100%;min-height:150px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-card);background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--body);resize:vertical;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(94,169,119,.3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:16px 0 0;font-size:14px;color:#B23C0E}
.contact-submit{width:100%;min-height:52px;margin-top:22px}
.contact-submit:disabled{opacity:.7;cursor:progress}
.form-note{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--slate)}
.form-note a{color:var(--link)}
.contact-done{padding:28px 0 12px;text-align:center}
.contact-done:focus{outline:none}
.contact-done .thanks-mark{width:96px;margin:0 auto 22px}
.contact-done p{margin:-8px auto 26px;max-width:26em;font-size:16px;line-height:1.55;color:var(--slate)}
.contact-done p span{font-weight:600;color:var(--ink)}
/* four ways to get help: boxes in the homepage bento colours (note-card: notch by the heading), icon, title,
   line, outline button; ink text on every fill */
.help-sec{padding:0 0 104px}
.help-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.help-card{display:flex;flex-direction:column;align-items:flex-start;padding:32px 28px 30px}
.help-card h3{margin:22px 0 10px;font:700 21px/1.2 var(--display);color:var(--ink)}
.help-card p{margin:0 0 26px;font-size:15px;line-height:1.55;color:var(--ink)}
.help-card.lime{background:var(--lime)}.help-card.sky{background:var(--sky)}.help-card.lilac{background:var(--lilac)}.help-card.green{background:var(--green)}
.help-card .cw-ico{background:rgba(255,255,255,.6);color:var(--ink)}
.help-card .btn{margin-top:auto}
@media (hover:hover){.help-card .btn-ghost-ink:hover{background:var(--ink);color:var(--paper)}}
@media (max-width:1024px){.help-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px}}
@media (max-width:700px){.contact-top{padding:24px 0 64px}.contact-intro{text-align:center}.contact-sub{margin-left:auto;margin-right:auto}
  .contact-ways{display:inline-grid;text-align:left}.help-card{align-items:center;text-align:center}.help-sec{padding-bottom:72px}}
@media (max-width:600px){.contact-card{padding:28px 20px}.contact-fields{grid-template-columns:1fr}.help-cards{grid-template-columns:1fr;gap:16px}}

/* ================= role pages (src/types/roles.mjs) ================= */
/* hero: the homepage hero with one photo and one set of mock cards (no tabs) */
.stage-photo.is-on{opacity:1}
.eyebrow .ico.rico{display:grid;place-items:center}
.eyebrow .rico svg{width:14px;height:14px;fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eyebrow .ico.rico:has(img){width:28px;height:28px}
.eyebrow .rico img{display:block;width:17px;height:17px}
.rstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-top:12px}
.rstats div{padding:10px 12px;border-radius:6px;background:var(--stone)}
.rstats b{display:block;font:700 22px/1.1 var(--display)}
.rstats span{display:block;margin-top:4px;font-size:11.5px;line-height:1.3;color:var(--slate)}
.ui.dark{background:var(--ink);border-color:transparent;color:var(--paper)}
.ui.dark .q{color:var(--paper)}
.ui.dark .s{color:var(--ink-soft)}
.ui.dark .rstats div{background:rgba(247,248,244,.1)}
.ui.dark .rstats span{color:var(--ink-soft)}
.ui .rgap{margin:14px 0 8px}
/* proof: the count on the left, customer quotes scrolling past on the right */
.rproof{padding:16px 0 72px}
.rproof-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:center}
.rproof-head{padding:10px 36px 10px 0;border-right:1px solid var(--line)}
.rproof-title{margin:0 0 16px;font:700 clamp(22px,2.2vw,26px)/1.2 var(--display);color:var(--ink)}
.rproof-strip .marquee-track{gap:40px;align-items:stretch}
.rq{display:flex;align-items:flex-start;gap:18px;width:430px;margin:0}
.rq-logo{flex:0 0 auto;display:grid;place-items:center;width:88px;height:88px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.rq-logo img{width:40px;height:40px}
.rq blockquote{margin:0 0 10px;font:700 17px/1.35 var(--display);color:var(--ink)}
.rq figcaption{font:700 11.5px/1.45 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
/* a venue with a published story, in place of quotes: its photo, name, type and town, linking to the story */
.rq.rq-venue{width:auto;min-width:280px;align-items:center;color:inherit;text-decoration:none}
.rq-logo.rq-photo{overflow:hidden}
.rq-logo.rq-photo img{width:100%;height:100%;object-fit:cover}
.rq-logo.rq-brand{overflow:hidden;border-color:transparent}
.rq-logo.rq-brand img{width:70%;height:70%;object-fit:contain}
.rq-brand b{font:900 34px/1 var(--display)}
.rq-body{display:flex;flex-direction:column;gap:8px}
.rq-name{font:700 17px/1.35 var(--display);color:var(--ink)}
.rq-place{font:700 11.5px/1.45 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
@media (hover:hover){.rq-venue:hover .rq-name{text-decoration:underline;text-underline-offset:3px}}
/* features: copy beside a coloured graphic; the second one flips (graphic on the left) */
.rfeat{padding:36px 0}
.rfeat-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.rfeat-copy{padding:24px 0}
.rfeat-copy .h-section{margin:0 0 16px;font-size:clamp(28px,3.1vw,40px)}
.rfeat-copy .lede{margin:0 0 28px;max-width:32em}
.rfeat.is-flip .rgfx{order:-1}
.rgfx{display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:440px;padding:56px 48px;border-radius:var(--r-panel)}
.rgfx.lime{background:var(--lime)}.rgfx.pale{background:var(--pale)}.rgfx.sky{background:var(--sky)}.rgfx.lilac{background:var(--lilac)}
.rgfx .ui{width:100%;max-width:430px;margin:0 auto}
.rticks{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.rticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:15.5px;line-height:1.45;color:var(--ink)}
.rticks li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
/* team: a black panel with a strip of feature chips that never runs out, and three ticks */
.rteam-panel{padding:72px 48px 56px;border-radius:var(--r-panel);background:var(--ink);color:var(--paper);text-align:center}
.rteam-panel .h-section{margin:0 0 14px}
.rteam-panel .lede{margin:0 auto 44px;color:var(--ink-soft)}
.rteam-panel .rticks li{color:var(--ink-soft)}
.rchips .marquee-track{gap:16px;padding:6px 0}
.rchip{display:inline-flex;align-items:center;gap:14px;padding:12px 24px 12px 12px;border-radius:12px;background:var(--paper);font:900 19px/1 var(--display);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.rchip-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;color:var(--ink)}
.rchip-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rchip-ico.lime{background:var(--lime)}.rchip-ico.sky{background:var(--sky)}.rchip-ico.lilac{background:var(--lilac)}.rchip-ico.pale{background:var(--pale)}.rchip-ico.tangerine{background:var(--tangerine)}
.rteam-ticks{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px;text-align:left}
/* one big quote */
.rquote figure{max-width:900px;margin:0 auto;text-align:center}
.rquote blockquote{margin:0;font:700 clamp(26px,3.4vw,42px)/1.18 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.rquote blockquote::before{content:"\201C";margin-right:6px;font:900 1.3em/0 var(--display);color:var(--green)}
.rquote blockquote::after{content:"\201D";margin-left:4px;font:900 1.3em/0 var(--display);color:var(--green)}
.rquote figcaption{margin-top:28px;font-size:15px;line-height:1.5;color:var(--slate)}
.rquote figcaption b{display:block;font-weight:600;color:var(--ink)}
/* other roles: bento-coloured cards in a sideways row (.hs-track), notch by the heading (note-card) */
.rroles .section-head{margin-bottom:40px}
.rroles .lede{margin-top:14px}
.rrole{flex:0 0 300px;display:flex;flex-direction:column;align-items:flex-start;min-height:300px;padding:36px 32px 32px}
.rrole.lime{background:var(--lime)}.rrole.sky{background:var(--sky)}.rrole.lilac{background:var(--lilac)}.rrole.green{background:var(--green)}
.rrole h3{margin:0 0 12px;font:700 24px/1.2 var(--display);color:var(--ink)}
.rrole p{margin:0 0 26px;font-size:15px;line-height:1.55;color:var(--ink)}
.rrole .btn{margin-top:auto}
@media (hover:hover){.rrole .btn-ghost-ink:hover{background:var(--ink);color:var(--paper)}}
@media (max-width:900px){
  .rproof-grid{grid-template-columns:1fr;gap:24px}.rproof-head{padding:0;border-right:0;text-align:center}
  .rfeat-grid{grid-template-columns:1fr;gap:28px}.rfeat.is-flip .rgfx{order:0}.rgfx{min-height:0;padding:40px 24px}
  .rteam-ticks{grid-template-columns:1fr;max-width:30em;margin-left:auto;margin-right:auto}
  .rroles .section-head{grid-template-columns:minmax(0,1fr) auto}
}
@media (max-width:700px){
  .rfeat{padding:28px 0}.rfeat-copy{padding:8px 0;text-align:center}.rfeat-copy .lede{margin-left:auto;margin-right:auto}
  .rfeat-copy .rticks{max-width:30em;margin:0 auto;text-align:left}
  .rstats:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .rq{width:320px}.rq-logo{width:64px;height:64px}.rq-logo img{width:30px;height:30px}.rq blockquote{font-size:15.5px}
  .rq.rq-venue{width:auto;min-width:240px}.rq-logo.rq-photo img{width:100%;height:100%}.rq-name{font-size:15.5px}
  .rteam-panel{padding:48px 20px 40px}.rchip{font-size:16px}.rchip-ico{width:36px;height:36px}
  .rroles .section-head{grid-template-columns:1fr}.rroles .lede{margin-left:auto;margin-right:auto}
  .rrole{flex-basis:min(78%,300px);min-height:0;align-items:center;text-align:center}
}
/* role mocks: rank map grid (.rmap; .rank is the homepage leaderboard row) and a labelled bar list (src/data/_mocks.mjs) */
.rmap{display:grid;grid-template-columns:repeat(7,minmax(0,30px));justify-content:center;gap:5px;margin-top:12px}
.rmap i{display:grid;place-items:center;aspect-ratio:1/1;border-radius:50%;font:700 10.5px/1 var(--display);font-style:normal;color:var(--ink)}
.rmap .g{background:#8FD9A8}.rmap .a{background:#F6D98A}.rmap .r{background:#F4A58E}
.rbars{display:grid;gap:9px;margin-top:12px}
.rbar{display:grid;grid-template-columns:minmax(0,120px) 1fr 38px;gap:10px;align-items:center;font-size:12.5px;color:var(--ink)}
.rbar i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--green) var(--w),var(--stone) var(--w))}
.rbar b{font-weight:600;text-align:right}

/* ================= groups page (src/types/group.mjs) ================= */
.rgfx.tangerine{background:var(--tangerine)}
.ui.is-soft{opacity:.82}
.ui.is-softer{opacity:.62}
/* black band: keep in step (big dashboard + ticks), then open a new venue (three cards) */
.gband{padding:104px 0;background:var(--ink);color:var(--paper)}
.gband-head{max-width:760px;margin:0 auto 40px;text-align:center}
.gband-head .h-section{margin:0 0 14px}
.gband .lede{color:var(--ink-soft)}
.gband-head .lede{margin:0 auto}
.gband-shot{max-width:980px;margin:0 auto}
.gdash{padding:22px 24px}
.gtable{margin-top:14px;font-size:13.5px}
.gtr{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.gth{padding-top:0;border-top:0;font:700 11px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.gdown{color:#B23C0E;font-weight:600}
.gband-ticks{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:980px;margin:36px auto 0}
.gband-ticks li{color:var(--ink-soft)}
.gband-grow{margin-top:104px}
.gband-grow .h-section{margin:0 0 14px}
.gband-grow .lede{margin:0 0 36px;max-width:36em}
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gcard{margin:0}
.gcard-shot{display:flex;align-items:center;min-height:190px;padding:32px 24px;border-radius:var(--r-panel);background:color-mix(in srgb,var(--paper) 8%,var(--ink))}
.gcard-shot .ui{width:100%}
.gcard figcaption{display:grid;grid-template-columns:22px 1fr;gap:12px;margin-top:18px;font-size:15px;line-height:1.45;color:var(--ink-soft)}
.gcard figcaption::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
/* the integrations: a pill of logos that links to them all */
.gstack{text-align:center}
.gstack .h-section{margin:0 0 14px}
.gstack .lede{margin:0 auto 30px}
.gstack-pill{display:inline-flex;align-items:center;gap:16px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:500 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);transition:border-color .2s ease}
@media (hover:hover){.gstack-pill:hover{border-color:var(--ink)}}
.gstack-logos{display:flex}
.gstack-logos span{display:grid;place-items:center;width:38px;height:38px;margin-left:-8px;border:2px solid var(--paper);border-radius:50%;background:var(--stone)}
.gstack-logos span:first-child{margin-left:0}
.gstack-logos img{width:20px;height:20px;object-fit:contain}
.gstack-go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:var(--paper)}
.gstack-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.gband-ticks{grid-template-columns:1fr;max-width:30em}.gcards{grid-template-columns:1fr;max-width:520px}}
@media (max-width:700px){
  .gband{padding:72px 0}.gband-grow{margin-top:72px;text-align:center}.gband-grow .lede{margin-left:auto;margin-right:auto}.gcards{margin:0 auto}
  .gtr{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}.gtr > :nth-child(3),.gtr > :nth-child(5){display:none}
  .gcard figcaption{text-align:left}
  .gstack-pill{gap:10px;font-size:11.5px}.gstack-logos span{width:32px;height:32px}.gstack-logos img{width:17px;height:17px}.gstack-go{width:32px;height:32px}
}

/* ================= legal (src/types/legal.mjs) ================= */
/* a document: breadcrumb, big title and intro on white (after Mews's legal pages), then the contents and text */
.doc-head{padding:48px 0 8px}
.doc-crumb{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.doc-crumb a{color:var(--slate);text-decoration:none}
@media (hover:hover){.doc-crumb a:hover{color:var(--ink)}}
.doc-title{margin:0 0 16px;font-size:clamp(40px,5.4vw,72px);color:var(--ink)}
.doc-intro{max-width:44em;margin:0;font-size:17px;line-height:1.6;color:var(--slate)}
.doc-version{margin:0 0 44px;padding:20px 24px;border-radius:var(--r-card);background:var(--stone)}
.doc-version-title{margin:0 0 6px!important;font:700 12px/1.2 var(--display)!important;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)!important}
.doc-version p:last-child{margin:0;font-size:15px}
.legal-text > .doc-version + h2{margin-top:0}
/* still to be confirmed: highlighted so it's easy to find and fill in */
.tbc{padding:0 4px;border-radius:3px;background:var(--lime);color:var(--ink)}
/* the /legal hub: a card per document */
.legal-hub{padding:40px 0 96px}
.lhub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lcard{display:flex;flex-direction:column;min-height:280px;padding:32px 30px 28px;text-decoration:none;color:var(--ink);transition:background-color .2s ease}
@media (hover:hover){.lcard:hover{background:var(--pale)}}
.lcard-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:var(--ink)}
.lcard-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lcard-ico.lime{background:var(--lime)}.lcard-ico.sky{background:var(--sky)}.lcard-ico.lilac{background:var(--lilac)}.lcard-ico.pale{background:var(--pale)}.lcard-ico.tangerine{background:var(--tangerine)}
.lcard h2{margin:26px 0 10px;font:700 20px/1.25 var(--display)}
.lcard p{margin:0 0 24px;font-size:15px;line-height:1.55;color:var(--slate)}
.lcard-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:500 12.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.lcard-more::after{content:"\2192";font-size:15px;transition:transform .2s ease}
@media (hover:hover){.lcard:hover .lcard-more::after{transform:translateX(3px)}}
@media (max-width:1024px){.lhub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.doc-head{padding:24px 0 0;text-align:center}.doc-crumb{justify-content:center}.doc-intro{margin-left:auto;margin-right:auto}
  .lhub{grid-template-columns:1fr;gap:16px}.lcard{min-height:0;align-items:center;text-align:center}.legal-hub{padding-bottom:64px}}

/* ================= pricing ================= */
/* After Mews's pricing page: a stone band with the centred title and a currency switch, then the plans under a lime
   tab bar (single venue / groups). The plans are one white block split into columns, the recommended one tinted;
   each lists its features in groups that open and close. */
.pr-top{padding:72px 0 88px;background:var(--stone)}
.pr-head{max-width:780px;margin:0 auto 44px;text-align:center}
.pr-title{margin:0 0 20px;font-size:clamp(40px,5.6vw,72px);color:var(--ink)}
.pr-sub{margin:0 auto 28px;max-width:36em;font-size:17px;line-height:1.55;color:var(--slate)}
.pr-tabs{display:flex;justify-content:center;gap:32px;margin:0 6%;padding:0 20px;border-radius:14px 14px 0 0;background:var(--lime)}
.pr-tabs button{position:relative;min-height:50px;padding:0 2px;font:700 12.5px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;color:rgba(14,21,18,.62);transition:color .15s ease}
.pr-tabs button[aria-selected="true"]{color:var(--ink)}
.pr-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--ink)}
@media (hover:hover){.pr-tabs button:hover{color:var(--ink)}}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-panel);background:var(--paper);overflow:hidden}
.plans[hidden]{display:none}
.plan{display:flex;flex-direction:column;min-width:0;padding:44px 40px 36px}
.plan+.plan{border-left:1px solid var(--line)}
.plan.is-rec{background:#EEF8F1}
.plan-head{display:flex;flex-direction:column;align-items:flex-start}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch;margin:0 0 14px}
.plan-name{font:900 30px/1 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.plan-rec{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:var(--lime);font:700 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.plan-desc{min-height:48px;margin:0 0 26px;font-size:15px;line-height:1.6;color:var(--slate)}
.plan-price{display:flex;align-items:flex-end;gap:10px;margin:0 0 10px}
.plan-price .amt{font:900 60px/.84 var(--display);letter-spacing:-.02em;color:var(--ink)}
.plan-price .sym{margin-right:1px;font-size:.62em;vertical-align:.52em}
.plan-price .per{padding-bottom:1px;font-size:13px;line-height:1.3;color:var(--slate)}
.plan-price{margin-bottom:26px}
.plan-price.is-word .amt{font-size:44px}
.plan-label{margin:38px 0 6px;font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.plan-groups details{border-bottom:1px solid var(--line)}
.plan-groups summary{display:flex;align-items:center;gap:12px;padding:16px 0;list-style:none;cursor:pointer;font:700 16px/1.3 var(--display);color:var(--ink)}
.plan-groups summary::-webkit-details-marker{display:none}
.plan-groups summary::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230E1512' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat}
.plan.is-rec .plan-groups summary::before{background-color:var(--paper)}
.plan-groups summary::after{content:"";flex:0 0 auto;width:16px;height:16px;margin-left:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230E1512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s ease}
.plan-groups details[open] summary::after{transform:rotate(180deg)}
.plan-groups ul{margin:-2px 0 18px;padding:0 0 0 52px;list-style:disc}
.plan-groups li{margin:0 0 9px;padding-left:2px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.plan-groups li::marker{color:var(--green)}
/* groups: one wide plan (its feature groups in two columns) beside how the pricing works */
.plans-group{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* side by side, the three plans share their rows (subgrid), so prices, buttons and lists line up however the
   descriptions wrap */
@media (min-width:901px){
  .plans:not(.plans-group){grid-template-rows:repeat(6,auto)}
  .plans:not(.plans-group) > .plan{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .plans:not(.plans-group) .plan-head{display:contents}
  .plans:not(.plans-group) .plan-head > .btn{justify-self:start}
  .plans:not(.plans-group) .plan-desc{min-height:0}
}
.plan-wide .plan-desc{min-height:0}
.plan-wide .plan-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}
.plan-how{justify-content:center;background:#EEF8F1}
.plan-how-title{margin:0 0 28px;font:900 26px/1.05 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.how-list{display:grid;gap:22px;margin:0 0 30px;padding:0;list-style:none;counter-reset:how}
.how-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;counter-increment:how}
.how-list li::before{content:counter(how);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);font:700 14px/1 var(--display);color:var(--paper)}
.how-list b{display:block;margin:6px 0 4px;font:700 17px/1.25 var(--display);color:var(--ink)}
.how-list span{display:block;font-size:14.5px;line-height:1.5;color:var(--slate)}
.plan-how .tlink svg,.addon .tlink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* extras: two white cards to a view in the shared sideways row (.hs-track), after Mews's add-ons */
.pr-addons{padding:8px 0 104px;background:var(--stone)}
.pr-addons .section-head{margin-bottom:32px}
.pr-addons .h-section{margin:0}
.addon{flex:0 0 calc((min(100vw,var(--wrap)) - 2 * var(--gutter) - 24px) / 2);display:flex;flex-direction:column;padding:48px 52px 44px;border-radius:var(--r-card);background:var(--paper)}
.addon-top{display:flex;align-items:flex-start;gap:16px;margin:0 0 16px}
.addon-ico{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--ink)}
.addon-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.addon-ico.lime{background:var(--lime)}.addon-ico.sky{background:var(--sky)}.addon-ico.lilac{background:var(--lilac)}
.addon h3{padding-top:5px;font:900 26px/1.05 var(--display);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.addon > p{max-width:30em;margin:0 0 30px;font-size:15.5px;line-height:1.55;color:var(--slate)}
.addon-hl{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding-top:28px;border-top:1px solid var(--line)}
.addon-hl h4{margin:0 0 16px;font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.addon-hl .rticks li{font-size:15px}
.addon-hl .tlink{margin-top:auto;padding-top:26px}
/* a feature split (SEO / GEO): copy between two rules, beside a photo with a mock card over it */
.pr-split{padding:104px 0 32px}
.pr-split-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center}
.pr-split-copy{padding:44px 0 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pr-split-copy .h-section{margin:12px 0 16px}
.pr-split-copy .lede{margin:0 0 28px}
.split-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:460px}
.split-facts div{padding:18px 20px;border-radius:var(--r-card);background:var(--stone)}
.split-facts b{display:block;margin:0 0 8px;font:900 34px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.split-facts span{display:block;font-size:13px;line-height:1.4;color:var(--slate)}
.split-photo{position:relative;aspect-ratio:1/1;border-radius:var(--r-panel);overflow:hidden;background:var(--stone)}
.split-photo img{display:block;width:100%;height:100%;object-fit:cover}
.split-ui{position:absolute;top:6%;right:6%;width:min(310px,72%);padding:16px 18px 18px}
.split-ui .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.split-ui .s{margin-top:4px}
.split-ui .rmap{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:14px}
/* a customer story (lime card: copy and photo) with three bars rising beside it, after Mews's case study */
.pr-case{padding:0 0 40px}
.case-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:end}
.case-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;min-height:470px;padding:24px;border-radius:var(--r-panel) 0 0 var(--r-panel);background:var(--lime)}
.case-copy{display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px 18px}
.case-title{margin:0 0 20px;font:700 22px/1.25 var(--display);color:var(--ink)}
.case-card .tbc{background:var(--paper)}
.case-link{font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);opacity:.6}
a.case-link{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.case-stat{margin:auto 0 0}
.case-stat b{display:block;margin:0 0 10px;font:900 64px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.case-stat span{display:block;font:700 12px/1.3 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.case-photo{min-height:0;border-radius:6px;overflow:hidden}
.case-photo img{display:block;width:100%;height:100%;object-fit:cover}
.case-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;height:470px}
.case-bar{display:flex;flex-direction:column;justify-content:space-between;height:var(--h);min-height:150px;padding:22px 16px 20px;clip-path:inset(0);transition:clip-path 1s cubic-bezier(.2,.8,.2,1)}
.case-bar:last-child{border-radius:0 var(--r-panel) var(--r-panel) 0}
.case-bar:nth-child(2){transition-delay:.12s}
.case-bar:nth-child(3){transition-delay:.24s}
.case-bars.is-low .case-bar{clip-path:inset(100% 0 0 0)}
.case-bar b{font:900 48px/1 var(--display);letter-spacing:-.02em}
.case-bar span{font:700 12px/1.3 var(--display);letter-spacing:.09em;text-transform:uppercase}
.case-bar.sky{background:var(--sky);color:var(--ink)}.case-bar.ink{background:var(--ink);color:var(--paper)}.case-bar.green{background:var(--green);color:var(--ink)}
/* get pricing: three ticks, and the contact form (topic set to Pricing) on its stone panel */
.pr-form{padding:96px 0 104px}
.pr-form-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.pr-form-title{margin:8px 0 36px;font-size:clamp(40px,5vw,64px);color:var(--ink)}
.pr-ticks{gap:22px;max-width:28em}
.pr-ticks li{font-size:16px;color:var(--slate)}
.pr-ticks b{display:block;margin:0 0 4px;font:700 17px/1.3 var(--display);color:var(--ink)}
@media (max-width:1100px){
  .plan{padding:40px 28px 32px}
  .addon{padding:40px 36px 36px}
  .case-grid{grid-template-columns:1fr}
  .case-card{border-radius:var(--r-panel) var(--r-panel) 0 0}
  .case-bars{height:300px}
  .case-bar:first-child{border-radius:0 0 0 var(--r-panel)}
}
@media (max-width:900px){
  .pr-tabs{margin:0;gap:24px}
  .plans,.plans-group{grid-template-columns:1fr}
  .plan+.plan{border-left:0;border-top:1px solid var(--line)}
  .plan-desc{min-height:0}
  .plan-wide .plan-groups{grid-template-columns:1fr}
  .pr-split-grid,.pr-form-grid{grid-template-columns:1fr;gap:44px}
  .addon{flex-basis:min(85%,460px)}
}
@media (max-width:700px){
  .pr-top{padding:32px 0 64px}
  .pr-head{margin-bottom:32px}
  .pr-sub{font-size:16px}
  .pr-tabs{padding:0 12px;gap:18px}
  .pr-tabs button{font-size:11.5px}
  .plan{padding:36px 22px 28px}
  .plan-head{align-items:center;text-align:center}
  .plan-top{justify-content:center;flex-wrap:wrap}
  .plan-price .amt{font-size:54px}
  .plan-label{text-align:center}
  .plan-how{text-align:center}
  .how-list{justify-items:center}
  .how-list li{grid-template-columns:1fr;justify-items:center;gap:8px}
  .how-list b{margin-top:0}
  .plan-how .tlink{align-self:center}
  .pr-addons{padding-bottom:72px}
  .pr-addons .section-head{grid-template-columns:1fr;text-align:center}
  .pr-addons .hs-nav{display:none}
  .addon{padding:36px 24px 32px;text-align:center}
  .addon-top{flex-direction:column;align-items:center;gap:14px}
  .addon h3{padding-top:0;font-size:24px}
  .addon > p{margin-left:auto;margin-right:auto}
  .addon-hl{align-items:center}
  .addon-hl .rticks{text-align:left}
  .addon-hl .tlink{align-self:center}
  .pr-split{padding:72px 0 24px}
  .pr-split-copy{padding:36px 0 40px;text-align:center}
  .pr-split-copy .lede{margin-left:auto;margin-right:auto}
  .split-facts{margin:0 auto}
  .split-ui{right:5%;width:78%;padding:12px 14px 14px}
  .pr-case{padding:0 0 24px}
  .case-card{grid-template-columns:1fr;min-height:0;padding:16px}
  .case-copy{align-items:center;padding:20px 12px 8px;text-align:center}
  .case-stat{margin-top:28px}
  .case-photo{aspect-ratio:4/3}
  .case-bars{height:260px}
  .case-bar{min-height:120px;padding:18px 12px 16px}
  .case-bar b{font-size:38px}
  .case-bar span{font-size:10.5px}
  .pr-form{padding:64px 0 72px}
  .pr-form-intro{text-align:center}
  .pr-ticks{display:inline-grid;text-align:left}
}

/* ================= feature pages (src/types/features.mjs) ================= */
/* After Mews's product pages: hero beside a coloured panel with the feature's screen, four benefits in ruled
   columns, a statement over a stone panel of screens, quotes, two numbers over a 2x2 grid of screens, a coloured
   spotlight, then cards to the other features and a dark band. */
.fhero{padding:56px 0 40px}
.fhero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.fhero-title{margin:18px 0 20px;font-size:clamp(40px,4.8vw,66px);color:var(--ink)}
.fhero-title .accent{color:var(--green)}
.fhero-lede{max-width:32em;margin:0 0 30px;font-size:17px;line-height:1.55;color:var(--slate)}
.fhero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.fplan{margin:0;font-size:13.5px;color:var(--slate)}
.fplan a{margin-left:4px;color:var(--link);font-weight:500}
.fhero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px;padding:44px 40px;border-radius:12px;overflow:hidden}
.fhero-art.lime,.fcard-art.lime,.fmcard-art.lime{background:var(--lime)}
.fhero-art.sky,.fcard-art.sky,.fmcard-art.sky{background:var(--sky)}
.fhero-art.lilac,.fcard-art.lilac,.fmcard-art.lilac{background:var(--lilac)}
.fhero-art.pale,.fcard-art.pale,.fmcard-art.pale{background:var(--pale)}
.fhero-art.tangerine,.fcard-art.tangerine,.fmcard-art.tangerine{background:#FFB38F}
.fhero-art.stone{background:var(--stone)}
/* four benefits: columns with a rule between */
.fbens{padding:24px 0 40px}
.fbens-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:28px 0 0;list-style:none;border-top:1px solid var(--line)}
.fbens-grid li{padding:4px 28px 8px}
.fbens-grid li:first-child{padding-left:0}
.fbens-grid li+li{border-left:1px solid var(--line)}
.fben-title{margin:0 0 10px;font:700 18px/1.25 var(--display);color:var(--ink)}
.fbens-grid p{margin:0;font-size:14.5px;line-height:1.55;color:var(--slate)}
/* the statement, then the stone panel */
.fpanel-sec{padding:72px 0 40px}
.fstate{max-width:22em;margin:0 0 36px;font-size:clamp(28px,3.4vw,44px);line-height:1.02}
.fpanel{padding:52px 52px 40px;border-radius:12px;background:var(--stone)}
.fpanel-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;align-items:start;margin:0 0 40px}
.fpanel-title{font:700 clamp(22px,2.3vw,28px)/1.2 var(--display);color:var(--ink)}
.fpanel-head p{margin:0;font-size:15.5px;line-height:1.6;color:var(--slate)}
.fcomp{display:flex;align-items:center;justify-content:center;gap:28px;min-height:360px;padding:36px 24px;border-radius:10px;background:var(--paper)}
.fpoints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:36px 0 0;padding:0;list-style:none}
.fpoints li{display:flex;flex-direction:column;gap:14px}
.fpt-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--ink)}
.fpt-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fpt-ico.lime{background:var(--lime)}.fpt-ico.sky{background:var(--sky)}.fpt-ico.lilac{background:var(--lilac)}.fpt-ico.pale{background:var(--pale)}.fpt-ico.tangerine{background:#FFB38F}.fpt-ico.green{background:var(--green)}
.fpoints p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
/* quotes, one at a time */
.fquotes{padding:80px 0}
.fq-track{max-width:900px;margin:0 auto;text-align:center}
.fq blockquote{margin:0;font:700 clamp(24px,3vw,36px)/1.22 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.fq blockquote::before{content:"\201C";margin-right:6px;font:900 1.3em/0 var(--display);color:var(--green)}
.fq blockquote::after{content:"\201D";margin-left:4px;font:900 1.3em/0 var(--display);color:var(--green)}
.fq figcaption{margin-top:24px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.fq figcaption b{display:block;font-weight:600;color:var(--ink)}
.fq:not([hidden]){animation:rise .4s ease}
.fq-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:32px}
.fq-dots{display:flex;gap:8px}
.fq-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color .2s ease,width .2s ease}
.fq-dots i.on{width:22px;border-radius:4px;background:var(--ink)}
/* two numbers, then a 2x2 grid of screens with captions */
.fgrid-sec{padding:40px 0 88px}
.fgrid-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end;margin:0 0 40px}
.fgrid-head .h-section{margin:0 0 14px}
.fgrid-head .lede{margin:0}
.fstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.fstats div{padding-top:18px;border-top:1px solid var(--ink)}
.fstats b{display:block;margin:0 0 8px;font:900 clamp(40px,4.4vw,56px)/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.fstats span{display:block;font:700 12px/1.35 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.fcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.fcard{min-width:0;margin:0}
.fcard-art{display:flex;align-items:center;justify-content:center;gap:18px;height:380px;padding:28px;border-radius:10px;background:var(--stone);overflow:hidden}
.fcard-art .kphone-screen{min-height:0}
.fcap{display:grid;grid-template-columns:22px 1fr;gap:12px;margin-top:16px;font-size:15px;line-height:1.45;color:var(--ink)}
.fcap::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
/* spotlight: a coloured panel, copy beside a screen */
.fspot-sec{padding:16px 0 40px}
.fspot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:64px 56px;border-radius:12px}
.fspot.sky{background:#CFEEFF}.fspot.lime{background:#EEFAB0}.fspot.lilac{background:#E6DCFF}.fspot.pale{background:#DDF7E6}.fspot.tangerine{background:#FFD9C7}
.fspot-copy .h-section{margin:0 0 16px;font-size:clamp(28px,3vw,40px)}
.fspot-copy .lede{margin:0 0 20px;color:var(--ink)}
.fspot-link{display:inline-flex;margin:0 0 24px}
.fspot-ticks{margin-top:4px}
.fspot-art{display:flex;align-items:center;justify-content:center;gap:20px;min-height:360px}
/* more tools: cards in the shared sideways row, each with a small screen at the foot */
.fmore{padding:72px 0 88px}
.fmcard{flex:0 0 300px}
.fmcard a{display:flex;flex-direction:column;height:100%;border-radius:10px;background:var(--stone);text-decoration:none;color:var(--ink);overflow:hidden;transition:background-color .2s ease}
@media (hover:hover){.fmcard a:hover{background:var(--pale)}.fmcard a:hover .tlink{text-decoration:underline;text-underline-offset:4px}}
.fmcard-copy{display:flex;flex-direction:column;gap:10px;padding:28px 26px 22px}
.fmcard-copy b{font:700 19px/1.25 var(--display)}
.fmcard-copy > span:not(.tlink){font-size:14px;line-height:1.5;color:var(--slate)}
.fmcard-copy .tlink{margin-top:6px}
.fmcard-art{display:flex;align-items:center;justify-content:center;height:200px;margin:auto 14px 14px;padding:18px;border-radius:8px;overflow:hidden}
/* the dark band */
.fband-sec{padding:0 0 96px}
.fband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:24px 24px 24px 56px;border-radius:12px;background:var(--ink);color:var(--paper)}
.fband-copy .h-section{margin:0 0 16px;color:var(--paper)}
.fband-copy p{max-width:30em;margin:0 0 22px;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.fband-link{color:#9CD5B1}
.fband-photo{aspect-ratio:16/10;border-radius:8px;overflow:hidden}
.fband-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1024px){
  .fbens-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .fbens-grid li:nth-child(3){padding-left:0;border-left:0}
  .fpoints{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .fhero{padding:24px 0 24px}
  .fhero-grid,.fgrid-head,.fspot,.fband,.fpanel-head{grid-template-columns:1fr}
  .fhero-grid{gap:32px}
  .fhero-art{min-height:420px}
  .fpanel{padding:36px 24px 28px}
  .fpanel-head{gap:14px}
  .fcomp{flex-wrap:wrap;min-height:0}
  .fspot{padding:44px 28px}
  .fband{padding:40px 24px 24px}
}
@media (max-width:700px){
  .fhero-copy{text-align:center}
  .fhero-lede{margin-left:auto;margin-right:auto}
  .fhero-actions{flex-direction:column}
  .fhero-art{min-height:0;padding:32px 16px}
  .fbens-grid{grid-template-columns:1fr;text-align:center;row-gap:0;padding-top:8px}
  .fbens-grid li,.fbens-grid li:first-child{padding:20px 0;border-left:0}
  .fbens-grid li+li{border-left:0;border-top:1px solid var(--line)}
  .fpanel-sec{padding:48px 0 24px}
  .fstate{text-align:center;margin-left:auto;margin-right:auto}
  .fpanel-head{text-align:center}
  .fcomp{padding:24px 12px;gap:16px}
  .fpoints{grid-template-columns:1fr;text-align:center}
  .fpoints li{align-items:center}
  .fquotes{padding:56px 0}
  .fgrid-sec{padding:24px 0 64px}
  .fgrid-head{text-align:center;gap:28px}
  .fcards{grid-template-columns:minmax(0,1fr);gap:28px}
  .fcard-art{height:auto;min-height:260px;padding:24px 16px}
  .fspot{text-align:center;padding:40px 18px}
  .fspot-ticks{max-width:30em;margin-left:auto;margin-right:auto;text-align:left}
  .fspot-art{min-height:0}
  .fmore{padding:48px 0 64px}
  .fmore .section-head{grid-template-columns:1fr;text-align:center}
  .fmore .hs-nav{display:none}
  .fmore .lede{margin-left:auto;margin-right:auto}
  .fmcard{flex-basis:min(80%,300px)}
  .fband-sec{padding-bottom:64px}
  .fband{text-align:center}
  .fband-copy p{margin-left:auto;margin-right:auto}
}

/* ---- mock kit (src/data/features/_kit.mjs) ---- */
.kstars{display:inline-flex;gap:2px}
.kstars i{display:block;width:var(--s);height:var(--s);color:#D8DDD8}
.kstars i.on{color:#FFC800}
.kstars svg{display:block;width:100%;height:100%;fill:currentColor}
.kbtn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 14px;border-radius:999px;background:var(--green);font:600 11.5px/1 var(--body);letter-spacing:.03em;color:#fff;white-space:nowrap}
.kbtn.dark{background:var(--ink)}
.kbtn.ghost{background:none;border:1.5px solid var(--ink);color:var(--ink)}
.kbtn.soft{background:var(--stone);color:var(--ink)}
.kbtn.wide{align-self:stretch;min-height:38px}
.kico{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;color:var(--ink)}
.kico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kico.lime,.kav.lime{background:var(--lime)}.kico.sky,.kav.sky{background:var(--sky)}.kico.lilac,.kav.lilac{background:var(--lilac)}.kico.pale,.kav.pale{background:var(--pale)}.kico.tangerine,.kav.tangerine{background:#FFB38F}.kico.ink,.kav.ink{background:var(--ink);color:#fff}
.kav{display:inline-grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;font:700 9.5px/1 var(--display);color:var(--ink)}
.kfield{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--slate)}
.kfield i{display:block;min-height:30px;padding:8px 10px;border:1.5px solid var(--line);border-radius:6px;background:#fff;font-style:normal;font-size:12px;color:var(--ink)}
.kfield.tall i{min-height:56px}
.ktoggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink)}
.ktoggle i{position:relative;flex:0 0 auto;width:30px;height:17px;border-radius:999px;background:var(--line)}
.ktoggle i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:left .2s ease}
.ktoggle.on i{background:var(--green)}
.ktoggle.on i::after{left:15px}
.ktoggle+.ktoggle{margin-top:8px}
.ktabs{display:flex;gap:16px;margin:0 0 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--slate)}
.ktabs span{padding:0 0 8px;white-space:nowrap}
.ktabs span.on{margin-bottom:-1px;border-bottom:2px solid var(--ink);color:var(--ink);font-weight:600}
.kkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.kkpi{padding:10px 12px;border-radius:7px;background:var(--stone)}
.kkpi span{display:block;font-size:10.5px;color:var(--slate)}
.kkpi b{display:block;margin:4px 0 2px;font:900 22px/1 var(--display);color:var(--ink)}
.kkpi em{font-style:normal;font-size:10.5px;color:#2F6B48}
.kplat{display:inline-grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:6px;font:900 10.5px/1 var(--display);color:#fff;background:var(--ink)}
.kplatrow{display:inline-flex;align-items:center;gap:8px}
.kbub{position:relative;max-width:230px;padding:9px 11px 18px;border-radius:10px;font-size:12px;line-height:1.4;color:var(--ink);background:#fff;box-shadow:0 6px 16px rgba(14,21,18,.1)}
.kbub.out{margin-left:auto;background:#DCF8C6}
.kbub span{position:absolute;right:9px;bottom:4px;font-size:9.5px;color:var(--slate)}
.kbub+.kbub{margin-top:8px}
.kphone{flex:0 0 auto;width:238px;padding:9px;border-radius:36px;background:var(--ink);box-shadow:0 24px 50px rgba(14,21,18,.22)}
.kphone-screen{position:relative;display:flex;flex-direction:column;min-height:440px;padding:30px 16px 18px;border-radius:28px;background:#fff;overflow:hidden;color:var(--ink)}
.kphone-screen::before{content:"";position:absolute;top:9px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:999px;background:var(--ink)}
.kphone.sm{width:200px}
.kphone.sm .kphone-screen{min-height:370px}
.kphone.wa .kphone-screen{background:#ECE5DD;padding:30px 10px 14px}
.kwin{flex:0 1 auto;width:100%;max-width:560px;border-radius:10px;background:#fff;box-shadow:0 18px 40px rgba(14,21,18,.12);overflow:hidden;font-size:12.5px;color:var(--ink)}
.kwin-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FAFBF9}
.kwin-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.kwin-bar span{margin-left:8px;font:600 11.5px/1 var(--body);color:var(--slate)}
.kwin-body{padding:16px 18px 18px}
.ktable{display:grid;font-size:11.5px}
.kth,.ktr{display:grid;grid-template-columns:var(--tc,repeat(var(--cols),minmax(0,1fr)));gap:10px;align-items:center;padding:7px 0}
.kth{padding-top:0;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid var(--line)}
.ktr+.ktr{border-top:1px solid #EEF1ED}
.ktr span{display:flex;align-items:center;gap:6px;min-width:0}
.ktr .kplat,.ktr .kav{display:inline-grid}  /* the cell rule above would make tiles and avatars flex, pushing their letters left */
.ktable.kmini{--tc:28px minmax(0,1fr) 56px}
.kcols{display:flex;align-items:flex-end;gap:7px;height:110px}
.kcols div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.kcols i{display:block;width:100%;height:var(--h);border-radius:4px 4px 0 0;background:var(--green)}
.kcols.sky i{background:var(--sky)}.kcols.lilac i{background:var(--lilac)}
.kcols span{font-size:9.5px;color:var(--slate)}
.kline{display:block;width:100%;height:90px;overflow:visible}
.kline polyline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kline .a{stroke:var(--green)}.kline .b{stroke:var(--slate);stroke-dasharray:4 4;opacity:.6}
.kdonut{flex:0 0 auto;width:96px;height:96px;transform:rotate(-90deg)}
.kdonut circle{fill:none;stroke-width:6}
.kdonut .p{stroke:var(--green)}.kdonut .n{stroke:#F6D98A}.kdonut .x{stroke:#F4A58E}
.kdonut text{transform:rotate(90deg);transform-origin:21px 21px;font:900 8px/1 var(--display);fill:var(--ink);text-anchor:middle}
.kdonutrow{display:flex;align-items:center;gap:18px}
.kdonutrow .kbars{flex:1}
.kbars{display:grid;gap:8px}
.kbars div{display:grid;grid-template-columns:minmax(0,76px) 1fr 32px;gap:8px;align-items:center;font-size:11.5px;color:var(--ink)}
.kbars i{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--green) var(--w),var(--stone) var(--w))}
.kbars.warm i{background:linear-gradient(90deg,var(--tangerine) var(--w),var(--stone) var(--w))}
.kbars b{font-weight:600;text-align:right}
.kqr{display:block;width:100%;height:auto;fill:var(--ink)}
.kqrrow{display:flex;align-items:center;gap:14px}
.kqrrow .kqr{width:64px;flex:0 0 auto}
.kposters{display:flex;align-items:flex-end;gap:14px}
.kposter{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;width:120px;aspect-ratio:210/297;padding:12px 10px 10px;border-radius:4px;box-shadow:0 12px 26px rgba(14,21,18,.18);text-align:center;background:var(--ink);color:#fff}
.kposter.lime{background:var(--lime);color:var(--ink)}.kposter.paper{background:#fff;color:var(--ink)}.kposter.sky{background:var(--sky);color:var(--ink)}.kposter.lilac{background:var(--lilac);color:var(--ink)}.kposter.green{background:var(--green);color:#fff}
.kposter.a3{width:150px}.kposter.a5{width:104px}.kposter.a6{width:86px}
.kposter.card{width:84px;aspect-ratio:55/85}
.kposter.circle{width:96px;aspect-ratio:1;border-radius:50%;justify-content:center;padding:14px}
.kposter.square{width:100px;aspect-ratio:1}
.kposter-logo{font:900 8.5px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.kposter b{font:900 12px/1.05 var(--display);text-transform:uppercase}
.kposter-qr{display:block;width:56%;padding:4px;border-radius:4px;background:#fff}
.kposter.card .kposter-qr,.kposter.circle .kposter-qr{width:48%}
.kposter-sub{font-size:7.5px;opacity:.8}
.kposter.circle .kstars,.kposter.circle .kposter-sub,.kposter.card .kposter-sub{display:none}
.kpage{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;text-align:center}
.kpage-lang{align-self:flex-end;padding:3px 7px;border-radius:999px;background:var(--stone);font-size:10px}
.kpage-logo{display:grid;place-items:center;width:46px;height:46px;margin-top:6px;border-radius:50%;background:var(--ink);font:900 14px/1 var(--display);color:#fff}
.kpage-head{font:700 18px/1.2 var(--display);color:var(--ink)}
.kpage .kfield{align-self:stretch;text-align:left}
.kpage .kbtn{margin-top:auto}
.kpage-foot{font-size:9.5px;color:var(--slate)}
.kpage.green .kpage-logo{background:var(--green)}
.kcode{margin:0 0 10px;padding:10px 12px;border-radius:6px;background:var(--ink);color:#D7F5E0;font:500 11px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.kcode b{color:var(--lime);font-weight:600}
.kassign{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--slate)}
.krate{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.kthumb{width:100%;max-width:260px;padding:14px 16px;font-size:12px}
.kthumb .q{font-size:13px;margin:8px 0 4px}
.kthumb .kbtn{margin-top:10px}
.kthumb .rmap{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:8px}
.kthumb .rmap i{font-size:8px}
.kthumb .kkpi b{font-size:18px}
.kstack{position:relative}
.kstack::before,.kstack::after{content:"";position:absolute;left:8%;right:8%;top:-8px;height:20px;border-radius:8px;background:#fff;opacity:.7;z-index:-1}
.kstack::after{left:16%;right:16%;top:-16px;opacity:.45}
.kcol{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px}
.kcol .ui{width:100%}
.fhero-art .ui,.fspot-art .ui,.fcard-art .ui,.fcomp .ui{box-shadow:0 14px 32px rgba(14,21,18,.12)}
@media (max-width:700px){
  .kphone{width:216px}
  .kphone-screen{min-height:400px}
  .kwin{font-size:11.5px}
  .kwin-body{padding:12px}
  .kposters{flex-wrap:wrap;justify-content:center}
}
.kscene{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}
.kside{max-width:250px}
.kform{display:grid;gap:10px}
.kwin-md{max-width:430px}
.kphotos{display:flex;align-items:center;gap:6px;align-self:stretch}
.kphotos i{width:40px;height:40px;border-radius:6px;background:linear-gradient(135deg,#C9A27E,#8C6A4F)}
.kphotos i+i{background:linear-gradient(135deg,#9FB8C8,#5E7A8C)}
.kphotos span{flex:1;display:grid;place-items:center;height:40px;border:1.5px dashed var(--line);border-radius:6px;font-size:10.5px;color:var(--slate)}
.kplats{display:flex;gap:6px;margin-top:12px}
.kcard-md{width:100%;max-width:330px}
.kcard-lg{width:100%;max-width:460px}
.ktable.kab{--tc:minmax(0,2.2fr) 44px 44px 44px}
.ktable.kcollected{--tc:minmax(0,1fr) 72px minmax(0,.9fr) minmax(0,1fr)}
.kpage-text{margin:0;font-size:12px;line-height:1.5;color:var(--slate)}
.kpage-link{font-size:11px;text-decoration:underline;color:var(--slate)}
@media (max-width:700px){.kscene{flex-direction:column}.kside{max-width:300px;width:100%}}
/* mock kit: pieces used by particular pages */
.kwin-lg{max-width:640px}
.kcard-sm{width:100%;max-width:250px}
.kflex{display:flex;flex-direction:column;gap:10px}
.kcol-wide{max-width:420px}
.kq{display:block;margin:0 0 10px;font:700 13.5px/1.3 var(--display);color:var(--ink)}
.ksub{display:block;margin:14px 0 8px;font:700 12px/1.3 var(--display);color:var(--ink)}
.kbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kchecks{display:grid;gap:8px;margin-top:12px}
.kchecks .ktoggle+.ktoggle{margin-top:0}
.kticks span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink)}
.kticks span::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.kchips{gap:5px;margin:4px 0 12px}
.kchips span{background:var(--stone);font-size:10.5px}
.kchips span.on{background:var(--ink);color:#fff}
.kopt{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border:1.5px solid var(--line);border-radius:7px;font-size:11px;color:var(--slate)}
.kopt b{font-size:12.5px;color:var(--ink)}
.kopt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.kopt+.kopt{margin-top:7px}
.kalerts{display:grid;gap:8px}
.kalert{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:10px 12px;border-radius:8px;background:#FAFBF9;border:1px solid #EEF1ED}
.kalert .q{margin:6px 0 0;font-size:13px}
.kalert-status{font-size:11px;font-weight:600;color:var(--slate)}
.kwa-head{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid rgba(14,21,18,.1);font-size:12.5px}
.kphone.wa .kwa-head{margin:0 -10px 12px;padding:0 12px 10px;background:none}
.ktg{background:#EAF3FB}
.ksuggest{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:#F1FAF4;font-size:12px;line-height:1.45;color:var(--ink)}
.kmail{width:100%;max-width:400px;padding:18px 20px 20px;border-radius:10px;background:#fff;box-shadow:0 18px 40px rgba(14,21,18,.14);font-size:12.5px;color:var(--ink);text-align:left}
.kmail-wide{max-width:680px}
.kmail-head{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.kmail-head b{font:700 15px/1.25 var(--display)}
.kmail-sec{display:flex;flex-direction:column;gap:4px;padding:9px 0;border-top:1px solid #EEF1ED}
.kmail-sec:first-of-type{border-top:0}
.kmail-sec b{font:700 12px/1.3 var(--display)}
.kmail-sec span{font-size:12px;line-height:1.45;color:var(--slate)}
.kmail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.kmail-grid .kmail-sec:nth-child(2){border-top:0}
.kmail-p{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--slate)}
.kofferbox{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:12px 14px;border:1.5px dashed var(--green);border-radius:8px;background:#F1FAF4}
.kofferbox b{font:700 14px/1.2 var(--display)}
.kofferbox span{font-size:11px;color:var(--slate)}
.kfunnel{display:grid;gap:4px;margin-top:2px}
.kfunnel i{display:block;width:var(--w);padding:4px 8px;border-radius:4px;background:var(--pale);font-style:normal;font-size:10.5px;color:var(--ink)}
.krank-note{margin:0 0 10px;padding:10px 12px;border-radius:8px;background:var(--lime);font-size:12.5px;line-height:1.45}
.kcase-title{display:block;margin:10px 0 4px;font:700 16px/1.25 var(--display)}
.klinked{margin-top:12px;padding:7px 10px;border-radius:6px;background:#FDE8E1;font-size:11.5px;font-weight:600;color:#9A3412}
.kqrbig{width:140px;margin:0 auto 12px}
.kswatches{display:flex;justify-content:center;gap:6px;margin:0 0 12px}
.kswatches i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.kwallet{display:flex;flex-direction:column;align-items:center;gap:4px;width:220px;padding:16px 18px 20px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:0 20px 40px rgba(14,21,18,.25);text-align:center}
.kwallet-top{display:flex;justify-content:space-between;align-self:stretch;margin:0 0 14px;font:700 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.kwallet b{font:700 17px/1.2 var(--display)}
.kwallet-sub{font-size:11px;opacity:.75}
.kwallet-qr{display:block;width:120px;margin-top:14px;padding:6px;border-radius:8px;background:#fff}
.kposters-hero{align-items:center;gap:18px}
.kposters-hero .kposter.a3{width:170px}
.keditor{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.keditor-side{display:grid;gap:2px}
.keditor-side span{padding:6px 10px;border-radius:6px;font-size:11.5px;color:var(--slate)}
.keditor-side span.on{background:var(--stone);color:var(--ink);font-weight:600}
.keditor-stage{display:flex;justify-content:center;padding:14px;border-radius:8px;background:repeating-conic-gradient(#F4F6F3 0 25%,#fff 0 50%) 0 0/16px 16px}
.keditor-stage .kposter{width:150px}
.krev{padding:10px 0;border-top:1px solid #EEF1ED}
.krev:first-child{border-top:0;padding-top:0}
.krev .q{margin:8px 0 0;font-size:13.5px}
.krevs{margin-top:12px}
.kplatrow .kstars{margin-left:2px}
.kdraft{margin-top:12px;padding:12px 14px;border-radius:8px;background:#F1FAF4;border:1px solid #CFEBD9}
.kdraft-head{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--slate)}
.kdraft-head b{font-size:12px;color:#1F6B41}
.kdraft p{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.kinbox-hero{width:100%;max-width:420px}
.knum{font:900 13px/1 var(--display);color:var(--green)}
.kpodium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;margin-bottom:14px}
.kpodium > div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 10px;border-radius:8px 8px 0 0;background:#fff;text-align:center;font-size:12px}
.kpodium .kav{width:38px;height:38px;font-size:13px}
.kpodium b{font:700 13px/1 var(--display)}
.kpodium span{font:900 20px/1 var(--display);color:var(--ink)}
.kpodium .k1{min-height:170px;background:#fff;box-shadow:0 14px 30px rgba(14,21,18,.12)}
.kpodium .k2{min-height:140px;background:rgba(255,255,255,.85)}
.kpodium .k3{min-height:118px;background:rgba(255,255,255,.7)}
.kdrop{display:flex;flex-direction:column;align-items:center;gap:3px;padding:18px 12px;border:1.5px dashed var(--line);border-radius:8px;font-size:11px;color:var(--slate)}
.kdrop b{font-size:12.5px;color:var(--ink)}
.kscore{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.kscore b{font:900 30px/1 var(--display)}
.kscore span{font-size:11.5px;color:var(--slate)}
.kscore-lg{flex-direction:column;align-items:center;gap:4px;margin:4px 0 14px}
.kscore-lg b{font-size:56px}
.kscale{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.kscale i{padding:6px 4px;border-radius:4px;font-style:normal;font-size:9.5px;text-align:center;color:var(--slate);background:var(--stone)}
.kscale i.on{background:#F6D98A;color:var(--ink);font-weight:600}
.kmap-hero{width:100%;max-width:380px}
.kmap-hero .rmap,.kmap-md .rmap{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:12px}
.kmap-md{width:100%;max-width:330px}
.khello{display:block;margin:0 0 12px;font:700 16px/1.2 var(--display)}
.kdash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.kdash .ui{padding:12px 14px;box-shadow:none;border-color:var(--line)}
.knote{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid #EEF1ED;font-size:12px}
.knote span{font-size:10.5px;color:var(--slate)}
.kchat .kbub{max-width:none;box-shadow:none;background:var(--stone)}
.kchat .kbub.out{background:#DCF8C6}
.kexports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kexports span{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:7px;background:var(--stone);font-size:12px;font-weight:600}
.kexports em{font-style:normal;font-size:10px;color:var(--slate)}
.koffers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.koffers .ui{padding:12px 14px;box-shadow:none;border-color:var(--line)}
.kttd-head{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.kttd-head b{font:700 16px/1.2 var(--display)}
.kact{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #EEF1ED;font-size:12px}
.kact b{display:block;font-size:12.5px}
.kact .krate{margin:2px 0}
.kact-img{display:block;width:52px;height:52px;border-radius:7px;background:linear-gradient(135deg,#7FB6D9,#2E6E99)}
.kact-img.food{background:linear-gradient(135deg,#E8B07A,#A5552C)}
.kact-img.hill{background:linear-gradient(135deg,#A9D18E,#4F7F3A)}
.kact-img.gin{background:linear-gradient(135deg,#C7B6F2,#5E4AA8)}
.kact-img.kact-lg{width:100%;height:110px;margin:4px 0}
.kacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.kfound{display:flex;flex-direction:column;gap:2px;margin:10px 0 4px;padding:10px 12px;border-radius:7px;background:var(--stone);font-size:12.5px}
.kgood{color:#1F6B41;font-weight:600}.kmid{color:#8A6300;font-weight:600}.kbad{color:#B23C0E;font-weight:600}
.ktable.kdevices{--tc:minmax(0,1.1fr) minmax(0,1fr) 110px 72px 64px}
.ktable.kissues{--tc:70px minmax(0,1.5fr) 72px 96px minmax(0,1fr)}
.ktable.kcollected3{--tc:86px minmax(0,1.5fr) minmax(0,1fr)}
.ktable.kwebhooks{--tc:minmax(0,1.4fr) minmax(0,1.2fr) 64px 70px}
.ktable.kleader{--tc:40px minmax(0,1.6fr) 64px 76px 52px}
.ktable.kstaff{--tc:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) 64px}
.ktable.krewards{--tc:minmax(0,1fr) 56px minmax(0,1.2fr)}
.ktable.klocal{--tc:20px minmax(0,1fr) 36px}
.ktable.kkeys{--tc:minmax(0,1.3fr) minmax(0,1.1fr) 60px}
.ktable.kclicks{--tc:minmax(0,1fr) 50px}
.ktable.kteam{--tc:minmax(0,1.1fr) minmax(0,1.6fr) 64px}
.ktable.kmini2{--tc:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.6fr)}
.ktable.kmini4{--tc:minmax(0,1.2fr) 44px minmax(0,.8fr) minmax(0,.8fr)}
.ktable.kportfolio{--tc:22px minmax(0,1.6fr) 52px 60px}
.ktable.kaccount{--tc:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.8fr)}
.ktable.kclients{--tc:minmax(0,.8fr) minmax(0,1.7fr) 64px 70px 84px}
.ktable.kgroups{--tc:minmax(0,1.1fr) 70px minmax(0,1fr) 64px}
.ktable.khooks{--tc:minmax(0,1.3fr) minmax(0,1.2fr) 64px 66px 86px}
.ktable.kapps{--tc:minmax(0,1.1fr) minmax(0,1fr) auto}
.ktable.kguests{--tc:minmax(0,1.2fr) 58px minmax(0,1fr)}
.kstaff .pill,.kissues .pill,.kdevices .pill,.kclients .pill,.kgroups .pill,.khooks .pill,.kwebhooks .pill,.kteam .pill{font-size:9px;padding:4px 7px}
@media (max-width:700px){
  .keditor{grid-template-columns:1fr}
  .keditor-side{display:none}
  .kmail-grid,.kdash,.koffers,.kacts{grid-template-columns:1fr}
  .kposters-hero .kposter.a3{width:130px}
  .kinbox-hero,.kmap-hero{max-width:100%}
  .ktable.kdevices{--tc:minmax(0,1fr) minmax(0,1fr) 96px}
  .ktable.kdevices .kth span:nth-child(n+4),.ktable.kdevices .ktr span:nth-child(n+4){display:none}
  .ktable.kissues{--tc:64px minmax(0,1fr) 88px}
  .ktable.kissues .kth span:nth-child(3),.ktable.kissues .ktr span:nth-child(3),.ktable.kissues .kth span:nth-child(5),.ktable.kissues .ktr span:nth-child(5){display:none}
  .ktable.kaccount{--tc:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr)}
  .ktable.kaccount .kth span:nth-child(n+4),.ktable.kaccount .ktr span:nth-child(n+4){display:none}
  .ktable.kclients{--tc:minmax(0,1.5fr) 64px 70px}
  .ktable.kclients .kth span:nth-child(1),.ktable.kclients .ktr span:nth-child(1),.ktable.kclients .kth span:nth-child(5),.ktable.kclients .ktr span:nth-child(5){display:none}
  .ktable.khooks,.ktable.kleader{--tc:minmax(0,1.3fr) minmax(0,1fr) 64px}
  .ktable.khooks .kth span:nth-child(n+4),.ktable.khooks .ktr span:nth-child(n+4){display:none}
  .ktable.kleader{--tc:32px minmax(0,1.4fr) 56px}
  .ktable.kleader .kth span:nth-child(n+4),.ktable.kleader .ktr span:nth-child(n+4){display:none}
  .ktable.kcollected{--tc:minmax(0,1fr) 64px minmax(0,1fr)}
  .ktable.kcollected .kth span:nth-child(4),.ktable.kcollected .ktr span:nth-child(4){display:none}
}
.kline line.now{stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ktable.klogs{--tc:minmax(0,1.2fr) minmax(0,1fr) 60px}
/* role and venue pages: each feature section links to its feature page; the tools row reuses the feature cards */
.rfeat-link{display:inline-flex;margin-top:24px}
.rtools{padding:64px 0 32px}
@media (max-width:700px){.rfeat-copy .rfeat-link{justify-content:center}.rtools{padding:40px 0 16px}}

/* ================= posts: the blog (/resources) and comparisons (/compare) — src/collections/posts.mjs ================= */
/* After Mews's blog (measured 2026-09-25): a big title, two large cards, then a grid of three; each card is a 16:9
   photo, an outlined pill and the category, the title, and the reading time pinned to the foot, with a rule under it.
   A post opens on a cream band (breadcrumb, title and meta beside a 16:9 cover, the byline under both), then a
   736px reading column; a thin bar under the header shows how far through the article you are. */
.posts-top{padding:64px 0 0}
.posts-title{margin:0 0 18px;font-size:clamp(44px,5.6vw,72px);color:var(--ink)}
.posts-page-no{display:block;margin-top:12px;font:700 15px/1 var(--display);letter-spacing:.08em;color:var(--slate)}
.posts-lede{max-width:36em;margin:0;font-size:17px;line-height:1.55;color:var(--slate)}
.posts-list{padding:52px 0 128px}
.posts-empty{margin:0;padding:48px 24px;border-radius:var(--r-card);background:var(--stone);font-size:16px;color:var(--slate);text-align:center}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;margin:0;padding:0;list-style:none}
.post-grid.is-lead{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:64px}
.post-card{min-width:0}
.post-card a{display:flex;flex-direction:column;gap:22px;height:100%;padding-bottom:24px;border-bottom:1px solid rgba(14,21,18,.2);text-decoration:none;color:var(--ink)}
.post-card-img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-card);object-fit:cover;background:var(--stone);transition:transform .3s ease,filter .3s ease}
.post-noimg{background:linear-gradient(135deg,var(--pale),var(--lime))}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:0}
.post-pill{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:4px 12px 4px 6px;border:1px solid rgba(14,21,18,.2);border-radius:999px;font:700 11px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.post-pill::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--green)}
.post-compare .post-pill::before,.posts-compare .post-pill::before{background:var(--tangerine)}
.post-cat{font:700 11px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:rgba(14,21,18,.65)}
.post-card-title{margin:0;font:700 21px/1.22 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty;transition:opacity .2s ease}
.post-card.is-big .post-card-title{font-size:clamp(21px,2vw,26px)}
@media (hover:hover){.post-card a:hover .post-card-img{transform:scale(1.01);filter:brightness(.92)}.post-card a:hover .post-card-title{opacity:.72}}
.post-time{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:15px;line-height:1.5;color:rgba(14,21,18,.65)}
.post-time svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.post-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:48px;font:500 17px/1 var(--body)}
.post-pager a,.post-pager span{display:grid;place-items:center;min-width:28px;height:36px;color:rgba(14,21,18,.65);text-decoration:none}
.post-pager a:hover{color:var(--ink)}
.post-pager [aria-current="page"]{font-weight:700;color:var(--ink)}
.post-pager .post-pager-step{font-size:15px}
.post-pager .is-off{color:rgba(14,21,18,.3)}
/* a post */
.post-progress{position:sticky;top:72px;z-index:30;height:2px;background:rgba(14,21,18,.08)}
.post-progress i{display:block;height:100%;background:var(--green);transform:scaleX(var(--p,0));transform-origin:0 50%}
.post-hero{padding:72px 0 0;background:#FFFCF6}
.post-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:0 48px;align-items:start}
.post-crumb{display:flex;align-items:center;gap:8px;margin:0;font:700 11px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:rgba(14,21,18,.65)}
.post-crumb a{color:inherit;text-decoration:none}
.post-crumb a:hover{color:var(--ink)}
.post-crumb-sep{width:14px;height:14px;fill:none;stroke:rgba(14,21,18,.3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.post-title{max-width:620px;margin:20px 0 0;font:700 clamp(32px,3.6vw,46px)/1.1 var(--display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.post-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:32px 0 0}
.post-hero-meta .post-pill{font-size:12px}
.post-hero-meta .post-cat{font-size:12px;color:var(--ink)}
.post-hero-meta .post-time{margin:0;font:700 12px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.post-hero-meta .post-time svg{display:none}
.post-hero-meta .post-time::before{content:"";width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--ink)}
.post-hero-art{align-self:start}
.post-hero-img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-card);object-fit:cover}
.post-hero-art .post-noimg{display:block;aspect-ratio:16/9;border-radius:var(--r-card)}
.post-byline{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:48px 0 0;padding:24px 8px 28px 0;border-top:1px solid rgba(14,21,18,.1)}
.post-byline div{display:flex;flex-direction:column;gap:4px}
.post-byline div+div{text-align:right}
.post-byline dt{font-size:13px;color:rgba(14,21,18,.65)}
.post-byline dd{margin:0;font-size:15.5px;font-weight:600;color:var(--ink)}
.post-byline div+div dd{font-weight:400}
.post-updated{color:rgba(14,21,18,.65)}
.post-body{padding:88px 0 40px}
.post-text{max-width:736px;margin:0 auto;font-size:17.5px;line-height:1.7;letter-spacing:.005em;color:var(--ink)}
.post-text > p,.post-text > ul,.post-text > ol{margin:0 0 24px}
.post-text h2{margin:48px 0 20px;font:700 clamp(26px,2.6vw,33px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);scroll-margin-top:96px}
.post-text h3{margin:32px 0 12px;font:700 clamp(21px,2vw,25px)/1.2 var(--display);letter-spacing:-.015em;scroll-margin-top:96px}
.post-text h4{margin:28px 0 10px;font:700 18px/1.35 var(--display)}
.post-text > h2:first-child,.post-text > h3:first-child{margin-top:0}
.post-text ul{list-style:none;padding:0}
.post-text ul > li{position:relative;padding-left:20px}
.post-text ul > li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.post-text ol{list-style:decimal;padding-left:24px}
.post-text ol > li{padding-left:4px}
.post-text ol > li::marker{font-weight:600;color:var(--green)}
.post-text li{margin:0 0 12px;line-height:1.6}
.post-text a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
.post-text a:hover{text-decoration-color:var(--ink)}
.post-text strong{font-weight:600}
.post-text em{font-style:italic}
.post-text code{padding:2px 6px;border-radius:4px;background:var(--stone);font-size:.88em}
.post-text pre{margin:0 0 24px;padding:18px 20px;border-radius:var(--r-card);background:var(--ink);color:#D7F5E0;overflow-x:auto;font-size:14px;line-height:1.6}
.post-text pre code{padding:0;background:none}
.post-text blockquote{margin:36px 0;padding:4px 0 4px 24px;border-left:3px solid var(--green)}
.post-text blockquote p{margin:0 0 10px;font:700 21px/1.4 var(--display);letter-spacing:-.01em;color:var(--ink)}
.post-text blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--slate)}
.post-text figure{margin:48px 0}
.post-text figure img{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.post-text figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--slate)}
.post-text hr{margin:48px 0;border:0;border-top:1px solid rgba(14,21,18,.12)}
.post-table{margin:8px 0 32px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card)}
.post-table table{width:100%;min-width:480px;border-collapse:collapse;font-size:15px;line-height:1.45}
.post-table th,.post-table td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.post-table thead th{border-top:0;background:var(--stone);font:700 13px/1.3 var(--display)}
.post-table tbody th{font-weight:600}
.post-sources{margin:56px 0 0;padding:24px 26px;border-radius:var(--r-card);background:var(--stone)}
.post-sources h2{margin:0 0 12px;font-size:18px;letter-spacing:0}
.post-sources ol{margin:0;padding-left:20px;font-size:14.5px;line-height:1.55}
.post-sources li{margin:0 0 8px}
.post-sources a{font-weight:500}
.post-sources span{color:var(--slate)}
.post-author{margin:60px 0 0}
.post-author-label{display:block;margin:0 0 16px;font:700 12px/1.2 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.post-author-box{display:flex;align-items:center;gap:24px;padding:24px 0;border-top:1px solid rgba(14,21,18,.1);border-bottom:1px solid rgba(14,21,18,.1)}
.post-author-mark{flex:0 0 auto;display:grid;place-items:center;width:72px;height:72px;border-radius:var(--r-card);background:var(--pale)}
.post-author-mark img{width:40px;height:40px}
.post-author-box b{display:block;font:700 18px/1.3 var(--display)}
.post-author-box p{margin:6px 0 0;font-size:15px;line-height:1.5;color:rgba(14,21,18,.8)}
.posts-related{padding:40px 0 104px}
.posts-related .section-head{align-items:center}
@media (max-width:1024px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .post-hero-grid{grid-template-columns:1fr}
  .post-hero-art{margin-top:40px}
}
@media (max-width:700px){
  .posts-top{padding:32px 0 0;text-align:center}
  .posts-lede{margin:0 auto}
  .posts-list{padding:40px 0 72px}
  .post-grid,.post-grid.is-lead{grid-template-columns:1fr;gap:48px}
  .post-grid.is-lead{margin-bottom:48px}
  .post-card a{gap:16px;padding-bottom:20px}
  .post-card-title,.post-card.is-big .post-card-title{font-size:20px}
  .post-time{font-size:14px}
  .post-progress{top:56px}
  .post-hero{padding-top:24px}
  .post-title{font-size:30px;line-height:1.12}
  .post-hero-meta{margin-top:24px}
  .post-byline{margin-top:32px;padding:16px 0 20px}
  .post-body{padding:48px 0 16px}
  .post-text{font-size:16px}
  .post-text h2{font-size:26px;margin-top:40px}
  .post-text h3{font-size:21px}
  .post-text figure{margin:32px 0}
  .post-author-box{align-items:flex-start;gap:16px}
  .post-author-mark{width:56px;height:56px}
  .posts-related{padding:24px 0 72px}
  .posts-related .section-head{grid-template-columns:1fr;text-align:center;justify-items:center}
}
/* a YouTube video in a post: a thumbnail and play button until pressed (then the no-cookie player, see site.js) */
.post-video{margin:40px 0}
.post-video-play,.post-video iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-card);overflow:hidden;background:#000 center/cover no-repeat}
.post-text .post-video-play{text-decoration:none}
.post-video-play::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.post-video-play::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='white'/%3E%3C/svg%3E") 55% 50%/30px no-repeat;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s ease}
.post-video-play:hover::after{transform:scale(1.06)}
.post-video-label{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;font:700 16px/1.3 var(--display);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* a chart drawn from a ```chart block (inline SVG from src/lib/charts.mjs) */
.post-chart{margin:40px 0}
.post-chart svg{display:block;width:100%;height:auto}
.post-chart-error{padding:12px 16px;border-radius:var(--r-card);background:var(--warn);font-size:14px}
.post-author-policy{display:inline-block;margin-top:8px;font-size:14px;font-weight:500;color:var(--link)}

/* ================= customers: the index and the stories (src/collections/customers.mjs, src/lib/story.mjs) ================= */
/* After Mews's customers index and story page (measured 2026-09-28), in Monty's tokens. cs- is the stories, cf- the filter. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* placeholder marks: a lime ribbon on the page, a pill on the card, a tag on every photo */
.cs-eg{margin:0;padding:12px var(--gutter);background:var(--lime);color:var(--ink);font-size:14px;line-height:1.45;text-align:center}
.cs-eg b{font-weight:600}
.cs-eg-pill{display:inline-flex;align-items:center;min-height:24px;padding:4px 10px;border-radius:999px;background:var(--lime);font:700 11px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.cs-eg-tag{position:absolute;left:10px;bottom:10px;z-index:1;padding:5px 9px;border-radius:999px;background:rgba(14,21,18,.72);color:#fff;font:700 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}

/* index hero: a full-bleed ink band */
.cs-idx-hero{background:var(--ink);color:var(--paper);text-align:center;padding:104px 0}
.cs-idx-title{max-width:930px;margin:0 auto;font-size:clamp(34px,5.2vw,66px);line-height:1.03;letter-spacing:-.02em;color:var(--paper)}
.cs-idx-title .posts-page-no{color:rgba(255,255,255,.7)}

/* filters (the site has no global [hidden] rule, and several of these set display, so hidden needs saying) */
.cf[hidden],.cf [hidden],.cs-list [hidden]{display:none!important}
.cf{padding:72px 0 0}
.cf-box > summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:default}
.cf-box > summary::-webkit-details-marker{display:none}
.cf-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cf-title{margin:0;font:700 21px/1.2 var(--display);letter-spacing:-.01em}
.cf-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--stone);font:600 13px/1 var(--body)}
.cf-bar{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cf-dd{position:relative}
.cf-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:140px;max-width:310px;height:36px;padding:0 6px 0 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);font:400 14px/1 var(--body);color:var(--ink);transition:border-color .15s ease}
.cf-trigger:hover,.cf-trigger[aria-expanded="true"]{border-color:var(--ink)}
.cf-trigger.has-sel{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.cf-chev{flex:0 0 auto;width:24px;height:24px;border-radius:5px;background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E1512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .2s ease}
.cf-trigger[aria-expanded="true"] .cf-chev{transform:rotate(180deg)}
.cf-panel{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:280px;max-height:240px;overflow:auto;padding:8px 4px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.cf-opt{display:flex;align-items:center;gap:12px;min-height:38px;padding:8px 10px;border-radius:6px;font-size:14px;line-height:1.3;cursor:pointer}
.cf-opt:hover{background:var(--stone)}
.cf-opt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;margin:0;border:1.5px solid rgba(14,21,18,.3);border-radius:4px;background:var(--paper) center/12px no-repeat;cursor:pointer}
.cf-opt input:checked{border-color:var(--green);background-color:var(--green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.cf-opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cf-opt .flag{width:18px;height:18px}
.cf-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.cf-clear{min-height:32px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 13px/1 var(--body)}
.cf-empty .cf-clear{min-height:0;padding:0;background:none;color:var(--link)}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 5px 0 14px;border-radius:999px;background:rgba(14,21,18,.08);font-size:14px}
.cf-chip button{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:17px;line-height:1}
.cf-chip button:hover{background:rgba(14,21,18,.12)}
@media (min-width:641px){.cf-box > summary{pointer-events:none}}

/* the list */
.cs-list{padding:40px 0 128px}
.cs-list-intro{max-width:46em;margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--slate)}
.cf-count{margin:0 0 28px;font:600 13px/1.3 var(--body);color:var(--slate)}
.cs-card-media{position:relative;display:block;overflow:hidden;border-radius:var(--r-card)}

/* story hero: a stone box, the photo notched at its bottom edge, up to three figures under it */
.cs-hero-wrap{padding:24px 0 0}
.cs-hero{position:relative;padding:80px 40px 0;border-radius:var(--r-panel);background:var(--stone);text-align:center}
.cs-hero.no-high{padding-bottom:48px}
.cs-hero::before,.cs-hero::after{content:"";position:absolute;top:var(--notch-y,-999px);width:22px;height:22px;border-radius:50%;background:var(--paper)}
.cs-hero::before{left:0;transform:translate(-50%,-50%)}
.cs-hero::after{right:0;transform:translate(50%,-50%)}
.cs-hero.no-high::before,.cs-hero.no-high::after{display:none}
.cs-hero .post-crumb{justify-content:center}
.cs-logo{display:block;width:128px;height:auto;max-height:72px;object-fit:contain;margin:24px auto 0}
.cs-title{max-width:840px;margin:20px auto 0;text-align:center}
.cs-hero-photo{position:relative;max-width:1062px;margin:64px auto 0}
.cs-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:1062/568;object-fit:cover;border-radius:var(--r-card);background:var(--ink-soft)}
.cs-hero-photo .cs-eg-tag{bottom:auto;top:12px;left:12px}
.cs-credit{display:block;margin-top:8px;font-size:12.5px;line-height:1.4;color:var(--slate);text-align:right}
.cs-high{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));padding:44px 0 36px}
.cs-hl{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 16px}
.cs-hl + .cs-hl::before{content:"";position:absolute;left:0;top:50%;width:1px;height:100px;background:rgba(14,21,18,.2);transform:translateY(-50%)}
.cs-hl-num{margin:0;font-size:clamp(34px,4.6vw,59px);line-height:.96;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.cs-hl-label{max-width:315px;margin:18px 0 0;font:600 15.5px/1.45 var(--body);color:var(--ink);text-wrap:pretty}
.cs-hl-when{max-width:315px;margin:6px 0 0;font-size:14px;line-height:1.45;color:rgba(14,21,18,.72);text-wrap:pretty}
.cs-high-note{margin:0;padding:0 0 32px;font-size:14px;color:var(--slate)}
.cs-high-note a,.cs-meta a:hover{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}

/* body: the sticky sidebar beside the article */
.cs-body{padding:112px 0 64px}
.cs-grid{display:grid;grid-template-columns:280px minmax(0,760px);gap:56px;align-items:start}
/* sticky: a sidebar taller than the window sticks by its bottom edge (site.js sets --side-top), so "On this page" stays in view */
.cs-side{position:sticky;top:var(--side-top,104px)}
.cs-side-box > summary{display:none}
.cs-meta{margin:0}
.cs-meta > div,.cs-toc{padding:16px 12px 16px 0;border-top:1px solid var(--line)}
.cs-meta dt,.cs-toc-title{margin:0 0 8px;font:700 12px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.cs-meta dd{margin:0;font-size:15px;line-height:1.45;color:rgba(14,21,18,.8)}
.cs-meta dd ul{display:grid;gap:4px}
.cs-meta a{color:inherit;text-decoration:none}
.cs-place{display:flex;align-items:center;gap:10px}
.cs-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.cs-toc a{display:block;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--slate);text-decoration:none;transition:color .2s ease,border-color .2s ease}
.cs-toc a:hover{color:var(--ink)}
.cs-toc a.is-current{color:var(--ink);font-weight:600;border-left-color:var(--green)}
.cs-text{max-width:760px;margin:0}

/* Everything below that sits inside the article is scoped under .cs-text: .post-text figure / figcaption / h3 / a / > p
   are (0,1,1) and would otherwise beat these single-class rules (margins, the credit size, the CTA button's colour). */
/* quotes: Mews's thin rounded bracket, in green */
.cs-text .cs-quote{position:relative;margin:48px 0;padding:24px 0}
.cs-text > .cs-quote:first-child{margin-top:0}
.cs-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border:1.5px solid var(--green);border-right:0;border-radius:10px 0 0 10px}
.cs-text .cs-quote blockquote{margin:0;padding:0 36px;border:0}
.cs-text .cs-quote blockquote p{margin:0;font:700 clamp(20px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.cs-text .cs-quote figcaption{margin:18px 0 0;padding:0 36px;font-size:14px;line-height:1.5;color:rgba(14,21,18,.8)}
.cs-quote figcaption b{font-weight:600;color:var(--ink)}
.cs-quote-src{display:block;margin-top:2px;font-size:13px;color:var(--slate)}
.cs-text mark.tbc{font:inherit;font-weight:inherit}

/* chapters: bold Challenge / Solution / Result labels, square photos */
.cs-text h3{margin:28px 0 8px;font:700 17.5px/1.4 var(--display);letter-spacing:0}
.cs-text .cs-fig{position:relative;margin:56px 0 40px}
.cs-text .cs-credit{margin-top:8px;font-size:12.5px}
.cs-text .cs-fig img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-card)}
.cs-text .cs-fig.is-wide img{aspect-ratio:4/3}
.cs-fig .cs-eg-tag{bottom:auto;top:12px;left:12px}

/* results in numbers: the old site's Before & After cards, with dates and source under every number */
.cs-text .cs-results{margin:64px 0 0}
.cs-text .cs-results > h2{margin-top:0}
.cs-text .cs-res-asof{margin:-8px 0 24px;font-size:15px;line-height:1.55;color:var(--slate)}
.cs-res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cs-res{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:var(--r-card);background:var(--stone)}
.cs-res:only-child,.cs-res:last-child:nth-child(odd){grid-column:1/-1}
.cs-text .cs-res-title{margin:0;font:700 17px/1.3 var(--display);letter-spacing:0}
.cs-text .cs-res.has-change .cs-res-title{padding-right:120px}
.cs-text .cs-res-change{position:absolute;top:20px;right:20px;margin:0;padding:6px 10px;border-radius:999px;background:var(--lime);font:700 13px/1 var(--display);color:var(--ink)}
.cs-res-change span{font-weight:500}
.cs-res-ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px}
.cs-res-ba.is-single{grid-template-columns:1fr}
.cs-res-col{display:flex;flex-direction:column;gap:4px}
.cs-res-k{font:700 11px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.cs-res-v{font:900 clamp(30px,3.2vw,40px)/1 var(--display);letter-spacing:-.02em;color:rgba(14,21,18,.5)}
.cs-res-col.is-after .cs-res-v{color:var(--ink)}
.cs-res-when{font-size:13px;line-height:1.35;color:var(--slate)}
.cs-res-arrow{padding-bottom:26px;font-size:20px;color:var(--green)}
.cs-text .cs-res-src{margin:0;padding-top:12px;border-top:1px solid rgba(14,21,18,.1);font-size:14px;line-height:1.5;color:rgba(14,21,18,.8)}
.cs-text .cs-res-bench{margin:0;font-size:14px;line-height:1.5;color:rgba(14,21,18,.8)}
.cs-res-notes{margin:24px 0 0}
.cs-text .cs-res-notes p{margin:0 0 12px;font-size:15.5px;line-height:1.6}
.cs-text .cs-disclosure{padding:12px 16px;border-left:3px solid var(--ink);background:var(--stone)}

/* the in-page call to action and the permissions line */
.cs-text .cs-cta{display:flex;flex-direction:column;align-items:center;gap:18px;margin:64px 0 0;padding:48px;border-radius:var(--r-panel);background:var(--lime);text-align:center}
.cs-text .cs-cta-title{margin:0;font:700 clamp(22px,2.4vw,27px)/1.2 var(--display);color:var(--ink)}
.cs-text .cs-cta .btn{color:#FFFFFF;font-weight:500;text-decoration:none}   /* .post-text a would make it ink, bold and underlined */
.cs-text > .cs-fine{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--slate)}

@media (max-width:1024px){.cs-hero{padding:56px 32px 0}.cs-grid{grid-template-columns:240px minmax(0,1fr);gap:40px}}
@media (max-width:900px){
  .cs-body{padding:32px 0 48px}
  .cs-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cs-side{position:static}
  .cs-side-box{background:var(--stone);border-radius:var(--r-card)}
  .cs-side-box > summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;cursor:pointer;list-style:none;font:700 16px/1.3 var(--display)}
  .cs-side-box > summary::-webkit-details-marker{display:none}
  .cs-side-box > summary::after{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%20stroke%3D%22white%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/13px no-repeat}
  .cs-side-box[open] > summary::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012h14%22%20stroke%3D%22white%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")}
  .cs-meta,.cs-toc{margin:0 18px}
  .cs-toc{margin-bottom:8px}
}
@media (max-width:700px){.cs-idx-hero{padding:56px 0 64px}.cs-idx-title{font-size:clamp(30px,8.4vw,40px)}}
@media (max-width:640px){
  .cf{padding-top:40px}
  .cf-box > summary{cursor:pointer;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card)}
  .cf-box > summary::after{content:"";margin-left:auto;width:24px;height:24px;border-radius:5px;background:var(--stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230E1512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .2s ease}
  .cf-box[open] > summary::after{transform:rotate(180deg)}
  .cf-title{font-size:17px}
  .cf-bar{flex-direction:column;gap:10px;margin-top:10px}
  .cf-trigger{width:100%;max-width:none;height:44px}
  .cf-panel{position:static;width:100%;max-height:none;margin-top:6px}
  .cs-list{padding:28px 0 72px}
  .cs-hero{padding:32px 20px 0}
  .cs-hero::before,.cs-hero::after{display:none}
  .cs-title{font-size:28px;line-height:1.14}
  .cs-hero-photo{margin-top:28px}
  .cs-high{grid-template-columns:1fr;padding:4px 0 16px}
  .cs-hl{padding:24px 0}
  .cs-hl + .cs-hl::before{left:0;right:0;top:0;width:auto;height:1px;transform:none}
  .cs-hl-num{font-size:clamp(32px,10vw,44px)}
  .cs-hl-label{margin-top:12px;font-size:14.5px}
  .cs-text .cs-quote{margin:40px 0;padding:18px 0}
  .cs-text .cs-quote blockquote,.cs-text .cs-quote figcaption{padding:0 0 0 24px}
  .cs-text .cs-quote blockquote p{font-size:20px;line-height:1.25}
  .cs-text .cs-fig{margin:36px 0 28px}
  .cs-res-grid{grid-template-columns:1fr}
  .cs-res{padding:20px}
  .cs-text .cs-res.has-change .cs-res-title{padding-right:0}
  .cs-text .cs-res-change{position:static;align-self:flex-start}
  .cs-text .cs-cta{padding:28px 20px}
}

/* ===== Platform overview (/platform): pillars beside the contents rail, lead cards, the journey ===== */
.pv-body{padding:48px 0 104px}
.pv-pillar{padding:0 0 96px;scroll-margin-top:104px}
.pv-pillar:last-child{padding-bottom:0}
.pv-pillar .h-section{margin:10px 0 14px;font-size:clamp(28px,3.1vw,40px)}
.pv-pillar>.lede{margin:0 0 32px;max-width:40em}
.pv-lead{position:relative;border-radius:12px;overflow:hidden;color:var(--ink)}
.pv-lead.lime{background:var(--lime)}.pv-lead.sky{background:var(--sky)}.pv-lead.lilac{background:var(--lilac)}
.pv-lead.green{background:var(--green)}.pv-lead.tangerine{background:#FFB38F}.pv-lead.forest{background:var(--forest);color:var(--paper)}
.pv-lead-art{min-height:440px;border-radius:0;color:var(--ink)}  /* every screen in the art is light, even on the forest card */
.pv-lead-art .ui{box-shadow:0 14px 32px rgba(14,21,18,.12)}
.pv-lead-foot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:end;padding:32px 40px 36px}
.pv-lead-foot::before,.pv-lead-foot::after{content:"";position:absolute;top:0;width:22px;height:22px;border-radius:50%;background:var(--paper);z-index:1}
.pv-lead-foot::before{left:0;transform:translate(-50%,-50%)}
.pv-lead-foot::after{right:0;transform:translate(50%,-50%)}
.pv-lead-foot h3{margin:0 0 8px;font:700 clamp(22px,2.3vw,28px)/1.2 var(--display)}
.pv-lead-foot p{margin:0;max-width:34em;font-size:15.5px;line-height:1.55}
.pv-lead-foot .fplan{margin-top:10px;color:var(--ink)}
.pv-lead.forest .fplan{color:var(--ink-soft)}
.pv-pillars{container:pv-col/inline-size}
/* the small cards stay 300px or wider (the kit thumbs are drawn for the 300px .fmcard): three across from a 940px
   column, two across below it with an odd last card spanning the row, one across under 620px. A lone card, or an
   odd last card spanning two columns, lies sideways once the column is 700px wide. */
.pv-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin:20px 0 0;padding:0;list-style:none}
@container pv-col (max-width:939px){
  .pv-more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-more li:nth-child(odd):last-child{grid-column:1/-1}
}
@container pv-col (max-width:619px){.pv-more{grid-template-columns:minmax(0,1fr)}}
@container pv-col (min-width:700px){
  .pv-more li:only-child a{flex-direction:row;align-items:stretch}
  .pv-more li:only-child .fmcard-copy{flex:1;justify-content:center}
  .pv-more li:only-child .fmcard-art{flex:0 0 44%;height:auto;min-height:190px;margin:14px}
}
@container pv-col (min-width:700px) and (max-width:939px){
  .pv-more li:nth-child(odd):last-child a{flex-direction:row;align-items:stretch}
  .pv-more li:nth-child(odd):last-child .fmcard-copy{flex:1;justify-content:center}
  .pv-more li:nth-child(odd):last-child .fmcard-art{flex:0 0 44%;height:auto;min-height:190px;margin:14px}
}
/* the rail: 188px beside the pillars from 1146px (so Learn's three cards fit at 300px in the full-width wrap), and
   below that folded into its "Jump to a pillar" dropdown, like the legal contents under 900px. The rail's data-wide
   tells the contents script the same breakpoint. */
@media (min-width:1146px){.pv-body .legal-grid{grid-template-columns:188px minmax(0,1fr);gap:24px}}
@media (max-width:1145px){
  .pv-body .legal-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .legal-toc.pv-rail{position:static}
  .legal-toc.pv-rail details{background:var(--stone);border-radius:var(--r-card)}
  .legal-toc.pv-rail summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;cursor:pointer;list-style:none;font:700 16px/1.3 var(--display)}
  .legal-toc.pv-rail summary::-webkit-details-marker{display:none}
  .legal-toc.pv-rail summary::after{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%20stroke%3D%22white%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/13px no-repeat}
  .legal-toc.pv-rail details[open] summary::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%2012h14%22%20stroke%3D%22white%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E")}
  .legal-toc.pv-rail .legal-toc-title{display:none}
  .legal-toc.pv-rail ol{margin:0 18px 16px;border-left:0}
  .legal-toc.pv-rail a{margin-left:0;padding:9px 0;border-left:0;border-top:1px solid var(--line)}
}
.pv-journey-more{margin:36px 0 0;text-align:center}
.rroles+.rroles{padding-top:0}
.gstack-logos svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.pv-journey .steps{padding:0}}
@media (max-width:700px){
  .pv-body{padding:24px 0 72px}
  .pv-pillar{padding-bottom:64px}
  .pv-pillar>.eyebrow,.pv-pillar>.h-section,.pv-pillar>.lede{text-align:center;margin-left:auto;margin-right:auto}
  .pv-pillar>.eyebrow{display:flex;justify-content:center}
  .pv-lead-art{min-height:0}
  .pv-lead-foot{grid-template-columns:1fr;padding:28px 24px;text-align:center}
  .pv-lead-foot p{margin-left:auto;margin-right:auto}
  .pv-lead-foot .btn{justify-self:center}
}
/* ===== Integrations (/integrations): filter bar, type groups, cards, the ask band ===== */
.ig-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 0 48px}
.ig-bar[hidden]{display:none}
.ig-types{margin:0}
.ig-types button span{margin-left:4px;opacity:.55}
.ig-types button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.ig-search{width:min(100%,320px)}
.ig-group:not([hidden])~.ig-group{margin-top:64px}
.ig-group{scroll-margin-top:104px}
.ig-group[hidden],.ig-item[hidden]{display:none}
.ig-dir .section-head .lede{margin-top:14px}
.ig-item{display:flex}
.ig-item>.ig-card{flex:1 1 auto}
.ig-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 24px;padding-top:20px;border-top:1px solid var(--line)}
.ig-group-head h3{margin:0;font:700 clamp(22px,2.3vw,28px)/1.2 var(--display)}
.ig-group-head p{margin:0;font-size:15px;color:var(--slate)}
.ig-card{min-height:0;border-radius:var(--r-card);background:var(--stone)}
.ig-card .lcard-ico,.ig-logo{width:64px;height:64px;border-radius:var(--r-card)}
.ig-card .lcard-ico svg{width:28px;height:28px}
.ig-logo{display:grid;place-items:center;border:1px solid var(--line);background:var(--paper)}
.ig-logo img{display:block;width:40px;height:40px;object-fit:contain}
.ig-card h4{margin:22px 0 8px;font:700 20px/1.25 var(--display)}
.ig-card p{margin:0 0 16px}
.ig-card .ig-plan{margin:0 0 22px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.ig-plan b{display:block;margin:0 0 4px;font:700 11px/1.2 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.ig-empty a{color:var(--link);font-weight:500}
.ig-marks{margin:56px 0 0;max-width:72ch;font-size:12.5px;line-height:1.5;color:var(--slate)}
.ig-api{padding-top:0}
.ig-ask-sec{padding:0 0 96px}
.ig-ask{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding:44px 52px}
.ig-ask .h-section{margin:8px 0 12px}
.ig-ask p:not(.eyebrow){margin:0;max-width:40em;color:var(--slate)}
@media (max-width:700px){
  .ig-bar{flex-direction:column;align-items:stretch}
  .ig-types{justify-content:center}
  .ig-search{width:100%}
  .ig-group-head{justify-content:center;text-align:center}
  .ig-ask{grid-template-columns:1fr;padding:36px 24px;text-align:center}
  .ig-ask .btn{justify-self:center}
}
/* the homepage's integrations panel, drawn from the same list (src/partials/integrations-panel.mjs): each item's line
   icon on its type's colour, where the old panel had brand logos */
.iicon.ig-ico{color:var(--ink)}
.iicon.ig-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iicon.ig-ico.lime{background:var(--lime)}.iicon.ig-ico.tangerine{background:var(--tangerine)}.iicon.ig-ico.lilac{background:var(--lilac)}.iicon.ig-ico.sky{background:var(--sky)}

/* Analytics consent banner: shown only when a GA measurement ID is set and the visitor hasn't chosen yet */
.consent{position:fixed;right:16px;bottom:16px;z-index:60;max-width:420px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 12px 40px rgba(14,21,18,.18)}
.consent[hidden]{display:none}
.consent p{margin:0 0 14px;font-size:14px;line-height:1.55}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:10px;justify-content:flex-end}
.consent-actions .btn{min-height:40px}
@media (max-width:560px){.consent{left:12px;right:12px;bottom:12px;max-width:none}.consent-actions .btn{flex:1}}
[data-consent-reset][hidden]{display:none}

/* ===== es-ES ===== */
/* The Spanish site (/es/, <html lang="es">). Phones hide the "Ver " of the announcement bar's "Ver cómo funciona", so
   the button starts on its first letter there: "Cómo funciona". */
@media (max-width:700px){html[lang="es"] .announce .more::first-letter{text-transform:uppercase}}
/* The bar's long Spanish message ("Alertas por WhatsApp sobre incidencias durante la estancia, para recepción") needs
   about 800px, so up to 860px it shows its short form, "Alertas por WhatsApp", as phones do, instead of being cut off. */
@media (max-width:860px){html[lang="es"] .announce .msg-long{display:none}}
/* Mock-card headings (.phone-head, set solid at line-height 1) wrap to two or three lines in Spanish on phones: give the
   lines room so they don't touch. One-line headings only grow by 2px. */
html[lang="es"] .ui .phone-head{line-height:1.2}

/* ===== Every translation (all languages but English) ===== */
/* The Spanish rules above, for every language: phones hide the lead-in of the announcement bar's button ("Voir "
   comment ça marche), so it starts on its first letter; below 861px the bar shows its short message, as phones do,
   instead of cutting the long one off; mock-card headings that wrap get room between their lines. */
@media (max-width:700px){html:not([lang|="en"]) .announce .more::first-letter{text-transform:uppercase}}
@media (max-width:860px){html:not([lang|="en"]) .announce .msg-long{display:none}}
html:not([lang|="en"]) .ui .phone-head{line-height:1.2}
/* The homepage hero's tabs: site.js ("A translation's tabs run longer") tightens a row that wraps on a desktop layout */
html:not([lang|="en"]) .tags-track{gap:var(--tag-gap,6px)}
html:not([lang|="en"]) .tags button{padding-left:var(--tag-pad,13px);padding-right:var(--tag-pad,13px);font-size:var(--tag-size,12px)}
/* A word longer than its line is broken rather than left to run out of its box (only then: words that fit never break).
   Small capitals in narrow columns (the pricing case study's bars, the homepage stats, the feature pages' figures) and
   the pricing cards' feature groups may also hyphenate their long compound words ("RECENSIONS-SAJTER",
   "Bewertungs-management"); words under 12 letters stay whole. Big type that is wider than its box is scaled down instead, by assets/site.js ("Words wider than their box"). */
html:not([lang|="en"]) body{overflow-wrap:break-word}
/* ...except in the mock screens, which keep the English app's own labels and layout, and in big type, which site.js
   scales down instead of breaking a word in two */
html:not([lang|="en"]) :is(.ui,.kscene,.kwin,.kphone,.kposter,.kthumb,.kcode,.fhero-art,.rgfx,.fcomp,.fcard-art,.fspot-art,.fmcard-art,.gband-shot,.gcard-shot,.stage,.views,.crop,.rmap,.rbars){overflow-wrap:normal}
html:not([lang|="en"]) :is(.statement,.h-section,main h1,main h2,.rc-stat b,.split-facts b,.plan-price .amt){overflow-wrap:normal}
html:not([lang|="en"]) :is(.case-bar span,.rc-stat span,.fstats span,.plan-groups summary){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5}
/* Pricing: a plan whose limit is a word ("Unlimited") keeps the word whole, and its label drops below it when the two
   don't fit side by side (centred on phones, like the rest of the card). On desktop a card's column never grows past the
   card for that word ("Απεριόριστες", "Không giới hạn"), so the word is scaled to the card instead of being cut off. */
html:not([lang|="en"]) .plan{grid-template-columns:minmax(0,1fr)}
html:not([lang|="en"]) .plan-price.is-word{flex-wrap:wrap;row-gap:6px}
html:not([lang|="en"]) .plan-price.is-word .amt{white-space:nowrap}
@media (max-width:700px){html:not([lang|="en"]) .plan-price.is-word{justify-content:center;text-align:center}}

/* ===== Security & Compliance page ===== */
/* /security reuses the feature hero and benefits, the legal contents list and text, the /legal hub's cards and the FAQ.
   Its document cards take h3 (the band has its own h2), styled like the hub's h2; the band's lede gets the usual gap. */
.security-page .lcard h3{margin:26px 0 10px;font:700 20px/1.25 var(--display)}
.sec-docs .section-head .lede{margin-top:14px}

/* ===== Customers: the venue cards (profiles: what each venue is, no figures), the premium hotels before the stories
   and the directory after them, and the brand card that stands in for a photo (the venue's own logo and colours from
   Monty, never a stock image) ===== */
.cs-list-title{margin:0 0 14px}
.cp-jump{margin:32px 0 0}
.cp [hidden]{display:none!important}
.cp{padding:0 0 128px}
.cp.is-hotels{padding:40px 0 88px}   /* between the filters and the stories, the same 128px gap as before the directory */
.cp-intro{max-width:46em;margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--slate)}
.cp-count{margin:0 0 28px;font:600 13px/1.3 var(--body);color:var(--slate)}
.cp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px;margin:0;padding:0;list-style:none}
.cp-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding-bottom:20px;border-bottom:1px solid rgba(14,21,18,.2)}
.cp-card .post-meta{margin-top:6px}
.cp-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--stone)}
.cp-img{display:block;width:100%;height:100%;object-fit:cover}
.cp-name{font:700 18px/1.25 var(--display);letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.cp-name:focus{outline:none}
.cp-name:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cp-desc{margin:0;font-size:14.5px;line-height:1.5;color:var(--slate);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.cp-since{margin:0;font:600 12.5px/1.3 var(--body);color:var(--ink)}
.cp-feats{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.cp-feats li{font-size:12px;line-height:1;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.cp-site{margin-top:auto;padding-top:6px;align-self:flex-start}
.cp-more{display:flex;width:max-content;margin:40px auto 0;border:1.5px solid var(--ink);color:var(--ink)}
@media (hover:hover){.cp-more:hover{background:var(--ink);color:var(--paper)}}
.cp-note{margin:32px 0 0;font-size:13px;line-height:1.5;color:var(--slate)}
@media (max-width:1099px){.cp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:799px){.cp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.cp-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:640px){.cp{padding-bottom:72px}.cp.is-hotels{padding:28px 0 44px}}

.cs-brand{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;background:var(--bb);color:var(--bf);box-shadow:inset 0 0 0 1px rgba(14,21,18,.06);overflow:hidden}
/* the logo sits on a white plate, whatever the venue's colour; the plate takes the logo's size (never a percentage
   height, which a logo would overflow), and the logo is reset from the story hero's photo rules (.cs-hero-photo img) */
.cs-brand-plate{display:grid;place-items:center;max-width:70%;padding:14px 18px;border-radius:var(--r-card);background:#fff;box-shadow:0 1px 3px rgba(14,21,18,.1)}
.cs-brand-plate img{display:block;width:auto;height:auto;max-width:100%;max-height:72px;object-fit:contain;aspect-ratio:auto;background:none;border-radius:0}
/* a light logo (white on transparent, measured when the site pulls it) would vanish on white: an ink plate instead */
.cs-brand-plate.is-dark{background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.cs-brand-name{font:900 clamp(20px,2.2vw,28px)/1.02 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-align:center;text-wrap:balance;padding:0 9%;overflow-wrap:anywhere}
/* the name scales with the card itself (a one-column phone card is wider than a desktop tile), and a long name
   (over 30 characters, is-long) steps down so it stays inside the card */
.cs-brand{container-type:inline-size}
@supports (font-size:1cqi){.cs-brand-name{font-size:clamp(18px,9cqi,34px)}.cs-brand.is-long .cs-brand-name{font-size:clamp(15px,6.6cqi,26px)}}
.cs-brand-place{font:700 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
/* so a card of flat colour sits beside the photos without looking like a swatch: a soft light and shade mixed from
   the venue's own colour (never an image; browsers without color-mix keep the flat colour), a thin frame inside the
   edge and the town between two short rules */
.cs-brand{background:radial-gradient(85% 115% at 0% 0%,color-mix(in srgb,var(--bb),#fff 14%),transparent 62%),radial-gradient(85% 115% at 100% 100%,color-mix(in srgb,var(--bb),#000 9%),transparent 62%),var(--bb)}
.cs-brand::before{content:"";position:absolute;inset:9px;border:1px solid currentColor;border-radius:4px;opacity:.2;pointer-events:none}
.cs-brand-place{display:flex;align-items:center;gap:9px;padding:0 9%;text-align:center}
.cs-brand-place::before,.cs-brand-place::after{content:"";flex:0 0 16px;height:1px;background:currentColor;opacity:.55}
.cs-card-media .cs-brand{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);transition:filter .3s ease}
@media (hover:hover){.post-card a:hover .cs-brand{filter:brightness(.92)}}
/* with no photo the story hero is a shorter band (a full photo frame of flat colour reads as a missing image); phones
   keep a card-shaped frame so the name and logo have room */
.cs-hero-photo .cs-brand.is-hero{position:relative;aspect-ratio:1062/340;border-radius:var(--r-card);gap:14px}
@media (max-width:700px){.cs-hero-photo .cs-brand.is-hero{aspect-ratio:16/9}}
.cs-brand.is-hero .cs-brand-name{font-size:clamp(34px,5vw,64px)}
.cs-brand.is-hero.is-long .cs-brand-name{font-size:clamp(24px,3.6vw,46px)}
.cs-brand.is-hero .cs-brand-place{font-size:clamp(11px,1.2vw,14px);gap:clamp(9px,1.2vw,14px)}
.cs-brand.is-hero .cs-brand-place::before,.cs-brand.is-hero .cs-brand-place::after{flex-basis:clamp(16px,2.6vw,32px)}
.cs-brand.is-hero::before{inset:clamp(10px,1.8vw,20px)}
.cs-brand.is-hero .cs-brand-plate{padding:clamp(12px,2.4vw,28px) clamp(16px,3.2vw,40px)}
.cs-brand.is-hero .cs-brand-plate img{max-height:clamp(72px,16vw,190px)}