@charset "UTF-8";
/* ==========================================================================
   TWSS_styles_002.css — www.toptronicwebsites.com  (part 2 of 3)
   Generated/Updated on: 2026-09-16T11:55:00+10:00
   Build Number: 002
   Version Number: (set manually by Jacques)

   © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this
   document may be reproduced, modified or stored in a retrieval system, or
   transmitted in any form or by any means, electronic, mechanical,
   photocopying, recording or otherwise, without the prior written permission of
   Toptronic Limited. For copyright inquiries: jacques@toptronic.com

   Continuation from TWSS_styles_001.css

   WHAT IS IT
     The building blocks ("components") that the eight pages assemble over and
     over: buttons, cards, the browser-frame tiles used as our portfolio, the
     numbered steps, the three price plans, the comparison table, the questions
     list, the contact form, the language demo and the moving band of domains.

   WHY COMPONENTS
     One block, styled once, used on every page — so the site cannot drift into
     eight slightly different versions of the same card, and a fix happens in
     one place.

   HOW IT WORKS
     Every block below is used by its class name only (for example class
     .card). Nothing here decides WHERE a block sits — that is file 003's job.

   THE TICK AND THE ARROW (why there is no ✓ character anywhere)
     Our two fonts contain no symbol glyphs, so a tick drawn with a text
     character would appear as an empty box on some computers. Instead every
     tick is a 10x5 box with a left border and a bottom border, rotated 45
     degrees — it looks identical in every language and every browser, and it
     costs nothing to download.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS AND LINKS THAT ACT LIKE BUTTONS
   Minimum height 48px: a finger on a phone needs a target of about that size.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 22px; border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 700 var(--fs-small) var(--font-display); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast),
              box-shadow var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -12px rgba(37, 71, 208, .75); }
.btn--primary:hover { background: var(--brand-ink); transform: translateY(-1px); }
.btn--primary:active { transform: none; }
.btn--ghost { color: inherit; border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.sec--ink .btn--ghost, .band .btn--ghost, .site-header .btn--ghost { border-color: rgba(244, 246, 250, .28); }
.sec--ink .btn--ghost:hover, .band .btn--ghost:hover, .site-header .btn--ghost:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
.btn--light { background: var(--paper-2); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --------------------------------------------------------------------------
   2. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sh-1);
}
.card--lift { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med), border-color var(--t-med); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.sec--ink .card { background: var(--ink-2); border-color: var(--line-dk); }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--r-2); display: grid; place-items: center;
  background: rgba(37, 71, 208, .09); border: 1px solid rgba(37, 71, 208, .18);
  margin-bottom: var(--sp-5);
}
.card__icon svg { width: 22px; height: 22px; stroke: var(--brand); fill: none; }
.sec--ink .card__icon { background: rgba(122, 150, 255, .10); border-color: rgba(122, 150, 255, .22); }
.sec--ink .card__icon svg { stroke: var(--brand-hi); }
.card__title { font: 700 1.0625rem/1.25 var(--font-display); letter-spacing: -.01em; margin-bottom: var(--sp-3); }
.card__text { font: 400 var(--fs-small)/1.65 var(--font-text); color: var(--muted); }
.sec--ink .card__text { color: var(--muted-dk); }
.card__list { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: 9px; }
.card__list li { position: relative; padding-inline-start: 24px; font-size: .875rem; line-height: 1.55; }
.card__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .42em;
  width: 10px; height: 5px; transform: rotate(-45deg);
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
}
.sec--ink .card__list li::before { border-color: var(--teal); }
.card__cta {
  display: inline-block; margin-top: var(--sp-5);
  font: 500 var(--fs-small) var(--font-text); color: var(--brand); text-decoration: none;
}
.card__cta::after {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-inline-start: 8px; transform: translateY(-2px) rotate(-45deg);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.card__cta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   3. THE BROWSER FRAME (our portfolio "screens")
   A grey bar with three neutral dots over a drawn tile. It is deliberately NOT
   a screenshot: a screenshot of a live site goes stale the day that site
   changes, and it weighs a megabyte. The tile is a gradient plus the site's
   initial letter — see TWSS_Decision_0093_Leader.md, ruling A3.
   -------------------------------------------------------------------------- */
.shot { display: flex; flex-direction: column; }
.shot__frame {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-3); overflow: hidden; box-shadow: var(--sh-2);
}
.sec--ink .shot__frame { border-color: var(--line-dk); background: var(--ink-2); }
.shot__bar {
  display: flex; gap: 7px; align-items: center; height: 34px; padding-inline: 14px;
  background: var(--tint); border-bottom: 1px solid var(--line);
}
.sec--ink .shot__bar { background: var(--ink-3); border-color: var(--line-dk); }
.shot__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(18, 22, 31, .22); }
.sec--ink .shot__dot { background: rgba(244, 246, 250, .22); }
.shot__bar > b {                     /* the address bar of the drawn browser */
  margin-inline: auto; font: 500 .75rem/1 var(--font-text); color: var(--muted);
  letter-spacing: 0; text-transform: none; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; max-width: 70%;
}
.sec--ink .shot__bar > b { color: var(--muted-dk); }
.shot__img {
  display: grid; place-items: center; position: relative;
  width: 100%; aspect-ratio: 16/10; overflow: hidden;
  background: var(--g, var(--grad-brand));
  transition: transform 600ms var(--ease);
}
.shot__img > b {
  font: 700 clamp(2.5rem, 7vw, 4rem)/1 var(--font-display);
  color: rgba(255, 255, 255, .30); letter-spacing: -.04em;
  text-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
/* A small "this is live" lamp in the corner of every portfolio tile. The copy
   promises live sites, so the tile says so without a word of language-dependent
   text (audit finding 3.5: the tiles read as placeholders). */
.shot__img::before {
  content: ""; position: absolute; inset-block-start: 14px; inset-inline-start: 14px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 4px rgba(53, 214, 190, .20);
}
.shot__img::after { content: ""; position: absolute; inset: 0; background: var(--bloom-a); opacity: .55; }
.shot__body { padding: 20px 22px 24px; }
.shot__title { font: 700 1.0625rem var(--font-display); }
.shot__text { font: var(--fs-small)/1.6 var(--font-text); color: var(--muted); margin-top: 6px; }
.sec--ink .shot__text { color: var(--muted-dk); }
.shot__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-4);
  font: 500 var(--fs-small) var(--font-text); color: var(--brand); text-decoration: none;
}
.sec--ink .shot__link { color: var(--brand-hi); }
.shot__link::after {
  content: ""; width: 7px; height: 7px; transform: translateY(-1px) rotate(-45deg);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.shot__link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) {
  .shot__frame:hover .shot__img { transform: scale(1.02); }
  .shot__frame:hover { box-shadow: var(--sh-3); }
}

/* --------------------------------------------------------------------------
   4. THE NUMBERED STEPS (how we work)
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; display: grid; gap: clamp(20px, 2.6vw, 30px); }
.step { position: relative; padding-inline-start: 72px; min-height: 44px; }
.step__num {
  position: absolute; inset-inline-start: 0; top: 0; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line-2);
  font: 700 var(--fs-small) var(--font-display); color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.sec--ink .step__num { background: var(--ink-3); border-color: var(--line-dk-2); color: var(--brand-hi); }
.step + .step::before {
  content: ""; position: absolute; inset-inline-start: 21.5px; top: -22px;
  height: 22px; width: 1px; background: var(--line-2);
}
.sec--ink .step + .step::before { background: var(--line-dk-2); }
.step__title { font: 700 1.0625rem var(--font-display); margin-bottom: 6px; }
.step__text { font: var(--fs-small)/1.65 var(--font-text); color: var(--muted); }
.sec--ink .step__text { color: var(--muted-dk); }
.step__out {
  display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--tint); font: 500 .8125rem var(--font-text); color: var(--muted);
}
.sec--ink .step__out { background: var(--ink-3); color: var(--muted-dk); }

/* --------------------------------------------------------------------------
   5. THE THREE PLANS
   The middle plan is raised and outlined in the brand colour, because it is
   the one most businesses choose. It is the ONLY place we use the glow.
   -------------------------------------------------------------------------- */
.plans { display: grid; gap: clamp(18px, 2.2vw, 24px); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-4); padding: clamp(24px, 3vw, 36px); box-shadow: var(--sh-1);
}
.sec--ink .plan { background: var(--ink-2); border-color: var(--line-dk); }
.plan--featured { background: var(--ink); color: var(--text-dk); border-color: rgba(122, 150, 255, .35); box-shadow: var(--glow-d); }
@media (min-width: 900px) { .plan--featured { transform: translateY(-8px); } }
.plan--featured .plan__fit, .plan--featured .plan__unit, .plan--featured .muted { color: var(--muted-dk); }
.plan--featured .plan__name { color: var(--text-dk); }
.plan--featured .card__list li::before { border-color: var(--teal); }
.plan__flag {
  position: absolute; inset-block-start: -13px; inset-inline-start: 26px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--signal); color: var(--ink);
  font: 700 var(--fs-micro) var(--font-display); letter-spacing: .12em; text-transform: uppercase;
}
.plan__flag:empty { display: none; }          /* our JSON can hold an empty flag */
.plan__name { font: 700 1.25rem var(--font-display); }
.plan__fit { font: .875rem/1.55 var(--font-text); color: var(--muted); margin-top: 6px; min-height: 2.6em; }
html[lang="de"] .plan__fit { min-height: 3.9em; }   /* German needs a third line */
.plan__price {
  font: 700 clamp(2.25rem, 4vw, 3.25rem)/1 var(--font-display); letter-spacing: -.02em;
  margin-top: var(--sp-5); font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.plan__unit { font: 500 .875rem var(--font-text); color: var(--muted); margin-inline-start: 8px; }
.plan__list { flex: 1 1 auto; list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); display: grid; gap: 10px; }
.plan__list li { position: relative; padding-inline-start: 24px; font-size: .875rem; line-height: 1.55; }
.plan__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .42em;
  width: 10px; height: 5px; transform: rotate(-45deg);
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
}
.plan--featured .plan__list li::before { border-color: var(--teal); }
.plan__cta { margin-top: auto; }
.plan__cta .btn { width: 100%; }

/* --------------------------------------------------------------------------
   6. THE COMPARISON TABLE
   On a phone a three-column table cannot work, so below 640px every row
   becomes a small stack of label/value pairs. The label is carried in the
   data-label attribute of each cell (translated, like everything else).
   -------------------------------------------------------------------------- */
/* table-layout:fixed is what keeps a table inside its column: without it the
   browser gives every column the width its LONGEST word needs, and four such
   columns push a 768px page sideways. Fixed layout shares the width equally and
   the text wraps (see overflow-wrap below). */
.table {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  font: 400 var(--fs-small)/1.5 var(--font-text);
}
.table th, .table td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.table thead th {
  text-align: center; padding: 14px 16px; border-bottom: 1px solid var(--line-2);
  background: var(--paper-2);
  font: 600 .8125rem var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.table thead th:first-child { text-align: start; width: 34%; }
.table tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top;
}
.table tbody td:first-child { text-align: start; font-weight: 500; color: var(--text); }
.table tbody tr:nth-child(even) { background: var(--tint); }
.table__yes { color: var(--ok); font-weight: 500; }
.table__yes::before {
  content: ""; display: inline-block; width: 10px; height: 5px; margin-inline-end: 8px;
  transform: rotate(-45deg); border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.table__no { color: var(--muted); }
.table__no::before {
  content: ""; display: inline-block; width: 10px; height: 2px; margin-inline-end: 10px;
  vertical-align: middle; background: currentColor;      /* a dash, not a cross */
}
.sec--ink .table thead th { background: var(--ink-2); color: var(--muted-dk); border-color: var(--line-dk); }
.sec--ink .table tbody td { border-color: var(--line-dk); }
.sec--ink .table tbody td:first-child { color: var(--text-dk); }
.sec--ink .table tbody tr:nth-child(even) { background: var(--ink-2); }
.sec--ink .table__yes { color: var(--teal); }
.sec--ink .table__no { color: var(--muted-dk); }
@media (max-width: 640px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .sec--ink .table tbody tr { border-color: var(--line-dk); }
  .table tbody td { border: 0; text-align: start; padding: 6px 0; }
  .table tbody td[data-label]::before {
    content: attr(data-label) ": "; font-weight: 600; color: var(--muted);
  }
}

/* --------------------------------------------------------------------------
   7. THE QUESTIONS (native <details> — it works with JavaScript switched off)
   -------------------------------------------------------------------------- */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  position: relative; cursor: pointer; list-style: none;
  padding: 20px 44px 20px 0; font: 500 1.0625rem/1.4 var(--font-text); color: var(--text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; position: absolute; inset-inline-end: 12px; top: 26px;
  width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.faq__item[open] .faq__q::after { transform: rotate(225deg); }
.faq__a { padding: 0 44px 22px 0; font: 400 1rem/1.7 var(--font-text); color: var(--muted); max-width: var(--measure); }
.faq__item[open] .faq__a { animation: twss-fade 180ms var(--ease) both; }
@keyframes twss-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   8. THE CONTACT FORM
   16px minimum on every input is deliberate: iOS Safari zooms the whole page
   when a focused field is smaller than that, and the visitor is thrown out of
   the layout.
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field__label { font: 500 .875rem var(--font-text); color: var(--text); }
.field__input, .field__select, .field__area {
  width: 100%; min-height: 48px; padding: 13px 15px;
  border: 1px solid var(--line-field); border-radius: var(--r-2);
  background: var(--paper-2); color: var(--text); font: 400 1rem/1.5 var(--font-text);
}
.field__area { min-height: 150px; resize: vertical; }
.field__input:focus, .field__select:focus, .field__area:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37, 71, 208, .15);
}
.field__input[aria-invalid="true"], .field__area[aria-invalid="true"] { border-color: var(--danger); }
.field__hint { font: .875rem/1.5 var(--font-text); color: var(--muted); }
.field__err { font: 500 .875rem var(--font-text); color: var(--danger); }
.form__note { font: .875rem/1.6 var(--font-text); color: var(--muted); }
.form__status {
  padding: 14px 16px; border-radius: var(--r-2); border: 1px solid transparent;
  font: 500 var(--fs-small) var(--font-text);
}
.form__status:empty { display: none; }
.form__status--ok { background: rgba(14, 124, 90, .09); border-color: var(--ok); color: var(--ok); }
.form__status--bad { background: rgba(196, 32, 38, .07); border-color: var(--danger); color: var(--danger); }
/* The consent line is a checkbox with its sentence beside it. The sentence is
   the .field__label, so nothing is invented to make the layout work. */
.form [type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); flex: 0 0 auto; }
.form .field__label:has([type="checkbox"]) { display: flex; align-items: flex-start; gap: 10px; }

/* --------------------------------------------------------------------------
   9. THE LANGUAGE DEMO (the same sentence in our eight languages)
   .demo__text reserves two lines of height so the widget does not jump when a
   longer language is shown next to a shorter one.
   -------------------------------------------------------------------------- */
.demo { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--paper-2); padding: clamp(18px, 2.4vw, 26px); }
.demo__row { display: grid; gap: 10px; padding-block: 14px; border-top: 1px solid var(--line); }
.demo__row:first-child { border-top: 0; }
@media (min-width: 700px) {
  .demo__row { grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; }
}
.demo__lang {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--tint);
  font: 600 var(--fs-eyebrow) var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.demo__text { font: 400 var(--fs-body)/1.6 var(--font-text); color: var(--text); min-height: 3.2em; text-align: start; }

/* --------------------------------------------------------------------------
   10. THE MOVING BAND OF DOMAINS
   The list is written twice in the HTML (the second copy hidden from screen
   readers) so the strip can slide by exactly 50% and start again without a
   visible jump. It pauses when a visitor points at it.
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: clamp(24px, 4vw, 56px); width: max-content; animation: twss-marquee 42s linear infinite; }
@keyframes twss-marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex; align-items: center; gap: 10px;
  font: 500 var(--fs-small) var(--font-text); color: var(--muted-dk); white-space: nowrap;
}
.marquee__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   11. THE FINAL CALL TO ACTION BAND
   The most intense moment on the page: darkest surface, the brand bloom
   behind it, and a rule above so it never merges with another dark section.
   -------------------------------------------------------------------------- */
.band {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--text-dk);
  border-top: 1px solid rgba(244, 246, 250, .10);
  padding-block: clamp(56px, 7vw, 96px);
}
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bloom-a); }
.band .wrap { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .band .wrap { grid-template-columns: 1fr auto; gap: var(--sp-8); } }
.band__title { font: 700 clamp(1.75rem, 3.4vw, 2.75rem)/1.12 var(--font-display); letter-spacing: -.02em; }
.band__text { font: 400 1rem/1.6 var(--font-text); color: var(--muted-dk); max-width: 60ch; margin-top: var(--sp-3); }
.band__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Content continues in TWSS_styles_003.css */