/* ==========================================================================
   Noventa Studio · trade pages (/pool-service-websites/ and the rest)
   Loads after site.css and reuses its tokens, header, buttons, FAQ and call bar.
   Each page sets --acc (its trade's color) on <body>.
   ========================================================================== */
body{--acc:var(--aqua)}

/* ---------- Hero ---------- */
.th{position:relative;isolation:isolate;overflow:hidden;padding:clamp(120px,13vw,170px) var(--gutter) clamp(60px,8vw,110px)}
.th::before{content:"";position:absolute;inset:-10% -10% auto;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 46% at 78% 42%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%),
             radial-gradient(34% 40% at 14% 18%,rgba(255,106,61,.14),transparent 70%)}
.th-wrap{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,90px);align-items:center}
.th h1{margin:0;font-weight:720;font-size:clamp(42px,6.2vw,92px);line-height:.95;letter-spacing:-.045em;text-wrap:balance}
.th h1 .serif{display:inline;background:none;-webkit-text-fill-color:currentColor;color:var(--acc);font-size:1.06em;letter-spacing:-.02em}
.th-kicker,.th-made{margin:0 0 20px}
.th-made{display:none}
.named .th-made{display:block}
.named .th-kicker{display:none}
.th-lead{margin:24px 0 0;max-width:54ch;color:var(--muted);font-size:clamp(17px,1.45vw,20px)}
.th-try{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px;max-width:580px}
.th-try label{flex:1 1 250px;min-width:0;display:flex}
.th-try input{width:100%;min-height:56px;padding:0 22px;border-radius:999px;border:1px solid var(--glass-line);background:var(--card);color:var(--ink);font:inherit;font-size:17px}
.th-try input::placeholder{color:var(--faint)}
.th-try input:focus-visible,.tb input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.th-go{display:none;margin-top:30px}
.named .th-try{display:none}
.named .th-go{display:inline-flex}
.th-fine{margin:16px 0 0;color:var(--faint)}
.th-alt{margin:8px 0 0;color:var(--muted);font-size:15px}
.th-alt a,.tb-who a,.tb-fine a{color:var(--ink);text-underline-offset:3px}

/* ---------- Phone frames around real screenshots ---------- */
.tphone{margin:0;justify-self:center;width:min(320px,78vw)}
.tphone-frame{padding:9px;border-radius:46px;background:#1a171f;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.85),0 0 110px -40px var(--acc)}
.tphone img{display:block;width:100%;height:auto;border-radius:37px;background:var(--bg2)}
.tphone figcaption{margin-top:14px;text-align:center;color:var(--faint);font-size:11px}

/* ---------- The three questions ---------- */
.tq-list{max-width:1200px;margin:0 auto;display:grid;gap:clamp(80px,10vw,140px)}
.tq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,110px);align-items:center}
.tq:nth-child(even) .tphone{order:-1}
.tq-q{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.6vw,54px);line-height:1.04;letter-spacing:-.01em;color:var(--acc)}
.tq h3{margin:20px 0 0;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.tq-text > p:not(.tq-q):not(.tq-note){margin:14px 0 0;max-width:54ch;color:var(--muted)}
.tq-note{margin:18px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.tq .tphone{width:min(290px,70vw)}

/* ---------- The math ---------- */
.tm-card{max-width:1100px;margin:0 auto;display:grid;gap:22px;padding:clamp(28px,5vw,64px);border-radius:32px;background:var(--card);border:1px solid var(--line)}
.tm-card h2{margin:0;font-weight:720;font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.tm-eq{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px,4vw,48px);margin-top:8px}
.tm-eq > div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px}
.tm-big{font-weight:720;font-size:clamp(54px,7vw,104px);letter-spacing:-.05em;line-height:.9;color:var(--acc);font-variant-numeric:tabular-nums}
.tm-big.tm-dim{color:var(--ink)}
.tm-unit{font-family:var(--mono);font-size:14px;color:var(--muted)}
.tm-say{grid-column:1/-1;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.tm-gt{font-size:clamp(34px,4vw,56px);color:var(--faint)}
.tm-fine{margin:6px 0 0;max-width:68ch;color:var(--muted)}

/* ---------- Features ---------- */
.tf-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tf-grid > div{padding:26px 26px 28px;border-radius:24px;background:var(--card);border:1px solid var(--line)}
.tf-grid h3{margin:0 0 8px;font-size:19px;letter-spacing:-.015em}
.tf-grid p{margin:0;color:var(--muted);font-size:15.5px}

/* ---------- Concept links ---------- */
.tc-grid{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tc-card{display:grid;gap:8px;padding:30px;border-radius:26px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .25s,transform .4s var(--ease)}
.tc-card:hover,.tc-card:focus-visible{border-color:var(--acc);transform:translateY(-3px)}
.tc-card b{font-size:22px;letter-spacing:-.02em}
.tc-card span{color:var(--muted)}
.tc-card .tc-go{margin-top:8px;color:var(--acc)}

/* ---------- Pricing ---------- */
.tp{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:start}
.tp h2{margin:16px 0 0;font-weight:720;font-size:clamp(36px,4.8vw,68px);line-height:.98;letter-spacing:-.04em}
.tp-price{margin:24px 0 0;font-weight:720;font-size:clamp(68px,9vw,130px);line-height:.9;letter-spacing:-.05em}
.tp-price small{font-family:var(--mono);font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}
.tp-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tp-list li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid var(--line);color:var(--muted);font-size:17px}
.tp-list li::before{content:"";position:absolute;left:4px;top:23px;width:12px;height:7px;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}

/* ---------- Book ---------- */
.tb-wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
.tb-copy h2{margin:16px 0 0;font-weight:720;font-size:clamp(38px,5vw,72px);line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.tb-copy > p{margin:20px 0 0;max-width:46ch;color:var(--muted);font-size:clamp(16px,1.4vw,19px)}
.tb-copy .tb-who{font-size:15.5px}
.tb{position:relative;display:grid;gap:14px;padding:clamp(22px,3vw,34px);border-radius:30px;background:var(--card);border:1px solid var(--line)}
.tb label{display:grid;gap:7px;font-size:14px;color:var(--muted)}
.tb input{min-height:54px;padding:0 18px;border-radius:14px;border:1px solid var(--glass-line);background:var(--bg2);color:var(--ink);font:inherit;font-size:17px}
.tb .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tb .btn{justify-content:center;margin-top:4px}
.tb-err{margin:0;min-height:0;color:#ff9b7a;font-size:15px}
.tb-err:empty{display:none}
.tb-fine{margin:0;color:var(--faint);font-size:13px}
.tb-done{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:30px;border-radius:inherit;background:var(--card);text-align:center}
.tb-done[hidden]{display:none}
.tb-done b{font-size:28px;letter-spacing:-.03em}
.tb-done span{color:var(--muted)}

/* ---------- Narrow screens ---------- */
@media (max-width:1100px){.tf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .th-wrap,.tq,.tp,.tb-wrap{grid-template-columns:minmax(0,1fr)}
  .th{padding-top:104px}
  .th .tphone{margin-top:8px}
  .tq:nth-child(even) .tphone{order:0}
  .tf-grid,.tc-grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.tc-card{transition:none}.tc-card:hover{transform:none}}