/* dannyshannon.co. Palette, type and dark-blue theme copied from the sobersquad.co homepage
   (same tokens and overrides), so the two sites match exactly. */

/* self hosted fonts (latin subsets from @fontsource, SIL Open Font License 1.1) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/bricolage-600.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/bricolage-800.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/manrope-700.woff2") format("woff2")}

:root{
  --cream:#F9F9F9; --sand:#E8F1F9; --white:#FFFFFF;
  --teal:#0C2B45; --teal-7:#1474B8; --teal-t:#E8F1F9;
  --body:#E6F0FA; --quiet:#B9CDE0; --line:#2C5A82;
  --sun:#529C00; --coral:#1474B8; --mint:#A8D8F8; --lilac:#B8DDF5;
  --on-teal:#CFE3F5;
  --field-line:#7A9CBC;
  --placeholder:#6B8AA8;
  --error:#B42318; --alert-bg:#FFF1EE;
  --ink-soft:#3A5068;   /* secondary text on light sections */
  --head:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --page:#0C4068;
  --r-card:28px; --r-field:14px;
  --shadow: 0 1px 2px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--page)}
body{background:var(--page);color:var(--body);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
b,strong{font-weight:700}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
h1,h2,h3,h4{font-family:var(--head);color:#FFFFFF;overflow-wrap:break-word}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 16px;border-radius:999px;background:#FFFFFF;color:var(--teal);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
.sand :focus-visible,.light :focus-visible,.card :focus-visible,.form-card :focus-visible{outline-color:var(--teal-7)}

/* the colourful motif: a five colour ribbon */
.ribbon{display:flex;height:8px;border-radius:999px;overflow:hidden}
.ribbon i{flex:1}
.ribbon i:nth-child(1){background:var(--teal-7)}
.ribbon i:nth-child(2){background:var(--sun)}
.ribbon i:nth-child(3){background:var(--coral)}
.ribbon i:nth-child(4){background:var(--mint)}
.ribbon i:nth-child(5){background:var(--lilac)}

/* pill label above each heading, with a coloured dot */
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:#FFFFFF;border:1px solid var(--line);font:700 13px/1 var(--sans);letter-spacing:.04em;color:#0C2B45}
.pill::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot,var(--sun))}
h2{font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.02em;margin:18px 0 18px}
.intro{max-width:640px;color:var(--body);font-size:18px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;border:2px solid transparent;font:700 16px/1 var(--sans);text-decoration:none;text-align:center;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:#1474B8;color:#FFFFFF}
.btn-teal:hover{background:#0f5f98}
.btn-sun{background:var(--sun);color:#FFFFFF}
.btn-line{border-color:#FFFFFF;color:#FFFFFF;background:transparent}
.btn-line:hover{background:#FFFFFF;color:#0C2B45}
.btn-sm{padding:11px 18px;font-size:14px}
/* the one main action on the site: join the free community */
.btn-join{background:var(--sun);color:#FFFFFF;padding:20px 34px;font-size:19px;box-shadow:0 0 0 6px rgba(82,156,0,.28)}
.btn-join:hover{background:#478800}
.btn-join .arrow{font-size:22px;line-height:0}
.light .btn-line,.sand .btn-line{border-color:#0C2B45;color:#0C2B45}
.light .btn-line:hover,.sand .btn-line:hover{background:#0C2B45;color:#FFFFFF}

/* header */
.site-top{padding:20px 0}
.site-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 24px/1 var(--head);letter-spacing:-.01em;color:#FFFFFF}
.brand .wm span{color:var(--mint)}
.site-top nav{display:flex;align-items:center;gap:22px;font:600 15px/1 var(--sans)}
.site-top nav a{text-decoration:none;color:#FFFFFF}
.site-top nav a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:3px;text-underline-offset:6px}

/* hero: then and now, photos first */
.hero{padding:24px 0 96px;text-align:center}
.duo{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:840px;margin:28px auto 0}
.duo figure{min-width:0;margin:0}
.duo .tag{display:inline-block;margin-bottom:14px;padding:9px 18px;border-radius:999px;font:800 clamp(15px,1.8vw,19px)/1.2 var(--head);color:#0C2B45}
.duo .then .tag{background:var(--sand);border:1px solid var(--line)}
.duo .now .tag{background:var(--sun);color:#FFFFFF}
.duo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:36px;background:var(--sand)}
.duo .then img{border-bottom-right-radius:12px}
.duo .now img{border-bottom-left-radius:12px;box-shadow:0 0 0 6px var(--sun)}
.duo figcaption{margin-top:14px;font:700 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.duo .now figcaption{color:var(--mint)}
.badge{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(110px,17vw,158px);aspect-ratio:1;border-radius:50%;background:var(--teal);color:var(--cream);box-shadow:0 0 0 7px var(--cream),var(--shadow);z-index:2}
.badge .b-top{font:700 clamp(10px,1.2vw,12px)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.badge strong{font:800 clamp(34px,5vw,54px)/1 var(--head);color:var(--sun);margin:4px 0 2px}
.badge .b-bot{font:700 clamp(11px,1.3vw,14px)/1.2 var(--sans)}
.hero h1{margin:44px auto 18px;max-width:880px;font-weight:800;font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.03em}
.hero h1 .hl{display:inline-block;background:linear-gradient(transparent 62%,var(--sun) 62%,var(--sun) 92%,transparent 92%);padding:0 4px}
.hero .lead{max-width:680px;margin:0 auto 32px;font-size:clamp(17px,1.5vw,20px);color:var(--body)}
.cta{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.cta-note{margin-top:16px;font:600 15px/1.5 var(--sans);color:var(--mint)}

section.block{padding:104px 0}
.sand{background:var(--sand)}
.sand h2,.sand h3,.light h2,.light h3{color:#0C2B45}
.sand .intro,.sand p,.light .intro,.light p{color:var(--ink-soft)}
.head-center{max-width:780px;margin:0 auto;text-align:center}
.head-center .intro{margin:0 auto}

/* community: how we support each other */
.does{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
.does li{min-width:0;padding:30px 26px;border-radius:var(--r-card);background:#FFFFFF;box-shadow:var(--shadow);border-top:8px solid var(--accent)}
.does .ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:18px;background:var(--accent);color:#0C2B45}
.does .ico svg{width:28px;height:28px}
.does h3{font-weight:800;font-size:23px;line-height:1.15;margin-bottom:10px;color:#0C2B45}
.does p{font-size:16px;color:var(--ink-soft)}
.join-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;margin-top:44px;padding:40px;border-radius:var(--r-card);background:var(--page);box-shadow:var(--shadow)}
.join-panel h3{font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1.15;color:#FFFFFF}
.steps{list-style:none;display:grid;gap:14px;margin-top:20px;counter-reset:step}
.steps li{position:relative;padding-left:52px;color:var(--body);font-size:17px;line-height:1.5}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mint);color:#0C2B45;font:800 17px/1 var(--head)}
.steps b{color:#FFFFFF}
.join-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.join-side .goal,.join-side .cta-note{font:600 16px/1.5 var(--sans);color:var(--mint)}
.join-side .cta-note{margin-top:0;font-size:15px}
.join-side .btn-join{width:100%}
.also{margin-top:26px;font-size:15px;color:var(--ink-soft);text-align:center}
.also a{color:#1474B8;font-weight:700;text-underline-offset:3px}

/* groups */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
.card{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-card);background:#FFFFFF;box-shadow:var(--shadow);overflow:hidden;color:#0C2B45}
.card-top{padding:26px 30px 22px;background:var(--band);color:#0C2B45}
.card-top .kind{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.75);font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#0C2B45}
.card-top h3{margin-top:14px;font-weight:800;font-size:32px;line-height:1.1;color:#0C2B45}
.card.c1 .card-top{--band:var(--mint)}
.card.c2 .card-top{background:linear-gradient(110deg,var(--lilac),var(--mint))}
.card-body{display:flex;flex-direction:column;gap:16px;flex:1;padding:26px 30px 30px}
.card-body p{font-size:16px;color:var(--ink-soft)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 18px;border-radius:16px;background:var(--sand)}
.price b{font:800 26px/1 var(--head);color:#0C2B45}
.price span{font-size:15px;color:var(--ink-soft)}
.facts{list-style:none;display:grid;gap:8px}
.facts li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:#0C2B45}
.facts li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--sun)}
.note{padding:14px 18px;border-left:4px solid #1474B8;border-radius:0 12px 12px 0;background:var(--sand);font-size:15px;line-height:1.5;color:#0C2B45}
.card-body .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.groups-foot{margin-top:28px;text-align:center;color:var(--body);font-size:16px}
.groups-foot a{color:var(--mint);font-weight:700;text-underline-offset:3px}

/* stats band */
.stats{background:var(--sand);padding:64px 0;border-radius:44px;margin:0 12px}
.stats h2{color:#0C2B45;font-size:clamp(26px,2.8vw,36px);margin:0 0 34px;text-align:center}
.stat-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat-list li{min-width:0;padding:26px 22px;border-radius:24px;background:rgba(255,255,255,.06);text-align:center}
.stat-list b{display:block;font:800 clamp(52px,6vw,80px)/1 var(--head);letter-spacing:-.03em;color:#0C2B45}
.stat-list b small{display:block;margin-bottom:6px;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.stat-list li:nth-child(1) b{color:#529C00}
.stat-list li:nth-child(2) b{color:#1474B8}
.stat-list li:nth-child(3) b{color:#1474B8}
.stat-list li:nth-child(4) b{color:#0C2B45}
.stat-list span{display:block;margin-top:12px;color:var(--ink-soft);font-size:16px;line-height:1.45}

/* story and sobriety time */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.story-body h2{margin-top:18px}
.story-body p{margin-bottom:18px}
.story-body .big{font:800 clamp(22px,2.2vw,28px)/1.3 var(--head);color:#FFFFFF}
.sober-card{padding:34px 32px;border-radius:var(--r-card);background:#FFFFFF;color:#0C2B45;box-shadow:0 0 0 6px var(--sun),var(--shadow);text-align:center}
.sober-card .since{font:700 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.sober-card .time{margin:14px 0 10px;font:800 clamp(28px,3.2vw,40px)/1.15 var(--head);letter-spacing:-.01em;color:#0C2B45}
.sober-card .time span{color:#529C00}
.sober-card .days{font-size:16px;color:var(--ink-soft)}
.sober-card .days b{color:#1474B8}
.quote-card{position:relative;margin-top:40px;padding:44px 38px 34px;border-radius:var(--r-card);background:#E8F1F9}
.quote-card::before{content:"\201C";position:absolute;top:-34px;left:26px;font:800 120px/1 var(--head);color:var(--coral)}
.quote-card blockquote p{font:800 clamp(26px,2.6vw,34px)/1.2 var(--head);letter-spacing:-.01em;color:#0C2B45}
.quote-card cite{display:block;margin-top:16px;font:700 14px/1.4 var(--sans);font-style:normal;color:var(--teal-7)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips li{padding:9px 16px;border-radius:999px;background:#FFFFFF;border:1px solid var(--line);font:600 14px/1.3 var(--sans);color:#0C2B45}

/* Recovery and Beyond */
.rab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.rab-photo{margin:0}
.rab-photo img{width:100%;height:auto;aspect-ratio:886/494;object-fit:cover;border-radius:var(--r-card);box-shadow:0 0 0 6px var(--mint),var(--shadow)}
.rab-photo figcaption{margin-top:16px;font-size:14px;color:var(--ink-soft)}
.rab-body .lede{font:600 19px/1.6 var(--sans);color:#0C2B45}
.rab-body .facts{margin:22px 0 28px}
.rab-body .cta{justify-content:flex-start}

/* media */
.player{position:relative;max-width:1000px;margin:40px auto 0;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#0A3658;box-shadow:0 0 0 6px var(--sun),var(--shadow)}
.player:focus-within{box-shadow:0 0 0 6px var(--sun),0 0 0 10px var(--teal),var(--shadow)}
.player-start{position:absolute;inset:0;display:block;color:var(--cream);text-decoration:none}
.player-start:focus-visible{outline:none}
.player-start img{width:100%;height:100%;object-fit:cover}
.player-start::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.15) 55%,rgba(0,0,0,0))}
.player-cap{position:absolute;left:30px;right:30px;bottom:28px;z-index:1;display:flex;align-items:center;gap:22px;text-align:left}
.play{flex:none;display:grid;place-items:center;width:clamp(64px,8vw,92px);aspect-ratio:1;border-radius:50%;background:var(--sun);color:var(--teal);box-shadow:0 0 0 9px rgba(255,205,77,.35);transition:transform .15s ease}
.player-start:hover .play,.player-start:focus-visible .play{transform:scale(1.07)}
.play svg{width:38%;height:38%;margin-left:7%}
.cap-text{min-width:0}
.player-cap small{display:inline-block;margin-bottom:10px;padding:6px 12px;border-radius:999px;background:var(--sun);font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#FFFFFF}
.player-cap b{display:block;font:800 clamp(20px,2.6vw,34px)/1.1 var(--head);letter-spacing:-.01em;color:var(--cream)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-note{max-width:760px;margin:22px auto 0;text-align:center;font-size:15px;color:var(--quiet)}
.player-note a{color:var(--mint);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
.reel-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:64px}
.reel{margin:0;min-width:0}
.reel-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:#0A3658;box-shadow:0 0 0 6px var(--mint),var(--shadow)}
.reel-frame iframe{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .4s ease}
.reel-frame iframe.is-ready{opacity:1;pointer-events:auto}
.reel-link{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#FFFFFF;text-decoration:none;font:700 16px/1.2 var(--sans)}
.reel-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-link::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.05) 60%)}
.reel-link .play,.reel-link span{position:relative;z-index:1}
.reel-link span:not(.play){text-shadow:0 1px 3px rgba(0,0,0,.6)}
.reel-link .play{width:72px}
.reel-link:hover .play,.reel-link:focus-visible .play{transform:scale(1.07)}
.reel figcaption{margin-top:20px}
.reel figcaption b{display:block;font:800 24px/1.2 var(--head);color:#FFFFFF}
.reel figcaption span{display:block;margin:6px 0 8px;font-size:16px;color:var(--quiet)}
.reel figcaption a{color:var(--mint);font-weight:700;font-size:15px;text-decoration-thickness:2px;text-underline-offset:3px}
.podcast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:64px;padding:32px 36px;border-radius:var(--r-card);background:linear-gradient(110deg,var(--lilac),var(--mint))}
.podcast h3{font-weight:800;font-size:28px;line-height:1.15;color:#0C2B45}
.podcast p{max-width:52ch;margin-top:6px;font-size:16px;color:#0C2B45}
.podcast .links{display:flex;flex-wrap:wrap;gap:10px}
.podcast .btn-line{border-color:#0C2B45;color:#0C2B45}
.podcast .btn-line:hover{background:#0C2B45;color:#FFFFFF}
.podcast .btn-teal{background:#0C2B45}

/* follow chips */
.follow{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.follow a{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:999px;background:#FFFFFF;border:1px solid var(--line);text-decoration:none;color:#0C2B45;transition:transform .15s ease,border-color .15s ease}
.follow a:hover{transform:translateY(-2px);border-color:var(--teal-7)}
.follow .ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--c,var(--teal-t));color:var(--teal)}
.follow .ic svg{width:20px;height:20px}
.follow .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.follow .tx b{font:800 15px/1.2 var(--head);color:#0C2B45}
.follow .tx span{font-size:14px;color:var(--ink-soft);overflow-wrap:anywhere}

/* contact */
.light{background:#E8F1F9}
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.contact-intro .join-line{margin-top:22px;padding:22px 24px;border-radius:20px;background:#FFFFFF;color:#0C2B45;box-shadow:var(--shadow)}
.contact-intro .join-line p{color:#0C2B45;margin-bottom:14px;font-weight:600}
.crisis{margin-top:22px;padding:18px 20px;border-radius:16px;border:1.5px solid var(--field-line);font-size:15px;line-height:1.55}
.light .crisis p{color:#0C2B45}
.crisis a{color:#1474B8;font-weight:700;white-space:nowrap}
.form-card{position:relative;background:#FFFFFF;border-radius:var(--r-card);padding:34px;color:#0C2B45;box-shadow:var(--shadow)}
.form-card h3{font-weight:800;font-size:24px;line-height:1.2;margin-bottom:22px;color:#0C2B45}
.form-noscript{margin-bottom:22px;padding:14px 16px;border-radius:var(--r-field);background:var(--alert-bg);color:#0C2B45;font-size:15px}
.field{display:grid;gap:8px;margin:0 0 20px;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field > label{font:700 15px/1.4 var(--sans);color:#0C2B45}
.req{margin-left:6px;padding:3px 8px;border-radius:999px;background:var(--teal-t);font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-7);white-space:nowrap}
.opt{font-weight:400;color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1.5px solid var(--field-line);border-radius:var(--r-field);background:#FFFFFF;color:#0C2B45;font:400 16px/1.4 var(--sans)}
.field textarea{display:block;min-height:150px;resize:vertical}
.field ::placeholder{color:var(--placeholder);opacity:1}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--teal-7);outline-offset:2px;border-color:var(--teal);border-radius:var(--r-field)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--error);border-width:2px}
.field-error{font:600 14px/1.45 var(--sans);color:var(--error)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer}
.select-wrap::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.form-legal{font-size:14px;color:var(--ink-soft)}
.form-legal a,.form-card a{color:#1474B8;font-weight:700;text-underline-offset:2px}
.form-alert{margin-top:18px;padding:14px 16px;border:1.5px solid var(--error);border-radius:var(--r-field);background:var(--alert-bg);color:#0C2B45;font:600 15px/1.5 var(--sans)}
.form-alert:empty{display:none}
.form-actions{display:flex;justify-content:flex-end;margin-top:20px}
.form-actions .btn{background:#0C2B45;color:#FFFFFF}
.form-actions .btn:hover{background:#1474B8}
.form-actions .btn[aria-disabled="true"]{opacity:.75;cursor:progress;transform:none}
.form-done{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 8px 12px;text-align:center}
.form-done .check{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--sun);color:#FFFFFF}
.form-done h4{font-weight:800;font-size:28px;line-height:1.2;color:#0C2B45}
.form-done p{max-width:40ch;color:var(--ink-soft)}
/* spam trap: kept off screen, never focusable with the keyboard */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* plain pages (privacy, 404) */
.page{padding:48px 0 104px}
.narrow{width:min(760px,100% - 40px);margin-inline:auto}
.page h1{margin:18px 0 18px;font-weight:800;font-size:clamp(36px,5vw,58px);line-height:1.05;letter-spacing:-.02em}
.page h2{margin:44px 0 12px;font-size:clamp(24px,2.6vw,30px)}
.page h3{margin:26px 0 8px;font-size:20px}
.page p,.page li{margin-bottom:12px}
.page ul{padding-left:22px}
.page a{color:var(--mint);font-weight:700;text-underline-offset:3px}
.page .updated{font-size:14px;color:var(--quiet)}

/* footer */
.site-foot{background:#072A47;color:var(--on-teal);font-size:15px}
.site-foot .ribbon{height:10px;border-radius:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:64px 0 40px}
.foot-grid .brand{color:#FFFFFF}
.foot-grid p{margin-top:16px;max-width:36ch;line-height:1.6}
.foot-grid h2{margin:0 0 14px;font-size:16px;font-weight:800;letter-spacing:.02em;color:var(--sun)}
.foot-grid ul{list-style:none;display:grid;gap:8px}
.foot-grid a{color:#FFFFFF;text-decoration:none}
.foot-grid a:hover{text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:4px}
.foot-legal{display:grid;gap:8px;padding:24px 0 40px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;line-height:1.6}

@media (max-width:1100px){
  .site-top nav a.opt-nav{display:none}
}
@media (max-width:1000px){
  .does{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .site-top nav a:not(.btn){display:none}
  .story,.rab,.contact{grid-template-columns:1fr;gap:48px}
  .join-panel{grid-template-columns:1fr;padding:32px 28px;gap:28px}
  .cards,.reel-list{grid-template-columns:1fr}
  .stat-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  section.block{padding:80px 0}
  .form-card{padding:28px}
}
@media (max-width:600px){
  .site-top nav .btn{padding:10px 14px;font-size:13px}
  .brand{font-size:21px}
  .hero{padding-bottom:72px}
  .duo{gap:12px}
  .duo img{border-radius:24px}
  .duo .now img{box-shadow:0 0 0 4px var(--sun)}
  .duo .tag{padding:7px 12px}
  .badge{top:58%;box-shadow:0 0 0 5px var(--cream),var(--shadow)}
  .btn-join{width:100%;padding:19px 22px;font-size:18px}
  .player{margin-top:30px;border-radius:20px;box-shadow:0 0 0 4px var(--sun),var(--shadow)}
  .player:focus-within{box-shadow:0 0 0 4px var(--sun),0 0 0 8px var(--teal),var(--shadow)}
  .player-cap{left:16px;right:16px;bottom:14px;gap:14px}
  .play{width:52px;box-shadow:0 0 0 5px rgba(255,205,77,.35)}
  .player-cap small{margin-bottom:6px;padding:5px 10px;font-size:11px}
  .reel-frame,.rab-photo img{border-radius:20px;box-shadow:0 0 0 4px var(--mint),var(--shadow)}
  .stats{margin:0;border-radius:32px;padding:52px 0}
  .stat-list{gap:12px}
  .stat-list li{padding:20px 12px}
  .does{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .form-card{padding:24px 18px}
  .field-row{grid-template-columns:1fr}
  .quote-card{padding:40px 24px 26px}
  .sober-card{padding:28px 22px;box-shadow:0 0 0 4px var(--sun),var(--shadow)}
  .podcast{padding:28px 24px}
}
@media (max-width:420px){
  .follow a{width:100%}
  .btn-join{padding:18px 16px;font-size:17px}
  .btn-join .arrow{display:none}
}
@media (max-width:360px){
  .wrap{width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}