/* KARATS AUTO design system: light travertine base, Jost display type, Liquid Glass surfaces */
:root {
  color-scheme:only light;
  --ink:#1d211e; --soft:#6b716c; --faint:#9aa09a; --bg:#efece6; --paper:#f7f5f0; --acc:#304c40; --acc2:#3d6152;
  --line:rgba(29,33,30,.10); --r-xl:30px; --r-l:22px; --r-m:16px;
  --spring:cubic-bezier(.3,1.35,.45,1); --ease:cubic-bezier(.22,.8,.25,1);
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { background:var(--bg); color:var(--ink); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; -webkit-font-smoothing:antialiased; }
button, a { font:inherit; color:inherit; touch-action:manipulation; }
.jost { font-family:Jost,sans-serif; }
button:focus-visible, a:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }

/* ---- Liquid Glass material: frosted blur + saturation, white tint, specular rim, soft drop shadow ---- */
.lg { position:relative; isolation:isolate; border-radius:var(--r-l);
      --lg-tint:.32;
      background:linear-gradient(180deg, rgba(255,255,255,calc(var(--lg-tint) + .12)), rgba(255,255,255,var(--lg-tint)) 60%, rgba(255,255,255,calc(var(--lg-tint) + .06)));
      -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.04); backdrop-filter:blur(26px) saturate(190%) brightness(1.04);
      box-shadow:0 18px 50px rgba(20,22,20,.16), 0 2px 8px rgba(20,22,20,.08),
                 inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 0 .6px rgba(255,255,255,.55); }
.lg::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
             background:radial-gradient(120% 70% at 25% -10%, rgba(255,255,255,.50), rgba(255,255,255,0) 50%); mix-blend-mode:screen; }
.lg.dark { background:linear-gradient(180deg, rgba(30,33,31,.55), rgba(20,22,21,.42));
           box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 .6px rgba(255,255,255,.14); color:#fff; }
.lg.dark::after { background:radial-gradient(120% 70% at 25% -10%, rgba(255,255,255,.14), rgba(255,255,255,0) 50%); }

/* round glass icon button */
.gbtn { width:44px; height:44px; border-radius:22px; border:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
        transition:transform .35s var(--spring); }
.gbtn:active { transform:scale(.92); }
.gbtn svg { width:20px; height:20px; position:relative; z-index:1; }

a.gbtn, a.btn { color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent; }
/* pill buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 22px; border-radius:26px; border:0; cursor:pointer;
       font-weight:600; letter-spacing:.01em; text-decoration:none; transition:transform .35s var(--spring), background .2s; white-space:nowrap; }
.btn:active { transform:scale(.96); }
.btn svg { width:19px; height:19px; position:relative; z-index:1; }
.btn > span { position:relative; z-index:1; }
.btn.primary { background:var(--acc); color:#fff; box-shadow:0 10px 24px rgba(48,76,64,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.wa { background:#1f8f55; color:#fff; box-shadow:0 10px 24px rgba(31,143,85,.25), inset 0 1px 0 rgba(255,255,255,.18); }

.chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:16px; font-size:13.5px; color:var(--ink);
        background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 .6px rgba(29,33,30,.10); white-space:nowrap; }
.chip svg { width:15px; height:15px; color:var(--soft); }
.demo-tag { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }

/* small glass toast for not-yet-connected actions */
.toast { position:fixed; z-index:60; left:50%; top:calc(14px + env(safe-area-inset-top)); transform:translate(-50%, -160%); opacity:0; padding:11px 18px; border-radius:20px; font-size:14px; font-weight:600;
         white-space:nowrap; transition:transform .5s var(--spring); pointer-events:none; }
.toast.on { transform:translate(-50%, 0); opacity:1; }
.toast { transition:transform .5s var(--spring), opacity .25s; }
.toast span { position:relative; z-index:1; }
/* Language control uses the existing glass treatment. Long translations wrap. */
.language-select { height:44px; width:62px; flex:none; border:0; padding:0 6px; font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; }
.toast { max-width:calc(100vw - 24px); white-space:normal; width:max-content; text-align:center; }
.equip .chip { height:auto; min-height:34px; max-width:100%; white-space:normal; padding-top:6px; padding-bottom:6px; }
.spec b, .spec small { overflow-wrap:anywhere; }

/* r36: smooth page-to-page transition, like an app */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:kvt-out .22s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root) { animation:kvt-in .34s cubic-bezier(.22,.8,.25,1) both; }
  .ptop, .topbar { view-transition-name:khead; }
  ::view-transition-group(khead) { animation-duration:.3s; }
}
@keyframes kvt-out { to { opacity:0; transform:scale(.985); } }
@keyframes kvt-in { from { opacity:0; transform:translateY(10px); } }