:root{--paper:#f5f3ec;--ink:#243d32;--muted:#68736a;--line:#d6dacf;--green:#244c3b;--soft:#e6ebe0;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #a26a31;outline-offset:5px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}p{line-height:1.65}h1,h2{text-wrap:balance}em{font-family:var(--serif);font-weight:400}::selection{background:#cbd9bb}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.masthead{display:flex;align-items:center;justify-content:space-between;height:104px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:23px;letter-spacing:-1px}.brand-mark{background:var(--green);color:var(--paper);width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:18px;letter-spacing:-2px;padding-right:2px}.brand-dot{font-size:11px;align-self:flex-start;margin-top:4px}.masthead nav{display:flex;gap:32px;font-size:13px}.masthead nav a:hover,.signin:hover,.text-link:hover{color:#967347}.signin{font-size:13px;font-weight:600}.signin span{margin-left:20px}.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:40px;padding-block:84px 78px}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;font-weight:500;text-transform:uppercase;display:flex;align-items:center;gap:10px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6c8b55;flex-shrink:0}h1{font-size:clamp(54px,5.9vw,83px);line-height:1.02;letter-spacing:-4.5px;font-weight:500;margin-top:30px}h1 em{font-size:1.17em;letter-spacing:-3px}.intro{max-width:460px;font-size:16px;color:var(--muted);margin-top:28px}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;background:var(--green);color:#fff;padding:17px 22px;border:1px solid var(--green);font-size:13px;font-weight:500;border-radius:4px;transition:background .2s,transform .2s}.button:hover{background:#35634d;transform:translateY(-2px)}.button:active{transform:translateY(0)}.text-link{font-size:12px;font-weight:600;display:inline-flex;gap:18px;align-items:center}.hero-note{margin-top:24px;font-size:10px;color:var(--muted)}.hero-art{position:relative;min-height:480px;display:grid;place-items:center;padding:30px 18px 35px;background:radial-gradient(ellipse at center,#dce4d1 0,transparent 68%)}.orbit{position:absolute;width:410px;height:410px;border:1px solid #d8ddcf;border-radius:50%;pointer-events:none}.orbit-two{width:490px;height:490px;border-style:dashed;opacity:.65}.paper-label{position:absolute;top:0;right:8px;font-family:var(--mono);font-size:9px;letter-spacing:1px;transform:rotate(7deg)}.paper-label span{font-size:28px;display:block;text-align:center}.career-preview{position:relative;background:#fdfcf8;width:355px;padding:26px 28px 18px;border:1px solid #d6dbcc;border-radius:5px;box-shadow:0 20px 40px #33412914;transform:rotate(-4deg);transition:transform .4s}.career-preview:hover{transform:rotate(-1deg)}.preview-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px}.sample-brand{font-size:20px;letter-spacing:-1px;font-weight:700}.sample-brand span{font-size:9px;vertical-align:top}.tiny{font-family:var(--mono);font-size:8px;letter-spacing:.8px}.preview-kicker{margin-top:10px;color:var(--muted)}.career-preview h2{font-family:var(--serif);font-size:44px;line-height:.98;font-weight:400;letter-spacing:-1px;margin-top:14px}.preview-description{font-size:10px;margin-block:17px 25px;color:var(--muted)}.role{border-top:1px solid var(--line);padding:13px 0;display:flex;justify-content:space-between;align-items:center}.role strong{font-size:11px;font-weight:600;display:block}.role div span{display:block;font-size:8px;color:var(--muted);margin-top:5px}.preview-foot{margin-top:15px;display:flex;justify-content:space-between;align-items:center;font-size:8px;color:var(--muted)}.connection-label{position:absolute;bottom:18px;right:0;background:var(--green);color:#f5f3ec;padding:15px 20px;font-size:11px;box-shadow:0 8px 20px #243d3220;transform:rotate(3deg);display:flex;align-items:center;gap:8px}.connection-label>span:first-child{font-size:20px}.connection-label .live-dot{background:#bace9c;margin-left:10px}.art-caption{position:absolute;bottom:-22px;font-size:9px;color:var(--muted)}.principles{border-block:1px solid var(--line);padding-block:25px;display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:11px}.principles>span{font-weight:600}.principles p{color:var(--muted)}.principles p span{margin-inline:20px;color:#a1aa9c}.section{padding-block:105px}.section-heading>p:last-child{max-width:405px;color:var(--muted);font-size:14px;margin-top:22px}h2{font-size:clamp(36px,4vw,55px);line-height:1.08;letter-spacing:-2px;font-weight:500}.section-heading h2,.developer h2,.questions h2{margin-top:22px}.workflow{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;border-top:1px solid var(--line)}.workflow article{padding:28px 30px 0 0}.workflow article+article{padding-left:30px;border-left:1px solid var(--line)}.step-number{font-family:var(--serif);font-size:33px;color:#8c9984}.workflow h3{font-size:18px;font-weight:500;letter-spacing:-.5px;margin-top:22px}.workflow p{font-size:13px;color:var(--muted);margin-top:14px;max-width:290px}.step-tag{display:inline-block;margin-top:28px;font-family:var(--mono);font-size:9px;border-bottom:1px solid #b4beb0;padding-bottom:7px}.product-section{background:var(--soft);padding-block:85px}.product-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.product-heading>p:last-child{max-width:310px}.console{margin-top:45px;border:1px solid #c7d0c1;border-radius:7px;background:#fcfcf8;box-shadow:0 25px 45px #3341290c;overflow:hidden}.console-bar{padding:20px 25px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}.console-bar strong{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:14px}.small-mark{background:var(--green);color:#fff;padding:4px;border-radius:4px;font-size:11px}.demo-label{font-family:var(--mono);font-size:8px;letter-spacing:1px}.console-body{display:grid;grid-template-columns:175px 1fr}.console-aside{padding:28px 15px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:11px}.console-aside>span,.console-aside>strong{padding:11px}.console-aside strong{background:var(--soft);border-radius:4px;display:flex;justify-content:space-between}.console-aside small{margin-top:auto;padding:11px;font-size:8px;color:var(--muted)}.console-content{padding:30px;min-width:0}.console-title{display:flex;justify-content:space-between;align-items:center}.console-title .tiny{color:var(--muted);font-size:7px}.console-title h3{font-size:24px;letter-spacing:-1px;font-weight:500;margin-top:8px}.count{font-size:10px;color:var(--muted)}.demo-filters{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-top:25px}.demo-filters button{border:0;background:none;padding:12px 0;color:var(--muted);font-size:10px;border-bottom:2px solid transparent}.demo-filters button[aria-pressed=true]{border-color:var(--green);color:var(--green)}.candidate{display:grid;grid-template-columns:32px 1fr 125px 70px;gap:15px;align-items:center;padding:18px 0;border-bottom:1px solid #e9ebe3}.avatar{width:32px;height:32px;border-radius:50%;background:#eae6d9;display:grid;place-items:center;font-size:10px}.candidate strong{font-size:11px;font-weight:600}.candidate small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.candidate-location{font-size:9px;color:var(--muted)}.status{font-size:8px;padding:5px 7px;border-radius:3px;text-align:center}.pending{background:#f4ecd5;color:#796630}.accepted{background:#e4eedf;color:#456038}.console-caption{margin-top:18px;font-size:9px;color:var(--muted)}.product-notes{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:30px}.product-notes p{font-size:12px;color:var(--muted)}.product-notes strong{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}.developer{display:grid;grid-template-columns:1fr 1.05fr;gap:85px;align-items:center}.developer-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;max-width:370px;margin-top:24px}.developer-copy .text-link{margin-top:30px}.code-panel{border:1px solid #ced5c6;border-radius:6px;overflow:hidden;background:#ecf0e6}.code-header{display:flex;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #d3dbcb;font-size:9px;font-family:var(--mono)}.code-header span:last-child{color:var(--muted)}.install{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #d3dbcb;gap:12px}.install code{font:10px var(--mono)}.install button{background:transparent;border:1px solid #bfcab5;border-radius:3px;padding:6px 9px;font-size:9px;color:var(--green)}.install button:hover{background:#dbe5d1}pre{margin:0;padding:26px 20px;overflow:auto;font:11px/1.95 var(--mono);color:#344a38}.syntax{color:#965b32}.string{color:#587246}.comment{color:#78836f}.code-footer{border-top:1px solid #d3dbcb;padding:16px 20px;display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.questions{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;border-top:1px solid var(--line);padding-block:75px}.answers article{border-bottom:1px solid var(--line);padding-block:0 24px;margin-bottom:24px}.answers h3{font-size:15px;font-weight:500}.answers p{font-size:13px;color:var(--muted);margin-top:10px}.closing{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:65px 75px}.closing h2{margin-block:24px 30px;font-size:clamp(38px,5vw,65px)}.closing-flower{position:absolute;right:50px;top:25px;font-size:260px;line-height:1;color:#c4d0b6;transform:rotate(12deg);z-index:-1}.footer{display:flex;align-items:center;gap:30px;justify-content:space-between;padding-block:35px}.footer .brand{font-size:18px}.footer p{font-size:10px;color:var(--muted)}.footer>a:not(.brand),.footer>span{font-size:10px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;top:10px;left:10px;padding:15px;background:var(--green);color:white;z-index:10}
@media(min-width:900px){.hero-copy{animation:appear .65s ease-out}.hero-art{animation:appear .9s ease-out}}@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.hero{gap:15px}.hero-art{transform:scale(.9)}h1{font-size:62px}.hero-actions{gap:18px}.hero-note{max-width:300px}.developer{gap:35px}.principles p span{margin-inline:8px}.candidate-location{display:none}.candidate{grid-template-columns:32px 1fr 70px}.console-body{grid-template-columns:140px 1fr}.console-aside{padding-inline:8px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.masthead{height:80px;flex-wrap:wrap}.masthead nav{order:3;width:100%;justify-content:space-between;gap:10px;padding-bottom:10px;font-size:10px}.brand{font-size:20px}.brand-mark{width:28px;height:28px;font-size:15px}.signin{font-size:11px}.hero{grid-template-columns:1fr;padding-block:50px 30px;gap:30px}.hero-copy{max-width:520px}h1{font-size:clamp(49px,10vw,75px);letter-spacing:-3px;margin-top:23px}.intro{font-size:14px}.hero-actions{gap:22px}.hero-art{transform:none;min-height:470px;max-width:460px;width:100%;margin:auto;overflow:hidden;padding-bottom:45px}.orbit{width:340px;height:340px}.orbit-two{width:410px;height:410px}.career-preview{width:min(340px,90%);padding:24px}.paper-label{right:15px;top:8px}.connection-label{right:10px;bottom:26px}.art-caption{bottom:0;font-size:8px}.principles{align-items:flex-start;flex-direction:column;gap:8px;padding-block:22px}.principles p{font-size:10px}.principles p span{margin-inline:4px}.section{padding-block:65px}h2{font-size:39px}.workflow{grid-template-columns:1fr;margin-top:30px}.workflow article,.workflow article+article{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}.workflow h3{margin-top:10px}.workflow p{max-width:none}.step-tag{margin-top:17px}.product-section{padding-block:55px}.product-heading{display:block}.product-heading>p:last-child{max-width:100%}.console{margin-top:28px}.console-bar{padding:15px}.console-bar>span:not(.demo-label){display:none}.console-body{display:block}.console-aside{display:none}.console-content{padding:20px 15px}.candidate{gap:9px}.candidate strong{font-size:10px}.console-title h3{font-size:23px}.product-notes{gap:20px}.developer{grid-template-columns:1fr;gap:30px}.developer-copy>p:not(.eyebrow){max-width:none}.code-panel pre{font-size:10px}.questions{grid-template-columns:1fr;gap:30px;padding-block:50px}.questions h2{margin-top:16px}.closing{padding-block:45px 55px}.closing-flower{right:-30px;top:80px;font-size:180px;opacity:.5}.closing h2{font-size:40px}.footer{flex-wrap:wrap;gap:20px}.footer p{width:100%;order:4}.footer>span{margin-left:auto}.button{padding:15px 18px;gap:25px}.hero-note{max-width:none;font-size:9px}}
.scroll-scene.is-enabled{height:300vh;width:calc(100vw - 32px);margin-left:calc(50% - 50vw + 16px);margin-top:45px}
.scroll-scene.is-enabled .scroll-pin{position:sticky;top:0;height:100vh;padding-block:16px;display:flex;align-items:stretch}
.scroll-scene.is-enabled .feature-bento,.scroll-scene.is-enabled .console{width:100%;height:100%;margin:0;animation:none;transform-origin:center}
.scroll-scene.is-enabled .feature-bento,.scroll-scene.is-enabled .console{will-change:transform;transition:transform 140ms var(--ease-out)}
.scroll-scene.is-enabled .feature-cell,.scroll-scene.is-enabled .candidate{animation:none}
.scroll-scene.is-enabled .feature-cell{min-height:0;padding:20px}
.scroll-scene.is-enabled .feature-bento{grid-template-rows:1fr 1fr 1fr}
.scroll-scene.is-enabled .feature-story h3{font-size:clamp(28px,3vw,44px);margin-top:16px}
.scroll-scene.is-enabled .feature-story>p{margin-top:12px}
.scroll-scene.is-enabled .feature-bridge>p{margin-top:10px}
.scroll-scene.is-enabled .feature-list ul{margin-top:12px}
.scroll-scene.is-enabled .feature-list li{padding:8px 0}
.scroll-scene.is-enabled .console{display:flex;flex-direction:column}
.scroll-scene.is-enabled .console-body{flex:1}
.scroll-scene.is-enabled .candidate-list{min-height:215px}
.scroll-scene.is-enabled .console-content{padding:clamp(24px,4vw,64px)}
.scroll-rail{position:fixed;z-index:5;top:50%;right:24px;display:flex;flex-direction:column;gap:10px;transform:translateY(-50%)}
.scroll-rail a{width:7px;height:7px;border:1px solid var(--muted);border-radius:50%;opacity:.55;transition:background 180ms var(--ease-out),transform 180ms var(--ease-out),opacity 180ms var(--ease-out)}
.scroll-rail a:hover,.scroll-rail a:focus-visible{opacity:1;transform:scale(1.35)}
.scroll-rail a.is-active{background:var(--green);border-color:var(--green);opacity:1;transform:scale(1.35)}
.hero-asterisk{position:absolute;left:10%;top:18%;z-index:1;color:var(--green);font:72px/1 var(--serif);opacity:.72;transform:rotate(0) translateY(0);transition:transform 260ms var(--ease-out),opacity 180ms var(--ease-out)}
.hero-asterisk[data-direction=down]{transform:rotate(14deg) translateY(3px)}
.hero-asterisk[data-direction=up]{transform:rotate(-14deg) translateY(-3px)}
@media(max-width:760px){.scroll-rail{display:none}}
@media(max-width:760px){.hero-asterisk{left:7%;top:16%;font-size:58px}}
@media(prefers-reduced-motion:reduce){.scroll-rail{display:none}.hero-asterisk{transition:none}}
.scroll-scene.is-enabled .candidate-list.is-changing .candidate{opacity:.25;transform:translateY(8px)}
.candidate{transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.candidate:nth-child(2){transition-delay:35ms}
.candidate:nth-child(3){transition-delay:70ms}
.candidate-list:not(.is-changing) .candidate{transition-delay:0ms}
.count-changing{animation:count-pop 220ms var(--ease-out)}
.scroll-scene.is-enabled .feature-cell{transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.scroll-scene.is-enabled .feature-cell.is-muted{opacity:.72}
.scroll-scene.is-enabled .feature-cell.is-focus{opacity:1;transform:scale(1.018)}
.journey-stage{transition:opacity 220ms var(--ease-out)}
.journey-stage:not(.is-active){opacity:.58}
.journey-stage.is-active{opacity:1}
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
.hero-art { animation: none; }
.hero-copy, .hero-art { animation-timing-function: var(--ease-out); }
.button { transition: background 200ms ease, transform 160ms var(--ease-out); }
.career-preview { transition: transform 250ms var(--ease-out); }
@media (hover: none), (pointer: coarse) {
  .button:hover { transform: none; }
  .career-preview:hover { transform: rotate(-4deg); }
}
/* Scroll position owns these transforms; unsupported browsers keep the static layout. */
@supports (animation-timeline: view()) {
  @media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    .hero-art { view-timeline-name: --hero-scroll; }
    .hero-art .career-preview {
      animation: career-scroll linear both;
      animation-timeline: --hero-scroll;
      animation-range: exit 0% exit 100%;
      transition: none;
    }
    .hero-art .connection-label {
      animation: label-scroll linear both;
      animation-timeline: --hero-scroll;
      animation-range: exit 0% exit 100%;
    }
    .hero-art .orbit-one {
      animation: orbit-scroll linear both;
      animation-timeline: --hero-scroll;
      animation-range: exit 0% exit 100%;
    }
    .hero-art .orbit-two {
      animation: outer-orbit-scroll linear both;
      animation-timeline: --hero-scroll;
      animation-range: exit 0% exit 100%;
    }
    .closing { view-timeline-name: --closing-scroll; }
    .product-section { view-timeline-name: --workspace-scroll; }
    .console {
      animation: workspace-scroll linear both;
      animation-timeline: --workspace-scroll;
      animation-range: entry 0% entry 100%;
    }
    .candidate-list { view-timeline-name: --candidates-scroll; }
    .candidate {
      animation: candidate-scroll linear both;
      animation-timeline: --candidates-scroll;
      animation-range: entry 0% entry 70%;
    }
    .candidate:nth-child(2) { animation-range: entry 10% entry 85%; }
    .candidate:nth-child(3) { animation-range: entry 20% entry 100%; }
    .console:focus-within, .console:focus-within .candidate {
      animation: none;
    }
    .closing-flower {
      animation: flower-scroll linear both;
      animation-timeline: --closing-scroll;
      animation-range: entry 0% exit 100%;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .integration-route { view-timeline-name: --route-scroll; position: relative; }
    .integration-route::after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      height: 2px;
      background: var(--green);
      transform-origin: left;
      pointer-events: none;
      animation: route-scroll linear both;
      animation-timeline: --route-scroll;
      animation-range: entry 0% cover 45%;
    }
    @media (max-width: 520px) {
      .integration-route::after {
        inset: 0 auto 0 0;
        width: 2px;
        height: auto;
        transform-origin: top;
        animation-name: route-scroll-vertical;
      }
    }
  }
}
@keyframes career-scroll {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-48px) rotate(0deg); }
}
@keyframes label-scroll {
  from { transform: translateY(0) rotate(3deg); }
  to { transform: translateY(-76px) rotate(0deg); }
}
@keyframes outer-orbit-scroll {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(24px) rotate(-55deg); }
}
@keyframes workspace-scroll {
  from { transform: translateY(32px); }
  to { transform: translateY(0); }
}
@keyframes candidate-scroll {
  from { transform: translateY(14px); opacity: .45; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes route-scroll {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes route-scroll-vertical {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes orbit-scroll {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-35px) rotate(40deg); }
}
@keyframes flower-scroll {
  from { transform: translateY(20px) rotate(-30deg); }
  to { transform: translateY(-20px) rotate(100deg); }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.button:hover{transform:none}.career-preview:hover{transform:rotate(-4deg)}}


/* Concept reference: https://codepen.io/bramus/pen/PobmGme
   Original implementation using current view timelines and the site's tokens. */
.journey{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;padding-block:60px 100px}
.journey-intro h2{font-size:clamp(32px,3.3vw,48px)}
.journey-intro>p{max-width:34ch;margin-top:24px;font-size:14px;color:var(--muted)}
.journey-intro .journey-caption{font-size:11px}
.journey-stages{list-style:none;padding:0;margin:0;display:grid;gap:32px;min-width:0}
.journey-stages::before,.journey-stages::after{content:'';display:none}
.journey-card{padding:36px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.journey-heading>span{font:500 11px var(--mono);color:var(--muted)}
.journey-heading h3{font-size:32px;line-height:1.12;font-weight:500;margin:20px 0 16px;letter-spacing:-.025em}
.journey-heading p{font-size:14px;color:var(--muted);max-width:46ch}
.journey-example{margin-top:28px;padding:24px;background:var(--soft)}
.journey-example h4{margin:12px 0 6px;font-size:18px;font-weight:500}
.journey-example p{font-size:12px;color:var(--muted)}
.journey-example .role{margin-top:20px}
.journey-example .role strong{font-size:15px}
.journey-example .role div span{font-size:12px}
.journey-example .avatar{background:var(--paper)}
.journey-document{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-block:1px solid var(--line);padding:16px 0;margin:18px 0;font-size:13px}
.journey-document span{font-size:11px;color:var(--muted)}
.journey-example>.status{display:inline-block;font-size:11px}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .journey{view-timeline-name:--journey}
  .journey-intro{position:sticky;top:80px;align-self:start}
  .journey-stages{gap:18vh;padding:0 0 40px 34px;position:relative}
  .journey-stages::before,.journey-stages::after{display:block;position:absolute;left:10px;top:20px;bottom:58px;width:2px;content:''}
  .journey-stages::before{background:var(--line)}
  .journey-stages::after{background:var(--green);transform:scaleY(var(--journey-progress,0));transform-origin:top;transition:transform 120ms linear}
  .journey-stage{position:sticky;top:40px}
  .journey-stage:nth-child(2){top:56px}
  .journey-stage:nth-child(3){top:72px}
  @supports(animation-timeline:view()){
    .journey-card{animation:journey-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  }
}
@media(min-width:900px) and (max-height:759px){
  .journey-card{padding:24px}
  .journey-heading h3{font-size:28px;margin:12px 0}
  .journey-example{margin-top:18px;padding:18px}
  .journey-document{padding:12px 0;margin:12px 0}
}
@keyframes journey-arrive{from{transform:translateY(24px);opacity:.65}to{transform:translateY(0);opacity:1}}
@media(max-width:899px){.journey{grid-template-columns:1fr;gap:32px;padding-block:40px 65px}.journey-card{padding:24px}.journey-intro>p{max-width:50ch}}

/* Additional scroll-linked motion; readable static content is the fallback. */
@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .section-heading h2{
      animation:heading-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
    }
    .feature-cell{
      animation:feature-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 65%;
    }
    .feature-cell:nth-child(even){animation-range:entry 10% entry 85%}
    .developer-copy,.code-panel{
      animation:developer-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
    .code-panel{animation-name:code-reveal}
    .code-panel pre{animation:code-lines linear both;animation-timeline:view();animation-range:entry 0% cover 65%}
    .feature-cell:focus-within,.developer-copy:focus-within,.code-panel:focus-within{animation:none}
  }
}
@keyframes heading-reveal{
  from{clip-path:inset(0 0 80% 0);transform:translateY(16px)}
  to{clip-path:inset(0 0 -10% 0);transform:translateY(0)}
}
@keyframes feature-rise{
  from{transform:translateY(28px);opacity:.35}
  to{transform:translateY(0);opacity:1}
}
@keyframes developer-reveal{
  from{transform:translateY(24px);opacity:.4}
  to{transform:translateY(0);opacity:1}
}
@keyframes code-reveal{
  from{transform:translateY(40px) scale(.97);opacity:.4}
  to{transform:translateY(0) scale(1);opacity:1}
}
@keyframes code-lines{
  from{clip-path:inset(0 0 100% 0);opacity:.35}
  to{clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes count-pop{
  from{opacity:.35;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* 21st.dev/Hirael Feature Overview Bento, adapted to the existing editorial system. */
.feature-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:55px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--line)}
.feature-cell{min-height:100%;padding:30px;background:#faf9f4}
.cell-label{font:500 9px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.feature-story{grid-column:span 4;grid-row:span 2;display:flex;min-height:390px;flex-direction:column}
.feature-story h3{max-width:470px;margin-top:28px;font-size:clamp(32px,3.2vw,47px);font-weight:500;line-height:1.06;letter-spacing:-1.5px}
.feature-story>p{max-width:56ch;margin-top:20px;font-size:13px;color:var(--muted)}
.integration-route{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:auto;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--line)}
.integration-route span{min-height:66px;padding:18px 16px;background:var(--paper);font:500 9px/1.5 var(--mono);display:flex;align-items:center}
.feature-metric{grid-column:span 2;display:flex;min-height:194px;flex-direction:column}
.feature-metric strong{margin-top:18px;font:500 58px/1 var(--serif);letter-spacing:-2px}
.feature-metric p{margin-top:auto;font-size:11px;color:var(--muted)}
.feature-bridge{grid-column:span 4;display:flex;min-height:220px;flex-direction:column}
.feature-bridge h3{margin-top:12px;font-size:23px;font-weight:500;letter-spacing:-.7px}
.feature-bridge>p{max-width:55ch;margin-top:18px;font-size:13px;color:var(--muted)}
.feature-bridge .text-link{margin-top:auto}
.feature-list{grid-column:span 2}
.feature-list ul{margin:24px 0 0;padding:0;list-style:none}
.feature-list li{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
.feature-list li strong{font-size:12px;font-weight:600}
.feature-list li span{font-size:10px;color:var(--muted)}

/* 21st.dev/Hirael FAQ Two Column, using the native disclosure element. */
.questions{align-items:stretch;gap:0;padding-block:0;border-block:1px solid var(--line)}
.questions-intro{padding:70px 70px 70px 0;border-right:1px solid var(--line)}
.questions-intro>p:last-child{max-width:34ch;margin-top:22px;font-size:13px;color:var(--muted)}
.answers{padding:28px 0 28px 50px}
.answers details{border-bottom:1px solid var(--line)}
.answers summary{position:relative;min-height:62px;padding:21px 44px 21px 0;list-style:none;cursor:pointer;font-size:14px;font-weight:500}
.answers summary::-webkit-details-marker{display:none}
.answers summary::after{position:absolute;top:24px;right:4px;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;content:'';transform:rotate(45deg);transition:transform 180ms var(--ease-out)}
.answers details[open] summary::after{transform:rotate(225deg)}
.answers details>div p{max-width:62ch;padding:0 44px 22px 0;font-size:12px;color:var(--muted)}
.answers summary:hover{color:#967347}
.answers summary:focus-visible{outline:3px solid #a26a31;outline-offset:5px}

@media(max-width:760px){
  .feature-bento{margin-top:32px}
  .feature-story{grid-column:1/-1;min-height:340px}
  .feature-metric{grid-column:span 3}
  .feature-bridge,.feature-list{grid-column:1/-1}
  .questions{gap:0;padding-block:0}
  .questions-intro{padding:44px 0 32px;border-right:0;border-bottom:1px solid var(--line)}
  .answers{padding:12px 0}
}
@media(max-width:520px){
  .feature-cell{padding:24px}
  .feature-metric{grid-column:1/-1}
  .integration-route{grid-template-columns:1fr}
}
.brand-mark{font-family:var(--sans);font-weight:700}