/* Greetmark's own pages (home, claim, sign in, dashboard). Cards have their own themes.
   Direction D, "Met in Person": cotton paper, night ink, one Helvetica stack at 400 and 700 (Arial has no 500 or 600),
   no italics. Gallery where you work: hairlines, matted photos. Postmark where you meet: stamps, dated postmarks. */

/* The accent, in one line: light text and fill, dark-mode text, dark-mode button fill. Night ink: buttons, links and focus are ink.
   The one colour is --postmark, below, and it appears only in postmarks. */
:root { --accent-light: #26223a; --accent-dark: #f1ebdd; --accent-fill-dark: #f1ebdd; }

:root {
  color-scheme: light;
  --paper: #faf8f3; --paper-2: #f2ece0; --card: #fffdf8; --mat: #f1ece2;
  --ink: #26223a; --ink-2: #514a63; --ink-3: #655e76;
  --rule: rgba(38, 34, 58, .14); --rule-strong: #26223a; --field: #8e889c;
  --accent: var(--accent-light); --accent-ink: #fffdf8; --btn: var(--accent-light); --btn-ink: #fffdf8;
  --postmark: #8a2f6a;   /* plum, postmarks only (7.3:1) */
  --link: var(--accent); --focus: var(--accent);
  --ok: #1d6b45; --bad: #b42318; --danger: var(--bad); --danger-ink: #fff;
  --stamp-paper: #fffdf8; --stamp-red: #c8452c;
  --hi: rgba(255, 255, 255, .9); --lo: rgba(60, 48, 30, .22);
  --shadow: 0 0 0 1px var(--rule), inset 0 1px 0 var(--hi), 0 10px 22px -14px var(--lo);   /* dialogs and the phone only */
  --flat: 0 0 0 1px var(--rule);   /* panels, look tiles: a hairline, no lift */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --display: var(--font); --label: var(--font);
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #17141f; --paper-2: #221d2e; --card: #201c2d; --mat: #2b2638;
    --ink: #f1ebdd; --ink-2: #cdc4da; --ink-3: #a097b0;
    --rule: rgba(241, 235, 221, .14); --rule-strong: #f1ebdd; --field: #7d758e;
    --accent: var(--accent-dark); --accent-ink: #17141f; --btn: var(--accent-fill-dark); --btn-ink: #17141f; --postmark: #d6a0d0;
    --ok: #7ed6a5; --bad: #ff8f84; --danger-ink: #17141f; --stamp-paper: #ebe2cf;
    --hi: rgba(255, 255, 255, .05); --lo: rgba(0, 0, 0, .6);
    --ring-outer: 3.2px; --ring-inner: 1.5px; --ring-ink: url(#ink-soft);   /* postmarks hold up on night ink */
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/24px var(--font); color: var(--ink); background: var(--paper); }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
b, strong { font-weight: 700; }
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 720px; margin: 0 auto; padding: 8px 16px; border-bottom: 1px solid var(--rule); }
/* The logo is /brand.svg (one file, its own light and dark ink); its width comes from the file */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.wordmark-img { display: block; width: auto; height: 28px; }
.top nav { display: flex; align-items: center; gap: 4px 18px; font-size: 15px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }
/* Type: v07's 32 / 16 / 12 scale on an 8px grid */
h1 { font: 700 32px/40px var(--font); letter-spacing: -.02em; margin: 8px 0 16px; text-wrap: balance; }
h2 { font: 700 20px/24px var(--font); letter-spacing: -.01em; margin: 32px 0 16px; }
h3 { font: 700 16px/24px var(--font); margin: 0 0 8px; }
em, i { font-style: normal; }
h1 em, h2 em { font-weight: 700; }   /* emphasis is weight, never italic or colour */
.lede { font-size: 16px; line-height: 24px; color: var(--ink-2); margin: 0 0 24px; max-width: 36em; }
.muted { color: var(--ink-3); font-size: 14px; }
.label { font: 700 12px/16px var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
/* Panels are pressed card faces: a hairline, a highlight along the top edge and a soft shadow */
.panel { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--flat); padding: 24px; margin: 0 0 16px; }
@media (max-width: 480px) { .panel { padding: 16px; } }
/* Panel titles: 20px, with a plain 20px icon in ink-3 before them */
.panel > h3 { display: flex; align-items: center; gap: 10px; font: 700 20px/24px var(--font); letter-spacing: -.01em; margin: 0 0 16px; }
.tile { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink-3); }
.tile .icon { width: 20px; height: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius); border: 0;
       font: 700 15px/1.2 var(--font); background: var(--ink); color: var(--paper); text-decoration: none; text-align: center; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn.primary { background: var(--btn); color: var(--btn-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .2); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--field); }
.btn.ghost:hover { filter: none; background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.field { display: block; margin: 0 0 16px; }
.field > span, .field > label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 6px; }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=search], textarea, select {
  width: 100%; min-height: 44px; font: 400 16px var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
input[type=search] { appearance: none; }
textarea { min-height: 96px; resize: vertical; }
.prefix { display: flex; align-items: center; min-height: 44px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--paper); }
.prefix:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.prefix span { padding: 0 0 0 12px; color: var(--ink-3); white-space: nowrap; font: 400 15px var(--mono); }
.prefix input { border: 0; padding-left: 1px; background: transparent; font: 400 15px var(--mono); }
.prefix input:focus-visible { outline: 0; }
.hint { font-size: 13px; line-height: 18px; color: var(--ink-3); margin: 8px 0 0; }
.hint.ok { color: var(--ok); } .hint.bad { color: var(--bad); }
.notice { padding: 16px; border-radius: var(--radius); background: var(--paper-2); margin: 0 0 16px; font-size: 16px; line-height: 24px; }

/* People you've met: where you meet, so each photo is a perforated stamp and each meeting a dated postmark */
.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.person { display: flex; gap: 14px; align-items: center; min-height: 44px; padding: 14px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.person:hover { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.person > span:not(.pm, .mono) { flex: 1; min-width: 0; } /* the text, not the stamp or the postmark */
.person b { display: block; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.person small { color: var(--ink-2); display: block; font-size: 14px; line-height: 1.35; margin-top: 2px; }
.person small + small { color: var(--ink-3); font-size: 13px; }
.person .provenance { display: block; margin-top: 6px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; }
/* Claim page: who invited you, and the line that says why that matters */
.invited { margin: 0 0 24px; }
.invited .lede { margin: 0 0 4px; }
.invited .muted { margin: 0; }
/* A stamp from one element: holes in the 3px border, paper in the padding, the photo (or initials) inside. Sizes are multiples of 8. */
.person img, .person .mono { flex: none; box-sizing: border-box; width: 48px; height: 56px; padding: 4px; border: 3px solid transparent; transform: rotate(-2deg);
  background: linear-gradient(var(--stamp-paper), var(--stamp-paper)) padding-box,
              radial-gradient(circle at 4px 4px, transparent 2.4px, var(--stamp-paper) 2.9px) -4px -4px / 8px 8px border-box;
  filter: drop-shadow(0 1px 1px rgba(38, 34, 58, .32)); object-fit: cover; }
.person .mono { display: grid; place-items: center; background: linear-gradient(#26223a, #26223a) content-box, linear-gradient(var(--stamp-paper), var(--stamp-paper)) padding-box,
              radial-gradient(circle at 4px 4px, transparent 2.4px, var(--stamp-paper) 2.9px) -4px -4px / 8px 8px border-box; color: #fff8ec; font: 700 14px/1 var(--font); }
.person:nth-child(even) img, .person:nth-child(even) .mono { transform: rotate(1.5deg); }
.pm { flex: none; width: 64px; height: 64px; color: var(--postmark); }
.pm text { font-family: var(--font); font-weight: 700; }
@media (max-width: 480px) { .pm { width: 56px; height: 56px; } }

/* Tabs: a horizontal strip below 1040px, a left rail from 1040px (see the shell rules under the dashboard heading) */
.tabs { display: flex; gap: 2px; overflow-x: auto; margin: 0 0 16px; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.tabs [role=tab] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-2); font: 400 15px var(--font); text-decoration: none; white-space: nowrap; }
.tabs [role=tab]:hover { color: var(--ink); }
.tabs [role=tab][aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.tab-icon { display: none; }
/* The label reserves the width of its bold self, so the active tab never shifts its neighbours */
.tab-label { display: inline-grid; }
.tab-label::after { content: attr(data-text); grid-area: 1 / 1; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.thumbs { display: flex; gap: 6px; margin-top: 6px; } .thumbs img { width: 56px; height: 56px; object-fit: cover; border: 3px solid var(--mat); box-shadow: 0 0 0 1px var(--rule); }
.qr { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--rule); }
pre.code { white-space: pre-wrap; word-break: break-all; font: 13px/1.5 var(--mono); background: var(--paper-2); padding: 12px; border-radius: var(--radius-sm); margin: 0 0 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible, .linklike:focus-visible, .tabs [role=tab]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
dialog { border: 0; border-radius: var(--radius-lg); padding: 0; max-width: min(560px, 92vw); width: 100%; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(23, 20, 31, .5); }
dialog .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
dialog .body { padding: 12px 16px; max-height: 70vh; overflow: auto; }
.msg { margin: 6px 0; padding: 8px 12px; border-radius: var(--radius-lg); max-width: 85%; white-space: pre-wrap; }
.msg.user { background: var(--paper-2); margin-left: auto; } .msg.assistant { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
footer.site { max-width: 720px; margin: 0 auto; padding: 18px 16px 28px; font-size: 13px; color: var(--ink-3); display: flex; gap: 6px 16px; flex-wrap: wrap; border-top: 1px solid var(--rule); }
footer.site a { color: var(--ink-2); }
/* The Share tab's .site rows share the class name: keep them off the footer */
footer.site { align-items: baseline; background: none; border-radius: 0; }

/* ---- Dashboard (me.html): wider than the other pages, for its tabs and two-column tabs ---- */
/* The header and the shell share one width. Below 1040px the shell is one column: the tab strip, then the tab. */
.dash .top, .shell { max-width: 1280px; }
/* The shell: tab rail, tab, and the live phone (Chat, Links, Look). One column below 1040px, where the phone shows only on Look, above its list */
.shell { margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "aside" "main"; }
.shell > .rail { grid-area: rail; min-width: 0; }
.rail > .rail-mark { display: none; }
.shell > main { grid-area: main; }
.phone-aside { grid-area: aside; display: none; margin: 0 0 16px; }
.shell[data-tab=look] .phone-aside { display: block; }
.dash main { max-width: none; margin: 0; padding: 24px 0 calc(var(--savebar-h) + 24px); min-width: 0; }
.dash [data-panel=share] p { max-width: 70ch; }
@media (max-width: 420px) { .tabs [role=tab] { padding: 10px 9px; } }
/* From 1040px: a sticky rail of tabs (about 200px) beside the content, with an 18px icon and label on each tab */
@media (min-width: 1040px) {
  .shell { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "rail main"; column-gap: 24px; align-items: start; }
  /* With the phone: rail | tab (about 720px at 1280) | 300px phone, which sticks at the top */
  .shell[data-tab=conversation], .shell[data-tab=links], .shell[data-tab=look] { grid-template-columns: 200px minmax(0, 1fr) 300px; grid-template-areas: "rail main aside"; }
  .shell[data-tab=conversation] .phone-aside, .shell[data-tab=links] .phone-aside, .shell[data-tab=look] .phone-aside { display: block; }
  .phone-aside { position: sticky; top: 16px; margin: 24px 0 0; }
  /* The phone shrinks to fit a short window, so it stays whole while it sticks (the rest of the aside is about 150px with Chat's Try it bar) */
  .phone-aside .phone { max-width: clamp(220px, calc((100vh - 200px) * .4618 + 22px), 300px); margin-inline: auto; }
  .dash .top { display: none; } /* the rail has the logo */
  .rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 0 24px; }
  .rail > .rail-mark { display: inline-flex; align-self: flex-start; padding: 0 12px; border-radius: 8px; }
  .rail-mark:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .tabs { flex-direction: column; gap: 2px; margin: 0; padding-top: 0; border: 0; overflow: visible; }
  .tabs [role=tab] { min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; margin: 0; font-size: 15px; }
  .tabs [role=tab][aria-selected=true] { background: var(--paper-2); color: var(--ink); font-weight: 700; }
  .tabs [role=tab]:hover { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
  .tabs [role=tab].tab-gap { margin-top: 12px; }
  .tab-icon { display: block; }
}
.btn.small .icon { width: 16px; height: 16px; }
.btn.small:has(.icon) { gap: 6px; }
.btn.danger { background: var(--danger); color: var(--danger-ink); }
.btn.icon-btn { flex: none; width: 36px; height: 36px; padding: 0; }
.btn.icon-btn:hover { color: var(--accent); }
.btn.icon-btn.armed { background: var(--danger); color: var(--danger-ink); box-shadow: none; }
.row.end { justify-content: flex-end; }
.linklike.quiet { color: var(--ink-3); }
.linklike.quiet:hover, .linklike.quiet:focus-visible { color: var(--accent); }

/* Card URL in the header: a ghost button, 40px tall. The text opens the card; the copy icon copies the link */
.pill { display: inline-flex; align-items: stretch; max-width: 100%; min-height: 40px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--field); }
.pill:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pill-link { display: block; align-self: center; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 14px; border-radius: var(--radius) 0 0 var(--radius); color: var(--ink); font: 700 15px/1.2 var(--font); text-decoration: none; white-space: nowrap; }
.pill-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 0 var(--radius) var(--radius) 0; background: none; color: var(--ink-2);
  box-shadow: inset 1px 0 0 var(--rule); font: 700 13px/1 var(--font); cursor: pointer; }
.pill-copy:hover { color: var(--ink); background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.pill-link:focus-visible, .pill-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pill-copy .icon { width: 16px; height: 16px; }
/* Phones: the logo and the link share a line when they fit, otherwise the link drops to its own line under the logo */
.dash .top { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 480px) { .pill-link { padding: 0 10px; font-size: 14px; } }

/* Card tab header (Greg's comp, October 25): the card's own header in its look, wide and large (the real card page,
   --page wide, scaled up to the panel and cropped to the header; me.html fitStage), with the look's name and Change look
   under it. From 601px it stays at the top while the tab scrolls; then Photo, logo and colour in Greetmark's own style */
.look-hero { display: grid; gap: 12px; padding: 12px; }
.look-stage { --scale: 1; --page: 640px; position: relative; height: 150px; overflow: hidden; border-radius: 10px; background: var(--bar, var(--paper-2)); }
.look-stage iframe { position: absolute; top: 0; left: 0; width: var(--page); height: 480px; border: 0; transform: scale(var(--scale)); transform-origin: 0 0; pointer-events: none; }
.look-about { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 4px; }
.look-line { flex: 1 1 260px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.look-line b { color: var(--ink); }
.look-about .row { gap: 8px; }
@media (min-width: 601px) {
  .dash .look-hero { position: sticky; top: 0; z-index: 3; box-shadow: var(--flat), 0 10px 18px -14px rgba(0,0,0,.35); }
  /* The page's own colour above it, so the panels scrolling under it don't show in the gap */
  .dash .look-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: var(--paper); }
}
.media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mcell { display: grid; align-content: start; justify-items: center; gap: 10px; text-align: center; }
.mcell .media-item { display: block; }
.mcell .logo-view { width: 136px; height: 88px; }
.mcell .avatar, .mcell .media-item .avatar { width: 88px; height: 88px; }
.mcell .logo-view .placeholder .icon { width: 24px; height: 24px; }
.mcell-text { display: grid; justify-items: center; gap: 6px; }
.mcell-text .hint { margin: 0; }
.mcell-text .hint:empty { display: none; }
.pc-label { color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pc-row { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.swatch { width: 44px; height: 36px; padding: 3px; border: 1px solid var(--field); border-radius: 8px; background: var(--paper); cursor: pointer; }
.swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mcell .brand-swatch { display: block; width: 136px; height: 88px; padding: 6px; border-radius: 12px; }
/* No brand colour yet: an empty swatch with a diagonal, not the picker's default ink */
.swatch.unset::-webkit-color-swatch { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-3) 50%, transparent calc(50% + 1px)) !important; }
.swatch.unset::-moz-color-swatch { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-3) 50%, transparent calc(50% + 1px)) !important; }
.pc-value { color: var(--ink-2); font: 13px var(--mono); }
@media (max-width: 600px) {
  /* Each part is a row: the picture on the left, its name, buttons and hint beside it */
  .media-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mcell { grid-template-columns: 96px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; padding: 14px 0; text-align: left; border-top: 1px solid var(--rule); }
  .mcell:first-child { border-top: 0; padding-top: 0; }
  .mcell-text { justify-items: start; }
  .mcell .logo-view, .mcell .brand-swatch { width: 96px; height: 64px; }
}

/* Photo and logo: the picture itself is the upload button (the badge says so); the bin removes it */
.media-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; }
.media-item + .media-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.media-item h3 { margin: 0; }
.media-item .hint { grid-column: 1 / -1; margin: 0; }
.media-item .visual { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; cursor: pointer; }
.media-item .visual:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.media-item .visual img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.media-item .placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: inherit;
  background: var(--paper-2); color: var(--ink-3); border: 1.5px dashed color-mix(in srgb, var(--ink-3) 50%, transparent); font-size: 12px; }
.media-item .overlay { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 72%, transparent); opacity: 0; transition: opacity .15s; }
.media-item .visual:hover .overlay, .media-item.drop .overlay, .media-item.busy .overlay { opacity: 1; }
.media-item .badge { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 2px 6px rgba(0,0,0,.18); }
.media-item .avatar .badge { right: 0; bottom: 0; }
.media-item .badge .icon { width: 14px; height: 14px; }
.media-item.drop .visual { outline: 2px dashed var(--accent); outline-offset: 3px; }
.media-item.busy .visual { cursor: progress; }
.media-item.busy .overlay .icon { display: none; }
.media-item.busy .overlay::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .media-item.busy .overlay::after { animation: none; border-right-color: currentColor; opacity: .5; } }
.media-item .avatar { width: 88px; height: 88px; border-radius: 50%; }
.avatar img { object-fit: cover; }
.avatar .placeholder b { font: 700 28px/1 var(--display); color: var(--ink-2); letter-spacing: .02em; }
.avatar .placeholder .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.logo-view { width: 112px; height: 60px; }
.logo-view img { object-fit: contain; padding: 8px; background: var(--logo-chip, #fff); box-shadow: inset 0 0 0 1px var(--rule); }
/* One-colour logos: the shape in ink on the mat, as each card look draws it */
.logo-view .logo-tint { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--mat); box-shadow: inset 0 0 0 1px var(--rule); position: relative; }
.logo-view .logo-tint::before { content: ""; position: absolute; inset: 10px; background: var(--ink);
  -webkit-mask: var(--logo-url) center / contain no-repeat; mask: var(--logo-url) center / contain no-repeat; }

/* Details form: grouped panels, paired fields where there's room, and a save bar that stays in reach */
.panel > h3 + .hint { margin: -8px 0 16px; }
.fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); column-gap: 14px; }
/* Titles run long ("Entrepreneur, Investor, and Technologist"): give Title the wider share, and its own row on narrow screens */
.fields-2.title-co { grid-template-columns: 1fr; }
@media (min-width: 640px) { .fields-2.title-co { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.field.bio > label { display: flex; align-items: center; gap: 6px; }
.field.bio > label .icon { width: 16px; height: 16px; color: var(--accent); }
.field.bio > label + .hint { margin: 0 0 8px; }
.hint.count { text-align: right; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.check + .hint { margin: 4px 0 0 28px; }
/* Other email addresses: removable chips, then a box to add one */
.field.own { margin: 4px 0 0; }
.own-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.own-list:empty { display: none; }
.own-list li { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px 3px 3px 12px; border-radius: 999px; background: var(--paper-2); font-size: 14px; }
.own-list li span { overflow-wrap: anywhere; }
.own-list button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.own-list button:hover { color: var(--bad); }
.own-list button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.own-list .icon { width: 14px; height: 14px; }
.own-add { display: flex; gap: 8px; max-width: 460px; }
.own-add input { flex: 1; min-width: 0; }
.own-add input:disabled { opacity: .6; }
.field.own .hint.bad:empty { display: none; }
/* Conversation tab: a reading-width column; Advanced is one disclosure (card email wording, calendar) */
.talk { max-width: 720px; }
.talk .panel > h3 + .hint, .adv-part > h3 + .hint { margin: -4px 0 16px; }
details.advanced { padding: 0; }
details.advanced > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 18px; cursor: pointer; list-style: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: ""; align-self: center; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
details.advanced[open] > summary::before { transform: rotate(45deg); }
details.advanced > summary .adv-title { max-width: calc(100% - 18px); font-weight: 700; } /* a long title wraps beside the arrow, not under it */
details.advanced > summary:focus-visible { outline-offset: -2px; }
.adv-part { padding: 0 18px 18px; }
.adv-part + .adv-part { padding-top: 18px; border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { details.advanced > summary::before { transition: none; } }
/* Conversation: each field can go back to its default, which is its placeholder */
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.field-head label { font-size: 14px; font-weight: 700; }
.use-default { font-size: 13px; }
/* Calendar: connect by address, then the connection, its time zone and today's events */
details.where { margin: 12px 0 16px; font-size: 14px; }
details.where summary { width: fit-content; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
details.where ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); }
details.where li { margin: 4px 0; }
.cal-connect { display: flex; gap: 8px; }
.cal-connect input { flex: 1; min-width: 0; }
.cal-tz { margin: 10px 0 0; }
.cal-tz-edit { margin-top: 8px; }
.cal-tz-edit select { flex: 1 1 200px; width: auto; max-width: 100%; }
.cal-today-title { margin: 16px 0 4px; font: 700 14px/20px var(--font); }
.cal-events { margin: 0; padding: 0; list-style: none; }
.cal-events li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when badge" "what what"; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.cal-events .when { grid-area: when; color: var(--ink-3); }
.cal-events .badge { grid-area: badge; align-self: start; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; line-height: 18px; white-space: nowrap; }
.cal-events .badge.ok { color: var(--ok); font-weight: 700; }
.cal-events .what { grid-area: what; min-width: 0; overflow-wrap: anywhere; }
.cal-events .place { display: block; color: var(--ink-2); }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px max(16px, calc((100vw - 1280px) / 2 + 16px)) calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
.savebar .hint { margin: 0; }
/* No unsaved changes: the button stays readable as "All changes saved", quiet rather than faded */
.savebar .btn.primary:disabled { opacity: 1; background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }

/* Look tab: the looks on one side, the owner's own card in a phone on the other (the phone goes first on phones) */
/* Below 1040px the Look phone sits above its list at 210px, so the list stays in reach */
@media (max-width: 1039px) { .phone-aside .phone { max-width: 210px; } }
/* Too short even for the smallest phone: it scrolls with the page instead of hiding its bottom */
@media (min-width: 1040px) and (max-height: 615px) { .phone-aside { position: static; } }
.theme-list { display: grid; gap: 8px; }
/* Hover previews need a pointer; touch screens just choose */
.if-touch { display: none; }
@media (hover: none) { .if-hover { display: none; } .if-touch { display: inline; } }
.theme { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px;
  border: 2px solid transparent; border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-align: left; box-shadow: var(--flat); cursor: pointer; }
.theme:hover { border-color: var(--rule); }
.theme:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme[data-in-use=true] { border-color: var(--accent); }
.theme b { display: block; font-weight: 700; }
.theme small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.theme .in-use { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 13px; font-weight: 700; white-space: nowrap; }
.theme .in-use .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.theme:not([data-in-use=true]) .in-use { display: none; }
/* A tiny card on its page: --c1 the page, --c2 the card, --c3 an accent */
.swatch { width: 44px; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  background: linear-gradient(var(--c3) 0 0) 9px 29px / 16px 5px no-repeat, linear-gradient(var(--c2) 0 0) 7px 8px / 30px 17px no-repeat, var(--c1); }
.swatch.custom { display: grid; place-items: center; background: var(--paper-2); color: var(--ink-2); }
.swatch.custom .icon { width: 20px; height: 20px; }
/* Your looks: each saved look is a row (choose it) with Edit and Delete beside it; New look comes last */
.looks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 0 8px; }
.looks-head h3 { margin: 0; }
.look-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding-right: 10px;
  border: 2px solid transparent; border-radius: 12px; background: var(--card); box-shadow: var(--flat); }
.look-row:hover { border-color: var(--rule); }
.look-row[data-in-use=true] { border-color: var(--accent); }
.look-row > .theme { border: 0; background: none; box-shadow: none; }
.look-row > .theme:focus-visible { outline-offset: -3px; }
.theme.new-look { border: 2px dashed color-mix(in srgb, var(--ink-3) 45%, transparent); background: transparent; box-shadow: none; }
.theme.new-look:disabled { opacity: .5; cursor: default; }
@media (max-width: 420px) { .look-row .btn-text { display: none; } .look-row .btn:not(.icon-btn) { width: 36px; height: 36px; padding: 0; } }
/* Custom look editor: under the list, while the phone on the other side shows it live */
.custom-editor { margin: 16px 0 0; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.editor-head h3 { margin: 0; overflow-wrap: anywhere; }
.custom-editor .field.look-name { max-width: 320px; margin: 0 0 12px; }
.custom-editor > .hint { margin: 0 0 10px; }
.editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 6px; }
.editor-tools label { font-size: 14px; font-weight: 400; }
.editor-tools select { width: auto; padding: 7px 10px; font-size: 14px; }
.editor-tools .btn { margin-left: auto; }
.confirm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--paper-2); font-size: 14px; }
.confirm-bar > span { margin-right: auto; }
.code-editor { display: block; font: 13px/1.55 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.custom-editor code { font: 12px var(--mono); }
.custom-editor .hint.bad:empty { display: none; }
.custom-editor .row { margin-top: 10px; }
.custom-editor .size { margin-left: auto; }
.look-preview { margin: 0; display: grid; justify-items: center; gap: 10px; }
.look-preview #phone-open { margin-top: 2px; }
.look-preview figcaption { font-size: 14px; color: var(--ink-2); text-align: center; }
/* Just the device: a near-black frame in both colour schemes, and a 375 x 812 screen (a blank status-bar strip
   with the island, then the card page) scaled to the frame's width with --scale. No labels inside the phone */
.phone { width: 100%; max-width: 300px; padding: 11px; border-radius: 48px; background: #16171a; box-shadow: inset 0 0 0 2px #3b3d43, 0 18px 40px -18px rgba(0,0,0,.6); }
.phone-screen { position: relative; aspect-ratio: 375 / 812; overflow: hidden; border-radius: 37px; background: var(--bar, #fff); }
.phone-viewport { position: absolute; top: 0; left: 0; width: 375px; height: 812px; display: flex; flex-direction: column; transform: scale(var(--scale, .743)); transform-origin: 0 0; }
.statusbar { flex: none; height: 50px; display: flex; align-items: center; justify-content: center; padding-top: 4px; background: var(--bar, #fff); }
.statusbar .island { width: 120px; height: 34px; border-radius: 18px; background: #000; }
.phone-frames { position: relative; flex: 1; }
.phone-frames iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .18s; pointer-events: none; }
.phone-frames iframe.on { opacity: 1; }
.phone-frames iframe.live.on { pointer-events: auto; } /* only the frame showing takes clicks and scrolls */

/* Contacts: a table on wide screens; on phones each row becomes a small card */
.contacts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.contacts-bar .search { position: relative; flex: 1 1 240px; max-width: 360px; }
.contacts-bar .search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.contacts-bar .search input { padding-left: 38px; }
.contacts-bar .count { margin-right: auto; color: var(--ink-3); font-size: 14px; }
.contacts-panel { padding: 4px 0; }
.contacts-empty { margin: 0; padding: 14px 18px; }
.contacts-share { margin: 0 18px 16px; }
.verified { display: inline-flex; margin-left: 4px; vertical-align: -3px; color: var(--ok); }
.verified .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.flag { display: table; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; line-height: 18px; }
/* Contacts: the same rows as Home's People you've met, in the panel; each opens the person view */
.contacts-list { border-top: 0; }
.contacts-list .person { padding-left: 16px; padding-right: 16px; }
.contacts-list .person:last-child { border-bottom: 0; }
.sort-pick select { width: auto; min-height: 40px; }
button.person { width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none; font: inherit; text-align: left; cursor: pointer; }
button.person:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.person.denied b, .person.denied small { color: var(--ink-3); }
.person.denied img, .person.denied .mono { opacity: .6; }
.person .flag { margin-top: 6px; }

/* The person view (me.html #person): what they gave you, then Your info. A bottom sheet on phones */
dialog.person-sheet { max-width: min(640px, 94vw); }
dialog.person-sheet .body { max-height: min(78vh, 760px); padding: 16px 20px 20px; }
.ps-h { margin: 0 0 10px; font: 700 12px/16px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ps-h small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
#ps-theirs > section { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--rule); }
.ps-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: var(--paper-2); color: var(--ink); text-decoration: none; }
.ps-card .oc-photo { width: 64px; height: 64px; }
.ps-card .oc-name { font-size: 20px; line-height: 26px; }
.ps-card .oc-url { display: inline-flex; align-items: center; gap: 4px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ps-card .oc-url .icon { width: 14px; height: 14px; }
.ps-dl { display: grid; gap: 6px; margin: 0 0 10px; }
.ps-dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.ps-dl dt { color: var(--ink-3); font-size: 14px; }
.ps-dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
#ps-form input, #ps-form textarea { width: 100%; box-sizing: border-box; }
.ps-shot { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.ps-shot img, .ps-shot-empty { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--paper-2); color: var(--ink-3); }
.ps-shot b { display: block; margin: 0 0 6px; font-size: 14px; }
.ps-shot .row { gap: 8px; }
#ps-form .hint.bad:empty { display: none; }
.ps-actions { justify-content: space-between; margin-top: 4px; }
@media (max-width: 600px) {
  dialog.person-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  dialog.person-sheet .body { max-height: 82svh; padding: 16px; }
}

@media (hover: none), (pointer: coarse) {
  .btn.small { min-height: 44px; }
  .btn.icon-btn { width: 44px; height: 44px; }
  .look-row .btn:not(.icon-btn) { min-width: 44px; min-height: 44px; }
}

/* The tab strip on phones: a fade on its right edge while there is more to scroll to (the script adds .more) */
.tabs.more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
@media (min-width: 1040px) { .tabs.more { -webkit-mask-image: none; mask-image: none; } }

/* Owner Home (the dashboard's Home tab, /me/home): the card as a tile, three plain counts, then who they've met */
.dash [data-panel=home] { max-width: 960px; }
.dash [data-panel=home] h1 { margin-top: 0; }
/* Home's "People you've met": a row opens the chat (someone who scanned you) or their page (a card you scanned) */
button.person { width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none; font: inherit; text-align: left; cursor: pointer; }
.person:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Contacts: filter by who scanned and by where you met */
.way-filter .seg { white-space: nowrap; }
/* Phones: the three choices share the width */
@media (max-width: 480px) {
  .way-filter { display: flex; width: 100%; }
  .way-filter .seg { flex: 1 1 0; min-width: 0; padding: 0 6px; }
}
/* Share on phones: the QR centred above its text */
@media (max-width: 600px) { #panel-share .qr { margin: 0 auto; } }
.where-filter select { width: auto; min-height: 40px; max-width: 220px; }
.person .person-note { color: var(--ink-2); font-style: italic; }
.dash .owner-grid > .figures { align-content: center; padding: 24px; border-radius: 12px; background: var(--card); box-shadow: var(--flat); }
/* Phones: a smaller photo leaves the name and address room on one line each */
@media (max-width: 480px) {
  .dash .owner-card { grid-template-columns: 64px minmax(0, 1fr); padding: 20px; }
  .dash .oc-photo { width: 64px; height: 64px; }
}
.owner-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px 20px; align-items: center; max-width: 520px; margin: 24px 0 32px; padding: 24px; border-radius: 12px; background: var(--card); box-shadow: var(--flat); }
.oc-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--paper-2); }
.oc-photo img { width: 100%; height: 100%; object-fit: cover; }
.oc-photo .mono { font: 700 28px/1 var(--font); color: var(--ink-2); }
.oc-text { min-width: 0; display: grid; gap: 2px; }
.oc-name { font: 700 24px/32px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.oc-role { color: var(--ink-2); overflow-wrap: anywhere; text-wrap: balance; }
.oc-url { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.oc-actions { grid-column: 1 / -1; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; }
.figures > div { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.figures dt, .figures dd { margin: 0; }
.fig-n { font: 700 32px/40px var(--font); letter-spacing: -.02em; }
.fig-l { font-size: 13px; line-height: 18px; color: var(--ink-3); }

/* Owner Home, zero state: a next step instead of three zeros */
.zero-tile { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px 20px; align-items: center; max-width: 520px; margin: 0 0 24px; padding: 24px; border-radius: 12px; background: var(--card); box-shadow: var(--flat); }
.zero-qr { width: 72px; height: 72px; padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.zero-text h2 { margin: 0 0 4px; font: 700 20px/24px var(--font); }
.zero-text p { margin: 0 0 16px; color: var(--ink-2); }
.zero-text .row { gap: 10px; }

/* Phone preview: a sheet that rises from the bottom of the screen, with the card's phone scaled to fit */
.header-preview { display: none; }
dialog.sheet { margin: auto; max-width: min(560px, 100%); } /* centred on larger screens; a bottom sheet on phones (below) */
.sheet-body { display: grid; justify-items: center; padding: 16px; }
.sheet-phone { width: min(300px, calc(100vw - 48px)); max-width: none; }
.sheet-phone .phone-screen { background: var(--bar, #fff); }
.sheet-phone iframe { position: absolute; top: 0; left: 0; width: 375px; height: 812px; border: 0; transform: scale(var(--scale, .75)); transform-origin: 0 0; }

/* Phones (600px and below): a bottom bar of seven tabs (QR, Home, Card, Chat, Links, Look, Contacts), Account in the header, a Preview button above the save bar */
.header-account { display: none; text-decoration: none; }
@media (max-width: 600px) {
  .dash main { padding-bottom: calc(var(--savebar-h) + 56px + env(safe-area-inset-bottom) + 24px); }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
    height: calc(56px + env(safe-area-inset-bottom)); margin: 0; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid var(--rule); border-bottom: 0; background: var(--paper); overflow: visible; }
  .tabs.more { -webkit-mask-image: none; mask-image: none; }
  .tabs [role=tab] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 2px; margin: 0; border: 0; font-size: 12px; line-height: 16px; }
  .tabs [role=tab][aria-selected=true] { background: none; box-shadow: inset 0 2px 0 var(--accent); }
  .tabs [role=tab][data-tab=account], .tabs [role=tab][data-tab=share] { display: none; }
  .tab-icon { display: block; width: 20px; height: 20px; }
  .tab-label::after { display: none; }
  .header-account { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font: 700 14px/1 var(--font); }
  .header-account[aria-current=page] { color: var(--ink); background: var(--paper-2); }
  .savebar { bottom: calc(56px + env(safe-area-inset-bottom)); }
  .header-preview { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 700 14px/1 var(--font); cursor: pointer; }
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
}

/* The dashboard's Home tab at 900px and up: the card and its next step side by side */
.owner-grid { display: grid; gap: 16px; margin: 24px 0 32px; }
.owner-grid > .owner-card, .owner-grid > .zero-tile, .owner-grid > .figures { max-width: none; margin: 0; }
@media (min-width: 900px) {
  .owner-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
/* Recent contacts: the latest three, and a way to all of them */
.recent { margin: 0 0 40px; }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recent-head h2 { margin: 0 0 12px; }
.recent-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.recent-list li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 4px; border-bottom: 1px solid var(--rule); }
.rc-photo, .rc-mono { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.rc-mono { display: grid; place-items: center; color: var(--ink-2); font: 700 13px/1 var(--font); }
.rc-text { flex: 1; min-width: 0; }
.rc-text b { display: block; overflow-wrap: anywhere; }
.rc-text small { display: block; color: var(--ink-3); font-size: 13px; line-height: 18px; }
.chip { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; line-height: 18px; white-space: nowrap; }

/* The share sheet (the QR large, the link, print); on phones the QR tab is where the QR lives */
.header-preview:focus-visible, .header-account:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The QR tab is for phones; above 600px the QR is on Share */
@media (min-width: 601px) { .tabs [role=tab][data-tab=qr] { display: none; } }
/* Seven tabs on a narrow phone: no side padding, so the bold selected Contacts keeps some air */
@media (max-width: 380px) { .tabs [role=tab] { padding-left: 0; padding-right: 0; font-size: 11px; letter-spacing: -.01em; } }
@media (min-width: 601px) { dialog.share-sheet { max-width: min(400px, 92vw); } } /* phones keep the full-width bottom sheet */
.share-sheet .share-body { display: grid; justify-items: center; gap: 12px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.share-caption { margin: -4px 0 0; color: var(--ink-2); font-size: 15px; }
/* Your page, set apart from the QR so the copied link isn't taken for the card */
.share-page { display: grid; justify-items: center; width: 100%; padding-top: 16px; border-top: 1px solid var(--rule); }
.share-qr { width: min(280px, calc(100vw - 64px)); height: auto; aspect-ratio: 1; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.share-under { margin: 0; font-weight: 700; font-size: 16px; }
.share-copy { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 6px 6px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--field); }
.share-url { min-width: 0; overflow-wrap: anywhere; }
.share-links { display: flex; gap: 20px; margin: 4px 0 0; font-size: 15px; }
/* Owner Home: the QR thumbnail opens the sheet */
.zero-qr-btn { flex: none; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.zero-qr-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The save bar: docked at the bottom with a solid background; the page's bottom padding is its height */
.dash { --savebar-h: 68px; }
/* Sheet actions: "Use this look" and "Cancel" for a look tapped on a phone */
.sheet-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 0 16px 16px; }
/* Phones: the Look tab is the list; the phone shows in the sheet when a look is tapped */
@media (max-width: 600px) { .shell[data-tab=look] .phone-aside { display: none; } }
@media (max-width: 359px) { .tabs [role=tab] { font-size: 11px; } }

/* The header's tools: one group. On phones it takes the line under the logo, so Share, Preview and Account stay together */
.top-tools { display: flex; align-items: center; gap: 4px 8px; }
/* Phones: the header is one row (logo, Show QR, then Your card and Account as icons, named for screen readers) */
@media (max-width: 600px) {
  .dash .top { flex-wrap: nowrap; }
  .top-tools { margin-left: auto; gap: 2px; }
  .header-preview, .header-account { justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
  .header-preview .icon, .header-account .icon { width: 20px; height: 20px; }
  .header-preview span, .header-account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 380px) { .dash .top .wordmark-img { height: 24px; } }

/* The card link under the role line, with its Copy link button */
.profile-url { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; font-size: 15px; line-height: 24px; overflow-wrap: anywhere; }
.profile-url a { color: var(--ink); font-weight: 700; }
.profile-url .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* Look: where the brand colour is set (on Card) */
.brand-line { margin: 8px 0 0; }
/* Chat tab: Preview / Try it above the phone, its note under it; on phones a Try your card link instead */
.try-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.try-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--paper-2); }
.seg { min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 700 14px var(--font); cursor: pointer; }
.seg[aria-pressed=true] { background: var(--card); color: var(--ink); box-shadow: var(--flat); }
.try-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); text-align: center; }
.try-note p { margin: 0 0 4px; }
.try-open { display: none; margin: 0 0 16px; }
@media (min-width: 1040px) { .shell[data-tab=conversation] .try-bar { display: flex; } }
@media (max-width: 1039px) { .try-open { display: inline-flex; } }

/* The Clean look's thumbnail: a grey-outlined bubble on the left, a brand-coloured one on the right, on white */
.swatch.clean { background: linear-gradient(#fff 0 0) 4px 15px / 16px 10px no-repeat, linear-gradient(#c4c1cb 0 0) 3px 14px / 18px 12px no-repeat,
  linear-gradient(var(--c3) 0 0) 23px 22px / 16px 10px no-repeat, #fff; }

/* Marketing: the FAQ's waitlist card and the plain pages (privacy.html, about.html); the home page and teams.html are "Marketing home" below */
.mk-section { margin: 0 0 48px; }
.mk-section h2 { margin-top: 0; }
.mk-teams { padding: 24px; border-radius: 12px; background: var(--paper-2); }
.mk-teams h2 { margin: 4px 0 8px; }
.mk-teams p { margin: 0 0 16px; color: var(--ink-2); }
.doc h2 { margin: 40px 0 12px; }
.doc h3 { margin: 24px 0 8px; font: 700 16px/24px var(--font); }
/* Privacy and terms (privacy.html): two parts, each with its own sections */
.doc .toc { display: flex; gap: 8px 24px; margin: 0 0 8px; font-weight: 700; }
.doc .toc a { color: var(--ink); }
.doc h2.part { margin: 56px 0 16px; padding-top: 32px; border-top: 1px solid var(--rule); font-size: 28px; line-height: 34px; letter-spacing: -.02em; }
.doc h2.part + * { margin-top: 0; }
.doc h2.part ~ h3 { margin: 40px 0 12px; font: 700 20px/24px var(--font); letter-spacing: -.01em; }
.doc h2.part ~ * h3 { margin: 0 0 12px; font: 700 20px/24px var(--font); }
.doc h4 { margin: 24px 0 8px; font: 700 16px/24px var(--font); }
.doc p, .doc li { line-height: 26px; }
.doc ul { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin: 0 0 6px; }
.doc .updated { color: var(--ink-3); font-size: 14px; }
.doc .short { padding: 20px 24px; border-radius: 12px; background: var(--paper-2); }
.doc .short ul { margin: 0; }

/* Marketing home: the logged-out page (index.html, body.stranger). A 1120px column: the hero (copy and a line drawing of two
   people meeting, stamped), the problem in three drawn scenes, a quote beside a product shot (two phones), two plain cards for the two places, three drawn steps, the teams
   card, the waitlist beside a drawing, and one ink footer. Cotton and ink, Helvetica at 400 and 700; plum only in the postmark. */
body.stranger main { max-width: none; padding: 0; }
body.stranger .top { max-width: 1120px; padding: 16px 24px; border-bottom: 0; }
body.stranger .top nav a { min-height: 44px; font-size: 16px; }
body.stranger footer.site { display: none; }
/* One neutral hairline for every frame on this page (phone, preview, cards): grey, not the warm rule token */
body.stranger { --home-stroke: rgba(127, 127, 127, .24); }
.home-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.home-eyebrow { margin: 0 0 16px; font: 700 12px/16px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-wrap: balance; }
.home-tag { margin: 0 0 12px; font: 700 13px/16px var(--font); letter-spacing: .02em; color: var(--ink-2); }
/* Hero: the copy and the phone, centred on each other; the proof row follows; the next section's top padding is the only gap */
.home-hero { padding: 40px 0 0; }
.home-hero-grid { display: grid; gap: 40px; align-items: center; }
.home-copy h1 { font: 700 44px/46px var(--font); letter-spacing: -.035em; margin: 0 0 20px; text-wrap: balance; }
.home-lede { margin: 0 0 16px; font-size: 20px; line-height: 30px; color: var(--ink-2); max-width: 30em; }
.home-sub { margin: 0 0 32px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 30em; }
.home-copy .waitlist { margin-bottom: 0; }
.home-hint { margin: 16px 0 0; font-size: 15px; line-height: 24px; color: var(--ink-2); max-width: 34em; }
.home-hint a { color: var(--ink-2); }
.home-stage { position: relative; display: grid; justify-items: center; }
/* Illustrations: line drawings in the page's ink (traced from Greg's own reference images), each SVG used as a mask so it takes
   the ink colour. A few carry one key element in the logo's wave violet (the page's one hint of brand colour besides the plum
   postmarks): her skirt in the hero, the card changing hands, the envelope. Each accent is its own layer, the same size as its
   drawing, so it lands exactly in place. On cotton the drawings need no frame; on night ink they sit on a cotton card, so a
   drawing never turns into a negative. */
body.stranger { --brand-violet: #9982f2; }
.home-art { position: relative; --art-ink: var(--ink); --pad: 7%; }
.home-art i, .home-art b { position: absolute; background: var(--art-ink); -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.home-art i, .home-art .accent { inset: var(--pad); }
.home-art .accent { background: #a99af4;   /* the wave violet, a step softer for a filled area */
   -webkit-mask-image: var(--accent-art); mask-image: var(--accent-art); }
@media (prefers-color-scheme: dark) {
  .home-art { border-radius: 20px; background: #faf8f3; --art-ink: #26223a; }
  .home-art .pm, .home-stamp { color: #8a2f6a; }   /* light-mode plum: the stamp sits on cotton here too */
}
/* The logo's three postal waves, pulsing one after another: a card on its way */
.waves { display: block; width: 100%; height: 100%; color: var(--brand-violet); overflow: visible; }
.waves > g > g { animation: wave 2.4s ease-in-out infinite; }
.waves > g > g:nth-child(2) { animation-delay: .25s; }
.waves > g > g:nth-child(3) { animation-delay: .5s; }
@keyframes wave { 0%, 100% { opacity: .35; } 45% { opacity: 1; } }
.art-cafe .accent { background: #c9bff8; }   /* the skirt is the biggest accent: lighter still, so it never outshouts the headline */
.art-cafe { --art: url(/home-ill-cafe-table.svg); --accent-art: url(/home-ill-cafe-table-accent.svg); aspect-ratio: 1 / 1.08; width: min(100%, 420px); }
.art-bench { --art: url(/home-ill-bench-chat.svg); --accent-art: url(/home-ill-bench-chat-accent.svg); }
.art-group { --art: url(/home-ill-group.svg); }
/* Teams (teams.html): the team drawing as the hero, with a Verified badge beside it, in ink */
.art-team.art-team-hero { width: min(100%, 440px); }
.home-badge { position: absolute; left: 4%; bottom: 10%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--card); color: var(--ink); font: 700 14px/20px var(--font); box-shadow: 0 0 0 1px var(--home-stroke), 0 10px 24px -14px rgba(0, 0, 0, .45); }
.home-badge b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; }
.home-points { display: grid; gap: 32px; }
.home-points > div { padding-top: 20px; border-top: 1px solid var(--rule); }
.home-points h3 { font: 700 18px/24px var(--font); margin: 0 0 8px; }
.home-points p { margin: 0; color: var(--ink-2); }
.home-fineprint { margin: 40px 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.home-fineprint a { color: var(--ink); }
.home-section.home-points-wrap { padding-top: 0; }
.home-place .home-tag + .home-list { padding-top: 4px; border-top: 0; }   /* a list straight under its label needs no rule */
.art-phone { --art: url(/home-ill-woman-phone.svg); }
.art-desk { --art: url(/home-ill-desk-laptop.svg); }
.art-team { --art: url(/home-ill-team-table.svg); aspect-ratio: 1.2 / 1; width: min(100%, 300px); flex: none; --pad: 8%; }
.art-letter { aspect-ratio: 1 / 1; width: min(100%, 340px); justify-self: center; }
/* The steps: one height, every drawing standing on the same floor; step 2 adds the QR being scanned, step 3 the card's
   envelope */
.art-step { height: 220px; margin: 0 0 20px; --pad: 20px 20px 0; }
/* The waist-cut scenes fade into the page instead of stopping at a hard edge (a second mask, intersected with the drawing) */
.art-step i { -webkit-mask: var(--art) center bottom / contain no-repeat, linear-gradient(#000 78%, transparent 100%); -webkit-mask-composite: source-in;
  mask: var(--art) center bottom / contain no-repeat, linear-gradient(#000 78%, transparent 100%); mask-composite: intersect; }
.art-step .accent { -webkit-mask-position: center bottom; mask-position: center bottom; }
@media (prefers-color-scheme: dark) { .art-step i { -webkit-mask: var(--art) center bottom / contain no-repeat; mask: var(--art) center bottom / contain no-repeat; } }
.art-phone i { right: 38%; }
.art-qr { --art: url(/home-ill-qr.svg); right: 17%; bottom: 14%; width: 15%; aspect-ratio: 64 / 120; transform: rotate(8deg); }   /* the other person's phone, showing their QR */
/* Whole scenes (no waist cut) need no fade */
.art-bench i, .art-group i { -webkit-mask: var(--art) center bottom / contain no-repeat; mask: var(--art) center bottom / contain no-repeat; }
.art-desk i { right: 33%; }
/* The envelope flies in toward her, its waves trailing behind it (the logo's waves, mirrored) */
.art-envelope, .art-envelope-fill { right: 15%; bottom: 44%; width: 22%; aspect-ratio: 96 / 64; transform: rotate(6deg); }
.art-envelope { --art: url(/home-ill-envelope.svg); }
.home-art .art-envelope-fill { --art: url(/home-ill-envelope-accent.svg); background: var(--brand-violet); opacity: .55; }
.art-envelope-waves { position: absolute; right: 2%; bottom: 47%; width: 12%; aspect-ratio: 1; transform: scaleX(-1) rotate(6deg); }
/* The closing drawing: a letter arriving, stamped with today's postmark, its waves behind it */
.art-letter i, .art-letter .art-letter-fill { inset: auto; left: 16%; top: 30%; width: 62%; aspect-ratio: 96 / 64; transform: rotate(-6deg); }
.art-letter i { --art: url(/home-ill-letter.svg); }   /* the envelope with a finer line, at this size */
.home-art .art-letter-fill { --art: url(/home-ill-envelope-accent.svg); background: var(--brand-violet); opacity: .35; }
.art-letter-pm { position: absolute; top: 9%; left: 64%; width: 26%; aspect-ratio: 1; }
.art-letter-pm .pm { width: 100%; height: 100%; }
.art-letter-waves { position: absolute; top: 40%; left: 0; width: 16%; aspect-ratio: 1; transform: rotate(-6deg); }
/* The postmark stamped in the gap between the two people's heads, dated today */
.home-stamp { position: absolute; top: 0; left: calc(50% - 40px); z-index: 3; width: 96px; height: 96px; transform: rotate(-8deg); }
/* Proof: the quote, with the product shot beside it */
.home-proof { display: grid; gap: 32px; align-items: center; }
/* The quote's section follows the problem's, whose bottom padding is the gap above it */
.home-section.home-proof-wrap { padding-top: 0; padding-bottom: 0; }
/* The quote beside the live page: the person whose page it is, in their own words */
.home-quote { margin: 0 0 24px; max-width: 24em; }
.home-quote blockquote { margin: 0 0 16px; }
.home-quote blockquote p { margin: 0; font: 700 22px/31px var(--font); letter-spacing: -.01em; color: var(--ink); text-indent: -.4em; }
.home-quote figcaption { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--ink); font-size: 15px; line-height: 20px; }
.home-quote figcaption span { color: var(--ink-2); }
/* The product shot: two phones on a soft backdrop, not live (the chat as a visitor sees it, and the page). Every size inside
   a phone is in em of its width, so the whole shot scales as one picture; the screens stay light, like a product photo. */
.home-shot { container-type: inline-size; position: relative; display: flex; justify-content: center; align-items: flex-start;
  padding: 6cqi 4cqi 8cqi; border-radius: 24px; background: radial-gradient(120% 90% at 50% 20%, var(--card), var(--paper-2)); box-shadow: 0 0 0 1px var(--home-stroke); }
.shot-phone { --pw: min(300px, 46cqi); position: relative; flex: none; width: var(--pw); aspect-ratio: 9 / 19; padding: calc(var(--pw) * .035);
  border-radius: calc(var(--pw) * .16); background: #16171a; font-size: calc(var(--pw) / 22);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 0 1px var(--home-stroke), 0 3em 4em -2.4em rgba(0, 0, 0, .55), 0 1em 1.6em -1em rgba(0, 0, 0, .35); }
.shot-phone::before { content: ""; position: absolute; left: -2px; top: 22%; width: 2px; height: 12%; border-radius: 2px 0 0 2px; background: #2a2b30; }
/* The chat in front and lower, overlapping the page behind it */
.shot-phone.shot-chat { z-index: 1; margin: 9cqi -6cqi 0 0; }
@media (prefers-color-scheme: dark) { .shot-phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 3em 4em -2.4em rgba(0, 0, 0, .7); } }
/* Phones: just the chat, big enough to read */
@media (max-width: 600px) {
  .shot-phone.shot-page { display: none; }
  .shot-phone { --pw: min(300px, 76cqi); }
  .shot-phone.shot-chat { margin: 0; }
}
.shot-screen { position: relative; display: flex; flex-direction: column; gap: .75em; height: 100%; overflow: hidden; padding: 0 1.1em;
  border-radius: calc(var(--pw) * .125); color: #1d1d1f; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.35; }
.shot-chat .shot-screen { background: #fff; }
.shot-page .shot-screen { background: #f1efea; }
.shot-status { display: flex; justify-content: space-between; align-items: center; flex: none; height: 3.6em; padding: 0 .9em; font-size: .9em; font-weight: 700; }
.shot-status::before { content: ""; position: absolute; top: 1em; left: 50%; width: 32%; height: 2.2em; translate: -50% 0; border-radius: 2em; background: #000; }
.shot-status span { order: 0; }
.shot-status i { width: 2.2em; height: 1em; border-radius: .3em; box-shadow: inset 0 0 0 .12em #1d1d1f; background: linear-gradient(#1d1d1f 0 0) .22em 50% / 60% 55% no-repeat; }
.shot-screen img { display: block; border-radius: 50%; object-fit: cover; }
.shot-chathead { display: flex; align-items: center; gap: .75em; padding: 0 0 .9em; border-bottom: 1px solid #e6e6ea; }
.shot-chathead img { width: 2.8em; height: 2.8em; }
.shot-chathead span { display: grid; }
.shot-chathead b { font-size: 1.1em; }
.shot-chathead small { font-size: .85em; color: #6e6e73; }
.shot-b { max-width: 82%; margin: 0; padding: .6em .85em; border-radius: 1.1em; background: #ececf0; font-size: .95em; }
.shot-b.shot-me { align-self: flex-end; background: #0a6fe0; color: #fff; }
.shot-head { display: grid; justify-items: center; gap: .2em; margin: .6em 0 .4em; padding: 1.4em 1em 1.1em; border-radius: 1.3em; background: #fff; text-align: center;
  box-shadow: 0 .1em .2em rgba(0, 0, 0, .06), 0 .8em 1.6em -1em rgba(0, 0, 0, .25); }
.shot-head img { width: 5.2em; height: 5.2em; margin: 0 0 .6em; box-shadow: 0 0 0 .22em #fff, 0 0 0 .38em #c8372d; }
.shot-head b { font-size: 1.45em; letter-spacing: -.01em; }
.shot-head small { font-size: .85em; color: #6e6e73; text-wrap: balance; }
.shot-icons { display: flex; gap: .7em; margin-top: .7em; }
.shot-icons i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .45em; background: #c8372d; color: #fff; font: 700 .85em/1 inherit; font-style: normal; }
.shot-link { display: grid; justify-items: center; padding: .95em 1em; border-radius: 1.1em; background: #fff; font-weight: 700; font-size: .95em; text-align: center;
  box-shadow: 0 .1em .2em rgba(0, 0, 0, .06), 0 .6em 1.2em -.9em rgba(0, 0, 0, .3); }
.shot-link small { font-weight: 400; font-size: .85em; color: #6e6e73; }
.shot-link.shot-save { background: #1d1d1f; color: #fff; }
.shot-input { display: flex; align-items: center; justify-content: space-between; margin: auto 0 1.4em; padding: .55em .55em .55em 1em; border-radius: 2em; box-shadow: inset 0 0 0 1px #d8d8de; color: #8e8e93; font-size: .95em; }
.shot-input i { width: 1.8em; height: 1.8em; border-radius: 50%; background: #0a6fe0; }
.shot-made { margin-top: auto; padding-bottom: 1.4em; text-align: center; font-size: .75em; color: #8e8e93; }
/* The problem: three drawn scenes on paper, paper cards (no context), a list of strangers, and a Greetmark contact with its
   postmark. Line and paper in the page's ink and tokens, so they follow dark mode; plum only on the postmark. */
.home-ills { display: grid; gap: 40px; }
.home-ill { margin: 0; }
.home-ill figcaption { margin-top: 20px; }
.home-ill h3 { font: 700 20px/26px var(--font); letter-spacing: -.01em; margin: 0 0 8px; }
.home-ill figcaption > p:not(.home-tag) { margin: 0; color: var(--ink-2); }
.ill-stage { position: relative; display: grid; place-items: center; height: 260px; overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--home-stroke); }
.ill-stage .ill-bc, .ill-stage .ill-list, .ill-stage .ill-contact { background: var(--paper); }
/* Phones: a tile grows to fit its scene (the list is taller at this width); the paper cards keep the fixed height */
@media (max-width: 600px) { .ill-stage { height: auto; min-height: 260px; padding: 28px 0; } }
@media (prefers-color-scheme: dark) {
  .ill-stage { background: var(--paper-2); }
  .ill-stage .ill-bc, .ill-stage .ill-list, .ill-stage .ill-contact { background: var(--mat); }
  .ill-row i, .ill-mono { background: var(--paper-2); }
}
.ill-stage b, .ill-stage dd { color: var(--ink); }
.ill-bc { position: absolute; left: 50%; top: 50%; display: grid; align-content: start; gap: 7px; width: 212px; height: 122px; padding: 18px 20px; border-radius: 4px;
  background: var(--card); box-shadow: 0 0 0 1px var(--home-stroke), 0 12px 20px -14px rgba(0, 0, 0, .45); }
.ill-bc i { display: block; height: 7px; width: 62%; border-radius: 4px; background: var(--mat); box-shadow: inset 0 0 0 1px var(--home-stroke); }
.ill-bc i + i { width: 46%; }
.ill-bc i + i + i { width: 34%; margin-top: 18px; }
.ill-bc3 { transform: translate(calc(-50% - 34px), calc(-50% - 26px)) rotate(-13deg); }
.ill-bc2 { transform: translate(calc(-50% + 30px), calc(-50% - 14px)) rotate(10deg); }
.ill-bc1 { transform: translate(-50%, calc(-50% + 16px)) rotate(-3deg); }
.ill-bc1 b { font-size: 15px; line-height: 18px; }
.ill-bc1 span { font-size: 12px; line-height: 15px; color: var(--ink-2); }
.ill-bc1 span + span { color: var(--ink-3); }
/* A pencilled question on the top card */
.ill-bc1 em { position: absolute; right: 14px; bottom: 10px; font-size: 13px; line-height: 16px; color: var(--ink-2); transform: rotate(-5deg);
  padding: 0 2px 2px; border-bottom: 1.5px solid var(--ink-3); }
.ill-list { width: min(300px, 88%); padding: 12px 14px 4px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--home-stroke), 0 12px 24px -16px rgba(0, 0, 0, .45); }
.ill-list-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 0 8px; font-size: 13px; }
.ill-list-head span { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ill-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.ill-row:nth-child(n+4) { opacity: .7; }
.ill-row:last-child { opacity: .4; }
.ill-row i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mat); color: var(--ink-2); font: 700 10px/1 var(--font); font-style: normal; }
.ill-row span { display: grid; min-width: 0; }
.ill-row b { font-size: 12px; line-height: 15px; }
.ill-row small { overflow: hidden; font-size: 11px; line-height: 14px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.ill-row em { padding: 2px 7px; border-radius: 10px; font: 400 10px/14px var(--font); color: var(--ink-3); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--home-stroke); }
.ill-contact { position: relative; width: min(290px, 86%); padding: 18px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--home-stroke), 0 14px 28px -16px rgba(0, 0, 0, .5); }
.ill-contact-top { display: flex; align-items: center; gap: 12px; }
.ill-contact-top > span:last-child { display: grid; }
.ill-contact-top b { font-size: 16px; line-height: 20px; }
.ill-contact-top small { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.ill-mono { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--mat); color: var(--ink-2); font: 700 14px var(--font); }
.ill-contact dl { display: grid; gap: 10px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.ill-contact dt { font: 700 10px/14px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ill-contact dd { margin: 0; font-size: 14px; line-height: 20px; }
.ill-pm { position: absolute; top: -24px; right: -18px; width: 80px; height: 80px; }
/* People you've met (a visitor who met a card): right under the hero, before the problem */
.home-section.home-met { padding: 72px 0 0; }
.home-section.home-met h2 { font-size: 24px; line-height: 30px; margin: 0 0 16px; }
.home-met .people { max-width: 720px; }
/* Sections: 96px above each, so the gap from the proof row to "Two places" is one 96px */
.home-section { padding: 96px 0; }
.home-section-tint { background: var(--paper-2); }
.home-section h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.12 var(--font); letter-spacing: -.025em; margin: 0 0 40px; max-width: 22em; text-wrap: balance; }
.home-places { display: grid; gap: 16px; }
.home-place { padding: 32px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--home-stroke); }
.home-place h3 { font: 700 24px/30px var(--font); letter-spacing: -.02em; margin: 0 0 12px; }
.home-place > p:not(.home-tag) { margin: 0 0 20px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.home-list { margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.home-list li { position: relative; padding-left: 22px; color: var(--ink); }
.home-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); }
.home-steps { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.home-steps .home-num { padding-top: 24px; border-top: 2px solid var(--ink); }
.home-num { display: block; margin: 0 0 24px; font: 700 14px/16px var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.home-steps h3 { font: 700 20px/26px var(--font); letter-spacing: -.01em; margin: 0 0 8px; }
.home-steps p { margin: 0; color: var(--ink-2); }
.home-teams-wrap { padding: 96px 0; }   /* follows the tinted steps band */
.home-teams { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; padding: 40px; border-radius: 16px; background: var(--paper-2); }
.home-teams h2 { font: 700 24px/30px var(--font); letter-spacing: -.02em; margin: 0 0 8px; }
.home-teams p:not(.home-tag) { margin: 0; max-width: 34em; color: var(--ink-2); }
.home-final { padding-top: 0; }
.home-final h2 { margin: 0 0 16px; font: 700 clamp(56px, 7.2vw, 104px)/.96 var(--font); letter-spacing: -.04em; max-width: none; }
.home-final .home-lede { margin-bottom: 24px; font-size: 18px; line-height: 28px; }
.home-final .waitlist { margin-bottom: 0; }
.home-final-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.home-final-row .waitlist { flex: 0 1 460px; min-width: 0; }
.home-final-grid { display: grid; gap: 40px; align-items: center; }
.home-teams-text { flex: 1 1 320px; }
/* The footer is ink in both modes (fixed colours, not the tokens, which flip to cotton in dark mode) with a hairline on top */
.home-foot { background: #26223a; color: #faf8f3; border-top: 1px solid rgba(250, 248, 243, .14); padding: 48px 0 40px; }
.home-foot-grid { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.home-foot-logo { display: inline-flex; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--paper); }
.home-foot-logo img { display: block; height: 28px; width: auto; }
.home-foot p { margin: 0; font-size: 14px; line-height: 22px; color: #cdc4da; }
.home-foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.home-foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: #faf8f3; font-size: 15px; }
/* Phones: one column, the copy, the phone, the quote, then the product shot */
@media (max-width: 899px) {
  .home-hero-grid { gap: 32px; }
  .home-stamp { width: 72px; height: 72px; left: calc(50% - 30px); }
  .art-cafe { width: min(100%, 320px); }
  .home-proof { gap: 24px; }
}
@media (max-width: 480px) {
  body.stranger .top { padding: 12px 16px; }
  .home-wrap { padding: 0 16px; }
  .home-hero { padding: 24px 0 0; }
  .home-copy h1 { font-size: 40px; line-height: 42px; }
  .home-final h2 { font-size: 40px; line-height: 42px; }
  .home-lede { font-size: 18px; line-height: 28px; }
  .home-section { padding: 64px 0; }
  .home-section h2 { margin-bottom: 28px; }
  .home-place, .home-teams { padding: 24px; }
  .home-teams-wrap { padding: 64px 0; }
  .home-foot { padding: 40px 0 32px; }
  body.stranger .waitlist-row .btn { flex: 1 1 100%; }
}
/* Desktop: the hero in two columns, the quote beside the product shot, the places and points side by side */
@media (min-width: 900px) {
  .home-hero { padding: 80px 0 0; }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; }
  .home-copy h1 { font-size: clamp(52px, 5.4vw, 76px); line-height: 1; letter-spacing: -.035em; }
  .home-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
  .home-places { grid-template-columns: 1fr 1fr; }
  .home-ills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .home-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-ill h3 { min-height: 52px; }   /* two lines for every heading, so the three captions start level */
  .home-final-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
  .home-place { padding: 40px; }
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
@media (min-width: 900px) and (max-width: 1039px) { .home-hero-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
/* Light motion (index.html adds .reveal, then .in on scroll): a short rise; the hero's postmark stamps down once on load */
body.stranger .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
body.stranger .reveal.in { opacity: 1; transform: none; }
.home-stamp { animation: stamp-down .55s cubic-bezier(.3, 1.5, .5, 1) .5s both; }
@keyframes stamp-down { from { opacity: 0; transform: scale(1.7) rotate(-22deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
.art-letter.in .art-letter-pm { animation: stamp-down-soft .5s cubic-bezier(.3, 1.5, .5, 1) .45s both; }
@keyframes stamp-down-soft { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.stranger * { transition: none !important; animation: none !important; } }

/* The waitlist: an email, then "You're on the list." */
.waitlist { max-width: 460px; margin: 0 0 8px; }
.waitlist-row { display: flex; flex-wrap: wrap; gap: 8px; }
.waitlist-row input { flex: 1 1 220px; min-width: 0; }
.waitlist-done { margin: 0; font-weight: 700; color: var(--ok); }

/* Teams: the control table and the Verified badge */
.ctl { width: 100%; border-collapse: collapse; }
.ctl th, .ctl td { padding: 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ctl th { color: var(--ink-2); font: 700 14px var(--font); }
.ctl td ul { margin: 0; padding-left: 18px; }
.ctl td li { margin: 4px 0; }
.verified-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font: 700 13px var(--font); white-space: nowrap; }

/* Dashboard: the Reset QR link under the QR, quiet */
.reset-qr { margin-top: 12px; align-items: baseline; }
.reset-qr .hint { margin: 0; }

/* Links: the editor reads like the buttons it makes. A row is a light line: nothing at rest, a hairline and a fill on hover, a focus ring on focus */
.links-panel { padding: 12px; }
@media (min-width: 600px) { .links-panel { padding: 16px; } }
.blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brow { border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.brow.dragging { opacity: .6; }
.brow-row { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) auto 44px; grid-template-areas: "drag icon text badges chev"; align-items: center; gap: 4px 8px; min-height: 64px; padding: 6px 6px 6px 4px; }
.brow-side { display: contents; }
.drag { grid-area: drag; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: grab; touch-action: none; }
.drag:hover { color: var(--ink); background: var(--paper-2); }
.drag .icon { width: 20px; height: 20px; }
.icon-pick { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink); cursor: pointer; }
.icon-pick .icon { width: 20px; height: 20px; }
.icon-pick[aria-expanded=true] { box-shadow: inset 0 0 0 2px var(--ink); }
.brow-text { grid-area: text; display: grid; min-width: 0; }
.brow .b-title, .brow .b-note { width: 100%; height: auto; min-height: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; }
.brow .b-title { height: 28px; font: 700 16px/24px var(--font); color: var(--ink); }
.brow .b-note { height: 24px; font: 400 14px/20px var(--font); color: var(--ink-2); }
.brow .b-title::placeholder, .brow .b-note::placeholder { color: var(--ink-3); }
.brow .b-title:hover, .brow .b-note:hover { border-color: var(--rule); background: var(--card); }
.brow .b-title:focus-visible, .brow .b-note:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; background: var(--card); }
.brow-meta { grid-area: badges; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; margin: 0; }
.bbadge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; line-height: 18px; white-space: nowrap; }
.details-toggle { grid-area: chev; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.details-toggle:hover { background: var(--paper-2); color: var(--ink); }
.details-toggle .icon { width: 18px; height: 18px; transition: transform .15s; }
.details-toggle[aria-expanded=true] .icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .details-toggle .icon { transition: none; } }
/* A hidden link looks hidden: its title and icon are dimmed, and it says so in its badge */
.brow.is-hidden .b-title, .brow.is-hidden .icon-pick { opacity: .55; }
.brow-details { display: grid; gap: 12px; margin: 0 10px 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.brow-details .field { margin: 0; }
.brow-details .prefix input { min-width: 0; }
.brow-details .check { min-height: 44px; align-items: center; }
.brow-details .row.end { justify-content: flex-start; }
.brow-delete { min-height: 44px; }
/* The last link deleted, with Undo, until the changes are saved */
.links-undo { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin: 0 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
.icon-choice { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.icon-choice:hover { background: var(--paper-2); }
.icon-choice[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--ink); }
.icon-choice .icon { width: 20px; height: 20px; }
.icon-pick:focus-visible, .icon-choice:focus-visible, .drag:focus-visible, .details-toggle:focus-visible, .brow-delete:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.links-error { margin: 0 0 12px; color: var(--bad); font-weight: 700; }
.links-error:empty { display: none; }
.links-empty { margin: 0 0 16px; color: var(--ink-2); }
.links-add { margin-top: 14px; }
.links-add .btn[disabled] { opacity: .5; }
.links-add .hint { margin: 0; }
/* Phones: the badges wrap onto their own line under the title; the Details button stays 44px */
@media (max-width: 600px) {
  .brow-row { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; grid-template-areas: "drag icon text chev" "drag icon badges badges"; }
  .brow-meta { justify-content: flex-start; padding-left: 8px; }
  .brow .b-title, .brow .b-note { padding-left: 8px; }
}

/* The Save-contact row: its icon is fixed (not a button), and its fields are a plain group */
.icon-pick.fixed { cursor: default; }
.icon-pick.fixed:hover { background: var(--paper-2); }
.contact-fields { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-fields legend { margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 700; }
.contact-fields .check { min-height: 36px; align-items: center; }

/* Social icons: an ordered list. A row is the icon, the kind's name (or a name field for a custom link), the address and a remove button */
.slist { gap: 8px; }
.srow { display: grid; grid-template-columns: 44px 44px minmax(0, 140px) minmax(0, 1fr) 44px; grid-template-areas: "drag icon name url remove"; align-items: center; gap: 6px 8px; min-height: 56px; padding: 6px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.srow.dragging { opacity: .6; }
.srow > .drag { grid-area: drag; }
.srow > .icon-pick { grid-area: icon; }
.srow > .s-kind, .srow > .s-name { grid-area: name; min-width: 0; font-weight: 700; padding: 0 8px; }
.srow > .s-url { grid-area: url; min-width: 0; }
.srow > .remove { grid-area: remove; width: 44px; height: 44px; }
.srow .s-name, .srow .s-url { min-height: 44px; }
@media (max-width: 600px) {
  .srow { grid-template-columns: 44px 44px minmax(0, 1fr) 44px; grid-template-areas: "drag icon name remove" "drag icon url url"; }
}
.kind-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; margin-top: 10px; padding: 8px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.kind-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 400 15px var(--font); text-align: left; cursor: pointer; }
.kind-choice:hover { background: var(--paper-2); }
.kind-choice .icon { width: 20px; height: 20px; flex: none; }
.kind-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The contact card preview: a phone-contacts card with a switch on each line; off lines are greyed and struck through */
.cprev { margin: 0; padding: 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); }
.cp-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.cp-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--paper-2); color: var(--ink-2); font: 700 22px/1 var(--font); }
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cp-who { min-width: 0; }
.cp-name { margin: 0; font: 700 22px/28px var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cp-who .hint { margin: 2px 0 0; }
.cp-who a { color: var(--link); }
.cp-lines { list-style: none; margin: 0; padding: 0; }
.cp-line { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cp-line:last-child { border-bottom: 0; }
.cp-icon { display: grid; place-items: center; width: 28px; height: 28px; padding-top: 0; color: var(--ink-2); }
.cp-icon .icon { width: 20px; height: 20px; }
.cp-body { min-width: 0; display: grid; gap: 2px; }
.cp-label { font: 700 13px/18px var(--font); color: var(--ink-2); }
.cp-value { overflow-wrap: anywhere; font-size: 15px; line-height: 22px; }
.cp-input { width: 100%; min-height: 40px; }
.cp-note { color: var(--ink-3); font-size: 13px; line-height: 18px; }
.cp-social-extra { display: grid; gap: 6px; margin-top: 4px; }
.cp-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cp-sub { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 4px 8px; font-size: 14px; }
.cp-sub .icon { width: 18px; height: 18px; }
.cp-sub-url { color: var(--ink-2); overflow-wrap: anywhere; }
.cp-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.cp-switch input { appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--field); cursor: pointer; transition: background .15s; }
.cp-switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cp-switch input:checked { background: var(--btn); }
.cp-switch input:checked::before { transform: translateX(18px); }
.cp-switch input:disabled { opacity: .5; cursor: default; }
.cp-switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cp-switch input, .cp-switch input::before { transition: none; } }
.cp-line.is-off .cp-value, .cp-line.is-off .cp-input, .cp-line.is-off .cp-sub, .cp-line.is-off .cp-label { color: var(--ink-3); text-decoration: line-through; }
.cp-line.is-off .cp-input { background: var(--paper-2); }
@media (max-width: 600px) {
  .cp-line { grid-template-columns: 28px minmax(0, 1fr); }
  .cp-line .cp-switch { grid-column: 2; justify-self: start; }
}

/* The tiers: one segmented control per line (Your page / In person / Off) */
.cp-tiers { display: inline-flex; flex-wrap: nowrap; gap: 2px; align-self: start; padding: 3px; border-radius: 10px; background: var(--paper-2); }
.cp-seg { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.cp-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.cp-seg:has(input:checked) { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: var(--flat); }
.cp-seg:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cp-seg:has(input:disabled) { opacity: .5; cursor: default; }
.cp-line.is-unset .cp-value, .cp-line.is-unset .cp-input { color: var(--ink-3); }
.cp-unset { color: var(--ink-3); }
.cp-explain { margin: 0 0 10px; }
@media (max-width: 600px) {
  .cp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .cp-seg { justify-content: center; min-height: 44px; padding: 0 6px; }
}
/* The Share tab: the page's link and its snippet; the advanced chat section */
.page-link { align-items: center; gap: 10px; margin: 0 0 12px; }
.page-url { font: 700 16px/24px var(--font); overflow-wrap: anywhere; }
.links-intro { margin: 0 0 4px; }
.share-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }

/* Reordering: the ghost under the pointer, the dashed slot where the row lands, and the page while dragging */
.drop-slot { list-style: none; border: 2px dashed var(--ink-3); border-radius: 12px; background: transparent; }
.drag-ghost { border-radius: 12px; background: var(--card); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .45); cursor: grabbing; }
.is-moving { display: none !important; }
body.is-reordering, body.is-reordering * { cursor: grabbing !important; user-select: none; }
.brow-row, .srow { cursor: grab; }
.brow-row input, .srow input, .brow-row button, .srow button { cursor: auto; }
@media (prefers-reduced-motion: reduce) { .drag-ghost { transition: none; } }

/* The Account tab: label / value / action rows, quiet usage meters, a switch, the devices list */
.dash [data-panel=account], .dash [data-panel=card] { max-width: 860px; }
.acct-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); }
.panel > h3 + .acct-row { border-top: 0; padding-top: 0; }
.acct-label { color: var(--ink-2); font-size: 14px; }
.acct-value { min-width: 0; overflow-wrap: anywhere; }
.acct-value .hint { margin: 4px 0 0; }
.acct-value a { color: var(--ink); font-weight: 700; }
.acct-value .hint a { font-weight: 400; }
.acct-form { margin: 0 0 14px 196px; max-width: 420px; }
.acct-form .hint { margin: 4px 0 8px; }
.acct-form .hint.bad:empty { display: none; }
.plan-badge { display: inline-block; padding: 0 9px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--field); color: var(--ink); font: 700 13px/20px var(--font); letter-spacing: 0; vertical-align: middle; }
.panel > h3 .plan-badge { margin-left: 2px; }
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.meter-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--ink-2); }
.meter-head .meter-num { color: var(--ink); font-variant-numeric: tabular-nums; }
.meter-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.meter-bar i { display: block; height: 100%; width: var(--used, 0); min-width: var(--min, 0); border-radius: 3px; background: var(--ink-2); }
.meter-bar.full i { background: var(--ink); }
.meter .hint { margin: 6px 0 0; }
.acct-notify { max-width: 420px; }
.acct-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 4px 0 0; cursor: pointer; }
.acct-switch input { appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--field); cursor: pointer; transition: background .15s; }
.acct-switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.acct-switch input:checked { background: var(--btn); }
.acct-switch input:checked::before { transform: translateX(18px); background: var(--btn-ink); }
.acct-switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.acct-sub { margin: 20px 0 4px; font: 700 15px/20px var(--font); }
.devices { list-style: none; margin: 0 0 12px; padding: 0; }
.device { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.device > .icon { width: 22px; height: 22px; color: var(--ink-3); }
.device-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.device-text .hint { flex-basis: 100%; margin: 0; }
#devices-error:empty { display: none; }
.acct-danger { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.acct-danger .hint { margin: 4px 0 0; }
.danger-link { color: var(--bad); font-size: 15px; }
.help-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.help-links a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .acct-switch input, .acct-switch input::before { transition: none; } }
@media (max-width: 600px) {
  .acct-row { grid-template-columns: minmax(0, 1fr); }
  .acct-act { margin-top: 6px; }
  .acct-form { margin-left: 0; }
  .meters { grid-template-columns: 1fr; gap: 16px; }
}
.devices-more { padding: 12px 0 0; }
.acct-act { display: flex; gap: 8px; }
.acct-form .field > .prefix { display: flex; margin: 0; font-size: inherit; font-weight: 400; } /* not a field label */
.acct-form .prefix input { min-width: 0; flex: 1; }

/* Sign in on your phone (Account) and Home's nudge toward it: the phone app, src/app.ts */
.phone-setup { margin: 16px 0 8px; padding: 0 0 16px; border-bottom: 1px solid var(--rule); }
.phone-setup .acct-sub { margin-top: 0; }
.phone-setup > .hint { margin: 0 0 12px; max-width: 36em; }
.phone-qr { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 4px; }
.phone-qr-code { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 8px; box-shadow: var(--flat); }
.phone-qr-code svg { display: block; width: 100%; height: 100%; }
.phone-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.phone-qr-text .hint { margin: 0 0 12px; }
.phone-tile { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px 20px; align-items: center; margin: 0 0 24px; padding: 24px; border-radius: 12px; background: var(--card); box-shadow: var(--flat); position: relative; }
.phone-tile-close { position: absolute; top: 8px; right: 8px; color: var(--ink-2); }
.phone-tile h2 { margin: 0 0 4px; padding-right: 36px; font-size: 20px; line-height: 26px; }
.phone-tile p { margin: 0 0 12px; color: var(--ink-2); max-width: 34em; }
.phone-art { width: 96px; height: 160px; border: 3px solid var(--ink); border-radius: 18px; display: grid; place-items: center; background: var(--paper); }
.phone-art img { width: 70px; height: 70px; background: #fff; border-radius: 6px; padding: 3px; }
@media (max-width: 600px) {
  .phone-qr { grid-template-columns: 1fr; }
  .phone-qr-code { margin: 0 auto; }
  .phone-tile { grid-template-columns: 64px minmax(0, 1fr); padding: 16px; }
  .phone-art { width: 64px; height: 108px; border-radius: 14px; }
  .phone-art img { width: 46px; height: 46px; }
}