/* ============================================================
   ROAD DAWG — design system · components (web)
   Reusable components consuming TIER 3 tokens (road-dawg.css).
   Load after road-dawg.css.
   ============================================================ */

/* ---- Primary button ----------------------------------------
   Figma states: Default / Pressed / Disabled / Destructive / Loading.
   Hover is a WEB EXTENSION done the kit's way: a tonal step, no shadow,
   no lift (the kit has no shadows). default alabaster-100 → hover
   alabaster-200 → pressed alabaster-300 (the Figma pressed value).
   The ::after pad keeps the hit target ≥44px. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-text);text-decoration:none;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-md);line-height:var(--lh-body-md);
  padding:14px 32px;border-radius:var(--r-round);border:var(--bw-sm) solid transparent;cursor:pointer;
  transition:background-color var(--duration-fast) var(--easing-out),
             border-color var(--duration-fast) var(--easing-out);}
.btn::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-round);}
.btn:hover{color:var(--btn-text);background:var(--btn-bg-hover);}
.btn:active{background:var(--btn-bg-pressed);}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--btn-bg-disabled);
  color:var(--btn-text-disabled);pointer-events:none;}
.btn--destructive{background:var(--btn-destructive-bg);border-color:var(--btn-destructive-border);
  color:var(--btn-destructive-text);}

/* ---- Secondary button ---- */
.btn-secondary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--btn2-bg);color:var(--btn2-text);text-decoration:none;
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-body-md);line-height:var(--lh-body-md);
  padding:14px 32px;border-radius:var(--r-round);border:var(--bw-sm) solid var(--btn2-border);cursor:pointer;
  transition:background-color var(--duration-fast) var(--easing-out),
             border-color var(--duration-fast) var(--easing-out);}
.btn-secondary::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-round);}
.btn-secondary:hover{color:var(--btn2-text);background:var(--btn2-bg-hover);}   /* outline stays */
.btn-secondary:active{background:var(--btn2-bg-active);}
.btn-secondary:disabled{border-color:var(--border-disabled);color:var(--btn-text-disabled);pointer-events:none;}

/* ---- Large size — declared after both buttons so it wins for either ---- */
.btn.btn--lg,.btn-secondary.btn--lg{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);padding:20px 48px;}

/* ---- Eyebrow pill — program / section label ---- */
.eyebrow-pill{display:inline-flex;border:var(--bw-sm) solid rgba(244,237,223,0.4);border-radius:var(--r-round);
  padding:7px 18px;font-size:var(--fs-body-xsm);letter-spacing:0.15em;text-transform:uppercase;
  font-weight:700;color:var(--alabaster-100);}
.eyebrow-pill--sky{background:var(--surface-card-secondary);border-color:var(--sky-300);color:var(--sky-300);}

/* ---- Card — grouped content on a raised surface ---- */
.card{background:var(--card-bg);border:var(--bw-sm) solid var(--card-border);
  border-radius:var(--card-radius);padding:var(--space-5);}
.card b,.card h3{display:block;font-family:var(--font-heading);font-weight:500;color:var(--text-headings);
  font-size:var(--fs-h6);line-height:var(--lh-h6);margin:0 0 5px;}
.card p,.card .card-sub{font-size:var(--fs-body-md);color:var(--color-text-muted);font-weight:300;}
.card .card-sub{display:block;}

/* ---- Lede / section subtitle ---- */
.lede{font-size:var(--fs-body-lg);line-height:1.5;color:var(--color-text-muted);font-weight:300;}
.lede--soft{color:var(--color-text-soft);}   /* section intros on dark gradients (AAA) */

/* ---- Paw dot — circular step marker (fill per stop) ---- */
.paw-dot{width:44px;height:44px;border-radius:var(--r-round);
  display:inline-flex;align-items:center;justify-content:center;flex:none;}

/* ---- Rewards — quiet gratitude list (never chips or cards) ---- */
.rewards{display:inline-block;text-align:left;}
.rewards .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:var(--space-3) 2px;
  border-bottom:var(--bw-sm) solid rgba(255,255,255,0.18);}
.rewards .row:last-child{border-bottom:none;}
.rewards b{font-family:var(--font-heading);font-weight:500;font-size:var(--fs-h6);color:#fff;}
.rewards span{font-size:var(--fs-body-md);color:var(--color-text-soft);font-weight:300;}

/* ---- Phone frame — real 402×874 exports only ---- */
.phone{width:272px;margin:0 auto;padding:10px;border-radius:34px;
  background:linear-gradient(160deg,#332E4C 0%,#1B1828 55%,#242038 100%);
  border:var(--bw-sm) solid rgba(255,255,255,0.18);
  box-shadow:0 40px 90px rgba(4,10,30,0.55),0 12px 28px rgba(4,10,30,0.45),inset 0 1px 0 rgba(255,255,255,0.12);}
.phone-screen{border-radius:26px;overflow:hidden;aspect-ratio:402/874;display:block;background:var(--surface-card-large);
  border:var(--bw-sm) solid rgba(0,0,0,0.55);}
.phone-screen img{display:block;width:100%;height:100%;object-fit:cover;}

/* ---- Max logo (pairs with the inline SVG sprite) ---- */
.max-logo{width:64px;height:64px;display:block;flex:none;}
.max-logo-lg{width:76px;height:76px;}

/* ---- Icon chip — small icon holder used in feature cards, checklists, benefits.
   Default: sky tint + sky outline + sky glyph (22px). Variants: --lg (56px, 28px glyph),
   --success (transparent, brand-green outline + glyph). Always aria-hidden; the text
   next to it carries the meaning. Declared after .card so the card text rules
   never catch it (it is a <span>). ---- */
.ico-chip{width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-card-secondary);border:var(--bw-sm) solid var(--border-secondary);color:var(--sky-300);}
.ico-chip svg{width:22px;height:22px;display:block;}
.ico-chip--lg{width:56px;height:56px;}
.ico-chip--lg svg{width:28px;height:28px;}
.ico-chip--success{background:transparent;border:var(--bw-md) solid var(--success);color:var(--success);}

/* ---- Card variants ---- */
/* Feature: icon chip + one-line title, left aligned, vertically centred */
/* min-height fits a two-line title, so a set of feature cards is always equal height */
.card--feature{display:flex;gap:14px;align-items:center;text-align:left;min-height:98px;}  /* 2 lines × 24 + 48 padding + 2 border */
.card--feature b{margin:0;text-wrap:balance;}
/* Benefit: centred column — chip, title, two-line sub; equal heights in a grid */
.card--benefit{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:28px 22px;min-height:132px;}
.card--benefit .ico-chip{margin:0 auto 16px;}
.card--benefit b{margin:0 0 8px;white-space:nowrap;}
.card--benefit .card-sub{margin:0 auto;}
/* 3-up grid for benefit cards; single column on small screens */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:880px;margin:0 auto;}
@media (max-width:800px){
  .card-grid-3{grid-template-columns:1fr;max-width:420px;}
  .card-grid-3 .card-sub br{display:none;}
}

/* ---- Checklist panel — one contained list of commitments (not another card grid) ---- */
.checklist{max-width:660px;margin:0 auto;list-style:none;padding:2px 32px;
  background:var(--card-bg);border:var(--bw-sm) solid var(--card-border);border-radius:var(--r-lg);text-align:left;}
.checklist li{display:flex;gap:16px;align-items:center;padding:22px 0;border-top:var(--bw-sm) solid var(--card-border);}
.checklist li:first-child{border-top:none;}
.checklist .t{font-size:var(--fs-body-lg);line-height:1.45;color:var(--color-text-soft);font-weight:300;}
@media (max-width:640px){
  .checklist{padding:2px 20px;}
  .checklist li{align-items:flex-start;gap:14px;}
  .checklist .t{font-size:var(--fs-body-md);}
}

/* ---- Comet ring — the match-chip comet as a CTA wrapper. Wrap any pill button:
   <span class="comet"><span class="comet__ring" aria-hidden="true"></span>
   <span class="comet__gap"> …button… </span></span>
   Set --comet-gap to the colour behind the button (on gradients, sample it). ---- */
@keyframes rd-comet-spin{to{transform:rotate(360deg);}}
.comet{position:relative;display:inline-flex;border-radius:var(--r-round);padding:2px;overflow:hidden;isolation:isolate;}
.comet__ring{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;z-index:0;
  background:conic-gradient(from 0deg,transparent 0%,transparent 62%,#6EE7B7 82%,#FFFFFF 92%,transparent 100%);
  animation:rd-comet-spin 3.2s linear infinite;}
.comet__gap{position:relative;z-index:1;display:inline-flex;border-radius:var(--r-round);
  background:var(--comet-gap,var(--neutral-900));padding:2px;}
.comet .btn,.comet .btn-secondary{display:inline-flex;}
@media (prefers-reduced-motion:reduce){.comet__ring{animation:none;}}
@media (max-width:640px){.comet,.comet__gap,.comet .btn,.comet .btn-secondary{width:100%;}}

/* ---- Entrance reveal — add .reveal to elements; a tiny observer adds .in-view.
   Stagger siblings with --d. Reduced motion: simply visible. ---- */
@keyframes rise-in{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .65s var(--easing-out),transform .65s var(--easing-out);transition-delay:var(--d,0ms);}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}