:root {
  color-scheme: light;
  --bg: #f5efec;
  --panel: #ffffff;
  --panel-strong: #fde6df;
  --ink: #1c1412;
  --muted: #6b5750;
  --line: #e8d8d2;
  --accent: #d64327;
  --accent-strong: #9c2d17;
  --gold: #a8650f;
  --soft-gold: #fdeecb;
  --shadow: 0 10px 32px rgba(70, 25, 15, 0.09);
  --radius: 10px;
  --content: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: linear-gradient(180deg, #fdf8f6 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  margin: 0;
}

a {
  color: var(--accent-strong);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(214, 67, 39, 0.30);
  outline-offset: 3px;
}

.shell {
  width: min(100% - 40px, var(--content));
  margin: 0 auto;
}

.site-header {
  padding: 22px 0 10px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 26px rgba(70, 25, 15, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.nav a {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}

.nav a[aria-current="page"] {
  background: var(--panel-strong);
  color: var(--accent-strong);
}

.hero {
  display: grid;
  gap: 24px;
  padding: 46px 0 28px;
}

.panel,
.legal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 5vw, 52px) 0;
}

.hero-art {
  display: grid;
  min-height: 220px;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ff8370 0%, #f1543e 100%);
}

.hero-art img {
  width: min(150px, 58%);
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.28));
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0;
}

h1 {
  max-width: 720px;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
}

h2 {
  margin-top: 38px;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

h3 {
  margin-top: 26px;
  font-size: 1.18rem;
}

p {
  margin: 14px 0 0;
}

.lede {
  max-width: 760px;
  color: #43332e;
  font-size: clamp(1.06rem, 2vw, 1.24rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
}

.button-primary {
  background: var(--accent-strong);
  color: #fff;
}

.button-secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 0;
}

.panel {
  padding: 22px;
}

.panel h2,
.panel h3 {
  margin-top: 0;
}

.tag-list,
.summary-list,
.faq-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.tag-list li,
.summary-list li {
  padding-left: 14px;
  border-left: 3px solid var(--accent);
  color: #43332e;
}

.faq-list li {
  padding-left: 14px;
  border-left: 3px solid var(--panel-strong);
}

.notice {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--soft-gold);
  color: #5d3d0e;
}

.legal-card {
  padding: clamp(24px, 4vw, 42px);
  margin: 26px 0 52px;
}

.legal-card section + section {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card ul,
.legal-card ol {
  margin: 14px 0 0;
  padding-left: 1.2rem;
}

.legal-card li + li {
  margin-top: 8px;
}

/* The privacy policy's storage table. It has to stay readable at 320px, where a
   four-column table cannot fit — so it scrolls inside its own box rather than
   forcing the page to scroll sideways. */
.table-scroll {
  overflow-x: auto;
  margin-top: 18px;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.96rem;
}

.data-table th,
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  border-bottom: 2px solid var(--line);
  color: var(--accent-strong);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody th {
  font-weight: 700;
}

/* Share the width deliberately: left to itself the browser gives the first
   column whatever its longest row label wants and squeezes Notes. Scoped to the
   wide layout so it cannot fight the stacked rules below on specificity — there
   the cells are blocks and must take the full width. */
@media (min-width: 701px) {
  .data-table th:first-child {
    width: 30%;
  }

  .data-table th:nth-child(2) {
    width: 26%;
  }
}

.site-footer {
  padding: 28px 0 38px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 840px) {
  .header-inner,
  .footer-inner {
    align-items: flex-start;
    border-radius: var(--radius);
    flex-direction: column;
  }

  .nav {
    justify-content: flex-start;
  }

  .hero-card,
  .grid {
    grid-template-columns: 1fr;
  }

  .hero-art {
    min-height: 180px;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }
}

/* Stack the storage table into one block per row on a phone. Three columns in a
   scroll box technically fits, but it reads badly: the row label eats the width
   and the Notes column — the column that actually answers the question — sits
   off-screen behind a horizontal scroll nobody performs. */
@media (max-width: 700px) {
  .table-scroll {
    overflow-x: visible;
  }

  .data-table {
    min-width: 0;
  }

  /* The column headers become the per-cell labels below, so hide them from
     sight without hiding them from assistive technology. */
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .data-table tr {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }

  .data-table tbody tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .data-table th,
  .data-table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: 0;
  }

  .data-table tbody th {
    font-size: 1.06rem;
    line-height: 1.35;
  }

  .data-table td {
    margin-top: 10px;
    color: #43332e;
  }

  .data-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--accent-strong);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
}