/* Primer: quiet surfaces, clear type, and blue where it matters. */
:root {
  --primer-blue:#3445ff;
  --primer-ink:#171b28;
  --primer-muted:#626876;
  --primer-line:#e4e6eb;
  --primer-surface:#f6f7fa;
  --color-blue-200:#dce0ff;
  --color-headerWhite:#ffffffed;
  --w-head:650;
}
body { color:var(--primer-ink); }
[id] { scroll-margin-top:105px; }
.container { width:calc(100% - clamp(40px,5vw,96px)); max-width:none; margin-inline:auto; }
.h-2,.work__intro h2,.caps__text h2 { font-size:clamp(32px,3.4vw,46px); font-weight:600; line-height:1.16; letter-spacing:-.04em; margin-left:0; }
.h-3 { font-size:24px; font-weight:600; letter-spacing:-.025em; }
.t-3,.t-4,.intro-detail { line-height:1.6; }
.intro-detail { margin-top:22px; color:var(--primer-muted); font-size:18px; max-width:480px; }
:focus-visible { outline:2px solid var(--primer-blue); outline-offset:5px; }

/* Navigation and hero */
.header__inner { height:88px; }
.header.is-hidden { transform:translateY(-100%); }
.header__logo { left:0; }
.logo__word { height:37px; width:auto; }
.header.is-open .header__logo { filter:brightness(0) invert(1); }
.header__list { gap:30px; }
.nav-link__text { font-size:15px; font-weight:600; }
.nav-link:hover { color:var(--primer-blue); }
.nav-link__line { background:var(--primer-blue); }
.btn-contact { background:var(--primer-blue); padding:13px 21px; border-radius:8px; font-size:14px; box-shadow:none; }
.btn-contact:hover,.btn-contact:focus-visible { background:#2536df; }
.hero { overflow:clip; background:#fff; }
.hero__top { padding:155px 0 90px; }
.hero__copy { position:relative; z-index:1; pointer-events:none; }
.hero__copy a { pointer-events:auto; }
.hero__title { font-weight:650; max-width:700px; letter-spacing:-.055em; }
.hero__title span { color:var(--primer-blue); }
.hero__description { max-width:450px; margin-top:26px; font-size:19px; line-height:1.6; color:var(--primer-muted); }
.hero__cta { margin-top:30px; align-items:center; gap:20px; padding:15px 22px; border-radius:8px; background:var(--primer-blue); color:#fff; }
.hero__cta .link__text { font-size:15px; font-weight:600; }
.hero__cta .link__label::before,.hero__cta .link__label::after { display:none; }
.hero__cta .link__icon { width:22px; margin:0; color:#fff; }
.hero__cta:hover { background:#2536df; }
.hero__cta:hover .link__icon { color:#fff; }

/* Product previews */
.work { padding:110px 0 0; }
.work__list-wrap { padding:0; margin:0; }
.work__intro { max-width:720px; padding:0 0 48px; }
.work__intro .intro-detail { max-width:none; }
.work__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 32px; margin:0; }
.work__item { width:auto; margin:0; padding:0; min-width:0; }
.work__item--large { grid-column:1 / -1; padding-top:8px; }
.work__item--large .work__link { display:grid; grid-template-columns:.85fr 1.65fr; align-items:center; gap:55px; }
.work__link { color:var(--primer-ink); }
.work__media { margin:0 0 24px; }
.work__image { border-radius:10px; transform:none; }
.work__link:hover .work__media.in .work__image { transform:none; }
.work__text { margin:0; }
.work__title { white-space:normal; overflow:visible; }
.work__desc { color:var(--primer-muted); margin-top:10px; max-width:470px; font-size:16px; }
.work__item--large .work__media { margin:0; }
.work__item--large .work__title { font-size:32px; line-height:1.2; max-width:300px; }
.work__item--large .work__desc { margin-top:18px; }
.work__note { margin-top:25px; text-align:right; font-size:12px; color:var(--primer-muted); }
.product-scene { position:relative; height:410px; padding:32px; background:var(--primer-surface); display:flex; align-items:center; justify-content:center; color:var(--primer-ink); font-size:14px; }
.workspace-stack { position:relative; width:100%; height:310px; max-width:340px; }
.workspace-card { border:1px solid #e0e3eb; background:#fff; box-shadow:0 8px 20px #17233b05; border-radius:8px; padding:18px; font-size:13px; font-weight:600; }
.workspace-card--back { position:absolute; inset:0 24px auto; height:85px; color:var(--primer-muted); }
.workspace-card--middle { position:absolute; inset:38px 12px auto; height:85px; }
.workspace-card--front { position:absolute; inset:76px 0 auto; padding-bottom:10px; }
.client-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#a5afd8; margin-right:8px; }
.connection { float:right; font-size:9px; font-weight:500; color:#55725e; margin-top:3px; }
.workspace-heading { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.workspace-heading small { display:block; font-size:10px; color:var(--primer-muted); font-weight:400; margin-top:4px; }
.client-avatar { background:#edf0ff; color:var(--primer-blue); width:32px; height:32px; border-radius:6px; display:grid; place-items:center; }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#63846d; flex-shrink:0; }
.workspace-heading .live-dot { margin-left:auto; }
.tool-row { display:flex; align-items:center; gap:10px; border-top:1px solid #eeeef2; padding:10px 0; font-size:12px; font-weight:500; }
.tool-icon { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:5px; font-size:15px; font-weight:650; background:#fff; color:var(--primer-ink); }
.shopify { background:#edf2e9; color:#527b39; }
.github { background:#24272d; color:#fff; }
.notion { border:1px solid #dedee1; }
.tool-state { color:#55725e; font-size:9px; margin-left:auto; }
.job-stack { display:grid; gap:16px; width:100%; max-width:340px; }
.job-card { padding:22px; border-radius:8px; border:1px solid #e0e3eb; background:#fff; }
.job-card>div:first-child { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; }
.job-status { font-size:9px; margin-left:auto; color:#55725e; font-weight:400; }
.job-card p { margin:12px 0; font-weight:550; font-size:15px; }
.job-progress { height:3px; border-radius:3px; background:#eef0f5; margin:17px 0 10px; overflow:hidden; }
.job-progress span { display:block; width:65%; height:100%; background:var(--primer-blue); }
.job-progress--b span { width:38%; }
.job-card small { font-size:10px; color:var(--primer-muted); }
.routing-demo { padding:30px; background:var(--primer-surface); font-size:14px; }
.client-switch { display:flex; width:fit-content; border-radius:7px; background:#e9ebf0; padding:3px; margin:0 auto; }
.client-switch button { padding:10px 19px; font-size:12px; border-radius:5px; color:var(--primer-muted); }
.client-switch button.is-selected { background:#fff; color:var(--primer-blue); box-shadow:0 1px 4px #19254412; }
.routing-flow { display:flex; align-items:center; justify-content:space-between; margin:32px 0 26px; }
.route-node { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:12px; width:29%; min-height:145px; padding:15px 8px; background:#fff; border:1px solid #e0e3eb; border-radius:7px; font-size:12px; font-weight:600; }
.route-node small { font-size:9px; font-weight:400; color:var(--primer-muted); line-height:1.5; }
.route-node img { width:94px; height:auto; transform:none; }
.route-symbol { font-size:30px; color:var(--primer-blue); line-height:1; }
.route-primer { border-color:#bdc5ff; }
.route-line { flex:1; height:1px; background:#a9b3e5; position:relative; }
.route-line::after { content:""; display:block; position:absolute; right:0; top:-3px; border-left:5px solid #a9b3e5; border-top:3px solid transparent; border-bottom:3px solid transparent; }
.route-result { text-align:center; font-size:11px; line-height:1.6; color:var(--primer-muted); }

/* Details and pricing */
.caps { padding:110px 0; }
.caps__grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.caps__text,.caps__list { grid-column:auto; margin:0; }
.caps__item { border-bottom:1px solid var(--primer-line); }
.caps__item:first-child { border-top:1px solid var(--primer-line); }
.caps__btn-inner { justify-content:space-between; padding:22px 0; }
.caps__title { color:var(--primer-ink); font-size:20px; font-weight:550; letter-spacing:-.02em; }
.caps__icon { color:#8a909f; font-size:13px; }
.caps__item.is-open .caps__title,.caps__item.is-open .caps__icon { color:var(--primer-blue); }
.caps__body { padding-bottom:22px; }
.caps__desc { font-size:16px; line-height:1.65; margin:0; color:var(--primer-muted); }
.pricing { padding:100px 0; background:var(--primer-surface); }
.pricing__intro { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; margin-bottom:52px; }
.pricing__intro>p { color:var(--primer-muted); font-size:16px; }
.pricing__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.pricing__plan { padding:0 38px; border-left:1px solid #dcdee6; }
.pricing__plan:first-child { padding-left:0; border-left:0; }
.pricing__plan .h-3 { font-size:20px; }
.pricing__price { font-size:58px; line-height:1.1; letter-spacing:-.055em; font-weight:550; margin:28px 0 14px; }
.pricing__price span { font-size:14px; color:var(--primer-muted); letter-spacing:0; font-weight:400; margin-left:8px; }
.pricing__plan>.t-3 { font-size:16px; color:var(--primer-muted); }
.pricing__plan .link { margin-top:32px; color:var(--primer-blue); }
.pricing__plan .link__text { font-size:15px; }
.pricing__plan .link__icon { width:22px; color:var(--primer-blue); }
.pricing__plan .link__label::after { background:#b8c0f0; }
.pricing__note { color:var(--primer-muted); margin-top:44px; font-size:13px; }

/* People, answers, and contact */
.about { background:#fff; padding:100px 0 40px; }
.about__top { padding:0; }
.about__text { max-width:none; display:grid; grid-template-columns:1fr 1fr; column-gap:80px; }
.about__text h2 { grid-row:1 / 3; }
.about__para { margin:0 0 18px; }
.about__para:not(:last-child) { margin-bottom:18px; }
.about__para .t-1,.about__text>.t-3 { font-size:18px; line-height:1.65; color:var(--primer-muted); }
.about__vertical { padding-top:65px; }
.team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.team-member { border-top:1px solid var(--primer-line); padding-top:24px; }
.team-member .h-3 { font-size:20px; }
.team-member .t-4 { margin-top:8px; color:var(--primer-muted); font-size:13px; }
.team-member .t-3 { margin-top:18px; max-width:300px; font-size:15px; color:var(--primer-muted); }
.faq { background:#fff; padding:0 0 100px; }
.faq>.container { display:grid; grid-template-columns:1fr 1fr; gap:80px; border-top:1px solid var(--primer-line); padding-top:80px; }
.faq__title { margin:0; }
.faq__btn { color:var(--primer-ink); padding:22px 0; }
.faq__q { font-size:18px; font-weight:500; line-height:1.5; }
.faq__item:first-child .faq__btn { padding-top:0; }
.faq__item:not(:last-child)::after { background:var(--primer-line); }
.faq__item:not(.is-open):hover .faq__q { color:var(--primer-blue); }
.faq__icon { color:#8a909f; font-size:13px; transform:translateY(8px); }
.faq__item.is-open .faq__icon { color:var(--primer-blue); transform:translateY(8px) scaleY(-1); }
.faq__item:not(.is-open):hover .faq__icon { transform:translateY(8px); }
.faq__a { color:var(--primer-muted); font-size:15px; line-height:1.7; padding:0 25px 22px 0; }
.footer { background:#f0f2fc; padding-top:80px; padding-bottom:32px; }
.footer__contacts { display:grid; grid-template-columns:1.5fr 1fr; gap:80px; margin-bottom:70px; }
.footer__title-wrap { margin:0; }
.footer__title { font-size:clamp(36px,4vw,52px); font-weight:600; letter-spacing:-.045em; color:var(--primer-blue); margin:0; }
.footer__intro { max-width:420px; color:var(--primer-muted); font-size:17px; line-height:1.65; margin:22px 0 26px; }
.footer__title-wrap>.link .link__text { font-size:20px; }
.footer__nav { margin:0; padding-top:8px; }
.footer__nav-list { grid-template-columns:1fr 1fr; gap:16px 28px; }
.footer__nav-span { font-size:15px; line-height:1.5; letter-spacing:0; }
.footer__nav .link__label::after,.footer__nav .link__label::before { display:none; }
.footer__nav a:hover { color:var(--primer-blue); }
.footer__bottom { width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:27px; border-top:1px solid #dce0ee; }
.footer-brand { display:flex; align-items:center; gap:16px; }
.footer-brand img { width:94px; height:auto; }
.footer-brand span { font-size:12px; color:var(--primer-muted); }
.footer__copy-wrap { display:block; transform:none; }
.footer__copy { color:var(--primer-muted); font-size:12px; padding:0; }
.menu,.header__bg { background:#171d35; }

@media(min-width:1250px) {
  .hero__top { padding:155px 0 90px; }
  .hero__title { font-size:clamp(52px,4.45vw,86px); max-width:none; }
}
@media(min-width:1900px) { .hero__top { padding:180px 0 110px; } }
@media(max-width:1249px) {
  .hero__title { max-width:700px; }
  .caps__grid,.about__text,.faq>.container { gap:45px; }
  .work__item--large .work__link { gap:30px; grid-template-columns:.8fr 1.5fr; }
  .routing-demo { padding:24px 18px; }
  .route-node { font-size:10px; }
  .route-node img { width:80px; }
}
@media(max-width:767px) {
  .container { width:calc(100% - 40px); }
  [id] { scroll-margin-top:85px; }
  .header__inner { height:72px; }
  .logo__word { height:31px; }
  .btn-contact { font-size:12px; padding:11px 15px; }
  .hero__top { padding:128px 0 48px; }
  .hero__title { font-size:clamp(34px,8.4vw,48px); letter-spacing:-.055em; }
  .hero__description { font-size:17px; margin-top:23px; max-width:400px; }
  .hero__cta { margin-top:25px; padding:14px 20px; }
  .h-2,.work__intro h2,.caps__text h2 { font-size:32px; }
  .intro-detail { font-size:16px; margin-top:18px; }
  .work { padding-top:68px; }
  .work__intro { padding-bottom:32px; }
  .work__list { grid-template-columns:1fr; gap:40px; }
  .work__media { margin:0 0 21px; }
  .work__title { font-size:22px; }
  .work__desc { font-size:15px; margin-top:8px; }
  .product-scene { height:365px; padding:24px; }
  .workspace-stack { height:302px; }
  .workspace-card { padding:16px; }
  .workspace-card--front { padding-bottom:8px; }
  .connection { font-size:8px; }
  .job-card { padding:19px; }
  .job-card p { font-size:14px; }
  .work__item--large { padding-top:4px; }
  .work__item--large .work__link { display:flex; flex-direction:column; align-items:stretch; gap:25px; }
  .work__item--large .work__title { font-size:22px; max-width:none; }
  .work__item--large .work__desc { margin-top:8px; }
  .routing-demo { padding:24px 18px; }
  .routing-flow { flex-direction:column; margin:24px 0; }
  .route-node { width:100%; min-height:100px; gap:8px; padding:15px; font-size:13px; }
  .route-node small { font-size:10px; }
  .work__item--large .route-node img { width:95px; height:auto; aspect-ratio:auto; object-fit:contain; }
  .route-line { flex:none; width:1px; height:22px; }
  .route-line::after { right:-3px; top:auto; bottom:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:5px solid #a9b3e5; border-bottom:0; }
  .route-symbol { font-size:26px; }
  .work__note { text-align:left; font-size:11px; line-height:1.6; margin-top:20px; }
  .caps { padding:68px 0; }
  .caps__grid { grid-template-columns:1fr; gap:32px; }
  .caps__title { font-size:18px; }
  .caps__btn-inner { padding:20px 0; }
  .caps__desc { font-size:15px; }
  .pricing { padding:64px 0; }
  .pricing__intro { display:block; margin-bottom:35px; }
  .pricing__intro>p { margin-top:20px; font-size:15px; }
  .pricing__grid { grid-template-columns:1fr; gap:30px; }
  .pricing__plan,.pricing__plan:first-child { border-left:0; border-top:1px solid #dcdee6; padding:25px 0 0; }
  .pricing__price { font-size:48px; margin:22px 0 12px; }
  .pricing__plan .link { margin-top:22px; }
  .pricing__note { margin-top:32px; font-size:12px; }
  .about { padding:64px 0 32px; }
  .about__text { display:block; }
  .about__para { margin-top:24px; }
  .about__para .t-1,.about__text>.t-3 { font-size:16px; }
  .about__vertical { padding-top:38px; }
  .team-grid { grid-template-columns:1fr; gap:25px; }
  .team-member { padding-top:22px; }
  .team-member .t-3 { margin-top:12px; max-width:none; }
  .faq { padding-bottom:64px; }
  .faq>.container { grid-template-columns:1fr; gap:32px; padding-top:60px; }
  .faq__q { font-size:17px; }
  .faq__a { font-size:15px; padding-right:10px; }
  .footer { padding-top:58px; padding-bottom:26px; }
  .footer__contacts { display:block; margin-bottom:42px; }
  .footer__intro { font-size:16px; margin-top:20px; }
  .footer__title-wrap>.link .link__text { font-size:18px; }
  .footer__nav { margin-top:38px; padding:0; }
  .footer__bottom { align-items:flex-start; flex-direction:column; gap:25px; padding-top:24px; }
}

/* A client switch changes the destination, never the other connection. */
.work__item--large .work__link { display:block; }
.work__item--large .work__text { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:28px; }
.work__item--large .work__title { font-size:32px; max-width:none; }
.work__item--large .work__desc { max-width:460px; margin:0; }
.routing-demo { padding:36px 40px 28px; }
.routing-controls { display:flex; align-items:center; justify-content:center; gap:16px; }
.routing-controls>span { font-size:13px; color:var(--primer-muted); }
.client-switch { margin:0; }
.routing-flow { margin:36px 0 28px; }
.route-node { width:27%; min-height:150px; padding:22px; }
.route-ai { align-items:flex-start; text-align:left; }
.route-ai-label { font-size:12px; color:var(--primer-muted); font-weight:400; }
.route-ai p { font-size:18px; line-height:1.5; font-weight:500; }
.route-node img { width:116px; }
.route-node small { font-size:11px; }
.route-accounts { width:32%; display:grid; gap:12px; }
.route-account { display:flex; align-items:center; gap:12px; border:1px solid #e0e3eb; border-radius:7px; padding:18px; background:#fff; transition:border-color .2s,background-color .2s; }
.route-account strong { display:block; font-size:14px; font-weight:600; }
.route-account small { display:block; font-size:10px; line-height:1.5; color:var(--primer-muted); margin-top:4px; }
.route-account.is-active { border-color:var(--primer-blue); background:#f5f6ff; }
.account-indicator { margin-left:auto; color:#82918a; font-size:16px; }
.route-account.is-active .account-indicator { color:var(--primer-blue); }
.route-result { font-size:13px; }
@media(max-width:1023px) {
  .routing-demo { padding:28px 24px; }
  .route-node { padding:18px 14px; }
  .route-ai p { font-size:15px; }
  .route-account { padding:14px 12px; gap:9px; }
  .route-account strong { font-size:12px; }
  .route-account small { font-size:9px; }
}
@media(max-width:767px) {
  .work__item--large .work__link { display:block; }
  .work__item--large .work__text { display:block; margin-bottom:24px; }
  .work__item--large .work__title { font-size:25px; }
  .work__item--large .work__desc { margin-top:14px; }
  .routing-demo { padding:25px 18px; }
  .routing-controls { flex-direction:column; gap:12px; }
  .routing-flow { margin:26px 0 20px; }
  .route-node { width:100%; min-height:110px; padding:20px; }
  .route-ai { align-items:center; text-align:center; }
  .route-ai p { font-size:17px; }
  .route-accounts { width:100%; gap:10px; }
  .route-account { padding:16px; }
  .route-account strong { font-size:14px; }
  .route-account small { font-size:11px; }
  .route-result { font-size:12px; }
}
.route-accounts { position:relative; }
.route-primer + .route-line { margin-right:20px; background:var(--primer-blue); }
.route-primer + .route-line::after { display:none; }
.route-accounts::before { content:""; position:absolute; left:-20px; top:25%; bottom:50%; width:20px; border-left:1px solid var(--primer-blue); border-top:1px solid var(--primer-blue); }
.route-accounts::after { content:""; position:absolute; left:-4px; top:calc(25% - 3px); border-left:5px solid var(--primer-blue); border-top:3px solid transparent; border-bottom:3px solid transparent; }
.route-accounts:has([data-account="b"].is-active)::before { top:50%; bottom:25%; border-top:0; border-bottom:1px solid var(--primer-blue); }
.route-accounts:has([data-account="b"].is-active)::after { top:calc(75% - 3px); }
@media(max-width:767px) {
 .route-primer + .route-line { margin-right:0; }
 .route-primer + .route-line::after { display:block; border-top-color:var(--primer-blue); }
 .route-accounts::before,.route-accounts::after { display:none; }
 .route-accounts { display:flex; flex-direction:column; }
 .route-account.is-active { order:-1; }
}

/* A readable, tactile connection diagram in the hero. */
.hero__container { display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:clamp(32px,4vw,80px); }
.hero__copy { pointer-events:auto; }
.hero__visual { min-width:0; width:100%; }
.hero-flow { position:relative; display:grid; grid-template-columns:1fr .9fr 1.18fr; grid-template-rows:1fr 1fr; align-items:center; gap:38px clamp(22px,2.4vw,46px); padding:44px 0; min-height:410px; isolation:isolate; }
.flow-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:-1; }
.flow-wire { fill:none; stroke:#dfe3ee; stroke-width:1.5; }
.flow-wire--selected { stroke:var(--primer-blue); stroke-width:1.8; opacity:.7; }
.flow-packet,.flow-packet-halo { fill:var(--primer-blue); opacity:0; }
.flow-ai { grid-column:1; grid-row:1 / 3; padding:20px 18px; background:#fff; border:1px solid #e2e5ec; border-radius:12px; box-shadow:0 10px 30px #1a245407; }
.flow-ai__name { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--primer-ink); }
.flow-ai__name>span { color:var(--primer-blue); font-size:27px; line-height:1; }
.flow-ai p { margin-top:18px; font-size:15px; line-height:1.6; color:#505969; }
.flow-hub { position:relative; grid-column:2; grid-row:1 / 3; perspective:650px; }
.flow-hub__face { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:158px; padding:24px 12px 18px; border:1px solid #7b84ff; border-radius:19px; background:linear-gradient(135deg,#5260ff 0%,#3445ff 55%,#2838df 100%); box-shadow:inset 0 1px 0 #ffffff70,inset 0 -2px 0 #1e2dc4,4px 3px 0 #202fb5,7px 6px 0 #c9cfff,0 18px 38px #3445ff1a; transform:rotateY(-8deg) rotateX(5deg); }
.flow-hub__face::before { content:""; position:absolute; inset:5px; border:1px solid #ffffff20; border-radius:14px; pointer-events:none; }
.flow-hub img { width:100%; max-width:132px; height:auto; filter:brightness(0) invert(1); }
.flow-hub__face>span { font-size:11px; color:#e3e6ff; margin-top:12px; }
.flow-client { position:relative; display:flex; flex-direction:column; width:100%; padding:20px 18px; background:#fff; border:1px solid #e2e5ec; border-radius:12px; box-shadow:0 6px 20px #1a245404; transition:border-color .2s,background-color .2s; }
.flow-client--a { grid-column:3; grid-row:1; }
.flow-client--b { grid-column:3; grid-row:2; }
.flow-client:hover { border-color:#a6aff8; }
.flow-client.is-selected { border-color:#7d89ff; background:#f8f9ff; }
.flow-client__name { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:15px; font-weight:650; }
.flow-client__check { color:#96a09b; font-size:17px; font-weight:400; }
.flow-client.is-selected .flow-client__check { color:var(--primer-blue); }
.flow-tools { display:flex; flex-wrap:wrap; gap:5px; margin-top:15px; }
.flow-tools>span { padding:4px 6px; background:#f0f2f6; border:1px solid #e6e9ef; border-radius:4px; font-size:10px; color:#5b6373; line-height:1.3; }
.flow-client__state { display:block; margin-top:14px; color:#7a8190; font-size:10px; }
.flow-client.is-selected .flow-client__state { color:var(--primer-blue); }
.hero-flow__hint { color:#7a8190; text-align:center; font-size:12px; line-height:1.6; margin-top:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1800px) {
 .hero-flow { min-height:480px; gap:48px; }
 .flow-ai { padding:26px; }
 .flow-ai p { font-size:18px; }
 .flow-hub__face { min-height:186px; }
 .flow-client { padding:26px; }
 .flow-client__name { font-size:18px; }
 .flow-tools>span { font-size:12px; }
 .flow-client__state { font-size:12px; }
}
@media(min-width:1100px) and (max-width:1249px) {
 .hero__title { font-size:49px; }
 .hero__container { gap:30px; }
 .hero-flow { gap:28px 20px; }
 .flow-ai,.flow-client { padding:16px 12px; }
 .flow-ai p { font-size:13px; }
 .flow-client__name { font-size:14px; }
 .flow-hub__face { min-height:145px; }
}
@media(max-width:1099px) {
 .hero__container { grid-template-columns:1fr; gap:26px; }
 .hero__visual { max-width:760px; margin-inline:auto; }
 .hero-flow { min-height:390px; padding:32px 0; }
 .hero__title { max-width:none; }
 .hero__description { max-width:520px; }
}
@media(max-width:575px) {
 .hero__container { gap:36px; }
 .hero-flow { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto; row-gap:48px; column-gap:18px; padding:8px 0; min-height:0; }
 .flow-ai { grid-column:1 / -1; grid-row:1; justify-self:center; width:84%; padding:19px 21px; }
 .flow-ai p { font-size:15px; margin-top:12px; }
 .flow-hub { grid-column:1 / -1; grid-row:2; justify-self:center; width:165px; }
 .flow-hub__face { min-height:144px; }
 .flow-client--a { grid-column:1; grid-row:3; }
 .flow-client--b { grid-column:2; grid-row:3; }
 .flow-client { padding:18px 13px; align-self:stretch; }
 .flow-client__name { font-size:14px; }
 .flow-client__state { font-size:10px; margin-top:auto; padding-top:15px; }
 .flow-tools { margin-top:13px; }
 .flow-tools>span { font-size:9px; padding:4px 5px; }
 .hero-flow__hint { font-size:11px; margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) { .flow-client { transition:none; } }

/* Shared reading rhythm: one left edge, nearby explanations, consistent columns. */
.hero__title { font-size:clamp(44px,3.65vw,72px); }
.hero__description { max-width:550px; }
.flow-hub__face>span { font-size:11px; text-align:center; line-height:1.5; }
.flow-tools { font-size:13px; color:var(--primer-muted); margin-top:12px; }
.flow-client__state { font-size:12px; line-height:1.5; }
.hero-flow__hint { color:var(--primer-muted); }
.work__intro { max-width:750px; }
.work__intro .intro-detail { max-width:620px; }
.work__list { column-gap:32px; row-gap:64px; }
.work__item:not(.work__item--large) .work__link { display:flex; flex-direction:column; height:100%; }
.work__item:not(.work__item--large) .work__text { min-height:130px; padding:0 0 28px; }
.work__item .work__media { margin:0; }
.work__desc { max-width:560px; font-size:17px; line-height:1.65; }
.work__item--large .work__text { display:block; margin-bottom:28px; }
.work__item--large .work__title { font-size:32px; max-width:none; }
.work__item--large .work__desc { margin-top:14px; max-width:660px; }
.work__note { text-align:left; font-size:13px; line-height:1.65; }
.product-scene { height:330px; padding:36px; }
.setup-preview,.request-preview { width:100%; max-width:400px; min-height:232px; border:1px solid #dfe3ec; border-radius:10px; background:#fff; padding:24px; }
.setup-preview__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:20px; font-size:15px; font-weight:600; }
.setup-preview__heading>span { color:var(--primer-muted); font-size:12px; font-weight:400; }
.setup-client { display:flex; align-items:center; gap:13px; padding:18px 0; border-top:1px solid var(--primer-line); }
.setup-client:last-child { padding-bottom:0; }
.setup-client strong,.setup-client div>span { display:block; }
.setup-client strong { font-size:15px; font-weight:600; }
.setup-client div>span { margin-top:5px; font-size:12px; color:var(--primer-muted); }
.setup-client .live-dot { margin-left:auto; }
.setup-client .client-avatar { width:36px; height:36px; flex-shrink:0; }
.request-preview__heading { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
.request-preview__heading>span { color:var(--primer-blue); font-size:27px; }
.request-preview>p { font-size:21px; line-height:1.55; letter-spacing:-.025em; margin:22px 0; }
.request-preview__source { display:flex; flex-direction:column; align-items:flex-start; gap:12px; border-top:1px solid var(--primer-line); padding-top:20px; }
.request-preview__source img { width:68px; height:auto; }
.request-preview__source>span { font-size:12px; color:var(--primer-muted); }
.routing-flow { max-width:1260px; margin-inline:auto; }
.route-ai-label,.route-node small { font-size:13px; }
.route-account strong { font-size:16px; }
.route-account small { font-size:12px; }
.route-result { font-size:14px; }
.section-intro { max-width:720px; margin-bottom:44px; }
.section-intro>p { margin-top:20px; color:var(--primer-muted); font-size:18px; line-height:1.65; max-width:620px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:34px; }
.feature-item { border-top:1px solid var(--primer-line); padding-top:26px; }
.feature-item .h-3 { font-size:22px; line-height:1.4; }
.feature-item p { color:var(--primer-muted); font-size:17px; line-height:1.65; max-width:560px; margin-top:12px; }
.pricing__intro { display:block; }
.pricing__intro>p { margin-top:20px; max-width:620px; font-size:18px; line-height:1.65; }
.about__text,.faq>.container { column-gap:32px; }
.team-grid { gap:32px; }
.about__text>.t-3 { grid-column:2; }
@media(max-width:1099px) and (min-width:768px) {
 .hero__title { font-size:58px; }
 .work__item:not(.work__item--large) .work__text { min-height:158px; }
 .route-node { padding:20px 14px; }
 .route-node small { font-size:12px; }
 .route-account small { font-size:11px; }
}
@media(max-width:767px) {
 .hero__title { font-size:clamp(32px,8.4vw,48px); }
 .flow-tools { font-size:12px; }
 .flow-client__state { font-size:11px; }
 .work__list { gap:42px; }
 .work__item:not(.work__item--large) .work__text { min-height:0; padding-bottom:22px; }
 .work__item--large .work__text { margin-bottom:22px; }
 .work__item--large .work__title { font-size:25px; line-height:1.25; }
 .work__desc { font-size:16px; }
 .product-scene { height:320px; padding:22px; }
 .setup-preview,.request-preview { padding:20px; }
 .setup-preview__heading { font-size:14px; }
 .setup-preview__heading>span { font-size:11px; }
 .setup-client { gap:10px; }
 .setup-client div>span { font-size:11px; }
 .request-preview>p { font-size:20px; }
 .request-preview__source>span { font-size:11px; }
 .section-intro { margin-bottom:30px; }
 .section-intro>p,.pricing__intro>p { font-size:16px; margin-top:18px; }
 .feature-grid { grid-template-columns:1fr; gap:28px; }
 .feature-item { padding-top:22px; }
 .feature-item .h-3 { font-size:21px; }
 .feature-item p { font-size:16px; }
 .work__note { font-size:12px; }
}


@supports (grid-template-rows:subgrid) {
 .work__list { row-gap:28px; }
 .work__item:not(.work__item--large) { display:grid; grid-template-rows:subgrid; grid-row:span 2; }
 .work__item:not(.work__item--large) .work__link { display:contents; }
 .work__item:not(.work__item--large) .work__text { min-height:0; padding:0; }
 .work__item--large { padding-top:36px; }
 @media(max-width:767px) {
  .work__list { row-gap:22px; }
  .work__item--small,.work__item--large { padding-top:20px; }
 }
}


@media(min-width:768px) and (max-width:1099px) { .setup-preview,.request-preview { min-height:260px; } }

.about__para,.about__text>.t-3 { max-width:620px; }
.faq__list { max-width:760px; }

/* An edge-to-edge brand ribbon with even logo spacing and soft fades. */
.ai-tools { padding:0; }
.ai-tools .container { width:100%; max-width:none; padding:30px 0 32px; border-block:1px solid #e9ecf5; background:#f7f8fc; }
.ai-tools__label { margin:0 0 25px; text-align:center; color:#626a7d; font-size:15px; font-weight:500; line-height:1.5; letter-spacing:0; }
.ai-marquee { width:100%; max-width:none; overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent); }
.ai-marquee__track { display:flex; width:max-content; animation:ai-marquee 34s linear infinite; }
.ai-marquee__group { display:flex; flex:0 0 1320px; width:1320px; min-width:50vw; margin:0; padding:0; list-style:none; }
.ai-marquee__group li { display:flex; align-items:center; justify-content:center; flex:1 0 264px; gap:12px; padding:10px 16px; white-space:nowrap; color:#262b37; font-size:24px; font-weight:550; line-height:1.25; letter-spacing:-.035em; }
.ai-marquee__group img { display:block; width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.ai-marquee__group img[src$="chatgpt.svg"] { width:48px; height:48px; margin:-7px; }
.ai-marquee__group img[src$="cursor.svg"] { width:30px; }
.ai-marquee__group img[src$="codex.svg"] { width:31px; }
@keyframes ai-marquee { to { transform:translateX(calc(-100% / 3)); } }
@media(max-width:767px) {
 .ai-tools .container { padding:24px 0 26px; }
 .ai-tools__label { font-size:13px; padding-inline:18px; margin-bottom:20px; }
 .ai-marquee { mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); }
 .ai-marquee__group { flex-basis:1000px; width:1000px; }
 .ai-marquee__group li { flex-basis:200px; font-size:21px; gap:10px; }
 .ai-marquee__group img { width:29px; height:29px; }
 .ai-marquee__group img[src$="chatgpt.svg"] { width:41px; height:41px; margin:-6px; }
 .ai-marquee__group img[src$="cursor.svg"] { width:26px; }
 .ai-marquee__group img[src$="codex.svg"] { width:27px; }
}
@media(prefers-reduced-motion:reduce) {
 .ai-marquee { mask-image:none; padding-inline:20px; }
 .ai-marquee__track { animation:none; width:100%; }
 .ai-marquee__group { width:100%; flex-basis:100%; flex-wrap:wrap; justify-content:center; gap:18px 28px; }
 .ai-marquee__group li { flex:0 0 auto; padding:5px 0; }
 .ai-marquee__group[aria-hidden] { display:none; }
}