/* The homepage in the Silk look (component/silk-home.njk, assets/js/silk.js), from concepts/silk.njk.
   Only on a page with the silk flag. Everything's scoped under .sk- or html[data-sk] */
html[data-sk] { background: #09070f; scroll-behavior: auto; }
html[data-sk] body { background: none; overflow-x: clip; }
.sk-ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 70% at 72% 18%, rgba(96, 62, 214, 0.2), transparent 70%), radial-gradient(70% 60% at 12% 92%, rgba(96, 62, 214, 0.2), transparent 72%); }
/* The large viewport's height, so a phone's toolbar sliding away doesn't resize it mid-scroll */
#sk-canvas { position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.sk-main {
  --bg: #09070f; --bg-raised: #15111f; --ink: #f4f1fb; --ink-2: #b3adc6; --muted: #7f7893; --line: rgba(244, 241, 251, 0.12);
  --accent: #971aff; --accent-2: #b462ff; --accent-soft: #a79dff; --on-accent: #fff; --on-ink: #09070f;
  --accent-gradient: linear-gradient(120deg, #7d76ff, #c58bff); --a1: #7d76ff; --a2: #c58bff;
  position: relative; z-index: 1; overflow-x: clip; color: var(--ink);
}
/* No bar across the dust: the header floats over it, with only a soft shade that has no edge to keep
   it readable over the words, and none at the very top of the page. It slides away on the way down
   and comes back on the way up (silk.js) */
html[data-sk]:not(.brand-docked) .site-header-bar { opacity: 0; }
html[data-sk]:not(.drawer-open) .site-header-bar {
  height: calc(var(--header-h) * 2.1);
  background: linear-gradient(to bottom, rgba(9, 7, 15, 0.94), rgba(9, 7, 15, 0.88) 34%, rgba(9, 7, 15, 0.42) 62%, rgba(9, 7, 15, 0.1) 84%, rgba(9, 7, 15, 0)) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-sk] :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  transition: translate 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, transform 0.48s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.3s ease, background-color 0.3s ease;
}
html[data-sk] .dynamic-brand.no-transition { transition: none; }
/* The phrase beside the brand is there from the start, not only once the page has scrolled */
html[data-sk] .brand-phrase { opacity: 1; translate: 0 0; }
html[data-sk].sk-nav-hidden :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) {
  translate: 0 -160%;
  opacity: 0 !important;
  pointer-events: none;
}
/* A brand that's been scaled down has a much taller box, so a share of that is too far */
html[data-sk].sk-nav-hidden .dynamic-brand { translate: 0 -120px; }
@media (prefers-reduced-motion: reduce) {
  html[data-sk] :is(.site-header-bar, .dynamic-brand, .brand-phrase, .header-nav, .header-cta) { transition: none; }
}

/* Room: most of premium is what isn't there */
.sk-sec { position: relative; display: flex; align-items: center; min-height: 128svh; padding: 18vh var(--gutter); }
.sk-sec[data-lane="left"] { justify-content: flex-end; }
.sk-sec[data-lane="center"] { justify-content: center; text-align: center; }
.sk-text { width: min(46%, 680px); will-change: transform; }
.sk-sec[data-lane="center"] .sk-text { width: min(100%, 1240px); }

.sk-hero { min-height: 100svh; padding-top: 16vh; align-items: flex-end; padding-bottom: 12vh; }
.sk-hero .sk-text { width: min(76%, 1240px); }
.sk-hero h1 { font-size: clamp(3.25rem, 8.6vw, 10.5rem); font-weight: 500; line-height: 0.94; letter-spacing: -0.06em; }
.sk-kicker { margin-top: clamp(24px, 3.4vh, 40px); max-width: 44ch; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }

.sk-label { margin-bottom: clamp(20px, 3vh, 32px); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sk-sec h2 { font-size: clamp(2.5rem, 5vw, 6rem); font-weight: 500; line-height: 1; letter-spacing: -0.055em; text-wrap: balance; }
.sk-lede { margin-top: clamp(20px, 3vh, 32px); max-width: 42ch; font-size: clamp(1.0625rem, 1.3vw, 1.3125rem); line-height: 1.55; color: var(--ink-2); }
.sk-list { margin-top: clamp(40px, 7vh, 72px); padding: 0; list-style: none; }
.sk-list li { padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--line); }
.sk-list h3 { font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 500; letter-spacing: -0.03em; }
.sk-list p { margin-top: 8px; max-width: 46ch; color: var(--ink-2); line-height: 1.55; }
.sk-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(32px, 5vh, 56px); font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.sk-cta i { display: block; width: 44px; height: 1px; background: currentColor; transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sk-cta:hover i { width: 84px; }

/* The statements: lit word by word as they pass */
.sk-statement { min-height: 170svh; }
.sk-statement .sk-text { position: sticky; top: 28vh; align-self: flex-start; }
.sk-big { font-size: clamp(2.5rem, 6.2vw, 7.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.055em; text-wrap: balance; }
/* Each word its own layer, so lighting it is only a change of opacity, with nothing to redraw */
.sk-big .sk-lit { display: inline-block; color: var(--ink); opacity: 0.14; will-change: opacity; }
/* The dark behind the words where they cross the dust: drawn once, unlike a shadow on the text */
.sk-statement .sk-text { isolation: isolate; will-change: auto; }
.sk-statement .sk-text::before { content: ""; position: absolute; z-index: -1; inset: -22% -12%; background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 72%, transparent), transparent); pointer-events: none; }

.sk-end { min-height: 130svh; }
.sk-word { margin-top: clamp(24px, 5vh, 56px); font-family: var(--font-display); font-size: clamp(5.5rem, 21vw, 24rem); font-weight: 400; line-height: 0.92; color: var(--ink); text-transform: uppercase; }
.sk-sec h2.sk-word { font-size: clamp(5.5rem, 21vw, 24rem); line-height: 0.92; letter-spacing: 0; }
.sk-accent { background: linear-gradient(120deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sk-foot { position: relative; z-index: 1; padding: 0 var(--gutter) 96px; font-size: 0.875rem; color: var(--muted); text-align: center; }

/* Words rising out of their own line */
.sk-m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.24em; margin-bottom: -0.24em; }
.sk-m > span { display: inline-block; will-change: transform; transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.24, 1); transition-delay: calc(var(--i) * 38ms); }
.js [data-rise]:not(.is-in) .sk-m > span { transform: translateY(112%); }
/* The gradient only paints inside its box, so the box has to reach the descenders */
.sk-m > span.sk-accent { padding-bottom: 0.24em; margin-bottom: -0.24em; }
.sk-fade { transition: opacity 1.3s ease 0.25s, transform 1.5s cubic-bezier(0.16, 0.84, 0.24, 1) 0.25s; }
.js [data-rise]:not(.is-in) ~ .sk-fade, .js .sk-fade:not(.is-in) { opacity: 0; transform: translateY(20px); }

@media (max-width: 760px) {
  .sk-sec { min-height: 0; padding-block: 15vh; }
  .sk-hero { min-height: 100svh; }
  .sk-hero .sk-text, .sk-text { width: 100%; }
  .sk-statement { min-height: 130svh; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-m > span, .sk-fade { transition: none; }
  .js [data-rise]:not(.is-in) .sk-m > span { transform: none; }
  .js .sk-fade:not(.is-in) { opacity: 1; transform: none; }
  .sk-big .sk-lit { opacity: 1; }
}

/* The content the concept left out, at the same pace */
/* Tight letter spacing makes a word's box narrower than its letters, and both the mask a word rises out
   of and the gradient stop at that box. So each gets room at its sides, taken back by the margins so
   the words keep their spacing. Below the line too, for the descenders */
.sk-m { padding-inline: 0.1em; margin-inline: -0.1em; }
.sk-m > span.sk-accent { padding-inline: 0.1em; margin-inline: -0.1em; }

/* The hero's title waits, unseen, for its rise (silk.js), so it can't flash up first on a slow load. If the
   script never comes, it shows anyway after a few seconds */
.js .sk-hero [data-rise]:not(.is-in) { visibility: hidden; animation: sk-show 0s linear 5s forwards; }
@keyframes sk-show { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .js .sk-hero [data-rise]:not(.is-in) { visibility: visible; animation: none; }
}

/* The hero carries more than the concept's did, and all of it has to fit on the first screen */
.sk-sec.sk-hero { padding-top: calc(var(--header-h) + 3vh); padding-bottom: 6vh; }
.sk-sec.sk-hero h1 { font-size: clamp(3.25rem, min(7.6vw, 13.5svh), 10.5rem); }
.sk-sec.sk-hero .sk-kicker { margin-top: clamp(16px, 2.4vh, 32px); }
.sk-hero .sk-offers { margin-top: 14px; max-width: 62ch; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.sk-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: clamp(24px, 3.4vh, 36px); }
.sk-list small { display: block; margin-top: 10px; font-size: 0.875rem; font-weight: 500; color: var(--accent-soft); }
.sk-yes small { margin: 0 0 8px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sk-yes li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 28px; }
.sk-yes b { font-family: var(--font-display); font-size: clamp(2.5rem, 4.4vw, 4.75rem); font-weight: 400; line-height: 1; background: linear-gradient(120deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sk-symptoms li { padding-block: clamp(14px, 2vh, 20px); font-size: clamp(1.125rem, 1.5vw, 1.4375rem); letter-spacing: -0.02em; }
.sk-block { margin-top: clamp(36px, 6vh, 64px); padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line); }
.sk-block h3 { font-size: clamp(1.375rem, 2vw, 2rem); font-weight: 500; letter-spacing: -0.035em; }
.sk-block p:not(.sk-eyebrow) { margin-top: 12px; max-width: 54ch; line-height: 1.6; color: var(--ink-2); }
.sk-block strong { font-weight: 500; color: var(--ink); }
.sk-eyebrow { margin-bottom: 10px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); }
.sk-sign { font-size: 0.9375rem; }
.sk-sec a u { text-underline-offset: 3px; }
.sk-statement .sk-label { position: relative; }

/* Questions: over the middle of the dust, so on a quiet ground of their own */
.sk-sec.sk-faq { min-height: 0; padding-block: 16vh; }
.sk-sec.sk-faq .sk-text { width: min(100%, 1320px); text-align: left; }
.sk-faq .sk-lede { max-width: 56ch; }
.sk-faq .faq { margin-top: clamp(36px, 6vh, 64px); padding: clamp(20px, 2.4vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: rgba(9, 7, 15, 0.82); }
.sk-faq .faq-pane { background: transparent; }

/* On touch screens the statements aren't pinned: touch scrolling runs apart from the page's scripts,
   so pinned text visibly lags and catches up. They scroll with the page and still light word by word */
@media (max-width: 760px), (hover: none) {
  .sk-sec.sk-statement { min-height: 0; align-items: center; padding-block: 22vh; }
  .sk-statement .sk-text { position: static; align-self: auto; }
}

/* Our Creed: the page's last word */
.sk-creed { max-width: 40em; margin-inline: auto; font-size: clamp(1.125rem, 1.8vw, 2rem); line-height: 1.45; letter-spacing: -0.025em; color: var(--ink-2); text-wrap: balance; }

@media (max-width: 760px) {
  .sk-yes li { grid-template-columns: 1fr auto; gap: 10px 14px; }
}

/* The footer: the page's last chapter rather than a block under it. The same ground and type, with the
   dust dying away behind it, no bright rule across it, and a lot of room */
html[data-sk] .site-footer {
  --bg: #09070f; --ink: #f4f1fb; --ink-2: #b3adc6; --muted: #7f7893; --line: rgba(244, 241, 251, 0.12);
  --accent-soft: #a79dff; --a1: #7d76ff; --a2: #c58bff; --accent-gradient: linear-gradient(120deg, #7d76ff, #c58bff);
  position: relative; z-index: 1; margin: 0; padding: clamp(96px, 20vh, 220px) 0 clamp(28px, 4vh, 44px); border: 0; color: var(--ink-2); background: none;
}
html[data-sk] .site-footer > .container { border: 0; }
html[data-sk] .footer-statement { display: block; margin: 0; padding: 0; border: 0; }
html[data-sk] .footer-main { display: block; }
html[data-sk] .footer-headline { max-width: none; font-size: clamp(2.75rem, 7.4vw, 8.5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.055em; color: var(--ink); }
html[data-sk] .footer-cta { margin-top: clamp(28px, 4.4vh, 48px); height: auto; min-height: 50px; padding: 0 26px; border-radius: 999px; color: var(--bg); background: var(--ink); font-size: 1rem; }
html[data-sk] .footer-cta:hover { color: #fff; background: linear-gradient(120deg, #6a62f5, #a768f2); }

html[data-sk] .footer-grid-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 72px); margin: clamp(88px, 16vh, 168px) 0 0; padding: 0; border: 0; }
html[data-sk] .footer-col { padding: clamp(20px, 3vh, 28px) 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
html[data-sk] .footer-card-title { font-size: clamp(1.1875rem, 1.5vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); }
html[data-sk] .footer-card-desc { margin-top: 12px; line-height: 1.6; color: var(--ink-2); }
html[data-sk] .footer-card-desc a { color: var(--ink); }
html[data-sk] .footer-link-highlight { display: inline-block; margin-top: 16px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: text-decoration-color 0.4s ease; }
html[data-sk] .footer-link-highlight:hover { color: var(--ink); text-decoration-color: currentColor; }
html[data-sk] .footer-newsletter-form { margin-top: 18px; border-color: var(--line); }
html[data-sk] .footer-newsletter-form:focus-within { border-color: var(--a2); }
html[data-sk] .footer-input { color: var(--ink); background: none; }
html[data-sk] .footer-newsletter-form .btn { color: var(--ink); background: none; box-shadow: inset 0 0 0 1px var(--line); }
html[data-sk] .footer-newsletter-form .btn:hover { color: var(--bg); background: var(--ink); }
html[data-sk] .footer-alert { margin-top: 18px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
html[data-sk] .footer-alert strong { font-weight: 500; color: var(--ink-2); }

html[data-sk] .footer-promo { display: block; margin: clamp(72px, 12vh, 128px) 0 0; padding: clamp(22px, 3.4vh, 32px) 0; border-width: 1px 0 0; border-style: solid; border-color: var(--line); font-size: clamp(1.25rem, 2.2vw, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.04em; color: var(--muted); transition: color 0.5s ease; }
html[data-sk] .footer-promo:hover { color: var(--ink-2); }
html[data-sk] .footer-promo b, html[data-sk] .footer-promo strong { font-weight: 500; color: var(--ink); }

html[data-sk] .footer-sublinks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin: 0; padding: clamp(18px, 2.6vh, 26px) 0; border-width: 1px 0 0; border-style: solid; border-color: var(--line); font-size: 0.9375rem; }
html[data-sk] .footer-sublinks-label { color: var(--muted); }
html[data-sk] .footer-sublinks-list { display: flex; flex-wrap: wrap; gap: 8px 24px; }
html[data-sk] .footer-sublinks-list .sep { display: none; }
html[data-sk] .footer-sublinks-list a { color: var(--ink-2); transition: color 0.3s ease; }
html[data-sk] .footer-sublinks-list a:hover { color: var(--ink); }

html[data-sk] .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin: 0; padding: clamp(18px, 2.6vh, 26px) 0 0; border-width: 1px 0 0; border-style: solid; border-color: var(--line); font-size: 0.8125rem; color: var(--muted); }
html[data-sk] .footer-legal-brand strong { font-weight: 500; color: var(--ink-2); }
html[data-sk] .footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
html[data-sk] .footer-legal a { color: var(--muted); transition: color 0.3s ease; }
html[data-sk] .footer-legal a:hover { color: var(--ink); }

@media (max-width: 900px) {
  html[data-sk] .footer-grid-sections { grid-template-columns: 1fr; gap: 40px; }
}

/* Small text over the dust: on the same translucent ground as the questions. Drawn once, so it costs
   nothing while scrolling. Short lines get a soft dark halo, not a box each */
.sk-list, .sk-block, html[data-sk] .footer-grid-sections, html[data-sk] .footer-lower {
  border: 1px solid var(--line); border-radius: 20px; background: rgba(9, 7, 15, 0.82);
}
.sk-text .sk-list { margin-top: clamp(32px, 5vh, 56px); padding: clamp(4px, 0.6vw, 8px) clamp(20px, 2.2vw, 32px); }
.sk-list li:first-child { border-top: 0; }
.sk-text .sk-block { margin-top: clamp(20px, 3vh, 28px); padding: clamp(22px, 2.4vw, 34px); }
.sk-text h2 + .sk-block { margin-top: clamp(32px, 5vh, 56px); }
.sk-lede, .sk-kicker, .sk-offers, .sk-label, .sk-links, .sk-creed, .sk-cta { text-shadow: 0 0 14px var(--bg), 0 0 5px var(--bg), 0 0 2px var(--bg); }

html[data-sk] .footer-grid-sections { padding: clamp(24px, 2.6vw, 40px); }
html[data-sk] .footer-col { padding-top: 0; border-top: 0; }
html[data-sk] .footer-lower { margin-top: clamp(20px, 3vh, 28px); padding: 0 clamp(24px, 2.6vw, 40px); }
html[data-sk] .footer-promo { margin-top: 0; border-top: 0; }
html[data-sk] .footer-bottom { padding-bottom: clamp(18px, 2.6vh, 26px); }

@media (max-width: 900px) {
  html[data-sk] .footer-col + .footer-col { padding-top: 32px; border-top: 1px solid var(--line); }
}