/* ==========================================================================
   we53 — the one stylesheet for Home, For Business and the legal pages. beside.com visual system on the dark canvas.
   Decisions of 10 Sep 2026 (TECH-SPEC_EN.md): dark background, animations
   limited to section 4.3. Since 6 Oct 2026 the only accent colour is blue; green is gone from the site.
   ========================================================================== */

/* ---------- Fonts: Inter 4.0 variable, forced to the Display cut (opsz 32) */
/* WOFF2 subsets (Latin + Greek, all axes) made with pyftsubset from fonts/InterVariable*.ttf; ~200 KB each
   instead of ~880 KB. The italic is never preloaded: it downloads only if an italic glyph is ever rendered. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens (spec 4.1) */
:root {
  /* Light theme since 24 Sep 2026: canvas = Alsu's #DFDFE1 (Pantone 179-2 C). --fg is the ink colour as
     RGB, so tints of it (hover washes, hairlines, the heading sweep) follow the theme. */
  --fg:          17,17,19;
  --canvas:      #DFDFE1;                 /* main background */
  --canvas-rgb:  223,223,225;
  --card:        #F4F4F5;                 /* cards, chips, fields */
  --card-hover:  #FFFFFF;
  --ink:         rgba(var(--fg),.92);     /* headings and body */
  --muted:       rgba(var(--fg),.66);     /* body, captions (Framer Text Muted) */
  --faint:       rgba(var(--fg),.56);     /* subtle text (Framer Text Subtle) */
  --hair:        rgba(var(--fg),.1);      /* borders, dividers */
  --hair-hover:  rgba(var(--fg),.2);

  /* brand colour since 25 Sep 2026 (Alsu): blue #164384; the -deep shade is hover/press.
     Green (#2B7C1F) was retired on 6 Oct 2026: nothing on the site is green any more except the logo bolt and the
     sustainability leaf (Alsu: "it's a leaf"); blue is the one accent. */
  --blue:        #164384;
  --blue-rgb:    22,67,132;
  --blue-deep:   #0F2F5E;
  --note:        #C5C5C9;                 /* "What you get" cards on For Business: the canvas, two steps darker (Alsu, 6 Oct) */

  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-press:    cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: "Inter", system-ui, sans-serif;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  background: var(--canvas);
  color: var(--ink);
  color-scheme: light;
}
body { margin: 0; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
section { scroll-margin-top: 96px; }
::selection { background: rgba(var(--blue-rgb),.24); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Type scale (Framer text styles: Display / Heading 2 / Heading 3 / Body / Small / Label / Stat) */
h1 { font-weight: 700; font-size: 44px; line-height: .98; letter-spacing: -.045em; max-width: 720px; }
h2 { font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -.035em; max-width: 620px; }
h3 { font-weight: 600; font-size: 21px; line-height: 1.2;  letter-spacing: -.02em; }
p  { font-size: 16px; line-height: 1.55; letter-spacing: -.005em; }
.lead { font-size: 17px; letter-spacing: -.01em; }
@media (max-width: 399px) { h1 { font-size: 38px; } }
@media (min-width: 768px) {
  h1 { font-size: 72px; }
  h2 { font-size: 46px; }
  .lead { font-size: 19px; }
}
.accent { color: var(--blue); }   /* the one accent on a screen; the home H1 no longer uses it (Alsu, 6 Oct: black only) */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .11em; line-height: 1; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.small { font-size: 13px; font-weight: 500; line-height: 1.35; }
.caption { font-size: 13px; font-weight: 500; color: var(--faint); text-align: center; margin-bottom: 20px; }   /* one row-gap above the venue names */

/* ---------- Buttons and links */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 24px; border-radius: 9999px;
  background: var(--blue); color: #fff;
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  transition: background-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.btn svg { transition: transform .18s var(--ease-out); }
@media (hover: hover) {
  .btn:hover { background: var(--blue-deep); transform: translateY(-1px); }
  .btn:hover svg { transform: translateX(2px); }
}
.btn:active { transform: scale(.96); transition-duration: .1s; transition-timing-function: var(--ease-press); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 24px; border-radius: 9999px;
  background: var(--card); color: var(--ink); border: 1px solid var(--hair);
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .18s var(--ease-out);
}
@media (hover: hover) { .btn-ghost:hover { border-color: var(--hair-hover); background: var(--card-hover); } }
.btn-ghost:active { transform: scale(.96); transition-duration: .1s; transition-timing-function: var(--ease-press); }

.link-underline {
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(var(--fg),.25);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color .18s var(--ease-out);
}
@media (hover: hover) { .link-underline:hover { text-decoration-color: var(--ink); } }

.nav-link { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); transition: color .15s var(--ease-out); }
.nav-link[aria-current="page"] { color: var(--faint); }
@media (hover: hover) { .nav-link:not([aria-current]):hover { color: var(--muted); } }

/* ---------- "Grab a power bank" (Uiverse.io button by adamgiebl, ported): the arrow sits
   in a white disc on the right; on hover the disc slides open across the whole pill. */
.btn-grab { position: relative; overflow: hidden; height: 52px; padding: 0 60px 0 24px; }
.btn-grab .btn-grab-label { position: relative; z-index: 0; }
.btn-grab .icon {
  position: absolute; top: 5px; right: 5px; z-index: 1;
  height: 42px; width: 42px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--blue);
  box-shadow: 0 2px 10px rgba(var(--blue-rgb),.4);
  transition: width .3s var(--ease-out), transform .1s var(--ease-press);
}
.btn-grab .icon svg { transition: transform .3s var(--ease-out); }
@media (hover: hover) {
  .btn-grab:hover { background: var(--blue); transform: none; }
  .btn-grab:hover .icon { width: calc(100% - 10px); }
  .btn-grab:hover .icon svg { transform: translateX(2px); }
}
.btn-grab:active { transform: none; }
.btn-grab:active .icon { transform: scale(.95); }

/* ---------- Chip */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border-radius: 9999px;
  color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1;
  /* liquid glass: a translucent, slightly frosted surface with a soft highlight on the top edge */
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4));
  border: 1px solid rgba(var(--fg),.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(var(--fg),.04), 0 8px 24px rgba(var(--fg),.08);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.chip::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.1) 100%);
}
.chip-label { font-size: 13px; font-weight: 600; letter-spacing: .11em; color: var(--ink); white-space: nowrap; }
@media (max-width: 359px) { .chip-label { font-size: 12px; letter-spacing: .06em; } }
.chip-label svg { color: var(--ink); }

/* ---------- Language dropdown (spec 3.2). <details> so it works without JS. */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 9999px;
  font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink);
  transition: background-color .15s var(--ease-out);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary .chev { transition: transform .2s var(--ease-out); color: var(--muted); }
.lang[open] summary .chev { transform: rotate(180deg); }
@media (hover: hover) { .lang summary:hover { background: rgba(var(--fg),.06); } }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--hair); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  animation: menu-in .18s var(--ease-out) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-menu a, .lang-menu span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--ink);
  transition: background-color .15s var(--ease-out);
}
.lang-menu a[aria-current="true"] { background: rgba(var(--fg),.06); }
@media (hover: hover) { .lang-menu a:hover { background: rgba(var(--fg),.08); } }
.lang-menu span { color: var(--muted); cursor: default; }
.lang-menu small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }

/* ---------- Progressive blur (Skiper UI 41): a short strip at the top of the viewport that
   blurs and fades whatever scrolls under the nav. Gradient + mask + backdrop blur. */
.pblur {
  position: fixed; top: 0; left: 0; width: 100%; height: 180px; z-index: 40; pointer-events: none; user-select: none;
  background: linear-gradient(to bottom, rgba(var(--canvas-rgb),.75), rgba(var(--canvas-rgb),0));
  -webkit-mask-image: linear-gradient(to bottom, #000 15%, transparent);
          mask-image: linear-gradient(to bottom, #000 15%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ---------- Header: a floating pill, frosted, always. */
.header { position: sticky; top: 0; z-index: 50; padding: 12px 16px; pointer-events: none; }
.nav {
  pointer-events: auto; position: relative;
  max-width: 1360px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 8px 8px 8px 22px; border-radius: 9999px;
  background: rgba(255,255,255,.72); border: 1px solid var(--hair);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.nav-logo { display: flex; flex: 0 0 auto; }
.nav-logo img { width: 63px; height: 22px; max-width: none; object-fit: contain; flex: none; }
.nav-links { display: none; gap: 28px; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (min-width: 768px) {
  .header { padding: 16px 24px; }
  .nav { gap: 32px; padding: 8px 8px 8px 28px; }
  .nav-links { display: flex; }
}
/* tablets: the centred links would run under the right-hand controls, so they flow in the row instead */
@media (min-width: 768px) and (max-width: 899px) { .nav-links { position: static; transform: none; margin: 0 auto; gap: 20px; } .nav { gap: 20px; } }

/* phones: keep the pill inside the screen */
@media (max-width: 479px) {
  .nav { padding: 6px 6px 6px 14px; gap: 8px; }
  .nav .btn { height: 44px; font-size: 15px; }
  .btn-grab { padding: 0 50px 0 16px; }
  .btn-grab .icon { top: 4px; right: 4px; width: 36px; height: 36px; }
  .lang summary { padding: 8px; }
  .lang summary > span, .lang summary .chev { display: none; }
}
/* very small phones: the CTA keeps only its disc, the label lives in aria-label */
@media (max-width: 399px) {
  .btn-grab { width: 44px; padding: 0; justify-content: center; }
  .btn-grab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---------- Home hero ("Hero 1" layout from React Bits Pro, rebuilt in our tokens): title and two
   buttons on the left; a big rounded venue photo on the right with an arrow tile set into a notch cut
   out of its bottom-right corner. Stacks to one column (text first) under 960px.
   Markup: src/components/Hero.jsx. */
.hero1 { --r: 36px; --gap: 14px; --tile: 124px; --tile-w: 196px; padding: 32px 0 48px; } /* <main> already clears the nav */
.hero1-grid { display: grid; gap: 40px; align-items: center; }
.hero1-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero1-copy h1 { max-width: 640px; }
.hero1-sub { margin-top: 20px; max-width: 520px; }
/* the second photo, under the text (desktop only) */
.hero1-photo2 { display: none; }
.hero1-photo2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--t-img2-pos, 64% 58%); border-radius: calc(var(--r) - 8px); }
/* the photo card */
.hero1-media { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.hero1-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--t-img1-pos, 42% 60%); /* keeps the station in frame at every card shape */
  /* zoom inside the same frame (Alsu, 25 Sep 2026: "the picture itself bigger"), centred on the focus point */
  transform: scale(var(--t-img1-zoom, 1.25)); transform-origin: var(--t-img1-pos, 42% 60%); }
/* the notch: a canvas-coloured block in the corner with a rounded inner corner, plus two concave
   fillets (radial gradients) so the photo's edge curves smoothly into it on both sides */
.hero1-notch {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  padding: var(--gap) 0 0 var(--gap);
  background: var(--canvas); border-top-left-radius: var(--r);
}
.hero1-notch::before, .hero1-notch::after {
  content: ""; position: absolute; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--canvas) var(--r));
}
.hero1-notch::before { right: 0; bottom: 100%; }
.hero1-notch::after  { right: 100%; bottom: 0; }
/* "Find nearest station": white tile in the notch; map.js turns the click into a location lookup */
.hero1-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 10px;
  grid-template-areas: "pin arrow" "kicker kicker" "label label"; grid-template-rows: 1fr auto auto; row-gap: 2px;
  width: var(--tile-w); height: var(--tile); padding: 16px; border-radius: calc(var(--r) - 8px);
  background: #fff; color: var(--ink);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.hero1-tile-pin { grid-area: pin; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; }
.hero1-tile-arrow { grid-area: arrow; justify-self: end; align-self: start; color: var(--muted); }
.hero1-tile-kicker { grid-area: kicker; font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.2; }
.hero1-tile-kicker:empty { display: none; }
.hero1-tile[data-state="ready"] .hero1-tile-label { font-size: 26px; letter-spacing: -.03em; }
.hero1-tile[data-state="ready"] .hero1-tile-pin { background: var(--blue-deep); }
.hero1-tile[data-state="busy"] .hero1-tile-pin { animation: we53-tile-pulse 1.1s ease-in-out infinite; }
@keyframes we53-tile-pulse { 50% { transform: scale(.86); opacity: .7; } }
.hero1-tile[data-state="error"] .hero1-tile-kicker { color: #B3261E; }
.hero1-tile-label { grid-area: label; align-self: end; font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.hero1-tile svg { transition: transform .25s var(--ease-out); }
/* Fill on hover / press (same idea as the "Grab a power bank" disc that slides open): a blue circle grows
   out of the pin until it covers the tile, and the text turns white. --pin-c is the pin's centre. */
.hero1-tile { --pin-c: 36px; position: relative; overflow: hidden; isolation: isolate; }
.hero1-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue);
  clip-path: circle(0 at var(--pin-c) var(--pin-c)); transition: clip-path .45s var(--ease-out);
}
.hero1-tile-pin, .hero1-tile-kicker, .hero1-tile-label, .hero1-tile-arrow { transition: color .25s var(--ease-out), background-color .25s var(--ease-out); }
.hero1-tile:active::before, .hero1-tile:focus-visible::before { clip-path: circle(150% at var(--pin-c) var(--pin-c)); }
.hero1-tile:active :is(.hero1-tile-kicker, .hero1-tile-label, .hero1-tile-arrow),
.hero1-tile:focus-visible :is(.hero1-tile-kicker, .hero1-tile-label, .hero1-tile-arrow) { color: #fff; }
.hero1-tile:active .hero1-tile-pin, .hero1-tile:focus-visible .hero1-tile-pin { background: var(--blue-deep); }
@media (hover: hover) {
  .hero1-tile:hover::before { clip-path: circle(150% at var(--pin-c) var(--pin-c)); }
  .hero1-tile:hover :is(.hero1-tile-kicker, .hero1-tile-label, .hero1-tile-arrow) { color: #fff; }
  .hero1-tile:hover .hero1-tile-pin { background: var(--blue-deep); }
  .hero1-tile:hover .hero1-tile-arrow svg { transform: translate(2px, -2px); }
}
.hero1-tile:active { transform: scale(.97); transition: transform .1s var(--ease-press); }

@media (min-width: 768px) { .hero1 { padding-top: 48px; } }
/* Desktop sizes are CSS variables with defaults, so they can be tuned live: open the page with ?tune
   (public/tune.js) and the panel sets the --t-* values inline on .hero1. Copy its output here to keep them. */
@media (min-width: 960px) {
  .hero1 { --r: 40px; --gap: 16px; --tile: 150px; --tile-w: 230px; padding: 24px 0 64px; }
  .hero1-grid { grid-template-columns: minmax(0, var(--t-left, 1fr)) minmax(0, var(--t-right, 1fr)); gap: var(--t-colgap, 56px); }
  /* both columns stretch to one height: the card fills the first screen under the nav (or grows with the
     left column if that is taller), the left column pins the title to the top and the photo to the bottom */
  .hero1-grid { align-items: stretch; }
  .hero1-media { aspect-ratio: auto; height: auto; min-height: var(--t-card-h, clamp(540px, calc(100vh - 150px), 860px)); }
  .hero1-copy { padding-top: 12px; }
  .hero1-copy h1 { font-size: var(--t-title, 64px); max-width: none; }
  .hero1 .hero1-sub { font-size: var(--t-sub, 22px); }
  /* the photo fills the rest of the left column: left edge on the text line, bottom on the card's bottom */
  .hero1-photo2 { display: block; position: relative; flex: 1 1 auto; align-self: stretch;
    min-height: var(--t-photo2-min, 240px); margin-top: var(--t-photo2-gap, 40px); }
}
@media (min-width: 1200px) { .hero1-copy h1 { font-size: var(--t-title, 80px); } }
/* short laptop screens (≤800px tall): a smaller title so the photo keeps a decent height on one screen */
@media (min-width: 960px) and (max-height: 800px) {
  .hero1 .hero1-copy h1 { font-size: var(--t-title, 56px); }
  .hero1 .hero1-sub { font-size: var(--t-sub, 19px); margin-top: 14px; }
  .hero1-photo2 { margin-top: var(--t-photo2-gap, 28px); }
}
@media (max-width: 479px) {
  .hero1 { --r: 28px; --gap: 10px; --tile: 104px; --tile-w: 172px; }
  .hero1-tile { padding: 12px; gap: 6px; --pin-c: 28px; } .hero1-tile-pin { width: 32px; height: 32px; } .hero1-tile-label { font-size: 16px; } .hero1-tile-kicker { font-size: 11px; }
  .hero1-tile[data-state="ready"] .hero1-tile-label { font-size: 20px; }
}
.hero-sub { margin-top: 22px; max-width: 620px; color: rgba(var(--fg),.8); font-size: 19px; line-height: 1.55; letter-spacing: -.01em; }
@media (min-width: 768px) { .hero-sub { font-size: 22px; margin-top: 20px; } }

/* hero entrance sequence (spec 4.3 "hero on load"): starts once fonts are ready */
html.js .hero-intro { opacity: 0; }
html.js.fonts-ready .hero-intro { animation: hero-fade .5s var(--ease-out) both; }
html.js.fonts-ready .hero-intro--chip  { animation-duration: .45s; animation-delay: 0s; }
html.js.fonts-ready .hero-intro--title { animation-duration: .5s;  animation-delay: .18s; }
html.js.fonts-ready .hero-intro--copy  { animation: hero-lift .6s cubic-bezier(.22,1.15,.36,1) .4s both; }
html.js .hero1-photo2 { opacity: 0; }
html.js.fonts-ready .hero1-photo2 { animation: hero-lift .7s var(--ease-out-soft) .5s both; }
@keyframes hero-fade { from { opacity: 0 } to { opacity: 1 } }
/* Safety net: if fonts or main.js never arrive, everything fades in anyway after a few seconds. */
@keyframes show-anyway { to { opacity: 1; transform: none; } }
html.js:not(.fonts-ready) .hero-intro, html.js:not(.fonts-ready) .hero1-media, html.js:not(.fonts-ready) .hero1-photo2 { animation: show-anyway .5s 2.5s both; }
html.js:not(.fonts-ready) .reveal, html.js:not(.fonts-ready) .kpi { animation: show-anyway .6s 3s forwards; }
@keyframes hero-lift { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* ---------- How it works: four dark step cards (Alsu's Figma frames, 1124x1371). Number badge and caption
   are live text placed where the frames had them; cqi units keep them in proportion at any card width.
   Phones: a swipe row with the next card peeking in; 640px: 2x2; 1024px: one row of four. */
.how { padding-top: 56px; }
.how-grid { list-style: none; margin: 0 -24px; padding: 0 24px; display: grid; gap: 12px;
  grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px; scrollbar-width: none; }
.how-grid::-webkit-scrollbar { display: none; }
.how-card { scroll-snap-align: start; }
@media (min-width: 640px) { .how-grid { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 16px; } }
@media (min-width: 1024px) { .how-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how-card { position: relative; container-type: inline-size; }
.how-card img { width: 100%; height: auto; }
.how-num {
  position: absolute; left: 8.6cqi; top: 8.6cqi; width: 15.9cqi; height: 15.9cqi; border-radius: 4.9cqi;
  display: grid; place-items: center; background: #242424; color: #fff;
  font-size: 6.4cqi; font-weight: 400; font-variant-numeric: tabular-nums;
}
.how-label {
  position: absolute; left: 8.7cqi; right: 7cqi; bottom: 7.8cqi; margin: 0;
  color: #fff; font-size: 8.8cqi; font-weight: 400; line-height: 1.03; letter-spacing: -.02em;
}
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the photo card: fades in and lifts on load, a beat after the title */
html.js .hero1-media { opacity: 0; transform: translateY(32px); }
html.js.fonts-ready .hero1-media { animation: hero-visual-in 1.2s var(--ease-out-soft) .35s both; }
@keyframes hero-visual-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ---------- Image fade-in (rule 10) */
img[data-fade] { opacity: 0; transition: opacity .4s var(--ease-out); }
img[data-fade].loaded { opacity: 1; }

/* ---------- Reveal on scroll (spec 4.3) */
html.js .reveal { opacity: 0; transform: translateY(16px); }
.reveal {
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .reveal.in-view, .reveal.in-view { opacity: 1; transform: none; }

/* ---------- Heading colour sweep, muted to white letter by letter (spec 4.3) */
.sweep .w { display: inline-block; white-space: nowrap; }
.sweep .ch { display: inline-block; color: var(--faint); }
.sweep.in-view .ch { animation: title-sweep .6s var(--ease-out) forwards; animation-delay: calc(var(--i) * 18ms); }
@keyframes title-sweep { from { color: rgba(var(--fg),.3); } to { color: rgba(var(--fg),.92); } }


/* ---------- Cards (recipe F, dark) */
.card { border: 1px solid var(--hair); border-radius: 20px; background: var(--card);
        transition: border-color .18s var(--ease-out); }
.card img { transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .card:hover { border-color: var(--hair-hover); }
  .card:hover .shot img { transform: scale(1.04); }
}

/* ---------- Numbers */
.num { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }  /* black since 6 Oct 2026 (Alsu), was blue, before that green */
@media (min-width: 768px) { .num { font-size: 44px; } }


/* ---------- Sections and containers */
.section { padding: 80px 0; }
.section-tight { padding: 40px 0; }
@media (min-width: 768px) { .section { padding: 112px 0; } .section-tight { padding: 56px 0; } }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; }
.section-head h2 { margin: 0 auto; }
.section-head .lead { margin-top: 16px; max-width: 620px; }
.lead { color: var(--muted); }
.lead strong { font-weight: 500; color: var(--ink); }
.muted { color: var(--muted); }
@media (min-width: 768px) { .section-head { margin-bottom: 56px; } }

/* ---------- Coverage: bento KPI grid (React Bits "Bento 6" pattern) */
.coverage { position: relative; overflow: hidden; }
.halftone {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.coverage .container { position: relative; z-index: 1; }
.coverage-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .coverage-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
}

.bento { padding: 24px; border-radius: 28px; background: var(--card); border: 1px solid var(--hair);
         display: flex; flex-direction: column; transition: border-color .18s var(--ease-out); }
@media (hover: hover) { .bento:hover { border-color: var(--hair-hover); } }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
@media (max-width: 399px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  padding: 16px; border-radius: 18px;
  background: rgba(255,255,255,.5); border: 1px solid var(--hair);
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.bento.in-view .kpi { opacity: 1; transform: none; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
            border-radius: 8px; background: rgba(var(--fg),.06); color: var(--muted); }
.kpi-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 9999px;
            border: 1px solid var(--hair); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
            white-space: nowrap; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.kpi-label { margin-top: 28px; font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi .num { margin-top: 6px; }
.bento-copy { padding: 4px 4px 0; }
.bento-copy h2 { font-size: 28px; max-width: 460px; }
@media (min-width: 768px) { .bento-copy h2 { font-size: 34px; } }
.bento-copy .lead { margin-top: 14px; font-size: 16px; max-width: 500px; }
.bento-copy .lead strong { font-weight: 600; color: var(--ink); }

.bento-map { padding: 0; overflow: hidden; }
.bento-map .we53-map { border: 0; border-radius: 0; flex: 1; display: flex; flex-direction: column; }
.bento-map .we53-map__canvas { flex: 1; min-height: 300px; height: auto; }

/* ---------- Venues */
.venues { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 40px; max-width: 900px; margin-inline: auto; }
.venues li { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
@media (min-width: 768px) { .venues li { font-size: 18px; } }

/* ---------- Sustainability ("Charge green" card; the leaf stays green, it is a leaf) */
.green { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; border-radius: 28px; }
@media (min-width: 768px) { .green { grid-template-columns: 3fr 2fr; align-items: center; padding: 48px; } }
.green-copy .lead { margin-top: 16px; max-width: 480px; }
.green-art { display: flex; justify-content: center; }
/* the glass leaf: a flat render given depth with perspective. Hovering starts a slow
   side-to-side sway; leaving pauses it in place so it never snaps back. */
.leaf-stage { perspective: 900px; position: relative; }
/* the shadow lives on its own flat, blurred layer under the leaf, so the 3D tilt
   never re-samples it. Two soft ellipses, blurred, read as one smooth pool. */
.leaf-stage::before {
  content: ""; position: absolute; left: 50%; top: 58%; z-index: 0;
  width: 160px; height: 90px; transform: translate(-50%, -40%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.2) 0%, rgba(0,0,0,.1) 38%, rgba(0,0,0,0) 72%),
    radial-gradient(ellipse at center, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 60%);
  filter: blur(16px);
}
.leaf {
  position: relative; z-index: 1;
  width: min(130px, 36vw); height: auto;
  transform-style: preserve-3d;
  animation: leaf-sway 1.6s var(--ease-in-out) infinite;
  animation-play-state: paused;
}
@media (hover: hover) { .leaf-stage:hover .leaf { animation-play-state: running; } }
@keyframes leaf-sway {
  0%   { transform: rotateY(0deg)   rotateZ(0deg)  translateY(0); }
  25%  { transform: rotateY(16deg)  rotateZ(5deg)  translateY(-5px); }
  75%  { transform: rotateY(-16deg) rotateZ(-5deg) translateY(-5px); }
  100% { transform: rotateY(0deg)   rotateZ(0deg)  translateY(0); }
}

/* ---------- Support: Tailark call-to-action, text only. Title, one line, one button, on the canvas. */
.cta { padding-top: 40px; }
@media (min-width: 768px) { .cta { padding-top: 56px; } }
.cta-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.cta h2 { margin-left: auto; margin-right: auto; font-size: 34px; }
@media (min-width: 768px) { .cta h2 { font-size: 46px; } }
.cta .lead { margin-top: 16px; }
.cta-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-accent { background: var(--blue); color: #fff; }
@media (hover: hover) { .btn-accent:hover { background: var(--blue-deep); } }

/* "Get support" (Uiverse.io bookmark button by vinodjangid07, ported): icon disc on the
   left; on hover the disc grows to fill the pill while the label folds away. The label keeps
   its space so the pill never changes width. */
.btn-support { position: relative; overflow: hidden; height: 52px; padding: 0 24px 0 60px; }
.btn-support .IconContainer {
  position: absolute; left: 5px; top: 5px; z-index: 2;
  width: 42px; height: 42px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fff; color: var(--blue);
  transition: width .3s var(--ease-out);
}
.btn-support .text {
  position: relative; z-index: 1; white-space: nowrap;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
@media (hover: hover) {
  .btn-support:hover { background: var(--blue); transform: none; }
  .btn-support:hover .IconContainer { width: calc(100% - 10px); }
  .btn-support:hover .text { transform: translateX(10px); opacity: 0; }
}
.btn-support:active { transform: scale(.95); }

/* ---------- Footer */
.footer { padding: 56px 0 32px; border-top: 1px solid var(--hair); }
.footer-main { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .footer-main { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; } }
.footer-brand img { width: 75px; height: 26px; max-width: none; object-fit: contain; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer .eyebrow, .footer .signoff { color: var(--ink); }   /* footer is all black (Alsu, 6 Oct 2026): no blue column heads or sign-off */
.footer-col a { font-size: 14px; color: var(--muted); transition: color .15s var(--ease-out); }
@media (hover: hover) { .footer-col a:hover { color: var(--ink); } }
.footer-bottom { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.signoff { font-size: 13px; font-weight: 600; letter-spacing: .11em; margin-top: 14px; }



/* ==========================================================================
   For Business page
   ========================================================================== */

.flow-wrap { position: relative; }
.flow-wrap .container { position: relative; z-index: 2; }

.biz-hero { position: relative; padding: 96px 24px 40px; display: flex; align-items: center; }
/* Backdrop: near-black under the nav, easing into the canvas gray ~360px below the hero (into "Three ways")
   with an eased stop list so there is no visible band; grain on top. Reaches 200px up to sit behind the sticky header. */
.biz-hero::before, .biz-hero::after { content: ""; position: absolute; left: 0; right: 0; top: -200px; bottom: -360px; z-index: -1; pointer-events: none; }
.biz-hero::before { background: linear-gradient(180deg, #CACACE 0, #CACACE 200px, #D2D2D5 45%, #D8D8DB 70%, #DCDCDF 86%, var(--canvas) 100%); }
.biz-hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px; opacity: .3; mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
@media (min-width: 768px) { .biz-hero { padding: 120px 24px 56px; } }
@media (min-width: 1200px) { .biz-hero { padding-top: 140px; } }
.biz-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.biz-hero h1 { max-width: 900px; font-size: 40px; }
@media (min-width: 768px) { .biz-hero h1 { font-size: 64px; } }
.biz-hero .hero-sub { max-width: 720px; line-height: 1.7; }
/* "charging service" (hero) and highlighted words in section titles sit in a glass pill */
.glass-word { display: inline-flex; padding: 4px 14px; margin: 0 2px; font-size: .92em; font-weight: 600; letter-spacing: 0; color: var(--ink); vertical-align: baseline; white-space: nowrap; }
h2 .glass-word { padding: 2px 16px 4px; font-size: .9em; letter-spacing: -.02em; line-height: 1.15; }
@media (max-width: 479px) { h2 .glass-word { font-size: .82em; padding: 2px 12px 3px; } }
@media (max-width: 359px) { h2 .glass-word { white-space: normal; display: inline; } }
.feature > .feature-visual:last-child { height: auto; min-height: 340px; }
@media (min-width: 900px) { .feature > .feature-visual:last-child { min-height: 400px; } }


.brand { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 28px; }
@media (min-width: 900px) { .brand { grid-template-columns: 3fr 2fr; padding: 40px; align-items: center; } }
.brand > div:first-child { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; align-self: stretch; }
.brand-note { margin-top: auto; padding-top: 16px; }
.brand h2 { font-size: 30px; }
@media (min-width: 768px) { .brand h2 { font-size: 38px; } }
.chips { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.brand-art { display: flex; justify-content: center; }
/* card stack (21st.dev "image stack carousel", ported): rectangular cards fanned from the
   bottom-right corner; the front one drags with a 3D tilt, a tap or a swipe sends it to the back. */
.brand { overflow: visible; }
.brand-art { position: relative; justify-content: center; align-items: center; }
/* The deck is a 3:4 card that fills the art column (max 320px), centred; back cards fan ±ROT° from the
   bottom-centre so the pile reads as one calm hand of cards inside the bento, not a stack toppling out of it. */
.deck { position: relative; width: min(100%, 280px); aspect-ratio: 3 / 4; perspective: 1200px; margin: 12px auto 4px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (min-width: 900px) { .deck { width: min(100%, 320px); margin: 8px auto; } }
.deck-card { position: absolute; inset: 0; cursor: grab; transform-style: preserve-3d;
             transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s var(--ease-out); }
.deck-card.dragging { cursor: grabbing; transition: none; touch-action: none; }
.deck-card.dragging, .deck-card.flying { will-change: transform; }
.deck-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 20px; }
.deck-card.flying { transition: transform .35s var(--ease-out), opacity .3s var(--ease-out); pointer-events: none; }
.deck-inner { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--hair);
              background: linear-gradient(180deg, #FAFAFB, #ECECEE); box-shadow: 0 24px 50px rgba(0,0,0,.22);
              display: flex; align-items: flex-end; justify-content: center;
              transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.deck-inner img { width: 86%; height: 94%; margin-bottom: 4%; object-fit: contain; object-position: bottom; pointer-events: none; }

@media (hover: hover) { .deck-card.is-front:not(.dragging):hover { transform: scale(1.03); } }


/* ---------- How it works: a stepper (icon tiles on a line). --p (0..1, set by main.js from the scroll
   position) fills the line; a step lights up once the fill reaches its tile. Vertical under 768px. */
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 28px 0; }
.steps-track { position: absolute; background: var(--hair); border-radius: 2px; overflow: hidden; }
.steps-fill { position: absolute; inset: 0; background: rgba(var(--fg),.85); transform-origin: 0 0; }
.stp { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; align-items: start; align-content: start; }
.stp-icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
            background: var(--canvas); border: 1px solid var(--hair); color: var(--faint);
            transition: color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.stp h3 { font-size: 17px; color: var(--faint); padding-top: 4px; transition: color .35s var(--ease-out); }
.stp p { grid-column: 2; margin-top: 6px; font-size: 15px; color: var(--faint); transition: color .35s var(--ease-out); }
.stp.is-on .stp-icon { color: var(--ink); border-color: rgba(var(--fg),.35); box-shadow: 0 0 0 4px rgba(var(--fg),.05); }
.stp.is-on h3 { color: var(--ink); }
.stp.is-on p { color: var(--muted); }
/* phone: vertical line down the tile centres */
.steps-track { left: 27px; top: 28px; bottom: 28px; width: 2px; }
.steps-fill { transform: scaleY(var(--p, 0)); }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
  .stp { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 0; }
  .stp h3 { padding-top: 22px; max-width: 240px; line-height: 1.3; min-height: calc(22px + 2.6em); } /* two title lines, so paragraphs align across steps */
  .stp p { grid-column: auto; max-width: 260px; }
  .steps-track { left: 12.5%; right: 12.5%; top: 27px; bottom: auto; width: auto; height: 2px; }
  .steps-fill { transform: scaleX(var(--p, 0)); }
}

.contact { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 28px; }
@media (min-width: 900px) { .contact { grid-template-columns: 2fr 3fr; padding: 40px; gap: 48px; } }
.contact-copy h2 { font-size: 30px; }
@media (min-width: 768px) { .contact-copy h2 { font-size: 38px; } }
.contact-copy .lead { margin-top: 16px; }
.request { display: grid; grid-template-columns: 1fr; gap: 14px; position: relative; }
@media (min-width: 640px) { .request { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; font-weight: 500; color: var(--muted); }
.field span em { font-style: normal; color: var(--faint); margin-left: 6px; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255,255,255,.6); border: 1px solid var(--hair); border-radius: 14px;
  padding: 12px 14px; outline: 0; transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus { border-color: var(--blue); background: #fff; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input:user-invalid { border-color: #C62828; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-actions .small { margin: 0; line-height: 1; }
.form-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.form-thanks { grid-column: 1 / -1; padding: 14px 16px; border-radius: 14px; background: rgba(var(--blue-rgb),.1); border: 1px solid rgba(var(--blue-rgb),.35); color: var(--ink); }
.form-error { grid-column: 1 / -1; color: #C62828; }
.form-error a { text-decoration: underline; }
.request.is-sent .field, .request.is-sent .form-actions { display: none; }

/* ---------- Stations: a scrollable line of big flip cards with arrows */
.section-head .tap-hint { margin-top: 28px; }
.stations .section-head { margin-bottom: 28px; }
#social-proof .section-head { margin-bottom: 36px; }
#social-proof .section-head h2 { max-width: 760px; } /* lead → hint → cards: equal 28px steps */
.link-word { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
             text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out); }
@media (hover: hover) { .link-word:hover { color: var(--blue); } }
.flip.is-target .flip-face { border-color: var(--blue); }
.stations { overflow: hidden; }
.stations .section-head .lead { max-width: 760px; }
.stations-line .carousel-track { padding: 8px max(24px, calc((100vw - 1200px) / 2)) 16px; gap: 20px; }
.stations-line .flip { flex: none; width: min(340px, 78vw); scroll-snap-align: start; }
.flip { aspect-ratio: 3 / 4; transform-style: preserve-3d; }
@media (max-width: 559px) { .flip { aspect-ratio: 4 / 4.2; max-width: 420px; margin: 0 auto; width: 100%; } }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease-out-soft); }
.flip-inner.is-flipped { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; border-radius: 24px; overflow: hidden;
  background: var(--card); border: 1px solid var(--hair);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: border-color .18s var(--ease-out);
}
@media (hover: hover) { .flip-inner:hover .flip-face { border-color: var(--hair-hover); } }
.flip-front { display: flex; align-items: center; justify-content: center; padding: 22px; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.flip-front:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.flip-close { margin-top: auto; align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.flip-front img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
                  transition: transform .5s var(--ease-out); }
@media (hover: hover) { .flip-inner:hover .flip-front img { transform: scale(1.04); } }
.flip-tag { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 9999px;
            background: rgba(255,255,255,.75); border: 1px solid var(--hair); backdrop-filter: blur(8px);
            font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.flip-back { transform: rotateY(180deg); padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
@media (min-width: 900px) { .flip-back { padding: 22px; gap: 14px; } }
.flip-back h3 { font-size: 19px; }
@media (min-width: 900px) { .flip-back h3 { font-size: 22px; } }
.specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
@media (min-width: 900px) { .specs { font-size: 14px; gap: 8px; } }
.specs li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.specs-multi { display: grid; gap: 4px; text-align: right; }
.specs-multi span { white-space: nowrap; }
.specs-multi em { font-style: normal; font-weight: 500; color: var(--muted); margin-right: 8px; }
.specs li span { color: var(--muted); flex: none; }
.specs li strong { font-weight: 500; text-align: right; color: var(--ink); }
.flip-back .small { margin-top: auto; }


.carousel { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
            scrollbar-width: none; scroll-padding-left: max(24px, calc((100vw - 1200px) / 2)); }
.carousel::-webkit-scrollbar { display: none; }
.carousel-track { display: flex; gap: 20px; align-items: flex-start; width: max-content;
                  padding: 4px max(24px, calc((100vw - 1200px) / 2)); }
.feat { flex: none; width: min(760px, 86vw); scroll-snap-align: start; display: flex; flex-direction: column;
        border-radius: 28px; overflow: hidden; }

.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.carousel-btn { width: 52px; height: 52px; border-radius: 9999px; border: 1px solid var(--hair); background: var(--card); color: var(--ink);
                display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
                transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .1s var(--ease-press); }
@media (hover: hover) { .carousel-btn:hover { border-color: var(--hair-hover); background: var(--card-hover); } }
.carousel-btn:active { transform: scale(.95); }
.carousel-btn[disabled] { opacity: .35; cursor: default; }

/* ---------- Feature cards (Tailark features-carousel-5 grid): 1/3 + 2/3, visual on top, copy below */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .feature-grid { grid-template-columns: 1fr 2fr; } .feature-grid-flip { grid-template-columns: 2fr 1fr; } }
.feature { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; }
.feature-visual { height: 340px; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; }
@media (min-width: 900px) { .feature-visual { height: 400px; } }

/* The three "For …" blocks (Venues, Events, Offices) share this: left-aligned head, title on one line, copy under it; then the blue note as a
   full tile beside the photo, no wrapper card, so there is no dead space around either. */
#venues, #events, #other-businesses { padding: 64px 0; }
@media (min-width: 768px) { #venues, #events, #other-businesses { padding: 80px 0; } }
.venues-head { margin-bottom: 32px; }
@media (min-width: 900px) { .venues-head { margin-bottom: 40px; } }
.venues-head h2 { max-width: none; }
.venues-head .lead { margin-top: 18px; max-width: 640px; text-wrap: wrap; } /* not "pretty": Safari balances lines, so each block ended at a different width */
.venues-grid { align-items: stretch; }
.venues-grid .feature > .feature-visual:last-child { height: 320px; min-height: 0; padding: 16px; }
@media (min-width: 900px) { .venues-grid .feature > .feature-visual:last-child { height: 380px; } }
.venues-grid .shot img { border-radius: 20px; }
.note-tile { width: auto; height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 0;
             border-radius: 28px; padding: 28px 30px; box-shadow: 0 14px 36px rgba(0,0,0,.08); transform: none; }
.note-tile .note-head { font-size: 16px; margin-bottom: 18px; }
.note-tile .note-list { gap: 14px; }
.note-tile .note-list li { font-size: 15px; line-height: 1.35; gap: 10px; }
.note-tile .note-list .tick { width: 16px; height: 16px; margin-top: 2px; }
.note-foot { margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--muted); }
/* the checklist "note": the venue benefits on a grey card, a step darker than the canvas, black text (green until 6 Oct 2026, blue for an hour) */
.note { width: min(100%, 340px); border-radius: 18px; padding: 20px 22px; background: var(--note); color: var(--ink);
        box-shadow: 0 18px 40px rgba(0,0,0,.1); transform: rotate(-1.5deg); }
.note-head { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.note-list .tick { flex: none; margin-top: 2px; width: 14px; height: 14px; color: var(--ink); }

/* the photo in the wide card */
.shot { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid var(--hair);
            box-shadow: 0 24px 60px rgba(0,0,0,.18); } /* flat since 16 Sep 2026: the 3D tilt read as a skewed photo */
.shot img.shot-low { object-position: center 73%; } /* vertical crop of the Venues lobby photo (Alsu's pick) */

/* ---------- "Three ways": squared grid with hairlines and corner marks (Tailark features-11) */
.grid-frame { position: relative; border: 1px solid var(--hair); }
.corner { position: absolute; width: 17px; height: 17px; pointer-events: none; }
.corner::before, .corner::after { content: ""; position: absolute; background: rgba(var(--fg),.35); }
.corner::before { left: 0; top: 8px; width: 17px; height: 1px; }
.corner::after { left: 8px; top: 0; width: 1px; height: 17px; }
.corner.tl { left: -9px; top: -9px; } .corner.tr { right: -9px; top: -9px; }
.corner.bl { left: -9px; bottom: -9px; } .corner.br { right: -9px; bottom: -9px; }
.grid-row { display: grid; grid-template-columns: 1fr; }
.cell { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--hair); }
.cell:first-child { border-top: 0; }
.cell h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.cell h3 svg { flex: none; color: var(--ink); }
.cell p { color: var(--muted); font-size: 16px; }
.cell .link-underline { margin-top: auto; align-self: flex-start; padding-top: 4px; }
@media (min-width: 900px) {
  .grid-row { grid-template-columns: repeat(3, 1fr); }
  .cell { border-top: 0; border-left: 1px solid var(--hair); padding: 44px 36px; }
  .cell:first-child { border-left: 0; }
}

/* ---------- Placeholders for facts still owed */
.todo { outline: 1px solid #d0342c; outline-offset: 2px; border-radius: 4px; padding: 0 2px; }

/* ==========================================================================
   Legal pages (legal/privacy, legal/offer) — after a details.so "Diffusion Studio" reference:
   documents list left, the document centre, "On this page" right. Sidebars stack above under 1024px.
   ========================================================================== */
.legal { padding: 40px 0 96px; }
@media (min-width: 768px) { .legal { padding: 64px 0 128px; } }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) {
  .legal-grid { grid-template-columns: 200px minmax(0, 680px) 220px; justify-content: space-between; gap: 56px; }
  .legal-side { position: sticky; top: 104px; align-self: start; }
}
.legal-side { display: flex; flex-direction: column; gap: 10px; }
.legal-side .eyebrow { margin-bottom: 6px; }
.legal-docs a { font-size: 14px; color: var(--muted); transition: color .15s var(--ease-out); }
.legal-docs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (hover: hover) { .legal-docs a:not([aria-current]):hover { color: var(--ink); } }
@media (max-width: 1023px) { .legal-docs { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; align-items: center; } .legal-docs .eyebrow { width: 100%; margin: 0 0 4px; } }
.legal-toc { display: none; }
@media (min-width: 1024px) { .legal-toc { display: flex; } }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.legal-toc a { display: block; padding: 5px 0 5px 14px; font-size: 13px; line-height: 1.35; color: var(--faint); border-left: 1px solid var(--hair); margin-left: 0;
               transition: color .15s var(--ease-out), border-color .15s var(--ease-out); }
.legal-toc a.is-active, .legal-toc a[aria-current] { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .legal-toc a:hover { color: var(--ink); } }
.legal-doc h1 { font-size: 36px; max-width: none; }
@media (min-width: 768px) { .legal-doc h1 { font-size: 44px; } }
.legal-meta { margin-top: 14px; font-size: 14px; color: var(--faint); }
/* country selector (both legal pages): a segmented pill; the pressed one is blue. Hidden without JS. */
html:not(.js) .country { display: none; }
.country { display: inline-flex; gap: 4px; margin-top: 24px; padding: 4px; border-radius: 9999px; background: var(--card); border: 1px solid var(--hair); }
.country button { padding: 8px 16px; border: 0; border-radius: 9999px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
                  transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.country button[aria-pressed="true"] { background: var(--blue); color: #fff; }
@media (hover: hover) { .country button:not([aria-pressed="true"]):hover { color: var(--ink); } }
.legal-body { margin-top: 8px; }
.legal-body[hidden] { display: none; }
.legal-body section { padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--hair); scroll-margin-top: 110px; }
.legal-body h2 { font-size: 22px; letter-spacing: -.02em; max-width: none; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.65; color: var(--muted); }
.legal-body p { margin-top: 14px; }
.legal-body h3 { margin-top: 26px; font-size: 17px; letter-spacing: -.01em; }
.legal-body ol { margin: 0; padding-left: 24px; }
.legal-body ol ol, .legal-body ol ul, .legal-body ul ol { margin-top: 0; }
.legal-body li > p { margin-top: 0; }
.legal-body a { color: var(--ink); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--hair-hover); text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body .legal-meta strong { color: var(--muted); }
.legal-intro { margin-top: 24px; }
.legal-body ul { margin: 0; padding-left: 20px; }
.legal-body li { margin-top: 8px; }
.legal-body table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; line-height: 1.45; }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); color: var(--muted); }
.legal-body th { color: var(--faint); font-weight: 600; font-size: 13px; }
.legal-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; color: var(--ink); white-space: nowrap; }
.legal-body th:last-child, .legal-body td:last-child { white-space: nowrap; }   /* keep a domain off two lines */
@media (max-width: 559px) { .legal-body table { display: block; overflow-x: auto; } }

/* ---------- Cookie notice: frosted bar pinned to the bottom, same idiom as the nav pill.
   Not a consent bar (nothing is collected) — one line, one link, one dismiss. */
.cookie-note {
  position: fixed; z-index: 45; left: 16px; right: 16px; bottom: 16px;
  width: fit-content; max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 14px 14px 20px; border-radius: 20px;
  background: rgba(255,255,255,.82); border: 1px solid var(--hair);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.cookie-note.is-open { opacity: 1; transform: none; }
.cookie-note p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.cookie-note button {
  flex: 0 0 auto; height: 40px; padding: 0 22px; border: 0; border-radius: 9999px;
  background: var(--blue); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: -.01em; line-height: 1;
  cursor: pointer; transition: background-color .18s var(--ease-out);
}
@media (hover: hover) { .cookie-note button:hover { background: var(--blue-deep); } }
@media (max-width: 559px) {
  .cookie-note { padding: 10px 10px 10px 18px; gap: 12px; }
}

/* ---------- Reduced motion: page fully visible, nothing moves (spec 4.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero1-media, .hero1-photo2, .hero-intro, img[data-fade], .kpi { opacity: 1 !important; transform: none !important; }
  .sweep .ch { color: var(--ink); }
  .kpi { opacity: 1; transform: none; }
  .lang-menu { animation: none; }
}