/* Dawnlet website · one stylesheet for every page.
 *
 * The token set, card/callout/tile/table language and the sticky-TOC doc layout are lifted
 * straight from the notifications-plan document this site's design is based on, so a /tech page
 * and that plan read as the same artifact. What's added here is the marketing layer the plan
 * never needed: the nav, the hero, device frames, feature/module grids, the pricing block and
 * the footer.
 *
 * Fonts: Fredoka for display (headings, the wordmark), Karla for body/labels, Caveat for the one
 * handwritten accent - the same three the app leans on (Caveat is bundled in the app itself).
 * Variable files, one @font-face each with a weight range.
 */

@font-face {
  font-family: "Fredoka";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/fredoka-variable.woff2") format("woff2-variations"), url("../fonts/fredoka-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/karla-variable.woff2") format("woff2-variations"), url("../fonts/karla-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/caveat-variable.woff2") format("woff2-variations"), url("../fonts/caveat-variable.woff2") format("woff2");
}

:root {
  --bg: #FBF7F0;
  --card: #FFFFFF;
  --ink: #22201D;
  --sub: #6E665C;
  --line: #E7DFD3;
  --coral: #E8734A;
  --amber: #E0A93B;
  --mint: #4FA98A;
  --sky: #4E8FC4;
  --violet: #7C6BC4;
  --gold: #D9A526;
  --terracotta: #C2664A;
  --code-bg: #F4EEE4;
  --shadow: 0 1px 2px rgba(34, 32, 29, .05), 0 8px 24px rgba(34, 32, 29, .06);
  --shadow-lg: 0 2px 4px rgba(34, 32, 29, .06), 0 18px 48px rgba(34, 32, 29, .1);
  --display: "Fredoka", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17150F;
    --card: #211E18;
    --ink: #F1EAE0;
    --sub: #A79C8D;
    --line: #332E25;
    --coral: #F08A5F;
    --amber: #EFBF57;
    --mint: #6BC4A4;
    --sky: #6FA8DA;
    --violet: #9A8BDA;
    --gold: #E8BE4E;
    --terracotta: #D9805F;
    --code-bg: #2A251D;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg: #17150F;
  --card: #211E18;
  --ink: #F1EAE0;
  --sub: #A79C8D;
  --line: #332E25;
  --coral: #F08A5F;
  --amber: #EFBF57;
  --mint: #6BC4A4;
  --sky: #6FA8DA;
  --violet: #9A8BDA;
  --gold: #E8BE4E;
  --terracotta: #D9805F;
  --code-bg: #2A251D;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

a { color: var(--coral); }
img { max-width: 100%; }

code {
  background: var(--code-bg);
  border-radius: 5px;
  padding: 1.5px 5px;
  font-size: 13px;
  font-family: var(--mono);
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
  font-family: var(--mono);
}
pre code { background: none; padding: 0; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 0 0 12px 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 28px; height: 28px; border-radius: 8px; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
}
.nav-links a {
  color: var(--sub);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 9px;
  display: block;
}
.nav-links a:hover { color: var(--ink); background: var(--card); }
.nav-links a[aria-current="page"] { color: var(--coral); font-weight: 600; }

.theme-toggle,
.nav-toggle {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--sub);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--coral); border-color: var(--coral); }
.theme-toggle svg, .nav-toggle svg { width: 17px; height: 17px; fill: currentColor; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav-links {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 10px 16px 16px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 11px 12px; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--coral); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.btn-secondary:hover { border-color: var(--coral); color: var(--coral); }
.btn-soon { background: var(--card); color: var(--sub); border-color: var(--line); cursor: default; box-shadow: var(--shadow); }
.btn-soon .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 22%, transparent);
}

/* ---------- Shared bits from the plan document ---------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 700;
}

.chip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 13px;
  color: var(--sub);
}

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--sub);
  margin-right: 5px;
  white-space: nowrap;
}
.pill.free { color: var(--mint); border-color: var(--mint); }
.pill.plus { color: var(--amber); border-color: var(--amber); }
.pill.new { color: var(--violet); border-color: var(--violet); }
.pill.soon { color: var(--sky); border-color: var(--sky); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin: 16px 0;
}

.callout {
  border-left: 3px solid var(--coral);
  background: var(--card);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}
.callout.good { border-left-color: var(--mint); }
.callout.warn { border-left-color: var(--amber); }
.callout .label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral);
  display: block;
  margin-bottom: 5px;
}
.callout.good .label { color: var(--mint); }
.callout.warn .label { color: var(--amber); }
.callout p:first-of-type { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.tablewrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sub);
  font-weight: 700;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin: 18px 0;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
  box-shadow: var(--shadow);
}
.tile .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); font-weight: 700; }
.tile .v { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; font-family: var(--display); }
.tile .d { font-size: 13px; color: var(--sub); line-height: 1.45; }

.phase { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.phase:last-child { border-bottom: none; }
.phase .n {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--coral);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.phase .t { font-weight: 700; margin-bottom: 3px; }
.phase .b { font-size: 14px; color: var(--sub); }

/* ---------- Icon tiles (module accents) ---------- */

.icon-tile {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--coral) 15%, transparent);
  color: var(--coral);
}
.icon-tile svg { width: 19px; height: 19px; fill: currentColor; }
.icon-tile.amber { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.icon-tile.mint { background: color-mix(in srgb, var(--mint) 15%, transparent); color: var(--mint); }
.icon-tile.sky { background: color-mix(in srgb, var(--sky) 15%, transparent); color: var(--sky); }
.icon-tile.violet { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.icon-tile.gold { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.icon-tile.terracotta { background: color-mix(in srgb, var(--terracotta) 15%, transparent); color: var(--terracotta); }

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

.hero { position: relative; padding: 68px 0 20px; overflow: hidden; }
.hero-glow {
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 22%, transparent), transparent);
  pointer-events: none;
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px 5px 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
  box-shadow: var(--shadow);
}
.hero-badge .sun {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, var(--amber), var(--coral));
}

h1, .h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  margin: 16px 0 12px;
}
h1 .accent { color: var(--coral); display: block; }

.lede { font-size: 18px; color: var(--sub); max-width: 58ch; margin: 0; }
.hero-scribble {
  font-family: "Caveat", cursive;
  font-size: 23px;
  color: var(--coral);
  transform: rotate(-2deg);
  display: inline-block;
  margin-top: 18px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; font-size: 13px; color: var(--sub); }
.badge-row span {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ---------- Device frames ---------- */

.device {
  position: relative;
  border-radius: 40px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 9px;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 9 / 19.5;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.device::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 20px;
  border-radius: 999px;
  background: var(--ink);
  opacity: .88;
}
.device img,
.device .device-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.device .device-placeholder {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--coral) 12%, var(--bg)), var(--bg) 42%, var(--bg));
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--sub);
  font-size: 13px;
  padding: 20px;
}
.device.tilt { transform: rotate(2deg); }
@media (max-width: 900px) { .device.tilt { transform: none; } }

/* ---------- Sections ---------- */

.section { padding: 64px 0; }
.section-head { max-width: 62ch; margin-bottom: 26px; }
h2 {
  font-family: var(--display);
  font-size: clamp(25px, 3.2vw, 33px);
  letter-spacing: -.02em;
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.16;
}
h2 .num { color: var(--coral); font-variant-numeric: tabular-nums; margin-right: 10px; font-family: var(--body); font-weight: 700; }
h3 { font-family: var(--display); font-size: 19px; margin: 26px 0 8px; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 14.5px; margin: 20px 0 6px; font-weight: 700; color: var(--sub); letter-spacing: .02em; }
p { margin: 10px 0; }
ul, ol { margin: 10px 0; padding-left: 22px; }
li { margin: 5px 0; }

.section-alt { background: color-mix(in srgb, var(--card) 55%, var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Module cards ---------- */

.module-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* Platforms - one card per device. Same card treatment as a module card, but the screenshot is
   the point, so it sits above the heading and gets the room. The three shots are different
   aspect ratios (tall phone, squarer iPad, small watch), so each image is capped by height
   rather than width - otherwise the watch shot would be rendered the same width as the iPad one
   and tower over it. */
.platform-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.platform-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.platform-card h3 { margin: 10px 0 0; font-size: 1.05rem; }
.platform-card p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.platform-shot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 260px;
  padding: 8px 0;
}
.platform-shot img {
  width: auto;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Capped per device rather than uniformly. The three sources have very different aspect ratios,
   so one shared max-height renders the watch *widest* of the three and the phone narrowest -
   the exact inverse of the real hardware, which makes the row read as nonsense before anyone
   has read a word. These heights are chosen so the phone reads tallest and the watch smallest,
   which is what a reader already knows to be true. */
.platform-shot.iphone img { max-height: 260px; }
.platform-shot.ipad img { max-height: 210px; }
.platform-shot.watch img { max-height: 140px; }

@media (max-width: 520px) {
  .platform-shot { min-height: 210px; }
  .platform-shot.iphone img { max-height: 200px; }
  .platform-shot.ipad img { max-height: 165px; }
  .platform-shot.watch img { max-height: 115px; }
}
.module-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module-card .top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.module-card h3 { margin: 0; font-size: 17.5px; }
.module-card p { margin: 0; font-size: 14.5px; color: var(--sub); line-height: 1.55; }
.module-card .tags { margin-top: 12px; }
.module-card .more {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

/* ---------- Showcase (alternating copy + screenshot) ---------- */

.showcase { display: grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: center; padding: 46px 0; border-bottom: 1px solid var(--line); }
.showcase:last-of-type { border-bottom: none; }
.showcase.flip .showcase-copy { order: 2; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: 32px; padding: 36px 0; }
  .showcase.flip .showcase-copy { order: 0; }
}
.showcase-copy h3 { font-size: 24px; margin-top: 0; }
.showcase-copy ul { list-style: none; padding: 0; margin: 14px 0 0; }
.showcase-copy li { display: flex; gap: 10px; font-size: 15px; color: var(--sub); margin: 9px 0; }
.showcase-copy li::before { content: "◆"; color: var(--coral); font-size: 10px; line-height: 1.9; flex: 0 0 auto; }

/* ---------- Pricing ---------- */

.price-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.price-card.featured { border-color: var(--amber); box-shadow: var(--shadow-lg); }
.price-card .tier { font-family: var(--display); font-size: 20px; font-weight: 600; }
.price-card .amount { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -.03em; margin: 6px 0 0; }
.price-card .amount small { font-size: 14px; font-family: var(--body); color: var(--sub); font-weight: 600; letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 0; }
.price-card li { display: flex; gap: 9px; font-size: 14.5px; color: var(--sub); margin: 8px 0; }
.price-card li::before { content: "✓"; color: var(--mint); font-weight: 700; flex: 0 0 auto; }
.price-card.featured li::before { color: var(--amber); }

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

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 18px;
  box-shadow: var(--shadow);
  margin: 10px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 15px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--coral); font-size: 20px; font-weight: 400; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq details > p { margin: 0 0 16px; color: var(--sub); font-size: 15px; }

/* ---------- Doc layout (/tech, /privacy, /tos) ---------- */

.doc-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 48px;
}
@media (max-width: 960px) {
  .doc-wrap { grid-template-columns: 1fr; gap: 0; }
  nav.toc { position: static !important; display: none; }
}

.doc-hero { padding: 52px 0 10px; }
.doc-hero h1 { font-size: clamp(30px, 4.6vw, 44px); margin: 12px 0 10px; }
.doc-hero .meta { margin-top: 20px; font-size: 13px; color: var(--sub); display: flex; gap: 8px; flex-wrap: wrap; }

nav.toc { position: sticky; top: 86px; align-self: start; padding-top: 56px; font-size: 13.5px; max-height: calc(100vh - 110px); overflow-y: auto; }
nav.toc .toc-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); font-weight: 700; margin-bottom: 10px; }
nav.toc a { display: block; color: var(--sub); text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); }
nav.toc a:hover, nav.toc a.is-active { color: var(--coral); border-left-color: var(--coral); }

.doc-main { padding-bottom: 88px; min-width: 0; }
.doc-main section { padding-top: 40px; }
.doc-main section:first-child { padding-top: 26px; }

.breadcrumb { font-size: 13px; color: var(--sub); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding-top: 24px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb .sep { opacity: .5; }

/* Next/prev links at the foot of a /tech page */
.doc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
@media (max-width: 600px) { .doc-nav { grid-template-columns: 1fr; } }
.doc-nav a {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 17px;
  text-decoration: none;
  box-shadow: var(--shadow);
  display: block;
}
.doc-nav a:hover { border-color: var(--coral); }
.doc-nav .dir { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); font-weight: 700; }
.doc-nav .name { color: var(--ink); font-weight: 700; font-size: 15px; margin-top: 3px; }
.doc-nav a.next { text-align: right; }

/* /tech index cards */
.tech-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 22px 0; }
.tech-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  text-decoration: none;
  display: block;
  color: inherit;
}
.tech-card:hover { border-color: var(--coral); }
.tech-card .top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.tech-card h3 { margin: 0; font-size: 16.5px; }
.tech-card p { margin: 0; font-size: 14px; color: var(--sub); line-height: 1.5; }

/* ---------- Legal copy ---------- */

.legal-section { margin: 0 0 8px; }
.legal-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal-row:last-child { border-bottom: none; }
.legal-row .t { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.legal-row .d { color: var(--sub); font-size: 14.5px; margin: 0; }

/* ---------- Contact form ---------- */

.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 340px; align-items: start; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

.field { margin: 0 0 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 6px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); }
.form-note { font-size: 13px; color: var(--sub); margin-top: 12px; }

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

footer.site-footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 40px 0 56px; font-size: 14px; color: var(--sub); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
footer.site-footer h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
footer.site-footer li { margin: 6px 0; }
footer.site-footer a { color: var(--sub); text-decoration: none; }
footer.site-footer a:hover { color: var(--coral); }
.footer-brand p { max-width: 34ch; margin: 10px 0 0; font-size: 13.5px; }
.footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; }