/* Shared CoSens shell, using the existing cosens marketing design. */
/* Shared card and control corner sizes. */
:root{--site-header-height:72px;--cs-radius-card:8px;--cs-radius-control:6px;--cs-radius-inner:4px}
:root{--cs-ink: var(--palette-ink);--cs-muted: var(--palette-muted);--cs-line: var(--palette-line);--cs-paper: var(--palette-surface);--cs-soft: var(--palette-soft);--cs-hover: var(--palette-hover);--cs-hover-line: var(--palette-boundary);--cs-accent: var(--palette-accent);--cs-ease:cubic-bezier(.16,1,.3,1);--bg: var(--palette-bg);--surface: var(--palette-surface);--ink: var(--palette-ink);--muted: var(--palette-muted);--line: var(--palette-line);--soft: var(--palette-soft);--inverse: var(--palette-bg);color-scheme:light dark}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--palette-surface);color:var(--cs-ink);min-width:320px}
.cs-header,.nav.cs-header{position:sticky;top:0;z-index:40;display:block;width:100%;height:var(--site-header-height);min-height:var(--site-header-height);padding:0;margin:0;background:transparent;backdrop-filter:none;border:0;border-bottom:1px solid transparent;font-family:inherit;transition:background-color .2s ease-out,border-color .2s ease-out}
/* Keep the standard property last so React's CSS optimizer retains it. */
.cs-header.is-scrolled,.nav.cs-header.is-scrolled{background:var(--nav-glass-background);-webkit-backdrop-filter:blur(var(--nav-glass-blur));backdrop-filter:blur(var(--nav-glass-blur));border-bottom-color:color-mix(in srgb,var(--palette-line) 70%,transparent)}
@media(prefers-reduced-motion:reduce){.cs-header,.nav.cs-header{transition:none}}
.cs-header-inner{width:min(1200px,calc(100% - 48px));height:100%;margin:auto;display:flex;align-items:center;gap:28px}
.cs-brand,.nav.cs-header .brand{display:inline-flex;align-items:center;font-size:27px;font-weight:650;letter-spacing:-1.3px;line-height:1;text-decoration:none;color:var(--cs-ink);flex-shrink:0}
.cs-wordmark{display:block;width:132px;height:32px;max-width:100%;object-fit:contain;flex-shrink:0}
.cs-navigation,.nav.cs-header .nav-links{position:relative;display:flex;flex:1;align-items:center;justify-content:flex-start;gap:16px;height:100%;min-width:0;order:0;overflow:visible;font-size:14px;font-weight:500;line-height:1.5}
.cs-navigation>a{padding:10px 0;text-decoration:none!important;white-space:nowrap;color:var(--palette-muted);transition:color .2s}
.cs-navigation>a:hover,.cs-navigation>a[aria-current=page]{color:var(--cs-ink)}
.cs-navigation>.cs-nav-link{display:inline-flex;align-items:center;height:40px;padding:0 10px;border-radius:999px}
.cs-button,.cs-navigation .cs-button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--cs-ink);color:var(--palette-ink);padding:11px 19px;font:inherit;font-size:13px;font-weight:600;line-height:1.5;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:0 6px 16px color-mix(in srgb,var(--palette-shadow) 9%,transparent);transition:transform .2s var(--cs-ease),background .2s}
.cs-button:hover{background:var(--palette-surface);transform:translateY(-1px)}
.cs-header .cs-navigation>.cs-button{margin-left:auto}
.cs-header .cs-navigation>.cs-console-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 13px;border:1px solid var(--palette-boundary);border-radius:999px;background:transparent;color:var(--palette-ink);font:inherit;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap;box-shadow:none;opacity:1;transition:background-color .2s var(--cs-ease)}
.cs-header .cs-navigation>.cs-console-button:hover{background:var(--palette-hover)}
.cs-header .cs-navigation>.cs-console-button+.cs-button{margin-left:0}
.cs-console-button svg{display:block;flex:none;width:16px;height:16px}
.cs-menu-toggle{display:none;place-items:center;flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--cs-ink);padding:0;font:inherit;cursor:pointer;line-height:1}
.cs-menu-toggle svg{display:block;width:20px;height:20px}
.cs-menu-toggle path{transform-box:fill-box;transform-origin:center;transition:transform 260ms var(--cs-ease),opacity 160ms ease-out}
.cs-menu-toggle[aria-expanded=true] .cs-menu-line-top{transform:translateY(6px) rotate(45deg)}
.cs-menu-toggle[aria-expanded=true] .cs-menu-line-middle{opacity:0;transform:scaleX(.5)}
.cs-menu-toggle[aria-expanded=true] .cs-menu-line-bottom{transform:translateY(-6px) rotate(-45deg)}
.cs-header :focus-visible,.gateway :focus-visible{outline:3px solid var(--cs-accent);outline-offset:5px}
.cs-logo{display:inline-flex;width:auto;height:auto;font-size:27px;line-height:1}.comparison-wrap .cs-wordmark{margin:0 auto;filter:brightness(0) invert(1)}
/* Static pages keep their demonstrations; typography and spacing follow cosens. */
.wrap{max-width:1248px;padding:0 24px}

.wrap .hero{padding:100px 0 80px;min-height:0;gap:54px}
.wrap .hero h1,.wrap .avatar-page .avatar-hero .avatar-intro h1{font-size:clamp(42px,5vw,68px);line-height:1.05;font-weight:600;letter-spacing:normal;color:var(--cs-ink)}
.wrap .hero h1>span:last-child,.headline-accent{color:inherit}
.wrap .hero p{font-size:17px;line-height:1.7}
.eyebrow,.small-label{font-family:inherit;letter-spacing:.12em;font-size:11px;font-weight:600;color:var(--cs-muted)}
.eyebrow:before{display:none}
.btn{border-radius:999px;padding:13px 22px;font-size:14px;font-weight:600;gap:15px}
.btn.secondary{background:var(--palette-surface)}
.section{padding:104px 0;border-bottom-color:var(--palette-line)}
.section h2,.journey-section h2,.closing h2{font-size:clamp(30px,3.6vw,44px);line-height:1.14;letter-spacing:normal;font-weight:500}
.section h3{font-weight:500;letter-spacing:normal}
.section p{line-height:1.75;font-size:16px}
.section-head p,.journey-steps p{font-size:15px}
.code-window,.demo,.overview-grid,.journey-preview,.api-links,.access-form-panel{border-radius:var(--cs-radius-card);overflow:hidden}
.code-window{box-shadow:0 16px 40px color-mix(in srgb,var(--palette-shadow) 9%,transparent)}
pre,code,.mono{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
.chip{border-radius:999px;padding:6px 10px}
.access-main{padding-top:100px}
.access-form-panel{background:var(--palette-surface);border-color:var(--palette-line);padding:34px}
.access-form-panel input:not([type=checkbox]),.access-form-panel textarea,.search{border-radius:var(--cs-radius-control);background:var(--palette-surface)}
.cs-footer{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:56px 0 24px;border-top:0;background:transparent;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}
.cs-footer .cs-wordmark{width:120px;height:auto}
.cs-footer-inner{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:28px}
.cs-footer-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-width:0;font-size:13px;font-weight:500;line-height:1.5;color:var(--cs-muted)}
.cs-footer-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;color:inherit;text-decoration:none;white-space:nowrap;transition:color .2s}
.cs-footer-nav a:hover{color:var(--cs-ink)}
.cs-footer-copyright{margin:0;text-align:right;color:color-mix(in srgb,var(--cs-muted) 94%,var(--palette-ink));font-size:12px;line-height:1.6}
.cs-footer :focus-visible{outline:3px solid var(--cs-accent);outline-offset:5px}
@media(max-width:1050px){.cs-footer-inner{grid-template-columns:132px minmax(0,1fr)}.cs-footer-copyright{grid-column:1/-1;justify-self:end}}
@media(max-width:700px){.cs-footer{width:calc(100% - 32px);padding:44px 0 20px}.cs-footer-inner{grid-template-columns:minmax(0,1fr);justify-items:start;gap:16px}.cs-footer-nav{justify-content:flex-start;gap:0 20px}.cs-footer-nav a{min-height:40px;padding:0}.cs-footer-copyright{width:100%;justify-self:start;text-align:left}}
/* New homepage: one statement, two complete paths. */
.gateway-hero{text-align:center;padding:112px 24px 76px;max-width:1200px;margin:auto}
.gateway-hero h1{font-size:clamp(46px,6vw,80px);font-weight:600;line-height:1.06;letter-spacing:normal;margin:0 auto;white-space:nowrap}
.gateway-choices{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:100px;isolation:isolate}
.gateway-choice{display:flex;flex-direction:column;min-width:0;height:560px;min-height:560px;padding:38px 38px 0;border:1px solid var(--cs-line);border-radius:var(--cs-radius-card);background:var(--cs-paper);overflow:hidden;transition:transform .35s var(--cs-ease),box-shadow .35s var(--cs-ease),border-color .35s;text-decoration:none}
.gateway-choice:hover{transform:translateY(-5px);border-color:var(--cs-hover-line);box-shadow:0 22px 50px color-mix(in srgb,var(--palette-shadow) 8%,transparent)}
.gateway-choice .choice-label{display:block;color:var(--cs-muted);font-size:14px;font-weight:500;margin-bottom:18px}
.choice-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-bottom:18px;flex:none}
.gateway-choice .choice-header .choice-label{margin-bottom:0}
.gateway-choice h2{font-size:clamp(30px,3vw,40px);line-height:1.13;letter-spacing:normal;font-weight:500;margin:0 0 24px;max-width:410px;min-height:91px;text-wrap:balance}
.choice-action{display:inline-flex;flex:0 0 48px;align-items:center;justify-content:center;align-self:flex-start;width:48px;height:48px;border-radius:50%;background:var(--cs-ink);color:var(--palette-ink);opacity:0;transform:translateY(6px) scale(.9);pointer-events:none;transition:opacity .2s ease,transform .25s var(--cs-ease)}
.choice-action svg{display:block;flex:none}
.gateway-choice:focus-visible .choice-action{opacity:1;transform:none}
@media(hover:hover){.gateway-choice:hover .choice-action{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.choice-action{transition:none;transform:none}}
.choice-media{position:relative;flex:1;min-height:245px;margin:36px -38px 0;overflow:hidden}
.choice-agent .choice-media{display:flex;align-items:stretch;background:var(--cs-soft)}
.choice-agent img{display:block;width:100%;height:100%;aspect-ratio:1400/788;object-fit:cover;object-position:center}
.choice-developer{background:var(--cs-soft)}
.choice-developer .choice-media{display:grid;place-items:center;margin-top:5px}
.choice-developer img{width:100%;height:100%;max-height:305px;object-fit:contain}
@media(min-width:1051px) and (max-width:1250px){.cs-header-inner{gap:20px}.cs-navigation{gap:8px}.cs-navigation>.cs-nav-link{padding-inline:6px}}
@media(max-width:1050px){.cs-navigation,.nav.cs-header .nav-links{gap:18px}.cs-header-inner{gap:20px}.gateway-choice{padding:30px 30px 0;height:520px;min-height:520px}.choice-media{margin-left:-30px;margin-right:-30px}.wrap .hero{gap:28px}}
@media(max-width:1050px){
:root{--site-header-height:64px}.cs-header-inner{width:calc(100% - 32px)}
.cs-menu-toggle{display:grid;margin-left:auto}
.cs-navigation,.nav.cs-header .nav-links{display:flex;position:absolute;top:var(--site-header-height);left:0;right:0;height:auto;flex:none;background:var(--palette-surface);padding:18px 20px 24px;border-bottom:1px solid var(--cs-line);box-shadow:0 18px 30px color-mix(in srgb,var(--palette-shadow) 6%,transparent);flex-direction:column;align-items:stretch;gap:5px;font-size:15px;max-height:calc(100dvh - var(--site-header-height));overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity 180ms ease-in,transform 180ms cubic-bezier(.4,0,1,1),visibility 0s 180ms}
.cs-navigation.is-open,.nav.cs-header .nav-links.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 220ms ease-out,transform 300ms var(--cs-ease),visibility 0s}
.cs-navigation>a{opacity:0;transform:translateY(-5px);transition:opacity 100ms ease-in,transform 150ms ease-in,color .2s ease,background-color .2s ease}
.cs-navigation.is-open>a{opacity:1;transform:translateY(0);transition:opacity 180ms ease-out,transform 260ms var(--cs-ease),color .2s ease,background-color .2s ease;transition-delay:calc(32ms + var(--cs-nav-item,0) * 20ms),calc(32ms + var(--cs-nav-item,0) * 20ms),0s,0s}
.cs-navigation>a:nth-child(2){--cs-nav-item:1}.cs-navigation>a:nth-child(3){--cs-nav-item:2}.cs-navigation>a:nth-child(4){--cs-nav-item:3}.cs-navigation>a:nth-child(5){--cs-nav-item:4}.cs-navigation>a:nth-child(6){--cs-nav-item:5}.cs-navigation>a:nth-child(8){--cs-nav-item:6}.cs-navigation>a:nth-child(9){--cs-nav-item:7}
.cs-navigation>a,.nav.cs-header .nav-links>a,.nav.cs-header .nav-links>a:not(:last-child){display:block!important;font-size:15px;padding:10px 12px;white-space:normal}
.cs-navigation .cs-button,.nav.cs-header .nav-links>.cs-button{display:flex!important;font-size:14px;margin:8px 0 0}
.cs-header .cs-navigation>.cs-button{width:100%;margin:8px 0 0}
.cs-header .cs-navigation>.cs-console-button{display:flex!important;width:100%;margin-top:8px}
.gateway-hero{padding:76px 0 50px}.gateway-hero h1{font-size:clamp(44px,7.3vw,64px)}
.gateway-choices{gap:16px}.gateway-choice{padding:26px 24px 0;height:500px;min-height:500px}.gateway-choice h2{font-size:32px;min-height:108px}.choice-media{margin-left:-24px;margin-right:-24px}
}
@media(max-width:700px){
.wrap{padding:0 16px}.wrap .hero{padding:66px 0 56px;gap:28px;grid-template-columns:1fr}.wrap .hero h1,.wrap .avatar-page .avatar-hero .avatar-intro h1{font-size:clamp(38px,9vw,58px);line-height:1.07}.wrap .hero p{font-size:16px}.wrap .hero-actions{flex-wrap:wrap}
.section{padding:66px 0}.section h2,.journey-section h2,.closing h2{font-size:32px}.section p{font-size:15px}
.gateway-hero{padding:66px 6px 46px}.gateway-hero h1{font-size:clamp(43px,11vw,62px);white-space:normal;text-wrap:balance}
.gateway-choices{grid-template-columns:1fr;padding-bottom:64px;gap:22px}.gateway-choice{padding:30px 28px 0;height:510px;min-height:510px}.gateway-choice h2{font-size:36px;min-height:0;max-width:380px}.gateway-choice .choice-label{margin-bottom:17px}.choice-media{margin-left:-28px;margin-right:-28px;min-height:235px}.choice-developer .choice-media{margin-top:16px}.choice-agent .choice-media{margin-top:30px}
.code-window pre{padding:20px;font-size:11px}.access-main{padding-top:60px}.access-form-panel{padding:24px}
}
@media(prefers-reduced-motion:reduce){.gateway-choice,.cs-button{transition:none}.gateway-choice:hover,.cs-button:hover{transform:none}html{scroll-behavior:auto}}
@keyframes cs-menu-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.cs-menu-toggle path,.cs-navigation,.cs-navigation.is-open,.nav.cs-header .nav-links,.nav.cs-header .nav-links.is-open,.cs-navigation>a,.cs-navigation.is-open>a{transition:none}}
@media(prefers-reduced-motion:reduce){.cs-dropdown-trigger,.cs-chevron,.cs-dropdown-menu,.cs-dropdown-surface{animation:none!important;transition:none!important}}

.skip{z-index:60}
.cs-skip{position:fixed;top:-80px;left:16px;z-index:60;padding:12px 18px;background:var(--palette-surface);color:var(--palette-ink);border-radius:var(--cs-radius-control)}
.cs-skip:focus{top:8px}

/* Use the available heading width first; wrap naturally when the text needs it. */
main :is(h1,h2,h3,h4,h5,h6){min-width:0;max-width:100%;white-space:normal;text-wrap:wrap;overflow-wrap:anywhere}
.gateway-hero h1{white-space:normal;text-wrap:wrap}
.gateway-choice h2{max-width:100%;font-size:1.875rem;text-wrap:wrap}
.wrap .hero h1>span{display:inline;white-space:normal}
.wrap .avatar-page .avatar-intro h1>span{white-space:normal}
.cs-legacy .avatar-section-intro{max-width:100%}
.cs-legacy .access-intro h1{font-size:clamp(2rem,3vw,2.5rem)}
.wrap .avatar-page .avatar-hero .avatar-intro h1{font-size:clamp(2rem,3vw,2.5rem)}
.cs-legacy .avatar-story-copy h3{font-size:1.875rem}

/* Access buttons share label typography and the same arrow across both sites. */
:root :is(a,button).access-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.5;letter-spacing:normal;white-space:nowrap;text-transform:none}
.access-cta .access-cta-label{font:inherit;letter-spacing:inherit;text-transform:inherit}
.access-cta .access-cta-icon{display:block;flex:none;width:1rem;height:1rem;stroke-width:2;pointer-events:none}
/* Text actions share one type scale, including access links beside other actions. */
:root :is(a,button).text-link,:root .cs-legacy :is(a,button).text-link{font-family:inherit;font-size:.8125rem;font-weight:500;line-height:1.5;letter-spacing:normal;gap:.5rem;text-transform:none}
:root :is(a,button).text-link .access-cta-icon{width:1em;height:1em}
.cs-legacy :is(.hero-actions,.journey-cta)>.text-link{margin-top:0}

/* The shared header/footer own their rendering and controls, independent of page CSS. */
.cs-header,.cs-footer{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:normal;text-align:left;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;text-rendering:optimizeLegibility}
.cs-footer{position:relative;z-index:1;isolation:isolate}
.cs-header .cs-button{min-height:44px;padding:11px 19px;border:0;border-radius:999px;background:var(--cs-ink);color:var(--palette-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--palette-shadow) 9%,transparent);text-align:center;appearance:none}
.cs-header .cs-button:hover{background:var(--palette-surface);color:var(--palette-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--palette-shadow) 9%,transparent);transform:translateY(-1px)}
:root :is(.cs-header,.cs-footer) :is(a,button):focus-visible{outline:3px solid var(--cs-accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.cs-header .cs-button,.cs-header .cs-console-button{transition:none}.cs-header .cs-button:hover{transform:none}}

/* Shared native disclosures: hover feedback, reversible grid motion and a calm icon. */
.cs-legacy main details.cs-disclosure > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  border-radius: var(--cs-radius-control);
  transition: background-color .18s ease-out, color .18s ease-out;
}
.cs-legacy main details.cs-disclosure > summary::after { content: none; display: none; }
.cs-legacy main details.cs-disclosure > summary::-webkit-details-marker { display: none; }
.cs-legacy main details.cs-disclosure > .cs-disclosure-region {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  padding: 0;
  gap: 0;
  border: 0;
  transition: grid-template-rows .26s cubic-bezier(.22, 1, .36, 1);
}
.cs-legacy main details.cs-disclosure[data-disclosure-expanded=true] > .cs-disclosure-region {
  grid-template-rows: 1fr;
  transition-duration: .34s;
}
.cs-disclosure-inner {
  display: flow-root;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease-out, transform .26s cubic-bezier(.22, 1, .36, 1);
}
.cs-disclosure[data-disclosure-expanded=true] > .cs-disclosure-region > .cs-disclosure-inner { opacity: 1; transform: none; }
.cs-disclosure-indicator {
  position: relative;
  display: inline-block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--line, var(--cs-line));
  border-radius: 50%;
  color: var(--muted, var(--cs-muted));
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
.cs-disclosure-indicator::before,
.cs-disclosure-indicator::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.cs-disclosure-indicator::after { width: 1px; height: 10px; transform: translate(-50%, -50%) scaleY(1); transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
.cs-disclosure[data-disclosure-expanded=true] > summary > .cs-disclosure-indicator { transform: rotate(180deg); color: var(--sdk-accent, var(--ps-accent-ink, var(--cs-ink))); }
.cs-disclosure[data-disclosure-expanded=true] > summary > .cs-disclosure-indicator::after { transform: translate(-50%, -50%) scaleY(0); }
@media (hover: hover) {
  .cs-legacy main details.cs-disclosure > summary:hover { background: color-mix(in oklab, var(--soft, var(--cs-soft)) 65%, transparent); color: var(--sdk-accent, var(--ps-accent-ink, var(--cs-ink))); }
  .cs-disclosure > summary:hover > .cs-disclosure-indicator { background: var(--surface, var(--cs-paper)); border-color: currentColor; color: inherit; }
}
.cs-legacy main details.cs-disclosure > summary:focus-visible { background: color-mix(in oklab, var(--soft, var(--cs-soft)) 65%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .cs-legacy main details.cs-disclosure > summary,
  .cs-legacy main details.cs-disclosure > .cs-disclosure-region,
  .cs-disclosure-inner,
  .cs-disclosure-indicator,
  .cs-disclosure-indicator::after { transition: none; transform: none; }
}
@media print {
  .cs-legacy main details.cs-disclosure > .cs-disclosure-region { grid-template-rows: 1fr; }
  .cs-disclosure-inner { opacity: 1; transform: none; }
}

/* Homepage choices use one outline and a single, shared content inset. */
.gateway-choices .gateway-choice{position:relative;isolation:isolate;padding-bottom:32px;background:color-mix(in srgb,var(--cs-paper) 24%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:none}
.gateway-choices .gateway-choice:hover{transform:translateY(-5px);box-shadow:none;border-color:var(--cs-hover-line)}
@media(max-width:1050px){.gateway-choices .gateway-choice{padding-bottom:28px}}
@media(max-width:700px){.gateway-choices .gateway-choice{padding-bottom:28px}}
@media(prefers-reduced-motion:reduce){.gateway-choices .gateway-choice:hover{transform:none}}

/* The Technology pill's warm orbit, masked to a stationary rounded card edge. */
@property --cs-card-border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.gateway-choices .gateway-choice::before{
  content:"";position:absolute;z-index:3;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--cs-card-border-angle),color-mix(in srgb,var(--palette-tint) 22%,transparent) 0deg 205deg,color-mix(in srgb,var(--palette-tint) 38%,transparent) 242deg,color-mix(in srgb,var(--palette-tint) 68%,transparent) 286deg,var(--palette-brand) 320deg,color-mix(in srgb,var(--palette-tint) 72%,transparent) 344deg,color-mix(in srgb,var(--palette-tint) 22%,transparent) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .2s ease-out;animation:cs-card-border-orbit 5.2s linear infinite paused;
}
@media(hover:hover){
  .gateway-choices .gateway-choice:hover{border-color:transparent}
  .gateway-choices .gateway-choice:hover::before{opacity:1;animation-play-state:running}
}
@keyframes cs-card-border-orbit{to{--cs-card-border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.gateway-choices .gateway-choice::before{animation:none;transition:none;--cs-card-border-angle:320deg}}

/* Shared material tones used by the homepage figures. */
:root{--cs-figure-dark:var(--palette-brand);--cs-figure-edge:var(--palette-brand)}

/* Both homepage diagrams share the same transmission-line treatment. */
:root{--cs-wire-color:var(--palette-boundary);--cs-signal-color:var(--palette-brand);--cs-wire-width:1px;--cs-signal-width:1.5px;--cs-signal-duration:1.8s}