.tf-software {
  /* Surfaces, light */
  --sw-paper:#f7f8fb;
  --sw-surface-raised:#fbfcfd;
  --sw-surface-soft:#f1f5fa;
  --sw-surface-tint:#eaf1f8;
  --sw-surface-accent:#e5edf6;
  --sw-accent-soft:#dceafa;
  /* Surfaces, dark */
  --sw-ink:#071728;
  --sw-ink-raised:#0b1d30;
  --sw-ink-accent:#10273d;
  --sw-ink-panel:#1e364c;
  /* Lines */
  --sw-line-soft:#e4eaf0;
  --sw-line:#dce5ee;
  --sw-line-strong:#c9d7e2;
  --sw-line-dark:#ffffff1c;
  /* Text on light */
  --sw-text-strong:#17334b;
  --sw-text-lead:#3a4f62;
  --sw-text:#526271;
  --sw-text-muted:#637587;
  /* Text on dark */
  --sw-text-dark-strong:#f3f8fd;
  --sw-text-dark:#c4d6e6;
  --sw-text-dark-muted:#a5bbce;
  --sw-text-dark-subtle:#8ba5bb;
  --sw-accent-on-dark:#7db9f2;
  /* Dark hero surface */
  --sw-hero-ink:#04101c;
  --sw-hero-ink-mid:#0a2034;
  --sw-hero-ink-edge:#10293f;
  --sw-hero-glow-a:#1d5a9e52;
  --sw-hero-glow-b:#12406f5c;
  /* Accents */
  --sw-teal:#55d5c8;
  /* Radius scale */
  --sw-r-xs:8px;
  --sw-r-sm:12px;
  --sw-r-md:20px;
  --sw-r-lg:24px;
  /* Elevation scale */
  --sw-shadow-sm:0 2px 8px #2d5e8510;
  --sw-shadow-md:0 12px 30px #2d648515;
  --sw-shadow-lg:0 24px 64px #0b365d1c;
  --sw-glow-blue:0 0 20px #228de93b;
  --sw-glow-teal:0 0 12px #55d5c860;
  /* Type scale */
  --sw-fs-display:clamp(40px,4.5vw,68px);
  --sw-fs-hero:clamp(42px,4.6vw,70px);
  --sw-fs-hero-sm:clamp(38px,7.2vw,56px);
  --sw-fs-h2:clamp(29px,3vw,44px);
  --sw-fs-h3:clamp(25px,2.6vw,38px);
  --sw-fs-feature:30px;
  --sw-fs-h4:23px;
  --sw-fs-h5:20px;
  --sw-fs-lead:clamp(18px,1.5vw,22px);
  --sw-fs-body:15px;
  --sw-fs-sm:14px;
  --sw-fs-xs:13px;
  --sw-fs-2xs:11px;
  --sw-fs-3xs:10px;
  --sw-fs-micro:9px;
  /* Section rhythm */
  --sw-section-y:88px;
  --sw-section-y-tight:64px;
  --sw-section-y-sm:56px;
}
.sw-main { padding-top:var(--nav-height); }
.sw-main h1,.sw-main h2,.sw-main h3 { font-family:Manrope,Geist,sans-serif; }
.sw-main h1 { font-size:var(--sw-fs-display); line-height:1.08; letter-spacing:-.055em; margin:18px 0 28px; font-weight:650; }
.sw-main h1 span { color:var(--blue); }
.sw-main h2 { font-size:var(--sw-fs-h2); line-height:1.15; letter-spacing:-.04em; margin:12px 0 22px; }
.sw-main h3 { font-size:var(--sw-fs-h4); line-height:1.25; letter-spacing:-.025em; }
.sw-main p { color:var(--sw-text); }
.sw-main .eyebrow { font-size:var(--sw-fs-2xs); color:var(--blue); letter-spacing:.13em; }
.sw-main .sw-lead { font-size:var(--sw-fs-lead); line-height:1.65; color:var(--sw-text-lead); }
.sw-main .sw-small { font-size:var(--sw-fs-xs); line-height:1.7; color:var(--sw-text-muted); }
.sw-measure { max-width:750px; }
.sw-navigation { position:sticky; top:var(--nav-height); z-index:40; background:#f9f9fbef; backdrop-filter:blur(14px); border-bottom:1px solid var(--sw-line); }
.sw-navigation>.container { display:flex; align-items:center; justify-content:space-between; gap:32px; min-height:62px; }
.sw-division-name { font-size:var(--sw-fs-body); font-weight:650; white-space:nowrap; }
.sw-division-name span { color:var(--blue); }
.sw-navigation-links { display:flex; gap:28px; overflow-x:auto; scrollbar-width:thin; }
.sw-navigation-links a { white-space:nowrap; font-size:12px; padding:19px 0; color:var(--sw-text-muted); border-bottom:2px solid transparent; }
.sw-navigation-links a:hover,.sw-navigation-links a[aria-current=page] { color:var(--blue); border-color:var(--blue); }
.sw-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; padding-block:var(--sw-section-y-tight) var(--sw-section-y); }
.sw-hero-copy>p:not(.eyebrow) { max-width:510px; }
.sw-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:32px; }
.sw-text-link { display:inline-flex; align-items:center; gap:8px; font-size:var(--sw-fs-sm); font-weight:600; color:var(--blue); }
.sw-text-link:hover { color:#00427d; text-decoration:underline; text-underline-offset:5px; }
.sw-hero-note { display:flex; gap:16px; align-items:center; margin-top:40px; font-size:var(--sw-fs-3xs); letter-spacing:.16em; color:var(--sw-text-muted); }
.sw-hero-note i { width:22px; height:1px; background:#b9c8d5; }
.sw-demo { background:linear-gradient(145deg,var(--sw-ink-accent),var(--sw-ink)); color:#fff; border-radius:var(--sw-r-lg); overflow:hidden; box-shadow:var(--sw-shadow-lg); }
.sw-demo-bar { display:flex; justify-content:space-between; gap:16px; align-items:center; background:#ffffff05; border-bottom:1px solid #ffffff12; padding:17px 24px; font-size:var(--sw-fs-2xs); color:var(--sw-text-dark); }
.sw-demo-bar>span:first-child { display:flex; gap:9px; align-items:center; }
.sw-demo-bar i { display:inline-block; width:6px; height:6px; border-radius:100%; background:var(--sw-teal); box-shadow:var(--sw-glow-teal); }
.sw-demo-body { padding:26px; }
.sw-demo-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sw-micro { font-size:var(--sw-fs-micro); letter-spacing:.12em; font-weight:500; color:var(--sw-text-dark-subtle); }
.sw-demo h3 { margin:8px 0 18px; color:#fff; font-size:24px; }
.sw-demo-badge { font-size:var(--sw-fs-3xs); color:#83e1d7; background:#55d5c815; border-radius:var(--sw-r-md); padding:5px 10px; }
.sw-demo-select { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--sw-fs-2xs); color:#b4c7d7; }
.sw-demo-select select { max-width:67%; font:inherit; color:#fff; background:#193146; border:1px solid #3c566b; border-radius:var(--sw-r-xs); padding:8px; }
.sw-sample-order { display:flex; flex-direction:column; gap:3px; border-left:2px solid #6baff5; padding:9px 14px; margin-top:18px; background:#ffffff05; }
.sw-sample-order>span { font-size:var(--sw-fs-micro); letter-spacing:.09em; color:var(--sw-text-dark-subtle); }
.sw-sample-order strong { font-size:var(--sw-fs-xs); font-weight:500; }
.sw-sample-order strong span { color:var(--sw-text-dark-muted); margin-left:10px; }
.sw-sample-order small { font-size:var(--sw-fs-3xs); color:var(--sw-text-dark-subtle); }
.sw-agent-steps { margin:18px 0; padding:0; list-style:none; }
.sw-agent-steps li { position:relative; display:flex; gap:12px; align-items:center; padding:10px 0; }
.sw-agent-steps li:not(:last-child)::after { position:absolute; content:""; top:44px; left:17px; width:1px; height:16px; background:#39526a; }
.sw-node-icon { width:36px; height:36px; display:grid; place-items:center; background:var(--sw-ink-panel); border:1px solid #3a5267; border-radius:var(--sw-r-sm); color:#8db8e5; flex-shrink:0; transition:background .25s,color .25s; }
.sw-node-icon svg { width:18px; height:18px; }
.sw-agent-steps strong { display:block; font-size:12px; font-weight:550; color:#eaf4ff; }
.sw-agent-steps small { display:block; font-size:var(--sw-fs-3xs); line-height:1.4; color:var(--sw-text-dark-muted); margin-top:3px; }
.sw-step-state { margin-left:auto; font-size:var(--sw-fs-3xs); color:var(--sw-text-dark-subtle); }
.sw-agent-steps .is-active .sw-node-icon { background:#1760a4; color:white; box-shadow:var(--sw-glow-blue); }
.sw-agent-steps .is-complete .sw-node-icon { background:#1a4b49; color:#8aeadb; border-color:#3c8b7e; }
.sw-agent-steps .needs-review .sw-node-icon { background:#665129; color:#ffdc9a; border-color:#97793d; }
.sw-demo .sw-demo-status { min-height:42px; font-size:12px; line-height:1.65; color:var(--sw-text-dark); margin:16px 0; }
.sw-demo-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.sw-demo .button { font-size:12px; padding:12px 16px; background:#d9f7f2; color:#10392f; border:0; cursor:pointer; }
.sw-demo .button:hover { background:white; }
.sw-demo .button[hidden] { display:none; }
.sw-demo .button:disabled { opacity:.6; cursor:wait; }
.sw-reset { padding:10px; border:0; background:transparent; color:#b4c7d7; font:inherit; font-size:var(--sw-fs-2xs); cursor:pointer; }
.sw-demo .sw-demo-disclaimer { margin:17px 0 0; font-size:var(--sw-fs-3xs); color:var(--sw-text-dark-muted); line-height:1.6; }
.sw-proof-strip { padding:30px 0; border-block:1px solid var(--sw-line); background:#fff; }
.sw-proof-strip>.container { display:flex; gap:40px; align-items:center; justify-content:space-between; }
.sw-proof-strip p { font-size:12px; line-height:1.6; margin:0; }
.sw-proof-strip>.container>div { display:flex; align-items:center; gap:48px; }
.sw-proof-strip img { width:106px; height:40px; object-fit:contain; }
.sw-section { padding-block:var(--sw-section-y); }
.sw-section-heading { display:flex; gap:60px; align-items:flex-end; justify-content:space-between; margin-bottom:40px; }
.sw-section-heading h2 { margin-bottom:0; }
.sw-section-heading>p { max-width:390px; font-size:16px; margin:0; }
.sw-capability-grid { display:grid; grid-template-columns:repeat(var(--sw-capability-count,2),minmax(0,1fr)); gap:22px; }
/* A door groups the services that answer the same arriving problem. The count
   drives the columns, so adding a service or moving one between doors needs no
   layout change. */
.sw-door + .sw-door { margin-top:54px; }
.sw-door-head { display:flex; flex-wrap:wrap; gap:10px 40px; align-items:baseline; justify-content:space-between; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--sw-line); }
.sw-door-head h3 { font-size:var(--sw-fs-h4); margin:0; color:var(--sw-text-strong); }
.sw-door-head p { max-width:56ch; margin:0; font-size:var(--sw-fs-sm); color:var(--sw-text-muted); }
.sw-capability { position:relative; display:grid; grid-template-columns:52px 1fr; align-items:start; column-gap:20px; padding:32px; background:white; border:1px solid var(--sw-line-soft); border-radius:var(--sw-r-md); transition:transform .2s,box-shadow .2s; }
.sw-capability:nth-child(2),.sw-capability:nth-child(3) { background:var(--sw-surface-tint); }
.sw-capability h3 { margin:0 35px 12px 0; }
.sw-capability p { margin:0; max-width:350px; font-size:var(--sw-fs-body); }
.sw-capability-icon { width:52px; height:52px; display:grid; place-items:center; color:var(--blue); background:var(--sw-accent-soft); border-radius:var(--sw-r-sm); }
.sw-card-arrow { position:absolute; right:28px; top:30px; color:var(--blue); font-size:24px; }
.sw-capability-note { grid-column:2; font-size:var(--sw-fs-2xs); margin-top:28px; color:var(--sw-text-muted); }
.sw-capability:hover { transform:translateY(-4px); box-shadow:var(--sw-shadow-md); }
.sw-agent-story { background:var(--sw-ink-raised); padding:var(--sw-section-y-tight) 0; }
.sw-split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.sw-agent-story h2 { color:#fff; }
.sw-agent-story p,.sw-agent-story .sw-lead { color:var(--sw-text-dark); }
.sw-agent-story .eyebrow { color:#88bff2; }
.sw-agent-story .button { margin-top:20px; }
.sw-image-panel { position:relative; border-radius:var(--sw-r-lg); overflow:hidden; }
.sw-image-panel img { width:100%; display:block; aspect-ratio:1.12; object-fit:cover; }
.sw-image-panel span { position:absolute; bottom:0; inset-inline:0; padding:24px; font-size:12px; color:#c1e9ff; background:linear-gradient(transparent,var(--sw-ink)); text-align:center; }
.sw-case-feature { display:grid; grid-template-columns:1.1fr 1fr; gap:54px; align-items:center; }
.sw-case-art { display:block; overflow:hidden; border-radius:var(--sw-r-md); background:var(--sw-ink-raised); }
.sw-case-art img { display:block; width:100%; height:auto; }
.sw-case-feature h3 { font-size:var(--sw-fs-feature); margin:16px 0; }
.sw-tag,.sw-chips span { display:inline-flex; padding:6px 12px; border-radius:var(--sw-r-xs); background:var(--sw-surface-accent); color:#3a5b78; font-size:var(--sw-fs-2xs); }
.sw-check-list { list-style:none; padding:0; margin:26px 0; }
.sw-check-list li { position:relative; padding-left:25px; margin-bottom:14px; font-size:var(--sw-fs-sm); color:var(--sw-text); }
.sw-check-list li::before { content:"✓"; position:absolute; left:0; color:var(--blue); }
.sw-method { padding:var(--sw-section-y) 0; background:var(--sw-surface-tint); }
.sw-process { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:0; list-style:none; }
.sw-process>li { border-top:1px solid var(--sw-line-strong); padding-top:20px; }
.sw-process>li>span { font-size:12px; color:var(--blue); }
.sw-process h3 { font-size:var(--sw-fs-h5); margin:20px 0 12px; }
.sw-process p { font-size:var(--sw-fs-sm); }
.sw-platforms { display:flex; gap:70px; align-items:center; margin:36px 0; }
.sw-platforms img { width:136px; height:52px; object-fit:contain; }
.sw-end-cta { padding:48px; margin-top:20px; margin-bottom:80px; background:#0c2846; border-radius:var(--sw-r-lg); display:flex; align-items:center; justify-content:space-between; gap:48px; }
.sw-end-cta h2 { color:#fff; }
.sw-end-cta .eyebrow { color:#8ac3fa; }
.sw-end-cta p { color:var(--sw-text-dark); max-width:550px; }
.sw-end-cta .button { flex-shrink:0; background:#fff; color:var(--blue); }
.sw-detail-hero { padding-top:64px; padding-bottom:48px; }
.sw-back { display:inline-block; margin-bottom:28px; font-size:12px; color:var(--sw-text-muted); }
.sw-detail-intro { display:grid; grid-template-columns:1.25fr 1fr; gap:80px; align-items:center; }
.sw-detail-intro .button { margin-top:24px; }
.sw-blueprint { background:linear-gradient(135deg,var(--sw-ink-raised),#163c60); padding:42px; border-radius:var(--sw-r-lg); color:#fff; }
.sw-blueprint-icon { display:grid; place-items:center; width:70px; height:70px; border-radius:var(--sw-r-md); background:#215280; color:#b7dcff; margin-bottom:24px; }
.sw-blueprint-icon svg { width:36px; height:36px; }
.sw-blueprint .sw-micro { color:var(--sw-text-dark-muted); }
.sw-blueprint ol { list-style:none; margin:28px 0 0; padding:0; }
.sw-blueprint li { display:flex; gap:16px; padding:18px 0; border-top:1px solid #ffffff21; font-size:var(--sw-fs-body); }
.sw-blueprint li>span { color:#79b6ed; font-size:var(--sw-fs-2xs); }
.sw-detail-body { display:grid; grid-template-columns:1.55fr 1fr; gap:80px; }
.sw-detail-capabilities { margin-top:42px; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.sw-detail-capabilities section { padding-top:22px; border-top:1px solid var(--sw-line); }
.sw-detail-capabilities h3 { font-size:var(--sw-fs-h5); }
.sw-detail-capabilities p { font-size:var(--sw-fs-sm); }
.sw-deliverables { align-self:start; background:var(--sw-surface-tint); padding:36px; border-radius:var(--sw-r-md); }
.sw-deliverables>p:last-child { font-size:12px; }
.sw-example { background:var(--sw-ink-raised); padding:var(--sw-section-y-tight) 0; }
.sw-example .eyebrow { color:#78baf5; }
.sw-example h2 { color:#fff; font-size:var(--sw-fs-h3); max-width:1000px; }
.sw-example .sw-text-link { color:#9bcfff; }
.sw-faq { display:grid; grid-template-columns:1fr 1.35fr; gap:70px; }
.sw-faq details { border-top:1px solid var(--sw-line); }
.sw-faq summary { display:flex; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; list-style:none; font-weight:600; font-size:16px; }
.sw-faq summary::-webkit-details-marker { display:none; }
.sw-faq summary>span { color:var(--blue); }
.sw-faq details p { padding-bottom:20px; font-size:var(--sw-fs-body); }
.sw-demo-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; padding-block:20px var(--sw-section-y-tight); }
.sw-principles { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.sw-principles article { border-top:2px solid #72aee4; padding-top:20px; }
.sw-principles p { font-size:var(--sw-fs-sm); }
.sw-work-feature { padding-bottom:20px; }
.sw-work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sw-work-grid article { border:1px solid var(--sw-line); background:#fff; padding:28px; border-radius:var(--sw-r-md); }
.sw-work-grid .testimonial-heading img { width:100px; height:54px; object-fit:contain; max-width:42%; }
.sw-work-grid h3 { font-size:var(--sw-fs-h4); }
.sw-work-grid p { font-size:var(--sw-fs-sm); }
.sw-chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.sw-case-cover { max-width:1000px; }
.sw-case-cover img { width:100%; display:block; border-radius:var(--sw-r-lg); }
.sw-case-narrative { display:grid; grid-template-columns:250px 1fr; gap:75px; }
.sw-case-narrative aside { align-self:start; position:sticky; top:175px; }
.sw-case-narrative aside a { display:block; margin:18px 0; font-size:var(--sw-fs-xs); color:var(--sw-text); }
.sw-case-narrative section { padding-bottom:38px; }
.sw-case-narrative section p { font-size:18px; line-height:1.85; }
/* Media the editor placed inside a case study. Figures come from the block
   editor, so the theme styles them rather than shipping editor stylesheets. */
.sw-case-narrative figure { margin:32px 0; }
.sw-case-narrative figure img,.sw-case-narrative figure video { display:block; width:100%; height:auto; border-radius:var(--sw-r-md); border:1px solid var(--sw-line); background:var(--sw-ink-raised); }
.sw-case-narrative figcaption,.sw-case-narrative .wp-element-caption { margin-top:12px; font-size:var(--sw-fs-xs); line-height:1.65; color:var(--sw-text-muted); }
.sw-case-narrative img,.sw-case-narrative video { max-width:100%; }
.sw-case-narrative .wp-block-image,.sw-case-narrative .wp-block-video { max-width:100%; }
.sw-case-narrative .wp-block-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.sw-case-narrative .wp-block-gallery figure { margin:0; }
.sw-case-narrative .wp-block-embed__wrapper iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:var(--sw-r-md); }
.sw-inquiry-layout { display:grid; grid-template-columns:.75fr 1.3fr; gap:80px; padding-block:20px var(--sw-section-y); }
.sw-inquiry-layout aside { align-self:start; }
.sw-inquiry-layout aside ol { padding-left:22px; margin:30px 0; }
.sw-inquiry-layout aside li { padding-left:5px; margin:18px 0; color:var(--sw-text); font-size:var(--sw-fs-sm); }
.sw-inquiry-form { padding:38px; background:#fff; border:1px solid var(--sw-line); border-radius:var(--sw-r-lg); }
.sw-inquiry-form fieldset { border:0; padding:0; margin:0 0 32px; min-width:0; }
.sw-inquiry-form legend { width:100%; font-size:19px; font-weight:600; color:var(--ink); padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--sw-line-soft); }
.sw-inquiry-form label { display:block; font-size:var(--sw-fs-xs); color:var(--sw-text); margin-bottom:18px; }
.sw-inquiry-form input:not([type=checkbox]),.sw-inquiry-form textarea,.sw-inquiry-form select { display:block; width:100%; padding:12px; border:1px solid var(--sw-line-strong); border-radius:var(--sw-r-xs); background:var(--sw-surface-raised); color:var(--sw-text-strong); font:inherit; font-size:var(--sw-fs-body); margin-top:7px; }
.sw-inquiry-form textarea { resize:vertical; min-height:100px; }
.sw-inquiry-form :is(input,select,textarea):focus-visible { outline:2px solid #025ebc; outline-offset:2px; }
.sw-form-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sw-inquiry-form .sw-consent { display:flex; gap:12px; align-items:flex-start; font-size:12px; line-height:1.6; }
.sw-consent input { margin-top:4px; flex-shrink:0; }
.sw-inquiry-form button { border:0; cursor:pointer; }
.sw-inquiry-form button:disabled { opacity:.55; cursor:wait; }
.sw-inquiry-form .sw-form-status { font-size:var(--sw-fs-sm); margin-top:18px; }
.sw-form-status.is-success { color:#17674f; }
.sw-inquiry-form .sw-form-status.is-error { color:#a32f2f; }
.sw-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.tf-software .footer-cta { display:none; }
.sw-main :is(a,button,summary):focus-visible { outline:2px solid #2188e0; outline-offset:4px; }
.sw-main [id] { scroll-margin-top:155px; }
@media(max-width:1100px) {
 .sw-hero { gap:34px; padding-top:50px; }
 .sw-demo-body { padding:20px; }
 .sw-demo-bar { padding:16px 20px; }
 .sw-proof-strip>.container { flex-wrap:wrap; }
 .sw-proof-strip>.container>div { gap:32px; }
 .sw-detail-intro,.sw-detail-body,.sw-demo-section,.sw-split,.sw-case-feature,.sw-inquiry-layout { gap:40px; }
 .sw-work-grid { grid-template-columns:1fr; }
}
@media(max-width:809px) {
 .sw-navigation { top:var(--nav-height); }
 .sw-navigation>.container { display:block; padding-top:12px; }
 .sw-division-name { font-size:12px; }
 .sw-navigation-links { gap:24px; }
 .sw-navigation-links a { padding:12px 0; font-size:var(--sw-fs-2xs); }
 .sw-hero,.sw-detail-intro,.sw-detail-body,.sw-split,.sw-case-feature,.sw-faq,.sw-demo-section,.sw-case-narrative,.sw-inquiry-layout { grid-template-columns:1fr; }
 .sw-hero { padding-block:40px var(--sw-section-y-sm); }
 .sw-main h1 { font-size:44px; }
 .sw-hero-copy>p:not(.eyebrow) { max-width:650px; }
 .sw-hero-note { margin-top:24px; }
 .sw-section { padding-block:var(--sw-section-y-sm); }
 .sw-section-heading { display:block; margin-bottom:28px; }
 .sw-section-heading>p,.sw-section-heading>a { margin-top:22px; }
 .sw-capability-grid { grid-template-columns:1fr; } .sw-door + .sw-door { margin-top:38px; }
 .sw-proof-strip>.container { gap:24px; }
 .sw-proof-strip>.container>div { width:100%; justify-content:space-between; gap:20px; }
 .sw-proof-strip img { width:90px; }
 .sw-process,.sw-principles { grid-template-columns:1fr 1fr; }
 .sw-platforms { gap:25px; flex-wrap:wrap; }
 .sw-platforms img { width:calc(50% - 25px); }
 .sw-agent-story,.sw-method { padding-block:var(--sw-section-y-sm); }
 .sw-end-cta { padding:30px; display:block; margin-bottom:50px; }
 .sw-end-cta .button { margin-top:20px; }
 .sw-detail-hero { padding-top:40px; }
 .sw-detail-capabilities { gap:22px; }
 .sw-case-narrative aside { position:static; display:none; }
 .sw-inquiry-layout { gap:24px; }
 .sw-inquiry-form { padding:24px; }
 .sw-main [id] { scroll-margin-top:190px; }
}
@media(max-width:480px) {
 .sw-main h1 { font-size:39px; }
 .sw-main .sw-lead { font-size:18px; }
 .sw-demo-body { padding:20px 16px; }
 .sw-demo-bar { padding:14px 16px; font-size:var(--sw-fs-3xs); }
 .sw-demo-select { display:block; }
 .sw-demo-select select { display:block; max-width:none; width:100%; margin-top:8px; }
 .sw-demo-top h3 { font-size:var(--sw-fs-h4); }
 .sw-agent-steps li { gap:9px; }
 .sw-agent-steps small { max-width:175px; }
 .sw-step-state { font-size:var(--sw-fs-micro); }
 .sw-capability { padding:24px; grid-template-columns:40px 1fr; gap:14px; }
 .sw-capability-icon { width:40px; height:40px; border-radius:var(--sw-r-sm); }
 .sw-capability h3 { font-size:var(--sw-fs-h5); }
 .sw-capability-note { grid-column:1/-1; margin-top:14px; }
 .sw-card-arrow { top:20px; right:20px; }
 .sw-process,.sw-principles,.sw-detail-capabilities,.sw-form-columns { grid-template-columns:1fr; }
 .sw-blueprint { padding:28px; }
 .sw-deliverables { padding:26px; }
}
@media(prefers-reduced-motion:reduce) { .sw-capability,.sw-node-icon { transition:none; } .sw-capability:hover { transform:none; } }

/* Independent software site shell; the logo and parent link return to TechFoundry. */
.tf-software .sw-site-header { background:#fff; border-bottom:1px solid var(--sw-line-soft); }
.sw-site-header .nav-inner { width:min(100% - 64px,1440px); gap:22px; }
.sw-site-header .nav-links { gap:12px; }
.sw-site-header .nav-links>li>a,.sw-site-header .solutions-toggle { font-size:var(--sw-fs-sm); padding:10px 8px; }
.sw-site-header .brand-descriptor { letter-spacing:.015em; }
.sw-site-header .sw-parent-link { border-left:1px solid var(--sw-line); padding-left:12px; margin-left:2px; }
.sw-site-header .sw-parent-link a { color:var(--sw-text-muted); }
.sw-site-header .sw-mobile-contact { display:none; }
.sw-site-header .sw-services-menu { width:600px; grid-template-columns:1fr 1fr; padding:14px; gap:6px; background:#fff; }
.sw-site-header .sw-services-menu:not([hidden]) { display:grid; }
.sw-site-header .sw-services-menu li { min-width:0; }
.sw-site-header .sw-services-menu a { display:flex; align-items:flex-start; gap:12px; padding:18px; min-height:120px; border-radius:var(--sw-r-sm); background:var(--sw-surface-soft); color:var(--sw-text-strong); }
.sw-site-header .sw-services-menu a:hover { background:var(--sw-surface-accent); color:#025ebc; }
.sw-services-menu strong { display:block; font-size:var(--sw-fs-sm); margin-bottom:7px; }
.sw-services-menu small { display:block; font-size:var(--sw-fs-2xs); line-height:1.6; font-weight:400; color:var(--sw-text-muted); }
.sw-menu-icon { color:#025ebc; flex-shrink:0; }
.sw-site-footer { background:var(--sw-ink-raised); color:var(--sw-text-dark); padding:60px 0 22px; }
.sw-footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:70px; padding-bottom:44px; }
.sw-site-footer .eyebrow { color:#88bff2; font-size:var(--sw-fs-3xs); }
.sw-footer-intro h2 { color:white; font-size:32px; line-height:1.2; letter-spacing:-.035em; margin:18px 0; }
.sw-footer-intro p:not(.eyebrow) { max-width:320px; font-size:var(--sw-fs-sm); color:var(--sw-text-dark-muted); }
.sw-footer-intro>a { display:inline-block; margin-top:12px; color:#93caff; }
.sw-site-footer h3 { color:#fff; font-size:var(--sw-fs-sm); margin-bottom:22px; }
.sw-site-footer ul { padding:0; margin:0; list-style:none; }
.sw-site-footer li { margin:13px 0; font-size:var(--sw-fs-sm); }
.sw-site-footer a:hover { color:white; text-decoration:underline; text-underline-offset:4px; }
.sw-site-footer a:focus-visible { outline:2px solid #93caff; outline-offset:5px; }
.sw-footer-base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding-top:20px; border-top:1px solid var(--sw-line-dark); font-size:var(--sw-fs-2xs); color:var(--sw-text-dark-muted); }
.sw-main [id] { scroll-margin-top:calc(var(--nav-height) + 24px); }
.sw-case-narrative aside { top:calc(var(--nav-height) + 32px); }
@media (max-width:1250px) and (min-width:1101px) { .sw-site-header .nav-inner { width:calc(100% - 40px); gap:12px; } .sw-site-header .nav-links { gap:3px; } .sw-site-header .nav-links>li>a,.sw-site-header .solutions-toggle { font-size:12px; } .sw-site-header .nav-contact { padding:12px; font-size:12px; } }
@media(max-width:1100px) {
 .sw-site-header .nav-inner { width:calc(100% - 48px); gap:0; }
 .sw-site-header .nav-links { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
 .sw-site-header .nav-links>li>a,.sw-site-header .solutions-toggle { font-size:16px; padding:12px 8px; display:flex; }
 .sw-site-header .sw-mobile-contact { display:block; }
 .sw-site-header .sw-mobile-contact a { color:#025ebc; font-weight:650; }
 .sw-site-header .sw-parent-link { border-left:0; padding-left:0; margin:8px 0 0; border-top:1px solid var(--sw-line-soft); padding-top:8px; }
 .sw-site-header .sw-services-menu { width:100%; position:static; grid-template-columns:1fr 1fr; box-shadow:none; padding:4px; }
 .sw-site-header .sw-services-menu a { min-height:110px; }
 .sw-site-header.is-open { max-height:100dvh; overflow:auto; }
 .sw-footer-grid { gap:35px; }
}
@media(max-width:650px) { .sw-footer-grid { grid-template-columns:1fr 1fr; gap:32px 22px; } .sw-footer-intro { grid-column:1/-1; } .sw-site-header .sw-services-menu { grid-template-columns:1fr; } .sw-site-header .sw-services-menu a { min-height:0; padding:14px; } .sw-footer-base { display:block; } .sw-footer-base>* { display:block; margin:12px 0; } }
.sw-logo-chips>span { background:#fff; border:1px solid var(--sw-line); color:var(--sw-text-strong); font-size:var(--sw-fs-xs); padding:12px 16px; gap:9px; align-items:center; border-radius:var(--sw-r-sm); }
.sw-logo-chips img { width:22px; height:22px; object-fit:contain; }
.sw-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.sw-portfolio-card { display:block; border:1px solid var(--sw-line-soft); border-radius:var(--sw-r-md); overflow:hidden; background:white; transition:transform .2s,box-shadow .2s; }
.sw-portfolio-card>img { width:100%; aspect-ratio:1.65; object-fit:cover; display:block; }
.sw-portfolio-card>div { padding:24px; }
.sw-portfolio-card h3 { display:flex; justify-content:space-between; gap:14px; margin:18px 0 12px; }
.sw-portfolio-card h3>span { color:var(--blue); }
.sw-portfolio-card p { font-size:var(--sw-fs-sm); margin-bottom:0; }
.sw-portfolio-card:hover { transform:translateY(-4px); box-shadow:var(--sw-shadow-md); }
.sw-more-work { padding-top:0; }
.sw-portfolio-narrative { max-width:850px; }
.sw-portfolio-narrative>section { margin-bottom:42px; }
.sw-portfolio-narrative p { font-size:18px; line-height:1.85; }
@media(max-width:950px) { .sw-portfolio-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:650px) { .sw-portfolio-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .sw-portfolio-card { transition:none; } .sw-portfolio-card:hover { transform:none; } }
.sw-site-header .sw-services-menu a { white-space:normal; }
.sw-services-menu a>span:nth-child(2) { min-width:0; flex:1; }
.sw-services-menu a>span:last-child { flex-shrink:0; }

/* One continuous hero surface, with a solid navigation bar after 100px. */
.tf-software .sw-main {
 position:relative;
 isolation:isolate;
 background:
  radial-gradient(ellipse at 85% 13%,#c3e9ef90 0,transparent 43%),
  radial-gradient(ellipse at 10% 0%,#d7e5ffb8 0,transparent 46%),
  linear-gradient(180deg,var(--sw-surface-tint) 0%,var(--sw-paper) 84%,var(--sw-paper) 100%);
 background-size:100% 860px;
 background-repeat:no-repeat;
}
.tf-software .sw-site-header {
 background:transparent;
 border-bottom:1px solid transparent;
 box-shadow:none;
 backdrop-filter:none;
 transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.tf-software .sw-site-header.is-scrolled,
.tf-software .sw-site-header.is-open {
 background:#fff;
 border-bottom-color:var(--sw-line);
 box-shadow:var(--sw-shadow-md);
}
.sw-site-header .nav-links>li>a[aria-current=page] {
 color:#164c90;
 background:#1662b810;
}
.sw-site-header .nav-links>li>a:hover,
.sw-site-header .solutions-toggle:hover,
.sw-site-header .solutions-toggle[aria-expanded=true] {
 color:#164c90;
 background:#1662b816;
}
.sw-site-header .nav-contact { box-shadow:var(--sw-shadow-sm); }
.sw-hero { position:relative; min-height:calc(100svh - var(--nav-height)); padding-block:64px 80px; gap:68px; }
.sw-hero-copy { position:relative; z-index:1; }
.sw-hero h1 { font-size:var(--sw-fs-hero); line-height:1.055; letter-spacing:-.057em; max-width:660px; }
.sw-hero h1 span { color:#265bb3; }
.sw-hero-copy>.eyebrow { display:inline-flex; align-items:center; gap:10px; line-height:1.5; }
.sw-hero-copy>.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:#2776bd; box-shadow:0 0 0 5px #327bb210; flex-shrink:0; }
.sw-hero-visual { position:relative; }
.sw-hero-visual::before { content:""; position:absolute; z-index:-1; inset:10% -8%; border-radius:50%; background:#74add63b; filter:blur(50px); pointer-events:none; }
.sw-hero-visual .sw-demo { box-shadow:0 28px 70px #153a6124,0 4px 12px #0d284e14; border:1px solid #ffffff55; }
.sw-detail-hero { padding-top:72px; padding-bottom:60px; }
.sw-detail-hero>h1 { max-width:1050px; font-size:var(--sw-fs-hero); line-height:1.075; }
.sw-detail-hero>.sw-back { margin-bottom:20px; }
.sw-detail-hero .sw-chips { margin-top:32px; }
/* Service pages that lead with the buyer's situation: the promise sits under it. */
.sw-promise { font-size:var(--sw-fs-h5); font-weight:600; letter-spacing:-.02em; color:var(--sw-accent-on-dark); margin:0 0 14px; }
/* Qualification. Saying who this is not for is the part that earns trust. */
.sw-qualify-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.sw-qualify-card { padding:30px; background:#fff; border:1px solid var(--sw-line-soft); border-radius:var(--sw-r-md); }
.sw-qualify-card h3 { font-size:var(--sw-fs-h5); margin:0 0 18px; }
.sw-qualify-card ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; font-size:var(--sw-fs-sm); color:var(--sw-text); }
.sw-qualify-card .sw-check-list li { margin-bottom:0; }
.sw-qualify-not { background:var(--sw-surface-tint); border-color:var(--sw-line); }
.sw-qualify-not li { position:relative; padding-left:25px; }
.sw-qualify-not li::before { content:"–"; position:absolute; left:0; color:var(--sw-text-muted); }
.sw-qualify-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:22px 0 0; padding-top:26px; border-top:1px solid var(--sw-line); }
.sw-qualify-facts dt { font-size:var(--sw-fs-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--sw-text-muted); margin-bottom:8px; }
.sw-qualify-facts dd { margin:0; font-size:var(--sw-fs-lead); color:var(--sw-text-strong); letter-spacing:-.02em; }
/* The offer, wired to the evidence that already exists on the site. */
.sw-evidence-body { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.sw-evidence-body h2 { margin-top:8px; }
.sw-evidence-body p { font-size:var(--sw-fs-body); margin-bottom:22px; }
.sw-evidence-art { display:block; overflow:hidden; border-radius:var(--sw-r-md); background:var(--sw-ink-raised); }
.sw-evidence-art img { display:block; width:100%; height:auto; }
@media(max-width:809px) { .sw-qualify-grid,.sw-qualify-facts,.sw-evidence-body { grid-template-columns:1fr; } .sw-evidence-body { gap:28px; } }
.sw-logo-chips>span { background:#ffffffb8; border-color:#ffffff; box-shadow:var(--sw-shadow-sm); }
@media(max-width:809px) {
 .sw-hero { min-height:0; padding-block:42px 56px; gap:42px; }
 .sw-hero h1 { font-size:var(--sw-fs-hero-sm); }
 .sw-detail-hero { padding-top:42px; padding-bottom:42px; }
 .sw-detail-hero>h1 { font-size:var(--sw-fs-hero-sm); }
 .sw-hero-visual::before { inset:10% 0; }
 .tf-software .sw-main { background-size:100% 1000px; }
}
@media(prefers-reduced-motion:reduce) { .tf-software .sw-site-header { transition:none; } }

/* Quiet, automatically cycling illustration in the homepage hero. */
.sw-autoplay-tools { display:flex; align-items:center; gap:12px; }
.sw-animation-toggle { width:28px; height:28px; display:grid; place-items:center; padding:0; border:1px solid #ffffff25; border-radius:50%; background:#ffffff08; color:#bfd5e5; font-size:12px; cursor:pointer; }
.sw-animation-toggle[hidden] { display:none; }
.sw-animation-toggle:hover { background:#ffffff18; color:#fff; }
.sw-demo-autoplay .sw-agent-steps li { transition:opacity .35s ease; }
.sw-demo-autoplay .sw-agent-steps li:not(.is-active):not(.is-complete):not(.needs-review) { opacity:.5; }
.sw-demo-autoplay .sw-node-icon { transition:background-color .35s,color .35s,box-shadow .35s; }
.sw-demo-autoplay.is-playing .is-active .sw-node-icon { animation:sw-node-glow 1.6s ease-in-out infinite; }
.sw-demo-autoplay.is-playing .is-active:not(:last-child)::after { background:linear-gradient(180deg,transparent,#6cdbed,transparent); background-size:100% 200%; animation:sw-data-flow 1.2s linear infinite; }
.sw-demo-autoplay .is-complete:not(:last-child)::after { background:#44948b; }
.sw-demo-autoplay .needs-review .sw-step-state { color:#f2cf8a; }
.sw-demo-autoplay .is-complete .sw-step-state { color:#8bdccc; }
.sw-demo-autoplay .sw-demo-status { min-height:60px; }
.sw-animation-progress { height:2px; background:#ffffff10; border-radius:var(--sw-r-xs); overflow:hidden; margin:20px 0; }
.sw-animation-progress>span { display:block; height:100%; background:linear-gradient(90deg,#448bce,#77e0c8); transform:scaleX(var(--workflow-progress,0)); transform-origin:left; transition:transform .6s ease; }
.sw-demo-try { color:#a4dbf2; display:inline-flex; align-items:center; gap:12px; font-size:12px; }
.sw-demo-try:hover { color:#fff; }
.sw-demo-autoplay:not(.is-playing) .sw-node-icon,.sw-demo-autoplay:not(.is-playing) li::after { animation-play-state:paused; }
@keyframes sw-node-glow { 0%,100% { box-shadow:0 0 12px #228de930; } 50% { box-shadow:0 0 24px #48bdf580; } }
@keyframes sw-data-flow { from { background-position:0 200%; } to { background-position:0 0; } }
@media(prefers-reduced-motion:reduce) { .sw-demo-autoplay *, .sw-demo-autoplay *::after { animation:none!important; transition:none!important; } }

/* Vertical service navigation with a contextual preview. */
.sw-site-header .sw-services-menu { width:760px; max-width:calc(100vw - 48px); padding:10px; gap:0; grid-template-columns:275px minmax(0,1fr); align-items:stretch; border-radius:var(--sw-r-lg); }
.sw-site-header .sw-services-menu .sw-service-list { display:flex; flex-direction:column; list-style:none; padding:8px; margin:0; gap:5px; }
.sw-site-header .sw-services-menu .sw-service-choice { min-height:68px; padding:16px 14px; align-items:center; background:transparent; border-radius:var(--sw-r-sm); gap:12px; color:var(--sw-text); }
.sw-services-menu .sw-service-choice strong { font-size:var(--sw-fs-sm); font-weight:600; margin:0; }
.sw-services-menu .sw-service-choice small { display:none; }
.sw-services-menu .sw-choice-arrow { opacity:0; font-size:17px; transition:opacity .15s; }
.sw-site-header .sw-services-menu .sw-service-choice:is(:hover,:focus-visible,.is-previewed) { background:var(--sw-surface-tint); color:#125ba3; }
.sw-service-choice:is(:hover,:focus-visible,.is-previewed) .sw-choice-arrow { opacity:1; }
.sw-site-header .sw-service-details { min-width:0; padding:26px 30px; background:linear-gradient(140deg,var(--sw-surface-soft),#e9f5f7); border:1px solid var(--sw-surface-accent); border-radius:var(--sw-r-sm); }
.sw-service-preview { position:relative; min-height:295px; display:flex; flex-direction:column; align-items:flex-start; animation:sw-preview-enter .16s ease-out; }
.sw-service-preview[hidden] { display:none; }
.sw-preview-icon { position:absolute; right:0; top:0; color:#4283b3; opacity:.65; }
.sw-preview-icon svg { width:30px; height:30px; }
.sw-service-preview .sw-preview-label { font-size:var(--sw-fs-3xs); color:#3e71a5; letter-spacing:.1em; text-transform:uppercase; margin:0 40px 16px 0; }
.sw-service-preview h2 { font:600 25px/1.2 Manrope,Geist,sans-serif; letter-spacing:-.035em; color:#102d48; margin:0 0 12px; max-width:330px; }
.sw-service-preview .sw-preview-description { font-size:var(--sw-fs-xs); line-height:1.65; color:var(--sw-text); margin:0 0 16px; }
.sw-service-preview .sw-preview-capabilities { display:flex; flex-direction:column; gap:7px; margin:0 0 24px; padding:0; list-style:none; }
.sw-preview-capabilities li { font-size:12px; color:var(--sw-text); }
.sw-preview-capabilities li::before { content:""; display:inline-block; width:4px; height:4px; background:#548cac; border-radius:50%; margin:0 8px 3px 0; }
.sw-site-header .sw-services-menu .sw-preview-link { display:inline-flex; min-height:0; padding:0; gap:8px; margin-top:auto; font-size:var(--sw-fs-xs); font-weight:600; background:transparent; color:#145da5; border-radius:0; align-items:center; }
.sw-site-header .sw-services-menu .sw-preview-link:hover { background:transparent; color:#003f7e; text-decoration:underline; text-underline-offset:4px; }
@keyframes sw-preview-enter { from { opacity:.6; transform:translateY(3px); } to { opacity:1; transform:none; } }
@media(max-width:1100px) {
 .sw-site-header .sw-services-menu { width:100%; max-width:none; grid-template-columns:1fr; padding:0; }
 .sw-site-header .sw-service-details { display:none; }
 .sw-site-header .sw-services-menu .sw-service-list { padding:4px 0; }
 .sw-site-header .sw-services-menu .sw-service-choice { min-height:0; padding:15px; background:var(--sw-surface-soft); }
 .sw-services-menu .sw-service-choice small { display:block; margin-top:6px; }
 .sw-services-menu .sw-choice-arrow { opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .sw-service-preview { animation:none; } .sw-services-menu .sw-choice-arrow { transition:none; } }

/* Portfolio evidence and shared technology badges. */
.sw-logo-chips>span { display:inline-flex; }
.sw-logo-chips svg { width:22px; height:22px; flex-shrink:0; }
.sw-logo-chips.sw-logo-chips-compact { gap:8px; margin:22px 0; }
.sw-logo-chips-compact>span { font-size:var(--sw-fs-2xs); padding:7px 9px; gap:6px; border:0; background:var(--sw-surface-soft); box-shadow:none; }
.sw-logo-chips-compact img,.sw-logo-chips-compact svg { width:18px; height:18px; }
.sw-portfolio-card .sw-logo-chips { margin-bottom:0; }
.sw-project-impact { padding-top:30px; padding-bottom:34px; margin-bottom:40px; border-top:1px solid var(--sw-line); border-bottom:1px solid var(--sw-line); }
.sw-project-impact ul { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.sw-project-impact li { display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; color:var(--sw-text-strong); }
.sw-project-impact svg { color:#087c81; flex-shrink:0; }
@media(max-width:650px) { .sw-project-impact ul { grid-template-columns:1fr; gap:18px; } }

/* Three direct engagement channels, shared across the software site. */
/* Cards, built on the same pattern as .sw-capability so the two sections read
   as one system rather than two ideas of what a card is. */
/* Who the work was actually done with. */
.sw-engage-proof { margin-top:40px; padding-top:30px; border-top:1px solid var(--sw-line); }
.sw-engage-proof-head { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:baseline; justify-content:space-between; margin-bottom:26px; }
.sw-engage-proof-label { margin:0; font-size:var(--sw-fs-2xs); letter-spacing:.13em; text-transform:uppercase; color:var(--sw-text-muted); }
.sw-engage-logos { display:flex; flex-wrap:wrap; align-items:center; gap:26px 46px; }
/* Shown in their own colour. Grayscale plus low opacity made the lighter marks
   disappear, and the point of the row is that these are real engagements. */
.sw-engage-logos img { width:104px; height:40px; object-fit:contain; opacity:.92; transition:opacity .2s; }
.sw-engage-logos img:hover { opacity:1; }
/* Booking dialog. Uses the native dialog element, so focus trapping and the
   escape key come from the platform rather than from script. */
/* Solid, so it stays legible whatever the embed paints underneath it. */
/* Full screen on a phone, and the close button moves clear of the embed's own
   corner ribbon, which sits top right. */
@media(max-width:650px) { .sw-engage-logos { gap:22px 30px; } .sw-engage-logos img { width:80px; height:30px; } }



/* Hero system diagram: the agent, and the system it runs in.
   Work enters from outside; the run sits inside a control plane with the console
   above it and the guardrails and audit trail below. Connectors are SVG in a
   1040 x 470 space; the labelled nodes are HTML positioned as percentages of that
   same space, so every label stays real text. Geometry: inc/software-flow.json. */
.sw-flow { --fl-line:#4f9ad8; --fl-warm:#e08b63; --fl-teal:#5fd3c4; --fl-amber:#f0c67d; }
.sw-flow-body { padding:18px 18px 16px; }
.sw-flow-stage {
 position:relative; container-type:inline-size; aspect-ratio:520/444;
 background:
  radial-gradient(circle at 50% 53%, #17334d 0, transparent 60%),
  radial-gradient(#ffffff0a 1px, transparent 1px);
 background-size:100% 100%, 22px 22px;
 border-radius:var(--sw-r-md);
}
.sw-flow-glow { position:absolute; border-radius:50%; background:radial-gradient(circle,#2f8fd944 0,#2f8fd912 46%,transparent 70%); filter:blur(18px); pointer-events:none; }
.sw-flow-arc { stroke:#ffffff10; stroke-width:1; fill:none; }
.sw-flow-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sw-flow-track { stroke:#ffffff1c; stroke-width:1.25; }
.sw-flow-live { stroke:var(--fl-line); stroke-width:1.9; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .5s ease, stroke .35s ease; }
.sw-flow-live.is-flowing { stroke-dashoffset:0; }
.sw-flow-live.is-settled { stroke:#3f8c85; }
.sw-flow-marker { fill:var(--fl-warm); opacity:.55; }
.sw-flow-dot { fill:#bff2ff; opacity:0; filter:drop-shadow(0 0 6px #6cdbedd9); }

/* The control plane the run happens inside */
.sw-flow-frame {
 position:absolute; box-sizing:border-box; border:1px solid #ffffff1c; border-radius:var(--sw-r-md);
 background:linear-gradient(180deg,#ffffff07,#ffffff02);
 box-shadow:inset 0 1px 0 #ffffff12;
}
.sw-flow-frame span {
 position:absolute; top:-.4cqi; left:4cqi; transform:translateY(-50%);
 padding:0 1.6cqi; background:#0c1f33; color:#7f9db8;
 font-size:1.85cqi; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}

.sw-flow-node { position:absolute; box-sizing:border-box; display:flex; }
.sw-flow-label { display:block; min-width:0; }
.sw-flow-node strong { display:block; font-weight:560; line-height:1.25; letter-spacing:-.012em; color:#eef6ff; }
.sw-flow-node small { display:block; line-height:1.35; color:#9fb8cd; }

/* Inputs and outcomes, outside the plane */
.sw-flow-pill {
 flex-direction:column; align-items:flex-start; justify-content:center; gap:.4cqi;
 padding:0 2.8cqi; border:1px solid #3d566e; border-radius:var(--sw-r-xs);
 background:linear-gradient(180deg,#1b3047,#152538);
 box-shadow:inset 0 1px 0 #ffffff14, 0 6px 16px #04101d66;
 transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.sw-flow-pill strong { font-size:2.6cqi; }
.sw-flow-pill small { font-size:2.1cqi; }
.sw-flow-pill.is-active { border-color:#5aa6e6; box-shadow:inset 0 1px 0 #ffffff1f, var(--sw-glow-blue); }
.sw-flow-pill.is-complete { border-color:#3f8c85; background:linear-gradient(180deg,#16403c,#122f2d); }
.sw-flow-pill.is-complete strong { color:#a9f0e1; }

/* Named stack tiles: the mark carries the state */
.sw-flow-tile { flex-direction:column; align-items:center; justify-content:flex-start; gap:1.7cqi; text-align:center; }
.sw-flow-mark {
 display:grid; place-items:center; flex-shrink:0; width:10cqi; height:10cqi;
 border:1px solid #47637e; border-radius:2.9cqi; color:#b6d4ef;
 background:linear-gradient(160deg,#24415c,#16293c);
 box-shadow:inset 0 1px 0 #ffffff1f, 0 10px 24px #04101d7a;
 transition:border-color .3s ease, background .3s ease, box-shadow .3s ease, color .3s ease;
}
.sw-flow-mark svg { width:4.6cqi; height:4.6cqi; }
.sw-flow-tile strong { font-size:2.75cqi; }
.sw-flow-tile small { font-size:2.2cqi; }
.sw-flow-tile-lead .sw-flow-mark { width:12.3cqi; height:12.3cqi; border-radius:3.5cqi; }
.sw-flow-tile-lead .sw-flow-mark svg { width:6cqi; height:6cqi; }
.sw-flow-tile-lead strong { font-size:3.1cqi; }
.sw-flow-accent-warm .sw-flow-mark { border-color:#a3684a; color:var(--fl-warm); background:linear-gradient(160deg,#3a2419,#1d2c3c); box-shadow:inset 0 1px 0 #ffffff1c, 0 12px 30px #2a0f0466, 0 0 26px #e08b6326; }
.sw-flow-tile.is-active .sw-flow-mark { border-color:#69b4ef; background:linear-gradient(160deg,#1d5b8e,#14406a); color:#fff; box-shadow:inset 0 1px 0 #ffffff26, var(--sw-glow-blue); }
.sw-flow-accent-warm.is-active .sw-flow-mark { border-color:#d98a5f; color:#ffd9c2; background:linear-gradient(160deg,#6b3a22,#2c2233); box-shadow:inset 0 1px 0 #ffffff26, 0 0 34px #e08b6359; }
.sw-flow-tile.is-complete .sw-flow-mark { border-color:#3f8c85; background:linear-gradient(160deg,#1a514c,#133532); color:#8aeadb; }

/* Console and guardrail bands: the layer TechFoundry builds around the run */
.sw-flow-band {
 flex-direction:column; align-items:flex-start; justify-content:center; gap:1.9cqi; padding:0 2.8cqi;
 border:1px solid #3a5470; border-radius:var(--sw-r-sm);
 background:linear-gradient(180deg,#1a2e44e6,#13233488);
 box-shadow:inset 0 1px 0 #ffffff14, 0 10px 26px #04101d59;
 transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.sw-flow-band strong { font-size:2.85cqi; }
.sw-flow-band small { font-size:2.15cqi; margin-top:.5cqi; }
.sw-flow-stack { display:flex; flex-wrap:wrap; align-items:center; gap:1.1cqi; }
.sw-flow-chipmark {
 display:inline-flex; align-items:center; gap:1cqi; padding:1cqi 1.7cqi;
 border:1px solid #ffffff1a; border-radius:999px; background:#ffffff0a; color:#c4daee;
}
.sw-flow-chipmark svg { width:2.9cqi; height:2.9cqi; }
.sw-flow-chipmark i { display:none; font-style:normal; font-size:1.95cqi; letter-spacing:.01em; }
.sw-flow-band.is-active { border-color:#5aa6e6; box-shadow:inset 0 1px 0 #ffffff1f, var(--sw-glow-blue); }
.sw-flow-band.is-complete { border-color:#3f8c85; }
.sw-flow-band.needs-review { border-color:#b08a45; background:linear-gradient(180deg,#3c2f18e6,#241c0f99); box-shadow:inset 0 1px 0 #ffffff1a, 0 0 34px #d8a54a2e; }
.sw-flow-band.needs-review strong { color:var(--fl-amber); }
.sw-flow-node.needs-review { border-color:#b08a45; }
.sw-flow-pill.needs-review strong { color:var(--fl-amber); }

.sw-flow-status { min-height:3lh; margin:14px 0 10px; font-size:12px; line-height:1.6; color:var(--sw-text-dark); }

@container (max-width:300px) { .sw-flow-node small, .sw-flow-chipmark i, .sw-flow-frame span { display:none; } }
@media(max-width:809px) { .sw-flow-body { padding:16px 12px 18px; } }
@media(prefers-reduced-motion:reduce) {
 .sw-flow-pill,.sw-flow-mark,.sw-flow-band,.sw-flow-live { transition:none; }
 .sw-flow-dot { display:none; }
}

/* Wide enough for a single chip row: name the stack. */
@container (min-width:430px) { .sw-flow-chipmark i { display:inline; } }

/* Bands are a fixed height in the diagram's coordinate space, so a third mark has
   to fit the same single row rather than wrap out through the border. */
.sw-flow-stack:has(>:nth-child(3)) { flex-wrap:nowrap; gap:.8cqi; }
.sw-flow-stack:has(>:nth-child(3)) .sw-flow-chipmark { padding:.85cqi 1.2cqi; gap:.7cqi; }
.sw-flow-stack:has(>:nth-child(3)) .sw-flow-chipmark i { font-size:1.8cqi; }

/* Hero: the tools a client already runs, connected. Six marks, one path. */
.sw-tools-body { padding:20px 20px 18px; }
.sw-tools-stage { position:relative; container-type:inline-size; aspect-ratio:520/300; }
.sw-tools-wire { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sw-tools-track { stroke:#ffffff26; stroke-width:1.4; stroke-dasharray:3 7; }
.sw-tools-dot { fill:#8fe3ff; opacity:0; filter:drop-shadow(0 0 7px #6cdbedcc); }
.sw-tools-node {
 position:absolute; box-sizing:border-box; z-index:1;
 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqi;
 border-radius:3cqi; background:linear-gradient(180deg,#1b3047,#152538);
 border:1px solid #38506a; box-shadow:inset 0 1px 0 #ffffff14, 0 8px 20px #04101d59;
 transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.sw-tools-mark { display:grid; place-items:center; color:#cfe2f3; transition:color .35s ease; }
.sw-tools-mark svg { width:8cqi; height:8cqi; }
.sw-tools-node strong { font-size:2.5cqi; font-weight:550; letter-spacing:-.01em; color:#dceaf7; }
.sw-tools-node.is-live { border-color:#5aa6e6; box-shadow:inset 0 1px 0 #ffffff1f, var(--sw-glow-blue); transform:translateY(-2px); }
.sw-tools-node.is-live .sw-tools-mark { color:#fff; }
.sw-tools-node.is-done { border-color:#3f8c85; }
.sw-tools-status { min-height:38px; margin:16px 0 10px; font-size:13px; line-height:1.6; color:#dbe9f6; }
@media(max-width:809px) { .sw-tools-body { padding:16px 14px 16px; } }
@media(prefers-reduced-motion:reduce) {
 .sw-tools-node,.sw-tools-mark { transition:none; }
 .sw-tools-dot { display:none; }
}

/* ---------------------------------------------------------------------------
   Dark hero, overview page only.

   Scoped with :has(.sw-hero). The thirteen detail pages use .sw-detail-hero
   and keep the light surface. Where :has() is unsupported the hero simply
   stays light, which is the previous design rather than a broken one.

   The backdrop hangs off .sw-hero rather than a fixed band on .sw-main, so it
   is exactly as tall as the hero at every viewport height. A fixed band runs
   out mid hero on tall screens and drops a light stripe across the copy.
   --------------------------------------------------------------------------- */
.tf-software .sw-main:has(.sw-hero,.sw-detail-hero) { overflow-x:clip; }
/* Sit the hero closer under the header. The 64px top padding plus the slack
   that min-height leaves, which centring splits evenly above and below,
   opened about 98px between the nav and the eyebrow. */
.sw-main:has(.sw-hero) .sw-hero { --sw-fade:clamp(140px,19vh,230px); min-height:calc(96svh - var(--nav-height)); padding-block:24px var(--sw-fade); }
.sw-main:has(.sw-hero) .sw-hero::before {
 content:"";
 position:absolute;
 z-index:-1;
 inset-block:calc(var(--nav-height) * -1) 0;
 inset-inline:calc(50% - 50vw);
 pointer-events:none;
 background:
  radial-gradient(ellipse 60% 46% at 74% 22%,var(--sw-hero-glow-a) 0,transparent 64%),
  radial-gradient(ellipse 54% 42% at 4% 8%,var(--sw-hero-glow-b) 0,transparent 68%),
  linear-gradient(180deg,var(--sw-hero-ink) 0%,var(--sw-ink) 45%,var(--sw-hero-ink-mid) 82%,var(--sw-hero-ink-edge) 100%);
}

.sw-main:has(.sw-hero) .sw-hero::after,
.sw-main:has(.sw-detail-hero) .sw-detail-hero::after {
 content:"";
 position:absolute;
 z-index:-1;
 bottom:0;
 inset-inline:calc(50% - 50vw);
 height:var(--sw-fade);
 pointer-events:none;
 background:linear-gradient(180deg,
  #f7f8fb00 0%,#f7f8fb0e 14.3%,#f7f8fb33 28.6%,#f7f8fb65 42.9%,
  #f7f8fb9b 57.1%,#f7f8fbcc 71.4%,#f7f8fbf1 85.7%,var(--sw-paper) 100%);
}
.sw-main:has(.sw-hero) .sw-hero h1 { color:var(--sw-text-dark-strong); }
.sw-main:has(.sw-hero) .sw-hero h1 span,
.sw-main:has(.sw-hero) .sw-hero-copy .eyebrow { color:var(--sw-accent-on-dark); }
.sw-main:has(.sw-hero) .sw-hero-copy .eyebrow::before { background:var(--sw-accent-on-dark); box-shadow:0 0 0 5px #7db9f21f; }
.sw-main:has(.sw-hero) .sw-hero-copy .sw-lead { color:var(--sw-text-dark); }
.sw-main:has(.sw-hero) .sw-hero-copy>p { color:var(--sw-text-dark-muted); }
.sw-main:has(.sw-hero) .sw-hero-note { color:var(--sw-text-dark-subtle); }
.sw-main:has(.sw-hero) .sw-hero-note i { background:#38536b; }
.sw-main:has(.sw-hero) .sw-hero .sw-text-link { color:#9bcfff; }
/* The diagram stops being a card and becomes the subject of the frame. */
.sw-main:has(.sw-hero) .sw-hero-visual .sw-demo { border-color:#ffffff12; box-shadow:0 44px 100px #00000061; }
.sw-main:has(.sw-hero) .sw-hero-visual::before { background:#2f7fc742; }
/* The header dissolves into the hero. It is already transparent at rest, so
   nothing here paints a bar; only the at rest colours flip to light. Every
   rule is gated on :not(.is-scrolled):not(.is-open) because past 100px
   site.js turns the bar white, and light text would then be unreadable on it.
   This mirrors what .tf-front does over the main site hero. */
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .brand-name,
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .brand-descriptor { color:#eaf3fb; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .brand-mark::before { background:#85bdff; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .nav-links>li>a,
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .solutions-toggle { color:#c6d9e9; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .nav-links>li>a[aria-current=page] { color:#eaf3fb; background:#ffffff1a; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .nav-links>li>a:hover,
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .solutions-toggle:hover { color:#fff; background:#ffffff16; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .sw-parent-link { border-left-color:#ffffff1f; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .sw-parent-link a { color:#93aabe; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .nav-toggle { color:#eaf3fb; }

/* ---------------------------------------------------------------------------
   The same dark surface on the thirteen detail heroes, so the section reads as
   one site rather than a dark front page in front of light pages.

   Only the hero band changes. Body content below it, every icon and every
   diagram are left exactly as they were. The stack chips inside a hero take a
   dark fill with their logos silhouetted white; the same chips in the light
   sections below are untouched.
   --------------------------------------------------------------------------- */
.sw-main:has(.sw-detail-hero) .sw-detail-hero { --sw-fade:clamp(140px,19vh,230px); position:relative; padding-top:44px; padding-bottom:var(--sw-fade); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero::before {
 content:"";
 position:absolute;
 z-index:-1;
 inset-block:calc(var(--nav-height) * -1) 0;
 inset-inline:calc(50% - 50vw);
 pointer-events:none;
 background:
  radial-gradient(ellipse 58% 60% at 78% 16%,var(--sw-hero-glow-a) 0,transparent 66%),
  radial-gradient(ellipse 52% 54% at 4% 6%,var(--sw-hero-glow-b) 0,transparent 70%),
  linear-gradient(180deg,var(--sw-hero-ink) 0%,var(--sw-ink) 46%,var(--sw-hero-ink-mid) 80%,var(--sw-hero-ink-edge) 100%);
}
.sw-main:has(.sw-detail-hero) .sw-detail-hero h1 { color:var(--sw-text-dark-strong); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero h1 span,
.sw-main:has(.sw-detail-hero) .sw-detail-hero .eyebrow { color:var(--sw-accent-on-dark); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-lead { color:var(--sw-text-dark); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero p:not(.eyebrow):not(.sw-lead) { color:var(--sw-text-dark-muted); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-back { color:var(--sw-text-dark-subtle); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-back:hover { color:var(--sw-text-dark); }
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-text-link { color:#9bcfff; }
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-tag,
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-chips>span { background:#ffffff14; color:var(--sw-text-dark); box-shadow:none; }
/* The stack logos are monochrome black, so on the dark chip they silhouette to
   white rather than disappearing. brightness(0) first, so the raster AWS mark
   flattens the same way the single path SVGs do. No logo is substituted. */
.sw-main:has(.sw-detail-hero) .sw-detail-hero .sw-logo-chips>span img { filter:brightness(0) invert(1); opacity:.88; }
/* The blueprint panel is already dark, so on this ground it merges the way the
   flow diagram does on the overview. Soften its edge to match. */
.sw-main:has(.sw-detail-hero) .sw-blueprint { border:1px solid #ffffff12; box-shadow:0 44px 100px #00000061; }

/* Booking in the header bar, matching the Aerless bar. Outlined so it reads as
   the secondary action beside the solid project button. */
.sw-nav-call { display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 11px; border-radius:999px;
  border:1px solid var(--sw-line-strong); color:var(--sw-text-strong); font-size:13px; font-weight:650; white-space:nowrap;
  transition:border-color .2s ease,background-color .2s ease; }
.sw-nav-call-icon { display:grid; place-items:center; color:var(--blue); }
.sw-nav-call:hover { border-color:var(--blue); background:var(--sw-accent-soft); }
/* Over the hero the bar is transparent, and the pill was navy text on navy:
   present in the markup, invisible on the page. It inverts with the rest. */
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .sw-nav-call { border-color:#ffffff33; color:#eaf3fb; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .sw-nav-call-icon { color:#85bdff; }
.tf-software:has(.sw-hero,.sw-detail-hero) .sw-site-header:not(.is-scrolled):not(.is-open) .sw-nav-call:hover { border-color:#85bdff; background:#ffffff14; }
/* The bar already carries the brand, six items and the project button. */
@media(max-width:1250px) { .sw-nav-call-label { display:none; } .sw-nav-call { padding:9px 11px; } }
@media(max-width:1100px) { .sw-nav-call { display:none; } }

/* The closing ask. Same panel as the Aerless banner, in this division's blue,
   so a visitor crossing between the two sites meets the same shape. */
.sw-cta-band { padding-block:86px; }
.sw-cta { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center;
  padding:56px 60px; border-radius:var(--sw-r-lg); overflow:hidden;
  border:1px solid #c7dcf1;
  background:radial-gradient(ellipse 64% 130% at 96% 50%,#025ebc1c 0,transparent 66%),
             linear-gradient(112deg,#f2f7fd 0%,#e7f0fa 58%,#e0ecf8 100%); }
.sw-cta h2 { margin-bottom:12px; }
.sw-cta p { font-size:16px; color:var(--sw-text-lead); max-width:46ch; margin:0; }
.sw-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }

.sw-call { display:inline-flex; align-items:center; gap:12px; padding:11px 16px 11px 13px;
  border:1px solid var(--sw-line-strong); border-radius:999px; background:#fff;
  color:var(--sw-text-strong); text-decoration:none;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.sw-call:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 10px 24px #0b2b4d1f; }
.sw-call-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--sw-accent-soft); color:var(--blue); }
.sw-call-copy { display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.sw-call-copy strong { font-size:14px; font-weight:650; letter-spacing:-.01em; }
.sw-call-copy small { font-size:11.5px; color:var(--sw-text-muted); }
.sw-call-go { font-size:13px; color:var(--blue); margin-left:2px; }

@media(max-width:860px) {
  .sw-cta-band { padding-block:52px; }
  .sw-cta { grid-template-columns:1fr; gap:28px; padding:36px 28px; }
}

/* A second action beside the solid one, when a channel is restored. */
.sw-button-ghost { display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px;
  border:1px solid var(--sw-line-strong); background:#fff; color:var(--sw-text-strong); font-size:var(--sw-fs-sm); font-weight:650;
  transition:border-color .2s ease,background-color .2s ease; }
.sw-button-ghost:hover { border-color:var(--blue); background:var(--sw-accent-soft); }

/* The hero surface is the navy gradient, so the call pill inverts there. */
.sw-call-on-dark { background:#ffffff0f; border-color:#ffffff2e; color:var(--sw-text-dark-strong); }
.sw-call-on-dark:hover { background:#ffffff1a; border-color:#85bdff66; box-shadow:0 12px 26px #0006; }
.sw-call-on-dark .sw-call-icon { background:#85bdff24; color:#85bdff; }
.sw-call-on-dark .sw-call-copy small { color:var(--sw-text-dark-muted); }
.sw-call-on-dark .sw-call-go { color:#85bdff; }

/* The agentic example, on Our work. A band rather than a card, because it is
   one thing to open rather than one of a set to compare. */
.sw-example-band { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center;
  padding:48px 52px; border-radius:var(--sw-r-lg); border:1px solid #c7dcf1;
  background:radial-gradient(ellipse 64% 130% at 96% 50%,#025ebc1c 0,transparent 66%),
             linear-gradient(112deg,#f2f7fd 0%,#e7f0fa 58%,#e0ecf8 100%); }
.sw-example-band h2 { font-size:30px; letter-spacing:-.035em; margin:12px 0 14px; }
.sw-example-band p { font-size:15.5px; line-height:1.7; color:var(--sw-text-lead); margin:0; max-width:56ch; }
.sw-example-actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.sw-example-actions .sw-small { max-width:24ch; }
@media(max-width:860px) { .sw-example-band { grid-template-columns:1fr; gap:26px; padding:34px 26px; } .sw-example-band h2 { font-size:26px; } }

/* The hero diagram was as tall as the sentence it illustrates. Everything in it
   is sized in container query units against the stage, and the stage keeps its
   520/444 ratio because the nodes are positioned by percentage, so the one safe
   lever is width.
   It must still stretch to whatever width it is given. `margin-left:auto` was
   used to push it right and turned the panel into a shrink to fit grid item,
   so its width came from its content: the status line under the diagram is
   rewritten on every frame of the loop, and the whole panel resized with it,
   between 333px and 452px, several times a cycle. `justify-self:end` with a
   full width keeps the alignment and takes the content back out of the
   measurement. */
.sw-main:has(.sw-hero) .sw-hero-visual { width:100%; max-width:452px; justify-self:end; }
@media(max-width:1100px) { .sw-main:has(.sw-hero) .sw-hero-visual { max-width:none; justify-self:stretch; } }