/* ==========================================================================
   Testwater's pages on the app page kit (/apps/kit/kit.css).
   Attention: SF Pro on system grounds, one coralline tint for what's tappable
   and the chart's line, orange (always with the words Low and High) only for
   what's outside its range or late. The showpiece is a product shot: Reef 250's
   test of Mon 12 Oct as eight glass tubes in two coralline racks, each tube's
   own target range etched on its glass, the two outside it marked Low and High.
   ========================================================================== */

body.k-testwater {
  --k-bg: #FFFFFF;
  --k-bg-2: #F2F2F7;
  --k-ink: #1C1C1E;
  --k-ink-2: #5E5E63;
  --k-accent: #A8337F;           /* coralline */
  --k-accent-ink: #FFFFFF;
  --k-card: #FFFFFF;
  --k-line: rgba(60, 60, 67, .16);
  --k-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --tw-coral: #A8337F;
  --tw-coral-dark: #E07BBF;
  --tw-orange: #C2410C;          /* out of range, light */
  --tw-orange-dark: #FF9F0A;     /* out of range, dark */
  --tw-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
}

/* ---------- Hero: the copy ---------- */
.tw-hero { overflow-x: clip; }
.tw-hero .k-h1 { font-size: clamp(34px, min(3.6vw, 6.4svh), 58px); line-height: 1.02; letter-spacing: -.028em; font-weight: 600; text-wrap: balance; }
.tw-hero .k-hero-head > * + * { margin-top: 22px; }
.tw-hero .k-hero-more > * + * { margin-top: 22px; }
.tw-hero .k-lead { max-width: 32ch; font-size: clamp(18px, 1.4vw, 21px); }
.tw-hero .k-hero-more > .tw-price { margin-top: 16px; }
.tw-price { font-size: 16px; line-height: 1.5; color: var(--k-ink); max-width: 42ch; }
.tw-price b { font-weight: 600; }
.tw-hero .k-meta { white-space: nowrap; }
@media (min-width: 900px) {
  .tw-hero .k-hero-grid { grid-template-columns: minmax(0, clamp(340px, 29vw, 430px)) minmax(0, 1fr); gap: clamp(28px, 2.8vw, 44px); }
}
@media (min-width: 900px) and (min-height: 820px) {
  html.k-motion .tw-hero { min-height: 0; height: 200svh; align-items: flex-start; padding: 0; }
  html.k-motion .tw-hero > .k-wrap { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: 96px; padding-bottom: 24px; box-sizing: border-box; }
  html.k-motion .tw-hero .k-hero-grid { width: 100%; }
}
@media (max-width: 899px) {
  .tw-hero { padding: 100px 0 36px; }
  .tw-hero .k-hero-grid { gap: 18px; }
  .tw-hero .k-h1 { font-size: clamp(30px, 8.9vw, 40px); }
  .tw-hero .k-hero-head > * + * { margin-top: 16px; }
  .tw-hero .k-hero-more { margin-top: 10px; }
}

/* ---------- Hero: the racks ----------
   One em is the showpiece's unit: everything below is drawn in it, so the object
   scales as one piece (by width and by height). Two units side by side on a wide
   screen, stacked when the column is narrow; each unit is a rack and its side
   column (the target-range note, or the tag). */
.tw-show { margin: 0; position: relative; container-type: inline-size;
  --tw-over: max(0px, min(240px, (100vw - 1152px) / 2 - 64px)); }   /* the tag clears the window's edge by 64px or more */
@media (min-width: 900px) { .tw-show { margin-right: calc(-1 * var(--tw-over)); } }
.tw-racks {
  display: flex; align-items: flex-start; justify-content: center; gap: .7em;
  font: 400 min(calc(100cqw / 76.5), calc((100svh - 170px) / 58))/1.15 var(--tw-sf);
  color: var(--k-ink);
  --col: 6.6em; --end: 1.6em; --tw: 4.7em; --post: 1.1em;
  --tt: 1.3em;                   /* the tube's top */
  --rt: 9.6em; --rf: 1.15em; --rh: 3.3em;    /* rail: top face, its depth, its front */
  --bt: 46em; --bf: 1.2em; --bh: 9.2em;      /* base: top face, its depth, its front */
  --uh: 58em;
}
.tw-unit { position: relative; flex: none; width: 36.5em; height: var(--uh);
  --tb: calc(var(--bt) + var(--bf) * .5);                 /* tube bottom, in its well */
  --rb: calc(var(--rt) + var(--rf) + var(--rh));          /* rail bottom */
  --sc: calc(var(--tb) - var(--rb) - .7em);               /* the liquid's scale: bottom to just under the rail */
}
.tw-rack { position: absolute; left: 0; top: 0; isolation: isolate;
  width: calc(4 * var(--col) + 2 * var(--end)); height: calc(var(--bt) + var(--bf) + var(--bh)); }
.tw-rack i, .tw-unit i { font-style: normal; }

/* The soft shadow it casts on the page */
.tw-shadow { position: absolute; z-index: 0; left: -7%; right: -7%; top: calc(var(--bt) + var(--bf) + var(--bh) - 1.9em); height: 3.8em;
  background: radial-gradient(closest-side, rgba(84, 22, 62, .34), rgba(84, 22, 62, .13) 58%, rgba(84, 22, 62, 0)); }
.tw-shadow::after { content: ""; position: absolute; left: 9%; right: 9%; top: 1.45em; height: .9em;
  background: radial-gradient(closest-side, rgba(60, 10, 40, .38), rgba(60, 10, 40, 0)); }

/* Top faces of the rail and the base, with their holes */
.tw-rtop, .tw-btop { position: absolute; z-index: 1; left: 0; right: 0; border-radius: .5em .5em 0 0; }
.tw-rtop { top: var(--rt); height: var(--rf); background: linear-gradient(180deg, #F2BDE0 0%, #E596CA 55%, #DA82BE 100%); }
.tw-btop { top: var(--bt); height: var(--bf); background: linear-gradient(180deg, #F0B3DA 0%, #E08CC3 55%, #D47AB6 100%); }
.tw-rtop > i, .tw-btop > i { position: absolute; top: 0; bottom: 0; left: var(--end); right: var(--end);
  background: radial-gradient(calc(var(--tw) * .57) 40% at 50% 50%, #34091F 0%, #57133F 86%, rgba(87, 19, 63, 0) 94%) 0 0 / var(--col) 100% repeat-x; }

/* The tubes: glass, liquid with its meniscus, the etched band, highlights */
.tw-tube { position: absolute; z-index: 2; top: var(--tt); width: var(--tw); height: calc(var(--tb) - var(--tt));
  left: calc(var(--end) + var(--col) * var(--i) + (var(--col) - var(--tw)) / 2); }
.tw-glass { position: absolute; inset: 0; overflow: hidden;
  border-radius: 0 0 calc(var(--tw) / 2) calc(var(--tw) / 2) / 0 0 calc(var(--tw) * .56) calc(var(--tw) * .56);
  background: linear-gradient(90deg, rgba(112, 118, 132, .30) 0%, rgba(150, 156, 170, .13) 9%, rgba(214, 218, 228, .08) 22%, rgba(214, 218, 228, .1) 64%, rgba(150, 156, 170, .15) 84%, rgba(104, 110, 124, .34) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(168, 51, 127, .07));
  box-shadow: inset 0 0 0 .07em rgba(92, 98, 112, .32); }
.tw-glass::after { content: ""; position: absolute; z-index: 3; top: .8em; bottom: calc(var(--tw) * .4); left: 0; right: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 12%, rgba(255, 255, 255, .96) 17%, rgba(255, 255, 255, .42) 23%, transparent 30%, transparent 75%, rgba(255, 255, 255, .62) 80%, transparent 85%); }
.tw-liq { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(var(--lvl) * var(--sc) + .15em); will-change: transform;
  background:
    linear-gradient(90deg, rgba(118, 16, 82, .36) 0%, rgba(118, 16, 82, .10) 15%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, 0) 62%, rgba(118, 16, 82, .14) 84%, rgba(118, 16, 82, .40) 100%),
    linear-gradient(180deg, #F4A9D5 0%, #E37DBB 38%, #C9549D 100%); }
.tw-liq::before { /* the meniscus: its surface seen from just above */
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tw) * -.12); height: calc(var(--tw) * .24); border-radius: 50%;
  background: radial-gradient(ellipse 62% 72% at 50% 42%, #FDE7F3 0%, #F8C4E2 55%, #EC9ACB 100%);
  box-shadow: inset 0 -.07em .06em rgba(150, 30, 100, .3); }
.tw-etch { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(.45 * var(--sc) + .15em); height: calc(.27 * var(--sc));
  background: linear-gradient(90deg, rgba(226, 226, 236, .42), rgba(250, 250, 253, .24) 30%, rgba(250, 250, 253, .2) 70%, rgba(226, 226, 236, .42)); }
.tw-etch::before, .tw-etch::after { content: ""; position: absolute; left: 0; right: 0; height: .6em; box-sizing: border-box;
  border-bottom: .13em solid rgba(62, 66, 76, .66); border-radius: 0 0 50% 50% / 0 0 .38em .38em; }
.tw-etch::before { top: -.5em; }
.tw-etch::after { bottom: -.08em; }
.tw-lip { position: absolute; z-index: 4; left: -.26em; right: -.26em; top: calc(var(--tw) * -.13); height: calc(var(--tw) * .26); border-radius: 50%; box-sizing: border-box;
  border: .15em solid rgba(176, 182, 194, .95);
  background: radial-gradient(ellipse at 50% 30%, rgba(140, 146, 160, .34), rgba(255, 255, 255, .25) 72%);
  box-shadow: 0 .07em .1em rgba(60, 64, 74, .22), inset 0 .05em .04em rgba(255, 255, 255, .9); }

/* What's in front of the tubes: the holes' front rims, the rail, the base */
.tw-rlip, .tw-blip { position: absolute; z-index: 3; left: var(--end); right: var(--end);
  background: radial-gradient(calc(var(--tw) * .57) 80% at 50% 0, rgba(52, 9, 36, 0) 84%, rgba(52, 9, 36, .9) 89%, rgba(52, 9, 36, 0) 95%) 0 0 / var(--col) 100% repeat-x; }
.tw-rlip { top: calc(var(--rt) + var(--rf) * .5); height: calc(var(--rf) * .5); }
.tw-blip { top: calc(var(--bt) + var(--bf) * .5); height: calc(var(--bf) * .5); }
.tw-rlip > i, .tw-blip > i { position: absolute; inset: 0;
  -webkit-mask: radial-gradient(calc(var(--tw) * .57) 80% at 50% 0, transparent 93%, #000 97%) 0 0 / var(--col) 100% repeat-x;
          mask: radial-gradient(calc(var(--tw) * .57) 80% at 50% 0, transparent 93%, #000 97%) 0 0 / var(--col) 100% repeat-x; }
.tw-rlip > i { background: linear-gradient(180deg, #E596CA, #DA82BE); }
.tw-blip > i { background: linear-gradient(180deg, #E08CC3, #D47AB6); }
.tw-rail { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--rt) + var(--rf)); height: var(--rh); border-radius: 0 0 .4em .4em;
  background: linear-gradient(180deg, #CB55A0 0%, #B53E8A 28%, #A8337F 55%, #8E2768 100%);
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .5), inset 0 -.09em 0 rgba(70, 8, 48, .38), 0 .55em 1em -.45em rgba(90, 20, 60, .5); }
.tw-rail::after { content: ""; position: absolute; left: .7em; right: .7em; top: 24%; height: .17em; border-radius: .1em;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 12%, rgba(255, 255, 255, .2) 62%, rgba(255, 255, 255, 0)); }
.tw-post { position: absolute; z-index: 1; width: var(--post); top: calc(var(--rb) - .3em); height: calc(var(--bt) - var(--rb) + .6em);
  background: linear-gradient(90deg, #7A1F5C 0%, #B4428D 38%, #A8337F 62%, #761D59 100%); }
.tw-post-l { left: .3em; }
.tw-post-r { right: .3em; }
.tw-base { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--bt) + var(--bf)); height: var(--bh); border-radius: 0 0 .65em .65em;
  background: linear-gradient(180deg, #C14A95 0%, #A8337F 32%, #8E2768 100%);
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .42), inset 0 -.12em 0 rgba(70, 8, 48, .4); }
.tw-plate { position: absolute; left: .55em; right: .55em; top: .55em; bottom: .65em; border-radius: .55em; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(4, var(--col)); align-content: center; padding-left: calc(var(--end) - .55em);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F4F7 100%);
  box-shadow: inset 0 .12em .22em rgba(70, 10, 46, .3), 0 .07em 0 rgba(255, 255, 255, .3); }
.tw-plate p { text-align: center; line-height: 1.12; }
.tw-plate small { display: block; font-size: 1.1em; color: var(--k-ink-2); letter-spacing: -.012em; white-space: nowrap; }
.tw-plate b { display: block; margin-top: .12em; font-size: 2.1em; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--k-ink); white-space: nowrap; }
.tw-plate span { display: block; margin-top: .14em; font-size: 1.05em; color: var(--k-ink-2); white-space: nowrap; }
.tw-plate em { font-style: normal; font-weight: 600; color: var(--tw-orange); }
.tw-plate p.is-out b { color: var(--tw-orange); }
.tw-plate p.is-empty b { color: var(--k-ink-2); font-weight: 400; }
.tw-plate p.is-empty em { visibility: hidden; }

/* The target range, labelled once */
.tw-bracket { position: absolute; z-index: 6; width: .55em; box-sizing: border-box;
  left: calc(var(--end) + 3 * var(--col) + (var(--col) + var(--tw)) / 2 + .2em);
  top: calc(var(--tb) - .15em - .72 * var(--sc)); height: calc(.27 * var(--sc));
  border: .12em solid var(--k-ink); border-left: 0; border-radius: 0 .15em .15em 0; }
.tw-note { position: absolute; z-index: 6; left: calc(4 * var(--col) + 2 * var(--end) + .5em); width: 6.6em;
  top: calc(var(--tb) - .15em - .585 * var(--sc)); transform: translateY(-50%); color: var(--k-ink); }
.tw-note::before { /* the leader, back to the bracket */ content: ""; position: absolute; top: 50%; height: .12em; margin-top: -.06em; border-radius: .1em; background: var(--k-ink);
  right: calc(100% + .35em); width: calc(4 * var(--col) + 2 * var(--end) + .5em - (var(--end) + 3 * var(--col) + (var(--col) + var(--tw)) / 2 + .75em) - .35em); }
.tw-note span { display: block; font-size: 1.12em; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; }

/* The tag hung on the rack: the test's summary */
.tw-hook { position: absolute; z-index: 6; width: .8em; height: .8em; border-radius: 50%; box-sizing: border-box;
  left: calc(4 * var(--col) + 2 * var(--end) - 1.2em); top: calc(var(--rt) + var(--rf) + var(--rh) * .5 - .4em);
  border: .16em solid #D9DADF; box-shadow: 0 .05em .1em rgba(40, 0, 25, .5); }
.tw-string { position: absolute; z-index: 5; width: .1em; border-radius: .05em; background: #9A9BA2; transform-origin: 50% 0; transform: rotate(-5deg);
  left: calc(4 * var(--col) + 2 * var(--end) - .85em); top: calc(var(--rt) + var(--rf) + var(--rh) * .5); height: calc(var(--rh) * .5 + 2.85em); }
.tw-tag { position: absolute; z-index: 7; box-sizing: border-box; width: 8.7em; padding: .75em .8em .85em .95em;
  left: calc(4 * var(--col) + 2 * var(--end) - 1.85em); top: calc(var(--rt) + var(--rf) + var(--rh) + 1.4em);
  transform: rotate(-4deg) scale(1.08); transform-origin: 1.35em 1.35em;
  background: linear-gradient(180deg, #FFFFFF, #FBF8FA); border-radius: .75em;
  box-shadow: 0 0 0 .06em rgba(60, 60, 67, .14), 0 1em 1.6em -.7em rgba(70, 20, 50, .5), 0 .2em .45em rgba(70, 20, 50, .12); }
.tw-eyelet { position: absolute; left: .9em; top: .9em; width: .9em; height: .9em; border-radius: 50%; box-sizing: border-box;
  border: .22em solid var(--tw-coral); background: #F3E6EE; box-shadow: inset 0 .06em .08em rgba(60, 10, 40, .35); }
.tw-tag p { margin: 0; }
.tw-tag-top { padding-left: 1.45em; line-height: 1.15; }
.tw-tag-top b { display: block; font-size: 1.02em; font-weight: 600; }
.tw-tag-top small { display: block; font-size: .92em; color: var(--k-ink-2); }
.tw-tag-n { margin-top: .5em !important; padding-top: .5em; border-top: .07em solid rgba(60, 60, 67, .16); font-size: 1.36em; font-weight: 600; line-height: 1.06; letter-spacing: -.015em; }
.tw-tag-l { margin-top: .35em !important; }
.tw-tag-l span { display: block; font-size: 1em; line-height: 1.25; font-weight: 600; color: var(--tw-orange); white-space: nowrap; }
.tw-tag-l span.is-off { visibility: hidden; }

/* Stacked: a narrow column (a phone, or a small window) */
@container (max-width: 640px) {
  .tw-racks { flex-direction: column; align-items: center; gap: .3em;
    font-size: min(calc(100cqw / 36.5), calc((100svh - 170px) / 39.4));
    --tw: 4.1em; --post: .9em; --tt: .8em; --rt: 3.2em; --rf: .9em; --rh: 2.2em; --bt: 12.2em; --bf: 1em; --bh: 5.5em; --uh: 19.55em; }
  .tw-plate { top: .45em; bottom: .5em; }
  .tw-plate p { line-height: 1.06; }
  .tw-plate small { font-size: 1.06em; }
  .tw-plate b { font-size: 1.72em; margin-top: .06em; }
  .tw-plate span { font-size: 1em; margin-top: .08em; }
  .tw-shadow { top: calc(var(--bt) + var(--bf) + var(--bh) - 1.2em); height: 2.2em; }
  .tw-shadow::after { top: .75em; height: .6em; }
  .tw-tag { top: calc(var(--rt) + var(--rf) + var(--rh) + 1.1em); }
  .tw-string { height: calc(var(--rh) * .5 + 2.55em); }
  .tw-glass::after { top: .5em; }
}

/* ---------- Bands: full-bleed grounds in the app's colours ---------- */
.tw-band { display: flex; align-items: center; box-sizing: border-box; padding: clamp(88px, 12svh, 140px) 0; color: #FFF; }
.tw-band > .k-wrap { width: 100%; }
@media (min-width: 900px) { .tw-band { min-height: 100svh; } }
.tw-band .k-h2 { color: #FFF !important; }
.tw-band .k-lead { color: rgba(255, 255, 255, .9); }
.tw-band .k-body { color: rgba(255, 255, 255, .8); }
.tw-band .k-eyebrow { color: rgba(255, 255, 255, .82); }
.tw-cards-band { background: radial-gradient(120% 90% at 12% 8%, #B9428F 0%, rgba(185, 66, 143, 0) 55%), linear-gradient(160deg, #9E2D77 0%, #8C2669 45%, #6B1B50 100%); }
.tw-ei-band { background: radial-gradient(110% 85% at 88% 12%, #6E2156 0%, rgba(110, 33, 86, 0) 60%), linear-gradient(165deg, #4D133A 0%, #3B0E2D 55%, #2A0920 100%); }
@media (min-width: 900px) {
  .tw-cards-band .k-band-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .tw-ei-band .k-band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Chapter 1: the out-of-range cards at hero scale */
.tw-cards { display: grid; gap: 16px; width: 100%; max-width: 600px; justify-self: center; }
.tw-sec-h { font: 600 17px/1.2 var(--tw-sf); color: rgba(255, 255, 255, .86); padding: 0 22px; margin-bottom: -4px !important; }
.tw-card { background: #FFF; border-radius: 28px; padding: 22px 24px 16px; color: var(--k-ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 50px 80px -46px rgba(30, 0, 20, .7), 0 12px 30px -18px rgba(30, 0, 20, .35); }
.tw-card-top { display: flex; justify-content: space-between; align-items: center; font: 600 19px/1.2 var(--tw-sf); }
.tw-card-top i, .tw-dose-row i { width: 9px; height: 9px; border: solid #C7C7CC; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); flex: none; }
.tw-val { margin-top: 6px !important; display: flex; align-items: baseline; gap: 8px; }
.tw-val b { font: 700 42px/1 var(--tw-sf); color: var(--tw-orange); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tw-val span { font-size: 19px; color: var(--k-ink-2); }
.tw-val em { font: 600 19px/1 var(--tw-sf); font-style: normal; color: var(--tw-orange); }
.tw-target { margin-top: 6px !important; font-size: 16px; color: var(--k-ink-2); }
.tw-chart { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.tw-chart .tw-cband { fill: rgba(118, 118, 128, .12); }
.tw-chart .tw-cline { fill: none; stroke: var(--tw-coral); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.tw-chart .tw-cpt { fill: var(--tw-orange); }
.tw-chart .tw-cnew { fill: var(--tw-orange); stroke: #FFF; stroke-width: 2.5; }
.tw-chart text { font: 500 11px var(--tw-sf); fill: #6E6E73; }
.tw-chart .tw-base { stroke: rgba(60, 60, 67, .25); stroke-width: 1; }
.tw-dose-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0 !important; padding: 14px 0 4px; border-top: 1px solid rgba(60, 60, 67, .14); font-size: 18px; color: var(--tw-coral); }

/* Chapter 4: the fertiliser schedule, each salt's grams with its bar */
.tw-ei { width: 100%; max-width: 580px; justify-self: center; box-sizing: border-box; padding: 18px 18px 16px; border-radius: 32px; background: #F2F2F7; color: var(--k-ink); font-family: var(--tw-sf);
  box-shadow: 0 60px 100px -56px rgba(0, 0, 0, .85), 0 16px 36px -22px rgba(0, 0, 0, .5); }
.tw-ei-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #FFF; border-radius: 22px; padding: 14px 18px; }
.tw-ei-head p b { display: block; font: 600 19px/1.2 var(--tw-sf); }
.tw-ei-head p small { display: block; font-size: 15px; color: var(--k-ink-2); }
.tw-ei-n { display: flex; align-items: center; gap: 12px; }
.tw-ei-n > span:first-child { font-size: 16px; color: var(--k-ink-2); }
.tw-n { font: 600 24px/1 var(--tw-sf); font-variant-numeric: tabular-nums; min-width: .7em; text-align: center; }
.tw-step { display: flex; border-radius: 999px; background: rgba(118, 118, 128, .12); }
.tw-step i { width: 46px; height: 34px; display: grid; place-items: center; font: 500 22px/1 var(--tw-sf); color: var(--k-ink); }
.tw-step i + i { box-shadow: inset 1px 0 0 rgba(60, 60, 67, .2); }
.tw-step i.is-off { color: rgba(60, 60, 67, .3); }
.tw-ei-h { font: 600 17px/1.2 var(--tw-sf); color: #8A8A8E; margin: 18px 0 8px 18px !important; }
.tw-salt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; background: #FFF; padding: 13px 18px 14px; }
.tw-ei-h + .tw-salt { border-radius: 22px 22px 0 0; }
.tw-salt + .tw-salt { box-shadow: inset 0 1px 0 rgba(60, 60, 67, .12); }
.tw-ei .tw-salt:last-of-type { border-radius: 0 0 22px 22px; }
.tw-salt p b { display: block; font: 600 17px/1.2 var(--tw-sf); }
.tw-salt p small { display: block; font-size: 13px; color: var(--k-ink-2); }
.tw-g { font-size: 15px; color: var(--k-ink-2); white-space: nowrap; }
.tw-g b { font: 600 20px/1 var(--tw-sf); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.tw-bar { grid-column: 1 / -1; display: block; height: 7px; border-radius: 4px; background: rgba(118, 118, 128, .12); overflow: hidden; }
.tw-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #C04A95, var(--tw-coral)); transform-origin: 0 50%; transition: transform .42s cubic-bezier(.3, .7, .25, 1); }
.tw-ei-foot { margin: 10px 18px 0 !important; font-size: 13px; line-height: 1.4; color: #8A8A8E; }
@media (max-width: 899px) {
  .tw-cards-band .k-band-grid > .k-stack { order: -1; }
  .tw-card { padding: 18px 18px 12px; border-radius: 24px; }
  .tw-val b { font-size: 34px; }
  .tw-ei { padding: 12px 12px 12px; border-radius: 26px; }
  .tw-ei-head { padding: 12px 14px; }
  .tw-ei-n > span:first-child { display: none; }
  .tw-salt { padding: 11px 14px 12px; }
}

/* ---------- Scenes ---------- */
@media (min-width: 900px) {
  .tw-log-sec .k-stage-grid { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
  .tw-dosing.k-flip .k-stage-grid, .tw-due-sec.k-flip .k-stage-grid { grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr); }
}
.tw-vis { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.tw-vis-rev { flex-direction: row-reverse; }
.tw-side, .tw-work { flex: none; width: min(340px, 100% - var(--k-device-w) - 28px); }
.tw-side { display: grid; gap: 12px; }
.k-testwater .k-device-screen { container-type: inline-size; }
.tw-caret { display: inline-block; width: 2px; height: 1.12em; margin-left: 1px; vertical-align: -.16em; background: var(--tw-coral); border-radius: 1px; visibility: hidden; }
.is-focus .tw-caret { visibility: visible; }
.tw-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--k-card); box-shadow: 0 0 0 1px var(--k-line); font: 600 13px/1.2 var(--tw-sf); color: var(--k-ink); white-space: nowrap; }
.tw-chip u { text-decoration: none; font-weight: 400; color: var(--k-ink-2); }
.tw-chip b { font-weight: 600; }
.tw-chip-field > span { font-variant-numeric: tabular-nums; }
.tw-chip-field .tw-caret { height: 1.05em; }
.tw-chip-out { color: var(--tw-orange); }
.tw-chip.is-hidden { visibility: hidden; }

/* Log a test: one capture, the rows that change drawn over it in its own cell white and SF Pro */
.tw-port, .tw-scroll, .tw-pin { position: absolute; inset: 0; }
.tw-pin { display: none; }
.tw-patch { position: absolute; inset: 0; font: 400 calc(100cqw / 44)/1 var(--tw-sf); color: #000; pointer-events: none; }
.tw-patch p { position: absolute; margin: 0; background: #FFF; white-space: nowrap; }
.tw-pv { left: 28.6em; width: 7.95em; height: 3.2em; line-height: 3.2em; text-align: right; padding-right: .1em; box-sizing: border-box; }
.tw-pv > span { font-size: 1.7em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tw-pv .tw-caret { width: .2em; height: 2.1em; vertical-align: -.5em; margin-left: .1em; }
.tw-pv-no3 { top: 63.1em; }
.tw-pv-po4 { top: 69.9em; }
.tw-pv-no3.is-out > span { color: var(--tw-orange); }
.tw-pc { font-size: 1.3em; left: 2.923em; top: 49.808em; width: 13.385em; height: 1.654em; line-height: 1.654em; color: rgba(60, 60, 67, .6); }   /* in 13 pt ems */
.tw-pc em, .tw-log-side small em { font-style: normal; font-weight: 600; color: var(--tw-orange); }
.tw-patch .is-low .tw-p-high, .tw-patch .is-low .tw-p-dot, .tw-log-side .is-low .tw-p-high, .tw-log-side .is-low .tw-p-dot { display: none; }

.tw-field { background: #FFF; border-radius: 20px; padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline;
  box-shadow: 0 0 0 1px var(--k-line), 0 30px 60px -40px rgba(0, 0, 0, .3); transition: box-shadow .3s ease; }
.tw-field.is-focus { box-shadow: 0 0 0 2px var(--tw-coral), 0 30px 60px -40px rgba(0, 0, 0, .3); }
.tw-field b { font: 400 17px/1.2 var(--tw-sf); color: var(--k-ink); }
.tw-fv { font: 600 19px/1 var(--tw-sf); color: var(--k-ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-fv u { text-decoration: none; font-weight: 400; font-size: 15px; color: #8A8A8E; margin-left: 5px; }
.tw-field.is-out .tw-fv > span { color: var(--tw-orange); }
.tw-field small { grid-column: 1 / -1; font-size: 14px; color: #8A8A8E; }
.tw-kbar { display: flex; justify-content: space-between; align-items: center; padding: 6px; border-radius: 999px; background: rgba(242, 242, 247, .92); box-shadow: 0 0 0 1px var(--k-line), 0 18px 40px -26px rgba(0, 0, 0, .35); }
.tw-kb-nav { display: flex; gap: 2px; padding: 0 6px; }
.tw-kb-nav svg { width: 30px; height: 30px; fill: none; stroke: var(--k-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tw-seg { position: relative; display: grid; grid-template-columns: repeat(3, 44px); height: 34px; border-radius: 999px; background: rgba(118, 118, 128, .14); --seg: 0; }
.tw-seg > span { position: relative; z-index: 1; display: grid; place-items: center; font: 600 17px/1 var(--tw-sf); color: var(--k-ink); }
.tw-seg-thumb { position: absolute; z-index: 0; top: 2px; left: 2px; width: 40px; bottom: 2px; border-radius: 999px; background: #FFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .05); transform: translateX(calc(var(--seg) * 44px)); }
.tw-seg-s { grid-template-columns: repeat(3, 34px); height: 28px; }
.tw-seg-s > span { font-size: 14px; }
.tw-seg-s .tw-seg-thumb { width: 30px; transform: translateX(calc(var(--seg) * 34px)); }

/* Reef dosing (dark, as the app's dosing screens are shot) */
.tw-dosing { background: #1C1C1E; color: #F2F2F7; }
.tw-dosing .k-h2 { color: #FFF !important; }
.tw-dosing .k-body, .tw-dosing .k-lead { color: #C7C7CC; }
.tw-dosing .k-body strong { color: #FFF; }
.tw-dosing .k-eyebrow { color: var(--tw-coral-dark); }
.tw-dosing .k-step-n { color: #AEAEB2; }
.tw-dosing .k-pips i { background: rgba(255, 255, 255, .18); }
.tw-dosing .k-pips i.is-on { background: var(--tw-coral-dark); }
.tw-dosing .tw-chip { background: #2C2C2E; color: #FFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.tw-lab > span.is-off, .tw-w-head span > span.is-off { visibility: hidden; }
.tw-work { position: relative; box-sizing: border-box; padding: 20px 22px 22px; border-radius: 26px; background: #2C2C2E; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 70px -40px rgba(0, 0, 0, .9); will-change: clip-path; }
.tw-work p { margin: 0; }
.tw-w-head b { display: block; font: 600 17px/1.25 var(--tw-sf); color: #FFF; }
.tw-w-head > span { display: block; margin-top: 4px; font-size: 15px; color: #AEAEB2; }
.tw-w-line { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tw-w-line span { display: block; font-size: 13px; line-height: 1.3; color: #98989F; }
.tw-w-line b { display: block; margin-top: 4px; font: 600 17px/1.3 var(--tw-sf); color: #FFF; font-variant-numeric: tabular-nums; }
.tw-w-res strong { display: block; margin-top: 2px; font: 700 30px/1.1 var(--tw-sf); letter-spacing: -.01em; color: var(--tw-coral-dark); font-variant-numeric: tabular-nums; }
.tw-wstrip { position: relative; box-sizing: border-box; padding: 9px 12px; border-radius: 14px; background: #2C2C2E; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); font: 600 12.5px/1.45 var(--tw-sf); color: #E5E5EA; font-variant-numeric: tabular-nums; will-change: clip-path; }
.tw-wstrip p { margin: 0; white-space: nowrap; }
.tw-wstrip b { color: var(--tw-coral-dark); }

/* Screens rebuilt in HTML: a fixed grid of 44 em across (one em is ten points) */
.tw-scr { position: absolute; inset: 0; overflow: hidden; font: 400 calc(100cqw / 44)/1.2 var(--tw-sf); }
.tw-scr p { margin: 0; }
.tw-sb { position: absolute; left: 0; right: 0; top: 0; height: 6.3em; display: flex; align-items: center; justify-content: space-between; padding: .2em 4.2em 0 6.7em; box-sizing: border-box; }
.tw-sb > b { font-size: 1.72em; font-weight: 600; letter-spacing: -.01em; }
.tw-sb-i svg { display: block; width: 9.4em; height: 2.4em; fill: currentColor; }
.tw-ed { background: #0B0B0C; color: #FFF; }
.tw-ed-sheet { position: absolute; left: 0; right: 0; top: 6.2em; bottom: 0; border-radius: 3.6em 3.6em 0 0; background: #1C1C1E; padding: 2em 2.1em 0; box-sizing: border-box; }
.tw-ed-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 4.4em; }
.tw-ed-nav p { text-align: center; line-height: 1.2; }
.tw-ed-nav p b { display: block; font-size: 1.7em; font-weight: 600; }
.tw-ed-nav p small { display: block; font-size: 1.2em; color: rgba(235, 235, 245, .6); }
.tw-gl { justify-self: start; display: grid; place-items: center; font-size: 1.7em; height: 2.6em; padding: 0 1em; border-radius: 1.3em; background: rgba(120, 120, 128, .26); box-shadow: inset 0 0 0 .05em rgba(255, 255, 255, .14); }
.tw-add { justify-self: end; font-weight: 600; color: rgba(235, 235, 245, .32); background: rgba(120, 120, 128, .22); transition: background-color .25s ease, color .25s ease; }
.tw-add.is-on { color: #FFF; background: #BC4A93; box-shadow: inset 0 .05em 0 rgba(255, 255, 255, .3); }
.tw-ed-cell { margin-top: 3.4em; border-radius: 2.6em; background: #2C2C2E; padding: 0 2em; }
.tw-ed-h { font-size: 1.7em; margin: 1.4em 0 .5em 1.18em !important; font-weight: 600; color: rgba(235, 235, 245, .6); }
.tw-ed-h + .tw-ed-cell { margin-top: 0; }
.tw-ed-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; height: 5.2em; font-size: 1em; }
.tw-ed-row + .tw-ed-row { box-shadow: 0 -.06em 0 rgba(84, 84, 88, .65); }
.tw-ed-row > span:first-child { font-size: 1.7em; }
.tw-ed-v { display: flex; align-items: baseline; gap: .6em; }
.tw-ed-v b { font-size: 1.7em; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1px; }
.tw-ed-v u { text-decoration: none; font-size: 1.5em; color: rgba(235, 235, 245, .6); min-width: 2.3em; display: inline-flex; align-items: center; gap: .25em; }
.tw-ed-v u.tw-menu { color: var(--tw-coral-dark); }
.tw-menu svg { width: .55em; height: .9em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tw-ed-f { margin: .9em 2em 0 !important; font-size: 1.3em; line-height: 1.3; color: rgba(235, 235, 245, .6); }
.tw-ed-f + .tw-ed-cell { margin-top: 3em; }
.tw-ed-v .tw-caret { width: .2em; height: 2.1em; align-self: center; margin: 0 0 0 -.45em; }
.tw-kb { position: absolute; left: 0; right: 0; bottom: 0; }
.tw-kb-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 1.6em 1em; }
.tw-kb-g { display: flex; align-items: center; gap: .4em; height: 4.4em; padding: 0 1.2em; border-radius: 2.2em; background: rgba(120, 120, 128, .3); box-shadow: inset 0 0 0 .07em rgba(255, 255, 255, .14); }
.tw-kb-g svg { width: 2.6em; height: 2.6em; fill: none; stroke: #FFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tw-kb-done { font-size: 1.7em; font-weight: 600; height: 2.6em; padding: 0 .9em; border-radius: 1.3em; }
.tw-kb-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75em .65em; padding: 1em .9em 4.4em; border-radius: 3em 3em 0 0; background: rgba(44, 44, 47, .96); box-shadow: inset 0 .06em 0 rgba(255, 255, 255, .1); }
.tw-kb-pad > span { height: 4.7em; border-radius: 1em; background: rgba(118, 118, 124, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transition: background-color .15s ease; }
.tw-kb-pad b { font-size: 2.5em; font-weight: 400; }
.tw-kb-pad small { margin-top: .15em; font-size: 1em; font-weight: 600; letter-spacing: .16em; }
.tw-kb-pad > .tw-kb-x { background: none; }
.tw-kb-x svg { width: 2.6em; height: 1.9em; fill: none; stroke: #FFF; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tw-kb-pad > span.is-press { background: rgba(200, 200, 206, .75); }

/* The Lock Screen, with the reminder */
.tw-lock { color: #FFF; background: radial-gradient(90% 55% at 30% 18%, #D15DA6 0%, rgba(209, 93, 166, 0) 70%), linear-gradient(172deg, #B8418E 0%, #A8337F 30%, #6A1B50 66%, #2A0920 100%); }
.tw-sb-lock { justify-content: flex-end; }
.tw-lk-lock { position: absolute; left: 50%; top: 6.6em; width: 1.6em; height: 2em; margin-left: -.8em; fill: none; stroke: #FFF; stroke-width: 1.7; }
.tw-lk-lock rect { fill: #FFF; stroke: none; }
.tw-lk-date { position: absolute; left: 0; right: 0; top: 4.62em; text-align: center; font-size: 2.1em; font-weight: 600; color: rgba(255, 255, 255, .9); }
.tw-lk-time { position: absolute; left: 0; right: 0; top: 1.26em; text-align: center; font: 600 10.4em/1 ui-rounded, "SF Pro Rounded", var(--tw-sf); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .96); }
.tw-lk-stack { position: absolute; left: 1.5em; right: 1.5em; top: 29em; will-change: transform, opacity; }
.tw-lk-note { display: grid; grid-template-columns: 3.8em 1fr auto; gap: 0 1.1em; align-items: center; padding: 1.4em 1.5em; border-radius: 2.6em; background: rgba(248, 240, 246, .8); color: #111; box-shadow: 0 .6em 2em -1em rgba(40, 0, 25, .5); }
.tw-scr .tw-lk-note img, .k-page main .tw-lk-note img { position: static; width: 3.8em; height: 3.8em; border-radius: .9em; object-fit: cover; }
.tw-lk-note p b { display: block; font-size: 1.5em; font-weight: 600; line-height: 1.25; }
.tw-lk-note p span { display: block; font-size: 1.5em; line-height: 1.25; color: #1C1C1E; }
.tw-lk-note small { align-self: start; font-size: 1.3em; color: rgba(60, 60, 67, .6); }
.tw-lk-act { display: flex; align-items: center; justify-content: space-between; width: 25em; margin-top: .8em; padding: 1.25em 1.7em; box-sizing: border-box; border-radius: 2.4em; background: rgba(248, 240, 246, .8); color: #111; transition: background-color .2s ease; }
.tw-lk-act span { font-size: 1.7em; }
.tw-lk-act svg { width: 2.2em; height: 2.2em; }
.tw-lk-act svg circle, .tw-chip-done svg circle { fill: #111; }
.tw-lk-act svg path, .tw-chip-done svg path { fill: none; stroke: #FFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tw-lk-act.is-press { background: rgba(214, 202, 212, .95); }
.tw-lk-btns { position: absolute; left: 4.6em; right: 4.6em; bottom: 6.4em; display: flex; justify-content: space-between; }
.tw-lk-btns i { width: 5em; height: 5em; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 6, 22, .32); box-shadow: inset 0 0 0 .08em rgba(255, 255, 255, .16); }
.tw-lk-btns svg { width: 2.2em; height: 2.2em; fill: none; stroke: #FFF; stroke-width: 1.5; stroke-linejoin: round; }
.tw-lock::after { content: ""; position: absolute; left: 50%; bottom: 1em; width: 14em; height: .5em; margin-left: -7em; border-radius: .3em; background: rgba(255, 255, 255, .9); }

/* Tasks: the water change's row, ticking done */
.tw-task { background: #FFF; border-radius: 22px; padding: 16px 18px; display: grid; grid-template-columns: 24px 1fr auto; gap: 2px 12px; align-items: start;
  box-shadow: 0 0 0 1px var(--k-line), 0 30px 60px -40px rgba(0, 0, 0, .3); }
.tw-task .tw-tick { grid-row: 1 / span 3; margin-top: 1px; }
.tw-task b { grid-column: 2; font: 600 17px/1.25 var(--tw-sf); color: var(--k-ink); }
.tw-task em { grid-column: 2; font-style: normal; font-size: 16px; color: #8A8A8E; }
.tw-task small { grid-column: 2 / -1; font-size: 14px; color: #8A8A8E; white-space: nowrap; }
.tw-bell { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 6px; font-size: 15px; color: #8A8A8E; }
.tw-bell svg { width: 18px; height: 18px; fill: none; stroke: #8A8A8E; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.tw-tick { position: relative; display: block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tw-coral); --tk: 0; }
.tw-tick::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tw-coral); transform: scale(var(--tk)); }
.tw-tick::after { content: ""; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 10px; border: solid #FFF; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); opacity: var(--tk); }
.tw-chip .tw-tick { width: 15px; height: 15px; box-shadow: inset 0 0 0 1.6px var(--tw-coral); }
.tw-chip .tw-tick::after { left: 5px; top: 2.5px; width: 3.5px; height: 7px; border-width: 0 1.7px 1.7px 0; }
.tw-chip-done svg { width: 15px; height: 15px; }
.tw-chip-done.is-press { background: #E5E5EA; }
.tw-due-sec { background: var(--k-bg); }

@media (max-width: 899px) {
  .tw-side, .tw-work { display: none; }
  .tw-vis { display: block; }
  /* The phone shows the top of the screen: Log a test is scrolled to its rows, as it is with the keyboard up,
     its bar pinned. */
  .tw-pin { display: block; clip-path: inset(0 0 84.6% 0); }
  .tw-port { clip-path: inset(15.4% 0 0 0); }
  .tw-scroll { transform: translateY(-26.5%); }
  .tw-scroll::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30%; background: #F2F1F6; }
  .tw-port::after { content: ""; position: absolute; left: 0; right: 0; top: 15.4%; height: 2.2%; background: linear-gradient(#F2F1F6, rgba(242, 241, 246, 0)); }
}

/* ---------- The rest: tiles with their own pictures ---------- */
.tw-rest { background: var(--k-bg-2); }
.tw-mini { display: grid; gap: 8px; margin-top: auto; }
.tw-mini div { background: var(--k-bg-2); border-radius: 16px; padding: 12px 16px; display: grid; gap: 2px; }
.tw-mini b { font: 600 16px/1.25 var(--tw-sf); color: var(--k-ink); }
.tw-mini span { font-size: 14px; color: var(--k-ink-2); }
.tw-mini em { font-style: normal; font-size: 14px; color: var(--tw-orange); font-weight: 600; }
.tw-csv { margin-top: auto; display: grid; gap: 8px; font-family: var(--tw-sf); }
.tw-csv-file { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--k-line); font: 500 13px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--k-ink); }
.tw-csv-file span { padding: 8px 10px; background: #FFF; box-shadow: inset -1px -1px 0 var(--k-line); font-variant-numeric: tabular-nums; }
.tw-csv-file span:nth-child(-n+3) { background: var(--k-bg-2); font-weight: 600; }
.tw-csv-map { font-size: 13px; color: var(--k-ink-2); }
.tw-csv-into { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--k-bg-2); font: 500 15px/1.2 var(--tw-sf); color: var(--k-ink); }
.tw-csv-into svg { width: 18px; height: 18px; fill: none; stroke: var(--tw-coral); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tw-files { display: grid; gap: 8px; margin-top: auto; }
.tw-files span { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--k-bg-2); font: 500 15px/1.2 var(--tw-sf); color: var(--k-ink); }
.tw-files em { font-style: normal; color: var(--k-ink-2); }
.tw-units { margin-top: auto; border-radius: 16px; background: var(--k-bg-2); padding: 2px 14px; }
.tw-units p { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; font: 400 15px/1.2 var(--tw-sf); color: var(--k-ink); }
.tw-units p + p { box-shadow: inset 0 1px 0 var(--k-line); }
.tw-sc { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(118, 118, 128, .14); }
.tw-sc b, .tw-sc i { min-width: 48px; padding: 5px 10px; box-sizing: border-box; text-align: center; border-radius: 999px; font: 600 13px/1.2 var(--tw-sf); font-style: normal; color: var(--k-ink); }
.tw-sc b { background: #FFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.tw-sm { display: inline-flex; align-items: center; gap: 5px; color: var(--tw-coral); }
.tw-sm svg { width: 8px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tw-reading { margin-top: auto; border-radius: 16px; background: var(--k-bg-2); padding: 12px 16px; font-family: var(--tw-sf); }
.tw-reading p { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tw-reading b { font: 400 16px/1.25 var(--tw-sf); color: var(--k-ink); }
.tw-reading p span { font-size: 14px; color: #8A8A8E; white-space: nowrap; }
.tw-reading p em { font-style: normal; font: 600 16px/1 var(--tw-sf); color: var(--tw-orange); }
.tw-reading small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: #8A8A8E; }
.tw-reading small em { font-style: normal; font-weight: 600; color: var(--tw-orange); }
.tw-plans { background: var(--k-bg-2); }

/* ---------- Plans, close ---------- */
.k-testwater .k-plan.k-plus { background: var(--tw-coral); color: #FFF; }
.k-testwater .k-plan.k-plus li::before { border-color: #FFF; }
.tw-close { background: radial-gradient(90% 120% at 50% 0%, #B9428F 0%, rgba(185, 66, 143, 0) 60%), var(--tw-coral); color: #FFF; }
.tw-close .k-h2 { color: #FFF !important; max-width: 16ch; text-wrap: balance; }
.tw-close .k-lockup b, .tw-close .k-lockup span { color: #FFF; }
.tw-close .k-lockup img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 10px 24px -10px rgba(50, 0, 30, .6); }
.tw-close .k-subnav { justify-content: center; margin-top: 34px; }
.tw-close .k-subnav a { color: #FFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.tw-close .k-subnav a[aria-current="page"] { background: #FFF; color: var(--tw-coral); }
.tw-close .k-btn-primary { background: #FFF; color: var(--tw-coral); }
.tw-close .k-soon::before { background: var(--tw-coral); box-shadow: 0 0 0 3px rgba(168, 51, 127, .25); }

/* ---------- Child pages ---------- */
.k-testwater.k-child-page .k-subnav a[aria-current="page"] { background: var(--k-accent); color: #FFF; box-shadow: none; }
.k-testwater .k-sub-hero .k-h1 { text-wrap: balance; }
.k-testwater .k-doc > .k-wrap > ul:not(.k-reasons), .k-testwater .k-doc > .k-wrap > ol { padding-left: 0; list-style-position: outside; margin-left: 1.15em; }
@media (min-width: 900px) {
  .k-testwater .k-doc > .k-wrap > ul:not(.k-reasons), .k-testwater .k-doc > .k-wrap > ol { margin-left: 0; }
}
.k-testwater .k-contact { background: var(--k-card); border-radius: 22px; padding: 24px; box-shadow: 0 0 0 1px var(--k-line); margin: 18px 0 8px; }
.k-testwater .k-contact > p + p { margin-top: 10px; }
.k-testwater .k-contact .sp-support-form { margin-top: 18px; }
/* Compare: "What sets it apart" beside the title, so there's no dead column and the nav is on the first screen */
@media (min-width: 900px) {
  .k-testwater .k-sub-hero:has(.k-standout) .k-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .k-testwater .k-sub-hero:has(.k-standout) .k-wrap > * { grid-column: 1; }
  .k-testwater .k-sub-hero:has(.k-standout) .k-standout { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; max-width: none; }
  .k-testwater .k-sub-hero:has(.k-standout) { padding-bottom: 48px; }
}
@media (max-width: 899px) {
  .k-testwater .k-sub-hero:has(.k-standout) .k-wrap { display: flex; flex-direction: column; align-items: flex-start; }
  .k-testwater .k-sub-hero:has(.k-standout) .k-standout { order: 5; margin-top: 28px; }
}

/* The primary button in the app's coralline, not ink (honey/coralline never as a black pill) */
.k-testwater .k-btn-primary { background: var(--tw-coral); color: #FFF; }
.k-testwater .k-hero .k-soon::before, .k-testwater .tw-plans-sec .k-soon::before { background: #FFF; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.k-testwater .tw-close .k-btn-primary { background: #FFF; color: var(--tw-coral); }

/* The working in the app's own words: long lines wrap between numbers. */
.tw-wstrip p { white-space: normal; }
.tw-w-res b { margin-top: 6px; font-weight: 500; color: #C7C7CC; }

/* ---------- Round 2 design fixes ---------- */
/* Hero: out of range shows in the glass (the app's orange, with Low or High on the plate), the
   target band frosted on every tube, and the tag's count as a figure on one line. */
.tw-tube.is-out .tw-liq {
  background:
    linear-gradient(90deg, rgba(140, 40, 0, .34) 0%, rgba(140, 40, 0, .1) 15%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, 0) 62%, rgba(140, 40, 0, .14) 84%, rgba(140, 40, 0, .38) 100%),
    linear-gradient(180deg, #FDBA8C 0%, #F27A3A 40%, #C2410C 100%); }
.tw-tube.is-out .tw-liq::before { background: radial-gradient(ellipse 62% 72% at 50% 42%, #FFF1E6 0%, #FECBA6 55%, #F59A5B 100%); box-shadow: inset 0 -.07em .06em rgba(160, 50, 0, .3); }
.tw-etch { background: linear-gradient(90deg, rgba(236, 236, 244, .5), rgba(252, 252, 255, .3) 30%, rgba(252, 252, 255, .27) 70%, rgba(236, 236, 244, .5)); }
.tw-etch::before, .tw-etch::after { border-bottom-color: rgba(62, 66, 76, .8); }
.tw-unit + .tw-unit { width: 39.3em; }
.tw-tag { width: 9.4em; transform: rotate(-4deg) scale(1.2); }
.tw-tag-n { font-size: 1em; }
.tw-tag-n span { display: block; font-size: 2.7em; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--tw-orange); font-variant-numeric: tabular-nums; }
.tw-tag-n small { display: block; margin-top: .1em; font-size: 1.12em; font-weight: 600; white-space: nowrap; }
@container (max-width: 640px) {
  .tw-unit + .tw-unit { width: 36.5em; }
  .tw-tag { width: 8.7em; transform: rotate(-4deg) scale(1.08); }
  .tw-tag-n span { font-size: 2.3em; }
  .tw-tag-n small { font-size: 1.05em; }
  /* the app's own short names, so the plate can be set at 12px and up */
  .tw-plate small[data-s] { position: relative; visibility: hidden; }
  .tw-plate small[data-s]::after { content: attr(data-s); position: absolute; inset: 0; visibility: visible; }
  .tw-plate small { font-size: 1.24em; }
  .tw-plate span { font-size: 1.2em; }
}

/* Scenes: step headings balanced, three lines at most */
.k-testwater .k-step .k-h2 { font-size: clamp(40px, min(3.7vw, 6.8svh), 58px); text-wrap: balance; }

/* The step's screens hand over quickly, so two busy screens never sit over each other for long */
html.k-motion .k-testwater .k-device-screen img { transition-duration: .2s; }

/* Tasks: the water change's week, under its row */
.tw-week { background: #FFF; border-radius: 22px; padding: 16px 18px 18px; box-shadow: 0 0 0 1px var(--k-line), 0 30px 60px -40px rgba(0, 0, 0, .3); }
.tw-week-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 14px; color: #8A8A8E; }
.tw-week-h b { font-weight: 600; color: var(--k-ink); }
.tw-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.tw-week-days li { display: grid; justify-items: center; gap: 6px; padding: 9px 0 10px; border-radius: 12px; background: var(--k-bg-2); transition: background-color .2s ease, color .2s ease; }
.tw-week-days span { font-size: 12px; color: #8A8A8E; }
.tw-week-days b { font: 600 18px/1 var(--tw-sf); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.tw-week-days li.is-lit { background: rgba(168, 51, 127, .14); }
.tw-week-days li.is-today { background: var(--tw-coral); }
.tw-week-days li.is-today span, .tw-week-days li.is-today b { color: #FFF; }
.tw-task-side { gap: 12px; }

/* Fertiliser: the stepper keeps a short label on phones */
@media (max-width: 899px) {
  .tw-ei-n > span:first-child { display: inline; font-size: 15px; }
  .tw-ei-n > span:first-child { font-size: 0; }
  .tw-ei-n > span:first-child::after { content: "A week"; font-size: 15px; }
  .tw-chart text { font-size: 17px; }
}

/* Close: the lockup reads as it does in the hero */
.tw-close .k-lockup > span, .tw-close .k-lockup > div { text-align: left; }
/* Legal pages: long addresses break rather than push the page sideways */
.k-child a { overflow-wrap: anywhere; }
.k-child p, .k-child li { overflow-wrap: break-word; }