/* =========================
   Fonts (local)
   ========================= */
@font-face {
  font-family: "RyeLocal";
  src: url("../fonts/Rye-Regular.woff2") format("woff2"),
       url("../fonts/Rye-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Theme tokens
   ========================= */
:root{
  --bg:#0f1115;
  --card:#1a1f29;
  --ink:#e8eef6;
  --muted:#aeb8c6;
  --rail:#303746;
  --cta:#f97928;
  --cta-dark:#e0691f;
  --accent:#c8a97a;

  /* Typography */
  --font-body:"Arvo","Georgia",serif;
  --font-head:"RyeLocal","Georgia",serif;   /* headings, titles, buttons */
  --font-brand:var(--font-head);            /* brand lockup follows head */
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  background:radial-gradient(1000px 600px at 20% -20%,#1e2430 0%,transparent 60%),var(--bg);
  color:var(--ink);
}

/* Headings / UI titles / CTAs */
h1,h2,h3,h4,h5,h6,
.dt-card-title,.sd-h3,
.dt-cta,.dt-nav a,button,.btn,.dt-section-sub{
  font-family:var(--font-head);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* Brand wordmark */
.dt-title{
  font-family:var(--font-brand);
  font-size:26px;
  font-weight:400;
  letter-spacing:1px;
}

/* =========================
   Header
   ========================= */
.dt-header{
  max-width:1100px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.dt-brand{display:flex; align-items:center; gap:12px;}
.dt-home{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.dt-home:hover{opacity:.9}
.dt-home:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.dt-logo{width:36px; height:36px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.dt-nav{display:flex; gap:14px; align-items:center}
.dt-nav a{color:var(--muted); text-decoration:none; padding:6px 10px; border:1px solid var(--rail); border-radius:10px}
.dt-nav a:hover{color:var(--ink); border-color:var(--ink)}
.dt-intercom{
  background:transparent; border:1px solid var(--rail); color:var(--ink);
  padding:8px 12px; border-radius:10px; cursor:pointer;
  font-family:var(--font-head); letter-spacing:.5px;
}
.dt-intercom:hover{border-color:var(--ink)}

/* =========================
   Hero
   ========================= */
.dt-hero{max-width:900px; margin:40px auto 10px; padding:0 20px; text-align:center}
.dt-hero h1{font-size:48px; margin:0 0 6px}
.dt-sub{color:var(--muted); margin:0 0 22px; font-family:var(--font-body)}
.dt-hero--spacious{max-width:960px; margin:80px auto 20px; padding:0 20px; text-align:center}
.dt-hero--spacious h1{font-size:64px; line-height:1.1; margin:0 0 10px}
.dt-hero--spacious .dt-sub{font-size:18px; margin-bottom:28px}

/* =========================
   Ticket form
   ========================= */
.dt-ticket{
  max-width:820px; margin:0 auto; background:var(--card); border:3px dashed #2a3140;
  border-radius:18px; overflow:hidden; text-align:left;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dt-ticket--wide{max-width:840px}
.dt-ticket-top{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; background:#151922; border-bottom:1px dashed #2a3140;
}
.dt-stub{font-weight:700; letter-spacing:.5px}
.dt-punch{
  font-family:monospace; color:#111; background:var(--accent); padding:4px 10px; border-radius:10px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
}
.dt-ticket-body{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px;
}
.dt-ticket-body label{display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:14px}
.dt-ticket-body input{
  padding:14px 12px; background:#0e131b; border:1px solid #2a3140; border-radius:12px; color:var(--ink);
  outline:none; font-family:var(--font-body);
}
.dt-ticket-body input:focus{border-color:#3a4457}
.dt-ticket-body--simple{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:18px 16px 10px;
}
.dt-ticket-body--simple input{
  padding:16px 14px;
  font-size:16px;
  background:#0e131b;
  border:1px solid #2a3140;
  border-radius:12px;
  color:var(--ink);
  font-family:var(--font-body);
}
.dt-ticket-top{padding:14px 16px}
.dt-cta{
  width:100%; padding:14px 16px; border:none; cursor:pointer;
  background:var(--cta); color:#111; font-size:18px;
  font-family:var(--font-head);
}
.dt-cta:hover{background:var(--cta-dark)}
.dt-sub strong{font-weight:800}
.dt-ticket label{display:none}

/* =========================
   Loading
   ========================= */
.hidden{display:none}
.dt-loading{max-width:900px; margin:40px auto; text-align:center; padding:0 20px}
.dt-rail{
  position:relative; height:140px; background:linear-gradient(#121620, #11151d);
  border:1px solid #242b3a; border-radius:16px; overflow:hidden;
}
.dt-train{position:absolute; left:-260px; top:45px; display:flex; gap:10px; animation:chug 2.2s linear infinite}
.dt-engine,.dt-car{
  width:120px; height:50px; background:#222938; border:2px solid #2f384a; border-radius:8px;
  position:relative; box-shadow:0 2px 0 #0b0e14;
}
.dt-engine:before{
  content:""; position:absolute; width:40px; height:18px; background:#2a3140; right:-8px; top:-10px; border-radius:4px;
}
.dt-dust{
  position:absolute; right:-40px; top:70px; width:100px; height:100px; background:radial-gradient(closest-side, rgba(200,169,122,.4), transparent);
  filter:blur(6px); animation:dust 1.6s ease-in-out infinite alternate;
}
@keyframes chug { 0%{transform:translateX(0)} 100%{transform:translateX(1200px)} }
@keyframes dust { 0%{transform:translateX(0)} 100%{transform:translateX(-30px)} }
.dt-loading-copy{color:var(--muted); margin:10px 0 0; font-family:var(--font-body)}

/* =========================
   Results / Cards
   ========================= */
.dt-results{
  max-width:1100px; margin:24px auto 60px; padding:0 20px; display:grid; grid-template-columns:320px 1fr; gap:24px;
}
.dt-results{margin-top:48px}
.dt-notes{background:var(--card); border:1px solid #242b3a; border-radius:14px; padding:16px}
.dt-notes h3{margin:0 0 10px}
.dt-notes ul{margin:0; padding-left:18px; color:var(--muted)}
.dt-cars h2{margin:0 0 10px}
.dt-cars-wrap{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px}
.dt-car-card{
  background:var(--card); border:1px solid #242b3a; border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dt-car-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  border-color:#324058;
}
.dt-chip{display:inline-block; padding:2px 8px; font-size:12px; border-radius:999px; background:#232a38; color:var(--muted); border:1px solid #2e3646; font-family:var(--font-body)}
.dt-meta{color:var(--muted); font-size:14px; font-family:var(--font-body)}
.dt-link{margin-top:auto; text-decoration:none; background:#232a38; border:1px solid #2e3646; color:var(--ink); padding:8px 10px; border-radius:10px; text-align:center; font-family:var(--font-head); letter-spacing:.5px}
.dt-link:hover{border-color:var(--ink)}

/* =========================
   Footer
   ========================= */
.dt-footer{max-width:1100px; margin:40px auto; padding:0 20px; color:var(--muted); text-align:center; font-family:var(--font-body)}

/* =========================
   Modal
   ========================= */
.dt-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  place-items:center;
  z-index:9999;
}
.dt-modal.open{ display:grid; }
.dt-modal-card{
  max-width:1000px; width:92%;
  background:var(--card);
  border:1px solid #242b3a;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.dt-modal-pre{
  white-space:pre-wrap;
  max-height:60vh; overflow:auto;
  background:#0e131b;
  padding:12px; border-radius:10px; border:1px solid #2a3140;
  font-family:var(--font-body);
}
.dt-modal-close{ float:right; margin-bottom:8px; }
body.modal-open{ overflow:hidden; }

/* =========================
   Susan’s Desk (layout helpers)
   ========================= */
.sd-hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:start;
  margin:28px auto 0;
  max-width:1100px;
}
.sd-hero-img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  min-height:340px;
  background:radial-gradient(600px 240px at 30% 10%, #202636 0%, transparent 65%), #0e131b;
}
.sd-section{margin-top:28px}
.sd-section h2{margin:0 0 14px}
.card-accent{position:relative}
.card-accent-orange{border-color:#8a4d1f; background:linear-gradient(180deg,#1f1a14 0%, #15110c 100%)}
.card-accent-green{border-color:#1d5d50; background:linear-gradient(180deg,#12201e 0%, #0f1917 100%)}
.card-accent-blue{border-color:#2d3f63; background:linear-gradient(180deg,#161c2a 0%, #121825 100%)}
.card-accent:before{
  content:"";
  position:absolute; left:10px; right:10px; top:10px; height:3px;
  border-radius:6px;
  background:linear-gradient(90deg, var(--cta) 0%, #6ee7b7 50%, #60a5fa 100%);
  opacity:.6;
}
.sd-bullets{margin:0 0 8px 18px; line-height:1.5}
.sd-proof{
  display:inline-block; margin:6px 0 4px;
  background:#212635; border:1px solid #2e3646; color:var(--ink);
  padding:6px 10px; border-radius:10px;
  font-family:var(--font-body);
}
@media (max-width: 980px){
  .sd-hero-grid{grid-template-columns:1fr; margin-top:20px}
}
@media (max-width: 820px){
  .dt-cars-wrap{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
.sd-hero-card{
  padding:22px;
  display:flex; flex-direction:column;
  gap:16px;
}
.sd-card-section{display:block}
.sd-card-cta{margin-top:4px}
.sd-h3{margin:0 0 8px; color:#f3f4f6}
.sd-hero-figure{display:flex; flex-direction:column; justify-content:stretch}
.sd-hero-img{display:block; width:100%; object-fit:cover}
.sd-hero-img-tall{
  aspect-ratio: 5 / 4;
  min-height: 560px;
}
.card-accent{padding-top:22px}
.card-accent:before{top:12px}
.sd-hero-banner-card{ margin-top:10px }
.sd-hero-banner-img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  min-height:360px;
  object-fit:cover;
}
.sd-card-section{ display:block }
.sd-card-cta{ margin-top:6px }
.sd-h3{ margin:0 0 8px; color:#f3f4f6 }
.card-accent{ padding-top:22px }
.card-accent:before{ top:12px }
@media (max-width: 720px){
  .sd-hero-banner-img{ aspect-ratio:4/3; min-height:260px }
}

/* =========================
   Blog
   ========================= */
#blogRoot{
  display: grid;
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
  gap: 16px;
}
.post-body p{ line-height: 1.6; margin: 0 0 1em; font-family:var(--font-body) }
.post-body h1,.post-body h2,.post-body h3{
  margin: 1.2em 0 .5em; line-height: 1.25; font-family:var(--font-head)
}
@media (max-width: 900px){
  #blogRoot{ grid-template-columns: 1fr; padding: 0 12px }
}

/* ===== Susan's Desk footer banner — glass + compact ===== */
.sd-footer-cta{
  --sd-br: 18px;
  --sd-bg: rgba(17, 22, 31, .42);               /* translucent */
  --sd-border: rgba(110, 130, 170, .22);

  max-width: 820px;                             /* smaller footprint */
  margin: 18px auto 0;
  padding: 10px 12px;                           /* tighter padding */
  border-radius: var(--sd-br);
  border: 1px solid var(--sd-border);

  /* glassmorphism */
  background: var(--sd-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  /* subtle glow and vignette */
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
  background-image:
    radial-gradient(700px 280px at 18% -30%, rgba(249,121,40,.10), transparent 60%);

  display: grid;
  grid-template-columns: .9fr 1.2fr;            /* less image weight */
  gap: 12px;
  align-items: center;
}

.sd-footer-cta__img{ position: relative; }
.sd-footer-img{
  display:block;
  width:100%;
  height:auto;
  max-height:160px;                              /* much smaller image */
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--sd-border);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  background:#0e131b;
}
.sd-footer-img--pill{ border-radius:9999px; }

.sd-footer-cta__copy{ padding:2px 2px 2px 0; }
.sd-footer-title{
  margin:0 0 2px;
  font-family:var(--font-head);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:clamp(18px,1.6vw,22px);             /* smaller title */
}
.sd-footer-sub{
  margin:0 0 8px;
  color:var(--muted);
  font-family:var(--font-body);
  line-height:1.5;
  font-size:14px;
}

.sd-footer-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.sd-footer-actions .dt-link{
  padding:7px 11px;                              /* smaller buttons */
  border-radius:10px;
  font-family:var(--font-head);
  font-size:14px;
}
.sd-primary{
  background:var(--cta);
  color:#111;
  border-color:transparent;
}
.sd-primary:hover{ background:var(--cta-dark); }
.sd-secondary{
  background:rgba(30,36,49,.6);
  color:var(--ink);
  border:1px solid var(--sd-border);
}
.sd-secondary:hover{ border-color:var(--ink); }

/* Mobile */
@media (max-width:900px){
  .sd-footer-cta{
    grid-template-columns:1fr;
    gap:10px;
    padding:10px;
    max-width:92%;
  }
  .sd-footer-img{ max-height:150px; }
  .sd-footer-title{ font-size:18px; }
  .sd-footer-sub{ font-size:13px; }
}

/* Fallback if no backdrop-filter support */
@supports not ((backdrop-filter: blur(10px))) {
  .sd-footer-cta{
    background: rgba(17,22,31,.82);             /* more opaque fallback */
  }
}

/* Wider nav support */
.dt-nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
@media (max-width:720px){
  .dt-nav a{padding:6px 8px; font-size:14px}
}

.dt-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  position:relative;
  background:rgba(15,17,21,.25);
  backdrop-filter:saturate(120%) blur(2px);
  border-radius:14px;
  margin:8px auto;
  max-width:1100px;
  z-index:5;
}
.dt-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--ink, #fff);
  font-family:var(--font-head);
  font-size:22px;
}
.dt-logo{width:32px;height:32px;margin-right:8px;}
.dt-nav{
  display:flex;
  gap:14px;
  align-items:center;
}
.dt-nav a{
  color:#fff;
  text-decoration:none;
  font-family:var(--font-head);
  font-size:16px;
  transition:opacity .2s ease;
}
.dt-nav a:hover{opacity:.8;}

.dt-nav-toggle{
  display:none;
  font-size:24px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* Mobile responsive menu */
@media (max-width:768px){
  .dt-nav-toggle{display:block;}
  .dt-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(15,17,21,.9);
    flex-direction:column;
    align-items:flex-start;
    padding:10px 20px;
    border-radius:0 0 12px 12px;
    backdrop-filter:blur(10px);
    display:none;
  }
  .dt-nav.open{display:flex;}
}

:root{
  --dt-ink: rgb(236,238,241);
  --dt-ink-dim: rgb(196,202,210);
  --dt-trim: rgb(255,153,75);
  --dt-trim-deep: rgb(214,106,37);
  --dt-ember: rgba(255,170,90,0.28);
  --dt-shadow: rgba(0,0,0,0.45);
  --dt-shadow-soft: rgba(0,0,0,0.28);
  --dt-glass: rgba(255,255,255,0.015);
  --dt-border: rgba(255,255,255,0.06);
  --dt-input-top: rgba(24,31,37,0.68);
  --dt-input-low: rgba(15,19,22,0.68);
  --dt-chip: rgba(20,24,28,0.52);
}

.dt-hero.dt-hero--spacious{
  min-height:100svh;
  padding:0 1.25rem;
  display:grid;
  place-content:center;
  text-align:center;
  gap:.6rem;
}
.dt-hero h1{
  color:var(--dt-ink);
  letter-spacing:.06em;
  line-height:1.06;
  text-shadow:0 2px 10px var(--dt-shadow);
  margin:0 0 .2rem 0;
}
.dt-hero .dt-sub{
  color:var(--dt-ink-dim);
  font-weight:500;
  margin:0 0 .6rem 0;
}

.dt-ticket{
  position:relative;
  display:grid;
  gap:.8rem;
  width:min(760px,92vw);
  border-radius:18px;
  padding:.8rem;
  background:var(--dt-glass);
  outline:1px solid var(--dt-border);
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  backdrop-filter:blur(4px) saturate(112%);
  -webkit-backdrop-filter:blur(4px) saturate(112%);
  isolation:isolate;
  overflow:hidden;
  z-index:0;
  margin:0 auto;
  filter:drop-shadow(0 0 6px rgba(255,180,120,0.08));
}

.dt-ticket::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:30%;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.0) 70%);
  pointer-events:none;
  z-index:0;
}
.dt-ticket::after{ content:none; }

.dt-ticket-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
  z-index:1;
}
.dt-ticket-body--simple{
  grid-template-columns:1fr 1fr;
}

.dt-stub{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dt-ink);
  background:var(--dt-chip);
  padding:.5rem .78rem;
  border-radius:12px;
  outline:1px solid rgba(255,255,255,0.12);
  z-index:1;
}
.dt-punch{
  justify-self:end;
  align-self:center;
  font-weight:900;
  letter-spacing:.18em;
  color:rgba(255,225,200,0.9);
  background:var(--dt-chip);
  padding:.4rem .74rem;
  border-radius:10px;
  outline:1px solid rgba(255,255,255,0.1);
  transform:none;
  z-index:1;
}

.dt-ticket input{
  width:100%;
  border:0;
  border-radius:12px;
  padding:.9rem 1rem;
  font-size:1rem;
  color:var(--dt-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05)),
    linear-gradient(180deg, var(--dt-input-top), var(--dt-input-low));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 8px 22px rgba(0,0,0,0.45);
  outline:none;
}
.dt-ticket input::placeholder{
  color:rgba(220,228,236,0.62);
}
.dt-ticket input:focus{
  box-shadow:inset 0 0 0 1px rgba(255,210,120,0.36), 0 0 0 3px rgba(255,170,80,0.18), 0 0 10px var(--dt-ember);
}

.dt-cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  width:100%;
  border:0;
  border-radius:16px;
  padding:.95rem 1rem;
  font-weight:900;
  letter-spacing:.06em;
  color:rgb(30,18,10);
  background:linear-gradient(180deg,var(--dt-trim),var(--dt-trim-deep));
  box-shadow:0 10px 26px rgba(255,150,60,0.28), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,230,190,0.5);
  cursor:pointer;
  transition:transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.dt-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(255,160,80,0.38), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,235,200,0.55);
  filter:saturate(1.06);
}
.dt-cta:active{
  transform:translateY(0);
  filter:saturate(.98) brightness(.98);
}

@media (max-width:860px){
  .dt-ticket-body{ grid-template-columns:1fr; }
  .dt-stub{ justify-self:start; }
  .dt-punch{ justify-self:end; }
}

.dt-ticket.is-punched{
  animation:dtShake 200ms ease-in-out;
  box-shadow:0 12px 30px rgba(0,0,0,0.32);
}
@keyframes dtShake{
  0%,100%{ transform:translateZ(0) rotate(0deg); }
  25%{ transform:translateZ(0) rotate(0.9deg); }
  75%{ transform:translateZ(0) rotate(-0.9deg); }
}

.dt-ticket.is-punched .dt-cta{
  animation:dtPunchPress 280ms cubic-bezier(.2,.8,.2,1);
}
@keyframes dtPunchPress{
  0%{ transform:translateY(0) scale(1); box-shadow:0 10px 26px rgba(255,150,60,0.28), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,230,190,0.5); }
  50%{ transform:translateY(1px) scale(.995); box-shadow:0 6px 18px rgba(255,140,50,0.26), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,220,175,0.45); }
  100%{ transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .dt-cta,
  .dt-ticket.is-punched .dt-cta,
  .dt-ticket.is-punched{ animation:none; transition:none; }
}

:root{
  --dt-ink: rgb(236,238,241);
  --dt-ink-dim: rgb(196,202,210);
  --dt-trim: rgb(255,153,75);
  --dt-trim-deep: rgb(214,106,37);
  --dt-ember: rgba(255,170,90,0.28);
  --dt-shadow: rgba(0,0,0,0.45);
  --dt-shadow-soft: rgba(0,0,0,0.28);
  --dt-glass: rgba(255,255,255,0.015);
  --dt-border: rgba(255,255,255,0.06);
  --dt-input-top: rgba(24,31,37,0.68);
  --dt-input-low: rgba(15,19,22,0.68);
  --dt-chip: rgba(20,24,28,0.52);
}

.dt-hero.dt-hero--spacious{
  min-height:100svh;
  padding:0 1.25rem;
  display:grid;
  place-content:center;
  text-align:center;
  gap:.6rem;
}
.dt-hero h1{
  color:var(--dt-ink);
  letter-spacing:.06em;
  line-height:1.06;
  text-shadow:0 2px 10px var(--dt-shadow);
  margin:0 0 .2rem 0;
}
.dt-hero .dt-sub{
  color:var(--dt-ink-dim);
  font-weight:500;
  margin:0 0 .6rem 0;
}

.dt-ticket{
  position:relative;
  display:grid;
  gap:.8rem;
  width:min(760px,92vw);
  border-radius:18px;
  padding:.8rem;
  background:var(--dt-glass);
  outline:1px solid var(--dt-border);
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  backdrop-filter:blur(4px) saturate(112%);
  -webkit-backdrop-filter:blur(4px) saturate(112%);
  isolation:isolate;
  overflow:hidden;
  z-index:0;
  margin:0 auto;
  filter:drop-shadow(0 0 6px rgba(255,180,120,0.08));
}

.dt-ticket::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:30%;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.0) 70%);
  pointer-events:none;
  z-index:0;
}
.dt-ticket::after{ content:none; }

.dt-ticket-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
  z-index:1;
}
.dt-ticket-body--simple{
  grid-template-columns:1fr 1fr;
}

.dt-stub{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dt-ink);
  background:var(--dt-chip);
  padding:.5rem .78rem;
  border-radius:12px;
  outline:1px solid rgba(255,255,255,0.12);
  z-index:1;
}
.dt-punch{
  justify-self:end;
  align-self:center;
  font-weight:900;
  letter-spacing:.18em;
  color:rgba(255,225,200,0.9);
  background:var(--dt-chip);
  padding:.4rem .74rem;
  border-radius:10px;
  outline:1px solid rgba(255,255,255,0.1);
  transform:none;
  z-index:1;
}

.dt-ticket input{
  width:100%;
  border:0;
  border-radius:12px;
  padding:.9rem 1rem;
  font-size:1rem;
  color:var(--dt-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05)),
    linear-gradient(180deg, var(--dt-input-top), var(--dt-input-low));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 8px 22px rgba(0,0,0,0.45);
  outline:none;
}
.dt-ticket input::placeholder{
  color:rgba(220,228,236,0.62);
}
.dt-ticket input:focus{
  box-shadow:inset 0 0 0 1px rgba(255,210,120,0.36), 0 0 0 3px rgba(255,170,80,0.18), 0 0 10px var(--dt-ember);
}

.dt-cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  width:100%;
  border:0;
  border-radius:16px;
  padding:.95rem 1rem;
  font-weight:900;
  letter-spacing:.06em;
  color:rgb(30,18,10);
  background:linear-gradient(180deg,var(--dt-trim),var(--dt-trim-deep));
  box-shadow:0 10px 26px rgba(255,150,60,0.28), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,230,190,0.5);
  cursor:pointer;
  transition:transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.dt-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(255,160,80,0.38), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,235,200,0.55);
  filter:saturate(1.06);
}
.dt-cta:active{
  transform:translateY(0);
  filter:saturate(.98) brightness(.98);
}

@media (max-width:860px){
  .dt-ticket-body{ grid-template-columns:1fr; }
  .dt-stub{ justify-self:start; }
  .dt-punch{ justify-self:end; }
}

.dt-ticket.is-punched{
  animation:dtShake 200ms ease-in-out;
  box-shadow:0 12px 30px rgba(0,0,0,0.32);
}
@keyframes dtShake{
  0%,100%{ transform:translateZ(0) rotate(0deg); }
  25%{ transform:translateZ(0) rotate(0.9deg); }
  75%{ transform:translateZ(0) rotate(-0.9deg); }
}

.dt-ticket.is-punched .dt-cta{
  animation:dtPunchPress 280ms cubic-bezier(.2,.8,.2,1);
}
@keyframes dtPunchPress{
  0%{ transform:translateY(0) scale(1); box-shadow:0 10px 26px rgba(255,150,60,0.28), inset 0 -2px 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,230,190,0.5); }
  50%{ transform:translateY(1px) scale(.995); box-shadow:0 6px 18px rgba(255,140,50,0.26), inset 0 -1px 0 rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,220,175,0.45); }
  100%{ transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .dt-cta,
  .dt-ticket.is-punched .dt-cta,
  .dt-ticket.is-punched{ animation:none; transition:none; }
}



.dt-advisory {
  max-width: 800px;
  margin: 2.5rem auto 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  background: rgba(15, 20, 25, 0.65);
  box-shadow: 0 0 20px rgba(0, 255, 170, 0.08);
  color: #d0d0d0;
  text-align: left;
  backdrop-filter: blur(6px);
}

.dt-banner p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: #fff;
}

.dt-tip {
  font-size: 0.9rem;
  margin-top: 0.75rem;
  color: #a9ffc4;
}

.dt-tip em {
  color: #19c37d;
  font-style: italic;
}

.dt-library-banner {
  text-align: center;
  margin: 1.5rem auto 2.5rem;
}

.dt-library-link {
  display: inline-block;
  background: linear-gradient(90deg, #19c37d, #00ffc3);
  color: #0a0b0d;
  padding: 0.9rem 1.8rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 0 15px rgba(25, 195, 125, 0.3);
}

.dt-library-link:hover {
  transform: scale(1.05);
  opacity: 0.9;
}