/* The website's own pages (About us, How it works, For venues): wide
   sections under site.js's top bar. Uses the app's colours (styles.css). */
body{ display:block; padding:0; background:#fff !important; height:auto; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer;
  font:700 14px 'Manrope',sans-serif; border-radius:999px; padding:12px 22px; border:1.5px solid transparent; white-space:nowrap;
}
.btn-light{ background:#fff; color:var(--ink); }
.btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-outline{ color:var(--ink); border-color:var(--ink); }
.btn-big{ padding:16px 28px; font-size:15px; }
.ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.eyebrow{ margin:0 0 18px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
h1, h2{ font-family:var(--display); font-weight:400; letter-spacing:-.03em; }
h2{ margin:0 0 18px; font-size:clamp(30px, 3vw, 40px); line-height:1.12; }
.lead{ margin:0; font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:640px; }
.lead + .lead{ margin-top:16px; }
section{ padding:96px 0; scroll-margin-top:var(--bar-h); }

/* Dark opening band: the big one on About us, a shorter one elsewhere. */
.hero{ background:var(--ink); color:#fff; padding:calc(var(--bar-h) + 80px) 0 110px; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:48px; }
.hero .eyebrow{ color:rgba(255,255,255,.55); }
.hero h1{ margin:0 0 22px; font-size:clamp(44px, 5.6vw, 76px); line-height:1.03; letter-spacing:-.035em; }
.hero-sub{ margin:0 0 34px; max-width:520px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.68); }
.hero.short{ padding:calc(var(--bar-h) + 70px) 0 80px; }
.hero.short .wrap{ grid-template-columns:1fr; }
.hero.short h1{ font-size:clamp(40px, 4.8vw, 64px); max-width:820px; }
.hero.photo{ position:relative; }
.hero.photo::before{
  content:""; position:absolute; inset:0; background:var(--hero-photo) center/cover; opacity:.35;
}
.hero.photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink) 30%, rgba(25,25,25,.4)); }
.hero.photo .wrap{ position:relative; z-index:1; }

/* The logo mark drawn with activity photos. */
.mark{ position:relative; width:100%; max-width:500px; aspect-ratio:1/1; margin-left:auto; }
.mark-circle{
  position:absolute; width:32%; aspect-ratio:1/1; border-radius:50%; transform:translate(-50%,-50%);
  background-size:cover; background-position:center; background-color:#2a2a2a;
  animation:mark-in .8s cubic-bezier(.2,.7,.2,1) both;
}
.mark-ring{ box-shadow:0 0 0 7px #fff; width:27%; }
.m-top{ left:50%; top:27.4%; }
.m-right{ left:72.6%; top:50%; animation-delay:.1s; }
.m-bottom{ left:50%; top:72.6%; animation-delay:.2s; }
.m-left{ left:27.4%; top:50%; animation-delay:.3s; }
@keyframes mark-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.85) } to{ opacity:1; transform:translate(-50%,-50%) scale(1) } }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.two.center{ align-items:center; }
.white{ background:var(--surface); }

/* Cards with a small label, a big word and a line. */
.cards-col{ display:grid; gap:14px; }
.card3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:52px; }
.tile{ background:var(--surface); border-radius:var(--radius); padding:28px 30px; box-shadow:var(--shadow); }
.white .tile{ background:var(--bg); box-shadow:none; }
.tile small{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.tile b{ display:block; font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.02em; margin-bottom:8px; }
.tile p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.tile.dark{ background:var(--ink); color:#fff; }
.tile.dark small{ color:rgba(255,255,255,.5); }
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:36px; }
.pillar{ border-top:2px solid var(--ink); padding-top:16px; }
.pillar b{ display:block; font-size:16px; margin-bottom:6px; }
.pillar span{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); }

/* Numbered steps. */
.step{ display:flex; flex-direction:column; }
.step-num{
  width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font:800 15px 'Manrope',sans-serif; margin-bottom:24px;
}
.step h3{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-.02em; }
.step p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.step-visual{ margin-top:auto; padding-top:26px; display:flex; gap:8px; align-items:flex-end; min-height:120px; }
.step-visual.times{ flex-direction:column; align-items:flex-start; justify-content:flex-end; }
.pill{ display:inline-block; padding:8px 14px; border-radius:999px; font:800 13px 'Manrope',sans-serif; }
.pill.blue{ background:var(--blue); }
.pill.yellow{ background:var(--yellow); }
.pill.line{ border:1.5px solid var(--ink); }

/* Discount bars (yellow = deals). */
.bars{ display:flex; gap:12px; align-items:flex-end; height:300px; }
.bar{
  flex:1 1 0; border-radius:18px; background:var(--yellow); display:flex; flex-direction:column; align-items:center;
  padding-top:16px; font:800 20px 'Manrope',sans-serif;
}
.bar small{ font-weight:600; font-size:12.5px; opacity:.6; margin-top:4px; }
.bars.mini{ height:120px; gap:8px; width:100%; }
.bars.mini .bar{ border-radius:12px; padding-top:9px; font-size:13px; }
.bars.mini .bar small{ font-size:10.5px; margin-top:2px; }

/* Loyalty: dark band with the brand circles (blue = time, yellow = deals). */
.dark-band{ background:var(--ink); color:#fff; }
.dark-band .lead{ color:rgba(255,255,255,.65); }
.dark-band .eyebrow{ color:rgba(255,255,255,.5); }
.perk{ display:flex; gap:24px; align-items:center; padding:26px 0; }
.perk + .perk{ border-top:1px solid rgba(255,255,255,.12); }
.circle{ flex:0 0 auto; width:110px; height:110px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink); }
.circle.blue{ background:var(--blue); }
.circle.yellow{ background:var(--yellow); }
.circle b{ font-family:var(--display); font-weight:500; font-size:40px; line-height:1; letter-spacing:-.03em; }
.circle small{ font-size:12px; font-weight:700; opacity:.75; margin-top:4px; }
.perk h3{ margin:0 0 6px; font-family:var(--display); font-weight:500; font-size:24px; }
.perk p{ margin:0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.65); }

.photo-box{ aspect-ratio:4/3.4; border-radius:28px; background-size:cover; background-position:center; }
.ticks{ list-style:none; margin:28px 0 34px; padding:0; display:grid; gap:12px; }
.ticks li{ display:flex; gap:12px; font-size:15.5px; line-height:1.55; }
.ticks li::before{ content:""; flex:0 0 auto; width:9px; height:9px; margin-top:7px; border-radius:50%; background:var(--ink); }

/* Activities strip (links to the classes). */
.acts{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:44px; }
.act{ position:relative; aspect-ratio:3/4; border-radius:22px; overflow:hidden; background-size:cover; background-position:center; color:#fff; text-decoration:none; }
.act::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,25,25,0) 50%, rgba(25,25,25,.75)); }
.act span{ position:absolute; left:20px; bottom:18px; z-index:1; font-family:var(--display); font-size:22px; font-weight:500; }

/* Short answers. */
.qa{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 40px; margin-top:44px; }
.qa b{ display:block; font-size:16px; margin-bottom:6px; }
.qa p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }

.final{ padding:0 0 110px; }
.final-card{
  background:var(--ink); color:#fff; border-radius:32px; padding:72px 64px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.final-card h2{ margin:0; max-width:560px; }

/* Footer (added by site.js). */
.site-foot{ border-top:1px solid var(--line); padding:26px 0 24px; background:#fff; }
.site-foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px 28px; flex-wrap:wrap; }
.site-foot img{ height:20px; display:block; }
.site-foot nav{ display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; }
.site-foot a{ color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600; }
.site-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }
.site-foot small{ color:rgba(25,25,25,.6); font-size:12.5px; }
@media (max-width:560px){
  .site-foot{ padding:24px 0 22px; }
  .site-foot .wrap{ flex-direction:column; align-items:flex-start; }
  .site-foot nav{ gap:8px 18px; }
}
/* About, Questions: the title like the other sections, then the questions
   in one white card with a thin line between them (the open one in
   yellow, like What is Spotd), then a link to write to us. */
/* (The studios section above already ends with some room: little more.) */
.a-section.faq{ text-align:left; padding:12px 0 72px; }
@media (max-width:759px){ .a-section.faq{ padding:8px 0 48px; } }
.a-section.faq h2{ margin:0 0 26px; }
.faq-list{ background:#fff; border-radius:28px; overflow:hidden; }
.faq-row{ border-bottom:1px solid rgba(25,25,25,.07); transition:background .25s; }
.faq-row:last-child{ border-bottom:none; }
.faq-row[open]{ background:var(--yellow); }
.faq-row summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px 20px 28px; cursor:pointer; font-size:clamp(15.5px, 1.3vw, 17.5px); font-weight:600; color:var(--ink); }
.faq-row summary::-webkit-details-marker{ display:none; }
.faq-plus{ position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:var(--cream); transition:background .25s; }
.faq-row[open] .faq-plus{ background:var(--ink); }
.faq-plus::before, .faq-plus::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .25s, background .25s; }
.faq-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-row[open] .faq-plus::before, .faq-row[open] .faq-plus::after{ background:#fff; }
.faq-row[open] .faq-plus::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-row p{ margin:-6px 0 0; padding:0 80px 22px 28px; max-width:860px; font-size:15px; line-height:1.6; color:rgba(25,25,25,.75); }
.faq-ask-phone{ margin-top:20px; }
@media (max-width:560px){
  .a-section.faq h2{ margin-bottom:18px; }
  .faq-list{ border-radius:20px; }
  .faq-row summary{ padding:14px 14px 14px 18px; gap:14px; font-size:15px; }
  .faq-plus{ width:26px; height:26px; }
  .faq-plus::before, .faq-plus::after{ width:10px; }
  .faq-row p{ margin-top:-2px; padding:0 18px 16px; font-size:14px; line-height:1.55; }
  .faq-ask-phone{ margin-top:16px; }
}

/* ---- Photo-led landing (About) -------------------------------------- */
/* Yellow highlight for deals, like the blue one (.hl) for time. */
.hl-y{ background:var(--yellow); color:var(--ink); padding:0 .16em; border-radius:6px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
b{ font-weight:800; }

/* Hero: headline on the left, photos sliding by in a frame on the right. */
.pro-hero{ padding:calc(var(--bar-h) + 64px) 0 80px; }
.pro-hero-in{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
.pro-hero h1{ margin:0 0 20px; font-size:clamp(40px, 4.6vw, 62px); line-height:1.06; letter-spacing:-.035em; }
.pro-sub{ margin:0 0 30px; max-width:470px; font-size:18px; line-height:1.6; color:var(--ink-soft); }
.pro-facts{ list-style:none; margin:44px 0 0; padding:26px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:40px; }
.pro-facts li{ font-size:13.5px; line-height:1.4; color:var(--ink-soft); max-width:150px; }
.pro-facts b{ display:block; margin-bottom:8px; font-family:var(--display); font-weight:500; font-size:30px; letter-spacing:-.03em; color:var(--ink); }
.pro-frame{ position:relative; width:100%; max-width:440px; margin-left:auto; aspect-ratio:4/5; border-radius:28px; overflow:hidden; background:var(--motif); box-shadow:var(--shadow); }
.show-track{ position:absolute; inset:0; display:flex; transition:transform .9s cubic-bezier(.65,0,.35,1); }
.show-slide{ flex:0 0 100%; height:100%; background-size:cover; background-position:center; position:relative; }
.show-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,25,25,0) 60%, rgba(25,25,25,.45)); }
.show-chip{
  position:absolute; left:18px; top:18px; padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.4);
}
.show-dots{ position:absolute; left:18px; bottom:18px; display:flex; gap:6px; }
.show-dots button{ width:7px; height:7px; padding:0; border:none; border-radius:999px; background:rgba(255,255,255,.5); cursor:pointer; transition:width .25s, background .25s; }
.show-dots button.active{ width:22px; background:#fff; }

/* The three numbers. */
.numbers{ padding:70px 0; }
.numbers .wrap{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.number{ border-top:2px solid var(--ink); padding-top:22px; }
.number b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(52px, 6vw, 84px); line-height:1; letter-spacing:-.04em; margin-bottom:14px; }
.number p{ margin:0; font-size:16px; line-height:1.5; color:var(--ink-soft); max-width:260px; }

/* Steps with a photo each. */
.photo-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:40px; }
.photo-step{ background:var(--bg); border-radius:22px; padding:12px 12px 24px; }
.photo-step-img{ position:relative; aspect-ratio:16/10; border-radius:16px; background-size:cover; background-position:center; margin-bottom:20px; }
.photo-step-img span{
  position:absolute; left:12px; top:12px; width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font:800 14px 'Manrope',sans-serif;
}
.photo-step h3, .photo-step p{ padding:0 10px; }
.photo-step h3{ margin:0 0 6px; font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:-.02em; line-height:1.3; }
.photo-step p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-soft); }

/* Activities mosaic. */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; }
.section-head h2{ margin:0; }
.mosaic{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:260px 260px; gap:16px; }
.tile-photo{ position:relative; border-radius:24px; overflow:hidden; background-size:cover; background-position:center; color:#fff; text-decoration:none; transition:transform .3s; }
.tile-photo:hover{ transform:scale(.985); }
.tile-photo.big{ grid-row:1 / span 2; }
.tile-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,25,25,0) 45%, rgba(25,25,25,.7)); }
.tile-photo span{ position:absolute; left:22px; bottom:20px; z-index:1; font-family:var(--display); font-size:26px; font-weight:500; letter-spacing:-.02em; }
.tile-photo.big span{ font-size:34px; }

.signature{ margin:28px 0 0; font-family:var(--display); font-size:28px; font-weight:500; letter-spacing:-.02em; }
.final-card.photo{ position:relative; overflow:hidden; }
.final-card.photo::before{ content:""; position:absolute; inset:0; background:var(--final-photo) center/cover; }
.final-card.photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(25,25,25,.88) 25%, rgba(25,25,25,.35)); }
.final-card.photo > *{ position:relative; z-index:1; }
.final-card .hl{ color:var(--ink); }

/* ---- Style A: centred and clean (About, For venues) ------------------- */
.a-hero{ padding:calc(var(--bar-h) + 72px) 0 84px; text-align:center; }
.a-hero h1{ margin:0 auto 18px; max-width:820px; font-size:clamp(38px, 5vw, 62px); line-height:1.06; letter-spacing:-.035em; }
.a-sub{ margin:0 auto 34px; max-width:540px; font-size:18px; line-height:1.55; color:var(--ink-soft); }
.a-search{
  display:flex; align-items:center; gap:10px; max-width:580px; margin:0 auto; padding:7px 7px 7px 20px;
  background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); text-align:left;
}
.a-search i{ display:flex; color:var(--grey); }
.a-search input{ flex:1; min-width:0; border:none !important; outline:none; background:none; font:500 15px 'Manrope',sans-serif; color:var(--ink); }
.a-search input::placeholder{ color:var(--grey); }
.a-search .btn{ padding:13px 22px; }
.a-cats{ display:flex; justify-content:center; flex-wrap:wrap; gap:26px 30px; margin-top:56px; }
.a-cats a{ display:flex; flex-direction:column; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-family:var(--display); font-size:14.5px; font-weight:500; }
.a-cats i{
  width:86px; height:86px; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:0 0 0 3px #fff, 0 0 0 4.5px var(--ink); transition:transform .2s;
}
.a-cats a:hover i{ transform:scale(1.05); }
.a-section{ padding:96px 0; border-top:1px solid var(--line); text-align:center; }
.a-section h2{ margin:0 0 54px; }
.a-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:48px; }
.a-step i{
  display:block; width:132px; height:132px; margin:0 auto 26px; border-radius:50%; background-size:cover; background-position:center;
  box-shadow:0 0 0 4px #fff, 0 0 0 5.5px var(--ink);
}
.a-step h3{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:21px; letter-spacing:-.02em; }
.a-step p{ margin:0 auto; max-width:300px; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.a-end h2{ margin-bottom:30px; }
/* Colour, so the page isn't all white: cream (the brand's) and the black
   of the app's welcome screen. */
.a-cream{ background:var(--cream); border-top:none; }
.a-butter{ background:var(--yellow); border-top:none; }
.a-butter .hl{ background:#fff; }
/* Photo behind the top of the page, darkened, text in white. */
.a-photo{ position:relative; color:#fff; padding-top:calc(var(--bar-h) + 90px); }
/* The photo fades into what comes next (black on About, white on For
   venues), so there's no hard line under it. */
.a-photo{ --fade-to:var(--ink); --fade-to-rgb:25,25,25; padding-bottom:90px !important; }
.a-photo + .a-section{ border-top:none; }
/* Overlap by a pixel so the white page never peeks through between the two. */
.a-photo{ margin-bottom:-1px; }
/* Darkening and fade painted with the photo itself (one layer, no seam). */
.a-photo{ background:linear-gradient(180deg, rgba(25,25,25,.7) 0%, rgba(25,25,25,.5) 26%, rgba(25,25,25,.55) 46%, rgba(var(--fade-to-rgb),.66) 58%, rgba(var(--fade-to-rgb),.78) 68%, rgba(var(--fade-to-rgb),.88) 77%, rgba(var(--fade-to-rgb),.95) 85%, rgba(var(--fade-to-rgb),.99) 92%, var(--fade-to) 97%), var(--hero-photo) center/cover, var(--fade-to); }
.a-photo > .wrap{ position:relative; }
.a-photo h1{ color:#fff; }
.a-photo .hl{ color:var(--ink); }
.a-photo .a-sub{ color:rgba(255,255,255,.85); }
.a-photo .a-search{ border-color:transparent; }
.a-photo .a-cats a{ color:#fff; }
.a-photo .a-cats i{ box-shadow:0 0 0 3px rgba(25,25,25,.6), 0 0 0 4.5px #fff; }
.a-photo .btn-outline{ color:#fff; border-color:rgba(255,255,255,.7); }
.a-dark{ background:var(--ink); color:#fff; border-top:none; }
.a-dark h2{ color:#fff; }
.a-dark .hl{ color:var(--ink); }
.a-dark .hl-ring{ box-shadow:0 0 0 4px var(--ink), 0 0 0 5.5px #fff; }
.a-dark .hl-steps li{ color:rgba(255,255,255,.62); }
.a-dark .hl-steps b{ color:#fff; }
.a-end .ctas{ justify-content:center; }
.a-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; text-align:left; }
.a-tiles div{ border:1px solid var(--line); border-radius:22px; padding:28px; }
.a-tiles b{ display:block; font-family:var(--display); font-weight:500; font-size:21px; letter-spacing:-.02em; margin-bottom:8px; }
.a-tiles p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }

/* How it works: the logo, big and interactive. Tap a circle (top one
   plain, the others ringed, like the mark) to read its step on the right. */
.a-section#how h2{ margin-bottom:48px; }
.how-x{ display:grid; grid-template-columns:auto 400px; justify-content:center; align-items:center; gap:72px; text-align:left; }
.hx-mark{ --hx:min(600px, 52vw); position:relative; width:var(--hx); aspect-ratio:1/1; }
/* The circles leave empty room at the top and bottom of the square: trim it. */
.hx-mark{ margin-block:calc(var(--hx) * -.08); }
.hx-c{
  position:absolute; width:31%; aspect-ratio:1/1; border-radius:50%; transform:translate(-50%,-50%);
  background-size:cover; background-position:center; background-color:#2a2a2a; border:none; padding:0; cursor:pointer;
  opacity:.55; transition:opacity .3s, transform .3s, box-shadow .3s;
}
.hx-ring{ width:26%; box-shadow:0 0 0 5px var(--ink), 0 0 0 7px #fff; }
.hx-top{ left:50%; top:27.4%; }
.hx-right{ left:72.6%; top:50%; }
.hx-bottom{ left:50%; top:72.6%; }
.hx-left{ left:27.4%; top:50%; }
.hx-c:hover{ opacity:.85; }
.hx-c.active{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
.hx-c.active.hx-ring{ box-shadow:0 0 0 5px var(--ink), 0 0 0 8px var(--blue); }
.hx-c.active.hx-top{ box-shadow:0 0 0 5px var(--ink), 0 0 0 8px var(--blue); }
.hx-c span{
  position:absolute; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font:800 15px 'Manrope',sans-serif; box-shadow:0 0 0 3px var(--ink);
}
.hx-c.active span{ background:var(--blue); }
.hx-top span{ left:50%; top:-18px; margin-left:-18px; }
.hx-right span{ right:-18px; top:50%; margin-top:-18px; }
.hx-bottom span{ left:50%; bottom:-18px; margin-left:-18px; }
.hx-left span{ left:-18px; top:50%; margin-top:-18px; }
.hx-panel{ position:relative; }
.hx-panel.swap h3, .hx-panel.swap #hx-text, .hx-panel.swap .hx-num{ animation:hx-in .4s ease both; }
@keyframes hx-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.hx-hint{ margin:0 0 18px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.hx-num{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:var(--ink); font:800 19px 'Manrope',sans-serif; margin-bottom:18px;
}
.hx-panel h3{ margin:0 0 12px; font-family:var(--display); font-weight:500; font-size:30px; letter-spacing:-.025em; line-height:1.15; color:#fff; }
.hx-panel p#hx-text{ margin:0; font-size:16.5px; line-height:1.65; color:rgba(255,255,255,.7); min-height:110px; }
.hx-nav{ display:flex; gap:10px; margin-top:26px; }
.hx-nav button{
  width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:none; color:#fff;
  font-size:22px; line-height:1; cursor:pointer; transition:border-color .2s;
}
.hx-nav button:hover{ border-color:#fff; }

/* What is Spotd: a short promise, then who it's for and the ambition. */
.a-intro{ padding:8px 0 88px !important; }
/* About: the photo stays clear behind the title and the search, then
   melts into the page's cream, so the activities sit on cream. */
.page-cream .a-photo{
  padding-bottom:72px !important;
  /* Two separate fades (the dark easing out, then the cream easing in),
     so they never mix into a grey band. */
  background:
    linear-gradient(180deg, rgba(249,244,237,0) 80%, rgba(249,244,237,.35) 87%, rgba(249,244,237,.8) 94%, var(--cream) 100%),
    linear-gradient(180deg, rgba(25,25,25,.7) 0%, rgba(25,25,25,.6) 28%, rgba(25,25,25,.5) 50%, rgba(25,25,25,.4) 68%, rgba(25,25,25,.18) 84%, rgba(25,25,25,0) 94%),
    var(--hero-photo) var(--hero-pos, center 35%)/cover, var(--cream);
}
/* About: few words on the photo (the title and one button), the photo
   taller so it shows. */
.page-cream .a-hero.a-photo{ padding-top:calc(var(--bar-h) + 72px); padding-bottom:30px !important; }
.page-cream .a-hero .a-cats{ margin-top:60px; flex-wrap:nowrap; gap:0 clamp(10px, 2.3vw, 34px); }
.page-cream .a-hero .a-cats i{ width:clamp(54px, 7.6vw, 92px); height:clamp(54px, 7.6vw, 92px); }
.page-cream .a-hero .a-cats a{ font-size:clamp(12.5px, 1.2vw, 15px); gap:11px; }
.page-cream .a-hero h1{
  max-width:1040px; font-size:clamp(40px, 5vw, 64px); font-weight:500; line-height:1.05; letter-spacing:-.035em;
  text-wrap:balance; text-shadow:0 2px 28px rgba(0,0,0,.28);
}
.page-cream .a-photo .a-sub{ margin:18px auto 0; font-size:17px; color:rgba(255,255,255,.88); }
.page-cream .hero-cta{ justify-content:center; margin-top:30px; }
/* The main button on the photo, in the brand blue of the app's Spot it. */
.btn-spot{ background:var(--blue); color:var(--ink); box-shadow:0 10px 26px rgba(154,184,244,.35); }
.btn-spot:hover{ background:#86a8ee; }
/* Second button on the photo: see-through glass, like the app's map. */
.btn-glass{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.45); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.btn-glass:hover{ background:rgba(255,255,255,.26); }
/* For venues: the steps on a black card, like How it works on About. */
.page-cream .v-steps{ margin:14px 14px 0; border-radius:40px; padding:64px 0 60px; }
.page-cream .v-steps h2{ margin-bottom:44px; }
.v-steps .a-step i{ position:relative; box-shadow:0 0 0 2.5px #fff; }
.v-steps .a-step i b{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--blue); color:var(--ink);
  font:800 15px 'Manrope',sans-serif; box-shadow:0 0 0 4px var(--ink);
}
.v-steps .a-step h3{ color:#fff; }
.v-steps .a-step p{ color:rgba(255,255,255,.68); }
.page-cream .v-steps + .a-end{ padding-top:24px; }
@media (max-width:759px){ .page-cream .v-steps{ margin:8px 8px 0; border-radius:28px; padding:48px 0 44px; } }
@media (min-width:600px) and (max-width:759px){
  .v-steps .a-steps{ grid-template-columns:repeat(3, 1fr); gap:20px; }
  .v-steps .a-step i{ width:104px; height:104px; margin-bottom:20px; }
  .v-steps .a-step h3{ font-size:18px; }
  .v-steps .a-step p{ font-size:14px; }
}
.page-cream .a-intro h2{ margin-bottom:56px; }
@media (max-width:759px){ .page-cream .a-hero.a-photo{ padding-top:calc(var(--bar-h) + 48px); padding-bottom:28px !important; } }
.page-cream .a-photo .a-cats a{ color:var(--ink); }
.page-cream .a-photo .a-cats i{ box-shadow:0 0 0 2.5px #fff, 0 6px 18px rgba(25,25,25,.16); }
/* Download buttons right under the activities: the stores' own badges
   (black, thin grey edge, system font), kept small so they stay discreet. */
.store-btns{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:36px; }
.store-btn{
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 18px 0 14px;
  border-radius:11px; background:#000; border:1px solid #A6A6A6; color:#fff; text-decoration:none; text-align:left;
  transition:opacity .15s;
}
.store-btn:hover{ opacity:.85; }
.store-btn svg{ flex:none; }
.store-btn span{ display:flex; flex-direction:column; font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size:20px; font-weight:600; line-height:1.05; letter-spacing:-.02em; }
.store-btn small{ font-size:10.5px; font-weight:500; letter-spacing:.01em; }
@media (max-width:560px){ .page-cream .a-hero .a-cats{ flex-wrap:wrap; gap:16px 18px; } .page-cream .a-hero .a-cats i{ width:62px; height:62px; } }
.store-soon{ margin:14px 0 0; font-size:14px; font-weight:600; color:var(--ink-soft); }
.a-eyebrow{ margin:0 0 16px; font:800 12.5px 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.a-intro h2{ max-width:760px; margin:0 auto 20px; }
.a-intro .a-sub{ max-width:600px; margin-bottom:64px; }
.a-who{ display:grid; grid-template-columns:repeat(3, 1fr); gap:48px; max-width:960px; margin:0 auto; text-align:left; }
.a-who i{ display:block; width:30px; height:30px; border-radius:50%; margin:0 0 18px 4px; }
.a-who .dot-blue{ background:var(--blue); }
.a-who .dot-yellow{ background:var(--yellow); box-shadow:inset 0 0 0 1.5px var(--ink); }
.a-who .dot-ink{ background:var(--ink); }
.a-dark .a-sub{ color:rgba(255,255,255,.72); }
.a-dark .a-who h3{ color:#fff; }
.a-dark .a-who p{ color:rgba(255,255,255,.66); }
.a-who h3{ margin:0 0 10px; font-family:var(--display); font-weight:500; font-size:25px; letter-spacing:-.02em; }
.a-who p{ margin:0; font-size:17.5px; line-height:1.55; color:var(--ink-soft); }

/* Our studios: empty circles until the first partners are live. */
#studios .a-sub{ margin-bottom:40px; }
.studios-soon{ display:flex; justify-content:center; flex-wrap:wrap; gap:26px 34px; }
.studios-soon span{ display:flex; flex-direction:column; align-items:center; gap:12px; font-size:13px; font-weight:700; color:var(--grey); }
.studios-soon i{
  width:104px; height:104px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px var(--cream), 0 0 0 4.5px var(--ink);
}
.studios-soon img{ width:34px; opacity:.5; }
.studios-note{ margin:36px 0 10px; font-family:var(--display); font-size:20px; font-weight:500; letter-spacing:-.01em; }
.studios-link{ font-size:15px; font-weight:700; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* Phone browsers: one column. */
@media (max-width:759px){
  .wrap{ padding:0 20px; }
  .hero{ padding:calc(var(--bar-h) + 44px) 0 64px; }
  .hero.short{ padding:calc(var(--bar-h) + 40px) 0 56px; }
  .hero .wrap, .two{ grid-template-columns:1fr; gap:40px; }
  .mark{ max-width:340px; margin:0 auto; }
  section{ padding:72px 0; }
  .card3{ grid-template-columns:1fr; margin-top:32px; }
  .pillars, .qa{ grid-template-columns:1fr; }
  .acts{ grid-template-columns:1fr 1fr; }
  .bars{ height:220px; }
  .final{ padding-bottom:72px; }
  .final-card{ flex-direction:column; align-items:flex-start; padding:44px 28px; }
  .a-hero{ padding:calc(var(--bar-h) + 40px) 0 56px; }
  .a-search .btn{ padding:12px 16px; font-size:13.5px; }
  .a-cats{ gap:18px 20px; margin-top:40px; }
  .a-cats i{ width:68px; height:68px; }
  .a-section{ padding:64px 0; }
  .studios-soon i{ width:76px; height:76px; }
  .studios-soon img{ width:26px; }
  .a-section h2{ margin-bottom:36px; }
  .a-steps, .a-tiles{ grid-template-columns:1fr; gap:36px; }
  .a-intro{ padding:8px 0 64px !important; }
  .a-intro .a-sub{ margin-bottom:44px; }
  .a-who{ gap:24px; }
  .pro-hero{ padding:calc(var(--bar-h) + 36px) 0 56px; }
  .pro-hero-in{ grid-template-columns:1fr; gap:36px; }
  .pro-frame{ max-width:none; aspect-ratio:4/3; margin:0; }
  .pro-facts{ gap:20px; grid-template-columns:repeat(3, 1fr); }
  .pro-facts b{ font-size:24px; }
  .numbers .wrap, .photo-steps{ grid-template-columns:1fr; }
  .numbers{ padding:48px 0 8px; }
  .mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:220px 160px 160px; }
  .tile-photo.big{ grid-column:1 / span 2; grid-row:auto; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .circle{ width:88px; height:88px; }
  .circle b{ font-size:32px; }
}

/* About: one look from top to bottom. The brand's cream, with the black
   How it works and the butter-yellow last call as two big cards. */
body.page-cream{ background:var(--cream) !important; }
.page-cream .a-section{ border-top:none; }
.page-cream .a-intro{ margin:0 14px; border-radius:40px; background:#fff; padding:88px 0 !important; }
.page-cream #how{ margin:14px 14px 0; border-radius:40px; padding:56px 0 36px; }
.page-cream #how h2{ margin-bottom:20px; }
.page-cream #studios{ padding:60px 0 52px; }
.page-cream #studios h2{ margin-bottom:14px; }
.page-cream #studios .a-sub{ margin-bottom:30px; }
.page-cream .a-end{ padding-top:0; }
.page-cream .site-foot{ background:var(--cream); border-top:1px solid rgba(25,25,25,.08); }
.page-cream .site-bar.solid{ background:rgba(249,244,237,.94); }
.end-card{ background:var(--blue); color:var(--ink); border-radius:34px; padding:80px 32px; }
.end-card .hl{ background:#fff; }
@media (max-width:759px){
  .page-cream .a-intro{ margin:0 8px; border-radius:28px; padding:56px 0 !important; }
  .page-cream #how{ margin:8px 8px 0; border-radius:28px; }
  .page-cream #studios{ padding:44px 0 40px; }
  .end-card{ padding:52px 22px; border-radius:26px; }
}

/* What is Spotd on a phone: one column. */
@media (max-width:599px){
  .a-who{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .a-who i{ margin:0 auto 14px; }
}

/* How it works: logo and explanation side by side down to 560px wide;
   below that (phones), the explanation goes under the logo. */
@media (min-width:560px) and (max-width:999px){
  .how-x{ grid-template-columns:auto minmax(220px, 1fr); gap:32px; }
  .hx-mark{ --hx:min(52vw, 420px); }
  .hx-panel h3{ font-size:24px; }
  .hx-panel p#hx-text{ font-size:15px; }
}
@media (max-width:559px){
  .how-x{ grid-template-columns:1fr; gap:34px; justify-items:center; }
  .hx-mark{ --hx:min(340px, 88vw); }
  .hx-c span{ width:30px; height:30px; font-size:13px; }
  .hx-top span, .hx-bottom span{ margin-left:-15px; }
  .hx-top span{ top:-15px; } .hx-bottom span{ bottom:-15px; }
  .hx-right span{ right:-15px; margin-top:-15px; } .hx-left span{ left:-15px; margin-top:-15px; }
  .hx-panel{ text-align:center; }
  .hx-panel h3{ font-size:24px; }
  .hx-nav{ justify-content:center; }
}

/* ---- For venues: the top in dark (the pro side, the partner app), the
   rest light on the brand's cream with butter-yellow touches. */
body.page-ink{ --ink-page:#2A2A2A; background:var(--cream) !important; }
.page-ink .site-bar.solid{ background:rgba(249,244,237,.94); }
.page-ink .site-foot{ background:var(--cream); border-top:1px solid rgba(25,25,25,.08); }
.btn-butter{ background:var(--yellow); color:var(--ink); }
.btn-butter:hover{ background:#F8EC8C; }

/* The photo melts into the cream at the bottom, as on About. */
.page-ink .v2-hero.a-photo{
  padding:calc(var(--bar-h) + 64px) 0 72px !important; margin:0; color:#fff;
  background:
    linear-gradient(180deg, rgba(249,244,237,0) 62%, rgba(249,244,237,.35) 74%, rgba(249,244,237,.75) 84%, rgba(249,244,237,.95) 92%, var(--cream) 98%),
    radial-gradient(520px 420px at 72% 50%, rgba(253,244,171,.16), rgba(253,244,171,0) 70%),
    linear-gradient(180deg, rgba(25,25,25,.82) 0%, rgba(25,25,25,.74) 40%, rgba(25,25,25,.55) 62%, rgba(25,25,25,.25) 76%, rgba(25,25,25,0) 88%),
    var(--v2-photo) center 40%/cover, var(--cream);
}
.v2-hero-in{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:56px; }
.v2-eyebrow{ margin:0 0 18px; font:800 12.5px 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.v2-hero h1{ margin:0; max-width:620px; color:#fff; font-size:clamp(40px, 5vw, 64px); font-weight:500; line-height:1.04; letter-spacing:-.04em; text-wrap:balance; }
.v2-sub{ margin:18px 0 34px; font-size:17px; color:rgba(255,255,255,.72); }

/* The partner app, drawn: the morning notification and the release screen. */
.v-phone{ width:280px; aspect-ratio:9/17.5; padding:11px; border-radius:44px; background:#0b0b0b; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 40px 90px rgba(0,0,0,.55); }
.v-screen{ height:100%; padding:20px 14px; text-align:left; border-radius:34px; background:#F2F2F2; color:var(--ink); overflow:hidden; display:flex; flex-direction:column; gap:9px; font-family:'Manrope',sans-serif; }
.v-notif{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 6px 18px rgba(25,25,25,.12); font-size:11px; line-height:1.35; color:var(--ink-soft); }
.v-notif b{ color:var(--ink); font-size:11.5px; }
.v-day{ margin:8px 2px 0; font-family:var(--display); font-size:19px; font-weight:500; }
.v-class{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 11px; border-radius:16px; background:#fff; }
.v-class > div:first-child{ display:flex; flex-direction:column; min-width:0; }
.v-class b{ font-size:12.5px; }
.v-class span{ font-size:10.5px; color:var(--ink-soft); }
.v-step{ display:flex; align-items:center; gap:7px; flex:none; }
.v-step i{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:13px; }
.v-step b{ min-width:10px; text-align:center; font-size:14px; }
.v-off{ opacity:.45; }
.v-release{ margin-top:auto; padding:12px; border-radius:999px; background:var(--yellow); text-align:center; font-weight:800; font-size:13px; }


.page-ink .v-steps{ margin:20px 14px 0; border-radius:40px; padding:60px 0 56px; background:var(--ink) !important; color:#fff; }
.page-ink .v-steps .hl{ background:var(--yellow); color:var(--ink); }
.page-ink .v-steps .a-step i b{ background:var(--yellow); }
.page-ink .v-steps h2{ margin-bottom:44px; }
.page-ink .v-steps .a-step i b{ box-shadow:0 0 0 4px var(--ink); }
.page-ink .a-end{ padding:24px 0 64px; border-top:none; }
.page-ink .end-card{ background:var(--yellow); }
.page-ink .end-card h2{ color:var(--ink); }

@media (max-width:859px){
  .v2-hero-in{ grid-template-columns:1fr; gap:40px; justify-items:center; text-align:center; }
  .v2-hero h1{ margin:0 auto; }
  .v2-hero .ctas{ justify-content:center; }
  .v-phone{ width:250px; }
}

/* For venues: the last 12 hours of a spot, as a timeline on a white card. */
.v-life{ margin:20px 14px 0; padding:56px 0 52px; border-radius:40px; background:#fff; text-align:center; color:var(--ink); }
.v-life h2{ margin:0 0 40px; }
.v-timeline{ position:relative; list-style:none; margin:0 auto; padding:0; max-width:920px; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.v-timeline::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:9px; height:2px; background:var(--line); }
.v-timeline li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:34px; }
.v-timeline li::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px #fff; }
.v-timeline .v-close::before{ background:var(--ink); }
.v-timeline b{ font-family:var(--display); font-weight:500; font-size:19px; letter-spacing:-.01em; }
.v-timeline span{ font-size:14px; color:var(--ink-soft); }
.v-timeline em{ margin-top:8px; padding:5px 14px; border-radius:999px; background:var(--yellow); font-style:normal; font-weight:800; font-size:15px; }
.v-timeline .v-close em{ background:var(--ink); color:#fff; }
.v-notes{ display:grid; grid-template-columns:1fr; gap:16px; max-width:720px; margin:44px auto 0; text-align:left; }
.v-notes p{ display:flex; align-items:flex-start; gap:12px; margin:0; padding:18px 20px; border-radius:20px; background:var(--cream); font-size:15px; line-height:1.55; color:var(--ink); }
.v-notes i{ flex:none; width:14px; height:14px; margin-top:4px; border-radius:50%; }
.v-notes .dot-blue{ background:var(--blue); }
@media (max-width:759px){
  .v-life{ margin:16px 8px 0; padding:44px 0 40px; border-radius:28px; }
  .v-notes{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .v-timeline{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .v-timeline::before{ display:none; }
}

/* For venues: the benefits (butter-yellow cards) and who can join. */
.v-benefits{ padding:24px 0 8px; text-align:center; color:var(--ink); }
.v-benefits h2, .v-sports h2{ margin:0 0 34px; }
.v-ben-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; text-align:left; }
.v-ben-grid div{ padding:32px 28px 30px; border-radius:28px; background:var(--yellow); }
.v-ben-grid b{ display:block; margin-bottom:10px; font-family:var(--display); font-weight:500; font-size:23px; letter-spacing:-.02em; }
.v-ben-grid p{ margin:0; font-size:16px; line-height:1.55; color:var(--ink-soft); }
.v-sports{ margin:0; padding:56px 0 36px; text-align:center; color:var(--ink); }
.v-sports h2{ margin-bottom:12px; }
.v-sports-sub{ margin:0 0 30px; font-size:16px; color:var(--ink-soft); }
.v-sport-list{ display:flex; justify-content:center; flex-wrap:nowrap; gap:0 clamp(10px, 2.4vw, 36px); }
.v-sport-list span{ display:flex; flex-direction:column; align-items:center; gap:11px; font-family:var(--display); font-size:clamp(12.5px, 1.3vw, 16px); font-weight:500; white-space:nowrap; }
.v-sport-list i{ width:clamp(54px, 8vw, 104px); height:clamp(54px, 8vw, 104px); border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 2.5px #fff, 0 6px 16px rgba(25,25,25,.14); }
@media (max-width:999px){ .v-ben-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .v-ben-grid{ grid-template-columns:1fr; } }
@media (max-width:759px){ .v-sports{ padding:44px 0 28px; } }
@media (max-width:560px){ .v-sport-list{ flex-wrap:wrap; gap:16px 18px; } .v-sport-list i{ width:62px; height:62px; } }


/* About, What is Spotd: three big lines, each in its colour (yellow for
   customers, blue for studios, light grey for the ambition). The open
   one becomes a card of its colour. */
.page-cream .wl{ padding:60px 0 20px; text-align:left; }
.wl{ --blue-t:var(--blue); }
.wl-eyebrow{ margin:0 0 10px; font:800 12px 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.wl h2{ margin:0 0 30px; font-size:clamp(30px, 3.4vw, 42px); letter-spacing:-.03em; }
.wl-list{ display:flex; flex-direction:column; border-top:1px solid rgba(25,25,25,.16); }
.wl-row{ --tone:var(--yellow); position:relative; overflow:hidden; border-bottom:1px solid rgba(25,25,25,.16); transition:background-color .3s, border-radius .3s; }
.wl-blue{ --tone:var(--blue); }
.wl-grey{ --tone:#E7E4DF; }
.wl-row[open]{ background:var(--tone); border-radius:28px; border-bottom-color:transparent; margin:8px 0; }
.wl-row[open]::after{ content:""; position:absolute; right:-36px; bottom:-56px; width:min(230px, 28vw); height:min(230px, 28vw); background:url('logo-mark.svg') center/contain no-repeat; opacity:.1; pointer-events:none; }
.wl-row summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:16px 22px; }
.wl-row summary::-webkit-details-marker{ display:none; }
.wl-n{ width:28px; font-family:var(--display); font-size:15px; color:var(--ink-soft); }
.wl-k{ flex:1; font-family:var(--display); font-weight:500; font-size:clamp(20px, 2vw, 26px); letter-spacing:-.02em; color:var(--ink); }
.wl-plus{ position:relative; flex:none; width:36px; height:36px; border-radius:50%; background:var(--tone); transition:background .25s; }
.wl-grey .wl-plus{ box-shadow:inset 0 0 0 1.5px rgba(25,25,25,.15); }
.wl-plus::before, .wl-plus::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:2px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .25s; }
.wl-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.wl-row[open] .wl-plus{ background:var(--ink); box-shadow:none; }
.wl-row[open] .wl-plus::before, .wl-row[open] .wl-plus::after{ background:#fff; }
.wl-row[open] .wl-plus::after{ transform:translate(-50%,-50%) rotate(0deg); }
.wl-body{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; padding:0 22px 24px 70px; }
.wl-body b{ margin-bottom:6px; font-family:var(--display); font-weight:500; font-size:clamp(19px, 1.9vw, 23px); letter-spacing:-.02em; color:var(--ink); }
.wl-body p{ margin:0; max-width:620px; font-size:16.5px; line-height:1.6; color:var(--ink); opacity:.75; }
.wl-body a{ margin-top:16px; padding:10px 18px; border-radius:999px; background:var(--ink); color:#fff; font-weight:700; font-size:14px; text-decoration:none; transition:transform .15s; }
.wl-body a:hover{ transform:translateY(-1px); }
@media (max-width:759px){
  .page-cream .wl{ padding:44px 0 12px; }
  .wl-row summary{ gap:14px; padding:16px 18px; }
  .wl-n{ width:22px; font-size:13px; }
  .wl-plus{ width:36px; height:36px; }
  .wl-body{ padding:0 18px 22px 54px; }
  .wl-body p{ font-size:15.5px; }
}

/* About, the end of the page in the same look as the top: Our studios
   left-aligned like What is Spotd, the circles with a thin white ring, the
   link as a small black button; the last call on a blue card. */
.page-cream #studios{ text-align:left; }
.page-cream #studios h2{ margin:0 0 28px; font-size:clamp(30px, 3.4vw, 42px); letter-spacing:-.03em; }
.page-cream .studios-soon{ justify-content:flex-start; gap:20px 30px; }
.page-cream .studios-soon i{ box-shadow:0 0 0 2.5px #fff, 0 6px 16px rgba(25,25,25,.12); }
.page-cream .studios-soon span{ color:var(--ink-soft); font-weight:600; }
.studios-foot{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-top:32px; }
.page-cream .studios-note{ margin:0; font-size:18px; }
.page-cream .studios-link{ padding:10px 18px; border-radius:999px; background:var(--ink); color:#fff; font-size:14px; text-decoration:none; }
.page-cream .end-card{ position:relative; overflow:hidden; background:var(--blue); color:var(--ink); border-radius:40px; padding:64px clamp(28px, 5vw, 72px); text-align:left; }
.page-cream .end-card::after{ content:""; position:absolute; right:-70px; top:50%; width:min(380px, 46vw); height:min(380px, 46vw); transform:translateY(-50%); background:url('logo-mark-white.svg') center/contain no-repeat; opacity:.35; pointer-events:none; }
.page-cream .end-card > *{ position:relative; z-index:1; }
.page-cream .end-card h2{ max-width:640px; margin:0; color:var(--ink); text-wrap:balance; }
.page-cream .end-card .ctas{ justify-content:flex-start; margin-top:28px; }
/* The blue carries on to the bottom: the last call and the footer are
   one blue block, rounded only at the top. */
.page-cream .a-end{ padding-bottom:0 !important; }
.page-cream .a-end > .wrap{ max-width:none; padding:0; }
.page-cream .end-card{ border-radius:40px 40px 0 0 !important; padding-bottom:56px !important; }
.page-cream .end-card h2{ max-width:760px !important; text-wrap:balance; }
.page-cream .site-foot{ background:var(--blue) !important; border-top:1px solid rgba(25,25,25,.1) !important; }
.page-cream .site-foot a{ color:var(--ink); }
.page-cream .site-foot small{ color:rgba(25,25,25,.55); }
@media (max-width:759px){ .page-cream .end-card{ border-radius:28px 28px 0 0 !important; } }
@media (max-width:759px){ .page-cream .end-card{ padding:44px 26px; border-radius:30px; } .page-cream .end-card::after{ right:-90px; opacity:.25; } }

/* About, Our classes: a section like the others (small label, title on
   the left), then Pilates and yoga as two tall rounded cards with a class
   clip, a yellow deal tag and the app's blue round button; the name sits
   under the card, on the cream, like a shop's product. */
.page-cream .sv{ padding:72px 0 64px; text-align:left; }
.sv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.sv-head h2{ margin:0; font-size:clamp(30px, 3.4vw, 42px); letter-spacing:-.03em; text-wrap:balance; }
.sv-all{ flex:none; margin-bottom:6px; padding-bottom:3px; border-bottom:1.5px solid var(--ink); color:var(--ink); text-decoration:none; font:700 14px 'Manrope',sans-serif; }
.sv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 24px); }
.sv-card{ display:block; color:var(--ink); text-decoration:none; }
.sv-media{ position:relative; overflow:hidden; aspect-ratio:4/5; max-height:720px; width:100%; border-radius:28px; background:#d9d3ca; isolation:isolate; }
.sv-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos, center); transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.sv-card:hover .sv-media video{ transform:scale(1.04); }
.sv-tag{ position:absolute; left:16px; top:16px; padding:7px 13px; border-radius:999px; background:var(--yellow); color:var(--ink); font:800 13px 'Manrope',sans-serif; }
.sv-go{ position:absolute; right:16px; bottom:16px; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--blue); color:var(--ink); box-shadow:0 8px 22px rgba(25,25,25,.18); transition:transform .25s; }
.sv-card:hover .sv-go{ transform:rotate(45deg); }
.sv-txt{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 6px 0; }
.sv-txt b{ font-family:var(--display); font-weight:500; font-size:clamp(24px, 2.4vw, 30px); letter-spacing:-.02em; }
.sv-txt small{ font-size:15px; color:var(--ink-soft); text-align:right; }
@media (max-width:759px){
  .page-cream .sv{ padding:48px 0 44px; }
  .sv-head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:22px; }
  .sv-media{ border-radius:22px; }
  .sv-go{ width:44px; height:44px; right:12px; bottom:12px; }
  .sv-tag{ left:12px; top:12px; }
  .sv-txt{ flex-direction:column; gap:2px; }
  .sv-txt small{ text-align:left; }
}
@media (max-width:520px){ .sv-grid{ grid-template-columns:1fr; } }

/* The small labels above the titles, spaced out a little more, like the
   sport brands' (What is Spotd, Our classes, How it works, Our studios). */
.wl-eyebrow{ letter-spacing:.2em; font-weight:700; }
.page-cream #how .wl-eyebrow{ margin-bottom:10px; text-align:center; color:rgba(255,255,255,.55); }
.page-cream #how h2{ font-size:clamp(30px, 3.4vw, 42px); letter-spacing:-.03em; }


/* About, Spotd in three numbers: big thin figures over a hairline, a
   short line under each, lots of room (like the sport brands' pages). */
.page-cream .st{ padding:40px 0 88px; text-align:left; }
.st .wl-eyebrow{ margin-bottom:26px; }
.st-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 3vw, 44px); }
.st-grid div{ border-top:1px solid rgba(25,25,25,.22); padding-top:22px; }
.st-grid b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(48px, 7.4vw, 104px); line-height:1; letter-spacing:-.05em; white-space:nowrap; color:var(--ink); }
.st-grid p{ margin:16px 0 0; max-width:260px; font-size:15.5px; line-height:1.5; color:var(--ink-soft); }
@media (max-width:600px){
  .page-cream .st{ padding:24px 0 60px; }
  .st-grid{ grid-template-columns:1fr; gap:28px; }
  .st-grid b{ font-size:64px; }
}

/* About, Our studios: the empty circles kept, but quiet (white, a thin
   line, the logo faint) and the label in spaced capitals; the link as a
   thin underline like See all classes. */
.page-cream .studios-soon i{ background:#fff; box-shadow:inset 0 0 0 1px rgba(25,25,25,.14); }
.page-cream .studios-soon img{ width:30px; opacity:.22; }
.page-cream .studios-soon span{ font:700 11px 'Manrope',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(25,25,25,.45); }
.page-cream .studios-note{ font-size:17px; color:var(--ink-soft); }
/* About, the small links (Join as a partner, Write to us): a white pill
   with the arrow in a dark circle, no underline. */
.page-cream .studios-link, .faq-ask-phone{ display:inline-flex; align-items:center; gap:12px; padding:7px 7px 7px 18px; border:none; border-radius:999px; background:#fff; color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; box-shadow:0 1px 2px rgba(25,25,25,.06); transition:box-shadow .2s, transform .2s; }
.page-cream .studios-link::after, .faq-ask-phone::after{ content:"›"; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-size:16px; line-height:1; padding-bottom:2px; box-sizing:border-box; }
.page-cream .studios-link:hover, .faq-ask-phone:hover{ box-shadow:0 6px 16px rgba(25,25,25,.1); transform:translateY(-1px); }

/* About, the class clips in the same warm, soft tone as the photo on top. */
.sv-media video{ filter:saturate(.9) sepia(.07); }

/* About, the store badges at the end, on the blue. */
.page-cream .end-card .end-app{ margin:40px 0 12px; font:700 12px 'Manrope',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(25,25,25,.6); }
.page-cream .end-card .store-btns{ justify-content:flex-start; margin-top:0; }
.page-cream .end-card .store-soon{ color:var(--ink); }

/* About, everything a size smaller (calmer, more premium): the What is
   Spotd lines, the numbers, the last call. The top title is the same
   size as For venues' (64 px on a computer, 32 px on a phone). */
.page-cream .a-hero h1{ font-size:clamp(34px, 5vw, 64px); max-width:1000px; }
@media (max-width:520px){ .page-cream .a-hero h1{ font-size:32px; line-height:1.08; } }
.page-cream .wl h2, .page-cream .sv-head h2, .page-cream #how h2, .page-cream #studios h2, .page-cream #faq h2{ font-size:clamp(26px, 2.6vw, 34px); }
.page-cream .end-card h2{ font-size:clamp(26px, 2.8vw, 38px); }
.page-cream .wl-k{ font-size:clamp(18px, 1.6vw, 21px); }
.page-cream .wl-body b{ font-size:clamp(17px, 1.5vw, 19px); }
.page-cream .wl-body p{ font-size:15.5px; }
.page-cream .studios-soon i{ width:88px; height:88px; }
.page-cream .studios-note{ font-size:16px; }
.st-grid b{ font-size:clamp(40px, 4.6vw, 64px); letter-spacing:-.045em; }
.st-grid p{ margin-top:12px; font-size:14.5px; max-width:230px; }
.page-cream .st{ padding:24px 0 72px; }
.page-cream .wl{ padding:56px 0 12px; }

/* Our classes, editorial: the title and a short line on the left, the
   two clips on the right, smaller, the second one set a little lower. */
.page-cream .sv{ padding:64px 0 56px; }
.sv-layout{ display:grid; grid-template-columns:minmax(220px, 300px) 1fr; gap:clamp(28px, 5vw, 72px); align-items:start; }
.sv-head{ display:block; margin:0; padding-top:8px; }
.sv-head h2{ margin:0 0 14px; }
.sv-sub{ margin:0 0 22px; font-size:15.5px; line-height:1.55; color:var(--ink-soft); }
.sv-all{ display:inline-block; margin:0; }
.sv-grid{ gap:clamp(14px, 1.8vw, 22px); align-items:start; }
.sv-grid .sv-card:nth-child(2){ margin-top:56px; }
.sv-media{ aspect-ratio:3/4; max-height:520px; border-radius:24px; }
.sv-go{ width:44px; height:44px; right:14px; bottom:14px; }
.sv-txt{ padding:14px 4px 0; }
.sv-txt b{ font-size:clamp(19px, 1.7vw, 22px); }
.sv-txt small{ font-size:14px; }
/* The clips breathe: a slow zoom out while they play. */
.sv-media video{ animation:sv-breathe 9s ease-in-out infinite alternate; }
.sv-card:hover .sv-media video{ transform:none; }
@keyframes sv-breathe{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
@media (max-width:759px){
  .sv-layout{ grid-template-columns:1fr; gap:22px; }
  .sv-grid .sv-card:nth-child(2){ margin-top:32px; }
  .sv-txt{ flex-direction:row; }
}
@media (max-width:520px){ .sv-grid .sv-card:nth-child(2){ margin-top:0; } }

/* Coming in as they reach the screen: a soft rise, and the clips open
   up from a smaller frame. Without motion (or JS) everything just shows. */
.motion .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.motion .reveal.in{ opacity:1; transform:none; }
.motion .sv-card.reveal .sv-media{ clip-path:inset(10% 8% round 24px); transition:clip-path 1.2s cubic-bezier(.2,.8,.2,1); }
.motion .sv-card.reveal.in .sv-media{ clip-path:inset(0 round 24px); }
.motion .sv-grid .sv-card:nth-child(2), .motion .st-grid .reveal:nth-child(2){ transition-delay:.15s; }
.motion .st-grid .reveal:nth-child(3){ transition-delay:.3s; }
.motion .sv-grid .sv-card:nth-child(2) .sv-media{ transition-delay:.15s; }
@media (prefers-reduced-motion: reduce){ .sv-media video{ animation:none; } }

/* About, less cut into sections: no small labels above the titles, the
   numbers carry on right under the clips (no lines), and the gaps
   between the parts are tighter, so the page reads as one flow. */
.page-cream .wl{ padding:40px 0 8px; }
.page-cream .sv{ padding:56px 0 8px; }
.page-cream .st{ padding:48px 0 72px; }
.st-grid div{ border-top:none; padding-top:0; }
.st-grid b{ color:var(--ink); }
.page-cream #studios{ padding:64px 0 56px; }
.page-cream #how h2{ margin-top:8px; }

/* About, Our classes: the title on the left and See all classes on the
   right, then the two clips side by side, the same size, the sport's name
   on the clip in white. */
.sv-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 26px; padding:0; }
.sv-head h2{ margin:0 0 8px; }
.sv-sub{ margin:0; }
.sv-grid{ grid-template-columns:1fr 1fr; gap:clamp(12px, 1.6vw, 20px); }
.sv-grid .sv-card:nth-child(2){ margin-top:0; }
.sv-media{ aspect-ratio:4/5; max-height:600px; border-radius:28px; }
.sv-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5)); pointer-events:none; }
.sv-over{ position:absolute; left:clamp(18px, 2.4vw, 30px); bottom:clamp(18px, 2.4vw, 28px); z-index:1; display:flex; flex-direction:column; gap:4px; color:#fff; }
.sv-over b{ font-family:var(--display); font-weight:500; font-size:clamp(24px, 2.6vw, 34px); letter-spacing:-.02em; line-height:1.05; }
.sv-over small{ font-size:14.5px; opacity:.85; }
.sv-go{ z-index:1; right:clamp(16px, 2.2vw, 26px); bottom:clamp(16px, 2.2vw, 26px); }
@media (max-width:759px){
  .sv-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .sv-media{ border-radius:22px; }
}
@media (max-width:520px){ .sv-media{ aspect-ratio:4/3; } }

/* How it works back on its black rounded card (contrast in the middle of
   the cream), the title centred. */
.page-cream #how{ padding:56px 0 40px; }
.page-cream #how h2{ margin:0 0 20px; color:#fff; }

/* About, the blue at the end starts with the same rounded corners as the
   cream under the top photo, straight down to the bottom. */
.page-cream .end-card{ border-radius:40px 40px 0 0 !important; }
@media (max-width:759px){ .page-cream .end-card{ border-radius:28px 28px 0 0 !important; } }

/* About, one rule for the layout: the top is centred (the promise, the
   button, the badges, then the three key numbers right under it); from
   What is Spotd on, every title and block starts on the same left edge,
   the How it works and blue cards included. */
.page-cream .st{ padding:40px 0 40px; text-align:center; }
.page-cream .st-grid{ max-width:900px; margin:0 auto; }
.page-cream .st-grid div{ display:flex; flex-direction:column; align-items:center; }
.page-cream .st-grid p{ margin-inline:auto; }
.page-cream .wl{ padding:48px 0 8px; }
.page-cream #how h2{ text-align:left; }
.page-cream #how .how-x{ justify-content:space-between; }
.page-cream .end-card{ padding-left:max(32px, calc((100vw - 1180px) / 2 + 32px)) !important; padding-right:max(32px, calc((100vw - 1180px) / 2 + 32px)) !important; }
@media (max-width:759px){
  .page-cream .end-card{ padding-left:20px !important; padding-right:20px !important; }
  .page-cream .st{ padding:28px 0 28px; }
}

/* About, the three key numbers as one quiet strip: thin lines between
   them, the figures a bit smaller but bolder (Plus Jakarta 500, tighter),
   the line under each shorter and smaller. */
.page-cream .st-grid{ max-width:880px; gap:0; }
.page-cream .st-grid div{ padding:6px 20px; }
.page-cream .st-grid div + div{ border-left:1px solid rgba(25,25,25,.14); }
.page-cream .st-grid b{ font-weight:500; font-size:clamp(34px, 3.6vw, 46px); letter-spacing:-.035em; }
.page-cream .st-grid p{ margin-top:10px; max-width:200px; font-size:14px; line-height:1.45; }
@media (max-width:600px){
  .page-cream .st-grid{ grid-template-columns:repeat(3, 1fr); }
  .page-cream .st-grid div{ padding:4px 8px; }
  .page-cream .st-grid b{ font-size:28px; }
  .page-cream .st-grid p{ font-size:12.5px; }
}
.page-cream .st-grid p{ max-width:230px; }
/* No thin line where the top photo ends: a strip of cream over its last pixels. */
.page-cream .a-hero.a-photo{ position:relative; }
.page-cream .a-hero.a-photo::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:var(--cream); pointer-events:none; }

/* About, the top photo shows in full (a dark veil for the white title,
   gone towards the bottom, no fade), and the page's cream slides over its
   bottom edge with rounded corners, like the app's home. */
.page-cream .a-hero.a-photo{
  padding-bottom:130px !important;
  background:
    linear-gradient(180deg, rgba(25,25,25,.72) 0%, rgba(25,25,25,.6) 30%, rgba(25,25,25,.42) 52%, rgba(25,25,25,.16) 72%, rgba(25,25,25,0) 88%),
    var(--hero-photo) var(--hero-pos, center 35%)/cover, var(--cream);
}
.page-cream .a-hero.a-photo::after{ display:none; }
.page-cream .a-hero + .a-section{ position:relative; z-index:1; margin-top:-40px; border-radius:40px 40px 0 0; background:var(--cream); }
@media (max-width:759px){
  .page-cream .a-hero.a-photo{ padding-bottom:84px !important; }
  .page-cream .a-hero + .a-section{ margin-top:-28px; border-radius:28px 28px 0 0; }
}


/* About, How it works a size smaller: the logo and its circles, the
   step's title and text, the card's padding. */
.page-cream #how{ padding:44px 0 36px; }
.page-cream #how .hx-mark{ --hx:min(430px, 40vw); }
.page-cream #how .how-x{ gap:48px; grid-template-columns:auto minmax(0, 380px); }
.page-cream #how .hx-panel h3{ font-size:24px; }
.page-cream #how .hx-panel p#hx-text{ font-size:15px; min-height:96px; }
.page-cream #how .hx-num{ width:40px; height:40px; font-size:16px; margin-bottom:14px; }
.page-cream #how .hx-nav button{ width:40px; height:40px; font-size:20px; }
@media (max-width:759px){ .page-cream #how .hx-mark{ --hx:min(330px, 44vw); } .page-cream #how .how-x{ grid-template-columns:auto minmax(0, 1fr); column-gap:28px; } }
@media (max-width:559px){ .page-cream #how .hx-mark{ --hx:min(320px, 80vw); } .page-cream #how .how-x{ grid-template-columns:1fr; justify-content:center; } }
.page-cream #how .how-x{ justify-content:start; column-gap:clamp(48px, 8vw, 120px); }

/* About, the How it works card as wide as the clips above it (not the
   whole screen), its content filling it: the title and the logo on the
   left, the step on the right. */
.page-cream #how{ width:min(1116px, calc(100% - 28px)); margin:24px auto 0; border-radius:32px; padding:48px 0 40px; }
.page-cream #how > .wrap{ max-width:none; padding:0 clamp(28px, 4.5vw, 56px); }
.page-cream #how .how-x{ grid-template-columns:auto minmax(0, 400px); justify-content:space-between; column-gap:40px; }
@media (min-width:1100px){ .page-cream #how .how-x{ padding-right:clamp(0px, 4vw, 56px); } }
@media (max-width:759px){ .page-cream #how{ width:calc(100% - 16px); margin-top:8px; border-radius:28px; padding:40px 0 32px; } .page-cream #how .how-x{ grid-template-columns:auto minmax(0, 1fr); column-gap:28px; } }
@media (max-width:559px){ .page-cream #how .how-x{ grid-template-columns:1fr; justify-content:center; } }
/* Exactly the clips' width: the page's side margin on each side. */
.page-cream #how{ width:min(1116px, calc(100% - 64px)); }
@media (max-width:759px){ .page-cream #how{ width:calc(100% - 40px); } }

/* About, How it works across the whole width of the screen (no side
   margins, straight edges), its content on the page's width in the
   middle: the title and the logo on the left, the step on the right. */
.page-cream #how, .page-cream #how[class]{ width:100% !important; margin:32px 0 0 !important; border-radius:0 !important; padding:56px 0 48px; }
.page-cream #how > .wrap{ max-width:1180px; padding:0 32px; }
.page-cream #how .how-x{ padding-right:0; }
@media (max-width:759px){ .page-cream #how > .wrap{ padding:0 20px; } .page-cream #how, .page-cream #how[class]{ margin-top:16px !important; padding:40px 0 32px; } }

/* About, How it works as before: nearly the whole width with a small
   margin and rounded corners; only its content is smaller. */
.page-cream #how, .page-cream #how[class]{ width:auto !important; margin:24px 14px 0 !important; border-radius:36px !important; }
@media (max-width:759px){ .page-cream #how, .page-cream #how[class]{ margin:16px 8px 0 !important; border-radius:28px !important; } }

/* Phone: the two store badges side by side, as tall as Browse classes. */
@media (max-width:520px){
  .store-btns{ flex-wrap:nowrap; gap:8px; }
  .store-btn{ flex:none; height:52px; gap:7px; padding:0 14px 0 11px; border-radius:12px; }
  .store-btn svg{ width:22px; height:22px; }
  .store-btn span{ font-size:16.5px; }
  .store-btn small{ font-size:9.5px; }
}

/* About on a phone: How it works takes less height (a smaller logo, the
   step right under it, no "Tap a circle", the arrows next to the number). */
@media (max-width:559px){
  .page-cream #how, .page-cream #how[class]{ padding:28px 0 22px; }
  .page-cream #how h2{ margin-bottom:6px; font-size:24px; }
  .page-cream #how .how-x{ gap:10px; }
  .page-cream #how .hx-mark{ --hx:min(250px, 66vw); }
  .page-cream #how .hx-hint{ display:none; }
  .page-cream #how .hx-panel{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:12px; text-align:left; }
  .page-cream #how .hx-num{ grid-column:1; grid-row:1; width:34px; height:34px; font-size:15px; margin:0; }
  .page-cream #how .hx-panel h3{ grid-column:2; grid-row:1; margin:0; font-size:19px; }
  .page-cream #how .hx-nav{ grid-column:3; grid-row:1; margin:0; gap:6px; }
  .page-cream #how .hx-nav button{ width:34px; height:34px; font-size:18px; }
  .page-cream #how .hx-panel p#hx-text{ grid-column:1 / -1; margin-top:10px; min-height:0; font-size:14px; line-height:1.55; }
}

/* About on a phone: Pilates and yoga as two taller cards side by side
   (the text smaller so nothing overlaps); the studio circles on one line
   that scrolls sideways. */
@media (max-width:520px){
  .sv-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .sv-media{ aspect-ratio:3/4; border-radius:20px; }
  .sv-over{ left:12px; right:12px; bottom:12px; }
  .sv-over b{ font-size:20px; }
  .sv-over small{ font-size:11.5px; line-height:1.3; padding-right:30px; }
  .sv-go{ width:30px; height:30px; right:10px; bottom:12px; }
  .sv-go svg{ width:14px; height:14px; }
  .page-cream .studios-soon{ flex-wrap:nowrap; overflow-x:auto; gap:14px; margin:0 -20px; padding:4px 20px 6px; scrollbar-width:none; }
  .page-cream .studios-soon::-webkit-scrollbar{ display:none; }
  .page-cream .studios-soon span{ flex:none; gap:8px; font-size:9.5px; }
  .page-cream .studios-soon i{ width:66px; height:66px; }
  .page-cream .studios-soon img{ width:24px; }
  .page-cream #studios{ padding:40px 0 40px; }
}

/* For venues on a phone: a smaller title, the two buttons side by side, a
   smaller partner app under them, tighter spacing. */
@media (max-width:520px){
  .page-ink .v2-hero.a-photo{ padding:calc(var(--bar-h) + 36px) 0 48px !important; }
  .v2-hero-in{ gap:30px; }
  .v2-eyebrow{ margin-bottom:12px; font-size:11.5px; }
  .v2-hero h1{ font-size:32px; line-height:1.08; }
  .v2-sub{ margin:12px 0 22px; font-size:15px; }
  .v2-hero .ctas{ flex-wrap:nowrap; gap:8px; }
  .v2-hero .ctas .btn-big{ padding:12px 18px; font-size:14px; white-space:nowrap; }
  .v-phone{ width:220px; padding:9px; border-radius:36px; }
  .v-screen{ padding:14px 10px; border-radius:28px; gap:7px; }
  .v-notif{ font-size:10px; padding:8px 10px; }
  .v-day{ font-size:16px; margin-top:4px; }
  .v-class{ padding:8px 9px; border-radius:13px; }
  .v-class b{ font-size:11px; }
  .v-class span{ font-size:9.5px; }
  .v-step i{ width:19px; height:19px; font-size:11px; }
  .v-step b{ font-size:12px; }
  .v-release{ padding:10px; font-size:12px; }
}

/* For venues on a phone, shorter: the four benefits two by two, each step
   as a row (a small photo on the left, the text on the right), the last
   buttons side by side. */
@media (max-width:520px){
  .v-benefits h2, .v-sports h2{ margin-bottom:20px; font-size:26px; }
  .v-ben-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .v-ben-grid div{ padding:18px 16px; border-radius:20px; }
  .v-ben-grid b{ font-size:16.5px; margin-bottom:6px; line-height:1.2; }
  .v-ben-grid p{ font-size:13px; line-height:1.45; }
  .page-ink .v-steps{ padding:36px 0 30px; }
  .page-ink .v-steps h2{ margin-bottom:24px; font-size:26px; }
  .v-steps .a-steps{ grid-template-columns:1fr; gap:18px; }
  .v-steps .a-step{ display:grid; grid-template-columns:76px 1fr; column-gap:16px; align-items:center; text-align:left; }
  .v-steps .a-step i{ grid-row:1 / span 2; width:72px; height:72px; margin:0; }
  .v-steps .a-step i b{ width:26px; height:26px; top:-4px; font-size:12.5px; }
  .v-steps .a-step h3{ margin:0 0 3px; font-size:17px; align-self:end; }
  .v-steps .a-step p{ margin:0; max-width:none; font-size:13.5px; line-height:1.5; align-self:start; }
  .page-ink .end-card .ctas{ flex-wrap:nowrap; gap:8px; justify-content:center; }
  .page-ink .end-card .ctas .btn{ padding:12px 16px; font-size:14px; white-space:nowrap; }
}

/* For venues, A few minutes a day: tap a step to read more (everywhere). */
.v-steps .a-step{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.v-steps .a-step-more{ display:none; }
.v-steps .a-step.open .a-step-more{ display:block; margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); font-size:14px; line-height:1.55; text-align:left; animation:stepIn .25s ease; }
.v-steps .a-step h3::after{ content:"+"; display:inline-block; margin-left:8px; color:var(--yellow); transition:transform .2s; }
.v-steps .a-step.open h3::after{ transform:rotate(45deg); }
.v-steps .a-step.open i{ box-shadow:0 0 0 2.5px var(--yellow); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

@media (max-width:520px){
  .v-steps .a-step.open .a-step-more{ grid-column:1 / -1; margin-top:10px; font-size:13px; }

  /* The top: the drawn partner app next to the title. */
  .v2-hero-in{ grid-template-columns:minmax(0, 1fr) 128px; grid-template-areas:"eye phone" "h1 phone" "sub phone" "ctas ctas"; column-gap:14px; row-gap:0; justify-items:start; text-align:left; align-items:center; }
  .v2-copy{ display:contents; }
  .v2-eyebrow{ grid-area:eye; align-self:end; }
  .v2-hero h1{ grid-area:h1; margin:0; font-size:27px; }
  .v2-sub{ grid-area:sub; align-self:start; margin:10px 0 0; font-size:13.5px; }
  .v2-hero .ctas{ grid-area:ctas; justify-content:flex-start; margin-top:22px; }
  .v-phone{ grid-area:phone; width:256px; zoom:.5; justify-self:end; }

  /* The last 12 hours, as a vertical timeline: a line on the left, each
     moment on a row with its deal on the right. */
  .v-life h2{ margin-bottom:22px; font-size:26px; }
  .v-timeline{ grid-template-columns:1fr; row-gap:0; max-width:none; text-align:left; }
  .v-timeline::before{ display:block; left:9px; right:auto; top:14px; bottom:14px; width:2px; height:auto; }
  .v-timeline li{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px; padding:12px 0 12px 34px; }
  .v-timeline li::before{ left:10px; top:50%; transform:translate(-50%, -50%); width:16px; height:16px; box-shadow:0 0 0 4px #fff; }
  .v-timeline b{ grid-column:1; font-size:17px; }
  .v-timeline span{ grid-column:1; font-size:13px; }
  .v-timeline em{ grid-column:2; grid-row:1 / span 2; margin:0; padding:5px 12px; font-size:13.5px; }
  .v-notes{ margin-top:22px; }
  .v-notes p{ font-size:13.5px; padding:14px 16px; }
}
@media (max-width:520px){ .page-ink .v2-hero.a-photo{ padding-bottom:96px !important; } }
@media (max-width:520px){
  .page-ink .v2-hero.a-photo{
    background:
      linear-gradient(180deg, rgba(249,244,237,0) 82%, rgba(249,244,237,.6) 91%, rgba(249,244,237,.95) 97%, var(--cream) 100%),
      linear-gradient(180deg, rgba(25,25,25,.82) 0%, rgba(25,25,25,.74) 45%, rgba(25,25,25,.62) 70%, rgba(25,25,25,.4) 85%, rgba(25,25,25,.1) 96%),
      var(--v2-photo) center 40%/cover, var(--cream);
  }
}
/* For venues on a phone: no drawn partner app (computer only), the top centred. */
@media (max-width:520px){
  .v-phone{ display:none; }
  .v2-hero-in{ grid-template-columns:1fr; grid-template-areas:"eye" "h1" "sub" "ctas"; justify-items:center; text-align:center; }
  .v2-hero h1{ font-size:32px; }
  .v2-sub{ margin-top:12px; font-size:15px; }
  .v2-hero .ctas{ justify-content:center; }
  .page-ink .v2-hero.a-photo{ padding:calc(var(--bar-h) + 44px) 0 80px !important; }
}

/* For venues, the end like About's: the yellow from a straight edge down to
   the very bottom, the footer in the same yellow, the text on the left
   with the logo in white on the right. */
.page-ink .a-end{ padding:24px 0 0 !important; }
.page-ink .a-end > .wrap{ max-width:none; padding:0; }
.page-ink .end-card{ position:relative; overflow:hidden; border-radius:0 !important; padding:64px max(32px, calc((100vw - 1180px) / 2 + 32px)) 56px; text-align:left; }
.page-ink .end-card::after{ content:""; position:absolute; right:-70px; top:50%; width:min(380px, 46vw); height:min(380px, 46vw); transform:translateY(-50%); background:url('logo-mark-white.svg') center/contain no-repeat; opacity:.55; pointer-events:none; }
.page-ink .end-card > *{ position:relative; z-index:1; }
.page-ink .end-card h2{ max-width:640px; margin:0; text-wrap:balance; }
.page-ink .end-card .ctas{ justify-content:flex-start; margin-top:28px; }
.page-ink .site-foot{ background:var(--yellow) !important; border-top:1px solid rgba(25,25,25,.1) !important; }
.page-ink .site-foot a{ color:var(--ink); }
.page-ink .site-foot small{ color:rgba(25,25,25,.55); }
@media (max-width:759px){
  .page-ink .end-card{ padding:44px 20px 40px; }
  .page-ink .end-card::after{ right:-90px; opacity:.4; }
}
@media (max-width:520px){ .page-ink .end-card .ctas{ justify-content:flex-start; } }

/* One type scale on About and For venues: the big title at the top, one
   size for every section title (the end blocks included), one size for
   the titles inside cards. */
.page-cream .a-section h2, .page-cream .wl h2, .page-cream .sv-head h2, .page-cream #how h2, .page-cream #studios h2, .page-cream .end-card h2,
.page-ink .v-benefits h2, .page-ink .vc h2, .page-ink .v-sports h2, .page-ink .v-life h2, .page-ink .v-steps h2, .page-ink .end-card h2{
  font-size:clamp(26px, 2.8vw, 36px) !important; line-height:1.15; letter-spacing:-.025em;
}
.v-ben-grid b, .v-steps .a-step h3, .v-timeline b, .wl-k, .wl-body b, .sv-over b{ font-size:clamp(17px, 1.6vw, 21px) !important; }
@media (max-width:520px){
  .page-cream .a-section h2, .page-cream .wl h2, .page-cream .sv-head h2, .page-cream #how h2, .page-cream #studios h2, .page-cream .end-card h2,
  .page-ink .v-benefits h2, .page-ink .vc h2, .page-ink .v-sports h2, .page-ink .v-life h2, .page-ink .v-steps h2, .page-ink .end-card h2{ font-size:25px !important; }
  .v-ben-grid b, .v-steps .a-step h3, .v-timeline b, .wl-k, .wl-body b{ font-size:16.5px !important; }
  .sv-over b{ font-size:19px !important; }
}

/* For venues, Who can join: centred like the other sections, then two wide
   Pilates and yoga photos with what each covers. */
.v-sports .v-sports-sub{ margin:0 0 30px; }
.v-join-photos{ display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
.v-join-photos span{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; height:clamp(240px, 26vw, 360px); padding:26px 28px; border-radius:28px; overflow:hidden; background-size:cover; background-position:center; isolation:isolate; }
.v-join-photos span::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)); }
.v-join-photos b{ font-family:var(--display); font-weight:500; font-size:clamp(22px, 2.2vw, 30px); line-height:1.1; color:#fff; letter-spacing:-.02em; }
.v-join-photos small{ font-size:14.5px; color:rgba(255,255,255,.85); }
@media (max-width:759px){
  .v-sports .v-sports-sub{ margin-bottom:20px; font-size:14.5px; }
  .v-join-photos{ gap:10px; }
  .v-join-photos span{ height:200px; padding:16px; border-radius:20px; }
  .v-join-photos small{ font-size:12px; }
}

/* For venues, with or without Spotd: a switch, one class with 12 spots (the
   empty ones fill in blue), and what changes for the studio. */
.vc{ padding:64px 0 40px; color:var(--ink); text-align:center; }
.vc h2{ margin:0 0 26px; }
.vc-switch{ display:inline-flex; gap:4px; padding:5px; margin:0 0 30px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(25,25,25,.05), 0 10px 30px -18px rgba(25,25,25,.3); }
.vc-switch button{ padding:11px 22px; border:none; border-radius:999px; background:none; font:700 14.5px 'Manrope',sans-serif; color:var(--ink-soft); cursor:pointer; transition:background .25s, color .25s; }
.vc-switch button.on{ background:var(--ink); color:#fff; }
.vc-switch button[data-vc="on"].on{ background:var(--blue); color:var(--ink); }
.vc-card{ display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:clamp(24px, 4vw, 56px); align-items:center; padding:clamp(24px, 4vw, 44px); border-radius:32px; background:#fff; text-align:left; box-shadow:0 1px 2px rgba(25,25,25,.04), 0 30px 60px -36px rgba(25,25,25,.3); }
.vc-class{ padding:26px; border-radius:24px; background:var(--cream); }
.vc-when{ margin:0 0 4px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.vc-class h3{ margin:0 0 18px; font-family:var(--display); font-weight:500; font-size:clamp(22px, 2vw, 28px); letter-spacing:-.02em; }
.vc-seats{ display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; max-width:320px; }
.vc-seats i, .vc-legend i{ display:block; aspect-ratio:1; border-radius:50%; transition:background .5s, box-shadow .5s, transform .5s; }
.vc-seats i.b, .vc-legend i.b{ background:var(--ink); }
.vc-seats i.s{ background:transparent; box-shadow:inset 0 0 0 2px rgba(25,25,25,.18); }
.vc-card[data-state="on"] .vc-seats i.s{ background:var(--blue); box-shadow:none; transform:scale(1.04); }
.vc-card[data-state="on"] .vc-seats i.s:nth-child(10){ transition-delay:.08s; }
.vc-card[data-state="on"] .vc-seats i.s:nth-child(11){ transition-delay:.16s; }
.vc-card[data-state="on"] .vc-seats i.s:nth-child(12){ transition-delay:.24s; }
.vc-count{ margin:18px 0 12px; font-size:15px; color:var(--ink-soft); }
.vc-count b{ font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink); }
.vc-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.vc-legend span{ display:inline-flex; align-items:center; gap:6px; }
.vc-legend i{ width:10px; }
.vc-legend .vc-l-s i{ background:var(--blue); }
.vc-legend .vc-l-e i{ box-shadow:inset 0 0 0 1.5px rgba(25,25,25,.25); }
.vc-card[data-state="off"] .vc-l-s{ display:none; }
.vc-card[data-state="on"] .vc-l-e{ display:none; }
.vc-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.vc-points li{ display:flex; flex-direction:column; gap:4px; padding:16px 0 16px 34px; border-top:1px solid rgba(25,25,25,.08); position:relative; }
.vc-points li:first-child{ border-top:none; padding-top:0; }
.vc-points li::before{ content:""; position:absolute; left:0; top:18px; width:20px; height:20px; border-radius:50%; background:rgba(25,25,25,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23191919' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat; transition:background .3s; }
.vc-points li:first-child::before{ top:2px; }
.vc-card[data-state="on"] .vc-points li::before{ background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23191919' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.vc-points b{ font-family:var(--display); font-weight:500; font-size:clamp(16px, 1.4vw, 19px); letter-spacing:-.01em; }
.vc-points span{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
@media (max-width:759px){
  .vc{ padding:44px 0 24px; }
  .vc-card{ grid-template-columns:1fr; padding:18px; border-radius:24px; }
  .vc-class{ padding:20px; }
  .vc-switch button{ padding:10px 16px; font-size:13.5px; }
  .vc-points span{ font-size:13.5px; }
}