/* Self-hosted fonts (no Google Fonts requests, friendlier for EU privacy rules) */
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-latin-800-italic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("/fonts/barlow-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"VT323";src:url("/fonts/vt323-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Layout: an 80s local-TV weather broadcast. Station bar, the TV set as hero, the forecast generator as the "Local Forecast" segment, three broadcast features, then the subscribe form. Deliberately one fixed visual world (studio blue). */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{
  --deep:#081743; --navy:#0e2a78; --blue:#1d4fd6; --sky:#5d95ff; --ice:#cfe0ff;
  --yellow:#ffd23a; --orange:#ff7a1a; --red:#cc3523; --land:#2f8f5b; --land-2:#3aa86b; --sea:#1b3f9e;
  --white:#f4f7ff; --ink:#0a1230;
  --f-tv:"Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body:"Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-data:"VT323", "Courier New", monospace;
  --bar:linear-gradient(180deg,#3b6cf0 0%,#1d4fd6 45%,#0e2a78 100%);
  color-scheme:dark;
}
body{background:var(--deep);color:var(--white);font-family:var(--f-body);font-size:16.5px;line-height:1.55;
  background-image:linear-gradient(rgba(93,149,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(93,149,255,.07) 1px,transparent 1px);background-size:36px 36px}
.wrap{max-width:1060px;margin:0 auto;padding-inline:18px;padding-block:0 64px}

/* station bar */
.station{display:flex;align-items:stretch;justify-content:space-between;gap:10px;margin-top:16px;background:var(--bar);border:2px solid var(--sky);border-radius:6px;overflow:hidden;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--yellow);color:var(--ink);font-family:var(--f-tv);font-weight:800;font-style:italic;font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase}
.logo .mark{flex:none;width:1.45em;height:1.45em;margin:-4px 0}
.logo small{font-size:.8rem;font-style:normal;letter-spacing:.12em;font-weight:600}
.onair{display:flex;align-items:center;gap:16px;padding:8px 14px;font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.onair .dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.clock{font-family:var(--f-data);font-size:1.5rem;color:var(--yellow);letter-spacing:.04em}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:34px;align-items:center;padding-block:42px 10px}
.kicker{font-family:var(--f-tv);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);font-size:.95rem}
h1{font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(2.8rem,7.5vw,5rem);line-height:.9;margin:8px 0 14px;text-wrap:balance;text-shadow:4px 4px 0 var(--blue)}
.hero p{color:var(--ice);margin:0;max-width:28em}
.cta{display:inline-block;margin-top:22px;background:var(--yellow);color:var(--ink);font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;padding:11px 20px;border-radius:4px;text-decoration:none;box-shadow:4px 4px 0 var(--orange)}
.ai{display:block;margin-top:14px;font-family:var(--f-data);font-size:1.05rem;color:var(--sky)}

/* tv set */
.tv{background:linear-gradient(90deg,#5a3a22,#7a5232 20%,#5e3d24 40%,#7d5535 60%,#5a3a22 80%,#6e4a2e);border-radius:22px;padding:18px 18px 14px;box-shadow:0 22px 40px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.2)}
.screen{position:relative;border-radius:18px/14px;overflow:hidden;background:var(--sea);border:6px solid #1a1a1a;box-shadow:inset 0 0 40px rgba(0,0,0,.65)}
.screen svg.map{display:block;width:100%;height:auto}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45))}
.lower{position:absolute;left:0;right:0;bottom:0;background:var(--bar);border-top:2px solid var(--yellow);padding:6px 12px;display:flex;gap:10px;align-items:baseline}
.lower b{font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.lower span{font-family:var(--f-tv);font-weight:600;font-size:1.02rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lower em{font-style:normal}
.lower span.scroll{text-overflow:clip}
.lower span.scroll em{display:inline-block;animation:cap 11s ease-in-out infinite}
@keyframes cap{0%,18%{transform:none}72%,100%{transform:translateX(var(--shift))}}
.knobs{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-inline:6px}
.knobs .grille{flex:1;height:14px;margin-right:16px;background:repeating-linear-gradient(90deg,#2b1a0e 0 3px,transparent 3px 7px);border-radius:3px}
.knobs i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ddd,#666);margin-left:8px;box-shadow:0 2px 3px rgba(0,0,0,.5)}
.chan{font-family:var(--f-data);color:var(--yellow);font-size:1.05rem;margin-left:10px}

/* ticker */
.ticker{margin-top:26px;display:flex;border:2px solid var(--sky);border-radius:4px;overflow:hidden;background:#050e2c}
.ticker b{flex:none;background:var(--red);font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:6px 12px}
.ticker .track{flex:1;overflow:hidden;white-space:nowrap;position:relative;min-width:0}
.ticker .run{display:inline-flex;padding:7px 0;font-family:var(--f-data);font-size:1.25rem;color:var(--yellow);animation:run 60s linear infinite;will-change:transform}
.ticker .run span{flex:none;display:inline-flex;align-items:center}
.ticker .sep{display:inline-block;width:.42em;height:.42em;margin:0 .8em;background:var(--orange);transform:rotate(45deg)}
@keyframes run{to{transform:translateX(-50%)}}

/* sections */
h2{font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1;margin:68px 0 6px;text-wrap:balance}
h2 + .sub{color:var(--ice);margin:0 0 18px}

/* forecast segment */
.segment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.picker{display:flex;flex-direction:column}
.picker .joint{flex:1}
.segment>.card{display:flex;flex-direction:column}
.segment>.card .rows{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.signpage{align-items:start}
.signs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.signs button{font:inherit;font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:.92rem;min-width:0;overflow-wrap:anywhere;color:var(--white);background:var(--navy);border:2px solid var(--blue);border-radius:4px;padding:9px 4px;cursor:pointer;display:grid;justify-items:center;gap:2px}
.signs button svg{width:38px;height:38px;display:block}
.card header b svg{width:1.7em;height:1.7em;vertical-align:-.5em;margin-right:8px}
.signs button[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.signs button:focus-visible,.cta:focus-visible,.share:focus-visible,input:focus-visible,select:focus-visible,.go:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.hint{font-family:var(--f-data);font-size:1.1rem;color:var(--sky);margin:12px 0 0}

.card{background:var(--bar);border:2px solid var(--sky);border-radius:8px;overflow:hidden;box-shadow:6px 6px 0 #050e2c}
.card header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;background:rgba(5,14,44,.45);flex-wrap:wrap}
.card header b{font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.35rem;color:var(--yellow)}
.card header span{font-family:var(--f-data);font-size:1.15rem;color:var(--ice)}
.now{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:14px}
.now svg{width:92px;height:92px}
.temp{font-family:var(--f-tv);font-weight:800;font-size:3.6rem;line-height:.9}
.temp small{font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:block;color:var(--ice)}
.rows{padding:0 14px 6px}
.rows div{display:grid;grid-template-columns:28px 78px minmax(0,1fr);gap:8px;align-items:start;padding:8px 0;border-top:1px solid rgba(207,224,255,.25)}
.rows svg{width:26px;height:26px}
.rows b{font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--yellow)}
.rows p{margin:0}
.advisory{margin:6px 14px 0;background:var(--red);font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:6px 10px;border-radius:3px;display:flex;align-items:center;gap:8px}
.advisory svg{flex:none;width:24px;height:24px}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:14px}
.days div{background:rgba(5,14,44,.45);border-radius:4px;padding:6px 2px;text-align:center}
.days b{display:block;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;font-size:.9rem}
.days svg{width:34px;height:34px;display:block;margin:2px auto}
.days span{font-family:var(--f-data);font-size:1.1rem;color:var(--yellow)}
.cardfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 14px 14px;flex-wrap:wrap}
.cardfoot small{font-family:var(--f-data);font-size:1rem;color:var(--ice)}
.share{font:inherit;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--white);color:var(--ink);border:0;border-radius:4px;padding:7px 14px;cursor:pointer}

/* features */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.feat{min-width:0;background:var(--navy);border-left:6px solid var(--yellow);padding:16px 16px 18px;border-radius:0 6px 6px 0}
.feat h3{font-family:var(--f-tv);font-weight:800;text-transform:uppercase;font-size:1.3rem;margin:6px 0 4px}
.feat p{margin:0;color:var(--ice)}
.feat svg{width:40px;height:40px}

/* subscribe */
form{display:grid;gap:14px;background:var(--bar);border:2px solid var(--sky);border-radius:8px;padding:20px;margin-top:6px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
label{font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;display:grid;gap:4px;color:var(--ice)}
select{appearance:none;-webkit-appearance:none;padding-right:40px!important;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230a1230' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
input,select{font:inherit;font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink);background-color:var(--white);border:0;border-radius:4px;padding:11px 12px;min-width:0}
.go{font:inherit;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;background:var(--yellow);color:var(--ink);border:0;border-radius:4px;padding:11px 20px;cursor:pointer;justify-self:start;box-shadow:4px 4px 0 var(--orange)}
.ok{font-family:var(--f-data);font-size:1.2rem;color:var(--yellow);margin:0}
.fine{font-size:.85rem;color:var(--ice);margin:0}

@media (max-width:780px){.hero,.segment{grid-template-columns:1fr}}
@media (max-width:420px){.signs{grid-template-columns:repeat(3,minmax(0,1fr))}.lower b{display:none}.station{flex-wrap:nowrap}.logo{font-size:1.15rem;gap:7px;padding:8px 10px}.logo small{font-size:.62rem;letter-spacing:.08em}.onair{gap:8px;padding:8px 10px;font-size:.85rem;white-space:nowrap}.logo small{white-space:nowrap}.clock{font-size:1.2rem}}
@media (max-width:400px){.logo small{display:none}}
@media (max-width:380px){.onair .dot{display:none}}
@media (prefers-reduced-motion:reduce){.ticker .run{animation:none;padding-left:12px}.onair .dot{animation:none}.lower span,.lower span.scroll{white-space:normal}.lower span.scroll em{animation:none}}

.presenter{position:absolute;right:1%;bottom:0;width:36%;max-width:230px;height:auto;pointer-events:none;filter:drop-shadow(2px 0 0 var(--white)) drop-shadow(-2px 0 0 var(--white)) drop-shadow(0 -2px 0 var(--white)) drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.joined{display:grid;gap:10px;background:rgba(5,14,44,.45);border-radius:6px;padding:14px}
.joined b{font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.6rem;color:var(--yellow)}
.joined p{margin:0;color:var(--ice)}
.reflink{display:flex;gap:8px;flex-wrap:wrap}
.reflink input{flex:1 1 220px}
.legal{background:var(--navy);border-radius:8px;padding:20px 22px;max-width:46em;margin-top:32px}
.legal a{color:var(--white)}
.legal .updated{font-family:var(--f-data);font-size:1.1rem;color:var(--sky);margin-top:-6px}
.legal .back{margin-top:28px}
.legal .back a{color:var(--yellow)}
.legal h1{font-size:2.4rem}
.legal h2{font-size:1.4rem;margin:28px 0 6px}
.legal p,.legal li{color:var(--ice)}

/* sign pages */
a.logo{text-decoration:none}
.crumbs{margin:18px 0 0;font-family:var(--f-data);font-size:1.1rem;color:var(--sky)}
.crumbs a{color:var(--ice)}
.signpage{padding-block:18px 0}
.signh1{display:flex;align-items:center;gap:14px}
.signh1 svg{flex:none;width:clamp(56px,9vw,84px);height:clamp(56px,9vw,84px);filter:drop-shadow(4px 4px 0 var(--blue))}
.lede{color:var(--ice);max-width:34em;margin:0}
.facts{display:grid;gap:10px;margin:20px 0 0}
.facts div{background:var(--navy);border-left:6px solid var(--yellow);border-radius:0 6px 6px 0;padding:10px 14px}
.facts dt{font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--yellow);font-size:.95rem}
.facts dd{margin:2px 0 0}
.facts a{color:var(--white)}

/* forecast card extras */
.card{position:relative}
.now{grid-template-columns:auto minmax(0,1fr) auto}
.unit{align-self:start;font:inherit;font-family:var(--f-data);font-size:1.15rem;line-height:1;color:var(--ice);background:rgba(5,14,44,.45);border:2px solid var(--sky);border-radius:4px;padding:4px 8px;cursor:pointer}
.unit:hover{border-color:var(--yellow)}
.unit b{font-weight:400;color:var(--yellow)}
.cardfoot .full{font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--yellow);text-decoration:none;border-bottom:2px solid currentColor}
.cardfoot .full:hover{color:var(--white)}
.cardfoot .btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.share.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--ice)}
.share:disabled{opacity:.7;cursor:progress}
.unit:focus-visible,.cardfoot a:focus-visible,.sb:focus-visible,.linkbtn:focus-visible,.faq summary:focus-visible,.sitefoot a:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* after signup: invite meter and share buttons */
.signal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;background:var(--navy);border:2px solid var(--blue);border-radius:6px;padding:10px 14px}
.signal .bars{display:flex;align-items:flex-end;gap:4px;height:34px}
.signal .bars i{width:10px;background:rgba(207,224,255,.2);border-radius:2px}
.signal .bars i:nth-child(1){height:40%}.signal .bars i:nth-child(2){height:70%}.signal .bars i:nth-child(3){height:100%}
.signal .bars i.on{background:var(--yellow);box-shadow:0 0 8px rgba(255,210,58,.6)}
.signal p{margin:0;color:var(--ice)}
.signal strong{display:block;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--white)}
.sharebtns{display:flex;flex-wrap:wrap;gap:8px}
.sb{font:inherit;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--ink);background:var(--yellow);border:0;border-radius:4px;padding:7px 14px;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--orange)}
.linkbtn{justify-self:start;font:inherit;font-size:.85rem;color:var(--ice);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* FAQ */
.faq{display:grid;gap:8px;max-width:46em}
.faq details{background:var(--navy);border-left:6px solid var(--yellow);border-radius:0 6px 6px 0}
.faq summary{cursor:pointer;padding:12px 16px;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-data);font-size:1.5rem;line-height:1;color:var(--yellow)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 16px 14px;color:var(--ice)}
.faq a{color:var(--white)}

/* site footer */
.sitefoot{margin-top:72px;padding-top:26px;border-top:2px solid var(--blue);font-size:.92rem;color:var(--ice)}
.fcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.8fr);gap:28px}
.flogo{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.5rem;color:var(--white);text-decoration:none}
.flogo svg{width:36px;height:36px}
.fabout p{margin:8px 0 14px}
.cta.small{margin-top:0;font-size:.95rem;padding:8px 14px;box-shadow:3px 3px 0 var(--orange)}
.sitefoot nav b{display:block;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);margin-bottom:8px}
.sitefoot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sitefoot .fsigns{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
.sitefoot a:not(.cta){color:var(--ice)}
.sitefoot nav a{text-decoration:none}
.sitefoot nav a:hover,.sitefoot nav a[aria-current="page"]{color:var(--yellow)}
.fsigns a{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.fsigns svg{width:22px;height:22px;flex:none}
.fdisc{margin:26px 0 0;font-size:.82rem;color:var(--sky)}
@media (max-width:780px){.fcols{grid-template-columns:1fr 1fr}.fabout{grid-column:1/-1}}
@media (max-width:460px){.fcols{grid-template-columns:1fr}.sitefoot .fsigns{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* motion: a few small broadcast touches, all off for people who prefer reduced motion */
@media (prefers-reduced-motion:no-preference){
  .screen{animation:crt-on .8s ease-out both}
  @keyframes crt-on{0%{transform:scale(.9,.008);filter:brightness(4)}45%{transform:scale(1,.008);filter:brightness(3)}100%{transform:none;filter:none}}
  html{scroll-behavior:smooth}
  .map .wx{transform-box:fill-box;transform-origin:center;animation:drift 5s ease-in-out infinite}
  .map .wx:nth-of-type(2n){animation-duration:6.5s;animation-delay:-2s}
  .map .wx:nth-of-type(3n){animation-duration:7.5s;animation-delay:-4s}
  @keyframes drift{0%,100%{transform:none}50%{transform:translate(6px,-7px) scale(1.06)}}
  .map .press{transform-box:fill-box;transform-origin:center;animation:press 9s ease-in-out infinite}
  .map .press+.press{animation-delay:-4.5s}
  @keyframes press{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
  .now svg{animation:bob 4s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-5px) rotate(-3deg)}}
  .card.tune .days div{animation:tile .45s ease-out both}
  .card.tune .days div:nth-child(2){animation-delay:.05s}.card.tune .days div:nth-child(3){animation-delay:.1s}.card.tune .days div:nth-child(4){animation-delay:.15s}.card.tune .days div:nth-child(5){animation-delay:.2s}
  @keyframes tile{from{opacity:0;transform:translateY(8px)}}
  .signs button:hover{box-shadow:0 0 0 2px var(--sky),0 0 14px rgba(93,149,255,.6)}
  .signs button[aria-pressed="true"]{animation:glow 2.4s ease-in-out infinite}
  @keyframes glow{50%{box-shadow:0 0 18px rgba(255,210,58,.75)}}
  .cta,.go,.sb{transition:transform .12s ease,box-shadow .12s ease}
  .cta:hover,.go:hover,.sb:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--orange)}
  .jout.pop svg{animation:popin .5s cubic-bezier(.3,1.6,.5,1)}
  @keyframes popin{from{transform:scale(.4) rotate(-20deg);opacity:0}}
  .jbar i{transition:width .7s cubic-bezier(.2,.9,.3,1)}
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  .feat.reveal:nth-child(2){transition-delay:.1s}.feat.reveal:nth-child(3){transition-delay:.2s}
  .presenter{transform-origin:50% 100%;animation:sway 8s ease-in-out infinite}
  @keyframes sway{50%{transform:rotate(-1.2deg) translateY(-2px)}}
  .card::after,.screen.tune::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 37% 61%,rgba(255,255,255,.35) 0 1px,rgba(8,23,67,.5) 1px 3px)}
  .card.tune::after,.screen.tune::before{animation:snow .38s steps(4) both}
  .card.tune,.screen.tune{animation:roll .38s ease-out}
  @keyframes snow{0%,60%{opacity:1}100%{opacity:0}}
  @keyframes roll{0%{transform:translateY(-6px) skewX(2deg);filter:brightness(1.6) contrast(1.3)}40%{transform:translateY(3px)}100%{transform:none;filter:none}}
  .signs button{transition:transform .12s ease,background-color .12s ease}
  .signs button:hover{transform:translateY(-2px)}
  .signs button:active{transform:translateY(1px)}
}

/* joint forecast preview (left column of the forecast segment) */
.joint{margin-top:18px;background:var(--navy);border:2px solid var(--blue);border-radius:8px;padding:14px;display:grid;gap:12px}
.jhead{display:flex;justify-content:space-between;align-items:baseline}
.jhead b{font-family:var(--f-tv);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.35rem;color:var(--yellow)}
.jhead span{font-family:var(--f-data);font-size:1.05rem;color:var(--sky);text-transform:uppercase}
.jpick{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end}
.jside{display:grid;gap:4px;min-width:0}
.jside small{font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--ice)}
#jYou{display:flex;align-items:center;gap:6px;font-family:var(--f-tv);font-weight:800;text-transform:uppercase;font-size:1.1rem;background:rgba(5,14,44,.45);border-radius:4px;padding:6px 10px;min-height:46px}
#jYou svg{width:30px;height:30px;flex:none}
.jplus{font-family:var(--f-data);font-size:2rem;line-height:46px;color:var(--yellow)}
.jout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--bar);border-radius:6px;padding:12px}
.jout svg{width:64px;height:64px;grid-row:span 2}
.jout b{font-family:var(--f-tv);font-weight:800;font-size:2.4rem;line-height:.9}
.jout small{display:block;font-family:var(--f-tv);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--ice)}
.jbar{height:8px;background:rgba(5,14,44,.5);border-radius:4px;margin-top:6px;overflow:hidden}
.jbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--yellow))}
.jout p{margin:0;grid-column:2}
.jlock{margin:0;font-size:.88rem;color:var(--ice);display:flex;gap:10px;align-items:center}
.jlock svg{flex:none;width:30px;height:30px}
#jCta{justify-self:start}
@media (max-width:780px){.picker{display:contents}.joint{order:2}}
/* keep the picker column about as tall as the card next to it */
.signs{gap:7px}
.signs button{padding:7px 4px}
.signs button svg{width:32px;height:32px}
.picker .hint{margin-top:10px;font-size:1rem;line-height:1.3}
.joint{gap:10px;padding:12px 14px;margin-top:14px}
.jout{padding:10px 12px}
.jout svg{width:54px;height:54px}
.jout b{font-size:2rem}

/* /confirmed: after the email link */
.confirm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;padding-block:40px 10px;max-width:820px}
.confirm img{width:200px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.confirm h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.confirm p{color:var(--ice);margin:0 0 18px}
.confirm .joined{margin-bottom:18px}
@media (max-width:620px){.confirm{grid-template-columns:1fr}.confirm img{width:150px}}