/* ═══════════════════════════════════════════════════════════════════
   Wells trial kit 1.0 — the whole visual system for the six screens.

   This file is IDENTICAL in every product. Everything a product changes
   lives in the fifteen tokens at the top, which come from its own
   brand.<product>.css. Nothing below :root is ever edited per app.

   Load order:  brand.<product>.css   then   trial.css
   ═══════════════════════════════════════════════════════════════════ */

/* The fifteen. A product overrides these and nothing else.
   They sit in a cascade LAYER on purpose: an unlayered rule always beats
   a layered one, so a brand file wins no matter which order the two
   stylesheets happen to load in. Restating these at plain :root here
   would silently overwrite every brand — that bug cost an afternoon.
   Values below are Pool Manager's, so the kit still renders with no
   brand file at all. */
@layer trial-defaults {
:root{
  --t-bg:        #031a2a;   /* the page behind everything            */
  --t-deep:      #075b7d;   /* top of the atmosphere gradient        */
  --t-card:      rgba(4,32,52,.9);
  --t-field:     #04283c;
  --t-line:      rgba(140,224,248,.22);
  --t-text:      #e6f4fa;
  --t-muted:     #8fbdd0;
  --t-dim:       #6f9fb4;
  --t-accent:    #63e6ff;   /* the cool one: labels, links           */
  --t-action:    #f7d477;   /* the warm one: buttons only            */
  --t-action-2:  #e0b455;
  --t-action-ink:#2a1e05;   /* text on the action colour             */
  --t-good:      #6df0c6;
  --t-warn:      #f2ce74;
  --t-bad:       #ff9c8a;
  --t-serif:     'Fraunces', ui-serif, Georgia, serif;
  --t-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --t-radius:    13px;
}
}

/* The kit brings its own border-box, scoped to its own screens, because
   it has to behave the same whether the host app has a reset or not.
   Without this a 100%-wide input is its padding wider than its parent,
   and the card quietly grows past a 390px phone. */
.t-scene, .t-scene *, .t-strip, .t-strip *, .t-sheet, .t-sheet *{
  box-sizing:border-box;
}

/* ── the atmosphere ─────────────────────────────────────────────── */
/* One column, capped, centred. Not `place-items:center`: that makes the
   card shrink-wrap its text, and a long Vietnamese sentence then pushes
   it wider than a 390px phone. The track does the capping instead. */
.t-scene{
  position:relative; min-height:100dvh; display:grid;
  grid-template-columns:minmax(0, 400px);
  justify-content:center; align-items:center;
  padding:20px; isolation:isolate;
  background:linear-gradient(180deg, var(--t-deep), color-mix(in srgb, var(--t-deep) 50%, var(--t-bg)) 30%,
             var(--t-bg) 100%), var(--t-bg);
  color:var(--t-text); font-family:var(--t-sans);
}
/* Generated once, moved with transforms. Animating the turbulence itself
   costs nine frames a second on a mid phone; this costs none. */
.t-drift{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.t-drift i{position:absolute; inset:-35%; display:block; mix-blend-mode:screen;
  opacity:.9; will-change:transform; animation:t-drift-a 26s ease-in-out infinite alternate}
.t-drift i:nth-child(2){opacity:.5; animation:t-drift-b 37s ease-in-out infinite alternate}
.t-drift svg{width:100%; height:100%; display:block}
@keyframes t-drift-a{from{transform:translate3d(0,0,0) scale(1)}
                     to{transform:translate3d(4%,-3%,0) scale(1.14)}}
@keyframes t-drift-b{from{transform:translate3d(0,0,0) scale(1.3) rotate(4deg)}
                     to{transform:translate3d(-5%,4%,0) scale(1.45) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){
  .t-drift i{animation:none}
  .t-fill,.t-bar i{transition:none}
}

/* ── the card ───────────────────────────────────────────────────── */
.t-card{
  position:relative; min-width:0; z-index:2; width:100%; max-width:400px;
  background:var(--t-card); border:1px solid var(--t-line); border-radius:24px;
  padding:26px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(200,244,255,.18);
  backdrop-filter:blur(12px);
}
.t-brand{display:flex; align-items:center; gap:9px; font-family:var(--t-serif);
  font-size:16px; font-weight:600; margin:0 0 20px}
.t-mark{display:flex; flex-direction:column; gap:2px; width:15px}
.t-mark i{height:3px; border-radius:2px; background:var(--t-accent); display:block}
.t-mark i:nth-child(2){background:var(--t-action)}
.t-card h1{font-family:var(--t-serif); font-size:30px; font-weight:300;
  letter-spacing:-.02em; margin:0 0 8px; text-wrap:balance}
.t-sub{font-size:13.5px; line-height:1.55; color:var(--t-muted); margin:0}

/* ── fields ─────────────────────────────────────────────────────── */
.t-label{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-accent); font-weight:600; margin:16px 0 8px}
.t-field{background:var(--t-field); border:1px solid var(--t-line);
  border-radius:var(--t-radius); padding:13px 14px; font:500 15px var(--t-sans);
  color:var(--t-text); width:100%; -webkit-appearance:none}
.t-field::placeholder{color:var(--t-dim)}
.t-field:focus-visible{outline:2px solid var(--t-action); outline-offset:2px}
.t-code{font-family:var(--t-serif); font-size:26px; letter-spacing:.42em; text-align:center}
/* A field not yet reachable: visible, so the length of the form is honest,
   but plainly not its turn. */
.t-waiting{opacity:.42}
.t-waiting .t-field{pointer-events:none}

/* the address writing itself under the name */
.t-address{font-family:var(--t-serif); font-size:16px; color:var(--t-accent);
  margin:9px 0 0; word-break:break-all}
.t-address b{color:var(--t-action); font-weight:400}
.t-address em{display:block; font-style:normal; font-family:var(--t-sans);
  font-size:11.5px; color:var(--t-dim); margin-top:3px}

/* ── buttons ────────────────────────────────────────────────────── */
.t-go{background:linear-gradient(180deg, var(--t-action), var(--t-action-2));
  color:var(--t-action-ink); font:600 14px var(--t-sans); padding:13px 18px;
  border:0; border-radius:var(--t-radius); display:block; width:100%;
  text-align:center; margin-top:18px; cursor:pointer}
.t-go[disabled]{opacity:.5; cursor:default}
.t-quiet{display:block; width:100%; background:none; border:0; color:var(--t-accent);
  font:500 13px var(--t-sans); padding:14px 0 0; cursor:pointer}
.t-note{font-size:11.5px; color:var(--t-dim); line-height:1.55; margin:12px 0 0}
.t-error{font-size:12.5px; color:var(--t-bad); margin:14px 0 0; text-align:center}

/* ── the gauge: one component, three placements ─────────────────── */
/* signing up — upright, at the foot of the card */
.t-gauge{position:relative; height:76px; margin-top:18px; border-radius:12px;
  overflow:hidden; border:1px solid var(--t-line);
  background:color-mix(in srgb, var(--t-bg) 70%, transparent)}
 /* Both stops come from --t-accent. Building the water out of --t-good
    and --t-deep looks right on a dark brand and disappears entirely on a
    light one, where both of those are pale. */
.t-fill{position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--t-accent) 26%, transparent),
    color-mix(in srgb, var(--t-accent) 58%, transparent));
  border-top:2px solid var(--t-accent);
  transition:height .6s ease}
.t-fill::before{content:""; position:absolute; left:-12%; right:-12%; top:-8px;
  height:15px; border-radius:50%;
  background:color-mix(in srgb, var(--t-accent) 26%, transparent)}
.t-depth{position:absolute; left:13px; top:11px; z-index:2; font-size:11px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-text);
  text-shadow:0 1px 4px color-mix(in srgb, var(--t-bg) 85%, transparent)}
.t-of{position:absolute; right:13px; top:11px; z-index:2; font-size:11px;
  color:var(--t-text); opacity:.85; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 4px color-mix(in srgb, var(--t-bg) 85%, transparent)}   /* the water rises past it */

/* ── the ready list ─────────────────────────────────────────────── */
.t-live{display:inline-flex; align-items:center; gap:6px; margin:10px 0 4px;
  font-size:11px; font-weight:600; color:var(--t-good);
  background:color-mix(in srgb, var(--t-good) 14%, transparent);
  padding:5px 9px; border-radius:7px}
.t-list{margin-top:6px}
.t-row{display:flex; gap:11px; align-items:baseline; padding:10px 0;
  border-top:1px solid var(--t-line)}
.t-row:first-child{border-top:0}
.t-row b{font-size:14px; font-weight:600; white-space:nowrap}
.t-row span{font-size:12px; color:var(--t-muted); line-height:1.45}

/* ── screen 4: the strip, under the brand bar, every page ───────── */
/* The host app's side rail, if it has one, sits over the left of this
   strip on a wide screen. The host declares its width once as --t-rail
   and the strip steps around it; an app with no rail leaves it at 0. */
.t-strip{display:flex; align-items:center; gap:11px;
  padding:9px 16px 9px calc(16px + var(--t-rail, 0px));
  background:color-mix(in srgb, var(--t-deep) 22%, var(--t-bg));
  border-bottom:1px solid var(--t-line); font-size:12.5px; color:var(--t-text)}
.t-strip b{font-weight:600; white-space:nowrap}
.t-strip .t-bar{flex:1; min-width:44px; height:6px; border-radius:99px;
  background:color-mix(in srgb, var(--t-bg) 60%, transparent); overflow:hidden}
.t-strip .t-bar i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--t-good), var(--t-accent));
  transition:width .6s ease}
.t-strip .t-when{color:var(--t-muted); white-space:nowrap; font-size:11.5px}
.t-strip .t-keep{background:linear-gradient(180deg, var(--t-action), var(--t-action-2));
  color:var(--t-action-ink); font:600 11.5px var(--t-sans); padding:6px 11px;
  border:0; border-radius:8px; white-space:nowrap; cursor:pointer}
.t-strip.t-last{background:color-mix(in srgb, var(--t-warn) 16%, var(--t-bg))}
.t-strip.t-last .t-bar i{background:linear-gradient(90deg, var(--t-warn), var(--t-bad))}
@media (max-width:420px){
  .t-strip .t-when{display:none}
}

/* ── screen 5: the offer ────────────────────────────────────────── */
.t-scrim{position:fixed; inset:0; z-index:70; background:rgba(2,14,22,.72);
  backdrop-filter:blur(3px)}
.t-sheet{position:fixed; left:0; right:0; bottom:0; z-index:71; max-height:88dvh;
  overflow:auto; background:var(--t-bg); border-top:1px solid var(--t-line);
  border-radius:22px 22px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
@media(min-width:768px){
  .t-sheet{left:50%; right:auto; bottom:auto; top:50%; width:460px;
    transform:translate(-50%,-50%); border-radius:22px; border:1px solid var(--t-line)}
  .t-grab{display:none}
}
.t-grab{width:38px; height:4px; border-radius:2px; background:var(--t-line);
  margin:0 auto 14px}
.t-sheet h2{font-family:var(--t-serif); font-size:21px; font-weight:400;
  letter-spacing:-.02em; margin:0 0 6px; text-wrap:balance}
.t-sheet p{font-size:13.5px; line-height:1.6; color:var(--t-muted); margin:0}
.t-days{display:flex; align-items:baseline; gap:10px; margin:16px 0 4px}
.t-days b{font-family:var(--t-serif); font-size:44px; font-weight:300; line-height:1;
  color:var(--t-action)}
.t-days span{font-size:12.5px; color:var(--t-muted)}
.t-pair{display:flex; gap:9px; margin-top:16px}
.t-pair .t-go{margin-top:0; flex:1}
.t-pair .t-not{border:1px solid var(--t-line); background:transparent;
  color:var(--t-text); font:600 13px var(--t-sans); padding:13px 16px;
  border-radius:var(--t-radius); cursor:pointer; white-space:nowrap}

/* ── screen 6: locked ───────────────────────────────────────────── */
.t-dry{position:relative; height:76px; margin:18px 0; border-radius:12px;
  border:1px solid var(--t-line); overflow:hidden;
  background:color-mix(in srgb, var(--t-bg) 70%, transparent)}
.t-dry::after{content:""; position:absolute; left:0; right:0; bottom:14px;
  border-top:2px dashed color-mix(in srgb, var(--t-accent) 45%, transparent)}
.t-dry span{position:absolute; left:13px; bottom:20px; font-size:11px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--t-dim)}
.t-built{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px}
.t-built span{font-size:12px; color:var(--t-muted); background:var(--t-field);
  border:1px solid var(--t-line); border-radius:8px; padding:7px 11px}
.t-built span b{color:var(--t-text); font-weight:600}
.t-price{font-size:12.5px; color:var(--t-muted); margin:14px 0 0}
.t-powered{margin-top:22px; text-align:center; font-size:12px; color:var(--t-dim)}
.t-powered i{font-style:normal; color:var(--t-action)}
.t-powered a{color:var(--t-text); font-weight:500; text-decoration:none}