/* AquaOpps — the website (constitution §33). site/styles.css
 *
 * TAKEN, NOT REDESIGNED. Every value below comes from brand/web-brief/design-2026-08-22.html, the 22 Aug design
 * artifact, and its tokens were themselves transcribed from dashboard/tailwind.config.js. The site must look like
 * the app: somebody who reads this page and then opens the product should never wonder if it is the same company.
 * Three blocks only — the tokens, the scroll-reveal primitives, and the site layer. The artifact's other three
 * tabs (System, Graphics, Copy) are design notes and ship NOTHING here.
 *
 * Never green, amber or red decoratively: in the product those three mean in range, warning and critical, and a
 * green flourish on a landing page devalues the one place green is a claim about whether a pool is safe.
 */

/* ---------------------------------------------------------------- tokens (from the product's tailwind config) */
:root{
  /* Values transcribed from AquaOpps dashboard/tailwind.config.js. Do not drift from it. */
  --canvas:#EDF2F4; --surface:#FFFFFF;
  --ink:#14242B; --ink-soft:#5A6B72; --ink-faint:#8A989E;
  --line:#E3EAED; --line-soft:#EEF2F4;
  --deep-1:#0B2C39; --deep-2:#0E4D64; --deep-3:#0B3A4D;
  --accent:#18A8C9; --accent-deep:#0E7E9A; --accent-soft:#E3F4F8;
  /* Semantic only. Never decorative. Present so the System view can cite them. */
  --ok:#2E9E5B; --warn:#C7841A; --crit:#CE4040;

  --display:'Archivo',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;

  --container:1120px; --nav-h:72px;
  --r:10px; --r-xs:6px;
  /* bar.md mechanism 7: nothing resolves faster than 400ms */
  --t:.42s; --ease-soft:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:600 17px/1.6 var(--sans);color:var(--ink-soft);background:var(--paper);-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 28px}
img{max-width:100%;height:auto;display:block}
/* ---------------------------------------------------------------- scroll reveal — nothing animates on its own */
/* scroll reveal — 600ms, resolves in one direction.
   Uses the standalone `translate`/`scale` properties, never `transform`, so a reveal
   can never overwrite a layout transform on the same element. */
.rise{transition:opacity .6s var(--ease-soft),translate .6s var(--ease-soft),scale .6s var(--ease-soft),clip-path .7s var(--ease-soft)}
.js .rise:not(.in){opacity:0;translate:0 26px}
.rise.in{opacity:1;translate:none;scale:none}
/* reveal variants — the verb matches what is arriving */
.js .rise-l:not(.in){translate:-34px 0}          /* copy entering from its own side */
.js .rise-r:not(.in){translate:34px 0}
.js .rise-pop:not(.in){translate:0 18px;scale:.94}  /* illustrations arrive with weight */
/* the mural grows up out of the bottom edge rather than floating in as a block */
.js .rise-wipe:not(.in){translate:0 14px;clip-path:inset(64% 0 0 0)}
.rise-wipe.in{clip-path:inset(0 0 0 0)}
.rise.d1{transition-delay:.09s}.rise.d2{transition-delay:.18s}.rise.d3{transition-delay:.27s}
.rise.d4{transition-delay:.36s}.rise.d5{transition-delay:.45s}
/* ---------------------------------------------------------------- the site layer */
/* ============================================================
   AQUAOPPS — site layer. Implements bar.md mechanisms 1-7.
   Appended last so it overrides the shell's own example theme.
   ============================================================ */
body{font:400 17px/1.65 var(--sans);color:var(--ink-soft);background:var(--canvas);letter-spacing:-.011em}
.wrap{max-width:var(--container);padding:0 32px}

/* M2 tracking scales with size · M3 weights tuned, never named */
.display-xl{font:590 clamp(40px,5.4vw,64px)/1.06 var(--display);letter-spacing:-.022em;color:var(--ink)}
.display{font:590 clamp(28px,3.2vw,40px)/1.12 var(--display);letter-spacing:-.022em;color:var(--ink)}
.lede{font:400 19px/1.6 var(--sans);letter-spacing:-.011em;color:var(--ink-soft);max-width:62ch}
.eyebrow{font:510 13px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}

/* M7 lift by hairline, never shadow */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:none}

/* M1 deep punctuates, it is not the canvas */
.band-deep{background:linear-gradient(135deg,var(--deep-1) 0%,var(--deep-2) 100%);color:#fff}
.band-deep .display,.band-deep .display-xl{color:#fff}
.band-deep .lede{color:#C6D7DE}
.band-deep .eyebrow{color:#7FA8B8}

.aq-nav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(237,242,244,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.aq-nav .wrap{display:flex;align-items:center;justify-content:space-between}
.aq-nav .mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.aq-nav .mark .tile{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#0B2C39,#0E4D64)}
.aq-nav .mark .tile img{height:19px;width:auto}
.aq-nav .mark span{font:680 19px/1 var(--display);letter-spacing:-.022em;color:var(--ink)}

/* hero: the login plate, unchanged. Continuity with the app is the point. */
.aq-hero{position:relative;min-height:clamp(560px,78vh,760px);display:flex;align-items:flex-end;
  background:#0B2C39;overflow:hidden}
.aq-hero .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aq-hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,44,57,.34) 0%,rgba(11,44,57,.62) 52%,rgba(11,44,57,.88) 100%)}
.aq-hero .wrap{position:relative;padding-top:96px;padding-bottom:72px}
.aq-hero h1{font:590 clamp(40px,5.6vw,66px)/1.04 var(--display);letter-spacing:-.022em;color:#fff;max-width:15ch}
.aq-hero p{font:400 19px/1.6 var(--sans);letter-spacing:-.011em;color:#D3E2E8;max-width:56ch;margin-top:22px}
.aq-hero .lockup{height:34px;width:auto;margin-bottom:30px}

/* M5 one accent, at most twice per screen, never a large fill */
.btn-aq{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--r);
  background:var(--accent-deep);color:#fff;font:510 16px/1 var(--sans);letter-spacing:-.011em;
  text-decoration:none;border:1px solid var(--accent-deep);transition:background var(--t) var(--ease-soft)}
.btn-aq:hover{background:#0C6C84}
.btn-line{display:inline-flex;align-items:center;padding:13px 22px;border-radius:var(--r);
  background:transparent;color:#fff;font:510 16px/1 var(--sans);letter-spacing:-.011em;text-decoration:none;
  border:1px solid rgba(255,255,255,.42);transition:border-color var(--t) var(--ease-soft)}
.btn-line:hover{border-color:#fff}
.btn-ghost{display:inline-flex;align-items:center;padding:13px 22px;border-radius:var(--r);background:transparent;
  color:var(--accent-deep);font:510 16px/1 var(--sans);letter-spacing:-.011em;text-decoration:none;
  border:1px solid var(--accent-deep);transition:background var(--t) var(--ease-soft)}
.btn-ghost:hover{background:var(--accent-soft)}
.cta-note{margin-top:14px;font:400 15px/1.55 var(--sans);letter-spacing:-.011em;color:var(--ink-soft);max-width:62ch}
.aq-cta-row{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

.aq-sec{padding:clamp(72px,9vw,124px) 0}
.aq-head{max-width:70ch}
.aq-head .display{margin-top:14px}
.aq-head .lede{margin-top:18px}

/* the sector's own numbers */
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.band-deep .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.stat b{display:block;font:590 clamp(40px,4.6vw,58px)/1 var(--display);letter-spacing:-.022em;color:var(--ink)}
.band-deep .stat b{color:#fff}
.stat span{display:block;margin-top:12px;font:400 16px/1.55 var(--sans);letter-spacing:-.011em;color:var(--ink-soft)}
.band-deep .stat span{color:#C6D7DE}
.cite-line{margin-top:26px;font:400 14px/1.6 var(--sans);color:var(--ink-soft)}
.band-deep .cite-line{color:#7FA8B8}

/* what it does — plain nouns, no icons inventing meaning */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mod{background:var(--surface);padding:28px 26px}
.mod h3{font:590 19px/1.3 var(--display);letter-spacing:-.016em;color:var(--ink)}
.mod p{margin-top:9px;font:400 15.5px/1.6 var(--sans);letter-spacing:-.011em;color:var(--ink-soft)}

.ev-list{margin-top:42px;border-top:1px solid var(--line)}
.band-deep .ev-list{border-color:rgba(255,255,255,.16)}
.ev{display:grid;grid-template-columns:minmax(0,22ch) 1fr;gap:28px;padding:26px 0;border-bottom:1px solid var(--line)}
.band-deep .ev{border-color:rgba(255,255,255,.16)}
.ev h3{font:590 18px/1.35 var(--display);letter-spacing:-.016em;color:var(--ink)}
.band-deep .ev h3{color:#fff}
.ev p{font:400 16px/1.62 var(--sans);letter-spacing:-.011em;color:var(--ink-soft)}
.band-deep .ev p{color:#C6D7DE}

.aq-foot{background:var(--deep-1);color:#8FB3C0;padding:56px 0 44px;font:400 15px/1.6 var(--sans)}
.aq-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.aq-foot img{height:28px;width:auto;opacity:.92}
.aq-foot a{color:#CFE2E9}

@media(max-width:860px){
  .stat-row,.mod-grid{grid-template-columns:1fr}
  .ev{grid-template-columns:1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* ---------------------------------------------------------------- additions for this build (not in the artifact) */
/* The artifact's nav carried one text link. The site needs a second (Sign in, which leaves for the app), so the
   right-hand side is a row and the link style is a class rather than a style attribute. */
.aq-nav .links{display:flex;align-items:center;gap:22px}
.aq-nav .links a{font:510 16px/1 var(--sans);letter-spacing:-.011em;color:var(--ink);text-decoration:none}
.aq-nav .links a:hover{color:var(--accent-deep)}
.aq-nav .links .go{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface)}
.aq-nav .links .go:hover{border-color:var(--accent-deep)}

/* A visible focus ring on every interactive thing. The artifact was a design tab and had none; a website is used
   with a keyboard by people who cannot use a mouse, and an invisible focus is an unusable page. */
a:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:4px}
.band-deep a:focus-visible,.aq-hero a:focus-visible,.aq-foot a:focus-visible{outline-color:#fff}

/* Skip link — hidden until focused, then a real target at the top of the page. */
.skip{position:absolute;left:-9999px;top:0;z-index:60}
.skip:focus{left:12px;top:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);color:var(--ink);font:510 15px/1 var(--sans);text-decoration:none}

/* The problem band is two paragraphs of prose now, not a pair of statistics (§33 D4.3). */
.plain{margin-top:18px;font:400 17px/1.7 var(--sans);letter-spacing:-.011em;color:#C6D7DE;max-width:62ch}
.plain + .plain{margin-top:16px}

/* §34 D5 — "See it working": four claims, each shown by two real app screens from the sample workspace. Laptop:
   the claim on the left, its two screens on the right. Phone: the claim, then the two screens side by side. */
.sample{margin-top:14px;display:inline-block;font:510 12.5px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
.pillars{margin-top:44px;display:flex;flex-direction:column;gap:56px}
.pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;
  padding-top:44px;border-top:1px solid var(--line)}
.pillar:first-child{padding-top:0;border-top:0}
.pillar-copy{min-width:0}
.pillar-copy h3{font:620 24px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pillar-copy p{margin-top:12px;font:400 17px/1.62 var(--sans);letter-spacing:-.011em;color:var(--ink-soft);max-width:46ch}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-width:0}
.shot{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.shot picture{display:block;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(11,44,57,.45);background:var(--surface)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font:510 14px/1.45 var(--sans);letter-spacing:-.006em;color:var(--ink-soft)}
.pair.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){
  .pillars{gap:40px}
  /* three screens do not fit side by side on a phone: the row swipes, each screen the width of the pair's two */
  .pair.three{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(50% - 7px);overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:10px}
  .pair.three .shot{scroll-snap-align:start}
  .pillar{grid-template-columns:1fr;gap:22px;padding-top:36px}
  .pillar-copy h3{font-size:21px}
  .pair{gap:14px}
}