/* tgleads — component styles. Mobile-first. Follows website-design skill.
 *
 * Dials: VARIANCE 8, MOTION 6, DENSITY 2.
 * All values from tokens.css — no raw px/hex/ms.
 */

@import url('tokens.css');

/* ---- reset & base ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-text);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-display)}
h1{font-size:var(--fs-3xl);color:var(--text)}
h2{font-size:var(--fs-2xl);color:var(--text)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}

/* ---- container ---- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--sp-6)
}

/* ---- nav ---- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-4) var(--sp-6);
  max-width:var(--container);
  margin:0 auto;
  min-height:48px
}
.site-nav .logo{
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:700;
  color:var(--primary);
  text-decoration:none
}
.lang-switcher{
  display:flex;
  gap:var(--sp-2);
  align-items:center
}
.lang-switcher select{
  font-family:var(--font-text);
  font-size:var(--fs-sm);
  padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  min-height:36px;
  min-width:80px
}
.lang-switcher select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- hero ---- */
.hero{
  padding:var(--sp-16) 0 var(--sp-12);
  text-align:center
}
.hero h1{color:var(--primary);margin-bottom:var(--sp-4)}
.hero .subhead{
  font-size:var(--fs-md);
  color:var(--text-muted);
  max-width:var(--measure);
  margin:0 auto var(--sp-8)
}
.hero .cta-btn{
  display:inline-block;
  font-family:var(--font-text);
  font-size:var(--fs-md);
  font-weight:600;
  padding:var(--sp-3) var(--sp-8);
  border-radius:var(--radius);
  border:none;
  background:var(--primary);
  color:var(--surface);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
  text-decoration:none;
  min-height:48px;
  min-width:44px
}
.hero .cta-btn:hover,.hero .cta-btn:focus-visible{
  background:var(--primary-hover);
  text-decoration:none
}

/* ---- sections shared ---- */
section{
  padding:var(--sp-16) 0
}
section:nth-child(even){background:var(--surface-2)}
.section-label{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:var(--sp-2)
}
.section-title{
  margin-bottom:var(--sp-6)
}

/* ---- how it works ---- */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  counter-reset:step;
  list-style:none
}
.step{
  position:relative;
  padding:var(--sp-6);
  background:var(--surface);
  border-radius:var(--radius-lg);
  border-left:4px solid var(--primary)
}
.step::before{
  counter-increment:step;
  content:counter(step);
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:700;
  color:var(--primary);
  display:block;
  margin-bottom:var(--sp-2)
}
.step h3{margin-bottom:var(--sp-2)}
.step p{color:var(--text-muted);max-width:var(--measure)}

/* ---- products comparison ---- */
.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
  margin-top:var(--sp-6)
}
.product-card{
  padding:var(--sp-8);
  background:var(--surface);
  border-radius:var(--radius-lg)
}
.product-card.featured{border:2px solid var(--accent)}
.product-card h3{
  font-size:var(--fs-lg);
  color:var(--primary);
  margin-bottom:var(--sp-2)
}
.product-card .product-price{
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  color:var(--text);
  margin:var(--sp-4) 0
}
.product-card .product-price small{
  font-family:var(--font-text);
  font-size:var(--fs-sm);
  color:var(--text-muted)
}
.product-card ul{
  list-style:none;
  margin:var(--sp-4) 0;
  color:var(--text-muted)
}
.product-card ul li{
  padding:var(--sp-2) 0;
  padding-left:var(--sp-6);
  position:relative
}
.product-card ul li::before{
  content:'✓';
  color:var(--accent);
  position:absolute;
  left:0;
  font-weight:700
}

/* ---- pricing ---- */
.pricing-table{
  margin-top:var(--sp-6);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch
}
.pricing-table table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
  font-size:var(--fs-sm)
}
.pricing-table th{
  text-align:left;
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface-2);
  color:var(--text);
  font-weight:600;
  border-bottom:2px solid var(--primary)
}
.pricing-table td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  color:var(--text-muted)
}
.pricing-table tr:last-child td{border-bottom:none}
.pricing-table .price-cell{
  font-weight:600;
  color:var(--text)
}
.pricing-note{
  margin-top:var(--sp-4);
  font-size:var(--fs-sm);
  color:var(--text-muted);
  font-style:italic
}

/* ---- FAQ ---- */
.faq-list{
  max-width:720px;
  margin:var(--sp-6) auto 0
}
.faq-list details{
  margin-bottom:var(--sp-3);
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden
}
.faq-list summary{
  padding:var(--sp-4) var(--sp-6);
  font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:48px
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:'+';
  font-size:var(--fs-lg);
  color:var(--accent);
  transition:transform var(--dur-fast) var(--ease-out)
}
.faq-list details[open] summary::after{
  content:'\2212'
}
.faq-list .faq-body{
  padding:0 var(--sp-6) var(--sp-6);
  color:var(--text-muted)
}

/* ---- signup form ---- */
.signup-form{
  max-width:640px;
  margin:var(--sp-6) auto 0
}
.signup-form form{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4)
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1)
}
.form-row label{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text)
}
.form-row input,
.form-row select,
.form-row textarea{
  font-family:var(--font-text);
  font-size:var(--fs-base);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text);
  min-height:44px
}
.form-row textarea{min-height:80px;resize:vertical}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:2px solid var(--focus-ring);
  outline-offset:-1px
}
.form-row .field-error{
  font-size:var(--fs-xs);
  color:var(--accent);
  display:none
}
.form-row .field-error:not(:empty){display:block}
.form-row input:invalid:not(:placeholder-shown) ~ .field-error,
.form-row select:invalid:not(:placeholder-shown) ~ .field-error{display:block}
.checkbox-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2)
}
.checkbox-group label{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-weight:400;
  font-size:var(--fs-base);
  cursor:pointer;
  padding:var(--sp-2) var(--sp-3);
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border)
}
.checkbox-group input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--primary)
}
.radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2)
}
.radio-group label{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-weight:400;
  font-size:var(--fs-base);
  cursor:pointer;
  padding:var(--sp-2) var(--sp-4);
  background:var(--surface-2);
  border-radius:var(--radius-sm);
  border:1px solid var(--border)
}
.radio-group input[type="radio"]{accent-color:var(--primary)}

.submit-btn{
  font-family:var(--font-text);
  font-size:var(--fs-md);
  font-weight:600;
  padding:var(--sp-3) var(--sp-8);
  border-radius:var(--radius);
  border:none;
  background:var(--primary);
  color:var(--surface);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
  min-height:48px
}
.submit-btn:disabled{
  opacity:0.5;
  cursor:not-allowed
}
.submit-btn:not(:disabled):hover{background:var(--primary-hover)}

.thanks-message{
  display:none;
  text-align:center;
  padding:var(--sp-8)
}
.thanks-message:target{display:block}
.thanks-message h2{color:var(--primary);margin-bottom:var(--sp-4)}
.thanks-message p{color:var(--text-muted);max-width:var(--measure);margin:0 auto}

/* ---- footer ---- */
.site-footer{
  padding:var(--sp-12) 0;
  border-top:1px solid var(--border);
  font-size:var(--fs-sm);
  color:var(--text-muted)
}
.site-footer .container{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  align-items:center;
  text-align:center
}
.footer-links{
  display:flex;
  gap:var(--sp-4);
  flex-wrap:wrap;
  justify-content:center
}
.footer-links a{color:var(--text-muted)}
.footer-links a:hover{color:var(--text)}

/* ---- 404 page ---- */
.error-page{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--sp-16) var(--sp-6)
}
.error-page h1{
  font-size:var(--fs-3xl);
  color:var(--primary);
  margin-bottom:var(--sp-4)
}
.error-page p{color:var(--text-muted);margin-bottom:var(--sp-8)}
.error-page a{color:var(--accent)}

/* ---- legal pages ---- */
.legal-page{
  max-width:var(--measure);
  margin:0 auto;
  padding:var(--sp-16) var(--sp-6)
}
.legal-page h1{
  font-size:var(--fs-2xl);
  color:var(--primary);
  margin-bottom:var(--sp-8)
}
.legal-page h2{
  font-size:var(--fs-lg);
  margin-top:var(--sp-8);
  margin-bottom:var(--sp-4)
}
.legal-page p,.legal-page ul{
  margin-bottom:var(--sp-4);
  color:var(--text-muted)
}
.legal-page ul{padding-left:var(--sp-6)}

/* ---- tablet (768px+) ---- */
@media (min-width:768px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer .container{
    flex-direction:row;
    justify-content:space-between;
    text-align:left
  }
  .form-row.inline{
    flex-direction:row;
    gap:var(--sp-4)
  }
  .form-row.inline > *{flex:1}
}

/* ---- desktop (1024px+) ---- */
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,1fr)}
  section{padding:var(--sp-24) 0}
  .hero{padding:var(--sp-24) 0 var(--sp-16)}
}

/* ---- motion (VARIANCE 8, MOTION 6) ---- */
@media (prefers-reduced-motion:no-preference){
  .step,.product-card,.faq-list details{
    transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)
  }
  .step:hover,.product-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px oklch(0 0 0 / 0.25)
  }
  .faq-list details:hover{
    transform:translateY(-1px)
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important
  }
}

/* grid lines for pricing (accent stripe on hover) */
.pricing-table tbody tr:hover td{background:var(--surface-2)}