/* ==========================================================================
   Fortan Software — marketing site
   --------------------------------------------------------------------------
   The palette, the typefaces and the corner radii are lifted from the product
   itself, so the site and the app read as the same thing. Anyone arriving at
   the demo from here should not feel a seam.

   Fonts are served from this domain rather than fonts.googleapis.com, for the
   same reason the app does it: a <link> to Google Fonts sends every visitor's
   IP address to a third party on every page load. Doing that on a site whose
   pitch is "your data stays on your server" would be a poor look, and it would
   also mean this site needed a consent banner.
   ========================================================================== */

/* --------------------------------------------------------------- Typefaces */

@font-face{
  font-family:'Montserrat'; font-weight:300; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Montserrat-Light.ttf') format('truetype');
}
@font-face{
  font-family:'Montserrat'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Montserrat'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Montserrat-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'Montserrat'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family:'Montserrat'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/Montserrat-Bold.ttf') format('truetype');
}

/* Arial Narrow is the fallback rather than a plain sans, because it is the only
   condensed face reliably present on both Windows and macOS. A non-condensed
   fallback makes the display headings jump dramatically wider if the file is
   ever missing, which is far more noticeable than a slight shape difference. */
@font-face{
  font-family:'Barlow Condensed'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/assets/fonts/BarlowCondensed-Medium.ttf') format('truetype');
}
@font-face{
  font-family:'Barlow Condensed'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
}
@font-face{
  font-family:'Barlow Condensed'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');
}

/* ------------------------------------------------------------------ Tokens */

:root{
  /* Product palette, unchanged from the app's index.html */
  --navy:#1B2B48;
  --navy-deep:#141F35;
  --panel:#243350;
  --panel-2:#2C3C5B;
  --field:#36445E;
  --line:rgba(100,111,131,0.38);
  --line-strong:rgba(100,111,131,0.65);

  --teal:#58C0B3;
  --teal-dark:#3F8C85;
  --teal-light:#A8EFE5;
  --blue:#577EF2;
  --blue-light:#8FABEF;
  --amber:#E1C247;

  --text:#F2F2F2;
  --muted:#CDD0D7;
  --muted-dim:#9BA3B2;
  --heading:#FFFFFF;

  --font-heading:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;

  --wrap:1180px;
  --wrap-narrow:820px;

  --shadow-card:0 1px 2px rgba(0,0,0,0.18), 0 12px 32px rgba(0,0,0,0.22);
  --shadow-lift:0 2px 4px rgba(0,0,0,0.2), 0 24px 56px rgba(0,0,0,0.34);

  --ease:cubic-bezier(0.2,0.7,0.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--navy);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* A fixed layer rather than a body background. On a long page a gradient sized
   to the document renders many times larger than one sized to the viewport,
   and the cost shows up as jank while scrolling. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 12% -5%, rgba(88,192,179,0.09), transparent 62%),
    radial-gradient(900px 640px at 88% 6%, rgba(87,126,242,0.08), transparent 60%);
}

img,svg,video{ max-width:100%; height:auto; display:block; }

/* ------------------------------------------------------------- Type ramp */

h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--heading);
  font-weight:500;
  margin:0 0 0.5em;
  line-height:1.06;
  letter-spacing:0.4px;
}

h1{ font-size:clamp(44px, 6.4vw, 82px); text-transform:uppercase; letter-spacing:0.6px; }
h2{ font-size:clamp(32px, 4vw, 50px); text-transform:uppercase; }
h3{ font-size:clamp(22px, 2.2vw, 28px); }
h4{ font-size:20px; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--teal); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--teal-light); }

strong{ color:var(--heading); font-weight:600; }
code,kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.9em; background:rgba(0,0,0,0.28); border:1px solid var(--line);
  padding:1px 6px; border-radius:5px; color:var(--teal-light);
}

/* The eyebrow above a section heading. Small, spaced, teal. */
.eyebrow{
  font-family:var(--font-heading); font-weight:600; text-transform:uppercase;
  letter-spacing:2.6px; font-size:15px; color:var(--teal);
  margin:0 0 12px; display:block;
}

.lede{
  font-size:clamp(18px,2vw,21px); color:var(--muted);
  font-weight:300; line-height:1.6; max-width:62ch;
}

.muted{ color:var(--muted); }
/* The licence tick box that arms the buy button. */
.buy-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.eula-accept{ font-size:13px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.eula-accept input{ accent-color:var(--teal, currentColor); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.center{ text-align:center; }
.center .lede{ margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------- Layout */

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; width:100%; }
.wrap-narrow{ max-width:var(--wrap-narrow); margin:0 auto; padding:0 24px; }

section{ padding:clamp(64px,8vw,112px) 0; }
section.tight{ padding:clamp(44px,5vw,72px) 0; }

/* Alternating band, to stop a long page reading as one flat colour. */
.band{
  background:linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.012));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section-head{ max-width:70ch; margin:0 0 clamp(36px,4vw,56px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--teal); color:var(--navy-deep); padding:12px 20px;
  font-weight:600; border-radius:0 0 var(--radius-sm) 0;
}
.skip:focus{ left:0; }

/* Consistent, visible focus. Never removed — a keyboard user has no other
   way of knowing where they are. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--teal-light);
  outline-offset:3px;
  border-radius:4px;
}

/* --------------------------------------------------------------- Header */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,31,53,0.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:14px; padding-bottom:14px;
}
.brand img{ height:34px; width:auto; }

.primary-nav{ display:flex; align-items:center; gap:26px; }
.primary-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.primary-nav a{
  font-family:var(--font-heading); font-weight:600; font-size:16px;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); text-decoration:none; white-space:nowrap;
  transition:color 0.18s var(--ease);
}
.primary-nav a:hover,
.primary-nav a[aria-current="page"]{ color:var(--teal); }

.nav-toggle{
  display:none; background:transparent; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); width:44px; height:44px; cursor:pointer;
  padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle-bar{
  display:block; width:20px; height:2px; background:var(--text); border-radius:2px;
  transition:transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1040px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-deep); border-bottom:1px solid var(--line);
    padding:8px 24px 24px; display:none;
  }
  .primary-nav.open{ display:flex; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav li{ border-bottom:1px solid var(--line); }
  .primary-nav ul a{ display:block; padding:15px 0; font-size:18px; }
  .nav-cta{ margin-top:20px; text-align:center; }
}

/* -------------------------------------------------------------- Buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-heading); font-weight:600; font-size:18px;
  letter-spacing:1.4px; text-transform:uppercase;
  padding:15px 30px; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform 0.16s var(--ease), background 0.16s var(--ease),
             border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
  white-space:nowrap; line-height:1.1;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:var(--teal); color:#10202C; border-color:var(--teal);
  box-shadow:0 8px 24px rgba(88,192,179,0.22);
}
.btn-primary:hover{ background:var(--teal-light); border-color:var(--teal-light); color:#10202C; }

.btn-secondary{
  background:rgba(255,255,255,0.05); color:var(--text); border-color:var(--line-strong);
}
.btn-secondary:hover{ background:rgba(255,255,255,0.1); border-color:var(--teal); color:var(--heading); }

.btn-sm{ padding:10px 18px; font-size:15px; letter-spacing:1.2px; }
.btn-lg{ padding:18px 38px; font-size:20px; }
.btn[aria-disabled="true"]{ opacity:0.5; pointer-events:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-row.center{ justify-content:center; }

/* ----------------------------------------------------------------- Hero */

.hero{ padding:clamp(56px,8vw,104px) 0 clamp(56px,7vw,96px); position:relative; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.hero h1{ margin-bottom:20px; }
.hero h1 .accent{ color:var(--teal); }
.hero .lede{ margin-bottom:32px; }

.hero-proof{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px;
  list-style:none; padding:0; font-size:15px; color:var(--muted);
}
.hero-proof li{ display:flex; align-items:center; gap:8px; }
.hero-proof svg{ width:17px; height:17px; color:var(--teal); flex:none; }

.hero-art{ position:relative; }
.hero-art img,.hero-art svg{
  width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
}

/* ---------------------------------------------------------------- Cards */

.card{
  background:linear-gradient(180deg, var(--panel), var(--navy-deep));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-card);
}

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:980px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.icon-box{
  width:46px; height:46px; border-radius:var(--radius-md);
  background:rgba(88,192,179,0.12); border:1px solid rgba(88,192,179,0.4);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.icon-box svg{ width:23px; height:23px; color:var(--teal); }

.card h3{ margin-bottom:10px; }
.card p{ color:var(--muted); font-size:16px; }

/* -------------------------------------------------------------- Modules */

.module{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px); align-items:center;
  padding:clamp(36px,4vw,56px) 0;
  border-top:1px solid var(--line);
}
.module:first-of-type{ border-top:none; }
/* Alternate which side the shot sits on, so a list of eleven modules does not
   read as eleven identical rows. */
.module:nth-child(even) .module-media{ order:-1; }

.module-body h3{
  font-size:clamp(26px,3vw,36px); text-transform:uppercase; letter-spacing:0.5px;
}
.module-lede{ color:var(--teal); font-weight:500; font-size:17px; margin-bottom:14px; }
.module-body p{ color:var(--muted); }

.ticks{ list-style:none; margin:18px 0 0; padding:0; }
.ticks li{
  position:relative; padding-left:29px; margin:9px 0;
  color:var(--muted); font-size:16px;
}
.ticks li::before{
  content:''; position:absolute; left:0; top:0.55em;
  width:15px; height:9px; border-left:2px solid var(--teal);
  border-bottom:2px solid var(--teal); transform:rotate(-45deg) translateY(-2px);
}

@media (max-width:820px){
  .module{ grid-template-columns:1fr; }
  .module .module-media,
  .module:nth-child(even) .module-media{ order:-1; }
}

/* --------------------------------------------------------- Screenshots */

/* The browser chrome around a screenshot. Cheap to draw, and it stops a flat
   PNG of a dark UI from dissolving into the dark page behind it. */
.shot{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--navy-deep);
  box-shadow:var(--shadow-lift);
}
.shot-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:rgba(0,0,0,0.32);
  border-bottom:1px solid var(--line);
}
.shot-dot{ width:10px; height:10px; border-radius:50%; background:var(--field); flex:none; }
.shot-url{
  margin-left:10px; font-size:12px; color:var(--muted-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot img{ width:100%; display:block; }

/* ------------------------------------------------------------ Steps */

.steps{ counter-reset:step; display:grid; gap:20px; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  padding:26px 28px; background:rgba(255,255,255,0.03);
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.step-n{
  font-family:var(--font-heading); font-size:40px; line-height:1;
  color:var(--teal); font-weight:500; opacity:0.85;
}
.step h3{ margin-bottom:8px; }
.step p{ color:var(--muted); margin:0; }

@media (max-width:560px){
  .step{ grid-template-columns:1fr; gap:8px; }
}

/* ------------------------------------------------------------- Video */

.video-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--navy-deep);
  box-shadow:var(--shadow-lift); aspect-ratio:16/9;
}
.video-frame video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Shown in place of the player until the file exists on disk. Deliberately not
   a broken <video> element: an empty player looks like a bug, whereas this
   looks like a section that is coming. */
.video-pending{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:32px;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(88,192,179,0.1), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--navy-deep));
}
.video-pending .play-ring{
  width:76px; height:76px; border-radius:50%;
  border:2px solid rgba(88,192,179,0.5);
  display:flex; align-items:center; justify-content:center;
}
.video-pending .play-ring svg{ width:26px; height:26px; color:var(--teal); margin-left:4px; }
.video-pending p{
  font-family:var(--font-heading); text-transform:uppercase; letter-spacing:2px;
  color:var(--muted); font-size:16px; margin:0;
}
.video-pending small{ color:var(--muted-dim); font-size:13px; max-width:44ch; }

.video-caption{
  margin-top:14px; color:var(--muted-dim); font-size:14px; text-align:center;
}

/* ------------------------------------------------------------ Pricing */

.price-card{
  max-width:520px; margin:0 auto; text-align:center;
  background:linear-gradient(180deg, var(--panel-2), var(--navy-deep));
  border:1px solid rgba(88,192,179,0.45); border-radius:var(--radius-lg);
  padding:clamp(32px,4vw,48px); box-shadow:var(--shadow-lift); position:relative;
}
.price-card::before{
  content:''; position:absolute; inset:-1px; border-radius:var(--radius-lg);
  padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(88,192,179,0.55), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.price-tag{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(64px,9vw,96px); line-height:1; color:var(--heading);
  margin:6px 0 4px;
}
.price-tag .per{
  display:block; font-family:var(--font-body); font-size:15px; font-weight:400;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--teal); margin-top:14px;
}
.price-note{ color:var(--muted-dim); font-size:14px; margin:14px 0 28px; }

.price-includes{ list-style:none; margin:30px 0 0; padding:28px 0 0; border-top:1px solid var(--line); text-align:left; }
.price-includes li{
  position:relative; padding-left:30px; margin:11px 0; color:var(--muted); font-size:16px;
}
.price-includes li::before{
  content:''; position:absolute; left:2px; top:0.55em;
  width:15px; height:9px; border-left:2px solid var(--teal);
  border-bottom:2px solid var(--teal); transform:rotate(-45deg) translateY(-2px);
}

/* The honest counterweight to a features list. A page that only lists what a
   product does reads as a pitch; one that says what it does not do reads as
   information, and it heads off the refund requests. */
.price-excludes li::before{
  border:none; width:14px; height:2px; background:var(--muted-dim);
  transform:none; top:0.75em; left:3px;
}

.compare{ width:100%; border-collapse:collapse; margin-top:26px; font-size:16px; }
.compare th,.compare td{
  text-align:left; padding:14px 16px; border-bottom:1px solid var(--line);
}
.compare thead th{
  font-family:var(--font-heading); text-transform:uppercase; letter-spacing:1.4px;
  font-size:15px; color:var(--teal); font-weight:600;
}
.compare td:first-child{ color:var(--heading); font-weight:500; }
.compare td{ color:var(--muted); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Requirement table status pills */
.pill{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; padding:3px 10px; border-radius:99px; white-space:nowrap;
}
.pill-required{ background:rgba(88,192,179,0.14); border:1px solid var(--teal-dark); color:var(--teal-light); }
.pill-optional{ background:rgba(155,163,178,0.12); border:1px solid var(--line-strong); color:var(--muted); }

/* ---------------------------------------------------------------- FAQ */

.faq-list{ max-width:var(--wrap-narrow); margin:0 auto; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:rgba(255,255,255,0.026); margin-bottom:12px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; padding:20px 54px 20px 24px; position:relative;
  font-family:var(--font-heading); font-size:21px; letter-spacing:0.3px;
  color:var(--heading); list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; position:absolute; right:24px; top:50%;
  width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(45deg); transition:transform 0.2s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq-item[open] summary{ color:var(--teal); }
.faq-answer{ padding:0 24px 22px; color:var(--muted); }

/* --------------------------------------------------------------- Forms */

.form{ max-width:640px; }
.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--font-heading); font-size:17px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--heading); margin-bottom:8px;
}
.field .hint{ display:block; font-family:var(--font-body); font-size:13px;
  letter-spacing:0; text-transform:none; color:var(--muted-dim); margin-top:4px; }

/* Every text-like input in a .field, described by what it is NOT rather than
   by listing the types. The list version missed type=password, so the admin
   sign-in box rendered at the browser's default height while every other
   field on the site was 14px-padded — and type=date had the same problem.
   Written this way, a field type added later is styled without anyone having
   to remember this rule exists. */
.field input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=image]),
.field select,
.field textarea{
  width:100%; padding:14px 16px; font-family:var(--font-body); font-size:16px;
  color:var(--text); background:var(--field);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
.field textarea{ min-height:170px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal); background:#3B4A66;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-dim); }

.field-error input,.field-error textarea,.field-error select{ border-color:#E1706B; }
.err{ color:#F2A6A2; font-size:14px; margin-top:6px; }

.consent{ display:flex; gap:13px; align-items:flex-start; margin-bottom:26px; }
.consent input{ margin-top:5px; width:19px; height:19px; flex:none; accent-color:var(--teal); }
.consent label{
  font-family:var(--font-body); font-size:15px; letter-spacing:0;
  text-transform:none; color:var(--muted); line-height:1.55; margin:0;
}

/* The honeypot. Hidden from sight and from assistive tech, but a bot filling
   in every field it finds will still trip it. Not display:none — some bots
   deliberately skip fields that are display:none. */
.hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.notice{
  padding:18px 22px; border-radius:var(--radius-md); margin-bottom:28px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,0.04);
}
.notice-ok{ border-color:var(--teal); background:rgba(88,192,179,0.1); }
.notice-error{ border-color:#E1706B; background:rgba(225,112,107,0.1); }
.notice h3{ margin-bottom:6px; }
.notice p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------- CTA */

.cta{
  text-align:center; padding:clamp(44px,6vw,72px) clamp(24px,4vw,56px);
  border-radius:var(--radius-lg); border:1px solid rgba(88,192,179,0.4);
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(88,192,179,0.14), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--navy-deep));
  box-shadow:var(--shadow-card);
}
.cta h2{ margin-bottom:14px; }
.cta .lede{ margin:0 auto 30px; }

/* -------------------------------------------------------------- Footer */

.site-footer{
  border-top:1px solid var(--line); background:rgba(0,0,0,0.22);
  padding:clamp(48px,6vw,72px) 0 40px; margin-top:clamp(48px,6vw,80px);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid var(--line);
}
.footer-brand img{ height:32px; width:auto; margin-bottom:18px; }
.footer-brand p{ color:var(--muted); font-size:15px; max-width:36ch; }
.footer-price{
  font-family:var(--font-heading); font-size:30px; color:var(--teal);
  margin-top:18px !important;
}
.footer-price span{
  display:block; font-family:var(--font-body); font-size:12px;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--muted-dim);
}
.footer-col h2{
  font-size:17px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--heading); margin-bottom:14px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:9px 0; }
.footer-col a{ color:var(--muted); text-decoration:none; font-size:15px; }
.footer-col a:hover{ color:var(--teal); }

.footer-legal{ padding-top:32px; color:var(--muted-dim); font-size:13.5px; }
.footer-legal p{ margin:0 0 9px; max-width:80ch; }
.footer-legal strong{ color:var(--muted); font-weight:600; }
.footer-note{ color:var(--muted-dim); }
.footer-copy{ margin-top:18px !important; }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------- Legal documents */

.doc{ max-width:var(--wrap-narrow); margin:0 auto; padding:clamp(44px,6vw,72px) 24px clamp(64px,8vw,96px); }
.doc h1{ font-size:clamp(38px,5vw,58px); margin-bottom:8px; }
.doc .updated{ color:var(--muted-dim); font-size:14px; margin-bottom:44px; }
.doc h2{
  font-size:clamp(24px,3vw,32px); margin:44px 0 12px; padding-top:24px;
  border-top:1px solid var(--line); text-transform:none; letter-spacing:0.3px;
}
.doc h2:first-of-type{ border-top:none; padding-top:0; }
.doc h3{ font-size:21px; margin:28px 0 8px; }
.doc ul,.doc ol{ padding-left:22px; }
.doc li{ margin:8px 0; }
.doc table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; }
.doc th,.doc td{ text-align:left; padding:11px 14px; border:1px solid var(--line); vertical-align:top; }
.doc th{ background:rgba(255,255,255,0.04); color:var(--heading); font-family:var(--font-heading);
  letter-spacing:1.2px; text-transform:uppercase; font-size:14px; font-weight:600; }

.callout{
  background:rgba(88,192,179,0.09); border:1px solid var(--teal);
  border-radius:var(--radius-md); padding:18px 22px; margin:26px 0;
}
.callout p:first-child{ margin-top:0; }
.callout-warn{ background:rgba(225,194,71,0.12); border-color:var(--amber); }

.toc{
  background:rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px 26px; margin-bottom:40px;
}
.toc h2{ font-size:17px !important; letter-spacing:1.8px; text-transform:uppercase;
  margin:0 0 12px !important; padding:0 !important; border:none !important; }
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:32px; }
.toc li{ margin:5px 0; break-inside:avoid; }
.toc a{ text-decoration:none; font-size:15px; }
.toc a:hover{ text-decoration:underline; }
@media (max-width:600px){ .toc ol{ columns:1; } }

/* ----------------------------------------------------------- Utilities */

.stack-sm > * + *{ margin-top:12px; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.mt-lg{ margin-top:clamp(32px,4vw,56px); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Reveal-on-scroll, added by site.js only when the browser supports
   IntersectionObserver and the visitor has not asked for reduced motion.
   The class is applied by script so that with JS off nothing is ever hidden. */
.js-reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-reveal.in{ opacity:1; transform:none; }

@media print{
  .site-header,.site-footer,.nav-toggle,.btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::before{ display:none; }
  .doc h1,.doc h2,.doc h3{ color:#000; }
  a{ color:#000; }
}

/* ==========================================================================
   Support forum
   ========================================================================== */

.forum-bar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding:16px 20px; margin-bottom:28px;
  background:rgba(255,255,255,0.035); border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.forum-bar .who{ font-size:15px; color:var(--muted); }
.forum-bar .who strong{ color:var(--teal); }
.forum-bar .badge-key{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  color:var(--muted-dim); background:rgba(0,0,0,0.25);
  border:1px solid var(--line); padding:2px 8px; border-radius:5px;
}

/* Category cards */
.cat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:760px){ .cat-grid{ grid-template-columns:1fr; } }

.cat{
  display:block; padding:24px 26px; text-decoration:none;
  background:linear-gradient(180deg, var(--panel), var(--navy-deep));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.cat:hover{ border-color:var(--teal); transform:translateY(-2px); }
.cat h3{ margin-bottom:6px; font-size:23px; }
.cat p{ color:var(--muted); font-size:15px; margin-bottom:12px; }
.cat .meta{ font-size:13px; color:var(--muted-dim); }

/* Thread list */
.thread-list{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.thread-row{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,0.022);
}
.thread-row:last-child{ border-bottom:none; }
.thread-row:hover{ background:rgba(255,255,255,0.045); }
.thread-row h3{
  font-size:20px; margin:0 0 6px; letter-spacing:0.2px;
  font-family:var(--font-body); font-weight:600; text-transform:none; line-height:1.35;
}
.thread-row h3 a{ color:var(--heading); text-decoration:none; }
.thread-row h3 a:hover{ color:var(--teal); }
.thread-meta{ font-size:13.5px; color:var(--muted-dim); }
.thread-meta .cat-tag{ color:var(--teal); }
.thread-stats{ text-align:right; font-size:13px; color:var(--muted-dim); white-space:nowrap; }
.thread-stats b{ display:block; font-size:20px; color:var(--muted); font-weight:600; }

.tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; padding:2px 8px; border-radius:99px; margin-right:8px;
  vertical-align:2px;
}
.tag-pinned{ background:rgba(87,126,242,0.16); border:1px solid var(--blue); color:var(--blue-light); }
.tag-answered{ background:rgba(88,192,179,0.16); border:1px solid var(--teal-dark); color:var(--teal-light); }
.tag-locked{ background:rgba(155,163,178,0.12); border:1px solid var(--line-strong); color:var(--muted); }
.tag-staff{ background:rgba(225,194,71,0.16); border:1px solid var(--amber); color:#F6E7A8; }
.tag-pending{ background:rgba(225,194,71,0.16); border:1px solid var(--amber); color:#F6E7A8; }

@media (max-width:620px){
  .thread-row{ grid-template-columns:1fr; gap:10px; }
  .thread-stats{ text-align:left; }
  .thread-stats b{ display:inline; font-size:14px; }
}

/* A single post */
.post{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.026); margin-bottom:18px; overflow:hidden;
}
.post-head{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(0,0,0,0.2); border-bottom:1px solid var(--line);
}
.post-author{ font-weight:600; color:var(--heading); font-size:15px; }
.post-date{ font-size:13px; color:var(--muted-dim); }
.post-body{ padding:22px; color:var(--text); }
.post-body p{ margin:0 0 1em; }
.post-body p:last-child{ margin-bottom:0; }
.post-body a{ word-break:break-word; }

.post.is-answer{ border-color:var(--teal); }
.post.is-answer .post-head{ background:rgba(88,192,179,0.12); }
.post.is-opener .post-head{ background:rgba(87,126,242,0.1); }
.post.is-pending{ border-color:var(--amber); border-style:dashed; }

.forum-code{
  background:rgba(0,0,0,0.38); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px; line-height:1.6; color:var(--teal-light); margin:14px 0;
}
.forum-code code{ background:none; border:none; padding:0; color:inherit; }

.breadcrumb{ font-size:14px; color:var(--muted-dim); margin-bottom:20px; }
.breadcrumb a{ text-decoration:none; }
.breadcrumb span{ margin:0 8px; opacity:0.6; }

.pager{ display:flex; gap:10px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.pager a,.pager span{
  padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--muted); font-size:15px;
}
.pager a:hover{ border-color:var(--teal); color:var(--teal); }
.pager .current{ background:rgba(88,192,179,0.14); border-color:var(--teal); color:var(--teal-light); }

.empty{
  text-align:center; padding:56px 24px; color:var(--muted-dim);
  border:1px dashed var(--line-strong); border-radius:var(--radius-lg);
}

/* ==========================================================================
   Cookie consent banner — only rendered when a third-party script is enabled
   (i.e. Paddle overlay checkout). Dormant otherwise.
   ========================================================================== */

.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  max-width:760px; margin:0 auto; padding:22px 26px;
  background:var(--navy-deep); border:1px solid var(--teal);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
}
.consent-banner[hidden]{ display:none; }
.consent-banner h2{ font-size:22px; margin-bottom:8px; text-transform:none; }
.consent-banner p{ font-size:14.5px; color:var(--muted); margin-bottom:16px; }
.consent-banner .btn-row{ gap:10px; }

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
@media (max-width:900px){ .admin-shell{ grid-template-columns:1fr; } }

.admin-nav{
  background:var(--navy-deep); border-right:1px solid var(--line); padding:24px 0;
}
.admin-nav .logo{ padding:0 22px 22px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.admin-nav .logo img{ height:26px; width:auto; }
.admin-nav ul{ list-style:none; margin:0; padding:0; }
.admin-nav a{
  display:flex; align-items:center; gap:11px; padding:12px 22px;
  color:var(--muted); text-decoration:none; font-size:15px;
  border-left:3px solid transparent;
}
.admin-nav a svg{ width:18px; height:18px; flex:none; }
.admin-nav a:hover{ background:rgba(255,255,255,0.04); color:var(--heading); }
.admin-nav a[aria-current="page"]{
  color:var(--teal); border-left-color:var(--teal); background:rgba(88,192,179,0.08);
}
.admin-nav .count{
  margin-left:auto; background:var(--teal); color:var(--navy-deep);
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px;
}

.admin-main{ padding:32px clamp(20px,3vw,40px) 64px; max-width:1100px; }
.admin-main h1{ font-size:38px; margin-bottom:4px; }
.admin-main > .lede{ margin-bottom:32px; }

.admin-card{
  background:rgba(255,255,255,0.03); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px; margin-bottom:22px;
}
.admin-card > h2{
  font-size:22px; text-transform:none; letter-spacing:0.2px; margin-bottom:4px;
}
.admin-card .path{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  color:var(--muted-dim); margin-bottom:20px;
}

/* Google result preview, so you can see what you are actually writing. */
.serp{
  background:#fff; border-radius:var(--radius-sm); padding:16px 18px; margin:18px 0;
  font-family:arial,sans-serif;
}
.serp .s-url{ color:#202124; font-size:12.5px; line-height:1.4; }
.serp .s-title{ color:#1a0dab; font-size:19px; line-height:1.3; margin:2px 0 3px; }
.serp .s-desc{ color:#4d5156; font-size:13.5px; line-height:1.58; }

.counter{ font-size:12.5px; color:var(--muted-dim); margin-top:5px; }
.counter.over{ color:#F2A6A2; }
.counter.good{ color:var(--teal); }

.admin-table{ width:100%; border-collapse:collapse; font-size:15px; }
.admin-table th,.admin-table td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;
}
.admin-table th{
  font-family:var(--font-heading); text-transform:uppercase; letter-spacing:1.3px;
  font-size:14px; color:var(--teal); font-weight:600;
}
.admin-table tr:hover td{ background:rgba(255,255,255,0.025); }
.admin-table .row-unread td{ background:rgba(88,192,179,0.06); }

.thumb{
  width:120px; height:76px; object-fit:cover; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--navy-deep);
}

.btn-danger{ background:rgba(225,112,107,0.14); border-color:#E1706B; color:#F2A6A2; }
.btn-danger:hover{ background:rgba(225,112,107,0.24); color:#fff; }
.btn-ghost{ background:none; border-color:var(--line-strong); color:var(--muted); }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:420px; padding:36px;
  background:linear-gradient(180deg, var(--panel), var(--navy-deep));
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
}
.login-card img{ height:30px; width:auto; margin-bottom:26px; }