/* ============================================================
   sfi-town.css — shared stylesheet for the 55-mile town pages
   Extracted verbatim 2026-09-20 from phone-repair-olyphant.html
   (the inline <style> block, lines 82-630).

   WHY THIS FILE EXISTS
   The 20 original pages carry this CSS inline. The workspace shell
   has been down since a Windows update on 8 September, so files
   cannot be copied — every new page would have meant hand-
   transcribing 548 lines of tuned CSS, and a single dropped brace
   produces a silently broken layout. Extracting it once and linking
   it is one transcription instead of three, and any error shows up
   identically on all three pages instead of subtly on one.

   When the shell is restored, these pages can be converted back to
   inline CSS to match the rest of the site if preferred. Nothing
   here is unique to the new pages.
   ============================================================ */

:root{
  --bg:#101317;--surface-1:#171B21;--surface-2:#1E232A;--surface-3:#262C35;
  --amber:#FF8C1A;--amber-bright:#FFA23D;--amber-deep:#E5760A;
  --amber-tint:rgba(255,140,26,.10);--amber-line:rgba(255,140,26,.28);
  --light:#F7F5F1;--fg:#F7F5F1;--fg-soft:#C3C9D1;--mid:#98A0AA;--faint:#8A929C;
  --line:#2C333C;--line-strong:#3A424C;--ok:#3FB27F;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:100px;
  --sh-1:0 1px 2px rgba(0,0,0,.28);--sh-2:0 4px 16px rgba(0,0,0,.30);--sh-3:0 14px 40px rgba(0,0,0,.42);
  --dur:220ms;--dur-fast:150ms;--ease:cubic-bezier(.2,.7,.3,1);
  --cyan:#22D3EE;
}

/* ===================== LIGHT THEME ===================== */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F4F2;
  --surface-1:#FFFFFF;
  --surface-2:#FAFAF8;
  --surface-3:#EBEBE7;
  --charcoal:#FAFAF8;

  --amber:#EA580C;
  --amber-bright:#FF8C1A;
  --amber-deep:#B45309;
  --amber-tint:rgba(234,88,12,.08);
  --amber-line:rgba(234,88,12,.26);
  --cyan:#0E7490;

  --fg:#132A35;
  --fg-soft:#3F5563;
  --mid:#5B6B78;
  --faint:#626F79;

  --line:#E2E2DD;
  --line-strong:#C9C9C2;
  --ok:#15803D;

  --sh-1:0 1px 2px rgba(19,42,53,.06);
  --sh-2:0 1px 2px rgba(19,42,53,.05), 0 6px 16px rgba(19,42,53,.07);
  --sh-3:0 2px 4px rgba(19,42,53,.05), 0 18px 40px rgba(19,42,53,.10);
  --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --glow:0 0 0 1px var(--amber-line), 0 8px 22px rgba(234,88,12,.20);
}
:root[data-theme="dark"]{ color-scheme:dark; --cyan:#22D3EE; --hi:inset 0 1px 0 rgba(255,255,255,.04); }

:root[data-theme="light"] .eyebrow, :root[data-theme="light"] .pick .p{ color:var(--amber-deep) }
:root[data-theme="light"] .warmband::after{ background:linear-gradient(to top,rgba(19,42,53,.70),transparent 52%) }

/* ---- coverage strip ---- */
.routebar{position:sticky;top:0;z-index:70;margin:-22px -16px 0;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.routebar .rb{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:10px 16px;text-align:center;
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  font-size:14px;font-weight:600;line-height:20px;letter-spacing:.005em;
  color:var(--fg-soft)}
.routebar .rpin{flex:0 0 13px;color:#DC2626;display:block;margin-top:-1px}
:root[data-theme="dark"] .routebar .rpin{color:#F87171}
.routebar .rlive{flex:0 0 8px;width:8px;height:8px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px rgba(63,178,127,.22)}
@media (prefers-reduced-motion:no-preference){
  .routebar .rlive{animation:dotpulse 2.6s ease-in-out infinite}
}
.routebar b{color:var(--fg);font-weight:700}
@media (max-width:760px){ .routebar .rb{padding-right:80px;padding-left:12px} }
/* toggle: same row as the strip, right end; strip text is padded clear of it below 760px */
@media (max-width:430px){ .routebar .rb{font-size:13px;gap:7px;padding:10px 80px 10px 12px} }
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 3px rgba(63,178,127,.22)}50%{box-shadow:0 0 0 6px rgba(63,178,127,.10)}}

/* ---- booking offer card ---- */
.offercard{display:flex;align-items:center;gap:13px;max-width:566px;
  margin-top:22px;padding:13px 16px;
  background:var(--surface-1);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:var(--r-md,13px);
  box-shadow:var(--e1),var(--hi)}
.offercard .oi{flex:0 0 38px;width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;color:var(--amber-deep);
  background:var(--amber-tint);border:1px solid var(--amber-line)}
.offercard .ob{flex:1 1 auto;min-width:0}
.offercard .ol{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber-deep);margin-bottom:4px}
.offercard .ot{display:block;font-size:14px;font-weight:600;color:var(--fg);
  line-height:1.42;letter-spacing:-.005em}
.offercard .oc{flex:0 0 auto;margin-left:2px;padding-left:14px;text-align:right;
  border-left:1px solid var(--line)}
.offercard .oc .num{display:block;font-size:17.5px;font-weight:700;color:var(--fg);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.05}
.offercard .oc .cap{display:block;margin-top:3px;font-size:9.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mid)}
.offercard[data-state="closed"]{border-left-color:var(--line-strong)}
.offercard[data-state="closed"] .ol{color:var(--mid)}
.offercard[data-state="closed"] .oi{color:var(--mid);
  background:var(--surface-3);border-color:var(--line)}
.offercard .oc[hidden]{display:none}
@media (max-width:430px){
  .offercard{display:grid;grid-template-columns:32px minmax(0,1fr) auto;
    grid-template-areas:"i l c" "t t t";
    align-items:center;column-gap:10px;row-gap:8px;padding:12px 13px}
  .offercard .oi{grid-area:i;width:32px;height:32px;border-radius:9px}
  .offercard .ob{display:contents}
  .offercard .ol{grid-area:l;margin-bottom:0}
  .offercard .ot{grid-area:t;font-size:13.4px}
  .offercard .oc{grid-area:c;margin:0;padding-left:10px;
    display:flex;align-items:baseline;gap:4px}
  .offercard .oc .num{font-size:16px}
  .offercard .oc .cap{display:inline;margin-top:0}
}

/* ---- theme toggle ---- */
.themetog{--tog-w:62px;--tog-h:32px;--tog-k:24px;--tog-p:3px;
  position:relative;display:inline-flex;align-items:center;gap:0;
  width:var(--tog-w);height:var(--tog-h);flex:0 0 var(--tog-w);border-radius:100px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-strong);padding:0;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.themetog:hover{border-color:var(--amber-line)}
.themetog:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.themetog .knob{position:absolute;top:50%;left:var(--tog-p);
  width:var(--tog-k);height:var(--tog-k);margin-top:calc(var(--tog-k) * -0.5);
  border-radius:50%;background:var(--amber);box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
:root[data-theme="dark"] .themetog .knob{
  transform:translateX(calc(var(--tog-w) - 2px - var(--tog-k) - var(--tog-p) * 2))}
.themetog svg{position:absolute;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none;
  transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)}
.themetog .i-sun{left:calc(var(--tog-p) + (var(--tog-k) - 16px) * 0.5);color:#12151A;opacity:1}
.themetog .i-moon{right:calc(var(--tog-p) + (var(--tog-k) - 16px) * 0.5);color:var(--mid);opacity:1}
:root[data-theme="dark"] .themetog .i-sun{color:var(--faint)}
:root[data-theme="dark"] .themetog .i-moon{color:#12151A}
.themetog-fixed{position:fixed;top:5px;right:16px;z-index:90}
@media (max-width:760px){ .themetog-fixed{top:5px;right:10px} }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--fg);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;padding:22px 16px 60px}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:360px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 100% at 50% 0,rgba(255,140,26,.12),transparent 70%)}
h1, h2, h3, .logo, .btn{font-family:"Outfit",sans-serif}
.wrap{max-width:680px;margin:0 auto;position:relative;z-index:1}
a{color:var(--amber)}
a:focus-visible, button:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}

.logo{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:19px;
  letter-spacing:-.5px;margin-bottom:26px;min-height:44px;text-decoration:none;color:inherit}
.logo .mark{width:34px;height:34px;flex:none;display:block;line-height:0}
.logo .skyword{color:var(--cyan)}.fixed{color:var(--fg)}

.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--mid);margin-bottom:14px}
.eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}

h1{font-size:33px;font-weight:900;letter-spacing:-1.2px;line-height:1.12;margin-bottom:14px;text-align:center}
h1 .a{color:var(--amber)}
h2{font-size:24px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin:38px 0 12px}
h3{font-size:17px;font-weight:700;letter-spacing:-.3px;margin:22px 0 6px;color:var(--fg)}
p{color:var(--fg-soft);margin-bottom:14px}
.lead{color:var(--mid);font-size:16.5px;text-align:center;margin-bottom:22px}
strong, b{color:var(--fg);font-weight:600}

.card{background:linear-gradient(180deg,var(--surface-2),var(--surface-1));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--sh-2);margin:22px 0}

.trust{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 8px}
.trust span{font-size:13px;color:var(--mid);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 14px}

.btnrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0}
.btn{background:linear-gradient(145deg,var(--amber-bright),var(--amber));color:#12151A;border:none;
  border-radius:var(--r-md);font-size:16px;font-weight:700;letter-spacing:-.2px;padding:15px 22px;
  text-decoration:none;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:var(--sh-2);transition:transform var(--dur-fast) var(--ease)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong);box-shadow:none}
@media(hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}}

.prices{width:100%;border-collapse:collapse;margin:8px 0 4px}
.prices td{padding:11px 2px;border-bottom:1px solid var(--line);color:var(--fg-soft);font-size:15px}
.prices tr:last-child td{border-bottom:none}
.prices td:last-child{text-align:right;color:var(--fg);font-weight:600;white-space:nowrap}
.prices .hi td:last-child{color:var(--amber);font-size:17px;font-family:"Outfit",sans-serif;font-weight:700}

.step{display:flex;gap:14px;margin-bottom:18px}
.step .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--amber-tint);
  border:1px solid var(--amber-line);color:var(--amber);font-family:"Outfit",sans-serif;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.step p{margin-bottom:0}

.faq{border-top:1px solid var(--line);padding:16px 0}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq h3{margin:0 0 6px}
.faq p{margin-bottom:0;font-size:15px}

.note{border-left:2px solid var(--amber);padding:2px 0 2px 14px;border-radius:0;margin:18px 0;color:var(--mid);font-size:15px}

.areas{color:var(--mid);font-size:15px;text-align:center}
.foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);text-align:center;color:var(--faint);font-size:13.5px}
.foot a{color:var(--mid);text-decoration:none}

@media(max-width:520px){
  h1{font-size:27px}
  h2{font-size:21px}
  .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*, *::before, *::after{animation:none!important;transition:none!important}}

/* warm bands */
.warmband{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface-1);margin:26px 0 6px;aspect-ratio:16/7}
.warmband img{width:100%;height:100%;object-fit:cover;display:block}
.warmband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,19,23,.72),rgba(16,19,23,.05) 58%)}
.warmband .wb{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 20px;
  color:#fff;font-size:14.5px;font-weight:500;line-height:1.45;
  display:flex;gap:10px;align-items:flex-start}
.warmband .wb .d{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 7px;margin-top:7px}
.whoband{display:flex;gap:20px;align-items:center;background:var(--surface-1);
  border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:30px 0 8px}
.whoband .av{width:96px;height:96px;border-radius:50%;overflow:hidden;flex:0 0 96px;
  border:2px solid var(--amber-line)}
.whoband .av img{width:100%;height:100%;object-fit:cover;display:block}
.whoband .wt{min-width:0}
.whoband .wt h3{margin:0 0 7px;font-size:18px;font-weight:800;letter-spacing:-.4px}
.whoband .wt p{margin:0;color:var(--fg-soft);font-size:14.6px;line-height:1.6}
.whoband .wt .pts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.whoband .wt .pts span{font-size:12.5px;color:var(--fg-soft);background:var(--surface-2);
  border:1px solid var(--line);border-radius:100px;padding:6px 12px;display:inline-flex;align-items:center;gap:7px}
.whoband .wt .pts i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block}
@media (max-width:620px){
  .whoband{flex-direction:column;text-align:center;gap:14px}
  .whoband .wt .pts{justify-content:center}
  .warmband{aspect-ratio:4/3}
}

/* ==================== DEPTH PASS ==================== */
:root[data-theme="light"]{
  --cyan-lite:#0F87A2; --cyan-deep:#155E75;
  --e1:0 1px 2px rgba(19,42,53,.05);
  --e2:0 1px 2px rgba(19,42,53,.05), 0 4px 10px rgba(19,42,53,.06);
  --e3:0 2px 4px rgba(19,42,53,.05), 0 10px 24px rgba(19,42,53,.08);
  --e4:0 4px 8px rgba(19,42,53,.06), 0 22px 48px rgba(19,42,53,.11);
  --ring:inset 0 0 0 1px rgba(19,42,53,.045);
  --hi:inset 0 1px 0 rgba(255,255,255,.92);
  --edge:rgba(19,42,53,.07);
}
:root[data-theme="dark"]{
  --cyan-lite:#67E8F9; --cyan-deep:#0E7490;
  --e1:0 1px 2px rgba(0,0,0,.34);
  --e2:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.34);
  --e3:0 2px 5px rgba(0,0,0,.32), 0 12px 28px rgba(0,0,0,.42);
  --e4:0 5px 10px rgba(0,0,0,.34), 0 26px 56px rgba(0,0,0,.52);
  --ring:inset 0 0 0 1px rgba(255,255,255,.035);
  --hi:inset 0 1px 0 rgba(255,255,255,.055);
  --edge:rgba(255,255,255,.06);
}

.skyword{color:var(--cyan);letter-spacing:-.2px}
:root[data-theme="light"] .skyword{
  color:#0E7490;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.55),
    0 1px 0 #0C4E63,
    0 2px 1px rgba(11,61,78,.34),
    0 4px 10px rgba(11,61,78,.20)}
:root[data-theme="dark"] .skyword{
  color:#22D3EE;
  text-shadow:
    0 0 14px rgba(34,211,238,.45),
    0 0 3px rgba(34,211,238,.6),
    0 1px 0 rgba(0,0,0,.55)}

.step, .price, .whoband, .tool, .warmband{
  box-shadow:var(--e2),var(--ring),var(--hi)}
.step, .price{
  transition:box-shadow 220ms cubic-bezier(.2,.7,.3,1),
             transform 220ms cubic-bezier(.2,.7,.3,1),
             border-color 220ms cubic-bezier(.2,.7,.3,1)}
@media(hover:hover) and (pointer:fine){
  .step:hover, .price:hover{
    box-shadow:var(--e4),var(--ring),var(--hi);transform:translateY(-3px)}
}
.step:active, .price:active{
  transform:translateY(-1px);box-shadow:var(--e2),var(--ring)}

.warmband{box-shadow:var(--e4),var(--ring)}

.btn{box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover{box-shadow:0 8px 22px rgba(234,88,12,.28),var(--e2),inset 0 1px 0 rgba(255,255,255,.3)}

.pick{box-shadow:var(--e1),var(--ring),var(--hi)}

section{position:relative}

@media (prefers-reduced-motion:reduce){
  .step, .price{transition:none}
  .step:hover, .price:hover{transform:none}
}

.warmband img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.004);transform-origin:center}

.brand .mark, .logo .mark{cursor:pointer;border-radius:11px;
  transition:transform 160ms cubic-bezier(.2,.7,.3,1),box-shadow 160ms cubic-bezier(.2,.7,.3,1)}
.brand .mark:hover, .logo .mark:hover{transform:translateY(-1px) scale(1.04);
  box-shadow:0 6px 16px rgba(124,58,237,.30)}

.pick{min-width:0}

.brand, .logo{white-space:nowrap;flex:0 0 auto}
.brand span, .logo span{white-space:nowrap}
@media (max-width:430px){
  .themetog{--tog-w:52px}
}
html, body{max-width:100%}

/* ---- one-time light-mode nudge ---- */
#themeHint{position:fixed;top:0;left:0;z-index:96;display:none;align-items:center;gap:7px;
  padding:7px 13px 7px 11px;border-radius:100px;
  background:var(--surface-1);border:1px solid var(--line-strong);
  box-shadow:var(--sh-2),var(--hi);font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  font-size:12.5px;font-weight:600;color:var(--fg);cursor:pointer;white-space:nowrap;
  opacity:0;transform:translateY(-4px) scale(.97);transform-origin:center top;
  transition:opacity 260ms var(--ease),transform 260ms var(--ease)}
#themeHint.on{display:inline-flex;opacity:1;transform:translateY(0) scale(1)}
#themeHint::before{content:"";position:absolute;top:-6px;left:var(--hintx,20px);
  transform:rotate(45deg);width:12px;height:12px;background:var(--surface-1);
  border-left:1px solid var(--line-strong);border-top:1px solid var(--line-strong)}
#themeHint.no-tail::before{display:none}
#themeHint .s{flex:0 0 15px;color:var(--amber);display:block}
@media (prefers-reduced-motion:reduce){ #themeHint{transition:none} }

/* ---- Worth fixing? tool links (nav link + strip). Reuses the site tokens; no new colours. ---- */
.worthlink{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface-1);color:var(--fg-soft);font-family:"Outfit",sans-serif;
  font-weight:600;font-size:13.5px;letter-spacing:-.1px;line-height:1.2;text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.worthlink svg{flex:none;color:var(--cyan)}
.worthlink:hover{color:var(--fg);border-color:var(--amber-line);background:var(--surface-2)}
.sitenav{display:flex;justify-content:center;margin:-12px 0 22px}
.toolstrip{display:flex;align-items:center;gap:13px;margin:4px 0 22px;padding:12px 14px;
  background:var(--surface-1);border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:var(--r-md,13px);box-shadow:var(--e1),var(--hi)}
.toolstrip .ti{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:var(--cyan);background:var(--surface-2);border:1px solid var(--line)}
.toolstrip .tb{flex:1 1 auto;min-width:0}
.toolstrip .tl{display:block;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);margin-bottom:3px}
.toolstrip .tt{display:block;font-size:14px;font-weight:500;color:var(--fg);line-height:1.42;letter-spacing:-.005em}
.toolstrip .tgo{flex:0 0 auto;font-family:"Outfit",sans-serif;font-size:13.5px;font-weight:700;color:var(--fg);text-decoration:none;
  white-space:nowrap;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:transparent}
.toolstrip .tgo:hover{border-color:var(--amber-line);background:var(--surface-2)}
.toolstrip .tgo small{font-weight:500;color:var(--mid);font-size:11.5px}
.toolstrip.sm{padding:9px 12px;gap:10px;margin-bottom:18px}
.toolstrip.sm .ti{flex-basis:28px;width:28px;height:28px;border-radius:9px}
.toolstrip.sm .tt{font-size:13px;line-height:1.38}
@media(max-width:520px){
  .toolstrip{align-items:flex-start}
  .toolstrip{flex-wrap:wrap}
  .toolstrip .tb{flex:1 1 calc(100% - 52px)}
  .toolstrip .tgo{margin-left:49px;padding:7px 12px}
  .toolstrip.sm .tgo{margin-left:38px}
}
.repairtime{text-align:center;color:var(--mid);font-size:15px;margin:-8px 0 16px}


/* ============ ASK SKY (added to the shared sheet 29 Sep, QA L-07) ============
   Same panel and launcher pill the older town pages carry inline; copied verbatim from phone-repair-taylor.html. */
/* Assistant surface — Library row 18 (AI / Chatbot Platform), whose
   accent is #0891B2, the cyan already in this palette. Violet is
   scoped to Ask Sky ONLY: it marks "this is the assistant", it is
   not a third brand hue competing with amber and cyan. */
:root[data-theme="light"]{ --violet:#7C3AED; --violet-tint:rgba(124,58,237,.07); --violet-line:rgba(124,58,237,.22) }
:root[data-theme="dark"]{ --violet:#A78BFA; --violet-tint:rgba(167,139,250,.10); --violet-line:rgba(167,139,250,.26) }
/* ============ ASK SKY — conversation panel ============
   Additive only. The dock, the flight path and every mood are
   untouched: tapping Sky still hops and sparkles exactly as before,
   it now also opens this. Fixed position by design — anchoring the
   panel to the dock would need a per-frame layout read, which is
   the exact pattern that blanked the page on mobile once already. */
#askSky{position:fixed;right:20px;bottom:20px;z-index:130;width:360px;
  max-width:calc(100vw - 28px);background:var(--surface-1);
  border:1px solid var(--line-strong);border-radius:20px;
  box-shadow:0 22px 60px rgba(0,0,0,.55);overflow:hidden;
  display:none;flex-direction:column;max-height:min(600px,calc(100vh - 40px))}
#askSky.open{display:flex;animation:askRise 300ms cubic-bezier(.2,.7,.3,1)}
@keyframes askRise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#askSky .ask-head{display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
#askSky .ask-head .nm{font-family:"Outfit",sans-serif;font-weight:700;font-size:15px;line-height:1.2}
#askSky .ask-head .st{font-size:11.5px;color:var(--mid);margin-top:2px}
#askSky .ask-x{margin-left:auto;background:none;border:none;color:var(--mid);
  cursor:pointer;min-width:40px;min-height:40px;display:grid;place-items:center;border-radius:8px}
#askSky .ask-x:hover{color:var(--fg);background:var(--surface-3)}
#askSky .ask-x:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
#askSky .ask-body{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:11px}
#askSky .msg{max-width:88%;font-size:14.4px;line-height:1.55;padding:10px 13px;border-radius:14px;
  animation:askPop 250ms cubic-bezier(.2,.7,.3,1)}
@keyframes askPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#askSky .msg.bot{background:var(--surface-3);border:1px solid var(--line);
  align-self:flex-start;border-bottom-left-radius:5px;color:var(--fg)}
#askSky .msg.me{background:var(--amber);color:#12161C;align-self:flex-end;
  font-weight:600;border-bottom-right-radius:5px}
#askSky .typing{display:flex;gap:4px;padding:13px}
#askSky .typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);
  animation:askBlink 1.3s infinite}
#askSky .typing i:nth-child(2){animation-delay:.18s}
#askSky .typing i:nth-child(3){animation-delay:.36s}
@keyframes askBlink{0%, 60%, 100%{opacity:.3}30%{opacity:1}}
#askSky .ask-opts{display:flex;flex-direction:column;gap:7px;padding:0 15px 15px}
#askSky .opt{text-align:left;background:var(--surface-2);border:1px solid var(--line-strong);
  color:var(--fg);border-radius:12px;padding:11px 14px;font-size:14.2px;
  font-family:inherit;font-weight:500;cursor:pointer;min-height:46px;
  display:flex;align-items:center;gap:9px;transition:border-color 150ms,background 150ms}
#askSky .opt:hover{border-color:var(--amber-line);background:var(--amber-tint)}
#askSky .opt:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
#askSky .opt.go{background:var(--amber);color:#12161C;border-color:var(--amber);
  font-weight:700;font-family:"Outfit",sans-serif;justify-content:center}
#askSky .ask-foot{padding:9px 15px 12px;border-top:1px solid var(--line);
  font-size:11px;color:var(--faint);text-align:center;line-height:1.5}
@media (max-width:520px){
  #askSky{right:8px;left:8px;bottom:8px;width:auto;max-height:calc(100vh - 76px)}
}
@media (prefers-reduced-motion:reduce){
  #askSky.open{animation:none}
  #askSky .msg{animation:none}
  #askSky .typing i{animation:none}
}

#askSky{border-color:var(--violet-line)}
#askSky .ask-head{position:relative;overflow:hidden;border-bottom-color:transparent;
  background:linear-gradient(135deg,#7C3AED,#6D28D9)}
#askSky .ask-head::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:askSheen 3.6s ease-in-out infinite}
@keyframes askSheen{0%{left:-70%}55%{left:130%}100%{left:130%}}
#askSky .ask-head .nm{color:#fff;position:relative;z-index:1}
#askSky .ask-head .st{color:rgba(255,255,255,.84);position:relative;z-index:1}
#askSky .ask-head .st .d{background:#C4B5FD}
#askSky .ask-x{color:rgba(255,255,255,.85);position:relative;z-index:1}
#askSky .ask-x:hover{color:#fff;background:rgba(255,255,255,.16)}
#askSky .msg.bot{border-color:var(--violet-line)}
#askSky .opt.go{background:linear-gradient(135deg,#7C3AED,#5B21B6);color:#fff;
  border-color:#5B21B6;box-shadow:0 6px 20px rgba(124,58,237,.34)}
#askSky .opt.go:hover{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
@media (prefers-reduced-motion:reduce){ #askSky .ask-head::after{animation:none;opacity:0} }

/* Ask Sky launcher on inner pages — the flying dock is homepage-only,
   so here the greeting pill sits beside the logo and opens the chat. */
.skyask{display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden;
  background:var(--surface-1);border:1px solid var(--line-strong);
  border-radius:100px;padding:8px 15px 8px 13px;cursor:pointer;vertical-align:middle;
  margin-left:12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--fg);
  box-shadow:var(--e1),var(--ring),var(--hi);
  transition:transform 150ms cubic-bezier(.2,.7,.3,1),border-color 150ms cubic-bezier(.2,.7,.3,1)}
.skyask::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  pointer-events:none;border-radius:100px;
  background:linear-gradient(100deg,transparent,rgba(124,58,237,.28),transparent);
  animation:askSheen 3.2s ease-in-out infinite}
.skyask:hover{transform:translateY(-1px);border-color:var(--violet-line)}
.skyask:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.skyask.inviting{border-color:var(--violet-line);
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(14,116,144,.05))}
.skyask.inviting::after{background:linear-gradient(100deg,transparent,rgba(124,58,237,.42),transparent);
  animation-duration:2.4s}
.skyask .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);flex:0 0 7px;position:relative;z-index:1}
.skyask .txt{position:relative;z-index:1}
.skyask.swap .txt{animation:qSwap 420ms cubic-bezier(.2,.7,.3,1)}
@keyframes qSwap{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@media (max-width:620px){ .skyask{margin:10px 0 12px;display:flex;width:fit-content} }
@media (prefers-reduced-motion:reduce){
  .skyask::after{animation:none;opacity:0} .skyask.swap .txt{animation:none}
}

/* the rotating label may never spill out of the pill (QA L-24) */
.skyask{max-width:100%}
.skyask .txt{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){ .skyask .txt{white-space:normal} }

/* QA L-21: small orange text in the light theme uses the deeper amber (4.5:1 on the light page); dark-theme faint grey lightened (4.5:1 on the dark surfaces) */
:root[data-theme="light"] :where(p,li,td,.faq,.note,.areas) a:not([class]){color:var(--amber-deep)}
:root[data-theme="light"] .prices .hi td:last-child{color:var(--amber-deep)}