/* ============================================================
   trs-box.css  ·  FULL Design-System card port, layered on v28
   Ports the TRS Design System "Cards — reviews-page concept +
   stat four-corner brackets · six site colors" VERBATIM, mapped
   onto live markup (.card .icon / .tag / .eyebrow / h3 / p).
   Header/nav untouched. Loads AFTER v28 so it wins.
   ============================================================ */

/* six locked accent tokens (live .card.<color> AND DS .card.c-<color>) */
.card.orange,.card.c-orange{--ca:#e06a16;--cb:rgba(224,106,22,0.14);--bar:rgba(255,150,60,.70)}
.card.cyan,.card.c-cyan{--ca:#65d9ff;--cb:rgba(101,217,255,0.125);--bar:rgba(101,217,255,.65)}
.card.gold,.card.c-gold{--ca:#f5b33c;--cb:rgba(245,179,60,0.14);--bar:rgba(245,179,60,.55)}
.card.green,.card.c-green{--ca:#2ecc7a;--cb:rgba(37,160,106,0.14);--bar:rgba(60,200,130,.65)}
.card.purple,.card.c-purple{--ca:#8a6fc4;--cb:rgba(138,111,196,0.16);--bar:rgba(138,111,196,.65)}
.card.red,.card.c-red{--ca:#ff5a5f;--cb:rgba(201,39,47,0.14);--bar:rgba(232,72,80,.65)}
.card.maroon{--ca:#b83a4a;--cb:rgba(184,58,74,0.16);--bar:rgba(184,58,74,.62)}
.card{--ca:#65d9ff;--cb:rgba(101,217,255,0.125);--bar:rgba(101,217,255,.65)}

/* the box (DS .card) */
.card{position:relative!important;padding:22px 20px!important;border:1px solid var(--bar)!important;
  border-radius:0!important;background:#080d18!important;overflow:visible!important;
  box-shadow:0 8px 32px rgba(0,0,0,.38)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.card:hover{transform:translateY(-5px)!important;box-shadow:0 14px 38px rgba(0,0,0,.5)!important;
  border-color:color-mix(in srgb,var(--ca) 50%,var(--cb))!important}

/* top accent bar (DS .card .topbar -> live cards have no .topbar child, so use ::before) */
.card::before{content:""!important;display:block!important;position:absolute!important;
  top:0!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;height:2px!important;
  background:linear-gradient(90deg,transparent,var(--bar),transparent)!important;
  border:0!important;box-shadow:none!important;filter:none!important;opacity:1!important;z-index:5!important}

/* glowing four-corner brackets (DS .card::after, verbatim sizes) */
.card::after{content:""!important;display:block!important;position:absolute!important;inset:9px!important;
  width:auto!important;height:auto!important;pointer-events:none;z-index:4!important;border:0!important;
  background:linear-gradient(var(--ca),var(--ca)) top left,linear-gradient(var(--ca),var(--ca)) top left,
    linear-gradient(var(--ca),var(--ca)) top right,linear-gradient(var(--ca),var(--ca)) top right,
    linear-gradient(var(--ca),var(--ca)) bottom left,linear-gradient(var(--ca),var(--ca)) bottom left,
    linear-gradient(var(--ca),var(--ca)) bottom right,linear-gradient(var(--ca),var(--ca)) bottom right!important;
  background-repeat:no-repeat!important;
  background-size:13px 2px,2px 13px,13px 2px,2px 13px,13px 2px,2px 13px,13px 2px,2px 13px!important;
  filter:drop-shadow(0 0 3px var(--ca))!important;opacity:.8!important;
  transition:inset .18s,background-size .18s,filter .18s,opacity .18s!important}
.card:hover::after{inset:6px!important;
  background-size:17px 2px,2px 17px,17px 2px,2px 17px,17px 2px,2px 17px,17px 2px,2px 17px!important;
  filter:drop-shadow(0 0 5px var(--ca)) brightness(1.35)!important;opacity:1!important}

/* content above the bracket layer */
.card>*{position:relative;z-index:6}

/* icon chip (DS .card .chip -> live .card .icon) */
.card .icon{width:44px!important;height:44px!important;border-radius:12px!important;display:grid!important;
  place-items:center!important;color:var(--ca)!important;
  background:color-mix(in srgb,var(--ca) 16%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--ca) 30%,transparent)!important;margin-bottom:13px!important}
.card .icon .icon-svg,.card .icon svg{width:23px!important;height:23px!important}

/* eyebrow (DS diamond + trailing line), scoped to cards */
.card .eyebrow{--accent:var(--ca);font-family:var(--fd)!important;font-weight:700!important;
  text-transform:uppercase!important;letter-spacing:.18em!important;font-size:.7rem!important;
  color:var(--ca)!important;display:inline-flex!important;align-items:center!important;gap:.6em!important;
  margin-bottom:.4rem!important}
.card .eyebrow::before{content:""!important;width:7px;height:7px;flex:none;background:currentColor;
  transform:rotate(45deg);box-shadow:0 0 7px currentColor}
.card .eyebrow::after{content:""!important;width:18px;height:1px;
  background:linear-gradient(90deg,currentColor,transparent);opacity:.6}

/* heading + body (DS spec) */
.card h3{font-family:var(--fd)!important;font-weight:900!important;text-transform:uppercase!important;
  letter-spacing:.012em!important;font-size:1.4rem!important;color:var(--text)!important;margin:0 0 .5rem!important}
.card p{font-size:.93rem!important;line-height:1.6!important;color:#c3cee0!important;margin:0 0 1rem!important}

/* CTA / tag label in accent (DS .card .cta look) */
.card .cta,.card .tag{display:inline-flex!important;align-items:center!important;gap:.4em!important;
  font-family:var(--fd)!important;font-weight:700!important;text-transform:uppercase!important;
  letter-spacing:.05em!important;font-size:.8rem!important;color:var(--ca)!important;text-decoration:none!important}
.card .cta .ico{width:1em;height:1em}

/* ===== uniformity: same box frame on review + city families (scaled) ===== */
.field-report{--ca:var(--fr-accent,#65d9ff);--cb:color-mix(in srgb,var(--fr-accent,#65d9ff) 12.5%,transparent);--bar:color-mix(in srgb,var(--fr-accent,#65d9ff) 65%,transparent)}
.city-tile{--ca:#e06a16;--cb:rgba(224,106,22,0.14);--bar:rgba(255,150,60,.70)}
.field-report,.city-tile{position:relative!important;border-radius:0!important;overflow:visible!important;
  background:#080d18!important;border:1px solid var(--bar)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.38)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.field-report:hover,.city-tile:hover{transform:translateY(-5px)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.5)!important;border-color:color-mix(in srgb,var(--ca) 50%,var(--cb))!important}
/* top accent bar */
.field-report::before,.city-tile::before{content:""!important;display:block!important;position:absolute!important;
  top:0!important;left:0!important;right:0!important;bottom:auto!important;width:auto!important;height:2px!important;
  background:linear-gradient(90deg,transparent,var(--bar),transparent)!important;
  border:0!important;box-shadow:none!important;filter:none!important;opacity:1!important;z-index:5!important}
/* four-corner brackets (scaled to 12px for these tiles) */
.field-report::after,.city-tile::after{content:""!important;display:block!important;position:absolute!important;
  inset:8px!important;width:auto!important;height:auto!important;pointer-events:none;z-index:4!important;border:0!important;
  background:linear-gradient(var(--ca),var(--ca)) top left,linear-gradient(var(--ca),var(--ca)) top left,
    linear-gradient(var(--ca),var(--ca)) top right,linear-gradient(var(--ca),var(--ca)) top right,
    linear-gradient(var(--ca),var(--ca)) bottom left,linear-gradient(var(--ca),var(--ca)) bottom left,
    linear-gradient(var(--ca),var(--ca)) bottom right,linear-gradient(var(--ca),var(--ca)) bottom right!important;
  background-repeat:no-repeat!important;
  background-size:12px 2px,2px 12px,12px 2px,2px 12px,12px 2px,2px 12px,12px 2px,2px 12px!important;
  filter:drop-shadow(0 0 3px var(--ca))!important;opacity:.8!important;
  transition:inset .18s,background-size .18s,filter .18s,opacity .18s!important}
.field-report:hover::after,.city-tile:hover::after{inset:6px!important;
  background-size:15px 2px,2px 15px,15px 2px,2px 15px,15px 2px,2px 15px,15px 2px,2px 15px!important;
  filter:drop-shadow(0 0 5px var(--ca)) brightness(1.35)!important;opacity:1!important}
/* keep content above brackets */
.field-report>*,.city-tile>*{position:relative;z-index:6}

/* ===== Google mark: animated conic ring around the G — fully scalable (em-based) ===== */
/* Size is driven by font-size: ring gap and stroke are fractions of the G, so it reads
   the same proportions at 16px inline or 64px standalone. Override size with font-size. */
.g-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0;flex:0 0 auto}
.g-ring .ring{position:absolute;inset:-.2em;border-radius:50%;padding:.085em;pointer-events:none;
  background:conic-gradient(from 0deg,var(--orange),var(--gold),var(--cyan),var(--orange));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .085em),#000 calc(100% - .085em));
  mask:radial-gradient(farthest-side,transparent calc(100% - .085em),#000 calc(100% - .085em));
  opacity:.78;animation:trs-gspin 6s linear infinite;transition:opacity .2s,filter .2s}
.g-ring:hover .ring,a:hover .g-ring .ring,.fr-google:hover .ring{animation-duration:1.6s;opacity:1;filter:drop-shadow(0 0 .12em var(--orange))}
.g-ring .g-logo,.g-ring>svg{position:relative;z-index:2;display:block}
@keyframes trs-gspin{to{transform:rotate(360deg)}}
/* F9 unify Google reticle on profile cards to a clean ring (hide reticle ticks, balance G) */
.icon-gmark .tick{display:none!important}
.icon-gmark .gmark{width:42px!important;height:42px!important}
.icon-gmark .gmark svg{width:30px!important;height:30px!important}
/* F7 unify process-step cards to bracket-card frame (square corners + solid colored border + four-corner brackets); number tab (::before) kept */
.process-step{border-radius:0!important}
.process-step:nth-child(1){--ca:#e06a16;--bar:rgba(255,150,60,.70);border:1px solid var(--bar)!important}
.process-step:nth-child(2){--ca:#65d9ff;--bar:rgba(101,217,255,.65);border:1px solid var(--bar)!important}
.process-step:nth-child(3){--ca:#2ecc7a;--bar:rgba(60,200,130,.65);border:1px solid var(--bar)!important}
.process-step::after{content:""!important;display:block!important;position:absolute!important;inset:9px!important;
  width:auto!important;height:auto!important;pointer-events:none;z-index:4!important;border:0!important;
  background:linear-gradient(var(--ca),var(--ca)) top left,linear-gradient(var(--ca),var(--ca)) top left,
    linear-gradient(var(--ca),var(--ca)) top right,linear-gradient(var(--ca),var(--ca)) top right,
    linear-gradient(var(--ca),var(--ca)) bottom left,linear-gradient(var(--ca),var(--ca)) bottom left,
    linear-gradient(var(--ca),var(--ca)) bottom right,linear-gradient(var(--ca),var(--ca)) bottom right!important;
  background-repeat:no-repeat!important;
  background-size:13px 2px,2px 13px,13px 2px,2px 13px,13px 2px,2px 13px,13px 2px,2px 13px!important;
  filter:drop-shadow(0 0 3px var(--ca))!important;opacity:.8!important}
.process-step:hover::after{inset:6px!important;
  background-size:17px 2px,2px 17px,17px 2px,2px 17px,17px 2px,2px 17px,17px 2px,2px 17px!important;
  filter:drop-shadow(0 0 5px var(--ca)) brightness(1.35)!important;opacity:1!important}

/* ============================================================
   GET HELP UNIFICATION  |  June 22 2026
   Standard = the nav-bar Get Help plate (.gh-plate).
   1) Alias the never-defined font vars so the plate label renders
      Barlow Condensed 800 (was silently falling back to body 400 = thin).
   2) JS hydrates every Get Help button into the .gh-plate component, so
      they already share chamfer/hex/font. Only SIZE differed (nav 40px,
      others 48px). Size the non-nav plates to the nav standard. GPS excluded.
   3) Hero row (See How / Call-Text) matches nav button height too.
   ============================================================ */
:root{--fd:var(--font-display);--fb:var(--font-body)}

.gh-plate:not(.gh-plate--gps){height:40px;min-height:40px;padding:0 1.1em;font-size:.9rem}

/* no-JS fallback: Get Help still rendered as .btn.primary -> same metrics */
.btn.primary:has(.gh-hex){
  height:40px;min-height:40px;padding:0 1.1em;gap:.5em;
  font-family:var(--font-display)!important;font-weight:800!important;
  font-size:.9rem!important;letter-spacing:.06em;line-height:1;
}
.btn.primary:has(.gh-hex) .gh-hex{width:1.3em;height:1.3em}

.hero-cta .btn{min-height:40px!important;height:40px;font-size:.9rem!important;padding:0 1.15em!important}