/* AcuPrice app: the public site's look over every signed-in page (pricing tools, sign-in, account, admin, the AI Sales
   Assistant). Wide car-badge headlines in Archivo, Geist to read, Geist Mono for labels, an outlined gold mark, flat
   gold buttons, quiet hairline cards. Colors still come from each page's own tokens, so Appearance (colorways, Light)
   keeps working on top. Loaded last on each page. */
:root{
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
html body{font-family:var(--font);font-weight:450;letter-spacing:-.003em}
button,input,select,textarea{font-family:inherit}

/* Headlines: extra bold, wide and tight, like the website's. */
h1{font-family:var(--display);font-stretch:114%;font-weight:800;letter-spacing:-.03em}
h2,h3{font-stretch:110%;letter-spacing:-.02em}
h2{font-weight:800}
h3{font-weight:700}

/* The brand: the website's wordmark and outlined mark. Lines use the solid gold itself: on the AI Assistant --gold is a
   gradient, which a border or a stroke can't draw (Appearance still recolors this gold). */
.brandline .wm,.brand{font-family:var(--display);font-stretch:116%;font-weight:800;letter-spacing:-.03em}
.brandline .wm{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--ink,#F3EEE2)}
.brandline .mark{background:transparent!important;border:1.5px solid #C9A95E!important;box-shadow:0 0 14px -4px rgba(201,169,94,.55)!important}
.brandline .mark svg{stroke:#DCC58E!important;width:92%!important;height:92%!important;stroke-width:2.1!important}

/* Card titles: bold sentence case instead of small spaced capitals. */
.card h2{font-family:var(--display);font-stretch:112%;font-size:21px;font-weight:800;letter-spacing:-.02em;text-transform:none}

/* Labels: the reading face at each page's own bold weight, set close so they read at a glance (field names in small
   capitals keep a touch of spacing). Eyebrows stay in the mono face, as on the site. */
label,.lbl{font-family:var(--font);letter-spacing:.04em}
.eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:.12em}
.stat span,.ps-tag{font-family:var(--mono)}

/* Figures: the dashboard's numbers in the headline face; digits line up everywhere. */
body{font-variant-numeric:tabular-nums}
.stat b{font-family:var(--display);font-stretch:112%;font-weight:800;letter-spacing:-.03em}

/* Fields: rounder, calmer. */
input[type=text],input[type=number],input[type=email],input[type=password],input[type=tel],input[type=search],select,textarea{border-radius:10px}

/* Gold, worn like jewellery: champagne rather than yellow, and never as a slab. The main action (and anything selected)
   is a lit outline: a faint gold tint, a fine gold line and gold type. Appearance recolors all of it. */
:root{--gold:#C9A95E;--gold-hi:#E2CC94;--gold-lo:#9C8146;--line-gold:rgba(201,169,94,.3);--btn:#C9A95E;--focus:#E2CC94;--label:#BBA677}
.btn{font-weight:600;letter-spacing:0;border-radius:10px}
.btn.primary,.btn.gold{background:linear-gradient(180deg,rgba(201,169,94,.22),rgba(201,169,94,.09));border:1px solid rgba(201,169,94,.6);color:#EAD9AA;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,238,196,.1),0 10px 24px -18px rgba(201,169,94,.85);filter:none}
.btn.primary:hover,.btn.gold:hover{background:linear-gradient(180deg,rgba(201,169,94,.32),rgba(201,169,94,.15));border-color:rgba(226,204,148,.9);color:#F5E8C4;filter:none}
.btn.primary svg,.btn.gold svg{stroke:currentColor}

/* Tabs: a touch lighter, so the active one stands out. */
.tabbtn,.tabbtn *{font-weight:600;letter-spacing:-.005em!important}

/* Cards: a softer corner and a finer edge. */
.card{border-radius:16px}

/* Phones. An iPhone zooms the page in when a text box with type under 16px is tapped, and stays zoomed, so the whole
   page then slides from side to side: on touch screens every text box and dropdown is 16px. And nothing can make a page
   wider than the screen: what doesn't fit is cut at the edge instead of letting the page slide sideways. */
@media (pointer:coarse){html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),select,textarea){font-size:16px}}
@media (max-width:900px){html,body{overflow-x:clip}}

/* Inside the store apps nothing offers or prices AcuPrice (theme.js marks the page). */
.in-app .no-app{display:none!important}