/* ------------------------------------------------------------------
   focusmaxxing website — layout only.

   theme.css is the design system, shared with the extension and the
   desktop app; it owns the tokens, the cards, the buttons and the type.
   This file only says where things sit, the same split popup.css and
   app/shell.css keep.

   One column down the middle, like every panel of the desktop app:
   --page is how wide it may get, and every part of a page is padded
   with the same --edge so a heading lines up with the cards under it.
   ------------------------------------------------------------------ */

:root {
  --page: 940px;
  --edge: 22px;
  --top-h: 62px;
}

@media (min-width: 720px) {
  :root {
    --edge: 32px;
  }
}

body {
  min-height: 100%;
  font-size: 15px;
  line-height: 1.55;
  user-select: text; /* theme.css turns selection off for app chrome; a website is for reading */
  overflow-x: hidden;
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--edge);
}

/* theme.css writes .btn for the <button> the two apps use. On a website
   half of them are links, and a link arrives underlined. */
a.btn {
  text-decoration: none;
}

/* A row of buttons under something. */
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* A paragraph inside a card, held to a reading measure. Long lines are
   the one thing that makes a wide card hard to read. */
.card p.note,
.card p.hint {
  max-width: 64ch;
}

.card p.note + p.note {
  margin-top: 10px;
}

.top-gap {
  margin-top: 16px;
}

/* ---------------- the bar at the top ---------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--top-h);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
}

/* The name in the top left, written as a word: the mark's F in place
   of the first letter, then "ocusmaxxing", all in the text colour and
   no plate behind it (2026-10-22, the owner's call). */
.brand {
  display: flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}

/* The F, sized from Manrope's capitals: its bar-top to foot (71 units)
   is a capital's height (0.72em), so the arrow rises above the word.
   The arrow reaches past the letter's own width, over the lowercase
   "o"; the negative margin lets the "o" tuck in under it, clear of the
   F's middle arm. */
.brand-f {
  display: inline-flex;
}

.brand-f svg {
  display: block;
  width: 0.771em;
  height: 0.913em;
  margin-right: -0.17em;
  fill: currentColor;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a {
  padding: 7px 11px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
  transition: color 0.18s, background 0.18s;
}

.nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.nav a[aria-current="page"] {
  color: var(--text);
  background: var(--surface-2);
}

/* On a phone the nav would push the brand off the screen, so it drops
   underneath and the bar grows to hold both. */
@media (max-width: 640px) {
  .top {
    position: static;
    height: auto;
    padding: 10px 0 12px;
  }

  .top .wrap {
    flex-wrap: wrap;
    gap: 8px;
  }

  .nav {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .nav a {
    padding: 6px 9px;
    font-size: 13px;
  }
}

/* ---------------- the shape of a page ---------------- */

main {
  position: relative;
  z-index: 1;
  display: block;
  padding: 46px 0 72px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.stack.tight {
  gap: 14px;
}

/* The first thing on a page: what it is, in as few words as the screens
   already use. */
.head {
  max-width: 62ch;
  margin: 0 0 30px;
}

.head h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.head p {
  margin: 0;
  font-size: 16.5px;
  color: var(--muted);
}

.head .mark {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.eyebrow {
  display: block;
  margin: 0 0 10px;
}

h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* ---------------- cards on a page ---------------- */

.card.pad {
  padding: 26px 24px;
}

.card.pad.slim {
  padding: 20px 22px;
}

.tiles {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .tiles.three {
    grid-template-columns: repeat(3, 1fr);
  }

  .tiles.two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 20px;
}

.tile p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.tile .btn {
  margin-top: auto;
  align-self: flex-start;
}

.tile-top {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tile-top h2,
.tile-top h3 {
  margin: 0;
}

/* A small square holding an icon, next to a heading. Not the mark — the
   mark is the brand and appears once per page at most. */
.glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent-text);
}

.glyph svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chrome's own logo, wherever Chrome is meant: it is a filled picture,
   not a line icon, so it takes more of its square to look the same
   size as its neighbours. */
.glyph .chrome-logo {
  width: 24px;
  height: 24px;
}

/* Windows' own logo, wherever the desktop app is meant (Windows is the
   only desktop it runs on). Four filled squares read bigger than a
   circle, so it is drawn a little smaller. */
.glyph .win-logo {
  width: 19px;
  height: 19px;
}

/* Apple's logo, wherever the iPhone is meant, in the page's own text
   colour the way Apple draws it on a dark or a light ground. */
.glyph .apple-logo {
  width: 20px;
  height: 20px;
  color: var(--text);
}

/* ---------------- long-form text ---------------- */

/* Legal, privacy and terms are pages of prose rather than of controls,
   so they get a reading measure and ordinary spacing back. Everything
   else on the site keeps theme.css's tighter rhythm. */
.prose {
  max-width: 74ch;
}

.prose h2 {
  margin: 34px 0 12px;
  scroll-margin-top: calc(var(--top-h) + 16px);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 22px 0 6px;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 13px;
  color: var(--muted);
}

.prose li {
  margin-bottom: 7px;
}

.prose ul,
.prose ol {
  padding-left: 22px;
}

.prose strong {
  color: var(--text);
  font-weight: 700;
}

.prose a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
}

.prose a:hover {
  border-bottom-color: var(--accent-text);
}

.prose code,
code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* The list of what a page is made of, at the top of a long one. */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.toc a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}

.toc a:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
}

/* ---------------- the licence blocks ---------------- */

/* One per project we build on: what it is, who wrote it, its licence,
   and where its source is. The page is legally required, so it is built
   to be read rather than skimmed past. */
.credits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.credit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

.credit b {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text);
}

.credit .who {
  font-size: 13px;
  color: var(--muted);
}

.credit .lic {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  white-space: nowrap;
}

.credit .src {
  flex-basis: 100%;
  font-size: 12.5px;
}

.credit .src a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  word-break: break-all;
}

.credit .src a:hover {
  color: var(--text);
}

/* ---------------- pricing ---------------- */

/* The two plans side by side: Free and FLOW STATE (Basic, the middle
   one in the owner's drawing of 2026-09-11, was removed 2026-10-22). One
   column on a phone, two from 900px. The same grid holds the two short
   cards in the home page's pricing section, so the two pages line up. */
.plans {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 900px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The Yearly / Monthly switch, in the FLOW STATE card's top right
   corner. It is theme.css's .seg, the same control the desktop's Clock
   header uses, with aria-pressed on the chosen button; the page's script
   writes the choice on to .plans as data-period, which is what the
   prices follow. Here it is smaller, with slightly bigger words, and in
   the card's blue (--ac3) instead of the green. It is placed rather than
   flowed, so the card's name and price stay level with Free's. */
.plan.flow {
  position: relative;
}

.plan .seg {
  position: absolute;
  top: 24px;
  right: 22px;
  gap: 1px;
  padding: 2px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ac3) 8%, var(--surface-3));
  border-color: color-mix(in srgb, var(--ac3) 35%, transparent);
}

.plan .seg button {
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.3;
}

.plan .seg button:hover {
  color: var(--ac3);
}

.plan .seg button[aria-pressed="true"] {
  color: var(--on-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac3) 72%, #fff), var(--ac3));
  box-shadow: 0 4px 12px -6px var(--ac3);
}

/* The one line under the plans about what happens when a plan ends. It
   sits loose in the stack rather than in a card, so it needs the reading
   measure a card would have given it. */
.plans-note {
  max-width: 64ch;
}

/* One plan card. .flow is the owner's "glowing blue": --ac3, the sky
   end of the accent, on its own. That is the only place on the site
   --ac3 is used by itself; keep it to the FLOW STATE column and
   .btn-flow. Free is a plain .card. */
.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px;
}

.plan.flow {
  border-color: var(--ac3);
  background: color-mix(in srgb, var(--ac3) 7%, var(--surface));
  box-shadow:
    0 22px 54px -22px var(--ac3),
    0 0 0 1px color-mix(in srgb, var(--ac3) 35%, transparent),
    var(--shadow);
}

.plan.flow .ticks svg {
  stroke: var(--ac3);
}

/* The plan's name, as written: "Free", "FLOW STATE". Not
   .section-title, which would shout FREE. */
.plan-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plan.flow .plan-name {
  color: var(--ac3);
}

/* What a plan does, in one line under the price. */
.plan-sum {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* The bottom of a plan card: its button, or the "not open yet" note, and
   the line the page answers in. Pushed to the bottom so three cards in
   a row end level whatever is above. */
.plan-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* The button in the FLOW STATE column: the --ac3 gradient on the ordinary
   .btn. Nowhere else. */
.btn-flow {
  color: var(--on-ink);
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac3) 72%, #fff), var(--ac3));
  box-shadow: 0 12px 32px -10px var(--ac3), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.btn-flow:hover {
  border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ac3) 72%, #fff), var(--ac3));
  box-shadow: 0 18px 44px -10px var(--ac3), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.btn-flow:active {
  transform: scale(0.97);
}

/* A price: the big figure and what it means beside it. A paid plan holds
   two in a .prices stack, one data-when="yearly" and one
   data-when="monthly"; .plans' data-period says which is showing and
   CSS hides the other. With no data-period (scripts blocked) both show,
   the yearly one first and the monthly one small. The figures are
   written in the HTML and carry data-price so site.js can fill them
   from SITE.tiers in config.js when it runs. */
.prices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.price b {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price span {
  font-size: 14px;
  color: var(--muted);
}

.plans[data-period="yearly"] .price[data-when="monthly"],
.plans[data-period="monthly"] .price[data-when="yearly"] {
  display: none;
}

.plans:not([data-period]) .price[data-when="monthly"] b {
  font-size: 18px;
}

/* "/month" set right against the figure, as "$9.99/month". */
.price .per {
  margin-left: -8px;
  font-size: 16px;
}

/* The other way to pay, in small type under a price: "or $9.99 a
   month". The home page's short cards use it under the yearly figure. */
.price-alt {
  margin: 0;
  font-size: 13px;
  color: var(--faint);
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* The tick is placed rather than flexed. A flex row would make every
   run of text its own flex item, so a line with a <b> in it would come
   out with gaps around the bold part. */
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.ticks svg {
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ac2);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticks b {
  color: var(--text);
  font-weight: 700;
}

.ticks li.no svg {
  stroke: var(--faint);
}

.ticks li.no {
  color: var(--faint);
}

/* ---------------- the platform matrix ---------------- */

/* What each plan holds, by platform: three rows (browser, desktop, phone)
   against the two plans, in one .card. From 900px it is a grid — the
   row's label in a narrow first column, then a cell per plan under the
   plan names in .matrix-heads. Under that it is the three rows stacked,
   each listing the two plans one under another with the plan's name
   written above its list by .matrix-cell::before from data-plan. It
   never scrolls sideways. */
.matrix {
  display: flex;
  flex-direction: column;
}

.matrix-heads {
  display: none;
}

.matrix-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.matrix-row + .matrix-row {
  border-top: 1px solid var(--border);
}

.matrix-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.matrix-cell::before {
  content: attr(data-plan);
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
}

.matrix-cell.flow::before,
.matrix-head.flow {
  color: var(--ac3);
}

.matrix-cell.flow .ticks svg {
  stroke: var(--ac3);
}

@media (min-width: 900px) {
  .matrix {
    display: grid;
    grid-template-columns: 168px repeat(2, 1fr);
  }

  .matrix-heads,
  .matrix-row {
    display: contents;
  }

  .matrix-head {
    padding: 18px 18px 14px;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid var(--border);
  }

  .matrix-row + .matrix-row {
    border-top: 0;
  }

  .matrix-row:not(:last-child) .matrix-label,
  .matrix-row:not(:last-child) .matrix-cell {
    border-bottom: 1px solid var(--border);
  }

  .matrix-label {
    align-items: flex-start;
    padding: 18px;
    font-size: 14px;
  }

  .matrix-cell {
    padding: 18px;
  }

  .matrix-cell::before {
    display: none;
  }

  .matrix-cell.flow {
    background: color-mix(in srgb, var(--ac3) 5%, transparent);
  }
}

/* ---------------- steps ---------------- */

.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.steps li {
  position: relative;
  padding-left: 42px;
  min-height: 28px;
  color: var(--muted);
  font-size: 14.5px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-2);
  color: var(--on-ink);
  font-size: 13px;
  font-weight: 800;
}

.steps b {
  color: var(--text);
  font-weight: 700;
}

/* ---------------- forms ---------------- */

/* A thing to fill in, with its label above it. Deliberately NOT called
   .field or .row: theme.css already uses .field for the text box itself
   and .row for a switch row, so styling either here would reach into
   the two apps' shared components. */
.entry {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.entry label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.entry-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.entry-row .input {
  flex: 1 1 240px;
}

/* A key or an address the customer has to keep. Monospaced so a letter
   cannot be mistaken for a number, and selectable in one click. */
.keybox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}

.keybox span {
  flex: 1;
}

/* What a page says back: the answer to a sign-in, a registration, a
   payment. Quiet by default, coloured when it is good or bad news. */
.said {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.said:empty {
  display: none;
}

.said[data-tone="ok"] {
  color: var(--accent-text);
  font-weight: 650;
}

.said[data-tone="bad"] {
  color: var(--danger);
  font-weight: 650;
}

/* ---------------- the bar at the bottom ---------------- */

.foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.foot a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.foot a:hover {
  color: var(--text);
}

.foot .who {
  width: 100%;
  color: var(--faint);
  font-size: 12.5px;
}

/* Something left to fill in before the site goes live. Deliberately
   loud: a placeholder that looks like finished text is how a bracket
   ends up in front of a customer. Grep for "fill" before launching. */
.fill {
  background: color-mix(in srgb, var(--wait1) 22%, transparent);
  border: 1px dashed var(--wait1);
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--wait-text);
  font-weight: 700;
  font-size: 0.94em;
}

/* The same thing as a whole paragraph: a note to the owner that stands
   on its own line. The pricing page carried one while the accounts were
   being built; it came out when the apps started checking the plan. Same
   grep. */
p.fill {
  display: block;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
}

/* The support address sits in the copyright line, so a link there has to
   be as quiet as the text around it rather than as loud as a nav link. */
.foot .who a {
  color: inherit;
  font-size: inherit;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}

.foot .who a:hover {
  color: var(--text);
}

/* ---------------- the home page ---------------- */

/* The home page's head sits in the middle of the page rather than
   against the left edge, because the three columns under it do. Used
   with .head: <div class="head hero">. */
.head.hero {
  max-width: 64ch;
  margin: 0 auto 34px;
  text-align: center;
}

.head.hero h1 {
  font-size: clamp(32px, 6vw, 54px);
}

.head.hero .mark {
  margin-left: auto;
  margin-right: auto;
}

/* A link into the middle of a page (#pricing, #chrome, #desktop, #mobile)
   would land under the sticky bar unless the target leaves room for it. */
main [id] {
  scroll-margin-top: calc(var(--top-h) + 16px);
}

/* A plain text link inside a card — the "link line" under a column's
   pictures — coloured like the links on the prose pages. */
.card a.link {
  align-self: flex-start;
  color: var(--accent-text);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
}

.card a.link:hover {
  border-bottom-color: var(--accent-text);
}

/* ---------------- the three Get buttons ---------------- */

/* The home page's platforms, one .get each: the platform's icon with
   its button under it, and nothing else (2026-10-22, the owner's call).
   They sit in .tiles.three, so they stack on a phone. */
/* The three sit a little closer together than the page is wide. */
.gets {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

.get {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* The icon is the big thing here, standing on its own with no square
   behind it, and the button sits under it at its own width: tight
   padding, large words (2026-10-22, the owner's call). The square is
   kept as an empty box of one size so the three buttons stay level. */
.get .glyph {
  width: 124px;
  height: 124px;
  background: none;
  border: 0;
  border-radius: 0;
}

.get .glyph .chrome-logo {
  width: 120px;
  height: 120px;
}

.get .glyph .win-logo {
  width: 102px;
  height: 102px;
}

.get .glyph .apple-logo {
  width: 110px;
  height: 110px;
}

.get .btn {
  padding: 9px 18px;
  font-size: 17px;
  border-radius: 14px;
}

/* A softer glow than theme.css's --glow: tighter and fainter. */
.get .btn-primary {
  box-shadow: 0 6px 18px -8px rgba(184, 255, 60, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.get .btn-primary:hover {
  box-shadow: 0 8px 22px -8px rgba(184, 255, 60, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* The line under a button saying what is not out yet. */
.get .soon {
  margin: -6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* The one link under the home page's plans: "See everything each plan
   includes". Coloured like the link line in a column. */
.plans-more {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.plans-more a {
  color: var(--accent-text);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent);
}

.plans-more a:hover {
  border-bottom-color: var(--accent-text);
}

/* ---------------- logged in, top right ----------------

   "Log in / Sign up" logged out; a round profile button logged in,
   which pops out My account and Sign out (owner, 2026-10-23). Drawn by
   dressAccount in site.js. */

.nav a.nav-login {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-left: 6px;
}

.who-menu {
  position: relative;
  margin-left: 6px;
}

.who-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.who-btn:hover,
.who-btn[aria-expanded="true"] {
  border-color: var(--ac2);
}

.who-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.who-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
  padding: 8px;
  background: var(--bg2);
  box-shadow: var(--shadow);
}

.who-pop[hidden] {
  display: none;
}

.who-pop .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 640px) {
  .who-pop {
    right: auto;
    left: 0;
  }
}

/* The login card (signin.html): one narrow card in the middle, the
   heading inside it. */
.login-card {
  width: 100%;
  max-width: 440px;
  margin: 24px auto 0;
}

.login-title {
  margin: 0;
  font-size: 26px;
}

.login-card .hint .linky {
  font-size: inherit;
}

/* My account's facts (account.html): a label column and its answer. */
.facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.facts > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
}

.facts > div[hidden] {
  display: none;
}

.facts dt {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
}

.facts dd {
  margin: 0;
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}