/* ==========================================================================
   ActCAD — site design system
   "Canvas", Midnight palette. A saturated navy field carries the hero, CTA
   bands and mobile nav; the body is light, compact and built around the
   trial form. Single stylesheet, no framework.
   Breakpoints: 520 / 640 / 900 / 1040 / 1240
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Blueprint — the brand surface. Drawing-office blue: deeper and cooler
     than the old harbour navy, and dark enough that the instrument accent
     reads as its own colour rather than a lighter version of the band. */
  --field:     #0B2545;
  --field-2:   #16406E;   /* hover on field surfaces */
  --on-field:  #FFFFFF;   /* type that sits on the field */

  /* ACTION colour — Signal red. Buttons, and nothing else. Keeping red off
     everything that is not clickable is what makes the clickable things
     obvious. 5.03:1 with white type, so it clears AA on filled buttons. */
  --red:       #D22E33;
  --red-2:     #B62228;
  --red-soft:  #FBEBEC;
  --red-light: #FF6E72;   /* red tint for use on the field — 5.66:1 there */
  --on-red:    #FFFFFF;

  /* DATA colour — instrument cyan, the needle on a gauge. Everything that is
     a number or a mark rather than a thing to click: stat counters, prices,
     the savings figure, review scores, ticks and links. The split between
     this and red is the whole system; without it the page is one flat wash
     of red and nothing tells the reader what is worth clicking.
     4.95:1 on paper, 4.60:1 on paper-2, 5.32:1 with white type. */
  --data:      #0D7495;
  --data-2:    #5FD0EE;   /* the same idea, for use on the field — 8.60:1 */

  /* Spot — small accent marks (ticks, stars, feature icons). Data, not action. */
  --spot:      var(--data);

  /* Paper — cool off-white, the tone of drafting film rather than cartridge. */
  --paper:     #F4F7FB;
  --paper-2:   #E9EFF7;
  --paper-3:   #DCE6F2;

  /* Card tint — a shade bluer than paper-2, so the edition cards read as a
     deliberate surface rather than as slightly grubby paper. Standard and
     Map Drafter sit on this, either side of the Premium card on full field. */
  --paper-blue: #DFEBF4;

  /* Hairlines */
  --rule:      #DCE4EF;
  --rule-2:    #AFBECF;

  /* Type */
  --ink:       #08203E;
  --text:      #47566B;
  --text-3:    #627185;   /* 4.65:1 on paper — the old #8B8F9B failed AA */

  /* Actions */
  --accent:    #0D7495;
  --accent-2:  #0B617C;
  --on-accent: #F4F7FB;

  /* Semantic */
  --ok:        #167F5B;
  --err:       #C4362F;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-pill: 100px;

  --shadow:    0 16px 44px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-sm: 0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent);

  --container: 1240px;
  --gutter: 30px;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.62;
  color: var(--text); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, .disp {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.06; margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3rem); }
h3 { font-size: 1.28rem; letter-spacing: -.015em; }
h4 { font-size: 1.08rem; letter-spacing: -.01em; }

p { margin: 0 0 .95em; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--field); }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link {
  position: absolute; top: -60px; left: 12px; z-index: 300;
  background: var(--ink); color: var(--on-field); padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--on-field); }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 640px) { .wrap { padding-inline: 18px; } }

.tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

/* padding-block, NOT the padding shorthand. The shorthand also set
   padding-inline:0, and because this rule sits after .wrap it won that
   cascade — so every .wrap.sec on the site lost its gutter and ran flush to
   the viewport edge, clipping the first letter of every line. Invisible above
   1240px, where .wrap is narrower than the window anyway, and plainly broken
   on every screen below it. */
.sec { padding-block: clamp(56px, 4vw + 26px, 92px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.sec-head h2 { margin: 0; }
.sec-head .tag { color: var(--text-3); display: block; margin-bottom: 13px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.reveal.in { opacity: 1; transform: none; }
/* The product boxes fade in without travelling. They are the largest cards on
   the page, so 14px of vertical movement under a cursor that is already heading
   for a Buy button reads as the layout shifting rather than as an entrance.
   The fade stays, so the row still arrives with the rest of the page. */
.eds.reveal, .eds.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 1rem;
  padding: 15px 26px; border: 2px solid transparent; border-radius: var(--r-pill);
  white-space: nowrap; flex-shrink: 0;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-cta { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn-cta:hover { background: var(--red-2); border-color: var(--red-2); color: var(--on-red); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--on-field); }
.btn-ink:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-field); }
.btn-field { background: var(--field); border-color: var(--field); color: var(--on-field); }
.btn-field:hover { background: var(--field-2); border-color: var(--field-2); color: var(--on-field); }
.btn-out { background: transparent; border-color: var(--on-field); color: var(--on-field); }
.btn-out:hover { background: var(--on-field); color: var(--field); }
.btn-out-ink { background: transparent; border-color: var(--rule-2); color: var(--ink); }
.btn-out-ink:hover { background: var(--ink); color: var(--on-field); border-color: var(--ink); }
.btn-sm { padding: 11px 19px; font-size: .9rem; }
.btn-lg { padding: 17px 32px; font-size: 1.08rem; }
.btn-block { width: 100%; }
/* On a phone a 333px pill carrying 105px of label reads as an empty bar — 32%
   fill. Let the card CTAs size to their text with a comfortable tap area and
   sit centred instead. Form submits keep full width, where it is right. */
@media (max-width: 560px) {
  .ed .btn-block, .lic .btn-block {
    width: auto; align-self: center; min-width: 190px;
    padding-left: 32px; padding-right: 32px; font-size: 1.04rem;
  }
}

/* -------------------------------------------------------------------- nav */
.topnav {
  /* Floating: the bar travels with the reader instead of scrolling away. */
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 22px;
  padding: 18px var(--gutter);
  background: var(--field); color: var(--on-field);
  transition: padding .2s ease, box-shadow .2s ease, background .2s ease;
}
@media (prefers-reduced-motion: reduce) { .topnav { transition: none; } }
.topnav .brand { min-width: 0; }          /* brand may shrink … */
.topnav .acts { flex-shrink: 0; }         /* … the buttons may not */
/* On the homepage the nav floats over the hero field instead of sitting on its
   own bar. It is fixed rather than sticky because .field sets overflow:hidden,
   and an overflow ancestor silently disables position:sticky. */
.topnav.on-field { position: fixed; top: 0; left: 0; right: 0; background: transparent; }

/* Once the page has moved, the bar goes solid. On the homepage this is not
   decoration: without it, white nav type would be sitting on light paper with
   nothing behind it the moment the hero scrolls past. */
.topnav.is-stuck {
  background: var(--field);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 20%, transparent);
  padding-top: 13px; padding-bottom: 13px;
}

/* Bright edge along the bottom of the bar, in the instrument cyan. It only
   appears once the page has moved off the top: at rest the nav is part of the
   hero and a line under it would just cut the hero in half. It wipes in from
   the left rather than fading, so it reads as a response to the scroll. */
.topnav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--data-2);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.topnav.is-stuck::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .topnav::after { transition: none; }
}
@media (max-width: 640px) { .topnav { padding: 14px 18px; } }

.topnav .brand { display: flex; align-items: center; gap: 12px; color: var(--on-field); }
/* The logo mark is dark navy, so on the field it sits on a light tile rather
   than being recoloured — the brand colours stay exact and it reads larger. */
.brand-tile {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--paper); border-radius: 13px;
  box-shadow: var(--shadow-sm);
}
.brand-tile img { width: 38px; height: 38px; }
.topnav .brand b {
  font-family: 'Sora', sans-serif; font-size: 1.5rem;
  letter-spacing: -.008em; line-height: 1;
}
@media (max-width: 640px) {
  .brand-tile { width: 44px; height: 44px; border-radius: 11px; }
  .brand-tile img { width: 32px; height: 32px; }
  .topnav .brand b { font-size: 1.28rem; }
}
.topnav nav { margin-left: 26px; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-list a, .nav-top {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border: 0; background: none; border-radius: var(--r-sm);
  color: var(--on-field); font-family: inherit; font-size: .98rem; font-weight: 500;
  opacity: .85; cursor: pointer;
}
.nav-list a:hover, .nav-top:hover,
.nav-list a.is-active, .nav-list li.is-here > .nav-top { opacity: 1; color: var(--on-field); }
.nav-list a.is-active, .nav-list li.is-here > .nav-top { box-shadow: inset 0 -2px 0 var(--red); }
.nav-top .caret { width: 15px; height: 15px; transition: transform .16s ease; }
.nav-list li.open > .nav-top .caret { transform: rotate(180deg); }
.nav-list li.open > .nav-top { opacity: 1; }

/* Dropdown. Held open by :hover and by .open, so pointer and keyboard both work. */
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
  min-width: 310px; padding-top: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-list li:hover > .nav-menu,
.nav-list li.open > .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu-in {
  background: var(--paper); border-radius: var(--r); padding: 8px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 26%, transparent);
  display: flex; flex-direction: column; gap: 2px;
}
.nav-menu-in a {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  color: var(--ink); opacity: 1; font-weight: 600; font-size: .96rem;
  border-left: 3px solid transparent;
}
.nav-menu-in a:hover { background: var(--paper-2); border-left-color: var(--red); color: var(--ink); }
.nav-menu-in small { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--text-3); }

.btn-ghost {
  background: transparent; border-color: color-mix(in srgb, var(--on-field) 32%, transparent);
  color: var(--on-field);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--on-field) 14%, transparent); color: var(--on-field); }
.topnav .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 1040px) { .topnav nav { display: none; } .js-navtoggle { display: inline-grid !important; } }

/* On phones the brand, two buttons and the burger cannot all fit. Buy now
   drops to the menu panel; the trial CTA stays, because it is the goal. */
@media (max-width: 900px) {
  .topnav { gap: 12px; }
  .topnav .acts { gap: 10px; }
  .topnav .acts .btn-out { display: none; }
}
@media (max-width: 560px) {
  .topnav { padding: 12px 16px; gap: 10px; }
  .topnav .brand b { font-size: 1.12rem; }
  .topnav .acts .btn-sm { padding: 10px 15px; font-size: .86rem; }
  .js-navtoggle { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  .topnav .brand b { display: none; }     /* mark only, so the CTA survives */
}

.js-navtoggle {
  display: none; place-items: center; width: 40px; height: 40px;
  background: transparent; border: 2px solid var(--on-field); color: var(--on-field); border-radius: 50%;
}
.js-navtoggle svg { width: 17px; height: 17px; }
.js-navpanel { position: fixed; inset: 0; z-index: 60; background: var(--field); padding: 84px var(--gutter); display: none; overflow-y: auto; }
.js-navpanel.open { display: block; }
/* Keep the floating dock out of the drawer: it outranks the panel (z 160
   vs 60) and the panel cannot simply be raised, since it has to stay
   under the topnav that holds its close button. */
body:has(.js-navpanel.open) .dock { display: none; }
/* 1.8rem against the 1.15rem sub-items was a 28.8px/18.4px jump on a phone —
   the top-level items read as headings rather than as the same list. */
.js-navpanel a {
  display: block; padding: 12px 0; color: var(--on-field);
  font-family: 'Sora', sans-serif; font-size: 1.22rem; letter-spacing: -.015em;
  border-bottom: 1px solid color-mix(in srgb, var(--on-field) 20%, transparent);
}
/* The topnav sits above the drawer (z 120 vs 60) and keeps its own ACTCAD mark
   visible, so this second one just stacked a duplicate wordmark 70px below the
   first. Kept in the markup for the no-CSS case; hidden wherever the drawer is
   actually used. */
.js-navpanel .panel-brand { display: none; }
.js-navpanel .panel-brand b { font-family: 'Sora', sans-serif; font-size: 1.6rem; letter-spacing: -.008em; }
.js-navpanel .panel-group { border-bottom: 1px solid color-mix(in srgb, var(--on-field) 20%, transparent); padding-bottom: 10px; }
.js-navpanel .panel-group-label {
  display: block; padding: 13px 0 4px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--on-field) 55%, transparent);
}
.js-navpanel .panel-sub {
  font-size: 1.04rem; padding: 8px 0 8px 16px; border-bottom: 0;
  color: color-mix(in srgb, var(--on-field) 88%, transparent);
}
.js-navpanel .panel-cta { display: grid; gap: 12px; margin-top: 28px; }
.js-navpanel .panel-cta .btn { width: 100%; }
.js-navpanel .panel-cta a { border: 0; font-family: 'Inter', sans-serif; font-size: .93rem; }

/* ------------------------------------------------------------- hero field */
.field {
  position: relative; background: var(--field); color: var(--on-field);
  padding: 96px 0 68px; overflow: hidden;
}
.field-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 26px; align-items: center; }
@media (max-width: 900px) { .field-grid { grid-template-columns: 1fr; gap: 10px; } }
.field h1 { color: var(--on-field); margin-bottom: 16px; }
.field .lede { font-size: 1.18rem; max-width: 46ch; color: var(--on-field); opacity: .88; margin-bottom: 24px; }
.field .tag { color: var(--on-field); opacity: .72; margin-bottom: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips { gap: 10px; }
.chips li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--on-field) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-field) 16%, transparent);
  font-size: .96rem; font-weight: 600;
}
.chips svg { width: 19px; height: 19px; }
/* Ticks are marks, not actions — same instrument cyan as every other tick,
   price and figure on the page. */
.field .chips svg { color: var(--data-2); }

/* Equal-size variant. The default .chips is a wrap-flow of content-width
   pills, which reads fine at three or four items; at six it comes out ragged,
   with a long box beside a short one and an uneven second row. A grid with
   1fr columns and 1fr rows makes every box identical in both directions.

   A modifier rather than a change to .chips, because features.php,
   licensing.php, trial.php, tutorials.php, the product pages and index-v1.php
   all use the default flow and have different item counts. */
.chips-even {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.chips-even li {
  /* Left-aligned, so the ticks form one vertical line down each column and the
     labels start from a common edge — centring made every row ragged because
     the labels differ in length. */
  display: flex; justify-content: flex-start; text-align: left;
  white-space: nowrap;          /* one line per box, never two */
  padding: 8px 12px; gap: 7px; font-size: .86rem;
}
.chips-even svg { width: 16px; height: 16px; }

/* Column counts are 3, 2 or 1 only — the divisors of six. Four columns would
   fit at some widths but would leave two empty cells on the second row.

   The widest label, "Perpetual licence", needs about 169px at this size
   including the tick and padding; below that nowrap would overflow. The
   breakpoints are where the column falls under that, measured against the
   hero grid rather than picked by eye:
     1181px+  hero is two columns, left column ~558px -> 3 fit at ~181px
     901-1180 left column narrows to ~416px          -> 2
     <=900    hero stacks, chips get the full width  -> 3 again
     <=560    -> 2,  <=430 -> 1 */
@media (max-width: 1180px) and (min-width: 901px) {
  .chips-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .chips-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips-even li { padding: 7px 10px; font-size: .8rem; gap: 6px; }
  .chips-even svg { width: 15px; height: 15px; }
}
@media (max-width: 430px) {
  .chips-even { grid-template-columns: 1fr; }
}

/* Hero media — the product video, framed like an application window so it
   reads as "the software", not as a marketing box shot. */
.field-media { position: relative; }
.media-frame {
  position: relative; aspect-ratio: 16 / 10;
  border-radius: var(--r); overflow: hidden;
  background: var(--ink);
  box-shadow: 0 22px 60px color-mix(in srgb, #000 42%, transparent);
  outline: 1px solid color-mix(in srgb, var(--on-field) 18%, transparent);
}
.media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* A slight bloom around the hero video, in the instrument cyan, so the frame
   reads as a lit screen against the deep field rather than a flat rectangle.
   The existing black drop shadow is kept underneath it — that is what grounds
   the frame; the cyan layers only add light.

   Scoped to .field on purpose: tutorials.php uses the same component on light
   paper, where a coloured halo would read as a printing fault. */
.field .media-frame {
  box-shadow:
    0 22px 60px color-mix(in srgb, #000 38%, transparent),
    0 0 0 4px   color-mix(in srgb, var(--data-2) 16%, transparent),
    0 0 26px    color-mix(in srgb, var(--data-2) 46%, transparent),
    0 0 64px    color-mix(in srgb, var(--data-2) 30%, transparent),
    0 0 140px   color-mix(in srgb, var(--data-2) 18%, transparent);
  outline-color: color-mix(in srgb, var(--data-2) 62%, transparent);
  transition: box-shadow .32s ease, outline-color .32s ease;
}
/* The whole frame is a play button, so it lifts further under the pointer. */
.field .media-frame:hover {
  box-shadow:
    0 22px 60px color-mix(in srgb, #000 38%, transparent),
    0 0 0 6px   color-mix(in srgb, var(--data-2) 22%, transparent),
    0 0 34px    color-mix(in srgb, var(--data-2) 62%, transparent),
    0 0 84px    color-mix(in srgb, var(--data-2) 42%, transparent),
    0 0 180px   color-mix(in srgb, var(--data-2) 24%, transparent);
  outline-color: color-mix(in srgb, var(--data-2) 85%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .field .media-frame { transition: none; }
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* The start banner is the hero's resting state, so it is composed rather
   than a play glyph dropped on a still: rule-and-label eyebrow at the top,
   the action in the middle, the promise along the bottom. The whole frame
   is the button — a large target converts better than a 74px circle.
   The poster sits above the empty <video> so no browser can flash a black
   box before the file exists. */
.media-poster { position: absolute; inset: 0; z-index: 2; display: block; }
.media-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-banner {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; padding: 20px 22px; border: 0;
  cursor: pointer; background: transparent; color: var(--on-field);
  font: inherit; text-align: left;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: start;
}
.video-banner::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top,
      color-mix(in srgb, var(--ink) 84%, transparent) 0%,
      color-mix(in srgb, var(--ink) 30%, transparent) 52%,
      color-mix(in srgb, var(--ink) 14%, transparent) 100%);
  transition: background .25s ease;
}
.video-banner:hover::after {
  background: linear-gradient(to top,
      color-mix(in srgb, var(--ink) 72%, transparent) 0%,
      color-mix(in srgb, var(--ink) 20%, transparent) 52%,
      color-mix(in srgb, var(--ink) 6%, transparent) 100%);
}
.video-banner > * { position: relative; z-index: 1; }
.video-banner:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

.vb-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
}
.vb-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--red); }

.vb-play {
  justify-self: center; align-self: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--red); color: var(--on-red);
  display: grid; place-items: center;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--red) 50%, transparent);
  transition: transform .18s ease;
}
.video-banner:hover .vb-play { transform: scale(1.08); }
.vb-play svg { width: 30px; height: 30px; margin-left: 4px; }

.vb-foot { display: grid; gap: 2px; }
.vb-foot b { font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; }
.vb-foot i { font-style: normal; font-size: .86rem; opacity: .8; font-variant-numeric: tabular-nums; }

/* Bare variant — the homepage hero. No eyebrow, no strapline, no caption:
   just the poster and the play button, so the frame reads as a screen rather
   than a promo card. A modifier rather than a change to .video-banner itself,
   because tutorials.php still uses the captioned version.

   The scrim changes with it. The default is a bottom-up gradient sized to
   keep the strapline legible; with no text to protect that only muddies the
   poster, so this is a light even wash that lifts on hover. */
/* Flex, not grid: .video-banner declares grid-template-rows: auto 1fr auto
   for the eyebrow / play / strapline stack, and a lone child would land in
   the top `auto` row — centred within that strip, but nowhere near the
   middle of the frame. Switching the display mode drops that template
   entirely, so the button centres against the poster itself. */
.video-banner.is-bare {
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
/* The 4px nudge on the shared icon optically centres a triangle inside the
   circle; the bare hero asks for no offsets, so it is zeroed here only. */
.video-banner.is-bare .vb-play svg { margin-left: 0; }
.video-banner.is-bare::after {
  background: color-mix(in srgb, var(--ink) 24%, transparent);
}
.video-banner.is-bare:hover::after {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Fetching the file after the click. The circle breathes so the wait reads
   as progress rather than as a dead button. */
.media-frame.is-loading .video-banner { cursor: progress; }
.media-frame.is-loading .vb-play { animation: vb-breathe 1.1s ease-in-out infinite; }
@keyframes vb-breathe { 50% { transform: scale(.9); opacity: .72; } }

/* Once it is playing the banner gets out of the way entirely. */
.media-frame.is-playing .video-banner,
.media-frame.is-playing .media-poster { display: none; }

@media (prefers-reduced-motion: reduce) {
  .media-frame.is-loading .vb-play { animation: none; }
  .video-banner:hover .vb-play { transform: none; }
}
@media (max-width: 560px) {
  .video-banner { padding: 14px 16px; }
  .vb-play { width: 62px; height: 62px; }
  .vb-play svg { width: 24px; height: 24px; }
  .vb-foot b { font-size: 1rem; }
}
.media-cap {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 0; font-size: .92rem; color: var(--on-field); opacity: .75;
}

/* System requirements, under the hero video. Label on its own line, the four
   items flowing on the next as bullets — they wrap to two lines on a phone
   rather than being squeezed. */
.sysreq {
  margin-top: 26px; padding-top: 22px; text-align: center;
  /* A hairline separates it from the video without drawing a hard box: the
     requirements are a footnote to the frame above, not a new section. */
  border-top: 1px solid color-mix(in srgb, var(--on-field) 14%, transparent);
}
.sysreq-t {
  display: block; margin-bottom: 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-field); opacity: .72;
}
.sysreq ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  margin: 0; padding: 0; list-style: none;
}
.sysreq li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .93rem; font-weight: 500;
  color: var(--on-field);
}
/* Drawn rather than a list-marker, so it can take the instrument colour and
   sit on the text baseline in a flex row. */
.sysreq li::before {
  content: ''; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--data-2);
}
@media (max-width: 560px) {
  .sysreq { margin-top: 20px; padding-top: 18px; }
  .sysreq ul { gap: 7px 16px; }
  .sysreq li { font-size: .85rem; }
}
.media-cap svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .field-media { margin-top: 22px; } }

/* Slim variant for inner pages. */
.field-slim { padding: 44px 0 48px; }
.field-slim h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin-bottom: 12px; }
.field-slim .lede { margin-bottom: 0; }

/* -------------------------------------------------- capture form, in-fold */
.capture { position: relative; z-index: 6; margin-top: 34px; margin-bottom: -68px; }
.capture-card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px 30px 28px; }
.capture-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.capture-proof {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: .92rem; color: var(--text); font-weight: 600;
}
.capture-proof svg { width: 19px; height: 19px; color: var(--ok); }   /* affirmative marks, not actions */
@media (max-width: 700px) { .capture-proof { margin-left: 0; } }
.capture-top b { font-family: 'Sora', sans-serif; font-size: 1.35rem; color: var(--ink); letter-spacing: -.015em; }
.capture-top .tag { color: var(--text-3); }
.capture-note { margin-top: 14px; font-size: .86rem; color: var(--text-3); }
.capture-note a { text-decoration: underline; }

.c-form { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 940px) { .c-form { grid-template-columns: 1fr 1fr; } .c-form > button { grid-column: 1 / -1; } }
@media (max-width: 520px) { .c-form { grid-template-columns: 1fr; } }
.c-form-2 { grid-template-columns: 1fr 1fr; }
.c-form-2 > button { grid-column: 1 / -1; }

.c-field label {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
}
.c-field input, .c-field select, .c-field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--paper-2); border: 2px solid transparent; border-radius: var(--r-sm);
  font-size: 1rem; color: var(--ink);
}
.c-field input:focus, .c-field select:focus, .c-field textarea:focus { outline: 0; border-color: var(--ink); background: var(--paper); }
.c-field.is-bad input, .c-field.is-bad select, .c-field.is-bad textarea { border-color: var(--err); }
.c-field .err { display: none; margin-top: 5px; font-size: .75rem; color: var(--err); }
.c-field.is-bad .err { display: block; }
.c-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.c-field textarea { min-height: 110px; resize: vertical; }

.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* Edition radios on the trial form. A fieldset carries browser default border,
   padding and min-width that have to be cleared before it lines up with the
   text inputs around it. */
.c-radios { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.c-radios legend {
  padding: 0; margin-bottom: 7px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
/* .c-radio is itself a <label>, so `.c-field label` (0,1,1) outranks a bare
   .c-radio (0,1,0) and was turning each option into an uppercase micro-caps
   block. Scoped through .c-radios to win, and everything that rule sets has to
   be undone explicitly rather than just overridden in part. */
.c-radios .c-radio {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 18px 0 0; cursor: pointer;
  font-size: .95rem; font-weight: 500; letter-spacing: normal;
  text-transform: none; color: var(--text);
}
.c-radios .c-radio:last-of-type { margin-right: 0; }
.c-radios .c-radio input {
  accent-color: var(--data); width: 17px; height: 17px; margin: 0; flex-shrink: 0;
}

.form-done { display: none; text-align: center; padding: 10px 0; }
.form-done.on { display: block; }
/* Green, not action-red: this disc appears only once the lead is saved, and
   a red badge on a success message reads as an error at a glance. White on
   --ok is 4.98:1, matching the 5.03:1 it replaces. */
.form-done .ok { width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.form-done .ok svg { width: 20px; height: 20px; }
.form-done h3 { margin-bottom: 4px; }
/* The installer button the handler adds once the lead is saved. */
/* The installer leads the panel now, so its spacing sits below it, not above. */
.done-dl { margin: 0 0 4px; }
/* It is the fastest route to the product, so it reads as the primary
   action rather than as a footnote under the confirmation text. */
.done-dl { box-shadow: 0 10px 26px color-mix(in srgb, var(--ok) 34%, transparent); }
.done-dl-note { display: block; margin: 0 0 14px; font-size: .78rem; color: var(--text-3); }
/* Once the installer button is there it carries the success on its own, so the
   tick disc would only repeat it. */
.form-done.has-dl .ok { display: none; }

/* Success-green button. Only used where the action itself is the confirmation
   — red stays for ordinary calls to action. White on --ok is 4.98:1. */
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #11694A; border-color: #11694A; color: #fff; }
.is-busy { opacity: .6; pointer-events: none; }
.form-error {
  display: none; margin: 12px 0 0; padding: 10px 13px;
  background: var(--red-soft); border-left: 3px solid var(--red);
  border-radius: var(--r-sm); color: var(--red-2); font-size: .85rem;
}

/* -------------------------------------------------------------- proof bar
   The counters sit on their own navy card floating on the paper, so the
   numerals are white-on-navy and carry the most contrast on the page.
   -------------------------------------------------------------------------- */
.proofbar { padding: 92px 0 0; }
/* 92px above exists to clear the capture card, which overhangs the hero by
   68px. index-v1.php still has that card; the live homepage no longer does.
   There the bar now sits between two .sec blocks: the one above already ends
   with a full section's padding, and the one below opens with padding-top:0,
   so the top is dropped entirely and the bottom takes over the gap — matching
   .sec exactly so the vertical rhythm does not break at this one seam. */
.proofbar-tight { padding-top: 0; padding-bottom: clamp(56px, 4vw + 26px, 92px); }
/* Heading, matching "Trust & Reviews" and "Why Choose ACTCAD?" rather than
   the grey micro-label this section used to carry. */
.proofbar-h {
  margin: 0 0 22px; text-align: center;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  letter-spacing: -.018em; color: var(--ink);
}

/* A contained panel, not a full-bleed band. It used to span 100vw, which made
   it the only element on the page ignoring the container and gave the middle
   of the page a second hero. Boxed and capped well inside the 1240px
   container, it reads as a deliberate object. */
.proofbar-in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--field); color: var(--on-field);
  max-width: 1000px; margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--field) 26%, transparent);
}
@media (max-width: 1000px) { .proofbar-in { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; } }
@media (max-width: 520px)  { .proofbar-in { grid-template-columns: 1fr; max-width: 340px; } }

.pb {
  position: relative;
  padding: 32px 18px 28px; text-align: center;
  border-right: 1px solid color-mix(in srgb, var(--on-field) 15%, transparent);
}
.pb:last-child { border-right: 0; }
@media (max-width: 1000px) {
  .pb:nth-child(2n) { border-right: 0; }
  .pb:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--on-field) 15%, transparent); }
}
@media (max-width: 520px) {
  .pb { padding: 24px 20px 22px; border-right: 0; }
  .pb + .pb { border-top: 1px solid color-mix(in srgb, var(--on-field) 15%, transparent); }
}

.pb b {
  display: block;
  font-family: 'Sora', sans-serif; font-weight: 700;
  /* Sized to "100,000+" — the widest figure — inside a 250px column, not to
     the full viewport as before. */
  font-size: clamp(1.75rem, 1.05rem + 1.9vw, 2.8rem);
  color: var(--data-2); line-height: .95; letter-spacing: -.04em;
  white-space: nowrap;
}

.pb > span {
  display: block; margin-top: 12px;
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--on-field) 80%, transparent);
}
.pb b span { font: inherit; letter-spacing: inherit; color: inherit; }

/* ----------------------------------------------------------- feature grid */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 940px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
.fcard { background: var(--paper-2); border-radius: var(--r); padding: 28px 26px 30px; transition: background .16s ease, color .16s ease; }
.fcard:hover { background: var(--field); color: var(--on-field); }
.fcard:hover h3, .fcard:hover .fico { color: var(--on-field); }
.fico { color: var(--spot); margin-bottom: 12px; }
.fico svg { width: 34px; height: 34px; stroke-width: 1.5; }
.fcard h3 { margin-bottom: 6px; }
.fcard p { font-size: .96rem; margin: 0; }

/* --------------------------------------------------------------- editions */
/* ---- licence types ----------------------------------------------------
   Same four-across grid as the industry cards, and the same 4 / 2 / 1 column
   counts so neither section is ever left with an orphan. Lighter treatment
   than the industry cards: an outline rather than a fill, so two card grids
   in a row do not read as one striped block. */
.lics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .lics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .lics { grid-template-columns: 1fr; } }

.lic {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 22px 20px 20px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lic:hover {
  border-color: color-mix(in srgb, var(--data) 40%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 9%, transparent);
}
.lic-ico {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; margin-bottom: 13px;
  background: color-mix(in srgb, var(--data) 12%, transparent);
  color: var(--data);
}
.lic-ico svg { width: 19px; height: 19px; }
.lic h3 { font-size: 1.02rem; margin: 0 0 9px; }
.lic-lede { font-size: .87rem; line-height: 1.5; margin: 0 0 14px; }

/* Bottom-pinned so the rules sit level across the four cards whatever length
   the description above runs to. Bottom-pinning alone is not enough: a "For"
   value that fits one line where its neighbours wrap to two makes its block
   shorter and drops its rule by a line, so the value reserves two lines. */
.lic-who {
  margin: auto 0 0; padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-size: .81rem; line-height: 1.45; color: var(--text-3);
}
.lic-who i {
  display: block; font-style: normal;
  line-height: 1.45; min-height: calc(2 * 1.45em);   /* two lines, always */
}
.lic-who span {
  display: block; margin-bottom: 3px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--data);
}

/* ---- industry toolsets ------------------------------------------------
   Four equal cards. Column counts stay at 4, 2 or 1 — the divisors of four —
   so a row is never left with an orphan. */
.inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .inds { grid-template-columns: 1fr; } }

.ind {
  background: var(--paper-2); border-radius: var(--r);
  padding: 24px 22px 22px;
  border: 1px solid transparent;
  transition: border-color .16s ease, background .16s ease;
}
.ind:hover { background: var(--paper); border-color: color-mix(in srgb, var(--data) 30%, transparent); }
.ind-ico {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--data) 12%, transparent);
  color: var(--data);
}
.ind-ico svg { width: 21px; height: 21px; }
.ind h3 { font-size: 1.06rem; margin: 0 0 14px; }
.ind ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ind li { display: flex; gap: 9px; align-items: flex-start; font-size: .87rem; line-height: 1.45; }
.ind li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--data); }

/* ---- edition cards ----------------------------------------------------
   Every card is the same stack of bands — shot, tag, name, price, blurb,
   features, actions — so the three read straight across rather than as three
   independent columns. The blurb is the only variable-length part, so it gets
   a minimum height; without it a two-line blurb on one card would push its
   feature list out of step with the others. */
.eds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .eds { grid-template-columns: 1fr; gap: 16px; max-width: 420px; margin-inline: auto; } }

.ed {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-blue); border: 1px solid transparent;
  border-radius: var(--r-lg); padding: 26px 24px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* No vertical lift on hover: the cards sit in a row of equal-height columns,
   and one of them shifting up read as the page moving rather than as a
   hover cue. The border and shadow still respond, so the card is clearly
   interactive without anything changing position. */
.ed:hover {
  border-color: color-mix(in srgb, var(--data) 34%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* The chosen edition is lifted, not just recoloured. */
.ed-best {
  background: var(--field); color: var(--on-field); border-color: var(--field);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--field) 30%, transparent);
}
.ed-best:hover { border-color: var(--data-2); box-shadow: 0 22px 52px color-mix(in srgb, var(--field) 38%, transparent); }

/* Absolute, so it cannot push this card's rows out of step with the others. */
.ed-flag {
  position: absolute; top: 14px; right: 14px;
  background: var(--data-2); color: var(--field);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}

/* The source PNGs are 235x318 of solid artwork — the transparent padding they
   used to carry was cropped away, so this height is all box and none of it is
   upscaled (rendered ~111px wide against a 235px original). */
.ed-shot { height: 182px; width: auto; max-width: 100%; object-fit: contain; margin: 0 0 18px; }
@media (max-width: 900px) { .ed-shot { height: 158px; } }
.ed .tag { color: var(--text-3); }
.ed-best .tag { color: color-mix(in srgb, var(--on-field) 72%, transparent); }
.ed h3 { margin: 5px 0 0; }
.ed-best h3 { color: var(--on-field); }

.ed-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; }
.ed-price b {
  font-family: 'Sora', sans-serif; font-size: 2.15rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; color: var(--data);
}
.ed-price i { font-style: normal; font-size: .8rem; color: var(--text-3); }
.ed-best .ed-price b { color: var(--data-2); }
.ed-best .ed-price i { color: color-mix(in srgb, var(--on-field) 70%, transparent); }

.ed-blurb {
  font-size: .92rem; line-height: 1.55; margin: 14px 0 16px;
  padding-bottom: 16px; min-height: 4.6em;
  border-bottom: 1px solid var(--rule);
}
.ed-best .ed-blurb {
  color: color-mix(in srgb, var(--on-field) 86%, transparent);
  border-bottom-color: color-mix(in srgb, var(--on-field) 20%, transparent);
}

.ed ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.ed li { display: flex; gap: 9px; align-items: flex-start; font-size: .91rem; line-height: 1.45; }
.ed li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--data); }
.ed-best li svg { color: var(--data-2); }
.ed-best li { color: color-mix(in srgb, var(--on-field) 90%, transparent); }

/* Actions pinned to the bottom, so the buttons line up across the three
   cards whatever the copy above them does. */
.ed .acts { margin-top: auto; display: grid; gap: 11px; justify-items: center; }
.ed-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 600; color: var(--data);
}
.ed-more svg { width: 15px; height: 15px; }
.ed-more:hover { color: var(--accent-2); }
.ed-best .ed-more { color: var(--data-2); }
.ed-best .ed-more:hover { color: var(--on-field); }

@media (prefers-reduced-motion: reduce) { .ed { transition: none; } .ed:hover { transform: none; } }
@media (max-width: 560px) { .ed { padding: 22px 20px 20px; } .ed-blurb { min-height: 0; } }

/* -------------------------------------------------- mid-page capture band */
.band { background: var(--field); color: var(--on-field); }
.band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 30px; align-items: center; padding: clamp(34px, 3vw, 52px) 0; }
@media (max-width: 900px) { .band-in { grid-template-columns: 1fr; gap: 20px; } }
.band h2 { color: var(--on-field); margin-bottom: 10px; }
.band p { color: var(--on-field); opacity: .86; margin: 0; max-width: 46ch; font-size: 1.08rem; }
.band-form { background: var(--paper); border-radius: var(--r); padding: 24px 26px 26px; }
.band-form b { font-family: 'Sora', sans-serif; color: var(--ink); font-size: 1.2rem; letter-spacing: -.015em; display: block; margin-bottom: 12px; }

/* --------------------------------------------------------- video + quotes */
.duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }
.reel { position: relative; aspect-ratio: 16/10; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--ink) center/cover no-repeat; display: grid; place-items: center; }
.reel button::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.reel .play { position: relative; z-index: 2; width: 70px; height: 70px; border-radius: 50%; background: var(--red); color: var(--on-red); display: grid; place-items: center; transition: transform .16s ease; }
.reel button:hover .play { transform: scale(1.08); }
.reel .play svg { width: 26px; height: 26px; margin-left: 3px; }

.qstack { display: grid; gap: 14px; align-content: start; }
/* Two across, matching the reference design. Three columns left an orphan on
   the second row now there are four quotes, and a four-across row would give
   each card about 290px — enough to run these quotes to eight narrow lines. */
.qrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 780px) { .qrow { grid-template-columns: 1fr; } }
.qsm { background: var(--paper-2); border-radius: var(--r); padding: 26px 26px 28px; }
.qsm p { font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin-bottom: 18px; }
.qsm .nm { font-weight: 700; color: var(--ink); font-size: .98rem; }
.qsm .rl { font-size: .89rem; color: var(--text-3); }

.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 18px; height: 18px; color: var(--spot); }
.stars svg.is-half { opacity: .4; }
.stars svg.is-empty { color: var(--rule-2); }

.rrow {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--paper-2);
}
@media (max-width: 900px) { .rrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rrow { grid-template-columns: 1fr; } }
.rrow a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 16px; border-right: 1px solid var(--rule);
  transition: background .16s ease;
}
.rrow a:last-child { border-right: 0; }
.rrow a:hover { background: var(--paper); }
.rrow img { height: 26px; width: auto; }
.rrow b { font-family: 'Sora', sans-serif; color: var(--data); font-size: 1.7rem; letter-spacing: -.015em; line-height: 1; }
.rrow .stars { margin: 0; }
.rrow small { font-size: .78rem; color: var(--text-3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- marquee */
.mq { overflow: hidden; padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-track { display: flex; align-items: center; gap: 88px; width: max-content; animation: mq 78s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-track img {
  height: 92px; width: auto; max-width: 260px; object-fit: contain;
  filter: grayscale(.3); opacity: .95;
  transition: filter .18s ease, opacity .18s ease;
}
.mq-track img:hover { filter: none; opacity: 1; }
@keyframes mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* ------------------------------------------------------------- close band */
.close { background: var(--field); color: var(--on-field); padding: clamp(44px, 4vw, 70px) 0; text-align: center; }
.close h2 { color: var(--on-field); max-width: 17ch; margin: 0 auto 12px; }
.close p { color: var(--on-field); opacity: .86; max-width: 50ch; margin: 0 auto 26px; font-size: 1.1rem; }
.close .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- footer */
/* Footer. On every page, so every pixel here is paid for site-wide — the
   layout is tuned for height rather than presence. Social marks live in the
   base bar beside the copyright, where they cost no extra rows, and the
   support desk shares its column with the newsletter form. */
/* Dark, matching the nav, so the page has a floor. Everything inside is
   re-toned for it: the whole footer was written for paper. Percentages of
   white rather than fixed greys, so it follows if --field ever changes.
   Checked against #0B2545 — the lightest text here is 6.69:1. */
.foot { padding: clamp(34px, 2.4vw, 46px) 0 20px; background: var(--field); color: color-mix(in srgb, var(--on-field) 80%, transparent); }
/* Closing ask, one row across the top of the footer. */
.foot-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 26px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--on-field) 15%, transparent);
}
.foot-cta-say { display: grid; gap: 3px; }
.foot-cta-say b {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, .92rem + .7vw, 1.5rem);
  letter-spacing: -.015em; color: var(--on-field);
}
.foot-cta-say i { font-style: normal; font-size: .88rem; color: color-mix(in srgb, var(--on-field) 66%, transparent); }
@media (max-width: 560px) {
  .foot-cta { display: grid; gap: 14px; }
  .foot-cta .btn { justify-content: center; }
}

.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 26px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 26px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 22px; } }

.foot-lockup { display: flex; align-items: center; gap: 11px; }
.foot-tile {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--paper); border-radius: 11px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-field) 12%, transparent);
}
.foot-tile img { width: 32px; height: 32px; }
.foot b.mark { font-family: 'Sora', sans-serif; font-size: 1.4rem; color: var(--on-field); letter-spacing: -.008em; line-height: 1; }
/* Wider than a strapline because it now carries the company history — but
   still capped, so it stays a readable measure rather than a wall. */
.foot p.blurb { font-size: .87rem; line-height: 1.6; margin: 10px 0 12px; max-width: 42ch; color: color-mix(in srgb, var(--on-field) 78%, transparent); }
.foot p.blurb b { color: var(--on-field); font-weight: 700; }

.foot-rating { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.foot-rating .stars { margin: 0; }
.foot-rating .stars svg { width: 15px; height: 15px; }
.foot-rating i { font-style: normal; font-size: .8rem; color: color-mix(in srgb, var(--on-field) 66%, transparent); }
/* Stars take the light instrument tint here, not --data, which is a dark cyan meant for paper. */
.foot-rating .stars svg { color: var(--data-2); }
.foot-rating .stars svg.is-empty { color: color-mix(in srgb, var(--on-field) 26%, transparent); }

.foot h4 { font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: color-mix(in srgb, var(--on-field) 62%, transparent); margin: 0 0 11px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 7px; font-size: .92rem; }
.foot li a { color: color-mix(in srgb, var(--on-field) 80%, transparent); }
.foot li a:hover { color: var(--on-field); }

.sub { display: flex; gap: 6px; margin-top: 13px; }
.sub input {
  flex: 1; min-width: 0; padding: 9px 13px; border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--on-field) 24%, transparent);
  background: color-mix(in srgb, var(--on-field) 9%, transparent);
  color: var(--on-field); font-size: .86rem;
}
.sub input::placeholder { color: color-mix(in srgb, var(--on-field) 55%, transparent); }
.sub input:focus { outline: 0; border-color: var(--data-2); background: color-mix(in srgb, var(--on-field) 14%, transparent); }
/* Red, not --btn-ink: ink on navy is invisible, and this is an action. */
.sub .btn-ink { background: var(--red); border-color: var(--red); color: var(--on-red); }
.sub .btn-ink:hover { background: var(--red-2); border-color: var(--red-2); }
.sub .btn-sm { padding: 9px 16px; font-size: .85rem; }
.sub-done { display: none; margin-top: 7px; font-size: .82rem; color: var(--data-2); font-weight: 600; }
.sub-done.on { display: block; }

.foot-base {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--on-field) 15%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
  flex-wrap: wrap; font-size: .85rem; color: color-mix(in srgb, var(--on-field) 62%, transparent);
}
.foot-base a { color: color-mix(in srgb, var(--on-field) 70%, transparent); }
.foot-base a:hover { color: var(--on-field); }
.foot-recaptcha {
  margin: 12px 0 0; font-size: .74rem; line-height: 1.5;
  color: color-mix(in srgb, var(--on-field) 45%, transparent);
}
.foot-recaptcha a { color: color-mix(in srgb, var(--on-field) 62%, transparent); text-decoration: underline; }
.foot-legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* Marks, not buttons: no ring, so they take the height of the text line they
   sit on instead of adding a row of 42px circles to the brand column. */
.foot-social { display: flex; gap: 6px; }
.foot-social a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: color-mix(in srgb, var(--on-field) 66%, transparent); }
.foot-social a:hover { background: color-mix(in srgb, var(--on-field) 15%, transparent); color: var(--on-field); }
.foot-social svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .foot-base { justify-content: flex-start; } }



/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */
.cat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 2px solid var(--rule); background: var(--panel, var(--paper));
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.cat-chip span { font-size: .78rem; font-weight: 600; color: var(--text-3); }
.cat-chip:hover { border-color: var(--rule-2); color: var(--ink); }
.cat-chip.is-on { background: var(--field); border-color: var(--field); color: var(--on-field); }
.cat-chip.is-on span { color: color-mix(in srgb, var(--on-field) 66%, transparent); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 940px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--paper-2); border-radius: var(--r); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-thumb { display: block; aspect-ratio: 16 / 9; background: var(--paper-3); overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--text-3); }
.post-cat {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); background: var(--red-soft); padding: 4px 9px; border-radius: var(--r-pill);
}
.post-card h2 { font-size: 1.16rem; line-height: 1.25; margin: 0; }
.post-card h2 a { color: var(--ink); }
.post-card h2 a:hover { color: var(--red); }
.post-card p { font-size: .92rem; margin: 0; }
.post-more {
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .86rem; font-weight: 600; color: var(--red);
}
.post-more svg { width: 15px; height: 15px; }

.pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule);
}
.pager-btn {
  padding: 11px 22px; border: 2px solid var(--rule-2); border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.pager-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-field); }
.pager-btn.is-off { opacity: .35; pointer-events: none; }
.pager-count { font-size: .9rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ single post */
.crumbs { display: flex; gap: 10px; font-size: .88rem; margin-bottom: 16px; color: color-mix(in srgb, var(--on-field) 60%, transparent); }
.crumbs a { color: color-mix(in srgb, var(--on-field) 82%, transparent); }
.crumbs a:hover { color: var(--on-field); }
.byline { margin: 14px 0 0; font-size: .95rem; color: color-mix(in srgb, var(--on-field) 74%, transparent); display: flex; gap: 10px; }

.article { max-width: 780px; padding-top: clamp(30px, 3vw, 48px); padding-bottom: clamp(40px, 4vw, 66px); }
.article-hero { margin: 0 0 34px; border-radius: var(--r); overflow: hidden; }
.article-hero img { width: 100%; height: auto; }

/* Bodies came from the old CMS: p, b, center, ul, tables, inline images. */
.prose { font-size: 1.06rem; line-height: 1.75; color: var(--text); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose b, .prose strong { color: var(--ink); font-weight: 700; }
.prose h2, .prose h3, .prose h4, .prose h5 { margin: 1.8em 0 .6em; line-height: 1.2; }
.prose h2 { font-size: 1.7rem; }
.prose h3 { font-size: 1.35rem; }
.prose h5 { font-size: 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--red-2); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); margin: 1.4em auto; }
.prose center { display: block; text-align: center; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.prose td, .prose th { border: 1px solid var(--rule); padding: 10px 12px; text-align: left; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red); color: var(--ink); font-size: 1.1rem;
}
/* Wide content must scroll inside itself, never the page. */
.prose > table, .prose > pre { display: block; overflow-x: auto; }

/* Long-form legal and documentation pages. Body copy runs the full width of a
   1240px container otherwise, which is far too long a line to read comfortably;
   68 characters is about the limit. The guide also uses <hr> and <figure>,
   which nothing else on the site does. */
.prose-legal { max-width: 68ch; }
.prose-legal h2 {
  padding-top: .5em; border-top: 1px solid var(--rule);
  font-size: 1.45rem;
}
.prose-legal h2:first-child { padding-top: 0; border-top: 0; }
.prose-legal hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.prose-legal figure { margin: 1.6em 0; }
.prose-legal figcaption {
  margin-top: .6em; font-size: .86rem; color: var(--text-3); text-align: center;
}
/* Tables in the guide list licence counts — they must not stretch the page. */
.prose-legal table { display: block; overflow-x: auto; white-space: nowrap; }

.article-cta {
  margin-top: 48px; padding: 28px 30px;
  background: var(--paper-2); border-radius: var(--r);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.article-cta h2 { font-size: 1.4rem; margin: 0 0 6px; }
.article-cta p { margin: 0; font-size: .96rem; }


/* --------------------------------------------------------------------------
   Support and news
   -------------------------------------------------------------------------- */
.support-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } }
.support-side { display: grid; gap: 16px; }
.side-card { background: var(--paper-2); border-radius: var(--r); padding: 24px 26px; }
.side-card h2 { font-size: 1.15rem; margin-bottom: 14px; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.side-list li { display: flex; align-items: center; gap: 11px; font-size: .98rem; }
.side-list svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; }
.side-list a { color: var(--ink); }
.side-list a:hover { color: var(--red); }

.faq-group { font-size: 1.15rem; margin: 30px 0 12px; }
.faq-list { display: grid; gap: 8px; }
.faq {
  background: var(--paper-2); border-radius: var(--r);
  border: 2px solid transparent; transition: border-color .16s ease;
}
.faq[open] { border-color: var(--rule); background: var(--paper); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink); font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-3); transition: transform .18s ease; }
.faq[open] summary svg { transform: rotate(180deg); color: var(--red); }
.faq-a { padding: 0 22px 22px; font-size: .98rem; }
.faq-a p:first-child { margin-top: 0; }

.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.news-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 28px;
  padding: 30px 0; border-top: 1px solid var(--rule);
}
.news-item:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 720px) { .news-item { grid-template-columns: 1fr; gap: 12px; } }
.news-when time { display: block; line-height: 1.1; }
.news-when b {
  display: block; font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 1.3rem; color: var(--ink); letter-spacing: -.015em;
}
.news-when time span { font-size: .92rem; color: var(--text-3); }
.news-cat {
  display: inline-block; margin-top: 10px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); background: var(--red-soft); padding: 4px 9px; border-radius: var(--r-pill);
}
.news-body h2 { font-size: 1.35rem; margin-bottom: 10px; }
.news-content { font-size: .99rem; }
.news-author { margin-top: 12px; font-size: .88rem; color: var(--text-3); }


/* --------------------------------------------------------------------------
   Trial and contact
   -------------------------------------------------------------------------- */
.req-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .req-grid { grid-template-columns: 1fr; gap: 24px; } }
.req-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.req-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 560px) { .req-row { grid-template-columns: 1fr; gap: 4px; } }
.req-row dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.req-row dd { margin: 0; color: var(--ink); font-size: 1rem; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--paper-2); border-radius: var(--r); padding: 26px 26px 28px; }
.step-n {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  background: var(--red); color: var(--on-red); border-radius: 50%;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .95rem; margin: 0; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-side { display: grid; gap: 16px; }

.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .office-grid { grid-template-columns: 1fr; } }
.office { background: var(--paper-2); border-radius: var(--r); padding: 26px 26px 28px; }
.office h3 { margin-bottom: 4px; }
.office-note { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.office address { font-style: normal; margin: 14px 0 0; display: grid; gap: 3px; font-size: .97rem; }
.office-phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.office-phone svg { width: 16px; height: 16px; color: var(--red); }
.office-phone:hover { color: var(--red); }

.world-map { margin: 34px 0 0; }
.world-map img { width: 100%; height: auto; border-radius: var(--r); background: var(--paper-2); }
.world-map figcaption { margin-top: 12px; font-size: .88rem; color: var(--text-3); }


/* --------------------------------------------------------------------------
   Product pages
   -------------------------------------------------------------------------- */
.feature-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .feature-split { grid-template-columns: 1fr; gap: 26px; } }

.feature-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.feature-ticks li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
  font-size: 1.02rem; color: var(--ink);
}
.feature-ticks svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: var(--red); }

.audience { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.audience ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.audience li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; }
.audience svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--red); }

/* Edition matrix */
.matrix-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.matrix { width: 100%; border-collapse: collapse; font-size: .97rem; background: var(--paper); }
@media (max-width: 760px) { .matrix { min-width: 620px; } }
.matrix th, .matrix td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--rule); }
.matrix thead th {
  background: var(--paper-2); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.matrix thead th.hi { background: var(--field); color: var(--on-field); }
.matrix tbody th { font-weight: 500; color: var(--text); }
.matrix td { text-align: center; width: 17%; }
.matrix td.hi { background: color-mix(in srgb, var(--field) 6%, transparent); }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix .yes svg { width: 19px; height: 19px; color: var(--red); margin: 0 auto; }
.matrix .no { color: var(--rule-2); }
.matrix .txt { font-size: .85rem; color: var(--text-3); }



/* reCAPTCHA's badge is fixed bottom-right by Google, which is exactly where the
   contact dock lives — it sat underneath the WhatsApp button, and on a phone its
   256px ran 186px off the right edge. Moved to the bottom left, where nothing
   else is. Repositioning is allowed; only hiding it obliges you to carry the
   attribution text instead. !important because Google sets these inline. */
/* Hidden at Murali's request (3 Sep 2026). Google permits this only while the
   attribution line in footer.php is displayed — if that line is ever removed,
   this rule must go with it. */
.grecaptcha-badge { visibility: hidden !important; }

/* --------------------------------------------------------------- dock
   Floating contact dock, bottom right. Lifts above the sticky trial bar
   whenever that bar is showing so the two never overlap.
   -------------------------------------------------------------------------- */
.dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 160;
  display: flex; flex-direction: column-reverse; gap: 12px;
  transition: bottom .3s ease, transform .25s ease, opacity .25s ease;
}
@media (max-width: 560px) {
  /* A vertical stack is 180px tall on a phone — it sat over headings and, on
     the edition cards, over the "Buy Standard" button itself. Laid out as a
     row it occupies one 46px strip along the bottom instead of a quarter of
     the screen down the right-hand side. row-reverse keeps WhatsApp nearest
     the thumb, matching the column order it replaces. */
  .dock { right: 14px; bottom: 14px; flex-direction: row-reverse; gap: 8px; }
  /* And it gets out of the way entirely while the reader is moving down the
     page, so nothing is ever hidden behind it for longer than a glance. */
  .dock.is-away { transform: translateY(150%); opacity: 0; pointer-events: none; }
}

.dock-btn {
  position: relative;
  width: 58px; height: 58px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
  /* Depth shadow first, then a halo in the button's own --glow. The dark
     layer is what grounds it; the coloured layers only add light. */
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--ink) 30%, transparent),
    0 0 0 3px  color-mix(in srgb, var(--glow) 18%, transparent),
    0 0 18px   color-mix(in srgb, var(--glow) 44%, transparent),
    0 0 42px   color-mix(in srgb, var(--glow) 22%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dock-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--ink) 38%, transparent),
    0 0 0 5px   color-mix(in srgb, var(--glow) 26%, transparent),
    0 0 26px    color-mix(in srgb, var(--glow) 62%, transparent),
    0 0 62px    color-mix(in srgb, var(--glow) 32%, transparent);
}
.dock-btn svg { width: 27px; height: 27px; }

/* Each button glows in its own colour. The callback button is navy, and a
   navy halo is a shadow rather than a glow, so it borrows the instrument
   cyan — the palette's light — instead. */
/* WhatsApp's primary brand green, as Murali asked on 3 Sep 2026 — this is the
   colour every WhatsApp button a visitor has ever tapped, so it is what the
   control is recognised by. It was previously the darker #128C7E because white
   on #25D366 is only 1.98:1, under the 3:1 WCAG asks of a non-text graphic.
   The glyph therefore goes dark instead of white: WhatsApp's own dark teal on
   the brand green is 3.87:1, which clears it while staying inside the brand's
   own palette. */
.dock-wa   { background: #25D366;     --glow: #25D366; color: #075E54; }
.dock-call { background: var(--field); --glow: var(--data-2); }
.dock-chat { background: var(--red);   --glow: var(--red); }
.dock-chat[aria-expanded="true"] { background: var(--field); --glow: var(--data-2); }
@media (max-width: 560px) { .dock-btn { width: 46px; height: 46px; } .dock-btn svg { width: 22px; height: 22px; } }

.dock-btn .tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--ink); color: #fff;
  font-size: .84rem; font-weight: 600; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--r-sm);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.dock-btn:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 900px) { .dock-btn .tip { display: none; } }

/* a quiet pulse on the chat button until it is opened once */
.dock-chat::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--red);
  animation: dockPulse 2.4s ease-out infinite;
}
.dock-chat.seen::after, .dock-chat[aria-expanded="true"]::after { display: none; }
@keyframes dockPulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .dock-chat::after { animation: none; display: none; } }

/* ------------------------------------------------------------- chat panel */
.chat {
  position: fixed; right: 22px; bottom: 94px; z-index: 170;
  width: min(384px, calc(100vw - 44px));
  max-height: min(600px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: 0 26px 70px color-mix(in srgb, var(--ink) 34%, transparent);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, bottom .3s ease;
}
.chat.open { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 560px) {
  .chat { right: 14px; left: 14px; width: auto; bottom: 68px; max-height: calc(100vh - 120px); }
}

.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--field); color: var(--on-field);
}
.chat-head .brand-tile { width: 40px; height: 40px; border-radius: 10px; }
.chat-head .brand-tile img { width: 30px; height: 30px; }
.chat-head strong { display: block; font-family: 'Sora', sans-serif; font-size: 1.05rem; letter-spacing: -.01em; }
.chat-head span { display: flex; align-items: center; gap: 7px; font-size: .82rem; opacity: .78; margin-top: 2px; }
.chat-head span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.chat-close {
  margin-left: auto; width: 34px; height: 34px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--on-field) 14%, transparent);
  border: 0; border-radius: 50%; color: var(--on-field); cursor: pointer;
}
.chat-close:hover { background: color-mix(in srgb, var(--on-field) 26%, transparent); }
.chat-close svg { width: 17px; height: 17px; }

.chat-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--paper-2); }
.chat-msg {
  max-width: 88%; margin-bottom: 12px; padding: 13px 15px;
  background: var(--paper); border-radius: 4px 16px 16px 16px;
  font-size: .96rem; color: var(--ink);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
  animation: chatIn .26s ease both;
}
.chat-msg.me {
  margin-left: auto; background: var(--field); color: var(--on-field);
  border-radius: 16px 4px 16px 16px;
}
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.chat-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chat-opt {
  background: var(--paper); border: 2px solid var(--rule-2); color: var(--ink);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 10px 15px; border-radius: var(--r-pill);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.chat-opt:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }

.chat-foot { padding: 14px 16px; border-top: 1px solid var(--rule); background: var(--paper); }
.chat-row { display: flex; gap: 8px; }
.chat-row input {
  flex: 1; min-width: 0; padding: 12px 14px;
  background: var(--paper-2); border: 2px solid transparent; border-radius: var(--r-pill);
  font-size: .95rem; color: var(--ink);
}
.chat-row input:focus { outline: 0; border-color: var(--field); background: var(--paper); }
.chat-send {
  width: 46px; flex-shrink: 0; border: 0; border-radius: 50%;
  background: var(--red); color: var(--on-red); display: grid; place-items: center; cursor: pointer;
}
.chat-send:hover { background: var(--red-2); }
.chat-send svg { width: 19px; height: 19px; }
.chat-hint { margin: 10px 0 0; font-size: .76rem; color: var(--text-3); text-align: center; }

/* ------------------------------------------------------------------ print */
@media print {
  .topnav, .mq, .band, .js-navpanel { display: none !important; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Modals — callback request and exit intent
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 220;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  opacity: 0; transition: opacity .22s ease;
}
.modal[hidden] { display: none; }
.modal.open { opacity: 1; }
.modal-card {
  position: relative; width: min(460px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ink) 42%, transparent);
  transform: translateY(12px) scale(.985); transition: transform .22s ease;
}
.modal.open .modal-card { transform: none; }
.modal-card.is-wide { width: min(560px, 100%); }
.modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--rule); border-radius: 50%;
  color: var(--text); cursor: pointer;
}
.modal-x:hover { background: var(--ink); border-color: var(--ink); color: var(--on-field); }
.modal-x svg { width: 17px; height: 17px; }
.modal-head { padding: 30px 30px 18px; }
.modal-head h2 { font-size: 1.5rem; margin-bottom: 8px; }
.modal-head p { margin: 0; font-size: .96rem; color: var(--text); }
.modal-body { padding: 0 30px 30px; }
.modal-head + .modal-body { padding-top: 4px; }
.modal-offer {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 30px; background: var(--field); color: var(--on-field);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.modal-offer .offer-badge {
  flex-shrink: 0; background: var(--red); color: var(--on-red);
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.05rem;
  padding: 9px 14px; border-radius: var(--r-sm);
}
.modal-offer strong { display: block; font-family: 'Sora', sans-serif; font-size: 1.02rem; letter-spacing: -.01em; }
.modal-offer span { font-size: .88rem; opacity: .8; }
.modal .c-field { margin-bottom: 14px; }
.modal .btn-block { width: 100%; }
body.modal-open { overflow: hidden; }
@media (max-width: 560px) {
  .modal-head { padding: 26px 22px 14px; }
  .modal-body { padding: 0 22px 26px; }
  /* The close button is absolute at top-right (38px wide, 14px in), so it sits
     over this bar. On a phone the card is narrow enough that the offer title
     wrapped straight underneath it — reserve the width it occupies. */
  .modal-offer { padding: 18px 60px 18px 22px; }
}

/* ==========================================================================
   Features, Licensing, About and Tutorials (T17–T21)
   Built from the existing tokens and, wherever one already fits, the existing
   classes — .fgrid, .feature-ticks, .matrix, .office-grid and .proofbar are all
   reused as-is. What follows is only what had no equivalent.
   ========================================================================== */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- feature groups */
.fgroup { display: flex; flex-direction: column; gap: 18px; }
.fgroup-head { display: flex; align-items: flex-start; gap: 20px; }
.fgroup-n {
  font-size: .95rem; font-weight: 700; color: var(--red);
  padding-top: 4px; letter-spacing: .04em; flex-shrink: 0;
}
.fgroup-head h2 { margin: 0; }
.fgroup-head p { margin: 5px 0 0; color: var(--text-3); max-width: 62ch; }

/* Two columns of ticks, so a long list does not become a long scroll. */
.ticks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.ticks-2 li { font-size: .98rem; }
@media (max-width: 780px) { .ticks-2 { grid-template-columns: 1fr; } }

.pill-new {
  display: inline-block; margin-left: 9px; vertical-align: 1px;
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red); background: var(--red-soft);
  border-radius: var(--r-pill); padding: 3px 8px;
}

/* ------------------------------------------------------------ licensing */
.lic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .lic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px)  { .lic-grid { grid-template-columns: 1fr; } }

.lic-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.lic-card.is-flagged { border-color: var(--red); }
.lic-flag {
  position: absolute; top: -10px; left: 24px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--red); color: var(--on-red);
  border-radius: var(--r-pill); padding: 4px 11px;
}
.lic-top { display: flex; align-items: flex-start; gap: 14px; }
.lic-ico { color: var(--spot); flex-shrink: 0; }
.lic-ico svg { width: 30px; height: 30px; stroke-width: 1.5; }
.lic-top h3 { margin: 0; line-height: 1.25; }
.lic-sub {
  display: block; margin-top: 3px;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.lic-lede { margin: 0; font-size: .97rem; }
.lic-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lic-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; }
.lic-points svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--red); }
.lic-who {
  margin: auto 0 0; padding-top: 15px; border-top: 1px solid var(--rule);
  font-size: .89rem; color: var(--text-3);
}
.lic-who i {
  display: block; font-style: normal;
  line-height: 1.45; min-height: calc(2 * 1.45em);   /* two lines, always */
}
.lic-who span {
  display: block;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}

/* ---------------------------------------------------------------- about */
.mission-card {
  background: var(--field); color: var(--on-field);
  border-radius: var(--r-lg); padding: 32px 30px;
  display: flex; flex-direction: column; gap: 16px;
}
.mission-card .tag { color: color-mix(in srgb, var(--on-field) 70%, transparent) !important; }
.mission-card blockquote {
  margin: 0;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.85rem);
  font-weight: 600; line-height: 1.22; letter-spacing: -.01em;
  text-wrap: balance;
}
.mission-card p { margin: 0; font-size: .96rem; opacity: .82; }

.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 26px;
  padding: 24px 0; border-top: 1px solid var(--rule);
}
.tl-item:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: 8px; } }
.tl-when {
  font-size: .95rem; font-weight: 700; color: var(--red);
  letter-spacing: .02em; padding-top: 2px;
}
.tl-body h3 { margin: 0 0 6px; }
.tl-body p { margin: 0; max-width: 68ch; }

.regions { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); }
.regions ul {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.regions li {
  font-size: .89rem; color: var(--text);
  background: var(--paper-2); border-radius: var(--r-pill);
  padding: 7px 15px;
}

/* ------------------------------------------------------------ tutorials */
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 860px) { .vgrid { grid-template-columns: 1fr; } }
.vcard { display: flex; flex-direction: column; gap: 16px; }
.vcard.is-wide { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .vcard.is-wide { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; align-items: center; }
}
/* The banner is sized for the hero; inside a card the play button is smaller. */
.vcard .media-frame { aspect-ratio: 16 / 9; }
/* These posters are screen recordings — much lighter, and busy at the top where
   the hero's poster is dark. The card scrim therefore darkens both ends rather
   than just the foot, or the eyebrow lands on white toolbar chrome. */
.vcard .video-banner::after {
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 68%, transparent) 0%,
      color-mix(in srgb, var(--ink) 26%, transparent) 26%,
      color-mix(in srgb, var(--ink) 30%, transparent) 58%,
      color-mix(in srgb, var(--ink) 88%, transparent) 100%);
}
.vcard .video-banner:hover::after {
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 58%, transparent) 0%,
      color-mix(in srgb, var(--ink) 16%, transparent) 26%,
      color-mix(in srgb, var(--ink) 20%, transparent) 58%,
      color-mix(in srgb, var(--ink) 80%, transparent) 100%);
}
.vcard .vb-play { width: 62px; height: 62px; }
.vcard .vb-play svg { width: 24px; height: 24px; }
.vcard .vb-foot b { font-size: 1.02rem; }

.vcard-body { display: flex; flex-direction: column; gap: 14px; }
.vcard-body p { margin: 0; font-size: .97rem; }
.vtopics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.vtopics li {
  font-size: .78rem; color: var(--text-3);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 5px 12px;
}

/* Column-count helpers.
   These belong in the stylesheet rather than in a style attribute: an inline
   grid-template-columns outranks every media query, so a 4-up grid set inline
   stays 4-up on a 390px phone and pushes the page sideways. */
.fgrid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .fgrid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .fgrid-4 { grid-template-columns: 1fr; } }
@media (max-width: 520px)  { .c-form-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Comparison pages (T14–T16)
   ========================================================================== */
.eds-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .eds-2 { grid-template-columns: 1fr; } }

.verdict {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center;
  background: var(--field); color: var(--on-field);
  border-radius: var(--r-lg); padding: 34px 38px;
}
@media (max-width: 780px) { .verdict { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; } }

.verdict-stat {
  text-align: center; padding-right: 36px;
  border-right: 1px solid color-mix(in srgb, var(--on-field) 22%, transparent);
}
@media (max-width: 780px) {
  .verdict-stat {
    text-align: left; padding: 0 0 20px; border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--on-field) 22%, transparent);
  }
}
.verdict-stat b {
  display: block;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.7rem); font-weight: 700;
    /* A stat, not a control — data cyan, same rule as the hero headline.
       .verdict sits on --field, so this is the 8.60:1 pairing. */
  line-height: 1; letter-spacing: -.035em; color: var(--data-2);
  font-variant-numeric: tabular-nums;
}
.verdict-stat span {
  display: block; margin-top: 10px;
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  opacity: .82; max-width: 18ch; margin-inline: auto;
}
@media (max-width: 780px) { .verdict-stat span { margin-inline: 0; max-width: none; } }
.verdict-body h2 { color: var(--on-field); margin: 0 0 10px; }
.verdict-body p  { margin: 0; opacity: .9; max-width: 64ch; }

.small-print { margin-top: 14px; font-size: .85rem; color: var(--text-3); max-width: 78ch; }
.small-print a { color: inherit; text-decoration: underline; }

.matrix .opt {
  display: block; margin-top: 2px;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.matrix .total-row th, .matrix .total-row td {
  border-top: 2px solid var(--rule-2); font-size: 1.06rem;
}

/* ------------------------------------------------- footer support desk
   The footer sits on cream (--paper), not on the navy field — so these take
   ink and ok/green, never --on-field. */
.foot-desk { display: flex; flex-direction: column; gap: 3px; }
.desk-open {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #4ADE80;                  /* light mint: 8.83:1 on the navy footer */
}
.desk-open i {
  width: 7px; height: 7px; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 3px color-mix(in srgb, #4ADE80 22%, transparent);
}
.desk-num {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 1.05rem; font-weight: 700; color: var(--on-field);
  letter-spacing: -.01em;
}
.desk-num:hover { color: var(--data-2); }
.desk-num svg { width: 17px; height: 17px; color: var(--red-light); }
.desk-alt  { font-size: .8rem; color: color-mix(in srgb, var(--on-field) 66%, transparent); margin-top: 3px; }
.desk-alt a { color: color-mix(in srgb, var(--on-field) 85%, transparent); text-decoration: underline; }
.office-hours {
  display: inline-block; margin-top: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--red);
}

/* --------------------------------------------------- signed-in admin bar */
.adminbar {
  display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap;
  background: var(--ink); color: #fff;
  padding: 9px clamp(16px, 4vw, 40px);
  font-size: .86rem;
}
.adminbar a { color: #fff; opacity: .82; font-weight: 600; }
.adminbar a:hover { opacity: 1; text-decoration: underline; }
.ab-who { display: flex; align-items: baseline; gap: 7px; margin-right: auto; font-weight: 700; }
.ab-who i {
  font-style: normal; font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .6;
}
.adminbar .ab-edit {
  background: var(--red); color: var(--on-red); opacity: 1;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.adminbar .ab-edit:hover { background: var(--red-2); text-decoration: none; }
.ab-locked { opacity: .55; font-size: .8rem; }
.adminbar .ab-out { opacity: .6; }
@media (max-width: 640px) { .ab-who { margin-right: 0; width: 100%; } }

/* ==========================================================================
   HOMEPAGE 2026 — sections added in the 31 Aug rebuild.
   Head-to-head vs AutoCAD, edition prices, the cost calculator and the FAQ.
   Nothing here is used by any other page.
   ========================================================================== */

/* The second sentence of the H1 carries the whole pitch, so it gets the
   brand red. On the field that is the light tint, not the flat red —
   #D22E33 on #0B2545 is 3.06:1 — under AA for text — while --red-light is
   5.66:1 there. */
/* The rotating phrase is its own <h2> under the <h1>, so the two read as one
   statement. The tight spacing is scoped to .hero-h1 rather than applied to
   .field h1, which the product pages, trial.php and index-v1.php also use. */
.field .hero-h1 { margin-bottom: 4px; }
.field h2.typeline {
  /* Cyan, not red: red is reserved for things you can click, and this is a
     headline. 8.60:1 on the field, up from red-light's 5.66:1. */
  color: var(--data-2);
  /* The floor is set by the longest caption, not by taste: these never wrap
     (white-space: nowrap below), so the type has to be small enough that the
     longest one still fits a 320px phone. At 18 characters that is ~1.65rem.
     Shorten the captions and this can go back up. */
  font-size: clamp(1.65rem, 1.15rem + 2.7vw, 3.5rem);
  margin: 0 0 20px;
}
.field h2.typeline em { font-style: normal; color: inherit; }

/* Rotating headline phrase.
   The ghost is a hidden copy of the LONGEST line. It holds the box open at
   its full size and wraps exactly as the real text would at any width, so
   the hero never reflows as the phrase types and deletes — without it the
   lede, chips and capture form all jump on every cycle. The live text is
   laid over it at 100% width so it breaks on the same lines. */
/* One line, always. nowrap is set on the wrapper so the ghost and the live
   text inherit it together — if only one of them wrapped they would stop
   agreeing on the box size, which is the whole job the ghost is doing. */
.typeline { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; }
.typeline-ghost { visibility: hidden; }
.typeline-text { position: absolute; left: 0; top: 0; width: 100%; }

/* Caret. Sized in em so it tracks the clamped h1 font-size. */
.typeline-text::after {
  content: ''; display: inline-block;
  width: .055em; height: .78em; margin-left: .05em;
  background: currentColor;
  animation: typecaret 1.05s step-end infinite;
}
@keyframes typecaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* app.js does not start the effect at all here, so the caret would sit
     blinking beside a phrase that never changes. */
  .typeline-text::after { display: none; }
}

/* Hero form, short version: email + phone + button on one line. */
.c-form-short { grid-template-columns: 1fr 1fr auto; }
@media (max-width: 760px) {
  .c-form-short { grid-template-columns: 1fr; }
  .c-form-short > button { width: 100%; }
}

/* Trust & review badges — a card per platform, sitting directly under the
   hero. Replaces the joined .rrow strip on the homepage; .rrow itself stays
   for index-v1.php. */
.badges-band { padding: clamp(40px, 3.5vw, 62px) 0 0; text-align: center; }
/* A real heading, not a grey micro-label: this band is carrying the page's
   social proof, so it is worth announcing. */
.badges-h {
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  letter-spacing: -.018em; color: var(--ink);
}

/* Four columns for four platforms. Column counts stay at 4, 2 or 1 — the
   divisors of four — so a row is never left with an orphan card. */
.badges {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  max-width: 940px; margin-inline: auto;
}
@media (max-width: 900px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; } }
@media (max-width: 520px) { .badges { grid-template-columns: 1fr; max-width: 340px; } }

.badge {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 20px 14px 18px;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.badge:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--data) 42%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 12%, transparent);
}
.badge img { height: 29px; width: auto; max-width: 100%; object-fit: contain; }
.badge .stars { margin: 0; }
.badge .stars svg { width: 15px; height: 15px; }
.badge b {
  font-family: 'Sora', sans-serif; font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1; color: var(--data);
}
.badge small {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.badge:hover small { color: var(--data); }
@media (max-width: 560px) {
  .badge { padding: 16px 10px 15px; gap: 7px; }
  .badge b { font-size: 1.5rem; }
  .badge img { height: 24px; }
}

/* ------------------------------------------------------- versus AutoCAD */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.vs-col { background: var(--paper-2); padding: 30px 30px 32px; }
.vs-them { border-radius: var(--r) 0 0 var(--r); }
.vs-us   { border-radius: 0 var(--r) var(--r) 0; background: var(--field); color: var(--on-field); }
.vs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.vs-head h3 { margin: 0; }
.vs-us .vs-head h3 { color: var(--on-field); }
.vs-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.vs-mark svg { width: 20px; height: 20px; }
.vs-x  { background: var(--red-soft); color: var(--red); }
.vs-ok { background: color-mix(in srgb, var(--on-field) 16%, transparent); color: var(--on-field); }
.vs-col ul { list-style: none; margin: 0; padding: 0; }
.vs-col li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: .98rem;
}
.vs-us li { border-bottom-color: color-mix(in srgb, var(--on-field) 15%, transparent); }
.vs-col li:last-child { border-bottom: 0; }
.vs-col li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 4px; }
.vs-them li svg { color: var(--red); }
.vs-us li svg { color: var(--on-field); }
.vs-them li { color: var(--text); }
.vs-us li { color: var(--on-field); }

/* The medallion straddles the seam between the two columns. */
.vs-pill {
  align-self: center; z-index: 2; margin: 0 -22px;
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--red); color: var(--on-red);
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em;
  box-shadow: 0 0 0 6px var(--paper);
}
@media (max-width: 780px) {
  .vs { grid-template-columns: 1fr; }
  .vs-them { border-radius: var(--r) var(--r) 0 0; }
  .vs-us   { border-radius: 0 0 var(--r) var(--r); }
  .vs-pill { margin: -27px auto; }
}
.vs-note, .eds-note { margin-top: 18px; font-size: .84rem; color: var(--text-3); max-width: 82ch; }
.vs-note a, .eds-note a { text-decoration: underline; color: inherit; }
.vs-note a:hover, .eds-note a:hover { color: var(--ink); }

/* Price on the edition card. Sits above .acts, which keeps margin-top:auto,
   so cards of unequal height still line their buttons up. */
.ed-price { display: flex; align-items: baseline; gap: 9px; margin: 0 0 18px; }
.ed-price b {
  font-family: 'Sora', sans-serif; font-size: 2.1rem;
  letter-spacing: -.02em; line-height: 1; color: var(--data);
}
.ed-price i { font-style: normal; font-size: .86rem; color: var(--text-3); }

/* ---------------------------------------------------------- calculator */
/* Two independent panels, not one bordered box split down the middle.
   align-items:start lets each stop at its own content, so the navy can never
   trail empty blue below the chart — and because each panel owns its edges,
   the shorter one simply ends instead of leaving a strip of the wrong colour
   inside a shared border. */
.calc {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; gap: 18px; } }
.calc-in { padding: 2px 2px 0 0; display: grid; gap: 16px; align-content: start; }
.calc-field { display: grid; gap: 10px; }
.calc-field label, .calc-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}

.stepper { display: inline-flex; align-items: center; border: 2px solid var(--rule); border-radius: var(--r-sm); width: max-content; background: var(--paper); }
.stepper button { display: grid; place-items: center; width: 46px; height: 50px; border: 0; background: none; color: var(--ink); }
.stepper button:hover { background: var(--paper-2); }
.stepper button svg { width: 18px; height: 18px; }
.stepper input {
  width: 78px; height: 50px; text-align: center; border: 0; background: none;
  font-family: 'Sora', sans-serif; font-size: 1.3rem; color: var(--ink);
  border-inline: 2px solid var(--rule);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 0; background: var(--paper-2); }

.seg { display: inline-flex; background: var(--paper-2); border-radius: var(--r-pill); padding: 4px; width: max-content; max-width: 100%; }
.seg button {
  border: 0; background: none; border-radius: var(--r-pill);
  padding: 11px 22px; font-weight: 600; font-size: .95rem; color: var(--text);
  transition: background .15s ease, color .15s ease;
}
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--ink); color: var(--on-field); }

/* ---- compact subscription-vs-perpetual table, left panel -------------- */
.vs-mini-h {
  font-size: clamp(1.15rem, .95rem + .6vw, 1.45rem);
  letter-spacing: -.015em; margin: 0 0 14px; color: var(--ink);
}
/* separate + spacing 0 so the ACTCAD column can carry a background and round
   its corners; collapse would drop both. */
.vs-mini { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }

/* The ACTCAD column is a tinted panel running the full height of the table, so
   the answer registers before a word is read. Ink on --paper-blue is 13.47:1;
   --data is only 4.39:1 there, so it is used for marks, never for the text. */
.vs-mini th:nth-child(3),
.vs-mini td:nth-child(3) { background: var(--paper-blue); }
.vs-mini thead th:nth-child(3) { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.vs-mini tbody tr:last-child td:nth-child(3) { border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* Full grid of rules. Every cell carries a right and bottom border and the
   table carries the top and left, so the lines meet exactly once with
   border-spacing 0 — no doubling at the joins. */
.vs-mini { border: 1px solid var(--rule); border-radius: var(--r-sm); }
.vs-mini th, .vs-mini td {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.vs-mini th:last-child, .vs-mini td:last-child { border-right: 0; }
.vs-mini tbody tr:last-child th, .vs-mini tbody tr:last-child td { border-bottom: 0; }

.vs-mini thead th {
  text-align: left; padding: 11px 13px 10px; vertical-align: bottom;
  font-size: .82rem; font-weight: 700; letter-spacing: -.005em; color: var(--ink);
  background: var(--paper-2);
}
.vs-mini thead th:first-child { border-top-left-radius: var(--r-sm); }
.vs-mini thead th:last-child  { border-top-right-radius: var(--r-sm); }
.vs-mini thead th .vs-mark {
  width: 21px; height: 21px; margin-right: 7px; vertical-align: -5px; display: inline-grid;
}
.vs-mini thead th .vs-mark svg { width: 13px; height: 13px; }
/* .vs-ok is built for the dark field — white on a near-transparent white —
   which is invisible here. On paper the tick takes the instrument cyan. */
.vs-mini thead .vs-ok { background: color-mix(in srgb, var(--data) 15%, transparent); color: var(--data); }

.vs-mini tbody th {
  text-align: left; font-weight: 600; color: var(--text-3);
  font-size: .78rem; padding: 11px 13px; vertical-align: top; white-space: nowrap;
}
.vs-mini td { padding: 11px 13px; vertical-align: top; line-height: 1.5; }
/* Row separation now comes from the border-bottom above, so the old top rules
   would double every join. */
.vs-t { color: var(--text); }
.vs-u { color: var(--ink); font-weight: 600; }
/* On a phone three columns leave 87px for the row label and 125px for the
   rival value, so every cell wrapped to three lines. Below 560px the table
   stops being a grid and becomes one labelled block per row: the attribute
   heading moves into each cell via data-th, and the ACTCAD answer keeps its
   tint so the comparison still reads at a glance. */
@media (max-width: 560px) {
  .vs-mini { font-size: .88rem; border-radius: var(--r-sm); overflow: hidden; }
  .vs-mini thead { display: none; }
  .vs-mini tbody, .vs-mini tr, .vs-mini th, .vs-mini td { display: block; width: auto; }

  .vs-mini tr { border-bottom: 1px solid var(--rule); padding: 4px 0 10px; }
  .vs-mini tr:last-child { border-bottom: 0; }

  .vs-mini tbody th {
    white-space: normal; border: 0; padding: 11px 14px 7px;
    font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--text-3);
  }
  .vs-mini td { border: 0; padding: 0 14px 3px; line-height: 1.45; }
  .vs-mini td::before {
    content: attr(data-th) " ";
    font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-3); margin-right: 6px;
  }
  /* The tint has to stop being a full-height column and become a band on the
     one answer that matters, or it would tint half the stacked block. */
  .vs-mini th:nth-child(3), .vs-mini td:nth-child(3) { background: none; }
  .vs-mini td.vs-u {
    background: var(--paper-blue); border-radius: var(--r-sm);
    margin: 5px 10px 0; padding: 8px 10px;
  }
  .vs-mini td.vs-u::before { color: var(--data); }
}

.vs-mini-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: .86rem; font-weight: 600; color: var(--data);
}
.vs-mini-more:hover { color: var(--accent-2); }
.vs-mini-more svg { width: 16px; height: 16px; }


/* ---- inputs that now live on the navy panel -------------------------- */
/* All three controls on one row. The two radios stack inside their own cell,
   which costs no extra height — a stepper with its label is already about as
   tall as two radio lines — so the whole block is one row instead of two. */
.calc-set {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: 14px 26px; align-items: start;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--on-field) 16%, transparent);
}
@media (max-width: 620px) { .calc-set { grid-template-columns: auto 1fr; gap: 14px 20px; } }
@media (max-width: 420px) { .calc-set { grid-template-columns: 1fr; } }

/* Those two breakpoints ask the window how wide it is, but this row lives in
   the right-hand panel, which is already narrow while the window is still
   wide — between 861px and about 1150px the panel is ~460px and the third
   column collapsed to 70px, cutting "Premium vs Full" in half. Ask the panel
   instead of the window, so the row reflows when it actually runs out of room. */
.calc-out { container-type: inline-size; container-name: calcpanel; }
@container calcpanel (max-width: 470px) {
  .calc-set { grid-template-columns: auto 1fr; gap: 14px 20px; }
}
@container calcpanel (max-width: 320px) {
  .calc-set { grid-template-columns: 1fr; }
}
/* Nothing in this row may force the panel wider than its track. */
.calc-set > * { min-width: 0; }

/* fieldset carries browser defaults that would break the grid cell. */
.calc-field-cmp { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc-field-cmp .calc-label { padding: 0; }

.radios { display: grid; gap: 12px; margin-top: 12px; }
.rad {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .86rem; line-height: 1.2;
  color: color-mix(in srgb, var(--on-field) 78%, transparent);
}
.rad:hover { color: var(--on-field); }
.rad input {
  width: 15px; height: 15px; margin: 0; flex-shrink: 0;
  accent-color: var(--data-2);
}
.rad:has(input:checked) { color: var(--on-field); font-weight: 600; }
.calc-out .calc-field label, .calc-out .calc-label { color: color-mix(in srgb, var(--on-field) 66%, transparent); }

.calc-out .stepper {
  border-color: color-mix(in srgb, var(--on-field) 24%, transparent);
  background: color-mix(in srgb, var(--on-field) 8%, transparent);
}
.calc-out .stepper button { color: var(--on-field); height: 38px; width: 36px; }
.calc-out .stepper button:hover { background: color-mix(in srgb, var(--on-field) 14%, transparent); }
.calc-out .stepper input {
  color: var(--on-field); height: 38px; width: 56px; font-size: 1.05rem;
  border-inline-color: color-mix(in srgb, var(--on-field) 24%, transparent);
}
.calc-out .stepper input:focus { background: color-mix(in srgb, var(--on-field) 14%, transparent); }

.calc-out .seg { background: color-mix(in srgb, var(--on-field) 10%, transparent); padding: 3px; }
.calc-out .seg button { color: color-mix(in srgb, var(--on-field) 72%, transparent); padding: 9px 17px; font-size: .88rem; }
.calc-out .seg button:hover { color: var(--on-field); }
.calc-out .seg button.is-on { background: var(--data-2); color: var(--field); }

.calc-out { background: var(--field); color: var(--on-field); padding: 26px 28px 28px; border-radius: var(--r-lg); }
.calc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--on-field) 16%, transparent);
}
.calc-hero-say { min-width: 0; }
.calc-hero .tag { color: var(--on-field); opacity: .7; display: block; margin-bottom: 8px; }
.calc-hero b {
  display: block; font-family: 'Sora', sans-serif;
  font-size: clamp(2.6rem, 1.6rem + 3vw, 3.9rem); line-height: 1;
  letter-spacing: -.025em; color: var(--data-2);
}
.calc-hero i { font-style: normal; font-size: .92rem; opacity: .78; }
.calc-hero-say small {
  display: block; margin-top: 7px; max-width: 34ch;
  font-size: .76rem; line-height: 1.5; opacity: .58;
}
/* ---- cost comparison chart -------------------------------------------
   Two horizontal bars, stacked. The pair was validated rather than eyeballed:
   #DC5257 / #2A9CBF clears the lightness band, the chroma floor, CVD
   separation (ΔE 16.0 deutan, 33.3 tritan), the normal-vision floor (27.8)
   and 3:1 against #0B2545.

   Horizontal because it costs a third of the height of side-by-side columns
   and gives the long product names a full line. Bar length is the true cost
   ratio. Values and names are text colours, never the series colour — the
   fill carries emphasis, the label carries identity. */
.calc-chart { padding: 16px 0 4px; }
.cc-bars { display: grid; gap: 14px; }
.cc-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; }
.cc-name {
  font-size: .8rem; min-width: 0;
  color: color-mix(in srgb, var(--on-field) 74%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-val {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: .95rem;
  letter-spacing: -.02em; color: var(--on-field); white-space: nowrap;
}
.cc-track {
  grid-column: 1 / -1; height: 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--on-field) 10%, transparent);
  overflow: hidden;
}
.cc-fill {
  display: block; height: 100%; border-radius: 5px;
  transition: width .32s cubic-bezier(.22, 1, .36, 1);
}
.cc-them { background: #DC5257; }
.cc-us   { background: #2A9CBF; }
@media (prefers-reduced-motion: reduce) { .cc-fill { transition: none; } }

/* Sits beside the saved amount in .calc-hero, restating it as a proportion. */
.cc-ring {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  border: 2px solid color-mix(in srgb, #2A9CBF 65%, transparent);
}
.cc-ring em {
  display: block; font-style: normal;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.6rem;
  letter-spacing: -.03em; line-height: 1; color: var(--data-2);
}
.cc-ring small {
  font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: color-mix(in srgb, var(--on-field) 66%, transparent);
}
@media (max-width: 420px) {
  .cc-ring { width: 74px; height: 74px; }
  .cc-ring em { font-size: 1.3rem; }
}

.calc-note { margin-top: 16px; font-size: .78rem; opacity: .66; line-height: 1.55; }

/* ---------------------------------------------------------------- FAQ */
/* Two columns: technical on the left, sales on the right. They collapse to
   one below 900px — side-by-side accordions on a phone would leave every
   question wrapping to three lines. */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; align-items: start; }
@media (max-width: 900px) { .faq-cols { grid-template-columns: 1fr; gap: 26px; } }
.faq-col { min-width: 0; }
.faq-col-h {
  font-size: .78rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--data); margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--data) 30%, transparent);
}

.faq { display: grid; gap: 8px; }
.faq-item { background: var(--paper-2); border-radius: var(--r); overflow: hidden; }
.faq-item h3, .faq-item h4 { margin: 0; font-size: inherit; letter-spacing: normal; font-weight: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; border: 0; background: none;
  padding: 16px 20px;
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
}
/* Chevron is a mark, not an action — same instrument colour as every other tick on the page. */
.faq-q svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--data); transition: transform .18s ease; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { padding: 0 20px 18px; }
.faq-a p { margin: 0; font-size: .92rem; line-height: 1.62; }
@media (max-width: 560px) { .faq-q { padding: 15px 16px; font-size: .95rem; } .faq-a { padding: 0 16px 16px; } }

/* ------------------------------------------------------------ trial popover
   Opened by "Start Free Trial" in the nav. Fixed to the top right rather than
   absolutely positioned against the button, because on the homepage the nav
   itself is absolute over the hero and would clip a dropdown. */
.trialpop {
  position: fixed; z-index: 240;
  top: 88px; right: 22px;
  width: min(330px, calc(100vw - 28px));
  padding: 18px 20px 20px;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.trialpop.on { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .trialpop { transition: none; }
}

/* Little pointer up towards the button that opened it. */
.trialpop::before {
  content: ''; position: absolute; top: -7px; right: 34px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--paper);
  border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
}

.trialpop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.trialpop-head b {
  font-family: 'Sora', sans-serif; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.008em; color: var(--ink);
}
.trialpop-x {
  margin-left: auto; flex-shrink: 0;
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%; color: var(--text-3);
}
.trialpop-x:hover { background: var(--paper-2); color: var(--ink); }
.trialpop-x svg { width: 17px; height: 17px; }
.trialpop-note { margin: 0 0 14px; font-size: .84rem; color: var(--text-3); }

/* One field per row — the hero's two-up layout is far too wide for this. */
.trialpop .c-form { grid-template-columns: 1fr; gap: 9px; }
.trialpop .c-form > button { width: 100%; margin-top: 3px; }
.trialpop .c-field input { padding: 12px 14px; font-size: .95rem; }

.trialpop .form-done { padding: 6px 0 2px; }

@media (max-width: 640px) {
  .trialpop { top: 74px; right: 14px; left: 14px; width: auto; }
  .trialpop::before { right: 26px; }
}