/* Guide page. Colours come from the site's tokens (chrome.css / header.css); nothing new. */
body.chrome{--bg:#FBFBFD;--panel:#fff;--graphite:#1D1D1F;--gray:#6E6E73;--liquid:#3D63FF;--liquid-hi:#6cc6ff;--liquid-lo:#2a2fc2;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Geist",system-ui,sans-serif;--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Geist",system-ui,sans-serif;
  --glass:rgba(255,255,255,.72);--glass-line:rgba(0,0,20,.08);--glass-sh:0 1px 2px rgba(0,0,30,.05),0 10px 30px rgba(0,0,30,.07);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.chrome{--bg:#0b0b0e;--panel:#141418;--graphite:#f5f5f7;--gray:#a1a1a8;--liquid:#5f7cff;--liquid-hi:#7fe0ff;--liquid-lo:#3a35d0;
  --glass:rgba(30,30,38,.62);--glass-line:rgba(255,255,255,.10);--glass-sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme="dark"] body.chrome{--bg:#0b0b0e;--panel:#141418;--graphite:#f5f5f7;--gray:#a1a1a8;--liquid:#5f7cff;--liquid-hi:#7fe0ff;--liquid-lo:#3a35d0;
  --glass:rgba(30,30,38,.62);--glass-line:rgba(255,255,255,.10);--glass-sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box}
html{background:#FBFBFD}
:root[data-theme="dark"]{background:#0b0b0e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){background:#0b0b0e}}
body.chrome{margin:0;background:var(--bg);color:var(--graphite);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
.guide a{color:var(--liquid)}
.guide{max-width:1040px;margin:0 auto;padding:24px max(16px,env(safe-area-inset-left)) 24px max(16px,env(safe-area-inset-right))}
.intro{padding:24px 0 28px}
.guide h1,.guide h2{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:0}
.guide h1{font-size:clamp(34px,6vw,60px)}
.guide h2{font-size:clamp(26px,3.6vw,38px);margin:10px 0 12px}
.lede{margin:12px 0 0;font-size:19px;color:var(--gray)}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:center;margin:0 0 20px;padding:28px;border-radius:28px;scroll-margin-top:92px}
.glass{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.step:nth-of-type(even) .clip{order:-1}
.step p{margin:0 0 10px}
.step p+p{color:var(--gray);font-size:16px}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font:600 15px/1 var(--sans);color:#fff;background:linear-gradient(135deg,var(--liquid-hi),var(--liquid) 52%,var(--liquid-lo))}
.clip{margin:0}
.clip video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#e9ecf7;border:1px solid var(--glass-line)}
.clip figcaption{margin-top:8px;font-size:14px;color:var(--gray)}
.more{margin:28px 0 0;color:var(--gray)}
@media (max-width:760px){.step{grid-template-columns:1fr;gap:18px;padding:20px;border-radius:24px}.step:nth-of-type(even) .clip{order:0}.lede{font-size:17px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--panel)}}

/* the key word of a headline: a glass filled with the brand's liquid (same as the landing) */
.acc{--lvl:.5em;position:relative;display:inline-block;padding:.04em .09em .14em;margin:-.04em -.09em -.14em;color:color-mix(in srgb,var(--liquid) 26%,transparent)}
.acc::after{
  content:attr(data-t);content:attr(data-t) / "";position:absolute;left:.09em;top:.04em;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,var(--liquid-hi),var(--liquid) 48%,var(--liquid-lo));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q30 0 60 7T120 7V14H0Z'/%3E%3C/svg%3E") 0 var(--lvl)/.9em .14em repeat-x,linear-gradient(#000,#000) 0 calc(var(--lvl) + .13em)/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q30 0 60 7T120 7V14H0Z'/%3E%3C/svg%3E") 0 var(--lvl)/.9em .14em repeat-x,linear-gradient(#000,#000) 0 calc(var(--lvl) + .13em)/100% 100% no-repeat;
  animation:acc-wave 3.4s linear infinite}
@keyframes acc-wave{to{-webkit-mask-position:.9em var(--lvl),0 calc(var(--lvl) + .13em);mask-position:.9em var(--lvl),0 calc(var(--lvl) + .13em)}}
@media (prefers-reduced-motion:reduce){.acc::after{animation:none!important}}