/* Pakstoor :: login-howcard.css :: v1.0-000012 :: 2026-10-21 */
/*
  Copyright © 2026 Pakstoor (Pty) Ltd. All rights reserved.
  Login right column: a compact "how it works" card (owner 2026-10-10:
  "make it look more like a shopping app ... its own little area").
  Replaces the 7-step text ladder. One delivery truck drives from shop to
  home once on load, then rests. Layout/position of the column itself is
  untouched (login.css + login-refine.css). Remove this file + the
  <aside class="pks-howcard"> block in login.html to undo.
*/

/* ---- layout (both themes) -------------------------------------------- */
html body.auth-page-login .auth-trust-ladder.pks-howcard { max-width: 340px; }
@media (min-width: 1360px) {
  html body.auth-page-login .auth-trust-ladder.pks-howcard { padding-top: 6px !important; }
}
.pks-howcard .hc-card {
  border-radius: 16px;
  padding: 20px 20px 18px;
  border: 1px solid transparent;
}
.pks-howcard .hc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font: 600 12px/1.3 var(--font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.02em;
}
.pks-howcard .hc-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pks-howcard .hc-title {
  margin: 0 0 10px;
  font: 700 17px/1.3 var(--font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: -0.01em;
}

/* money strip (owner 2026-10-11: no second truck on /login, the tour card below already has the van): the buyer's
   card pays a coin into the locked escrow shield, the shield pulses, then a coin moves on into the seller's wallet */
.pks-howcard .hc-road { display: block; width: 100%; height: auto; max-height: 56px; margin: 4px 0 16px; overflow: visible; }
.pks-howcard .hc-road-done { stroke-dasharray: 100; stroke-dashoffset: 100; animation: hc-trail 2.8s cubic-bezier(0.45, 0.05, 0.25, 1) 0.8s forwards; }
.pks-howcard .hc-coin-a { opacity: 0; animation: hc-coin-a 1.25s cubic-bezier(0.45, 0.05, 0.25, 1) 0.8s both; }
.pks-howcard .hc-coin-b { animation: hc-coin-b 1.5s cubic-bezier(0.45, 0.05, 0.25, 1) 2.3s both; }
.pks-howcard .hc-shield { transform-box: fill-box; transform-origin: 50% 50%; animation: hc-hold .5s ease-out 1.95s both; }
@keyframes hc-trail { to { stroke-dashoffset: 0; } }
@keyframes hc-coin-a { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 82% { opacity: 1; transform: translateX(56px); } 100% { opacity: 0; transform: translateX(62px) scale(.6); } }
@keyframes hc-coin-b { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 75% { transform: translateX(62px); } 100% { opacity: 1; transform: translate(78px, -11px); } }
@keyframes hc-hold { 0% { transform: none; } 45% { transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pks-howcard .hc-coin-a { animation: none; opacity: 0; }
  .pks-howcard .hc-coin-b { animation: none; opacity: 1; transform: translate(78px, -11px); }
  .pks-howcard .hc-shield { animation: none; }
  .pks-howcard .hc-road-done { animation: none; stroke-dashoffset: 0; }
}

/* steps */
.pks-howcard .hc-steps { list-style: none; margin: 0; padding: 0; }
.pks-howcard .hc-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 0 0 12px;
}
.pks-howcard .hc-step:last-child { padding-bottom: 0; }
.pks-howcard .hc-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 16.5px;
  top: 34px;
  bottom: 0;
  width: 1px;
}
.pks-howcard .hc-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
}
.pks-howcard .hc-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pks-howcard .hc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pks-howcard .hc-text strong { font: 600 14px/1.3 var(--font-sans, 'Inter', system-ui, sans-serif); }
.pks-howcard .hc-text span { font: 400 12.5px/1.35 var(--font-sans, 'Inter', system-ui, sans-serif); }

/* ---- light ------------------------------------------------------------ */
html[data-theme="light"] .pks-howcard .hc-card {
  background: #FFFFFF;
  border-color: #ECE8E2;
  box-shadow: 0 1px 2px rgba(30, 27, 24, 0.04), 0 14px 32px -22px rgba(30, 27, 24, 0.22);
}
html[data-theme="light"] .pks-howcard .hc-eyebrow { color: #8A6410; }
html[data-theme="light"] .pks-howcard .hc-dot { background: #D9A625; }
html[data-theme="light"] .pks-howcard .hc-title { color: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-road-end { stroke: #B3ADA5; }
html[data-theme="light"] .pks-howcard .hc-road-line { stroke: #DCD7CF; }
html[data-theme="light"] .pks-howcard .hc-road-done { stroke: #D9A625; }
html[data-theme="light"] .pks-howcard .hc-obj { fill: #FFFFFF; stroke: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-stripe { stroke: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-chip { fill: #D9A625; }
html[data-theme="light"] .pks-howcard .hc-clasp { fill: #D9A625; }
html[data-theme="light"] .pks-howcard .hc-shield-body { fill: #D9A625; stroke: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-lock { fill: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-lock-hoop { stroke: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-keyhole { fill: #D9A625; }
html[data-theme="light"] .pks-howcard .hc-coin circle { fill: #F2C94C; stroke: #8A6410; }
html[data-theme="light"] .pks-howcard .hc-coin path { stroke: #8A6410; }
html[data-theme="light"] .pks-howcard .hc-step:not(:last-child)::before { background: #ECE8E2; }
html[data-theme="light"] .pks-howcard .hc-icon { background: #F7F6F3; border-color: #ECE8E2; color: #8A6410; }
html[data-theme="light"] .pks-howcard .hc-text strong { color: #1E1B18; }
html[data-theme="light"] .pks-howcard .hc-text span { color: #67615A; }

/* ---- dark ------------------------------------------------------------- */
html:not([data-theme="light"]) .pks-howcard .hc-card {
  background: #221F1C;
  border-color: #34302C;
  box-shadow: none;
}
html:not([data-theme="light"]) .pks-howcard .hc-eyebrow { color: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-dot { background: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-title { color: #F1EFED; }
html:not([data-theme="light"]) .pks-howcard .hc-road-end { stroke: #7A736C; }
html:not([data-theme="light"]) .pks-howcard .hc-road-line { stroke: #403B36; }
html:not([data-theme="light"]) .pks-howcard .hc-road-done { stroke: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-obj { fill: #2A2622; stroke: #F1EFED; }
html:not([data-theme="light"]) .pks-howcard .hc-stripe { stroke: #F1EFED; }
html:not([data-theme="light"]) .pks-howcard .hc-chip { fill: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-clasp { fill: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-shield-body { fill: #D9A625; stroke: #F1EFED; }
html:not([data-theme="light"]) .pks-howcard .hc-lock { fill: #1E1B18; }
html:not([data-theme="light"]) .pks-howcard .hc-lock-hoop { stroke: #1E1B18; }
html:not([data-theme="light"]) .pks-howcard .hc-keyhole { fill: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-coin circle { fill: #F2C94C; stroke: #E7BE52; }
html:not([data-theme="light"]) .pks-howcard .hc-coin path { stroke: #8A6410; }
html:not([data-theme="light"]) .pks-howcard .hc-step:not(:last-child)::before { background: #34302C; }
html:not([data-theme="light"]) .pks-howcard .hc-icon { background: #2c2824; border-color: #403B36; color: #D9A625; }
html:not([data-theme="light"]) .pks-howcard .hc-text strong { color: #F1EFED; }
html:not([data-theme="light"]) .pks-howcard .hc-text span { color: #B4AEA8; }

/* ---- left panel art (owner 2026-10-10/11: replace the turning ball with a marketplace image; then "bigger, no
   wasted space, bigger process text") ----
   images/login-market-art.svg is WIDE (1.6:1) and sits in the old ball box. Width = 1.6 x the old square width
   (login-refine.css), so the height stays the old height and nothing below moves; capped at the box width.
   Stronger selector than the login-refine.css .brand-hex-canvas rules. The art carries its own shadows. */
/* --h0 = the old square size. When the box is narrower than 1.6 x h0 the art is capped at the box width and comes
   out shorter, so the vertical padding gives back exactly the missing height (box height stays h0). */
html[data-theme] body.auth-page-login img.brand-market-art.brand-hex-canvas {
  --h0: clamp(220px, 70%, 330px);
  display: block;
  box-sizing: content-box;
  width: min(100%, calc(1.6 * var(--h0))) !important;
  max-width: none;
  height: auto !important;
  aspect-ratio: 1.6 / 1;
  padding-block: max(0px, calc((var(--h0) - 100% / 1.6) / 2));
  object-fit: contain;
  filter: none !important;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 1600px) and (min-height: 960px) {
  html[data-theme] body.auth-page-login img.brand-market-art.brand-hex-canvas { --h0: clamp(300px, 72%, 380px); }
}
@media (max-width: 980px) {
  html[data-theme] body.auth-page-login img.brand-market-art.brand-hex-canvas { --h0: clamp(170px, 46vw, 240px); }
}

/* ---- flat logo, top-left of the brand panel (owner 2026-10-11: "redo the logo ... not shiny", then "that is more
   like I want it" with the owner's own flat artwork LOGO1.png) ----
   (2026-10-21: now the Brand Pack v1.0 logo files) in the old logo box (class brand-logo-img, 64px tall): the original emblem
   flattened (faceted silver frame, dark centre, two-tone gold P, black keylines, flat gold wordmark).
   No glint sweep, no drop shadow. The panel is dark in both themes. */
html body.auth-page-login .brand-logo-flat {
  display: block;
  height: 64px;
  width: auto;
  filter: none !important;
}
html body.auth-page-login .brand-logo::after { display: none !important; }  /* the shiny glint sweep */

/* ---- site sweep 2026-10-11 --------------------------------------------------------------------------------
   1. Laptop heights (1280x720, 1366x768, even 1440x900): the sign-up step 2 Continue button sat below the fold and
      nothing scrolled (the page is locked to the viewport and the form column did not scroll). The form column
      now scrolls on its own; the brand panel stays put. Both themes. */
@media (min-width: 981px) {
  html body.auth-page-login .auth-form-wrap {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
/* 2. Small grey text that failed contrast on white (inactive tab, "or", footer, password hint) */
html[data-theme="light"] body.auth-page-login #authWrap .auth-tab:not(.is-active),
html[data-theme="light"] body.auth-page-login #loginForm .auth-divider span,
html[data-theme="light"] body.auth-page-login .auth-footer .auth-copyright,
html[data-theme="light"] body.auth-page-login .auth-footer .auth-footer-links a,
html[data-theme="light"] body.auth-page-login #signupForm .password-hint { color: #6B655E !important; }
/* the Terms + Privacy links users agree to */
html[data-theme="light"] body.auth-page-login #signupForm .form-options label.checkbox a { color: #8A6410 !important; text-decoration: underline; text-underline-offset: 2px; }
/* helper sentences in the site font, not the code font */
html body.auth-page-login #signupForm .phone-help,
html body.auth-page-login #signupPhoneHelp,
html body.auth-page-login #signupDobHelp { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; letter-spacing: 0 !important; font-size: 12.5px !important; }
/* phone Back button: white, rounded, sentence case */
html[data-theme="light"] body.auth-page-login .auth-form-header a.auth-back { background: #FFFFFF !important; border: 1px solid #DCD8D2 !important; color: #1E1B18 !important; border-radius: 12px !important; }
html body.auth-page-login .auth-form-header a.auth-back,
html body.auth-page-login .auth-form-header a.auth-back span { text-transform: none !important; letter-spacing: 0 !important; }
/* the faint looping gold glow behind the page */
html[data-theme="light"] body.auth-page-login::before { animation: none !important; background: none !important; }
/* 3. "Open in your real browser" (Instagram / Facebook in-app browsers): the light popup */
html[data-theme="light"] #pksInappModal { background: rgba(30, 27, 24, 0.35) !important; }
html[data-theme="light"] #pksInappModal > div { background: #FFFFFF !important; color: #1E1B18 !important; border-color: #E6E3DE !important; border-radius: 16px !important; box-shadow: 0 24px 60px -24px rgba(20, 18, 15, 0.35) !important; }
html[data-theme="light"] #pksInappTitle { font-family: Inter, system-ui, sans-serif !important; font-weight: 700 !important; color: #1E1B18 !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-theme="light"] #pksInappBody { color: #4A453F !important; }
html[data-theme="light"] #pksInappModal > div > button:first-of-type { background: linear-gradient(180deg, #E3B43A, #D8A425) !important; color: #1E1B18 !important; border-radius: 12px !important; font-family: Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
html[data-theme="light"] #pksInappManual { border-top-color: #ECE9E4 !important; color: #6B655E !important; }
html[data-theme="light"] #pksInappManual strong { color: #1E1B18 !important; }
html[data-theme="light"] #pksInappModal > div > button:last-of-type:not(:first-of-type) { color: #6B655E !important; }
/* cookie banner on /login */
html[data-theme="light"] #pks-cookie-banner .pks-cookie-btn-secondary { background: #FFFFFF !important; border: 1px solid #DCD8D2 !important; color: #1E1B18 !important; border-radius: 12px !important; }
html[data-theme="light"] #pks-cookie-banner .pks-cookie-btn-primary { background: linear-gradient(180deg, #E3B43A, #D8A425) !important; color: #1E1B18 !important; border-radius: 12px !important; }
html[data-theme="light"] #pks-cookie-banner .pks-cookie-body strong::before { content: "Cookie consent · POPIA-aligned" !important; color: #8A6410 !important; letter-spacing: 0 !important; }

/* ===== NO NAVY IN DARK MODE (2026-10-11): /login does not load pks-fresh.css, so the warm dark tokens and
   the login banner (pks-login-banner.css is shared with admin) are set here. */
html:not([data-theme="light"]) {
  --bg: #1B1815;
  --bg-1: #221F1C;
  --bg-2: #2c2824;
  --bg-3: #34302C;
  --bg-4: #433E39;
  --ink: #F1EFED;
  --ink-muted: #B4AEA8;
  --ink-dim: #99928B;
  --ink-faint: #7A736C;
  --line: #34302C;
  --line-2: #403B36;
  --line-bright: #56504A;
  --gold-ink: #1B1815;
  --steel: #C2BDB8;
  --steel-dim: #89827B;
  --steel-deep: #635D57;
  --steel-wash: rgba(194,189,184,.06);
}
html:not([data-theme="light"]) body { background-image:radial-gradient(1200px 600px at 80% -160px,rgba(217,166,37,.035),transparent 60%),radial-gradient(900px 500px at -120px 520px,rgba(194,189,184,.02),transparent 60%); }
html:not([data-theme="light"]) .pks-cookie-banner { background:radial-gradient(360px 160px at 100% 0%,rgba(217,166,37,.1),transparent 70%),radial-gradient(420px 220px at 0% 100%,rgba(159,199,232,.05),transparent 70%),linear-gradient(180deg,#1b1815f0,#13110ff5)!important; }
html:not([data-theme="light"]) .pks-cookie-btn-primary { color:#1b1815!important; }
/* login banner */
html:not([data-theme="light"]) .pks-lb { background:
    radial-gradient(90% 160% at 50% 0%, rgba(217, 166, 37, .16) 0%, rgba(217, 166, 37, 0) 60%),
    linear-gradient(180deg, #181512 0%, #110F0D 100%); color: #F1EFED; }
html:not([data-theme="light"]) .pks-lb::before { background: radial-gradient(circle at 0 100%, transparent 21px, #181512 22px); }
html:not([data-theme="light"]) .pks-lb::after { background: radial-gradient(circle at 100% 100%, transparent 21px, #181512 22px); }
html:not([data-theme="light"]) .pks-lb-title { color: #F8F6F4; }
html:not([data-theme="light"]) .pks-lb-perk-icon { color: #161412; }
html:not([data-theme="light"]) .pks-lb-perk-text { color: #F1EFED; }
html:not([data-theme="light"]) .pks-lb-cta { color: #161412; }
html:not([data-theme="light"]) .pks-lb-note { color: #48433E; color: #C5C0BB; }
@media (max-width: 600px) { html:not([data-theme="light"]) .pks-lb::before { background: radial-gradient(circle at 0 100%, transparent 15px, #181512 16px); } }
@media (max-width: 600px) { html:not([data-theme="light"]) .pks-lb::after { background: radial-gradient(circle at 100% 100%, transparent 15px, #181512 16px); } }

/* ===== PRE-LAUNCH WELCOME POPUP (owner 2026-10-11; Brand Pack v1.0 orange emblem 2026-10-21): the emblem replaces the shield glyph
   (Downloads\1\Logos LOGO3 = dark, LOGO4 = light) and the card follows the theme: light store look in light mode,
   warm dark card in dark mode. The popup is built by login.js showPrelaunchWelcome(); its base styles are in login.css. */
.pks-prelaunch-glyph {
  width: 112px; height: 112px; margin: 0 auto 20px;
  border: 0; border-radius: 0; box-shadow: none;
  background: url("/images/pakstoor-emblem-brand.png?v=v1.0-000001") center / contain no-repeat;
}
.pks-prelaunch-glyph svg { display: none; }
.pks-prelaunch-thanks { color: #D2CDC8; }
@media (max-width: 560px) { .pks-prelaunch-glyph { width: 92px; height: 92px; margin-bottom: 16px; } }

html[data-theme="light"] .pks-prelaunch-overlay { background: rgba(30, 27, 24, 0.38); }
html[data-theme="light"] .pks-prelaunch-card {
  color: #1E1B18;
  background: #FFFFFF;
  border-color: #E6E3DE;
  box-shadow: 0 24px 64px -20px rgba(30, 27, 24, 0.28), 0 2px 6px rgba(30, 27, 24, 0.06);
}
html[data-theme="light"] .pks-prelaunch-card::before { background: linear-gradient(90deg, transparent, rgba(244, 122, 32, 0.7), transparent); }
html[data-theme="light"] .pks-prelaunch-close { color: #6B655E; }
html[data-theme="light"] .pks-prelaunch-close:hover { color: #1E1B18; background: #F4F3F1; border-color: #E6E3DE; }
html[data-theme="light"] .pks-prelaunch-eyebrow { color: #B5520F; }
html[data-theme="light"] .pks-prelaunch-title { color: #1E1B18; }
html[data-theme="light"] .pks-prelaunch-lead { color: #1E1B18; }
html[data-theme="light"] .pks-prelaunch-body,
html[data-theme="light"] .pks-prelaunch-thanks { color: #4A453F; }
html[data-theme="light"] .pks-prelaunch-slogan { color: #1E1B18; }
html[data-theme="light"] .pks-prelaunch-slogan .gold { color: #B5520F; }
html[data-theme="light"] .pks-prelaunch-btn { color: #141414; background: #F47A20; border-color: #F47A20; }
html[data-theme="light"] .pks-prelaunch-btn:hover { background: #FF8A3D; border-color: #FF8A3D; }

/* ===== "SEE HOW IT WORKS" CARD (owner 2026-10-11): fills the empty space under the how-we-protect card with a
   clickable picture that goes to /how-it-works (public page, no sign-in needed). It slides in, glows gold and
   a little hand taps it for a few seconds after load, then it rests. The picture itself is pks-art.css. */
.pks-hiw-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 10px;
  margin-top: 14px;
  padding: 12px 16px 14px;
  border-radius: 16px;
  border: 1.5px solid #D9A625;
  text-decoration: none !important;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pks-hiw-promo .hp-art { grid-column: 1 / -1; display: block; margin: 0 -4px 8px; }
.pks-hiw-promo .hp-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pks-hiw-promo .hp-eyebrow { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--font-sans, 'Inter', system-ui, sans-serif); }
.pks-hiw-promo .hp-new { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 800 10.5px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif); letter-spacing: .04em; text-transform: uppercase; background: #D9A625; color: #1E1B18; }
.pks-hiw-promo .hp-title { font: 800 18px/1.25 var(--font-sans, 'Inter', system-ui, sans-serif); letter-spacing: -0.015em; }
.pks-hiw-promo .hp-sub { font: 400 12.5px/1.4 var(--font-sans, 'Inter', system-ui, sans-serif); }
.pks-hiw-promo .hp-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #D9A625; color: #1E1B18; transition: transform .2s ease; }
.pks-hiw-promo .hp-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pks-hiw-promo .hp-tap { position: absolute; right: 22px; bottom: 6px; width: 34px; height: 34px; pointer-events: none; opacity: 0; z-index: 2; }
.pks-hiw-promo .hp-tap svg { width: 100%; height: 100%; }
.pks-hiw-promo:hover, .pks-hiw-promo:focus-visible { transform: translateY(-2px); }
.pks-hiw-promo:hover .hp-go, .pks-hiw-promo:focus-visible .hp-go { transform: translateX(3px); }
.pks-hiw-promo:focus-visible { outline: 3px solid rgba(217, 166, 37, .55); outline-offset: 3px; }
/* gold shine that sweeps across */
.pks-hiw-promo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 170, .55) 50%, transparent 65%);
  transform: translateX(-120%);
}

/* light */
html[data-theme="light"] .pks-hiw-promo { background: #FFFFFF; box-shadow: 0 1px 2px rgba(30, 27, 24, .05), 0 16px 34px -20px rgba(138, 100, 16, .45); }
html[data-theme="light"] .pks-hiw-promo .hp-eyebrow { color: #8A6410; }
html[data-theme="light"] .pks-hiw-promo .hp-title { color: #1E1B18; }
html[data-theme="light"] .pks-hiw-promo .hp-sub { color: #67615A; }
html[data-theme="light"] .pks-hiw-promo:hover { box-shadow: 0 2px 4px rgba(30, 27, 24, .06), 0 22px 40px -18px rgba(138, 100, 16, .55); }
/* dark */
html:not([data-theme="light"]) .pks-hiw-promo { background: #221F1C; box-shadow: 0 18px 36px -22px rgba(217, 166, 37, .45); }
html:not([data-theme="light"]) .pks-hiw-promo .hp-eyebrow { color: #E7BE52; }
html:not([data-theme="light"]) .pks-hiw-promo .hp-title { color: #F8F6F4; }
html:not([data-theme="light"]) .pks-hiw-promo .hp-sub { color: #B4AEA8; }
html:not([data-theme="light"]) .pks-hiw-promo::before { background: linear-gradient(105deg, transparent 35%, rgba(255, 220, 120, .22) 50%, transparent 65%); }

/* attention burst after load: in at 1.1s, 3 gold glow pulses, 2 shine sweeps, the hand taps 4 times, then rest */
@keyframes hp-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hp-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 166, 37, 0); } 40% { box-shadow: 0 0 0 7px rgba(217, 166, 37, .28), 0 0 26px 4px rgba(217, 166, 37, .35); } }
@keyframes hp-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes hp-tap { 0% { opacity: 0; transform: translate(14px, 14px) scale(1); } 10% { opacity: 1; transform: none; } 22% { transform: scale(.82); } 32% { transform: none; } 44% { transform: scale(.82); } 54% { transform: none; } 66% { transform: scale(.82); } 76% { transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(10px, 10px); } }
@keyframes hp-go { 0%, 100% { transform: none; } 50% { transform: translateX(4px) scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  .pks-hiw-promo { animation: hp-in .7s cubic-bezier(.2, .8, .2, 1) 1.1s backwards, hp-glow 1.5s ease-in-out 1.9s 3; }
  .pks-hiw-promo::before { animation: hp-shine 2.2s ease-in-out 2.2s 2; }
  .pks-hiw-promo .hp-tap { animation: hp-tap 3.6s ease-in-out 2.6s both; }
  .pks-hiw-promo .hp-go { animation: hp-go .9s ease-in-out 2.4s 4; }
  .pks-hiw-promo .pa.is-in .pa-trail { animation-delay: 1.6s; }
  .pks-hiw-promo .pa.is-in .pa-drive { animation-delay: 1.7s; }
  .pks-hiw-promo .pa.is-in .pa-pop { animation-delay: 3.6s; }
  .pks-hiw-promo .pa.is-in .pa-spark { animation-delay: 1.8s; }
}

/* short laptop screens: the words and the arrow only, so it never runs under the footer */
@media (min-width: 1360px) and (max-height: 840px) {
  .pks-hiw-promo .hp-art { display: none; }
  .pks-hiw-promo { padding: 12px 14px 12px 16px; }
}
@media (min-width: 1360px) and (max-height: 745px) {
  .pks-hiw-promo { display: none; }
}

/* 2026-10-12: below ~1300px wide the form column overflowed UPWARDS (centred inside a scroll box) and the email /
   password fields sat above the top edge where nobody could scroll to them. "safe center" centres when it fits and
   starts at the top when it does not. */
@media (min-width: 981px) {
  html body.auth-page-login .auth-form-wrap { justify-content: safe center !important; }
}

/* 2026-10-12: "No spam, ever." promise on the log in + sign up forms (owner: tell people we don't share their details
   or send marketing email). Quiet note, gold mail icon; light + dark. */
.auth-page-login .pks-nospam{display:flex;gap:10px;align-items:flex-start;margin:14px 0 14px;padding:10px 12px;border:1px solid var(--line,rgba(127,127,127,.22));border-radius:12px;background:rgba(201,162,39,.06);font-size:12.5px;line-height:1.45;color:var(--ink-dim,#6B645C);text-align:left}
.auth-page-login .pks-nospam strong{color:var(--ink,#1E1B18);font-weight:600}
.auth-page-login .pks-nospam-ic{flex:0 0 18px;width:18px;height:18px;margin-top:1px;fill:none;stroke:#B8901C;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .auth-page-login .pks-nospam,html.dark .auth-page-login .pks-nospam{background:rgba(201,162,39,.07);border-color:rgba(255,255,255,.10);color:#B9B2A8}
html[data-theme="dark"] .auth-page-login .pks-nospam strong,html.dark .auth-page-login .pks-nospam strong{color:#F3EFE8}
html[data-theme="dark"] .auth-page-login .pks-nospam-ic,html.dark .auth-page-login .pks-nospam-ic{stroke:#D9B444}