/* ============================================================
   Belveza - beauty & wellness booking. Shared design system.
   Beige / sand · editorial serif + clean sans · sleek modern.
   ============================================================ */

/* ---- Design tokens ---- */
:root{
  /* sand / beige neutrals */
  --sand-50:#FBF8F2;
  --sand-100:#F4EDE1;
  --sand-150:#EDE3D3;
  --sand-200:#E3D6C2;
  --sand-300:#D6C4AB;
  --cream:#FFFDF9;

  /* ink */
  --ink:#2B2620;
  --ink-2:#4A4239;
  --ink-soft:#8A7E70;
  --line:#E7DCCB;

  /* accent - warm clay + soft sage */
  --clay:#B26A43;
  --clay-600:#9C5934;
  --clay-100:#F1E0D2;
  --sage:#7C8567;

  --shadow-sm:0 1px 2px rgba(60,45,30,.06);
  --shadow:0 4px 8px -3px rgba(70,50,30,.07),0 14px 30px -10px rgba(70,50,30,.14);
  --shadow-lg:0 8px 18px -6px rgba(70,50,30,.10),0 34px 64px -20px rgba(70,50,30,.24);
  --radius:18px;
  --radius-sm:12px;
  --radius-pill:999px;

  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);

  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--sand-50);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--font-serif);font-weight:560;line-height:1.08;letter-spacing:-.015em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0}

.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:400}

/* ---- Layout helpers ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:clamp(64px,9vw,128px) 0}
.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--clay);opacity:.6}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-2);line-height:1.65;max-width:60ch}
.muted{color:var(--ink-soft)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-weight:600;font-size:15px;
  padding:15px 28px;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 8px 20px -8px rgba(178,106,67,.7)}
.btn-primary:hover{background:var(--clay-600);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(178,106,67,.7)}
.btn-ghost{background:transparent;border-color:var(--sand-300);color:var(--ink)}
.btn-ghost:hover{background:var(--sand-100);border-color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--sand-50)}
.btn-dark:hover{background:#1c1814;transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-lg{padding:18px 34px;font-size:16px}

/* ---- Header / nav ---- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(251,248,242,.82);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
/* On a dark hero: keep nav legible (light) until the header gains a solid bg on scroll */
.site-header.on-dark:not(.scrolled) .logo,
.site-header.on-dark:not(.scrolled) .nav-links a,
.site-header.on-dark:not(.scrolled) .nav-cta .link{color:var(--sand-50)}
.site-header.on-dark:not(.scrolled) .nav-links a{color:rgba(251,248,242,.78)}
.site-header.on-dark:not(.scrolled) .nav-links a:hover,
.site-header.on-dark:not(.scrolled) .nav-links a.active{color:var(--sand-50)}
.site-header.on-dark:not(.scrolled) .btn-ghost{border-color:rgba(255,255,255,.32);color:var(--sand-50)}
.site-header.on-dark:not(.scrolled) .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:var(--sand-50)}
.site-header.on-dark:not(.scrolled) .burger span{background:var(--sand-50)}
.nav{display:flex;align-items:center;gap:36px;height:74px}
.logo{font-family:var(--font-serif);font-size:25px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:2px}
.logo .dot{color:var(--clay)}
.nav-links{display:flex;gap:30px;margin-left:14px}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-2);position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--clay);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta .link{font-size:15px;font-weight:600}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

.mobile-menu{
  display:none;position:fixed;inset:74px 0 0;z-index:55;background:var(--sand-50);
  padding:28px;flex-direction:column;gap:6px;
}
.mobile-menu a{font-family:var(--font-serif);font-size:28px;padding:14px 0;border-bottom:1px solid var(--line)}
.mobile-menu.open{display:flex}

/* ---- Footer ---- */
.footer{background:var(--ink);color:var(--sand-150);padding:80px 0 40px}
.footer a{color:var(--sand-200);font-size:15px;line-height:2.1;transition:color .2s}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-grid h4 ~ a{display:block}
.footer .logo{color:var(--sand-50);font-size:30px}
.footer h4{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-300);margin-bottom:14px;font-weight:600}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);
  color:var(--ink-soft);font-size:14px;flex-wrap:wrap}
.footer-bottom a{color:var(--ink-soft)}

/* ---- Search bar ---- */
.searchbar{
  display:flex;align-items:stretch;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:8px;box-shadow:var(--shadow);max-width:760px;
}
.searchbar .field{display:flex;flex-direction:column;justify-content:center;padding:8px 22px;flex:1;min-width:0;position:relative}
.searchbar .field + .field::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line)}
.searchbar label{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.searchbar input{border:0;background:none;outline:0;font-family:var(--font-sans);font-size:15.5px;color:var(--ink);padding:3px 0;width:100%}
.searchbar input::placeholder{color:#b7ab9a}
.searchbar .btn{align-self:center}

/* ---- Category pills ---- */
.cat-row{display:flex;gap:12px;flex-wrap:wrap}
.cat-pill{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--radius-pill);
  background:var(--cream);border:1px solid var(--line);font-size:14.5px;font-weight:500;
  transition:all .25s var(--ease);cursor:pointer;
}
.cat-pill:hover{border-color:var(--clay);color:var(--clay-600);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cat-pill .ico{font-size:17px}

/* ---- Cards (venue) ---- */
.card-grid{display:grid;gap:26px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}

.venue-card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  display:flex;flex-direction:column;
}
.venue-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.venue-card .photo{aspect-ratio:4/3;background:var(--sand-200);background-size:cover;background-position:center;position:relative}
.venue-card .tag{
  position:absolute;top:12px;left:12px;background:rgba(251,248,242,.92);backdrop-filter:blur(4px);
  font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--radius-pill);color:var(--ink)
}
.venue-card .fav{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(251,248,242,.92);display:grid;place-items:center;border:0;cursor:pointer}
.fav{color:var(--ink-2)}
.fav svg{display:block}
.fav.on svg{fill:var(--clay);color:var(--clay)}
.fav.on{color:var(--clay)}
.venue-card .body{padding:18px 20px 22px}
.venue-card h3{font-size:1.18rem;margin-bottom:4px}
.venue-card .meta{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.venue-card .rating{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;margin-top:12px}
.venue-card .rating .stars{color:var(--clay)}
.venue-card .rating .count{color:var(--ink-soft);font-weight:400}
.chip{display:inline-block;font-size:12px;padding:5px 11px;border-radius:var(--radius-pill);background:var(--sand-100);color:var(--ink-2);margin:14px 6px 0 0}

/* ---- Feature / step blocks ---- */
.feature{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:32px;height:100%;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.feature:hover{border-color:var(--sand-300);transform:translateY(-4px)}
.feature .num{font-family:var(--font-serif);font-size:34px;color:var(--clay);display:block;margin-bottom:14px}
.feature h3{margin-bottom:10px}
.feature p{color:var(--ink-soft);font-size:15.5px}

/* ---- Stat strip ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat .n{font-family:var(--font-serif);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--ink)}
.stat .l{font-size:14px;color:var(--ink-soft);margin-top:4px}

/* ---- Pills/tabs ---- */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:9px 18px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--cream);font-size:14px;font-weight:500;cursor:pointer;transition:.25s var(--ease)}
.tab.active{background:var(--ink);color:var(--sand-50);border-color:var(--ink)}

/* ---- Reveal animation ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ---- Misc ---- */
.divider{height:1px;background:var(--line);border:0;margin:0}
.badge-soft{display:inline-flex;align-items:center;gap:7px;background:var(--clay-100);color:var(--clay-600);font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--radius-pill)}
.surface{background:var(--sand-100)}
.surface-cream{background:var(--cream)}

/* ---- Avatar ---- */
.avatar{width:38px;height:38px;border-radius:50%;background:var(--clay);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;text-decoration:none;transition:transform .2s var(--ease)}
.avatar:hover{transform:scale(1.06)}

/* ---- Demo launcher bar ---- */
.demobar{position:fixed;left:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:6px;
  background:rgba(43,38,32,.94);backdrop-filter:blur(8px);color:var(--sand-100);
  border-radius:var(--radius-pill);padding:7px 8px 7px 15px;box-shadow:var(--shadow-lg);font-size:13px}
.demobar b{font-weight:700;letter-spacing:.08em;color:var(--sand-300);text-transform:uppercase;font-size:10.5px;margin-right:2px;display:inline-flex;align-items:center;gap:7px;cursor:grab;user-select:none}
.demobar b::before{content:"";width:7px;height:13px;flex:0 0 auto;background:radial-gradient(currentColor 1.1px,transparent 1.5px);background-size:4px 4px;opacity:.65}
.demobar a{color:var(--sand-50);text-decoration:none;background:rgba(255,255,255,.1);padding:6px 13px;border-radius:var(--radius-pill);font-weight:600;transition:background .2s}
.demobar a:hover{background:var(--clay)}
.demobar a.x{background:transparent;color:var(--sand-300);padding:6px 8px}
.demobar a.x:hover{background:transparent;color:var(--sand-50)}
@media (max-width:560px){.demobar{left:10px;right:10px;justify-content:center;flex-wrap:wrap}}

/* ---- Inline icons ---- */
.ic{display:inline-block;vertical-align:-0.18em;flex:0 0 auto}
.stars{color:var(--clay)}
.stars svg{fill:currentColor}
.ic-inline{display:inline-flex;align-items:center;gap:6px}

/* ---- Category tile ---- */
.cat-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--sand-200);
  aspect-ratio:3/4;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cat-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.cat-tile .bg{position:absolute;inset:0;background:center/cover;transition:transform .5s var(--ease)}
.cat-tile:hover .bg{transform:scale(1.06)}
.cat-tile .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(43,38,32,.78))}
.cat-tile .lbl{position:absolute;left:20px;right:20px;bottom:18px;color:#fff}
.cat-tile .lbl h3{color:#fff;font-size:1.5rem}
.cat-tile .lbl p{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:4px}

/* ---- Toast ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:90;background:var(--ink);color:var(--sand-50);
  padding:13px 20px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:500;box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease);display:flex;align-items:center;gap:10px}
.toast.show{transform:translate(-50%,0)}
.toast .ic{color:var(--clay)}

/* ---- Forms ---- */
.field-group{margin-bottom:18px}
.field-group label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.input,select.input,textarea.input{
  width:100%;font-family:var(--font-sans);font-size:15.5px;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 16px;outline:0;transition:border-color .2s,box-shadow .2s;
}
.input:focus{border-color:var(--clay);box-shadow:0 0 0 3px var(--clay-100)}
.input::placeholder{color:#b7ab9a}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- Accordion ---- */
.acc{border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);overflow:hidden;margin-bottom:14px}
.acc summary{list-style:none;cursor:pointer;padding:22px 24px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:24px;color:var(--clay);font-weight:400;transition:transform .3s var(--ease)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 24px 24px;color:var(--ink-2);font-size:15.5px;line-height:1.7}

/* ---- Stepper ---- */
.stepper{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft);flex-wrap:wrap}
.stepper .s{display:flex;align-items:center;gap:9px}
.stepper .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--sand-200);color:var(--ink-2)}
.stepper .s.on .n{background:var(--clay);color:#fff}
.stepper .s.on{color:var(--ink);font-weight:600}
.stepper .bar{width:34px;height:1px;background:var(--sand-300)}

/* ---- Summary / list rows ---- */
.summary{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;font-size:15px}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:16px;font-weight:600;font-size:18px;font-family:var(--font-serif)}

/* ---- Account sidebar ---- */
.acct{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.acct-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.acct-nav a{padding:12px 16px;border-radius:var(--radius-sm);font-weight:500;font-size:15px;color:var(--ink-2);transition:.2s}
.acct-nav a:hover{background:var(--sand-100)}
.acct-nav a.active{background:var(--ink);color:var(--sand-50)}
.appt{display:grid;grid-template-columns:90px 1fr auto;gap:18px;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.appt .when{text-align:center;background:var(--sand-100);border-radius:var(--radius-sm);padding:10px 6px}
.appt .when b{display:block;font-family:var(--font-serif);font-size:24px;line-height:1}
@media (max-width:860px){ .acct{grid-template-columns:1fr} .acct-nav{position:static;flex-direction:row;overflow:auto} }
@media (max-width:560px){ .row-2{grid-template-columns:1fr} .appt{grid-template-columns:70px 1fr} .appt .btn{grid-column:1/-1} }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-links,.nav-cta .link,.nav-cta .btn-ghost{display:none}
  .burger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .cols-4,.cols-3,.cols-2{grid-template-columns:1fr}
  .searchbar{flex-direction:column;border-radius:24px;gap:4px}
  .searchbar .field + .field::before{display:none}
  .searchbar .field{padding:12px 18px}
  .searchbar .btn{width:100%;margin-top:6px}
  .footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}

/* ============================================================
   UI polish layer - micro-interactions, focus, motion, depth
   ============================================================ */
*{ -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--clay); color:#fff; }
html{ scrollbar-width:thin; scrollbar-color:var(--sand-300) transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{ background:var(--sand-300); border-radius:10px; border:3px solid var(--sand-50); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }

/* gentle page entrance */
@keyframes lume-in{ from{opacity:0} to{opacity:1} }
body{ animation:lume-in .45s var(--ease) both; }

/* clear, on-brand keyboard focus */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.fchip:focus-visible, .tab:focus-visible, .cat-pill:focus-visible{
  outline:2px solid var(--clay); outline-offset:2px;
}
:focus:not(:focus-visible){ outline:none; }

/* numerals line up in stats/figures */
.stat .n, .kpi .val, .price-card .amt, .sum-row, .summary strong{ font-variant-numeric:tabular-nums; }

/* buttons: a touch more life */
.btn{ will-change:transform; letter-spacing:.005em; }
.btn-primary:hover{ filter:saturate(1.05); }
.btn-dark:hover{ filter:brightness(1.08); }

/* inputs settle in smoothly */
.input{ transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s; }

/* venue cards: slow image zoom + crisper lift */
.venue-card{ will-change:transform; }
.venue-card .photo{ transition:transform .7s var(--ease); }
.venue-card:hover .photo{ transform:scale(1.05); }
.venue-card:hover h3{ color:var(--clay-600); }
.venue-card h3{ transition:color .2s; }

/* chips/pills lift consistently */
.chip{ transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
a.chip:hover{ background:var(--clay-100); color:var(--clay-600); transform:translateY(-1px); }

/* links in prose */
.acc-body a, .lead a{ background-image:linear-gradient(var(--clay),var(--clay)); background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s var(--ease); }
.acc-body a:hover, .lead a:hover{ background-size:100% 1.5px; }

/* refined scroll-reveal timing */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---- Image shimmer placeholder ---- */
@keyframes lume-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }
.img-loading{ position:relative; overflow:hidden; }
.img-loading::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:linear-gradient(100deg, var(--sand-200) 28%, var(--sand-100) 50%, var(--sand-200) 72%);
  background-size:200% 100%; animation:lume-shimmer 1.25s linear infinite;
}
.img-ready{ animation:lume-fade .5s var(--ease) both; }
@keyframes lume-fade{ from{opacity:.55} to{opacity:1} }

/* ---- Toast (refined) ---- */
.toast{ display:flex; align-items:center; gap:10px; }
.toast .ic{ color:var(--clay); flex:0 0 auto; }
.toast span{ line-height:1.3; }

/* search bar fields: no boxy focus ring inside the pill - tint the label instead */
.searchbar input:focus, .searchbar input:focus-visible{ outline:none; box-shadow:none; }
.searchbar .field:focus-within label{ color:var(--clay); }