/* alignment-v5.css — Fable (reviewer). Loads LAST on every route.
   Scope: one shared column rail, internal padding, wrapping, type floors,
   responsive geometry. No artwork, no interaction states, no copy.
   Every block cites the measurement that motivated it (1790 px viewport,
   see research/FABLE-V5-REVIEW.md). Selectors are kept as specific as the
   originals so nothing leaks into unrelated elements. */

/* ------------------------------------------------------------------ */
/* 0. Rail tokens. One column system for the whole page.               */
/*    Measured before: nav 355→1435 (1080), .container 275→1515 (1240), */
/*    hero + continuity copy at 6.5% = 116, platforms 30.               */
/* ------------------------------------------------------------------ */
:root{
  --rail-w:1240px;
  --rail-gutter:40px;
  --rail:min(var(--rail-w),calc(100% - 2*var(--rail-gutter)));
  --rail-edge:max(var(--rail-gutter),calc((100% - var(--rail-w))/2));
}
@media (max-width:800px){
  :root{--rail-gutter:20px}
}

/* 1. Body containers share the rail (was 1240 vs 1240-ish vs 1220). */
.container,.wc-inner,#confidence .container{
  width:var(--rail);
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}
.tr-media .container{max-width:none}

/* 2. Nav frame sits on the same rail as the content below it.        */
/*    Was 1080 wide, so the brand mark floated 80 px right of every H2. */
@media (min-width:801px){
  .site-nav,.site-nav.nav-shrunk{width:var(--rail)}
}

/* 3. Absolutely positioned compositions start on the rail too.        */
/*    Hero copy and continuity heading used left:6.5% (116 px at 1790, */
/*    83 px at 1280). Handoff cards now end on the rail's right edge.   */
@media (min-width:801px){
  .enso-copy{left:var(--rail-edge);width:min(40%,640px)}
  .continuity-heading{left:var(--rail-edge)}
  .handoff-cards{left:auto;right:var(--rail-edge);width:min(39%,600px)}
  .enso-scroll-hint{left:var(--rail-edge)}
}

/* ------------------------------------------------------------------ */
/* 4. Work-chat v5 side-by-side demo (measured 06-workchat-v5.png).     */
/* ------------------------------------------------------------------ */
/* Prompt card stopped at 900 px while the comparison ran the full     */
/* rail, leaving a ragged right edge above the two columns.            */
.wc-v5 .wc-prompt{max-width:none}
/* "Without memory" was stretched to the taller column and showed a    */
/* 180 px hole between its answer and its footer line. Let each card    */
/* take its natural height; the footer lines stay pinned inside each.  */
.wc-comparison{align-items:start}
.wc-before-answer{margin-bottom:28px}
/* Retrieval status line reserved 42 px + 24 px below, pushing the      */
/* first answer unit 60 px under the heading. Tighten to one rhythm.    */
.wc-retrieval{min-height:0;margin:-4px 0 18px}
/* Source cards: equalise the three text rows so the two cards align.  */
.wc-v5 .wc-source{gap:6px}
.wc-source strong{text-wrap:balance}
/* Footer note was centred under a left-aligned block.                 */
.wc-v5 .wc-foot{text-align:left}
/* Controls row: caption and buttons share one baseline.                */
.wc-v5 .wc-controls{align-items:center}

/* ------------------------------------------------------------------ */
/* 5. Type floors. Nothing a visitor must read sits under 12 px;        */
/*    nothing they must read as body sits under 16 px.                  */
/* ------------------------------------------------------------------ */
.enso-recall-label,.enso-recall-src-label{font-size:14px;letter-spacing:.04em}
.leader-badge{font-size:14px}
.faq-item .faq-answer{font-size:18px;line-height:1.65;max-width:62ch}
.faq-item summary{font-size:21px;line-height:1.35}
.enso-platforms p{font-size:17px}

/* ------------------------------------------------------------------ */
/* 6. Wrapping and measure.                                             */
/* ------------------------------------------------------------------ */
.section-lead,.wc-intro,.page-lead{max-width:62ch;text-wrap:pretty}
.section-title,.wc-title,.page-title,.enso-heading,.continuity-heading h2{text-wrap:balance}
.faq-item summary{padding-right:48px}
.faq-item summary::after{right:8px}

/* ------------------------------------------------------------------ */
/* 7. Button geometry: one height family.                               */
/*    Nav CTA and hero buttons are 44–48 px; wc controls 44; keep every */
/*    text button in that band with matching corner radius.             */
/* ------------------------------------------------------------------ */
.wc-toggle-btn,.wc-play,.wc-autoplay,.film-mode,.wc-tab{
  min-height:44px;
  border-radius:var(--radius-btn);
}

/* ------------------------------------------------------------------ */
/* 8. Responsive geometry (≤800). Pigment already restacks; this only   */
/*    keeps the new rail gutter consistent and stops full-bleed cards   */
/*    from touching the screen edge.                                    */
/* ------------------------------------------------------------------ */
@media (max-width:800px){
  .container,.wc-inner{width:var(--rail)}
  .continuity-heading,.handoff-cards{margin-left:var(--rail-gutter);margin-right:var(--rail-gutter)}
  .enso-copy{left:var(--rail-gutter);width:calc(100% - 2*var(--rail-gutter))}
  .wc-before,.wc-after{padding:20px}
  .wc-v5 .wc-prompt{padding:20px 22px}
  .faq-item summary{font-size:19px}
  .faq-item .faq-answer{font-size:17px}

  /* Mobile single column stacking for all homepage grids */
  #use-cases-home .signal-grid{grid-template-columns:1fr;gap:18px}
  #media .tr-media-grid{grid-template-columns:1fr;gap:24px}
  .evidence-stats{grid-template-columns:1fr;gap:16px}
  .knowledge-grid{grid-template-columns:1fr;gap:18px}
  #early-access .cta-grid{grid-template-columns:1fr;gap:32px}

  /* Work chat mobile optimization */
  .wc-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px;gap:8px}
  .wc-tabs::-webkit-scrollbar{display:none}
  .wc-tab{flex:0 0 auto;white-space:nowrap;font-size:14px;padding:8px 16px;min-height:44px}
  .wc-app-demo .wc-comparison{grid-template-columns:1fr;gap:28px}
  .wc-app-frame{border-radius:11px}
  .wc-followup{min-height:56px;padding:12px 14px}

  /* Continuity handoff single column stacking */
  .continuity{padding:56px 0 36px}
  .continuity-heading{margin:0 var(--rail-gutter)}
  .continuity-heading h2{font-size:clamp(28px,7vw,42px);line-height:1.1}
  .continuity-art{width:100%;max-width:420px;margin:16px auto 8px;display:block}
  .handoff-cards{margin:0 var(--rail-gutter);display:flex;flex-direction:column;gap:18px}
  .handoff-card{margin:0;border-radius:11px;padding:20px}
}

@media (max-width:480px){
  .wc-app-layout{grid-template-columns:52px minmax(0,1fr)}
  .wc-app-sidebar{padding:14px 4px;gap:10px}
  .wc-app-sidebar button{min-height:44px;min-width:44px;padding:6px 2px}
  .wc-app-sidebar .wc-client-logo{width:24px;height:24px}
  .wc-message-stream{padding:8px 12px 16px}
  .wc-user-message{padding:10px 14px;margin:0 0 16px 10px;font-size:15px}
  .wc-user-message p{font-size:15px;line-height:1.45}
  .wc-app-demo .wc-before-answer,.wc-app-demo .wc-unit,.wc-app-demo .wc-followup-reply{font-size:15px;line-height:1.5}
  .wc-composer{margin:0 10px 12px}
  .painting-footer .site-footer-inner{grid-template-columns:1fr 1fr;gap:26px 22px}
}

/* ================================================================== */
/* 9. Fixes from Alex's screenshots 1-6 (research/user-v5-feedback).   */
/* ================================================================== */

/* Screenshot 2 + 3: story cards had a 1px box with padding 26px 0, so  */
/* text touched the border; grid was 1.3fr/1fr with the third card     */
/* spanning both columns (2+1). Three equal cards, real inner padding, */
/* corner radius from the signal-card family.                          */
#examples .story-grid,#beyond .story-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
#examples .story-card,#beyond .story-card{
  padding:28px 28px 30px;
  border:1px solid #292d3226;
  border-radius:11px;
  background:#fffaf1b3;
  max-width:none;
}
#examples .story-card:last-child,#beyond .story-card:last-child{grid-column:auto;max-width:none}
#examples .story-card p,#beyond .story-card p{max-width:none}
#beyond .story-card{background:#f4f6f9b3}
/* Three across until they must stack; no 2+1 step in between. */
@media (max-width:900px){
  #examples .story-grid,#beyond .story-grid{grid-template-columns:1fr}
  #examples .story-card,#beyond .story-card{padding:22px 22px 24px}
}

/* Screenshot 1 + "headings still unaligned": four sections centred     */
/* their heading inside a left-anchored 940px box while every other    */
/* heading sits flush left on the rail. One rule: headings start on    */
/* the rail. (Resolution and platforms strip stay centred by design.)  */
#benchmarks .section-title,#benchmarks .section-lead,
#dashboard-film .section-title,#dashboard-film .section-lead,#dashboard-film .dashboard-note,
#media .section-title,#media .section-lead,
#faq .faq5-head,#faq .faq5-head .section-title,#faq .faq5-head .section-lead{
  /* !important only because index.html carries inline text-align/margin on these. */
  text-align:left!important;
  margin-left:calc(-1*var(--rail-lead,0px))!important;
  margin-right:auto!important;
}
#faq .faq5-head{max-width:820px;margin-bottom:40px}
#benchmarks .section-title{max-width:16ch}

/* Screenshot 5: use-cases page.                                        */
/* 3+1 grid → balanced 2x2. Pills → the 7px corner language of the new  */
/* buttons. Tags → 6px, 12px type. The uppercase category chip repeats */
/* the active filter tab in every card: hidden, measured savings kept. */
.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.uc-card{border-radius:11px;padding:26px 26px 24px}
.uc-tab,.uc-tab.on{border-radius:var(--radius-btn);font-size:15px;padding-inline:16px}
.uc-tag{border-radius:var(--radius-btn);font-size:14px;padding:4px 10px}
.uc-catchip{display:none!important}
.uc-ctop{justify-content:flex-end}
.uc-card h3{margin-top:0}
@media (max-width:800px){
  .uc-grid{grid-template-columns:1fr}
}

/* Use-cases hero: the archive folio is painted twice. The second copy  */
/* is an absolutely positioned img at the bottom of the page-hero      */
/* wrapper, which on this route also contains the card grid, so it sat */
/* under the last row of cards (measured: img 1074→1754 × 2076→2529,    */
/* card text overlap 341 × 161). Keep the intended copy above the      */
/* stats (.uc-hero-stats:before), drop the stray.                      */
.pigment-page-hero:has(.uc-hero)>img.page-ink-art{display:none}

/* App demo (work-app-v5): secondary chrome text floors. Sidebar labels */
/* and composer note were 11px, retrieval status 12px.                 */
.wc-app-demo .wc-composer-note,
.wc-app-demo [class*="sidebar"] span,
.wc-app-demo [class*="sidebar"] small,
.wc-app-demo [class*="rail"] span{font-size:14px}
.wc-app-demo .wc-retrieval-status,
.wc-app-demo [class*="titlebar"] span,
.wc-app-demo [class*="title"] small{font-size:14px}

/* Remaining off-rail headings measured after the pass above: media   */
/* (575) and early-access (324) centre their h2 without .section-title. */
#media h2,#media .section-lead,#media>.container>p,
#early-access h2,#early-access .section-lead,#early-access>.container>p{
  text-align:left!important;
  margin-left:calc(-1*var(--rail-lead,0px))!important;
  margin-right:auto!important;
}
#early-access .cta-row,#early-access .hero-actions,#early-access .resolution-actions{justify-content:flex-start}

/* Use-cases grid with exactly three visible cards (Research filter):    */
/* three equal columns, never 2+1. Four-card filters stay 2x2.           */
.uc-grid:has(>.uc-card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .uc-grid:has(>.uc-card:nth-child(3):last-child){grid-template-columns:1fr}
}

/* Phone (frames 18-22, 390 wide): the nav CTA wrapped to two lines      */
/* ("Get early / access") because pigment caps it at 100px under 420.   */
@media (max-width:420px){
  .site-nav-inner>.nav-cta{max-width:none;white-space:nowrap;font-size:14px;padding:8px 11px;line-height:1.2}
}

/* ------------------------------------------------------------------ */
/* v6 item 5. The Enso art runs wider than the nav, so copy boxed to   */
/* the nav rail read caged. Hero copy, the continuity heading and the  */
/* homepage section heads now start a touch LEFT of the rail on wide  */
/* screens; the lead shrinks to 0 when there is no room (<=1288px).    */
/* ------------------------------------------------------------------ */
@media (min-width:801px){
  :root{--rail-lead:clamp(0px,calc((100vw - var(--rail-w))/2 - 24px),56px)}
  .enso-copy,.enso-scroll-hint,.continuity-heading{left:calc(var(--rail-edge) - var(--rail-lead))}
  .reveal .section-title,.reveal .section-lead,
  .reveal>.container>.section-kicker,.reveal>.container>.eyebrow,
  .wc-inner>.wc-kicker,.wc-inner>.wc-title,.wc-inner>.wc-intro,
  #media .container>.section-kicker,#media .container>h2,#media .container>.section-lead{margin-left:calc(-1*var(--rail-lead))}
}

/* ------------------------------------------------------------------ */
/* v6 item 18. Touch widths: every control reaches 44px. Measured at   */
/* 390/768 (qa/v6-responsive.mjs): brand 35, motion 36, app buttons   */
/* 36-43, inline text links 18-26, footer logo 34, socials 42.         */
/* ------------------------------------------------------------------ */
@media (max-width:900px), (orientation: landscape) and (max-height: 500px){
  .site-brand,.footer-logo{min-height:44px;display:inline-flex;align-items:center}
  .nav-toggle{min-width:44px;min-height:44px}
  .enso-motion,.wc-app-restart,.wc-app-new,.wc-app-history,.footer-socials a{min-height:44px;min-width:44px}
  .wc-app-restart{display:inline-grid;place-items:center}
  .wc-foot a,.faq5-more a,.faq5-link,.tr-media-meta h3 a{display:inline-block;padding-block:12px}
  .tr-media-meta h3 a{padding-block:4px}
}
/* The FAQ head wrapper carries the lead; its title/lead inside must not shift a second time. */
@media (min-width:801px){ #faq .faq5-head{margin-left:0!important} #faq .faq5-head .section-title,#faq .faq5-head .section-lead{margin-left:calc(-1*var(--rail-lead))!important} }
/* Media head was a 640px centred box (zen.css:1399); it now starts on the rail like every other head. */
#media .tr-media-head{max-width:none;margin-left:0;margin-right:0;text-align:left}
/* Second tap pass (qa/v6-responsive.mjs after run): app restart 36px, footer list links 21px,
   footer author link 18px, minimal footer links 24px, media titles 29px at 768. Inline links
   inside running prose are left as inline text (WCAG 2.5.8 inline exception). */
@media (max-width:900px), (orientation: landscape) and (max-height: 500px){
  .wc-app-titlebar button,.wc-app-restart{width:44px;height:44px;min-width:44px;min-height:44px}
  .site-footer ul li a,.footer-bottom span a,.footer-minimal a{display:inline-block;padding-block:12px}
  .tr-media-meta h3 a{padding-block:12px}
}

/* ------------------------------------------------------------------ */
/* v6 final: homepage nav at 320. Measured (qa/v6-nav320.mjs): inner    */
/* 282px, brand 131 + CTA 139 + toggle 44 + gaps = 322 -> hamburger at  */
/* 300..344, off-screen. Brand and CTA compact so all three fit with    */
/* the toggle at a full 44x44 and 4px to spare.                          */
/* ------------------------------------------------------------------ */
@media (max-width:420px){
  .site-nav,.site-nav.nav-shrunk{width:calc(100% - 16px)}
  .site-nav-inner{padding:0 2px;gap:3px}
  .site-brand{font-size:14px;gap:4px;letter-spacing:-.01em}
  .brand-logo{width:22px;height:22px}
  .site-nav-inner>.nav-cta{font-size:14px;letter-spacing:-.015em;padding:8px 6px;min-height:44px}
  .nav-toggle{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;display:flex}
}
@media (max-width:350px){
  .site-nav-inner{gap:2px}
  .site-nav-inner>.nav-cta{padding:8px 5px}
}
/* Homepage benchmark table (586px) gets its own scroll container instead of forcing the page wide. */
#benchmarks .table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
#benchmarks .table-scroll table{min-width:560px}

/* ------------------------------------------------------------------ */
/* v6 round 2 (Fable).                                                 */
/* F1 early-access: both columns share one top edge; the cranes stop   */
/* floating and anchor under the cards as a closing flourish.          */
/* ------------------------------------------------------------------ */
#early-access .cta-grid{align-items:start}
#early-access .cta-grid h2{margin-top:0}
#early-access .cta-side{align-content:start}
#early-access .cta-art{order:9;margin:30px 0 0;width:min(100%,470px);height:auto;justify-self:start}
@media (max-width:800px){ #early-access .cta-art{justify-self:center;width:min(100%,360px)} }
/* F2 platform strip: eight items wrap as a tidy grid, 4 / 2 columns.  */
@media (min-width:801px){
  .enso-platform-list{display:grid;grid-template-columns:repeat(4,max-content);justify-content:center;column-gap:clamp(28px,4.5vw,72px);row-gap:28px}
}
@media (max-width:800px){
  .enso-platform-list{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px;max-width:420px;margin:0 auto}
  .enso-platform{grid-template-columns:30px auto;column-gap:10px;font-size:18px}
  .enso-platform small{font-size:14px;line-height:1.35}
}
/* F4 knowledge section: warm paper, three equal cards, art top-right.  */
.knowledge-section{background:#f0e7d8;position:relative;overflow:hidden}
.knowledge-section .container{position:relative}
.knowledge-section .section-title,.knowledge-section .section-lead{max-width:60%;position:relative;z-index:1}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px;position:relative;z-index:1}
.knowledge-card{padding:28px;background:#fffaf1b3;border:1px solid #292d321a;border-radius:11px}
.knowledge-card strong{display:block;font-size:22px;font-weight:550;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.knowledge-card p{font-size:17px;line-height:1.55;margin:0;color:var(--ink-soft)}
.knowledge-card:nth-child(2){background:#dbe5f0}
.knowledge-card:nth-child(3){background:#f5deb0}
.knowledge-art{position:absolute;right:-3%;top:-10px;width:36%;max-width:520px;height:auto;pointer-events:auto;z-index:0;transition:transform .45s ease}
@media(hover:hover){.knowledge-art:hover{transform:translateY(-8px) rotate(-2deg)}}
@media (max-width:1000px){ .knowledge-section .section-title,.knowledge-section .section-lead{max-width:none} .knowledge-art{position:relative;display:block;right:auto;top:auto;width:min(80%,420px);margin:-10px auto 0} .knowledge-grid{grid-template-columns:1fr} }
@media (min-width:1001px) and (max-width:1240px){ .knowledge-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .knowledge-card{padding:22px} }
/* Under 380px the two-column strip wraps "Claude Cowork" and its sub-label raggedly; one clean column instead. */
@media (max-width:380px){ .enso-platform-list{grid-template-columns:1fr;max-width:250px;gap:14px} .enso-platform{grid-template-columns:30px auto;column-gap:12px} .enso-platform small{margin-top:1px} }

/* ------------------------------------------------------------------ */
/* Text-legibility pass (2026-09-11). This sheet loads last on the     */
/* homepage, so these rules settle wrap/measure conflicts.             */
/* ------------------------------------------------------------------ */

/* #10 wc-tabs: equal 2x2 pills on phones instead of ragged wrap rows.
   (The ≤800px scroller above stays for 431–800px; grid wins under 430
   because this rule sits later in the sheet.) */
@media (max-width:430px){
  .wc-tabs{display:grid;grid-template-columns:1fr 1fr;overflow-x:visible;padding-bottom:0}
  .wc-tab{justify-content:center}
}
/* 431–800px keeps the single-row scroller; fade the edge so a cut pill
   reads as scrollable, same affordance as the benchmarks toc. */
@media (min-width:431px) and (max-width:800px){
  .wc-tabs{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),#0000);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),#0000);
  }
}

/* Homepage benchmark table: same right-edge scroll fade as the internal
   pages, only where the 560px table can actually overflow. */
@media (max-width:660px){
  #benchmarks .table-scroll{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),#0000);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),#0000);
  }
}

/* #16 readable measure. DM Sans' ch is ~0.8em wide, so 68ch measured
   ~105 real characters; 46ch lands ~70. */
.wc-foot{max-width:46ch}
.wc-after-value,.enso-promise{max-width:46ch}
@media (max-width:800px){
  .continuity-heading>p:not(.section-kicker){max-width:46ch}
}

/* Mobile hero (Alex 2026-09-12): crane cutout rose into the CTA buttons and the
   Pause-motion control sat on the enso. Both are secondary on phones; the enso
   reads best clean. Reduced-motion is already handled globally. */
@media (max-width: 800px) {
  /* Keep the heron visible on mobile, but lower + smaller so it sits inside the
     enso's upper-right and never rises into the CTA buttons. Pause-control hidden. */
  .enso-crane { top: 54%; left: 56%; width: 32%; }
  .enso-motion { display: none; }
}