/* Shared shell (announcement, navigation, footer) and the offer pages. Palette: white, paper, neutral black. */
:root{--pg-ink:#141416;--pg-muted:#4b5052;--pg-line:#16181621;--pg-paper:#f4f3ec;--pg-card:#f7f7f4;--pg-gut:clamp(20px,4.5vw,88px)}

/* announcement bar: one line of news, changed at each launch stage (tools/content.py, ANNOUNCE) */
.announce{background:var(--pg-ink);color:#fff;font-size:13px;line-height:1.35}
.announce a{display:flex;align-items:center;justify-content:center;gap:14px;padding:9px var(--pg-gut);text-align:center}
.announce span{opacity:.86}
.announce b{font-weight:600;white-space:nowrap;border-bottom:1px solid #ffffff80}
.announce a:hover b{border-bottom-color:#fff}

/* navigation */
.site-nav .nav-links a[aria-current="page"]{opacity:1}
.site-nav .nav-links a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.nav-signin{font-size:14px;font-weight:500;color:#1d1d1f;opacity:.72;padding:6px 2px;transition:opacity .2s}
.nav-signin:hover,.nav-signin[aria-current="page"]{opacity:1}
@media (max-width:1080px){
  .site-nav .nav-links{display:none}
  .site-nav{justify-content:space-between}
  .site-nav .menu-toggle{display:flex;font-size:0;gap:0;padding:8px 0}
  .site-nav .menu-symbol{width:22px}
}
@media (max-width:760px){.nav-signin{display:none}.announce{font-size:12px}.announce a{flex-direction:column;gap:3px;padding:8px 16px}}

/* buttons used on every page */
.pg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.button.ghost,button.button.ghost{background:transparent;color:var(--pg-ink);border:1px solid var(--pg-ink)}
.button.ghost:hover{background:var(--pg-ink);color:#fff;transform:none;box-shadow:none}
button.button{font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.pg-actions .button{border-radius:980px;padding:13px 22px;gap:10px;justify-content:center}
button.text-link{background:none;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:10px 0;cursor:pointer;color:inherit;font:inherit;font-size:14px;font-weight:500}

/* footer: brand block left, four link columns across the rest (the bare footer{} flex rule in editorial.css used to pack it left) */
.site-footer{background:#fff;border-top:1px solid var(--pg-line);padding:56px var(--pg-gut) 28px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr);gap:40px clamp(40px,6vw,112px);justify-content:stretch;align-items:start}
.ft-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px}
.ft-top .brand img{height:28px;width:auto}
.ft-company{margin:0;max-width:340px;font-size:15px;line-height:1.55;color:var(--pg-muted)}
.ft-company a{color:var(--pg-ink);border-bottom:1px solid #16181640;display:inline;min-height:0}
.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ft-cols h2{margin:0 0 6px;font:500 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6a6f74}
.ft-cols a,.ft-cols button{display:flex;align-items:center;min-height:36px;width:max-content;max-width:100%;margin:0;line-height:1.3;padding:0;background:none;border:0;font:inherit;font-size:14.5px;color:var(--pg-ink);text-align:left;cursor:pointer}
.ft-cols a:hover,.ft-cols button:hover{text-decoration:underline}
.ft-base{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--pg-line);padding-top:20px;font-size:12.5px;color:#6a6f74}
@media (max-width:1000px){.site-footer{grid-template-columns:minmax(0,1fr)}.ft-top{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.ft-company{max-width:520px}}
@media (max-width:760px){.ft-cols{grid-template-columns:1fr 1fr;gap:24px 18px}.site-footer{padding:44px 20px 24px}}

/* audiences band on the home page */
.pg-audiences{background:#fff;padding:clamp(48px,7vw,90px) var(--pg-gut);border-top:1px solid var(--pg-line)}
.aud-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border-top:1px solid var(--pg-ink)}
.aud-rows a{display:flex;flex-direction:column;gap:10px;padding:24px 28px 26px 0;border-right:1px solid var(--pg-line);transition:background .2s}
.aud-rows a+a{padding-left:28px}
.aud-rows a:last-child{border-right:0}
.aud-rows strong{font-size:clamp(19px,1.7vw,24px);line-height:1.25;letter-spacing:-.025em;font-weight:600;color:var(--pg-ink)}
.aud-rows em{font-style:normal;font-size:14px;font-weight:500;color:var(--pg-ink);border-bottom:1px solid currentColor;width:max-content;margin-top:auto}
.aud-rows em::after{content:"  →"}
.aud-rows a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (max-width:860px){.aud-rows{grid-template-columns:1fr}.aud-rows a,.aud-rows a+a{padding:22px 0;border-right:0;border-bottom:1px solid var(--pg-line)}}
.contact-actions{margin:22px 0 4px}
.contact-actions .button.ghost{color:#fff;border-color:#ffffff80}
.contact-actions .button.ghost:hover{background:#fff;color:var(--pg-ink)}

/* offer pages */
.sub-page{background:var(--pg-paper)}
.pg-kicker{display:block;font-size:12px;letter-spacing:.16em;color:var(--pg-muted)}
.pg-hero{padding:clamp(64px,10vw,140px) var(--pg-gut) clamp(56px,8vw,110px);background:radial-gradient(ellipse 70% 80% at 85% 0%,rgba(250,161,219,.18),transparent 60%),radial-gradient(ellipse 60% 70% at 100% 60%,rgba(25,170,227,.12),transparent 60%),var(--pg-paper)}
.pg-hero h1{margin:18px 0 22px;font-size:clamp(46px,7.4vw,118px);line-height:.98;letter-spacing:-.065em;font-weight:600;max-width:15ch;text-wrap:balance}
.pg-hero h1 span,.pg-section h2 span,.pg-cta h2 span{color:var(--cl-red,#f50c0c)}
.pg-lead{margin:0 0 30px;max-width:640px;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#33393a}
.pg-section{padding:clamp(60px,8vw,120px) var(--pg-gut);border-top:1px solid var(--pg-line);background:var(--pg-paper)}
.pg-section.pg-white{background:#fff}
.pg-section h2{margin:14px 0 0;font-size:clamp(34px,4.4vw,66px);line-height:1;letter-spacing:-.055em;font-weight:600;text-wrap:balance}
.pg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 60px;margin-bottom:clamp(30px,4vw,54px)}
.pg-head p{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:var(--pg-muted)}
.pg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:start}
.pg-split>div>p{margin:20px 0 26px;max-width:520px;font-size:17px;line-height:1.6;color:var(--pg-muted)}
.pg-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pg-plan{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:20px;background:var(--pg-card);border:1px solid var(--pg-line)}
.pg-plan.featured{background:#fff;border:2px solid var(--pg-ink)}
.pg-plan .mono{font-size:11.5px;letter-spacing:.14em;color:var(--pg-muted)}
.pg-plan h3{margin:0;font-size:30px;letter-spacing:-.04em}
.pg-plan p{margin:0;font-size:15px;line-height:1.6;color:var(--pg-muted)}
.pg-plan ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px}
.pg-plan li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cl-green,#64a932);margin-right:10px;vertical-align:1px}
.pg-price{margin-top:auto;padding-top:18px;border-top:1px solid var(--pg-line);font-size:15px;font-weight:600}
.pg-plan .button{align-self:flex-start;border-radius:980px;padding:12px 20px}
.pg-badge{position:absolute;top:-12px;right:22px;padding:5px 12px;border-radius:980px;background:var(--pg-ink);color:#fff;font-size:12px;font-weight:600}
.pg-checks{margin:0;padding:0;list-style:none;display:grid;border-top:1px solid var(--pg-ink)}
.pg-checks li{position:relative;padding:18px 0 18px 36px;border-bottom:1px solid var(--pg-line);font-size:18px;line-height:1.45;letter-spacing:-.01em}
.pg-checks li::before{content:"";position:absolute;left:2px;top:21px;width:18px;height:18px;border-radius:50%;background:var(--cl-green,#64a932) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pg-note{padding:26px 28px;border-radius:18px;background:var(--pg-card);border-left:4px solid var(--cl-blue,#19aae3)}
.pg-note strong{display:block;font-size:17px;line-height:1.4}
.pg-note p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--pg-muted)}
.pg-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pg-steps li{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:3px solid var(--cl-red,#f50c0c)}
.pg-steps li:nth-child(2){border-color:var(--cl-pink,#faa1db)}.pg-steps li:nth-child(3){border-color:var(--cl-blue,#19aae3)}.pg-steps li:nth-child(4){border-color:var(--cl-yellow,#fbcb05)}.pg-steps li:nth-child(5){border-color:var(--cl-green,#64a932)}
.pg-steps .mono{font-size:12px;color:var(--pg-muted)}
.pg-steps h3{margin:0;font-size:23px;letter-spacing:-.035em;line-height:1.15}
.pg-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--pg-muted)}
.pg-steps .text-link{align-self:flex-start;margin-top:auto}
.pg-cards{display:grid;gap:16px}
.pg-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-cards article{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:20px;background:var(--pg-card);border:1px solid var(--pg-line)}
.pg-white .pg-cards article{background:var(--pg-card)}
.pg-section:not(.pg-white) .pg-cards article{background:#fff}
.pg-cards h3{margin:0;font-size:22px;letter-spacing:-.03em;line-height:1.2}
.pg-cards p{margin:0;font-size:15px;line-height:1.6;color:var(--pg-muted)}
.pg-cards .mono{font-size:11.5px;letter-spacing:.14em;color:var(--pg-muted)}
.pg-cards .text-link,.pg-cards button.text-link{align-self:flex-start;margin-top:auto}
.pg-dot{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 -2px 4px rgba(0,0,0,.18)}
.pg-list{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px;line-height:1.45}
.pg-list li{padding-left:16px;position:relative}
.pg-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--pg-ink)}
.pg-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,60px);border-top:1px solid var(--pg-ink)}
.pg-figures div{padding-top:22px}
.pg-figures b{display:block;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.06em;font-weight:600}
.pg-figures span{display:block;margin-top:10px;font-size:16px;color:var(--pg-muted)}
.pg-small{margin:20px 0 0;font-size:13px;line-height:1.55;color:#6a6f74;max-width:720px}
.pg-faq{border-top:1px solid var(--pg-ink)}
.pg-faq details{border-bottom:1px solid var(--pg-line)}
.pg-faq summary{display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:17px;font-weight:500;cursor:pointer;list-style:none}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary span{font-size:22px;line-height:1;transition:transform .25s}
.pg-faq details[open] summary span{transform:rotate(45deg)}
.pg-faq p{margin:0 0 22px;max-width:640px;font-size:15.5px;line-height:1.65;color:var(--pg-muted)}
.pg-cta{padding:clamp(70px,9vw,130px) var(--pg-gut);background:var(--pg-ink);color:#fff;text-align:center}
.pg-cta h2{margin:0 auto 18px;font-size:clamp(38px,5.6vw,84px);line-height:1;letter-spacing:-.06em;font-weight:600;max-width:14ch}
.pg-cta p{margin:0 auto 30px;max-width:540px;font-size:17px;line-height:1.6;color:#c9cbcc}
.pg-cta .pg-actions{justify-content:center}
.pg-cta .button{background:#fff;color:var(--pg-ink);border-color:#fff}
.pg-cta .button.ghost{background:transparent;color:#fff;border-color:#ffffff80}
.pg-cta .button.ghost:hover{background:#fff;color:var(--pg-ink)}
@media (max-width:1000px){.pg-plans,.pg-cards.three{grid-template-columns:1fr}.pg-cards.four,.pg-steps{grid-template-columns:1fr 1fr}.pg-split{grid-template-columns:1fr}}
@media (max-width:600px){.pg-cards.four,.pg-steps,.pg-figures{grid-template-columns:1fr}.pg-plan,.pg-cards article{padding:24px}.pg-checks li{font-size:16px}.pg-actions .button{flex:1 1 auto}}

/* logo: a little larger, centered on the letters (the descender of the p sits below the optical center) */
.header.site-nav .brand img{height:32px;width:auto;max-width:none;max-height:none;transform:translateY(8%)}
@media (max-width:760px){.header.site-nav .brand img{height:27px;width:auto}}

/* ================= home v2 (6 Oct 2026): one idea per section ================= */
/* offset and flexo posters: the word alone, a press-sheet register mark at the right edge */
.print-box{container-type:inline-size;--rm-inset:30px}
.process-pair .print-box{--rm-inset:28px}
.reg-mark{position:absolute;z-index:2;right:var(--rm-inset);top:50%;width:clamp(34px,10cqw,64px);height:auto;transform:translateY(-50%);color:#141416;pointer-events:none}
@media (max-width:1100px){.process-pair .print-box{--rm-inset:24px}}
@media (max-width:760px){.print-box{--rm-inset:25px}}

/* product in action: preset, measure, correct */
.loop-steps{list-style:none;margin:26px 0 6px;padding:0;display:grid;gap:4px;max-width:520px}
.loop-steps li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--pg-line,#e3e5e1)}
.loop-steps li:last-child{border-bottom:1px solid var(--pg-line,#e3e5e1)}
.loop-steps .ls-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--c) 16%,#fff);color:#141416}
.loop-steps .ic{width:30px;height:30px}
.loop-steps .ic .cl-tint{fill:var(--c);opacity:.55}
.loop-steps .ls-t{display:flex;flex-direction:column;gap:3px}
.loop-steps b{font-size:18px;letter-spacing:-.02em;color:#141416}
.loop-steps b i{font-style:normal;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:#6a6f74;margin-right:6px;vertical-align:2px}
.loop-steps .ls-t>span{font-size:15px;line-height:1.5;color:var(--pg-muted,#5b6064)}

/* in the pressroom: real photo, published figures, source line */
.home-results{background:#f6f6f2}
.hr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:center}
.hr-photo{margin:0;position:relative}
.hr-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:22px}
.hr-photo figcaption{margin-top:10px;font-size:13px;color:#6a6f74}
.hr-copy h2{font-size:clamp(38px,3.8vw,60px);line-height:1;letter-spacing:-.05em;margin:0 0 28px}
.hr-copy h2 span{color:#64A932}
.hr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 26px;padding:0}
.hr-stats div{border-top:2px solid #141416;padding-top:12px}
.hr-stats dt{font-size:clamp(26px,2.4vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#141416}
.hr-stats dd{margin:6px 0 0;font-size:14px;line-height:1.45;color:#5b6064}
.hr-day1{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.hr-day1 li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:#141416}
.hr-day1 li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:#64A932;box-shadow:inset 0 0 0 4px #e6f3dc}
.hr-source{margin:0;font-size:12.5px;line-height:1.5;color:#6a6f74;max-width:520px}
@media (max-width:900px){.hr-grid{grid-template-columns:1fr}.hr-stats{grid-template-columns:1fr 1fr 1fr;gap:12px}}
@media (max-width:520px){.hr-stats{grid-template-columns:1fr}.hr-stats div{display:flex;align-items:baseline;gap:12px}.hr-stats dd{margin:0}}

/* ColorConnect on the home page: ColorLoop and ColorConnect side by side, then the shop floor screen */
.cc-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 22px;max-width:620px}
.cc-duo>div{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:18px;background:#f6f6f2;border-top:4px solid #19AAE3}
.cc-duo>div:last-child{border-top-color:#64A932}
.cc-duo .mono{font-size:11px;letter-spacing:.14em;color:#6a6f74}
.cc-duo strong{font-size:22px;letter-spacing:-.03em;color:#141416}
.cc-duo p{margin:0;font-size:14.5px;line-height:1.5;color:#5b6064}
.home-page .connect-copy h2{font-size:clamp(38px,3.6vw,58px)}
@media (max-width:600px){.cc-duo{grid-template-columns:1fr}}

/* contact card: the secondary action sits under Book a demo */
.booking-card .booking-check{margin-top:10px;width:100%;justify-content:center}
/* hero: the secondary action reads as a light glass button over the halftone */
.hero-actions .button.ghost{background:rgba(255,255,255,.62);color:#141416;border:1px solid rgba(20,20,22,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-actions .button.ghost:hover{background:#fff;color:#141416}
/* from the pressroom floor (v3): the Imprimerie Berger case, then the published figures on their own row */
.home-results{background:#fff}
.hr-case{margin:0 0 18px;font-size:17px;line-height:1.65;color:#2b2f31;max-width:560px}
.hr-chips{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hr-chips li{padding:7px 12px;border-radius:999px;background:#f2f3ef;font-size:13px;font-weight:500;color:#141416}
.hr-watch{margin:0;font-size:14px;color:#5b6064}
.hr-watch a{color:#141416;font-weight:500;border-bottom:1px solid currentColor;margin-left:6px}
.hr-figures{margin-top:clamp(36px,5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--pg-line,#e3e5e1)}
.hr-figures .hr-stats{margin-bottom:14px}
.hr-photo img{aspect-ratio:4/3}
/* announcement bar: Rutherford.fr logo, then the switch message */
.announce{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);padding:0 var(--pg-gut)}
.announce .an-logo{display:inline-flex;align-items:center;padding:8px 0;flex:none}
.announce .an-logo img{height:18px;width:auto;display:block}
.announce .an-msg{padding:9px 0;padding-left:clamp(12px,2vw,22px);border-left:1px solid #ffffff40}
@media (max-width:760px){.announce{gap:12px;padding:0 16px}.announce .an-msg{flex-direction:column;align-items:flex-start;gap:2px;padding:7px 0 7px 12px;text-align:left}.announce .an-logo img{height:15px}}

/* videos: thumbnails from the Rutherford.fr YouTube channel, opened on YouTube */
.vid{display:flex;flex-direction:column;gap:10px;color:#141416;text-decoration:none}
.vid-th{position:relative;display:block;overflow:hidden;border-radius:18px;background:#e9eae6}
.vid-th img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.vid-s .vid-th{aspect-ratio:9/16}.vid-v .vid-th{aspect-ratio:16/9}
.vid-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(20,20,22,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s,background .3s}
.vid-play::after{content:"";position:absolute;left:23px;top:18px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid:hover .vid-th img,.vid:focus-visible .vid-th img{transform:scale(1.04)}
.vid:hover .vid-play,.vid:focus-visible .vid-play{transform:scale(1.08);background:#F50C0C}
.vid-t{font-size:14.5px;line-height:1.35;font-weight:500;display:flex;flex-direction:column;gap:2px}
.vid-t small{font:500 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6a6f74}
.hr-feat{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;max-width:560px}
.hr-reel{margin-top:clamp(40px,5vw,72px)}
.hr-reel-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.hr-reel-head h3{margin:0;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.hr-reel-nav{display:flex;gap:8px}
.reel-btn{width:44px;height:44px;border-radius:50%;border:1px solid #14141633;background:#fff;color:#141416;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.reel-btn:hover:not(:disabled){background:#141416;color:#fff}
.reel-btn:disabled{opacity:.3;cursor:default}
.vid-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;--vh:300px}
.vid-row::-webkit-scrollbar{display:none}
.vid-row .vid{flex:none;scroll-snap-align:start}
.vid-row .vid-s{width:calc(var(--vh) * 9 / 16)}.vid-row .vid-v{width:calc(var(--vh) * 16 / 9)}
.vid-row .vid-th{height:var(--vh)}
@media (max-width:900px){.hr-feat{max-width:none}}
@media (max-width:600px){.vid-row{--vh:240px;margin:0 calc(var(--pg-gut,16px) * -1);padding:0 var(--pg-gut,16px) 4px;scroll-padding:0 var(--pg-gut,16px)}.vid-row .vid-v{width:min(calc(var(--vh) * 16 / 9),82vw)}.vid-play{width:48px;height:48px;margin:-24px 0 0 -24px}.vid-play::after{left:19px;top:14px;border-left-width:14px;border-top-width:10px;border-bottom-width:10px}}

/* ================= mobile QA fixes (5 Oct 2026) ================= */
.quality-section{color:var(--pg-ink,#141416)}                                    /* Academy: "A grade. Not a guess." was white on light */
.agent-launcher.says-hi .al-bubble{pointer-events:none}                          /* the hello bubble never captures a tap */
.fit-map{--pg-gut:var(--gutter,20px)}                                             /* map cards bleed to the section gutter on the home page */
.site-footer{padding-bottom:104px}                                                /* room for the help agent under the last footer line */
.site-nav .menu-toggle{min-width:44px;min-height:44px;justify-content:center;padding:8px 11px;margin-right:-11px}
.site-nav .brand{min-height:44px;display:flex;align-items:center}
.ft-cols a,.ft-cols button{min-height:44px}
.booking-email{display:inline-block;padding:11px 0}
.cra-timeline a{display:inline-block;padding:14px 0}
.cookie-fun .cookie-dismiss{min-height:44px}
.pg-cta h2{text-wrap:balance}
#motion-toggle{white-space:nowrap}
.gate-print a{color:inherit;display:inline-block;padding:10px 0;border-bottom:1px solid currentColor}
/* look closer: a plain white ground under a masked grid (WebKit dithered the radial gradient into colored speckles) */
.loop-simple{background:#fff}
.loop-simple::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px) 0 0/48px 48px;-webkit-mask:radial-gradient(ellipse 60% 55% at 50% 60%,transparent 45%,#000 100%);mask:radial-gradient(ellipse 60% 55% at 50% 60%,transparent 45%,#000 100%)}
@media (max-width:760px){
  .cookie-notice.cookie-fun{bottom:10px}
  body:has(.cookie-notice:not([hidden])) .assistant-launcher{opacity:0;pointer-events:none}
  .aud-tiles{grid-template-columns:minmax(0,1fr)}
  .aud-tile em{width:auto;max-width:100%}
  .site-footer{padding:44px 20px 88px}
  .lt-row{flex-wrap:wrap}.lt-ref{flex:1 0 100%;order:-1}.lt-ref b{white-space:normal;font-size:11px}.lt-lab{font-size:9px}
}
/* announcement (v2): the Rutherford color ball leads the message */
.announce .an-msg{border-left:0;padding-left:0;gap:10px}
.announce .an-ball{width:18px;height:18px;flex:none}
@media (max-width:760px){.announce .an-msg{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:8px;row-gap:2px;text-align:center;padding:7px 0}.announce .an-ball{width:16px;height:16px}}
/* three videos under the Berger case: a row of three on desktop, a swipe row on phones */
.vid-row.vid-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.vid-row.vid-three .vid-v{width:auto}
.vid-row.vid-three .vid-th{height:auto}
@media (max-width:760px){.vid-row.vid-three{display:flex;overflow-x:auto}.vid-row.vid-three .vid-v{width:78vw}}
.home-results{--pg-gut:var(--gutter,20px)}                                         /* the video row bleeds to the section gutter */

/* newsletter sign-up (footer, test mode) */
.ft-news{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr);gap:16px clamp(40px,6vw,112px);align-items:start;padding:0 0 36px;margin-bottom:4px;border-bottom:1px solid var(--pg-line,#e3e5e1)}
.ftn-copy h2{margin:0 0 6px;font-size:22px;letter-spacing:-.03em;color:#141416}
.ftn-copy p{margin:0;font-size:14.5px;line-height:1.5;color:var(--pg-muted,#5b6064);max-width:340px}
.ftn-form{display:flex;flex-direction:column;gap:12px;max-width:640px}
.ftn-row{display:flex;gap:10px}
.ftn-email{flex:1;min-width:0}
.ftn-email input{width:100%;height:48px;padding:0 16px;border-radius:999px;border:1px solid #14141640;background:#fff;font:inherit;font-size:16px;color:#141416}
.ftn-email input:focus{outline:2px solid #141416;outline-offset:2px}
.ftn-row .button{height:48px;flex:none}
.ftn-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--pg-muted,#5b6064);cursor:pointer}
.ftn-consent input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#141416}
.ftn-consent a{color:#141416;border-bottom:1px solid currentColor}
.ftn-msg{margin:0;min-height:1.4em;font-size:14px;font-weight:500}
.ftn-msg[data-state="ok"]{color:#3f7a1d}.ftn-msg[data-state="err"]{color:#c40a0a}
.ftn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1000px){.ft-news{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.ftn-row{flex-direction:column}.ftn-row .button{width:100%}}
.ftn-row .button{justify-content:center}

/* ================= phone pass (5 Oct 2026, v11): iPhone 15, iPhone SE, 360px Android and landscape review =================
   Phone-only unless the same defect showed on desktop too (opaque header, Subscribe shape, text under 12px, access link). */
.nw{white-space:nowrap}                                                   /* product names, kicker labels, a heading's last word */
b.nw{font:inherit}

/* sticky header: opaque, the page no longer shows through it (no blur: Safari over the WebGL hero) */
.header.site-nav{background:#f4f3ec}
.header.site-nav.is-scrolled{background:#fafaf7}

/* one side margin on phones: the 24px gutter of the header and the home sections (19px at 360px and less) */
@media (max-width:760px){
  :root{--pg-gut:var(--gutter,24px)}
  .site-footer{padding-left:var(--gutter,24px);padding-right:var(--gutter,24px)}
}

/* tap targets of 44px */
@media (max-width:1080px){.site-nav .button.small{min-height:44px}}
@media (max-width:760px){
  .announce .an-msg{min-height:44px}
  .assistant-panel .assistant-close{width:44px;height:44px;margin-right:-10px}   /* wider tap area taken from the header padding, so the title keeps its width */
  .motion-control{min-height:44px}
}
.lb-root .lb-btn{width:44px;height:44px}

/* menu: opened by touch or mouse, the panel holds the focus (app.js) without a ring; from the keyboard Close keeps its ring */
.gate-panel:focus{outline:none}

/* newsletter: on phones the consent comes before Subscribe and the answer right under it; Privacy is a plain link after the sentence */
.ftn-consent label{cursor:pointer}
.ftn-consent a{display:inline;min-height:0;padding:0}
.ftn-row .button{border-radius:980px}
@media (max-width:520px){.ftn-row{display:contents}.ftn-email{order:1}.ftn-consent{order:2}.ftn-row .button{order:3}.ftn-msg{order:4}}

/* home hero: the loupe's color readout stays inside its card, and the loupe stays clear of "Pause animations" */
@media (max-width:760px){
  .loupe.counter .lt-lab{grid-template-columns:repeat(3,max-content);justify-content:space-between;column-gap:3px;letter-spacing:0}
  .home-page .hero-copy{padding-bottom:262px}
}
/* home hero buttons at 360px: two equal columns instead of two uneven rows */
@media (max-width:380px){.home-page .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.home-page .hero-actions .button{min-width:0;padding:14px 8px}}
/* home: "How it fits" breaks after the first sentence; the audience titles use the free space above the character */
#fit-title{text-wrap:pretty}
@media (max-width:760px){.aud-tile strong{margin-right:-70px}}
/* home: the contact section has the same space above and below */
@media (max-width:760px){.home-page .contact-section{padding-bottom:64px}}

/* real text at 12px or more */
.faq-section>div>.mono{font-size:12px;letter-spacing:.14em}
.vid-t small,.al-bubble small{font-size:12px}
.gate-print{font-size:13px}
.pg-plan .mono,.pg-cards .mono{font-size:12px}
@media (max-width:600px){
  .color-reel figcaption{font-size:13px}
  .color-reel figcaption .mono,.color-reason .mono,.evidence-grid .mono,.product-tag,.portal-feature .card-eyebrow,.makeready-note .mono,.cra-timeline .mono,.cra-timeline small{font-size:12px}
}

/* headings on phones: balanced lines, no word left alone */
@media (max-width:760px){
  main h1,main h2,main h3{text-wrap:balance}
  .pg-vcard p,.pg-compare-note,.pg-head p,.pg-lead{text-wrap:pretty}
}
@media (max-width:400px){
  .ai-copy h2{font-size:clamp(34px,10.2vw,44px)}
  #cra h2,#connect h2{font-size:clamp(30px,9.2vw,40px)}
}
/* illustration bands: on phones the label sits above the heading, like every other section */
@media (max-width:600px){.ill-band .pg-head{flex-direction:column-reverse;align-items:flex-start;gap:0}}
/* access: the help address reads as a link */
.pg-cards article p a{color:#141416;text-decoration:underline;text-underline-offset:3px}
/* touch screens: a tapped button does not stay lifted */
@media (hover:none){.button:hover{transform:none;box-shadow:none}}

/* help agent: the hello bubble wraps evenly; with touch, the bubble opens only from the hello (no hover state left after a tap) */
@media (max-width:760px){.al-bubble{max-width:210px;text-wrap:balance}}
@media (hover:none){.agent-launcher:hover:not(.says-hi):not(:focus-visible) .al-bubble{opacity:0;transform:translateY(6px) scale(.96)}}
/* help agent on phones: a little smaller and closer to the corner, so it covers less of the page (FAQ signs, line ends) */
@media (max-width:760px),(max-height:500px){.assistant-launcher.agent-launcher{right:8px;bottom:8px;width:52px;height:48px}.al-face{width:52px}.al-j{width:54px}}
/* Academy on phones: the agent waits until the page scrolls (it covered a lesson button on the first screen) */
@media (max-width:760px),(max-height:500px){.guide-page .site-nav:not(.is-scrolled) ~ .agent-launcher{opacity:0;visibility:hidden;pointer-events:none}}
/* assistant panel: grows with its content on phones; on landscape phones it uses the full height */
@media (max-width:760px){.assistant-panel{height:auto}}
@media (max-height:500px){.assistant-panel{inset:8px 8px 8px auto;height:auto;max-height:calc(100dvh - 16px)}}

/* Academy on phones: the live pressroom is a swipe row, the preset keys are lower, the illustration text is readable */
@container lb (max-width:439px){
  .guide-page .lb-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .guide-page .lb-grid>li{scroll-snap-align:start}
}
@media (max-width:600px){
  .guide-page .ps-unit .ps-keys{height:30px}
  .learning-visual text{display:none}
  .learning-visual>span{font-size:12px;max-width:none}
  .screen svg text{font-size:15px}
  .jn-pp .jn-qr{max-width:none}
  .jn-qr figcaption{max-width:none;flex:1}
}
@media (max-width:760px){.ft-top .brand{min-height:44px;display:inline-flex;align-items:center}.privacy-back{padding:10px 0}.booking-email{padding:12px 0}}

/* verifier follow-ups (5 Oct 2026): touch targets in landscape, Academy captions on phones, full reference name in the loupe readout */
@media (hover:none) and (pointer:coarse) and (min-width:761px){.announce .an-msg{min-height:44px}.nav-signin,.site-footer .ft-top .brand,.privacy-back{min-height:44px;display:inline-flex;align-items:center}.motion-control,#motion-toggle{min-height:44px}}
@media (max-width:760px){.journey-stage .stage-caption span,.job-ticket>.mono,.journey-controls .step-no,.solution-tabs .mono{font-size:12px}.stage-caption{flex-wrap:wrap;row-gap:4px}}
@media (min-width:761px){.lt-ref b{white-space:normal;overflow:visible;text-overflow:clip}}
/* announcement bar on one line on every phone (shorter message, 7 Oct 2026) */
@media (max-width:760px){.announce .an-msg{flex-wrap:nowrap;white-space:nowrap}}

/* hero film: play button and player */
.hero-film{display:inline-flex;align-items:center;gap:12px;margin:18px 0 0;padding:6px 16px 6px 6px;min-height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:inherit;font-size:15px;font-weight:500;color:#141416;cursor:pointer;transition:background .3s}
.hero-film:hover{background:#fff}
.hf-play{position:relative;width:34px;height:34px;border-radius:50%;background:#141416;flex:none}
.hf-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.hero-film:hover .hf-play{background:#F50C0C}
.film-dialog{padding:0;border:0;background:transparent;width:min(1200px,94vw);max-width:none;overflow:visible}
.film-dialog::backdrop{background:rgba(10,10,12,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-dialog video{display:block;width:100%;aspect-ratio:16/9;border-radius:clamp(10px,1.4vw,18px);background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.film-close{position:absolute;top:-52px;right:0;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#141416;font-size:26px;line-height:1;cursor:pointer}
html.film-open{overflow:hidden}
@media (max-width:760px){.hero-film{font-size:14px;margin-top:14px}.film-dialog{width:100vw}.film-dialog video{border-radius:0}.film-close{top:-56px;right:12px}}
.hero-film{pointer-events:auto;position:relative;z-index:3}                    /* the hero copy lets the pointer through to the loupe; the film button must catch it */

/* contact block: how the console check works (replaces the Demo / Compatibility / Proposal chips) */
.check-how{margin-top:30px;max-width:520px}
.check-how .mono{display:block;font-size:12px;letter-spacing:.14em;opacity:.7;margin-bottom:12px}
.check-how ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-how li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:15.5px;line-height:1.45}
.check-how li b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#141416;font-size:13px;font-weight:600}
.check-how a{color:inherit;border-bottom:1px solid currentColor;font-weight:600;display:inline;min-height:0}

/* ================= 7 Oct 2026: Check your press is the primary action; simple menu ================= */
.header-actions{gap:10px}
.header-actions .nav-demo{background:transparent;color:var(--pg-ink,#141416);border:1px solid rgba(20,20,22,.25)}
.header-actions .nav-demo:hover{background:#141416;color:#fff}
@media (max-width:760px){.header-actions .nav-demo{display:none}}
.check-how .check-cta{margin-top:22px;background:#fff;color:#141416;border-color:#fff}
.check-how .check-cta:hover{background:#FBCB05;border-color:#FBCB05;color:#141416}

/* simple menu: a side sheet, no letter animation */
#kinetic-menu.simple-menu{position:fixed;inset:0 0 0 auto;margin:0;padding:0;width:min(420px,100vw);max-width:none;height:100dvh;max-height:none;border:0;background:#fff;color:#141416;overflow:auto;box-shadow:-30px 0 80px -30px rgba(10,10,12,.35);transform:translateX(100%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
#kinetic-menu.simple-menu.is-open{transform:none}
#kinetic-menu.simple-menu::backdrop{background:rgba(12,14,16,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.simple-menu .gate-panel{display:flex;flex-direction:column;min-height:100%;padding:18px clamp(20px,5vw,32px) calc(28px + env(safe-area-inset-bottom,0px));outline:none}
.simple-menu .sm-top{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.simple-menu .sm-top .brand img{height:26px;width:auto}
.simple-menu .gate-close{display:grid;place-items:center;width:44px;height:44px;padding:0;margin-right:-8px;border:0;background:none;color:#141416;cursor:pointer}
.simple-menu .gate-close .menu-symbol{width:22px;height:22px}
.simple-menu .gate-close .menu-symbol i{top:10px;width:22px;height:2px;background:currentColor}
.simple-menu .gate-close .menu-symbol i:first-child{transform:rotate(45deg)}.simple-menu .gate-close .menu-symbol i:last-child{transform:rotate(-45deg)}
.simple-menu .sm-main{display:flex;flex-direction:column;margin-top:28px}
.simple-menu .sm-main a{display:block;padding:12px 0;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.15;color:#141416;border-bottom:1px solid #ececea}
.simple-menu .sm-main a:hover{color:#19AAE3}
.simple-menu .sm-more{display:flex;flex-direction:column;margin-top:22px}
.simple-menu .sm-more a{display:flex;align-items:center;min-height:44px;font-size:16px;color:#5b6064}
.simple-menu .sm-more a:hover{color:#141416}
.simple-menu .sm-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:28px}
.simple-menu .sm-actions .button{width:100%;justify-content:center;text-align:center}
.simple-menu .sm-mail{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;color:#5b6064}
@media (prefers-reduced-motion:reduce){#kinetic-menu.simple-menu{transition:none}}
html[data-motion="paused"] #kinetic-menu.simple-menu{transition:none}
@media (max-width:1100px){.site-nav .header-actions .nav-demo{display:none!important}}   /* Book a demo stays in the menu on smaller screens */
.site-nav .header-actions .button.small.nav-demo{background:transparent!important;color:#141416!important;border:1px solid rgba(20,20,22,.28)!important}
.site-nav .header-actions .button.small.nav-demo:hover{background:#141416!important;color:#fff!important}
.simple-menu .gate-close .menu-symbol i{transition:none!important}
.simple-menu .gate-close .menu-symbol i:first-child{transform:rotate(45deg)!important}
.simple-menu .gate-close .menu-symbol i:last-child{transform:rotate(-45deg)!important}
.simple-menu .gate-panel{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important;transform:none!important;opacity:1!important;background:#fff!important;border:0!important;box-shadow:none!important;clip-path:none!important;height:auto!important}
.simple-menu .gate-close .menu-symbol{transform:none!important}

/* ================= closing section: the free console check, the main call to action (dark), 7 Oct 2026 ================= */
#contact .ck-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"h p" "h c";column-gap:clamp(32px,6vw,110px);row-gap:28px;align-items:end;margin:clamp(36px,5vw,72px) 0 clamp(48px,6vw,96px)}
#contact .ck-hero h2{grid-area:h;margin:0;font-size:clamp(56px,8.2vw,136px);line-height:.92;letter-spacing:-.065em;font-weight:600;color:#fff}
#contact .ck-hero h2 span{color:#FBCB05}
#contact .ck-hero>p{grid-area:p;margin:0;font-size:clamp(18px,1.55vw,22px);line-height:1.5;color:rgba(255,255,255,.74);max-width:460px}
#contact .ck-cta{grid-area:c;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#contact .ck-start{min-height:64px;padding:0 44px;border-radius:999px;font-size:19px;font-weight:600;background:#fff;color:#141416;border:1px solid #fff;transition:background .25s,transform .25s}
#contact .ck-start:hover{background:#FBCB05;border-color:#FBCB05;transform:translateY(-2px)}
#contact .ck-demo{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.35)}
#contact .ck-demo:hover{color:#fff;border-bottom-color:#fff}
#contact .ck-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.16)}
#contact .ck-steps li{padding:clamp(24px,3vw,40px) clamp(16px,2.4vw,36px) 0 0}
#contact .ck-steps li+li{padding-left:clamp(16px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.16)}
#contact .ck-n{display:block;font:600 clamp(40px,4vw,64px)/1 Inter,system-ui,sans-serif;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55)}
#contact .ck-steps li:nth-child(1) .ck-n{-webkit-text-stroke-color:#19AAE3}#contact .ck-steps li:nth-child(2) .ck-n{-webkit-text-stroke-color:#FAA1DB}#contact .ck-steps li:nth-child(3) .ck-n{-webkit-text-stroke-color:#64A932}
#contact .ck-steps h3{margin:18px 0 8px;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.03em;color:#fff}
#contact .ck-steps h3 a{color:#fff;border-bottom:2px solid #FBCB05}
#contact .ck-steps p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.66);max-width:320px}
#contact .ck-foot{margin:clamp(40px,5vw,72px) 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.55);max-width:760px}
#contact .ck-foot a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
@media (max-width:900px){#contact .ck-hero{grid-template-columns:1fr;grid-template-areas:"h" "p" "c";align-items:start}#contact .ck-steps{grid-template-columns:1fr}#contact .ck-steps li,#contact .ck-steps li+li{padding:24px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.16)}#contact .ck-start{width:100%;justify-content:center}}

/* QR code in step 01: computers and tablets; click it or scan it */
#contact .ck-qr{display:none;align-items:center;gap:16px;margin-top:22px;padding:6px 14px 6px 6px;border-radius:18px;color:inherit;text-decoration:none;transition:background .25s}
#contact .ck-qr:hover,#contact .ck-qr:focus-visible{background:rgba(255,255,255,.07)}
#contact .ck-qr svg{width:92px;height:92px;flex:none;box-sizing:content-box;padding:7px;border-radius:12px;background:#f5f5f7;fill:#111113;transition:transform .25s}
#contact .ck-qr:hover svg{transform:scale(1.04)}
#contact .ck-qr-t{max-width:12em;font-size:15px;line-height:1.45;color:rgba(255,255,255,.6)}
#contact .ck-qr-t b{display:block;font-weight:600;color:#fff}
@media (min-width:768px){#contact .ck-qr{display:flex}}

/* ================= v3 (9 Oct 2026) ================= */
/* assistant: "About: ColorLoop Pack" when Request pricing names the plan (conversion.js) */
.assistant-panel .guide-about{display:inline-flex;align-items:center;min-height:28px;margin:0 0 12px;padding:0 12px;border-radius:999px;background:#f4f3ec;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#141416}
/* the help bubble is opaque at rest */
.al-bubble{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
/* 380 px and less (iPhone SE, 360 px Android): the header fits the width (it pushed every page 3 to 13 px wide) */
@media (max-width:380px){
  .header.site-nav{gap:12px}
  .header.site-nav .header-actions{gap:8px}
  .site-nav .header-actions .button.small{padding:9px 13px}
  .header.site-nav .brand img{height:24px}
}

/* ---------------------------------------------------------------- the red hero (12 Oct 2026, Hugues's idea): the same brand red anywhere
   in the world. The hero is one printed sheet in the target red, split into the 32 ink zones of the demo job; a scanning head crosses it
   (red-hero.js) and every zone it passes snaps to the target. White copy, one black button, the demo as a text link. */
.red-hero{--rh-bg:#e4100f;--rh-fg:#fff;--rh-dot:#141416;--rh-logo-filter:none;position:relative;overflow:hidden;background:var(--rh-bg);color:var(--rh-fg);transition:background .7s ease;padding:clamp(44px,5vw,64px) var(--gutter) clamp(44px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between}
.rh-zones{position:absolute;inset:0;display:flex;z-index:0}
.rh-zones i{flex:1 1 0;background:var(--off);transition:background .5s cubic-bezier(.16,1,.3,1)}
.rh-zones i.is-on{background:var(--rh-bg)}
.rh-zones i{transition:background .7s ease}
.rh-inner{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;text-align:center}
.red-hero .hero-copy{position:relative;max-width:860px;margin:0 auto;padding:0;pointer-events:auto}
.red-hero .eyebrow{justify-content:center;color:rgba(255,255,255,.82);margin-bottom:16px}
.red-hero .eyebrow .registration{color:#fff}
.red-hero .hero-copy h1{color:var(--rh-fg);font-size:clamp(40px,4.7vw,68px);line-height:1;letter-spacing:-.035em;margin:0 0 24px;max-width:none;text-wrap:balance}
.red-hero .hero-copy h1 .period{color:var(--rh-dot)}
.rh-word{display:inline-block;transition:opacity .22s ease,transform .22s ease}
.rh-word.is-out{opacity:0;transform:translateY(6px)}
.red-hero .hero-copy>p{color:var(--rh-fg);font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:58ch;margin:0 auto}
.rh-sheet{--f:1;position:relative;display:block;width:max-content;max-width:72%;height:clamp(84px,9.6vw,140px);margin:clamp(36px,4vw,52px) auto 0;transition:opacity .24s ease}
.rh-sheet.is-swapping{opacity:0}
.rh-logo{position:relative;display:block;height:100%;width:auto;max-width:100%;filter:var(--rh-logo-filter);-webkit-mask-image:linear-gradient(to right,#000 calc(var(--f)*100% - 14px),transparent calc(var(--f)*100% + 14px));mask-image:linear-gradient(to right,#000 calc(var(--f)*100% - 14px),transparent calc(var(--f)*100% + 14px))}
.rh-logo-soft{position:absolute;inset:0;height:100%;width:auto;display:block;filter:blur(7px) var(--rh-logo-filter);opacity:.7;-webkit-mask-image:linear-gradient(to right,transparent calc(var(--f)*100% - 14px),#000 calc(var(--f)*100% + 14px));mask-image:linear-gradient(to right,transparent calc(var(--f)*100% - 14px),#000 calc(var(--f)*100% + 14px))}
.rh-cta{margin-top:clamp(36px,4vw,52px)}
.red-hero .hero-actions{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:0}
.red-hero .hero-actions .button{margin:0;background:transparent;border:1px solid var(--rh-fg);color:var(--rh-fg);border-radius:0;padding-left:30px;padding-right:30px;transition:background .25s,color .25s}
.red-hero .hero-actions .button:hover{background:var(--rh-fg);border-color:var(--rh-fg);color:var(--rh-bg)}
.red-hero .hero-actions .button:active{transform:scale(.98)}
.red-hero .hero-demo{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;font-size:16px;font-weight:500;color:var(--rh-fg);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.red-hero .hero-demo:hover{text-decoration-thickness:2px}
.red-hero .hero-demo::after{display:none}
.red-hero .hero-call-note{margin-top:14px;padding:0;border:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.88);max-width:none}
.rh-scan{position:relative;width:100%;max-width:1100px;margin:clamp(24px,2.6vw,34px) auto 0;padding-bottom:8px}
.rh-track{--hw:64px;--p:0;position:relative;height:64px;cursor:pointer}
.rh-bar{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;display:flex;border-radius:2px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.1)}
.rh-bar i{flex:1 1 0}
.rh-head,.rh-readout{left:calc(var(--hw)/2 + (100% - var(--hw))*var(--p))}
.rh-head{position:absolute;top:50%;width:var(--hw);height:36px;transform:translate(-50%,-50%);background:#fff;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 -1px 0 rgba(0,0,0,.08);cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .16s var(--kt-out,cubic-bezier(.16,1,.3,1)),box-shadow .16s}
.rh-head svg{display:block}
.rh-head:hover{transform:translate(-50%,-50%) scale(1.04)}
.rh-head.is-grabbing{cursor:grabbing;transform:translate(-50%,-50%) scale(1.06);box-shadow:0 14px 30px rgba(0,0,0,.34)}
.rh-head:focus-visible{outline:2px solid #fff;outline-offset:4px}
.rh-readout{position:absolute;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.92);color:#141416;font:500 12px/1 var(--mono);letter-spacing:.04em;padding:8px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.14);transition:opacity .25s}
.rh-track.at-start .rh-readout{transform:translateX(calc(var(--hw)/-2))}
.rh-track.at-end .rh-readout{transform:translateX(calc(-100% + var(--hw)/2))}
.is-validated .rh-readout{opacity:0}
/* the win: confetti over the hero and a soft flash of the sheet */
.rh-confetti{position:absolute;left:0;top:0;width:1px;height:1px;z-index:4;pointer-events:none}
.rh-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:1}
html:not([data-motion="paused"]) .is-validated .rh-flash{animation:rh-flash .7s ease-out 1}
@keyframes rh-flash{0%{opacity:0}25%{opacity:.12}100%{opacity:0}}
/* the three faces hop: on arrival (is-greeting, red-hero.js) and on hover */
.red-hero .pf-chip-faces img{transition:transform .2s}
.red-hero .pf-chip:hover .pf-chip-faces img,.red-hero .pf-chip.is-greeting .pf-chip-faces img{animation:rh-face .7s cubic-bezier(.34,1.56,.64,1) 1}
.red-hero .pf-chip-faces img:nth-child(2){animation-delay:.08s}
.red-hero .pf-chip-faces img:nth-child(3){animation-delay:.16s}
@keyframes rh-face{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px) rotate(-5deg)}75%{transform:translateY(0)}}
.rh-hint{margin:8px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);text-align:center}
.red-hero .hero-trust{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0;margin-top:clamp(28px,3.2vw,40px);border:0}
.red-hero>.hero-footer{position:absolute;right:var(--gutter);bottom:14px;z-index:2;border:0;min-height:0;font-size:11px}
.red-hero .hero-trust .pf-chip{margin:0;background:transparent;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px;color:var(--rh-fg);opacity:.88}
.red-hero .hero-trust .pf-chip:hover{background:transparent}
.red-hero .hero-trust .pf-chip-t,.red-hero .hero-trust .pf-chip-t u{color:var(--rh-fg)}
.red-hero .hero-footer{border:0;min-height:0;font-size:11px}
.red-hero #motion-toggle{background:none;border:0;border-radius:0;padding:10px 0;color:rgba(255,255,255,.85);font-size:11px;letter-spacing:.04em}
.red-hero #motion-toggle:hover{color:#fff}
@media (max-width:900px){
  .red-hero{padding-top:28px;min-height:0}
  .red-hero .eyebrow{margin-bottom:18px}
  .red-hero .hero-copy h1{font-size:clamp(36px,10vw,48px);letter-spacing:-.03em;margin-bottom:16px}
  .red-hero .hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .red-hero .hero-actions .button{justify-content:center;min-height:56px}
  .red-hero .hero-demo{justify-content:center;align-self:center}
  .rh-scan{margin-top:56px;padding-bottom:0}
  .rh-track{--hw:60px;height:64px}
  .rh-head{height:36px}
  .red-hero .hero-trust{flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:32px}
  .red-hero .hero-trust .pf-chip{justify-content:center;text-align:center}
  .red-hero>.hero-footer{position:static;display:flex;justify-content:center;margin-top:24px}
  .rh-sheet{max-width:80%;height:clamp(64px,19vw,84px)}
  .rh-cta{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){.rh-zones i{transition:none}.red-hero,.rh-word,.rh-sheet{transition:none}.rh-flash{animation:none!important}.red-hero .pf-chip-faces img{animation:none!important}.red-hero .hero-actions .button,.red-hero .hero-demo{transition:none}}


/* ---------------------------------------------------------------- the quiz chip (12 Oct 2026): beside the stories line, a small A/B swatch whose
   guess ring hops from one half to the other while the pair changes ink, and the invitation to take the color test. Still with motion
   paused or reduced. */
.rh-quiz{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--rh-fg);text-decoration:none;font-size:14px;opacity:.88;line-height:1.3;transition:transform .2s var(--kt-out,cubic-bezier(.16,1,.3,1))}
.rh-quiz:hover{transform:translateY(-1px)}
.rh-quiz u{text-underline-offset:4px;text-decoration-thickness:1px}
.rh-quiz:hover u{text-decoration-thickness:2px}
.rh-quiz-eye{position:relative;flex:none;width:44px;height:28px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}
.rh-quiz-eye svg{display:block}
.rh-eye-iris,.rh-eye-glint{transform-box:fill-box;transform-origin:center}
html:not([data-motion="paused"]) .rh-eye-iris,html:not([data-motion="paused"]) .rh-eye-glint{animation:rh-eye-scan 3.2s cubic-bezier(.65,0,.35,1) infinite}
.rh-quiz:hover .rh-eye-iris,.rh-quiz:hover .rh-eye-glint{animation-duration:1.4s}
@keyframes rh-eye-scan{0%,12%{transform:translateX(-7px)}44%,56%{transform:translateX(7px)}88%,100%{transform:translateX(-7px)}}
@media (max-width:900px){.rh-quiz{justify-content:center;text-align:left;max-width:330px}}
@media (prefers-reduced-motion:reduce){.rh-eye-iris,.rh-eye-glint{animation:none!important}.rh-quiz{transition:none}}

/* ---------------------------------------------------------------- square buttons, site wide (Hugues, 12 Oct 2026): the look of the open menu
   everywhere. Buttons, the nav pair, the plan and action buttons, the newsletter form, the segmented controls and the quiz's own buttons
   lose their pill corners; badges, chips and the scanning head keep theirs. */
.button,body.kt main .button,.site-nav .button.small,.pg-plan .button,.pg-actions .button,.ftn-row .button,#contact .ck-start,.simple-menu .sm-actions .button,
body.page-color-guesser .cg .cg-next,body.page-color-guesser .cg .button,.ftn-email input,html.kt-js .kt-seg,.kt-seg button,.solution-tabs button{border-radius:0!important}
.site-nav .button.small{padding-left:18px;padding-right:18px}

/* ---------------------------------------------------------------- the press hero (13 Oct 2026): press footage printed live as a halftone,
   opened up. press-hero.js draws the four process screens at their real angles (cyan 15, magenta 75, yellow 0, black 45 degrees) over
   the footage, each dot sized by the ink coverage behind it. The field takes the right of the hero and bleeds off the top, the right and
   the bottom; its dots shrink to paper before the copy. The screens print in once (black, cyan, magenta, yellow, as on a four-color
   sheetfed press); as the hero leaves, the screen coarsens into "Printed color is made of dots". The halftone's geometry is set here:
   --ph-pitch (the screen ruling, in px) and --ph-soft (the dot-size vignette on the top, right, bottom and left edges, in px; 0 is a
   hard edge of whole dots, -1 bleeds), --ph-clear (the paper kept around the copy, in px). Still frame with reduced motion, ?static or
   html[data-motion="paused"]; a canvas 2D still without WebGL; the poster through a CSS dot screen without JavaScript. */
.press-hero{
  --ph-ink:#141416;--ph-text:#3b4043;--ph-quiet:#5b6064;--ph-out:cubic-bezier(.23,1,.32,1);
  --ph-copy:600px;--ph-gap:clamp(40px,5vw,88px);--ph-bleed:16px;
  position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,7vh,84px) var(--gutter) clamp(24px,3.6vh,40px)}
.ph-grid{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,7vh,72px);min-height:clamp(520px,calc(100svh - 100px - clamp(64px,10.6vh,124px)),740px)}

/* the copy: on paper, always; the field keeps --ph-clear of paper around it */
.press-hero .hero-copy{position:relative;z-index:1;padding:0;max-width:var(--ph-copy);pointer-events:auto;margin-block:auto}
.press-hero .hero-copy h1{font-size:clamp(44px,4.3vw,64px);line-height:1.02;letter-spacing:-.034em;font-weight:600;color:var(--ph-ink);margin:0 0 24px;max-width:none;text-wrap:balance}
.press-hero .ph-nw{white-space:nowrap}
.press-hero .hero-copy h1 .period{color:#F50C0C}
.press-hero .hero-copy>p{font-size:clamp(17px,1.32vw,19.5px);line-height:1.5;color:var(--ph-text);max-width:31em;margin:0;text-wrap:pretty}
.press-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.press-hero .hero-actions .button{margin:0;min-height:58px;padding:0 32px;gap:0;justify-content:center;background:var(--ph-ink);border-color:var(--ph-ink);color:#fff;font-size:16px;font-weight:500;letter-spacing:-.005em;box-shadow:none;transform:none;transition:background-color .2s ease,transform .16s var(--ph-out)}
.press-hero .hero-actions .button:hover{background:#2a2b2f;transform:none;box-shadow:none}
.press-hero .hero-actions .button:active{transform:scale(.98)}
.press-hero .hero-demo{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;font-size:16px;font-weight:500;color:var(--ph-ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.press-hero .hero-demo:hover{color:var(--ph-ink);text-decoration-thickness:2px}
.press-hero .hero-demo::after{display:none}
.press-hero :is(.hero-actions,.hero-trust) a:focus-visible{outline:2px solid var(--ph-ink);outline-offset:4px}
/* the site's older hero entrance (motion.css) never applies: the copy is there, still, from the first paint */
.press-hero .hero-copy>p,.press-hero .hero-actions,.press-hero .hero-copy h1{animation:none}

/* the two quiet lines: the Rutherford stories, the quiz */
.press-hero .hero-trust{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:30px}
.press-hero .hero-trust .pf-chip{margin:0;min-height:44px;background:transparent;border:0;padding:0;gap:12px;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px;color:var(--ph-quiet)}
.press-hero .hero-trust .pf-chip:hover{background:transparent}
.press-hero .hero-trust .pf-chip-t,.press-hero .rh-quiz-t{color:var(--ph-quiet);text-wrap:balance}
.press-hero .hero-trust u{white-space:nowrap}
.press-hero .hero-trust .pf-chip u{color:var(--ph-ink)}
.press-hero .hero-trust .pf-chip-faces img{width:26px;height:26px;border-width:1.5px;border-color:#f4f3ec}
.press-hero .hero-trust .pf-chip-faces img+img{margin-left:-8px}
.press-hero .rh-quiz{display:inline-flex;align-items:center;justify-content:flex-start;max-width:none;gap:12px;min-height:44px;color:var(--ph-quiet);opacity:1;text-decoration:none;font-size:14px;line-height:1.3}
.press-hero .rh-quiz:hover{transform:none}
.press-hero .rh-quiz u{color:var(--ph-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.press-hero .rh-quiz:hover u{text-decoration-thickness:2px}
.press-hero .rh-quiz-eye{width:62px;height:24px;margin-left:0;filter:none;display:flex;align-items:center}
.press-hero .hero-trust .pf-chip-faces{width:62px;flex:none}
.press-hero .rh-quiz-eye svg{display:block;width:38px;height:24px}
/* the eye looks once, when the screens have printed; then on hover. No idle loop beside the footage. */
html:not([data-motion="paused"]) .press-hero :is(.rh-eye-iris,.rh-eye-glint){animation:none}
html:not([data-motion="paused"]) .press-hero.is-printed :is(.rh-eye-iris,.rh-eye-glint){animation:ph-glance .9s cubic-bezier(.65,0,.35,1) .4s both}
@media (hover:hover) and (pointer:fine){html:not([data-motion="paused"]) .press-hero .rh-quiz:hover :is(.rh-eye-iris,.rh-eye-glint){animation:ph-eye 1.2s cubic-bezier(.65,0,.35,1) both}}
@keyframes ph-glance{0%,100%{transform:none}35%,62%{transform:translateX(6px)}}
@keyframes ph-eye{0%{transform:none}14%{transform:translateX(-6px)}78%{transform:translateX(6px)}100%{transform:none}}

/* ---------------------------------------------------------------- the field */
.ph-field{position:absolute;z-index:0;top:0;right:0;bottom:0;left:calc(var(--gutter) + var(--ph-copy) - 40px);margin:0}
.ph-stage{position:absolute;inset:0;--ph-pitch:10;--ph-soft:190 -1 160 260;--ph-clear:28;--ph-clear-soft:140}
/* the canvas reaches past the stage by a few dots, so a hard edge is made of whole dots */
.ph-canvas{position:absolute;left:calc(-1*var(--ph-bleed));top:calc(-1*var(--ph-bleed));width:calc(100% + 2*var(--ph-bleed));height:calc(100% + 2*var(--ph-bleed));display:block;pointer-events:none}
.ph-video{position:absolute;top:0;left:0;width:2px;height:2px;opacity:0;pointer-events:none}   /* WebGL reads the frames at their own size; 2 px keeps it out of LCP */
/* the poster: the texture's source (loaded, never drawn), and the fallback without JavaScript: seen through a dot screen, fading to paper */
.ph-poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
html:not(.kt-js) .ph-poster,.ph-field.ph-css .ph-poster{display:block;filter:contrast(1.3) saturate(1.35);
  -webkit-mask-image:radial-gradient(circle,#000 0 40%,transparent 50%),linear-gradient(90deg,transparent 0 18%,#000 46%);-webkit-mask-size:10px 10px,100% 100%;-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle,#000 0 40%,transparent 50%),linear-gradient(90deg,transparent 0 18%,#000 46%);mask-size:10px 10px,100% 100%;mask-composite:intersect}
.ph-field.ph-css .ph-canvas{display:none}

/* ---------------------------------------------------------------- the press band: a small label above, the eight makes */
.ph-band{position:relative;z-index:1;max-width:var(--ph-copy)}
.ph-band-t{margin:0 0 10px;font:500 12px/1.3 Inter,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--ph-quiet)}
.ph-marquee{position:relative;--ph-fade:44px}
.ph-track{display:flex}
.ph-set{display:flex;flex-wrap:wrap;align-items:center;gap:8px 40px;margin:0;padding:0;list-style:none}
.ph-set+.ph-set{display:none}
.ph-set li{flex:none;display:flex;align-items:center;height:30px}
/* each make in ink (#141416) at about 45 %, its optical weight evened out by --o; its own colors on hover */
.ph-logo{display:block;height:calc(var(--h) * 1px);width:auto;max-width:none;opacity:var(--o,.45);filter:brightness(0) invert(.08);transition:opacity .2s ease,filter .2s ease}
@media (hover:hover) and (pointer:fine){.ph-set li:hover .ph-logo{filter:none;opacity:1}}
/* the roll: html.ph-roll is set before the first paint when motion is allowed; press-hero.js drives it (it eases in, and eases to
   a stop under the pointer, with keyboard focus inside, off screen and in a hidden tab). Without it: a still, wrapped row. */
@media (prefers-reduced-motion:no-preference){
  html.ph-roll:not([data-motion="paused"]) .ph-marquee{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--ph-fade),#000 calc(100% - var(--ph-fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--ph-fade),#000 calc(100% - var(--ph-fade)),transparent)}
  html.ph-roll:not([data-motion="paused"]) .ph-track{width:max-content}
  @media (min-width:901px){html.ph-roll:not([data-motion="paused"]) .ph-marquee{margin-left:calc(-1*var(--ph-fade));width:calc(100% + var(--ph-fade))}}   /* the fade sits in the margin: the first whole logo lines up with the copy */
  html.ph-roll:not([data-motion="paused"]) .ph-set{flex-wrap:nowrap;column-gap:40px;padding-right:40px}
  html.ph-roll:not([data-motion="paused"]) .ph-set+.ph-set{display:flex}
}

/* ---------------------------------------------------------------- layout */
@media (min-width:901px) and (max-height:860px){
  .press-hero .hero-copy h1{font-size:clamp(44px,4.1vw,60px);margin-bottom:20px}
  .press-hero .hero-actions{margin-top:28px}
  .press-hero .hero-trust{margin-top:22px}
}
@media (min-width:901px) and (max-width:1180px){.press-hero{--ph-copy:500px}.press-hero .hero-copy h1{font-size:clamp(40px,4.6vw,52px)}}
@media (max-width:900px){
  .press-hero{padding-top:26px;padding-bottom:30px}
  .ph-grid{display:flex;flex-direction:column;justify-content:flex-start;gap:0;min-height:0}
  .press-hero .hero-copy{display:contents}
  .press-hero .hero-copy h1{order:1;font-size:clamp(34px,10.4vw,48px);letter-spacing:-.032em;margin-bottom:16px}
  .press-hero .ph-nw{white-space:normal}
  .press-hero .ph-nw .ph-nw{white-space:nowrap}
  .press-hero .hero-copy>p{order:2;font-size:17px;text-wrap:wrap}
  .press-hero .hero-actions{order:3;flex-direction:column;align-items:stretch;gap:2px;margin-top:22px}
  .press-hero .hero-actions .button{min-height:56px}
  .press-hero .hero-demo{justify-content:center;align-self:center}
  .ph-field{order:4;position:relative;left:auto;right:auto;top:auto;bottom:auto;height:clamp(250px,74vw,460px);margin:18px calc(-1*var(--gutter)) 0}
  .ph-stage{--ph-pitch:9;--ph-soft:40 -1 40 -1;--ph-clear:0}
  .press-hero .hero-trust{order:5;margin-top:22px}
  .ph-band{order:6;margin-top:30px;max-width:none;text-align:center}
  .ph-band-t{margin-bottom:6px}
  .ph-set{justify-content:center;column-gap:28px}
  html.ph-roll:not([data-motion="paused"]) .ph-set{column-gap:30px;padding-right:30px}
  .ph-marquee{--ph-fade:32px}
  .ph-set li{height:28px}
}
@media (min-width:600px) and (max-width:900px){.press-hero .hero-actions{flex-direction:row;align-items:center;gap:28px}.press-hero .hero-actions .button{min-width:260px}}
@media (max-width:380px){.press-hero .hero-trust .pf-chip,.press-hero .rh-quiz{font-size:13px}}

/* ---------------------------------------------------------------- still: reduced motion, paused */
@media (prefers-reduced-motion:reduce){.press-hero *{animation:none!important;transition:none!important}}
html[data-motion="paused"] .press-hero *{animation:none!important}

/* 320 px: the hero canvas bleed and the story glow below never widen the page (overflow-x:clip keeps sticky working) */
.press-hero,.hs-section{overflow-x:clip}

/* the quiz fills its box after the first paint: keep the room on desktop so the footer does not jump (CLS) */
@media (min-width:900px){body.page-color-guesser .cg[data-color-guesser]{min-height:min(680px,calc(100vh - 195px))}}
/* Academy, lesson 03 on dark: its kicker was 2.25:1 */
#ai-difference .section-kicker .mono{color:#a3a8aa}

/* Four photos. One answer.: the four photos of step 02 as their 3D zooms (20 Oct 2026), playing while on screen (app.js) */
#contact .ck-clips{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
#contact .ck-clips li{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#1b1c20;aspect-ratio:3/4;max-width:100%}
#contact .ck-clips video{display:block;width:100%;height:100%;object-fit:cover}
#contact .ck-clips span{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(20,20,22,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:14px;font-weight:600;line-height:1.2}
#contact .ck-clips b{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ck-dot,#19AAE3);color:#141416;font-size:12px}
#contact .ck-clips li:nth-child(2){--ck-dot:#FAA1DB}#contact .ck-clips li:nth-child(3){--ck-dot:#64A932}#contact .ck-clips li:nth-child(4){--ck-dot:#FBCB05}
@media (max-width:900px){#contact .ck-clips{grid-template-columns:repeat(2,minmax(0,1fr))}#contact .ck-clips span{font-size:13px;padding:7px 10px}}
/* the three main links sit at the exact center of the page: logo and actions take equal sides (20 Oct 2026) */
@media (min-width:1081px){.header.site-nav .brand,.header.site-nav .header-actions{flex:1 1 0;min-width:max-content}.header.site-nav .header-actions{display:flex;justify-content:flex-end}.header.site-nav .nav-links{flex:0 0 auto}}
/* ColorConnect on phones (20 Oct 2026, Valentina): the shop map is too dense on a small screen; the five step cards below tell the same story */
@media (max-width:759px){#how-it-works .sm-track{display:none}}