/* The free post previewers (/x-post-preview, /linkedin-post-preview): the waitlist page's paper, ink and Newsreader,
   an editor beside the post drawn by the desk's own renderers (./r/, copied by site/tools/build-preview.mjs) on the
   harbour painting. The platform themes and the phone column at the end are colour and width only: every other number
   comes from the renderers' own CSS. */
@font-face {
  font-family: "Newsreader";
  src: url(/assets/fonts/newsreader.woff2) format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
/* X draws posts in its own typeface, Chirp, which isn't free to use and loads from X's servers. Its stand-in is Roboto
   (Apache 2.0, ./fonts/Roboto-LICENSE.txt) scaled to Chirp's width: of 160 test posts at X's 518 px column, 143 break
   every line where Chirp does (131 at the phone's 308 px). x.css names "TwitterChirp" first, so this is what it gets. */
@font-face { font-family: TwitterChirp; src: url(/preview/fonts/roboto-regular-latin.woff2) format("woff2"); font-weight: 400; font-display: block; size-adjust: 103.6%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: TwitterChirp; src: url(/preview/fonts/roboto-regular-latin-ext.woff2) format("woff2"); font-weight: 400; font-display: block; size-adjust: 103.6%;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: TwitterChirp; src: url(/preview/fonts/roboto-bold-latin.woff2) format("woff2"); font-weight: 700; font-display: block; size-adjust: 107%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: TwitterChirp; src: url(/preview/fonts/roboto-bold-latin-ext.woff2) format("woff2"); font-weight: 700; font-display: block; size-adjust: 107%;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #f6f4ef;
  --paper-2: #eeebe4;
  --ink: #171614;
  --ink-2: #3b3934;
  --muted: #6b675f;
  --hair: rgba(23, 22, 20, .10);
  --field: rgba(23, 22, 20, .045);
  --on-ink: #f6f4ef;
  --focus: rgba(23, 22, 20, .55);
  --stage: #c8c0b2;
  --art: none;
  --frame-shadow: 0 0 0 .5px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .05), 0 18px 36px -12px rgba(52, 44, 34, .30), 0 60px 120px -30px rgba(52, 44, 34, .50);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161512; --paper-2: #201e1b; --ink: #eeeae2; --ink-2: #cbc6bb; --muted: #a19c91;
    --hair: rgba(238, 234, 226, .11); --field: rgba(238, 234, 226, .06); --on-ink: #161512; --focus: rgba(238, 234, 226, .6);
    --stage: #3a3731; --art: brightness(.78) saturate(.92);
    --frame-shadow: 0 0 0 .5px rgba(238, 234, 226, .14), 0 18px 36px -12px rgba(0, 0, 0, .5), 0 60px 120px -30px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161512; --paper-2: #201e1b; --ink: #eeeae2; --ink-2: #cbc6bb; --muted: #a19c91;
  --hair: rgba(238, 234, 226, .11); --field: rgba(238, 234, 226, .06); --on-ink: #161512; --focus: rgba(238, 234, 226, .6);
  --stage: #3a3731; --art: brightness(.78) saturate(.92);
  --frame-shadow: 0 0 0 .5px rgba(238, 234, 226, .14), 0 18px 36px -12px rgba(0, 0, 0, .5), 0 60px 120px -30px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Nav: the wordmark, and the other previewer. */
.nav { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 6px; }
.brand svg { width: 15px; height: 20px; fill: currentColor; margin-top: -1px; }
.brand span { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 24; }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.nav nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Hero: the search phrase, the promise, one line. */
.hero { padding-top: 48px; }
.eyebrow { margin: 0 0 18px; font-size: 15px; letter-spacing: -0.005em; color: var(--muted); }
h1 { margin: 0; font: 400 64px/1.02 var(--serif); letter-spacing: -0.028em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.lede { margin: 18px 0 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-2); text-wrap: balance; }

/* The tool: the editor, and the post on the stage. */
.tool { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; margin-top: 56px; align-items: start; }
.editor { position: sticky; top: 24px; }
.compose { border-radius: 22px; background: var(--paper-2); padding: 20px 20px 8px; transition: box-shadow .18s ease-out; }
.compose.drop { box-shadow: 0 0 0 2px var(--focus); }
.who { display: flex; align-items: center; gap: 12px; }
.avatar { flex: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.avatar img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; }
.compose.page .avatar, .compose.page .avatar img { border-radius: 6px; }
.ids { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ids input { width: 100%; height: 22px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: 6px; background: none; outline: none; font-size: 15px; letter-spacing: -0.01em; }
.ids input:hover { background: var(--field); }
.ids input:focus-visible { background: var(--field); outline: 2px solid var(--focus); outline-offset: 0; }
.ids input::placeholder { color: var(--muted); opacity: 1; }
.ids .name { font-weight: 600; color: var(--ink); }
.ids .sub { color: var(--muted); }
@media (pointer: coarse) { .ids input { height: 30px; } } /* easier to tap apart on a touch screen */
.at { display: flex; align-items: center; color: var(--muted); font-size: 15px; letter-spacing: -0.01em; }
.at input { margin-left: 1px; padding-left: 1px; }
textarea {
  display: block; width: 100%; min-height: 248px; margin: 14px 0 0; padding: 14px 0; resize: none; overflow: hidden;
  border: 0; border-top: 1px solid var(--hair); background: none; outline: none;
  font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink);
}
textarea::placeholder { color: var(--muted); opacity: 1; }
.attached { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; }
.attached img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.attached[hidden] { display: none; }
.attached span { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { display: flex; align-items: center; gap: 4px; min-height: 52px; border-top: 1px solid var(--hair); }
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin-left: -10px; border: 0; border-radius: 999px;
  background: none; cursor: pointer; font-size: 14px; color: var(--ink); letter-spacing: -0.005em;
}
.link:hover { background: var(--field); }
.link[aria-pressed="false"] { color: var(--muted); }
.link + .link { margin-left: 0; }
.count { margin-left: auto; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.count.over { color: var(--ink); }
.count b { font-weight: 400; color: var(--ink); }

/* The view: two quiet switches, the stage, the numbers and the call to action. */
.switches { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-2); }
.seg button {
  position: relative; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 14px; color: var(--muted); letter-spacing: -0.005em; transition: background .15s ease-out, color .15s ease-out;
}
.seg button::after { content: ""; position: absolute; inset: -3px 0; } /* a 44 px tap target, the track's padding included */
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(0, 0, 0, .06); }
.stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; margin: 0; padding: 64px 40px; border-radius: 22px; overflow: hidden; background: var(--stage); }
.stage > picture { position: absolute; inset: 0; }
.stage > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: var(--art); }
.stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; }
.fit { position: relative; flex: none; }
.fit > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.frame { border-radius: 12px; overflow: hidden; box-shadow: var(--frame-shadow); }
.result { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; }
.numbers { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); letter-spacing: -0.005em; }
.cta {
  flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; text-decoration: none;
  transition: opacity .15s ease-out;
}
.cta:hover { opacity: .88; }
.credit { margin: 20px 0 0; font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.credit i { font: italic 400 14px/1 var(--serif); }

/* Questions, under the fold. */
.faq { max-width: 760px; margin-top: 168px; }
.faq h2 { margin: 0 0 32px; font: 400 40px/1.1 var(--serif); letter-spacing: -0.024em; font-variation-settings: "opsz" 48; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 18px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s ease-out; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; max-width: 620px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 120px; padding-bottom: 44px; font-size: 13.5px; color: var(--muted); }
.foot nav, .foot nav span { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot a { text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1119px) {
  .tool { grid-template-columns: 1fr; gap: 32px; }
  .editor { position: static; max-width: 640px; }
}
@media (max-width: 759px) {
  .wrap { padding: 0 16px; }
  .nav { height: 60px; }
  .hero { padding-top: 24px; }
  .eyebrow { font-size: 14px; margin-bottom: 12px; }
  h1 { font-size: 40px; line-height: 1.04; letter-spacing: -0.026em; font-variation-settings: "opsz" 48; }
  .lede { font-size: 17px; margin-top: 14px; }
  .tool { margin-top: 32px; gap: 28px; }
  .compose { border-radius: 18px; padding: 16px 16px 4px; }
  textarea { min-height: 168px; font-size: 16px; }
  .switches { margin-bottom: 12px; }
  .seg button { padding: 0 13px; }
  .stage { min-height: 0; padding: 16px; border-radius: 18px; }
  .result { flex-direction: column; align-items: stretch; margin-top: 16px; }
  .cta { justify-content: center; height: 50px; font-size: 16px; }
  .faq { margin-top: 112px; }
  .faq h2 { font-size: 32px; margin-bottom: 20px; }
  .faq summary { font-size: 17px; }
  .foot { padding-top: 88px; padding-bottom: 32px; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- The platforms' own themes, and the phone column (colour and width only; everything else is the renderers') ---- */
/* X: x.css is the dark theme; light was measured on x.com (Oct 25, 2026). The frame is the desk's 600 px column
   (public/workspace.css .x-wrap): 598 px of post between 1 px borders, 12 px corners. On a phone the column is 390. */
.fh-x { width: 600px; border: 1px solid rgb(47, 51, 54); background: #000; }
.fh-x.phone { width: 390px; }
.fh-x.phone .xt { width: 388px; }
.fh-x.light { border-color: rgb(239, 243, 244); background: #fff; }
.fh-x.light .xt { background: #fff; color: rgb(15, 20, 25); }
.fh-x.light .xt-name, .fh-x.light .xt-text { color: rgb(15, 20, 25); }
.fh-x.light .xt-meta, .fh-x.light .xt-headright, .fh-x.light .xt-actions { color: rgb(83, 100, 113); }
.fh-x.light .xt-single, .fh-x.light .xt-citem, .fh-x.light .xt-card, .fh-x.light .xt-quote, .fh-x.light .xt-aff { border-color: rgb(207, 217, 222); }
.fh-x.light .xt-ph1, .fh-x.light .xt-ph { background: rgb(247, 249, 249); }
/* LinkedIn: li.css is the light theme; dark comes from LinkedIn's own stylesheet with data-color-scheme="dark" (Oct 25,
   2026). On a phone the card spans the 390 px screen, edge to edge. */
.fh-li { width: 552px; border-radius: 8px; }
.fh-li .li-card { margin: 0; }
.fh-li.phone { width: 390px; border-radius: 12px; }
.fh-li.phone .li-card { width: 390px; border-width: 0; border-radius: 0; }
.fh-li.dark .li-card { background: rgb(27, 31, 35); border-color: rgba(140, 140, 140, .25); color: rgba(255, 255, 255, .9); }
.fh-li.dark .li-deg, .fh-li.dark .li-sub { color: rgba(255, 255, 255, .6); }
.fh-li.dark .li-cta, .fh-li.dark .li-link { color: rgb(113, 183, 251); }
.fh-li.dark .li-hbtn, .fh-li.dark .li-act { color: rgba(255, 255, 255, .75); }
.fh-li.dark .li-more { background: rgb(27, 31, 35); color: rgba(255, 255, 255, .6); }
.fh-li.dark .li-ell { color: rgba(255, 255, 255, .9); }
.fh-li.dark .li-single, .fh-li.dark .li-single img { background: rgb(27, 31, 35); }