/* SkipATS public site. World: a senior's red pen on your job emails. Ruled notebook paper,
   ballpoint navy ink, red pen for what's wrong, green pen for what's right, highlighter for
   what matters, sticky notes for steps. Bricolage Grotesque headlines, Hanken Grotesk text,
   Kalam (Indian Type Foundry's handwriting face) for every scribble. Pen strokes are SVG paths
   with pathLength=1 so CSS can draw each one in. */
@font-face { font-family: "Bricolage"; src: url("/vendor/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("/vendor/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("/vendor/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/vendor/fonts/kalam-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/vendor/fonts/kalam-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --paper: #fbfcff;
  --sheet: #ffffff;
  --rule: #e2eaf6;
  --margin: #f4b9b9;
  --ink: #16213e;
  --ink-2: #48527a;
  --ink-3: #737da0;
  --line: #d9e1ee;
  --red: #e23b3b;
  --green: #139a5b;
  --blue: #2457d6;
  --hl: #ffe15a;
  --hl-soft: rgba(255, 225, 90, 0.55);
  --sticky-y: #fff1a3;
  --sticky-p: #ffd9e3;
  --sticky-b: #d6ecff;
  --display: "Bricolage", "Hanken", system-ui, sans-serif;
  --text: "Hanken", system-ui, sans-serif;
  --hand: "Kalam", "Hanken", cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen movement */
  --gutter: clamp(16px, 4vw, 40px);
  --rule-gap: 34px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #c4cfe2 var(--paper); }
body {
  margin: 0; color: var(--ink); font: 400 17px/1.6 var(--text); overflow-x: hidden;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule-gap) - 1px), var(--rule) calc(var(--rule-gap) - 1px), var(--rule) var(--rule-gap));
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--hl); color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #c4cfe2; border-radius: 10px; border: 2px solid var(--paper); }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-style: italic; }
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { width: min(820px, 100%); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }
/* ---------------------------------------------------------------- pen strokes */
.mark { position: relative; display: inline-block; z-index: 0; }
.ink { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ink path { vector-effect: non-scaling-stroke; stroke-width: 2.6px; }
.ink.red { stroke: var(--red); }
.ink.green { stroke: var(--green); }
.ink.blue { stroke: var(--blue); }
.ink-strike { left: -3%; width: 106%; top: 42%; height: 0.4em; }
.ink-strike path { stroke-width: 3px; }
.ink-arrow { position: relative; display: inline-block; width: 74px; height: 38px; }
.hilite { background: linear-gradient(transparent 52%, var(--hl-soft) 52%, var(--hl-soft) 92%, transparent 92%); padding: 0 0.08em; }
/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; font: 650 16px/1 var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid var(--ink); background: var(--ink); color: #fff;
  box-shadow: 0 10px 24px -14px rgba(22, 33, 62, 0.8);
  transition: transform 220ms var(--ease), box-shadow 260ms var(--ease), background-color 200ms ease;
}
.btn i { font-size: 19px; }
.btn:active { transform: scale(0.97); }
.btn-sm, .btn.small { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn.danger { background: transparent; color: var(--red); border-color: var(--red); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-2px) rotate(-0.6deg); box-shadow: 0 16px 30px -14px rgba(22, 33, 62, 0.85); }
}
/* ---------------------------------------------------------------- top bar */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 12px var(--gutter);
  background: rgba(251, 252, 255, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color 300ms ease;
}
.top.scrolled { border-bottom-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 800 22px/1 var(--display); letter-spacing: -0.035em; text-decoration: none; color: var(--ink); }
.brand b { color: var(--red); margin-right: -8px; }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.links a:hover { color: var(--ink); text-decoration: underline wavy var(--red) 1.5px; }
/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 8vw, 110px); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: max(16px, calc(50% - 640px)); width: 2px; background: var(--margin); }
.hero h1 { font-size: clamp(44px, 6vw, 84px); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; }
.hero h1 .line { display: block; }
.hero h1 .line + .line { margin-top: 0.12em; }
.trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.paper {
  position: relative; background: var(--sheet); border: 1px solid #e3e8f2; border-radius: 6px; padding: 22px 24px 22px 50px;
  font-size: 15px; line-height: 1.65; color: #2a3354;
  box-shadow: 0 1px 0 rgba(22, 33, 62, 0.04), 0 24px 40px -26px rgba(22, 33, 62, 0.45);
  background-image: linear-gradient(90deg, transparent 33px, var(--margin) 33px, var(--margin) 35px, transparent 35px);
}
.paper p + p { margin-top: 9px; }
.tag { font: 700 12px var(--hand); color: var(--blue); border: 1.5px solid var(--blue); border-radius: 999px; padding: 0 8px; transform: rotate(-3deg); display: inline-block; }
/* ---------------------------------------------------------------- shared section heads */
section { position: relative; }
.sec-h { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; font-weight: 800; max-width: 20ch; }
.sec-h > span:not(.mark) { color: var(--ink-3); font-weight: 600; }
/* ---------------------------------------------------------------- routes diagram */
.routes { padding: clamp(80px, 10vw, 130px) 0; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.chips span { font-size: 12.5px; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: var(--paper); border: 1.5px solid #c9d3e6; white-space: nowrap; }
/* ---------------------------------------------------------------- red-pen teardown */
.paper.big { font-size: 15.5px; padding: 26px 28px 26px 54px; }
/* ---------------------------------------------------------------- how it works (tabs) */
.engine { padding: clamp(80px, 10vw, 130px) 0; }
.flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 4px; }
.flow::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; border-left: 2px dashed #b9c4da; }
.panels { position: sticky; top: 90px; }
.panel { padding: 30px 30px 30px 56px; font-size: 16.5px; }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; margin-top: 4px; }
.panel p { margin-top: 12px; color: var(--ink-2); }
.tabs-on .panel[data-hidden] { display: none; }
/* ---------------------------------------------------------------- sources */
/* ---------------------------------------------------------------- sticky-note steps */
.sticky { position: relative; padding: 30px 26px 28px; border-radius: 3px; box-shadow: 0 22px 30px -22px rgba(22, 33, 62, 0.55); min-height: 240px; }
.sticky::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(22, 33, 62, 0.08); }
.sticky.yellow { background: var(--sticky-y); transform: rotate(-2deg); }
.sticky.blue { background: var(--sticky-b); transform: rotate(-1deg); }
.sticky h3 { margin-top: 10px; font: 700 26px/1.15 var(--hand); letter-spacing: 0; }
.sticky p { margin-top: 10px; color: var(--ink-2); }
/* ---------------------------------------------------------------- telegram */
/* ---------------------------------------------------------------- promises */
/* ---------------------------------------------------------------- faq */
.faq { padding: clamp(70px, 9vw, 120px) 0; }
.faq .sec-h { margin-bottom: 26px; }
/* ---------------------------------------------------------------- footer: the last page */
.foot { position: relative; margin-top: 40px; border-top: 2px solid var(--ink); background: var(--sheet); }
.foot::before { content: ""; position: absolute; top: 0; bottom: 0; left: max(16px, calc(50% - 640px)); width: 2px; background: var(--margin); }
.foot-call { position: relative; padding: clamp(70px, 9vw, 120px) var(--gutter) clamp(50px, 6vw, 80px); text-align: center; display: grid; justify-items: center; }
.foot-line { font: 800 clamp(38px, 5.6vw, 78px)/1.02 var(--display); letter-spacing: -0.04em; max-width: 15ch; }
.foot-hand { margin: 18px 0 18px; display: inline-flex; align-items: center; gap: 6px; font: 700 26px var(--hand); color: var(--blue); transform: rotate(-2deg); }
.foot-hand .ink-arrow { width: 80px; height: 44px; }
.foot-free { margin-top: 14px; color: var(--ink-3); font-size: 14.5px; }
.foot-base { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; padding: 26px var(--gutter) 34px; border-top: 1.5px dashed #c9d3e6; }
.foot-base nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-base nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.foot-base nav a:hover { color: var(--ink); text-decoration: underline wavy var(--red) 1.5px; }
.copy { color: var(--ink-3); font: 400 15px var(--hand); }
/* ---------------------------------------------------------------- motion (opt-in: html.js) */
.js .ink path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms cubic-bezier(0.55, 0.1, 0.25, 1); transition-delay: var(--d, 0ms); }
.js .drawn .ink path { stroke-dashoffset: 0; }
.js .reveal.pre { opacity: 0; transform: translateY(24px); }
.js .reveal { transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.js .sticky.reveal.pre { transform: translateY(30px) rotate(0deg); }
/* the envelopes travel the two roads */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
}
/* ---------------------------------------------------------------- responsive */
@media (max-width: 1020px) {
.panels { position: static; }
}
@media (max-width: 760px) {
body { font-size: 16px; --rule-gap: 30px; }
.links { display: none; }
.top { justify-content: space-between; }
.hero::before, .foot::before { display: none; }
}
/* ---------------------------------------------------------------- inner pages: login, legal, admin */
.auth { min-height: calc(100svh - 70px); display: grid; place-items: center; padding: 60px var(--gutter); }
.auth-card { width: min(480px, 100%); padding: 36px 36px 36px 60px; border-radius: 8px; background: var(--sheet); border: 1px solid #e3e8f2; box-shadow: 0 30px 50px -30px rgba(22, 33, 62, 0.5); background-image: linear-gradient(90deg, transparent 37px, var(--margin) 37px, var(--margin) 39px, transparent 39px); }
.auth-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 26px; transform: rotate(-6deg); }
.auth-card h1 { margin-top: 20px; font-size: 34px; font-weight: 800; }
.auth-sub { margin-top: 8px; color: var(--ink-2); }
.auth-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.auth-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.auth-steps .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--red); color: var(--red); font: 700 16px var(--hand); }
.auth-steps p { color: var(--ink-2); }
.match { display: flex; gap: 8px; margin-top: 12px !important; }
.match span { display: grid; place-items: center; width: 50px; height: 60px; border-radius: 10px; background: var(--sticky-y); color: var(--ink); font: 700 32px var(--hand); }
.auth-status { display: flex; align-items: center; gap: 10px; margin-top: 24px !important; color: var(--ink-2); font-weight: 600; }
.auth-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); animation: wait 1.6s ease-in-out infinite; }
@keyframes wait { 50% { opacity: 0.3; } }
.auth-foot { margin-top: 18px !important; font-size: 14px; color: var(--ink-3); }
.auth-foot a { color: var(--blue); }
.doc { padding: 80px var(--gutter) 100px; }
.doc h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; }
.doc-note { margin-top: 14px; color: var(--ink-3); }
.doc h2 { margin-top: 40px; font-size: 24px; font-weight: 700; }
.doc p { margin-top: 12px; color: var(--ink-2); max-width: 66ch; }
.doc .btn { margin-top: 30px; }
.admin { padding-top: 40px; padding-bottom: 80px; }
.admin-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.admin-head h1 { font-size: 44px; font-weight: 800; }
.admin-head p { color: var(--ink-2); margin-top: 6px; }
.quiet { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.admin-msg { margin-top: 20px; padding: 12px 16px; border-radius: 8px; background: var(--sticky-y); }
.admin-card { margin-top: 22px; padding: 24px; border-radius: 12px; background: var(--sheet); border: 1px solid #dbe2ee; }
.admin-card h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.admin-table th { text-align: left; color: var(--ink-3); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1.5px solid var(--line); }
.admin-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table .n, .admin-table th.n { text-align: right; }
.admin-table tr.paused { opacity: 0.6; }
.admin-table .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.muted { color: var(--ink-3); }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef2f8; color: var(--ink-2); }
.chip.ok { background: rgba(19, 154, 91, 0.12); color: var(--green); }
.chip.warn { background: rgba(226, 59, 59, 0.12); color: var(--red); }
.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.admin-add { display: flex; gap: 10px; margin-bottom: 12px; }
.admin-add input, .newlink input, .remove input { flex: 1; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--sheet); color: var(--ink); font: inherit; }
.newlink input { width: 100%; font-size: 14px; }
.admin-note { margin-top: 12px; color: var(--ink-3); font-size: 14px; }
.mono { font-family: ui-monospace, monospace; }
.remove summary { cursor: pointer; color: var(--red); font-size: 14px; font-weight: 600; }
.remove form { display: grid; gap: 8px; margin-top: 8px; }
.remove label { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.x-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 999px; border: 1.5px solid rgba(226, 59, 59, 0.35); background: transparent; color: var(--red); font-size: 16px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.x-btn:hover { background: rgba(226, 59, 59, 0.08); border-color: var(--red); }
.x-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.more-list summary { cursor: pointer; padding: 14px 0 4px; color: var(--ink-2); font-weight: 600; font-size: 14px; list-style: none; }
.more-list summary::-webkit-details-marker { display: none; }
.more-list summary::before { content: "+ "; }
.more-list[open] summary::before { content: "− "; }
.more-list[open] summary { padding-bottom: 0; }
.more-list .when-open, .more-list[open] .when-closed { display: none; }
.more-list[open] .when-open { display: inline; }
@media (max-width: 760px) {
.admin-grid { grid-template-columns: 1fr; }
}
/* Long marked phrases stay inline so the sentence wraps naturally: a real underline or
   line-through in pen colour, inked in when its block is drawn. */
html, body { overflow-x: clip; }
/* ================================================================ round 3 (2026-10-10) */
/* brand: Skippy is the logo */
.brand-skippy { width: 44px; height: auto; margin-right: 2px; transform: rotate(-4deg); transition: transform 400ms var(--ease); }
.brand:hover .brand-skippy { transform: rotate(-12deg) translate(3px, -3px); }
/* hero: "start here" sits beside the button, arrow pointing at it */
/* questions: a board of sticky notes */
/* footer sky: Skippy flies over the wordmark, a blue-pen trail behind him */
.foot-call { padding-bottom: clamp(30px, 4vw, 50px); }
.sky { position: relative; height: clamp(300px, 40vw, 520px); overflow: hidden; touch-action: pan-y; cursor: crosshair; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-word { position: absolute; left: 0; right: 0; bottom: -0.16em; display: flex; justify-content: center; gap: 0.04em; margin: 0; font: 800 clamp(96px, 21vw, 320px)/1 var(--display); letter-spacing: -0.05em; color: var(--ink); user-select: none; pointer-events: none; }
.sky-word span { display: flex; position: relative; }
.sky-word i { display: inline-block; font-style: normal; will-change: transform; }
.w-skip i { color: var(--ink); }
.w-ats i { color: #c9d3e6; }
.w-ats .ink-strike { top: 46%; height: 0.14em; left: -4%; width: 108%; }
.w-ats .ink-strike path { stroke-width: 7px; }
.skippy { position: absolute; left: 0; top: 0; width: clamp(96px, 11vw, 150px); height: auto; will-change: transform; pointer-events: none; filter: drop-shadow(0 18px 14px rgba(22, 33, 62, 0.18)); transform: translate(40vw, 60px) rotate(0deg); }
.bubble { position: absolute; left: 0; top: 0; margin: 0; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px; background: var(--sheet); font: 700 17px var(--hand); white-space: nowrap; pointer-events: none; will-change: transform; transform: translate(-999px, -999px); }
.sky-hint { position: absolute; left: var(--gutter); top: 14px; margin: 0; font: 400 16px var(--hand); color: var(--ink-3); }
.sky-hint b { color: var(--red); }
/* ---------------------------------------------------------------- mobile polish */
@media (max-width: 760px) {
.hero { padding-top: 28px; }
.hero h1 { font-size: clamp(40px, 11.5vw, 56px); }
.trust { flex-direction: column; gap: 8px; }
.sec-h { font-size: clamp(32px, 9vw, 44px); }
.paper.big { padding: 22px 18px 22px 46px; }
/* how it works: steps become a swipeable strip, the panel right under it */
.flow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
.flow::before { display: none; }
.flow li { flex: none; scroll-snap-align: start; }
.panels { margin-top: 6px; }
.panel { padding: 24px 20px 24px 46px; }
.foot-line { font-size: clamp(34px, 10vw, 46px); }
.sky { height: 300px; }
.sky-hint { font-size: 14px; right: var(--gutter); }
.foot-base { flex-direction: column; align-items: flex-start; }
}
/* round 3 fixes: arrow points back at the button; Skippy bigger; phones get a clean note */
.skippy { width: clamp(130px, 13vw, 190px); }
@media (max-width: 760px) {
.skippy { width: 110px; }
.sky-hint { top: auto; bottom: 46%; left: var(--gutter); right: auto; max-width: 60%; }
}
.sky-word i { position: relative; z-index: 1; }
.w-ats .ink-strike { z-index: 2; }
/* the big strike is drawn by scaling, not dashes (dashes fragment when stretched this wide) */
.w-ats .ink-strike path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.w-ats .ink-strike { transform-origin: left center; transition: transform 700ms cubic-bezier(0.55, 0.1, 0.25, 1) 300ms; }
.js .sky:not(.drawn) .w-ats .ink-strike { transform: scaleX(0); }
.w-ats .ink-strike path { stroke-width: 9px !important; }
/* ================================================================ round 4: tell the two emails apart */
/* login card fits every phone */
.auth { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.auth-card { min-width: 0; }
.auth-card .btn { white-space: normal; text-align: center; min-height: 50px; }
@media (max-width: 760px) {
.hero h1 { padding-left: 6px; }
.auth { padding: 36px 16px; }
.auth-card { padding: 28px 22px 28px 46px; background-image: linear-gradient(90deg, transparent 27px, var(--margin) 27px, var(--margin) 29px, transparent 29px); }
.auth-card h1 { font-size: 28px; }
.match span { width: 44px; height: 54px; font-size: 28px; }
}
/* round 5: the FAQ board is an even grid of always-open notes (owner: "uneven and odd").
   Same size per row, same tape, one gentle alternating tilt. */
/* ================================================================ the device scene (round 8)
   Phone first (owner, 2026-10-10): the whole job search happens on the phone, every morning at a
   time you pick; the laptop beside it is optional and shows the same dashboard, live. Hand-written
   notes explain the moments that matter. Calm by construction:
   - every frame has a fixed aspect ratio, so the page never moves while it plays;
   - chat logs are anchored to the bottom and clip at the top, like a real chat scrolling;
   - a message grows in (grid row 0fr -> 1fr), so older ones glide up instead of jumping;
   - the markup is the finished state: no JS or reduced motion shows the whole story, still;
   - it is a picture, not a control: no pointer, hover or text selection anywhere in it.
   No brand marks on either device. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.scene { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.stage { position: relative; container-type: inline-size; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 55% 24.5% minmax(0, 1fr); column-gap: 2.2%; align-items: end; padding-bottom: 1%; }
.stage, .caps { pointer-events: none; -webkit-user-select: none; user-select: none; }
.stage::after { content: ""; position: absolute; left: 2%; right: 22%; bottom: -1%; height: 6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(22, 33, 62, 0.22), transparent); }
/* ---- laptop: dark gunmetal, thin bezel, angular base, a teal accent line at the hinge */
/* ---- the dashboard on the laptop, in the notebook look of the real one */
.d-chip { margin-left: auto; padding: 0.1em 0.6em; border-radius: 1em; background: #eef2f8; color: var(--ink-2); font-style: normal; font-weight: 700; font-size: 0.85em; white-space: nowrap; transition: background-color 300ms ease, color 300ms ease; }
.d-chip.new { background: #fff3b0; color: #7a5a00; }
.d-chip.sent { background: #d9f5e3; color: #127a45; }
@container (max-width: 420px) {
  .d-rail { display: none; }
  .d-main { padding: 0.9em 1em; }
}
/* ---- phone: curved display edges, slim even bezel, a centred punch-hole camera */
.mob { position: relative; z-index: 2; container-type: inline-size; transition: opacity 700ms ease 160ms, transform 900ms var(--ease) 160ms; }
.mob-screen { position: relative; height: 100%; overflow: hidden; border-radius: 9cqi; background: #fff; font: 400 clamp(7.5px, 4.6cqi, 12.5px)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0f1419; -webkit-font-smoothing: antialiased; }
.mob-screen::before { content: ""; position: absolute; top: 2.3cqi; left: 50%; z-index: 6; width: 3.6cqi; height: 3.6cqi; border-radius: 50%; background: #050608; box-shadow: 0 0 0 0.5cqi rgba(255, 255, 255, 0.06); transform: translateX(-50%); }
.mob-screen::after { content: ""; position: absolute; inset: 0; z-index: 7; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.16) 1.6%, transparent 4.5%, transparent 95.5%, rgba(255, 255, 255, 0.16) 98.4%, rgba(0, 0, 0, 0.16)); }
/* "synced live with your dashboard": a highlighter strip under the chat header */
.sync { display: flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.3em 0.8em 0.35em; background: #fff3b0; border-top: 1px solid #eceef0; border-bottom: 1.5px dashed #e3cf7a; color: var(--ink); font: 700 1.02em/1.2 var(--hand); transition: background-color 300ms ease; }
.sync.ping { background-color: #ffe15a; }
.dot { position: relative; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: #1fae5b; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1fae5b; animation: sync-pulse 1.8s ease-out infinite; }
@keyframes sync-pulse { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
/* the lock screen: the morning notification arrives here */
/* ---- messages */
.m { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 480ms var(--ease), opacity 320ms ease; }
.m.off { grid-template-rows: 0fr; opacity: 0; }
.m .b { transition: transform 480ms var(--ease); }
.m.off .b { transform: translateY(0.9em) scale(0.97); }
.b { position: relative; max-width: 88%; margin: 0; padding: 0.5em 0.8em 0.45em; border-radius: 1em 1em 1em 0.3em; background: #fff; box-shadow: 0 1px 1px rgba(16, 35, 30, 0.12); }
.m.out .b { border-radius: 1em 1em 0.3em 1em; background: #effdde; }
.b time { float: right; margin: 0.45em -0.2em -0.2em 0.9em; font-size: 0.78em; color: #8ea08a; white-space: nowrap; }
.m.out .b time { color: #5fae5a; }
.b time i { font-size: 1.1em; vertical-align: -0.15em; }
.b.fits { width: 94%; max-width: none; }
.b.fits ul { list-style: none; margin: 0.4em 0 0; padding: 0; display: grid; gap: 0.25em; }
.b.fits li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5em; padding: 0.35em 0.45em; border-radius: 0.7em; background: #f4f6f8; transition: opacity 320ms ease, transform 420ms var(--ease); }
.b.fits li.wait { opacity: 0; transform: translateX(-0.8em); }
.lg { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 0.5em; color: #fff; font-weight: 800; font-size: 0.9em; }
.fit { padding: 0.1em 0.5em; border-radius: 1em; font-style: normal; font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.fit.s { background: #d9f5e3; color: #127a45; }
.fit.g { background: #e6efff; color: #2457d6; }
.b.draft { width: 94%; max-width: none; display: grid; gap: 0.3em; padding-top: 0.65em; }
.b.draft .body { margin: 0; color: #2b3138; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b.draft time { justify-self: end; float: none; margin: -1.4em -0.2em -0.1em 0; }
.b.alert { background: #fff8d6; }
.b.alert b { display: flex; align-items: center; gap: 0.35em; color: #9a6a00; }
.av { display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; color: #fff; font-weight: 700; overflow: hidden; }
.av img { width: 76%; height: auto; transform: rotate(-8deg); }
.tap { position: absolute; z-index: 8; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; border-radius: 50%; background: rgba(15, 20, 25, 0.22); opacity: 0; }
.tap.go { animation: tap 620ms var(--ease); }
@keyframes tap { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.5); } }
.mob.buzz { animation: buzz 420ms ease; }
@keyframes buzz { 20%, 60% { transform: translateX(-3px) rotate(-0.6deg); } 40%, 80% { transform: translateX(3px) rotate(0.6deg); } }
.ring { position: absolute; inset: -0.6em -0.8em; width: calc(100% + 1.6em); height: calc(100% + 1.2em); overflow: visible; fill: none; stroke: var(--red); stroke-width: 2.4px; stroke-linecap: round; }
.ring path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(0.55, 0.1, 0.25, 1); }
.ring.wait path { stroke-dashoffset: 1; }
/* the sticky note that lands on the laptop at the end */
/* ---- hand-written notes beside the phone; their arrows draw in when the moment comes */
.note { position: absolute; left: calc(100% + 2.6cqi); width: 15.5cqi; margin: 0; font: 700 clamp(14px, 1.85cqi, 22px)/1.2 var(--hand); color: var(--ink); transition: opacity 300ms ease, transform 420ms var(--ease); }
.note u { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.note s { text-decoration-color: var(--red); text-decoration-thickness: 2.5px; color: var(--ink-3); }
.note small { display: block; margin-top: 0.2em; font-weight: 400; font-size: 0.78em; color: var(--ink-2); }
.note svg { position: absolute; right: calc(100% + 0.3em); width: 4.6cqi; height: 2.3cqi; overflow: visible; fill: none; stroke-width: 2.4px; stroke-linecap: round; stroke-linejoin: round; }
.note svg path { vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 650ms ease 200ms; }
.note.wait { opacity: 0; transform: translateX(-0.5em); }
.note.wait svg path { stroke-dashoffset: 1; }
/* ---- the five steps under the desk, lit in time with the story */
.caps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 1040px; margin: clamp(26px, 4vw, 44px) auto 0; padding: 0; }
.caps li { position: relative; display: flex; align-items: center; gap: 10px; padding-top: 14px; color: var(--ink-3); font-weight: 650; font-size: 15px; line-height: 1.25; transition: color 300ms ease; }
.caps li::before, .caps li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: var(--line); }
.caps li::after { background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); }
.caps b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 15px/1 var(--hand); }
.caps li.on, .caps li.done { color: var(--ink); }
.caps li.on::after, .caps li.done::after { transform: none; }
.caps li.done::after { background: var(--green); }
.caps li.on b { background: var(--hl); border-color: var(--ink); }
.caps li.done b { background: var(--green); border-color: var(--green); color: #fff; }
/* ---- Skippy takes off when Send is tapped */
.fly { --flip: -1; --fx1: -16cqi; --fy1: -18cqi; --fr1: 22deg; --fx2: -36cqi; --fy2: -40cqi; --fr2: 30deg; position: absolute; left: 0; top: 0; z-index: 5; width: 6cqi; height: auto; opacity: 0; filter: drop-shadow(0 8px 10px rgba(22, 33, 62, 0.25)); }
.fly.go { animation: fly 1800ms cubic-bezier(0.45, 0.05, 0.3, 1) forwards; }
@keyframes fly {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(calc(var(--flip) * 0.4), 0.4); }
  14% { opacity: 1; transform: translate(-50%, -70%) rotate(calc(var(--flip) * -8deg)) scale(var(--flip), 1); }
  55% { opacity: 1; transform: translate(calc(-50% + var(--fx1)), calc(-50% + var(--fy1))) rotate(var(--fr1)) scale(calc(var(--flip) * 0.95), 0.95); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx2)), calc(-50% + var(--fy2))) rotate(var(--fr2)) scale(calc(var(--flip) * 0.7), 0.7); }
}
/* a soft white-out between loops, so the reset is never seen; the devices rise in once */
.scene.rise .mob { opacity: 0; transform: translateY(64px); }
@media (max-width: 1100px) {
.caps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
}
/* phones: the phone leads, notes beside it, the optional laptop below */
@media (max-width: 760px) {
.stage { grid-template-columns: 60% minmax(0, 1fr); column-gap: 0; row-gap: 40px; padding-bottom: 0; }
.stage::after { display: none; }
.note { left: calc(100% + 6cqi); width: 32cqi; font-size: 14px; }
.note svg { width: 7cqi; height: 4cqi; }
/* the phone already circles the reply */
.fly { --flip: 1; width: 13cqi; --fx1: 14cqi; --fy1: -40cqi; --fr1: -30deg; --fx2: 34cqi; --fy2: -90cqi; --fr2: -40deg; }
.caps { grid-template-columns: minmax(0, 1fr); gap: 0; }
.caps li { padding: 12px 0 12px 16px; }
.caps li::before, .caps li::after { top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto; transform-origin: top; }
.caps li::after { transform: scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
.scene *, .scene *::before, .scene *::after { animation: none !important; transition: none !important; }
}
/* round 9: the steps stand beside the phone as a vertical list, lit as the story plays */
.stage > .caps { grid-column: 3; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; margin: 0; padding: 0; }
.stage > .caps li { align-items: flex-start; padding: 12px 0 12px 16px; font-size: clamp(14px, 1.45cqi, 17px); }
.stage > .caps li::before, .stage > .caps li::after { top: 8px; bottom: 8px; left: 0; right: auto; width: 3px; height: auto; transform-origin: top; }
.stage > .caps li::after { transform: scaleY(0); }
.stage > .caps li.on::after, .stage > .caps li.done::after { transform: none; }
.stage > .caps b { margin-top: -2px; }
.stage > .caps small { display: block; margin-top: 3px; font: 400 0.92em/1.25 var(--hand); color: var(--ink-3); }
.stage > .caps li.on small { color: var(--ink-2); }
@media (max-width: 760px) {
.stage > .caps { grid-column: 2; grid-row: 1; padding-left: 12px; }
.stage > .caps li { gap: 8px; padding: 9px 0 9px 11px; font-size: 13px; }
.stage > .caps b { width: 24px; height: 24px; font-size: 13px; }
.stage > .caps small { display: none; }
}
/* thesis (2026-10-11): few, relevant introductions, not volume */
/* the long word "conversations." needs a smaller headline on the narrowest phones */
@media (max-width: 360px) {
.hero h1 { font-size: 36px; }
}
/* ================================================================ selling sections (2026-10-11) */
.cta-note { margin-top: 12px; color: var(--ink-3); font-size: 14.5px; }
/* ---- the turn line under the two phones */
/* ---- worth it: a finished draft with the address locked, and a receipt */
.worth { padding: clamp(80px, 10vw, 130px) 0; }
.locked { padding: 34px 28px 26px 54px; transform: rotate(-1deg); }
.locked > .tag { position: absolute; top: 14px; right: 16px; }
.blurred { filter: blur(4px); user-select: none; }
.locked .ph-lock-simple { color: var(--red); font-size: 15px; }
@media (max-width: 760px) {
.locked { padding: 30px 18px 22px 44px; }
}
/* ---------------------------------------------------------------- pricing (v2, 2026-10-12) */
.pricing { padding-top: clamp(40px, 7vw, 84px); padding-bottom: 90px; }
.pricing-head { text-align: center; max-width: 760px; margin: 0 auto; }
.pricing-head h1 { margin: 0; font: 800 clamp(38px, 5.4vw, 64px)/1.04 var(--display); letter-spacing: -0.04em; }
.pricing-head p { margin: 16px auto 0; max-width: 36em; color: var(--ink-2); font-size: 18px; }
.pricing-head b { color: var(--ink); }
.mark-hl { background: linear-gradient(transparent 55%, var(--hl-soft) 55%, var(--hl-soft) 92%, transparent 92%); }
.pricing-note { margin: 24px auto 0; max-width: 720px; display: flex; gap: 10px; align-items: flex-start; justify-content: center; padding: 12px 16px; border-radius: 12px; color: var(--ink-2); font-size: 15px; background: var(--sheet); border: 1.5px solid var(--line); }
.pricing-note i { font-size: 20px; flex: none; margin-top: 1px; }
.pricing-note.ok i { color: var(--green); }
.pricing-note.hold { background: #fff6f6; border: 1.5px dashed #f2b8b8; text-align: left; }
.pricing-note.hold i { color: var(--red); }
.pricing-note b { color: var(--ink); }
/* three passes, identical structure so every price lines up */
.passes { margin: 46px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1020px; align-items: stretch; }
.pass { position: relative; display: flex; flex-direction: column; padding: 34px 26px 26px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--sheet); min-width: 0; }
.pass-main { border: 2px solid var(--ink); box-shadow: 0 30px 50px -30px rgba(22, 33, 62, 0.6); transform: translateY(-8px); }
.pass-flag { position: absolute; top: -15px; left: 22px; padding: 3px 13px; border-radius: 999px; background: var(--hl); color: var(--ink); font: 700 16px var(--hand); transform: rotate(-3deg); white-space: nowrap; }
.pass-flag.green { background: #d9f3e5; color: var(--green); }
.pass-flag.blue { background: var(--sticky-b); color: var(--blue); }
.pass h2 { margin: 0; font: 750 22px/1.1 var(--display); letter-spacing: -0.02em; }
.cuts { margin-top: 12px; min-height: 62px; display: grid; align-content: end; gap: 2px; }
.cut { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 9px; }
.cut s { position: relative; display: inline-block; color: var(--ink-2); font: 650 18px var(--display); text-decoration: none; letter-spacing: -0.01em; padding: 0 2px; }
.cut s::after { content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: 2.5px; border-radius: 2px; background: var(--red); transform: rotate(-12deg); }
.cut-big s { font-size: 23px; color: #4f587a; }
.cut-big s::after { height: 3px; transform: rotate(-10deg); }
.cut span { font: 700 15px var(--hand); color: var(--blue); }
.pass-price { margin: 4px 0 0; font: 800 50px/1 var(--display); letter-spacing: -0.035em; }
.pass-price .mark { position: relative; }
.pass-day { margin: 8px 0 0; color: var(--ink-3); font-size: 15px; }
.pass-perks { list-style: none; margin: 18px 0 22px; padding: 16px 0 0; border-top: 1.5px dashed #dbe2ee; display: grid; gap: 8px; flex: 1; align-content: start; }
.pass-perks li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.pass-perks .tick { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pass-perks .g { color: var(--green); font-weight: 650; }
.pass-perks .no { color: var(--ink-3); padding-left: 26px; }
.pass .btn { align-self: stretch; }
.pass-pay { margin: 18px auto 0; max-width: 1020px; text-align: center; color: var(--ink-3); font-size: 14px; }
/* three equal reassurance tiles */
/* what a pass gets you: a 2 x 2 checklist with red-pen notes */
.includes { margin: 64px auto 0; max-width: 1020px; }
.includes h2 { margin: 0; font: 800 clamp(28px, 3.4vw, 40px) var(--display); letter-spacing: -0.03em; }
.includes ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.includes li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1.5px dashed #dbe2ee; }
.includes li > i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sticky-y); color: var(--ink); font-size: 21px; }
.includes b { display: block; font: 700 17px/1.3 var(--display); letter-spacing: -0.01em; }
/* Good to know: the homepage's sticky notes, each with a pen note on the answer's point */
@media (max-width: 900px) {
.passes { grid-template-columns: 1fr; max-width: 520px; }
.pass-main { transform: none; }
.cuts { min-height: 0; }
.includes ul { grid-template-columns: 1fr; }
}
/* ---- Beta pricing (owner, 2026-10-12): passes under frosted glass, a duel on top ---------- */
.price-zone { position: relative; max-width: 1020px; margin: 0 auto; }
.price-zone.is-beta { margin-top: 200px; }
.price-zone.is-beta .passes { margin-top: 0; filter: blur(5px) saturate(0.85); user-select: none; }
.masked { letter-spacing: 0.04em; }
.beta-pill { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--hl); color: var(--ink); font: 700 13px/1 var(--text); letter-spacing: 0.02em; text-transform: uppercase; }
/* The duel: the figures stand on the glass's top edge. One 2.8 s loop; transform/opacity only. */
/* strikes the raised hammer, gone before the slam */
@media (prefers-reduced-motion: reduce) {
/* A still frame of the clash instead of a loop. */
}
@media (max-width: 900px) {
.price-zone.is-beta { margin-top: 170px; }
}
/* ---- Homepage laptop: the dashboard is part of the pass, so it shows through frosted glass */
/* a tiny bar chart so Insights reads as numbers you'll get */
@container (max-width: 420px) { .lap-lock { left: 50%; width: 90%; } }
/* ================================================================ homepage v3 (2026-10-20)
   One question per section: what's my problem, what does it do, how do I use it, why pay.
   Notebook paper stays; pen marks are limited to one underline in the headline. Cards sit
   flat (no rotation) so the page reads as a product, not a scrapbook. */
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 13px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.kicker i { font-size: 16px; }
.saved {
  background: var(--sheet); border: 1px solid #dfe5f0; border-radius: 16px;
  box-shadow: 0 1px 0 rgba(22, 33, 62, 0.03), 0 18px 36px -28px rgba(22, 33, 62, 0.45);
}
/* ---- hero: the promise on the left, the whole product in three steps on the right */
.h3-hero { padding: clamp(36px, 6vw, 80px) 0 clamp(60px, 8vw, 100px); }
.h3-hero h1 { font-size: clamp(40px, 4.9vw, 68px); line-height: 1.03; font-weight: 800; letter-spacing: -0.04em; }
.h3-hero h1 .mark { display: inline; color: var(--green); }
/* ---- problem */
/* ---- how it works */
/* per-element values live here, not in style attributes: the CSP forbids inline styles */
/* ---- comparison */
/* ---- why pay */
.saved { margin-top: 18px; padding: 22px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; background: var(--sticky-y); border-color: transparent; }
.saved p:last-child { color: var(--ink-2); }
/* ---- get started */
/* ---- promises */
/* ---- faq: a plain list */
.h3-faq { padding: clamp(60px, 8vw, 100px) 0 clamp(70px, 9vw, 110px); }
.faq-list { margin-top: 30px; background: var(--sheet); border: 1px solid #dfe5f0; border-radius: 16px; padding: 4px 24px; }
.faq-item + .faq-item { border-top: 1px solid #edf0f6; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font: 650 18px/1.35 var(--display); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { flex: none; color: var(--ink-3); transition: transform 300ms var(--ease); }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 900px) {
/* comparison: one card per row, SkipATS's answer first */
}
@media (max-width: 640px) {
.saved { grid-template-columns: 1fr; gap: 8px; }
.faq-list { padding: 2px 16px; }
}
/* ================================================================ homepage v4 (2026-10-20)
   Feel the pain in seconds, see the fix in seconds: one real-looking phone plays the story
   (apply, apply, ghosted -> one Telegram chat -> a founder replies). Short lines, no tables.
   Story states are driven by site.js (data-at / data-out, ms into the loop); without JS or
   with reduced motion the phone simply shows the finished Telegram chat. */
/* ---- hero */
/* ---- the phone */
.s-stage { margin: 0; display: grid; justify-items: center; gap: 18px; }
.phone {
  position: relative; width: min(310px, 84vw); aspect-ratio: 310 / 640; padding: 11px; border-radius: 48px;
  background: #0f1527; box-shadow: 0 0 0 2px #2a3352 inset, 0 40px 70px -30px rgba(22, 33, 62, 0.7), 0 10px 24px -12px rgba(22, 33, 62, 0.4);
}
.app { position: absolute; inset: 0; padding-top: 46px; display: flex; flex-direction: column; transition: opacity 500ms ease, visibility 500ms; }
/* job portal app */
.portal { background: #f3f5f9; }
.job { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: #fff; border: 1px solid #e6eaf2; }
.co { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; font-weight: 800; }
.c1 { background: #f08c00; }
.c2 { background: #3b5bdb; }
.c3 { background: #2b8a3e; }
.c4 { background: #ae3ec9; }
.c5 { background: #e8590c; }
.jt b { display: block; font-size: 13.5px; }
.jt small { color: var(--ink-3); font-size: 11.5px; }
.apply, .applied { padding: 7px 11px; border-radius: 999px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.apply { background: #3b5bdb; color: #fff; }
.applied { background: #e9ecf3; color: #8a91ab; }
.ghosted { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 4px; background: rgba(15, 21, 39, 0.82); color: #fff; text-align: center; transition: opacity 600ms ease; }
.gh { font-size: 64px; line-height: 1; }
.ghosted b { font: 800 30px/1.1 var(--display); letter-spacing: -0.03em; }
.ghosted small { font: 700 18px var(--hand); color: #ffb3b3; }
/* telegram app */
.b { max-width: 86%; margin: 0; padding: 8px 11px; border-radius: 16px; font-size: 13px; line-height: 1.38; box-shadow: 0 1px 1px rgba(22, 33, 62, 0.08); overflow: hidden; }
.b.in { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; color: var(--ink); }
.b.out { align-self: flex-end; background: #e1f7d5; border-bottom-right-radius: 5px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.b.out i { color: var(--red); font-size: 18px; }
.b.card b { display: block; margin-bottom: 4px; }
.b.card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.b.card li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.b.card .lg { font-size: 10px; }
.b.card em { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: #e3f6ea; color: var(--green); font-style: normal; font-size: 10.5px; font-weight: 700; }
.b.draft small { display: flex; align-items: center; gap: 5px; color: #2a8fd8; font-weight: 700; font-size: 11.5px; }
.b.draft p { margin-top: 4px; color: var(--ink-2); }
.push { position: absolute; top: 44px; left: 8px; right: 8px; z-index: 4; display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 18px; background: rgba(255, 255, 255, 0.97); border: 2px solid var(--green); box-shadow: 0 18px 30px -14px rgba(19, 154, 91, 0.6); font-size: 13px; transition: transform 600ms var(--ease), opacity 400ms ease; }
.push b { display: block; color: var(--green); }
/* the finger */
.tap { position: absolute; right: 18px; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(22, 33, 62, 0.25); border: 2px solid rgba(255, 255, 255, 0.9); pointer-events: none; opacity: 0; }
.tap.on { animation: tap 600ms var(--ease) forwards; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.2); } }
/* captions under the phone */
/* story states (only while the animation plays) */
.playing [data-at]:not(.on), .playing [data-out]:not(.on) { pointer-events: none; }
.playing .app:not(.on) { opacity: 0; visibility: hidden; }
.playing .apply:not(.on), .playing .applied:not(.on) { display: none; }
.playing .ghosted:not(.on) { opacity: 0; }
.playing .b { transition: opacity 350ms ease, transform 450ms var(--ease), max-height 450ms var(--ease), padding 300ms ease; max-height: 260px; }
.playing .b:not(.on) { opacity: 0; transform: translateY(10px) scale(0.96); max-height: 0; padding-top: 0; padding-bottom: 0; }
.playing .push:not(.on) { opacity: 0; transform: translateY(-130%); }
/* ---- the pain */
/* ---- how */
/* ---- why founders reply */
/* ---- pay */
@media (max-width: 640px) {
/* phones: headline, button, then the story right away; the small print after it */
.s-stage { order: 5; margin-top: 28px; }
.phone { width: min(290px, 78vw); }
}
/* ================================================================ homepage v5 (2026-10-21)
   "Skip the pile." Your resume is one sheet in a stack of hundreds; Skippy lifts it out and
   flies it to the founder. Then a two-sheet comparison (147 applications vs 1 email), the
   eight steps (the bot does six), a marked-up email, and a quiet two-line price section.
   Everything is readable without JS; motion plays only when the user allows it. */
/* ---- hero */
.pile { margin: 0; width: min(520px, 100%); justify-self: center; }
.plane { position: absolute; left: 0; top: 0; width: 22cqw; height: auto; z-index: 45; transform: translate(52cqw, 31cqh) rotate(-14deg); }
@keyframes fly {
  0%, 44% { opacity: 0; transform: translate(12cqw, 42cqh) rotate(-8deg) scale(0.6); }
  48% { opacity: 1; transform: translate(12cqw, 42cqh) rotate(-8deg) scale(1); }
  58% { opacity: 1; transform: translate(33cqw, 33cqh) rotate(-30deg) scale(1); }
  68% { opacity: 1; transform: translate(52cqw, 31cqh) rotate(-14deg) scale(1); }
  74%, 96% { opacity: 1; transform: translate(52cqw, 31cqh) rotate(-14deg) scale(1); }
  100% { opacity: 0; transform: translate(52cqw, 31cqh) rotate(-14deg) scale(0.6); }
}
/* ---- comparison */
.vs { padding: clamp(56px, 8vw, 110px) 0; }
.far { position: absolute; right: 0; top: 0; padding: 6px 12px; border-radius: 999px; background: var(--green); color: #fff; font: 700 13px/1 var(--text); z-index: 2; }
/* ---- eight steps */
.shift { padding: clamp(32px, 5vw, 70px) 0 clamp(56px, 8vw, 110px); }
.log { counter-reset: step; list-style: none; margin: 34px 0 0; padding: 0 0 0 46px; position: relative; display: grid; gap: 6px; }
.log::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px; background: var(--margin); }
.log li { counter-increment: step; position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; padding: 12px 0; }
.log li::before { content: counter(step); position: absolute; left: -46px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 2px solid var(--margin); font: 700 16px/1 var(--hand); color: var(--red); }
.log .who { justify-self: start; padding: 5px 12px; border-radius: 999px; background: #e3f5ec; color: #0d6e41; font: 750 13px/1 var(--text); }
.log .you .who { background: var(--blue); color: #fff; }
.log b { display: block; font: 700 19px/1.25 var(--display); letter-spacing: -0.015em; }
.log .you b { background: linear-gradient(transparent 58%, var(--hl-soft) 58%); width: fit-content; }
.log small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 15.5px; }
.ring { position: relative; width: min(220px, 60vw); aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.15; }
.ring b { font: 800 56px/1 var(--display); letter-spacing: -0.05em; }
.ring span { margin-top: 4px; color: var(--ink-2); font-size: 14px; font-weight: 650; }
/* ---- marked-up email */
.why { padding: clamp(40px, 6vw, 90px) 0; }
.why-grid { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.mail { position: relative; padding: clamp(20px, 3vw, 36px); border-radius: 16px; background: #fff; border: 1px solid #d5ddec; box-shadow: 0 30px 50px -34px rgba(22, 33, 62, 0.45); font-size: 16.5px; }
.mail-tag { position: absolute; right: 16px; top: -12px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 12px/1 var(--text); }
.mail-line { display: flex; gap: 14px; padding: 6px 0; color: var(--ink); }
.mail-line span { flex: none; width: 62px; color: var(--ink-3); }
.mail-body { margin-top: 12px; padding-top: 16px; border-top: 1px solid #e7ecf5; display: grid; gap: 14px; }
.mail-sign { color: var(--ink-2); }
.mail mark { position: relative; padding: 1px 3px; border-radius: 3px; background: var(--hl-soft); color: inherit; }
.m1::after, .m2::after, .m3::after, .m4::after, .notes li::before {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px; border-radius: 50%; background: var(--blue); color: #fff; font: 800 12px/1 var(--text); vertical-align: 2px;
}
.m1::after { content: "1"; }
.m2::after { content: "2"; }
.m3::after { content: "3"; }
.m4::after { content: "4"; }
.notes { counter-reset: note; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.notes li { counter-increment: note; display: grid; grid-template-columns: 22px 38px 1fr; gap: 12px; align-items: start; }
.notes li::before { content: counter(note); margin: 6px 0 0; }
.notes li > i { font-size: 34px; color: var(--green); }
.notes b { display: block; font: 700 20px/1.2 var(--display); letter-spacing: -0.015em; }
.notes span { display: block; margin-top: 3px; color: var(--ink-2); font-size: 16px; }
/* ---- pay */
.pay { padding: clamp(40px, 6vw, 80px) 0; }
.pay-note { margin-top: 18px; display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15.5px; }
.pay-note i { color: var(--green); font-size: 22px; }
/* ---- pricing page, quieter */
.pr-trust { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; max-width: 760px; margin-inline: auto; }
.pr-trust li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); }
.pr-trust li i { flex: none; margin-top: 2px; font-size: 24px; color: var(--green); }
.pr-trust b { color: var(--ink); }
.pr-faq h2 { font-size: 26px; font-weight: 750; }
.pr-faq { margin: 44px auto 0; max-width: 760px; }
.pr-faq details { border-bottom: 1px solid #e7ecf5; }
.pr-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; cursor: pointer; list-style: none; font: 650 18px/1.35 var(--display); }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary i { flex: none; color: var(--ink-3); transition: transform 300ms var(--ease); }
.pr-faq details[open] summary i { transform: rotate(45deg); }
.pr-faq details p { padding: 0 0 18px; color: var(--ink-2); }
/* ---- phones */
@media (max-width: 860px) {
.why-grid { grid-template-columns: 1fr; }
.log { padding-left: 40px; }
.log::before { left: 19px; }
.log li { grid-template-columns: 1fr; gap: 6px; }
.log li::before { left: -40px; }
.notes li { grid-template-columns: 22px 34px 1fr; }
}
/* ================================================================ homepage v6 (2026-10-21)
   The product, shown. Two drawn phones (no brand marks): "moto" has a curved-edge display and
   runs the SkipATS Telegram bot, "sam" is flat and runs a job portal. The hero plays the whole
   bot flow; "two inboxes" plays both phones side by side; "how to use" is a clickable
   walkthrough; "what a pass unlocks" puts free and paid on two phones. site.js plays any
   [data-story] (data-at / data-out are ms into the loop); without JS, or with reduced motion,
   each phone shows its finished screen. No inline styles: the CSP forbids them. */
.v6 .sec-h { max-width: 22ch; }
.duo-sub { margin-top: 12px; max-width: 40em; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); }
/* ---- phones */
.dv { --w: 288px; position: relative; width: min(var(--w), 78vw); aspect-ratio: 288 / 606; margin: 0 auto; }
.dv::before { content: ""; position: absolute; right: -3px; top: 26%; width: 3px; height: 54px; border-radius: 2px; background: var(--side, #0a1a18); }
.dv-moto { --side: #0a1a18; padding: 5px; border-radius: 44px; background: linear-gradient(150deg, #3e7f76, #143f3a 52%, #0a2321); box-shadow: 0 0 0 1.5px #08191a, 0 44px 60px -30px rgba(10, 34, 32, 0.8), 0 10px 22px -12px rgba(10, 34, 32, 0.5); }
.dv-moto .dv-screen { border-radius: 40px; }
/* the curved display: light rolling off both long edges */
.dv-moto .dv-screen::after { content: ""; position: absolute; inset: 0; z-index: 20; border-radius: inherit; pointer-events: none; box-shadow: inset 7px 0 8px -6px rgba(255, 255, 255, 0.85), inset -7px 0 8px -6px rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.dv-sam { --side: #5d616a; padding: 3px; border-radius: 34px; background: linear-gradient(150deg, #e0e3e9, #8d929c); box-shadow: 0 0 0 1px #73777f, 0 44px 60px -30px rgba(22, 33, 62, 0.75), 0 10px 22px -12px rgba(22, 33, 62, 0.45); }
.dv-sam .dv-screen { border-radius: 31px; border: 5px solid #0a0b0d; }
.dv-cam { position: absolute; top: 13px; left: 50%; z-index: 30; width: 11px; height: 11px; transform: translateX(-50%); border-radius: 50%; background: #050607; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07); }
.dv-sam .dv-cam { top: 14px; width: 10px; height: 10px; }
.dv-screen { position: relative; height: 100%; overflow: hidden; background: #fff; font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.dv-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 0; font-size: 11.5px; color: var(--ink); }
.dv-bar span { display: flex; gap: 3px; font-size: 12px; }
.dlay { position: absolute; inset: 0; padding-top: 28px; display: flex; flex-direction: column; background: #fff; }
/* telegram */
.tgh { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border-bottom: 1px solid #e3e8f0; }
.tgh > i { font-size: 16px; color: #2a8fd8; }
.tgh > i:last-child { margin-left: auto; color: var(--ink-3); }
.tgh .av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e6f0ff; overflow: hidden; }
.tgh .who { display: grid; line-height: 1.15; }
.tgh .who small { color: var(--ink-3); font-size: 10.5px; }
.tgl { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px; background: #dce8f3; overflow: hidden; }
.dm { margin: 0; width: fit-content; max-width: 88%; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgba(22, 33, 62, 0.08); }
.dm.in { border-bottom-left-radius: 4px; }
.dm.out { align-self: flex-end; border-bottom-right-radius: 4px; background: #d9f2c4; }
.dm > i { margin-right: 5px; color: #2a8fd8; vertical-align: -1px; }
.dm.card { width: 96%; max-width: 96%; }
.dm.card > b { display: block; margin-bottom: 6px; }
.dm b { font-weight: 750; }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mlist li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; }
.mlist li > span:nth-child(2) b { font-size: 12px; }
.mlist em { display: block; font-style: normal; font-size: 10.5px; color: #139a5b; font-weight: 700; }
.mlist small { padding: 2px 7px; border-radius: 999px; background: #eef3fb; color: var(--ink-2); font-size: 10px; font-weight: 700; }
.lg { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; font: 800 12px/1 var(--display); }
.lg1 { background: #139a5b; }
.lg2 { background: #2457d6; }
.lg3 { background: #c98a0b; }
.draft .to { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; color: #4f5878; font-size: 10.5px; }
.draft .to i { color: #139a5b; font-size: 13px; }
.draft .to em { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: #e3f6ea; color: #0d6e41; font-size: 9.5px; font-style: normal; font-weight: 700; }
.draft .to .blur { filter: blur(3.5px); user-select: none; }
.draft p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.chk { display: grid; gap: 1px; margin-top: 6px; font-size: 10.5px; color: #139a5b; font-weight: 700; }
.kbd { position: relative; display: flex; gap: 6px; margin-top: 8px; }
.kbd > span:not(.tapdot) { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 9px; background: #eaf2fb; color: #2a6fb8; font-weight: 700; font-size: 12px; }
.kbd .go { background: #2a8fd8 !important; color: #fff !important; }
.kbd .lock { background: #eef0f4 !important; color: #8b92a8 !important; }
.nudge { font-size: 11.5px; color: var(--ink-2); }
.nudge small { color: var(--ink-3); }
.tapdot { position: absolute; left: 24%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: rgba(36, 87, 214, 0.38); opacity: 0; pointer-events: none; }
.tapdot.on { animation: tapdot 700ms ease-out; }
@keyframes tapdot { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.dpush { position: absolute; top: 34px; left: 8px; right: 8px; z-index: 12; display: flex; gap: 8px; padding: 9px 11px; border-radius: 16px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 26px -12px rgba(22, 33, 62, 0.55); font-size: 11.5px; color: var(--ink-2); }
.dpush b { display: block; color: var(--ink); font-size: 12px; }
/* job portal (flat phone) */
.pt { background: #f3f5f9; }
.pth { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e6eaf2; }
.pth b { font: 800 16px/1 var(--display); color: #3b5bdb; letter-spacing: -0.02em; }
.pth span { display: flex; gap: 10px; font-size: 16px; color: var(--ink-3); }
.ptsum { margin: 0; padding: 8px 14px 2px; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.ptsum b { font: 800 18px/1 var(--display); color: var(--ink); }
.ptsum b.hot { color: var(--red); }
.ptj { list-style: none; margin: 0; padding: 6px 10px; display: grid; gap: 7px; }
.ptj li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border-radius: 13px; background: #fff; border: 1px solid #e6eaf2; }
.ptj .tapdot { left: auto; right: 34px; }
.co { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; font-weight: 800; }
.c1 { background: #f08c00; }
.c2 { background: #3b5bdb; }
.c3 { background: #2b8a3e; }
.c4 { background: #ae3ec9; }
.c5 { background: #e8590c; }
.jt b { display: block; font-size: 12.5px; }
.jt small { color: var(--ink-3); font-size: 10.5px; }
.pbtn { padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; white-space: nowrap; }
.pbtn.apply { background: #3b5bdb; color: #fff; }
.pbtn.applied { background: #e9ecf3; color: #8a91ab; }
.pns { position: absolute; top: 34px; left: 8px; right: 8px; z-index: 8; display: grid; gap: 6px; }
.pn { display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 9px 11px; border-radius: 15px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 12px 24px -12px rgba(22, 33, 62, 0.5); font-size: 11.5px; color: var(--ink-2); }
.pn i { flex: none; font-size: 18px; color: var(--ink-3); }
.pn b { display: block; color: var(--ink); font-size: 11.5px; }
.pn.bad i, .pn.bad b { color: var(--red); }
.pghost { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 4px; background: rgba(15, 21, 39, 0.88); color: #fff; text-align: center; }
.pghost .gh { font-size: 58px; line-height: 1; }
.pghost b { font: 800 28px/1.1 var(--display); letter-spacing: -0.03em; }
.pghost small { font: 700 17px var(--hand); color: #ffb3b3; }
/* what plays: elements with a time are on between data-at and data-out */
.playing .dm[data-at] { transition: opacity 350ms ease, transform 450ms var(--ease), max-height 450ms var(--ease), padding 300ms ease; max-height: 320px; }
.playing .dm[data-at]:not(.on) { opacity: 0; transform: translateY(10px) scale(0.96); max-height: 0; padding-top: 0; padding-bottom: 0; }
.playing .dpush { transition: opacity 400ms ease, transform 500ms var(--ease); }
.playing .dpush[data-at]:not(.on) { opacity: 0; transform: translateY(-130%); }
.playing .pn { transition: opacity 400ms ease, transform 500ms var(--ease); }
.playing .pn:not(.on) { opacity: 0; transform: translateY(-14px); }
.playing .pghost { transition: opacity 600ms ease; }
.playing .pghost:not(.on) { opacity: 0; }
.playing .pbtn:not(.on), .playing .ptsum b:not(.on) { display: none; }
.dm .tapdot, .playing [data-at]:not(.on) { pointer-events: none; }
.duo-col:not(.playing) .ptsum b:not(.hot), .duo-col:not(.playing) .pns, .duo-col:not(.playing) .pbtn.apply:not([data-out="999999"]) { display: none; }
/* ---- hero */
.hx { padding: clamp(20px, 3vw, 44px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hx h1 { font-size: clamp(38px, 4.3vw, 62px); line-height: 1; font-weight: 800; letter-spacing: -0.05em; }
.hx h1 span { display: block; color: var(--green); }
.hx-lede { margin-top: 18px; max-width: 30em; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); }
.hx-lede b { color: var(--ink); }
.does { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.does li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.does li > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e3f6ea; color: var(--green); font-size: 24px; }
.does li > span { color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.does b { display: block; color: var(--ink); font: 700 17px/1.25 var(--display); letter-spacing: -0.01em; }
.hx-cta { margin-top: 28px; }
.hx-stage { --w: 300px; margin: 0; display: grid; justify-items: center; gap: 6px; }
.hx-stage .dv { --w: 300px; }
/* ---- two inboxes */
.duo { padding: clamp(56px, 8vw, 110px) 0; }
.duo-grid { position: relative; margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); }
.duo-col { margin: 0; padding: 22px 16px 24px; border-radius: 26px; background: #fff; border: 1px solid #dfe5f0; border-top: 5px solid var(--red); display: grid; justify-items: center; align-content: start; gap: 16px; }
.duo-win { border: 1px solid var(--green); border-top: 5px solid var(--green); background: linear-gradient(#f2fbf6, #fff 55%); }
.duo-col figcaption, .fp-col figcaption { display: grid; justify-items: center; text-align: center; gap: 2px; }
.duo-col figcaption b { font: 800 24px/1.1 var(--display); letter-spacing: -0.03em; }
.duo-col figcaption span, .fp-col figcaption span { color: var(--ink-3); font-size: 14px; }
.duo-col .dv { --w: 262px; }
.duo-vs { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; background: var(--ink); color: #fff; font: 800 17px/1 var(--display); text-transform: uppercase; box-shadow: 0 0 0 6px var(--paper); }
.outcome { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 330px; display: grid; gap: 8px; }
.outcome li { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; font-weight: 650; font-size: 15px; }
.outcome li i { flex: none; font-size: 21px; }
.outcome.bad li { background: #fff3f3; }
.outcome.bad i { color: var(--red); }
.outcome.good li { background: #eaf7f0; }
.outcome.good i { color: var(--green); }
.duo-foot { margin-top: 20px; color: var(--ink-3); font-size: 14px; text-align: center; }
/* ---- how to use */
.use { padding: clamp(32px, 5vw, 70px) 0 clamp(56px, 8vw, 110px); }
.use-grid { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(24px, 5vw, 80px); align-items: center; }
.use-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.use-list button { position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1.5px solid #dfe5f0; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 250ms ease, background-color 250ms ease, transform 250ms var(--ease); }
.use-list button:hover { border-color: #b9c8e4; }
.use-list .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #eef2fa; color: var(--ink-2); font: 800 16px/1 var(--display); transition: background-color 250ms ease, color 250ms ease; }
.use-list .t b { display: block; font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; }
.use-list .t small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14.5px; }
.use-list button[aria-selected="true"] { border-color: var(--green); background: #f2fbf6; transform: translateX(6px); }
.use-list button[aria-selected="true"] .n { background: var(--green); color: #fff; }
.use-grid.auto .use-list button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: var(--green); animation: fillbar 5.4s linear forwards; }
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.use-phone { --w: 300px; display: grid; justify-items: center; position: sticky; top: 90px; }
.use-phone .dv { --w: 300px; }
.use-grid.steps-on .scr:not(.on) { display: none; }
.scr.on { animation: scrin 450ms var(--ease); }
@keyframes scrin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.startcard { align-self: center; display: grid; justify-items: center; gap: 3px; margin-bottom: 8px; padding: 16px 18px; border-radius: 14px; background: #fff; text-align: center; font-size: 11.5px; color: var(--ink-3); }
.startcard b { color: var(--ink); font: 800 16px/1.2 var(--display); }
.startcard .av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e6f0ff; }
.startbtn { margin-top: 8px; padding: 8px 30px; border-radius: 10px; background: #2a8fd8; color: #fff; font-weight: 800; letter-spacing: 0.06em; }
.dm.voice { display: flex; align-items: center; gap: 8px; }
.dm.voice > i { font-size: 22px; margin: 0; }
.wave { display: inline-block; width: 86px; height: 14px; background: repeating-linear-gradient(90deg, #4aa3df 0 3px, transparent 3px 6px); border-radius: 2px; }
.bonus { margin-top: clamp(48px, 7vw, 84px); }
.bonus h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em; }
.bonus-sub { margin-top: 8px; color: var(--ink-2); }
.power { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.power li { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #dfe5f0; }
.power li > i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 13px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 26px; }
.power b { font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; }
.power span { color: var(--ink-2); font-size: 15px; }
.power em { margin-top: 4px; color: var(--blue); font: 700 16px/1.2 var(--hand); font-style: normal; }
.pw1 { --c: #16213e; }
.pw2 { --c: #e23b3b; }
.pw3 { --c: #139a5b; }
.pw4 { --c: #2457d6; }
.pw5 { --c: #c98a0b; }
.pw6 { --c: #7048e8; }
/* ---- free vs pass */
.worth { padding: clamp(48px, 7vw, 100px) 0; }
.fp { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); }
.fp-col { margin: 0; padding: 22px 16px 26px; border-radius: 26px; background: #fff; border: 1px solid #dfe5f0; display: grid; justify-items: center; align-content: start; gap: 16px; }
.fp-pass { border: 2px solid var(--green); background: linear-gradient(#f2fbf6, #fff 55%); }
.fp-col figcaption b { font: 800 26px/1.1 var(--display); letter-spacing: -0.03em; }
.fp-pass figcaption b { color: var(--green); }
.fp-col .dv { --w: 270px; }
.fp-lists { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); }
.fl { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #dfe5f0; }
.fl-pass { border: 2px solid var(--green); }
.fl h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.fl h3 span { display: block; margin-top: 2px; color: var(--ink-3); font: 500 14px/1.3 var(--text); letter-spacing: 0; }
.fl ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.fl li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; line-height: 1.4; }
.fl li > i { flex: none; margin-top: 1px; font-size: 20px; color: var(--green); }
.fl li.no { color: var(--ink-3); }
.fl li.no > i { color: #aab2c8; }
.fl-pass li b { color: var(--ink); }
.worth-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.worth .pay-note { justify-content: center; }
/* ---- phones and small screens */
@media (max-width: 900px) {
.hx-grid, .use-grid { grid-template-columns: 1fr; }
.hx-copy { display: contents; }
.hx-grid { gap: 0; justify-items: stretch; }
.hx-copy .kicker { order: 1; }
.hx h1 { order: 2; font-size: clamp(34px, 9.3vw, 52px); }
.hx-lede { order: 3; }
.hx-cta { order: 4; width: 100%; }
.hx-copy .cta-note { order: 5; text-align: center; }
.hx-stage { order: 6; margin-top: 30px; }
.does { order: 7; margin-top: 30px; }
.duo-grid, .fp, .fp-lists { grid-template-columns: 1fr; }
.duo-vs { position: relative; left: auto; top: auto; translate: none; justify-self: center; margin: -8px 0; }
.use-phone { position: static; margin-top: 8px; }
.use-list .t small { display: none; }
.use-list button[aria-selected="true"] { transform: none; }
.power { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.power { grid-template-columns: 1fr; }
.worth-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.scr.on { animation: none; }
.use-grid.auto .use-list button[aria-selected="true"]::after { display: none; }
}
/* ---- pricing page v6: features first, then the passes, then free vs pass on two phones */
.pr-feats { margin: 44px 0 8px; }
.pr-feats h2, .pr-compare h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em; text-align: center; }
.pr-feats ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pr-feats li { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #dfe5f0; }
.pr-feats li > i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 13px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 26px; }
.pr-feats b { font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; }
.pr-feats span { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.f1 { --c: #139a5b; }
.f2 { --c: #2457d6; }
.f3 { --c: #c98a0b; }
.f4 { --c: #e23b3b; }
.f5 { --c: #7048e8; }
.f6 { --c: #0c8599; }
.f7 { --c: #16213e; }
.f8 { --c: #139a5b; }
.pass-for { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.pass-perks li > i { margin-right: 6px; color: var(--green); vertical-align: -3px; }
.pass-perks li.no > i { color: #aab2c8; }
.pr-compare { margin-top: clamp(48px, 7vw, 90px); }
.pr-compare .fp { margin-top: 28px; }
@media (max-width: 1000px) {
.pr-feats ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pr-feats ul { grid-template-columns: 1fr; }
}
.use-left { display: grid; gap: 22px; }
.srcs p { margin: 0 0 10px; color: var(--ink-3); font-size: 14px; font-weight: 650; }
.srcs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.srcs li { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #dfe5f0; color: var(--ink-2); font-size: 13px; font-weight: 650; }
/* ================================================================ v7: refinement (2026-10-21)
   Real-looking phones (one with a visibly curved waterfall display, one perfectly flat),
   chat bubbles that glide, a quieter and more expensive feel (hairlines, soft layered
   shadows, one radius scale, calmer type), a phone menu, and tighter small-screen rules.
   Radius scale: 24px panels, 18px tiles, pills for buttons and chips. */
:root {
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --hair: rgba(22, 33, 62, 0.08);
  --lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(22, 33, 62, 0.03), 0 28px 50px -32px rgba(22, 33, 62, 0.32);
  --rule: #edf1fa;
}
html { scroll-padding-top: 76px; }
body { text-rendering: optimizeLegibility; }
/* ---- type: calmer, more air */
.v6 .sec-h, .pricing-page .pr-feats h2, .pr-compare h2 { font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; }
.hx h1 { font-weight: 750; letter-spacing: -0.052em; }
.duo-sub { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; }
.duo, .use, .why, .worth { padding-block: clamp(64px, 9vw, 128px); }
.use { padding-top: clamp(24px, 4vw, 56px); }
/* ---- header */
.top { background: rgba(251, 252, 255, 0.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); transition: border-color 400ms ease, box-shadow 400ms ease; }
.top.scrolled { border-bottom-color: var(--hair); box-shadow: 0 10px 30px -22px rgba(22, 33, 62, 0.4); }
.links a { position: relative; padding: 6px 0; transition: color 250ms ease; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-soft); }
.links a:hover { text-decoration: none; }
.links a:hover::after { transform: scaleX(1); }
.menu-btn, .mnav { display: none; }
/* ---- buttons */
.btn { transition: transform 450ms var(--ease-soft), box-shadow 450ms var(--ease-soft), background-color 250ms ease, border-color 250ms ease; }
.btn-ink { background: linear-gradient(180deg, #26335a, #16213e); border-color: #16213e; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 16px 30px -16px rgba(22, 33, 62, 0.8); }
.btn.ghost { border-color: rgba(22, 33, 62, 0.22); background: rgba(255, 255, 255, 0.6); }
@media (hover: hover) and (pointer: fine) {
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 22px 34px -16px rgba(22, 33, 62, 0.75); }
.btn.ghost:hover { background: #fff; border-color: var(--ink); }
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 120ms; }
/* ---- surfaces: one hairline, one soft shadow */
.duo-col, .fp-col, .fl, .power li, .pr-feats li, .mail, .pass, .faq-list { border-color: var(--hair); box-shadow: var(--lift); }
.duo-col, .fp-col { border-radius: 28px; }
.fl, .mail, .pass, .faq-list { border-radius: 24px; }
.power li, .pr-feats li, .use-list button { border-radius: 20px; }
.duo-col { border-top-width: 1px; border-top-color: var(--hair); position: relative; }
.duo-col::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 4px 4px; background: var(--red); opacity: 0.85; }
.duo-win::before { background: var(--green); }
.duo-win, .fp-pass { border-color: rgba(19, 154, 91, 0.35); border-width: 1px; background: linear-gradient(180deg, #f1faf5, #fff 62%); }
.fl-pass { border: 1px solid rgba(19, 154, 91, 0.35); }
.use-list button { border-color: var(--hair); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 26px -22px rgba(22, 33, 62, 0.4); transition: border-color 400ms ease, background-color 400ms ease, transform 600ms var(--ease-soft), box-shadow 600ms var(--ease-soft); }
.use-list button[aria-selected="true"] { border-color: rgba(19, 154, 91, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 40px -26px rgba(19, 154, 91, 0.55); }
.power li, .pr-feats li { transition: transform 600ms var(--ease-soft), box-shadow 600ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
.power li:hover, .pr-feats li:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 34px 54px -30px rgba(22, 33, 62, 0.4); }
.use-list button:not([aria-selected="true"]):hover { transform: translateX(3px); }
}
/* ---- quiet entrance (JS adds .rise, then .in as each block arrives) */
.rise-on .rise { transition: opacity 1000ms var(--ease-soft), transform 1100ms var(--ease-soft); }
.rise-on .rise:not(.in) { opacity: 0; transform: translateY(26px); }
.rise-on .rise:nth-child(2) { transition-delay: 90ms; }
.rise-on .rise:nth-child(3) { transition-delay: 180ms; }
.rise-on .rise:nth-child(4) { transition-delay: 270ms; }
.rise-on .rise:nth-child(5) { transition-delay: 360ms; }
.rise-on .rise:nth-child(6) { transition-delay: 450ms; }
.rise-on .rise:nth-child(n+7) { transition-delay: 520ms; }
.rise-on .use-list .rise:not(.in) { transform: translateX(-18px); }
/* ---- phones: real-looking bodies */
.dv { --w: 288px; }
.dv::before, .dv::after { content: ""; position: absolute; right: -3.5px; width: 3.5px; border-radius: 0 3px 3px 0; background: var(--side); }
.dv::before { top: 24%; height: 48px; }
.dv::after { top: 33%; height: 84px; }
/* the curved-display phone: glass rolls off both long edges, metal rails are cylindrical */
.dv-moto {
  --side: #0c2a27; padding: 4px; border-radius: 52px / 58px;
  background: linear-gradient(90deg, #06201d 0, #3f8b80 1.2%, #1a554e 3.4%, #0a2824 12%, #0a2824 88%, #1a554e 96.6%, #3f8b80 98.8%, #06201d 100%);
  box-shadow: 0 0 0 1px #041412, 0 70px 70px -40px rgba(6, 28, 26, 0.9), 0 24px 34px -18px rgba(6, 28, 26, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.dv-moto .dv-screen { border-radius: 49px / 55px; background: #fff; box-shadow: 0 0 0 2px #020605; }
.dv-moto .dv-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 19; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 12, 12, 0.5) 0, rgba(4, 12, 12, 0.16) 3%, rgba(4, 12, 12, 0) 7%, rgba(4, 12, 12, 0) 93%, rgba(4, 12, 12, 0.16) 97%, rgba(4, 12, 12, 0.5) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0.4%, rgba(255, 255, 255, 0.85) 1.5%, rgba(255, 255, 255, 0) 3.4%, rgba(255, 255, 255, 0) 96.6%, rgba(255, 255, 255, 0.85) 98.5%, rgba(255, 255, 255, 0) 99.6%);
}
.dv-moto .dv-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 21; border-radius: inherit; pointer-events: none; box-shadow: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.26) 0, rgba(255, 255, 255, 0.07) 20%, rgba(255, 255, 255, 0) 38%);
}
.dv-moto .dv-cam { top: 14px; width: 12px; height: 12px; background: radial-gradient(circle at 35% 35%, #26323a, #020405 60%); box-shadow: 0 0 0 2.5px #000, 0 0 0 3.5px rgba(255, 255, 255, 0.07); }
.dv-moto .dv-bar { padding-inline: 30px; }
/* the flat phone: a true rectangle, straight rails, hard edges */
.dv-sam {
  --side: #8a8f98; padding: 3px; border-radius: 24px;
  background: linear-gradient(180deg, #e3e5ea 0, #a3a8b1 18%, #c9ccd2 50%, #a3a8b1 82%, #e3e5ea 100%);
  box-shadow: 0 0 0 1px #6b6f78, 0 70px 70px -40px rgba(22, 33, 62, 0.85), 0 24px 34px -18px rgba(22, 33, 62, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.dv-sam .dv-screen { border: 5px solid #050506; border-radius: 21px; background: #fff; }
.dv-sam .dv-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 21; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 26%);
}
.dv-sam .dv-cam { top: 13px; width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #222a30, #020405 62%); box-shadow: 0 0 0 2px #000; }
.dv-sam .dv-bar { padding-inline: 22px; }
/* ---- chat: bubbles glide in and push the rest up (measured heights, no jumps) */
.tgl { gap: 0; }
.tgl > .dm, .tgl > .startcard { margin-top: 6px; }
.tgl > :first-child { margin-top: 0; }
.playing .dm[data-at] {
  overflow: hidden; max-height: var(--h, 320px);
  transition: max-height 800ms var(--ease-soft), margin-top 800ms var(--ease-soft), padding 800ms var(--ease-soft), opacity 500ms ease, transform 800ms var(--ease-soft);
}
.playing .dm[data-at]:not(.on) { opacity: 0; transform: translateY(16px) scale(0.97); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
.playing .dpush { transition: opacity 500ms ease, transform 800ms var(--ease-soft); }
.playing .dpush[data-at]:not(.on) { transform: translateY(-120%) scale(0.98); }
.playing .pn { transition: opacity 500ms ease, transform 800ms var(--ease-soft); }
.playing .pghost { transition: opacity 900ms ease; }
.dpush, .pn { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dm { box-shadow: 0 1px 1px rgba(22, 33, 62, 0.07), 0 6px 14px -10px rgba(22, 33, 62, 0.25); }
@keyframes capin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hx-stage .dv { animation: dvin 1400ms var(--ease-soft) both; }
@keyframes dvin { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } }
.scr.on { animation: scrin 700ms var(--ease-soft); }
/* ---- tap targets and small screens */
@media (max-width: 900px) {
.links { display: none; }
.top { padding-block: 10px; gap: 10px; }
.top .join-top { margin-left: auto; min-height: 40px; }
.menu-btn { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 450ms var(--ease-soft); }
.top.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.top.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 6px var(--gutter) 16px; background: rgba(251, 252, 255, 0.97); border-bottom: 1px solid var(--hair); box-shadow: 0 30px 40px -28px rgba(22, 33, 62, 0.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 350ms ease, transform 500ms var(--ease-soft), visibility 350ms; }
.top.menu-open .mnav { opacity: 1; visibility: visible; transform: none; }
.mnav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hair); color: var(--ink); font: 650 18px/1 var(--display); text-decoration: none; }
.mnav a:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
.duo, .use, .why, .worth { padding-block: 56px; }
.v6 .sec-h { font-size: clamp(30px, 8.6vw, 40px); }
.duo-col, .fp-col { padding: 20px 14px 22px; border-radius: 24px; }
.duo-col .dv, .fp-col .dv { --w: 252px; }
.hx-stage .dv, .use-phone .dv { --w: 276px; }
.use-list button { min-height: 56px; padding: 12px 14px; }
.faq-item summary, .pr-faq summary { min-height: 56px; }
.btn-lg { min-height: 54px; }
.worth-cta { gap: 10px; }
.fl { padding: 20px; }
.pass { border-radius: 22px; }
}
@media (max-width: 380px) {
:root { --gutter: 16px; }
.hx-stage .dv, .use-phone .dv { --w: 252px; }
.duo-col .dv, .fp-col .dv { --w: 236px; }
.does b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.hx-stage .dv, .scr.on { animation: none; }
.rise-on .rise { transition: none; }
}
.why-grid > * { min-width: 0; }
.mail { overflow-wrap: anywhere; }
.mail-line { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 560px) {
.mail-line span { width: auto; }
.mail { font-size: 15.5px; }
}
/* curved glass: stronger roll-off and a bright specular rim, solid menu panel */
.dv-moto .dv-screen { box-shadow: 0 0 0 2px #020605, 0 0 0 3px rgba(150, 255, 235, 0.22); }
.dv-moto .dv-screen::before {
  background:
    linear-gradient(90deg, rgba(4, 12, 12, 0.66) 0, rgba(4, 12, 12, 0.3) 2.6%, rgba(4, 12, 12, 0.08) 6%, rgba(4, 12, 12, 0) 9%, rgba(4, 12, 12, 0) 91%, rgba(4, 12, 12, 0.08) 94%, rgba(4, 12, 12, 0.3) 97.4%, rgba(4, 12, 12, 0.66) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0.2%, rgba(255, 255, 255, 0.95) 1.3%, rgba(255, 255, 255, 0) 3.2%, rgba(255, 255, 255, 0) 96.8%, rgba(255, 255, 255, 0.95) 98.7%, rgba(255, 255, 255, 0) 99.8%);
}
@media (max-width: 900px) {
.mnav { background: #fbfcff; }
}
@media (max-width: 900px) {
.hx-grid > *, .hx-copy > * { justify-self: center; width: min(100%, 560px); }
.use-grid { justify-items: center; }
.use-left { width: min(100%, 640px); }
.duo-grid, .fp, .fp-lists { max-width: 640px; margin-inline: auto; }
.power { max-width: 760px; margin-inline: auto; }
.why-grid { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 560px) {
.pr-feats li { grid-template-columns: 46px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; }
.pr-feats li > i { grid-row: 1 / span 2; margin: 0; }
.power li { grid-template-columns: 46px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; }
.power li > i { grid-row: 1 / span 3; margin: 0; }
}
/* ================================================================ v8: student-first pass (2026-10-21)
   Bigger, higher-contrast phone text; stage captions under every phone (the story in words,
   synced to the animation); a field switcher; the browser-only email preview; honest answers,
   trust and Gmail-in-plain-words sections; pause / replay controls; a phone "Join" bar; and a
   lighter page on small devices (content-visibility, no blur on phones) without touching how
   it looks. */
/* ---- phone screens: larger type, darker small text */
.dv-screen { font-size: 13.5px; }
.tgh .who small { color: #566083; font-size: 11.5px; }
.draft p { font-size: 12.5px; line-height: 1.42; color: #343e63; }
.draft .to { font-size: 11.5px; color: #3f4a70; }
.draft .to em { font-size: 10.5px; }
.chk { font-size: 11.5px; }
.kbd > span:not(.tapdot) { font-size: 13px; padding: 9px 6px; }
.mlist { gap: 8px; }
.mlist li { align-items: start; }
.mlist li > span:nth-child(2) b { font-size: 13px; }
.mlist em { font-size: 11.5px; }
.mlist .mwhy { display: block; margin-top: 1px; color: #434d73; font-size: 11.5px; line-height: 1.3; font-weight: 500; }
.mlist small { color: #434d73; font-size: 11px; }
.dpush { font-size: 12.5px; color: #343e63; }
.dpush b { font-size: 13px; }
.startcard { color: #566083; font-size: 12px; }
.ptsum { color: #566083; font-size: 12px; }
.jt b { font-size: 13.5px; }
.jt small { color: #5d6788; font-size: 11.5px; }
.pbtn { font-size: 12px; }
.pn { font-size: 12.5px; color: #343e63; }
.pn b { font-size: 12.5px; }
.nudge { font-size: 12.5px; color: #343e63; }
.nudge small { color: #566083; }
.dm.day { align-self: center; padding: 0; background: transparent; box-shadow: none; }
.dm.day span { display: inline-block; padding: 3px 11px; border-radius: 999px; background: rgba(22, 33, 62, 0.14); color: #3f4a70; font-size: 11.5px; font-weight: 700; }
.tgl { position: relative; }
.measuring, .measuring * { transition: none !important; }
/* ---- the story in words, under each phone, synced with it */
.scap-row { width: 100%; max-width: 380px; margin-top: 16px; display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.scap, .fp-cap { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 14px 16px; min-height: 98px; border-radius: 18px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.fp-cap { flex: none; width: 100%; max-width: 380px; margin-top: 16px; }
.scap b, .fp-cap b { display: block; font: 700 16.5px/1.25 var(--display); letter-spacing: -0.015em; }
.scap span, .fp-cap span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.scap .win b { color: var(--green); }
.scap .lose b { color: var(--red); }
.playing .scap li:not(.on) { display: none; }
.playing .scap li.on { animation: capin 700ms var(--ease-soft) both; }
[data-story]:not(.playing) .scap li:not(:last-child) { display: none; }
.sctl { display: none; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; box-shadow: var(--lift); color: var(--ink); font-size: 19px; cursor: pointer; transition: transform 400ms var(--ease-soft), background-color 250ms ease; -webkit-tap-highlight-color: transparent; }
.ctl-on .sctl { display: grid; }
.sctl:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
.sctl:hover { background: #f3f6fc; }
}
/* ---- hero additions */
.hx-name { margin-top: 12px; max-width: 32em; color: var(--ink-3); font-size: 14.5px; line-height: 1.5; }
.hx-name b { color: var(--ink-2); }
.persona { width: 100%; max-width: 440px; margin-bottom: 20px; text-align: left; }
.persona-h { margin: 0 0 9px; color: #566083; font: 700 12.5px/1 var(--text); letter-spacing: 0.07em; text-transform: uppercase; }
.persona-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.persona-chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; color: var(--ink-2); font: 650 14px/1 var(--text); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 14px -10px rgba(22, 33, 62, 0.35); transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 400ms var(--ease-soft); -webkit-tap-highlight-color: transparent; }
.persona-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
.persona-chips button:not([aria-pressed="true"]):hover { border-color: #b9c8e4; transform: translateY(-1px); }
}
.persona-sub { margin: 11px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.persona-note { margin: 11px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff7e0; border: 1px solid #efd99a; color: #5f4a0d; font-size: 14.5px; line-height: 1.45; }
.persona-note[hidden] { display: none; }
/* ---- try it: built in the browser */
.try { padding-block: clamp(56px, 8vw, 112px); }
.try-grid { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.try-form { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.try-form label, .try-form legend { display: block; margin: 0 0 8px; padding: 0; color: var(--ink); font: 650 15px/1.3 var(--text); }
.try-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.try-form input[type="text"], .try-form textarea, .try-form select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #c6d0e3; background: #fff; color: var(--ink); font: 500 16px/1.4 var(--text); transition: border-color 250ms ease, box-shadow 250ms ease; }
.try-form textarea { min-height: 100px; resize: vertical; }
.try-form input:focus, .try-form textarea:focus, .try-form select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36, 87, 214, 0.14); }
.try-form ::placeholder { color: #7a84a3; }
.hint { display: block; margin-top: 7px; color: #566083; font-size: 14px; line-height: 1.4; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; margin: 0; cursor: pointer; }
.opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opts span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1.5px solid #c6d0e3; background: #fff; color: var(--ink-2); font: 650 14.5px/1 var(--text); transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }
.opts input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.opts input:focus-visible + span { outline: 2.5px solid var(--blue); outline-offset: 3px; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.try-side { position: sticky; top: 92px; display: grid; gap: 4px; }
.try-card { position: relative; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.try-out p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.try-out p:last-child { margin-bottom: 0; }
.try-out .k { display: inline-block; width: 66px; color: #566083; }
.try-out hr { margin: 14px 0; border: 0; border-top: 1px solid #e7ecf5; }
mark.fillin { padding: 1px 5px; border-radius: 5px; background: var(--hl-soft); color: var(--ink); font-weight: 600; }
.try-legend { margin: 14px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.try-side .btn { justify-self: start; margin-top: 18px; }
/* ---- honest answers and trust */
.trust { padding-block: clamp(56px, 8vw, 112px); }
.trust-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tr-card { display: grid; align-content: start; gap: 10px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.tr-card > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #e6f6ee; color: var(--green); font-size: 27px; }
.tr-card h3 { font: 700 20px/1.25 var(--display); letter-spacing: -0.02em; }
.tr-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.tr-card a { color: var(--ink); font-weight: 650; }
.tr-card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.tr-card li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; line-height: 1.4; }
.tr-card li > i { flex: none; margin-top: 1px; font-size: 20px; }
.tr-card li.yes > i { color: var(--green); }
.tr-card li.no > i { color: var(--red); }
.tr-tip { margin-top: 6px !important; padding-top: 12px; border-top: 1px solid #e7ecf5; font-size: 14.5px !important; color: #566083 !important; }
/* ---- Gmail explainer page (opens from the bot, before Google) */
.gi { padding-block: clamp(36px, 6vw, 80px) 80px; }
.gi h1 { margin-top: 4px; font-size: clamp(30px, 5vw, 46px); line-height: 1.06; font-weight: 700; letter-spacing: -0.04em; }
.gi-lede { margin-top: 12px; color: var(--ink-2); font-size: 18px; }
.gi-cols { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gi-can, .gi-cant { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.gi-can { border-top: 4px solid var(--green); }
.gi-cant { border-top: 4px solid var(--red); }
.gi h2 { display: flex; align-items: center; gap: 8px; font: 700 19px/1.2 var(--display); }
.gi-can h2 i { color: var(--green); }
.gi-cant h2 i { color: var(--red); }
.gi ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.gi-notes { margin-top: 18px !important; padding: 18px 20px !important; border-radius: 18px; background: #f3f6fc; }
.gi-notes li { display: flex; gap: 12px; align-items: flex-start; }
.gi-notes li > i { flex: none; margin-top: 1px; font-size: 22px; color: var(--blue); }
.gi-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
/* ---- a Join bar on phones, once the hero button has scrolled away */
.sjoin { display: none; }
@media (max-width: 900px) {
.sjoin { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: block; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(251, 252, 255, 0.97) 62%, rgba(251, 252, 255, 0)); transform: translateY(115%); pointer-events: none; transition: transform 650ms var(--ease-soft); }
.sjoin.show { transform: none; pointer-events: auto; }
.sjoin .btn { width: 100%; }
}
/* ---- lighter on small and low-power devices, same look */
.duo, .try, .use, .why, .worth, .trust, .h3-faq { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@media (max-width: 900px), (pointer: coarse) {
.dpush, .pn { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
.top { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 252, 255, 0.96); }
}
.lite .dv { box-shadow: none; }
/* ---- layout: tablets and phones */
@media (max-width: 900px) {
.try-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
.try-side { position: static; }
.trust-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
.persona { max-width: 560px; }
}
@media (max-width: 760px) {
.hx-stage .dv, .use-phone .dv { --w: min(300px, 82vw); }
.duo-col .dv, .fp-col .dv { --w: min(280px, 80vw); }
.persona-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.persona-chips::-webkit-scrollbar { display: none; }
.persona-chips button { scroll-snap-align: start; flex: none; }
.scap-row { max-width: none; }
.scap, .fp-cap { min-height: 104px; }
body { padding-bottom: 0; }
}
@media (max-width: 600px) {
.field.two { grid-template-columns: 1fr; }
.gi-actions .btn { width: 100%; }
.try-side .btn { width: 100%; }
}
@media (max-width: 380px) {
.hx-stage .dv, .use-phone .dv { --w: 262px; }
.duo-col .dv, .fp-col .dv { --w: 246px; }
}
@media (prefers-reduced-motion: reduce) {
.playing .scap li.on { animation: none; }
}
.hx-grid > *, .hx-stage, .persona { min-width: 0; }
@media (max-width: 900px) {
.hx-name { order: 4; }
.hx-cta { order: 5; }
.hx-copy .cta-note { order: 6; }
.hx-stage { order: 7; }
.does { order: 8; }
}
.gi ul, .gi-notes li span { overflow-wrap: anywhere; min-width: 0; }
/* ================================================================ v9 (2026-10-21)
   Phones with their own personalities (the hero stays on the curved-display one, with softer
   corners), a field switcher that looks like it belongs, "no projects" and "other fields"
   scripts, a compact phone layout (swipeable pairs, chip steppers, folded answers), real
   Terms / Privacy pages, a quiet beta banner instead of the frosted duel, and a lighter paint
   path (no per-card blur, contained phone screens, cheaper shadows on phones). */
/* ---- curved-display phone: same curved glass, softer corners */
.dv-moto { padding: 4px; border-radius: 38px / 42px; box-shadow: 0 0 0 1px #041412, 0 60px 70px -42px rgba(14, 110, 100, 0.55), 0 24px 34px -18px rgba(6, 28, 26, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.dv-moto .dv-screen { border-radius: 35px / 39px; }
/* ---- an iPhone X style phone: notch, steel rails, thick bezel */
.dv-ios {
  --side: #8c919b; padding: 3px; border-radius: 46px;
  background: linear-gradient(145deg, #f4f5f8 0%, #a4a9b3 22%, #dcdee3 48%, #8d929c 74%, #eceef2 100%);
  box-shadow: 0 0 0 1px #5a5e67, 0 60px 70px -42px rgba(60, 80, 140, 0.5), 0 24px 34px -18px rgba(22, 33, 62, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.dv-ios::before { right: auto; left: -3.5px; top: 21%; height: 36px; border-radius: 3px 0 0 3px; }
.dv-ios::after { right: auto; left: -3.5px; top: 29%; height: 62px; border-radius: 3px 0 0 3px; box-shadow: 0 78px 0 0 var(--side); }
.dv-ios .dv-screen { border: 8px solid #050506; border-radius: 40px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.dv-ios .dv-screen::after { content: ""; position: absolute; inset: 0; z-index: 21; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.04) 24%, rgba(255, 255, 255, 0) 40%); }
.dv-ios .dv-cam { top: 11px; width: 43%; height: 25px; border-radius: 0 0 18px 18px; background: #050506; box-shadow: none; }
.dv-ios .dv-cam::before { content: ""; position: absolute; left: 50%; top: 8px; width: 34px; height: 5px; margin-left: -34px; border-radius: 4px; background: #1b1d22; }
.dv-ios .dv-cam::after { content: ""; position: absolute; left: 50%; top: 6px; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3550, #07090d 65%); }
.dv-ios .dv-bar { padding: 7px 24px 0; }
.dv-ios .dlay { padding-top: 34px; }
/* ---- a realme style phone: flat, champagne frame, punch-hole top left */
.dv-rm {
  --side: #b99444; padding: 3px; border-radius: 32px;
  background: linear-gradient(145deg, #f6e7bd 0%, #cfa850 40%, #ecd38f 62%, #a98230 100%);
  box-shadow: 0 0 0 1px #8a6a25, 0 60px 70px -42px rgba(214, 150, 40, 0.55), 0 24px 34px -18px rgba(22, 33, 62, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.dv-rm .dv-screen { border: 5px solid #060607; border-radius: 29px; }
.dv-rm .dv-screen::after { content: ""; position: absolute; inset: 0; z-index: 21; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 38%); }
.dv-rm .dv-cam { left: 25px; top: 15px; width: 11px; height: 11px; transform: none; background: radial-gradient(circle at 35% 35%, #26323a, #020405 62%); box-shadow: 0 0 0 2px #000; }
.dv-rm .dv-bar { padding: 9px 22px 0 48px; }
/* ---- a flat rectangle (the Samsung style one): hard edges */
.dv-sam { border-radius: 22px; box-shadow: 0 0 0 1px #6b6f78, 0 60px 70px -42px rgba(80, 90, 120, 0.5), 0 24px 34px -18px rgba(22, 33, 62, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.dv-sam .dv-screen { border-radius: 19px; }
/* ---- the field switcher */
.persona { width: 100%; max-width: 460px; margin-bottom: 20px; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--hair); box-shadow: var(--lift); text-align: left; }
.persona-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; overflow: visible; }
.persona-chips button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--hair); background: #fff; color: var(--ink-2); font: 650 13.5px/1.2 var(--text); text-align: center; white-space: normal; cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset; transition: transform 500ms var(--ease-soft), background-color 350ms ease, color 350ms ease, border-color 350ms ease, box-shadow 500ms var(--ease-soft); }
.persona-chips button i { font-size: 23px; color: #8b95b3; transition: color 350ms ease, transform 500ms var(--ease-soft); }
.persona-chips button[aria-pressed="true"] { background: linear-gradient(160deg, #2a3862, #16213e); border-color: #16213e; color: #fff; box-shadow: 0 16px 28px -16px rgba(22, 33, 62, 0.8); }
.persona-chips button[aria-pressed="true"] i { color: #86e7b6; transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) {
.persona-chips button:not([aria-pressed="true"]):hover { transform: translateY(-2px); border-color: #b9c8e4; box-shadow: 0 14px 24px -16px rgba(22, 33, 62, 0.4); }
}
.persona-sub { margin: 12px 2px 0; font-size: 14px; }
.persona-note { margin: 12px 2px 0; }
/* the "no projects" script adds two bubbles; "other fields" is a short honest chat */
.only-b { display: none; }
.is-beginner .only-b { display: block; }
.is-other .sflow, .is-other .scap { display: none; }
.is-other .scap-row { justify-content: center; }
/* ---- pricing: a calm beta banner instead of the frosted duel */
.price-zone.is-beta { margin-top: 0; }
.price-zone.is-beta .passes { filter: none; user-select: none; }
.price-zone.is-beta .pass .btn { opacity: 0.5; }
.beta-banner { margin: 28px 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 18px 22px; border-radius: 22px; background: #fffbea; border: 1px solid #efdca0; }
.beta-banner > div { flex: 1 1 280px; }
.beta-banner h2 { font: 700 21px/1.2 var(--display); letter-spacing: -0.02em; }
.beta-banner p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
/* ---- answers: open on laptops, folded on phones */
@media (min-width: 761px) {
}
.swipe-hint { display: none; }
/* ---- Terms and Privacy: real documentation-style pages */
.lg-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); }
.lg-wrap { width: min(1120px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.lg-hero h1 { margin-top: 4px; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; font-weight: 700; letter-spacing: -0.045em; }
.lg-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #566083; font-size: 14.5px; }
.lg-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lg-intro { margin-top: 14px; max-width: 46em; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }
.lg-switch { margin-top: 20px; display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.lg-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--ink-2); font: 650 14.5px/1 var(--text); text-decoration: none; transition: background-color 300ms ease, color 300ms ease; }
.lg-switch a[aria-current="page"] { background: var(--ink); color: #fff; }
.lg-glance { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lg-glance li { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.lg-glance li > i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: #e6f6ee; color: var(--green); font-size: 22px; }
.lg-glance b { font: 700 16px/1.25 var(--display); letter-spacing: -0.01em; }
.lg-glance span { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.lg-body { padding: clamp(16px, 3vw, 32px) 0 clamp(56px, 8vw, 110px); }
.lg-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.lg-toc { position: sticky; top: 92px; }
.lg-toc summary { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #566083; font: 700 12.5px/1 var(--text); letter-spacing: 0.07em; text-transform: uppercase; list-style: none; cursor: default; }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc summary i { display: none; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid #e4eaf5; }
.lg-toc a { display: block; padding: 7px 12px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease; }
.lg-toc a:hover { color: var(--ink); }
.lg-toc a.active { color: var(--ink); border-left-color: var(--green); background: linear-gradient(90deg, #eef9f3, transparent); font-weight: 650; }
.lg-doc { max-width: 720px; }
.lg-doc section { padding: 6px 0 30px; scroll-margin-top: 92px; }
.lg-doc h2 { display: flex; align-items: center; gap: 12px; font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -0.03em; }
.lg-doc h2 .n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #eef2fa; color: var(--ink-2); font: 750 14px/1 var(--text); letter-spacing: 0; }
.lg-doc p { margin: 12px 0 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.lg-doc ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.lg-doc li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.lg-doc li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.lg-help { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.lg-help > i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #e6f6ee; color: var(--green); font-size: 26px; }
.lg-help > div { flex: 1 1 220px; display: grid; }
.lg-help b { font: 700 18px/1.25 var(--display); }
.lg-help span { color: var(--ink-2); font-size: 15px; }
/* ---- paint path: contained phone screens, light sections stay lazy, phones get cheaper shadows */
.dv-screen, .tgl { contain: layout paint; }
.playing .dm[data-at] { will-change: opacity, transform; }
.rise-on .rise:not(.in) { will-change: opacity, transform; }
.duo, .try, .use, .why, .worth { content-visibility: visible; }
.trust, .h3-faq { content-visibility: auto; contain-intrinsic-size: auto 700px; }
@media (max-width: 900px) {
:root { --lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 24px -18px rgba(22, 33, 62, 0.3); }
.dv-moto, .dv-ios, .dv-rm, .dv-sam { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 28px 36px -26px rgba(22, 33, 62, 0.55); }
.lg-cols { grid-template-columns: 1fr; gap: 14px; }
.lg-toc { position: static; padding: 4px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); }
.lg-toc summary { margin: 0; min-height: 48px; cursor: pointer; }
.lg-toc summary i { display: inline; }
.lg-toc details[open] summary { margin-bottom: 6px; }
.lg-glance { grid-template-columns: 1fr 1fr; }
.lg-doc { max-width: none; }
}
/* ---- phones: less scrolling, nothing oversized */
@media (max-width: 760px) {
.duo, .try, .use, .why, .worth, .trust { padding-block: 38px; }
.v6 .sec-h { font-size: clamp(27px, 7.8vw, 34px); }
.duo-sub { margin-top: 8px; font-size: 15.5px; }
.hx { padding: 6px 0 36px; }
.hx h1 { font-size: clamp(31px, 8.8vw, 40px); }
.hx-lede { margin-top: 12px; font-size: 16px; }
.hx-name { margin-top: 8px; font-size: 13px; }
.hx-cta { margin-top: 18px; min-height: 52px; }
.hx-copy .cta-note { margin-top: 10px; font-size: 13px; }
.hx-stage { margin-top: 20px; }
.does { margin-top: 22px; grid-template-columns: 1fr 1fr; gap: 10px; }
.does li { grid-template-columns: 1fr; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--lift); }
.does li > i { width: 38px; height: 38px; font-size: 21px; }
.does li > span { font-size: 0; line-height: 0; }
.does b { font-size: 14.5px; line-height: 1.25; }
.persona { padding: 12px; border-radius: 20px; }
.persona-chips { gap: 6px; }
.persona-chips button { min-height: 58px; padding: 8px 4px; border-radius: 14px; font-size: 12.5px; gap: 4px; }
.persona-chips button i { font-size: 20px; }
.persona-sub, .persona-note { font-size: 13px; }
.dv { aspect-ratio: 288 / 540; }
.hx-stage .dv, .use-phone .dv { --w: min(264px, 72vw); }
.duo-col .dv, .fp-col .dv { --w: min(244px, 66vw); }
.scap, .fp-cap { min-height: 90px; padding: 12px 14px; border-radius: 16px; }
.scap b, .fp-cap b { font-size: 15.5px; }
.scap span, .fp-cap span { font-size: 13.5px; }
.scap-row { margin-top: 12px; }
.sctl { width: 42px; height: 42px; }
/* the two inboxes, and free vs pass, are swipeable pairs instead of two tall stacks */
.duo-grid, .fp { display: flex; gap: 12px; margin: 22px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; -webkit-overflow-scrolling: touch; }
.duo-grid::-webkit-scrollbar, .fp::-webkit-scrollbar { display: none; }
.duo-col, .fp-col { flex: 0 0 86%; scroll-snap-align: center; padding: 16px 12px 18px; gap: 12px; }
.duo-vs { display: none; }
.swipe-hint { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: #566083; font: 650 13px/1 var(--text); }
.outcome li { padding: 9px 12px; font-size: 14px; }
.duo-foot { margin-top: 8px; font-size: 12.5px; }
.fp-lists { margin-top: 12px; gap: 12px; }
.fl { padding: 18px; }
.fl li { font-size: 14.5px; }
/* steps: a row of chips, then the phone */
.use-list { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.use-list::-webkit-scrollbar { display: none; }
.use-list li { flex: none; scroll-snap-align: start; }
.use-list button { min-height: 46px; padding: 8px 14px 8px 8px; border-radius: 999px; grid-template-columns: 30px auto; gap: 8px; }
.use-list .n { width: 30px; height: 30px; font-size: 14px; }
.use-list .t b { font-size: 14.5px; white-space: nowrap; }
.use-list button[aria-selected="true"]::after { display: none; }
.srcs { display: none; }
.use-grid { gap: 14px; }
.bonus { margin-top: 34px; }
.power { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.power li { padding: 14px; border-radius: 16px; gap: 3px; }
.power li > i { width: 38px; height: 38px; font-size: 21px; margin-bottom: 4px; }
.power b { font-size: 15px; }
.power span { font-size: 13px; line-height: 1.4; }
.power em { font-size: 14px; }
.try-form { padding: 16px; gap: 16px; border-radius: 20px; }
.try-card { padding: 16px; border-radius: 20px; }
.try-out p { font-size: 15px; }
.trust-grid { gap: 10px; margin-top: 18px; }
.tr-card { padding: 18px; gap: 8px; border-radius: 20px; }
.tr-card > i { width: 42px; height: 42px; font-size: 23px; }
.tr-card p, .tr-card li { font-size: 14.5px; }
.mail { padding: 16px; }
.notes { gap: 16px; }
.notes b { font-size: 17px; }
.notes span { font-size: 14.5px; }
.why-grid { margin-top: 20px; gap: 22px; }
.worth-cta { margin-top: 22px; }
.pr-feats ul { grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-feats li { display: grid; grid-template-columns: 1fr; padding: 14px; }
.pr-feats li > i { grid-row: auto; margin-bottom: 4px; width: 38px; height: 38px; font-size: 21px; }
.pr-feats b { font-size: 15px; }
.pr-feats span { font-size: 13px; }
.beta-banner { padding: 16px; border-radius: 18px; }
.lg-glance { grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-glance li { padding: 12px; }
.lg-glance b { font-size: 14.5px; }
.lg-glance span { font-size: 12.5px; }
.lg-doc p, .lg-doc li { font-size: 15.5px; }
.lg-help { padding: 16px; }
.lg-help .btn { width: 100%; }
}
@media (max-width: 380px) {
.persona-chips button { font-size: 12px; }
.hx-stage .dv, .use-phone .dv { --w: 244px; }
.duo-col .dv, .fp-col .dv { --w: 232px; }
}
@media (max-width: 760px) {
.power li { grid-template-columns: 1fr; }
.power li > i { grid-row: auto; }
}

/* ---- no status bar: the app runs edge to edge, its header sits under the camera */
.dv { --top: 26px; }
.dv-ios { --top: 34px; }
.dv-bar { display: none; }
.dlay, .dv-ios .dlay { padding-top: 0; }
.tgh { padding-top: calc(var(--top) + 4px); }
.pth { padding-top: calc(var(--top) + 6px); }
.dpush, .pns { top: calc(var(--top) + 8px); }

/* ================================================================ v10 phone finish (2026-10-21)
   One clean metal band per phone (no outer ring, no white inner line), black glass, no sheen
   over the screen, flush side keys, a soft layered shadow. The curved phone keeps its curve as
   a dark roll-off at the long edges (no white stripes over the chat). Banners sit at the very
   top, over the app header, like a real heads-up notification. */
.dv::before, .dv::after { width: 2px; right: -2px; border-radius: 0 2px 2px 0; opacity: 0.85; }
.dv-ios::before, .dv-ios::after { right: auto; left: -2px; border-radius: 2px 0 0 2px; }
.dv-moto, .dv-ios, .dv-rm, .dv-sam {
  box-shadow: 0 1px 1px rgba(15, 25, 50, 0.08), 0 18px 30px -18px rgba(15, 25, 50, 0.45), 0 50px 80px -46px rgba(15, 25, 50, 0.55);
}
.dv-screen::after, .dv-moto .dv-screen::after, .dv-ios .dv-screen::after, .dv-rm .dv-screen::after, .dv-sam .dv-screen::after { content: none; }

/* curved display: teal metal, glass rolling off both long edges */
.dv-moto { padding: 3px; background: linear-gradient(90deg, #0b2724 0%, #2c6b62 1.6%, #133d38 5%, #0d2d29 50%, #133d38 95%, #2c6b62 98.4%, #0b2724 100%); }
.dv-moto .dv-screen { box-shadow: none; background: #fff; }
.dv-moto .dv-screen::before { background: linear-gradient(90deg, rgba(6, 16, 18, 0.34) 0%, rgba(6, 16, 18, 0.1) 2.6%, rgba(6, 16, 18, 0) 6%, rgba(6, 16, 18, 0) 94%, rgba(6, 16, 18, 0.1) 97.4%, rgba(6, 16, 18, 0.34) 100%); }

/* iPhone X style: polished steel, even black bezel, notch */
.dv-ios { padding: 3px; background: linear-gradient(180deg, #e9ebef 0%, #b7bcc5 30%, #d9dce1 55%, #a9aeb8 80%, #e4e6ea 100%); }
.dv-ios .dv-screen { border-width: 7px; box-shadow: none; }

/* realme style: champagne gold, slim bezel, punch-hole */
.dv-rm { padding: 3px; background: linear-gradient(180deg, #f1dfae 0%, #c9a24a 35%, #e6cb86 60%, #b38d3c 100%); }
.dv-rm .dv-screen { border-width: 4px; }

/* flat rectangle: graphite titanium, hard corners */
.dv-sam { padding: 3px; background: linear-gradient(180deg, #8e939b 0%, #c7cad0 40%, #9da2aa 70%, #b9bdc4 100%); }
.dv-sam .dv-screen { border-width: 4px; }

/* camera holes: glass lens, no halo */
.dv-cam { box-shadow: none; }
.dv-moto .dv-cam, .dv-rm .dv-cam, .dv-sam .dv-cam { background: radial-gradient(circle at 38% 36%, #3a4757 0, #0b0f14 45%, #000 70%); }

/* heads-up banners cover the app header cleanly */
.dpush { top: 8px; z-index: 25; background: #fff; box-shadow: 0 1px 0 rgba(15, 25, 50, 0.04), 0 14px 30px -12px rgba(15, 25, 50, 0.45); }
.dv-ios .dpush { top: 36px; }
.pns { top: 8px; z-index: 25; }
.dv-ios .pns { top: 36px; }
@media (max-width: 900px) {
  .dv-moto, .dv-ios, .dv-rm, .dv-sam { box-shadow: 0 1px 1px rgba(15, 25, 50, 0.08), 0 22px 34px -24px rgba(15, 25, 50, 0.55); }
}
.dpush, .pns { top: 32px; }
.dv-ios .dpush, .dv-ios .pns { top: 40px; }

/* ---- Hinglish toggle and "price at launch" (2026-10-21) */
.lang-btn { margin-left: 12px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; color: var(--ink-2); font: 650 14px/1 var(--text); cursor: pointer; transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }
.lang-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .lang-btn[aria-pressed="false"]:hover { border-color: var(--ink); color: var(--ink); } }
@media (max-width: 900px) { .lang-btn { margin-left: auto; min-height: 36px; padding: 0 12px; font-size: 13px; } .top .join-top { margin-left: 8px; } }
@media (max-width: 380px) { .lang-btn { padding: 0 10px; } }
.at-launch { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff7e0; border: 1px solid #efd99a; color: #5f4a0d; font: 700 15px/1.2 var(--text); letter-spacing: 0; }
.does li > span > span { display: block; }

/* ---- laptop hero: the field picker sits beside the phone, and the phone is sized to the
   screen height, so picker + phone + caption fit in one screen (owner, 2026-10-21). Phones
   (<= 900px) keep their own layout. */
@media (min-width: 901px) {
  .hx { padding-top: clamp(12px, 2vw, 28px); padding-bottom: clamp(32px, 4vw, 56px); }
  .hx-grid { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3.4vw, 56px); }
  .hx-stage { display: grid; grid-template-columns: 208px auto; grid-template-areas: "persona phone" "persona caps"; column-gap: clamp(18px, 2vw, 30px); row-gap: 0; align-items: center; justify-items: center; }
  .hx-stage .persona { grid-area: persona; width: 208px; max-width: none; margin: 0; padding: 12px; align-self: center; }
  .hx-stage .persona-h { margin-bottom: 8px; font-size: 11.5px; }
  .hx-stage .persona-chips { grid-template-columns: 1fr; gap: 6px; }
  .hx-stage .persona-chips button { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; text-align: left; }
  .hx-stage .persona-chips button i { font-size: 19px; }
  .hx-stage .persona-sub { margin-top: 10px; font-size: 12.5px; line-height: 1.45; }
  .hx-stage .persona-note { margin-top: 10px; padding: 10px 12px; font-size: 12.5px; }
  .hx-stage .dv { grid-area: phone; --w: clamp(228px, calc((100dvh - 316px) * 0.475), 286px); }
  .hx-stage .scap-row { grid-area: caps; max-width: 320px; margin-top: 12px; }
  .hx-stage .scap { min-height: 88px; padding: 12px 14px; }
  .hx-stage .scap b { font-size: 15.5px; }
  .hx-stage .scap span { font-size: 13.5px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .hx-stage .persona-chips { gap: 5px; }
  .hx-stage .persona-chips button { min-height: 37px; padding: 6px 12px; }
  .hx-stage .persona-sub, .hx-stage .persona-note { font-size: 12px; margin-top: 8px; }
}

/* ---- 2026-10-21 (owner): emails shaped like real drafts, one Questions list, pass lists under
   their phones, the email preview as a swipe on phones */
.draft p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mail-sign { line-height: 1.6; }
.mail-link { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.mail .m4::after { content: "4"; }
.fp-col .fl { width: 100%; max-width: 380px; margin-top: 4px; box-shadow: none; }
.fp-pass .fl { background: #fff; }
.h3-faq .duo-sub { margin-bottom: 4px; }
.faq-item summary span { flex: 1; }
.try-hint { display: none; }
@media (max-width: 760px) {
  .try-hint { display: flex; }
  .try-grid { display: flex; gap: 12px; margin: 14px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; align-items: stretch; }
  .try-grid::-webkit-scrollbar { display: none; }
  .try-grid > .try-form, .try-grid > .try-side { flex: 0 0 88%; scroll-snap-align: center; }
  .try-side { position: static; align-content: start; }
  .fp-col .fl { padding: 16px; }
}
.mail-line > span + span { flex: 1; width: auto; color: var(--ink); }

/* hero: what you can send besides a resume (links + a voice note), hidden in the no-projects and
   other-field scripts */
.is-beginner .only-a, .is-other .only-a { display: none; }
.dm.srcs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.dm.srcs > span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.dm.srcs i { margin: 0; }
.dm.srcs .wave { width: 44px; }
/* Bubbles never shrink to fit: once the chat overflows, older ones slide off the top instead of
   being squeezed and cut mid-line (owner, 2026-10-21, on phones). */
.tgl > *, .tgl .dm { flex-shrink: 0; }
/* Job-portal rows and the To line stay on one line on narrow phones, ending in "…" like a real
   app, instead of wrapping word by word or running past the card (owner, 2026-10-21). */
.jt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.jt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptj li { gap: 8px; }
.draft .to { min-width: 0; }
.draft .to > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft .to em { flex: none; }