/* getdotmd.com — the landing page. White, big two-line headings (grey then black), cards with soft
   corners and light panels inside, black capsule buttons that turn DotMD blue on hover. Every picture
   is drawn here in HTML and CSS, in the app's own look: windows, comments, fixes, agents. */

:root {
  --text: #0f1217; --muted: #6e7380; --faint: #a3a8b3;
  --bg: #ffffff; --panel: #f4f5f7; --panel-2: #eceef2; --line: rgba(17,19,24,.10);
  --blue: #0a7cff; --blue-hover: #0866d9; --blue-soft: rgba(10,124,255,.10);
  --green: #1f9d55; --green-soft: rgba(31,157,85,.14); --red: #d64545; --red-soft: rgba(214,69,69,.14);
  --orange: #e8891a; --agent: #4b505c;
  /* the numbered sample agents, the app's AgentPalette: indigo, teal, rose */
  --a1: #111; --a2: #0e8a80; --a3: #d6365f; --card-radius: 26px;
  /* an agent's avatar glyph, our own drawing: a robot head (antenna, ears, two eyes, a mouth) */
  --robot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 4h6a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM4.3 8.4a1.45 1.45 0 1 0 2.9 0a1.45 1.45 0 1 0-2.9 0zM8.8 8.4a1.45 1.45 0 1 0 2.9 0a1.45 1.45 0 1 0-2.9 0zM6 11h4v1.2H6z'/%3E%3Cpath d='M7.4 1.9h1.2v2.4H7.4zM8 .2a1.1 1.1 0 1 0 0 2.2a1.1 1.1 0 1 0 0-2.2zM.5 7.3h1.8v3.4H.5zM13.7 7.3h1.8v3.4h-1.8z'/%3E%3C/svg%3E");
  --shadow: 0 30px 60px -30px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f5f5f7; --muted: #9a9fa8; --faint: #6b7079;
    --bg: #07090f; --panel: #11141b; --panel-2: #181c25; --line: rgba(255,255,255,.10);
    --blue: #2f8fff; --blue-hover: #4aa3ff; --blue-soft: rgba(47,143,255,.16);
    --shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.4);
    --agent: #5d6370;
    --a1: #f2f2f2; --a2: #1fa698; --a3: #e8577b;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
section { padding: 96px 0; }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; font-weight: 700; }
h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.06; font-weight: 700; }
h2 .dim, h1 .dim { display: block; color: var(--muted); font-weight: 600; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
.lead { font-size: 20px; color: var(--muted); max-width: 640px; margin-top: 18px; }
.muted { color: var(--muted); }
.kicker { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 600; font-size: 16px; transition: background .15s, color .15s;
  border: 0; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--blue-hover); color: #fff; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--panel); color: var(--text); }
.btn.small { height: 40px; padding: 0 16px; font-size: 14px; }
/* A Download button next to the Mac App Store badge (header, hero, footer) takes the badge's shape, so the
   two read as a pair: the badge's height and its corner (Apple's artwork: radius 6.8 of its 40 units, so
   6.8px at 40px and 8.2px at 48px). It stays our black primary button: black with a black outline in the
   light theme, and with the black badge's grey (#a6a6a6) outline in the dark theme. */
.btn.paired { border-radius: 8.2px; background: #000; color: #fff; border: 1px solid #000; }
.btn.paired.small { border-radius: 6.8px; }
.btn.paired .soon { color: rgba(255,255,255,.6); }
.btn.paired:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn.paired:hover .soon { color: rgba(255,255,255,.75); }
.btn.paired:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  .btn.paired { border-color: #a6a6a6; }
  .btn.paired:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
}
.soon { font-size: 13px; color: var(--muted); margin-left: 8px; }

/* nav */
/* sticky, edge to edge; the page fades into a fog under it (a blurred, fading band), no line */
.nav { position: sticky; top: 0; z-index: 10; }
.nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -48px; z-index: -1; pointer-events: none;
  /* eased stops, so the fog has no edge: solid under the bar, then a long soft fade */
  background: linear-gradient(to bottom,
    var(--bg) 0%, var(--bg) 50%,
    color-mix(in srgb, var(--bg) 90%, transparent) 60%,
    color-mix(in srgb, var(--bg) 72%, transparent) 70%,
    color-mix(in srgb, var(--bg) 48%, transparent) 80%,
    color-mix(in srgb, var(--bg) 22%, transparent) 90%,
    transparent 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.2) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.2) 88%, transparent 100%); }
.nav .wrap { max-width: none; padding: 0 40px; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; height: 68px; gap: 28px; }
.nav .nav-end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav nav { display: flex; gap: 24px; color: var(--muted); font-size: 15px; white-space: nowrap; }
@media (max-width: 1180px) { .nav .wrap { gap: 16px; padding: 0 24px; } .nav nav { gap: 16px; font-size: 14px; } }
.nav nav a:hover { color: var(--text); }
/* The language menu (i18n.js builds it) */
.lang { position: relative; }
.lang > button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 19px;
  background: var(--panel); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .02em; cursor: pointer; transition: background .15s; }
.lang > button:hover { background: var(--panel-2); }
.lang > button svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.lang.open > button svg { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.05);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu a { display: grid; grid-template-columns: 34px 1fr; align-items: center; padding: 9px 12px; border-radius: 12px; font-size: 16px; color: var(--text); outline: none; }
.lang-menu a b { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.lang-menu a:hover, .lang-menu a:focus-visible, .lang-menu a.on { background: var(--panel); }
.lang-menu a.on span { font-weight: 600; }
/* Chinese and Japanese: break headings between phrases, not anywhere */
:lang(ja) :is(h1, h2, h3), :lang(zh-Hant) :is(h1, h2, h3) { word-break: auto-phrase; overflow-wrap: anywhere; }
footer .wrap > * { min-width: 0; overflow-wrap: anywhere; }
/* The header's download buttons (nav.js): shown only while no other download buttons are on screen
   (the hero's, the footer's), with a short fade. Hidden, not removed,
   so the bar does not shift and they can't be tabbed to or clicked. */
.nav-stores { display: flex; align-items: center; gap: 10px; transition: opacity .25s ease, visibility .25s; }
.nav-stores, .nav-stores > * { flex: none; }
.nav.stores-off .nav-stores { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .nav-stores { transition: none; } }
/* Where the bar has no room for both in every language (measured in all 12 at the widths' narrow
   ends): the Download button alone next to the menu links (961-1240px) and on small screens
   (481-600px); none on a phone, where DotMD, a Mac app, can't be downloaded anyway. */
@media (min-width: 961px) and (max-width: 1240px), (max-width: 600px) { .nav-stores .appstore { display: none; } }
@media (max-width: 480px) { .nav .nav-stores { display: none; } }
@media (max-width: 960px) { .nav nav { display: none; } .nav .wrap { grid-template-columns: 1fr auto; } }
@media (max-width: 760px) { .nav .wrap { padding: 0 20px; } }

/* hero */
.hero { padding: 84px 0 24px; text-align: center; }
.hero-text { max-width: 980px; margin: 0 auto; }
.hero .lead { margin: 22px auto 0; max-width: 700px; }
.hero .ctas { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
/* The Mac App Store badge: Apple's own artwork (public/badges, in the visitor's language: i18n.js),
   shown as it is, never redrawn, recoloured, reshaped or animated. Apple's white badge in the light theme
   (allowed when it is the only badge in the layout and the black one would look heavy), the preferred
   black one in the dark theme (<picture>). Apple's rules: at least 40px tall on screen, and clear space
   of a quarter of its height around it (the gaps next to it are at least that). */
.appstore { display: inline-flex; flex: none; border-radius: 8.2px; line-height: 0; }   /* the focus ring's corner */
.appstore.small { border-radius: 6.8px; }
.appstore img { display: block; height: 48px; width: auto; }
.appstore.small img { height: 40px; }
/* Apple's Ukrainian files are 157.1 x 41 with the 156.1 x 40 badge in the top left corner and a blank
   unit to its right and below: drawn 41/40 as tall, so the badge itself is 40 (48) px, the blank margin
   pulled back into the gap. */
.appstore img[src*="-ua-"] { height: 49.2px; margin: 0 -1.2px -1.2px 0; }
.appstore.small img[src*="-ua-"] { height: 41px; margin: 0 -1px -1px 0; }
.appstore:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hero .fine { margin-top: 18px; font-size: 14px; color: var(--muted); }


/* cards */
.cards { display: grid; gap: 20px; margin-top: 44px; }
.cards > * { min-width: 0; }   /* a long unbreakable line (a command, a chip) scrolls or clips inside its card, not widens the page */
.cards.two { grid-template-columns: 1fr 1fr; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .cards.three, .cards.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards.two, .cards.three, .cards.four { grid-template-columns: 1fr; } }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.card .art { background: var(--panel); border-radius: 18px; padding: 22px; min-height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card h3 { margin-top: 2px; }
.card p { color: var(--muted); font-size: 16px; }
.card.wide { grid-column: span 2; }
.card.row { flex-direction: row; align-items: stretch; gap: 28px; }
.card.row .art { flex: 0 0 46%; }
.card.row .text { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
@media (max-width: 760px) { .card.row { flex-direction: column; } .card.wide { grid-column: auto; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step .num { font-size: 56px; font-weight: 700; letter-spacing: -.04em; color: var(--faint); line-height: 1; }
.step .art { margin: 18px 0; }

/* ——— drawn pieces ——— */
.win { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; font-size: 12px; }
.win .bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.seg { display: flex; background: var(--panel-2); border-radius: 7px; padding: 2px; margin-left: auto; }
.seg span { padding: 3px 9px; border-radius: 5px; color: var(--muted); font-weight: 500; }
.seg span.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tool { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); color: var(--text); font-weight: 500; position: relative; }
.tool .badge { background: var(--red); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.win .body { display: grid; }
.side { background: var(--panel); border-right: 1px solid var(--line); padding: 12px 10px; }
.side .sec { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 6px 6px; }
/* the file tree: folders with a chevron, files with a page icon, nested by level */
.side .f { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 6px; color: var(--text); white-space: nowrap; }
.side .f.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.side .f.l1 { padding-left: 21px; } .side .f.l2 { padding-left: 35px; }
.side .f.dir { font-weight: 500; }
.side .ico { flex: none; width: 13px; height: 13px; background-color: currentColor; opacity: .55; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.side .f.on .ico { opacity: 1; }
.side .ico.file { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1h5l3 3v9H3z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 1v3h3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); }
.side .ico.folder { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 3.5h4l1.5 1.5h5.5v6h-11z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: .8; }
.side .chev { flex: none; width: 8px; font-size: 9px; color: var(--muted); }
.side .f.needs .ico { -webkit-mask: none; mask: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); opacity: 1; margin: 0 2px; }
.page { padding: 18px 20px; }
.page h4 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.02em; }
.page h5 { margin: 12px 0 6px; font-size: 12px; }
.ln { height: 7px; border-radius: 4px; background: var(--panel-2); margin: 6px 0; }
.ln.w60 { width: 60%; } .ln.w70 { width: 70%; } .ln.w80 { width: 80%; } .ln.w45 { width: 45%; } .ln.w90 { width: 90%; } .ln.w30 { width: 30%; }
.t { font-size: 12px; line-height: 1.5; color: var(--text); }
.t.del { background: var(--red-soft); text-decoration: line-through; text-decoration-color: var(--red); color: var(--muted); border-left: 3px solid var(--red); padding: 2px 6px; border-radius: 4px; }
.t.add { background: var(--green-soft); border-left: 3px solid var(--green); padding: 2px 6px; border-radius: 4px; }
.t mark { background: var(--blue-soft); color: inherit; border-bottom: 2px solid var(--blue); padding: 0 1px; }
.comments { background: var(--panel); border-left: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cm { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.cm .who { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.cm .who .av { width: 16px; height: 16px; border-radius: 50%; background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.cm .who .av.ag { background: var(--agent); color: transparent; position: relative; }
.cm .who .av.ag::after, .scene .av.ag::after { content: ""; position: absolute; inset: 2.5px; background: #fff; -webkit-mask: var(--robot) center / contain no-repeat; mask: var(--robot) center / contain no-repeat; }
.cm .who .st { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--muted); }
.cm .who .st.ok { color: var(--green); }
.cm .acts { display: flex; gap: 6px; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.pill.dark { background: var(--text); color: var(--bg); border-color: transparent; }
.pill.blue { background: var(--blue); color: #fff; border-color: transparent; }
.pill.green { color: var(--green); background: var(--green-soft); border-color: transparent; }
.pill.orange { color: var(--orange); background: rgba(232,137,26,.14); border-color: transparent; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
/* An agent's avatar: a disc with our own robot head, the same for every agent (no other company's
   logo anywhere on the site: the agents are named, not pictured). You: a plain blue dot. */
.agent { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--agent); position: relative; }
.agent::after { content: ""; position: absolute; inset: 2.5px; background: #fff; -webkit-mask: var(--robot) center / contain no-repeat; mask: var(--robot) center / contain no-repeat; }
.a1 { --agent: var(--a1); } .a2 { --agent: var(--a2); } .a3 { --agent: var(--a3); }
/* Agent #1 is black; in the dark theme it turns white, so its robot turns black. */
@media (prefers-color-scheme: dark) {
  .agent.a1::after, .cm .who .av.ag.a1::after, .scene .av.ag.a1::after { background: #111; }
}
.you { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--blue); }

.float { position: absolute; }
.dock { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; }
.dock .app { width: 52px; height: 52px; border-radius: 12px; background: var(--panel-2); position: relative; }
.dock .app.dotmd { background: url(/icon.png) center/cover; }
.dock .app .badge { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.code { font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; background: var(--text); color: var(--bg); border-radius: 12px; padding: 14px 16px; white-space: pre; overflow-x: auto; }
.code .c { opacity: .55; }
.list { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
/* A row is one line of inline text (agent, action, file) so a narrow screen wraps it like a sentence; the time sits on the right. */
.list .r { display: block; line-height: 18px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; }
.list .r .agent { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.list .r .who, .list .r b { white-space: nowrap; }
.list .r .who { font-weight: 600; }
.list .r .when { float: right; margin-left: 10px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; font-size: 11px; }
.split .ed { font: 11px/1.7 ui-monospace, "SF Mono", Menlo, monospace; padding: 12px; border-right: 1px solid var(--line); color: var(--text); white-space: pre; }
.split .ed b { color: var(--blue); font-weight: 600; }
.split .pv { padding: 12px; }
.split .pv h6 { margin: 0 0 4px; font-size: 14px; }
.split .pv ul { margin: 4px 0 0 14px; padding: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 11px; }
.table th, .table td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.table th { background: var(--panel-2); }
.diagram { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.diagram .n { padding: 4px 8px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue-soft); }
.diagram .a { width: 16px; height: 1px; background: var(--muted); position: relative; }
.diagram .a::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left-color: var(--muted); }
.formula { font-family: "Times New Roman", serif; font-style: italic; font-size: 15px; text-align: center; padding: 6px; }
.hist { display: flex; gap: 14px; width: 100%; }
.hist .vers { flex: 0 0 120px; font-size: 11px; }
.hist .vers .d { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin: 6px 0 4px; }
.hist .vers .v { padding: 5px 8px; border-radius: 7px; }
.hist .vers .v.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.hist .doc { flex: 1; }
.palette { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 12px; overflow: hidden; }
.palette .q { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
.palette .q::before { content: "⌕"; color: var(--muted); }
.palette .g { padding: 6px 14px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.palette .r { padding: 6px 14px; display: flex; gap: 10px; }
.palette .r.on { background: var(--blue-soft); }
.palette .r .p { color: var(--muted); margin-left: auto; }
.menu { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; font-size: 12px; min-width: 190px; }
.menu .i { padding: 6px 10px; border-radius: 6px; display: flex; gap: 8px; }
.menu .i.on { background: var(--blue); color: #fff; }
.menu .sep { height: 1px; background: var(--line); margin: 5px 0; }
.menu .i .k { margin-left: auto; color: var(--muted); } .menu .i.on .k { color: rgba(255,255,255,.8); }
.aa { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.aa .row { display: flex; gap: 6px; }
.aa .opt { flex: 1; text-align: center; padding: 7px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; }
.aa .opt.on { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.aa .opt.serif { font-family: Georgia, serif; }
.agents2 { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 100%; }
.agents2 .arrow { color: var(--muted); font-size: 12px; margin-left: 14px; }
.tabs { display: flex; gap: 2px; padding: 6px 8px 0; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 11px; }
.tabs span { padding: 5px 10px; border-radius: 7px 7px 0 0; color: var(--muted); }
.tabs span.on { background: var(--bg); color: var(--text); font-weight: 600; }

/* mcp */
.mcp .card.row .art { background: transparent; padding: 0; }
.agent-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan { min-width: 0; overflow-wrap: break-word; border: 1px solid var(--line); border-radius: var(--card-radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan.hi { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.plan .tag { position: absolute; top: -12px; left: 24px; }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-top: 4px; }
.plan .price small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan ul { margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; display: flex; flex-direction: column; gap: 7px; }
.plan ul li::before { content: "✓"; color: var(--green); font-weight: 700; margin-right: 8px; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan .note { font-size: 13px; color: var(--muted); }

/* faq */
.faq { max-width: 760px; margin: 36px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 20px; color: var(--muted); max-width: 640px; }
.faq details p a { color: var(--blue); }
.faq details p a:hover { text-decoration: underline; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 56px 0 0; font-size: 15px; }
footer .wrap { max-width: none; padding: 0 48px; display: grid; grid-template-columns: 2.2fr repeat(4, 1fr); gap: 40px; }
footer .wrap:has(> [data-community-col]:not([hidden])) { grid-template-columns: 1.8fr repeat(5, 1fr); }
@media (max-width: 1180px) { footer .wrap, footer .wrap:has(> [data-community-col]:not([hidden])) { grid-template-columns: repeat(4, 1fr); gap: 32px; } footer .about { grid-column: 1 / -1; } }
@media (max-width: 760px) { footer .wrap { padding: 0 24px; } }
footer .about p { color: var(--muted); max-width: 440px; margin-top: 16px; }
footer .get { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
footer .soon-note { font-size: 13px; margin-top: 10px; }
footer .mail { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--text); }
footer .mail:hover { background: var(--panel); }
footer .mail svg { width: 18px; height: 18px; }
/* The Community links (src/page.js): hidden in the files, shown by the Worker for the ones set in the portal.
   Round buttons with the networks' own logos, unmodified (public/social/), and Product Hunt as a text pill. */
footer [hidden] { display: none !important; }
footer .social { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
footer .social + .get { margin-top: 14px; }
footer .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
footer .social-icon img { display: block; }
footer .social-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--text); }
footer .ph-badge { display: inline-flex; height: 40px; border-radius: 8px; }
footer .ph-badge img { display: block; height: 40px; width: auto; }
footer .social-icon:hover, footer .social-pill:hover { background: var(--panel); }
footer .social a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
footer .col { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
footer .col h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
footer .col a { color: var(--text); }
footer .col a:hover { color: var(--blue); }
footer .bottom { display: flex; justify-content: space-between; gap: 20px; margin: 48px 48px 0; padding: 22px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { footer .bottom { margin: 40px 24px 0; } }
/* The trademark notice: Apple's credit lines for the badge and the names on the site, once, small. */
footer .bottom:has(+ .tm) { padding-bottom: 12px; }
footer .tm { margin: 0 48px; padding: 0 0 28px; max-width: 980px; color: var(--muted); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 760px) { footer .tm { margin: 0 24px; } }
@media (max-width: 760px) { footer .wrap, footer .wrap:has(> [data-community-col]:not([hidden])) { grid-template-columns: 1fr 1fr; } footer .about { grid-column: span 2; } }
footer .col .consent-link { font: inherit; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
footer .col .consent-link:hover { color: var(--blue); }

/* ——— Guides, use cases, their hubs and /faq (site/PAGES-HOWTO.md) ———
   The home page's look in one reading column: the hero with the breadcrumb above the H1, a Quick answer panel,
   sections of text with numbered steps, code and screenshots, the FAQ, and the rows of links to other pages. */
.page-body > .page-hero { padding: 56px 0 8px; }
.page-hero h1 { font-size: clamp(36px, 5vw, 56px); }
.crumbs { margin: 0 0 28px; font-size: 14px; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text); }
.quick { max-width: 760px; margin: 44px auto 0; padding: 22px 26px; border-radius: 20px; background: var(--panel); text-align: left; }
.quick h2 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.quick p { font-size: 17px; }
.quick .updated { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* the text: one column, 760px */
.prose { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.page-body > section { padding: 64px 0 0; }
.prose h2 { font-size: clamp(28px, 3.4vw, 36px); margin: 0 0 14px; }
.prose h3 { font-size: 20px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--text); }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p, .prose pre + p, .prose p + pre, .prose figure + p, .prose p + .table-wrap, .prose .table-wrap + p { margin-top: 14px; }
.prose ul { margin: 0; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a:not(.btn) { color: var(--blue); }
.prose a:not(.btn):hover { text-decoration: underline; }
.prose code { font: 15px ui-monospace, "SF Mono", Menlo, monospace; background: var(--panel); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.prose pre { margin: 0; font: 14px/1.6 ui-monospace, "SF Mono", Menlo, monospace; background: var(--text); color: var(--bg); border-radius: 14px; padding: 16px 18px; white-space: pre; overflow-x: auto; }
.prose pre code { font: inherit; background: none; padding: 0; color: inherit; overflow-wrap: normal; }
.prose blockquote { margin: 14px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--blue); color: var(--muted); }
.prose .table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.prose th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prose kbd { font: 600 14px -apple-system, BlinkMacSystemFont, sans-serif; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--bg); }

/* "How to": numbered steps */
.howto { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.howto > li { counter-increment: step; position: relative; padding: 2px 0 0 52px; }
.howto > li + li { margin-top: 0; }
.howto > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--panel); color: var(--text); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.howto h3 { margin: 4px 0 4px; font-size: 18px; }
.howto pre { margin-top: 10px; }

/* a real window of the app */
.shot { margin: 28px 0 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.shot.wide { max-width: 1000px; margin: 64px auto 0; padding: 0 28px; }

/* "Learn more" links from the home page's cards and Support's answers to a guide, and the agent chips as links */
p.more { margin-top: 10px; font-size: 15px; }
p.more a { color: var(--blue); font-weight: 600; }
p.more a:hover { text-decoration: underline; }
.card p.more { margin-top: -4px; }
a.chip:hover { border-color: var(--blue); }

/* the page's FAQ: the home page's .faq, with a link to /faq last */
.page-body #faq h2 { text-align: center; }
.page-body .faq { margin-top: 24px; }
.faq-more { max-width: 760px; margin: 18px auto 0; text-align: center; }
.faq-more a { color: var(--blue); font-weight: 600; }
.faq-more a:hover { text-decoration: underline; }

/* the rows of links to the other pages (#also) */
#also { padding: 72px 0 24px; }
#also .row + .row { margin-top: 28px; }
#also h2 { font-size: 22px; margin: 0 0 14px; letter-spacing: -.02em; }
#also .links { display: flex; flex-wrap: wrap; gap: 10px; }
#also .links a { color: var(--text); display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
#also .links a:hover { background: var(--panel); }
#also .links a::after { content: "→"; margin-left: 8px; color: var(--muted); font-weight: 400; }

/* a hub's cards: every page under it, its name and one sentence */
.hub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1016px; margin: 24px auto 0; padding: 0 28px; }
@media (max-width: 640px) { .hub-cards { grid-template-columns: 1fr; } }
.hub-head { max-width: 1016px; margin: 0 auto; padding: 0 28px; }
.hub-head h2 { font-size: clamp(26px, 3vw, 32px); }
.hub-head p { margin-top: 8px; color: var(--muted); }
.hub-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; transition: border-color .15s, background .15s; }
.hub-card:hover { border-color: var(--blue); }
.hub-card h3 { font-size: 20px; }
.hub-card h3::after { content: " →"; color: var(--muted); font-weight: 400; }
.hub-card p { color: var(--muted); font-size: 16px; }
.hub-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* /faq: groups, and the links that jump to them */
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 28px auto 0; }
.faq-jump a { padding: 6px 12px; border-radius: 999px; background: var(--panel); font-size: 14px; }
.faq-jump a:hover { background: var(--panel-2); }
.faq-group { scroll-margin-top: 90px; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group h2 { max-width: 760px; margin: 0 auto; font-size: clamp(24px, 3vw, 30px); }

/* the cookie banner (consent.js): only for a visitor from a Google ad in the EEA, the UK or Switzerland.
   A card fixed at the bottom of the window, so nothing on the page moves; Accept and Decline look the same. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; max-width: 820px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; padding: 16px 16px 16px 22px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.06); font-size: 15px; line-height: 1.45;
}
.consent p { margin: 0; flex: 1; min-width: 0; }
.consent p a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.consent-choices { display: flex; gap: 10px; flex: none; }
.consent-choices .btn { justify-content: center; min-width: 104px; }
.consent .btn:focus-visible, .consent p a:focus-visible, footer .col .consent-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.consent-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.35); text-align: center;
}
@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; left: 12px; right: 12px; bottom: 12px; }
  .consent-choices .btn { flex: 1; }
}