/* Heka website — shared styles.
   Tokens are Claude Design's tokens.css verbatim; everything below turns the
   design files' inline styles into reusable classes. Source of truth for
   measurements is source-html/*.dc.html in the handoff. */

:root {
  /* Color */
  --color-bg: #FAF7FA;
  --color-bg-alt: #E7E2E7;
  --color-surface: #FFFFFF;
  --color-surface-dark: #4A3F35;
  --color-surface-darkest: #241E19;
  --color-border: #EEE3EE;
  --color-border-input: #E0D2E0;
  --color-text-primary: #4A3F35;
  --color-text-secondary: #5C5248;
  --color-text-tertiary: #6F657A;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-secondary: #D6CCD6;
  --color-text-on-dark-tertiary: #C4B8C4;
  --color-text-on-darkest: #F6F1F6;
  --color-accent-coral: #F4A261;
  --color-accent-coral-text: #3A2E22;
  --color-link: #A0521C;
  --color-link-hover: #8A4415;
  --color-highlight-purple: #E5CCE5;
  --color-highlight-purple-text: #6B3F6B;

  /* Hover fills — not in the handoff's tokens; Claude Design left button
     hover undecided. Derived from the coral: a darker fill for solid
     buttons, a tinted wash for the outlined one. */
  --color-accent-coral-hover: #E08C43;
  --color-accent-coral-wash: #FDF1E5;

  /* Type */
  --font-body: "sonar-sans", system-ui, -apple-system, sans-serif;
  --font-display: 'itc-avant-garde-gothic-pro', system-ui, sans-serif;
  --font-weight-display: 300;
  --font-weight-bold: 700;

  --type-h1-hero-size: clamp(38px, 6.4vw, 72px);
  --type-h1-hero-lh: 1.04;
  --type-h2-section-size: clamp(28px, 3.6vw, 42px);
  --type-h2-section-lh: 1.15;
  --type-h2-small-size: clamp(26px, 3vw, 36px);
  --type-h3-feature-size: 19px;
  --type-eyebrow-size: 14px;
  --type-body-lg-size: clamp(18px, 2.1vw, 23px);
  --type-body-lg-lh: 1.55;
  --type-body-md-size: 17px;
  --type-body-md-lh: 1.65;
  --type-body-sm-size: 16px;
  --type-caption-size: 14px;
  --type-footer-label-size: 13px;

  /* Radius */
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-button-sm: 10px;
  --radius-callout: 14px;

  /* Spacing */
  --space-section-y: clamp(56px, 8vw, 96px);
  --space-section-y-hero: clamp(56px, 9vw, 110px);
  --space-section-x: clamp(20px, 4vw, 40px);
  --max-content-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }

/* Every interactive thing gets a visible keyboard focus ring. The handoff
   left focus undesigned; coral is the brand's action colour, so it reads as
   "this is the thing you're about to act on". */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, p { margin: 0; }

.disp {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
}

/* Skip link — a keyboard user shouldn't have to tab the header on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  padding: 12px 18px;
  border-radius: var(--radius-button-sm);
  border: 1px solid var(--color-border-input);
}

.skip-link:focus {
  left: var(--space-section-x);
  top: 10px;
}

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-left: var(--space-section-x);
  padding-right: var(--space-section-x);
}

.section { padding-top: var(--space-section-y); padding-bottom: var(--space-section-y); }
.section--hero { padding-top: var(--space-section-y-hero); padding-bottom: clamp(40px, 6vw, 72px); }
.section--white { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section--dark { background: var(--color-surface-dark); color: var(--color-text-on-darkest); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 247, 250, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-header__logo { display: block; }
.site-header__logo img { display: block; height: 36px; width: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: var(--font-weight-bold);
  font-size: var(--type-body-md-size);
  padding: 16px 30px;
  border-radius: var(--radius-button);
  /* Transparent rather than none, so gaining a colour on hover doesn't
     change the button's size. */
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn--coral { background: var(--color-accent-coral); color: var(--color-accent-coral-text); }

/* Same hover as the outlined button: the fill drops to the coral wash and a
   coral border appears. Both buttons then react the same way, and the change
   is far more legible than the darker-coral fill it replaces — that shifted
   #F4A261 to #E08C43, which is easy to miss entirely. */
.btn--coral:hover {
  background: var(--color-accent-coral-wash);
  border-color: var(--color-accent-coral);
  color: var(--color-text-primary);
}

.btn--outline {
  border: 1px solid var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.btn--outline:hover { background: var(--color-accent-coral-wash); border-color: var(--color-accent-coral); color: var(--color-text-primary); }

.btn--sm { font-size: 15px; padding: 11px 20px; border-radius: var(--radius-button-sm); }

.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Hero ---------- */

.eyebrow {
  font-size: var(--type-eyebrow-size);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-highlight-purple-text);
  font-weight: var(--font-weight-bold);
}

.hero__title {
  font-size: var(--type-h1-hero-size);
  line-height: var(--type-h1-hero-lh);
  letter-spacing: -.5px;
  max-width: 16ch;
  text-wrap: balance;
}

.hero__title strong { font-weight: var(--font-weight-bold); }

.hero__sub {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
  color: var(--color-text-secondary);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- Headings ---------- */

.h2-section { font-size: var(--type-h2-section-size); line-height: var(--type-h2-section-lh); }
.h2-small { font-size: var(--type-h2-small-size); line-height: 1.2; }

/* ---------- Who it's for ---------- */

.who { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .who { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .who { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 26px 28px;
}

.card p { font-size: var(--type-body-md-size); line-height: 1.6; color: var(--color-text-primary); }

/* ---------- Two-column prose ---------- */

.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.prose-lg {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.65;
  color: var(--color-text-primary);
  text-wrap: pretty;
}

/* ---------- Features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  max-width: 820px;
}

.feature__rule {
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-accent-coral);
  margin-bottom: 18px;
}

.feature h3 { font-size: var(--type-h3-feature-size); font-weight: var(--font-weight-bold); line-height: 1.3; margin-bottom: 10px; }
.feature p { font-size: var(--type-body-sm-size); line-height: var(--type-body-md-lh); color: var(--color-text-secondary); }

.bullets {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 640px;
  border-top: 1px solid var(--color-border);
  padding-top: 28px;
  margin: 0;
  list-style: none;
  padding-left: 0;
}

.bullets li { display: flex; gap: 12px; align-items: baseline; font-size: var(--type-body-sm-size); line-height: 1.55; color: var(--color-text-secondary); }
.bullets li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-coral);
  flex: none;
  transform: translateY(-2px);
}

/* ---------- A look inside ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: clamp(32px, 5vw, 48px);
  max-width: 760px;
  margin: 0 auto;
}

.shot__frame {
  aspect-ratio: 9 / 19.5;
  border-radius: 18px;
  border: 1px solid var(--color-border-input);
  background: repeating-linear-gradient(45deg, #F6F0F6 0 9px, #FBF7FB 9px 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.shot__frame span { font: 9px/1.55 ui-monospace, Menlo, monospace; color: var(--color-text-tertiary); text-align: center; }

/* A frame holding a real screenshot: no inner padding and no hatch, so the
   screen fills the device outline edge to edge. */
.shot__frame--photo { padding: 0; overflow: hidden; background: var(--color-surface); }
.shot__frame--photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.shot__caption { margin-top: 11px; font-size: var(--type-caption-size); color: var(--color-text-tertiary); }

/* ---------- Dark section ---------- */

.section--dark .h2-section { color: var(--color-text-on-dark); }
.section--dark .lede { font-size: var(--type-body-md-size); line-height: 1.7; color: var(--color-text-on-dark-secondary); }
.section--dark .promise h3 { font-size: var(--type-body-md-size); font-weight: var(--font-weight-bold); color: var(--color-text-on-dark); margin-bottom: 7px; }
.section--dark .promise p { font-size: var(--type-body-sm-size); line-height: var(--type-body-md-lh); color: var(--color-text-on-dark-tertiary); }

.stack-22 { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Prose blocks ---------- */

.measure { max-width: 68ch; }
.measure-narrow { max-width: 56ch; }

.body-md { font-size: var(--type-body-md-size); line-height: 1.7; color: var(--color-text-primary); }
.body-md--muted { color: var(--color-text-secondary); }

.smallprint {
  font-size: var(--type-caption-size);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
}

.note { font-size: 15px; line-height: 1.6; color: var(--color-text-tertiary); }

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; max-width: 780px; }
.faq__item { padding: 24px 0; border-top: 1px solid var(--color-border); }
.faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.faq__item h3 { font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.4; margin-bottom: 9px; }
.faq__item p { font-size: var(--type-body-sm-size); line-height: var(--type-body-md-lh); color: var(--color-text-secondary); }

/* ---------- Forms ---------- */

.field label,
.field > .field__label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.field__optional { font-weight: 400; color: var(--color-text-tertiary); }

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-button);
  padding: 14px 16px;
  font-size: var(--type-body-sm-size);
  font-family: inherit;
  color: var(--color-text-primary);
}

textarea { resize: vertical; line-height: 1.5; }

input:focus,
textarea:focus { border-color: var(--color-accent-coral); }

.checkbox-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.checkbox-row input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--color-accent-coral); }
.checkbox-row span { font-size: var(--type-body-sm-size); line-height: 1.5; color: var(--color-text-primary); }
.checkbox-help { margin: 0 0 0 27px; font-size: var(--type-caption-size); line-height: 1.5; color: var(--color-text-tertiary); }

.form-stack { display: flex; flex-direction: column; gap: 22px; }

/* Inline waitlist (Home) */
.waitlist-form { display: flex; flex-wrap: wrap; gap: 12px; }
.waitlist-form input { flex: 1 1 240px; min-width: 0; padding: 16px 18px; font-size: var(--type-body-md-size); }

/* Submission feedback. Never silently succeeds or silently fails. */
.form-status { font-size: var(--type-body-sm-size); line-height: 1.6; }
.form-status[data-state="error"] { color: #B3261E; }
.form-status[data-state="ok"] { color: var(--color-text-secondary); }

/* ---------- Footer ---------- */

.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.site-footer__inner { padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(40px, 5vw, 60px); }

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
  margin-bottom: 36px;
}

.site-footer__links { display: flex; gap: 28px; align-self: center; }

.site-footer__links a,
.footer-label {
  font-size: var(--type-footer-label-size);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-tertiary);
}

.site-footer__links a:hover { color: var(--color-link-hover); }

.site-footer__logo { flex: 1 1 280px; max-width: 320px; }
.site-footer__logo img { display: block; width: 320px; max-width: 100%; height: auto; }

.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: baseline;
}

.site-footer__bottom p { font-size: var(--type-caption-size); line-height: 1.65; color: var(--color-text-tertiary); }
.site-footer__disclaimer { max-width: 64ch; }
.site-footer__meta { white-space: nowrap; }

/* ---------- Legal pages ---------- */

.legal { display: flex; gap: 48px; align-items: flex-start; }

.legal__nav { flex: none; width: 210px; position: sticky; top: 90px; }
.legal__nav p { margin-bottom: 12px; font-size: var(--type-footer-label-size); font-weight: var(--font-weight-bold); letter-spacing: .06em; color: var(--color-text-tertiary); }
.legal__nav div { display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.4; }

.legal__body { min-width: 0; max-width: 64ch; }
.legal__body h2 { font-size: 22px; font-weight: var(--font-weight-bold); line-height: 1.3; margin: 40px 0 12px; scroll-margin-top: 90px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { font-size: var(--type-body-sm-size); line-height: 1.7; color: var(--color-text-primary); margin-bottom: 14px; }
.legal__body ul { margin: 0 0 14px; padding-left: 22px; }
.legal__body li { font-size: var(--type-body-sm-size); line-height: 1.7; color: var(--color-text-primary); margin-bottom: 9px; }

.legal__title { font-size: clamp(36px, 5vw, 52px); line-height: 1.1; margin-bottom: 12px; }
.legal__updated { font-size: var(--type-body-sm-size); color: var(--color-text-tertiary); margin-bottom: 30px; }
.legal__lede { font-size: 19px; line-height: 1.65; color: var(--color-text-primary); max-width: 64ch; margin-bottom: 12px; }
.legal__scope { font-size: var(--type-body-sm-size); line-height: 1.6; color: var(--color-text-tertiary); max-width: 64ch; margin-bottom: 40px; }

/* The sticky contents column is desktop-only; on a phone it becomes a plain
   list above the text, which is more useful than a stuck sidebar. */
@media (max-width: 833px) {
  .legal { flex-direction: column; gap: 28px; }
  .legal__nav { position: static; width: 100%; }
  .legal__nav div { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 8px 16px; }
}

/* Honeypot — a field real visitors never see or fill, positioned off-screen
   rather than display:none so it stays reachable by less careful bots that
   skip hidden inputs. Any value in it means a bot filled the form. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Mobile-only adjustments ---------- */

/* Below 640px only — the width at which the "Who it's for" grid also drops to
   one column, so this shares the design's existing mobile boundary rather
   than inventing a new one. Nothing here affects tablet or desktop. */
@media (max-width: 639px) {
  /* At desktop size this took a third of a 375px screen and crowded the
     logo. Narrower, but not shorter than a finger can reliably hit: cutting
     the padding alone took it to 36px tall, and Apple and Android both
     specify 44-48px. min-height holds the tap target while the width drops. */
  .site-header .btn--sm {
    font-size: 13px;
    padding: 8px 9px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* At 375px the grid's 165px minimum gave one frame per row at full screen
     width, each 726px tall — taller than the phone screen, so the section
     was endless to scroll. Down to 238px, one per row, centred, with the
     caption keeping its position at the frame's left edge. */
  .shots {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 238px;
    /* Block centred by the base rule's margin: 0 auto. Captions are left
       alone — they sit at their own frame's left edge, so frame and caption
       move together and keep the same relationship they have on desktop. */
  }
}

/* Blocks drag-to-select text on the page. Form fields are explicitly
   excluded — someone editing what they typed needs normal selection, and
   this is about page content, not the visitor's own input. */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}