/* Hearth Keeper for the web: the marketing site's components, built on tokens.css.
   Every class starts with `hk-`, and nothing applies outside an element with `hk-site`, so the app previews are unaffected.
   The compact layout is a container query on `hk-site`, so it follows the page's width (and works inside a narrower frame);
   its 768px is `web-breakpoint`, written out because queries can't read custom properties. */

/* MARK: Page */

.hk-site {
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/26px var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: var(--web-nav-height);
  container: hk-site / inline-size;
}
.hk-site *, .hk-site *::before, .hk-site *::after { box-sizing: border-box; }
.hk-site img, .hk-site svg { display: block; max-width: 100%; }
.hk-site :where(h1, h2, h3, p, ul) { margin: 0; }
.hk-site ::selection { background: var(--gold-fill); color: var(--on-gold); }
.hk-site :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.hk-container {
  width: 100%;
  max-width: calc(var(--web-content-width) + 2 * var(--web-gutter));
  margin-inline: auto;
  padding-inline: var(--web-gutter);
}

/* Text */
.hk-display { font: 700 64px/68px var(--font-display); letter-spacing: -0.5px; text-wrap: balance; }
.hk-title { font: 700 40px/46px var(--font-display); letter-spacing: -0.3px; text-wrap: balance; }
.hk-lead { font: 400 21px/30px var(--font-sans); color: var(--ink-secondary); max-width: var(--web-text-width); text-wrap: pretty; }
.hk-body { font: 400 17px/26px var(--font-sans); max-width: var(--web-text-width); text-wrap: pretty; }
.hk-secondary { color: var(--ink-secondary); }

.hk-link { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hk-link:hover { text-decoration-thickness: 2px; }

/* MARK: Buttons */

.hk-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--margin-medium);
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: var(--radius-capsule);
  font: 600 17px/22px var(--font-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.hk-button svg { width: 20px; height: 20px; flex: none; }
.hk-button--small { min-height: 32px; padding: 0 14px; font: 600 15px/20px var(--font-sans); }

.hk-button--prominent { background: var(--gold-fill); color: var(--on-gold); }
.hk-button--prominent:hover { background: var(--gold-fill-hover); }
.hk-button--prominent:active { background: var(--gold-fill-pressed); }

.hk-button--secondary { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.hk-button--secondary:hover { background: var(--surface-sunken); }
.hk-button--secondary:active { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 2px var(--hairline); }

.hk-button--plain { background: transparent; color: var(--gold); padding-inline: 0; min-height: 0; }
.hk-button--plain:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.hk-button:disabled, .hk-button[aria-disabled="true"] { background: var(--surface-sunken); color: var(--disabled); box-shadow: none; cursor: default; }

/* Apple's App Store badge goes in here as-is; this only sizes and spaces it. */
.hk-app-store-badge { display: inline-block; height: 48px; }
.hk-app-store-badge img { height: 100%; width: auto; }

/* MARK: Nav */

.hk-nav {
  position: sticky; top: 0; z-index: 10;
  height: var(--web-nav-height);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.hk-nav .hk-container { height: 100%; display: flex; align-items: center; gap: var(--margin-extraLarge); }
.hk-nav__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 17px/22px var(--font-sans); }
.hk-nav__brand img { width: 28px; height: 28px; }
.hk-nav__links { display: flex; gap: 28px; margin-left: auto; list-style: none; padding: 0; }
.hk-nav__links a { color: var(--ink-secondary); text-decoration: none; font: 400 15px/20px var(--font-sans); }
.hk-nav__links a:hover, .hk-nav__links a[aria-current="page"] { color: var(--ink); }

/* The app icon has a light and a dark file; show the one for the theme. */
.hk-site .hk-icon-dark { display: none; }
.hk-site[data-theme="dark"] .hk-icon-light, [data-theme="dark"] .hk-site .hk-icon-light { display: none; }
.hk-site[data-theme="dark"] .hk-icon-dark, [data-theme="dark"] .hk-site .hk-icon-dark { display: block; }

/* MARK: Sections */

.hk-section { padding-block: var(--web-section-spacing); }
.hk-section + .hk-section { padding-top: 0; }
.hk-section__header { display: grid; gap: var(--margin-large); justify-items: center; text-align: center; margin-bottom: 56px; }
.hk-section__header .hk-lead { margin-inline: auto; }
.hk-symbol { width: 32px; height: 32px; color: var(--gold); }

/* Hero: headline and download on the left, the app on the right. */
.hk-hero { padding-block: 96px var(--web-section-spacing); }
.hk-hero .hk-container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hk-hero__text { display: grid; gap: 24px; justify-items: start; }
.hk-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--margin-large) 24px; margin-top: var(--margin-medium); }
/* A second, smaller device tucks in behind the first. */
.hk-hero__devices { display: flex; justify-content: center; align-items: flex-end; isolation: isolate; }
.hk-hero__devices .hk-device--small { position: relative; z-index: -1; margin: 0 0 40px -56px; }

/* A device screenshot. On the live site, put the screenshot in Apple's own bezel; this frame is for mock-ups. */
.hk-device {
  width: 280px; flex: none; aspect-ratio: 1206 / 2622;
  padding: 10px; border-radius: 52px;
  background: #1c1b19; box-shadow: var(--shadow-device), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}
.hk-device > * { width: 100%; height: 100%; border-radius: 42px; overflow: hidden; object-fit: cover; }
.hk-device--small { width: 220px; border-radius: 42px; padding: 8px; }
.hk-device--small > * { border-radius: 34px; }

/* Features: three or four cards, each a symbol, a title and a sentence or two. */
.hk-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--margin-large); list-style: none; padding: 0; }
.hk-feature { display: grid; align-content: start; gap: var(--margin-medium); padding: var(--margin-extraLarge); background: var(--surface-raised); border-radius: var(--radius-large); }
.hk-feature .hk-symbol { margin-bottom: var(--margin-medium); }
.hk-feature h3 { font: 700 22px/28px var(--font-sans); }
.hk-feature p { color: var(--ink-secondary); }

/* A feature told with the app: text on one side, a screenshot on the other. Add hk-feature-row--flipped to alternate. */
.hk-feature-row .hk-container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hk-feature-row__text { display: grid; gap: var(--margin-large); }
.hk-feature-row--flipped .hk-feature-row__text { order: 2; }
.hk-feature-row__media { display: flex; justify-content: center; }

/* Class art, as on an ArtTile: edge to edge, a scrim, `ink-on-art` text and a gold rim. */
.hk-art { position: relative; overflow: hidden; border-radius: var(--radius-extraLarge); box-shadow: var(--shadow-art); isolation: isolate; }
.hk-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.hk-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 35%, var(--scrim)); }
.hk-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rim-gold); pointer-events: none; }
.hk-art__content { position: absolute; left: 24px; right: 24px; bottom: 20px; color: var(--ink-on-art); text-shadow: var(--shadow-text-on-art); font: 700 20px/25px var(--font-display); }
.hk-art-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--margin-medium); }
.hk-art-row .hk-art { aspect-ratio: 4 / 3; border-radius: var(--radius-large); }

/* Closing call to action. */
.hk-cta { display: grid; justify-items: center; gap: 24px; text-align: center; }
.hk-cta > img { width: 96px; height: 96px; }

/* MARK: Footer */

.hk-footer { padding-block: 40px 56px; box-shadow: inset 0 1px 0 var(--hairline); color: var(--ink-secondary); font: 400 13px/18px var(--font-sans); }
.hk-footer .hk-container { display: grid; gap: var(--margin-large); }
.hk-footer__links { display: flex; flex-wrap: wrap; gap: var(--margin-medium) 24px; list-style: none; padding: 0; }
.hk-footer__links a { color: var(--ink-secondary); text-decoration: none; }
.hk-footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.hk-footer__legal { max-width: var(--web-text-width); }

/* MARK: Compact (below web-breakpoint) */

@container hk-site (max-width: 767px) {
  .hk-container { padding-inline: var(--margin-large); }
  .hk-display { font: 700 40px/44px var(--font-display); letter-spacing: -0.3px; }
  .hk-title { font: 700 30px/36px var(--font-display); letter-spacing: 0; }
  .hk-lead { font-size: 19px; line-height: 28px; }
  .hk-section { padding-block: var(--web-section-spacing-compact); }
  .hk-section__header { margin-bottom: var(--margin-extraLarge); }
  .hk-nav__links { display: none; }
  .hk-nav .hk-button { margin-left: auto; }
  .hk-hero { padding-block: 48px var(--web-section-spacing-compact); }
  .hk-hero .hk-container, .hk-feature-row .hk-container { grid-template-columns: 1fr; gap: 48px; }
  .hk-feature-row--flipped .hk-feature-row__text { order: 0; }
  .hk-feature { padding: 24px; }
  .hk-device { width: 240px; }
  .hk-device--small { display: none; }
  .hk-art-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hk-site *, .hk-site *::before, .hk-site *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}