/* ============================================================
   OneSourceIT — imaging niche page styles
   (loads after homepage.css; shares its tokens and scaffold)
   ============================================================ */

/* ---------------- HERO ---------------- */
.navlinks a{white-space:nowrap}
@media(min-width:721px) and (max-width:900px){.navlinks{gap:16px}}
.im-hero{padding:76px 0 64px}
.im-hero .crumb{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted)}
.im-hero .crumb a{color:var(--green-deep); text-decoration:none}
.im-hero .crumb a:hover{text-decoration:underline}
.im-hero h1{font-weight:800; font-size:clamp(36px,4.6vw,56px); line-height:1.03; letter-spacing:-0.038em; margin:20px 0 0; max-width:21ch}
.im-hero h1 .am{color:var(--blue)}
.im-hero .sub{font-size:18px; line-height:1.62; color:var(--ink2); margin-top:22px; max-width:56ch}
.im-hero .sub strong{color:var(--ink); font-weight:700}
.im-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.im-facts .fact{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink2);
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 15px}
.im-facts .fact b{color:var(--green-deep); font-weight:600}

/* ---------------- LABOR ARGUMENT ---------------- */
.im-stops{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.im-stop{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 28px}
.im-stop .k{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.im-stop h3{font-weight:800; font-size:18px; letter-spacing:-0.02em; margin:12px 0 8px; line-height:1.2}
.im-stop p{font-size:14px; line-height:1.6; color:var(--ink2)}
.im-stop .was{display:block; margin-top:14px; padding-top:13px; border-top:1px dashed var(--line);
  font-size:12.5px; line-height:1.5; color:var(--muted); font-style:italic}
.im-payroll{margin-top:26px; font-size:16px; line-height:1.6; color:var(--ink2); max-width:64ch}
.im-payroll b{color:var(--ink); font-weight:700}

/* ---------------- PLAIN-TERMS STRIP ---------------- */
.im-plain-panel{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:30px 30px 26px; margin-top:44px}
.plain{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.pstep{position:relative; padding:6px 22px 6px 0}
.pstep:not(:last-child)::after{content:''; position:absolute; right:14px; top:44px; width:12px; height:12px;
  border-top:2px solid var(--line); border-right:2px solid var(--line); transform:rotate(45deg)}
.pn{font-family:var(--mono); font-size:12px; color:var(--blue); font-weight:600; margin-bottom:10px}
.pstep h4{font-size:16.5px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px; min-height:44px}
.pstep.exc .pn{color:#8a5a14}
.pstep.exc h4{color:#8a5a14}
.pstep p{font-size:13.5px; color:var(--muted); line-height:1.45}

/* ---------------- CASE STORY ---------------- */
.im-story{display:grid; grid-template-columns:1.15fr 0.85fr; gap:18px; margin-top:44px; align-items:start}
.im-story-main{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:34px 36px}
.im-story-main .si{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--blue); text-transform:uppercase}
.im-story-main h3{font-weight:800; font-size:22px; letter-spacing:-0.025em; margin:14px 0 16px; line-height:1.15}
.im-story-main p{font-size:15px; line-height:1.66; color:var(--ink2)}
.im-story-main p + p{margin-top:14px}
.im-story-main p b{color:var(--ink); font-weight:700}
.im-decade{margin-top:22px; padding:18px 22px; border-radius:12px;
  background:color-mix(in srgb,var(--green) 9%,#fff); border:1px solid color-mix(in srgb,var(--green) 26%,var(--line))}
.im-decade p{font-size:15.5px; line-height:1.55; color:var(--ink); font-weight:600}
.im-decade p b{color:var(--green-deep)}
.im-story-rail{display:flex; flex-direction:column; gap:12px}
.im-sf{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 22px}
.im-sf .v{font-weight:800; font-size:19px; letter-spacing:-0.02em; color:var(--ink); line-height:1.15}
.im-sf .l{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin-top:5px}

/* ---------------- REASSURANCE ---------------- */
.im-safe{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px}
.im-safe-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 24px}
.im-safe-card .ic{width:34px; height:34px; border-radius:9px; margin-bottom:14px;
  background:color-mix(in srgb,var(--green) 14%,#fff); border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));
  display:flex; align-items:center; justify-content:center}
.im-safe-card .ic svg{width:17px; height:17px; stroke:var(--green-deep); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.im-safe-card h3{font-weight:800; font-size:15.5px; letter-spacing:-0.015em; line-height:1.25; margin-bottom:7px}
.im-safe-card p{font-size:13px; line-height:1.55; color:var(--ink2)}

/* ---------------- TECHNICAL DESCENT ---------------- */
.im-descent{margin-top:44px; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.im-descent-head{display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:24px 30px; font-family:var(--sans)}
.im-descent-head:hover{background:var(--paper)}
.im-descent-head .dt{flex:1}
.im-descent-head .dt h3{font-weight:800; font-size:19px; letter-spacing:-0.02em; color:var(--ink)}
.im-descent-head .dt p{font-size:13.5px; color:var(--muted); margin-top:3px}
.im-descent-head .chev{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease; background:#fff}
.im-descent-head .chev svg{width:14px; height:14px; stroke:var(--ink2); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.im-descent.open .im-descent-head .chev{transform:rotate(180deg)}
.im-descent-body{display:none; border-top:1px solid var(--line); padding:30px}
.im-descent.open .im-descent-body{display:block}
.im-descent-body .dnote{font-size:14.5px; line-height:1.6; color:var(--ink2); max-width:72ch; margin-bottom:26px}
.im-descent-body .dnote b{color:var(--ink); font-weight:700}

/* technical spec list */
.im-spec{display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; margin-top:30px}
.im-spec li{list-style:none; font-size:14px; line-height:1.55; color:var(--ink2); padding-left:20px; position:relative}
.im-spec li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--blue-lite)}
.im-spec li b{color:var(--ink); font-weight:700}

/* ---- Mermaid diagram (locked design from the flow test) ---- */
.mermaid{font-family:var(--sans) !important; display:flex; justify-content:center}
.mermaid .nodeLabel, .mermaid .edgeLabel{font-size:13px !important; line-height:1.4}
.mermaid .decision .nodeLabel{font-size:12px !important}  /* smaller measured label -> smaller diamond */
.mermaid .cluster-label{font-size:10px !important}
.mermaid .cluster-label .nodeLabel{
  display:inline-block;
  font-family:var(--mono) !important; font-size:10px !important; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue) !important;
  background:#F7FAFC !important; border:1px solid #D7DEE6; border-radius:999px;
  padding:4px 12px; margin:-5px -12px}
.mermaid .cluster rect{fill:#F7FAFC !important; stroke:#D7DEE6 !important; rx:14px}
.mermaid foreignObject{overflow:visible}
.mermaid span.edgeLabel{background:transparent !important}
.mermaid span.edgeLabel:not(:empty){
  display:inline-block; white-space:nowrap;
  font-family:var(--mono); font-size:10px !important; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink2);
  background:#fff !important; border:1px solid var(--line); border-radius:999px;
  padding:3px 10px; margin:-4px -10px;
  box-shadow:0 1px 2px rgba(22,32,46,.06)}
.legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.lg{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); font-family:var(--mono)}
.sw{width:13px; height:13px; border-radius:3px; flex:none}

/* ---------------- OPEN SOURCE ---------------- */
.im-oss{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin-top:44px;
  background:var(--slate); border-radius:16px; padding:34px 38px; color:#fff}
.im-oss .ot{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-lite)}
.im-oss h3{font-weight:800; font-size:21px; letter-spacing:-0.02em; margin:12px 0 10px; color:#fff}
.im-oss h3 code{font-family:var(--mono); font-size:0.88em; color:var(--green-lite)}
.im-oss p{font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.78); max-width:58ch}
.im-oss .cmd{display:inline-block; font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:8px;
  padding:10px 16px; margin-top:18px; letter-spacing:.01em}
.im-oss .cmd .dollar{color:var(--green-lite); user-select:none}
.im-oss-link{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px; color:#fff;
  text-decoration:none; border:1px solid rgba(255,255,255,.22); border-radius:9px; padding:13px 22px;
  transition:.18s; white-space:nowrap}
.im-oss-link:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4)}
.im-oss-link svg{width:18px; height:18px; fill:currentColor}

/* ---------------- OFFERS ---------------- */
.im-offers{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px}
.im-offer{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 30px; display:flex; flex-direction:column}
.im-offer .oi{font-family:var(--mono); font-size:11.5px; color:var(--green-deep)}
.im-offer h3{font-weight:800; font-size:19px; letter-spacing:-0.02em; margin:12px 0 9px; line-height:1.2}
.im-offer p{font-size:14px; line-height:1.6; color:var(--ink2)}
.im-cta{margin-top:44px; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:38px 40px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.im-cta h3{font-weight:800; font-size:clamp(21px,2.6vw,27px); letter-spacing:-0.025em; line-height:1.15}
.im-cta h3 .am{color:var(--blue)}
.im-cta p{font-size:14.5px; color:var(--ink2); margin-top:8px; max-width:52ch}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1000px){
  .im-stops{grid-template-columns:1fr}
  .im-story{grid-template-columns:1fr}
  .im-story-rail{flex-direction:row; flex-wrap:wrap}
  .im-sf{flex:1 1 150px}
  .im-safe{grid-template-columns:1fr 1fr}
  .im-spec{grid-template-columns:1fr}
}
@media(max-width:780px){
  .plain{grid-template-columns:1fr 1fr; row-gap:26px}
  .pstep:nth-child(2)::after{display:none}
}
@media(max-width:720px){
  .im-safe{grid-template-columns:1fr}
  .im-offers{grid-template-columns:1fr}
  .im-oss{grid-template-columns:1fr}
  .im-descent-body{padding:22px 18px}
  .mermaid{overflow-x:auto; justify-content:flex-start}
}