/* Lobster website.
   Two layers of tokens:
   - App tokens (--ink, --glass…) from DESIGN.md / Theme.swift. Used by the mock-ups in mock.css.
   - Site tokens (--bg, --text, --panel…) for the page: charcoal + coral, straight from the app icon.
   Light and dark follow the system; `.scheme-light` / `.scheme-dark` force one locally. */

:root{
  color-scheme:light dark;

  /* app tokens */
  --coral:#FF5A3C;
  --ink:light-dark(#121214,#F3F3F5);
  --ink2:light-dark(rgba(0,0,0,.56),rgba(255,255,255,.62));
  --ink3:light-dark(rgba(0,0,0,.36),rgba(255,255,255,.38));
  --line:light-dark(rgba(0,0,0,.08),rgba(255,255,255,.09));
  --hover:light-dark(rgba(0,0,0,.045),rgba(255,255,255,.06));
  --chip:light-dark(rgba(0,0,0,.06),rgba(255,255,255,.08));
  --glass:light-dark(rgba(255,255,255,.40),rgba(22,22,24,.42));
  --glass-2:light-dark(rgba(255,255,255,.58),rgba(28,28,31,.58));
  --glass-3:light-dark(rgba(255,255,255,.80),rgba(30,30,33,.82));
  --edge:light-dark(rgba(255,255,255,.75),rgba(255,255,255,.12));
  --hi:inset 0 1px 0 light-dark(rgba(255,255,255,.7),rgba(255,255,255,.08));
  --shadow:0 30px 70px light-dark(rgba(0,0,0,.18),rgba(0,0,0,.5)),0 2px 8px light-dark(rgba(0,0,0,.08),rgba(0,0,0,.3));
  --add-bg:light-dark(rgba(46,160,67,.10),rgba(46,160,67,.16));
  --add-fg:light-dark(#1f6f35,#8fd9a3);
  --del-bg:light-dark(rgba(220,60,60,.09),rgba(220,60,60,.16));
  --del-fg:light-dark(#8f1d1d,#f2a3a3);
  --wall:light-dark(#cfd0d3,#1a1a1c);

  /* site tokens */
  --claw:#FF5A3C;
  --claw-deep:#FF3B14;
  --bg:light-dark(#FBF5F1,#121212);
  --text:light-dark(#1A1514,#F6F1EE);
  --muted:light-dark(rgba(26,21,20,.66),rgba(246,241,238,.66));
  --soft:light-dark(rgba(26,21,20,.42),rgba(246,241,238,.42));
  --rule:light-dark(rgba(26,21,20,.09),rgba(255,255,255,.08));
  --panel:light-dark(rgba(255,255,255,.62),rgba(255,255,255,.04));
  --panel-2:light-dark(rgba(255,255,255,.86),rgba(255,255,255,.07));
  --panel-edge:light-dark(rgba(255,255,255,.9),rgba(255,255,255,.09));
  --panel-shadow:0 1px 0 light-dark(rgba(255,255,255,.9),rgba(255,255,255,.05)) inset,0 18px 50px -24px light-dark(rgba(120,40,20,.25),rgba(0,0,0,.6));
  --glow:light-dark(rgba(255,106,70,.30),rgba(255,70,30,.30));
  --glow-2:light-dark(rgba(255,170,120,.30),rgba(255,59,20,.14));

  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --glyph:"Apple Symbols","SF Pro Text",Menlo,"Segoe UI Symbol",serif;
  --max:1180px;
}
.scheme-light{color-scheme:light}
.scheme-dark{color-scheme:dark}

/* Browsers without light-dark(): follow the system only. */
@supports not (color:light-dark(#000,#fff)){
  :root{
    --ink:#121214;--ink2:rgba(0,0,0,.56);--ink3:rgba(0,0,0,.36);--line:rgba(0,0,0,.08);--hover:rgba(0,0,0,.045);--chip:rgba(0,0,0,.06);
    --glass:rgba(255,255,255,.40);--glass-2:rgba(255,255,255,.58);--glass-3:rgba(255,255,255,.80);--edge:rgba(255,255,255,.75);
    --hi:inset 0 1px 0 rgba(255,255,255,.7);--shadow:0 30px 70px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
    --add-bg:rgba(46,160,67,.10);--add-fg:#1f6f35;--del-bg:rgba(220,60,60,.09);--del-fg:#8f1d1d;--wall:#cfd0d3;
    --bg:#FBF5F1;--text:#1A1514;--muted:rgba(26,21,20,.66);--soft:rgba(26,21,20,.42);--rule:rgba(26,21,20,.09);
    --panel:rgba(255,255,255,.62);--panel-2:rgba(255,255,255,.86);--panel-edge:rgba(255,255,255,.9);
    --panel-shadow:0 18px 50px -24px rgba(120,40,20,.25);--glow:rgba(255,106,70,.30);--glow-2:rgba(255,170,120,.30);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ink:#F3F3F5;--ink2:rgba(255,255,255,.62);--ink3:rgba(255,255,255,.38);--line:rgba(255,255,255,.09);--hover:rgba(255,255,255,.06);--chip:rgba(255,255,255,.08);
      --glass:rgba(22,22,24,.42);--glass-2:rgba(28,28,31,.58);--glass-3:rgba(30,30,33,.82);--edge:rgba(255,255,255,.12);
      --hi:inset 0 1px 0 rgba(255,255,255,.08);--shadow:0 30px 70px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
      --add-bg:rgba(46,160,67,.16);--add-fg:#8fd9a3;--del-bg:rgba(220,60,60,.16);--del-fg:#f2a3a3;--wall:#1a1a1c;
      --bg:#121212;--text:#F6F1EE;--muted:rgba(246,241,238,.66);--soft:rgba(246,241,238,.42);--rule:rgba(255,255,255,.08);
      --panel:rgba(255,255,255,.04);--panel-2:rgba(255,255,255,.07);--panel-edge:rgba(255,255,255,.09);
      --panel-shadow:0 18px 50px -24px rgba(0,0,0,.6);--glow:rgba(255,70,30,.30);--glow-2:rgba(255,59,20,.14);
    }
  }
}

/* ---------- base + background ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--ui);font-size:17px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* ambient light: coral glows + a dot grid that fades out toward the bottom */
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(48rem 32rem at 85% 18%,var(--glow-2),transparent 70%),
    radial-gradient(44rem 30rem at 6% 62%,var(--glow-2),transparent 70%),
    radial-gradient(40rem 26rem at 70% 100%,var(--glow-2),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle,var(--rule) 1.2px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%)}

/* the tank: glyphs and bubbles drifting up behind everything */
.tank-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.tank-bg span{position:absolute;left:var(--x);bottom:-60px;font-family:var(--glyph);font-size:var(--s);color:var(--text);opacity:.07;animation:drift var(--d) linear var(--w) infinite}
.tank-bg i{position:absolute;left:var(--x);bottom:-20px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--claw);opacity:.22;animation:bubble var(--d) linear var(--w) infinite}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(24px,-55vh) rotate(12deg)}100%{transform:translate(0,-115vh) rotate(-8deg)}}
@keyframes bubble{0%{transform:translate(0,0)}50%{transform:translate(-10px,-55vh)}100%{transform:translate(6px,-115vh);opacity:0}}

a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
code,kbd{font-family:var(--mono);font-size:.84em;background:var(--panel-2);border:1px solid var(--rule);padding:1px 6px;border-radius:6px}
kbd{border-bottom-width:2px}
h1,h2,h3{margin:0;color:var(--text)}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--panel-2);padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.claw-text{background:linear-gradient(100deg,var(--claw-deep) 10%,var(--claw) 55%,#FF8A66);-webkit-background-clip:text;background-clip:text;color:transparent}

/* app glass: monochrome, exactly as the app (used inside mock-ups) */
.glass{background:var(--glass);backdrop-filter:blur(28px) saturate(0%);-webkit-backdrop-filter:blur(28px) saturate(0%);border:1px solid var(--edge);box-shadow:var(--hi)}
/* site panels: warm frosted cards */
.panel{background:var(--panel);border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow);border-radius:22px;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
@media (prefers-reduced-transparency:reduce){.glass,.panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel-2)}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:light-dark(rgba(251,245,241,.72),rgba(18,18,18,.66));backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:750;font-size:18px;letter-spacing:-.02em;text-decoration:none}
.brand-mark{width:28px;height:28px;flex:none}
.topnav{display:flex;gap:2px;margin-left:auto}
.topnav a{font-size:14px;color:var(--muted);text-decoration:none;padding:6px 11px;border-radius:9px}
.topnav a:hover{color:var(--text);background:var(--panel-2)}
.topbar-cta{font-size:14px;font-weight:650;text-decoration:none;padding:8px 15px;border-radius:10px;background:var(--text);color:var(--bg)}
@media (max-width:900px){.topnav{display:none}.topbar-cta{margin-left:auto}}

/* ---------- shared section type ---------- */
section{padding:110px 0;scroll-margin-top:60px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted);margin-bottom:22px;text-transform:lowercase}
.eyebrow .gly{width:26px;height:26px;font-size:15px}
h2{font-family:var(--display);font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-.04em;font-weight:780;max-width:17em}
.intro{font-size:clamp(18px,1.9vw,21px);color:var(--muted);max-width:38em;margin-top:24px;line-height:1.55}
.intro b{color:var(--text);font-weight:650}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel-2);border:1px solid var(--rule);border-radius:99px;padding:2px 10px}
.fine{font-size:14px;color:var(--muted);margin-top:16px}

/* glyph tiles outside the mock-ups pick up site colours */
:is(.eyebrow,.needs,.mock-note,.step) .gly{color:var(--text);background:var(--panel-2);border-color:var(--panel-edge)}
.step .gly.egg{background:transparent;border-color:var(--soft)}

/* ---------- waitlist form ---------- */
.waitlist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:520px;margin:36px auto 0;padding:7px;border-radius:18px;background:var(--panel-2);border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow)}
.waitlist input{flex:1 1 220px;min-width:0;font:inherit;font-size:17px;color:var(--text);background:transparent;border:0;padding:12px 14px;border-radius:12px}
.waitlist input::placeholder{color:var(--soft)}
.waitlist input:focus-visible{outline:2px solid var(--text);outline-offset:0}
/* 19px bold keeps white-on-coral at WCAG "large text" contrast */
.waitlist button{font:inherit;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#fff;background:linear-gradient(180deg,var(--claw),var(--claw-deep));border:0;border-radius:13px;padding:11px 22px;cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 22px -8px rgba(255,59,20,.7);transition:transform .08s}
.waitlist button:active{transform:scale(.95)}
.waitlist button[disabled]{opacity:.6;cursor:progress}
.form-msg{flex-basis:100%;font-size:14.5px;color:var(--muted);text-align:center;min-height:0}
.form-msg:empty{display:none}
.waitlist.done input,.waitlist.done button{display:none}
.waitlist.done .form-msg{font-size:16px;color:var(--text);padding:10px}

/* ---------- hero ---------- */
.hero{padding:88px 0 40px;text-align:center;overflow:hidden}
.hero-glow{position:absolute;left:50%;top:-180px;width:1100px;height:760px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent),radial-gradient(closest-side at 30% 60%,var(--glow-2),transparent);filter:blur(10px)}
.hero .wrap{position:relative}
.hero-logo{width:132px;height:132px;display:block;margin:0 auto 30px;filter:drop-shadow(0 18px 30px rgba(255,59,20,.35));overflow:visible}
.claw{transform-box:fill-box}
.claw-l{transform-origin:100% 100%}
.claw-r{transform-origin:0 100%}
@media (prefers-reduced-motion:no-preference){
  .hero-logo .claw-l{animation:pinch-l .9s ease-in-out .4s 1}
  .hero-logo .claw-r{animation:pinch-r .9s ease-in-out .4s 1}
  .hero-logo:hover .claw-l{animation:pinch-l .9s ease-in-out infinite}
  .hero-logo:hover .claw-r{animation:pinch-r .9s ease-in-out infinite}
}
@keyframes pinch-l{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(-14deg)}50%{transform:rotate(4deg)}}
@keyframes pinch-r{0%,100%{transform:rotate(0)}25%,75%{transform:rotate(14deg)}50%{transform:rotate(-4deg)}}
.hatching{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);padding:7px 15px;border-radius:99px;background:var(--panel-2);border:1px solid var(--panel-edge);box-shadow:var(--panel-shadow)}
.hatching .dot{width:8px;height:8px;border-radius:50%;background:var(--claw);box-shadow:0 0 0 0 rgba(255,90,60,.6);animation:beacon 2s ease-out infinite}
@keyframes beacon{70%{box-shadow:0 0 0 9px rgba(255,90,60,0)}100%{box-shadow:0 0 0 0 rgba(255,90,60,0)}}
.hero h1{font-family:var(--display);font-size:clamp(54px,9.5vw,124px);line-height:.95;letter-spacing:-.055em;font-weight:820;margin:26px auto 0;max-width:10em}
.hero .lede{font-size:clamp(18px,2.1vw,22px);color:var(--muted);max-width:33em;margin:28px auto 0;line-height:1.5}
.hero-fig{margin:76px auto 0;max-width:1260px;padding:0 24px;position:relative}

/* fixed-size mock-ups scale to fit their column (see site.js) */
.fit{width:100%;overflow-x:auto;border-radius:20px;box-shadow:0 50px 100px -40px light-dark(rgba(120,30,10,.45),rgba(0,0,0,.8)),0 0 0 1px var(--rule)}
.fit .desk{margin:0 auto}
.mock-note{font-size:14px;color:var(--text);margin-top:18px;text-align:center;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.noscript{padding:40px;text-align:center;color:var(--muted)}

.works-with{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:14.5px;color:var(--muted);margin-top:18px}
.works-with b{color:var(--text);font-weight:650}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--rule);padding:18px 0;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:28px;width:max-content;animation:tick 40s linear infinite;font-family:var(--display);font-size:clamp(22px,3vw,34px);font-weight:750;letter-spacing:-.03em;white-space:nowrap}
.ticker-track span{color:var(--soft)}
.ticker-track b{font-family:var(--glyph);font-weight:400;color:var(--claw)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- the shift ---------- */
.needs{list-style:none;padding:0;margin:60px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.needs li{padding:26px 24px 28px}
.needs .gly{margin-bottom:26px}
.needs h3{font-size:19px;letter-spacing:-.015em;margin-bottom:8px}
.needs p{font-size:15.5px;color:var(--muted)}
@media (max-width:960px){.needs{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.needs{grid-template-columns:1fr}}

/* ---------- how it works ---------- */
.steps{list-style:none;padding:0;margin:64px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative}
.steps::before{content:"";position:absolute;left:28px;right:10%;top:28px;height:2px;background:repeating-linear-gradient(90deg,var(--soft) 0 6px,transparent 6px 12px)}
.step{position:relative}
.step .gly{position:relative;z-index:1}
main .step .gly.lg{width:56px;height:56px;font-size:28px;background:var(--bg);box-shadow:var(--panel-shadow)}
main .step .gly.egg{background:var(--bg);border:1.5px dashed var(--soft)}
main .step.human .gly:not(.rev){border-color:var(--claw);box-shadow:0 0 0 1px var(--claw)}
.step .n{display:block;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:20px 0 6px}
.step h3{font-family:var(--display);font-size:26px;letter-spacing:-.03em;margin-bottom:8px}
.step p{font-size:15px;color:var(--muted)}
.step p b{color:var(--text)}
.step code{font-size:12.5px;overflow-wrap:anywhere}
@media (max-width:1060px){.steps{grid-template-columns:1fr 1fr 1fr}.steps::before{display:none}}
@media (max-width:640px){.steps{grid-template-columns:1fr}}

/* ---------- toggle band ---------- */
.band{padding:90px 0}
.band .wrap{max-width:1320px}
.band-surface{position:relative;border-radius:36px;padding:64px 54px 54px;overflow:hidden;background:linear-gradient(160deg,light-dark(rgba(255,255,255,.7),#202020),light-dark(rgba(255,240,232,.6),#151515))}
.band-glow{position:absolute;right:-200px;top:-260px;width:800px;height:600px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.band-head{position:relative;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}
.band-head .intro{margin-top:18px;max-width:30em}
.controls{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.seg{display:inline-flex;border-radius:13px;padding:4px;gap:2px;background:var(--panel-2);border:1px solid var(--panel-edge)}
.seg button{font:inherit;color:var(--muted);background:none;border:0;cursor:pointer;font-size:14px;padding:8px 16px;border-radius:9px}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg);font-weight:650}
.screen-tabs{position:relative;display:flex;gap:4px;margin:38px 0 20px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.screen-tabs::-webkit-scrollbar{display:none}
.screen-tabs button{font:inherit;color:var(--muted);background:var(--panel);border:1px solid var(--rule);cursor:pointer;font-size:14px;padding:8px 15px;border-radius:99px;white-space:nowrap;flex:none}
.screen-tabs button:hover{color:var(--text)}
.screen-tabs button[aria-selected="true"]{background:var(--text);color:var(--bg);border-color:transparent;font-weight:650}
#band-panel{position:relative}
.screen-note{margin-top:18px;font-size:15px;color:var(--muted);max-width:52em}
.screen-note b{color:var(--text)}
@media (max-width:760px){.band-surface{padding:44px 16px 24px;border-radius:26px}.controls{align-items:flex-start}}

/* ---------- privacy ---------- */
.promises{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.promises li{padding:26px 26px 28px}
.promises h3{font-size:19px;letter-spacing:-.015em;margin-bottom:8px}
.promises p{font-size:15.5px;color:var(--muted)}
.needs-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;font-size:15px}
.needs-line .k{font-family:var(--mono);font-size:13px;color:var(--muted);margin-right:4px}
.needs-line .chip{padding:6px 13px;border-radius:99px;background:var(--panel-2);border:1px solid var(--panel-edge);font-weight:600}
@media (max-width:860px){.promises{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;padding:0 24px}
.faq summary{cursor:pointer;list-style:none;font-weight:650;font-size:17px;padding:19px 30px 19px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";position:absolute;right:0;top:19px;color:var(--claw);font-weight:500}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 20px;font-size:16px;color:var(--muted)}
.faq details p b{color:var(--text)}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:20px}}

/* ---------- final ---------- */
.final{text-align:center;padding:150px 0 140px;overflow:hidden}
.final-glow{position:absolute;left:50%;bottom:-200px;width:1000px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.final .wrap{position:relative}
.final-mark{width:84px;height:84px;display:block;margin:0 auto 28px;filter:drop-shadow(0 14px 24px rgba(255,59,20,.35))}
.final h2{margin:0 auto;max-width:12em}
.final .intro{margin:22px auto 0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:40px 0 56px;font-size:14px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:auto 1fr;gap:16px 48px;align-items:start}
.foot-copy p+p{margin-top:6px}
.built-with{display:flex;align-items:center;gap:8px;color:var(--text)}
.built-with .brand-mark{width:16px;height:16px}
@media (max-width:700px){footer .wrap{grid-template-columns:1fr}}

/* Reduce Motion: everything holds still (the mock-ups also fall back to Calm in site.js). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tank-bg{display:none}
}