/* Styles for the mega menu and the inner pages: articles, feature pages, calculators, pricing, forms. */

/* ==================== mega menu ==================== */
.nav{gap:2px}
.navitem{position:static}
.navbtn,.navlink{font:inherit;font-size:13.5px;color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:2px;font-weight:500;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.navbtn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.navbtn:hover,.navlink:hover{background:var(--paper)}
.navbtn[aria-expanded="true"]{background:var(--paper);color:var(--teal)}
.navbtn[aria-current="page"],.navlink[aria-current="page"]{color:var(--teal);font-weight:600}
.mega{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface);box-shadow:0 18px 40px rgba(17,38,31,.14);padding:28px 0 32px;z-index:20}
.mega.open{display:block}
.megagrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px}
.megacol.wide{grid-column:span 2}
.megacol .hlabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}
.megacol ul{list-style:none}
.megacol ul.two{columns:2;column-gap:28px}
.megacol li{break-inside:avoid;padding:0}
.megacol a{display:block;text-decoration:none;color:var(--ink);padding:8px 10px;margin:0 -10px;border-radius:2px}
.megacol a:hover{background:var(--paper)}
.megacol a b{display:block;font-size:14px;font-weight:600}
.megacol a span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
@media(max-width:1020px){
  .nav{gap:0}
  .navitem{width:100%}
  .navbtn{width:100%;justify-content:space-between;padding:11px 8px;font-size:15px}
  .navbtn::after{transform:rotate(45deg)}
  .navbtn[aria-expanded="true"]::after{transform:rotate(225deg)}
  .navlink{display:block;padding:11px 8px;font-size:15px}
  .mega{position:static;box-shadow:none;padding:4px 0 10px;background:var(--paper);border-radius:2px}
  .megagrid{grid-template-columns:1fr;gap:14px;padding:0 12px}
  .megacol.wide{grid-column:auto}
  .megacol ul.two{columns:1}
  .megacol a{margin:0}
}

/* ==================== breadcrumbs ==================== */
.crumbs{font-size:12.5px;color:var(--muted);padding-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal);text-decoration:underline}
.crumbs .sep{opacity:.6}
.crumbs span[aria-current]{color:var(--ink)}

/* ==================== page heads ==================== */
.pagehead{padding:40px 0 20px}
.pagehead h1{font-size:42px;max-width:24ch}
.pagehead .lede{max-width:60ch}
.pagehead.dark{background:var(--deep);color:#fff;padding:56px 0 64px;margin-top:0}
.pagehead.dark .eyebrow,.pagehead.dark .lede{color:var(--aux)}
.pagehead.dark .wrap{display:grid;grid-template-columns:45fr 55fr;gap:56px;align-items:center}
.pagehead.dark .app{box-shadow:0 24px 60px rgba(0,0,0,.3)}
@media(max-width:1020px){.pagehead.dark .wrap{grid-template-columns:1fr}.pagehead h1{font-size:36px}}
@media(max-width:640px){.pagehead h1{font-size:30px}}

/* ==================== article (blog and long pages) ==================== */
.article{display:grid;grid-template-columns:minmax(0,68ch) 1fr;gap:64px;align-items:start;padding:24px 0 72px}
.article .body h2{font-size:24px;margin-top:40px;max-width:none}
.article .body h3{font-size:18px;margin-top:24px}
.article .body h4{margin-top:18px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.article .body p{font-size:16.5px;line-height:1.65;margin-top:14px}
.article .body ul,.article .body ol{margin:14px 0 0 20px;font-size:16px;line-height:1.6}
.article .body li{margin-top:6px}
.article .body .figure{margin:28px 0 8px;background:var(--paper);border-radius:3px;padding:18px}
.article .body .figure .caption{margin-top:8px}
.article .body table{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px}
.article .body th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 10px;background:var(--paper)}
.article .body td{padding:9px 10px;vertical-align:top}
.article .body tr:nth-child(even) td{background:var(--paper)}
.article .body td.r,.article .body th.r{text-align:right}
.aside{position:sticky;top:84px;display:grid;gap:22px}
.aside .box{background:var(--paper);border-radius:3px;padding:18px 20px}
.aside .hlabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.aside ul{list-style:none}
.aside li{padding:4px 0;font-size:13.5px}
.aside a{color:var(--ink);text-decoration:none}
.aside a:hover{color:var(--teal);text-decoration:underline}
.aside .box.dark{background:var(--deep);color:#fff}
.aside .box.dark p{color:var(--aux);font-size:13px;margin-top:6px}
.aside .box.dark .btn{margin-top:14px;display:block;text-align:center}
.meta{font-size:12.5px;color:var(--muted);margin-top:14px;display:flex;gap:14px;flex-wrap:wrap}
.faq{margin-top:40px}
.faq details{background:var(--paper);border-radius:3px;padding:14px 18px;margin-top:8px}
.faq summary{font-weight:600;cursor:pointer;font-size:15.5px}
.faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.faq p{margin-top:8px;font-size:15px;color:var(--ink)}
.related{padding:48px 0 72px;background:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards a{display:block;background:var(--surface);border-radius:3px;padding:20px 20px 22px;text-decoration:none;color:var(--ink)}
.cards a:hover{background:#E9EEEA}
.cards .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700}
.cards b{display:block;font-size:16px;font-weight:600;margin-top:6px;line-height:1.35}
.cards span{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}
@media(max-width:1020px){.article{grid-template-columns:1fr;gap:36px}.aside{position:static}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cards{grid-template-columns:1fr}}

/* ==================== blog lists ==================== */
.postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.postlist a{display:flex;flex-direction:column;background:var(--paper);border-radius:3px;padding:20px;text-decoration:none;color:var(--ink);min-height:150px}
.postlist a:hover{background:#E9EEEA}
.postlist .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700}
.postlist b{display:block;font-size:16px;font-weight:600;margin-top:8px;line-height:1.35;text-wrap:balance}
.postlist span{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}
.postlist .m{margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted)}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.topics a{font-size:13px;text-decoration:none;color:var(--ink);background:var(--paper);padding:7px 12px;border-radius:2px;font-weight:500}
.topics a:hover,.topics a[aria-current]{background:var(--deep);color:#fff}
section.alt .topics a{background:var(--surface)}
@media(max-width:1020px){.postlist{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.postlist{grid-template-columns:1fr}}

/* ==================== feature pages ==================== */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px;margin-top:8px}
.spec h3{font-size:16px}
.spec p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
.spec ul{list-style:none;margin-top:8px;font-size:14px}
.spec li{padding:3px 0;color:var(--ink)}
.spec li::before{content:"";display:inline-block;width:6px;height:1.5px;background:var(--teal);margin-right:8px;vertical-align:middle}
@media(max-width:1020px){.spec{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.spec{grid-template-columns:1fr}}

/* ==================== calculators ==================== */
.calc{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.calc form{background:var(--paper);border-radius:3px;padding:22px}
.calc label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-top:14px}
.calc label small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px}
.calc input,.calc select{width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-size:14px;border:0;border-radius:2px;background:var(--surface);color:var(--ink)}
.calc input.num{font-family:'IBM Plex Mono',ui-monospace,monospace}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc .check{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13.5px;font-weight:500}
.calc .check input{width:auto;margin:0}
.calc .actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.result{background:var(--surface);border-radius:3px;box-shadow:0 10px 40px rgba(17,38,31,.08)}
.result .head{padding:22px 24px 0}
.result .lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.result .big{font-size:40px;font-weight:600;letter-spacing:-.02em;margin-top:6px;line-height:1.1}
.result .big.hot{color:var(--flag)}
.result .band{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:2px;background:rgba(31,110,105,.12);color:var(--teal)}
.result .band.hot{background:rgba(168,60,40,.12);color:var(--flag)}
.result .band.warn{background:rgba(15,61,58,.1);color:var(--deep)}
.result .sent{font-size:16px;line-height:1.55;margin-top:14px;padding:0 24px}
.result .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 24px 0}
.result .figs div{background:var(--paper);border-radius:3px;padding:12px 14px}
.result .figs .v{font-size:20px;font-weight:600;margin-top:3px}
.result .figs .v.hot{color:var(--flag)}
.result .figs .n{font-size:11px;color:var(--muted);margin-top:2px}
.result .chartwrap{padding:18px 24px 6px}
.result .notes{padding:0 24px 22px;font-size:12.5px;color:var(--muted);line-height:1.5}
.result .gate{margin:0 24px 24px;background:var(--paper);border-radius:3px;padding:16px 18px}
.result .gate p{font-size:13.5px;color:var(--muted)}
.result .gate form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.result .gate input{flex:1;min-width:180px;padding:10px 12px;font:inherit;border:0;border-radius:2px;background:var(--surface)}
.result .empty{padding:40px 24px;color:var(--muted);font-size:14px}
.result .links{padding:0 24px 22px;font-size:13.5px;display:flex;gap:16px;flex-wrap:wrap}
.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1020px){.calc{grid-template-columns:1fr}.result .figs{grid-template-columns:1fr 1fr}.toolgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.result .figs{grid-template-columns:1fr}.toolgrid{grid-template-columns:1fr}.result .big{font-size:32px}.calc .row{grid-template-columns:1fr}}

/* ==================== pricing ==================== */
.toggle{display:inline-flex;background:var(--paper);border-radius:2px;padding:3px;margin-top:20px}
.toggle button{font:inherit;font-size:13px;font-weight:600;padding:8px 16px;border:0;background:none;color:var(--muted);border-radius:2px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--deep);color:#fff}
.plan .annualnote{font-size:12px;color:var(--teal);margin-top:4px;font-weight:600;min-height:16px}
.plan.feature .annualnote{color:var(--lime)}
.advisory{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.advisory div{background:var(--surface);border-radius:3px;padding:22px}
.advisory .price{font-size:24px;font-weight:600;margin-top:10px}
.advisory p{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.compare{width:100%;border-collapse:collapse;font-size:14px;margin-top:24px;background:var(--surface);border-radius:3px;overflow:hidden}
.compare th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;background:var(--paper)}
.compare td{padding:11px 14px;vertical-align:top}
.compare tr:nth-child(even) td{background:var(--paper)}
.compare td.c{text-align:center}
.tablewrap{overflow-x:auto}
@media(max-width:1020px){.advisory{grid-template-columns:1fr}}

/* ==================== forms (contact) ==================== */
.form{background:var(--paper);border-radius:3px;padding:24px}
.form label{display:block;font-size:12px;font-weight:600;margin-top:14px}
.form input,.form select,.form textarea{width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-size:14px;border:0;border-radius:2px;background:var(--surface);color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.form .sent{margin-top:16px;font-size:14px;font-weight:600;color:var(--teal);display:none}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}

/* ==================== fact grids (security, clients) ==================== */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.facts div{background:var(--paper);border-radius:3px;padding:20px 22px}
section.alt .facts div{background:var(--surface)}
.facts h3,.facts .facth{font-size:16px;line-height:1.35;letter-spacing:0;margin:0;max-width:none}
.facts p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55}
@media(max-width:640px){.facts{grid-template-columns:1fr}}

/* ==================== logo, full width mega menu, featured card ==================== */
.top .wrap{position:static}
.top{position:sticky}
.brand .logo{display:block;height:34px;width:auto}
footer .brand .logo{height:30px}
.mega{left:0;right:0;top:64px;padding:32px 0 36px}
.megagrid{grid-template-columns:1.4fr 1fr 1fr 300px;gap:36px;align-items:start}
.top .mega .megagrid{display:grid;min-height:0;align-items:start}
#mega-product .megagrid,#mega-clients .megagrid{grid-template-columns:1.6fr 1fr 300px}
.megacol.wide{grid-column:span 1}
.megafeat{grid-column:-2/-1;background:var(--deep);color:#fff;border-radius:3px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;align-self:stretch}
.megafeat .eyebrow{color:var(--aux)}
.megafeat b{font-size:17px;font-weight:600;line-height:1.3}
.megafeat p{font-size:13px;color:var(--aux);line-height:1.5}
.megafeat .btn{margin-top:auto;align-self:flex-start}
@media(max-width:1020px){
  .megagrid{grid-template-columns:1fr}
  .megafeat{display:none}
  .brand .logo{height:30px}
}
@media(max-width:640px){.brand .logo{height:26px}}

/* ==================== compact page heads: text band, figure below ==================== */
.pagehead.dark{padding:40px 0 44px}
.pagehead.dark .wrap{display:block}
.pagehead.dark h1{font-size:38px;max-width:26ch}
.pagehead.dark .lede{margin-top:12px}
.pagehead.dark .btn-row{margin-top:22px}
.headfig{padding:36px 0 8px}
.headfig .shotcap{margin-top:10px}
@media(max-width:1020px){.pagehead.dark h1{font-size:32px}}
@media(max-width:640px){.pagehead.dark{padding:32px 0 36px}.pagehead.dark h1{font-size:28px}}

/* ==================== header scale, footer grid, tools polish ==================== */
.top .wrap{min-height:78px}
.brand .logo{height:48px}
.mega{top:78px}
footer .brand .logo{height:44px}
footer .wrap{grid-template-columns:1.5fr 1.1fr 1fr 1.2fr;gap:40px}
footer{padding:48px 0 52px}
.legal{margin-top:16px;padding-top:20px;color:var(--muted)}
@media(max-width:1020px){
  .brand .logo{height:38px}
  .top .wrap{min-height:66px}
  .mega{top:0}
  .nav{top:66px}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.brand .logo{height:32px}footer .wrap{grid-template-columns:1fr}}

/* calculators on tinted sections: keep the form legible */
section.alt .calc form{background:var(--surface)}
section.alt .calc input,section.alt .calc select{background:var(--paper)}
section.alt .result{box-shadow:none}
/* library grid: even cards */
.toolgrid .tool{min-height:230px}
.toolgrid .tool .out{margin-top:auto}
.influence-block{margin-top:28px;background:var(--surface);border-radius:3px;padding:24px}
.influence-block .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:center}
.influence-block h3{font-size:18px}
.influence-block p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55;max-width:46ch}
@media(max-width:1020px){.influence-block .grid{grid-template-columns:1fr}}

/* ==================== header at logo 96 ==================== */
.top .wrap{min-height:112px}
.brand .logo{height:96px}
.mega{top:112px}
footer .brand .logo{height:64px}
@media(max-width:1020px){.brand .logo{height:56px}.top .wrap{min-height:76px}.nav{top:76px}.mega{top:0}}
@media(max-width:640px){.brand .logo{height:44px}.top .wrap{min-height:64px}.nav{top:64px}}

/* ==================== calculators, second pass ==================== */
.calc{grid-template-columns:1fr 1.25fr;gap:24px;align-items:stretch}
.calc form{padding:26px 26px 28px;display:flex;flex-direction:column}
.calc label{font-size:12.5px;margin-top:16px}
.calc .actions{margin-top:auto;padding-top:22px}
.result{display:flex;flex-direction:column}
.result .head{padding:26px 28px 0}
.result .sent{padding:0 28px}
.result .figs{padding:20px 28px 0}
.result .chartwrap{padding:20px 28px 8px;margin-top:auto}
.result .notes,.result .links{padding-left:28px;padding-right:28px}
.result .gate{margin:12px 28px 26px}
.result .samplenote{padding:10px 28px 0;font-size:12px;color:var(--muted)}

/* ==================== mega menu, third pass: rigid grid, one line per description ==================== */
.megacol ul.two{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;columns:auto}
#mega-product .megagrid,#mega-clients .megagrid{grid-template-columns:2fr .95fr 300px}
.megacol a{padding:9px 10px}
.megacol a b{font-size:13.5px}
.megacol a span{font-size:11px;white-space:nowrap;letter-spacing:0}
.megacol .hlabel{margin-bottom:8px}
@media(max-width:1020px){
  .megacol ul.two{grid-template-columns:1fr}
  .megacol a span{white-space:normal}
}

/* ==================== article aside: fixed width, aligned with the first heading ==================== */
.article{grid-template-columns:minmax(0,68ch) 340px;justify-content:space-between;gap:48px}
.aside{margin-top:44px;top:128px}
.article .body > h2:first-child{margin-top:40px}
@media(max-width:1020px){.article{grid-template-columns:1fr}.aside{margin-top:0}}

/* ==================== sticky offsets: everything frozen clears the sticky header ==================== */
:root{--headerH:112px;--stickyTop:calc(var(--headerH) + 28px)}
.aside{top:var(--stickyTop)}
.split .fig{top:var(--stickyTop)}
@media(max-width:1020px){
  :root{--headerH:76px}
  .aside,.split .fig{position:static}
}
@media(max-width:640px){:root{--headerH:64px}}

/* ==================== two column section head, aligned rule columns ==================== */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cols2 h2{max-width:none;margin-top:8px}
.cols2 > p{font-size:17px;line-height:1.65;color:var(--ink);margin-top:34px;max-width:56ch}
@media(max-width:1020px){.cols2{grid-template-columns:1fr;gap:16px}.cols2 > p{margin-top:0}}
/* dark rules section: headings reserve two lines so paragraphs start level */
@media(min-width:1021px){.not b{min-height:48px;display:flex;align-items:flex-start}}
/* savings pair never squeezes inside a split column */
.split .fig .savegrid{grid-template-columns:1fr}

/* ==================== phone: mark plus name instead of the full logo ==================== */
.brandmini{display:none;align-items:center;gap:10px}
.brandmini img{display:block;width:34px;height:34px}
.brandmini b{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:640px){
  .brand .logo{display:none}
  .brandmini{display:flex}
}

/* ==================== phone menu: full height panel, clear groups ==================== */
@media(max-width:1020px){
  .nav{position:fixed;top:var(--headerH);left:0;right:0;bottom:0;overflow-y:auto;padding:8px 20px 28px;box-shadow:none;border-top:1px solid var(--paper);z-index:30}
  .navitem{border-bottom:1px solid var(--paper)}
  .navbtn{padding:16px 4px;font-size:16px;font-weight:600}
  .navbtn::after{width:8px;height:8px;margin-right:2px}
  .navlink{padding:16px 4px;font-size:16px;font-weight:600;border-bottom:1px solid var(--paper)}
  .mega{padding:2px 0 14px;background:none;border-radius:0}
  .megagrid{gap:18px;padding:0}
  .megacol h4,.megacol .hlabel{margin:10px 0 4px;color:var(--teal)}
  .megacol a{padding:10px 12px;background:var(--paper);border-radius:3px;margin:0 0 6px}
  .megacol a b{font-size:14.5px}
  .megacol a span{font-size:12px;white-space:normal}
  .nav .cta{margin:16px 0 0;text-align:center;padding:14px;font-size:15px}
  .menubtn{padding:10px 14px;font-size:14px}
  body:has(.nav.open){overflow:hidden}
}
@media(max-width:1020px){
  .megagrid,#mega-product .megagrid,#mega-clients .megagrid,#mega-resources .megagrid{grid-template-columns:1fr}
  .megacol ul.two{grid-template-columns:1fr}
}