/* Concept Stadium /products/ pages.
   Content styles come from the system-landing-page template; header, menu and footer mirror the
   live theme (conceptstadium-v2). Colours are semantic so .dark-theme can flip them. */

:root{
  --ground:#f2f2f2; --card:#ffffff; --block:#000000; --on-block:#ffffff; --on-block-2:#cccccc;
  --ink:#000000; --ink-2:#313131; --pill-line:#313131; --chip:#313131;
  --accent:#5cdfc7; --mint:#def9f4;
  --r:1.35em;
  --ease:cubic-bezier(.645,.045,.355,1);
  --sans:"filson-pro",system-ui,sans-serif;
  --head:"swear-display",Georgia,serif;
  --wrap:calc((100vw - 11em) / 12 + 1em);
  color-scheme:light;
}
.dark-theme{
  --ground:#000000; --card:#1c1b1f; --block:#1c1b1f; --on-block:#ffffff; --on-block-2:#bdbdbd;
  --ink:#f2f2f2; --ink-2:#bdbdbd; --pill-line:#4a4950; --chip:#36353b;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
@media(min-width:1441px){html{font-size:1vw}} /* live theme: fluid root above 1440px */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.5;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}
h1,h2,h3{font-family:var(--head);line-height:1.1;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:1001;background:var(--block);color:var(--on-block);padding:.75rem 1.25rem;border-radius:99px;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- site chrome: header, menu, connect tab and footer take the live theme's body type ---------- */
.site-header,.full-screen-menu,.connect-dock{font-size:1.2rem}
.site-header,.full-screen-menu,.connect-dock,.footer-wrap{font-weight:200;line-height:1.4}
.site-header strong,.full-screen-menu strong,.footer-wrap strong{font-weight:800}

/* ---------- site header (live theme: fixed, transparent, white pill once scrolled) ---------- */
.site-header{position:fixed;top:1rem;left:0;right:0;height:3.5rem;z-index:999;view-transition-name:site-header}
.wrapper{padding-left:var(--wrap);padding-right:var(--wrap)}
.site-header .wrapper{height:100%}
.header-container{height:100%;display:flex;align-items:center;justify-content:space-between;column-gap:1rem;border-radius:999999px;padding:.35rem 0;transition:background-color .3s ease-out}
.site-branding{position:relative;height:100%;width:18em;max-width:55vw}
.site-branding a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--ink);transition:opacity .2s var(--ease)}
.site-branding svg{height:100%;width:auto;max-width:100%}
.alt-logo{opacity:0;pointer-events:none}
.alt-logo svg{height:45%}
.header-navs{display:flex;align-items:center;column-gap:3em;height:100%}
.main-navigation{font-weight:400}
.main-navigation ul{list-style:none;padding:0;display:flex;align-items:center;height:100%}
.main-navigation a{display:flex;align-items:center;min-height:2em;padding:.1em .65em 0;text-decoration:none;text-transform:uppercase;font-size:1rem;line-height:1;color:var(--ink);transition:color .2s}
.main-navigation a:hover{color:var(--accent)}
.header-icons{display:flex;align-items:center;column-gap:.5em}
.header-icon{font:inherit;position:relative;width:2em;height:2em;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--ink);padding:0}
.header-icon::before{content:"";position:absolute;inset:-5px} /* 44px touch target without changing the live spacing */
.header-icon svg{height:1.7em;width:auto;transition:color .2s ease}
.header-icon:hover svg{color:var(--accent)}
.hamburger svg{height:1.05em}
.theme-toggle .to-light,.dark-theme .theme-toggle .to-dark,.hamburger .menu-close,.menu-is-open .hamburger .menu-open{display:none}
.dark-theme .theme-toggle .to-light,.menu-is-open .hamburger .menu-close{display:block}
.site-header.scrolled .header-container{background-color:rgba(255,255,255,.9);padding-left:1.5rem;padding-right:1.5rem}
.site-header.scrolled .custom-logo-link{opacity:0;pointer-events:none}
.site-header.scrolled .alt-logo{opacity:1;pointer-events:auto}
.site-header.scrolled .site-branding a,.site-header.scrolled .main-navigation a,.site-header.scrolled .header-icon{color:#000}
.menu-is-open .site-header .site-branding a,.menu-is-open .site-header .header-icon{color:#000}
.menu-is-open .site-header .hamburger{color:#fff}
.menu-is-open .site-header.scrolled .hamburger{color:#000}
.menu-is-open .main-navigation,.menu-is-open .theme-toggle{opacity:0;pointer-events:none}

/* full-screen menu (burger) */
.full-screen-menu{position:fixed;inset:0;z-index:998;background:var(--mint);color:#000;overflow:auto}
.full-screen-menu[hidden]{display:none}
.full-screen-menu .wrapper{min-height:100%}
.full-screen-menu-container{min-height:100svh;display:grid;grid-template-columns:1fr 1fr}
.full-screen-menu ul{list-style:none;padding:0}
.full-screen-menu a{text-decoration:none}
.full-screen-menu a{transition:color .2s ease}
.full-screen-menu a:hover{color:var(--accent)}
.full-screen-menu li:not(:last-child){margin-bottom:.25em}
.full-screen-menu p{margin:.5em 0}
.menu-left{padding:5.5rem 0 3rem}
.menu-left li{margin-top:.7em}
.menu-left a{text-transform:uppercase;font-size:2rem;line-height:1em}
.menu-right{margin:1rem -.3rem 1rem 0;background:#000;color:#fff;border-radius:8px;padding:15% 10%;display:flex;flex-direction:column;row-gap:5%;font-weight:300}
.menu-right strong{color:var(--accent)}
.menu-right .copyright{font-weight:200}

/* ---------- page ---------- */
.page{max-width:90rem;margin:0 auto clamp(48px,8vw,120px);padding:calc(1rem + 3.5rem + clamp(12px,2vw,24px)) clamp(12px,2vw,24px) clamp(12px,2vw,24px);display:grid;gap:clamp(12px,2vw,24px)}

/* call to action pills: the accent's CTA use */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:99px;background:var(--accent);color:#000;font-weight:700;text-decoration:none;border:2px solid var(--accent);transition:background-color .1s ease-out,color .1s ease-out,border-color .1s ease-out}
.btn:hover{background:var(--on-block);border-color:var(--on-block);color:#000}
.btn.ghost{background:transparent;color:var(--on-block);border-color:var(--on-block-2)}
.btn.ghost:hover{background:var(--on-block);border-color:var(--on-block);color:#000}
.btn:focus-visible{outline:3px solid var(--on-block);outline-offset:3px}

/* hero: dark block, product + CTA bar, light headline with one heavy word */
.hero{background:var(--block);color:var(--on-block);border-radius:var(--r);padding:clamp(20px,3vw,40px) clamp(24px,6vw,96px) clamp(28px,4vw,56px)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(40px,7vw,112px)}
.bar .btn{padding:8px 20px}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:.5em;font-weight:700;font-size:1rem}
.crumb a{text-decoration:none;color:var(--on-block-2)}
.crumb a:hover{color:var(--on-block);text-decoration:underline;text-decoration-color:var(--accent)}
.crumb span[aria-hidden]{color:var(--on-block-2)}
.hero h1{font-weight:400;font-size:clamp(2.6rem,6.8vw,6rem);max-width:20ch}
.hero h1 strong{font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.06em;text-underline-offset:.12em}
.hero .sub{margin-top:24px;font-weight:300;font-size:1.25rem;max-width:44ch}
.jump{margin-top:clamp(32px,5vw,72px)}
.jump a{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;padding:8px 16px 8px 18px;border:1px solid var(--pill-line);border-radius:99px;transition:border-color .2s ease}
.jump a:hover{border-color:var(--on-block)}
.jump svg{height:1em;width:auto}
.reads{list-style:none;padding:0;margin-top:clamp(32px,5vw,72px);display:flex;flex-wrap:wrap;gap:12px}
.reads li{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid var(--pill-line);border-radius:99px;font-weight:700}
.reads svg{width:24px;height:24px;flex:none;stroke:var(--on-block)}

/* problem: one serif line, the brief's intro, then a compact today / with-us split */
.lede{padding:clamp(40px,7vw,96px) clamp(8px,6vw,96px) 0}
.lede > .line{font-family:var(--head);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.5rem);line-height:1.3;max-width:30ch}
.lede > p.body{font-family:var(--sans);font-weight:300;font-size:1.25rem;line-height:1.5;max-width:56ch;margin-top:24px;color:var(--ink-2)}
.lede b{font-weight:700}
.split{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.split > div{border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.split .now{background:var(--card)}
.split .with{background:var(--block);color:var(--on-block)}
.dark-theme .split .with{background:#f2f2f2;color:#000}
.split h3{font-weight:700;font-size:1.25rem;margin-bottom:12px}
.split ul{padding-left:1.1em;display:grid;gap:8px}
.split .now li{color:var(--ink-2)}

/* steps */
.how{padding:clamp(40px,7vw,96px) clamp(8px,6vw,96px)}
.how h2,.band h2{font-size:clamp(1.75rem,3vw,2.5rem)}
.how .note,.band .note{margin-top:8px;color:var(--ink-2);max-width:60ch}
.steps{list-style:none;padding:0;margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.step{display:flex;flex-direction:column;gap:12px}
.step svg{width:100%;max-width:160px;height:auto;margin-bottom:8px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.step svg .f{fill:var(--card)} .step svg .g{fill:var(--ground)} .step svg .k{fill:var(--ink-2)} .step svg .i{fill:var(--ink)} .step svg .a{fill:var(--accent)} .step svg .as{stroke:var(--accent)} .step svg .d{stroke-dasharray:5 6}
.num{font-family:var(--head);font-weight:800;font-size:clamp(4rem,7vw,6rem);line-height:.9;color:var(--accent)}
.step h3{font-weight:700;font-size:1.25rem;line-height:1.2}
.step p{color:var(--ink-2);max-width:24ch}

/* result: dark block, white mock of what the buyer actually gets */
.result{background:var(--block);color:var(--on-block);border-radius:var(--r);padding:clamp(40px,7vw,112px) clamp(24px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.result h2{font-weight:700;font-size:clamp(2rem,4.6vw,4rem);max-width:16ch}
.result .copy p{margin-top:24px;max-width:40ch;font-weight:300;font-size:1.25rem}
.result .copy a{text-decoration-color:var(--accent);text-underline-offset:.15em}
.apps{list-style:none;padding:0;margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.apps li{padding:4px 16px;border-radius:99px;background:var(--chip);color:#fff;font-weight:700}

/* mocks share one frame: white card, grey header bar. They stay light in dark mode: they show the artefact itself. */
/* taste-skill-ignore: interface fragment (data-ui) frame */
.mock{background:#fff;color:#000;border-radius:var(--r);box-shadow:0 0 0 .3em #fff;overflow:hidden;font-size:1rem}
/* taste-skill-ignore: interface fragment (data-ui) header bar */
.mock-h{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#f2f2f2;border-bottom:1px solid #313131;min-width:0}
.mock-h b{font-weight:700}
.mock-h .dots{display:flex;gap:6px;flex:none}.mock-h .dots i{width:10px;height:10px;border-radius:99px;background:#cccccc}
.mock-h .url{flex:1;min-width:0;padding:2px 12px;border-radius:99px;background:#fff;color:#313131;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-b{padding:24px 20px 20px}
.mock small,.mock .muted{color:#313131}
.tag{display:inline-block;padding:2px 12px;border-radius:99px;background:#f2f2f2;border:1px solid #313131;font-weight:700;font-size:.875rem;transition:background-color .6s var(--ease) .5s}
.ln{height:8px;border-radius:99px;background:#f2f2f2;margin-bottom:12px}
.ln.w1{width:92%}.ln.w2{width:78%}.ln.w3{width:46%;margin-bottom:28px}.ln.w4{width:64%}
.hl{border-radius:1em;transition:background-color .6s var(--ease) .5s}
.stamped .hl,.stamped .tag.hl{background:var(--accent)}
/* email signature mock */
.sig{display:flex;gap:16px;align-items:center;padding:16px}
.pic{width:64px;height:64px;border-radius:.8em;background:#cccccc;border:1px solid #313131;flex:none;overflow:hidden;position:relative}
.pic::before{content:"";position:absolute;left:50%;top:16px;width:24px;height:24px;margin-left:-12px;border-radius:99px;background:#313131}
.pic::after{content:"";position:absolute;left:50%;top:44px;width:48px;height:36px;margin-left:-24px;border-radius:24px 24px 0 0;background:#313131}
.sig b,.mock .t{font-family:var(--head);font-weight:700;display:block;line-height:1.2}
.sig small{font-size:1rem}
/* brand portal mock */
.bp{display:grid;grid-template-columns:minmax(0,1fr) 34%;gap:16px;align-items:end}
.bp-logo{height:72px;border-radius:.8em;background:#000;color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.75rem;margin:12px 0 16px}
.sw{display:flex;gap:8px;margin-bottom:16px}.sw i{flex:1;height:40px;border-radius:.6em;border:1px solid #313131}
.sw.mini{gap:4px;margin:8px 0}.sw.mini i{height:14px;border-radius:.3em}
.pdf{border:1px solid #313131;border-radius:.6em;padding:10px;aspect-ratio:1.414/1;display:flex;flex-direction:column;justify-content:space-between;background:#fff;font-size:.75rem;font-weight:700}
.pdf .bp-logo{height:26px;font-size:.75rem;border-radius:.4em;margin:0}
/* buddy mock */
.chat{display:grid;gap:14px}
.msg-q{justify-self:end;max-width:82%;padding:10px 16px;border-radius:1em 1em .2em 1em;background:#000;color:#fff}
.msg-a{max-width:92%;padding:14px 16px 12px;border-radius:1em 1em 1em .2em;background:#f2f2f2}
.msg-a .ln{background:#cccccc;height:7px;margin-bottom:9px}
.src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding:8px;border-radius:.8em}
.src span{padding:2px 10px;border-radius:99px;background:#fff;border:1px solid #313131;font-size:.8125rem;font-weight:700}
.src em{flex-basis:100%;font-style:normal;font-size:.8125rem;color:#313131}
/* client portal mock */
.ap{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.ap-img{aspect-ratio:1;border-radius:.8em;background:#cccccc;border:1px solid #313131;position:relative;overflow:hidden}
.ap-img::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:70%;border-radius:50% 50% 0 0;background:#313131}
.ap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ap-actions span{padding:6px 14px;border-radius:99px;border:1px solid #313131;font-weight:700;font-size:.875rem}
.trail{margin-top:18px;padding:12px 14px;display:grid;gap:4px;font-size:.875rem}
.trail b{font-weight:700}
/* nps mock */
.score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.score .t{font-size:clamp(3rem,6vw,4.5rem);line-height:1}
.bars{display:flex;height:18px;border-radius:99px;overflow:hidden;margin:16px 0 8px;border:1px solid #313131}
.bars i{display:block}
.bars .hl{background:#f2f2f2;border-radius:0}.stamped .bars .hl{background:var(--accent)}
.legend{display:flex;justify-content:space-between;gap:8px;font-size:.8125rem;color:#313131;flex-wrap:wrap}
.themes{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.themes span{padding:2px 10px;border-radius:99px;border:1px solid #313131;font-size:.8125rem;font-weight:700}
.sample{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#313131}

/* benefits and bands on the ground */
.band{padding:clamp(40px,7vw,96px) clamp(8px,6vw,96px)}
.cards{list-style:none;padding:0;margin-top:clamp(24px,4vw,48px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.cards > li{grid-column:span 2;background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.cards.five > li:nth-child(-n+2){grid-column:span 3}
.cards b{display:block;font-family:var(--head);font-weight:700;font-size:1.375rem;line-height:1.2;margin-bottom:8px}
.cards p{color:var(--ink-2)}
.band .split{margin-top:clamp(24px,4vw,48px)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,96px);align-items:start}
.two-col .prose{display:grid;gap:16px;font-weight:300;font-size:1.25rem;color:var(--ink-2);max-width:52ch}

/* product cards (overview) and product links (each page) */
.products{list-style:none;padding:0;margin-top:clamp(24px,4vw,48px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.products > li{grid-column:span 2;display:flex}
.products > li:nth-child(-n+2){grid-column:span 3}
.pcard{flex:1;display:flex;flex-direction:column;gap:16px;min-height:clamp(240px,24vw,340px);padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--card);text-decoration:none;transition:background-color .2s ease,color .2s ease}
.pcard .t{font-family:var(--head);font-weight:700;font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.05}
.pcard p{color:var(--ink-2);max-width:40ch;transition:color .2s ease}
.pcard .go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:700}
.pcard .go svg{height:.75em;width:auto;transition:transform .2s var(--ease)}
.pcard:hover,.pcard:focus-visible{background:var(--block);color:var(--on-block)}
.dark-theme .pcard:hover,.dark-theme .pcard:focus-visible{background:#f2f2f2;color:#000}
.pcard:hover p,.pcard:focus-visible p{color:inherit}
.pcard:hover .go svg{transform:translateX(4px)}
.more{list-style:none;padding:0;margin-top:clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:12px}
.more a{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:99px;background:var(--card);font-weight:700;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.more a svg{height:.7em;width:auto}
.more a:hover{background:var(--block);color:var(--on-block)}
.dark-theme .more a:hover{background:#f2f2f2;color:#000}

/* closing call to action: copy left, actions right, no dead column */
.cta{background:var(--block);color:var(--on-block);border-radius:var(--r);padding:clamp(40px,7vw,96px) clamp(24px,6vw,96px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.cta h2{font-weight:700;font-size:clamp(2rem,4.6vw,4rem);max-width:20ch}
.cta .copy p{margin-top:16px;font-weight:300;font-size:1.25rem;max-width:44ch}
.cta .act{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.cta .act .btn{font-size:1.125rem;padding:14px 30px}

/* ---------- footer (live theme) ---------- */
.footer-wrap{position:relative;z-index:20;font-size:1.2rem}
.footer-wrap .wrapper{padding-left:calc((100vw - 11em) / 12);padding-right:calc((100vw - 11em) / 12)}
/* sticky in body: floats at the viewport bottom while scrolling, docks on top of the footer at the end */
.connect-dock{position:sticky;bottom:0;z-index:30;height:0;pointer-events:none;padding:0 var(--wrap)}
.connect-tab{pointer-events:auto;position:absolute;bottom:0;margin-left:-1em;width:21em;display:flex;column-gap:.8em;padding:2em 1.4em 1.6em;border-radius:8px 8px 0 0;background:var(--accent);color:#000;text-decoration:none;font-size:.9em;font-weight:800;line-height:1.2em;transform:translateX(-.15em);transition:opacity .3s ease-out,transform .3s ease-out}
.ct-text{font-family:"swear-display-cilati",var(--head);font-size:3em}
.js .connect-tab:not(.visible){opacity:0;transform:translateX(-1em);pointer-events:none}
.connect-tab svg{flex:none;height:.8em;width:auto;margin:.8em 0 .4em}
.site-footer{position:relative;background:#000;color:#fff;font-weight:300;border-radius:8px 8px 0 0;padding:5em 0 2em}
.dark-theme .site-footer{background:#1c1b1f}
.scroll-to-top{position:absolute;top:.5em;right:.3em;width:2.4em;height:2.4em;padding:.5em;color:#fff}
.scroll-to-top svg{height:100%;width:auto;transition:color .2s ease}
.scroll-to-top:hover svg{color:var(--accent)}
.footer-container{display:grid;grid-template-columns:2.2fr 3fr 3fr;column-gap:3rem;row-gap:2rem;padding:0 2rem}
.footer-container a{text-decoration:none;transition:color .2s ease}
.footer-container a:hover{color:var(--accent)}
.footer-container p{margin:.7em 0;line-height:1.3em}
.footer-one > :first-child,.footer-two > :first-child{margin-top:0}
.footer-container ul{list-style:none;padding:0}
.footer-container li{line-height:1.3em}
.footer-two{padding-top:2em}
.footer-container .footer-two p{margin:1.3em 0 0}
.footer-container .footer-two p:first-child{margin-top:0}
.footer-logos{display:flex;gap:1em;margin-top:1.5em}
.footer-logos svg{height:2em;width:auto;color:#fff}
.footer-three{display:flex;flex-direction:column;justify-content:space-between}
.footer-navs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.7em}
.legal-menu{margin-top:1.3em}
.footer-copyright{margin-top:2em;font-weight:100;line-height:1.2em}
.footer-copyright .small{font-size:.45em}

/* ---------- motion ---------- */
/* reveal: content visible by default; JS opts in */
.js .reveal,.js .step,.js .hero h1{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .in{opacity:1!important;transform:none!important}
.js .step:nth-child(2){transition-delay:.08s}.js .step:nth-child(3){transition-delay:.16s}.js .step:nth-child(4){transition-delay:.24s}.js .step:nth-child(5){transition-delay:.32s}
.js .reveal-group > :nth-child(2){transition-delay:.06s}.js .reveal-group > :nth-child(3){transition-delay:.12s}.js .reveal-group > :nth-child(4){transition-delay:.18s}.js .reveal-group > :nth-child(5){transition-delay:.24s}

/* page transitions between /products/ pages (Chrome, Edge, Safari 18.2+; others navigate normally) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s var(--ease) both vt-out}
::view-transition-new(root){animation:.45s cubic-bezier(.16,1,.3,1) both vt-in}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(24px)}}

/* ---------- breakpoints: live site 1200 (nav), 920 (wrapper, footer), template 992/620/520 ---------- */
@media(max-width:1440px){.site-header,.full-screen-menu,.connect-dock{font-size:1.1rem}.footer-wrap{font-size:.9rem}.connect-tab{font-size:.8em}}
@media(max-width:640px){.site-header,.full-screen-menu,.connect-dock{font-size:1rem}.connect-tab{font-size:.7em}}
@media(max-width:460px){.connect-tab{font-size:.6em}.footer-navs{grid-template-columns:1fr}.footer-one br{display:none}}
@media(max-width:460px),(max-height:414px){
  .full-screen-menu-container{grid-template-columns:1fr}
  .menu-right{padding:5%}
  .menu-is-open .site-header:not(.scrolled){margin:0 1.5rem;background:rgba(255,255,255,.9);border-radius:999999px}
  .menu-is-open .site-header .hamburger{color:#000}
}
@media(max-width:1200px){
  .main-navigation{display:none}
}
@media(max-width:992px){
  .steps{grid-template-columns:1fr;gap:32px}
  .step{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;row-gap:4px;align-items:start}
  .step svg{grid-row:1 / span 3;max-width:120px}
  .step p{max-width:44ch}
  .result,.cta,.two-col{grid-template-columns:1fr}
  .cta .act{justify-content:flex-start}
  .cards,.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards > li,.cards.five > li:nth-child(-n+2),.products > li,.products > li:nth-child(-n+2){grid-column:span 1}
  .cards.five > li:last-child:nth-child(odd),.products > li:last-child:nth-child(odd){grid-column:span 2}
}
@media(max-width:920px){
  .wrapper,.footer-wrap .wrapper,.connect-dock{padding-left:1em;padding-right:1em}
  .footer-container{grid-template-columns:1fr;padding:0 1.5rem}
}
@media(max-width:620px){
  .split,.cards,.products{grid-template-columns:1fr}
  .cards > li,.cards.five > li:nth-child(-n+2),.cards.five > li:last-child:nth-child(odd),.products > li,.products > li:nth-child(-n+2),.products > li:last-child:nth-child(odd){grid-column:span 1}
  .pcard{min-height:0}
  .bp{grid-template-columns:1fr}
  .bp .pdf{width:55%;justify-self:end;margin-top:-8px}
}
@media(max-width:520px){
  .step{grid-template-columns:88px minmax(0,1fr);column-gap:16px}
  .step svg{max-width:88px}
  .num{font-size:3.5rem}
  .mock-b{padding:20px 12px 12px}
  .sig{gap:12px;padding:12px}
  .pic{width:48px;height:48px}
  .pic::before{top:10px;width:18px;height:18px;margin-left:-9px}
  .pic::after{top:32px;width:36px;height:28px;margin-left:-18px;border-radius:18px 18px 0 0}
  .bar{flex-wrap:wrap}
  .bar .btn{padding:8px 14px;font-size:.875rem}
  .ap{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .site-branding{width:11em}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .step,.js .hero h1{opacity:1;transform:none;transition:none}
  .hl,.tag,.btn,.pcard,.connect-tab,body{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{.site-header,.full-screen-menu,.connect-dock,.scroll-to-top{display:none}.page{padding-top:0}}