/* site.css — built by build/assets.js from build/assets/css/. Do not edit here. */

/* ═══ 01 · base — carried from the page head, unchanged ═══════════════════════════ */

/* A fixed layer sizes against window.innerWidth, not the layout viewport. When the two
   disagree — a narrowed preview pane reports innerWidth 540 inside a 390px viewport — the
   grain sheet and the header render 150px wider than the page and open a white gutter that
   no in-flow element accounts for. overflow-x:clip on the root removes it; unlike hidden it
   creates no scroll container, so position:sticky keeps working. */
html { background:#fff; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background:#F36F5A; color:#fff; }

/* grain overlay — page chrome, one <div class="grain"> per page */
.grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px; }

/* mesh orbs (masked gradient — zero per-frame filter cost) */
.orb { position:absolute; border-radius:9999px; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle closest-side, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 48%, transparent 74%);
  mask-image:radial-gradient(circle closest-side, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 48%, transparent 74%); }

/* Orb presets. The glows used to carry their size, place and colour in style=""; the set
   is finite, so each recurring glow is a class. Values are the inline ones, verbatim. */
.orb-hero-teal  { width:860px; height:800px; left:-16%;  top:-400px;    background:rgba(44,195,219,.22); }
.orb-hero-coral { width:700px; height:680px; right:-14%; top:-200px;    background:rgba(243,111,90,.13); }
.orb-dark-teal  { width:620px; height:620px; left:-13%;  top:40px;      background:rgba(13,168,194,.12); }
.orb-dark-coral { width:520px; height:520px; right:-10%; bottom:-120px; background:rgba(243,111,90,.10); }

/* The dot field — the texture under a tinted hero and the closing band. A 22px cell with
   a 2×2 rounded square in #DAE7ED, drawn as a CSS background rather than an SVG
   <pattern>: a pattern needs an id, and an id breaks the moment a section is pasted
   twice on one page. Same tile, same origin (the element's top-left), same colour. */
.dot-field { pointer-events:none; background-size:22px 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='2' height='2' rx='0.65' fill='%23DAE7ED'/%3E%3C/svg%3E"); }
.orb-deep-teal  { width:880px; height:820px; left:-14%;  top:-360px;    background:rgba(44,195,219,.20); }
.orb-deep-coral { width:700px; height:680px; right:-12%; bottom:-320px; background:rgba(243,111,90,.12); }
.orb-access-coral { width:820px; height:780px; right:-14%; top:-340px;    background:rgba(243,111,90,.18); }
.orb-access-teal  { width:660px; height:640px; left:-10%;  bottom:-300px; background:rgba(44,195,219,.16); }
.orb-ai-hero-teal     { width:820px; height:760px; left:-14%;  top:-380px;    background:rgba(44,195,219,.22); }
.orb-ai-hero-coral    { width:680px; height:660px; right:-12%; top:-180px;    background:rgba(243,111,90,.14); }
.orb-ai-report-teal   { width:900px; height:820px; left:-16%;  top:-300px;    background:rgba(44,195,219,.20); }
.orb-ai-report-violet { width:720px; height:700px; right:-14%; bottom:-320px; background:rgba(154,106,222,.18); }

/* ═══ 02 · motion — reveal, pen mark, ring mark ═══════════════════════════════════
   Fail-safe by construction. Nothing is hidden unless <html> carries .js-motion, which
   the boot snippet in <head> sets only when scripts run and the reader has not asked for
   reduced motion — and which is taken away again if GSAP or site.js never arrive. So:
     .js-motion      → the hidden start state; site.js animates it in (the approved look)
     no .js-motion   → the static final state (was .no-motion): no JS, reduced motion,
                       a failed script — content is always there.
   :where() keeps every selector at the specificity the old rule had, so the cascade
   against utilities is unchanged. */
:where(.js-motion) .rv { opacity:0; transform:translateY(40px); }
:where(html:not(.js-motion)) .rv { opacity:1 !important; transform:none !important; }
:where(.js-motion) .rv-kids > * { opacity:0; transform:translateY(40px); }
:where(html:not(.js-motion)) .rv-kids > * { opacity:1 !important; transform:none !important; }

/* pen mark — the drawn underline under one word of a heading */
:where(.js-motion) .pen-underline { opacity:0; }
:where(html:not(.js-motion)) .pen-word { color:#DC5A45; }

/* ring mark — the loop round one word of the closing band's heading. Its box (.ring-mark)
   belongs to the band: build/sections/cta-band.css. */
:where(.js-motion) .ring-path { opacity:0; }
:where(html:not(.js-motion)) .ring-word { color:#DC5A45; }

/* ═══ 04 · buttons and numerals ══════════════════════════════════════════════════ */
.btn-press { transition:transform .25s cubic-bezier(.32,.72,0,1), box-shadow .25s ease; }
.btn-press:active { transform:scale(.97); }
/* circle stays put; only the arrow inside rotates 45° counter-clockwise */
.icon-orb svg { transition:transform .35s cubic-bezier(.32,.72,0,1); }
.group:hover .icon-orb svg { transform:rotate(-45deg); }

.nums { font-variant-numeric: tabular-nums; }

/* ═══ 05 · the account screen — sign-in / sign-up tabs ═════════════════════════════
   Behaviour: site.js, module auth-tabs. Values verbatim from the page's former <style>. */
@keyframes authIn { from { opacity:0; transform:translateY(8px); } }
.auth-panel { animation:authIn .3s cubic-bezier(.32,.72,0,1); }
.auth-panel.hidden-panel { display:none; }
@media (prefers-reduced-motion: reduce) { .auth-panel { animation:none; } }
.auth-tab { transition:background-color .25s ease, color .25s ease; }
.auth-tab.active { background:#fff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* ═══ 05 · content pages — Help Center cards, search, rows, the avatar stack ═══════
   The hand-written content pages' components (Help Center, Blog, Why Us, Contact, the
   tools). Values verbatim from their former <style>. They sit before 06-controls-phone,
   as they did in those pages, so the phone size of the search field wins on a phone.
   The pulsing dot is the site's (22-home), one animation on every page. */

/* a card that lifts and tints under the pointer, its arrow nudging on */
.hc-card { transition:background-color .25s ease, transform .25s cubic-bezier(.32,.72,0,1); }
.hc-card:hover { background:#F1F2F6; transform:translateY(-3px); }
.hc-go svg { transition:transform .25s cubic-bezier(.32,.72,0,1); }
.hc-card:hover .hc-go svg { transform:translateX(3px); }
@media (prefers-reduced-motion: reduce) { .hc-card, .hc-go svg { transition:none; } }
@media (prefers-reduced-motion: reduce) { .hc-card:hover { transform:none; } }

/* the Help Center search field */
.hc-search { width:100%; height:56px; padding:0 116px 0 50px; border-radius:9999px;
  border:1px solid #E5E7EB; background:#fff; color:#111827; font-size:15px; font-weight:500;
  transition:border-color .15s ease, box-shadow .15s ease; }
.hc-search::placeholder { color:#9CA3AF; font-weight:400; }
.hc-search:focus { outline:none; border-color:#0CA9C3; box-shadow:0 0 0 1px #0CA9C3; }
.hc-search::-webkit-search-cancel-button { -webkit-appearance:none; }

/* a row in a list of options that tints under the pointer */
.ai-row { transition:background-color .15s ease; }
.ai-row:hover { background:#F2FAFB; }

/* overlapping avatars (Why Us) */
.avatar-stack img { filter: drop-shadow(-1px 0 2px rgba(17,24,39,.07)); }
.avatar-stack img + img { margin-left: -10px; }

/* ═══ 05 · site header — island nav, phone burger, docking ═══════════════════════
   The header is shell, not a section: one per page. Its hooks are data-* all the same,
   so no rule here depends on an id. */
.nav-chev { opacity:.45; transition:transform .2s cubic-bezier(.32,.72,0,1); }
.nav-item:hover .nav-chev, .nav-item:focus-within .nav-chev { transform:rotate(180deg); }
.nav-drop { opacity:0; visibility:hidden; transform:translate(-50%,-6px);
  transition:opacity .2s ease, transform .2s cubic-bezier(.32,.72,0,1), visibility .2s; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity:1; visibility:visible; transform:translate(-50%,0); }
@media (prefers-reduced-motion: reduce) { .nav-drop, .nav-chev { transition:none; } }

/* below lg: burger + panel */
.nav-burger-close { display:none; }
[data-nav-burger][aria-expanded="true"] .nav-burger-open { display:none; }
[data-nav-burger][aria-expanded="true"] .nav-burger-close { display:block; }

.nav-panel { position:absolute; left:1rem; right:1rem; top:100%;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.32,.72,0,1), visibility .22s; }
.nav-panel.open { opacity:1; visibility:visible; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition:none; } }

/* On phones the bar starts as the floating pill every other width has, and DOCKS once
   the page scrolls: flush to the top edge, no side gutters, square corners. Every rule
   here outranks the utilities it overrides, so its place in the cascade (it used to sit
   in the header's own <style>, after Tailwind) makes no difference. */
.site-header { transition: top .28s cubic-bezier(.32,.72,0,1), padding .28s cubic-bezier(.32,.72,0,1); }
.site-header .site-nav { transition: border-radius .28s cubic-bezier(.32,.72,0,1), box-shadow .28s ease, background-color .28s ease; }
@media (max-width: 639px) {
  .site-header.is-docked { top: 0; padding-left: 0; padding-right: 0; }
  .site-header.is-docked .site-nav { border-radius: 0; background-color: rgba(255,255,255,.94);
    box-shadow: 0 1px 0 rgba(17,24,39,.07), 0 8px 24px -16px rgba(17,24,39,.18); }
  .site-header.is-docked [data-nav-panel] { margin-left: .75rem; margin-right: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .site-nav { transition: none; } }

/* ═══ 05 · component recipes — buttons, badge, field, checkbox / radio / chipset ═════
   The recipes the design system specifies (site/design-system.html draws each one).
   Values verbatim from that page's former <style>. They sit before 06-controls-phone,
   whose phone-size overrides for .fld, .ctl and .chip-opt must come after the base rules.
   The button press moves 1px; under reduced motion it does not. */
/* ---------- BUTTON RECIPES ----------
   Heights + padding are the Figma spec (xs 32 / sm 40 / md 48 / lg 56).
   Hover + active bind to deeper palette shades so white text clears WCAG AA —
   the default 500 shades are the brand-locked exception (see Contrast notes). */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em;
       font-weight:600; border-radius:12px; white-space:nowrap; cursor:pointer;
       border:1px solid transparent; user-select:none;
       transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s cubic-bezier(.32,.72,0,1); }
.btn:focus-visible { outline:2px solid #0CA9C3; outline-offset:2px; }
.btn:active { transform:translateY(1px); }
.btn[disabled] { opacity:.4; pointer-events:none; }

.btn-xs { height:32px; padding:0 12px; font-size:13px; }
.btn-sm { height:40px; padding:0 16px; font-size:14px; }
.btn-md { height:48px; padding:0 20px; font-size:15px; }
.btn-lg { height:56px; padding:0 28px; font-size:16px; }

.btn-caps { text-transform:uppercase; font-weight:700; }
.btn-caps.btn-xs { letter-spacing:.08em; }
.btn-caps.btn-sm { letter-spacing:.07em; }
.btn-caps.btn-md { letter-spacing:.055em; }
.btn-caps.btn-lg { letter-spacing:.04em; }

.btn-primary   { background:#F36F5A; color:#fff; }
.btn-primary:hover  { background:#B84431; }
.btn-primary:active { background:#8C2E1F; }

.btn-secondary { background:#fff; color:#111827; border-color:#E5E7EB; }
.btn-secondary:hover  { background:#F8F9FB; border-color:#D1D5DB; }
.btn-secondary:active { background:#F1F2F6; border-color:#9CA3AF; }

.btn-ghost     { background:transparent; color:#374151; }
.btn-ghost:hover  { background:#F1F2F6; color:#111827; }
.btn-ghost:active { background:#E5E7EB; }

.btn-danger    { background:#DC4444; color:#fff; }
.btn-danger:hover  { background:#A32222; }
.btn-danger:active { background:#7C1717; }

.btn-dark      { background:#111827; color:#fff; }
.btn-dark:hover  { background:#1F2937; }
.btn-dark:active { background:#0A0E1A; }

.btn-teal      { background:#0CA9C3; color:#fff; }
.btn-teal:hover  { background:#06748A; }
.btn-teal:active { background:#045566; }

/* ---------- badge ---------- */
.badge { display:inline-flex; align-items:center; gap:.35em; border-radius:999px; font-weight:700;
         text-transform:uppercase; white-space:nowrap; }
.badge-sm { height:20px; padding:0 8px; font-size:9.5px; letter-spacing:.09em; }
.badge-md { height:26px; padding:0 11px; font-size:11px; letter-spacing:.07em; }

/* ---------- input ---------- */
.fld { width:100%; border-radius:8px; border:1px solid #E5E7EB; background:#fff; color:#111827;
       font-weight:500; transition:border-color .15s ease, box-shadow .15s ease; }
.fld::placeholder { color:#9CA3AF; font-weight:400; }
.fld-sm { height:40px; padding:0 12px; font-size:14px; }
.fld-md { height:48px; padding:0 14px; font-size:15px; }
.fld-lg { height:56px; padding:0 16px; font-size:16px; }
.fld:focus { outline:none; border-color:#0CA9C3; box-shadow:0 0 0 1px #0CA9C3; }
.fld-error { border-color:#DC4444; box-shadow:0 0 0 1px #DC4444; }
.fld[disabled] { background:#F1F2F6; color:#9CA3AF; cursor:not-allowed; }

/* ================= CONTROLS · checkbox, radio, groups =================
   The native box is replaced, not hidden: appearance:none keeps the real input
   in the layout, so the label, keyboard focus and :checked state all still work. */
.ck, .rd { appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:18px; height:18px; border:1.5px solid #D1D5DB; background-color:#fff; cursor:pointer;
  background-repeat:no-repeat; background-position:center;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ck { border-radius:5px; }
.rd { border-radius:50%; }
.ck:hover, .rd:hover { border-color:#9CA3AF; }
.ck:checked { background-color:#0991A8; border-color:#0991A8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E"); background-size:12px 12px; }
.rd:checked { background-color:#0991A8; border-color:#0991A8;
  background-image:radial-gradient(circle at center, #fff 0 3px, transparent 3.5px); }
.ck:focus-visible, .rd:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(12,169,195,.28); }
.ck[disabled], .rd[disabled] { background-color:#F1F2F6; border-color:#E5E7EB; cursor:not-allowed; }
.ck[disabled]:checked, .rd[disabled]:checked { background-color:#D1D5DB; border-color:#D1D5DB; }

/* the clickable row — the whole label is the hit area, not just the 18px box */
.ctl { display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:14px; font-weight:500; color:#374151; }
.ctl.ctl-top { align-items:flex-start; }
.ctl.ctl-top .ck, .ctl.ctl-top .rd { margin-top:1px; }
.ctl:has(input[disabled]) { cursor:not-allowed; color:#9CA3AF; }

/* quiet group — a plain list of options */
.ctl-group { display:flex; flex-direction:column; gap:2px; }
.ctl-group > .ctl { padding:8px 10px; border-radius:10px; transition:background-color .15s ease; }
.ctl-group > .ctl:hover { background:#F8F9FB; }

/* boxed group — for a prominent either/or, where the option itself is the target */
.ctl-group-boxed { display:flex; flex-direction:column; gap:8px; }
.ctl-group-boxed > .ctl { padding:14px 16px; border-radius:12px; border:1px solid #E5E7EB;
  background:#fff; transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.ctl-group-boxed > .ctl:hover { border-color:#D1D5DB; }
.ctl-group-boxed > .ctl:has(input:checked) { border-color:#0CA9C3; box-shadow:0 0 0 1px #0CA9C3; background:#F8FDFE; }

/* chipset — compact single-choice pills; radio semantics, no visible box */
.chipset { display:flex; flex-wrap:wrap; gap:8px; }
.chip-opt { position:relative; display:inline-flex; cursor:pointer; }
.chip-opt input { position:absolute; opacity:0; width:0; height:0; }
.chip-opt span { display:inline-flex; align-items:center; height:32px; padding:0 12px;
  border-radius:9999px; background:#F1F2F6; color:#4B5563; font-size:12px; font-weight:600;
  transition:background-color .2s ease, color .2s ease, box-shadow .15s ease; }
.chip-opt:hover span { background:#E5E7EB; color:#111827; }
.chip-opt input:checked + span { background:#0A0E1A; color:#fff; }
.chip-opt input:focus-visible + span { box-shadow:0 0 0 3px rgba(12,169,195,.35); }
.chip-opt input[disabled] + span { background:#F8F9FB; color:#D1D5DB; cursor:not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .ck, .rd, .ctl-group > .ctl, .ctl-group-boxed > .ctl, .chip-opt span { transition:none; }
}

@media (prefers-reduced-motion: reduce) { .btn:active { transform:none; } }

/* the field as a textarea: grows, and pads top and bottom */
textarea.fld { height:auto; padding:12px 14px; resize:vertical; min-height:96px; }

/* stepper — a number field between − and + (VIP). Phone sizes: 06-controls-phone.
   Behaviour: site.js, module stepper. */
.stepper { display:flex; align-items:stretch; height:48px; border-radius:8px; border:1px solid #E5E7EB;
  background:#fff; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease; }
.stepper:focus-within { border-color:#0CA9C3; box-shadow:0 0 0 1px #0CA9C3; }
.stepper input { flex:1 1 0; min-width:0; border:0; outline:none; background:transparent; text-align:center;
  font-size:15px; font-weight:500; color:#111827; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stepper input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.step-btn { width:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#4B5563;
  transition:background-color .15s ease, color .15s ease; }
.step-btn:hover { background:#F8F9FB; }
.step-btn:active { background:#F1F2F6; }

/* ═══ 05 · the free tools — Readability, Spell Check, Paper Analysis, the old checker ══
   Values verbatim from the tool pages' former <style>. They sit before 06-controls-phone,
   as they did in those pages, so the phone sizes there win on a phone.
   One name changed so it cannot meet a site component of the same name: the steps rail
   is .step-rail (.rail is the Moodle guide's sticky rail). */

/* the pricing matrix rows, the recommended cell ringed */
.pm-row { transition:background-color .15s ease; }
.pm-row:hover { background:#F2FAFB; }
.pm-best { position:relative; }
.pm-best::after { content:''; position:absolute; inset:0; border:1.5px solid #2CC3DB;
  border-radius:14px; pointer-events:none; }

/* passages marked in a sample text */
.hl { background-repeat:no-repeat; border-radius:.25em; padding:.05em .1em; margin:-.05em -.1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hl-long    { background-image:linear-gradient(rgba(243,111,90,.16), rgba(243,111,90,.16)); color:#B84431; font-weight:600; }
.hl-passive { background-image:linear-gradient(rgba(154,106,222,.18), rgba(154,106,222,.18)); color:#6D3FB0; font-weight:600; }
.hl-term    { background-image:linear-gradient(rgba(12,169,195,.14), rgba(12,169,195,.14)); color:#06748A; font-weight:600; }

/* a metric with its bar */
.mt-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.mt-bar { height:6px; border-radius:9999px; background:#F1F2F6; overflow:hidden; }
.mt-bar i { display:block; height:100%; border-radius:9999px; }

/* Readability */
.rc-area { width:100%; border:0; outline:none; background:transparent; resize:vertical;
  min-height:132px; font-size:15px; line-height:1.6; font-weight:500; color:#111827; }
.rc-area::placeholder { color:#9CA3AF; font-weight:400; }
.rc-scale { position:relative; height:8px; border-radius:9999px; overflow:hidden;
  background:linear-gradient(90deg,#B84431 0%,#F36F5A 30%,#F3B45A 50%,#5ED2A0 72%,#2AA46C 100%); }
.rc-needle { position:absolute; top:-4px; width:4px; height:16px; border-radius:9999px;
  background:#0A0E1A; box-shadow:0 0 0 2px #fff; transform:translateX(-2px);
  transition:left .35s cubic-bezier(.32,.72,0,1); }
:where(html:not(.js-motion)) .rc-needle { transition:none; }
.rc-stat { display:flex; flex-direction:column; gap:2px; }
.rc-stat b { font-size:19px; font-weight:800; letter-spacing:-0.035em; line-height:1; }
.rc-stat span { font-size:11px; font-weight:600; color:#9CA3AF; }
/* Readability v2: the drop zone (site.js, module readability, [data-rc-drop]) — the
   checker's dashed zone (.qc-drop), lit while a file is over it */
.rc-drop.is-over, .sp-drop.is-over { border-style:solid; border-color:#0CA9C3; background:#E8F8FB; box-shadow:0 0 0 4px rgba(12,169,195,.14); }

/* Spell Check */
.sp-area { width:100%; border:0; outline:none; background:transparent; resize:vertical;
  min-height:190px; font-size:15px; line-height:1.7; font-weight:500; color:#111827; }
.sp-area::placeholder { color:#9CA3AF; font-weight:400; }
.sp-select { height:38px; padding:0 34px 0 12px; border-radius:10px; border:1px solid #E5E7EB;
  background:#fff; font:inherit; font-size:12.5px; font-weight:600; color:#111827;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:13px; }
.sp-select:focus { outline:none; border-color:#0CA9C3; box-shadow:0 0 0 3px rgba(12,169,195,.15); }
.sp-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:5px 0; font-size:12.5px; }
.sp-row span, .sp-row dt { color:#6B7280; }
.sp-row dd { margin:0; }
.sp-row b { font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; color:#111827; }
.sp-col-h { font-size:10px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:#9CA3AF; margin-bottom:8px; }
.sp-locked { position:relative; }
.sp-locked .sp-row b { color:#D1D5DB; }

/* Paper Analysis */
.pa-drop { border:1.5px dashed #A7E3ED; border-radius:16px; background:#F8FDFE;
  transition:border-color .2s ease, background-color .2s ease; }
.pa-drop:hover, .pa-drop.drag { border-color:#2CC3DB; background:#F0FAFC; }
.pa-drop:focus-within { border-color:#0CA9C3; box-shadow:0 0 0 3px rgba(12,169,195,.15); }
.pa-select { width:100%; height:42px; padding:0 36px 0 14px; border-radius:12px;
  border:1px solid #E5E7EB; background:#fff; font:inherit; font-size:13.5px; font-weight:600;
  color:#111827; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; }
.pa-select:focus { outline:none; border-color:#0CA9C3; box-shadow:0 0 0 3px rgba(12,169,195,.15); }
.pa-step { display:flex; align-items:center; height:42px; border-radius:12px; border:1px solid #E5E7EB;
  background:#fff; overflow:hidden; }
.pa-step:focus-within { border-color:#0CA9C3; box-shadow:0 0 0 3px rgba(12,169,195,.15); }
.pa-step button { width:34px; height:100%; flex:none; font-size:16px; font-weight:700; color:#6B7280;
  background:none; border:0; cursor:pointer; transition:color .15s ease, background-color .15s ease; }
.pa-step button:hover { color:#111827; background:#F1F2F6; }
.pa-step input { flex:1; min-width:0; height:100%; border:0; outline:none; text-align:center;
  font:inherit; font-size:13.5px; font-weight:700; color:#111827; -moz-appearance:textfield; }
.pa-step input::-webkit-outer-spin-button, .pa-step input::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0; }

/* numbered steps on one line (Paper Analysis, the old checker) */
.step-rail > li { position:relative; }
.step-rail > li:not(:last-child)::before {
  content:''; position:absolute; left:38px; top:56px; bottom:-12px; width:2px;
  background:#E5E7EB; border-radius:9999px; }
.step-rail > li > :first-child { position:relative; z-index:1; }

/* ═══ 06 · controls on phones ═════════════════════════════════════════════════════
   Carried verbatim from the page head, and in the same place in the cascade: BEFORE the
   component sheets. That order is load-bearing and slightly surprising — a component
   that re-declares a size (08-checker's .qc-chip, .qc-area) wins over the phone size
   here at every width, exactly as it did when these lived in two <style> blocks. Moving
   this block after the components would change the approved phone layout. */
@media (max-width: 639px) {
  .qc-area, .rc-area, .sp-area { font-size: 14px; }
  .fld, .cf-field { height: 44px; font-size: 14px; }
  textarea.fld { height: auto; }
  .stepper { height: 44px; }
  .stepper input { font-size: 14px; }
  .stepper button { width: 34px; font-size: 16px; }
  .pa-select { height: 40px; font-size: 13px; }
  .pa-step { height: 40px; }
  .pa-step input { font-size: 13px; }
  .pa-step button { width: 32px; font-size: 15px; }
  .sp-select { height: 36px; font-size: 12px; }
  .qc-chip { height: 34px; font-size: 12px; padding: 0 12px; }
  .chip-opt span { height: 30px; font-size: 11.5px; padding: 0 11px; }
  .rc-stat b { font-size: 17px; }
  .sp-row { font-size: 12px; }
  .hc-search { height: 48px; font-size: 14px; padding: 0 96px 0 44px; }
  .cf-label { font-size: 11.5px; }
  .ctl { font-size: 13.5px; }
}

/* ═══ 07 · focus, anchors, hidden ═════════════════════════════════════════════════ */
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 100px; }

a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
[tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #0CA9C3; outline-offset: 3px; /*border-radius: 4px;*/ }
/* On a dark ground the ring goes light. The ground says so with data-surface="dark" on
   the section (or footer) — not by inference from a colour utility, which would break
   silently the day the section's background class changed. */
[data-surface="dark"] a:focus-visible, [data-surface="dark"] button:focus-visible { outline-color: #6ED7E8; }

/* ═══ 08 · the quick-check form (build/checker.js) ════════════════════════════════ */
.qc-area { width:100%; border:0; outline:none; background:transparent; resize:none;
  font-size:15px; line-height:1.6; font-weight:500; color:#111827; }
.qc-area::placeholder { color:#9CA3AF; font-weight:400; }

.qc-chip { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px;
  border-radius:9999px; background:#F1F2F6; color:#4B5563; font-size:12.5px; font-weight:600;
  transition:background-color .2s ease, color .2s ease; }
.qc-chip:hover { background:#E5E7EB; color:#111827; }
.qc-drop { border:1.5px dashed #A7E3ED; border-radius:16px; background:#F8FDFE;
  transition:border-color .2s ease, background-color .2s ease; }
.qc-drop:hover { border-color:#2CC3DB; background:#F0FAFC; }

/* the two checks */
.sw { width:38px; height:22px; border-radius:999px; background:rgba(16,24,40,.14);
      position:relative; transition:background .25s cubic-bezier(.32,.72,0,1); flex:none; }
.sw::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
      border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.3);
      transition:transform .25s cubic-bezier(.32,.72,0,1); }
.sw.on { background:#0D9488; }
.sw.on::after { transform:translateX(16px); }
@media (prefers-reduced-motion: reduce) { .sw, .sw::after { transition:none; } }

/* ═══ 08b · the quick-check form · states ════════════════════════════════════════════
   The states the form can be in, drawn on the design-system page (Checker states). No
   page ships them yet: the binding to the production checker toggles these classes
   (is-focus / is-near / is-over / is-armed / is-disabled / is-reading / is-ready /
   is-error / is-busy). Every property a state changes lives here, not in a utility on
   the same element, so a state class never loses to a utility. Values verbatim. */
/* focus: the field has no border of its own, so the card carries the ring */
.qc-shell { outline:2px solid transparent; outline-offset:-1px; transition:outline-color .15s ease; }
.qc-shell:has(.qc-area:focus), .qc-shell.is-focus { outline-color:#0CA9C3; }

/* input chips */
.qc-chip:focus-visible, .qc-chip.is-focus { outline:2px solid #0CA9C3; outline-offset:2px; }
.qc-chip.is-active { background:#111827; color:#fff; }
.qc-chip[aria-disabled="true"] { background:#F8F9FB; color:#C4C8CF; cursor:not-allowed; }
.qc-chip[aria-disabled="true"] img { opacity:.4; filter:grayscale(1); }

/* the word count: quiet, amber from 90% of the free limit, orange-700 past it */
.qc-count { font-size:12px; font-weight:500; color:#9CA3AF; transition:color .2s ease; }
.qc-count.is-near { color:#B45309; }
.qc-count.is-over { color:#B84431; font-weight:700; }

/* the drop zone: armed while a file is dragged anywhere over the page, over when it
   is dragged onto the zone, disabled when the batch is full */
.qc-drop-icon { width:40px; height:40px; border-radius:12px; flex:none; display:flex; align-items:center;
  justify-content:center; background:#fff; color:#0991A8; box-shadow:0 0 0 1px rgba(0,0,0,.05);
  transition:transform .25s cubic-bezier(.32,.72,0,1), background-color .2s ease, color .2s ease; }
.qc-drop-title { display:block; font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:#111827; }
.qc-drop-hint { display:block; font-size:12px; color:#6B7280; }
.qc-drop.is-armed { border-color:#2CC3DB; background:#F0FAFC; }
.qc-drop.is-over { border-style:solid; border-color:#0CA9C3; background:#E8F8FB; box-shadow:0 0 0 4px rgba(12,169,195,.14); }
.qc-drop.is-over .qc-drop-icon { background:#0CA9C3; color:#fff; transform:translateY(-2px); }
.qc-drop.is-disabled, .qc-drop.is-disabled:hover { border-color:#E5E7EB; background:#F8F9FB; cursor:not-allowed; }
.qc-drop.is-disabled .qc-drop-icon { background:#F1F2F6; color:#9CA3AF; box-shadow:none; }
.qc-drop.is-disabled .qc-drop-title { color:#6B7280; }
.qc-drop:focus-visible { outline:2px solid #0CA9C3; outline-offset:2px; }

/* files: one row per file, the state in the row, the error under the name */
.qc-files { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.qc-files-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12px; font-weight:600; color:#6B7280; font-variant-numeric:tabular-nums; }
.qc-files-head button { font-weight:700; color:#374151; text-decoration:underline; text-decoration-color:#D1D5DB; text-underline-offset:3px; }
.qc-files-head button:hover { color:#111827; }
.qc-file { position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; min-height:60px;
  padding:10px 10px 10px 12px; border-radius:14px; background:#F8F9FB; box-shadow:inset 0 0 0 1px rgba(17,24,39,.06); }
.qc-file-type { flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:#fff; color:#374151;
  box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.qc-file-type[data-ext="pdf"] { background:#FEF4F1; color:#B84431; }
.qc-file-type[data-ext="doc"], .qc-file-type[data-ext="docx"] { background:#E8F8FB; color:#06748A; }
.qc-file-type[data-ext="ppt"], .qc-file-type[data-ext="pptx"] { background:#FFFBEB; color:#B45309; }
.qc-file-type[data-ext="xls"], .qc-file-type[data-ext="xlsx"] { background:#EDFAF4; color:#1B7A50; }
.qc-file-body { min-width:0; flex:1; }
.qc-file-name { display:block; font-size:13.5px; font-weight:700; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qc-file-meta { display:flex; align-items:center; gap:6px; margin-top:1px; font-size:12px; font-weight:500; color:#6B7280; font-variant-numeric:tabular-nums; }
.qc-file-meta svg { flex:none; }
.qc-file-msg { display:block; margin-top:2px; font-size:12px; font-weight:500; line-height:1.45; color:#B84431; }
.qc-file-msg a { font-weight:700; text-decoration:underline; text-decoration-color:#F8A392; text-underline-offset:3px; }
.qc-file-ok { color:#2AA46C; }
.qc-file-act { flex:none; display:flex; gap:2px; }
.qc-file-btn { width:32px; height:32px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  color:#6B7280; transition:background-color .15s ease, color .15s ease; }
.qc-file-btn:hover { background:#E5E7EB; color:#111827; }
.qc-file-btn:focus-visible { outline:2px solid #0CA9C3; outline-offset:1px; }
.qc-file-bar { position:absolute; left:0; right:0; bottom:0; height:3px; overflow:hidden; background:rgba(12,169,195,.14); }
.qc-file-bar > i { display:block; height:100%; width:var(--p, 0%); background:#0CA9C3; border-radius:0 3px 3px 0; transition:width .3s ease; }
.qc-file.is-reading .qc-file-bar > i { width:30%; animation:qc-indet 1.3s cubic-bezier(.4,0,.2,1) infinite; }
.qc-file.is-error { background:#FEF4F1; box-shadow:inset 0 0 0 1px #FBC9BF; }
.qc-file.is-error .qc-file-btn:hover { background:#FDE5E0; color:#8C2E1F; }

/* messages: a note sits under what it is about; an alert speaks for the whole form */
.qc-note { display:flex; align-items:flex-start; gap:8px; margin:-4px 0 14px; font-size:12.5px; font-weight:500; line-height:1.5; }
.qc-note svg { flex:none; margin-top:2px; }
.qc-note a { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.qc-note.is-error { color:#B84431; }
.qc-note.is-error a { text-decoration-color:#F8A392; }
.qc-note.is-warn { color:#92400E; }
.qc-note.is-warn a { text-decoration-color:#FCD34D; }
.qc-note.is-info { color:#4B5563; }
.qc-alert { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; padding:12px 12px 12px 14px;
  border-radius:14px; font-size:13px; line-height:1.55; }
.qc-alert > svg { flex:none; margin-top:2px; }
.qc-alert-body { min-width:0; flex:1; }
.qc-alert-title { display:block; font-weight:700; }
.qc-alert-actions { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; }
.qc-alert-actions a, .qc-alert-actions button { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.qc-alert .qc-file-btn { margin:-6px -4px -6px 0; color:inherit; }
.qc-alert .qc-file-btn:hover { background:rgba(17,24,39,.06); color:inherit; }
.qc-alert.is-error { background:#FEF4F1; color:#8C2E1F; box-shadow:inset 0 0 0 1px #FBC9BF; }
.qc-alert.is-error > svg { color:#B84431; }
.qc-alert.is-warn { background:#FFFBEB; color:#78350F; box-shadow:inset 0 0 0 1px #FDE68A; }
.qc-alert.is-warn > svg { color:#B45309; }
.qc-alert.is-info { background:#E8F8FB; color:#045566; box-shadow:inset 0 0 0 1px #A7E3ED; }
.qc-alert.is-info > svg { color:#0991A8; }
.qc-alert.is-success { background:#EDFAF4; color:#1B7A50; box-shadow:inset 0 0 0 1px #B3E9D1; }
.qc-alert.is-success > svg { color:#2AA46C; }

/* the balance alert: a line per check, then the way on under a hairline */
.qc-alert-lines { display:flex; flex-direction:column; gap:2px; }
.qc-alert-lines b { font-weight:800; font-variant-numeric:tabular-nums; }
.qc-alert-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  margin-top:10px; padding-top:10px; border-top:1px solid rgba(140,46,31,.14); }
.qc-alert-foot a:not(.qc-buy) { font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.qc-buy { flex:none; display:inline-flex; align-items:center; gap:10px; height:36px; padding:0 5px 0 14px; border-radius:9999px;
  background:#fff; color:#111827; font-size:13px; font-weight:600; box-shadow:0 0 0 1px #FBC9BF;
  transition:box-shadow .15s ease; }
.qc-buy:hover { box-shadow:0 0 0 1px #F58971; }
.qc-buy:focus-visible { outline:2px solid #0CA9C3; outline-offset:2px; }
.qc-buy-price { display:inline-flex; align-items:center; height:26px; padding:0 9px; border-radius:9999px;
  background:#FEF4F1; color:#8C2E1F; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.qc-file-done { color:#1B7A50; font-weight:600; }
.qc-cta[aria-disabled="true"]:not([aria-busy="true"]) { cursor:not-allowed; }

/* by URL: the field opens under the chips */
.qc-url { display:flex; align-items:center; gap:8px; height:48px; margin-bottom:12px; padding:0 5px 0 14px;
  border-radius:14px; border:1px solid #E5E7EB; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
.qc-url > svg { flex:none; color:#9CA3AF; }
.qc-url input { min-width:0; flex:1; height:100%; border:0; outline:0; background:transparent; font:inherit;
  font-size:14px; font-weight:500; color:#111827; }
.qc-url input::placeholder { color:#9CA3AF; font-weight:400; }
.qc-url:focus-within, .qc-url.is-focus { border-color:#0CA9C3; box-shadow:0 0 0 1px #0CA9C3; }
.qc-url.is-error { border-color:#F58971; box-shadow:0 0 0 1px #F58971; }
.qc-url + .qc-note { margin-top:-6px; }
.qc-url-btn { flex:none; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:10px;
  background:#111827; color:#fff; font-size:13px; font-weight:600; transition:background-color .15s ease; }
.qc-url-btn:hover { background:#1F2937; }
.qc-url-btn[aria-busy="true"] { background:#374151; cursor:progress; }

/* busy: the check is starting — the form holds still, the button says so */
.qc-spin,.animate-spin { display:inline-block; flex:none; width:14px; height:14px; border-radius:9999px;
  border:2px solid currentColor; border-top-color:transparent; animation:qc-spin .8s linear infinite; }
.qc-form.is-busy .qc-area, .qc-form.is-busy .qc-files, .qc-form.is-busy .qc-drop,
.qc-form.is-busy .qc-chip, .qc-form.is-busy label { opacity:.5; pointer-events:none; transition:opacity .2s ease; }
.qc-cta[aria-busy="true"] { cursor:progress; }
.qc-status { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid #F1F2F6;
  font-size:13px; font-weight:600; color:#374151; }
.qc-status.is-done { color:#1B7A50; }
.qc-status a { text-decoration:underline; text-underline-offset:3px; }

@keyframes qc-spin { to { transform:rotate(360deg); } }
@keyframes qc-indet { from { transform:translateX(-100%); } to { transform:translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .qc-spin { animation:none; border-top-color:currentColor; opacity:.5; }
  .qc-file.is-reading .qc-file-bar > i { animation:none; width:100%; opacity:.45; }
  .qc-shell, .qc-drop-icon, .qc-file-bar > i { transition:none; }
}

/* ═══ 09 · the report (build/report.js) ═══════════════════════════════════════════
   Bar widths and legend colours stay in style="" on purpose: they are the report's data,
   not its design, and in production they come from the result. */
.cab-mark { cursor:pointer; transition:background-color .25s ease, box-shadow .25s ease;
  border-radius:.3rem; padding:.08em .16em; margin:-.08em -.16em;
  box-shadow:inset 0 -2px 0 currentColor;
  background-image:linear-gradient(var(--wash), var(--wash));
  background-repeat:no-repeat; background-position:left center; background-size:100% 100%; }
.cab-plag { --wash:rgba(243,111,90,.18); color:rgba(243,111,90,.85); }
.cab-ai   { --wash:rgba(168,85,247,.15); color:rgba(168,85,247,.75); }
.cab-plag.on { --wash:rgba(243,111,90,.4); }
.cab-ai.on   { --wash:rgba(168,85,247,.34); }
.cab-mark > span { color:#111827; }
.cab-src.on { background:#F8F9FB; }
.cab-tab { padding-bottom:10px; border-bottom:2px solid transparent; color:#4B5563; }
.cab-tab.on { color:#06748A; border-bottom-color:#0991A8; }
.cab-sources, .cab-foot { border-bottom-left-radius:1rem; border-bottom-right-radius:1rem; }
@media (min-width:640px) {
  .cab-sources, .cab-foot { border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
}
@media (min-width:1024px) {
  .cab-sources, .cab-foot { border-bottom-left-radius:1.5rem; border-bottom-right-radius:1.5rem; }
}
.cab-sources::after { content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%); }
@media (prefers-reduced-motion: reduce) { .cab-mark { transition:none; } }

/* The pass (site.js, module report-pass): the wash behind the scan line. Wider and
   stronger than a thin band, in the brand blue, with four stops so the falloff tapers. */
.cab-beam { background-image:linear-gradient(to bottom,
  rgba(13,168,194,.22) 0%, rgba(13,168,194,.13) 38%,
  rgba(13,168,194,.05) 70%, rgba(13,168,194,0) 100%); }

/* ═══ 12 · a row of institution marks (UA: .uni) ══════════════════════════════════
   The approved assets are 213×90 plates that already carry their own light ground, so
   the plate IS the tile: no second box around it, never scaled above its own size, and
   one quiet tone until it is pointed at. */
.uni li { display:flex; align-items:center; justify-content:center; }
.uni img { display:block; width:100%; max-width:213px; height:auto; aspect-ratio:213/90; border-radius:14px;
  filter:grayscale(1); opacity:.85; transition:filter .3s ease, opacity .3s ease; }
.uni li:hover img { filter:none; opacity:1; }
@media (prefers-reduced-motion: reduce) { .uni img { transition:none; } }

/* ═══ 13 · cells sharing one sheet (UA: the four source cells) ═══════════════════ */
.cells > div { border-top:1px solid #EEF0F3; }
.cells > div:first-child { border-top:0; }
@media (min-width:768px) {
  .cells > div:nth-child(2) { border-top:0; }
  .cells > div:nth-child(even) { border-left:1px solid #EEF0F3; }
}

/* ═══ 14 · forms — the site's field recipe: labels and fields ═══════════════════════
   .cf-label / .cf-field, shared by every form: the library's inquiry form
   (build/sections/inquiry-form.js — Business, University, API) and the forms that are
   not library sections (Contact, Account, the Scholarship application). The inquiry
   form's own parts, its multi-select chips among them, live with the component:
   build/sections/inquiry-form.css.
   After 06-controls-phone on purpose: .cf-field and .cf-label re-declare the sizes that
   block sets on phones, and the approved pages have always shown these (48px fields,
   12px labels) at every width. */

/* the form fields */
.cf-label { display:block; font-size:12px; font-weight:700; letter-spacing:.01em; color:#4B5563; margin-bottom:7px; padding:0; }
.cf-label i { font-style:normal; color:#B84431; }
.cf-field { width:100%; height:48px; padding:0 14px; border-radius:10px; border:1px solid #E5E7EB;
  background:#fff; color:#111827; font-size:14.5px; font-weight:500; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease; }
.cf-field::placeholder { color:#9CA3AF; font-weight:400; }
.cf-field:focus { outline:none; border-color:#0CA9C3; box-shadow:0 0 0 1px #0CA9C3; }
textarea.cf-field { height:auto; padding:12px 14px; line-height:1.6; resize:none; }
select.cf-field { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

/* dashed rings: Tailwind's ring is a shadow and cannot dash, so these are borders */
.ring-dashed { box-shadow:none !important; border:1px dashed currentColor; }
.ring-dashed.ring-ink-300 { border-color:#D1D5DB; }
.ring-dashed.ring-teal-300 { border-color:#6ED7E8; }

/* ═══ 16 · the comparison table (Turnitin Alternative: .cmp) ══════════════════════
   One white sheet inside the bezel; the two product columns are the same width and the
   same ground. Under 768px every row becomes a card and each cell names its product. */
.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; }
.cmp { border-collapse:separate; border-spacing:0; background:#fff; border-radius:18px; overflow:hidden; table-layout:fixed; }
.cmp th, .cmp td { vertical-align:top; padding:20px 24px; border-bottom:1px solid #EEF0F3; }
.cmp thead th { background:#F8F9FB; padding-top:16px; padding-bottom:16px; vertical-align:middle; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:0; }
.cmp .cmp-topic { width:22%; }
.cmp td + td, .cmp thead th + th + th { border-left:1px solid #EEF0F3; }
.cmp td, .cmp thead th + th { border-left:1px solid #EEF0F3; }
@media (min-width:1024px) { .cmp { border-radius:24px; } .cmp th, .cmp td { padding:24px 28px; } }
@media (max-width:767px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display:block; width:auto; }
  .cmp { background:transparent; border-radius:0; overflow:visible; }
  .cmp thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .cmp tbody tr { background:#fff; border-radius:16px; overflow:hidden; }
  .cmp tbody tr + tr { margin-top:8px; }
  .cmp .cmp-topic { width:auto; background:#F8F9FB; padding:14px 18px; border-bottom:1px solid #EEF0F3; }
  .cmp td { padding:16px 18px; border-left:0 !important; }
  .cmp tbody tr td:last-child { border-bottom:0; }
  .cmp tbody tr:last-child td { border-bottom:1px solid #EEF0F3; }
  .cmp tbody tr:last-child td:last-child { border-bottom:0; }
  .cmp td::before { content:attr(data-label); display:block; margin-bottom:6px;
    font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#6B7280; }
}

/* ═══ 17 · pricing periods (build/pricing.js, 60-pricing.js) ═════════════════════ */
.period-btn { transition:background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.period-btn.active { background:#fff; color:#111827; box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* the "Recurring payments" switch (60-pricing.js, input[data-recurring]): a 36×20 track,
   teal when on; dimmed and inert on One-time, which cannot recur */
.pr-switch { cursor:pointer; transition:opacity .2s ease; }
.pr-switch-track { position:relative; flex:none; width:36px; height:20px; border-radius:9999px; background:#D1D5DB;
  transition:background-color .2s ease; }
.pr-switch-track::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:9999px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .2s ease; }
.pr-switch input:checked + .pr-switch-track { background:#0991A8; }
.pr-switch input:checked + .pr-switch-track::after { transform:translateX(16px); }
.pr-switch input:focus-visible + .pr-switch-track { outline:2px solid #0CA9C3; outline-offset:2px; }
.pr-switch:has(input:disabled) { opacity:.45; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce) { .pr-switch-track, .pr-switch-track::after { transition:none; } }

/* ═══ 18 · the AI package selector (Pricing: .ai-opt) and the lifting card ════════
   One radio group; the checked row fills and its dot ticks. The rows are labels, so the
   whole row is the target; focus lands on the hidden radio and the ring is drawn on the
   row. */
.ai-opt { transition:background-color .15s ease; }
.ai-opt:hover { background:#F2FAFB; }
.ai-opt.on { background:#E6F4F7; }
.ai-opt .ai-dot { background:#fff; transition:background-color .15s ease, box-shadow .15s ease; }
.ai-opt .ai-dot svg { opacity:0; }
.ai-opt.on .ai-dot { background:#0991A8; box-shadow:inset 0 0 0 1px #0991A8; }
.ai-opt.on .ai-dot svg { opacity:1; }
.ai-opt:has(input:focus-visible) { outline:2px solid #6ED7E8; outline-offset:-2px; }

/* a card that lifts a little under the pointer */
.spotlight { transition:transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s ease; }
.spotlight:hover { transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .spotlight { transition:none; } .spotlight:hover { transform:none; } }

/* ═══ 19 · the code block — language tabs, Copy, panels (API) ════════════════════
   "Code text must remain readable; horizontal scrolling inside the code container is
   preferred to shrinking text or changing code semantics." So the pre scrolls in its
   own box and the page never gains a horizontal scrollbar. Without JS every panel shows:
   the tabs cannot switch, so no sample is locked behind one. */
.code-tab { padding:7px 13px; border-radius:9999px; font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.5); transition:background-color .2s ease, color .2s ease; }
.code-tab:hover { color:rgba(255,255,255,.8); }
.code-tab.on { background:rgba(255,255,255,.1); color:#fff; }
.code-copy { padding:7px 13px; border-radius:9999px; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.45); transition:background-color .2s ease, color .2s ease; }
.code-copy:hover { background:rgba(255,255,255,.08); color:#fff; }
.code-panel { display:none; }
.code-panel.on { display:block; }
:where(html:not(.js)) .code-panel { display:block; }
.code-pre { overflow-x:auto; padding:18px 16px 16px; margin:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; line-height:1.75; color:rgba(255,255,255,.82);
  -webkit-overflow-scrolling:touch; }
.code-pre::-webkit-scrollbar { height:6px; }
.code-pre::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:3px; }
@media (min-width:640px) { .code-pre { padding:22px 20px 18px; font-size:13px; } }

/* ═══ 20 · the AI example and its placeholders (AI Detector) ═════════════════════
   The AI-marked passage of the example report. Named .ai-hl / .ai-hl-on, not .hl-ai /
   .on-ai: the homepage's scan scene uses those names for a different highlight, and in
   one shared sheet the two would bleed into each other. Values verbatim. */
.bg-ai-mark { background:rgba(154,106,222,.85); }
.ai-hl { background:rgba(154,106,222,.22); border-radius:.35rem; padding:.05em .18em; margin:-.05em -.18em;
  box-shadow:inset 0 -2px 0 rgba(154,106,222,.5);
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.ai-hl-on { color:#6D3FB0; }

/* redacted text: Flow Circular renders text as bars */
.font-flow { font-family:'Flow Circular', cursive; }

/* a placeholder the brief leaves open, drawn as a dashed box */
.ph { border:1px dashed rgba(16,24,40,.22); border-radius:.5rem; }
.ph-dark { border:1px dashed rgba(255,255,255,.24); border-radius:.5rem; }

/* package cards: a radio row that fills when chosen (AI Detector pricing) */
.pkg { transition:background-color .2s ease, box-shadow .2s ease; }
.pkg:hover { background:#F8F9FB; }
.pkg:has(input:checked) { background:#E8F8FB; box-shadow:inset 0 0 0 1.5px #0CA9C3; }
.pkg:has(input:checked) .pkg-dot { border-color:#0CA9C3; }
.pkg:has(input:checked) .pkg-dot::after { content:''; width:8px; height:8px; border-radius:9999px; background:#0CA9C3; }
.pkg:has(input:focus-visible) { box-shadow:inset 0 0 0 2px #0CA9C3, 0 0 0 3px rgba(12,169,195,.25); }

/* ═══ 21 · documentation devices (Moodle Integration guide) ═══════════════════════
   The reading column and everything set inside it: Moodle's own words, definition
   tables, the at-a-glance sheet, numbered steps, the schematic, evidence figures, the
   file/online-text matrix, troubleshooting, the rail and the jump menu — and the hero's
   link drawing. Values verbatim from the page's former <style>.

   Anchors. The guide's anchors clear the site header, and under lg the jump menu beneath
   it: 104px, and 132px under lg. (The page's own 132px rule for a .doc-section once lost
   on specificity to section[id], so a heading reached from the jump menu sat under it on
   a phone; fixed 2026-09-30.) */
.doc-section[id], .doc-sub[id] { scroll-margin-top: 104px; }
@media (max-width:1023px) { .doc-section[id], .doc-sub[id] { scroll-margin-top: 132px; } }

/* ---------- the hero link: two marks, two straight tracks, the plugin between ----------
   One 340×330 box; tiles, the pill and the side labels are placed in percentages of it,
   so they meet the SVG tracks at every size. */
.hero-link { position:relative; width:100%; max-width:340px; aspect-ratio:340/330; margin:0 auto; }
.hero-link > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hero-link-tile { position:absolute; display:flex; align-items:center; justify-content:center; border-radius:20px;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 18px 40px -22px rgba(16,24,40,.28); }
.hero-link-tile.is-top { left:14.7%; top:0; width:70.6%; height:29.1%; }
.hero-link-tile.is-bottom { left:14.7%; top:70.9%; width:70.6%; height:29.1%; }
.hero-link-tile img { display:block; width:72%; height:auto; }
.hero-link-plug { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px 0 11px;
  border-radius:999px; background:#111827; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 0 0 5px rgba(242,252,252,.9), 0 10px 24px -10px rgba(16,24,40,.5); }
.hero-link-side { position:absolute; left:67.65%; top:50%; transform:translate(12px,-50%); max-width:92px; font-size:12px; font-weight:600; line-height:1.3; color:#374151; }
.hero-link-side.is-left { left:32.35%; transform:translate(calc(-100% - 12px),-50%); text-align:right; }
@media (max-width:1023px) { .hero-link { max-width:300px; margin:0; } .hero-link-tile { border-radius:16px; } }
@media (prefers-reduced-motion: reduce) { .hero-link-pulse { display:none; } }

/* Moodle's own words */
.ui { font-weight:600; color:#111827; background:#F3F4F6; border-radius:6px; padding:.08em .4em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.bg-orange-50 .ui { background:rgba(184,68,49,.10); }
.bg-teal-50 .ui, .bg-ink-50 .ui, .deftable dt .ui { background:#E9EBEF; }

/* ---------- the reading column ---------- */
.doc-section { display:grid; gap:20px; padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid #EEF0F3; }
.doc-section:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.doc-section > h2 { margin-bottom:4px; }
.doc-sub { display:grid; gap:16px; padding-top:28px; margin-top:8px; border-top:1px dashed #E1E4E9; }
.group-label { margin-top:8px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#B84431; }
@media (min-width:1024px) { .doc-section { gap:22px; padding-bottom:72px; margin-bottom:72px; } }

/* ---------- the definition table ---------- */
.deftable { border-radius:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06); overflow:hidden; background:#fff; }
.deftable-head { display:none; }
.deftable-row { padding:14px 16px; border-top:1px solid #EEF0F3; }
.deftable-row:first-child { border-top:0; }
.deftable dt { font-size:14px; font-weight:700; color:#111827; letter-spacing:-.01em; margin-bottom:6px; }
.deftable dd { font-size:13.5px; line-height:1.6; color:#374151; }
@media (min-width:640px) {
  .deftable-head, .deftable-row { display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:24px; }
  .deftable-head { padding:11px 20px; background:#F8F9FB; border-bottom:1px solid #EEF0F3;
    font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#6B7280; }
  .deftable-row { padding:16px 20px; }
  .deftable dt { margin-bottom:0; font-size:14.5px; }
  .deftable dd { font-size:14.5px; }
}

/* ---------- at a glance ---------- */
.glance-row { display:grid; gap:2px; padding:13px 18px; border-top:1px solid #EEF0F3; }
.glance-row:first-child { border-top:0; }
.glance dt { font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#6B7280; }
.glance dd { font-size:15px; font-weight:700; letter-spacing:-.01em; color:#111827; }
@media (min-width:640px) {
  .glance-row { grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:baseline; padding:14px 24px; }
  .glance dd { font-size:15.5px; }
}

/* ---------- numbered steps on one spine ---------- */
.steps { position:relative; display:grid; gap:16px; counter-reset:none; }
.steps::before { content:""; position:absolute; left:15px; top:16px; bottom:16px; width:1px; background:#E1E4E9; }
.steps > li { position:relative; display:flex; align-items:flex-start; gap:16px; }
.steps-n { position:relative; z-index:1; flex:none; width:31px; height:31px; border-radius:999px; background:#D4F3F8; color:#06748A;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px #fff; }
.steps-tight { gap:12px; }

/* ---------- the schematic ---------- */
.flow { margin:4px 0 0; }
.flow ol { display:grid; gap:22px; }
.flow li { position:relative; }
.flow li span { display:flex; align-items:center; justify-content:center; text-align:center; min-height:56px; padding:10px 12px;
  border-radius:14px; background:#F8F9FB; box-shadow:0 0 0 1px rgba(0,0,0,.06);
  font-size:12.5px; font-weight:600; line-height:1.35; color:#1F2937; }
.flow li.is-ps span { background:#111827; color:#fff; box-shadow:none; }
.flow li + li::before { content:""; position:absolute; left:50%; top:-16px; width:1px; height:10px; background:#9CA3AF; }
.flow li + li::after { content:""; position:absolute; left:50%; top:-9px; width:6px; height:6px; margin-left:-3px;
  border-right:1px solid #9CA3AF; border-bottom:1px solid #9CA3AF; transform:rotate(45deg); }
.flow figcaption, .shot figcaption { margin-top:10px; font-size:12.5px; line-height:1.5; color:#6B7280; }
@media (min-width:768px) {
  .flow ol { grid-template-columns:repeat(5, minmax(0,1fr)); gap:22px; }
  .flow li span { height:100%; min-height:76px; }
  .flow li + li::before { left:-17px; top:50%; width:11px; height:1px; }
  .flow li + li::after { left:-11px; top:50%; margin-left:0; margin-top:-3px; transform:rotate(-45deg); }
}

/* ---------- the evidence figure (its max-width comes from the screenshot's own size) ---------- */
.shot { margin:4px 0 0; width:100%; }
.shot-frame { border-radius:16px; background:#F3F4F6; box-shadow:0 0 0 1px rgba(0,0,0,.06); padding:0 8px 8px; }
.shot-tag { display:flex; align-items:center; gap:5px; height:30px; padding:0 6px; }
.shot-tag span { width:7px; height:7px; border-radius:999px; background:#D1D5DB; }
.shot-tag b { margin-left:8px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6B7280; }
.shot img { display:block; width:100%; height:auto; border-radius:10px; background:#fff; padding:8px 9px; box-shadow:0 0 0 1px rgba(0,0,0,.05); }

/* ---------- file vs online text ---------- */
.matrix { border-top:1px solid #EEF0F3; border-collapse:collapse; font-size:13.5px; }
.matrix th, .matrix td { padding:12px 16px; border-top:1px solid #EEF0F3; vertical-align:top; line-height:1.5; }
.matrix thead th { border-top:0; background:#F8F9FB; font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#6B7280; }
.matrix tbody th { font-weight:700; color:#111827; width:32%; }
.matrix td { color:#1B7A50; font-weight:600; }
@media (min-width:640px) { .matrix { font-size:14.5px; } .matrix th, .matrix td { padding:14px 24px; } }

/* ---------- troubleshooting ---------- */
.trouble { display:grid; gap:12px; }
.trouble > div { border-radius:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06); background:#fff; padding:16px 18px; }
.trouble dt { display:flex; align-items:flex-start; gap:12px; font-size:15px; font-weight:700; letter-spacing:-.01em; color:#111827; }
.trouble-q { flex:none; width:22px; height:22px; border-radius:999px; background:#FDE6E1; color:#B84431; font-size:12.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:1px; }
.trouble dd { margin:10px 0 0 34px; font-size:14px; line-height:1.6; color:#374151; }
@media (min-width:768px) {
  .trouble > div { display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:28px; padding:18px 22px; }
  .trouble dd { margin:0; font-size:14.5px; }
}

/* ---------- the rail and the jump menu (behaviour: site.js, module doc-nav) ---------- */
.rail { position:sticky; top:112px; }
.rail ul { display:grid; border-left:1px solid #E1E4E9; }
.rail-link { display:block; margin-left:-1px; padding:7px 0 7px 16px; border-left:2px solid transparent;
  font-size:13.5px; font-weight:500; color:#6B7280; transition:color .2s ease, border-color .2s ease; }
.rail-link:hover { color:#111827; }
.rail-link.on { color:#111827; font-weight:700; border-left-color:#0991A8; }

.jump { position:sticky; top:68px; z-index:30; margin:0 -16px; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid #EEF0F3; }
@media (min-width:640px) { .jump { margin:0 -24px; top:84px; } }
.jump summary { list-style:none; display:flex; align-items:center; gap:12px; min-height:48px; padding:0 16px; cursor:pointer;
  font-size:13.5px; font-weight:700; color:#111827; }
@media (min-width:640px) { .jump summary { padding:0 24px; } }
.jump summary::-webkit-details-marker { display:none; }
.jump-now { margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:#6B7280; }
.jump-chev { flex:none; transition:transform .25s ease; }
.jump[open] .jump-chev { transform:rotate(180deg); }
.jump nav { padding:4px 8px 12px; }
@media (min-width:640px) { .jump nav { padding:4px 16px 12px; } }
.jump-link { display:flex; align-items:center; min-height:44px; padding:0 8px; border-radius:10px; font-size:14.5px; font-weight:500; color:#374151; }
.jump-link.on { background:#F3F4F6; color:#111827; font-weight:700; }
@media (prefers-reduced-motion: reduce) { .jump-chev, .rail-link { transition:none; } }

/* ═══ 22 · statistics odometer, hero title, pulse dot (homepage) ══════════════════
   Values verbatim from the homepage's former <style> and the donor head.

   Odometer (site.js, module odometer). Every character sits in a box of the same
   height, digits and separators alike, so the comma and the plus keep their line with
   the reels beside them. A reel is twenty cells — ten digits twice — which makes one
   digit exactly 5% of it and the resting offset a percentage rather than a measured
   pixel. The cell is slightly taller than an em: at leading-none an extrabold digit
   sits tight against the box and the clip would shave it. The reel must be a block: a
   transform does not apply to a non-replaced inline element. The page ships the plain
   figure; reels exist only while motion runs. */
.od-num { --od-h:1.15em; }
.od, .od-s { display:inline-block; height:var(--od-h); line-height:var(--od-h); vertical-align:top; }
.od { overflow:hidden; }
.od-r { display:block; }
.od-d { display:block; height:var(--od-h); line-height:var(--od-h); }

/* Hero title (site.js, module hero-title): each word rises out of its own clip. The
   padding makes room for descenders inside the clip, the negative margin gives the
   line its height back. */
.hw { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.22em; margin-bottom:-.22em; }
.hw-in { display:inline-block; }

/* the pulsing dot of a status pill (the closing band's "Free check") */
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }
.pulse-dot { animation:pulse-dot 2.2s ease-in-out infinite; }
/* a reader who asked for less motion gets a still dot (the older pages already did this) */
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation:none; } }

/* ═══ 25 · the modal (build/modal.js) ═════════════════════════════════════════════
   One recipe for every popup. The overlay starts hidden and opens with .is-open (site.js,
   module modal), not only with the hidden attribute, so the card can fade in. Values
   verbatim. */
.md { transition:visibility 0s linear .2s; }
/* A closed modal stays laid out (invisible) so its card can fade out. The shared
   [hidden] rule (07-a11y) is display:none !important, so this one must be too; at
   .md[hidden] it outranks the shared rule for the modal only. */
.md[hidden] { display:flex !important; visibility:hidden; pointer-events:none; }
.md-backdrop { opacity:0; transition:opacity .2s ease; }
.md-card { opacity:0; transform:translateY(8px) scale(.98); transition:opacity .2s ease, transform .25s cubic-bezier(.32,.72,0,1); }
.md.is-open { transition:none; }
.md.is-open .md-backdrop { opacity:1; }
.md.is-open .md-card { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .md-card { transform:none; transition:opacity .15s ease; } }

/* ═══ 26 · the article (build/article.js) and links inside body copy ═══════════════
   The template lifted from the blog post: one centred column and semantic blocks styled
   once. Values verbatim from the report guide's and the newsroom's former <style>. */

/* numbered list: the counter is drawn rather than left to the browser so it can carry
   the article's own type and colour */
.counter { counter-reset: step; }
.counter > li { counter-increment: step; }
.counter > li::before {
  content: counter(step);
  position: absolute; left: 0; top: .1em;
  width: 1.65em; height: 1.65em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #E6F4F7; color: #0991A8;
  font-size: .72em; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* A link inside body copy (the newsroom's items, an article). One weight and one shape;
   the ground picks the colour, because the same paragraphs are printed on white and on
   ink-950 (.on-dark). In an article a long URL may break anywhere rather than overflow
   the column. */
.nl { font-weight:600; text-decoration:underline; text-underline-offset:2px;
      transition:color .2s ease, text-decoration-color .2s ease; }
.nl { color:#06748A; text-decoration-color:rgba(6,116,138,.32); }
.nl:hover { color:#111827; text-decoration-color:rgba(17,24,39,.45); }
.on-dark .nl { color:#6ED7E8; text-decoration-color:rgba(110,215,232,.35); }
.on-dark .nl:hover { color:#fff; text-decoration-color:rgba(255,255,255,.6); }
.article .nl { word-break:break-word; }

/* ═══ 27 · the news archive (Newsroom) ═══════════════════════════════════════════
   Topic chips, the pager and the year anchors. Behaviour: site.js, module news-archive.
   Values verbatim from the page's former <style>. */

/* the scrolling chip row keeps no visible scrollbar; it is a control, not a pane */
.tp-scroll { scrollbar-width:none; -ms-overflow-style:none; }
.tp-scroll::-webkit-scrollbar { display:none; }

/* topic chips — the pricing switcher's shape */
.tp-btn { background:#fff; transition:background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.tp-btn:hover { background:#F1F2F6; }
.tp-btn.active { background:#111827; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.tp-btn.active .tp-n { color:rgba(255,255,255,.62); }

/* the pager */
.pg-step, .pg-num { transition:background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.pg-step:hover:not(:disabled), .pg-num:hover:not(.on) { background:#F1F2F6; color:#111827; }
.pg-step:disabled { opacity:.4; cursor:default; }
.pg-num { min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  font-size:13px; font-weight:600; color:#4B5563; font-variant-numeric:tabular-nums; }
.pg-num.on { background:#111827; color:#fff; box-shadow:none; }
.pg-gap { min-width:20px; text-align:center; color:#9CA3AF; font-size:13px; }

/* a year heading clears the site header and the sticky chip band above it */
.yr-anchor { scroll-margin-top:150px; }

/* the glow behind the latest year */
.orb-news-violet { width:760px; height:700px; right:-12%; top:-280px; background:rgba(154,106,222,.18); }

/* ═══ 28 · testimonials — the "Show more" list and the video facade (Reviews) ══════
   Behaviour: site.js, modules show-more and video.

   Show more: every card is in the HTML. The later ones wait (.more-later) only while
   the script is there to show them — without it, or when the boot fail-safe takes .js
   off, every card shows and the button, which would do nothing, steps aside. */
/* specificity (0,2,0)+ on purpose: site.css loads before tailwind.css, and a card's own
   .flex (0,1,0) would otherwise win and show the card */
html.js .more-later { display:none; }
html:not(.js) [data-show-more-btn] { display:none; }

/* A card's rating, light: build/reviews.js stars() draws ten SVGs per rating, which is
   right for a handful of summaries and ~170 KB for a wall of a hundred cards. This is
   the same row — the same star, ink-200 under orange-500, 14px stars 1px apart — as two
   repeating backgrounds, the lit one clipped to the rating (its width is the data, set
   inline as a percentage, like stars()). */
.rt { position:relative; display:inline-block; width:74px; height:14px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 25.7 24'%3E%3Cpath fill='%23E5E7EB' d='m12 2 2.9 6.26 6.6.83-4.9 4.6 1.3 6.31L12 16.9 6.1 20l1.3-6.31L2.5 9.09l6.6-.83z'/%3E%3C/svg%3E") 0 0 / 15px 14px repeat-x; }
.rt > span { position:absolute; inset:0 auto 0 0; overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 25.7 24'%3E%3Cpath fill='%23F36F5A' d='m12 2 2.9 6.26 6.6.83-4.9 4.6 1.3 6.31L12 16.9 6.1 20l1.3-6.31L2.5 9.09l6.6-.83z'/%3E%3C/svg%3E") 0 0 / 15px 14px repeat-x; }

/* the video facade: a still and a play button until a click asks for the player, so
   the page loads nothing from YouTube that nobody pressed play on */
.vf-thumb { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.vf-frame { display:block; width:100%; aspect-ratio:16/9; border:0; }
.vf-play { transition:transform .35s cubic-bezier(.32,.72,0,1), background-color .3s ease; }
[data-video]:hover .vf-play { transform:scale(1.06); background:#fff; }
[data-video]:focus-visible { outline:2px solid #7FE0EE; outline-offset:3px; }

/* ── Reviews v2 (testimonials-v2.html): each platform's cards in its own manner ──────
   Olex, 2026-09-30: "Trustpilot blocks in Trustpilot's style, SmartCustomer blocks in
   SmartCustomer's". The manner, not the marks: their star rows, avatars and colours,
   no logo drawn. */

/* Trustpilot: a star in a square, green by the score (their scale: 5 #00B67A,
   4 #73CF11, 3 #FFCE00, 2 #FF8622, 1 #FF3722), empty squares #DCDCE6. A part-lit
   square takes its fill from --f, set inline as the data (like .rt's width). */
.tp-stars { display:inline-flex; gap:2px; --tp:#00B67A; }
.tp-stars[data-score="4"] { --tp:#73CF11; }
.tp-stars[data-score="3"] { --tp:#FFCE00; }
.tp-star { width:18px; height:18px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m12 3.2 2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.8l-5.4 2.9 1.2-6-4.5-4.2 6.1-.7z'/%3E%3C/svg%3E") center / 76% no-repeat,
             linear-gradient(90deg, var(--tp) var(--f, 100%), #DCDCE6 var(--f, 100%)); }
.tp-star.is-off { --f:0%; }
.tp-stars.is-lg .tp-star { width:30px; height:30px; }
.tp-stars.is-lg { gap:3px; }

/* SmartCustomer: round-cornered gold stars, empty ones light grey */
.sc-stars { display:inline-flex; gap:2px; }
.sc-star { width:20px; height:20px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFB400' stroke='%23FFB400' stroke-width='1.5' stroke-linejoin='round' d='m12 2.8 2.8 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17l-5.7 3.1 1.2-6.3-4.6-4.4 6.3-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.sc-star.is-off { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DADDE3' stroke='%23DADDE3' stroke-width='1.5' stroke-linejoin='round' d='m12 2.8 2.8 5.8 6.3.8-4.6 4.4 1.2 6.3L12 17l-5.7 3.1 1.2-6.3-4.6-4.4 6.3-.8z'/%3E%3C/svg%3E"); }
.sc-stars.is-lg .sc-star { width:28px; height:28px; }

/* Masonry: CSS columns; a card never splits across two */
.masonry > * { break-inside:avoid; }

/* Marquee (site.js, module marquee): a row runs sideways forever — the real cards, then
   one aria-hidden inert copy, the track moving by exactly half its width. Cards space
   with margin, not gap, so the half is exact. Stops under the pointer, under focus, and
   on the pause button; a reader who asked for less motion gets a still row that scrolls
   by hand, without the copy. */
.mq { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display:flex; width:max-content; align-items:flex-start; animation:mq-left 190s linear infinite; }
.mq-track.is-right { animation-name:mq-right; }
.mq-group { display:flex; align-items:flex-start; }
.mq-group > * { margin-right:16px; }
@keyframes mq-left  { from { transform:translateX(0); }    to { transform:translateX(-50%); } }
@keyframes mq-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.mq:hover .mq-track, .mq:focus-within .mq-track, [data-marquee].is-paused .mq-track { animation-play-state:paused; }
/* with site.js the module drives the rows itself (it can slow down rather than stop) */
[data-marquee].is-driven .mq-track { animation:none; }

/* the cards in a row: one height; the title keeps two lines, the text fades out at the
   foot. The full review opens in the popup (.sc-pop), built from the card itself. */
.sc-card { display:flex; flex-direction:column; height:300px; cursor:default; }
.sc-card:focus-visible { outline:2px solid #1E7FD0; outline-offset:3px; }
.sc-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-clip { flex:1; min-height:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent); }

/* the popup: the same card, whole, fixed over the row, zooming out of its card */
.sc-pop { position:fixed; z-index:60; left:0; top:0; pointer-events:auto;
  transform-origin:var(--ox, 50%) var(--oy, 0); transform:scale(var(--s0, .9)); opacity:0;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), opacity .14s ease; }
.sc-pop.is-open { transform:scale(1); opacity:1; }
.sc-pop .sc-card { height:auto; width:100% !important; box-shadow:0 24px 60px -12px rgba(15,23,42,.28), 0 0 0 1px rgba(15,23,42,.06); }
.sc-pop .sc-title { display:block; -webkit-line-clamp:unset; overflow:visible; }
.sc-pop .sc-clip { overflow:visible; -webkit-mask-image:none; mask-image:none; }
@media (prefers-reduced-motion: reduce) { .sc-pop { transition:opacity .01s; } }
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x:auto; -webkit-mask-image:none; mask-image:none; padding-bottom:8px; }
  .mq-track { animation:none; }
  .mq-group[data-marquee-copy], [data-marquee-toggle] { display:none; }
}

/* the video stage (site.js, module video-stage): the playlist item on stage */
.vs-pick[aria-current="true"] { background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.vs-pick[aria-current="true"] .vs-now { opacity:1; }
.vs-pick:focus-visible { outline:2px solid #7FE0EE; outline-offset:3px; }

/* ═══ 29 · the paper-analysis order form, v2 (Rate my paper v2) ══════════════════════
   Behaviour: site.js, module paper-form. The matrix is plain radios, so the checked cell
   is marked by CSS alone and works without JS. */

/* the matrix: a level column that stays put while the deadlines scroll on a phone */
.pf-table { border-collapse:separate; border-spacing:6px; min-width:560px; width:100%; }
.pf-table th { font-weight:600; }
.pf-table thead th { font-size:12px; color:#6B7280; text-align:center; padding:4px 0 2px; transition:color .2s ease; }
.pf-table tbody th { font-size:13px; color:#374151; text-align:left; white-space:nowrap; padding-right:6px; transition:color .2s ease;
  position:sticky; left:0; z-index:1; background:#fff; }
.pf-table th.is-on { color:#111827; font-weight:800; }
.pf-cell { display:block; cursor:pointer; }
.pf-cell > span { display:flex; align-items:center; justify-content:center; height:44px; border-radius:12px;
  background:#F4F6F8; font-size:14px; font-weight:700; color:#1F2937; font-variant-numeric:tabular-nums;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.pf-cell:hover > span { background:#E8F8FB; box-shadow:inset 0 0 0 1px #A7E3ED; }
.pf-cell input:checked + span { background:#111827; color:#fff; box-shadow:0 6px 16px -6px rgba(17,24,39,.45); }
.pf-cell input:focus-visible + span { outline:2px solid #0CA9C3; outline-offset:2px; }

/* a phone: no sideways scroll — each level's name sits above its six prices, which share
   the width; the deadlines head the lot once */
@media (max-width:639px) {
  .pf-table, .pf-table thead, .pf-table tbody { display:block; min-width:0; }
  .pf-table tr { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
  .pf-table td { display:block; }
  .pf-table thead th:first-child { display:none; }
  .pf-table thead th { font-size:11px; padding-bottom:0; }
  .pf-table tbody th { grid-column:1 / -1; position:static; padding:12px 0 2px; font-size:12.5px; }
  .pf-cell > span { height:40px; border-radius:10px; font-size:12.5px; letter-spacing:-.01em; }
}

/* the services: a whole row is the control */
.pf-service { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:14px; cursor:pointer;
  box-shadow:inset 0 0 0 1px #E5E7EB; transition:background-color .2s ease, box-shadow .2s ease; }
.pf-service:hover { background:#F8FAFB; }
.pf-service:has(input:checked) { background:#F2FCFC; box-shadow:inset 0 0 0 1.5px #0CA9C3; }
.pf-service input { margin-top:3px; width:18px; height:18px; accent-color:#0991A8; flex:none; }

/* the stepper */
.pf-step { display:flex; align-items:center; height:44px; border-radius:12px; box-shadow:inset 0 0 0 1px #E5E7EB; background:#fff; }
.pf-step button { width:40px; height:100%; font-size:18px; font-weight:600; color:#4B5563; }
.pf-step button:hover { color:#111827; }
.pf-step input { width:100%; min-width:0; text-align:center; font-weight:800; font-size:15px; border:0; outline:none; background:transparent; font-variant-numeric:tabular-nums; }

/* the summary lists a service only while its checkbox is on — CSS alone, so it holds without JS */
.pf-sum-line { display:none; }
form:has(#pf-sv1:checked) [data-pf-sum="pf-sv1"],
form:has(#pf-sv2:checked) [data-pf-sum="pf-sv2"],
form:has(#pf-sv4:checked) [data-pf-sum="pf-sv4"] { display:flex; }

.pf-drop.is-over { border-style:solid; border-color:#0CA9C3; background:#E8F8FB; box-shadow:0 0 0 4px rgba(12,169,195,.14); }