/* BuckAround styles. Colours are tokens so the app follows the phone's light or dark setting. */
:root{
 --bg:#f2f4ef;--bg2:#e9ede5;--card:#ffffff;--field:#f1f4ee;--pill:#e3e8df;--field-hover:#e9eee5;--ink:#15211a;--ink2:#3c4a41;--muted:#6b786f;--faint:#97a39a;
 --line:#e3e8e0;--line2:#d5ddd2;--accent:#3d7a2a;--accent-soft:#e7f3dc;--accent-ink:#2f6420;
 --forest:#173f2e;--deep:#102b20;--lime:#c8f078;--on-lime:#17301f;
 --good:#3a7a22;--good-bg:#e5f3d9;--bad:#b04a2e;--bad-bg:#fbeae4;--neutral-bg:#eef1ec;
 --hero1:#18412f;--hero2:#0f281d;--hero-ink:#ffffff;--hero-muted:#c3d5c8;--hero-chip:#ffffff14;--hero-line:#ffffff24;
 --shadow:0 1px 2px #13281d0d,0 6px 20px #13281d0a;--shadow-lg:0 20px 50px #10281e26;
 --bar:#f2f4efd9;--sheet:#ffffff;--scrim:#0b1a1366;
 --r-lg:22px;--r:16px;--r-sm:12px;
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){
 :root:not(.light-only){
  --bg:#0b110e;--bg2:#111916;--card:#151d19;--field:#1d2722;--pill:#1f2a24;--field-hover:#24302a;--ink:#ecf2ed;--ink2:#c9d4cc;--muted:#93a198;--faint:#6d7a72;
  --line:#232e28;--line2:#2e3a33;--accent:#b6e26b;--accent-soft:#22331d;--accent-ink:#bfe67d;
  --good:#a6dc6e;--good-bg:#1f3219;--bad:#f0997a;--bad-bg:#3a201a;--neutral-bg:#212a25;
  --hero1:#173826;--hero2:#0e1f17;--hero-chip:#ffffff10;--hero-line:#ffffff1c;
  --shadow:none;--shadow-lg:0 20px 50px #0008;
  --bar:#0b110ed9;--sheet:#161f1a;--scrim:#000a;
  color-scheme:dark;
 }
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
a{color:var(--accent-ink)}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12px}
h1,h2,h3{letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{border:0;border-radius:14px;min-height:50px;padding:0 20px;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .12s,filter .12s;letter-spacing:-.01em}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lime);color:var(--on-lime)}
.btn.primary:hover{filter:brightness(1.03)}
.btn.dark{background:var(--forest);color:#fff}
.btn.light{background:var(--field);color:var(--ink)}
.header .btn.light{background:var(--pill)}
.btn.block{width:100%}
.quiet{border:0;background:transparent;color:var(--muted);font-weight:650;padding:8px 12px;border-radius:10px;font-size:15px;text-decoration:none}
.quiet:hover{background:var(--field);color:var(--ink)}
.navlink.active{color:var(--ink);background:var(--field)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent-ink);font-weight:650;text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.iconbtn{border:0;background:var(--pill);border-radius:999px;min-height:38px;padding:0 15px;font-weight:650;font-size:14px;color:var(--ink)}
.iconbtn.on{background:#fff2c2;color:#5c4710}
@media (prefers-color-scheme:dark){:root:not(.light-only) .iconbtn.on{background:#3a3112;color:#f3dc8a}}
.backbtn{border:0;background:none;display:inline-flex;align-items:center;gap:2px;color:var(--accent-ink);font-weight:600;font-size:17px;padding:6px 8px 6px 0}
.backbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:env(safe-area-inset-top) clamp(16px,4vw,48px) 0;height:calc(64px + env(safe-area-inset-top));background:var(--bar);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:.5px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.03em;font-size:20px}
.mark{height:36px;width:36px;border-radius:10px;flex-shrink:0}
img.mark{display:block}
.tag{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--faint);font-weight:700;line-height:1.2}
.header .right{display:flex;align-items:center;gap:4px}
#feedbackNav{min-height:38px;padding:0 15px;font-size:14px;border-radius:999px}

/* Layout */
.page{max-width:1180px;margin:0 auto;padding:24px clamp(16px,3vw,24px) 56px;animation:enter .22s ease}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}
.page>*+*{margin-top:14px}
.page>.eyebrow+.pagetitle{margin-top:4px}
.pagetitle{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.035em;margin:4px 0 0}
.pagesub{font-size:15px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.page>.pagesub+*{margin-top:18px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--accent)}
.column{display:grid;gap:14px;min-width:0;align-content:start}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);min-width:0;border:.5px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not(.light-only) .card{border-color:transparent}}
.pad{padding:20px}
.title{font-size:20px;line-height:1.25;font-weight:750;margin:0 0 6px}
.cardtitle{font-size:17px;font-weight:750;margin:0 0 6px}
.sub{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.help{color:var(--faint);font-size:12px;line-height:1.55;margin:8px 0 0}
.line{height:1px;background:var(--line);margin:12px 0}
.footer,.sitefoot{text-align:center;color:var(--faint);font-size:12px;line-height:1.6;margin:26px auto 0;max-width:640px}
.cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.empty{color:var(--muted);font-size:14px;line-height:1.6;padding:6px 0;margin:0}
.notice{border-radius:var(--r-sm);padding:12px 14px;font-size:14px;margin:0 0 14px}
.notice.error{background:var(--bad-bg);color:var(--bad)}

/* Form controls */
.field{margin:0 0 16px}
.label{display:block;font-size:13px;font-weight:650;color:var(--ink2);margin:0 0 7px;letter-spacing:-.005em}
.input,.select{width:100%;border:0;border-radius:var(--r-sm);background:var(--field);padding:0 14px;min-height:50px;font-size:17px;color:var(--ink);transition:background .15s,box-shadow .15s;outline:0}
.input:hover,.select:hover{background:var(--field-hover)}
.input:focus,.select:focus,.moneyfield:focus-within,.picker:focus-visible{box-shadow:0 0 0 2px var(--accent);background-color:var(--card)}
.input::placeholder,.moneyfield input::placeholder{color:var(--faint)}
textarea.input{padding:13px 14px;min-height:104px;resize:vertical;line-height:1.5}
.select{-webkit-appearance:none;appearance:none;padding-right:40px;background-repeat:no-repeat!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;text-overflow:ellipsis}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
.input.search{padding-left:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;background-size:20px}
.moneyfield{display:flex;align-items:center;gap:8px;border-radius:var(--r);background:var(--field);padding:0 16px;min-height:60px;transition:background .15s,box-shadow .15s;cursor:text}
.moneyfield .symbol{font-size:22px;font-weight:600;color:var(--muted)}
.moneyfield input{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:0;font-size:28px;font-weight:750;letter-spacing:-.02em;color:var(--ink);padding:8px 0;font-variant-numeric:tabular-nums}
.currencybadge{flex-shrink:0;font-size:13px;font-weight:700;color:var(--muted);background:var(--card);border-radius:8px;padding:4px 8px}
.moneyfield:focus-within .currencybadge{background:var(--field)}
.moneyfield.mini{min-height:46px;padding:0 12px;border-radius:var(--r-sm)}
.moneyfield.mini input{font-size:17px;font-weight:700;padding:6px 0}
.moneyfield.mini .symbol{font-size:15px}
.picker{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;border:0;border-radius:var(--r);background:var(--field);padding:8px 14px;text-align:left;color:var(--ink);transition:background .15s}
.picker:hover{background:var(--field-hover)}
.picker .pflag{font-size:26px;line-height:1}
.picker .pname{flex:1;min-width:0;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker .pcur{font-size:13px;font-weight:700;color:var(--muted)}
.picker:after{content:"";width:20px;height:20px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat}
.regwrap{display:block;margin-top:8px}
.reglabel{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 5px 2px}
.regsel{min-height:44px;font-size:15px}
.regsel.pulse{animation:pulse 1.4s ease}@keyframes pulse{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--accent)}}
.durrow{display:grid;grid-template-columns:1fr 1.25fr;gap:8px}
.swap{border:0;background:var(--field);border-radius:999px;width:40px;height:40px;font-size:18px;color:var(--accent-ink);padding:0;display:grid;place-items:center;transition:transform .2s}
.swap:active{transform:rotate(180deg)}
/* Segmented control */
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--field);border-radius:12px;padding:3px}
.segmented button{white-space:nowrap;padding:0 4px;letter-spacing:-.01em;border:0;background:transparent;border-radius:10px;min-height:40px;font-weight:650;font-size:14px;color:var(--ink2);transition:background .15s}
.segmented button.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0000001f,0 1px 1px #0000000d}
@media (prefers-color-scheme:dark){:root:not(.light-only) .segmented button.active{background:#34423a}}
/* Stepper */
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--field);border-radius:var(--r-sm);padding:4px;min-height:50px}
.stepper button{border:0;background:var(--card);border-radius:9px;width:44px;height:40px;font-size:22px;font-weight:500;color:var(--accent-ink);box-shadow:0 1px 2px #00000014}
@media (prefers-color-scheme:dark){:root:not(.light-only) .stepper button{background:#2c3832}}
.stepper b{font-size:18px}
/* Chips */
.filter-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 12px;padding:2px}
.filter-row::-webkit-scrollbar{display:none}
.filter-tab{flex-shrink:0;border:0;background:var(--field);border-radius:999px;min-height:34px;padding:0 13px;color:var(--ink2);font-size:13px;font-weight:650;white-space:nowrap}
.filter-tab.active{background:var(--ink);color:var(--bg)}
/* Yes/maybe/no */
.ynrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.yn{border:0;background:var(--card);border-radius:14px;min-height:48px;font-weight:650;font-size:15px;color:var(--ink);box-shadow:var(--shadow)}
.yn.active{background:var(--forest);color:#fff}
#fbAnswers .yn{background:var(--field);box-shadow:none}
#fbAnswers .yn.active{background:var(--forest);color:#fff}
.bartrack{height:8px;border-radius:99px;background:var(--field);overflow:hidden}
.barfill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .35s}
.up{color:var(--good)}.down{color:var(--bad)}

/* Home */
.home-page{max-width:1220px}
.home-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;padding:24px 0 40px}
.home-hero>*{min-width:0}
.hero-copy{padding-top:24px}
.home-title{font-size:clamp(44px,6vw,72px);line-height:1;letter-spacing:-.045em;font-weight:850;margin:14px 0 20px}
.home-title span,.sc-copy h1 span{color:#5f9a3c}
@media (prefers-color-scheme:dark){:root:not(.light-only) .home-title span,:root:not(.light-only) .sc-copy h1 span{color:var(--lime)}}
.home-lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:560px;margin:0}
.hero-proof{display:flex;gap:8px 16px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:13px;font-weight:600}
.featurelinks{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px;max-width:560px}
.featurelinks button{border:0;background:var(--card);border-radius:var(--r);padding:14px;text-align:left;color:var(--ink);display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;box-shadow:var(--shadow)}
.featurelinks button span{font-size:24px;grid-row:span 2}.featurelinks button b{font-size:15px}.featurelinks button small{color:var(--muted);font-size:12px;line-height:1.4}
.calc{background:var(--card);border-radius:28px;box-shadow:var(--shadow-lg);padding:clamp(20px,3vw,28px);scroll-margin-top:84px;border:.5px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not(.light-only) .calc{border-color:transparent}}
.calc h2{font-size:22px;font-weight:800;margin:0 0 4px}
.calc>p{font-size:14px;color:var(--muted);margin:0 0 20px}
.cityrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:start;margin-bottom:16px}
.cityrow .field{margin:0;min-width:0}
.cityrow .picker{min-width:0;width:100%}
.cityrow .swap{margin-top:30px}
.calcnote{font-size:14px;color:var(--ink2);background:var(--accent-soft);border-radius:var(--r-sm);padding:12px 14px;margin:2px 0 16px;line-height:1.5}
.quicklabel{font-size:13px;color:var(--muted);margin-top:20px;font-weight:600}
.quick{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.quick::-webkit-scrollbar{display:none}
.quick button{flex-shrink:0;border:0;background:var(--field);border-radius:999px;min-height:36px;padding:0 14px;font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap}
.home-section{padding:56px 0;border-top:.5px solid var(--line)}
.section-intro{max-width:720px;margin:0 auto 26px;text-align:center}
.home-section-title{font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.035em;margin:10px 0 12px}
.section-intro .sub{font-size:16px}
.two-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:920px;margin:auto}
.step-explain{position:relative;background:var(--card);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);border:.5px solid var(--line)}
.step-explain.second{background:var(--accent-soft)}
.step-number{position:absolute;right:20px;top:16px;color:var(--line2);font-size:30px;font-weight:850}
.explain-icon{height:44px;width:44px;border-radius:13px;background:var(--field);display:grid;place-items:center;font-size:22px}
.step-explain h3{font-size:19px;margin:16px 0 6px}
.step-explain p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.mini-equation{display:flex;align-items:center;gap:12px;margin-top:18px;font-weight:800;font-size:17px}
.mini-equation b{color:var(--accent)}
.converter{max-width:560px;margin:auto;display:grid;gap:10px;justify-items:center}
.cvrow{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;width:100%}
.cvnum{font-size:20px!important;font-weight:750}
.converter .help{text-align:center;margin:0}
.home-cta{background:linear-gradient(135deg,var(--hero1),var(--hero2));color:#fff;border-radius:26px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:8px 0 20px}
.home-cta .eyebrow{color:var(--lime)}
.home-cta h2{font-size:28px;font-weight:800;margin:8px 0 4px}
.home-cta p{font-size:14px;color:var(--hero-muted);margin:0}
.home-cta .btn{flex-shrink:0}

/* Results */
.resultbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.resultbar .grow{flex:1}
.hero{background:radial-gradient(circle at 92% 0%,#2f7149 0,transparent 42%),linear-gradient(150deg,var(--hero1),var(--hero2));border-radius:26px;padding:clamp(22px,4vw,36px);color:var(--hero-ink);position:relative;overflow:hidden}
.herotop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hero .eyebrow{color:var(--lime)}
.heronote{border-radius:99px;padding:5px 10px;font-size:12px;color:var(--hero-muted);background:var(--hero-chip)}
.answer{font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-.035em;font-weight:800;margin:14px 0 10px;max-width:820px}
.answer em{font-style:normal;color:var(--lime)}
.answersub{font-size:15px;color:var(--hero-muted);line-height:1.6;max-width:720px;margin:0}
.fxline{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;font-size:13px;color:var(--hero-muted);background:var(--hero-chip);border-radius:var(--r-sm);padding:10px 13px}
.fxline b{color:#fff}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);min-width:0;border:.5px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not(.light-only) .cat,:root:not(.light-only) .step-explain,:root:not(.light-only) .featurelinks button{border-color:transparent}}
.cattop{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}.cattop span{font-size:20px}
.catlabel{font-size:12px;color:var(--muted);margin-top:12px}
.catvalue{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:1px 0 8px;font-variant-numeric:tabular-nums}
.catdelta{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;padding:3px 9px;background:var(--bad-bg);color:var(--bad)}
.catdelta.good{background:var(--good-bg);color:var(--good)}.catdelta.same{background:var(--neutral-bg);color:var(--muted)}
.cat .bartrack{margin:12px 0 10px}
.cat .example{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.cat .example b{color:var(--ink)}
.resultgrid2{display:grid;grid-template-columns:1.06fr .94fr;gap:14px;align-items:start}
.pc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pc-row .moneyfield{min-height:50px;border-radius:var(--r-sm)}.pc-row .moneyfield input{font-size:20px}.pc-row .moneyfield .symbol{font-size:17px}
.pc-out{margin-top:12px;background:var(--field);border-radius:var(--r-sm);padding:14px;font-size:15px;line-height:1.55}
.pc-out b{font-size:20px;letter-spacing:-.02em}
.need{font-size:16px;line-height:1.6;margin:0}.need b{font-size:19px}
.bigmac{display:flex;gap:14px;align-items:center}.bigmac .burger{font-size:38px}
#bigMacText,#tripText{font-size:15px;color:var(--ink)}
.tripfit{margin-top:12px}.tripfit p{font-size:14px;line-height:1.6;margin:8px 0 0;color:var(--ink2)}
.fitbar{height:8px;border-radius:99px;background:var(--field);overflow:hidden}.fitbar div{height:100%;background:var(--good);border-radius:99px}.fitbar div.over{background:#d98b5f}
.placeslist{display:grid;margin-top:10px}
.placerow{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 64px;gap:10px;align-items:center;border:0;border-bottom:.5px solid var(--line);background:transparent;padding:11px 4px;text-align:left;color:var(--ink);font-size:14px}
.placerow:last-child{border-bottom:0}
.placerow:hover{background:var(--field)}.placerow.sel{background:var(--accent-soft);border-radius:10px}
.placerow .n{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placerow .n small{font-weight:600;color:var(--faint);margin-left:6px;font-size:11px}
.placerow .bartrack{height:6px;display:block}.placerow .barfill{display:block}.placerow .v{text-align:right;font-weight:700;font-size:13px}
.calcdetails summary,.sources summary{cursor:pointer;font-weight:650;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.calcdetails summary::-webkit-details-marker,.sources summary::-webkit-details-marker,.oneoffs summary::-webkit-details-marker{display:none}
.calcdetails summary:after,.sources summary:after,.oneoffs summary:after{content:"";width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .2s}
details[open]>summary:after{transform:rotate(180deg)}
.math{background:var(--field);border-radius:var(--r-sm);padding:14px;margin-top:12px}
.mathrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin:6px 0}.mathrow strong{text-align:right}
.sources{background:var(--card);border-radius:var(--r-lg);padding:18px 20px;border:.5px solid var(--line)}
.sources p{color:var(--muted);font-size:13px;line-height:1.65}
.sourcelinks{display:flex;flex-wrap:wrap;gap:6px}
.sourcelinks a{font-size:12px;font-weight:650;color:var(--accent-ink);text-decoration:none;background:var(--field);border-radius:8px;padding:7px 10px}
.searchbox{position:relative;display:flex;align-items:center;margin:14px 0 10px}
.searchbox svg{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.searchbox input{width:100%;border:0;border-radius:999px;background:var(--field);min-height:46px;padding:0 44px;font-size:16px;color:var(--ink);outline:0;-webkit-appearance:none;appearance:none;transition:background .15s,box-shadow .15s}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox input::placeholder{color:var(--faint)}
.searchbox input:focus{box-shadow:0 0 0 2px var(--accent);background:var(--card)}
.clearbtn{position:absolute;right:8px;width:30px;height:30px;border:0;border-radius:99px;background:var(--pill);color:var(--ink2);font-size:18px;line-height:1;display:grid;place-items:center;padding:0}
.pricelist{display:grid}
.pricerow{display:grid;grid-template-columns:36px minmax(0,1fr) auto 56px;gap:12px;align-items:center;padding:11px 0;border-bottom:.5px solid var(--line)}
.pricerow:last-child{border-bottom:0}
.priceicon{height:36px;width:36px;background:var(--field);border-radius:11px;display:grid;place-items:center;font-size:18px}
.pricelabel{min-width:0}
.pricelabel b{font-size:15px;font-weight:650;display:block;line-height:1.3}
.pricelabel small{font-size:12px;color:var(--faint);display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.priceval{text-align:right;font-variant-numeric:tabular-nums;line-height:1.3}
.priceval b{font-size:15px;font-weight:750}
.priceval .conv{display:inline;margin-left:4px;font-size:12px;color:var(--muted)}
.priceval small{display:block;font-size:12px;color:var(--faint)}
.delta{justify-self:end;font-size:12px;font-weight:750;border-radius:99px;padding:4px 0;width:56px;text-align:center;background:var(--good-bg);color:var(--good);font-variant-numeric:tabular-nums}
.delta[data-d=higher]{background:var(--bad-bg);color:var(--bad)}.delta[data-d=same]{background:var(--neutral-bg);color:var(--muted)}
.srctag{white-space:nowrap;font-size:10px;font-weight:650;color:var(--ink2);background:var(--field);border-radius:6px;padding:1px 6px;display:inline-block!important;margin-top:3px}
.noresult{font-size:14px;color:var(--muted);margin:6px 0;line-height:1.6}
.morebtn{display:block;width:100%;margin-top:8px;border:0;background:transparent;border-top:.5px solid var(--line);border-radius:0;padding:13px 0 2px;font-size:14px;font-weight:700;color:var(--accent-ink)}
.morebtn:hover{color:var(--ink)}
.aboutprices{margin-top:10px}
.aboutprices summary{cursor:pointer;font-size:12px;font-weight:650;color:var(--muted);list-style:none}
.aboutprices summary::-webkit-details-marker{display:none}
.aboutprices summary:before{content:"ⓘ ";}
.tools{padding:18px 20px 6px}
.toolshead{margin-bottom:4px}
.tool{border-top:.5px solid var(--line)}
.tool:first-of-type{border-top:0}
.tool summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:12px 0}
.tool summary::-webkit-details-marker{display:none}
.tool summary:after{content:"";margin-left:auto;flex-shrink:0;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a968e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .2s}
.toolicon{height:36px;width:36px;background:var(--field);border-radius:11px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.tooltext b{display:block;font-size:15px;font-weight:650;line-height:1.3}.tooltext small{display:block;font-size:12px;color:var(--muted)}
.toolbody{padding:0 0 16px}.toolbody .pc-row{margin-top:2px}

/* Trip planner */
.plangrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;align-items:start}
.planform{position:sticky;top:84px}
.oneoffs summary{cursor:pointer;font-weight:650;font-size:15px;padding:4px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.oneoffs[open] summary{margin-bottom:14px}
.planhero{margin:0}
.plantotal{font-size:clamp(40px,6vw,56px);font-weight:850;letter-spacing:-.04em;color:var(--lime);margin:6px 0 2px;line-height:1.05;font-variant-numeric:tabular-nums}
.plandaily{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.plandaily div{background:var(--hero-chip);border-radius:14px;padding:11px 12px}
.plandaily small{display:block;font-size:11px;color:var(--hero-muted);font-weight:650}
.plandaily b{display:block;font-size:19px;margin-top:2px;font-variant-numeric:tabular-nums}
.plandaily span{font-size:12px;color:var(--hero-muted)}
.verdict{margin-top:12px;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.55;background:var(--hero-chip);color:#e2ece4}
.verdict.ok{background:#c8f0782b;color:#ecf9d8}.verdict.over{background:#f0a07a33;color:#ffe6da}
.planbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--field);margin-bottom:6px;gap:2px}
.planbar span{display:block;height:100%}
.planrow{display:grid;grid-template-columns:10px 1fr 148px;gap:12px;align-items:center;padding:12px 0;border-bottom:.5px solid var(--line)}
.planrow:last-child{border-bottom:0}
.planrow .dot{width:10px;height:10px;border-radius:50%}
.planrow .pl b{display:block;font-size:15px;font-weight:650}.planrow .pl small{color:var(--faint);font-size:12px}
.planrow .pv small{display:block;text-align:right;color:var(--faint);font-size:12px;margin-top:3px}
.planmini{display:none}

/* Saved */
.savedrow{display:flex;align-items:center;gap:10px;border-bottom:.5px solid var(--line);padding:12px 0}
.savedrow:last-child{border-bottom:0}
.savedrow .open{flex:1;border:0;background:none;text-align:left;padding:0;color:var(--ink);min-width:0}
.savedrow .open b{display:block;font-size:15px;font-weight:650}.savedrow .open small{color:var(--muted);font-size:13px}
.del{border:0;background:var(--field);border-radius:10px;width:36px;height:36px;color:var(--muted);font-size:15px;flex-shrink:0}
.installcard{display:flex;gap:14px;align-items:center}
.installcard .mark{width:52px;height:52px;border-radius:13px}
#installBtn{margin-top:10px}

/* Sheets and dialogs */
.modal{position:fixed;inset:0;z-index:60;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.modalbox{background:var(--sheet);border-radius:24px 24px 0 0;width:100%;max-width:520px;max-height:calc(100dvh - 40px);overflow:auto;padding:8px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px #0003;animation:rise .28s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translateY(40px);opacity:.6}}
@media (min-width:700px){.modal{align-items:center;padding:16px}.modalbox{border-radius:24px;padding:8px 24px 24px}}
.grabber{width:38px;height:5px;border-radius:99px;background:var(--line2);margin:0 auto 10px}
.modalhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px}
.modalhead h2{font-size:22px;font-weight:800;margin:0 0 4px}
.close{border:0;background:var(--field);border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;flex-shrink:0;color:var(--muted)}
.sheet .modalbox{padding:8px 0 0;display:flex;flex-direction:column;height:min(680px,calc(100dvh - 40px))}
.sheethead{padding:0 16px 10px}
.sheethead .modalhead{margin-bottom:10px;padding:0 4px}
.sheetlist{overflow:auto;flex:1;padding:0 8px calc(14px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.sheetlist h3{font-size:13px;font-weight:650;color:var(--muted);margin:16px 12px 6px;letter-spacing:0}
.crow{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:11px 12px;border-radius:12px;text-align:left;color:var(--ink);font-size:16px}
.crow:hover,.crow:focus-visible{background:var(--field)}
.crow .f{font-size:24px;width:30px;text-align:center}.crow .n{flex:1;min-width:0}.crow .n small{display:block;color:var(--faint);font-size:12px}.crow .c{font-size:13px;font-weight:700;color:var(--muted)}
.crow.sel{background:var(--accent-soft)}
.crow .pc{font-size:12px;font-weight:800;color:var(--muted);background:var(--field);padding:3px 8px;border-radius:999px;flex:none;font-variant-numeric:tabular-nums;min-width:34px;text-align:center}
#pickSort{margin-top:8px;flex:none}
.thanks{text-align:center;padding:24px 4px 8px}
.thanks h2{margin:0 0 6px;font-size:24px}
.thanks .btn{margin-top:16px}
.okmark{display:grid;place-items:center;margin:0 auto 12px;height:56px;width:56px;border-radius:50%;background:var(--lime);color:var(--on-lime);font-size:28px;font-weight:800}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,16px);opacity:0;transition:all .22s;z-index:99;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;box-shadow:0 10px 30px #0003;font-size:14px;font-weight:600;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}

/* Tab bar (phones) */
.tabbar{display:none}
@media (max-width:760px){
 .header{height:calc(54px + env(safe-area-inset-top))}
 .header .tag,.header .navlink{display:none}
 .brand{font-size:18px}.mark{width:32px;height:32px;border-radius:9px}
 #feedbackNav{min-height:34px;font-size:14px;padding:0 13px;background:var(--field)}
 .tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bar);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-top:.5px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .tabbar button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--faint);padding:4px 0;letter-spacing:.01em}
 .tabbar svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .tabbar button.active{color:var(--accent)}
 .tabbar button.active svg{stroke-width:2.2}
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
 .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
 .page{padding:14px 16px 32px}
 .pagetitle{font-size:30px}
 .home-hero{grid-template-columns:1fr;gap:18px;padding:4px 0 24px}
 .hero-copy{padding:6px 2px 0}
 .home-hero .featurelinks,.home-hero .hero-proof,.home-hero .hero-copy .eyebrow,.home-hero .home-lede{display:none}
 .home-title{font-size:34px;letter-spacing:-.04em;margin:0}
 .calc{border-radius:24px;box-shadow:var(--shadow)}
 .calc h2{font-size:19px}
 .cityrow{grid-template-columns:1fr;gap:6px}
 .cityrow .swap{justify-self:center;margin:2px 0;transform:rotate(90deg)}
 .cityrow .swap:active{transform:rotate(270deg)}
 .home-section{padding:36px 0}
 .two-step-grid{grid-template-columns:1fr}
 .home-cta{flex-direction:column;align-items:stretch;padding:24px 20px}
 .home-cta .btn{width:100%}
 .cats{grid-template-columns:1fr 1fr;gap:10px}
 .cat{padding:14px}.catvalue{font-size:22px}.cat .example{display:none}.cattop{font-size:13px}.cattop span{font-size:17px}
 .catdelta{font-size:11px}
 .resultgrid2,.plangrid{grid-template-columns:1fr}
 .planform{position:static}
 .pc-row{grid-template-columns:1fr}
 .plandaily{grid-template-columns:1fr 1fr}.plandaily div:last-child{grid-column:span 2}
 .planrow{grid-template-columns:10px 1fr 124px;gap:10px}
 .pricerow{grid-template-columns:32px minmax(0,1fr) auto 50px;gap:10px}
 .priceicon,.toolicon{width:32px;height:32px;font-size:16px;border-radius:10px}.pricelabel b,.priceval b{font-size:14px}.delta{width:50px;font-size:11px}
 .cvrow{grid-template-columns:1fr 1fr}
 .featurelinks{grid-template-columns:1fr}
 .resultbar .iconbtn{min-height:34px;padding:0 13px}
 .hero{border-radius:24px}
 .answer{font-size:27px}
 .planmini:not(.hidden){display:flex;align-items:center;gap:10px;position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:39;background:var(--forest);color:#fff;border:0;border-radius:16px;padding:12px 16px;box-shadow:0 10px 30px #0b1a1340;text-align:left}
 .planmini span{font-size:13px;color:var(--hero-muted);font-weight:600}.planmini b{font-size:18px;color:var(--lime)}.planmini small{margin-left:auto;font-size:13px;color:#d7e4d9}
}
@media (max-width:380px){.cats{grid-template-columns:1fr}.cat .example{display:block}}

/* Laptop showcase: the app in a phone frame */
#showcase{display:none}
html.showcase body{padding:0;background:radial-gradient(circle at 85% 10%,var(--accent-soft) 0,transparent 42%),var(--bg)}
html.showcase body>*:not(#showcase):not(script){display:none!important}
html.showcase #showcase{display:grid;grid-template-columns:minmax(0,500px) auto;gap:clamp(40px,7vw,110px);align-items:center;justify-content:center;min-height:100vh;padding:28px 40px}
.sc-copy h1{font-size:clamp(44px,5vw,66px);letter-spacing:-.045em;line-height:1;font-weight:850;margin:28px 0 18px}
.sc-lede{font-size:18px;line-height:1.65;color:var(--muted);margin:0}
.sc-points{list-style:none;padding:0;margin:22px 0;display:grid;gap:8px}
.sc-points li{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.45;box-shadow:var(--shadow)}
.sc-points li>span{font-size:20px;width:26px;text-align:center;flex-shrink:0}
.sc-qr{display:flex;gap:16px;align-items:center;background:var(--card);border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.sc-qr img{border-radius:10px;flex-shrink:0}
.sc-qr b{font-size:17px}.sc-qr p{font-size:13px;color:var(--muted);line-height:1.6;margin:5px 0 0}
.sc-foot{font-size:13px;color:var(--faint);margin-top:16px}.sc-foot a{color:var(--accent-ink);font-weight:650}
.sc-phone{position:relative;width:390px;height:min(844px,calc(100vh - 56px));border-radius:58px;background:#0c1410;padding:12px;box-shadow:0 30px 80px #10281e45,inset 0 0 0 2px #33443a}
.sc-phone iframe{width:100%;height:100%;border:0;border-radius:46px;background:var(--bg);display:block}
.sc-island{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:108px;height:30px;border-radius:20px;background:#0c1410;z-index:2}
html.embedded .header{padding-top:40px;height:96px}
html.embedded .tabbar{padding-bottom:18px}
html.embedded body{padding-bottom:90px}
html.embedded .planmini:not(.hidden){bottom:90px}
html.embedded .modalbox{padding-bottom:28px}
html:not(.site) .phoneview{display:none!important}

/* About page: designed for light only, so it pins the light tokens (see show() in app.js) */
.story-page{color:var(--ink)}

/* About page (kept from the original design) */
.history{display:grid;gap:9px;margin-top:13px}
.historyitem{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f7f9f5;border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.historyitem b{font-size:11px;display:block}
.historyitem small{color:#849086;font-size:10px}
.hero-secondary,.story-secondary{background:transparent;border:1px solid #d7e1d4;color:var(--ink)}
.home-caveat{text-align:center;font-size:10px;color:#879287;line-height:1.6;margin:17px auto 0;max-width:760px}
.home-mini-sources a,.text-link{color:#466f3e;font-weight:850;text-decoration:none}
.home-mini-sources a:hover,.text-link:hover{text-decoration:underline}
.story-page{max-width:1120px;padding-top:26px}
.story-hero{background:radial-gradient(circle at 90% 8%,#2d6745 0,transparent 31%),linear-gradient(135deg,#153b2a,#10291f);color:white;border-radius:29px;padding:clamp(28px,5vw,54px);position:relative;overflow:hidden}
.story-hero:after{content:"↗";position:absolute;right:15px;bottom:-100px;font-size:290px;color:#ffffff08;font-weight:950;line-height:1}
.story-hero>*{position:relative;z-index:1}
.story-hero .eyebrow{color:#c5dda9}
.story-title{font-size:clamp(36px,5.6vw,62px);line-height:1.02;letter-spacing:-3.4px;margin:18px 0 16px;max-width:860px}
.story-title span{color:var(--lime)}
.story-lede{max-width:670px;color:#c5d6ca;line-height:1.8;font-size:14px}
.story-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.story-secondary{color:white;border-color:#ffffff42}
.story-hero .story-secondary{background:#ffffff0a}
.story-section{padding:52px 14px;border-bottom:1px solid var(--line)}
.story-section.tinted{background:#eef3e9;margin-left:-22px;margin-right:-22px;padding-left:36px;padding-right:36px;border-bottom:0;border-radius:22px}
.story-index{font-size:10px;letter-spacing:1.6px;font-weight:950;color:#6e8c51;margin-bottom:20px}
.story-heading-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.story-heading-grid h2,.impact-panel h2{font-size:clamp(26px,3.4vw,39px);letter-spacing:-1.8px;line-height:1.08;margin:0;max-width:490px}
.story-heading-grid p{font-size:13px;color:#68766b;line-height:1.8;margin:0 0 13px}
.source-note{border-left:3px solid #a8c58b;padding-left:13px}
.text-link{font-size:11px;display:inline-block;margin-top:3px}
.evidence-cards{display:grid;grid-template-columns:1fr 50px 1fr;gap:12px;align-items:center;max-width:800px;margin:30px auto 12px}
.evidence-cards article{background:white;border:1px solid var(--line);border-radius:19px;padding:21px;text-align:center;box-shadow:var(--shadow)}
.evidence-cards article small{display:block;font-size:9px;letter-spacing:1px;color:#7d8b7d;font-weight:900}
.evidence-cards article strong{display:block;font-size:36px;letter-spacing:-1.5px;margin:8px 0 3px}
.evidence-cards article p{font-size:11px;color:var(--muted);margin:0}
.evidence-vs{border:none!important;box-shadow:none!important;background:transparent!important;padding:0!important;font-weight:900;color:#809774}
.caveat-card{font-size:10px;line-height:1.7;color:#778478;max-width:800px;margin:10px auto 0}
.needs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:27px}
.needs-grid article{background:white;border:1px solid #dce5d7;border-radius:19px;padding:22px}
.need-number{font-size:9px;letter-spacing:1.3px;font-weight:950;color:#72964f}
.needs-grid h3{font-size:17px;letter-spacing:-.5px;line-height:1.25;margin:12px 0 8px}
.needs-grid p{font-size:12px;color:#6c796e;line-height:1.7;margin:0 0 13px}
.needs-grid small{font-size:10px;color:#879387;line-height:1.6;display:block;border-top:1px solid #edf1e9;padding-top:11px}
.mapping-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:17px;margin-top:25px;background:white}
.mapping{width:100%;border-collapse:collapse;font-size:12px;line-height:1.65}
.mapping th{text-align:left;background:#f1f5ed;color:#5d6d5f;font-size:10px;text-transform:uppercase;letter-spacing:.7px;padding:14px}
.mapping td{padding:15px 14px;border-top:1px solid #edf1e9;vertical-align:top;min-width:150px}
.mapping td:first-child{min-width:155px}
.mapping td b{color:#284532}
.proposition-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:25px}
.proposition-steps article{background:white;border:1px solid var(--line);border-radius:18px;padding:21px}
.proposition-steps article>span{font-size:27px;font-weight:950;letter-spacing:-1px;color:#9fbd80}
.proposition-steps h3{font-size:15px;margin:11px 0 7px}
.proposition-steps p{font-size:11px;color:#748178;line-height:1.7;margin:0}
.impact-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;background:white;border:1px solid var(--line);border-radius:22px;padding:27px}
.impact-panel>div:first-child p{font-size:12px;color:#718076;line-height:1.8}
.impact-list{display:grid;gap:12px}
.impact-list>div{display:flex;gap:10px;align-items:flex-start}
.impact-list span{height:24px;width:24px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:#eaf3df;color:#527c3a;font-weight:900}
.impact-list p{font-size:12px;line-height:1.7;margin:2px 0 0;color:#4f5f53}
.next-evidence{font-size:12px;line-height:1.8;color:#6d7a6f;max-width:850px;margin:21px 0 0}
.story-end{margin:34px 0 0;background:var(--forest);color:white;border-radius:24px;padding:31px;text-align:center}
.story-end .eyebrow{color:#c5dda9}
.story-end h2{font-size:clamp(27px,4vw,38px);letter-spacing:-1.5px;margin:11px 0 7px}
.story-end p{color:#c7d7cb;font-size:12px;line-height:1.7;max-width:640px;margin:0 auto 19px}
.story-end .btn{margin:5px}
.story-footer{text-align:center;font-size:10px;color:#8a958b;line-height:1.7;margin:20px auto 0;max-width:750px}
@media(max-width:900px){.story-heading-grid{gap:22px}.impact-panel{grid-template-columns:1fr}}
@media(max-width:620px){.two-step-grid,.audience-grid,.needs-grid,.proposition-steps{grid-template-columns:1fr}.story-page{padding:20px 12px 42px}.story-hero{padding:27px 20px;border-radius:23px}.story-title{font-size:39px;letter-spacing:-2.2px}.story-section{padding:39px 2px}.story-section.tinted{margin-left:-12px;margin-right:-12px;padding:35px 16px}.story-heading-grid{grid-template-columns:1fr;gap:14px}.story-heading-grid h2,.impact-panel h2{font-size:30px;letter-spacing:-1.2px}.evidence-cards{grid-template-columns:1fr 28px 1fr;gap:5px;margin-top:22px}.evidence-cards article{padding:16px 9px}.evidence-cards article strong{font-size:30px}.evidence-cards article small{font-size:7px}.evidence-cards article p{font-size:9px}.mapping{min-width:700px}.impact-panel{padding:21px 18px;gap:15px}.story-end{padding:27px 17px}.story-hero-actions{flex-direction:column;align-items:stretch}.story-hero-actions .btn{width:100%}}
@media (max-width:380px){.segmented button{font-size:12.5px;padding:0 2px}}

@media (prefers-color-scheme:dark){:root:not(.light-only) .sc-phone{box-shadow:0 30px 80px #00000080,0 0 0 1px #2c3a32,inset 0 0 0 2px #3a4b41}}
@media (min-width:761px){.cityrow .picker{gap:10px;padding:8px 12px}.cityrow .picker .pcur{display:none}.cityrow .picker .pname{font-size:16px}}
@media (max-width:360px){.picker .pcur{display:none}}
.navlink{white-space:nowrap}
@media (min-width:761px) and (max-width:1023px){.header .tag,.header .phoneview{display:none}.header .right{gap:2px}}

/* Optional trip length chips */
.opt{font-weight:600;color:var(--faint);font-size:12px;margin-left:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex-shrink:0;border:0;background:var(--field);border-radius:999px;min-height:38px;padding:0 14px;font-size:14px;font-weight:650;color:var(--ink2);white-space:nowrap;transition:background .15s}
.chips button.active{background:var(--ink);color:var(--bg)}
.chips+.durrow{margin-top:10px}
.lasts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.lasts div{background:var(--field);border-radius:14px;padding:10px 12px}
.lasts small{display:block;font-size:11px;font-weight:650;color:var(--muted)}
.lasts b{display:block;font-size:17px;margin-top:2px}
.lasts span{font-size:11px;color:var(--faint)}
/* Phones: the body scrolls instead of the page, so Safari's toolbar never resizes and the fixed tab bar can't drift up and leave a gap */
@media (max-width:760px){html:not(.showcase){height:100%;overflow:hidden}html:not(.showcase) body{height:100%;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}}
/* Phones: one column, with the trip card first since it matters most to travellers */
@media (max-width:760px){.resultgrid2{display:flex;flex-direction:column;gap:14px;min-width:0}.resultgrid2 .card{max-width:100%;min-width:0}.resultgrid2>.column{display:contents}.resultgrid2 .tripcard{order:-2}.resultgrid2 #cityCard{order:-1}}
.lasts span{white-space:nowrap}
/* Bucky, the mascot */
.empty.buddy{display:flex;align-items:center;gap:12px}
.empty.buddy img{width:64px;height:64px;flex:none;border-radius:22%}
.story-buddy{display:block;width:112px;height:112px;margin:0 0 8px;border-radius:22%}
.bucky{display:flex;align-items:center;gap:10px;margin-top:14px}
.bucky img{width:56px;height:56px;flex:none;border-radius:22%}
.bucky .bubble{position:relative;margin:0;background:var(--lime);color:var(--on-lime);font-size:14px;font-weight:600;line-height:1.4;padding:9px 13px;border-radius:14px}
.bucky .bubble::before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:12px;background:var(--lime);transform:translateY(-50%) rotate(45deg);border-radius:2px}
/* Review form */
.rv{max-width:720px}
.rvsec{margin-top:16px}
.rvstep{font-size:12px;font-weight:700;color:var(--faint);margin-bottom:2px}
.rvsec .cardtitle{font-size:20px;margin-bottom:16px}
.rvq{padding-bottom:4px}
.rvq .label{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.rvhint{margin:-3px 0 9px}
.rvq textarea.input{min-height:92px;font-size:16px}
.rvq .input{font-size:16px}
.rv .chips button{white-space:normal;text-align:left;line-height:1.3;padding:8px 14px}
.rvscale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rvscale button{border:0;background:var(--field);border-radius:12px;min-height:46px;font-weight:750;font-size:17px;color:var(--ink2)}
.rvscale button.active{background:var(--ink);color:var(--bg)}
.rvends{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);margin-top:6px}
.rvmiss{box-shadow:0 0 0 2px var(--bad);border-radius:var(--r-sm);padding:10px;margin-left:-10px;margin-right:-10px}
.rvprogress{height:6px;background:var(--field);border-radius:999px;overflow:hidden;margin-top:16px}
.rvprogress span{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
#rvSend{margin-top:18px}
#rvThanks{margin-top:16px}
.rvmoney{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-bottom:8px}
.fbnote{text-align:center;margin:8px 0 14px}
.fbquick{display:block;width:100%;border:0;background:none;color:var(--faint);font-size:14px;font-weight:600;padding:10px;text-decoration:underline;text-underline-offset:2px}
.fbquickbody{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.morerow{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;padding:12px 0;font-size:16px;font-weight:600;color:var(--ink);text-align:left}
.morerow+.morerow{border-top:1px solid var(--line)}
.morerow span:last-child{color:var(--faint);font-size:20px}
/* About page in dark mode */
@media (prefers-color-scheme:dark){
 :root:not(.light-only) .historyitem,:root:not(.light-only) .evidence-cards article,:root:not(.light-only) .needs-grid article,:root:not(.light-only) .mapping-wrap,:root:not(.light-only) .proposition-steps article,:root:not(.light-only) .impact-panel{background:var(--card);border-color:var(--line)}
 :root:not(.light-only) .story-section.tinted,:root:not(.light-only) .mapping th{background:var(--bg2)}
 :root:not(.light-only) .mapping th,:root:not(.light-only) .mapping td b{color:var(--ink2)}
 :root:not(.light-only) .mapping td,:root:not(.light-only) .needs-grid small{border-color:var(--line)}
 :root:not(.light-only) .story-heading-grid p,:root:not(.light-only) .needs-grid p,:root:not(.light-only) .proposition-steps p,:root:not(.light-only) .impact-panel>div:first-child p,:root:not(.light-only) .impact-list p,:root:not(.light-only) .next-evidence{color:var(--muted)}
 :root:not(.light-only) .historyitem small,:root:not(.light-only) .evidence-cards article small,:root:not(.light-only) .caveat-card,:root:not(.light-only) .story-footer,:root:not(.light-only) .home-caveat{color:var(--faint)}
 :root:not(.light-only) .impact-list span{background:var(--accent-soft);color:var(--accent-ink)}
 :root:not(.light-only) .story-index,:root:not(.light-only) .need-number,:root:not(.light-only) .home-mini-sources a,:root:not(.light-only) .text-link{color:var(--accent-ink)}
 :root:not(.light-only) .hero-secondary{border-color:var(--line2)}
}

/* Dark mode chosen in Settings (same rules as the prefers-color-scheme blocks above) */
:root.dark-only{
  --bg:#0b110e;--bg2:#111916;--card:#151d19;--field:#1d2722;--pill:#1f2a24;--field-hover:#24302a;--ink:#ecf2ed;--ink2:#c9d4cc;--muted:#93a198;--faint:#6d7a72;
  --line:#232e28;--line2:#2e3a33;--accent:#b6e26b;--accent-soft:#22331d;--accent-ink:#bfe67d;
  --good:#a6dc6e;--good-bg:#1f3219;--bad:#f0997a;--bad-bg:#3a201a;--neutral-bg:#212a25;
  --hero1:#173826;--hero2:#0e1f17;--hero-chip:#ffffff10;--hero-line:#ffffff1c;
  --shadow:none;--shadow-lg:0 20px 50px #0008;
  --bar:#0b110ed9;--sheet:#161f1a;--scrim:#000a;
  color-scheme:dark;
 }
:root.dark-only .iconbtn.on{background:#3a3112;color:#f3dc8a}
:root.dark-only .card{border-color:transparent}
:root.dark-only .segmented button.active{background:#34423a}
:root.dark-only .stepper button{background:#2c3832}
:root.dark-only .home-title span,:root.dark-only .sc-copy h1 span{color:var(--lime)}
:root.dark-only .calc{border-color:transparent}
:root.dark-only .cat,:root.dark-only .step-explain,:root.dark-only .featurelinks button{border-color:transparent}
:root.dark-only .sc-phone{box-shadow:0 30px 80px #00000080,0 0 0 1px #2c3a32,inset 0 0 0 2px #3a4b41}
:root.dark-only .historyitem,:root.dark-only .evidence-cards article,:root.dark-only .needs-grid article,:root.dark-only .mapping-wrap,:root.dark-only .proposition-steps article,:root.dark-only .impact-panel{background:var(--card);border-color:var(--line)}
 :root.dark-only .story-section.tinted,:root.dark-only .mapping th{background:var(--bg2)}
 :root.dark-only .mapping th,:root.dark-only .mapping td b{color:var(--ink2)}
 :root.dark-only .mapping td,:root.dark-only .needs-grid small{border-color:var(--line)}
 :root.dark-only .story-heading-grid p,:root.dark-only .needs-grid p,:root.dark-only .proposition-steps p,:root.dark-only .impact-panel>div:first-child p,:root.dark-only .impact-list p,:root.dark-only .next-evidence{color:var(--muted)}
 :root.dark-only .historyitem small,:root.dark-only .evidence-cards article small,:root.dark-only .caveat-card,:root.dark-only .story-footer,:root.dark-only .home-caveat{color:var(--faint)}
 :root.dark-only .impact-list span{background:var(--accent-soft);color:var(--accent-ink)}
 :root.dark-only .story-index,:root.dark-only .need-number,:root.dark-only .home-mini-sources a,:root.dark-only .text-link{color:var(--accent-ink)}
 :root.dark-only .hero-secondary{border-color:var(--line2)}

/* Menu */
.header .left{display:flex;align-items:center;gap:6px;min-width:0}
.menubtn{border:0;background:transparent;color:var(--ink);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-left:-8px;flex:none}
.menubtn:hover{background:var(--field)}
.menubtn svg,.drawer svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer{position:fixed;inset:0;z-index:70;background:var(--scrim);animation:fade .2s ease}
.drawerbox{position:absolute;top:0;bottom:0;left:0;width:min(320px,86vw);background:var(--sheet);overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));box-shadow:10px 0 40px #0003;animation:slidein .25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
@keyframes slidein{from{transform:translateX(-100%)}}
.drawerhead{display:flex;align-items:center;gap:12px;padding:4px 8px 14px}
.drawerhead>div{flex:1;min-width:0}.drawerhead b{display:block;font-size:18px;letter-spacing:-.02em}.drawerhead small{color:var(--muted);font-size:13px}
.drawergroup{border-top:1px solid var(--line);padding:8px 0}
.drawergroup button,.drawergroup a{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;color:var(--ink);font-size:16px;font-weight:600;padding:11px 10px;border-radius:12px;text-align:left;text-decoration:none}
.drawergroup button:hover,.drawergroup a:hover{background:var(--field)}
.drawergroup button.active{background:var(--accent-soft);color:var(--accent-ink)}
.drawergroup svg{color:var(--muted)}.drawergroup .active svg{color:inherit}
.drawerfoot{margin:auto 10px 0;padding-top:16px;font-size:12px;color:var(--faint)}
html.embedded .drawerbox{padding-top:44px}
/* Settings */
.settings{max-width:720px}
.settings .card{margin-top:16px}
.settings .cardtitle{margin-bottom:12px}
.setbtn{margin-top:14px}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
a.morerow{text-decoration:none}
/* Account */
.acctrow{display:flex;align-items:center;gap:12px;width:100%;border:0;background:var(--field);color:var(--ink);border-radius:14px;padding:12px;margin:0 0 10px;text-align:left}
.acctrow svg{width:28px;height:28px;color:var(--accent-ink);flex:none}
.acctrow span{min-width:0}.acctrow b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acctrow small{color:var(--muted);font-size:12px}
.codeinput{font-size:24px!important;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.help.center{text-align:center}
#siError{margin-top:12px}