/* Generated by scripts/homepage/build.mjs from scripts/homepage/home.dc.html. */
body{margin:0;background:#FAFAF8}
a{color:#17191A;text-decoration:none}
.gl{background:rgba(250,250,248,.5);-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(23,25,26,.07),0 28px 56px -30px rgba(23,25,26,.3)}
.gl-lite{background:linear-gradient(155deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 38%,rgba(246,245,242,.6) 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:2px;box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.8),0 0 0 1px rgba(23,25,26,.06),0 22px 44px -32px rgba(23,25,26,.22)}
.v2-panel{--fg:#17191A;--muted:#4A4E50;--line:rgba(23,25,26,.16);--tile:rgba(255,255,255,.6);--dot:#7A1F2B;--dk:0;--peek:.8;position:relative;overflow:hidden;border-radius:4px;height:700px;color:var(--fg);transition:color .5s ease}
.v2-panel.v2-dark{--fg:#FAFAF8;--muted:rgba(250,250,248,.74);--line:rgba(250,250,248,.22);--tile:rgba(255,255,255,.06);--dot:#C4566A;--dk:1;--peek:1}
.v2-panels:hover .v2-panel{--fg:#17191A;--muted:#4A4E50;--line:rgba(23,25,26,.16);--tile:rgba(255,255,255,.6);--dot:#7A1F2B;--dk:0;--peek:.8}
.v2-panels:hover .v2-panel:hover{--fg:#FAFAF8;--muted:rgba(250,250,248,.74);--line:rgba(250,250,248,.22);--tile:rgba(255,255,255,.06);--dot:#C4566A;--dk:1;--peek:1}
.v2-panel *{transition:color .5s ease,border-color .5s ease,background-color .5s ease,opacity .5s ease}
.v2-darklayer{opacity:var(--dk)}
.v2-peek{opacity:var(--peek)}
.rg-guide{display:none}
.rg-link{display:none}
.rg-pdot{display:none}
.rg-row{color:#17191A}
.rg-desc{display:block;max-height:0;opacity:0;overflow:hidden}
.rg-tick{opacity:1}
.rg-glyph{color:rgba(23,25,26,.45);display:block}
.rg-cellname{padding:0 .06em;margin:0 -.06em}
.v2-screen{opacity:0}
.v2-screen-0{opacity:1}
.rg-hl{padding:0 .06em;margin:0 -.06em;background-image:linear-gradient(rgba(122,31,43,.16),rgba(122,31,43,.16));background-repeat:no-repeat;background-size:0% 100%;background-position:0% 0%;animation:4.2s linear 1 both}
.rg-hl-first{background-size:100% 100%;animation-name:rgHlFirst}
.rg-hl-last{animation-name:rgHlLast}
/* The headline is still. The only motion on load is the dot breaking out of the logo and riding the line down. */
@keyframes rgHlFirst{0%,16%{background-size:100% 100%;background-position:0% 0%}20%{background-size:0% 100%;background-position:100% 0%}21%,100%{background-size:0% 100%;background-position:0% 0%}}
@keyframes rgHlLast{0%,24%{background-size:0% 100%;background-position:0% 0%}34%,100%{background-size:100% 100%;background-position:0% 0%}}
/* The escape is driven by scroll, never by time: the dot waits in the logo until the reader scrolls, then rides the line at their pace.
   How much scrolling the escape takes is the board setting escapeScroll. */
.rg-intro{offset-rotate:0deg;transform-origin:0 0}
/* Growth uses transform, which applies before the move along the path, so the dot scales in place rather than drifting.
   It loads stuck in the cell at the size of the logo dot (3.3px of 9px). The first quarter of the escape scroll it swells against the walls
   without moving (to about 6.3px, the most the cell holds), then it breaks out and grows to full size on the way to the line. */
@keyframes rgGrow{0%{transform:scale(.366)}50%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes rgIntro{
  0%{offset-distance:0%;animation-timing-function:cubic-bezier(.5,0,.4,1)}
  68%{offset-distance:var(--fa);animation-timing-function:linear}
  82%{offset-distance:var(--fb);animation-timing-function:cubic-bezier(.2,0,.3,1)}
  100%{offset-distance:100%}
}
@supports (animation-timeline: view()) {
  .rg-row{color:#80868A;animation:rgInk linear none,rgBurg linear none;animation-timeline:scroll(root),scroll(root)}
  @media (min-width:1100px){.rg-desc{animation:rgDesc linear none;animation-timeline:scroll(root)}}
  .rg-tick{opacity:0;animation:rgOn linear none;animation-timeline:scroll(root)}
  .rg-guide{display:block;opacity:0;animation:rgAlong linear both,rgOn linear none;animation-timeline:scroll(root),scroll(root)}
  .rg-introwrap{animation:rgFadeOut linear both;animation-timeline:scroll(root)}
  .rg-link{display:block;opacity:0;animation:rgAlong linear both,rgOn linear none;animation-timeline:scroll(root),scroll(root)}
  .rg-pdot{display:block;opacity:0;animation:rgAlong linear both,rgOn linear none;animation-timeline:scroll(root),scroll(root)}
  .rg-logodot{animation:rgLogo linear both;animation-timeline:scroll(root)}
  .rg-ring{animation:rgDraw linear both;animation-timeline:scroll(root)}
  .rg-orbit{opacity:0;animation:rgAlong linear both,rgOn linear none;animation-timeline:scroll(root),scroll(root)}
  .v2-screen{opacity:0;animation:rgOn linear none;animation-timeline:scroll(root)}
  .rg-glyph{animation:rgGlyphOn linear none;animation-timeline:scroll(root)}
  .rg-cellname{animation:rgHlOn linear none;animation-timeline:scroll(root)}
}
@keyframes rgGlyphOn{from{color:#7A1F2B}to{color:#7A1F2B}}
@keyframes rgHlOn{from{background-color:rgba(122,31,43,.16)}to{background-color:rgba(122,31,43,.16)}}
@keyframes rgAlong{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes rgFadeOut{from{opacity:1}to{opacity:0}}
@keyframes rgOn{from{opacity:1}to{opacity:1}}
@keyframes rgInk{from{color:#17191A}to{color:#17191A}}
@keyframes rgBurg{from{color:#7A1F2B}to{color:#7A1F2B}}
@keyframes rgDesc{0%{max-height:0;opacity:0}12%,88%{max-height:124px;opacity:1}100%{max-height:0;opacity:0}}
@keyframes rgLogo{0%,97%{opacity:0}100%{opacity:1}}
@keyframes rgDraw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
/* Example initiative switcher (How it works). Pure CSS: the checked radio decides which department's copy shows. */
.ini-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ini-seg{display:inline-flex;border:1px solid rgba(23,25,26,.22);border-radius:2px;padding:3px;gap:2px;background:rgba(255,255,255,.6)}
.ini-tab{cursor:pointer;color:#4A4E50;padding:7px 16px;border-radius:1px;font-size:15px;line-height:1.2;transition:color .2s ease,background-color .2s ease}
.ini-tab:hover{color:#17191A;background:rgba(23,25,26,.06)}
.ini-radio:focus-visible+.ini-tab{outline:2px solid #7A1F2B;outline-offset:3px}
.ini-v{display:none}
.ini-sales{display:inline}
.ini-radio:checked+.ini-tab{color:#FAFAF8;background:#17191A}
#how:has(.ini-radio:checked) .ini-v{display:none}
#how:has(#ini-sales:checked) .ini-sales,#how:has(#ini-mkt:checked) .ini-mkt,#how:has(#ini-fin:checked) .ini-fin,#how:has(#ini-ops:checked) .ini-ops,#how:has(#ini-hr:checked) .ini-hr{display:inline}
/* Phones and tablets (under 1100px). Desktop is a 1440px scroll-driven composition and is untouched:
   every rule below is inside these queries. Here the same story reflows into stacked sections. The hero
   fills the first screen and keeps its sheet-into-lines drawing; the red line curves out of it into a rail
   down the right gutter, and the dot (moved by a small script, see mobile-line.js) breaks out of the logo
   cell and rides the lines as you scroll. Steps and features light up as they pass the middle of the
   screen, and the Meet Skyla list pins and opens one stage at a time, like the desktop loop.
   Type: 16 to 17px body at 1.6 line height, full-width measure, nothing under 14px, 44px tap targets. */
.m-only{display:none}
.m-loopwrap,.m-loopstick{display:flex;flex-direction:column;gap:14px}
/* Desktop: the closing headline's second line stays whole (Safari measures it a hair wider and wrapped "freedom?"). */
@media (min-width:1100px){.m-keep{white-space:nowrap}}
@media (max-width:1099px){
  :root{--g:22px;--rail:2.6%}
  .m-root{width:auto!important}
  .m-deco{display:none!important}
  .m-only{display:block}
  /* Header */
  .m-header{height:64px!important;padding:0 var(--g)!important;background:#FAFAF8;pointer-events:auto!important}
  .m-nav{padding:6px 0 6px 10px!important;gap:0!important}
  .m-nav a:not(:last-child){display:none}
  .m-nav a:last-child{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:0 16px!important;font-size:15px}
  .rg-logodot{animation:none!important;opacity:1}
  html.m-escaped .rg-logodot{opacity:0}
  .m-h2{font-size:clamp(34px,9vw,46px)!important;line-height:1.08!important;text-wrap:balance}
  /* Hero: fills the first screen, the desktop drawing scaled to it */
  .m-hero{height:auto!important;margin-top:-64px!important}
  .m-hero-stage{position:relative!important;z-index:auto!important;height:auto!important;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:96px var(--g) 64px}
  .m-heroline{width:100%!important;height:100%!important}
  .m-heroline path{vector-effect:non-scaling-stroke}
  .m-herorow{width:32.6%!important}
  /* On phones the hero and closing drawings run right behind the text: keep the glass mostly opaque so a line never reads through the words. */
  .m-hero-card,.m-talk-card{background:rgba(250,250,248,.92)!important}
  .m-hero-card{position:relative!important;z-index:29;left:auto!important;top:auto!important;width:auto!important;padding:26px 22px 28px!important;gap:20px!important}
  .m-h1{font-size:clamp(40px,11.2vw,84px)!important;line-height:1.02!important;letter-spacing:-.025em!important}
  .m-hero-card p{font-size:17px!important;line-height:1.6!important}
  .m-hero-card .m-proof{font-size:13px!important;line-height:1.5!important}
  .m-cta{flex-wrap:wrap;gap:6px 26px!important}
  .m-cta a{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box;font-size:16px!important}
  .m-cta a:first-child{padding:0 24px!important}
  /* The red line: out of the hero into a rail down the right gutter */
  .m-joinline{position:absolute;left:0;top:0;width:100%;height:120px;overflow:visible;pointer-events:none}
  .m-plat,.m-how,.m-for,.m-team{position:relative}
  .m-plat::before,.m-how::before,.m-for::before,.m-team::before{content:"";position:absolute;right:var(--rail);top:0;bottom:0;width:1.6px;margin-right:-.8px;background:#7A1F2B;pointer-events:none}
  .m-plat::before{top:120px}
  .m-dot{position:absolute;z-index:31;top:0;left:0;width:12px;height:12px;border-radius:50%;background:#7A1F2B;pointer-events:none;will-change:transform}
  /* With the script running, it draws the whole route (with the zigzag through the platform), so the CSS rail steps aside. */
  .m-route{position:absolute;z-index:3;top:0;left:0;overflow:visible;pointer-events:none}
  .m-js .m-joinline,.m-js .m-plat::before,.m-js .m-how::before,.m-js .m-for::before,.m-js .m-team::before{display:none}
  /* Steps and features light up as the dot reaches them, like the desktop rows. */
  .m-js .m-step .rg-row{animation:none!important;color:#80868A!important;transition:color .35s ease}
  .m-js .m-step.m-on .rg-row{color:#7A1F2B!important}
  .m-js .m-step.m-done .rg-row{color:#17191A!important}
  .m-js .m-cell .rg-glyph{animation:none!important;color:rgba(23,25,26,.4)!important;transition:color .35s ease}
  .m-js .m-cell.m-lit .rg-glyph{color:#7A1F2B!important}
  .m-js .m-cell .rg-cellname{animation:none!important;background-color:rgba(122,31,43,0)!important;transition:background-color .35s ease}
  .m-js .m-cell.m-cur .rg-cellname{background-color:rgba(122,31,43,.16)!important}
  /* Platform: each step, then its three features as one compact panel */
  .m-plat{height:auto!important}
  .m-plat-intro{height:auto!important;padding:96px var(--g) 8px!important}
  .m-plat-head{flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
  .m-plat-head p{font-size:17px!important;line-height:1.65!important}
  .m-plat-stage{position:relative!important;height:auto!important;overflow:visible!important;background:none!important;display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0 calc(var(--g) + 8px) 32px}
  .m-steps,.m-cells{display:contents!important}
  .m-step{padding:56px 0 38px!important;margin:0 -8px!important;gap:12px!important}
  .m-step:nth-child(1){order:1}.m-step:nth-child(2){order:3}.m-step:nth-child(3){order:5}
  .m-cell:nth-child(-n+3){order:2}.m-cell:nth-child(n+4){order:4}.m-cell:nth-child(n+7){order:6}
  .m-step .rg-row{font-size:27px!important;line-height:1.15!important}
  .m-step .rg-row>span{width:34px!important}
  .m-step>span:last-child{padding-left:0!important;font-size:16px!important;line-height:1.65!important;color:#4A4E50}
  .m-cell{display:grid!important;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px!important;align-items:start;padding:16px 16px 17px!important;border:1px solid rgba(23,25,26,.12)!important;border-top-width:0!important;background:rgba(255,255,255,.72)}
  .m-cell:nth-child(3n+1){border-top-width:1px!important;border-radius:3px 3px 0 0}
  .m-cell:nth-child(3n){border-radius:0 0 3px 3px}
  .m-cell .rg-glyph{grid-row:1/span 2;width:40px;height:27px;margin-top:3px}
  .m-cell .rg-cellname{font-size:19px!important;line-height:1.2!important;justify-self:start;align-self:start!important;width:fit-content}
  .m-cell>span:last-child{font-size:15px!important;line-height:1.55!important}
  /* Meet Skyla */
  .m-how{height:auto!important}
  .m-how-stage{position:relative!important;height:auto!important;overflow:visible!important;background:none!important}
  .m-how-text{position:relative!important;left:auto!important;top:auto!important;width:auto!important;padding:96px var(--g) 24px;gap:20px!important}
  .m-how-text>p{font-size:17px!important;line-height:1.65!important}
  .m-ini{grid-template-columns:84px minmax(0,1fr)!important;gap:6px 0!important;font-size:16px!important;margin:0 0 14px!important}
  .m-ini>dt:first-child{display:none}
  .m-ini>dd[role=radiogroup]{grid-column:1/-1;margin:0 0 12px!important;min-width:0}
  /* Team switcher: a row of text tabs across the full width, the active one underlined in burgundy */
  .ini-seg{display:flex!important;justify-content:space-between;gap:0!important;padding:0!important;border:0!important;border-bottom:1px solid rgba(23,25,26,.16)!important;border-radius:0!important;background:none!important}
  .ini-tab{display:inline-flex;align-items:center;min-height:46px;box-sizing:border-box;padding:0 2px;border-radius:0;background:none!important;color:#5A5F62;font-size:clamp(14px,3.95vw,16px);box-shadow:none}
  .ini-tab:hover{color:#17191A}
  .ini-radio:checked+.ini-tab{color:#17191A!important;background:none!important;box-shadow:inset 0 -2px 0 #7A1F2B}
  .ini-radio:focus-visible+.ini-tab{outline-offset:-2px}
  .m-loop li{padding:16px 0!important}
  .m-loop .rg-row{font-size:24px!important;line-height:1.2!important}
  .m-loop .rg-row>span{width:34px!important}
  .rg-desc{padding-left:34px!important;font-size:16px!important;line-height:1.6!important}
  .rg-desc .ini-v>span{margin-top:6px!important}
  /* Who it's for */
  .m-for{height:auto!important;padding:96px var(--g) 24px!important}
  .m-for .m-h2{margin-bottom:32px!important}
  .v2-panels{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .v2-panel{height:auto!important}
  .m-panel-body{padding:32px 24px 0!important;gap:16px!important}
  .m-panel-body h3{font-size:34px!important}
  .m-panel-body p{font-size:17px!important;line-height:1.6!important}
  .m-props{grid-template-columns:minmax(0,1fr)!important;margin-top:24px!important;gap:22px!important}
  .m-props li>span:last-child>span:first-child{font-size:16px!important}
  .m-props li>span:last-child>span:last-child{font-size:15px!important;line-height:1.55!important}
  .m-peek{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important;margin:32px 0 -2px 24px}
  .m-peek>span{font-size:15px!important;padding-top:14px!important;padding-bottom:14px!important}
  .m-peek>span:first-child>span:first-child{font-size:19px!important}
  .m-peek>span:first-child>span:last-child{display:none}
  .m-peek>span:not(:first-child){grid-template-columns:minmax(0,1fr)!important;justify-items:start;row-gap:6px}
  .m-peek>span:not(:first-child)>span:last-child{color:#5A5F62;font-size:14px!important}
  /* Team */
  .m-team{padding:96px var(--g) 64px!important}
  .m-team p{font-size:17px!important;line-height:1.65!important}
  .m-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .m-stat{padding:24px 16px 22px 0!important;border-left:0!important;border-bottom:1px solid rgba(23,25,26,.12)}
  .m-stat:nth-last-child(-n+2){border-bottom:0}
  .m-stat>span:first-child{font-size:44px!important}
  .m-stat>span:last-child{font-size:15px!important;line-height:1.5!important}
  .m-logos,.m-logos>span{flex-wrap:wrap;gap:16px 32px!important}
  .m-logos>span>span{flex-basis:100%;font-size:15px!important}
  /* Close */
  .m-talk{height:auto!important;padding:112px var(--g)}
  .m-talk-card{position:relative!important;z-index:29;left:auto!important;top:auto!important;width:auto!important;height:auto!important;padding:30px 24px!important;gap:28px}
  .m-talk-card br{display:none}
  .m-talk-card p{font-size:17px!important;line-height:1.6!important}
  .m-talk-card a{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box;padding:0 24px!important;font-size:16px!important}
  .m-footer{padding:16px var(--g) 28px!important;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px!important}
  .m-footer a{display:inline-flex;align-items:center;min-height:44px}
}
/* Static fallback (no scroll-driven animation, or reduced motion): everything in its lit, open state. */
@media (max-width:1099px){
  @supports not (animation-timeline: view()){
    .rg-row{animation:none!important;color:#17191A!important}
    .rg-glyph{animation:none!important;color:#7A1F2B!important}
    .rg-cellname{animation:none!important;background-color:transparent!important}
    .rg-desc{max-height:none!important;opacity:1!important;animation:none!important;margin-top:6px}
  }
}
@media (max-width:1099px) and (prefers-reduced-motion:reduce){
  .rg-row{animation:none!important;color:#17191A!important}
  .rg-glyph{animation:none!important;color:#7A1F2B!important}
  .rg-cellname{animation:none!important;background-color:transparent!important}
  .rg-desc{max-height:none!important;opacity:1!important;animation:none!important;margin-top:6px}
  .m-dot{display:none!important}
}
@media (max-width:1099px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .m-step .rg-row{animation-name:mLit!important;animation-duration:auto!important;animation-timing-function:linear!important;animation-fill-mode:both!important;animation-timeline:view()!important;animation-range:cover 20% cover 80%!important}
    .m-cell .rg-glyph{animation-name:mGlyph!important;animation-duration:auto!important;animation-timing-function:linear!important;animation-fill-mode:both!important;animation-timeline:view()!important;animation-range:entry 60% cover 45%!important}
    .m-cell .rg-cellname{animation-name:mHl!important;animation-duration:auto!important;animation-timing-function:linear!important;animation-fill-mode:none!important;animation-timeline:view()!important;animation-range:cover 35% cover 65%!important}
  }
}
/* Meet Skyla on phones and tablets: tap a stage to open it (mobile-line.js sets .m-open; one at a time). */
@media (max-width:1099px) and (prefers-reduced-motion:no-preference){
  .m-js .m-loopstick{position:relative}
  .m-loopring{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .m-js .m-loop .rg-desc{display:none!important;max-height:none!important;opacity:1!important;overflow:visible!important;animation:none!important;transition:none!important}
  .m-js .m-loop li.m-open .rg-desc,.m-js .m-loop.m-measure .rg-desc{display:block!important}
  .m-js .m-loop .rg-row{animation:none!important;color:#17191A!important;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s ease}
  .m-js .m-loop li.m-open .rg-row{color:#7A1F2B!important}
  .m-js .m-loop .rg-row:focus-visible{outline:2px solid #7A1F2B;outline-offset:4px}
}
@keyframes mLit{0%{color:#80868A}35%,65%{color:#7A1F2B}100%{color:#17191A}}
@keyframes mGlyph{from{color:rgba(23,25,26,.4)}to{color:#7A1F2B}}
@keyframes mHl{from,to{background-color:rgba(122,31,43,.16)}}
/* Tablets and wide phones: features three to a row under each step, value props two to a row. */
@media (min-width:700px) and (max-width:1099px){
  :root{--g:44px}
  .m-plat-stage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .m-step{grid-column:1/-1}
  .m-cell{display:flex!important;flex-direction:column;border-top-width:1px!important;border-left-width:0!important;border-radius:0!important}
  .m-cell:nth-child(3n+1){border-left-width:1px!important;border-radius:3px 0 0 3px!important}
  .m-cell:nth-child(3n){border-radius:0 3px 3px 0!important}
  .m-cell .rg-glyph{width:52px;height:35px}
  .m-props{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .m-peek>span:first-child>span:last-child{display:inline}
  .m-peek>span:not(:first-child){grid-template-columns:minmax(0,1fr) auto!important;align-items:center}
  .m-peek>span:not(:first-child)>span:last-child{color:inherit}
  .m-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .m-stat{border-bottom:0}
  .m-talk-card{max-width:640px}
}
@media (prefers-reduced-motion:reduce){.rg-hl,.rg-intro{animation:none!important}.rg-intro{offset-distance:100%;transform:none}.rg-guide,.rg-link,.rg-orbit,.rg-pdot{display:none!important}.rg-ring{animation:none!important;stroke-dashoffset:0}.rg-logodot{animation:none!important}}