/* /assets/learn.css — Scalus Learn: the hub at /learn/ and the four module pages.
 *
 * SYSTEM (declared before a pixel was placed, 12 Sep 2026)
 *   Surfaces   the house --bg, plus ONE tile surface: the "Apple rectangle". A big
 *              continuous looking radius, a light top down glass gradient, a hairline
 *              border, an inner highlight. Every card, frame and chip on these pages is
 *              that one tile at a different size, so the pages read as one object.
 *   Corners    concentric, always. --R is the tile radius, --G the gap (padding PLUS the
 *              1px border), and every nested radius is calc(var(--R) - var(--G)).
 *              Never a hardcoded nested radius. sra measures it.
 *   Type       the house Inter. Display clamp(2.5rem, 6vw, 4.8rem) at 1.02 leading and
 *              tight tracking, h2 clamp(1.9rem, 3.6vw, 2.9rem), h3 1.25rem, body 1.02rem
 *              at 1.75, small .86rem. Nothing else.
 *   Colour     house green for every action. A module's brand colour appears ONLY in its
 *              logo and the halo behind it, never on buttons or text.
 *   Motion     one easing, --ease, reveals 700 to 900ms with a stagger of 80ms, ambient
 *              loops 6 to 9s. Everything decorative is dropped under reduced motion.
 */

:root{
  --R:32px; --G:15px;            /* tile radius and gap, the concentric pair */
  --R2:calc(var(--R) - var(--G));/* the radius a child of a tile gets */
  --ease:cubic-bezier(.2,.7,.2,1);
  --tile:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  --tile-line:rgba(255,255,255,.12);
  --tile-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.42);
}
@media(max-width:760px){:root{--R:26px;--G:13px}}

/* ------------------------------------------------------------ the tile */
.ap{position:relative;border-radius:var(--R);padding:var(--G);
  /* re-derive the child radius HERE so .ap-sm and .ap-xs, which override --R and --G
     on this same element, actually flow through. Declared only on :root it resolves
     against the root's 32/15 and every smaller tile inherits the wrong inner radius. */
  --R2:calc(var(--R) - var(--G));
  background:var(--tile);border:1px solid var(--tile-line);box-shadow:var(--tile-shadow);
  transition:transform .7s var(--ease),border-color .5s var(--ease),box-shadow .7s var(--ease)}
.ap>img,.ap>figure>img,.ap>.ap-in,.ap>video{border-radius:var(--R2);display:block;width:100%;height:auto}
.ap-in{padding:clamp(18px,3vw,30px);height:100%;box-sizing:border-box}
.ap.lift:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 34px 80px rgba(0,0,0,.5)}
.ap.glow-g{box-shadow:var(--tile-shadow),0 0 0 6px rgba(50,207,117,.06)}

/* small tiles keep the same construction with a smaller pair */
.ap-sm{--R:22px;--G:11px}
.ap-xs{--R:16px;--G:8px}

/* ------------------------------------------------------------ type */
.lrn h1,.lrn .h1{font-size:clamp(2.5rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;margin:0 0 22px;text-wrap:balance}
.lrn h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.028em;font-weight:800;
  margin:0 0 16px;text-wrap:balance}
.lrn h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.012em;font-weight:750;margin:0 0 10px}
.lrn p{line-height:1.75;font-size:1.02rem}
.lrn .lead{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.6;color:var(--ink-soft);max-width:44ch}
.lrn .small{font-size:.86rem;color:var(--ink-mute);line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 18px}
.eyebrow::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--green);
  transform-origin:left;animation:eyeLine 1.1s var(--ease) both}
@keyframes eyeLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lrn section{padding:clamp(56px,8vw,104px) 0}
.lrn .sec-head{max-width:720px;margin:0 0 clamp(28px,4vw,46px)}
.lrn .sec-head.c{margin-left:auto;margin-right:auto;text-align:center}
.lrn .sec-head.c .lead{margin-left:auto;margin-right:auto}

/* the floating bar is 74px deep on desktop and 76px on a phone, so the standard
   is about 44px of clear air under it: 118 and 120. sc.css pins every plain hero
   with !important, so this has to shout back. */
.lrn section.hero.lrn-top{padding-top:124px !important;padding-bottom:clamp(40px,6vw,80px)}
@media(max-width:860px){.lrn section.hero.lrn-top{padding-top:120px !important}}

/* ------------------------------------------------------------ reveal
   The hidden start state only applies under html.js (the head adds it), so a
   page with scripts off, or a crawler, shows everything. */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-x{opacity:0;transform:translateX(-26px);transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms)}
html.js .rv-x.in{opacity:1;transform:none}
html.js .rv-s{opacity:0;transform:scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms)}
.rv-w>span{display:inline-block}
html.js .rv-s.in{opacity:1;transform:none}
html.js .rv-w>span{opacity:0;transform:translateY(.5em) rotate(1.5deg);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
html.js .rv-w.in>span{opacity:1;transform:none}

/* ------------------------------------------------------------ hero */
.lrn-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:900px){.lrn-hero{grid-template-columns:minmax(0,1fr);gap:34px}}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:28px 0 0}
.hero-fine{margin:16px 0 0;font-size:.86rem;color:var(--ink-mute);line-height:1.6}
.price-cap{display:inline-flex;align-items:baseline;gap:10px;padding:11px 20px;border-radius:999px;
  background:rgba(50,207,117,.1);border:1px solid rgba(50,207,117,.36);font-weight:700;margin:0 0 6px}
.price-cap b{font-size:1.3rem;letter-spacing:-.02em;white-space:nowrap}
@media(max-width:560px){.price-cap{flex-wrap:wrap;align-items:center;row-gap:2px;padding:10px 18px;border-radius:22px}
  .price-cap span{flex:1 1 100%}}
.price-cap span{font-size:.84rem;color:var(--ink-soft);font-weight:600}

/* the photo tile with chips that pop over it */
.hero-fig{margin:0;position:relative}
.hero-fig figcaption{font-size:.8rem;color:var(--ink-mute);text-align:center;margin-top:12px}
.tilt{transform-style:preserve-3d;will-change:transform}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;
  border-radius:999px;background:rgba(10,12,11,.72);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(0,0,0,.45);font-size:.84rem;font-weight:650;
  white-space:nowrap;opacity:0;transform:translateY(14px) scale(.9);
  animation:chipIn .8s var(--ease) forwards,chipFloat 7s ease-in-out infinite;
  animation-delay:var(--d,0ms),calc(var(--d,0ms) + .8s)}
.chip .bl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.chip .bl svg{width:16px;height:16px}
.chip em{font-style:normal;color:var(--ink-mute);font-weight:500;margin-left:2px}
@keyframes chipIn{to{opacity:1;transform:none}}
@keyframes chipFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.chip.c1{left:-14px;top:18%}
.chip.c2{right:-10px;top:38%}
.chip.c3{left:6%;bottom:12%}
@media(max-width:560px){.chip{font-size:.72rem;padding:6px 10px 6px 6px;gap:7px}.chip .bl{width:22px;height:22px}.chip .bl svg{width:12px;height:12px}
  .chip.c1{left:-4px;top:8%}.chip.c2{display:none}.chip.c3{left:auto;right:-4px;bottom:8%}}

/* ------------------------------------------------------------ brand marks */
.bm{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.bm-tile{display:grid;place-items:center;border-radius:var(--R2);aspect-ratio:1;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.bm-tile svg{width:52%;height:52%}

/* the row of four under the hero headline */
.mark-row{display:flex;gap:12px;margin:0 0 26px;flex-wrap:wrap}
.mark-row .ap{--R:20px;--G:8px;width:64px;height:64px;padding:0;display:grid;place-items:center;
  animation:markFloat 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .6s)}
.mark-row .ap svg{width:32px;height:32px}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* the marquee of every platform */
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite}
.mq-i{display:flex;align-items:center;gap:12px;padding:12px 20px 12px 12px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);font-weight:650;font-size:.92rem;white-space:nowrap}
.mq-i svg{width:26px;height:26px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ the order */
.ord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative;
  counter-reset:mod}
.ord::before{content:'';position:absolute;left:0;right:0;bottom:-20px;height:2px;
  background:linear-gradient(90deg,rgba(50,207,117,.0),rgba(50,207,117,.55),rgba(50,207,117,.0));
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform 1.6s var(--ease)}
.ord .ap{display:block;text-decoration:none;color:inherit}
.ord .ap-in{display:flex;flex-direction:column;gap:14px;min-height:100%}
.ord .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ord .bm-tile{width:58px}
.ord .n{font-size:.78rem;font-weight:800;letter-spacing:.12em;color:var(--green);text-transform:uppercase}
.ord h3{margin:6px 0 0;font-size:1.28rem}
.ord .why{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin:0;flex:1 1 auto}
.ord .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--green);font-size:.92rem;margin-top:6px}
.ord .go svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.ord .ap:hover .go svg{transform:translateX(5px)}
@media(max-width:1000px){.ord{grid-template-columns:repeat(2,minmax(0,1fr))}.ord::before{display:none}}
@media(max-width:520px){.ord{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------ story */
.story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){.story{grid-template-columns:minmax(0,1fr)}}
.story .ap img{aspect-ratio:1;object-fit:cover}
.story .yrs{position:absolute;left:var(--G);bottom:var(--G);right:var(--G);display:flex;align-items:flex-end;gap:14px;
  padding:18px 20px;border-radius:0 0 var(--R2) var(--R2);
  background:linear-gradient(180deg,rgba(7,8,8,0),rgba(7,8,8,.86))}
.story .yrs b{font-size:clamp(2.6rem,5vw,3.6rem);line-height:.9;letter-spacing:-.04em;color:#fff}
.story .yrs span{font-size:.86rem;line-height:1.35;color:rgba(255,255,255,.86);padding-bottom:4px}
.story-blocks{display:grid;gap:22px;margin-top:26px}
.story-blocks div{padding-top:22px;border-top:1px solid rgba(var(--wa),.1)}
.story-blocks h3{margin:0 0 8px}
.story-blocks p{margin:0;color:var(--ink-soft)}

/* ------------------------------------------------------------ where are you at */
.seg{display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);position:relative;gap:4px}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-soft);font:inherit;font-weight:700;
  font-size:.92rem;padding:11px 20px;border-radius:999px;cursor:pointer;position:relative;z-index:1;
  transition:color .4s var(--ease);min-height:44px}
.seg button[aria-pressed="true"]{color:#04130a}
.seg .pill{position:absolute;top:5px;bottom:5px;left:5px;width:0;border-radius:999px;background:var(--green);
  transition:left .5s var(--ease),width .5s var(--ease)}
@media(max-width:480px){.seg button{padding:10px 11px;font-size:.8rem}.seg{max-width:100%}}
.plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px}
@media(max-width:900px){.plan{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.plan{grid-template-columns:minmax(0,1fr)}}
.plan .ap{transition:transform .7s var(--ease),opacity .7s var(--ease),border-color .7s var(--ease)}
.plan .ap-in{display:grid;gap:10px}
.plan .bm-tile{width:48px}
.plan h3{margin:4px 0 0;font-size:1.05rem}
.plan .st{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.plan .ap.dim{opacity:.38;transform:scale(.97)}
.plan .ap.now{border-color:rgba(50,207,117,.5);box-shadow:var(--tile-shadow),0 0 0 6px rgba(50,207,117,.08)}
.plan-note{margin:22px 0 0;color:var(--ink-soft);max-width:620px;min-height:3.4em}

/* ------------------------------------------------------------ landing page demo */
.lp-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){.lp-wrap{grid-template-columns:minmax(0,1fr)}}
.offers{display:grid;gap:10px;margin-top:24px}
.offer{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--R2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);min-height:56px}
.offer:hover{background:rgba(255,255,255,.07);transform:translateX(4px)}
.offer[aria-pressed="true"]{background:rgba(50,207,117,.1);border-color:rgba(50,207,117,.45)}
.offer .k{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-weight:800;font-size:.85rem;color:var(--green)}
.offer b{display:block;font-size:.98rem}
.offer span{display:block;font-size:.82rem;color:var(--ink-mute)}
.lp{position:relative;overflow:hidden;border-radius:var(--R2);background:#0b0d0c;aspect-ratio:16/10.4;
  border:1px solid rgba(255,255,255,.06)}
.lp .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06)}
.lp .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.lp .bar .url{margin-left:10px;flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.07);
  font-size:8px;line-height:12px;padding:0 8px;color:var(--ink-mute);font-family:ui-monospace,monospace}
.lp .pg{position:absolute;inset:26px 0 0;display:grid;grid-template-columns:1.1fr .9fr;gap:6%;padding:7% 6%;align-items:center}
.lp .pg>div{display:grid;gap:10px;align-content:center}
.lp .tag{width:max-content;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);
  padding:4px 8px;border-radius:999px;border:1px solid rgba(50,207,117,.4)}
.lp .ttl{font-size:clamp(14px,2.2vw,24px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.lp .sub{font-size:clamp(8px,1.1vw,12px);color:var(--ink-soft);line-height:1.5}
.lp .cta{width:max-content;font-size:clamp(8px,1.05vw,11px);font-weight:800;color:#04130a;background:var(--green);
  padding:.7em 1.2em;border-radius:999px}
.lp .art{border-radius:12px;aspect-ratio:4/3;background:var(--art,linear-gradient(135deg,#1c3b2a,#0f1f16));
  position:relative;overflow:hidden}
.lp .art::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 55%)}
.lp .art b{position:absolute;left:10px;bottom:10px;font-size:clamp(14px,2.4vw,26px);letter-spacing:-.03em;color:#fff}
.lp .form{display:grid;gap:6px;margin-top:4px}
.lp .form i{display:block;height:11px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.lp.swap .pg>*{animation:lpIn .8s var(--ease) both}
.lp.swap .pg>div:last-child{animation-delay:.12s}
@keyframes lpIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.lp .toast{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;
  border-radius:999px;background:rgba(10,12,11,.86);border:1px solid rgba(50,207,117,.4);font-size:10px;font-weight:700;
  opacity:0;transform:translateY(10px)}
.lp .toast i{width:20px;height:20px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.lp .toast i svg{width:11px;height:11px;stroke:#04130a;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lp.swap .toast{animation:toast 1s var(--ease) 1.2s forwards}
@keyframes toast{to{opacity:1;transform:none}}
.lp .cur{position:absolute;width:14px;height:14px;left:60%;top:70%;pointer-events:none;opacity:0}
.lp.swap .cur{animation:cur 2.2s var(--ease) .5s forwards}
.lp .cur svg{width:14px;height:14px;fill:#fff;stroke:#000;stroke-width:1}
@keyframes cur{0%{opacity:0;left:64%;top:78%}30%{opacity:1}55%{left:22%;top:70%}70%{left:22%;top:70%;transform:scale(.85)}80%{transform:scale(1)}100%{opacity:1;left:22%;top:70%}}

/* ------------------------------------------------------------ stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:820px){.stats{grid-template-columns:minmax(0,1fr)}}
.stats .ap-in{display:grid;gap:8px;align-content:start}
.stats .cat{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);min-height:1.35em}
/* The gradient was hardcoded white, so in light mode these numbers were white
   ink on a near white card and read as blank. rgba(var(--wa),a) flips with the
   theme: identical in dark, actual ink in light. */
.stats .big{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,rgba(var(--wa),1),rgba(var(--wa),.7));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stats .sub{color:var(--ink-soft);font-size:.95rem;line-height:1.55}

/* ------------------------------------------------------------ included */
.inc4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.inc4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.inc4{grid-template-columns:minmax(0,1fr)}}
.inc4 .ap-in{display:grid;gap:12px;align-content:start}
.inc4 .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(50,207,117,.1);border:1px solid rgba(50,207,117,.3)}
.inc4 .ico svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inc4 b{font-size:1.4rem;letter-spacing:-.02em;line-height:1.1}
.inc4 p{margin:0;color:var(--ink-soft);font-size:.94rem}

/* ------------------------------------------------------------ list rails (module pages) */
.rail{list-style:none;padding:0;margin:0;display:grid;gap:0;position:relative;counter-reset:rail}
.rail li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:22px 0;
  border-top:1px solid rgba(255,255,255,.09)}
.rail li:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.rail .n{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-weight:800;color:var(--green);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.rail b{display:block;font-size:1.08rem;margin:10px 0 6px;letter-spacing:-.01em}
.rail p{margin:0;color:var(--ink-soft);font-size:.96rem}
.two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.two .sticky{position:sticky;top:110px}

/* ------------------------------------------------------------ module hero */
.mod-hero .bm-hero{position:relative;width:min(100%,420px);margin:0 auto;aspect-ratio:1}
.mod-hero .bm-hero .halo{position:absolute;inset:-12%;border-radius:50%;filter:blur(60px);opacity:.42;
  background:radial-gradient(circle,var(--brand,#32cf75),transparent 62%);animation:halo 8s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(.92);opacity:.34}50%{transform:scale(1.06);opacity:.5}}
.mod-hero .bm-hero .ap{position:relative;height:100%;display:grid;place-items:center;padding:0;
  animation:heroFloat 9s ease-in-out infinite}
.mod-hero .bm-hero .ap svg{width:46%;height:46%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.mod-hero .orb{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;
  background:rgba(10,12,11,.78);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);font-size:.8rem;font-weight:650;
  white-space:nowrap;box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;animation:chipIn .8s var(--ease) forwards,chipFloat 7s ease-in-out infinite;
  animation-delay:var(--d),calc(var(--d) + .8s)}
.mod-hero .orb svg{width:18px;height:18px}
.mod-hero .orb.o1{left:-6%;top:16%;--d:.5s}
.mod-hero .orb.o2{right:-8%;top:40%;--d:.9s}
.mod-hero .orb.o3{left:4%;bottom:10%;--d:1.3s}
@media(max-width:560px){.mod-hero .orb{font-size:.72rem}.mod-hero .orb.o1{left:0;top:6%}.mod-hero .orb.o2{display:none}.mod-hero .orb.o3{left:auto;right:0;bottom:6%}}
.crumbs{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--ink-mute);margin:0 0 18px;flex-wrap:wrap}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;opacity:.6}

/* the platform grid on the social page */
.plats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media(max-width:900px){.plats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.plats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plats .ap-in{display:grid;gap:12px;justify-items:center;text-align:center;padding:24px 14px}
.plats .bm-tile{width:64px}
.plats b{font-size:.98rem}
.plats span{font-size:.78rem;color:var(--ink-mute)}
.plats .ap.top{border-color:rgba(50,207,117,.4)}
.dels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:820px){.dels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dels .ap-in{text-align:center;display:grid;gap:6px}
.dels b{font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.04em;line-height:1}
.dels span{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

/* ------------------------------------------------------------ next module */
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;text-decoration:none;color:inherit}
.next .bm-tile{width:64px}
.next .k{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.next h3{margin:6px 0 4px;font-size:1.4rem}
.next p{margin:0;color:var(--ink-soft);font-size:.95rem}
.next .arr{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#04130a;
  transition:transform .5s var(--ease)}
.next .arr svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.next:hover .arr{transform:translateX(6px)}
.next .lft{display:flex;gap:18px;align-items:center}
@media(max-width:560px){.next .lft{flex-direction:column;align-items:flex-start}}

/* ------------------------------------------------------------ only for clients band */
.band{--brand:#32cf75;position:relative;overflow:hidden;text-align:center}
.band .ap-in{padding:clamp(30px,5vw,56px) clamp(20px,4vw,48px);position:relative}
.band .ap-in::before{content:'';position:absolute;inset:-40%;background:radial-gradient(circle at 50% 0%,rgba(50,207,117,.16),transparent 55%);
  animation:halo 9s ease-in-out infinite;pointer-events:none}
.band img{height:26px;width:auto;margin:0 auto 18px;display:block;position:relative}
.band h2{position:relative}
.band p{position:relative;max-width:620px;margin:0 auto 14px;color:var(--ink-soft)}
.band .hero-cta{justify-content:center;position:relative}

/* ------------------------------------------------------------ faq */
.faq{display:grid;gap:10px;max-width:820px;margin:0 auto}
.faq details{border-radius:var(--R2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  padding:0;overflow:hidden;transition:border-color .4s var(--ease)}
.faq details[open]{border-color:rgba(50,207,117,.35)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;padding:18px 54px 18px 22px;position:relative;min-height:56px;box-sizing:border-box}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateY(-70%) rotate(45deg);
  transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{margin:0;padding:0 22px 20px;color:var(--ink-soft);font-size:.96rem;line-height:1.7;
  animation:lpIn .6s var(--ease) both}

/* ------------------------------------------------------------ libraries */
.libs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:820px){.libs{grid-template-columns:minmax(0,1fr)}}
.libs .ap-in{display:grid;gap:8px}
.libs .pin{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(50,207,117,.1);border:1px solid rgba(50,207,117,.3)}
.libs .pin svg{width:20px;height:20px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.libs b{font-size:1.15rem}
.libs p{margin:0;color:var(--ink-soft);font-size:.94rem}

/* ------------------------------------------------------------ booking (existing picker, restyled to the tile) */
#bk{text-align:left}
#bk .bk-slot-row{display:flex;flex-wrap:wrap;gap:10px}
#bk .bk-slot{white-space:nowrap;padding-left:22px;padding-right:22px;flex:0 0 auto}
#bk .bk-place-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#bk .bk-place{white-space:normal;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:26px 16px;font-size:1.04rem;min-height:150px}
@media(max-width:560px){#bk .bk-place-row{grid-template-columns:minmax(0,1fr)}
  #bk .bk-place{min-height:0;padding:18px 16px;flex-direction:row;gap:14px;justify-content:flex-start;text-align:left}}
.atf-pin{width:26px;height:26px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:0 0 auto}
#bk .bk-place.sel .atf-pin{stroke:currentColor}
.atf-place-sub{display:block;opacity:.65;font-size:.82em;line-height:1.35}
#bk .bk-slots-h{margin-top:22px}
#bk .bk-go{margin-top:20px}
.atf-fields{gap:16px;margin-top:6px;text-align:left}
.atf-field{display:grid;gap:7px}
.atf-label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.atf-opt{opacity:.5;font-weight:400}
.atf-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.atf-pair>*{min-width:0}
@media(max-width:560px){.atf-pair{grid-template-columns:minmax(0,1fr)}}
/* Every colour on this map was hardcoded white, which made it unreadable in
   light mode: white labels on a near white card. rgba(var(--wa),a) keeps the
   dark mode look byte for byte and inverts to ink on light. */
.atf-map{margin-top:16px;padding:18px 18px 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--wa),.045),rgba(var(--wa),.015));border:1px solid rgba(var(--wa),.1)}
.atf-map svg{display:block;width:100%;height:auto}
.atf-riv{fill:none;stroke:rgba(120,170,220,.34);stroke-width:5;stroke-linecap:round}
.atf-ref{fill:rgba(var(--wa),.3)}
.atf-reft{fill:rgba(var(--wa),.42);font-size:19px;font-weight:500}
.atf-cbd{fill:rgba(var(--wa),.55)}
.atf-cbdt{fill:rgba(var(--wa),.7);font-size:21px;font-weight:700}
.atf-halo{fill:var(--green);opacity:.13}
.atf-dot{fill:var(--green)}
.atf-lib{fill:rgba(var(--wa),.94);font-size:21px;font-weight:800}
.atf-scale{stroke:rgba(var(--wa),.28);stroke-width:2.5;fill:none}
.atf-scalet{fill:rgba(var(--wa),.4);font-size:17px}
.atf-g{transition:opacity .18s ease}
.atf-map[data-sel] .atf-g{opacity:.46}
.atf-map[data-sel="ringwood"] .atf-g-ringwood,.atf-map[data-sel="warrandyte"] .atf-g-warrandyte,
.atf-map[data-sel="nunawading"] .atf-g-nunawading{opacity:1}
.atf-mapcap{margin:10px 0 0;font-size:.78rem;color:var(--ink-mute);text-align:center}
@media(max-width:560px){.atf-map{padding:14px 12px 10px}.atf-extra{display:none}.atf-lib{font-size:50px}
  .atf-cbd{transform:scale(1.5);transform-origin:155px 290px}.atf-cbdt{font-size:41px}.atf-scalet{font-size:34px}
  .atf-riv{stroke-width:9}.atf-halo{r:40}.atf-dot{r:12}}
.atf-sub{display:block;margin:14px 0 7px;font-size:.74rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-mute)}
.atf-tip{margin:12px 0 0;padding:13px 15px;border-radius:12px;font-size:.86rem;line-height:1.6;color:var(--ink-soft);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.atf-tip b{color:var(--ink)}

/* ------------------------------------------------------------ the module picker
   These four cards had NO rules at all, so they fell through to the .bk-slot
   time pill: nowrap, flex:0 0 auto, 11px padding. That is why the numbers sat
   welded to the titles ("1Google Business Profile") and the row came out ragged
   with two cards, then two of different widths, then one stranded underneath.
   A real grid, a real card, and the number lifted out into its own badge. */
.atf-mods{margin-bottom:4px}
#bk .atf-mod-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
#bk .atf-mod{position:relative;flex:1 1 auto;white-space:normal;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
  padding:22px 18px 18px;border-radius:16px;line-height:1.45;font-weight:500}
#bk .atf-mod-all{grid-column:1 / -1}

/* the step number, out of the text flow entirely */
.atf-mod-n{position:absolute;top:12px;left:13px;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;font-size:.7rem;font-weight:800;line-height:1;
  background:rgba(var(--wa),.07);color:var(--ink-mute);border:1px solid var(--line-2)}
#bk .atf-mod.sel .atf-mod-n{background:rgba(0,0,0,.17);color:inherit;border-color:transparent}

/* the brand mark */
.atf-mod-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:8px;
  background:rgba(var(--wa),.06);border:1px solid var(--line-2);transition:background .18s ease,border-color .18s ease}
.atf-mod-ic .bm{width:27px;height:27px}
#bk .atf-mod.sel .atf-mod-ic{background:rgba(255,255,255,.92);border-color:transparent}
.atf-mod-ics{display:flex;gap:9px;margin-bottom:8px;padding:9px 13px;border-radius:14px;
  background:rgba(var(--wa),.06);border:1px solid var(--line-2)}
.atf-mod-ics .bm{width:27px;height:27px}
#bk .atf-mod.sel .atf-mod-ics{background:rgba(255,255,255,.92);border-color:transparent}

.atf-mod-name{display:block;font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:.005em}
.atf-mod-price{display:block;margin-top:7px;font-size:1.02rem;font-weight:800;color:var(--ink)}
.atf-mod-len{display:block;font-size:.78rem;opacity:.62}
#bk .atf-mod.sel .atf-mod-name,#bk .atf-mod.sel .atf-mod-price{color:inherit}
.atf-mod-sum{margin-top:16px}
@media(max-width:560px){
  #bk .atf-mod-row{grid-template-columns:minmax(0,1fr);gap:12px}
  #bk .atf-mod{padding:20px 16px 16px}
}

/* ------------------------------------------------------------ buttons get a little pull */
.mag{will-change:transform;transition:transform .35s var(--ease)}

/* ------------------------------------------------------------ reduced motion */
@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-x,html.js .rv-s,html.js .rv-w>span{opacity:1;transform:none;transition:none}
  .chip,.orb,.mark-row .ap,.mod-hero .bm-hero .ap,.mod-hero .bm-hero .halo,.band .ap-in::before{animation:none;opacity:1;transform:none}
  .mq-track{animation:none}
  .eyebrow::before{animation:none}
  .lp.swap .pg>*,.lp.swap .toast,.lp.swap .cur{animation:none;opacity:1;transform:none}
  .tilt{transform:none !important}
}

/* ------------------------------------------------------------ before scalus, the filmmaking years */
.bts{margin-top:clamp(40px,6vw,66px);padding-top:clamp(30px,4vw,44px);border-top:1px solid rgba(var(--wa),.1)}
.bts .eyebrow{margin:0}
.bts h3{margin:8px 0 0;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.bts .lead{margin:10px 0 0;max-width:62ch;color:var(--ink-soft)}
.bts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);margin-top:clamp(22px,3vw,32px)}
.bts-grid>div{display:flex;flex-direction:column}
.bts-grid figure{margin:0;flex:1 1 auto;display:grid;min-height:0}
.bts-grid img{aspect-ratio:1;object-fit:cover;min-height:0}
.bts-grid .wide{grid-column:span 2}
/* the wide tile stretches to whatever height the square tiles set, so every caption lines up */
.bts-grid .wide img{aspect-ratio:auto;height:100%}
.bts-cap{margin:10px 4px 0;font-size:.8rem;line-height:1.45;color:var(--ink-soft);min-height:2.9em}
@media(max-width:760px){
  .bts-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  /* on two columns the wide tile is alone on its row, so it needs its own ratio back */
  .bts-grid .wide img{aspect-ratio:2;height:auto}
  /* and tiles size to their own content, so a long caption cannot leave a dead box beside it */
  .bts-grid>div{display:block}
  .bts-grid figure{flex:none;display:block}
  .bts-cap{min-height:0}
}

/* ============================================================ BUILD MORNING (11 Oct 2026)
   The hub leads with one product now: a small group morning. Everything below
   reuses the one tile (.ap) and the concentric pair; a nested radius is always
   var(--R2) or smaller, never a new tile radius. Colours go through
   rgba(var(--wa),a) so light mode keeps working. */

/* hero ticks under the lead */
.hero-ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;max-width:46ch}
.hero-ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;
  font-size:.96rem;line-height:1.55;color:var(--ink-soft)}
.hero-ticks li b{color:var(--ink);font-weight:700}
.hero-ticks svg{width:20px;height:20px;margin-top:2px;stroke:var(--green);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* the two mornings */
.lm-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:760px){.lm-dates{grid-template-columns:minmax(0,1fr)}}
.lm-dates .ap-in{display:grid;gap:10px;align-content:start}
.lm-dates .k{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.lm-dates h3{margin:0;font-size:clamp(1.35rem,2.4vw,1.7rem)}
.lm-dates .meta{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.lm-dates .seat{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  font-size:.84rem;font-weight:800;color:var(--green);background:rgba(50,207,117,.1);border:1px solid rgba(50,207,117,.36)}
.lm-dates .seat.lm-out{color:var(--ink-mute);background:rgba(var(--wa),.05);border-color:rgba(var(--wa),.14)}
.lm-dates .btn{justify-self:start;margin-top:6px}

/* the four parts: the fourth tile is not a link */
.ord div.ap .go{color:var(--ink-mute)}
.lrn .under{margin-top:38px}

/* the timetable rail carries times, not numbers */
.rail.times .n{font-size:.8rem;letter-spacing:-.01em}

/* who it suits, two columns */
.fit2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:820px){.fit2{grid-template-columns:minmax(0,1fr)}}
.fit2 h3{margin:0 0 14px}
.fit-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fit-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;color:var(--ink-soft);font-size:.96rem;line-height:1.6}
.fit-list svg{width:18px;height:18px;margin-top:4px;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fit-list.yes svg{stroke:var(--green)}
.fit-list.no svg{stroke:rgba(var(--wa),.5)}

/* three tiles instead of four */
.inc4.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.inc4.three{grid-template-columns:minmax(0,1fr)}}
.inc4 b.t{font-size:1.18rem;line-height:1.25}

/* the guarantee band carries more than one paragraph */
.band .fine{font-size:.84rem;color:var(--ink-mute);line-height:1.6;max-width:640px;margin:18px auto 0}
.band .fine a{color:var(--ink-soft)}

/* refunds and moving */
.rules{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:820px}
.rules li{padding:16px 20px;border-radius:var(--R2);background:rgba(var(--wa),.04);border:1px solid rgba(var(--wa),.1);
  line-height:1.6;color:var(--ink-soft);font-size:.97rem}
.rules li b{color:var(--ink)}

/* the website, after: the text under the demo */
.lp-after{max-width:720px;margin:clamp(26px,4vw,40px) auto 0;text-align:center}
.lp-after p{color:var(--ink-soft)}
.lp-after .hero-cta{justify-content:center}

/* where it is */
.venue{max-width:720px}
.venue .ap-in{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.venue .pin{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(50,207,117,.1);border:1px solid rgba(50,207,117,.3)}
.venue .pin svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.venue b{display:block;font-size:1.15rem;margin:2px 0 6px}
.venue p{margin:0;color:var(--ink-soft);font-size:.96rem}
.venue p+p{margin-top:8px}

/* ------------------------------------------------------------ the seat picker (#lm-book) */
#lm-book{text-align:left}
.lm-in{display:grid;gap:0}
.lm-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:560px){.lm-picks{grid-template-columns:minmax(0,1fr)}}
.lm-pick{appearance:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;display:grid;gap:3px;
  padding:16px 18px;border-radius:14px;background:rgba(var(--wa),.04);border:1px solid var(--line-2);
  transition:border-color .2s,background .2s,box-shadow .2s;min-height:44px}
.lm-pick:hover:not(:disabled){border-color:var(--green);background:var(--green-soft)}
.lm-pick.sel{background:var(--green);border-color:var(--green);color:#04130a;box-shadow:0 8px 22px rgba(50,207,117,.34)}
.lm-pick:disabled{opacity:.55;cursor:default}
.lm-pick .lm-day{font-size:1.05rem;font-weight:800}
.lm-pick .lm-line{font-size:.84rem;opacity:.78;line-height:1.45}
.lm-pick .lm-seats{margin-top:8px;font-size:.82rem;font-weight:800;color:var(--green)}
.lm-pick.sel .lm-seats{color:inherit}
.lm-pick:disabled .lm-seats{color:var(--ink-mute)}
.lm-note,.lm-hint{margin:0 0 16px;padding:13px 15px;border-radius:12px;font-size:.88rem;line-height:1.6;color:var(--ink-soft);
  background:rgba(var(--wa),.04);border:1px solid rgba(var(--wa),.1)}
.lm-hint{margin:12px 0 0}
.lm-note a,.lm-hint a,.lm-small a,.bk-check-txt a{color:var(--green)}
.lm-form{margin-top:6px}
.lm-form .bk-slots-h{margin-top:24px}
.lm-fhint{font-size:.76rem;color:var(--ink-mute)}
.lm-form .bk-check{margin-top:4px}
.lm-sum{margin:16px 0 0;padding:13px 16px;border-radius:12px;background:var(--green-soft);border:1px solid rgba(50,207,117,.3);
  font-size:.92rem;line-height:1.5}
.lm-form .bk-go{margin-top:16px}
.lm-small{font-size:.8rem !important;color:var(--ink-mute);line-height:1.6 !important;margin:14px 0 0}

/* ------------------------------------------------------------ version 2 (11 Oct 2026)
   The morning pictures (format pictures, never a past session), the room
   status line on a date card, and the venue links. */
.lm-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(30px,5vw,54px)}
.lm-pics.one{grid-template-columns:minmax(0,1fr);max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.lm-pics{grid-template-columns:minmax(0,1fr)}}
.lm-fig{margin:0}
.lm-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lm-fig figcaption{font-size:.8rem;color:var(--ink-mute);text-align:center;margin-top:12px}
.lm-pick .lm-status{margin-top:2px;font-weight:600}
.lm-pick.sel .lm-status{opacity:.9}
.venue .venue-links{margin-top:8px}
.venue .venue-links a{color:var(--green);font-weight:600}
.lm-form .atf-field{align-content:start}
.lp-after p{margin:0 0 12px}
@media(min-width:561px){.ap>.ap-in.next{display:grid}}
@media(max-width:560px){.ap>.ap-in.next .arr{margin-top:16px}}
@media(max-width:560px){.next .bm-tile{width:56px;height:56px;flex:none}}

/* ------------------------------------------------------------ review fixes (11 Oct 2026) */
/* the date card: the seat count in the pill, the go ahead status on its own line */
.lm-dates .lm-card-status{font-size:.84rem;font-weight:600;color:var(--ink-soft);margin-top:-2px}
.lm-dates .lm-card-status[hidden]{display:none}
.lm-dates .btn.lm-btn-off{background:rgba(var(--wa),.06);color:var(--ink-soft);border-color:var(--line-2);box-shadow:none;animation:none}
/* the notes under the venue card, as a short list */
.venue-notes{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;max-width:720px}
.venue-notes li{position:relative;padding-left:18px;font-size:.86rem;color:var(--ink-mute);line-height:1.6}
.venue-notes li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--green)}
/* the form error in light mode (theme.js always sets data-theme): a darker red that reads on the light card */
[data-theme="light"] #lm-book .bk-err{color:#c62828}