/* Restyles production page sections in the Already Yours visual system.
   Scoped under .legacy so hybrid.css and this file never fight. */
.legacy{--soft:#f3f5fa;background:var(--paper);color:var(--ink);
  /* Production variables.css shim, remapped for the light system. The extracted
     sections use these in inline styles; without them every gap collapses. */
  --space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;
  --space-2xl:3rem;--space-3xl:4rem;--space-4xl:6rem;--space-5xl:8rem;
  --color-text-primary:#1a1d24;--color-text-secondary:#525a66;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;
  --text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;
  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.6;
  --weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;
  --accent:var(--blue);--accent-light:var(--blue);--accent-dark:var(--blue);--text-accent:var(--blue);
  --accent-gradient:linear-gradient(135deg,var(--blue),var(--blue));
  --accent-gradient-hover:linear-gradient(135deg,var(--blue),var(--blue));
  --text-primary:#1a1d24;--text-secondary:#525a66;--text-muted:#8a92a0;
  --bg-primary:#ffffff;--bg-secondary:#f3f5fa;--bg-tertiary:#e9edf5;
  --glass-bg:#ffffff;--glass-bg-darker:#f6f8fc;--glass-border:rgba(21,25,35,.09);
  --glass-border-light:rgba(21,25,35,.06);--glass-blur:0px;
  --success:#0f766e;--success-bg:rgba(15,118,110,.08);--error:#b91c1c;--error-bg:rgba(185,28,28,.06);--warning:#b45309;
  --shadow-sm:0 1px 2px rgba(35,45,66,.06);--shadow-md:0 6px 16px rgba(35,45,66,.07);
  --shadow-lg:0 14px 34px rgba(35,45,66,.08);--shadow-xl:0 20px 48px rgba(35,45,66,.1);
  --glow-accent:0 0 0 rgba(0,0,0,0);--glow-accent-strong:0 0 0 rgba(0,0,0,0);--glow-success:0 0 0 rgba(0,0,0,0);
  --transition-fast:150ms ease;--transition-base:250ms ease;--transition-slow:400ms ease;
  --container-max:1120px;--container-padding:1.75rem;--nav-height:4rem;
  --font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"SF Mono","Fira Code",monospace}
.legacy summary{font-size:16px;line-height:1.4}
.legacy .faq-list details{box-shadow:0 6px 16px rgba(35,45,66,.05)}
.legacy [data-animate]{opacity:1 !important;transform:none !important}
.legacy section{padding:52px 0}
.legacy section[style]{background:var(--soft) !important}
.legacy .container{max-width:1120px;margin:0 auto;padding:0 28px}
.legacy .section-header{max-width:680px;margin:0 auto 30px;text-align:center}
.legacy h2{margin:0 0 12px;font-size:clamp(30px,3.2vw,42px);line-height:1.08;letter-spacing:-.018em;font-weight:800}
.legacy h3{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.legacy p{margin:8px 0;color:#4a5160;line-height:1.65}
.legacy .section-header>p{font-size:17px}
.legacy .gradient-text{color:var(--blue)}
.legacy ul{margin:12px 0;padding-left:0;list-style:none}
.legacy li{margin:9px 0;padding-left:26px;position:relative;color:#3c4350;line-height:1.55}
.legacy li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:14px;border-radius:50%;background:rgba(var(--blue-rgb),.12)}
.legacy li::after{content:"";position:absolute;left:4px;top:calc(.52em + 4px);width:6px;height:6px;border-radius:50%;background:var(--blue)}
.legacy .glass-card{background:#ffffff;border:1px solid rgba(21,25,35,.09);border-radius:18px;padding:30px 32px;box-shadow:0 14px 34px rgba(35,45,66,.06)}
.legacy [class*="__grid"],.legacy [class*="-grid"],.legacy [class*="cards"]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:stretch;margin-left:auto;margin-right:auto;justify-content:center}
.legacy .container>div[style*="grid"]{margin-left:auto;margin-right:auto;justify-content:center}
.legacy [class*="__icon"]{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(var(--blue-rgb),.1);margin-bottom:14px}
.legacy [class*="__icon"] svg{width:22px;height:22px;stroke:var(--blue)}
.legacy [class*="__header"] h3{margin:0}
.legacy table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid rgba(21,25,35,.09);border-radius:14px;overflow:hidden}
.legacy th,.legacy td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(21,25,35,.07);vertical-align:top}
.legacy th{background:var(--soft);font-weight:600}
.legacy a{color:var(--blue);font-weight:600}
.legacy .btn,.legacy [class*="btn--"]{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:15px}
.legacy details{background:#fff;border:1px solid rgba(21,25,35,.09);border-radius:14px;padding:16px 22px;margin:10px 0}
.legacy summary{cursor:pointer;font-weight:600;letter-spacing:-.005em}
.legacy details p{margin-top:12px}
.legacy .legacy-note{max-width:1120px;margin:0 auto;padding:20px 28px 0;color:#8a92a0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
@media (max-width:760px){.legacy section{padding:48px 0}.legacy .glass-card{padding:22px}}

/* How it works: original three-column numbered layout */
.legacy .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.legacy .step{text-align:center;padding:38px 30px}
.legacy .step__number{width:44px;height:44px;margin:0 auto 18px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
@media (max-width:860px){.legacy .steps{grid-template-columns:1fr}}

/* Highlights: centered card content */
.legacy section[aria-labelledby="highlights-title"] .glass-card{text-align:center}
.legacy section[aria-labelledby="highlights-title"] [class*="__icon"]{margin-left:auto;margin-right:auto}

/* Production .grid wrappers: real grids; dense card sets go 3-across */
.legacy .grid{display:grid;gap:20px;align-items:stretch}
.legacy .grid--2{grid-template-columns:repeat(2,1fr)}
.legacy .grid--2:has(>:nth-child(4)){grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.legacy .grid--2,.legacy .grid--2:has(>:nth-child(4)){grid-template-columns:1fr}}

/* Wide tables scroll inside themselves on small screens. */
@media (max-width: 760px) {
  .legacy table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}