/* One set of values for shared components, loaded last on every Clarity Box page (6 Nov 2026). */

/* Buttons: pills everywhere, one weight and height. */
.btn { border-radius: 99px; font-weight: 500; }
.hero__text > .btn { min-height: 2.75rem; padding-inline: 1.125rem; }

/* Display headings: the one large size, so the H1 is never outranked. */
.opening h1,
#tools h2,
.capability__copy h2 {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

/* Section headings: 32px at their smallest, 44px at their largest. */
:root { --fs-h2: clamp(2rem, 1.35rem + 1.8vw, 2.75rem); }

.cta-illustrated h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--track-tight);
}

/* Card titles in the three main card types. */
.use-case__body h3,
.value-card h3,
.workflow__branch h3 { font-size: 1.375rem; letter-spacing: var(--track-tight); }

@media (max-width: 639px) {
  .use-case__body h3,
  .value-card h3,
  .workflow__branch h3 { font-size: 1.25rem; }
}

/* Corners: 20px on cards. The large canvases stay at their own radius. */
.security-summary__card,
.value-card,
.use-case { border-radius: 1.25rem; }
.use-case__body h3 a::after { border-radius: 1.2rem; }

/* Section intro paragraphs. */
.opening__copy,
.hero .lede,
.workflow__intro p,
.capability__copy p,
.value-cards p.value-cards__intro,
.use-cases__head p,
.security-summary__intro p,
#faq .lede,
.cta-band__copy p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-ink-2);
}

/* FAQ questions sit below card titles. */
.faq summary { font-size: 1.125rem; }

/* Closing panel lines up with the other sections. */
.cta-illustrated { padding-inline: 0; padding-bottom: var(--space-section); }
.cta-illustrated .cta-band__inner {
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--max) - var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
}

/* Section spacing. */
.use-cases,
.value-cards { padding-top: var(--space-section); }
.use-cases { padding-bottom: var(--space-section); }

/* Headings in Inter (8 Nov 2026, Jordan), matching the main site. Inter is
   self-hosted like Urbanist; OFL licence in inter-LICENSE.txt. Every Box rule that
   sets a heading font reads --font-heading, so swapping the token is enough. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter-latin-wght-normal.woff2") format("woff2");
}
:root { --font-heading: "Inter", system-ui, "Segoe UI", Arial, sans-serif; }
h1, h2, h3 { letter-spacing: -0.025em; }

/* 8 Nov 2026, Jordan: the Box's own header bar (logo, section links, Book a demo)
   is removed; the Clarity Writers site navigation above it is the only bar now.
   Hidden rather than deleted from the 12 pages, so it is one line to bring back. */
header.top { display: none !important; }

/* Main site style guide (8 Nov 2026, Jordan): the Box pages take the Clarity Writers
   values. Page ground #fdfcfc (the top nav colour), ink #0a0e1c, body text 80% ink at
   15px, headings on the site scale (h1 600, h2 and h3 500, -0.025em), 24px cards,
   pill buttons. Backup _archive/file-backups/consistency.pre-site-styles.css. */
:root {
  --c-bg: #fdfcfc;
  --c-ink: #0a0e1c;
  --c-ink-2: rgba(10, 14, 28, 0.8);
  --c-ink-3: rgba(10, 14, 28, 0.6);
  --fs-base: 15px;
  --track-tight: -0.025em;
  --site-h1: clamp(1.5rem, 2.2vw, 2rem);
  --site-h2: clamp(1.15rem, 1.5vw, 1.35rem);
  --site-h3: clamp(1.05rem, 1.2vw, 1.15rem);
}
html, body { background: #fdfcfc; }
body { font-weight: 400; }

main h1,
.opening h1 { font-size: var(--site-h1) !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; }
main h2,
#tools h2,
.capability__copy h2,
.cta-illustrated h2 { font-size: var(--site-h2) !important; font-weight: 500 !important; line-height: 1.04 !important; letter-spacing: -0.025em !important; }
.use-case__body h3,
.value-card h3,
.workflow__branch h3,
.comparison-card h3,
.security-summary__card h3 { font-size: var(--site-h3) !important; font-weight: 500 !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; }

.security-summary__card,
.value-card,
.use-case,
.comparison-card { border-radius: 24px; }
.use-case__body h3 a::after { border-radius: 23px; }
.btn { border-radius: 100px; }
.foot { background: #fdfcfc; }

/* Security section (8 Nov 2026, Jordan), after the main site's writing bento: grey
   cards, a plain white icon tile with a dark line icon, the heading as a small grey
   label and the sentence in dark ink, both at the foot of the card. Content and the
   two illustrations are unchanged. */
.security-summary__card {
  background: #f4f4f3 !important;
  border: 1px solid #ebebe9 !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}
.security-summary__card--local { background: #fff radial-gradient(rgb(229, 232, 229) 0.65px, transparent 0.8px) 0 0 / 5px 5px !important; border-color: #e1e1de !important; }
.security-summary__card--feature { justify-content: flex-start; min-height: 13rem; }
.security-summary__card--feature .security-summary__copy { margin-top: auto; }
.security-summary__card--feature .security-summary__icon,
.security-summary__card--feature:nth-of-type(n) .security-summary__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #fff !important;
  border: 1px solid #e6e6e3;
  color: #0a0e1c !important;
  box-shadow: none !important;
}
.security-summary__card--feature .security-summary__icon svg { width: 18px; height: 18px; color: #0a0e1c; stroke: currentColor; }
.security-summary__grid .security-summary__card .security-summary__copy h3 {
  margin: 0 0 6px !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: rgba(10, 14, 28, 0.55) !important;
}
.security-summary__grid .security-summary__card .security-summary__copy h3 br { display: none; }
.security-summary__grid .security-summary__card .security-summary__copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #0a0e1c;
}

/* 8 Nov 2026, Jordan: the "Every tool uses the same documents" diagram sits on the
   page ground with no dotted frame around it. */
.workflow__canvas { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-inline: 0 !important; }
.workflow__canvas::before, .workflow__canvas::after { content: none !important; }

/* 8 Nov 2026, Jordan: the tools hero ("From source material to finished learning")
   is the first section, full width with the main site's hero inset, filling the
   screen under the top bar, with Book a demo and Watch video side by side. */
#tools.hero { --nav-h: 65px; min-height: calc(100svh - var(--nav-h)); padding: 0 clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) !important; display: flex; box-sizing: border-box; }
@media (max-width: 980px) { #tools.hero { --nav-h: var(--cw-bar, 64px); } }
#tools > .hero__canvas { width: 100% !important; max-width: none !important; margin: 0 !important; flex: 1; display: flex; align-items: center; justify-content: center; min-height: calc(100svh - var(--nav-h) - clamp(12px, 1.6vw, 20px)); }
#tools .hero__text { min-height: 0 !important; padding-block: 6rem !important; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.hero__actions .btn--ghost { background: #fff; }

/* 8 Nov 2026, Jordan: headings swapped so the top section holds the page's h1.
   The tools hero title keeps its two-tone look; the opening title stays left-aligned. */
.hero h1 span { color: var(--c-hero-muted); display: block; }
.opening h2 { text-align: left; text-wrap: initial; }

/* 8 Nov 2026, Jordan: the "Build better learning" heading sits level with the middle of the paragraph beside it. */
.opening__intro { align-items: center; }
.opening__intro h2 { margin: 0; }

/* Style guide fixes (8 Nov 2026, Jordan). Backup _archive/file-backups/consistency.pre-style-fixes.css */
/* 1. Section rhythm, as on the main site: big space above, little below. The tools hero
   and the full-screen capability section (#how) keep their own layout. */
:root { --sec-top: clamp(4.5rem, 8.5vw, 8rem); --sec-bottom: clamp(1.25rem, 2vw, 1.75rem); }
main > section:not(#tools):not(#how) { padding-top: var(--sec-top) !important; padding-bottom: var(--sec-bottom) !important; }
main > section.cta-illustrated:not(#tools):not(#how) { padding-bottom: var(--sec-top) !important; }
/* 2. Cards at 24px. */
.workflow__bank, .workflow__branch { border-radius: 24px !important; }
/* 3. The Clarity Bank card title on the heading scale: 500 weight, Inter, h2 size. */
.workflow__bank-title { font-family: var(--font-heading) !important; font-size: var(--site-h2) !important; font-weight: 500 !important; line-height: 1.04 !important; letter-spacing: -0.025em !important; }
.workflow__bank h3 { font-weight: 500 !important; }
/* 4. Standard body text at 80% ink. */
.use-case p, .use-case__body p, .faq__answer, .faq__answer p { color: rgba(10, 14, 28, 0.8) !important; }

/* 8 Nov 2026, Jordan: use-case card headings styled like the security cards (and the
   main site's writing bento): small grey label, sentence in dark ink. */
.use-cases__grid .use-case .use-case__body h3 {
  margin: 0 0 6px !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: rgba(10, 14, 28, 0.55) !important;
}
.use-cases__grid .use-case .use-case__body h3 a { color: inherit; }
.use-cases__grid .use-case .use-case__body h3 br { display: none; }
.use-cases__grid .use-case .use-case__body p { font-size: 15px; line-height: 1.5; color: #0a0e1c !important; }

/* 9 Nov 2026, Jordan: section intros and two-column headers match the main site.
   Intros under section headings use the site's intro style (15px, weight 400,
   line height 1.7, grey #626672). The opening header splits into two equal
   columns with a 6rem gap and top alignment, like "See our eLearning in action". */
.opening__copy,
.workflow__intro > p,
.capability__copy > p,
#use-cases .wrap > div > p,
.security-summary__intro > p,
#faq .head > p.lede,
.cta-band__copy > p {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #626672 !important;
}
@media (min-width: 901px) {
  .opening__intro { grid-template-columns: 1fr 1fr !important; column-gap: 6rem !important; align-items: start !important; }
}

/* ===== Motion system (Nov 2026) ===== */
/* The same tokens as the main site's index.html. Use these, not new durations or curves.
   --motion is 0 under reduce motion (unless ?motion=1 set html.cw-motion-on) and under
   ?motion=0 (html.cw-motion-off), which zeroes every duration and rise. motion-gate.js
   sets the classes. Plan: mockups/motion-plan.md, Phase 4. */
:root {
  --motion: 1;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-std:   cubic-bezier(0.2, 0, 0, 1);
  --dur-xs: calc(120ms * var(--motion));
  --dur-s:  calc(180ms * var(--motion));
  --dur-m:  calc(260ms * var(--motion));
  --dur-l:  calc(480ms * var(--motion));
  --dur-xl: calc(700ms * var(--motion));
  --rise-s: calc(8px  * var(--motion));
  --rise:   calc(16px * var(--motion));
  --rise-l: calc(24px * var(--motion));
  --stagger: 60ms;
  --lift: -2px; --press: 0.98; --zoom: 1.03;
}
@media (prefers-reduced-motion: reduce) { html:not(.cw-motion-on) { --motion: 0; } }
html.cw-motion-off { --motion: 0; }
@keyframes cw-fade-rise { from { opacity: 0; transform: translateY(var(--rise-s)); } }
@keyframes cw-settle { from { transform: translateY(var(--rise-s)); } }

/* FAQ: the answer fades and rises as it opens, as on the main site. Where the browser
   can animate to height auto (Chrome and Edge for now), the panel also opens smoothly;
   other browsers open it at once. */
.faq details[open] .faq__answer { animation: cw-fade-rise var(--dur-m) var(--ease-out); }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--dur-m) var(--ease-out), content-visibility var(--dur-m) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* 9 Nov 2026, Jordan: headings are one colour, as on the main site (no grey second line). */
.hero h1 span, .cta-illustrated h2 span { color: inherit !important; }
/* 9 Nov 2026, Jordan: use-case article text matches the main site body (15px, 80% ink). */
.use-case-page { font-size: 15px !important; }
.use-case-page :is(p, li) { color: rgba(10, 14, 28, 0.8); }
/* 9 Nov 2026, Jordan: buttons use Inter, as on the main site. */
.btn { font-family: 'Inter', system-ui, sans-serif !important; }

/* Page eyebrow above the h1, same as the main site's (9 Nov 2026, Jordan). */
.box-eyebrow { margin: 0 0 14px !important; font: 500 12px/1.2 var(--font-heading, "Inter", sans-serif) !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: #1257b0 !important; }

/* "One hub for learning designers" under the walkthrough video (9 Nov 2026,
   draft for Jordan's review; copy checks in copy-review.md). */
.box-hub__intro { max-width: 40rem; margin: 0 0 2rem; }
.box-hub__intro h2 { margin: 0 0 .75rem !important; }
.box-hub__intro p { margin: 0 !important; color: rgb(98, 102, 114) !important; line-height: 1.7 !important; }
.box-hub__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Matches the About page capability cards (.stack-cap). */
.box-hub__card { display: flex; flex-direction: column; padding: 18px 18px 20px; border-radius: 16px; background: rgb(244, 244, 243); }
.box-hub__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff; border: 1px solid rgb(227, 227, 225); color: rgb(10, 14, 28); box-sizing: border-box; }
.box-hub__icon .visual-icon { width: 18px; height: 18px; color: rgb(10, 14, 28); stroke-width: 1.75; }
.box-hub__card .box-hub__label { margin: auto 0 6.4px !important; padding-top: 40px; font: 400 14px/1.4 "Inter", var(--font-heading), sans-serif !important; letter-spacing: 0 !important; color: rgba(10, 14, 28, 0.55) !important; }
.box-hub__card p { margin: 0 !important; font-size: 15px !important; font-weight: 400; line-height: 1.45 !important; color: rgb(10, 14, 28) !important; }
@media (max-width: 1050px) { .box-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .box-hub__grid { grid-template-columns: 1fr; } }

/* Standard Clarity Writers CTA panel (9 Nov 2026, Jordan), copied from the
   main site's .site-cta .tbx-cta rules in index.html. If that panel changes,
   update this too. */
main > section.box-site-cta { padding: clamp(4rem, 8vw, 6.6rem) 0 1.5rem !important; background: none !important; }
.box-site-cta .tbx-cta { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; width: min(1152px, calc(100% - 2 * clamp(20px, 4vw, 64px))); min-height: 340px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.25rem); border: 0; border-radius: 24px; overflow: hidden; box-sizing: border-box;
  background: url("/assets/images/cta-figure.webp") right 7% bottom / auto 94% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 -.085'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px, radial-gradient(rgba(255, 255, 255, 0.22) 0.65px, transparent 0.8px) 0 0 / 5px 5px, radial-gradient(55% 90% at 100% 0%, rgba(255, 170, 120, 0.85), transparent 70%), radial-gradient(45% 80% at 72% 100%, rgba(240, 128, 184, 0.8), transparent 72%), radial-gradient(50% 90% at 40% 0%, rgba(123, 92, 214, 0.75), transparent 72%), linear-gradient(100deg, rgb(14, 47, 143) 0%, rgb(29, 79, 208) 32%, rgb(90, 79, 214) 58%, rgb(198, 107, 192) 82%, rgb(245, 160, 122) 100%) !important; }
.box-site-cta .tbx-cta__text { position: relative; z-index: 2; max-width: 33rem; }
.box-site-cta .tbx-cta__title { margin: 0 0 12px !important; color: #ffffff !important; font-family: "Inter", var(--font-heading), sans-serif !important; font-size: var(--site-h2) !important; font-weight: 500 !important; line-height: 1.04 !important; letter-spacing: -0.025em !important; }
.box-site-cta .tbx-cta__intro { margin: 0 !important; color: rgba(255, 255, 255, 0.92) !important; font-size: 18px !important; font-weight: 400; line-height: 1.65; }
.box-site-cta .btn-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.8rem; border-radius: 100px; border: 1px solid rgb(10, 14, 28); background: rgb(10, 14, 28); color: #ffffff !important; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; transition: background 180ms cubic-bezier(0.2, 0, 0, 1), border-color 180ms cubic-bezier(0.2, 0, 0, 1), transform 120ms cubic-bezier(0.22, 1, 0.36, 1); }
.box-site-cta .btn-pill:hover { background: #1979eb; border-color: #1979eb; }
.box-site-cta .btn-pill:active { transform: scale(0.98); }
.box-site-cta .btn-pill .arr { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; transform: rotate(-45deg); transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; }
.box-site-cta .btn-pill:hover .arr { transform: rotate(0deg) translateX(3px); }
@media (max-width: 880px) {
  .box-site-cta .tbx-cta { min-height: 0; background-size: auto 60%, 200px 200px, 5px 5px, auto, auto, auto, auto !important; background-position: right -20px bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; }
  .box-site-cta .tbx-cta__text { max-width: none; }
}

/* "Give designers more time to build" (#how): a shorter framed card on the
   fine dots, standard content width, portrait cropped at the bottom (9 Nov 2026). */
@media (min-width: 801px) {
  main > section#how.capability { height: auto; min-height: 0; padding: var(--sec-top, 6rem) 0 0; background: none; overflow: visible; }
  #how .capability__inner { box-sizing: border-box; width: min(1152px, calc(100% - 2 * clamp(20px, 4vw, 64px))); max-width: none; height: clamp(440px, 38vw, 540px); margin: 0 auto; padding: 0 0 0 clamp(2rem, 4vw, 3.5rem) !important; border: 1px solid #e1e1de; border-radius: 32px; overflow: hidden; background: #ffffff radial-gradient(rgb(229, 232, 229) 0.65px, transparent 0.8px) 0 0 / 5px 5px; }
  #how .capability__portrait img { inset: 6% auto auto -10%; height: 135%; width: 130%; }
}

/* Motion cards behind the #how portrait: brainstorm, team chat and module
   plan (9 Nov 2026, Jordan, after the old CTA's cards). Straight, not tilted.
   The resting state is the finished frame; motion only when allowed. */
.cap-cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#how .capability__portrait img { z-index: 2; }
.cap-card { position: absolute; width: clamp(170px, 17vw, 220px); border: 1px solid rgba(10, 14, 28, 0.08); border-radius: 14px; background: #ffffff; box-shadow: 0 2px 4px rgba(23, 24, 26, 0.04), 0 16px 36px rgba(23, 24, 26, 0.1); overflow: hidden; font-family: "Inter", var(--font-heading), sans-serif; }
.cap-card__bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid #eeede9; background: #fafaf9; }
.cap-card__bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9d9d6; }
.cap-card__bar span { margin-left: 6px; color: rgba(10, 14, 28, 0.6); font-size: 11px; font-weight: 500; }
.cap-card--ideas { top: 6%; left: 49%; }
.cap-card--chat { top: 30%; right: -64px; }
.cap-card--plan { bottom: 7%; left: 51%; }
.cap-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.cap-note { display: block; min-height: 46px; padding: 7px 8px; border-radius: 4px; color: #3b3a33; font-size: 10.5px; font-weight: 500; line-height: 1.3; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.cap-note--y { background: #fff0a3; }
.cap-note--b { background: #d7e8ff; }
.cap-note--p { background: #fbd9e8; }
.cap-note--g { background: #d8f2df; }
.cap-chat { display: grid; gap: 6px; padding: 10px; }
.cap-msg { max-width: 88%; margin: 0 !important; padding: 6px 9px; border-radius: 10px; font-size: 10.5px !important; line-height: 1.35 !important; }
.cap-msg--them { justify-self: start; border-bottom-left-radius: 3px; background: #f1f0ed; color: rgb(10, 14, 28) !important; }
.cap-msg--me { justify-self: end; border-bottom-right-radius: 3px; background: #1979eb; color: #ffffff !important; }
.cap-msg--typing { display: flex; gap: 3px; padding: 8px 10px; }
.cap-msg--typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(10, 14, 28, 0.35); }
.cap-plan { display: grid; gap: 6px; margin: 0; padding: 10px 12px 12px; list-style: none; }
.cap-plan li { display: flex; align-items: center; gap: 8px; margin: 0; color: rgb(10, 14, 28); font-size: 11px; font-weight: 500; }
.cap-plan b { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #1f8a4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 9px no-repeat; }
@media (max-width: 800px) { .cap-cards { display: none; } }

@keyframes cc-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cc-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes cc-n1 { 0%, 4% { opacity: 0; transform: scale(.85); } 8%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes cc-n2 { 0%, 10% { opacity: 0; transform: scale(.85); } 14%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes cc-n3 { 0%, 16% { opacity: 0; transform: scale(.85); } 20%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes cc-n4 { 0%, 22% { opacity: 0; transform: scale(.85); } 26%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes cc-m1 { 0%, 28% { opacity: 0; transform: translateY(6px); } 32%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes cc-m2 { 0%, 38% { opacity: 0; transform: translateY(6px); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes cc-m3 { 0%, 46% { opacity: 0; } 50%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes cc-p1 { 0%, 56% { opacity: .3; } 60%, 90% { opacity: 1; } 96%, 100% { opacity: .3; } }
@keyframes cc-p2 { 0%, 64% { opacity: .3; } 68%, 90% { opacity: 1; } 96%, 100% { opacity: .3; } }
@keyframes cc-p3 { 0%, 72% { opacity: .3; } 76%, 90% { opacity: 1; } 96%, 100% { opacity: .3; } }
@keyframes cc-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.cw-motion-off) .cap-card--ideas, html:not(.cw-motion-off) .cap-card--plan { animation: cc-float-a 7s ease-in-out infinite; }
  html:not(.cw-motion-off) .cap-card--chat { animation: cc-float-b 8s ease-in-out infinite; }
  html:not(.cw-motion-off) .cc-n1 { animation: cc-n1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
  html:not(.cw-motion-off) .cc-n2 { animation: cc-n2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
  html:not(.cw-motion-off) .cc-n3 { animation: cc-n3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
  html:not(.cw-motion-off) .cc-n4 { animation: cc-n4 14s cubic-bezier(.2,.7,.3,1) infinite both; }
  html:not(.cw-motion-off) .cc-m1 { animation: cc-m1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
  html:not(.cw-motion-off) .cc-m2 { animation: cc-m2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
  html:not(.cw-motion-off) .cc-m3 { animation: cc-m3 14s ease infinite both; }
  html:not(.cw-motion-off) .cc-m3 i { animation: cc-dot 1s ease-in-out infinite; }
  html:not(.cw-motion-off) .cc-m3 i:nth-child(2) { animation-delay: .15s; }
  html:not(.cw-motion-off) .cc-m3 i:nth-child(3) { animation-delay: .3s; }
  html:not(.cw-motion-off) .cc-p1 { animation: cc-p1 14s ease infinite both; }
  html:not(.cw-motion-off) .cc-p2 { animation: cc-p2 14s ease infinite both; }
  html:not(.cw-motion-off) .cc-p3 { animation: cc-p3 14s ease infinite both; }
}
html.cw-motion-on .cap-card--ideas, html.cw-motion-on .cap-card--plan { animation: cc-float-a 7s ease-in-out infinite; }
html.cw-motion-on .cap-card--chat { animation: cc-float-b 8s ease-in-out infinite; }
html.cw-motion-on .cc-n1 { animation: cc-n1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .cc-n2 { animation: cc-n2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .cc-n3 { animation: cc-n3 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .cc-n4 { animation: cc-n4 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .cc-m1 { animation: cc-m1 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .cc-m2 { animation: cc-m2 14s cubic-bezier(.2,.7,.3,1) infinite both; }
html.cw-motion-on .cc-m3 { animation: cc-m3 14s ease infinite both; }
html.cw-motion-on .cc-m3 i { animation: cc-dot 1s ease-in-out infinite; }
html.cw-motion-on .cc-m3 i:nth-child(2) { animation-delay: .15s; }
html.cw-motion-on .cc-m3 i:nth-child(3) { animation-delay: .3s; }
html.cw-motion-on .cc-p1 { animation: cc-p1 14s ease infinite both; }
html.cw-motion-on .cc-p2 { animation: cc-p2 14s ease infinite both; }
html.cw-motion-on .cc-p3 { animation: cc-p3 14s ease infinite both; }

/* The cards sit in the frame, not the portrait, so the chat card can hang
   over the frame's right edge; the portrait is cropped by its own figure. */
@media (min-width: 801px) {
  #how .capability__inner { position: relative; overflow: visible; }
  #how .capability__portrait { overflow: hidden; border-bottom-right-radius: 31px; }
}

/* Let the chat card hang past the frame without making the page scroll sideways. */
main > section#how.capability { overflow-x: clip !important; }
/* Inside a .wrap (tool pages), the panel takes the wrap's width so it lines up with the content. */
.box-site-cta .wrap > .tbx-cta { width: 100%; }

/* Buttons, option A (9 Nov 2026, Jordan), matching the main site: ink main
   button, soft grey second button, white main button on the gradient CTA. */
.btn--primary { background: #0a0e1c !important; border-color: #0a0e1c !important; color: #ffffff !important; }
.btn--primary:hover { background: #262b3b !important; border-color: #262b3b !important; }
.btn--ghost { background: #efefec !important; border-color: #efefec !important; color: #0a0e1c !important; box-shadow: none !important; }
.btn--ghost:hover { background: #e5e5e1 !important; border-color: #e5e5e1 !important; }
.box-site-cta .btn-pill { background: #ffffff !important; border-color: #ffffff !important; color: #0a0e1c !important; font-family: "Inter", sans-serif !important; letter-spacing: 0 !important; }
.box-site-cta .btn-pill:hover { background: #eef2ff !important; border-color: #eef2ff !important; }
.box-site-cta .btn-pill .arr { transform: none !important; }
.box-site-cta .btn-pill:hover .arr { transform: translateX(3px) !important; }

/* 9 Nov 2026, Jordan: on desktop the page edge matches the top bar's 64px side padding,
   so the logo lines up with the content at every width (was 40px below 1280px). */
@media (min-width: 981px) { :root:root { --gutter: 4rem; } }

/* ===== Phone fixes (9 Nov 2026) ===== */
/* Jordan approved the phone audit in mockups/phone-audit-20261109.md. Phone and tablet
   widths only, so desktop is unchanged. Item numbers are the audit's. Backup
   _archive/file-backups/box-pre-phone-fixes-20261109/. */

/* The main site's 24px phone gutter (was 20px). */
@media (max-width: 767px) { :root:root { --gutter: 24px; } }

/* Item 5: the CTA figure sits under the button on phones, so the text never runs over her. */
@media (max-width: 880px) {
  .box-site-cta .tbx-cta { padding: 32px 24px 196px; background-size: auto 184px, 200px 200px, 220px 220px, auto, auto, auto, auto !important; background-position: right 12px bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important; }
  .box-site-cta .tbx-cta__intro { font-size: 16px !important; line-height: 1.6; }
}

/* Item 16: the origami figure in "Give designers more time to build" no longer fills a
   whole screen on phones: full width, at most 55% of the screen tall. */
@media (max-width: 800px) {
  .capability { min-height: 0; }
  .capability__portrait { height: 55vh; height: 55svh; min-height: 0; max-height: 55vh; }
  .capability__portrait img { inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; }
}

/* Item 23: the security cards go to one column on narrow phones. */
@media (max-width: 480px) {
  .security-summary__intro h2 { max-width: none; }
  .security-summary__card--feature { grid-column: 1 / -1; min-height: 0; gap: 16px; }
}

/* Item 24: no tall gap between the icon and the label in small cards on phones. */
@media (max-width: 600px) {
  .box-hub__card .box-hub__label { margin-top: 16px !important; padding-top: 0; }
}

/* Item 28: no one-word last lines in headings on phones. */
@media (max-width: 980px) {
  main h1, main h2, .box-site-cta .tbx-cta__title { text-wrap: balance; }
}

/* Item 34: "Every tool uses the same documents" is left aligned on phones, like the
   other section heads. */
@media (max-width: 900px) {
  .workflow__intro { text-align: left; margin-left: 0; }
}

/* Item 35: mockup labels in the tool showcase are at least 11px on phones. */
@media (max-width: 900px) {
  .tt .tt__bar b, .tt .tt__pill, .tt .tt__row kbd { font-size: 11px; }
  .tt .tt__slide b, .tt .tt__alt b, .tt .tt__msg--bot small { font-size: 11px; }
}