/* Polish pass: alignment, spacing and small-screen fixes. Loaded last. */

/* Headings: no awkward single-word last lines */
h1, h2, h3 { text-wrap: balance; hyphens: manual; }
p, .lead { text-wrap: pretty; }

/* Marquee: rotated band no longer widens the page */
.marquee-clip { overflow-x: clip; overflow-y: visible; padding: 6px 0; }
.marquee { margin: 0 -12px; }

/* Subpage heroes: the soft pink glow fades out instead of ending on a hard line */
.page-hero-visual {
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(196, 181, 253, 0.45), transparent 70%),
    radial-gradient(520px 260px at 0% 70%, rgba(249, 168, 212, 0.26), transparent 70%),
    #FAF5FF;
}
.hero-split { align-items: center; }
.page-hero-visual .form-card { align-self: start; }

/* ---------- Home hero band ---------- */
.hero-phones { padding-top: 5%; }
.hp-left { transform: translate(14px, 56px) rotate(-6deg); }
.hp-right { transform: translate(-14px, 56px) rotate(6deg); }
@keyframes hpfloatL { 0%, 100% { transform: translate(14px, 56px) rotate(-6deg); } 50% { transform: translate(14px, 46px) rotate(-5deg); } }
@keyframes hpfloatR { 0%, 100% { transform: translate(-14px, 56px) rotate(6deg); } 50% { transform: translate(-14px, 46px) rotate(5deg); } }
.hp-right .hp-screen { padding: 16px 14px; }
.hp-right .match-row { gap: 10px; }
.hp-right .match-row > div { min-width: 0; }
.hp-right .match-row strong { display: block; font-size: 12.5px; line-height: 1.25; }
.hp-right .p-ok { display: block; font-size: 10.5px; line-height: 1.3; }
.hp-right .match-score { font-size: 18px; }
.hp-right .match-row .avatar { width: 38px; height: 38px; flex-shrink: 0; }
.hp .tagset { gap: 6px; }
.hero-band .uc-left { left: 24px; bottom: 24px; }
.hero-band .uc-right { right: 24px; top: 24px; }
@media (max-width: 1240px) {
  .hero-band .uc-left { bottom: 18px; left: 18px; }
}
@media (max-width: 760px) {
  .hero-band { min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; padding: 18px 14px 0; }
  .hero-band .band-img { position: absolute; }
  .hero-band .uc-right { position: relative; inset: auto; z-index: 4; align-self: stretch; animation: none; }
  .hero-band .uc-left { display: none; }
  .hero-phones { position: relative; inset: auto; padding: 22px 0 0; height: 430px; overflow: hidden; align-items: flex-start; }
  .hp-center { animation: none; }
}

/* ---------- "Built around her" tiles ---------- */
.photo-tiles { align-items: stretch; }
.photo-tile, .photo-tile.tall { aspect-ratio: 4 / 5; }
.photo-tile h3 { font-size: clamp(22px, 2.2vw, 26px); bottom: 24px; padding: 0 24px; }
@media (max-width: 760px) {
  .photo-tile, .photo-tile.tall { aspect-ratio: 5 / 5.4; }
  .photo-tile h3 { font-size: 24px; }
}

/* ---------- Stats ---------- */
.statement h2 { margin-bottom: 8px; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 22px 12px; border-radius: 22px; text-align: center; }
  .stat strong { font-size: 38px; }
  .stat span { font-size: 14px; line-height: 1.35; }
}

/* ---------- Feature rows ---------- */
.feature-copy { display: flex; flex-direction: column; gap: 14px; }
.feature-copy .more-link { margin-top: 4px; }

/* ---------- Flatmates band: text stays readable over the painting ---------- */
.band-wide::before { background: linear-gradient(90deg, rgba(20, 8, 50, 0.78) 0%, rgba(20, 8, 50, 0.5) 38%, rgba(20, 8, 50, 0.08) 62%, transparent 75%); }
.band-copy { left: 56px; max-width: 400px; }
@media (max-width: 760px) {
  .band-copy { left: 22px; right: 22px; top: 26px; }
  .band-wide::before { background: linear-gradient(180deg, rgba(20, 8, 50, 0.82) 0%, rgba(20, 8, 50, 0.55) 45%, rgba(20, 8, 50, 0.1) 75%, transparent 90%); }
}

/* ---------- Safety section ---------- */
.safety-grid > div:first-child { display: flex; flex-direction: column; gap: 14px; }
.safety-grid > div:first-child .kicker { margin-bottom: -4px; }
.safety-grid > div:first-child .safe-list { margin-top: 18px; }
.safe-stage { padding: 96px 24px 104px; }
.sc-a { left: 20px; top: 20px; }
.sc-b { right: 20px; bottom: 20px; }
@media (max-width: 760px) {
  .safe-stage { padding: 92px 14px 100px; min-height: 0; }
  .safe-phone { width: 270px; }
}

/* ---------- Comparison table ---------- */
.swipe-hint { display: none; font-size: 14px; font-weight: 700; color: var(--primary); margin: -18px 0 12px; }
.table-wrap { position: relative; }
.compare th, .compare td { vertical-align: middle; }
.compare thead th { white-space: nowrap; }
.compare thead th:first-child { border-top-left-radius: var(--radius); }
.compare tbody th { width: 26%; }
@media (max-width: 760px) {
  .swipe-hint { display: block; }
  .compare { min-width: 680px; font-size: 14px; }
  .compare th, .compare td { padding: 14px 14px; }
  .compare tbody th, .compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; width: 150px; min-width: 150px; box-shadow: 1px 0 0 var(--border); }
  .compare thead th:first-child { background: #FCFAFF; }
}

/* ---------- FAQ accordions: custom chevron, consistent hit area ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { padding: 0; transition: background-color 200ms ease, border-color 200ms ease; }
.faq details[open] { background: #fff; border-color: #C4B5FD; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; min-height: 60px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #F3EEFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 200ms ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:focus-visible { outline: 3px solid #A78BFA; outline-offset: 2px; border-radius: 18px; }
.faq details p { margin: 0; padding: 0 22px 20px; }

/* Home FAQ: heading left, questions right, aligned to the same container as every other section */
.faq-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.faq-split .section-head { margin-bottom: 0; position: sticky; top: 104px; }
.faq-split .section-head .btn { align-self: flex-start; margin-top: 8px; }
.btn-ghost { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 2px #DDD6FE; }
.btn-ghost:hover { background: #F3EEFF; color: var(--primary-dark, #6D28D9); }
@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; gap: 28px; }
  .faq-split .section-head { position: static; }
}

/* ---------- Final call to action ---------- */
.final-cta.photo-cta { background: linear-gradient(180deg, rgba(17, 5, 48, 0.55), rgba(17, 5, 48, 0.72)), url("assets/photos/scene-sunset.webp") center / cover no-repeat; padding: 120px 0; }
.final-cta.photo-cta .container { display: flex; flex-direction: column; align-items: center; }
.final-cta.photo-cta h2 { text-shadow: 0 2px 24px rgba(17, 5, 48, 0.45); max-width: 820px; }
@media (max-width: 760px) { .final-cta.photo-cta { padding: 88px 0; } }

/* ---------- Footer ---------- */
.footer-bottom { padding-top: 20px; padding-bottom: 28px; }

/* ---------- Owner band ---------- */
@media (max-width: 760px) {
  .uc-badge { left: 14px; right: 14px; bottom: 14px; }
}

/* ---------- Touch targets in the nav ---------- */
.nav a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Round 2 ---------- */
/* Hero band: cards sit diagonally so neither covers phone content */
.hero-band .uc-left { left: 24px; top: 24px; bottom: auto; }
.hero-band .uc-right { right: 24px; bottom: 24px; top: auto; }
@media (max-width: 760px) {
  .hero-band { padding-bottom: 14px; }
  .hero-band .uc-right { margin-top: -64px; left: auto; right: auto; top: auto; bottom: auto; }
}

/* Mobile: give the mock app cards room so their text doesn't squash */
@media (max-width: 760px) {
  .stack-card { padding: 22px 18px; }
  .mock-stage { padding: 24px 12px; border-radius: 26px; }
  .app-card { padding: 18px 14px; }
  .vstep { gap: 10px; }
  .vstep > div { min-width: 0; }
  .owner-copy { padding: 30px 22px; }
}

/* ===== iOS-style frosted glass ===== */
:root {
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-blur: blur(22px) saturate(180%);
  --glass-shadow: 0 18px 40px rgba(17, 5, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}

/* Header: translucent bar that blurs the page under it */
.site-header { background: rgba(250, 245, 255, 0.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgba(233, 225, 252, 0.7); }

/* Floating cards and pills over images */
.ui-card, .pill-ui, .sos-ui {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.ui-card b, .sos-ui b, .pill-ui b { color: #1E0B4B; }
.ui-card small, .sos-ui small { color: #4B3F72; }
.pill-ui em { background: rgba(255, 255, 255, 0.7); }

/* Text panels over pictures, like a sheet of frosted glass */
.band-wide::before { background: linear-gradient(90deg, rgba(20, 8, 50, 0.25) 0%, transparent 60%); }
.band-copy {
  padding: 32px 30px;
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(46, 16, 101, 0.22));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 24px 60px rgba(17, 5, 48, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 12px rgba(17, 5, 48, 0.35);
}
.band-copy .btn { text-shadow: none; }

.final-cta.photo-cta { background: linear-gradient(180deg, rgba(17, 5, 48, 0.15), rgba(17, 5, 48, 0.45)), url("assets/photos/scene-sunset.webp") center / cover no-repeat; }
.final-cta.photo-cta .container > * { position: relative; }
.final-cta.photo-cta .cta-glass {
  max-width: 860px; padding: 48px 44px; border-radius: 40px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 30px 70px rgba(17, 5, 48, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.final-cta.photo-cta .cta-glass h2 { text-shadow: 0 2px 18px rgba(17, 5, 48, 0.4); }

/* Hero band cards get the same glass */
.hero-band .ui-card { background: var(--glass-bg-strong); }

/* Safety stage cards */
.safe-stage .ui-card { background: var(--glass-bg-strong); }

/* Launch pill: glass with a soft glowing edge */
.launch-pill { background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* Fallback when the browser can't blur: keep cards readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-card, .pill-ui, .sos-ui, .hero-band .ui-card, .safe-stage .ui-card { background: rgba(255, 255, 255, 0.94); }
  .band-copy, .final-cta.photo-cta .cta-glass { background: rgba(30, 11, 75, 0.72); }
  .site-header { background: rgba(250, 245, 255, 0.96); }
}
@media (max-width: 760px) {
  .band-copy { padding: 22px 20px; border-radius: 24px; }
  .final-cta.photo-cta .cta-glass { padding: 32px 22px; border-radius: 28px; }
}

/* ===== Compact form (waitlist + PG owner) ===== */
.form-compact { padding: 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 50px rgba(46, 16, 101, 0.10); }
.photo-hero-top .form-compact, .hero-split .form-compact, #join > .form-compact { width: 100%; max-width: 440px; justify-self: end; }
.form-compact form { gap: 14px; }
.form-compact .form-head { display: flex; flex-direction: column; gap: 2px; }
.form-compact .form-title { font-size: 20px; line-height: 1.25; }
.form-compact .form-sub { font-size: 14px; color: var(--muted); }
.form-compact .field-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.form-compact .field { gap: 4px; }
.form-compact .field label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.1px; }
.form-compact .field input, .form-compact .field select { height: 44px; padding: 0 14px; font-size: 15px; border: 1px solid transparent; border-radius: 12px; background: #F4F0FB; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.form-compact .field input::placeholder { color: #A39BBE; }
.form-compact .field input:hover, .form-compact .field select:hover { background: #EFE9FA; }
.form-compact .field input:focus, .form-compact .field select:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }
.form-compact .field input[aria-invalid="true"] { border-color: var(--error); background: #FFF5F5; }
.form-compact .error { font-size: 12.5px; }
.form-compact .submit-row { grid-template-columns: 1fr auto; align-items: end; }
.form-compact .submit-row .btn { height: 44px; min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
.form-compact .btn-block { min-height: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.form-compact .pg-row { grid-template-columns: 1fr 88px; }
.form-compact .fine { font-size: 12px; margin-top: -4px; }
.form-compact .fine a { color: var(--muted); }

/* "I am" segmented chips */
.seg { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.seg-legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); background: #F4F0FB; border: 1px solid transparent; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; cursor: pointer; white-space: nowrap; }
.seg-opt:hover span { background: #EBE3FB; }
.seg-opt input:checked + span { background: var(--ink); color: #fff; }
.seg-opt input:focus-visible + span { outline: 3px solid #A78BFA; outline-offset: 2px; }
@media (max-width: 420px) {
  .form-compact .field-row { grid-template-columns: 1fr; }
  .form-compact .submit-row { grid-template-columns: 1fr; }
  .form-compact .submit-row .btn { width: 100%; }
  .form-compact .pg-row { grid-template-columns: 1fr 88px; }
}

/* ===== Proof strip (replaces boxed stat cards) ===== */
.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; padding: 36px 0; border-top: 1px solid #E4DAFB; border-bottom: 1px solid #E4DAFB; }
.proof-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.4px; }
.proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.proof-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 4px 20px; border-left: 1px solid #E4DAFB; }
.proof-stats dd { margin: 0; font-family: var(--font-head); font-size: clamp(30px, 3vw, 40px); line-height: 1; color: var(--primary); letter-spacing: -0.5px; white-space: nowrap; }
.proof-stats dt { font-size: 13.5px; line-height: 1.35; color: var(--muted); font-weight: 600; }
@media (max-width: 1000px) {
  .proof { grid-template-columns: 1fr; gap: 28px; }
  .proof-stats > div:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .proof { padding: 28px 0; }
  .proof-stats { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .proof-stats > div { padding: 2px 16px; }
  .proof-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ===== Footer: light, quiet, compact ===== */
.site-footer.ft { background: #fff; color: var(--text); padding: 56px 0 0; border-top: 1px solid #EEE7FB; }
.ft-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 40px; }
.ft-brand { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.ft-brand img { height: 33px; width: auto; display: block; }
.ft-brand p { font-size: 15px; color: var(--muted); }
.ft-launch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ft-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); flex-shrink: 0; }
.ft-links { display: flex; gap: 72px; }
.ft-links div { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.ft-links h2 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ft-links a { font-size: 15px; color: var(--ink); text-decoration: none; padding: 6px 0; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 200ms ease, color 150ms ease; }
.ft-links a:hover { color: var(--primary); background-size: 100% 1px; }
.ft-links a:focus-visible { outline: 2px solid #A78BFA; outline-offset: 3px; border-radius: 4px; }
.ft-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 0 28px; border-top: 1px solid #EEE7FB; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .site-footer.ft { padding-top: 44px; }
  .ft-top { flex-direction: column; gap: 32px; padding-bottom: 32px; }
  .ft-links { gap: 40px; }
  .ft-links div { min-width: 0; flex: 1; }
}

/* Proof strip highlight matches the old statement style */
.proof-title .hl { background: linear-gradient(90deg, #7C3AED, #DB2777); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Compact form: chips on one row on desktop, 2x2 on phones; name and phone stay side by side */
.seg { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px; }
.seg-legend { grid-column: 1 / -1; float: none; }
.seg-opt span { padding: 0 11px; font-size: 12.5px; }
@media (max-width: 480px) {
  .seg { grid-template-columns: 1fr 1fr; }
  .seg-opt span { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .form-compact .field-row:not(.submit-row) { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 340px) {
  .form-compact .field-row:not(.submit-row) { grid-template-columns: 1fr; }
}

/* ===== Safety section v3: light, editorial, numbered rows ===== */
.safety-light { background: #fff; border-top: 1px solid #EEE7FB; border-bottom: 1px solid #EEE7FB; }
.safety-light .safety-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; }
.safety-copy { display: flex; flex-direction: column; gap: 12px; }
.safety-copy h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.6px; }
.safety-copy .lead { max-width: 460px; }
.safe-rows { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; border-top: 1px solid #EEE7FB; }
.safe-rows li { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; row-gap: 4px; padding: 18px 0; border-bottom: 1px solid #EEE7FB; }
.sr-num { grid-row: span 2; font-size: 12px; font-weight: 700; color: #A78BFA; padding-top: 3px; font-variant-numeric: tabular-nums; }
.safe-rows h3 { font-size: 16px; font-weight: 800; color: var(--ink); }
.safe-rows p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.safety-light .safe-stage { min-height: 600px; box-shadow: 0 30px 60px rgba(46, 16, 101, 0.14); border-radius: 32px; }
@media (max-width: 1000px) {
  .safety-light .safety-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .safe-rows { grid-template-columns: 1fr; }
  .safe-rows li { padding: 16px 0; }
  .safety-light .safe-stage { min-height: 0; border-radius: 26px; }
}
.ft-launch { align-items: flex-start; }
.ft-dot { margin-top: 5px; }
@media (max-width: 760px) { .ft-top { padding-bottom: 28px; } .ft-links div { gap: 0; } }

/* ===== Form v3: clean stack, custom dropdown ===== */
.form-compact { padding: 26px; }
.form-compact form { gap: 16px; }
.form-compact .form-head { gap: 4px; margin-bottom: 2px; }
.form-compact .form-title { font-size: 22px; }
.form-compact .field label, .seg-legend { font-size: 13px; font-weight: 700; color: #4B3F72; }
.seg-legend { margin-bottom: 8px; }

/* Custom select: no native arrow, our own chevron, same look as inputs */
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5FA0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform 150ms ease; }
.select-wrap:focus-within::after { transform: rotate(180deg); }
.form-compact .select-wrap select, .select-wrap select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0 44px 0 14px; cursor: pointer; text-overflow: ellipsis; }
.select-wrap select::-ms-expand { display: none; }

.form-compact .btn-block { height: 48px; min-height: 48px; font-size: 15.5px; margin-top: 2px; }
.form-compact .fine { margin-top: -6px; text-align: center; }
/* Role chips: tidy 2x2 grid at every size */
.seg { grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-opt span { width: 100%; justify-content: center; height: 38px; font-size: 13px; }

/* ===== Hero phones v4: native-looking iOS screens ===== */
.hp { border-radius: 44px; padding: 8px; background: #0B0618; box-shadow: 0 40px 80px rgba(17, 5, 48, 0.32), inset 0 0 0 1.5px #2A2140; }
.hp-screen.ios { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; background: #F6F5F9; border-radius: 36px; padding: 0 14px 12px; gap: 10px; color: #111; position: relative; }
.ios-sb { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 10px; font-size: 13px; font-weight: 600; color: #111; letter-spacing: -0.2px; }
.ios-island { width: 78px; height: 22px; border-radius: 999px; background: #0B0618; }
.ios-sb-r { display: inline-flex; gap: 5px; align-items: center; color: #111; }
.ios-sb-r svg { height: 10px; width: auto; fill: currentColor; }
.ios-nav { display: flex; flex-direction: column; gap: 1px; padding: 2px 2px 0; }
.ios-nav small { font-size: 11px; font-weight: 600; color: #8A8696; text-transform: uppercase; letter-spacing: 0.4px; }
.ios-nav h4 { font-family: inherit; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; color: #111; line-height: 1.1; }
.ios-bar { height: 4px; border-radius: 4px; background: #E6E3EE; overflow: hidden; }
.ios-bar span { display: block; height: 100%; background: #7C3AED; border-radius: 4px; }
.ios-group { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.ios-row, .ios-person { display: flex; align-items: center; gap: 10px; padding: 10px 12px; position: relative; }
.ios-row + .ios-row::before, .ios-person + .ios-person::before { content: ""; position: absolute; top: 0; right: 0; left: 50px; height: 0.5px; background: #E4E1EA; }
.ios-ri { width: 28px; height: 28px; border-radius: 8px; background: #F1ECFD; color: #7C3AED; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ios-ri .ico { width: 16px; height: 16px; }
.ios-rt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ios-rt b { font-size: 13.5px; font-weight: 600; color: #111; letter-spacing: -0.2px; display: flex; align-items: center; gap: 4px; }
.ios-rt small { font-size: 11.5px; color: #8A8696; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-ok { width: 18px; height: 18px; flex-shrink: 0; fill: #22A559; }
.ios-rt b .ios-ok { width: 13px; height: 13px; fill: #7C3AED; }
.ios-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.ios-done > .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #E8F7EE; color: #22A559; flex-shrink: 0; }
.ios-done b { display: block; font-size: 13.5px; font-weight: 600; color: #111; }
.ios-done small { display: block; font-size: 11.5px; color: #8A8696; }
.ios-search { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; background: #EAE8F0; color: #8A8696; font-size: 13px; }
.ios-search .ico { width: 15px; height: 15px; }
.ios-filters { display: flex; gap: 6px; overflow: hidden; }
.ios-filters span { flex-shrink: 0; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #fff; color: #3B3550; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.ios-filters .on { background: #111; color: #fff; box-shadow: none; }
.ios-listing { display: flex; flex-direction: column; gap: 4px; }
.ios-photo { position: relative; height: 170px; border-radius: 16px; overflow: hidden; }
.ios-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ios-tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #fff; padding: 4px 8px 4px 6px; border-radius: 999px; background: rgba(17, 10, 30, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ios-tag .ico { width: 12px; height: 12px; color: #6EE7A0; }
.ios-lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.ios-lrow b { font-size: 14px; font-weight: 600; color: #111; letter-spacing: -0.2px; }
.ios-price { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; }
.ios-price small { font-size: 11px; font-weight: 500; color: #8A8696; }
.ios-meta { font-size: 11.5px; color: #8A8696; }
.ios-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 8px 10px 14px; background: rgba(250, 249, 252, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 0.5px solid #E4E1EA; }
.ios-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #9A96A6; }
.ios-tabs .ico { width: 20px; height: 20px; }
.ios-tabs i { font-style: normal; font-size: 10px; font-weight: 500; }
.ios-tabs .on { color: #7C3AED; }
.ios-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.ios-av.t1 { background: linear-gradient(140deg, #F9A8D4, #C084FC); }
.ios-av.t2 { background: linear-gradient(140deg, #FCD34D, #FB923C); }
.ios-av.t3 { background: linear-gradient(140deg, #6EE7B7, #38BDF8); }
.ios-score { font-size: 12px; font-weight: 700; color: #15803D; background: #E8F7EE; padding: 3px 7px; border-radius: 999px; }
.ios-note { font-size: 11.5px; color: #8A8696; line-height: 1.4; padding: 0 4px; }
.ios-btn { margin-top: auto; text-align: center; font-size: 14px; font-weight: 600; color: #fff; background: #7C3AED; border-radius: 12px; padding: 11px; }
.hp-center .hp-screen.ios { padding-bottom: 70px; }
/* iOS screens: nothing shrinks or inherits site margins */
.hp-screen.ios > * { flex-shrink: 0; }
.hp-screen.ios h4 { margin: 0; }
.hp-screen.ios { gap: 10px; }
.ios-nav { padding-top: 4px; }
.ios-filters span { line-height: 1.2; }
.ios-person .ios-rt b { white-space: nowrap; }
.hp-left .ios-rt small, .hp-right .ios-rt small { max-width: 100%; }

/* Safety visual: clean product shot, no painted backdrop */
.safe-stage.safe-clean { background: radial-gradient(420px 320px at 70% 20%, rgba(196, 181, 253, 0.55), transparent 70%), radial-gradient(380px 300px at 20% 90%, rgba(167, 243, 208, 0.45), transparent 70%), #F5F2FC; box-shadow: none; border: 1px solid #EEE7FB; padding: 72px 24px; min-height: 0; }
.safe-clean::before { display: none; }
.safe-hp { width: 272px; position: relative; z-index: 2; animation: float 7s ease-in-out infinite; }
.safe-hp .hp-screen.ios { height: 540px; }
.ios-map { position: relative; height: 170px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.ios-map .map-svg { width: 100%; height: 100%; display: block; }
.ios-eta { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 600; color: #111; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ios-sos { text-align: center; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #F04444, #DC2626); border-radius: 12px; padding: 11px; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28); margin-top: auto; }
.ios-btn-soft { margin-top: 0; background: #EAE8F0; color: #111; }
.safe-clean .sc-a { left: 20px; top: 20px; }
.safe-clean .sc-b { right: 20px; bottom: 20px; }
@media (max-width: 600px) {
  .safe-stage.safe-clean { padding: 88px 12px 92px; }
  .safe-hp { width: 256px; }
}
@media (prefers-reduced-motion: reduce) { .safe-hp { animation: none; } }
.ios-lrow b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.hp-left, .hp-right { width: 248px; }
.safe-stage.safe-clean { padding: 100px 24px 84px; }

/* ===== Hero: no dead space above the headline ===== */
.photo-hero { padding-top: 40px; }
.photo-hero-top { align-items: center; }
@media (max-width: 760px) { .photo-hero { padding-top: 28px; } }

/* ===== Simple waitlist form ===== */
.form-simple { width: 100%; max-width: 420px; justify-self: end; padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 60px rgba(46, 16, 101, 0.10), 0 2px 6px rgba(46, 16, 101, 0.04); }
.form-simple form { display: flex; flex-direction: column; gap: 14px; }
.form-simple .form-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.form-simple .form-title { font-size: 22px; line-height: 1.2; }
.form-simple .form-sub { font-size: 14.5px; color: var(--muted); }

/* Dropdowns */
.dd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dd { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd-label { font-size: 13px; font-weight: 700; color: #4B3F72; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 48px; padding: 0 12px 0 14px; border-radius: 14px; border: 1px solid #E7E0F7; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.dd-btn:hover { border-color: #C4B5FD; }
.dd-btn:focus-visible, .dd.open .dd-btn { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14); }
.dd-value { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #7C6FA8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms ease; }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: 280px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(231, 224, 247, 0.9); box-shadow: 0 20px 50px rgba(30, 11, 75, 0.18), 0 2px 8px rgba(30, 11, 75, 0.06); animation: ddIn 160ms cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
.dd:last-child .dd-list { left: auto; right: 0; transform-origin: top right; }
.dd-list [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; outline: none; white-space: nowrap; }
.dd-list [role="option"]:hover, .dd-list [role="option"]:focus { background: #F3EEFF; }
.dd-list [role="option"][aria-selected="true"] { color: var(--primary); }
.dd-tick { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dd-list [aria-selected="true"] .dd-tick { opacity: 1; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-list { animation: none; } }

/* Phone/email + Join in one row */
.join-row { display: flex; align-items: center; gap: 6px; height: 56px; padding: 5px 5px 5px 16px; border-radius: 16px; background: #fff; border: 1px solid #E7E0F7; transition: border-color 150ms ease, box-shadow 150ms ease; }
.join-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14); }
.join-row input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink); padding: 0; }
.join-row input::placeholder { color: #A39BBE; }
.join-row:has(input[aria-invalid="true"]) { border-color: var(--error); }
.join-row .btn { height: 46px; min-height: 46px; padding: 0 22px; border-radius: 12px; font-size: 15px; flex-shrink: 0; }
.form-simple .error { margin-top: 6px; font-size: 13px; }
.form-simple .fine { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 0; }
.form-simple .fine .ico { width: 14px; height: 14px; }
.form-simple .fine a { color: var(--muted); }
@media (max-width: 380px) { .dd-row { grid-template-columns: 1fr; } .dd:last-child .dd-list { left: 0; right: auto; } }
@media (max-width: 480px) {
  .form-simple { padding: 20px; }
  .dd-btn { font-size: 14.5px; padding: 0 10px 0 12px; }
  .dd-row { gap: 8px; }
}
.photo-hero-top, .form-simple { position: relative; z-index: 6; }
@media (max-width: 480px) { .dd-row { grid-template-columns: 1.25fr 1fr; } .dd-btn { font-size: 14px; } }
/* PG owner form follows the same field style as the waitlist form */
.form-compact { max-width: 420px; padding: 24px; background: rgba(255, 255, 255, 0.82); border: 1px solid #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 60px rgba(46, 16, 101, 0.10), 0 2px 6px rgba(46, 16, 101, 0.04); }
.form-compact .field label { font-size: 13px; color: #4B3F72; }
.form-compact .field input { height: 48px; background: #fff; border: 1px solid #E7E0F7; border-radius: 14px; }
.form-compact .field input:hover { background: #fff; border-color: #C4B5FD; }
.form-compact .field input:focus { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14); }
.form-compact .btn-block { height: 50px; min-height: 50px; border-radius: 14px; }

/* ===== Safety v4: SOS for every situation ===== */
.sos-head { max-width: 640px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 12px; }
.sos-head h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.6px; }
.sos-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.sos-tabs { display: flex; flex-direction: column; gap: 8px; }
.sos-tab { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.sos-tab:hover { background: #FAF7FF; }
.sos-tab[aria-selected="true"] { background: #fff; border-color: #E7E0F7; box-shadow: 0 12px 32px rgba(46, 16, 101, 0.08); }
.sos-tab:focus-visible { outline: 3px solid #A78BFA; outline-offset: 2px; }
.st-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #F3EEFF; color: #7C3AED; transition: background-color 200ms ease, color 200ms ease; }
.st-ico .ico { width: 20px; height: 20px; }
.sos-emergency .st-ico { background: #FEECEC; color: #DC2626; }
.sos-tab[aria-selected="true"] .st-ico { background: #7C3AED; color: #fff; }
.sos-emergency[aria-selected="true"] .st-ico { background: #DC2626; }
.st-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-txt b { font-size: 16px; font-weight: 800; }
.st-txt small { font-size: 14px; color: var(--muted); }
.st-txt em { font-style: normal; font-size: 14px; line-height: 1.5; color: #3B2F63; display: none; margin-top: 6px; }
.sos-tab[aria-selected="true"] .st-txt em { display: block; animation: ddIn 220ms ease; }
.sos-stage { position: relative; display: flex; justify-content: center; padding: 48px 24px; border-radius: 32px; border: 1px solid #EEE7FB; background: radial-gradient(420px 320px at 70% 15%, rgba(196, 181, 253, 0.55), transparent 70%), radial-gradient(360px 280px at 20% 90%, rgba(167, 243, 208, 0.45), transparent 70%), #F5F2FC; }
.sos-hp { width: 280px; }
.sos-panel .hp-screen.ios { height: 560px; animation: ddIn 260ms ease; }
.sos-panel[hidden] { display: none; }

/* Check-in timer */
.ios-ring { position: relative; width: 168px; height: 168px; margin: 6px auto 4px; }
.ios-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ios-ring circle { fill: none; stroke-width: 10; }
.ios-ring .r-bg { stroke: #E6E3EE; }
.ios-ring .r-fg { stroke: #7C3AED; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 96; }
.ios-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ios-ring b { font-size: 32px; font-weight: 700; letter-spacing: -1px; color: #111; font-variant-numeric: tabular-nums; }
.ios-ring small { font-size: 11.5px; color: #8A8696; }
.ios-btn-green { background: #16A34A; }

/* Quiet alert */
.ios-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.ios-sent-ico { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F3EEFF; color: #7C3AED; margin-bottom: 4px; }
.ios-sent-ico .ico { width: 24px; height: 24px; }
.ios-sent b { font-size: 15px; font-weight: 700; color: #111; }
.ios-sent small { font-size: 12px; color: #8A8696; }

/* Fake call */
.sos-scr-call { padding: 0; background: #1B1530; }
.ios-call { display: flex; flex-direction: column; height: 100%; padding: 0 14px 28px; background: linear-gradient(180deg, #3B2A6B 0%, #1B1530 70%); color: #fff; border-radius: 36px; }
.ios-call .ios-sb, .ios-call .ios-sb-r { color: #fff; }
.ios-call .ios-island { background: #000; }
.call-who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 56px; }
.call-av { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 600; background: linear-gradient(140deg, #F9A8D4, #C084FC); margin-bottom: 10px; }
.call-who b { font-size: 28px; font-weight: 500; letter-spacing: -0.5px; }
.call-who small { font-size: 14px; opacity: 0.7; }
.call-actions { margin-top: auto; display: flex; justify-content: space-around; }
.call-actions span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.call-actions span > .ico { width: 64px; height: 64px; padding: 19px; border-radius: 50%; color: #fff; fill: none; }
.c-dec > .ico { background: #EF4444; transform: rotate(135deg); }
.c-acc > .ico { background: #22C55E; }
.call-actions i { font-style: normal; font-size: 13px; opacity: 0.85; }

/* Silent SOS */
.ios-press { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 12px 22px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.press-phone { position: relative; width: 62px; height: 112px; border-radius: 14px; border: 3px solid #1B1530; background: #F1ECFD; }
.press-btn { position: absolute; right: -7px; top: 26px; width: 4px; height: 22px; border-radius: 2px; background: #7C3AED; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2); }
.press-dots { display: flex; gap: 6px; }
.press-dots i { width: 9px; height: 9px; border-radius: 50%; background: #7C3AED; animation: pressDot 2.2s infinite; }
.press-dots i:nth-child(2) { animation-delay: .2s; } .press-dots i:nth-child(3) { animation-delay: .4s; } .press-dots i:nth-child(4) { animation-delay: .6s; } .press-dots i:nth-child(5) { animation-delay: .8s; }
@keyframes pressDot { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }
.ios-press small { font-size: 12.5px; color: #3B3550; font-weight: 600; }

/* Emergency */
.sos-scr-emergency { padding: 0; }
.ios-red { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 0 14px 14px; border-radius: 36px; background: linear-gradient(180deg, #DC2626, #B91C1C); color: #fff; }
.ios-red .ios-sb, .ios-red .ios-sb-r, .ios-red .ios-nav h4 { color: #fff; }
.ios-red .ios-nav small { color: rgba(255, 255, 255, 0.75); }
.ios-red .ios-map { box-shadow: none; }
.red-row { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); }
.red-row b { font-size: 14px; }
.red-row small { font-size: 12px; opacity: 0.85; }
.ios-btn-white { margin-top: auto; background: #fff; color: #B91C1C; font-weight: 700; }

/* Other safety features */
.safe-also { list-style: none; margin: 40px 0 0; padding: 28px 0 0; border-top: 1px solid #EEE7FB; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.safe-also li { display: flex; gap: 12px; align-items: flex-start; }
.safe-also li > .ico { width: 20px; height: 20px; color: #7C3AED; flex-shrink: 0; margin-top: 2px; }
.safe-also b { display: block; font-size: 15px; color: var(--ink); }
.safe-also small { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1000px) {
  .sos-wrap { grid-template-columns: 1fr; gap: 28px; }
  .safe-also { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sos-head { margin-bottom: 24px; }
  .sos-tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .sos-tabs::-webkit-scrollbar { display: none; }
  .sos-tab { flex: 0 0 auto; width: auto; align-items: center; padding: 8px 14px 8px 8px; border-radius: 999px; border-color: #E7E0F7; background: #fff; scroll-snap-align: start; }
  .st-ico { width: 32px; height: 32px; border-radius: 50%; }
  .st-ico .ico { width: 17px; height: 17px; }
  .st-txt small, .sos-tab[aria-selected="true"] .st-txt em { display: none; }
  .st-txt b { font-size: 14px; white-space: nowrap; }
  .sos-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); box-shadow: none; }
  .sos-tab[aria-selected="true"] .st-txt b { color: #fff; }
  .sos-stage { padding: 28px 12px; border-radius: 26px; }
  .sos-hp { width: 262px; }
  .sos-panel .hp-screen.ios { height: 530px; }
  .safe-also { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .press-dots i { animation: none; opacity: 1; } }
.hp-screen.ios.sos-scr-call, .hp-screen.ios.sos-scr-emergency { padding: 0; background: transparent; }
.ios-call, .ios-red { border-radius: 36px; }
.sos-caps { display: none; }
@media (max-width: 1000px) { .sos-wrap { gap: 16px; } }
@media (max-width: 600px) {
  .sos-caps { display: block; min-height: 66px; }
  .sos-caps p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; }
  .sos-caps b { color: var(--ink); }
}

/* ===== Step mockups: iOS cards ===== */
.ios-stage { display: flex; justify-content: center; }
.ios-stage .behind-card { display: none; }
.ios-card.hp-screen.ios { width: 100%; max-width: 330px; height: auto; border-radius: 28px; padding: 18px 14px 14px; gap: 10px; box-shadow: 0 24px 50px rgba(46, 16, 101, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; }
.ios-card .ios-photo { height: 150px; }
.ios-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ios-tags span { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #fff; color: #3B3550; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.ios-grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.ios-row-sm { padding: 9px 12px; }
.ios-row-sm .ios-rt b { font-size: 12.5px; font-weight: 500; }
.ios-row-sm .ios-ok { width: 16px; height: 16px; }
.ios-grid2 .ios-row + .ios-row::before { left: 12px; }
.ios-grid2 .ios-row:nth-child(2)::before { display: none; }

/* ===== Mobile polish ===== */
.m-cta { display: none; }
@media (max-width: 760px) {
  .m-cta { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 12px 30px rgba(30, 11, 75, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.9); animation: ddIn 220ms ease; }
  .m-cta[hidden] { display: none; }
  .m-cta .btn { height: 48px; min-height: 48px; border-radius: 13px; font-size: 16px; }
  .ft-links a { padding: 11px 0; }
  .ft-brand > a { align-self: flex-start; }
  .more-link a, .feature-copy .more-link a { display: inline-flex; align-items: center; min-height: 44px; }
  .final-cta.photo-cta h2 { font-size: clamp(28px, 8vw, 34px); }
  .ios-card.hp-screen.ios { max-width: 100%; }
  .mock-stage.ios-stage { padding: 20px 12px; }
  .photo-hero h1 { font-size: clamp(36px, 10.5vw, 44px); }
  .join-row .btn { padding: 0 16px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 360px) {
  .join-row { height: auto; flex-wrap: wrap; padding: 5px; }
  .join-row input { height: 46px; padding: 0 11px; flex-basis: 100%; }
  .join-row .btn { width: 100%; }
}
@media (max-width: 760px) { .section.section-tight { padding-top: 16px; padding-bottom: 56px; } }
@media (max-width: 760px) { a.more-link { display: inline-flex; align-items: center; min-height: 44px; } .ft-brand > a { padding: 6px 0; } }
.trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* Form hides itself after a successful sign-up */
form[hidden], .form-simple form[hidden], .form-compact form[hidden] { display: none !important; }
.form-card .success:not([hidden]) { display: flex; gap: 14px; align-items: flex-start; }