/* ============================================================================
   Einstein Tools — public marketing site
   Shares the design tokens defined on :root in css/einstein.css (load that
   file first). Everything here is prefixed .etm- so it can never collide with
   the in-app component vocabulary. Hand-written, no build step.
   ========================================================================== */

:root {
  --etm-header-h:64px;   /* .etm-header-inner; the header is 1px taller for its border */
  /* marketing-only shades (not part of the app token set) */
  --etm-body:#4B5568;          /* marketing body copy            */
  --etm-body-soft:#6B7280;     /* secondary marketing copy       */
  --etm-body-strong:#374151;   /* list/table copy                */
  --etm-on-navy:#C6D5EC;       /* body copy on navy              */
  --etm-on-navy-dim:#8FA5C6;   /* labels/footnotes on navy       */
  --etm-on-navy-link:#DFE9F8;  /* links on navy                  */
  --etm-mint:#7FE0A7;          /* money figure on navy           */
  --etm-tint:#F8FAFD;          /* vignette panel background      */
  --etm-hairline:#EFF1F5;      /* vignette inner divider         */
  --etm-hairline-2:#F4F6F9;    /* hero row divider               */
  --etm-shadow-card:0 18px 44px rgba(27,55,100,.10);
  --etm-shadow-badge:0 14px 30px rgba(20,41,73,.35);
  --etm-shadow-tier:0 14px 34px rgba(43,125,224,.14);
  --etm-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------- base ---- */

body.etm {
  margin:0;
  font-family:var(--et-font);
  background:#fff;
  color:var(--et-ink-marketing);
  -webkit-font-smoothing:antialiased;
}
.etm a { color:var(--et-blue); text-decoration:none; }
/* Specificity note: this is (0,2,1) and outranks any single-class
   `.thing:hover { color }`. Component hover rules that set a colour on an
   anchor must be scoped (`.etm .thing:hover`) or this will win. */
.etm a:hover { color:var(--et-blue-hover); }
body.etm img { max-width:100%; }
body.etm input::placeholder,
body.etm textarea::placeholder { color:var(--et-faint); }
.etm .material-symbols-rounded {
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  user-select:none;
  line-height:1;
}
.etm-num { font-variant-numeric:tabular-nums; }
.etm-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.etm .etm-skip {
  position:absolute; left:-9999px; top:0;
  background:#fff; color:var(--et-navy); padding:10px 16px; z-index:60;
  border:1px solid var(--et-line); border-radius:var(--et-radius-sm); font-weight:600;
}
.etm .etm-skip:focus { left:12px; top:12px; }

/* ------------------------------------------------------------ measures ---- */

.etm-wrap { max-width:1120px; margin:0 auto; padding:0 28px; }
.etm-wrap.w-1060 { max-width:1060px; }
.etm-wrap.w-1020 { max-width:1020px; }
.etm-wrap.w-1000 { max-width:1000px; }
.etm-wrap.w-900  { max-width:900px; }
.etm-wrap.w-760  { max-width:760px; }
.etm-wrap.w-720  { max-width:720px; }
.etm-wrap.w-640  { max-width:640px; }

/* ---------------------------------------------------------------- type ---- */

/* Sentence case with an amber dot; no all-caps eyebrows anywhere on the site. */
.etm-eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; color:var(--et-blue);
}
.etm-eyebrow::before {
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--et-amber); box-shadow:0 0 0 4px rgba(245,158,11,.20);
}
.etm-eyebrow.is-muted { color:var(--et-muted); }
.etm-eyebrow.is-on-navy { color:var(--etm-on-navy); }

.etm-h1 {
  /* Windows-standard display face (Joel, 2026-09-03): Segoe UI's display cut
     where present, plain Segoe UI elsewhere, system sans as the last resort. */
  font-family:"Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:-.015em;
  font-size:54px; line-height:1.05; font-weight:700;
  color:var(--et-navy); margin:14px 0 0; text-wrap:pretty;
}
.etm-h1.is-sm { font-size:44px; line-height:1.08; }
.etm-h1.is-xs { font-size:42px; line-height:1.1; }
.etm-h2 {
  font-family:var(--et-display); font-size:34px; font-weight:700;
  color:var(--et-navy); margin:0; text-wrap:pretty; line-height:1.15;
}
.etm-h2.is-lg { font-size:38px; }
.etm-h2.is-md { font-size:33px; }
.etm-h2.is-sm { font-size:31px; }
.etm-h2.is-xs { font-size:29px; }
.etm-h3 { font-family:var(--et-display); font-size:25px; font-weight:700; color:var(--et-navy); margin:14px 0 0; }

.etm-lead { font-size:18.5px; line-height:1.6; color:var(--etm-body); margin:20px 0 0; }
.etm-lead.is-sm { font-size:17.5px; }
.etm-lead.is-xs { font-size:17px; }
.etm-center { text-align:center; }

/* -------------------------------------------------------------- header ---- */

.etm-header {
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.9); border-bottom:1px solid transparent;
  backdrop-filter:saturate(1.6) blur(10px); -webkit-backdrop-filter:saturate(1.6) blur(10px);
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* Without JS the hairline is always on; etm_site.js lifts it at the top of the page. */
html:not(.etm-js) .etm-header, .etm-header.is-scrolled { border-bottom-color:var(--et-line); }
.etm-header.is-scrolled { box-shadow:0 6px 24px rgba(27,55,100,.06); }
.etm-header-inner { height:var(--etm-header-h); display:flex; align-items:center; gap:26px; }
.etm-brand { display:flex; align-items:center; gap:10px; flex:none; }
.etm-brand:hover { text-decoration:none; }
.etm-brand img { width:30px; height:auto; display:block; }
.etm-wordmark {
  font-weight:700; font-size:15.5px; letter-spacing:.12em;
  color:var(--et-navy); white-space:nowrap;
}
.etm-wordmark span { color:var(--et-blue); }

.etm-nav { display:flex; align-items:center; gap:26px; margin-left:auto; }
.etm .etm-navlink { font-size:15.5px; font-weight:600; color:var(--et-ink-marketing); white-space:nowrap; }
.etm .etm-navlink:hover { color:var(--et-blue); }
.etm-navlink.is-active { color:var(--et-blue); font-weight:700; }

/* the compact CTA button + hamburger only exist below the nav breakpoint */
.etm .etm-header-inner > .etm-btn { display:none; }
.etm-menu { display:none; position:relative; margin-left:auto; }
.etm-menu > summary {
  list-style:none; cursor:pointer;
  width:40px; height:40px; border:1.5px solid var(--et-input-border);
  border-radius:var(--et-radius-sm); display:flex; align-items:center;
  justify-content:center; color:var(--et-navy);
}
.etm-menu > summary::-webkit-details-marker { display:none; }
.etm-menu > summary:hover { border-color:var(--et-navy); }
.etm-menu[open] > summary { border-color:var(--et-navy); }
.etm-menu-panel {
  position:absolute; right:0; top:calc(100% + 10px);
  background:#fff; border:1px solid var(--et-line); border-radius:var(--et-radius);
  box-shadow:var(--etm-shadow-card); padding:8px; min-width:200px;
  display:flex; flex-direction:column; gap:2px;
  animation:etm-pop .18s var(--etm-ease);
}
@keyframes etm-pop { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } }
.etm-menu-panel a {
  font-size:16.5px; font-weight:600; color:var(--et-ink-marketing);
  padding:10px 12px; border-radius:var(--et-radius-sm);
}
.etm-menu-panel a:hover { background:var(--et-bg); color:var(--et-blue); }

/* ------------------------------------------------------------- buttons ---- */

.etm .etm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:16.5px; font-weight:600; line-height:1;
  padding:13px 22px; border-radius:9px; box-sizing:border-box;
  background:var(--et-blue); color:#fff; border:1.5px solid transparent;
  cursor:pointer; text-align:center; white-space:nowrap;   /* a button label never wraps */
  box-shadow:0 1px 2px rgba(27,55,100,.18), inset 0 1px 0 rgba(255,255,255,.14);
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s var(--etm-ease);
}
.etm .etm-btn:hover { background:var(--et-blue-hover); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 6px 16px rgba(43,125,224,.28); }
.etm .etm-btn:active { transform:none; }
.etm-btn .material-symbols-rounded { font-size:19px; transition:transform .2s var(--etm-ease); }
.etm-btn:hover .material-symbols-rounded, .etm-textlink:hover .material-symbols-rounded { transform:translateX(3px); }
.etm-btn.is-ghost { background:#fff; color:var(--et-navy); border-color:var(--et-input-border); box-shadow:0 1px 2px rgba(27,55,100,.06); }
.etm .etm-btn.is-ghost:hover { background:#fff; color:var(--et-navy); border-color:var(--et-navy); box-shadow:0 6px 16px rgba(27,55,100,.10); }
.etm-btn.is-sm { font-size:15.5px; padding:9.5px 16px; border-radius:var(--et-radius-sm); }
.etm-btn.is-sm.is-ghost { padding:8px 14px; }
.etm-btn.is-block { width:100%; height:44px; padding:0 18px; font-size:15.5px; }
.etm-btn.is-tall { height:46px; font-size:16.5px; width:100%; }

.etm .etm-textlink {
  display:inline-flex; align-items:center; gap:8px;
  font-size:16.5px; font-weight:700; color:var(--et-blue);
}
.etm-textlink .material-symbols-rounded { font-size:19px; transition:transform .2s var(--etm-ease); }

.etm-ctarow { display:flex; gap:12px; flex-wrap:wrap; }
.etm-ctarow.is-center { justify-content:center; }

/* ------------------------------------------------------- first screen ----- */
/* Hero + join band + logo strip + IMS bar are one column the height of the
   viewport under the 64px sticky header, so the IMS bar sits flush at the
   fold. The hero takes the slack, which is what puts air between "Free while
   you preview" and the navy band. min-height, so a short laptop just scrolls. */

.etm-first { min-height:calc(100svh - var(--etm-header-h) - 1px); display:flex; flex-direction:column; }
.etm-first > .etm-hero { flex:1 1 auto; align-content:start; }   /* slack falls below the copy,
                                                                    not around it */

/* Short laptops (the 1366x768 class): pull the paddings in so the IMS bar
   still lands at the fold. Over-trimming is free -- the hero flexes back into
   whatever slack is left. Not below 640px, where the column is off. */
@media (min-width:641px) and (max-height:820px) {
  .etm-first > .etm-hero { padding-top:18px; padding-bottom:18px; }
  .etm-first .etm-join-inner { padding-top:14px; padding-bottom:14px; }
  .etm-first .etm-logos { padding:10px 0; }
}

/* ----------------------------------------------------------- hero (1) ----- */

.etm-hero {
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-top:44px; padding-bottom:48px;   /* tight enough that the join band + logo strip clear a 768px fold */
}
.etm-hero-copy p.etm-lead { max-width:460px; }
.etm-hero-note { margin-top:18px; font-size:15px; color:var(--et-muted); }
.etm-hero-media { position:relative; padding-bottom:56px; }

.etm-vignette {
  background:#fff; border:1px solid var(--et-line); border-radius:14px;
  box-shadow:var(--etm-shadow-card); overflow:hidden;
}
.etm-vignette-head {
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--etm-hairline);
}
.etm-vignette-head b { font-size:14px; font-weight:700; color:var(--et-ink); }
.etm-dot { width:8px; height:8px; border-radius:50%; background:var(--et-green); flex:none; }
.etm-vignette-count { margin-left:auto; font-size:12.5px; color:var(--et-muted); }

.etm-hero-row {
  display:grid; grid-template-columns:1.1fr 1fr .5fr .85fr; gap:10px;
  align-items:center; padding:10px 14px; border-bottom:1px solid var(--etm-hairline-2);
}
.etm-hero-ic { font-size:14px; font-weight:600; color:var(--et-ink); font-variant-numeric:tabular-nums; }
.etm-hero-veh {
  font-size:12.5px; color:var(--et-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.etm-hero-why { font-size:12.5px; color:var(--et-muted); }
/* The strike is a 1px background line so the load sequence can draw it across. */
.etm-hero-old { text-align:right; font-size:13.5px; color:var(--et-faint); font-variant-numeric:tabular-nums; }
.etm-hero-old s {
  text-decoration:none;
  background:linear-gradient(currentColor, currentColor) no-repeat 0 55% / 100% 1px;
}
.etm-hero-new { text-align:right; white-space:nowrap; }
.etm-hero-new b { font-size:14px; font-weight:700; color:var(--et-ink); font-variant-numeric:tabular-nums; }

.etm-delta {
  display:inline-block; font-size:12px; font-weight:700; border-radius:5px;
  padding:2px 5px; font-variant-numeric:tabular-nums;
  background:var(--et-green-bg); color:var(--et-green);
}
.etm-delta.is-down { background:var(--et-red-bg); color:var(--et-red); }

.etm-vignette-foot {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--etm-tint); font-size:13px; color:var(--et-sub);
}
.etm-vignette-foot .material-symbols-rounded { font-size:15px; color:var(--et-amber); flex:none; }

.etm-badge {
  position:absolute; right:-14px; bottom:0;
  background:var(--et-navy-900); color:#fff; border-radius:var(--et-radius);
  padding:13px 17px; box-shadow:var(--etm-shadow-badge);
}
.etm-badge-label { font-size:12.5px; color:var(--etm-on-navy-dim); font-weight:600; }
.etm-badge-value {
  font-size:22px; font-weight:700; color:var(--etm-mint);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------- IMS bar ---- */

.etm-imsbar { border-top:1px solid var(--et-line); border-bottom:1px solid var(--et-line); background:var(--et-bg); }
.etm-imsbar-inner {
  padding-top:18px; padding-bottom:18px; display:flex; align-items:center;
  gap:18px; flex-wrap:wrap; justify-content:center;
}
.etm-imsbar-label { font-size:15px; font-weight:500; color:var(--et-muted); }
.etm-ims {
  font-size:15.5px; font-weight:700; color:var(--et-navy);
  background:#fff; border:1px solid var(--et-line);
  border-radius:var(--et-radius-sm); padding:7px 14px;
}

/* --------------------------------------------------------- value props ---- */

.etm-props {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px; margin-top:44px;
}
.etm-prop { background:#fff; border:1px solid var(--et-line); border-radius:14px; padding:26px 26px 28px; }
.etm-icontile {
  width:44px; height:44px; border-radius:11px; background:var(--et-blue-100);
  display:flex; align-items:center; justify-content:center;
}
.etm-icontile .material-symbols-rounded { font-size:23px; color:var(--et-blue); }
.etm-prop-title { font-size:18.5px; font-weight:700; color:var(--et-ink); margin-top:16px; }
.etm-prop-body { font-size:15.5px; line-height:1.6; color:var(--etm-body); margin-top:8px; }

/* ---------------------------------------------------------- proof band ---- */

.etm-proof {
  background:linear-gradient(150deg,var(--et-navy),var(--et-navy-900));
  border-radius:18px; padding:44px 40px; color:#fff;
}
.etm-proof-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px; margin-top:22px;
}
.etm-proof-num {
  font-family:var(--et-display); font-size:40px; font-weight:700;
  color:var(--et-blue-soft); font-variant-numeric:tabular-nums; line-height:1.1;
}
.etm-proof-num.is-money { color:var(--etm-mint); }
.etm-proof-cap { font-size:15px; color:var(--etm-on-navy); margin-top:6px; line-height:1.5; }
.etm-proof-foot { margin-top:26px; font-size:14px; color:var(--etm-on-navy-dim); }

/* ----------------------------------------------------------- self-serve --- */

.etm-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.etm-steps { display:flex; flex-direction:column; gap:10px; }
.etm-step {
  display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--et-line); border-radius:var(--et-radius);
  padding:16px 18px;
}
.etm-step-n {
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--et-blue); color:#fff;
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.etm-step-n.is-navy { background:var(--et-navy-900); color:var(--et-blue-soft); }
.etm-step-title { font-size:16.5px; font-weight:700; color:var(--et-ink); }
.etm-step-body { font-size:15px; color:var(--etm-body-soft); margin-top:2px; }
.etm-step-time {
  margin-left:auto; font-size:14px; font-weight:700;
  color:var(--et-muted); white-space:nowrap; flex:none;
}

/* ---------------------------------------------------------- rail chips ---- */

.etm-band { border-top:1px solid var(--et-line); background:var(--et-bg); }
.etm-band-inner { padding-top:52px; padding-bottom:52px; text-align:center; }
.etm-chiprow { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.etm-railchip {
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--et-line); border-radius:99px;
  padding:9px 16px; font-size:15px; font-weight:600; color:var(--et-navy);
}
.etm-railchip .material-symbols-rounded { font-size:16px; color:var(--et-amber); }

/* ----------------------------------------------------------------- CTA ---- */

.etm-cta { padding-top:76px; padding-bottom:76px; text-align:center; }
.etm-cta p { font-size:16.5px; color:var(--etm-body); margin:14px 0 0; }
.etm-cta .etm-ctarow { margin-top:26px; }

/* -------------------------------------------------------------- footer ---- */

.etm-footer { background:var(--et-navy-900); color:#fff; }
.etm-footer-cols {
  padding-top:44px; padding-bottom:44px; display:grid;
  grid-template-columns:1.4fr repeat(3,1fr); gap:32px;
}
.etm-footer-brand { display:flex; align-items:center; gap:10px; }
.etm-footer-tile {
  width:34px; height:34px; background:#fff; border-radius:var(--et-radius-sm);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.etm-footer-tile img { width:23px; height:auto; display:block; }
.etm-footer-word { font-weight:700; font-size:15px; letter-spacing:.12em; }
.etm-footer-word span { color:var(--et-blue-soft); }
.etm-footer-about { font-size:14px; color:var(--etm-on-navy-dim); margin-top:14px; line-height:1.6; }
.etm-footer-col { display:flex; flex-direction:column; gap:9px; font-size:15px; }
.etm-footer-h { font-size:15px; font-weight:600; color:#fff; margin-bottom:3px; }
.etm-footer-col a, .etm-footer-col span { color:var(--etm-on-navy-link); transition:color .15s ease; }
.etm-footer-col a:hover { color:#fff; }
.etm-footer-legal { border-top:1px solid rgba(255,255,255,.12); }
.etm-footer-legal div {
  padding-top:16px; padding-bottom:16px; font-size:14px; color:var(--etm-on-navy-dim);
  display:flex; gap:8px 24px; flex-wrap:wrap; justify-content:space-between;
}
.etm-footer-legal a { color:var(--etm-on-navy-link); }
.etm-footer-legal a:hover { color:#fff; }

/* ------------------------------------------------------- features page ---- */

.etm-pagehead { padding-top:64px; padding-bottom:12px; text-align:center; }
.etm-feats { display:flex; flex-direction:column; gap:22px; padding-top:44px; padding-bottom:24px; }
.etm-feat {
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  background:#fff; border:1px solid var(--et-line); border-radius:16px; padding:34px 36px;
}
.etm-feat.is-flip .etm-feat-media { order:-1; }
.etm-feat-icon {
  width:42px; height:42px; border-radius:10px; background:var(--et-blue-100);
  display:flex; align-items:center; justify-content:center;
}
.etm-feat-icon .material-symbols-rounded { font-size:22px; color:var(--et-blue); }
.etm-feat-body { font-size:16.5px; line-height:1.65; color:var(--etm-body); margin:10px 0 0; }
.etm-feat-foot { margin-top:12px; font-size:15px; color:var(--et-muted); }

/* vignettes on the features page */
.etm-vg {
  background:var(--etm-tint); border:1px solid var(--et-line);
  border-radius:var(--et-radius); padding:18px 20px;
}
.etm-vg.is-flush { padding:0; overflow:hidden; }
.etm-vg-title { font-size:13.5px; font-weight:700; color:var(--et-ink); }
.etm-vg-chips { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.etm-vg-chip {
  background:#fff; border:1px solid var(--et-line); border-radius:7px;
  padding:6px 11px; font-size:14px; color:var(--et-ink);
}
.etm-vg-ok {
  display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:14px; color:var(--et-green);
}
.etm-vg-ok .material-symbols-rounded { font-size:16px; }

.etm-vg-thead, .etm-vg-trow {
  display:grid; grid-template-columns:1.2fr .7fr .9fr; gap:8px; padding:9px 14px;
}
.etm-vg-thead {
  padding:8px 14px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  color:var(--et-muted); border-bottom:1px solid var(--et-line);
}
.etm-vg-trow { font-size:13.5px; background:#fff; border-bottom:1px solid var(--etm-hairline); }
.etm-vg-trow:last-of-type { border-bottom:none; }
.etm-vg-r { text-align:right; }
.etm-vg-cur { text-align:right; color:var(--et-muted); font-variant-numeric:tabular-nums; }
.etm-vg-rec { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.etm-vg-rec .etm-delta { font-size:12px; padding:1px 5px; }
.etm-vg-tfoot {
  padding:9px 14px; font-size:13px; color:var(--et-sub);
  background:var(--etm-tint); border-top:1px solid var(--et-line);
}

.etm-vg-list { display:flex; flex-direction:column; gap:9px; }
.etm-vg-line {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:14px; background:#fff; border:1px solid var(--et-line);
  border-radius:var(--et-radius-sm); padding:9px 12px;
}
.etm-vg-line b { font-variant-numeric:tabular-nums; }
.etm-vg-line .material-symbols-rounded { font-size:17px; color:var(--et-green); }

.etm-vg.is-review { background:var(--et-amber-row); border-color:var(--et-amber-border); padding:16px 18px; }
.etm-vg-reviewhead {
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--et-amber-text);
}
.etm-vg-reviewhead .material-symbols-rounded { font-size:16px; }
.etm-vg-reviewrow {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid var(--et-amber-border); border-radius:var(--et-radius-sm);
  padding:10px 12px; margin-top:10px; font-size:14px;
}
.etm-strike { color:var(--et-muted); text-decoration:line-through; }
.etm-okpill {
  background:var(--et-amber); color:#fff; font-size:12.5px; font-weight:700;
  border-radius:6px; padding:3px 9px; flex:none;
}
.etm-vg-note { font-size:13px; color:var(--et-muted); margin-top:10px; line-height:1.5; }

.etm-vg.is-report { background:var(--et-navy-900); border-color:var(--et-navy-900); padding:20px 22px; color:#fff; }
.etm-vg-reportnum {
  font-size:27px; font-weight:700; color:var(--etm-mint);
  font-variant-numeric:tabular-nums; margin-top:6px;
}
.etm-bars { display:flex; gap:6px; align-items:flex-end; height:56px; margin-top:14px; }
.etm-bars i { flex:1; background:var(--et-blue); border-radius:4px 4px 0 0; display:block; }
.etm-bars i.is-peak { background:var(--et-blue-soft); }
.etm-vg-reportfoot { font-size:13px; color:var(--etm-on-navy-dim); margin-top:10px; }

.etm-vg-tags { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.etm-vg-tag {
  background:#fff; border:1px solid var(--et-line); border-radius:99px;
  padding:5px 11px; font-size:13.5px; color:var(--et-sub);
}

/* ---------------------------------------------------------- plans page ---- */

.etm-tiers {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px; align-items:stretch; padding-top:44px; padding-bottom:10px;
}
.etm-tier {
  position:relative; background:#fff; border:1px solid var(--et-line);
  border-radius:16px; padding:30px 28px; display:flex; flex-direction:column;
}
.etm-tier.is-featured { border:2px solid var(--et-blue); box-shadow:var(--etm-shadow-tier); }
.etm-tier-flag {
  position:absolute; top:-11px; left:26px;
  background:var(--et-blue); color:#fff; font-size:14px; font-weight:600;
  padding:4px 12px; border-radius:99px;
}
.etm-tier-name { font-size:17.5px; font-weight:700; color:var(--et-ink); }
.etm-tier-tag { font-size:15px; color:var(--etm-body-soft); margin-top:4px; line-height:1.5; }
.etm-tier-price { margin-top:18px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.etm-tier-price b {
  font-family:var(--et-display); font-size:40px; font-weight:700; color:var(--et-navy);
}
.etm-tier-price span { font-size:15px; color:var(--et-muted); }
.etm-tier-rule { height:1px; background:var(--et-line-soft); margin:20px 0 16px; }
.etm-tier-feats { display:flex; flex-direction:column; gap:10px; flex:1; margin:0; padding:0; list-style:none; }
.etm-tier-feats li { display:flex; gap:9px; font-size:15px; color:var(--etm-body-strong); line-height:1.5; }
.etm-tier-feats .material-symbols-rounded { font-size:17px; color:var(--et-green); flex:none; margin-top:1px; }
.etm-tier .etm-btn { margin-top:22px; }

.etm-disclaimer {
  display:flex; align-items:flex-start; gap:9px; justify-content:center;
  margin-top:18px; padding:11px 16px;
  background:var(--et-amber-bg); border:1px solid var(--et-amber-border);
  border-radius:var(--et-radius-sm);
  font-size:14px; line-height:1.5; color:var(--et-amber-text); text-align:left;
}
.etm-disclaimer .material-symbols-rounded { font-size:17px; flex:none; margin-top:1px; }
.etm-disclaimer strong { font-weight:700; }

.etm-table-wrap {
  background:#fff; border:1px solid var(--et-line); border-radius:14px;
  overflow:hidden; margin-top:26px;
}
.etm-table-scroll { overflow-x:auto; }
table.etm-cmp { width:100%; min-width:560px; border-collapse:collapse; font-size:15px; }
table.etm-cmp th {
  background:var(--et-bg); border-bottom:1px solid var(--et-line);
  font-size:14px; font-weight:700; color:var(--et-navy);
  padding:12px 10px; text-align:center;
}
table.etm-cmp th:first-child { text-align:left; padding:12px 18px; width:38%; }
table.etm-cmp td {
  border-bottom:1px solid var(--et-line-soft); padding:11px 10px;
  text-align:center; color:var(--et-ink); font-weight:600;
}
table.etm-cmp td:first-child { text-align:left; padding:11px 18px; color:var(--etm-body-strong); font-weight:400; }
table.etm-cmp td:nth-child(2) { color:var(--et-muted); font-weight:400; }
table.etm-cmp tbody tr:nth-child(even) { background:var(--et-row-alt); }
table.etm-cmp tbody tr:last-child td { border-bottom:none; }

/* Pricing-by-inventory-size table. The rates are the point, so they get the
   display face; the second-column muting that etm-cmp applies to a "Preview"
   column would wash out a real price, so it is undone here. */
table.etm-pricetable td.is-price {
  font-family:var(--et-display); font-size:20px; font-weight:700;
  color:var(--et-navy); font-variant-numeric:tabular-nums;
}
table.etm-pricetable td.is-price.is-alt { color:var(--et-green); }
table.etm-pricetable td:nth-child(2) { color:var(--et-navy); font-weight:700; }
table.etm-pricetable th:first-child { width:46%; }
/* etm-cmp sets min-width:560px, which pushes the multi-product column off a
   phone screen behind a horizontal scroll. On a price table that is the one
   column you must not hide, and these rows are short enough to fit. */
table.etm-pricetable { min-width:0; }
@media (max-width:560px) {
  table.etm-pricetable th { padding:10px 6px; font-size:14px; }
  table.etm-pricetable td { padding:10px 6px; }
  table.etm-pricetable td:first-child, table.etm-pricetable th:first-child { padding-left:12px; }
  table.etm-pricetable td.is-price { font-size:17.5px; }
  table.etm-pricetable th:first-child { width:40%; }
}

/* FAQ: one accordion, a hairline between questions. */
.etm-faq { margin-top:30px; border-top:1px solid var(--et-line); }
.etm-faq details { border-bottom:1px solid var(--et-line); }
.etm-faq summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px; font-family:var(--et-display); font-size:18.5px; font-weight:600; color:var(--et-navy);
  transition:color .15s ease;
}
.etm-faq summary::-webkit-details-marker { display:none; }
.etm-faq summary:hover { color:var(--et-blue); }
.etm-faq summary .material-symbols-rounded { flex:none; font-size:24px; color:var(--et-blue); transition:transform .25s var(--etm-ease); }
.etm-faq details[open] summary .material-symbols-rounded { transform:rotate(45deg); }
.etm-faq-a { padding:0 4px 22px; font-size:16px; line-height:1.7; color:var(--etm-body); }
.etm-faq details[open] .etm-faq-a { animation:etm-faq-in .3s var(--etm-ease); }
@keyframes etm-faq-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ---------------------------------------------------------- about page ---- */

.etm-prose { padding-top:64px; }
.etm-prose p { font-size:17px; line-height:1.7; color:var(--etm-body); margin:20px 0 0; }
.etm-prose p + p { margin-top:14px; }

.etm-timeline { display:flex; flex-direction:column; padding-top:44px; }
.etm-tl { display:flex; gap:18px; }
.etm-tl-gutter { display:flex; flex-direction:column; align-items:center; flex:none; }
.etm-tl-dot { width:12px; height:12px; border-radius:50%; background:var(--et-input-border); flex:none; margin-top:5px; }
.etm-tl-dot.is-now { background:var(--et-blue); }
.etm-tl-dot.is-always { background:var(--et-green); }
.etm-tl-line { width:2px; flex:1; background:var(--et-line); }
.etm-tl-body { padding-bottom:26px; }
.etm-tl-when { font-size:15px; font-weight:600; color:var(--et-blue); }
.etm-tl-title { font-size:17px; font-weight:700; color:var(--et-ink); margin-top:3px; }
.etm-tl-text { font-size:15.5px; line-height:1.6; color:var(--etm-body); margin-top:4px; }

.etm-contacts {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;
}
.etm-contact { background:#fff; border:1px solid var(--et-line); border-radius:16px; padding:28px; }
.etm-contact > .material-symbols-rounded { font-size:26px; color:var(--et-blue); }
.etm-contact-title { font-size:18.5px; font-weight:700; margin-top:12px; color:var(--et-ink); }
.etm-contact-body { font-size:15px; color:var(--etm-body); margin-top:6px; line-height:1.6; }
.etm-contact-key { font-size:15.5px; font-weight:700; margin-top:14px; color:var(--et-navy); word-break:break-word; }
.etm-contact-note { font-size:14px; color:var(--et-muted); margin-top:4px; }
.etm-contact.is-navy { background:var(--et-navy-900); border-color:var(--et-navy-900); color:#fff; }
.etm-contact.is-navy > .material-symbols-rounded { color:var(--et-blue-soft); }
.etm-contact.is-navy .etm-contact-title { color:#fff; }
.etm-contact.is-navy .etm-contact-body { color:var(--etm-on-navy); }
.etm-contact.is-navy .etm-contact-note { color:var(--etm-on-navy-dim); }
.etm .etm-contact-phone {
  font-family:var(--et-display); font-size:25px; font-weight:700;
  margin-top:14px; color:var(--et-blue-soft); display:inline-block;
}
.etm .etm-contact-phone:hover { color:#fff; }
.etm-contact.is-green > .material-symbols-rounded { color:var(--et-green); }

/* form */
.etm-formcard { background:#fff; border:1px solid var(--et-line); border-radius:16px; padding:32px 34px; }
.etm-formcard > p { font-size:15px; color:var(--etm-body-soft); margin:8px 0 0; line-height:1.55; }
.etm-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.etm-field { display:flex; flex-direction:column; gap:5px; }
.etm-field.is-wide { grid-column:1/-1; }
.etm-form > .etm-btn { grid-column:1/-1; }
.etm-label { font-size:14px; font-weight:600; color:var(--et-ink); }
.etm-input, .etm-select, .etm-textarea {
  font-family:inherit; font-size:15.5px; color:var(--et-ink);
  border:1px solid var(--et-input-border); border-radius:var(--et-radius-sm);
  background:#fff; outline:none; width:100%; box-sizing:border-box;
}
.etm-input, .etm-select { height:42px; padding:0 13px; }
.etm-textarea { padding:11px 13px; resize:vertical; line-height:1.5; }
.etm-input:hover, .etm-select:hover, .etm-textarea:hover { border-color:var(--et-input-border-hover); }
.etm-input:focus, .etm-select:focus, .etm-textarea:focus {
  border-color:var(--et-blue); box-shadow:0 0 0 3px var(--et-blue-100);
}
.etm-select {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238B99B0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.etm-formnote {
  grid-column:1/-1; font-size:14px; line-height:1.6; color:var(--et-sub);
  background:var(--et-bg); border:1px solid var(--et-line);
  border-radius:var(--et-radius-sm); padding:11px 13px;
}
.etm-formnote .material-symbols-rounded {
  font-size:16px; color:var(--et-amber); vertical-align:-3px; margin-right:6px;
}
.etm-formnote a { font-weight:600; white-space:nowrap; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width:1000px) {
  .etm-hero { grid-template-columns:1fr; gap:40px; padding:56px 0 48px; }
  .etm-hero-copy p.etm-lead { max-width:none; }
  .etm-badge { right:0; }
  .etm-split { grid-template-columns:1fr; gap:32px; }
  .etm-feat { grid-template-columns:1fr; gap:26px; padding:28px 26px; }
  .etm-feat.is-flip .etm-feat-media { order:0; }
  .etm-footer-cols { grid-template-columns:1fr 1fr; gap:28px; }
  .etm-h1 { font-size:44px; }
  .etm-h1.is-sm, .etm-h1.is-xs { font-size:38px; }
  .etm-h2.is-lg { font-size:33px; }
}

@media (max-width:880px) {
  .etm-nav { display:none; }
  .etm-menu { display:block; margin-left:0; }
  .etm-header-inner { gap:12px; }
  .etm .etm-header-inner > .etm-btn { display:inline-flex; margin-left:auto; }
}

@media (max-width:640px) {
  .etm-first { min-height:0; display:block; }
  .etm-wrap { padding:0 18px; }
  .etm-h1, .etm-h1.is-sm, .etm-h1.is-xs { font-size:33px; line-height:1.12; }
  .etm-h2, .etm-h2.is-lg, .etm-h2.is-md, .etm-h2.is-sm, .etm-h2.is-xs { font-size:26px; }
  .etm-h3 { font-size:22px; }
  .etm-lead, .etm-lead.is-sm, .etm-lead.is-xs { font-size:16.5px; }
  .etm-hero { padding-top:40px; padding-bottom:36px; }
  .etm-logos { padding:18px 0; }
  .etm-logos-track { gap:40px; }
  .etm-logo { height:54px; }
  body.etm .etm-logo img { max-height:54px; max-width:198px; }
  .etm-hero-row { grid-template-columns:1.2fr .7fr .8fr; }
  .etm-hero-why { display:none; }
  .etm-proof { padding:30px 24px; border-radius:14px; }
  .etm-proof-num { font-size:34px; }
  .etm-proof-stats { gap:22px; }
  .etm-props { margin-top:30px; }
  .etm-prop { padding:22px; }
  .etm-cta { padding-top:52px; padding-bottom:52px; }
  .etm-ctarow .etm-btn { flex:1 1 100%; }
  .etm-pagehead { padding-top:44px; padding-bottom:8px; }
  .etm-feats { padding-top:28px; padding-bottom:16px; }
  .etm-feat { padding:24px 20px; }
  .etm-tiers { padding-top:30px; padding-bottom:10px; }
  .etm-tier { padding:26px 22px; }
  .etm-footer-cols { grid-template-columns:1fr; gap:24px; padding-top:34px; padding-bottom:34px; }
  .etm-formcard { padding:24px 20px; }
  .etm-form { grid-template-columns:1fr; }
  .etm-prose { padding-top:44px; }
  .etm-timeline { padding-top:32px; }
  .etm-step { padding:14px; gap:12px; }
  .etm-step-time { display:none; }
  .etm-badge { padding:11px 14px; }
  .etm-badge-value { font-size:20px; }
}

@media (max-width:400px) {
  .etm-header-inner .etm-btn.is-sm { padding:9px 11px; font-size:14px; }
  .etm-wordmark { font-size:14px; letter-spacing:.1em; }
}

/* --------------------------------------------- "Join the 275+" band ------- */
/* Full-bleed, square-cornered. (.etm-proof is the rounded stats CARD further
   down the page -- a different thing; do not reuse its class here.) */

.etm-join { background:var(--et-navy-900); border-radius:0; }
.etm-join-inner { padding-top:22px; padding-bottom:22px; text-align:center; }
.etm-join-copy {
  margin:0 auto; max-width:820px; font-size:clamp(20px, 2vw, 25px); line-height:1.35;
  font-weight:500; color:var(--etm-on-navy);
}
.etm-join-copy b { color:#fff; font-weight:700; }
.etm-join-num { color:var(--etm-mint); font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- logo strip ---- */
/* Sits under the navy "Join the 275+" band; hero and band are kept tight so
   the marks stay above the fold on a 768px laptop. Sized 76px tall (Betsy,
   2026-09-04: "increase the logo area by 50%"; trimmed 10% on 2026-09-08). */

.etm-logos { overflow:hidden; background:#fff; border-bottom:1px solid var(--et-line); padding:20px 0; }
.etm-logos-track { display:flex; align-items:center; gap:64px; width:max-content; padding:0 32px; }
.etm-logos-track.is-rolling { animation:etm-logos-roll var(--etm-logos-dur, 40s) linear infinite; }
.etm-logos:hover .etm-logos-track.is-rolling { animation-play-state:paused; }
.etm-logo { margin:0; flex:none; display:flex; align-items:center; height:76px; }
body.etm .etm-logo img { max-height:76px; max-width:270px; width:auto; height:auto; display:block; }   /* full colour: these are the yards' own marks */
/* Fewer logos than a screenful: one row, centred, nothing moving and nothing repeated. */
.etm-logos-track.is-static { width:auto; justify-content:center; flex-wrap:wrap; row-gap:20px; }
@keyframes etm-logos-roll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .etm-logos-track.is-rolling { animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
}

/* ------------------------------------------------------------- articles --- */
/* The industry-education library: /marketing/articles/. One index page of
   cards plus one page per article. Every figure in an article comes from a
   query against our own fleet data -- .etm-art-method is where that gets
   stated, and it is not optional. */

.etm-art-head { padding-top:56px; padding-bottom:8px; }
/* Head and body share one measure so the title, the prose and the tables all
   start on the same left edge. 816 = 760px of text + the wrap's own padding.
   The .etm-wrap.w-* classes are two-class selectors, so these must be too. */
.etm-wrap.etm-art-head, .etm-wrap.etm-art-body { max-width:740px; }
.etm-art-kicker { font-size:15px; font-weight:600; color:var(--et-blue); margin-bottom:14px; }
.etm-art-title {
  font-family:var(--et-display); font-size:42px; line-height:1.12; font-weight:700;
  color:var(--et-navy); margin:0; max-width:900px; text-wrap:balance;
}
.etm-art-standfirst {
  font-size:19px; line-height:1.6; color:var(--etm-body); margin:20px 0 0; max-width:760px;
}
.etm-art-meta {
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--et-line);
  font-size:14px; color:var(--et-muted);
}
.etm-art-meta b { color:var(--et-ink); font-weight:600; }

.etm-art-body { padding-top:34px; padding-bottom:64px; }
.etm-art-body h2 {
  font-family:var(--et-display); font-size:27px; line-height:1.2; font-weight:700;
  color:var(--et-navy); margin:44px 0 0; text-wrap:balance;
}
.etm-art-body h3 { font-size:18.5px; font-weight:700; color:var(--et-ink); margin:30px 0 0; }
.etm-art-body p { font-size:17px; line-height:1.7; color:var(--etm-body); margin:16px 0 0; }
.etm-art-body ul { margin:16px 0 0; padding-left:22px; }
.etm-art-body li { font-size:17px; line-height:1.65; color:var(--etm-body); margin-top:9px; }
.etm-art-body strong { color:var(--et-ink); font-weight:700; }

/* A single number worth stopping on. */
.etm-art-stat {
  margin:34px 0 0; padding:22px 26px; border-left:4px solid var(--et-blue);
  background:var(--et-bg); border-radius:0 10px 10px 0;
}
.etm-art-stat b { display:block; font-family:var(--et-display); font-size:38px; line-height:1; color:var(--et-navy); font-variant-numeric:tabular-nums; }
.etm-art-stat span { display:block; margin-top:9px; font-size:16px; line-height:1.5; color:var(--etm-body); }

/* Data tables. Every one of these is a query result, so they scroll rather
   than reflow -- a wrapped number column stops being readable. */
.etm-art-tablewrap { margin-top:28px; overflow-x:auto; border:1px solid var(--et-line); border-radius:10px; }
/* Prose stays at a readable 760px, but a query result with six columns does not
   fit in it. Let tables use the empty right margin of the w-1000 wrap. */
@media (min-width:1000px) { .etm-art-tablewrap { width:calc(100% + 128px); } }
table.etm-art-table { width:100%; border-collapse:collapse; font-size:15px; }
table.etm-art-table th {
  text-align:left; padding:12px 14px; background:var(--et-bg); color:var(--et-muted);
  font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:1px solid var(--et-line); white-space:nowrap;
}
table.etm-art-table td {
  padding:11px 14px; border-bottom:1px solid var(--et-line); color:var(--etm-body); white-space:nowrap;
}
table.etm-art-table th:not(:first-child) { text-align:right; }   /* headers sit over their numbers */
table.etm-art-table tr:last-child td { border-bottom:0; }
table.etm-art-table td.is-num { text-align:right; font-variant-numeric:tabular-nums; color:var(--et-ink); font-weight:600; }
table.etm-art-table td.is-name { white-space:normal; color:var(--et-ink); font-weight:600; }
table.etm-art-table tr.is-highlight td { background:rgba(37,99,235,.05); }
.etm-art-caption { margin-top:10px; font-size:14px; color:var(--et-muted); line-height:1.5; }

/* Where the numbers came from, and what they do not say. */
.etm-art-method {
  margin-top:40px; padding:22px 24px; border:1px solid var(--et-line);
  border-radius:12px; background:#fff;
}
.etm-art-method h4 { margin:0; font-size:16px; font-weight:700; color:var(--et-ink); }
.etm-art-method p { font-size:15px; line-height:1.6; margin:12px 0 0; color:var(--etm-body); }

/* The one place the article is allowed to sell anything. */
.etm-art-cta {
  margin-top:44px; padding:28px; border-radius:14px;
  background:var(--et-navy-900); color:var(--etm-on-navy);
}
.etm-art-cta h4 { margin:0; font-family:var(--et-display); font-size:22px; font-weight:700; color:#fff; }
.etm-art-cta p { margin:12px 0 0; font-size:16px; line-height:1.6; color:var(--etm-on-navy); }
.etm-art-cta .etm-btn { margin-top:20px; }

/* Index page */
.etm-artindex { padding-top:52px; padding-bottom:64px; }
.etm-art-track { margin-top:44px; }
.etm-art-track:first-of-type { margin-top:32px; }
.etm-art-trackhead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.etm-art-trackhead h2 { font-family:var(--et-display); font-size:25px; font-weight:700; color:var(--et-navy); margin:0; }
.etm-art-trackhead span { font-size:15px; color:var(--et-muted); }
.etm-art-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px,1fr)); gap:16px; margin-top:18px; align-items:start; }
.etm-art-card {
  display:block; padding:22px; border:1px solid var(--et-line); border-radius:12px;
  background:#fff; box-shadow:var(--etm-shadow-card);
}
.etm-art-card { transition:border-color .15s ease, box-shadow .2s ease, transform .2s var(--etm-ease); }
.etm-art-card:hover { border-color:var(--et-blue); text-decoration:none; transform:translateY(-2px); box-shadow:0 22px 50px rgba(27,55,100,.14); }
.etm-art-card .etm-art-cardkicker { font-size:14px; font-weight:600; color:var(--et-blue); }
.etm-art-card h3 { margin:10px 0 0; font-size:19px; line-height:1.3; font-weight:700; color:var(--et-navy); }
.etm-art-card p { margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--etm-body); }
.etm-art-card .etm-art-cardsample { display:block; margin-top:14px; font-size:14px; color:var(--et-muted); }
.etm-art-soon { padding:22px; border:1px dashed var(--et-line); border-radius:12px; font-size:15px; color:var(--et-muted); }

@media (max-width:640px) {
  .etm-art-head { padding-top:34px; }
  .etm-art-title { font-size:31px; }
  .etm-art-standfirst { font-size:17.5px; }
  .etm-art-body h2 { font-size:23px; }
  .etm-art-stat b { font-size:31px; }
  .etm-art-cards { grid-template-columns:1fr; }
}

/* -------------------------------------------------------------- terms ---- */

.etm-terms { padding-bottom:72px; }
.etm-terms ul { margin:28px 0 0; padding-left:22px; }
.etm-terms li { font-size:17px; line-height:1.7; color:var(--etm-body); margin-top:12px; }
.etm-terms .etm-terms-note { margin-top:32px; padding-top:18px; border-top:1px solid var(--et-line); font-size:16px; }

/* ------------------------------------------------------------ compare ----- */
/* Home: pricing by hand vs Einstein Tools. */

.etm-compare {
  margin-top:44px; border:1px solid var(--et-line); border-radius:14px;
  overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(27,55,100,.05), 0 2px 8px rgba(27,55,100,.04);
}
.etm-compare-row { display:grid; grid-template-columns:.8fr 1.1fr 1.2fr; }
.etm-compare-row > div { padding:17px 22px; font-size:16px; line-height:1.5; border-top:1px solid var(--et-line); }
.etm-compare-row:first-child > div {
  border-top:none; font-family:var(--et-display); font-size:17px; font-weight:600;
  color:var(--et-navy); background:var(--etm-tint);
}
.etm-compare-row > div:first-child { font-weight:600; color:var(--et-ink); }
.etm-compare-row > div:nth-child(2) { color:var(--et-muted); }
.etm-compare-row > div:nth-child(3) { color:var(--et-ink); background:linear-gradient(90deg, rgba(43,125,224,.05), rgba(43,125,224,0)); }
.etm-compare-row:first-child > div:nth-child(3) { color:var(--et-blue); background:var(--et-blue-100); }
.etm-compare .material-symbols-rounded { font-size:18px; margin-right:7px; vertical-align:-4px; }
.etm-compare .is-no { color:#A7B1C2; }
.etm-compare .is-yes { color:var(--et-green); }
@media (max-width:760px) {
  .etm-compare-row { grid-template-columns:1fr 1fr; }
  .etm-compare-row > div:first-child { grid-column:1/-1; padding-bottom:0; border-top:1px solid var(--et-line); }
  .etm-compare-row:first-child > div:first-child { display:none; }
  .etm-compare-row > div:nth-child(2), .etm-compare-row > div:nth-child(3) { border-top:none; padding-top:8px; font-size:15px; }
  .etm-compare-row:first-child > div:nth-child(2), .etm-compare-row:first-child > div:nth-child(3) { padding-top:14px; }
}

/* --------------------------------------------------- features sub-nav ---- */

.etm-subnav {
  position:sticky; top:calc(var(--etm-header-h) + 1px); z-index:20; margin-top:40px;
  background:rgba(255,255,255,.92); border-top:1px solid var(--et-line); border-bottom:1px solid var(--et-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.etm-subnav-inner { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-top:9px; padding-bottom:9px; justify-content:center; }
.etm-subnav-inner::-webkit-scrollbar { display:none; }
.etm .etm-subnav a {
  flex:none; font-size:15px; font-weight:500; color:var(--etm-body);
  padding:7px 14px; border-radius:99px; transition:background-color .15s ease, color .15s ease;
}
.etm .etm-subnav a:hover { background:var(--et-bg); color:var(--et-navy); }
.etm .etm-subnav a.is-current { background:var(--et-navy); color:#fff; }
.etm-feat[id], .etm-included-wrap[id] { scroll-margin-top:140px; }
@media (max-width:1000px) { .etm-subnav-inner { justify-content:flex-start; } }

/* ------------------------------------------------ everything included ---- */

.etm-included-wrap { padding-top:56px; padding-bottom:8px; }
.etm-included {
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; margin-top:36px;
  background:var(--et-line); border:1px solid var(--et-line); border-radius:14px; overflow:hidden;
}
.etm-included > div { background:#fff; padding:22px 22px 24px; }
.etm-included .material-symbols-rounded { font-size:22px; color:var(--et-blue); }
.etm-included b { display:block; margin-top:10px; font-size:16.5px; color:var(--et-ink); }
.etm-included p { margin:5px 0 0; font-size:15px; line-height:1.55; color:var(--etm-body); }
@media (max-width:880px) { .etm-included { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px) { .etm-included { grid-template-columns:1fr; } }

/* ---------------------------------------------------------- card hover ---- */

.etm-prop, .etm-tier, .etm-step, .etm-contact { transition:border-color .2s ease, box-shadow .25s ease, transform .25s var(--etm-ease); }
.etm-prop:hover, .etm-step:hover { border-color:var(--et-input-border); box-shadow:0 12px 32px rgba(27,55,100,.08); }
.etm-tier:not(.is-featured):hover { border-color:var(--et-input-border); box-shadow:0 12px 32px rgba(27,55,100,.08); }

/* -------------------------------------------------------------- motion ---- */
/* Load sequence. .etm-anim goes on <html> from an inline head script on pages
   with a [data-hero]; etm_site.js adds .is-in on the next frame. Without JS,
   or under reduced motion, nothing here applies. Timings (ms): copy 0-320,
   vignette 180, rows 650+, prices count 900+, strike and delta follow, the
   held-for-review line 1500, captured badge 1700. */

.etm-anim .etm-seq { opacity:0; transform:translateY(14px); }
.etm-anim.is-in .etm-seq { opacity:1; transform:none; transition:opacity .7s var(--etm-ease), transform .7s var(--etm-ease); transition-delay:calc(var(--i, 0) * 80ms); }

.etm-anim .etm-hero .etm-vignette { opacity:0; transform:translateY(26px) scale(.985); }
.etm-anim.is-in .etm-hero .etm-vignette { opacity:1; transform:none; transition:opacity .9s var(--etm-ease) .18s, transform 1.1s var(--etm-ease) .18s; }

.etm-anim .etm-hero-row { opacity:0; transform:translateX(-10px); }
.etm-anim.is-in .etm-hero-row { opacity:1; transform:none; transition:opacity .5s ease, transform .6s var(--etm-ease); transition-delay:calc(650ms + var(--i, 0) * 120ms); }
.etm-anim .etm-hero-old s { background-size:0 1px; }
.etm-anim.is-in .etm-hero-old s { background-size:100% 1px; transition:background-size .45s var(--etm-ease); transition-delay:calc(900ms + var(--i, 0) * 120ms); }
.etm-anim .etm-hero-new .etm-delta { opacity:0; transform:scale(.7); }
.etm-anim.is-in .etm-hero-new .etm-delta { opacity:1; transform:none; transition:opacity .3s ease, transform .45s cubic-bezier(.3,1.5,.5,1); transition-delay:calc(1650ms + var(--i, 0) * 120ms); }

.etm-anim .etm-vignette-foot { opacity:0; }
.etm-anim.is-in .etm-vignette-foot { opacity:1; transition:opacity .6s ease 2.2s; }
.etm-anim .etm-vignette-foot .material-symbols-rounded { transform:scale(.4); }
.etm-anim.is-in .etm-vignette-foot .material-symbols-rounded { transform:none; transition:transform .5s cubic-bezier(.3,1.5,.5,1) 2.25s; }

.etm-anim .etm-badge { opacity:0; transform:translateY(16px); }
.etm-anim.is-in .etm-badge { opacity:1; transform:none; transition:opacity .6s var(--etm-ease) 1.7s, transform .7s var(--etm-ease) 1.7s; }

/* The live dot breathes, once the sequence has finished. */
.etm-hero .etm-dot { box-shadow:0 0 0 0 rgba(22,163,74,.45); animation:etm-live 2.4s ease-out 2.6s infinite; }
@keyframes etm-live { 0% { box-shadow:0 0 0 0 rgba(22,163,74,.45); } 70%, 100% { box-shadow:0 0 0 7px rgba(22,163,74,0); } }

/* Cards below the fold ease in the first time they scroll in. etm_site.js adds
   .etm-reveal (and --r, the card's place among its siblings) only to cards that
   start off screen, so nothing on screen at load ever blinks out. */
.etm-js .etm-reveal { opacity:0; transform:translateY(20px); transition:opacity .75s var(--etm-ease), transform .85s var(--etm-ease), border-color .2s ease, box-shadow .25s ease; transition-delay:calc(var(--r, 0) * 70ms); }
.etm-js .etm-reveal.is-visible { opacity:1; transform:none; }
.etm-js .etm-reveal.is-visible:hover { transition-delay:0s; }

/* Report bars grow once their card is in. */
.etm-js .etm-reveal .etm-bars i { transform:scaleY(.08); transform-origin:50% 100%; transition:transform .8s var(--etm-ease); }
.etm-js .etm-reveal.is-visible .etm-bars i { transform:none; }
.etm-js .etm-reveal.is-visible .etm-bars i:nth-child(2) { transition-delay:.08s; }
.etm-js .etm-reveal.is-visible .etm-bars i:nth-child(3) { transition-delay:.16s; }
.etm-js .etm-reveal.is-visible .etm-bars i:nth-child(4) { transition-delay:.24s; }
.etm-js .etm-reveal.is-visible .etm-bars i:nth-child(5) { transition-delay:.32s; }

@media (prefers-reduced-motion: reduce) {
  .etm *, .etm *::before, .etm *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  .etm-anim .etm-seq, .etm-anim .etm-hero .etm-vignette, .etm-anim .etm-hero-row, .etm-anim .etm-hero-new .etm-delta,
  .etm-anim .etm-vignette-foot, .etm-anim .etm-vignette-foot .material-symbols-rounded, .etm-anim .etm-badge,
  .etm-js .etm-reveal, .etm-js .etm-reveal .etm-bars i { opacity:1 !important; transform:none !important; }
  .etm-anim .etm-hero-old s { background-size:100% 1px !important; }
}