/* ------------------------------------------------------------------
   site.css — hand-written layer on top of the generated design.css:
   fonts, brand themes, template conditionals, mobile, sticky CTA, video.
   ------------------------------------------------------------------ */

/* Fonts (Axi Saans, variable + static fallbacks) */
@font-face{font-family:"Axi Saans";src:url("../assets/fonts/AxiSaansVF.woff2") format("woff2-variations"),url("../assets/fonts/AxiSaansVF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Axi Saans Static";src:url("../assets/fonts/AxiSaans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Brand themes — the only thing that differs between axi and daniel */
:root{
  --accent:#E4002E;--accent-hover:#F00A38;
  --accent-glow:rgba(228,0,46,0.55);--accent-glow-strong:rgba(228,0,46,0.65);
  --accent-line:rgba(228,0,46,0.5);--accent-tint:rgba(228,0,46,0.12);
  --accent-veil:rgba(228,0,46,0.10);--accent-veil-strong:rgba(228,0,46,0.16);
  --on-accent:#FFFFFF;--on-accent-muted:rgba(255,255,255,0.85);--arrow-stroke:#FFFFFF;
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0 L8 4 L0 8 Z' fill='%23E4002E'/%3E%3C/svg%3E");
}
html[data-brand="daniel"]{
  --accent:#C9A24A;--accent-hover:#D5B05C;
  --accent-glow:rgba(201,162,74,0.45);--accent-glow-strong:rgba(201,162,74,0.55);
  --accent-line:rgba(201,162,74,0.5);--accent-tint:rgba(201,162,74,0.12);
  --accent-veil:rgba(201,162,74,0.10);--accent-veil-strong:rgba(201,162,74,0.16);
  --on-accent:#1A1508;--on-accent-muted:rgba(26,21,8,0.72);--arrow-stroke:#1A1508;
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0 L8 4 L0 8 Z' fill='%23C9A24A'/%3E%3C/svg%3E");
}

/* Base */
html{background:#080707;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#080707;color:#fff;font-family:"Axi Saans","Axi Saans Static",system-ui,sans-serif;font-weight:400}
*{box-sizing:border-box}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.page{min-height:100vh}

/* Template conditionals (x-if is layout-transparent) */
x-if{display:contents}
html[data-brand="axi"] x-if[data-if="brand-daniel"],
html[data-brand="daniel"] x-if[data-if="brand-axi"],
html[data-hero="question"] x-if[data-if="hero-story"],
html[data-hero="story"] x-if[data-if="hero-question"]{display:none}

/* Placeholder links (no URL yet) — visible but inert */
a.is-placeholder{cursor:default}

/* Grid children must be allowed to shrink (prevents horizontal overflow on phones) */
[class]{min-width:0}

/* Sticky bottom CTA — mobile only, appears after the hero */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(110%);transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.sticky-cta.is-visible{transform:translateY(0)}
@media (max-width:768px){
  .sticky-cta{display:block}
  body.has-sticky #footer{padding-bottom:96px}
}

/* Video slots */
[data-video]{cursor:pointer}
.video-slot.has-video{background-size:cover;background-position:center}
.video-slot.has-video .video-placeholder{display:none}
.video-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.88);padding:24px}
.video-modal.is-open{display:flex}
.video-modal video{max-width:min(96vw,1100px);max-height:90vh;width:auto;height:auto;background:#000;border-radius:12px;outline:none}
.video-modal video.is-vertical{max-height:90vh;max-width:min(96vw,420px)}
.video-modal__close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,0.35);background:rgba(0,0,0,0.5);color:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}

/* Timeline minutes: placeholder brackets hidden until confirmed */
html[data-minutes="off"] [data-minute],html[data-minutes="off"] [data-t="qaMinutes"],html[data-minutes="off"] [data-t="minutesNote"]{visibility:hidden}
html[data-minutes="on"] [data-minute]{color:#838383}

/* Hidden sections (e.g. testimonials before the videos arrive) */
.is-hidden{display:none!important}

/* --------------------------------------------------------------
   Mobile (≤768px) — values from the 390 artboard
   -------------------------------------------------------------- */
@media (max-width:768px){
  /* header: logo + CTA, date chip hidden */
  [data-el="header-inner"]{height:60px;padding:0 20px;gap:16px}
  [data-el="header-chip"]{display:none}
  #top a[data-cta]{height:40px;padding:0 18px;font-size:14px}
  #top img{height:20px}

  /* hero */
  #hero h1{font-size:38px;line-height:1.1;margin-top:18px}
  #hero > div:last-of-type{padding:36px 20px 40px;gap:26px}
  [data-el="cred-strip"]{grid-template-columns:1fr 1fr}
  [data-el="cred-strip"] > div:last-child{grid-column:1 / -1;border-top:1px solid #282828}

  /* facts table / timeline */
  [data-el="facts-row"]{grid-template-columns:96px 1fr;gap:14px;padding:14px 0}
  [data-el="timeline-row"]{grid-template-columns:44px 20px 1fr;gap:0 10px;padding:18px 0}

  /* steps */
  [data-el="step-row"]{grid-template-columns:40px 1fr;gap:18px}

  /* speaker card: avatar above text */
  [data-el="avatar"]{width:96px;height:96px}

  /* generic: all section containers get the 20px gutters and tighter vertical rhythm */
  section > div:first-child{padding-left:20px;padding-right:20px}
  h2{font-size:28px!important;line-height:1.16!important}
}
@media (max-width:420px){
  #hero h1{font-size:34px}
}

/* Editable copy: [[word]] → accent */
.accent-word{color:var(--accent)}
html[data-minutes="on"] [data-t="minutesNote"]{display:none}
html[data-minutes="off"] [data-t="qaMinutes"]{display:none}

/* Video modal body: file or iframe embed */
.video-modal__body{position:relative;width:min(96vw,1100px);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.video-modal__body.is-vertical{width:min(96vw,calc(90vh * 9 / 16));aspect-ratio:9/16}
.video-modal__body video,.video-modal__body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* Video present — frames (hero, "cómo funciona", testimonial thumbs): dimmed poster, text keeps contrast */
.video-slot--frame.has-video{position:relative;background-size:cover;background-position:center}
.video-slot--frame.has-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.30) 0%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.80) 100%);pointer-events:none}
.video-slot--frame.has-video img.video-poster{position:absolute;top:0;left:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:center;transform:none!important;filter:none!important}
.video-slot--frame.has-poster *{text-shadow:0 1px 2px rgba(0,0,0,0.6)}
/* Video present — clip cards (fireside): poster becomes a thumbnail strip, text stays on the dark card */
.video-slot--clip.has-video .video-thumb{aspect-ratio:16/9;border-radius:8px;background-size:cover;background-position:center;margin:0 0 16px;position:relative;overflow:hidden}
.video-slot--clip.has-video .video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,0.35) 100%)}
.video-slot.has-video .video-placeholder{display:none}

/* --------------------------------------------------------------
   Brand triangle glyphs (geometry from the brand book, Figma):
   - right-angle triangle with chamfered tips: corners, background pattern, label markers
   - isosceles ▶ with chamfered base: play icons (set in the markup by the build)
   -------------------------------------------------------------- */
:root{
  --tri-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M12 12L0 12L0 10.19L8.52 0L12 0Z' fill='%23000'/%3E%3C/svg%3E");
  --tri-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.83 15'%3E%3Cpath d='M9.83 7.5L2.38 15L0 13.37L0 1.63L2.38 0Z' fill='%23000'/%3E%3C/svg%3E");
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M20 21L12 21L12 19.65L17.68 12L20 12Z' fill='%23E4002E'/%3E%3C/svg%3E");
}
html[data-brand="daniel"]{
  --tri-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M20 21L12 21L12 19.65L17.68 12L20 12Z' fill='%23C9A24A'/%3E%3C/svg%3E");
}
/* label markers ▸ → brand ▶ (chamfered), same footprint */
.dbc65b9,.d6347c5,.dc41a1d,.dc7013a{border:0!important;background:var(--accent);-webkit-mask:var(--tri-play) center/contain no-repeat;mask:var(--tri-play) center/contain no-repeat}
.dbc65b9{width:7px!important;height:10px!important}
.d6347c5,.dc7013a{width:6.5px!important;height:9.5px!important}
.dc41a1d{width:5.5px!important;height:8px!important}
/* frame corners: right angle sits in the corner */
.dbe9e48,.d50777a,.dae4c46,.d5f6562{border:0!important;width:12px!important;height:12px!important;background:var(--accent);-webkit-mask:var(--tri-right) center/contain no-repeat;mask:var(--tri-right) center/contain no-repeat;top:auto;bottom:auto}
.dbe9e48{top:0!important;transform:rotate(180deg)}      /* top-left    ◤ */
.d50777a{top:0!important;transform:rotate(-90deg)}      /* top-right   ◥ */
.dae4c46{bottom:0!important;transform:none}             /* bottom-right ◢ */
.d5f6562{bottom:0!important;transform:rotate(90deg)}    /* bottom-left  ◣ */

/* FAQ availability answer: placeholder grey only while it is a placeholder */
.d66cf44:has(.is-real){color:#838383}