/* ==========================================================================
   AUTHIFY — Product Authentication landing page
   Structure/layout pattern modeled on payr.com's homepage (hero with
   floating device mockup + cards, scroll-driven "how it works" stepper,
   benefit cards, safety section, closing CTA). All graphics below are
   original placeholder mockups built in HTML/CSS/SVG — no third-party
   assets — swap for real product photography later.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------- */
.pa-hero{
  position: relative;
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-2xl);
  overflow: clip;
}
.pa-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--gold-200) 22%, transparent), transparent 70%),
    var(--color-bg);
}
.pa-hero__inner{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}
.pa-hero__inner h1{ max-width: 16ch; }
.pa-hero__sub{
  font-size: var(--text-xl);
  color: var(--color-text-subtle);
  max-width: 30ch;
  font-weight: 300;
}
.pa-hero__actions{ display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--space-xs); }

.pa-hero__badges{
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-lg);
}
.pa-hero__badge{
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.pa-hero__badge .icon{ width: 1.1em; height: 1.1em; color: var(--gold-500); }

/* ---- Hero visual composition ---------------------------------------- */
.pa-hero__visual{
  position: relative;
  margin-top: var(--space-2xl);
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}
.pa-hero__side{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  max-width: 200px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-float);
}
.pa-hero__side--left{ justify-self: end; transform: rotate(-4deg); }
.pa-hero__side--right{ justify-self: start; transform: rotate(4deg); }

.pa-qr-card{
  width: 100%; height: 100%;
  background: var(--color-bg-elevated);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.pa-qr{
  width: 84px; height: 84px;
  background: var(--gold-contrast);
  border-radius: 6px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  padding: 8px;
  gap: 3px;
}
.pa-qr span{ background: var(--color-bg-elevated); border-radius: 1px; }
.pa-qr span:nth-child(1), .pa-qr span:nth-child(5), .pa-qr span:nth-child(21), .pa-qr span:nth-child(25),
.pa-qr span:nth-child(3), .pa-qr span:nth-child(11), .pa-qr span:nth-child(13), .pa-qr span:nth-child(15),
.pa-qr span:nth-child(23), .pa-qr span:nth-child(7), .pa-qr span:nth-child(9), .pa-qr span:nth-child(17),
.pa-qr span:nth-child(19){ background: var(--gold-400); }
.pa-qr-card span.label{ font-size: var(--text-xs); font-weight: 600; color: var(--color-text-subtle); background: none; padding:0; }

.pa-scan-card{
  width: 100%; height: 100%;
  background: linear-gradient(160deg, var(--gold-200), var(--gold-400) 70%);
  display: flex; align-items: center; justify-content: center;
}
.pa-scan-card .icon{ width: 40%; height: 40%; color: var(--gold-contrast); opacity: 0.85; }

/* Metallic device frame — fixed dark titanium bezel regardless of site
   theme (a physical product mockup should read consistently, like real
   product photography, rather than flip with the light/dark toggle). */
.pa-hero__phone{
  position: relative;
  width: clamp(220px, 22vw, 280px);
  aspect-ratio: 9/18.5;
  border-radius: 36px;
  background: var(--color-bg-elevated);
  border: 2px solid #050506;
  box-shadow:
    0 0 0 4.5px #1c1c1e,
    0 0 0 5px rgba(255,255,255,0.16),
    0 0 0 6.5px #2c2c2e,
    0 44px 90px -22px rgba(0,0,0,0.55),
    0 14px 34px -12px rgba(0,0,0,0.4),
    inset 0 1px 1px rgba(255,255,255,0.08);
  overflow: hidden;
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.pa-hero__phone::before{
  content: "";
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 20px;
  border-radius: var(--radius-full);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  z-index: 2;
}
.pa-hero__phone::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, transparent 22%, transparent 78%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
  z-index: 3;
}
.pa-phone__head{ margin-top: var(--space-lg); text-align: center; }
.pa-phone__head .icon{ width: 2.5rem; height: 2.5rem; color: #4caf6b; margin-inline: auto; }
.pa-phone__head h4{ font-size: var(--text-sm); margin-top: var(--space-2xs); }
.pa-phone__head p{ font-size: var(--text-xs); }
.pa-phone__row{
  display: flex; justify-content: space-between; align-items: center;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
}
.pa-phone__row strong{ font-size: var(--text-sm); }

.pa-hero__floatcard{
  position: absolute;
  background: var(--glass-surface-strong);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 3;
}
.pa-hero__floatcard--result{
  top: 8%; right: -6%;
  min-width: 168px;
}
.pa-hero__floatcard--result .row{ display: flex; justify-content: space-between; gap: var(--space-sm); }
.pa-hero__floatcard--result .status{
  font-weight: 700; color: #2e9e57;
  background: color-mix(in srgb, #2e9e57 14%, transparent);
  padding: 0.1em 0.6em; border-radius: var(--radius-full);
}
.pa-hero__floatcard--stat{
  bottom: 6%; left: -8%;
  display: flex; flex-direction: row; align-items: center; gap: var(--space-xs);
}
.pa-hero__floatcard--stat .icon{ width: 1.6rem; height: 1.6rem; color: var(--gold-500); }
.pa-hero__floatcard--stat strong{ font-size: var(--text-lg); display:block; }
.pa-hero__floatcard--stat span{ color: var(--color-text-subtle); }

@media (max-width: 860px){
  .pa-hero__side{ display: none; }
  .pa-hero__visual{ grid-template-columns: 1fr; }
  .pa-hero__floatcard--result{ right: 2%; }
  .pa-hero__floatcard--stat{ left: 2%; }
}

/* ---- How it works (pinned scroll-story, always-dark panel) ------------
   The panel is deliberately NOT theme-aware — it stays dark with light
   text in both light and dark site themes, matching payr.com's fixed-dark
   step section. Colors below are the dark-theme token values, scoped
   locally to .pa-hiw so every descendant using var(--color-text) etc.
   resolves correctly regardless of [data-theme] on <html>.
   On desktop the section is scroll-pinned: .pa-hiw-track is a tall (300vh)
   wrapper and .pa-hiw-sticky pins the visible panel via position:sticky
   while the user scrolls through it; product-auth.js continuously derives
   which third of that scroll range the viewport is in and activates the
   matching step — so the page can't reach the next section until all 3
   steps have been shown. Disabled on mobile, where steps stack normally. */
.pa-hiw-track{ position: relative; height: 300vh; }
.pa-hiw-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.pa-hiw{
  --color-bg-elevated: #101215;
  --color-text: #f6f3ec;
  --color-text-muted: rgba(246, 243, 236, 0.66);
  --color-text-subtle: rgba(246, 243, 236, 0.44);
  --color-border: rgba(246, 243, 236, 0.12);
  --color-border-strong: rgba(246, 243, 236, 0.22);
  --gold-400: #d8b888;
  --gold-500: #e6cc9f;
  --gold-contrast: #16140f;
  --glass-surface: rgba(255, 255, 255, 0.05);
  --shadow-gold: 0 8px 30px -8px rgba(216,184,136,0.28);

  background: #000000;
  color: var(--color-text);
  border-radius: var(--radius-xl);
  width: calc(100% - 2 * var(--container-pad));
  max-width: 1400px;
  margin-inline: auto;
  padding-block: var(--space-xl);
  max-height: 94vh;
  overflow-y: auto;
}
.pa-hiw__head{ text-align: center; margin-bottom: var(--space-lg); }
.pa-hiw__head h2{ font-size: var(--text-3xl); color: var(--color-text); }
.pa-hiw__head .dim{ color: var(--color-text-subtle); font-weight: 300; }

.pa-hiw__grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.pa-hiw__steps{ display: flex; flex-direction: column; gap: var(--space-lg); }
.pa-hiw__steps--right{ align-items: flex-start; }

.pa-step{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  max-width: 280px;
  opacity: 0.45;
  transition: opacity var(--dur-mid) var(--ease-smooth), border-color var(--dur-mid) var(--ease-smooth);
}
.pa-step__label{
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}
.pa-step h3{ font-size: var(--text-lg); margin-top: var(--space-3xs); color: var(--color-text); }
.pa-step p{ font-size: var(--text-xs); margin-top: var(--space-2xs); color: var(--color-text-muted); }
.pa-step.is-active{ opacity: 1; border-color: var(--gold-400); box-shadow: var(--shadow-gold); }

.pa-hiw__phone-wrap{ display: flex; justify-content: center; }
.pa-hiw__phone{
  width: clamp(220px, 20vw, 260px);
  aspect-ratio: 9/18.5;
  border-radius: 34px;
  background: var(--color-bg-elevated);
  border: 6px solid var(--color-border-strong);
  padding: var(--space-md) var(--space-sm);
  overflow: hidden;
  position: relative;
}
.pa-hiw__screen{ display: none; height: 100%; flex-direction: column; gap: var(--space-sm); }
.pa-hiw__screen.is-active{ display: flex; }
.pa-hiw__screen h4{ font-size: var(--text-sm); margin-top: var(--space-lg); color: var(--color-text); }
.pa-hiw__screen p{ font-size: var(--text-xs); color: var(--color-text-muted); }
.pa-hiw__qr-mini{
  width: 64px; height: 64px; border-radius: 6px;
  margin-inline: auto; margin-top: var(--space-sm);
  background-color: var(--gold-contrast);
  background-image:
    linear-gradient(var(--color-bg-elevated) 2px, transparent 2px),
    linear-gradient(90deg, var(--color-bg-elevated) 2px, transparent 2px);
  background-size: 12px 12px;
}
.pa-hiw__screen .icon-big{ width: 2.5rem; height: 2.5rem; margin-inline: auto; color: var(--gold-500); }
.pa-hiw__screen .icon-big.ok{ color: #4caf6b; }

@media (max-width: 900px){
  .pa-hiw-track{ height: auto; }
  .pa-hiw-sticky{ position: static; height: auto; display: block; overflow: visible; }
  .pa-hiw{ width: calc(100% - 2 * var(--space-sm)); margin-inline: var(--space-sm); }
  .pa-hiw__grid{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pa-hiw__steps, .pa-hiw__steps--right{ align-items: center; width: 100%; }
  .pa-step{ max-width: 420px; opacity: 1; }
  .pa-hiw__phone-wrap{ order: -1; margin-bottom: var(--space-lg); }
}

/* ---- Key benefits ------------------------------------------------------ */
.pa-benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.pa-benefit{
  border: 1px solid var(--glass-border);
  background: var(--glass-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--dur-mid) var(--ease-glass), box-shadow var(--dur-mid) var(--ease-glass), border-color var(--dur-mid) var(--ease-smooth);
}
.pa-benefit:hover{ transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: var(--gold-400); }
.pa-benefit__art{
  height: 120px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-400) 16%, var(--color-bg-elevated)), var(--color-bg-elevated));
  display: flex; align-items: center; justify-content: center;
}
.pa-benefit__art .icon{ width: 2.75rem; height: 2.75rem; color: var(--gold-500); }
.pa-benefit h3{ font-size: var(--text-lg); }
.pa-benefit p{ font-size: 0.8125rem; }

@media (max-width: 980px){ .pa-benefits__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .pa-benefits__grid{ grid-template-columns: 1fr; } }

/* ---- Safety section ----------------------------------------------------- */
.pa-safety{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.pa-safety__text p{ font-size: 0.8125rem; margin-top: var(--space-sm); }
.pa-safety__list{ display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.pa-safety__list li{
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-text);
}
.pa-safety__list .icon{ width: 1.4rem; height: 1.4rem; color: var(--gold-500); flex-shrink: 0; }
.pa-safety__visual{
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--color-bg-elevated), var(--color-bg-sunken));
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.pa-safety__visual .icon{ width: 40%; height: 40%; color: var(--gold-500); }

@media (max-width: 860px){
  .pa-safety{ grid-template-columns: 1fr; }
  .pa-safety__visual{ order: -1; max-width: 320px; margin-inline: auto; width: 100%; }
}