/* ==========================================================================
   Pool Headquarters — consumer homepage (preview)

   ADDITIVE ONLY. Loaded AFTER site.css, which is not modified by this file.
   Every selector here is namespaced `h-` except the two footer classes
   (.foot, .foot__nav) deliberately reused from site.css so the footer on this
   page is the same footer as every other page.

   No JavaScript. No third-party requests. No @import.

   Colour contract, measured (see the verification report):
     light grounds  --shore #eef5f9   --shallow #d7ebf4
     light inks     --ink 15.05:1     --ink-quiet 6.45:1     --lagoon 6.39:1
     dark inks      --spray 12.97:1   --quiet 8.29:1         --foam 10.92:1
     --reagent is a GRAPHIC colour only: 3.44:1 on shore, 4.83:1 on abyss.
     It is never used for text and never as a ground under white text.
   ========================================================================== */

:root{
  /* light grounds and their inks */
  --shore:#eef5f9;
  --shallow:#d7ebf4;
  --ink:#06212f;
  --ink-quiet:#3d5c6e;
  --lagoon:#04607f;

  /* structure */
  --shell:1200px;
  --measure:60ch;
  --band-y:clamp(3.75rem,8vw,7rem);

  /* type scale */
  --t-hero:clamp(2.55rem,7.2vw,4.5rem);
  --t-h2:clamp(1.85rem,4.2vw,3rem);
  --t-h3:clamp(1.1rem,1.8vw,1.28rem);
  --t-lede:clamp(1.05rem,1.8vw,1.26rem);
  --t-body:clamp(.98rem,1.4vw,1.05rem);
  --t-micro:.72rem;            /* floor, never shrinks on desktop */

  /* device */
  --dev-w:300px;
}

/* --------------------------------------------------------------------------
   Page shell. The fixed .water / .caustic layers from site.css stay behind
   everything; each dark band is a translucent scrim over them, getting darker
   down the page, so the caustics keep moving through the dark sections and
   the page reads as descending water. Light bands are opaque and stop it.
   -------------------------------------------------------------------------- */
.h-skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--foam);color:var(--abyss);
  padding:.7rem 1.1rem;border-radius:.5rem;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;font-weight:600;
}
.h-skip:focus{left:1rem;top:1rem}

.h-shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.h-band{position:relative;z-index:1;padding-block:var(--band-y);overflow:clip}
.h-band--hero{
  padding-block:clamp(2rem,4vw,3.25rem) clamp(3rem,6vw,5rem);
  /* A scrim, not a card. The caustics stay visible through it; it exists so
     hero type is measured against a known ground rather than against whatever
     frame of the animation happens to be under it. */
  background:linear-gradient(180deg,rgba(2,22,39,.46) 0%,rgba(2,22,39,.60) 55%,rgba(2,22,39,.72) 100%);
}
/* Full-bleed scrim behind the masthead; .h-top itself stays shell-width. */
.h-topbar{position:relative;z-index:2;background:rgba(2,22,39,.58)}
/* Each dark band is a gradient, not a flat fill, so the caustics stay visible
   near its top edge and the page keeps descending: light at the surface,
   nearly opaque by the footer. */
/* .44 rather than .30 at the top edge: at .30 the body copy measured 4.34:1
   against the brightest caustic phase, just under the 4.5 bar. */
.h-band--d1{background:linear-gradient(180deg,rgba(2,22,39,.44) 0%,rgba(2,22,39,.64) 100%)}
.h-band--d2{background:linear-gradient(180deg,rgba(2,22,39,.50) 0%,rgba(2,22,39,.74) 100%)}
.h-band--d3{background:linear-gradient(180deg,rgba(2,22,39,.68) 0%,rgba(2,22,39,.88) 100%)}
.h-band--cta{background:linear-gradient(180deg,rgba(2,22,39,.88) 0%,rgba(2,22,39,.95) 100%)}
.h-band--d1,.h-band--d2,.h-band--d3,.h-band--cta{box-shadow:inset 0 1px 0 rgba(159,226,242,.16)}
.h-band--light  {background:var(--shore);color:var(--ink)}
.h-band--light2 {background:var(--shallow);color:var(--ink)}

.h-band--light h1,.h-band--light h2,.h-band--light h3,
.h-band--light2 h1,.h-band--light2 h2,.h-band--light2 h3{color:var(--ink)}
.h-band--light p,.h-band--light li,
.h-band--light2 p,.h-band--light2 li{color:var(--ink-quiet)}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.h-top{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  max-width:var(--shell);margin-inline:auto;
  padding:1.1rem var(--gutter);
}
.h-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--white)}
.h-brand img{width:38px;height:38px;flex:none}
.h-brand span{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:clamp(1rem,2.2vw,1.12rem);letter-spacing:-.01em;
}

/* --------------------------------------------------------------------------
   Buttons. --foam ground with --abyss text measures 12.76:1.
   -------------------------------------------------------------------------- */
.h-cta{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.6rem;border-radius:999px;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:clamp(.98rem,1.6vw,1.06rem);
  text-decoration:none;
  background:var(--foam);color:var(--abyss);
  border:1px solid var(--foam);
}
.h-cta:hover{background:#c2eef9;border-color:#c2eef9}
/* Status pill: identical to the button, but it is a <p>, not a link, because
   there is nothing to link to until the App Store listing exists. */
.h-cta--static{cursor:default;margin:0}
/* Measured fix: over the lit caustics the transparent version fell to 2.15:1.
   The pill now carries its own ground so it is legible at every phase of the
   water animation. */
.h-cta--ghost{
  background:rgba(2,22,39,.72);color:var(--foam);
  border:1px solid rgba(159,226,242,.55);
  min-height:44px;padding:.6rem 1.15rem;font-size:.92rem;
}
.h-cta--ghost:hover{background:rgba(159,226,242,.12);color:var(--white);border-color:var(--foam)}
.h-cta--onlight{
  background:var(--lagoon);color:#ffffff;border-color:var(--lagoon);
}

/* Apple's official "Download on the App Store" badge, used exactly as Apple
   supplies it: SVG, black variant, en-US, unmodified. Apple's guidelines
   forbid recolouring, cropping, angling or animating it, and forbid rebuilding
   it in CSS or type, so nothing here touches the artwork itself.
   Two rules Apple states in pixels:
     minimum onscreen height 40px  -> 52px here, which is also the height of
       the pill it replaces, so the vertical rhythm of these sections does not
       move by a pixel.
     clear space one quarter of the badge height -> 13px at 52px. The existing
       gaps around these slots are 34px above and 14px below, so both already
       clear it and no spacing was changed to accommodate the badge.
   width:auto keeps the artwork's own 119.66407:40 ratio, so it renders
   155.56x52 and is never stretched to fit a rounded number. */
.h-badge{display:inline-flex;line-height:0;border-radius:8px}
/* a.h-badge img, not .h-badge img. The closing section sizes its app icon with
   .h-close img, which is the same specificity and comes later in this file, so
   it won the cascade and crushed the badge to 104x35 at wide viewports. The
   element selector settles it without touching the icon's rules or reordering
   the file. margin:0 for the same reason: .h-close img adds a bottom margin
   that belongs to the icon, not to a badge with its own clear space. */
a.h-badge img{height:52px;width:auto;display:block;margin:0}

/* The two store badges together.

   Apple's and Google's artwork are both tight to their own canvas: measured by
   rasterising each file and walking its alpha channel, the visible ink fills
   the canvas edge to edge, zero transparent padding on all four sides of
   either one. That is the whole reason one shared height is the right answer
   here rather than a fudge factor: equal CSS height IS equal visible height,
   and Google's wider aspect ratio (3.3712 against Apple's 3.0000) then makes
   its badge the larger of the two, which is what Google's guidelines require
   of it wherever it sits beside another store's badge.

   The gap is not a design number either. Both companies require clear space of
   one quarter the badge height, 13px at 52px, and each badge's zone has to be
   clear of the other badge, so the minimum between them is 26px. 1.75rem is
   28px, the nearest round value above it, and it is the row gap too, so the
   stacked arrangement at narrow widths keeps the same clearance. */
.h-stores{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem}
.h-close .h-stores{justify-content:center}
.h-cta--onlight:hover{background:#034b64;border-color:#034b64}

a:focus-visible,.h-cta:focus-visible,.h-brand:focus-visible,.h-skip:focus-visible{
  outline:3px solid var(--foam);outline-offset:3px;border-radius:4px;
}
.h-band--light a:focus-visible,.h-band--light2 a:focus-visible{outline-color:var(--lagoon)}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
.h-eyebrow{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--foam);margin:0 0 1rem;
}
.h-band--light .h-eyebrow,.h-band--light2 .h-eyebrow{color:var(--lagoon)}

.h-h1,.h-h2{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;line-height:1.04;letter-spacing:-.025em;
  color:var(--white);margin:0;text-wrap:balance;
}
.h-h1{font-size:var(--t-hero)}
.h-h2{font-size:var(--t-h2);line-height:1.08}
.h-h2 em,.h-h1 em{font-style:normal;color:var(--foam)}
.h-band--light .h-h2 em,.h-band--light2 .h-h2 em{color:var(--lagoon)}

.h-h3{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:var(--t-h3);line-height:1.25;
  color:var(--white);margin:0 0 .45rem;letter-spacing:-.01em;
}
.h-lede{font-size:var(--t-lede);line-height:1.55;color:var(--spray);margin:1.1rem 0 0;max-width:46ch}
.h-p{font-size:var(--t-body);line-height:1.68;color:var(--quiet);margin:1rem 0 0;max-width:var(--measure)}
.h-fine{font-size:var(--t-micro);line-height:1.6;color:var(--quiet);margin:.9rem 0 0;max-width:44ch}
.h-band--light .h-fine,.h-band--light2 .h-fine{color:var(--ink-quiet)}

.h-rule{
  width:74px;height:3px;border:0;margin:1.35rem 0 0;
  background:var(--reagent);border-radius:2px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.h-hero{display:grid;gap:clamp(2.25rem,5vw,3.5rem);align-items:center}
.h-hero__copy{min-width:0}
.h-hero__art{display:flex;justify-content:center;min-width:0}
.h-hero__actions{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* value chips */
.h-values{
  list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;
  display:grid;gap:1.5rem 1.25rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.h-values li{min-width:0}
.h-values svg{width:26px;height:26px;color:var(--foam);margin-bottom:.6rem}
.h-values b{
  display:block;text-wrap:balance;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.95rem;line-height:1.25;color:var(--white);
}
.h-values span{display:block;margin-top:.25rem;font-size:var(--t-micro);line-height:1.5;color:var(--quiet)}

/* --------------------------------------------------------------------------
   Device frame. Width still caps against the viewport so the phone can never
   overflow, but the cap is now a variable: the product shot is the strongest
   asset on the page and it carries more of it than it did.
   -------------------------------------------------------------------------- */
.h-device{
  --dev-cap:max(200px,74vw);
  position:relative;
  width:min(var(--dev-w),var(--dev-cap));
  flex:none;padding:.5rem;border-radius:2.6rem;
  background:linear-gradient(155deg,#38505f 0%,#16262f 34%,#0a141b 62%,#1b2f3b 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 34px 70px -22px rgba(0,0,0,.82),
    0 0 90px -20px rgba(79,195,232,.42);
}
/* A specular sweep across the bezel, so the frame reads as glass and metal
   rather than a flat rounded rectangle. Decorative, no layout cost. */
.h-device::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 26%,
             rgba(255,255,255,0) 72%,rgba(255,255,255,.10) 100%);
}
.h-device--hero{--dev-w:330px;--dev-cap:max(230px,84vw)}
.h-device__screen{
  border-radius:2.1rem;overflow:hidden;
  background:var(--abyss);
  aspect-ratio:860/1678;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.h-device__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.h-shot{display:flex;flex-direction:column;align-items:center;gap:.85rem;min-width:0;margin:0}
.h-shot figcaption{
  font-size:var(--t-micro);line-height:1.5;color:var(--quiet);
  text-align:center;max-width:26ch;margin:0;
}

/* --------------------------------------------------------------------------
   Alternating feature rows
   -------------------------------------------------------------------------- */
.h-row{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.h-row + .h-row{margin-top:clamp(3.25rem,7vw,5.5rem)}
.h-row__art{display:flex;justify-content:center;min-width:0}
.h-row__copy{min-width:0}

.h-list{list-style:none;margin:1.5rem 0 0;padding:0;max-width:var(--measure)}
.h-list li{
  position:relative;padding-left:1.5rem;margin-top:.7rem;
  font-size:var(--t-body);line-height:1.6;color:var(--quiet);
}
.h-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:2px;background:var(--reagent);border-radius:2px;
}
.h-band--light .h-list li,.h-band--light2 .h-list li{color:var(--ink-quiet)}

.h-note{
  margin:1.6rem 0 0;padding:1rem 1.15rem;max-width:var(--measure);
  border-left:3px solid var(--reagent);
  background:rgba(255,255,255,.045);
  font-size:var(--t-body);line-height:1.6;color:var(--spray);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.h-steps{list-style:none;margin:clamp(2.25rem,4vw,3rem) 0 0;padding:0;display:grid;gap:2rem}
.h-steps li{min-width:0}
.h-steps .h-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;margin-bottom:.85rem;
  background:var(--lagoon);color:#fff;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:.95rem;
}
.h-steps .h-h3{color:var(--ink)}
.h-steps p{margin:.4rem 0 0;font-size:var(--t-body);line-height:1.6;color:var(--ink-quiet)}

/* --------------------------------------------------------------------------
   Two-up frames (Lab + Timeline)
   -------------------------------------------------------------------------- */
/* The Lab is the one screen captured at a wide viewport, so it is shown as a
   flat panel rather than pushed into a phone frame it was never shot in. The
   bezel language is the device's, minus the phone silhouette. */
.h-showcase{
  position:relative;
  margin-top:clamp(2.25rem,5vw,3.25rem);
  display:grid;gap:clamp(1.9rem,3.6vw,2.75rem);
  justify-items:center;
}
.h-shot--wide{width:100%}
.h-shot--wide figcaption{max-width:52ch}

.h-panel{
  position:relative;width:100%;
  padding:.4rem;border-radius:clamp(14px,1.6vw,20px);
  background:linear-gradient(155deg,#38505f 0%,#16262f 34%,#0a141b 62%,#1b2f3b 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 34px 70px -24px rgba(0,0,0,.82),
    0 0 90px -22px rgba(79,195,232,.40);
}
.h-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 26%,
             rgba(255,255,255,0) 72%,rgba(255,255,255,.10) 100%);
}
.h-panel__screen{
  border-radius:clamp(10px,1.2vw,15px);overflow:hidden;
  background:var(--abyss);
  aspect-ratio:1760/918;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.h-panel__screen picture{display:block;width:100%;height:100%}
.h-panel__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
/* The phone crop is a different shape, so the frame follows it. */
@media (max-width:899px){
  .h-panel__screen{aspect-ratio:1335/1234}
}

/* --------------------------------------------------------------------------
   Boundary cards
   -------------------------------------------------------------------------- */
.h-cards{
  list-style:none;margin:clamp(2.25rem,4vw,3rem) 0 0;padding:0;
  display:grid;gap:1.25rem;
}
.h-cards li{
  min-width:0;padding:1.4rem 1.5rem;border-radius:14px;
  background:#ffffff;box-shadow:0 1px 0 rgba(6,33,47,.10),0 10px 26px -20px rgba(6,33,47,.5);
}
.h-cards .h-h3{color:var(--ink);margin-bottom:.5rem}
.h-cards p{margin:0;font-size:var(--t-body);line-height:1.62;color:var(--ink-quiet)}
.h-band--light2 .h-cards li{background:#fbfdfe}

.h-after{margin-top:1.75rem;font-size:var(--t-body)}
.h-after a{color:var(--lagoon);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(4,96,127,.45)}
.h-after a:hover{border-bottom-color:var(--lagoon)}
.h-after--dark{margin-top:1.4rem;font-size:var(--t-micro)}
.h-after--dark a{color:var(--foam);border-bottom-color:rgba(159,226,242,.45)}
.h-after--dark a:hover{color:var(--white);border-bottom-color:var(--foam)}

/* --------------------------------------------------------------------------
   HQ+ tease
   -------------------------------------------------------------------------- */
.h-hq{max-width:64ch}
.h-hq__soon{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none;
}
.h-hq__soon li{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:var(--t-micro);letter-spacing:.04em;
  padding:.5rem .9rem;border-radius:999px;
  background:rgba(4,96,127,.10);color:var(--lagoon);
  border:1px solid rgba(4,96,127,.28);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.h-close{text-align:center;display:flex;flex-direction:column;align-items:center}
.h-close img{width:84px;height:84px;margin-bottom:1.25rem}
.h-close .h-h2{max-width:18ch}
.h-close .h-lede,.h-close .h-fine{max-width:44ch;text-align:center}
.h-close .h-cta,.h-close .h-stores{margin-top:1.9rem}
.h-close .h-rule{margin-inline:auto}


/* --------------------------------------------------------------------------
   Responsive. 900px is the desktop switch, matching the previous site.
   -------------------------------------------------------------------------- */
@media (min-width:620px){
  .h-values{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem 1.75rem}
  .h-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  :root{--dev-w:360px}
  .h-hero{grid-template-columns:minmax(0,1fr) minmax(0,.98fr)}
  .h-row{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .h-row--flip .h-row__art{order:-1}
  .h-device--hero{--dev-w:430px}
}
@media (min-width:1280px){
  :root{--dev-w:400px}
  .h-device--hero{--dev-w:500px}
}

/* Respect the site-wide motion contract. Nothing here animates on its own;
   this only pins the inherited water layers on this page too. */
@media (prefers-reduced-motion:reduce){
  .h-device{box-shadow:0 0 0 1px rgba(255,255,255,.10),0 26px 60px -20px rgba(0,0,0,.75)}
}

@media (forced-colors:active){
  .h-device,.h-cards li,.h-note{border:1px solid CanvasText}
  .h-rule,.h-list li::before{background:CanvasText;forced-color-adjust:none}
}

@media print{
  .h-band{background:#fff !important;color:#000 !important}
  .h-h1,.h-h2,.h-h3,.h-lede,.h-p,.h-fine,.h-list li{color:#000 !important}
  .h-device{box-shadow:none;background:#fff}
}

/* ==========================================================================
   VISUAL POLISH PASS — depth, light and plates
   Appended as one block so it can be reviewed, and reverted, on its own.
   Structure, markup and copy are unchanged; this is lighting and scale.
   Every value below was re-run through the contrast suite.
   ========================================================================== */

/* --- Hero: a stage, not a row ------------------------------------------- */
.h-band--hero{
  min-height:min(90svh,900px);
  display:flex;align-items:center;
  overflow:hidden;                       /* the glows are oversized on purpose */
}
.h-band--hero > .h-shell{width:100%;position:relative;z-index:1}

/* The bloom sits behind the DEVICE, not across the hero, so the copy column
   keeps the measured ground it was verified against. */
.h-hero__art,.h-row__art{position:relative;isolation:isolate}
/* inset is clipped by .h-band{overflow:clip}; the bands are the clip box so a
   glow can never widen the document. */
.h-hero__art::before,.h-row__art::before{
  content:"";position:absolute;inset:-20% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 44%,
    rgba(96,208,246,.42) 0%, rgba(79,195,232,.16) 40%, rgba(79,195,232,0) 72%);
}
/* The row glow is pulled in horizontally so it lights the device without
   spilling into the copy column: at -14% it cost the body list 0.4 of its
   contrast margin. */
.h-row__art::before{
  /* Single column below 900px: the art sits directly under the copy, so the
     glow is kept inside its own row rather than washing the list above it. */
  inset:-4% -5%;
  background:radial-gradient(ellipse at 50% 46%,
    rgba(96,208,246,.26) 0%, rgba(79,195,232,.08) 44%, rgba(79,195,232,0) 74%);
}
/* Light pooling on the floor under the phone. */
.h-hero__art::after{
  content:"";position:absolute;left:50%;translate:-50% 0;bottom:-6%;
  width:86%;height:13%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(120,215,255,.34) 0%, rgba(120,215,255,.08) 52%, rgba(120,215,255,0) 78%);
}

/* --- Dark sequence: three different rooms, not one corridor -------------- */

/* A lit hairline where each dark band ends, so the sequence has seams. */
.h-band--d1::after,.h-band--d2::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(159,226,242,.34) 50%,transparent 96%);
}

/* d3 gets an overhead spotlight, which reads as deeper water with one light
   source rather than more navy. */
.h-band--d3{overflow:hidden}
.h-band--d3::before{
  content:"";position:absolute;left:50%;top:-14%;translate:-50% 0;
  width:min(140%,1500px);aspect-ratio:2/1;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(110,205,245,.20) 0%, rgba(110,205,245,.06) 42%, rgba(110,205,245,0) 72%);
}
.h-band--d3 > .h-shell{position:relative;z-index:1}

/* The middle section becomes a raised plate. Its ground is DARKER than the
   band it sits on, so it breaks the rhythm and improves contrast at once. */
.h-plate{
  position:relative;
  border-radius:clamp(20px,2.6vw,30px);
  padding:clamp(1.6rem,4vw,3.25rem);
  background:linear-gradient(162deg,rgba(9,44,67,.72) 0%,rgba(2,18,31,.88) 58%,rgba(6,32,50,.80) 100%);
  border:1px solid rgba(159,226,242,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 46px 100px -50px rgba(0,0,0,.92);
}

/* --- HQ+ : a jewel on the pale band ------------------------------------- */
.h-hq{
  /* The 64ch measure from the plain version belonged to bare text on a pale
     band. As a card inside the shell it takes the shell's width, and the copy
     inside it keeps its own measure. */
  max-width:none;
  position:relative;overflow:hidden;
  border-radius:clamp(20px,2.6vw,30px);
  padding:clamp(1.9rem,4.5vw,3.4rem);
  background:linear-gradient(152deg,#07334f 0%,#04203a 52%,#062c43 100%);
  border:1px solid rgba(159,226,242,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 44px 90px -46px rgba(4,42,64,.85);
}
.h-hq::before{
  content:"";position:absolute;right:-12%;top:-42%;
  width:62%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(120,215,255,.30) 0%, rgba(120,215,255,.08) 46%, rgba(120,215,255,0) 72%);
}
.h-hq > *{position:relative}
/* Inks flip back to the dark-ground set inside the card. */
.h-band--light2 .h-hq .h-eyebrow{
  color:var(--abyss);background:var(--foam);
  display:inline-block;padding:.34rem .72rem;border-radius:999px;
  letter-spacing:.12em;margin-bottom:1.15rem;
}
.h-band--light2 .h-hq .h-h2{color:var(--white)}
.h-band--light2 .h-hq .h-h2 em{color:var(--foam)}
.h-band--light2 .h-hq .h-p{color:var(--spray);max-width:52ch}
.h-band--light2 .h-hq .h-fine{color:var(--quiet)}
.h-band--light2 .h-hq .h-hq__soon li{
  background:rgba(159,226,242,.12);color:var(--foam);
  border-color:rgba(159,226,242,.42);
}

/* --- Closing band gets the same overhead light --------------------------- */
.h-band--cta{overflow:hidden}
.h-band--cta::before{
  content:"";position:absolute;left:50%;top:-30%;translate:-50% 0;
  width:min(120%,1200px);aspect-ratio:2/1;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(110,205,245,.18) 0%, rgba(110,205,245,0) 68%);
}
.h-band--cta > .h-shell{position:relative;z-index:1}

/* --- Desktop: a product shot, slightly turned --------------------------- */
@media (min-width:900px){
  .h-row__art::before{inset:-18% -5%}
  .h-device--hero{
    transform:perspective(2000px) rotateY(-7deg) rotateX(1.2deg);
    transform-origin:60% 50%;
  }
  .h-row .h-device{transform:perspective(2200px) rotateY(5deg)}
  .h-row--flip .h-device{transform:perspective(2200px) rotateY(-5deg)}
  /* Panel and phone sit side by side, bottoms aligned, like a product family
     shot. Neither is turned: the Lab panel is wide enough that a tilt would
     start to cost legibility of real UI text. */
  .h-showcase{grid-template-columns:minmax(0,1fr) auto;align-items:end;justify-items:stretch}
  .h-showcase .h-shot{align-items:center}
  .h-showcase .h-device{--dev-w:250px;transform:none}
}

/* The tilt is decoration, not information. Forced-colors users get it flat. */
@media (forced-colors:active){
  .h-device{transform:none !important}
  .h-panel{border:1px solid CanvasText}
  .h-hero__art::before,.h-hero__art::after,.h-row__art::before,
  .h-band--d3::before,.h-band--cta::before,.h-hq::before{display:none}
}
@media print{
  .h-device,.h-panel{transform:none !important;box-shadow:none}
  .h-plate,.h-hq{background:#fff !important;border-color:#ccc}
}

/* The paired frames are a supporting exhibit, not a hero: they get their own,
   smaller device size so they never outgrow their grid columns. */
.h-showcase .h-device{--dev-w:270px;--dev-cap:max(180px,62vw)}

/* Phones: the masthead pill is an in-page jump to a status that is repeated
   400px below it. At this width it costs two wrapped lines in the header for
   no information, so it stands down and the wordmark gets the room. */
@media (max-width:559px){
  .h-top .h-cta--ghost{display:none}
  .h-brand span{white-space:nowrap;font-size:1.02rem}
}

/* ==========================================================================
   LAUNCH POLISH — HQ+ chips, boundaries weight, closing statement
   ========================================================================== */

/* --- HQ+ : three planned ideas, each carrying its own "Planned" tag so the
       label cannot be skimmed past. Repetition here is the honesty. -------- */
.h-band--light2 .h-hq .h-hq__soon{gap:.6rem}
.h-band--light2 .h-hq .h-hq__soon li{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .9rem .45rem .5rem;
  font-weight:500;letter-spacing:0;font-size:.82rem;
  color:var(--spray);background:rgba(159,226,242,.09);
  border-color:rgba(159,226,242,.34);
}
.h-band--light2 .h-hq .h-hq__soon li span{
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:999px;
  background:var(--foam);color:var(--abyss);
}

/* --- Boundaries: same three messages, a quieter room -------------------- */
/* This section earns its place on trust, not on scale. It keeps its heading,
   its three statements and its link to the full Disclaimer, and gives back
   the visual weight of a product-feature section: shorter band, smaller
   heading, and flat panels instead of lifted white cards. */
.h-band--limits{padding-block:clamp(2.35rem,5vw,4.25rem)}
.h-band--limits .h-h2{font-size:clamp(1.45rem,2.7vw,2rem);line-height:1.12}
.h-band--limits .h-p{margin-top:.7rem;font-size:var(--t-body);line-height:1.55;max-width:56ch}
.h-band--limits .h-cards{margin-top:clamp(1.35rem,3vw,2rem);gap:.85rem}
.h-band--limits .h-cards li{
  background:transparent;box-shadow:none;
  border-top:2px solid rgba(4,96,127,.30);
  border-radius:0;padding:.85rem .1rem 0;
}
.h-band--limits .h-cards .h-h3{font-size:1rem;margin-bottom:.35rem}
.h-band--limits .h-cards p{font-size:.94rem;line-height:1.55}
.h-band--limits .h-after{margin-top:1.4rem;font-size:.94rem}

/* --- The close: the last thing read, and the point of the page ---------- */
.h-band--cta{padding-block:clamp(5rem,9vw,7.5rem)}
.h-close img{width:clamp(88px,9vw,104px);height:auto;margin-bottom:1.4rem}
.h-close .h-h2{max-width:22ch;font-size:clamp(1.95rem,4.4vw,3.15rem)}
.h-line{display:block}
.h-line + .h-line{margin-top:.12em}
.h-signature{
  margin:1.3rem 0 0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.05rem,2.1vw,1.32rem);
  letter-spacing:.005em;color:var(--spray);
}
.h-close .h-cta,.h-close .h-stores{margin-top:2.1rem}

/* ==========================================================================
   SITE SHELL — document pages and the shared three-column footer
   These rules are what make /support/, /privacy/, /terms/, /disclaimer/,
   /delete-data/ and /about/ part of the same site as the homepage. They style
   the chrome only: the reading column inside them is still governed by the
   .doc rules in site.css, which is not modified.
   ========================================================================== */

/* --- the document band ---------------------------------------------------
   body.doc already quietens the water through site.css, because readability
   wins on these pages. The band adds a known ground under the type and the
   page's horizontal gutter, since .doc__body sits in it directly rather than
   inside an .h-shell. */
.h-band--doc{
  padding-inline:var(--gutter);
  padding-block:clamp(2.25rem,5vw,3.75rem) clamp(2rem,5vw,3.5rem);
  background:linear-gradient(180deg,rgba(2,22,39,.52) 0%,rgba(2,22,39,.70) 100%);
}

/* --- the footer, shared by every page -----------------------------------
   Three link columns beside the identity block. It is a designed object, not
   a list: the mark and the tagline carry the brand, the columns carry the
   navigation, and a hairline separates the legal line beneath them. */
.h-foot{
  position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(2,22,39,.93) 0%,rgba(2,22,39,.97) 100%);
  box-shadow:inset 0 1px 0 rgba(159,226,242,.16);
  padding-block:clamp(2.75rem,6vw,4.25rem) clamp(1.5rem,3vw,2.25rem);
}
.h-foot__grid{
  display:grid;gap:clamp(2rem,4vw,3.25rem);
  align-items:start;
}
.h-foot__brand img{width:46px;height:46px;margin-bottom:.85rem}
.h-foot__name{
  margin:0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--white);
}
.h-foot__tag{margin:.3rem 0 0;font-size:var(--t-micro);line-height:1.55;color:var(--quiet);max-width:24ch}
.h-foot__mail{margin:1rem 0 0;font-size:var(--t-micro)}
.h-foot__mail a{
  color:var(--foam);text-decoration:none;
  border-bottom:1px solid rgba(159,226,242,.4);
}
.h-foot__mail a:hover{color:var(--white);border-bottom-color:var(--foam)}

.h-foot__cols{
  display:grid;gap:1.75rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));
}
.h-foot__h{
  margin:0 0 .35rem;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--foam);
}
.h-foot__col ul{list-style:none;margin:0;padding:0}
.h-foot__col li{margin:0}
.h-foot__col a{
  display:inline-block;padding-block:.55rem;   /* 44px tap target with the line box */
  font-size:.92rem;line-height:1.35;color:var(--quiet);
  text-decoration:none;border-bottom:1px solid transparent;
}
.h-foot__col a:hover{color:var(--white);border-bottom-color:rgba(255,255,255,.45)}
.h-foot__col a[aria-current="page"]{color:var(--spray)}

.h-foot__base{
  margin-top:clamp(2rem,4vw,2.75rem);
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.h-foot__base p{margin:0;font-size:var(--t-micro);line-height:1.6;color:var(--quiet)}

@media (min-width:760px){
  .h-foot__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr)}
  .h-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (forced-colors:active){
  .h-foot{border-top:1px solid CanvasText}
  .h-foot__base{border-top-color:CanvasText}
}
@media print{
  .h-foot{background:#fff !important}
  .h-foot__name,.h-foot__tag,.h-foot__h,.h-foot__col a,.h-foot__base p{color:#000 !important}
}

/* site.css styles every link inside `.doc` as an underlined document link,
   at a specificity the chrome's own rules do not beat. The masthead, the skip
   link and the footer address are chrome, not document text, so they opt out
   here rather than by editing site.css. */
.doc .h-brand,
.doc .h-skip,
.doc .h-foot__mail a,
.doc .h-foot__col a{text-decoration:none}
.doc .h-brand{color:var(--white)}
.doc .h-brand:hover span{color:var(--foam)}

/* ==========================================================================
   HOW IT WORKS — a conversion page, not a walkthrough
   Hook, proof, payoff. The screenshots make the argument; the type names each
   beat and gets out of the way. Appended as its own block so it can be
   reviewed, and reverted, on its own. Additive: nothing above is modified,
   and every selector is either new or scoped to .hiw, because the homepage
   and the document pages are production.
   ========================================================================== */

/* --- HOOK ---------------------------------------------------------------
   The first viewport has to carry the whole proposition, so the hero keeps
   the homepage's stage height and puts a real screen in it. The h1 is two
   lines by design: the promise, then the payoff. */
/* The hook's first line has to hold together: at the homepage's hero size it
   broke as "Test your / water." in this narrower copy column. A notch down
   keeps line one whole and lets line two break where the sense does. */
.hiw .h-h1{font-size:clamp(2.35rem,6.1vw,3.85rem)}
.hiw .h-h1 .h-line{display:block}
.hiw .h-h1 .h-line + .h-line{color:var(--foam)}
.hiw .h-band--hero .h-lede{max-width:40ch}

/* --- PROOF: the two inputs ----------------------------------------------
   Everything the homeowner does, side by side, so the amount of work is
   visible at a glance rather than described. Two columns from 900px; the
   captures are wide, so below that they stack rather than shrink. */
.h-duo{
  display:grid;gap:clamp(2.75rem,6vw,4rem);
  margin-top:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:900px){ .h-duo{grid-template-columns:repeat(2,minmax(0,1fr))} }
.h-in__label{margin:0 0 .55rem}
.h-in h3{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.45rem,2.7vw,1.95rem);
  color:var(--white);margin:0;text-wrap:balance;
}
/* The one line that answers the headline. Bigger than the qualification
   underneath it, smaller than the hero lede, so the three tiers of the
   section read in the right order at a glance. */
.h-say{
  margin:.85rem 0 0;max-width:34ch;
  font-size:clamp(1.02rem,1.6vw,1.14rem);line-height:1.5;color:var(--spray);
}
.h-band--light .h-say,.h-band--light2 .h-say{color:var(--ink-quiet)}
.h-in figure{margin-top:clamp(1.5rem,3vw,2rem)}

/* The subordinate truths. They have to be on the page and they have to be
   accurate; they do not have to compete with the headline above them. */
.h-aside{
  margin:.85rem 0 0;max-width:46ch;
  font-size:var(--t-micro);line-height:1.65;color:var(--quiet);
}
.h-aside a{color:var(--foam);text-decoration:none;border-bottom:1px solid rgba(159,226,242,.45)}
.h-aside a:hover{color:var(--white);border-bottom-color:var(--foam)}
.h-aside--centre{
  margin:clamp(2.25rem,4vw,3rem) auto 0;max-width:52ch;text-align:center;
}
.h-band--light .h-aside,.h-band--light2 .h-aside{color:var(--ink-quiet)}
.h-band--light .h-aside a,.h-band--light2 .h-aside a{
  color:var(--lagoon);border-bottom-color:rgba(4,96,127,.45);
}

/* --- The hand-off: the page's biggest moment ----------------------------
   Two lines, no paragraph, a whole band. It is the hinge of the argument:
   everything above it is the homeowner, everything below it is the app. */
.h-band--handoff{
  padding-block:clamp(5rem,13vw,9rem);
  text-align:center;
}
.h-handoff{
  margin:0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(2.6rem,8.5vw,5.25rem);
  color:var(--ink);text-wrap:balance;
}
.h-handoff .h-line + .h-line{margin-top:.06em;color:var(--lagoon)}
.h-band--handoff .h-rule{margin-inline:auto}

/* --- PAYOFF: three benefits, three real screens -------------------------
   Not numbered. After the hand-off these are not steps the visitor performs,
   they are what they get, so they read as a product family shot rather than
   as instructions three, four and five. */
.h-bens{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(3rem,6vw,3.5rem);
}
@media (min-width:860px){ .h-bens{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* The three frames have to line up, and the headings and notes above them do
   not have the same number of lines. The cells stretch to the tallest, the
   note absorbs the slack, and the frames land on the same baseline without a
   fixed height that would clip a longer heading at another breakpoint. */
.h-ben{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.h-ben h3{
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(1.35rem,2.4vw,1.72rem);
  color:var(--white);margin:0;text-wrap:balance;max-width:20ch;
}
.h-ben p{
  margin:.7rem 0 auto;max-width:26ch;
  font-size:var(--t-micro);line-height:1.65;color:var(--quiet);
}
.h-ben figure{margin-top:clamp(1.6rem,3.2vw,2.25rem)}
.h-bens .h-device{--dev-w:270px;--dev-cap:max(190px,64vw);transform:none}
@media (min-width:860px){ .h-bens .h-device{--dev-w:250px;--dev-cap:max(190px,26vw)} }
@media (min-width:1280px){ .h-bens .h-device{--dev-w:300px} }

/* A progression, not three equal cards. Desktop only: the stacked phone
   treatment is already right and is left alone.

   Two cues, both of which keep the frames the same size and on the same
   baseline, because the alignment is what makes the row feel considered:

   1. An accent bar under each heading that grows across the row. It is the
      page's own --reagent, used as a graphic and never as text, and it reads
      as a build rather than as three repeats.
   2. Depth. The first frame sits back, the second is neutral and the third
      is lifted and lit, so the eye travels left to right and lands on the
      one that says the product keeps your history. Nothing moves, nothing
      resizes, and the screenshots themselves are untouched. */
@media (min-width:860px){
  .h-ben h3::after{
    content:"";display:block;height:3px;border-radius:2px;
    margin:.85rem auto 0;background:var(--reagent);
  }
  .h-ben:nth-child(1) h3::after{width:26px;opacity:.55}
  .h-ben:nth-child(2) h3::after{width:44px;opacity:.78}
  .h-ben:nth-child(3) h3::after{width:62px;opacity:1}
}
@media (min-width:860px) and (prefers-reduced-motion:no-preference){
  .h-bens .h-ben:nth-child(1) .h-device{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10),
      inset 0 1px 0 rgba(255,255,255,.18),
      0 24px 54px -24px rgba(0,0,0,.76),
      0 0 84px -28px rgba(79,195,232,.24);
  }
  .h-bens .h-ben:nth-child(3) .h-device{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.16),
      inset 0 1px 0 rgba(255,255,255,.26),
      0 42px 86px -20px rgba(0,0,0,.88),
      0 0 112px -12px rgba(79,195,232,.58);
  }
}
@media (forced-colors:active){
  .h-ben h3::after{background:CanvasText;forced-color-adjust:none}
}

/* --- The emotional payoff ----------------------------------------------
   Three short lines, nothing else on the band. It is the only place on the
   page that talks about the person rather than the product. */
.h-band--payoff{padding-block:clamp(4rem,10vw,7rem);text-align:center}
.h-payoff{
  margin:0;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.026em;line-height:1.06;
  font-size:clamp(2.1rem,6vw,3.85rem);
  color:var(--ink);text-wrap:balance;
}
.h-payoff .h-line:last-child{color:var(--lagoon)}

/* --- The safety note: quiet confidence, not another section -------------
   The limits still have to be on the page. They do not have to be a section
   with a heading and three cards. One slim strip, one sentence, one link. */
.h-band--safety{
  padding-block:clamp(1.9rem,4vw,2.75rem);
  background:rgba(2,22,39,.90);
  box-shadow:inset 0 1px 0 rgba(159,226,242,.14);
}
.h-safety{
  margin:0 auto;max-width:62ch;text-align:center;
  font-size:var(--t-micro);line-height:1.7;color:var(--quiet);
}
.h-safety a{color:var(--foam);text-decoration:none;border-bottom:1px solid rgba(159,226,242,.45)}
.h-safety a:hover{color:var(--white);border-bottom-color:var(--foam)}

/* --- Panel shapes --------------------------------------------------------
   .h-panel__screen carries the Lab's aspect ratio. These two captures are
   different shapes, and each swaps to an art-directed crop at the same 900px
   breakpoint the Lab uses, so the frame has to follow both. */
.h-panel--setup  .h-panel__screen{aspect-ratio:1760/892}
.h-panel--sample .h-panel__screen{aspect-ratio:1760/706}
@media (max-width:899px){
  .h-panel--setup  .h-panel__screen{aspect-ratio:924/670}
  .h-panel--sample .h-panel__screen{aspect-ratio:1216/370}
}

/* Captions do more of the work here than on the homepage, so they get a
   little more room. Scoped: .h-shot figcaption is the homepage's too. */
.hiw .h-shot figcaption{max-width:32ch}
.hiw .h-shot--wide figcaption{max-width:40ch}

@media print{
  .h-handoff,.h-handoff .h-line + .h-line,
  .h-payoff,.h-payoff .h-line:last-child{color:#000}
  .h-band--safety{background:#fff}
}

/* ==========================================================================
   PRIMARY NAVIGATION
   Home, How It Works and About. Support and the legal pages stay in the
   footer, where they already are, and appear up here only inside the compact
   Menu, which is the one place a phone has nothing else to fall back on.

   Everything is additive and none of it touches .h-top or .h-brand, so the
   five document pages, which carry a brand-only masthead and no .h-top__end,
   render exactly as they do today.
   ========================================================================== */

/* The right-hand group. .h-top is justify-content:space-between with two
   children, brand and this, which is the same two-child layout it has always
   had. Nothing about the bar's geometry changes. */
.h-top__end{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);min-width:0}

/* --- Desktop: links, not a navbar ---------------------------------------
   No bar, no panel, no background. Two words at the weight of the wordmark,
   sitting in the masthead's own scrim. */
.h-nav{display:none}
@media (min-width:900px){
  .h-nav{display:flex;align-items:center;gap:clamp(1.35rem,2.6vw,2.25rem)}
  .h-nav a{
    position:relative;display:inline-block;
    padding-block:.45rem;
    font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
    font-weight:600;font-size:.95rem;letter-spacing:-.005em;
    color:var(--spray);text-decoration:none;
  }
  .h-nav a:hover{color:var(--white)}
  /* The active state is the page's own accent, at the weight of the hero
     rule: a 2px --foam underline. It marks the page without building a tab. */
  .h-nav a[aria-current="page"]{color:var(--white)}
  .h-nav a[aria-current="page"]::after{
    content:"";position:absolute;left:0;right:0;bottom:-.1rem;
    height:2px;border-radius:2px;background:var(--foam);
  }
}

/* --- Phones: one Menu, opened by the platform ---------------------------
   <details> is the whole interaction. It is keyboard operable, announced as
   expanded or collapsed, and works with JavaScript off, which this site
   requires everywhere else too. */
@media (min-width:900px){ .h-menu{display:none} }
.h-menu > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:.55rem .95rem .55rem 1.05rem;border-radius:999px;
  background:rgba(2,22,39,.72);
  border:1px solid rgba(159,226,242,.55);
  color:var(--foam);
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:.92rem;
}
.h-menu > summary::-webkit-details-marker{display:none}
.h-menu > summary::marker{content:""}
.h-menu > summary svg{width:15px;height:15px;flex:none}
.h-menu[open] > summary{background:rgba(159,226,242,.12);color:var(--white)}
.h-menu[open] > summary svg{rotate:180deg}
.h-menu > summary:focus-visible{outline:3px solid var(--foam);outline-offset:3px}

/* A closed <details> hides its content visually but still lays it out, and an
   absolutely positioned child of one ends up as a 90x183 box in the top right
   of the page: invisible, but occupying space that can take a tap. Closed
   means gone. */
.h-menu:not([open]) .h-menu__panel{display:none}

/* The panel hangs off the masthead, which is already position:relative, so it
   covers the top of the page rather than pushing the hero down. */
.h-menu__panel{
  position:absolute;left:0;right:0;top:100%;z-index:3;
  display:flex;flex-direction:column;
  padding:.25rem var(--gutter) .85rem;
  /* Opaque, not nearly-opaque. At .97 a 3% ghost of the hero headline read
     through the menu, which looks like a bug rather than like depth. */
  background:var(--abyss);
  box-shadow:inset 0 1px 0 rgba(159,226,242,.18),0 26px 44px -26px rgba(0,0,0,.92);
}
.h-menu__panel a{
  display:flex;align-items:center;min-height:52px;
  font-family:'PH Display',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;font-size:1.02rem;
  color:var(--spray);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.h-menu__panel a:last-child{border-bottom:0}
.h-menu__panel a:hover{color:var(--white)}
.h-menu__panel a[aria-current="page"]{color:var(--foam)}

/* Below 560px the store pill already stood down so the wordmark could keep
   the room. The Menu takes that side of the bar instead. */
@media (max-width:559px){
  .h-menu > summary{padding-inline:.85rem .8rem}
}

/* At 320px the wordmark and the Menu together came to 306px inside a 280px
   bar and pushed the document 5px wide. Both give a little back, and all of
   it is scoped to .h-top--nav, so the five document pages, which carry a
   brand-only masthead, keep the metrics they already have. */
@media (max-width:420px){
  .h-top--nav{gap:.6rem}
  .h-top--nav .h-brand{gap:.5rem}
  .h-top--nav .h-brand img{width:34px;height:34px}
  .h-top--nav .h-brand span{font-size:.94rem}
  .h-top--nav .h-menu > summary{
    gap:.3rem;font-size:.87rem;padding:.55rem .7rem .55rem .8rem;
  }
  .h-top--nav .h-menu > summary svg{width:13px;height:13px}
}
/* 320px is the narrowest width the suite tests, and the one with the least
   room to spare. A second, smaller step there keeps real headroom rather than
   fitting by two pixels. */
@media (max-width:339px){
  .h-top--nav .h-brand img{width:31px;height:31px}
  .h-top--nav .h-brand span{font-size:.88rem}
}

@media (forced-colors:active){
  .h-nav a[aria-current="page"]::after{background:CanvasText;forced-color-adjust:none}
  .h-menu > summary{border:1px solid CanvasText}
  .h-menu__panel{border:1px solid CanvasText}
}
@media print{
  .h-nav,.h-menu{display:none}
}

/* ==========================================================================
   HOW IT WORKS: a different place
   --------------------------------------------------------------------------
   Home and this page were the same composition — copy left, the same phone
   right, the same water behind both — so clicking How it works did not feel
   like arriving anywhere. Three things change here, and only here:

     the composition reverses          product left, copy right
     the product stands in a scene     the app's own evening environment
     the copy rises                    into the upper third, beside the panel

   Everything else is deliberately identical to Home: masthead, navigation,
   type, colour, the water behind the rest of the page, and every word on the
   page. The reversal is desktop-only — it is done with `order`, not with
   markup — so the reading order below 900px is still copy, then visual.
   ========================================================================== */

/* The scene panel. A 5:6 frame holding the app's evening environment, with the
   phone standing in it: top inside the frame, bottom bleeding out, so the
   scene reads as ground rather than as a picture behind a picture.

   The image is the supplied landscape render, uncropped on disk and framed
   here by background-position. 68% is shifted right of centre on purpose: a
   5:6 window onto a 16:9 source shows 47% of its width, and this is the
   offset that keeps the sunset on the left while bringing the pool's waterfall
   into frame on the right. The phone lands on the quiet horizon band between
   them. */
.hiw .h-hero__art{
  position:relative;overflow:hidden;border-radius:20px;
  aspect-ratio:5/6;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:clamp(1.25rem,3vw,2.25rem);
  background-color:var(--abyss);
  background-image:
    linear-gradient(180deg,rgba(2,22,39,.10) 0%,rgba(2,22,39,.16) 45%,rgba(2,22,39,.46) 100%),
    url('/assets/img/scene-evening-1200.webp');
  background-size:cover;background-position:68% 50%;background-repeat:no-repeat;
  box-shadow:0 34px 76px -30px rgba(0,0,0,.82), inset 0 0 0 1px rgba(255,255,255,.14);
}
/* The 1200 is 144 KB and the 1672 is 236 KB. Narrow viewports get the smaller
   one: the panel is 350px there, so the larger file buys nothing it can show. */
@media (min-width:900px){
  .hiw .h-hero__art{background-image:
    linear-gradient(180deg,rgba(2,22,39,.10) 0%,rgba(2,22,39,.16) 45%,rgba(2,22,39,.46) 100%),
    url('/assets/img/scene-evening-1672.webp')}
}
/* The homepage's bloom and floor pooling are lighting for a phone floating in
   open water. Inside a lit scene they read as haze, so they come off. */
.hiw .h-hero__art::before,
.hiw .h-hero__art::after{display:none}
.hiw .h-device--hero{--dev-w:250px}

@media (min-width:900px){
  /* Reversed, and the visual column takes the larger share so the scene has
     room to be a place rather than a backdrop. */
  .hiw .h-hero{
    grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
    gap:clamp(2.25rem,4.5vw,3.5rem);
    align-items:center;
  }
  .hiw .h-hero__art{order:-1}
  /* The copy column is short next to a 702px panel, so centring dropped the
     headline to 490px — below the fold's upper third on every desktop size
     measured. Pinned to the top of the stage and pushed down by a measured
     amount instead: h1 lands at 250 at 1440x900, 240 at 1280x800 and 298 at
     1920x1080, inside the upper third in all three. */
  .hiw .h-hero__copy{align-self:start;padding-top:clamp(3.25rem,6.2vw,6.5rem)}
  /* Turned toward the copy, which is now on the other side. */
  .hiw .h-device--hero{
    --dev-w:380px;
    transform:perspective(2000px) rotateY(7deg) rotateX(1.2deg);
    transform-origin:40% 50%;
  }
  /* The transition out of the hero. The scene panel ends in open water, and
     the two paddings below it stacked to 179-225px of it depending on width:
     a runway rather than a pause. Cut to 115-169px, which still reads as a
     deliberate break between the hook and the first instruction. Measured
     from the bottom of .h-hero__art to the top of the WHAT YOU DO eyebrow:
     1280 179 -> 115, 1440 192 -> 124, 1512 192 -> 120, 1920 225 -> 169.
     Inside this query, so the 110px mobile transition is untouched. */
  .hiw .h-band--hero{padding-bottom:clamp(2rem,3.5vw,3rem)}
  .hiw .h-band--hero + .h-band{padding-top:clamp(3rem,5.5vw,4.5rem)}

  /* ---- the desktop hero shows the app window, not a phone ----

     Below 900px the hero is unchanged: the evening scene panel with the phone
     on it, carrying the crop of this capture that fits a phone screen. From
     900px up the same capture is shown whole, because that is where the pH
     mark, the pool's own identity, the weather and the navigation become
     readable and start doing work the crop cannot do.

     The window brings its own pool scene, so the evening panel behind it would
     be scene on scene; it comes off rather than competing. The phone frame is
     unstyled rather than replaced, so there is still one image and one element
     at both sizes and no second copy of the hero in the markup. */
  .hiw .h-hero__art{
    aspect-ratio:auto;background:none;box-shadow:none;
    padding-top:0;display:block;overflow:visible;
  }
  .hiw .h-device--hero{
    --dev-w:100%;--dev-cap:100%;
    width:100%;padding:0;border-radius:14px;background:none;transform:none;
    box-shadow:0 30px 70px -26px rgba(0,0,0,.86), 0 0 0 1px rgba(255,255,255,.14);
  }
  /* The bezel sweep is lighting for a phone. There is no phone here. */
  .hiw .h-device--hero::before{display:none}
  .hiw .h-device--hero .h-device__screen{
    border-radius:inherit;aspect-ratio:2090/1471;box-shadow:none;
  }

  /* The window is landscape where the phone was portrait, so it needs more of
     the row. 1.4fr is as far as the split can go before "what to do next."
     breaks from three lines to five: the copy column holds at 463px and breaks
     at 453. The hero band alone is given a wider shell to buy the panel the
     rest of the width it wants; every other band keeps the 1200px shell. */
  .hiw .h-band--hero .h-shell{max-width:1320px}
  .hiw .h-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}

  /* min-height was sized for a portrait phone. A landscape panel is roughly
     240px shorter, so keeping it would reopen the transition this pass closed:
     measured 187 at 1280 and 288 at 1920. Letting the band take its content's
     height holds the gap at 115-120 across every width. */
  .hiw .h-band--hero{min-height:auto}
}
@media (min-width:1280px){ .hiw .h-device--hero{--dev-w:400px} }

/* The tilt is decoration, not information. */
@media (forced-colors:active){
  .hiw .h-hero__art{background-image:none}
}
@media print{
  .hiw .h-hero__art{background-image:none;box-shadow:none;aspect-ratio:auto;display:block}
}