/* ==========================================================================
   Security Awareness Training Price Comparison - "Toybox Daylight", calm edition
   The look of the Free Cyber Security Games pages (assets/css/cyber-security-games.css): ink outlines, offset
   shadows, Fredoka headings, the sky and cream palette, yellow accents, the dark team panel and the card FAQ.
   Toned down for a pricing tool: no cartoon logo type, starbursts, sparkles, tilts or looping animations,
   2px outlines on the small controls, and flat colour instead of art.
   Views/Launchpad/SATPriceComparison.cshtml links it in its FinalHeader section with a ?v= cache buster from
   StaticAssetVersion; Scripts/sat-price-comparison/sat-price-comparison.js builds the table's markup.
   Every class starts with pc- (checked against Front BS4, Silicon BS5, boxicons, hs-mega-menu, toastr and the
   2026 chrome: none of them use one). Tokens live on .pc-root, not :root. The visual language is copied from
   cyber-security-games.css rather than shared, so the pages can change independently.
   ========================================================================== */
/* Arial Bold scaled to Fredoka's metrics while the web font loads (the view preloads the Latin woff2) */
@font-face { font-family: 'Fredoka Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight: 500 700; size-adjust: 94%; ascent-override: 103.5%; descent-override: 25%; line-gap-override: 0%; }
.pc-root {
  --pc-ink: #2F2A4F;
  --pc-ink-2: #433D69;
  --pc-muted: #5B5680;
  --pc-line: rgba(47, 42, 79, .14);
  --pc-cream: #FFF6E6;
  --pc-sky-0: #F5FAFF;
  --pc-sky-1: #EAF6FF;
  --pc-sky-2: #CFEAFF;
  --pc-sky: #52B4FF;
  --pc-coral: #FF7A5C;
  --pc-green: #3FCB7F;
  --pc-yellow: #FFC94D;
  --pc-teal: #36CBB1;
  --pc-violet: #8C7CF0;
  --pc-night: #27225E;
  --pc-deep: #0F0C2C;
  --pc-link: #3B33B5;
  --pc-ours: #F3F0FF;
  --pc-r: 22px;
  --pc-drop: 0 5px 0 var(--pc-ink);
  --pc-drop-lg: 0 8px 0 var(--pc-ink);
  --pc-display: 'Fredoka', 'Fredoka Fallback', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --pc-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  position: relative;
  font-family: var(--pc-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pc-ink);
  background: var(--pc-sky-1);
  overflow-x: clip;
}
.pc-root *, .pc-root *::before, .pc-root *::after { box-sizing: border-box; }
/* Front's theme.min.css sets svg { margin-bottom: -8px } on every SVG */
.pc-root svg { margin-bottom: 0; }
/* Element resets sit in :where(), so they weigh what the themes' element rules weigh and win on source order,
   while every pc- class rule still beats them without !important */
:where(.pc-root) h1, :where(.pc-root) h2, :where(.pc-root) h3, :where(.pc-root) h4 { font-family: var(--pc-display); font-weight: 700; color: var(--pc-ink); margin: 0; letter-spacing: 0; line-height: 1.12; }
:where(.pc-root) p { margin: 0 0 1em; }
:where(.pc-root) ul, :where(.pc-root) ol { margin: 0; padding: 0; list-style: none; }
:where(.pc-root) img { max-width: 100%; }
:where(.pc-root) b, :where(.pc-root) strong { font-weight: 700; }
:where(.pc-root) a:not([class]) { color: var(--pc-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(.pc-root) a:not([class]):hover { color: var(--pc-ink); }
:where(.pc-root) button, :where(.pc-root) input, :where(.pc-root) select { font-family: inherit; }
.pc-root :focus-visible { outline: 3px solid var(--pc-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--pc-yellow); }
/* On the dark header and the team panel an ink ring would vanish: a white one instead */
.pc-root .pc-hero__head :focus-visible, .pc-root .pc-team__panel :focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: none; }
.pc-root .pc-team__panel .pc-btn:focus-visible { box-shadow: 0 5px 0 var(--pc-deep); }
/* Focus moved by the script (tabindex=-1 jump targets) shows no ring */
.pc-root [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.pc-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.pc-root [hidden] { display: none !important; }
/* In-page jumps and focus moving up the page land clear of the fixed 76px header */
.pc-root [id], .pc-root :is(a[href], button, input, select, summary) { scroll-margin-top: 96px; }

/* Container: the box of the site header's Silicon .container, so content lines up with the logo */
.pc-wrap { width: 100%; margin: 0 auto; padding: 0 16px; }
@media (min-width: 500px) { .pc-wrap { max-width: 97%; padding: 0 12px; } }
@media (min-width: 768px) { .pc-wrap { max-width: 95%; } }
@media (min-width: 1400px) { .pc-wrap { max-width: 1320px; } }

.pc-section { position: relative; padding: 72px 0; }
@media (min-width: 992px) { .pc-section { padding: 96px 0; } }

/* ---------- Type ---------- */
.pc-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 13px 4px; background: #fff; border: 2px solid var(--pc-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--pc-ink); font: 600 .8125rem/1.2 var(--pc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink); }
.pc-eyebrow i { font-size: 1.05rem; color: var(--pc-coral); }
.pc-root .pc-h2 { font: 700 clamp(1.9rem, 1.35rem + 2vw, 2.9rem)/1.08 var(--pc-display); color: var(--pc-ink); margin: 0 0 14px; }
.pc-root .pc-h2, .pc-lede, .pc-qa__q, .pc-root .pc-title { text-wrap: balance; }
.pc-root p { text-wrap: pretty; }
.pc-mark { position: relative; white-space: nowrap; z-index: 0; }
.pc-mark::after { content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .05em; height: .36em; background: var(--pc-yellow); border-radius: .18em; z-index: -1; }
.pc-lede { font-size: 1.125rem; line-height: 1.6; color: var(--pc-ink-2); max-width: 46rem; }
.pc-head { margin-bottom: 36px; }
.pc-head--center { text-align: center; }
.pc-head--center .pc-lede { margin-left: auto; margin-right: auto; }

/* ---------- Buttons and links ---------- */
.pc-btn { --b: var(--pc-yellow); display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 52px; padding: .65em 1.35em .6em; border: 3px solid var(--pc-ink); border-radius: 999px; background-color: var(--b); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); color: var(--pc-ink); font: 700 1.125rem/1 var(--pc-display); letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 5px 0 var(--pc-ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.pc-btn i { font-size: 1.3em; line-height: 0; }
.pc-btn:hover, .pc-btn:focus { color: var(--pc-ink); text-decoration: none; }
.pc-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--pc-ink); }
.pc-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pc-ink); }
.pc-btn--white { --b: #fff; background-image: none; }
.pc-arrow { display: inline-flex; align-items: center; gap: 4px; font: 600 1.0625rem/1.2 var(--pc-display); color: var(--pc-ink); text-decoration: none; border-bottom: 3px solid var(--pc-yellow); padding-bottom: 2px; }
.pc-arrow:hover, .pc-arrow:focus { color: var(--pc-ink); text-decoration: none; border-bottom-color: var(--pc-coral); }
.pc-arrow i { transition: transform .2s ease; }
.pc-arrow:hover i:last-child { transform: translateX(3px); }
.pc-linkbtn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 2px; border: 0; background: none; font: 600 .875rem/1.2 var(--pc-display); color: var(--pc-ink-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.pc-linkbtn:hover { color: var(--pc-ink); text-decoration-color: var(--pc-coral); }
.pc-linkbtn i { font-size: 1.05rem; }

/* ---------- Chips ---------- */
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 4px; border: 2px solid var(--pc-ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--pc-ink); font: 600 .875rem/1.2 var(--pc-display); color: var(--pc-ink); white-space: nowrap; }
.pc-chip i { font-size: 1.05rem; }

/* ==========================================================================
   HEADER + THE TOOL: a compact dark header that fades into the page's sky, with the tool card under it
   (the layout of a game page's header and player, minus the art)
   ========================================================================== */
.pc-hero { position: relative; padding: 100px 0 72px; background:
    radial-gradient(ellipse 300px 70px at 12% 34%, rgba(255, 255, 255, .14), transparent 70%),
    radial-gradient(ellipse 380px 90px at 88% 22%, rgba(255, 255, 255, .12), transparent 70%),
    linear-gradient(180deg, #211B58 0, #2D2981 110px, #3F50C2 280px, #5B92EC 470px, #98CEFF 680px, var(--pc-sky-1) 900px); }
@media (min-width: 992px) { .pc-hero { padding: 104px 0 88px; } }
.pc-hero__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; color: #fff; }
.pc-hero__copy { flex: 1 1 560px; max-width: 800px; }
.pc-root .pc-title { margin: 0 0 14px; font: 700 clamp(2.15rem, 1.45rem + 2.6vw, 3.5rem)/1.08 var(--pc-display); color: #fff; }
/* The key phrase on a yellow card: the games' highlighted-domain treatment, without the tilt */
.pc-title__hl { display: inline-block; max-width: 100%; margin-top: .1em; padding: 0 .24em .05em; border: 3px solid var(--pc-ink); border-radius: .26em; background: var(--pc-yellow); box-shadow: 0 5px 0 var(--pc-deep); color: var(--pc-ink); }
.pc-hero__lede { margin: 0; max-width: 44rem; font-size: 1.125rem; line-height: 1.6; color: #E9E7FA; }
.pc-hero__chips { flex: 0 1 auto; }
@media (min-width: 1200px) { .pc-hero__chips { flex-direction: column; align-items: flex-end; } }

/* The tool card: controls on a pale strip, then the results */
.pc-tool { position: relative; margin: 30px 0 0; background: #fff; border: 3px solid var(--pc-ink); border-radius: 28px; box-shadow: var(--pc-drop-lg), 0 30px 60px -24px rgba(33, 28, 90, .4); }
.pc-controls { display: grid; gap: 26px; padding: 22px 18px 24px; background: var(--pc-sky-0); border-bottom: 3px solid var(--pc-ink); border-radius: 25px 25px 0 0; }
@media (min-width: 768px) { .pc-controls { padding: 24px 26px 26px; } }
@media (min-width: 992px) {
  .pc-controls { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); gap: 0; }
  .pc-control--providers { margin-left: 28px; padding-left: 28px; border-left: 2px dashed rgba(47, 42, 79, .22); }
}
.pc-control { min-width: 0; }
.pc-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; font: 700 1.125rem/1.25 var(--pc-display); color: var(--pc-ink); }
.pc-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pc-ink); color: #fff; font: 700 .9375rem/1 var(--pc-display); }
.pc-label__note { font: 600 .875rem/1.2 var(--pc-body); color: var(--pc-muted); }

/* Headcount: - [ n ] + */
.pc-stepper { display: flex; align-items: stretch; width: 100%; max-width: 320px; height: 60px; border: 3px solid var(--pc-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--pc-ink); }
.pc-stepper__btn { flex: none; display: grid; place-items: center; width: 58px; margin: 0; padding: 0; border: 0; background-color: var(--pc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%); color: var(--pc-ink); font-size: 1.6rem; cursor: pointer; transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.pc-stepper__btn:first-child { border-right: 3px solid var(--pc-ink); border-radius: 15px 0 0 15px; }
.pc-stepper__btn:last-child { border-left: 3px solid var(--pc-ink); border-radius: 0 15px 15px 0; }
.pc-stepper__btn:hover { background-color: #FFD776; }
.pc-stepper__btn:active { background-color: #F2B632; }
.pc-root .pc-stepper__input { flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; font: 700 1.625rem/1 var(--pc-display); color: var(--pc-ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pc-stepper__input::-webkit-outer-spin-button, .pc-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* The field sits inside the stepper's own outline, so its focus shows as a yellow inset rather than a ring */
.pc-root .pc-stepper__input:focus, .pc-root .pc-stepper__input:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--pc-yellow); }
.pc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.pc-preset { min-width: 46px; min-height: 32px; padding: 4px 10px 3px; border: 2px solid rgba(47, 42, 79, .3); border-radius: 999px; background: #fff; font: 600 .875rem/1.2 var(--pc-display); color: var(--pc-ink-2); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.pc-preset:hover { border-color: var(--pc-ink); background: var(--pc-sky-1); color: var(--pc-ink); }
.pc-preset[aria-pressed="true"] { border-color: var(--pc-ink); background: var(--pc-ink); color: #fff; }
.pc-hint { margin: 12px 0 0; font-size: .875rem; line-height: 1.45; color: var(--pc-muted); }
/* A limit, not a fault: amber, never red */
.pc-alert { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border: 2px solid var(--pc-ink); border-radius: 14px; background: #FFF1C2; font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--pc-ink); }
.pc-alert i { flex: none; font-size: 1.15rem; line-height: calc(.875rem * 1.45); }

/* Providers: each checkbox is a chip; checked chips are yellow */
.pc-picks { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.pc-pick__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pc-root .pc-pick { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 6px 13px 5px 9px; border: 2px solid rgba(47, 42, 79, .3); border-radius: 999px; background: #fff; font: 600 .9375rem/1.2 var(--pc-display); color: var(--pc-ink-2); cursor: pointer; user-select: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.pc-pick i { font-size: 1.15rem; color: var(--pc-muted); }
.pc-pick .bx-check { display: none; }
.pc-pick:hover { border-color: var(--pc-ink); background: var(--pc-sky-1); color: var(--pc-ink); }
.pc-pick__input:checked + .pc-pick { border-color: var(--pc-ink); background: var(--pc-yellow); color: var(--pc-ink); box-shadow: 0 3px 0 var(--pc-ink); }
.pc-pick__input:checked + .pc-pick i { color: var(--pc-ink); }
.pc-pick__input:checked + .pc-pick .bx-check { display: inline-block; }
.pc-pick__input:checked + .pc-pick .bx-plus { display: none; }
.pc-pick__input:focus-visible + .pc-pick { outline: 3px solid var(--pc-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--pc-yellow); }
.pc-picks__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 12px 0 0; font-size: .875rem; color: var(--pc-muted); }
.pc-picks__count { margin: 0; font-weight: 600; }
.pc-picks__count b { color: var(--pc-ink); }

/* ---------- Results ---------- */
.pc-results { padding: 24px 18px 22px; }
@media (min-width: 768px) { .pc-results { padding: 28px 26px 24px; } }
.pc-results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 18px; }
.pc-root .pc-results__title { margin: 0 0 6px; font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--pc-display); color: var(--pc-ink); }
.pc-results__sub { margin: 0; max-width: 46rem; color: var(--pc-ink-2); }
.pc-results__sub b { color: var(--pc-ink); }
/* Sort control for the stacked (narrow) layout, where the column headings are hidden */
.pc-sortsel { display: none; flex-direction: column; gap: 4px; margin: 0; font: 700 .8125rem/1.2 var(--pc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted); }
.pc-root .pc-sortsel select { min-height: 44px; max-width: 100%; padding: 8px 36px 8px 12px; border: 2px solid var(--pc-ink); border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232F2A4F' d='M12 15.5 6.5 10l1.4-1.4 4.1 4.1 4.1-4.1 1.4 1.4z'/%3E%3C/svg%3E") no-repeat right 10px center / 20px; font: 600 .9375rem/1.2 var(--pc-display); letter-spacing: 0; text-transform: none; color: var(--pc-ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.pc-updated { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--pc-muted); }
.pc-updated i { flex: none; font-size: 1.05rem; line-height: calc(.8125rem * 1.45); color: var(--pc-violet); }
.pc-noscript { margin: 0; padding: 18px; border: 2px dashed rgba(47, 42, 79, .35); border-radius: 16px; text-align: center; font-weight: 600; color: var(--pc-ink-2); }

/* The comparison table (desktop): a bordered sheet; the sorted column is tinted yellow, CanIPhish's row violet */
.pc-tablewrap { border: 3px solid var(--pc-ink); border-radius: 20px; overflow: hidden; }
.pc-table { width: 100%; border-collapse: collapse; }
.pc-table th, .pc-table td { padding: 16px 10px; border-bottom: 2px solid var(--pc-line); text-align: center; vertical-align: middle; font-weight: 400; }
.pc-table thead th { padding: 0; background: var(--pc-sky-0); border-bottom: 3px solid var(--pc-ink); vertical-align: bottom; }
.pc-table thead .pc-th-prov { width: 21%; padding: 14px 16px 13px; text-align: left; font: 700 .75rem/1.2 var(--pc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); }
.pc-table tbody tr:last-child > * { border-bottom: 0; }
.pc-sort { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; margin: 0; padding: 12px 6px 11px; border: 0; border-radius: 0; background: transparent; color: var(--pc-ink); cursor: pointer; transition: background-color .15s ease; }
.pc-sort:hover { background-color: var(--pc-sky-1); }
.pc-root .pc-sort:focus-visible { outline-offset: -5px; box-shadow: none; }
.pc-sort__name { display: inline-flex; align-items: center; gap: 2px; font: 700 .9375rem/1.2 var(--pc-display); }
.pc-sort__name i { font-size: 1.05rem; color: var(--pc-muted); }
.pc-sort__sub { font: 600 .75rem/1.25 var(--pc-body); color: var(--pc-muted); }
/* The heading's text for the stacked layout, where the buttons are hidden (see below) */
.pc-sort__text { display: none; }
.pc-table thead th.is-sorted { background-color: #FFF1C2; box-shadow: inset 0 -4px 0 var(--pc-yellow); }
.pc-table thead th.is-sorted .pc-sort__name i { color: var(--pc-ink); }
.pc-table tbody .is-sorted { background-image: linear-gradient(rgba(255, 201, 77, .14), rgba(255, 201, 77, .14)); }
.pc-row--ours > * { background-color: var(--pc-ours); }
.pc-table .pc-prov { width: 21%; padding: 16px; text-align: left; }
.pc-row--ours .pc-prov { box-shadow: inset 6px 0 0 var(--pc-violet); }
.pc-prov__name { display: block; font: 700 1.125rem/1.2 var(--pc-display); color: var(--pc-ink); }
.pc-prov__badge { display: inline-block; margin: 4px 0 0; padding: 2px 8px 1px; border: 2px solid var(--pc-ink); border-radius: 999px; background: var(--pc-green); font: 700 .6875rem/1.3 var(--pc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink); }
.pc-prov__term { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.35; color: var(--pc-muted); }
.pc-prov__link { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding-bottom: 1px; border-bottom: 2px solid var(--pc-yellow); font: 600 .8125rem/1.2 var(--pc-display); color: var(--pc-link); text-decoration: none; }
.pc-prov__link:hover, .pc-prov__link:focus { color: var(--pc-ink); border-bottom-color: var(--pc-coral); text-decoration: none; }
.pc-prov__link i { font-size: .95rem; }
.pc-plan { display: block; margin: 0 0 4px; font: 700 .6875rem/1.25 var(--pc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); }
.pc-price { display: block; font: 700 1.5rem/1.1 var(--pc-display); color: var(--pc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-price__cur { margin-right: 1px; font-size: .62em; vertical-align: .5em; }
.pc-price__per { margin-left: 1px; font-size: .52em; font-weight: 600; color: var(--pc-muted); }
.pc-per { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.3; color: var(--pc-muted); font-variant-numeric: tabular-nums; }
.pc-note { display: block; margin: 5px auto 0; max-width: 13rem; font-size: .75rem; line-height: 1.35; color: var(--pc-muted); }
.pc-none { display: inline-block; font-size: 1.5rem; font-weight: 300; line-height: 1; color: #B4AFCC; }
.pc-min { display: inline-block; padding: 2px 9px 1px; border: 2px dashed rgba(47, 42, 79, .3); border-radius: 999px; font: 600 .8125rem/1.35 var(--pc-display); color: var(--pc-muted); white-space: nowrap; }
.pc-contact { display: block; font: 600 .875rem/1.3 var(--pc-display); color: var(--pc-muted); }
.pc-free { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 2px; border: 2px solid var(--pc-ink); border-radius: 999px; font: 700 .75rem/1.3 var(--pc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink); white-space: nowrap; }
.pc-free i { font-size: .95rem; }
.pc-free--forever { background: #DDF7E8; }
.pc-free--trial { background: #FFF1C2; }
/* "+ Add-ons": a disclosure, so the list works on touch and with a keyboard (the old hover tooltip did neither) */
.pc-addons { margin: 7px auto 0; max-width: 15rem; }
.pc-addons > summary { display: inline-flex; align-items: center; gap: 1px; padding: 2px 9px 1px; border-radius: 999px; background: #FFE9DC; font: 700 .75rem/1.4 var(--pc-display); color: #A2400E; cursor: pointer; list-style: none; }
.pc-addons > summary::-webkit-details-marker { display: none; }
.pc-addons > summary::marker { content: ""; }
.pc-addons > summary:hover { background: #FFDCC8; }
.pc-addons > summary i { font-size: .95rem; transition: transform .2s ease; }
.pc-addons[open] > summary i { transform: rotate(180deg); }
.pc-addons__list { margin: 6px 0 0; padding: 8px 10px; border: 2px solid var(--pc-line); border-radius: 12px; background: #fff; font-size: .75rem; line-height: 1.45; color: var(--pc-ink-2); text-align: left; }
.pc-quote { color: var(--pc-muted); }
.pc-quote__pill { display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 0 0; padding: 3px 11px 2px; border: 2px dashed rgba(47, 42, 79, .4); border-radius: 999px; background: #fff; font: 600 .8125rem/1.3 var(--pc-display); color: var(--pc-ink-2); vertical-align: middle; }
.pc-quote__pill i { font-size: 1rem; }
.pc-quote__text { font-size: .875rem; vertical-align: middle; }

/* Stacked layout below 992px: every provider is a card and every plan a line in it. The headings stay in the
   table for screen readers but are hidden, so the sort buttons give way to their plain text (a focusable control
   must never be invisible) and the Sort by menu takes over. Plans a provider doesn't offer are left out. */
@media (max-width: 991.98px) {
  .pc-sortsel { display: flex; }
  .pc-tablewrap { border: 0; border-radius: 0; overflow: visible; }
  .pc-table, .pc-table tbody, .pc-table tr, .pc-table th, .pc-table td { display: block; }
  .pc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pc-sort { display: none; }
  .pc-sort__text { display: inline; }
  .pc-table tbody { display: grid; gap: 16px; }
  .pc-table tr { border: 3px solid var(--pc-ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--pc-ink); overflow: hidden; }
  .pc-row--ours { background: var(--pc-ours); }
  .pc-table th, .pc-table td { border-bottom: 0; }
  .pc-table .pc-prov { width: auto; padding: 14px 16px 12px; }
  .pc-row--ours .pc-prov { box-shadow: inset 0 6px 0 var(--pc-violet); padding-top: 18px; }
  .pc-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 16px; border-top: 2px solid var(--pc-line); text-align: right; }
  /* The plan's column name; "/ ''" keeps it out of the accessible name where supported (the hidden heading names it) */
  .pc-table td::before { content: attr(data-label); content: attr(data-label) / ""; flex: none; max-width: 45%; padding-top: 2px; font: 700 .8125rem/1.3 var(--pc-display); color: var(--pc-ink-2); text-align: left; }
  .pc-table td.is-empty { display: none; }
  .pc-table td.pc-quote { display: block; text-align: left; }
  .pc-table td.pc-quote::before { content: none; }
  .pc-cell { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
  .pc-note { margin-right: 0; max-width: 16rem; text-align: right; }
  .pc-addons { margin-right: 0; text-align: right; }
}
@media (min-width: 640px) and (max-width: 991.98px) { .pc-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* ==========================================================================
   READING THE COMPARISON: the tier ladder and what a price covers
   ========================================================================== */
.pc-tiers { background:
    radial-gradient(circle at 12% 20%, rgba(255, 201, 77, .28) 0 3px, transparent 4px) 0 0 / 46px 46px,
    linear-gradient(180deg, #FFF6E6 0%, #FFF1DA 100%); }
.pc-ladder { display: grid; gap: 18px; }
@media (min-width: 640px) { .pc-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-ladder > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Five across, each tier a step higher than the one before */
@media (min-width: 1200px) {
  .pc-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .pc-ladder > :last-child:nth-child(odd) { grid-column: auto; }
  .pc-rung { margin-top: calc((4 - var(--step, 0)) * 22px); }
}
.pc-rung { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 20px; background: #fff; border: 3px solid var(--pc-ink); border-radius: 20px; box-shadow: var(--pc-drop); }
.pc-rung__icon { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 0 14px; border: 3px solid var(--pc-ink); border-radius: 16px; background: var(--a, var(--pc-sky-2)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--pc-ink); font-size: 1.6rem; color: var(--pc-ink); }
.pc-rung__tier { margin: 0 0 2px; font: 700 .75rem/1.2 var(--pc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-muted); }
.pc-rung h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 8px; }
.pc-rung p:last-child { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--pc-ink-2); }
.pc-extras { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 768px) { .pc-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pc-extras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc-extra { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 2px dashed rgba(47, 42, 79, .4); border-radius: 20px; background: rgba(255, 255, 255, .8); }
.pc-extra > i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--pc-ink); border-radius: 14px; background: var(--a, var(--pc-sky)); box-shadow: 0 3px 0 var(--pc-ink); font-size: 1.4rem; color: var(--pc-ink); }
.pc-extra h3 { font-size: 1.1rem; line-height: 1.25; margin: 2px 0 4px; }
.pc-extra p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--pc-ink-2); }

/* ==========================================================================
   MORE PLANNING TOOLS + TEAM CALL TO ACTION
   ========================================================================== */
.pc-more { background: #fff; }
.pc-cards { display: grid; gap: 22px; padding-top: 26px; }
@media (min-width: 768px) { .pc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 991.98px) { .pc-cards { grid-template-columns: 1fr; } }
.pc-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; background: var(--pc-sky-0); border: 3px solid var(--pc-ink); border-radius: var(--pc-r); box-shadow: var(--pc-drop); }
.pc-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: -48px 0 14px; border: 3px solid var(--pc-ink); border-radius: 18px; background: var(--a, var(--pc-sky)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--pc-ink); font-size: 1.75rem; color: var(--pc-ink); }
.pc-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.pc-card p { margin: 0 0 14px; font-size: .98rem; color: var(--pc-ink-2); }
.pc-card .pc-arrow { margin-top: auto; align-self: flex-start; font-size: 1rem; }

.pc-team { background: #fff; padding-top: 0; }
.pc-team__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 24px; border: 3px solid var(--pc-ink); border-radius: 32px; background: var(--pc-night); background-image:
    radial-gradient(circle at 3% 4%, var(--pc-yellow) 0 5px, transparent 6px),
    radial-gradient(circle at 97.5% 3%, var(--pc-coral) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 98.5%, var(--pc-green) 0 5px, transparent 6px),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(140, 124, 240, .45), transparent 70%),
    radial-gradient(ellipse 50% 70% at 0 100%, rgba(82, 180, 255, .25), transparent 70%);
  box-shadow: var(--pc-drop-lg); color: #fff; overflow: hidden; }
@media (min-width: 992px) { .pc-team__panel { grid-template-columns: 1.1fr .9fr; align-items: center; padding: 56px; } }
.pc-root .pc-team__panel .pc-h2 { color: #fff; }
.pc-team__panel .pc-eyebrow { background: var(--pc-yellow); border-color: var(--pc-deep); box-shadow: 0 3px 0 var(--pc-deep); }
.pc-team__panel .pc-eyebrow i { color: var(--pc-ink); }
.pc-team__text { color: #E4E1F7; font-size: 1.0625rem; }
.pc-ticks { display: grid; gap: 10px; margin: 0 0 28px; }
@media (min-width: 576px) { .pc-ticks { grid-template-columns: 1fr 1fr; } }
.pc-ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; line-height: 1.4; color: #fff; }
.pc-ticks i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--pc-green); color: var(--pc-ink); font-size: 1.1rem; }
.pc-root .pc-team__panel a:not([class]) { color: #fff; text-decoration-color: var(--pc-yellow); }
.pc-root .pc-team__panel a:not([class]):hover { color: #fff; text-decoration-color: var(--pc-coral); }
.pc-team__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.pc-team__ctas .pc-btn { box-shadow: 0 5px 0 var(--pc-deep); border-color: var(--pc-deep); }
@media (max-width: 399.98px) { .pc-team__ctas .pc-btn { white-space: normal; text-align: center; } }
.pc-team__small { margin: 16px 0 0; font-size: .875rem; color: #C9C4EC; }
/* The CanIPhish row for the headcount above, as a quote card with a second sheet behind it. The stacking context
   is the art column's, not the card's: inside the card's own, the sheet (z-index -1) would paint over the card's
   white background. */
.pc-team__art { position: relative; isolation: isolate; padding: 0 12px 12px 0; }
.pc-estimate { position: relative; width: min(100%, 390px); margin: 0 auto; padding: 20px 22px 16px; background: #fff; color: var(--pc-ink); border: 3px solid var(--pc-deep); border-radius: 22px; box-shadow: 0 8px 0 var(--pc-deep); }
.pc-estimate::before { content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: -1; border: 3px solid var(--pc-deep); border-radius: 22px; background: var(--pc-sky-2); }
.pc-estimate__title { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 700 1.15rem/1.2 var(--pc-display); color: var(--pc-ink); }
.pc-estimate__title i { font-size: 1.35rem; color: var(--pc-coral); }
.pc-estimate__size { margin: 0 0 10px; font-size: .9375rem; color: var(--pc-muted); }
.pc-estimate__size b { color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.pc-estimate__lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 2px dashed var(--pc-line); }
.pc-estimate__plan { font: 600 1rem/1.25 var(--pc-display); color: var(--pc-ink-2); }
.pc-estimate__value { text-align: right; font: 700 1.25rem/1.15 var(--pc-display); color: var(--pc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-estimate__value small { display: block; margin-top: 2px; font: 600 .75rem/1.2 var(--pc-body); color: var(--pc-muted); }
.pc-estimate__value .pc-free, .pc-estimate__value .pc-min { font-size: .75rem; }
.pc-estimate__foot { margin: 6px 0 0; padding-top: 10px; border-top: 2px dashed var(--pc-line); font-size: .75rem; line-height: 1.4; color: var(--pc-muted); }

/* ==========================================================================
   FAQ (details/summary, crawlable)
   ========================================================================== */
.pc-faq { background: var(--pc-sky-1); }
.pc-faq__layout { display: grid; gap: 28px; }
@media (min-width: 992px) { .pc-faq__layout { grid-template-columns: 340px 1fr; gap: 56px; align-items: start; } .pc-faq__intro { position: sticky; top: 110px; } .pc-root .pc-faq__intro .pc-h2 { font-size: 2.5rem; } }
.pc-faq__intro p { color: var(--pc-ink-2); }
.pc-faq__list { display: grid; gap: 14px; }
.pc-qa { background: #fff; border: 3px solid var(--pc-ink); border-radius: 18px; box-shadow: 0 4px 0 var(--pc-ink); }
.pc-qa[open] { box-shadow: 0 5px 0 var(--pc-ink); }
.pc-qa > summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; border-radius: 15px; }
.pc-qa > summary::-webkit-details-marker { display: none; }
.pc-qa > summary::marker { content: ""; }
.pc-root .pc-qa__q { flex: 1; margin: 0; font: 600 1.125rem/1.35 var(--pc-display); color: var(--pc-ink); }
.pc-qa__icon { flex: none; position: relative; width: 32px; height: 32px; border: 2px solid var(--pc-ink); border-radius: 50%; background: var(--pc-yellow); transition: background-color .2s ease; }
.pc-qa__icon::before, .pc-qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; background: var(--pc-ink); border-radius: 2px; }
.pc-qa__icon::after { transform: rotate(90deg); transition: transform .25s ease; }
.pc-qa[open] .pc-qa__icon { background: var(--pc-green); }
.pc-qa[open] .pc-qa__icon::after { transform: rotate(0); }
.pc-qa__a { padding: 0 18px 18px; color: var(--pc-ink-2); }
.pc-qa__a p:last-child { margin-bottom: 0; }

/* ---------- Site header on this page ----------
   Below 992px the layout's hamburger is dark and the header is transparent until the page scrolls, so over the
   dark header it all but vanished: white until the header turns white on scroll. */
@media (max-width: 991.98px) { #header:not(.js-header-fix-moment) .navbar-toggler { color: #fff; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pc-root *, .pc-root *::before, .pc-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}