so the row/column relationships survive for
screen readers. Every ✓ / – carries an sr-only "Yes"/"No"
so the meaning is never conveyed by the glyph alone.
Scrolls horizontally on narrow screens with the feature
column pinned to the left edge.
------------------------------------------------------------ */
.cmp-wrap{ position:relative; }
/* contain:paint is load-bearing, not a micro-optimisation. Without it the
table's width leaks past this scroll container and inflates the whole
document's scrollWidth (794px inside a 700px viewport when measured) —
which only body{overflow-x:hidden} was masking. Containing it here means
the sideways scroll genuinely stays inside the table (WCAG 1.4.10). */
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; contain:paint; max-width:100%; }
/* compare-table.js makes this a focusable region ONLY while it actually
overflows — a scrollable box that keyboard users can't reach fails
WCAG 2.1.1, but a permanent tabindex would leave a dead tab stop on
desktop where nothing scrolls. */
.cmp-scroll:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
/* min-width in rem, not px, so the table scales with the user's text size
instead of staying fixed at 200% zoom (WCAG 1.4.4). */
.cmp{ width:100%; min-width:52rem; border-collapse:separate; border-spacing:0;
font-size:.92rem; background:#fff; }
/* Decorative fade marking "there is more to the right". Purely visual —
the real affordance is the .cmp-swipe text below the table. */
.cmp-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:3rem;
pointer-events:none; opacity:0; transition:opacity .2s var(--ease);
background:linear-gradient(to right, rgba(255,255,255,0), #fff); }
.cmp-wrap.is-overflowing:not(.is-end)::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .cmp-wrap::after{ transition:none; } }
/* ---- head: logo, name, vendor ---- */
.cmp thead th{ vertical-align:top; padding:1.4rem 1rem 1.3rem; text-align:center;
background:#fff; border-bottom:2px solid var(--navy); }
/* The empty top-left cell pins like the feature column below it, so the
logos slide *under* it instead of drifting across it when scrolled.
Opaque background and a z-index above the unpositioned header cells are
both required for that — a sticky cell alone would still be see-through. */
.cmp thead th.cmp__corner{ border-bottom:2px solid var(--line);
position:sticky; left:0; z-index:3; background:#fff; }
.cmp__logo{ height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; }
.cmp__logo img{ max-height:100%; width:auto; }
.cmp__tool{ display:block; font-size:1.05rem; font-weight:700; color:var(--navy); line-height:1.2; }
.cmp__by{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--gray-md); margin-top:.2rem; }
.cmp__cta{ display:inline-flex; align-items:center; gap:.3rem;
font-size:.85rem; font-weight:700; color:var(--orange-dk); }
.cmp__cta:hover{ text-decoration:underline; }
/* ---- foot: the "get started" row, closing each column ----
Each CTA is its own cell, boxed like the data cells above it. The first
cell is a pure spacer holding the columns in line — it carries no rule
and no label, so the row reads as four buttons, not a labelled row. */
.cmp tfoot td{ text-align:center; padding:0; background:#fff;
border-top:2px solid var(--navy); border-left:1px solid var(--line-soft); }
/* The whole cell is the target, not just the words. The padding lives on the
link so the link *is* the cell — one tab stop, one hit area, real link
semantics. Wrapping the in an anchor is invalid HTML, and a JS click
handler on the cell would be invisible to keyboards and screen readers. */
.cmp tfoot .cmp__cta{ display:flex; align-items:center; justify-content:center;
width:100%; height:100%; padding:1.3rem 1rem 1.5rem;
transition:background-color .15s var(--ease); }
.cmp tfoot .cmp__cta:hover{ background:rgba(247,105,0,.09); text-decoration:underline; }
.cmp tfoot .cmp__cta:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; }
@media (prefers-reduced-motion: reduce){ .cmp tfoot .cmp__cta{ transition:none; } }
/* White, not transparent: this cell is pinned, so a transparent fill would
let the CTA cells scrolling beneath it show straight through. On a white
section #fff reads as empty while still hiding what passes underneath. */
.cmp tfoot td.cmp__spacer{ border:0; background:#fff;
position:sticky; left:0; z-index:2; }
/* ---- group headings ----
The cell spans all five columns, so it is as wide as the whole table and
its text would scroll away to the left with the data cells. Pinning the
cell itself is wrong (the banded background would slide off the right
edge), so the *label inside it* is what sticks — the band stays put and
the words stay beside the pinned feature column. */
.cmp__group th{ text-align:left; padding:1.1rem 1rem .5rem; font-size:.7rem; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
background:var(--wash); border-top:1px solid var(--line); }
.cmp__group th span{ position:sticky; left:1rem; display:inline-block; }
/* ---- body ---- */
.cmp tbody th[scope="row"]{ text-align:left; font-weight:600; color:var(--navy);
padding:.8rem 1rem; background:#fff; border-bottom:1px solid var(--line-soft);
position:sticky; left:0; z-index:1; min-width:16rem; }
.cmp tbody td{ text-align:center; padding:.8rem 1rem; border-bottom:1px solid var(--line-soft);
border-left:1px solid var(--line-soft); color:var(--gray-dk); }
.cmp tbody tr:hover td{ background:rgba(247,105,0,.05); }
/* The pinned column must stay OPAQUE. Handing it the same translucent tint
as the data cells replaces its solid #fff, and the cells scrolling beneath
it then show straight through — the column reads as transparent on hover.
#FFF8F2 is that 5% orange already flattened onto white, so it matches the
data cells exactly while still hiding what passes underneath. */
.cmp tbody tr:hover th[scope="row"]{ background:#FFF8F2; }
.cmp__note{ display:block; font-weight:400; font-size:.8rem; color:var(--gray-md); margin-top:.1rem; }
/* ---- yes / no / value marks ----
The mark differs by SHAPE (✓ vs –), not colour alone, so it survives
WCAG 1.4.1. --gray-lt (#D6D9DC) is a *hairline* token — ~1.4:1 on white —
and must never back text; the "no" dash uses --gray-md (~4.6:1) instead. */
.mark{ display:inline-block; line-height:1; }
.mark--yes{ color:var(--orange-dk); font-size:1.15rem; font-weight:700; }
.mark--no{ color:var(--gray-md); font-size:1.15rem; font-weight:700; }
.mark--txt{ font-size:.85rem; font-weight:600; color:var(--navy); }
.mark--part{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--gray-md); }
/* "Scroll sideways" cue — unhidden by compare-table.js only when the table
really overflows. Persistent text, never hover-only. */
.cmp-swipe{ margin-top:.7rem; font-size:.85rem; font-weight:600; color:var(--navy);
display:flex; align-items:center; gap:.4rem; }
.cmp-swipe[hidden]{ display:none; }
/* ---- footnotes ----
Each marker is an in-page link down to its note. The numbering matches
the superscripts, so the reference, the href (#cmp-fnN) and the note all stay
in step — renumber all three together if a note is added or removed. */
/* .66rem, not .72em: the note list sets a smaller font-size than the table, so
a relative size would render the two markers at visibly different sizes. This
is the same computed value the table markers already had (.72 x .92rem). */
.fn-ref{ font-size:.66rem; font-weight:700; color:var(--orange-dk);
margin-left:.12em; vertical-align:super; line-height:0; }
/* Padding widens the tap/click target without disturbing the baseline, since
the sup is already out of flow vertically. */
.fn-ref a{ color:inherit; text-decoration:underline; text-underline-offset:.14em;
padding:.15em .12em; }
.fn-ref a:hover,
.fn-ref a:focus-visible{ color:var(--orange); }
/* The note numbers are drawn with a counter rather than the default list
marker: ::marker takes colour and weight but ignores vertical-align, so it
can't be raised into a superscript. A counter in ::before is a normal inline
box, so it can carry the exact .fn-ref treatment and the two markers match.
The keeps its semantics — only the painted marker is replaced. */
.cmp-fn{ margin-top:1.1rem; padding-left:1.3rem; font-size:.82rem; color:var(--gray-dk);
max-width:72ch; list-style:none; counter-reset:fn; }
.cmp-fn li{ margin-bottom:.25rem; counter-increment:fn; position:relative; }
/* Absolute so the raised, tiny number can't drag the note's first line up with
it, and so wrapped lines stay flush under the text rather than under the
number. top is the superscript lift .fn-ref gets from vertical-align. */
.cmp-fn li::before{ content:counter(fn); position:absolute; left:-1.3rem; top:-.15em;
width:1.1rem; text-align:right;
font-size:.66rem; font-weight:700; color:var(--orange-dk); }
/* :target so a reader who follows a marker can see which note they landed on. */
.cmp-fn li:target{ color:var(--ink); font-weight:600; }
.cmp-hint{ margin-top:.9rem; font-size:.85rem; color:var(--gray-md); }
@media (max-width:900px){
.cmp tbody th[scope="row"]{ min-width:13rem; box-shadow:1px 0 0 var(--line); }
}
/* Phone: tighten spacing and shrink the pinned label column so TWO tool
columns fit beside it — at 10.5rem the label alone ate half a 375px
screen and you could only ever see one tool, which defeats the point of
a comparison. Nothing is hidden: the sub-notes stay, because dropping
content on small screens is content loss, not reflow. */
@media (max-width:640px){
/* table-layout:fixed is the whole fix. With auto layout the column widths are
content-driven — they depend on the logo SVGs' intrinsic aspect ratios
(claude.svg is 4.66:1, so at 32px tall it wants 149px) and on ShermanSans'
metrics. Shrinking a desktop window happened to land at 561px and fit; a
real phone resolves those differently, the table grows past the container,
and mobile Safari shrink-to-fits the ENTIRE page to the widest thing on it —
which is why the header only spanned two-thirds of the screenshot.
Fixed layout + explicit widths makes the width arithmetic, not a
measurement: 7.25 + (4 x 7) = 35.25rem, exactly the min-width below. */
.cmp{ min-width:35.25rem; font-size:.85rem; table-layout:fixed; }
.cmp col.cmp__c-label{ width:7.25rem; }
.cmp col.cmp__c-tool{ width:7rem; }
.cmp thead th{ padding:1rem .45rem .9rem; overflow-wrap:break-word; }
/* A wordmark must never be able to open its column. object-fit keeps the
aspect ratio while max-width caps it at its column's share. */
.cmp__logo{ height:32px; margin-bottom:.5rem; max-width:100%; overflow:hidden; }
.cmp__logo img{ max-width:100%; max-height:100%; width:auto; height:auto;
object-fit:contain; }
.cmp__tool{ font-size:.88rem; }
.cmp__by{ font-size:.62rem; }
.cmp__cta{ font-size:.76rem; }
.cmp tfoot .cmp__cta{ padding:1rem .45rem 1.1rem; }
/* min-width:0 so the width above is the single source of truth — a
leftover min-width here would fight it and re-open the column. */
.cmp tbody th[scope="row"]{ min-width:0; padding:.7rem .45rem;
overflow-wrap:break-word; hyphens:auto; }
.cmp tbody td{ padding:.7rem .35rem; overflow-wrap:break-word; }
.cmp__note{ font-size:.72rem; }
.cmp__group th{ padding:.9rem .5rem .45rem; }
/* One swipe = one tool. Snapping stops the scroll from parking a column
half-off the edge, and scroll-padding offsets the snap by the pinned
label column's width so a tool never lands underneath it. */
.cmp-scroll{ scroll-snap-type:x proximity; scroll-padding-left:7.25rem; }
.cmp thead th:not(.cmp__corner){ scroll-snap-align:start; }
}
/* Sub-360 (iPhone SE 1st gen, Android compacts): at the 7.25/7rem sizing above
only one and a half tools fit beside the label, so shave both. Still rem, so
the whole grid scales with the user's text size at 200% zoom (WCAG 1.4.4).
6.25 + (4 x 5.75) = 29.25rem, so the min-width stays exact arithmetic. */
@media (max-width:360px){
.cmp{ min-width:29.25rem; }
.cmp col.cmp__c-label{ width:6.25rem; }
.cmp col.cmp__c-tool{ width:5.75rem; }
.cmp-scroll{ scroll-padding-left:6.25rem; }
}
@media (prefers-reduced-motion: reduce){ .cmp-scroll{ scroll-behavior:auto; } }
/* stat row */
.stats{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ text-align:center; padding:1rem .5rem; }
/* block, or the label's margin-top collapses and the two run together on one line */
.stat__num,.stat__label{ display:block; }
.stat__num{ font-family:var(--sans); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); color:var(--orange); line-height:1; }
.section--navy .stat__num{ color:var(--orange-lt); }
.stat__label{ margin-top:.5rem; font-size:.9rem; color:var(--gray-dk); }
.section--navy .stat__label{ color:rgba(255,255,255,.82); }
/* footnote marker on a navy band: orange-dk is too dark to read there */
.section--navy .fn-ref{ color:var(--orange-lt); }
.section--navy .fn-ref a:hover,
.section--navy .fn-ref a:focus-visible{ color:#fff; }
/* the footnote list (.cmp-fn) used for page-level sources, below the closing CTA band */
.page-notes{ margin-top:2rem; }
/* orange-dk is only 2.6:1 against the #333 note text, so colour alone can't mark the link */
.page-notes a{ text-decoration:underline; text-underline-offset:.14em; }
/* in-page anchor targets clear the sticky header when jumped to.
.cmp-fn li[id] is in here because the footnote markers in the compare table
link down to it — without this the note lands underneath the sticky bar. */
section[id], .cmp-fn li[id]{ scroll-margin-top:calc(var(--header-h) + var(--subnav-h) + 14px); }
/* ------------------------------------------------------------
TOOL COMPARISON TABLE (ai-tools.html)
A real so the row/column relationships survive for
screen readers. Every ✓ / – carries an sr-only "Yes"/"No"
so the meaning is never conveyed by the glyph alone.
Scrolls horizontally on narrow screens with the feature
column pinned to the left edge.
------------------------------------------------------------ */
.cmp-wrap{ position:relative; }
/* contain:paint is load-bearing, not a micro-optimisation. Without it the
table's width leaks past this scroll container and inflates the whole
document's scrollWidth (794px inside a 700px viewport when measured) —
which only body{overflow-x:hidden} was masking. Containing it here means
the sideways scroll genuinely stays inside the table (WCAG 1.4.10). */
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; contain:paint; max-width:100%; }
/* compare-table.js makes this a focusable region ONLY while it actually
overflows — a scrollable box that keyboard users can't reach fails
WCAG 2.1.1, but a permanent tabindex would leave a dead tab stop on
desktop where nothing scrolls. */
.cmp-scroll:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
/* min-width in rem, not px, so the table scales with the user's text size
instead of staying fixed at 200% zoom (WCAG 1.4.4). */
.cmp{ width:100%; min-width:52rem; border-collapse:separate; border-spacing:0;
font-size:.92rem; background:#fff; }
/* Decorative fade marking "there is more to the right". Purely visual —
the real affordance is the .cmp-swipe text below the table. */
.cmp-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:3rem;
pointer-events:none; opacity:0; transition:opacity .2s var(--ease);
background:linear-gradient(to right, rgba(255,255,255,0), #fff); }
.cmp-wrap.is-overflowing:not(.is-end)::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .cmp-wrap::after{ transition:none; } }
/* ---- head: logo, name, vendor ---- */
.cmp thead th{ vertical-align:top; padding:1.4rem 1rem 1.3rem; text-align:center;
background:#fff; border-bottom:2px solid var(--navy); }
/* The empty top-left cell pins like the feature column below it, so the
logos slide *under* it instead of drifting across it when scrolled.
Opaque background and a z-index above the unpositioned header cells are
both required for that — a sticky cell alone would still be see-through. */
.cmp thead th.cmp__corner{ border-bottom:2px solid var(--line);
position:sticky; left:0; z-index:3; background:#fff; }
.cmp__logo{ height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; }
.cmp__logo img{ max-height:100%; width:auto; }
.cmp__tool{ display:block; font-size:1.05rem; font-weight:700; color:var(--navy); line-height:1.2; }
.cmp__by{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--gray-md); margin-top:.2rem; }
.cmp__cta{ display:inline-flex; align-items:center; gap:.3rem;
font-size:.85rem; font-weight:700; color:var(--orange-dk); }
.cmp__cta:hover{ text-decoration:underline; }
/* ---- foot: the "get started" row, closing each column ----
Each CTA is its own cell, boxed like the data cells above it. The first
cell is a pure spacer holding the columns in line — it carries no rule
and no label, so the row reads as four buttons, not a labelled row. */
.cmp tfoot td{ text-align:center; padding:0; background:#fff;
border-top:2px solid var(--navy); border-left:1px solid var(--line-soft); }
/* The whole cell is the target, not just the words. The padding lives on the
link so the link *is* the cell — one tab stop, one hit area, real link
semantics. Wrapping the in an anchor is invalid HTML, and a JS click
handler on the cell would be invisible to keyboards and screen readers. */
.cmp tfoot .cmp__cta{ display:flex; align-items:center; justify-content:center;
width:100%; height:100%; padding:1.3rem 1rem 1.5rem;
transition:background-color .15s var(--ease); }
.cmp tfoot .cmp__cta:hover{ background:rgba(247,105,0,.09); text-decoration:underline; }
.cmp tfoot .cmp__cta:focus-visible{ outline:3px solid var(--orange); outline-offset:-3px; }
@media (prefers-reduced-motion: reduce){ .cmp tfoot .cmp__cta{ transition:none; } }
/* White, not transparent: this cell is pinned, so a transparent fill would
let the CTA cells scrolling beneath it show straight through. On a white
section #fff reads as empty while still hiding what passes underneath. */
.cmp tfoot td.cmp__spacer{ border:0; background:#fff;
position:sticky; left:0; z-index:2; }
/* ---- group headings ----
The cell spans all five columns, so it is as wide as the whole table and
its text would scroll away to the left with the data cells. Pinning the
cell itself is wrong (the banded background would slide off the right
edge), so the *label inside it* is what sticks — the band stays put and
the words stay beside the pinned feature column. */
.cmp__group th{ text-align:left; padding:1.1rem 1rem .5rem; font-size:.7rem; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
background:var(--wash); border-top:1px solid var(--line); }
.cmp__group th span{ position:sticky; left:1rem; display:inline-block; }
/* ---- body ---- */
.cmp tbody th[scope="row"]{ text-align:left; font-weight:600; color:var(--navy);
padding:.8rem 1rem; background:#fff; border-bottom:1px solid var(--line-soft);
position:sticky; left:0; z-index:1; min-width:16rem; }
.cmp tbody td{ text-align:center; padding:.8rem 1rem; border-bottom:1px solid var(--line-soft);
border-left:1px solid var(--line-soft); color:var(--gray-dk); }
.cmp tbody tr:hover td{ background:rgba(247,105,0,.05); }
/* The pinned column must stay OPAQUE. Handing it the same translucent tint
as the data cells replaces its solid #fff, and the cells scrolling beneath
it then show straight through — the column reads as transparent on hover.
#FFF8F2 is that 5% orange already flattened onto white, so it matches the
data cells exactly while still hiding what passes underneath. */
.cmp tbody tr:hover th[scope="row"]{ background:#FFF8F2; }
.cmp__note{ display:block; font-weight:400; font-size:.8rem; color:var(--gray-md); margin-top:.1rem; }
/* ---- yes / no / value marks ----
The mark differs by SHAPE (✓ vs –), not colour alone, so it survives
WCAG 1.4.1. --gray-lt (#D6D9DC) is a *hairline* token — ~1.4:1 on white —
and must never back text; the "no" dash uses --gray-md (~4.6:1) instead. */
.mark{ display:inline-block; line-height:1; }
.mark--yes{ color:var(--orange-dk); font-size:1.15rem; font-weight:700; }
.mark--no{ color:var(--gray-md); font-size:1.15rem; font-weight:700; }
.mark--txt{ font-size:.85rem; font-weight:600; color:var(--navy); }
.mark--part{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--gray-md); }
/* "Scroll sideways" cue — unhidden by compare-table.js only when the table
really overflows. Persistent text, never hover-only. */
.cmp-swipe{ margin-top:.7rem; font-size:.85rem; font-weight:600; color:var(--navy);
display:flex; align-items:center; gap:.4rem; }
.cmp-swipe[hidden]{ display:none; }
/* ---- footnotes ----
Each marker is an in-page link down to its note. The numbering matches
the superscripts, so the reference, the href (#cmp-fnN) and the note all stay
in step — renumber all three together if a note is added or removed. */
/* .66rem, not .72em: the note list sets a smaller font-size than the table, so
a relative size would render the two markers at visibly different sizes. This
is the same computed value the table markers already had (.72 x .92rem). */
.fn-ref{ font-size:.66rem; font-weight:700; color:var(--orange-dk);
margin-left:.12em; vertical-align:super; line-height:0; }
/* Padding widens the tap/click target without disturbing the baseline, since
the sup is already out of flow vertically. */
.fn-ref a{ color:inherit; text-decoration:underline; text-underline-offset:.14em;
padding:.15em .12em; }
.fn-ref a:hover,
.fn-ref a:focus-visible{ color:var(--orange); }
/* The note numbers are drawn with a counter rather than the default list
marker: ::marker takes colour and weight but ignores vertical-align, so it
can't be raised into a superscript. A counter in ::before is a normal inline
box, so it can carry the exact .fn-ref treatment and the two markers match.
The keeps its semantics — only the painted marker is replaced. */
.cmp-fn{ margin-top:1.1rem; padding-left:1.3rem; font-size:.82rem; color:var(--gray-dk);
max-width:72ch; list-style:none; counter-reset:fn; }
.cmp-fn li{ margin-bottom:.25rem; counter-increment:fn; position:relative; }
/* Absolute so the raised, tiny number can't drag the note's first line up with
it, and so wrapped lines stay flush under the text rather than under the
number. top is the superscript lift .fn-ref gets from vertical-align. */
.cmp-fn li::before{ content:counter(fn); position:absolute; left:-1.3rem; top:-.15em;
width:1.1rem; text-align:right;
font-size:.66rem; font-weight:700; color:var(--orange-dk); }
/* :target so a reader who follows a marker can see which note they landed on. */
.cmp-fn li:target{ color:var(--ink); font-weight:600; }
.cmp-hint{ margin-top:.9rem; font-size:.85rem; color:var(--gray-md); }
@media (max-width:900px){
.cmp tbody th[scope="row"]{ min-width:13rem; box-shadow:1px 0 0 var(--line); }
}
/* Phone: tighten spacing and shrink the pinned label column so TWO tool
columns fit beside it — at 10.5rem the label alone ate half a 375px
screen and you could only ever see one tool, which defeats the point of
a comparison. Nothing is hidden: the sub-notes stay, because dropping
content on small screens is content loss, not reflow. */
@media (max-width:640px){
/* table-layout:fixed is the whole fix. With auto layout the column widths are
content-driven — they depend on the logo SVGs' intrinsic aspect ratios
(claude.svg is 4.66:1, so at 32px tall it wants 149px) and on ShermanSans'
metrics. Shrinking a desktop window happened to land at 561px and fit; a
real phone resolves those differently, the table grows past the container,
and mobile Safari shrink-to-fits the ENTIRE page to the widest thing on it —
which is why the header only spanned two-thirds of the screenshot.
Fixed layout + explicit widths makes the width arithmetic, not a
measurement: 7.25 + (4 x 7) = 35.25rem, exactly the min-width below. */
.cmp{ min-width:35.25rem; font-size:.85rem; table-layout:fixed; }
.cmp col.cmp__c-label{ width:7.25rem; }
.cmp col.cmp__c-tool{ width:7rem; }
.cmp thead th{ padding:1rem .45rem .9rem; overflow-wrap:break-word; }
/* A wordmark must never be able to open its column. object-fit keeps the
aspect ratio while max-width caps it at its column's share. */
.cmp__logo{ height:32px; margin-bottom:.5rem; max-width:100%; overflow:hidden; }
.cmp__logo img{ max-width:100%; max-height:100%; width:auto; height:auto;
object-fit:contain; }
.cmp__tool{ font-size:.88rem; }
.cmp__by{ font-size:.62rem; }
.cmp__cta{ font-size:.76rem; }
.cmp tfoot .cmp__cta{ padding:1rem .45rem 1.1rem; }
/* min-width:0 so the width above is the single source of truth — a
leftover min-width here would fight it and re-open the column. */
.cmp tbody th[scope="row"]{ min-width:0; padding:.7rem .45rem;
overflow-wrap:break-word; hyphens:auto; }
.cmp tbody td{ padding:.7rem .35rem; overflow-wrap:break-word; }
.cmp__note{ font-size:.72rem; }
.cmp__group th{ padding:.9rem .5rem .45rem; }
/* One swipe = one tool. Snapping stops the scroll from parking a column
half-off the edge, and scroll-padding offsets the snap by the pinned
label column's width so a tool never lands underneath it. */
.cmp-scroll{ scroll-snap-type:x proximity; scroll-padding-left:7.25rem; }
.cmp thead th:not(.cmp__corner){ scroll-snap-align:start; }
}
/* Sub-360 (iPhone SE 1st gen, Android compacts): at the 7.25/7rem sizing above
only one and a half tools fit beside the label, so shave both. Still rem, so
the whole grid scales with the user's text size at 200% zoom (WCAG 1.4.4).
6.25 + (4 x 5.75) = 29.25rem, so the min-width stays exact arithmetic. */
@media (max-width:360px){
.cmp{ min-width:29.25rem; }
.cmp col.cmp__c-label{ width:6.25rem; }
.cmp col.cmp__c-tool{ width:5.75rem; }
.cmp-scroll{ scroll-padding-left:6.25rem; }
}
@media (prefers-reduced-motion: reduce){ .cmp-scroll{ scroll-behavior:auto; } }
/* Shorter copy needs less room above and below it. Vertical padding only,
~10% off, so the band keeps its horizontal rhythm with every other one.
A modifier rather than a change to .cta-band itself: the base band is
shared by claude, clementine and resources, whose copy is still long. */
.cta-band--tight{ padding-top:clamp(1.8rem,4.5vw,2.9rem); padding-bottom:clamp(1.8rem,4.5vw,2.9rem); }
/* team wall */
/* flex (not grid) so an incomplete last row centers instead of left-aligning */
.team-wall{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.team-wall li{ flex:0 0 calc((100% - 5rem) / 6); display:flex; flex-direction:column; align-items:center;
gap:.5rem; text-align:center; }
@media (max-width:760px){ .team-wall li{ flex-basis:calc((100% - 3rem) / 4); } }
@media (max-width:460px){ .team-wall li{ flex-basis:calc((100% - 2rem) / 3); } }
.team-wall__avatar{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:0; background:var(--wash); display:block; }
.team-wall__shadow{ width:100%; aspect-ratio:1; border-radius:0; overflow:hidden; background:var(--wash);
display:flex; align-items:flex-end; justify-content:center; }
.team-wall__shadow svg{ width:78%; height:auto; color:var(--gray-lt); }
/* the name comes first in the markup so screen readers say "Name, Role";
order:1 keeps it drawn below the photo */
.team-wall__name{ order:1; font-size:.82rem; font-weight:700; color:var(--navy); line-height:1.2; }
.team-wall__name--open{ color:var(--gray-md); font-weight:600; }
/* student tag — overlaid on the lower-left of the photo/silhouette */
.team-wall__pic{ position:relative; display:block; width:100%; }
.team-wall__badge{ position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.28rem;
background:var(--orange); color:var(--navy); font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
padding:.22rem .5rem; border-radius:9999px; }
.team-wall__badge svg{ width:11px; height:11px; }
/* role/title tag — full-width navy bar across the bottom edge of the headshot,
so long titles wrap wide-and-short instead of stacking over the face.
Always visible: it used to be opacity:0 until li:hover, which gave keyboard-only
users no way to reach it (WCAG 2.1.1 Keyboard, 1.4.13 Content on Hover or Focus).
Nothing inside the li is focusable, so the old :focus-within rule never fired and
adding tabindex would have injected 15 dead tab stops — persistent is the fix.
Solid navy (not an alpha tint) so contrast doesn't depend on the photo underneath. */
.team-wall__role{ position:absolute; left:0; right:0; bottom:0;
background:var(--navy); color:#fff; font-size:.58rem; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; text-align:center; line-height:1.3; padding:.4rem .5rem;
border-radius:0; }
.wall-note{ font-size:.78rem; color:var(--gray-dk); margin-top:1rem; }
/* CTA band */
.cta-band{ background:var(--orange); color:var(--navy); border-radius:var(--radius); padding:clamp(2rem,5vw,3.2rem);
display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; justify-content:space-between; }
.cta-band h2{ color:var(--navy); font-family:var(--sans); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); max-width:22ch; }
.cta-band p{ color:var(--navy); margin-top:.5rem; max-width:44ch; }
/* the default orange focus ring vanishes on the orange band (1:1); navy is 5.9:1 on it */
.cta-band :focus-visible{ outline-color:var(--navy); }
/* Shorter copy needs less room above and below it. Vertical padding only,
~10% off, so the band keeps its horizontal rhythm with every other one.
A modifier rather than a change to .cta-band itself: the base band is
shared by claude, agentic-os and resources, whose copy is still long. */
.cta-band--tight{ padding-top:clamp(1.8rem,4.5vw,2.9rem); padding-bottom:clamp(1.8rem,4.5vw,2.9rem); }
/* ============================================================
ARTICLE (story pages)
============================================================ */
.article{ padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.5rem); }
.article__wrap{ max-width:720px; margin-inline:auto; }
.article__dek{ font-family:var(--sans); font-size:1.15rem; line-height:1.55; color:var(--gray-dk);
border-left:3px solid var(--orange); padding-left:1rem; margin:0 0 1.8rem; }
.article__meta{ font-size:.82rem; color:var(--gray-dk); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:.6rem; }
.article__body > p{ font-size:1.08rem; line-height:1.75; margin-bottom:1.25rem; }
.article__body h2{ font-size:1.5rem; margin:2.2rem 0 .9rem; }
.article__body h3{ font-size:1.2rem; margin:1.8rem 0 .7rem; }
.article__body ul,.article__body ol{ margin:0 0 1.25rem 1.3rem; }
.article__body li{ margin-bottom:.5rem; font-size:1.05rem; line-height:1.7; }
.article__body blockquote{ margin:1.8rem 0; padding:1.2rem 1.5rem; background:var(--wash);
border-left:4px solid var(--orange); border-radius:0; }
/* blockquote is the ONLY place SUDS uses the serif (ShermanSerif Book) */
.article__body blockquote p{ font-family:var(--serif); font-weight:400; font-size:1.2rem; line-height:1.55; color:var(--navy); margin-bottom:.6rem; }
.article__body blockquote cite{ font-style:normal; font-size:.9rem; font-weight:700; color:var(--gray-dk); }
.article__body figure{ margin:1.6rem 0; }
.article__body figcaption{ font-size:.85rem; color:var(--gray-dk); margin-top:.5rem; }
.article__hero-img{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--radius); margin-bottom:1.8rem; }
/* logo hero (3rd-party logo instead of a photo): contain on white, don't crop */
.article__hero-img--logo{ object-fit:contain; background:#fff; border:1px solid var(--line);
padding:clamp(1.5rem,6vw,3.5rem) clamp(2rem,12vw,7rem); }
.article__foot{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.pill-links{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill-links a{ font-size:.85rem; font-weight:700; border:1px solid var(--line); border-radius:9999px;
padding:.5rem 1rem; color:var(--navy); }
.pill-links a:hover{ background:var(--wash); text-decoration:none; color:var(--orange-dk); }
/* support.html F.A.Q. block: search form, topic pills, browse-all button.
The input borrows .video-search's look from the Tutorials gallery below it. */
.faq-search{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; margin-bottom:1.8rem; }
.faq-search .video-search{ max-width:480px; }
.faq-topics__title{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--gray-dk); margin-bottom:.8rem; }
.faq-all{ margin-top:1.8rem; }
/* resource list rows */
.reslist{ list-style:none; display:grid; gap:.7rem; }
.reslist a{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
background:#fff; border:1px solid var(--line); border-radius:0; padding:1.1rem 1.4rem; transition:.18s var(--ease); }
.reslist a:hover{ border-color:var(--orange); box-shadow:var(--shadow-sm); text-decoration:none; }
.reslist b{ color:var(--navy); font-size:1.05rem; }
.reslist .meta{ color:var(--gray-dk); font-size:.85rem; font-weight:600; }
.reslist .go{ color:var(--orange-dk); font-weight:700; font-size:.85rem; }
/* FAQ */
.faq{ display:grid; gap:.7rem; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:0; padding:0 1.3rem; }
.faq summary{ cursor:pointer; list-style:none; padding:1.1rem 0; font-weight:700; color:var(--navy); font-size:1.05rem;
display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--orange); font-size:1.5rem; line-height:1; font-weight:400; }
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ border-bottom:1px solid var(--line-soft); }
.faq__a{ padding:1rem 0 1.3rem; color:var(--gray-dk); }
.faq__a p{ margin-bottom:.8rem; } .faq__a p:last-child{ margin-bottom:0; }
/* prose helper for simple pages */
.prose{ max-width:720px; }
.prose p{ margin-bottom:1.1rem; font-size:1.05rem; }
.prose h2{ margin:2rem 0 .8rem; font-size:1.5rem; }
/* ============================================================
FOOTER
============================================================ */
.site-footer{ background:var(--navy); color:#fff; }
.site-footer a{ color:rgba(255,255,255,.85); }
.site-footer a:hover{ color:#fff; }
.footer__inner{ padding-top:3.2rem; padding-bottom:2.6rem; }
/* brand lockup */
.footer__brandrow{ display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.footer__logo{ display:inline-flex; }
.footer__logo img{ display:block; height:38px; width:auto; }
.footer__unit{ padding-left:1rem; border-left:1px solid rgba(255,255,255,.38);
font-size:1rem; letter-spacing:.01em; }
.footer__unit a{ color:#fff; display:inline-block; padding:.15rem 0; } /* 23px -> 24px+ target */
.footer__pipe{ color:rgba(255,255,255,.4); margin:0 .45rem; font-weight:400; }
/* contact line — info left, social right */
.footer__contact{ display:flex; flex-wrap:wrap; justify-content:space-between;
align-items:center; gap:1rem 1.8rem; font-size:.9rem;
color:rgba(255,255,255,.85); margin-bottom:2rem; }
.footer__contact-info{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.8rem; }
.footer__contact address{ font-style:normal; margin:0; }
.footer__contact-info a{ display:inline-block; padding:.15rem 0; } /* 23px -> 24px+ target */
.footer__social{ display:flex; flex-wrap:wrap; gap:1.4rem; }
/* min-width + padding: "X" alone measured 11x23, under the 24px target minimum (WCAG 2.5.8) */
.footer__social a{ font-weight:700; font-size:.9rem; display:inline-block; min-width:24px; text-align:center; padding:.15rem .25rem; }
/* secondary nav + copyright */
.footer__nav{ border-top:1px solid rgba(255,255,255,.16); padding-top:1.6rem;
display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.footer__links{ list-style:none; display:flex; flex-wrap:wrap; gap:.7rem 1.8rem;
margin:0; padding:0; font-size:.85rem; }
.footer__links a{ display:inline-block; padding:.2rem 0; } /* 20px -> 24px+ target */
.footer__copy{ font-size:.82rem; color:rgba(255,255,255,.7); margin:0; }
/* ============================================================
INTERACTIVE DEMO — "How an AI request works"
Ported from the previous dynamic site; fully scoped under
.aidemo so nothing leaks. Runs only on ai-tools.html (ai-demo.js).
Honors reduced motion via body.reduced (set by the script).
============================================================ */
.aidemo :focus-visible{ outline-color:var(--navy); }
.aidemo{ background:transparent; color:var(--ink); padding:0;
--muted:var(--gray-dk); --aid-otext:var(--orange-dk); --card:#fff;
--ink:var(--navy); --paper:rgba(173,179,184,.18); --script:var(--sans);
--aid-node-w:473px; --aid-branch-w:26px; --aid-ghost:.2; }
.aidemo__cols{ display:grid; grid-template-columns:minmax(0,.6fr) minmax(0,1.05fr); gap:clamp(2rem,4vw,4rem);
margin-top:.5rem; align-items:start; }
/* LEFT: Claude-style chat window */
.aidemo__left{ min-width:0; display:flex; }
.aidemo .ccard{ display:flex; flex-direction:column; width:100%; min-height:560px;
background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:0;
overflow:hidden; box-shadow:0 10px 34px rgba(0,14,84,.07); }
.aidemo .ccard__msgs{ flex:1 1 auto; display:flex; flex-direction:column; gap:1.1rem;
padding:1.5rem 1.6rem; overflow-y:auto; }
.aidemo .cmsg-user{ align-self:flex-end; max-width:82%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
padding:.6rem 1rem; border-radius:0; font-size:1rem; line-height:1.4;
opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.aidemo .cmsg-user.show{ opacity:1; transform:none; }
.aidemo .cmsg-ai{ align-self:stretch; display:flex; flex-direction:column; gap:.7rem; }
.aidemo .cthink{ display:flex; flex-direction:column; gap:.35rem; }
.aidemo .cthink .step-line{ color:var(--muted); font-size:.92rem; line-height:1.45; }
.aidemo .canswer{ color:var(--ink); font-size:1.02rem; line-height:1.6; }
.aidemo .canswer:empty{ display:none; }
.aidemo .canswer b{ color:var(--aid-otext); }
.aidemo .ccompose{ position:relative; flex:0 0 auto; display:flex; align-items:center; gap:.7rem;
padding:.85rem 1rem; border-top:1px solid var(--line); background:var(--paper); }
.aidemo .send-hint{ position:absolute; right:6px; bottom:calc(100% - 4px); display:flex; flex-direction:column;
align-items:flex-end; gap:0; pointer-events:none; opacity:0; transition:opacity .4s; }
.aidemo .send-hint.show{ opacity:1; }
.aidemo .send-hint__text{ font-family:var(--script); color:var(--orange-dk); font-weight:700; font-style:italic;
font-size:1.05rem; line-height:1; letter-spacing:.01em; transform:rotate(-5deg); }
.aidemo .send-hint__arrow{ width:34px; height:40px; color:var(--orange); margin-right:8px; }
/* 3 x 1.5s: auto-started motion must end within 5s or offer a pause (WCAG 2.2.2) */
.aidemo .ccompose__send.glow{ animation:aidsendglow 1.5s ease-in-out 3; }
@keyframes aidsendglow{ 0%{ box-shadow:0 0 0 0 rgba(247,105,0,.55); } 70%{ box-shadow:0 0 0 13px rgba(247,105,0,0); } 100%{ box-shadow:0 0 0 0 rgba(247,105,0,0); } }
.aidemo .ccompose__field{ flex:1 1 auto; min-width:0; display:flex; align-items:center;
background:#fff; border:1px solid var(--line); border-radius:0; padding:.7rem .95rem; }
.aidemo .ccompose__text{ min-width:0; color:var(--ink); font-size:.98rem;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aidemo .ccompose__text::after{ content:""; display:inline-block; width:1px; height:1.05em;
background:var(--ink); margin-left:2px; vertical-align:-2px; animation:aidcaret 1.1s steps(1) 4; } /* 4.4s, then a steady caret (WCAG 2.2.2) */
@keyframes aidcaret{ 50%{ opacity:0; } }
.aidemo .ccompose__send{ flex:0 0 auto; width:36px; height:36px; border-radius:0; border:none;
background:var(--orange); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .2s, transform .15s; }
.aidemo .ccompose__send:hover{ background:var(--orange-dk); } .aidemo .ccompose__send:active{ transform:scale(.94); }
.aidemo .ccompose__send:disabled,
.aidemo .ccompose__send[aria-disabled="true"]{ opacity:.5; cursor:default; }
.aidemo .ccompose__send svg{ width:18px; height:18px; }
/* RIGHT: request path (blocks + twin chevron connectors + LLM offshoot) */
.aidemo .vflow{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.aidemo .vnode{ position:relative; width:100%; max-width:var(--aid-node-w); overflow:hidden;
display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem;
background:var(--card); border:1px solid var(--line); border-radius:0; padding:1.15rem 1.4rem;
opacity:var(--aid-ghost); transform:translateY(12px) scale(.985);
transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .3s, box-shadow .3s; }
.aidemo .vnode.shown{ opacity:1; transform:none; }
.aidemo .vnode.active{ border-color:var(--orange); box-shadow:0 12px 34px rgba(247,105,0,.2); }
.aidemo .vnode--grow{ flex-direction:column; gap:0; align-items:stretch; }
.aidemo .vnode--grow .vnode__row{ display:flex; justify-content:flex-start; align-items:center; gap:1rem;
position:relative; z-index:1; min-height:48px; }
.aidemo .vnode__stage{ position:relative; z-index:1; flex:1 1 0; min-width:0; opacity:0;
transition:opacity .4s var(--ease); }
.aidemo .vnode__stage > .stage-inner{ overflow:hidden; min-height:0; max-height:0;
transition:max-height .6s var(--ease); }
.aidemo .vnode.grown{ border-color:var(--orange); box-shadow:0 14px 40px rgba(247,105,0,.22); }
.aidemo .vnode.grown .vnode__stage{ opacity:1; }
.aidemo .vnode.grown .vnode__stage > .stage-inner{ max-height:170px; }
.aidemo .mini{ display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line);
border-radius:0; padding:.5rem .55rem; }
.aidemo .mini__box{ flex:1 1 auto; min-width:0; font-size:.86rem; line-height:1.35; color:var(--ink);
white-space:normal; overflow-wrap:break-word; }
.aidemo .mini__typed::after{ content:"|"; color:var(--muted); margin-left:1px; }
.aidemo .mini__send{ flex:0 0 auto; width:30px; height:30px; border-radius:0; background:var(--orange); color:#fff;
display:flex; align-items:center; justify-content:center; }
.aidemo .mini__send svg{ width:15px; height:15px; }
.aidemo .mini__send.press{ animation:aidpress .45s ease; }
@keyframes aidpress{ 40%{ transform:scale(.82); } 70%{ transform:scale(1.08); } }
.aidemo .wbox{ background:#fff; border:1px solid var(--line); border-radius:0; padding:.55rem .65rem; }
.aidemo .wbox__label{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:.35rem; }
.aidemo .gennow{ height:26px; display:flex; align-items:center; gap:.4rem; font-size:.92rem; font-weight:700; white-space:nowrap; }
.aidemo .gennow .gn-num{ color:var(--aid-otext); }
.aidemo .gennow .gn-arrow{ color:var(--muted); }
.aidemo .gennow .gn-word{ color:var(--navy); }
.aidemo .genout{ margin-top:.3rem; font-size:.88rem; color:var(--ink); line-height:1.4; min-height:1.4em; }
.aidemo .genout .gword{ opacity:0; animation:aidovz .3s ease forwards; }
.aidemo .srch{ display:flex; align-items:center; gap:.7rem; }
.aidemo .srch__ico{ position:relative; width:40px; height:40px; flex:0 0 auto; color:var(--navy); }
.aidemo .srch__ico .doc, .aidemo .srch__ico .globe{ position:absolute; inset:0; width:100%; height:100%; }
.aidemo .srch__ico .glass{ position:absolute; width:22px; height:22px; left:5px; top:7px; color:var(--orange);
animation:aidglass 1.15s ease-in-out infinite; }
@keyframes aidglass{ 0%{ transform:translate(0,0); } 25%{ transform:translate(8px,1px); } 50%{ transform:translate(6px,8px); } 75%{ transform:translate(-1px,4px); } 100%{ transform:translate(0,0); } }
.aidemo .srch__text{ font-size:.9rem; line-height:1.35; color:var(--ink); min-height:2.7em;
display:flex; align-items:center; }
.aidemo .srch__text.miss{ color:var(--muted); }
.aidemo .srch__text.hit{ color:var(--aid-otext); font-weight:700; }
.aidemo .used{ font-size:.86rem; color:var(--muted); }
.aidemo .used summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.35rem; padding:.14rem 0; }
.aidemo .used summary::-webkit-details-marker{ display:none; }
.aidemo .used summary::before{ content:"\203A"; display:inline-block; transition:transform .2s; color:var(--muted); font-weight:700; }
.aidemo .used[open] > summary::before{ transform:rotate(90deg); }
.aidemo .used .used{ margin-left:1.1rem; }
.aidemo .used__leaf{ margin-left:1.3rem; padding:.14rem 0; color:var(--ink); }
.aidemo .vnode__fill{ position:absolute; inset:0; z-index:0; pointer-events:none;
background:rgba(247,105,0,.13); transform:scaleX(0); transform-origin:left; }
.aidemo .vnode__head, .aidemo .vnode ul{ position:relative; z-index:1; }
.aidemo .vnode__head{ flex:0 0 auto; display:flex; align-items:center; gap:.8rem; }
.aidemo .vnode__head > div{ min-width:0; }
.aidemo .vnode__ico{ width:48px; height:48px; border-radius:0; flex:0 0 auto; background:var(--paper);
color:var(--navy); display:flex; align-items:center; justify-content:center; transition:background .3s, color .3s; }
.aidemo .vnode.active .vnode__ico{ background:var(--orange); color:#fff; }
.aidemo .vnode__ico svg{ width:26px; height:26px; }
.aidemo .vnode h3{ font-family:var(--sans); font-weight:700; font-size:1.55rem; color:var(--navy); line-height:1.05; }
.aidemo .vnode ul{ list-style:none; display:flex; flex-direction:row; flex-wrap:wrap;
align-items:center; gap:.45rem; margin-top:1rem; flex:0 0 auto; }
.aidemo .vnode li{ font-size:.92rem; color:var(--navy); background:var(--paper); border:1px solid var(--line);
border-radius:999px; padding:.3rem .85rem; transition:background .3s, color .3s, border-color .3s, box-shadow .3s; }
.aidemo .vnode li.hit{ color:#fff; background:var(--aid-otext); border-color:var(--aid-otext); font-weight:700;
box-shadow:0 0 0 4px rgba(215,65,0,.18); }
.aidemo .vnode li.hit::before{ content:"\2713"; margin-right:.32rem; font-weight:700; }
.aidemo .vlevel--llm{ position:relative; width:100%; }
.aidemo .branch{ position:absolute; left:var(--aid-node-w); top:50%; width:var(--aid-branch-w); height:0;
border-top:2px dashed rgba(247,105,0,.55); opacity:0; transition:opacity .4s; }
.aidemo .branch.on{ opacity:1; }
.aidemo .offshoot{ position:absolute; top:50%; left:calc(var(--aid-node-w) + var(--aid-branch-w));
width:calc(100% - var(--aid-node-w) - var(--aid-branch-w)); min-width:210px; max-width:340px;
background:var(--paper); border:1px solid var(--line); border-radius:0; padding:.85rem .95rem;
opacity:0; transform:translate(-8px,-50%); visibility:hidden; pointer-events:none;
transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; }
.aidemo .offshoot.on{ opacity:1; transform:translate(0,-50%); visibility:visible; pointer-events:auto;
transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s; }
.aidemo .ostage__title{ font-family:var(--sans); font-weight:700; font-size:1.1rem; color:var(--navy); margin-bottom:.2rem; }
.aidemo .ostage__desc{ font-size:.85rem; line-height:1.45; color:var(--ink); margin-bottom:.55rem; }
.aidemo .ostage__div{ border:none; border-top:1px solid var(--line); margin:.85rem 0; }
.aidemo .ovz{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; }
.aidemo .ovz .trow{ display:flex; align-items:center; gap:.55rem; }
.aidemo .ovz .tw{ min-width:62px; text-align:center; background:#fff; border:1px solid var(--line);
border-radius:0; padding:.26rem .55rem; font-size:.85rem; font-weight:600; color:var(--navy); }
.aidemo .ovz .tn{ min-width:50px; text-align:center; background:#fff; border:1px solid rgba(247,105,0,.45);
border-radius:0; padding:.26rem .55rem; font-size:.85rem; font-weight:700; color:var(--aid-otext); }
.aidemo .ovz .tar{ color:var(--muted); font-size:1.05rem; }
.aidemo .ovz > *{ opacity:0; transform:translateY(5px); animation:aidovz .5s ease forwards; }
.aidemo .ovz > *:nth-child(1){ animation-delay:.1s } .aidemo .ovz > *:nth-child(2){ animation-delay:.35s }
.aidemo .ovz > *:nth-child(3){ animation-delay:.6s } .aidemo .ovz > *:nth-child(4){ animation-delay:.85s }
@keyframes aidovz{ to{ opacity:1; transform:none; } }
body.reduced .aidemo .ovz > *{ opacity:1; transform:none; }
.aidemo .vconn{ width:100%; max-width:var(--aid-node-w); height:80px; display:flex; justify-content:center;
align-items:stretch; gap:44px; }
.aidemo .chev-track{ width:22px; opacity:0; transition:opacity .3s;
background-repeat:repeat-y; background-position:center 0; background-size:22px 20px; }
.aidemo .chev-track.used{ opacity:.32; }
.aidemo .chev-track.flowing{ opacity:1; }
.aidemo .chev--down{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath d='M4 5 L11 12 L18 5' fill='none' stroke='%23F76900' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.aidemo .chev--up{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath d='M4 15 L11 8 L18 15' fill='none' stroke='%23F76900' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.aidemo .chev--down.flowing{ animation:aidchev-down .7s linear infinite; }
.aidemo .chev--up.flowing{ animation:aidchev-up .7s linear infinite; }
@keyframes aidchev-down{ to{ background-position:center 20px; } }
@keyframes aidchev-up{ to{ background-position:center -20px; } }
@keyframes aidfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.aidemo.paused, .aidemo.paused *{ animation-play-state:paused !important; }
body.reduced .aidemo .ccompose__text::after{ display:none; }
body.reduced .aidemo .ccompose__send{ pointer-events:none; }
@media (max-width:1400px){
.aidemo__cols{ grid-template-columns:1fr; gap:2.6rem; }
.aidemo__left{ max-width:620px; }
.aidemo .ccard{ min-height:440px; }
}
@media (max-width:860px){
.aidemo .branch{ display:none; }
.aidemo .offshoot{ position:static; transform:none; width:auto; max-width:var(--aid-node-w); margin-top:.9rem; }
.aidemo .offshoot.on{ transform:none; }
.aidemo .offshoot:not(.on){ display:none; }
}
/* ============================================================
VIDEO GALLERY (dynamic playlist) + guide steps + callout
============================================================ */
.subhead{ font-family:var(--sans); font-weight:700; font-size:1.2rem; color:var(--navy); margin:.4rem 0 .3rem; }
.subhead__note{ color:var(--gray-dk); font-size:.95rem; margin:0 0 1.4rem; max-width:64ch; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
@media (max-width:900px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .video-grid{ grid-template-columns:1fr; } }
.video-note{ grid-column:1/-1; color:var(--gray-dk); font-size:.98rem; }
.video-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.video-card:hover{ border-color:var(--orange); text-decoration:none; }
.video-card__thumb{ position:relative; display:block; aspect-ratio:16/9; background:var(--wash); overflow:hidden; }
.video-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.video-card__play{ position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
background:rgba(247,105,0,.92); color:#fff; display:flex; align-items:center; justify-content:center;
transition:transform .2s var(--ease), background .2s var(--ease); }
.video-card__play svg{ width:22px; height:22px; margin-left:2px; }
.video-card:hover .video-card__play{ transform:scale(1.08); background:var(--orange-dk); }
.video-card__dur{ position:absolute; right:.5rem; bottom:.5rem; background:rgba(0,14,84,.85); color:#fff;
font-size:.74rem; font-weight:700; padding:.15rem .45rem; border-radius:0; letter-spacing:.02em; }
.video-card__hit{ display:flex; flex-direction:column; color:inherit; text-decoration:none; }
.video-card__hit:hover{ text-decoration:none; }
.video-card__title{ padding:.9rem 1rem 1.05rem; font-weight:700; font-size:.98rem; color:var(--navy); line-height:1.35; }
.video-card--has-desc .video-card__title{ padding-bottom:.4rem; }
.video-card__desc-wrap{ padding:0 1rem 1.05rem; }
.video-card__desc{ font-size:.85rem; color:var(--gray-dk); line-height:1.45; }
.video-card__desc.clamp{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-card__toggle{ margin-top:.45rem; background:none; border:0; padding:.25rem 0; cursor:pointer; /* 19px -> 24px+ target */
font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--orange-dk); }
.video-card__toggle:hover{ text-decoration:underline; }
/* callout box (guides) */
.callout{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange);
border-radius:0; padding:1.3rem 1.5rem; margin:1.8rem 0; }
.callout h2{ font-size:1.15rem; }
.callout p{ margin:.4rem 0 0; }
/* numbered step list (guides) */
.steps{ list-style:none; counter-reset:step; display:grid; gap:1.2rem; margin:1.4rem 0 2rem; padding:0; }
.steps > li{ position:relative; counter-increment:step; padding-left:3.4rem; }
.steps > li::before{ content:counter(step); position:absolute; left:0; top:0; width:2.4rem; height:2.4rem;
border-radius:50%; background:var(--orange); color:#fff; font-family:var(--sans); font-weight:700;
font-size:1.15rem; display:flex; align-items:center; justify-content:center; }
.steps > li h3{ font-size:1.15rem; margin:.2rem 0 .4rem; }
.steps > li p{ margin:0 0 .7rem; }
/* video search toolbar + pagination */
.video-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.1rem; margin:0 0 1.3rem; }
.video-search{ flex:1 1 260px; max-width:360px; font-family:var(--sans); font-size:.98rem; color:var(--navy);
background:#fff; border:1px solid var(--line); border-radius:0; padding:.65rem 1.1rem; }
.video-search::placeholder{ color:var(--gray-md); }
/* visible label on its own row above the field: the placeholder vanishes on typing (WCAG 3.3.2) */
.video-search__label{ flex:1 1 100%; font-size:.9rem; font-weight:700; color:var(--gray-dk); margin-bottom:-.4rem; }
.video-search:focus-visible{ outline:3px solid var(--orange); outline-offset:1px; border-color:var(--orange); }
.video-count{ font-size:.88rem; color:var(--gray-dk); font-weight:600; }
.video-more{ display:flex; justify-content:center; margin-top:1.8rem; }
/* videos: plain "unavailable" / loading panel — simple gray haze */
.video-unavailable{ grid-column:1/-1; background:var(--wash); border:1px solid var(--line-soft);
border-radius:var(--radius); padding:2.6rem 1.5rem; text-align:center; color:var(--gray-dk);
font-weight:600; letter-spacing:.01em; }
/* numbered policy list (vendor policy) */
.policy-list{ margin:0 0 1.25rem 1.3rem; }
.policy-list li{ margin-bottom:.55rem; font-size:1.05rem; line-height:1.6; }
/* ============================================================
COOKIE NOTICE (cookie-notice.js): slim bar along the bottom of the screen.
Same wording and policy link as syracuse.edu's banner. Navy so it reads as
site chrome; white text and a white outline button (both well above AA on navy).
============================================================ */
.cookie-notice{ position:fixed; left:0; right:0; bottom:0; z-index:1100; background:var(--navy); color:#fff;
border-top:1px solid rgba(255,255,255,.16); }
.cookie-notice__inner{ display:flex; align-items:center; justify-content:space-between; gap:.8rem 1.4rem;
flex-wrap:wrap; padding-block:.6rem; }
.cookie-notice__text{ margin:0; font-size:.85rem; line-height:1.45; color:#fff; flex:1 1 20rem; }
.cookie-notice__text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookie-notice__text a:hover{ color:var(--orange-lt); }
.cookie-notice__btn{ flex:0 0 auto; min-height:2.5rem; padding:.45rem 1.1rem; background:transparent; color:#fff;
border:2px solid #fff; border-radius:0; font-family:var(--sans); font-weight:700; font-size:.8rem;
letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.cookie-notice__btn:hover{ background:#fff; color:var(--navy); }
.cookie-notice :focus-visible{ outline-color:var(--orange-lt); }
| |