/* HearthBee website. Black and white with one gray family, like the app. Red only for destructive actions. */
:root {
  --bg: #ffffff;
  --card: #f5f5f5;
  --line: #e6e6e6;
  --text: #0a0a0a;
  --sub: #6b6b6b;
  --ink: #0a0a0a;
  --on-ink: #ffffff;
  --cell-2: #e6e6e6;
  --danger: #c62828;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --measure: 66ch;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --card: #141414; --line: #262626; --text: #f5f5f5; --sub: #9a9a9a;
    --ink: #f5f5f5; --on-ink: #000000; --cell-2: #262626; --danger: #ef5350;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.6 var(--body); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--on-ink); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 12px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* Logo: follows the text color in light and dark */
.mark-bg { fill: var(--ink); }
.mark-fg { fill: var(--bg); }

/* Header */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 22px/1 var(--display); letter-spacing: -0.01em; }
.brand svg { width: 34px; height: 34px; }
.nav { display: flex; gap: 22px; font-size: 16px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* Hero */
.hero { overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 40px 0 88px; }
.hero h1 { font: 800 clamp(42px, 6vw, 76px)/0.98 var(--display); letter-spacing: -0.03em; margin: 0 0 24px; font-stretch: 90%; }
.hero p.lede { font-size: 21px; line-height: 1.55; max-width: 34ch; margin: 0 0 32px; color: var(--sub); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn { display: inline-block; font: 700 17px/1 var(--body); padding: 16px 22px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; background: none; color: var(--text); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { opacity: .85; }
.btn-ghost { border-color: var(--text); }
.btn-ghost:hover { background: var(--card); }
.btn[disabled] { opacity: .5; cursor: default; }
.soon { font-size: 15px; color: var(--sub); margin-top: 18px; }

/* Honeycomb of reminders */
.comb { position: relative; height: 586px; width: 620px; justify-self: end; }
.cell {
  position: absolute; width: 200px; height: 230px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 0 24px; background: var(--card); color: var(--text);
}
.cell b { font: 700 19px/1.15 var(--display); margin-bottom: 6px; }
.cell span { font-size: 15px; line-height: 1.3; color: var(--sub); }
.cell.h { background: var(--cell-2); }
.cell.d { background: var(--ink); color: var(--on-ink); }
.cell.d span { color: var(--on-ink); opacity: .75; }
.c1 { left: 105px; top: 0; } .c2 { left: 315px; top: 0; }
.c3 { left: 0; top: 178px; } .c4 { left: 210px; top: 178px; } .c5 { left: 420px; top: 178px; }
.c6 { left: 105px; top: 356px; } .c7 { left: 315px; top: 356px; }
@media (prefers-reduced-motion: no-preference) {
  .cell { animation: settle .7s cubic-bezier(.2,.8,.2,1) both; }
  .c1 { animation-delay: .05s } .c2 { animation-delay: .12s } .c3 { animation-delay: .19s } .c4 { animation-delay: .26s }
  .c5 { animation-delay: .33s } .c6 { animation-delay: .4s } .c7 { animation-delay: .47s }
  @keyframes settle { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
}

/* Sections */
section.band { padding: 88px 0; }
section.band.shade { background: var(--card); }
h2 { font: 800 clamp(30px, 3.6vw, 44px)/1.05 var(--display); letter-spacing: -0.02em; margin: 0 0 18px; }
h3 { font: 700 21px/1.25 var(--display); margin: 0 0 6px; }
.intro { max-width: 56ch; color: var(--sub); margin: 0 0 44px; font-size: 19px; }

.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 56px; list-style: none; margin: 0; padding: 0; }
.areas li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.areas li::before { content: ""; width: 20px; height: 23px; margin-top: 5px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.areas p { margin: 0; color: var(--sub); }

.local { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.local p { margin: 0 0 18px; max-width: var(--measure); }
.local .quote { font: 800 clamp(28px, 3.2vw, 40px)/1.12 var(--display); letter-spacing: -0.02em; margin: 0; }

.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; max-width: 760px; }
.promises li { padding-left: 22px; border-left: 4px solid var(--ink); }
.promises p { margin: 4px 0 0; color: var(--sub); }

.faq details { border-top: 1px solid var(--line); padding: 18px 0; max-width: 780px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font: 700 20px/1.3 var(--display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--sub); max-width: var(--measure); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 48px 0; font-size: 16px; color: var(--sub); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-foot a { color: var(--text); }

/* Document pages: privacy, terms, support, delete account */
.doc-head { border-bottom: 1px solid var(--line); }
.doc-head .title { padding: 28px 0 48px; }
.doc-head h1 { font: 800 clamp(36px, 5vw, 56px)/1.02 var(--display); letter-spacing: -0.02em; margin: 0 0 10px; }
.doc-head p { margin: 0; color: var(--sub); }
.doc { padding: 56px 0 88px; }
.doc .body { max-width: var(--measure); }
.doc h2 { font-size: 28px; margin-top: 48px; }
.doc h3 { margin-top: 28px; }
.doc li { margin-bottom: 8px; }
.note { background: var(--card); padding: 18px 20px; border-radius: 12px; }

/* Forms (delete account) */
.form { display: grid; gap: 18px; max-width: 460px; margin-top: 28px; }
.form label { font-weight: 700; display: grid; gap: 8px; }
.form input, .form select { font: 18px var(--body); padding: 13px 14px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); }
.form input:focus, .form select:focus { border-color: var(--ink); outline: none; }
.choice { display: flex; gap: 10px; }
.choice button { flex: 1; font: 700 16px var(--body); padding: 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; }
.choice button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.msg { min-height: 1.6em; margin: 0; }
.msg.err { color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: .88; }

@media (max-width: 1180px) and (min-width: 901px) { .comb { transform: scale(.82); transform-origin: right center; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-bottom: 56px; }
  .comb { height: auto; width: auto; justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cell { position: static; width: auto; height: auto; aspect-ratio: 200 / 230; padding: 0 18px; }
  .cell b { font-size: 17px; } .cell span { font-size: 14px; }
  .cell:nth-child(7) { display: none; }
  .areas, .local { grid-template-columns: 1fr; gap: 28px; }
  .nav { display: none; }
  section.band { padding: 64px 0; }
}
@media (max-width: 380px) { body { font-size: 17px; } }