/* Crystalpass v2. Tokens first: one type scale, one spacing scale, one easing system. Dark-only by brand. */
:root{
  /* color */
  /* Quartzo brand tokens (brands/quartzo.json) + Crystalpass dark variations */
  --q-accent:#0891b2;--q-electric:#0aa9f1;--q-dark-2:#2f2d3c;--q-light:#f5f5f5;--q-muted:#bfbfbf;
  --bg:#030406;--bg-2:#08111a;--fg:var(--q-light);--fg-2:var(--q-muted);--mute:#86919a;
  --rule:rgba(236,238,244,.09);--rule-2:rgba(236,238,244,.18);
  --ice:#7fd8f7;--violet:var(--q-electric);--accent:linear-gradient(92deg,#bdeeff 0%,var(--q-electric) 55%,var(--q-accent) 100%);
  /* type */
  --display:"Clash Display","Archivo",system-ui,sans-serif;--text:"Archivo",system-ui,sans-serif;--mono:"Archivo",system-ui,sans-serif;
  --t-micro:11px;--t-body:clamp(15px,1.05vw,17px);--t-lead:clamp(22px,2.4vw,36px);
  --t-h3:clamp(26px,2.4vw,36px);--t-h2:clamp(44px,9vw,148px);--t-hero:clamp(28px,3.9vw,58px);
  /* space (8pt) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:144px;
  --g:20px;--nav:64px;
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:.24s;--d-mid:.6s;--d-slow:1.1s;--stagger:80ms;
  /* layers */
  --z-gl:0;--z-content:1;--z-grain:2;--z-nav:5;--z-skip:6;
}
@media (min-width:768px){:root{--g:40px}}
@media (min-width:1280px){:root{--g:56px}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);font-family:var(--display);font-size:var(--t-body);line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","ss03"}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ice);outline-offset:4px;border-radius:2px}
::selection{background:rgba(10,169,241,.28);color:var(--fg)}
h1,h2,h3,.lead{text-wrap:balance}
p{text-wrap:pretty}

.skip{position:fixed;left:var(--g);top:12px;z-index:var(--z-skip);padding:10px 14px;background:var(--fg);color:var(--bg);
  font:500 12px/1 var(--mono);transform:translateY(-200%);transition:transform var(--d-fast) var(--ease)}
.skip:focus{transform:none}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-gl);pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease)}
.is-ready #gl{opacity:1}
.no-gl body,.no-gl{background:radial-gradient(60% 50% at 50% 40%,rgba(90,80,180,.18),transparent 70%),var(--bg)}
main,footer,header{position:relative;z-index:var(--z-content)}

/* grain: fixed, pointer-events none (flagship 6.E). Static here; the WebGL pass carries the live grain. */
body::after{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--g)}
.micro{font-family:var(--mono);font-size:var(--t-micro);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);line-height:1}
.rule-row{display:flex;justify-content:space-between;align-items:center;min-height:1px;padding-top:var(--s2);
  border-top:1px solid var(--rule);position:relative}
.rule-row::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--accent);opacity:.7}

/* nav */
header.top{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav)}
header.top::before{content:"";position:absolute;inset:0 0 -24px;background:linear-gradient(var(--bg) 0%,rgba(4,8,11,.82) 55%,rgba(4,8,11,0));pointer-events:none}
header.top .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--nav)}
.brand{font-weight:700;letter-spacing:-.01em;font-size:14px}
.nav-cta{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
  display:inline-flex;gap:10px;align-items:center;padding:10px 0;position:relative}
.nav-cta::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--d-mid) var(--ease)}
.nav-cta:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta span{transition:transform var(--d-mid) var(--ease)}
.nav-cta:hover span{transform:translateX(3px)}

/* hero */
.hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav) + var(--s4)) 0 var(--s5)}
.hero-strip{margin-bottom:var(--s3)}
.wordmark{font-size:clamp(52px,15.4vw,248px);font-weight:700;letter-spacing:-.062em;line-height:.84;margin-left:-.045em;
  white-space:nowrap;padding-bottom:.04em}
.wordmark .ch{display:inline-block}
/* each PASS glyph samples its own slice of the one accent gradient, so transforms never break the clip */
.wm-b .ch{background:var(--accent);background-size:400% 100%;background-position:calc(var(--k) * 33.333%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-row{display:grid;gap:var(--s4);align-items:end;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule)}
.hero h1{font-size:var(--t-hero);font-weight:500;letter-spacing:-.035em;line-height:1.02;max-width:22ch}
.hero-sub{max-width:44ch;color:var(--fg-2);margin-top:var(--s2)}
@media (min-width:900px){.hero-row{grid-template-columns:1fr auto}}

/* buttons: one pill system, two weights */
.btn{--h:56px;position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s3);height:var(--h);
  padding:0 8px 0 24px;border-radius:999px;border:1px solid var(--rule-2);overflow:hidden;isolation:isolate;white-space:nowrap;
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:rgba(6,14,20,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(236,238,244,.08);transition:border-color var(--d-mid) var(--ease),color var(--d-mid) var(--ease),transform var(--d-fast) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(101%);border-radius:inherit;transition:transform var(--d-mid) var(--ease)}
.btn i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:14px;
  transition:transform var(--d-mid) var(--ease)}
.btn:hover{color:var(--bg);border-color:var(--fg)}
.btn:hover::before{transform:none}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid::before{background:var(--accent)}
.btn-solid i{background:var(--bg);color:var(--fg)}

/* sections */
section{padding:var(--s7) 0 var(--s8)}
.h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.058em;line-height:.88;margin:var(--s4) 0 var(--s5);margin-left:-.04em;padding-bottom:.04em}
.lead{font-size:var(--t-lead);letter-spacing:-.025em;line-height:1.14;max-width:24ch;font-weight:500}
.lead em{font-style:normal;background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.body{color:var(--fg-2);max-width:36ch}
.note{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--fg-2);margin:0 0 var(--s5);max-width:60ch}

/* manifesto */
.cristalize{min-height:240vh;padding-bottom:0}
.cristalize .sticky{position:sticky;top:calc(var(--nav) + 6vh)}
.rule-row .micro{padding-left:0}
.lines{list-style:none;margin-top:var(--s6);max-width:720px}
.lines li{display:grid;grid-template-columns:40px 1fr;align-items:center;padding:var(--s2) 0;border-top:1px solid var(--rule);font-size:clamp(16px,1.35vw,19px);color:var(--fg-2)}
.glyph{width:7px;height:7px;border:1px solid var(--ice);transform:rotate(45deg);opacity:.8}

/* cards: 4 items, 4 cells (1 tall + 2 + 1 wide) */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px}
.card{position:relative;background:rgba(5,12,17,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:var(--s4) var(--s3);min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3);
  transition:background var(--d-mid) var(--ease)}
.card:hover{background:rgba(8,20,28,.9)}
.card h3{font-size:var(--t-h3);letter-spacing:-.035em;font-weight:600;line-height:1;margin-bottom:var(--s1)}
.card p{color:var(--fg-2);max-width:36ch}
.card-main{background:radial-gradient(120% 80% at 0% 0%,rgba(10,169,241,.10),transparent 60%),radial-gradient(90% 70% at 100% 100%,rgba(8,145,178,.10),transparent 65%),rgba(5,12,17,.86)}
.card-main h3{font-size:clamp(36px,4vw,64px);font-weight:700;letter-spacing:-.05em}
.card-flag{position:absolute;top:var(--s3);left:var(--s3);font:500 var(--t-micro)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice);padding:7px 10px;border:1px solid rgba(10,169,241,.3);border-radius:999px}
.card-wide{background:linear-gradient(100deg,rgba(5,12,17,.92) 40%,rgba(8,145,178,.07)),rgba(5,12,17,.86)}
@media (min-width:700px){.cards{grid-template-columns:1fr 1fr}.card-main{grid-column:1 / -1;min-height:360px}.card-wide{grid-column:1 / -1}}
@media (min-width:1100px){.cards{grid-template-columns:1.35fr 1fr 1fr}.card-main{grid-column:1;grid-row:1 / span 2;min-height:560px}.card-wide{grid-column:2 / span 2}}

/* done with you */
.dwy{display:grid;gap:var(--s5)}
@media (min-width:900px){.dwy{grid-template-columns:1fr 1fr;align-items:start}.steps{margin-top:var(--s4)}}
.steps{list-style:none}
.steps li{display:grid;grid-template-columns:56px 1fr;padding:var(--s3) 0;border-top:1px solid var(--rule)}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.step-k{font:500 12px/1.6 var(--mono);color:var(--ice)}
.steps strong{display:block;font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.steps div>span{color:var(--fg-2)}

/* ritmo: rows without double hairlines (top border per row, single close) */
.log{list-style:none;border-bottom:1px solid var(--rule)}
.log li{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--rule);transition:padding var(--d-mid) var(--ease)}
.log b{grid-column:1 / -1;font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em}
@media (min-width:800px){.log li{grid-template-columns:160px 120px 1fr}.log b{grid-column:auto}}
.tag{justify-self:start;font:400 var(--t-micro)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--rule-2);border-radius:999px;color:var(--violet)}

/* price */
.price{padding-bottom:var(--s7)}
.price-grid{display:grid;gap:var(--s5);margin-top:var(--s4);align-items:end}
@media (min-width:1000px){.price-grid{grid-template-columns:1.5fr 1fr}}
.amount{font-size:clamp(84px,17vw,264px);font-weight:700;letter-spacing:-.07em;line-height:.82;margin-left:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.amount .cur{font-size:.24em;letter-spacing:-.02em;font-weight:500;vertical-align:.95em;margin-right:.12em;color:var(--fg-2)}
.amount small{font-size:.16em;letter-spacing:-.01em;color:var(--mute);font-weight:500;margin-left:.15em}
.price-side{display:grid;gap:var(--s4);justify-items:start}
.incl{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1)}
.incl li{font:400 var(--t-micro)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);padding:8px 11px;border:1px solid var(--rule-2);border-radius:999px}

/* footer */
footer{padding:0 0 var(--s4)}
footer .wrap{display:grid;gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--rule)}
.foot-mark{font-size:clamp(40px,9vw,128px);font-weight:700;letter-spacing:-.06em;line-height:.85;opacity:.92}
.foot-mark span{background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2)}

/* motion: everything gated; reduced-motion users get the final state */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translate3d(0,28px,0);
    transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);transition-delay:calc(var(--i,0) * var(--stagger))}
  .reveal.in{opacity:1;transform:none}
  /* no clip-path here: IntersectionObserver honours it and would never fire */
  .h2.reveal{transform:translate3d(0,56px,0) skewY(2deg);transform-origin:0 100%;transition-duration:1.3s}
  .h2.reveal.in{transform:none}

  .is-loading .intro,.is-loading .wordmark .ch{opacity:0}
  .is-ready .intro{animation:rise var(--d-slow) var(--ease) both;animation-delay:calc(var(--d,0) * 110ms + 200ms)}
  .is-ready .wordmark .ch{animation:glyph 1.3s var(--ease) both;animation-delay:calc(var(--c) * 38ms + 180ms)}
  .is-ready .hero-row{animation:line 1.4s var(--ease-io) both .5s}
  header.top{animation:fade 1s var(--ease) both .9s}
  @keyframes rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
  @keyframes glyph{from{opacity:0;transform:translate3d(0,.35em,0) rotate(4deg);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes line{from{border-top-color:transparent}to{border-top-color:var(--rule)}}
}

/* v2.1 · hero centrado e botões refinados */
.hero{justify-content:center;text-align:center}
.wordmark{font-size:clamp(44px,9.6vw,156px);margin-left:0;letter-spacing:-.055em}
.hero-row{grid-template-columns:1fr!important;justify-items:center;border-top:0;padding-top:0;margin-top:var(--s4)}
.hero h1{max-width:20ch;margin-inline:auto;font-size:clamp(22px,2.6vw,36px)}
.hero-sub{margin-inline:auto}
.btn{--h:48px;padding:0 6px 0 20px;gap:14px;font:500 15px/1 var(--display);letter-spacing:-.005em;text-transform:none;
  border:1px solid transparent;background:linear-gradient(rgba(8,20,28,.72),rgba(8,20,28,.72)) padding-box,
  linear-gradient(135deg,rgba(236,238,244,.28),rgba(10,169,241,.18) 50%,rgba(236,238,244,.06)) border-box;
  box-shadow:inset 0 1px 0 rgba(236,238,244,.1),0 8px 32px -12px rgba(8,145,178,.45)}
.btn i{width:36px;height:36px;font-size:0}
.btn i{transform:none;transition:none}
.btn i svg{display:block;transform:rotate(-45deg);transition:transform calc(var(--d-mid) * .75) var(--ease)}
.btn:hover i,.btn:focus-visible i{transform:none}
.btn:hover i svg,.btn:focus-visible i svg{transform:rotate(0deg)}
.btn-solid{background:var(--fg);border-color:var(--fg);box-shadow:0 10px 40px -12px rgba(10,169,241,.55)}
.nav-cta{font:500 13px/1 var(--display);letter-spacing:0;text-transform:none;height:36px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(236,238,244,.16);background:rgba(8,20,28,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav-cta::after{display:none}
.nav-cta:hover{border-color:rgba(236,238,244,.4);background:rgba(236,238,244,.06)}
.nav-cta:hover span{transform:none}


/* v2.2 · faixa central livre para o cristal; componentes organizados ao redor */
.rule-row::before{display:none}
.foot-mark{display:inline-block;padding-right:.12em;font-size:clamp(36px,6vw,96px)}
.foot-mark span{padding-right:.12em;margin-right:-.12em}
footer .wrap{justify-items:center;text-align:center}
.foot-meta{width:100%}
@media (min-width:1100px){
  :root{--lane:clamp(260px,24vw,420px)}
  .split{display:grid;grid-template-columns:1fr var(--lane) 1fr;align-items:start}
  .split>.l{grid-column:1}
  .split>.r{grid-column:3}
  .cristalize .split .lines{margin-top:0;max-width:none}
  .cristalize .lead{max-width:20ch}
  .cards{grid-template-columns:1fr var(--lane) 1fr;background:none;border:0;gap:var(--s2) 0}
  .cards .card{border:1px solid var(--rule);border-radius:2px;min-height:280px}
  .cards .card:nth-child(odd){grid-column:1}
  .cards .card:nth-child(even){grid-column:3}
  .card-main,.card-wide{grid-row:auto;min-height:280px}
  .dwy{grid-template-columns:1fr var(--lane) 1fr}
  .dwy>:last-child{grid-column:3}
  .ritmo .log li{grid-template-columns:1fr auto}
  .ritmo .log b{grid-column:1 / -1}
  .price-grid{grid-template-columns:1fr var(--lane) 1fr;align-items:center}
  .price-grid>.price-side{grid-column:3}
  .amount{font-size:clamp(84px,9.5vw,180px)}
  .price{padding-bottom:var(--s8)}
  .h2{font-size:min(5.6vw,104px);max-width:calc((100% - var(--lane)) / 2)}
}


/* mesh gradient fallback (WebGL draws the same mesh) */
html{background:
  radial-gradient(60% 50% at 28% 22%,rgba(8,145,178,.12),transparent 70%),
  radial-gradient(45% 40% at 78% 30%,rgba(10,169,241,.04),transparent 70%),
  radial-gradient(70% 60% at 70% 92%,rgba(47,45,60,.36),transparent 72%),
  radial-gradient(50% 45% at 12% 85%,rgba(6,52,69,.28),transparent 70%),#030406}
body{background:transparent}


/* v2.3 · tipografia Quartzo: Clash Display (títulos) + Archivo (texto); "PASS" em Clash fino inclinado */
body,.hero-sub,.body,.card p,.steps div>span,.lines li,.btn,.nav-cta{font-family:var(--text)}
.micro,.tag,.incl li,.card-flag,.note,.step-k{font-family:var(--mono);font-weight:500}
.wordmark,.h2,.foot-mark,.amount{letter-spacing:-.025em}
.wordmark{font-weight:600}
.h2,.amount,.foot-mark,.card-main h3{font-weight:600}
.hero h1,.lead,.card h3,.steps strong{font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.wm-b,.foot-mark span{font-weight:200;font-style:italic;font-synthesis:style}
.wm-b .ch{padding-right:.06em;margin-right:-.06em}

/* v2.4 · sem a linha divisória no topo das seções (pedido do founder 11/10) */
.rule-row{border-top:0}

/* ===== checkout · demo visual (sem cobrança). Página desliza p/ esquerda, cristal vai p/ coluna esquerda, wizard entra pela direita ===== */
:root{--co-ok:#5eead4;--co-err:#fb7185;--co-glass:rgba(6,13,19,.66);--co-line:rgba(236,238,244,.1);--co-field:rgba(236,238,244,.035);--z-co:4}
html.co-lock{overflow:hidden}
main,footer{transition:transform var(--d-mid) var(--ease) .38s,opacity .5s var(--ease) .38s,filter var(--d-mid) var(--ease) .38s}
footer{transition-delay:.32s}
html.co-open main,html.co-open footer{transform:translate3d(-40vw,0,0);opacity:0;filter:blur(10px);pointer-events:none;transition-delay:0s}
html.co-open footer{transition-delay:.06s}

.co{position:fixed;inset:0;z-index:var(--z-co);display:grid;grid-template-columns:55fr 45fr;pointer-events:none}
.co[hidden]{display:none}
.co-open .co{pointer-events:auto}
.co-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* order summary under the crystal */
.co-summary{grid-column:1;align-self:end;justify-self:center;display:grid;justify-items:center;gap:12px;margin-bottom:var(--s5);width:min(380px,80%);text-align:center;
  opacity:0;transform:translate3d(0,14px,0);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.co-open .co-summary{opacity:1;transform:none;transition-duration:.9s;transition-delay:.55s}
.co-sum-row{display:flex;align-items:baseline;gap:14px}
.co-sum-row strong{font:500 20px/1 var(--display);letter-spacing:-.01em}
.co-sum-price{font:500 20px/1 var(--display);color:var(--fg-2);font-variant-numeric:tabular-nums}
.co-sum-price small{font:400 13px/1 var(--text);color:var(--mute);margin-left:2px}
.co-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.co-chips li{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);padding:7px 9px;border:1px solid var(--co-line);border-radius:999px;background:rgba(6,13,19,.4)}
.co-sum-note{color:var(--mute)}

/* panel */
.co-panel{grid-column:2;position:relative;margin:calc(var(--nav) + var(--s1)) var(--g) var(--s3) 0;padding:var(--s4) var(--s5) var(--s5);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  background:linear-gradient(180deg,rgba(236,238,244,.04),rgba(236,238,244,0) 30%),var(--co-glass);
  border:1px solid var(--co-line);border-radius:22px;backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(236,238,244,.08),0 40px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(10,169,241,.03);
  opacity:0;transform:translate3d(72px,0,0);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.co-open .co-panel{opacity:1;transform:none;transition-duration:.8s,.95s;transition-delay:.15s}
.co-panel>*,.co-step.is-current .co-fields>*,.co-step.is-current .co-card>*{--sd:0}
/* staggered entry of the panel's parts and of the first step's fields */
.co-head,.co-progress,.co-steps{opacity:0;transform:translate3d(24px,0,0);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.co-open .co-head{--sd:1}.co-open .co-progress{--sd:2}.co-open .co-steps{--sd:3}
.co-open :is(.co-head,.co-progress,.co-steps){opacity:1;transform:none;transition-duration:.7s;transition-delay:calc(.25s + var(--sd) * 90ms)}
.co-fields>*,.co-card>*{transition:opacity .6s var(--ease),transform .6s var(--ease)}
html:not(.co-open) .co-fields>*{opacity:0;transform:translate3d(18px,0,0)}
.co-open .co-fields>:nth-child(1){transition-delay:.5s}.co-open .co-fields>:nth-child(2){transition-delay:.58s}.co-open .co-fields>:nth-child(3){transition-delay:.66s}

.co-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s3)}
.co-x,.co-back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--fg-2);font:500 13px/1 var(--text);cursor:pointer;padding:8px 0;transition:color var(--d-fast) var(--ease)}
.co-x:hover,.co-back:hover{color:var(--fg)}
.co-x svg,.co-back svg{transition:transform var(--d-mid) var(--ease)}
.co-x:hover svg,.co-back:hover svg{transform:translateX(-3px)}
.co-k-row{display:flex;justify-content:flex-start;align-items:center;margin-bottom:14px}
.co-k-row .co-k{margin:0}
.co-back{padding:0}
.co-demo-tag{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice);padding:6px 9px;border:1px solid rgba(10,169,241,.3);border-radius:999px}

.co-progress{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:var(--s4)}
.co-progress li{display:grid;gap:10px}
.co-progress i{position:relative;display:block;height:2px;border-radius:2px;background:rgba(236,238,244,.1);overflow:hidden}
.co-progress i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--q-accent),var(--q-electric));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.co-progress .is-on i::after{transform:none}
.co-progress span{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:color .4s var(--ease)}
.co-progress .is-on span{color:var(--fg)}
.co-progress .is-done span{color:var(--fg-2)}

/* steps: stacked in one cell, slide + fade horizontally */
.co-steps{display:grid;flex:1}
.co .co-step{padding:0}
.co-step{grid-area:1 / 1;display:flex;flex-direction:column;align-items:stretch;opacity:0;visibility:hidden;transform:translate3d(48px,0,0);
  transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s .45s}
.co-step.is-past{transform:translate3d(-48px,0,0)}
.co-step.is-current{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .08s,transform .45s var(--ease) .04s,visibility 0s}
.co-k{margin-bottom:14px}
.co-title{font:500 clamp(30px,2.5vw,42px)/1.04 var(--display);letter-spacing:-.02em;margin-bottom:var(--s3);outline:0}
.co-fields,.co-card{display:grid;gap:16px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.fld{display:grid;gap:8px}
.fld>span:first-child{font:500 13px/1 var(--text);color:var(--fg-2)}
.fld input{width:100%;height:50px;padding:0 15px;border-radius:12px;border:1px solid rgba(236,238,244,.12);background:var(--co-field);color:var(--fg);
  font:400 16px/1 var(--text);font-variant-numeric:tabular-nums;outline:0;-webkit-appearance:none;appearance:none;
  transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.fld input::placeholder{color:rgba(236,238,244,.28)}
.fld input:hover{border-color:rgba(236,238,244,.22)}
.fld input:focus{border-color:var(--q-electric);background:rgba(10,169,241,.05);box-shadow:0 0 0 4px rgba(10,169,241,.16)}
.fld.is-err input{border-color:var(--co-err);box-shadow:0 0 0 4px rgba(251,113,133,.12)}
.fld-err{font:400 12.5px/1.2 var(--text);font-style:normal;color:var(--co-err);min-height:0}
.fld-err:empty{display:none}
.fld-wrap{position:relative;display:block}
.fld-wrap input{padding-right:110px;letter-spacing:.04em}
.cc-brand{position:absolute;right:10px;top:50%;transform:translate3d(0,-50%,0) scale(.9);opacity:0;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--bg);background:var(--fg);padding:6px 8px;border-radius:6px;transition:opacity var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.cc-brand.is-on{opacity:1;transform:translate3d(0,-50%,0)}
.co-card{padding:18px;border:1px solid var(--co-line);border-radius:16px;background:rgba(236,238,244,.02)}

.co-check{display:flex;align-items:center;gap:12px;margin-top:20px;font:400 14px/1.3 var(--text);color:var(--fg-2);cursor:pointer;position:relative}
.co-check input{position:absolute;opacity:0;width:20px;height:20px;margin:0}
.co-check .box{flex:none;width:20px;height:20px;border-radius:6px;border:1px solid rgba(236,238,244,.25);display:grid;place-items:center;transition:background var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.co-check .box::after{content:"";width:9px;height:5px;border:solid var(--bg);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform var(--d-fast) var(--ease)}
.co-check input:checked+.box{background:var(--q-electric);border-color:var(--q-electric)}
.co-check input:checked+.box::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.co-check input:focus-visible+.box{box-shadow:0 0 0 4px rgba(10,169,241,.22)}
.co-check a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(236,238,244,.35)}
.co-check-err{margin-top:8px}

.co-total{display:flex;align-items:baseline;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--co-line);font:400 14px/1 var(--text);color:var(--fg-2)}
.co-total strong{font:500 26px/1 var(--display);color:var(--fg);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.co-total-after{margin-left:auto;color:var(--mute)}
.co-demo{display:flex;align-items:center;gap:10px;margin-top:var(--s2);padding:10px 12px;border-radius:10px;border:1px dashed rgba(10,169,241,.3);background:rgba(10,169,241,.05);
  font:400 13px/1.35 var(--text);color:var(--ice)}
.co-demo::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--q-electric);box-shadow:0 0 10px var(--q-electric)}
.co-actions{padding-top:var(--s3)}
.co .btn{width:100%;--h:54px;cursor:pointer;font-size:15px}
.co .btn:disabled{cursor:progress}
.co-pay.is-loading{color:var(--bg)}
.co-pay.is-loading>span{opacity:.6}
.co-pay.is-loading i svg{opacity:0}
.co-pay.is-loading i::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(236,238,244,.25);border-top-color:var(--fg);animation:co-spin .7s linear infinite}
.co-pay i{position:relative}
@keyframes co-spin{to{transform:rotate(360deg)}}

/* done */
.co-ok{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--q-electric);margin-bottom:var(--s3);
  border:1px solid rgba(10,169,241,.45);background:radial-gradient(circle,rgba(10,169,241,.18),transparent 70%);box-shadow:0 0 40px -6px rgba(10,169,241,.6)}
.co-step.is-current .co-ok{animation:co-pop .8s var(--ease) both .15s}
@keyframes co-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.co-lead{color:var(--fg-2);font:400 16px/1.5 var(--text);margin:-12px 0 var(--s3);max-width:40ch}
.co-next-list{list-style:none;border-top:1px solid var(--co-line)}
.co-next-list li{display:grid;grid-template-columns:44px 1fr;align-items:center;padding:16px 0;border-bottom:1px solid var(--co-line);font:400 15px/1.3 var(--text)}
.co-next-list b{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--ice)}

/* mobile / tablet: crystal on top (small), panel fills the rest and scrolls inside */
@media (max-width:1099px){
  .co{grid-template-columns:1fr;grid-template-rows:34dvh 1fr}
  .co-summary{display:none}
  .co-panel{grid-column:1;grid-row:2;margin:0;border-radius:22px 22px 0 0;border-bottom:0;padding:var(--s3) var(--g) var(--s4);transform:translate3d(0,48px,0)}
  .co-head{margin-bottom:var(--s3)}
  .co-progress{margin-bottom:var(--s4)}
  .co-title{font-size:30px;margin-bottom:var(--s3)}
  .co-total{flex-wrap:wrap}
}
@media (max-width:420px){.co-row{gap:10px}.co-total-after{margin-left:0;width:100%}}

@media (prefers-reduced-motion:reduce){
  main,footer,.co-panel,.co-summary,.co-head,.co-progress,.co-steps,.co-step,.co-step.is-current,.co-fields>*,.co-card>*{transform:none!important;filter:none!important;transition:opacity .25s linear,visibility 0s!important;transition-delay:0s!important}
  html.co-open main,html.co-open footer{transform:none!important}
  .co-progress i::after,.cc-brand,.co-check .box::after{transition:none}
  .co-step.is-current .co-ok{animation:none}
}


/* v2.5 · checkout minimal: sem card, componentes flutuando, progresso e botão menores */
.co-panel{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;
  width:100%;max-width:420px;justify-self:center;justify-content:center;padding:var(--s4) 0}
.co-head{margin-bottom:var(--s4)}
.co-x[hidden]{display:inline-flex;visibility:hidden}
.co-x{font-size:13px;color:var(--mute)}
.co-progress{gap:6px;margin-bottom:var(--s4);max-width:240px}
.co-progress li{gap:7px}
.co-progress i{height:1px}
.co-progress span{font-size:9.5px;letter-spacing:.12em}
.co-k{font-size:10px}
.co-title{font-size:clamp(24px,1.9vw,30px);margin-bottom:var(--s3)}
.co-fields,.co-card{gap:12px}
.fld{gap:6px}
.fld>span:first-child{font-size:12px}
.fld input{height:44px;padding:0 14px;border-radius:10px;background:rgba(236,238,244,.025);border-color:rgba(236,238,244,.09)}
.co-actions{padding-top:var(--s3);display:flex}
.co-actions .btn{--h:44px;width:auto;justify-content:flex-start;padding:0 5px 0 18px;gap:14px;font-size:14px}
.co-actions .btn i{width:34px;height:34px}
@media (max-width:1099px){.co-panel{max-width:none;padding:var(--s3) var(--g) var(--s4);border-radius:0;transform:translate3d(0,24px,0)}}


/* v2.6 · checkout: formulário na faixa logo à direita do cristal (cristal em ~21vw), sem scroll horizontal */
.co-panel{overflow-x:hidden}
@media (min-width:1100px){
  .co{grid-template-columns:33vw minmax(0,min(42vw,820px)) 1fr}
  .co-panel{grid-column:2;max-width:none;justify-self:stretch;margin:calc(var(--nav) + var(--s1)) 0 var(--s3);padding:var(--s4) var(--s1)}
  .co-summary{position:absolute;left:21.3vw;bottom:0;width:380px;margin-left:-190px}
}

/* v2.7 · checkout centrado: coluna do cristal (380) + respiro (64) + formulário estreito (400), grupo no centro da página. crystal.js lê os mesmos números */
@media (min-width:1100px){
  .co{grid-template-columns:1fr 380px 64px 400px 1fr}
  .co-panel{grid-column:4;max-width:none;width:auto;margin-inline:-48px;padding:var(--s4) 48px} /* 48px de folga p/ anel de foco e brilho do ✓ não serem cortados pelo overflow */
  .co-summary{position:static;grid-column:2;grid-row:1;left:auto;margin:0 0 var(--s5);width:100%}
}

/* v2.7 · teste: Libre Baskerville no PASS (wordmark, nav, rodapé, resumo) */
.wm-b,.foot-mark span,.brand .pass,.pass{font-family:"Libre Baskerville",Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.01em}

/* v2.8 · footer sem linha no topo; crystalpass.co no centro exato */
footer .wrap{border-top:0}
.foot-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.foot-meta>:first-child{justify-self:start}
.foot-meta>:last-child{justify-self:end}

/* v2.8 · marca "CrystalPass": só C e P maiúsculos; Pass branco no nav e checkout, azul nos títulos grandes */
.brand .pass,.co-sum-row .pass{color:var(--fg);background:none;-webkit-text-fill-color:currentColor}
.wordmark,.foot-mark{text-transform:none}

/* v2.9 · "Crystal" sempre em Clash Display (wordmark, nav, rodapé, checkout) */
.wordmark,.wm-a,.brand,.foot-mark,.co-sum-row strong{font-family:"Clash Display",var(--text)}

/* v2.10 · "Crystal" um pouco menos gordo */
.wm-a,.brand,.foot-mark,.co-sum-row strong{font-weight:500}
.wm-a .ch{font-weight:500}

/* v2.8 · balanceamento de linhas em todo texto do site */
h1,h2,h3,h4,h5,h6,p,li,span,a,label,button,em,strong,small,blockquote,figcaption,dt,dd{text-wrap:balance}

/* v2.7 · preço único R$ 6.000 em até 12x */
.amount{font-size:clamp(72px,12vw,200px)}
@media (min-width:900px){.amount{font-size:clamp(72px,8.5vw,160px)}}
.amount-inst{margin-top:18px;font:400 15px/1.4 var(--text);color:var(--mute)}
.amount-inst b{font-weight:500;color:var(--fg-2)}
.fld select{width:100%;height:44px;padding:0 14px;border-radius:10px;border:1px solid rgba(236,238,244,.09);background:rgba(236,238,244,.025);color:var(--fg);font:400 14px/1 var(--text);appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23bfbfbf' stroke-width='1.5'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.fld select:focus{outline:0;border-color:var(--q-electric);box-shadow:0 0 0 4px rgba(10,169,241,.16)}
.fld select option{background:#0b0d12;color:#ececf0}
/* v2.8 · destaque em Libre Baskerville itálico */
.lead em.serif-i,.serif-i{font-family:"Libre Baskerville",serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
/* v2.9 · marcadores 1 2 3 centralizados na altura do item */
.steps li{align-items:center}
.step-k{align-self:center;margin-top:0;padding-top:0;text-align:center}
/* v2.10 · cards viram no hover e mostram uma imagem no verso (placeholder vazio por enquanto) */
.cards .card{padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;display:block;perspective:1400px}
.card-flip{position:relative;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.card-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--rule);border-radius:2px}
.card-front{position:relative;height:100%;min-height:inherit;padding:var(--s4) var(--s3);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s3);
  background:rgba(5,12,17,.94)}
.card-main .card-front{background:radial-gradient(120% 80% at 0% 0%,rgba(10,169,241,.10),transparent 60%),radial-gradient(90% 70% at 100% 100%,rgba(8,145,178,.10),transparent 65%),rgba(5,12,17,.94)}
.card-wide .card-front{background:linear-gradient(100deg,rgba(5,12,17,.94) 40%,rgba(8,145,178,.07)),rgba(5,12,17,.94)}
.card-back{position:absolute;inset:0;transform:rotateY(180deg);overflow:hidden;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,rgba(236,238,244,.035) 0 1px,transparent 1px 14px),#070b10}
.card-back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-back-ph{position:relative;font:500 var(--t-micro)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.card-flag{z-index:1}
@media (hover:hover){.card:hover .card-flip,.card:focus-within .card-flip{transform:rotateY(180deg)}}
@media (prefers-reduced-motion:reduce){.card-flip{transition:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #gl{transition:none}
  .btn,.btn::before,.btn i,.btn i svg,.nav-cta::after{transition:none}
}

/* ==== link Comparar do rodapé (blog em comparar/, CRYS-1). Escopo: .foot-cp / .foot-cmp ==== */
.foot-cp{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.foot-cmp{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.foot-cmp:hover{color:var(--fg)}
/* ==== fim comparar.html ==== */