/* CoatFlow floor hero (2026-09-23). The masthead is the product: the real
   slab under the whole width, the words on a solid paper block anchored
   bottom-left and aligned with the page's content edge. Chosen by the owner
   from three mockups; replaces the teal pour band and its floating card.
   Paints completely with no script: the bare slab is the default state
   (every finish layer sits at translateX(-100%)), and the <noscript> style
   in the head shows the first finish instead. site/floor.js runs the wipe
   with transforms only.
   Moved out of pages/index.html's inline style (T2a) so a second page (the
   Fence Visualizer) can reuse the same component. Linked BEFORE
   site/liquid.css, the same order the inline style held, so liquid.css still
   wins any tie at equal specificity.
   --nav-h is the sticky nav's measured height: two rows below 1120px, one
   row from 1120px up (re-measure if the nav changes). */
:root{--nav-h:101px}
@media (min-width:1120px){:root{--nav-h:65px}}
/* The vh line first: where svh is unknown (Safari before 15.4, Chrome
   before 108) the svh declaration drops, and without a fallback the
   section would collapse to 0 and overflow:hidden would clip the
   headline and buttons. Same pattern as .tool iframe below. */
.hero-floor{--floor-pos:50% 62%;position:relative;isolation:isolate;overflow:hidden;background:var(--well);
  height:clamp(560px,calc(100vh - var(--nav-h)),860px);
  height:clamp(560px,calc(100svh - var(--nav-h)),860px)}
.floor{position:absolute;inset:0;overflow:hidden}
.floor-base,.floor-pic{position:absolute;inset:0;display:block}
.floor img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:var(--floor-pos)}
.floor-layer{position:absolute;inset:0;overflow:hidden;transform:translateX(-100%)}
.floor-pic{transform:translateX(100%)}
.floor-seam{position:absolute;inset:0;z-index:40;pointer-events:none;transform:translateX(-100%);opacity:0;transition:opacity .2s}
.floor-seam::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:2px;background:var(--accent)}
.floor-seam.on{opacity:1}
/* The drag is a real range input over the photo: pointer, arrow keys and a
   screen reader all arrive as one input event. Track and thumb are
   transparent, never the element itself, so the focus ring still paints
   (the reason is written out in the old compare's history, 2026-09-17). */
.floor-range{position:absolute;inset:0;z-index:41;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;
  cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.floor-range::-webkit-slider-runnable-track{height:100%;background:transparent}
.floor-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;background:transparent;border:0;cursor:ew-resize}
.floor-range::-moz-range-track{height:100%;background:transparent;border:0}
.floor-range::-moz-range-thumb{width:44px;height:100%;background:transparent;border:0;border-radius:0;cursor:ew-resize}
.floor-range:focus-visible{outline-offset:-6px}
/* Chips on the photograph take the near-opaque paper plate the old
   compare tags measured: over black it composites to rgb(238,236,232),
   where --mute reads 5.76:1 and --accent 4.70:1. */
.floor-tag{position:absolute;z-index:42;top:20px;right:20px;display:flex;align-items:center;gap:10px;margin:0;padding:7px 11px;border-radius:3px;
  background:rgba(250,248,244,.95);border:1px solid rgba(24,22,20,.50)}
.floor-tag-name{font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink)}
/* Pause (WCAG 2.2.2: the loop runs until the visitor takes over). Plain
   words in the note's mono, set off from the finish name by a hairline and
   run the chip's full height, so the target clears 24px. No fill, no
   pill; the ring is the foundation's :focus-visible. No display rule
   here, so the hidden attribute floor.js toggles keeps working. Shown
   below 720px too, where the note is not. min-width is the measured
   width with "Pause" in it, so the chip does not narrow on "Play". */
.floor-pause{align-self:stretch;min-width:64px;margin:-7px -11px -7px 0;padding:0 11px;border:0;border-left:1px solid var(--line);
  background:none;line-height:1;white-space:nowrap;cursor:pointer}
.floor-pause:hover{color:var(--ink)}
.floor-rail{position:absolute;z-index:42;right:20px;bottom:20px;display:none;gap:8px;padding:8px;border-radius:3px;
  background:rgba(250,248,244,.95);border:1px solid rgba(24,22,20,.50)}
/* 1024px, not 900px: measured, the paper panel's right edge sits at
   630 to 636px regardless of viewport width in this band (it hits its
   540px content cap early), while the rail hugs the right edge, so
   between 900 and about 955px wide the rail's own box overlapped the
   panel by up to 48px (confirmed in review, fix round 1). 1024px keeps
   a 70px clearance and only grows from there. */
@media (min-width:1024px){.floor-rail{display:flex}}
.floor-sw{display:grid;gap:6px;width:88px;padding:0;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.3;color:var(--mute)}
.floor-sw img{width:100%;height:44px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
/* All three labels ("Dakota Grey", "Coyote", "Metallic Tuxedo") on one
   line, so the accent underline sits at the same height under every
   swatch. Measured: "Metallic Tuxedo" is ~84.5px at 12px/500 weight
   Archivo, so the fixed width above (88px) is the widest label plus a
   few px of headroom, not a guess. */
.floor-sw span{padding-bottom:3px;border-bottom:2px solid transparent;white-space:nowrap}
.floor-sw[aria-pressed="true"]{color:var(--ink)}
.floor-sw[aria-pressed="true"] span{border-bottom-color:var(--accent)}
.floor-sw[aria-pressed="true"] img{border-color:var(--accent)}
.floor-sw:hover{color:var(--ink)}
/* The paper block. Its left padding puts the words on the page's content
   edge (the same line .wrap uses); % resolves against the hero's width,
   so a classic scrollbar cannot skew it the way 100vw would. content-box,
   so width is the measure of the words, not of the block. */
.hero-panel{position:absolute;left:0;bottom:0;z-index:43;box-sizing:content-box;
  width:min(540px,calc(100% - max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad))) - var(--pad) - 120px));
  padding:clamp(28px,3.4vw,48px) var(--pad) clamp(26px,3vw,40px) max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));
  background:var(--bg)}
.hero-panel h1{margin-top:12px;font-size:clamp(2.2rem,4.4vw,4rem)}
.hero-panel .lede{margin-top:18px;font-size:clamp(16px,1.35vw,18px)}
.hero-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:719px){
  .hero-floor{height:auto;overflow:visible;background:none}
  .floor{position:relative;inset:auto;aspect-ratio:4/3.4}
  .floor-tag{top:12px;right:12px}
  /* The finish name only. The note ("Rendered by the Floor Visualizer")
     wrapped the chip onto two long lines at phone widths (reported in
     review, hero-390.png); floor.js still toggles its hidden attribute
     same as desktop, this just keeps it off screen below 720px so that
     toggle never fights this rule for space. */
  .floor-tag-note{display:none}
  .hero-panel{position:relative;width:auto;box-sizing:border-box;margin:-44px 12px 0;padding:26px 20px 28px}
}