/* =========================================================================
   isanyonepoorly? — design system
   Palette, type and components copied from /design/mockup.html (source of truth),
   then layered with a responsive desktop layout so it's sleek on every screen.
   ========================================================================= */

:root{
  /* ink-soft / ink-faint darkened from the mockup to meet WCAG AA (4.5:1) on both
     --paper and --field, since all their text is small. The hierarchy is preserved. */
  /* refreshed June 2026: near-white cards for contrast, lighter warm backdrop,
     darker soft ink — keeps the warmth, loses the gloom */
  /* June 2026 reskin: white + airy, teal for actions, warm red ONLY for illness
     "heat" semantics, sans-serif UI with serif display headings */
  /* monochrome ink-on-white; colour appears ONLY as the illness signal (--active) */
  --paper:#FFFFFF;--ink:#121215;--ink-soft:#52525B;--ink-faint:#6E6E76;
  --rule:#E7E7EA;--rule-soft:#F2F2F4;--active:#D9480F;--field:#F6F6F7;
  --bg:#FFFFFF;
  --accent:#D9480F;--accent-deep:#B93D0C;
  --display:'Bricolage Grotesque',-apple-system,'Segoe UI',sans-serif;
  --sans:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --shell:640px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
button,input,select,textarea{font-family:inherit;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);font-family:var(--sans);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

/* ---------- shared atoms (from mockup) ---------- */
h1,h2,h3,.wm,.answer,.screen-h,.cname,.hero h1{font-family:var(--display);font-weight:600;}
.wm b{color:var(--active);}  /* the playful coral "?" in the wordmark */

.label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.note{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.price{font-variant-numeric:oldstyle-nums;}
.muted{color:var(--ink-soft);}

.btn{display:block;width:100%;text-align:center;font-family:var(--sans);font-size:16px;font-weight:600;
  padding:15px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:2px;
  cursor:pointer;transition:transform .08s ease,background .15s ease;text-decoration:none;}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);text-decoration:none;}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.ghost:hover{background:var(--field);}
.btn.danger{background:transparent;color:var(--active);border-color:var(--active);}
.btn.danger:hover{background:rgba(217,72,15,.08);}
.btn:active{transform:scale(.99);opacity:.9;}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.chip2:focus-visible,.wopt:focus-visible,.bell:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:10px 14px;border-radius:0 0 6px 0;z-index:1000;}
.skip:focus{left:0;}

/* toasts — the single feedback channel for the whole app. Fixed at the top so a
   message is always in view, never lost below the fold of a long form. */
.toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1000;
  width:100%;max-width:440px;padding:0 14px;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;}                       /* empty space stays click-through */
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--ink-faint);
  border-radius:8px;padding:12px 12px 12px 14px;font-size:14.5px;line-height:1.4;color:var(--ink);
  box-shadow:0 6px 24px rgba(18,18,21,.12);animation:toast-in .28s cubic-bezier(.2,.7,.3,1);}
.toast.success{border-left-color:#3c8a3c;}
.toast.error{border-left-color:var(--active);}
.toast.info,.toast.upsell{border-left-color:var(--ink-faint);}
.toast-ic{flex:none;margin-top:1px;color:var(--ink-faint);display:flex;}
.toast.success .toast-ic{color:#3c8a3c;}
.toast.error .toast-ic{color:var(--active);}
.toast-msg{flex:1 1 auto;}
.toast-x{flex:none;background:none;border:none;cursor:pointer;font-size:18px;line-height:1;
  color:var(--ink-faint);padding:0 2px;margin:-2px -2px 0 0;}
.toast-x:hover{color:var(--ink);}
.toast.hiding{animation:toast-out .22s ease forwards;}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px);}}
@media (prefers-reduced-motion:reduce){.toast,.toast.hiding{animation:none;}}
/* on framed (desktop) screens, anchor the toast to the top of the app card rather
   than the top of the window; .app-shell is position:relative. On mobile the card
   fills the screen and the page scrolls, so the default fixed positioning stays. */
@media (min-width:600px){
  .app-shell > .toasts{position:absolute;}
}

/* ======================================================================
   MARKETING — responsive site (mobile-first, desktop two-column hero)
   ====================================================================== */
/* width:100% keeps these centred wrappers full-width as flex items (sticky footer) */
.site{max-width:1120px;width:100%;margin:0 auto;padding:0 24px;}
main.site{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;}
.site-header{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:22px 0 0;max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px;}
.site-header .wm{font-size:17px;letter-spacing:-.3px;}
.site-header .wm b{font-weight:600;}
.site-header nav{display:flex;gap:22px;align-items:center;font-size:15px;}
.site-header nav a{color:var(--ink-soft);}
.site-header nav a:hover{color:var(--ink);}
.site-header .si{color:var(--accent);font-weight:600;}

.hero{padding:16px 0 22px;text-align:center;}
.hero-inner{display:flex;flex-direction:column;align-items:center;max-width:640px;margin:0 auto;}
.hero h1{font-size:34px;line-height:1.14;font-weight:700;letter-spacing:-.6px;margin:0;text-wrap:balance;}
.hero h1 .uw{text-decoration:underline wavy var(--active);text-decoration-thickness:3px;text-underline-offset:8px;white-space:nowrap;}
.hero .sub{margin:12px auto 0;font-size:16.5px;line-height:1.55;color:var(--ink-soft);}
.hero .sub .line{display:block;}
.hl{background:rgba(217,72,15,.13);color:var(--ink);font-weight:600;padding:1px 6px;border-radius:2px;}
.report-link{margin-top:22px;font-size:14.5px;color:var(--ink-soft);}
.report-link b{color:var(--accent);font-weight:600;}
.report-link:hover{text-decoration:none;}
.report-link:hover b{text-decoration:underline;}
.hero .btn.cta{max-width:300px;margin-top:20px;}
.live-badge{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:7px 14px;
  margin-top:18px;box-shadow:0 1px 2px rgba(23,25,30,.05);}
.live-badge b{color:var(--ink);font-weight:600;}
.live-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--active);
  box-shadow:0 0 0 4px rgba(217,72,15,.14);animation:pulse 2.2s ease-in-out infinite;}

/* demoted supporting strip */
/* flex-grow: on tall windows the strip stretches to meet the footer (no grey void) */
.below{background:var(--paper);border-top:1px solid var(--rule);flex:0 0 auto;}
.below-inner{max-width:1120px;margin:0 auto;padding:22px 24px 26px;
  display:flex;flex-direction:column;gap:22px;}
.b-steps{display:flex;flex-direction:column;gap:7px;margin:0;}
.b-step{display:flex;gap:12px;align-items:baseline;font-size:15px;}
.b-step .n{font-family:var(--display);font-size:22px;font-weight:700;color:#D9D9DE;width:28px;flex:none;line-height:1;}
.b-step .s{color:var(--ink-soft);font-size:14px;}
/* stacked on mobile: the facts read as a distinct group, set off by a hairline */
.below-facts{padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:14px;}
.b-fact{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin:0;}
.b-fact b{color:var(--ink);font-weight:500;}

/* pricing */
.pricewrap{max-width:760px;width:100%;margin:0 auto;padding:40px 24px 60px;}
.pricewrap h1{font-size:30px;font-weight:500;letter-spacing:-.4px;margin:0 0 8px;}
.tiers{display:grid;gap:18px;margin:28px 0;grid-template-columns:1fr 1fr;}
.tier{border:1px solid var(--rule);border-radius:14px;padding:24px;background:var(--paper);}
.tier.featured{border-color:var(--ink);box-shadow:0 10px 30px -16px rgba(16,15,15,.3);}
.tier h3{margin:0 0 4px;font-size:18px;font-weight:600;}
.tier .amt{font-size:30px;font-weight:500;margin:10px 0 4px;letter-spacing:-.5px;}
.tier .amt small{font-size:14px;color:var(--ink-soft);font-weight:400;}
.tier ul{list-style:none;padding:0;margin:16px 0;font-size:15px;color:var(--ink-soft);}
.tier li{padding:7px 0 7px 22px;position:relative;}
.tier li::before{content:"·";position:absolute;left:6px;color:var(--active);font-weight:700;}
.faq{margin-top:36px;}
.faq h2{font-size:20px;font-weight:500;margin:0 0 14px;}
.faq dt{font-weight:600;margin-top:18px;font-size:15.5px;}
.faq dd{margin:6px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.6;}

/* legal + prose */
.prose{max-width:720px;width:100%;margin:0 auto;padding:40px 24px 60px;}
.prose h1{font-size:28px;font-weight:500;margin:0 0 6px;letter-spacing:-.4px;}
.prose h2{font-size:18px;font-weight:600;margin:28px 0 8px;}
.prose p,.prose li{font-size:15.5px;color:var(--ink-soft);line-height:1.65;}
.prose .updated{font-size:13px;color:var(--ink-faint);margin-bottom:24px;}
.prose .callout{background:var(--field);border:1px solid var(--rule);border-radius:10px;
  padding:16px 18px;margin:22px 0;font-size:14px;color:var(--ink-soft);}

/* sticky footer: body is a column filling the viewport, the footer is pushed to the
   bottom edge, so a taller-than-content window never shows a dead band below it */
body:not(.app){display:flex;flex-direction:column;}
.site-footer{border-top:1px solid var(--rule);background:var(--paper);margin-top:auto;}
.site-footer .inner{max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;
  flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-soft);}
.site-footer a{color:var(--ink-soft);}
.site-footer .links{display:flex;gap:18px;flex-wrap:wrap;}

/* ======================================================================
   APP — centered shell (sleek on desktop, full-bleed on mobile)
   ====================================================================== */
.app-shell{max-width:var(--shell);margin:0 auto;background:var(--paper);
  min-height:100vh;min-height:100dvh;  /* dvh handles mobile browser toolbars */
  display:flex;flex-direction:column;position:relative;
  border-left:1px solid #CECDC3;border-right:1px solid #CECDC3;}
.app-scroll{flex:1 1 auto;}

.trialbar{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule);font-size:13px;padding:9px 22px;
  display:flex;justify-content:space-between;align-items:center;}
.trialbar .pl{opacity:.85;}
.trialbar .see{cursor:pointer;color:var(--accent);font-weight:600;}
.trialbar.subscribed{background:var(--ink);color:#fff;border-bottom:none;}

.app-top{padding:14px 22px 12px;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;justify-content:space-between;}
.app-top .wm{font-size:16px;letter-spacing:-.5px;}
.app-top .wm b{font-weight:600;}
.app-top .hint{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.app-top .hint a{color:var(--ink-faint);}

.pad{padding:20px 28px 30px;}
h2.screen-h{font-size:22px;font-weight:500;margin:6px 0 4px;}

.pinsel{display:flex;align-items:center;gap:7px;cursor:pointer;background:none;border:none;
  font-family:var(--sans);padding:0;text-align:left;color:var(--ink);}
.pinsel h2{font-size:19px;margin:0;font-weight:500;}
.pinsel .car{color:var(--ink-faint);font-size:13.5px;}
.subpin{font-size:14px;color:var(--ink-soft);margin-top:1px;}
.answer{font-size:28px;line-height:1.18;font-weight:500;margin:16px 0 6px;letter-spacing:-.4px;}
.answer.quiet{color:var(--ink-soft);font-weight:500;}
.meta{font-size:13.5px;color:var(--ink-soft);}

.heatband{margin-top:14px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;cursor:pointer;display:block;
  text-decoration:none;color:inherit;background:none;width:100%;padding:0;font-family:var(--sans);}
.heatband:hover{text-decoration:none;}
.heatband .cap{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-soft);}
.heatband .cap .open{color:var(--ink);}

hr.in{border:none;border-top:1px solid var(--rule);margin:20px 0 4px;}
.grouplbl{display:block;margin:14px 0 2px;}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:13px 0;border-bottom:1px solid var(--rule-soft);align-items:center;}
.row.rise .cname{color:var(--ink);}
.cname{font-size:16.5px;grid-column:1;grid-row:1;}
.cmeta{font-size:13.5px;color:var(--ink-soft);grid-column:1;grid-row:2;}
.spark{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.trend{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;}
.t-rise{color:var(--active);}
.t-steady{color:var(--ink-soft);}
.t-fade{color:var(--ink-faint);}

/* empty / quiet states */
.empty{text-align:center;padding:34px 20px;color:var(--ink-soft);}
.empty .big{font-size:40px;line-height:1;margin-bottom:10px;}
.empty h3{font-size:18px;font-weight:500;color:var(--ink);margin:0 0 6px;}
.empty p{font-size:15px;margin:0 auto 4px;max-width:34ch;line-height:1.55;}

/* report form bits */
.step-b{margin:22px 0;}
.step-b .label{margin-bottom:10px;display:block;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.chip2{border:1px solid var(--rule);background:var(--field);border-radius:4px;padding:12px;font-size:15px;cursor:pointer;line-height:1.25;
  font-family:var(--sans);text-align:left;color:var(--ink);}
.chip2.full{grid-column:1 / -1;}
.chip2.sel{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);border-color:var(--ink);}
/* two-line chip: bold-ish name + quiet plain-language hint */
.chip2 .cn{display:block;}
.chip2 .ch{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.3;}
.chip2.chk{display:flex;align-items:center;gap:9px;}
.chip2.chk .ct{display:flex;flex-direction:column;min-width:0;}
.chip2.chk input[type=checkbox]{flex:none;}
#condGrid .condcat:first-child{margin-top:4px;}
.addplace>summary.addsum{cursor:pointer;color:var(--ink-soft);font-size:15px;padding:12px 0;list-style:none;}
.addplace>summary.addsum::-webkit-details-marker{display:none;}
.wopt{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:4px;padding:12px 13px;cursor:pointer;font-size:15px;margin-bottom:9px;
  font-family:var(--sans);width:100%;text-align:left;background:var(--paper);color:var(--ink);}
.wopt.sel{box-shadow:inset 0 0 0 1px var(--ink);border-color:var(--ink);}
.wopt .dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--ink-faint);flex:none;}
.wopt.sel .dot{background:var(--ink);border-color:var(--ink);}
.pcfield{margin-top:6px;}
.pcfield input{font-family:var(--sans);font-size:16px;padding:11px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);width:100%;text-transform:uppercase;margin-top:9px;}
.pcfield input:focus{outline:none;border-color:var(--ink);}
.pchelp{font-size:12.5px;color:var(--ink-faint);margin-top:5px;display:block;}
.reportfree{font-size:13px;color:var(--accent);letter-spacing:.04em;margin-top:14px;text-align:center;}
.hidden{display:none;}

/* nursery search results */
.search-results{border:1px solid var(--rule);border-top:none;border-radius:0 0 4px 4px;max-height:230px;overflow-y:auto;}
.search-results .opt{padding:11px 13px;border-bottom:1px solid var(--rule-soft);cursor:pointer;font-size:15px;
  width:100%;text-align:left;background:var(--paper);font-family:var(--sans);color:var(--ink);border-left:none;border-right:none;}
.search-results .opt:last-child{border-bottom:none;}
.search-results .opt:hover{background:var(--field);}
.search-results .opt .sub{font-size:12.5px;color:var(--ink-soft);}
.search-results .none{padding:12px 13px;color:var(--ink-soft);font-size:13.5px;font-style:italic;}
.search-results .suggest-form .pchelp{margin-top:7px;}

/* pins screen */
.pinrow{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--rule-soft);gap:10px;}
.pinrow .pn{font-size:16.5px;}
.pinrow .ps{font-size:13.5px;color:var(--ink-soft);}
.pinrow .actions{display:flex;gap:8px;align-items:center;}
.bell{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--rule);border-radius:4px;padding:6px 10px;color:var(--ink-soft);cursor:pointer;
  font-family:var(--sans);background:var(--paper);}
.bell.on{border-color:var(--ink);color:var(--ink);}
.iconbtn{border:1px solid var(--rule);background:var(--paper);border-radius:4px;padding:6px 9px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;font-family:var(--sans);}
.iconbtn:hover{border-color:var(--active);color:var(--active);}

.plan{margin-top:22px;border:1px solid var(--ink);border-radius:8px;padding:18px 16px;background:var(--field);}
.plan h3{margin:0 0 6px;font-size:16px;font-weight:600;}
.plan p{margin:0 0 14px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}

.backbar{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);cursor:pointer;margin-bottom:14px;
  background:none;border:none;font-family:var(--sans);padding:0;}

/* forms (signup / login / account) */
.fld{margin:20px 0;}
.fld label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
.fld input,.fld select{font-family:var(--sans);font-size:16px;padding:11px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);width:100%;}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ink);}
.fld .err{color:var(--active);font-size:13.5px;margin-top:6px;}
.seg{display:flex;border:1px solid var(--rule);border-radius:4px;overflow:hidden;}
.seg button{flex:1;text-align:center;padding:11px;font-size:14.5px;cursor:pointer;color:var(--ink-soft);
  background:var(--paper);border:none;font-family:var(--sans);}
.seg button.sel{background:var(--ink);color:var(--paper);}
.micro{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:12px;}

.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);margin:14px 0;}
.check input{margin-top:3px;}

/* map screen */
.map-wrap{position:relative;}
#leafmap{height:60vh;min-height:380px;width:100%;background:var(--field);border:1px solid var(--rule);border-radius:8px;overflow:hidden;}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink-soft);margin-top:12px;align-items:center;flex-wrap:wrap;}
.legend .li{display:flex;align-items:center;gap:6px;}
.filter-pills{display:flex;gap:7px;overflow-x:auto;padding:10px 0 4px;-ms-overflow-style:none;scrollbar-width:none;}
.filter-pills::-webkit-scrollbar{display:none;}
.pill{flex:none;font-size:12.5px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  padding:7px 12px;cursor:pointer;color:var(--ink-soft);white-space:nowrap;font-family:var(--sans);}
.pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.mapsum{margin-top:18px;border-top:1px solid var(--rule);padding-top:6px;}
.heat-ramp{height:7px;width:120px;border-radius:4px;margin:5px 0 4px;
  background:linear-gradient(90deg,#EEF4F0,rgba(209,77,65,.55),var(--active));}

/* leaflet restyle to match (from map-demo.html) */
.leaflet-control-zoom a{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--rule)!important;font-family:var(--sans);}
.leaflet-bar{border-color:var(--rule)!important;box-shadow:0 2px 10px rgba(16,15,15,.10)!important;}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;color:var(--ink-faint)!important;font-size:9px!important;font-family:var(--sans);}
.leaflet-control-attribution a{color:var(--ink-soft)!important;}
.leaflet-control-geocoder{border-radius:999px!important;border:1px solid var(--rule)!important;box-shadow:0 2px 10px rgba(16,15,15,.10)!important;background:var(--paper)!important;}
.leaflet-control-geocoder-icon{border-radius:999px!important;background-color:var(--paper)!important;}
.leaflet-control-geocoder-form input{font-family:var(--sans);font-size:15px;color:var(--ink);}
.leaflet-touch .leaflet-control-geocoder-icon{width:34px;height:34px;}

/* bottom tab nav */
.tabnav{display:flex;border-top:1px solid var(--rule);background:var(--paper);position:sticky;bottom:0;z-index:30;
  padding-bottom:env(safe-area-inset-bottom);}
.tabnav a{flex:1;text-align:center;font-family:var(--sans);padding:13px 0 16px;font-size:14.5px;color:var(--ink-faint);position:relative;text-decoration:none;}
.tabnav a.on{color:var(--ink);}
.tabnav a.on::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:2px;background:var(--ink);}

/* success overlay */
.overlay{position:fixed;inset:0;background:rgba(255,255,255,.97);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;z-index:200;}
.overlay.on{display:flex;animation:fade .3s ease;}
.overlay .tick{font-size:34px;margin-bottom:14px;color:var(--active);}
.overlay h3{font-size:22px;font-weight:500;margin:0 0 8px;}
.overlay p{font-size:15px;color:var(--ink-soft);margin:0 0 24px;max-width:260px;line-height:1.5;}
.overlay .btn{max-width:220px;}

/* styleguide */
.sg-swatches{display:flex;gap:10px;flex-wrap:wrap;}
.sg-sw{width:84px;}
.sg-sw .chip{height:46px;border-radius:6px;border:1px solid var(--rule);}
.sg-sw small{font-size:11.5px;color:var(--ink-soft);display:block;margin-top:5px;}

/* ---------- animations ---------- */
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{opacity:1}50%{opacity:.2}100%{opacity:1}}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
/* tablet and up: the supporting strip goes side-by-side so its short lines fill
   the width instead of stranding on the left of a wide single column */
@media (min-width:700px){
  .below-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
  .b-steps{margin:0;}
  /* two columns: drop the mobile stacking separator */
  .below-facts{padding-top:0;border-top:none;}
}

/* desktop hero becomes larger */
@media (min-width:860px){
  .hero{padding:16px 0 26px;}
  .hero h1{font-size:44px;}
  .hero .sub{font-size:18px;margin-top:20px;}
}

/* app shell gets a framed look on larger screens; margin:auto centres the frame
   vertically too, so a tall window shows balanced space around it, not a gap below */
@media (min-width:600px){
  body.app{background:var(--field);padding:24px 0;display:flex;flex-direction:column;}
  /* phone frame: cap the card to the viewport so the trial bar (top) and the tab
     bar (bottom) are ALWAYS visible; the content scrolls INSIDE the frame, never
     the whole page. A short screen still hugs its content and centres. */
  .app-shell{margin:auto;width:100%;min-height:auto;max-height:calc(100vh - 48px);
    border:1px solid #CECDC3;border-radius:20px;
    overflow:hidden;box-shadow:0 16px 50px -20px rgba(16,15,15,.25);}
  .app-scroll{min-height:0;overflow-y:auto;}
  .tabnav{position:static;}
}

/* phone: edge-to-edge marketing + app */
@media (max-width:599px){
  .app-shell{border-left:none;border-right:none;}
}
@media (max-width:560px){
  .tiers{grid-template-columns:1fr;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}