/* Cannonball marketing site.
   The product's own dress, "Poolside" (design/design-system.md, since
   2026-09-29), on the page that sells it: sand, one terracotta action
   colour, teal headings, white cards afloat on soft shadows tinted with the
   ink, pills, and water as the one motion. The tokens are the console's.

   Motion: every animation sits inside a prefers-reduced-motion:
   no-preference block, and what is written outside those blocks is the
   finished picture. So a reader who has turned motion down, or whose
   browser never runs site.js, sees each drawing complete and still. */

:root {
  --sand:          #faf6f0;
  --sand-sink:     #f4eee4;
  --card:          #ffffff;
  --line:          #ebe3d6;
  --line-strong:   #d8cdb9;
  --hair:          #f1eadf;
  --teal:          #0f6b6b;
  --teal-deep:     #0a4f4f;
  --teal-soft:     #d9edf0;
  --teal-line:     #a9d4da;
  --ink:           #14403f;
  --muted:         #5f7a79;
  --faint:         #8fa3a2;
  --terra:         #d5602f;
  --terra-deep:    #bd5127;
  --terra-soft:    #fdebd2;
  --sun:           #f4b740;
  --good:          #2e7d4f;
  --good-soft:     #e3f2e6;
  --foam:          #8fd3c9;
  --on-teal:       #dcefe9;
  --on-teal-muted: #8fc7bf;
  /* A faint hairline on anything that floats, and shadows tinted with the
     ink, never black. */
  --edge:          rgba(216, 205, 185, 0.5);
  --shadow-sm:     0 1px 2px rgba(20, 64, 63, 0.06), 0 6px 16px -12px rgba(20, 64, 63, 0.35);
  --shadow:        0 1px 2px rgba(20, 64, 63, 0.05), 0 14px 30px -20px rgba(20, 64, 63, 0.35);
  --shadow-lg:     0 2px 4px rgba(20, 64, 63, 0.06), 0 22px 44px -18px rgba(20, 64, 63, 0.45);
  --shadow-terra:  0 10px 22px -12px rgba(213, 96, 47, 0.9);
  --radius:        22px;
  --radius-lg:     28px;
  --wrap:          1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  /* Nunito loads from Google Fonts in index.html. The rest is the fallback
     stack from the design system. */
  font-family: Nunito, ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* The ticker runs the full width and slides past the edge; nothing else
     may push the page sideways. */
  overflow-x: clip;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

h1, h2, h3 { color: var(--teal); margin: 0; line-height: 1.12; letter-spacing: -0.025em; font-weight: 900; }
/* Headings break into even lines rather than leaving one word behind. */
h1, h2 { text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terra-deep); }
:focus-visible { outline: 2px solid var(--teal-line); outline-offset: 2px; }

/* ---------- buttons ----------
   Primary is the one terracotta action, on its own warm shadow. Secondary
   is a white pill afloat. Both lift a little under the pointer. */

.btn {
  display: inline-block;
  background: var(--terra);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  padding: 15px 34px;
  border: 1.5px solid var(--terra);
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: var(--shadow-terra);
  transition: background .12s ease, border-color .12s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--terra-deep); border-color: var(--terra-deep); transform: translateY(-1px); }
.btn-sm { font-size: 16px; padding: 10px 22px; }
.btn-secondary { background: var(--card); color: var(--teal); border-color: var(--edge); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: #fffdf9; border-color: var(--teal-line); box-shadow: var(--shadow); }
.btn-block { display: block; width: 100%; text-align: center; }

.fine { color: var(--muted); font-size: 14.5px; margin-top: 12px; }

/* ---------- header ---------- */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding-top: 26px; padding-bottom: 26px;
}
.logo {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 27px; font-weight: 800; color: var(--teal);
  text-decoration: none; letter-spacing: -0.02em;
}
.logomark { width: 42px; height: 42px; flex: none; }
/* The links sit together in one floating pill, as the console's top bar does. */
.site-nav {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--edge); border-radius: 999px;
  padding: 6px 6px 6px 10px; box-shadow: var(--shadow-sm);
}
/* Each item of the bar is one line, always: where they do not all fit, the
   Menu takes over (the 940 block below) rather than anything wrapping. */
.site-nav > a, .menu-button { white-space: nowrap; }
.navlink {
  color: var(--teal); text-decoration: none; font-weight: 800; font-size: 16px;
  padding: 9px 13px; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.navlink:hover { background: var(--sand-sink); color: var(--teal-deep); }
/* Inside the pill, Log in is flat: a pill in a pill needs no shadow of its own. */
.site-nav .btn-secondary { box-shadow: none; border-color: var(--line); margin-left: 4px; }
.site-nav .btn-secondary:hover { border-color: var(--teal-line); box-shadow: none; }

/* The Menu: a details element, shown only where the links above are hidden
   (up to 940 pixels, the block below). Its panel floats under the button. */
.menu { display: none; position: relative; }
.menu-button { cursor: pointer; list-style: none; user-select: none; }
.menu-button::-webkit-details-marker { display: none; }
.menu[open] .menu-button { background: var(--teal-soft); border-color: var(--teal-line); }
.menu-panel {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 10px);
  width: min(280px, calc(100vw - 40px));
  display: grid; gap: 2px; padding: 10px;
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.menu-panel a:not(.btn) {
  display: block; padding: 11px 14px; border-radius: 14px;
  color: var(--teal); font-weight: 800; font-size: 17px; text-decoration: none;
}
.menu-panel a:not(.btn):hover { background: var(--sand-sink); }
.menu-panel .btn { display: block; text-align: center; margin-top: 8px; font-size: 17px; padding: 13px 18px; }
/* Log in is in the header itself, except on the narrowest phones. */
.menu-panel a.menu-login { display: none; }

/* ---------- hero ---------- */

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
        padding: 22px 0 46px; }
.hero h1 { font-size: 56px; }
.hero h1 em { color: var(--terra); font-style: normal; }
.hero p.lede { font-size: 19.5px; color: var(--muted); margin: 20px 0 30px; max-width: 30em; }
.hero-stage { justify-self: end; width: 100%; max-width: 560px; }
/* The picture alone: the sun and the glints are placed against it. */
.hero-pic { position: relative; }
.hero-art { display: block; width: 100%; }

/* A small pill above the headline, with a dot that breathes like the live
   map's badges do. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 14.5px; color: var(--teal-deep);
  background: var(--teal-soft); border-radius: 999px;
  padding: 6px 15px 6px 11px; margin-bottom: 18px;
}
.eyebrow-dot { position: relative; width: 10px; height: 10px; flex: none; border-radius: 999px; background: var(--good); }
.eyebrow-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--good); opacity: 0; }

/* The sun in the picture is at 34.7% across and 15.9% down. The rays are
   drawn in a square 19.7% of the picture's width, centred there. */
.hero-sun {
  position: absolute; width: 19.7%; left: 24.85%; top: 5.45%;
  pointer-events: none; overflow: visible;
}
.hero-sun-rays { transform-box: fill-box; transform-origin: center; }

/* Glints on the pool: four-pointed, white, a moment each. */
.sparkle {
  position: absolute; width: 3.2%; aspect-ratio: 1;
  background: #fff; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.sparkle-1 { left: 17%; top: 63%; }
.sparkle-2 { left: 29%; top: 57.5%; width: 2.4%; }
.sparkle-3 { left: 42%; top: 70%; }
.sparkle-4 { left: 76.5%; top: 66%; width: 2.4%; }

/* ---------- what the tablet is showing ----------

   All four labels at once, two by two under the picture. The drawing has
   no sky wide enough for four of them beside its sun and its technician,
   so they sit where nothing of Joe's drawing is covered. They rise into
   place once (in the motion block below); what is written here is where
   they rest. */

.beams {
  display: grid; grid-template-columns: repeat(2, auto); justify-content: center;
  gap: 10px 12px; margin: 16px 0 0; padding: 0; list-style: none;
  /* Labels, not buttons: never take a tap meant for the page. */
  pointer-events: none;
}
.beam {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  background: var(--teal-soft);
  border-radius: 999px;
  padding: 7px 17px 7px 7px;
  font-weight: 800; font-size: 16.5px; color: var(--teal); line-height: 1.2;
}
.beam-icon {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  background: var(--card); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.beam-icon svg { width: 18px; height: 18px; }

@keyframes beam-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- the hero's two ways in ---------- */

.hero-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-fine { margin-top: 14px; }

/* Book a call: the middle step, a white pill with a calendar, beside the
   one terracotta action. */
.btn-call { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-call svg { width: 21px; height: 21px; flex: none; }

/* ---------- the ticker ----------
   Everything that is in the product, sliding past. The track holds the list
   twice and moves by exactly one list, so the loop has no seam. */

.ticker {
  background: var(--card);
  border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  box-shadow: var(--shadow-sm);
  overflow: hidden; padding: 15px 0; margin-bottom: 72px;
}
.ticker-track { display: flex; width: max-content; }
.ticker-list { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0 20px; }
.ticker-list li {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--teal); white-space: nowrap; font-size: 17px;
}
.ticker-list svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--terra); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- section headings ---------- */

.section-head { max-width: 42em; margin-bottom: 28px; }
.section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
/* The line above a heading is a water chip, as chips are in the product. */
.kicker {
  display: inline-block; font-weight: 800; font-size: 13.5px; letter-spacing: 0.02em;
  color: var(--teal); background: var(--teal-soft); border-radius: 999px;
  padding: 5px 14px; margin-bottom: 12px;
}
.section-head h2, .chem-copy h2, .customer-copy h2, .prospects-copy h2 { font-size: 40px; }
.section-head > p:not(.kicker) { color: var(--muted); font-size: 18.5px; margin-top: 12px; }

/* ---------- proof of service ----------
   A real day on the live map, as wide as the tour's screens so its words
   can be read, then what every stop leaves as proof, two by two, then
   tested or typed as a part of the same section. */

.proof { padding-bottom: 88px; }
.proof-grid { display: grid; gap: 30px; }
.proof-shot { margin: 0; min-width: 0; }
.proof-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 34px; }
.proof-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: 16.5px; }
.proof-points .tick { margin-top: 2px; }
.proof-points strong { color: var(--teal); }

/* ---------- prospecting ----------
   The words beside the screen of a scanned day, as Switching over lays
   out its drawing. */

.prospects {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 50px; align-items: center; padding-bottom: 88px;
}
.prospects-copy > p:not(.kicker) { color: var(--muted); font-size: 18px; margin-top: 12px; max-width: 30em; }
.prospects-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.prospects-points li { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; }
.prospects-points .tick { margin-top: 1px; }
.prospects-shot { margin: 0; min-width: 0; }

/* ---------- tested or typed ----------
   The first problem section, now a part of proof of service: the phone's
   refusal, the drawing of tested against typed readings, and Cal's answer
   about pools that will not settle. */

.trust { padding-top: 72px; }
.trust .section-head h3 { font-size: 32px; }
.trust-grid {
  display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr);
  gap: 38px; align-items: start; margin-bottom: 40px;
}
.trust-phone, .trust-drawing, .trust-film { margin: 0; min-width: 0; }
.trust-phone { display: grid; justify-items: center; gap: 16px; }
.trust figcaption { color: var(--muted); font-size: 16px; max-width: 34em; }
.trust figcaption strong { color: var(--teal); }
.trust-drawing figcaption { margin-top: 14px; }
.trust-film {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 38px; align-items: center;
}

.tt { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); }
.tt text { font-family: Nunito, ui-rounded, system-ui, sans-serif; }
.tt-band { fill: #e3f2e6; }
.tt-band-label { font-size: 11.5px; font-weight: 800; fill: var(--good); text-anchor: middle; }
.tt-row { font-size: 15.5px; font-weight: 800; fill: var(--teal); }
.tt-sub { font-size: 11.5px; font-weight: 700; fill: var(--muted); }
.tt-axis { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.tt-ticks text { font-size: 11.5px; font-weight: 700; fill: var(--faint); text-anchor: middle; }
.tt-dot { fill: var(--teal); }
.tt-typed { fill: var(--teal-line); }
.tt-same { fill: var(--terra); }
.tt-badge rect { fill: var(--terra-soft); }
.tt-badge text { font-size: 13.5px; font-weight: 800; fill: var(--terra-deep); text-anchor: middle; }
/* A phone gets its own drawing, stacked taller, so its words stay readable. */
.tt-narrow { display: none; }

/* ---------- a browser, drawn around the real screens ---------- */

.browser { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.browser-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--sand-sink); border-bottom: 1px solid var(--line);
}
.browser-dots { display: inline-flex; gap: 7px; flex: none; }
.browser-dots i { width: 11px; height: 11px; border-radius: 999px; background: #e8a38a; }
.browser-dots i:nth-child(2) { background: #f0cd83; }
.browser-dots i:nth-child(3) { background: var(--teal-line); }
.browser-url {
  flex: 1; max-width: 340px; margin: 0 auto; text-align: center;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 14px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ---------- the office tour ---------- */

.tour { padding-bottom: 88px; }
.tour-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tour-tab {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: var(--muted);
  background: transparent; border: 1px solid var(--edge); border-radius: 18px;
  padding: 13px 14px 15px;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tour-tab strong { display: block; color: var(--teal); font-size: 16.5px; line-height: 1.25; }
.tour-tab span { display: block; font-size: 13.5px; line-height: 1.35; margin-top: 3px; }
.tour-tab:hover { background: var(--card); box-shadow: var(--shadow-sm); }
/* The one that is showing floats; the terracotta line along its foot says how long. */
.tour-tab.is-on { background: var(--card); box-shadow: var(--shadow); }
/* How long until the next screen: a line along the bottom of the tab. */
.tour-progress {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--terra); transform: scaleX(0); transform-origin: left;
}
.browser-view { position: relative; aspect-ratio: 16 / 10; background: var(--sand); }
.tour-panel { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.tour-panel.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.tour-panel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ---------- two kinds of company ----------
   Two cards side by side: the single poler in terracotta, the crew in
   teal, each a list of what the page shows further down. */

.shapes { padding-bottom: 88px; }
.shape-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.shape {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 28px 30px 26px;
}
.shape-head { display: flex; align-items: center; gap: 16px; }
.shape-icon {
  width: 56px; height: 56px; flex: none; border-radius: 999px;
  background: var(--terra-soft); color: var(--terra-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.shape-crew .shape-icon { background: var(--teal-soft); color: var(--teal); }
.shape-icon svg { width: 30px; height: 30px; }
.shape h3 { font-size: 26px; }
.shape-head p { color: var(--muted); font-size: 16px; margin-top: 4px; }
.shape-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; align-content: start; flex: 1; }
.shape-points li { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; }
.shape-points .tick { margin-top: 1px; }
.shape-more {
  align-self: flex-start; margin-top: 22px;
  font-weight: 800; color: var(--terra-deep); text-decoration: none;
}
.shape-more::after { content: " \2192"; }
.shape-more:hover { text-decoration: underline; }

/* ---------- the films ---------- */

.films { padding-bottom: 88px; }
.film-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.film { margin: 0; min-width: 0; }
.film-video { display: block; width: 100%; height: auto; background: var(--sand-sink); }
.film figcaption h3 { font-size: 22px; margin-top: 18px; }
/* Cal's face beside what he does, as it is beside his answers in the product. */
.film-cal-head { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.film-cal-head h3 { margin-top: 0; }
.cal-face {
  width: 46px; height: 46px; flex: none; border-radius: 999px; object-fit: cover;
  background: var(--teal-soft); border: 1px solid var(--edge); box-shadow: var(--shadow-sm);
}
.film figcaption p { color: var(--muted); font-size: 16.5px; margin-top: 6px; max-width: 34em; }
.film-tall { display: grid; justify-items: center; }
.film-tall figcaption { max-width: 330px; }

/* A phone, drawn around a real screen: an ink bezel and a camera. */
.phone {
  position: relative; width: 100%; max-width: 330px;
  padding: 10px; border-radius: 44px; background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.phone > img, .phone > video { display: block; width: 100%; height: auto; border-radius: 35px; }
.phone::before {
  content: ""; position: absolute; z-index: 1; top: 19px; left: 50%;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: #0a2d2c;
}
/* An iPhone's screen carries its own camera island, and a web page taken at
   a phone's width has no status bar for a camera to sit over (the drawn one
   landed on the quote's header), so for both the drawn camera goes. */
.phone.is-iphone::before, .phone.is-page::before { display: none; }

/* ---------- water chemistry, drawn ---------- */

.chem {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px; align-items: center; padding-bottom: 88px;
}
.chem-copy > p:not(.kicker) { color: var(--muted); font-size: 18px; margin-top: 12px; max-width: 30em; }
.chem-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.chem-points li { position: relative; padding-left: 24px; font-weight: 700; }
.chem-points li::before {
  content: ""; position: absolute; left: 3px; top: .5em;
  width: 10px; height: 10px; border-radius: 999px; background: var(--teal-line);
}

.chem-card {
  display: grid; gap: 15px; min-width: 0;
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-lg);
}
.chem-top { display: flex; align-items: baseline; gap: 10px; }
.chem-top strong { color: var(--teal); font-size: 19px; font-weight: 900; }
.chem-top span { color: var(--muted); font-size: 14.5px; }
.chem-row { display: grid; gap: 8px; }
.chem-label { display: flex; align-items: baseline; gap: 12px; }
.chem-label span { min-width: 86px; font-weight: 800; font-size: 14.5px; color: var(--muted); }
.chem-label b { font-size: 26px; font-weight: 900; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2.2em; }
.chem-state {
  margin-left: auto; padding: 3px 10px; border-radius: 999px;
  font-style: normal; font-weight: 800; font-size: 13px;
  background: var(--terra-soft); color: var(--terra-deep);
}
.chem-row.is-ok .chem-state { background: var(--good-soft); color: var(--good); }
.chem-track { position: relative; height: 10px; border-radius: 999px; background: var(--sand-sink); }
.chem-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: #cfe9d6; }
.chem-mark {
  position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 999px; background: var(--terra); border: 3px solid #fff;
}
.chem-row.is-ok .chem-mark { background: var(--good); }
/* Each track runs from a low to a high reading, with the target band in
   green: pH 6.8 to 8.2 (band 7.2 to 7.8), chlorine 0 to 6 ppm (2 to 4),
   alkalinity 40 to 160 ppm (80 to 120). The marks sit at the readings. */
.chem-ph .chem-band { left: 28.6%; right: 28.6%; }
.chem-ph .chem-mark { left: 78.6%; }
.chem-fc .chem-band, .chem-ta .chem-band { left: 33.3%; right: 33.3%; }
.chem-fc .chem-mark { left: 25%; }
.chem-ta .chem-mark { left: 41.7%; }
.chem-says, .chem-report { border-radius: 16px; padding: 12px 15px; }
.chem-says { background: var(--teal-soft); }
.chem-report { background: var(--sand); border: 1px solid var(--edge); }
.chem-says-head { font-weight: 800; font-size: 13.5px; color: var(--teal-deep); margin-bottom: 6px; }
.chem-chip { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--teal); padding: 3px 0; }
.chem-check { position: relative; flex: none; width: 21px; height: 21px; border-radius: 999px; border: 2px solid var(--teal); background: var(--teal); }
.chem-check::after {
  content: ""; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.chem-report p:not(.chem-says-head) { font-size: 15px; font-weight: 700; padding: 2px 0; }

/* ---------- the phone ---------- */

.phones { padding-bottom: 88px; }
.phone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; justify-items: center; align-items: start; }
.phone-shot { margin: 0; display: grid; justify-items: center; gap: 16px; }
.phone-sm { max-width: 286px; }
.phone-shot:nth-child(2) { margin-top: 40px; }
.phone-shot figcaption { font-weight: 800; color: var(--teal); text-align: center; }
.phones-fine { text-align: center; margin-top: 30px; }

/* ---------- the customer ---------- */

.customer {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 60px; align-items: center; padding-bottom: 96px;
}
.customer-phone { margin: 0; display: grid; justify-items: center; }
.customer-phone .phone { max-width: 316px; transform: rotate(-3deg); }
.customer-copy > p:not(.kicker) { color: var(--muted); font-size: 18px; margin-top: 12px; max-width: 32em; }
.customer-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.customer-points li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
/* What is true today under what a section says the product does. */
.customer-fine { margin-top: 18px; max-width: 34em; }
/* The owner's section mirrors the customer's: the words first, the phone
   leaning the other way. */
.owner, .mirrored { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.owner .customer-copy, .mirrored .customer-copy { order: -1; }
.owner .customer-phone .phone, .mirrored .customer-phone .phone { transform: rotate(3deg); }

/* ---------- the watch ----------
   Real screens in drawn cases: round for Wear OS, with a crown at three
   o'clock, and a rounded square for the Apple Watch, with its crown and side
   button, which stands a little forward in the middle. */

.watches { padding-bottom: 88px; }
.watch-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; justify-items: center; align-items: center; max-width: 900px; margin: 0 auto;
}
.watch-shot { margin: 0; display: grid; justify-items: center; gap: 18px; }
.watch-shot figcaption { font-weight: 800; color: var(--teal); text-align: center; }
.watch {
  position: relative; width: 100%; padding: 12px; background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.watch > img { display: block; width: 100%; height: auto; }
.watch-round { max-width: 228px; border-radius: 50%; }
.watch-round > img { border-radius: 50%; }
/* The crown, at three o'clock on the right edge, where a watch's crown
   sits, so a round case reads as a watch and not a dial. In the case's own
   ink, drawn as the Apple Watch's is, and placed and sized in percentages so
   it keeps its size against the case at any width; its inner half sits on
   the bezel, which is the same ink. */
.watch-round::after {
  content: ""; position: absolute; top: 50%; right: -3.2%;
  width: 6.4%; height: 13%; transform: translateY(-50%);
  border-radius: 0 5px 5px 0; background: var(--ink);
}
.watch-square { max-width: 262px; border-radius: 30% / 26%; padding: 16px 14px; }
.watch-square > img { border-radius: 24% / 20%; }
/* The crown and the side button. */
.watch-square::after {
  content: ""; position: absolute; right: -7px; top: 26%;
  width: 8px; height: 46px; border-radius: 0 6px 6px 0; background: var(--ink);
}
.watches-fine { text-align: center; margin-top: 30px; }

/* ---------- deep water ----------
   The product's teal panels: a pool seen from the side, light drifting in
   it and waves along its foot (the console's Today, its sidebar, Cal's
   header). Terracotta stays the one action on it. The waves and the light
   are decoration: every word on the panel says what it says without them. */

.water {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #127a78 0%, #0f6b6b 45%, #0a4f4f 100%);
  box-shadow: 0 24px 50px -30px rgba(10, 79, 79, 0.8);
  color: #fff;
}
.water h2 { color: #fff; }
.water-glow {
  position: absolute; z-index: -1; left: 26%; top: -70px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 211, 201, 0.55), rgba(143, 211, 201, 0) 65%);
  opacity: .4; pointer-events: none;
}
.water-glow-sun {
  left: 60%; top: 30px; width: 270px; height: 270px;
  background: radial-gradient(circle, rgba(244, 183, 64, 0.28), rgba(244, 183, 64, 0) 65%);
}
/* Two layers, each drawn twice the panel's width and four waves long, so
   sliding one left by half its own width is two whole waves and the loop
   has no seam. */
.waves { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 70px; overflow: hidden; pointer-events: none; }
.waves svg { position: absolute; left: 0; bottom: 0; width: 200%; display: block; }
.wave-1 { height: 64px; fill: rgba(143, 211, 201, 0.14); }
.wave-2 { height: 48px; fill: rgba(250, 246, 240, 0.10); }

/* ---------- the no-signal panel ---------- */

.band { margin-bottom: 72px; }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 48px 56px 76px; }
.band h2 { font-size: 34px; }
.band p { color: var(--on-teal); margin-top: 8px; font-size: 17.5px; max-width: 32em; }
.band-copy .btn { margin-top: 24px; }
.offline { width: 196px; height: auto; flex: none; overflow: visible; }
.offline text { font-family: Nunito, ui-rounded, system-ui, sans-serif; }
/* The finished state: signal back, every stop ticked, all of it synced. */
.off-cross, .off-badge-wait, .off-up { opacity: 0; }
.off-dot { fill: var(--good); }

/* ---------- pricing: one wide card, three columns ---------- */

.price-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 46px; align-items: center;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 42px;
}
.price-amount { text-align: center; }
.price-amount .num {
  font-size: 76px; font-weight: 900; color: var(--teal); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.price-amount .num sup { font-size: 38px; top: -.55em; position: relative; }
.price-amount .per { color: var(--muted); font-weight: 700; font-size: 16px; margin-top: 8px; }
/* The qualifier sits with the price because it is part of the offer. */
.price-amount .per-note {
  color: var(--teal); font-weight: 800; font-size: 13.5px; margin-top: 8px;
}
.price-amount .squiggle { margin: 12px auto 0; display: block; }
.price-amount .early-note { color: var(--muted); font-size: 13.5px; margin-top: 12px; max-width: 16em; margin-left: auto; margin-right: auto; }

.price-list { list-style: none; margin: 0; padding: 0 0 0 34px;
              border-left: 1px solid var(--line); display: grid; gap: 13px; }
.price-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.tick {
  width: 24px; height: 24px; flex: none; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.tick svg { width: 16px; height: 16px; }

.price-act { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.price-act .btn-call { font-size: 17px; padding: 12px 24px; }
.price-act .fine { margin-top: 4px; max-width: 20em; }

/* ---------- what a month comes to ----------
   A sand card under the price: the words, the two numbers in, and what the
   month comes to on white. */

.calc {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px; align-items: center; margin-top: 22px;
  background: var(--sand-sink); border: 1px solid var(--edge); border-radius: var(--radius-lg);
  padding: 28px 34px;
}
.calc h2 { font-size: 28px; }
.calc-copy p { color: var(--muted); font-size: 16.5px; margin-top: 8px; max-width: 22em; }
.calc-fields { display: grid; gap: 16px; }
.calc-field label { display: block; font-weight: 800; font-size: 14px; color: var(--teal); margin-bottom: 6px; }
.calc-step { display: flex; align-items: center; gap: 8px; }
.calc-step input {
  font: inherit; font-size: 22px; font-weight: 900; color: var(--ink);
  width: 6em; min-width: 0; text-align: center; padding: 6px 8px; min-height: 46px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.calc-step input::-webkit-inner-spin-button,
.calc-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-step input:focus { outline: 2px solid var(--teal-line); outline-offset: 0; border-color: var(--teal-line); }
.calc-step button {
  width: 44px; height: 44px; flex: none; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--edge); background: var(--card); color: var(--teal);
  font: inherit; font-size: 22px; font-weight: 800; line-height: 1;
  box-shadow: var(--shadow-sm);
}
.calc-step button:hover { border-color: var(--teal-line); }
.calc-hint { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.calc-out { background: var(--card); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); min-width: 0; }
.calc-total { font-size: 18px; font-weight: 800; color: var(--muted); }
.calc-total b { font-size: 46px; font-weight: 900; color: var(--teal); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc-how { color: var(--muted); font-size: 14.5px; }
.calc-per { margin-top: 10px; font-weight: 700; }
.calc-per b { color: var(--terra-deep); font-variant-numeric: tabular-nums; }
.calc-lines { list-style: none; padding: 10px 0 0; margin: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.calc-lines li { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15.5px; }
.calc-lines b { color: var(--good); }
.calc-fine { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* ---------- what it connects to ----------
   Four white cards, each with where it stands: green for live, terracotta
   for waiting on somebody else. Names only, no logos. */

.works { padding-top: 80px; }
.works-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.work {
  min-width: 0; padding: 20px 20px 22px;
  background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.work-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.work-icon {
  width: 42px; height: 42px; flex: none; border-radius: 14px;
  background: var(--teal-soft); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center;
}
.work-icon svg { width: 22px; height: 22px; }
.work-state {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; padding: 4px 10px 4px 8px; border-radius: 999px;
}
.work-state::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.work-state.is-live { background: var(--good-soft); color: var(--good); }
.work-state.is-waiting { background: var(--terra-soft); color: var(--terra-deep); }
.work h3 { font-size: 18.5px; margin-top: 14px; }
.work p { color: var(--muted); font-size: 15px; margin-top: 6px; }

/* ---------- switching over ----------
   Copy beside a drawing of a spreadsheet's rows landing on a week. The
   pills are drawn where they land; the motion only brings them there. */

.switch {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 50px; align-items: center; padding-top: 80px;
}
.switch-copy h2 { font-size: 40px; }
.switch-copy > p:not(.kicker):not(.switch-help) { color: var(--muted); font-size: 18px; margin-top: 12px; max-width: 30em; }
.switch-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.switch-points li { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; }
.switch-points .tick { margin-top: 1px; }
.switch-help { color: var(--muted); font-size: 15.5px; margin-top: 18px; }
.switch-art { display: block; width: 100%; height: auto; }
.switch-art text { font-family: Nunito, ui-rounded, system-ui, sans-serif; font-size: 11px; font-weight: 700; fill: var(--ink); }
.switch-art .sw-title { font-size: 12.5px; font-weight: 800; fill: var(--teal); }
.switch-art .sw-head text, .switch-art .sw-days text { font-size: 10.5px; font-weight: 800; fill: var(--muted); }
.switch-art .sw-days text { text-anchor: middle; }
.switch-art .sw-names text { font-size: 11.5px; font-weight: 800; fill: var(--teal); }
.switch-art .sw-wait { font-size: 9.5px; font-weight: 700; fill: var(--faint); }
.sw-row { fill: var(--teal-soft); opacity: 0; }
.sw-check circle { fill: var(--good); }
.sw-check path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-pill rect { fill: var(--teal); }
.switch-art .sw-pill text { font-size: 9.5px; font-weight: 800; fill: #fff; text-anchor: middle; }
.sw-held rect { fill: #fff; stroke: var(--teal-line); stroke-width: 2; stroke-dasharray: 4 3; }
.switch-art .sw-held text { fill: var(--teal); }
/* Where each pill starts: its row in the spreadsheet. */
.sw-pill-1 { --dx: -200px; --dy: -17px; }
.sw-pill-2 { --dx: -241px; --dy: -49px; }
.sw-pill-3 { --dx: -282px; --dy: 39px; }
.sw-pill-4 { --dx: -323px; --dy: -53px; }
.sw-pill-5 { --dx: -364px; --dy: 35px; }

/* ---------- questions ----------
   Each answer opens under its question, with no script: a details element
   with a plus that becomes a minus. */

.faq { padding-top: 80px; }
.faq-list { display: grid; gap: 10px; max-width: 54em; }
.faq-item { background: var(--card); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 17.5px; color: var(--teal);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-soft); color: var(--teal); font-size: 20px; font-weight: 800; line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--teal-deep); }
.faq-item p { padding: 0 20px 18px; color: var(--muted); font-size: 16px; max-width: 46em; }
.faq-item p a { color: var(--terra-deep); font-weight: 800; }

/* ---------- early access ----------
   Two columns on desktop, so the form sits beside the supporting text. */

/* Deep water, with Cal afloat in it and the form on a white card, the way
   Cal's own panel is laid out in the product. */
.signup {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  padding: 40px 44px 72px; margin-top: 34px;
}
.signup-copy h2 { font-size: 32px; }
.signup-copy p { color: var(--on-teal); font-size: 17px; margin-top: 12px; max-width: 26em; }
.signup-copy .next { color: var(--on-teal-muted); font-size: 15px; }
.signup-book { margin-top: 22px; }
.signup-copy .signup-book + .next { margin-top: 14px; }
.switch-help a { color: var(--terra-deep); font-weight: 800; }

/* Cal in his ring on the water. The artwork is the founder's; this only
   floats it. */
.calafloat { position: relative; display: block; width: 172px; height: 178px; margin-top: 18px; }
.calafloat-water { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; overflow: visible; }
.calafloat-water ellipse { fill: none; stroke: #dff6f2; stroke-width: 2; opacity: .5; }
.calafloat-cal {
  position: absolute; left: 0; right: 0; bottom: 11%; margin: 0 auto; display: block; width: 146px;
  filter: drop-shadow(0 10px 10px rgba(10, 79, 79, 0.25));
}
.calafloat-cal img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.signup-form {
  display: grid; gap: 12px;
  background: var(--card); border-radius: var(--radius); padding: 24px;
  box-shadow: 0 22px 44px -18px rgba(4, 44, 44, 0.6);
}
.signup-form label {
  display: grid; gap: 5px; font-weight: 800; font-size: 13.5px; color: var(--teal);
}
.signup-form input {
  font: inherit; font-size: 16px; font-weight: 600; padding: 10px 14px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  color: var(--ink); width: 100%;
}
.signup-form textarea {
  font: inherit; font-size: 16px; font-weight: 600; padding: 10px 14px; min-height: 84px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  color: var(--ink); width: 100%; resize: vertical;
}
.signup-form input::placeholder, .signup-form textarea::placeholder { color: var(--faint); }
.signup-form input:focus, .signup-form textarea:focus { outline: 2px solid var(--teal-line); outline-offset: 0; border-color: var(--teal-line); }
/* A field that may be left empty says so, quietly, at the end of its label. */
.signup-form label > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.signup-form .opt { font-weight: 700; font-size: 12.5px; color: var(--faint); }
.signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signup-form .btn { cursor: pointer; margin-top: 4px; font: inherit; font-size: 19px; font-weight: 800; }
.signup-form .btn:disabled { background: var(--line-strong); border-color: var(--line-strong); color: var(--faint); cursor: default; box-shadow: none; transform: none; }

/* Positioned off-screen rather than display:none, since some bots skip
   hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.signup-msg { font-size: 14.5px; margin: 0; min-height: 1.2em; color: var(--muted); }
.signup-msg.ok { color: var(--good); font-weight: 700; }
.signup-msg.err { color: var(--terra-deep); }
.signup-msg a { color: inherit; }

/* ---------- about and privacy ---------- */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding-top: 54px; }
.about h2 { font-size: 22px; }
.about p { color: var(--muted); font-size: 15.5px; margin-top: 8px; max-width: 30em; }

/* ---------- terms and privacy ---------- */

.legal { max-width: 46em; padding: 22px 0 10px; }
.legal h1 { font-size: 44px; }
.legal .updated { color: var(--muted); font-size: 15px; margin-top: 10px; }
.legal h2 { font-size: 23px; margin-top: 36px; }
.legal p { margin-top: 12px; }
.legal ul, .legal ol { margin: 12px 0 0; padding-left: 22px; }
.legal li { margin-top: 8px; }
.legal strong { color: var(--teal-deep); }

/* ---------- footer ---------- */

.divider { display: block; width: 100%; height: 34px; margin: 54px 0 0; }
.site-foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 34px;
             padding: 34px 0 18px; align-items: start; }
.site-foot .logo { font-size: 24px; }
.site-foot .blurb { color: var(--muted); font-size: 15.5px; margin-top: 12px; max-width: 24em; }
.foot-col h4 { font-size: 15px; color: var(--teal); margin: 0 0 10px; font-weight: 800; }
.foot-col a { display: block; color: var(--muted); text-decoration: none; font-size: 15.5px;
              padding: 3px 0; }
.foot-col a:hover { color: var(--terra-deep); }
.foot-art { width: 118px; justify-self: end; }
.copyright { color: var(--muted); font-size: 14px; text-align: center; padding-bottom: 34px; }

/* ---------- narrow screens ----------
   Chips and features go two per row, then the hero stacks with a full-width
   button and the supporting line directly below it. */

@media (max-width: 940px) {
  /* The full bar needs 900 pixels on the home page and 782 on the others
     (measured 2026-10-22); narrower, its links broke onto two lines and
     Start your free month ran off the edge, from 621 pixels up. So up to
     940, on every page, the section links and the header's call to action
     drop into the Menu, and the hero carries Start your free month just
     below. Log in stays as a button because nothing else above the fold
     links to sign-in, and with only buttons left the pill around the links
     goes. */
  .site-nav { gap: 8px; background: none; border: 0; box-shadow: none; padding: 0; }
  .site-nav .navlink, .site-nav .navcta { display: none; }
  .site-nav .btn-secondary { box-shadow: var(--shadow-sm); border-color: var(--edge); margin-left: 0; }
  .menu { display: block; }
  .hero { grid-template-columns: 1fr; gap: 26px; padding-bottom: 40px; }
  .hero h1 { font-size: 42px; }
  .hero-stage { justify-self: center; max-width: 470px; }
  .section-head h2, .chem-copy h2, .customer-copy h2, .prospects-copy h2 { font-size: 32px; }
  .prospects { grid-template-columns: 1fr; gap: 30px; }
  .trust .section-head h3 { font-size: 28px; }
  .proof-points { grid-template-columns: 1fr; }
  /* The tabs become a row to swipe through. */
  .tour-tabs {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: -26px; margin-right: -26px; padding: 0 26px 4px; scrollbar-width: none;
  }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tour-tab { flex: 0 0 210px; scroll-snap-align: start; }
  .film-grid { grid-template-columns: 1fr; gap: 44px; }
  .shape-grid { grid-template-columns: 1fr; gap: 18px; }
  .chem { grid-template-columns: 1fr; gap: 30px; }
  .customer, .owner, .mirrored { grid-template-columns: 1fr; gap: 34px; }
  .trust-grid, .trust-film { grid-template-columns: 1fr; gap: 30px; }
  .trust-phone .phone { max-width: 260px; }
  .switch { grid-template-columns: 1fr; gap: 30px; padding-top: 64px; }
  .switch-copy h2 { font-size: 32px; }
  .customer-copy { order: -1; }
  .price-card { grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; text-align: center; }
  .price-list { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line);
                justify-items: start; max-width: 20em; margin: 0 auto; }
  /* The card centres its price, but a centred checklist wraps into ragged
     fragments, so the list stays left-aligned. */
  .price-list li { text-align: left; align-items: flex-start; }
  .calc { grid-template-columns: 1fr 1fr; gap: 24px 28px; padding: 26px; }
  .calc-copy { grid-column: 1 / -1; }
  .works { padding-top: 64px; }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .faq { padding-top: 64px; }
  .tick { margin-top: 1px; }
  .band-in { flex-direction: column; text-align: center; padding: 40px 28px 76px; }
  .band p { margin-left: auto; margin-right: auto; }
  .signup { grid-template-columns: 1fr; gap: 24px; padding: 30px 24px 70px; }
  .calafloat { width: 150px; height: 156px; }
  .calafloat-cal { width: 126px; }
  .about { grid-template-columns: 1fr; gap: 22px; }
  .site-foot { grid-template-columns: 1fr 1fr; }
  .foot-art { grid-column: 2; justify-self: end; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .tt-wide { display: none; }
  .tt-narrow { display: block; max-width: 440px; margin: 0 auto; }
  .wrap { padding: 0 20px; }
  .site-head { padding-top: 18px; padding-bottom: 14px; }
  .logo { font-size: 22px; }
  .logomark { width: 34px; height: 34px; }
  .btn-sm { font-size: 15px; padding: 9px 18px; }
  .hero { padding-top: 6px; }
  .hero h1 { font-size: 34px; }
  .hero p.lede { font-size: 17.5px; margin: 14px 0 22px; }
  .hero .btn { display: block; width: 100%; text-align: center; font-size: 20px; padding: 17px 20px; }
  .hero .btn-call { display: flex; font-size: 18px; padding: 14px 20px; }
  .hero .fine { text-align: center; }
  .hero-act { flex-direction: column; align-items: stretch; gap: 12px; }
  .eyebrow { font-size: 13.5px; }
  .legal h1 { font-size: 34px; }
  .beams { gap: 8px; margin-top: 12px; }
  .beam { font-size: 14.5px; gap: 8px; padding: 6px 13px 6px 6px; }
  .beam-icon { width: 26px; height: 26px; }
  .beam-icon svg { width: 15px; height: 15px; }
  .ticker { margin-bottom: 52px; padding: 12px 0; }
  .ticker-list li { font-size: 15.5px; }
  .section-head h2, .chem-copy h2, .customer-copy h2, .prospects-copy h2 { font-size: 28px; }
  .switch-copy h2 { font-size: 28px; }
  .switch-copy > p:not(.kicker):not(.switch-help) { font-size: 16.5px; }
  .section-head > p:not(.kicker), .chem-copy > p:not(.kicker), .customer-copy > p:not(.kicker), .prospects-copy > p:not(.kicker) { font-size: 16.5px; }
  .proof, .tour, .films, .chem, .phones, .watches, .shapes, .prospects { padding-bottom: 64px; }
  .shape { padding: 22px 20px 20px; }
  .shape-icon { width: 46px; height: 46px; }
  .shape-icon svg { width: 25px; height: 25px; }
  .shape h3 { font-size: 22px; }
  .trust { padding-top: 52px; }
  .proof-points li { font-size: 15.5px; }
  .trust .section-head h3 { font-size: 25px; }
  /* The Apple Watch on its own row, the two round ones under it. */
  .watch-row { grid-template-columns: 1fr 1fr; gap: 24px 14px; align-items: start; }
  .watch-shot-main { grid-column: 1 / -1; order: -1; }
  .watch-round { max-width: 150px; }
  .watch-square { max-width: 210px; }
  .tour-tabs { margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; }
  .tour-tab { flex-basis: 180px; }
  .browser { border-radius: 16px; }
  .browser-bar { padding: 8px 12px; }
  .browser-url { font-size: 12px; }
  .chem-card { padding: 18px 16px; }
  .chem-label span { min-width: 74px; }
  /* Three phones side by side are too small to read, so they become a row
     to swipe through, one and a bit at a time. */
  .phone-row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px;
    margin: 0 -20px; padding: 4px 20px 10px; scrollbar-width: none;
  }
  .phone-row::-webkit-scrollbar { display: none; }
  .phone-shot { flex: 0 0 74%; scroll-snap-align: center; }
  .phone-shot:nth-child(2) { margin-top: 0; }
  .customer-phone .phone { max-width: 270px; }
  .band { margin-bottom: 56px; }
  .band-in { padding: 34px 22px 72px; }
  .band h2 { font-size: 26px; }
  .band .btn { width: 100%; }
  .signup-form { padding: 20px 18px; }
  .offline { width: 168px; }
  .price-amount .num { font-size: 64px; }
  .calc { grid-template-columns: 1fr; padding: 22px 18px; gap: 20px; }
  .calc h2 { font-size: 24px; }
  .calc-step input { flex: 1; width: auto; }
  .calc-total b { font-size: 40px; }
  .works-grid { grid-template-columns: 1fr; gap: 12px; }
  .faq-item summary { font-size: 16.5px; padding: 14px 16px; }
  .faq-item p { padding: 0 16px 16px; font-size: 15.5px; }
  .site-foot { grid-template-columns: 1fr; gap: 22px; }
  .foot-art { grid-column: 1; justify-self: start; width: 96px; }
}

/* The narrowest phones: Log in moves into the menu, so the logo and the
   menu still fit on one line. */
@media (max-width: 370px) {
  .site-nav .navlogin { display: none; }
  .menu-panel a.menu-login { display: block; }
}

/* ---------- motion ----------
   Everything that moves, and only for readers who have not asked for less.
   site.js marks the page .motion-ready and each moving part .is-visible
   while it is on screen, so nothing runs where nobody can see it. */

@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-motion]:not(.is-visible),
  .motion-ready [data-motion]:not(.is-visible) * { animation-play-state: paused !important; }

  /* Sections rise into place as they arrive. Only those below the fold at
     load are marked, so nothing already on screen blinks. */
  .will-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .will-reveal.is-in { opacity: 1; transform: none; }
  .phones.will-reveal .phone-shot { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .phones.will-reveal.is-in .phone-shot { opacity: 1; transform: none; }
  .phones.will-reveal.is-in .phone-shot:nth-child(2) { transition-delay: .12s; }
  .phones.will-reveal.is-in .phone-shot:nth-child(3) { transition-delay: .24s; }

  /* Water: waves drift, light plays in the panel, Cal bobs in his ring and
     ripples spread from him. Each ends where it would sit with no motion. */
  .wave-1 { animation: cb-drift 16s linear infinite; }
  .wave-2 { animation: cb-drift 12s linear infinite reverse; }
  .water-glow { animation: cb-glow 11s ease-in-out infinite; }
  .water-glow-sun { animation: cb-glow 14s ease-in-out infinite reverse; }
  .calafloat-cal { animation: cb-bob 4.4s ease-in-out infinite; transform-origin: 50% 85%; }
  .calafloat-water ellipse { animation: cb-ripple 3.2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
  .calafloat-water ellipse + ellipse { animation-delay: 1.6s; }
  .divider-wave { stroke-dasharray: 18 12; animation: wave-drift 9s linear infinite; }

  .eyebrow-dot::after { animation: dot-pulse 2.2s ease-out infinite; }
  /* The four labels rise into place one after another as the page opens,
     and stay. */
  .beam { animation: beam-in .7s cubic-bezier(.2, .7, .2, 1) .25s backwards; }
  .beam:nth-child(2) { animation-delay: .37s; }
  .beam:nth-child(3) { animation-delay: .49s; }
  .beam:nth-child(4) { animation-delay: .61s; }
  .hero-sun-rays { animation: sun-turn 40s linear infinite, sun-breathe 5s ease-in-out infinite; }
  .sparkle { animation: glint 5.2s ease-in-out infinite; }
  .sparkle-2 { animation-delay: 1.3s; }
  .sparkle-3 { animation-delay: 2.6s; }
  .sparkle-4 { animation-delay: 3.9s; }

  .ticker-track { animation: ticker 55s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }

  .tour-tab.is-timing .tour-progress { animation: tour-progress var(--tour-ms, 6.5s) linear forwards; }

  /* The chemistry card steps: readings, then what to add, then what the
     customer reads (site.js). Without it, the last step. */
  .chem-mark { transition: left 1.1s cubic-bezier(.2, .7, .2, 1), background .3s ease; }
  .chem-says, .chem-report { transition: opacity .5s ease, transform .5s ease; }
  .chem-check, .chem-check::after { transition: background .3s ease, opacity .3s ease; }
  /* start: the marks at the low end, put there at once so they can slide.
     read: the marks at the readings. says: what to add. done: ticked, and
     the customer's lines. */
  .chem-card.is-start .chem-mark { left: 0; transition: none; }
  .chem-card:is(.is-start, .is-read) .chem-says,
  .chem-card:is(.is-start, .is-read, .is-says) .chem-report { opacity: 0; transform: translateY(8px); }
  .chem-card:is(.is-start, .is-read, .is-says) .chem-check { background: transparent; }
  .chem-card:is(.is-start, .is-read, .is-says) .chem-check::after { opacity: 0; }

  .phone-shot { animation: bob 7s ease-in-out infinite; }
  .phone-shot:nth-child(2) { animation-delay: -2.3s; }
  .phone-shot:nth-child(3) { animation-delay: -4.6s; }

  /* The spreadsheet empties onto the week, a row every 0.9 seconds: the
     row lights, its pill flies to its day, the row is ticked. */
  .sw-pill { animation: sw-fly 10s cubic-bezier(.3, .7, .2, 1) infinite backwards; }
  .sw-row { animation: sw-row 10s ease infinite backwards; }
  .sw-check { animation: sw-tick 10s ease infinite backwards; }
  .sw-pill-2, .sw-row-2, .sw-check-2 { animation-delay: .9s; }
  .sw-pill-3, .sw-row-3, .sw-check-3 { animation-delay: 1.8s; }
  .sw-pill-4, .sw-row-4, .sw-check-4 { animation-delay: 2.7s; }
  .sw-pill-5, .sw-row-5, .sw-check-5 { animation-delay: 3.6s; }

  /* Tested or typed: the dots fall in one after another (site.js gives each
     its moment), the tested row first, and the share read on 3.0 last. */
  .tt.is-armed .tt-dot, .tt.is-armed .tt-badge { opacity: 0; }
  .tt.is-armed.is-playing .tt-dot { animation: tt-drop .5s cubic-bezier(.2, .7, .2, 1) forwards; }
  .tt.is-armed.is-playing .tt-badge { animation: tt-fade .6s ease forwards; animation-delay: var(--badge-delay, 3.8s); }

  /* No signal, on a twelve second loop: the bars go, three stops are
     finished and wait, the bars come back, the work goes up, synced. */
  .off-bar-4 { animation: bar-4 12s infinite; }
  .off-bar-3 { animation: bar-3 12s infinite; }
  .off-bar-2 { animation: bar-2 12s infinite; }
  .off-bar-1 { animation: bar-1 12s infinite; }
  .off-cross { animation: off-cross 12s infinite; }
  .off-badge-wait { animation: badge-wait 12s infinite; }
  .off-n-1 { animation: n-1 12s infinite; }
  .off-n-2 { animation: n-2 12s infinite; }
  .off-n-3 { animation: n-3 12s infinite; }
  .off-badge-done { animation: badge-done 12s infinite; }
  .off-row-1 .off-dot { animation: dot-1 12s infinite; }
  .off-row-2 .off-dot { animation: dot-2 12s infinite; }
  .off-row-3 .off-dot { animation: dot-3 12s infinite; }
  .off-row-1 .off-tick { animation: tick-1 12s infinite; }
  .off-row-2 .off-tick { animation: tick-2 12s infinite; }
  .off-row-3 .off-tick { animation: tick-3 12s infinite; }
  .off-up { animation: up-show 12s infinite; }
  .off-arrow { animation: up-rise 1s ease-in infinite; }
  .off-arrow-2 { animation-delay: .5s; }
}

@keyframes cb-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cb-glow {
  0%, 100% { opacity: .25; transform: translate(0, 0) scale(1); }
  50% { opacity: .5; transform: translate(26px, -8px) scale(1.2); }
}
@keyframes cb-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes cb-ripple {
  0% { transform: scale(.5); opacity: .75; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes dot-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(2.8); opacity: 0; } }
@keyframes sun-turn { to { rotate: 360deg; } }
@keyframes sun-breathe { 50% { scale: 1.1; opacity: .75; } }
@keyframes glint {
  0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  78% { opacity: 1; transform: scale(1) rotate(45deg); }
  88% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes wave-drift { to { stroke-dashoffset: -52; } }
@keyframes tour-progress { to { transform: scaleX(1); } }
@keyframes bob { 50% { transform: translateY(-9px); } }

@keyframes sw-fly {
  0% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  3% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  12%, 84% { transform: translate(0, 0); opacity: 1; }
  90%, 100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes sw-row { 0% { opacity: 0; } 2%, 10% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes sw-tick { 0%, 11% { opacity: 0; } 13%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }

@keyframes tt-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes tt-fade { to { opacity: 1; } }

/* The loop, in hundredths of twelve seconds: bars drop 8 to 16, stops
   finish at 24, 34 and 44, the bars return at 56 to 60, the work goes up
   60 to 70, synced from 70, and it all resets over the last 6. */
@keyframes bar-4 { 0%, 8% { opacity: 1; } 10%, 58% { opacity: .15; } 60%, 100% { opacity: 1; } }
@keyframes bar-3 { 0%, 10% { opacity: 1; } 12%, 58% { opacity: .15; } 60%, 100% { opacity: 1; } }
@keyframes bar-2 { 0%, 12% { opacity: 1; } 14%, 57% { opacity: .15; } 59%, 100% { opacity: 1; } }
@keyframes bar-1 { 0%, 14% { opacity: 1; } 16%, 56% { opacity: .15; } 58%, 100% { opacity: 1; } }
@keyframes off-cross { 0%, 16% { opacity: 0; } 18%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes badge-wait { 0%, 23% { opacity: 0; } 25%, 68% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes n-1 { 0%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes n-2 { 0%, 33% { opacity: 0; } 34%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes n-3 { 0%, 43% { opacity: 0; } 44%, 100% { opacity: 1; } }
@keyframes badge-done { 0%, 70% { opacity: 0; } 72%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dot-1 { 0%, 23% { fill: #d8cdb9; } 25%, 94% { fill: #2e7d4f; } 98%, 100% { fill: #d8cdb9; } }
@keyframes dot-2 { 0%, 33% { fill: #d8cdb9; } 35%, 94% { fill: #2e7d4f; } 98%, 100% { fill: #d8cdb9; } }
@keyframes dot-3 { 0%, 43% { fill: #d8cdb9; } 45%, 94% { fill: #2e7d4f; } 98%, 100% { fill: #d8cdb9; } }
@keyframes tick-1 { 0%, 23% { opacity: 0; } 25%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tick-2 { 0%, 33% { opacity: 0; } 35%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tick-3 { 0%, 43% { opacity: 0; } 45%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes up-show { 0%, 59% { opacity: 0; } 61%, 69% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes up-rise { from { transform: translateY(8px); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .navlink, .tour-tab { transition: none; }
  .btn:hover { transform: none; }
  /* The ticker stops being a ticker: its list, once, wrapped and centred. */
  .ticker-track { display: block; width: auto; }
  .ticker-list { flex-wrap: wrap; justify-content: center; row-gap: 12px; column-gap: 28px; }
  .ticker-list[aria-hidden="true"] { display: none; }
  .tour-panel, .tour-panel.is-on { transition: none; }
}