*{box-sizing:border-box;margin:0;padding:0} /* Colour tokens. The four "content" tokens below are pinned to WCAG AA against every background the site actually uses (--paper #FBF8F1, --cream #F5F0E5, --mist #FAF5EA and white); see docs/stress/04 §1.1 and 03 §H5/M1. Only lightness/alpha was changed — hues are the original navy/teal/gold. Recompute with tools-free python if you touch them: --faint rgba(11,43,60,.66) → 4.71:1 on cream (worst case), was .42 → 2.44:1 --teal-deep #0E7380 → 4.88:1 on cream, was #0F7A88 → 4.44:1 --price-accent #856502 → 4.79:1 on cream, was var(--mustard) #E8C547 → 1.48:1. 4.5 (not 3.0) because the "$" in `.big sup` is .32em of a font-size that clamps to 72px on phones = 23.04px, i.e. just UNDER the 24px large-text exemption. Picking a 3:1 gold would only pass on desktop. --mustard itself is unchanged: it is only used on navy now (8.78:1) and as the focus ring colour for dark sections. --focus is redefined per-section in responsive.css §2. --rule-ui (A-02, SC 1.4.11): --rule rgba(11,43,60,.14) composites to 1.31:1 on --paper and 1.39:1 on #fff, but an EMPTY input's border is the only thing that shows where the field begins and ends, and 1.4.11 wants 3:1 for that. .55 (not the .50 the audit suggested) because .50 lands on exactly 3.00:1 against --cream — no margin at all, and the calculator sits on cream. Measured composited: white 3.56 / paper 3.50 / cream 3.43 / mist 3.48. --rule itself is UNCHANGED and stays on decorative hairlines and separators, which 1.4.11 exempts. */ :root{color-scheme:light;--navy:#0B2B3C;--navy-deep:#061822;--teal:#1BA4B6;--teal-deep:#0E7380;--cream:#F5F0E5;--mist:#FAF5EA;--paper:#FBF8F1;--mustard:#E8C547;--ink:#0B2B3C;--dim:rgba(11,43,60,.68);--faint:rgba(11,43,60,.66);--rule:rgba(11,43,60,.14);--rule-soft:rgba(11,43,60,.08);--rule-ui:rgba(11,43,60,.55);--accent:var(--teal);--price-accent:#856502;--focus:var(--teal-deep);--maxw:1280px;--pad:clamp(20px,4vw,56px);--sans:'Instrument Sans','Instrument Sans Fallback',system-ui,sans-serif;--serif:'Instrument Serif','Instrument Serif Fallback',Georgia,serif;--display:var(--serif)} html[data-type="grotesk"]{--display:var(--sans)} html[data-type="grotesk"] .em{font-family:var(--sans);font-style:normal;font-weight:500;letter-spacing:-.04em} /* bare --teal is 2.63:1 on cream — the teal price variant must use the AA-safe deep teal */ html[data-price="teal"]{--price-accent:var(--teal-deep)} html{scroll-behavior:smooth} /* A-03 / SC 1.4.12: `overflow-x:hidden` USED TO BE HERE and it is deliberately gone. On that value propagates to the viewport, so the page could not be scrolled horizontally by any means — verified: with the WCAG text-spacing override at 375px, /es/fleet had documentElement.scrollWidth 422 but scrollLeft stayed pinned at 0 after both `el.scrollLeft=200` and `window.scrollTo(200,0)`. The overflowing half of the

was clipped and UNREACHABLE, which is a loss of content, not just a missing scrollbar. The real causes are fixed below (heading/long-token wrapping) and in the nav row; the decorative bleeds that this rule used to swallow are each clipped at their own section instead — .hero{overflow-x:clip} (mascot/sky), .cta{overflow:hidden} (van), .keyless{overflow:hidden} (phone glow). Re-verified with no net at all: 216 page/width combinations (9 page types x EN/FR/ES x 320/375/768/1100/1101/1280/1920/2560) and 126 more under the 1.4.12 override all report scrollWidth === clientWidth. DO NOT reinstate it to paper over a new overflow — fix the element that overflows. */ body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;text-wrap:pretty} a{color:var(--ink);text-decoration:none}a:hover{color:var(--teal-deep)} /* A-03 / SC 1.4.12 — display type must be able to break. `overflow-wrap:anywhere`, NOT `break-word`: only `anywhere` counts the break opportunity when the browser computes min-content, and min-content is what sizes the grid track the heading sits in. Measured on /es/fleet at 375px under the text-spacing override,

"Disponibilidad,": min-content 401.8px -> break-word 115.6px -> anywhere 40.1px; the page still overflowed by 41px with break-word at 320px and is clean with anywhere. Rendering at normal spacing is identical either way — both only break a word that cannot fit. `hyphens:auto` gives real hyphenated breaks instead of mid-word chops; every page already carries a correct `lang`, so FR/ES hyphenate properly. */ h1,h2,h3,.kicker,.lead,blockquote,.stat b,.big,.row .name,.ledger-note,.disclaimer{ overflow-wrap:anywhere;word-break:normal;hyphens:manual } /* hyphens stays MANUAL on purpose: `auto` hyphenated ordinary words at normal spacing ("not ear-ly, right on time" in the home lead). `overflow-wrap:anywhere` alone satisfies 1.4.12 — it only breaks a word that cannot fit. */ /* Long unbreakable tokens in running text — mostly e-mail addresses — are the other thing that forces a track past the viewport under the 1.4.12 override (measured: the `investors@aperiomobility.com` .arrow link pushed /contact 10px over at 320px). */ .arrow{overflow-wrap:anywhere} ::selection{background:var(--navy);color:var(--cream)} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .em{font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.01em} .kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .kicker b{color:var(--teal-deep);font-weight:600} h2{font-weight:500;font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance} h3{font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.2} .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--dim);max-width:52ch} .btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:6px;font:inherit;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-navy{background:var(--navy);color:var(--cream)}.btn-navy:hover{background:#123A4E;color:var(--cream)} .btn-cream{background:var(--cream);color:var(--navy)}.btn-cream:hover{background:#fff;color:var(--navy)} .btn-line{background:transparent;color:var(--ink);border-color:var(--rule)}.btn-line:hover{border-color:var(--ink);color:var(--ink)} .arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)} .arrow svg{transition:transform .25s}.arrow:hover svg{transform:translateX(4px)} .arrow:hover{color:var(--ink)} /* NAV */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--rule-soft)} /* Nav row sizing: every item is nowrap and the three gaps were tightened (32/30/22 → 28/24/18) so the FRENCH label set — the longest — fits on one line down to ~1067px. Without nowrap "Comment ça marche" and "Pour les entreprises" broke onto 2–3 lines and doubled the bar's height between 901 and ~1100px (03 §B3). Do not re-widen these gaps without re-measuring /fr and moving the burger breakpoint in responsive.css §6. */ /* A-03 / SC 1.4.12: `height:68px` was a FIXED height on a row of text. Under the WCAG text-spacing override the row's content grows (letter-spacing .12em + word-spacing .16em on "Book service" / "Agendar servicio") and a fixed height cannot absorb it. min-height keeps the 68px bar identical at normal spacing — measured 68px at 320/360/375/480/768/ 1100/1101/1280/1920 in all three languages, before and after — and simply lets it grow if a user's own spacing ever needs it. DO NOT add `flex-wrap:wrap` here. It was tried and reverted: the FR bar needs 1015px of the 1013px available at exactly 1101px (one pixel above the burger breakpoint, where the full desktop nav is still showing), so wrapping was allowed to trigger at NORMAL spacing and the bar silently became a 102px two-row block on /fr and /es. The row must stay on one line; the narrow-width shrink in responsive.css §6 is what absorbs the text-spacing growth instead. */ .nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:28px} .logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;letter-spacing:-.02em;white-space:nowrap} .logo-mark{width:28px;height:28px;background:var(--navy);color:var(--cream);border-radius:5px;display:grid;place-items:center;font-weight:700;font-size:16px;flex-shrink:0} .nav-links{display:flex;gap:24px;flex-shrink:0} .nav-links a{font-size:14.5px;font-weight:500;color:var(--dim);white-space:nowrap}.nav-links a:hover{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0} .nav-right .login{font-size:14.5px;font-weight:500;color:var(--dim)} .nav .btn{height:40px;padding:0 18px;font-size:14px} /* HERO */ .hero{padding:clamp(48px,7vw,104px) 0 0;overflow-x:clip} .hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end} .hero-copy>*{opacity:1} .hero-tag .dot{animation:pulse 2.2s 1.6s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(94,235,183,.2)}50%{box-shadow:0 0 0 7px rgba(94,235,183,0)}} .hero h1{font-weight:500;font-size:clamp(52px,7.4vw,112px);line-height:.94;letter-spacing:-.045em;margin:22px 0 28px} .hero h1 .em{color:var(--teal-deep)} .hero .lead{margin-bottom:36px} /* A-01 + A-02. The `--focus` reset is the important half: `.cta`/`.ph.dark` set --focus:var(--mustard) for their navy background, and because --focus is an INHERITED custom property the white address pill nested inside them was drawing a mustard ring on white at 1.68:1. The token is reset HERE, on the element that owns the light background, rather than in a list of "light things inside dark things" — a component that declares its own surface must declare the focus ring that goes with it, or the next component added inside a navy section re-opens this exact bug. Descendant beats inherited, so file order and specificity against responsive.css §2 are irrelevant. --teal-deep on #fff is 5.55:1. --rule-ui: see :root. */ .addr{display:flex;align-items:center;gap:8px;background:#fff;--focus:var(--teal-deep);border:1px solid var(--rule-ui);border-radius:8px;padding:6px 6px 6px 16px;max-width:560px;box-shadow:0 1px 0 rgba(11,43,60,.04),0 20px 50px -30px rgba(11,43,60,.35);transition:border-color .2s} .addr:focus-within{border-color:var(--navy)} .addr svg{color:var(--teal-deep);flex-shrink:0} .addr input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);height:44px} .addr input::placeholder{color:var(--faint)} .addr .btn{height:44px} .proof{display:flex;gap:28px;margin-top:22px;font-size:13.5px;color:var(--dim);flex-wrap:wrap} .proof b{color:var(--ink);font-weight:600} .hero-art{position:relative;aspect-ratio:4/4.6;border-radius:10px;overflow:hidden;background:var(--cream)} .hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%} .hero-art .mascot{display:none;object-fit:contain;object-position:center bottom;padding:8% 4% 0;background:linear-gradient(180deg,var(--cream),#EAE3D3)} html[data-hero="mascot"] .hero-art .photo{display:none}html[data-hero="mascot"] .hero-art .mascot{display:block} .hero-tag{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;background:rgba(6,24,34,.72);color:var(--cream);backdrop-filter:blur(12px);border:1px solid rgba(245,240,229,.14);border-radius:6px;padding:10px 14px;font-size:13px;line-height:1.3} .hero-tag .dot{width:7px;height:7px;border-radius:50%;background:#5EEBB7;box-shadow:0 0 0 3px rgba(94,235,183,.2)} /* .85, was .6 → 3.53:1 once composited over the chip's own rgba(6,24,34,.72). Not a live bug today (.hero-tag is display:none under data-hero="live", which every shipped page uses) — fixed so the photo/mascot hero variants are AA if they are ever switched on. */ .hero-tag span span{display:block;color:rgba(245,240,229,.85);font-size:11.5px} .hero-rule{margin-top:clamp(56px,7vw,110px);border-top:1px solid var(--rule)} /* HOW */ .how{padding:clamp(72px,8vw,128px) 0} .how .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:clamp(40px,5vw,72px)} .how .head .lead{justify-self:end} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)} .step{padding:32px 32px 0 0;border-right:1px solid var(--rule-soft);padding-right:36px} .step:last-child{border-right:0}.step+.step{padding-left:36px} .step .num{font-family:var(--display);font-style:italic;font-size:46px;line-height:1;color:var(--teal-deep);margin-bottom:56px} html[data-type="grotesk"] .step .num{font-style:normal;font-weight:500;letter-spacing:-.04em} .step h3{margin-bottom:10px} .step p{color:var(--dim);font-size:15.5px} .how-photo{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px} .how-photo .slot-a{aspect-ratio:16/9}.how-photo .slot-b{aspect-ratio:auto} .how-photo image-slot{width:100%;height:100%} /* INCLUDED — section-scoped. `.incl` is ALSO the class of the