@font-face{font-family:'Outfit';src:url(/assets/fonts/outfit-latin-var.92684e4acd.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit Fallback';src:local('Arial');size-adjust:100%;ascent-override:100%;descent-override:26%}
@font-face{font-family:'DM Sans';src:url(/assets/fonts/dmsans-latin-var.aa530716b0.woff2) format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:98%;ascent-override:96%;descent-override:30%}
:root{--font-display:'Outfit', 'Outfit Fallback', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;--font-body:'DM Sans', 'DM Sans Fallback', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;}
:root {
  --navy: #2C3343; --blue: #1683D6; --pink: #C42079; --orange: #EE962B;
  --pk-pink: #D8418F; --pk-amber: #F6B154; --pk-blue: #2E98E6;
  --pk-pink-d: #9A1458; --pk-amber-d: #C9711A; --pk-blue-d: #145FA8;
  --night: #171B25; --navy-2: #232837;
  --batter: #FBF6EE; --batter-2: #F4ECDF; --card: #FFFDF9;
  --ink: #1B1F2A; --slate: #5A5E69;
  --snow: #F7F3EC; --fog: #E4E1DC; --mist: #CAC9C7; --mist-2: #9AA0AC;
  --blue-ink: #145FA8; --pink-ink: #9A1458; --orange-ink: #9A5410;
  --blue-glow: #5AB0F0; --pink-glow: #F47FB8; --amber-glow: #F6B154;
  --cta: #EE962B; --cta-hover: #D9821A; --cta-edge: #B0610F;
  --wa-green: #25D366;
  --rule-light: #E6DCCB; --rule-dark: #3A4153;
  --grey-bar: #D9D3C8; --grey-bar-dark: #4A5163;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --gutter: clamp(16px, 4vw, 32px);
  --wrap: min(1200px, 100% - 2 * var(--gutter));
  --wrap-wide: min(1360px, 100% - 2 * var(--gutter));
  --section-y: clamp(64px, 5vw + 40px, 112px);
  --nav-h: 64px;
  --radius: 20px;
  --fs-display: clamp(2.25rem, 1.43rem + 3.65vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.26rem + 2.17vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .65vw, 1.5rem);
  --fs-price: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: clamp(1rem, .97rem + .14vw, 1.0625rem);
  --fs-small: .9375rem;
  --fs-label: .9375rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-settle: cubic-bezier(.34, 1.4, .64, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 1024px) { :root { --nav-h: 72px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--batter); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { display: block; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[id] { scroll-margin-top: var(--nav-h); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 6px; }
.sec--navy :focus-visible, .sec--night :focus-visible, .nav :focus-visible, .menu :focus-visible, .foot :focus-visible,
.hero :focus-visible, .phero :focus-visible, .cta-band :focus-visible, .nf :focus-visible, .card--dark :focus-visible, .promise-band :focus-visible { outline-color: var(--blue-glow); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--cta); color: var(--ink); padding: 12px 20px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.center { text-align: center; display: flex; justify-content: center; margin-top: var(--s6); }
.sec { padding-block: var(--section-y); position: relative; }
.sec--batter { background: var(--batter); color: var(--ink); }
.sec--batter-2 { background: var(--batter-2); color: var(--ink); }
.sec--navy { background: var(--navy); color: var(--snow); }
.sec--night { background: var(--night); color: var(--snow); }
.sec--batter h2, .sec--batter-2 h2 { color: var(--navy); }
.sec__head { max-width: 760px; margin-bottom: var(--s6); }
h2 + .lead, h2 + .pull, .sec__head h2 + .lead { margin-top: var(--s2); }
.lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 62ch; }
.sec--batter .lead, .sec--batter-2 .lead { color: var(--slate); }
.sec--navy .lead, .sec--night .lead { color: var(--mist); }
.note { font-size: var(--fs-small); color: var(--slate); margin-top: var(--s2); }
.sec--navy .note, .sec--night .note { color: var(--mist); }
.label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s1); color: var(--slate); }
.sec--navy .label, .sec--night .label, .phero .label, .hero .label { color: var(--mist); }
.label__stack { display: inline-grid; gap: 2px; }
.label__stack i { display: block; width: 14px; height: 5px; border-radius: 50%; background: currentColor; }
.label--blue .label__stack i { background: var(--pk-blue); } .label--blue .label__stack i:first-child { background: var(--blue); }
.label--amber .label__stack i { background: var(--pk-amber); } .label--amber .label__stack i:first-child { background: var(--orange); }
.label--pink .label__stack i { background: var(--pk-pink); } .label--pink .label__stack i:first-child { background: var(--pink); }
.label--orange .label__stack i:nth-child(1) { background: var(--pk-pink); } .label--orange .label__stack i:nth-child(2) { background: var(--pk-amber); } .label--orange .label__stack i:nth-child(3) { background: var(--pk-blue); }
.label--snow .label__stack i { background: var(--mist); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 26px;
  border-radius: 14px; border: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .01em; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease-std), background-color .2s, box-shadow .2s, color .2s, border-color .2s; }
.btn .ic { flex: none; }
.btn--cta { background: var(--cta); color: var(--ink); box-shadow: 0 4px 0 var(--cta-edge); }
.btn--cta:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 6px 0 var(--cta-edge); }
.btn--cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-edge); }
.btn--navy { background: var(--navy); color: var(--snow); box-shadow: 0 4px 0 var(--night); }
.btn--navy:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 6px 0 var(--night); }
.btn--navy:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--night); }
.btn--ghost-dark { background: transparent; color: var(--snow); box-shadow: inset 0 0 0 1.5px var(--snow); }
.btn--ghost-dark:hover { background: var(--snow); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 10px 18px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: var(--s4); }
.btn-text { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-display); font-weight: 600;
  text-decoration: none; color: var(--blue-ink); }
.btn-text .ic { transition: transform .2s var(--ease-std); }
.btn-text:hover span { text-decoration: underline; text-underline-offset: 4px; }
.btn-text:hover .ic { transform: translateX(4px); }
.sec--navy .btn-text, .sec--night .btn-text { color: var(--blue-glow); }
@media (max-width: 479.98px) {
  .btn-row > .btn { width: 100%; }
}
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--rule-light); font-weight: 500; font-size: var(--fs-small); color: var(--ink); }
.chip .ic { color: var(--blue-ink); }
.checks { display: grid; gap: 10px; margin-top: var(--s3); }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ic { flex: none; margin-top: 4px; color: var(--orange-ink); }
.checks--dark .ic { color: var(--pink-glow); }
.sec--navy .checks li, .sec--night .checks li { color: var(--snow); }
.c-blue { fill: var(--blue); } .c-blue-l { fill: var(--pk-blue); } .c-blue-d { fill: var(--pk-blue-d); } .c-blue-ink { fill: var(--blue-ink); } .c-blue-glow { fill: var(--blue-glow); }
.c-amber-l { fill: var(--pk-amber); } .c-amber-d { fill: var(--pk-amber-d); } .c-amber-glow { fill: var(--amber-glow); }
.c-pink-l { fill: var(--pk-pink); } .c-pink-d { fill: var(--pk-pink-d); } .c-pink-ink { fill: var(--pink-ink); } .c-pink-glow { fill: var(--pink-glow); }
.c-orange { fill: var(--orange); } .c-orange-d { fill: var(--cta-edge); }
.c-navy { fill: var(--navy); } .c-navy-2 { fill: var(--navy-2); } .c-night { fill: var(--night); } .c-night-a { fill: var(--night); opacity: .25; }
.c-card { fill: var(--card); } .c-card2 { fill: var(--batter-2); } .c-rule { fill: var(--rule-light); } .c-rule-dark { fill: var(--rule-dark); }
.c-grey { fill: var(--grey-bar); } .c-mist { fill: var(--mist); } .c-snow { fill: var(--snow); } .c-snow-a { fill: var(--snow); opacity: .55; }
.c-pill { fill: var(--batter-2); } .c-plate { fill: var(--rule-dark); } .c-wa-bubble { fill: var(--card); }
.c-hero-grad { fill: var(--navy); }
.s-blue { stroke: var(--blue); } .s-orange { stroke: var(--orange); } .s-blue-l { stroke: var(--pk-blue); } .s-amber-l { stroke: var(--pk-amber); } .s-pink-l { stroke: var(--pk-pink); }
.s-rule { stroke: var(--rule-light); } .s-rule-dark { stroke: var(--rule-dark); } .s-navy { stroke: var(--navy); } .s-snow { stroke: var(--snow); } .s-blue-ink { stroke: var(--blue-ink); }
.disc__hi { fill: var(--snow); opacity: .28; }
.c-blue-d, .c-blue-l, .c-amber-d, .c-amber-l, .c-pink-d, .c-pink-l { stroke: none; }
.nav { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--snow);
  background: rgba(23, 27, 37, .92); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--rule-dark); transition: background-color .3s, border-color .3s; view-transition-name: site-nav; }
.nav--over:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav__in { width: var(--wrap-wide); margin-inline: auto; height: var(--nav-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); }
.nav__logo { display: flex; align-items: center; min-height: 44px; color: var(--snow); text-decoration: none; }
.nav__logo .lg { height: 32px; width: auto; }
.nav__links { display: none; justify-self: end; }
.nav__links ul { display: flex; gap: 4px; }
.nav__a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-family: var(--font-display); font-weight: 500;
  font-size: 1rem; color: var(--mist); text-decoration: none; transition: color .2s; }
.nav__a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: currentColor;
  transform: scaleX(0); transition: transform .24s var(--ease-out); }
.nav__a:hover { color: var(--snow); }
.nav__a:hover::after { transform: scaleX(1); }
.nav__a[aria-current] { color: var(--snow); }
.nav__a[aria-current]::after { transform: scaleX(1); }
.nav__a--blue[aria-current]::after { background: var(--blue-glow); } .nav__a--amber[aria-current]::after { background: var(--amber-glow); }
.nav__a--pink[aria-current]::after { background: var(--pink-glow); } .nav__a--orange[aria-current]::after { background: var(--orange); }
.nav__a--snow[aria-current]::after { background: var(--snow); }
.nav__cta { display: none; }
.burger { justify-self: end; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--snow); transition: transform .24s var(--ease-out), opacity .2s; }
.menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 768px) { .nav__cta { display: block; } .nav__in { grid-template-columns: auto 1fr auto auto; } }
@media (min-width: 1024px) {
  .nav__links { display: block; }
  .burger { display: none; }
  .nav__logo .lg { height: 36px; }
}
.menu { position: fixed; inset: 0; z-index: 45; background: var(--night); color: var(--snow); padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  overflow-y: auto; clip-path: circle(0 at calc(100% - 38px) 32px); transition: clip-path .42s var(--ease-out); }
.menu.is-open { clip-path: circle(150% at calc(100% - 38px) 32px); }
.menu__in { max-width: 480px; margin-inline: auto; display: grid; gap: var(--s4); text-align: center; }
.menu__a { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; font-family: var(--font-display); font-weight: 600; font-size: 1.75rem;
  color: var(--snow); text-decoration: none; }
.menu__a[aria-current] { color: var(--amber-glow); }
.menu__disc { width: 14px; height: 7px; border-radius: 50%; background: var(--mist); }
.menu__a--blue .menu__disc { background: var(--pk-blue); } .menu__a--amber .menu__disc { background: var(--pk-amber); }
.menu__a--pink .menu__disc { background: var(--pk-pink); } .menu__a--orange .menu__disc { background: var(--orange); }
.menu li, .menu__foot { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .4s var(--ease-out); transition-delay: calc(var(--i) * 40ms + 120ms); }
.menu.is-open li, .menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu__foot { display: grid; gap: 12px; justify-items: center; }
.menu__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--snow); font-weight: 600; text-decoration: none; }
.menu__hours { color: var(--mist); font-size: var(--fs-small); }
.menu-open, .menu-open body { overflow: hidden; }
.wa-float { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--ink);
  box-shadow: 0 4px 0 var(--cta-edge), 0 10px 24px rgba(23, 27, 37, .28); text-decoration: none;
  transition: opacity .18s, transform .18s var(--ease-out); view-transition-name: wa-float; }
.wa-float:hover { background: var(--cta-hover); }
.wa-float.is-clear, .menu-open .wa-float { opacity: 0; pointer-events: none; transform: translateY(12px); }
.wa-float__dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--wa-green); box-shadow: 0 0 0 2px var(--night); }
.wa-float__pill { position: absolute; right: 64px; top: 50%; margin-top: -20px; height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px;
  background: var(--snow); color: var(--ink); font-family: var(--font-display); font-weight: 600; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .3s var(--ease-out); box-shadow: 0 8px 20px rgba(23, 27, 37, .2); }
@media (hover: hover) and (pointer: fine) {
  .wa-float.is-pill .wa-float__pill, .wa-float:hover .wa-float__pill { opacity: 1; transform: none; }
}
.foot { position: relative; overflow: hidden; background: var(--night); color: var(--mist); padding: var(--s10) 0 var(--s4); }
.foot__grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; }
.foot__brand img { height: 40px; width: auto; }
.foot__brand p { margin-top: var(--s2); max-width: 34ch; }
.foot__h { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--snow); margin-bottom: var(--s2); font-weight: 600; }
.foot ul { display: grid; gap: 2px; }
.foot a { color: var(--mist); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.foot a:hover { color: var(--snow); }
.foot__contact li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.foot__contact .ic { flex: none; color: var(--amber-glow); }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: var(--s8); padding-top: var(--s3); border-top: 1px solid var(--rule-dark);
  position: relative; z-index: 1; font-size: var(--fs-small); }
.foot__base p { margin-right: auto; }
.foot__discs { position: absolute; right: -70px; bottom: -40px; display: grid; gap: 0; opacity: .12; pointer-events: none; }
.foot__discs .disc { margin-top: -46px; }
@media (min-width: 768px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1.1fr 1.5fr; } }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-dark);
  background: transparent; color: var(--mist); font-size: var(--fs-small); font-weight: 500; cursor: pointer; }
.motion-toggle:hover { color: var(--snow); border-color: var(--mist); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: center; }
.split__copy { min-width: 0; }
.split__art { min-width: 0; display: flex; justify-content: center; }
.split__art .illus { width: 100%; max-width: 560px; height: auto; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s10); }
  .split--rev .split__art { order: -1; }
}
.pkg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
.pkg { position: relative; min-width: 0; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--rule-light); transition: box-shadow .25s, border-color .25s; }
.pkg--popular { border: 2px solid var(--blue-ink); box-shadow: 0 6px 0 var(--pk-blue-d); }
.pkg__badge { position: absolute; top: -14px; left: 24px; padding: 5px 12px; border-radius: 999px; background: var(--pink-ink); color: var(--snow);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; }
.pkg__name { color: var(--navy); }
.pkg__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: var(--s2); }
.pkg__amt { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-price); line-height: 1; letter-spacing: -.03em; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pkg__once { color: var(--slate); font-size: var(--fs-small); font-weight: 500; }
.pkg__feats { display: grid; gap: 10px; margin: var(--s3) 0 var(--s4); flex: 1; }
.pkg__feats li { display: flex; gap: 10px; align-items: flex-start; }
.pkg__feats .ic { flex: none; margin-top: 4px; color: var(--blue-ink); }
.pkg .btn { width: 100%; }
.all-inc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--s4); padding: 18px 20px; border-radius: var(--radius); background: var(--batter-2); }
.sec--batter-2 .all-inc { background: var(--batter); }
.all-inc__t { font-family: var(--font-display); font-weight: 700; color: var(--navy); margin-right: 4px; }
.all-inc__once { color: var(--slate); font-size: var(--fs-small); margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .pkg:hover { box-shadow: 0 6px 0 var(--pk-blue-d); border-color: var(--blue-ink); } }
@media (min-width: 1024px) {
  .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .pkg--popular { margin-top: -16px; margin-bottom: 16px; }
}
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.card { position: relative; min-width: 0; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule-light);
  transition: transform .25s var(--ease-out), box-shadow .25s; }
.card h3 { margin-top: var(--s2); color: var(--navy); }
.card p { margin-top: 8px; color: var(--slate); }
.card__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; }
.card--blue .card__ic { background: color-mix(in srgb, var(--pk-blue) 16%, var(--card)); color: var(--blue-ink); }
.card--amber .card__ic { background: color-mix(in srgb, var(--pk-amber) 22%, var(--card)); color: var(--orange-ink); }
.card--pink .card__ic { background: color-mix(in srgb, var(--pk-pink) 16%, var(--card)); color: var(--pink); }
.card--orange .card__ic { background: color-mix(in srgb, var(--orange) 18%, var(--card)); color: var(--orange-ink); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 6px 0 var(--edge, var(--pk-blue-d)); border-color: transparent; }
  .card--amber { --edge: var(--pk-amber-d); } .card--pink { --edge: var(--pk-pink-d); } .card--orange { --edge: var(--cta-edge); }
}
@media (min-width: 640px) { .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: var(--s4); }
.mini-cards li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--navy-2); border: 1px solid var(--rule-dark); min-width: 0; }
.mini-cards .ic { flex: none; color: var(--blue-glow); margin-top: 2px; }
.mini-cards b { display: block; color: var(--snow); font-family: var(--font-display); font-weight: 600; }
.mini-cards small { display: block; color: var(--mist); font-size: var(--fs-small); }
@media (min-width: 640px) { .mini-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pull { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.25; color: var(--blue-glow); margin: var(--s3) 0 var(--s2); }
.trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); counter-reset: t; }
.trio li { padding: 28px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--rule-light); min-width: 0; }
.trio h3 { margin-top: var(--s2); color: var(--navy); }
.trio p { margin-top: 6px; color: var(--slate); }
.trio__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--pk-amber) 24%, var(--card)); color: var(--orange-ink); }
.trio__ic--pink { background: color-mix(in srgb, var(--pk-pink) 16%, var(--card)); color: var(--pink); }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trio--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trio--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.how__track { position: relative; }
.how__lane { display: none; }
.how__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); position: relative; }
.how__steps li { position: relative; min-width: 0; padding-left: 72px; }
.how__n { position: absolute; left: 0; top: 0; width: 56px; }
.how__n .disc { width: 56px; height: auto; }
.how__steps h3 { color: var(--navy); }
.how__steps p { margin-top: 6px; color: var(--slate); }
@media (min-width: 1024px) {
  .how__lane { display: block; position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 40px; }
  .how__lane path { fill: none; stroke-dasharray: 1 2; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
  .how__o { stroke: var(--pk-blue); stroke-width: 8; } .how__i { stroke: var(--pk-pink); stroke-width: 5; }
  .how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .how__steps li { padding: 64px 0 0; }
  .how__n { top: 0; }
}
.faq h2 { margin-bottom: var(--s4); }
.faq__list { display: grid; gap: 12px; }
.faq__item { border-radius: 16px; background: var(--card); border: 1px solid var(--rule-light); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { flex: none; transition: transform .2s var(--ease-std); color: var(--orange-ink); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__item p { padding: 0 20px 20px; color: var(--slate); max-width: 62ch; }
.cta-sec { padding-top: var(--s4); }
.cta-band { position: relative; overflow: hidden; isolation: isolate; margin-top: var(--s6); padding: clamp(32px, 5vw, 64px); border-radius: 28px; color: var(--snow);
  background: linear-gradient(135deg, var(--pink-ink), var(--navy)); box-shadow: 0 10px 0 var(--night); }
.cta-band__ribbon { z-index: -1; opacity: .45; }
.cta-band__copy { position: relative; max-width: 620px; }
.cta-band h2 { color: var(--snow); }
.cta-band p { color: var(--fog); margin-top: var(--s2); }
.cta-band__micro { font-size: var(--fs-small); }
.cta-band__discs { display: none; }
@media (min-width: 1024px) {
  .cta-band__discs { display: grid; position: absolute; right: 56px; top: 50%; margin-top: -90px; gap: 0; }
  .cta-band__discs .disc { width: 160px; height: auto; margin-top: -40px; filter: drop-shadow(0 10px 16px rgba(23, 27, 37, .35)); }
}
.inc-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: clamp(24px, 4vw, 40px); border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--rule-light); }
.inc-band h2 { font-size: var(--fs-h3); color: var(--navy); }
.inc-band p { color: var(--slate); margin-top: var(--s2); max-width: 60ch; }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento__t--0 { grid-row: span 2; } }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s2); }
.sw { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; }
.swatches .sw--navy { background: var(--navy); color: var(--snow); } .swatches .sw--blue { background: var(--blue-ink); color: var(--snow); }
.swatches .sw--pink { background: var(--pink); color: var(--snow); } .swatches .sw--orange { background: var(--orange); color: var(--ink); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 480px; transform-origin: 50% 100%; }
.post { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--navy-2); border: 1px solid var(--rule-dark); }
.post--blue { background: color-mix(in srgb, var(--pk-blue) 30%, var(--navy-2)); } .post--pink { background: color-mix(in srgb, var(--pk-pink) 30%, var(--navy-2)); }
.post--amber { background: color-mix(in srgb, var(--pk-amber) 30%, var(--navy-2)); }
.post__shape { position: absolute; left: 14%; top: 14%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--snow); opacity: .7; }
.post__shape--1 { border-radius: 10px; } .post__shape--2 { width: 56%; aspect-ratio: 2.4; border-radius: 50%; }
.post__bar { position: absolute; left: 14%; bottom: 22%; width: 60%; height: 7%; border-radius: 99px; background: var(--snow); opacity: .85; }
.post__bar.s { bottom: 11%; width: 38%; opacity: .5; }
.kit-fan { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 260px; width: 100%; max-width: 520px; }
.kit-card { position: absolute; bottom: 0; left: 50%; margin-left: -70px; width: 140px; height: 190px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule-light);
  box-shadow: 0 14px 28px rgba(23, 27, 37, .14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; transform-origin: 50% 120%; }
.kit-card--1 { transform: translateX(-150%) rotate(-12deg); } .kit-card--2 { transform: translateX(-75%) rotate(-6deg); }
.kit-card--3 { transform: translateY(-8px); z-index: 2; } .kit-card--4 { transform: translateX(75%) rotate(6deg); z-index: 1; } .kit-card--5 { transform: translateX(150%) rotate(12deg); }
.kit-lbl { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--navy); }
.kit-tile { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 22px; background: var(--night); }
.kit-tile .lg { height: 70px; width: auto; }
.kit-tab { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px; border-radius: 10px 10px 0 0; background: var(--batter-2); }
.kit-tab__fav { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--night); }
.kit-tab__fav .lg { height: 18px; width: auto; }
.kit-tab__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--grey-bar); }
.kit-avatar { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--navy); }
.kit-avatar .lg { height: 52px; width: auto; }
.kit-sw { display: grid; grid-template-columns: repeat(2, 36px); gap: 8px; }
.kit-sw .sw { width: 36px; height: 36px; border-radius: 50%; padding: 0; min-height: 0; }
.kit-sw .sw--navy { background: var(--navy); } .kit-sw .sw--blue { background: var(--blue); } .kit-sw .sw--pink { background: var(--pink); } .kit-sw .sw--orange { background: var(--orange); }
.kit-doc { display: grid; gap: 7px; width: 96px; padding: 10px; border-radius: 6px; background: var(--batter); border: 1px solid var(--rule-light); }
.kit-doc .lg { height: 20px; width: auto; }
.kit-doc i { display: block; height: 5px; border-radius: 3px; background: var(--grey-bar); }
.kit-doc i.s { width: 60%; }
@media (max-width: 479.98px) {
  .kit-fan { height: 210px; }
  .kit-card { width: 96px; height: 144px; margin-left: -48px; gap: 8px; padding: 10px; }
  .kit-card--1 { transform: translateX(-104%) rotate(-12deg); } .kit-card--2 { transform: translateX(-54%) rotate(-6deg); }
  .kit-card--4 { transform: translateX(54%) rotate(6deg); } .kit-card--5 { transform: translateX(104%) rotate(12deg); }
  .kit-doc { width: 70px; } .kit-sw { grid-template-columns: repeat(2, 28px); } .kit-sw .sw { width: 28px; height: 28px; }
  .kit-fan .kit-card--2, .kit-fan .kit-card--4 { display: none; }
  .kit-card--1 { transform: translateX(-92%) rotate(-9deg); } .kit-card--5 { transform: translateX(92%) rotate(9deg); }
  .kit-card { width: 108px; margin-left: -54px; }
  .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kb-col:nth-child(2) { display: none; } .kb-mover { display: none; }
  .kit-tile, .kit-avatar { width: 72px; height: 72px; } .kit-tile .lg { height: 54px; } .kit-avatar .lg { height: 40px; }
}
.dash .tile { stroke: var(--rule-light); stroke-width: 1.5; }
.db-spark { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.sec--navy .dash .tile, .sec--night .dash .tile { fill: var(--navy-2); stroke: var(--rule-dark); }
.browser .br-frame { stroke: var(--rule-light); stroke-width: 2; }
.sec--navy .browser .br-frame, .phero .browser .br-frame { stroke: var(--rule-dark); }
.c-hero-grad { fill: var(--navy); }
.phones-trio { position: relative; display: flex; justify-content: center; align-items: center; min-height: 340px; }
.phones-trio .ugc { width: 34%; max-width: 190px; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.phones-trio .tr--1 { transform: rotate(-7deg) translate(14%, 6%); } .phones-trio .tr--3 { transform: rotate(7deg) translate(-14%, 6%); }
.phones-trio .tr--2 { position: relative; z-index: 1; }
.ugc__screen { --pan: 0%; }
.ugc-grad--pink { fill: var(--pk-pink-d); } .ugc-grad--amber { fill: var(--pk-amber-d); } .ugc-grad--blue { fill: var(--pk-blue-d); }
.ugc__blob { opacity: .25; }
.ugc__chip { opacity: 1; }
.pipeline { overflow: visible; }
.pipeline .pl-o { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.pl-o--blue { stroke: var(--pk-blue); } .pl-o--orange { stroke: var(--orange); } .pl-o--pink { stroke: var(--pk-pink); }
.pl-node__box { stroke: var(--rule-light); stroke-width: 1.5; filter: drop-shadow(0 6px 10px rgba(23, 27, 37, .12)); }
.pl-ic--blue { color: var(--blue-ink); } .pl-ic--orange { color: var(--orange-ink); } .pl-ic--pink { color: var(--pink); }
.pl-tangle path { fill: none; stroke: var(--slate); stroke-width: 3; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; }
.pl-glint { fill: none; stroke: var(--snow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 100; stroke-dashoffset: 8; }
.phero .pl-node__box { stroke: var(--rule-dark); }
.kanban { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; padding: 16px; border-radius: var(--radius);
  background: var(--navy-2); border: 1px solid var(--rule-dark); }
.kb-col { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px 8px; border-radius: 12px; background: var(--night); min-height: 220px; }
.kb-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; color: var(--mist); letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.kb-dot--0 { background: var(--pk-blue); } .kb-dot--1 { background: var(--pk-amber); } .kb-dot--2 { background: var(--pk-pink); } .kb-dot--3 { background: var(--wa-green); }
.kb-card, .kb-mover { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--navy-2); border: 1px solid var(--rule-dark); }
.kb-card i, .kb-mover i { display: block; height: 6px; border-radius: 3px; background: var(--grey-bar-dark); }
.kb-card i.s, .kb-mover i.s { width: 60%; }
.kb-mover { position: absolute; left: 24px; top: 58px; width: calc((100% - 32px - 30px) / 4 - 16px); border-color: var(--orange); background: var(--navy); }
.checkout { width: 100%; max-width: 380px; padding: 20px; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 10px 0 var(--night); display: grid; gap: 12px; }
.co-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.co-bar { width: 50%; height: 10px; border-radius: 5px; background: var(--grey-bar); } .co-pill { width: 64px; height: 22px; border-radius: 11px; background: var(--batter-2); }
.co-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--rule-light); }
.co-row.is-on { border-color: var(--blue-ink); }
.co-ic { color: var(--navy); display: grid; } .co-t { flex: 1; font-weight: 600; }
.co-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--rule-light); }
.co-row.is-on .co-radio { border: 5px solid var(--blue-ink); }
.co-btn { height: 48px; border-radius: 14px; background: var(--cta); box-shadow: 0 4px 0 var(--cta-edge); display: grid; place-items: center; }
.co-btn span { width: 40%; height: 8px; border-radius: 4px; background: var(--ink); opacity: .55; }
.alert-art { min-height: 220px; align-items: center; }
.lock { width: 100%; max-width: 360px; padding: 28px 16px; border-radius: 28px; background: linear-gradient(160deg, var(--navy), var(--night)); box-shadow: 0 10px 0 var(--night); }
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: rgba(247, 243, 236, .94); color: var(--ink); }
.notif__app { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cta); color: var(--ink); flex: none; }
.notif__body { flex: 1; display: grid; gap: 6px; }
.notif__body b { font-family: var(--font-display); }
.notif__body i { display: block; height: 6px; border-radius: 3px; background: var(--grey-bar); }
.notif__body i.s { width: 55%; }
.rack .rack-beat { stroke: var(--blue-glow); stroke-dasharray: 100 0; }
.split__art .keylock { width: 100%; max-width: 280px; height: auto; }
.redo { position: relative; padding: 0 0 12% 12%; }
.redo .browser { width: 100%; height: auto; max-width: 460px; }
.redo__old { position: absolute; left: 0; bottom: 0; width: 84% !important; filter: grayscale(1); opacity: .55; }
.redo__new { position: relative; filter: drop-shadow(0 18px 28px rgba(23, 27, 37, .18)); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.contact__side { display: grid; gap: var(--s3); order: -1; min-width: 0; }
.chat-preview { display: none; }
@media (min-width: 1024px) { .chat-preview { display: block; } }
.contact__form { min-width: 0; }
.contact__form h2, .details h2 { font-size: var(--fs-h3); color: var(--navy); }
.contact__form h2 + .note { margin-top: var(--s2); }
.details h2 { color: var(--snow); margin-bottom: var(--s3); }
.card--dark { background: var(--navy-2); border-color: var(--rule-dark); color: var(--snow); }
#enquiry { display: grid; gap: var(--s3); margin-top: var(--s3); }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.opt { color: var(--slate); font-weight: 400; }
.field input, .field textarea, .field select { width: 100%; min-width: 0; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--rule-light);
  background: var(--batter); color: var(--ink); font: inherit; font-size: 1rem; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--blue-ink); outline-offset: 1px; border-color: var(--blue-ink); }
.field [aria-invalid="true"] { border-color: var(--pink); }
.field__err { color: var(--pink); font-size: var(--fs-small); font-weight: 600; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.select .ic { position: absolute; right: 16px; top: 50%; margin-top: -9px; pointer-events: none; color: var(--slate); }
.form__status { font-size: var(--fs-small); color: var(--slate); min-height: 1.5em; }
.form__status a { color: var(--blue-ink); font-weight: 600; }
.details__list { display: grid; gap: 4px; margin-top: var(--s3); }
.details__list li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--rule-dark); }
.details__list .ic { flex: none; color: var(--amber-glow); margin-top: 3px; }
.details__list small { display: block; color: var(--mist); font-size: var(--fs-small); }
.details__list a { color: var(--snow); font-weight: 600; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.details__list a:hover { text-decoration: underline; }
.chat-preview { border-radius: var(--radius); background: var(--navy-2); overflow: hidden; border: 1px solid var(--rule-dark); }
.chat-preview__top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--night); color: var(--snow); }
.chat-preview__top small { display: block; color: var(--mist); font-size: .8125rem; }
.chat-preview__av { width: 36px; height: 36px; border-radius: 50%; background: var(--cta); }
.chat-preview__body { padding: 20px 16px 24px; background: radial-gradient(var(--rule-dark) 1px, transparent 1.5px) 0 0 / 18px 18px; }
.bubble { margin-left: auto; max-width: 92%; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: var(--snow); color: var(--ink); font-size: var(--fs-small);
  line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.contact .promises { margin-top: var(--s8); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); }
  .contact__side { order: 0; position: sticky; top: calc(var(--nav-h) + 24px); }
}
.prose h2 { font-size: var(--fs-h3); color: var(--navy); margin-top: var(--s6); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s2); max-width: 62ch; }
.prose a { color: var(--blue-ink); font-weight: 600; }
.nf { min-height: 100svh; display: grid; place-items: center; background: var(--night); color: var(--snow); padding: calc(var(--nav-h) + 40px) 0 var(--s10); text-align: center; }
.nf__in { display: grid; justify-items: center; gap: var(--s2); }
.nf h1 { max-width: 16ch; margin-top: var(--s3); }
.nf p { color: var(--mist); font-size: var(--fs-lead); }
.nf .btn-row { justify-content: center; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: var(--s3); }
.nf__links a { color: var(--blue-glow); display: inline-flex; min-height: 44px; align-items: center; }
.fallen { position: relative; width: 260px; height: 240px; }
@media (max-height: 700px) { .fallen { transform: scale(.62); margin: -46px 0 -46px; } }
.fallen .lg { position: absolute; left: 40px; bottom: 0; height: 220px; width: auto; }
.fallen__cake { position: absolute; right: -10px; bottom: 4px; transform: rotate(-78deg); transform-origin: 50% 50%; }
.fallen__cake .disc { width: 96px; height: auto; }
.scene { padding-block: var(--section-y); position: relative; }
.scene.sec--navy { background: var(--navy); color: var(--snow); }
.scene.sec--night { background: var(--night); color: var(--snow); }
.scene.sec--batter { background: var(--batter); }
.scene__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: center; }
.scene__copy { min-width: 0; }
.scene__copy h2 { margin: 0 0 var(--s3); }
.scene.sec--batter .scene__copy h2 { color: var(--navy); }
.scene__art { min-width: 0; display: flex; justify-content: center; }
.scene__cta { margin-top: var(--s3); }
.steps { display: grid; gap: 12px; }
.step { position: relative; padding: 4px 0 4px 20px; }
.step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--rule-dark); transition: background-color .3s; }
.sec--batter .step::before { background: var(--rule-light); }
.step__t { font-size: var(--fs-h3); }
.step__t a, .step__t span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
.step__t a .ic { transition: transform .2s var(--ease-std); }
.step__t a:hover .ic { transform: translateX(4px); }
.step__p { margin-top: 2px; }
.sec--navy .step__p, .sec--night .step__p { color: var(--mist); }
.sec--batter .step__p { color: var(--slate); }
.step--blue::before { background: var(--blue-glow); } .step--amber::before { background: var(--amber-glow); }
.step--pink::before { background: var(--pink-glow); } .step--orange::before { background: var(--orange); }
.sec--batter .step--amber::before { background: var(--orange); } .sec--batter .step--orange::before { background: var(--orange); }
.scene[data-active] .step::before { background: var(--rule-dark); }
.scene.sec--batter[data-active] .step::before { background: var(--rule-light); }
.scene[data-active] .step__t { color: var(--mist-2); transition: color .3s; }
.scene.sec--batter[data-active] .step__t { color: var(--slate); }
.scene[data-active] .step__p { color: var(--mist-2); transition: color .3s; }
.scene.sec--batter[data-active] .step__p { color: var(--slate); }
.scene[data-active="0"] .step[data-step="0"] .step__t, .scene[data-active="1"] .step[data-step="1"] .step__t,
.scene[data-active="2"] .step[data-step="2"] .step__t, .scene[data-active="3"] .step[data-step="3"] .step__t { color: var(--snow); }
.scene.sec--batter[data-active="0"] .step[data-step="0"] .step__t, .scene.sec--batter[data-active="1"] .step[data-step="1"] .step__t,
.scene.sec--batter[data-active="2"] .step[data-step="2"] .step__t { color: var(--navy); }
.scene[data-active="0"] .step[data-step="0"] .step__p, .scene[data-active="1"] .step[data-step="1"] .step__p,
.scene[data-active="2"] .step[data-step="2"] .step__p, .scene[data-active="3"] .step[data-step="3"] .step__p { color: var(--mist); }
.scene.sec--batter[data-active="0"] .step[data-step="0"] .step__p, .scene.sec--batter[data-active="1"] .step[data-step="1"] .step__p,
.scene.sec--batter[data-active="2"] .step[data-step="2"] .step__p { color: var(--ink); }
.scene[data-active="0"] .step--blue[data-step="0"]::before, .scene[data-active="1"] .step--blue[data-step="1"]::before,
.scene[data-active="2"] .step--blue[data-step="2"]::before, .scene[data-active="3"] .step--blue[data-step="3"]::before { background: var(--blue-glow); }
.scene[data-active="1"] .step--amber[data-step="1"]::before, .scene[data-active="0"] .step--amber[data-step="0"]::before, .scene[data-active="2"] .step--amber[data-step="2"]::before { background: var(--orange); }
.scene[data-active="0"] .step--pink[data-step="0"]::before, .scene[data-active="1"] .step--pink[data-step="1"]::before, .scene[data-active="2"] .step--pink[data-step="2"]::before { background: var(--pink-glow); }
.scene[data-active="0"] .step--orange[data-step="0"]::before, .scene[data-active="1"] .step--orange[data-step="1"]::before, .scene[data-active="2"] .step--orange[data-step="2"]::before { background: var(--orange); }
.scene--stack[data-active="1"] .step[data-step="1"]::before { background: var(--amber-glow); }
.scene--stack[data-active="2"] .step[data-step="2"]::before { background: var(--pink-glow); }
.scene--stack[data-active="3"] .step[data-step="3"]::before { background: var(--orange); }
.scene--stack .step--amber::before { background: var(--amber-glow); } .scene--stack .step--pink::before { background: var(--pink-glow); }
.is-staged.scene { padding: 0; height: calc(100vh + var(--steps) * 45vh); height: calc(100svh + var(--steps) * 45svh); }
.is-staged .scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--nav-h); display: flex; align-items: center; overflow: hidden; }
.is-staged .scene__grid { padding-block: 12px; }
@media (max-width: 1023.98px) {
  .scene__art { order: -1; }
  .is-staged .scene__grid { gap: var(--s3); }
  .is-staged .scene__copy h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem); margin-bottom: var(--s2); }
  .is-staged .steps { display: grid; }
  
  .is-staged .step { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity .18s; }
  .is-staged[data-active="0"] .step[data-step="0"], .is-staged[data-active="1"] .step[data-step="1"],
  .is-staged[data-active="2"] .step[data-step="2"], .is-staged[data-active="3"] .step[data-step="3"],
  .is-staged .step:focus-within { opacity: 1; pointer-events: auto; transition: opacity .22s .18s; }
  .is-staged .scene__copy .label { display: none; }
}
@media (min-width: 1024px) {
  .scene__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .is-staged.scene { height: calc(100vh + var(--steps) * 55vh); height: calc(100svh + var(--steps) * 55svh); }
  .steps { gap: 14px; }
}
.stack-art { position: relative; display: grid; justify-items: center; }
.stack-mark { position: relative; z-index: 1; height: clamp(150px, 28svh, 220px); width: auto; }
.stack-plate { position: relative; z-index: 0; width: clamp(150px, 32svh, 250px); height: auto; margin-top: calc(clamp(150px, 32svh, 250px) * -.16); }
.stack-word { display: block; margin-top: 12px; }
.stack-lockup { height: 28px; width: auto; }
@media (min-width: 1024px) {
  .stack-mark { height: min(52svh, 400px); }
  .stack-plate { width: min(56svh, 430px); margin-top: calc(min(56svh, 430px) * -.16); }
  .stack-lockup { height: 40px; }
}
.build-art { position: relative; width: 100%; max-width: 620px; padding-right: 14%; }
.build-art__b { width: 100%; height: auto; }
.build-art__p { position: absolute; right: 0; bottom: 6%; width: 24%; height: auto; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .4)); }
.build-art .br-chat { opacity: 0; }
.build-art__beat { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--blue-glow); }
.build-art__beat svg { flex: 1; height: 32px; overflow: visible; }
.build-art__beat path { fill: none; stroke: var(--blue-glow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.build-art__shield { flex: none; }
@media (max-width: 1023.98px) {
  .build-art { max-width: 420px; padding-right: 0; }
  .build-art__p { display: none; }
  .is-staged .build-art__b { max-height: 34svh; }
}
.untangle-art { position: relative; width: 100%; max-width: 640px; display: grid; gap: var(--s3); }
.un-pipe, .un-dash { width: 100%; height: auto; }
.un-dash { max-width: 440px; justify-self: center; }
.is-staged .untangle-art { display: block; }
.is-staged .un-dash { position: absolute; right: 0; top: 50%; width: 72%; margin-top: -29%; }
@media (max-width: 1023.98px) { .is-staged .untangle-art { max-width: 380px; } }
.feed-art { position: relative; width: 100%; height: clamp(220px, 40svh, 300px); }
.fd { position: absolute; left: 50%; top: 0; width: clamp(120px, 22svh, 168px); margin-left: calc(clamp(120px, 22svh, 168px) / -2); height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4)); }
.fd--1 { transform: translateX(-60%) rotate(-5deg) scale(.94); }
.fd--3 { transform: translateX(60%) rotate(5deg) scale(.94); }
.fd--2 { z-index: 1; }
@media (min-width: 1024px) {
  .feed-art { height: min(62svh, 460px); }
  .fd { width: min(34svh, 250px); margin-left: calc(min(34svh, 250px) / -2); }
  .fd--1 { transform: translateX(-108%) rotate(-7deg) scale(.94); }
  .fd--3 { transform: translateX(108%) rotate(7deg) scale(.94); }
}
.brief-art { position: relative; width: 100%; max-width: 640px; height: clamp(250px, 42svh, 340px); }
.brief-art__mark { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 100 / 130; margin-left: calc(clamp(250px, 42svh, 340px) * -.3846);
  transform: translateY(-24%) scale(.5); transform-origin: 50% 50%; }
.brief-art__mark .lg, .brief-art__mark .bl-guides { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-guides { overflow: visible; }
.bl-grid path { stroke: var(--rule-light); stroke-width: .3; fill: none; }
.bl-g > * { fill: none; stroke: var(--blue-ink); stroke-width: .6; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.brief-art .bl-g, .brief-art .bl-grid { opacity: .15; }
.phero-mark .bl-grid path { stroke: var(--rule-dark); }
.phero-mark .bl-g > * { stroke: var(--blue-glow); }
.phero-mark .bl-g { opacity: .55; }
.brief-art__kit { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; }
.brief-art__kit .kit-card { width: 96px; height: 130px; margin-left: -48px; gap: 8px; padding: 10px; }
.brief-art__kit .kit-card--1 { transform: translateX(-112%) rotate(-10deg); } .brief-art__kit .kit-card--2 { transform: translateX(-56%) rotate(-5deg); }
.brief-art__kit .kit-card--3 { transform: none; } .brief-art__kit .kit-card--4 { transform: translateX(56%) rotate(5deg); }
.brief-art__kit .kit-card--5 { transform: translateX(112%) rotate(10deg); }
.brief-art__kit .kit-tile, .brief-art__kit .kit-avatar { width: 56px; height: 56px; } .brief-art__kit .kit-tile .lg { height: 42px; } .brief-art__kit .kit-avatar .lg { height: 32px; }
.brief-art__kit .kit-doc { width: 66px; padding: 7px; gap: 5px; } .brief-art__kit .kit-sw { grid-template-columns: repeat(2, 24px); } .brief-art__kit .kit-sw .sw { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .brief-art { height: min(64svh, 480px); }
  .brief-art__mark { margin-left: calc(min(64svh, 480px) * -.3846); transform: translateX(-42%) scale(.62); }
  .brief-art__kit { left: 42%; height: 70%; bottom: 10%; }
  .brief-art__kit .kit-card { width: 120px; height: 160px; margin-left: -60px; }
}
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--snow);
  min-height: 100vh; min-height: 100svh; display: flex; align-items: stretch; }
.hero__media { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 40%; }
.hero__media picture, .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media video { opacity: 0; transition: opacity .9s ease; }
.hero__media[data-ready] video { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  
  background: linear-gradient(180deg, rgba(23, 27, 37, .45) 0%, rgba(23, 27, 37, .22) 24%, rgba(23, 27, 37, .58) 40%, rgba(23, 27, 37, .84) 100%); }
.hero__deco { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 26%, transparent 36%); mask-image: linear-gradient(180deg, #000 0, #000 26%, transparent 36%); }
.hero__ribbon { display: none; }
.hero__dots { position: absolute; inset: 0; background: radial-gradient(var(--rule-dark) 1px, transparent 1.5px) 0 0 / 24px 24px; opacity: .5; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(60px); }
.hero__glow--a { width: 60vw; height: 60vw; right: -20vw; top: -20vw; background: var(--pk-pink); opacity: .16; }
.hero__glow--b { width: 50vw; height: 50vw; left: -16vw; bottom: -18vw; background: var(--pk-blue); opacity: .14; }
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.ribbon .ribbon__o, .ribbon .ribbon__i { stroke-dasharray: 1 2; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.ribbon__o { stroke: var(--blue); stroke-width: 10; opacity: .5; }
.ribbon__i { stroke: var(--pink); stroke-width: 6; opacity: .5; }
.ribbon .ribbon__g { stroke: var(--snow); stroke-width: 4; opacity: 0; stroke-dasharray: 6 100; stroke-dashoffset: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fp { position: absolute; display: block; }
.fp__p, .fp__f { display: block; }
.fp .disc { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(23, 27, 37, .35)); }
.fp--a { width: 64px; right: 8%; top: 18%; opacity: .85; }
.fp--b { width: 48px; left: 10%; top: 14%; opacity: .7; }
.fp--c, .fp--d { display: none; }
.hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: var(--s3);
  padding: calc(var(--nav-h) + 16px) 0 88px; }
.hero__mark { order: -1; justify-self: center; }
.hero__mark .lg { height: min(26svh, 200px); width: auto; filter: drop-shadow(0 18px 30px rgba(23, 27, 37, .45)); }
@media (min-width: 600px) and (max-width: 1023.98px) and (min-height: 900px) { .hero__grid { align-content: center; } }
@media (max-height: 620px) and (max-width: 1023.98px) { .hero__mark { display: none; } .hero__grid { padding-top: calc(var(--nav-h) + 8px); } .hero h1 { margin-top: var(--s1); } .hero .btn-row { margin-top: var(--s3); } }
@media (max-height: 700px) and (max-width: 1023.98px) { .hero__mark .lg { height: min(16svh, 130px); } .hero__grid { gap: var(--s2); padding-bottom: 72px; } .hero__sub { margin-top: var(--s2); } }
.hero__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-glow); }
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.025em; margin-top: var(--s2); max-width: 17ch; color: var(--snow); }
.hero__sub { color: var(--fog); font-size: var(--fs-lead); line-height: 1.55; margin-top: var(--s3); max-width: 52ch; }
.hero .btn-row { margin-top: var(--s4); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s4); color: var(--fog); font-size: var(--fs-small); }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .ic { color: var(--amber-glow); flex: none; }
.hero__tools { position: absolute; z-index: 4; left: var(--gutter); bottom: 16px; }
@media (max-width: 479.98px) { .motion-toggle--hero { width: 44px; padding: 0; justify-content: center; } .motion-toggle--hero span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hero__tools { bottom: 12px; } }
.motion-toggle--hero { border-color: rgba(247, 243, 236, .25); color: var(--fog); background: rgba(23, 27, 37, .35); }
.scroll-hint { position: absolute; z-index: 4; left: 50%; bottom: 20px; margin-left: -28px; width: 56px; display: none; flex-direction: column; align-items: center; gap: 6px;
  color: var(--fog); text-decoration: none; font-family: var(--font-display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; transition: opacity .3s; }
.scroll-hint { min-height: 44px; }
.scroll-hint__lane { position: relative; width: 22px; height: 36px; margin-block: 4px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(247, 243, 236, .6); }
.scroll-hint__lane i { position: absolute; left: 50%; top: 7px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--pk-pink); }
.is-scrolled .scroll-hint { opacity: 0; pointer-events: none; }
@media (min-height: 700px) and (min-width: 768px) { .scroll-hint { display: flex; } }
@media (min-width: 1024px) {
  .hero__scrim { background:
    linear-gradient(180deg, rgba(23, 27, 37, .55) 0, transparent 140px),
    linear-gradient(90deg, rgba(23, 27, 37, .82) 0%, rgba(23, 27, 37, .66) 48%, rgba(23, 27, 37, .22) 72%, rgba(23, 27, 37, .08) 100%); }
  .hero__deco { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 50%, #000 64%); mask-image: linear-gradient(90deg, transparent 0, transparent 50%, #000 64%); }
  .hero__ribbon { display: block; }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding-bottom: 104px; }
  .hero__mark { order: 0; align-self: center; justify-self: end; margin-right: 2vw; }
  .hero__mark .lg { height: min(52svh, 460px); }
  .fp--a { width: 120px; right: 4%; top: 16%; } .fp--b { width: 84px; left: auto; right: 38%; top: 24%; }
  .fp--c { display: block; width: 56px; right: 30%; bottom: 20%; opacity: .8; } .fp--d { display: block; width: 40px; right: 6%; bottom: 14%; opacity: .6; }
}
.promise-band { background: var(--night); color: var(--snow); padding: var(--s4) 0; border-top: 1px solid var(--rule-dark); }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.promise { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--navy-2); border: 1px solid var(--rule-dark); min-width: 0; }
.promise:last-child { grid-column: 1 / -1; }
.promise .ic { flex: none; margin-top: 2px; }
.promise b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--snow); line-height: 1.3; }
.promise small { display: block; color: var(--mist); font-size: var(--fs-small); line-height: 1.45; margin-top: 2px; }
.promise--0 .ic { color: var(--blue-glow); } .promise--1 .ic { color: var(--amber-glow); } .promise--2 .ic { color: var(--pink-glow); }
.promise--3 .ic { color: var(--blue-glow); } .promise--4 .ic { color: var(--amber-glow); }
.promises--light .promise { background: var(--card); border-color: var(--rule-light); }
.promises--light .promise b { color: var(--ink); } .promises--light .promise small { color: var(--slate); }
.promises--light .promise--0 .ic, .promises--light .promise--3 .ic { color: var(--blue-ink); }
.promises--light .promise--1 .ic, .promises--light .promise--4 .ic { color: var(--orange-ink); }
.promises--light .promise--2 .ic { color: var(--pink); }
@media (min-width: 1024px) { .promises { grid-template-columns: repeat(5, minmax(0, 1fr)); } .promise:last-child { grid-column: auto; } }
.phero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--snow);
  min-height: clamp(440px, 72svh, 720px); display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 16px) 0 var(--s8); }
@media (min-width: 1024px) { .phero { padding-top: calc(var(--nav-h) + 40px); } }
.phero--compact { min-height: clamp(360px, 48svh, 520px); }
.phero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.phero__glow { position: absolute; width: 70vw; height: 70vw; right: -24vw; top: -36vw; border-radius: 50%; filter: blur(70px); opacity: .2; background: var(--pk-blue); }
.phero--amber .phero__glow { background: var(--pk-amber); } .phero--pink .phero__glow { background: var(--pk-pink); }
.phero--orange .phero__glow { background: var(--orange); } .phero--snow .phero__glow { background: var(--pk-blue); opacity: .14; }
.phero__dots { position: absolute; inset: 0; background: radial-gradient(var(--rule-dark) 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); }
.phero__ribbon { opacity: .45; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 52%, #000 72%); mask-image: linear-gradient(90deg, transparent 0, transparent 52%, #000 72%); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: end; }
.phero h1 { margin-top: var(--s1); max-width: 18ch; }
.phero__lead { color: var(--mist); font-size: var(--fs-lead); line-height: 1.6; margin-top: var(--s3); max-width: 56ch; }
.phero__art { max-width: 300px; width: 100%; justify-self: center; }
.phero__art .illus { width: 100%; height: auto; max-height: 180px; }
.phero-mark { max-height: 200px; }
.phero-mark .lg { max-height: 200px; }
.crumb { display: flex; gap: 8px; font-size: var(--fs-small); color: var(--mist); margin-bottom: var(--s1); }
.crumb a { color: var(--mist); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.crumb a:hover { color: var(--snow); text-decoration: underline; }
.crumb span { display: inline-flex; align-items: center; }
@media (min-width: 1024px) {
  .phero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .phero__art { order: 0; max-width: none; justify-self: end; }
  .phero__art .illus { max-height: 380px; }
}
.duo { position: relative; padding-right: 18%; }
.duo .browser { width: 100%; height: auto; }
.duo .pframe { position: absolute; right: 0; bottom: -6%; width: 30%; height: auto; filter: drop-shadow(0 12px 24px rgba(23, 27, 37, .4)); }
.mini-trio { display: flex; justify-content: center; align-items: flex-end; }
.mini-trio .ugc { width: 30%; max-width: 140px; height: auto; }
.mini-trio .mt--1 { transform: rotate(-9deg) translateX(18%); } .mini-trio .mt--3 { transform: rotate(9deg) translateX(-18%); }
.mini-trio .mt--2 { position: relative; z-index: 1; transform: translateY(-8%); }
.phero-mark { position: relative; width: min(280px, 70vw); margin-inline: auto; }
.phero-mark .lg, .phero-mark .bl-guides { width: 100%; height: auto; }
.phero-mark .bl-guides { position: absolute; inset: 0; }
.phero-pipe { width: 100%; height: auto; }
.lg { overflow: visible; }
.lg--dark .lg-word { color: var(--snow); }
.lg--light .lg-word { color: var(--ink); }
.lg-cake { transform-box: fill-box; transform-origin: 50% 100%; }
.lg--anim .lg-lane, .lg--anim .lg-m { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.lg-glint path { stroke: var(--snow); stroke-width: 5; opacity: .75; stroke-dasharray: 9 120; stroke-dashoffset: 12; }
.lg--hero .lg-glint path { stroke-width: 3.5; opacity: .9; }
.lg--stack .lg-lane--0, .lg--stack .lg-m--0, .lg--brief .lg-lane--0, .lg--brief .lg-m--0 { stroke-dashoffset: var(--d0, 0); }
.lg--stack .lg-lane--1, .lg--stack .lg-m--1, .lg--brief .lg-lane--1, .lg--brief .lg-m--1 { stroke-dashoffset: var(--d1, 0); }
.lg--stack .lg-lane--2, .lg--stack .lg-m--2, .lg--brief .lg-lane--2, .lg--brief .lg-m--2 { stroke-dashoffset: var(--d2, 0); }
.lg--stack .lg-lane--3, .lg--stack .lg-m--3, .lg--brief .lg-lane--3, .lg--brief .lg-m--3 { stroke-dashoffset: var(--d3, 0); }
.lg--stack .lg-lane--4, .lg--stack .lg-m--4, .lg--brief .lg-lane--4, .lg--brief .lg-m--4 { stroke-dashoffset: var(--d4, 0); }
.lg--stack .lg-lane--5, .lg--stack .lg-m--5, .lg--brief .lg-lane--5, .lg--brief .lg-m--5 { stroke-dashoffset: var(--d5, 0); }
.lg--fallen .lg-cake--top { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  
  .lg--nav .lg-glint__o { animation: lg-nav-o 8s linear 2.4s infinite; }
  .lg--nav .lg-glint__i { animation: lg-nav-i 8s linear 2.4s infinite; }
  .lg--nav .lg-cake--top { animation: lg-nav-hop 8s linear 2.4s infinite; }
  [data-page="home"] .lg--nav .lg-glint__o, [data-page="home"] .lg--nav .lg-glint__i, [data-page="home"] .lg--nav .lg-cake--top { animation-delay: .6s; }
  
  .lg--hero .lg-cake--bot { animation: lg-drop .46s var(--ease-settle) 0s both, lg-idle-bot 10s linear 1.75s infinite; }
  .lg--hero .lg-cake--mid { animation: lg-drop .46s var(--ease-settle) .11s both, lg-idle-mid 10s linear 1.75s infinite; }
  .lg--hero .lg-cake--top { animation: lg-drop .46s var(--ease-settle) .22s both, lg-idle-top 10s linear 1.75s infinite; }
  .lg--hero .lg-lane--0, .lg--hero .lg-m--0 { animation: lg-draw .5s cubic-bezier(.5, 0, 1, 1) .48s both; }
  .lg--hero .lg-lane--1, .lg--hero .lg-m--1 { animation: lg-draw .4s cubic-bezier(0, 0, .3, 1) .98s both; }
  .lg--hero .lg-lane--2, .lg--hero .lg-m--2 { animation: lg-draw .12s linear .6s both; }
  .lg--hero .lg-lane--3, .lg--hero .lg-m--3 { animation: lg-draw .118s linear .72s both; }
  .lg--hero .lg-lane--4, .lg--hero .lg-m--4 { animation: lg-draw .236s linear .838s both; }
  .lg--hero .lg-lane--5, .lg--hero .lg-m--5 { animation: lg-draw .306s cubic-bezier(0, 0, .3, 1) 1.074s both; }
  .lg--hero .lg-glint__o { animation: lg-pass-o 1.1s cubic-bezier(.45, 0, .25, 1) 1.38s, lg-hero-o 10s linear 2.75s infinite; }
  .lg--hero .lg-glint__i { animation: lg-pass-o 1.25s cubic-bezier(.45, 0, .25, 1) 1.53s, lg-hero-i 10s linear 2.75s infinite; }
  .js-motion .lg--hero.lg { transition: none; }
  
  
  .lg--nav[data-loop="paused"] .lg-glint path, .lg--nav[data-loop="paused"] .lg-cake--top { animation-name: none; }
  .lg--hero[data-loop="paused"] .lg-glint path { animation-name: lg-pass-o, none; }
  .lg--hero[data-loop="paused"] .lg-cake--bot { animation-name: lg-drop, none; }
  .lg--hero[data-loop="paused"] .lg-cake--mid { animation-name: lg-drop, none; }
  .lg--hero[data-loop="paused"] .lg-cake--top { animation-name: lg-drop, none; }
}
@keyframes lg-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes lg-drop { 0% { transform: translateY(-48px); opacity: 0; } 55% { opacity: 1; } 78% { transform: translateY(0) scaleY(.88); } 100% { transform: none; opacity: 1; } }
@keyframes lg-pass-o { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -103; } }
@keyframes lg-nav-o { 0% { stroke-dashoffset: 12; } 13.75%, 100% { stroke-dashoffset: -103; } }
@keyframes lg-nav-i { 0%, 1.9% { stroke-dashoffset: 12; } 17.5%, 100% { stroke-dashoffset: -103; } }
@keyframes lg-nav-hop { 0%, 11.25% { transform: none; } 13.5% { transform: translateY(-4px); } 15.6% { transform: scaleY(.94); } 17%, 100% { transform: none; } }
@keyframes lg-hero-o { 0% { stroke-dashoffset: 12; } 11%, 100% { stroke-dashoffset: -103; } }
@keyframes lg-hero-i { 0%, 1.5% { stroke-dashoffset: 12; } 14%, 100% { stroke-dashoffset: -103; } }
@keyframes lg-idle-top { 0%, 7% { transform: none; } 8.2% { transform: translateY(2px); } 10.8% { transform: none; }
  50% { transform: none; } 53% { transform: translateY(-14px); } 55% { transform: translateY(-14px) scaleY(.18); } 57% { transform: translateY(-14px); }
  60% { transform: scaleY(.92); } 61.5%, 100% { transform: none; } }
@keyframes lg-idle-mid { 0%, 7.9% { transform: none; } 9.1% { transform: translateY(2px); } 11.7%, 100% { transform: none; } }
@keyframes lg-idle-bot { 0%, 8.8% { transform: none; } 10% { transform: translateY(2px); } 12.6%, 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.js-motion [data-reveal]:not([data-done]) { opacity: 0; transform: translate3d(0, 24px, 0); }
  
  .hero-rise { animation: ps-rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 80ms + 40ms); }
  .hero-in { animation: ps-fade-up .6s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 80ms + 80ms); }
  .hero-art { animation: ps-art 1s var(--ease-out) .2s both; }
  .hero__ribbon .ribbon__o, .hero__ribbon .ribbon__i, .phero__ribbon .ribbon__o, .phero__ribbon .ribbon__i { animation: ps-draw 1.6s var(--ease-out) .3s both; }
  .ribbon__g { animation: ps-ribbon-glint 7s linear 2.4s infinite; }
  .fp__f { animation: ps-float 9s ease-in-out infinite; }
  .fp--a .fp__f { animation-duration: 7s; } .fp--b .fp__f { animation-duration: 9s; animation-delay: -2s; }
  .fp--c .fp__f { animation-duration: 11s; animation-delay: -4s; } .fp--d .fp__f { animation-duration: 13s; animation-delay: -6s; }
  .fp { animation: ps-fade .9s ease .6s both; }
  .phero__glow { animation: ps-glow 1.2s var(--ease-out) both; }
  .scroll-hint__lane i { animation: ps-hint 1.8s var(--ease-std) infinite; }
  .scroll-hint { animation: ps-fade .4s ease 1.4s both; }
  
  .pl-glint { animation: ps-pl-glint 4s linear infinite; }
  .rack-beat { stroke-dasharray: 30 70 !important; animation: ps-beat 3s linear infinite; }
  .rack-led { animation: ps-blink 2.4s ease-in-out infinite; }
  .kb-mover { animation: ps-kanban 6s var(--ease-std) infinite; }
  .db-bar:nth-child(4) { transform-box: fill-box; transform-origin: 50% 100%; animation: ps-breathe 6s ease-in-out infinite; }
  .wa-float { animation: ps-hop 12s ease-in-out 20s 3; }
  .fallen__cake .disc { animation: ps-roll 3s ease-in-out infinite; }
  
  .is-off *:not(.lg *), html.motion-paused main *:not(.lg *), html.motion-paused .wa-float, html.motion-paused .foot *:not(.lg *) { animation-play-state: paused !important; }
  
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: ps-vt-out .22s ease both; }
  ::view-transition-new(root) { animation: ps-vt-in .32s var(--ease-out) both; }
}
@keyframes ps-rise { from { transform: translateY(28px); } to { transform: none; } }
@keyframes ps-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ps-fade { from { opacity: 0; } }
@keyframes ps-art { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ps-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ps-ribbon-glint { 0% { stroke-dashoffset: 8; opacity: .8; } 30%, 100% { stroke-dashoffset: -100; opacity: .8; } }
@keyframes ps-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes ps-glow { from { opacity: 0; transform: scale(.9); } }
@keyframes ps-hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes ps-pl-glint { from { stroke-dashoffset: 8; } to { stroke-dashoffset: -100; } }
@keyframes ps-beat { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ps-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ps-kanban { 0%, 12% { transform: translateX(0); } 30%, 42% { transform: translateX(calc(100% + 26px)); } 60%, 72% { transform: translateX(calc(200% + 52px)); } 90%, 100% { transform: translateX(calc(300% + 78px)); } }
@keyframes ps-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.08); } }
@keyframes ps-hop { 0%, 96%, 100% { transform: none; } 98% { transform: translateY(-4px); } }
@keyframes ps-roll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes ps-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes ps-vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}