/* Fonts are imported here rather than linked from the embed. They were originally a link, which is exactly the thing that gets lost when markup is pasted into a page builder. Keeping them with the CSS means the typography cannot be deployed without them. */ @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root{ --ink:#0A0A0A; --ink2:#111; --ink3:#161616; --line:#222; --line2:#2E2E2E; --green:#00FF00; --green-d:#00B800; --green-g:rgba(0,255,0,.08); --white:#fff; --dim:#8C8C8C; --dim2:#5E5E5E; --disp:"Bebas Neue",Impact,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --wrap:960px; } *{box-sizing:border-box} /* Any class that sets display beats the browser's own [hidden]{display:none}, because author styles outrank user-agent styles at equal specificity. So .slab-act{display:flex} was rendering an element the script had marked hidden. This restores the attribute's meaning. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} a{color:inherit} ::selection{background:var(--green);color:#000} :focus-visible{outline:2px solid var(--green);outline-offset:3px} /* ---------- masthead ---------- */ .mast{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40; background:rgba(10,10,10,.92);backdrop-filter:blur(10px)} .mast .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px} /* logo sits left by convention. To flip it right: add flex-direction:row-reverse to .mast .wrap — that single line is the whole change. */ .brand{display:flex;align-items:center;line-height:0;text-decoration:none} .brand img{height:26px;width:auto;display:block} .foot-logo{height:22px;width:auto;display:block;margin-bottom:26px} .mast-r{font-family:var(--mono);font-size:11.5px;color:var(--dim);text-decoration:none;letter-spacing:.02em} .mast-r:hover{color:var(--green)} /* ---------- eyebrow / headings ---------- */ .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--green);margin:0 0 18px;display:flex;align-items:center;gap:9px} .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto; box-shadow:0 0 0 0 rgba(0,255,0,.55);animation:pulse 2.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,255,0,.5)}70%{box-shadow:0 0 0 9px rgba(0,255,0,0)}100%{box-shadow:0 0 0 0 rgba(0,255,0,0)}} /* The headline does emotional work — it shifts them from "I booked" to "I am preparing" — but it says nothing operational, and at full size on a phone it was pushing the video most of a screen further down. */ h1{font-family:var(--disp);font-weight:400;font-size:clamp(34px,6.4vw,74px);line-height:.94; letter-spacing:.005em;margin:0 0 16px} h1 .mute{color:var(--dim2)} h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4.6vw,46px);line-height:1; letter-spacing:.01em;margin:0 0 14px} h2 .mute{color:var(--dim2)} .lede{font-size:17px;color:var(--dim);max-width:60ch;margin:0;line-height:1.5} .lede strong{color:var(--white);font-weight:500} /* ---------- sections ---------- */ section{padding:56px 0;border-top:1px solid var(--line)} /* The player follows the ticket directly. No divider, minimal padding — every pixel between the two pushes the video further from being seen. */ .vid-sec{border-top:0;padding-top:6px} .vid-eyebrow{margin-bottom:12px} .vid-sec .vframe{margin-top:0} section:first-of-type{border-top:0} .hero{padding:44px 0 56px} .sec-head{margin-bottom:28px} /* ---------- SIGNATURE: appointment slab ---------- */ .slab{margin-top:30px;border:1px solid var(--line2);background:var(--ink2);position:relative;overflow:hidden} .slab:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)} .slab-top{padding:26px 30px 22px;border-bottom:1px dashed var(--line2)} .slab-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--dim2);margin-bottom:12px} .slab-when{font-family:var(--mono);font-size:clamp(22px,4.2vw,34px);font-weight:500; line-height:1.15;letter-spacing:-.01em} .slab-when .tz{color:var(--green)} /* Inverted deliberately: on a near-black page a dark panel with a green rule gets skimmed, and brand is green/black/white so there is no amber to reach for. Only renders when a booking looks wrong. */ .slab-flag{position:relative;z-index:1;padding:22px 30px 24px;background:var(--green);color:#000; margin-left:-3px;animation:flagIn .42s cubic-bezier(.2,.8,.25,1) both} @keyframes flagIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .flag-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-family:var(--mono); font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.62)} .flag-mark{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px; border-radius:50%;background:#000;color:var(--green);font-family:var(--body);font-size:12px; font-weight:700;flex:0 0 auto;line-height:1} .flag-t{margin:0 0 8px;font-size:19.5px;font-weight:600;line-height:1.28;color:#000; letter-spacing:-.005em} .flag-s{margin:0;font-size:14.5px;color:rgba(0,0,0,.8);line-height:1.6} .flag-s .alt{font-family:var(--mono);font-weight:600;color:#000; background:rgba(0,0,0,.1);padding:1px 5px;border-radius:2px} .flag-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .flag-act a{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em; text-transform:uppercase;text-decoration:none;padding:11px 17px;border:1.5px solid #000; color:#000;background:transparent;transition:.16s} .flag-act a:hover{background:#000;color:var(--green)} .flag-act a:focus-visible{outline:2px solid #000;outline-offset:2px} .flag-alt{margin:14px 0 0;font-family:var(--mono);font-size:11.5px;color:rgba(0,0,0,.62)} .flag-alt span{color:#000;font-weight:600;-webkit-user-select:all;user-select:all} .wrongtime{margin:14px 0 0} .wt-line{font-family:var(--mono);font-size:11.5px;color:var(--dim2);margin:0} .wt-line button{font:inherit;background:none;border:0;padding:0;color:var(--dim);cursor:pointer; text-decoration:underline;text-underline-offset:3px} .wt-line button:hover{color:var(--green)} .wt-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px} .wt-opts a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase; text-decoration:none;padding:10px 16px;border:1px solid var(--line2);color:var(--white);transition:.16s} .wt-opts a:hover{border-color:var(--green);color:var(--green)} .wt-opts .addr{font-family:var(--mono);font-size:11.5px;color:var(--dim2)} .wt-opts .addr span{color:var(--dim);-webkit-user-select:all;user-select:all} .slab-grid{display:grid;grid-template-columns:repeat(3,1fr)} .slab-cell{padding:20px 30px;border-right:1px solid var(--line)} .slab-cell:last-child{border-right:0} .slab-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);margin-bottom:6px} .slab-v{font-family:var(--mono);font-size:14.5px;font-weight:500; display:flex;align-items:center;gap:10px;min-height:22px} .rep-pic{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto; background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.16)} .slab-act{display:flex;flex-wrap:wrap;gap:12px;padding:22px 30px;border-top:1px solid var(--line);background:var(--ink3)} .slab-act-alt{display:block} .help-t{margin:0 0 14px;font-size:14.5px;color:var(--dim)} .help-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .help-act a{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase; text-decoration:none;padding:10px 16px;border:1px solid var(--line2);color:var(--white);transition:.16s} .help-act a:hover{border-color:var(--green);color:var(--green)} .help-act .addr{font-family:var(--mono);font-size:11.5px;color:var(--dim2)} .help-act .addr span{color:var(--dim);-webkit-user-select:all;user-select:all} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;text-decoration:none; font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase; border:1px solid var(--green);background:var(--green);color:#000;transition:.16s;cursor:pointer} .btn:hover{background:#fff;border-color:#fff} .btn-g{background:transparent;color:var(--white);border-color:var(--line2)} .btn-g:hover{background:transparent;border-color:var(--green);color:var(--green)} .hint{font-family:var(--mono);font-size:11.5px;color:var(--dim2);margin:14px 0 0;line-height:1.7} /* ---------- video frame ---------- */ .vframe{margin-top:30px;border:1px solid var(--line2);background:#000;position:relative; aspect-ratio:16/9} .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#3a3a3a} .prep{margin-top:22px;padding:18px 22px;border-left:2px solid var(--green);background:var(--ink2); font-size:15px;color:var(--dim)} .prep strong{color:var(--white);font-weight:500} /* ---------- card grids ---------- */ .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} /* The card IS the video frame. An earlier pass baked the question into an image; this renders the same composition in live type. Same 16:9 shape, same play control, same affordance — but the text stays selectable, searchable, sharp at any zoom, and readable by a screen reader without relying on alt attributes. Editing a question is a text change rather than regenerating an asset. */ .card{position:relative;background:var(--ink2);padding:0;display:block;text-align:left; border:0;color:inherit;font:inherit;cursor:pointer;transition:.16s;overflow:hidden;width:100%} .card:hover{background:var(--ink3)} .card[data-soon]{cursor:default;opacity:.42} .card-frame{position:relative;aspect-ratio:16/9;overflow:hidden; padding:clamp(16px,3.4%,26px) clamp(16px,4%,30px);display:flex;flex-direction:column} .card-frame:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)} .card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex:0 0 auto} .card-kind{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500; font-size:clamp(9px,1.15vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--green)} .card-kind:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto} .card-run{font-family:var(--mono);font-size:clamp(9px,1.15vw,11px);color:var(--dim);flex:0 0 auto} .card-q{flex:1 1 auto;display:flex;align-items:center;margin:0;padding-right:var(--qpad,0px); font-family:var(--disp);font-weight:400;font-size:clamp(19px,3.35vw,34px);line-height:.98; letter-spacing:.004em;color:var(--white);transition:color .16s} .card:hover .card-q{color:var(--white)} .card-bottom{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .card-face{width:clamp(34px,7.2%,48px);aspect-ratio:1;border-radius:50%;object-fit:cover; background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.2);align-self:flex-end} /* Visible at rest, not only on hover — a phone never hovers, and hiding it would recreate the affordance problem this whole change exists to fix. */ .play{width:clamp(38px,8.4%,54px);aspect-ratio:1;border-radius:50%;flex:0 0 auto; background:rgba(10,10,10,.5);border:2px solid rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center;transition:.18s} .play:before{content:"";border-style:solid;border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff;margin-left:3px;transition:.18s} .card:hover .play,.card:focus-visible .play{background:var(--green);border-color:var(--green);transform:scale(1.09)} .card:hover .play:before,.card:focus-visible .play:before{border-left-color:#000} .card-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px; padding:11px 16px;border-top:1px solid var(--line)} .card-docs{font-family:var(--mono);font-size:11px;color:var(--dim2);text-decoration:none;white-space:nowrap} .card-docs:hover{color:var(--green)} /* ---------- cluster label ---------- */ .cluster{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--dim2);margin:38px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)} .cluster:first-of-type{margin-top:0} /* ---------- more toggle ---------- */ .more{margin-top:18px;text-align:center} .more button{background:none;border:1px solid var(--line2);color:var(--dim);font-family:var(--mono); font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:12px 24px;cursor:pointer;transition:.16s} .more button:hover{border-color:var(--green);color:var(--green)} .hidden{display:none!important} /* ---------- hub strip ---------- */ .hub{border:1px solid var(--line2);background:var(--ink2);padding:32px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .hub-t{font-family:var(--disp);font-size:30px;letter-spacing:.01em;margin:0 0 6px} .hub-s{font-size:14.5px;color:var(--dim);margin:0;max-width:52ch} /* ---------- faq ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative; font-size:16.5px;font-weight:500;line-height:1.4} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"+";position:absolute;right:8px;top:18px;font-family:var(--mono); font-size:20px;color:var(--green);transition:.2s} .faq details[open] summary:after{transform:rotate(45deg)} .faq .ans{padding:0 44px 24px 0;color:var(--dim);font-size:15.5px} .faq .ans p{margin:0 0 12px} .faq .ans p:last-child{margin:0} .faq .ans strong{color:var(--white);font-weight:500} .faq .ans .num{font-family:var(--mono);color:var(--white);font-weight:500} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:52px 0 60px;background:var(--ink2)} .status{display:flex;flex-wrap:wrap;gap:12px 34px;font-family:var(--mono);font-size:11.5px; color:var(--dim);padding-bottom:30px;margin-bottom:28px;border-bottom:1px solid var(--line)} .status span{display:flex;align-items:center;gap:8px} .status b{color:var(--white);font-weight:500} .risk{font-size:12.5px;line-height:1.75;color:var(--dim2);max-width:88ch;margin:0 0 24px} .legal{font-family:var(--mono);font-size:11px;color:var(--dim2);display:flex;gap:18px;flex-wrap:wrap} .legal a{text-decoration:none} .legal a:hover{color:var(--green)} /* ---------- lightbox ---------- */ .lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.93);display:none; align-items:center;justify-content:center;padding:24px} .lb.on{display:flex} .lb-in{width:100%;max-width:1040px} .lb-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px} .lb-t{font-size:17px;font-weight:500;margin:0} .lb-x{background:none;border:1px solid var(--line2);color:var(--dim);width:38px;height:38px; font-size:18px;cursor:pointer;flex:0 0 auto;transition:.16s} .lb-x:hover{border-color:var(--green);color:var(--green)} .lb-v{aspect-ratio:16/9;background:#000;border:1px solid var(--line2);position:relative} .lb-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s} .rv.in{opacity:1;transform:none} @media (max-width:820px){ .grid-3,.grid-2{grid-template-columns:1fr} .slab-grid{grid-template-columns:1fr} .slab-cell{border-right:0;border-bottom:1px solid var(--line)} .slab-cell:last-child{border-bottom:0} .slab-top,.slab-cell,.slab-act,.slab-flag{padding-left:22px;padding-right:22px} .flag-t{font-size:18px} section{padding:54px 0} .hub{padding:24px} } @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .dot{animation:none} .slab-flag{animation:none} }