@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; 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: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/fraunces-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/fraunces-italic-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; }

/* Modern Guardian — marketing site prototype, a sibling of the Parati Semper site.
   Warm stone paper, ranger green ink, golden amber for readiness. Fraunces for display, the
   system face for reading, so the site sounds like the app looks. */

:root {
  --paper: #F2F3EE;
  --paper-2: #E6E9E0;
  --card: #FBFBF7;
  --ink: #171A18;
  --ink-2: #4C5450;
  --ink-3: #7D8580;
  --rule: rgba(22, 32, 26, 0.12);
  --forest: #2E5240;
  --forest-2: #3F6E55;
  --forest-ink: #F2F3EE;
  --amber: #DD9E2A;
  --amber-2: #F0B43C;
  --amber-ink: #231806;
  --track: rgba(46, 82, 64, 0.12);
  --bezel: #121614;
  --shadow: 0 30px 60px -20px rgba(22, 32, 26, 0.35), 0 12px 24px -12px rgba(22, 32, 26, 0.25);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1160px;
  --gutter: 24px;
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1411;
    --paper-2: #151C17;
    --card: #19211B;
    --ink: #EDEAE2;
    --ink-2: #A9B1AA;
    --ink-3: #737C75;
    --rule: rgba(237, 234, 226, 0.12);
    --forest: #1A3327;
    --forest-2: #5A8A6C;
    --forest-ink: #EDEAE2;
    --amber: #F0B43C;
    --amber-2: #F5C566;
    --track: rgba(237, 234, 226, 0.10);
    --bezel: #050706;
    --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 12px 24px -12px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --paper: #0F1411; --paper-2: #151C17; --card: #19211B; --ink: #EDEAE2; --ink-2: #A9B1AA; --ink-3: #737C75;
  --rule: rgba(237, 234, 226, 0.12); --forest: #1A3327; --forest-2: #5A8A6C; --forest-ink: #EDEAE2;
  --amber: #F0B43C; --amber-2: #F5C566; --track: rgba(237, 234, 226, 0.10); --bezel: #050706;
  --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 12px 24px -12px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 560; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.eyebrow {
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.eyebrow em { font-style: normal; color: var(--ink-2); }
.eyebrow-light { color: var(--amber-2); }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 999px;
  font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: transform 140ms ease, background 200ms ease;
}
.pill:active { transform: scale(0.97); }
.pill-solid { background: var(--forest); color: var(--forest-ink); }
.pill-solid:hover { background: var(--forest-2); }
.pill-ghost { border-color: var(--rule); color: var(--ink); }
.pill-ghost:hover { background: var(--paper-2); }
.pill-lg { padding: 15px 24px; font-size: 16px; }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--rule);
}
.top-row { display: flex; align-items: center; gap: 28px; height: 64px; }
.mark { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 15px/1 var(--sans); letter-spacing: 0.02em; }
.mark img { border-radius: 9px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.top-cta .short { display: none; }

/* ---------- Phone frame ---------- */
.phone {
  margin: 0;
  width: var(--phone-w, 300px);
  aspect-ratio: 780 / 1696;
  border-radius: 46px;
  padding: 9px;
  background: var(--bezel);
  box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(255, 255, 255, 0.06);
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 38px; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 96px; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1 {
  font: 560 clamp(52px, 7.4vw, 104px)/0.98 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: var(--text-max, 34em); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.facts { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.facts li { font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--forest-2); }

.hero-art { position: relative; height: 680px; }
.halo { position: absolute; inset: 0; margin: auto; width: 600px; max-width: 120%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.halo circle { fill: none; stroke-width: 26; }
.halo-track { stroke: var(--track); }
.halo-arc { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 1570.8; stroke-dashoffset: 1570.8; transform: rotate(-90deg); transform-origin: 300px 300px; animation: fill 1.8s 0.3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes fill { to { stroke-dashoffset: 78.5; } }
.phone-front { position: absolute; left: 50%; top: 50%; transform: translate(-30%, -50%); z-index: 2; }
.phone-back { position: absolute; left: 50%; top: 50%; transform: translate(-95%, -44%) rotate(-6deg) scale(0.88); opacity: 0.92; z-index: 1; }
/* Two columns: size the phones to the art column, so the tilted back phone stays out of the text
   column between 860 and 1100 px wide; the editor's --phone-w still caps it on wide screens. */
@media (min-width: 861px) {
  .hero-art { container-type: inline-size; }
  .hero-art .phone { width: min(var(--phone-w, 300px), 56cqi); }
}

/* ---------- The name ---------- */
.name { background: var(--forest); color: var(--forest-ink); padding: 112px 0 104px; position: relative; overflow: hidden; }
.name::after {
  content: ""; position: absolute; right: -220px; top: -220px; width: 640px; height: 640px; border-radius: 50%;
  border: 26px solid rgba(243, 156, 18, 0.16); pointer-events: none;
}
.name-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; position: relative; z-index: 1; }
.latin { font: italic 400 clamp(56px, 8vw, 112px)/1 var(--serif); letter-spacing: -0.02em; }
.say { margin-top: 18px; font: 500 15px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 239, 230, 0.62); }
.gloss { margin: 8px 0 0; display: grid; gap: 30px; }
.gloss div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(243, 239, 230, 0.18); }
.gloss dt { font: italic 400 30px/1.1 var(--serif); color: var(--amber-2); }
.gloss dd { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(243, 239, 230, 0.8); }
.gloss dd strong { display: block; font: 560 22px/1.3 var(--serif); color: var(--forest-ink); margin-bottom: 4px; }
.gloss-sum dt { color: rgba(243, 239, 230, 0.6); font-style: normal; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 10px; }
.gloss-sum dd strong { font-size: 30px; font-style: italic; }
.mission { margin: 88px 0 0; padding: 40px 0 0; border-top: 1px solid rgba(243, 239, 230, 0.18); position: relative; z-index: 1; }
.mission p:last-child { font: 400 clamp(26px, 3.2vw, 40px)/1.3 var(--serif); letter-spacing: -0.01em; max-width: var(--text-max, 26em); }

/* ---------- Sections ---------- */
.section-head h2, .privacy h2 { font: 560 clamp(36px, 4.6vw, 58px)/1.05 var(--serif); letter-spacing: -0.02em; max-width: 16em; }
.section-lede { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: var(--text-max, 36em); }
.section-head-center { text-align: center; }
.section-head-center h2, .section-head-center .section-lede { margin-inline: auto; }

.what { padding: 128px 0 112px; }
.jobs { list-style: none; counter-reset: job; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.jobs li { counter-increment: job; padding: 28px 32px 36px 0; position: relative; }
.jobs li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.jobs li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.jobs li:nth-child(n+4) { border-top: 1px solid var(--rule); }
.jobs li::before { content: counter(job, decimal-leading-zero); display: block; font: 400 15px/1 var(--serif); color: var(--amber); margin-bottom: 26px; }
.jobs h3 { font: 560 22px/1.2 var(--serif); margin-bottom: 12px; }
.jobs p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Journey ---------- */
.journey { padding: 112px 0 120px; background: var(--paper-2); }
.journey-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 64px; align-items: center; }
.why { list-style: none; padding: 0; margin: 38px 0 0; display: grid; gap: 16px; max-width: 36em; }
.why li { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); padding-left: 22px; position: relative; }
.why li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--amber); }
.why strong { color: var(--ink); font-weight: 600; }
.phone-tilt { justify-self: center; transform: rotate(3deg); }

.ladder {
  list-style: none; margin: 88px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: 40px;
  position: relative;
}
.ladder li { position: relative; padding-top: 30px; text-align: left; }
.ladder li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--rule); }
.ladder li::after { content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--ink-3); }
.ladder li.m::after { background: var(--amber); border-color: var(--amber); }
.ladder li.s::after { width: 16px; height: 16px; top: 2px; background: var(--forest-2); border-color: var(--forest-2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--forest-2) 22%, transparent); }
.ladder b { display: block; font: 560 17px/1.2 var(--serif); padding-right: 8px; overflow-wrap: break-word; hyphens: manual; }
.ladder li:not(.m) b { font-weight: 400; color: var(--ink-2); }
.ladder span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.ladder-note { margin-top: 36px; font-size: 15px; color: var(--ink-3); max-width: 40em; }

/* ---------- Week ---------- */
.week { padding: 128px 0 64px; }
.story {
  display: grid; grid-template-columns: var(--phone-w, 300px) 1fr; gap: 88px; align-items: center;
  max-width: 920px; margin: 112px auto 0;
}
.story:nth-of-type(even) { grid-template-columns: 1fr var(--phone-w, 300px); }
.story:nth-of-type(even) .phone { order: 2; }
.when { font: 600 12.5px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.story h3 { font: 560 clamp(30px, 3.4vw, 42px)/1.1 var(--serif); letter-spacing: -0.015em; margin-bottom: 18px; }
.story-copy > p:not(.when):not(.does) { font-size: 18px; line-height: 1.65; color: var(--ink-2); max-width: var(--text-max, 30em); }
.does {
  margin-top: 26px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--rule);
  font-size: 15.5px; line-height: 1.55; color: var(--ink); max-width: var(--text-max, 30em);
}
.does strong { display: block; font: 600 11.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-2); margin-bottom: 8px; }

/* ---------- Color themes ---------- */
.themes { padding: 128px 0 32px; }
.swatchbook { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; align-items: start; }
.swatchbook li:nth-child(even) { transform: translateY(48px); }   /* a staggered row reads as a set, not a grid of cards */
.swatchbook .phone { width: 100%; border-radius: 34px; padding: 7px; }
.swatchbook .phone img { border-radius: 28px; }
.swatchbook h3 { margin-top: 26px; font: 560 22px/1.2 var(--serif); letter-spacing: -0.01em; }
.swatchbook p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.chips { display: flex; gap: 5px; margin-top: 14px; }
.chips i { width: 22px; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--rule); }
/* primary, accent, secondary and canvas, as each palette's light values in the app */
.chips-ranger i:nth-child(1) { background: #2E5240; } .chips-ranger i:nth-child(2) { background: #DD9E2A; } .chips-ranger i:nth-child(3) { background: #6B7D4F; } .chips-ranger i:nth-child(4) { background: #F2F4F0; }
.chips-oldglory i:nth-child(1) { background: #1F3A6E; } .chips-oldglory i:nth-child(2) { background: #B42235; } .chips-oldglory i:nth-child(3) { background: #5B6B86; } .chips-oldglory i:nth-child(4) { background: #F3F5F9; }
.chips-fielddrab i:nth-child(1) { background: #4F5A2E; } .chips-fielddrab i:nth-child(2) { background: #8A6B32; } .chips-fielddrab i:nth-child(3) { background: #7E6447; } .chips-fielddrab i:nth-child(4) { background: #F1EFE8; }
.chips-patrol i:nth-child(1) { background: #1D4E89; } .chips-patrol i:nth-child(2) { background: #8F661B; } .chips-patrol i:nth-child(3) { background: #56677D; } .chips-patrol i:nth-child(4) { background: #EEF2F6; }
.chips-crimson i:nth-child(1) { background: #B80F2A; } .chips-crimson i:nth-child(2) { background: #1C1C1F; } .chips-crimson i:nth-child(3) { background: #55555B; } .chips-crimson i:nth-child(4) { background: #F4F4F5; }

/* ---------- Sources ---------- */
.sources { padding: 72px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 96px; }
.sources-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: baseline; }
.sources-grid .eyebrow { margin: 0; }
.sources-copy { font: 400 clamp(21px, 2.2vw, 27px)/1.45 var(--serif); color: var(--ink); max-width: var(--text-max, 40em); }

/* ---------- Privacy ---------- */
.privacy { padding: 120px 0; }
.privacy-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.promises { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 36px; }
.promises li { padding-top: 22px; border-top: 2px solid var(--forest-2); }
.promises h3 { font: 560 22px/1.2 var(--serif); margin-bottom: 10px; }
.promises p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Get ---------- */
.get { background: var(--forest); color: var(--forest-ink); padding: 104px 0 0; overflow: hidden; }
.get-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.get-copy { padding-bottom: 104px; }
.get-icon { border-radius: 22px; margin-bottom: 30px; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.5); }
.get h2 { font: 560 clamp(40px, 5vw, 64px)/1.05 var(--serif); letter-spacing: -0.02em; margin-bottom: 18px; }
.get p { font-size: 19px; color: rgba(243, 239, 230, 0.82); }
.get-note { margin-top: 10px; font-size: 15px !important; color: rgba(243, 239, 230, 0.55) !important; }
.get-cta { margin-top: 30px; }
.pill-light { background: var(--forest-ink); color: var(--forest); }
.pill-light:hover { background: #fff; }
.get-art { display: flex; justify-content: center; gap: 28px; margin-bottom: -150px; }
.get-art .phone { width: var(--phone-w, 260px); }
.get-art .phone:last-child { transform: translateY(-56px); }

/* ---------- FAQ ---------- */
.faq { padding: 120px 0 120px; }
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; }
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-child { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0; position: relative;
  font: 560 20px/1.35 var(--serif);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 20px; font: 300 28px/1 var(--sans); color: var(--amber); transition: transform 200ms ease; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 40px 26px 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }

/* What you can plan for: an index of emergencies, grouped, flowing in columns */
.plans { padding: 112px 0 96px; background: var(--paper-2); border-top: 1px solid var(--rule); }
.hazards { columns: 3 260px; column-gap: 64px; margin-top: 64px; }
.hz { break-inside: avoid; margin: 0 0 48px; }
.hz h3 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font: 650 12px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.hz ul { list-style: none; margin: 0; padding: 0; }
.hz li { padding: 16px 0 17px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.hz li strong { display: block; margin-bottom: 3px; font: 560 19px/1.25 var(--serif); letter-spacing: -0.005em; color: var(--ink); }

/* ---------- Footer ---------- */
.foot { padding: 56px 0 64px; border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: auto 1fr; gap: 14px 32px; align-items: center; }
.foot-tag { font: italic 400 20px/1 var(--serif); color: var(--ink-2); }
.foot-fine { grid-column: 1 / -1; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 60em; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .nav { display: none; }
  .top-row .pill { margin-left: auto; }
  .jobs { grid-template-columns: 1fr 1fr; }
  .jobs li, .jobs li + li { padding: 28px 24px 24px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .jobs li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--rule); }
  .jobs li:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }
  .jobs li:nth-child(n+4) { border-top: 0; }
  .swatchbook { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
  .swatchbook li:nth-child(even) { transform: none; }
  .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }   /* one gate of five ranks per row */
}
@media (max-width: 860px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .hero { padding: 40px 0 64px; }
  .hero-grid, .name-grid, .journey-grid, .privacy-grid, .get-grid, .faq-wrap, .sources-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { height: 560px; }
  .halo { width: 480px; }
  .phone { width: min(var(--phone-w, 250px), 250px); border-radius: 40px; padding: 8px; }
  .plans { padding: 80px 0 56px; }
  .hazards { margin-top: 40px; }
  .phone img { border-radius: 33px; }
  .phone-front { transform: translate(-36%, -50%); }
  .phone-back { transform: translate(-92%, -44%) rotate(-6deg) scale(0.86); }
  .name { padding: 80px 0; }
  .gloss div { grid-template-columns: 1fr; gap: 6px; }
  .mission { margin-top: 56px; }
  .what, .journey, .privacy { padding: 88px 0; }
  .jobs { grid-template-columns: 1fr; margin-top: 48px; }
  .jobs li, .jobs li + li, .jobs li:nth-child(even) { padding: 24px 0; border-left: 0; }
  .themes { padding: 88px 0 24px; }
  .swatchbook { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; margin-top: 48px; }
  .swatchbook li:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
  .swatchbook .phone { width: 100%; border-radius: 30px; padding: 6px; }
  .swatchbook .phone img { border-radius: 25px; }
  .phone-tilt { transform: none; }
  .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; }
  .week { padding-top: 88px; }
  .story, .story:nth-of-type(even) { grid-template-columns: 1fr; gap: 32px; margin-top: 80px; justify-items: center; }
  .story:nth-of-type(even) .phone { order: 0; }
  .story-copy { width: 100%; }
  .promises { grid-template-columns: 1fr; gap: 28px; }
  .get { padding-top: 72px; }
  .get-copy { padding-bottom: 0; }
  .get-art { margin-bottom: -120px; gap: 16px; }
  .get-art .phone { width: 180px; border-radius: 30px; padding: 6px; }
  .get-art .phone img { border-radius: 25px; }
  .get-art .phone:last-child { transform: translateY(-36px); }
  .faq { padding: 88px 0 88px; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .top-cta .long { display: none; }
  .top-cta .short { display: inline; }
  .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 26px; }
  .ladder b { font-size: 11.5px; padding-right: 2px; letter-spacing: -0.01em; }
  .ladder span { font-size: 11px; }
}
@media (max-width: 420px) {
  .hero-art { height: 500px; }
  .phone { width: 220px; }
  .get-art .phone { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .halo-arc { animation: none; stroke-dashoffset: 78.5; }
  * { transition: none !important; }
}

/* ---------- Drafts: visible only in the Site Editor, removed from every deploy ---------- */
.is-draft { outline: 2px dashed var(--amber); outline-offset: -2px; }

/* ---------- 404 ---------- */
.lost { min-height: 100dvh; display: grid; place-content: center; justify-items: start; gap: 18px; width: min(560px, 100% - 2 * var(--gutter)); margin-inline: auto; padding: 48px 0; }
.lost img { border-radius: 18px; margin-bottom: 8px; }
.lost .eyebrow { margin: 0; }
.lost h1 { font: 560 clamp(36px, 6vw, 52px)/1.05 var(--serif); letter-spacing: -0.02em; }
.lost .pill { margin-top: 10px; }

/* Privacy and support pages (from the Parati Semper site). */
.doc { width: min(680px, 100% - 2 * var(--gutter)); margin-inline: auto; padding: 40px 0 64px; }
.doc-mark { display: inline-flex; margin-bottom: 48px; }
.doc h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 48px); line-height: 1.08; margin: 8px 0 18px; }
.doc h2 { font-family: var(--serif); font-size: 24px; margin: 44px 0 10px; }
.doc h3 { font-size: 17px; margin: 26px 0 6px; }
.doc p, .doc li { line-height: 1.65; color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 1.2em; }
.doc a { color: var(--forest-2); }
.doc-date { font-size: 14px; color: var(--ink-3); margin-top: 14px; }
.doc-foot { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }