/* HutHut marketing site. Tokens and type rules from brand/huthuthike-design-system.md.
   Lime is the only brand accent. Blaze is functional-only and is deliberately absent here. */

@font-face {
  font-family: 'Archivo Black';
  src: url('/assets/fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/HankenGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --lime: #c8ff24;
  --void: #0b0e08;
  --coal: #14180f;
  --coal-2: #11150c;
  --line: rgba(238, 243, 232, 0.08);
  --fog: #eef3e8;
  --sage: #8c9682;
  --sage-dim: #6b7363;
  --display: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--fog);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

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

a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* ---------- nav ---------- */

.nav {
  border-bottom: 1px solid var(--line);
  background: var(--void);
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.wordmark {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--fog);
  text-transform: uppercase;
  margin-right: auto;
}

.wordmark:hover {
  text-decoration: none;
}

.wordmark .dot {
  color: var(--lime);
}

.nav-links {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.nav-links a {
  color: var(--sage);
}

.nav-links a[aria-current='page'] {
  color: var(--fog);
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lime);
  margin: 0 0 14px;
}

h1,
.hero-title {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  font-weight: 400;
}

h2 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  font-weight: 400;
}

h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  font-weight: 400;
}

h1 .dot,
.hero-title .dot,
h2 .dot,
h3 .dot {
  color: var(--lime);
}

p {
  margin: 0 0 16px;
}

.lede {
  font-size: 20px;
  color: var(--fog);
  max-width: 34em;
}

.sub {
  color: var(--sage);
  max-width: 34em;
}

.small {
  font-size: 14px;
  color: var(--sage);
}

/* Off-screen for sighted visitors, still read aloud by assistive tech. The standard
   clip-rect pattern: the element keeps a box in the layout, so it is not skipped the way
   display:none or visibility:hidden content is. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- layout blocks ---------- */

.hero {
  padding: 72px 0 56px;
}

section {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.card {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}

.card p:last-child {
  margin-bottom: 0;
}

.stat {
  background: var(--coal-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
}

.stat-figure {
  font-family: var(--display);
  font-size: clamp(40px, 9vw, 72px);
  line-height: 1;
  color: var(--lime);
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sage);
  margin: 0 0 6px;
}

/* ---------- the one lime CTA ---------- */

.cta {
  display: inline-block;
  background: var(--lime);
  color: var(--void);
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.07em;
  padding: 16px 30px;
  border-radius: 100px;
  min-height: 44px;
}

.cta:hover,
.cta:focus-visible {
  text-decoration: none;
  box-shadow: 0 0 24px rgba(200, 255, 36, 0.22);
}


.cta-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* --sage (6.3:1 on --ink), not --sage-dim (3.94:1): 11px text needs 4.5:1. */
  color: var(--sage);
}

/* ---------- contact form ----------
   /support only. No JavaScript anywhere: this is a native form POST that navigates
   to the handler, so there is nothing here but field styling. */

.contact-form {
  max-width: 34em;
  margin: 0 0 20px;
}

.field {
  margin: 0 0 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sage);
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--fog);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-color: var(--lime);
}

/* The submit button reuses .cta, which is authored for an anchor. These reset the
   browser's own button chrome so the two render identically. */
button.cta {
  border: 0;
  cursor: pointer;
  appearance: none;
}

/* Honeypot wrapper. Offscreen, NOT display:none: the input has to stay in the layout
   tree so a form-filling bot fills it and the browser still submits its value. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The privacy notice under the contact form. Same measure as the form itself so it reads as
   part of it rather than as a footnote to the page. */
.form-note {
  max-width: 34em;
  margin-top: 20px;
}

/* ---------- install QR ----------
   Desktop only. Someone reading this on a phone cannot scan their own screen,
   so the QR would be clutter exactly where the button already works. It earns
   its place on desktop, where the button leads to a page that cannot install
   anything on the machine in front of them. */

.qr {
  display: none;
}

/* Two store columns: each pairs a QR tile centred above its own install button, so
   tile and button share a midline. Below 900px the .qr figures are hidden and the row
   collapses to the two buttons side by side, wrapping on narrow screens. */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 900px) {
  /* Sits above the button, on the same left rail as everything else in the
     hero, so the two install routes read as one stacked group: scan, or tap. */
  .qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    text-align: center;
  }

  .store-row {
    gap: 40px;
  }

  .qr img {
    display: block;
    width: 104px;
    height: 104px;
    /* Dark modules on a light tile. Inverted QRs scan unreliably on some
       cameras, so brand colours stay out of the code itself. Kept small so the
       white tile does not outweigh the lime CTA. */
    background: #fff;
    padding: 9px;
    border-radius: 12px;
  }

  .qr figcaption {
    max-width: 130px;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sage);
  }
}

/* ---------- explainer video ----------
   The frame reuses the .shot visual language (1px hairline, 20px radius, coal fill) so
   the video reads as another look inside the app rather than as an embed. The source is
   a 1280x720 landscape cut, so the frame is 16:9 and capped at 760px: wide enough to open
   the page with, narrow enough that it never fills a desktop viewport on its own. */

.explainer {
  /* auto side margins: the frame is capped at 760px and has to sit centred in the
     column, not hard against its left edge. */
  margin: 24px auto 0;
  max-width: 760px;
}

.explainer-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--coal-2);
}

/* Ghost controls. The lime fill on this page belongs to the install buttons in the hero,
   so these stay outlined. */
.explainer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.explainer-btn {
  min-height: 44px;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fog);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  appearance: none;
}

.explainer-btn:hover {
  border-color: var(--lime);
  color: var(--lime);
}

.explainer-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* ---------- screenshots ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--coal-2);
}

.shot p {
  margin: 10px 0 0;
}

/* ---------- faq ---------- */

.qa {
  border-top: 1px solid var(--line);
  padding: 22px 0 4px;
}

.qa h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.qa p {
  color: var(--sage);
  max-width: 44em;
}

/* ---------- comparison table ---------- */

/* The roundup page's side-by-side table. It is wider than a phone, so the wrapper
   scrolls horizontally instead of squeezing seven columns into 320px. No font-family
   here on purpose: `font: inherit` keeps the table on the body font, and every colour
   is an existing token. */
.compare {
  overflow-x: auto;
}

.compare table {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  font: inherit;
  margin-top: 20px;
}

/* Column headers read like .label: small, uppercase, sage. The font stays the body
   font: the table declares none, so nothing here can drift onto a third family. */
.compare th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sage);
  text-align: left;
  vertical-align: bottom;
}

.compare th,
.compare td {
  padding: 22px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Row headers are app names, not labels: body font, full contrast, one line. */
.compare th[scope="row"] {
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fog);
  white-space: nowrap;
}

.compare td {
  color: var(--sage);
}

/* ---------- roundup entries ---------- */

/* Each ranked app on the roundup page is a `section.entry`. The two h3 headings inside
   one ("Key features", "Limitations") sit closer to their list than a standalone h3
   would, and the lists read as lists instead of as running text. Spacing and existing
   tokens only: no colour, font or size is introduced here. */
.entry h3 {
  margin: 24px 0 8px;
}

.entry ul {
  color: var(--sage);
  margin: 0 0 16px;
  padding-left: 20px;
  max-width: 44em;
}

.entry ul li {
  margin-bottom: 8px;
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 56px;
  color: var(--sage);
  font-size: 14px;
}

.footer a {
  color: var(--sage);
}

/* Stacked link list for body content. Distinct from .footer-links, which is a
   horizontal mono-uppercase row and is wrong for reading-length items. */
.stack-links {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.stack-links li {
  margin-bottom: 10px;
}

.stack-links a {
  font-size: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .cta:hover {
    box-shadow: none;
  }
}