/* Reskin: brings the existing content pages into the one-pager's design language without
   touching their markup. Loaded AFTER css/styles.css, so it only has to override.
   Deliberately a reskin and not a rebuild: these pages carry ~3,000 words of ranking
   content across seven languages, and restructuring them is 42 pages of work plus 42
   pages of review. Typography, palette, spacing and controls are what make a page look
   like it belongs; the layout grid already does. */

:root{
  --ink:#102b3b; --teal:#244b63; --soft:#f1e4c8; --line:#d8d1c2;
  --muted:#52616b; --yellow:#f5ce61;
}

/* ---- typography: the two faces the one-pager uses --------------------------- */
body{font:400 16px/1.7 'DM Sans',system-ui,sans-serif;color:var(--ink);background:#fbf7ee}
/* Tracking is proportional (em), not absolute (px). It used to be -1.1px on h2
   and -0.6px on h3, which is right at display sizes but catastrophic once a
   page's own stylesheet shrinks a heading: measured h2 at 16.8px still carrying
   -1.1px (-6.5% of the em) on the product-overview path cards, and h3 at 16.3px
   with -0.6px on the research cards, where words visibly ran together
   ("Seea sample deployment"). In em the same optical tightness holds at 56px and
   releases automatically at 16px: -0.018em is -1.01px at 56px and -0.30px at
   16.8px. Found by an independent content audit; I had seen it in screenshots
   and wrongly written it off as a rendering artifact. */
h1,h2,h3,h4{font-family:Manrope,sans-serif;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
h1{font-size:clamp(36px,4.2vw,56px);line-height:1.14}
h2{font-size:clamp(28px,3.1vw,42px);line-height:1.16;letter-spacing:-.024em}
h3{font-size:22px;letter-spacing:-.02em}
h4{font-size:18px;letter-spacing:-.02em}
p{color:var(--muted);line-height:1.75}
a{color:var(--teal)}
/* paragraph links need a non-colour cue -- 1.4.1, the same rule the one-pager follows */
p a:not(.btn){text-decoration:underline;text-underline-offset:3px}

/* ---- rhythm ----------------------------------------------------------------- */
.container{width:min(1240px,calc(100% - 72px));margin:0 auto}
section{padding:72px 0}
.section-intro{font-size:17px;max-width:620px}
.section-subintro{font-size:16px;color:var(--muted);max-width:620px}

/* ---- controls --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 23px;
  border-radius:6px;font:700 14px/1.4 'DM Sans',sans-serif;border:1px solid var(--teal);
  color:var(--ink);background:transparent;transition:transform .2s}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary,nav.navigation a.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:5px}

/* ---- cards and lists -------------------------------------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:28px}
.feature-item{background:var(--soft);border:1px solid var(--line);border-radius:10px;
  padding:26px 26px 22px}
.feature-item.feature-accent{background:#fffdf8}
.feature-kicker{display:block;font:700 12px 'DM Sans',sans-serif;letter-spacing:1.9px;
  text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.feature-item ul{list-style:none;padding:0;margin:14px 0 0}
.feature-item li{padding:7px 0;font-size:15px;color:var(--muted)}
.feature-item li:before{content:'\2713';color:var(--teal);margin-right:10px}

/* ---- header and footer match the one-pager's chrome ------------------------- */
header{border-bottom:1px solid var(--line);background:#fffdf8}
nav.navigation a{font:600 14px 'DM Sans',sans-serif;color:var(--ink)}
nav.navigation a:hover{color:var(--teal)}
nav.navigation a[aria-current="page"]{color:var(--teal)}
.footer,footer{background:var(--ink);color:#c2d4da}
.footer a,footer a{color:#fff}

@media(max-width:800px){
  .container{width:calc(100% - 48px)}
  section{padding:52px 0}
}

/* ---- codex r30 HIGH-1: base styles.css:635 keeps white card text, but the reskin
   makes card backgrounds light -> 1.11:1. Override text, hover bg and hover colour. --- */
.feature-item,.pricing-item{background:var(--soft);color:var(--ink)}
.feature-item:hover,.pricing-item:hover{background:#fffdf8;box-shadow:0 14px 30px -18px rgba(16,43,59,.45)}
.feature-item h2,.feature-item h3,.pricing-item h2,.pricing-item h3,
.feature-item:hover h2,.feature-item:hover h3,
.pricing-item:hover h2,.pricing-item:hover h3{color:var(--ink)}
.feature-item p,.pricing-item p,.feature-item li,.pricing-item li{color:var(--muted)}

/* ---- codex r30 HIGH-2: nav toggle is white-on-white against the reskinned header -- */
.nav-toggle{border-color:#6f8691}
.nav-toggle-bar{background:var(--ink)}
.nav-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* ---- codex r30 LOW: reskin added motion with no reduced-motion escape ------------- */
@media(prefers-reduced-motion:reduce){
  .btn,.feature-item,.pricing-item{transition:none!important}
  .btn:hover,.feature-item:hover,.pricing-item:hover{transform:none!important}
}

/* ---- codex r34: translated labels overflow the max-content column at 320px ---- */
@media(max-width:560px){
  .shs-hero-facts dl{grid-template-columns:1fr;gap:4px 0}
  .shs-hero-facts dt{font-weight:700}
  .shs-hero-facts dd{margin:0 0 10px}
}

/* ---- codex r35 ---------------------------------------------------------------
   These pages carry their own <style> blocks LATER in the document than this
   linked sheet, so an unqualified rule here loses the cascade regardless of
   specificity. !important is the correct tool: the competing declarations are
   in-page author styles we cannot reorder without editing 90+ files. */
@media(max-width:820px){
  /* 1. definition lists keep max-content columns and overflow with translated labels */
  .shs-hero-facts dl,.shs-config dl{grid-template-columns:1fr!important;gap:4px 0!important}
  .shs-hero-facts dt,.shs-config dt{font-weight:700}
  .shs-hero-facts dd,.shs-config dd{margin:0 0 10px}
  /* 4. comparison cards stay 3-up and spill out of the viewport */
  .compare-fit,.compare-proof{grid-template-columns:1fr!important}
  /* 5. long translated strings must be allowed to wrap rather than widen the page */
  .shs-screenshots{grid-template-columns:1fr!important}
}
/* 5. nothing may establish a min-width wider than a 320px viewport */
@media(max-width:400px){
  [class*="grid"],[class*="cards"],[class*="cols"]{min-width:0}
  .shs-screenshots,.shs-steps,.shs-grid,.shs-benefits{grid-template-columns:1fr!important}
}
/* 6. the by-room prototype's wide tables need their own scroll context */
.by-room table,table.reservations,details table{display:block;overflow-x:auto;max-width:100%}
/* 7. the white logotype sits on a near-white reskinned header -- but NOT inside
   #ts-header, which is the DARK site chrome (#102b3b) where the white logotype is
   already correct. The #ts-header half of this selector matched nothing until the
   two /research/ pages adopted that header; it then darkened their logo to navy-on-
   navy, which is what "still old logo" was. :not(#ts-header) carries id specificity,
   so this rule is now (1,1,2) -- one id, the [src$=] attribute, and header+img as the
   two elements (codex r25 corrected an earlier (1,1,1) here). Nothing else in either
   sheet sets a filter, so the raised specificity is harmless. */
header:not(#ts-header) img[src$="logo.png"]{filter:brightness(0.25) saturate(0)}

/* ---- codex r35 #3: detail-page cards keep dark in-page backgrounds while this sheet
   sets dark text on them -> pricing lists measured 2.19:1, pilot paragraphs 1.65:1.
   The in-page <style> is later in the document, so !important is required. --------- */
body{background:#fbf7ee!important}
.pricing-item,.contact-sales,.referral-program,.pricing-info-box,
.pilot-card,.plan-col,.side-card,.form-card,.demo-section .pill{
  background:#fffdf8!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.pricing-item *,.contact-sales *,.referral-program *,.pricing-info-box *,
.pilot-card *,.plan-col *,.side-card *,.form-card *{color:var(--ink)!important}
.pricing-item p,.pricing-item li,.pilot-card p,.plan-col p,.side-card p,
.form-card p,.pricing-info-box p,.referral-program p{color:var(--muted)!important}
.pricing-item a,.pilot-card a,.plan-col a,.side-card a,.form-card a{color:var(--teal)!important}

/* ---- codex r36: narrow-viewport horizontal overflow -------------------------
   Measured with headless Chromium over all 98 staged pages at 320/390/768.
   With the r34/r35 rules above in place, the only remaining overflow was at
   320px on el/pages/{pilot,pricing,thanks}.html -- and the cause is this
   sheet's own type scale, not the pages': h1's clamp(36px,..) and .btn's 23px
   side padding make long Greek compounds ("Ευχαριστούμε,", "Προσαρμοσμένο",
   "καθοδηγούμενο") wider than the ~272px content box a 320px viewport leaves.
   A control run with this sheet blocked shows those three pages NOT overflowing,
   so this is a regression this file owns and must absorb.

   It is an intrinsic-sizing bug, not a layout one. The oversized word raises
   its element's min-content width, and min-content is the *automatic minimum*
   of both grid tracks (`1fr` means `minmax(auto,1fr)`) and flex items
   (`min-width:auto`). .pilot-grid consequently resolved a 263.8px column inside
   a 192px box, so no grid-template-columns override can help -- only shrinking
   min-content can.

   `overflow-wrap:anywhere`, not `break-word`: the two paint identically, but
   only `anywhere` contributes its break opportunities to min-content intrinsic
   sizing (CSS Text 3, 5.5), which is the entire mechanism being fixed here.
   It is also an inherited property, so one declaration on <body> reaches every
   text box -- including the anonymous boxes and ::before/::after content that
   no selector of ours could target. Breaks are still only taken when a word
   would otherwise overflow, so ordinary English copy is unaffected.

   !important is defensive here, not load-bearing -- measured, not assumed.
   68 of the 98 pages carry a <style> block LATER in the document than this
   linked sheet, so anything we set that they also set loses the cascade at
   equal specificity; that is why the r34/r35 rules above need it. These two
   declarations happen not to be contested today (no in-page block sets
   overflow-wrap on body, and the competing .pricing-item min-width:280px is in
   css/styles.css, which loads BEFORE this sheet) -- verified by re-running the
   320px measurement with both !importants stripped: still 0px overflow. It is
   kept so the next page or locale that does add a competing declaration cannot
   silently reintroduce the overflow, and so this block behaves like those above.

   Scoped to max-width:560px / 400px so the desktop layout is untouched. -------*/
@media(max-width:560px){
  body{overflow-wrap:anywhere!important}
}
@media(max-width:400px){
  /* A *declared* min-width wider than the ~272px content box a 320px viewport
     leaves cannot be honoured without pushing the card past the screen edge.
     .pricing-item (css/styles.css:647) asks for 280px inside a 240px flex
     column and measured exactly flush with the viewport edge -- correct only
     by arithmetic accident, with zero slack. Tables that deliberately scroll
     are deliberately NOT included: they keep their min-width and pan inside
     their own overflow-x:auto wrapper, which is the intended behaviour. */
  .pricing-item,.plan-col,.side-card,.form-card,.pilot-card{min-width:0!important}
}

/* ---- introduced-regression sweep ---------------------------------------------
   reskin.css:119 forces body cream. Any light-coloured text whose rule out-ranks
   this sheet then lands light-on-light. The earlier passes fixed the header nav,
   the toggle and the cards but missed the set below. Ratios are against #fbf7ee
   (body) / #fffdf8 (cards) and were 8.7-14.2:1 on the original dark canvas. */

/* 1. language switcher: white on cream = 1.07:1, present on 84 pages */
.lang-switch summary{background:rgba(16,43,59,.06)!important;color:var(--ink)!important}
.lang-switch summary::after{color:var(--ink)!important}
.lang-switch summary:hover{background:rgba(16,43,59,.12)!important}

/* 2. how-it-works: content outside an opaque panel sits on the cream canvas */
.hiw p,.hiw li{color:var(--muted)!important}
.hiw .video-caption{color:var(--muted)!important}
.hiw .section-group-header h2{color:var(--ink)!important}
.hiw .stepper-frame{background:#fffdf8!important;border:1px solid var(--line)!important}
.hiw .stepper-intro{color:var(--muted)!important}
.hiw .faq details{background:#fffdf8!important;border:1px solid var(--line)!important}
.hiw .faq summary{color:var(--ink)!important}
.hiw .faq summary::before{color:var(--teal)!important}
.hiw .faq p{color:var(--muted)!important}

/* 3. be-a-pilot: translucent-white cards over the body; the whole page inverts */
.pilot-page,.pilot-page .content-section,.pilot-page .pilot-hero{color:var(--ink)}
.pilot-page .hero-panel,.pilot-page .content-card,.pilot-page .cta-band,
.pilot-page .timeline-item,.pilot-page .status-card{
  background:#fffdf8!important;border:1px solid var(--line)!important}
.pilot-page h1,.pilot-page h2,.pilot-page h3,.pilot-page .section-heading,
.pilot-page .cta-band h2,.pilot-page .timeline-item h3{color:var(--ink)!important}
.pilot-page p,.pilot-page li,.pilot-page .lead,.pilot-page .section-copy,
.pilot-page .content-card p,.pilot-page .content-card ul,.pilot-page .content-card ol,
.pilot-page .timeline-item p,.pilot-page .cta-band p,.pilot-page .proof-row p{
  color:var(--muted)!important}
.pilot-page .eyebrow,.pilot-page .content-card h3{color:var(--teal)!important}

/* 4. placeholders: "*" does not match pseudo-elements, so .form-card * missed these */
.form-card ::placeholder,.pilot-form ::placeholder,.contact-form ::placeholder{
  color:#63707a!important;opacity:1}

/* 5. specificity, not cascade order: styles.css .feature-item .feature-kicker (0,2,0)
      out-ranks a bare .feature-kicker (0,1,0) */
.feature-item .feature-kicker,.feature-item.feature-accent .feature-kicker{color:var(--teal)!important}
.feature-item ul li:before,.pricing-item ul li:before{color:var(--teal)!important}

/* ---- WCAG focus indicators on the two surfaces this sheet does not reach ----
   Both are regressions this file owns, measured against the colours that
   actually paint, not the ones the base sheet intended.

   1. 1.4.11 / 2.4.11 -- footer links. reskin.css:37 sets a global
      a:focus-visible ring of var(--teal) #244b63, and reskin.css:56 paints the
      footer var(--ink) #102b3b (css/styles.css:810 paints it #162447 where its
      own rule survives). #244b63 measures 1.58:1 on #102b3b and 1.64:1 on
      #162447 -- the ring is invisible on the one surface of these pages that is
      dark. Before the reskin, css/styles.css gave these links #ffc107 at
      9.35:1, so this sheet took a working indicator away. #f5ce61 is the
      --yellow token and the same value chrome.css already uses for
      #ts-footer a:focus-visible: 9.70:1 on #102b3b, 10.08:1 on #162447.

   2. 2.4.7 -- the language switcher. css/styles.css:216-220 sets
      `.lang-switch summary:focus-visible` to `outline:none`. That selector is
      (0,2,1); this sheet's `summary:focus-visible` is (0,1,1), so styles.css
      wins on specificity despite loading first, and reskin.css:187 pins the
      summary background with !important in every state -- so focusing the
      switcher produces no visual change at all on the 84 pages that carry it.
      Matching the (0,2,1) specificity from a later sheet is enough; the ring
      is var(--teal) at 8.68:1 on the cream body.

   No !important in either rule: a sweep of the <style> blocks on all 98 staged
   pages found no rule setting an outline on a footer link or on
   .lang-switch summary (the in-page focus rules are all scoped to .hiw,
   .pilot-form, .demo-section or a *-cta block), so nothing contests these. */
.footer a:focus-visible,footer a:focus-visible{outline-color:#f5ce61}
.lang-switch summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ---- WCAG 1.4.3: footer paragraphs were unreadable ------------------------
   reskin.css line 20 sets `p{color:var(--muted)}`. That selector targets the
   <p> element directly, so it beats the colour <p> would otherwise INHERIT
   from `.footer,footer{background:var(--ink);color:#c2d4da}` on line 56 --
   inheritance always loses to a matching rule. Result: #52616b on #102b3b =
   2.29:1, across 274 footer paragraphs on 100 pages.
   `.footer p` is (0,1,1) and beats the bare `p` (0,0,1), so no !important is
   needed. #c2d4da is reskin's own declared footer colour, not a new one, and
   gives 9.59:1. `.feature-item`/`.pricing-item` need no equivalent rule --
   line 66 relights their background to var(--soft), where muted is fine. */
.footer p,.footer li,footer p,footer li{color:#c2d4da}

/* ==== WCAG 1.4.3 pass 2 ======================================================
   Every ratio below is the WCAG relative-luminance ratio between the WINNING
   `color` declaration and the WINNING `background` declaration for that element,
   resolved by real cascade order -- origin, !important, specificity, then source
   order -- across css/styles.css -> fonts.css -> this sheet -> the page's own
   <style> block, which is LATER in the document than this linked sheet.
   Text and border colours only; no background, layout, size or copy changes.
   No new colours: #c2d4da is this sheet's own footer value (line 56); #ffffff
   and #dbe5ff are css/styles.css's own values for text on its dark components
   (lines 583-621); --ink and --teal are this sheet's tokens (line 9).

   A. how-it-works, 8 pages (body.hiw) ---------------------------------------
   Line 192 sets `.hiw p,.hiw li{color:var(--muted)!important}` on the premise
   that hiw content sits on the cream canvas line 119 forces onto <body>. It
   does not. The page's own <style> keeps opaque DARK surfaces that this sheet
   never relit, and the !important on line 192 outranks both the page's own
   `.hiw .card p{color:#e3ecff}` (equal specificity, non-important) and this
   sheet's `.footer p{color:#c2d4da}` on line 264. Winning backgrounds, all
   from the page's own <style> block:
     .hiw .hero                 #1f4068   1.647:1 -> 6.891:1   (8 paragraphs)
     .hiw .panel                #152a57   2.186:1 -> 9.145:1
     .hiw details.section-panel #152a57   2.186:1 -> 9.145:1
     .hiw .video-quote          #233761   1.836:1 -> 7.680:1  (rgba over #152a57)
     .hiw .card/.manager-card/
       .setup-story-*           #193369   1.909:1 -> 7.984:1
     footer.footer              #162447   2.382:1 -> 9.963:1  (24 paragraphs)
   The footer is #162447, not this sheet's var(--ink): `footer.footer` in the
   page's own <style> is (0,1,1) and later than line 56's `.footer,footer`
   (0,1,0), so the page wins that background.
   !important IS load-bearing here: line 192 is !important, so only a later
   !important rule of >= specificity can take it. Each selector below is
   (0,2,1) or higher against line 192's (0,1,1).
   Two surfaces inside those containers are NOT dark, and A2 below hands them
   back. `[style]` identifies one of them: each of the 8 pages has exactly four
   `.panel` elements and exactly one of them carries an inline
   `background:rgba(255,193,7,0.03)` -- 3% yellow over cream, #fbf5e7, where
   var(--muted) is already correct at 5.903:1. The same `[style]` drives B/D. */
.hiw .hero p,
.hiw .panel p,
.hiw details.section-panel p,
.hiw .footer p,.hiw .footer li,.hiw footer p,.hiw footer li{color:#c2d4da!important}
/* A2. guards, not fixes -- the two light surfaces rule A reaches:
   line 195 relights `.hiw .stepper-frame` to #fffdf8 and line 196 keeps its
   intro muted at 6.296:1; the inline-styled `.panel` is #fbf5e7 and its
   paragraph is muted at 5.903:1. Both are (0,3,1), above rule A's (0,2,1)
   and (0,2,2). */
.hiw .stepper-frame>p.stepper-intro,
.hiw .panel[style]>p{color:var(--muted)!important}

/* B. how-it-works headings that land on the cream canvas, 8 pages ----------
   The page's own `.hiw h2,.hiw h3{color:#ffc107}` (0,1,1) is correct on the
   dark panels (9.3:1 and up) but two h2 sit on cream:
     section.faq > h2            on body        #fbf7ee  1.525:1 -> 13.728:1
     section.panel[style] > h2   on the inline
                                 3% yellow      #fbf5e7  1.503:1 -> 13.537:1
   var(--ink) is what line 194 already uses for `.hiw .section-group-header h2`.
   (0,2,1) beats the page's (0,1,1) on specificity alone; !important is
   defensive, matching the rest of this file. */
.hiw .faq>h2,
.hiw .panel[style]>h2{color:var(--ink)!important}

/* C. how-it-works links inside the FAQ panels line 197 relights, 8 pages ---
   Line 197 forces `.hiw .faq details` to #fffdf8 with !important, beating the
   page's own rgba(255,255,255,0.06). The page's `.hiw a{color:#ffc107}` is
   then amber on near-white: 1.603:1 -> 9.134:1 on var(--teal), which is what
   line 127 already uses for links on this sheet's relit cream cards.
   12 links. (0,2,2) beats the page's (0,1,1). */
.hiw .faq details a{color:var(--teal)!important}

/* D. the secondary CTA inside that same cream panel, 8 pages ---------------
   `.hiw .hero-cta-secondary{color:#fff;background:rgba(255,255,255,0.05);
   border:1px solid rgba(255,255,255,0.3)}` is correct in the dark
   details.section-panel (12.116:1) but invisible in the cream panel.
   An interactive control: text needs 4.5:1, the border boundary 3:1.
   Painted background there is rgba(255,255,255,0.05) over #fbf5e7 = #fbf6e8.
     text   #ffffff -> var(--ink)  1.083:1 -> 13.592:1  (needs 4.5)
     border rgba(255,255,255,0.3) over cream, ~1.0:1 -> var(--teal) 8.577:1
                                                        (needs 3) */
.hiw .panel[style] .hero-cta-secondary{
  color:var(--ink)!important;border-color:var(--teal)!important}

/* E. the two "Back to demo" / "Home" buttons on each thanks page, 8 pages --
   Lines 32-34 of this sheet relight `.btn` from css/styles.css:114's amber
   fill (#ffc107 bg, #0f2b50 text) to transparent-on-outline, and it wins:
   both selectors are (0,1,0) and this sheet is later. The page's own
   `.thanks-actions a.btn` is (0,2,1) but declares no colour or border, so the
   button ends up ink text and a teal hairline on `.thanks-section`'s
   #1f4068. 16 buttons.
     text   var(--ink) #102b3b -> #c2d4da   1.392:1 -> 6.891:1  (needs 4.5;
            the face is 700 14px, so not large text)
     border var(--teal) #244b63 -> #c2d4da  1.136:1 -> 6.891:1  (needs 3)
   (0,2,0) beats both `.btn` rules; no !important needed -- the page's later
   block declares neither property. Background untouched. */
.thanks-section .btn{color:#c2d4da;border-color:#c2d4da}

/* F. the demo banner: pilot / contact / request, 24 pages carry it; the
   unclassed paragraph that fails is on the 8 pilot pages ------------------
   The reviewer filed this as "hero paragraphs, site-wide". It is not a hero
   and it is not site-wide: `class="hero"` exists on 8 of the 109 pages (the
   how-it-works set, fixed in A). This is the same 1.647:1 number on a
   different surface. Each page's own <style> sets
   `.demo-section{background-color:#1f4068;color:#ffffff}`, but that colour
   only ever INHERITS to the paragraph, and line 20's `p{color:var(--muted)}`
   matches <p> directly -- a matching rule always beats an inherited value.
   The page's own `.demo-section p` is (0,1,1) like this rule and later, but
   declares no colour, so (0,1,1) here is enough; #ffffff restores the
   declared intent of the section.  1.647:1 -> 10.545:1.
   `.section-intro`/`.section-subintro` keep #dbe5ff (css/styles.css:622-632,
   (0,2,0)) and `.demo-section .pill` keeps var(--ink) on the cream fill
   line 122 gives it -- both outrank this rule. */
.demo-section p{color:#ffffff}

/* G. locale landing pages: es/reserva-hamacas, es/reserva-tumbonas,
   pt|pt-br/reserva-espreguicadeiras, tr/sezlong-rezervasyon -- 5 pages -----
   Each wraps its copy in `<section class="features">`, which css/styles.css:578
   paints #1f4068, but its own <style> block was written for a light page:
     .landing-wrap .lede  #5b6679 (0,2,0) on #1f4068     1.818:1 -> 8.367:1
       -> #dbe5ff, css/styles.css:609's own colour for an intro on .features
     .compare-link-block{background:#fff} with `.features h2`/`.features p`
       #ffffff on #ffffff                                1.000:1 -> 14.678:1
     .cta-box{background:#fff4d6} with `.features p` #ffffff
                                                         1.096:1 -> 13.394:1
     .cta-box a.btn with `.features a` #ffc107 on #fff4d6
                                                         1.487:1 -> 13.394:1
   (0,3,0)/(0,3,1) beat the page's (0,2,0) and css/styles.css's (0,1,1), so no
   !important. The `.btn` outline already measures 8.473:1 on #fff4d6, so only
   its label needs moving, back to the var(--ink) line 34 gives every `.btn`.
   The sibling `a.btn-primary` is deliberately NOT matched: line 36 fills it
   var(--teal) and its #ffffff label is 9.287:1 on that fill.
   `.compare-link-block a{color:#1f6feb}` is 4.634:1 on #fff and is left as is.    CORRECTION (verified in a browser, both trees): the resting label on that
   button is NOT #ffffff at 9.287:1. `css/styles.css:779 .features a` is
   (0,1,1) and out-ranks `reskin.css:36 .btn-primary` (0,1,0), so it resolves
   to #ffc107 on #244b63 = 5.696:1. It still passes, which is why this was not
   a failure -- but the mis-resolution is exactly why the HOVER case below was
   missed and had to be fixed by block M.
*/
.features .landing-wrap .lede{color:#dbe5ff}
.features .compare-link-block h2,.features .compare-link-block p{color:var(--ink)}
.features .cta-box p{color:var(--ink)}
.features .cta-box a.btn{color:var(--ink)}

/* H. comparison pages, <locale>/pages/sunbed-reservation-systems.html, 8 pages
   1. `<h3>The problem is real -- primary sources</h3>` is a direct child of
      .compare-wrap inside main.features (#1f4068). Line 15's
      `h1,h2,h3,h4{color:var(--ink)}` is (0,0,1) and nothing else matches:
      css/styles.css has `.features h1` and `.features h2` at #ffffff but no
      `.features h3`.  1.392:1 -> 10.545:1, restoring that component's own
      heading colour. Scoped to `>h3` so `.choose-card h3` (#ffc107 at 9.353:1
      on #162447) and `.vendor-card h3` are untouched.
   2. the sources footnote carries an inline `color:#94a8c4` on #1f4068:
      4.347:1, just under 4.5 at 0.9rem. Only !important can take an inline
      style; the attribute selector pins it to that one paragraph.
      4.347:1 -> 8.367:1.
   3. the TowelsOn-only badge: `color:#fff` on its own `background:#d49000`,
      0.7rem/700 so large-text does not apply.  2.696:1 -> 5.444:1 on
      var(--ink). The page's selector is (0,4,3), so !important is required;
      the fill is NOT changed. 16 badges. */
.features .compare-wrap>h3{color:#ffffff}
.compare-wrap>p[style*="#94a8c4"]{color:#dbe5ff!important}
.compare-table tr.row-only-us td b.only-pill{color:var(--ink)!important}

/* I. pages/be-a-pilot.html -- 1 page --------------------------------------
   Lines 203-213 relight this page's translucent-white cards to #fffdf8 but
   stopped at p, li, headings and .eyebrow; five light-on-light items and one
   dark-on-dark one were missed.
     .pilot-media-caption p  var(--muted) from line 209, over
       `.pilot-media-top{background:#0b223f}` + its ::after scrim
       (rgba(15,43,80,.88) at the caption)   2.495:1 -> 15.972:1 on #ffffff,
       which is `.pilot-media-caption{color:#ffffff}`'s own declared value
     .status-card span  #ffc107 on #fffdf8   1.603:1 -> 9.134:1  (var(--teal))
     .proof-row a       #ffc107 on #fffdf8   1.603:1 -> 9.134:1  (var(--teal))
     .status-card strong #ffffff on #fffdf8  1.017:1 -> 14.438:1 (var(--ink))
     .action-secondary, x2 (hero + cta-band): an interactive control on
       rgba(255,255,255,0.08) over cream = #fbf8ef / #fffdf9
         text   #ffffff -> var(--ink)    1.063:1 -> 13.802:1 / 14.457:1
         border rgba(255,255,255,0.2) over cream, ~1.0:1 -> var(--teal)
                                        8.731:1 / 9.146:1  (needs 3)
   `.action-primary` (#0f2b50 on #ffc107, 8.695:1) is left alone.
   All (0,2,0)-(0,3,1) with !important, against line 209's (0,2,1)!important
   and the page's own non-important (0,2,1) rules. */
.pilot-page .pilot-media-caption p{color:#ffffff!important}
.pilot-page .status-card span,.pilot-page .proof-row a{color:var(--teal)!important}
.pilot-page .status-card strong{color:var(--ink)!important}
.pilot-page .action-secondary{color:var(--ink)!important;border-color:var(--teal)!important}

/* J. privacy + tos, 16 pages ----------------------------------------------
   The "contact us" link in the last accordion panel carries an inline
   `style="color: #ffc107;"`, written when css/styles.css:12 painted <body>
   #0f2b50; line 119 of this sheet now forces cream.  #ffc107 on #fbf7ee =
   1.525:1 -> 8.684:1 on var(--teal). An inline style can only be beaten by
   !important. `.panel-body` exists on exactly these 16 pages and nowhere else
   in the promoted set, so the rule cannot reach a dark surface. The other
   inline-amber links on these pages (five per page on most locales) sit in
   the dark footer at 6.5:1 and up, outside `.panel-body`. 16 links. */
.panel-body a[style*="ffc107"]{color:var(--teal)!important}

/* ------------------------------------------------------------------------
   Typography consistency, 2026-10-12.  Two accidents.  No new @font-face,
   no new font file and no external font request: both rules reuse families
   that fonts.css already self-hosts.

   1) styles.css -- the legacy sheet, loaded BEFORE this one -- claims the
      section headings for Arial at a HIGHER specificity than this sheet's
      generic heading rule, so it won despite the load order:
        css/styles.css:583  .features h1, .pricing-section h1   (0,1,1)
        css/styles.css:592  .features h2, .pricing-section h2   (0,1,1)
        reskin.css:15       h1,h2,h3,h4                         (0,0,1)
      Result: h1/h2 inside .features / .pricing-section rendered in Arial
      while h3/h4 in the same section rendered in Manrope -- 339 headings
      across 43 pages, including every plan name on pages/pricing.html.
      Matching that (0,1,1) specificity wins here on source order alone, so
      no !important is needed.  font-size and font-weight are left exactly as
      styles.css set them; note that Manrope's @font-face declares weight
      400-700, so the 800/900 these selectors request clamps to 700.

   2) Nothing in this sheet or in styles.css gives form controls a family, so
      button/input/select/textarea fell through to the UA form font (an
      Arial/Helvetica-class system face) right next to DM Sans labels --
      262 controls across 100 pages.  This is already the behaviour on the
      other 9 pages: onepage.css ships `button,input,select,textarea{font:
      inherit}` for the 8 homepages and Bootstrap's reboot does the same on
      the 16 pages that load it.  font-family only -- deliberately NOT the
      `font` shorthand -- so the controls keep their UA font-size and
      font-weight and only the family changes.
   ------------------------------------------------------------------------ */
.features h1,.features h2,.pricing-section h1,.pricing-section h2{font-family:Manrope,sans-serif}
button,input,select,textarea{font-family:inherit}

/* ---- K. hover regression introduced by E, found by the r16 audit ----------
   E set `.thanks-section .btn{color:#c2d4da}` to fix the RESTING state
   (1.392:1 -> 6.891:1 on the #1f4068 band). But `css/styles.css:123`
   `.btn:hover{background-color:#ffdb58}` turns the fill amber on hover, and
   #c2d4da on #ffdb58 is 1.131:1 -- WORSE than the 10.851:1 the original
   var(--ink) label measured there. E's census only modelled the resting
   state, so it reported "0 regressions" while shipping this one.
   #102b3b on #ffdb58 = 10.851:1, so the resting fix is kept and the hovered
   label reverts to ink. This is (0,2,0) and so is E's `.thanks-section .btn`,
   so it wins on source order alone, no !important needed. (codex r26 corrected an
   earlier (0,3,0) here.) Border matches, 10.851:1 on amber.
   Every other button colour E/G/I set is already var(--ink), which measures
   10.851:1 on that same amber fill -- this rule is the only one needed. */
/* FOCUS IS DELIBERATELY NOT IN THIS SELECTOR -- do not add it back.
   The ink label is only legible because `css/styles.css:123 .btn:hover`
   repaints the fill amber, and that rule fires on HOVER ONLY. Nothing in
   either sheet gives :focus or :focus-visible a background FOR THIS BUTTON.
   (An earlier revision of this comment claimed "zero :focus{...background...}
   rules" site-wide. That was wrong: css/styles.css:136-145 does paint
   background-color:#ffdb58!important on :focus for nav.navigation a.btn. It is
   harmless there because the same rule also forces color:#0f2b50!important,
   giving 10.478:1 -- but the blanket claim must not be relied on by the next
   fix. See block N2, which recolours that ring.) So on keyboard focus with the
   pointer elsewhere the fill is still `.thanks-section`'s #1f4068 navy and
   ink-on-navy measures 1.392:1 -- far worse than the 6.891:1 resting
   #c2d4da this rule would be overriding. An earlier revision of this block
   did list :focus and :focus-visible and shipped exactly that failure.
   Keyboard focus does not need a colour change: `reskin.css:38` already
   draws `outline:3px solid var(--teal)` with a 5px offset on every
   button:focus-visible, so the state is indicated without touching
   contrast. Hover-while-focused still matches :hover, so it stays 10.851:1. */
.thanks-section .btn:hover{color:var(--ink);border-color:var(--ink)}

/* ---- L. pre-existing hover failure on the primary CTA, 85 buttons / 37 pages
   `css/styles.css:804` `.btn-primary:hover{background-color:#ffdb58}` is (0,2,0)
   and beats `reskin.css:36 .btn-primary{...color:#fff}` (0,1,0), so the fill
   turns amber while the label stays white: #ffffff on #ffdb58 = 1.351:1.
   The NAV variant was already correct and is not part of this fault:
   styles.css:136-145 sets `color:#0f2b50!important` on the same amber for
   `nav.navigation a.btn-primary:hover`, measuring 10.473:1 -- its !important
   also means the nav selectors in the rule below are inert, kept only so the
   rule reads as one intent. Not introduced by this session --
   line 36 is in the original reskin.css (byte offset 1973) and is present in
   the pre-session backup -- but it is a 1.4.3 failure on the site's main call
   to action, and the r16 audit found the equivalent fault on the thanks page by
   driving hover states, so this one would surface next.
   #102b3b on #ffdb58 = 10.851:1. Equal specificity in a later sheet wins; the
   nav selector is matched at its own (0,3,2) so it is not left behind. */
/* :focus / :focus-visible are excluded here for the same reason as block K
   -- `styles.css:804 .btn-primary:hover` is what turns the fill amber, and it
   is hover-only. On keyboard focus the fill stays `var(--teal)` #244b63, where
   ink measures 1.581:1 against the 9.285:1 of the #fff it would override, and
   that would have been a NEW failure on all 85 of these buttons across 37
   pages -- strictly worse than the hover fault this block exists to fix.
   The teal focus ring at reskin.css:38 indicates the state instead. */
.btn-primary:hover,nav.navigation a.btn-primary:hover{color:var(--ink)}

/* ---- M. the amber-on-amber CTA label, 26 buttons -----------------------------
   Found by adversarial review (r18) after block L shipped; L was necessary but
   not sufficient, and this is the same cascade trap one level deeper.

   `css/styles.css:785` is
       .features a:hover, .pricing-section a:hover { color:#ffdb58 }
   at (0,2,1). Block L's `.btn-primary:hover` is (0,2,0). (0,2,1) wins, so on
   these buttons the LABEL turns #ffdb58 -- while `styles.css:804
   .btn-primary:hover` has already turned the FILL #ffdb58. Label and fill are
   then the same colour: 1.000:1. The text is not low-contrast, it is invisible.

   It only bites the buttons with no `.pricing-item`/`.feature-item` ancestor.
   Inside those wrappers `styles.css:786` sets `color:#0f2b50 !important`, and
   that !important outranks every author rule here, giving 10.478:1 on the same
   amber -- which is why the fault is 26 buttons and not all 42. Do not "tidy"
   that !important away without replacing this rule first.

   Counted on the real markup by walking the ancestor chain, not by grepping
   selectors: 16 buttons under `.pricing-section` (the `.pilot-strip` CTA on the
   8 pricing-pilot pages, both trees) and 10 under `.features` (the 5 localized
   landing pages, both trees).

   Fix is colour-only at (0,3,1), which beats (0,2,1) on specificity alone, so it
   does not depend on sheet order. var(--ink) #102b3b on the #ffdb58 hover fill is
   10.851:1 -- the same pair blocks K and L settle on.

   :focus and :focus-visible are deliberately absent, exactly as in K and L: the
   amber fill comes from a :hover rule, so on keyboard focus the fill is still
   var(--teal) and ink on teal would be 1.581:1. See the K comment. */
.pricing-section a.btn-primary:hover,
.features a.btn-primary:hover{color:var(--ink)}

/* ============================================================================
   N. FOCUS INDICATORS -- WCAG 2.2 SC 1.4.11 (3:1 for author-supplied indicators)

   Why this block exists. Blocks K/L/M fixed TEXT contrast in hover and focus.
   An adversarial review (r18) then found that the focus RING itself was never
   measured. Line 37-38 draws `outline:3px solid var(--teal)` on every
   focusable element. var(--teal) is #244b63, whose relative luminance is
   0.063081. Against pure black that is only (0.113081)/(0.05) = 2.262:1 --
   so the teal ring CANNOT reach 3:1 on ANY dark surface, at all, ever. On the
   #1f4068 band it measures 1.136:1.

   A full static audit of all 4,261 focusable elements across the 109 pages
   resolved the cascade per element (origin, !important, specificity, source
   order) with every rgba composited over its real backdrop. Result:
   2,845 pass, 524 fail 3:1, 864 have the ring REMOVED by an `outline:none`,
   28 fall back to the UA default. The four sub-blocks below close the first
   three groups.

   outline-offset decides what colour is "adjacent": line 38 uses 5px, and the
   element's own background does not paint into that gap, so the ring's
   neighbour is the PARENT's background. That is why a cream card sitting on
   the navy band still fails -- the ring floats on the navy, not on the card.

   House pattern (established at line 251 for footer links): override
   `outline-color` ONLY. The full `outline` is restated only in N4, where the
   winning declaration is `outline-style:none` and a colour-only override
   would therefore still render nothing. No !important is used: nothing
   contesting these declarations is !important.
   ========================================================================= */

/* ---- N1. teal -> yellow on the dark canvases. 310 elements.
   Each selector is (0,3,0)-(0,3,2), beating lines 37-38 at (0,1,1).
   Resulting ratios: 6.971 on #1f4068, 9.251 on #152a57, 8.077 on #193369,
   10.079 on #162447, 9.972 on #162548, 9.370 on #0f2b50, 8.620 on #1a3156,
   8.292 on #193455, 5.866 on #2c4b71, 6.192 on #28486e, 5.060 on #385579.

   Every selector is child-qualified or component-scoped ON PURPOSE. A blunt
   `.features a:focus-visible{outline-color:#f5ce61}` would also hit the LIGHT
   cards nested inside the same sections -- .choose-card and .compare-cta are
   children of div.compare-wrap, .cta-box and details.faq-item are children of
   section.features, .form-card/.pilot-card/.pill sit inside .demo-section --
   and yellow on those cream fills is 1.201-1.513:1. That would break 150+
   currently-passing elements to fix 310. Do not "simplify" these selectors. */
.features>.container>p a:focus-visible,
.features>.compare-wrap>p a:focus-visible,
.features .press-card:focus-visible,
.features .compare-proof a:focus-visible,
.features .hsrs-path a:focus-visible,
.features .hsrs-sample a:focus-visible,
.features .hsrs-section>p a:focus-visible,
.features .hsrs-faq summary:focus-visible,
.features .hsrs-cta a:focus-visible,
.features .rsh-analysis a:focus-visible,
.features .rsh-cta a:focus-visible,
.features .rsh-disclosure a:focus-visible,
.features .rsh-wrap>aside a:focus-visible,
.features .note-wrap>p a:focus-visible,
.features .note-related a:focus-visible,
.features .note-cta a:focus-visible,
.pricing-section>.container>p a:focus-visible,
.pricing-section .pilot-strip a:focus-visible,
.demo-section>.container>p a:focus-visible,
.demo-section .demo-links a:focus-visible,
.demo-section .contact-meta a:focus-visible,
.demo-section .what-happens a:focus-visible,
.demo-section .pilot-proof a:focus-visible,
.thanks-section .btn:focus-visible,
.pilot-page .hero-actions a:focus-visible{outline-color:#f5ce61}

/* ---- N2. the nav CTA drew an AMBER ring on its own AMBER focus fill.
   `css/styles.css:147` sets `outline:2px solid #ffdb58` at (0,3,2) and the
   same block sets `background-color:#ffdb58!important` on focus, so ring and
   fill were the same colour: 1.000:1 against the fill, 1.331:1 against the
   cream header the 2px gap exposes. 100 buttons, one on every reskin page.
   The outline declarations in that legacy block are NOT !important (only
   background-color/color/text-decoration are), so a colour override wins.
   Equal specificity (0,3,2), later sheet. #102b3b gives 13.592:1 on the cream
   header and 10.851:1 on the amber fill, so it holds whichever side is
   measured. The btn-primary arms are inert in current markup (nav uses a.btn)
   and are kept only for symmetry with block L. */
nav.navigation a.btn:focus,nav.navigation a.btn:focus-visible,
nav.navigation a.btn-primary:focus,nav.navigation a.btn-primary:focus-visible{outline-color:#102b3b}

/* ---- N3. the 8 how-it-works pages carry their own
   `.hiw a:focus-visible{outline:3px solid rgba(255,193,7,.85)}` at (0,2,1) in
   an in-page <style>, which is AFTER the reskin.css link and so wins every
   tie. .hiw is on <body>, so it reaches every anchor and summary on the page.
   That amber composites to 1.421-1.504:1 on the cream surfaces. It also
   silently reverted the skip-link treatment: it beats
   `fonts.css:81 .skip-link:focus-visible` (0,2,0) on specificity and replaces
   outline-offset:0 with 3px, dropping 13.728:1 to 1.441:1.
   These pages are NOT reskinned (deliberately -- they carry 0 reskin tokens)
   and are not edited here; only the ring colour is corrected, from reskin.css.
   The same amber PASSES on the dark .hiw panels (5.08-7.09:1) and is left
   alone there. */
body.hiw header a:focus-visible,
body.hiw header summary:focus-visible{outline-color:#244b63}
.hiw .faq details summary:focus-visible,
.hiw .faq details a:focus-visible{outline-color:#244b63}
.hiw .panel[style] a:focus-visible{outline-color:#244b63}
body.hiw a.skip-link:focus-visible{outline-color:#102b3b}

/* ---- N4. three places where the ring was REMOVED outright by an
   `outline:none`, leaving 864 elements with no author indicator. Because the
   winning declaration is outline-style:none, a colour-only override would
   still render nothing -- the full outline must be restated. This is the same
   shape as the existing fix at line 252.
   outline-offset is 2-3px rather than the inherited 5px because these
   components are tightly packed (.lang-switch-menu has 8px padding and a 6px
   row gap; .pilot-form rows are 14px apart) and a 5px ring would collide.
   Contrast is unaffected -- both neighbours are the same colour either way. */
.lang-switch .lang-switch-menu a:focus-visible{outline:3px solid #f5ce61;outline-offset:2px}
.hiw .hero .pill:focus-visible{outline:3px solid #f5ce61;outline-offset:3px}
.form-card .pilot-form input:focus-visible,
.form-card .pilot-form textarea:focus-visible,
.form-card .pilot-form select:focus-visible{outline:3px solid #244b63;outline-offset:2px}

/* ---- N5. the visually-hidden zoom toggles -- SC 2.4.7, not 1.4.11.
   The 8 how-it-works pages use a CSS-only image zoom: a checkbox styled
   `position:absolute;opacity:0;width:1px;height:1px` with a <label> wrapping
   the screenshot. Because the input is opacity-hidden rather than
   display:none it STAYS in the tab order, so a keyboard user reaches these
   with no visible focus indication at all. No colour change can fix that -- a
   1x1 transparent box has nowhere to draw a ring -- so the indicator has to
   move to the element that is actually painted, the adjacent <label>.

   `+ label` is correct for the real markup, read off the page rather than
   assumed:
       <div class="manager-shot-container">
         <input type="checkbox" class="zoom-check" id="zoomN">
         <label for="zoomN"><img class="manager-shot"></label>
   so the label is the input's NEXT SIBLING. There is a second label later in
   the container; `+` deliberately takes only the first, the one holding the
   screenshot the toggle actually operates.

   (0,3,2) -- codex r26 corrected an earlier (0,3,1); the selector ends
   `+ label>img`, so label and img are two elements. Nothing else sets an outline
   on these labels. NOTE: the surfaces named below are no longer dark -- round 24b
   repainted `.hiw` to cream and block U repoints this ring to #244b63, which is
   what actually paints today. They sat on
   `.hiw .manager-section` #152a57 and `.hiw .setup-story-visual` #193369,
   where #f5ce61 measured 9.251:1 and 8.077:1.
   This is a NEW visible treatment rather than a recolour, which is why it was
   put to the operator before being applied instead of slipped in with the
   N1-N4 recolours. The how-it-works pages are NOT edited and keep 0 reskin
   palette tokens; the rule lives in reskin.css like the rest of block N. */
.hiw .zoom-check:focus-visible + label>img{outline:3px solid #f5ce61;outline-offset:3px}

/* ---- O. two faults r20 found that r18-era reasoning missed ------------------

   O1. N5 targeted the <label> and the ring NEVER PAINTED. The computed style
   was right -- the checkbox matched :focus-visible and the label resolved a
   yellow outline -- but the label is an INLINE wrapper whose only child is the
   replaced <img>, so it has no painted box for the outline to follow. Verified
   in a render, which is the only thing that could have caught it: a static
   cascade check confirms the declaration and tells you nothing about paint.
   The ring now goes on the <img>, which is the element that actually has a
   box. `> img` is a direct child on all 56 instances, checked, not assumed.

   O2. `.compare-link-block a` on the 5 localized landing pages. An audit
   claimed this selector was (0,2,1), tied `css/styles.css:785` and won on
   source order at 4.634:1. The specificity was miscounted: the in-page rule is
   `.compare-link-block a` with NO :hover, so it is (0,1,1), and
   `.features a:hover` at (0,2,1) beats it. On hover the label became #ffdb58
   on white = 1.353:1 at 16px/600. Block M fixed the BUTTONS in these sections
   and left ordinary links exposed.
   `.features .compare-link-block a:hover` is (0,3,1), beating (0,2,1) on
   specificity alone. var(--ink) on white is 14.678:1. Resting stays #1f6feb
   at 4.634:1, untouched -- this rule is hover-only, and :focus is excluded for
   the same reason as K/L/M. */
.features .compare-link-block a:hover{color:var(--ink)}

/* ---- P. be-a-pilot.html: dark gradient under dark reskin text ----------------
   Found by adversarial review (r22) ON PRODUCTION. Measured there: hero heading
   1.05:1, lead paragraph 2.18:1, eyebrow 1.16:1, "View sample setup" 1.29:1.
   Effectively invisible text on a live page.

   Cause: the page's own <style> paints `main.pilot-page` with a dark
   radial+linear gradient, and block (reskin.css ~203-211) recolours everything
   inside `.pilot-page` to var(--ink) WITH !important, on the assumption that
   the surface underneath is light. `reskin.css`'s `body{...!important}` cannot
   help, because the dark paint is on the <main>, not the body.

   Specificity matters here: the in-page `.pilot-page` rule is (0,1,0) and sits
   in a <style> AFTER the reskin.css link, so an equal-specificity reskin rule
   would LOSE on source order. `main.pilot-page` is (0,1,1), which wins on
   specificity alone and is therefore order-independent -- no !important needed.

   var(--ink) on #fbf7ee (the reskin body colour) is 13.728:1. The page's own
   relit cards (.hero-panel, .content-card, .cta-band, .timeline-item,
   .status-card) already set their own light fills and are unaffected. */
main.pilot-page{background:#fbf7ee}

/* ---- Q. pin the header logo's rendered size --------------------------------
   WHAT I VERIFIED: at DPR 1, 1440px wide, the logo already rendered 150x30 on
   both the homepage and a css/styles.css page, because srcset picked
   logo-160.png whose intrinsic size is 149x29. I could NOT reproduce a
   size defect at DPR 1, and I say so rather than claim a cause I did not see.

   MY DOUBLING EXPLANATION WAS WRONG, and an independent audit measured it.
   I had claimed that with `css/styles.css:48 .logo img{max-height:60px;
   width:auto}` a DPR-2 display would select logo-320.png and lay the logo out
   near 319px -- about double. That is not how srcset works: a candidate chosen
   by a WIDTH descriptor has its intrinsic dimensions DENSITY-CORRECTED, so
   fetching the 320w file does not yield a 320 CSS-pixel box. See the HTML
   image processing model, "normalizing the source densities".

   WHAT WAS ACTUALLY MEASURED, in CSS pixels, identical on all three trees:
       DPR 1  homepage 150x30     legacy page 150x30 with Q    150x30 without
       DPR 2  homepage 150x30     legacy page 150x30 with Q    150x30 without
       DPR 3  homepage 150x29.69  legacy page 150x29.69 w/ Q   151.58x30 without
   So no doubling exists at any DPR. The only real difference this rule makes
   is the DPR-3 drift, 151.58px -> 150px; the fractional height comes from the
   480x95 candidate. The rule is harmless and sufficient, and it is NOT needed
   for the defect I originally described, because that defect does not exist.

   (0,1,1), equal to styles.css:48, and reskin.css is linked after it on these
   pages, so it wins on source order. max-height is released so it cannot
   re-cap the height; height:auto keeps the aspect. The homepage is unaffected
   either way -- it does not load css/styles.css and chrome.css sizes its logo
   with !important. */
.logo img{width:150px;height:auto;max-height:none}

/* ---- R. the cream canvas on the three homepage-linked page types -----------
   WHAT WAS WRONG: reskin.css contained ZERO rules repainting the .features /
   .pricing-section canvas (verified by parsing every rule in this file), so
   `css/styles.css:579 .features,.pricing-section{background-color:#1f4068}`
   survived the reskin. 43 pages therefore still rendered the LEGACY NAVY band
   while the homepage rendered the new cream design, and on
   sunbed-reservation-systems.html every inner card had already been reskinned
   to var(--soft)/#fffdf8/var(--ink) -- light cards floating on a dark page.
   That mismatch, not contrast and not the logo, is what the operator kept
   reporting as "still not ok".

   SCOPE: deliberately limited to the three page types the long one-page
   homepage links to -- pages/features.html, pages/pricing.html and
   pages/sunbed-reservation-systems.html -- in all 8 locales, 24 pages per
   tree. That is the operator's own criterion. The other 40 .features pages are
   NOT homepage-linked and keep the navy band; nothing here touches them,
   because every rule is gated on body.reskin-canvas, a class added to exactly
   those 48 files.

   WHY THE TEXT RULES ARE NEEDED: styles.css painted this band for a DARK
   canvas -- h1/h2/p #ffffff, .section-intro/.section-subintro #dbe5ff,
   links #ffc107, hover #ffdb58. On cream every one of those inverts, so each
   is re-derived here. body.reskin-canvas adds a class and a type, so these
   beat both styles.css and the in-page <style> blocks (which load AFTER
   reskin.css and would otherwise win on source order). */
body.reskin-canvas .features,
body.reskin-canvas .pricing-section{background-color:#fbf7ee}

body.reskin-canvas .features h1,body.reskin-canvas .pricing-section h1,
body.reskin-canvas .features h2,body.reskin-canvas .pricing-section h2,
body.reskin-canvas .features h3,body.reskin-canvas .pricing-section h3,
body.reskin-canvas .features p,body.reskin-canvas .pricing-section p,
body.reskin-canvas .features li,body.reskin-canvas .pricing-section li{color:var(--ink)}
body.reskin-canvas .features .section-intro,body.reskin-canvas .pricing-section .section-intro,
body.reskin-canvas .features .section-subintro,body.reskin-canvas .pricing-section .section-subintro,
body.reskin-canvas .features .landing-wrap .lede{color:var(--muted)}
body.reskin-canvas .features a,body.reskin-canvas .pricing-section a{color:var(--teal)}
body.reskin-canvas .features a:hover,body.reskin-canvas .pricing-section a:hover{color:var(--ink)}
body.reskin-canvas .features .compare-wrap>h3{color:var(--ink)}

/* I ASSUMED pricing.html's cards were still the dark navy its own in-page
   <style> declares (.pricing-item{background-color:#152a57;color:#fff}) and
   wrote rules to preserve white labels and amber focus rings inside them.
   A browser said otherwise: .pricing-item computes to rgb(255,253,248) with
   ink text, because reskin.css had ALREADY relit those cards with a selector
   more specific than the in-page rule. So the "preserve the dark card" rules
   were wrong in intent and the amber ring exception actively failed --
   measured 1.488:1 for #f5ce61 on #fffdf8 on a.btn-primary, whose 5px
   outline-offset puts the ring on the CARD, not on the button's amber fill.
   Both are removed. The only survivor is .switch-note, whose in-page #ffc107
   would fail on the relit card. */
body.reskin-canvas .switch-note{color:#8a5a00}

/* Focus rings: block N1 recoloured these to amber #f5ce61 precisely BECAUSE
   this canvas was dark. On cream amber fails, so the ring goes back to teal
   everywhere inside the repainted canvas -- including the amber CTA buttons,
   where offset>0 means the adjacent colour is the light card behind them.
   The doubled marker class is not decoration: N1's most specific selectors
   reach (0,3,2) (e.g. `.features>.container>p a:focus-visible`), and
   `body.reskin-canvas .features :focus-visible` is only (0,3,1), which would
   LOSE on specificity despite coming later in the file. Doubling makes it
   (0,4,1) and wins outright. */
body.reskin-canvas.reskin-canvas .features :focus-visible,
body.reskin-canvas.reskin-canvas .pricing-section :focus-visible{outline-color:#244b63}

/* ---- S. the rings block P invalidated and I failed to re-measure ----------
   Block P repainted `main.pilot-page` from its dark gradient to #fbf7ee to fix
   text that measured 1.05:1 on live production. It did not occur to me that
   block N1 had earlier recoloured that page's hero rings to amber #f5ce61
   SPECIFICALLY BECAUSE the canvas was dark -- so P turned a correct amber ring
   into amber-on-cream. A browser measured the result at 1.415:1 on both
   a.action-primary and a.action-secondary, against the 3:1 floor for non-text
   contrast. Same mistake as the one block R had to undo on pricing.html: when
   a canvas is repainted, every ring that was tuned to the old canvas has to be
   re-derived, not assumed.

   (0,3,2) against N1's (0,3,1), so this wins on specificity and not merely on
   source order. The 5px outline-offset means the adjacent colour is the hero's
   own cream canvas, not the button's amber fill. */
main.pilot-page .hero-actions a:focus-visible{outline-color:#244b63}


/* ---- codex r24 / round 24: block R recoloured every <a> inside .features and
   .pricing-section to var(--teal) at (0,2,2). That also hit the solid buttons,
   whose own background IS var(--teal) -- a.btn-primary measured 1.000:1, teal
   text on a teal button, on the five localised landing pages. The button rules
   live at (0,1,0) in this sheet and could never win. These are (0,3,2). ------- */
body.reskin-canvas .features a.btn-primary,
body.reskin-canvas .pricing-section a.btn-primary{color:#fff}
body.reskin-canvas .features a.btn,
body.reskin-canvas .pricing-section a.btn{color:#0f2b50}


/* ---- T. round 24b: the pilot / contact / request banner was the LAST dark
   surface on the site. A measured dark-surface scan of every page found exactly
   one element still painting #1f4068: section.demo-section, on 3 page types x 8
   locales. Everything INSIDE it was already relit -- .form-card and friends are
   forced cream with !important at line 126 -- so a cream card floated on a navy
   page, which is what "misguided link to contact" landed on.
   Each page's own <style> is LATER in the document than this sheet, so every
   rule here has to outrank it on specificity, not order:
     page `.demo-section`                     (0,1,0) < (0,2,1) here
     page `.pilot-form input[type="text"]`    (0,2,1) < (0,3,2) here
     the amber ring block at line 654         (0,2,2) < (0,4,1) doubled marker
   (codex r25 re-derived these; the first draft of this comment undercounted all three
   by forgetting that `body` and the descendant element each add to the c column.)
   The amber submit button and .pill keep their own fills: dark text on amber
   measures fine on cream and they are the page's only call to action. ------- */
body.reskin-canvas .demo-section{background-color:#fbf7ee;color:var(--ink)}
body.reskin-canvas .demo-section h1,body.reskin-canvas .demo-section h2,
body.reskin-canvas .demo-section h3,body.reskin-canvas .demo-section p,
body.reskin-canvas .demo-section li,body.reskin-canvas .demo-section label,
body.reskin-canvas .demo-section strong,
body.reskin-canvas .demo-section .contact-intro-quote,
body.reskin-canvas .demo-section .contact-method-value,
body.reskin-canvas .demo-section .contact-method-value a{color:var(--ink)}
body.reskin-canvas .demo-section .section-intro,
body.reskin-canvas .demo-section .section-subintro,
body.reskin-canvas .demo-section .subline,
body.reskin-canvas .demo-section .demo-links,
body.reskin-canvas .demo-section .contact-meta,
body.reskin-canvas .demo-section .helper,
body.reskin-canvas .demo-section .pilot-proof{color:var(--muted)}
body.reskin-canvas .demo-section a{color:var(--teal)}
body.reskin-canvas .demo-section .contact-method-label{color:var(--teal)}
body.reskin-canvas .demo-section .contact-method,
body.reskin-canvas .demo-section .pilot-proof,
body.reskin-canvas .demo-section .pilot-proof-wrap,
body.reskin-canvas .demo-section .what-happens{background:#fffdf8;border-color:var(--line)}
/* T3 / codex r26: var(--line) #d8d1c2 is a DECORATIVE hairline. On a #fffdf8
   field fill it measures 1.495:1, and WCAG 1.4.11 wants 3:1 for the boundary of
   a form control, which is the only thing telling a user where the field is.
   #6f8691 is this sheet's existing secondary-control border (onepage.css
   .action.secondary) and measures 3.759:1 on #fffdf8, 3.574:1 on the #fbf7ee
   canvas and 3.393:1 on the #f6f1e6 band -- it clears 3:1 on every surface a
   field can land on here. Cards and panels keep var(--line): they are decoration,
   not controls, and 1.4.11 does not apply to them. */
body.reskin-canvas .demo-section .pilot-form input,
body.reskin-canvas .demo-section .pilot-form textarea,
body.reskin-canvas .demo-section .pilot-form select{background:#fffdf8;color:var(--ink);
  border-color:#6f8691}
body.reskin-canvas .demo-section .pilot-form ::placeholder{color:var(--muted);opacity:1}
body.reskin-canvas .demo-section .pilot-form input:focus,
body.reskin-canvas .demo-section .pilot-form textarea:focus,
body.reskin-canvas .demo-section .pilot-form select:focus{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(36,75,99,.22)}
body.reskin-canvas.reskin-canvas .demo-section :focus-visible{outline-color:#244b63}

/* T2: four sub-components of the same banner declare their own amber/white on
   what is now a cream card, and one anchor carries an inline style (which no
   selector can outrank, so it is rewritten in the pages themselves). */
body.reskin-canvas .demo-section .pilot-proof-label,
body.reskin-canvas .demo-section .assisted-title,
body.reskin-canvas .demo-section .what-happens-title,
body.reskin-canvas .demo-section .what-happens-quote{color:var(--ink)}
body.reskin-canvas .demo-section .what-happens-role{color:var(--muted)}

/* ---- U. round 24b: how-it-works was a HYBRID. Rules A/B/C/D above relit the
   parts of body.hiw that sat on the cream canvas and deliberately LEFT the
   page's own dark .hero / .panel / details.section-panel / .card surfaces,
   painting their paragraphs #c2d4da to suit them. Those surfaces are now cream
   too (the page's in-page sheet was converted), so A's light grey measured
   1.358:1 and the amber rings that suited a dark surface measured 1.343:1.
   Same selectors, same specificity, later in the file, so these take.
   The ONE surface on this page that is still dark is the language menu
   (css/styles.css:183 `background:#162447`), and `.hiw a{color:var(--teal)}`
   now reaches into it -- 1.642:1 -- so it is handed back explicitly. ------- */
.hiw .hero p,.hiw .panel p,.hiw details.section-panel p{color:var(--muted)!important}
.hiw .lang-switch-menu a:not([aria-current]){color:#ffffff!important}
/* the legacy footer is the page's OTHER still-dark surface (#162447): its
   amber links keep an amber ring, which the in-page teal ring took away. */
.hiw footer.footer a:focus-visible{outline-color:#f5ce61!important}
.hiw .lang-switch-menu a:focus-visible{outline-color:#f5ce61!important}
.hiw .hero .pill:focus-visible{outline:3px solid #244b63!important;outline-offset:3px}
.hiw .zoom-check:focus-visible + label>img{outline:3px solid #244b63!important;outline-offset:3px}

/* V. round 24b: thanks.html was the last page carrying the navy #1f4068 band.
   Blocks E / E2 above painted its buttons #c2d4da and gave them an amber ring
   BECAUSE that band was dark; the band is cream now, so both invert. Same
   selectors and specificity as E/E2, later in the file. */
.thanks-section .btn{color:var(--ink);border-color:var(--teal)}
.thanks-section .btn:hover{color:#fff;background:var(--teal);border-color:var(--teal)}
.thanks-section .btn:focus-visible{outline-color:#244b63}

/* W. round 24 / codex r24 HIGH, confirmed by measurement: the label pin above is
   (0,3,2) and reskin's own `.features a.btn-primary:hover{color:var(--ink)}` is
   (0,3,1), so the pin survived into the hover state while
   css/styles.css:804 `.btn-primary:hover{background-color:#ffdb58}` still
   repainted the fill pale yellow. Measured white-on-#ffdb58 at 1.353:1 on all
   five localised landing pages and the pricing-pilot strip. These are (0,4,2),
   THE COLOUR FLIP WAS THE REAL BUG. css/styles.css:804 repaints the fill #ffdb58 on
   :hover only, and `.btn` transitions background-color over 0.3s while `color` is
   NOT transitioned. So a label pinned dark for the pale fill snapped to #0f2b50
   instantly while the background was still teal: 1.526:1 for ~300ms, every hover.
   That transient is what codex kept measuring in r25/r26/r27 -- the settled states
   always passed, which is why it looked like a stale-CSS artifact and was not.
   Pinning :focus/:focus-visible/:active as well (the r25 attempt) made it a settled
   failure instead. The fix is to stop flipping the label at all: hover keeps a
   DARKER TEAL fill and the white label it already had, so no state, intermediate
   or settled, ever pairs dark text with a teal button. #1b3a4e under #fff is
   12.6:1, and the fill stays inside the site's button language. (0,3,2) beats
   css/styles.css:804 (0,2,0) and `.pricing-item .btn-primary:hover` (0,2,1). ---- */
body.reskin-canvas .features a.btn-primary:hover,
body.reskin-canvas .pricing-section a.btn-primary:hover{background-color:#1b3a4e;color:#fff}
/* ...but there are TWO button families here, and the first cut of this rule hit
   both. `css/styles.css:786` gives `.pricing-item .btn-primary` and
   `.feature-item .btn-primary` an AMBER fill with `color:#0f2b50!important`.
   The !important label survives the rule above while the background does not,
   so those buttons went dark-navy-on-dark-teal: 1.19:1, settled, not transient.
   Each family now keeps its own pair, and within a family the hover only moves
   the fill inside the same light-or-dark band, so no interpolated frame of the
   0.3s transition can pair a dark label with a dark fill either. (0,4,2). */
body.reskin-canvas .features .pricing-item a.btn-primary:hover,
body.reskin-canvas .features .feature-item a.btn-primary:hover,
body.reskin-canvas .pricing-section .pricing-item a.btn-primary:hover,
body.reskin-canvas .pricing-section .feature-item a.btn-primary:hover{background-color:#ffdb58;color:#0f2b50}

/* ---- X. horizontally scrolling tables need a scroll cue and a sticky label
   column. A content audit found the homepage pricing table 750px wide inside a
   354px wrapper on a 390px phone: it DOES scroll (overflow-x:auto), but with no
   edge shadow a reader sees a table cut off mid-price and no reason to think
   there is more. The same applies to the comparison table at 826px. The two
   radial gradients paint only while there is more content in that direction --
   `background-attachment: local` on the fading pair makes them scroll away,
   `scroll` on the shadows keeps them pinned -- so the cue is self-cancelling and
   needs no JS. The first column is pinned so the row label stays visible. */
/* the comparison page sets `.compare-wrap-table{background:#fff}` in its own
   <style>, which is later in the document, so the cue needs the marker class
   to outrank it: (0,2,0) against (0,1,0). */
.plan-table-wrap,body.reskin-canvas .compare-wrap-table{
  background:
    linear-gradient(to right,#fffdf8 36%,rgba(255,253,248,0)) left center/44px 100% no-repeat local,
    linear-gradient(to left,#fffdf8 36%,rgba(255,253,248,0)) right center/44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(16,43,59,.20),rgba(16,43,59,0)) left center/16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(16,43,59,.20),rgba(16,43,59,0)) right center/16px 100% no-repeat scroll;
  overscroll-behavior-x:contain}
@media(max-width:900px){
  .plan-table tbody th,.compare-table tbody th,.compare-table td:first-child{
    /* inset-inline-start, NOT left: in dir="rtl" the first column renders on the
       RIGHT, so left:0 never engages and the row labels scroll away entirely --
       the Hebrew table became a grid of symbols with no labels. */
    position:sticky;inset-inline-start:0;z-index:1;background:#fffdf8}
  .plan-table tbody th{width:auto;min-width:122px}
}