/* ============================================================
   CLARA JOBS (ehp.careers): same family as the Ember House
   4A system (steel field, paper grid, outline type) but built
   for one job: get someone to the sign-up button in five seconds.
   No stat walls, no manifesto, no multi-program nav. One path.
   ============================================================ */

:root{
  --ink:       #1d2d3d;
  --ink-deep:  #16222e;
  --ghost:     #2c455d;
  --steel:     #749dc4;
  --ice:       #abd9eb;
  --paper:     #f5f5f8;
  --grid:      #e7e7ea;
  --dim:       #44535e;
  --dim-dark:  #a8bfce;
  --white:     #f2f2f3;

  /* Clara Jobs gets its own accent inside the family: a warm gold for
     "opportunity", kept apart from Ember House's crisis/donate ember-orange
     so the two products never compete for the same colour meaning. */
  --gold:      #e0a537;
  --gold-fill: #a3690f;   /* 5.1:1 with white -- safe for solid buttons */
  --gold-ink:  #8a5606;   /* 5.7:1 on paper -- safe for small text */

  --tz: 1;
  --f-display: "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-label:   "Chakra Petch", "Trebuchet MS", Roboto, system-ui, sans-serif;
  --f-body:    "Space Grotesk", "Segoe UI", Roboto, system-ui, sans-serif;

  --cell: 72px;
  --maxw: 1080px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:inherit; }

.field-dark{
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(116,157,196,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,157,196,.11) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
  color:var(--white);
}
.field-paper{
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

.display{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  line-height:1.02; letter-spacing:.01em;
}
.label{
  font-family:var(--f-label); font-weight:600; text-transform:uppercase;
  letter-spacing:.28em; font-size:.75rem;
}
.label--ice{ color:var(--ice); }
.label--steel{ color:var(--steel); }
.label--dim{ color:var(--dim); }

/* ---------- buttons: min 44px tap target everywhere ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer;
  font-family:var(--f-label); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.86rem;
  padding:16px 28px; min-height:44px; border:1.5px solid transparent;
  border-radius:3px; transition:all .18s ease;
}
.btn--primary{ background:var(--gold-fill); color:#fff; }
.btn--primary:hover{ background:#8a5606; }
.btn--ghost-light{ border-color:var(--steel); color:var(--ice); background:transparent; }
.btn--ghost-light:hover{ background:rgba(116,157,196,.16); }
.btn--ghost-dark{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn--ghost-dark:hover{ background:var(--ink); color:var(--white); }
.btn--small{ padding:10px 18px; font-size:.74rem; min-height:40px; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---------- nav: two links, sign in, one CTA. no burger needed. ---------- */
.nav{
  position:sticky; top:0; left:0; right:0; z-index:50;
  background:rgba(22,34,46,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(116,157,196,.18);
}
.nav .wrap{
  display:flex; align-items:center; gap:14px; height:60px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brandmark{ width:22px; height:22px; flex:none; stroke:var(--ice); color:var(--ice); }
.brand span{
  font-family:var(--f-label); font-weight:600; color:var(--white);
  letter-spacing:.14em; font-size:.92rem; white-space:nowrap;
}
.nav-links{ display:flex; align-items:center; gap:14px; }
.nav-links a{ text-decoration:none; }
.nav-links > a:not(.btn){
  font-family:var(--f-label); font-weight:500; color:var(--dim-dark);
  letter-spacing:.1em; font-size:.72rem; text-transform:uppercase;
  white-space:nowrap; display:none;
}
.nav-links > a:not(.btn):hover, .nav-links > a.on{ color:var(--ice); }
.navlogin{ display:none !important; }
@media (min-width:640px){
  .nav-links > a:not(.btn){ display:inline; }
  .navlogin{ display:inline !important; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:56px 0 52px; }
.hero .wrap{ position:relative; }
.hero-mark{
  position:absolute; top:-60px; right:-60px; width:340px; height:340px;
  stroke:var(--ghost); opacity:.8; pointer-events:none;
}
.hero .kicker{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.hero .kicker .tick{ width:28px; height:2px; background:var(--gold); flex:none; }
.hero h1{
  font-size:clamp(2.1rem, 8vw, 3.4rem);
  max-width:14ch;
}
.hero h1 .accent{ color:var(--ice); }
.hero .sub{
  max-width:52ch; color:var(--dim-dark); font-size:1.05rem; margin-top:22px;
}
.hero .cta-row{ margin-top:32px; }
.hero-note{ margin-top:18px; font-size:.86rem; color:var(--dim-dark); }
.hero-note b{ color:var(--ice); font-weight:500; }

.text-clara{
  margin-top:20px; padding:16px 18px; max-width:52ch;
  border:1px solid rgba(116,157,196,.4); border-left:4px solid var(--steel);
  background:rgba(116,157,196,.08);
}
.text-clara p{ font-size:.92rem; color:var(--dim-dark); }
.text-clara a{ color:var(--ice); font-weight:500; text-decoration:underline; }

/* ---------- sections ---------- */
.sec{ padding:56px 0; }
.sec h2.display{ font-size:clamp(1.7rem, 5vw, 2.5rem); margin-bottom:10px; }
.sechead{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.badge{
  font-family:var(--f-label); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  border:1.5px solid currentColor; padding:5px 10px; line-height:1; flex:none;
}
.field-paper .badge{ color:var(--ink); }
.field-dark .badge{ color:var(--ice); }
.sechead .rule{ flex:1; height:1px; background:currentColor; opacity:.22; }
.lede{ font-size:1.02rem; max-width:60ch; color:#3c4d5c; margin-bottom:6px; }
.field-dark .lede{ color:var(--dim-dark); }

/* ---------- steps ---------- */
.steps{
  list-style:none; counter-reset:step; margin-top:36px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;
}
.steps li{
  counter-increment:step; background:#fff; border:1px solid var(--grid);
  padding:26px 22px 24px; position:relative;
}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--f-display); font-weight:600; font-size:1.7rem;
  color:transparent; -webkit-text-stroke:1.4px var(--steel); line-height:1;
  display:block; margin-bottom:16px;
}
@supports not (-webkit-text-stroke:1px black){ .steps li::before{ color:var(--steel); } }
.steps h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:1.12rem; letter-spacing:.01em; margin-bottom:8px; line-height:1.15;
}
.steps p{ font-size:.92rem; color:#48596a; }

/* ---------- trust ---------- */
.trust-grid{
  margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
}
.trust-item{
  border:1px solid rgba(116,157,196,.3); border-left:4px solid var(--ice);
  padding:22px 22px 20px; background:rgba(22,34,46,.5);
}
.trust-item h3{
  font-family:var(--f-label); font-weight:600; color:var(--ice);
  letter-spacing:.06em; font-size:.98rem; margin-bottom:8px; text-transform:none;
}
.trust-item p{ font-size:.92rem; color:var(--dim-dark); }

/* ---------- price line ---------- */
.price-strip{
  margin-top:36px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1.5px solid var(--gold); padding:18px 22px; background:rgba(224,165,55,.07);
}
.price-strip .big{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:1.5rem; color:var(--gold-ink);
}
.price-strip p{ font-size:.92rem; color:#3c4d5c; }

/* ---------- FAQ (native details, cheap and works everywhere) ---------- */
.faq{ margin-top:32px; max-width:74ch; }
.faq details{
  border-bottom:1px solid var(--grid); padding:18px 0;
}
.faq summary{
  cursor:pointer; list-style:none; font-family:var(--f-label); font-weight:600;
  font-size:1rem; color:var(--ink); display:flex; align-items:center;
  justify-content:space-between; gap:16px; min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--f-display); font-size:1.4rem; color:var(--steel);
  flex:none; line-height:1;
}
.faq details[open] summary::after{ content:"\2212"; }
.faq .a{ font-size:.94rem; color:#48596a; margin-top:10px; max-width:66ch; }
.faq .a b{ color:var(--ink); }

/* ---------- final CTA band ---------- */
.finalcta{ text-align:left; }
.finalcta h2.display{ max-width:16ch; }
.finalcta .btn-row{ margin-top:26px; }

/* ---------- footer ---------- */
.footer{ padding:52px 0 34px; }
.footer-top{ margin-bottom:36px; }
.footer-top .brand{ margin-bottom:14px; }
.footer-tag{ font-size:.92rem; color:var(--dim-dark); max-width:44ch; }
.footer-cols{ display:flex; gap:44px; flex-wrap:wrap; }
.footer-cols .label{ display:block; margin-bottom:14px; }
.footer-cols a{ display:block; color:var(--dim-dark); text-decoration:none; font-size:.88rem; padding:4px 0; }
.footer-cols a:hover{ color:var(--ice); }
.fbottom{ margin-top:44px; padding-top:24px; border-top:1px solid rgba(116,157,196,.18);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fbottom .tick{ width:26px; height:2px; background:var(--steel); flex:none; }
.fbottom span{ font-family:var(--f-label); font-weight:600; letter-spacing:.18em; font-size:.7rem; color:var(--dim-dark); }
.fbottom-dim{ letter-spacing:0 !important; font-weight:400 !important; text-transform:none; opacity:.75; }
.fbottom-dim a{ color:var(--ice); text-decoration:underline; }

/* ---------- legal pages ---------- */
.legal{ max-width:74ch; }
.legal h2.pagetitle{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.7rem, 6vw, 2.4rem); color:var(--white); margin-bottom:14px;
}
.legal .sub{ color:var(--dim-dark); max-width:58ch; }
.legal .meta{ font-family:var(--f-label); font-size:.78rem; color:var(--dim); letter-spacing:.06em; }
.legal h4{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:.02em; color:var(--ink); margin:32px 0 10px;
}
.legal p, .legal li{ color:#48596a; font-size:.96rem; line-height:1.7; }
.legal ul{ margin:8px 0 8px 20px; }
.legal strong{ color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width:599px){
  .hero{ padding:36px 0 40px; }
  .hero-mark{ width:220px; height:220px; top:-40px; right:-60px; }
  .sec{ padding:44px 0; }
  .price-strip{ flex-direction:column; align-items:flex-start; }
}

/* keep the layout from ever scrolling sideways */
html, body{ overflow-x:hidden; }


/* ── Live product numbers + beta badge (AK 2026-09-21) ────────────────────
   The stat grid is deliberately large: these figures are the argument for
   signing up, and a number nobody can read from arm's length is decoration.
   Sized off the viewport so it holds at 390px and at 1440px. */
.beta-tag{
  display:inline-flex; align-items:center;
  font-family:var(--f-label, inherit); font-weight:600;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ice, #cfe2f4); background:rgba(116,157,196,.18);
  border:1px solid rgba(116,157,196,.5); border-radius:999px;
  padding:3px 10px; margin-left:10px; white-space:nowrap;
}
.beta-tag--hero{ font-size:.74rem; padding:4px 12px; }

.stat-grid{
  display:grid; gap:18px; margin:30px 0 26px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.stat{
  padding:24px 22px; border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(116,157,196,.24);
}
.stat-n{
  display:block; font-family:var(--f-display, inherit); font-weight:600;
  font-size:clamp(2.4rem, 6vw, 3.4rem); line-height:1.05;
  color:var(--ice, #cfe2f4); letter-spacing:-.01em;
}
.stat-l{
  display:block; margin-top:10px; font-size:1rem; line-height:1.45;
  color:var(--dim-dark, #9fb3c8);
}
@media (max-width:560px){
  .stat{ padding:20px 18px; }
  .stat-l{ font-size:.95rem; }
}

/* "Powered by CuroMail" (AK 2026-09-27, order t_80da22bd85) */
.hero-curo{ margin:14px 0 0; }
.hero-curo a{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:#f5f5f8; background:rgba(224,165,55,.12); border:1px solid rgba(224,165,55,.45);
  border-radius:999px; padding:5px 14px 5px 5px; font-size:.92rem; }
.hero-curo a:hover{ border-color:#e0a537; }
.hero-curo img{ width:24px; height:24px; border-radius:6px; display:block; }
.hero-curo b{ color:#e0a537; }