[hidden]{display:none!important}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/fonts/public-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* Layout: owner area of fivestarcurb.com — login gate, then tabbed tools; pricing first; mono for money; motion only where it carries meaning */
:root{
  --bg:#f6f2ea; --surface:#fffdf8; --fg:#14211b; --muted:#4a564f; --line:#e3dccd;
  --accent:#1e5b3a; --accent-2:#0f2a1d; --gold:#c9982b; --good:#2f7d4f; --warn:#b26b00; --bad:#b03a2e; --tint:#fff4dc; --tint-fg:#7a5310;
  --shadow:0 1px 2px rgba(23,32,28,.06),0 8px 24px rgba(23,32,28,.08);
  --display:"Instrument Serif","Iowan Old Style",Georgia,serif; --body:"Geist","Public Sans",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:920px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 48px;display:grid;gap:16px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:40px;font-weight:400;letter-spacing:-.01em}
h2{font-size:30px;font-weight:400;letter-spacing:-.01em}
h3{font-size:15px;font-weight:600}
p{margin:0;color:var(--muted);max-width:65ch}
.flag{background:var(--tint);color:var(--tint-fg);font-size:13px;font-weight:600;padding:8px 12px;border-radius:6px}
.urlbar{font:500 12px var(--mono);color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.urlbar b{color:var(--fg);font-weight:500}
.preview{background:var(--gold);color:var(--bg);font:700 11px var(--display);letter-spacing:.08em;padding:3px 7px;border-radius:3px}

/* login */
.login{min-height:70vh;display:grid;place-items:center;padding-block:24px}
.lcard{border-radius:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:28px 24px;width:100%;max-width:380px;display:grid;gap:16px;box-sizing:border-box;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.brand{display:flex;gap:10px;align-items:center}
.stars{color:var(--gold);font-size:16px;letter-spacing:2px}
.lcard label{display:grid;gap:6px;font-size:13px;font-weight:600}
.lcard input{font:500 16px var(--body);padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
.lcard .err{color:var(--bad);font-size:13px;font-weight:600;min-height:1.2em}
.lcard.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* app shell */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);position:relative}
.tabs button{font:600 14px var(--body);background:none;border:0;color:var(--muted);padding:10px 12px;cursor:pointer;white-space:nowrap;position:relative;z-index:1}
.tabs button[aria-selected="true"]{color:var(--fg)}
.tabline{position:absolute;bottom:-1px;height:3px;background:var(--gold);border-radius:2px;transition:left .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1)}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.panel{display:grid;gap:16px}
.panel.enter{animation:slidein .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes slidein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.what{border-left:3px solid var(--gold);padding-left:12px;display:grid;gap:4px}

/* tiles + 3D tilt */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;perspective:900px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:2px;transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.tile small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.tile .sub{text-transform:none;letter-spacing:0}
.tile b{font:500 24px var(--mono);font-variant-numeric:tabular-nums}
.tile.pick{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow);transform:translateZ(18px)}
.tile.pick::after{content:"QUOTE THIS";position:absolute;top:-9px;right:10px;background:var(--gold);color:var(--bg);font:700 10px var(--display);letter-spacing:.08em;padding:3px 6px;border-radius:3px}
.tile{position:relative}
.trend{font:600 12px var(--body)}
.trend.up{color:var(--good)} .trend.down{color:var(--bad)}

.box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px;min-width:0}
.step{font:600 12px var(--body);color:var(--gold);text-transform:uppercase;letter-spacing:.08em}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.form label{display:grid;gap:4px;font-size:13px;font-weight:600;align-content:start}
.form input[type=number],.form input[type=text],.addon input{font:500 16px var(--mono);padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);width:100%;box-sizing:border-box;min-width:0}
.form input[type=text],.addon input[type=text]{font-family:var(--body)}
.hint{font-weight:400;color:var(--muted);font-size:12px}
.check{display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px;cursor:pointer}
.addons{display:grid;gap:8px}
.addon,.addhead{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.addhead{font-size:12px;color:var(--muted);font-weight:600}

/* verdict + gauge */
.verdict{border-radius:12px;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;color:var(--bg);transition:background .4s}
.verdict.ok{background:var(--accent)} .verdict.mid{background:var(--gold)} .verdict.no{background:var(--bad)}
.verdict.no.pulse{animation:pulse 2s ease-in-out 3}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--bad) 0%,transparent)}}
.verdict p{color:inherit;opacity:.92}
.verdict strong{font:500 28px var(--mono);display:block}
.vtext{display:grid;gap:4px;min-width:0}
.gauge{width:132px;height:80px;flex:none}
.gauge text{font:600 10px var(--body);fill:currentColor}
.needle{transition:transform 1.1s cubic-bezier(.2,.9,.25,1.15);transform-origin:66px 70px}
@media (max-width:480px){.verdict{grid-template-columns:1fr;justify-items:start}.addon,.addhead{grid-template-columns:1.4fr 1fr 1fr}}

.math{display:grid;gap:6px;font-size:14px}
.math div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:4px}
.math b{font:500 14px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.math .tot{font-weight:600;border-bottom:0}
.warnline{color:var(--warn);font-weight:600;font-size:14px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{font:600 14px var(--body);padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent}
.saved{display:grid;gap:8px}
.row{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.row>div{min-width:0}
.row .meta{font-size:13px;color:var(--muted);font-family:var(--mono)}
.row .acts{display:flex;gap:6px}
.row .acts .btn{padding:6px 10px;font-size:13px}
.pill{font:600 12px var(--body);padding:2px 8px;border-radius:20px;border:1px solid currentColor;white-space:nowrap}
.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.pill.bad.glow{animation:glow 1.6s ease-in-out 3}
@keyframes glow{50%{background:color-mix(in srgb,var(--bad) 18%,transparent)}}

/* bars */
.bars{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:end;height:170px}
.bar{display:grid;gap:4px;height:100%;grid-template-rows:1fr auto auto;text-align:center}
.bar i{display:block;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:4px 4px 0 0;align-self:end;transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
.bar:last-child i{background:linear-gradient(180deg,var(--gold),var(--accent))}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bar span{font:500 11px var(--mono);color:var(--muted)}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.visits{display:grid;gap:10px}
.visit{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.visit time{font:500 13px var(--mono);color:var(--muted)}
.visit ul{margin:0;padding-left:18px;color:var(--muted)}
.ph{display:flex;gap:6px;margin-top:6px}
.ph span{width:56px;height:42px;border-radius:4px;background:repeating-linear-gradient(45deg,var(--line),var(--line) 3px,var(--surface) 3px,var(--surface) 7px);font-size:9px;display:grid;place-items:center;color:var(--muted)}

/* celebration */
.burst{position:fixed;pointer-events:none;z-index:50;width:8px;height:8px;border-radius:2px;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.foot{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.foot .ol{color:var(--gold);font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tile{transform:none!important}
}
.urlbar .back{color:var(--muted);text-decoration:none;font:500 13px var(--body)}
.urlbar .back:hover{color:var(--fg)}
.login .lcard button[disabled]{opacity:.6}