/* =============================================================================
   THEME — SITE EPIC   (white pages, the ORIGINAL rainbow as the primary accent)

   The brand's four-colour gradient (blue -> red -> amber -> green) comes back
   as the site's voice: gradient CTAs, the gradient "Rocket" wordmark, the
   colourful dropdown icon chips, a signature gradient hairline across the very
   top of every page. Surfaces stay exactly the white homepage's — off-white
   page, pure-white cards, slate ink — so the colour READS as energy, not noise.

   Structure kept from the white theme (learned the hard way):
   - both token families set (--bg/--ink AND --pe-*), or half the page stays dark
   - dropdown panels white + rounded on desktop, transparent inside the mobile
     accordion drawer
   - the logo chip is the real PNG icon, not a painted square
   ============================================================================= */
:root {
  /* legacy family (design.css) */
  --bg:#f7f8fa; --bg-soft:#eff1f5; --surface:#ffffff;
  --border:rgba(15,23,42,.09); --line:rgba(15,23,42,.07);
  --ink:#0f172a; --ink-soft:#334155; --ink-mute:#5b6b82; --ink-dim:#69788c;

  /* --pe-* family (components, sitemap footer, newer sections) */
  --pe-bg:#f7f8fa; --pe-bg-soft:#eff1f5; --pe-surface:#ffffff;
  --pe-surface-2:#f7f8fa; --pe-surface-3:#eef1f6;
  --pe-border:rgba(15,23,42,.09); --pe-border-strong:rgba(15,23,42,.16);
  --pe-line:rgba(15,23,42,.07);
  --pe-ink:#0f172a; --pe-ink-soft:#334155; --pe-ink-muted:#5b6b82; --pe-ink-dim:#69788c;

  --pe-blue:#2563EB; --pe-blue-rgb:37,99,235;
  --pe-accent-light:#3b82f6; --pe-accent-deep:#1d4ed8;
  --pe-accent-fg:#ffffff; --pe-accent-tint:#1e3a8a; --pe-accent-soft:rgba(37,99,235,.10);

  /* THE RAINBOW — restated here so a themed page never depends on which other
     stylesheet happens to be cached. Identical to design.css's original. */
  --grad:    linear-gradient(95deg,#2563EB 0%,#EF4444 35%,#F59E0B 68%,#10B981 100%) !important;
  --pe-grad: linear-gradient(95deg,#2563EB 0%,#EF4444 35%,#F59E0B 68%,#10B981 100%) !important;
  --grad-alt:    linear-gradient(95deg,#2563EB 0%,#EF4444 35%,#F59E0B 68%,#10B981 100%) !important;
  --pe-grad-alt: linear-gradient(95deg,#2563EB 0%,#EF4444 35%,#F59E0B 68%,#10B981 100%) !important;

  /* 2026-09-16 — READABLE VARIANT OF THE RAINBOW. Use this one, never --grad,
     wherever text sits ON the gradient or IS the gradient.

     White on the bright rainbow above fails WCAG AA across three of its four
     stops. Measured, not estimated:
         white on #2563EB ... 5.17:1   pass
         white on #EF4444 ... 3.76:1   FAIL
         white on #F59E0B ... 2.15:1   FAIL  (worst point)
         white on #10B981 ... 2.54:1   FAIL
     Only the leftmost third of every gradient button reached AA, and the
     text-shadow on those buttons does not count toward the ratio. The same
     four stops are used for gradient-clipped text (.gword, .bw-grad, .h1
     .grad), where the gradient IS the ink — the amber and green portions of
     the wordmark failed even the 3:1 large-text floor.

     Same four hues, darkened until each passes on both counts:
         white on #2563EB ... 5.17:1      #2563EB on #f7f8fa ... 4.86:1
         white on #DC2626 ... 4.83:1      #DC2626 on #f7f8fa ... 4.54:1
         white on #B45309 ... 5.02:1      #B45309 on #f7f8fa ... 4.73:1
         white on #047857 ... 5.48:1      #047857 on #f7f8fa ... 5.16:1

     --grad stays bright and is still correct for decorative use — rules,
     bars, tiles, anything with no text on it. If you add a new gradient
     element, pick by whether words touch it. */
  --grad-ink:    linear-gradient(95deg,#2563EB 0%,#DC2626 35%,#B45309 68%,#047857 100%) !important;
  --pe-grad-ink: linear-gradient(95deg,#2563EB 0%,#DC2626 35%,#B45309 68%,#047857 100%) !important;
  --teal:#2563EB !important; --coral:#EF4444 !important;
  --green:#10B981 !important; --red:#EF4444 !important; --amber:#F59E0B !important;
  --pe-green:#10B981 !important; --pe-red:#EF4444 !important;
  --pe-yellow:#F59E0B !important; --pe-amber:#F59E0B !important;
  --pe-accent-2:#F59E0B !important;

  /* glow that mixes the family, like the original dark site did */
  --shadow-glow:0 24px 80px -20px rgba(37,99,235,.25), 0 12px 40px -16px rgba(37,99,235,.20) !important;
  --pe-shadow-glow:0 24px 80px -20px rgba(37,99,235,.25), 0 12px 40px -16px rgba(37,99,235,.20) !important;

  /* on light, shadows are soft + large; borders are near-invisible */
  --shadow:0 12px 32px -12px rgba(15,23,42,.12);
  --card-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -12px rgba(15,23,42,.12);
  --card-shadow-hover:0 2px 4px rgba(15,23,42,.07),0 22px 48px -16px rgba(15,23,42,.18);
  --pe-shadow-card:0 1px 2px rgba(15,23,42,.05),0 12px 32px -12px rgba(15,23,42,.12);
  --pe-shadow-card-hover:0 2px 4px rgba(15,23,42,.07),0 22px 48px -16px rgba(15,23,42,.18);
  --pe-shadow-soft:0 8px 30px rgba(15,23,42,.10);
  --pe-shadow-modal:0 32px 90px rgba(15,23,42,.24);
  --pe-ring:0 0 0 3px rgba(37,99,235,.28);
}

/* SIGNATURE: a thin rainbow runs across the very top of every page. */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  z-index: 1400; pointer-events: none;
}

/* Surfaces that were WHITE-ON-DARK washes vanish on a light page. */
.card, .feature-card, .price-card, .panel, .box, .compare-wrap {
  background: var(--surface) !important;
}
[class*="chip"], [class*="pill"], .tag {
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.10);
}

/* The product frame stays DARK — the demo footage is a dark-UI editor. */
.app-shot {
  background: linear-gradient(180deg,#171a23,#101219) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.app-shot-chrome .url { color:#8b95a8 !important; }

/* Hard-coded light text that assumed the dark page. */
h1, h2, h3, .section-title { color: var(--ink); }
.section-sub { color: var(--ink-mute); }

/* --- BUTTONS: the editor's blue is the primary action -------------------------
   2026-09-19 — buttons switched from the rainbow to the software's accent
   (#2563EB, the same --accent the editor uses) so the site and the app read
   as one product. The rainbow stays for gradient TEXT (.gword, brand mark). */
:root { --btn-ink: linear-gradient(180deg, #2f6df0 0%, #2563EB 55%, #1b4fc2 100%); }
.btn-primary, .btn-grad, .pe-btn--gradient {
  background: var(--btn-ink) !important;    /* white text on the app blue */
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(10,11,16,.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px -8px rgba(37,99,235,.55) !important;
}
.btn-primary:hover, .btn-grad:hover, .pe-btn--gradient:hover {
  background: linear-gradient(180deg, #3b78f5 0%, #2b6cf0 55%, #1f56cf 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 12px 30px -8px rgba(37,99,235,.65) !important;
}
.btn-ghost {
  background: #ffffff !important;
  color: var(--ink) !important;
  border-color: rgba(15,23,42,.15) !important;
}
.btn-ghost:hover { background: #f2f4f8 !important; border-color: rgba(15,23,42,.26) !important; }

/* --- TOP NAV ---------------------------------------------------------------- */
/* glass bar, like the homepage */
header.nav, .nav, .nav.scrolled {
  background: rgba(247,248,250,.85) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: none !important;
}
.nav-links > a { color: #5b6b82 !important; text-shadow: none !important; }
.nav-links > a:hover { color: #0f172a !important; }
/* wordmark: "Photo Edit" in ink, "Rocket" in the ORIGINAL gradient again —
   site-modern.css forces one-ink, so this re-forces the classic look. */
.brand .bw-white, .nav .brand .bw-white {
  background: none !important;
  -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: #0f172a !important; text-shadow: none !important;
}
.brand .bw-grad, .nav .brand .bw-grad {
  background: var(--grad-ink) !important;   /* gradient IS the ink here */
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
/* the logo chip is the real icon */
.brand .brand-mark, .nav .brand-mark, .brand-mark {
  border-radius: 7px !important;
  background: url("../assets/brand-mark.png") center/cover no-repeat !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.18) !important;
  filter: none !important;
}
/* nav CTA in the app blue */
.nav-cta {
  background: var(--btn-ink) !important;    /* white text */
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(10,11,16,.35) !important;
}

/* --- MEGA MENU -------------------------------------------------------------- */
/* v2.2.7.412 — the .mega / .drop panel rules that sat here are gone. They
   styled the old mega-menu markup (.nav-mega-wrap / .mega-inner / .drop-inner),
   which no page has carried for some time; the live dropdown is .ndrop /
   .npanel, styled further down this file. mega-nav.css, mega-nav.js and
   site-header.css were deleted in the same pass for the same reason. */
.mc-title { background: #f7f8fa !important; color: #0f172a !important; }
.mc-us { background: rgba(37,99,235,.06) !important; }

/* CINEMATIC FRAMES — inside pages: colour light spills from every dark
   product frame, same treatment as the homepage hero. */
.app-shot { position: relative; isolation: isolate; }
.app-shot::before {
  content: ""; position: absolute; inset: -24px; z-index: -1; border-radius: 34px;
  background:
    radial-gradient(42% 55% at 12% 20%, rgba(37,99,235,.28), transparent 70%),
    radial-gradient(40% 55% at 50% 0%,  rgba(239,68,68,.17), transparent 70%),
    radial-gradient(42% 55% at 88% 25%, rgba(245,158,11,.20), transparent 70%),
    radial-gradient(50% 60% at 55% 100%, rgba(37,99,235,.19), transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

/* announcement bar rides the SAME four-colour gradient */
.flbar { background: var(--grad) !important; }


/* =============================================================================
   SEED LAYOUT LAYER — the homepage's editorial language on every inside page.
   Applied over the epic base purely via CSS, so all ~45 pages follow without
   touching their markup: oversized statement typography, uppercase dotted
   labels, minimal-chrome white cards, and room to breathe.
   ============================================================================= */
/* editorial scale: statements, not headings */
.hero h1 { font-size: clamp(38px,5.8vw,76px) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; }
.section-title, h2.section-title { font-size: clamp(30px,3.8vw,48px) !important; letter-spacing: -.028em !important; line-height: 1.1 !important; }
.section-head { margin-bottom: 52px !important; }
.section-sub { font-size: 16.5px !important; max-width: 60ch; }

/* labels: uppercase micro-type, the homepage voice */
.section-eyebrow, .eyebrow {
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: #5b6b82 !important;
}
.eyebrow .dot, .section-eyebrow .dot { background: var(--grad) !important; }

/* whitespace: sections breathe like the homepage */
section { padding-top: 110px; padding-bottom: 110px; }

/* cards: minimal chrome — hairline borders, soft paper shadows */
.cell, .feature-card, .faq-item, .compare-wrap {
  border-color: rgba(15,23,42,.06) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px -24px rgba(15,23,42,.12);
}
.cell { border-radius: 20px !important; }
.cell:hover { transform: translateY(-3px); border-color: rgba(15,23,42,.12) !important; }

/* balanced headlines, brand selection — homepage details */
h1, h2, h3 { text-wrap: balance; }
::selection { background: rgba(37,99,235,.2); }


/* =============================================================================
   HOMEPAGE TOP BAR — the exact same header on every inside page.
   Announcement strip, minimal flex bar, Editor/Make dropdown panels.
   Overrides design.css's old grid header and the theme's own pill .nav-cta
   (in the new markup .nav-cta is a CONTAINER, not a button). Loads last, wins.
   ============================================================================= */
.annc{position:relative;z-index:301;background:#0f172a;color:#e2e8f0;text-align:center;
  font-size:12.5px;font-weight:600;padding:8px 16px}
.annc a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.flbar{display:none !important}

nav.nav, header.nav{display:flex !important;grid-template-columns:none !important;
  position:sticky !important;top:0 !important;z-index:300;align-items:center;gap:20px;
  padding:14px 24px !important;width:100%;margin:0;border-radius:0}
.nav .brand{display:flex;align-items:center;gap:0;font-weight:800;letter-spacing:-.02em;
  text-decoration:none;font-size:16px;color:#0f172a}
/* the brand is a flex row, so "Photo Edit" and "Rocket" are separate flex
   items — a container gap would space the WORDS as widely as the icon.
   Instead: the icon carries its own 9px, the wordmark gets a true word-space. */
.nav .brand i{width:26px;height:26px;border-radius:7px;flex:0 0 auto;display:block;
  margin-right:9px;
  background:url("../assets/brand-mark.png") center/cover no-repeat;
  box-shadow:0 1px 3px rgba(15,23,42,.18)}
.nav .brand .gword{margin-left:.26em}
.gword{background:linear-gradient(95deg,#2f6df0 0%,#2563EB 50%,#1b4fc2 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.nav a.lnk{color:#5b6b82;text-decoration:none;font-size:14.5px;font-weight:500}
.nav a.lnk:hover{color:#0f172a}
.nav .nav-links{display:flex !important;gap:24px;margin-left:10px;position:static !important;
  background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;
  max-height:none !important;overflow:visible !important;flex-direction:row !important}
.nav .nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center;
  background:none !important;color:inherit !important;text-shadow:none !important;
  padding:0 !important;box-shadow:none !important}
.nav .nav-cta .btn-dark{background:#0f172a !important;color:#fff !important;
  border-radius:999px;padding:12px 22px;font-weight:700;font-size:14.5px;
  display:inline-flex;align-items:center;text-decoration:none;
  transition:transform .15s ease,background .15s ease}
.nav .nav-cta .btn-dark:hover{background:#1e293b !important;transform:translateY(-1px)}
/* v2.2.7.47 — HIDE the "Buy" pill on phones. nav-menu.js already injects a
   hide rule, but the theme styles this pill at higher specificity
   (.nav .nav-cta .btn-dark), so on inside pages it could win the cascade and
   keep the pill visible — squeezing the bar. Restated here with matching
   specificity + !important so it cannot come back. "Open editor" stays, and
   every page carries a buy CTA in its content. */
@media (max-width:880px){
  .nav .nav-cta .btn-dark{display:none !important}
  .nav .nav-cta{gap:6px}
}
@media(max-width:880px){.nav .nav-links{display:none !important}}

/* dropdown panels (with the hover bridge + forgiveness delay + click pin) */
.ndrop{position:static}
.nav .nav-links{align-items:center}
.ntrig{background:none;border:0;cursor:pointer;color:#5b6b82;margin:0;
  /* IDENTICAL metrics to the plain links, so buttons and anchors sit on the
     same baseline: same size, same line-height, no vertical padding */
  font:500 14.5px/1.55 var(--font,inherit);
  padding:0 2px;display:inline-flex;align-items:center;gap:5px}
.ntrig::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
.ndrop:hover .ntrig,.ndrop:focus-within .ntrig,.ndrop.open .ntrig{color:#0f172a}
.ndrop:hover .ntrig::after,.ndrop:focus-within .ntrig::after,.ndrop.open .ntrig::after{
  transform:rotate(225deg) translateY(-1px)}
.npanel{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-bottom:1px solid rgba(15,23,42,.10);
  box-shadow:0 30px 60px -30px rgba(15,23,42,.25);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease .12s,transform .28s cubic-bezier(.2,.8,.2,1) .12s,visibility .22s .12s;
  pointer-events:none}
.npanel::before{content:"";position:absolute;left:0;right:0;top:-30px;height:30px}
.ndrop:hover .npanel,.ndrop:focus-within .npanel,.ndrop.open .npanel{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
/* v2.2.7.324 — was repeat(4,1fr), a hard-coded four. The Editor menu holds
   five items on the live build, so the fifth dropped onto a row of its own
   and sat there alone beside three empty cells. auto-fit means the row count
   follows the item count instead of the other way round, so adding or
   removing a menu entry can no longer strand one. */
.npanel-in{max-width:1240px;margin:0 auto;padding:26px 24px 30px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.nitem{display:flex;align-items:center;gap:13px;padding:10px;border-radius:14px;
  text-decoration:none;transition:background .15s ease}
.nitem:hover{background:#f2f4f8}
.nitem img{width:52px;height:52px;border-radius:10px;object-fit:cover;object-position:top left;
  flex:0 0 auto;background:#101219}
.nitem b{display:block;font-size:14.5px;letter-spacing:-.01em;color:#0f172a}
.nitem span{font-size:12.5px;color:#5b6b82}


/* =============================================================================
   LEFT-ALIGNED PAGE HEROES — the homepage's editorial stance on every page.
   design.css centres them and one CTA row even carries an inline
   justify-content:center, hence the !important overrides.
   ============================================================================= */
/* =============================================================================
   FOOTER — full-width dark sheet rising over the paper with large top rounded
   corners. The embedded footer CSS paints it paper-on-paper under this theme,
   so the dark surface and its text colours are restated here. */
.site-footer{background:#0b0d13 !important;border-top:0 !important;
  border-radius:48px 48px 0 0;overflow:hidden;margin:30px 0 0 !important;
  width:100% !important;max-width:none !important;
  color:#8b95a8 !important}
.site-footer a{color:#aab6c6 !important}
.site-footer a:hover{color:#ffffff !important}
.site-footer h4,.site-footer .sf-h,.site-footer strong,.site-footer b{color:#e2e8f0 !important}
@media (max-width:640px){.site-footer{border-radius:28px 28px 0 0}}

.page-hero{text-align:left !important}
/* MODERN CONTAINER: the page hero is a large white rounded sheet floating on
   the paper — big top corners, hairline border, generous inner padding. The
   injected hero scene (nav-menu.js) is clipped by the same rounded box. */
.page-hero{background:#ffffff;border:0;border-bottom:1px solid rgba(15,23,42,.06);
  border-radius:0 0 48px 48px;margin:0;width:100%;max-width:none;
  overflow:hidden;box-shadow:0 16px 40px -24px rgba(15,23,42,.12);
  /* proper two-column hero: text column vertically centred at the LEFT,
     aligned with the nav wrap on wide screens; the injected 3D scene owns
     the right half. min-height gives every page the same confident stage. */
  display:flex;flex-direction:column;justify-content:center;
  min-height:460px;
  padding:64px max(56px,calc((100vw - 1240px)/2 + 24px)) 64px}
.page-hero .eyebrow{margin-top:0}
/* while the scene is visible, cap the text column so nothing runs under it */
@media (min-width:1021px){
  .page-hero h1,.page-hero .h1{max-width:min(18ch,52%) !important}
  .page-hero .lede,.page-hero > p{max-width:min(58ch,50%) !important}
  .page-hero .cta-row{max-width:52%}
}
@media (max-width:640px){
  .page-hero{border-radius:0 0 28px 28px;padding:44px 24px 40px;min-height:0}
}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:8px}
.page-hero h1,.page-hero .h1{max-width:20ch;margin-left:0 !important;margin-right:auto !important}
.page-hero .lede,.page-hero > p{margin-left:0 !important;margin-right:auto !important}
.page-hero .lede{max-width:62ch}
.page-hero .cta-row{justify-content:flex-start !important}


/* hero outliers: affiliates uses .hero.wrap, buy.html has its own opener —
   both join the left-aligned stance */
.hero.wrap{text-align:left !important}
.hero.wrap h1{margin-left:0 !important;margin-right:auto !important;max-width:20ch}
.hero.wrap .lede{margin-left:0 !important;margin-right:auto !important}
.hero.wrap .hero-cta{justify-content:flex-start !important}


/* wordmark: ONE line at every width.

   v2.2.7.376 — this block used to say flex-direction:column below 880px, so
   the three wordmark spans (Photo / Edit / R) stacked into three 11px rows in
   the phone header. nav-menu.js already ships a rule meant to stop exactly
   that — `.brand .bwrap{flex-direction:row;font-size:14px}` inside the same
   880px query — but its selector is (0,2,0) against this one's (0,3,0), so
   the theme won and the fix never took effect. Corrected at the source rather
   than by escalating the other rule, because the column was the bug.

   flex-wrap and white-space are belt-and-braces: with three separate flex
   items the container is the only thing that can push them onto new lines, and
   nowrap forecloses it. Measured at 375px (brand 111px of 375) and at 320px
   (brand 111px of 320, burger still at x=259, no horizontal overflow). */
.nav .brand .bwrap{display:inline-flex;gap:.26em}
.nav .brand .bwrap .gword{margin-left:0}
@media (max-width:880px){
  .nav .brand .bwrap{flex-direction:row;flex-wrap:nowrap;white-space:nowrap;
    gap:0;font-size:14px;line-height:1.12;letter-spacing:-.01em;text-align:left}
}


/* =============================================================================
   v2.2.7.43 — COMPACT MOBILE TYPE (all inside pages)
   Headings and body copy used desktop leading on phones, which made every
   section taller than it needed to be. Tighter line-heights + slightly
   smaller display sizes below 880px; desktop is untouched.
   ============================================================================= */
@media (max-width:880px){
  h1,.h1{font-size:clamp(28px,7.4vw,40px) !important;line-height:1.08 !important;
    letter-spacing:-.025em}
  h2,.h2{font-size:clamp(24px,6.4vw,34px) !important;line-height:1.12 !important}
  h3,.h3{font-size:18px !important;line-height:1.2 !important}
  p,li{line-height:1.5}
  .lede{font-size:15.5px !important;line-height:1.5 !important}
  .page-hero{min-height:0;padding:34px 20px 30px}
  .page-hero h1,.page-hero .h1{margin-bottom:10px}
  .page-hero .lede{margin-bottom:14px}
  section{padding-top:52px;padding-bottom:52px}
}


/* =============================================================================
   v2.2.7.48 — RESPONSIVE PRICING / BUY GRIDS
   Both pages hard-coded their column counts in an INLINE style
   (grid-template-columns:1fr 1fr 1fr), which no stylesheet can override — so
   on a phone three pricing cards were squeezed into ~110px each. They are
   classes now, and they collapse properly.
   ============================================================================= */
/* auto-fit rather than a fixed repeat(3): the Monthly card is hidden until
   its Stripe link exists, so the grid must lay out correctly with EITHER 3 or
   4 visible cards without a second rule to keep in sync. A hidden card is
   still a grid item in some engines, so [hidden] is forced out of flow. */
/* auto-fit with a 260px floor. The tier count is not fixed — the Monthly card
   appears only when its checkout exists — so the grid must lay out correctly
   with three or four cards without a second rule to keep in sync. 260px rather
   than 220px because each card carries a paragraph of billing terms, and that
   is the first thing to become unreadable when columns get narrow. */
/* v2.2.7.220 — FOUR columns, NO gaps, at every width.
   Six cards, but only four are tiers. The free card and the Team card are
   not things for sale beside the others — one is the ground the tiers stand
   on, the other is an enquiry. Both SPAN the full row, which is what makes a
   fixed 4-column grid gapless: the middle row is exactly the four licences,
   30 days | 1 year | 5 years | Lifetime, and nothing ever wraps ragged.
   Below the desktop breakpoint the tiers pair up 2+2 (banners still span),
   and on phones everything stacks. Every shape is full. */
.price-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  max-width:1240px; margin:0 auto;
}
@media (min-width:700px){
  .price-grid{ grid-template-columns:repeat(2,1fr); }
  /* v2.2.7.412 — .price-card (Lifetime) joins the full-width set here.
     With only two timed tiers left, the tablet grid ran 1 year | 5 years,
     then Lifetime alone in a two-column row with a hole beside it. */
  .price-grid > .price-card-free,
  .price-grid > .price-card,
  .price-grid > .price-card-team{ grid-column:1 / -1; }
}
@media (min-width:1150px){
  /* v2.2.7.221 — six TRACKS, three ROWS, all full:
       row 1: Personal use banner .............. span 6
       row 2: 30 days | 1 year | 5 years ....... span 2 each
       row 3: Lifetime $99.99 | Team volume .... span 3 each
     The timed licences read as one family; the two "bigger decision" cards —
     own it forever, or buy for a team — share the closing row at double
     width. Every row sums to six tracks, so no shape can ever be ragged. */
  /* v2.2.7.222 — twelve tracks now that there are FOUR timed tiers:
       row 1: Personal use banner ......................... span 12
       row 2: 30 days | 6 months | 1 year | 5 years ....... span 3 each
       row 3: Lifetime $99.99 | Team volume ............... span 6 each
     Every row sums to twelve, so nothing can wrap ragged. */
  .price-grid{ grid-template-columns:repeat(12,1fr); max-width:1500px; gap:16px; }
  /* v2.2.7.412 — span 6, not span 3. The two shortest paid tiers were
     removed, so the four span-3 cards this rule was written for became
     two, and row 2 covered only 6 of the 12 tracks — half the row was
     empty space beside the 5-year card. Two cards at span 6 fill it
     exactly, which restores the invariant the notes above describe:
     every row sums to twelve, so no shape can be ragged. */
  .price-grid > .price-card-yearly,
  .price-grid > .price-card-fiveyear{ grid-column:span 6; }
  .price-grid > .price-card,
  .price-grid > .price-card-team{ grid-column:span 6; }
  .price-grid > .price-card-free{ grid-column:1 / -1; }
  /* The free banner breathes horizontally at full width: the feature list
     flows into two columns and the three CTAs sit in a row. The card keeps
     its natural flex-column markup — only presentation changes. */
  .price-grid > .price-card-free .price-list{ columns:2; column-gap:32px; }
  .price-grid > .price-card-free .free-ctas{ flex-direction:row !important; flex-wrap:wrap; }
  .price-grid > .price-card-free .free-ctas .btn{ flex:1 1 200px; text-align:center; }
}
.price-grid > [hidden]{display:none !important;}
.buy-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
  align-items:start; max-width:960px; margin:0 auto;
}
@media (max-width:980px){
  .price-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .buy-grid{grid-template-columns:1fr; gap:26px}
}
@media (max-width:700px){
  .price-grid{grid-template-columns:1fr; gap:14px; max-width:100%}
  /* the "Recommended" card should lead on a phone, not sit in the middle */
  .price-grid > .price-card{order:-1}
  /* a 64px minimum price ran off the edge next to the struck-through price */
  .price-amount{font-size:clamp(40px,12vw,64px) !important; margin-bottom:4px}
  .price-amount s{font-size:.42em; margin-left:8px}
  .price-list{gap:11px; margin-bottom:18px}
  .price-list li{font-size:13.5px}
  .price-grid .btn{width:100%; justify-content:center}
  .faq-item summary{padding:16px 18px; font-size:15px}
  .faq-item .body{padding:0 18px 18px}
}