/* ATAPIC event landing page (/events/{slug}).
   Extracted verbatim from the agency reference prototype
   (ATAPIC_Event_1_Landing_page.html) - the inline <style> block cannot
   live in the .cshtml, see the CS8103 notes in CLAUDE.md.
   Everything is scoped under .event-page so it cannot leak into the
   shared landing chrome. */
:root{
  --navy:#0a0e27;
  --navy-2:#171c3a;
  --teal:#00b3c9;
  --teal-dark:#008fa3;
  --teal-soft:#e9fafc;
  --blue-soft:#eff9fb;
  --ink:#0a0e27;
  --muted:#6b7280;
  --line:#e5e7eb;
  --paper:#ffffff;
  --cloud:#f8fafb;
  --success:#13a875;
  --danger:#b42345;
  --shadow:0 20px 55px rgba(10,14,39,.09);
  --radius:24px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:4px}
:focus-visible{outline:3px solid rgba(8,181,200,.55);outline-offset:4px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1,h2,h3{letter-spacing:-.012em;line-height:1.12}
h2{font-size:clamp(34px,4vw,54px)}
h3{font-size:23px}
.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:var(--navy);color:white;padding:10px 16px;border-radius:8px}
.skip:focus{left:10px}
.eyebrow{font-size:12px;letter-spacing:.166em;text-transform:uppercase;font-weight:700;color:var(--navy)}
.section{padding:92px 0}
.section-copy{max-width:720px;margin-bottom:42px}
.section-copy h2{margin:13px 0 18px}
.lead{font-size:20px;line-height:1.75;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:13px 23px;border:1px solid transparent;border-radius:999px;background:var(--teal);color:white;font-weight:700;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,179,201,.2);background:#00a5bb}
.btn.navy{background:var(--navy);color:white}
.btn.navy:hover{background:#151c40;box-shadow:0 12px 26px rgba(8,13,43,.18)}
.btn.ghost{background:transparent;border-color:#cbd4df;color:var(--navy)}
.btn.ghost:hover{background:white}
.btn.full{width:100%;border-radius:12px}
.arrow{font-size:21px;line-height:1}

/* Header */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(227,232,239,.9);background:rgba(255,255,255,.94);backdrop-filter:blur(16px)}
.nav{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
/* The reference prototype drew the ATAPIC mark as a CSS conic-gradient ring
   because it had no access to the asset. The real logo is
   wwwroot/atapiclogoicon.png, the same file the landing nav and footer use,
   so the brand is one asset everywhere rather than an approximation that
   drifts. Sizing is unchanged, so the footer's smaller .mark still applies. */
.mark{width:30px;height:30px;border-radius:50%;object-fit:contain;flex:none}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a:not(.btn){font-size:14px;color:#6b7280;text-decoration:none;font-weight:400}
.nav-links a:not(.btn):hover{color:var(--navy)}
.nav-links .btn{min-height:42px;padding:9px 20px;font-size:14px;font-weight:600}

/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 50% -8%,#dff7fa 0,rgba(233,250,252,.72) 24%,white 60%);padding:74px 0 78px}
.hero:before{content:'';position:absolute;width:600px;height:600px;border:1px solid rgba(8,181,200,.16);border-radius:50%;right:-330px;top:-345px;box-shadow:0 0 0 70px rgba(8,181,200,.025),0 0 0 140px rgba(8,181,200,.018)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:76px;align-items:center}
.event-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid #dfe6e9;border-radius:999px;background:rgba(255,255,255,.86);font-size:12px;font-weight:700;letter-spacing:.166em;text-transform:uppercase;color:var(--navy)}
.event-kicker i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(8,181,200,.12)}
.hero h1{font-size:clamp(48px,5.6vw,72px);color:var(--navy);margin:23px 0 21px;max-width:760px}
.hero h1 span{color:var(--teal-dark)}
.hero-sub{font-size:clamp(20px,2vw,26px);line-height:1.48;font-weight:600;max-width:700px;color:#374159;letter-spacing:-.025em}
.hero-body{max-width:680px;margin-top:18px;color:var(--muted);font-size:18px}
.meta{display:flex;flex-wrap:wrap;gap:14px 23px;margin-top:27px;padding-top:25px;border-top:1px solid #dce7eb;font-size:15px;font-weight:700;color:var(--navy)}
.meta span{display:flex;align-items:center;gap:9px}
.meta svg{width:19px;height:19px;color:var(--teal-dark)}
.countdown{display:flex;gap:9px;margin-top:25px;align-items:center;flex-wrap:wrap}
.count-box{min-width:70px;padding:10px 12px;background:white;border:1px solid var(--line);border-radius:12px;text-align:center;box-shadow:0 8px 26px rgba(8,13,43,.04)}
.count-box strong{display:block;font-size:24px;line-height:1.15;color:var(--navy)}
.count-box small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.count-label{font-size:13px;color:var(--muted);font-weight:600;margin-left:5px}

/* Registration flow */
.form-card{position:relative;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);scroll-margin-top:110px}
.form-card:before{content:'';position:absolute;inset:-1px auto -1px -1px;width:7px;background:linear-gradient(var(--teal),#62d8e4);border-radius:26px 0 0 26px}
.form-card h2{font-size:31px;margin-bottom:8px}
.form-intro{font-size:15px;color:var(--muted);line-height:1.65}
.progress{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:21px 0 9px}
.progress span{height:5px;border-radius:99px;background:#e8edf2}
.progress span.active{background:var(--teal)}
.step-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:17px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--muted)}
.step-label strong{color:var(--teal-dark)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.full{grid-column:1/-1}
.field label,.question-title{display:block;font-size:14px;line-height:1.45;font-weight:700;margin-bottom:7px;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;min-height:46px;border:1px solid #cfd7e1;border-radius:9px;padding:10px 12px;color:var(--ink);background:white}
.field textarea{min-height:86px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-dark);outline:3px solid rgba(8,181,200,.12)}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:19px}
.form-actions .btn{border-radius:11px;flex:1}
.back{border:0;background:none;color:var(--muted);font-weight:700;padding:10px 4px}
.helper{font-size:12px;line-height:1.6;color:var(--muted);margin-top:12px}
.form-error{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--danger);background:#fff2f5;color:#7f1732;font-size:13px}
.choice-grid{display:grid;gap:8px;margin-bottom:17px}
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px 12px;cursor:pointer;font-size:14px;line-height:1.45}
.choice:hover{border-color:#9cdfe6}
.choice:has(input:checked){border-color:var(--teal-dark);background:var(--teal-soft);box-shadow:0 0 0 1px var(--teal-dark)}
.choice input{margin-top:2px;accent-color:var(--teal-dark)}
.survey-scroll{max-height:440px;overflow:auto;padding-right:8px;scrollbar-color:#b8dce1 transparent}
.survey-block{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.survey-block:last-child{border:0;margin-bottom:0}
.success-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-dark);font-size:28px;font-weight:800;margin-bottom:16px}
.confirmation h3{font-size:30px;margin-bottom:10px}
.confirmation p{font-size:15px;color:var(--muted)}
.event-recap{margin:18px 0;padding:15px;border-radius:12px;background:var(--cloud);border:1px solid var(--line);font-size:14px}
.event-recap strong{display:block;color:var(--navy);font-size:15px}
.confirm-actions{display:grid;gap:10px;margin-top:15px}
.book-panel{margin-top:17px;padding:17px;border-radius:14px;background:linear-gradient(135deg,var(--navy),#17204a);color:white}
.book-panel .eyebrow{color:#6ce0eb}
.book-panel h3{font-size:22px;margin:7px 0 8px}
.book-panel p{color:#d8deea;font-size:14px}
.book-panel .btn{margin-top:14px;width:100%;border-radius:10px}

/* Content */
.audience-strip{border-block:1px solid var(--line);padding:23px 0;background:#fbfcfd}
.audience-flex{display:flex;align-items:center;justify-content:space-between;gap:30px}
.audience-flex .eyebrow{flex:none}
.audience-flex p{color:var(--muted);font-size:15px;max-width:820px}
.problem{background:var(--navy);color:white;position:relative;overflow:hidden}
.problem:after{content:'';position:absolute;width:540px;height:540px;border:75px solid rgba(8,181,200,.1);border-radius:50%;right:-330px;bottom:-350px}
.problem .section-copy{position:relative;z-index:1}
.problem .eyebrow{color:#63dce7}
.problem .lead{color:#cdd4e3}
.problem-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.problem-card{padding:25px 22px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.055)}
.problem-card .num{font-size:13px;color:#64dce7;font-weight:800;margin-bottom:25px}
.problem-card h3{font-size:21px;margin-bottom:11px}
.problem-card p{font-size:15px;color:#bac3d4;line-height:1.7}
.problem-card:hover{transform:translateY(-3px);border-color:rgba(99,220,231,.55);transition:.18s ease}
.outcomes-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:80px;align-items:start}
.outcomes-copy h2{margin:13px 0 20px}
.outcomes-copy .lead{font-size:19px}
.takeaways{display:grid;gap:13px}
.takeaway{display:grid;grid-template-columns:46px 1fr;gap:17px;padding:22px;border:1px solid var(--line);border-radius:17px;background:white;box-shadow:0 8px 28px rgba(8,13,43,.035)}
.takeaway .icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-dark);font-weight:800}
.takeaway h3{font-size:20px;margin-bottom:7px}
.takeaway p{font-size:15px;line-height:1.7;color:var(--muted)}
.diagnostic{background:linear-gradient(120deg,#edfafc 0,#fff 48%,#f4f8fb 100%);border-block:1px solid #e8eff3}
.map{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:stretch}
.map-tabs{display:grid;gap:8px}
.map-tab{border:1px solid var(--line);background:white;border-radius:13px;padding:15px;text-align:left;color:var(--navy);font-weight:700}
.map-tab span{display:block;color:var(--muted);font-size:12px;font-weight:500;margin-top:3px}
.map-tab.active{background:var(--navy);color:white;border-color:var(--navy)}
.map-tab.active span{color:#bac4d6}
.map-panel{border:1px solid var(--line);border-radius:22px;background:white;padding:34px;min-height:310px;box-shadow:0 15px 45px rgba(8,13,43,.05)}
.map-panel .eyebrow{margin-bottom:12px}
.map-panel h3{font-size:31px;margin-bottom:16px}
.map-panel>p{color:var(--muted);max-width:640px}
.map-signal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:23px}
.signal{padding:16px;border-radius:12px;background:var(--cloud);font-size:14px;color:var(--muted)}
.signal b{display:block;color:var(--navy);margin-bottom:5px}
.agenda{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;align-items:start}
.agenda-copy{position:sticky;top:115px}
.agenda-copy h2{margin:13px 0 20px}
.agenda-list{list-style:none;margin:0;padding:0}
.agenda-list li{position:relative;padding:0 0 30px 75px;min-height:104px}
.agenda-list li:not(:last-child):before{content:'';position:absolute;left:24px;top:50px;bottom:6px;border-left:1px solid #c9dde1}
.agenda-time{position:absolute;left:0;top:0;width:50px;height:50px;border:1px solid var(--teal-dark);border-radius:50%;display:grid;place-items:center;color:var(--teal-dark);font-size:12px;font-weight:800;background:white}
.agenda-list h3{font-size:21px;margin-bottom:8px}
.agenda-list p{color:var(--muted);font-size:15px}
.hosts{background:var(--cloud)}
.host-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.host{border:1px solid var(--line);border-radius:20px;background:white;padding:28px}
.host-top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.initials{width:58px;height:58px;border-radius:16px;background:var(--navy);color:white;display:grid;place-items:center;font-weight:800;font-size:18px}
.host:nth-child(2) .initials{background:var(--teal);color:var(--navy)}
.host h3{font-size:23px}
.host .role{font-size:13px;color:var(--teal-dark);font-weight:700;margin-top:3px}
.host>p{color:var(--muted);font-size:15px}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fit-card{padding:29px;border-radius:20px;border:1px solid var(--line)}
.fit-card.yes{background:var(--teal-soft);border-color:#c5edf1}
.fit-card h3{font-size:25px;margin-bottom:16px}
.fit-card ul{margin:0;padding-left:20px;color:var(--muted)}
.fit-card li{margin:10px 0}
.faq{max-width:900px;margin-inline:auto}
.faq .section-copy{text-align:center;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;gap:20px;padding:22px 4px;cursor:pointer;list-style:none;font-weight:700;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';margin-left:auto;color:var(--teal-dark);font-size:24px}
details[open] summary:after{content:'−'}
details p{padding:0 45px 23px 4px;color:var(--muted);font-size:15px}
.final-cta{background:var(--navy);color:white;position:relative;overflow:hidden}
.final-cta:after{content:'';position:absolute;width:560px;height:560px;border-radius:50%;border:95px solid var(--teal);right:-380px;top:-190px;opacity:.92}
.cta-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}
.final-cta .eyebrow{color:#65e0eb}
.final-cta h2{margin:13px 0 18px;max-width:680px}
.final-cta p{color:#cad2e1;max-width:620px}
.cta-action{border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:28px;background:rgba(255,255,255,.055)}
.cta-action strong{display:block;font-size:18px;margin-bottom:7px}
.cta-action p{font-size:14px;margin-bottom:18px}
footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.footer-flex{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-flex .brand{font-size:18px}
.footer-flex .mark{width:23px;height:23px}
.mobile-cta{display:none;position:fixed;z-index:35;left:12px;right:12px;bottom:12px;box-shadow:0 12px 40px rgba(8,13,43,.2)}
.toast{position:fixed;z-index:90;left:50%;bottom:28px;transform:translateX(-50%);max-width:min(560px,calc(100% - 36px));padding:13px 18px;background:var(--navy);color:white;border-radius:11px;box-shadow:0 15px 45px rgba(8,13,43,.3);font-size:14px;text-align:center}
.toast:empty{display:none}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .hero-grid,.outcomes-grid,.agenda,.cta-grid{grid-template-columns:1fr;gap:45px}
  .hero{padding-top:52px}.hero-copy{max-width:760px}.form-card{max-width:680px}
  .problem-grid{grid-template-columns:1fr 1fr}.map{grid-template-columns:1fr}.map-tabs{grid-template-columns:1fr 1fr}.agenda-copy{position:static}
  .nav-links a:not(.btn){display:none}
}
@media(max-width:700px){
  body{font-size:16px}.shell{width:min(100% - 30px,1180px)}.section{padding:70px 0}
  .site-header .nav{min-height:70px}.nav-links{gap:0}.nav-links .btn{display:none}
  .hero{padding:44px 0 52px}.hero h1{font-size:45px}.hero-sub{font-size:20px}.hero-grid{gap:36px}
  .form-card{padding:25px 21px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.survey-scroll{max-height:none;overflow:visible;padding:0}
  .audience-flex{display:block}.audience-flex .eyebrow{margin-bottom:8px}.problem-grid,.host-grid,.fit-grid{grid-template-columns:1fr}
  .map-tabs{display:flex;overflow:auto;padding-bottom:6px}.map-tab{min-width:220px}.map-panel{padding:25px 21px}.map-signal{grid-template-columns:1fr}
  .agenda-list li{padding-left:66px}.final-cta:after{opacity:.25}.mobile-cta{display:flex}.footer-flex{padding-bottom:72px}
  .countdown{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
  

/* Was an inline style attribute on the "Request your seat" button in the
   reference prototype; moved here so the view stays free of inline styles. */
.outcomes-cta{margin-top:27px}