/* Webinar pages. Same tokens as the rest of the site: white page, near black ink,
   one yellow, Archivo Black for display. Nothing here invents a new look. */
.web-shell{width:min(1080px,100% - 3rem);margin-inline:auto}
.web-header{border-bottom:1px solid var(--foreground);background:var(--background)}
.web-header .web-shell{display:flex;align-items:center;min-height:4.5rem}
.web-header .home-wordmark{font-size:1.15rem}

.web-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--foreground)}
.web-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,oklch(8% 0 0 / .05) 1px,transparent 1px),linear-gradient(to bottom,oklch(8% 0 0 / .05) 1px,transparent 1px);background-size:46px 46px}
.web-hero>.web-shell{position:relative;z-index:1;padding-block:3rem 3.5rem}
.web-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);align-items:start;gap:clamp(1.75rem,4vw,3.25rem)}

.web-title{font-family:var(--display);font-size:clamp(2.05rem,3.7vw,3.15rem);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.web-sub{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.2;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--foreground);max-width:36rem;text-wrap:pretty}

.web-card{border:1px solid var(--foreground);background:var(--card);padding:1.5rem;box-shadow:6px 6px 0 var(--accent)}
.web-schedule{display:grid;gap:.45rem;border:1px dashed var(--border);background:var(--secondary);padding:.9rem 1rem;font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
/* A line still holding an unfilled merge tag is covered by AEvent's own helper, which fades it out.
   Taking it out of the flow as well keeps the date lines one line tall while the fields are empty,
   instead of a tall empty box. Neither the date box on the confirmation page nor the date lines in a
   session tile are drawn when every line in them is still waiting. */
.web-schedule > .a8-pending,
.web-session-when > .a8-pending{display:none}
.web-schedule:not(:has(> span:not(.a8-pending):not([hidden]))){display:none}
.web-session-when:not(:has(> span:not(.a8-pending))){display:none}
.web-form{display:grid;gap:.9rem;margin-top:1.1rem}
.web-form .btn{margin-top:.15rem}

.web-learn{padding-block:2.75rem 0}
.web-learn h2{font-family:var(--display);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.1;letter-spacing:-.01em}
.web-list{list-style:none;display:grid;gap:1.15rem;margin-top:1.6rem;max-width:50rem}
.web-list li{position:relative;padding-left:1.75rem;font-size:1.02rem;line-height:1.55}
.web-list li::before{content:"";position:absolute;left:0;top:.55rem;width:.62rem;height:.62rem;background:var(--accent);border:1px solid var(--foreground)}
.web-more{margin-top:1.4rem;font-family:var(--display);font-size:1.15rem;letter-spacing:-.01em}

.site-footer .web-shell{padding-block:1.5rem}

/* Confirmation. The card is the whole page: AEvent's script fills in the demo details, the
   countdown, the room address and the calendar entry, so there is nothing underneath it. */
.web-confirm{padding-block:2.5rem}
.web-confirm .web-card{max-width:620px;padding:1.9rem}
.web-mark{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-bottom:1.25rem;background:var(--accent);color:var(--accent-foreground);border:1px solid var(--foreground)}
.web-confirm h1{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;letter-spacing:-.02em}
.web-confirm .web-schedule{margin-top:1.5rem;font-size:1rem;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem;row-gap:.15rem}
/* The demo the visitor picked keeps its own line above the time, so the date reads as one sentence
   rather than a stack of four. */
.web-confirm .web-schedule > #confirm-session{flex:0 0 100%}
/* The demo's name on the confirmation card: the same title and description the registration page
   leads with, so the visitor knows what they signed up for before they read when it is. */
.web-confirm-title{margin-top:1.1rem;font-family:var(--display);font-size:1.08rem;line-height:1.22;letter-spacing:-.01em}
.web-confirm-copy{margin-top:.45rem;font-size:.9rem;line-height:1.5;color:var(--muted-foreground)}
.web-joinlink{margin-top:.9rem;border:1px dashed var(--border);padding:.9rem 1rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground);word-break:break-all}

/* The countdown to the demo this registration is for, in the card under the date lines. */
.web-confirm .web-count{margin-top:1rem}
.web-confirm .countdown-amount{font-size:1.18rem}
.web-confirm .countdown-section{padding:.5rem .2rem .45rem}

/* The join button. It holds AEvent's join known URL, and the script on the page keeps it hidden
   until that URL is filled, so nobody is sent to an empty room link. */
.web-join-wrap{margin-top:1.15rem}
.web-join-wrap[hidden]{display:none}
.web-join{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:.82rem 1rem;font-family:var(--display);font-size:1rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em;text-decoration:none;background:var(--accent);color:var(--accent-foreground);border:1px solid var(--foreground);box-shadow:3px 3px 0 var(--foreground);transition:transform .12s,box-shadow .12s}
.web-join:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}
@media (hover:hover){.web-join:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--foreground)}}

/* Add to calendar. AEvent's own widget markup is kept: .addtocalendar wraps the .atcb-link that
   opens the menu, and the .atc_event block holds the fields its script fills in. The link is a
   button here instead of the platform's calendar image, and it works from the keyboard. */
.web-cal{margin-top:1rem}
.web-cal .calendar{display:inline-block}
.web-cal .addtocalendar{position:relative;display:inline-block}
.web-cal .atcb-link{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:.55rem .8rem;background:var(--background);border:1px solid var(--foreground);font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--foreground);cursor:pointer;touch-action:manipulation;transition:background .12s,color .12s}
.web-cal .atcb-link svg{width:1.05rem;height:1.05rem;flex:0 0 auto}
.web-cal .atcb-link:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}
@media (hover:hover){.web-cal .atcb-link:hover{background:var(--accent);color:var(--accent-foreground)}}
.web-cal .atcb-list{position:absolute;inset-inline-start:0;top:calc(100% + .3rem);z-index:30;min-width:13rem;margin:0;padding:.3rem 0;list-style:none;background:var(--card);border:1px solid var(--foreground);box-shadow:4px 4px 0 var(--foreground)}
.web-cal .atcb-list li{display:block;margin:0;padding:0}
.web-cal .atcb-list a,.web-cal .atcb-list span{display:block;padding:.55rem .8rem;font-size:.88rem;line-height:1.3;color:var(--foreground);text-decoration:none}
@media (hover:hover){.web-cal .atcb-list a:hover{background:var(--accent);color:var(--accent-foreground)}}

/* Under the confirmation card: the demo's own eleven points in the same grey band and with the same
   yellow square bullets as the registration page, so the two pages read as one funnel, then the six
   video releases. Nothing here touches the card: AEvent still owns everything inside it. */
.web-series{padding-block:2.75rem 3.25rem}
.web-series h2{font-family:var(--display);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.1;letter-spacing:-.01em}
.web-series-lede{max-width:42rem;margin-top:.7rem;font-size:1rem;line-height:1.55;color:var(--muted-foreground)}
.web-series .ds-grid{margin-top:1.75rem}
/* A card whose picture cannot load still reads as an episode rather than an empty box: the number
   shows as a plate in the corner of the tile, under the thumbnail, so it is visible only when the
   picture is missing or has been removed. The play button keeps the middle to itself. */
.web-ep .web-ep-num{position:absolute;left:.95rem;top:.8rem;font-family:var(--display);font-size:1.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(13,13,15,.4);pointer-events:none}

@media (max-width:860px){
  .web-grid{grid-template-columns:1fr}
  .web-sub{max-width:none}
}
@media (max-width:767px){
  .web-shell{width:min(100% - 2rem,1080px)}
  .web-hero>.web-shell{padding-block:2rem 2.5rem}
  .web-title{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .web-sub{font-size:1.1rem;margin-top:1.3rem;padding-top:1.1rem}
  .web-card{padding:1.15rem;box-shadow:4px 4px 0 var(--accent)}
  .web-list li{font-size:.98rem}
  .web-confirm{padding-block:1.75rem}
  .web-confirm .web-card{padding:1.25rem}
  .web-series{padding-block:2rem 2.5rem}
  .web-series .ds-grid{margin-top:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  .web-form .btn:hover{transform:none;box-shadow:3px 3px 0 var(--foreground)}
}

/* Multi-session registration. One block per demo time: the date lines from AEvent's merge tags,
   and its own button below them, so the date the visitor clicks is the session they register for. */
.web-grid--sessions{grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr)}
.web-form-label{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground);margin-top:.25rem}
.web-sessions{display:grid;gap:.8rem}
.web-form-error{margin:0;padding:.6rem .7rem;border:1px solid var(--foreground);background:var(--secondary);font-size:.86rem;line-height:1.4}
.web-form-error[hidden]{display:none}
/* One demo tile, read top to bottom: which demo it is and when it runs on the first line, how long
   until it starts under that, then the button. The number badge sits level with the first date line
   rather than under a full width countdown, so the eye lands on 01 and Monday together. */
.web-session{display:grid;margin:0;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no when" "count count" "btn btn";align-items:start;gap:.85rem .8rem;padding:1rem 1rem 1.05rem;background:var(--background);border:1px solid var(--foreground);box-shadow:3px 3px 0 var(--foreground);transition:box-shadow .15s}
@media (hover:hover){.web-session:hover{box-shadow:5px 5px 0 var(--foreground)}}
.web-session-no{grid-area:no;display:grid;place-items:center;width:2.6rem;height:2.6rem;background:var(--accent);color:var(--accent-foreground);border:1px solid var(--foreground);font-family:var(--display);font-size:1rem;line-height:1}
/* The day and the date each keep their own line because they carry the weight, the year rides along
   on the date line, and the clock time with its zone drops to one line underneath where it reads as
   detail instead of leaving the year stranded at the right edge. Every line of the schedule is 18px
   or more, on a phone as well. */
.web-session-when{grid-area:when;display:flex;flex-wrap:wrap;align-items:baseline;min-width:0;font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.3rem);line-height:1.14;letter-spacing:-.01em}
.web-session-when > .web-session-line{flex:0 0 100%}
.web-session-line{display:block}
.web-session-zone{margin-top:.35rem;font-family:var(--mono);font-size:1.125rem;font-weight:500;line-height:1.3;letter-spacing:.01em;color:var(--muted-foreground)}
.web-session-btn{grid-area:btn;display:block;width:100%;min-height:2.9rem;padding:.74rem .9rem;font-family:var(--display);font-size:.95rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em;background:var(--accent);color:var(--accent-foreground);border:1px solid var(--foreground);cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .12s,background .15s}
.web-session-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--foreground)}
.web-session-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--foreground)}
.web-session-btn:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}

/* Countdown to each demo time. The markup on the page is AEvent's own: a .countdown-box holding a
   .countdown-row of four .countdown-section cells, each with a .countdown-amount and a
   .countdown-period. AEvent's script then clears that row and builds the four cells itself, copying
   the campaign's widget colours onto them as inline styles. An inline declaration outranks a
   stylesheet rule, and where AEvent marks one !important nothing on the page can outrank it, which
   is why every line below carries !important and why the period word keeps the yellow bar its
   campaign sets: that bar's background, text colour and face are locked in AEvent's own settings.
   What is left to this file is what surrounds them. No boxes: the numbers are the site's mono face
   on the card itself, the unit sits under each in AEvent's own bar, and the row is spaced rather
   than ruled, so a hidden cell leaves no stray line behind.
   A cell AEvent hides at zero stays hidden, because display is only forced on cells that are not
   carrying "display: none", and that selector is the more specific of the two. */
.web-count{grid-area:count;min-width:0;margin-top:.55rem}
.web-count[hidden]{display:none}
.web-count .countdown-row{display:flex !important;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:.45rem !important;width:100%;margin:0 !important;padding:0 !important}
.web-count .countdown-section{display:flex !important;flex:1 1 0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1px;min-width:0;max-width:7rem;width:auto !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;text-align:center !important;color:inherit !important}
.web-count .countdown-section[style*="display: none"]{display:none !important}
.web-count .countdown-amount{display:block !important;width:auto !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;font-family:var(--mono) !important;font-size:clamp(1.3rem,2.8vw,1.6rem) !important;font-weight:500 !important;line-height:1 !important;letter-spacing:-.02em !important;color:var(--foreground) !important;font-variant-numeric:tabular-nums}
.web-count .countdown-period{display:block !important;width:auto !important;margin:0 !important;padding:.26rem .4rem !important;border:0 !important;border-radius:0 !important;font-size:.8rem !important;font-weight:700 !important;line-height:1 !important;white-space:nowrap !important}
/* The clearing div AEvent puts after its row: nothing to see, but it keeps the box from collapsing. */
.countdown-box .clearfix{clear:both;height:0;font-size:0;line-height:0}

.web-band{background:var(--secondary);border-top:1px solid var(--foreground);border-bottom:1px solid var(--foreground)}
.web-band .web-learn{padding-block:2.75rem 3.25rem}

@media (max-width:860px){
  .web-grid--sessions{grid-template-columns:1fr}
}
@media (max-width:420px){
  .web-session{padding:.9rem .85rem}
  .web-session-when{font-size:1.18rem}
  .web-session-btn{font-size:.9rem}
  .web-session-no{width:2.35rem;height:2.35rem;font-size:.92rem}
  .web-count .countdown-period{font-size:.72rem !important;padding:.22rem .28rem !important}
}
/* AEvent's registration form, on the page under the two demo times. The field names are AEvent's own
   (firstName, lastName, email, phone, the hidden webinarid, wtl and the five custom tags), so the
   form posts to the campaign exactly as the platform built it and nothing has to be remapped there.
   The look is the site's: same tokens as the rest, square corners, one 1px rule above the fields. */
.web-reg{display:grid;gap:.85rem;margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--border)}
.web-reg-row{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
.web-reg .field label{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
/* A helper line under a label, in sentence case so it reads as an explanation rather than part of the
   field's name. Used for the one field that is not required: the phone number. */
.web-reg .field .field-hint{display:block;margin-top:.2rem;font-family:inherit;font-size:.78rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted-foreground)}
.web-reg .field input{min-height:2.9rem;font-size:.95rem}
.web-reg-submit{width:100%;min-height:3.05rem;margin-top:.1rem;font-family:var(--display);font-size:1rem;text-transform:uppercase;letter-spacing:-.01em}
.web-reg-note{font-size:.82rem;line-height:1.45;color:var(--muted-foreground)}

/* The registration pop up. It holds the only form on the page, so the page itself is the offer and
   the two demo times and nothing else. It is a native <dialog>: the page behind it cannot be clicked
   or scrolled, Escape and a click on the backdrop close it, and the cursor goes back to the Register
   button that opened it. The look is the site's own: one 1px rule, square corners, a yellow offset
   shadow, the same display face on the heading as the page. */
.web-modal{margin:auto;width:min(30rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--foreground);background:var(--card);color:var(--foreground);box-shadow:8px 8px 0 var(--accent),0 0 0 100vmax rgba(13,13,15,.62);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.web-modal::backdrop{background:transparent}
html:has(dialog.web-modal[open]){overflow:hidden}
.web-modal-panel{padding:1.4rem;overflow-wrap:break-word}
.web-modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.web-modal-title{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.55rem);line-height:1.06;letter-spacing:-.01em}
.web-modal-close{display:grid;place-items:center;flex:0 0 auto;width:2.35rem;height:2.35rem;padding:0;background:var(--background);border:1px solid var(--foreground);color:var(--foreground);cursor:pointer;touch-action:manipulation;transition:background .12s,color .12s}
.web-modal-close svg{display:block}
.web-modal-close:focus-visible{outline:2px solid var(--foreground);outline-offset:3px}
@media (hover:hover){.web-modal-close:hover{background:var(--accent);color:var(--accent-foreground)}}
/* The demo time the visitor picked, written from that block's own date lines, so the time in front of
   them while they type is the time they clicked. Empty until the lines hold a real date. */
.web-modal-when{margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--border);font-family:var(--mono);font-size:1.25rem;font-weight:500;letter-spacing:0;text-transform:uppercase;color:var(--foreground)}
.web-modal-when[hidden]{display:none}
.web-modal .web-reg{margin-top:1rem;padding-top:0;border-top:0}
.web-modal .web-reg-row{min-width:0}
.web-modal .web-reg .field{min-width:0}
.web-modal .web-reg .field input{width:100%}

@media (max-width:560px){
  .web-reg-row{grid-template-columns:1fr}
  .web-modal{width:calc(100vw - 1.25rem);max-height:calc(100dvh - 1.25rem);box-shadow:4px 4px 0 var(--accent),0 0 0 100vmax rgba(13,13,15,.62)}
  .web-modal-panel{padding:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .web-session:hover,.web-session-btn:hover,.web-session-btn:active{transform:none;box-shadow:3px 3px 0 var(--foreground)}
}