/* dashmox.com. One stylesheet, no framework, no web fonts: the page loads
   what it shows and nothing from anybody else's server. The palette is the
   panel's, in light, with green kept for what should be acted on. */

:root {
  color-scheme: light;
  --bg: #fbfcfa;
  --surface: #ffffff;
  --tint: #f3f7f2;
  --ink: #15251d;
  --ink-2: #4c5b53;
  --ink-3: #66736c;
  --line: #e1e8e2;
  --line-strong: #c9d5cc;
  --accent: #277953;
  --accent-hover: #1f6544;
  --accent-text: #1f6544;
  --accent-soft: #e2efe6;
  --lime: #c1dca4;
  --lime-soft: #eef6e3;
  --warn: #6f5812;
  --warn-soft: #f7efdc;
  --terminal: #101915;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 12px 32px -20px rgba(20, 58, 38, 0.28);
  --shadow-lg: 0 40px 90px -40px rgba(20, 58, 38, 0.42), 0 10px 28px -16px rgba(20, 58, 38, 0.2);
  --sans: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid #6fb48d; outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { color: var(--ink); margin: 0; letter-spacing: -0.035em; line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.5rem); font-weight: 750; letter-spacing: -0.045em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 2.9rem); font-weight: 720; }
h3 { font-size: 1.2rem; font-weight: 680; letter-spacing: -0.02em; line-height: 1.3; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.9em; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.accent { color: var(--accent); }
.muted { color: var(--ink-2); }
.center { text-align: center; }

/* --- the launch bar and header -------------------------------------------- */
.launch-bar { background: var(--lime-soft); border-bottom: 1px solid #dcebc9; font-size: 14px; }
.launch-bar-row { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; flex-wrap: wrap; text-align: center; padding: 6px 0; }
.launch-bar p { color: var(--ink); }
.launch-bar a { font-weight: 650; text-decoration: none; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(39, 121, 83, 0.5);
  animation: pulse 2s infinite; flex: 0 0 auto; display: inline-block; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(39, 121, 83, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 121, 83, 0); } }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 252, 250, 0.86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 34px; height: 34px; flex: 0 0 auto; }
.wordmark { font-size: 26px; font-weight: 760; letter-spacing: -0.06em; line-height: 1; }
.wordmark span { color: var(--accent); }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 550; padding: 8px 12px; border-radius: 9px; }
.nav a:hover { color: var(--ink); background: var(--tint); }
.nav a[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.menu-panel { position: absolute; right: 0; top: 54px; width: min(320px, calc(100vw - 40px)); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 2px; }
.menu-panel a { padding: 12px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 550; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--tint); }
.menu-panel .button { margin-top: 8px; justify-content: center; color: #fff; }

/* --- buttons -------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 650; line-height: 1;
  padding: 13px 20px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; white-space: nowrap; }
.button:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-1px); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(39, 121, 83, 0.7); }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.button.small { font-size: 14px; padding: 10px 15px; border-radius: 10px; }
.button.large { font-size: 17px; padding: 16px 26px; border-radius: 13px; }
.button.waiting { cursor: default; opacity: 0.72; transform: none; }

/* --- sections ------------------------------------------------------------- */
.section { padding: clamp(68px, 9vw, 118px) 0; }
.section.tint { background: var(--tint); border-block: 1px solid var(--line); }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); display: grid; gap: 16px; }
.section-head.center { margin-inline: auto; justify-items: center; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.lead { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.28rem); color: var(--ink-2); line-height: 1.6; }
.page-hero { padding: clamp(52px, 7vw, 88px) 0 clamp(36px, 5vw, 56px);
  background: radial-gradient(900px 380px at 12% -10%, #e3f1e7 0%, transparent 70%), radial-gradient(700px 320px at 95% 0%, #f0f7e1 0%, transparent 70%); }
.page-hero .container { display: grid; gap: 20px; max-width: 900px; margin-inline: auto; }
.page-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem); }
.crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

/* --- the home hero ---------------------------------------------------------- */
.hero { padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 88px); overflow: hidden;
  background: radial-gradient(1000px 520px at 15% -5%, #dff0e4 0%, transparent 68%), radial-gradient(800px 460px at 92% 4%, #eef7dc 0%, transparent 66%); }
.hero-inner { display: grid; justify-items: center; text-align: center; gap: 24px; }
.hero h1 { max-width: 15.5ch; }
.hero .lead { max-width: 720px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--surface);
  border: 1px solid #d5e7d9; color: var(--accent-text); font-size: 14px; font-weight: 650; box-shadow: var(--shadow); }
.countdown { display: flex; gap: 10px; margin-top: 8px; }
.countdown div { min-width: 78px; padding: 11px 10px 9px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); border-radius: 13px; display: grid; }
.countdown strong { font-size: 28px; font-weight: 740; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown span { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.countdown.launched { display: none; }
/* The hero screenshot, and the gap above it. `.frame` sets margin: 0 so a
   figure fills its frame cleanly, and that rule comes later in this file than
   this one did, so it won and the panel shot sat welded to the countdown above
   it. Qualified by .hero it wins on specificity rather than on the order these
   happen to appear in. */
.hero .hero-frame { margin-top: clamp(40px, 6vw, 64px); }

/* --- a screenshot in a browser window --------------------------------------- */
.frame { margin: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.frame-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f5f7f5; border-bottom: 1px solid var(--line); }
.frame-bar span { width: 11px; height: 11px; border-radius: 50%; background: #d9e0da; }
.frame-bar em { margin-left: 14px; font-style: normal; font-size: 12.5px; color: var(--ink-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 12px; font-family: var(--mono); }
.frame img { display: block; width: 100%; }
/* A screenshot that follows a row of cards, as on the security page, where the
   protection cards ran straight into the picture below them. Only after a card
   grid: most screenshots sit beside their copy in a two-column split, where a
   margin here would push one column out of line with the other. */
.grid + .frame { margin-top: clamp(28px, 4vw, 44px); }

/* --- a column of blocks ----------------------------------------------------
   A section whose contents are blocks one under another. The distance between
   them is set here, once, instead of as a margin typed into each template,
   which is how blocks ended up welded twice on this site: a page that said
   nothing got nothing, and the rules that said something fought each other by
   order rather than by intent. A gap on the column cannot be beaten and cannot
   be forgotten.

   `.tight` is for a picture and the line that describes it, which belong
   together, and `.loose` for groups that each hold several blocks. */
.stack { display: grid; gap: clamp(28px, 3.6vw, 44px); align-content: start; }
.stack.tight { gap: 16px; }
.stack.loose { gap: clamp(44px, 5vw, 68px); }
/* Inside a stack the distance is the stack's, so a heading does not add its
   own on top of it. */
.stack > .section-head { margin-bottom: 0; }
/* A block that centres itself with automatic side margins, such as the
   questions or a column of prose, cannot also be stretched to the column: the
   browser sizes it to its content instead, and the questions came out 301px
   wide in a 980px section. Stating the width puts that back, and the block's
   own max-width still decides how wide it may be. */
.stack > .faq, .stack > .prose, .stack > .section-head { width: 100%; }

/* --- the strip of what it runs on ------------------------------------------- */
.strip { padding: 34px 0; border-block: 1px solid var(--line); background: var(--surface); }
.strip-inner { display: grid; gap: 16px; justify-items: center; text-align: center; }
.strip p { font-size: 14px; color: var(--ink-3); }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }
.strip li { font-weight: 680; color: var(--ink-2); font-size: 16px; letter-spacing: -0.01em; }

/* --- cards and grids ------------------------------------------------------ */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 10px; align-content: start;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card.lift:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card p { color: var(--ink-2); font-size: 15.5px; }
.card .more { font-weight: 650; color: var(--accent-text); font-size: 15px; margin-top: 4px; }
.icon-tile { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 6px; }
/* A measured figure, on the home page and the page of measurements. The number
   is the point of the card rather than a number inside a sentence, so it is
   read first and the sentence explains it. */
/* Four figures in a row, which needs a narrower column than the cards that
   carry a paragraph: at the ordinary minimum the fourth one wraps on its own. */
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }
.stat { display: block; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 740; letter-spacing: -0.04em; line-height: 1.1; color: var(--accent); }
/* The colours a palette is made of, painted in those colours, each labelled
   with the value the panel paints with. */
.swatches { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.swatches li { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.swatches i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(20, 58, 38, 0.18); flex: 0 0 auto; }
.icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- a picture beside words --------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split + .split { margin-top: clamp(72px, 9vw, 120px); }
.split.reverse > :first-child { order: 2; }
.split-copy { display: grid; gap: 18px; }
.split-copy .button { justify-self: start; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 32px; color: var(--ink-2); }
.checks li strong { color: var(--ink); font-weight: 650; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); }
.checks li::after { content: ""; position: absolute; left: 7.5px; top: 8px; width: 6px; height: 10px; border: solid var(--accent); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.checks.plain li::before { background: #eef1ee; }
.checks.plain li::after { left: 5px; top: 13px; width: 11px; height: 0; border-width: 2px 0 0 0; border-color: var(--ink-3); transform: none; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 44px; }

/* --- features page --------------------------------------------------------- */
.feature-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.feature-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  text-decoration: none; font-size: 14.5px; font-weight: 600; }
.feature-nav a:hover { border-color: var(--accent); color: var(--accent-text); }
.feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start;
  padding: clamp(52px, 7vw, 84px) 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.feature:first-of-type { border-top: 0; }
.feature-copy { display: grid; gap: 16px; position: sticky; top: 100px; }
.feature-copy .icon-tile { margin-bottom: 0; }
.feature-detail { display: grid; gap: 26px; }
.feature-detail .columns { gap: 12px 36px; }

/* --- pricing -------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px; display: grid; gap: 16px; align-content: start; }
.plan.featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); padding: 29px 27px; }
.plan-flag { position: absolute; top: -13px; left: 26px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: 0.02em; }
.plan h3 { font-size: 1.35rem; }
.plan-tagline { color: var(--ink-2); font-size: 15.5px; min-height: 3.1em; }
.price { display: flex; align-items: baseline; gap: 8px; }
.amount { font-size: 48px; font-weight: 760; letter-spacing: -0.05em; line-height: 1; }
.cadence { color: var(--ink-3); font-size: 15px; }
.plan .button { justify-content: center; width: 100%; }
.plan-lines { list-style: none; margin: 6px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan-lines li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--ink-2); }
.plan-lines li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.plan-note { margin-top: 22px; text-align: center; color: var(--ink-2); font-size: 15px; }

/* --- tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
/* The 620px minimum belongs to the two wide comparison tables on this site -
   pricing and control-panel-alternative - which are meant to scroll inside
   .table-wrap rather than crush their columns. As a bare element rule it also
   reached every table in the billing panel, which keeps a copy of this
   stylesheet: a two-column Latest payments in a 333px dashboard panel measured
   620px and scrolled sideways with nothing in it, and a customer's invoices on
   a phone did the same inside a 328px container. .table-wrap is used twice
   here and .table-scroll never, so scoping it to the wrapper that wants it
   gives this site exactly what it had and frees every table over there. */
.table-wrap table { min-width: 620px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15.5px; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 700; background: #f7faf7; }
tbody th { text-transform: none; letter-spacing: 0; font-size: 15.5px; color: var(--ink); background: transparent; font-weight: 650; width: 30%; }
td { color: var(--ink-2); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
td.yes { color: var(--accent-text); font-weight: 650; }

/* --- questions ------------------------------------------------------------ */
.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-size: 1.1rem; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent-text); }
.faq-icon { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: var(--ink-3); border-radius: 2px; transition: transform 0.2s; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-item p { padding: 0 4px 24px; color: var(--ink-2); max-width: 74ch; }

/* --- the install command -------------------------------------------------- */
/* min-width: 0 on the command and on anything in a grid, because a line that
   does not wrap otherwise widens its column and then the whole page on a phone. */
.install { display: flex; align-items: center; gap: 12px; background: var(--terminal); color: #e6f1ea; border-radius: 14px; padding: 10px 10px 10px 20px;
  box-shadow: var(--shadow); max-width: 760px; min-width: 0; }
.install code { flex: 1; min-width: 0; font-size: 15px; overflow-x: auto; white-space: nowrap; padding: 8px 0; }
.container > *, .grid > *, .split > * { min-width: 0; }
.install code::before { content: "$ "; color: var(--lime); }
.copy { font: inherit; font-size: 14px; font-weight: 650; color: var(--ink); background: var(--lime); border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; flex: 0 0 auto; }
.copy:hover { background: #d3e8bd; }
pre.terminal { background: var(--terminal); color: #e6f1ea; border-radius: 14px; padding: 18px 20px; overflow-x: auto; font-family: var(--mono); font-size: 14.5px; line-height: 1.7; margin: 0; }

/* --- steps and the architecture picture ------------------------------------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding: 20px 22px 20px 74px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); position: absolute; left: 22px; top: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.steps h3 { font-size: 1.08rem; margin-bottom: 4px; }
.steps p { color: var(--ink-2); font-size: 15.5px; }
.arch { display: grid; gap: 12px; max-width: 560px; margin-inline: auto; }
.arch-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: grid; gap: 3px; }
.arch-box strong { font-size: 16px; }
.arch-box span { color: var(--ink-2); font-size: 14.5px; }
.arch-box.root { border-color: #d7c48b; background: #fffcf3; }
.arch-box.sites { background: var(--accent-soft); border-color: #cfe3d6; }
.arch-arrow { justify-self: center; color: var(--ink-3); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.arch-arrow::before { content: "↓"; font-size: 18px; color: var(--accent); }
.site-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.site-row span { background: var(--surface); border: 1px solid #cfe3d6; border-radius: 9px; padding: 7px; text-align: center; font-size: 13px; font-family: var(--mono); color: var(--ink-2); }

/* --- the software you can install ------------------------------------------ */
/* Ten logos that are not the same shape: four are square marks and six are
   wordmarks three to five times as wide as they are tall. So the box is fixed
   and the logo is contained inside it rather than sized to fill it, which is
   what keeps the row of cards looking like a row. Height rather than width is
   the constraint, because a square mark scaled to a wordmark's width would
   tower over it. */
/* 250px rather than a rounder number: at this container width it is what makes
   four columns fit, and ten cards in four columns leave two on the last row
   instead of one on its own. */
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.app { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  display: grid; gap: 12px; align-content: start; }
.app-logo { height: 42px; display: flex; align-items: center; }
.app-logo img { max-height: 42px; max-width: 168px; width: auto; height: auto; }
.app h3 { font-size: 1.12rem; letter-spacing: -0.02em; }
.app p { color: var(--ink-2); font-size: 15.5px; }
/* What a website needs before this one will install, said on the card rather
   than found out from a failed install. */
.app-needs { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.app-needs li { font-family: var(--mono); font-size: 12px; color: var(--ink-3); background: #f4f7f4;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.trademarks { color: var(--ink-3); font-size: 13.5px; max-width: 78ch; }

/* --- notices, contact, prose ------------------------------------------------ */
.notice { background: var(--warn-soft); border: 1px solid #ecdcb3; border-radius: var(--radius); padding: 18px 22px; color: var(--ink); display: grid; gap: 6px; }
.notice p { color: #4d4020; }
.contact-card { gap: 14px; }
.contact-card .address { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; word-break: break-word; }
/* An index of guides: the title is the whole link. Twenty of these read in a
   glance, where twenty cards with a paragraph each are a page nobody scrolls
   to the end of. */
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.links a { color: var(--ink); text-decoration: none; font-weight: 550; }
.links a:hover { color: var(--accent-text); text-decoration: underline; }

.prose { max-width: 74ch; margin-inline: auto; display: grid; gap: 18px; }
.prose h2 { font-size: 1.6rem; margin-top: 22px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.updated { color: var(--ink-3); font-size: 15px; }

/* --- the call to action --------------------------------------------------- */
.cta { padding: 0 0 clamp(68px, 9vw, 110px); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(36px, 5vw, 60px);
  border-radius: 28px; background: linear-gradient(135deg, #e0efe5 0%, #eef6e1 100%); border: 1px solid #d5e7d9; }
.cta-inner > div:first-child { display: grid; gap: 12px; max-width: 640px; }
.cta p { color: var(--ink-2); font-size: 1.08rem; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- footer --------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.footer-brand { display: grid; gap: 14px; align-content: start; max-width: 330px; }
.footer-brand p { color: var(--ink-2); font-size: 15px; }
.footer-social { display: flex; }
.footer-social a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.footer-social a:hover { color: var(--accent-text); }
.social-mark { width: 16px; height: 16px; fill: currentColor; flex: none; }
.footer-links h2 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--accent-text); }
.footer-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; }
.footer-legal p { color: var(--ink-3); font-size: 13.5px; }

/* --- narrower screens ----------------------------------------------------- */
@media (max-width: 1040px) {
  .nav { display: none; }
  .menu { display: block; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .plan-tagline { min-height: 0; }
  .feature { grid-template-columns: 1fr; }
  .feature-copy { position: static; }
}
@media (max-width: 860px) {
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .header-actions > .button { display: none; }
  .countdown div { min-width: 64px; }
  .countdown strong { font-size: 22px; }
  .hero-actions .button, .cta-actions .button { width: 100%; justify-content: center; }
  .frame-bar em { display: none; }
  .install { flex-direction: column; align-items: stretch; padding: 12px; }
  .install code { padding: 4px 6px; }
  .steps li { padding: 64px 18px 18px; }
  .steps li::before { top: 18px; left: 18px; }
  th, td { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}