/* home.css: the home pages' own look (/, /fr, /es), from the Copy room's "Home page v3" kit (css_v3.css, 2026-10-05), linked only from
   index.html, fr.html and es.html, after styles.css and before production.css (the kit's tested cascade: styles.css with this block at its
   end, then production.css). It is not in styles.css because /signup and /app also have <body class="clean"> and load styles.css: the .clean
   rules below (Metropolis everywhere, the large h1, line height 1.5, the button hover) would leak into them. Colours are the :root tokens of
   styles.css; the only copper is the bell's #B86B3A (founder, 2026-10-05). */
/* Home page v3 (2026-10-05). The website in the Diaz Industries look (founder, 2026-10-05: "use this", with the
   Diaz Industries type and colour sheets): Metropolis Bold for headings and Book (400) for text; Diaz Industries Blue
   #5B91A0 as the primary colour (buttons, selected, sliders); Dark Blue #455A60 for type; Light Blue #67BCB7 for
   live and answered; copper #B86B3A "in a subtle and elegant way": the bell, the markers of where you are (the
   current language, the chosen trade), the small labels, the step numerals and the line of the story. Square
   corners like the app's clean look. The wordmark stays CLEARTRILL in Outfit. Scoped to .clean (the home pages put
   it on <body>), so the web app keeps its look until its own word. */
@font-face{font-family:Metropolis;src:url('/assets/fonts/metropolis-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url('/assets/fonts/metropolis-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url('/assets/fonts/metropolis-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.clean{--blue:var(--primary);--blue-ink:var(--signal-ink);--dark:var(--strong);--copper-ink:#B86B3A;color:var(--ink);background:var(--paper)}
.clean,.clean *{font-family:var(--font-site)!important}
.clean .wordmark,.clean .cp .cp-logo{font-family:var(--font-mark)!important}

/* Type, after the sheet: Bold headings, Book text at 1.5, small labels in capitals with air between the letters. */
.clean h1,.clean h2,.clean h3,.clean blockquote,.clean .answer-slip>p,.clean .price-amount,.clean .value-result output,.clean .setup-steps li>span{font-weight:700;letter-spacing:-.01em}
.clean h1{font-size:clamp(46px,5.3vw,76px);line-height:1.06;letter-spacing:-.025em}
.clean h2{font-size:clamp(32px,3.3vw,48px);line-height:1.12}
.clean .closing-section h2{font-size:clamp(40px,5.4vw,76px);line-height:1.08}
.clean p,.clean li{line-height:1.5}
.clean .fine,.clean .example-label{line-height:1.6}
.clean .kicker,.clean .index,.clean .plan-label,.clean .paper-title,.clean .moment-time,.clean .origin-source{font-weight:700}
.clean .kicker{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
.clean .index,.clean .plan-label{font-size:13px;letter-spacing:.12em;color:var(--copper-ink)}
.clean .button{border-radius:2px;font-weight:700;letter-spacing:.01em}
.clean .button:hover{background:var(--dark);border-color:var(--dark)}
.clean .button.secondary{border-color:var(--dark);color:var(--dark)}
.clean .button.secondary:hover{background:var(--ground);color:var(--dark);border-color:var(--signal)}
.clean .text-button{color:var(--blue-ink)}

/* Copper, subtle: hairlines and markers, never a block. */
.clean .status-dot{border-radius:0;background:var(--live)}
.clean .answer-slip{border-top:1px solid var(--copper)}
.clean .slip-heading{color:var(--blue-ink)}
.clean .voice-note{border-top:2px solid var(--copper)}
.clean .knowledge-paper{border-top-color:var(--copper)}
.clean .knowledge-seal{color:var(--blue-ink)}
.clean .conversation-paper,.clean .voice-note,.clean dialog{border-radius:2px}
.clean .profession-tabs button[aria-selected=true]{color:var(--dark);font-weight:700;box-shadow:inset 0 -2px 0 var(--copper)}
.clean .setup-steps li>span{color:var(--copper);font-weight:400}
.clean .closing-section h2>span{color:var(--signal)}
.clean .value-result output{color:var(--dark)}

/* Language bar: above the header at every width, each language named in its own words. */
.lang-bar{display:flex;justify-content:flex-end;align-items:center;gap:6px 18px;flex-wrap:wrap;min-height:40px;border-bottom:1px solid var(--line)}
.lang-bar a{display:inline-flex;align-items:center;min-height:40px;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-decoration:none;box-shadow:inset 0 -2px 0 transparent}
.lang-bar a[aria-current=true]{color:var(--dark);box-shadow:inset 0 -2px 0 var(--copper)}
.lang-bar a:hover{color:var(--dark)}

/* Hero: the fear line, the turn, the flow. */
.hero .lead strong{font-weight:700}
.hero-explainer strong{color:var(--ink);font-weight:600}
.answer-slip>p{font-size:26px;line-height:1.25}
@media(max-width:1150px){.answer-slip>p{font-size:23px}}
@media(max-width:640px){.clean .hero h1{font-size:clamp(34px,10vw,44px);line-height:1.08}.answer-slip>p{font-size:23px}}

/* How it works: one icon chip per step, the app's icons in the Diaz Industries blues. */
.how-chip{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:2px;margin-bottom:22px}
.how-chip svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter}
.how-chip--copper{background:var(--info);color:var(--on-info)}
.how-chip--live{background:var(--live);color:var(--on-live)}
.how-chip--blue{background:var(--chip-strong);color:var(--on-chip-strong)}
.channel-icon{display:flex;align-items:center}
.channel-icon svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter}

/* Our story: six beats on a copper line, the climax set large. */
.origin-layout .story-lede{font-size:22px;line-height:1.5;color:var(--ink);margin-top:30px;max-width:460px;text-wrap:pretty}
.story-beats{list-style:none;margin:0;padding:0;border-left:1px solid var(--copper)}
.story-beats li{position:relative;padding:0 0 32px 30px}
.story-beats li:before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;background:var(--copper)}
.story-beats li:last-child{padding-bottom:4px}
.origin-layout .story-beats p{color:var(--ink);font-size:19px;line-height:1.55;text-wrap:pretty}
.origin-layout .story-beats .beat-stamp{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-ink);margin-bottom:8px;line-height:1.4}
.origin-layout .story-beats blockquote{font-size:30px;line-height:1.22;padding:0;margin:16px 0;color:var(--dark)}
.origin-layout .story-beats .beat-twist{font-size:24px;line-height:1.35;font-weight:700;color:var(--dark)}
@media(max-width:640px){.origin-layout .story-lede{font-size:20px;margin-top:22px}.story-beats li{padding-left:22px}.origin-layout .story-beats p{font-size:18px}.origin-layout .story-beats blockquote{font-size:26px}.origin-layout .story-beats .beat-twist{font-size:22px}}

/* The app section shows the app's Today screen as the app draws it (a picture, not controls): the clean look as
   built (2026-10-06): Metropolis, Dark Blue text, Needs you in Diaz Blue with a 19 px bold white label (large text: 3.5:1),
   Light Blue icon chips with a Dark Blue glyph (calls and live alike), Blue for texts and icons, the date block Dark Blue,
   the bell's copper #B86B3A on the counts and the current tab. One look for the app and the website (founder: "APP and website integration"). */
.cp{color:var(--ink);font-size:15px;line-height:21px;padding:2px 4px 0;text-align:left}
.cp svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter;flex:none}
.cp-top{display:flex;align-items:center;justify-content:space-between;height:40px}
.cp-note{display:inline-flex;align-items:center;gap:7px;color:var(--signal-ink);font-weight:700}
.cp-note svg{width:21px;height:21px;color:var(--signal)}
.cp-count{display:inline-block;min-width:21px;height:21px;padding:0 5px;box-sizing:border-box;border-radius:2px;background:var(--count-bg);color:var(--on-count);font-size:13px;line-height:21px;font-weight:700;text-align:center}
.cp-logo{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--wordmark)}
.cp-logo svg{width:20px;height:20px;stroke:none}
.cp-date{margin-top:6px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink)}
.cp-title{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.02em}
.cp-choose{display:flex;align-items:center;gap:8px;margin:6px 0 2px;color:var(--signal-ink);font-size:17px;line-height:24px;font-weight:700;white-space:nowrap}
.cp-choose svg{width:21px;height:21px;stroke-width:2;color:var(--signal)}
.cp-line{margin-top:8px;padding:12px 13px 13px;border:1px solid var(--line);border-radius:2px}
.cp-row{display:flex;align-items:center;gap:10px}
.cp-row strong{display:block;font-size:17px;line-height:22px}
.cp-row small{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--muted)}
.cp-row small i{width:7px;height:7px;background:var(--live)}
.cp-chip{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:2px}
.cp-chip svg{width:21px;height:21px}
.cp-chip.small{width:28px;height:28px}
.cp-chip.small svg{width:16px;height:16px}
.cp-dark{background:var(--chip-strong);color:var(--on-chip-strong)}
.cp-live{background:var(--live);color:var(--on-live)}
.cp-blue{background:var(--info);color:var(--on-info)}
.cp-btns{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
.cp-btns span{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border:1px solid var(--control);border-radius:2px;font-size:15px;font-weight:700}
.cp-btns svg{width:17px;height:17px;stroke-width:2.2}
.cp-btns .cp-pause svg{stroke:var(--signal)}
.cp-btns .cp-cover svg{stroke:var(--signal)}
.cp-needs{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:54px;padding:0 12px 0 14px;border-radius:2px;background:var(--primary);color:var(--on-primary);font-size:19px;line-height:24px;font-weight:700}
.cp-needs svg{width:22px;height:22px}
.cp-needs span{flex:1}
.cp-needs b{min-width:28px;height:28px;padding:0 7px;box-sizing:border-box;border-radius:2px;background:var(--count-bg);color:var(--on-count);font-size:15px;line-height:28px;text-align:center}
.cp-label{margin-top:16px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink)}
.cp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:7px}
.cp-tiles>span{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--line);border-radius:2px;font-size:13px;line-height:17px;color:var(--muted)}
.cp-tiles strong{font-size:26px;line-height:30px;color:var(--ink)}
.cp-next{display:flex;align-items:center;gap:10px;margin-top:7px;padding:7px 10px 7px 7px;border:1px solid var(--line);border-radius:2px}
.cp-day{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:2px;background:var(--strong);color:var(--on-strong);font-size:11px;line-height:13px;font-weight:700;letter-spacing:.06em}
.cp-day b{font-size:19px;line-height:21px;letter-spacing:0}
.cp-next>span:nth-child(2){flex:1;min-width:0}
.cp-next strong{display:block;font-size:15px;line-height:20px}
.cp-next small{font-size:13px;line-height:18px;color:var(--muted)}
.cp-next>svg{width:19px;height:19px}
.cp-tabs{display:grid;grid-template-columns:repeat(5,1fr);margin:16px -18px 0;height:60px;border-top:1px solid var(--line)}
.cp-tabs span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--tab);font-size:11px;line-height:13px;font-weight:600}
.cp-tabs svg{width:21px;height:21px;stroke-width:1.75}
.cp-tabs .on{color:var(--tab-current);font-weight:700;box-shadow:inset 0 3px 0 var(--copper)}
@media(max-width:900px){.cp-title{font-size:27px;line-height:32px}.cp-tiles strong{font-size:23px}.cp-tabs{margin-left:-14px;margin-right:-14px}}
@media(max-width:370px){.cp{font-size:14px}.cp-choose{font-size:15px}}
/* Small phones (render check 2026-10-06; the browser pass measures 320 px): the app's own rules at that size (the wordmark hides below 375 px,
   "Choose what Cleartrill handles" keeps one line only from 390 px), the picture shrinks inside its column, and the estimate scales down. */
@media(max-width:389px){.cp-choose{white-space:normal}}
@media(max-width:374px){.app-section>*{min-width:0}.cp-logo{font-size:0;gap:0}.value-result output{font-size:clamp(44px,16.5vw,64px)}}

/* Wraps (render check 2026-10-05): one line per menu item and button; balanced short lines. */
.site-header nav a,.site-header .button{white-space:nowrap}
.clean p,.clean li,.clean summary,.clean .knowledge-row strong,.clean .body-large,.clean .moment-grid p{text-wrap:pretty}
.clean h2,.clean h3,.clean blockquote,.clean .hero .fine,.clean .slip-foot span,.clean .section-heading p,.clean .hero-explainer{text-wrap:balance}