/* 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}
}

/* "Check TheOS in your own AI": hero entry point into the assistant handoff. */
body[data-page] .hero-ai{margin-top:18px!important;display:flex!important;flex-direction:column!important;gap:6px!important;align-items:flex-start!important}
body[data-page] .hero-ai-open{display:inline-flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;padding:10px 14px!important;border:1px solid var(--edge)!important;border-radius:999px!important;background:var(--glass-2)!important;color:var(--fg)!important;cursor:pointer!important;transition:border-color .24s var(--e),background .24s var(--e)!important}
body[data-page] .hero-ai-open:hover{border-color:var(--peri)!important;background:var(--glass)!important}
body[data-page] .hero-ai-label{font-size:.9rem!important;font-weight:650!important;letter-spacing:-.005em!important}
body[data-page] .hero-ai-marks{display:inline-flex!important;align-items:center!important;gap:8px!important}
body[data-page] .hero-ai-mark{display:inline-grid!important;place-items:center!important;width:24px!important;height:24px!important;border-radius:7px!important;background:color-mix(in srgb,var(--fg) 8%,transparent)!important;color:var(--fg-2)!important;transition:color .24s var(--e),background .24s var(--e)!important}
body[data-page] .hero-ai-mark svg{width:15px!important;height:15px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body[data-page] .hero-ai-open:hover .hero-ai-mark{color:var(--fg)!important;background:color-mix(in srgb,var(--peri) 14%,transparent)!important}
body[data-page] .hero-ai-note{font-size:.78rem!important;line-height:1.45!important;color:var(--fg-3)!important;max-width:44ch!important}
@media(max-width:600px){
 body[data-page] .hero-ai{width:100%!important}
 body[data-page] .hero-ai-open{width:100%!important;justify-content:space-between!important;border-radius:var(--radius-control)!important;padding:12px 14px!important}
 body[data-page] .hero-ai-label{font-size:.88rem!important}
 body[data-page] .hero-ai-mark{width:22px!important;height:22px!important}
}

/* "Know more about TheOS on" in the shared footer, on every page. */
.network-footer .footer-ai{margin-top:14px}
.network-footer .footer-ai-open{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--footer-edge,rgba(255,255,255,.12));border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:border-color .24s,background .24s}
.network-footer .footer-ai-open:hover{border-color:currentColor;background:var(--footer-hover,rgba(255,255,255,.05))}
.network-footer .footer-ai .hero-ai-label{font-size:.86rem;font-weight:650}
.network-footer .footer-ai .hero-ai-marks{display:inline-flex;align-items:center;gap:8px}
.network-footer .footer-ai .hero-ai-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(127,127,127,.14);color:inherit;opacity:.85}
.network-footer .footer-ai .hero-ai-mark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.network-footer .footer-ai .hero-ai-mark[hidden]{display:none}
@media(max-width:600px){.network-footer .footer-ai-open{width:100%;justify-content:space-between;border-radius:14px}}