/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);font-family:var(--font-body);font-size:var(--text-body-size);color:var(--text-body)}
a{color:var(--text-accent);text-decoration:none}
a:hover{color:var(--brand-secondary-hover);text-decoration:underline}
img{max-width:100%;display:block}
.ec-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter-page)}

/* ---------- type ---------- */
.ec-navlink{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:15px;color:var(--text-heading);cursor:pointer;transition:color var(--motion-base) var(--ease-standard)}
.ec-navlink:hover{color:var(--brand-primary);text-decoration:none}
.ec-navlink.is-on{color:var(--brand-primary)}
.ec-h1{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-display-1);line-height:var(--leading-tight);color:var(--text-heading);margin:0}
.ec-lead{font-size:var(--text-card-title);line-height:var(--leading-snug);color:var(--text-body);margin:0;max-width:48ch}
.ec-label{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:var(--text-label);color:var(--text-muted)}
.ec-body{font-size:var(--text-body-size);line-height:var(--leading-body);color:var(--text-body);max-width:58ch;margin:0}
.ec-tool-title{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-display-2);line-height:var(--leading-tight);color:var(--text-heading);margin:0}

/* ---------- buttons (ports Button.jsx exactly: 3 sizes, 4 variants, hover/press) ---------- */
.ec-btn{
  font-family:var(--font-condensed);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;
  border-radius:var(--radius-sm);cursor:pointer;display:inline-block;line-height:1.1;border:none;
  padding:14px 28px;font-size:17px; /* falls back to the .md size if a size class is ever left off */
  transition:background var(--motion-base) var(--ease-standard),transform var(--motion-fast) var(--ease-standard);
}
.ec-btn:hover{text-decoration:none}
.ec-btn:active{transform:scale(var(--press-scale))}
.ec-btn.sm{padding:8px 18px;font-size:13px}
.ec-btn.md{padding:14px 28px;font-size:17px}
.ec-btn.lg{padding:22px 40px;font-size:var(--text-cta)}
.ec-btn.full{display:block;width:100%;text-align:center}
.ec-btn.primary{background:var(--brand-primary);color:var(--text-on-primary)}
.ec-btn.primary:hover{background:var(--brand-primary-hover);color:var(--text-on-primary)}
.ec-btn.secondary{background:transparent;color:var(--brand-secondary);border:var(--border-width-strong) solid var(--brand-secondary)}
.ec-btn.secondary:hover{background:var(--ec-blue-200);color:var(--brand-secondary)}
.ec-btn.ghost{background:transparent;color:var(--text-body);border:none}
.ec-btn.ghost:hover{color:var(--text-heading)}
.ec-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- cards / tiles / bands (ports Card, IconTile, OutlineCard, SectionBand, StatLine) ---------- */
.ec-card{background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-6)}

.ec-tile{border-radius:var(--radius-md);background:var(--surface-tile);flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-tile);color:#fff;font-family:var(--font-condensed);font-weight:700;overflow:hidden}
.ec-tile img{width:100%;height:100%;object-fit:contain}
.ec-tile.size-40{width:40px;height:40px;border-radius:var(--radius-sm);font-size:13px}
.ec-tile.size-44{width:44px;height:44px;border-radius:var(--radius-sm);font-size:14px}
.ec-tile.size-64{width:64px;height:64px;font-size:18px}
.ec-tile.size-96{width:96px;height:96px;border-radius:var(--radius-lg);font-size:26px}

.ec-outline-card{border:var(--border-width-strong) solid var(--brand-secondary);border-radius:var(--radius-lg);background:var(--surface-card);color:var(--brand-secondary)}
.ec-outline-card.center{text-align:center}

.ec-band{background:var(--surface-band);min-height:var(--band-height);display:flex;align-items:center;padding:0 var(--gutter-page)}
.ec-band span{font-family:var(--font-condensed);font-weight:700;font-size:var(--text-band);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-invert)}

.ec-stat{font-family:var(--font-condensed);font-weight:700;font-size:var(--text-hero);line-height:var(--leading-tight);letter-spacing:var(--tracking-caps);text-transform:uppercase}

/* ---------- feature row (home page tool list) ---------- */
.ec-feature-row{display:flex;gap:var(--space-5);align-items:flex-start;text-decoration:none;transition:opacity var(--motion-base) var(--ease-standard)}
.ec-feature-row:hover{opacity:.82;text-decoration:none}
.ec-feature-row-title{font-family:var(--font-condensed);font-weight:700;font-size:var(--text-card-title);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-heading);margin-bottom:var(--space-1)}
.ec-feature-row-desc{font-size:var(--text-body-size);line-height:var(--leading-snug);color:var(--text-body);max-width:34ch}

/* ---------- btn-blue wrapper: forces the secondary outline button to solid blue ---------- */
.ec-btn-blue .ec-btn{background:var(--brand-secondary)!important;border:var(--border-width) solid var(--brand-secondary)!important;color:var(--text-invert)!important}
.ec-btn-blue .ec-btn:hover{background:var(--brand-secondary-hover)!important;border-color:var(--brand-secondary-hover)!important}

/* ---------- tools page: sticky picker ---------- */
.ec-picker{position:sticky;top:0;z-index:5;background:var(--surface-page);border-bottom:var(--border-width) solid var(--border-hairline)}
.ec-pick{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;border-bottom:3px solid transparent;transition:opacity var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard);text-decoration:none}
.ec-pick:hover{opacity:.82;text-decoration:none}
.ec-pick.is-on{border-bottom-color:var(--brand-primary)}
.ec-pick-name{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-card-title);color:var(--text-heading);line-height:1.05}
.ec-pick.is-on .ec-pick-name{color:var(--brand-primary)}
.ec-demo{border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden;min-height:320px;display:flex;align-items:center;justify-content:center;background:var(--surface-sunken);color:var(--text-muted);font-size:var(--text-small);text-align:center;padding:var(--space-6)}

/* ---------- pricing page ---------- */
.ec-toggle{display:inline-flex;border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sm);overflow:hidden}
.ec-toggle button{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:15px;padding:var(--space-3) var(--space-6);border:0;background:none;color:var(--text-heading);cursor:pointer;transition:background var(--motion-base) var(--ease-standard),color var(--motion-base) var(--ease-standard)}
.ec-toggle button:hover{color:var(--brand-primary)}
.ec-toggle button.is-on{background:var(--brand-secondary);color:var(--text-invert)}
.ec-tier{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--space-5);height:100%;padding:var(--space-8);position:relative}
.ec-tiername{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-card-title);color:var(--text-heading);margin:0}
.ec-price{font-family:var(--font-condensed);font-weight:700;font-size:var(--text-display-2);line-height:1;color:var(--text-heading);letter-spacing:var(--tracking-caps)}
.ec-priceunit{font-family:var(--font-body);font-weight:400;font-size:var(--text-small);color:var(--text-muted);letter-spacing:0}
.ec-feat{display:flex;gap:var(--space-3);align-items:flex-start}
.ec-dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--brand-primary);display:inline-block;flex:0 0 auto;margin-top:7px}
.ec-featured-label{color:var(--brand-secondary);font-size:var(--text-label);line-height:var(--leading-tight);padding-top:2px;font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label)}

/* ---------- how it works page ---------- */
.ec-step{display:grid;grid-template-columns:88px 1fr;gap:var(--space-6);align-items:start;border-top:var(--border-width) solid var(--border-hairline);padding:var(--space-8) 0}
.ec-stepnum{font-family:var(--font-condensed);font-weight:700;font-size:var(--text-display-2);line-height:1;color:var(--brand-primary);letter-spacing:var(--tracking-caps)}
.ec-steptitle{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:var(--text-card-title);color:var(--text-heading);margin:0 0 var(--space-2)}
.ec-chip{display:flex;gap:var(--space-3);align-items:center;border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4)}
.ec-chipname{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);font-size:13px;color:var(--text-heading)}

/* ---------- floating "subscribe" cta, appears on scroll ---------- */
.ec-float-cta{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:10;box-shadow:var(--shadow-raised);border-radius:var(--radius-sm);opacity:0;pointer-events:none;transition:opacity var(--motion-base) var(--ease-standard)}
.ec-float-cta.is-visible{opacity:1;pointer-events:auto}

/* ---------- sign-up form (ports SubscribeScreen's Field pattern) ---------- */
.ec-field{display:grid;gap:var(--space-2)}
.ec-field-label{font-size:var(--text-label);letter-spacing:var(--tracking-label);font-weight:700;text-transform:uppercase;color:var(--text-muted)}
.ec-field input{font:400 var(--text-body-size)/1.4 var(--font-body);padding:12px 14px;border:1px solid var(--border-hairline);border-radius:var(--radius-sm);outline:none;color:var(--text-heading);width:100%;transition:box-shadow var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard)}
.ec-field input:focus{border-color:var(--brand-secondary);box-shadow:var(--focus-ring)}
.ec-error{background:#FDEDED;color:var(--ec-red-600);padding:10px 14px;border-radius:var(--radius-sm);font-size:var(--text-small)}

/* ---------- footer ---------- */
.ec-footer{border-top:var(--border-width) solid var(--border-hairline);margin-top:auto}
.ec-footer-inner{display:flex;justify-content:space-between;align-items:center;padding:var(--space-8) var(--gutter-page);flex-wrap:wrap;gap:var(--space-4)}
.ec-footer-tag{font-family:var(--font-condensed);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-tagline);font-size:var(--text-label);color:var(--text-muted)}
.ec-footer-note{font-size:var(--text-small);color:var(--text-muted)}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  :root{--gutter-page:24px}
  .ec-h1{font-size:32px}
  .ec-hero-grid,.ec-tools-grid,.ec-detail-grid,.ec-signup-grid{grid-template-columns:1fr!important}
  .ec-tiers-grid{grid-template-columns:1fr!important}
  header .ec-mkt-nav-inner{flex-wrap:wrap;gap:var(--space-3)}
}