/* raq.com/for, /for/<industry> and /editions. Tokens match the concept nine homepage (public/homepage-concepts/nine/nine.css).
   On an industry page the film is the focus: full width under the nav, up to 1920px. Below it the day rail gives the
   film's real clock times as clickable stops, with the working day left as a dashed gap. The quote document uses the
   made-up business's own colour (--brand), as the real quote does; everything else stays in the site palette. */
.ip {
    --ground: #f6f7f8;
    --silver: #eef1f4;
    --paper: #ffffff;
    --ink: #191b22;
    --ink-2: #2d323c;
    --muted: #626777;
    --faint: #8a909c;
    --line: #e2e6eb;
    --line-2: #d3d9e0;
    --hover: #9aa3ae;
    --slate: #1d2532;
    --green: #286c4c;
    --green-soft: #e8f1ec;
    --shadow-tile: 0 1px 2px #1c1f2a12, 0 12px 28px -10px #1c1f2a30;
    --shadow-panel: 0 1px 1px #1c1f2a0a, 0 2px 6px #1c1f2a08, 0 30px 70px -28px #1c1f2a45;
    --ease: cubic-bezier(.22, 1, .36, 1);
    color: var(--ink);
    background: var(--ground);
    font-size: 16px;
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
}
.ip *, .ip *::before, .ip *::after { box-sizing: border-box; }
.ip :where(h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; }
.ip :where(ol, ul) { padding: 0; list-style: none; }
.ip [hidden] { display: none !important; }
/* Zero specificity, so the film player's own Tailwind colours (white controls on black) still win. */
:where(.ip) button { font: inherit; color: inherit; cursor: pointer; }
.ip a:focus-visible, .ip button:focus-visible, .ip summary:focus-visible { outline: 2px solid #3b6fd9; outline-offset: 3px; border-radius: 8px; }
.ip-wrap { width: min(1260px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.ip-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ip h1 { font-size: clamp(38px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.052em; line-height: 1.01; text-wrap: balance; }
.ip h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 600; letter-spacing: -.048em; line-height: 1.03; text-wrap: balance; }
.ip-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 16px 64px; margin-bottom: clamp(36px, 4vw, 56px); }
.ip-head p { max-width: 460px; color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.ip-lead { max-width: 540px; color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }

/* Controls */
.ip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ip-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: #fff !important; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px #1c1f2a26, 0 10px 24px -12px #1c1f2a80; transition: background .25s var(--ease), transform .25s var(--ease); }
.ip-button:hover { background: #2a2d37; transform: translateY(-1px); }
.ip-link { color: var(--ink); font-size: 15.5px; font-weight: 500; text-decoration: underline; text-decoration-color: #b4bcc6; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.ip-link:hover { text-decoration-color: var(--ink); }
.ip-small { margin-top: 18px; color: var(--faint); font-size: 13.5px; line-height: 1.5; }

/* Hero: the film first, then the heading and the call to action. The film is as wide as the page allows (up to 1920px)
   but never taller than the space under the sticky nav, so the picture and its controls (--ip-bar: the player's 2.25rem
   buttons, 0.5rem seek bar and gap, 22px padding and a 1px rule) always fit on screen together. --ip-nav is the nav's measured height, set by marketing-industry.js. */
.ip-hero { padding-bottom: clamp(56px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.ip-film { --ip-gap: clamp(12px, 1.6vw, 24px); --ip-bar: calc(24px + 3.25rem); width: min(100% - 2 * var(--ip-gap), 1920px, calc((100vh - var(--ip-nav, 81px) - var(--ip-bar) - 2 * var(--ip-gap)) * 16 / 9)); margin: var(--ip-gap) auto 0; }
@supports (height: 100svh) {
    .ip-film { width: min(100% - 2 * var(--ip-gap), 1920px, calc((100svh - var(--ip-nav, 81px) - var(--ip-bar) - 2 * var(--ip-gap)) * 16 / 9)); }
}
.ip .ip-player { overflow: hidden; border-radius: 16px; box-shadow: var(--shadow-panel), 0 0 0 1px #1c1f2a14; }
.ip .ip-player:fullscreen { border-radius: 0; box-shadow: none; }
.ip .ip-player > div { border-radius: 0; }
.ip .ip-player > div:last-child { padding: 10px clamp(12px, 2.4vw, 40px) 12px; }
.ip [data-film-shade] { display: none; }
/* The poster's own title card sits left of centre, so the play button goes just under it. */
.ip .ip-film-overlay > button { position: absolute; left: 6.8%; top: 63%; padding: clamp(9px, 1.25vw, 20px) clamp(20px, 2.7vw, 42px); border-radius: clamp(9px, 1vw, 14px); }
.ip .ip-film-overlay svg { width: clamp(20px, 2.2vw, 40px); height: clamp(20px, 2.2vw, 40px); }
.ip-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(40px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.ip-hero .ip-actions { margin-top: 30px; }

/* The day */
.ip-day { padding-block: clamp(72px, 8vw, 128px); background: var(--paper); border-bottom: 1px solid var(--line); }
/* Each stop is a card on one line; the evening stop is a word (Evening, or Afternoon for pubs), so its column is wider. */
.ip-rail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 44px; }
.ip-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.ip-rail-stop { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px 15px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; text-align: left; box-shadow: 0 1px 2px #1c1f2a0d; transition: border-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease), background .2s; }
.ip-rail-time { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.ip-rail-label { color: var(--muted); font-size: 14px; line-height: 1.3; }
.ip-rail-stop:hover { border-color: var(--hover); box-shadow: var(--shadow-tile); transform: translateY(-2px); }
.ip-rail-stop[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 14px 30px -14px #191b2299; transform: none; }
.ip-rail-stop[aria-selected="true"] .ip-rail-label { color: #ffffffcc; }
.ip-rail-stop[aria-selected="true"]::after { content: ""; position: absolute; left: 26px; bottom: -7px; width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); }
/* The working day between the call and the evening: a dashed stretch of the line, labelled underneath. */
.ip-rail-gap { position: relative; display: grid; place-items: center; }
.ip-rail-gap::before { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 7px, var(--paper) 7px 13px); }
.ip-rail-gap span { position: relative; margin-top: 46px; color: var(--faint); font-size: 13.5px; text-align: center; }

/* Each stop: stacked as a vertical day on phones and without script, one at a time under the rail on wide screens. */
.ip-stops { display: grid; }
.ip-stop { position: relative; display: grid; gap: 18px; margin-left: 7px; padding: 0 0 52px 30px; border-left: 2px solid var(--line-2); }
.ip-stop::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px #fff; }
.ip-stop:last-child { border-left-color: transparent; padding-bottom: 0; }
.ip-stop-when { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 15px; }
.ip-stop-when span { color: var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.ip-stop-gap { margin-left: 7px; padding: 0 0 52px 30px; border-left: 2px dashed var(--line-2); color: var(--faint); font-size: 15px; }
.ip-frame { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--silver); box-shadow: var(--shadow-panel); }
.ip-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ip-note { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ip-note-head { display: flex; align-items: center; gap: 14px; }
.ip-note-head img { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #1c1f2a14; }
.ip-note h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.ip-note p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.ip-note .ip-note-meta { color: var(--muted); font-size: 14px; line-height: 1.5; }
.ip-bubble { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px 18px 6px 18px; background: var(--silver); }
.ip-steps { display: grid; gap: 9px; width: 100%; }
.ip-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.ip-steps svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }
.ip-steps strong { color: var(--ink); font-weight: 550; }
.ip-facts { display: grid; width: 100%; }
.ip-facts div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.ip-facts div:last-child { border-bottom: 1px solid var(--line); }
.ip-facts dt { color: var(--muted); font-size: 14px; }
.ip-facts dd { color: var(--ink); font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ip-note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.ip-play { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500; box-shadow: 0 1px 2px #1c1f2a26, 0 10px 22px -12px #1c1f2a80; transition: background .2s, transform .25s var(--ease); }
.ip-play:hover { background: #2a2d37; transform: translateY(-1px); }
.ip-next { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .2s; }
.ip-next:hover { color: var(--ink); }

.ip-stops.is-tabs .ip-stop { display: none; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; margin: 0; padding: 0; border: 0; }
.ip-stops.is-tabs .ip-stop::before, .ip-stops.is-tabs .ip-stop-when, .ip-stops.is-tabs .ip-stop-gap { display: none; }
.ip-stops.is-tabs .ip-stop.is-active { display: grid; }
.ip-stops.is-tabs .ip-stop.is-active .ip-frame img { animation: ip-show .5s var(--ease); }
.ip-stops.is-tabs .ip-stop.is-active .ip-note { animation: ip-rise .45s var(--ease); }
@keyframes ip-show { from { opacity: .2; transform: scale(1.012); } }
@keyframes ip-rise { from { opacity: 0; transform: translateY(6px); } }

/* The quote */
.ip-quote { padding-block: clamp(72px, 8vw, 128px); }
.ip-quote-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ip-quote-copy { position: sticky; top: 120px; padding-top: 24px; }
.ip-quote-copy > p { max-width: 470px; margin-top: 22px; color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.ip-facts-wide { max-width: 470px; margin: 32px 0 28px; }
.ip-doc { justify-self: end; width: min(100%, 580px); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-panel); }
.ip-doc-accepted { display: flex; align-items: center; gap: 8px; padding: 11px 26px; background: var(--green-soft); color: var(--green); font-size: 13.5px; font-weight: 550; }
.ip-doc-cover { padding: 26px 30px 0; background: var(--brand, var(--slate)); color: #fff; }
.ip-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ip-doc-top img { width: 48px; height: 48px; padding: 6px; border-radius: 13px; background: #fff; }
.ip-doc-top span { color: #ffffffb3; font-size: 12.5px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ip-doc-title { margin-top: 44px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.ip-doc-sub { margin-top: 10px; color: #ffffffbf; font-size: 14.5px; line-height: 1.5; }
.ip-doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid #ffffff2e; }
.ip-doc-meta div { padding: 14px 16px 16px 0; border-bottom: 1px solid #ffffff2e; }
.ip-doc-meta div:nth-child(even) { padding-left: 16px; border-left: 1px solid #ffffff2e; }
.ip-doc-meta div:nth-last-child(-n + 2) { border-bottom: 0; }
.ip-doc-meta dt { color: #ffffffa6; font-size: 12px; }
.ip-doc-meta dd { margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.ip-doc-meta small { display: block; color: #ffffffa6; font-size: 11.5px; font-weight: 400; }
.ip-doc-body { padding: 26px 30px 30px; }
.ip-doc-greeting { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ip-doc-body > p:not(.ip-doc-greeting) { margin-top: 8px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.ip-doc-items { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ip-doc-items th, .ip-doc-items td { padding: 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.ip-doc-items th { padding-right: 16px; color: var(--ink); font-weight: 500; text-align: left; }
.ip-doc-items td { color: var(--ink); text-align: right; white-space: nowrap; }
.ip-doc-items tbody small { display: block; margin-top: 3px; color: var(--faint); font-size: 12.5px; font-weight: 400; }
.ip-doc-items tbody em { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11.5px; font-style: normal; font-weight: 550; vertical-align: 1px; }
.ip-doc-tick { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; background: var(--brand-accent, var(--ink)); color: #fff; vertical-align: -3px; }
.ip-doc-tick svg { width: 12px; height: 12px; }
.ip-doc-items tfoot th { color: var(--muted); font-weight: 400; }
.ip-doc-items tfoot tr:first-child > * { border-top: 1.5px solid var(--line-2); }
.ip-doc-items tfoot .is-total > * { border-top: 1.5px solid var(--ink); color: var(--ink); font-size: 16px; font-weight: 650; }

/* Tools */
.ip-tools { padding-block: clamp(72px, 8vw, 128px); background: var(--paper); border-block: 1px solid var(--line); }
.ip-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ip-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 28px 4px 0; }
.ip-tool + .ip-tool { padding-left: 28px; border-left: 1px solid var(--line); }
.ip-tool-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: var(--ground); }
.ip-tool-icon img { width: 22px; height: 22px; }
.ip-tool h3 { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.ip-tool p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.ip-tool .ip-tool-note { color: var(--faint); font-size: 13.5px; }
.ip-tool a { margin-top: auto; padding-top: 6px; color: var(--ink); font-size: 14.5px; font-weight: 500; text-decoration: underline; text-decoration-color: #b4bcc6; text-underline-offset: 4px; }
.ip-tool a:hover { text-decoration-color: var(--ink); }
.ip-more-title { margin: 64px 0 18px; font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.ip-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ip-more a { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--ground); color: var(--muted); font-size: 14.5px; line-height: 1.5; text-decoration: none; transition: background .2s, border-color .2s; }
.ip-more a:hover { border-color: var(--line-2); background: #fff; }
.ip-more .ip-tool-icon { width: 34px; height: 34px; border-radius: 10px; background: #fff; }
.ip-more .ip-tool-icon img { width: 18px; height: 18px; }
.ip-more strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }

/* ChatGPT is optional */
.ip-agents { padding-block: clamp(56px, 6vw, 88px); background: var(--slate); color: #fff; }
.ip-agents-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 64px; align-items: end; }
.ip-agents p { max-width: 640px; margin-top: 18px; color: #b9c2cf; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.ip-agents-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.ip-agent-logos { display: inline-flex; gap: 8px; }
.ip-agent-logos img { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff; }
.ip-link-light { color: #fff; text-decoration-color: #ffffff66; }
.ip-link-light:hover { text-decoration-color: #fff; }

/* Questions */
.ip-faq { padding-block: clamp(72px, 8vw, 128px); }
.ip-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.ip-faq-list { border-bottom: 1px solid var(--line-2); }
.ip-faq details { border-top: 1px solid var(--line-2); }
.ip-faq summary { position: relative; padding: 22px 44px 22px 0; font-size: 18px; font-weight: 550; letter-spacing: -.02em; line-height: 1.35; list-style: none; cursor: pointer; }
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary::before, .ip-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.ip-faq summary::after { transform: rotate(90deg); }
.ip-faq details[open] summary::after { transform: rotate(0); }
.ip-faq details p { max-width: 620px; padding: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.ip-faq details a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Close, and the small print under it */
.ip-close { padding-block: clamp(72px, 8vw, 120px); background: radial-gradient(900px 420px at 15% 120%, #e2e8ef, transparent 70%), var(--silver); border-top: 1px solid var(--line); }
.ip-close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 64px; align-items: center; }
.ip-close p { max-width: 520px; margin-top: 18px; color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.ip-close .ip-actions { justify-content: flex-end; }
.ip-notice { padding-block: 22px 26px; color: var(--faint); font-size: 12.5px; line-height: 1.5; }

/* The /for index and /editions: a heading, then a directory of cards, each one link with an optional second link on top. */
.ip-intro { padding-block: clamp(56px, 7vw, 112px) clamp(40px, 5vw, 72px); }
.ip-intro .ip-lead { margin-top: 24px; }
.ip-intro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(40px, 5vw, 80px); align-items: start; }
.ip-search { position: relative; display: block; margin-top: 30px; max-width: 440px; }
.ip-search svg { position: absolute; left: 19px; top: 50%; margin-top: -9px; color: var(--faint); pointer-events: none; }
.ip-search input { width: 100%; height: 56px; padding: 0 20px 0 50px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; box-shadow: 0 1px 2px #1c1f2a0d; transition: border-color .2s, box-shadow .2s; }
.ip-search input::placeholder { color: var(--faint); }
.ip-search input:hover { border-color: var(--hover); }
.ip-search input:focus { border-color: var(--ink); outline: 0; box-shadow: 0 0 0 4px #191b221a; }
.ip-groups { padding-bottom: clamp(64px, 7vw, 112px); }
.ip-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(32px, 4vw, 64px); padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line-2); }
.ip-group h2 { position: sticky; top: 96px; align-self: start; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.03em; line-height: 1.15; }
.ip-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.ip-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ip-card-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--silver); }
.ip-card-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ip-card-time { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: #191b22d9; color: #fff; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); transition: background .2s; }
.ip-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -.022em; line-height: 1.25; }
.ip-card h3 a { color: var(--ink); text-decoration: none; }
.ip-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.ip-card p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.ip-card:hover .ip-card-frame img { transform: scale(1.035); }
.ip-card:hover .ip-card-time { background: var(--ink); }
.ip-card:hover h3 a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.ip-card-extra { position: relative; z-index: 2; margin-top: 4px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: #b4bcc6; text-underline-offset: 4px; }
.ip-card-extra:hover { color: var(--ink); text-decoration-color: var(--ink); }
.ip-empty { padding-block: 8px 48px; color: var(--muted); font-size: 17px; }
.ip-band { padding-block: clamp(56px, 6vw, 88px); background: var(--paper); border-top: 1px solid var(--line); }
.ip-band-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: center; }
.ip-band h2 { font-size: clamp(28px, 2.8vw, 40px); }
.ip-band p { max-width: 560px; margin-top: 14px; color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.ip-band .ip-actions { justify-content: flex-end; }
/* /editions: each workspace's overview, zoomed past the sidebar to its figures. */
.ip-eds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(20px, 2.6vw, 36px); padding-bottom: clamp(72px, 8vw, 120px); }
.ip-ed .ip-card-frame { aspect-ratio: 16 / 10; margin-bottom: 16px; border-radius: 18px; box-shadow: var(--shadow-tile); }
.ip-ed .ip-card-frame img { object-position: 0 0; transform: scale(1.42); transform-origin: 58% 4%; }
.ip-ed:hover .ip-card-frame img { transform: scale(1.38); }
.ip-ed h2 { font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.035em; }
.ip-ed h2 a { color: var(--ink); text-decoration: none; }
.ip-ed h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.ip-ed:hover h2 a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.ip-ed p { max-width: 520px; font-size: 16px; }
.ip-ed-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-top: 8px; }
.ip-ed-domain { color: var(--faint); font-size: 14px; }

@media (max-width: 1080px) {
    .ip-quote-copy { position: static; padding-top: 0; }
    .ip-hero-grid, .ip-quote-grid, .ip-faq-grid, .ip-close-grid, .ip-agents-grid, .ip-head, .ip-intro-grid, .ip-band-grid, .ip-group { grid-template-columns: minmax(0, 1fr); }
    .ip-group h2 { position: static; }
    .ip-doc { justify-self: start; }
    .ip-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ip-tool:nth-child(3) { padding-left: 0; border-left: 0; }
    .ip-tool:nth-child(n + 3) { margin-top: 20px; border-top: 1px solid var(--line); }
    .ip-agents-actions, .ip-close .ip-actions, .ip-band .ip-actions { justify-content: flex-start; }
}
@media (max-width: 800px) {
    .ip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ip-eds { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ip-film { --ip-gap: 0px; }
    .ip .ip-player { border-radius: 0; box-shadow: none; }
    .ip .ip-player > div:last-child { padding-inline: 10px; }
    .ip-tool-grid, .ip-more { grid-template-columns: minmax(0, 1fr); }
    .ip-tool, .ip-tool + .ip-tool { padding: 24px 0 8px; border-left: 0; }
    .ip-tool + .ip-tool { margin-top: 12px; border-top: 1px solid var(--line); }
    .ip-doc-cover, .ip-doc-body { padding-inline: 20px; }
    .ip-doc-accepted { padding-inline: 20px; }
    .ip-facts div { grid-template-columns: 112px minmax(0, 1fr); }
    .ip-stop, .ip-stop-gap { padding-left: 22px; }
    .ip-frame img { transform: scale(1.45); transform-origin: var(--focus, 50% 50%); }
    .ip-card h3 { font-size: 16.5px; }
    .ip-card p { font-size: 14px; }
}
@media (max-width: 420px) {
    .ip-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ip *, .ip *::before, .ip *::after { animation: none !important; transition: none !important; }
}