/* ==========================================================================
   Veritti — design system
   Palette and type derived from the 2026 brand presentations.
   ========================================================================== */

:root{
  /* ground */
  --ink:          #14100A;
  --ink-2:        #1C170D;
  --surface:      #221C11;
  --surface-2:    #2A2317;
  --surface-3:    #322A1B;

  /* gold */
  --gold:         #C9A15A;
  --gold-bright:  #DEC78D;
  --gold-pale:    #E7CF93;
  --gold-deep:    #8A6D33;

  /* type */
  --cream:        #F2EBDC;
  --wordmark:     #F3DCC3;   /* warm peach of the wordmark in the decks */

  /* semantic reject — kept in the warm family so it never fights the gold */
  --reject:       #C4614A;
  --reject-text:  #DDA08C;
  --cream-2:      #E1D8C6;
  --muted:        #A2967F;
  --muted-2:      #7E735F;

  --line:         rgba(201,161,90,.20);
  --line-soft:    rgba(201,161,90,.11);

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell:   1240px;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --band:    clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream-2);
  font-family:var(--font-sans);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

/* ---------- layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell--wide{ max-width:1440px; }
.band{ padding-block:var(--band); position:relative; }
.band--tight{ padding-block:clamp(3rem,6vw,5.5rem); }
.band--figure{ padding-block:clamp(2.5rem,5vw,4.25rem); }
.band--ink2{ background:var(--ink-2); }
.band--surface{ background:linear-gradient(180deg,var(--ink-2),var(--ink)); }

.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- type ---------- */
.eyebrow{
  font-size:.7rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.4rem;
}
.eyebrow--muted{ color:var(--muted); }

.display{
  font-family:var(--font-display);
  color:var(--cream);
  line-height:1.06;
  letter-spacing:-.015em;
  font-size:clamp(2.6rem,1.6rem + 4.4vw,5.1rem);
}
.h2{
  font-family:var(--font-display);
  color:var(--cream);
  line-height:1.12;
  letter-spacing:-.012em;
  font-size:clamp(2rem,1.35rem + 2.7vw,3.5rem);
}
.h3{
  font-family:var(--font-display);
  color:var(--cream);
  line-height:1.2;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);
}
.h4{
  font-family:var(--font-sans);
  color:var(--cream);
  font-size:1.075rem; font-weight:600; letter-spacing:-.005em; line-height:1.4;
}
em, .accent{ font-style:italic; color:var(--gold-bright); font-synthesis:none; }
.h2 em, .display em, .h3 em{ color:var(--gold-bright); }

.lede{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); line-height:1.7; color:var(--cream-2); max-width:60ch; }
.body{ color:var(--muted); max-width:66ch; }
.body strong{ color:var(--cream); font-weight:500; }
.small{ font-size:.875rem; line-height:1.65; color:var(--muted-2); }

.measure{ max-width:64ch; }
.stack > * + *{ margin-top:1.15rem; }
.stack-lg > * + *{ margin-top:1.9rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold-bright);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--solid{ background:var(--gold); color:#1A1409; border-color:var(--gold); }
.btn--solid:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:#1A1409; }
.btn--ghost{ border-color:var(--line); color:var(--cream-2); }
.btn--ghost:hover{ border-color:var(--gold); background:transparent; color:var(--gold-bright); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; }

.textlink{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.35rem;
  border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.textlink:hover{ color:var(--gold-bright); border-color:var(--gold); gap:.85rem; }
.textlink .arw{ transition:transform .3s var(--ease); }
.textlink:hover .arw{ transform:translateX(3px); }

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(20,16,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.masthead.is-stuck{ background:rgba(20,16,10,.94); border-bottom-color:var(--line-soft); }
.masthead__in{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  min-height:76px;
}
.brand{ display:flex; align-items:center; gap:.62rem; flex-shrink:0; }
/* the mark is wider than tall (350x325) — size on width and let height follow */
.brand__mark{ width:29px; height:27px; flex:none; }
.brand__word{
  font-family:var(--font-sans); font-weight:300; font-size:1.5rem;
  color:var(--wordmark); letter-spacing:-.005em; line-height:1;
}
.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav a{
  font-size:.775rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); position:relative; padding-block:.4rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s var(--ease);
}
.nav a:hover{ color:var(--cream); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--gold-bright); }
.masthead .btn{ padding:.72rem 1.35rem; font-size:.72rem; }
/* the CTA inside the drawer is for small screens only */
.navwrap > .btn{ display:none; }

.navtoggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-10px; }
.navtoggle span{ display:block; width:22px; height:1.5px; background:var(--cream); position:relative; transition:background .2s; }
.navtoggle span::before,.navtoggle span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--cream);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.navtoggle span::before{ top:-7px; } .navtoggle span::after{ top:7px; }
.navtoggle[aria-expanded="true"] span{ background:transparent; }
.navtoggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:960px){
  .navtoggle{ display:flex; }
  .masthead__in{ min-height:64px; }
  .navwrap{
    position:fixed; inset:64px 0 auto 0;
    background:var(--ink-2); border-bottom:1px solid var(--line-soft);
    padding:1.5rem var(--gutter) 2.25rem;
    display:none;
  }
  .navwrap.is-open{ display:block; }
  .nav{ flex-direction:column; align-items:stretch; gap:0; }
  .nav a{ padding-block:1rem; border-bottom:1px solid var(--line-soft); font-size:.85rem; letter-spacing:.1em; }
  .nav a::after{ display:none; }
  .navwrap > .btn{ display:flex; margin-top:1.5rem; width:100%; justify-content:center; padding:1rem; font-size:.78rem; }
  .masthead__in > .btn{ display:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--ink); isolation:isolate; }
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:62% 40%;
  opacity:.55; filter:saturate(.9) brightness(.78) contrast(1.05);
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, var(--ink) 0%, rgba(20,16,10,.94) 26%, rgba(20,16,10,.62) 52%, rgba(20,16,10,.34) 100%),
    linear-gradient(180deg, rgba(20,16,10,.55) 0%, rgba(20,16,10,0) 30%, rgba(20,16,10,.35) 78%, var(--ink) 100%);
}
@media (max-width:820px){
  .hero__bg{ opacity:.38; }
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(20,16,10,.72) 0%, rgba(20,16,10,.86) 45%, var(--ink) 100%);
  }
}
.hero__in{ padding-block:clamp(5rem,11vw,9.5rem) clamp(4rem,8vw,7rem); position:relative; }
.hero .display{ max-width:16ch; }
.hero .lede{ margin-top:1.9rem; }
.hero__meta{ margin-top:3rem; display:flex; flex-wrap:wrap; gap:1.5rem 2.75rem; }
.hero__meta li{
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:.7rem;
}
.hero__meta li::before{ content:""; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none; }

/* corner bracket frame — motif carried over from the brand presentations */
.framed{ position:relative; padding:clamp(2.25rem,5vw,4rem) clamp(1.25rem,4vw,3rem); }
.framed::before,.framed::after{
  content:""; position:absolute; width:clamp(32px,5vw,56px); height:clamp(32px,5vw,56px);
  pointer-events:none; border:1px solid rgba(201,161,90,.38);
}
.framed::before{ top:0; left:0; border-right:0; border-bottom:0; }
.framed::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* ---------- two-door ---------- */
.doors{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); }
@media (max-width:820px){ .doors{ grid-template-columns:1fr; } }
.door{
  background:var(--ink-2);
  padding:clamp(2.25rem,4vw,3.75rem);
  display:flex; flex-direction:column; gap:1.1rem;
  transition:background .45s var(--ease);
  position:relative;
}
.door:hover{ background:var(--surface); }
.door__num{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-deep); line-height:1; }
.door .h3{ margin-top:.4rem; }
.door .textlink{ margin-top:auto; align-self:flex-start; padding-top:1.5rem; }

/* ---------- grids & cards ---------- */
.grid{ display:grid; gap:1.5rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .grid--4{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(160deg,var(--surface) 0%,rgba(28,23,13,.55) 100%);
  border:1px solid var(--line-soft);
  padding:clamp(1.6rem,2.4vw,2.15rem);
  display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.card:hover{ border-color:var(--line); transform:translateY(-3px); }
.card__ico{ width:26px; height:26px; color:var(--gold); margin-bottom:.35rem; }
.card p{ color:var(--muted); font-size:.965rem; line-height:1.7; }
.card--flush{ background:none; border:0; padding:0; }
.card--flush:hover{ transform:none; }

/* stat blocks */
.stat{ border-left:1px solid var(--line); padding-left:1.4rem; }
.stat__n{
  font-family:var(--font-display); font-size:clamp(2.3rem,1.6rem + 2.4vw,3.4rem);
  color:var(--gold-bright); line-height:1; letter-spacing:-.02em;
}
.stat__n sup{ font-size:.48em; top:-.5em; position:relative; letter-spacing:0; }
.stat__l{
  margin-top:.85rem; font-size:.68rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.stat p{ margin-top:.7rem; color:var(--muted); font-size:.92rem; line-height:1.65; }

/* numbered steps */
.steps{ display:grid; gap:2.25rem 1.75rem; grid-template-columns:repeat(5,1fr); }
.steps--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .steps,.steps--4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .steps,.steps--4{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:1.75rem; border-top:1px solid var(--line-soft); }
.step__n{ font-family:var(--font-display); font-size:1.75rem; color:var(--gold); line-height:1; display:block; margin-bottom:.9rem; }
.step h3{ font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); margin-bottom:.75rem; }
.step p{ color:var(--muted); font-size:.925rem; line-height:1.7; }

/* split media / text */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--media-right{ grid-template-columns:1.05fr .95fr; }
@media (max-width:900px){ .split,.split--media-right{ grid-template-columns:1fr; } }
.split__media{ position:relative; }
.split__media img{ width:100%; border:1px solid var(--line-soft); }
.split__media--phone{ display:flex; justify-content:center; gap:1.5rem; }
.split__media--phone img{ width:min(260px,44%); border:0; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

/* feature list with rules */
.deflist{ border-top:1px solid var(--line-soft); }
.deflist li{ padding-block:1.5rem; border-bottom:1px solid var(--line-soft); display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:baseline; }
.deflist .n{ font-family:var(--font-display); color:var(--gold); font-size:1.05rem; line-height:1.4; min-width:2ch; }
.deflist h3{ font-size:1.05rem; font-weight:600; color:var(--cream); margin-bottom:.45rem; font-family:var(--font-sans); letter-spacing:-.005em; }
.deflist p{ color:var(--muted); font-size:.95rem; }

/* pull quote */
.quote{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:760px){ .quote{ grid-template-columns:1fr; } }
.quote img{ width:132px; height:132px; border-radius:50%; object-fit:cover; }
.quote blockquote{
  margin:0; font-family:var(--font-display); font-size:clamp(1.2rem,1.05rem + .8vw,1.75rem);
  line-height:1.45; color:var(--cream); font-style:italic;
}
.quote figcaption{ margin-top:1.5rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.quote figcaption span{ display:block; color:var(--muted-2); letter-spacing:.14em; margin-top:.4rem; }

/* callout panel */
.panel{
  border:1px solid var(--line); background:linear-gradient(150deg,var(--surface-2),rgba(28,23,13,.4));
  padding:clamp(2rem,4vw,3.5rem);
}
.panel--edge{ border-left:2px solid var(--gold); border-top:0; border-right:0; border-bottom:0; padding:.25rem 0 .25rem 1.6rem; background:none; }

/* section head */
.sechead{ max-width:64ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sechead.center{ max-width:78ch; }
.sechead.center .h2{ max-width:24ch; margin-inline:auto; }
.sechead--split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,4rem); align-items:end; max-width:none; }
@media (max-width:860px){ .sechead--split{ grid-template-columns:1fr; align-items:start; } }
.sechead--split .body{ padding-bottom:.4rem; }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; background:var(--ink-2); }
.cta__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; filter:saturate(.6); }
.cta__in{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.cta .lede{ text-align:center; }
.cta .btn-row{ justify-content:center; margin-top:.8rem; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:1px solid var(--line-soft); padding-block:clamp(3.25rem,6vw,4.75rem) 2.25rem; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
@media (max-width:900px){ .foot__top{ grid-template-columns:1fr 1fr; gap:2.5rem 2rem; } }
@media (max-width:540px){ .foot__top{ grid-template-columns:1fr; } }
.foot h4{ font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.foot li + li{ margin-top:.7rem; }
.foot a{ color:var(--muted); font-size:.92rem; transition:color .3s var(--ease); }
.foot a:hover{ color:var(--gold-bright); }
.foot__bar{
  margin-top:clamp(2.5rem,5vw,3.75rem); padding-top:1.75rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center;
}
.foot__bar p{ font-size:.78rem; color:var(--muted-2); letter-spacing:.02em; }

/* ---------- page header (interior) ---------- */
.pagehead{ position:relative; overflow:hidden; background:var(--ink-2); border-bottom:1px solid var(--line-soft); }
.pagehead__bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; filter:saturate(.6) brightness(.8); }
/* small repeating motif instead of a blown-up crop */
.pagehead__bg--tile{ background-size:190px; background-repeat:repeat; opacity:.075; filter:none; }
.pagehead__in{ position:relative; padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem); }
.pagehead .h2{ max-width:18ch; }
.pagehead .lede{ margin-top:1.6rem; }

/* ---------- form ---------- */
.form{ display:grid; gap:1.4rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:640px){ .form .row{ grid-template-columns:1fr; } }
.field label{
  display:block; font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.65rem;
}
.field input,.field select,.field textarea{
  width:100%; background:var(--ink); border:1px solid var(--line-soft); color:var(--cream);
  padding:.95rem 1.05rem; font:inherit; font-size:.98rem; border-radius:0;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  appearance:none;
}
.field textarea{ min-height:150px; resize:vertical; }
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A15A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05rem center; background-size:11px; padding-right:2.6rem;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); outline:none; background:var(--surface); }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }

/* contact tiles */
.contactlist li{ padding-block:1.4rem; border-bottom:1px solid var(--line-soft); }
.contactlist li:first-child{ border-top:1px solid var(--line-soft); }
.contactlist .k{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; }
.contactlist .v{ font-family:var(--font-display); font-size:1.35rem; color:var(--cream); }
.contactlist a.v:hover{ color:var(--gold-bright); }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* utilities */
.center{ text-align:center; margin-inline:auto; }
.gold{ color:var(--gold-bright); }
.mt-sm{ margin-top:1.25rem; } .mt-md{ margin-top:2.25rem; } .mt-lg{ margin-top:3.25rem; }
.hide-sm{ display:initial; }
@media (max-width:700px){ .hide-sm{ display:none; } }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--gold); color:var(--ink); padding:.7rem 1.2rem; }

/* ==========================================================================
   Scan sequence — the tap-to-verify moment, animated over the scene photo
   ========================================================================== */

.scan-wrap{ margin:0; }

.scan{
  position:relative;
  aspect-ratio:980/1370;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--ink-2);
  isolation:isolate;
  container-type:inline-size;
}
.scan__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(.88) brightness(.92);
}
/* settle the photo into the page palette, and darken the lower-left for the card */
.scan::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(72% 46% at 24% 82%, rgba(12,9,5,.88) 0%, rgba(12,9,5,.36) 58%, rgba(12,9,5,0) 80%),
    linear-gradient(180deg, rgba(28,23,13,.30) 0%, rgba(28,23,13,0) 34%, rgba(12,9,5,.44) 100%);
}
.scan__fx{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }

.scan__caption{
  margin-top:.7rem; text-align:right;
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2);
}

/* ---- the verification card (scales with the stage) ---- */
.scan__card{
  position:absolute; z-index:4;
  left:5%; bottom:6%; width:56cqw; max-width:300px;
  font-size:clamp(11px, 3.15cqw, 14px);
  background:linear-gradient(158deg, rgba(44,36,23,.965), rgba(19,15,9,.965));
  border:1px solid rgba(201,161,90,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 26px 60px rgba(0,0,0,.62);
  padding:.85em 1em .95em;
  opacity:0;
}
.scan__cardhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6em;
  padding-bottom:.6em; border-bottom:1px solid rgba(201,161,90,.18);
}
.scan__cardhead b{
  font-family:var(--font-sans); font-weight:300; font-size:1.15em;
  color:var(--wordmark); letter-spacing:-.005em; line-height:1;
}
.scan__state{
  font-size:.62em; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; line-height:1;
}

/* resolved state sets the card height; the waiting state sits on top of it */
.scan__body{ position:relative; padding-top:.85em; }

.scan__done{ opacity:0; }
.scan__verdict{ display:flex; align-items:center; gap:.55em; }
.scan__tick{
  width:2em; height:1.86em; flex:none; color:var(--gold);
  clip-path:inset(0 100% 0 0);          /* wiped in left to right, so the dot lands last */
}
.scan__verdict b{
  font-family:var(--font-display); font-weight:400; font-size:1.4em;
  color:var(--cream); line-height:1;
}
.scan__item{ margin-top:.5em; font-size:.92em; color:var(--muted); }
.scan__rows{ margin-top:.7em; display:grid; gap:.35em; }
.scan__rows li{
  display:flex; justify-content:space-between; gap:.8em;
  font-size:.75em; letter-spacing:.05em; color:var(--muted-2); line-height:1.4;
  padding-top:.35em; border-top:1px solid rgba(201,161,90,.12);
  opacity:0;
}
.scan__rows li span:last-child{ color:var(--cream-2); text-align:right; }

.scan__wait{ position:absolute; inset:.85em 0 0; }
.scan__bar{ height:2px; background:rgba(201,161,90,.16); overflow:hidden; margin-bottom:.7em; }
.scan__bar i{ display:block; height:100%; width:34%; background:var(--gold); transform:translateX(-110%); }
.scan__wait p{ font-size:.72em; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.scan__skel{ margin-top:.9em; display:grid; gap:.45em; }
.scan__skel span{ display:block; height:6px; background:rgba(201,161,90,.10); }
.scan__skel span:nth-child(1){ width:76%; }
.scan__skel span:nth-child(2){ width:52%; }
.scan__skel span:nth-child(3){ width:64%; }

/* ---- SVG effect layer ---- */
.scan__wave, .scan__ring, .scan__anchor{ transform-box:fill-box; transform-origin:center; }
.scan__wave{ opacity:0; }
.scan__link{ stroke-dasharray:340; stroke-dashoffset:340; }
.scan__anchor{ opacity:0; }

/* ==========================================================================
   Timeline — one 10s loop, every element on the same clock.
   Runs only while the stage is on screen (.is-live).
   ========================================================================== */
.scan.is-live .scan__ring   { animation:scanRing   10s linear infinite; }
.scan.is-live .scan__wave   { animation:scanWave   10s linear infinite; }
.scan.is-live .scan__wave--2{ animation-delay:.18s; }
.scan.is-live .scan__wave--3{ animation-delay:.36s; }
.scan.is-live .scan__link   { animation:scanLink   10s linear infinite; }
.scan.is-live .scan__anchor { animation:scanAnchor 10s linear infinite; }
.scan.is-live .scan__card   { animation:scanCard   10s linear infinite; }
.scan.is-live .scan__state  { animation:scanState  10s linear infinite; }
.scan.is-live .scan__bar i  { animation:scanBar    10s linear infinite; }
.scan.is-live .scan__wait   { animation:scanWait   10s linear infinite; }
.scan.is-live .scan__done   { animation:scanDone   10s linear infinite; }
.scan.is-live .scan__tick   { animation:scanTick   10s linear infinite; }
.scan.is-live .scan__rows li{ animation:scanRow    10s linear infinite; }
.scan.is-live .scan__rows li:nth-child(2){ animation-delay:.22s; }
.scan.is-live .scan__rows li:nth-child(3){ animation-delay:.44s; }

@keyframes scanRing{
  0%,5%   { transform:scale(1);    opacity:.5; }
  8%      { transform:scale(.72);  opacity:1; }
  12%     { transform:scale(1.06); opacity:.8; }
  16%,92% { transform:scale(1);    opacity:.45; }
  100%    { transform:scale(1);    opacity:.5; }
}
@keyframes scanWave{
  0%,7%   { transform:scale(.35); opacity:0; }
  9%      { opacity:1; }
  20%     { transform:scale(3.1); opacity:0; }
  100%    { transform:scale(3.1); opacity:0; }
}
@keyframes scanLink{
  0%,14%  { stroke-dashoffset:340; opacity:0; }
  15%     { opacity:.9; }
  24%     { stroke-dashoffset:0;   opacity:.9; }
  86%     { stroke-dashoffset:0;   opacity:.9; }
  93%,100%{ stroke-dashoffset:340; opacity:0; }
}
@keyframes scanAnchor{
  0%,22%  { opacity:0; transform:scale(.4); }
  26%,88% { opacity:1; transform:scale(1); }
  94%,100%{ opacity:0; transform:scale(.4); }
}
@keyframes scanCard{
  0%,19%  { opacity:0; transform:translateY(16px) scale(.985); }
  25%,87% { opacity:1; transform:none; }
  94%,100%{ opacity:0; transform:translateY(10px) scale(.99); }
}
@keyframes scanState{ 0%,19%{opacity:0} 25%,87%{opacity:1} 94%,100%{opacity:0} }
@keyframes scanBar{
  0%,20%  { transform:translateX(-110%); }
  38%     { transform:translateX(300%); }
  39%,100%{ transform:translateX(300%); }
}
@keyframes scanWait{ 0%,36%{opacity:1} 41%,100%{opacity:0} }
@keyframes scanDone{ 0%,38%{opacity:0} 43%,88%{opacity:1} 94%,100%{opacity:0} }
@keyframes scanTick{
  0%,40%  { clip-path:inset(0 100% 0 0); }
  50%,100%{ clip-path:inset(0 0 0 0); }
}
@keyframes scanRow{
  0%,44%  { opacity:0; transform:translateY(5px); }
  50%,88% { opacity:1; transform:none; }
  94%,100%{ opacity:0; transform:none; }
}

/* motion off: hold the resolved state, no movement */
@media (prefers-reduced-motion:reduce){
  .scan.is-live *{ animation:none !important; }
  .scan__card,.scan__state,.scan__done,.scan__anchor{ opacity:1 !important; transform:none !important; }
  .scan__rows li{ opacity:1 !important; transform:none !important; }
  .scan__wait{ opacity:0 !important; }
  .scan__tick{ clip-path:none !important; }
  .scan__link{ stroke-dashoffset:0 !important; opacity:.9 !important; }
}

/* ==========================================================================
   Figure: the binding — what the tag carries vs what the core holds
   ========================================================================== */

.fig{ margin:0; }
.fig--bind{ max-width:1020px; margin-inline:auto; }
.fig > svg{ width:100%; height:auto; display:block; overflow:visible; }
.fig{ container-type:inline-size; }
.fig figcaption{
  margin-top:1.1rem; font-size:.82rem; line-height:1.6; color:var(--muted-2); max-width:70ch;
}
.fig figcaption b{ color:var(--muted); font-weight:500; }

.bind__panel{ fill:var(--surface); stroke:rgba(201,161,90,.22); stroke-width:1; }
.bind__panel--core{ fill:#241D12; stroke:rgba(201,161,90,.38); }
.bind__label{ font:600 11px var(--font-sans); letter-spacing:.18em; text-transform:uppercase; fill:var(--gold); }
.bind__key{ font:400 13px var(--font-sans); fill:var(--muted); }
.bind__val{ font:500 13px var(--font-sans); fill:var(--cream-2); }
.bind__note{ font:400 12px var(--font-sans); fill:var(--muted-2); }
.bind__edge{ font:500 11px var(--font-sans); letter-spacing:.1em; fill:var(--gold); text-transform:uppercase; }
.bind__wire{ stroke:rgba(201,161,90,.45); stroke-width:1.5; fill:none; }
.bind__verdict{ font:400 22px var(--font-display); fill:var(--cream); }

.bind__row{ opacity:.28; }
.bind__rowbar{ fill:var(--gold); opacity:0; }
.bind__pulse{ fill:var(--gold-bright); opacity:0; }
.bind__out{ opacity:0; }

.fig--bind.is-live .bind__pulse--a{ animation:bindPulseA 9s linear infinite; }
.fig--bind.is-live .bind__pulse--b{ animation:bindPulseB 9s linear infinite; }
.fig--bind.is-live .bind__row--1{ animation:bindRow 9s linear infinite; }
.fig--bind.is-live .bind__row--2{ animation:bindRow 9s linear infinite .7s; }
.fig--bind.is-live .bind__row--3{ animation:bindRow 9s linear infinite 1.4s; }
.fig--bind.is-live .bind__rowbar--1{ animation:bindBar 9s linear infinite; }
.fig--bind.is-live .bind__rowbar--2{ animation:bindBar 9s linear infinite .7s; }
.fig--bind.is-live .bind__rowbar--3{ animation:bindBar 9s linear infinite 1.4s; }
.fig--bind.is-live .bind__out{ animation:bindOut 9s linear infinite; }

@keyframes bindPulseA{
  0%,6%   { transform:translateX(0);    opacity:0; }
  9%      { opacity:1; }
  20%     { transform:translateX(128px);opacity:1; }
  23%,100%{ transform:translateX(140px);opacity:0; }
}
@keyframes bindPulseB{
  0%,52%  { transform:translateX(0);    opacity:0; }
  55%     { opacity:1; }
  66%     { transform:translateX(96px); opacity:1; }
  69%,100%{ transform:translateX(108px);opacity:0; }
}
@keyframes bindRow{
  0%,22%  { opacity:.28; }
  27%,88% { opacity:1; }
  95%,100%{ opacity:.28; }
}
@keyframes bindBar{
  0%,22%  { opacity:0; }
  27%,88% { opacity:1; }
  95%,100%{ opacity:0; }
}
@keyframes bindOut{
  0%,62%  { opacity:0; }
  70%,90% { opacity:1; }
  96%,100%{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .fig--bind.is-live *{ animation:none !important; }
  .bind__row,.bind__rowbar,.bind__out{ opacity:1 !important; }
  .bind__pulse{ opacity:0 !important; }
}

/* ==========================================================================
   Figure: original tag vs cloned tag — the same number, two outcomes
   ========================================================================== */

.clone{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
@media (max-width:760px){ .clone{ grid-template-columns:1fr; } }

.clone__col{ background:var(--ink-2); padding:clamp(1.4rem,2.6vw,2rem); }
.clone__col--bad{ background:linear-gradient(170deg, rgba(58,32,24,.42), var(--ink-2) 62%); }

.clone__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.clone__head h3{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream); font-family:var(--font-sans);
}
.clone__uid{ font:400 .72rem/1 var(--font-sans); letter-spacing:.08em; color:var(--muted-2); }
.clone__col--bad .clone__uid{ color:var(--reject); }

.clone__rows{ margin-top:1.35rem; }
.clone__rows li{
  display:grid; grid-template-columns:8.5rem 1fr; gap:.9rem; align-items:baseline;
  padding-block:.8rem; border-top:1px solid rgba(201,161,90,.12);
  font-size:.9rem;
  opacity:0; transform:translateY(6px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
@media (max-width:420px){ .clone__rows li{ grid-template-columns:1fr; gap:.2rem; } }
.clone.in .clone__rows li{ opacity:1; transform:none; }
.clone.in .clone__rows li:nth-child(1){ transition-delay:.05s; }
.clone.in .clone__rows li:nth-child(2){ transition-delay:.20s; }
.clone.in .clone__rows li:nth-child(3){ transition-delay:.35s; }
.clone.in .clone__rows li:nth-child(4){ transition-delay:.50s; }
.clone__rows .k{ color:var(--muted-2); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.clone__rows .v{ color:var(--cream-2); }
.clone__col--bad .clone__rows .v{ color:var(--reject-text); }

.clone__verdict{
  margin-top:1.5rem; display:flex; align-items:center; gap:.75rem;
  padding-top:1.2rem; border-top:1px solid rgba(201,161,90,.18);
  opacity:0; transform:translateY(8px);
  transition:opacity .7s var(--ease) .72s, transform .7s var(--ease) .72s;
}
.clone.in .clone__verdict{ opacity:1; transform:none; }
.clone__verdict b{ font-family:var(--font-display); font-size:1.5rem; font-weight:400; color:var(--cream); }
.clone__col--bad .clone__verdict{ border-top-color:rgba(196,97,74,.34); }
.clone__col--bad .clone__verdict b{ color:var(--reject-text); }
.clone__mark{ width:30px; height:28px; flex:none; color:var(--gold); }
.clone__mark--bad{ color:var(--reject); }
.clone__why{ margin-top:.9rem; font-size:.82rem; line-height:1.65; color:var(--muted); }
.clone__col--bad .clone__why{ color:var(--reject-text); opacity:.86; }

/* ==========================================================================
   Demo video — a real player, embedded in the page
   --player-ratio is the ONE value to change: 16/9 landscape, 9/16 portrait.
   ========================================================================== */

.player{
  --player-ratio: 16 / 9;
  position:relative;
  aspect-ratio:var(--player-ratio);
  border:1px solid rgba(201,161,90,.28);
  background:#0A0805;
  overflow:hidden;
  box-shadow:0 28px 62px rgba(0,0,0,.55);
}
.player iframe,
.player video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.player video{ object-fit:contain; background:#0A0805; }

/* portrait source: keep the player from towering over the text column */
.player--portrait{ --player-ratio: 9 / 16; max-width:340px; margin-inline:auto; }

.player__cap{
  margin-top:.95rem;
  font-size:.7rem; letter-spacing:.06em; color:var(--muted-2);
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:baseline;
}
.player__cap a{
  color:var(--gold); border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.player__cap a:hover{ color:var(--gold-bright); border-color:var(--gold); }

/* a missing video should say so, not leave a black hole */
.player__fallback{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; padding:1.5rem; text-align:center;
  background:linear-gradient(168deg,#241D12 0%,#0F0B07 60%,#1A150D 100%);
}
.player__fallback b{
  font-family:var(--font-display); font-weight:400; font-size:1.15rem; color:var(--cream);
}
.player__fallback span{ font-size:.82rem; line-height:1.6; color:var(--muted); max-width:42ch; }
.player__fallback code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:var(--gold);
}

/* ==========================================================================
   App store links + QR codes — sits in the footer on every page
   Selectors are scoped under .foot so the generic footer link styling
   (.foot a) does not win over them.
   ========================================================================== */

.apps{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--line-soft);
}
.apps__row{ display:flex; flex-wrap:wrap; gap:1.6rem 3rem; align-items:center; }

.app{ display:flex; align-items:center; gap:1.1rem; }

.foot .app__btn{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:.72rem 1.25rem;
  border:1px solid var(--line);
  font-size:inherit;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.foot .app__btn:hover{ border-color:var(--gold); background:rgba(201,161,90,.07); }
.app__ico{ width:19px; height:19px; flex:none; color:var(--gold); }
.app__txt{ display:flex; flex-direction:column; line-height:1.2; }
.app__txt small{
  font-size:.56rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
}
.app__txt b{ font-size:.95rem; font-weight:500; color:var(--cream); letter-spacing:-.005em; }
.foot .app__btn:hover .app__txt b{ color:var(--gold-bright); }

.app__qr{
  width:132px; height:132px; flex:none; display:block;
  border:1px solid var(--line-soft); padding:0;
  /* browsers smooth-scale images by default, which blurs the module edges and
     stops a phone camera resolving the code. Nearest-neighbour keeps them square. */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.apps__note{ margin-top:1.4rem; font-size:.72rem; color:var(--muted-2); letter-spacing:.02em; }

/* a phone cannot scan its own screen, so the codes are desktop-only */
@media (max-width:760px){
  .app__qr, .apps__note{ display:none; }
  .apps__row{ gap:.9rem; flex-direction:column; align-items:stretch; }
  .app{ width:100%; }
  .foot .app__btn{ width:100%; justify-content:center; }
}

/* app screen shown beside the consumer copy on the home page */
.phoneshot{ display:flex; justify-content:center; }
.phoneshot img{
  width:min(300px, 78%);
  filter:drop-shadow(0 30px 62px rgba(0,0,0,.6));
}

/* the demo film gets its own band rather than competing with the app screen */
.filmband{ max-width:900px; margin-inline:auto; }
.filmband .sechead{ margin-bottom:clamp(2rem,4vw,2.75rem); }

/* hero split: copy on the left, app screen on the right */
.hero__grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero__shot{ display:flex; justify-content:center; }
.hero__shot img{
  width:min(310px, 82%);
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.66));
}
@media (max-width:940px){
  .hero__grid{ grid-template-columns:1fr; gap:clamp(2.25rem,6vw,3rem); }
  .hero__shot img{ width:min(230px, 62%); }
}