/* ============================================================================
   Use Case Template page — extracted from styles.css (.ucx namespace + interior
   hero + trust wall + testimonial). Loaded on the Use Cases template page only,
   via a <link> HtmlEmbed, so every selector here is page-scoped.
   iconify-icon -> .iconify (site ships the Iconify SVG framework, not the
   web component).
   ============================================================================ */

:root { --uc-ok: #2F9E6E; }

/* ---------- Interior hero (left copy, console right) ---------- */
.ucx-hero { position: relative; overflow: hidden; }
.int-hero { text-align: left; padding-top: clamp(64px, 8vw, 108px); padding-bottom: clamp(40px, 5vw, 72px); }
.int-hero-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(30px, 4.5vw, 66px); align-items: center; }
.int-hero .int-hero-copy { text-align: left; }
.int-hero .int-hero-copy .display { max-width: 15ch; margin: 16px 0 0; }
.int-hero .int-hero-copy .display-cms { max-width: 26ch; }
.int-hero .int-hero-copy .lede { max-width: 52ch; margin: 18px 0 0; }
.int-hero .int-hero-copy .hero-actions { margin-top: 30px; justify-content: flex-start; }
.int-hero .int-hero-copy .cs-crumbs { margin-bottom: 4px; }
.int-hero-media { position: relative; }
.int-hero-media .ucx-console { width: 100%; }
.ucx-hero .hero-wash { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -10%, rgba(120,150,220,.10), transparent 60%); pointer-events: none; }
.display-cms { font-size: clamp(2.2rem, 4.2vw, 3.3rem); max-width: 26ch; }

/* buttons row ships display:block in the Webflow bundle */
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.hero-actions.center { justify-content: center; }

/* ---------- Console mock ---------- */
.ucx-console { border: 1px solid var(--line-strong); background: var(--card); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(20,20,30,.35); text-align: left; }
.ucx-cbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.ucx-cbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ucx-cbar .ucx-ctitle { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.ucx-cbody { display: grid; grid-template-columns: 210px 1fr; min-height: 380px; }
.ucx-crail { border-right: 1px solid var(--line); padding: 16px 12px; background: var(--bg); }
.ucx-crail .ucx-rlabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); padding: 0 8px 10px; }
.ucx-rdom { display: flex; align-items: center; gap: 9px; padding: 9px 8px; font-size: 14px; color: var(--ink-soft); border-left: 2px solid transparent; }
.ucx-rdom .iconify { font-size: 16px; color: var(--ink-mute); }
.ucx-rdom.on { color: var(--ink); background: var(--bg-2); border-left-color: var(--accent); font-weight: 500; }
.ucx-rdom.on .iconify { color: var(--accent); }
.ucx-cmain { padding: 18px 20px; position: relative; }
.ucx-cmain-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ucx-cmain-head h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ucx-cscore { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--uc-ok); border: 1px solid rgba(47,158,110,.35); padding: 5px 9px; background: rgba(47,158,110,.06); }
.ucx-cscore b { color: var(--uc-ok); }
.ucx-ctable { margin-top: 14px; border: 1px solid var(--line); }
.ucx-crow { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ucx-crow:last-child { border-bottom: 0; }
.ucx-crow .ucx-casset { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 500; }
.ucx-crow .ucx-casset .iconify { color: var(--ink-mute); font-size: 15px; }
.ucx-crow .ucx-cowner { color: var(--ink-soft); }
.ucx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-mono); padding: 4px 9px; border: 1px solid var(--line-strong); color: var(--ink-soft); white-space: nowrap; }
.ucx-pill.ok { color: var(--uc-ok); border-color: rgba(47,158,110,.4); background: rgba(47,158,110,.06); }
.ucx-pill.warn { color: var(--accent-ink); border-color: rgba(199,68,15,.35); background: rgba(241,90,34,.07); }
.ucx-pill .iconify { font-size: 13px; }
.ucx-cscan { position: absolute; left: 0; right: 0; height: 46px; top: 60px; background: linear-gradient(180deg, transparent, rgba(241,90,34,.06), transparent); pointer-events: none; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ucx-cscan { animation: ucxscan 5.5s ease-in-out infinite; }
  @keyframes ucxscan { 0%{ top:60px; opacity:0 } 12%{opacity:1} 50%{ top:300px; opacity:1 } 62%{opacity:0} 100%{ top:60px; opacity:0 } }
}

/* console fits narrow screens: stack the domain rail above the table */
@media (max-width: 600px) {
  .int-hero-media { min-width: 0; }
  .ucx-cbody { grid-template-columns: 1fr; min-height: 0; }
  .ucx-crail { border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .ucx-crail .ucx-rlabel { width: 100%; padding-bottom: 4px; }
  .ucx-rdom { border-left: 0; padding: 6px 8px; }
  .ucx-cmain { min-width: 0; }
}

/* ---------- Trust wall (wide) ---------- */
.proof-lead { text-align: left; max-width: 34ch; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.18rem, 2.1vw, 1.55rem); line-height: 1.34; letter-spacing: -.02em; color: var(--ink); }
.trust2 { display: grid; grid-template-columns: repeat(3, 1fr) 1.55fr; grid-auto-rows: minmax(120px, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: clamp(28px, 3.5vw, 44px); }
.trust2-wide { grid-template-columns: repeat(5, 1fr) 1.5fr; grid-auto-rows: minmax(104px, 1fr); }
.trust2-cell { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2vw, 26px); text-decoration: none; transition: background .18s ease; }
.trust2-cell:hover { background: var(--bg-2); }
.trust2-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; opacity: .8; transition: opacity .18s ease; }
.trust2-wide .trust2-logo { height: 24px; max-width: 120px; filter: grayscale(1); opacity: .58; transition: filter .22s ease, opacity .22s ease; }
.trust2-wide .trust2-cell:hover .trust2-logo { filter: none; opacity: 1; }
.trust2-arr { position: absolute; top: 14px; right: 14px; font-size: 15px; color: var(--ink-mute); }
.trust2-read { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; }
.trust2-read .trust2-arr { position: static; top: auto; right: auto; opacity: .5; transform: none; font-size: 15px; color: var(--ink-mute); transition: color .2s ease, opacity .2s ease; }
.trust2-cell:hover .trust2-read .trust2-arr { opacity: 1; color: var(--accent); }
.trust2-read-t { font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--accent); white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(6px); transition: max-width .3s ease, opacity .2s ease, transform .3s ease; }
.trust2-cell:hover .trust2-read-t { max-width: 90px; opacity: 1; transform: none; }
.trust2-feat { grid-column: 6; grid-row: 1 / span 2; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(24px, 2.4vw, 32px); text-decoration: none; color: #fff; background: linear-gradient(170deg, rgba(255,255,255,.08), transparent 42%, rgba(0,0,0,.16)), var(--brand, #16161b); overflow: hidden; }
.trust2-feat-logo { height: 20px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.trust2-feat-arr { position: absolute; top: 18px; right: 18px; font-size: 18px; color: rgba(255,255,255,.85); transition: transform .2s ease, color .2s ease; }
.trust2-feat:hover .trust2-feat-arr { transform: translate(2px, -2px); color: #fff; }
.trust2-featbody {  }
.trust2-stat { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: .95; white-space: nowrap; font-size: clamp(30px, 3.4vw, 46px); }
.trust2-statlabel { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.45; margin-top: 10px; max-width: 22ch; }
@media (max-width: 900px) {
  .trust2-wide { grid-template-columns: 1fr 1fr; }
  .trust2-wide .trust2-feat { grid-column: 1 / -1; grid-row: auto; min-height: 200px; }
}
@media (max-width: 520px) { .trust2-wide { grid-template-columns: 1fr; } .trust2-wide .trust2-feat { grid-column: 1; } }

/* ---------- Overview stat band ---------- */
.ucx-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--card); margin-top: clamp(36px,4vw,52px); }
.ucx-stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(26px,3vw,38px); }
.ucx-stat .n { font-family: var(--font-display); font-size: clamp(34px,4.4vw,52px); font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--ink); display: block; }
.ucx-stat .n em { color: var(--accent); font-style: normal; }
.ucx-stat p { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 760px) { .ucx-stats { grid-template-columns: 1fr; } }

/* ---------- Feature rows (50/50) ---------- */
.ucx-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); align-items: center; padding: clamp(40px,6vw,84px) 0; border-bottom: 1px solid var(--line); }
.ucx-feature:last-of-type { border-bottom: 0; }
/* copy native + visual embed: order the two grid children */
.ucx-feature:nth-of-type(2) .ucx-fcopy { order: 2; }
.ucx-feature:nth-of-type(2) .w-embed { order: 1; }
.ucx-feature:nth-of-type(4) .ucx-fcopy { order: 2; }
.ucx-feature:nth-of-type(4) .w-embed { order: 1; }
.ucx-fcopy h2 { font-size: clamp(26px,3.1vw,38px); letter-spacing: -.02em; line-height: 1.08; margin: 12px 0 0; }
.ucx-fcopy > p { margin-top: 16px; font-size: 16.5px; color: var(--ink-soft); line-height: 1.6; max-width: 46ch; }
.ucx-checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.ucx-checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.ucx-checks .ck { flex: none; width: 21px; height: 21px; display: grid; place-items: center; background: var(--ink); color: #fff; margin-top: 1px; }
.ucx-checks .ck .iconify { font-size: 13px; }
.ucx-checks b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .ucx-feature { grid-template-columns: 1fr; gap: 32px; }
  .ucx-feature .ucx-fcopy, .ucx-feature .w-embed { order: 0 !important; }
}

/* visual cell */
.ucx-vis { position: relative; border: 1px solid var(--line-strong); background: linear-gradient(150deg, #c6d2ef 0%, #e2dcee 46%, #f1e4d3 100%); min-height: clamp(300px,32vw,392px); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: clamp(16px,1.8vw,28px); }
.ucx-vis::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(22,22,27,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(22,22,27,.05) 1px, transparent 1px);
  background-size: 52px 52px; background-position: center;
  -webkit-mask-image: radial-gradient(120% 98% at 50% 50%, #000 56%, transparent 94%);
  mask-image: radial-gradient(120% 98% at 50% 50%, #000 56%, transparent 94%); }
.ucx-feature:nth-of-type(1) .ucx-vis { background: linear-gradient(150deg, #ccd7f1 0%, #e9edf6 52%, #f5f3ee 100%); }
.ucx-feature:nth-of-type(2) .ucx-vis { background: linear-gradient(150deg, #e1daf3 0%, #ece7f3 52%, #f6f1ec 100%); }
.ucx-feature:nth-of-type(3) .ucx-vis { background: linear-gradient(150deg, #d0ecdf 0%, #e8f1ec 52%, #f5f3ec 100%); }
.ucx-feature:nth-of-type(4) .ucx-vis { background: linear-gradient(150deg, #fbe2d4 0%, #f7ebe2 52%, #f3eef4 100%); }
.ucx-vis .chrome { width: min(540px, 100%); }
.ucx-vis .chrome-body.ucx-flush { display: block; padding: 0; min-height: 0; }

/* chrome frame */
.chrome { position: relative; z-index: 1; width: min(400px, 100%); background: #fff; border: 1px solid var(--line); box-shadow: 0 26px 54px -30px rgba(20,16,50,.4); overflow: hidden; }
.chrome-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #FBFAF8; }
.chrome-bar span:not(.chrome-title) { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex: none; }
.chrome-title { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-mute); }
.chrome-body { display: grid; place-items: center; padding: clamp(22px, 3vw, 40px); min-height: 176px; }

/* F1 rule rows */
.ucx-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ucx-rule:last-child { border-bottom: 0; }
.ucx-rule .rl { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.ucx-rule .rl code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.ucx-rstate { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--uc-ok); background: var(--uc-ok); color: #fff; transition: transform .3s; }
.ucx-rstate .iconify { font-size: 12px; }
.ucx-feature:hover .ucx-rstate { transform: scale(1.05); }
.ucx-feature:hover .ucx-rule:nth-child(2) .ucx-rstate { transition-delay: .05s; }
.ucx-feature:hover .ucx-rule:nth-child(3) .ucx-rstate { transition-delay: .16s; }
.ucx-feature:hover .ucx-rule:nth-child(4) .ucx-rstate { transition-delay: .27s; }
.ucx-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-top: 1px solid var(--line); background: var(--bg); }
.ucx-runbtn { font-family: var(--font-mono); font-size: 11.5px; color: #fff; background: var(--ink); padding: 7px 12px; display: inline-flex; align-items: center; gap: 7px; }
.ucx-runbtn .iconify { font-size: 13px; }
.ucx-foot-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* SVG diagrams */
.ucx-svg { width: 100%; height: auto; max-width: 440px; position: relative; z-index: 1; }
.ucx-svg .ln { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.ucx-svg .node { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.ucx-svg .node-lab { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-soft); text-anchor: middle; }
.ucx-svg .hub { fill: var(--ink); }
.ucx-svg .hub-lab { font-family: var(--font-mono); font-size: 10px; fill: #fff; text-anchor: middle; }
.ucx-svg .acc { stroke: var(--accent); stroke-width: 2; fill: none; }
.ucx-svg .trace { stroke: var(--accent); stroke-width: 2.2; fill: none; stroke-dasharray: var(--len,300); stroke-dashoffset: var(--len,300); transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.ucx-feature:hover .ucx-svg .trace { stroke-dashoffset: 0; }
.ucx-svg .token { fill: var(--accent); opacity: 0; }
.ucx-feature:hover .ucx-svg .token { animation: ucxtoken 1.4s ease-in-out .2s both; }
.ucx-svg .anode { fill: #fff; stroke: var(--accent); stroke-width: 1.8; }
.ucx-svg .adot { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ucx-svg .pulse { transform-box: fill-box; transform-origin: center; animation: ucxpulse 2.6s ease-in-out infinite; }
  @keyframes ucxpulse { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
}
@keyframes ucxtoken { 0%{ opacity:0 } 12%{opacity:1} 88%{opacity:1} 100%{ opacity:0 } }

/* F4 audit trail */
.ucx-log { padding: 6px 0; }
.ucx-levt { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 11px 15px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ucx-levt:last-child { border-bottom: 0; }
.ucx-levt .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ucx-levt .etxt { color: var(--ink); }
.ucx-levt .etxt b { font-weight: 600; }
.ucx-levt .etime { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); }
.ucx-stamp { position: absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--uc-ok); border: 1.5px solid var(--uc-ok); padding: 6px 10px; transform: rotate(-7deg); background: rgba(47,158,110,.08); }

/* ---------- Testimonial (story-feature, re-declared: reused styles drop descendant rules) ---------- */
.story-feature { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 60px); margin-top: clamp(30px, 3.6vw, 46px); background: var(--brand, #16161b); color: #fff; text-decoration: none; padding: clamp(34px, 4vw, 60px); overflow: hidden; }
.story-feature-main { display: flex; flex-direction: column; }
.story-feature-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.story-feature-q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: clamp(16px, 1.8vw, 22px) 0 0; border: 0; padding: 0; }
.story-feature-side { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2vw, 26px); border-left: 1px solid rgba(255,255,255,.22); padding-left: clamp(24px, 3vw, 44px); }
.story-feature-stat .sf-n { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.03em; line-height: 1; }
.story-feature-stat .sf-l { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.4; margin-top: 8px; max-width: 22ch; }
.story-foot { margin-top: auto; padding-top: clamp(26px,3vw,38px); display: flex; align-items: center; gap: 16px; }
.story-logo { height: 22px; width: auto; max-width: 112px; object-fit: contain; object-position: left center; }
.story-sep { width: 1px; height: 32px; background: rgba(255,255,255,.4); flex: 0 0 auto; }
.story-who { display: flex; flex-direction: column; gap: 2px; }
.story-name { font-weight: 600; font-size: .95rem; color: #fff; }
.story-role { font-size: .85rem; color: rgba(255,255,255,.82); }
@media (max-width: 760px) {
  .story-feature { grid-template-columns: 1fr; }
  .story-feature-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding-top: clamp(22px, 4vw, 30px); flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
}

/* ---------- Font corrections ----------
   The site wrapper .tq-site forces font-family:Inter, overriding the body's
   --font-body (Hanken Grotesk). The source uses Hanken for body copy, Inter for
   headings (self-specified, unaffected), JetBrains Mono for labels. Restore
   Hanken for this page's body text; headings/mono keep their own families.
   Page-scoped: this stylesheet only loads on the Use Case template. */
.ucx-hero, .block-tight, .block, #uc-features { font-family: var(--font-body); }
.int-hero-copy .lede, .head-split .lede { font-family: var(--font-body); }
.hero-actions .btn { font-family: var(--font-body); }
/* the pre-existing .ucx-eyebrow managed style resolves to Inter 17px — restore the mono label */
.ucx-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------- Section rhythm ---------- */
#uc-features { border-top: 1px solid var(--line); }
.head-split .section-title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.65rem); }
.head-split .lede { margin: 0; padding-top: 5px; }
@media (max-width: 940px) {
  .int-hero-grid { grid-template-columns: 1fr; }
  .int-hero-media { margin-top: clamp(28px, 4vw, 44px); }
  .int-hero .int-hero-copy .display, .int-hero .int-hero-copy .lede { max-width: 40ch; }
}


/* ============================================================================
   FEATURE BLOCKS — base layout (CMS `features` RichText -> alternating rows).
   features.js splits the flat RichText into .ucf-row (.ucf-copy + .ucf-banner);
   the per-item banner images come from the "feature-blocks-embed-styling-codes"
   CMS field. Base layout is shared by every use-case item.
   ============================================================================ */
/* Feature blocks — base layout (page-level, shared by every use-case item).
   Goes into the site CSS (gfx-usecase.css). The banners themselves are per-item
   and live in the "Feature blocks embed styling codes" CMS field (see item CSS). */

.ucf-rich .ucf-rows { display: grid; }
.ucf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px);
  align-items: center; padding: clamp(40px, 6vw, 84px) 0;
  border-bottom: 1px solid var(--line);
}
.ucf-row:last-child { border-bottom: 0; }
/* alternate the banner side */
.ucf-row:nth-child(even) .ucf-copy { order: 2; }
.ucf-row:nth-child(even) .ucf-banner { order: 1; }

/* copy column (rendered from the RichText) */
.ucf-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
}
.ucf-copy h3 {
  font-family: var(--font-display); font-size: clamp(26px, 3.1vw, 38px);
  letter-spacing: -.02em; line-height: 1.08; margin: 12px 0 0; color: var(--ink); font-weight: 600;
}
.ucf-copy > p {
  margin: 16px 0 0; font-family: var(--font-body); font-size: 16.5px; line-height: 1.6;
  color: var(--ink-soft); max-width: 46ch;
}
.ucf-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ucf-checks li {
  position: relative; padding-left: 32px; font-family: var(--font-body);
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.ucf-checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; background: var(--ink);
}
.ucf-checks li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

/* banner column — holds the per-item SVG diagram (moved in by features.js from
   the RichText). The pastel tint + dot-grid come from here; the .ucg-* diagram
   styles are shared, appended at the end of this file. */
.ucf-banner {
  position: relative; border: 1px solid var(--line-strong); overflow: hidden;
  min-height: clamp(300px, 32vw, 392px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 2vw, 30px); background-color: var(--bg-2);
}
.ucf-banner .ucg { position: relative; z-index: 1; width: 100%; height: auto; max-width: 470px; display: block; margin: 0 auto; }
.ucf-row-1 .ucf-banner { background: linear-gradient(150deg,#ccd7f1 0%,#e9edf6 52%,#f5f3ee 100%); }
.ucf-row-2 .ucf-banner { background: linear-gradient(150deg,#e1daf3 0%,#ece7f3 52%,#f6f1ec 100%); }
.ucf-row-3 .ucf-banner { background: linear-gradient(150deg,#d0ecdf 0%,#e8f1ec 52%,#f5f3ec 100%); }
.ucf-row-4 .ucf-banner { background: linear-gradient(150deg,#fbe2d4 0%,#f7ebe2 52%,#f3eef4 100%); }
.ucf-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(22,22,27,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,22,27,.05) 1px, transparent 1px);
  background-size: 52px 52px; background-position: center;
  -webkit-mask-image: radial-gradient(120% 98% at 50% 50%, #000 56%, transparent 94%);
  mask-image: radial-gradient(120% 98% at 50% 50%, #000 56%, transparent 94%);
}

@media (max-width: 860px) {
  .ucf-row { grid-template-columns: 1fr; gap: 30px; }
  .ucf-row .ucf-copy, .ucf-row .ucf-banner { order: 0 !important; }
}

/* ============================================================================
   USE-CASE FEATURE DIAGRAMS (.ucg-*) — shared by all items, from graphics-2.
   The SVGs live per-item in the `features` RichText; features.js moves each into
   its .ucf-banner. These class rules are identical across every use case.
   ============================================================================ */
.ucg { width: 100%; height: auto; max-width: 470px; display: block; margin: 0 auto; }

/* edges */
.ucg-edge { stroke: var(--line-strong); stroke-width: 1.5; fill: none; }
.ucg-edge-dash { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.ucg-edge-acc { stroke: var(--accent); stroke-width: 2; fill: none; }

/* nodes / boxes */
.ucg-box { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.ucg-box-soft { fill: #fff; stroke: var(--line-strong); stroke-width: 1.4; }
.ucg-box-acc { fill: #fdf0ea; stroke: var(--accent); stroke-width: 1.8; }
.ucg-box-mute { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1.3; stroke-dasharray: 4 3; }
.ucg-box-warn { fill: rgba(241,90,34,.06); stroke: var(--accent); stroke-width: 1.5; }
.ucg-hub { fill: var(--ink); stroke: none; }
.ucg-band { fill: #fdf0ea; stroke: var(--accent); stroke-width: 1.6; }
.ucg-node { fill: #fff; stroke: var(--ink); stroke-width: 1.7; }
.ucg-anode { fill: #fdf0ea; stroke: var(--accent); stroke-width: 2; }
.ucg-radhub { fill: var(--ink); stroke: none; }

/* type */
.ucg-t { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.ucg-tm { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); text-anchor: middle; }
.ucg-t-sm { font-family: var(--font-display); font-size: 12px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.ucg-ti { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: #fff; text-anchor: middle; }
.ucg-s { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-mute); text-anchor: middle; letter-spacing: .02em; }
.ucg-s-w { font-family: var(--font-mono); font-size: 9px; fill: #fff; opacity: .82; text-anchor: middle; }
.ucg-elab { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-soft); text-anchor: middle; }
.ucg-elab-bg { fill: var(--card); }

/* dots / marks */
.ucg-dot { fill: var(--accent); }
.ucg-dot-ok { fill: #2F9E6E; }
.ucg-dot-warn { fill: var(--accent); }
.ucg-dot-mute { fill: var(--line-strong); }
.ucg-mk { font-family: var(--font-mono); font-weight: 700; font-size: 15px; text-anchor: middle; }
.ucg-mk-ok { fill: #2F9E6E; }
.ucg-mk-no { fill: var(--accent-ink); }
.ucg-mk-okw { fill: #fff; font-size: 22px; }
.ucg-sign { font-family: var(--font-mono); font-size: 15px; font-weight: 700; text-anchor: middle; }
.ucg-sign-add { fill: #2F9E6E; }
.ucg-sign-chg { fill: var(--ink-mute); }
.ucg-sign-rem { fill: var(--accent-ink); }

/* shield */
.ucg-shield { fill: var(--ink); stroke: none; }

/* radar */
.ucg-radgrid { fill: none; stroke: var(--line-strong); stroke-width: 1; opacity: .65; }
.ucg-radaxis { stroke: var(--line-strong); stroke-width: 1; opacity: .55; }
.ucg-radfill { fill: rgba(241,90,34,.14); stroke: var(--accent); stroke-width: 2; }

/* document / query glyphs */
.ucg-doc { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.ucg-doc-fold { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.ucg-doc-l { stroke: var(--line-strong); stroke-width: 2; }
.ucg-qlens { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.ucg-qh { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }

/* motion — a slow accent flow along the governed path, a gentle pulse on the
   focus. Both hold still if the reader asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ucg-flow { stroke-dasharray: 5 5; animation: ucgFlow 1s linear infinite; }
  @keyframes ucgFlow { to { stroke-dashoffset: -20; } }
  .ucg-pulse { transform-box: fill-box; transform-origin: center; animation: ucgPulse 2.6s ease-in-out infinite; }
  @keyframes ucgPulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
}