/* components.css — header, footer, sections, cards, buttons, receipt, pricing, form. */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font:600 15px/1 var(--font-sans);
  padding:12px 20px;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:opacity .15s ease, box-shadow .15s ease;
  min-height:44px;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--pill-bg);color:var(--pill-fg);}
.btn-primary:hover{opacity:.85;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong);}
.btn-ghost:hover{box-shadow:0 0 0 5px var(--ring);}
@media (max-width:640px){.btn{width:100%;justify-content:center;}}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:64px;}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:700;}
.brand:hover{text-decoration:none;}
.brand-mark{color:var(--accent);}
.brand-name{font-weight:700;letter-spacing:-.01em;}
.primary-nav{display:flex;align-items:center;gap:var(--space-8);}
.primary-nav>ul{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0;}
.primary-nav a{color:var(--muted);font-size:var(--fs-small);font-weight:600;}
.primary-nav a:hover{color:var(--text);}
.nav-actions{display:flex;align-items:center;gap:var(--space-4);}
.cross-link{color:var(--faint);font-size:var(--fs-small);font-family:var(--font-mono);}
.theme-toggle{
  background:transparent;border:1px solid var(--line-strong);color:var(--text);
  border-radius:var(--radius-pill);padding:8px 12px;min-height:44px;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-mono-label);
}
.theme-toggle:hover{box-shadow:0 0 0 4px var(--ring);}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-strong);color:var(--text);border-radius:var(--radius-sm);min-height:44px;min-width:44px;cursor:pointer;font-size:18px;}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .primary-nav{
    display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;
    align-items:stretch;gap:var(--space-4);background:var(--bg);border-bottom:var(--border);
    padding:var(--space-6) var(--gutter);
  }
  .primary-nav.open{display:flex;}
  .primary-nav>ul{flex-direction:column;gap:var(--space-4);}
  .nav-actions{flex-direction:column;align-items:stretch;}
}

/* Sections */
.section{padding-block:var(--space-24);}
.section-alt{background:var(--bg-soft);}
.page-head{padding-block:var(--space-16) var(--space-12);}
.hero{padding-block:var(--space-32) var(--space-24);}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);}
.cta-band{text-align:left;}

/* Step grid */
.step-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.step-grid-wide{grid-template-columns:repeat(2,1fr);}
.step-card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);}
.step-n{color:var(--faint);font-size:var(--fs-mono-label);letter-spacing:.14em;}
.step-name{font-size:var(--fs-h3);margin:var(--space-3) 0 var(--space-2);}
.step-body{color:var(--muted);margin:0;}
@media (max-width:820px){.step-grid,.step-grid-wide{grid-template-columns:1fr;}}

/* Tiers */
.tier-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4);}
.tier-item{display:flex;gap:var(--space-6);align-items:flex-start;background:var(--surface);border:var(--border);border-radius:var(--radius);padding:var(--space-6);}
.tier-n{color:var(--faint);white-space:nowrap;min-width:64px;}
.tier-name{font-size:var(--fs-h3);margin:0 0 var(--space-2);}
.tier-body{color:var(--muted);margin:0;}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);}
.card-title{font-size:var(--fs-h3);margin:0 0 var(--space-3);}
.card p{color:var(--muted);margin:0;}
@media (max-width:820px){.card-grid{grid-template-columns:1fr;}}

.plain-list{padding-left:1.1em;color:var(--muted);}
.plain-list li{margin-bottom:var(--space-3);}

/* Receipt */
.receipt{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow);max-width:var(--container);}
.receipt-tag{display:inline-block;background:var(--info-bg);color:var(--info);border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--fs-mono-label);letter-spacing:.12em;margin-bottom:var(--space-6);}
.receipt-fields{margin:0;}
.receipt-field{display:grid;grid-template-columns:220px 1fr;gap:var(--space-6);padding:var(--space-4) 0;border-top:var(--border);}
.receipt-field:first-child{border-top:none;}
.receipt-field dt{color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-mono-label);}
.receipt-field dd{margin:0;}
.receipt-desc{display:block;color:var(--muted);margin-bottom:var(--space-2);}
.receipt-example{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-small);background:var(--chip-bg);color:var(--text);border-radius:var(--radius-sm);padding:4px 8px;word-break:break-word;}
@media (max-width:640px){.receipt-field{grid-template-columns:1fr;gap:var(--space-2);}}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.price-card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3);}
.price-card-featured{border:1px solid var(--text);box-shadow:var(--shadow);}
.price-flag{color:var(--accent);letter-spacing:.12em;}
.price-name{font-size:var(--fs-h3);margin:0;}
.price-amount{margin:0;}
.price-figure{font-size:var(--fs-h2);font-weight:700;}
.price-period{color:var(--faint);font-size:var(--fs-body);}
.price-detail{color:var(--muted);margin:0;flex:1;}
.price-cta{margin-top:var(--space-4);}
@media (max-width:820px){.price-grid{grid-template-columns:1fr;}}

/* Footer */
.site-footer{border-top:var(--border);background:var(--bg-soft);padding-block:var(--space-16);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--space-8);}
.footer-def{color:var(--muted);max-width:36ch;}
.footer-col-title{font-size:var(--fs-mono-label);letter-spacing:.14em;color:var(--faint);margin:0 0 var(--space-4);}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);}
.footer-col a{color:var(--muted);font-size:var(--fs-small);}
.footer-col a:hover{color:var(--text);}
.footer-col li{color:var(--muted);font-size:var(--fs-small);}
.footer-legal{margin-top:var(--space-12);padding-top:var(--space-6);border-top:var(--border);color:var(--faint);font-size:var(--fs-small);}
.footer-links a{color:var(--faint);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* Form */
.form-container{max-width:var(--measure);}
.request-form{display:flex;flex-direction:column;gap:var(--space-6);}
.form-intro{color:var(--muted);}
.form-row{display:flex;flex-direction:column;gap:var(--space-2);}
.form-row label{font-weight:600;font-size:var(--fs-small);}
.form-row input,.form-row select,.form-row textarea{
  font-family:var(--font-sans);font-size:var(--fs-body);
  padding:12px 14px;min-height:44px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
}
.form-row textarea{min-height:110px;resize:vertical;}
.req{color:var(--crit);}
.field-hint{color:var(--faint);font-size:var(--fs-small);margin:0;}
.field-error{color:var(--crit);font-size:var(--fs-small);margin:0;}
.form-check{flex-direction:row;align-items:flex-start;gap:var(--space-3);}
.form-check input{min-height:auto;width:20px;height:20px;margin-top:2px;}
.form-check label{font-weight:400;}
.form-submit{align-self:flex-start;margin-top:var(--space-2);}
.form-status{padding:var(--space-4);border-radius:var(--radius-sm);border:var(--border);}
.form-status.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok);}
.form-status.err{background:var(--crit-bg);color:var(--crit);border-color:var(--crit);}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}