/* weatherdrops: the app's retro look. Warm paper, navy ink, cream cards
   with a hard shadow, and orange, mustard, and blue stripes. */
:root {
  --paper: #F3EEE3;
  --card: #FFFCF5;
  --card-alt: #F7F0E2;
  --line: #1E3A52;
  --shadow: #1E3A52;
  --ink: #1E2A35;
  --muted: #6B6558;
  --accent: #2F7FA6;
  --deep: #235F7D;
  --navy: #1E3A52;
  --orange: #E07A2F;
  --mustard: #E2A93B;
  --on-color: #FFFFFF;
  --display: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1620;
    --card: #172330;
    --card-alt: #1E2D3C;
    --line: #33495E;
    --shadow: #05090D;
    --ink: #EFE7D6;
    --muted: #9AABBA;
    --accent: #7DBBDB;
    --deep: #8CC6E3;
    --navy: #EFE7D6;
    --orange: #F08C45;
    --mustard: #E9B44E;
    --on-color: #0E1620;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
}
a { color: var(--deep); font-weight: 600; }
img { max-width: 100%; display: block; }

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

/* Header */
header { padding: 22px 0 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand img { width: 34px; height: 34px; }
.brand span { font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .logo-light { display: none; }
  .logo-dark { display: block; }
}
/* The app's header line: three lines that thin out, with a faint
   reflection below them. */
.stripes { margin-top: 14px; display: grid; gap: 2.5px; justify-items: end; }
.stripes i { display: block; border-radius: 4px; }
.stripes i:nth-child(1) { height: 4px; width: 100%; background: var(--orange); }
.stripes i:nth-child(2) { height: 2.5px; width: calc(100% - 30px); background: var(--mustard); }
.stripes i:nth-child(3) { height: 1.5px; width: calc(100% - 60px); background: var(--accent); }
/* The reflection: the same lines upside down, shorter, faint, and fading out. */
.stripes.mirror { margin-top: 2px; gap: 1.75px; opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.stripes.mirror i:nth-child(1) { height: 1px; width: calc(100% - 60px); background: var(--accent); }
.stripes.mirror i:nth-child(2) { height: 1.75px; width: calc(100% - 30px); background: var(--mustard); }
.stripes.mirror i:nth-child(3) { height: 2.8px; width: 100%; background: var(--orange); }

/* Cards */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 24px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 0 40px;
}
.badge {
  display: inline-block;
  background: var(--orange);
  color: var(--on-color);
  border: 1.5px solid var(--line);
  box-shadow: 3px 3px 0 var(--shadow);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
h1 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(42px, 7vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 20px 0 16px;
}
.lede { font-size: 20px; color: var(--ink); max-width: 30em; }
.lede em { font-style: normal; color: var(--deep); font-weight: 600; }

.phones { display: flex; gap: 18px; justify-content: center; }
.phone {
  width: 48%;
  max-width: 250px;
  border: 1.5px solid var(--line);
  border-radius: 34px;
  box-shadow: 5px 5px 0 var(--shadow);
  overflow: hidden;
  background: var(--card);
}
.phone:nth-child(2) { margin-top: 48px; }

/* Sections */
section { padding: 28px 0; }
h2 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  font-size: 34px;
  line-height: 1.15;
  margin-bottom: 18px;
}
.label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { position: relative; overflow: hidden; min-height: 150px; }
.feature h3 { position: relative; font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.feature p { position: relative; color: var(--muted); font-size: 16px; max-width: 85%; }
/* The icon sits large and faint behind the words, tucked into the corner. */
.feature .icon {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 128px;
  height: 128px;
  opacity: 0.13;
  pointer-events: none;
}
.feature .icon svg { width: 100%; height: 100%; stroke: var(--orange); stroke-width: 1.6; }

.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.bubbles { display: grid; gap: 10px; }
.q {
  justify-self: end;
  background: #235F7D;
  color: #FFFFFF;
  border: 1.5px solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 16px;
}
.a {
  justify-self: start;
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 16px;
  max-width: 92%;
}

.plus { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.plus ul { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.plus li { padding-left: 26px; position: relative; }
.plus li::before {
  content: ""; position: absolute; left: 4px; top: 0.55em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--orange);
}
.price { text-align: center; }
.price strong { font-family: var(--display); font-size: 40px; color: var(--deep); display: block; line-height: 1; }
.price span { color: var(--muted); font-size: 15px; }

/* Footer */
footer { padding: 40px 0 48px; color: var(--muted); font-size: 15px; }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 10px; }
footer a { color: var(--deep); }

/* Legal pages */
.doc { max-width: 720px; margin: 40px auto 0; }
.doc h1 { font-size: clamp(36px, 6vw, 48px); margin-top: 0; }
.doc h2 { font-size: 24px; margin: 28px 0 8px; }
.doc p, .doc li { margin-bottom: 12px; }
.doc ul { padding-left: 22px; }
.doc .updated { color: var(--muted); font-style: italic; }

@media (max-width: 820px) {
  .hero, .ask, .plus { grid-template-columns: 1fr; }
  .hero { padding-top: 36px; gap: 32px; }
  .grid { grid-template-columns: 1fr; }
  .price { text-align: left; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .card { padding: 20px; }
  .phone { border-radius: 26px; }
}