/* ================= Phone frames + app mock-ups =================
   Sizes are in cqi (percent of the screen width), so every phone scales
   as one piece, like a real screenshot. */

.dev { margin: 0; position: relative; }
.dev-frame {
  position: relative; padding: 2.6%;
  border-radius: 15% / 7.2%;
  background: linear-gradient(150deg, #4a5366 0%, #1b2130 22%, #2a3142 55%, #11151f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset, 0 40px 70px -34px rgba(0,0,0,.85), 0 12px 24px -12px rgba(0,0,0,.5);
}
.dev-android .dev-frame { border-radius: 11% / 5.4%; background: linear-gradient(150deg, #3b4150, #151923 30%, #22283a 70%, #0f1219); }
/* Side buttons */
.dev-frame::before, .dev-frame::after { content: ""; position: absolute; width: 1.4%; border-radius: 2px; background: #2b3244; }
.dev-frame::before { right: -1.2%; top: 22%; height: 11%; }
.dev-frame::after { left: -1.2%; top: 18%; height: 6%; box-shadow: 0 3.4em 0 #2b3244; }
.dev-android .dev-frame::after { display: none; }

.dev-screen {
  position: relative; aspect-ratio: 9 / 19.5; overflow: hidden;
  container-type: inline-size;
  border: 0; border-radius: 12.5% / 5.8%;
  background: var(--pa-bg, #f2f2f7); color: #11131a;
}
.dev-android .dev-screen { border-radius: 8.5% / 3.9%; }
/* Glass sheen */
.dev-screen::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 28%); }
.dev-island { position: absolute; z-index: 7; top: 2.4cqi; left: 50%; width: 30cqi; height: 8.4cqi; margin-left: -15cqi; border-radius: 99px; background: #05070b; }
.dev-punch { position: absolute; z-index: 7; top: 3cqi; left: 50%; width: 4.2cqi; height: 4.2cqi; margin-left: -2.1cqi; border-radius: 50%; background: #05070b; }
.dev-status { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; height: 11cqi; padding: 0 7cqi; font: 600 3.6cqi/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dev-ios .dev-status { padding: 0 9cqi 0 10cqi; }
.dev-icons { display: flex; gap: 1.2cqi; align-items: center; width: auto; height: auto; background: none; opacity: 1; border-radius: 0; }
.dev-icons::before { content: ""; width: 5cqi; height: 3cqi; background: linear-gradient(90deg, currentColor 0 20%, transparent 20% 27%, currentColor 27% 47%, transparent 47% 54%, currentColor 54% 74%, transparent 74% 81%, currentColor 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.dev-icons::after { content: ""; width: 6.4cqi; height: 3cqi; border-radius: .8cqi; border: .5cqi solid currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%); background-clip: content-box; padding: .35cqi; box-sizing: border-box; }
.dev figcaption { text-align: center; font-size: .78rem; color: #8792a8; margin-top: 10px; }

/* ---------- App shell ---------- */
.pa {
  --brand-soft: color-mix(in srgb, var(--brand) 14%, #fff);
  --brand-tint: color-mix(in srgb, var(--brand) 5%, #fff);
  --ink: #11131a; --ink-2: #5b606b; --line: #e3e3e8; --card: #fff;
  position: absolute; inset: 11cqi 0 0; display: flex; flex-direction: column;
  font: 400 3.9cqi/1.3 -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  color: var(--ink); letter-spacing: -.01em;
}
.pa[data-os="android"] { font-family: Roboto, "Google Sans", system-ui, "Segoe UI", sans-serif; letter-spacing: 0; background: var(--brand-tint); }
.dev-ios .dev-screen { --pa-bg: #f2f2f7; }
.dev-android .dev-screen { --pa-bg: #fbfbfd; }
.pa svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pa p { margin: 0; }
.pa button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; letter-spacing: inherit; }
.pa-scroll { flex: 1; overflow: hidden; padding: 0 5cqi; display: flex; flex-direction: column; gap: 2.6cqi; }

/* Header */
.pa-head { display: flex; flex-direction: column; gap: .6cqi; padding-top: 1cqi; }
.pa-bar { display: flex; align-items: center; gap: 2.4cqi; }
.pa-mark { width: 7.4cqi; height: 7.4cqi; border-radius: 2.2cqi; display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 3.8cqi/1 system-ui, sans-serif; }
.pa-name { font-weight: 600; font-size: 3.6cqi; }
.pa-bar-i { margin-left: auto; width: 7cqi; height: 7cqi; padding: 1.4cqi; border-radius: 50%; background: #e4e4ea; color: #3a3d46; }
.pa-greet { margin-top: 2.6cqi !important; color: var(--ink-2); font-size: 3.5cqi; }
.pa-title { font-weight: 750; font-size: 8.4cqi; line-height: 1.05; letter-spacing: -.03em; }
.pa[data-os="android"] .pa-bar { height: 10cqi; }
.pa[data-os="android"] .pa-bar-i { background: none; padding: 1cqi; }
.pa[data-os="android"] .pa-title { font-weight: 400; font-size: 7.6cqi; letter-spacing: -.01em; }

/* Hero card */
.pa-hero { display: flex; align-items: center; gap: 3cqi; padding: 3.4cqi; border-radius: 4.2cqi; background: var(--brand-soft); }
.pa[data-os="android"] .pa-hero { border-radius: 5cqi; }
.pa-hero-av { flex: none; width: 11cqi; height: 11cqi; padding: 2.4cqi; border-radius: 50%; background: var(--brand); color: #fff; }
.pa-hero-av svg { stroke-width: 1.9; }
.pa-hero-text { min-width: 0; flex: 1; }
.pa-hero-t { font-weight: 650; font-size: 4.1cqi; }
.pa-hero-s { color: var(--ink-2); font-size: 3.3cqi; }
.pa-hero-a { font-weight: 600; font-size: 3.4cqi; color: var(--brand); }
.pa-hero-photos { flex-wrap: wrap; }
.pa-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8cqi; width: 100%; }
.pa-thumb { aspect-ratio: 1; border-radius: 2.4cqi; }
.pa-thumb-1 { background: linear-gradient(160deg, #a9c0d6 0 38%, #7b5a44 38% 44%, #b98b62 44% 70%, #6c4d39 70%); }
.pa-thumb-2 { background: linear-gradient(180deg, #bcd2e4 0 30%, #9c4f3c 30% 36%, #b8634c 36% 52%, #9c4f3c 52% 58%, #b8634c 58%); }
.pa-thumb-3 { background: linear-gradient(90deg, transparent 46%, #f4f1ea 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, #f4f1ea 46% 54%, transparent 54%), linear-gradient(160deg, #9fc3dc, #5f8fb3); box-shadow: inset 0 0 0 1.4cqi #f4f1ea; }
.pa-thumb-add { display: grid; place-items: center; border: .5cqi dashed color-mix(in srgb, var(--brand) 55%, #fff); color: var(--brand); padding: 3cqi; }
.pa-hero-stamps { display: block; padding: 4cqi; color: #fff; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--brand) 70%, #fff) 0%, var(--brand) 55%, color-mix(in srgb, var(--brand) 75%, #000) 100%); box-shadow: 0 3cqi 6cqi -3cqi color-mix(in srgb, var(--brand) 70%, transparent); }
.pa-hero-row { display: flex; justify-content: space-between; align-items: baseline; }
.pa-card-name { font-weight: 700; font-size: 4.2cqi; }
.pa-card-count { font-size: 3.3cqi; opacity: .85; }
.pa-stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; margin: 3.2cqi 0 2.6cqi; }
.pa-stamp { aspect-ratio: 1; border-radius: 50%; padding: 1.9cqi; border: .45cqi dashed rgba(255,255,255,.55); color: rgba(255,255,255,.55); }
.pa-stamp.is-on { background: #fff; border: 0; color: var(--brand); }
.pa-stamp.is-free { border-style: solid; color: #fff; }
.pa-card-note { font-size: 3.3cqi; opacity: .92; }

/* Section labels */
.pa-label { margin-top: 1.4cqi !important; font-weight: 650; font-size: 4.2cqi; }
.pa[data-os="ios"] .pa-label { font-size: 3.3cqi; font-weight: 500; color: var(--ink-2); margin-bottom: -1.2cqi !important; padding-left: 3cqi; }

/* Option list */
.pa-list { display: flex; flex-direction: column; }
.pa[data-os="ios"] .pa-list { background: var(--card); border-radius: 3.4cqi; overflow: hidden; }
.pa[data-os="android"] .pa-list { gap: 1.8cqi; }
.pa-row { display: flex; align-items: center; gap: 2.8cqi; width: 100%; padding: 2.5cqi 3.2cqi; position: relative; }
.pa[data-os="ios"] .pa-row { padding: 2.9cqi 3.4cqi; }
.pa[data-os="ios"] .pa-row + .pa-row::before { content: ""; position: absolute; top: 0; left: 13.8cqi; right: 0; border-top: 1px solid var(--line); }
.pa[data-os="android"] .pa-row { background: #fff; border-radius: 4cqi; border: .35cqi solid #e2e1e6; }
.pa[data-os="android"] .pa-row.is-on { background: var(--brand-soft); border-color: var(--brand); }
.pa-row-i { flex: none; width: 8cqi; height: 8cqi; padding: 1.6cqi; border-radius: 2.2cqi; background: var(--brand-soft); color: var(--brand); }
.pa[data-os="android"] .pa-row-i { border-radius: 50%; background: #fff; }
.pa-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pa-row-t { font-weight: 550; font-size: 3.8cqi; }
.pa-row-s { color: var(--ink-2); font-size: 3.1cqi; }
.pa-row-p { font-weight: 600; font-size: 3.6cqi; }
.pa-radio { flex: none; width: 4.4cqi; height: 4.4cqi; border-radius: 50%; border: .5cqi solid #b8b9c2; }
.pa-row.is-on .pa-radio { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 0 42%, transparent 46%); }
.pa[data-os="ios"] .pa-radio { border: 0; width: 4.2cqi; }
.pa[data-os="ios"] .pa-row.is-on .pa-radio { background: none; }
.pa[data-os="ios"] .pa-row.is-on .pa-radio::after { content: ""; display: block; width: 1.8cqi; height: 3.2cqi; margin: 0 auto; border: solid var(--brand); border-width: 0 .6cqi .6cqi 0; transform: rotate(45deg) translate(-.2cqi, -.4cqi); }

/* Days + slots */
.pa-days { display: flex; gap: 1.6cqi; }
.pa-day { flex: 1; text-align: center; padding: 1.5cqi 0; border-radius: 99px; font-size: 3.3cqi; color: var(--ink-2); }
.pa-day.is-on { background: #11131a; color: #fff; font-weight: 600; }
.pa[data-os="android"] .pa-day.is-on { background: var(--brand-soft); color: var(--ink); }
.pa-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqi; }
.pa-slot { text-align: center !important; padding: 2.2cqi 0 !important; border-radius: 2.4cqi; background: var(--card) !important; font-size: 3.5cqi; font-weight: 500; }
.pa[data-os="android"] .pa-slot { border-radius: 2cqi; background: transparent !important; border: .35cqi solid #c9c8d0 !important; }
.pa-slot.is-on { background: var(--brand) !important; color: #fff; }
.pa[data-os="android"] .pa-slot.is-on { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--ink); }
.pa[data-os="android"] .pa-slot.is-on::before { content: "✓ "; font-weight: 700; color: var(--brand); }
.pa-slot.is-full { color: #b0b2ba; text-decoration: line-through; cursor: default; }

/* CTA + tabs */
.pa-foot { padding: 2.6cqi 5cqi 2.2cqi; }
.pa-cta { position: relative; display: block; width: 100%; text-align: center !important; padding: 3.4cqi 0 !important; border-radius: 3.2cqi; background: var(--brand) !important; color: #fff !important; font-weight: 650 !important; font-size: 4cqi; transition: background-color .7s, opacity .3s; }
.pa[data-os="android"] .pa-cta { border-radius: 99px; padding: 3.8cqi 0 !important; }
.pa-cta:disabled { opacity: .45; cursor: default; }
.pa-cta.is-fixed::after { content: "4.5:1 ✓"; position: absolute; top: 0; right: 3cqi; transform: translateY(-55%); padding: .5cqi 1.6cqi; border-radius: 99px; background: #dff3e8; color: #1c6e47; font-size: 2.7cqi; font-weight: 700; box-shadow: 0 1cqi 2cqi rgba(0,0,0,.12); animation: rise .4s ease both; }
.pa-tabs { display: flex; justify-content: space-around; padding: 1.8cqi 2cqi 5.6cqi; border-top: 1px solid var(--line); background: rgba(250,250,252,.94); }
.pa[data-os="android"] .pa-tabs { border-top: 0; background: color-mix(in srgb, var(--brand) 7%, #fff); padding: 2.4cqi 2cqi 4.4cqi; }
.pa-tab { display: flex; flex-direction: column; align-items: center; gap: .6cqi; color: #8b8d96; font-size: 2.6cqi; font-weight: 500; }
.pa-tab-i { width: 6cqi; height: 6cqi; }
.pa-tab.is-on { color: var(--brand); }
.pa[data-os="android"] .pa-tab { color: #4a4c55; }
.pa[data-os="android"] .pa-tab-i { width: 12.4cqi; height: 6.6cqi; padding: .8cqi 3.4cqi; border-radius: 99px; }
.pa[data-os="android"] .pa-tab.is-on { color: var(--ink); font-weight: 650; }
.pa[data-os="android"] .pa-tab.is-on .pa-tab-i { background: var(--brand-soft); color: var(--ink); }

/* Confirmation sheet */
.pa-sheet { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqi; padding: 10cqi; text-align: center; background: var(--pa-bg, #f2f2f7); animation: rise .35s ease both; }
.pa-sheet[hidden] { display: none; }
.pa-tick { width: 17cqi; height: 17cqi; padding: 3.6cqi; border-radius: 50%; background: var(--brand); color: #fff; }
.pa-tick svg { stroke-width: 2.6; }
.pa-done { margin-top: 2cqi !important; font-weight: 750; font-size: 6cqi; }
.pa-detail { color: var(--ink-2); font-size: 3.6cqi; }
.pa-back { margin-top: 3cqi; padding: 2.6cqi 8cqi !important; border-radius: 99px; background: var(--brand-soft) !important; color: var(--brand) !important; font-weight: 650; }

/* ---------- Build stages ----------
   0 empty, 1 wireframe (grey), 2 layout + colour, 3 draft, 4 fixed. */
.dev-screen[data-stage="0"] .pa { opacity: 0; }
.dev-screen[data-stage="0"]::after {
  content: "Waiting for the brief"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #9aa1ad; font: 500 3.6cqi system-ui, sans-serif;
  background-image: radial-gradient(#d5d7de 1px, transparent 1.2px); background-size: 5cqi 5cqi;
}
.dev-screen[data-stage="1"] .pa { --brand: #cfd2da !important; --brand-soft: #e7e8ed; --brand-tint: #f4f5f8; }
.dev-screen[data-stage="1"] .pa svg, .dev-screen[data-stage="1"] .pa-mark { color: transparent !important; }
.dev-screen[data-stage="1"] .tx, .dev-screen[data-stage="2"] .tx,
.dev-screen[data-stage="1"] .pa-cta, .dev-screen[data-stage="2"] .pa-cta {
  color: transparent !important; text-decoration: none !important;
}
.dev-screen[data-stage="1"] .tx, .dev-screen[data-stage="2"] .tx { background-image: linear-gradient(#dcdee5, #dcdee5); background-size: 100% 62%; background-position: 0 50%; background-repeat: no-repeat; border-radius: 99px; width: fit-content; }
.dev-screen[data-stage="1"] .pa-slot.tx, .dev-screen[data-stage="2"] .pa-slot.tx, .dev-screen[data-stage="1"] .pa-day.tx, .dev-screen[data-stage="2"] .pa-day.tx { width: auto; background-size: 50% 40%; background-position: 50% 50%; }
.dev-screen[data-stage="1"] .pa-slot.is-on::before, .dev-screen[data-stage="2"] .pa-slot.is-on::before { content: none; }
.dev-screen[data-stage="1"] .pa *, .dev-screen[data-stage="2"] .pa * { transition: none; }
.pa * { transition: color .45s, background-color .45s, border-color .45s; }
.dev-screen[data-stage="1"] .pa-scroll { outline: 1px dashed rgba(90,110,160,.35); outline-offset: -2.4cqi; }

/* Shipped */
.studio.is-shipped .dev-frame { box-shadow: 0 0 0 2px #45c08a, 0 0 46px -6px rgba(69,192,138,.55), 0 40px 70px -34px rgba(0,0,0,.85); }
.dev-ready { display: none; margin: 8px 0 0; text-align: center; font-size: .75rem; font-weight: 700; color: #62d69e; }
.studio.is-shipped .dev-ready { display: block; }
.studio.is-shipped .dev figcaption { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pa *, .pa-cta { transition: none; }
  .pa-sheet, .pa-cta.is-fixed::after { animation: none; }
}
/* Summary above the button once a time is picked */
.pa-sum { display: none; align-items: center; gap: 2.2cqi; margin-bottom: 2.4cqi; padding: 2.6cqi 3.2cqi; border-radius: 3cqi; background: var(--card); font-size: 3.4cqi; box-shadow: 0 .4cqi 1.6cqi rgba(20,20,40,.06); }
.pa-sum.is-on { display: flex; }
.pa[data-os="android"] .pa-sum { border-radius: 4cqi; background: #fff; border: .35cqi solid #e2e1e6; box-shadow: none; }
.pa-sum-i { width: 5cqi; height: 5cqi; color: var(--brand); flex: none; }
.pa-sum-t { flex: 1; font-weight: 550; min-width: 0; }
.pa-sum-p { font-weight: 700; }
.pa-cta.is-fixed::after { content: none; }
.pane-phones figcaption.is-fixed { color: #62d69e; font-weight: 600; }
.dev figcaption { color: #9aa3b8; }

/* ---------- Round 5 ---------- */
.pa-stamps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pa-stamp { min-width: 0; width: 100%; box-sizing: border-box; aspect-ratio: 1; display: grid; place-items: center; }
.pa-stamp svg { width: 100%; height: 100%; }
.pa-sheet { justify-content: flex-end; padding: 0; background: rgba(10,12,20,.38); animation: fade .25s ease both; }
.pa-sheet > * { position: relative; }
.pa-sheet::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 7cqi 7cqi 0 0; background: #fff; box-shadow: 0 -2cqi 8cqi rgba(0,0,0,.15); animation: sheet .35s cubic-bezier(.2,.9,.2,1) both; }
.pa-sheet .pa-tick { margin-top: 0; }
.pa-sheet .pa-done { font-size: 7cqi; }
.pa-sheet .pa-detail { font-size: 4cqi; padding: 0 9cqi; }
.pa-sheet .pa-back { margin: 3cqi 0 12cqi; }
.pa[data-os="android"] .pa-sheet::before { border-radius: 8cqi 8cqi 0 0; }
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pa-sheet, .pa-sheet::before { animation: none; } }
.pa-sheet::before { height: auto; top: 46%; }