/* TheOS polish layer. Loaded last on every rendered page.
   Purpose: fewer frames and divider lines, a readable minimum text size, one
   card language in both themes, and comfortable spacing on 13-inch laptops and
   phones. Diagram geometry inside the capability visuals is untouched. */

/* ---------- 1. Readable minimums for real copy ---------- */
body[data-page] .kicker{font-size:.78rem!important;letter-spacing:.11em!important}
body[data-page] .hero-proof span{font-size:.82rem!important;font-weight:600!important;padding:8px 13px!important;border-color:transparent!important;background:var(--glass-2)!important}
body[data-page] .explore-modes span{font-size:.86rem!important;border-color:transparent!important;background:var(--glass-2)!important}
body[data-page] .group-tab small{font-size:.72rem!important}
body[data-page] .group-tab b{font-size:1.02rem!important;line-height:1.25!important}
body[data-page] .group-tab em{font-size:.82rem!important;line-height:1.4!important}
body[data-page] .space-orb small{font-size:.66rem!important}
body[data-page] .cap-product{font-size:.7rem!important;letter-spacing:.06em!important;opacity:.9!important;max-width:55%!important;padding:5px 10px!important;border-color:transparent!important;background:var(--glass-2)!important}
body[data-page] .cap-open{font-size:.86rem!important}
body[data-page] .usecase-tile-top{font-size:.72rem!important}
body[data-page] .usecase-no{font-size:.8rem!important}
body[data-page] .journey-lane-no{font-size:.8rem!important}
body[data-page] .journey-lane-copy b{font-size:1.02rem!important;line-height:1.25!important}
body[data-page] .journey-lane-copy em{font-size:.82rem!important;line-height:1.4!important}
body[data-page] .journey-tag{font-size:.72rem!important}
body[data-page] :is(.group-tab b,.journey-lane-copy b,.group-tab em,.journey-lane-copy em){overflow-wrap:normal!important;word-break:normal!important;hyphens:manual!important}

/* Explorer detail dialog copy */
body[data-page] .detail-product{font-size:.8rem!important;letter-spacing:.09em!important}
body[data-page] #featureModalGroup{font-size:.9rem!important}
body[data-page] :is(.detail-list,.detail-list-v6) li{font-size:.98rem!important;line-height:1.5!important;padding:8px 0!important;border-top:0!important;border-bottom:0!important}
body[data-page] :is(.together-points span,.together-points li){font-size:.94rem!important}
body[data-page] .detail-connect span{font-size:.84rem!important;padding:7px 12px!important}
body[data-page] .related-usecase-pill{font-size:.86rem!important;padding:10px 15px!important}
body[data-page] .detail-intelligence-band p{font-size:1rem!important;line-height:1.55!important}
body[data-page] :is(.detail-intelligence-band,.detail-together,.related-usecases,.detail-outcomes,.detail-head) small{font-size:.78rem!important;letter-spacing:.1em!important}

/* Pricing labels that were rendered in 9-11px monospace */
body[data-page="pricing"] :is(.mix-chip,.scatter-chip){font-family:var(--ff)!important;font-size:.82rem!important;letter-spacing:0!important;font-weight:600!important}
body[data-page="pricing"] :is(.is-included,.software-source,.inclusion-calc-link,.tab-count){font-size:.84rem!important}
body[data-page="pricing"] .wizard-final-link{font-family:var(--ff)!important;font-size:.86rem!important;letter-spacing:0!important}
body[data-page="pricing"] .mix-count{font-size:.74rem!important}

/* ---------- 2. One frame per component, not frames inside frames ---------- */
/* Category rail: the tabs are the component; the tray around them is not. */
body[data-page] .group-rail{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;gap:10px!important}
body[data-page] .group-tab{border:1px solid transparent!important;background:color-mix(in srgb,var(--bg-2) 88%,transparent)!important;box-shadow:none!important}
body[data-page] .group-tab:hover{background:var(--glass)!important}
body[data-page] .group-tab[aria-selected=true]{border-color:var(--peri)!important;background:color-mix(in srgb,var(--peri) 9%,var(--bg-2))!important}
body[data-page] .group-intro{border-color:transparent!important}
/* Use-case lanes stack number over copy so long names never split mid-word. */
body[data-page="use-cases"] .journey-lane{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;min-height:0!important;padding:14px!important}
body[data-page="use-cases"] .journey-lane-no{width:32px!important;height:32px!important;border-radius:10px!important}
body[data-page="use-cases"] .journey-lane>i{display:none!important}
body[data-page="use-cases"] .journey-lane-copy{width:100%!important}

/* Explorer detail dialog: the dialog is the frame; sections become soft panels. */
body[data-page] .detail-shell{border:0!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body[data-page] .detail-head{border:0!important;background:var(--glass-2)!important;border-radius:var(--radius-card)!important}
body[data-page] .detail-experience{border:0!important;background:var(--glass-2)!important;border-radius:var(--radius-card)!important;overflow:hidden}
body[data-page] .detail-outcomes{border:0!important}
body[data-page] .detail-intelligence-band{border:0!important;background:transparent!important;gap:14px!important;padding:0!important}
body[data-page] .detail-intelligence-band>*,body[data-page] #featureModal .detail-intelligence-band>*{border:0!important;border-radius:18px!important;background:var(--glass-2)!important}
body[data-page] .detail-together{border:0!important;background:var(--glass-2)!important;border-radius:var(--radius-card)!important}
body[data-page] .detail-next-step,body[data-page] #featureModal .detail-together>*{border:0!important}
body[data-page] .related-usecases{border:0!important;background:var(--glass-2)!important;border-radius:var(--radius-card)!important}
body[data-page] .feature-loop-panel{border:0!important;background:transparent!important;box-shadow:none!important}
body[data-page] :is(.feature-loop-actions,.feature-category-jump){border:0!important}
body[data-page] .feature-loop-toggle{border:0!important;border-radius:16px!important;background:var(--glass-2)!important}
body[data-page] .feature-category-jump{margin-top:10px!important}

/* Pricing selector: tabs float on the panel instead of sitting in a boxed strip. */
body[data-page="pricing"] .category-tabs{border-bottom:0!important;background:transparent!important}
body[data-page="pricing"] .category-tab{background:var(--glass-2)!important}
/* The plan name already sits in the card heading; the price slot repeated it. */
body[data-page="pricing"] .wizard-choice-price.plan-only{display:none!important}
/* Drawer action bar was painted with a dark hard-coded gradient in light mode. */
body[data-page="pricing"] .guide-drawer-actions{background:linear-gradient(180deg,transparent,var(--bg-2) 28%)!important}

/* Industry wording applied to explorer cards (see finder.js). */
body[data-page] .cap-card .cap-context{font-size:.92rem!important;line-height:1.5!important;color:var(--fg-2)!important;margin:8px 0 0!important;font-weight:450!important}
body[data-page] .usecase-tile .cap-context{margin-bottom:8px!important}
body[data-page] .finder-note{margin:8px 0 0;font-size:.9rem;color:var(--site-muted)}

/* ---------- 3. Small screens ---------- */
@media(max-width:600px){
 body[data-page] .finder-search{flex-direction:column!important}
 body[data-page] .finder-search button{margin-top:0!important;width:100%!important}
 body[data-page] .finder-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
 body[data-page] .finder-actions>*{width:100%!important;text-align:center!important;margin:0!important}
 body[data-page] .finder-actions a{grid-column:1/-1!important}
 body[data-page="use-cases"] .journey-lane{padding:12px!important}
 body[data-page] .group-tab b{font-size:.95rem!important}
 body[data-page] .detail-intelligence-band{gap:10px!important}
 body[data-page] .guide-drawer-copy{padding-bottom:12px!important}
}

/* "Know more about TheOS on": real provider marks that open the prepared AI handoff.
   Shared by the hero rows (product pages) and the footer (every page). */
body[data-page] .hero-ai{margin-top:22px!important;display:flex!important;flex-direction:column!important;gap:8px!important;align-items:flex-start!important}
.hero-ai-open{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:16px 18px!important;border:1px solid var(--edge,rgba(255,255,255,.12))!important;border-radius:18px!important;background:var(--glass-2,rgba(255,255,255,.03))!important;color:var(--fg,inherit)!important;font:inherit!important;text-align:left!important;cursor:pointer!important;transition:border-color .24s,background .24s,transform .24s!important}
.hero-ai-open:hover{border-color:var(--peri,#6c6cff)!important;background:var(--glass,rgba(255,255,255,.06))!important}
.hero-ai-label{font-size:.92rem!important;font-weight:650!important;letter-spacing:-.005em!important;line-height:1.3!important}
.hero-ai-marks{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:10px!important}
.hero-ai-mark{display:inline-grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:11px!important;background:color-mix(in srgb,currentColor 9%,transparent)!important;color:var(--fg,inherit)!important;transition:transform .2s,background .2s!important}
.hero-ai-mark svg{width:20px!important;height:20px!important;fill:currentColor!important;stroke:none!important}
.hero-ai-mark[hidden]{display:none!important}
.hero-ai-open:hover .hero-ai-mark{background:color-mix(in srgb,var(--peri,#6c6cff) 16%,transparent)!important}
body[data-page] .hero-ai-note{font-size:.8rem!important;line-height:1.45!important;color:var(--fg-3,inherit)!important;max-width:46ch!important;margin:0!important}
@media(max-width:600px){
 body[data-page] .hero-ai{width:100%!important}
 .hero-ai-open{width:100%!important}
 .hero-ai-mark{width:40px!important;height:40px!important}
 .hero-ai-mark svg{width:21px!important;height:21px!important}
}
/* Footer placement: same panel, footer colours. */
.network-footer .footer-ai{margin-top:18px}
.network-footer .footer-ai-open{border-color:var(--footer-edge,rgba(255,255,255,.14))!important;background:transparent!important;color:inherit!important}
.network-footer .footer-ai-open:hover{background:var(--footer-hover,rgba(255,255,255,.05))!important}
.network-footer .footer-ai .hero-ai-mark{background:rgba(127,127,127,.16)!important;color:inherit!important}