/* =============================================================
   ConnectPD Landing Phone-Demo — shared design system
   Matches the real iOS app (Slate · Helvetia Pure · Inter).
   Source viewport 390×832, CSS-scaled into the .iphone frame.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0&display=swap');

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --ink: #191c1d;
  --ink-2: #5b6b73;
  --ink-3: #8a97a0;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-grad: linear-gradient(150deg, #1e293b 0%, #0f172a 100%);
  --chip: #e7edf3;
  --chip-ink: #334155;
  --line: #e6e9ec;
  --success: #0ea47a;
  --radius: 18px;
  --shadow: 0 6px 22px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:390px; height:832px; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
.ms { font-family:'Material Symbols Outlined'; font-weight:400; font-style:normal;
  line-height:1; letter-spacing:normal; display:inline-block;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; }

/* status bar */
.statusbar { height:46px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:14px 26px 0; font-size:14px; font-weight:600; color:var(--ink); }
.statusbar .icons { display:flex; align-items:center; gap:6px; font-size:16px; }

/* account switcher chip */
.account { padding:0 24px; margin-top:-4px; font-size:13.5px; color:var(--ink); font-weight:600;
  display:flex; align-items:center; gap:1px; }
.account .ms { font-size:18px; }

/* app top bar */
.topbar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:8px 18px 10px; }
.topbar .brand { font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--slate-800); }
.topbar .brand .dim { color:#93a6a6; }
.avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #fff;
  background:#dbe4ee; display:flex; align-items:center; justify-content:center;
  color:var(--slate-800); font-weight:700; font-size:13px; box-shadow:0 2px 6px rgba(15,23,42,.12); }
.avatar .ms { font-size:24px; color:#7c8ba0; }
.iconbtn { width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  color:var(--slate-800); font-size:25px; }

/* scroll body */
.screen { flex:1 1 auto; overflow:hidden; padding:0 18px; }

/* hero */
.hero { position:relative; background:var(--slate-grad); border-radius:22px;
  padding:24px 22px 26px; color:#fff; overflow:hidden; box-shadow:0 14px 34px rgba(15,23,42,.28); }
.hero h1 { font-size:27px; font-weight:800; letter-spacing:-.03em; margin-bottom:6px; }
.hero p { font-size:14px; color:#c7d2e0; font-weight:500; }
.hero .cta { margin-top:20px; font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
.hero .wm { position:absolute; right:-38px; bottom:-54px; width:214px; height:214px; opacity:.08; pointer-events:none; }

/* generic card */
.card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.nextstep { display:flex; align-items:center; gap:14px; padding:16px 16px; margin-top:14px; }
.nextstep .label { font-size:11px; color:var(--ink-2); font-weight:600; }
.nextstep .title { font-size:15px; font-weight:700; }
.nextstep .sub { font-size:12px; color:var(--ink-3); }

.icon-circle { width:46px; height:46px; border-radius:14px; background:var(--chip);
  display:flex; align-items:center; justify-content:center; color:var(--chip-ink); font-size:24px; flex:0 0 auto; }
.icon-circle.round { border-radius:50%; }

.section-title { font-size:18px; font-weight:700; letter-spacing:-.02em; margin:22px 2px 12px; }

/* action grid */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.action { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 14px; display:flex; flex-direction:column; align-items:center; gap:13px; cursor:pointer;
  text-align:center; transition:transform .12s ease; }
.action:active { transform:scale(.97); }
.action .icon-circle { width:54px; height:54px; border-radius:50%; background:#dbe4ee; }
.action .name { font-size:15px; font-weight:600; }

/* tab bar */
.tabbar { flex:0 0 auto; height:78px; background:var(--surface); border-top:1px solid var(--line);
  display:flex; align-items:flex-start; justify-content:space-around; padding:11px 8px 0; position:relative; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:600;
  color:var(--ink-3); width:64px; }
.tab.active { color:var(--slate-800); }
.tab .ms { font-size:25px; }
.fab { position:absolute; left:50%; top:-22px; transform:translateX(-50%); width:60px; height:60px;
  border-radius:50%; background:var(--slate-grad); box-shadow:0 10px 22px rgba(15,23,42,.34);
  display:flex; align-items:center; justify-content:center; }
.fab img { width:34px; height:34px; }

/* ---- modal sheet presentation (wizard presented over the dimmed dashboard) ---- */
body.modal { background:#c8ccd1; }
.peek { flex:0 0 auto; }
.peek .statusbar, .peek .account { opacity:.5; }
.sheet { flex:1 1 auto; background:var(--bg); border-radius:24px 24px 0 0; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 -6px 26px rgba(15,23,42,.13); }

/* ---- wizard sheet ---- */
.sheet-head { flex:0 0 auto; padding:14px 16px 4px; }
.sheet-bar { display:flex; align-items:center; justify-content:space-between; height:44px; }
.sheet-bar .title { font-size:16px; font-weight:700; }
.circle-btn { width:36px; height:36px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:20px; }
.progress { display:flex; gap:6px; margin:6px 2px 2px; }
.progress span { height:5px; border-radius:3px; flex:1; background:var(--surface-2); }
.progress span.on { background:var(--slate-800); }

.lead { font-size:21px; font-weight:800; letter-spacing:-.02em; margin:14px 2px 4px; }
.q { font-size:15px; font-weight:600; color:var(--ink); margin:16px 2px 8px; }
.seg { display:flex; background:var(--surface-2); border-radius:14px; padding:4px; }
.seg div { flex:1; text-align:center; padding:11px; border-radius:11px; font-size:14px; font-weight:600; color:var(--ink-2); }
.seg div.on { background:var(--slate-800); color:#fff; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; margin:18px 2px 8px; }

.banner { display:flex; gap:10px; align-items:flex-start; background:#eaeef3; color:var(--chip-ink);
  border-radius:14px; padding:12px 14px; font-size:13px; line-height:1.4; margin-top:6px; }
.banner .ms { font-size:19px; color:var(--slate-800); }

.searchbar { display:flex; align-items:center; gap:10px; background:var(--surface-2); border-radius:14px;
  padding:13px 15px; color:var(--ink-3); font-size:14px; margin-top:14px; }

.pills { display:flex; gap:9px; margin-top:14px; }
.pill { padding:9px 17px; border-radius:999px; background:var(--surface-2); color:var(--chip-ink);
  font-size:13px; font-weight:600; }
.pill.active { background:var(--slate-800); color:#fff; }
.selectall { display:flex; align-items:center; gap:7px; margin:15px 4px 2px; font-size:13px; font-weight:600; color:var(--slate-800); }
.selectall .ms { font-size:18px; }

.addr-card { display:flex; align-items:center; gap:14px; padding:16px; }
.addr-card .t { font-size:15px; font-weight:700; }
.addr-card .s { font-size:13px; color:var(--ink-2); }
.check { width:24px; height:24px; border-radius:50%; background:var(--slate-800); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px; margin-left:auto; flex:0 0 auto; }
.radio { width:24px; height:24px; border-radius:50%; border:2px solid #cbd5e1; margin-left:auto; flex:0 0 auto; }

.fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.field { background:var(--surface-2); border-radius:12px; padding:9px 13px; }
.field.full { grid-column:1 / -1; }
.field label { display:block; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.field .val { font-size:15px; font-weight:500; color:var(--ink); margin-top:2px; }

.co-card { display:flex; align-items:center; gap:14px; padding:13px 16px; margin-top:10px; }
.co-logo { width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:7px; flex:0 0 auto; overflow:hidden; }
.co-logo img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.co-card .name { font-size:15px; font-weight:600; }

/* review summary rows */
.summary { padding:6px 4px; margin-top:8px; }
.srow { display:flex; gap:14px; padding:10px 14px; align-items:flex-start; }
.srow + .srow { border-top:1px solid var(--line); }
.srow .ms { font-size:20px; color:var(--slate-800); margin-top:1px; }
.srow .k { font-size:11px; color:var(--ink-3); font-weight:600; }
.srow .v { font-size:15px; font-weight:600; }

/* bottom action */
.foot { flex:0 0 auto; padding:14px 18px 24px; }
.btn { width:100%; border:none; border-radius:16px; padding:16px; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-family:inherit;
  transition:transform .12s ease; }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--slate-800); color:#fff; box-shadow:0 10px 22px rgba(15,23,42,.18); }
.btn-ghost { background:var(--surface-2); color:var(--ink); }

/* success */
.success-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 34px; }
.success-badge { width:108px; height:108px; border-radius:50%; background:rgba(14,164,122,.12);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.success-badge .inner { width:74px; height:74px; border-radius:50%; background:var(--success);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:42px; }
.success-wrap h1 { font-size:26px; font-weight:800; letter-spacing:-.02em; }
.success-wrap p { font-size:15px; color:var(--ink-2); margin-top:10px; line-height:1.5; }