/* css/ai.css — only what ai.html has that platform.html does not. Loaded after css/site.css.
A few shared rules are repeated here on purpose: in the original sheet they came after an
ai-only rule with the same selector, and repeating them keeps that order. */
/* --- icon-gutter point layout: icon in its own 26px gutter, title on
one line beside it, title and body sharing a single left edge --- */
.pts--ico { column-gap: clamp(34px, 4.4vw, 64px); row-gap: clamp(26px, 2.6vw, 36px);
margin-top: 52px; }
.pts--ico:not(.c3):not(.c4) { grid-template-columns: repeat(2, 1fr); }
/* the :not(.c3):not(.c4) selector above outranks a plain .pts--ico, so the phone rule
has to name it too — without that the four context tiles stayed two-up at 375px */
@media (max-width: 760px) { .pts--ico, .pts--ico.c3, .pts--ico:not(.c3):not(.c4) { grid-template-columns: 1fr; row-gap: 24px; } }
/* --- light restorations: rules the dark pass had rewritten --- */
section.tint { background: var(--light); }
/* skip link — a gap on the homepage, fixed here */
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--blue);
color: #fff; padding: 12px 18px; font-weight: 700; font-size: 13px; transition: top .25s; }
.skip:focus { top: 16px; }
/* --- subpage hero: photo slot, breadcrumb, bottom-anchored copy ---
The homepage hero is a centred statement over the globe; a subpage
hero is a shorter, left-set banner over swappable imagery. The veil
and the left-weighted scrim carry the type, which is why the frame
is positioned to hold the screens in the clear right third. */
header.hero.hero--sub { min-height: clamp(480px, 66vh, 700px); align-items: flex-end;
overflow: hidden; display: flex; }
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--sub .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 48%; display: block; }
/* centred copy, so the frame is centred too and the scrim becomes a
symmetric well rather than the left-weighted wash it ships with */
.hero--sub .hero-in { margin: 0 auto; max-width: 880px; text-align: center;
padding: 132px 0 100px; }
/* the 150px desktop hero gap from css/site.css, restated because this sheet
loads later and its rules above would otherwise win on specificity */
@media (min-width: 901px) {
header.hero.hero--sub { min-height: 0; }
.hero--sub .hero-in { padding-top: 150px; }
}
.hero--sub .eyebrow { display: inline-flex; align-items: center; gap: 9px;
color: rgba(255,255,255,.82); margin-bottom: 22px; }
.hero--sub .hero-sub { margin: 22px auto 0; max-width: 56ch; }
.hero--sub .hero-ctas { justify-content: center; margin-top: 34px; }
.subbar-in { display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px; padding-top: 20px; padding-bottom: 20px; }
.subbar-note { margin: 0 auto; font-size: 13.5px; line-height: 1.55; color: var(--sub); max-width: 74ch; }
/* --- why: where the hours actually go, on paper --- */
.why-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; margin-top: 60px; }
.story p { font-size: 16.5px; line-height: 1.65; color: var(--sub); }
.story p + p { margin-top: 16px; }
.story .pull { margin-top: 26px; font-size: 21px; font-weight: 500; letter-spacing: -.015em;
color: var(--ink); line-height: 1.45; }
.timebars { background: var(--white); border: 1px solid var(--line); padding: 32px 28px 24px;
box-shadow: 0 24px 55px -34px rgba(7,34,89,.28); }
.tb + .tb { margin-top: 26px; }
.tb-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--sub); margin-bottom: 10px; }
.tb-track { display: flex; height: 44px; overflow: hidden; }
.tb-track i { font-style: normal; display: flex; align-items: center; padding: 0 14px;
font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.tb-prep { width: var(--w); background: #E9EDF6; color: #3E4C6E;
border: 1px solid #D6DEEE; border-right: 0;
transition: width 1.1s cubic-bezier(.2,.7,.2,1) .2s; }
.tb-judge { flex: 1; background: var(--blue); color: #fff; }
.tb--ai .tb-prep { background: rgba(13,79,211,.1); border-color: rgba(13,79,211,.25); color: var(--blue); }
.timebars:not(.on) .tb-prep { width: 18%; }
.tb-cap { margin-top: 18px; font-size: 12px; color: var(--sub); }
/* the five questions run as one full-width band under the story and the bars,
so the row above pairs two blocks of similar height instead of a short
paragraph against a tall stack */
.qledger { margin-top: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
.qledger-k { grid-column: 1 / -1; padding: 0 0 18px; font-size: 11px; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--sub); }
.ql { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start;
padding: 18px 0 0; border-top: 1px solid var(--line); }
.ql i { width: 8px; height: 8px; margin: 7px 0 0 2px; background: var(--blue); transform: rotate(45deg); }
.ql p { font-size: 16px; line-height: 1.45; font-weight: 500; letter-spacing: -.012em; color: var(--ink); }
/* --- AI Reviewer panel: a product surface, so it stays night --- */
.rvw { background: linear-gradient(180deg,#0B1A38,#081226); border: 1px solid rgba(127,169,248,.22);
border-radius: 16px; overflow: hidden; padding-bottom: 6px; font-size: 12.5px; line-height: 1.5;
box-shadow: 0 40px 90px rgba(2,8,26,.45), 0 0 140px rgba(30,86,214,.18); }
.rvw-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
border-bottom: 1px solid rgba(127,169,248,.16); color: rgba(255,255,255,.85);
font-weight: 700; letter-spacing: .06em; font-size: 11.5px; text-transform: uppercase; }
.rvw-bar .dots { display: flex; gap: 5px; }
.rvw-bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(157,190,255,.4); }
.rvw-bar .tag { margin-left: auto; color: #9DBEFF; letter-spacing: .14em; }
.rvw-sec { padding: 16px 18px 4px; }
.rvw-k { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
color: rgba(157,190,255,.75); }
.rvw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.rvw-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
background: rgba(157,190,255,.08); border: 1px solid rgba(157,190,255,.22); color: #CFE0FF;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 6px) 100%, 0 100%); }
.rvw-chips .ok { color: #7CE3B1; }
.rvw-flag { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start;
padding: 11px 13px; margin: 10px 0; background: rgba(245,169,75,.07);
border: 1px solid rgba(245,169,75,.3); color: #F3D9B4; }
.rvw-flag i { width: 7px; height: 7px; margin-top: 5px; background: #F5A94B; transform: rotate(45deg); }
.rvw-lines { padding: 4px 0 10px; }
.rvw-lines b { display: block; height: 6px; border-radius: 3px; background: rgba(157,190,255,.34); margin: 9px 0; }
.rvw-lines b:nth-child(2) { width: 82%; background: rgba(157,190,255,.24); }
.rvw-lines b:nth-child(3) { width: 64%; background: rgba(157,190,255,.18); }
.rvw-foot { margin: 12px 14px 14px; display: flex; align-items: center; justify-content: center;
gap: 9px; border: 1px solid #9DBEFF; color: #CFE0FF; padding: 11px; font-weight: 700;
letter-spacing: .14em; font-size: 10.5px; text-transform: uppercase; border-radius: 40px; }
.rvw-foot i { width: 7px; height: 7px; border-radius: 50%; background: #7CE3B1; }
.rvw-cap { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.45); }
section.tint .rvw-cap, section:not(.night) .rvw-cap { color: var(--sub); }
/* controls that hold at once, not stages in an order: the brand
diamond instead of a step number */
.anno-item .n i { display: block; width: 8px; height: 8px; margin-top: 7px;
background: #4C86F5; transform: rotate(45deg); }
.tint .anno-item, section:not(.night) .anno-item { border-top-color: var(--line); }
.tint .anno-item h3, section:not(.night) .anno-item h3 { color: var(--ink); }
.tint .anno-item p, section:not(.night) .anno-item p { color: var(--sub); }
.tint .anno-item .n i, section:not(.night) .anno-item .n i { background: var(--blue); }
/* --- capability cards: four of them, so 2×2 rather than a 3-up grid
with one orphan on the second row. Each vignette is a small product
surface framed by the same window bar with the same WIDTH AI tag —
four stages, visibly one layer, which is the claim the section heading
makes. The vignettes ship night in css/site.css; here they sit inside
white cards on the light band, so they take the paper skin the product
panels use (css/product.css .rvw--paper): a faint navy wash for the
screen, white sheets, hairlines and marks in --dark and --blue, the
alert coral kept but deepened where it is text, confirm green #178A5C.
The wash is translucent so it darkens with the card on hover. --- */
.caps--ai { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.caps--ai .viz { --paper-ok: #178A5C; --paper-alert: #E4715F; --paper-alert-ink: #C4513F;
background: linear-gradient(180deg, rgba(7,34,89,.05), rgba(7,34,89,.02)); }
.caps--ai .viz-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px 9px;
border-bottom: 1px solid var(--line);
font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--sub); }
.caps--ai .viz-bar .dots { display: flex; gap: 4px; }
.caps--ai .viz-bar .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(7,34,89,.18); }
.caps--ai .viz-bar .tag { margin-left: auto; color: var(--blue); letter-spacing: .16em; }
/* the scene bleeds edge to edge; slices, never letterboxes, as the card
column changes width — essential drawing stays in the middle 260 units */
.caps--ai .viz svg { display: block; width: 100%; height: 150px; }
/* the shared marks (css/site.css sets them in white alphas for night) */
.caps--ai .viz text { fill: rgba(7,34,89,.6); }
.caps--ai .viz .wd { fill: rgba(7,34,89,.18); }
.caps--ai .viz .ln { stroke: rgba(7,34,89,.22); }
.caps--ai .viz .fl { fill: var(--white); }
.caps--ai .viz .gr { stroke: rgba(7,34,89,.07); }
.caps--ai .viz .bl { stroke: var(--blue); }
/* onboarding: scan, typed values and the verified pill in WIDTH blue */
.caps--ai .viz--onb .scan { stroke: var(--blue); }
.caps--ai .viz--onb .ty { fill: var(--blue); opacity: .8; }
.caps--ai .viz--onb .vpill rect { fill: rgba(13,79,211,.08); stroke: var(--blue); }
.caps--ai .viz--onb .vpill text { fill: var(--blue); }
/* monitoring: the coral stays on dots and rules, deepens on the labels */
.caps--ai .viz--aml .th { stroke: rgba(228,113,95,.6); }
.caps--ai .viz--aml .thl { fill: var(--paper-alert-ink); opacity: .75; }
.caps--ai .viz--aml .achip rect { fill: rgba(228,113,95,.1); stroke: var(--paper-alert); }
.caps--ai .viz--aml .achip text { fill: var(--paper-alert-ink); }
/* fraud: the signal field glows blue on paper, not white */
.caps--ai .viz--fraud .beam line { stroke: var(--blue); }
.caps--ai .viz--fraud .sd { fill: rgba(7,34,89,.22); animation-name: vzGlowPaper; }
@keyframes vzGlowPaper {
0%, 100% { fill: rgba(7,34,89,.22); }
3% { fill: #0D4FD3; }
16% { fill: rgba(13,79,211,.5); }
30% { fill: rgba(7,34,89,.22); }
}
/* case: three white stops, the moving card in blue */
.caps--ai .viz--case .gc { fill: var(--white); stroke: rgba(7,34,89,.2); }
.caps--ai .viz--case .mc { fill: rgba(13,79,211,.08); stroke: var(--blue); }
.caps--ai .viz--case .ml { stroke: rgba(7,34,89,.4); }
/* the decision lands in the confirm green the paper AI Reviewer uses */
.caps--ai .viz--case .mk { stroke: var(--paper-ok); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.caps--ai .cap h3 { margin-top: 24px; }
.caps--ai .cap p { max-width: 48ch; }
@media (max-width: 860px) {
.caps--ai { grid-template-columns: 1fr; }
.caps--ai .viz svg { height: 136px; }
}
/* --- the signal ring, re-inked for a light band --- */
.cyc-legend { display: flex; justify-content: center; gap: 34px; margin-bottom: 10px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.lg i { width: 26px; height: 4px; border-radius: 2px; }
.lg-ai i { background: var(--blue); }
.lg-team i { background: var(--dark); }
/* seven stages: each label is anchored on its own dot and pushed
outward, the way platform.html sets its ring */
.cyc-ring .cyc-lbl { width: 168px; }
/* the marker used to spin on a free 16s loop while the stages advanced
every 3.6s, so the two drifted apart. It now rides the head of the
drawn arc, which is the thing it is meant to be marking. */
.cyc-orbit { animation: none; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .cyc-orbit { transition: none; } }
.tint .cyc-dot.team { stroke: #8FA6D4; }
.tint .cyc-dot.team.is-on { fill: var(--dark); stroke: var(--dark); }
.tint .cyc-lbl.team[aria-selected="true"] .cyc-n { color: var(--dark); }
@media (max-width: 900px) {
.tint .cyc-list::before { background: linear-gradient(180deg, var(--blue), rgba(13,79,211,.12)); }
.tint .cyc-item::before { background: var(--white); border-color: var(--blue); }
.tint .cyc-item .cyc-n { color: var(--blue); }
.tint .cyc-item p { color: var(--sub); }
}
/* --- industries ledger, re-inked for paper --- */
.irows { border-top-color: var(--line); }
section:not(.night) .irow { border-bottom-color: var(--line); color: var(--ink); }
section:not(.night) .irow::before { background: linear-gradient(90deg, rgba(13,79,211,0),
rgba(13,79,211,.10) 18%, rgba(13,79,211,.03) 78%, rgba(13,79,211,0)); }
section:not(.night) .irow p { color: var(--sub); }
section:not(.night) .irow:hover p, section:not(.night) .irow:focus-visible p { color: var(--ink); }
section:not(.night) .irow-m { color: rgba(7,34,89,.45); }
section:not(.night) .irow:hover .irow-m { color: var(--blue); }
/* --- the automation ladder ---
Three cards side by side implied three equal choices. Read down the
page instead, the three levels behave like what they are: a scale,
from work a system can carry to work that has to reach a person.
The ownership chip on the right uses the same two-colour language as
the ring legend above — blue for AI, dark for your team. */
.ladder { list-style: none; margin: 52px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rung { position: relative; display: grid; align-items: center;
grid-template-columns: 78px minmax(0, 1fr) auto; gap: clamp(20px, 3.4vw, 48px);
padding: clamp(22px, 2.4vw, 30px) clamp(14px, 1.6vw, 22px);
border-bottom: 1px solid var(--line); }
.rung::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
background: linear-gradient(90deg, rgba(13,79,211,0), rgba(13,79,211,.09) 18%,
rgba(13,79,211,.02) 78%, rgba(13,79,211,0));
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 12.3px) 100%, 0 100%);
transition: opacity .3s ease; }
.rung:hover::before { opacity: 1; }
.rung > * { position: relative; }
.lvl { display: block; width: 78px; height: 34px; }
.lvl rect { fill: #D6DEEE; }
.lvl rect.on { fill: var(--blue); }
.rung h3 { font-size: 19px; letter-spacing: -.015em; color: var(--ink); }
.rung p { margin-top: 8px; font-size: 15px; line-height: 1.62; color: var(--sub); max-width: 56ch; }
.rung-own { justify-self: end; display: inline-flex; align-items: center; gap: 9px;
white-space: nowrap; padding: 9px 14px; font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line);
color: var(--blue); --edge: var(--line);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 7px) 100%, 0 100%); }
/* The corner cut removes the border along the diagonal; redraw it as a mitred
quad (same construction as .btn-outline-white::after in site.css). */
.rung-own::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
background: var(--edge);
clip-path: polygon(calc(100% - 0.342px) calc(100% - 9.753px), calc(100% - 2px) calc(100% - 9.376px),
calc(100% - 8.454px) calc(100% - 2px), calc(100% - 8.658px) calc(100% - 0.247px)); }
.rung-own i { width: 7px; height: 7px; flex: none; background: var(--blue); transform: rotate(45deg); }
.rung-own.team { color: var(--dark); border-color: rgba(7,34,89,.28); --edge: rgba(7,34,89,.28); }
.rung-own.team i { background: var(--dark); }
@media (max-width: 760px) {
.rung { grid-template-columns: 1fr; gap: 16px; }
.rung-own { justify-self: start; }
}
/* --- the question, reframed --- */
.notbut { max-width: 820px; margin: 72px auto 0; text-align: center; }
.nb { font-size: clamp(19px, 2.5vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.4; }
.nb-not { color: var(--sub); }
.nb-not q { text-decoration: line-through; text-decoration-color: rgba(85,86,90,.5);
text-decoration-thickness: 1.5px; }
.nb-but { margin-top: 22px; color: var(--ink); font-weight: 700; }
.nb-but q { color: var(--blue); }
.nb .k { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700;
letter-spacing: .24em; text-transform: uppercase; }
.nb-not .k { color: rgba(85,86,90,.7); }
.nb-but .k { color: var(--blue); }
q { quotes: "\201C" "\201D"; }
/* --- explainability: the record reads as an actual document --- */
.expl-copy .lede-l { font-size: 16.5px; line-height: 1.65; color: var(--sub); }
.expl-copy .pull { margin-top: 24px; font-size: 20px; font-weight: 500; letter-spacing: -.015em;
line-height: 1.5; color: var(--ink); }
.expl-copy .pull strong { color: var(--blue); font-weight: 700; }
/* --- many sources, one queue ---
The old funnel was a hollow shape floating between two columns that
never lined up with it. The three parts now share one stretched row:
four sources on the left, four beams that start exactly on those
four chips and converge on the right, and a queue panel built from
the AI Reviewer's own vocabulary so the two read as one product. */
.attn { margin-top: 56px; display: grid;
grid-template-columns: minmax(0, 1fr) clamp(84px, 9vw, 132px) minmax(0, 1.08fr);
gap: clamp(14px, 2vw, 26px); align-items: stretch; }
.attn-srcs { display: grid; gap: 10px; }
.attn-srcs span { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 18px;
font-size: 13.5px; font-weight: 500; background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85);
/* the polygon reaches 1px past the box: a clip edge sitting exactly on a
fractional right or bottom edge shaved the 1px border off with it */
clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 10.1px), calc(100% - 8.9px) calc(100% + 1px), -1px calc(100% + 1px)); }
.attn-srcs i { width: 7px; height: 7px; background: #7FA9F8; transform: rotate(45deg); flex: none; }
/* the beams stretch to whatever height the source stack settles at, so
the four inlets stay on the four chips at every width */
.attn-flow { position: relative; margin: 0 -10px; }
.attn-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.attn-flow path { fill: none; stroke: rgba(157,190,255,.42); stroke-width: 1.4;
vector-effect: non-scaling-stroke; }
.attn-flow .beam { stroke: #7FA9F8; stroke-width: 2; stroke-dasharray: 5 9;
animation: attnFlow 1.6s linear infinite; }
@keyframes attnFlow { to { stroke-dashoffset: -28; } }
.attn-q { position: relative; border: 1px solid rgba(157,190,255,.34); background: rgba(11,26,56,.5);
display: flex; flex-direction: column;
clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - 15.2px), calc(100% - 12.9px) calc(100% + 1px), -1px calc(100% + 1px)); }
/* the corner cut removes the border along the diagonal, so the outline was open at
the bottom right. Redrawn the way the skin does for buttons, chips and cards: an
exact quad in the border colour, two points 0.5px outside the cut (the element's
own clip trims them) and two 1px inside, mitred into the inner edges of the right
and bottom borders. Numbers follow each box's cut: 8.98 x 8.01 for a chip,
14.04 x 12.04 for the queue panel. */
.attn-srcs span::after, .attn-q::after { content: ""; position: absolute; inset: -1px; pointer-events: none; }
.attn-srcs span::after { background: rgba(255,255,255,.18);
clip-path: polygon(calc(100% - 1px) calc(100% - 9.360px), calc(100% - 1px) calc(100% - 7.106px),
calc(100% - 6.446px) calc(100% - 1px), calc(100% - 8.456px) calc(100% - 1px)); }
.attn-q::after { background: rgba(157,190,255,.34);
clip-path: polygon(calc(100% - 1px) calc(100% - 14.405px), calc(100% - 1px) calc(100% - 12.101px),
calc(100% - 10.525px) calc(100% - 1px), calc(100% - 12.502px) calc(100% - 1px)); }
.attn-q-bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px;
border-bottom: 1px solid rgba(127,169,248,.18); color: rgba(255,255,255,.85);
font-weight: 700; letter-spacing: .16em; font-size: 10.5px; text-transform: uppercase; }
.attn-q-bar .tag { margin-left: auto; color: #9DBEFF; }
.attn-q-list { list-style: none; margin: 0; padding: 6px 18px 4px; flex: 1; }
.attn-q-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px;
align-items: center; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.09); }
.attn-q-list li:first-child { border-top: 0; }
.attn-q-list .n { font-size: 11px; font-weight: 700; letter-spacing: .12em;
color: rgba(157,190,255,.6); font-variant-numeric: tabular-nums; }
.attn-q-list p { font-size: 14px; color: rgba(255,255,255,.86); }
.attn-q-list .why { font-size: 11px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; }
/* the confirm colour in this section is the brand taupe, not the AI Reviewer's
mint: solid #77614D on the rule and the dot, a light tint of it on the label
so the 11px caps stay readable on the night panel */
.attn-q-foot { display: flex; align-items: center; gap: 9px; margin: 0 18px 16px;
padding: 11px 14px; border: 1px solid #77614D; color: #A7988B;
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.attn-q-foot i { width: 7px; height: 7px; border-radius: 50%; background: #77614D; flex: none; }
.attn-cap { margin-top: 16px; text-align: center; font-size: 12.5px;
color: rgba(255,255,255,.5); }
/* --- results: five outcomes in one strip, each on its own column behind a thin
vertical rule. Five items never balance a two-column grid (an orphan row and one
wrapping item), so the strip reads as one line of equals. --- */
.results { margin: 60px auto 0; max-width: 1080px; display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr)); }
.res { display: flex; flex-direction: column; gap: 14px; padding: 6px 22px 6px;
border-left: 1px solid rgba(255,255,255,.16); }
.res:first-child { border-left: 0; padding-left: 0; }
.res:last-child { padding-right: 0; }
.res svg { width: 18px; height: 18px; flex: none; stroke: #B79C7F; stroke-width: 2.2;
fill: none; stroke-linecap: round; stroke-linejoin: round; }
.res p { font-size: 15px; line-height: 1.5; font-weight: 500; color: rgba(255,255,255,.9);
text-wrap: balance; }
@media (max-width: 1120px) {
/* laptop widths: the five columns tighten so the longest question stays at three lines */
.qledger { gap: 0 20px; }
.ql p { font-size: 15px; }
}
@media (max-width: 980px) {
.why-grid { grid-template-columns: 1fr; gap: 44px; }
.ql p { font-size: 16px; }
/* stacked: the band goes back to one question per row */
.qledger { grid-template-columns: 1fr; gap: 0; margin-top: 52px; border-top: 1px solid var(--line); }
.qledger-k { padding: 24px 0 4px; }
.ql { padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.attn { grid-template-columns: 1fr; }
.attn-flow { display: none; }
}
@media (max-width: 760px) {
/* the phone crop is composed for a tall box, and a left-weighted
scrim has no room to work, so it turns vertical */
.hero--sub .hero-in { padding-bottom: 64px; }
.hero--sub .hero-media img { object-position: 50% 50%; }
/* the chips' separator rule now lives in css/site.css: about and platform wrapped
with the same dangling diamonds */
}
@media (max-width: 640px) {
.cyc-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tb-prep { transition: none; }
.timebars:not(.on) .tb-prep { width: var(--w); }
.attn-flow .beam { animation: none; }
}
/* =========================================================
Mobile pass (2026-09-07): fixes found checking ai.html at 320-390px.
========================================================= */
/* --- time bars: the labels sat inside the bars with nowrap and overflow
hidden, so a phone showed "AI prepa" in the 24% bar and "Judgemen" in the
28% bar. Under 600px each segment is drawn by its ::before and the label
moves under the bar. The segments carry no padding, so the two halves meet
and the blue reaches the right edge as one bar; the ::before is border-box
so the grey half (which has a 1px rule) is the same 36px as the blue and the
two labels share a baseline. Labels do not wrap: the left one starts under
the left segment and may run past a narrow one ("AI prepares" at 24%), the
right one is right-aligned under the right end. The width animation is
untouched. --- */
@media (max-width: 600px) {
.timebars { padding: 24px 18px 20px; }
.tb-track { height: auto; overflow: visible; align-items: flex-start; }
.tb-track i { display: block; padding: 0; background: none; border: 0;
white-space: nowrap; overflow: visible; font-size: 11px; line-height: 1.3; }
.tb-track i::before { content: ""; display: block; box-sizing: border-box; height: 36px; margin-bottom: 8px; }
.tb-track .tb-prep { color: #3E4C6E; }
.tb-track .tb-prep::before { background: #E9EDF6; border: 1px solid #D6DEEE; border-right: 0; }
.tb-track .tb-judge { color: var(--ink); text-align: right; }
.tb-track .tb-judge::before { background: var(--blue); }
.tb--ai .tb-track .tb-prep { color: var(--blue); background: none; border: 0; }
.tb--ai .tb-track .tb-prep::before { background: rgba(13,79,211,.1); border-color: rgba(13,79,211,.25); }
}
/* --- results: the five-across strip stacks into rows (check left, text right)
once the columns fall under ~180px. --- */
@media (max-width: 900px) {
.results { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-top: 48px; }
.res { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 0;
border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
.res:first-child { border-top: 0; }
.res svg { margin-top: 2px; }
.res p { text-wrap: pretty; }
}
/* --- 320px: the AI Reviewer bar broke "AI / REVIEWER" and "CASE CS- / 4471" mid-label, the
status pill went to two lines, and the review-queue title column shrank to 97px behind a
nowrap tag. Labels stay whole, the tag drops under the title. --- */
.rvw-bar .tag { white-space: nowrap; }
@media (max-width: 360px) {
.rvw-bar { flex-wrap: wrap; row-gap: 6px; padding: 12px 16px; letter-spacing: .04em; }
.rvw-bar .tag { letter-spacing: .08em; }
.rvw-foot { letter-spacing: .08em; padding: 10px 8px; }
}
@media (max-width: 400px) {
.attn-q-list li { grid-template-columns: 22px 1fr; row-gap: 4px; }
.attn-q-list .why { grid-column: 2; justify-self: start; }
}