/* VIPriority — security-print palette: certificate paper, engraving ink, guilloché teal, seal garnet */
:root {
  --paper: #e8ece4;
  --paper-deep: #d6ddd2;
  --paper-hi: #f4f6f1;
  --ink: #111a24;
  --ink-soft: #4a5560;
  --teal: #2f6a63;
  --garnet: #9e1f3a;
  --foil: #b89b5e;
  --nav: #03101f;
  --gold: #c8a95d;
  --rule: rgba(17, 26, 36, .16);
  --display: "Gloock", "Times New Roman", serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--garnet); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* type */
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5.1rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.06; }
h3 { font-size: 1.45rem; line-height: 1.2; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-soft); max-width: 38em; }
.label {
  font: 500 .74rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.serial { font-family: var(--mono); letter-spacing: .04em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .9em 1.5em;
  font: 600 1rem/1 var(--body);
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.btn-primary { background: var(--ink); color: var(--paper-hi); }
.btn-primary:hover { background: var(--garnet); border-color: var(--garnet); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper-hi); }

/* header */
/* header: matches the logo's own navy-black ground so the mark sits seamlessly */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav);
  border-bottom: 1px solid rgba(200, 169, 93, .28);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 16px; }
.brand { display: block; line-height: 0; }
.brand img { height: 62px; width: auto; }
.top nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.top nav a:not(.btn) { text-decoration: none; font-size: .95rem; color: #c3cad3; }
.top nav a:not(.btn):hover { color: #fff; }
.top :focus-visible { outline-color: var(--gold); }
.top .btn { padding: .65em 1.15em; font-size: .9rem; background: var(--gold); border-color: var(--gold); color: var(--nav); }
.top .btn:hover { background: #fff; border-color: #fff; color: var(--nav); }
@media (max-width: 760px) { .top nav a:not(.btn) { display: none; } .brand img { height: 42px; } }
/* phones: the nav links are hidden, so the header would only repeat the hero's
   "Get early access" button. Keep it out of view until the hero buttons have
   scrolled away, then slide it in. Without JS it stays as before. */
@media (max-width: 760px) {
  .js .top { position: fixed; left: 0; right: 0; transform: translateY(-100%); visibility: hidden; }
  .js .top.show { transform: none; visibility: visible; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .js .top { transition: transform .25s ease, visibility .25s; }
}

/* hero */
.vip > *, .apply > *, .fit > *, .facts > * { min-width: 0; }

/* hero image */
.hero-img { background: #000; color: #f1e9da; }
.hero-frame { position: relative; max-width: 1680px; margin: 0 auto; }
.hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #e9ede5; }
.hero-play { position: absolute; right: 16px; bottom: 16px; padding: .7em 1.2em; border: 1.5px solid var(--gold); border-radius: 999px; background: rgba(3, 16, 31, .86); color: #f1e9da; font: 600 .95rem/1 var(--body); cursor: pointer; }
.hero-play[hidden] { display: none; }
.hero-cta { padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(28px, 4vw, 48px); }
.hero-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-cta .fine { margin: 1.1em 0 0; font-size: .86rem; color: #a99d88; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #000; }
.btn-gold:hover { background: #f1e9da; border-color: #f1e9da; }
.btn-line { background: transparent; border-color: rgba(241, 233, 218, .55); color: #f1e9da; }
.btn-line:hover { border-color: #f1e9da; background: rgba(241, 233, 218, .1); }
.hero-img :focus-visible { outline-color: var(--gold); }

/* how it works head, with the sample certificate beside it */
.how-head { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(32px, 6vw, 80px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.how-head .section-head { margin-bottom: 0; }
.how-head > * { min-width: 0; }
@media (max-width: 900px) { .how-head { grid-template-columns: 1fr; } }

/* the certificate (signature) */
.cert {
  position: relative;
  margin: 0;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  padding: 14px;
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -30px rgba(17, 26, 36, .35);
  transform: rotate(-1.2deg);
}
.cert-inner {
  position: relative;
  border: 1.5px solid var(--teal);
  outline: 1px solid var(--teal);
  outline-offset: -6px;
  padding: clamp(22px, 3.4vw, 34px);
  overflow: hidden;
  isolation: isolate;
}
.cert .rosette { position: absolute; z-index: -1; width: 92%; right: -38%; top: -14%; opacity: .32; }
.cert .rosette path { fill: none; stroke: var(--teal); stroke-width: .55; }
.cert .microline {
  font: 500 6.5px/1 var(--mono); letter-spacing: .08em; color: var(--teal);
  white-space: nowrap; overflow: hidden; opacity: .8; margin: 0 0 18px;
}
.cert .microline.bottom { margin: 18px 0 0; }
.cert .label, .cert h2, .cert .piece { max-width: calc(100% - 104px); }
.cert h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05; }
.cert .piece { margin: 18px 0 20px; font-size: .95rem; }
.cert .piece strong { display: block; font: 400 1.25rem/1.2 var(--display); }
.cert dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: .85rem; }
.cert dt { font: 500 .66rem/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cert dd { margin: 0; }
.cert .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 22px; }
.cert .qr { width: 86px; height: 86px; background: #fff; padding: 6px; border: 1px solid var(--rule); flex: none; }
.cert .qr svg { width: 100%; height: 100%; }
.cert .scan { font-size: .78rem; color: var(--ink-soft); max-width: 15em; }
.stamp {
  position: absolute; right: 22px; top: 62px;
  width: 112px; height: 112px; border-radius: 50%;
  border: 2px solid var(--garnet); color: var(--garnet);
  display: grid; place-items: center; text-align: center;
  font: 600 .66rem/1.25 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(14deg);
  mix-blend-mode: multiply;
}
.stamp::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--garnet); }
.stamp b { display: block; font: 400 1.3rem/1.1 var(--display); letter-spacing: 0; text-transform: none; }

/* load sequence: rosette draws, then the stamp presses */
@media (prefers-reduced-motion: no-preference) {
  .js .rosette path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 2.4s cubic-bezier(.6, .1, .3, 1) forwards; }
  .js .stamp { opacity: 0; animation: press .45s 2s cubic-bezier(.2, 1.6, .4, 1) forwards; }
}
@media (max-width: 520px) {
  .stamp { width: 84px; height: 84px; right: 14px; top: 52px; font-size: .56rem; }
  .stamp b { font-size: 1rem; }
  .cert .label, .cert h2, .cert .piece { max-width: calc(100% - 78px); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes press { from { opacity: 0; transform: rotate(14deg) scale(1.6); } to { opacity: .92; transform: rotate(14deg) scale(1); } }

/* sections */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-head { max-width: 46em; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { margin: .35em 0 .45em; }
.band { background: var(--paper-deep); }
.inkband { background: var(--ink); color: var(--paper); }
.inkband .lede { color: #b7c0c4; }
.inkband .label { color: var(--foil); }

/* journey (a real sequence: one client's path through the app) */
.journey { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.journey li {
  display: grid; grid-template-columns: 200px 1fr 1.1fr; gap: clamp(16px, 3vw, 40px);
  padding: 30px 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.journey .when { font: 500 .78rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); padding-top: .35em; }
.journey h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.journey p { color: var(--ink-soft); margin: 0; }
.journey .module { display: inline-block; margin-top: 12px; font: 500 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--garnet); }
@media (max-width: 820px) { .journey li { grid-template-columns: 1fr; gap: 8px; } }

/* progress demo */
.vip { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .vip { grid-template-columns: 1fr; } }
.shopfront { background: var(--paper-hi); color: var(--ink); padding: clamp(20px, 3vw, 30px); border-radius: 4px; }
.shopfront .bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; margin-bottom: 10px; }
.shopfront .bar-head b { font-weight: 600; }
.bar { height: 10px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--teal), var(--foil)); border-radius: inherit; transition: width .35s ease; }
.shopfront .msg { margin: 14px 0 0; font-size: .95rem; min-height: 3em; }
.shopfront .msg.unlocked { color: var(--garnet); font-weight: 600; }
.slider { margin-top: 26px; }
.slider label { display: flex; justify-content: space-between; font-size: .86rem; color: #b7c0c4; margin-bottom: 8px; }
.slider output { font-family: var(--mono); color: var(--paper); }
input[type="range"] { width: 100%; accent-color: var(--foil); }
.vip ul { padding-left: 1.1em; margin: 1.4em 0 0; color: #c9d0d2; }
.vip li { margin-bottom: .5em; }

/* who it's for */
.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; } }
.fit article img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--paper-deep); margin-bottom: 18px; }
.fit h3 { margin-bottom: .4em; }
.fit p { color: var(--ink-soft); font-size: .98rem; }

/* facts */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }
.facts details { border-top: 1px solid var(--rule); padding: 20px 0; }
.facts summary { cursor: pointer; list-style: none; font: 400 1.2rem/1.3 var(--display); display: flex; justify-content: space-between; gap: 16px; }
.facts summary::-webkit-details-marker { display: none; }
.facts summary::after { content: "+"; font-family: var(--mono); color: var(--teal); }
.facts details[open] summary::after { content: "–"; }
.facts details p { margin: 12px 0 0; color: var(--ink-soft); }

/* early access form */
.apply { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .apply { grid-template-columns: 1fr; } }
.form { background: var(--paper-hi); border: 1px solid var(--rule); padding: clamp(22px, 4vw, 40px); }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font: 500 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--body); color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: .75em .85em; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form .note { font-size: .84rem; color: var(--ink-soft); margin: 14px 0 0; }

/* footer */
.foot-site { border-top: 1px solid var(--rule); padding: 36px 0 48px; font-size: .88rem; color: var(--ink-soft); }
.foot-site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.foot-site a { color: var(--ink); }

/* thanks page */
.thanks { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 64px 0; }
.thanks .card { max-width: 620px; }
.thanks ol { padding-left: 1.2em; color: var(--ink-soft); }
.thanks li { margin-bottom: .7em; }
[id] { scroll-margin-top: 88px; }

/* legal pages */
.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px); }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: .3em 0 .2em; }
.legal .updated { color: var(--ink-soft); font-size: .92rem; margin-bottom: 2.4em; }
.legal h2 { font-size: 1.55rem; margin: 2em 0 .6em; }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .6em; }
.legal a { color: var(--teal); }
.legal code { font: 500 .85em var(--mono); background: var(--paper-deep); padding: .1em .35em; border-radius: 3px; }
.table-wrap { overflow-x: auto; margin: 0 0 1em; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.legal th { font: 500 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.legal td:first-child { white-space: nowrap; }
@media (max-width: 600px) { .legal td:first-child { white-space: normal; } }