/*
 * The drawn phone screens of joinofferflow.com, shared by the homepage (home.css imports it) and the how-to guides.
 * Oct 22, 2026 (the founder: "match the current app ... premium"): redrawn in the app's premium look as pilot students
 * see it today (src/theme/premium.ts, Q-817 and Q-850): a plain white canvas, cards one warm step off it with a
 * hairline and no shadow, charcoal ink, the deep emerald accent, Epilogue in every role (Urbanist only in the
 * wordmark), sentence-case labels, the floating tab bar, and the one colour per concept (replies lavender, calls
 * peach, follow-ups amber, sent green). Every person and firm is made up. The screen is plain and rounded (no drawn
 * iPhone: Apple wants its own bezels or none). A scene can hold several panels (.pn) that take turns while it is on
 * screen, so a screen shows the step before and after a tap. Drawn by scripts/tools/screens-markup.mjs. Loads after
 * styles.css, never edits it.
 */
@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@700&display=swap");

/* ---- The screen: plain, rounded, a hairline and a soft shadow (overrides styles.css's drawn iPhone) ---- */
.iphone {
  padding: 0; background: none; border-radius: 14% / 6.46%;
  box-shadow: 0 0 0 1px rgba(30, 35, 32, 0.10), 0 40px 80px -40px rgba(30, 35, 32, 0.40), 0 2px 8px rgba(30, 35, 32, 0.05);
}
/* No forced GPU layer per screen (no translateZ, no mask): nine drawn phones at 3x would each hold a full-size layer,
   which blanked the whole page in a headless capture and costs a real iPhone the same memory. The rounded corners clip
   with overflow alone, since nothing inside is a video. */
.iphone-screen { isolation: isolate; background: #FFFFFF; }
/* The status bar without the Dynamic Island: 9:41, signal, Wi-Fi and battery at 393 x 59 points. */
.iphone-screen::before {
  z-index: 6;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 59'%3E%3Ctext x='60' y='37.5' text-anchor='middle' font-family='-apple-system,SF Pro Text,system-ui,Segoe UI,Helvetica,Arial,sans-serif' font-weight='600' font-size='17' fill='%231E2320'%3E9:41%3C/text%3E%3Cg fill='%231E2320'%3E%3Crect x='292' y='30' width='3.2' height='4.2' rx='1'/%3E%3Crect x='296.8' y='27.8' width='3.2' height='6.4' rx='1'/%3E%3Crect x='301.6' y='25.4' width='3.2' height='8.8' rx='1'/%3E%3Crect x='306.4' y='22.8' width='3.2' height='11.4' rx='1'/%3E%3Cpath d='M322.5 34.2l2.6-2.9a3.7 3.7 0 0 0-5.2 0z'/%3E%3C/g%3E%3Cg fill='none' stroke='%231E2320' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M317.4 28.6a7.2 7.2 0 0 1 10.2 0'/%3E%3Cpath d='M314.4 25.3a11.4 11.4 0 0 1 16.2 0'/%3E%3C/g%3E%3Crect x='337.5' y='22.8' width='25' height='12' rx='3.8' fill='none' stroke='%231E2320' stroke-opacity='.4'/%3E%3Crect x='339.6' y='24.9' width='20.8' height='7.8' rx='2.2' fill='%231E2320'/%3E%3Cpath d='M364.2 26.9v3.8a2 2 0 0 0 0-3.8z' fill='%231E2320' fill-opacity='.45'/%3E%3C/svg%3E");
}
.iphone-screen::after { z-index: 6; background: #1E2320; opacity: 0.85; }

/* Panels: the steps of one drawn screen, taking turns (the first shows without a script). */
.pn { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 380ms ease, visibility 0s linear 380ms; }
.pn.on { opacity: 1; visibility: visible; transition: opacity 380ms ease; }
html:not(.js) .pn:first-child, .js .phone-run:not(.ready) .pn:first-child { opacity: 1; visibility: visible; }

/* ---- The app, drawn at 393 points wide (1pt = --pt) ---- */
.app {
  --pt: calc(100cqw / 393);
  --c-canvas: #FFFFFF; --c-card: #F7F6F3; --c-ink: #1E2320; --c-muted: #53574F; --c-green: #1D5A41; --c-linen: #F5F2EC;
  --c-quiet: #E6E4DE; --c-line: #E0DDD7; --c-edge: #C8C6C0; --c-tint: #DDE4DC; --c-spring: #57BC80;
  --c-lav: #E9DEFF; --c-lav-ink: #4F3B71; --c-peach: #FFDBCF; --c-peach-ink: #803C27; --c-amb: #FCE4C4; --c-amb-ink: #6A4A12;
  position: absolute; inset: 0; background: var(--c-canvas); color: var(--c-ink);
  font-family: Epilogue, "Segoe UI", system-ui, sans-serif; font-size: calc(16 * var(--pt)); line-height: 1.35;
  overflow: hidden; text-align: left; letter-spacing: 0;
}
.app * { box-sizing: border-box; }
.app svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The top bar: the knot and the wordmark, Help and the profile disc. */
.p-top { position: absolute; top: calc(62 * var(--pt)); left: 0; right: 0; height: calc(48 * var(--pt)); padding: 0 calc(16 * var(--pt)); display: flex; align-items: center; justify-content: space-between; background: var(--c-canvas); z-index: 2; }
.p-brand { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-family: Urbanist, Epilogue, sans-serif; font-weight: 600; font-size: calc(20 * var(--pt)); letter-spacing: calc(-0.2 * var(--pt)); }
.p-brand img { width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); }
.p-discs { display: flex; gap: calc(10 * var(--pt)); align-items: center; }
.p-help { height: calc(34 * var(--pt)); padding: 0 calc(14 * var(--pt)) 0 calc(11 * var(--pt)); border-radius: 999px; display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); background: var(--c-quiet); font-weight: 600; font-size: calc(15 * var(--pt)); }
.p-help svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); stroke-width: 1.8; }
.p-me { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 999px; background: var(--c-quiet); display: grid; place-items: center; }
.p-me svg { width: 50%; height: 50%; stroke-width: 1.8; }
.p-back { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); color: var(--c-muted); font-size: calc(16 * var(--pt)); }
.p-back svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }

/* The page under the bar. */
.p-body { position: absolute; top: calc(112 * var(--pt)); left: 0; right: 0; bottom: 0; padding: calc(10 * var(--pt)) calc(16 * var(--pt)) 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(12 * var(--pt)); overflow: hidden; }
.p-body.tight { gap: calc(8 * var(--pt)); }
.p-date { display: flex; justify-content: space-between; align-items: center; color: var(--c-muted); font-weight: 600; font-size: calc(15 * var(--pt)); }
.p-streak { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); height: calc(34 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 999px; background: var(--c-quiet); color: var(--c-ink); font-weight: 700; font-size: calc(17 * var(--pt)); }
.p-streak svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); fill: #C2703D; stroke: none; }
.p-hello, .p-h1 { font-weight: 700; font-size: calc(26 * var(--pt)); line-height: 1.15; letter-spacing: calc(-0.4 * var(--pt)); }
.p-wait { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-size: calc(16 * var(--pt)); }
.p-wait::before { content: ""; width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); border-radius: 999px; background: var(--c-spring); flex: 0 0 auto; }
.p-wait svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); color: var(--c-muted); }
.p-muted { color: var(--c-muted); }
.p-cap { color: var(--c-muted); font-size: calc(14 * var(--pt)); line-height: 1.35; }
.p-cap svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); stroke-width: 1.8; flex: 0 0 auto; }
.p-hrow.p-cap { gap: calc(8 * var(--pt)); }
.p-kick { display: flex; align-items: center; gap: calc(8 * var(--pt)); color: var(--c-green); font-weight: 600; font-size: calc(15 * var(--pt)); }
.p-kick svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); stroke-width: 1.8; flex: 0 0 auto; }
.p-kick .end { margin-left: auto; padding: calc(4 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px; background: var(--c-tint); font-size: calc(14 * var(--pt)); }

/* A concept card on Today: a reply (lavender), a call (peach), a follow-up (amber). */
.p-need { border-radius: calc(24 * var(--pt)); padding: calc(15 * var(--pt)) calc(14 * var(--pt)); display: grid; grid-template-columns: calc(38 * var(--pt)) minmax(0, 1fr) calc(14 * var(--pt)); gap: calc(14 * var(--pt)); align-items: center; }
.p-need.lav { background: var(--c-lav); } .p-need.lav .p-n, .p-need.lav .ic { color: var(--c-lav-ink); }
.p-need.peach { background: var(--c-peach); } .p-need.peach .p-n, .p-need.peach .ic { color: var(--c-peach-ink); }
.p-need.amb { background: var(--c-amb); } .p-need.amb .p-n, .p-need.amb .ic { color: var(--c-amb-ink); }
.p-need .ic { width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: 999px; background: var(--c-card); display: grid; place-items: center; }
.p-need .ic svg { width: 48%; height: 48%; stroke-width: 1.8; }
.p-need b { display: block; font-weight: 700; font-size: calc(18 * var(--pt)); line-height: 1.2; }
.p-need .p-n { font-size: calc(24 * var(--pt)); margin-right: calc(4 * var(--pt)); }
.p-need small { display: block; margin-top: calc(3 * var(--pt)); font-size: calc(14 * var(--pt)); line-height: 1.3; }
.p-need > svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }

/* Cards and the buttons on them. */
.p-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: calc(24 * var(--pt)); padding: calc(18 * var(--pt)); display: grid; gap: calc(10 * var(--pt)); }
.p-ttl { font-weight: 700; font-size: calc(18 * var(--pt)); line-height: 1.25; }
.p-hrow { display: flex; gap: calc(12 * var(--pt)); align-items: center; }
.p-hrow.start { align-items: flex-start; }
.p-btn { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); background: var(--c-green); color: var(--c-linen); font-weight: 600; font-size: calc(16 * var(--pt)); border-radius: 999px; padding: calc(13 * var(--pt)) calc(20 * var(--pt)); white-space: nowrap; }
.p-btn.s { background: var(--c-quiet); color: var(--c-ink); }
.p-btn.t { background: var(--c-card); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-edge); }
.p-btn.full { justify-self: stretch; }
.p-btn svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.p-sendrow { display: grid; grid-template-columns: calc(52 * var(--pt)) minmax(0, 1fr); gap: calc(10 * var(--pt)); }
.p-clock { border-radius: 999px; background: var(--c-quiet); display: grid; place-items: center; }
.p-clock svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.p-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--pt)); }
.p-link { color: var(--c-green); font-weight: 600; font-size: calc(15 * var(--pt)); }

/* People: the person's disc, then the lines. */
.p-mono { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: calc(12 * var(--pt)); display: grid; place-items: center; font-weight: 700; font-size: calc(16 * var(--pt)); flex: 0 0 auto; }
.p-mono.lg { width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); font-size: calc(18 * var(--pt)); }
.p-mono.l { background: var(--c-lav); color: var(--c-lav-ink); }
.p-mono.b { background: #D8E9FB; color: #25466B; }
.p-mono.p { background: var(--c-peach); color: var(--c-peach-ink); }
.p-mono.g { background: #CFF2DA; color: #19482C; }
.p-mono.y { background: #F9ECBA; color: #61490C; }
.p-nm { display: block; font-weight: 600; font-size: calc(17 * var(--pt)); line-height: 1.2; }
.p-nm.big { font-weight: 700; font-size: calc(22 * var(--pt)); letter-spacing: calc(-0.3 * var(--pt)); }
.p-ln { display: block; color: var(--c-muted); font-size: calc(15 * var(--pt)); line-height: 1.3; margin-top: calc(2 * var(--pt)); }
.p-list { display: grid; }
.p-row { display: grid; grid-template-columns: calc(44 * var(--pt)) minmax(0, 1fr) auto; gap: calc(12 * var(--pt)); align-items: center; padding: calc(13 * var(--pt)) 0; }
.p-row + .p-row { border-top: 1px solid var(--c-line); }
.p-add { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); padding: calc(9 * var(--pt)) calc(14 * var(--pt)); border-radius: 999px; background: var(--c-tint); color: var(--c-green); font-weight: 600; font-size: calc(15 * var(--pt)); white-space: nowrap; }
.p-add svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.p-add.done { background: var(--c-canvas); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-line); }
.p-thank { padding: calc(9 * var(--pt)) calc(14 * var(--pt)); border-radius: 999px; background: var(--c-quiet); font-weight: 600; font-size: calc(15 * var(--pt)); white-space: nowrap; }
.p-state { display: block; font-size: calc(15 * var(--pt)); margin-top: calc(2 * var(--pt)); }
.p-state.peach { color: var(--c-peach-ink); } .p-state.lav { color: var(--c-lav-ink); } .p-state.g { color: var(--c-green); } .p-state.amb { color: var(--c-amb-ink); }
.p-filter { background: var(--c-card); border: 1px solid var(--c-line); border-radius: calc(24 * var(--pt)); padding: calc(16 * var(--pt)) calc(18 * var(--pt)); display: grid; gap: calc(2 * var(--pt)); }
.p-chipbtn { justify-self: start; margin-top: calc(8 * var(--pt)); display: inline-flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(9 * var(--pt)) calc(14 * var(--pt)); border-radius: 999px; background: var(--c-quiet); font-weight: 600; font-size: calc(15 * var(--pt)); }
.p-chipbtn svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.p-chipbtn i { font-style: normal; width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 999px; background: var(--c-edge); display: grid; place-items: center; font-size: calc(12 * var(--pt)); }
.p-plus { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 999px; background: var(--c-quiet); display: grid; place-items: center; }
.p-plus svg { width: 45%; height: 45%; }
.p-headrow { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--pt)); }

/* Send: the reason row, the email, the resume sentence, the footer. */
.p-reason { display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--c-canvas); border: 1px solid var(--c-line); font-size: calc(15 * var(--pt)); }
.p-reason .k { color: var(--c-muted); white-space: nowrap; }
.p-reason b { font-weight: 600; }
.p-reason .p-link { margin-left: auto; }
.p-subj { border: 1px solid var(--c-line); border-radius: calc(16 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt)); font-weight: 700; font-size: calc(16 * var(--pt)); background: var(--c-canvas); }
.p-email { white-space: pre-line; font-size: calc(15 * var(--pt)); line-height: 1.45; padding: 0 calc(4 * var(--pt)); }
.p-email .nm { color: var(--c-green); text-decoration: underline; text-underline-offset: calc(3 * var(--pt)); }
.p-email .hl { background: var(--c-tint); border-radius: calc(4 * var(--pt)); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 calc(2 * var(--pt)); }
.p-foot { position: absolute; left: 0; right: 0; bottom: calc(102 * var(--pt)); padding: calc(18 * var(--pt)) calc(16 * var(--pt)) calc(6 * var(--pt)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 18%); display: grid; gap: calc(10 * var(--pt)); z-index: 2; }
.p-sent { display: flex; gap: calc(12 * var(--pt)); align-items: center; background: #E3F5E9; border-radius: calc(20 * var(--pt)); padding: calc(14 * var(--pt)); }
.p-sent .d { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 999px; background: var(--c-green); color: var(--c-linen); display: grid; place-items: center; flex: 0 0 auto; }
.p-sent .d svg { width: 50%; height: 50%; stroke-width: 2.4; }
.p-sent b { display: block; font-weight: 700; font-size: calc(16 * var(--pt)); }

/* The person's page: their reply, the answer ready to check, the times, the call. */
.p-quote { background: var(--c-lav); border-radius: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(20 * var(--pt)) calc(6 * var(--pt)); padding: calc(14 * var(--pt)) calc(16 * var(--pt)); font-size: calc(15 * var(--pt)); line-height: 1.4; }
.p-quote small { display: block; color: var(--c-lav-ink); font-weight: 600; font-size: calc(13 * var(--pt)); margin-bottom: calc(4 * var(--pt)); }
.p-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt)); }
.p-chip { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); padding: calc(8 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px; background: var(--c-tint); color: var(--c-green); font-weight: 600; font-size: calc(14 * var(--pt)); }
.p-chip.off { background: var(--c-canvas); color: var(--c-muted); box-shadow: inset 0 0 0 1px var(--c-line); font-weight: 500; }
.p-draft { white-space: pre-line; background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: calc(16 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); font-size: calc(14.5 * var(--pt)); line-height: 1.45; }
.p-call { background: var(--c-peach); border-radius: calc(24 * var(--pt)); padding: calc(18 * var(--pt)); display: grid; gap: calc(8 * var(--pt)); }
.p-call .p-kick { color: var(--c-peach-ink); }
.p-call .when { font-weight: 700; font-size: calc(22 * var(--pt)); letter-spacing: calc(-0.3 * var(--pt)); }

/* A sheet over the page: the prep sheet, how the call went, Ask FlowAI. */
.p-dim { position: absolute; inset: 0; background: rgba(30, 35, 32, 0.30); z-index: 3; }
.p-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(124 * var(--pt)); background: var(--c-canvas); border-radius: calc(28 * var(--pt)) calc(28 * var(--pt)) 0 0; z-index: 4; padding: calc(30 * var(--pt)) calc(18 * var(--pt)) 0; display: grid; align-content: start; gap: calc(12 * var(--pt)); overflow: hidden; }
.p-sheet.fit { top: auto; padding-bottom: calc(40 * var(--pt)); }
.p-sheet::before { content: ""; position: absolute; top: calc(10 * var(--pt)); left: 50%; width: calc(40 * var(--pt)); height: calc(5 * var(--pt)); margin-left: calc(-20 * var(--pt)); border-radius: 999px; background: var(--c-edge); }
.p-sec { display: grid; gap: calc(6 * var(--pt)); }
.p-sec + .p-sec { border-top: 1px solid var(--c-line); padding-top: calc(12 * var(--pt)); }
.p-sec h5 { margin: 0; font-weight: 600; font-size: calc(14 * var(--pt)); color: var(--c-green); }
.app p { margin: 0; color: inherit; }
.p-sec p { margin: 0; font-size: calc(15 * var(--pt)); line-height: 1.4; }
.p-ask { display: flex; gap: calc(10 * var(--pt)); align-items: flex-start; font-size: calc(15 * var(--pt)); line-height: 1.35; }
.p-ask i { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: calc(6 * var(--pt)); box-shadow: inset 0 0 0 1.5px var(--c-edge); flex: 0 0 auto; display: grid; place-items: center; margin-top: calc(1 * var(--pt)); }
.p-ask i.on { background: var(--c-green); box-shadow: none; color: var(--c-linen); }
.p-ask i svg { width: 70%; height: 70%; stroke-width: 3; }
.p-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--pt)); }
.p-opt { text-align: center; padding: calc(11 * var(--pt)) 0; border-radius: 999px; background: var(--c-quiet); font-weight: 600; font-size: calc(15 * var(--pt)); }
.p-opt.on { background: var(--c-green); color: var(--c-linen); }
.p-opts.five { grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--pt)); }
.p-opts.five .p-opt { font-size: calc(13 * var(--pt)); padding: calc(10 * var(--pt)) 0; }
.p-nm i { font-style: normal; color: var(--c-muted); letter-spacing: calc(1 * var(--pt)); }
.p-input { border: 1px solid var(--c-edge); border-radius: calc(16 * var(--pt)); padding: calc(11 * var(--pt)) calc(14 * var(--pt)); font-size: calc(15 * var(--pt)); line-height: 1.4; }

/* Today's journey: sent, replies, calls, offers. */
.p-journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; padding: calc(16 * var(--pt)) calc(6 * var(--pt)) calc(12 * var(--pt)); background: var(--c-card); border: 1px solid var(--c-line); border-radius: calc(24 * var(--pt)); }
.p-journey::before { content: ""; position: absolute; left: 14%; right: 14%; top: calc(37 * var(--pt)); height: calc(4 * var(--pt)); border-radius: 999px; background: linear-gradient(90deg, var(--c-spring) 0 66%, var(--c-quiet) 66%); }
.p-stop { position: relative; display: grid; justify-items: center; gap: calc(6 * var(--pt)); }
.p-stop i { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 999px; display: grid; place-items: center; }
.p-stop i svg { width: 46%; height: 46%; stroke-width: 1.8; }
.p-stop b { font-weight: 700; font-size: calc(20 * var(--pt)); line-height: 1; }
.p-stop small { font-size: calc(12 * var(--pt)); color: var(--c-muted); }

.p-two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--pt)); }
.p-tile { border-radius: calc(24 * var(--pt)); padding: calc(14 * var(--pt)); display: grid; gap: calc(8 * var(--pt)); align-content: start; background: var(--c-card); border: 1px solid var(--c-line); }
.p-tile.gold { background: #F3EAD3; border-color: #F3EAD3; }
.p-ring { width: calc(76 * var(--pt)); height: calc(76 * var(--pt)); justify-self: center; position: relative; display: grid; place-items: center; }
.p-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-linecap: round; }
.p-ring b { font-weight: 700; font-size: calc(24 * var(--pt)); line-height: 1; margin-top: calc(-10 * var(--pt)); }
.p-ring small { position: absolute; bottom: calc(18 * var(--pt)); font-size: calc(11 * var(--pt)); color: var(--c-muted); }
.p-bar { display: block; height: calc(6 * var(--pt)); border-radius: 999px; background: #FBF6E7; overflow: hidden; }
.p-bar i { display: block; height: 100%; background: #DBB155; border-radius: 999px; }

/* The floating tab bar. */
.p-tabs { position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(30 * var(--pt)); height: calc(64 * var(--pt)); border-radius: 999px; background: var(--c-card); border: 1px solid var(--c-line); display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; z-index: 3; }
.p-tab { display: grid; justify-items: center; gap: calc(2 * var(--pt)); font-size: calc(12 * var(--pt)); color: var(--c-muted); position: relative; }
.p-tab i { width: calc(50 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 999px; display: grid; place-items: center; }
.p-tab svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); stroke-width: 1.7; }
.p-tab.on { color: var(--c-green); font-weight: 600; }
.p-tab.on i { background: var(--c-tint); }
.p-tab em { position: absolute; top: calc(-6 * var(--pt)); right: calc(14 * var(--pt)); min-width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); border-radius: 999px; background: var(--c-green); color: var(--c-linen); font-style: normal; font-size: calc(11 * var(--pt)); font-weight: 700; display: grid; place-items: center; }

/* A toast above the tab bar, and the alert banner iOS draws over the app. */
.p-toast { position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(106 * var(--pt)); z-index: 4; background: var(--c-ink); color: var(--c-linen); border-radius: calc(18 * var(--pt)); padding: calc(13 * var(--pt)) calc(16 * var(--pt)); display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--pt)); font-size: calc(14.5 * var(--pt)); font-weight: 500; overflow: hidden; }
.p-toast b { color: #8FD9AE; font-weight: 600; white-space: nowrap; }
.p-toast i { position: absolute; left: 0; bottom: 0; height: calc(3 * var(--pt)); width: 62%; background: var(--c-spring); }
.p-banner { position: absolute; left: calc(10 * var(--pt)); right: calc(10 * var(--pt)); top: calc(54 * var(--pt)); z-index: 7; display: grid; grid-template-columns: calc(38 * var(--pt)) 1fr auto; gap: 0 calc(11 * var(--pt)); align-items: start; padding: calc(13 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(24 * var(--pt)); background: rgba(246, 245, 242, 0.97); box-shadow: 0 calc(14 * var(--pt)) calc(34 * var(--pt)) calc(-10 * var(--pt)) rgba(30, 35, 32, 0.38), 0 0 0 1px rgba(30, 35, 32, 0.06); font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif; color: #111; }
.p-banner img { width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); background: #FFFFFF; grid-row: span 2; }
.p-banner b { font-weight: 600; font-size: calc(15 * var(--pt)); line-height: 1.3; }
.p-banner span { font-size: calc(15 * var(--pt)); line-height: 1.3; grid-column: 2 / 4; }
.p-banner time { font-size: calc(13 * var(--pt)); color: rgba(17, 17, 17, 0.5); }

/* Ask FlowAI: the sheet's chat. */
.p-chat { display: grid; gap: calc(10 * var(--pt)); align-content: start; }
.p-me-say { justify-self: end; max-width: 82%; background: var(--c-green); color: var(--c-linen); border-radius: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(6 * var(--pt)) calc(20 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt)); font-size: calc(15 * var(--pt)); }
.p-ai-say { justify-self: start; max-width: 88%; background: var(--c-card); border: 1px solid var(--c-line); border-radius: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(20 * var(--pt)) calc(6 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt)); font-size: calc(15 * var(--pt)); line-height: 1.4; }
.p-ai-say u { display: block; margin-top: calc(6 * var(--pt)); color: var(--c-green); font-weight: 600; text-decoration: none; font-size: calc(14 * var(--pt)); }
.p-typebox { position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(34 * var(--pt)); display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--pt)); border: 1px solid var(--c-edge); border-radius: 999px; padding: calc(8 * var(--pt)) calc(8 * var(--pt)) calc(8 * var(--pt)) calc(16 * var(--pt)); color: var(--c-muted); font-size: calc(15 * var(--pt)); background: var(--c-canvas); z-index: 5; }
.p-typebox span:last-child { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 999px; background: var(--c-green); color: var(--c-linen); display: grid; place-items: center; }
.p-typebox svg { width: 50%; height: 50%; }

/* ---- Motion inside the drawings (the founder, Oct 22: "more animated and moving"): a new screen rises 10 pt as it
   fades in, a toast rises from the bottom with its undo bar running down, the alert drops from the top, and a touch
   ripple lands on the button pressed just before the next screen (placed by home.js). ---- */
/* The leaving screen fades out in place (and only then drops back, unseen); the arriving one fades in a beat later as
   it rises, so the two never show as offset copies. */
.js .phone-run .pn { transform: translate3d(0, calc(10 * var(--pt)), 0); transition: opacity 200ms ease, transform 0s linear 220ms, visibility 0s linear 220ms; }
.js .phone-run .pn.on { transform: none; transition: opacity 360ms ease 140ms, transform 580ms cubic-bezier(.2, .8, .2, 1) 140ms; }
.js .phone-run:not(.ready) .pn:first-child { transform: none; }
.pn.on .p-toast { animation: p-rise 480ms 260ms cubic-bezier(.2, .8, .2, 1) both; }
.pn.on .p-toast i { animation: p-undo 3000ms 300ms linear both; }
.pn.on .p-banner { animation: p-drop 640ms 380ms cubic-bezier(.2, .9, .25, 1) both; }
@keyframes p-rise { from { opacity: 0; transform: translate3d(0, calc(18 * var(--pt)), 0); } to { opacity: 1; transform: none; } }
@keyframes p-drop { from { opacity: 0; transform: translate3d(0, calc(-34 * var(--pt)), 0); } to { opacity: 1; transform: none; } }
@keyframes p-undo { from { width: 100%; } to { width: 0; } }
.p-ripple { position: absolute; z-index: 8; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); margin: calc(-24 * var(--pt)) 0 0 calc(-24 * var(--pt)); border-radius: 999px; background: rgba(30, 35, 32, 0.20); box-shadow: 0 0 0 calc(2 * var(--pt)) rgba(255, 255, 255, 0.75); pointer-events: none; animation: p-tap 720ms ease-out both; }
@keyframes p-tap { 0% { opacity: 0; transform: scale(0.4); } 28% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.tap { transition: transform 120ms ease, filter 120ms ease; }
.tap.pressed { transform: scale(0.97); filter: brightness(0.93); }

@media (prefers-reduced-motion: reduce) {
  .pn, .pn.on, .js .phone-run .pn, .js .phone-run .pn.on { transition: none; transform: none; }
  .pn.on .p-toast, .pn.on .p-toast i, .pn.on .p-banner { animation: none; }
  .p-ripple { display: none; }
}

/* ---- The guides' scenes (Oct 22, 2026, the guides refresh; screens-markup.mjs) ---- */
/* Setup's questions (onboarding/ask.tsx): the question dots, the title and its line, About you's rows, the kinds. */
.p-setup { top: calc(62 * var(--pt)); padding-top: calc(14 * var(--pt)); gap: calc(22 * var(--pt)); }
.p-dots { display: flex; justify-content: space-between; align-items: center; min-height: calc(24 * var(--pt)); }
.p-dots > span:first-child { display: flex; gap: calc(8 * var(--pt)); }
.p-dots i { width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); border-radius: 999px; background: var(--c-line); }
.p-dots i.on { width: calc(24 * var(--pt)); background: var(--c-green); }
.p-qhead { display: grid; gap: calc(8 * var(--pt)); }
.p-qhead .p-muted { font-size: calc(16 * var(--pt)); line-height: 1.4; }
.p-vrow { min-height: calc(64 * var(--pt)); display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(10 * var(--pt)) 0; border-bottom: 1px solid var(--c-line); }
.p-vrow > span:first-child { flex: 1; display: grid; gap: calc(2 * var(--pt)); }
.p-vrow small { color: var(--c-muted); font-size: calc(14 * var(--pt)); font-weight: 500; }
.p-vrow b { font-weight: 500; font-size: calc(16 * var(--pt)); }
.p-vrow .p-link { font-weight: 700; font-size: calc(16 * var(--pt)); }
.p-answers { display: grid; gap: calc(10 * var(--pt)); }
.p-answer { min-height: calc(52 * var(--pt)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--c-card); border: 1px solid var(--c-line); font-weight: 500; font-size: calc(16 * var(--pt)); }
.p-answer.on { background: var(--c-tint); border-color: #B9CDBE; color: var(--c-green); font-weight: 700; }
.p-answer svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); stroke-width: 2.4; }
.p-done { display: grid; gap: calc(20 * var(--pt)); justify-items: start; margin-top: calc(40 * var(--pt)); }
.p-done .p-btn { justify-self: center; }
.p-okdisc { width: calc(56 * var(--pt)); height: calc(56 * var(--pt)); border-radius: 999px; background: var(--c-tint); color: var(--c-green); display: grid; place-items: center; }
.p-okdisc svg { width: 46%; height: 46%; stroke-width: 2.4; }
/* Send's two ways to the address (get-email.tsx WayTile): a dot, the title and its line; the picked one tinted. */
.p-way { border: 1px solid var(--c-line); border-radius: calc(18 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); display: grid; gap: calc(8 * var(--pt)); background: var(--c-canvas); }
.p-way.on { border-color: #B9CDBE; background: #F1F6F2; }
.p-way i { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); border-radius: 999px; box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--c-edge); flex: 0 0 auto; margin-top: calc(2 * var(--pt)); }
.p-way.on i { box-shadow: inset 0 0 0 calc(5 * var(--pt)) var(--c-green); }
.p-way b { display: block; font-weight: 700; font-size: calc(16 * var(--pt)); }
.p-way small { display: block; color: var(--c-muted); font-size: calc(13.5 * var(--pt)); line-height: 1.35; margin-top: calc(2 * var(--pt)); }
.p-way .p-input { background: var(--c-canvas); }
.p-okline { justify-self: start; display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); padding: calc(5 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px; background: var(--c-tint); color: var(--c-green); font-weight: 600; font-size: calc(13.5 * var(--pt)); }
.p-okline svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); stroke-width: 2.6; }
.p-finding { justify-items: center; padding: calc(36 * var(--pt)) calc(18 * var(--pt)); color: var(--c-muted); font-weight: 600; font-size: calc(16 * var(--pt)); }
.p-finding img { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); animation: p-spin 1.4s linear infinite; }
@keyframes p-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p-finding img { animation: none; } }
/* The prep sheet's numbered questions, a call tile on Contacts, a row's time. */
.p-askn { display: grid; grid-template-columns: calc(18 * var(--pt)) minmax(0, 1fr) calc(22 * var(--pt)); align-items: start; background: var(--c-canvas); border-radius: calc(14 * var(--pt)); padding: calc(10 * var(--pt)) calc(12 * var(--pt)); }
.p-askn b { color: var(--c-green); font-weight: 700; }
.p-askn i { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 999px; }
.p-calltile { justify-self: start; min-width: 62%; display: grid; gap: calc(2 * var(--pt)); padding: calc(14 * var(--pt)); border-radius: calc(20 * var(--pt)); background: var(--c-peach); }
.p-calltile small { color: var(--c-peach-ink); font-weight: 600; font-size: calc(13 * var(--pt)); }
.p-calltile b { font-weight: 700; font-size: calc(17 * var(--pt)); }
.p-calltile span:not(.p-thank) { color: var(--c-muted); font-size: calc(14 * var(--pt)); }
.p-calltile .p-thank { justify-self: start; margin-top: calc(6 * var(--pt)); background: #FFFFFF; }
.p-when { float: right; font-weight: 400; color: var(--c-muted); font-size: calc(13 * var(--pt)); }
/* The thread folded into one line on a person's page (contact/thread.tsx). */
.p-fold { display: flex; align-items: center; gap: calc(10 * var(--pt)); padding: calc(12 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(16 * var(--pt)); background: var(--c-card); border: 1px solid var(--c-line); font-size: calc(15 * var(--pt)); }
.p-fold svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); flex: 0 0 auto; color: var(--c-green); }
.p-fold small { color: var(--c-muted); font-size: calc(13 * var(--pt)); }
.p-fold > svg:last-child { margin-left: auto; color: var(--c-muted); }
/* The call's rating: a face over its word (call-rating.tsx), the picked one on the green. */
.p-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--pt)); }
.p-faces span { display: grid; justify-items: center; gap: calc(2 * var(--pt)); padding: calc(8 * var(--pt)) 0; border-radius: calc(16 * var(--pt)); background: rgba(255, 255, 255, 0.7); font-size: calc(12.5 * var(--pt)); font-weight: 600; }
.p-faces b { font-size: calc(22 * var(--pt)); line-height: 1.1; font-weight: 400; }
.p-faces span.on { background: var(--c-green); color: var(--c-linen); }
/* A long drawn screen fades out above the home indicator instead of running under it. */
.p-body.fade { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70 * var(--pt)), transparent calc(100% - 24 * var(--pt))); mask-image: linear-gradient(180deg, #000 calc(100% - 70 * var(--pt)), transparent calc(100% - 24 * var(--pt))); }
/* The email being written: grey lines in place of the words. */
.p-skel { display: block; height: calc(12 * var(--pt)); border-radius: 999px; background: var(--c-quiet); }
.p-skel.short { width: 60%; }
.p-setup .p-btns .p-btn { justify-self: stretch; }