/* The advertising pages - products.html, free-games.html, boxes-organizer.html,
   online-calendar.html, small-business-accounting.html,
   remote-support-software.html, what-is-my-ip.html - and notify.html, which the list emails
   link to.

   One stylesheet for all of them, so they read as one set: somebody who
   lands on the calendar page from a search and clicks through to the games
   should feel they are still in the same place.

   Tokens only, never a colour. These pages are the first thing a stranger
   sees, and they have to look right in whichever of the eight themes that
   stranger's machine picks. */

.promo-page .Master > section.promo {
  padding: 0 16px 32px;
}

.promo {
  --promo-width: 68rem;
  --promo-text: 44rem;
}

.promo > * {
  max-width: var(--promo-width);
  margin-left: auto;
  margin-right: auto;
}

.promo p,
.promo li {
  line-height: 1.6;
  font-size: calc(1rem * var(--font-scale, 1));
}

/* ------------------------------------------------------------------ hero */

.promo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 32px 0 28px;
}

/* One column once the picture would be squeezed narrower than it reads.
   The words come first: they are what somebody came for. */
@media (max-width: 760px) {
  .promo-hero {
    grid-template-columns: 1fr;
    padding-top: 20px;
  }
}

.promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(0.8rem * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-hero h1 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(clamp(1.9rem, 4.2vw, 2.9rem) * var(--font-scale, 1));
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.promo-hero h1 em {
  color: var(--accent);
  font-style: normal;
}

.promo-lede {
  margin: 0 0 20px;
  max-width: var(--promo-text);
  color: var(--ink-muted);
  font-size: calc(1.14rem * var(--font-scale, 1)) !important;
}

.promo-hero__art {
  margin: 0;
}

.promo-hero__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--rule);
  box-shadow: 0 10px 30px var(--shadow);
}

/* The products that have no screenshot yet wear their icon, large, on a
   panel in the accent's soft tint. */
.promo-hero__badge {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 25%, var(--surface) 0 18%, transparent 60%),
    var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: clamp(4rem, 12vw, 7.5rem);
}

/* --------------------------------------------------------------- buttons */

.promo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
}

.promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(1.05rem * var(--font-scale, 1));
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

/* The display above would otherwise beat the hidden attribute, and
   notify.html hides its button until it knows what the button is for. */
.promo-btn[hidden] {
  display: none;
}

.promo-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
}

.promo-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.promo-btn--quiet {
  background: transparent;
  color: var(--accent);
}

.promo-btn--quiet:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.promo-btn--small {
  padding: 8px 16px;
  font-size: calc(0.95rem * var(--font-scale, 1));
}

.promo-fineprint {
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-size: calc(0.86rem * var(--font-scale, 1)) !important;
}

/* -------------------------------------------------------------- sections */

.promo-band {
  padding: 34px 0 6px;
  border-top: 1px solid var(--rule);
}

.promo-band h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(1.6rem * var(--font-scale, 1));
}

.promo-band > p {
  max-width: var(--promo-text);
  margin: 0 0 18px;
  color: var(--ink-muted);
}

/* Feature cards: an icon, a heading, a few lines. */
.promo-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 16px;
  margin: 18px 0 10px;
  padding: 0;
  list-style: none;
}

.promo-feature {
  padding: 18px 18px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.promo-feature i {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.2rem;
}

.promo-feature h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: calc(1.06rem * var(--font-scale, 1));
}

.promo-feature p {
  margin: 0;
  color: var(--ink-muted);
  font-size: calc(0.95rem * var(--font-scale, 1));
}

/* A plain two-column "free / with the upgrade" comparison. */
.promo-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 16px;
  margin: 18px 0 10px;
}

.promo-plan {
  padding: 20px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.promo-plan--up {
  border: 2px solid var(--accent);
}

.promo-plan h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: calc(1.2rem * var(--font-scale, 1));
}

.promo-plan__tag {
  margin: 0 0 12px;
  color: var(--accent);
  font-weight: 700;
}

.promo-plan ul {
  margin: 0 0 16px;
  padding-left: 1.2rem;
}

.promo-plan li {
  margin: 4px 0;
}

/* Questions and answers. <details>, so a page of them stays short and
   the answers are still in the page for a search engine to read. */
.promo-faq {
  max-width: var(--promo-text);
  margin: 12px 0 0;
}

.promo-faq details {
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.promo-faq summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  font-size: calc(1.02rem * var(--font-scale, 1));
}

.promo-faq details p {
  margin: 8px 0 0;
  color: var(--ink-muted);
}

/* The closing band - the BUY / start / join button at the bottom of every
   page, where somebody who has read this far is deciding. */
.promo-cta {
  margin-top: 34px;
  padding: 28px 24px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  text-align: center;
}

.promo-cta h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(1.6rem * var(--font-scale, 1));
}

.promo-cta > p {
  max-width: 38rem;
  margin: 0 auto 18px;
  color: var(--ink-muted);
}

.promo-cta .promo-actions {
  justify-content: center;
}

/* ------------------------------------------------------ Proud Canadian */

.promo-canada {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--accent);
}

.promo-canada svg {
  flex: none;
  width: 54px;
  height: 54px;
  color: var(--accent);
}

.promo-canada p {
  margin: 0;
}

.promo-canada strong {
  color: var(--ink);
}

/* --------------------------------------------------------- the games */

.promo-games {
  display: grid;
  gap: 22px;
  margin: 20px 0 0;
}

.promo-game {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  scroll-margin-top: 12px;
}

@media (max-width: 700px) {
  .promo-game {
    grid-template-columns: 1fr;
  }
}

.promo-game img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--rule);
}

.promo-game h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(1.35rem * var(--font-scale, 1));
}

.promo-game p {
  margin: 0 0 10px;
  color: var(--ink-muted);
}

.promo-game__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.promo-game__meta li {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: calc(0.82rem * var(--font-scale, 1));
  line-height: 1.6;
}

/* The jump list at the top of the games page. */
.promo-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.promo-jump a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  text-decoration: none;
  font-size: calc(0.9rem * var(--font-scale, 1));
}

.promo-jump a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------- the products hub */

.promo-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.promo-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.promo-product:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--shadow);
}

.promo-product i {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.4rem;
}

.promo-product h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: calc(1.2rem * var(--font-scale, 1));
}

.promo-product__status {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: calc(0.82rem * var(--font-scale, 1)) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.promo-product p {
  margin: 0 0 14px;
  color: var(--ink-muted);
}

.promo-product__go {
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
}

/* ------------------------------------------------ the email list form */

.notify-form {
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}

.notify-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notify-form input[type="email"] {
  flex: 1 1 16rem;
  width: auto;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 2px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-ink);
  font-size: calc(1.05rem * var(--font-scale, 1));
}

.notify-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--field-focus-bg);
}

.notify-form__agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: calc(0.92rem * var(--font-scale, 1));
  line-height: 1.5;
  cursor: pointer;
}

.notify-form__agree input {
  margin-top: 4px;
}

.notify-form__say {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-weight: 700;
}

.notify-form__say.is-good { color: var(--ok); }
.notify-form__say.is-bad  { color: var(--danger); }

/* The offer on the remote support page.
   Two classes deep so it beats `.promo-cta > p`, which would otherwise give
   the copy in the closing band muted ink on the accent - unreadable. */
.promo .promo-offer {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: calc(1.05rem * var(--font-scale, 1));
}

/* An offer filled in by a script (a sale read from the plans) stays hidden
   until there is one; the display above would otherwise show an empty
   box. */
.promo .promo-offer[hidden],
.promo-from[hidden] {
  display: none;
}

/* The sale star, before a sale price or a sale line (David, 2026-10-04).
   Yellow in every theme, on purpose -- a star is yellow, the way the
   jigsaw's gold is gold -- so it is the one colour here that is not a
   theme token. Its edge IS one: --warn, the theme's own amber, so the star
   still reads on a white card and does not glow on a dark one. */
.promo-star {
  --promo-star: #F5B700;
  color: var(--promo-star);
  -webkit-text-stroke: 1px var(--warn);
}

/* "Plans from $x a month", under the hero's words. */
.promo-from {
  margin: -4px 0 18px;
  color: var(--ink);
  font-weight: 700;
}

/* Numbered steps, each with a numbered circle. Drawn here rather than left
   to the list's own markers, which the site's base styles do not show on
   these pages; a circle is also easier to point at over the phone ("step
   two"). The list runs the column's width so it lines up with the title;
   each step keeps a reading width. Moved here from dlrc.css on 2026-10-04,
   when the IT landing page wanted the same steps. */
.promo-steps {
  max-width: var(--promo-width);
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}

.promo-steps li {
  counter-increment: step;
  position: relative;
  max-width: var(--promo-text);
  margin: 0 0 14px;
  padding-left: 2.6rem;
  min-height: 1.8rem;
}

.promo-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
}

/* ------------------------------------------------------------ footer */

.promo-footer {
  padding: 22px 16px 26px;
  text-align: center;
}

.promo-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 0 12px;
}

.promo-footer nav a {
  color: var(--ink);
  text-decoration: none;
}

.promo-footer nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.promo-footer p {
  margin: 4px 0;
  color: var(--ink-muted);
  font-size: calc(0.88rem * var(--font-scale, 1));
}

.promo-footer .phone {
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
}

/* --------------------------------------------------- what-is-my-ip.html */

/* The address box, where the other pages have their picture. */
.myip {
  padding: 24px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  text-align: center;
}

.promo .myip p {
  margin: 0;
}

.promo .myip__label {
  color: var(--ink-muted);
  font-weight: 700;
}

/* IPv6 is up to 39 characters, so it has to be allowed to break. */
.promo .myip__address {
  margin: 10px 0 4px;
  color: var(--ink);
  font-family: Consolas, 'Cascadia Mono', Menlo, monospace;
  font-size: calc(clamp(1.5rem, 5vw, 2.6rem) * var(--font-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  user-select: all;
}

.promo .myip__kind {
  min-height: 1.6em;
  margin-bottom: 14px;
  color: var(--ink-muted);
}

/* Shown only when the address is a private one, on your side of the router. */
.promo .myip__note {
  margin: -6px auto 14px;
  max-width: 34em;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  color: var(--ink);
}

.myip .promo-actions {
  justify-content: center;
}

/* In one column the address goes first: it is what everybody came for,
   the opposite of the other pages, where the words lead. */
@media (max-width: 760px) {
  .myip {
    order: -1;
  }
}

/* ------------------------------------------- admin-only pages, for now */

/* remote-support-software.html is behind the admin curtain while it waits
   to be announced. The permission tree in css/core/main.css shows an
   .is-admin element as inline-block, which would shrink the whole page to
   the width of its content - so this puts it back to a block. Three
   classes deep to outrank that rule's two. */
body.have-admin .promo-admin-only.is-admin,
body.have-superadmin .promo-admin-only.is-admin {
  display: block;
}

/* ...and the "Coming soon" that everybody else sees goes away for an
   admin, who is looking at the real page instead. Both classes named,
   because the tree gives a superadmin have-superadmin and not have-admin
   necessarily. */
body.have-admin .promo-soon,
body.have-superadmin .promo-soon {
  display: none;
}

.promo-admin-note {
  margin: 16px 0 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--ink);
  font-weight: 700;
}