/* content-bridge.css
   Renders the legacy VoicePrivate body markup inside the Already Yours shell.
   voice-private#155, bridge migration, generated 2026-09-20.

   Load order on a migrated page is already-yours.css, already-yours-legacy.css,
   content-bridge.css. already-yours-legacy.css owns the token shim that maps the
   old variables.css names onto the light system; this file never repeats it.

   PART ONE is generated: reset.css, base.css, layout.css, glass.css, components.css, animations.css, home.css, blog.css, programmatic.css, privacy.css, faq.css, features.css, pill.css
   scoped under .legacy and wrapped in @layer vp-legacy by
   `python3 ~/seo/migrate_shell.py voiceprivate --root <webroot> --build-bridge`.
   The layer is what makes the bridge predictable: anything unlayered, which is
   all of already-yours.css, all of already-yours-legacy.css and part two below,
   wins over it no matter how specific the old selector was. So part one only
   fills the gaps nobody has restyled yet.

   PART TWO, below the HAND TUNED marker, is hand authored and is preserved
   verbatim across rebuilds. Put every judgement call there, not in part one.
   Nothing here styles the header or the footer: already-yours.css owns those.
   No new fonts, no gradients, no dark grounds. */

@layer vp-legacy {

/* source file: reset.css */
.legacy *,.legacy *::before,.legacy *::after{box-sizing: border-box; margin: 0; padding: 0;}
.legacy{min-height: 100vh; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.legacy img,.legacy picture,.legacy video,.legacy canvas,.legacy svg{display: block; max-width: 100%;}
.legacy input,.legacy button,.legacy textarea,.legacy select{font: inherit; color: inherit;}
.legacy p,.legacy h1,.legacy h2,.legacy h3,.legacy h4,.legacy h5,.legacy h6{overflow-wrap: break-word;}
.legacy h1,.legacy h2,.legacy h3,.legacy h4,.legacy h5,.legacy h6{line-height: var(--leading-tight); text-wrap: balance;}
.legacy a{color: inherit; text-decoration: none;}
.legacy ul,.legacy ol{list-style: none;}
.legacy button{cursor: pointer; border: none; background: none;}
.legacy table{border-collapse: collapse; border-spacing: 0;}
@media (prefers-reduced-motion: reduce){
.legacy *,.legacy *::before,.legacy *::after{animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto;}
}

/* source file: base.css */
.legacy{font-family: var(--font-family); font-size: var(--text-base); color: var(--text-primary); background-color: var(--bg-primary); overflow-x: hidden;}
.legacy h1{font-size: var(--text-4xl); font-weight: var(--weight-extrabold); letter-spacing: -0.025em; line-height: 1.05;}
.legacy h2{font-size: var(--text-3xl); font-weight: var(--weight-extrabold); letter-spacing: -0.02em; line-height: 1.08;}
.legacy h3{font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.01em;}
.legacy h4{font-size: var(--text-xl); font-weight: var(--weight-semibold);}
.legacy h5{font-size: var(--text-lg); font-weight: var(--weight-medium);}
.legacy p{color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy a{transition: color var(--transition-fast);}
.legacy a:hover{color: var(--accent-light);}
.legacy strong{font-weight: var(--weight-semibold); color: var(--text-primary);}
.legacy code{font-family: var(--font-mono); font-size: 0.9em; padding: 0.15em 0.4em; background: var(--glass-bg); border-radius: var(--radius-sm); border: 1px solid var(--glass-border);}
.legacy ::selection{background: rgba(23, 105, 255, 0.3); color: var(--text-primary);}
@media (min-width: 768px){
.legacy h1{font-size: var(--text-5xl);}
.legacy h2{font-size: var(--text-4xl);}
.legacy h3{font-size: var(--text-3xl);}
}
@media (min-width: 1024px){
.legacy h1{font-size: var(--text-6xl);}
}
.legacy .text-accent{color: var(--text-accent);}
.legacy .text-secondary{color: var(--text-secondary);}
.legacy .text-muted{color: var(--text-muted);}
.legacy .text-success{color: var(--success);}
.legacy .text-center{text-align: center;}
.legacy .text-sm{font-size: var(--text-sm);}
.legacy .text-lg{font-size: var(--text-lg);}
.legacy .text-xl{font-size: var(--text-xl);}
.legacy .font-medium{font-weight: var(--weight-medium);}
.legacy .font-semibold{font-weight: var(--weight-semibold);}
.legacy .font-bold{font-weight: var(--weight-bold);}
.legacy .sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.legacy .gradient-text{background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.legacy .max-w-prose{max-width: 65ch;}
.legacy .mx-auto{margin-left: auto; margin-right: auto;}
.legacy .mt-sm{margin-top: var(--space-sm);}
.legacy .mt-md{margin-top: var(--space-md);}
.legacy .mt-lg{margin-top: var(--space-lg);}
.legacy .mt-xl{margin-top: var(--space-xl);}
.legacy .mt-2xl{margin-top: var(--space-2xl);}
.legacy .mb-sm{margin-bottom: var(--space-sm);}
.legacy .mb-md{margin-bottom: var(--space-md);}
.legacy .mb-lg{margin-bottom: var(--space-lg);}
.legacy .mb-xl{margin-bottom: var(--space-xl);}
.legacy .mb-2xl{margin-bottom: var(--space-2xl);}
.legacy article h1,.legacy .article-body h1,.legacy .article-content h1{font-size: 2.25rem; margin: 0 0 24px; color: inherit; letter-spacing: -0.02em; line-height: 1.15; font-weight: 700;}
.legacy .related-pages{max-width: 760px; margin: var(--space-3xl) auto 0; padding: var(--space-lg) var(--space-lg) 0; border-top: 1px solid var(--bg-tertiary);}
.legacy .related-pages h2{font-size: 1.125rem; margin: 0 0 var(--space-md); color: var(--text-primary);}
.legacy .related-pages ul{list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm);}
.legacy .related-pages a{color: var(--text-accent); text-decoration: none; font-weight: 500;}
.legacy .related-pages a:hover{text-decoration: underline;}

/* source file: layout.css */
.legacy .container{width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding);}
.legacy .container--narrow{max-width: 900px;}
.legacy .container--wide{max-width: 1400px;}
.legacy .section{padding: var(--space-4xl) 0;}
.legacy .section--lg{padding: var(--space-5xl) 0;}
.legacy .section--sm{padding: var(--space-2xl) 0;}
.legacy .section-header{text-align: center; max-width: 700px; margin: 0 auto var(--space-3xl);}
.legacy .section-header p{margin-top: var(--space-md); font-size: var(--text-lg);}
.legacy .grid{display: grid; gap: var(--space-xl);}
.legacy .grid--2{grid-template-columns: 1fr;}
.legacy .grid--3{grid-template-columns: 1fr;}
.legacy .grid--4{grid-template-columns: 1fr;}
@media (min-width: 640px){
.legacy .grid--2{grid-template-columns: repeat(2, 1fr);}
.legacy .grid--4{grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 768px){
.legacy .grid--3{grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1024px){
.legacy .grid--3{grid-template-columns: repeat(3, 1fr);}
.legacy .grid--4{grid-template-columns: repeat(4, 1fr);}
}
.legacy .flex{display: flex;}
.legacy .flex-col{flex-direction: column;}
.legacy .flex-wrap{flex-wrap: wrap;}
.legacy .items-center{align-items: center;}
.legacy .justify-center{justify-content: center;}
.legacy .justify-between{justify-content: space-between;}
.legacy .gap-sm{gap: var(--space-sm);}
.legacy .gap-md{gap: var(--space-md);}
.legacy .gap-lg{gap: var(--space-lg);}
.legacy .gap-xl{gap: var(--space-xl);}
.legacy .gap-2xl{gap: var(--space-2xl);}
main.legacy{padding-top: var(--nav-height);}

/* source file: glass.css */
.legacy .glass{background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl);}
.legacy .glass--darker{background: var(--glass-bg-darker);}
.legacy .glass--light{background: rgba(51, 65, 85, 0.4); border-color: rgba(82, 90, 102, 0.2);}
.legacy .glass--accent{border-color: rgba(23, 105, 255, 0.3); box-shadow: var(--glow-accent);}
.legacy .glass--success{border-color: rgba(15, 118, 110, 0.3); box-shadow: var(--glow-success);}
.legacy .glass--error{border-color: rgba(239, 68, 68, 0.3);}
.legacy .glass--hover{transition: all var(--transition-base);}
.legacy .glass--hover:hover{border-color: rgba(23, 105, 255, 0.4); box-shadow: var(--glow-accent); transform: translateY(-2px);}
.legacy .glass-card{background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-xl);}
.legacy .glass-card--lg{padding: var(--space-2xl);}
@media (min-width: 768px){
.legacy .glass-card--lg{padding: var(--space-3xl);}
}
.legacy .glass-gradient-border{position: relative; background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-radius: var(--radius-xl); border: none;}
.legacy .glass-gradient-border::before{content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--accent-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;}
.legacy .glass-card{background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(21, 25, 35, 0.09); border-radius: 18px; box-shadow: 0 14px 34px rgba(35, 45, 66, 0.06);}
.legacy .glass-gradient-border{background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(21, 25, 35, 0.09); border-radius: 18px; box-shadow: 0 14px 34px rgba(35, 45, 66, 0.06);}
.legacy .glass-gradient-border::before{display: none;}

/* source file: components.css */
.legacy .btn{display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.75rem 1.75rem; font-size: var(--text-base); font-weight: var(--weight-semibold); border-radius: var(--radius-lg); transition: all var(--transition-base); white-space: nowrap; line-height: 1; text-decoration: none;}
.legacy .btn--primary{background: var(--accent-gradient); color: #06131d; box-shadow: var(--glow-accent); text-shadow: none;}
.legacy .btn--primary:hover{background: var(--accent-gradient-hover); box-shadow: var(--glow-accent-strong); transform: translateY(-1px); color: #06131d;}
.legacy .btn--secondary{background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-border); color: var(--text-primary);}
.legacy .btn--secondary:hover{border-color: var(--accent); color: var(--accent-light); transform: translateY(-1px);}
.legacy .btn--ghost{color: var(--text-secondary); padding: 0.5rem 1rem;}
.legacy .btn--ghost:hover{color: var(--text-primary); background: rgba(255, 255, 255, 0.05);}
.legacy .btn--lg{padding: 1rem 2.25rem; font-size: var(--text-lg); border-radius: var(--radius-xl);}
.legacy .btn--sm{padding: 0.5rem 1.25rem; font-size: var(--text-sm);}
.legacy .btn--icon{width: 2.5rem; height: 2.5rem; padding: 0; border-radius: var(--radius-md);}
.legacy .btn svg{width: 1.25em; height: 1.25em; flex-shrink: 0;}
.legacy .badge{display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em;}
.legacy .badge--accent{background: rgba(23, 105, 255, 0.15); color: var(--accent-light); border: 1px solid rgba(23, 105, 255, 0.3);}
.legacy .badge--success{background: var(--success-bg); color: var(--success); border: 1px solid rgba(15, 118, 110, 0.3);}
.legacy .badge--popular{background: var(--accent-gradient); color: white; border: none;}
.legacy .card{background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-xl); transition: all var(--transition-base);}
.legacy .card:hover{border-color: rgba(23, 105, 255, 0.3); transform: translateY(-2px);}
.legacy .card__icon{width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: rgba(23, 105, 255, 0.1); color: var(--accent-light); margin-bottom: var(--space-lg);}
.legacy .card__icon svg{width: 1.5rem; height: 1.5rem;}
.legacy .card__title{font-size: var(--text-xl); font-weight: var(--weight-semibold); margin-bottom: var(--space-sm);}
.legacy .card__description{font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy .toggle{display: inline-flex; align-items: center; gap: var(--space-md); cursor: pointer;}
.legacy .toggle__track{position: relative; width: 3.5rem; height: 2rem; background: var(--bg-tertiary); border-radius: var(--radius-full); border: 1px solid var(--glass-border); transition: all var(--transition-base);}
.legacy .toggle__thumb{position: absolute; top: 3px; left: 3px; width: 1.375rem; height: 1.375rem; background: var(--text-primary); border-radius: 50%; transition: transform var(--transition-base);}
.legacy .toggle--active .toggle__track{background: var(--accent); border-color: var(--accent);}
.legacy .toggle--active .toggle__thumb{transform: translateX(1.5rem);}
.legacy .toggle__label{font-size: var(--text-sm); color: var(--text-secondary); transition: color var(--transition-fast);}
.legacy .toggle__label--active{color: var(--text-primary); font-weight: var(--weight-medium);}
.legacy .table-wrap{overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-xl); border: 1px solid var(--glass-border);}
.legacy .table{width: 100%; min-width: 600px; text-align: left;}
.legacy .table th{padding: 1rem 1.25rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); background: var(--glass-bg-darker); border-bottom: 1px solid var(--glass-border); white-space: nowrap;}
.legacy .table td{padding: 0.875rem 1.25rem; font-size: var(--text-sm); border-bottom: 1px solid rgba(71, 85, 105, 0.15); color: var(--text-secondary);}
.legacy .table tr:last-child td{border-bottom: none;}
.legacy .table tr:hover td{background: rgba(23, 105, 255, 0.03);}
.legacy .table .col-highlight{background: rgba(23, 105, 255, 0.05);}
.legacy .table .col-highlight-header{background: rgba(23, 105, 255, 0.1); color: var(--accent-light);}
.legacy .check{color: var(--success); font-weight: var(--weight-bold);}
.legacy .cross{color: var(--text-muted);}
.legacy .divider{height: 1px; background: var(--glass-border); border: none; margin: var(--space-2xl) 0;}
.legacy .input{width: 100%; padding: 0.75rem 1rem; background: var(--glass-bg-darker); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--text-base); transition: border-color var(--transition-fast);}
.legacy .input:focus{outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.15);}
.legacy .input::placeholder{color: var(--text-muted);}
.legacy .section-header .badge,.legacy .section-header .badge--accent,.legacy .section-header .badge--success{background: transparent; border: none; padding: 0; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;}
.legacy .badge{background: rgba(23, 105, 255, 0.08); border: none; color: var(--accent);}
.legacy .btn{border-radius: var(--radius-full); font-weight: 700;}
.legacy .accordion{display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto;}
.legacy .accordion__item{background: #ffffff; border: 1px solid rgba(21, 25, 35, 0.09); border-radius: 14px; box-shadow: 0 6px 16px rgba(35, 45, 66, 0.05);}
.legacy .accordion__item summary{list-style: none; cursor: pointer;}
.legacy .accordion__item summary::-webkit-details-marker{display: none;}
.legacy .accordion__trigger{display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;}
.legacy .accordion__chevron{width: 18px; height: 18px; flex: none; color: var(--text-muted); transition: transform var(--transition-base);}
.legacy .accordion__item[open] .accordion__chevron{transform: rotate(180deg);}
.legacy details.accordion__item > *:not(summary){padding: 0 22px 16px; color: var(--text-secondary); line-height: 1.65;}

/* source file: animations.css */
@keyframes fadeUp{from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}
@keyframes fadeIn{from { opacity: 0; }
  to { opacity: 1; }}
@keyframes scaleIn{from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }}
@keyframes slideDown{from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}
@keyframes pulse{0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }}
@keyframes typing{from { width: 0; }
  to { width: 100%; }}
@keyframes blink{0%, 100% { opacity: 1; }
  50% { opacity: 0; }}
@keyframes float{0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }}
@keyframes countUp{from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }}
@keyframes shimmer{0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }}
.legacy [data-animate]{opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease;}
.legacy.blog-content[data-animate],.legacy .blog-content[data-animate]{opacity: 1; transform: none;}
.legacy [data-animate="fade-up"]{transform: translateY(24px);}
.legacy [data-animate="fade-in"]{transform: none;}
.legacy [data-animate="scale-in"]{transform: scale(0.92);}
.legacy [data-animate="slide-left"]{transform: translateX(-24px);}
.legacy [data-animate="slide-right"]{transform: translateX(24px);}
.legacy [data-animate].animated{opacity: 1; transform: none;}
.legacy [data-delay="100"]{transition-delay: 100ms;}
.legacy [data-delay="200"]{transition-delay: 200ms;}
.legacy [data-delay="300"]{transition-delay: 300ms;}
.legacy [data-delay="400"]{transition-delay: 400ms;}
.legacy [data-delay="500"]{transition-delay: 500ms;}
.legacy [data-delay="600"]{transition-delay: 600ms;}
@media (prefers-reduced-motion: reduce){
.legacy [data-animate]{opacity: 1; transform: none; transition: none;}
}

/* source file: home.css */
.legacy .hero{position: relative; padding: var(--space-4xl) 0 var(--space-5xl); overflow: hidden; text-align: center;}
.legacy .hero::before{content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(23, 105, 255, 0.12) 0%, transparent 70%); pointer-events: none;}
.legacy .hero__badge{margin-bottom: var(--space-xl);}
.legacy .hero__title{max-width: 800px; margin: 0 auto var(--space-lg);}
.legacy .hero__subtitle{font-size: var(--text-lg); color: var(--text-secondary); max-width: 600px; margin: 0 auto var(--space-2xl);}
@media (min-width: 768px){
.legacy .hero__subtitle{font-size: var(--text-xl);}
}
.legacy .hero__ctas{display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-3xl);}
.legacy .hero__typing-wrap{display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-xl); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); margin: 0 auto var(--space-3xl); max-width: 90%;}
.legacy .hero__typing-label{font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap;}
.legacy .hero__typing-text{font-size: var(--text-base); color: var(--accent-light); font-family: var(--font-mono); min-height: 1.5em; text-align: left;}
.legacy .hero__cursor{display: inline-block; width: 2px; height: 1.2em; background: var(--accent-light); animation: blink 1s infinite; vertical-align: text-bottom; margin-left: 1px;}
.legacy .hero__mockup{max-width: 700px; margin: 0 auto; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-xl), var(--glow-accent);}
.legacy .hero__mockup-bar{display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--bg-secondary); border-bottom: 1px solid var(--glass-border);}
.legacy .hero__mockup-dot{width: 10px; height: 10px; border-radius: 50%; background: var(--bg-tertiary);}
.legacy .hero__mockup-dot:first-child{background: #ef4444;}
.legacy .hero__mockup-dot:nth-child(2){background: #f59e0b;}
.legacy .hero__mockup-dot:nth-child(3){background: #0f766e;}
.legacy .hero__mockup-content{padding: var(--space-2xl); background: var(--bg-primary); min-height: 200px; display: flex; flex-direction: column; gap: var(--space-md);}
.legacy .hero__mockup-line{height: 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm);}
.legacy .hero__mockup-line:nth-child(1){width: 85%;}
.legacy .hero__mockup-line:nth-child(2){width: 70%;}
.legacy .hero__mockup-line:nth-child(3){width: 90%;}
.legacy .hero__mockup-line:nth-child(4){width: 45%;}
.legacy .trust-bar{padding: var(--space-3xl) 0;}
.legacy .trust-bar__grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--space-xl); text-align: center; justify-content: center; justify-items: center; max-width: 56rem; margin-inline: auto;}
.legacy .trust-bar__item{display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); width: min(100%, 14rem);}
.legacy .trust-bar__number{font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--accent-light);}
@media (min-width: 768px){
.legacy .trust-bar__number{font-size: var(--text-4xl);}
}
.legacy .trust-bar__label{font-size: var(--text-sm); color: var(--text-muted);}
.legacy .problem-solution{padding: var(--space-4xl) 0;}
.legacy .problem-solution__grid{display: grid; grid-template-columns: 1fr; gap: var(--space-xl);}
@media (min-width: 768px){
.legacy .problem-solution__grid{grid-template-columns: 1fr 1fr;}
}
.legacy .problem-card,.legacy .solution-card{padding: var(--space-2xl);}
.legacy .problem-card{border-color: rgba(239, 68, 68, 0.3);}
.legacy .solution-card{border-color: rgba(15, 118, 110, 0.3); box-shadow: var(--glow-success);}
.legacy .problem-card__header,.legacy .solution-card__header{display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);}
.legacy .problem-card__icon{width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--error-bg); color: var(--error);}
.legacy .solution-card__icon{width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--success-bg); color: var(--success);}
.legacy .problem-card__icon svg,.legacy .solution-card__icon svg{width: 1.25rem; height: 1.25rem;}
.legacy .accordion__trigger .accordion__chevron{width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; max-width: 1.25rem; max-height: 1.25rem; flex: 0 0 1.25rem;}
.legacy .problem-card__list,.legacy .solution-card__list{display: flex; flex-direction: column; gap: var(--space-md);}
.legacy .problem-card__list li,.legacy .solution-card__list li{display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy .problem-card__list li::before{content: '✕'; color: var(--error); font-weight: var(--weight-bold); flex-shrink: 0; margin-top: 1px;}
.legacy .solution-card__list li::before{content: '✓'; color: var(--success); font-weight: var(--weight-bold); flex-shrink: 0; margin-top: 1px;}
.legacy .how-it-works{padding: var(--space-4xl) 0;}
.legacy .steps{display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); max-width: 900px; margin: 0 auto;}
@media (min-width: 768px){
.legacy .steps{grid-template-columns: repeat(3, 1fr); gap: var(--space-xl);}
}
.legacy .step{text-align: center; padding: var(--space-xl);}
.legacy .step__number{width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-gradient); color: white; font-weight: var(--weight-bold); font-size: var(--text-lg); margin: 0 auto var(--space-lg);}
.legacy .step__title{font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-sm);}
.legacy .step__description{font-size: var(--text-sm); color: var(--text-secondary);}
.legacy .comparison{padding: var(--space-4xl) 0;}
.legacy .cta-banner{padding: var(--space-4xl) 0;}
.legacy .cta-banner__inner{padding: var(--space-2xl) var(--space-xl); text-align: center; position: relative; overflow: hidden; border-radius: var(--radius-xl);}
@media (min-width: 768px){
.legacy .cta-banner__inner{padding: var(--space-3xl) var(--space-4xl);}
}
.legacy .cta-banner__inner::after{display: none; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: radial-gradient(circle, rgba(23, 105, 255, 0.1) 0%, transparent 70%); pointer-events: none; z-index: 0;}
.legacy .cta-banner__title,.legacy .cta-banner__text,.legacy .cta-banner__buttons{position: relative; z-index: 1;}
.legacy .cta-banner__title{font-size: var(--text-3xl); margin-bottom: var(--space-md);}
@media (min-width: 768px){
.legacy .cta-banner__title{font-size: var(--text-4xl);}
}
.legacy .cta-banner__text{font-size: var(--text-lg); color: var(--text-secondary); max-width: 500px; margin: 0 auto var(--space-2xl);}
.legacy .cta-banner__buttons{display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap;}
.legacy .cta-banner__inner{background: #ffffff; border: 1px solid rgba(21, 25, 35, 0.09); box-shadow: 0 14px 34px rgba(35, 45, 66, 0.06);}

/* source file: blog.css */
.legacy .blog-back{display: inline-block; color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); margin-bottom: 1rem; transition: color 0.2s;}
.legacy .blog-back:hover{color: var(--accent);}
.legacy .blog-article h1{font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: 1rem; margin-bottom: 2rem;}
.legacy.blog-content h2,.legacy .blog-content h2{font-size: 1.375rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; color: var(--text-primary);}
.legacy.blog-content h3,.legacy .blog-content h3{font-size: 1.125rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--text-primary);}
.legacy.blog-content p,.legacy .blog-content p{color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem;}
.legacy.blog-content ul,.legacy .blog-content ul,.legacy.blog-content ol,.legacy .blog-content ol{color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem; padding-left: 1.5rem;}
.legacy.blog-content li,.legacy .blog-content li{margin-bottom: 0.5rem;}
.legacy.blog-content a,.legacy .blog-content a{color: var(--accent); text-decoration: underline; text-underline-offset: 2px;}
.legacy.blog-content a:hover,.legacy .blog-content a:hover{opacity: 0.8;}
.legacy.blog-content a.btn,.legacy .blog-content a.btn,main.legacy.blog-content a.btn{text-decoration: none; opacity: 1;}
.legacy.blog-content a.btn--primary,.legacy .blog-content a.btn--primary,main.legacy.blog-content a.btn--primary,.legacy.blog-content a.btn--primary:hover,.legacy .blog-content a.btn--primary:hover,main.legacy.blog-content a.btn--primary:hover{color: #06131d;}
.legacy.blog-content a.btn--secondary,.legacy .blog-content a.btn--secondary,main.legacy.blog-content a.btn--secondary{color: var(--text-primary);}
.legacy.blog-content a.btn--secondary:hover,.legacy .blog-content a.btn--secondary:hover,main.legacy.blog-content a.btn--secondary:hover{color: var(--accent-light);}
.legacy .blog-cta-row{display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0;}
main.legacy.blog-content .blog-cta-row a.btn{min-height: 3rem; padding: 0.875rem 1.35rem; border-radius: 10px; line-height: 1.2; text-align: center; white-space: normal;}
main.legacy.blog-content .blog-cta-row a.btn--primary,main.legacy.blog-content .blog-cta-row a.btn--primary:hover{color: #03111d; background: linear-gradient(135deg, #4d8aff, #60a5fa); border: 1px solid rgba(125, 211, 252, 0.8); box-shadow: 0 12px 28px rgba(23, 105, 255, 0.22);}
main.legacy.blog-content .blog-cta-row a.btn--secondary,main.legacy.blog-content .blog-cta-row a.btn--secondary:hover{color: #0f4fd8; background: rgba(250, 250, 253, 0.96); border: 1px solid rgba(125, 211, 252, 0.55); box-shadow: none;}
main.legacy.blog-content .blog-cta-row a.btn--secondary:hover{background: rgba(23, 105, 255, 0.18); border-color: rgba(125, 211, 252, 0.8);}
.legacy.blog-content table,.legacy .blog-content table{width: 100%; border-collapse: collapse; margin: 1.5rem 0;}
.legacy.blog-content th,.legacy .blog-content th,.legacy.blog-content td,.legacy .blog-content td{text-align: left; padding: 0.75rem; border-bottom: 1px solid rgba(21, 25, 35, 0.09); color: var(--text-secondary);}
.legacy.blog-content th,.legacy .blog-content th{color: var(--text-primary); font-weight: 600;}
.legacy.blog-content em,.legacy .blog-content em{font-style: italic;}
.legacy.blog-content blockquote,.legacy .blog-content blockquote{background: var(--glass-bg, rgba(30, 41, 59, 0.6)); border-left: 4px solid var(--accent, #1769ff); border-radius: 0 8px 8px 0; padding: 1.5rem 2rem; margin: 2rem 0;}
.legacy.blog-content blockquote p,.legacy .blog-content blockquote p{margin-bottom: 0; font-style: italic; color: var(--text-primary, #f1f5f9);}
.legacy.blog-content img,.legacy .blog-content img{max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0;}
.legacy.blog-content code,.legacy .blog-content code{background: #ffffff; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.9em; color: var(--accent-light, #1769ff);}
.legacy.blog-content pre,.legacy .blog-content pre{background: rgba(0, 0, 0, 0.3); border: 1px solid var(--glass-border, rgba(71, 85, 105, 0.3)); padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; font-size: 0.85rem; line-height: 1.6;}
.legacy.blog-content pre code,.legacy .blog-content pre code{background: none; padding: 0; color: var(--text-primary, #f1f5f9);}
.legacy.blog-content strong,.legacy .blog-content strong{color: var(--text-primary, #f1f5f9); font-weight: 600;}
.legacy.blog-content hr,.legacy .blog-content hr{border: none; border-top: 1px solid var(--glass-border, rgba(71, 85, 105, 0.3)); margin: 2.5rem 0;}
main.legacy.blog-content{max-width: 800px; margin: 0 auto; padding: calc(var(--nav-height) + 2rem) 2rem 4rem;}
main.legacy.blog-content h1{font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.5rem; color: var(--text-primary, #f1f5f9);}
main.legacy.blog-content section{padding: 0; margin-bottom: 1.5rem;}
main.legacy.blog-content nav{position: static; background: none; border: none; backdrop-filter: none; padding: 0; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-muted, #64748b);}
main.legacy.blog-content nav a{color: var(--accent, #1769ff); text-decoration: none;}
main.legacy.blog-content nav a:hover{color: var(--accent-light, #1769ff);}
@media (max-width: 768px){
main.legacy.blog-content{padding: calc(var(--nav-height) + 1.5rem) 1.25rem 3rem;}
main.legacy.blog-content h1{font-size: 1.75rem;}
.legacy .blog-cta-row{align-items: stretch;}
main.legacy.blog-content .blog-cta-row a.btn{width: 100%;}
.legacy.blog-content table,.legacy .blog-content table{display: block; overflow-x: auto;}
}
.legacy .blog-card{display: flex; flex-direction: column; text-decoration: none; transition: transform 0.2s, border-color 0.2s;}
.legacy .blog-card:hover{transform: translateY(-2px); border-color: var(--accent);}
.legacy .blog-card__read{margin-top: auto; padding-top: 1rem; color: var(--accent); font-size: var(--text-sm); font-weight: 500;}
.legacy .callout{border-left: 4px solid var(--accent, #1A6CFF); background: rgba(26, 108, 255, 0.08); padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0; font-size: 0.95em; line-height: 1.6;}
.legacy .callout strong:first-child{display: inline; margin-right: 4px;}
.legacy .callout-tip{border-left-color: #0f766e; background: rgba(15, 118, 110, 0.08);}
.legacy .callout-warning{border-left-color: #b87520; background: rgba(245, 158, 11, 0.08);}
.legacy .callout-info{border-left-color: var(--accent, #1A6CFF); background: rgba(26, 108, 255, 0.08);}
.legacy .stat-block{display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--stat-bg, rgba(26, 108, 255, 0.06)); border: 1px solid var(--stat-border, rgba(26, 108, 255, 0.15)); border-radius: 12px; padding: 24px 20px; margin: 24px 0;}
.legacy .stat-number{font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--accent, #1A6CFF);}
.legacy .stat-label{font-size: 0.9em; color: var(--text-muted, #666); margin-top: 8px; max-width: 280px;}
.legacy .tldr-box{background: var(--tldr-bg, #f0f7ff); border: 1px solid var(--tldr-border, #c8ddf5); border-radius: 10px; padding: 20px 24px; margin: 24px 0;}
.legacy .tldr-box h3{margin: 0 0 12px; font-size: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent, #1A6CFF);}
.legacy .tldr-box ul{margin: 0; padding-left: 20px;}
.legacy .tldr-box li{margin-bottom: 6px; line-height: 1.5;}
.legacy .key-takeaway{border: 2px solid var(--accent, #1A6CFF); border-radius: 10px; padding: 20px 24px; margin: 32px 0; background: var(--takeaway-bg, rgba(26, 108, 255, 0.03));}
.legacy .key-takeaway h3{margin: 0 0 12px; font-size: 1.05em; font-weight: 700; color: var(--accent, #1A6CFF);}
.legacy .key-takeaway ul{margin: 0; padding-left: 20px;}
.legacy .key-takeaway li{margin-bottom: 8px; line-height: 1.5;}
.legacy .process-flow{margin: 28px 0; padding-left: 8px;}
.legacy .process-step{display: flex; gap: 16px; position: relative; padding-bottom: 24px;}
.legacy .process-step:not(:last-child)::before{content: ''; position: absolute; left: 18px; top: 40px; bottom: 0; width: 2px; background: var(--accent, #1A6CFF); opacity: 0.3;}
.legacy .step-number{flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent, #1A6CFF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9em;}
.legacy .step-content{flex: 1; padding-top: 4px;}
.legacy .step-content strong{display: block; margin-bottom: 4px; font-size: 1.05em;}
.legacy .step-content p{margin: 0; color: var(--text-muted, #555); line-height: 1.5;}
.legacy .timeline{margin: 28px 0; padding-left: 8px; border-left: 3px solid var(--timeline-line, rgba(26, 108, 255, 0.2));}
.legacy .timeline-item{position: relative; padding: 0 0 24px 24px;}
.legacy .timeline-item::before{content: ''; position: absolute; left: -8px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent, #1A6CFF); border: 2px solid #fff;}
.legacy .timeline-date{display: block; font-weight: 700; font-size: 0.85em; color: var(--accent, #1A6CFF); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em;}
.legacy .timeline-content{line-height: 1.5; color: var(--text-body, #333);}
.legacy .comparison-chart{margin: 24px 0; overflow-x: auto; border-radius: 10px; border: 1px solid var(--chart-border, #e5e7eb);}
.legacy .comparison-chart table{width: 100%; border-collapse: collapse; font-size: 0.92em;}
.legacy .comparison-chart th{background: var(--chart-header-bg, #f8fafc); text-align: left; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid var(--chart-border, #e5e7eb);}
.legacy .comparison-chart td{padding: 10px 16px; border-bottom: 1px solid var(--chart-border, #e5e7eb);}
.legacy .comparison-chart tr:last-child td{border-bottom: none;}
.legacy .comparison-chart tr:hover td{background: var(--chart-hover, rgba(26, 108, 255, 0.04));}
@media (max-width: 768px){
.legacy .stat-number{font-size: 2.2rem;}
.legacy .stat-block{padding: 18px 16px;}
.legacy .callout{padding: 12px 16px;}
.legacy .tldr-box,.legacy .key-takeaway{padding: 16px 18px;}
.legacy .process-step{gap: 12px;}
.legacy .step-number{width: 30px; height: 30px; font-size: 0.8em;}
.legacy .process-step:not(:last-child)::before{left: 14px;}
.legacy .comparison-chart{font-size: 0.85em;}
.legacy .comparison-chart th,.legacy .comparison-chart td{padding: 8px 10px;}
}
.legacy .callout{background: rgba(26, 108, 255, 0.12);}
.legacy .callout-tip{background: rgba(15, 118, 110, 0.12);}
.legacy .callout-warning{background: rgba(245, 158, 11, 0.12);}
.legacy .callout-info{background: rgba(26, 108, 255, 0.12);}
.legacy .stat-block{background: #ffffff; border-color: rgba(21, 25, 35, 0.09);}
.legacy .stat-label{color: #3c4350;}
.legacy .tldr-box{background: rgba(26, 108, 255, 0.1); border-color: rgba(26, 108, 255, 0.2);}
.legacy .key-takeaway{background: rgba(26, 108, 255, 0.06); border-color: rgba(26, 108, 255, 0.3);}
.legacy .timeline{border-left-color: rgba(26, 108, 255, 0.3);}
.legacy .timeline-item::before{border-color: rgba(21, 25, 35, 0.09);}
.legacy .timeline-content{color: #3c4350;}
.legacy .step-content p{color: #3c4350;}
.legacy .comparison-chart{border-color: rgba(21, 25, 35, 0.09);}
.legacy .comparison-chart th{background: #ffffff; border-bottom-color: #8a92a0;}
.legacy .comparison-chart td{border-bottom-color: #8a92a0;}
.legacy .comparison-chart tr:hover td{background: rgba(255, 255, 255, 0.04);}
main.legacy.blog-content .blog-cta-row a.blog-cta-link,main.legacy.blog-content .blog-cta-row a.blog-cta-link:hover,main.legacy.blog-content .blog-cta-row a.blog-cta-link:focus,main.legacy.blog-content .blog-cta-row a.blog-cta-link:visited{text-decoration: none; opacity: 1;}
main.legacy.blog-content .blog-cta-row a.blog-cta-link--primary,main.legacy.blog-content .blog-cta-row a.blog-cta-link--primary:hover,main.legacy.blog-content .blog-cta-row a.blog-cta-link--primary:focus,main.legacy.blog-content .blog-cta-row a.blog-cta-link--primary:visited{color: #03111d; -webkit-text-fill-color: #03111d;}
main.legacy.blog-content .blog-cta-row a.blog-cta-link--secondary,main.legacy.blog-content .blog-cta-row a.blog-cta-link--secondary:hover,main.legacy.blog-content .blog-cta-row a.blog-cta-link--secondary:focus,main.legacy.blog-content .blog-cta-row a.blog-cta-link--secondary:visited{color: #0f4fd8; -webkit-text-fill-color: #0f4fd8;}

/* source file: programmatic.css */
.legacy .breadcrumbs{max-width: var(--max-width, 1200px); margin: 0 auto; padding: 0.75rem 2rem; font-size: 0.85rem; color: var(--text-muted, #9CA3AF);}
.legacy .breadcrumbs a{color: var(--text-secondary, #6B7280); text-decoration: none;}
.legacy .breadcrumbs a:hover{color: var(--accent, #2563EB);}
.legacy .breadcrumbs span{margin: 0 0.35rem;}
.legacy .page-hero{background: linear-gradient(135deg, var(--accent, #2563EB), var(--accent-dark, #1E40AF)); color: #fff; padding: 3.25rem 2rem; text-align: center;}
.legacy .page-hero h1{font-size: 2.5rem; font-weight: 700; line-height: 1.2; max-width: 800px; margin: 0 auto 1rem;}
.legacy .page-hero .subtitle{font-size: 1.2rem; color: rgba(255, 255, 255, 0.94); opacity: 1; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6;}
.legacy .page-hero .hero-cta{display: inline-block; background: #fff; color: var(--accent, #2563EB); -webkit-text-fill-color: currentColor; padding: 0.85rem 2rem; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 1.05rem; transition: transform 0.2s, box-shadow 0.2s;}
.legacy .page-hero .hero-cta:hover{transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.2);}
.legacy .content-wrapper{max-width: 800px; margin: 0 auto; padding: 2.25rem 2rem;}
.legacy .content-wrapper h2{font-size: 1.75rem; font-weight: 700; margin: 2rem 0 0.85rem;}
.legacy .content-wrapper h3{font-size: 1.3rem; font-weight: 600; margin: 1.5rem 0 0.75rem;}
.legacy .content-wrapper p{margin-bottom: 1.25rem; line-height: 1.7;}
.legacy .content-wrapper ul,.legacy .content-wrapper ol{margin: 1rem 0 1.5rem 1.5rem;}
.legacy .content-wrapper li{margin-bottom: 0.5rem;}
.legacy .content-wrapper a{color: var(--accent, #2563EB); text-decoration: underline; text-decoration-color: rgba(37, 99, 235, 0.3); text-underline-offset: 2px;}
.legacy .content-wrapper a:hover{text-decoration-color: var(--accent, #2563EB);}
.legacy .feature-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0;}
.legacy .feature-card{background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.5rem;}
.legacy .feature-card h4{font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;}
.legacy .feature-card p{font-size: 0.95rem; opacity: 0.8; margin: 0;}
.legacy .comparison-table{width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem;}
.legacy .comparison-table th,.legacy .comparison-table td{padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.1);}
.legacy .comparison-table th{font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;}
.legacy .comparison-table .check{color: #159970; font-weight: 600;}
.legacy .comparison-table .cross{color: #b91c1c;}
.legacy .comparison-table .partial{color: #b87520;}
.legacy .cta-section{background: rgba(255,255,255,0.05); border: 2px solid var(--accent, #2563EB); border-radius: 12px; padding: 2rem; text-align: center; margin: 2.25rem 0;}
.legacy .cta-section h3{font-size: 1.5rem; margin-bottom: 0.75rem;}
.legacy .cta-section p{opacity: 0.8; margin-bottom: 1.5rem;}
.legacy .cta-button{display: inline-block; background: var(--accent, #2563EB); color: #fff; -webkit-text-fill-color: currentColor; padding: 0.85rem 2rem; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 1.05rem; transition: transform 0.2s;}
.legacy .content-wrapper a.cta-button{display: inline-block; background: var(--accent-gradient, linear-gradient(135deg, var(--accent, #2563EB), var(--accent-dark, #1E40AF))); color: #06131d; -webkit-text-fill-color: currentColor; padding: 0.95rem 2rem; border-radius: 999px; font-weight: 800; text-decoration: none; text-decoration-color: transparent; box-shadow: var(--glow-accent, 0 0 22px rgba(16, 185, 129, 0.24));}
.legacy .content-wrapper a.cta-button:hover{color: #06131d; text-decoration: none; transform: translateY(-1px); box-shadow: var(--glow-accent-strong, 0 0 30px rgba(16, 185, 129, 0.34));}
.legacy .cta-button:hover{transform: translateY(-1px);}
.legacy .related-content{border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; margin-top: 2.25rem;}
.legacy .related-content h3{font-size: 1.2rem; margin-bottom: 1rem;}
.legacy .related-links{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.75rem;}
.legacy .related-links a{display: block; padding: 0.75rem 1rem; background: rgba(255,255,255,0.05); border-radius: 8px; text-decoration: none; color: var(--accent, #2563EB); font-weight: 500; font-size: 0.95rem; transition: background 0.2s;}
.legacy .related-links a:hover{background: rgba(255,255,255,0.1);}
.legacy.healthcare-compare-page .nav__logo svg,.legacy .healthcare-compare-page .nav__logo svg,.legacy.healthcare-compare-page .footer__logo svg,.legacy .healthcare-compare-page .footer__logo svg{color: var(--accent, #2563EB);}
.legacy .faq-item{margin-bottom: 1.5rem;}
.legacy .faq-item h4{font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem;}
.legacy .faq-item p{opacity: 0.8; font-size: 0.95rem;}
.legacy .compliance-badge{display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.15); padding: 0.35rem 0.85rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem;}
@media (max-width: 768px){
.legacy .page-hero h1{font-size: 1.75rem;}
.legacy .page-hero{padding: 2.5rem 1.5rem;}
.legacy .content-wrapper{padding: 2rem 1.5rem;}
}

/* source file: privacy.css */
.legacy .privacy-hero{padding: var(--space-4xl) 0 0; text-align: center;}
.legacy .privacy-hero + .section{padding-top: var(--space-xl);}
.legacy .privacy-hero + .section:has(.about-prose){padding-top: var(--space-2xl); padding-bottom: var(--space-3xl);}
.legacy .privacy-hero__quote{font-size: var(--text-2xl); font-weight: var(--weight-bold); font-style: italic; color: var(--text-primary); max-width: 600px; margin: var(--space-xl) auto 0;}
.legacy .privacy-hero .badge{margin-bottom: var(--space-lg);}
.legacy .privacy-hero h1{margin: 0 0 var(--space-lg);}
.legacy .about-prose{max-width: 42rem; padding-bottom: var(--space-3xl);}
.legacy .about-prose h2{margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-2xl); line-height: 1.25;}
.legacy .about-prose h2:first-child{margin-top: 0;}
.legacy .about-prose p{margin: 0 0 var(--space-lg); line-height: 1.7;}
.legacy .about-prose p:last-child{margin-bottom: 0;}
.legacy .about-prose .contact-meta{margin-top: var(--space-xl); color: var(--text-muted); font-size: var(--text-sm);}
@media (min-width: 768px){
.legacy .privacy-hero__quote{font-size: var(--text-3xl);}
}
.legacy .privacy-section{padding: var(--space-3xl) 0; max-width: 800px; margin: 0 auto;}
.legacy .privacy-section__title{font-size: var(--text-2xl); font-weight: var(--weight-bold); margin-bottom: var(--space-xl); display: flex; align-items: center; gap: var(--space-md);}
.legacy .privacy-section__title svg{width: 1.5rem; height: 1.5rem; color: var(--accent-light); flex-shrink: 0;}
.legacy .privacy-section__text{font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); margin-bottom: var(--space-lg);}
.legacy .data-grid{display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-xl);}
@media (min-width: 640px){
.legacy .data-grid{grid-template-columns: 1fr 1fr;}
}
.legacy .data-card{padding: var(--space-xl);}
.legacy .data-card__label{font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm);}
.legacy .data-card__value{font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--success);}
.legacy .security-list{display: flex; flex-direction: column; gap: var(--space-lg);}
.legacy .security-item{display: flex; align-items: flex-start; gap: var(--space-lg); padding: var(--space-lg);}
.legacy .security-item__icon{flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: rgba(23, 105, 255, 0.1); color: var(--accent-light);}
.legacy .security-item__icon svg{width: 1.25rem; height: 1.25rem;}
.legacy .security-item__content{flex: 1;}
.legacy .security-item__title{font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-xs);}
.legacy .security-item__text{font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy .contact-section{padding: var(--space-3xl) 0; text-align: center;}
.legacy .contact-card{max-width: 500px; margin: var(--space-xl) auto 0; padding: var(--space-2xl); text-align: center;}
.legacy .contact-card__email{font-size: var(--text-lg); color: var(--accent-light); font-weight: var(--weight-medium);}

/* source file: faq.css */
.legacy .faq-hero{padding: var(--space-4xl) 0 var(--space-xl); text-align: center;}
.legacy .faq-hero__subtitle{font-size: var(--text-lg); color: var(--text-secondary); max-width: 500px; margin: var(--space-md) auto 0;}
.legacy .faq-search{max-width: 500px; margin: var(--space-2xl) auto; position: relative;}
.legacy .faq-search__icon{position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none;}
.legacy .faq-search__icon svg{width: 1.25rem; height: 1.25rem;}
.legacy .faq-search .input{padding-left: 2.75rem;}
.legacy .faq-search__clear{position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); padding: 0.25rem; border-radius: var(--radius-sm); display: none;}
.legacy .faq-search__clear--visible{display: flex;}
.legacy .faq-search__clear:hover{color: var(--text-primary);}
.legacy .faq-search__clear svg{width: 1rem; height: 1rem;}
.legacy .faq-no-results{text-align: center; padding: var(--space-3xl); color: var(--text-muted); display: none;}
.legacy .faq-no-results--visible{display: block;}
.legacy .faq-categories{padding: var(--space-xl) 0 var(--space-4xl); max-width: 800px; margin: 0 auto;}
.legacy .faq-category{margin-bottom: var(--space-2xl);}
.legacy .faq-category__title{font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-accent); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--glass-border);}
.legacy .accordion{display: flex; flex-direction: column; gap: var(--space-sm);}
.legacy .accordion__item{border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass-bg); overflow: hidden; transition: border-color var(--transition-fast);}
.legacy .accordion__item--hidden{display: none;}
.legacy .accordion__item--open{border-color: rgba(23, 105, 255, 0.3);}
.legacy .accordion__trigger{width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); text-align: left; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); cursor: pointer; transition: color var(--transition-fast);}
.legacy .accordion__trigger:hover{color: var(--accent-light);}
.legacy .accordion__chevron{flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--text-muted); transition: transform var(--transition-base);}
.legacy .accordion__item--open .accordion__chevron{transform: rotate(180deg); color: var(--accent-light);}
.legacy .accordion__content{max-height: 0; overflow: hidden; transition: max-height var(--transition-slow);}
.legacy .accordion__body{padding: 0 var(--space-xl) var(--space-xl); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy .accordion__body a{color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px;}
.legacy .accordion__body a:hover{color: var(--accent);}

/* source file: features.css */
.legacy .features-hero{padding: var(--space-4xl) 0 var(--space-2xl); text-align: center;}
.legacy .features-hero__subtitle{font-size: var(--text-lg); color: var(--text-secondary); max-width: 600px; margin: var(--space-md) auto 0;}
.legacy .architecture{padding: var(--space-3xl) 0;}
.legacy .architecture__diagram{display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); padding: var(--space-2xl); max-width: 800px; margin: var(--space-2xl) auto 0;}
@media (min-width: 768px){
.legacy .architecture__diagram{flex-direction: row; justify-content: center;}
}
.legacy .architecture__node{display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); min-width: 140px; text-align: center;}
.legacy .architecture__node--accent{border-color: rgba(23, 105, 255, 0.4); box-shadow: var(--glow-accent);}
.legacy .architecture__node-icon{width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; color: var(--accent-light);}
.legacy .architecture__node-icon svg{width: 1.5rem; height: 1.5rem;}
.legacy .architecture__node-label{font-size: var(--text-sm); font-weight: var(--weight-medium);}
.legacy .architecture__node-sublabel{font-size: var(--text-xs); color: var(--text-muted);}
.legacy .architecture__arrow{color: var(--accent); font-size: var(--text-xl); transform: rotate(90deg);}
@media (min-width: 768px){
.legacy .architecture__arrow{transform: none;}
}
.legacy .feature-section{padding: var(--space-3xl) 0;}
.legacy .feature-section:nth-child(even){background: var(--bg-secondary);}
.legacy .feature-section__grid{display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center;}
@media (min-width: 768px){
.legacy .feature-section__grid{grid-template-columns: 1fr 1fr;}
.legacy .feature-section__grid--reverse{direction: rtl;}
.legacy .feature-section__grid--reverse > *{direction: ltr;}
}
.legacy .feature-section__content{display: flex; flex-direction: column; gap: var(--space-lg);}
.legacy .feature-section__badge{align-self: flex-start;}
.legacy .feature-section__title{font-size: var(--text-2xl);}
@media (min-width: 768px){
.legacy .feature-section__title{font-size: var(--text-3xl);}
}
.legacy .feature-section__description{font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy .feature-section__list{display: flex; flex-direction: column; gap: var(--space-md);}
.legacy .feature-section__list-item{display: flex; align-items: flex-start; gap: var(--space-md); font-size: var(--text-sm); color: var(--text-secondary);}
.legacy .feature-section__list-icon{flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--success); margin-top: 2px;}
.legacy .feature-section__visual{display: flex; justify-content: center;}
.legacy .feature-section__visual-card{width: 100%; padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md);}
.legacy .specs{padding: var(--space-3xl) 0;}
.legacy .specs__table{margin-top: var(--space-2xl);}
.legacy .feature-detail-card{padding: var(--space-xl);}
.legacy .feature-detail-card__title{font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm);}
.legacy .feature-detail-card__title svg{width: 1.25rem; height: 1.25rem; color: var(--accent-light);}
.legacy .feature-detail-card__text{font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal);}
.legacy .pipeline{display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md);}
@media (min-width: 640px){
.legacy .pipeline{flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center;}
}
.legacy .pipeline__step{flex: 1 1 auto; min-width: 0; padding: var(--space-sm) var(--space-md); background: rgba(23, 105, 255, 0.05); border: 1px solid rgba(23, 105, 255, 0.2); border-radius: var(--radius-lg); text-align: center; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap;}
.legacy .pipeline__arrow{color: var(--accent); text-align: center; font-size: var(--text-xs); transform: rotate(90deg); flex-shrink: 0;}
@media (min-width: 640px){
.legacy .pipeline__arrow{transform: none;}
}

/* source file: pill.css */
.legacy .recording-pill{display: inline-flex; align-items: center; gap: 0.875rem; background: var(--bg-secondary); border-radius: 9999px; padding: 0.75rem 1.25rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(71, 85, 105, 0.3); margin: 2rem auto 0;}
.legacy .recording-pill__dot{width: 12px; height: 12px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); animation: pill-pulse 1.5s ease-in-out infinite; flex-shrink: 0;}
@keyframes pill-pulse{0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 4px rgba(239, 68, 68, 0.3); }}
.legacy .recording-pill__waveform{display: flex; align-items: center; gap: 3px; height: 28px;}
.legacy .recording-pill__bar{width: 4px; border-radius: 2px; background: var(--accent-light); animation: pill-wave 1s ease-in-out infinite;}
.legacy .recording-pill__bar:nth-child(1){height: 40%; animation-delay: 0s;}
.legacy .recording-pill__bar:nth-child(2){height: 65%; animation-delay: 0.1s;}
.legacy .recording-pill__bar:nth-child(3){height: 85%; animation-delay: 0.2s;}
.legacy .recording-pill__bar:nth-child(4){height: 100%; animation-delay: 0.15s;}
.legacy .recording-pill__bar:nth-child(5){height: 85%; animation-delay: 0.25s;}
.legacy .recording-pill__bar:nth-child(6){height: 65%; animation-delay: 0.3s;}
.legacy .recording-pill__bar:nth-child(7){height: 40%; animation-delay: 0.05s;}
@keyframes pill-wave{0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }}
.legacy .recording-pill__timer{font-family: var(--font-mono); font-size: var(--text-base); font-weight: 500; color: var(--text-primary); min-width: 2.5rem; letter-spacing: 0.02em;}
.legacy .recording-pill--static{margin: 0;}
}


/* ==== HAND TUNED OVERRIDES (everything below this line is hand authored) ==== */


/* Part two, hand authored 2026-09-20 for voice-private#155, batch 1 (compare, guides).
   Unlayered on purpose, so it corrects part one whatever the old specificity was.
   Every block says what the legacy markup was doing and what the light system
   should make of it. Targets are the tokens in already-yours.css: Inter, the blue
   signal colour, flat white cards on the paper ground, pill buttons, 18px radii. */

/* The bridged region itself
   <main> used to be the whole document ground sitting under a fixed navigation
   bar. It is now an ordinary block under the h-header, so it gives up the
   viewport height, the nav offset, its own background and its scroll container. */
main.legacy{min-height:0;background:transparent;overflow-x:visible;padding-top:0}

/* Article pages (main.blog-content): one measure, and the type scale
   already-yours.css uses for .page article, so a migrated guide reads exactly
   like a page written on the new template. */
main.legacy.blog-content{max-width:820px;margin:0 auto;padding:40px 24px 84px;
  font-size:16.5px;line-height:1.65;color:#2a2e36}
main.legacy.blog-content h1{margin:0 0 18px;font-size:clamp(34px,4.6vw,48px);
  line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
main.legacy.blog-content h2{margin:42px 0 12px;font-size:26px;line-height:1.2;
  letter-spacing:-.02em;font-weight:750;color:var(--ink)}
main.legacy.blog-content h3{margin:30px 0 8px;font-size:19px;line-height:1.32;
  letter-spacing:-.01em;font-weight:700;color:var(--ink)}
main.legacy.blog-content h4{margin:24px 0 6px;font-size:16.5px;font-weight:700;color:var(--ink)}
main.legacy.blog-content p{margin:0 0 16px;font-size:16.5px;line-height:1.65;color:#2a2e36}
main.legacy.blog-content > article > section,
main.legacy.blog-content section{padding:0;margin:0 0 4px}
main.legacy.blog-content hr{border:0;border-top:1px solid var(--line);margin:40px 0}
@media (max-width:780px){
  main.legacy.blog-content{padding:28px 20px 60px}
  main.legacy.blog-content h1{font-size:32px}
  main.legacy.blog-content h2{font-size:23px;margin-top:34px}
}

/* Programmatic pages: same measure and scale for the prose column, and the old
   full bleed blue slab hero becomes a headline on the paper ground. A coloured
   band directly under a white header read as a different site. */
main.legacy .page-hero{max-width:820px;margin:0 auto;padding:42px 24px 6px;
  background:none;color:var(--ink);text-align:left}
main.legacy .page-hero h1{max-width:none;margin:0 0 16px;font-size:clamp(34px,4.6vw,48px);
  line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
main.legacy .page-hero .subtitle{max-width:660px;margin:0 0 24px;color:#5f6470;
  font-size:18px;line-height:1.55;opacity:1}
main.legacy .page-hero .hero-cta,main.legacy .page-hero .hero-cta:hover{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 24px;border-radius:999px;background:var(--blue);color:#fff;
  -webkit-text-fill-color:#fff;font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:0 12px 26px rgba(var(--blue-rgb),.2);transform:none}
main.legacy .content-wrapper{max-width:820px;margin:0 auto;padding:4px 24px 56px;
  font-size:16.5px;line-height:1.65;color:#2a2e36}
main.legacy .content-wrapper h2{margin:42px 0 12px;font-size:26px;line-height:1.2;
  letter-spacing:-.02em;font-weight:750;color:var(--ink)}
main.legacy .content-wrapper h3{margin:30px 0 8px;font-size:19px;line-height:1.32;
  font-weight:700;color:var(--ink)}
main.legacy .content-wrapper p{margin:0 0 16px;font-size:16.5px;line-height:1.65;color:#2a2e36}
main.legacy .breadcrumbs{max-width:820px;margin:0 auto;padding:22px 24px 0;
  font-size:13px;color:#8a92a0}
main.legacy .breadcrumbs a{color:#6e737f;font-weight:500;text-decoration:none}
main.legacy .breadcrumbs a:hover{color:var(--blue)}
@media (max-width:780px){
  main.legacy .page-hero,main.legacy .content-wrapper,main.legacy .breadcrumbs{padding-left:20px;padding-right:20px}
  main.legacy .page-hero h1{font-size:32px}
}

/* Section pages (the ones built from .container and .section): keep the wide
   rhythm already-yours-legacy.css sets, just stop the first section from
   crowding the header and give the old .hero the new headline scale. */
main.legacy > .hero,main.legacy .hero{padding:52px 0 60px}
main.legacy .hero::before{display:none}
main.legacy .hero__badge{margin:0 0 20px}
main.legacy .hero__title{max-width:880px;margin:0 auto 20px;font-size:clamp(36px,4.8vw,56px);
  line-height:1.05;letter-spacing:-.022em}
main.legacy .hero__subtitle{max-width:660px;margin:0 auto 30px;font-size:18px;
  line-height:1.55;color:#5f6470}
main.legacy .hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 8px}
main.legacy .section-header{margin:0 auto 34px}

/* Lists
   The legacy reset stripped every marker and already-yours-legacy.css paints a
   blue dot on each item. That is right for prose, wrong for numbered steps and
   for lists that are really navigation, so those get their markers back. */
main.legacy ol{list-style:decimal;margin:14px 0;padding-left:1.45em}
main.legacy ol > li{margin:9px 0;padding-left:.15em}
main.legacy ol > li::before,main.legacy ol > li::after{content:none}
main.legacy .related-pages li,main.legacy .breadcrumbs li,
main.legacy table li,main.legacy .accordion li,main.legacy .related-links li{padding-left:0}
main.legacy .related-pages li::before,main.legacy .related-pages li::after,
main.legacy .breadcrumbs li::before,main.legacy .breadcrumbs li::after,
main.legacy table li::before,main.legacy table li::after,
main.legacy .related-links li::before,main.legacy .related-links li::after{content:none}
/* Lists that carry their own icon (an svg, a check or cross span, or an inline
   flex row) keep it; the shim dot and its indent come off. */
main.legacy li.feature-section__list-item::before,main.legacy li.feature-section__list-item::after,
main.legacy .proof-list li::before,main.legacy .proof-list li::after,
main.legacy li[style*="display:flex"]::before,main.legacy li[style*="display:flex"]::after,
main.legacy li[style*="display: flex"]::before,main.legacy li[style*="display: flex"]::after,
main.legacy li:has(> svg:first-child)::before,main.legacy li:has(> svg:first-child)::after,
main.legacy li:has(> .check:first-child)::before,main.legacy li:has(> .check:first-child)::after,
main.legacy li:has(> .cross:first-child)::before,main.legacy li:has(> .cross:first-child)::after{content:none}
main.legacy li.feature-section__list-item,main.legacy .proof-list li,
main.legacy li[style*="display:flex"],main.legacy li[style*="display: flex"],
main.legacy li:has(> svg:first-child),main.legacy li:has(> .check:first-child),
main.legacy li:has(> .cross:first-child){padding-left:0}
/* Feature visuals sit beside their checklist, not stretched to its height. */
main.legacy .feature-section__grid{align-items:center}
/* Problem and solution lists carry their meaning in the marker, so keep it. */
main.legacy .problem-card__list li::before,main.legacy .solution-card__list li::before{
  position:absolute;left:0;top:.1em;width:auto;height:auto;border-radius:0;background:none;
  font-weight:700}
main.legacy .problem-card__list li::after,main.legacy .solution-card__list li::after{content:none}
main.legacy .problem-card__list li,main.legacy .solution-card__list li{
  display:block;position:relative;padding-left:24px}
main.legacy .problem-card__list li::before{content:"\2715";color:#b91c1c}
main.legacy .solution-card__list li::before{content:"\2713";color:#0f766e}

/* Tables
   These are the load bearing element on every compare page: a white card on the
   paper, a tinted header band, quiet row rules, and a scroll of their own once
   the column gets narrower than the columns need. */
main.legacy table,main.legacy .comparison-table,main.legacy .table{
  width:100%;min-width:0;border-collapse:collapse;margin:28px 0;font-size:15px;
  background:#fff;border:1px solid #e3e7ee;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 26px rgba(35,45,66,.045)}
main.legacy th{padding:13px 16px;text-align:left;vertical-align:bottom;
  background:#eef1f6;color:var(--ink);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid #e3e7ee;
  opacity:1;white-space:normal}
main.legacy td{padding:13px 16px;text-align:left;vertical-align:top;
  color:#3c4350;font-size:15px;border-bottom:1px solid #eef0f5}
main.legacy tbody tr:last-child td{border-bottom:0}
main.legacy tbody tr:nth-child(even) td{background:#fcfdfe}
main.legacy tbody td:first-child{color:var(--ink);font-weight:600}
main.legacy .col-highlight,main.legacy td.col-highlight{background:rgba(var(--blue-rgb),.05)}
main.legacy .col-highlight-header,main.legacy th.col-highlight-header{
  background:rgba(var(--blue-rgb),.1);color:var(--blue)}
main.legacy .check{color:#0f766e;font-weight:700}
main.legacy .cross{color:#9aa1ad;font-weight:600}
main.legacy .partial{color:#b45309;font-weight:600}
main.legacy .table-wrap,main.legacy .comparison-chart{border:0;border-radius:0;overflow-x:auto}
@media (max-width:760px){
  main.legacy table,main.legacy .comparison-table,main.legacy .table{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px}
  main.legacy th,main.legacy td{padding:11px 13px}
}

/* Buttons
   One pill, filled for primary and outlined for secondary. The legacy sheets
   painted primary label text near black on a blue fill, which fails contrast,
   and the blog sheet repeated that on every call to action row. */
main.legacy .btn,main.legacy a.btn,main.legacy .blog-cta-row a.btn,
main.legacy .cta-button,main.legacy a.cta-button,main.legacy .content-wrapper a.cta-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;border:1px solid transparent;border-radius:999px;
  font-size:15px;font-weight:700;line-height:1.25;text-align:center;white-space:normal;
  text-decoration:none;opacity:1;transition:background .2s,color .2s,box-shadow .2s}
main.legacy .btn--lg,main.legacy a.btn--lg{min-height:54px;padding:14px 28px;font-size:16px}
main.legacy .btn--sm,main.legacy a.btn--sm{min-height:38px;padding:8px 18px;font-size:13.5px}
main.legacy .btn--primary,main.legacy a.btn--primary,
main.legacy a.btn--primary:hover,main.legacy a.btn--primary:visited,
main.legacy .blog-cta-row a.btn--primary,main.legacy .blog-cta-row a.btn--primary:hover,
main.legacy .blog-cta-row a.blog-cta-link--primary,
main.legacy .blog-cta-row a.blog-cta-link--primary:hover,
main.legacy .blog-cta-row a.blog-cta-link--primary:visited,
main.legacy .cta-button,main.legacy a.cta-button,
main.legacy .content-wrapper a.cta-button,main.legacy .content-wrapper a.cta-button:hover{
  background:var(--blue);border-color:transparent;color:#fff;-webkit-text-fill-color:#fff;
  box-shadow:0 12px 26px rgba(var(--blue-rgb),.2);transform:none}
main.legacy .btn--primary:hover,main.legacy a.btn--primary:hover,
main.legacy .blog-cta-row a.btn--primary:hover{box-shadow:0 14px 30px rgba(var(--blue-rgb),.3)}
main.legacy .btn--secondary,main.legacy a.btn--secondary,
main.legacy a.btn--secondary:hover,main.legacy a.btn--secondary:visited,
main.legacy .blog-cta-row a.btn--secondary,main.legacy .blog-cta-row a.btn--secondary:hover,
main.legacy .blog-cta-row a.blog-cta-link--secondary,
main.legacy .blog-cta-row a.blog-cta-link--secondary:hover,
main.legacy .blog-cta-row a.blog-cta-link--secondary:visited{
  background:#fff;border-color:rgba(var(--blue-rgb),.3);color:var(--blue);
  -webkit-text-fill-color:var(--blue);box-shadow:0 6px 16px rgba(35,45,66,.05);transform:none}
main.legacy .blog-cta-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:26px 0}
@media (max-width:640px){
  main.legacy .blog-cta-row{flex-direction:column}
  main.legacy .blog-cta-row a.btn{width:100%}
}

/* Badges: a soft accent pill, never a bordered chip. */
main.legacy .badge,main.legacy .compliance-badge{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:0;
  border-radius:999px;background:rgba(var(--blue-rgb),.09);color:var(--blue);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
main.legacy .badge--success{background:rgba(15,118,110,.09);color:#0f766e}

/* Cards
   Everything that used to be a glass panel, a tinted stat box or a bordered
   callout box becomes the same flat white card on the paper. Several of these
   carried dark theme leftovers (white at 5 percent alpha) that were invisible
   on a light ground. */
main.legacy .glass-card,main.legacy .glass,main.legacy .glass-gradient-border,
main.legacy .card,main.legacy .feature-card,main.legacy .stat-block,
main.legacy .tldr-box,main.legacy .key-takeaway,main.legacy .cta-section,
main.legacy .cta-banner__inner,main.legacy .accordion__item,main.legacy details{
  background:#fff;border:1px solid #e3e7ee;border-radius:18px;
  box-shadow:0 12px 30px rgba(35,45,66,.05);backdrop-filter:none;-webkit-backdrop-filter:none}
main.legacy .glass-gradient-border::before,main.legacy .cta-banner__inner::after{display:none}
main.legacy .feature-card,main.legacy .card{padding:26px 28px}
main.legacy .feature-card h4,main.legacy .card__title{margin:0 0 8px;font-size:17px;
  font-weight:700;color:var(--ink)}
main.legacy .feature-card p,main.legacy .card__description{margin:0;font-size:15px;
  line-height:1.6;color:#4a5160;opacity:1}
main.legacy .tldr-box,main.legacy .key-takeaway{padding:22px 26px;margin:28px 0}
main.legacy .tldr-box h3,main.legacy .key-takeaway h3{margin:0 0 12px;font-size:11.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#68707e}
main.legacy .stat-block{padding:28px 24px;margin:28px 0}
main.legacy .stat-number{font-size:2.6rem;font-weight:800;letter-spacing:-.025em;color:var(--blue)}
main.legacy .stat-label{margin-top:8px;font-size:14.5px;color:#5f6470}
main.legacy .cta-section{padding:32px 30px;margin:32px 0;text-align:center}
main.legacy .cta-section h3{margin:0 0 10px;font-size:22px;font-weight:750;color:var(--ink)}
main.legacy .cta-section p{margin:0 auto 22px;max-width:520px;color:#5f6470;opacity:1}
main.legacy .cta-banner{padding:56px 0}
main.legacy .cta-banner__inner{padding:40px 34px;border-radius:22px}
main.legacy .cta-banner__title{margin:0 0 12px;font-size:clamp(26px,3vw,34px);
  letter-spacing:-.02em;color:var(--ink)}
main.legacy .cta-banner__text{margin:0 auto 24px;max-width:540px;font-size:16.5px;color:#5f6470}
main.legacy .cta-banner__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media (max-width:640px){
  main.legacy .cta-banner__inner{padding:28px 22px}
  main.legacy .cta-section{padding:24px 20px}
}

/* Callouts: a quiet tint and a blue rule, the only place a fill reads as a signal. */
main.legacy .callout{margin:26px 0;padding:16px 20px;border-left:3px solid var(--blue);
  border-radius:0 12px 12px 0;background:rgba(var(--blue-rgb),.05);color:#2a2e36;
  font-size:15.5px;line-height:1.62}
main.legacy .callout p{margin:0 0 8px;color:#2a2e36;font-size:15.5px}
main.legacy .callout p:last-child{margin-bottom:0}
main.legacy .callout strong:first-child{color:var(--ink)}
main.legacy .callout-tip{border-left-color:#0f766e;background:rgba(15,118,110,.06)}
main.legacy .callout-warning{border-left-color:#b45309;background:rgba(180,83,9,.06)}
main.legacy .callout-info{border-left-color:var(--blue);background:rgba(var(--blue-rgb),.05)}
main.legacy blockquote{margin:28px 0;padding:18px 24px;border-left:3px solid var(--blue);
  border-radius:0 12px 12px 0;background:#f5f7fb}
main.legacy blockquote p{margin:0;font-style:italic;color:#2a2e36}

/* Process steps and timelines keep their shape, with the accent spent sparingly. */
main.legacy .process-flow,main.legacy .timeline{margin:28px 0}
main.legacy .step-number{background:var(--blue);color:#fff}
main.legacy .step-content strong{color:var(--ink);font-size:16.5px}
main.legacy .step-content p{margin:0;color:#4a5160;font-size:15.5px}
main.legacy .timeline{border-left-color:rgba(var(--blue-rgb),.22)}
main.legacy .timeline-item::before{background:var(--blue);border-color:#fff}
main.legacy .timeline-date{color:var(--blue)}
main.legacy .timeline-content{color:#3c4350}
main.legacy .step__number{background:var(--blue);color:#fff}

/* Code: the blog sheet put code blocks on a dark panel, which no longer belongs. */
main.legacy code{padding:.12em .42em;border:1px solid #e3e7ee;border-radius:6px;
  background:#f2f5fa;color:#28466e;font-size:.9em}
main.legacy pre{margin:24px 0;padding:18px 20px;border:1px solid #e3e7ee;border-radius:12px;
  background:#f5f7fb;color:#2a2e36;font-size:14px;line-height:1.6;overflow-x:auto}
main.legacy pre code{padding:0;border:0;background:none;color:inherit}

/* Links: blue and underlined inside prose, never underlined on a control. */
main.legacy.blog-content a:where(:not([class*="btn"]):not([class*="button"])),main.legacy .content-wrapper a:where(:not([class*="btn"]):not([class*="button"])){color:var(--blue);
  font-weight:500;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;opacity:1}
main.legacy.blog-content a:where(:not([class*="btn"]):not([class*="button"])):hover,main.legacy .content-wrapper a:where(:not([class*="btn"]):not([class*="button"])):hover{opacity:1;color:#0f4fd8}
main.legacy a.btn,main.legacy .hero-cta,main.legacy .cta-button,
main.legacy .related-links a,main.legacy .related-pages a,main.legacy .breadcrumbs a,
main.legacy .blog-back,main.legacy .blog-card{text-decoration:none}

/* Related content blocks: the Jev block from already-yours.css, and the older
   programmatic one restyled to match it. */
main.legacy .related-pages{width:min(760px,calc(100% - 48px));max-width:none;margin:72px auto 0;
  padding:24px 0 0;border-top:1px solid var(--line)}
@media(max-width:780px){main.legacy .related-pages{width:calc(100% - 32px)}}
main.legacy .related-pages h2{margin:0 0 14px;font-size:18px;font-weight:700;letter-spacing:-.01em}
main.legacy .related-pages a{color:#3c4350;font-size:15px;font-weight:500}
main.legacy .related-pages a:hover{color:var(--blue)}
main.legacy .related-content{max-width:820px;margin:36px auto 0;padding:26px 24px 0;
  border-top:1px solid var(--line)}
main.legacy .related-content h3{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--ink)}
main.legacy .related-links a{display:block;padding:13px 16px;border:1px solid #e3e7ee;
  border-radius:12px;background:#fff;color:#3c4350;font-size:15px;font-weight:500}
main.legacy .related-links a:hover{border-color:rgba(var(--blue-rgb),.32);color:var(--blue)}

/* Accordions and plain details rows. */
main.legacy .accordion{display:flex;flex-direction:column;gap:10px;max-width:860px;margin:0 auto}
main.legacy .accordion__item,main.legacy details{padding:0;margin:0 0 10px}
main.legacy .accordion__trigger,main.legacy summary{padding:16px 22px;font-size:16px;
  font-weight:600;color:var(--ink);letter-spacing:-.005em;cursor:pointer}
main.legacy .accordion__chevron{color:#8a92a0}
main.legacy details.accordion__item > *:not(summary){padding:0 22px 16px;color:#4a5160}
main.legacy .faq-item h4{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 8px}
main.legacy .faq-item p{opacity:1;color:#4a5160;font-size:15.5px}

/* Prose rhythm on the section built pages (the ones using .container and .section
   rather than main.blog-content). They are long reads too, and the shim's 8px
   paragraph gap, sized for short homepage sections, reads cramped at this length. */
main.legacy p{margin:0 0 15px;font-size:16.5px;line-height:1.65;color:#2a2e36}
main.legacy li{font-size:16.5px;line-height:1.6;color:#2a2e36}
main.legacy h2{color:var(--ink)}
main.legacy h3{margin:28px 0 8px;color:var(--ink)}
main.legacy h4{margin:22px 0 6px;color:var(--ink)}
main.legacy .section-header h2,main.legacy .section-header h3{margin-top:0}

/* A negative comparison cell still has to be readable: the muted grey the legacy
   sheet used for .cross sat at about 2.6 to 1 on white. */
main.legacy .cross{color:#5f6470}

/* List indent, re asserted.
   already-yours-legacy.css draws each bullet as an absolutely positioned dot and
   pays for it with a 26px indent on the item. Thirty nine of the legacy pages
   carry their own inline style block, and several of them reset that padding with
   a single class selector, which drops the dot on top of the first word. This
   rule outranks any `.something li` in a page's inline sheet, so the dot always
   has its gutter. Items that are navigation rather than prose opt out above. */
main.legacy li{position:relative;padding-left:26px}
main.legacy ol > li{padding-left:.15em}
main.legacy .related-pages li,main.legacy .breadcrumbs li,main.legacy table li,
main.legacy .accordion li,main.legacy .related-links li{padding-left:0}

/* Hero headline to subhead: the 1.05 line height leaves almost no visual gap at
   the 20px the old sheet set. */
main.legacy .hero__title{margin-bottom:30px}
main.legacy .page-hero h1{margin-bottom:18px}

/* Narrow phones: let a three column comparison fit the screen instead of
   scrolling inside a card that is only 350px wide. */
@media (max-width:480px){
  main.legacy th{padding:10px 10px;font-size:11.5px;letter-spacing:.03em}
  main.legacy td{padding:10px 10px;font-size:13.5px}
}

/* Page headline on the section built pages. Most of them carry a bare <h1> with
   no class, so it was still picking up the old base.css scale (60px at desktop)
   with no space under it. One headline scale for the whole site. */
main.legacy h1{margin:0 0 26px;font-size:clamp(36px,4.6vw,54px);line-height:1.05;
  letter-spacing:-.022em;font-weight:800;color:var(--ink)}

/* Sixteen pages put .blog-content on a nested div instead of on <main>, so the
   prose link treatment has to follow the class and not the element. */
main.legacy .blog-content a:where(:not([class*="btn"]):not([class*="button"])),main.legacy .prose-block a:where(:not([class*="btn"]):not([class*="button"])){color:var(--blue);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;opacity:1}
main.legacy .blog-content a.btn,main.legacy .blog-content a.blog-cta-link,
main.legacy .prose-block a.btn{text-decoration:none}

/* No horizontal page scroll on a phone.
   The legacy sheets leaned on `body{overflow-x:hidden}` to swallow anything too
   wide. <main> is no longer the document ground, so that crutch is gone and the
   overflow has to be fixed rather than hidden. Grid and flex children default to
   a min-content minimum, which lets one long token in a card push the track past
   the viewport, so give them a shrinkable minimum and let long words break. */
main.legacy .grid > *,main.legacy [class*="__grid"] > *,main.legacy [class*="-grid"] > *,
main.legacy [class*="cards"] > *,main.legacy .steps > *,main.legacy .job-grid > *{min-width:0}
main.legacy .glass-card,main.legacy .glass,main.legacy .card,main.legacy .feature-card,
main.legacy .job-box,main.legacy .answer-box,main.legacy .tldr-box,main.legacy .key-takeaway,
main.legacy .stat-block,main.legacy .cta-section,main.legacy .callout{min-width:0}
main.legacy p,main.legacy li,main.legacy h1,main.legacy h2,main.legacy h3,main.legacy h4,
main.legacy td,main.legacy th,main.legacy dd,main.legacy dt,main.legacy figcaption{overflow-wrap:break-word}
main.legacy code{overflow-wrap:anywhere}

/* Safety net for the remaining 90 legacy pages. The old shell hid every overflow
   with `body{overflow-x:hidden}`; <main> is no longer the document ground, so a
   page that still has one wide element would put a scrollbar on the whole
   document. Clip rather than scroll: this does not create a scroll container, so
   the tables that scroll inside their own wrapper still scroll. Real overflow is
   fixed above; this only stops an unmigrated case from reaching the viewport. */
main.legacy{overflow-x:clip}

/* Controls keep their own colours (2026-09-20 hotfix). The prose link rules above
   exclude button-styled anchors; filled primaries are white on the accent. */
main.legacy a.vpw-btn-primary,main.legacy a.vpw-btn-primary:hover{color:#fff}