/* FirsTeck EDC marketing site — shared stylesheet (home + compliance + integrations + faq).
   Clinical palette: cool teal-blue accents on airy blue-tinted whites. */
:root{
  --paper:#FFFFFF; --band:#EDF5F8; --band-2:#E2EEF3; --ink:#0F1B24; --ink-2:#33454F; --muted:#546873; --faint:#546873;
  --line:#D3E0E7; --line-strong:#AFC6D1;
  --blue:#0E7490; --blue-ink:#0B4A5F; --verify:#0C8A5E; --verify-bg:#E4F2EB; --freeze:#A2323F; --freeze-bg:#F5E7E8;
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --maxw:1180px; --pad:32px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
@media(max-width:600px){:root{--pad:20px}}
a{color:inherit; text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--sans); font-weight:500; letter-spacing:-0.025em; line-height:1.12; text-wrap:balance}
::selection{background:#CBE7F0}

.kicker{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:#000}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* medical wordmark: rounded cross tile before the name */
.mk{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--blue); color:#fff; font-weight:800; font-size:17px; line-height:1; flex:none; align-self:center}

/* buttons — measured from the reference: 14px/500 pills, 36px (40px lg), radius 40px, no borders */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; font-weight:500; height:36px; padding:0 20px; border:none; border-radius:40px; cursor:pointer; transition:background .15s, color .15s}
.btn:focus-visible{outline:3px solid #9FD3E3; outline-offset:2px}
.btn-solid{background:#000; color:#fff}
.btn-solid:hover{background:#333}
.btn-line{background:rgba(0,0,0,.05); color:#000}
.btn-line:hover{background:rgba(0,0,0,.1)}
.btn-lg{height:40px; padding:0 22px}

/* nav — measured from the reference: 13px/500 links clustered after the logotype, pill actions right */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px}
.wordmark{display:flex; align-items:center; gap:9px}
.wordmark b{font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-0.02em; color:#000}
.nav-links{display:flex; gap:26px; font-size:13px; font-weight:500; color:#000}
.nav-links a{padding:4px 0}
.nav-links a:hover, .nav-links a[aria-current="page"]{opacity:.6}
@media(max-width:960px){.nav-links{gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none} .nav-links::-webkit-scrollbar{display:none}}
@media(max-width:560px){.nav-links{display:none}}

/* hero (home) */
.hero{border-bottom:1px solid var(--line)}
.hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; padding:72px 0 74px}
@media(max-width:940px){.hero-in{grid-template-columns:1fr; gap:40px; padding:48px 0 52px}}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.3rem)}
.hero h1 em{font-style:normal; color:var(--blue)}
.hero .sub{margin-top:24px; font-size:clamp(1.05rem,1.7vw,1.24rem); color:var(--ink-2); max-width:40ch; line-height:1.5}
.hero .actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero .under{margin-top:30px; display:flex; gap:8px 22px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase}
.hero .under b{color:var(--ink)}
.hr-tick{color:var(--verify); font-weight:700}

/* subpage hero */
.page-hero{background:#fff}
.page-hero-in{padding:58px 0 56px}
.crumbs{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(0,0,0,.6); margin-bottom:16px}
.crumbs a{color:#000}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.page-hero p{margin-top:14px; color:var(--ink-2); max-width:62ch; font-size:1.08rem}

/* provenance object — the trust proof on the home hero */
.prov{border:1px solid var(--line-strong); border-radius:12px; background:var(--paper); box-shadow:0 1px 0 var(--line), 0 24px 44px -34px rgba(15,27,36,.4); overflow:hidden}
.prov-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--band)}
.prov-top .fid{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.03em}
.prov-top .fid b{color:var(--ink)}
.prov-val{padding:18px 18px 6px}
.prov-val .q{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.prov-val .v{font-family:var(--sans); font-size:2.9rem; font-weight:800; letter-spacing:-0.02em; line-height:1; margin-top:6px}
.prov-val .v small{font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0}
.prov-log{padding:8px 18px 16px}
.prov-log .ev{display:grid; grid-template-columns:78px 1fr auto; gap:12px; align-items:baseline; padding:9px 0; border-top:1px dotted var(--line); font-size:.9rem}
.prov-log .ev:first-child{border-top:0}
.prov-log .t{font-family:var(--mono); font-size:11px; color:var(--faint)}
.prov-log .who{color:var(--ink-2)}
.prov-log .who b{color:var(--ink); font-weight:600}
.chip{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:6px; white-space:nowrap; border:1px solid transparent}
.chip.cap{color:var(--blue-ink); background:#E1F0F5; border-color:#BFDEE9}
.chip.ver{color:var(--verify); background:var(--verify-bg); border-color:#BFE2D2}
.chip.sig{color:var(--ink); background:var(--band-2); border-color:var(--line-strong)}
.chip.frz{color:var(--freeze); background:var(--freeze-bg); border-color:#E6C9CD}
.prov-foot{display:flex; align-items:center; gap:8px; padding:11px 18px; border-top:1px solid var(--line); background:var(--band); font-family:var(--mono); font-size:11px; color:var(--muted)}
.prov-foot .hash{margin-left:auto; color:var(--ink-2)}
.ev.reveal{opacity:0; transform:translateY(6px)}
.ev.shown{opacity:1; transform:none; transition:opacity .45s ease, transform .45s ease}
@media(prefers-reduced-motion:reduce){.ev.reveal{opacity:1; transform:none}}

/* three-pillar strip (replaces the old chip band): one claim per pillar, each linking deeper */
.pillars{background:var(--blue-ink); color:#E6F1F5}
.pillars-in{display:grid; grid-template-columns:repeat(3,1fr)}
.pillar{display:block; padding:36px 30px; border-left:1px solid rgba(255,255,255,.14); transition:background .15s}
.pillar:first-child{border-left:0}
.pillar:hover{background:rgba(255,255,255,.05)}
.pillar .pk{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8FC7D8}
.pillar h3{color:#fff; font-size:1.16rem; margin-top:8px}
.pillar p{margin-top:8px; color:#B9D2DC; font-size:.94rem; line-height:1.5}
.pillar .more{display:inline-block; margin-top:12px; font-size:.9rem; font-weight:650; color:#fff}
.pillar .more::after{content:" ›"}
@media(max-width:860px){.pillars-in{grid-template-columns:1fr}.pillar{border-left:0; border-top:1px solid rgba(255,255,255,.14)}.pillar:first-child{border-top:0}}

/* section scaffolding */
section{padding:96px 0}
section.wrap{padding-top:96px; padding-bottom:96px}
@media(max-width:640px){section{padding:58px 0} section.wrap{padding-top:58px; padding-bottom:58px}}
.lede{max-width:64ch}
.lede h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:14px}
.lede p{margin-top:16px; font-size:1.1rem; color:var(--ink-2)}

/* shared card surface */
.phase, .stat, .reg-row, .lrow{background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(15,27,36,.04), 0 12px 28px -22px rgba(15,27,36,.18); transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease}
.phase:hover, .stat:hover, .reg-row:hover, .lrow:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(15,27,36,.05), 0 20px 40px -20px rgba(15,27,36,.28); border-color:var(--line-strong)}
@media(prefers-reduced-motion:reduce){.phase,.stat,.reg-row,.lrow,.phase:hover,.stat:hover,.reg-row:hover,.lrow:hover{transform:none; transition:none}}

/* the loop — three cards */
.loop{margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:820px){.loop{grid-template-columns:1fr}}
.phase{padding:30px 28px}
.phase .idx{font-family:var(--sans); font-size:2.2rem; font-weight:800; line-height:1; color:var(--blue)}
.phase .plab{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.phase h3{font-size:1.3rem; margin-top:6px}
.phase p{margin-top:12px; color:var(--ink-2); font-size:.98rem}
.phase ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--ink)}
.phase li{padding-left:18px; position:relative}
.phase li::before{content:"—"; position:absolute; left:0; color:var(--faint)}

/* module register */
.register{margin-top:44px; display:flex; flex-direction:column; gap:14px}
.reg-row{display:grid; grid-template-columns:120px 1.05fr 2fr 130px; gap:28px; align-items:center; padding:24px 30px}
.reg-code{font-family:var(--mono); font-size:11.5px; color:var(--blue); letter-spacing:.08em; align-self:center}
.reg-name{font-family:var(--sans); font-size:1.18rem; font-weight:800}
.reg-desc{color:var(--ink-2); font-size:.95rem; line-height:1.5}
.reg-tag{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:right}
@media(max-width:780px){.reg-row{grid-template-columns:1fr; gap:8px; padding:22px 22px}.reg-tag{text-align:left}}

/* architecture — dark ledger */
.arch{background:var(--ink); color:#DEE5F0}
.arch .kicker{color:#8FC7D8}
.arch .lede h2{color:#fff}
.arch .lede p{color:#AEBecd; color:#AEC3CD}
.arch-in{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; margin-top:46px}
@media(max-width:880px){.arch-in{grid-template-columns:1fr; gap:34px}}
.arch dl{margin:0; display:flex; flex-direction:column; gap:26px}
.arch dt{font-family:var(--sans); font-size:1.22rem; font-weight:800; color:#fff}
.arch dd{margin:8px 0 0; color:#AEC3CD; font-size:.97rem}
.arch dd code{font-family:var(--mono); color:#8FC7D8; font-size:.88em}
.rls{border:1px solid #23404C; border-radius:10px; background:#0A141A; overflow:hidden; font-family:var(--mono); font-size:12.5px}
.rls .h{padding:11px 16px; border-bottom:1px solid #23404C; color:#6E8B98; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px}
.rls .r{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid #14252E; color:#C0D4DC}
.rls .r:last-child{border-bottom:0}
.rls .r .tn{color:#8FC7D8}
.rls .r .st{margin-left:auto}
.rls .r.ok .st{color:var(--verify)}
.rls .r.no{color:#6E8B98}
.rls .r.no .st{color:#C46A76}
.rls .r.pol{background:#0E2029; color:#DEE5F0}
.rls .r.pol .st{color:#8FC7D8}

/* AI + agents */
.two{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
@media(max-width:880px){.two{grid-template-columns:1fr; gap:32px}}
.two h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.two p{margin-top:16px; color:var(--ink-2); font-size:1.02rem}
.two p + p{margin-top:14px}
.term{border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:#0A141A; box-shadow:0 24px 44px -34px rgba(10,20,26,.6)}
.term .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#101C24; border-bottom:1px solid #1D323C; font-family:var(--mono); font-size:11px; color:#6E8B98}
.term .bar i{width:10px; height:10px; border-radius:50%; background:#24404C}
.term pre{margin:0; padding:18px; font-family:var(--mono); font-size:12.6px; line-height:1.85; color:#C0D4DC; overflow-x:auto}
.term .c{color:#57707C}.term .p{color:#67B7D1}.term .g{color:#57C99A}.term .y{color:#E0B872}

/* compliance ledger */
.ledger{margin-top:44px; display:flex; flex-direction:column; gap:12px}
.lrow{display:grid; grid-template-columns:220px 1fr auto; gap:28px; align-items:center; padding:22px 30px}
.lstd{font-family:var(--mono); font-size:.9rem; font-weight:600; color:var(--blue-ink); letter-spacing:.02em}
.ldesc{color:var(--ink-2); font-size:.96rem; line-height:1.5}
.lstate{justify-self:end; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--verify); background:var(--verify-bg); border:1px solid #BFE2D2; border-radius:20px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.lstate::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--verify)}
@media(max-width:720px){.lrow{grid-template-columns:1fr; gap:8px; padding:20px 22px}.lstate{justify-self:start}}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px}
.stat{padding:28px 26px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{padding:24px 22px}}
.stat .n{font-family:var(--sans); font-size:clamp(2rem,4vw,2.6rem); font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.stat .l{color:var(--muted); font-size:.9rem; margin-top:6px; max-width:22ch}

/* CTA */
.cta{background:var(--blue-ink); color:#fff}
.cta-in{display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; padding:64px 0}
@media(max-width:820px){.cta-in{grid-template-columns:1fr; gap:26px; padding:52px 0}}
.cta .kicker{color:#8FC7D8}
.cta h2{color:#fff; font-size:clamp(2rem,3.6vw,2.8rem); margin-top:12px}
.cta p{color:#C4DAE2; margin-top:14px; max-width:52ch}
.cta .btn-solid{background:#fff; color:var(--blue-ink); border-color:#fff}
.cta .btn-solid:hover{background:#DBEDF3}
.cta .r{display:flex; justify-content:flex-end}
@media(max-width:820px){.cta .r{justify-content:flex-start}}

footer{border-top:1px solid var(--line); padding:52px 0 44px; color:var(--muted); font-size:.9rem}
.foot-top{display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap}
.fc h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 12px}
.fc a{display:block; color:var(--ink-2); padding:4px 0}
.fc a:hover{color:var(--ink)}
.foot-legal{margin-top:38px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.03em}

/* FAQ */
.faq{margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:22px 44px}
@media(max-width:760px){.faq{grid-template-columns:1fr; gap:24px}}
.faq .qa h3{font-family:var(--sans); font-size:1.14rem; font-weight:800; letter-spacing:-0.01em}
.faq .qa p{margin-top:8px; color:var(--ink-2); font-size:.98rem}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ═══ Homepage v3 — tokens measured live from the reference homepage:
   body 17px · headings 500 weight, -3% tracking · hero h1 48px white · section h2 22px · card titles 18px ·
   meta 14px (category #000 + note 60% black) · pills 36/40px r40 · full-width content with 32px gutters. ═══ */
.o-page{padding-bottom:48px}
.o-wrap{max-width:1920px; margin:0 auto; padding:0 32px}
@media(max-width:640px){.o-wrap{padding:0 18px}}
.nav-left{display:flex; align-items:center; gap:44px; min-width:0}

/* hero — full-width rounded banner, white centered copy, one 40px white pill */
.o-hero{border-radius:12px; margin-top:10px; min-height:400px; height:calc(100svh - 40px - 68px); max-height:920px; display:grid; place-items:center; text-align:center; padding:72px 26px;
  background:
    radial-gradient(90% 120% at 18% -5%, #B9CDF1 0%, rgba(185,205,241,0) 55%),
    radial-gradient(90% 130% at 85% 110%, #6D86D9 0%, rgba(109,134,217,0) 62%),
    #8B99E4}
.o-hero .k{font-size:14px; font-weight:500; color:rgba(255,255,255,.85)}
.o-hero h1{margin-top:14px; font-size:clamp(30px,4.2vw,48px); font-weight:500; letter-spacing:-0.03em; line-height:1.16; color:#fff}
.o-hero p{margin:16px auto 0; max-width:52ch; font-size:17px; font-weight:400; line-height:1.55; color:rgba(255,255,255,.88)}
.o-hero .act{margin-top:28px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.o-hero .btn{background:#fff; color:#000}
.o-hero .btn:hover{background:rgba(255,255,255,.85)}

/* section header: 22px/500 left, 14px "see all" right */
.o-sec{display:flex; align-items:baseline; justify-content:space-between; margin:96px 0 26px}
.o-sec h2{font-size:22px; font-weight:500; letter-spacing:-0.01em}
.o-sec a{font-size:14px; font-weight:500; color:#000}
.o-sec a:hover{opacity:.6}

/* cards: tile, then title below, then meta */
.o-card{display:block; min-width:0; transition:opacity .3s cubic-bezier(.6,0,.4,1)}
.o-card .tile{border-radius:12px; overflow:hidden; display:grid; place-items:center; position:relative; transition:opacity .3s cubic-bezier(.6,0,.4,1)}
.o-card:hover .tile{opacity:.85}
.o-card .cap{margin-top:14px; font-size:18px; font-weight:500; line-height:1.35; letter-spacing:-0.01em; color:#000}
.o-card .meta{margin-top:8px; font-size:14px; font-weight:500; color:#000; display:flex; gap:14px}
.o-card .meta span{color:rgba(0,0,0,.6)}
.o-card.big .cap{font-size:clamp(26px,3.4vw,44px); font-weight:500; letter-spacing:-0.03em; line-height:1.12; margin-top:20px}
.tile-word{font-weight:500; letter-spacing:-0.02em; text-align:center; padding:0 22px; text-wrap:balance; line-height:1.2}

/* featured — the reference behaviour: the tall right rail scrolls while the big left card STICKS under the nav;
   once the rail is done, the whole page scrolls on together. (grid + position:sticky, no JS) */
.o-feat{display:grid; grid-template-columns:3fr 1fr; gap:26px; align-items:start}
.o-feat .big{position:sticky; top:80px}
/* near-viewport-height left tile (reference: ~11:8) so while it sticks the screen reads as "page stopped, right rail scrolling" */
.o-feat .big .tile{width:100%; aspect-ratio:16/9; min-height:400px; max-height:calc(100svh - 108px)}
.o-side{display:grid; gap:44px}
.o-side .tile{aspect-ratio:1/1.02}
.o-side .cap{font-size:18px}
@media(max-width:900px){
  .o-feat{grid-template-columns:1fr}
  .o-feat .big{position:static}
  .o-side .tile{aspect-ratio:16/9}
}

/* organic pastel tiles (layered radial gradients — CSP-safe, no images, no pictographs) */
.gd-ink{background:radial-gradient(110% 140% at 78% -10%, #2A5A6C 0%, rgba(42,90,108,0) 55%), radial-gradient(120% 120% at 12% 110%, #143240 0%, rgba(20,50,64,0) 60%), #0E1E28; color:#EAF4F8}
.gd-peri{background:radial-gradient(90% 120% at 20% 5%, #D5E4F6 0%, rgba(213,228,246,0) 55%), radial-gradient(110% 120% at 80% 100%, #7D9AD8 0%, rgba(125,154,216,0) 60%), #ABC2E9; color:#1E2C55}
.gd-peach{background:radial-gradient(90% 120% at 18% 8%, #FBE0C4 0%, rgba(251,224,196,0) 55%), radial-gradient(110% 130% at 82% 100%, #EE9A6B 0%, rgba(238,154,107,0) 60%), #F5C29A; color:#57301A}
.gd-mint{background:radial-gradient(90% 120% at 18% 8%, #DCF1E5 0%, rgba(220,241,229,0) 55%), radial-gradient(110% 130% at 82% 100%, #6FBF9B 0%, rgba(111,191,155,0) 60%), #A8DCC2; color:#123B2C}
.gd-lemon{background:radial-gradient(90% 120% at 20% 10%, #FBF3CE 0%, rgba(251,243,206,0) 55%), radial-gradient(110% 130% at 80% 100%, #E8D273 0%, rgba(232,210,115,0) 60%), #F2E4A2; color:#4E4212}
.gd-rose{background:radial-gradient(90% 120% at 18% 8%, #F8E2E7 0%, rgba(248,226,231,0) 55%), radial-gradient(110% 130% at 82% 100%, #DE93A6 0%, rgba(222,147,166,0) 60%), #ECBCC8; color:#4E2230}
.gd-teal2{background:radial-gradient(90% 120% at 18% 8%, #D3EBF3 0%, rgba(211,235,243,0) 55%), radial-gradient(110% 130% at 82% 100%, #5FA4BF 0%, rgba(95,164,191,0) 60%), #9CCCDD; color:#0F3546}

/* provenance content inside the big dark tile */
.o-prov{display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 20px}
.o-prov .w{font-size:clamp(26px,3.2vw,42px); font-weight:500; letter-spacing:-0.03em; color:#fff; text-align:center}
.o-prov .steps{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-size:13px; font-weight:500}
.o-prov .steps span{padding:6px 14px; border-radius:40px; border:1px solid rgba(255,255,255,.3); color:#DCEAF1; background:rgba(255,255,255,.07)}

/* list rows: large squarish thumb + 18px title + 14px meta, two loose columns */
.o-list{display:grid; grid-template-columns:1fr 1fr; gap:20px 64px}
@media(max-width:860px){.o-list{grid-template-columns:1fr}}
.o-row{display:flex; align-items:flex-start; gap:36px; padding:10px 0}
.o-row .th{width:200px; height:200px; border-radius:8px; flex:none; transition:opacity .3s cubic-bezier(.6,0,.4,1)}
.o-row:hover .th{opacity:.85}
@media(max-width:640px){.o-row .th{width:112px; height:112px}}
.o-row .tt{display:block; margin-top:30px; font-size:18px; font-weight:500; line-height:1.35; letter-spacing:-0.01em; color:#000}
.o-row .mm{display:flex; gap:14px; margin-top:10px; font-size:14px; font-weight:500; color:#000}
.o-row .mm span{color:rgba(0,0,0,.6)}

/* three case-style cards, 4:3 */
.o-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
@media(max-width:860px){.o-cases{grid-template-columns:1fr}}
.o-cases .tile{aspect-ratio:4/3}

/* centered CTA — reference: same scale as the hero headline */
.o-cta{margin:120px 0 40px; text-align:center}
.o-cta h2{font-size:clamp(28px,3.6vw,48px); font-weight:500; letter-spacing:-0.03em}
.o-cta p{margin:16px auto 0; max-width:58ch; color:rgba(0,0,0,.65); font-size:17px; line-height:1.55}
.o-cta .act{margin-top:26px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* minimal footer */
.o-foot{border-top:1px solid rgba(0,0,0,.1); margin-top:56px; padding:44px 0 34px; font-size:14px; color:rgba(0,0,0,.6)}
.o-foot .cols{display:flex; gap:64px; flex-wrap:wrap; justify-content:space-between}
.o-foot h4{font-size:14px; font-weight:500; color:#000; margin:0 0 12px}
.o-foot a{display:block; padding:4px 0; color:rgba(0,0,0,.6)}
.o-foot a:hover{color:#000}
.o-foot .legal{margin-top:34px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px}

/* statement band — plain centered manifesto line (company positioning) */
.o-statement{margin:120px auto 0; max-width:34em; text-align:center}
.o-statement p{font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-0.02em; line-height:1.35; color:#000}
.o-statement a{display:inline-block; margin-top:18px; font-size:14px; font-weight:500; color:#000}
.o-statement a:hover{opacity:.6}

/* article pages (solutions + perspectives) */
.art{max-width:760px; margin:0 auto; padding:64px 22px 30px}
.art .cat{display:flex; gap:14px; font-size:14px; font-weight:500; color:#000}
.art .cat span{color:rgba(0,0,0,.6)}
.art h1{margin-top:14px; font-size:clamp(30px,4.4vw,46px); font-weight:500; letter-spacing:-0.03em; line-height:1.12}
.art .lead{margin-top:20px; font-size:19px; line-height:1.55; color:rgba(0,0,0,.72)}
.art-hero{max-width:1440px; margin:26px auto 0; padding:0 32px}
.art-hero .tile{border-radius:12px; aspect-ratio:16/6; display:grid; place-items:center}
.art-body{max-width:760px; margin:0 auto; padding:44px 22px 20px; font-size:17px; line-height:1.7; color:#111}
.art-body h2{font-size:22px; font-weight:500; letter-spacing:-0.01em; margin:38px 0 12px}
.art-body p{margin:0 0 16px}
.art-body ul{margin:0 0 16px; padding-left:22px}
.art-body li{margin:6px 0}
.art-body b{font-weight:600}
.art-foot{max-width:760px; margin:0 auto; padding:8px 22px 40px; display:flex; gap:10px; flex-wrap:wrap}