/* Onboarding owns its palette; the rest of the app keeps its tokens. */
:root { --o-bg: #FFFFFF; }
.ob bdi[dir=rtl] { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.ob, .ob-coach {
  --o-bg: #FFFFFF; --o-bg-2: #F1F2F3; --o-surface: #FFFFFF; --o-surface-2: #F6F6F7; --o-fill: #F1F2F3;
  --o-text: #111214; --o-muted: #5C6068; --o-faint: #686C74; /* 4.5:1 or more on every light surface (#92969F was 2.96:1 on white) */ --o-line: #DCDDE0; --o-line-2: #ECEDEF;
  --o-ember: #B44744; --o-ember-hover: #9E3B38; --o-ember-text: #B44744; --o-ember-soft: #FAEFED;
  --o-orchid: #704398; --o-orchid-text: #704398; --o-orchid-soft: #F3EDF8;
  --o-jade: #286A5A; --o-jade-text: #286A5A; --o-jade-soft: #EDF5F0;
  --o-ember-g: linear-gradient(in oklab 112deg, #C65A64 0%, #E38B7D 34%, #F0B69C 70%, #F3D4AE 100%);
  --o-orchid-g: linear-gradient(in oklab 112deg, #8468AF 0%, #B69CDC 34%, #D5B8DD 70%, #E8C1C4 100%);
  --o-jade-g: linear-gradient(in oklab 112deg, #4E9B8A 0%, #8DBFAA 34%, #C1D3B0 70%, #E3D4AC 100%);
  --o-stage: #FAEFED; --o-frame: #111214; --o-name: var(--o-orchid-text); --o-cover-ink: #111214; --o-warning: #B26B00;
  --o-shadow: 0 1px 2px rgba(17,18,20,.06), 0 12px 32px rgba(17,18,20,.08);
  --o-shadow-phone: 0 30px 60px -20px rgba(17,18,20,.35), 0 18px 36px -18px rgba(17,18,20,.3);
  --o-ease: cubic-bezier(.23, 1, .32, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --o-bg: #111214; }
  :root:not([data-theme="light"]) .ob, :root:not([data-theme="light"]) .ob-coach {
  --o-bg: #111214; --o-bg-2: #1F2023; --o-surface: #1F2023; --o-surface-2: #27282C; --o-fill: #333437;
  --o-text: #F1F2F3; --o-muted: #A5A9B1; --o-faint: #9195A0; --o-line: #35373A; --o-line-2: #27282C;
  --o-ember: #B44744; --o-ember-hover: #C4524F; --o-ember-text: #E98C82; --o-ember-soft: #361D1B;
  --o-orchid: #7F51A9; --o-orchid-text: #BE9FE6; --o-orchid-soft: #2A1F37;
  --o-jade: #2F7865; --o-jade-text: #77C5AC; --o-jade-soft: #142A23;
  --o-ember-g: linear-gradient(in oklab 112deg, #883136 0%, #682923 50%, #411F16 100%);
  --o-jade-g: linear-gradient(in oklab 112deg, #126051 0%, #174A3B 50%, #193024 100%);
  --o-orchid-g: linear-gradient(in oklab 112deg, #5E4185 0%, #4B3264 50%, #33223D 100%);
  --o-stage: #1E1716; --o-frame: #000; --o-name: #FFFFFF; --o-cover-ink: #F1F2F3; --o-warning: #E0A040;
  --o-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --o-shadow-phone: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"] { --o-bg: #111214; }
:root[data-theme="dark"] .ob, :root[data-theme="dark"] .ob-coach {
  --o-bg: #111214; --o-bg-2: #1F2023; --o-surface: #1F2023; --o-surface-2: #27282C; --o-fill: #333437;
  --o-text: #F1F2F3; --o-muted: #A5A9B1; --o-faint: #9195A0; --o-line: #35373A; --o-line-2: #27282C;
  --o-ember: #B44744; --o-ember-hover: #C4524F; --o-ember-text: #E98C82; --o-ember-soft: #361D1B;
  --o-orchid: #7F51A9; --o-orchid-text: #BE9FE6; --o-orchid-soft: #2A1F37;
  --o-jade: #2F7865; --o-jade-text: #77C5AC; --o-jade-soft: #142A23;
  --o-ember-g: linear-gradient(in oklab 112deg, #883136 0%, #682923 50%, #411F16 100%);
  --o-jade-g: linear-gradient(in oklab 112deg, #126051 0%, #174A3B 50%, #193024 100%);
  --o-orchid-g: linear-gradient(in oklab 112deg, #5E4185 0%, #4B3264 50%, #33223D 100%);
  --o-stage: #1E1716; --o-frame: #000; --o-name: #FFFFFF; --o-cover-ink: #F1F2F3; --o-warning: #E0A040;
  --o-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --o-shadow-phone: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
}

/* The page is one column on phones, with a stationary action at its foot. */
.shell:has(.ob), html:has(.ob), html:has(.ob) body { background: var(--o-bg); }
html:has(.ob) .col:has(> .ob) { max-width: none; padding: 0; min-height: 100dvh; }
.ob, .ob-coach { color: var(--o-text); font: 400 16px/24px Manrope, sans-serif; }
.ob { min-width: 0; background: var(--o-bg); }
.ob *, .ob-coach * { box-sizing: border-box; }
.ob button, .ob input, .ob select { font-family: inherit; color: inherit; touch-action: manipulation; }
.ob button, .ob p, .ob h1, .ob h2, .ob h3 { overflow-wrap: anywhere; }
.ob h1, .ob h2, .ob h3, .ob p { margin: 0; }
.ob :focus-visible { outline: 2px solid var(--o-ember); outline-offset: 2px; }
.ob [tabindex="-1"]:focus { outline: none; }
.ob [hidden] { display: none !important; }
.ob .t-sub { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.ob .t-body { color: var(--o-muted); font-size: 16px; line-height: 26px; }
.ob .ob-layout { width: 100%; max-width: 480px; margin: auto; }
.ob .ob-left { min-width: 0; min-height: calc(100dvh - 56px); display: flex; flex-direction: column; }
.ob .ob-content { flex: 1; padding-block: 20px 24px; }
.ob .ob-wrap { padding-inline: 16px; }
.ob .ob-heading { margin-bottom: 24px; }
.ob .ob-heading p { margin-top: 8px; }
.ob .ob-fields, .ob .ob-groups { display: grid; gap: 16px; }
.ob .ob-form { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.ob .ob-actions { position: sticky; bottom: 0; z-index: 10; margin-top: auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--o-line-2); background: var(--o-bg); }
.ob .ob-actions p { font-size: 14px; color: var(--o-muted); margin-bottom: 8px; }
.ob .ob-stage { display: none; }

/* Ember is the action; secondary controls remain quiet and keyboard reachable. */
.ob .ob-btn, .ob .ob-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-size: 16px; font-weight: 600; padding: 0 24px; border: 0; cursor: pointer; }
.ob .ob-btn { height: 52px; background: var(--o-ember); color: #fff; transition: background 160ms ease, transform 160ms var(--o-ease); }
.ob .ob-btn:hover { background: var(--o-ember-hover); }
.ob .ob-btn:active { transform: scale(.97); }
.ob .ob-btn.block { width: 100%; }
.ob .ob-btn[aria-disabled="true"] { opacity: .45; }
.ob .ob-btn2 { min-height: 44px; padding-inline: 18px; background: var(--o-surface); border: 1px solid var(--o-line); color: var(--o-text); font-size: 15px; font-weight: 500; }
.ob .ob-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--o-ember-text); font-weight: 600; }
.ob .ob-link:hover { text-decoration: underline; }
.ob .ob-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--o-surface); border: 1px solid var(--o-line); }
.ob .ob-icon .ic { width: 20px; height: 20px; }
.ob .ob-card { background: var(--o-surface); border: 1px solid var(--o-line-2); border-radius: 24px; box-shadow: var(--o-shadow); }

/* Shared fields keep the app's validation and language picker. */
.ob .field { position: relative; min-width: 0; display: grid; gap: 6px; }
.ob .field > label { font-size: 14px; line-height: 20px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--o-muted); padding: 0; }
.ob .inbox { min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--o-line); border-radius: 16px; background: var(--o-surface); box-shadow: none; }
.ob .inbox input, .ob .inbox select { font-size: 16px; line-height: 24px; font-weight: 500; width: 100%; min-width: 0; height: 50px; padding: 0; color: var(--o-text); background: transparent; }
.ob .inbox input::placeholder { color: var(--o-faint); font-weight: 400; }
.ob .inbox:focus-within { border-color: var(--o-ember); box-shadow: 0 0 0 3px color-mix(in oklab, var(--o-ember) 18%, transparent); }
.ob .inbox input:focus, .ob .inbox select:focus { outline: 0; }
.ob .combo .inbox > .ic:first-child { display: none; }
.ob .field.bad .inbox { border-color: var(--o-ember); }
.ob .field.warn .inbox { border-color: var(--o-warning); }
.ob .err, .ob .formerr { font-size: 14px; line-height: 20px; color: var(--o-ember-text); background: transparent; }
.ob .field.warn .err { color: var(--o-warning); }
.ob .hint { font-size: 13px; line-height: 20px; color: var(--o-muted); padding: 0; }
.ob .ob-popover, .ob .combo-list, .ob .pl-ac { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; padding: 8px; border: 1px solid var(--o-line); border-radius: 16px; background: var(--o-surface); box-shadow: var(--o-shadow); max-height: 300px; overflow-y: auto; list-style: none; margin: 0; }
.ob .ob-popover [role="option"], .ob .combo-list li, .ob .pl-ac li { display: block; width: 100%; min-height: 44px; padding: 8px; border-radius: 8px; text-align: left; font-size: 15px; cursor: pointer; }
.ob .ob-popover [aria-selected="true"], .ob .ob-popover [role="option"]:hover, .ob .combo-list li[aria-selected="true"] { background: var(--o-bg-2); }
.ob .ob-popover small { display: block; color: var(--o-muted); }
.ob .ob-popover footer { padding: 8px; font-size: 13px; color: var(--o-faint); }
.ob .pl-ac li[data-i] b { color: var(--o-text); font-size: 15px; }
.ob .pl-ac li[data-i] span { display: block; color: var(--o-muted); font-size: 14px; }  /* under the name, never run into it */
.ob .pl-ac .pl-src { color: var(--o-faint); font-size: 13px; }
.ob .pl-ac li[aria-selected="true"] { background: var(--o-bg-2); }

/* Back, the three segments, and a device-local save affordance. */
.ob .ob-topbar { height: 56px; max-width: 480px; margin: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding-inline: 16px; }
.ob .ob-home, .ob .ob-save { display: none; }
.ob .ob-progress { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--o-muted); white-space: nowrap; }
.ob .ob-segments { display: flex; gap: 4px; }
.ob .ob-segments i { width: 28px; height: 4px; border-radius: 2px; background: var(--o-line); }
.ob .ob-segments i.on { background: var(--o-ember); }

/* The sentence changes inside its card without closing its expanded view. */
.ob .ob-sentence { margin: 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--o-bg-2); font-size: 15px; line-height: 30px; font-weight: 500; }
.ob .ob-sentence .tok { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; max-width: 100%; padding: 0 10px; border-radius: 8px; background: var(--o-surface); font: 500 15px/24px Manrope, sans-serif; vertical-align: middle; overflow-wrap: anywhere; }
.ob .ob-sentence .tok.rival { padding-left: 4px; background: var(--o-orchid-soft); color: var(--o-name); }
.ob .tok.rival img, .ob .tok.rival .ob-ini { width: 20px; height: 20px; border-radius: 50%; flex: none; object-fit: cover; font-size: 10px; }
.ob .ob-sentence .tok.src { background: var(--o-jade-soft); color: var(--o-jade-text); }
.ob .tok .ic { width: 16px; height: 16px; flex: none; }
.ob .ob-sentence .tok.blank { color: var(--o-faint); background: transparent; border-radius: 0; border-bottom: 1px dashed var(--o-faint); padding-inline: 2px; }
.ob .ob-sentence.collapsed #gd-sentence-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob .ob-sentence .ob-link { font-size: 14px; }
.ob .ob-peek { min-height: 64px; margin: 12px 16px 0; border-radius: 16px; background: var(--o-ember-g); color: var(--o-cover-ink); display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.ob .ob-peek > span { font-size: 13px; line-height: 18px; font-weight: 600; }
.ob .ob-peek .ob-faces { gap: 0; max-width: 45%; flex-shrink: 0; overflow: hidden; }
.ob .ob-peek .ob-face { width: 29px; }
.ob .ob-peek .ob-ring { width: 36px; height: 36px; padding: 2px; }
.ob .ob-peek .ob-ring .ob-me { font-size: 14px; }
.ob .ob-peek .ob-face b, .ob .ob-peek .ob-count { display: none; }

/* Suggestions use native checkboxes so Space and focus keep working. */
.ob .ob-looked { margin-bottom: 16px; font-size: 16px; line-height: 28px; color: var(--o-muted); }
.ob .ob-industry { display: inline-block; position: relative; max-width: 100%; }
.ob .ob-industry > .ob-btn2 { min-height: 36px; padding-inline: 12px; max-width: 100%; }
.ob .ob-industry .ob-popover { width: min(240px, 70vw); right: auto; }
.ob .ob-rivals { overflow: hidden; }
.ob .ob-tick { cursor: pointer; }
.ob .ob-rival { min-height: 76px; padding: 12px 16px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 12px; align-items: center; border-bottom: 1px solid var(--o-line-2); }
.ob .ob-rival:last-child { border-bottom: 0; }
.ob .ob-rival.checked { background: var(--o-orchid-soft); }
.ob .ob-rival.off { opacity: .5; }
.ob .ob-rival .thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.ob .ob-ini { display: inline-grid; place-items: center; background: var(--o-orchid-soft); color: var(--o-orchid-text); font-weight: 600; }
.ob .ob-rival-copy { min-width: 0; overflow-wrap: anywhere; }
.ob .ob-rival-copy b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.ob .ob-rival-copy small, .ob .ob-added small { display: block; color: var(--o-muted); font-size: 14px; line-height: 20px; }
.ob .ob-handle { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 22px; font-weight: 500; }
.ob .ob-handle .ic { width: 16px; height: 16px; flex: none; }
.ob .ob-tick input, .ob .ob-more .row.tick input { appearance: none; position: relative; flex: none; width: 28px; height: 28px; margin: 0; border: 1.5px solid var(--o-line); border-radius: 9px; background: var(--o-surface); cursor: pointer; }
.ob .ob-tick input:checked { background: var(--o-orchid); border-color: var(--o-orchid); }
.ob .ob-tick input:checked::after, .ob .ob-more .row.tick input:checked::after { content: ""; position: absolute; width: 7px; height: 13px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); left: 9px; top: 4px; }
.ob .ob-add { display: flex; gap: 8px; margin-top: 16px; align-items: flex-start; }
.ob .ob-add .field { flex: 1; }
.ob .ob-add > .ob-btn2 { margin-top: 4px; }
.ob .ob-added-title { font-size: 16px; font-weight: 600; margin: 24px 0 12px; }
.ob .ob-added { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--o-line-2); align-items: center; }
.ob .ob-added:last-child { border-bottom: 0; }
.ob .ob-added > .pfp { width: 40px; height: 40px; color: var(--o-orchid-text); background: var(--o-orchid-soft); }
.ob .ob-added-name { text-align: left; min-height: 44px; min-width: 0; }
.ob .ob-added-name b { display: block; font-size: 16px; font-weight: 600; }
.ob .ob-added small .ic { width: 16px; height: 16px; vertical-align: middle; }
.ob .ob-row-tools { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 2; }
.ob .ob-loading-line { display: flex; gap: 8px; align-items: center; }
.ob .ob-loading-line .tz { width: 16px; height: 16px; color: var(--o-orchid-text); flex: none; }
.ob .ob-sk-row { display: flex; gap: 12px; padding: 12px 0; }
.ob .ob-sk-row > .ob-sk { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.ob .ob-sk-lines { display: grid; align-content: center; gap: 8px; width: 70%; }
.ob .ob-sk-lines .ob-sk { height: 14px; }
.ob .ob-sk-lines .ob-sk:last-child { width: 64%; }

/* Source and destination labels may wrap, while their checks stay in the row. */
.ob .ob-group { display: grid; padding: 20px; gap: 16px; }
.ob .ob-group h2, .ob .ob-more summary { font-size: 16px; line-height: 24px; font-weight: 600; }
.ob .ob-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob .ob-tog { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 12px 10px; border-radius: 16px; background: var(--o-surface); box-shadow: inset 0 0 0 1px var(--o-line); font-size: 15px; line-height: 20px; font-weight: 500; text-align: left; }
.ob .ob-tog > svg { width: 20px; height: 20px; flex: none; }
.ob .ob-tog-label { flex: 1; min-width: 0; }
.ob .ob-tog .st { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--o-line); color: transparent; flex: none; }
.ob .ob-tog .st .ic { width: 14px; height: 14px; }
.ob .ob-tog[aria-pressed="true"] { background: var(--o-jade-soft); box-shadow: inset 0 0 0 1.5px var(--o-jade); }
.ob .ob-tog[aria-pressed="true"] .st { background: var(--o-jade); color: #fff; box-shadow: none; }
.ob .ob-channels { display: grid; gap: 8px; }
.ob .ob-channel .ob-tog { width: 100%; }
.ob .ob-channel small { display: block; font-size: 13px; font-weight: 400; color: var(--o-muted); }
.ob .ob-channel .hint { margin: 6px 8px 0; }
.ob .ob-when { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ob .ob-when label { font-size: 16px; font-weight: 500; }
.ob .ob-when .hint { font-size: 14px; }
.ob .ob-when select { max-width: 100%; font-size: 16px; }  /* 16px: iPhone Safari zooms into smaller fields */
.ob .ob-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; cursor: pointer; }
.ob .ob-more summary::-webkit-details-marker { display: none; }
.ob .ob-more[open] summary > .ic { transform: rotate(180deg); }
.ob .ob-more .panel { background: var(--o-surface); border: 0; box-shadow: none; border-radius: 0; }
.ob .ob-more .plabel { color: var(--o-muted); text-transform: none; letter-spacing: normal; font-size: 14px; }
.ob .ob-more .plabel .r { display: none; }
.ob .ob-more .row.tick { padding: 12px 0; gap: 12px; border-color: var(--o-line-2); }
.ob .ob-more .row.tick > .lead, .ob .ob-more .row.tick > .thumb { width: 40px; height: 40px; border-radius: 50%; background: var(--o-jade-soft); color: var(--o-jade-text); }
.ob .ob-more .row.tick input:checked { background: var(--o-jade); border-color: var(--o-jade); }
.ob .ob-more .t1 { font-size: 16px; color: var(--o-text); }
.ob .ob-more .t2, .ob .ob-more .empty { color: var(--o-muted); font-size: 14px; }
.ob .ob-more .inbox .ob-btn2 { min-height: 36px; padding-inline: 12px; }
.ob .ob-more .inbox { padding-right: 8px; }

/* The faces and report replica always keep the report's light palette. */
.ob .ob-faces { display: flex; gap: 10px; }
.ob .ob-face { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; flex: none; }
.ob .ob-ring { position: relative; display: grid; width: 62px; height: 62px; border-radius: 50%; padding: 3px; background: var(--o-orchid-g); }
.ob .ob-face.you .ob-ring { background: #B44744; }
.ob .ob-ring img, .ob .ob-ring .ob-ini, .ob .ob-ring .ob-me { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; }
.ob .ob-ring .ob-ini { background: #F3EDF8; color: #704398; font-size: 20px; }
.ob .ob-ring .ob-me { display: grid; place-items: center; background: #FAEFED; color: #B44744; font-size: 20px; font-weight: 700; }
.ob .ob-count { position: absolute; right: -4px; bottom: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #111214; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.ob .ob-face b { max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; word-break: normal; overflow-wrap: normal; text-overflow: clip; font-size: 13px; line-height: 18px; font-weight: 600; }  /* KB 49 W5: a name wraps at words (two lines), never cut mid-word */
.ob .ob-preview { --k: .8168316832; position: relative; width: calc(404px * var(--k)); height: calc(820px * var(--k)); flex: none; color-scheme: light; color: #111214; --o-surface: #fff; --o-surface-2: #F1F2F3; --o-orchid-text: #704398; --o-orchid-soft: #F3EDF8; --o-orchid-g: linear-gradient(in oklab 112deg, #8468AF, #B69CDC 34%, #D5B8DD 70%, #E8C1C4); }
.ob .ob-phone { position: absolute; width: 404px; height: 820px; border: 7px solid var(--o-frame); border-radius: 48px; overflow: hidden; background: var(--o-frame); transform: scale(var(--k)); transform-origin: 0 0; box-shadow: var(--o-shadow-phone); }
.ob .ob-preview-screen { position: relative; width: 390px; height: 806px; border-radius: 41px; overflow: hidden; background: #fff; }
.ob .ob-preview-cover { background: linear-gradient(in oklab 112deg, #C65A64 0%, #E38B7D 34%, #F0B69C 70%, #F3D4AE 100%); padding: 16px 18px 24px; border-radius: 0 0 24px 24px; }
.ob .ob-preview-top { display: flex; align-items: center; gap: 8px; }
.ob .ob-preview-top .lockup { margin-right: auto; color: #111214; }
.ob .ob-preview-top .lockup svg { height: 30px; width: auto; }
.ob .ob-preview-circle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 18px; }
.ob .ob-preview-hi { margin-top: 24px; }
.ob .ob-preview-hi b { font-size: 22px; line-height: 28px; font-weight: 700; }
.ob .ob-preview-hi p { font-size: 14px; font-weight: 500; line-height: 20px; color: rgba(17,18,20,.7); }
.ob .ob-preview-date { display: flex; gap: 10px; align-items: center; margin-top: 16px; font-size: 13px; font-weight: 500; }
.ob .ob-date-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; color: #111214; font-size: 14px; font-weight: 600; }
.ob .ob-preview-verdict { font-size: 30px; line-height: 36px; font-weight: 600; margin-block: 20px; }
.ob .ob-verdict-sk { display: grid; gap: 8px; margin-block: 24px; }
.ob .ob-verdict-sk .ob-sk { height: 26px; width: 92%; background: rgba(255,255,255,.55); }
.ob .ob-verdict-sk .ob-sk:last-child { width: 64%; }
.ob .ob-preview-faces { overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.ob .ob-empty-face { width: 64px; flex: none; text-align: center; font-size: 13px; font-weight: 600; }
.ob .ob-empty-face i { display: block; width: 62px; height: 62px; border: 2px dashed rgba(255,255,255,.6); border-radius: 50%; margin-bottom: 6px; }
.ob .ob-preview-body { padding: 20px 18px; }
.ob .ob-preview-body h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.ob .ob-preview-body .ob-sk-row > .ob-sk { width: 64px; height: 64px; }
.ob .ob-preview-thing { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding-block: 12px; }
.ob .ob-preview-thing img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.ob .ob-preview-thing small { display: block; color: #704398; font-size: 13px; line-height: 18px; }
.ob .ob-preview-thing b { font-size: 15px; line-height: 22px; font-weight: 600; }
.ob .ob-preview-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 64px; background: #fff; display: flex; padding: 8px; border-top: 1px solid #DCDDE0; }
.ob .ob-preview-bar > span { position: relative; flex: 1; display: grid; justify-items: center; align-content: center; font-size: 11px; line-height: 18px; font-weight: 600; }
.ob .ob-preview-bar svg { width: 22px; height: 22px; }
.ob .ob-preview-bar .off { opacity: .35; }
.ob .ob-preview-bar .ob-count { top: -4px; bottom: auto; right: 4px; min-width: 18px; height: 18px; font-size: 11px; }

/* Desktop places the same action inline beside a sticky report stage. */
@media (min-width: 1024px) {
  .ob .ob-topbar { position: relative; height: 68px; max-width: 1200px; grid-template-columns: 44px 1fr auto 1fr; gap: 16px; padding: 0; }
  .ob .ob-home { display: inline-flex; justify-self: start; }
  .ob .ob-home .lockup svg { height: 26px; width: auto; }
  .ob .ob-progress { position: absolute; left: 50%; transform: translateX(-50%); }
  .ob .ob-save { grid-column: 4; display: block; justify-self: end; color: var(--o-muted); font-size: 15px; min-height: 44px; }
  .ob .ob-top-slot { display: none; }
  .ob .ob-layout { max-width: 1200px; padding: 32px 0 48px; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; align-items: start; }
  .ob .ob-left { min-height: 0; }
  .ob .ob-content { padding-top: 24px; }
  .ob .ob-you-content { padding-top: 0; }
  .ob .ob-wrap { padding-inline: 0; }
  .ob .ob-actions { position: static; margin-top: 0; padding: 0; border: 0; }
  .ob .ob-stage { position: sticky; top: 100px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px; min-height: 700px; background: var(--o-stage); border-radius: 32px; }
  .ob .ob-stage > p { font-size: 14px; color: var(--o-muted); }
  .ob .ob-sentence { margin: 0; }
  .ob .ob-sentence.collapsed #gd-sentence-text { display: block; overflow: visible; }
  .ob .ob-sentence > .ob-link, .ob .ob-peek { display: none; }
  .ob .ob-source-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1263px) {
  .ob .ob-topbar { margin-inline: 32px; }
  .ob .ob-layout { padding-inline: 32px; grid-template-columns: minmax(0, 1fr) 394px; }
}
@media (max-width: 359px) {
  .ob .ob-progress { gap: 6px; }
  .ob .ob-group { padding: 16px; }
  .ob .ob-source-grid .ob-tog { padding: 10px 6px; gap: 5px; font-size: 14px; }
  .ob .ob-source-grid .ob-tog > svg { width: 18px; height: 18px; }
  .ob .ob-source-grid .st { width: 20px; height: 20px; }
}

/* Only the kit's eyes move; a running task uses a still dot. */
.ob .tz { display: block; }
.ob .ob-task-state { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--o-line); }
.ob .ob-task-state.now::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--o-ember); }
.ob .status.busy i { background: var(--o-ember); animation: none; }
.ob .ob-sk { position: relative; overflow: hidden; background: var(--o-surface-2); border-radius: 8px; }
.ob .ob-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--o-surface) 70%, transparent), transparent); animation: ob-shimmer 1.4s ease-in-out infinite; }
.ob .ob-enter { animation: ob-enter 240ms var(--o-ease) both; }
.ob.ob-backwards .ob-enter { animation-name: ob-back; }
.ob .ob-land { animation: ob-land 280ms var(--o-ease) both; animation-delay: var(--delay, 0ms); }
.ob .ob-pop { animation: ob-face-pop 280ms var(--o-ease); }
.ob .ob-leaving { opacity: 0; transform: scale(.8); transition: opacity 180ms ease, transform 180ms ease; }
@keyframes ob-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ob-back { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes ob-land { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ob-face-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes ob-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after, .ob-coach *, .ob-coach *::before, .ob-coach *::after { animation: none !important; transition: none !important; }
}

/* About you and its action share a form while page additions keep their own form. */
.ob.ob-watch .ob-form { display: contents; }
.ob.ob-watch .ob-content { flex: none; padding-bottom: 16px; }
.ob .ob-about { padding-bottom: 24px; }
.ob .ob-home .lockup { height: 26px; color: var(--o-text); }

/* The sample has one report window; the phone bars occupy their own space. */
html.sample-frame { color-scheme: light; }
html.sample-frame .demo-fab { display: none !important; }
.ob.ob-sample { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.ob.ob-sample > .ob-topbar { flex: 0 0 56px; width: 100%; }
.ob .ob-sample-layout { width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ob .ob-sample-desktop { display: none; }
.ob .ob-sample-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; background: var(--o-ember-soft); font-size: 14px; line-height: 20px; flex: none; }
.ob .ob-sample-note > .ic { width: 20px; height: 20px; flex: none; }
.ob .ob-sample-stage { display: flex; flex-direction: column; min-height: 0; flex: 1; margin: 0 8px; }
.ob .ob-sample-stage > p { display: none; }
.ob .ob-sample-window { min-height: 0; flex: 1; overflow: hidden; border-radius: 24px 24px 0 0; box-shadow: var(--o-shadow); background: #fff; color-scheme: light; }
.ob .ob-sample-window iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ob.ob-sample .ob-actions { position: static; flex: none; margin: 0; }
.ob .ob-actions .ob-send-error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--o-ember-text); }
.ob .ob-send-error > .ic { width: 20px; height: 20px; flex: none; }
.ob .ob-actions .ob-after { font-size: 13px; line-height: 20px; margin: 8px 0 0; text-align: center; }
.ob .ob-next-steps h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.ob .ob-next-steps p { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 24px; margin-bottom: 16px; }
.ob .ob-next-steps p > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--o-ember-soft); color: var(--o-ember-text); border-radius: 50%; }

/* The six digits are the action, with room to shrink at 320 px. */
.ob.ob-code { min-height: 100dvh; }
.ob .ob-code-body { max-width: 480px; margin: auto; padding: 20px 16px 48px; }
.ob .ob-code-body > .t-body { margin-top: 8px; }
.ob .code { gap: 8px; margin: 32px 0 16px; }
.ob .code input { flex: 0 1 48px; width: calc((100% - 40px) / 6); min-width: 0; max-width: 48px; height: 60px; border-radius: 16px; border: 1px solid var(--o-line); background: var(--o-surface); color: var(--o-text); caret-color: var(--o-ember); font: 600 26px/1 Manrope, sans-serif; text-align: center; }
.ob .code input:focus { outline: 0; border-color: var(--o-ember); box-shadow: 0 0 0 3px color-mix(in oklab, var(--o-ember) 18%, transparent); }
.ob .field.bad .code input { border-color: var(--o-ember); }
.ob .code input:disabled { opacity: .4; }
.ob .ob-code-locked { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ob .ob-lock-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--o-bg-2); }
.ob .ob-lock-icon .ic { width: 28px; height: 28px; }
.ob .ob-code-locked > .t-body { margin: 0; }
.ob .code.confirmed input { border-color: var(--o-jade); box-shadow: none; }
.ob .ob-confirmed { display: flex; align-items: center; gap: 8px; color: var(--o-jade-text); font-size: 16px; margin-bottom: 16px; }
.ob .ob-resend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 44px; font-size: 14px; color: var(--o-muted); }
.ob .ob-resend button:disabled { color: var(--o-muted); cursor: default; text-decoration: none; }
.ob .ob-code-hint { font-size: 13px; color: var(--o-muted); margin-top: 16px; }
.ob .ob-code-note { border: 1px dashed var(--o-line); border-radius: 16px; padding: 16px; font-size: 13px; color: var(--o-muted); margin-top: 24px; }
.ob .ob-code-note .tnum { font-family: Manrope, sans-serif; font-variant-numeric: tabular-nums; }

/* Work and collected items stay visible as the first report fills. */
.ob .ob-making-top { display: flex; justify-content: space-between; }
.ob .ob-making-top .lockup { height: 26px; color: var(--o-text); }
.ob .ob-making-top .lockup svg { height: 26px; width: auto; }
.ob .ob-making-cover { padding: 24px 16px 28px; border-radius: 0 0 32px 32px; background: var(--o-ember-g); color: var(--o-cover-ink); }
.ob .ob-making-cover .tz { width: 64px; height: 64px; margin-bottom: 16px; }
.ob .ob-making-cover h1 { font-size: 28px; line-height: 34px; font-weight: 600; }
/* The line under the cover's headline at full ink: faded to 72% it read at 3.25:1 on the gradient's darkest stop. */
.ob .ob-making-cover p { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--o-cover-ink); }
.ob .ob-countdown { font-size: 40px; line-height: 48px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 24px; }
.ob .ob-track { height: 6px; background: rgba(255,255,255,.4); border-radius: 4px; overflow: hidden; margin-top: 16px; }
.ob .ob-track > span { display: block; height: 100%; background: var(--o-cover-ink); transition: width 600ms ease; }
.ob .ob-making-cover .ob-btn { margin-top: 24px; }
.ob .ob-making-cover .ob-link { color: var(--o-cover-ink); margin-top: 8px; }
.ob .ob-making-cards .ob-card, .ob .ob-making-cards .ob-group > * { min-width: 0; }
.ob .ob-making-cards { display: grid; gap: 16px; padding: 16px 16px 24px; }
.ob .ob-task-row { min-height: 44px; display: flex; align-items: center; gap: 12px; }
.ob .ob-task-row > .ic { width: 20px; height: 20px; color: var(--o-jade-text); flex: none; }
.ob .ob-task-state { flex: none; }
.ob .ob-task-row[data-state="stopped"] > .ic { color: var(--o-ember-text); }
.ob .ob-stopped { display: flex; align-items: flex-start; gap: 12px; background: var(--o-ember-soft); border-radius: 16px; padding: 14px 16px; }
.ob .ob-stopped > .ic { width: 20px; height: 20px; flex: none; color: var(--o-ember-text); }
.ob .ob-stopped p { font-size: 16px; font-weight: 500; }
.ob .ob-stopped small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--o-muted); }
.ob .ob-task-row b { font-size: 16px; font-weight: 500; display: block; }
.ob .ob-task-row small { display: block; font-size: 13px; line-height: 20px; color: var(--o-muted); }
.ob .ob-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ob .ob-live-faces { overflow-x: auto; padding: 4px; scrollbar-width: none; }
.ob .ob-thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ob .ob-thumbnail { position: relative; aspect-ratio: 1; min-width: 0; animation: ob-thumbnail 280ms var(--o-ease); }
.ob .ob-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.ob .ob-thumbnail > span { display: grid; place-items: center; position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #111214; }
.ob .ob-thumbnail .ic { width: 14px; height: 14px; }
.ob #ob-sofar-n { font-size: 14px; color: var(--o-muted); }
.ob .ob-help-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; }
.ob .ob-help-row + .ob-help-row { margin-top: 16px; }
.ob .ob-help-row p { flex: 1 1 160px; color: var(--o-muted); }
/* "Is this you?": the finder's accounts for the business itself (KB 36 D5) */
.ob .ob-own-sub { margin: 0 0 16px; font-size: 14px; color: var(--o-muted); }
.ob .ob-own-row { flex-wrap: nowrap; }
.ob .ob-own-row p { min-width: 0; color: inherit; }
.ob .ob-own-row p b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob .ob-own-row p small { display: block; color: var(--o-muted); }
.ob .ob-own-logo { flex: none; display: inline-flex; width: 24px; height: 24px; }
.ob .ob-own-logo .logo { width: 24px; height: 24px; }
.ob .ob-own-row .ob-btn2, .ob .ob-own-row .ob-link { flex: none; white-space: nowrap; }
.ob .ob-own-row .ob-link { color: var(--o-muted); font-weight: 500; }
@media (max-width: 380px) { .ob .ob-own-row { flex-wrap: wrap; } }
.ob .ob-quiet > p { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 24px; }
.ob .ob-quiet > p .ic { flex: none; }
.ob .ob-landed { padding-block: 12px; border-bottom: 1px solid var(--o-line-2); font-size: 14px; }
.ob .ob-landed b { color: var(--o-name); font-weight: 600; margin-left: 8px; }
.ob .ob-landed p { margin-top: 4px; color: var(--o-muted); }
.ob .ob-kind { border-radius: 8px; padding: 4px 8px; background: var(--o-bg-2); font-size: 13px; }
.ob .ob-mail-row { position: relative; display: block; text-align: left; min-height: 44px; padding-right: 28px; }
.ob .ob-mail-row b { display: block; font-weight: 600; font-size: 15px; }
.ob .ob-mail-row small { display: block; font-size: 13px; color: var(--o-muted); }
.ob .ob-mail-row > .ic { position: absolute; right: 0; top: 12px; }
@keyframes ob-thumbnail { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* The coach catches every pointer event and keeps its two controls in a focus loop. */
.ob-coach { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: auto; opacity: 1; transition: opacity 200ms ease; }
.ob-coach.ob-leaving { opacity: 0; }
.ob-coach .ob-spotlight { position: absolute; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(17,18,20,.58); pointer-events: none; transition: left 360ms var(--o-ease), top 360ms var(--o-ease), width 360ms var(--o-ease), height 360ms var(--o-ease); }
.ob-coach .ob-tip { position: absolute; width: min(300px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 16px; padding: 16px; background: var(--o-surface); box-shadow: var(--o-shadow); }
.ob-coach .ob-tip:focus { outline: none; }
.ob-coach small { font-size: 13px; font-weight: 600; color: var(--o-muted); }
.ob-coach h2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 8px 0; }
.ob-coach p { font-size: 15px; line-height: 22px; margin: 0; }
.ob-coach .ob-tip-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.ob-coach button { font: 600 16px/24px Manrope, sans-serif; cursor: pointer; touch-action: manipulation; }
.ob-coach .ob-btn { order: 1; min-height: 44px; padding: 0 24px; border-radius: 999px; background: var(--o-ember); color: #fff; }
.ob-coach .ob-btn:hover { background: var(--o-ember-hover); }
.ob-coach .ob-link { min-height: 44px; color: var(--o-ember-text); }
.ob-coach button:focus-visible { outline: 2px solid var(--o-ember); outline-offset: 2px; }

/* The email is shown inside a mail app, with its own reading surface. */
.ob .ob-mail-window { max-width: 480px; margin: auto; border: 0; border-radius: 0; box-shadow: none; }
.ob .ob-mail-list { display: none; }
.ob .ob-mail-pane { min-width: 0; }
.ob .ob-mail-header { height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 8px; background: var(--o-bg); }
.ob .ob-mail-header .ob-inbox { margin-right: auto; color: var(--o-ember-text); min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.ob .ob-mail-meta { padding: 20px; }
.ob .ob-mail-meta h1 { font-size: 22px; line-height: 28px; font-weight: 600; }
.ob .ob-sender { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ob .ob-app-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--o-ember); color: #fff; flex: none; }
.ob .ob-app-icon svg { width: 30px; height: 30px; }
.ob .ob-sender b { display: block; font-size: 15px; font-weight: 600; }
.ob .ob-sender small { display: block; font-size: 13px; color: var(--o-muted); }
.ob .ob-mail-body { max-width: 600px; margin: auto; padding: 24px 20px; background: var(--o-surface); display: grid; gap: 24px; }
.ob .ob-mail-body > .lockup { height: 26px; justify-self: start; color: var(--o-text); }
.ob .ob-mail-body > .lockup svg { height: 26px; width: auto; }
.ob .ob-mail-body h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
.ob .ob-mail-body .t-body { font-size: 16px; margin-top: 8px; }
.ob .ob-mail-cover { background: var(--o-ember-g); border-radius: 24px; padding: 20px; color: var(--o-cover-ink); min-width: 0; overflow: hidden; }
.ob .ob-mail-cover h3 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 16px 0; }
.ob .ob-mail-faces { overflow-x: auto; min-height: 72px; }
.ob .ob-mail-faces .ob-faces { width: max-content; zoom: .8; padding: 4px; }
.ob .ob-mail-things h3 { font-size: 16px; font-weight: 700; }
.ob .ob-email-thing { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; }
.ob .ob-email-thing img, .ob .ob-email-kind { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.ob .ob-email-kind { display: grid; place-items: center; background: var(--o-orchid-soft); color: var(--o-orchid-text); }
.ob .ob-email-thing small { display: block; color: var(--o-name); font-size: 13px; line-height: 18px; font-weight: 600; }
.ob .ob-email-thing b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.ob .ob-email-thing span { font-size: 13px; line-height: 18px; color: var(--o-muted); }
.ob .ob-mail-next { font-size: 14px; color: var(--o-muted); }
.ob .ob-email-help { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--o-bg-2); border-radius: 16px; padding: 16px; font-size: 14px; }
.ob .ob-mail-footer { font-size: 12px; line-height: 20px; color: var(--o-faint); border-top: 1px solid var(--o-line-2); padding-top: 20px; }
.ob .ob-mail-footer a, .ob .ob-mail-footer button { display: inline-flex; align-items: center; min-height: 44px; color: var(--o-muted); text-decoration: underline; }

/* Desktop keeps one sample iframe alongside the choices, and mail in a split window. */
@media (min-width: 1024px) {
  .ob.ob-sample { height: auto; min-height: 100dvh; overflow: visible; display: block; }
  .ob.ob-sample > .ob-topbar { width: auto; }
  .ob .ob-sample-layout { max-width: 1200px; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 64px; row-gap: 24px; padding: 32px 0 48px; }
  .ob .ob-sample-desktop { display: block; }
  .ob .ob-sample-desktop .ob-heading { margin: 24px 0 0; }
  .ob .ob-sample-note { grid-column: 1; border-radius: 16px; }
  .ob .ob-next-steps { grid-column: 1; }
  .ob .ob-sample-stage { grid-column: 2; grid-row: 1 / 5; position: sticky; top: 100px; flex: none; align-items: center; gap: 24px; margin: 0; padding: 32px; border-radius: 32px; background: var(--o-stage); }
  .ob .ob-sample-window { width: 380px; height: 772px; flex: none; border: 7px solid var(--o-frame); border-radius: 48px; box-shadow: var(--o-shadow-phone); }
  .ob .ob-sample-window iframe { border-radius: 41px; }
  .ob .ob-sample-stage > p { display: block; font-size: 14px; color: var(--o-muted); }
  .ob.ob-sample .ob-actions { grid-column: 1; }
  .ob .ob-code-body { padding-top: 64px; }
  .ob .ob-code-layout .ob-code-body { max-width: 560px; margin: 0; padding: 24px 0 48px; }
  .ob .code input { max-width: 56px; flex-basis: 56px; height: 68px; }
  .ob .ob-making-cover { border-radius: 32px; padding: 32px; }
  .ob .ob-making-cards { padding: 16px 0 24px; }
  .ob.ob-email { min-height: 100dvh; padding: 48px 32px; }
  .ob .ob-mail-window { display: grid; grid-template-columns: 300px minmax(0, 1fr); max-width: 1040px; height: 760px; border: 1px solid var(--o-line-2); border-radius: 16px; box-shadow: var(--o-shadow); overflow: hidden; }
  .ob .ob-mail-list { display: block; background: var(--o-bg-2); padding: 12px; border-right: 1px solid var(--o-line); }
  .ob .ob-mail-selected { position: relative; padding: 16px; background: var(--o-surface); border-radius: 12px; border: 1px solid var(--o-line); }
  .ob .ob-mail-selected b { display: block; font-size: 15px; font-weight: 600; }
  .ob .ob-mail-selected strong { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }
  .ob .ob-mail-selected p { margin-top: 6px; font-size: 13px; color: var(--o-muted); }
  .ob .ob-mail-selected small { display: block; margin-top: 8px; font-size: 12px; color: var(--o-faint); }
  .ob .ob-mail-selected i { position: absolute; top: 21px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--o-ember); }
  .ob .ob-mail-blank { padding: 20px 16px; border-bottom: 1px solid var(--o-line); }
  .ob .ob-mail-blank span { display: block; height: 10px; width: 65%; background: var(--o-line); border-radius: 4px; margin-bottom: 8px; }
  .ob .ob-mail-blank span:last-child { width: 90%; }
  .ob .ob-mail-pane { overflow-y: auto; }
}
@media (min-width: 1024px) and (max-width: 1263px) {
  .ob .ob-sample-layout { padding-inline: 32px; grid-template-columns: minmax(0, 1fr) 394px; }
  .ob .ob-sample-stage { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-coach { transition: none; }
}

/* Link help belongs below the status and row tools, across both grid columns. */
.ob .ob-added > .ob-anchor { grid-column: 1 / -1; min-width: 0; }
.ob .ob-sample-posts { overflow-y: auto; background: var(--o-surface); color-scheme: normal; }
.ob .ob-sample-posts .ob-latest { min-width: 0; overflow-wrap: anywhere; }
.ob .ob-sample-posts img { max-width: 100%; }

.ob .ob-help-row > .ob-anchor { flex-basis: 100%; min-width: 0; }
.ob .ob-latest-heading { padding: 16px; }
@media (min-width: 1024px) { .ob .ob-latest-heading { display: none; } }

/* Phone input owns the visible viewport while the keyboard is open. */
body.guided-input-focus .ob .ob-actions { visibility: hidden; pointer-events: none; }
.ob > .pl-ac { z-index: 2000; overscroll-behavior: contain; }
.own-accounts { margin: 16px 0; padding: 16px; border: 1px solid var(--o-line, var(--line)); border-radius: 24px; background: var(--o-surface, var(--panel)); color: var(--o-text, var(--ink)); text-align: left; }
.own-accounts h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.own-accounts p { margin: 0 0 12px; font-size: 14px; color: var(--o-muted, var(--muted)); }
.own-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--o-line, var(--line)); }
.own-account-main { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.own-account-main a { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; color: inherit; min-height: 44px; }
.own-account-main a span { overflow-wrap: anywhere; min-width: 0; font-size: 14px; }
.own-account-main a svg { flex: none; }
.own-account input[type=checkbox] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--o-jade, #286A5A); }
.own-account button { min-height: 44px; padding: 8px; color: var(--o-ember-text, #B44744); background: transparent; }
.own-edit { width: 100%; }
.own-edit input { width: calc(100% - 64px); min-height: 44px; font: inherit; font-size: 16px; }
.own-edit small { display: block; color: var(--o-ember-text, #B44744); }
.own-loading { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.own-loading svg { width: 32px; height: 32px; flex: none; }
.own-loading p { margin: 0; }
.own-discovery-note { padding-top: 12px; }

/* Direction A, 18 Oct 2026. Values are owned by titanium.css. */
.ob { background: var(--ti-page-glow), var(--ti-page); }
.ob .ob-layout { display: block; max-width: 480px; padding: 0; }
.ob .ob-left { min-height: 0; gap: 0; }
.ob .ob-wrap { padding-inline: 18px; }
.ob .ob-content { padding: 24px 0; }
.ob .ob-heading .t-sub { font: 600 28px/34px Manrope, sans-serif; letter-spacing: -.02em; }
.ob .ob-heading p { font-size: 16px; line-height: 24px; }
.ob .ob-cover { position: relative; isolation: isolate; width: 100%; max-width: 480px; margin: 0 auto; padding: env(safe-area-inset-top, 0px) 18px 18px; border-radius: 0 0 28px 28px; background: var(--ti-cover); color: var(--ti-cover-ink); box-shadow: var(--ti-rim); }
.ob .ob-cover::before { content: ""; position: absolute; inset: 0; background: var(--ti-sheen); border-radius: inherit; pointer-events: none; z-index: -1; }
.ob .ob-cover .ob-topbar { height: 52px; min-height: 52px; padding: 0; margin: 0; display: flex; gap: 12px; }
.ob .ob-cover .ob-topbar .ob-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--ti-on-cover); color: var(--ti-cover-ink); position: relative; }
.ob .ob-cover .ob-topbar .ob-icon::after { content: ""; position: absolute; inset: -2px; }
.ob .ob-cover .ob-progress { display: flex; flex: 1; align-items: center; gap: 12px; color: var(--ti-cover-ink-2); font: 600 13px/18px Manrope, sans-serif; white-space: nowrap; }
.ob .ob-cover .ob-segments { display: flex; flex: 1; gap: 6px; width: auto; }
.ob .ob-cover .ob-segments i { flex: 1; height: 4px; border-radius: 2px; background: rgba(0,0,0,.12); }
:root[data-theme="dark"] .ob .ob-cover .ob-segments i { background: rgba(255,255,255,.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ob .ob-cover .ob-segments i { background: rgba(255,255,255,.16); } }
.ob .ob-cover .ob-segments i.on { background: var(--ti-ink); }
.ob .ob-cover-time { color: var(--ti-cover-ink-2); font-size: 13px; line-height: 18px; margin-top: 6px; }
.ob .ob-cover h2 { font: 600 20px/26px Manrope, sans-serif; letter-spacing: -.02em; margin-top: 2px; }
.ob .ob-cover .ob-sentence { margin: 4px 0 0; padding: 0; background: none; border: 0; color: var(--ti-cover-ink-2); font: 400 13px/18px Manrope, sans-serif; border-radius: 0; }
.ob .ob-cover #gd-sentence-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob .ob-cover .ob-sentence .tok { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: 600 13px/18px Manrope, sans-serif; border-radius: 0; vertical-align: baseline; }
.ob .ob-cover .ob-sentence .tok.blank { font-weight: 400; }
.ob .ob-cover .ob-sentence .tok img, .ob .ob-cover .ob-sentence .tok .ic, .ob .ob-cover .ob-sentence .ob-ini, .ob .ob-cover .ob-sentence > button { display: none; }
.ob .ob-cover .ob-faces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; overflow: visible; }
.ob .ob-cover .ob-face { width: 48px; flex: 0 0 48px; margin: 0; }
.ob .ob-cover .ob-ring { width: 48px; height: 48px; padding: 2px; background: var(--ti-ring); border: 0; border-radius: 50%; display: grid; place-items: center; }
.ob .ob-cover .you .ob-ring { background: var(--ti-ring-you); }
.ob .ob-cover .ob-ring > img, .ob .ob-cover .ob-ring > span { width: 44px; height: 44px; border: 2px solid var(--ti-face-gap); border-radius: 50%; background: var(--ti-on-cover); color: var(--ti-cover-ink); display: grid; place-items: center; object-fit: cover; font-size: 14px; }
.ob .ob-cover .ob-face b { width: 48px; margin-top: 4px; font: 500 11px/16px Manrope, sans-serif; color: var(--ti-cover-ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; word-break: normal; overflow-wrap: normal; text-overflow: clip; }
.ob .ob-cover .ob-placeholder .ob-ring { background: none; border: 2px dashed var(--ti-cover-ink-2); color: var(--ti-cover-ink-2); font-size: 20px; }
.ob .ob-cover .ob-overflow { align-self: center; font-size: 16px; }
.ob .ob-actions { position: sticky; bottom: 0; width: 100%; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); margin: auto 0 0; background: var(--ti-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--ti-glass-edge); text-align: center; }
.ob .ob-actions p { margin: 8px 0 0; font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-actions p:empty { display: none; }
.ob .ob-btn { height: 54px; background: var(--ti-ember); box-shadow: var(--ti-ember-glow); border-radius: 999px; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.ob .ob-btn:disabled { opacity: .45; cursor: default; }
.ob .ob-btn:active { transform: scale(.97); }
.ob :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font: 400 17px/24px Manrope, sans-serif; min-width: 0; }
.ob .inp { min-height: 54px; border-radius: 16px; background: var(--ti-surface); border: 1px solid var(--ti-line); box-shadow: none; }
.ob input:focus, .ob select:focus, .ob textarea:focus, .ob :focus-visible { outline: 2px solid var(--ti-ember); outline-offset: 2px; }
.ob .ob-card, .ob .own-accounts { background: var(--ti-surface); box-shadow: var(--ti-card); border-color: var(--ti-line-2); }
.ob .ob-tog { background: var(--ti-surface); }
.ob .ob-tog[aria-pressed="true"] { background: var(--ti-surface); border-color: var(--ti-select); }
.ob .ob-tog[aria-pressed="true"] .st { background: var(--ti-select); color: var(--ti-on-select); }
.ob .ob-logo { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--ti-line); color: #1D1D1F; font: 600 12px/1 Manrope, sans-serif; }
.ob .ob-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity 160ms ease; }
.ob .ob-logo img.ok { opacity: 1; }  /* loaded: until then the initials show (js/places.js) */
.ob .ob-logo:has(img.ok) > span { visibility: hidden; }  /* the logo or the initials, never both (owner, 24 Oct 2026) */
/* The same tile outside the sign-up's .ob, such as the laptop's Found as you type panel (onboarding-split.js): the picture
   fills its frame once loaded, the initials only until then (owner, 24 Oct 2026: initials printed over the logo). */
.ob-logo { position: relative; overflow: hidden; display: inline-grid; place-items: center; }
.ob-logo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity 160ms ease; }
.ob-logo > img.ok { opacity: 1; }
.ob-logo:has(> img.ok) > span { visibility: hidden; }
.ob-split-found .ob-ring > .ob-logo { padding: 0; box-sizing: border-box; overflow: hidden; }
.ob-split-found .ob-ring > .ob-logo > img { border-radius: 50%; }
.ob-split-found .ob-ring > .ob-logo > span { width: auto; height: auto; border: 0; background: none; }
.ob .ob-ring .ob-logo { width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; }
.ob .ob-ring .ob-logo img { border: 0; border-radius: 50%; }
.ob .ob-company-field { position: relative; }
.ob #gd-company-logo { position: absolute; left: 8px; top: 35px; pointer-events: none; }
.ob #gd-company-logo .ob-logo { width: 38px; height: 38px; border-radius: 10px; }
.ob .ob-company-field.has-logo input { padding-left: 56px; }
.ob .pl-ac [role="option"]:has(.ob-logo) { padding-left: 50px; position: relative; min-height: 52px; }
.ob .pl-ac [role="option"] > .ob-logo { position: absolute; left: 12px; top: 12px; }
.ob .ob-popover [role="option"] > .ob-logo { float: left; margin: 0 10px 4px 0; }
.ob .ob-rivals { background: none; box-shadow: none; border: 0; display: grid; gap: 10px; }
.ob .ob-rivals .ob-rival { padding: 12px 14px; border: 0; border-radius: 20px; background: var(--ti-surface); box-shadow: var(--ti-card); gap: 12px; }
.ob .ob-rivals .ob-rival.checked { background: var(--ti-surface); box-shadow: inset 0 0 0 2px var(--ti-select), var(--ti-card); }
.ob .ob-rival .ob-logo, .ob .ob-added-header > .ob-logo { width: 44px; height: 44px; border-radius: 12px; }
.ob .ob-rival-copy b, .ob .ob-added-name b { color: var(--ti-orchid-text); font: 700 16px/22px Manrope, sans-serif; }
.ob .ob-rival-copy small, .ob .ob-handle { color: var(--ti-muted); font: 400 13px/18px Manrope, sans-serif; }
.ob .ob-tick input { width: 28px; height: 28px; border-radius: 50%; background: var(--ti-surface); accent-color: var(--ti-select); }
.ob .ob-tick input:checked { background: var(--ti-select); border-color: var(--ti-select); color: var(--ti-on-select); }
.ob .ob-tick input:checked::after { border-color: var(--ti-on-select); }
.ob .ob-added { display: block; margin-top: 10px; padding: 12px 14px; background: var(--ti-surface); box-shadow: var(--ti-card); border-radius: 20px; border: 0; }
.ob .ob-added-header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob .ob-added-name { flex: 1; min-width: 0; }
.ob .ob-added-name small { font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-added-name small.found { color: var(--ti-jade-text); }
.ob .ob-added-name small.missing { color: var(--ti-ember-text); }
.ob .ob-row-tools { flex: none; gap: 0; }
.ob .ob-row-tools .ob-icon { width: 44px; height: 44px; border-radius: 50%; }
.ob .ob-account-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ob .ob-account-chips:empty { display: none; }
.ob .ob-account-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: var(--ti-jade-soft); color: var(--ti-jade-text); font: 500 13px/18px Manrope, sans-serif; overflow-wrap: anywhere; }
.ob .ob-account-chip :is(svg, .ic, .netlogo) { width: 16px; height: 16px; flex: none; }
.ob a.ob-account-chip { min-height: 44px; text-decoration: none; }
.ob a.ob-account-chip > span { min-width: 0; overflow-wrap: anywhere; }
.ob a.ob-account-chip:hover, .ob a.ob-account-chip:focus-visible { text-decoration: underline; outline: 2px solid var(--ti-jade-text); outline-offset: 1px; }
.ob .ob-whatsapp-first { border: 1px solid var(--ti-jade-text); border-radius: 20px; padding: 16px; margin-bottom: 12px; background: var(--ti-surface); }
.ob .ob-whatsapp-first .ob-channel-row { padding: 0; }
.ob .ob-whatsapp-first .ob-tag { color: var(--ti-jade-text); background: var(--ti-jade-soft); }
.ob .ob-whatsapp-first p { margin: 10px 0 0; color: var(--ti-muted); font-size: 14px; }
.ob .ob-search-sk { position: relative; overflow: hidden; background: var(--ti-fill); color: var(--ti-muted); }
.ob .ob-search-sk::after { content: ""; position: absolute; inset: 0; background: var(--ti-sheen); transform: translateX(-100%); animation: ob-shimmer 1400ms cubic-bezier(.23,1,.32,1) infinite; animation-delay: var(--delay); }
.ob .ob-search-alert { margin-top: 10px; padding: 10px; border-radius: 16px; background: var(--ti-ember-soft); }
.ob .ob-search-alert h3 { font: 600 14px/20px Manrope, sans-serif; }
.ob .ob-search-alert > p { font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-search-alert .ob-anchor { background: none; padding: 0; margin: 10px 0 0; border: 0; }
.ob .ob-search-alert .ob-anchor > p { display: none; }
.ob .ob-search-alert .ob-anchor .inp { min-height: 46px; }
.ob .ob-search-alert .ob-anchor input { font-size: 16px; }
.ob .ob-search-alert .ob-anchor > .ob-btn2 { background: var(--ti-ember); color: #fff; }
.ob .ob-search-ways { display: flex; gap: 8px; margin-top: 8px; }
.ob .ob-search-ways .ob-btn2 { padding: 0 12px; min-height: 44px; border: 1px solid var(--ti-line); background: var(--ti-surface); font-size: 13px; }
.ob .ob-market-group { margin-top: 20px; }
.ob .ob-market-group h2 { display: flex; justify-content: space-between; gap: 8px; font: 700 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-market-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 64px; border-bottom: 1px solid var(--ti-line); }
.ob .ob-market-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ob .ob-market-copy b { display: block; font: 700 15px/20px Manrope, sans-serif; }
.ob .ob-market-copy small { display: block; font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-market-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; flex: none; }
.ob .ob-market-check { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid var(--ti-line); border-radius: 50%; flex: none; }
.ob .ob-market-check.on { background: var(--ti-select); color: var(--ti-on-select); border-color: var(--ti-select); }
.ob-market .ob-heading .t-sub { font-size: 26px; line-height: 32px; }
.ob .ob-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob .ob-channel .ob-tog { padding: 10px; gap: 6px; min-height: 52px; border-radius: 16px; font-size: 14px; }
.ob .ob-channel .ob-tog > :is(.ic, .netlogo) { flex: none; width: 24px; height: 24px; }
.ob .ob-channel .ob-tog-label { min-width: 0; }
.ob .ob-channel .ob-tog-label small { font-size: 12px; line-height: 16px; }
.ob .ob-channel .st { flex: none; width: 22px; height: 22px; }
.ob .ob-when { flex-wrap: nowrap; gap: 6px; min-height: 56px; border: 1px solid var(--ti-line); border-radius: 16px; background: var(--ti-surface); padding: 4px 8px; }
.ob .ob-when label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ob .ob-when #f-hour { font-size: 22px; font-weight: 600; width: 104px; flex: none; padding: 0 8px; }
.ob .ob-when #f-zone { flex: 1; width: 100px; font-size: 16px; padding: 0 4px; color: var(--ti-muted); }
.ob .ob-enter, .ob .ob-land, .ob .ob-pop { animation-duration: 520ms; animation-timing-function: cubic-bezier(.23,1,.32,1); }
.ob .ob-track > span { transition: none; }
.ob.ob-sample { height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ob.ob-sample .ob-cover-short { padding-bottom: 0; flex: none; }
.ob.ob-sample .ob-sample-layout { display: flex; flex-direction: column; max-width: 480px; min-height: 0; padding: 0; gap: 0; }
.ob.ob-sample .ob-sample-desktop { display: none; }
.ob.ob-sample .ob-sample-stage { position: static; flex: 1; min-height: 0; padding: 0; margin: 0; display: flex; align-items: stretch; gap: 0; background: none; border-radius: 0; }
.ob.ob-sample .ob-sample-window { width: 100%; height: auto; min-height: 0; flex: 1; border: 0; border-radius: 0; box-shadow: none; }
.ob.ob-sample .ob-sample-window iframe { border-radius: 0; }
.ob.ob-sample .ob-sample-stage > p { display: none; }
.ob.ob-sample .ob-sample-note { background: var(--ti-fill); border-radius: 0; }
.ob.ob-sample .ob-actions { position: static; margin: 0; flex: none; }
.ob.ob-making .ob-making-top { background: var(--ti-cover); box-shadow: var(--ti-rim); }
@media (max-width: 360px) { .ob .ob-added-header { gap: 6px; } .ob .ob-added-header > .ob-logo { width: 36px; height: 36px; } .ob .ob-row-tools { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .ob *, .ob *::before, .ob *::after { animation: none !important; transition: none !important; } }
html[data-ob-still] .ob *, html[data-ob-still] .ob *::before, html[data-ob-still] .ob *::after { animation: none !important; transition: none !important; }
.ob .inbox { min-height: 54px; background: var(--ti-surface); border-color: var(--ti-line); }
.ob .inbox input, .ob .inbox select { height: 52px; font-size: 17px; font-weight: 400; }
.ob .inbox:focus-within { outline: 2px solid var(--ti-ember); outline-offset: 2px; box-shadow: none; }
.ob .inbox input:focus, .ob .inbox select:focus { outline: none; }
.ob .ob-search-alert .inbox { min-height: 46px; }
.ob .ob-search-alert .inbox input { height: 44px; font-size: 16px; }
.ob .ob-cover .ob-face .ob-logo img { border-radius: 50%; }
.ob .ob-actions > .ob-link { color: var(--ti-muted); }
.ob .ob-channel .hint { font-size: 13px; }
.ob .ob-search-alert .ob-anchor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.ob .ob-search-alert .ob-anchor .field { grid-column: 1; }
.ob .ob-search-alert .ob-anchor > button { grid-column: 2; align-self: center; padding: 0 14px; }
.ob .ob-search-alert .ob-anchor .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ob .ob-account-chip img { width: 16px; height: 16px; }
.ob.ob-you, .ob.ob-competitors, .ob.ob-market, .ob.ob-watch { min-height: 100dvh; display: flex; flex-direction: column; }
.ob:is(.ob-you, .ob-competitors, .ob-market, .ob-watch) .ob-layout { flex: 1; display: flex; flex-direction: column; }
.ob:is(.ob-you, .ob-competitors, .ob-market, .ob-watch) .ob-left { flex: 1; }
.ob.ob-email { width: 100%; max-width: 480px; min-height: 100dvh; margin: auto; padding: 0 18px 24px; }
.ob.ob-email .bt.tint { background: var(--ti-ember); color: #fff; min-height: 54px; border-radius: 999px; box-shadow: var(--ti-ember-glow); }
.ob.ob-email .topnav { background: var(--ti-cover); }
.ob.ob-email .t-title { font: 600 28px/34px Manrope, sans-serif; }
.ob.ob-email .note { background: var(--ti-fill); color: var(--ti-muted); }
.ob.ob-email .gp-au-field { background: none; padding: 0; }
.ob.ob-code .ob-topbar { max-width: 480px; display: flex; background: var(--ti-cover); border-radius: 0 0 28px 28px; padding: 0 18px; }
.ob.ob-code .ob-stage { display: none; }
.ob.ob-code .ob-code-body { width: 100%; padding: 24px 18px 48px; }
.ob.ob-code .code input { min-width: 0; height: 54px; border-radius: 16px; background: var(--ti-surface); border: 1px solid var(--ti-line); }
.ob.ob-email .btn.tint:not(.ti-primary) { background: var(--ti-ember); color: #fff; box-shadow: var(--ti-ember-glow); transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.ob.ob-email .btn:not(.ti-primary):active { transform: scale(.97); }
.ob.ob-email .gp-au-field > .field > .inbox:focus-within { outline: 2px solid var(--ti-ember); outline-offset: 2px; border-color: var(--ti-line); box-shadow: none; }
.ob.ob-email .gp-au-field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--ti-surface) inset; -webkit-text-fill-color: var(--ti-ink); }
.ob .ob-search-alert .ob-anchor > .ob-btn2 { min-height: 46px; }
/* First report: Titanium cover and the facts landing from the customer's setup. */
.ob.ob-making .ob-making-cover { position: relative; isolation: isolate; background: var(--ti-cover); color: var(--ti-cover-ink); box-shadow: var(--ti-rim); border-radius: 0 0 28px 28px; padding: 18px 18px 20px; }
.ob.ob-making .ob-making-cover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ti-sheen); z-index: -1; pointer-events: none; }
.ob.ob-making .ob-making-cover .tz { color: var(--ti-cover-ink); width: 52px; height: 52px; }
.ob.ob-making .ob-making-cover p { color: var(--ti-cover-ink-2); font-size: 15px; line-height: 22px; }
.ob.ob-making .ob-track { background: rgba(0,0,0,.12); }
.ob.ob-making .ob-track > span { background: var(--ti-ink); transition: none; }
:root[data-theme="dark"] .ob.ob-making .ob-track { background: rgba(255,255,255,.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ob.ob-making .ob-track { background: rgba(255,255,255,.16); } }
.ob.ob-making .ob-layout { display: block; max-width: 480px; padding: 0; }
.ob.ob-making .ob-stage { display: none; }
.ob.ob-making .ob-making-top { max-width: 480px; background: var(--ti-page); box-shadow: none; }
.ob.ob-making .ob-making-cards { padding: 18px 18px 24px; }
.ob .ob-knows h2 { font: 700 16px/22px Manrope, sans-serif; margin: 0 0 10px; }
.ob .ob-knows-card { background: var(--ti-surface); border-radius: 24px; padding: 6px 16px; box-shadow: var(--ti-card); }
.ob .ob-know-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ti-line); animation: ob-know-land 520ms cubic-bezier(.23,1,.32,1) var(--land-delay) backwards; }
.ob .ob-know-row:last-child { border-bottom: 0; }
.ob .ob-know-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ti-fill); color: var(--ti-muted); flex: none; }
.ob .ob-know-icon .ic { width: 18px; height: 18px; }
.ob .ob-know-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ob .ob-know-copy small { display: block; color: var(--ti-muted); font: 600 12px/16px Manrope, sans-serif; }
.ob .ob-know-copy b { display: block; margin-top: 1px; font: 600 15px/21px Manrope, sans-serif; }
.ob .ob-know-copy .ob-know-rival { color: var(--ti-orchid-text); }
.ob .ob-know-copy .ob-link { display: block; min-height: 44px; text-align: left; font-size: 13px; }
.ob .ob-know-state { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 4px; border-radius: 50%; background: var(--ti-jade); color: #fff; animation: ob-know-tick 160ms cubic-bezier(.23,1,.32,1) calc(var(--land-delay) + 360ms) backwards; }
.ob .ob-know-state .ic { width: 14px; height: 14px; }
.ob .ob-know-state.waiting { background: var(--ti-ember); font-weight: 700; }
.ob .ob-know-skeleton { display: block; width: 70%; height: 21px; margin-top: 4px; border-radius: 6px; background: var(--ti-fill); }
.ob .landed .ob-know-row, .ob .landed .ob-know-state { animation: none; }
.ob.ob-wait-link { padding: 16px 0; min-height: 0; }
@keyframes ob-know-land { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ob-know-tick { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ob .ob-know-row, .ob .ob-know-state { animation: none; } }
html[data-ob-still] .ob .ob-know-row, html[data-ob-still] .ob .ob-know-state { animation: none; }

/* Muted copy on tinted alert and code header surfaces must retain AA contrast. */
.ob .ob-search-alert p, .ob .ob-search-alert .field > label { color: var(--ti-ink); }
.ob-code .ob-topbar .ob-progress { color: var(--ti-cover-ink-2); }

.ob.ob-email .note, .ob .ob-stopped small { color: var(--ti-ink); }
/* A source that is not live yet: unticked, locked, "soon" under its name (pulse/sources.json since). */
.ob-tog[disabled] { cursor: default; }
.ob-tog[disabled] .ob-tog-label { color: var(--o-muted); }
.ob-tog[disabled] .ob-tog-label small { display: block; font-size: 12px; font-weight: 600; color: var(--o-muted); }
.ob-tog[disabled] > .ic:first-child, .ob-tog[disabled] svg:first-child { opacity: .55; }

/* When and where: one reading column, list rows, and the native hour picker. */
.ob.ob-watch .ob-content { padding-top: 0; padding-bottom: 0; }
.ob.ob-watch .ob-groups { display: block; }
.ob .ob-watch-section > h1, .ob .ob-watch-section > h2 { margin: 28px 0 10px; color: var(--ti-ink); font: 600 22px/28px Manrope, sans-serif; letter-spacing: -.02em; }
.ob .ob-watch-section > .ob-card { border: 0; border-radius: 20px; background: var(--ti-surface); box-shadow: var(--ti-card); }
.ob .ob-watch-section > .ob-group { padding: 16px; }
.ob .ob-time-row { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.ob .ob-hour { position: relative; flex: none; font: 600 34px/40px Manrope, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ob .ob-hour select { position: absolute; inset: -2px 0; width: 100%; height: 44px; opacity: 0; font-size: 17px; cursor: pointer; }
.ob .ob-hour:focus-within { outline: 2px solid var(--ti-ember); outline-offset: 2px; border-radius: 4px; }
.ob .ob-zone-line { min-width: 0; flex: 1; }
.ob .ob-zone-line b { display: block; font: 600 15px/20px Manrope, sans-serif; overflow-wrap: anywhere; }
.ob .ob-zone-line small { display: block; font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-zone-change { position: relative; flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ti-fill); color: var(--ti-ink); font: 600 15px/20px Manrope, sans-serif; }
.ob .ob-zone-change::after { content: ""; position: absolute; inset: -5px 0; }
.ob #ob-when-words { font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); margin: 12px 0 0; }
.ob .ob-section-sub { font: 400 14px/20px Manrope, sans-serif; color: var(--ti-muted); margin: -4px 0 10px; }
.ob .ob-channel-list { padding: 0 16px; }
.ob .ob-channel { border-bottom: 1px solid var(--ti-line-2); }
.ob .ob-channel:last-child { border-bottom: 0; }
.ob .ob-channel-row { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; color: var(--ti-ink); text-align: left; }
.ob .ob-logo-tile { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; }
.ob .ob-logo-tile > svg, .ob .ob-logo-tile > img { width: 36px; height: 36px; }
.ob .ob-email-logo { background: var(--ti-ember); color: white; }
.ob .ob-email-logo > svg { width: 22px; height: 22px; }
.ob .ob-channel-label { flex: 1; min-width: 0; }
.ob .ob-channel-label b, .ob .ob-channel-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob .ob-channel-label b { font: 600 16px/22px Manrope, sans-serif; }
.ob .ob-channel-label small { font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-channel-label small { white-space: normal; overflow: visible; text-overflow: clip; }
.ob .ob-tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ti-fill); color: var(--ti-muted); font: 600 12px/16px Manrope, sans-serif; }
.ob .ob-included { background: var(--ti-jade-soft); color: var(--ti-jade-text); }
.ob .ob-switch { width: 51px; height: 31px; border-radius: 999px; background: var(--ti-fill); box-shadow: inset 0 0 0 1px var(--ti-line); position: relative; flex: none; }
.ob .ob-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.ob [aria-checked="true"] .ob-switch { background: var(--ti-jade); box-shadow: none; }
.ob [aria-checked="true"] .ob-switch::after { transform: translateX(20px); }
.ob .ob-channel .hint { margin: 0; padding: 0 12px 12px; font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); }
.ob .ob-channel .hint.ob-hint-open { animation: ob-hint 200ms cubic-bezier(.23,1,.32,1); }
.ob .ob-channel .hint[hidden] { display: none; }
.ob.ob-watch .ob-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob.ob-watch .ob-about .field + .field { margin-top: 16px; }
.ob.ob-watch .ob-about .input, .ob.ob-watch .ob-about input, .ob.ob-watch .ob-about .combo { min-height: 54px; border-radius: 16px; font-size: 17px; }
.ob .ob-channel-row:active, .ob .ob-zone-change:active, .ob .ob-zone-option:active, .ob .ob-tog:active, .ob .ob-btn2:active, .ob .ob-market-row:active { transform: scale(.98); }
.ob .ob-channel-row, .ob .ob-zone-change, .ob .ob-zone-option, .ob .ob-tog, .ob .ob-btn2, .ob .ob-market-row { transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.ob button:focus-visible, .ob input:focus-visible, .ob select:focus-visible { outline: 2px solid var(--ti-ember); outline-offset: 2px; }
@keyframes ob-hint { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* A modal in the onboarding palette. The document is still the only scroll area outside the sheet. */
html:has(.ob-zone-sheet[open]), body:has(.ob-zone-sheet[open]) { overflow: hidden; }
.ob .ob-zone-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 480px; max-height: 86vh; padding: 10px 18px max(24px, env(safe-area-inset-bottom)); border: 0; border-radius: 24px 24px 0 0; background: var(--ti-surface); color: var(--ti-ink); box-shadow: var(--ti-card); overflow-y: auto; }
.ob .ob-zone-sheet::backdrop { background: rgba(0,0,0,.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ob .ob-zone-grabber { width: 36px; height: 5px; border-radius: 999px; background: var(--ti-line); margin: 0 auto 14px; }
.ob .ob-zone-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ob .ob-zone-sheet h2 { font: 600 22px/28px Manrope, sans-serif; letter-spacing: -.02em; }
.ob .ob-zone-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--ti-fill); border-radius: 14px; }
.ob .ob-zone-search input { min-width: 0; width: 100%; height: 48px; border: 0; background: none; color: var(--ti-ink); font: 400 16px/22px Manrope, sans-serif; }
.ob .ob-zone-search input:focus, .ob .ob-zone-search input:focus-visible { outline: none; }
.ob .ob-zone-search:focus-within { box-shadow: 0 0 0 2px var(--ti-ember); }
.ob .ob-zone-results h3 { margin: 18px 0 4px; color: var(--ti-muted); font: 600 13px/18px Manrope, sans-serif; }
.ob .ob-zone-option { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--ti-line-2); background: none; color: var(--ti-ink); text-align: left; font: 400 16px/22px Manrope, sans-serif; }
.ob .ob-zone-option span { flex: 1; min-width: 0; }
.ob .ob-zone-option small { color: var(--ti-muted); font: 400 13px/18px Manrope, sans-serif; max-width: 42%; text-align: right; }
.ob .ob-zone-option .ic { flex: none; color: var(--ti-ember); width: 18px; }
.ob .ob-zone-empty { padding: 24px 0; color: var(--ti-muted); }

/* Route motion is opt-in. A first render and a redraw have no entrance animation. */
.ob[data-step] .ob-enter { animation: none; }
.ob.ob-forward .ob-content, .ob.ob-forward .ob-about, .ob.ob-forward .ob-sample-layout > :not(.ob-actions), .ob.ob-forward .ob-code-body, .ob.ob-forward.ob-email > :not(.nav) { animation: ob-step-forward 280ms cubic-bezier(.23,1,.32,1) both; }
.ob.ob-back .ob-content, .ob.ob-back .ob-about, .ob.ob-back .ob-sample-layout > :not(.ob-actions), .ob.ob-back .ob-code-body, .ob.ob-back.ob-email > :not(.nav) { animation: ob-step-back 280ms cubic-bezier(.23,1,.32,1) both; }
.ob .ob-step-card { animation: ob-step-rise 520ms cubic-bezier(.23,1,.32,1) both; animation-delay: var(--ob-stagger); }
.ob.ob-forward .ob-cover > h2, .ob.ob-back .ob-cover > h2, .ob.ob-forward .ob-cover-time, .ob.ob-back .ob-cover-time { animation: ob-cover-fade 200ms cubic-bezier(.23,1,.32,1) both; }
.ob .ob-segment-new { transform-origin: left; animation: ob-segment-fill 300ms cubic-bezier(.23,1,.32,1) both; }
@keyframes ob-step-forward { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes ob-step-back { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes ob-step-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ob-cover-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ob-segment-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .ob *, .ob *::before, .ob *::after { animation: none !important; transition: none !important; } .ob button:active { transform: none !important; } }
:root[data-ob-still] .ob *, :root[data-ob-still] .ob *::before, :root[data-ob-still] .ob *::after { animation: none !important; transition: none !important; }
:root[data-ob-still] .ob button:active { transform: none !important; }
.ob .ob-logo-tile .logotile { width: 36px; height: 36px; border-radius: 10px; color: white; }
.ob .ob-logo-tile .logo { width: 22px; height: 22px; }
.ob[data-step] { overflow-x: clip; }
.ob .ob-cover { position: relative; }
.ob.ob-forward .ob-cover > .ob-cover-out, .ob.ob-back .ob-cover > .ob-cover-out { position: absolute; margin: 0; pointer-events: none; animation: ob-cover-out 200ms cubic-bezier(.23,1,.32,1) both; }
@keyframes ob-cover-out { from { opacity: 1; } to { opacity: 0; } }
/* Email's main action stays in place while the question and fields enter. */
.ob.ob-forward.ob-email > form, .ob.ob-back.ob-email > form { animation: none; }
.ob.ob-forward.ob-email form > :not(.bottom) { animation: ob-step-forward 280ms cubic-bezier(.23,1,.32,1) both; }
.ob.ob-back.ob-email form > :not(.bottom) { animation: ob-step-back 280ms cubic-bezier(.23,1,.32,1) both; }
/* A ticked source is something we watch: Jade (monitoring), never black (Design bible 4; discovery walk, 18 Oct). */
.ob.ob-watch .ob-source-grid .ob-tog[aria-pressed="true"] { background: var(--ti-jade-soft); color: var(--ti-jade-text); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ti-jade); }
.ob.ob-watch .ob-source-grid .ob-tog[aria-pressed="true"] .ic { color: inherit; }
.ob.ob-watch .ob-source-grid .ob-tog[aria-pressed="true"] .st { background: var(--ti-jade); color: #fff; }
.ob .ob-icon, .ob .ob-link { transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.ob .ob-icon:active, .ob .ob-link:active { transform: scale(.98); }
/* Filled segments keep their ink in explicit and device dark mode. */
:root .ob .ob-cover .ob-segments i.on { background: var(--ti-ink); }

/* Approved WhatsApp sign-up, 19 Oct 2026. Titanium values stay in titanium.css. */
.ob.wa-page { max-width: 480px; min-height: 100svh; margin: 0 auto; padding: 0 18px 158px; display: block; }
.ob.wa-page .wa-cover { width: calc(100% + 36px); margin: 0 -18px; padding: 24px 18px 16px; border-radius: 0 0 28px 28px; background: var(--ti-cover); color: var(--ti-cover-ink); box-shadow: var(--ti-rim); }
.ob.wa-page .wa-nav { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 600 15px/20px Manrope, sans-serif; color: var(--ti-cover-ink-2); }
.wa-nav .ob-icon { background: var(--ti-on-cover-2); color: var(--ti-cover-ink); width: 44px; height: 44px; }
.ob.wa-page .wa-cover h2 { font: 600 20px/26px Manrope, sans-serif; letter-spacing: -.02em; margin: 8px 0 2px; }
.ob.wa-page .wa-cover p { font: 500 13px/18px Manrope, sans-serif; color: var(--ti-cover-ink-2); margin: 0; overflow-wrap: anywhere; }
.ob.wa-page .wa-cover .ob-faces { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 0; overflow: visible; }
.ob.wa-page .wa-cover .ob-face { width: 44px; min-width: 44px; margin-right: -8px; }
.ob.wa-page .wa-cover .ob-face b { display: none; }
.ob.wa-page .wa-cover .ob-ring { width: 44px; height: 44px; }
.ob.wa-page h1, .ob .wa-connected h1 { font: 600 26px/32px Manrope, sans-serif; letter-spacing: -.03em; margin: 18px 0 6px; color: var(--ti-ink); }
.ob .wa-line { font: 400 15px/22px Manrope, sans-serif; color: var(--ti-muted); margin: 0 0 14px; }
.ob .wa-small { font: 400 13px/18px Manrope, sans-serif; color: var(--ti-muted); margin-top: 10px; }
.wa-lock { position: relative; margin-top: 14px; height: 168px; border-radius: 22px; overflow: hidden; background: var(--ti-fill); box-shadow: var(--ti-card); }
.wa-tiles { position: absolute; inset: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; filter: blur(9px); transform: scale(1.06); }
.wa-tiles img { width: 100%; height: 144px; object-fit: cover; border-radius: 14px; }
.wa-tiles .wa-sk { display: block; height: 144px; border-radius: 14px; background: linear-gradient(160deg, #F2F2F5 0%, #D6D7DE 55%, #B9BBC4 100%); box-shadow: inset 0 -40px 0 rgba(255,255,255,.35); }
.wa-tiles .wa-sk:nth-child(2) { background: linear-gradient(160deg, #E9E3DA 0%, #CFC6BA 60%, #B6AB9E 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-tiles .wa-sk { background: linear-gradient(160deg, #3A3A3F 0%, #2A2A2E 60%, #1E1E21 100%); box-shadow: inset 0 -40px 0 rgba(255,255,255,.06); } }
:root[data-theme="dark"] .wa-tiles .wa-sk { background: linear-gradient(160deg, #3A3A3F 0%, #2A2A2E 60%, #1E1E21 100%); box-shadow: inset 0 -40px 0 rgba(255,255,255,.06); }
.wa-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: max-content; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 999px; background: var(--ti-glass); color: var(--ti-ink); font: 600 13px/18px Manrope, sans-serif; text-align: center; box-shadow: var(--ti-float); }
.wa-next { margin-top: 14px; padding: 4px 16px; background: var(--ti-surface); border-radius: 22px; box-shadow: var(--ti-card); text-align: left; }
.wa-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ti-line-2); }
.wa-row:last-child { border: 0; }
.wa-row > div { min-width: 0; }
.wa-row b { display: block; font: 600 16px/22px Manrope, sans-serif; color: var(--ti-ink); }
.wa-row div > span { display: block; font: 400 14px/20px Manrope, sans-serif; color: var(--ti-muted); margin-top: 2px; }
.wa-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ti-fill); color: var(--ti-ink); font: 700 14px/1 Manrope, sans-serif; }
.ob.wa-page .wa-actions { border: 0; position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%,480px); box-sizing: border-box; padding: 12px 18px max(18px,env(safe-area-inset-bottom)); display: block; background: var(--ti-glass); backdrop-filter: blur(16px); z-index: 10; }
.ob .wa-text { display: block; width: 100%; min-height: 44px; margin: 8px 0 0; text-align: center; color: var(--ti-ink); font: 500 15px/20px Manrope, sans-serif; }
.ob .wa-glyph { color: #25D366; margin-right: 10px; font-size: 22px; vertical-align: middle; }
.wa-actions .ti-primary, .wa-connect .ti-primary { width: 100%; }
.wa-page input { font-size: 17px; min-height: 54px; }
.wa-page :is(input,button,a):focus-visible, #wa-done :is(button,a):focus-visible { outline: 2px solid var(--ti-ember); outline-offset: 2px; }
.wa-mid { text-align: center; padding-top: 30px; }
.wa-mid .ob-eyes { display: block; width: 92px; margin: 0 auto 14px; }
.wa-note { margin: 12px 0; padding: 12px 14px; border-radius: 16px; background: var(--ti-fill); color: var(--ti-muted); font: 400 13px/19px Manrope, sans-serif; text-align: left; }
#wa-done:not(:empty) { padding: 0 18px; }
.wa-connected { text-align: center; padding: 24px 0; }
.wa-ok { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--ti-jade-soft); color: var(--ti-jade-text); font-size: 32px; }
.wa-connected .wa-n { background: var(--ti-fill); color: var(--ti-ink); }
.wa-connect { padding: 20px; margin: 0 0 20px; border-radius: 22px; background: var(--ti-surface); box-shadow: var(--ti-card); }
.wa-connect h2 { font: 600 20px/26px Manrope, sans-serif; color: var(--ti-ink); margin: 0 0 6px; }
.ob-making:has(.wa-connected) .ob-making-top .wordmark { visibility: hidden; }
@media (max-width:340px) { .wa-pill { font-size: 12px; padding: 10px; gap: 5px; } }

.ob.wa-page .wa-cover .ob-ring :is(.ob-ini,.ob-me) { display: grid; place-items: center; font: 500 13px/1 Manrope, sans-serif; background: var(--ti-surface); color: var(--ti-ink); border-color: var(--ti-face-gap); }
.ob.wa-page .wa-cover .ob-ring { background: var(--ti-ring); }
.ob.wa-page .wa-cover .you .ob-ring { background: var(--ti-ring-you); }
.ob .wa-text { text-decoration: none; }

/* LinkedIn reuses the quiet sign-up action; leave room for all contact choices. */
.ob.wa-page:has(.wa-linkedin) { padding-bottom: calc(192px + max(18px,env(safe-area-inset-bottom))); }
.ob .wa-linkedin { display: flex; align-items: center; justify-content: center; gap: 8px; }

.ob-discovery-note { margin: 12px 0 0; color: var(--ti-muted); font-size: 14px; line-height: 1.5; }
.ob-added > .ob-link, .own-accounts > .ob-link { margin-top: 8px; }
/* The linked person stays visible while choosing work context and competitors. */
.ob .ob-linkedin-person { padding: 16px; margin-bottom: 20px; border: 1px solid var(--o-line); border-radius: 16px; background: var(--o-surface); }
.ob .ob-linkedin-person-row { display: flex; align-items: center; gap: 12px; }
.ob .ob-linkedin-person-row > div { min-width: 0; }
.ob .ob-linkedin-person strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ob .ob-linkedin-person p { margin: 4px 0 0; color: var(--o-muted); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.ob .ob-linkedin-person > p, .ob .ob-linkedin-person > button { margin-top: 12px; }
.ob .ob-linkedin-avatar { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--o-bg-2); box-shadow: 0 0 0 2px var(--o-ember); }
.ob .ob-linkedin-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Shared profiles are review choices, with the same account link and explicit scope. */
.own-scope { flex-basis: 100%; color: var(--o-muted, var(--muted)); font-size: 13px; line-height: 1.5; }
.ob-shared-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; }
.ob-shared-account > a { flex-basis: 100%; }
.ob-shared-account small { flex: 1; min-width: 160px; color: var(--ti-muted); font-size: 13px; line-height: 1.5; }

/* Sign-up beside a real report (owner, 23 Oct 2026). js/onboarding-split.js builds the stage once. */
.ob-split { display: none; }
.ob-real-frame { position: absolute; top: 0; left: 0; width: 390px; height: 806px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
/* Phone, step one: a window onto the report, scaled whole to the width. */
.ob .ob-cover.ob-cover-peek :is(.ob-faces, .ob-sentence, .ob-cover-time, h2) { display: none; }
.ob .ob-real-peek { position: relative; height: 290px; margin: 6px 0 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(17,18,20,.16); }
.ob .ob-real-peek { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.ob .ob-real-cap { margin-top: 10px; display: flex; gap: 8px; align-items: baseline; font: 400 13px/18px Manrope, sans-serif; color: var(--ti-cover-ink-2); }
.ob .ob-real-cap::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--o-orchid, #704398); transform: translateY(-1px); }
@media (min-width: 1024px) {
  /* The form keeps the left half; the stage holds the right half and stays while the steps change. */
  html.ob-split-on .ob:is(.ob-you, .ob-competitors, .ob-market, .ob-watch) { padding-right: 50%; min-height: 100dvh; }
  html.ob-split-on .ob .ob-cover { max-width: 560px; padding: 24px 40px 0; background: none; box-shadow: none; border-radius: 0; color: var(--o-text, var(--ti-ink)); }
  html.ob-split-on .ob .ob-cover::before { display: none; }
  html.ob-split-on .ob .ob-cover :is(.ob-cover-time, h2, .ob-sentence, .ob-faces, .ob-cover-out) { display: none; }
  html.ob-split-on .ob .ob-cover .ob-topbar { height: 56px; }
  html.ob-split-on .ob .ob-cover .ob-progress { position: static; transform: none; color: var(--o-muted); }
  html.ob-split-on .ob .ob-layout { max-width: 560px; margin: 0 auto; padding: 24px 40px 64px; }
  html.ob-split-on .ob .ob-left { width: 100%; align-self: stretch; }
  html.ob-split-on .ob .ob-wrap { padding-inline: 0; }
  html.ob-split-on .ob .ob-heading .t-sub { font-size: 44px; line-height: 50px; letter-spacing: -.035em; }
  html.ob-split-on .ob .ob-heading p { font-size: 17px; line-height: 26px; }
  html.ob-split-on .ob .ob-content { flex: none; }
  html.ob-split-on .ob .ob-actions { position: static; margin-top: 28px; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.ob-split-on .ob .ob-actions .ob-btn { width: 100%; }
  html.ob-split-on .ob-split:not([hidden]) { display: block; position: fixed; z-index: 5; top: 0; right: 0; bottom: 0; width: 50%; overflow: hidden; background: #1C1C1E; color: #fff; }
  .ob-split-photo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,20,.25), rgba(17,18,20,.78)), url(../img/home-next/lifestyle-arrival.jpg) center / cover; }
  .ob-split-body { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 32px; padding: 40px; }
  .ob-split-side { display: flex; flex-direction: column; gap: 28px; width: 296px; flex: none; }
  .ob-split-found { padding: 18px 20px; border-radius: 24px; background: rgba(255,255,255,.96); color: #1D1D1F; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
  .ob-split-label { font: 600 12px/16px Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #704398; }
  .ob-split-found .ob-faces { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
  .ob-split-found .ob-face { width: 48px; flex: 0 0 48px; margin: 0; }
  .ob-split-found .ob-ring { width: 48px; height: 48px; padding: 2px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(in oklab 112deg, #8468AF, #B69CDC 34%, #D5B8DD 70%, #E8C1C4); }
  .ob-split-found .you .ob-ring { background: linear-gradient(in oklab 112deg, #C65A64, #E38B7D 34%, #F0B69C 70%, #F3D4AE); }
  .ob-split-found .ob-ring > img, .ob-split-found .ob-ring > span { width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; background: #F2F2F5; color: #1D1D1F; display: grid; place-items: center; object-fit: cover; font-size: 14px; }
  .ob-split-found .ob-placeholder .ob-ring { background: none; border: 2px dashed #86868B; color: #6E6E73; font-size: 20px; }
  .ob-split-found .ob-face b { display: block; width: 48px; margin-top: 4px; font: 500 11px/14px Manrope, sans-serif; color: #6E6E73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ob-split-found #ob-split-line { font: 400 15px/22px Manrope, sans-serif; }
  .ob-split-cap { display: flex; flex-direction: column; gap: 8px; }
  .ob-split-cap b { font: 600 28px/34px Manrope, sans-serif; letter-spacing: -.02em; }
  .ob-split-cap span { font: 400 15px/22px Manrope, sans-serif; color: #D9D9DE; }
  /* Phone height follows the window so the whole frame always shows. */
  .ob-split-phone { --ph: min(600px, calc(100dvh - 96px)); flex: none; height: var(--ph); width: calc(var(--ph) * .486); padding: 8px; border-radius: 46px; background: #111214; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .ob-split-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #fff; }
}
/* Narrower laptops stack the card and the line above the phone. */
@media (min-width: 1024px) and (max-width: 1359px) {
  .ob-split-body { flex-direction: column; gap: 20px; padding: 32px; }
  .ob-split-side { width: min(100%, 380px); gap: 0; }
  .ob-split-cap { display: none; }
  .ob-split-phone { --ph: min(600px, calc(100dvh - 260px)); }
}

/* Backup delivery stays on the WhatsApp step and reuses the standard field. */
.wa-backup { margin-block: 16px; text-align: start; }
.wa-backup .field { margin: 0; }
.wa-backup input { font-size: 16px; min-height: 44px; width: 100%; }
.wa-backup .hint { font-size: 14px; line-height: 1.5; }