/* Layout: the w3basics page structure (hero, how it works, use cases, anatomy, method, pricing, why GDS, work, FAQ, feed, contact)
   re-skinned in the gdservices.io brand: white canvas, Poppins headings with one blue phrase, pill buttons, deep-navy bands.
   The logo's four faceted blues are the only ornament. Tokens map 1:1 to a WordPress theme.json. */
:root {
  --bg: #FFFFFF; --surface: #F3F6FB; --card: #FFFFFF;
  --fg: #172033; --muted: #4F5B73; --line: #DAE2EE;
  --blue: #044FA0; --blue-bright: #1863DC; --blue-soft: #E6EEFB; --on-blue: #FFFFFF;
  --facet-0: #8AD6F5; --facet-1: #3CBEF0; --facet-2: #0099DF; --facet-3: #0070BA; --facet-4: #044FA0;
  --band: #F3F6FB; --band-2: #FFFFFF; --band-fg: #172033; --band-muted: #4F5B73; --band-line: #DAE2EE; --band-accent: #044FA0;
  --ok: #17734A; --ok-soft: #E3F4EA; --wait: #8A5300; --wait-soft: #FBF0DC;
  --shadow: 0 1px 2px rgba(10,42,87,.06), 0 12px 32px -12px rgba(10,42,87,.18);
  --display: "Poppins", "Segoe UI", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 14px; --wrap: 1200px; color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(56px, 7.5vw, 96px); }
[hidden] { display: none !important; }
:root .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), translate .25s ease, border-color .2s, box-shadow .25s, background .2s; }
:root .rv.in { opacity: 1; transform: none; }
:root .post.rv .bar i { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .3s; }
:root .post.rv.in .bar i { transform: none; }
.use, .svc, .why > div, .case, .post, .person, .rung { transition: translate .25s ease, box-shadow .25s ease, border-color .2s; }
.use:hover, .svc:hover, .why > div:hover, .case:hover, .post:hover, .person:hover, .rung:hover { translate: 0 -3px; box-shadow: var(--shadow); }
.rung.start:hover { box-shadow: inset 0 0 0 1px var(--band-accent), var(--shadow); }
.mpanel.fadein { animation: mpIn .35s ease; }
@keyframes mpIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .use:hover, .svc:hover, .why > div:hover, .case:hover, .post:hover, .person:hover, .rung:hover { translate: none; } }

.tint { background: var(--surface); }
h1, h2, h3 { font-family: var(--display); color: var(--fg); margin: 0; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(40px, 5.6vw, 66px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.015em; }
h3 { font-weight: 600; font-size: 19px; line-height: 1.3; }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 3px; }
.hl { color: var(--blue); }
.eyebrow { font: 500 13px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: flex; align-items: center; gap: 10px; }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--muted); max-width: 62ch; }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px; }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--blue-bright); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.ph { font-family: var(--mono); font-weight: 500; color: var(--wait); background: var(--wait-soft); border-radius: 6px; padding: 0 .25em; }
.band .ph { color: #F2B65C; background: rgba(242,182,92,.14); }

html[data-lang="en"] [lang="es"]:not(html), html[data-lang="es"] [lang="en"]:not(html) { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 600 16px/1.2 var(--display); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--blue-bright); color: var(--on-blue); }
.btn-primary:hover { background: var(--facet-4); }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 14.5px; }
.btn svg { width: 18px; height: 18px; flex: none; }

header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; gap: 20px; min-height: 58px; box-sizing: border-box; padding-top: 10px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand .plate { display: inline-flex; padding: 4px 6px; border-radius: 8px; }
.brand img { height: 34px; width: auto; display: block; }
nav.main { display: flex; gap: 2px; margin-left: auto; }
nav.main a { color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 11px; border-radius: 8px; }
nav.main a:hover { background: var(--surface); }
.langsw { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex: none; }
.langsw button { font: 500 13.5px/1 var(--body); border: 0; background: transparent; color: var(--muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.langsw button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue); }
.menu-btn { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; color: var(--fg); cursor: pointer; }
@media (max-width: 1120px), (min-width: 1200px) and (max-width: 1260px) { nav.main a.opt { display: none; } }
@media (max-width: 880px) {
  nav.main { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); }
  nav.main.open { display: flex; }
  nav.main a, nav.main a.opt { display: block; font-size: 17px; padding: 12px 8px; }
  .menu-btn { display: inline-grid; place-items: center; }
  header.site .head-cta { display: none; }
}

.hero { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 80px); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 70%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.tagline { display: grid; gap: 2px; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.45; }
.tagline > span { color: var(--muted); }
.tagline b { font: 600 1em/1.45 var(--display); color: var(--fg); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.micro { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--muted); padding: 0; margin: 0; list-style: none; }
.micro li { display: flex; align-items: center; gap: 8px; }
.micro svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.hero-art { position: relative; min-width: 0; }
.facets-bg { position: absolute; inset: -18% -30% -10% -6%; z-index: 0; pointer-events: none; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .facets-bg { inset: -6% -40% -6% 10%; } }

.art-note { margin-top: 10px; text-align: center; font: 400 12.5px/1.4 var(--mono); color: var(--muted); }
.cycle, .fitcard { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.slides { display: grid; position: relative; z-index: 1; }
.slide { grid-area: 1 / 1; transition: opacity .6s ease, visibility .6s; }
.slide:not(.on) { opacity: 0; visibility: hidden; }
.fitcard { display: flex; flex-direction: column; }
.fit-body { flex: 1; display: flex; align-items: center; padding: 22px 18px; }
.flow.flow-v { width: 100%; max-width: 420px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.flow.flow-v .srcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow.flow-v .arr { transform: rotate(90deg); justify-self: center; margin-block: 14px; }
.cyc-right { display: flex; align-items: center; gap: 8px; flex: none; }
.snext { position: relative; flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--blue); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.snext svg { width: 18px; height: 18px; }
.snext:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-blue); }
.snext:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.uses-mini { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uses-mini li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px 10px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.uses-mini svg { grid-row: span 2; width: 22px; height: 22px; color: var(--blue); }
.uses-mini .dept { font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.uses-mini .uw { font-weight: 500; font-size: 14px; line-height: 1.35; }
.uses-mini li { transition: background .3s, border-color .3s; }
.slide.on .uses-mini li { animation: useIn .55s cubic-bezier(.2,.7,.3,1) both, useScan 8s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms), calc(.9s + var(--i) * 1s); }
@keyframes useIn { from { opacity: 0; translate: 0 12px; } }
@keyframes useScan { 0%, 13%, 100% { background: var(--card); border-color: var(--line); } 4%, 9% { background: var(--blue-soft); border-color: var(--blue-bright); } }
@media (max-width: 560px) { #heroS2 .fit-body { padding: 14px; } .uses-mini { gap: 6px; } .uses-mini li { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; gap: 4px; } .uses-mini svg { display: none; } .uses-mini .dept { font-size: 10.5px; } .uses-mini .uw { font-size: 13px; line-height: 1.3; } }
.slide-nav { position: relative; z-index: 1; display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.sdot { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.sdot .vh, .snext .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sdot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--line); transition: width .3s, background .3s; }
.sdot[aria-pressed="true"]::before { width: 24px; background: var(--blue-bright); }
.sdot:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: -4px; border-radius: 999px; }
.cyc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cyc-top b { font: 600 17px/1.2 var(--display); display: block; }
.cyc-top small { font: 400 13px/1.3 var(--mono); color: var(--muted); }
.cyc-count { font: 500 12.5px/1 var(--mono); color: var(--blue); background: var(--blue-soft); padding: 7px 10px; border-radius: 999px; white-space: nowrap; }
.cyc-stage { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: 0 auto; }
.cyc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cyc-core { fill: var(--surface); }
.cyc-trk { fill: none; stroke: var(--line); stroke-width: 22; stroke-linecap: round; }
.cyc-arc { fill: none; stroke-width: 22; stroke-linecap: round; opacity: 0; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: opacity .5s ease, stroke-dashoffset .5s ease; }
.cyc-arc.done { opacity: 1; stroke-dashoffset: 0; }
.cyc-arc.cur { opacity: 1; stroke-dashoffset: 50; transition: opacity .3s ease; }   /* JS fills it in step with the auto-advance timer */
.cycle.swap .cyc-center, .cycle.swap .cyc-detail { animation: cycSwap .45s ease; }
@keyframes cycSwap { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .cyc-arc { transition: none; } .cycle.swap .cyc-center, .cycle.swap .cyc-detail { animation: none; } }
.cyc-chev { fill: none; stroke: var(--blue); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.cnode { position: absolute; transform: translate(-50%, -50%); font: 600 15px/1 var(--display); color: var(--fg); background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: 12px 18px; min-height: 44px; box-shadow: 0 2px 6px -2px rgba(10,42,87,.18); white-space: nowrap; cursor: pointer; transition: background .45s ease, border-color .45s ease, color .45s ease, box-shadow .3s ease; }
.cnode.done { border-color: var(--facet-2); color: var(--blue); }
.cnode.cur { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-blue); }
.cnode[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5.5px var(--blue); }
.cnode:focus-visible, .cyc-go:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.cyc-center { position: absolute; inset: 33% 24%; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.cyc-center b { font: 600 17px/1.15 var(--display); color: var(--fg); }
.cyc-center .chip { font-size: 11.5px; }
.cyc-num, .cyc-st { display: none; }
.cyc-detail b.cyc-st { font-weight: 600; color: var(--fg); }
.cyc-delivered { color: var(--ok); }
.chip.next { color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.cyc-go { font: 600 13px/1 var(--display); border-radius: 999px; padding: 9px 14px; min-height: 36px; cursor: pointer; border: 0; background: var(--blue-bright); color: var(--on-blue); white-space: nowrap; }
.cyc-go.ghost { background: var(--card); color: var(--blue); border: 1.5px solid var(--line); }
.cyc-row { margin: 2px 18px 16px; padding: 12px 12px 12px 14px; background: var(--surface); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.cyc-detail { margin: 0; flex: 1 1 200px; min-width: 0; font-size: 14.5px; color: var(--muted); }
.cyc-detail b { color: var(--fg); font-weight: 600; }
@media (max-width: 480px) {
  .cnode { font-size: 12.5px; padding: 9px 11px; min-height: 36px; }
  #cyN1 { left: auto !important; right: 3px; transform: translateY(-50%); }
  #cyN4 { left: 3px !important; transform: translateY(-50%); }
  .cyc-center b, .cyc-center .chip { display: none; }
  .cyc-center { inset: 36%; }
  .cyc-num { display: block; font: 700 30px/1 var(--display); color: var(--blue); letter-spacing: -.02em; }
  .cyc-st { display: inline; }
  .cyc-top { align-items: flex-start; }
}
.inbox { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.inbox-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ring { width: 54px; height: 54px; flex: none; }
.ring .trk { fill: none; stroke: var(--line); stroke-width: 6; }
.ring .val { fill: none; stroke: var(--facet-2); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .5s ease; }
.ring text { font: 600 13px var(--display); fill: var(--fg); }
.inbox-top b { font: 600 17px/1.2 var(--display); display: block; }
.inbox-top small { font: 400 13px/1.3 var(--mono); color: var(--muted); }
.items { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; }
.it { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; border-radius: 12px; }
.it .txt { font-size: 15.5px; min-width: 0; }
.chip { font: 500 12.5px/1 var(--mono); padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.chip.done { color: var(--ok); background: var(--ok-soft); }
.chip.wait { color: var(--wait); background: var(--wait-soft); }
.it.pending { background: var(--wait-soft); }
.it .acts { flex-basis: 100%; display: flex; gap: 8px; }
.it .acts button { font: 600 13.5px/1 var(--display); border-radius: 999px; padding: 9px 16px; min-height: 36px; cursor: pointer; border: 1.5px solid var(--line); background: var(--card); color: var(--fg); }
.it .acts button.approve { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-blue); }
.inbox-foot { border-top: 1px solid var(--line); padding: 12px 18px; font: 400 12.5px/1.4 var(--mono); color: var(--muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.assure { background: var(--bg); border-top: 1px solid var(--line); padding-block: 28px; }
.assure .wrap { display: grid; gap: 14px; }
.assure-h { margin: 0; font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.assure ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.assure li { display: flex; gap: 12px; align-items: flex-start; }
.assure svg { width: 26px; height: 26px; flex: none; color: var(--blue-bright); margin-top: 1px; }
.assure b { display: block; font: 600 16px/1.3 var(--display); color: var(--fg); }
.assure li span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1000px) { .assure ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .assure ul { grid-template-columns: minmax(0, 1fr); } }
.strip { border-block: 1px solid var(--line); background: var(--surface); padding-block: 22px; }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; justify-content: space-between; }
.strip .label { font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.strip .wrap { flex-wrap: nowrap; gap: 32px; }
.strip .label { flex: none; }
.marquee { position: relative; flex: 1 1 auto; min-width: 0; margin-left: 50px; overflow: hidden; display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { list-style: none; margin: 0; padding: 0 56px 0 0; display: flex; align-items: center; gap: 56px; flex: none; animation: mq 16s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-100%); } }
.mq-track li { flex: none; display: flex; align-items: center; height: 40px; }
.lg { transition: opacity .2s, color .2s, filter .2s; opacity: .62; }
.lg-word { font: 22px/1 var(--display); color: var(--fg); white-space: nowrap; }
.mq-track li .lg-word { animation: lgWave 7.5s ease-in-out infinite; }
.mq-track li:nth-child(2) .lg-word { animation-delay: 1.5s; } .mq-track li:nth-child(3) .lg-word { animation-delay: 3s; }
.mq-track li:nth-child(4) .lg-word { animation-delay: 4.5s; } .mq-track li:nth-child(5) .lg-word { animation-delay: 6s; }
@keyframes lgWave { 0%, 24%, 100% { opacity: .62; color: var(--fg); transform: none; } 9%, 15% { opacity: 1; color: var(--blue); transform: translateY(-2px) scale(1.04); } }
.lg-word { display: inline-block; }
.marquee { animation: mqIn .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mqIn { from { opacity: 0; transform: translateX(24px); } }
.mq-track li:hover .lg { opacity: 1; animation-play-state: paused; }
.mq-track li:hover .lg-word { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .mq-track[aria-hidden] { display: none; } .marquee { -webkit-mask-image: none; mask-image: none; } .mq-track { flex-wrap: wrap; gap: 16px 40px; } }
@media (max-width: 700px) { .strip .wrap { flex-direction: column; align-items: flex-start; gap: 14px; } .marquee { width: 100%; } .marquee { margin-left: 0; } .mq-track { gap: 40px; padding-right: 40px; animation-duration: 13s; } .lg-word { font-size: 19px; } }
.clients { display: flex; flex-wrap: wrap; gap: 10px 36px; font: 600 20px/1.2 var(--display); color: var(--fg); opacity: .8; }

.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.flow .srcs { display: grid; gap: 10px; }
.node { border-radius: 14px; padding: 14px 12px; text-align: center; font: 600 15.5px/1.3 var(--display); border: 1px solid var(--line); background: var(--card); }
.node.agent { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-blue); padding-block: 26px; }
.node small { display: block; font: 400 12.5px/1.3 var(--mono); opacity: .9; margin-top: 4px; }
.node.out { background: var(--blue-soft); border-color: transparent; color: var(--blue); padding-block: 26px; }
.arr { position: relative; display: block; width: 38px; height: 2px; border-radius: 2px; background: #C3CEDF; }
.arr::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 2px solid #C3CEDF; border-right: 2px solid #C3CEDF; transform: translateY(-50%) rotate(45deg); }
.arr i { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--facet-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--facet-1) 25%, transparent); animation: flowDot 1.8s cubic-bezier(.5,0,.5,1) infinite; }
.flow .arr:last-of-type i { animation-delay: .9s; }
@keyframes flowDot { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .arr i { display: none; } }
.how-copy { display: grid; gap: 16px; }
.how-copy p { color: var(--muted); }
.how-copy p.strong { color: var(--fg); font-weight: 600; }
@media (max-width: 960px) { .how { grid-template-columns: minmax(0, 1fr); gap: 36px; } .how .flow { order: 2; } }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } .arr { transform: rotate(90deg); justify-self: center; } .flow .srcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.use { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.use svg { width: 26px; height: 26px; color: var(--blue); }
.use .dept { font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.use b { font-weight: 500; font-size: 16px; line-height: 1.4; }
@media (max-width: 960px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

button.svc { font: inherit; color: inherit; text-align: left; cursor: pointer; position: relative; }
.svc-t { font: 600 19px/1.3 var(--display); color: var(--fg); }
.svc-ul { margin: 6px 0 0; padding: 12px 0 0; display: grid; gap: 7px; border-top: 1px solid var(--line); }
.svc-li { position: relative; padding-left: 16px; font-size: 14.5px; }
.svc-li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--facet-1); transform: skewX(-20deg); }
.svc-check { position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.svc-check svg { width: 14px; height: 14px; }
button.svc[aria-pressed="true"] { border-color: var(--blue-bright); box-shadow: inset 0 0 0 1px var(--blue-bright), var(--shadow); background: linear-gradient(180deg, var(--blue-soft), var(--card) 55%); }
button.svc[aria-pressed="true"] .svc-check { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--on-blue); }
button.svc:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.svc-plan { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.svc-plan-txt { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.svc-plan-txt b { font: 600 17px/1.3 var(--display); }
.svc-plan-txt span { color: var(--muted); font-size: 15.5px; }
.svc-plan.empty .btn { display: none; }
.svcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; display: grid; gap: 10px; align-content: start; transition: border-color .2s, box-shadow .2s; }
.svc:hover { border-color: var(--facet-2); box-shadow: var(--shadow); }
.svc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.svc-ic svg { width: 24px; height: 24px; }
.svc:nth-child(1) .svc-ic { box-shadow: inset 0 -3px 0 var(--facet-0); } .svc:nth-child(2) .svc-ic { box-shadow: inset 0 -3px 0 var(--facet-1); } .svc:nth-child(3) .svc-ic { box-shadow: inset 0 -3px 0 var(--facet-2); }
.svc:nth-child(4) .svc-ic { box-shadow: inset 0 -3px 0 var(--facet-3); } .svc:nth-child(5) .svc-ic { box-shadow: inset 0 -3px 0 var(--facet-4); }
.svc p { color: var(--muted); font-size: 15.5px; }
.svc ul { margin: 6px 0 0; padding: 12px 0 0; list-style: none; display: grid; gap: 7px; border-top: 1px solid var(--line); }
.svc li { position: relative; padding-left: 16px; font-size: 14.5px; }
.svc li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--facet-1); transform: skewX(-20deg); }
@media (max-width: 1100px), (min-width: 1200px) and (max-width: 1238px) { .svcs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .svc { grid-column: span 2; } .svc:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 760px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc, .svc:nth-child(n+4) { grid-column: auto; } .svc:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .svcs { grid-template-columns: minmax(0, 1fr); } .svc:last-child { grid-column: auto; } }
.layers { display: grid; gap: 10px; max-width: 900px; margin-inline: auto; }
.layer { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; }
.layer .nm { font: 600 20px/1.2 var(--display); text-align: right; }
.layer .box { border-radius: 16px; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; text-align: center; border: 1.5px solid; }
.layer .box b { font: 600 19px/1.3 var(--display); width: 100%; }
.layer .box .sub { font-size: 15px; width: 100%; }
.layer .pill { border: 1.5px solid currentColor; border-radius: 999px; padding: 6px 14px; font-weight: 500; font-size: 15px; }
.l1 .nm { color: var(--fg); } .l1 .box { color: var(--fg); border-color: var(--line); background: var(--card); }
.l2 .nm { color: var(--facet-4); } .l2 .box { color: #FFFFFF; background: var(--facet-4); border-color: var(--facet-4); }
.l3 .nm { color: var(--facet-3); } .l3 .box { color: var(--fg); background: color-mix(in srgb, var(--facet-2) 14%, var(--card)); border-color: var(--facet-2); }
.l4 .nm { color: var(--facet-2); } .l4 .box { color: var(--fg); background: color-mix(in srgb, var(--facet-1) 14%, var(--card)); border-color: var(--facet-1); }
.down { text-align: center; color: var(--muted); font: 500 16px/1 var(--mono); margin-left: 204px; }
@media (max-width: 700px) { .layer { grid-template-columns: minmax(0, 1fr); gap: 8px; } .layer .nm { text-align: left; } .down { margin-left: 0; } }

.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px), (min-width: 1200px) and (max-width: 1238px) { .phases { grid-template-columns: repeat(6, minmax(0, 1fr)); } .phase { grid-column: span 2; } .phase:nth-child(n+4) { grid-column: span 3; } }
.phase { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--facet-2); border-radius: 14px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.phase:nth-child(1) { border-top-color: var(--facet-0); } .phase:nth-child(2) { border-top-color: var(--facet-1); } .phase:nth-child(3) { border-top-color: var(--facet-2); } .phase:nth-child(4) { border-top-color: var(--facet-3); } .phase:nth-child(5) { border-top-color: var(--facet-4); }
.phase .bill, .mfit .bill { justify-self: start; white-space: nowrap; font: 600 13px/1.3 var(--body); color: var(--blue); background: var(--blue-soft); padding: 5px 9px; border-radius: 999px; margin-top: 2px; }
.mfit .bill.free { color: var(--ok); background: var(--card); border: 1px solid var(--line); }
.mfit { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; padding: 16px 20px; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--card); }
.mfit .n { font: 500 13px/1 var(--mono); color: var(--blue); }
.mfit-t { display: flex; align-items: center; gap: 10px; }
.mfit-t b { font: 600 18px/1.25 var(--display); }
.mfit p { margin: 0; flex: 1 1 320px; min-width: 0; color: var(--muted); font-size: 15px; }
.mfit .tag { position: absolute; top: -11px; left: 18px; background: var(--blue-bright); color: var(--on-blue); font: 600 12px/1 var(--display); padding: 5px 10px; border-radius: 999px; }
#method .price-note { margin: 16px 0 0; color: var(--muted); font-size: 14.5px; }
.phases-loop { margin: 14px 0 0; display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 15px; }
.phases-loop svg { width: 20px; height: 20px; flex: none; color: var(--ok); margin-top: 1px; }
.phases-loop b { color: var(--ok); font-weight: 600; }
.phase .n { font: 500 13px/1 var(--mono); color: var(--blue); }
.phase p { color: var(--muted); font-size: 15px; }
button.phase .pt { font: 600 18px/1.25 var(--display); color: var(--fg); }
button.phase { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
button.phase:hover { border-color: var(--blue-bright); }
button.phase[aria-selected="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), var(--shadow); }
button.phase:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.mpanel { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.mp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.mp-head .n { font: 500 13px/1 var(--mono); color: var(--blue); }
.mp-head b { font: 600 22px/1.2 var(--display); }
.mp-head .dur { margin-left: auto; font: 500 13px/1.3 var(--mono); color: var(--muted); }
.mp-cols { display: grid; gap: 14px; }
.mp-more summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--blue); width: max-content; }
.mp-more summary:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }
.mp-more-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.why-in { margin-top: 40px; }
.mp-cols h4 { margin: 0 0 10px; font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.mp-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mp-cols li { position: relative; padding-left: 16px; font-size: 15px; color: var(--fg); }
.mp-cols li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--facet-1); transform: skewX(-20deg); }
.mp-cols .gate { background: var(--blue-soft); border-radius: 10px; padding: 14px 16px; }
.mp-cols .gate p { margin: 0; font-size: 15px; color: var(--fg); }
@media (max-width: 1000px) { .mp-more-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #method .phases { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  #method .phase { grid-column: span 2; padding: 12px 8px; gap: 4px; border-top-width: 3px; }
  #method .phase:nth-child(n+4) { grid-column: span 3; }
  #method .phase p, #method .phase .bill { display: none; }
  #method .phase .pt { font-size: 13.5px; hyphens: auto; }
}
@media (max-width: 400px) { #method .phases { gap: 6px; } #method .phase { padding: 10px 6px; } #method .phase .pt { font-size: 12.5px; } }
@media (max-width: 440px) { #method .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } #method .phase, #method .phase:nth-child(n+4) { grid-column: auto; } #method .phase:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mp-more-cols { grid-template-columns: minmax(0, 1fr); } .mpanel { padding: 18px; } .mp-head .dur { margin-left: 0; width: 100%; } }
.goals { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.goals div { display: grid; gap: 4px; }
.goals b { font: 600 16px/1.3 var(--display); }
.goals span { color: var(--muted); font-size: 15px; }
.after { margin-top: 32px; }
@media (max-width: 700px) { .phases, .goals { grid-template-columns: minmax(0, 1fr); } }

.band { background: var(--band); color: var(--band-fg); }
.band h2, .band h3 { color: var(--band-fg); }
.band .eyebrow { color: var(--band-accent); }
.band .lead { color: var(--band-muted); }

.ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rung { background: var(--band-2); border: 1px solid var(--band-line); border-radius: 14px; padding: 22px 20px; display: grid; gap: 10px; align-content: start; position: relative; }
.rung h3 { font-size: 18px; color: var(--band-accent); }
.rung .price { font: 600 26px/1.1 var(--display); color: var(--band-fg); }
.rung .price small { font: 500 13px/1 var(--body); color: var(--band-muted); display: block; margin-top: 4px; }
.rung p { color: var(--band-muted); font-size: 15px; }
.rung.start { border-color: var(--band-accent); box-shadow: inset 0 0 0 1px var(--band-accent); }
.rung .tag { position: absolute; top: -12px; left: 18px; background: var(--band-accent); color: #FFFFFF; font: 600 12px/1 var(--display); padding: 6px 10px; border-radius: 999px; }
.price-note { margin-top: 20px; color: var(--band-muted); font-size: 14.5px; }
@media (max-width: 1100px), (min-width: 1200px) and (max-width: 1238px) { .ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ladder { grid-template-columns: minmax(0, 1fr); } }

.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.why > div { border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; background: var(--card); }
.why svg { width: 26px; height: 26px; color: var(--blue); }
.why h3 { color: var(--blue); font-size: 18px; }
.why p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 960px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why { grid-template-columns: minmax(0, 1fr); } }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.case .k { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--band-accent); }
.case h3 { font-size: 20px; }
.case p { color: var(--band-muted); font-size: 15.5px; }
.quotes { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quotes figure { margin: 0; border-left: 3px solid var(--band-accent); padding: 4px 0 4px 18px; display: grid; gap: 10px; }
.quotes blockquote { margin: 0; font: 500 17px/1.5 var(--display); color: var(--band-fg); }
.quotes figcaption { font-size: 14px; color: var(--band-muted); }
.quotes figcaption b { color: var(--band-fg); display: block; font-weight: 600; }
.work-note { margin-top: 20px; font-size: 14px; color: var(--band-muted); }
@media (max-width: 900px) { .cases, .quotes { grid-template-columns: minmax(0, 1fr); } }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.person { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 14px; background: var(--card); align-content: start; }
.avatar { grid-row: span 3; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--facet-2), var(--facet-4)); }
.person .nm { font: 600 16px/1.3 var(--display); }
.person .rl { color: var(--blue); font-size: 14.5px; font-weight: 500; }
.person .cr { color: var(--muted); font-size: 13.5px; }
.team .person { display: flex; flex-direction: column; gap: 2px; padding: 20px; }
.team .person .avatar { margin-bottom: 12px; }
.avatar.ini { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font: 700 24px/1 var(--display); color: #fff; letter-spacing: .02em; }
.avatar.photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--line); }
.person .bio { margin: 10px 0 0; color: var(--fg); font-size: 14.5px; line-height: 1.55; max-width: 60ch; }
.person .li { margin-top: auto; padding-top: 12px; align-self: flex-start; font-weight: 600; font-size: 14.5px; color: var(--blue); text-decoration: none; }
.person .li:hover { text-decoration: underline; }
.bench { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; border: 1px dashed var(--line); border-radius: 14px; padding: 22px; background: var(--card); }
.bench b { font: 600 16px/1.35 var(--display); }
.bench ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bench li { font-size: 14px; font-weight: 500; color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 7px 12px; }
.team-note { margin-top: 16px; color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team { grid-template-columns: minmax(0, 1fr); } }

.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; font: 600 17px/1.4 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 22px/1 var(--mono); color: var(--blue); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 20px 20px; color: var(--muted); max-width: 72ch; }

.feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.post { border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 12px; align-content: start; background: var(--card); }
.post .src { font: 500 12.5px/1.3 var(--mono); color: var(--muted); letter-spacing: .03em; }
.post h3 { font-size: 17.5px; }
.post p { color: var(--muted); font-size: 15px; }
.post a { font-weight: 600; font-size: 15px; }
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 72px minmax(0, 1fr) 42px; gap: 10px; align-items: center; font: 400 12.5px/1 var(--mono); color: var(--muted); }
.bar i { display: block; height: 10px; border-radius: 6px; background: var(--facet-2); }
.bar.dim i { background: var(--line); }
.bar em { font-style: normal; color: var(--fg); font-weight: 500; text-align: right; }
.feed-note { margin-top: 16px; color: var(--muted); font-size: 14px; }
@media (max-width: 960px) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feed { grid-template-columns: minmax(0, 1fr); } }

.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.gets { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.gets li { display: flex; gap: 12px; align-items: flex-start; color: var(--band-fg); }
.gets svg { width: 20px; height: 20px; color: var(--band-accent); flex: none; margin-top: 3px; }
.reach { margin-top: 28px; display: grid; gap: 10px; color: var(--band-muted); font-size: 15.5px; }
.reach .line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reach code { font: 500 15px/1 var(--mono); color: var(--band-fg); user-select: all; background: var(--band-2); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--band-line); }
.reach button { font: 500 13.5px/1 var(--body); color: var(--band-fg); background: transparent; border: 1px solid var(--band-line); border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 34px; }
.reach a { color: var(--band-accent); font-weight: 600; }
.form { background: var(--card); color: var(--fg); border-radius: 18px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.form h3 { color: var(--fg); font-size: 22px; }
.form a { color: var(--blue); }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 600; font-size: 15px; padding: 0; }
.field input { font: 400 16px/1.4 var(--body); color: var(--fg); background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; min-height: 48px; }
.field input:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 1px; border-color: var(--blue-bright); }
.err { color: #B3261E; font-size: 14px; font-weight: 500; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.focus { display: flex; flex-wrap: wrap; gap: 8px; }
.focus label { position: relative; font-weight: 400; }
.focus input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.focus input + span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 15px; cursor: pointer; background: var(--card); }
.focus input:checked + span { border-color: var(--blue-bright); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.focus input:focus-visible + span { outline: 3px solid var(--blue-bright); outline-offset: 2px; }
.note { font-size: 13.5px; color: var(--muted); }
.ok-box { border-radius: 12px; background: var(--ok-soft); padding: 16px; display: grid; gap: 6px; }
@media (max-width: 960px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

footer { border-top: 1px solid var(--line); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 14.5px; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
footer .about { display: grid; gap: 8px; }
footer .about b { font: 600 17px/1.3 var(--display); color: var(--fg); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; }
footer a { color: var(--muted); }
@media (max-width: 700px) { footer .wrap { grid-template-columns: minmax(0, 1fr); } footer nav { justify-content: flex-start; } }
.mcta { display: none; }
@media (max-width: 880px) {
  .mcta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .25s ease; }
  .mcta.show { transform: none; }
  .mcta .btn { width: 100%; }
  footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* Cookie notice (GA4 consent) */
.cookie-note { position: fixed; left: 16px; bottom: 16px; z-index: 1000; max-width: 420px; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; font-size: 14px; line-height: 1.5; }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0 0 12px; color: var(--muted); }
.cookie-note a { color: var(--blue); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cookie-actions .btn { padding: 8px 18px; font-size: 14px; min-height: 40px; }
footer .cookie-settings { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
footer .cookie-settings:hover { color: var(--fg); text-decoration: underline; }
@media (max-width: 700px) { footer nav .cookie-settings { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; } }
@media (max-width: 600px) { .cookie-note { left: 12px; right: 12px; bottom: 12px; max-width: none; } }


/* ---- WordPress integration ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + *, :where(.is-layout-flow) > * { margin-block-start: 0; }
.wp-block-group { box-sizing: border-box; }
.admin-bar header.site { top: 32px; }
@media (max-width: 782px) { .admin-bar header.site { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.site { top: 0; } }   /* the admin bar scrolls away here */
/* Desktop scale: everything 12.5% larger, like browser zoom at 112.5%. */
@media (min-width: 1200px) {
  html { zoom: 1.125; }
  .admin-bar header.site { top: calc(32px / 1.125); }   /* the admin bar is zoomed with the page */
}
.langsw a { font: 500 13.5px/1 var(--body); color: var(--muted); padding: 8px 12px; border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center; text-decoration: none; }
.langsw a[aria-current="true"] { background: var(--blue-soft); color: var(--blue); }
.langsw a:hover { color: var(--blue); }
.reach a code { cursor: pointer; }
.reach button.copy-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 10px; }
.reach button.copy-ic:hover { color: var(--blue); border-color: var(--blue); }
.reach button.copy-ic.done { color: #137A3B; border-color: #137A3B; }
.book { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; display: grid; }
.book iframe { width: 100%; height: 660px; border: 0; display: block; }   /* Calendly without its header (hide_event_type_details) */
.book .note { margin: 0; padding: 12px 20px 16px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.book .note a { color: var(--blue); font-weight: 600; }
@media (max-width: 700px) { .book iframe { height: 760px; } }
.page-default { padding-block: 56px 80px; }
.page-default .wrap > * + * { margin-top: 1em; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.blog-index { padding-block: clamp(48px, 6vw, 80px); border-top: 0; }
.blog-index h1 { font: 700 clamp(30px, 4vw, 44px)/1.15 var(--display); margin: 8px 0 28px; text-wrap: balance; }
.pager { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.pager .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); text-decoration: none; }
.pager .current { background: var(--blue-soft); color: var(--blue); }
nav.main a[aria-current="page"] { color: var(--blue); }
/* Hero: half the space between the menu bar and the content (Carlos, 5 Nov).
   Was 88px padding plus the text centred against the taller ring card. */
.hero { padding-top: clamp(24px, 3vw, 44px); }
.hero .wrap { align-items: start; }
.hero-copy { margin-top: clamp(0px, 4vw, 48px); }
@media (max-width: 960px) { .hero-copy { margin-top: 0; } }
/* Spanish labels are longer: drop "Our work" and "FAQ" from the bar a little earlier. */
@media (max-width: 1200px), (min-width: 1200px) and (max-width: 1350px) { nav.main a.opt { display: none; } }
nav.main a { white-space: nowrap; }
.strip { overflow-x: clip; }   /* the strip slides in from the right */

/* Service cards without public prices: billing terms in the price slot. */
.rung .price.terms { font: 600 15px/1.4 var(--body); color: var(--muted); letter-spacing: 0; }

/* ---- Phone layout and tap targets (44px minimum) ---- */
.cyc-top small { display: block; line-height: 1.45; margin-top: 2px; }
@media (max-width: 480px) {
  .cyc-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cyc-top b { font-size: 16px; }
}
@media (max-width: 700px) {
  footer nav { gap: 0 4px; margin-inline: -10px; }
  footer nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  footer .about a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .reach a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { gap: 0 8px; }
  .tags a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .post-head .share a, .post-head .share button { min-height: 44px; }
  .langsw a { min-height: 40px; }
  .reach button { min-height: 44px; }
  .toc-m nav a { display: flex; align-items: center; min-height: 44px; }
  /* Show the whole cover on phones instead of cropping its figures. */
  .post-head .cover { aspect-ratio: auto; }
  .post-head .cover img { position: static; height: auto; }
  .post-head .cover figcaption { position: static; padding: 10px 14px; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { clip: auto; width: auto; height: auto; left: 16px; top: 12px; z-index: 100; background: var(--blue-bright); color: #fff; padding: 10px 16px; border-radius: 8px; }