/* ---- fonts ----
   Self-hosted (Latin subset, variable weights) rather than loaded from Google
   Fonts, so no visitor's IP address goes to a third party just to render
   text. Both families are SIL Open Font License. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-italic-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Element 79/47 — shared styles */

:root{
  --ink:oklch(0.16 0.02 60);
  --ink-soft:oklch(0.42 0.015 60);
  --paper:oklch(0.99 0.004 90);
  --paper-2:oklch(0.965 0.006 85);
  --line:oklch(0.90 0.006 85);
  --dark:oklch(0.15 0.015 55);
  --dark-2:oklch(0.20 0.018 55);
  --on-dark:oklch(0.95 0.01 80);
  --on-dark-soft:oklch(0.74 0.02 75);
  --gold-fill:oklch(0.78 0.13 82);
  --gold-ink:oklch(0.44 0.12 70);
  --silver-fill:oklch(0.82 0.014 250);
  --silver-ink:oklch(0.44 0.02 250);
  --good:oklch(0.62 0.15 145);
  --crit:oklch(0.58 0.19 25);
  --platinum-fill:oklch(0.86 0.012 230);
  --platinum-ink:oklch(0.48 0.02 230);
  --palladium-fill:oklch(0.84 0.016 200);
  --palladium-ink:oklch(0.46 0.02 200);

  /* ---- type scale ----
     A disciplined set of steps instead of ad-hoc per-component sizing.
     Every font-size in this file is one of these — if a new component
     needs a size, it should reach for the nearest step rather than
     inventing a new number. */
  --text-2xs:11px;   /* micro tracked labels: brand-sub, dropdown headings, weight badges */
  --text-xs:12px;    /* captions/meta: mint names, premiums, footer text */
  --text-sm:13px;    /* compact UI: topbar, breadcrumb, filter labels, chips */
  --text-base:14px;  /* standard body/nav/buttons-in-cards */
  --text-md:16px;    /* elevated body: primary buttons, card names */
  --text-lg:18px;    /* lead paragraphs, card-level sub-heads */
  --text-2lg:20px;   /* "why us" sub-heads */
  --text-xl:24px;    /* section h2 at narrow widths */
  --text-2xl:32px;   /* section h2 / page h1 */
  --text-3xl:44px;   /* standout numerals (sell offer amount) */
  --text-hero-md:38px;
  --text-hero-lg:52px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;min-height:100vh;}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:500;margin:0;letter-spacing:-0.01em;}
a{color:var(--gold-ink);text-decoration:none;}
a:hover{color:var(--ink);}
img{max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:4px;font-size:var(--text-md);font-weight:600;cursor:pointer;border:1px solid transparent;font-family:inherit;}
.btn-gold{background:var(--gold-fill);color:oklch(0.22 0.05 70);box-shadow:0 2px 8px oklch(0.55 0.13 75 / 0.35);}
.btn-line-dark{border-color:oklch(0.4 0.02 60);color:var(--on-dark);background:transparent;}
.btn-line-light{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn{transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;}
.btn-gold:hover:not(:disabled){background:oklch(from var(--gold-fill) calc(l + 0.05) c h);box-shadow:0 3px 12px oklch(0.55 0.13 75 / 0.45);}
.btn-line-dark:hover:not(:disabled){border-color:var(--gold-fill);color:var(--gold-fill);}
.btn-line-light:hover:not(:disabled){background:var(--ink);color:var(--paper);}
.btn:focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;}
.eyebrow{font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;}

/* ---- top bar + header ---- */
.topbar{background:var(--dark);color:var(--on-dark-soft);font-size:var(--text-sm);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;}
.topbar-left{display:flex;gap:22px;align-items:center;}
.topbar-links{display:flex;gap:18px;}
.topbar-links a{color:var(--on-dark-soft);}

.site-header{background:var(--dark-2);border-bottom:1px solid oklch(0.28 0.02 60);}
.header-row{display:flex;align-items:center;justify-content:space-between;height:84px;}
.brand{display:flex;align-items:center;gap:14px;}

/* ---- logo shine ----
   The mark is one PNG with a gold hexagon overlapping a silver one, so a
   single flat shine sweep can't be brighter on just the silver side. Two
   alpha-only crops of the same source (logo-icon-gold-mask.png /
   logo-icon-silver-mask.png — silver/gold pixels isolated by saturation,
   everything else transparent) are used as CSS masks so each half gets its
   own independently-timed highlight band. Silver's sweeps faster and lands
   brighter per the ask; gold gets a slower, dimmer pass so it doesn't
   compete. Kept as a slow periodic "glint" (a quick pass, then a long hold)
   rather than a continuous back-and-forth shimmer, which reads as gimmicky
   on a site that's supposed to feel trustworthy — and reduced-motion users
   get a still logo. */
.brand-mark{position:relative;display:inline-block;line-height:0;}
.brand-mark img{position:relative;display:block;}
.brand-mark::before,
.brand-mark::after{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:340% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  mix-blend-mode:screen;
  pointer-events:none;
}
.brand-mark::before{
  -webkit-mask-image:url('logo-icon-gold-mask.png');
  mask-image:url('logo-icon-gold-mask.png');
  background-image:linear-gradient(112deg, transparent 38%, rgba(255,247,225,0.75) 50%, transparent 62%);
  animation:logo-shine-gold 7s ease-in-out infinite;
  animation-delay:0.6s;
}
.brand-mark::after{
  -webkit-mask-image:url('logo-icon-silver-mask.png');
  mask-image:url('logo-icon-silver-mask.png');
  background-image:linear-gradient(112deg, transparent 32%, rgba(255,255,255,0.95) 50%, transparent 68%);
  animation:logo-shine-silver 4s ease-in-out infinite;
}
@keyframes logo-shine-gold{
  0%{background-position:180% 0;}
  22%,100%{background-position:-120% 0;}
}
@keyframes logo-shine-silver{
  0%{background-position:180% 0;}
  30%,100%{background-position:-120% 0;}
}

.brand-word{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:var(--text-base);letter-spacing:0.04em;color:var(--on-dark);line-height:1;}
.brand-word .num-gold{
  background-image:linear-gradient(100deg, oklch(0.60 0.10 75) 0%, oklch(0.90 0.09 90) 22%, oklch(0.70 0.12 78) 42%, oklch(0.94 0.08 92) 55%, oklch(0.66 0.11 76) 75%, oklch(0.86 0.09 88) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.brand-word .num-silver{
  background-image:
    linear-gradient(112deg, transparent 34%, rgba(255,255,255,0.98) 50%, transparent 66%),
    linear-gradient(100deg, oklch(0.62 0.014 250) 0%, oklch(0.95 0.006 250) 20%, oklch(0.74 0.016 250) 40%, oklch(0.98 0.004 250) 54%, oklch(0.68 0.016 250) 76%, oklch(0.90 0.008 250) 100%);
  background-size:340% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:text-shine-silver 4s ease-in-out infinite;
}
@keyframes text-shine-silver{
  0%{background-position:180% 0, 0 0;}
  30%,100%{background-position:-120% 0, 0 0;}
}
@media (prefers-reduced-motion: reduce){
  .brand-mark::before,.brand-mark::after,.brand-word .num-silver{animation:none;}
}
.brand-sub{font-size:var(--text-2xs);letter-spacing:0.12em;color:var(--on-dark-soft);text-transform:uppercase;margin-top:4px;}
.main-nav{display:flex;align-items:center;gap:24px;font-size:var(--text-base);font-weight:500;}
.main-nav a{color:var(--on-dark);white-space:nowrap;}
.main-nav a.current{color:var(--gold-fill);}
.nav-dropdown{position:relative;display:flex;align-items:center;align-self:stretch;gap:3px;}
.nav-caret{background:none;border:none;color:var(--on-dark-soft);cursor:pointer;padding:4px;display:flex;align-items:center;}
/* top:100% (flush against the nav item, no dead space) + a small margin-top for
   visual breathing room — the panel opening/closing is driven by JS
   (mouseenter/mouseleave with a short close-delay in script.js) rather than a
   raw CSS :hover chain, so brief transit through that margin never closes it
   prematurely. See script.js for the delayed-close logic. */
.nav-dropdown .dropdown-panel{position:absolute;top:100%;margin-top:10px;left:-18px;background:var(--paper);border-radius:8px;box-shadow:0 16px 36px rgba(0,0,0,0.30);padding:20px;display:none;gap:30px;min-width:290px;z-index:60;}
.nav-dropdown.open .dropdown-panel{display:flex;}
.dropdown-col{display:flex;flex-direction:column;gap:2px;min-width:112px;}
.dropdown-heading{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:6px;}
.dropdown-col a{color:var(--ink);font-size:var(--text-base);font-weight:500;padding:7px 8px;border-radius:5px;}
.dropdown-col a:hover{background:var(--paper-2);color:var(--gold-ink);}
.dropdown-col a.view-all{color:var(--gold-ink);font-weight:600;margin-top:4px;}

/* ---- full-width mega menu (bullionstandard / monumentmetals pattern) ----
   The metals panels are far too wide to hang off their own nav item, so the
   panel spans the header instead: .nav-mega drops position:relative so the
   absolutely-positioned panel resolves against .site-header, and its inner
   .wrap keeps the columns on the same grid as the rest of the page. */
.site-header{position:relative;z-index:70;}
.nav-mega{position:static;}
.nav-dropdown .mega-panel{left:0;right:0;margin-top:0;padding:0;border-radius:0;
  min-width:0;border-top:1px solid var(--line);box-shadow:0 24px 44px rgba(0,0,0,0.30);}
.nav-dropdown.open .mega-panel{display:block;}
.mega-grid{display:grid;gap:26px 30px;padding-top:26px;padding-bottom:24px;align-items:start;}
.mega-grid.mega-2{grid-template-columns:repeat(2,minmax(0,250px));}
.mega-grid.mega-3{grid-template-columns:repeat(3,minmax(0,250px));}
.mega-grid.mega-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.mega-grid .dropdown-col{min-width:0;}
.mega-grid .dropdown-col a{padding:6px 8px;margin-left:-8px;}
.nav-dropdown .dropdown-panel a{white-space:normal;}
.mega-foot{border-top:1px solid var(--line);background:var(--paper-2);}
.mega-foot .wrap{display:flex;flex-wrap:wrap;gap:24px;padding-top:13px;padding-bottom:13px;}
.mega-foot a{color:var(--gold-ink);font-weight:600;font-size:var(--text-sm);}
.mega-foot a:hover{text-decoration:underline;}
/* Dims the page behind an open panel, the way Monument Metals' menu does. */
.mega-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.38);opacity:0;
  pointer-events:none;transition:opacity .18s ease;z-index:39;}
.mega-overlay.show{opacity:1;}
.nav-caret[aria-expanded="true"]{color:var(--gold-fill);}
.header-actions{display:flex;align-items:center;gap:18px;}
.auth-slot{display:flex;align-items:center;}
.auth-slot .cl-userButtonTrigger{box-shadow:none;}
.auth-slot .cl-userButtonOuterIdentifier{color:var(--on-dark);}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;}

/* mobile nav drawer */
.mobile-nav{display:none;}

.ticker{border-top:1px solid oklch(0.28 0.02 60);background:oklch(0.12 0.014 55);}
.ticker .wrap{display:flex;align-items:center;gap:24px;padding:5px 40px;font-size:var(--text-sm);flex-wrap:wrap;}
.ticker-wrap{flex-wrap:nowrap;}
.live-dot-label{display:flex;align-items:center;gap:6px;color:var(--on-dark-soft);font-size:var(--text-2xs);letter-spacing:0.1em;text-transform:uppercase;flex-shrink:0;}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block;}
.ticker-note{margin-left:auto;color:var(--on-dark-soft);font-size:var(--text-xs);flex-shrink:0;}

/* Ticker marquee — .ticker-viewport clips a flex row holding two identical
   copies of .price-row (the second is aria-hidden, purely visual); animating
   the viewport by exactly -50% loops seamlessly since both copies are the
   same width. Paused on hover so the prices are actually readable, and
   turned off entirely under prefers-reduced-motion (same convention as the
   logo shine animation above). */
.ticker-viewport{overflow:hidden;flex:1;min-width:0;}
.ticker-track{display:flex;gap:20px;width:max-content;animation:ticker-scroll 26s linear infinite;}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-paused .ticker-track{animation-play-state:paused;}
/* Pause/play control, added by script.js. Hover alone can't stop the belt for
   keyboard or touch users. */
.ticker-toggle{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid oklch(0.4 0.02 60);border-radius:4px;background:transparent;color:var(--on-dark-soft);cursor:pointer;touch-action:manipulation;}
.ticker-toggle:hover{color:var(--on-dark);border-color:var(--on-dark-soft);}
.ticker-toggle:focus-visible{outline:2px solid var(--gold-fill);outline-offset:2px;}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
  .ticker-toggle{display:none;}
  .btn{transition:none;}
}
.price-row{display:flex;align-items:center;gap:20px;flex-shrink:0;font-size:var(--text-sm);color:var(--on-dark);font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;white-space:nowrap;}
.price-item b{margin-right:5px;}
.price-item b.au{color:var(--gold-fill);}
.price-item b.ag{color:var(--silver-fill);}
.price-item b.pt{color:var(--platinum-fill);}
.price-item b.pd{color:var(--palladium-fill);}
.price-delta{margin-left:5px;font-size:var(--text-2xs);}
.price-delta.up{color:var(--good);}
.price-delta.down{color:var(--crit);}

/* ---- hero ---- */
.hero{background:linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);color:var(--on-dark);padding:88px 0 96px;}
.hero .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;}
.hero h1{font-size:var(--text-hero-lg);line-height:1.08;color:var(--on-dark);margin-bottom:22px;}
.hero p{font-size:var(--text-lg);line-height:1.6;color:var(--on-dark-soft);max-width:480px;margin-bottom:34px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-art{display:flex;justify-content:center;align-items:center;position:relative;height:340px;}
.hero-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, oklch(0.32 0.05 75 / 0.35) 0%, transparent 70%);}
.hero-art img{width:260px;position:relative;}

/* ---- trust strip ---- */
.trust{background:var(--paper-2);border-bottom:1px solid var(--line);padding:26px 0;}
.trust .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;}
.trust-item{display:flex;align-items:center;gap:10px;font-size:var(--text-base);color:var(--ink-soft);}

/* ---- categories ---- */
.cats{padding:84px 0;}
.cats-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.cats-head h2{font-size:var(--text-2xl);}
.cats-head a{font-size:var(--text-base);font-weight:600;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cat-card{display:block;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(31,27,22,0.05);text-decoration:none;color:inherit;transition:box-shadow .15s ease,transform .15s ease;}
a.cat-card:hover{box-shadow:0 6px 16px rgba(31,27,22,0.10);transform:translateY(-2px);}
.cat-art{height:150px;display:flex;align-items:center;justify-content:center;}

/* Category tiles that represent a whole product line (Gold Coins, Silver
   Coins …) fan out several real coin photos instead of showing one generic
   render, so the tile actually previews the range behind it. The centre coin
   sits on top and slightly larger; the flankers tuck behind it. */
.cat-fan{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.cat-fan img{position:absolute;object-fit:contain;transition:transform .18s ease;}
.cat-fan .fan-left{width:78px;height:78px;transform:translateX(-42px) rotate(-14deg);z-index:1;}
.cat-fan .fan-right{width:78px;height:78px;transform:translateX(42px) rotate(14deg);z-index:1;}
.cat-fan .fan-center{width:104px;height:104px;z-index:2;}
a.cat-card:hover .cat-fan .fan-left{transform:translateX(-52px) rotate(-19deg);}
a.cat-card:hover .cat-fan .fan-right{transform:translateX(52px) rotate(19deg);}

/* Bars are tall rectangles inside square, transparent-padded art, so they
   need a tighter spread and a gentler tilt than the round coins. */
.cat-fan.cat-fan-bar .fan-left{width:112px;height:112px;transform:translateX(-34px) rotate(-9deg);}
.cat-fan.cat-fan-bar .fan-right{width:112px;height:112px;transform:translateX(34px) rotate(9deg);}
.cat-fan.cat-fan-bar .fan-center{width:128px;height:128px;}
a.cat-card:hover .cat-fan.cat-fan-bar .fan-left{transform:translateX(-42px) rotate(-12deg);}
a.cat-card:hover .cat-fan.cat-fan-bar .fan-right{transform:translateX(42px) rotate(12deg);}

@media (max-width:560px){
  .cat-fan .fan-left{transform:translateX(-32px) rotate(-14deg);}
  .cat-fan .fan-right{transform:translateX(32px) rotate(14deg);}
}
.cat-body{padding:18px 20px 22px;}
.cat-name{font-family:'Newsreader',serif;font-size:var(--text-lg);margin-bottom:5px;}
.cat-desc{font-size:var(--text-sm);color:var(--ink-soft);margin-bottom:14px;}
.cat-price{font-size:var(--text-base);font-weight:600;color:var(--gold-ink);}

/* ---- sell banner ---- */
.sell-banner{background:var(--dark);color:var(--on-dark);padding:64px 0;}
.sell-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.sell-banner-copy{max-width:560px;}
.sell-banner h2{font-size:var(--text-2xl);color:var(--on-dark);margin-bottom:14px;}
.sell-banner p{color:var(--on-dark-soft);font-size:var(--text-lg);line-height:1.6;margin:0;}

/* ---- why us ---- */
.why{padding:88px 0;background:var(--paper-2);}
.why .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.why-icon{width:46px;height:46px;border-radius:50%;background:oklch(0.93 0.03 82);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.why h3{font-size:var(--text-2lg);margin-bottom:10px;}
.why p{font-size:var(--text-base);color:var(--ink-soft);line-height:1.6;margin:0;}

/* ---- footer ---- */
.site-footer{background:var(--dark);color:var(--on-dark-soft);padding:56px 0 28px;margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:36px;border-bottom:1px solid oklch(0.28 0.02 60);}
.footer-grid img{width:86px;display:block;margin-bottom:16px;}
.footer-grid p{font-size:var(--text-base);line-height:1.6;max-width:260px;margin:0;}
.footer-col-title{color:var(--on-dark);font-size:var(--text-xs);font-weight:600;margin-bottom:14px;}
.footer-links{display:flex;flex-direction:column;gap:9px;font-size:var(--text-base);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:var(--text-xs);flex-wrap:wrap;gap:8px;}
.footer-simple{padding:30px 0;text-align:center;font-size:var(--text-xs);}
.footer-legal{display:block;margin-top:8px;}
.footer-bottom .footer-legal{display:inline;margin:0 0 0 10px;}
.footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* ---- shop page ---- */
.breadcrumb-section{background:var(--paper-2);border-bottom:1px solid var(--line);padding:36px 0;}
.breadcrumb{font-size:var(--text-sm);color:var(--ink-soft);margin-bottom:10px;}
.breadcrumb .current{color:var(--ink);}
.shop-section{padding:44px 0 90px;}
.shop-layout{display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:flex-start;}
/* Filter chips — replaces plain checkbox rows. Ecommerce-filter UX research
   still calls for checkbox (multi-select, OR-within-group) *behavior* here,
   so a real <input type="checkbox"> stays underneath for semantics, keyboard
   support and screen readers; it's just visually hidden in favor of a
   toggle-pill styled by its checked state. */
.filter-group{margin-bottom:30px;display:flex;flex-wrap:wrap;gap:8px;}
.filter-group .filter-title{flex-basis:100%;font-size:var(--text-sm);font-weight:600;margin-bottom:2px;}
.shop-search-input{padding:9px 12px;border:1.5px solid var(--line);border-radius:4px;font-size:var(--text-sm);font-family:inherit;color:var(--ink);width:100%;}
.shop-search-input:focus{outline:none;border-color:var(--gold-ink);}
.chip{display:inline-flex;}
.chip-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.chip-label{display:inline-flex;align-items:center;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:var(--text-sm);line-height:1.2;color:var(--ink-soft);cursor:pointer;user-select:none;background:#fff;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.chip-label:hover{border-color:oklch(0.7 0.03 75);color:var(--ink);}
.chip-input:checked + .chip-label{border-color:var(--gold-ink);color:var(--ink);background:oklch(0.96 0.03 82);font-weight:600;}
.chip-input:focus-visible + .chip-label{outline:2px solid var(--gold-ink);outline-offset:2px;}
.filter-note{padding:16px;background:var(--paper-2);border-radius:3px;font-size:var(--text-xs);color:var(--ink-soft);line-height:1.6;}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:8px;font-size:var(--text-base);color:var(--ink-soft);}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* Category grouping within the shop grid (Metal > Coins/Rounds/Bars/Junk),
   separate from .shop-section above (that's the page-level wrapper). */
.shop-cat-section{margin-bottom:40px;}
.shop-cat-section:last-child{margin-bottom:0;}
.shop-cat-title{font-size:var(--text-2lg);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line);}

.card{border:1px solid var(--line);border-radius:6px;background:#fff;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(31,27,22,0.05);overflow:hidden;}
.card-art{height:150px;background:oklch(0.94 0.018 80);display:flex;align-items:center;justify-content:center;position:relative;}
.card{cursor:pointer;}
.card .btn,.card input,.card select,.card label{cursor:auto;}
.card .btn{cursor:pointer;}
.card-art-link{display:block;color:inherit;text-decoration:none;}
.card-art img{transition:transform .18s ease;}
.card-art-link:hover img{transform:scale(1.05);}
.card-art-link:focus-visible{outline:2px solid var(--gold-ink);outline-offset:-2px;}
.card-weight{position:absolute;top:10px;left:10px;background:var(--dark);color:var(--gold-fill);font-size:var(--text-2xs);padding:3px 8px;border-radius:2px;letter-spacing:0.04em;}
.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card-name{font-size:var(--text-md);font-weight:500;line-height:1.3;}
.card-mint{font-size:var(--text-xs);color:var(--ink-soft);}
.card-reviews{display:flex;align-items:center;gap:6px;}
.card-reviews .stars{color:var(--gold-fill);font-size:var(--text-sm);letter-spacing:1px;}
.card-reviews .review-count{font-size:var(--text-xs);color:var(--ink-soft);}
/* Simple price + note row — used by sell.js's buyback cards (a single total
   plus a small "95% of spot" caption), distinct from the shop grid's
   Retail/Pro pricing table below. */
.card-price-row{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;}
.card-price-row .card-price{font-size:var(--text-lg);font-weight:600;}
.card-price-row .card-premium{font-size:var(--text-xs);color:var(--ink-soft);}
.card.pro-priced .card-price-row .card-price{color:var(--gold-ink);}
.card.pro-priced .card-price-row .card-premium{color:var(--gold-ink);font-weight:600;}

/* Retail/Pro x Wire/Card pricing table on each shop-grid card — mirrors the
   larger version on product.html's individual product page. */
.card-price-table{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);border-collapse:collapse;width:100%;font-size:var(--text-xs);}
.card-price-table th{font-weight:500;color:var(--ink-soft);text-align:right;padding:0 0 4px;font-size:var(--text-2xs);}
.card-price-table th:first-child{text-align:left;}
.card-price-table td{padding:2px 0;text-align:right;}
.card-price-table td:first-child{text-align:left;color:var(--ink-soft);}
.card-price-table .card-price{font-weight:600;font-size:var(--text-sm);}
.card-price-table .cpt-retail-card{font-weight:600;font-size:var(--text-sm);}
.card-price-table .cpt-pro-row td{color:var(--gold-ink);font-weight:600;}
/* "We pay" — the buyback side, shown next to the buy prices so the spread is
   visible up front rather than only on the Sell to Us page. */
.card-price-table .cpt-sell-row td{padding-top:5px;border-top:1px dashed var(--line);color:var(--ink-soft);}
.card-badges{display:flex;flex-wrap:wrap;gap:5px;}
.card-badge{font-size:var(--text-2xs);padding:2px 7px;border-radius:3px;background:var(--paper-2);color:var(--ink-soft);letter-spacing:0.03em;}
.card-badge-ira{background:oklch(0.93 0.05 150);color:oklch(0.4 0.09 150);font-weight:600;}
.card-stock{font-size:var(--text-2xs);color:var(--ink-soft);}
.card-stock .stock-low{color:var(--crit);font-weight:600;}
.card-stock .stock-out{color:var(--crit);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}

/* Out-of-stock sticker. Sits over the product art so it reads at a glance in
   the grid, with the image knocked back so a sold-out item is obvious even
   before the label is read. */
.card.out-of-stock .card-art img{filter:grayscale(0.85) opacity(0.45);}
.card.out-of-stock .card-art::after,
.product-art-wrap.out-of-stock::after{
  content:"OUT OF STOCK";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:var(--crit);
  color:#fff;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:0.08em;
  padding:7px 16px;
  border-radius:3px;
  box-shadow:0 2px 8px rgba(31,27,22,0.28);
  white-space:nowrap;
  pointer-events:none;
}
/* Larger stamp on the product page's bigger image. */
.product-art-wrap{position:relative;}
.product-art-wrap.out-of-stock img{filter:grayscale(0.85) opacity(0.45);}
.product-art-wrap.out-of-stock::after{font-size:var(--text-md);padding:10px 22px;}
.card.pro-priced .card-price-table .cpt-retail-wire,
.card.pro-priced .card-price-table .cpt-retail-card{color:var(--ink-soft);font-weight:400;}
.card-market{font-size:var(--text-xs);color:var(--ink-soft);margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);}
.card-market b{font-weight:600;}
.card-market .under{color:var(--good);}
.card-market .over{color:var(--crit);}
.card .btn{justify-content:center;padding:11px;font-size:var(--text-base);margin-top:4px;width:100%;}

/* ---- sell to us page ---- */
.sell-intro{background:var(--dark);color:var(--on-dark);padding:56px 0 44px;}
.sell-intro h1{font-size:var(--text-2xl);color:var(--on-dark);margin-bottom:14px;max-width:640px;}
.steps-row{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap;}
.step{display:flex;align-items:center;gap:10px;}
.step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;flex-shrink:0;}
.step-num.on{background:var(--gold-fill);color:oklch(0.2 0.05 70);}
.step-num.off{border:1.5px solid var(--on-dark-soft);color:var(--on-dark-soft);}
.step span{font-size:var(--text-base);color:var(--on-dark-soft);}

.sell-section{padding:52px 0 90px;}
.sell-layout{display:grid;grid-template-columns:1fr 380px;gap:50px;align-items:flex-start;}
.panel{border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 6px rgba(31,27,22,0.05);padding:28px;margin-bottom:26px;background:#fff;}
.panel.dim{opacity:0.85;}
.panel h3{font-size:var(--text-lg);margin-bottom:20px;}
.panel .hint{font-size:var(--text-sm);color:var(--ink-soft);margin-bottom:18px;margin-top:-14px;}
.field-label{font-size:var(--text-xs);font-weight:600;color:var(--ink-soft);margin-bottom:8px;display:block;}
.pill-row{display:grid;gap:10px;margin-bottom:20px;}
.pill-row.two{grid-template-columns:1fr 1fr;}
.pill-row.three{grid-template-columns:repeat(3,1fr);}
.pill{padding:12px 18px;border:1.5px solid var(--line);border-radius:2px;font-size:var(--text-base);font-weight:500;cursor:pointer;background:#fff;color:var(--ink-soft);text-align:center;}
.pill.active{border-color:var(--gold-ink);color:var(--ink);background:oklch(0.96 0.03 82);}
input[type="range"]{width:100%;accent-color:var(--gold-ink);margin-bottom:20px;display:block;}
.dropzone{border:2px dashed var(--line);border-radius:3px;padding:40px;text-align:center;color:var(--ink-soft);}
.dropzone svg{margin:0 auto 10px;display:block;}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fake-field{border:1px solid var(--line);border-radius:2px;padding:13px 15px;font-size:var(--text-base);color:var(--ink-soft);}
.fake-field.full{grid-column:1 / -1;}

.offer-card{position:sticky;top:24px;background:var(--dark);color:var(--on-dark);border-radius:6px;padding:28px;}
.offer-amount{font-family:'Newsreader',serif;font-size:var(--text-3xl);color:var(--gold-fill);margin-bottom:2px;}
.offer-qty-note{font-size:var(--text-2xs);color:var(--on-dark-soft);margin-bottom:8px;}
.offer-sub{font-size:var(--text-xs);color:var(--on-dark-soft);margin-bottom:22px;}
.offer-detail{border-top:1px solid oklch(0.3 0.02 60);padding-top:16px;display:flex;flex-direction:column;gap:9px;font-size:var(--text-sm);color:var(--on-dark-soft);}
.offer-detail-row{display:flex;justify-content:space-between;gap:16px;}
.offer-detail-row span:first-child{font-weight:600;flex-shrink:0;}
.offer-detail-row span:last-child{color:var(--on-dark);text-align:right;min-width:0;}
.offer-card .btn{width:100%;justify-content:center;margin-top:22px;}
.offer-fine{font-size:var(--text-2xs);color:var(--on-dark-soft);text-align:center;margin-top:10px;}

/* ---- account dashboard (orders / sell requests) ---- */
.acct-row{padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--text-sm);}
.acct-row:last-child{border-bottom:none;padding-bottom:0;}
.acct-row-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;}
.acct-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;font-size:var(--text-xs);}
.acct-row-body{color:var(--ink-soft);line-height:1.6;}
.acct-row-foot{display:flex;justify-content:space-between;margin-top:8px;color:var(--ink-soft);font-size:var(--text-xs);}
.acct-row-foot span:last-child{font-weight:600;color:var(--ink);}
.acct-status{font-size:var(--text-2xs);padding:3px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink-soft);white-space:nowrap;}
.acct-status-shipped{background:oklch(0.93 0.05 150);color:oklch(0.4 0.09 150);font-weight:600;}
.acct-status-paid{background:oklch(0.95 0.04 82);color:var(--gold-ink);font-weight:600;}
.acct-status-cancelled{background:oklch(0.94 0.02 25);color:var(--crit);}

/* Light-panel counterpart to .offer-detail-row (that one's styled for the
   dark .offer-card sidebar) — used for the Purity/Diameter/Design rows on
   the product page's own light-background panel. */
.spec-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--text-sm);}
.spec-row:last-child{border-bottom:none;}
.spec-row span:first-child{color:var(--ink);font-weight:600;flex-shrink:0;}
.spec-row span:last-child{color:var(--ink);text-align:right;min-width:0;}

/* ---- preview banner (static-export honesty note) ---- */
.preview-banner{background:oklch(0.93 0.03 82);color:oklch(0.32 0.06 70);font-size:var(--text-sm);text-align:center;padding:9px 16px;border-bottom:1px solid oklch(0.8 0.05 80);}
.preview-banner b{font-weight:700;}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 980px){
  .wrap{padding:0 24px;}
  .hero .wrap{grid-template-columns:1fr;gap:36px;}
  .hero-art{height:220px;order:-1;}
  .hero-art img{width:180px;}
  .hero h1{font-size:var(--text-hero-md);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .why .wrap{grid-template-columns:1fr;gap:34px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .shop-layout{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .sell-layout{grid-template-columns:1fr;}
  .offer-card{position:static;}
}

@media (max-width: 860px){
  .main-nav{position:fixed;top:0;right:0;height:100vh;width:250px;background:var(--dark-2);flex-direction:column;padding:90px 26px 26px;gap:22px;transform:translateX(100%);transition:transform .25s ease;z-index:50;box-shadow:-8px 0 24px rgba(0,0,0,0.25);}
  .main-nav.open{transform:translateX(0);}
  .hamburger{display:flex;align-items:center;justify-content:center;}
  .header-actions .btn{padding:9px 14px;font-size:var(--text-xs);}
  .nav-dropdown{flex-direction:column;align-items:flex-start;align-self:auto;width:100%;gap:0;}
  .nav-dropdown .dropdown-panel{display:none;}
  .nav-dropdown.open .dropdown-panel{display:flex;flex-direction:column;gap:16px;position:static;box-shadow:none;background:transparent;padding:10px 0 6px 10px;min-width:0;}
  .nav-mega{position:relative;}
  .nav-dropdown.open .mega-panel{display:block;position:static;box-shadow:none;background:transparent;border-top:none;padding:6px 0 4px 10px;}
  .nav-dropdown .mega-panel .wrap{padding:0;max-width:none;}
  .mega-grid{grid-template-columns:1fr !important;gap:14px;}
  .mega-grid.mega-2,.mega-grid.mega-3,.mega-grid.mega-4{grid-template-columns:1fr;}
  .mega-foot{background:transparent;border-top:1px solid oklch(0.32 0.02 60);margin-top:10px;}
  .mega-foot .wrap{flex-direction:column;gap:8px;padding:10px 0 0;}
  .mega-foot a{color:var(--gold-fill);}
  .mega-overlay{display:none;}
  .nav-dropdown .dropdown-col a{color:var(--on-dark-soft);}
  .nav-dropdown .dropdown-col a:hover{background:none;color:var(--gold-fill);}
}

@media (max-width: 640px){
  .wrap{padding:0 18px;}
  .topbar span{font-size:var(--text-xs);}
  .topbar-left span:nth-child(3){display:none;}
  .header-row{height:70px;}
  .brand-sub{display:none;}
  .ticker .wrap{height:auto;padding-top:8px;padding-bottom:8px;gap:12px 20px;}
  .ticker-note{margin-left:0;width:100%;order:99;}
  .price-row{gap:10px 14px;font-size:var(--text-xs);}
  .hero{padding:56px 0 60px;}
  .hero h1{font-size:var(--text-2xl);}
  .hero p{font-size:var(--text-base);}
  .cats{padding:56px 0;}
  .cat-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .cats-head h2{font-size:var(--text-xl);}
  .sell-banner .wrap{flex-direction:column;align-items:flex-start;}
  .why{padding:56px 0;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .footer-bottom{flex-direction:column;text-align:left;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .field-grid{grid-template-columns:1fr;}
  .steps-row{gap:18px 26px;}
}

/* ---- site-wide notice bar -------------------------------------------------
   Temporary "under construction" banner. To retire it, delete this block and
   the <div class="construction-bar"> at the top of each page's <body>. */
.construction-bar{background:oklch(0.78 0.13 82);color:oklch(0.22 0.05 70);text-align:center;
  padding:9px 18px;font-size:var(--text-sm);font-weight:600;line-height:1.45;
  border-bottom:1px solid oklch(0.66 0.12 78);}
.construction-bar b{font-weight:700;}
.construction-bar span{font-weight:500;opacity:0.85;}
@media (max-width:560px){.construction-bar{font-size:var(--text-xs);padding:8px 12px;}}
.btn:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none;}

/* ---- individual product page ----------------------------------------
   Previously hand-styled with ~36 inline style attributes, which drifted
   from the rest of the site (offer card at 4px radius / 30px padding while
   every other panel was 6px / 28px). Everything here now comes from the
   same tokens as the shop grid. */
.product-head{display:flex;gap:28px;flex-wrap:wrap;}
.product-art-wrap{width:220px;height:220px;flex-shrink:0;border-radius:6px;}
.product-art-wrap img{width:170px;height:170px;object-fit:contain;}
.product-head-body{flex:1;min-width:220px;}
.product-head-body .eyebrow{display:block;margin-bottom:8px;}
.product-head-body h1{font-size:var(--text-2xl);margin-bottom:10px;}
.product-head-body .card-badge{margin-bottom:12px;}
.product-head-body .card-reviews{margin-bottom:16px;}
.product-desc{color:var(--ink-soft);font-size:var(--text-sm);line-height:1.6;margin:0 0 14px;}

/* Pricing table — same visual language as .card-price-table on the grid,
   just roomier for the wider column. */
.product-price-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
.product-price-table th{text-align:right;padding:8px 6px;color:var(--ink-soft);font-weight:600;}
.product-price-table th:first-child{text-align:left;}
.product-price-table thead tr{border-bottom:1px solid var(--line);}
.product-price-table td{padding:10px 6px;text-align:right;}
.product-price-table td:first-child{text-align:left;}
.product-price-table tbody tr:not(:last-child){border-bottom:1px solid var(--line);}
.product-price-table .ppt-retail td{font-weight:600;}
.product-price-table .ppt-retail td:first-child{font-weight:400;}
.product-price-table .ppt-pro td{color:var(--gold-ink);font-weight:700;}
.product-buyback{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}
.product-buyback span:last-child{font-weight:600;}

/* Pro line in the offer card — a link through to the Pro page. */
.offer-pro-line{display:flex;align-items:center;gap:8px;margin:10px 0 4px;text-decoration:none;color:inherit;}
.offer-pro-line:hover{color:inherit;}
.offer-pro-line:hover .pro-chip{filter:brightness(1.08);}
.offer-pro-line:hover .offer-sub{text-decoration:underline;}
.pro-chip{background:var(--gold-fill);color:oklch(0.22 0.05 70);font-size:var(--text-2xs);font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:0.04em;transition:filter .15s ease;}
.offer-pro-line .offer-sub{margin:0;}
.offer-pro-delta{color:var(--good);font-size:var(--text-xs);font-weight:600;}
.offer-card .btn{width:100%;justify-content:center;}
.offer-card .offer-fine{display:block;color:var(--gold-fill);}

.table-scroll{overflow-x:auto;}

/* ---- compact volume pricing card (sits under the offer card) -------------
   This was a full-width panel in the left column at 13px, which gave the
   retail tiers more visual weight than the Pro price. Moved into the sidebar
   directly below the retail price box and shrunk: retail tiers are quiet
   reference numbers, and the Pro row is the one that should catch the eye. */
.offer-stack{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px;}
.offer-stack .offer-card{position:static;}
.vol-card{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:15px 17px 16px;box-shadow:0 2px 6px rgba(31,27,22,0.05);}
.vol-head{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:0.08em;
  color:var(--ink-soft);font-weight:600;margin-bottom:9px;}
.vol-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
.vol-table th{font-size:var(--text-2xs);text-align:right;padding:0 0 6px;
  color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--line);}
.vol-table th:first-child{text-align:left;}
.vol-table td{font-size:var(--text-xs);padding:5px 0;text-align:right;color:var(--ink-soft);}
.vol-table td:first-child{text-align:left;}
.vol-table .ppt-retail td{font-weight:500;}
.vol-table .ppt-retail td:not(:first-child){color:var(--ink);}

/* The Pro row is the call to action: gold, bolder and a step larger than the
   retail tiers it sits under. */
.vol-table .ppt-pro td{font-size:var(--text-sm);font-weight:700;color:var(--gold-ink);
  background:oklch(0.965 0.032 84);padding:9px 0;border-top:1px solid oklch(0.89 0.06 82);}
.vol-table .ppt-pro td:first-child{padding-left:7px;border-radius:4px 0 0 4px;}
.vol-table .ppt-pro td:last-child{padding-right:7px;border-radius:0 4px 4px 0;}
.vol-table .ppt-pro a{color:var(--gold-ink);display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
.vol-table .ppt-pro a:hover{text-decoration:underline;}
.vol-table .ppt-pro .pro-chip{font-size:9px;padding:1px 5px;}

.vol-buyback{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:6px;}
.vol-row{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-2xs);color:var(--ink-soft);}
.vol-row span:last-child{color:var(--ink);font-weight:600;text-align:right;}
.vol-row a{color:var(--gold-ink);font-weight:600;}
.vol-row.ppt-pro-buyback span:last-child{color:var(--gold-ink);font-weight:700;}
[hidden]{display:none!important;}
.panel-last{margin-bottom:0;}

/* Single-column product layout: nothing to stick to. Declared here, after the
   base .offer-stack rule, so source order actually lets it win. */
@media (max-width: 980px){
  .offer-stack{position:static;}
}

/* ---- marketing opt-in ----
   Both boxes ship unchecked and stay that way unless the customer acts. A
   pre-ticked box is not consent under the TCPA, and the SMS wording is the
   disclosure that rule requires, not marketing copy to be trimmed. */
.consent-block{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);}
.consent-row{display:flex;gap:9px;align-items:flex-start;margin-top:9px;
  font-size:var(--text-xs);color:var(--ink-soft);line-height:1.5;cursor:pointer;}
.consent-row input{margin-top:2px;flex-shrink:0;}
.consent-row b{color:var(--ink);font-weight:600;}
/* Pro renewal terms, shown beside every Join button (pro.html, account.html). */
.renewal-terms{font-size:var(--text-xs);line-height:1.55;margin:0 0 6px;color:var(--ink-soft);}
.offer-card .renewal-terms,.offer-card .consent-row{color:var(--on-dark-soft);text-align:left;}
.offer-card .renewal-terms b,.offer-card .consent-row b{color:var(--on-dark);}
.offer-card .renewal-terms a,.offer-card .consent-row a{color:var(--gold-fill);text-decoration:underline;}
.pro-join-error:empty{display:none;}
.offer-card .pro-join-error{color:oklch(0.78 0.12 30);}

/* ---- Site assistant (assets/chat.js) ---- */
.e79-chat-launch{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--dark-2);background:var(--dark);color:var(--gold-fill);font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:var(--text-base);font-weight:600;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.18);}
.e79-chat-launch:hover{background:var(--dark-2);}
.e79-chat-launch:focus-visible{outline:2px solid var(--gold-fill);outline-offset:3px;}
.e79-chat{position:fixed;right:20px;bottom:76px;z-index:41;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 40px rgba(31,27,22,0.18);overflow:hidden;}
.e79-chat[hidden]{display:none;}
.e79-chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--dark);color:var(--on-dark);}
.e79-chat-head b{display:block;font-family:'Newsreader',serif;font-size:var(--text-lg);font-weight:500;}
.e79-chat-head span{display:block;margin-top:2px;font-size:var(--text-xs);color:var(--on-dark-soft);}
.e79-chat-close{background:none;border:none;color:var(--on-dark-soft);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;}
.e79-chat-close:hover{color:var(--on-dark);}
.e79-chat-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--paper-2);}
.e79-chat-msg{max-width:88%;padding:9px 12px;border-radius:8px;font-size:var(--text-sm);line-height:1.5;overflow-wrap:anywhere;}
.e79-chat-msg.user{align-self:flex-end;background:var(--dark);color:var(--on-dark);white-space:pre-wrap;}
.e79-chat-msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line);color:var(--ink);}
.e79-chat-msg.bot:empty{display:none;}
.e79-chat-msg.bot a,.e79-chat-msg.note a{color:var(--gold-ink);text-decoration:underline;}
.e79-chat-msg.note{align-self:stretch;max-width:none;background:none;color:var(--ink-soft);font-size:var(--text-xs);text-align:center;}
.e79-chat-status{align-self:flex-start;font-size:var(--text-xs);color:var(--ink-soft);}
.e79-chat-status:empty{display:none;}
.e79-chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper);}
.e79-chat-form textarea{flex:1;resize:none;max-height:120px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:var(--text-sm);line-height:1.4;background:#fff;color:var(--ink);}
.e79-chat-form textarea:focus{outline:2px solid var(--gold-fill);outline-offset:-1px;}
.e79-chat-send{padding:0 16px;border-radius:6px;border:none;background:var(--gold-fill);color:oklch(0.22 0.05 70);font-family:inherit;font-weight:600;cursor:pointer;}
.e79-chat-send:disabled{opacity:0.5;cursor:default;}
.e79-chat-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px 10px;font-size:var(--text-2xs);color:var(--ink-soft);background:var(--paper);}
.e79-chat-clear{background:none;border:none;padding:0;color:var(--ink-soft);text-decoration:underline;font-family:inherit;font-size:inherit;cursor:pointer;flex-shrink:0;}
@media (max-width:520px){
  .e79-chat{right:0;left:0;bottom:0;width:100%;height:min(82vh,560px);border-radius:10px 10px 0 0;}
  .e79-chat-launch{right:14px;bottom:14px;}
}

/* ---- contact page ----
   Classes rather than the inline grid it used to have: an inline
   grid-template-columns can't answer to a media query, so on a phone the page
   was two squeezed columns and the name/email pair never collapsed. */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:flex-start;}
.contact-pair{margin-bottom:14px;}
.contact-input{width:100%;color:var(--ink);font-family:inherit;background:#fff;}
textarea.contact-input{resize:vertical;min-height:130px;line-height:1.5;}
.contact-input:focus-visible{outline:2px solid var(--gold-ink);outline-offset:1px;}
.contact-input[aria-invalid="true"]{border-color:var(--crit);}
.contact-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
@media (max-width: 800px){.contact-grid{grid-template-columns:1fr;gap:28px;}}