/* RuleCrest add-on product pages (/addons and the four pages it links to). Loaded after /site.css and uses its tokens, header, footer and type, so the pages
   match the rest of the site in light and dark. Self-hosted only: no web fonts, nothing fetched from another origin (the CSP is default-src 'self').
   The 3-D logos are SVG files under /src/media/branding/addons/. */

/* a colour of its own for each product; used for the card edge, the glow behind the logo and the year tags */
.product--scrub, .pcard--scrub { --accent: #1F9A62; --accent-ink: #0E5A37; }
.product--breach, .pcard--breach { --accent: #E5392C; --accent-ink: #8E1209; }
.product--phish, .pcard--phish { --accent: #1F86D6; --accent-ink: #0B4C8A; }
.product--policy, .pcard--policy { --accent: #E0A500; --accent-ink: #6B4A00; }

/* ---- the products on the add-ons page ---- */
.products { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { position: relative; display: flex; flex-direction: column; gap: .35rem; background: var(--card); border: 1px solid var(--hairline); border-top: 5px solid var(--accent, var(--tape)); border-radius: var(--radius); padding: 1.1rem 1.4rem 1.3rem; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard:focus-within { outline: 3px solid var(--tape); outline-offset: 3px; }
.pcard__logo { width: 7rem; height: 7rem; margin: .1rem 0 .2rem -.55rem; display: block; transition: transform .25s ease; }
.pcard:hover .pcard__logo { transform: perspective(600px) rotateY(-10deg) rotateX(4deg) scale(1.04); }
.pcard h3 { margin: 0; font-size: 1.35rem; }
.pcard h3 a { color: var(--ink); text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.pcard h3 a:focus-visible { outline: none; }
.pcard p { margin: 0; color: var(--slate); font-size: .98rem; }
.pcard__more { margin-top: auto; padding-top: .8rem; font: 700 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pcard__more span { display: inline-block; transition: transform .15s ease; }
.pcard:hover .pcard__more span { transform: translateX(4px); }

/* ---- the top of a product page ---- */
.p-hero { padding-block: clamp(2.4rem, 5vw, 4rem) clamp(2.2rem, 4vw, 3.4rem); background:
  linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(180deg, var(--hero-from), var(--hero-to)); border-bottom: 1px solid var(--hairline); }
.p-hero__grid { display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
.p-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: .35em; }
.p-hero .lede { margin-bottom: 1.2rem; }
.p-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.crumbs { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font: 600 .76rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 1.1rem; }
.crumbs a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.crumbs a:hover { color: var(--ink); border-bottom-color: var(--tape); }

/* the logo, lit from behind and floating; it tilts toward the pointer on hover and stays still for anyone who prefers less motion */
.stage { position: relative; width: min(100%, 25rem); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.stage::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 10%, transparent) 62%, transparent 74%); }
.stage::after { content: ""; position: absolute; inset: 1%; border-radius: 50%; border: 1.5px dashed var(--hairline); }
.stage__float { position: relative; width: 88%; animation: stage-bob 6s ease-in-out infinite; }
.stage__logo { display: block; width: 100%; height: auto; transition: transform .35s ease; filter: drop-shadow(0 22px 26px color-mix(in srgb, var(--accent-ink) 35%, transparent)); }
.stage:hover .stage__logo { transform: perspective(900px) rotateY(-14deg) rotateX(6deg) scale(1.03); }
@keyframes stage-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---- sections shared by the product pages ---- */
.product .notice { max-width: 78ch; }
.product .two { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.product .lead-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 70ch; }
.product .lead-list li { position: relative; padding-left: 1.5rem; }
.product .lead-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .75rem; height: 3px; border-radius: 2px; background: var(--accent, var(--tape)); }
.product .steps--row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* big figures from a named source */
.stat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }
.stat { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .3rem; }
.stat b { font: 700 2.5rem/1 var(--serif); color: var(--ink); }
.stat span { color: var(--slate); font-size: .95rem; }
.stat small { margin-top: auto; padding-top: .5rem; font: 600 .72rem/1.4 var(--mono); letter-spacing: .02em; color: var(--slate); }
.stat b::after { content: ""; display: block; width: 2rem; height: 4px; border-radius: 2px; background: var(--accent, var(--tape)); margin-top: .55rem; }

/* real events, by year */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.filter { font: 700 .76rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .65rem .95rem; border-radius: 999px; border: 1.5px solid var(--hairline); background: var(--card); color: var(--ink); cursor: pointer; min-height: 2.75rem; }
.filter:hover { border-color: var(--tape); box-shadow: var(--shadow-sm); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.event { background: var(--card); border: 1px solid var(--hairline); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: 1.2rem 1.35rem 1.15rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .55rem; }
.event[hidden] { display: none; }
.event__when { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
:root[data-theme="dark"] .event__when { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .event__when { color: var(--accent); } }
.event__when i { font-style: normal; color: var(--slate); letter-spacing: .06em; }
.event h3 { margin: 0; font-size: 1.2rem; }
.event p { margin: 0; font-size: .96rem; color: var(--slate); max-width: none; }
.event__lesson { margin-top: auto; padding-top: .7rem; border-top: 1px dashed var(--hairline); color: var(--ink) !important; }
.event__lesson b { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tape-text); display: block; margin-bottom: .2rem; }
.filter-count { font: 600 .8rem var(--mono); color: var(--slate); margin: 0 0 1rem; max-width: none; }

/* illustrative scenarios */
.scenes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.scene { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.4rem 1.4rem 1.3rem; position: relative; }
.scene::before { content: attr(data-n); position: absolute; top: -.8rem; left: 1.2rem; font: 700 .72rem/1 var(--mono); letter-spacing: .1em; background: var(--accent); color: #fff; padding: .4rem .6rem; border-radius: 6px; }
.product--policy .scene::before { color: #17181C; }
.scene h3 { margin: .3rem 0 .4rem; }
.scene p { color: var(--slate); font-size: .96rem; }
.scene p:last-child { margin: 0; }
.scene__then { border-top: 1px dashed var(--hairline); padding-top: .7rem; margin-top: .8rem; color: var(--ink) !important; }

/* what the add-on sees and does not see, for the privacy reader */
.split { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.split .panel h3 { display: flex; align-items: center; gap: .6rem; }
.split .yes h3::before, .split .no h3::before { content: ""; width: 1.3rem; height: 1.3rem; border-radius: 50%; flex: none; }
.split .yes h3::before { background: var(--verify); }
.split .no h3::before { background: var(--signal); }

/* a pairing: two products side by side with the join between them */
.pair { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.pair__join { display: grid; place-items: center; font: 700 .8rem var(--mono); letter-spacing: .1em; color: var(--slate); }
.pair__join span { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--tape); background: var(--card); box-shadow: var(--shadow-sm); }
.pair .panel { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .2rem 1rem; align-items: start; }
.pair .panel img { width: 4.5rem; height: 4.5rem; grid-row: span 2; }
.pair .panel h3 { margin: 0; align-self: end; }
.pair .panel p { margin: 0; color: var(--slate); font-size: .95rem; grid-column: 2; }

/* sources, in words (the site links nowhere outside itself) */
.sources { font-size: .9rem; color: var(--slate); max-width: 80ch; }
.sources ol { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.sources li::marker { font-family: var(--mono); font-size: .8rem; }

@media (max-width: 52rem) {
  .p-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .stage { width: min(72%, 18rem); order: -1; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair__join { padding-block: .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__float { animation: none; }
  .stage__logo, .pcard, .pcard__logo, .pcard__more span { transition: none; }
  .stage:hover .stage__logo, .pcard:hover, .pcard:hover .pcard__logo, .pcard:hover .pcard__more span { transform: none; }
}
@media print { .stage__float { animation: none; } .filters { display: none; } .event[hidden] { display: flex; } }

/* ScrubMyPII: the logo leads the page, with the name beside it */
.brandmark { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.brandmark__logo { width: clamp(8rem, 17vw, 12rem); height: auto; flex: none; filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--accent-ink) 35%, transparent)); transition: transform .35s ease; }
.brandmark:hover .brandmark__logo { transform: perspective(700px) rotateY(-14deg) rotateX(6deg) scale(1.04); }
.brandmark__name { display: block; margin-top: .6rem; font: 700 clamp(1.7rem, 3.4vw, 2.3rem)/1 var(--serif); letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .brandmark__logo { transition: none; } .brandmark:hover .brandmark__logo { transform: none; } }
.product ol.steps { list-style: none; padding: 0; margin: 0; }
.product .steps--row { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }

/* the label on products that are coming soon */
.pill { display: inline-flex; align-items: center; align-self: flex-start; font: 700 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: .4rem .6rem; border-radius: 999px; border: 1px dashed var(--accent, var(--tape)); color: var(--accent-ink, var(--tape-text)); background: var(--bg-soft); }
:root[data-theme="dark"] .pill { color: var(--accent, var(--tape)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill { color: var(--accent, var(--tape)); } }
.p-hero .pill { margin-bottom: 1rem; }

/* ---- the back buttons (Add-ons page: Home page or My Training; product pages: Back to Add-ons) ---- */
.backbar { margin: 0 0 1.2rem; max-width: none; }
.btn--back { gap: .6rem; min-height: 2.75rem; padding: .35rem 1.1rem .35rem .4rem; border-radius: 999px; background: var(--card); border: 1.5px solid var(--hairline); color: var(--ink); box-shadow: var(--shadow-sm); font-size: .92rem; }
.btn--back:hover, .btn--quiet.btn--back:hover { background: var(--card); color: var(--ink); border-color: var(--tape); box-shadow: var(--shadow); }
.btn__arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tape); color: var(--tape-ink); font-size: 1.05rem; font-weight: 700; line-height: 1; transition: transform .18s ease; }
@media (prefers-reduced-motion: no-preference) { .btn--back:hover .btn__arrow { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .btn__arrow { transition: none; } }
@media print { .backbar { display: none; } }