/* RoamDrop home page, rebuilt 2026-08-26.
   Everything here is namespaced `rd-` so it cannot collide with styles.css,
   which still owns the header, the footer and the buttons shared with the
   legal pages. */

:root {
  --rd-violet: #6d42f5;
  --rd-violet-deep: #4a2bb8;
  --rd-violet-soft: #f1edff;
  --rd-ink: #0e1020;
  --rd-slate: #5c6480;
  --rd-line: #e6e8f2;
  --rd-page: #ffffff;
  --rd-tint: #f7f6ff;
}

.rd-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.rd-section { padding: 96px 0; }
.rd-section--tint { background: var(--rd-tint); }
.rd-section--ink { background: #0e1020; color: #fff; }

.rd-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rd-violet); margin: 0 0 14px;
}
.rd-section--ink .rd-eyebrow { color: #b9a5ff; }

.rd-h2 {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12;
  letter-spacing: -.02em; font-weight: 800; color: var(--rd-ink); margin: 0 0 16px;
}
.rd-section--ink .rd-h2 { color: #fff; }

.rd-lead {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6;
  color: var(--rd-slate); margin: 0; max-width: 62ch;
}
.rd-section--ink .rd-lead { color: rgba(255,255,255,.72); }

.rd-head { max-width: 760px; margin-bottom: 48px; }

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

.rd-hero {
  position: relative; overflow: hidden;
  padding: 72px 0 0;
  background:
    radial-gradient(1100px 620px at 80% -10%, #ede7ff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(760px 520px at 8% 4%, #f4f0ff 0%, rgba(255,255,255,0) 60%);
}
.rd-hero-grid {
  display: grid; gap: 44px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .rd-hero-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 32px; }
}
.rd-h1 {
  font-size: clamp(34px, 5vw, 60px); line-height: 1.05;
  letter-spacing: -.03em; font-weight: 800; color: var(--rd-ink); margin: 0 0 18px;
}
.rd-h1 em { font-style: normal; color: var(--rd-violet); }
.rd-hero-lead { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; color: var(--rd-slate); margin: 0 0 28px; max-width: 46ch; }

.rd-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
  background: #fff; border: 1px solid var(--rd-line);
  font-size: 13px; font-weight: 600; color: var(--rd-slate);
  box-shadow: 0 1px 2px rgba(14,16,32,.04);
}
.rd-pill b { color: var(--rd-violet); }

.rd-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 16px; font-weight: 700; text-decoration: none; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.rd-btn:hover { transform: translateY(-1px); }
.rd-btn--primary { background: var(--rd-violet); color: #fff; box-shadow: 0 8px 24px rgba(109,66,245,.28); }
.rd-btn--ghost { background: #fff; color: var(--rd-ink); border-color: var(--rd-line); }

.rd-microcopy { font-size: 13.5px; color: #8a90a2; margin: 0; }

/* Devices */
.rd-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 8px; }
.rd-device { position: relative; background: #111426; padding: 10px; box-shadow: 0 30px 70px rgba(14,16,32,.28); }
/* Corner radii are given as horizontal% / vertical% of the image's own box, so
   the curve matches the real device at ANY rendered size. A fixed pixel radius
   was wrong at every size but one, and it clipped the screenshot's own corners
   (owner, 2026-08-26). Frame radius = image radius + the 10 px bezel. */
.rd-device img { display: block; width: 100%; height: auto; }
/* Landscape: the whole point of the iPad shot is that six days fit at once,
   so it gets the width and the phone leans on its corner. */
/* iPad Air 13": 18 pt screen radius on a 1600x1199 capture = 21 px. */
.rd-device--pad { width: min(680px, 100%); border-radius: 3.2% / 4.3%; padding: 12px; }
.rd-device--pad img { border-radius: 1.31% / 1.75%; }
.rd-device--phone {
  width: 168px; border-radius: 15.5% / 7.1%; padding: 8px;
  margin-left: -92px; margin-bottom: -42px; z-index: 2;
}
/* iPhone 16 Pro Max: 55 pt screen radius on a 700x1521 capture = 88 px. */
.rd-device--phone img { border-radius: 12.57% / 5.79%; }
@media (max-width: 620px) {
  .rd-device--pad { width: 100%; }
  .rd-device--phone { width: 116px; margin-left: -62px; margin-bottom: -26px; }
}

/* ---------- Steps ---------- */

.rd-steps { display: grid; gap: 28px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) { .rd-steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; } }
.rd-step { background: #fff; border: 1px solid var(--rd-line); border-radius: 24px; padding: 26px 24px 0; overflow: hidden; }
.rd-step-n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rd-violet-soft); color: var(--rd-violet);
  font-weight: 800; font-size: 15px; margin-bottom: 14px;
}
.rd-step h3 { font-size: 20px; font-weight: 700; color: var(--rd-ink); margin: 0 0 8px; letter-spacing: -.01em; }
.rd-step p { font-size: 15px; line-height: 1.55; color: var(--rd-slate); margin: 0 0 22px; }
.rd-step-shot {
  /* A peek, not the whole screen: a 2868 px tall capture at column width made
     each step card taller than the viewport and the section unreadable. */
  margin: 0 -24px; height: 320px; overflow: hidden;
  border-top: 1px solid var(--rd-line);
  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
          mask-image: linear-gradient(#000 72%, transparent 100%);
}
.rd-step-shot img { display: block; width: 100%; height: auto; }

/* ---------- Persona cards ---------- */

.rd-personas { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .rd-personas { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rd-persona {
  background: #fff; border: 1px solid var(--rd-line); border-radius: 22px; padding: 26px 24px;
}
.rd-persona-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-violet); margin: 0 0 10px; }
.rd-persona h3 { font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--rd-ink); margin: 0 0 10px; letter-spacing: -.01em; }
.rd-persona p { font-size: 15px; line-height: 1.6; color: var(--rd-slate); margin: 0 0 16px; }
.rd-persona ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rd-persona li { font-size: 14.5px; color: var(--rd-ink); padding-left: 24px; position: relative; }
.rd-persona li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
  border-left: 2px solid var(--rd-violet); border-bottom: 2px solid var(--rd-violet);
  transform: rotate(-45deg);
}

/* ---------- Feature rows ---------- */

.rd-feature { display: grid; gap: 36px; align-items: center; grid-template-columns: minmax(0,1fr); }
@media (min-width: 940px) {
  .rd-feature { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 64px; }
  .rd-feature--flip .rd-feature-art { order: -1; }
}
.rd-feature + .rd-feature { margin-top: 96px; }
.rd-feature h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--rd-ink); margin: 0 0 14px; }
.rd-feature p { font-size: 16.5px; line-height: 1.62; color: var(--rd-slate); margin: 0 0 18px; }
.rd-feature-art { display: flex; justify-content: center; }
.rd-feature-art .rd-device--phone { width: 260px; margin: 0; }
@media (max-width: 620px) { .rd-feature-art .rd-device--phone { width: 208px; } }

.rd-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.rd-tags li {
  font-size: 13px; font-weight: 600; color: var(--rd-slate);
  background: #fff; border: 1px solid var(--rd-line); border-radius: 999px; padding: 7px 13px;
}

/* ---------- Facts strip ---------- */

.rd-facts { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 860px) { .rd-facts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.rd-fact { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 22px; }
.rd-fact b { display: block; font-size: 17px; color: #fff; margin-bottom: 6px; font-weight: 700; }
.rd-fact span { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.68); }

/* ---------- Price ---------- */

.rd-price { display: grid; gap: 20px; grid-template-columns: minmax(0,1fr); }
@media (min-width: 820px) { .rd-price { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.rd-price-card { background: #fff; border: 1px solid var(--rd-line); border-radius: 24px; padding: 28px; }
.rd-price-card--lead { border-color: var(--rd-violet); box-shadow: 0 12px 40px rgba(109,66,245,.12); }
.rd-price-card h3 { font-size: 22px; font-weight: 800; color: var(--rd-ink); margin: 0 0 6px; }
.rd-price-card > p { font-size: 15px; color: var(--rd-slate); margin: 0 0 18px; line-height: 1.55; }
.rd-price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rd-price-card li { font-size: 15px; color: var(--rd-ink); padding-left: 24px; position: relative; }
.rd-price-card li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px;
  border-left: 2px solid var(--rd-violet); border-bottom: 2px solid var(--rd-violet);
  transform: rotate(-45deg);
}

/* ---------- Final CTA ---------- */

.rd-final { text-align: center; }
.rd-final .rd-head { margin-inline: auto; }
.rd-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.rd-form input[type="email"] {
  height: 52px; min-width: min(340px, 100%); padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--rd-line); background: #fff;
  font-size: 16px; color: var(--rd-ink);
}
.rd-form input[type="email"]:focus { outline: 2px solid var(--rd-violet); outline-offset: 1px; }
.rd-ok { margin-top: 14px; font-size: 15px; font-weight: 600; color: #1f8a5b; display: none; }
.rd-ok.show { display: block; }