/* ============================================================================
   Avora — avorasia.com
   Styles extracted from the Claude Design source (Avora Landing.dc.html).

   The design carried its styling as inline style="" attributes, which media
   queries cannot target. Declarations are transcribed here verbatim so the
   desktop rendering is unchanged, and the responsive layer at the bottom is
   the only addition.

   Colours are declared twice: a hex fallback followed by the designer's
   original oklch(). Browsers that understand oklch take the second and get
   the wider-gamut colour; older ones ignore it and keep the hex.
   ========================================================================= */

/* ------------------------------------------------------------------ fonts --
   Self-hosted rather than loaded from Google. Nothing about the page leaves
   this server now, which is what lets the privacy policy say so.

   Both families ship as variable fonts, so Google serves ONE file per subset
   and its stylesheet simply points every weight at it. The `font-weight: 400
   600` range below says the same thing in one declaration instead of six.

   Fraunces also carries an optical-size (opsz) axis. It is deliberately left
   alone: browsers apply `font-optical-sizing: auto` by default and map it from
   the font size, which is exactly what Google's own stylesheet relied on.

   The unicode-range values are copied verbatim from Google's stylesheet, so a
   page of pure ASCII never downloads the latin-ext file. Vietnamese was offered
   and skipped — nothing here needs it. Latvian diacritics (ā, č, ē, ģ, ī, ķ, ļ,
   ņ, š, ū, ž) sit in U+0100-017F and are covered by latin-ext.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:            #fbf6f2;
  --surface:       #ffffff;
  --panel:         #f3e6dd;
  --panel-warm:    #f3e2d6;

  --ink:           #241b16;
  --ink-soft:      #2a211c;
  --body:          #6b5d54;
  --body-soft:     #7a6c62;
  --muted:         #8a7c72;
  --faint:         #9a8c82;

  --line:          #ece0d8;
  --line-warm:     #f0e2d8;
  --line-mid:      #e6d3c7;
  --line-strong:   #d8c5b8;

  --accent:        #ad6e52;
  --accent:        oklch(0.6 0.09 45);
  --accent-deep:   #8d5136;
  --accent-deep:   oklch(0.5 0.09 45);
  --accent-ink:    #7a462e;
  --accent-ink:    oklch(0.45 0.08 45);
  --accent-btn:    #673b26;
  --accent-btn:    oklch(0.4 0.07 45);
  --accent-word:   #6a3820;
  --accent-word:   oklch(0.4 0.08 45);
  --accent-light:  #d49375;
  --accent-light:  oklch(0.72 0.09 45);
  --accent-icon:   #9d6044;
  --accent-icon:   oklch(0.55 0.09 45);

  --process-bg:    #3c2117;
  --process-bg:    oklch(0.28 0.045 40);
  --process-rule:  #6d4d3e;
  --process-rule:  oklch(0.45 0.05 45);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:    'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shell:   1280px;
  --gutter:  48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent-btn); }

::selection { background: oklch(0.6 0.09 45 / 0.25); }

img, svg { max-width: 100%; }

/* Keyboard focus. The design specified no focus state; without one the page
   is unusable by keyboard, since every control here is an <a>. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; color: var(--bg); }

.page { width: 100%; overflow: hidden; }

/* Sections are anchor targets and the header is sticky, so without this the
   headings land underneath it. */
section[id] { scroll-margin-top: 88px; }

.shell { max-width: var(--shell); margin: 0 auto; }


/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  background: rgba(251, 246, 242, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { color: inherit; }

.brand-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--accent-word);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
}

.nav-link { color: inherit; }
.nav-link:hover { color: var(--accent-deep); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent-btn);
  color: var(--bg);
  font-weight: 600;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); }


/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding: 96px var(--gutter) 104px;
  max-width: var(--shell);
  margin: 0 auto;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 560px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-mid);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.hero-lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--body);
  max-width: 480px;
}

.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 16px 34px -18px oklch(0.6 0.09 45);
}
.btn-primary:hover {
  color: #fff;
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 20px 38px -18px oklch(0.6 0.09 45);
}

.btn-secondary { border: 1px solid var(--line-strong); color: #4a3d35; }
.btn-secondary:hover { color: var(--ink); border-color: var(--accent); }

.btn-arrow { font-size: 17px; }

.hero-stats { display: flex; align-items: center; gap: 28px; padding-top: 12px; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent-ink);
}
.stat-label { font-size: 13px; color: var(--muted); }
.stat-rule { width: 1px; height: 36px; background: var(--line-mid); flex: none; }

/* -- hero visual: the phone mock ------------------------------------------ */

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}

.hero-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, oklch(0.72 0.08 45 / 0.35), transparent 62%);
  filter: blur(6px);
}

.hero-outline { position: absolute; top: 26px; right: 44px; opacity: 0.5; }

.phone {
  position: relative;
  width: 262px;
  height: 540px;
  border-radius: 44px;
  background: var(--ink);
  padding: 12px;
  box-shadow: 0 50px 90px -40px rgba(58, 32, 18, 0.6);
  transform: rotate(-4deg);
}

.phone-notch {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  background: var(--ink);
  border-radius: 0 0 16px 16px;
  z-index: 3;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  background: linear-gradient(165deg, #fbf6f2, #f3e2d6);
  display: flex;
  flex-direction: column;
}

.phone-head { padding: 56px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.phone-greet {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
}
.phone-sub { font-size: 12px; color: var(--muted); }

.phone-body { flex: 1; padding: 6px 18px; display: flex; flex-direction: column; gap: 12px; }
.phone-hero-card {
  height: 96px;
  border-radius: 20px;
  background: var(--accent);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
  font-family: var(--display);
  font-size: 18px;
}
.phone-row { display: flex; gap: 12px; }
.phone-tile {
  flex: 1;
  height: 78px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px -12px rgba(58, 32, 18, 0.4);
}
.phone-spacer { height: 20px; }

.phone-tabs {
  height: 62px;
  background: #fff;
  border-top: 1px solid var(--line-warm);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
}
.phone-tab { width: 26px; height: 26px; border-radius: 8px; background: #e7d6ca; }
.phone-tab.is-active { background: var(--accent); }


/* --------------------------------------------------------- what we build -- */

.build {
  padding: 96px var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}

.build .shell { display: flex; flex-direction: column; gap: 56px; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.section-head-copy { display: flex; flex-direction: column; gap: 16px; max-width: 600px; }

.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.section-aside { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); max-width: 360px; }

.build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.build-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  border-radius: 22px;
  background: var(--bg);
  border: 1px solid var(--line-warm);
}

.build-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--panel-warm);
  display: grid;
  place-items: center;
  flex: none;
}

.build-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
}

.build-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body-soft); }

.build-note { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.build-note::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}


/* --------------------------------------------------------- featured apps -- */

.apps {
  padding: 104px var(--gutter);
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.app-card {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 44px;
  border-radius: 28px;
  overflow: hidden;
}

.app-card--warm {
  background: linear-gradient(160deg, #f7ede5, #f0ddd0);
  border: 1px solid #ecd8ca;
}
.app-card--cool {
  background: linear-gradient(160deg, #eef1ec, #e2e8de);
  border: 1px solid #d8e0d2;
}

.app-phone {
  position: relative;
  width: 172px;
  flex: none;
  height: 352px;
  border-radius: 32px;
  background: var(--ink);
  padding: 9px;
}
.app-card--warm .app-phone { box-shadow: 0 34px 60px -34px rgba(58, 32, 18, 0.6); }
.app-card--cool .app-phone { box-shadow: 0 34px 60px -34px rgba(30, 40, 26, 0.55); }

.app-screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* AI Image Generator mock */
.app-screen--gen { background: #0f0c12; }
.gen-canvas {
  flex: 1;
  background: conic-gradient(from 140deg at 50% 40%,
              oklch(0.65 0.12 45), oklch(0.55 0.13 330), oklch(0.6 0.1 45));
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.gen-canvas span { color: #fff; font-family: var(--display); font-size: 16px; font-weight: 600; }
.gen-bar { height: 88px; background: #17131a; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.gen-input { flex: 1; height: 34px; border-radius: 999px; background: #2a2430; }
.gen-send { width: 34px; height: 34px; border-radius: 50%; background: oklch(0.6 0.11 45); flex: none; }

/* Gallery Cleaner mock */
.app-screen--clean { background: #f4f7f2; }
.clean-head { padding: 22px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.clean-free {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: #2b5139;
  color: oklch(0.4 0.06 155);
}
.clean-sub { font-size: 11px; color: #8a9186; }
.clean-list { flex: 1; padding: 6px 14px; display: flex; flex-direction: column; gap: 8px; }
.clean-row { height: 44px; border-radius: 12px; background: #fff; }
.clean-row.is-selected { background: #416f52; background: oklch(0.5 0.07 155); }

.app-copy { display: flex; flex-direction: column; gap: 14px; }

.app-status {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-card--warm .app-status { color: #9d6044; color: oklch(0.55 0.09 45); }
.app-card--cool .app-status { color: #336144; color: oklch(0.45 0.07 155); }

.app-copy h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}
.app-copy p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }

.app-tags { display: flex; gap: 8px; margin-top: 4px; }
.app-tags span {
  padding: 5px 12px;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--body-soft);
}

.apps-note { margin: 0; font-size: 13px; color: var(--faint); text-align: center; }


/* --------------------------------------------------------------- process -- */

.process { padding: 104px var(--gutter); background: var(--process-bg); color: #f5ebe4; }
.process .shell { display: flex; flex-direction: column; gap: 64px; }
.process .section-label { color: var(--accent-light); }
.process .section-title { color: #fdf7f2; }
.process .section-aside { color: #c9b8ac; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--process-rule);
}
.step-num { font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--accent-light); }
.step h3 { margin: 0; font-size: 18px; font-weight: 600; color: #fdf7f2; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: #bdaca0; }


/* --------------------------------------------------------------- contact -- */

.contact { padding: 112px var(--gutter); }

.contact-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

.contact-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 640px;
  text-wrap: balance;
}

.contact-lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 520px; }

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 34px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  box-shadow: 0 20px 40px -20px oklch(0.6 0.09 45);
  transition: transform 0.18s ease, background 0.18s ease;
  max-width: 100%;
}
.contact-mail:hover { color: #fff; background: var(--accent-deep); transform: translateY(-1px); }

.contact-note { font-size: 13px; color: var(--faint); }


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

.site-footer { padding: 48px var(--gutter); background: var(--ink); color: #c9b8ac; }

.site-footer .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand-text { display: flex; flex-direction: column; }
.footer-brand-name { font-family: var(--display); font-weight: 600; font-size: 18px; color: #fdf7f2; }
.footer-brand-sub { font-size: 12px; color: #9a8577; }

.footer-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; flex-wrap: wrap; }
.footer-nav a { color: #c9b8ac; }
.footer-nav a:hover { color: #fdf7f2; }

.footer-legal { font-size: 13px; color: #8a7568; }


/* ------------------------------------------------------- document pages --
   Privacy policy, terms, and anything else that is mostly prose. Measure is
   held near 70 characters; the display face is kept for headings only so long
   passages stay in the more legible sans.
   ------------------------------------------------------------------------ */

.doc { padding: 72px var(--gutter) 96px; }
.doc-inner { max-width: 760px; margin: 0 auto; }

.doc-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.doc h1 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.doc-meta {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-mid);
}

.doc h2 {
  margin: 48px 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.doc h3 {
  margin: 30px 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.doc p,
.doc li { font-size: 15.5px; line-height: 1.72; color: #4f443c; }
.doc p  { margin: 0 0 14px; }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin: 0 0 8px; }
.doc li::marker { color: var(--accent); }
.doc strong { font-weight: 600; color: var(--ink); }
.doc a { text-decoration: underline; text-underline-offset: 2px; }

.doc-table-wrap { overflow-x: auto; margin: 0 0 18px; }
.doc table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.doc th, .doc td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-mid);
  vertical-align: top;
  color: #4f443c;
}
.doc th {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--body);
  font-weight: 600;
  background: var(--panel);
  white-space: nowrap;
}
.doc tr:last-child td { border-bottom: none; }

/* Editorial note — deliberately conspicuous. It marks a section that is not
   finished, so it should be uncomfortable to leave on a live page. */
.doc-todo {
  margin: 0 0 20px;
  padding: 20px 22px;
  border-radius: 14px;
  background: #fdf2e7;
  border: 1px solid var(--accent);
  border-left-width: 4px;
}
.doc-todo p { margin: 0 0 10px; font-size: 14.5px; }
.doc-todo p:last-child { margin: 0; }
.doc-todo strong { color: var(--accent-deep); }

.doc-contact {
  margin-top: 20px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line-warm);
}
.doc-contact p:last-child { margin: 0; }

@media (max-width: 680px) {
  .doc { padding-top: 44px; padding-bottom: 64px; }
  .doc h1 { font-size: 32px; }
  .doc h2 { font-size: 21px; margin-top: 38px; }
  .doc p, .doc li { font-size: 15px; }
}

/* ---------------------------------------------------------- touch targets --

   The design sizes links by their text, which leaves the header CTA 34px tall
   and the footer links 17px — below the 44px both Apple and Material ask for.

   The hit area is expanded with an ::after overlay rather than min-height,
   because these links are flex children: a min-height would make the link the
   tallest item in the row and grow the header itself. The overlay is invisible,
   changes no layout, and still activates its own anchor because it is a child
   of it. Adjacent links are far enough apart that the overlays do not collide.
   -------------------------------------------------------------------------- */

.brand, .nav-link, .nav-cta, .footer-nav a { position: relative; }

.brand::after,
.nav-link::after,
.nav-cta::after,
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  pointer-events: auto;
}

/* ============================================================================
   Responsive — the only addition to the design.

   The source was authored at a single desktop width: fixed four-column grids,
   a 64px headline and 48px gutters, with no breakpoints. Everything below
   adapts that downward; above 1080px the rendering is byte-for-byte the
   original.
   ========================================================================= */

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 80px;
  }
  .hero-copy { max-width: 620px; }
  .hero-visual { min-height: 0; order: 2; }

  .build-grid   { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .apps-grid    { grid-template-columns: 1fr; }
  .app-card     { padding: 36px; }
}

@media (max-width: 860px) {
  :root { --gutter: 32px; }

  .hero-title    { font-size: 52px; }
  .section-title { font-size: 36px; }
  .contact-title { font-size: 42px; }

  .section-head { align-items: flex-start; gap: 20px; }
  .section-aside { max-width: none; }

  .build   { padding-top: 72px; padding-bottom: 72px; }
  .apps    { padding-top: 80px; padding-bottom: 80px; gap: 48px; }
  .process { padding-top: 80px; padding-bottom: 80px; }
  .process .shell { gap: 48px; }
  .contact { padding-top: 88px; padding-bottom: 88px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }

  /* The three section links are dropped rather than hidden behind a hamburger:
     this is a single-page document, every link is a same-page anchor, and the
     footer repeats all of them. A drawer would be more moving parts than the
     content justifies. */
  .site-header { padding: 14px var(--gutter); }
  .nav-link { display: none; }
  .site-nav { gap: 0; }
  .nav-cta { padding: 9px 18px; font-size: 13px; }
  .brand-name { font-size: 19px; }
  .brand svg { width: 26px; height: 26px; }

  section[id] { scroll-margin-top: 68px; }

  .hero { padding-top: 52px; padding-bottom: 64px; gap: 44px; }
  .hero-title { font-size: 38px; letter-spacing: -0.015em; }
  .hero-lede  { font-size: 16px; }
  .hero-copy  { gap: 22px; }

  .hero-actions { gap: 12px; }
  .btn-primary, .btn-secondary { padding: 14px 22px; font-size: 14px; }

  .hero-stats { gap: 18px; }
  .stat-value { font-size: 22px; }
  .stat-label { font-size: 12px; }

  .build-grid   { grid-template-columns: 1fr; gap: 14px; }
  .build-card   { padding: 26px 22px; gap: 14px; }
  .process-grid { grid-template-columns: 1fr; gap: 28px; }

  .section-title { font-size: 30px; }
  .contact-title { font-size: 32px; }
  .contact-lede  { font-size: 16px; }

  /* The app cards are a phone beside a text column; below this width the
     phone is stacked above the copy instead of shrinking both. */
  .app-card { flex-direction: column; align-items: flex-start; gap: 28px; padding: 28px 24px; }
  .app-copy h3 { font-size: 24px; }

  .contact-mail {
    font-size: 15px;
    padding: 16px 24px;
    gap: 8px;
    /* The address is long enough to overflow a 320px viewport at 17px. */
    word-break: break-word;
  }

  .site-footer .shell { flex-direction: column; align-items: flex-start; gap: 24px; }
  /* Row gap has to clear the 44px hit overlays above, or the targets of two
     wrapped rows overlap and the wrong link takes the tap. */
  .footer-nav { gap: 28px 20px; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 33px; }
  .hero-stats { flex-wrap: wrap; gap: 14px 18px; }
  .stat-rule  { display: none; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .phone { transform: rotate(-4deg) scale(0.92); }
}

/* The design animates nothing, but smooth scrolling and the button lifts are
   motion all the same. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn-primary:hover, .contact-mail:hover { transform: none; }
}

@media print {
  .site-header, .hero-visual, .app-phone { display: none; }
  body { background: #fff; }
  .process { background: #fff; color: #241b16; }
  .process .section-title, .step h3 { color: #241b16; }
  .process p, .step p { color: #4a3d35; }
}