/* Vektorgeist LLC Shop: the company theme. Clean light neutral base
   in the cream family, white cards, deep ink text, tan lines, and
   deep indigo and violet as the company accent colors. It differs
   from both sister themes on purpose: not the VibeSweeps companion
   theme and not the Civic Stakes WPA poster theme. The layout system
   and CSS architecture are the sisters' own; only the theme layer
   changed. */
:root{
  color-scheme:light;
  --bg:#faf6ee; --card:#ffffff; --ink:#221c33; --muted:#6f6585;
  --line:#e3dac7; --accent:#43307f; --accent-ink:#5b34c9; --accent-tint:#ede8fa;
  --radius:16px; --radius-sm:10px; --radius-pill:999px; --well:#f4efe4;
  /* 8px spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --shadow-1:0 1px 2px rgba(43,32,84,.07), 0 2px 10px rgba(43,32,84,.06);
  --shadow-2:0 6px 16px rgba(43,32,84,.10), 0 14px 38px rgba(67,48,127,.14);
  --ring:0 0 0 3px rgba(91,52,201,.30);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 560px at 12% -180px, rgba(91,52,201,.10) 0%, rgba(91,52,201,0) 70%),
    radial-gradient(900px 500px at 88% -140px, rgba(67,48,127,.08) 0%, rgba(67,48,127,0) 70%),
    var(--bg);
  color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
main,.wrap{max-width:1180px;margin:0 auto;padding:var(--s3) var(--s4) var(--s8)}
img{display:block;max-width:100%}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
::selection{background:var(--accent-tint);color:var(--accent-ink)}

/* ---------- header / footer ---------- */
/* Top bar (Flouk's redesign, 2026-11-02): one compact bar on every
   page, brand left; profile spot and hamburger right; the section
   links and the account actions live in dropdown panels, not pills.
   The slogan and tagline are the home hero's, under the bar. */
header.site{position:relative;border-bottom:1px solid var(--line);background:rgba(250,246,238,.88)}
header.site .bar{position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4)}
header.site .brand{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1;
  white-space:nowrap}
header.site .brand span{color:var(--accent)}
header.site .brand:hover{text-decoration:none}
.bar-side{display:flex;align-items:center;gap:var(--s2)}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;flex:none;
  padding:0 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;box-shadow:var(--shadow-1)}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink)}
.burger:hover{border-color:var(--accent)}
/* The one menu: a full-screen solid panel under the header bar, in
   this site's own theme (white card surface, deep indigo accent).
   Fully opaque: no page content shows through it. Order and
   treatment are the owner's ruling of 2026-11-05: the account block
   (or a Sign in row) at the top, the navigation as a grouped card of
   rounded rows with the current page a filled accent bar, and the
   account utilities (Profile settings, Admin, About, Sign out) as a
   second card at the bottom, set apart by real space. The panel
   eases in instead of snapping. */
.menu-panel{position:fixed;inset:0;z-index:70;background:var(--card);
  border-top:3px solid var(--accent);overflow-y:auto;padding-top:76px;
  animation:menu-in .28s var(--ease)}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu-in{max-width:1180px;margin:0 auto;padding:14px var(--s4) 36px}
.menu-group{display:flex;flex-direction:column;gap:2px;background:var(--well);
  border:1px solid var(--line);border-radius:var(--radius);padding:6px;box-shadow:var(--shadow-1)}
.menu-nav{margin-top:var(--s4)}
.menu-foot{margin-top:var(--s6)}
.menu-row{display:flex;align-items:center;gap:var(--s2);width:100%;box-sizing:border-box;
  padding:13px 14px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);
  font:inherit;font-size:15.5px;font-weight:500;text-align:left;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease)}
.menu-row:hover{background:var(--accent-tint);color:var(--accent-ink);text-decoration:none}
.menu-row.active{background:var(--accent);color:#fff}
.menu-row.active:hover{color:#fff}
.menu-acct{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--accent-tint);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow-1)}
.menu-acct .who{font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-acct{flex-direction:column;align-items:flex-start;gap:1px}
.menu-acct .who-email{color:var(--muted);font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.menu-signin{background:var(--accent-tint);border:1px solid var(--line);
  border-radius:var(--radius);font-weight:700;box-shadow:var(--shadow-1)}
.menu-finish{margin-top:var(--s3);background:var(--well);border:1px solid var(--line);
  border-radius:var(--radius)}
#account-bar .panel-note{padding:10px 4px 0}
.hero{text-align:center;padding:var(--s6) var(--s4) var(--s1)}
.hero-sub{color:var(--ink);font-size:17px;font-weight:600;line-height:1.5;max-width:640px;margin:var(--s3) auto 0}
header.site .slogan{margin:0 auto;font-size:clamp(18px,3vw,23px);font-weight:700;color:var(--ink);letter-spacing:-.01em}
header.site .tag{margin:var(--s2) auto 0;max-width:640px;color:var(--muted);font-size:15.5px;line-height:1.55}
.notice-row{text-align:center;padding:0 var(--s4) var(--s3)}
.notice-row .preview-note{margin-top:var(--s3)}
.preview-note{display:inline-block;margin:var(--s3) auto 0;max-width:640px;background:var(--accent-tint);
  color:var(--accent-ink);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:8px 18px;font-size:13.5px;font-weight:500;line-height:1.5}
.bar-note{max-width:1180px;margin:0 auto;padding:0 var(--s4) var(--s3);font-size:14px;color:var(--muted);line-height:1.5}
.bar-note.err{color:#ff8a75}
footer.site{text-align:center;color:var(--muted);font-size:13px;padding:var(--s6) var(--s4) var(--s7);line-height:1.6;
  margin-top:var(--s7);border-top:1px solid var(--line)}
footer.site .colophon-line{font-size:11.5px;font-variant:small-caps;letter-spacing:.16em;color:var(--muted);margin-bottom:2px}

/* ---------- sections ---------- */
h1.page{margin:var(--s2) 0 var(--s1);font-size:clamp(26px,4.4vw,36px);font-weight:800;letter-spacing:-.02em;text-align:center}
h2.section{font-size:clamp(20px,2.6vw,24px);font-weight:700;letter-spacing:-.01em;margin:var(--s7) 0 var(--s1)}
.lede{text-align:center;color:var(--muted);font-size:17px;line-height:1.55;max-width:680px;margin:var(--s3) auto 0}
.section-sub{color:var(--muted);font-size:15px;line-height:1.55;margin:var(--s1) 0 0;max-width:720px}
.countline{text-align:center;color:var(--muted);font-size:14px;margin:var(--s3) 0 var(--s1)}

/* ---------- cards (picker-site pattern) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--s4);margin-top:var(--s3)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  text-align:left;padding:0;font:inherit;color:inherit;width:100%;box-shadow:var(--shadow-1)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#57448f}
.card .thumb{display:block;position:relative;aspect-ratio:1/1;background:var(--well)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.card:hover .thumb img{transform:scale(1.04)}
.card .num{position:absolute;top:var(--s2);left:var(--s2);background:rgba(30,25,20,.78);color:#fff;font-size:12px;
  padding:2px 8px;border-radius:var(--radius-pill);font-weight:600;backdrop-filter:blur(3px)}
.card .meta{display:block;padding:10px 12px 12px}
.card .name{display:block;font-weight:700;font-size:16px}
.card .species{color:var(--muted);font-size:13px;margin-top:1px}
.card .type{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s2);font-size:12px;font-weight:600;
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 9px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.card .priceline{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);
  margin-top:9px;padding-top:var(--s2);font-size:13px}
.card .priceline .free{color:var(--accent-ink);font-weight:700}
.card .priceline .price{font-weight:600}

/* ---------- buttons ---------- */
/* Button readability (owner's ruling, rendered pass 2026-11-05):
   no button on the site may pair light text with a light fill.
   Primary actions take a dark indigo fill with white text.
   Secondary actions may keep a light fill only with dark ink text
   and a defined border (the theme's hover violet #57448f, dark
   enough to read as an edge against the cream ground). The audit
   covered .btn and its variants, .btn-plain, .chip, the quantity
   steppers, and the modal and sheet close buttons. */
.btn{display:inline-block;background:#38256e;color:#fff;text-decoration:none;font-weight:600;
  padding:12px 22px;border-radius:var(--radius-pill);font-size:15px;border:1px solid #38256e;cursor:pointer;
  font:inherit;line-height:1.1;opacity:1;box-shadow:0 4px 18px rgba(67,48,127,.40);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease), background .15s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);text-decoration:none;background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn:active{transform:translateY(0)}
.btn.alt{background:var(--card);color:var(--ink);border:1px solid #57448f;font-weight:600;box-shadow:var(--shadow-1)}
.btn.alt:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.soon{background:var(--well);color:var(--accent);border:1px solid #57448f;cursor:default;box-shadow:none}
.btn.soon:hover{transform:none;box-shadow:none}
.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* ---------- filters (shop) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin:var(--s4) 0 var(--s1)}
.filters input[type="search"],.filters select{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:var(--radius-pill);padding:9px 16px;font-size:14px;font:inherit;box-shadow:var(--shadow-1);transition:border-color .15s var(--ease)}
.filters input[type="search"]{min-width:220px}
.filters input[type="search"]:focus,.filters select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* ---------- detail overlay ---------- */
.overlay{display:none;position:fixed;inset:0;background:rgba(8,5,16,.62);z-index:50;
  padding:var(--s5) var(--s3);overflow:auto;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.overlay.open{display:block;animation:overlay-in .2s var(--ease)}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
.sheetbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2);
  max-width:980px;margin:0 auto;padding:var(--s5);position:relative;animation:sheet-in .24s var(--ease)}
@keyframes sheet-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheetbox .close{position:absolute;top:10px;right:12px;border:1px solid #57448f;background:var(--card);
  border-radius:var(--radius-pill);width:36px;height:36px;font-size:18px;cursor:pointer;color:var(--ink);line-height:1;
  transition:border-color .15s var(--ease), color .15s var(--ease)}
.sheetbox .close:hover{border-color:var(--accent);color:var(--accent-ink)}
.sheetbox .cols{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:var(--s5)}
@media (max-width:820px){.sheetbox .cols{grid-template-columns:1fr}}
.sheetbox .cols>div>img{border-radius:12px;background:var(--well)}
.sheetbox h2{margin:2px 0 2px;font-size:clamp(24px,3.4vw,28px);font-weight:800;letter-spacing:-.02em}
.sheetbox .sub{color:var(--muted);font-size:15px}
table.attrs{border-collapse:collapse;margin-top:var(--s3);width:100%;max-width:520px}
table.attrs td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
table.attrs td.k{color:var(--muted);width:130px}
.sheetbox .line{font-size:16px;margin:var(--s3) 0 2px;line-height:1.5}
.sheetbox .voice{color:var(--accent-ink);font-weight:600;margin:var(--s4) 0 4px}
.sheetbox .best{color:var(--muted);font-size:14px;margin:0 0 var(--s2)}
.persona-locked{color:var(--muted);font-size:14px;background:var(--accent-tint);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-top:var(--s3)}
.detail-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s4)}

/* ---------- about ---------- */
.prose{max-width:720px;line-height:1.7;font-size:16px}
.prose p{margin:0 0 var(--s4)}

/* ---------- account: menu account block + account-page forms ---------- */
/* The account block sits at the top of the site menu (app.js header
   markup, filled by account.js): Sign in / Sign up link rows signed
   out, the account rows signed in. The sign-in, sign-up, and 2FA
   forms live on the account page in a .form-card, never in the menu. */
#account-bar{display:block}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-2);padding:var(--s2)}
.form-card .fld{display:block;padding:6px 12px}
.form-card .fld span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:4px}
.form-card input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:14px;font:inherit;background:var(--bg);color:var(--ink)}
.form-card input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.form-card select{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:14px;font:inherit;background:var(--bg);color:var(--ink)}
.form-card select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.form-card .chk{display:flex;gap:8px;align-items:flex-start;padding:6px 12px;font-size:13.5px;line-height:1.45;font-weight:400}
/* Keep a linked phrase in a checkbox label on one line, so a label
   like the create-account terms sentence cannot break inside the
   link and strand its period at the start of the next line
   (rendered pass, 2026-11-05). */
.form-card .chk a{white-space:nowrap}
.form-card .chk input{width:auto;flex:none;margin-top:2px}
.panel-actions{display:flex;gap:var(--s2);padding:var(--s2) 12px}
.panel-note{padding:8px 12px;color:var(--muted);font-size:13.5px;line-height:1.5;margin:0}
.panel-err{padding:8px 12px;color:#ff8a75;font-size:13.5px;line-height:1.5;margin:0}
.otp-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:var(--s2) 12px}
.otp-row input{letter-spacing:.3em;font-weight:600;text-align:center;max-width:150px;width:auto}
.dl-row{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover,.btn:hover{transform:none}
  .card:hover .thumb img{transform:none}
}

/* ===== polish layer 2 (2026-11-01): depth reveal, glass, grain, refraction =====
   Reveal + grain are gated on 'html.motion', which polish.js adds only when
   motion is allowed (not reduced-motion). No-JS / reduced-motion = fully visible,
   static, and clean. Everything here is transform/opacity (GPU) only. */
html.motion .reveal{opacity:0;transform:perspective(1000px) translate3d(0,26px,0) rotateX(5deg);
  transform-origin:50% 120%;transition:opacity .6s var(--ease), transform .72s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
html.motion .reveal.in{opacity:1;transform:perspective(1000px) translate3d(0,0,0) rotateX(0)}

/* Film grain, static, decorative, never blocks input, sits under modals */
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:160px 160px}

/* Glass, the header bar only. The menu is NOT glass: it is a solid
   full-screen panel (see .menu-panel above), so nothing shows
   through it (owner, 2026-11-04). CAUTION (2026-11-05, AUDIT §74):
   this backdrop-filter makes the header the containing block for
   fixed-position descendants, so no position:fixed element may ever
   live inside header.site, that is what trapped the menu panel in
   the header's box and hid the open menu. The panel is a sibling of
   the header in the markup (app.js mount()). */
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  header.site{background:rgba(250,246,238,.80);-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25)}
}

/* Refraction, a light sweep across a card on hover */
.card{position:relative;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 46%,transparent 60%);
  transform:translateX(-130%);opacity:0;transition:transform .75s var(--ease), opacity .3s var(--ease);mix-blend-mode:screen}
.card:hover::after{transform:translateX(130%);opacity:1}

/* GPU hint for the magnet targets */
.btn{will-change:transform}

/* Owner console (admin.html) */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin:var(--s4) 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s3)}
.stat-n{font-size:22px;font-weight:700}
.stat-l{color:var(--muted);font-size:13px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s2) 0 var(--s4)}
.pill{padding:4px 10px;border-radius:var(--radius-pill);background:var(--well);font-size:13px}
table.admin{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:var(--s4)}
table.admin td,table.admin th{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
table.admin th{color:var(--muted);font-weight:500}

/* Owner console: the manual ban form (Arachne completion, 2026-11-02). */
.ban-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 18px}
.ban-form input{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.ban-form input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.ban-form #ban-ip{width:170px}
.ban-form #ban-reason{flex:1;min-width:180px}

/* Account page: settings rows. */
.setrows{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.setrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 16px;border-top:1px solid var(--line)}
.setrow:first-child{border-top:none}
.setrow>label:first-child{flex:0 0 170px;font-weight:600}
.setrow input[type="text"],.setrow input[type="email"],.setrow input[type="password"],.setrow input[type="date"]{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
.setrow input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.setrow .note{flex-basis:100%;color:var(--muted);font-size:13px}
.setrow .chk{display:flex;gap:8px;align-items:center;font-weight:400}
.setrows.danger{border-color:#7a2e3a}
.btn.danger{background:#a33327;border-color:#a33327;color:#fff}
.sess{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:6px 0}
#sess-list{display:flex;flex-direction:column;gap:4px;flex:1}

/* ---------- company brand lockup ---------- */
/* Strong simple wordmark: the company name in deep ink, with SHOP
   set under it in letterspaced violet capitals. */
header.site .brand{display:inline-flex;align-items:center;gap:9px}
header.site .brand .brand-lockup{display:inline-flex;flex-direction:column;line-height:1.08}
header.site .brand .brand-name{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
header.site .brand .brand-shop{font-size:10.5px;font-weight:800;letter-spacing:.34em;color:var(--accent-ink);margin-top:1px}
header.site{z-index:80}

/* ---------- scroll progress + reveals (motion.js) ---------- */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink));transform-origin:0 50%;transform:scaleX(0)}
.reveal-io{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-io.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal-io{opacity:1;transform:none;transition:none}}

/* ---------- home: company hero ---------- */
.company-hero{text-align:center;padding:var(--s7) var(--s4) var(--s2);max-width:820px;margin:0 auto}
.hero-eyebrow{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.24em;color:var(--accent-ink)}
.company-hero h1{margin:var(--s3) 0 0;font-size:clamp(30px,5.4vw,50px);font-weight:800;letter-spacing:-.02em;line-height:1.12}
.hero-sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin:var(--s4) auto 0}
.btn.pill{border-radius:999px;padding:14px 34px;font-size:16.5px}
.hero-cta{margin:var(--s5) 0 0}
/* The hero call to action sits on the pale cream hero ground, where
   the shared .btn treatment rendered too light to read at a glance
   (rendered pass, 2026-11-05). In the hero it carries the full deep
   indigo fill at full strength: white on deep indigo, with the
   deeper violet on hover. Scoped to the hero so every other button
   on the site keeps the shared treatment. */
.company-hero .btn{background:#38256e;border-color:#38256e;color:#fff;opacity:1;
  box-shadow:0 6px 22px rgba(67,48,127,.35)}
.company-hero .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}

/* ---------- home: goods highlights strip ---------- */
.goods-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s4);margin-top:var(--s4)}
.strip-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-1);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.strip-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--accent);text-decoration:none}
.strip-thumb{aspect-ratio:4/3;background:var(--well);overflow:hidden;display:block}
.strip-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.strip-name{font-weight:700;font-size:15px;line-height:1.3;padding:12px 14px 2px}
.strip-price{font-weight:700;font-size:15px;color:var(--accent-ink);padding:0 14px 14px}

/* ---------- home: the shop banner ---------- */
.shop-banner{display:block;margin-top:var(--s6);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);text-decoration:none;color:var(--ink);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.shop-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--accent);text-decoration:none}
.shop-banner-copy{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:20px 22px;flex-wrap:wrap}
.shop-banner-title{font-size:26px;font-weight:800;letter-spacing:-.01em}
.shop-banner-line{font-size:15.5px;font-weight:600;color:var(--accent-ink);max-width:560px}

/* ---------- home: the two sweepstakes presentations ---------- */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
@media (max-width:820px){.promo-grid{grid-template-columns:1fr}}
.promo-card{background:linear-gradient(180deg,var(--accent-tint),var(--card) 130px),var(--card);
  border:1px solid var(--accent);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow-1)}
.promo-card h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.01em}
.promo-card p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:var(--s3) 0 0}
.promo-card p:last-child{margin-top:var(--s4)}