/* ==========================================================================
   uprightmedia.io — V4 overrides
   Loads after site.css and v3.css. V4 keeps V3's structure and takes the
   "Copy Revisions" brief: no section eyebrows, no monospace captions, one
   accent (green #4AB681) used only for positive numbers, the Upright column,
   the active accordion marker and chart end-values. Everything else is grey.
   ========================================================================== */

:root{--accent:#4AB681;--tile:#141516;--tile-ink:#8a8f98;}

/* ---- The four-colour system collapses to grey ------------------------- */
[data-c],[data-c="model"],[data-c="media"],[data-c="creative"],[data-c="measure"]{
  --c:var(--tile-ink);--c-ink:var(--tile-ink);
  --c-tint:#ffffff06;--c-line:var(--color-border-primary);
}

/* ---- Type: no monospace outside the console -------------------------- */
.flow-return span,.compare thead th,.bento-sub,.bento-frag,.bento-frag .frag-head,.bento-frag .frag-foot,
.glance-head,.exp h3,.fineprint,.form-status{font-family:var(--font-regular);letter-spacing:0;text-transform:none;}
.compare thead th{font-size:12px;font-weight:500;color:var(--color-text-quaternary);}
.bento-sub{font-size:14px;line-height:1.5;color:var(--color-text-tertiary);}
.bento-frag,.bento-frag .frag-head,.bento-frag .frag-foot,.bento-frag .frag-row span{font-size:12px;font-weight:500;color:var(--color-text-quaternary);}
.bento-frag .frag-row b{font-weight:500;color:var(--color-text-secondary);}
.glance-head{font-size:12px;font-weight:500;}
.exp h3{font-size:13px;font-weight:500;color:var(--color-text-tertiary);}
.exp li:before{background:var(--color-text-quaternary);}

/* ---- Hero ------------------------------------------------------------ */
.pill{font-size:13px;}
.pill i{background:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent);}
.hero-art:after{background:radial-gradient(42% 52% at 64% 40%,color-mix(in oklab,var(--accent) 12%,transparent),transparent 70%);}
.band-item{color:var(--color-text-quaternary);opacity:1;}
.band-item:hover{opacity:1;color:var(--color-text-quaternary);}

/* ---- How it works: numbered steps, grey tiles -------------------------- */
.flow-node{background:var(--color-bg-level-1);}
.flow-ico{color:var(--tile-ink);background:var(--tile);box-shadow:inset 0 0 0 1px var(--color-border-primary);}
.flow-who{font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;color:var(--color-text-quaternary);}
.flow-return{border-color:var(--color-border-secondary);}
.flow-return:before{border-color:var(--color-text-quaternary);}
.flow-return span{font-size:13px;color:var(--color-text-tertiary);text-align:center;}
@media (max-width:1023px){.flow-return span{white-space:normal;}}

/* The Upright column: the only green in this section. */
.compare .us{background:#ffffff05;border-left:1px solid var(--color-border-primary);border-right:1px solid var(--color-border-primary);}
.compare thead .us{color:var(--accent);background:#ffffff05;border-top:2px solid var(--accent);}
.compare tr:last-child td.us{border-bottom:1px solid var(--color-border-primary);}
@media (max-width:767px){
  .compare td.us:before{color:var(--accent);}
}

/* ---- How we get results: accordion with a green active marker ---------- */
.cap-desc{font-size:15px;line-height:1.6;color:var(--color-text-secondary);max-width:48ch;}
.cap-item .run-tab-label{color:var(--color-text-quaternary);}
.cap-item[aria-selected="true"] .run-tab-label{color:var(--color-text-primary);}
.cap .run-tab[aria-selected="true"] .run-tab-rail i{background:var(--accent);}
.cap-seg[aria-selected="true"] i b{background:var(--accent);}

/* ---- Technology: the V3 console and agent cards, in V4 colours ------------- */
.metric .delta{color:var(--accent);}
.metric .delta[data-dir="down"]{color:#eb5757;}
.badge[data-state="test"]{color:var(--color-text-tertiary);border-color:var(--color-border-secondary);background:var(--color-bg-level-2);}
.agent-tag{color:var(--color-text-tertiary);border-color:var(--color-border-secondary);background:var(--color-bg-level-2);}
.panel-caption{color:var(--color-text-quaternary);}

/* ---- Results: grey charts with one green end value; the tall card splits into
   two equal halves, art above and text below, to match the two cards beside it */
.bento-tall .bento-art{inset:32px 32px calc(50% + 6px);}
.bento-art .wire rect.on{stroke:var(--accent);}
.bento-frag .frag-row.on i{background:var(--accent);}
.bento-frag .frag-row.on b{color:var(--accent);}
.bento-frag .step,.bento-frag .curve{stroke:var(--color-text-quaternary);}
.bento-frag .end{fill:var(--accent);}
.bento-frag .frag-foot .on{color:var(--accent);}

/* ---- Background: stats row and one line under it ------------------------- */
.about-band.stats-only{display:block;margin-top:64px;padding-top:48px;}
.about-band.stats-only .band-kpis{grid-template-columns:repeat(3,var(--1fr));}
.about-band.stats-only .band-kpis > div:first-child{padding-left:0;border-left:0;}
@media (max-width:639px){.about-band.stats-only .band-kpis{grid-template-columns:1fr;}}

/* ---- Ground rules: a static 3×2 grid of cards ---------------------------- */
.rules-grid{display:grid;grid-template-columns:repeat(3,var(--1fr));gap:12px;}
.rule{padding:24px;border:1px solid var(--color-border-primary);border-radius:var(--radius-8);background:var(--color-bg-level-1);}
.rule-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-8);color:var(--tile-ink);background:var(--tile);box-shadow:inset 0 0 0 1px var(--color-border-primary);}
.rule-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.rule h3{margin-top:28px;color:var(--color-text-primary);}
.rule p{margin-top:8px;color:var(--color-text-tertiary);}
@media (max-width:1023px){.rules-grid{grid-template-columns:repeat(2,var(--1fr));}}
@media (max-width:639px){.rules-grid{grid-template-columns:1fr;}.rule h3{margin-top:20px;}}

/* ---- FAQ ---------------------------------------------------------------- */
.glance-row dt:before{background:var(--color-text-quaternary);}
.faq summary:hover:after,.faq details[open] summary:after{color:var(--color-text-secondary);}

/* ---- Apply: green glow, two optional fields side by side ------------------ */
.contact-split .contact-card{box-shadow:0 0 140px -30px color-mix(in oklab,var(--accent) 45%,transparent);}
.contact-card .field input:focus,.contact-card .field textarea:focus{border-color:var(--color-border-tertiary);}
.field-row{display:grid;grid-template-columns:repeat(2,var(--1fr));gap:12px;margin-top:12px;}
.field-row .field + .field{margin-top:0;}
.field-row + .field{margin-top:12px;}
@media (max-width:479px){.field-row{grid-template-columns:1fr;}.field-row .field + .field{margin-top:12px;}}

/* Phones: the comparison cards' row labels in Inter, sentence case. */
@media (max-width:767px){
  .compare td[data-label]:before{font-family:var(--font-regular);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;}
}

/* Technology header in one column: heading, then the paragraph at full reading width. */
.section-header-stack{grid-template-columns:1fr;padding-bottom:64px;}
.section-header-stack .title-col{padding-right:0;}
.section-header-stack .desc-col{padding-inline:0;margin-top:24px;}
.section-header-stack .section-desc{max-width:92ch;}
/* The Upright Engine line: wide enough to sit on two lines. */
.panel-caption{max-width:100ch;}

/* Operator-founded figures: each centred in its own column. */
.about-band.stats-only .band-kpis > div{padding:4px 24px;text-align:center;}
.about-band.stats-only .band-kpis dd{margin-inline:auto;}

/* Hero clip: its background is true black, so screen-blending lifts it into the page
   with no frame; a side fade keeps the light trails from cutting off at the edge. */
.hero-art .asset-frame{background:transparent;}
.hero-art .seamless-loop{background:transparent;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}

/* Agent cards: name and pulse dot in the accent; ticks stay grey. Before the run they
   are held back (.agents-idle) so the sequence begins when the console is reached. */
.annot{--c:var(--accent);}
.annot-head{color:var(--accent);}
.annot-log .tk{border-color:var(--tile-ink);}
.annot-log .tk::after{background:var(--tile-ink);}
.agents-idle .annot{opacity:0;}

/* Console table at phone width: room for seven-figure spend. */
@media (max-width:768px){.rows .row{grid-template-columns:minmax(0,1fr) 86px 56px;}}