/**
 * Generic v2 shell — page frame for every view without a bespoke template
 * (rankings, comparisons, guides, benchmarks, awards, stat reports, tools,
 * plain pages, archives, 404).
 *
 * Two jobs:
 *   1. A v2 hero + content frame around the block content.
 *   2. A token bridge that repaints the block design system (--hi-*) in the
 *      v2 palette, so the cards inside these pages stop being navy/blue.
 * Loaded AFTER hip-blocks so the bridge wins.
 */

/* ---- v2 tokens (chrome + frame) ---- */
:root{
  --paper:#F9F9FB; --cream:#ffedde; --red:#ff3f3f;
  --line:rgba(0,0,0,.13); --line-soft:rgba(0,0,0,.08);
  --muted:rgba(0,0,0,.62); --muted-2:rgba(0,0,0,.45);
  --r:14px; --r-sm:9px;
  --sh-1:0 1px 2px rgba(0,0,0,.05), 0 6px 18px -10px rgba(0,0,0,.14);
  --sh-2:0 2px 4px rgba(0,0,0,.06), 0 22px 44px -20px rgba(0,0,0,.26);
  --display:'Archivo', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --wrap:1200px; --hdr:66px;

  /* ---- token bridge: block design system in the v2 palette ---- */
  --hi-navy:#000;
  --hi-blue:#ff3f3f;
  --hi-sky:#ffedde;
  --hi-text:#000;
  --hi-muted:rgba(0,0,0,.62);
  --hi-border:rgba(0,0,0,.13);
  --hi-bg:#F9F9FB;
  --hi-card:#FFFFFF;
  --hi-radius:14px;
  --hi-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px -10px rgba(0,0,0,.14);
  --hi-font-display:'Archivo', system-ui, sans-serif;
  --hi-font-body:'IBM Plex Sans', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body.hip-generic-v2{margin:0;background:var(--paper);color:#000;font-family:var(--body);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.hip-generic-v2 h1,body.hip-generic-v2 h2,body.hip-generic-v2 h3,body.hip-generic-v2 h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.15;font-variation-settings:'wdth' 110}
body.hip-generic-v2 a{color:inherit;text-decoration:none}
body.hip-generic-v2 button,body.hip-generic-v2 input,body.hip-generic-v2 select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:5px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;display:block;margin-bottom:11px}
.eyebrow::before{content:'';display:inline-block;width:14px;height:2px;background:var(--red);vertical-align:3px;margin-right:9px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:14px;padding:10px 17px;transition:transform .12s,background .16s,border-color .16s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:#000}
.btn--outline{background:#fff;border-color:var(--line);color:#000}
.btn--outline:hover{border-color:var(--red);background:var(--cream)}

/* ---- hero ---- */
.ghero{background:#000;color:#fff;position:relative;overflow:hidden;padding:34px 0 38px}
.ghero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 360px at 86% -25%,rgba(255,63,63,.34),transparent 62%)}
.ghero::after{content:"";position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.ghero > *{position:relative;z-index:2}
.ghero .crumbs{font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.ghero .crumbs a:hover{color:#fff}
.ghero .crumbs span{color:rgba(255,255,255,.3)}
.ghero .eyebrow{color:#fff}
.ghero h1{font-size:clamp(28px,4.1vw,42px);font-variation-settings:'wdth' 106;letter-spacing:-.035em;margin-bottom:14px;max-width:24ch}
.ghero .lede{color:rgba(255,255,255,.72);font-size:16px;max-width:70ch;margin:0 0 18px}
.gmeta{display:flex;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.55)}
.gsearch{display:flex;gap:10px;max-width:560px;margin-top:6px}
.gsearch input{flex:1;min-width:0;padding:13px 16px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:15px}
.gsearch input::placeholder{color:rgba(255,255,255,.45)}
.gsearch input:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.14)}

/* ---- body ---- */
.gbody{padding:30px 0 54px}
.gcontent{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:30px}
.gcontent > *:first-child{margin-top:0}
.gcontent > *:last-child{margin-bottom:0}
.gcontent p{margin:0 0 16px;max-width:80ch}
.gcontent h2{font-size:clamp(21px,2.6vw,27px);margin:30px 0 12px}
.gcontent h3{font-size:19px;margin:24px 0 10px}
.gcontent h4{font-size:16px;margin:20px 0 8px}
.gcontent ul,.gcontent ol{margin:0 0 16px;padding-left:22px;max-width:80ch}
.gcontent li{margin-bottom:6px}
.gcontent a:not(.btn):not([class*="hi-"]){border-bottom:2px solid var(--red);font-weight:600}
.gcontent a:not(.btn):not([class*="hi-"]):hover{border-bottom-color:#000}
.gcontent img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.gcontent table{width:100%;border-collapse:collapse;font-size:14.2px;margin:0 0 18px;display:block;overflow-x:auto}
.gcontent th,.gcontent td{padding:11px 12px;border-bottom:1px solid var(--line-soft);text-align:left}
.gcontent th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.gcontent blockquote{margin:0 0 18px;padding:14px 18px;background:var(--cream);border-left:3px solid var(--red);border-radius:var(--r-sm)}
.gcontent blockquote p:last-child{margin-bottom:0}

/* ---- archive listing ---- */
.glist{display:flex;flex-direction:column;gap:12px}
.gitem{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:22px 24px;transition:box-shadow .2s,border-color .2s}
.gitem:hover{box-shadow:var(--sh-2);border-color:rgba(0,0,0,.26)}
.gitem h2{font-size:19px;margin-bottom:8px;font-variation-settings:'wdth' 100}
.gitem h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--red)}
.gitem p{margin:0 0 10px;color:var(--muted);font-size:14.2px;max-width:80ch}
.gitem__meta{font-family:var(--mono);font-size:11.5px;color:var(--muted-2)}
.gpager{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.gpager .page-numbers{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);font-size:13.5px;font-weight:600}
.gpager .page-numbers:hover{border-color:var(--red);background:var(--cream)}
.gpager .page-numbers.current{background:#000;border-color:#000;color:#fff}
.gempty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:48px 24px;text-align:center}
.gempty .big{font-family:var(--display);font-size:22px;font-weight:800;margin-bottom:10px}
.gempty p{color:var(--muted);max-width:50ch;margin:0 auto 20px;font-size:14.4px}
.glinks{display:flex;gap:10px;flex-wrap:wrap}

/* ---- block content sits on the v2 frame ---- */
.gcontent .hi-block + .hi-block{margin-top:22px}
.gcontent [class*="hi-"]{font-family:var(--body)}
.gcontent [class*="hi-"] h1,.gcontent [class*="hi-"] h2,
.gcontent [class*="hi-"] h3,.gcontent [class*="hi-"] h4{font-family:var(--display)}

@media (max-width:860px){
  .gcontent{padding:22px 18px}
}
@media (max-width:640px){
  .ghero{padding:26px 0 30px}
  .gcontent{padding:18px 16px}
  .gitem{padding:18px}
  .gsearch{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* The mobile sticky conversion bar and the scroll-top button both live at the
   bottom edge; lift the button above the bar when the bar is on screen. */
body:has(.hip-stickycta:not([hidden])) .v2-scrolltop{bottom:92px}

/* Plain-English summary callout at the top of policy pages. */
.gcontent .tldr{background:#ffedde;border:1px solid rgba(0,0,0,.12);border-left:3px solid #ff3f3f;border-radius:10px;padding:16px 18px;margin:0 0 22px}
.gcontent .tldr p{margin:0 0 8px;max-width:75ch}
.gcontent .tldr p:last-child{margin-bottom:0}
.gcontent .tldr strong:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ===== Kadence Advanced Form on pages: house form design, five colours ===== */
/* The form sits as a framed panel inside the article card; name + email share
   a row on desktop; everything else spans full width. */
.gcontent .kb-advanced-form{display:grid !important;grid-template-columns:1fr 1fr !important;gap:16px 18px !important;max-width:680px;background:#F9F9FB;border:1px solid rgba(0,0,0,.1);border-radius:14px;padding:24px;margin:10px 0 6px}
.gcontent .kb-advanced-form .kb-adv-form-field{margin:0;grid-column:1 / -1}
@media (min-width:700px){
  .gcontent .kb-advanced-form .wp-block-kadence-advanced-form-text{grid-column:1}
  .gcontent .kb-advanced-form .wp-block-kadence-advanced-form-email{grid-column:2}
}
.gcontent .kb-advanced-form .kb-adv-form-label{display:block;font-size:13.5px;font-weight:600;letter-spacing:.01em;margin:0 0 7px;color:#000}
.gcontent .kb-advanced-form .kb-adv-form-required{color:#ff3f3f;margin-left:2px}
.gcontent .kb-advanced-form .kb-field,
.gcontent .kb-advanced-form select{width:100%;border:1px solid rgba(0,0,0,.16);border-radius:10px;background:#fff;color:#000;padding:12px 14px;font:inherit;font-size:15px;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
.gcontent .kb-advanced-form .kb-field::placeholder{color:rgba(0,0,0,.38)}
.gcontent .kb-advanced-form .kb-field:hover,
.gcontent .kb-advanced-form select:hover{border-color:rgba(0,0,0,.34)}
.gcontent .kb-advanced-form .kb-field:focus,
.gcontent .kb-advanced-form select:focus{outline:none;border-color:#ff3f3f;box-shadow:0 0 0 3px rgba(255,63,63,.16)}
.gcontent .kb-advanced-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}
.gcontent .kb-advanced-form textarea.kb-field{min-height:140px;resize:vertical}
.gcontent .kb-advanced-form .kb-adv-form-help{font-size:12.5px;color:rgba(0,0,0,.52);margin:6px 0 0;font-style:normal}
.gcontent .kb-advanced-form .kb-submit-field{margin-top:2px}
.gcontent .kb-advanced-form .kb-adv-form-submit-button{background:#ff3f3f;color:#fff;border:0;border-radius:10px;padding:13px 30px;font-weight:700;font-size:15px;cursor:pointer;min-height:46px;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.gcontent .kb-advanced-form .kb-adv-form-submit-button:hover{background:#000;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.16)}
.gcontent .kb-advanced-form .kb-adv-form-submit-button:focus-visible{outline:2px solid #000;outline-offset:2px}
.gcontent .kb-adv-form-message{border-radius:10px;padding:13px 16px;font-weight:600;margin:14px 0;grid-column:1 / -1}
.gcontent .kb-adv-form-success{background:#ffedde;color:#000;border:1px solid rgba(0,0,0,.14)}
.gcontent .kb-adv-form-warning{background:#fff;color:#000;border:1px solid #ff3f3f;border-left-width:4px}
@media (max-width:640px){
  .gcontent .kb-advanced-form{padding:16px;gap:14px}
}