/* ==========================================================================
   Emberbase home page, v2.
   Palette, type and material transcribed from Ember Console globals.css and
   docs/design-handoff/handoff-brand-lockup/tokens.css, so the site and the
   product read as one system.
   ========================================================================== */
:root {
  --cream: #F7F2E7;
  --cream-2: #EDE6D6;
  --paper: #FDFBF5;
  --surface: #FDFBF5;
  --desk: #E3DBC9;
  --chrome: #EDE6D6;

  --ink: #1B1A18;
  --ink-2: #3A3733;
  --muted: #57534E;
  --muted-2: #6B675F;

  --line: #DCD4C2;
  --line-soft: #E6DFCF;

  --sage: #3D5A3D;      --sage-soft: #D8E2D3;
  --clay: #B8593D;      --clay-soft: #F1D9CE;
  --amber-ink: #8A5F12; --amber-soft: #F6E7C8;
  --sky: #3F6E8E;       --sky-soft: #D6E3EA;
  --rose: #9B4A5A;      --rose-soft: #EFD6DA;

  /* Ember: the wordmark, the assistant, AI surfaces. Never a control fill. */
  --ember: #8C2F1C;
  --ember-hover: #6F2415;
  --ember-soft: #F4E0D8;
  --ember-on-soft: #6F2415;

  --link: #16565A;
  --link-hover: #0E4245;
  --focus: #38352F;

  --shadow-sm: 0 1px 0 rgba(27,26,24,.04), 0 1px 2px rgba(27,26,24,.04);
  --shadow-md: 0 1px 0 rgba(27,26,24,.04), 0 4px 14px rgba(27,26,24,.06);
  --shadow-lg: 0 10px 30px rgba(27,26,24,.12);
  --key-primary-face: linear-gradient(180deg,#FFF 0%,#FDFBF5 55%,#F4EEE3 100%);
  --key-top-pale: inset 0 1px 0 rgba(255,255,255,.9);

  --lockup-tile-light: #4D4944;
  --lockup-tile-dark: #57534E;
  --lockup-word-ember: #8C2F1C;
  --lockup-word-base: #57534E;
  --lockup-word-ember-dark: #D9663A;
  --lockup-word-base-dark: #B5AEA5;
  --surface-ink: #1C1E1A;

  --font-serif: Lora, Georgia, serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: Poppins, "Inter Tight", sans-serif;

  --bar-height: 72px;
  --page: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 28px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--surface); color: var(--ink); padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
  box-shadow: var(--shadow-md); transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* ---- Brand wordmark ------------------------------------------------------
   Wordmark only. The "e" tile mark was retired 2026-08-29; the app never
   adopted it. Lowercase Poppins 400, no space, no capital: "ember" in the
   ember red, "base" in stone grey. S is the font size. ---------------------- */
.lockup { display: inline-flex; align-items: center; --S: 28px; }
.lockup__word { font: 400 var(--S)/1 var(--font-brand); color: var(--lockup-word-base); white-space: nowrap; letter-spacing: 0; }
.lockup__word b { font-weight: 400; color: var(--lockup-word-ember); }
.lockup--dark .lockup__word { color: var(--lockup-word-base-dark); }
.lockup--dark .lockup__word b { color: var(--lockup-word-ember-dark); }

/* ---- Top bar ----------------------------------------------------------- */
.bar { height: var(--bar-height); background: var(--chrome); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.bar__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bar__nav { display: flex; align-items: center; gap: 26px; }
.bar__nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.bar__nav a:hover { color: var(--ink); }
@media (max-width: 860px) { .bar__nav a.is-optional { display: none; } }

/* ---- Buttons ----------------------------------------------------------- */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 10px;
  font: 500 16px/1 var(--font-body); text-decoration: none;
  background: var(--key-primary-face); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--key-top-pale), var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.key:hover { box-shadow: var(--key-top-pale), var(--shadow-md); transform: translateY(-1px); color: var(--ink); }
.key--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.key--quiet:hover { box-shadow: none; transform: none; color: var(--ink); text-decoration: underline; }
.key--onink { background: transparent; border-color: rgba(255,255,255,.28); color: #F5F1E8; box-shadow: none; }
.key--onink:hover { background: rgba(255,255,255,.06); color: #FFF; }

/* ---- Hero -------------------------------------------------------------- */
.hero { padding-block: 88px 80px; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.02fr .98fr; gap: 64px; } }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ember-on-soft);
  background: var(--ember-soft); padding: 6px 13px; border-radius: 999px;
}
.hero h1 { font-size: clamp(40px, 5.6vw, 62px); margin: 24px 0 0; max-width: 13ch; }
.hero__lede { margin-top: 24px; max-width: 52ch; font-size: 18px; color: var(--muted); }
.hero__keys { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---- Product visual ----------------------------------------------------
   Not a screenshot. The app's own interface rebuilt in markup from the
   same tokens the product uses (Ember Console globals.css), populated with
   demo data. Stays sharp at any size and carries no real consumer records.
   ------------------------------------------------------------------------ */
.app {
  background: var(--cream); border: 1px solid var(--line-strong, #7B766D);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg);
  font-size: 13px; user-select: none;
}
.app__bar {
  height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.app__org {
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); line-height: 1.2;
}
.app__divider { width: 1px; height: 20px; background: #BFB7A6; flex: none; }
.app__crumb { font-size: 12px; color: var(--muted); }
.app__body { padding: 20px 18px 22px; }
.app__title { font-family: var(--font-serif); font-size: 21px; font-weight: 500; }
.app__sub { margin-top: 4px; font-size: 12px; color: var(--muted-2); }

.app__tiles { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 10px 10px 11px;
}
.tile b { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.1; }
.tile span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted-2); line-height: 1.3; }

.app__table {
  margin-top: 14px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 8px; overflow: hidden;
}
.app__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
}
.app__row:last-child { border-bottom: 0; }
.app__row--head {
  background: var(--cream-2); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.app__row span:nth-child(2), .app__row span:nth-child(3) { text-align: right; min-width: 52px; }
.app__num { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chip {
  display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--sage-soft); color: var(--sage);
}
.chip--amber { background: var(--amber-soft); color: var(--amber-ink); }
.app__foot {
  margin-top: 14px; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted-2);
}
.app__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); flex: none; }

@media (max-width: 520px) {
  .app__tiles { grid-template-columns: repeat(2, 1fr); }
}

/* Wide variant of the product visual, used full bleed inside a band. */
.app--wide { margin-top: 40px; font-size: 14px; }
.app--wide .app__body { padding: 22px 22px 24px; }
.app__prog { margin-top: 14px; height: 6px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.app__prog i { display: block; height: 100%; width: 83%; background: var(--sage); }
.app__check {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 8px; overflow: hidden;
}
.app__item {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
}
.app__item:last-child { border-bottom: 0; }
.app__item em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted-2); font-size: 12px; }
@media (max-width: 620px) {
  .app__item { grid-template-columns: 32px 1fr; }
  .app__item > :last-child { grid-column: 2; }
}

/* Three short closers under a full width band. Deliberately unlike the
   numbered rundown and unlike the ruled problem columns. */
.afters { margin-top: 40px; display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .afters { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.afters p { color: var(--muted); font-size: 16px; }
.afters b { color: var(--ink); font-weight: 600; }

/* Horizontal step sequence, used by the migration section. */
.steps { margin-top: 44px; display: grid; gap: 26px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.step { padding-top: 18px; border-top: 2px solid var(--line); }
.step:first-child { border-top-color: var(--ember); }
.step__n {
  font-family: var(--font-serif); font-size: 15px; color: var(--muted-2);
  display: block; margin-bottom: 8px;
}
.step h3 { font-size: 18px; }
.step p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* ---- Pricing page ------------------------------------------------------ */
.page-head { padding-block: 84px 56px; }
.page-head h1 { font-size: clamp(38px, 5vw, 56px); max-width: 16ch; }
.page-head p { margin-top: 22px; max-width: 58ch; font-size: 18px; color: var(--muted); }

.ptable { width: 100%; border-collapse: collapse; margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ptable th, .ptable td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
.ptable th { background: var(--cream-2); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ptable tr:last-child td { border-bottom: 0; }
.ptable td:last-child, .ptable th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ptable__note { margin-top: 12px; font-size: 14px; color: var(--muted-2); }

.calc { margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-md); }
.calc label { display: block; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.calc__row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.calc input { font: 400 18px/1 var(--font-body); padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); width: 240px; max-width: 100%; }
.calc input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc__out { margin-top: 22px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .calc__out { grid-template-columns: 1fr 1fr; } }
.calc__fig { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--cream); }
.calc__fig b { display: block; font-family: var(--font-serif); font-size: 30px; font-weight: 500; line-height: 1.1; }
.calc__fig span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.calc__hint { margin-top: 14px; font-size: 14px; color: var(--muted-2); }

.included { margin-top: 44px; display: grid; gap: 18px 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .included { grid-template-columns: 1fr 1fr; } }
.included ul { margin: 0; padding: 0; display: grid; gap: 12px; }
.included li { list-style: none; padding-left: 26px; position: relative; color: var(--ink-2); font-size: 16px; }
.included li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 2px; background: var(--ember); }

.qa { margin-top: 40px; display: grid; gap: 28px; }
.qa h3 { font-size: 20px; }
.qa p { margin-top: 8px; color: var(--muted); font-size: 16px; max-width: 64ch; }
.qa p + p { margin-top: 12px; }

/* A legally conspicuous notice: set apart, bolder, in capitals, kept readable. */
.legal-notice {
  margin-top: 14px; padding: 16px 18px; max-width: 72ch;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ink-2);
  border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; line-height: 1.6;
}

/* ---- Section shell ----------------------------------------------------- */
.band { padding: 84px 0; border-top: 1px solid var(--line-soft); }
.band--tint { background: var(--cream-2); border-top-color: var(--line); }
.band__head { max-width: 62ch; }
.band__head h2 { font-size: clamp(29px, 3.7vw, 41px); }
.band__head p { margin-top: 18px; color: var(--muted); font-size: 18px; }
.more { display: inline-block; margin-top: 26px; font-weight: 500; }

/* ---- Cards ------------------------------------------------------------- */
.cards { margin-top: 44px; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 26px 24px 28px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--line); }
.card__glyph { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 18px; }
.card__glyph svg { display: block; }
.card h3 { font-size: 21px; }
.card p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.g-sage  { background: var(--sage-soft);  color: var(--sage); }
.g-sky   { background: var(--sky-soft);   color: var(--sky); }
.g-amber { background: var(--amber-soft); color: var(--amber-ink); }
.g-clay  { background: var(--clay-soft);  color: var(--clay); }
.g-rose  { background: var(--rose-soft);  color: var(--rose); }
.g-ember { background: var(--ember-soft); color: var(--ember-on-soft); }

/* ---- Problem band ------------------------------------------------------ */
.problem { display: grid; gap: 30px; grid-template-columns: 1fr; margin-top: 46px; }
@media (min-width: 820px) { .problem { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.problem h3 { font-size: 20px; }
.problem p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.problem .rule { width: 42px; height: 3px; border-radius: 2px; background: var(--ember); margin-bottom: 18px; }

/* ---- Split band -------------------------------------------------------- */
.split { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr .95fr; gap: 72px; } }
.rundown { list-style: none; margin: 38px 0 0; padding: 0; display: grid; gap: 22px; }
.rundown li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.rundown .num { font-family: var(--font-serif); font-size: 22px; color: var(--ember); line-height: 1.2; min-width: 1.4em; }
.rundown h3 { font-size: 19px; }
.rundown p { margin-top: 6px; color: var(--muted); font-size: 16px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-md); }
.panel h3 { font-size: 20px; }
.panel dl { margin: 22px 0 0; display: grid; gap: 18px; }
.panel dt { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.panel dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.panel hr { border: 0; border-top: 1px solid var(--line-soft); margin: 24px 0 0; }
.panel__foot { margin-top: 20px; font-size: 15px; color: var(--muted); }

/* ---- Statement band (accessibility) ------------------------------------ */
.statement { padding: 84px 0; background: var(--desk); border-top: 1px solid var(--line); }
.statement__in { max-width: 76ch; }
.statement h2 { font-size: clamp(28px, 3.4vw, 38px); }
.statement p { margin-top: 20px; color: var(--ink-2); font-size: 18px; }
.statement p + p { margin-top: 16px; }

/* ---- Pricing teaser ---------------------------------------------------- */
.price { display: grid; gap: 30px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) { .price { grid-template-columns: 1.1fr .9fr; gap: 60px; } }
.price__note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: 12px; padding: 24px 26px; box-shadow: var(--shadow-sm); }
.price__note p { color: var(--muted); font-size: 16px; }
.price__note p + p { margin-top: 12px; }

/* ---- Closing band ------------------------------------------------------ */
.closer { background: var(--surface-ink); color: #F5F1E8; padding: 92px 0; }
.closer h2 { font-size: clamp(30px, 4vw, 44px); color: #FBF8F1; max-width: 18ch; margin-top: 28px; }
.closer p { margin-top: 20px; color: #B5AEA5; max-width: 54ch; font-size: 18px; }
.closer__keys { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.closer a.mail { color: #E9A882; }
.closer a.mail:hover { color: #F1B38F; }

/* ---- Footer ------------------------------------------------------------ */
.foot { background: var(--chrome); border-top: 1px solid var(--line); padding: 44px 0 36px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 26px 48px; align-items: flex-start; justify-content: space-between; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot__nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__bot { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.foot__bot p, .foot__bot a { font-size: 14px; color: var(--muted-2); }