/* subti.ai — September 2026. Brand palette from the supplied visual guidelines. */
:root { --blue: #0466c8; --blue-deep: #0353a4; --blue-pale: #eaf4ff; --ink: #001233; --ink-raised: #001845; --ink-soft: #002855; --text: #33415c; --muted: #5c677d; --promotion-height: 0px; }
body.subti-site { --header-height: 84px; --container: 1344px; background: #fff; }
.subti-site h1, .subti-site h2, .subti-site h3 { font-family: "New Astro", Arial, Helvetica, sans-serif; }
.subti-site { font-family: Pacaembu, Arial, Helvetica, sans-serif; }
body.subti-site:not(.page-404) .site-header { top: 0; height: 84px; background: rgba(255,255,255,.97); color: var(--ink); border-bottom: 1px solid #e8edf4; backdrop-filter: blur(16px); }
body.subti-site:not(.page-404) .site-header .header-shell { width: min(calc(100% - (2 * var(--gutter))), 1320px); height: 84px; }
body.subti-site:not(.page-404) .site-header .brand, body.subti-site:not(.page-404) .site-header .brand img { width: 148px; height: auto; filter: none; }
body.subti-site:not(.page-404) .site-header .site-nav { gap: 24px; color: var(--ink); font-size: 13px; }
body.subti-site:not(.page-404) .site-header .site-nav > a:not(.button), body.subti-site:not(.page-404) .site-header .nav-disclosure > summary { color: var(--ink); }
body.subti-site:not(.page-404) .site-header .site-nav .home-header-demo { color: var(--ink); border-color: #d4e0ed; border-radius: 7px; padding: 11px 15px; min-height: 42px; }
body.subti-site:not(.page-404) .site-header .site-nav .button-header { background: var(--blue); color: white; border: 1px solid var(--blue); padding: 11px 18px; border-radius: 7px; min-height: 42px; }
body.subti-site:not(.page-404) .site-header .site-nav .button-header:hover { background: var(--blue-deep); }
body.subti-site:not(.page-404) .site-header .locale-switch { color: var(--blue); }
body.subti-site:not(.page-404) .site-header .locale-switch svg { width: 21px; height: 21px; }
body.subti-site:not(.page-404) .site-header .nav-disclosure { position: static; }
body.subti-site:not(.page-404) .site-header .nav-toggle { color: var(--ink); border-color: #d4e0ed; }
body.subti-site:not(.page-404) .site-header .nav-toggle > span:not(.sr-only) { background: var(--ink); }
body.subti-site:not(.page-404) .site-header .home-mobile-start { color: #fff; background: var(--blue); }
body.subti-site .brand img { object-fit: contain; height: auto; }
body.subti-site .site-footer { background: #020b1c; }
body.subti-site .site-footer .brand, body.subti-site .site-footer .brand img { width: 164px; height: auto; }
body.subti-site:not(.page-404) .breadcrumbs { background: #f5f8fc; color: #5c677d; border-bottom: 1px solid #e3eaf4; }
body.subti-site:not(.page-404) .breadcrumbs a:hover { color: var(--blue); }
body.subti-site:not(.page-404) .breadcrumbs li:not(:last-child)::after { color: #979dac; }
body.subti-site:not(.page-404) .site-footer { background: #020b1c; padding: 0; }
body.subti-site:not(.page-404) :is(.footer-top, .footer-bottom) { width: min(calc(100% - (2 * var(--gutter))), 1240px); background: transparent; border-radius: 0; padding-inline: 0; }
body.subti-site:not(.page-404) .footer-top { padding-block: 65px 42px; }
body.subti-site:not(.page-404) .footer-bottom { padding-block: 24px; }
body.subti-site:not(.page-home):not(.page-404) .final-cta { background: radial-gradient(ellipse at 50% 110%, #0466c8, transparent 65%), #001233; }
body.subti-site:not(.page-home):not(.page-404) .page-hero {
  background: radial-gradient(ellipse at 90% 80%, #0466c87a, transparent 60%), linear-gradient(135deg, #001233, #001845 60%, #023e7d);
}
.subti-home-opening { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--header-height)); padding-top: var(--header-height); background: linear-gradient(180deg, #ffffff66, #ffffff1a), #f8fcff url('/assets/brand/subti-clouds.webp') center bottom / cover no-repeat; }
body.subti-site.page-home .site-header { background: rgba(255,255,255,.9); border-bottom-color: transparent; }
.subti-site .lovable-home-hero { min-height: 750px; padding-top: 155px; padding-bottom: 115px; background: transparent; color: var(--text); }
.subti-site .lovable-home-hero h2 { margin: 0; font-weight: 680; max-width: 860px; font-size: clamp(40px, 5vw, 66px); line-height: 1.12; letter-spacing: -.055em; color: var(--ink); }
.subti-site .home-hero-kicker { background: #ffffff9c; border-color: #abc8e8; color: var(--blue-deep); }
.subti-site .home-hero-benefits { margin-top: 25px; color: var(--text); }
.subti-site .home-hero-benefits span { background: #0466c815; color: var(--blue); }
.subti-site .lovable-home-hero .home-mission-composer { margin-top: 35px; background: #ffffffeb; color: var(--ink); border-color: #b8cee6; box-shadow: 0 18px 65px #023e7d12, 0 2px 8px #023e7d05; backdrop-filter: blur(12px); }
.subti-site .home-mission-composer textarea { color: var(--ink); }
.subti-site .home-mission-composer textarea::placeholder { color: #5c677d; }
.subti-site .home-mission-composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #0466c81a, 0 18px 65px #023e7d12; }
.subti-site .composer-video { background: #edf5ff; border-color: #c7dbf1; color: var(--blue); }
.subti-site .composer-video:hover { background: #daeaff; color: var(--blue-deep); }
.subti-site .mission-suggestions button { border-color: #d5e2f0; background: #f7faff; color: #33415c; }
.subti-site .mission-suggestions button:hover { border-color: var(--blue); color: var(--blue); }
.subti-site .composer-submit { background: var(--blue); color: #fff; border-radius: 20px; padding-inline: 16px; }
.subti-site .composer-submit:hover { background: var(--blue-deep); color: #fff; }
.subti-site .home-trust, .subti-site .home-employees, .subti-site .home-impact { background-color: #020b1c; }
.subti-site .home-showcase { background: #001233; }
.subti-site .home-ready { background: radial-gradient(ellipse at 50% 110%, #0466c8, transparent 65%), #001233; }

/* New presentation, following the supplied homepage composition. */
.subti-site :is(.subti-intro, .subti-architecture, .subti-breakthroughs, .subti-journey, .subti-hosting, .subti-methodology) { background: #fff; color: var(--text); }
.subti-site .subti-home-opening .subti-intro { overflow: visible; background: transparent; border: 0; }
.subti-site :is(.subti-intro, .subti-film, .subti-architecture, .subti-breakthroughs, .subti-control, .subti-journey, .subti-hosting, .subti-methodology, .subti-brand-cta) > .container { width: min(calc(100% - (2 * var(--gutter))), 1344px); max-width: none; }
.subti-site .subti-eyebrow { margin: 0 0 18px; font-size: 11px; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); }
.subti-site .subti-intro h1, .subti-site .subti-section-copy h2, .subti-site .subti-centered-heading h2, .subti-site .subti-methodology h2 { margin: 0 0 22px; color: var(--ink); line-height: 1.18; font-weight: 650; letter-spacing: -.04em; }
.subti-intro { position: relative; overflow: hidden; border-bottom: 1px solid #e9edf3; }
.subti-intro-grid { position: relative; display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; min-height: 600px; }
.subti-intro-copy { position: relative; z-index: 2; padding: 50px 0 32px; }
.subti-home-opening .subti-intro-copy::before { content: ''; position: absolute; z-index: -1; inset: -20px -90px -130px -140px; background: radial-gradient(ellipse, #fffffff5 25%, #ffffffe0 55%, #ffffff00 80%); pointer-events: none; }
.subti-site .subti-intro h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.08; font-weight: 700; }
.subti-intro h1 em { color: var(--blue-deep); font-style: normal; }
.subti-intro-copy > p:not(.subti-eyebrow) { max-width: 455px; margin: 0 0 5px; font-size: 15px; line-height: 1.8; color: var(--ink); }
.subti-intro-art { --portrait-lift: 0px; position: absolute; inset: calc(-1 * var(--portrait-lift)) 0 0 30%; pointer-events: none; }
.subti-intro-art > img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; mask: url('/assets/brand/subti-portrait-mask.svg') center bottom / contain no-repeat, linear-gradient(#000 calc(100% - 80px), transparent) center / 100% 100% no-repeat; mask-composite: intersect; }
.subti-abilities { position: absolute; top: calc(var(--portrait-lift) + 44px); right: max(6vw, 40px); display: grid; gap: 12px; }
.subti-ability { display: flex; align-items: center; gap: 16px; width: 210px; min-height: 106px; padding: 17px 23px; background: rgba(255,255,255,.96); border: 1px solid #fff; border-radius: 17px; box-shadow: 0 8px 35px #023e7d13; }
.subti-ability > svg { flex: 0 0 30px; width: 30px; height: 32px; color: var(--blue); }
.subti-ability strong { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.subti-ability span { display: block; color: var(--text); font-size: 11px; line-height: 1.6; }
.subti-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.subti-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 13px 22px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 650; line-height: 1.4; text-decoration: none; transition: background .2s, transform .2s; }
.subti-button > svg { width: 19px; height: 19px; flex-shrink: 0; }
.subti-button:hover { color: #fff; background: var(--blue-deep); transform: translateY(-2px); }
.subti-button-outline { color: var(--blue-deep); background: #ffffffd9; border-color: #9cbbdf; }
.subti-button-outline:hover { color: var(--blue-deep); background: #eaf4ff; }
.subti-promises { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 0; margin: 36px 0 0; list-style: none; }
.subti-promises li { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--ink); }
.subti-promises svg { width: 18px; height: 20px; color: var(--blue); }
.subti-text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--blue); font-size: 12px; font-weight: 650; text-decoration: none; }
.subti-text-link > svg, .subti-measure-note a > svg, .subti-hosting-footnote a > svg { display: inline-block; width: 17px; height: 17px; vertical-align: middle; }
.subti-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.subti-film { padding: 32px 0; background: #020817; color: #fff; }
.subti-film-grid { display: grid; grid-template-columns: 1fr 2.1fr .65fr; align-items: center; gap: 40px; }
.subti-site .subti-film h2 { margin: 0 0 24px; color: #fff; font-size: 22px; line-height: 1.5; font-weight: 550; letter-spacing: -.03em; }
.subti-site .subti-film .subti-eyebrow { color: #78baff; }
.subti-film-copy > p:not(.subti-eyebrow) { margin: 0 0 26px; color: #c6d2e4; font-size: 13px; line-height: 1.9; }
.subti-film .subti-text-link { color: #78baff; }
.subti-film-player { position: relative; overflow: hidden; border: 1px solid #bcc9db; border-radius: 10px; box-shadow: 0 15px 50px #0003; background: #001233; }
.subti-film-player video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; cursor: pointer; }
.subti-video-cover { position: absolute; inset: 0 0 40px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 15px 20px 0; border: 0; background: transparent; cursor: pointer; }
.subti-video-cover[hidden] { display: none; }
.subti-video-status { margin: 0; padding: 14px 18px; color: #fff; font-size: 13px; line-height: 1.6; }
.subti-video-status a { color: #9bd2ff; text-decoration: underline; }
.subti-video-cover img { width: 78%; height: auto; }
.subti-video-cover > span { display: grid; place-items: center; width: 42px; height: 42px; padding-left: 3px; color: #fff; font-size: 18px; border: 2px solid #fff; border-radius: 50%; background: #00123370; transition: background .2s; }
.subti-video-cover:hover > span { background: var(--blue); }
.subti-film-metrics { display: grid; gap: 16px; }
.subti-film-metrics > div > span { display: block; font-size: 10px; color: #a2b4d0; }
.subti-film-metrics strong { display: block; color: #469cff; font-size: 40px; line-height: 1.15; font-weight: 550; letter-spacing: -.06em; }
.subti-film-metrics strong span { font-size: .75em; }
.subti-film-metrics p { max-width: 130px; margin: 4px 0 0; color: #e2eaf5; font-size: 11px; line-height: 1.55; }
.subti-film-metrics > a { color: #a9b9d0; font-size: 9px; line-height: 1.7; text-decoration: underline; text-underline-offset: 3px; }
.subti-architecture { padding: 30px 0; border-bottom: 1px solid #e7edf5; }
.subti-architecture-grid { display: grid; grid-template-columns: .95fr 1fr 1fr; gap: 30px; align-items: center; }
.subti-architecture-grid > *, .subti-film-grid > * { min-width: 0; }
.subti-section-copy h2 { font-size: 28px; }
.subti-section-copy > p:not(.subti-eyebrow) { font-size: 14px; line-height: 1.9; margin: 0 0 19px; }
.subti-stack { position: relative; height: 380px; width: 100%; max-width: 380px; margin-inline: auto; }
.subti-stack > img { width: 100%; height: 100%; object-fit: contain; }
.subti-stack-glow { position: absolute; inset: 60% 12% 5%; background: #158cff; filter: blur(45px); opacity: .22; }
.subti-stack-layer { position: absolute; left: 50%; height: 40%; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg,#273b58,#001233 75%); transform: translateX(-50%) rotate(-30deg) skewX(30deg) scaleY(.866); box-shadow: -15px 16px 0 #000c24, -16px 17px 1px #1b385d; }
.stack-base { bottom: 8%; width: 66%; height: auto; }
.stack-light { bottom: 22%; width: 56%; height: auto; background: linear-gradient(135deg,#46e8ff,#0466c8 60%); box-shadow: -8px 8px 0 #023e7d, -12px 12px 16px #24cbff9e; border: 1px solid #80edff; }
.stack-data { bottom: 37%; width: 45%; height: auto; }
.stack-rules { bottom: 50%; width: 35%; height: auto; }
.stack-top { bottom: 62%; width: 26%; height: auto; }
.subti-stack-peak { position: absolute; width: 106px; height: 112px; left: 50%; top: 2%; transform: translateX(-50%); clip-path: polygon(50% 0, 100% 76%, 50% 100%, 0 76%); background: conic-gradient(from 0deg at 50% 0%,#75d0ff,#0466c8 22%,#002855 40%,#001845 50%,#0466c8 65%,#79bcff 100%); }
.subti-layer-labels { list-style: none; margin: 0; padding: 0; display: grid; gap: 27px; }
.subti-layer-labels li { display: flex; align-items: flex-start; gap: 15px; position: relative; }
.subti-layer-labels li > span { margin-top: 1px; font-size: 10px; color: #8d9ab1; }
.subti-layer-labels li::before { content: ''; position: absolute; width: 32px; height: 1px; background: linear-gradient(90deg,transparent,#0466c8); top: 10px; left: -45px; }
.subti-layer-labels h3 { margin: 0 0 5px; color: var(--blue-deep); font-size: 14px; font-weight: 700; line-height: 1.4; }
.subti-layer-labels p { margin: 0; font-size: 12px; line-height: 1.7; }
.subti-breakthroughs { padding: 22px 0 14px; }
.subti-centered-heading { text-align: center; margin: 0 auto 40px; max-width: 760px; }
.subti-site .subti-centered-heading h2 { font-size: clamp(28px,3vw,38px); }
.subti-centered-heading > p:not(.subti-eyebrow) { color: var(--muted); font-size: 15px; }
.subti-centered-heading .subti-eyebrow { margin-bottom: 12px; }
.subti-site .subti-compact-heading { margin-bottom: 18px; }
.subti-site .subti-compact-heading h2 { margin: 0; font-size: 15px; letter-spacing: 0; line-height: 1.5; text-transform: uppercase; }
.subti-breakthrough-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.subti-breakthrough-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.subti-card-number { color: var(--blue); font-size: 23px; line-height: 1; letter-spacing: -.05em; }
.subti-breakthrough-card > h3 { margin: 10px 0 14px; color: var(--ink); font-size: 19px; line-height: 1.3; letter-spacing: -.035em; }
.subti-breakthrough-card > p { min-height: 104px; margin: 0; font-size: 12px; line-height: 1.85; }
.subti-checks { display: grid; gap: 8px; list-style: none; padding: 0; margin: 16px 0 4px; }
.subti-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.65; color: var(--ink); }
.subti-checks svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; padding: 2px; background: var(--ink); color: #fff; border-radius: 50%; stroke-width: 2.5; }
.subti-breakthrough-card > .subti-text-link { margin-top: auto; padding-top: 10px; }
.subti-server-art { position: relative; height: 235px; display: grid; place-items: center; }
.subti-server-art img { display: block; width: 100%; height: 235px; object-fit: contain; }
.subti-server-box { position: relative; width: 112px; height: 144px; padding: 18px; transform: perspective(500px) rotateY(-25deg) rotateX(9deg); background: linear-gradient(120deg,#29435c,#071326 52%,#001233); border: 1px solid #3c5b78; border-radius: 10px; box-shadow: 15px 15px 25px #00285530, 8px 5px 0 #001233; color: white; }
.subti-server-box > svg { width: 35px; height: 35px; margin: 17px auto 8px; color: #8ae0ff; filter: drop-shadow(0 0 6px #0466c8); }
.subti-server-box > span { display: block; text-align: center; font-size: 10px; color: #9faec3; }
.subti-server-lights { display: flex; gap: 7px; }
.subti-server-lights i { width: 5px; height: 5px; background: #50caff; border-radius: 50%; box-shadow: 0 0 9px #50caff; }
.subti-server-orbit { position: absolute; width: 210px; height: 90px; border: 1px solid #0466c861; border-radius: 50%; transform: rotate(-17deg); }
.subti-server-orbit::after { content: ''; position: absolute; inset: -16px 14px; border: 1px dotted #0466c8; border-radius: 50%; transform: rotate(36deg); }
.subti-server-caption { position: absolute; bottom: 0; color: #5c677d; font-size: 8px; letter-spacing: .1em; }
.subti-interface-art { height: 215px; margin-block: 10px; overflow: hidden; border: 5px solid #071326; border-radius: 10px; background: #f6f8fc; transform: perspective(800px) rotateY(-4deg); box-shadow: 0 15px 25px #00285520; }
.subti-window-bar { display: flex; align-items: center; gap: 4px; height: 23px; background: #071326; padding: 0 8px; color: #bcc9d8; }
.subti-window-bar > i { width: 4px; height: 4px; background: #4a6588; border-radius: 50%; }
.subti-window-bar > span { margin-left: 10px; font-size: 7px; }
.subti-window-body { display: flex; height: calc(100% - 23px); position: relative; }
.subti-window-sidebar { width: 36px; padding: 12px 8px; background: #102441; flex-shrink: 0; }
.subti-window-sidebar svg { color: #82bfff; width: 17px; height: 17px; }
.subti-window-sidebar > i { display: block; margin-top: 18px; height: 2px; background: #58708c; }
.subti-window-content { flex: 1; padding: 12px; color: var(--ink); }
.subti-window-content > strong { font-size: 10px; display: block; margin-bottom: 8px; }
.subti-window-toolbar { display: flex; justify-content: space-between; padding-bottom: 5px; font-size: 7px; color: var(--blue); border-bottom: 1px solid #dfe6ee; }
.subti-window-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e0e9f1; font-size: 7px; }
.subti-window-row > i { width: 6px; height: 6px; border: 1px solid #a7b9d0; border-radius: 1px; }
.subti-window-row > small { color: #168464; margin-left: auto; }
.subti-window-action { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px; background: #def5ec; color: #076347; font-size: 7px; }
.subti-window-action svg { width: 12px; height: 12px; }
.subti-window-body .subti-cursor { position: absolute; width: 37px; height: 48px; right: 18px; top: 78px; filter: drop-shadow(2px 2px 3px #0004); }
.subti-compute-art { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; min-height: 235px; padding: 12px 0; }
.subti-compute-art > div > strong { display: block; text-align: center; margin-bottom: 16px; color: var(--ink); font-size: 10px; }
.subti-compute-art > div:last-child > strong { color: var(--blue); }
.subti-compute-art > div > p { display: flex; gap: 5px; align-items: center; justify-content: center; margin: 0 0 7px; padding: 9px 5px; border-radius: 5px; background: #eef1f5; font-size: 8px; color: var(--ink); white-space: nowrap; }
.subti-compute-art p > span { color: #7d8597; }
.subti-compute-path { display: grid; justify-items: center; gap: 0; border-radius: 8px; overflow: hidden; background: linear-gradient(#eaf4ff,#def4e9); color: #124c41; text-align: center; font-size: 10px; line-height: 1.5; }
.subti-compute-path > span { width: 100%; padding: 9px 4px; }
.subti-compute-path > span:first-child { color: var(--blue); }
.subti-compute-path > b { font-size: 12px; line-height: 1; opacity: .6; }
.subti-compute-path svg { width: 20px; height: 20px; padding: 4px; margin: 8px auto 0; border-radius: 50%; background: #07805e; color: #fff; }
.subti-measure-note { max-width: 960px; font-size: 10px; line-height: 1.8; color: var(--muted); margin: 20px 0 0; }
.subti-measure-note a { color: var(--blue-deep); white-space: nowrap; }
.subti-control { background: #fff; padding: 12px 0 20px; }
.subti-control-panel { display: grid; grid-template-columns: .55fr 1.25fr 1.8fr; align-items: center; gap: 28px; background: #020b1c; padding: 25px; border-radius: 9px; color: white; }
.subti-control-copy h2 { color: #fff; margin: 0 0 12px; font-size: 22px; letter-spacing: -.03em; line-height: 1.3; }
.subti-control-copy p { margin: 0; color: #c2cfe0; font-size: 12px; line-height: 1.9; }
.subti-human-orbit { position: relative; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; border: 1px dotted #4ab3f880; }
.subti-human-orbit > svg { width: 37px; height: 37px; color: #fff; fill: #fff; }
.subti-human-orbit > i { position: absolute; inset: 14px; border: 1px solid #0466c866; border-radius: 50%; transform: rotate(-30deg) scaleX(.6); }
.subti-human-orbit > i:nth-child(3) { transform: rotate(50deg) scaleX(.6); }
.subti-human-orbit > i:nth-child(4) { transform: rotate(100deg) scaleX(.6); }
.subti-human-orbit > i::after { content: ''; position: absolute; width: 5px; height: 5px; top: 15px; left: 8px; border-radius: 50%; background: #80ceff; box-shadow: 0 0 8px #3c8aff; }
.subti-traffic-lights { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.subti-light { padding: 21px 14px; min-height: 132px; background: #102034; border: 1px solid #ffffff06; border-radius: 9px; }
.subti-light h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 13px; color: var(--light-color); }
.subti-light h3 > span { display: grid; place-items: center; width: 23px; height: 23px; flex-shrink: 0; border-radius: 50%; background: var(--light-color); color: #001233; font-size: 14px; font-weight: 800; box-shadow: 0 0 18px color-mix(in srgb,var(--light-color) 30%,transparent); }
.subti-light > strong { display: block; color: #e5edf7; font-size: 10px; font-weight: 500; }
.subti-light > p { margin: 8px 0 0; font-size: 9px; color: #aab8cc; }
.subti-light-green { --light-color: #36df9e; }
.subti-light-amber { --light-color: #ffb653; }
.subti-light-red { --light-color: #ff567a; }
.subti-journey { padding: 12px 0 34px; text-align: center; }
.subti-journey ol { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 26px; list-style: none; padding: 0; margin: 0; }
.subti-journey li { position: relative; }
.subti-journey li:not(:last-child)::after { content: ''; position: absolute; top: 39px; height: 1px; width: calc(100% - 64px); left: calc(50% + 47px); background: linear-gradient(90deg,#b9daff,var(--blue)); }
.subti-step-icon { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 19px; border: 1px solid #e7effb; border-radius: 50%; background: #fbfdff; box-shadow: 0 4px 18px #00285506; }
.subti-step-icon svg { width: 30px; height: 30px; color: var(--blue); }
.subti-journey li > span { display: block; font-size: 10px; color: var(--blue-deep); }
.subti-journey h3 { font-size: 12px; color: var(--ink); margin: 6px 0 8px; line-height: 1.5; }
.subti-journey li > p { margin: 0; font-size: 11px; line-height: 1.8; }
.subti-site .subti-hosting { padding: 40px 0; background: #f6f9fd; border-top: 1px solid #e7edf5; }
.subti-hosting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.subti-hosting-card { display: flex; flex-direction: column; padding: 34px; border: 1px solid #dbe6f1; border-radius: 13px; background: #fff; }
.subti-hosting-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 24px; }
.subti-hosting-heading > span { display: grid; place-items: center; flex-shrink: 0; width: 57px; height: 57px; border-radius: 15px; background: #eaf4ff; color: var(--blue); }
.subti-hosting-heading svg { width: 28px; height: 28px; }
.subti-hosting-heading small { display: block; font-size: 10px; color: var(--blue-deep); margin-bottom: 6px; }
.subti-hosting-heading h3 { margin: 0; font-size: 23px; color: var(--ink); line-height: 1.3; letter-spacing: -.035em; }
.hosting-managed .subti-hosting-heading > span { background: #e6f7ef; color: #0b8058; }
.hosting-managed .subti-hosting-heading small { color: #0b8058; }
.subti-hosting-card > p { margin: 0; font-size: 13px; line-height: 1.85; }
.subti-hosting-card .subti-checks { min-height: 92px; margin-block: 22px; }
.subti-hosting-card .subti-checks li { font-size: 12px; }
.subti-hosting-price { padding: 24px; margin-bottom: 24px; min-height: 163px; background: #f0f7ff; border: 1px solid #d9eaff; border-radius: 8px; }
.hosting-managed .subti-hosting-price { background: #f0faf5; border-color: #d9efe3; }
.subti-hosting-price > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.subti-hosting-price > strong { display: block; font-size: 25px; color: var(--ink); line-height: 1.4; letter-spacing: -.04em; }
.subti-hosting-price > strong small { font-size: 13px; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
.subti-hosting-price p { margin: 10px 0 0; font-size: 11px; line-height: 1.8; }
.subti-hosting-extra { margin: 0 0 22px; padding-block: 12px; border-block: 1px solid #e3ebf5; }
.subti-hosting-extra summary { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--ink); cursor: pointer; font-weight: 600; list-style: none; }
.subti-hosting-extra summary::after { content: '+'; margin-left: auto; color: var(--blue); font-size: 20px; }
.subti-hosting-extra[open] summary::after { content: '−'; }
.subti-hosting-extra[open] summary { margin-bottom: 15px; }
.subti-hosting-extra summary svg { width: 23px; height: 23px; color: var(--blue); flex-shrink: 0; }
.subti-hosting-extra p { font-size: 12px; line-height: 1.8; margin: 0 0 15px; }
.subti-hosting-card .subti-hosting-audience { margin-top: auto; border-top: 1px solid #e8edf5; padding-top: 18px; font-size: 11px; color: var(--muted); }
.subti-hosting-card > .subti-button { margin-top: 25px; align-self: flex-start; }
.subti-hosting-footnote { margin: 24px auto 0; max-width: 960px; text-align: center; font-size: 11px; line-height: 1.9; }
.subti-hosting-footnote a { color: var(--blue-deep); white-space: nowrap; }
.subti-methodology { padding: 75px 0; }
.subti-methodology h2 { max-width: 750px; font-size: 38px; }
.subti-methodology .container > p:not(.subti-eyebrow) { max-width: 840px; font-size: 15px; line-height: 1.9; }
.subti-methodology-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin-block: 40px; }
.subti-methodology-grid article { border-top: 1px solid #cbdced; padding-top: 22px; }
.subti-methodology-grid article > span { color: var(--blue); font-size: 12px; }
.subti-methodology-grid h3 { color: var(--ink); font-size: 18px; margin: 16px 0 10px; }
.subti-methodology-grid p { font-size: 13px; line-height: 1.85; }
.subti-brand-cta { background: radial-gradient(ellipse at 85% 150%,#0466c84d,transparent 70%),#020b1c; padding: 28px 0; }
.subti-brand-cta > .container { display: flex; align-items: center; gap: 55px; }
.subti-brand-cta img { width: 148px; height: auto; }
.subti-brand-cta h2 { flex: 1; margin: 0; color: #fff; font-size: 21px; font-weight: 450; line-height: 1.7; letter-spacing: -.02em; }
.subti-brand-cta .subti-button { flex-shrink: 0; }

@media (min-width: 1025px) and (max-width: 1180px) {
  body.subti-site:not(.page-404) .site-header .site-nav { gap: 17px; font-size: 12px; }
  body.subti-site:not(.page-404) .site-header .site-nav .home-header-demo { display: none; }
}
@media (max-width: 1024px) {
  body.subti-site, body.subti-site:not(.page-home):not(.page-404) { --header-height: 74px; }
  body.subti-site:not(.page-404) .site-header, body.subti-site:not(.page-404) .site-header .header-shell { height: 74px; }
  body.subti-site:not(.page-404) .site-header .brand, body.subti-site:not(.page-404) .site-header .brand img { width: 126px; }
  body.subti-site:not(.page-404) .site-header .site-nav { top: 74px; height: calc(100svh - 74px); background: #fff; }
  body.subti-site:not(.page-404) .site-header .site-nav .button-header { width: 100%; }
  .subti-site .lovable-home-hero { min-height: 680px; padding-top: 135px; padding-bottom: 100px; }
  .subti-intro-grid { min-height: 600px; }
  .subti-intro-art { --portrait-lift: 0px; left: 37%; right: 0; }
  .subti-intro-art > img { object-fit: cover; mask-size: cover, 100% 100%; }
  .subti-abilities { right: 25px; top: calc(var(--portrait-lift) + 55px); gap: 12px; }
  .subti-ability { width: 145px; min-height: 80px; padding: 12px; gap: 10px; border-radius: 12px; }
  .subti-ability > svg { width: 24px; flex-basis: 24px; }
  .subti-ability strong { font-size: 11px; }
  .subti-ability span { font-size: 10px; }
  .subti-site .subti-intro h1 { font-size: 40px; }
  .subti-intro-copy > p:not(.subti-eyebrow) { max-width: 350px; font-size: 13px; }
  .subti-promises { max-width: 370px; }
  .subti-film-grid { grid-template-columns: 1fr 1.6fr; gap: 30px; }
  .subti-film-metrics { grid-column: 1/-1; grid-template-columns: repeat(3,1fr) 1fr; border-top: 1px solid #ffffff1c; padding-top: 24px; align-items: center; }
  .subti-film-metrics p { max-width: none; }
  .subti-architecture-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .subti-stack { max-width: 280px; }
  .subti-layer-labels { grid-column: 1/-1; grid-template-columns: repeat(4,1fr); gap: 25px; }
  .subti-layer-labels li { border-top: 1px solid #dbe8f5; padding-top: 16px; gap: 10px; }
  .subti-layer-labels li::before { display: none; }
  .subti-breakthrough-card { padding: 19px; }
  .subti-breakthrough-card > p { min-height: 180px; }
  .subti-control-panel { grid-template-columns: 128px 1fr; padding: 28px; }
  .subti-traffic-lights { grid-column: 1/-1; }
  .subti-light { min-height: 115px; }
  .subti-journey ol { gap: 14px; }
  .subti-hosting-card { padding: 25px; }
  .subti-hosting-heading h3 { font-size: 21px; }
  .subti-brand-cta > .container { gap: 30px; }
  .subti-brand-cta h2 { font-size: 17px; }
}
@media (max-width: 760px) {
  body.subti-site { --gutter: 24px; }
  .subti-site .lovable-home-hero { min-height: 690px; padding: 130px 0 85px; }
  .subti-site .lovable-home-hero h2 { font-size: clamp(37px,7.5vw,52px); line-height: 1.15; }
  .subti-site .home-hero-benefits { column-gap: 12px; font-size: 10px; }
  .subti-intro-grid { display: flex; flex-direction: column; min-height: 0; }
  .subti-intro-copy { padding: 52px 0 20px; align-self: stretch; }
  .subti-home-opening .subti-intro-copy::before { bottom: 0; }
  .subti-site .subti-intro h1 { font-size: clamp(38px,8vw,48px); }
  .subti-intro-copy > p:not(.subti-eyebrow) { max-width: 530px; font-size: 14px; }
  .subti-intro-art { --portrait-lift: 0px; position: relative; inset: auto; width: 100%; height: 405px; margin-top: 0; }
  .subti-intro-art > img { object-position: center bottom; }
  .subti-abilities { top: 22px; right: 22px; gap: 10px; }
  .subti-ability { min-height: 77px; width: 147px; }
  .subti-promises { margin-top: 26px; max-width: none; gap: 12px 17px; }
  .subti-promises li { font-size: 9px; }
  .subti-promises svg { width: 15px; }
  .subti-button { padding: 13px 16px; font-size: 11px; min-height: 46px; }
  .subti-film { padding: 42px 0; }
  .subti-film-grid { grid-template-columns: 1fr; gap: 28px; }
  .subti-site .subti-film h2 { font-size: 24px; }
  .subti-film-copy > p:not(.subti-eyebrow) { margin-bottom: 16px; }
  .subti-film-metrics { grid-template-columns: repeat(3,1fr); gap: 18px; }
  .subti-film-metrics strong { font-size: 37px; }
  .subti-film-metrics > a { grid-column: 1/-1; font-size: 10px; }
  .subti-film-metrics p { font-size: 10px; }
  .subti-architecture { padding: 52px 0; }
  .subti-architecture-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .subti-section-copy h2 { font-size: 30px; }
  .subti-stack { width: min(310px,85%); height: 350px; max-width: 310px; }
  .subti-stack-peak { width: 90px; height: 99px; }
  .subti-layer-labels { grid-template-columns: 1fr 1fr; gap: 20px; }
  .subti-layer-labels h3 { font-size: 12px; }
  .subti-layer-labels p { font-size: 11px; }
  .subti-breakthroughs { padding-top: 48px; }
  .subti-breakthrough-grid { grid-template-columns: 1fr; gap: 20px; }
  .subti-breakthrough-card { padding: 26px; }
  .subti-breakthrough-card > p { min-height: 0; font-size: 13px; }
  .subti-breakthrough-card > h3 { font-size: 23px; }
  .subti-checks li { font-size: 12px; }
  .subti-server-art, .subti-interface-art, .subti-compute-art { width: 100%; max-width: 330px; align-self: center; }
  .subti-interface-art { margin-block: 25px 5px; }
  .subti-compute-art { padding-top: 25px; }
  .subti-compute-art > div > p { font-size: 10px; }
  .subti-measure-note a { white-space: normal; }
  .subti-control { padding: 4px 0 20px; }
  .subti-control-panel { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; }
  .subti-human-orbit { display: none; }
  .subti-control-copy h2 { font-size: 24px; }
  .subti-traffic-lights { grid-template-columns: 1fr; gap: 8px; }
  .subti-light { display: grid; grid-template-columns: 95px 1fr; column-gap: 12px; padding: 16px; min-height: auto; }
  .subti-light h3 { grid-row: span 2; margin: 0; font-size: 12px; }
  .subti-light > strong { font-size: 11px; }
  .subti-light > p { margin-top: 5px; font-size: 10px; }
  .subti-journey { padding: 35px 0 48px; }
  .subti-journey ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 24px; }
  .subti-journey li:not(:last-child)::after { display: none; }
  .subti-journey h3 { font-size: 13px; }
  .subti-site .subti-hosting { padding: 52px 0; }
  .subti-hosting-grid { grid-template-columns: 1fr; gap: 20px; }
  .subti-hosting-card { padding: 25px 22px; }
  .subti-hosting-heading { gap: 13px; }
  .subti-hosting-heading > span { width: 45px; height: 45px; border-radius: 12px; }
  .subti-hosting-heading h3 { font-size: 22px; }
  .subti-hosting-card .subti-checks { min-height: 0; }
  .subti-hosting-price { min-height: 0; padding: 20px; }
  .subti-hosting-price > strong { font-size: 23px; }
  .subti-hosting-card > .subti-button { align-self: stretch; }
  .subti-hosting-footnote { text-align: left; }
  .subti-methodology { padding: 50px 0; }
  .subti-methodology h2 { font-size: 30px; }
  .subti-methodology-grid { grid-template-columns: 1fr; gap: 20px; }
  .subti-brand-cta { padding: 38px 0; }
  .subti-brand-cta > .container { flex-direction: column; align-items: flex-start; gap: 25px; }
  .subti-brand-cta h2 { font-size: 20px; }
}
@media (max-width: 360px) {
  body.subti-site { --gutter: 18px; }
  body.subti-site:not(.page-404) .site-header .header-shell { gap: 10px; }
  body.subti-site:not(.page-404) .site-header .brand, body.subti-site:not(.page-404) .site-header .brand img { width: 108px; }
  body.subti-site:not(.page-404) .site-header .home-mobile-start { padding-inline: 11px; font-size: 11px; }
  .subti-site .subti-intro h1 { font-size: 34px; }
  .subti-actions { gap: 9px; }
  .subti-actions .subti-button { gap: 8px; padding-inline: 12px; }
  .subti-intro-art { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .subti-button { transition: none; } .subti-button:hover { transform: none; } }

/* Compact pages: the same white, blue and navy system throughout the site. */
body.subti-site:not(.page-home):not(.page-404) { --header-height: 84px; --container: 1240px; background: #fff; }
body.subti-site:not(.page-home):not(.page-404) main { background: #fff; color: var(--text); }
body.subti-site:not(.page-home):not(.page-404) main > section { margin-block: 0; }
body.subti-site:not(.page-home):not(.page-404) main .section { padding: 40px 0; background: #fff; }
body.subti-site:not(.page-home):not(.page-404) main .section > .container { width: min(calc(100% - (2 * var(--gutter))), 1240px); max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.subti-site:not(.page-home):not(.page-404) main .section-head { max-width: 850px; margin-bottom: 28px; }
body.subti-site:not(.page-home):not(.page-404) main .section-head h2 { color: var(--ink); font-size: 29px; line-height: 1.2; letter-spacing: -.035em; }
body.subti-site:not(.page-home):not(.page-404) main .section-head > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; color: var(--text); }
body.subti-site:not(.page-home):not(.page-404) main .eyebrow { color: var(--blue); }
body.subti-site:not(.page-404) .button { border-radius: 6px; font-size: 12px; min-height: 46px; padding: 12px 20px; }
body.subti-site:not(.page-404) .button-primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: none; }
body.subti-site:not(.page-404) .button-primary:hover { background: var(--blue-deep); }
body.subti-site:not(.page-404) .button-secondary { background: #fff; border-color: #b4c9e1; color: var(--blue-deep); }
body.subti-site:not(.page-404) .button-secondary:hover { background: #eaf4ff; }
.subti-page-heading { padding: 50px 0 46px; border-bottom: 1px solid #e7edf5; }
.subti-page-heading .subti-eyebrow { margin-bottom: 15px; }
.subti-site .subti-page-heading h1 { max-width: 870px; margin: 0 0 20px; color: var(--ink); font-size: clamp(34px, 3.7vw, 48px); line-height: 1.12; letter-spacing: -.045em; font-weight: 700; }
.subti-page-lead { max-width: 800px; margin: 0; color: var(--text); font-size: 16px; line-height: 1.75; }
.subti-page-heading .subti-actions { margin-top: 24px; }
.subti-detail-section, .subti-directory, .subti-method-details { padding: 42px 0 50px; }
.subti-site :is(.subti-detail-section, .subti-method-details, .subti-use-case) h2 { margin: 0 0 26px; font-size: 27px; color: var(--ink); line-height: 1.3; letter-spacing: -.035em; }
.subti-detail-grid, .subti-directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.subti-detail-grid > article { display: flex; flex-direction: column; align-items: flex-start; padding: 25px; border: 1px solid #dfe7f1; border-radius: 8px; background: #fff; }
.subti-detail-grid h3 { color: var(--ink); font-size: 19px; margin: 16px 0 12px; line-height: 1.3; letter-spacing: -.025em; }
.subti-detail-grid p, .subti-detail-grid .check-list li { color: var(--text); font-size: 14px; line-height: 1.75; }
.subti-detail-grid p { margin: 0 0 20px; }
.subti-detail-grid .check-list { margin: 0 0 12px; }
.subti-detail-grid .subti-text-link { margin-top: auto; }
.subti-hosting-link { padding: 30px 0; background: #f0f6fd; border-block: 1px solid #e1ebf7; }
.subti-hosting-link > .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.subti-hosting-link h2 { font-size: 23px; line-height: 1.3; margin: 0 0 10px; color: var(--ink); }
.subti-hosting-link p { font-size: 14px; margin: 0; line-height: 1.7; }
.subti-hosting-link .button { flex-shrink: 0; }
.subti-use-case { padding: 38px 0 42px; background: #f7faff; border-top: 1px solid #e7edf5; }
.subti-use-case .container > p:not(.subti-eyebrow), .subti-use-case .check-list { max-width: 900px; font-size: 15px; line-height: 1.8; }
.subti-use-case a:not(.button) { color: var(--blue); text-underline-offset: 3px; }
.subti-directory-grid > a { position: relative; display: flex; flex-direction: column; padding: 25px; border: 1px solid #dfe7f1; border-radius: 8px; text-decoration: none; background: #fff; transition: border-color .2s, background .2s; }
.subti-directory-grid > a:hover { border-color: var(--blue); background: #f7fbff; }
.subti-directory-grid > a > span { font-size: 12px; color: var(--blue); }
.subti-site .subti-directory-grid h2 { color: var(--ink); font-size: 20px; line-height: 1.3; margin: 18px 0 12px; letter-spacing: -.025em; }
.subti-directory-grid p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 0 0 24px; }
.subti-directory-grid strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 12px; color: var(--blue); }
.subti-directory-grid svg { width: 18px; height: 18px; }
.subti-method-details .container { max-width: 980px; }
.subti-method-details details { border-bottom: 1px solid #dfe7f1; }
.subti-method-details summary { display: flex; align-items: center; gap: 20px; padding: 22px 0; list-style: none; color: var(--ink); cursor: pointer; font-size: 17px; font-weight: 600; }
.subti-method-details summary::-webkit-details-marker, .subti-hosting-extra summary::-webkit-details-marker { display: none; }
.subti-method-details summary > span { font-size: 13px; color: var(--blue); font-weight: 400; }
.subti-method-details summary > b { margin-left: auto; color: var(--blue); font-size: 23px; font-weight: 400; transition: transform .2s; }
.subti-method-details details[open] summary > b { transform: rotate(45deg); }
.subti-method-details details > div { padding: 0 36px 15px; max-width: 850px; font-size: 14px; line-height: 1.8; }
.subti-simple-footer { padding: 17px 0; background: #020b1c; border-top: 1px solid #ffffff14; color: #b4c2d8; }
.subti-simple-footer > .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.subti-simple-footer p { font-size: 11px; margin: 0; }
.subti-simple-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.subti-simple-footer a, .subti-simple-footer button { color: #b4c2d8; background: none; border: 0; padding: 0; font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
.subti-simple-footer a:hover, .subti-simple-footer button:hover { color: #fff; text-decoration: underline; }
body.subti-site.page-pricing main .offer-grid { margin-top: 25px; }
body.subti-site.page-pricing main .offer-card { min-height: 0; padding: 28px; border-radius: 10px; box-shadow: none; background: #fff; }
body.subti-site.page-pricing:not(.page-home):not(.page-404):not(.page-platform) main .offer-card.offer-featured { background: #001233 !important; box-shadow: none; }
body.subti-site.page-pricing main .offer-card-top { margin-bottom: 24px; }
body.subti-site.page-pricing main .offer-card-top > i { width: 44px; height: 44px; border-radius: 8px; }
body.subti-site.page-pricing main .offer-card h3 { font-size: 28px; line-height: 1.15; }
body.subti-site.page-pricing main .offer-card .offer-price { padding: 18px 0; margin: 20px 0; }
body.subti-site.page-pricing main .offer-price strong { font-size: 48px; }
body.subti-site.page-pricing main .offer-includes .check-list li { padding-block: 8px; font-size: 12px; }
body.subti-site.page-pricing main .pricing-step > span { background: var(--blue); box-shadow: none; border-radius: 8px; }
body.subti-site.page-pricing main .pricing-step-two { margin-top: 40px; padding-top: 35px; }
body.subti-site.page-pricing main .employee-offer { margin-top: 24px; padding: 30px; border-radius: 10px; background: var(--blue-deep); box-shadow: none; gap: 35px; }
body.subti-site.page-pricing main .employee-offer h3 { font-size: 30px; line-height: 1.15; }
body.subti-site.page-pricing main .employee-offer-copy > p { font-size: 14px; }
body.subti-site.page-pricing main .pricing-clarity > .container { padding: 0; }
body.subti-site.page-media main .media-library-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body.subti-site.page-media main .media-story-card { background: #fff; color: var(--ink); border: 1px solid #dfe7f1; border-radius: 10px; box-shadow: none; }
body.subti-site.page-media main .media-story-product { display: flex; grid-column: auto; }
body.subti-site.page-media main .media-story-product .media-story-visual { aspect-ratio: 16 / 9; }
body.subti-site.page-media main .media-story-copy { padding: 23px; min-height: 0; }
body.subti-site.page-media main .media-story-copy h2 { margin: 22px 0 14px; font-size: 23px; line-height: 1.2; color: var(--ink); }
body.subti-site.page-media main .media-story-copy p { color: var(--text); font-size: 13px; }
body.subti-site.page-media main .media-story-copy > small, body.subti-site.page-media main .media-story-copy a, body.subti-site.page-media main .media-story-copy strong { color: var(--blue); }
body.subti-site.page-contact main .contact-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 48px; }
body.subti-site.page-contact main .contact-paths { padding: 0; background: none; border: 0; }
body.subti-site.page-contact main .contact-paths h2 { color: var(--ink); font-size: 27px; line-height: 1.2; }
body.subti-site.page-contact main .contact-form { padding: 28px; background: #f7faff; border: 1px solid #dce6f1; border-radius: 10px; box-shadow: none; }
body.subti-site.page-contact main .calendar-direct-card { padding: 23px; border-radius: 8px; box-shadow: none; background: #f0f6fd; }
body.subti-site.page-contact main .contact-form legend { font-size: 26px; line-height: 1.2; color: var(--ink); }
body.subti-site.page-vision main .integration-vision-showcase .integration-grid > .integration-card { min-height: 0; border-radius: 10px; padding: 28px; box-shadow: none; }
body.subti-site.page-vision main .integration-vision-showcase .integration-card h3 { font-size: 28px; }
body.subti-site:not(.page-home):not(.page-404) main .resource-grid { gap: 18px; }
body.subti-site:not(.page-home):not(.page-404) main .resource-grid > a { min-height: 190px; border: 1px solid #dfe7f1; padding: 25px; border-radius: 8px; box-shadow: none; background: #fff; }
body.subti-site:not(.page-home):not(.page-404) main .resource-grid h2 { font-size: 24px; color: var(--ink); }
body.subti-site:not(.page-home):not(.page-404) main .resource-grid > a > span { color: var(--blue); }
body.subti-site:not(.page-home):not(.page-404) main .faq-layout { gap: 45px; }
body.subti-site:not(.page-home):not(.page-404) main .faq-list details { border: 1px solid #e0e8f2; border-radius: 6px; background: #fff; box-shadow: none; }
body.subti-site:not(.page-home):not(.page-404) main .faq-list summary { font-size: 15px; color: var(--ink); }
@media (max-width: 1024px) {
  body.subti-site:not(.page-home):not(.page-404) { --header-height: 74px; }
  .subti-detail-grid, .subti-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .subti-detail-grid > article:last-child:nth-child(odd) { grid-column: 1/-1; }
  .subti-ability { width: 150px; min-height: 84px; padding: 13px; }
  .subti-breakthrough-card > p { min-height: 150px; }
  .subti-architecture { padding: 35px 0; }
  body.subti-site.page-media main .media-library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .subti-site .subti-compact-heading h2 { font-size: 14px; }
  .subti-intro-art { inset: auto; height: 390px; }
  .subti-abilities { top: 10px; right: 18px; }
  .subti-intro-art > img { object-position: center bottom; }
  .subti-ability { width: 145px; min-height: 80px; }
  .subti-breakthrough-card > p { min-height: 0; }
  .subti-architecture { padding: 40px 0; }
  .subti-stack { height: 300px; width: 300px; max-width: 100%; }
  .subti-brand-cta > .container { gap: 22px; }
  .subti-page-heading { padding: 36px 0; }
  .subti-site .subti-page-heading h1 { font-size: clamp(30px, 7vw, 38px); overflow-wrap: break-word; }
  .subti-page-lead { font-size: 15px; }
  .subti-detail-section, .subti-directory, .subti-method-details { padding: 32px 0 38px; }
  .subti-detail-grid, .subti-directory-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .subti-detail-grid > article, .subti-directory-grid > a { padding: 23px; }
  .subti-detail-grid > article:last-child:nth-child(odd) { grid-column: auto; }
  .subti-hosting-link > .container { flex-direction: column; align-items: flex-start; gap: 20px; }
  .subti-hosting-link h2 { font-size: 22px; }
  .subti-method-details details > div { padding-inline: 0; }
  .subti-simple-footer > .container { flex-direction: column; align-items: flex-start; }
  .subti-simple-footer nav { gap: 14px; }
  body.subti-site.page-pricing main .employee-offer { grid-template-columns: minmax(0,1fr); padding: 24px; gap: 22px; }
  body.subti-site.page-pricing main .offer-card { padding: 24px; }
  body.subti-site.page-contact main .contact-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
  body.subti-site.page-contact main .contact-form { padding: 22px 18px; }
  body.subti-site.page-contact main .contact-form legend { font-size: 23px; }
  body.subti-site.page-media main .media-library-grid { grid-template-columns: minmax(0,1fr); }
  body.subti-site:not(.page-home):not(.page-404) main .section { padding: 32px 0; }
  body.subti-site:not(.page-home):not(.page-404) main .section-head h2 { font-size: 26px; }
  body.subti-site:not(.page-home):not(.page-404) main .section-head > p:not(.eyebrow) { font-size: 14px; }
  .subti-video-cover > span { width: 34px; height: 34px; font-size: 14px; }
}
/* Readable supporting copy and compact contact controls. */
@media (min-width: 1025px) {
  .subti-intro-copy > p:not(.subti-eyebrow) { font-size: 17px; max-width: 480px; line-height: 1.65; }
  .subti-breakthrough-card > p { font-size: 13px; min-height: 110px; line-height: 1.75; }
  .subti-breakthrough-card .subti-checks li { font-size: 12px; }
  .subti-layer-labels h3 { font-size: 16px; }
  .subti-layer-labels p { font-size: 13px; }
  .subti-control-copy p { font-size: 13px; }
  .subti-light > strong { font-size: 12px; }
  .subti-light > p { font-size: 11px; }
  .subti-journey h3 { font-size: 14px; }
  .subti-journey li > p { font-size: 12px; }
}
body.subti-site:not(.page-home):not(.page-404) :is(.subti-film, .subti-architecture, .subti-control, .subti-journey, .subti-hosting, .subti-methodology, .subti-brand-cta) > .container { width: min(calc(100% - (2 * var(--gutter))), 1240px); }
body.subti-site.page-contact main :is(.contact-form, .calendar-direct-card)::before,
body.subti-site.page-contact main :is(.contact-form, .calendar-direct-card)::after { display: none; }
body.subti-site.page-contact main .calendar-direct-card h3 { font-size: 22px; line-height: 1.3; margin: 0 0 14px; }
body.subti-site.page-contact main .calendar-direct-card p { color: var(--text); font-size: 14px; line-height: 1.7; }
body.subti-site.page-contact main .calendar-inline-trigger { color: var(--blue-deep); }
body.subti-site.page-contact main .role-choice-grid label > span { min-height: 105px; padding: 17px; border-radius: 6px; }
body.subti-site.page-contact main .contact-form .form-progress { margin-top: 0; }
body.subti-site.page-contact main .contact-form .form-status:empty { margin: 0; min-height: 0; }
/* Contact requests: show confirmation only after server acceptance. */
body.subti-site .form-status[data-state="success"] { color: #087847; }
body.subti-site .form-status[data-state="error"] { color: #b42318; }
body.subti-site .form-status:not(:empty) { margin-top: 1rem; }
body.subti-site .contact-email-fallback a { color: #155eef; text-decoration: underline; }
body.subti-site .contact-form [disabled] { cursor: wait; opacity: .65; }