/* Xolvryn site. Brand: Blue Hex mark, wide-tracked caps wordmark in Barlow.
   Colours come only from theme tokens (theme.css, built from themes.json): never hard-code a colour here.
   Look and motion come from the kits (kit.css, motion.css). */
:root,:root[data-theme]{
  --b1:var(--g2);--b2:var(--accent);--b3:var(--g3);
  --on1:#FFFFFF;
  --grad:linear-gradient(120deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);
  --grad-text:linear-gradient(120deg,var(--t1) 0%,var(--t2) 50%,var(--t3) 100%);
  --shadow:0 1px 2px var(--shadowc),0 14px 34px -18px var(--shadowc);
  --shadow-lg:0 2px 6px var(--shadowc),0 30px 60px -26px var(--shadowc);
  --wrap:1120px;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--k-font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg.mark{display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;padding:14px max(24px,calc((100vw - var(--wrap))/2 + 24px));background:color-mix(in oklab,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark{font-family:"Barlow",var(--k-font);font-weight:600;font-size:19px;letter-spacing:.32em;margin-right:-.32em;color:var(--wordmark)}
.wordmark--sm{font-size:14px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:600;font-size:14.5px;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav .k-btn{flex:none}
@media (max-width:760px){.nav-links{display:none}.nav .k-btn{margin-left:auto}.wordmark{font-size:16px;letter-spacing:.26em}}

/* type */
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(38px,6.4vw,68px);font-weight:800;max-width:14ch}
h2{font-size:clamp(28px,4vw,42px);font-weight:800;max-width:22ch}
h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
p{line-height:1.6}
.eyebrow{margin:0 0 14px;font-family:"Barlow",var(--k-font);font-weight:600;font-size:13px;letter-spacing:.28em;text-transform:uppercase;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.lede{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch;margin:22px 0 0}
.sub{font-size:18px;line-height:1.7;color:var(--muted);max-width:60ch;margin:20px 0 0}

/* hero: the one ambient loop on the page */
.hero{position:relative;overflow:hidden;padding:clamp(80px,14vw,150px) 0 clamp(70px,10vw,110px);background:linear-gradient(180deg,var(--herotop) 0%,var(--bg) 100%)}
.hero-inner{position:relative}
.hero-glow{position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:radial-gradient(40% 50% at 78% 30%,var(--glow1),transparent 70%),
             radial-gradient(38% 46% at 62% 62%,var(--glow2),transparent 70%),
             radial-gradient(30% 40% at 92% 70%,var(--glow3),transparent 70%);
  filter:blur(24px);opacity:.85;animation:drift 22s var(--k-smooth) infinite alternate}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask:linear-gradient(to bottom,#000 40%,transparent);mask:linear-gradient(to bottom,#000 40%,transparent)}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,4%,0) scale(1.08)}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-cta .k-btn{padding:15px 24px;font-size:16px}

/* buttons */
.k-btn--primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px -14px var(--liftc)}
.k-btn--primary:hover{filter:brightness(1.08)}
.k-btn--ghost{color:var(--ink)}
.k-btn--ghost:hover{background:var(--softbg)}
.k-btn--soft{background:var(--softbg);color:var(--softink);box-shadow:none;border:1px solid var(--line)}
.k-btn--soft:hover{border-color:var(--liftc)}
.k-btn .k-icon{width:18px;height:18px}

/* sections: every other one sits on the alternate band colour */
.band{padding:clamp(84px,11vw,140px) 0;border-top:1px solid var(--bandline)}
main>.band:nth-of-type(odd){background:var(--bandalt)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.card,.tier,.steps li,.timeline li,.chips li,.facts p{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
main>.band:nth-of-type(odd) :is(.card,.steps li,.timeline li){background:var(--cardalt)}
.card{position:relative;border-radius:var(--k-r);padding:32px;transition:border-color .3s,transform .3s var(--k-smooth),box-shadow .3s}
.card:hover{border-color:var(--liftc);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card p{margin:10px 0 0;color:var(--muted)}
.ico{display:inline-grid}
.card .k-icon{width:38px;height:38px;padding:8px;border-radius:12px;margin-bottom:18px;color:#fff;background:var(--grad)}

/* tiers: each level builds on the one before */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:start}
@media (max-width:960px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;display:flex;flex-direction:column;border-radius:var(--k-r-lg);padding:34px 32px 32px}
.tier--start{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 30px 60px -30px var(--liftc)}
.tier-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.tier-num{font-family:"Barlow",var(--k-font);font-weight:600;font-size:13px;letter-spacing:.24em;color:var(--muted)}
.tier-num::before{content:"LEVEL "}
.tier-tag{font-size:12px;font-weight:800;padding:5px 11px;border-radius:99px;background:var(--grad);color:#fff}
.tier > .k-icon{width:44px;height:44px;padding:9px;border-radius:14px;margin-bottom:18px;color:#fff;background:var(--grad)}
.tier:not(.tier--start) > .k-icon{background:var(--softbg);color:var(--g2)}
.tier h3{font-size:22px}
.tier-line{margin:8px 0 0;color:var(--ink);font-size:16px}
.tier-plus{margin:18px 0 0;font-size:13.5px;font-weight:700;color:var(--accent)}
.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px;line-height:1.5}

/* 30/60/90 timeline */
.timeline{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.timeline li{position:relative;overflow:hidden;border-radius:var(--k-r);padding:30px 30px 32px}
.timeline li::before{content:"";position:absolute;left:0;top:0;height:3px;background:var(--grad)}
.timeline li:nth-child(1)::before{width:33%}
.timeline li:nth-child(2)::before{width:66%}
.timeline li:nth-child(3)::before{width:100%}
.timeline .day{display:inline-flex;align-items:baseline;gap:5px;font-family:"Barlow",var(--k-font);font-weight:600;font-size:30px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.timeline .day small{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.timeline p{margin:8px 0 0;color:var(--muted);font-size:15.5px}
@media (max-width:860px){.timeline{grid-template-columns:1fr}}
.minor{margin:56px 0 0;font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
@media (max-width:1000px){.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.card--sm{padding:22px}
.card--sm p{font-size:14.5px}
.card--sm .k-icon{width:34px;height:34px;padding:7px;margin-bottom:14px}

/* steps */
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{border-radius:var(--k-r);padding:24px}
.steps .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:18px;font-family:"Barlow",var(--k-font);font-weight:600;font-size:17px;color:#fff;background:var(--grad)}
.steps p{margin:8px 0 0;color:var(--muted);font-size:15.5px}

/* who */
.chips{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;font-weight:600;font-size:15px}
.chips .k-icon{width:20px;height:20px;color:var(--accent)}

/* about */
.about{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:28px}}
.facts{display:grid;gap:10px}
.facts p{margin:0;display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:var(--k-r);font-weight:600}
.facts .k-icon{width:22px;height:22px;color:var(--accent)}

/* closing call */
main>.band.cta{text-align:center;background:radial-gradient(60% 80% at 50% 100%,var(--softbg),transparent 70%),var(--bg)}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta-inner .mark{margin-bottom:22px}
.cta h2{margin:0 auto}
.cta .sub{margin:16px auto 30px}
.cta .k-btn{padding:15px 26px;font-size:16px}

/* footer */
.foot{border-top:1px solid var(--line);padding:30px 0 40px;background:var(--bandalt)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot p{margin:0;color:var(--muted);font-size:14px}

/* tiers: short up front, the full list behind "See what's included" */
.tier h3{margin-top:2px}
.tier-line{line-height:1.55}
.tier-fit{margin:14px 0 0;color:var(--muted);font-size:15px;font-style:italic}
.more{margin:22px 0 26px;border-top:1px solid var(--line)}
.more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 4px;cursor:pointer;font-weight:700;font-size:15px;color:var(--ink)}
.more summary::-webkit-details-marker{display:none}
.more summary .k-icon{width:18px;height:18px;color:var(--accent);transition:transform .32s var(--k-smooth)}
.more[open] summary .k-icon{transform:rotate(180deg)}
.more summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.more-body{padding-top:8px}
.more[open] .more-body{animation:open-down .4s var(--k-smooth)}
@keyframes open-down{from{opacity:0;transform:translateY(-6px)}}
.more-note{margin:18px 0 0;font-size:14.5px;color:var(--muted)}
.tier .ticks .k-icon{flex:none;width:18px;height:18px;margin:3px 0 0;padding:0;background:none;color:var(--accent);border-radius:0}
.promises{list-style:none;padding:18px 0 0;margin:20px 0 0;border-top:1px dashed var(--line);display:grid;gap:12px}
.promises li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink)}
.tier .promises .k-icon{flex:none;width:18px;height:18px;margin:2px 0 0;padding:0;background:none;color:var(--g2);border-radius:0}
.tier > .k-btn{margin-top:auto}

/* the first call */
.callgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
@media (max-width:900px){.callgrid{grid-template-columns:1fr}}
.callstep{display:flex;gap:18px;align-items:flex-start}
.callstep .k-icon{flex:none;width:48px;height:48px;padding:11px;border-radius:16px;background:var(--softbg);color:var(--g2)}
.callstep p{margin:4px 0 0;color:var(--muted);font-size:16.5px;line-height:1.65}
.callstep strong{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}

/* credentials strip: built from site.json "trust", hidden when empty. Scrolls by itself (one
   ambient loop besides the hero glow), pauses on hover or keyboard focus, holds still for reduced motion. */
.trust-strip{padding:34px 0 38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bandalt)}
.trust-label{margin:0 0 18px;font-family:"Barlow",var(--k-font);font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{list-style:none;margin:0;padding:4px 0;display:flex;width:max-content;animation:marquee var(--marquee-time,40s) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
/* spacing lives on each pill (not gap) so the two halves are exactly equal and the loop has no seam */
.tpill{flex:none;margin-right:14px}
.tp-box{display:flex;align-items:center;gap:12px;padding:14px 24px;border-radius:99px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);white-space:nowrap;text-decoration:none;color:var(--ink)}
a.tp-box:hover{border-color:var(--liftc)}
a.tp-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tp-text{display:flex;align-items:center;gap:12px}
/* the type label (PARTNER, MEMBER...): grey text in a chip with a glowing white border (Franklin, 2026-11-12).
   The chip sits on a slightly sunk grey so the white border still reads on the light themes. */
.tp-kind{display:inline-flex;align-items:center;padding:5px 11px 5px 13px;border-radius:99px;border:1px solid rgba(255,255,255,.9);
  background:var(--sunk);box-shadow:0 0 6px rgba(255,255,255,.55),0 0 14px rgba(255,255,255,.25);
  font-family:"Barlow",var(--k-font);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tp-name{font-weight:700;font-size:15.5px}
.tp-detail{color:var(--muted);font-size:14px}
@media (max-width:560px){.tp-detail{display:none}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask:none;mask:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;gap:12px;padding:4px 24px;max-width:var(--wrap);margin:0 auto}
  .tpill{margin-right:0}
  .tpill[aria-hidden="true"]{display:none}
}
.sample-tag{margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--bad,#E8414F);color:#fff;font:800 10.5px/1.6 var(--k-font);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.sample-note{margin:16px 0 0;padding:10px 14px;border-radius:12px;border:1px dashed var(--bad,#E8414F);color:var(--ink);font-size:14px;width:fit-content}

/* founders */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;max-width:860px}
@media (max-width:760px){.people{grid-template-columns:1fr}}
.person{display:flex;gap:20px;align-items:flex-start;padding:30px;border-radius:var(--k-r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.avatar{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:var(--grad);color:#fff;font-family:"Barlow",var(--k-font);font-weight:600;font-size:24px}
.person h3{font-size:20px}
.person .role{margin:4px 0 0;font-family:"Barlow",var(--k-font);font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.person p:last-child{margin:12px 0 0;color:var(--muted);font-size:15.5px}

/* FAQ */
.faq{margin-top:44px;max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 4px;cursor:pointer;font-weight:700;font-size:18px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .k-icon{flex:none;width:20px;height:20px;color:var(--accent);transition:transform .32s var(--k-smooth)}
.faq details[open] summary .k-icon{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.faq details p{margin:0;padding:0 4px 26px;color:var(--muted);font-size:16.5px;line-height:1.7;max-width:66ch}
.faq details[open] p{animation:open-down .4s var(--k-smooth)}

/* reduced motion: no drift, no lift, content still shows */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-glow{animation:none}
  .card,.card:hover{transition:none;transform:none}
  .more[open] .more-body,.faq details[open] p{animation:none}
  .more summary .k-icon,.faq summary .k-icon{transition:none}
}