:root{
  --bg0:#070A12; --bg1:#0B1022;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12);
  --txt:#EAF0FF; --mut:#A8B3D6; --mut2:#7E8AB4;
  --a:#7C5CFF; --b:#2FE8C3; --c:#FFCC66; --d:#FF5CC8;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --shadow2:0 14px 40px rgba(0,0,0,.45);
  --r16:16px; --r24:24px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt); font-family:var(--sans);
  background:
    radial-gradient(1200px 800px at 15% 5%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(47,232,195,.14), transparent 52%),
    radial-gradient(900px 650px at 50% 120%, rgba(255,92,200,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
.container{max-width:1140px; margin:0 auto; padding:22px 16px 80px}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  background: linear-gradient(180deg, rgba(7,10,18,.88), rgba(7,10,18,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{
  width:36px; height:36px; border-radius:12px;
  background:
    radial-gradient(16px 16px at 35% 30%, rgba(255,255,255,.55), transparent 60%),
    conic-gradient(from 210deg, var(--a), var(--b), var(--c), var(--d), var(--a));
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.brand .big{margin:0; font-size:13px; letter-spacing:.35em; text-transform:uppercase}
.sub{color:var(--mut); font-size:12px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:12px;
}
.pill:hover{background:rgba(255,255,255,.07)}
.dot{width:8px; height:8px; border-radius:50%;
  background:linear-gradient(180deg,var(--b),var(--a));
  box-shadow:0 0 0 3px rgba(47,232,195,.14);
}
.hero{
  margin:18px 0 18px;
  padding:22px; border-radius:var(--r24);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(750px 380px at 100% 15%, rgba(47,232,195,.12), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
}
.hero h1,.hero h2{margin:0 0 10px; font-size:34px; line-height:1.08; letter-spacing:-.02em}
.hero p{margin:0; color:var(--mut); font-size:15px; line-height:1.65; max-width:78ch}
.grid{display:grid; gap:14px; grid-template-columns:repeat(12, 1fr)}
.card{
  grid-column:span 12;
  padding:16px; border-radius:var(--r16);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.35)
}
.card-inner{padding:4px}
.kicker{color:var(--mut); font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-size:12px}
.list{display:flex; flex-direction:column; gap:10px; padding:0; margin:10px 0 0; list-style:none}
.item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.item:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.item .t{font-size:14px; font-weight:900}
.item .m{font-size:12px; color:var(--mut2); font-family:var(--mono)}
.kbd{
  font-family:var(--mono);
  font-size:12px; padding:3px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color:var(--mut);
}
.footer{margin-top:26px; padding-top:18px; color:var(--mut2); font-size:12px; border-top:1px solid rgba(255,255,255,.10)}
/* Inputs */
.formgrid{display:grid; gap:10px; grid-template-columns:repeat(12,1fr); margin-top:10px}
.f{grid-column:span 6}
@media (max-width:900px){ .hero h1,.hero h2{font-size:30px} .f{grid-column:span 12} }
.f span{display:block; margin:0 0 6px; font-size:12px; color:var(--mut)}
.f input, .f select{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:var(--txt);
  outline:none;
}
.f input:focus, .f select:focus{border-color:rgba(124,92,255,.55); box-shadow:0 0 0 3px rgba(124,92,255,.16)}
/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:12px 14px; border-radius:14px;
  color:#0B1022; font-weight:900;
  background: linear-gradient(135deg, var(--b), var(--a));
  box-shadow: 0 12px 28px rgba(47,232,195,.12);
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{opacity:.95}
.btn.primary{ }
.btn.mini{ padding:10px 12px; font-weight:800; font-size:13px }
.outbox{
  margin-top:12px; padding:12px; border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color:var(--mut);
  font-size:12px; line-height:1.55;
}
.frame{
  /* Phase 2 / P2-01: no fixed height — calculator iframe grows to fit content
     via postMessage('um-frame-height') from the iframe to its parent page.
     min-height is just a loading placeholder before JS resizes. Cross-origin
     publisher embeds that don't have our listener will ignore the messages
     and rely on whatever height the publisher sets (data-um-h or default). */
  width:100%; min-height:200px; border:1px solid rgba(255,255,255,.12);
  border-radius:18px; background:rgba(0,0,0,.22); display:block
}
.widget{ padding:16px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); box-shadow: 0 10px 28px rgba(0,0,0,.35) }

/* World-class conversion bars */
.trustbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:10px 12px;margin:12px 0 0;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);backdrop-filter:blur(8px);border-radius:14px}
.trustitem{font-size:12px;color:var(--mut);white-space:nowrap}
.urgencybar{margin:10px 0 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));font-size:12px;color:var(--mut)}
.ctaguard{width:100%;font-size:11px;color:var(--mut);margin-top:6px}
.disclosure{width:100%;font-size:11px;color:var(--mut);margin-top:6px;max-width:720px}
.btn.loading{opacity:.85;pointer-events:none;filter:saturate(.9)}


/* Layer 4 polish additions */

/* Accessible focus */
:focus{ outline: none; }
:focus-visible{ outline: 2px solid rgba(124,92,255,.9); outline-offset: 3px; border-radius: 12px; }

/* Form field states */
.f input.is-empty, .f select.is-empty{ border-color: rgba(255,92,200,.65) !important; box-shadow: 0 0 0 3px rgba(255,92,200,.18); }
.f .hint{ font-size: 12px; color: var(--mut2); margin-top: 6px; }
.f .err{ font-size: 12px; color: #ff9bd8; margin-top: 6px; display:none; }
.f[data-error="1"] .err{ display:block; }

/* Result animations */
.outbox{ position: relative; overflow: hidden; }
.outbox.flash::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(800px 240px at 50% 0%, rgba(47,232,195,.16), transparent 55%);
  animation: umFlash 900ms ease-out 1;
  pointer-events:none;
}
@keyframes umFlash{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-10px)} }

/* Trust block */
.trustbar{ display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 10px; }
.trustitem{ padding: 8px 10px; border:1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 999px; font-size: 12px; color: var(--mut); }

/* Footer small print */
.mini{ margin-top: 14px; color: var(--mut2); font-size: 12px; line-height: 1.5; }

/* Print */
@media print{
  body{ background:#fff; color:#000; }
  .topbar, .trustbar, .urgencybar, #cta, .ctaguard{ display:none !important; }
  .card, .outbox{ box-shadow:none !important; border:1px solid #ddd !important; background:#fff !important; }
}

/* I3 next-tool routing (v1) — below CTA, above footer */
.wgt-next{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wgt-next-label{
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut2);
}
.wgt-next-link{
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--mut);
  text-decoration: none;
}
.wgt-next-link:hover{
  color: var(--fg);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   P2-01b — Owned-page consumer light tone (presentation layer only)

   These rules apply ONLY to owned pages (body without .widget class). The
   iframe surface at /widgets/{tool}/iframe.html — where body has
   class="widget" — is not affected by anything in this block.

   Tokens (locked):
     page bg    : #f7f8fa
     card bg    : #ffffff
     card border: 1px solid #e5e7eb
     primary txt: #111827
     secondary  : #6b7280
     input bg   : #ffffff
     input border: #d1d5db (slightly darker for affordance)

   Untouched: .btn gradient (the only "visual energy" element on owned pages).
   ─────────────────────────────────────────────────────────────────────── */

body:not(.widget){
  /* Replace the radial-gradient/dark-blue page background with a flat neutral. */
  background: #f7f8fa;
  color: #111827;
}

body:not(.widget) a{ color: #111827; }
body:not(.widget) a:hover{ opacity: 1; color: #4f46e5; }

/* Sticky topbar: light, no blur, dark text. */
body:not(.widget) .topbar{
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: none;
}
body:not(.widget) .brandname{ color: #111827; }
body:not(.widget) .sub{ color: #6b7280; }

/* Nav pills: white surface, dark text, subtle border. */
body:not(.widget) .pill{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}
body:not(.widget) .pill:hover{
  background: #f3f4f6;
}

/* Hero: flat white card, no gradient, no heavy shadow. */
body:not(.widget) .hero{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}
body:not(.widget) .hero h1,
body:not(.widget) .hero h2{ color: #111827; }
body:not(.widget) .hero p{ color: #6b7280; }

/* Primary card (the .grid > .card wrapper). */
body:not(.widget) .card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

/* Kickers / labels. */
body:not(.widget) .kicker{ color: #6b7280; }

/* Catalog rows. */
body:not(.widget) .item{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
}
body:not(.widget) .item:hover{
  background: #f9fafb;
  border-color: #d1d5db;
}
body:not(.widget) .item .t{ color: #111827; }
body:not(.widget) .item .m{ color: #6b7280; font-family: var(--sans); }

/* Footer. */
body:not(.widget) .footer{
  color: #6b7280;
  border-top: 1px solid #e5e7eb;
}

/* Form inputs: white surface, gray border, dark text. */
body:not(.widget) .f span{ color: #6b7280; }
body:not(.widget) .f input,
body:not(.widget) .f select{
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
}
body:not(.widget) .f input:focus,
body:not(.widget) .f select:focus{
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,.18);
}
body:not(.widget) .f input.is-empty,
body:not(.widget) .f select.is-empty{
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
body:not(.widget) .f .err{ color: #dc2626; }
body:not(.widget) .f .hint{ color: #6b7280; }

/* Result outbox: white card, soft dashed border. */
body:not(.widget) .outbox{
  background: #ffffff;
  border: 1px dashed #d1d5db;
  color: #6b7280;
}
body:not(.widget) .outbox .kicker{ color: #6b7280; }
body:not(.widget) .outbox .note{ color: #6b7280; }

/* Trustbar: light. No glass blur. */
body:not(.widget) .trustbar{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  backdrop-filter: none;
}
body:not(.widget) .trustitem{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
}

/* Disclosure / mini fine print. */
body:not(.widget) .disclosure,
body:not(.widget) .mini,
body:not(.widget) .ctaguard{
  color: #6b7280;
}

/* Result flash gradient — softer on light bg. */
body:not(.widget) .outbox.flash::after{
  background: radial-gradient(800px 240px at 50% 0%, rgba(79,70,229,.10), transparent 55%);
}

/* I3 next-tool routing — match light tone. */
body:not(.widget) .wgt-next{
  border-top: 1px solid #e5e7eb;
}
body:not(.widget) .wgt-next-label,
body:not(.widget) .wgt-next-link{
  color: #6b7280;
  font-family: var(--sans);
}
body:not(.widget) .wgt-next-link:hover{
  color: #111827;
}

/* Focus ring — match indigo accent on light surface. */
body:not(.widget) :focus-visible{
  outline: 2px solid #4f46e5;
}

/* ─────────────────────────────────────────────────────────────────────────
   P2-02 — Default cost range above inputs (owned pages only)

   Server-rendered by nativeCalc() from estimateRangeForCity(). Sits between
   the trustbar and the inputs kicker so users see a real anchor before they
   interact. Visual weight is on the value (the data); label and note are
   muted framing. No icons, no CTAs, no marketing copy.
   ─────────────────────────────────────────────────────────────────────── */
body:not(.widget) .default-range{
  margin: 14px 0 0;
  padding: 16px 18px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}
body:not(.widget) .default-range-label{
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
  font-weight: 600;
}
body:not(.widget) .default-range-value{
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -.01em;
  line-height: 1.15;
}
body:not(.widget) .default-range-note{
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.5;
}