/* The header and footer every page shares. scripts/chrome.mjs writes the same markup into every page;
   these styles are their own, under #sh (the header) and #sf (the footer), so the menu looks the
   same on the pages built on homepage.css and on the pricing pages built on plans.css.

   The header: the logo, a Platform menu that opens a panel with every tool by area (on hover or
   click on a wide screen, as a list on a phone), the other pages, and the two buttons. */
#sh,#sf{--sh-navy:#2F3A60;--sh-deep:#1B2340;--sh-ink:#121829;--sh-blue:#004FBD;--sh-cyan:#56d3e8;--sh-amber:#F5A524;--sh-muted:#5B6478;--sh-line:#E4E7EE;--sh-paper:#F6F7FA;font-family:'Nunito Sans',Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
#sh *,#sf *{box-sizing:border-box}
#sh p,#sf p{margin:0}
#sh :focus-visible,#sf :focus-visible{outline:3px solid #00B8D9;outline-offset:3px;border-radius:4px}

#sh{position:relative;z-index:40;background:#fff;border-bottom:1px solid var(--sh-line);color:var(--sh-navy)}
#sh .sh-in{width:min(1120px,100% - 80px);margin:auto;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
#sh .sh-brand{display:block;flex:none}
#sh .sh-brand img{width:165px;height:auto;display:block}
#sh .sh-toggle{display:none}
#sh .sh-menu{display:flex;align-items:center;gap:24px;align-self:stretch;font-size:14px;font-weight:700}
#sh .sh-link{display:inline-flex;align-items:center;gap:6px;color:var(--sh-navy);background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.4}
#sh .sh-link:hover,#sh .sh-link[aria-current="page"],#sh .sh-here>.sh-trigger,#sh .sh-open>.sh-trigger{color:var(--sh-blue)}
#sh .sh-home{display:none}
#sh .sh-drop{display:flex;align-items:center;align-self:stretch}
#sh .sh-trigger svg{width:15px;height:15px;flex:none;transition:transform .15s}
#sh .sh-open>.sh-trigger svg{transform:rotate(180deg)}
#sh .sh-actions{display:flex;align-items:center;gap:10px}
#sh .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 18px;border-radius:7px;background:var(--sh-amber);color:var(--sh-ink);border:1px solid var(--sh-amber);font-size:14px;font-weight:800;line-height:1.3;text-decoration:none;white-space:nowrap}
#sh .sh-btn:hover{background:#e99a19;border-color:#e99a19}
#sh .sh-btn-ghost{background:#fff;border-color:#cbd1de;color:var(--sh-navy)}
#sh .sh-btn-ghost:hover,#sh .sh-btn-ghost[aria-current="page"]{background:var(--sh-paper);border-color:var(--sh-navy)}

/* The Platform panel: the areas as columns, each tool with a line on what it does, and a
   card for the savings. */
#sh .sh-panel{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line);box-shadow:0 26px 50px #1b234024}
#sh .sh-open>.sh-panel{display:block}
#sh:not(.sh-js) .sh-drop:hover>.sh-panel,#sh:not(.sh-js) .sh-drop:focus-within>.sh-panel{display:block}
#sh .sh-panel-in{width:min(1120px,100% - 80px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:40px;padding:30px 0 34px}
#sh .sh-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
#sh .sh-col-head{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sh-blue);text-decoration:none;padding:0 0 12px;margin-bottom:8px;border-bottom:1px solid var(--sh-line)}
#sh .sh-col-head:hover{color:var(--sh-navy)}
#sh .sh-col-head span{color:var(--sh-muted);font-weight:700;letter-spacing:0;text-transform:none}
#sh .sh-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#sh .sh-col li a{display:block;padding:9px 10px;margin:0 -10px;border-radius:7px;text-decoration:none;color:var(--sh-navy)}
#sh .sh-col li a:hover,#sh .sh-col li a[aria-current="page"]{background:#eef2f9}
#sh .sh-col li strong{display:block;font-family:'Outfit',Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
#sh .sh-col li a[aria-current="page"] strong{color:var(--sh-blue)}
#sh .sh-col li span{display:block;font-size:12.5px;font-weight:600;color:var(--sh-muted);line-height:1.45;margin-top:2px}
#sh .sh-feature{background:radial-gradient(ellipse at 95% 0%,#3b4974 0%,transparent 60%),linear-gradient(130deg,var(--sh-deep),var(--sh-ink));color:#fff;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
#sh .sh-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sh-cyan)}
#sh .sh-feature-title{font-family:'Outfit',Arial,sans-serif;font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1.12}
#sh .sh-feature-title span{color:var(--sh-amber)}
#sh .sh-feature p.sh-feature-copy{font-size:13px;font-weight:600;color:#d4dbea;line-height:1.5}
#sh .sh-feature-links{margin-top:auto;display:grid;gap:9px;padding-top:14px;border-top:1px solid #ffffff24}
#sh .sh-feature-links a{color:#fff;font-size:13px;font-weight:800;text-decoration:none}
#sh .sh-feature-links a:hover,#sh .sh-feature-links a[aria-current="page"]{color:var(--sh-amber)}

/* Narrower than the full menu: the links fold behind the Menu button, the panel opens in place. */
@media(max-width:1060px){
  #sh .sh-in{flex-wrap:wrap;min-height:72px;padding:12px 0;width:calc(100% - 48px)}
  #sh.sh-js .sh-toggle{display:block;background:#fff;border:1px solid var(--sh-line);border-radius:6px;min-height:44px;padding:8px 16px;color:var(--sh-navy);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
  #sh.sh-js .sh-menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 6px;align-self:auto;font-size:15px}
  #sh.sh-js .sh-menu.sh-open{display:flex}
  #sh.sh-js .sh-link{display:flex;width:100%;justify-content:space-between;padding:14px 4px;border-top:1px solid var(--sh-line);text-align:left}
  #sh.sh-js .sh-home{display:flex}
  #sh.sh-js .sh-drop{display:block}
  #sh.sh-js .sh-panel{position:static;box-shadow:none;border:0;background:var(--sh-paper);border-radius:10px;margin:0 0 10px}
  #sh.sh-js .sh-panel-in{width:auto;grid-template-columns:1fr;padding:4px 16px 14px;gap:0}
  #sh.sh-js .sh-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 22px}
  #sh.sh-js .sh-col-head{margin:14px 0 4px;padding-bottom:8px}
  #sh.sh-js .sh-col li a{padding:8px 10px}
  #sh.sh-js .sh-col li span{display:none}
  #sh.sh-js .sh-feature{display:none}
  #sh.sh-js .sh-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:14px;border-top:1px solid var(--sh-line)}
  #sh:not(.sh-js) .sh-menu{flex-wrap:wrap;gap:8px 20px;align-self:auto}
}
@media(max-width:620px){
  #sh .sh-in{width:calc(100% - 36px)}
  #sh .sh-brand img{width:138px}
  #sh.sh-js .sh-cols,#sh.sh-js .sh-actions{grid-template-columns:1fr}
}

/* The footer: the brand, every tool by area, the company's pages, then the small print. */
#sf{background:var(--sh-ink);color:#adb7cd;padding:56px 0 28px;font-size:13px}
#sf .sf-in{width:min(1120px,100% - 80px);margin:auto}
#sf .sf-top{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px}
#sf .sf-brand img{width:150px;height:auto;display:block}
#sf .sf-brand p{margin:14px 0 18px;color:#d4dbea;font-size:14px;line-height:1.5}
#sf .sf-btn{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:9px 16px;border-radius:7px;background:var(--sh-amber);color:var(--sh-ink);font-size:13px;font-weight:800;text-decoration:none}
#sf .sf-btn:hover{background:#e99a19}
#sf .sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
#sf .sf-head{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;line-height:1.5}
#sf .sf-head a{color:inherit;text-decoration:none}
#sf .sf-head a:hover{color:var(--sh-amber)}
#sf ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#sf ul a{color:#adb7cd;text-decoration:none;line-height:1.4}
#sf ul a:hover{color:#fff}
#sf .sf-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:44px;padding-top:20px;border-top:1px solid #ffffff1f;font-size:12px}
#sf .sf-base a{color:#d4dbea;text-decoration:none}
#sf .sf-base a:hover{color:#fff}
@media(max-width:1060px){
  #sf .sf-top{grid-template-columns:1fr;gap:36px}
  #sf .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
}
@media(max-width:620px){
  #sf{padding-top:44px}
  #sf .sf-in{width:calc(100% - 36px)}
  #sf .sf-cols{grid-template-columns:1fr 1fr;gap:28px 18px}
}