/* ============================================================
   OneSourceIT — homepage (light brand system)
   Hanken Grotesk + JetBrains Mono · blue / green / slate / paper
   ============================================================ */
:root{
  --paper:#EEF1F4; --paper2:#E7ECF0; --card:#FFFFFF;
  --ink:#16202E; --ink2:#37424f; --muted:#6A737F; --muted2:#9aa3ad;
  --line:#E0E5EA; --line2:#EDF0F3;
  --blue:#1E4E7E; --blue-deep:#173e64; --blue-lite:#6FA6DC;
  --green:#5FA537; --green-deep:#4d8a2b; --green-lite:#8FCE5F;
  --slate:#222B36; --slate2:#2c3743;
  --mono:'JetBrains Mono',monospace; --sans:'Hanken Grotesk',sans-serif;
  --maxw:1180px;
  --accent:var(--blue);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}
a{color:inherit}

/* scroll progress */
.progress{position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--green)); z-index:200; transition:width .1s linear}

/* ---------------- NAV ---------------- */
header{position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
header nav{display:flex; align-items:center; justify-content:space-between; height:68px; max-width:var(--maxw); margin:0 auto; padding:0 40px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .fav{width:30px;height:30px;border-radius:24%;background:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:-0.045em;font-size:17px}
.brand .fav .p{color:#fff}.brand .fav .a{color:var(--green-lite)}
.fav .p,.fav .a{display:inline-block;transform:translateY(0.09em)} /* optical-center the monogram (caps sit high) */
.wm{font-family:var(--sans); font-weight:800; letter-spacing:-0.03em; font-size:20px; line-height:1; white-space:nowrap}
.wm .o,.wm .it{color:var(--blue)} .wm .s{color:var(--green)} .wm .it{font-size:0.85em}
.navlinks{display:flex; align-items:center; gap:30px}
.navlinks a{font-size:14px; font-weight:600; color:var(--ink2); text-decoration:none; transition:color .15s}
.navlinks a:hover{color:var(--ink)}
/* specialty pages — first-class nav pills */
.nav-spec{display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border:1px solid var(--line); border-radius:99px; background:#fff; font-size:13.5px !important}
.nav-spec .sdot{width:7px; height:7px; border-radius:50%; flex:none}
.sdot-im{background:var(--green)} .sdot-aws{background:var(--blue)} .sdot-mod{background:#C9892F} .sdot-tools{background:#6F5BA7}
.nav-spec:hover{border-color:var(--blue-lite)}
.nav-spec[aria-current="page"]{border-color:var(--blue); color:var(--ink)}
@media(min-width:981px) and (max-width:1340px){
  .navlinks{gap:14px}
  .navlinks a{font-size:13px}
  .nav-spec{padding:7px 11px}
}
/* narrow-desktop band: keep the first-class items (specialty pills + CTA), drop in-page anchors */
@media(min-width:981px) and (max-width:1120px){
  .navlinks a:not(.nav-spec):not(.nav-cta){display:none}
}
.nav-cta{padding:9px 17px; background:var(--accent); color:#fff !important; border-radius:8px; font-weight:700 !important}
.nav-cta:hover{background:var(--blue-deep)}
.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---------------- BUTTONS ---------------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-weight:700; font-size:15px; padding:13px 22px; border-radius:9px; text-decoration:none;
  cursor:pointer; border:1px solid transparent; transition:.18s; white-space:nowrap}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink2); background:#fff}

/* ---------------- SECTION SCAFFOLD ---------------- */
section{position:relative}
.section{padding:96px 0}
body[data-density="compact"] .section{padding:66px 0}
body[data-density="comfy"] .section{padding:124px 0}
body[data-hl="green"] .hero h1 .am,
body[data-hl="green"] .contact-copy h2 .am{color:var(--green-deep)}
.band{background:var(--paper2)}
.band-top{border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green-deep)}
.sec-head{max-width:760px}
.sec-head h2{font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-0.03em; line-height:1.06; margin-top:16px}
.sec-head .lede{color:var(--ink2); font-size:17px; line-height:1.6; margin-top:18px; max-width:64ch}
.sec-head .lede b{color:var(--ink); font-weight:700}

/* ---------------- HERO ---------------- */
.hero{padding:72px 0 70px}
.hero-grid{display:grid; grid-template-columns:1.08fr 0.92fr; gap:56px; align-items:center}
.hero-pill{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink2);
  border:1px solid var(--line); background:#fff; padding:7px 13px; border-radius:100px}
.hero-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.hero h1{font-weight:800; font-size:clamp(38px,5vw,60px); line-height:1.02; letter-spacing:-0.038em; margin:22px 0 0}
.hero h1 .am{color:var(--blue)}
.hero .sub{font-size:18px; line-height:1.6; color:var(--ink2); margin-top:22px; max-width:54ch}
.hero .sub strong{color:var(--ink); font-weight:700}
.hero-actions{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap}
.hero-trust{margin-top:30px; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--muted); letter-spacing:0.01em}
.hero-trust b{color:var(--ink2); font-weight:500}

/* hero brand plate */
.hero-mark{position:relative; background:var(--slate); border-radius:18px; padding:30px; aspect-ratio:1/0.92;
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 30px 60px -34px rgba(20,32,46,.5)}
.hero-mark::before{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 18%, rgba(111,166,220,.10), transparent 60%)}
.brandplate{position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; padding:0 24px}
.bp-wm{font-family:var(--sans); font-weight:800; letter-spacing:-0.03em; line-height:1; white-space:nowrap;
  font-size:clamp(34px,4.4vw,52px)}
.bp-wm .o,.bp-wm .it{color:var(--blue-lite)} .bp-wm .s{color:var(--green-lite)} .bp-wm .it{font-size:0.85em}
.bp-rule{width:54px; height:2px; border-radius:2px; background:rgba(255,255,255,.16); margin:2px 0}
.bp-tag{font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.bp-tag.dim{color:rgba(255,255,255,.4); letter-spacing:0.16em}

/* capability rail */
.hero-rail{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:54px;
  border:1px solid var(--line); border-radius:13px; background:#fff; overflow:hidden}
.hero-rail a{display:flex; flex-direction:column; gap:8px; padding:20px 22px; text-decoration:none; transition:background .15s}
.hero-rail a+a{border-left:1px solid var(--line2)}
.hero-rail a:hover{background:var(--paper)}
.hero-rail .rn{font-family:var(--mono); font-size:12px; color:var(--green-deep)}
.hero-rail .rl{font-size:14px; font-weight:700; color:var(--ink); line-height:1.25; letter-spacing:-0.01em}

/* ---------------- PROMISE / REVERSALS ---------------- */
.promise{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:46px}
.rev{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 30px}
.rev .rn{font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; color:var(--muted)}
.rev .rn b{color:var(--blue); font-weight:600}
.rev h3{font-weight:800; font-size:19px; letter-spacing:-0.02em; margin:14px 0 10px}
.rev p{color:var(--ink2); font-size:14.5px; line-height:1.62}
.rev p b{color:var(--ink); font-weight:700}

/* ---------------- CAPABILITIES ---------------- */
.caps{display:flex; flex-direction:column; gap:18px; margin-top:48px}
.cap{display:grid; grid-template-columns:1.15fr 0.85fr; gap:0; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
.cap-left{padding:34px 36px}
.cap-idx{font-family:var(--mono); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:12px; letter-spacing:0.06em}
.cap-idx .tag{border:1px solid var(--line); border-radius:5px; padding:3px 8px; color:var(--ink2); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase}
.cap-left h3{font-weight:800; font-size:23px; letter-spacing:-0.025em; margin:15px 0 16px; line-height:1.1}
.cap-problem{border-left:2px solid var(--line); padding-left:15px; margin-bottom:15px}
.cap-problem .qlab{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; color:var(--muted2)}
.cap-problem p{font-size:14.5px; color:var(--ink2); line-height:1.55; margin-top:5px; font-style:italic}
.cap-outcome{font-size:15px; line-height:1.58; color:var(--ink2)}
.cap-outcome b{color:var(--ink); font-weight:700}
.cap-proof{font-size:13px; line-height:1.58; color:var(--muted); margin-top:14px; padding-top:14px; border-top:1px dashed var(--line)}
.cap-proof b{color:var(--green-deep); font-weight:700}
.cap-more{display:inline-block; margin-left:6px; color:var(--blue); font-weight:700; text-decoration:none}
.cap-more:hover{text-decoration:underline}
.cap-offers{background:var(--paper); border-left:1px solid var(--line); padding:28px 30px; display:flex; flex-direction:column; gap:3px}
.cap-offers .ohead{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; color:var(--muted); margin-bottom:11px}
.offer{padding:12px 0; border-top:1px solid var(--line2)}
.offer:first-of-type{border-top:0}
.offer .on{display:block; font-weight:700; font-size:14.5px; color:var(--ink); letter-spacing:-0.01em}
.offer .od{display:block; font-size:12.5px; color:var(--ink2); line-height:1.5; margin-top:3px}

/* ---------------- COMPLIANCE STRIP ---------------- */
.comply{padding:54px 0}
.comply-inner{max-width:880px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px}
.comply .badge{width:42px; height:42px; border-radius:11px; background:color-mix(in srgb,var(--green) 14%,#fff);
  border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); display:flex; align-items:center; justify-content:center}
.comply .badge svg{width:22px; height:22px; stroke:var(--green-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.comply p{font-size:clamp(18px,2.2vw,23px); line-height:1.5; letter-spacing:-0.015em; color:var(--ink); font-weight:600; max-width:30ch}
.comply p b{color:var(--green-deep)}
.comply .sub{font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; color:var(--muted); font-weight:400; max-width:none}

/* ---------------- PROOF ---------------- */
.proof-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:46px}
.proof-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; gap:14px}
.proof-card .pi{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--blue); font-weight:500}
.proof-card p{font-size:14px; line-height:1.6; color:var(--ink2)}
.proof-card p b{color:var(--ink); font-weight:700}
.proof-card .bar{height:3px; width:34px; border-radius:3px; background:var(--green); margin-top:auto}
.proof-link{font-size:13px; font-weight:700; color:var(--blue); text-decoration:none; margin-top:-4px}
.proof-link:hover{text-decoration:underline}

/* ---------------- FLOW ---------------- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:46px; counter-reset:s}
.step{padding:0 26px 4px; position:relative}
.step:first-child{padding-left:0}
.step::before{content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--line)}
.step:first-child::before{left:0}
.step .sdot{width:15px; height:15px; border-radius:50%; background:#fff; border:2px solid var(--blue); position:relative; z-index:2; margin-bottom:20px}
.step .sn{font-family:var(--mono); font-size:12px; color:var(--green-deep)}
.step h4{font-weight:800; font-size:18px; letter-spacing:-0.02em; margin:6px 0 9px}
.step p{font-size:14px; line-height:1.58; color:var(--ink2)}

/* ---------------- FIT ---------------- */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:46px}
.fit-col{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 32px}
.fit-col.yes{border-top:3px solid var(--green)}
.fit-col.no{border-top:3px solid var(--muted2)}
.fit-col h3{display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:-0.02em; margin-bottom:18px}
.fit-col .fi{width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center}
.fit-col.yes .fi{background:color-mix(in srgb,var(--green) 16%,#fff); color:var(--green-deep)}
.fit-col.no .fi{background:#F0F2F5; color:var(--muted)}
.fit-col .fi svg{width:15px; height:15px; fill:none; stroke-width:2.4}
.fit-col ul{list-style:none; display:flex; flex-direction:column; gap:13px}
.fit-col li{font-size:14.5px; line-height:1.5; color:var(--ink2); padding-left:18px; position:relative}
.fit-col li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%}
.fit-col.yes li::before{background:var(--green)}
.fit-col.no li::before{background:var(--muted2)}

/* ---------------- CONTACT ---------------- */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:52px; align-items:start}
.contact-copy h2{font-weight:800; font-size:clamp(28px,3.4vw,38px); letter-spacing:-0.03em; line-height:1.06; margin-top:16px}
.contact-copy h2 .am{color:var(--blue)}
.contact-copy p{color:var(--ink2); font-size:16px; line-height:1.6; margin-top:18px; max-width:42ch}
.contact-direct{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.contact-direct .dl{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--muted)}
.contact-direct a{display:block; font-weight:700; font-size:19px; color:var(--blue); text-decoration:none; margin-top:7px; letter-spacing:-0.01em}
.placeholder-note{font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--muted); margin-top:18px}
.placeholder-note b{color:var(--ink2); font-weight:500}

.form{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 32px; box-shadow:0 24px 50px -38px rgba(20,32,46,.4)}
.frow{margin-bottom:16px}
.frow.split{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.frow label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px}
.req{color:var(--green-deep)}
.field{width:100%; font-family:var(--sans); font-size:14.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:9px; padding:11px 13px; transition:.15s}
.field:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent)}
textarea.field{min-height:104px; resize:vertical; line-height:1.5}
select.field{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236A737F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:34px}
.err{display:none; font-size:12px; color:#c0492f; margin-top:5px}
.frow.invalid .err{display:block}
.frow.invalid .field{border-color:#d98a76}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px}
.form-note{font-family:var(--mono); font-size:11px; color:var(--muted)}
.form-success{display:none; flex-direction:column; align-items:flex-start; gap:12px; text-align:left}
.form-success.show{display:flex}
.form-body.hide{display:none}
.form-success .sicon{width:46px; height:46px; border-radius:12px; background:color-mix(in srgb,var(--green) 16%,#fff); display:flex; align-items:center; justify-content:center}
.form-success .sicon svg{width:24px; height:24px; stroke:var(--green-deep); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.form-success h4{font-weight:800; font-size:19px; letter-spacing:-0.02em}
.form-success p{color:var(--ink2); font-size:14px; line-height:1.6}
.form-success p b{color:var(--ink)}

/* ---------------- FOOTER ---------------- */
footer{background:var(--slate); color:#fff; padding:46px 0}
.foot{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot .wm .o,.foot .wm .it{color:#fff}.foot .wm .s{color:var(--green-lite)}
.foot-brand{display:flex; align-items:center; gap:13px}
.foot-brand .fav{width:32px;height:32px;border-radius:24%;background:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:-0.045em;font-size:18px}
.foot-brand .fav .p{color:#fff}.foot-brand .fav .a{color:var(--green-lite)}
.foot-meta{text-align:right}
.foot-meta .top{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:rgba(255,255,255,.85)}
.foot-meta p+p{font-size:13px; color:rgba(255,255,255,.55); margin-top:6px}
.foot-meta p.foot-legal{font-size:11.5px; color:rgba(255,255,255,.4); margin-top:12px}
.foot-meta p.foot-legal a{color:rgba(255,255,255,.55)}
.foot-meta p.foot-legal a:hover{color:var(--green-lite)}
.foot-meta a{color:var(--green-lite); text-decoration:none}
.foot-nav{display:flex; flex-direction:column; gap:8px}
.foot-nav .fn-head{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:2px}
.foot-nav a{color:rgba(255,255,255,.82); text-decoration:none; font-size:13.5px; font-weight:600}
.foot-nav a:hover{color:var(--green-lite)}
.foot-nav a[aria-current="page"]{color:var(--green-lite)}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:0; transform:translateY(20px); 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}
  html{scroll-behavior:auto}
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-mark{max-width:440px; aspect-ratio:1/0.7}
  .hero-rail{grid-template-columns:repeat(2,1fr)}
  .hero-rail a:nth-child(odd){border-left:0}
  .hero-rail a{border-top:1px solid var(--line2)}
  .hero-rail a:nth-child(-n+2){border-top:0}
  .proof-row{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr; gap:34px 0}
  .contact-grid{grid-template-columns:1fr; gap:36px}
}
@media(max-width:720px){
  .wrap{padding:0 22px}
  header nav{padding:0 22px}
  .section{padding:64px 0}
  .promise,.cap,.fit,.frow.split{grid-template-columns:1fr}
  .cap-offers{border-left:0; border-top:1px solid var(--line)}
  .proof-row{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr; gap:0}
  .step{padding:18px 0 18px 28px}
  .step::before{top:0; bottom:0; left:7px; right:auto; width:2px; height:auto}
  .step .sdot{margin-bottom:12px}
  .foot{flex-direction:column; align-items:flex-start; gap:20px}
  .foot-meta{text-align:left}
}

/* hamburger nav — kicks in at 980px so the fuller nav (3 pills + CTA) never overflows.
   Lives at the END of the file so it wins the cascade over the base
   .nav-toggle{display:none} and .navlinks rules above. */
@media(max-width:980px){
  .navlinks{position:fixed; inset:68px 0 auto 0; flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:8px 22px 18px; align-items:stretch;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s}
  .navlinks.open{transform:none; opacity:1; pointer-events:auto}
  .navlinks a{padding:13px 0; border-bottom:1px solid var(--line2)}
  .nav-spec{border:0; border-bottom:1px solid var(--line2); border-radius:0; background:none; padding:13px 0}
  .nav-cta{text-align:center; margin-top:10px; border-bottom:0 !important}
  .nav-toggle{display:flex}
}

/* ---------------- SENSITIVE-DATA NOTES & LEGAL DOC ---------------- */
.sens-note{margin:2px 0 14px; padding:11px 13px; background:#FBF3E4; border:1px solid #ECD9B4; border-radius:10px; font-size:.83rem; line-height:1.55; color:#7a5414}
.sens-note b{color:#5e400e}
.sens-note a{color:inherit; font-weight:600}

.legal-doc{max-width:780px}
.legal-doc h1{font-size:clamp(30px,4.5vw,44px); letter-spacing:-0.02em; line-height:1.1; margin:10px 0 14px}
.legal-doc .lede{font-size:1.06rem; color:var(--ink2); max-width:62ch}
.legal-doc h2{font-size:1.15rem; margin:34px 0 10px; letter-spacing:-0.01em}
.legal-doc p,.legal-doc li{color:var(--ink2); font-size:.98rem; line-height:1.65; max-width:70ch}
.legal-doc ul{margin:8px 0 8px 20px}
.legal-doc li{margin:4px 0}
.legal-doc a{color:var(--blue)}
.legal-doc .updated{margin-top:38px; font-family:var(--mono); font-size:12px; color:var(--muted)}

/* ---------------- OPEN SOURCE PAGE ---------------- */
.oss-hero{padding:84px 0 10px}
.oss-hero h1{font-size:clamp(34px,5vw,52px); letter-spacing:-0.03em; line-height:1.06; margin:10px 0 16px}
.oss-hero h1 .am{color:var(--blue)}
.oss-hero .lede{font-size:1.08rem; color:var(--ink2); max-width:64ch}
.oss-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px}
.oss-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:12px}
.oss-card h3{font-family:var(--mono); font-size:1.02rem; letter-spacing:-0.01em}
.oss-card p{color:var(--ink2); font-size:.93rem; line-height:1.6; flex:1}
.oss-status{align-self:flex-start; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; border-radius:999px; padding:4px 11px; border:1.5px solid}
.oss-status.mature{background:#EAF4E0; border-color:#4d8a2b; color:#3c6e21}
.oss-status.active{background:#F4F7FA; border-color:#1E4E7E; color:#1E4E7E}
.oss-status.planning{background:#FBF3E4; border-color:#C9892F; color:#7a5414}
.oss-meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px}
.oss-meta a{color:var(--blue); font-weight:600; text-decoration:none; margin-left:auto}
.oss-meta a:hover{text-decoration:underline}
.oss-note{margin-top:18px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:10px; font-size:.92rem; line-height:1.65; color:var(--ink2); max-width:72ch}
.oss-cta-row{display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap}
.oss-small{font-size:.85rem; color:var(--muted)}
.oss-small a{color:inherit}
@media(max-width:900px){.oss-grid{grid-template-columns:1fr}}