/* ============================================================
   Pressonify Editorial Design System
   Extracted (Task W1a) from templates/landing.html's inline
   <style> block and #po-root inline style attribute (PR #29,
   the editorial/newspaper homepage v2 redesign). This is the
   shared foundation other pages (pricing, launch, ...) consume
   via the `.editorial-root` class + templates/partials/editorial_*.html.

   Sections below are grouped as: design tokens, reset/primitives,
   nav, announcement strip, footer, then the shared component
   classes (CTA buttons, section kicker, card surface, check-tick
   row). Values already present in landing.html were moved
   verbatim; the new shared component base rules (kicker/card/
   check-tick, and the single-instance CTA bases) are noted where
   they were synthesized from repeated inline patterns rather than
   copied from an existing CSS rule -- see the W1a task report for
   the per-rule provenance.
   ============================================================ */

/* ---- Design tokens ----
   NOTE: --po-pad-x intentionally stays OUT of this class and
   remains a small inline style="--po-pad-x:40px" on #po-root in
   landing.html. It is the one token with a same-element responsive
   override (#po-root{--po-pad-x:28px} below): an inline declaration
   always beats an ID-selector rule in the CSS cascade, so today
   that responsive override is inert (padding stays 40px at all
   widths). Moving the base value into this class would give it
   lower specificity (0,1,0) than the #po-root override (1,0,0),
   making the override start firing and changing the live layout.
   Keeping the inline declaration preserves today's exact (if
   quirky) behavior. See task report for detail. */
.editorial-root{
  --paper:#f6f3ec;
  --paper-2:#fffdf8;
  --ink:#1a1713;
  --ink-2:#6b6459;
  --ink-3:#9c9488;
  --line:#ece7da;
  --line-2:#ddd5c4;
  --hair:rgba(26,23,19,.07);
  --green:#107a45;
  --green-bright:#16a34a;
  --green-tint:#e9f3ec;
  --cta:#1a1713;
  --cta-text:#f7f4ee;
  --shadow-sm:0 1px 2px rgba(26,23,19,.04),0 8px 20px -14px rgba(26,23,19,.12);
  --shadow:0 1px 3px rgba(26,23,19,.05),0 24px 50px -26px rgba(26,23,19,.18);
  --shadow-lg:0 2px 8px rgba(26,23,19,.06),0 60px 100px -50px rgba(26,23,19,.34);
  background:var(--paper);
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}
@media (max-width:1024px){
  #po-root{--po-pad-x:28px}
}

/* ---- Reset & primitives ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:#f6f3ec;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@keyframes po-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@keyframes po-blink{0%,100%{opacity:1}50%{opacity:0}}
::selection{background:#16a34a;color:#fff}
a{color:#107a45}
a:hover{color:#0b5c33}
@media (prefers-reduced-motion:reduce){
  #po-root *{animation:none!important}
}

/* ---- Shared link hover utility (used across nav + footer) ---- */
.po-hover-green:hover{color:var(--green)!important}

/* ---- Announcement strip ---- */
.po-claim:hover{border-color:var(--green-bright)!important}

/* ---- Nav ---- */
.po-loglink:hover{color:var(--ink)!important}
@media (max-width:768px){
  .po-nav{display:none!important}
  .po-loglink{display:none!important}
}

/* ---- Footer ---- */
@media (max-width:768px){
  .po-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:32px!important}
}
@media (max-width:480px){
  .po-foot-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
}

/* ============================================================
   Shared component classes
   ============================================================ */

/* CTA buttons: dark (sm/lg) + green variants, incl. hover/active
   transforms. Hover/active rules were already class-based in the
   source <style> block and move verbatim. Base (non-hover) rules:
   - .po-cta-sm and .po-cta-green each had exactly one usage in
     landing.html, so their full inline base was moved into the
     class with no risk of divergence (the element's inline style
     attribute was then removed since the class now covers it).
   - .po-cta-lg had two usages with different font-size/padding/
     border-radius/display; only the properties identical across
     both instances are promoted to the base class. Consuming pages
     must still set font-size/padding/border-radius/display
     themselves (inline or a page-local modifier). */
/* border-radius:...!important below (Task W2): base.html keeps
   /static/css/pressonify-design-system.css linked for its 46+ extending
   pages' content blocks, and that stylesheet carries a sitewide
   `*,*::before,*::after{border-radius:0!important}` ("Newspaper style")
   reset. Without an equally-!important, higher-specificity rule here, this
   pill button would render square-cornered on every base.html page while
   staying correctly rounded on landing/pricing/launch (which don't link
   that stylesheet). Harmless on those three: nothing there competes with
   this rule anyway, so the render is unchanged. */
.po-cta-sm{text-decoration:none;background:var(--cta);color:var(--cta-text);font-size:14.5px;font-weight:600;padding:11px 22px;border-radius:8px!important;transition:transform .18s cubic-bezier(.2,.6,.2,1),box-shadow .18s cubic-bezier(.2,.6,.2,1);box-shadow:var(--shadow-sm)}
.po-cta-sm:hover{transform:translateY(-1px)!important;box-shadow:0 10px 22px -10px rgba(26,23,19,.5)!important}
.po-cta-sm:active{transform:translateY(0)!important}

.po-cta-lg{text-decoration:none;background:var(--cta);color:var(--cta-text);font-weight:600;align-items:center;gap:10px;transition:transform .18s cubic-bezier(.2,.6,.2,1),box-shadow .18s cubic-bezier(.2,.6,.2,1);box-shadow:var(--shadow)}
.po-cta-lg:hover{transform:translateY(-2px)!important;box-shadow:0 20px 40px -14px rgba(26,23,19,.5)!important}
.po-cta-lg:active{transform:translateY(0)!important}

.po-cta-green{text-decoration:none;background:var(--green-bright);color:#08210f;font-size:16.5px;font-weight:700;padding:19px 34px;border-radius:10px;display:inline-flex;align-items:center;gap:10px;transition:transform .18s cubic-bezier(.2,.6,.2,1),box-shadow .18s cubic-bezier(.2,.6,.2,1);box-shadow:0 12px 34px -10px rgba(22,163,74,.6)}
.po-cta-green:hover{transform:translateY(-2px)!important;box-shadow:0 22px 50px -12px rgba(22,163,74,.7)!important}
.po-cta-green:active{transform:translateY(0)!important}

/* Section kicker (mono-caps label). Synthesized from the
   repeated JetBrains Mono / uppercase / letter-spaced eyebrow
   pattern used above the hero H1, the "Citations tracked across"
   engine band and the offer panel's "The honest comparison"
   label -- the three usages that agree exactly. Other landing.html
   eyebrows (final-CTA, flip-card labels) use the same family but
   differing color/letter-spacing/font-size and were left page-local
   rather than forced into this base. Not wired onto any
   landing.html element in this task -- see task report. */
.po-kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* Card surface (paper-2 + radius + shadow). Synthesized from the
   proof/testimonial card pattern (the most common radius+shadow
   combination on the page); trust cards (14px/--shadow-sm) and the
   flip-card faces (16px/--shadow-lg) use different radius/shadow
   and would override those two properties per-instance. Not wired
   onto any landing.html element in this task -- see task report. */
.po-card{background:var(--paper-2);border-radius:16px;box-shadow:var(--shadow)}

/* Check-tick row: the offer panel's feature checklist pattern
   (circular green-tint tick + label). Not wired onto any
   landing.html element in this task -- see task report. */
.po-check-row{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--ink)}
.po-check-tick{width:20px;height:20px;border-radius:50%;background:var(--green-tint);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}

/* ---- Base-extending pages only (.editorial-base is set by base.html's
   <body>; the three standalone pages -- landing/launch/pricing -- do NOT
   carry it and are unaffected by everything below). Fixes the two
   foundation gaps the wave-2 groups surfaced:
   1. The chrome partials pad with var(--po-pad-x), which only
      landing.html defined (inline). Extending pages got zero gutters
      below ~1140px. Define the default + responsive value here.
   2. The legacy pressonify-design-system.css universal reset
      (*{font-family:Inter}) pinned all text on extending pages to the
      old face. A higher-specificity inherit sweep restores the editorial
      cascade; page/base rules with class specificity still win because
      they load later. */
.editorial-base{--po-pad-x:40px}
@media (max-width:768px){.editorial-base{--po-pad-x:28px}}
.editorial-base *{font-family:inherit}

/* ---- Nav dropdowns (restores the About/Resources menus the editorial
   nav replacement dropped; the v2 design drew the carets). CSS-only:
   hover + :focus-within, so keyboard users can tab into the menu. The
   trigger itself stays a real link (tap/click navigates), so every
   destination remains reachable without hover support. Desktop-only by
   construction: .po-nav is hidden at the 768px collapse. */
.po-dd{position:relative;display:inline-flex}
.po-dd-caret{font-size:9px;opacity:.55;margin-left:2px}
.po-dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.po-dd-menu{position:absolute;top:calc(100% + 12px);left:-16px;min-width:196px;padding:9px 0;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);display:none;flex-direction:column;z-index:30}
.po-dd:hover .po-dd-menu,.po-dd:focus-within .po-dd-menu{display:flex}
.po-dd-menu a{padding:9px 18px;color:var(--ink-2);text-decoration:none;font-size:14.5px;transition:color .16s,background .16s}
.po-dd-menu a:hover,.po-dd-menu a:focus{color:var(--green);background:var(--green-tint)}