/* EasyNavLog landing page, v2.
   Loads after site.css and only on the front page. The idea: fewer identical cards,
   more of the product itself on the page, and a few things only a person would add. */

:root{
  --hand:"Patrick Hand","Bradley Hand","Segoe Print",cursive;
  --line2:#C9D6E6; --ok:#15803D; --warn:#B5450C;
  --paper:#FFFDF8;
}
@media (prefers-color-scheme:dark){ :root{ --line2:#2E4666; --paper:#F7F3EA } }

/* ---------- nav: the plane banks toward the cursor ---------- */
.brand img{transition:transform .25s ease}
.brand .name{letter-spacing:-.01em}

/* ---------- hero ---------- */
.hero2{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 600px at 85% -10%,#1C8AD6 0%,rgba(28,138,214,0) 60%),linear-gradient(160deg,#062F62 0%,#0B3A6E 60%,#0E4A86 100%)}
.hero2::before{content:"";position:absolute;inset:0;background:url(/assets/sectional-tex.webp) center/900px repeat;opacity:.07;mix-blend-mode:luminosity;pointer-events:none}
.hero2 .in{position:relative;max-width:1140px;margin:0 auto;padding:64px 22px 60px;display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.hero2 .eyebrow{color:var(--sky)}
.hero2 h1{color:#fff;font-size:clamp(38px,5vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0 0 10px}
.hero2 .tag{font-family:var(--hand);font-size:clamp(22px,2.2vw,28px);color:#BFE9FF;margin:2px 0 18px;transform:rotate(-1.2deg);display:inline-block}
.hero2 .tag u{text-decoration:none;position:relative}
.hero2 .tag u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--sky);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1) .9s}
.hero2.on .tag u::after{transform:scaleX(1)}
.hero2 p.lead{font-size:clamp(16px,1.35vw,18.5px);color:#DCEBFA;max-width:52ch;margin:0 0 22px;line-height:1.55}
.hero2 .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero2 .acts .btn:not(.primary){background:transparent;border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.hero2 .fine{font-size:13px;color:#BFD9F5;margin-top:14px}
.hero2 .fine a{color:#fff}

/* the course arrow that grows out of the primary button on hover */
.btn.primary.big{position:relative;padding-right:44px}
.btn.primary.big::after{content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;border-right:3px solid currentColor;border-top:3px solid currentColor;transform:translateY(-50%) rotate(45deg) scale(.85);opacity:.7;transition:transform .18s ease,opacity .18s ease,right .18s ease}
.btn.primary.big:hover::after{right:14px;opacity:1;transform:translateY(-50%) rotate(45deg) scale(1)}

/* ---------- the live navlog ---------- */
.live{background:var(--paper);color:#0F2340;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.35) inset;padding:14px 16px 12px;font-family:var(--cond);transform:rotate(.6deg);position:relative}
.live::before{content:"";position:absolute;left:14px;right:14px;top:-6px;height:12px;background:rgba(255,255,255,.55);border-radius:3px;transform:rotate(-.8deg);box-shadow:0 1px 2px rgba(0,0,0,.15)} /* a strip of tape */
.live .lt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--navy);padding-bottom:5px;margin-bottom:8px}
.live .lt b{font-size:14px;letter-spacing:.06em}
.live .lt span{font-family:var(--mono);font-size:11px;color:#3B4C66}
.live svg.rt{display:block;width:100%;height:auto;margin:2px 0 6px}
/* the hero route panel is styled after a sectional: chart water and land, a faint
   graticule, and the course drawn over it. The airspace is NOT drawn here - only the
   two labelled advisory examples are, so nothing on this page asserts a class. */
.live svg .sea{fill:#D8E7F0}
.live svg .grat line{stroke:#8FB3CC;stroke-width:.5;stroke-opacity:.45}
.live svg .pathcase{fill:none;stroke:#fff;stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.live svg .path{fill:none;stroke:#0E4A86;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#rtGlow)}
.live svg .state{fill:url(#rtLand);stroke:#7E9CB5;stroke-width:1.1;stroke-linejoin:round}
.live svg .wst{fill:rgba(215,38,61,.14);stroke:#D7263D;stroke-width:1.6;stroke-dasharray:5 3}
.live svg .tfr{fill:rgba(123,44,191,.16);stroke:#7B2CBF;stroke-width:1.6}
.live svg .adv{font:600 9.5px var(--cond);fill:#D7263D;letter-spacing:.04em}
.live svg .adv.tfr{fill:#7B2CBF}
.live svg .hand.ex{font-size:12px;fill:#6B5B3E}
.live svg .tick{fill:#fff;stroke:#0E4A86;stroke-width:2}
.live svg .tick.apt{fill:#0E4A86}
.live svg .lb{font:600 11.5px var(--cond);fill:#0F2340;paint-order:stroke;stroke:#F5F1E6;stroke-width:2.6;stroke-linejoin:round}
.live svg .lb.mono{font:500 10.5px var(--mono);fill:#3B4C66;paint-order:stroke;stroke:#F5F1E6;stroke-width:2.4;stroke-linejoin:round}
.live svg .hand{font:15px var(--hand);fill:#B5450C}
.live table{width:100%;border-collapse:collapse;font-size:11px}
.live th{background:var(--navy);color:#fff;font-weight:600;padding:3px 4px;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em}
.live td{border:1px solid #1F2A44;padding:3px 4px;text-align:center;font-family:var(--mono);font-size:11px;height:22px;white-space:nowrap}
.live td:first-child{text-align:left;font-family:var(--cond);font-weight:700;font-size:11.5px}
.live tr.tot td{font-weight:600;background:#EEF3F9}
.live td.v{color:#0F2340}
.live td.v.h{font-family:var(--hand);font-size:14px;color:#1F2A44;line-height:1} /* the filled-in look */
.live .lf{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-family:var(--mono);font-size:10.5px;color:#3B4C66}
.live .lf .ok{color:var(--ok)}
.live .replay{position:absolute;right:12px;bottom:-30px;font:600 12.5px var(--cond);color:#BFE9FF;background:none;border:0;cursor:pointer;letter-spacing:.04em;padding:6px 0}
.live .replay:hover{color:#fff;text-decoration:underline}
@media (max-width:920px){ .hero2 .in{grid-template-columns:1fr;padding:44px 20px 50px} .live{transform:none} .live td{font-size:10.5px} .live table{font-size:10.5px} }

/* ---------- alternating rows ---------- */
.rowsec{max-width:1140px;margin:0 auto;padding:64px 22px 30px}
.rowsec h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.025em;line-height:1.08;max-width:22ch}
.rowsec .lead{color:var(--muted);font-size:17.5px;max-width:58ch;margin:10px 0 0}
.row{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:54px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row.flip .media{order:2}
.row h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.12;margin:0 0 10px}
.row p{color:var(--muted);font-size:16px;max-width:48ch;margin:0 0 12px}
.row .kicker{font-family:var(--cond);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.row .note{font-family:var(--hand);font-size:19px;color:#6B5B3E;transform:rotate(-1deg);display:inline-block;margin-top:6px}
@media (prefers-color-scheme:dark){ .row .note{color:#D9C9A5} }
.media{position:relative}
.media img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,35,64,.05),0 18px 40px -20px rgba(11,35,64,.35)}
.media figcaption,.media .cap{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px}

/* real checkpoint list, rendered in the page */
.cps{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(11,35,64,.05),0 18px 40px -20px rgba(11,35,64,.35)}
.cps li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease}
.cps li:last-child{border-bottom:0}
.cps.on li{opacity:1;transform:none}
.cps .k{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--cond);letter-spacing:.06em;color:#fff;background:#0E4A86}
.cps .k.vis{background:var(--sky);color:#04121F}
.cps b{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--ink);display:block}
.cps small{color:var(--muted);font-size:12.5px}
.cps .d{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}

/* one leg worked out */
.e6b{display:grid;gap:6px}
.e6r{display:grid;grid-template-columns:1.1fr .8fr 1.4fr;gap:10px;align-items:baseline;padding:7px 10px;border-radius:8px;background:var(--ground);opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease}
.tri.on .e6r{opacity:1;transform:none}
.e6l{font:600 13px var(--cond);color:var(--muted);letter-spacing:.02em}
.e6v{font:500 16px var(--mono);color:var(--ink)}
.e6h{font-size:12.5px;color:var(--muted)}
.e6n{font-family:var(--hand);font-size:18px;color:#B5450C;margin-top:8px;transform:rotate(-1deg)}
@media (max-width:480px){ .e6r{grid-template-columns:1fr 1fr} .e6h{grid-column:1/-1;margin-top:-4px} }
.live .tw{overflow-x:auto}
@media (max-width:520px){ .live th:nth-child(3),.live td:nth-child(3),.live th:nth-child(9),.live td:nth-child(9){display:none} .hero2 .in{padding-left:16px;padding-right:16px} }
/* wind triangle */
.tri{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(11,35,64,.05),0 18px 40px -20px rgba(11,35,64,.35)}
.tri svg{display:block;width:100%;height:auto}
.tri .lb{font:600 13px var(--sans);fill:var(--ink)}
.tri .mono{font:500 13px var(--mono)}
.tri .hand{font:18px var(--hand);fill:#B5450C}
.tri .eq{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.6}

/* airspace profile: the app's own SVG uses these tokens */
.prof{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 12px 4px;box-shadow:0 1px 2px rgba(11,35,64,.05),0 18px 40px -20px rgba(11,35,64,.35);--line2:#C9D6E6;--muted:#8B9DB5;--mono:"IBM Plex Mono",monospace}
.prof svg{display:block;width:100%;height:auto}
.prof .leg{display:flex;gap:14px;flex-wrap:wrap;font:600 12px var(--cond);color:var(--muted);padding:8px 4px 6px}
.prof .leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* weather at ETA */
.wx{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(11,35,64,.05),0 18px 40px -20px rgba(11,35,64,.35)}
.wx li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:start}
.wx li:last-child{border-bottom:0}
.wx .cat{font:700 11px var(--cond);letter-spacing:.08em;color:#fff;background:var(--ok);border-radius:6px;text-align:center;padding:4px 0;margin-top:2px}
.wx b{font-family:var(--mono);font-weight:500;font-size:13.5px}
.wx .when{font-family:var(--mono);font-size:12px;color:var(--blue);margin-left:8px}
.wx small{display:block;color:var(--muted);font-size:13px;line-height:1.45}

/* the layout fan */
.fan{position:relative;height:420px}
.fan img{position:absolute;width:62%;left:0;top:0;border-radius:8px;border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(11,35,64,.45);transition:transform .35s ease;transform-origin:bottom left}
.fan img:nth-child(1){left:0;top:40px;transform:rotate(-7deg)}
.fan img:nth-child(2){left:9%;top:26px;transform:rotate(-3deg)}
.fan img:nth-child(3){left:18%;top:14px;transform:rotate(1deg)}
.fan img:nth-child(4){left:27%;top:6px;transform:rotate(5deg)}
.fan img:nth-child(5){left:36%;top:0;transform:rotate(9deg)}
.fan:hover img{transform:rotate(0) translateY(-6px)}
.fan .lbl{position:absolute;left:0;bottom:-6px;font-family:var(--hand);font-size:18px;color:#6B5B3E;transform:rotate(-2deg)}
@media (prefers-color-scheme:dark){ .fan .lbl{color:#D9C9A5} }
@media (max-width:860px){ .row{grid-template-columns:1fr;gap:26px;padding:40px 0} .row.flip .media{order:0} .fan{height:300px;overflow:hidden;padding-bottom:30px} .fan img{width:62%} }
body{overflow-x:hidden}

/* ---------- the plotter timeline ---------- */
.plot{max-width:1140px;margin:0 auto;padding:60px 22px}
.plot h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.025em;margin-bottom:6px}
.plot .lead{color:var(--muted);font-size:17px;margin:0 0 34px}
.legs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:34px}
.legs::before{content:"";position:absolute;left:4%;right:4%;top:14px;height:0;border-top:2px dashed #0E4A86;opacity:.55}
.legs .cp{position:relative}
.legs .cp::before{content:"";position:absolute;left:0;top:-27px;width:14px;height:14px;border-radius:50%;background:var(--panel);border:3px solid #0E4A86;box-shadow:0 0 0 4px var(--ground)}
.legs .cp .n{font:600 11px var(--mono);color:#0E4A86;letter-spacing:.08em;position:absolute;left:22px;top:-30px}
.legs h3{font-size:19px;margin:0 0 6px}
.legs p{margin:0;color:var(--muted);font-size:14.5px}
.legs code{font-family:var(--mono);font-size:12.5px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
@media (max-width:860px){ .legs{grid-template-columns:1fr;gap:26px;padding-left:26px;padding-top:0} .legs::before{left:6px;right:auto;top:6px;bottom:0;height:auto;border-top:0;border-left:2px dashed #0E4A86} .legs .cp::before{left:-26px;top:4px} .legs .cp .n{left:-4px;top:-14px;display:none} }

/* ---------- pricing + the note ---------- */
.pricing{max-width:1140px;margin:0 auto;padding:30px 22px 60px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.pricing h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.025em;margin-bottom:6px}
.pricing .lead{color:var(--muted);font-size:17px;margin:0 0 22px;max-width:52ch}
.note-card{background:var(--paper);color:#1F2A44;border-radius:6px 6px 6px 22px;padding:26px 28px 22px;font-family:var(--hand);font-size:20px;line-height:1.45;box-shadow:0 18px 40px -16px rgba(11,35,64,.35);transform:rotate(.8deg);position:relative;margin-top:36px}
.note-card::before{content:"";position:absolute;left:50%;top:-8px;width:90px;height:16px;margin-left:-45px;background:rgba(255,255,255,.6);border-radius:2px;transform:rotate(-1.5deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.note-card .sig{margin-top:14px;font-size:17px;color:#6B5B3E}
@media (max-width:860px){ .pricing{grid-template-columns:1fr} .note-card{margin-top:10px} }

/* ---------- FAQ: the plus turns into a cross ---------- */
.q summary::after{content:"+";transition:transform .22s ease,color .22s ease}
.q[open] summary::after{content:"+";transform:rotate(45deg);color:var(--warn)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} .cps li{opacity:1;transform:none} .hero2 .tag u::after{transform:scaleX(1)} }


/* ======================================================================
   v2.1 motion pass. Everything here is decoration: the page reads the same
   with it off, and prefers-reduced-motion turns all of it off.
   ====================================================================== */

/* the sectional under the hero drifts, slowly, like a chart on a table */
@keyframes texdrift{ from{background-position:0 0} to{background-position:-900px 600px} }
.hero2::before{animation:texdrift 240s linear infinite}

/* headline lines rise in one after another once the hero is on screen */
.hero2 h1 .ln{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(4px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.hero2.on h1 .ln{opacity:1;transform:none;filter:none}
.hero2.on h1 .ln:nth-child(2){transition-delay:.12s}
.hero2.on h1 .ln:nth-child(3){transition-delay:.24s}
.hero2 .eyebrow,.hero2 .lead,.hero2 .acts,.hero2 .fine{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hero2.on .eyebrow{opacity:1;transform:none}
.hero2.on .lead{opacity:1;transform:none;transition-delay:.35s}
.hero2.on .acts{opacity:1;transform:none;transition-delay:.5s}
.hero2.on .fine{opacity:1;transform:none;transition-delay:.65s}

/* the sheet leans a little toward the cursor; JS sets --tx/--ty */
.live{transform:perspective(1400px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) rotate(.6deg);transition:transform .25s ease-out;will-change:transform}
@media (max-width:920px){ .live{transform:none} }

/* rows: the media slides in from its own side, the copy from the other */
.row .media{opacity:0;transform:translateX(-26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.row > div:not(.media){opacity:0;transform:translateX(26px);transition:opacity .75s ease .1s,transform .75s cubic-bezier(.2,.8,.2,1) .1s}
.row.flip .media{transform:translateX(26px)}
.row.flip > div:not(.media){transform:translateX(-26px)}
.row.in .media,.row.in > div:not(.media){opacity:1;transform:none}
@media (max-width:860px){ .row .media,.row .copy,.row.flip .media,.row.flip > div:not(.media){transform:translateY(16px)} }

/* reveal: a touch of blur so it reads as focus, not a slide */
.rv{filter:blur(3px);transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.rv.in{filter:none}

/* the four legs: the dashed line draws, then each checkpoint pops in turn */
.legs::before{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.legs.in::before{transform:scaleX(1)}
.legs .cp{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.legs .cp::before{transform:scale(.4);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.legs.in .cp{opacity:1;transform:none}
.legs.in .cp::before{transform:scale(1)}
.legs.in .cp:nth-child(1){transition-delay:.25s}.legs.in .cp:nth-child(1)::before{transition-delay:.25s}
.legs.in .cp:nth-child(2){transition-delay:.5s}.legs.in .cp:nth-child(2)::before{transition-delay:.5s}
.legs.in .cp:nth-child(3){transition-delay:.75s}.legs.in .cp:nth-child(3)::before{transition-delay:.75s}
.legs.in .cp:nth-child(4){transition-delay:1s}.legs.in .cp:nth-child(4)::before{transition-delay:1s}
@media (max-width:860px){ .legs::before{transform:scaleY(0);transform-origin:top} .legs.in::before{transform:scaleY(1)} }

/* the fan deals out of a stack when it comes into view */
.fan img{transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.fan:not(.in) img{transform:rotate(0) translate(18%,8px) !important}
.fan:not(.in) img:nth-child(2){transition-delay:.06s}.fan:not(.in) img:nth-child(3){transition-delay:.12s}.fan:not(.in) img:nth-child(4){transition-delay:.18s}.fan:not(.in) img:nth-child(5){transition-delay:.24s}
.fan.in img:nth-child(2){transition-delay:.08s}.fan.in img:nth-child(3){transition-delay:.16s}.fan.in img:nth-child(4){transition-delay:.24s}.fan.in img:nth-child(5){transition-delay:.32s}
.fan img:hover{box-shadow:0 26px 50px -18px rgba(11,35,64,.55);z-index:2}

/* cards and buttons answer the cursor, quietly */
.plan,.gcard,.guides a,.q{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease}
.plan:hover,.gcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(11,35,64,.35)}
.btn{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}

/* FAQ answers unfold instead of appearing */
.q p{overflow:hidden}
.q[open] p{animation:unfold .35s cubic-bezier(.2,.8,.2,1)}
@keyframes unfold{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

/* the closing call to action breathes once it is on screen */
.cta .btn.primary{position:relative}
.cta.in .btn.primary::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--sky);opacity:0;animation:ring 2.4s ease-out .4s 2}
@keyframes ring{ 0%{opacity:.7;transform:scale(.92)} 100%{opacity:0;transform:scale(1.18)} }

/* a route down the left margin that the page flies as you scroll */
.routeline{position:fixed;left:max(10px,calc(50vw - 640px));top:0;width:40px;height:100vh;pointer-events:none;z-index:4;opacity:0;transition:opacity .6s ease}
.routeline.on{opacity:1}
.routeline svg{position:absolute;left:0;top:0;width:40px;height:100%;overflow:visible}
.routeline .trk{stroke:#1C8AD6;stroke-opacity:.28;stroke-width:2;stroke-dasharray:4 6;fill:none}
.routeline .flown{stroke:var(--sky);stroke-width:2;fill:none}
.routeline .cp{fill:var(--ground);stroke:#1C8AD6;stroke-width:2;transition:fill .3s ease,stroke .3s ease}
.routeline .cp.past{fill:var(--sky);stroke:var(--sky)}
.routeline .ac{fill:#F5D33C;stroke:#7A5E00;stroke-width:1}
@media (max-width:1360px){ .routeline{display:none} }

@media (prefers-reduced-motion:reduce){
  .hero2::before{animation:none}
  .hero2 h1 .ln,.hero2 .eyebrow,.hero2 .lead,.hero2 .acts,.hero2 .fine{opacity:1;transform:none;filter:none;transition:none}
  .live{transform:rotate(.6deg)}
  .row .media,.row > div:not(.media){opacity:1;transform:none;transition:none}
  .rv{filter:none}
  .legs::before,.legs .cp,.legs .cp::before{transform:none;opacity:1;transition:none}
  .fan:not(.in) img{transform:none !important}
  .q[open] p{animation:none}
  .cta.in .btn.primary::before{animation:none}
  .routeline{display:none}
}