/* =========================================================
   APP PAGES (Safe Compass Kids and its privacy policy)
   Loaded after style.css, so it uses the same colours and fonts.
   1. Page layout        2. Phone mockups (drawn in HTML/CSS)
   3. Cards: message, calls, widgets     4. Legal text     5. Responsive
   ========================================================= */

/* ---------- 1. PAGE LAYOUT ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ochre); }
.crumbs [aria-current] { color: var(--ink-2); }

.app-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px clamp(32px, 5vw, 72px); align-items: center;
  padding-block: clamp(8px, 2vw, 24px) clamp(56px, 7vw, 96px);
}
.app-id { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.app-icon-lg { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 8px 16px rgba(30, 40, 60, .16)); }
.app-name-lg { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.app-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.028em; }
.app-hero h1 em { font-style: normal; color: var(--ochre-big); }
.app-lede { font-size: 18px; line-height: 1.65; max-width: 44ch; margin-top: 22px; }
.soon-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 28px;
  padding: 9px 16px 9px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.soon-pill svg { width: 16px; height: 16px; color: var(--ochre); }
.facts { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--muted); }
.facts li { position: relative; padding-left: 12px; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }

.hero-phones { position: relative; display: flex; justify-content: flex-end; min-height: 520px; padding-right: 4%; }
.hero-phones .phone-front { --pw: 280px; position: relative; z-index: 2; }
.hero-phones .phone-back  { --pw: 240px; position: absolute; left: 2%; top: 60px; transform: rotate(-6deg); z-index: 1; }

/* sections */
.app-sec { padding-block: clamp(52px, 7vw, 96px); }
.app-sec > .wrap { position: relative; }
.app-sec + .app-sec > .wrap::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(-1 * clamp(52px, 7vw, 96px)); height: 1px; background: var(--line);
}
.app-sec h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 500; letter-spacing: -.022em; line-height: 1.1; }
.app-sec .eyebrow { margin-bottom: 14px; }
.lead { font-size: 17.5px; line-height: 1.65; max-width: 50ch; margin-top: 16px; }
.lead-small { font-size: 15.5px; line-height: 1.65; margin-top: 18px; max-width: 52ch; }
.sec-head { max-width: 640px; }
.muted { color: var(--muted); font-weight: 400; }

.split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 88px); align-items: center; }
.split.flip .split-text { order: 2; }
.split-art { display: flex; justify-content: center; align-items: flex-start; gap: 22px; }
.split-art .phone { --pw: 280px; }
.split-art.duo .phone { --pw: 244px; }
.split-art.duo .phone + .phone { margin-top: 56px; }

.plain { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.plain li { position: relative; padding-left: 22px; line-height: 1.6; }
.plain li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 10px; height: 1.5px; background: var(--amber); }
.plain.checks li::before {
  left: 3px; top: .45em; width: 5px; height: 10px; background: none;
  border: solid var(--ochre); border-width: 0 2px 2px 0; transform: rotate(40deg);
}

.marks { list-style: none; counter-reset: m; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.marks li { counter-increment: m; position: relative; padding-left: 42px; line-height: 1.6; }
.marks li::before {
  content: counter(m); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ochre-big); color: #fff; font-size: 13px; font-weight: 700;
}
.hand-note { font-family: var(--hand); font-weight: 300; font-size: 21px; color: var(--ink-2); margin-top: 24px; transform: rotate(-1.5deg); transform-origin: left; }

.two-q .q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 72px); margin-top: 40px; }
.q { display: grid; gap: 12px; align-content: start; }
.q h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); font-weight: 500; letter-spacing: -.01em; }
.q p { max-width: 46ch; line-height: 1.65; }
.q-num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; color: #fff; background: #1A7CF5; margin-bottom: 6px;
}
.q-num.is-red { background: #E01E2D; }

.steps { list-style: none; counter-reset: s; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.steps li { counter-increment: s; border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); font-size: 14px; font-weight: 700; color: var(--ochre); }
.steps h3 { font-size: 18px; font-weight: 500; line-height: 1.35; }
.steps p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

.lost-visuals { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; margin-top: 44px; }
.lost-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 72px); margin-top: 48px; }
.lost-notes h3 { font-size: 18px; font-weight: 500; margin-bottom: 8px; }
.lost-notes p { font-size: 15.5px; line-height: 1.7; }

.feature-list { margin: 28px 0 0; display: grid; gap: 22px; }
.feature-list dt { font-size: 17px; font-weight: 500; color: var(--ink); }
.feature-list dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.65; }

.setup .phone-row {
  display: flex; justify-content: center; gap: 28px; margin-top: 44px;
  padding-inline: var(--gutter);
}
.setup .phone-row .phone { --pw: 250px; flex: none; }

.twin .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 88px); }
.twin h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.privacy-col .text-link { margin-top: 22px; }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.price-col { padding: clamp(24px, 3vw, 34px); border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.price-col.is-premium { background: var(--paper-2); border-color: transparent; }
.price-col h3 { font-size: 21px; font-weight: 600; }
.price-note { font-size: 15px; color: var(--muted); margin-top: 6px; }
.price-col .plain { margin-top: 20px; }
.never { font-family: var(--hand); font-weight: 300; font-size: 21px; color: var(--ink-2); margin-top: 26px; }

.closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px clamp(40px, 6vw, 88px); align-items: start; }
.req h2 { font-size: 22px; font-weight: 500; }
.important {
  background: var(--paper-2); border-radius: 20px; padding: clamp(24px, 3vw, 32px);
  border-left: 3px solid var(--amber); display: grid; gap: 12px;
}
.important h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.important p { font-size: 15.5px; line-height: 1.65; }
.important .sos { font-weight: 600; color: var(--ink); }

.app-cta { text-align: center; padding-block: 8px clamp(56px, 8vw, 96px); }
.app-cta .wrap { display: grid; justify-items: center; gap: 14px; }
.cta-icon { width: 84px; height: 84px; filter: drop-shadow(0 8px 16px rgba(30, 40, 60, .16)); }
.cta-status { font-size: 14px; font-weight: 500; color: var(--ochre); letter-spacing: .02em; }

/* ---------- 2. PHONE MOCKUPS ----------
   Sizes inside the screen use --pt: one iPhone point (the screen is 390 points wide). */
.phone {
  --pw: 280px;
  width: var(--pw); flex: none; position: relative;
  padding: calc(var(--pw) * .034);
  border-radius: calc(var(--pw) * .165);
  background: linear-gradient(145deg, #2a2d33, #16181c 40%, #0f1114);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), 0 40px 70px -40px rgba(25, 30, 45, .55), 0 12px 24px -16px rgba(25, 30, 45, .35);
}
.screen {
  position: relative; aspect-ratio: 390 / 844; overflow: hidden;
  border-radius: calc(var(--pw) * .135);
  container-type: inline-size;
  background: var(--s-bg); color: var(--s-txt);
}
.sb, .ui { --pt: calc(100cqw / 390); }
.ui-dark    { --s-bg: #0E1116; --s-txt: #F2F5FA; --s-pill: #141C2B; --s-ring: rgba(255,255,255,.2); --s-lock: #7D8594; --s-sb: #fff; }
.ui-light   { --s-bg: #F2F5FB; --s-txt: #0D2350; --s-pill: #DCE6F8; --s-ring: #CBD2DC; --s-lock: #7D8594; --s-sb: #000; }
.ui-pink    { --s-bg: #FDEEF3; --s-txt: #0D2350; --s-pill: #F8D9E4; --s-ring: #D6CCD2; --s-lock: #7D8594; --s-sb: #000;
              --dial: radial-gradient(circle at 34% 22%, #F598BD 0%, #EC5C97 48%, #E0357A 100%); --dial-glow: rgba(224, 53, 122, .28); --pill-icon: #E0357A; }
.ui-plain   { --s-bg: #FFFFFF; --s-txt: #0D2350; --s-sb: #000; }
.ui-grouped { --s-bg: #F2F2F7; --s-txt: #000; --s-sb: #000; }

.sb {
  position: absolute; z-index: 5; inset: 0 0 auto; height: calc(54 * var(--pt));
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(4 * var(--pt)) calc(24 * var(--pt)) 0 calc(32 * var(--pt));
  font: 600 calc(17 * var(--pt)) / 1 -apple-system, "SF Pro Text", "DM Sans", system-ui, sans-serif;
  color: var(--s-sb); letter-spacing: -.01em;
}
.sb-time { width: calc(60 * var(--pt)); text-align: center; }
.island {
  position: absolute; left: 50%; top: calc(11 * var(--pt)); width: calc(124 * var(--pt)); height: calc(36 * var(--pt));
  transform: translateX(-50%); background: #000; border-radius: calc(20 * var(--pt));
}
.sb-icons { display: flex; align-items: center; gap: calc(6 * var(--pt)); }
.sb-icons svg { height: calc(12 * var(--pt)); width: auto; fill: currentColor; }
.sb-icons .bat { height: calc(13 * var(--pt)); }

.ui { position: absolute; inset: 0; font-family: ui-rounded, "SF Pro Rounded", "DM Sans", system-ui, sans-serif; }

/* child screen */
.child .c-pill {
  position: absolute; top: calc(64 * var(--pt)); left: 50%; transform: translateX(-50%);
  height: calc(68 * var(--pt)); padding: 0 calc(30 * var(--pt)); border-radius: calc(34 * var(--pt));
  display: flex; align-items: center; gap: calc(14 * var(--pt)); white-space: nowrap;
  background: var(--s-pill); font-weight: 800; font-size: calc(31 * var(--pt)); letter-spacing: -.01em;
}
.child .c-pill svg { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); fill: var(--pill-icon, #2F7BEE); }
.child .c-lock {
  position: absolute; top: calc(83 * var(--pt)); right: calc(22 * var(--pt));
  width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%;
  border: calc(1.8 * var(--pt)) solid var(--s-ring); display: grid; place-items: center; color: var(--s-lock);
}
.child .c-lock svg { width: calc(12 * var(--pt)); fill: currentColor; }
.c-dial, .ob-dial, .w-dial {
  border-radius: 50%; display: grid; place-items: center;
  background: var(--dial, radial-gradient(circle at 34% 22%, #8CBAF8 0%, #5A96F2 46%, #3B7AEA 100%));
}
.c-dial svg, .ob-dial svg, .w-dial svg {
  transform: rotate(var(--rot, 0deg));
  fill: none; stroke: #fff; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}
.child .c-dial {
  position: absolute; left: calc(57 * var(--pt)); top: calc(230 * var(--pt));
  width: calc(276 * var(--pt)); height: calc(276 * var(--pt));
  box-shadow: 0 0 calc(44 * var(--pt)) var(--dial-glow, rgba(64, 128, 240, .38));
}
.ui-light .child .c-dial { box-shadow: 0 calc(10 * var(--pt)) calc(40 * var(--pt)) rgba(64, 128, 240, .25); }
.child .c-dial svg { width: calc(150 * var(--pt)); }
.child .c-dial.is-neutral { background: radial-gradient(circle at 40% 30%, #E4EAF1, #D7DFE9); box-shadow: 0 calc(12 * var(--pt)) calc(34 * var(--pt)) rgba(40, 60, 90, .14); }
.child .c-dial svg.flat { stroke: #51607A; stroke-width: 5.5; filter: none; width: calc(120 * var(--pt)); }
.child .c-dist {
  position: absolute; top: calc(508 * var(--pt)); left: 0; right: 0; text-align: center;
  font-weight: 800; font-size: calc(62 * var(--pt)); letter-spacing: -.01em; color: var(--s-txt);
}
.child .c-hint {
  position: absolute; top: calc(532 * var(--pt)); left: calc(42 * var(--pt)); right: calc(42 * var(--pt));
  text-align: center; font-weight: 700; font-size: calc(25 * var(--pt)); line-height: 1.25; color: var(--s-txt);
}
.child .c-lost {
  position: absolute; left: calc(22 * var(--pt)); right: calc(22 * var(--pt)); top: calc(702 * var(--pt));
  height: calc(100 * var(--pt)); border-radius: calc(50 * var(--pt));
  display: grid; place-items: center; color: #fff; white-space: nowrap;
  font-weight: 800; font-size: calc(40 * var(--pt)); letter-spacing: -.01em;
  background: linear-gradient(#F0414D, #E01E2D);
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) rgba(255,255,255,.18), 0 calc(10 * var(--pt)) calc(28 * var(--pt)) rgba(224, 30, 45, .32);
}
.child .callout {
  position: absolute; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; font: 700 calc(14 * var(--pt)) / 1 "DM Sans", system-ui, sans-serif;
  background: #D48C26; color: #fff; box-shadow: 0 0 0 calc(3 * var(--pt)) var(--s-bg);
}
.callout.c1 { left: calc(26 * var(--pt)); top: calc(84 * var(--pt)); }
.callout.c2 { left: calc(46 * var(--pt)); top: calc(240 * var(--pt)); }
.callout.c3 { left: calc(62 * var(--pt)); top: calc(534 * var(--pt)); }
.callout.c4 { left: calc(12 * var(--pt)); top: calc(690 * var(--pt)); z-index: 2; }

/* PIN screen */
.pin { font-family: -apple-system, "SF Pro Text", "DM Sans", system-ui, sans-serif; color: #0D2350; }
.pin-cancel, .set-done {
  position: absolute; top: calc(60 * var(--pt)); padding: calc(12 * var(--pt)) calc(18 * var(--pt));
  border-radius: 999px; background: #fff; font-size: calc(17 * var(--pt)); color: #111;
  box-shadow: 0 calc(4 * var(--pt)) calc(18 * var(--pt)) rgba(0, 0, 0, .08);
}
.pin-cancel { left: calc(16 * var(--pt)); }
.pin-panel {
  position: absolute; top: calc(172 * var(--pt)); left: 0; right: 0; bottom: calc(90 * var(--pt));
  background: #F6F8FB; display: flex; flex-direction: column; align-items: center; padding-top: calc(28 * var(--pt));
}
.pin-title { font-weight: 800; font-size: calc(31 * var(--pt)); letter-spacing: -.015em; }
.pin-sub { font-size: calc(18 * var(--pt)); color: #4A5568; margin-top: calc(22 * var(--pt)); font-weight: 500; }
.pin-dots { display: flex; gap: calc(18 * var(--pt)); margin-top: calc(26 * var(--pt)); }
.pin-dots i { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 50%; border: calc(2 * var(--pt)) solid #4A5568; }
.pin-dots i.on { background: #0D2350; border-color: #0D2350; }
.keys { display: grid; grid-template-columns: repeat(3, calc(104 * var(--pt))); gap: calc(12 * var(--pt)) calc(14 * var(--pt)); margin-top: calc(28 * var(--pt)); }
.keys b, .keys span { height: calc(64 * var(--pt)); border-radius: calc(16 * var(--pt)); display: grid; place-items: center; }
.keys b { background: #fff; font: 600 calc(30 * var(--pt)) / 1 ui-rounded, "SF Pro Rounded", "DM Sans", sans-serif; }
.keys .del svg { width: calc(26 * var(--pt)); fill: #0D2350; }
.pin-forgot { font-size: calc(17 * var(--pt)); color: #0B5CC7; margin-top: calc(22 * var(--pt)); font-weight: 500; }

/* Parent settings (grouped list) */
.settings { font-family: -apple-system, "SF Pro Text", "DM Sans", system-ui, sans-serif; padding: calc(112 * var(--pt)) calc(18 * var(--pt)) 0; }
.set-done { right: calc(16 * var(--pt)); font-weight: 600; }
.set-title { font-weight: 800; font-size: calc(33 * var(--pt)); letter-spacing: -.02em; margin: 0 0 calc(8 * var(--pt)) calc(2 * var(--pt)); }
.set-head { font-size: calc(16 * var(--pt)); font-weight: 600; color: #6D6D72; margin: calc(16 * var(--pt)) calc(18 * var(--pt)) calc(8 * var(--pt)); }
.set-card { background: #fff; border-radius: calc(22 * var(--pt)); padding: 0 calc(18 * var(--pt)); }
.set-card .row {
  height: calc(50 * var(--pt)); display: flex; align-items: center; justify-content: space-between;
  font-size: calc(17 * var(--pt)); border-bottom: calc(.8 * var(--pt)) solid #E2E2E6;
}
.set-card .row:last-child { border-bottom: 0; }
.set-card em { font-style: normal; color: #8A8A8E; }
.set-card .blue { color: #0B5CC7; }
.tog { width: calc(50 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 999px; background: #34C759; position: relative; }
.tog::after { content: ""; position: absolute; right: calc(2 * var(--pt)); top: calc(2 * var(--pt)); width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }

/* Onboarding (dark) */
.ob {
  font-family: -apple-system, "SF Pro Text", "DM Sans", system-ui, sans-serif;
  display: flex; flex-direction: column; padding: calc(66 * var(--pt)) calc(22 * var(--pt)) calc(40 * var(--pt));
}
.ob-top { display: flex; justify-content: space-between; align-items: center; font-size: calc(16 * var(--pt)); font-weight: 600; min-height: calc(22 * var(--pt)); }
.ob-step { color: #B8C0CC; }
.ob-back { color: #6FB1FF; font-weight: 500; }
.ob-bar { display: grid; grid-template-columns: repeat(9, 1fr); gap: calc(5 * var(--pt)); margin-top: calc(14 * var(--pt)); }
.ob-bar i { height: calc(6 * var(--pt)); border-radius: calc(3 * var(--pt)); background: #2A313C; }
.ob-bar i.f { background: #1A7CF5; }
.ob-logo { width: calc(70 * var(--pt)); height: calc(70 * var(--pt)); border-radius: 50%; background: #1A7CF5; display: grid; place-items: center; margin-top: calc(28 * var(--pt)); }
.ob-logo svg { width: calc(38 * var(--pt)); fill: none; stroke: #0E1116; stroke-width: 2.4; stroke-linejoin: round; }
.ob-badge { margin-top: calc(28 * var(--pt)); }
.ob-badge svg { width: calc(76 * var(--pt)); fill: #3DBE67; }
.ob-title { font-weight: 800; font-size: calc(33 * var(--pt)); line-height: 1.12; letter-spacing: -.02em; margin-top: calc(26 * var(--pt)); color: #F2F5FA; }
.ob-text { font-size: calc(19 * var(--pt)); line-height: 1.4; color: #B8C0CC; margin-top: calc(14 * var(--pt)); }
.ob-list { list-style: none; margin: calc(20 * var(--pt)) 0 0; padding: 0; display: grid; gap: calc(14 * var(--pt)); }
.ob-list li { position: relative; padding-left: calc(28 * var(--pt)); font-size: calc(16.5 * var(--pt)); line-height: 1.4; color: #F2F5FA; }
.ob-list li::before { content: ""; position: absolute; left: calc(2 * var(--pt)); top: calc(5 * var(--pt)); width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); border-radius: calc(4 * var(--pt)); background: #1A7CF5; }
.ob-small { font-size: calc(13 * var(--pt)); line-height: 1.45; color: #8A93A3; margin-top: calc(18 * var(--pt)); }
.ob-btn {
  margin-top: calc(12 * var(--pt)); min-height: calc(56 * var(--pt)); border-radius: calc(18 * var(--pt));
  display: grid; place-items: center; text-align: center; padding: 0 calc(10 * var(--pt));
  background: #1A7CF5; color: #fff; font-weight: 700; font-size: calc(19 * var(--pt));
}
.ob-btn:last-child { margin-top: auto; }
.ob-btn.is-secondary { background: #3B7BE6; }
.ob-btn.is-green { background: #5DBB6E; }
.ob-dial { width: calc(168 * var(--pt)); height: calc(168 * var(--pt)); margin: calc(24 * var(--pt)) auto 0; box-shadow: 0 0 calc(34 * var(--pt)) rgba(64, 128, 240, .4); }
.ob-dial svg { width: calc(92 * var(--pt)); }
.ob-dist { text-align: center; font-size: calc(17 * var(--pt)); font-weight: 600; color: #F2F5FA; margin: calc(12 * var(--pt)) 0 calc(14 * var(--pt)); }

/* ---------- 3. CARDS: message, calls, widgets ---------- */
.mock-card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; }
.mock-card figcaption { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--muted); }
.msg-to { font: 14px/1.3 -apple-system, "DM Sans", system-ui, sans-serif; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.msg-bubble {
  align-self: flex-end; max-width: 88%; margin-top: 18px;
  background: #1A7CF5; color: #fff; border-radius: 20px 20px 6px 20px; padding: 12px 16px;
  font: 15.5px/1.42 -apple-system, "DM Sans", system-ui, sans-serif;
}
.msg-bubble p + p { margin-top: 4px; }
.msg-send { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.msg-send svg { width: 28px; height: 28px; fill: #1A7CF5; }
.call-tiles { display: grid; gap: 10px; }
.call-tile {
  display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 12px 0 18px; border-radius: 18px; color: #fff;
  font-family: ui-rounded, "SF Pro Rounded", "DM Sans", system-ui, sans-serif;
}
.call-tile > svg { width: 26px; height: 26px; fill: #fff; flex: none; }
.call-tile b { font-size: 21px; font-weight: 800; }
.call-tile i { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.call-tile i svg { width: 19px; fill: #fff; }
.t-pink { background: #E0357A; } .t-blue { background: #1A7CF5; } .t-green { background: #2E9E57; }

.widgets { gap: 22px; align-items: center; }
.widget {
  width: 172px; aspect-ratio: 1; border-radius: 40px; padding: 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: ui-rounded, "SF Pro Rounded", "DM Sans", system-ui, sans-serif;
  box-shadow: 0 24px 40px -24px rgba(25, 30, 45, .5);
}
.widget b { font-size: 23px; font-weight: 800; line-height: 1.1; }
.w-lost { background: linear-gradient(#F0414D, #E01E2D); color: #fff; }
.w-lost svg { width: 36px; height: 36px; fill: currentColor; }
.w-nav { background: #0E1116; color: #F2F5FA; transform: translateY(28px); }
.w-dial { width: 76px; height: 76px; box-shadow: 0 0 22px rgba(64, 128, 240, .35); --rot: -24deg; }
.w-dial svg { width: 42px; }

/* ---------- 4. LEGAL TEXT ---------- */
.legal .wrap { max-width: 800px; padding-block: clamp(16px, 3vw, 40px) clamp(56px, 8vw, 96px); }
.legal-head { margin-bottom: 36px; }
.app-id.small { gap: 12px; margin-bottom: 16px; }
.app-id.small .app-icon-lg { width: 44px; height: 44px; }
.app-id.small .eyebrow { margin: 0; }
.legal-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.legal-body { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); overflow-wrap: anywhere; }
.legal-body > p:first-child { color: var(--muted); font-size: 15px; }
.legal-body h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 44px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-body h3 { font-size: 17.5px; font-weight: 600; margin: 28px 0 8px; color: var(--ink); }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body li::marker { color: var(--ochre); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--amber); background: var(--paper-2); border-radius: 0 12px 12px 0; }
.legal-body blockquote p { margin: 0; }
mark.todo { background: color-mix(in srgb, var(--amber) 38%, transparent); color: var(--ink); padding: 1px 6px; border-radius: 5px; font-weight: 500; }
.legal .back-link { margin-top: 36px; }

/* ---------- 5. RESPONSIVE ---------- */
@media (max-width: 960px) {
  .app-hero .wrap, .split .wrap, .twin .wrap, .closing .wrap { grid-template-columns: minmax(0, 1fr); }
  .split.flip .split-text { order: 0; }
  .hero-phones { justify-content: center; min-height: 0; padding: 20px 0 0 18%; }
  .hero-phones .phone-back { left: 4%; }
  .steps, .lost-notes, .lost-visuals { grid-template-columns: minmax(0, 1fr); }
  .setup .phone-row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 24px; scrollbar-width: thin; }
  .setup .phone-row .phone { scroll-snap-align: center; }
}
@media (max-width: 640px) {
  .app-id { margin-bottom: 20px; }
  .app-icon-lg { width: 64px; height: 64px; }
  .hero-phones { padding-left: 22%; }
  .hero-phones .phone-front { --pw: 220px; }
  .hero-phones .phone-back { --pw: 188px; left: 0; top: 40px; }
  .two-q .q-grid, .price-grid { grid-template-columns: minmax(0, 1fr); }
  .split-art .phone { --pw: 250px; }
  .split-art.duo .phone { --pw: calc((100vw - 2 * var(--gutter) - 14px) / 2); }
  .split-art.duo { gap: 14px; }
  .split-art.duo .phone + .phone { margin-top: 36px; }
  .setup .phone-row .phone { --pw: 230px; }
  .widget { width: 148px; border-radius: 34px; padding: 17px; }
  .widget b { font-size: 20px; }
  .w-dial { width: 64px; height: 64px; }
}