/* ===========================================================================
   Bench2Bedside Singapore
   Space Grotesk display · IBM Plex Sans body · IBM Plex Mono labels
   =========================================================================== */
:root{
  --paper:#F4F5F0;
  --ink:#0B1F1C;
  --phenol:#D6156B;
  --phenol-soft:#FCE7F0;
  --teal:#12706B;
  --teal-deep:#0C5A56;
  --teal-soft:#E2F1F0;
  --amber:#E8A33D;
  --amber-soft:#FDF3E3;
  --amber-ink:#8A5A11;
  --mist:#DCE3DC;
  --mist-soft:#E9EEEA;
  --slate:#4A5A56;

  /* Electric silver — the accent the particle field is built from, and the
     hairline used on cards so they read as lifted off the moving background. */
  --silver:#B0BEBB;
  --silver-bright:#D6E2DF;
  --silver-line:rgba(176,190,187,.55);

  --card:#FFFFFF;
  --wash:#F7F9F6;

  /* Surfaces are now translucent so the background shows through them. */
  --card-glass:rgba(255,255,255,.82);
  --wash-glass:rgba(247,249,246,.72);
  --blur:saturate(1.35) blur(14px);

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --r:12px;
  --maxw:980px;
  --gutter:34px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;-webkit-text-size-adjust:100%;
  position:relative;
}

/* -------------------------------------------------- animated background -- */
/* A single fixed canvas behind everything. Nothing in the page needs to know
   it exists; content sits above it on its own stacking context. */
#bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
/* A faint mesh wash under the canvas, so the page still has depth in the
   moment before the script runs, and if JavaScript is off entirely. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 12% 4%, rgba(18,112,107,.10), transparent 62%),
    radial-gradient(900px 640px at 92% 22%, rgba(214,21,107,.07), transparent 60%),
    radial-gradient(1000px 700px at 50% 104%, rgba(232,163,61,.06), transparent 62%),
    var(--paper);
}
/* Everything that is not the canvas rides above it. */
.masthead,main,.fineprint,.veil{position:relative;z-index:1}
a{color:inherit}
button{font-family:inherit;font-size:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--phenol);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* -------------------------------------------------------------- masthead -- */
.masthead{border-bottom:1px solid var(--silver-line);
  background:rgba(244,245,240,.78);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  position:sticky;top:0}
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:66px;padding:10px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .logo{transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.brand:hover .logo{transform:scale(1.08) rotate(-4deg)}
.brand .logo{width:34px;height:34px;flex:none;display:block}
.brand .wm{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.015em;
  line-height:1.15}
.brand .wm i{font-style:normal;color:var(--phenol)}
.brand .wm .sg{font-weight:500;color:var(--slate)}
.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink);
  padding:7px 14px;border-radius:999px;font-size:14px;font-weight:500;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.ghost:active{transform:translateY(0)}

/* ------------------------------------------------------------------ hero -- */
.hero{padding:42px 0 6px}
.hero .eyebrow{color:var(--teal);margin:0 0 14px}
.hero h1{font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.6vw,48px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--phenol)}
.hero .lede{font-size:17px;color:var(--slate);max-width:62ch;margin:0}
.features{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.features li{font-size:12.5px;color:var(--slate);background:rgba(233,238,234,.72);
  border:1px solid var(--silver-line);border-radius:999px;padding:6px 13px;line-height:1.3;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.features li:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-soft)}
.features li b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- ask block -- */
.picker{background:var(--card-glass);border:1px solid var(--silver-line);
  border-radius:var(--r);padding:20px;margin:26px 0 4px;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 1px 2px rgba(11,31,28,.04), 0 18px 40px -28px rgba(11,31,28,.30)}
.ask-label{display:block;color:var(--slate);margin-bottom:8px}
.picker textarea{
  display:block;width:100%;min-height:130px;padding:15px 16px;border:1.5px solid var(--silver-line);
  border-radius:10px;font-family:var(--body);font-size:16px;line-height:1.5;
  background:var(--wash);color:var(--ink);resize:vertical;
}
.picker textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.picker textarea::placeholder{color:#A7B4B0;font-style:italic}

.askfoot{display:flex;justify-content:flex-end;margin-top:16px}

.sug{margin-top:18px}
.sug .mono{display:block;color:var(--slate);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.sug .chip{flex:1 1 auto;text-align:center}
.chip{
  background:rgba(255,255,255,.45);border:1.5px dashed var(--silver);color:var(--slate);
  padding:10px 16px;border-radius:999px;font-size:14px;line-height:1.35;text-align:left;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease,
             transform .18s ease,box-shadow .18s ease;
}
.chip:hover{
  border-style:solid;border-color:var(--teal);background:var(--teal);color:#fff;
  transform:translateY(-1px);box-shadow:0 5px 14px -5px rgba(18,112,107,.55);
}
.chip:active{transform:translateY(0);box-shadow:none}

.privacy{display:flex;gap:9px;align-items:flex-start;margin:18px 0 0;
  font-size:13px;line-height:1.5;color:var(--amber-ink);
  background:var(--amber-soft);border:1px solid #F0D9AC;border-left:4px solid var(--amber);
  border-radius:9px;padding:12px 14px}
.privacy svg{flex:none;margin-top:2px;color:var(--amber-ink)}
.privacy b{font-weight:600}

/* --------------------------------------------------------------- pathway -- */
.pathway{margin:34px 0 0}
.pathway .cap{margin-bottom:6px}
.pathway .cap h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.025em;
  margin:0 0 4px}
.pathway .cap p{margin:0;font-size:14px;color:var(--slate);max-width:60ch}
.plot{position:relative;width:100%;aspect-ratio:960/300}
@media (max-width:640px){.plot{aspect-ratio:360/300}}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot .node{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;
  border:0;padding:0;background:transparent;border-radius:50%;z-index:2}
.plot .node .dot{display:block;width:13px;height:13px;border-radius:50%;margin:7.5px auto;
  background:var(--paper);border:2.5px solid #9FB0AB;
  transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.plot .node.done .dot{background:var(--teal);border-color:var(--teal)}
.plot .node.on .dot{background:var(--phenol);border-color:var(--phenol);transform:scale(1.2);
  box-shadow:0 0 0 5px rgba(214,21,107,.15)}
.plot .node:hover .dot{border-color:var(--teal);transform:scale(1.35);
  box-shadow:0 0 0 6px rgba(18,112,107,.13)}
.plot .lab{transition:transform .22s ease}
.plot .lab{position:absolute;transform:translateX(-50%);text-align:center;width:128px;
  pointer-events:none}
.plot .lab .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#94A5A0;display:block}
.plot .lab b{font-family:var(--display);font-weight:700;font-size:14px;display:block;
  letter-spacing:-.01em}
.plot .lab .d{display:block;font-size:11.5px;color:var(--slate);line-height:1.3;margin-top:2px}
.plot .lab.done .n{color:var(--teal)}
.plot .lab.here .n{color:var(--phenol)}
.plot .lab.here b{color:var(--phenol)}
@media (max-width:640px){
  /* five labels have to sit side by side on a phone: at 320px the node centres
     are 59px apart, so the label box must stay under that */
  .plot .lab{width:52px}
  .plot .lab b{font-size:10.5px;letter-spacing:-.03em}
  .plot .lab .n{font-size:9px;letter-spacing:.06em}
  .plot .lab .d{display:none}
  .plot .lab.here .d{display:block;font-size:9.5px;line-height:1.25}
  .plot .node{width:34px;height:34px}          /* bigger tap target than the dot */
  .plot .node .dot{margin:10.5px auto}
}

/* ------------------------------------------------------ where you are box -- */
.youare{background:rgba(226,241,240,.86);border:1px solid #BEDCDA;border-left:5px solid var(--teal);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-radius:var(--r);padding:18px 20px;margin:20px 0 0}
.youare .mono{color:var(--teal-deep);display:block;margin-bottom:5px}
.youare h2{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  margin:0 0 6px;color:var(--ink)}
.youare p{margin:0;font-size:15px;line-height:1.55;color:#204744}
.youare .orient{margin-top:12px;padding-top:12px;border-top:1px solid #BEDCDA}

/* --------------------------------------------------------------- results -- */
.results{margin:24px 0 50px}
.results .lead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--mist);margin-bottom:16px;flex-wrap:wrap}
.results .lead h2{font-family:var(--body);font-weight:500;font-size:15.5px;margin:0;
  color:var(--slate);max-width:66ch;line-height:1.5}
.results .lead .mono{color:var(--slate);white-space:nowrap}
.results .lead .degraded{color:var(--amber-ink)}
.key{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px;padding:0}
.key li{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.key li i{width:11px;height:11px;border-radius:3px;display:block;flex:none}

.reslist{display:grid;gap:13px}
.reslist>*{animation:rise .42s cubic-bezier(.2,.7,.3,1) both}
.reslist>*:nth-child(2){animation-delay:.05s}
.reslist>*:nth-child(3){animation-delay:.1s}
.reslist>*:nth-child(4){animation-delay:.15s}
.reslist>*:nth-child(5){animation-delay:.2s}
.reslist>*:nth-child(6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.youare{animation:rise .42s cubic-bezier(.2,.7,.3,1) both}

.res{background:var(--card-glass);border:1px solid var(--silver-line);
  border-left:6px solid var(--fam,#4A5A56);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-radius:var(--r);padding:16px 18px;
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,border-color .2s ease}
.res:hover{transform:translateY(-2px);border-color:#C6D2CD;
  box-shadow:0 2px 4px rgba(11,31,28,.04), 0 14px 28px -14px var(--fam,#4A5A56)}
.res:hover h3{color:var(--fam,#0B1F1C)}
.res h3{transition:color .2s ease}
.res:hover .pill.fam{transform:scale(1.04)}
.pill.fam{transition:transform .2s ease}
.res .rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap}
.res h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;
  margin:0;line-height:1.25;flex:1 1 auto;min-width:190px}
.pills{display:flex;gap:6px;flex-wrap:wrap;flex:none;align-items:center}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;font-weight:500}
.pill.fam{background:var(--fam,#4A5A56);color:#fff}
.pill.type{background:var(--fam-soft,#EDF0EF);color:var(--fam,#4A5A56);
  border:1px solid var(--fam-line,#DCE3DC)}
.pill.status{background:transparent;color:var(--slate);border:1px solid var(--mist)}
.pill.flag{background:var(--amber-soft);color:var(--amber-ink);border:1px solid #F0D9AC}
.pill.src{background:transparent;color:#8A6A2E;border:1px dashed #D8BE86}

.res .meta{font-size:13.5px;color:var(--slate);margin:7px 0 0}
.res .meta b{color:var(--ink);font-weight:600}
.res .why{font-size:14.5px;margin:12px 0 0;line-height:1.55}
.res .why em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fam,#4A5A56);font-weight:500}

.req{background:var(--wash);border:1px solid var(--mist);border-radius:9px;
  padding:12px 14px;margin-top:12px;transition:background .2s ease,border-color .2s ease}
.res:hover .req{background:#FFF;border-color:#CBD8D3}
.req .mono{color:var(--teal-deep);display:block;margin-bottom:5px}
.req p{margin:0;font-size:13.5px;line-height:1.55}

.res .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-top:13px;padding-top:11px;border-top:1px solid var(--mist-soft)}
.res .foot .next{font-size:13.5px;color:var(--ink);flex:1 1 260px;line-height:1.5}
.res .foot .next b{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);display:block;font-weight:400;margin-bottom:2px}
.res .foot .next .who{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;
  color:var(--teal-deep);word-break:break-word}
.res .foot .right{display:flex;align-items:center;gap:12px;flex:none}
.res .check{font-family:var(--mono);font-size:11px;color:var(--teal)}
.res .check.un{color:#94A5A0}
.res .open{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink);
  border-bottom:2px solid var(--phenol);padding-bottom:1px;display:inline-block;
  transition:color .18s ease,border-color .18s ease}
.res .open:hover{color:var(--phenol)}
.res .open .arw{display:inline-block;transition:transform .18s ease}
.res .open:hover .arw{transform:translate(2px,-2px)}

.empty{color:var(--slate);font-size:14.5px}
.err{background:var(--phenol-soft);border:1px solid #F3C2D6;color:#8A1140;padding:12px 14px;
  border-radius:var(--r);font-size:14px}
.skel{height:170px;border-radius:var(--r);border:1px solid var(--silver-line);background:
  linear-gradient(100deg,#F0F2EE 20%,#FAFBF8 40%,#F0F2EE 60%);background-size:220% 100%;
  animation:sweep 1.3s linear infinite}
@keyframes sweep{to{background-position:-220% 0}}

/* branded matching indicator — sleek teal→phenol ring, honest rolling status */
.matching{border:1px solid var(--silver-line);border-radius:var(--r);
  padding:20px;background:var(--wash);display:flex;align-items:center;gap:16px;margin-top:16px}
.spinner{flex:none;width:30px;height:30px;border-radius:50%;
  background:conic-gradient(from 0deg,#0000 0deg 55deg,var(--teal) 150deg,var(--phenol) 320deg,#0000 360deg);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3.5px),#000 calc(100% - 3.5px));
  mask:radial-gradient(farthest-side,#0000 calc(100% - 3.5px),#000 calc(100% - 3.5px));
  animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.matching-msg{color:var(--slate);margin:0}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* show-more reveal */
.more-btn{margin-top:14px;width:100%;background:transparent;border:1px dashed var(--silver);
  color:var(--teal-deep);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:13px;border-radius:999px;cursor:pointer;transition:all .15s}
.more-btn:hover{border-color:var(--teal);background:var(--teal-soft)}
.more-list{margin-top:18px}
.more-divider{color:var(--slate);padding:12px 0 2px;border-top:1px solid var(--silver-line)}

/* ----------------------------------------------------------------- modal -- */
.veil{position:fixed;inset:0;background:rgba(11,31,28,.5);display:flex;align-items:flex-end;
  justify-content:center;z-index:60}
@media (min-width:700px){.veil{align-items:center;padding:24px}}
.sheet{background:rgba(244,245,240,.96);width:100%;max-width:500px;
  border:1px solid var(--silver-line);border-radius:16px 16px 0 0;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  padding:22px 20px 26px;max-height:92vh;overflow:auto}
@media (min-width:700px){.sheet{border-radius:16px}}
.sheet h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;
  margin:0 0 4px}
.sheet p.note{color:var(--slate);font-size:14px;margin:0 0 16px}
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--mist);
  border-radius:9px;font-family:var(--body);font-size:15px;background:#fff;color:var(--ink)}
.field textarea{min-height:74px;resize:vertical}
.field .hint{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--slate)}
.nodata{font-size:12.5px;color:var(--slate);background:var(--mist-soft);border:1px solid var(--mist);
  border-radius:8px;padding:10px 12px;margin:0}
.sheet .actions{display:flex;gap:10px;margin-top:16px}
.go{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:13px 24px;
  font-weight:600;font-size:15px;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.go:hover{background:var(--phenol);transform:translateY(-1px);
  box-shadow:0 6px 18px -6px rgba(214,21,107,.55)}
.go:active{transform:translateY(0);box-shadow:none}
.go[disabled]{opacity:.55;cursor:progress}
.sheet .actions .go{flex:1}
.hp{position:absolute;left:-9999px}

/* -------------------------------------------------------------- fineprint -- */
.fineprint{border-top:1px solid var(--silver-line);padding:22px 0 46px}
.fineprint .cols{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  align-items:flex-start}
.fineprint p{margin:0;font-size:12.5px;line-height:1.6;color:var(--slate);max-width:72ch}
.fineprint .name{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink);
  margin-bottom:6px}

/* ===========================================================================
   Responsive
   Content is unchanged at every width — only spacing, type scale and the
   direction things stack. Three breakpoints: tablet, phone, small phone.
   =========================================================================== */

/* ---------------------------------------------------------------- tablet -- */
@media (max-width:900px){
  :root{ --gutter:26px }
  .hero h1{font-size:clamp(28px,6vw,40px)}
  .grid,.two{grid-template-columns:1fr}
}

/* ----------------------------------------------------------------- phone -- */
@media (max-width:640px){
  :root{ --gutter:18px; --r:12px }

  /* the background is the biggest battery cost on a phone, so soften it */
  body::before{opacity:.85}
  #bg{opacity:.75}

  .masthead .bar{min-height:58px;gap:10px}
  .brand .logo{width:32px;height:32px}
  .brand .wm{font-size:15.5px}
  .brand .wm .sg{display:inline}
  .ghost{padding:7px 12px;font-size:13px}

  .hero{padding:26px 0 4px}
  .hero h1{font-size:clamp(26px,7.4vw,34px);line-height:1.1}
  .hero .lede{font-size:15.5px}
  .features{gap:6px}
  .features li{font-size:11.5px;padding:5px 11px}

  .picker{padding:16px;margin-top:20px}
  .picker textarea{min-height:112px;font-size:16px}   /* 16px stops iOS zooming on focus */
  .askfoot{margin-top:14px}
  .askfoot .go{width:100%;justify-content:center;padding:14px 20px}
  .sug{margin-top:16px}
  .sug .chip{flex:1 1 100%;text-align:left}
  .privacy{font-size:12.5px;padding:11px 12px}

  .pathway{margin-top:26px}
  .pathway .cap h2{font-size:19px}
  .pathway .cap p{font-size:13px}
  /* five labels have to sit side by side: at 320px the node centres are only
     ~59px apart, so the label box must stay under that */
  .plot{aspect-ratio:360/300}
  .plot .lab{width:52px}
  .plot .lab b{font-size:10.5px;letter-spacing:-.03em}
  .plot .lab .n{font-size:9px;letter-spacing:.06em}
  .plot .lab .d{display:none}
  .plot .lab.here .d{display:block;font-size:9.5px;line-height:1.25}
  .plot .node{width:34px;height:34px}      /* bigger tap target than the dot */
  .plot .node .dot{margin:10.5px auto}
  .youare{padding:15px 16px}
  .youare h2{font-size:16.5px;line-height:1.3}
  .youare p{font-size:14px}

  .results{margin:20px 0 40px}
  .results .lead{flex-direction:column;align-items:flex-start;gap:4px}
  .results .lead h2{font-size:14.5px}
  .key{gap:10px;margin-bottom:12px}
  .key li{font-size:9.5px}

  .res{padding:14px 15px;border-left-width:5px}
  .res .rhead{gap:8px}
  .res h3{font-size:16.5px;min-width:0;flex-basis:100%}
  .pills{gap:5px}
  .pill{font-size:9.5px;padding:3px 7px}
  .res .meta,.res .why{font-size:14px}
  .req{padding:10px 12px}
  .req p{font-size:13px}
  .res .foot{gap:10px}
  .res .foot .next{flex:1 1 100%;font-size:12.5px}
  .res .foot .right{width:100%;justify-content:space-between}

  /* the card lift reads as a jump on touch, where there is no hover state */
  .res:hover{transform:none}
  .chip:hover,.go:hover,.ghost:hover{transform:none;box-shadow:none}

  .sheet{border-radius:18px 18px 0 0;padding:20px 18px 24px}
  .sheet h2{font-size:19px}
  .field input,.field select,.field textarea{font-size:16px}
  .sheet .actions{flex-direction:column-reverse}
  .sheet .actions .go,.sheet .actions .ghost{width:100%;text-align:center}

  .fineprint{padding:20px 0 40px}
  .fineprint .cols{flex-direction:column;gap:14px}
}

/* ------------------------------------------------------------ small phone -- */
@media (max-width:400px){
  :root{ --gutter:14px }
  .brand .wm{font-size:14.5px}
  .brand .wm .sg{display:none}          /* "Singapore" wraps awkwardly at 320px */
  .hero h1{font-size:25px}
  .features li{font-size:11px}
  .res h3{font-size:15.5px}
  .pill{font-size:9px;letter-spacing:.04em}
  .plot .lab{width:46px}
  .plot .lab b{font-size:10px}
  .chips{gap:7px}
}

/* --------------------------------------------------- respect motion + data -- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .res:hover,.chip:hover,.go:hover,.ghost:hover{transform:none!important}
}
/* Some browsers expose a data-saver preference; drop the canvas entirely. */
@media (prefers-reduced-data:reduce){
  #bg{display:none}
}

/* footer legal links */
.fineprint .legal-links{margin:8px 0 0;font-size:12.5px}
.fineprint .legal-links a{color:var(--teal-deep);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--silver-line)}
.fineprint .legal-links a:hover{border-color:var(--teal)}