/* ---------------------------------------------------------------- HOME (2026-11)
   The calmer home page: a serif headline at normal weight, Figtree for the
   rest, one accent (teal) used sparingly, hairlines instead of shadows, one
   main action. Everything here is scoped to body.hc so the other pages,
   which still use style.css as before, are untouched. */
body.hc {
  --hc-ink: #14263b;
  --hc-ink-2: #4b5a6a;
  --hc-ink-3: #6f7c89;
  --hc-paper: #f8f7f3;
  --hc-paper-2: #f0eee7;
  --hc-card: #fffefb;
  --hc-line: #e2dfd6;
  --hc-teal: #19a9bd;
  --hc-teal-ink: #0e7f8f;
  --hc-teal-wash: #e4f1f1;
  --hc-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hc-sans: "Figtree", system-ui, -apple-system, sans-serif;
  --hc-ease: cubic-bezier(.25, 1, .5, 1);
  background: var(--hc-paper);
  color: var(--hc-ink-2);
  font-family: var(--hc-sans);
}
body.hc .progress { display: none; }

/* ---- Shared bits ---- */
.hc-main { display: block; }
.hc-wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.hc-sec { padding: clamp(80px, 10vw, 128px) 0; }
.hc-sec--flush { padding-top: 0; }
.hc-center { text-align: center; }
.hc-narrow { max-width: 14em; margin-inline: auto; }
.hc-mx { margin-inline: auto; }
.hc-hero h1, body.hc .hc-h2, .hc-list h3, .hc-steps h3, .hc-plan h3 { font-family: var(--hc-serif); font-weight: 400; color: var(--hc-ink); font-optical-sizing: auto; }
.hc-hero h1 { font-size: clamp(42px, 5.6vw, 64px); line-height: 1.06; letter-spacing: -.025em; }
.hc-h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.02em; }
.hc-list h3, .hc-steps h3, .hc-plan h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.hc-lede { font-size: 19px; line-height: 1.6; max-width: 34em; margin-top: 24px; }
.hc-eyebrow { display: block; font: 500 12px/1 var(--hc-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hc-ink-3); margin-bottom: 24px; }
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hc-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 6px; border: 0; background: var(--hc-ink); color: var(--hc-paper); font: 500 15px/1 var(--hc-sans); cursor: pointer; transition: background .2s var(--hc-ease), transform .15s var(--hc-ease); }
.hc-btn:hover { background: #0c1a2a; }
.hc-btn:active { transform: translateY(1px); }
.hc-btn .hc-ar { transition: transform .2s var(--hc-ease); }
.hc-btn:hover .hc-ar { transform: translateX(3px); }
.hc-btn--light { background: var(--hc-paper); color: var(--hc-ink); }
.hc-btn--light:hover { background: #fff; }
.hc-link { white-space: nowrap; font-weight: 500; color: var(--hc-ink); border-bottom: 1px solid var(--hc-line); padding-bottom: 2px; transition: border-color .2s; }
.hc-link:hover { border-color: var(--hc-ink); }
body.hc :focus-visible { outline: 2px solid var(--hc-teal); outline-offset: 3px; border-radius: 4px; }
.hc-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.hc-ctas--c { justify-content: center; margin-top: 48px; }

/* ---- Hero ---- */
.hc-hero { padding: 132px 0 96px; }
.hc-hero__grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 64px; align-items: center; }
.hc-mark { position: relative; white-space: nowrap; }
.hc-mark::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.14em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 50 5, 120 4, 197 11' fill='none' stroke='%2319a9bd' stroke-width='3.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: scaleX(0); transform-origin: left center; transition: transform 1s .45s var(--hc-ease); }
.reveal.in .hc-mark::after { transform: scaleX(1); }
.hc-pick { margin-top: 32px; gap: 12px; }
body.hc .hc-pick .aud-pick__lbl { font: 400 14px/1 var(--hc-sans); letter-spacing: 0; text-transform: none; color: var(--hc-ink-3); margin-right: 0; }
body.hc .hc-pick .aud-pick__b { font: 500 14px/1 var(--hc-sans); color: var(--hc-ink-2); background: var(--hc-card); border: 1px solid var(--hc-line); padding: 9px 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.hc .hc-pick .aud-pick__b:hover { border-color: var(--hc-ink); color: var(--hc-ink); }
body.hc .hc-pick .aud-pick__b[aria-pressed="true"] { background: var(--hc-ink); border-color: var(--hc-ink); color: var(--hc-paper); }
.hc-shots { position: relative; padding: 0 0 48px 48px; }
.hc-browser { display: block; background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,38,59,.04), 0 24px 48px -24px rgba(20,38,59,.22); }
.hc-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--hc-line); font: 500 11px/1 var(--hc-sans); color: var(--hc-ink-3); }
.hc-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc-line); }
.hc-bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.hc-phone { position: absolute; left: 0; bottom: 0; width: 27%; border-radius: 18px; border: 5px solid var(--hc-ink); overflow: hidden; background: var(--hc-ink); box-shadow: 0 20px 40px -18px rgba(20,38,59,.45); }
.hc-phone img { width: 100%; height: auto; aspect-ratio: 520 / 1126; object-fit: cover; object-position: top; }

/* ---- Live right now ---- */
.hc-trusted { border-block: 1px solid var(--hc-line); padding: 22px 0; }
.hc-trusted .hc-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; }
.hc-trusted .hc-eyebrow { margin: 0; }
.hc-names { display: flex; flex-wrap: wrap; gap: 6px 30px; font: 400 19px/1.3 var(--hc-serif); color: var(--hc-ink); }

/* ---- Why ---- */
.hc-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--hc-line); text-align: left; }
.hc-facts > div { padding: 24px 24px 0 0; }
.hc-facts > div + div { padding-left: 24px; border-left: 1px solid var(--hc-line); }
.hc-facts b { display: block; font: 400 44px/1 var(--hc-serif); color: var(--hc-ink); letter-spacing: -.02em; margin-bottom: 12px; }
.hc-facts span { display: block; font-size: 15px; line-height: 1.45; max-width: 16em; }

/* ---- Meet Hunter: one card, the photo tucked inside it ---- */
.hc-bio { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; max-width: 940px; margin-inline: auto; }
.hc-bio__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 8px; }
.hc-bio__facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--hc-line); }
.hc-bio__facts > div { padding: 16px 12px 0 0; }
.hc-bio__facts > div + div { padding-left: 16px; border-left: 1px solid var(--hc-line); }
.hc-bio__facts b { display: block; font: 400 30px/1 var(--hc-serif); color: var(--hc-ink); letter-spacing: -.01em; }
.hc-bio__facts span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--hc-ink-3); }
.hc-bio .hc-sig { margin-top: 28px; }

.hc-meet { background: var(--hc-paper-2); }
.hc-meet__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.hc-card { background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 12px; padding: 48px; }
.hc-card .hc-h2 { font-size: clamp(32px, 3.6vw, 44px); }
.hc-card p { margin-top: 16px; font-size: 17px; line-height: 1.6; }
.hc-card .hc-strong { color: var(--hc-ink); font-weight: 500; }
.hc-sig { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hc-line); }
.hc-sig b { display: block; font: 400 22px/1.2 var(--hc-serif); color: var(--hc-ink); }
.hc-sig span { display: block; margin-top: 6px; font: 500 12px/1 var(--hc-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hc-ink-3); }
.hc-me img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }

/* ---- What's built in ---- */
.hc-inc { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.hc-inc__intro { position: sticky; top: 120px; }
.hc-inc__intro .hc-link { display: inline-block; margin-top: 32px; }
.hc-list { list-style: none; border-top: 1px solid var(--hc-line); margin: 0; padding: 0; }
.hc-list li { display: grid; grid-template-columns: 44px 1fr; padding: 24px 0; border-bottom: 1px solid var(--hc-line); }
.hc-n { font: 500 13px/1.9 var(--hc-sans); color: var(--hc-teal-ink); font-variant-numeric: tabular-nums; }
.hc-list p { margin-top: 6px; font-size: 16px; line-height: 1.55; }

/* ---- Work ---- */
.hc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.hc-head .hc-eyebrow { margin-bottom: 20px; }
.hc-sites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
.hc-site { display: block; }
.hc-site .hc-browser { transition: transform .35s var(--hc-ease), box-shadow .35s var(--hc-ease); }
.hc-site:hover .hc-browser { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(20,38,59,.04), 0 30px 50px -24px rgba(20,38,59,.3); }
.hc-site b { display: block; margin-top: 16px; font: 400 21px/1.25 var(--hc-serif); color: var(--hc-ink); }
.hc-site > span:last-child { display: block; font-size: 15px; color: var(--hc-ink-3); }

/* ---- How it works (dark band) ---- */
.hc-dark { background: var(--hc-ink); color: #c3ccd6; }
body.hc .hc-dark .hc-h2, .hc-dark .hc-steps h3 { color: var(--hc-paper); }
.hc-dark .hc-eyebrow, .hc-k { color: var(--hc-teal); }
.hc-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid rgba(255,255,255,.14); text-align: left; }
.hc-steps > div { padding: 32px 32px 0 0; }
.hc-steps > div + div { padding-left: 32px; border-left: 1px solid rgba(255,255,255,.14); }
.hc-k { font: 500 12px/1 var(--hc-sans); letter-spacing: .12em; text-transform: uppercase; }
.hc-steps h3 { margin: 16px 0 12px; }
.hc-steps p { font-size: 16px; line-height: 1.55; }

/* ---- Editor demo (its own section; only the heading is restyled) ---- */
body.hc .bdemo-sec { padding: clamp(80px, 10vw, 128px) 0; }
body.hc .bdemo-sec .eyebrow { display: block; background: none; padding: 0; font: 500 12px/1 var(--hc-sans); letter-spacing: .12em; color: var(--hc-ink-3); margin-bottom: 24px; }
body.hc .bdemo-sec .section-title { font-family: var(--hc-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
body.hc .bdemo-sec .lead { font-family: var(--hc-sans); color: var(--hc-ink-2); font-size: 19px; margin-top: 24px; }

/* ---- Pricing ---- */
.hc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; text-align: left; }
.hc-plan { display: flex; flex-direction: column; background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 12px; padding: 32px; }
.hc-tier { display: flex; justify-content: space-between; gap: 12px; font: 500 12px/1 var(--hc-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hc-ink-3); }
.hc-tier em { font-style: normal; color: var(--hc-teal); }
.hc-plan h3 { margin-top: 16px; }
.hc-price { margin-top: 24px; font: 400 48px/1 var(--hc-serif); color: var(--hc-ink); letter-spacing: -.02em; }
.hc-price span { font: 400 16px var(--hc-sans); color: var(--hc-ink-3); letter-spacing: 0; }
.hc-fee { margin-top: 8px; font-size: 14px; color: var(--hc-ink-3); }
.hc-plan ul { list-style: none; display: grid; gap: 12px; margin: 24px 0 32px; padding: 24px 0 0; border-top: 1px solid var(--hc-line); font-size: 15px; line-height: 1.45; }
.hc-plan li { display: grid; grid-template-columns: 20px 1fr; }
.hc-plan li::before { content: ""; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--hc-teal); }
.hc-plan li b { font-weight: 500; color: var(--hc-ink); }
.hc-plan .hc-link { margin-top: auto; align-self: flex-start; }
.hc-plan.is-pop { background: var(--hc-ink); border-color: var(--hc-ink); color: #c3ccd6; }
.hc-plan.is-pop h3, .hc-plan.is-pop .hc-price, .hc-plan.is-pop li b { color: var(--hc-paper); }
.hc-plan.is-pop .hc-tier, .hc-plan.is-pop .hc-price span, .hc-plan.is-pop .hc-fee { color: #8d9aa8; }
.hc-plan.is-pop ul { border-color: rgba(255,255,255,.14); }
.hc-plan.is-pop .hc-link { color: var(--hc-paper); border-color: rgba(255,255,255,.3); }
.hc-plan.is-pop .hc-link:hover { border-color: var(--hc-paper); }
.hc-fine { max-width: 44em; margin: 32px auto 0; font-size: 15px; }
.hc-fine b { font-weight: 500; color: var(--hc-ink); }
.hc-addon { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin-top: 32px; padding: 16px 24px; border: 1px solid var(--hc-line); border-radius: 10px; font-size: 15px; }
.hc-addon b { font: 400 18px/1.3 var(--hc-serif); color: var(--hc-ink); }

/* ---- Closing + newsletter ---- */
.hc-close { background: var(--hc-teal-wash); }
.hc-news { padding: 56px 0; border-bottom: 1px solid var(--hc-line); }
.hc-news__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.hc-news h2 { font: 400 28px/1.2 var(--hc-serif); color: var(--hc-ink); letter-spacing: -.01em; }
.hc-news p { margin-top: 8px; font-size: 15px; max-width: 30em; }
.hc-news .fields { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 8px; }
.hc-news input[type="text"], .hc-news input[type="email"] { min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--hc-line); border-radius: 6px; background: var(--hc-card); font: 400 15px var(--hc-sans); color: var(--hc-ink); }
.hc-news input:focus { outline: 2px solid var(--hc-teal); outline-offset: 1px; }
.hc-news .ok { display: none; padding: 14px 16px; border: 1px solid var(--hc-line); border-radius: 8px; background: var(--hc-card); color: var(--hc-ink); font-weight: 500; }

/* ---- Footer (shared, restyled for this page) ---- */
body.hc .footer { font-family: var(--hc-sans); }
body.hc .footer h5 { font: 400 18px/1.2 var(--hc-serif); letter-spacing: 0; text-transform: none; }
body.hc .footer img.flogo { height: 40px; }

/* ---- Motion: gentler reveals than the rest of the site ---- */
body.hc .hc-main .reveal { transform: translateY(14px); transition-duration: .7s; }
body.hc .hc-main .reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hc-mark::after { transition: none; transform: scaleX(1); }
  .hc-site .hc-browser, .hc-btn, .hc-btn .hc-ar { transition: none; }
}

/* ---- Smaller screens ---- */
@media (max-width: 960px) {
  .hc-hero__grid, .hc-meet__grid, .hc-inc, .hc-news__grid { grid-template-columns: 1fr; gap: 48px; }
  .hc-hero { padding-top: 112px; }
  .hc-shots { max-width: 620px; }
  .hc-inc__intro { position: static; }
  .hc-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .hc-steps { grid-template-columns: 1fr; }
  .hc-steps > div, .hc-steps > div + div { padding: 24px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .hc-facts { grid-template-columns: 1fr 1fr; }
  .hc-facts > div { padding-bottom: 24px; }
  .hc-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hc-bio { grid-template-columns: 160px 1fr; gap: 32px; }
  .hc-me { order: -1; max-width: 420px; }
  .hc-me img { aspect-ratio: 1 / 1; }
}
@media (max-width: 640px) {
  .hc-wrap { width: calc(100% - 32px); }
  .hc-hero { padding: 100px 0 64px; }
  .hc-lede { font-size: 17px; }
  .hc-shots { padding: 0 0 32px 32px; }
  .hc-sites { grid-template-columns: 1fr; gap: 40px; }
  .hc-head { flex-direction: column; align-items: flex-start; }
  .hc-card { padding: 32px 22px; }
  .hc-bio { grid-template-columns: 1fr; gap: 24px; }
  .hc-bio__pic { width: 112px; }
  .hc-bio__pic img { aspect-ratio: 1 / 1; border-radius: 50%; object-position: center 22%; box-shadow: 0 0 0 1px var(--hc-line); }
  .hc-bio__facts b { font-size: 24px; }
  .hc-bio__facts > div + div { padding-left: 12px; }
  .hc-facts b { font-size: 36px; }
  .hc-facts > div, .hc-facts > div + div { padding-right: 12px; }
  .hc-facts > div + div { padding-left: 12px; }
  .hc-facts > div:nth-child(3) { padding-left: 0; }
  .hc-news .fields { grid-template-columns: 1fr 1fr; }
  .hc-news .fields input[type="email"], .hc-news .fields .hc-btn { grid-column: 1 / -1; }
  .hc-news .fields .hc-btn { justify-content: center; }
  .hc-center .hc-h2 br { display: none; }
}