/* ============ TOKENS ============ */
  :root{
    --paper:#FBF6EA;--surface:#FFFFFF;--surface-2:#FFF9EE;
    --ink:#17271B;--ink-soft:#5A6B5E;
    --clover:#2E8A4B;--clover-deep:#1C5A31;
    --carrot:#FF7A2F;--carrot-deep:#E85F14;
    --sky:#CFE8F0;--sky-ink:#2C6B7E;--sun:#FFC53D;--line:#EADFC8;
    --shadow:18px 18px 0 rgba(28,90,49,.10);
    --font-display:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",system-ui,sans-serif;
    --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --r-lg:26px;--r-md:16px;--r-sm:10px;
  }
  @media (prefers-color-scheme:dark){
    :root{--paper:#0F1912;--surface:#16221A;--surface-2:#1B2A20;
      --ink:#EEF4E9;--ink-soft:#A2B4A6;--clover:#54BE78;--clover-deep:#8CDDA6;
      --carrot:#FF9048;--carrot-deep:#FFB27E;--sky:#1E3944;--sky-ink:#9AD3E4;
      --sun:#F5C24A;--line:#28382D;--shadow:18px 18px 0 rgba(0,0,0,.35);}
  }
  :root[data-theme="light"]{--paper:#FBF6EA;--surface:#FFFFFF;--surface-2:#FFF9EE;
    --ink:#17271B;--ink-soft:#5A6B5E;--clover:#2E8A4B;--clover-deep:#1C5A31;
    --carrot:#FF7A2F;--carrot-deep:#E85F14;--sky:#CFE8F0;--sky-ink:#2C6B7E;
    --sun:#FFC53D;--line:#EADFC8;--shadow:18px 18px 0 rgba(28,90,49,.10);}
  :root[data-theme="dark"]{--paper:#0F1912;--surface:#16221A;--surface-2:#1B2A20;
    --ink:#EEF4E9;--ink-soft:#A2B4A6;--clover:#54BE78;--clover-deep:#8CDDA6;
    --carrot:#FF9048;--carrot-deep:#FFB27E;--sky:#1E3944;--sky-ink:#9AD3E4;
    --sun:#F5C24A;--line:#28382D;--shadow:18px 18px 0 rgba(0,0,0,.35);}

  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
    line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;line-height:1.02;
    letter-spacing:-.02em;text-wrap:balance;margin:0}
  p{margin:0}a{color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--clover);font-weight:600}
  .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  ul{margin:0;padding:0}

  /* NAV */
  .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);
    backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
  .nav .wrap{display:flex;align-items:center;gap:18px;height:68px}
  .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
    font-weight:800;font-size:20px;letter-spacing:-.02em;cursor:pointer;background:none;border:0;color:inherit}
  .brand .logo{width:46px;height:36px;flex:none}
  .bw-b{color:var(--carrot)}
  .nav-spacer{flex:1}
  .theme-btn{width:40px;height:40px;border-radius:999px;border:2px solid var(--line);
    background:var(--surface);cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center;color:inherit}

  .btn{font-family:var(--font-display);font-weight:800;font-size:15px;border:0;cursor:pointer;
    border-radius:999px;padding:13px 22px;display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;transition:transform .12s ease}
  .btn-carrot{background:var(--carrot);color:#fff}
  .btn-carrot:hover{transform:translateY(-2px)}

  /* HERO */
  /* overflow-x:clip (not hidden) — a vertical clip cuts off the autocomplete
     dropdown, and overflow-x:hidden would force overflow-y into a scroll box */
  .hero{position:relative;padding:56px 0 24px;overflow-x:clip}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  /* Grid items default to a min-content floor, which held the hero column 17px wider
     than the 320px viewport and pushed the headline, lede and search box out. */
  .hero-grid>*{min-width:0}
  .hero h1{font-size:clamp(44px,7vw,86px)}
  .hero h1 .stop{color:var(--carrot);white-space:nowrap}
  .hero .lede{font-size:clamp(17px,2.2vw,20px);color:var(--ink-soft);max-width:44ch;margin-top:20px}
  .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
  .chip{font-family:var(--font-mono);font-size:12.5px;font-weight:600;background:var(--surface);
    border:2px solid var(--line);border-radius:999px;padding:6px 13px;display:inline-flex;gap:7px;align-items:center}
  .chip b{color:var(--clover)}

  .search{margin-top:30px;position:relative;max-width:460px}
  .search-box{display:flex;align-items:center;gap:10px;background:var(--surface);
    border:3px solid var(--ink);border-radius:999px;padding:8px 8px 8px 20px;box-shadow:var(--shadow)}
  .search input{flex:1;border:0;background:none;font-size:17px;font-family:var(--font-body);
    color:var(--ink);outline:none;min-width:0}
  .search input::placeholder{color:var(--ink-soft)}
  .results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);
    border:2px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:6px;z-index:30;display:none}
  .results.open{display:block}
  .results li{list-style:none}
  .results button{width:100%;text-align:left;display:flex;align-items:center;gap:12px;
    padding:11px 12px;border:0;background:none;border-radius:var(--r-sm);cursor:pointer;color:inherit}
  .results button:hover,.results button:focus{background:var(--surface-2);outline:none}
  .results .rc{font-family:var(--font-mono);font-weight:700;color:var(--clover);font-size:13px;width:38px}
  .results .rn{font-family:var(--font-display);font-weight:700;font-size:15px}
  .results .rv{margin-left:auto;font-size:12px;color:var(--ink-soft)}

  .hero-art{position:relative;min-height:340px}
  .arc-svg{width:100%;height:auto;display:block;overflow:visible}
  .hop-path{fill:none;stroke:var(--carrot);stroke-width:4;stroke-linecap:round;stroke-dasharray:10 12}
  .draw{stroke-dasharray:640;stroke-dashoffset:640;animation:draw 1.5s .3s ease forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .pin circle{fill:var(--surface);stroke:var(--ink);stroke-width:3}
  .pin text{font-family:var(--font-mono);font-weight:700;font-size:13px;fill:var(--ink)}
  .rabbit{transform-box:fill-box;transform-origin:center bottom;animation:hop 2.8s ease-in-out infinite}
  @keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px)}}

  section{padding:64px 0}
  .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
  .head-row h2{font-size:clamp(28px,4vw,40px)}
  .head-row p{color:var(--ink-soft);max-width:40ch}

  .origins{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
  .ocard{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);
    padding:20px;cursor:pointer;text-align:left;color:inherit;transition:transform .12s,border-color .12s;
    display:flex;flex-direction:column;gap:4px}
  .ocard:hover{transform:translateY(-4px);border-color:var(--clover)}
  .ocard .oc{font-family:var(--font-mono);font-weight:700;color:var(--clover);font-size:13px}
  .ocard .on{font-family:var(--font-display);font-weight:800;font-size:21px}
  .ocard .ov{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .ocard .arc-mini{margin-top:10px}

  .steps{background:var(--clover-deep);color:#EAFBF0;border-radius:var(--r-lg);padding:44px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  :root[data-theme="dark"] .steps{background:var(--surface-2);color:var(--ink);border:2px solid var(--line)}
  @media (prefers-color-scheme:dark){.steps{background:var(--surface-2);color:var(--ink);border:2px solid var(--line)}}
  :root[data-theme="light"] .steps{background:var(--clover-deep);color:#EAFBF0;border:0}
  .step .sn{font-family:var(--font-mono);font-size:12px;letter-spacing:.15em;opacity:.7}
  .step h3{font-size:22px;margin:8px 0;color:var(--sun)}
  .step p{opacity:.85;font-size:15px}

  /* LANDING */
  .crumbs{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);padding-top:26px;
    display:flex;gap:8px;align-items:center}
  .crumbs a{color:var(--clover);text-decoration:none;cursor:pointer}
  .lp-hero{padding:18px 0 8px}
  .lp-hero h1{font-size:clamp(34px,5.4vw,60px)}
  .lp-hero h1 em{font-style:normal;color:var(--clover)}
  .lp-sub{font-size:19px;color:var(--ink-soft);margin-top:14px}
  .lp-sub b{color:var(--carrot)}
  .lp-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .stat{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);padding:14px 20px}
  .stat .n{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1}
  .stat .l{font-size:12px;color:var(--ink-soft);margin-top:5px;text-transform:uppercase;letter-spacing:.06em}

  /* MAP */
  .mapcard{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);
    padding:22px;margin-top:26px}
  .mhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
  .mhead h3{font-family:var(--font-display);font-size:20px}
  .mhead .mnote{font-size:12.5px;color:var(--ink-soft)}
  .mapwrap{position:relative}
  #map{width:100%;height:auto;display:block;touch-action:pan-y}
  #map:focus-visible{outline:3px solid var(--carrot);outline-offset:3px}
  /* Only claim the drag gesture once there is something to pan; at the fitted view a
     touch drag must still scroll the page. */
  #map.is-zoomed{cursor:grab;touch-action:none}
  #map.is-zoomed:active{cursor:grabbing}
  .mapzoom{position:absolute;top:8px;right:8px;display:flex;gap:6px;align-items:center}
  .mz{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1;
    border:2px solid var(--line);background:var(--surface);color:var(--ink);
    border-radius:999px;width:32px;height:32px;cursor:pointer;padding:0}
  .mz:hover:not(:disabled){border-color:var(--carrot);color:var(--carrot)}
  .mz:disabled{opacity:.4;cursor:default}
  .mz-reset{width:auto;padding:0 12px;font-size:12px}
  .mapzoom-hint{font-size:11.5px;color:var(--ink-soft);margin-top:8px;text-align:right}
  @media (max-width:640px){.mapzoom-hint{display:none}}
  .map-graticule{stroke:var(--line);stroke-width:1;stroke-dasharray:3 6;fill:none}
  .map-arc{fill:none;stroke:var(--carrot);stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round;opacity:.7}
  .map-dot{fill:var(--clover);stroke:var(--surface);stroke-width:2}
  .map-dot.intl{fill:var(--sky-ink)}
  .map-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;fill:var(--ink-soft)}
  .map-origin{fill:var(--carrot);stroke:var(--surface);stroke-width:3}
  .map-origin-lbl{font-family:var(--font-mono);font-size:12px;font-weight:800;fill:var(--carrot-deep)}

  .filter{position:sticky;top:68px;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);
    backdrop-filter:blur(8px);padding:18px 0;margin-top:24px;border-bottom:2px solid var(--line)}
  .filter .flabel{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
    letter-spacing:.12em;color:var(--ink-soft);margin-bottom:10px}
  .days{display:flex;gap:8px;flex-wrap:wrap}
  .day{font-family:var(--font-display);font-weight:700;font-size:14px;border:2px solid var(--line);
    background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer}
  .day[aria-pressed="true"]{background:var(--carrot);border-color:var(--carrot);color:#fff}
  :root[data-theme="dark"] .day[aria-pressed="true"]{color:#241206}
  @media (prefers-color-scheme:dark){.day[aria-pressed="true"]{color:#241206}}
  :root[data-theme="light"] .day[aria-pressed="true"]{color:#fff}
  .day.all[aria-pressed="true"]{background:var(--clover);border-color:var(--clover);color:#fff}

  .routes{display:flex;flex-direction:column;gap:14px;margin-top:26px}
  .route{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);
    padding:18px 22px;display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:16px 24px;align-items:center}
  .route.intl{border-color:color-mix(in srgb,var(--sky-ink) 40%,var(--line))}
  .rt-main{display:flex;align-items:center;gap:16px;min-width:0}
  /* overflow-wrap:anywhere: names like "Sarasota/Bradenton" have no space to break at
     (browsers do not break after "/"), which floors the card's min-content width and
     pushes the row past the card edge at 320px. */
  .rt-dest{min-width:0;overflow-wrap:anywhere}
  .rt-dest .dc{font-family:var(--font-mono);font-weight:700;color:var(--clover);font-size:12.5px}
  .rt-dest .dn{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.05}
  .rt-dest .dr{font-size:12.5px;color:var(--ink-soft)}
  .intl-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
    color:var(--sky-ink);border:1.5px solid currentColor;border-radius:999px;padding:2px 8px;margin-left:8px}
  /* min-width:0 on both: as a grid item .rt-meta would otherwise be floored at its
     min-content width, stretching the column past the card and pushing chips and the
     weekday strip over the right border on narrow phones. */
  .rt-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
  .airlines{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
  .al{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;
    font-size:12.5px;background:var(--surface-2);border:2px solid var(--line);border-radius:999px;
    padding:3px 12px 3px 4px;color:var(--ink);max-width:100%}
  /* An operator we could not resolve to a bookable airline. Dashed and de-emphasised so it
     reads as "who flew it" rather than as one of the airport's airlines — those are counted
     in the stats bar, and this chip deliberately is not. */
  .al-operator{border-style:dashed;color:var(--ink-soft);font-weight:500}
  a.al{text-decoration:none}
  a.al:hover{border-color:var(--clover);color:var(--clover)}
  a.al:focus-visible{outline:2px solid var(--carrot);outline-offset:2px}
  .al .al-mark{width:20px;height:20px;flex:none;border-radius:6px}
  .al img.al-logo{background:#fff;padding:2px;box-sizing:border-box}
  .al .al-swatch{display:inline-grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);
    font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:-.02em;line-height:1}
  /* Wraps so the 7-day strip drops to its own line rather than forcing the row (and
     therefore the card) wider than the viewport. */
  .rt-numbers{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;min-width:0}
  .fcount{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap;text-align:center}
  .fcount b{display:block;color:var(--clover);font-size:17px;font-family:var(--font-display)}
  .ftime{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap;text-align:center}
  .ftime b{display:block;color:var(--clover);font-size:17px;font-family:var(--font-display)}
  .weekstrip{display:flex;gap:4px}
  .wd{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-family:var(--font-mono);
    font-size:10px;font-weight:700;background:var(--surface-2);color:var(--ink-soft);border:1.5px solid var(--line)}
  .wd.on{background:var(--clover);color:#fff;border-color:var(--clover)}
  :root[data-theme="dark"] .wd.on{color:#0F1912}
  @media (prefers-color-scheme:dark){.wd.on{color:#0F1912}}
  :root[data-theme="light"] .wd.on{color:#fff}
  .fares{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--carrot-deep);
    text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
  .fares:hover{text-decoration:underline}
  .empty{text-align:center;padding:50px;color:var(--ink-soft);font-family:var(--font-display);font-weight:700}

  .seo{background:var(--surface-2);border:2px solid var(--line);border-radius:var(--r-lg);padding:38px;margin-top:44px}
  .seo h2{font-size:26px;margin-bottom:14px}
  .seo p{color:var(--ink-soft);max-width:70ch;margin-bottom:14px}
  .seo p b{color:var(--ink)}

  footer{border-top:2px solid var(--line);padding:40px 0;margin-top:20px}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
  .foot .fb{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800}
  .foot .fb .logo{width:39px;height:30px}
  .foot small{color:var(--ink-soft);font-size:13px}

  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr}
    .hero-art{min-height:240px;order:-1}
    /* no .origins override here — the base auto-fit already yields 2-3 columns in this
       range, and forcing exactly 2 is what pushed the grid past narrow viewports */
    .steps{grid-template-columns:1fr;padding:30px}
    .route{grid-template-columns:1fr}
    .rt-meta{justify-content:flex-start}
    .head-row{flex-direction:column;align-items:flex-start}
  }
  /* Must follow the 860px block (equal specificity — source order decides).
     Phones: let auto-fit decide the column count from the space available rather than
     hardcoding one. Card-title metrics vary a lot by platform (SF Pro Rounded on iOS is
     ~13% narrower than the fallback elsewhere), so a fixed breakpoint tuned to one font
     is either too greedy or wastes a column. minmax(min(145px,100%),1fr) yields two
     columns from ~360px up and one below, whatever the font. The title scales with the
     viewport instead of stepping down, so a 440px phone keeps ~19px, not 16px. */
  @media (max-width:560px){
    .origins{grid-template-columns:repeat(2,1fr);gap:12px}
    .origins>*{min-width:0}
    .ocard{padding:14px}
    .ocard .on{font-size:clamp(16px,4.4vw,21px);overflow-wrap:break-word}
    .ocard .arc-mini{margin-top:6px}
  }
  /* Under 360px two columns leave too little room for a city name at any readable size. */
  @media (max-width:359px){
    .origins{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){
    .draw{animation:none;stroke-dashoffset:0}.rabbit{animation:none}.btn,.ocard{transition:none}
  }

  /* ---- route-pair page ---- */
  .pair-h2{font-size:22px;margin:34px 0 0}
  .pair-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:20px 0 8px}
  .pg-day{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);
    padding:12px 6px;text-align:center}
  .pg-day.off{background:var(--surface-2);opacity:.55}
  .pg-name{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;
    color:var(--ink-soft);text-transform:uppercase}
  .pg-n{display:block;font-family:var(--font-display);font-size:24px;color:var(--clover);margin-top:4px}
  .pg-day.off .pg-n{color:var(--ink-soft)}
  .pg-lbl{font-size:11px;color:var(--ink-soft)}
  .pair-airlines{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0}
  .siblings{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}
  .sib{background:var(--surface);border:2px solid var(--line);border-radius:999px;
    padding:8px 16px;text-decoration:none;color:var(--ink);font-size:14px}
  .sib:hover{border-color:var(--clover)}
  .sib b{font-family:var(--font-mono);color:var(--clover)}
  @media (max-width:640px){.pair-grid{grid-template-columns:repeat(4,1fr)}}
  .mapcard-sm{max-width:600px;margin:24px auto 0}
  a.rt-dest{text-decoration:none;color:inherit}
  a.rt-dest:hover .dn{color:var(--clover);text-decoration:underline}

  /* ---- flight schedule: table + gantt + day filter ---- */
  .pg-day{font:inherit;cursor:pointer;text-align:center}
  .pg-day[disabled]{cursor:default;opacity:.5}
  .pg-day[aria-pressed="true"]{border-color:var(--clover);box-shadow:inset 0 0 0 1px var(--clover)}
  .pg-all{font-family:var(--font-display);font-weight:700;font-size:13px;border:2px solid var(--line);
    background:var(--surface);color:var(--ink);border-radius:var(--r-md);padding:0 16px;cursor:pointer}
  .pg-all[aria-pressed="true"]{border-color:var(--clover);color:var(--clover)}
  .fsched-sec{margin-top:16px}
  .fsched-sec>.pair-h2:first-child{margin-top:0}
  .fsched-note{font-size:13px;color:var(--ink-soft);margin:6px 0 16px}
  .fgantt{width:100%;height:auto;display:block;margin-bottom:20px}
  .fg-bar{fill:var(--carrot);opacity:.85;rx:3}
  .fg-tick{fill:var(--carrot)}
  .fg-lbl{font-family:var(--font-mono);font-size:11px;fill:var(--ink)}
  .fg-axis{stroke:var(--line);stroke-width:1}
  .fg-axis-lbl{font-family:var(--font-mono);font-size:10px;fill:var(--ink-soft)}
  .fg-sw{font-family:var(--font-mono);font-size:8px;font-weight:700}
  /* flair: bars pop in left-to-right */
  @keyframes fg-pop{from{opacity:0}}
  .fg-bar,.fg-tick,.fg-chip,.fg-lbl{animation:fg-pop .35s ease-out backwards}
  @media (prefers-reduced-motion:reduce){
    .fg-bar,.fg-tick,.fg-chip,.fg-lbl{animation:none}
  }
  table.fsched{width:100%;border-collapse:collapse;font-size:14px}
  table.fsched th{text-align:left;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--ink-soft);padding:6px 10px;border-bottom:2px solid var(--line)}
  table.fsched td{padding:9px 10px;border-bottom:1px solid var(--line)}
  .fs-ident{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
  .fs-dep,.fs-dur{font-family:var(--font-mono)}
  .fs-row[hidden]{display:none}

  /* A table cannot shrink below its min-content width, so on a phone it either forces
     the page sideways or spills out of its section. Scroll it inside its own box. */
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tscroll>table{min-width:min-content}
  .near-table{width:100%;border-collapse:collapse;margin:8px 0 32px}
  .near-table th{text-align:left;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:8px 12px;border-bottom:1px solid var(--line)}
  .near-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
  .near-table .near-seed{background:color-mix(in srgb,var(--clover) 8%,var(--surface))}
  .near-city{display:block;font-size:12px;color:var(--ink-soft)}

/* client day-filter hides cards without re-rendering (SEO: all cards in HTML) */
.route[hidden]{display:none}
.crumbs a{text-decoration:none}
.brand{text-decoration:none}
.ocard{text-decoration:none}
  .near-back{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
  .near-back ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
  .near-back li span{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
  .carrier-back{margin:0 0 20px}
  .carrier-back p{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
  .carrier-back span{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
  .parking-link{margin:20px 0 0}
  .parking-link p{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
  .parking-link span{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}

/* --- route-change block (enhanced airports only) ---
   Sits below the destination cards inside the routes section, so it needs a top rule to
   separate it from the grid rather than the standalone section padding it had before. */
.changes { margin: 30px 0 4px; padding-top: 24px; border-top: 1px solid var(--line, rgba(127,127,127,.18)); }
.changes h2 { font-size: 1.32rem; margin: 0 0 4px; }
.changes-period { color: var(--ink-soft); font-size: .86rem; margin: 0 0 14px; }
.changes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.changes-list .chg {
  position: relative; padding: 10px 14px 10px 34px; border-radius: 10px;
  background: var(--card, rgba(127,127,127,.06));
  border: 1px solid var(--line, rgba(127,127,127,.18));
  font-size: .95rem; line-height: 1.45;
}
/* One glyph per direction of travel — losses, gains, and everything else. */
.changes-list .chg::before {
  content: "•"; position: absolute; left: 13px; top: 10px; font-weight: 700;
  color: var(--ink-soft);
}
.chg-route-dropped::before, .chg-freq-down::before,
.chg-carrier-dropped::before, .chg-weekday-lost::before { content: "▾"; color: #c2410c; }
.chg-route-added::before, .chg-freq-up::before, .chg-carrier-added::before { content: "▴"; color: #15803d; }
.chg-route-short-lived::before, .chg-route-resumed::before { content: "◆"; color: #a16207; }
.changes-more { color: var(--ink-soft); font-size: .86rem; margin: 12px 0 0; }
@media (max-width: 560px) { .changes-list .chg { font-size: .9rem; } }

/* --- static prose pages (about / privacy / terms) --- */
.prose-page { padding: 24px 0 40px; }
.prose-page .wrap { max-width: 720px; }
.prose-page h1 { font-size: 1.9rem; margin: 0 0 10px; }
.prose-page .lede { color: var(--ink-soft); margin: 0 0 26px; }
.prose-page h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.prose-page p, .prose-page li { line-height: 1.65; }
.prose-page ul { padding-left: 20px; margin: 10px 0; }
.prose-page li { margin: 6px 0; }
.foot-links { display: flex; gap: 16px; margin: 0 0 6px; }
.foot-links a { color: var(--ink-soft); font-size: .86rem; text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---- page feedback ----------------------------------------------------------------------
   A corner card, never a modal. No backdrop, no focus trap: the flights are what the visitor
   came for, and this must be ignorable. Built from the same tokens as everything else, so it
   inherits both themes with no rules of its own beyond the pressed states. */
.fb { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(330px, calc(100vw - 36px));
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 14px 18px 18px; color: var(--ink);
  opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; }
.fb.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fb { transition: none; } }
/* Question and close on one row, thumbs on the next. The close control used to be absolutely
   positioned in the corner, which sat it on top of the thumbs-down circle. In flow it cannot
   collide, at any width, or if the question wraps. */
.fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fb-x { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--ink-soft); padding: 0 0 6px 10px; margin: -4px -4px 0 0; }
.fb-x:hover { color: var(--ink); }
.fb-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.fb-q { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.fb-thumb { width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--surface); cursor: pointer; font-size: 17px; line-height: 1;
  display: grid; place-items: center; }
.fb-thumb:hover { border-color: var(--clover); }
.fb-thumb.on { background: var(--clover); border-color: var(--clover); }
.fb-more { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.fb-sub { font-size: .86rem; color: var(--ink-soft); margin: 0 0 2px; }
/* Reason chips reuse the day-filter shape so they read as the same kind of control. */
.fb-reason { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-align: left;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer; }
.fb-reason.on { background: var(--carrot); border-color: var(--carrot); color: #fff; }
:root[data-theme="dark"] .fb-reason.on { color: #241206; }
@media (prefers-color-scheme: dark) { .fb-reason.on { color: #241206; } }
:root[data-theme="light"] .fb-reason.on { color: #fff; }
.fb-note { font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; resize: vertical; }
.fb-send { font-family: var(--font-display); font-weight: 800; font-size: 14px; border: 0;
  cursor: pointer; border-radius: 999px; padding: 10px 18px; align-self: flex-start;
  background: var(--carrot); color: #fff; }
:root[data-theme="dark"] .fb-send { color: #241206; }
@media (prefers-color-scheme: dark) { .fb-send { color: #241206; } }
:root[data-theme="light"] .fb-send { color: #fff; }
.fb-done { font-family: var(--font-display); font-weight: 800; font-size: 15px; padding: 4px 0; }
@media (max-width: 560px) { .fb { right: 12px; left: 12px; bottom: 12px; width: auto; } }