/* ============================================================================
   Footer365 marketing site - shared stylesheet.
   Assembled from the original dev/mockups/marketing-*.html designs (tokens
   inherited from design-system.html), plus helpers for the company and legal
   pages. Light + dark first class.
   ========================================================================== */
:root{
  --brand-50:#eef4ff;--brand-100:#dbe6ff;--brand-200:#bcd2ff;--brand-300:#8fb2ff;
  --brand-400:#578cff;--brand-500:#2f6dff;--brand-600:#1668ff;--brand-700:#0b52d6;--brand-800:#0b429f;
  --ink-brand:#0f1b2d;
  --bg:#f6f8fb;--surface:#ffffff;--surface-2:#f1f4f9;--border:#e4e9f0;--border-strong:#cfd7e3;
  --ink:#1b2433;--ink-2:#55617a;--ink-3:#8a93a6;
  --ok:#16a34a;--ok-bg:#e8f6ee;--warn:#d97706;--warn-bg:#fdf1e3;--bad:#dc2626;--bad-bg:#fdeaea;
  --info:var(--brand-600);--info-bg:var(--brand-50);
  --elev-1:0 1px 2px rgba(20,23,33,.05),0 6px 16px rgba(20,23,33,.06);
  --elev-2:0 2px 5px rgba(20,23,33,.07),0 10px 24px rgba(20,23,33,.10);
  --elev-3:0 4px 10px rgba(20,23,33,.10),0 14px 34px rgba(20,23,33,.14);
  --radius:12px;--radius-sm:9px;--radius-lg:16px;
  --font-ui:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Cascadia Code","Cascadia Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --maxw:1280px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;
  --brand-600:#2f76ff;--brand-700:#5b8dff;--ink-brand:#eaf0fb;
  --bg:#0d1117;--surface:#161c26;--surface-2:#1d2530;--border:#263040;--border-strong:#37435a;
  --ink:#e7ecf3;--ink-2:#9aa6ba;--ink-3:#6b7789;
  --ok-bg:rgba(22,163,74,.16);--warn-bg:rgba(217,119,6,.18);--bad-bg:rgba(220,38,38,.18);--info-bg:rgba(47,118,255,.16);
  --elev-1:0 1px 2px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.45);
  --elev-2:0 2px 5px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.5);
  --elev-3:0 4px 10px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.55);
}}
:root[data-theme="light"]{color-scheme:light;
  --brand-600:#1668ff;--brand-700:#0b52d6;--ink-brand:#0f1b2d;
  --bg:#f6f8fb;--surface:#fff;--surface-2:#f1f4f9;--border:#e4e9f0;--border-strong:#cfd7e3;
  --ink:#1b2433;--ink-2:#55617a;--ink-3:#8a93a6;
  --ok-bg:#e8f6ee;--warn-bg:#fdf1e3;--bad-bg:#fdeaea;--info-bg:#eef4ff;
}
:root[data-theme="dark"]{color-scheme:dark;
  --brand-600:#2f76ff;--brand-700:#5b8dff;--ink-brand:#eaf0fb;
  --bg:#0d1117;--surface:#161c26;--surface-2:#1d2530;--border:#263040;--border-strong:#37435a;
  --ink:#e7ecf3;--ink-2:#9aa6ba;--ink-3:#6b7789;
  --ok-bg:rgba(22,163,74,.16);--warn-bg:rgba(217,119,6,.18);--bad-bg:rgba(220,38,38,.18);--info-bg:rgba(47,118,255,.16);
  --elev-1:0 1px 2px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.45);
  --elev-2:0 2px 5px rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.5);
  --elev-3:0 4px 10px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.55);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{color:var(--ink-brand);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.14;}
p{margin:0;}
a{color:var(--brand-700);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:700;color:var(--brand-600);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
section{padding:44px 0;}
.surface-2{background:var(--surface-2);}
/* A section head spans the page like the content under it. Only the heading is held narrow, for impact; the paragraph
   under it runs much wider, so a page's opening reads as part of the page rather than as a column down its middle. */
.sec-head{text-align:center;margin:0 auto 30px;}
.sec-head h2{font-size:30px;margin:8px auto 0;max-width:30ch;}
.sec-head p{color:var(--ink-2);font-size:17px;margin:11px auto 0;max-width:900px;}
/* Releases the paragraph to the full width, where the head sits above a table that wide. */
.sec-head.wide p{max-width:none;}
.muted{color:var(--ink-3);}
.tabnum{font-variant-numeric:tabular-nums;}

/* buttons */
.btn{font:inherit;font-size:15px;font-weight:650;border-radius:var(--radius-sm);padding:11px 19px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:.13s;white-space:nowrap;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--brand-600) 34%,transparent);}
.btn-primary:hover{background:var(--brand-700);transform:translateY(-1px);}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--border-strong);}
.btn-secondary:hover{border-color:var(--brand-600);color:var(--brand-600);}
/* No border or fill until hovered, so it reads as a link: for the top bar's Sign in only. A second button beside a
   primary one on a page is btn-secondary, which looks like a button before the pointer reaches it. */
.btn-ghost{background:transparent;color:var(--ink-2);}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
.btn-lg{padding:14px 26px;font-size:16px;}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-600) 40%,transparent);outline-offset:2px;}
.ms-logo{width:16px;height:16px;display:inline-grid;grid-template-columns:1fr 1fr;gap:1.5px;}
.ms-logo i{display:block;border-radius:1px;}
.ms-logo i:nth-child(1){background:#f25022;} .ms-logo i:nth-child(2){background:#7fba00;}
.ms-logo i:nth-child(3){background:#00a4ef;} .ms-logo i:nth-child(4){background:#ffb900;}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;}
.pill.ok{color:var(--ok);background:var(--ok-bg);} .pill.info{color:var(--brand-700);background:var(--info-bg);}
.pill.warn{color:var(--warn);background:var(--warn-bg);} .pill.mute{color:var(--ink-2);background:var(--surface-2);}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 13px;box-shadow:var(--elev-1);}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:26px;}
/* The logo never gives way: when the bar runs out of room, the controls beside it move into the menu instead. */
.brand{display:inline-flex;align-items:center;flex-shrink:0;}
.brand .brand-wordmark{height:35px;width:auto;display:block;}
.brand .brand-wordmark--dark{display:none;}
[data-theme="dark"] .brand .brand-wordmark--light{display:none;}
[data-theme="dark"] .brand .brand-wordmark--dark{display:block;}
.nav-links{display:flex;gap:4px;margin-left:8px;}
.nav-links a{color:var(--ink-2);font-weight:550;font-size:15px;padding:8px 12px;border-radius:8px;}
.nav-links a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.nav-links a.active{color:var(--brand-700);background:var(--info-bg);}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px;}
.iconbtn{border:1px solid var(--border);background:var(--surface);color:var(--ink-2);border-radius:9px;height:40px;width:40px;display:grid;place-items:center;cursor:pointer;}
.iconbtn:hover{border-color:var(--brand-600);color:var(--brand-600);}
.nav-toggle{display:none;}
@media(max-width:900px){
  .nav-links{position:absolute;top:100%;left:0;right:0;margin-left:0;flex-direction:column;gap:2px;padding:12px 20px 18px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--elev-2);display:none;}
  .nav.open .nav-links{display:flex;}
  .nav-toggle{display:grid;}
}
/* A phone's top bar keeps the logo, the menu and the main button. Sign in and the theme move into the menu at 640px,
   and search joins them at 400px, where the main button also takes its short wording. */
.nav-extra{display:none;}
.nav-extra button{font:inherit;font-weight:550;font-size:15px;color:var(--ink-2);background:none;border:0;padding:8px 12px;border-radius:8px;text-align:left;cursor:pointer;}
.nav-extra button:hover{background:var(--surface-2);color:var(--ink);}
.cta-short{display:none;}
@media(max-width:640px){
  .nav-in{padding:10px 16px;gap:12px;}
  .brand .brand-wordmark{height:28px;}
  .nav-cta{gap:6px;}
  .nav-cta .iconbtn{height:36px;width:36px;}
  .nav-cta .btn{padding:8px 13px;font-size:14px;}
  .nav-cta .hide-sm,#f365-theme{display:none;}
  .nav-extra{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);}
  .nav-extra .only-xs{display:none;}
}
@media(max-width:400px){
  #f365-search{display:none;}
  .nav-extra .only-xs{display:block;}
  .cta-long{display:none;}
  .cta-short{display:inline;}
}

/* footer */
.foot{border-top:1px solid var(--border);background:var(--surface);margin-top:20px;}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:52px 26px 30px;display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:24px;}
@media(max-width:1100px){.foot-in{grid-template-columns:repeat(3,1fr);gap:30px;}}
@media(max-width:760px){.foot-in{grid-template-columns:1fr 1fr;gap:26px;}}
.foot .col h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:13px;}
.foot .col a{display:block;color:var(--ink-2);font-size:14px;padding:5px 0;}
.foot .col a:hover{color:var(--brand-600);text-decoration:none;}
.foot .about p{color:var(--ink-2);font-size:14px;margin-top:12px;max-width:34ch;}
.foot-bar{max-width:var(--maxw);margin:0 auto;padding:16px 26px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);color:var(--ink-3);font-size:13px;}
.foot-bar .st{display:inline-flex;align-items:center;gap:8px;}
/* The visitor's way back from a remembered referral offer, shown on every page while the cookie is set. */
.foot-forget{margin:0;}
.foot-forget button{font:inherit;color:var(--brand-700);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}
.foot-forget button:hover{color:var(--brand-600);}
/* The statutory company details sit outside .foot-bar as a plain block, sharing its width and gutters so
   they line up with the columns above. Kept out of that flex row deliberately: as a flex item the long
   disclosure fought the copyright and the status link for space and ended up in a narrow column. */
.foot-legal{max-width:var(--maxw);margin:0 auto;padding:0 26px 6px;font-size:12px;line-height:1.7;color:var(--ink-3);text-wrap:pretty;}
.foot-bar .st .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);}

/* hero */
.hero{position:relative;overflow:hidden;padding-top:64px;padding-bottom:40px;}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 440px at 78% -8%,color-mix(in srgb,var(--brand-600) 15%,transparent),transparent 70%),
  radial-gradient(700px 380px at 6% 8%,color-mix(in srgb,var(--brand-400) 10%,transparent),transparent 68%);}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:36px;}}
.hero h1{font-size:50px;letter-spacing:-.033em;margin:18px 0 0;}
.hero h1 .hl{color:var(--brand-600);}
.hero .lede{font-size:18px;color:var(--ink-2);margin-top:18px;max-width:42ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px;}
.hero-note{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13.5px;color:var(--ink-3);}
.hero-note svg{color:var(--ok);flex:0 0 auto;}

/* hero email compose demo */
.compose{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-3);overflow:hidden;transform:rotate(.4deg);}
.compose .bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.compose .tl{display:flex;gap:6px;}
.compose .tl i{width:11px;height:11px;border-radius:50%;display:block;}
.compose .tl i:nth-child(1){background:#ff5f57;} .compose .tl i:nth-child(2){background:#febc2e;} .compose .tl i:nth-child(3){background:#28c840;}
.compose .bar b{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-left:4px;}
.compose .bar .sendpill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#fff;background:var(--brand-600);padding:4px 11px;border-radius:7px;}
.compose .meta{padding:12px 18px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--border);}
.compose .meta .r{display:flex;gap:8px;padding:3px 0;}
.compose .meta .r span{color:var(--ink-3);width:44px;flex:0 0 44px;}
.compose .msg{padding:16px 18px 6px;font-size:14px;color:var(--ink);}
.compose .msg p{margin:0 0 10px;}
.sig-inject{margin:6px 18px 18px;padding:14px 15px 15px;border:1px dashed color-mix(in srgb,var(--brand-600) 45%,var(--border));border-radius:11px;background:color-mix(in srgb,var(--brand-600) 4%,transparent);position:relative;}
.sig-inject .tag{position:absolute;top:-10px;left:13px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-700);background:var(--surface);border:1px solid color-mix(in srgb,var(--brand-600) 30%,var(--border));padding:2px 8px;border-radius:6px;}
.sig{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;}
.sig .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--brand-400),var(--brand-700));color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px;box-shadow:var(--elev-1);}
.sig .who .nm{font-weight:700;color:var(--ink-brand);font-size:15px;}
.sig .who .rl{color:var(--ink-2);font-size:12.5px;}
.sig .who .rl b{color:var(--brand-700);}
.sig .lines{grid-column:1/-1;border-top:1px solid var(--border);margin-top:12px;padding-top:11px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2);}
.sig .lines a{color:var(--ink-2);}
.sig .lines .i{display:inline-flex;align-items:center;gap:6px;}
.sig .lines .i svg{color:var(--brand-600);flex:0 0 auto;}
.sig .social{grid-column:1/-1;display:flex;gap:7px;margin-top:11px;}
.sig .social a{width:26px;height:26px;border-radius:7px;background:var(--brand-600);display:grid;place-items:center;color:#fff;}
.sig .banner{grid-column:1/-1;margin-top:12px;border-radius:9px;overflow:hidden;background:linear-gradient(100deg,var(--brand-700),var(--brand-500));color:#fff;padding:11px 14px;display:flex;align-items:center;gap:12px;}
.sig .banner .bt{font-size:12.5px;font-weight:700;}
.sig .banner .bs{font-size:11px;opacity:.85;}
.sig .banner .go{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.18);padding:4px 10px;border-radius:6px;white-space:nowrap;}

/* trust */
.trust{padding:26px 0 8px;}
.trust .lbl{text-align:center;font-size:12.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:18px;}
.trust .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;}
.trust .logos .t{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2);font-weight:650;font-size:15px;opacity:.9;}
.trust .logos .t svg{flex:0 0 auto;color:var(--ink-3);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.steps{grid-template-columns:1fr;}}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--elev-1);position:relative;}
.step .no{width:38px;height:38px;border-radius:10px;background:var(--info-bg);color:var(--brand-700);display:grid;place-items:center;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;}
.step h3{font-size:19px;margin:16px 0 8px;}
.step p{color:var(--ink-2);font-size:15px;}
.step .arrow{position:absolute;top:44px;right:-24px;color:var(--border-strong);z-index:1;}
@media(max-width:860px){.step .arrow{display:none;}}

/* home features grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.features{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.features{grid-template-columns:1fr;}}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--elev-1);transition:.14s;}
.feat:hover{border-color:color-mix(in srgb,var(--brand-600) 40%,var(--border));box-shadow:var(--elev-2);transform:translateY(-2px);}
.feat .ic{width:40px;height:40px;border-radius:10px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;}
.feat h3{font-size:16.5px;margin:14px 0 6px;}
.feat p{color:var(--ink-2);font-size:14px;}

/* split + panel */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px;}}
.split .txt h2{font-size:31px;margin-top:10px;}
.split .txt p{color:var(--ink-2);font-size:17px;margin-top:14px;}
.checks{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink);}
.checks li svg{color:var(--ok);flex:0 0 auto;margin-top:3px;}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-2);padding:22px;}
.panel .phead,.panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.panel .phead .t,.panel .ph .t{font-weight:700;color:var(--ink-brand);font-size:15px;}
.miniban{border-radius:10px;overflow:hidden;border:1px solid var(--border);margin-bottom:12px;}
.miniban .b{padding:13px 15px;color:#fff;display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,var(--brand-700),var(--brand-500));}
.miniban .b .bt{font-weight:700;font-size:14px;} .miniban .b .bs{font-size:12px;opacity:.86;}
.miniban .b .go{margin-left:auto;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.2);padding:4px 11px;border-radius:6px;}
.miniban .st{display:flex;justify-content:space-between;padding:11px 15px;background:var(--surface-2);font-size:12.5px;color:var(--ink-2);}
.miniban .st b{color:var(--ink-brand);font-variant-numeric:tabular-nums;}

/* pricing tiers/teaser */
.ptease,.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
.ptease.two,.tiers.two{grid-template-columns:repeat(2,1fr);max-width:840px;margin-inline:auto;}
.tiers{margin-top:26px;}
.ptease.one,.tiers.one{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
@media(max-width:860px){.ptease,.tiers,.ptease.two,.tiers.two,.ptease.one,.tiers.one{grid-template-columns:1fr;}}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--elev-1);display:flex;flex-direction:column;}
.pcard.feature{border-color:color-mix(in srgb,var(--brand-600) 55%,var(--border));box-shadow:var(--elev-2);position:relative;}
.pcard.feature::after{content:"Most popular";position:absolute;top:-11px;left:24px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--brand-600);padding:3px 11px;border-radius:7px;}
.pcard .tier{font-weight:700;color:var(--ink-brand);font-size:19px;}
.pcard .desc{color:var(--ink-3);font-size:13.5px;margin-top:5px;min-height:40px;}
.pcard .price{margin-top:16px;display:flex;align-items:baseline;gap:6px;}
.pcard .price .amt{font-size:42px;font-weight:800;color:var(--ink-brand);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.pcard .price .per{font-size:13px;color:var(--ink-3);}
.pcard .sub{font-size:12.5px;color:var(--ink-3);margin-top:4px;min-height:18px;}
.pcard ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.pcard ul li{display:flex;gap:9px;font-size:14px;color:var(--ink-2);}
.pcard ul li svg{color:var(--brand-600);flex:0 0 auto;margin-top:3px;}
.pcard .act{margin-top:auto;padding-top:22px;}
.pcard .act .btn{width:100%;justify-content:center;}

/* The pricing page's one product, priced both ways side by side. The billing switch above it picks a column, as does
   a click on the column; the chosen one is shaded and its price drawn heavier, and both prices stay in view. */
.plan{margin-top:26px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-2);overflow:hidden;}
.plan-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--border);}
.plan-head .tier{font-weight:800;color:var(--ink-brand);font-size:21px;letter-spacing:-.01em;}
.plan-head .desc{color:var(--ink-2);font-size:14.5px;}
.plan-cols{display:grid;grid-template-columns:1fr 1fr;}
.plan-cols.one{grid-template-columns:1fr;}
@media(max-width:760px){.plan-cols{grid-template-columns:1fr;}}
.plan-cols.one .plan-col{cursor:default;}
.plan-head .pill{white-space:normal;}
.plan-col{position:relative;padding:26px 28px 28px;display:flex;flex-direction:column;cursor:pointer;transition:background .15s,box-shadow .15s;}
.plan-col+.plan-col{border-left:1px solid var(--border);}
@media(max-width:760px){.plan-col+.plan-col{border-left:0;border-top:1px solid var(--border);}}
.plan-col.on{background:color-mix(in srgb,var(--brand-600) 6%,var(--surface));box-shadow:inset 0 0 0 2px var(--brand-600);}
.plan-col .lab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);}
.plan-col.on .lab{color:var(--brand-700);}
.plan-col .price{margin-top:12px;display:flex;align-items:baseline;gap:6px;}
.plan-col .amt{font-size:44px;font-weight:600;color:var(--ink-2);letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .15s;}
.plan-col.on .amt{font-weight:800;color:var(--ink-brand);}
.plan-col .per{font-size:13px;color:var(--ink-3);}
.plan-col .sub{font-size:13.5px;color:var(--ink-2);margin-top:4px;}
.plan-col ul{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 18px;}
.plan-col ul li{display:flex;gap:9px;font-size:14px;color:var(--ink-2);}
.plan-col ul li svg{color:var(--brand-600);flex:0 0 auto;margin-top:3px;}
.plan-col:not(.on) ul li svg{color:var(--ink-3);}
.plan-col .act{margin-top:auto;padding-top:22px;}
.plan-col .act .btn{width:100%;justify-content:center;}
.plan-col:not(.on) .act .btn-primary{background:var(--surface);color:var(--ink);border-color:var(--border-strong);box-shadow:none;}
.plan-col:not(.on) .act .btn-primary:hover{border-color:var(--brand-600);color:var(--brand-600);transform:none;}
@media(max-width:600px){.plan-head,.plan-col{padding-left:18px;padding-right:18px;}.plan-col .amt{font-size:38px;}}

/* billing toggle + volume table */
.billing{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin:28px 0 6px;}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px;gap:2px;}
.seg button{white-space:nowrap;font:inherit;font-size:14px;font-weight:650;border:0;background:transparent;color:var(--ink-2);padding:8px 18px;border-radius:999px;cursor:pointer;transition:.13s;}
.seg button.on{background:var(--surface);color:var(--ink-brand);box-shadow:var(--elev-1);}
.saver{font-size:12.5px;font-weight:700;color:var(--ok);background:var(--ok-bg);padding:4px 11px;border-radius:999px;}
.tovr{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--elev-1);background:var(--surface);}
table.vol{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;min-width:520px;}
table.vol thead th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;padding:13px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);}
table.vol thead th.num{text-align:right;}
table.vol tbody td{padding:14px 18px;border-bottom:1px solid var(--border);color:var(--ink);}
table.vol tbody td.num{text-align:right;font-weight:650;color:var(--ink-brand);}
table.vol tbody td .u{color:var(--ink-3);font-weight:400;font-size:12px;}
table.vol tbody tr:last-child td{border-bottom:0;}
table.vol tbody tr:hover td{background:color-mix(in srgb,var(--brand-600) 4%,transparent);}
table.vol tbody tr.best td{background:color-mix(in srgb,var(--brand-600) 6%,transparent);}
.colhint{display:inline-flex;align-items:center;gap:7px;}
.colhint .sw{width:9px;height:9px;border-radius:3px;background:var(--brand-600);}
.colhint .sw.m{background:var(--brand-300);}
.pchange{margin-top:18px;background:var(--info-bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.pchange h3{font-size:15.5px;margin:0 0 5px;}
.pchange p{color:var(--ink-2);font-size:14px;margin:0;}
.pchange summary{margin-top:10px;font-size:14px;font-weight:650;color:var(--ink-brand);cursor:pointer;}
.pchange .tovr{margin-top:12px;}

/* the charity, education and public sector discount, under the volume table (CP-055) */
.sdisc{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--elev-1);}
.sdisc h3{font-size:16.5px;margin:0 0 6px;}
.sdisc p{color:var(--ink-2);font-size:14px;margin:0;}
.sdisc-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0;padding:0;list-style:none;}
@media(max-width:720px){.sdisc-groups{grid-template-columns:1fr;}}
.sdisc-groups li{background:var(--surface-2);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.sdisc-groups .who{font-size:14px;color:var(--ink);}
.sdisc-groups .pct{font-size:20px;font-weight:700;color:var(--ink-brand);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* terms grid */
.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:860px){.terms{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.terms{grid-template-columns:1fr;}}
.term{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--elev-1);}
.term .ic{width:38px;height:38px;border-radius:10px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;}
.term h3{font-size:15.5px;margin:13px 0 5px;}
.term p{color:var(--ink-2);font-size:13.5px;}

/* switch band */
.band{background:linear-gradient(115deg,var(--brand-700),var(--brand-500));border-radius:var(--radius-lg);padding:38px;color:#fff;display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;box-shadow:var(--elev-2);}
@media(max-width:820px){.band{grid-template-columns:1fr;}}
.band h2{color:#fff;font-size:29px;}
.band p{color:rgba(255,255,255,.9);margin-top:11px;font-size:15.5px;}
.band .offers{display:flex;flex-direction:column;gap:10px;}
.band .offers .o{display:flex;gap:11px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:11px 14px;font-size:14px;font-weight:600;}
.band .offers .o svg{flex:0 0 auto;}
.band .offers a.o{color:#fff;text-decoration:none;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);}
.band .offers a.o:hover{background:rgba(255,255,255,.28);text-decoration:underline;}

/* home reseller teaser */
.reseller{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px;box-shadow:var(--elev-1);}
@media(max-width:820px){.reseller{grid-template-columns:1fr;gap:26px;}}
.reseller h2{font-size:29px;}
.reseller p{color:var(--ink-2);font-size:16px;margin-top:12px;}
.reseller .plist{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.reseller .plist{grid-template-columns:1fr;}}
.reseller .pl{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:15px;}
.reseller .pl .k{font-weight:700;color:var(--ink-brand);font-size:26px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.reseller .pl .v{color:var(--ink-2);font-size:13px;margin-top:2px;}

/* final cta */
.final{text-align:center;}
.final h2{font-size:34px;}
.final p{color:var(--ink-2);font-size:18px;margin:14px auto 0;max-width:52ch;}
.final .hero-actions,.final .acts{display:flex;justify-content:center;gap:13px;margin-top:26px;flex-wrap:wrap;}

/* page head (features/pricing) */
.phead{text-align:center;margin:0 auto;padding-top:34px;}
.phead h1{font-size:42px;margin:9px auto 0;letter-spacing:-.03em;max-width:28ch;}
.phead p{color:var(--ink-2);font-size:18px;margin:14px auto 0;max-width:960px;}
@media(max-width:600px){.phead h1{font-size:33px;}}

/* feature rows (features page) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:28px 0;border-top:1px solid var(--border);}
.frow:first-of-type{border-top:0;}
@media(max-width:880px){.frow{grid-template-columns:1fr;gap:26px;}}
.frow .ic{width:44px;height:44px;border-radius:11px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;margin-bottom:14px;}
.frow h2{font-size:27px;} .frow p{color:var(--ink-2);font-size:16px;margin-top:12px;}
.frow:nth-child(even) .fvis{order:-1;}
@media(max-width:880px){.frow:nth-child(even) .fvis{order:-1;}}
.blocks{display:flex;flex-direction:column;gap:9px;}
.blk{border:1px dashed var(--border-strong);border-radius:9px;padding:11px 13px;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:10px;background:var(--surface-2);}
.blk.sel{border-style:solid;border-color:var(--brand-600);background:color-mix(in srgb,var(--brand-600) 5%,transparent);color:var(--ink);}
.blk .drag{color:var(--ink-3);} .blk .k{margin-left:auto;font-size:11px;color:var(--ink-3);}
.rt{width:100%;border-collapse:collapse;font-size:13px;}
.rt td{padding:9px 8px;border-bottom:1px solid var(--border);} .rt tr:last-child td{border-bottom:0;}
.rt .pri{width:26px;height:26px;border-radius:7px;background:var(--info-bg);color:var(--brand-700);display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;}
.addin{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.addin .abar{background:var(--surface-2);padding:9px 13px;font-size:12px;color:var(--ink-3);border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;}
.addin .abody{padding:14px;font-size:13px;color:var(--ink-2);}
.addin .prev{margin-top:10px;border:1px dashed color-mix(in srgb,var(--brand-600) 40%,var(--border));border-radius:9px;padding:11px;background:color-mix(in srgb,var(--brand-600) 4%,transparent);}
.addin .prev .nm{font-weight:700;color:var(--ink-brand);font-size:13px;} .addin .prev .rl{font-size:11.5px;color:var(--brand-700);}
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.more.five{grid-template-columns:repeat(5,1fr);}
@media(max-width:900px){.more,.more.five{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.more,.more.five{grid-template-columns:1fr;}}
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--elev-1);}
.mcard .ic{width:38px;height:38px;border-radius:10px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;}
.mcard h3{font-size:15.5px;margin:12px 0 5px;} .mcard p{color:var(--ink-2);font-size:13.5px;}

/* resellers page */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--elev-1);}
.kpi .k{font-weight:800;color:var(--ink-brand);font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .kpi .v{color:var(--ink-2);font-size:14px;margin-top:3px;}
.bopts{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:820px){.bopts{grid-template-columns:1fr;}}
.bopt{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--elev-1);}
.bopt .ic{width:42px;height:42px;border-radius:11px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;}
.bopt h3{font-size:19px;margin:14px 0 8px;} .bopt p{color:var(--ink-2);font-size:15px;}
.bopt ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.bopt ul li{display:flex;gap:9px;font-size:14px;color:var(--ink-2);} .bopt ul li svg{color:var(--brand-600);flex:0 0 auto;margin-top:3px;}
.perc{margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px;}
.perc b{color:var(--ink-brand);}
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:860px){.bens{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.bens{grid-template-columns:1fr;}}
.ben{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--elev-1);}
.ben .ic{width:40px;height:40px;border-radius:10px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;} .ben h3{font-size:16.5px;margin:13px 0 6px;} .ben p{color:var(--ink-2);font-size:14px;}
.apply{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--elev-2);}
@media(max-width:820px){.apply{grid-template-columns:1fr;gap:26px;}}
.apply h2{font-size:28px;} .apply p{color:var(--ink-2);font-size:16px;margin-top:12px;}
.form{display:flex;flex-direction:column;gap:12px;}
.field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:12.5px;font-weight:650;color:var(--ink-2);}
.input,.select,textarea.input{font:inherit;font-size:14px;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);width:100%;}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 20%,transparent);}
form.card > .grid,form.card > .field{margin-bottom:13px;}
form.card > .cf-turnstile{margin-bottom:14px;}
.btn-block{width:100%;justify-content:center;}
.field-err{display:block;color:var(--bad);font-size:12.5px;margin-top:5px;}
.field-err:empty{display:none;}
.form-errors.validation-summary-valid{display:none;}
.form-errors ul{margin:0 0 14px;padding:11px 14px 11px 32px;list-style:disc;background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:var(--radius-sm);color:var(--ink);font-size:13.5px;}
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);font-weight:650;font-size:15px;padding:12px 18px;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--elev-1);}
.ms-btn:hover{border-color:var(--brand-600);text-decoration:none;}
.formnote{font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:flex-start;} .formnote svg{color:var(--ok);flex:0 0 auto;margin-top:1px;}
.future{display:flex;gap:14px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;}
.future .ic{width:40px;height:40px;border-radius:10px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;flex:0 0 40px;}
.future h3{font-size:16px;} .future p{color:var(--ink-2);font-size:14px;margin-top:5px;}

/* faq */
.faq{display:flex;flex-direction:column;gap:10px;}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-1);overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:650;color:var(--ink-brand);font-size:15.5px;display:flex;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{margin-left:auto;color:var(--ink-3);transition:transform .15s;}
.faq details[open] summary .chev{transform:rotate(90deg);}
.faq .a{padding:0 20px 18px;color:var(--ink-2);font-size:14.5px;}

/* generic helpers (company pages) */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-1);}
.pad{padding:22px;}
.grid{display:grid;gap:18px;}
.g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr;}}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--elev-1);}
.feature h3{font-size:16px;margin:0 0 6px;} .feature p{color:var(--ink-2);font-size:14px;margin:0;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;}
.stat .num{font-size:24px;font-weight:800;color:var(--ink-brand);font-variant-numeric:tabular-nums;}
.stat .lab{font-size:12.5px;color:var(--ink-3);}
.note{background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--ink-2);border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;}

/* legal pages */
.legal-head{padding:52px 0 8px;}
.legal-head h1{font-size:40px;margin-top:8px;}
.legal{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:20px 0 60px;}
@media(max-width:860px){.legal{grid-template-columns:1fr;gap:22px;} .legal-nav{position:static !important;}}
/* .legal comes after .wrap and sets its own padding, which took away .wrap's side gutter: wherever the page is no wider than
   the column it is centred in, the text touched the edges of the screen. */
@media(max-width:1280px){.legal{padding-left:26px;padding-right:26px;}}
.legal-nav{position:sticky;top:80px;align-self:start;font-size:13.5px;}
.legal-nav a{display:block;padding:6px 10px;border-radius:7px;color:var(--ink-2);}
.legal-nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.legal-body{min-width:0;}
/* Anything reachable by a #fragment has to clear the sticky nav, or the browser scrolls the target to y=0
   where the nav sits on top of it and the jump reads as nothing having happened. The legal pages already did
   this for their own headings; these are the rest of the site's link targets. */
.frow[id],.mcard[id],section[id]{scroll-margin-top:88px;}
/* Arriving from a link should also be visible once you are there, so the section that was asked for is marked
   until the next navigation. A ring rather than a colour change, so it reads the same in both themes. */
.mcard:target{border-color:var(--brand-600);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-600) 20%,transparent);}
.frow:target .ic{background:var(--brand-600);color:#fff;}
.frow:target h2{color:var(--brand-700);}
.legal-body h2{font-size:20px;margin-top:32px;scroll-margin-top:80px;}
.legal-body h3{font-size:16px;margin-top:22px;}
.legal-body p,.legal-body li{color:var(--ink-2);}
.legal-body p{margin:10px 0;}
.legal-body ul{padding-left:20px;}
.legal-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px;}
.legal-body th,.legal-body td{border:1px solid var(--border);padding:9px 12px;text-align:left;vertical-align:top;}
.legal-body thead th{background:var(--surface-2);}
/* A table with more columns than a phone is wide, such as the cookie list, scrolls inside its own box instead of widening the page. */
.legal-body .legal-table{overflow-x:auto;margin:14px 0;}
.legal-body .legal-table table{margin:0;}
/* A long agreement has more sections than a screen is tall, so its sticky navigation scrolls on its own. */
.legal-nav{max-height:calc(100vh - 100px);overflow-y:auto;}
.legal-body ol{padding-left:22px;}
.legal-body li{margin:4px 0;}
/* The third-party notices: one card per library or font, its facts as a two-column list that stacks on a phone, and
   its licence text folded away under a summary, since most of them are the same MIT text. */
.tpn .tpn-item{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:14px 18px;margin:14px 0;scroll-margin-top:80px;}
.tpn .tpn-item h3{margin:0 0 8px;}
.tpn .tpn-facts{display:grid;grid-template-columns:120px 1fr;gap:4px 14px;margin:0;font-size:14px;}
.tpn .tpn-facts dt{color:var(--ink-3);font-weight:600;}
.tpn .tpn-facts dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere;}
@media(max-width:560px){.tpn .tpn-facts{grid-template-columns:1fr;} .tpn .tpn-facts dd{margin-bottom:6px;}}
.tpn .tpn-licence{margin-top:10px;}
.tpn .tpn-licence summary{cursor:pointer;color:var(--brand-700);font-size:14px;font-weight:600;}
.tpn .tpn-licence pre{margin:8px 0 0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow-y:auto;}
/* Every version of a legal document: the notice of one waiting to take effect, above the text, and the table of
   all of them, below it. */
.legal-notice{margin-top:22px;background:var(--info-bg);border:1px solid color-mix(in srgb,var(--brand-600) 35%,transparent);border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;color:var(--ink);line-height:1.55;}
.legal-notice.withdrawn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,transparent);}
/* The question a customer's referral link asks on the home page: a band under the navigation in the notice's colours. */
.referral-choice{background:var(--info-bg);border-bottom:1px solid color-mix(in srgb,var(--brand-600) 35%,transparent);color:var(--ink);}
.referral-choice[hidden]{display:none;}
.referral-in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;}
.referral-text{flex:1 1 420px;font-size:14.5px;line-height:1.55;}
.referral-small{display:block;margin-top:4px;font-size:13px;color:var(--ink-2);}
.referral-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.referral-actions .btn{padding:9px 16px;font-size:14.5px;}
.legal-versions{padding-top:8px;padding-bottom:64px;}
@media(max-width:640px){.legal-versions .fp{display:none;} .legal-versions td.v{white-space:normal;}}
.legal-versions h2{font-size:20px;margin:0 0 4px;}
.legal-versions p{color:var(--ink-2);font-size:14px;margin:0 0 14px;}
.legal-versions .tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);}
.legal-versions table{width:100%;border-collapse:collapse;font-size:14px;}
.legal-versions th{background:var(--surface-2);text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:9px 12px;}
.legal-versions td{border-top:1px solid var(--border);padding:10px 12px;vertical-align:top;color:var(--ink-2);}
.legal-versions td.act{white-space:nowrap;}
.legal-versions td.v,.legal-versions td.fp{font-family:var(--font-mono);font-size:12.5px;white-space:nowrap;}
.legal-versions tr.current td{background:color-mix(in srgb,var(--brand-600) 6%,transparent);}
.legal-versions .tag{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;margin-left:6px;background:var(--info-bg);color:var(--brand-700);}
.legal-versions .tag.mute{background:var(--surface-2);color:var(--ink-3);}
/* What a version changes, word by word. An insertion is underlined and a deletion struck through as well as coloured,
   so the change reads the same printed in black and white or by someone who cannot tell the colours apart. */
.legal-changes{padding-bottom:64px;}
.legal-changes .lc-lead{color:var(--ink-2);font-size:15px;margin:18px 0 6px;line-height:1.6;}
.legal-changes ins,.legal-changes del{border-radius:3px;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.legal-changes ins{background:var(--ok-bg);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ok);text-underline-offset:3px;}
.legal-changes del{background:var(--bad-bg);color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--bad);}
.legal-changes .lc-group h2{font-size:18px;margin:30px 0 10px;}
.legal-changes .lc-change{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 10px;background:var(--surface);}
.legal-changes .lc-added{border-left-color:var(--ok);}
.legal-changes .lc-removed{border-left-color:var(--bad);}
.legal-changes .lc-changed{border-left-color:var(--brand-600);}
.legal-changes .lc-kind{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;}
.legal-changes .lc-change p{margin:0;color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere;}
.legal-changes .lc-change p.lc-heading{font-weight:600;color:var(--ink);}

/* blog + case-study card grid */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.postgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.postgrid{grid-template-columns:1fr;}}
/* A single row of suggestions ("Keep reading"). It takes as many cards as the room it has rather than the screen, and
   leaves out the rest instead of starting a second row; on a phone the cards scroll sideways instead of stacking. */
.postrow{container-type:inline-size;}
.postgrid--row{grid-template-columns:repeat(4,minmax(0,1fr));}
@container (max-width:1099px){.postgrid--row{grid-template-columns:repeat(3,minmax(0,1fr));}.postgrid--row>:nth-child(n+4){display:none;}}
@container (max-width:799px){.postgrid--row{grid-template-columns:repeat(2,minmax(0,1fr));}.postgrid--row>:nth-child(n+3){display:none;}}
@container (max-width:539px){
  .postgrid--row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;}
  .postgrid--row>.post,.postgrid--row>.post:nth-child(n){display:flex;flex:0 0 84%;scroll-snap-align:start;}
}
.post{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-1);overflow:hidden;transition:.14s;}
.post:hover{border-color:color-mix(in srgb,var(--brand-600) 40%,var(--border));box-shadow:var(--elev-2);transform:translateY(-2px);}
.post .thumb{height:148px;display:grid;place-items:center;font-size:42px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand-600) 16%,var(--surface)),color-mix(in srgb,var(--brand-400) 9%,var(--surface)));overflow:hidden;}
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post .pbody{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.post .cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600);}
.post h3{font-size:17px;}
.post .ex{color:var(--ink-2);font-size:14px;}
.post .meta{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center;}
.post .stretch{position:absolute;inset:0;z-index:1;}
.post h3,.post .cat,.post .ex,.post .meta{position:relative;z-index:2;pointer-events:none;}

/* article */
.article{max-width:800px;margin:0 auto;}
/* The article with its "On this page" panel beside it, laid out as a help article is: across the page's own width, the
   text starting under the logo and the panel at the right-hand edge. The title block above starts where the text does.
   Below 1024px the panel goes, as the help centre's does, and the article is centred again. */
.article-doc{display:grid;grid-template-columns:minmax(0,860px) 240px;gap:56px;justify-content:space-between;align-items:start;}
.article-doc .article{max-width:none;margin:0;min-width:0;}
.article--toc{max-width:none;}
.article--toc h1{max-width:860px;}
@media(max-width:1023px){.article-doc{grid-template-columns:minmax(0,800px);justify-content:center;}.article-doc .hc-toc{display:none;}.article--toc{max-width:800px;}}
.article .body h2{scroll-margin-top:88px;}
.article .kicker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);margin-top:12px;}
.article h1{font-size:38px;margin-top:12px;}
.article .lede{font-size:18px;color:var(--ink-2);margin-top:14px;}
.article .hero-img{width:100%;aspect-ratio:3/2;max-height:440px;object-fit:cover;border-radius:16px;border:1px solid var(--border);box-shadow:var(--elev-1);display:block;margin-top:22px;}
.article .body{margin-top:26px;}
.article .body h2{font-size:23px;margin-top:32px;}
.article .body h3{font-size:18px;margin-top:24px;}
.article .body p,.article .body li{color:var(--ink-2);font-size:16.5px;}
.article .body p{margin:15px 0;}
.article .body ul,.article .body ol{padding-left:22px;margin:12px 0;}
.article .body .article-table{overflow-x:auto;margin:22px 0;border:1px solid var(--border);border-radius:var(--radius-sm);}
.article .body table{width:100%;border-collapse:collapse;font-size:15px;}
.article .body th,.article .body td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.article .body th{background:var(--surface-2);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);}
.article .body td{color:var(--ink-2);}
.article .body tr:last-child td{border-bottom:0;}
.article .body li{margin:6px 0;}
.article .body blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--brand-600);background:var(--surface-2);border-radius:0 9px 9px 0;color:var(--ink);font-size:17px;font-style:italic;}
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);font-weight:600;}
.backlink:hover{color:var(--brand-600);text-decoration:none;}

/* case study detail */
.cs-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;}
@media(max-width:860px){.cs-hero{grid-template-columns:1fr;gap:26px;}}
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px;}
@media(max-width:560px){.cs-metrics{grid-template-columns:1fr;}}
.cs-logo{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:28px;background:var(--info-bg);border:1px solid var(--border);overflow:hidden;}
.cs-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-quote{font-size:22px;line-height:1.5;color:var(--ink-brand);font-weight:600;letter-spacing:-.01em;}
/* The customer's quote beside the story, at the right-hand edge where a blog article keeps its "On this page" panel.
   It comes first in the page, so a narrow screen shows it above the story. */
.article-doc .cs-aside{grid-column:2;grid-row:1;position:sticky;top:88px;}
.article-doc .cs-aside .cs-quote{font-size:18px;}
.article-doc>.article{grid-column:1;grid-row:1;}
@media(max-width:1023px){.article-doc .cs-aside{grid-column:auto;grid-row:auto;position:static;margin-bottom:22px;}.article-doc>.article{grid-column:auto;grid-row:auto;}}
/* A blog article without headings to list keeps the same layout, with the trial beside it instead of the panel. */
.article-cta{position:sticky;top:88px;}
.article-cta h3{font-size:16px;}
.article-cta p{color:var(--ink-2);font-size:14px;margin-top:6px;}
.article-cta .btn{margin-top:14px;width:100%;justify-content:center;}
@media(max-width:1023px){.article-cta{display:none;}}

/* comparison table */
/* Positioned so the cells' visually hidden labels are placed inside the scrolling table, not against the page, which
   they otherwise widened on a phone. */
.cmp{position:relative;overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--elev-1);background:var(--surface);}
table.cmp-t{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px;}
table.cmp-t.wide{min-width:920px;font-size:14px;}
table.cmp-t.wide th,table.cmp-t.wide td{padding:11px 10px;vertical-align:middle;}
table.cmp-t.wide thead th{white-space:nowrap;}
table.cmp-t.wide td.feat{white-space:nowrap;}
table.cmp-t tr.group td{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;padding:8px 10px;}
table.cmp-t .fig{font-variant-numeric:tabular-nums;font-weight:600;}
table.cmp-t .tag{font-size:11px;color:var(--ink-2);}
/* compare table marks: tick, cross, and a dash for "not stated" */
.mk{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;vertical-align:middle;}
.mk svg{display:block;}
.mk.y{background:var(--ok-bg);color:var(--ok);}
.mk.n{background:var(--bad-bg);color:var(--bad);}
.mk.u{width:auto;height:auto;color:var(--ink-3);font-weight:700;}
.cmp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--ink-2);margin:0 0 12px;align-items:center;}
.cmp-legend>span{display:inline-flex;gap:6px;align-items:center;}
/* plans as columns: each product's middle plan is shaded. Equal plan widths (the colgroup) let a cell spanning a product's
   plans paint the same stripe across it, since a column's own background is not drawn behind a spanning cell. */
table.cmp-t.cmp-plans{table-layout:fixed;min-width:1060px;}
table.cmp-t.cmp-plans td.feat{white-space:normal;}
table.cmp-t.cmp-plans thead tr.plans th{font-size:10.5px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink-2);padding-top:0;white-space:normal;line-height:1.25;}
table.cmp-t.cmp-plans th.vend{border-bottom:0;}
table.cmp-t td.alt,table.cmp-t th.alt{background:color-mix(in srgb,var(--ink) 5%,transparent);}
table.cmp-t td.us.alt,table.cmp-t th.us.alt{background:color-mix(in srgb,var(--brand-600) 13%,transparent);}
table.cmp-t td.sp2{background:linear-gradient(90deg,color-mix(in srgb,var(--brand-600) 6%,transparent) 50%,color-mix(in srgb,var(--brand-600) 13%,transparent) 50%);}
table.cmp-t td.sp3{background:linear-gradient(90deg,transparent 33.333%,color-mix(in srgb,var(--ink) 5%,transparent) 33.333% 66.667%,transparent 66.667%);}
/* summary cards: label over value, every value on a line of one height, so the cards' rows line up side by side */
.cmp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.cmp-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--elev-1);}
.cmp-card.us{border-color:var(--brand-600);background:color-mix(in srgb,var(--brand-600) 6%,var(--surface));}
.cmp-card .nm{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;}
.cmp-card.us .nm{color:var(--brand-700);}
.cmp-card .pr{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin:4px 0 2px;position:relative;width:max-content;max-width:100%;}
.cmp-card .pr .tag{font-size:12px;font-weight:600;color:var(--ink-2);}
.cmp-card .per{font-size:11.5px;color:var(--ink-3);line-height:1.35;}
.cmp-card dl{margin:8px 0 0;font-size:13px;}
.cmp-card dt{color:var(--ink-3);white-space:nowrap;font-size:11.5px;margin-top:6px;}
.cmp-card dd{margin:0;height:22px;display:flex;align-items:center;font-weight:600;color:var(--ink);white-space:nowrap;width:max-content;max-width:100%;position:relative;}
.cmp-card dd .mk{width:18px;height:18px;}
.cmp-more{font-size:14px;margin:12px 0 0;}
/* The "choose this if" pair that opens an alternatives page: the competitor first, then Footer365 outlined in brand blue. */
.choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:4px 0 26px;align-items:start;}
.choose .card{margin:0;}
.choose .card.us{border-color:var(--brand-600);background:color-mix(in srgb,var(--brand-600) 6%,var(--surface));}
.choose h2{font-size:17px;margin:0 0 8px;}
.choose ul{margin:0;padding-left:18px;}
.choose li{margin:0 0 6px;}

/* The alternatives and comparison pages (/alternatives/..., /compare/exclaimer-vs-codetwo), laid out across the page's
   own width like the home page: a two-column opening with the facts at a glance beside it, then sections of cards,
   tables and steps. Prose stays in columns of a readable length rather than in one line across the page. */
.vs-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center;}
@media(max-width:980px){.vs-hero{grid-template-columns:1fr;gap:32px;}}
.vs-kicker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3);margin-top:16px;}
.vs-kicker .cat{color:var(--brand-600);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;}
.hero .vs-hero h1{font-size:46px;margin-top:12px;max-width:20ch;}
.hero .vs-hero .lede{max-width:62ch;}
@media(max-width:600px){.hero .vs-hero h1{font-size:34px;}}
.glance{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--elev-3);overflow:hidden;}
.glance .gh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.glance .gh b{color:var(--ink-brand);font-size:15px;}
.glance table{width:100%;border-collapse:collapse;font-size:14px;}
.glance th,.glance td{padding:11px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.glance thead th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;}
.glance th.us{color:var(--brand-700);}
.glance .us{background:color-mix(in srgb,var(--brand-600) 6%,transparent);}
.glance td.k{color:var(--ink-2);width:36%;}
.glance td.v{font-weight:650;color:var(--ink-brand);font-variant-numeric:tabular-nums;}
.glance tbody tr:last-child td{border-bottom:0;}
.glance .gf{padding:11px 18px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--border);}
.vs-head{margin:0 0 22px;}
.vs-head h2{font-size:30px;margin-top:8px;max-width:30ch;}
.vs-head p{color:var(--ink-2);font-size:16.5px;margin-top:10px;}
.vs-sec[id]{scroll-margin-top:88px;}
/* Reasons, each a card of its own: why people move, and what the other product does better. */
.vs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.vs-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--brand-600);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--elev-1);}
.vs-card h3{font-size:16.5px;margin:0 0 7px;}
.vs-card p{color:var(--ink-2);font-size:14.5px;}
/* A reason in the other product's favour, told apart from Footer365's own by its neutral edge. */
.vs-card.them{border-top-color:var(--border-strong);}
/* Two cards side by side: who each product suits. */
.vs-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;}
@media(max-width:820px){.vs-pair{grid-template-columns:1fr;}}
.vs-pair .card{padding:24px 26px;}
.vs-pair .card.us{border-color:var(--brand-600);background:color-mix(in srgb,var(--brand-600) 6%,var(--surface));}
.vs-pair h3{font-size:19px;margin:0 0 10px;}
.vs-pair p,.vs-pair li{color:var(--ink-2);font-size:15px;}
.vs-pair ul{margin:0;padding-left:20px;}
.vs-pair li{margin:0 0 7px;}
.vs-pair li b{color:var(--ink);}
/* A table beside the words that explain it, which become one column on a narrow screen. */
.vs-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start;}
@media(max-width:980px){.vs-split{grid-template-columns:1fr;gap:22px;}}
.vs-prose p,.vs-prose li{color:var(--ink-2);font-size:16px;}
.vs-prose p+p{margin-top:14px;}
.vs-prose ul{margin:12px 0 0;padding-left:20px;}
.vs-prose li{margin:6px 0;}
.vs-note{margin-top:12px;font-size:13.5px;color:var(--ink-3);}
/* A text comparison table: its cells hold sentences, so they start at the top and the label column stays narrow. */
table.cmp-t.txt td{vertical-align:top;color:var(--ink-2);}
table.cmp-t.txt td.feat{width:24%;color:var(--ink);}
table.cmp-t.txt td.us{color:var(--ink);}
.tovr+.tovr{margin-top:18px;}
/* The steps of a move, numbered, four or five across. */
.vs-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.vs-steps .step{padding:22px 20px;}
.vs-steps .step h3{font-size:16.5px;margin:14px 0 6px;}
.vs-steps .step p{font-size:14.5px;}
/* Questions and answers, two across. */
.vs-qa{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:820px){.vs-qa{grid-template-columns:1fr;}}
.vs-qa .card{padding:20px 22px;}
.vs-qa h3{font-size:16.5px;margin:0 0 6px;}
.vs-qa p{color:var(--ink-2);font-size:14.5px;}
.vs-small{font-size:12.5px;color:var(--ink-3);}
/* flyover: a button, so it opens on hover, focus and tap; site.js places the box against the window so it never widens
   or lengthens a scrolling table. Marked by a dotted underline drawn as a text decoration, which takes no room and so
   moves nothing (dev/mockups/website-flyover-markers.html, option A). A tick, cross or dash on its own cannot carry a
   text decoration, so the same dotted line is drawn beneath the mark. */
.tip{display:inline-block;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline dotted var(--border-strong);text-decoration-thickness:1.5px;text-underline-offset:4px;}
.tip:hover,.tip:focus-visible,.tip.open{text-decoration-color:var(--brand-600);}
.tip:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:4px;}
.tip:not(:has(.fig,.tag)) .mk{position:relative;}
.tip:not(:has(.fig,.tag)) .mk::after{content:"";position:absolute;left:2px;right:2px;bottom:-5px;border-bottom:1.5px dotted var(--border-strong);}
.tip:not(:has(.fig,.tag)):is(:hover,:focus-visible,.open) .mk::after{border-bottom-color:var(--brand-600);}
.tip-sample{text-decoration:underline dotted var(--border-strong);text-decoration-thickness:1.5px;text-underline-offset:4px;}
.tip .tb{display:none;position:fixed;z-index:60;left:0;top:0;width:max-content;max-width:240px;background:var(--ink);color:var(--surface);font-size:12.5px;font-weight:400;line-height:1.45;text-align:left;padding:8px 10px;border-radius:8px;box-shadow:var(--elev-2);pointer-events:none;white-space:normal;text-transform:none;letter-spacing:0;}
.tip .tb b{display:block;margin-bottom:2px;}
.tip.open .tb{display:block;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
table.cmp-t th,table.cmp-t td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:left;}
table.cmp-t thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;background:var(--surface-2);}
table.cmp-t thead th.us{color:var(--brand-700);}
table.cmp-t td.feat{font-weight:600;color:var(--ink);}
/* A row label shares its class name with the feature cards (.feat), so take off what a card adds: in a table it drew
   every label as a raised box of its own. */
table.cmp-t td.feat,table.cmp-t td.feat:hover{background:none;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;transform:none;transition:none;}
table.cmp-t tbody tr:last-child td.feat{border-bottom:0;}
/* A two-product table fits a phone, so it does not take the width the many-column comparison needs. */
table.cmp-t.fit{min-width:0;}
@media(max-width:560px){table.cmp-t.fit th,table.cmp-t.fit td{padding:10px 8px;}}
table.cmp-t td.c{text-align:center;}
table.cmp-t col.uscol,table.cmp-t td.us,table.cmp-t th.us{background:color-mix(in srgb,var(--brand-600) 6%,transparent);}
table.cmp-t .yes{color:var(--ok);} table.cmp-t .no{color:var(--ink-3);}
table.cmp-t tbody tr:last-child td{border-bottom:0;}

/* Share row on content pages (blog articles, case studies). */
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--border);}
.share-lab{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);}
.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:color .12s,border-color .12s,background .12s;}
.share-btn:hover{color:var(--brand-600);border-color:var(--brand-300);background:var(--surface-2);text-decoration:none;}
.share-btn svg{display:block;}
.share-copied{display:none;font-size:12.5px;font-weight:600;color:var(--brand-600);}
.share-btn.copied .share-ic-copy{display:none;}
.share-btn.copied .share-copied{display:inline;}

/* ============================================================================
   Help centre and site search
   ========================================================================== */
/* The search's results list hangs below this section, so it must not be clipped as .hero clips its decoration, and
   it must sit above the sections that follow. Its glow is inset to the section, so nothing else relies on the clip. */
.hc-hero{text-align:center;padding-bottom:26px;overflow:visible;z-index:2;}
.hc-hero h1{font-size:44px;margin-top:10px;}
.hc-hero .lede{margin:14px auto 0;max-width:900px;}
.hc-search{position:relative;max-width:640px;margin:26px auto 0;text-align:left;}
.hc-search>svg{position:absolute;left:16px;top:17px;color:var(--ink-3);pointer-events:none;}
.hc-search .input{font-size:16px;padding:14px 16px 14px 44px;border-radius:var(--radius);box-shadow:var(--elev-1);}
.hc-search--inline{margin:0;max-width:340px;flex:1 1 240px;}
.hc-search--inline .input{padding:9px 12px;font-size:14px;box-shadow:none;}
.hc-live{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-3);max-height:70vh;overflow-y:auto;}
.hc-live a{display:block;padding:11px 15px;border-bottom:1px solid var(--border);color:var(--ink);}
.hc-live a:last-child{border-bottom:0;}
.hc-live a:hover,.hc-live a.on{background:color-mix(in srgb,var(--brand-600) 7%,transparent);text-decoration:none;}
.hc-live a b{display:block;color:var(--ink-brand);font-size:14.5px;}
.hc-live a small{display:block;color:var(--ink-3);font-size:12px;margin-top:1px;}
.hc-live a span{display:block;color:var(--ink-2);font-size:13px;margin-top:3px;line-height:1.45;}
.hc-live .all{font-weight:650;color:var(--brand-700);font-size:13.5px;}
.hc-live .empty{padding:13px 15px;color:var(--ink-2);font-size:13.5px;}
.hc-live mark,.hc-results mark{background:color-mix(in srgb,var(--brand-600) 18%,transparent);color:inherit;border-radius:3px;padding:0 1px;}
/* The help bar (section menu, breadcrumbs, search) stays in reach while reading, held under the site's own top bar.
   site.js measures both bars into --nav-h and --hc-top-h, so whatever sticks below them, the "On this page" panel and
   a heading scrolled to from it, clears them at any screen width. The values here are only what the page starts with. */
:root{--nav-h:67px;--hc-top-h:62px;}
.hc-top{position:sticky;top:var(--nav-h);z-index:35;padding:12px 0;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .15s,box-shadow .15s;}
.hc-top.stuck{border-bottom-color:var(--border);box-shadow:0 6px 14px -12px rgba(0,0,0,.35);}
.hc-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;}
.hc-crumbs{font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.hc-crumbs a{color:var(--ink-2);}
.hc-crumbs .sep{color:var(--border-strong);}
.hc-crumbs [aria-current]{color:var(--ink);font-weight:600;}
.hc-sechead{padding:30px 0 10px;}
.hc-sechead h1{font-size:38px;margin-top:8px;}
.hc-sechead .lede{color:var(--ink-2);font-size:17px;margin-top:10px;max-width:60ch;}
.hc-quick{display:flex;align-items:center;gap:20px;background:linear-gradient(115deg,var(--brand-700),var(--brand-500));color:#fff;border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--elev-2);margin-bottom:22px;}
.hc-quick:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--elev-3);}
.hc-quick .ic{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;}
.hc-quick .eyebrow{color:rgba(255,255,255,.85);}
.hc-quick h2{color:#fff;font-size:24px;margin-top:4px;}
.hc-quick p{color:rgba(255,255,255,.9);margin-top:6px;font-size:15px;}
.hc-quick .go{margin-left:auto;flex:0 0 auto;font-weight:700;font-size:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:10px 16px;border-radius:var(--radius-sm);}
@media(max-width:700px){.hc-quick{flex-wrap:wrap;}.hc-quick .go{margin-left:0;}}
.hc-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.hc-sections{grid-template-columns:1fr;}}
.hc-sec{padding:24px;display:flex;flex-direction:column;}
.hc-sec h2{font-size:21px;margin-top:6px;}
.hc-sec h2 a{color:var(--ink-brand);}
.hc-sec p{color:var(--ink-2);font-size:14.5px;margin-top:6px;}
.hc-sec ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;}
.hc-sec li a{display:block;padding:6px 0;font-size:14.5px;}
.hc-sec .more{margin-top:auto;padding-top:14px;font-size:13.5px;font-weight:650;}
.hc-group{padding:18px 0 8px;scroll-margin-top:calc(var(--nav-h) + var(--hc-top-h) + 12px);}
.hc-group h2{font-size:22px;}
.hc-group>p{margin-top:4px;font-size:14.5px;}
.hc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px;}
@media(min-width:1100px){.hc-list:not(.hc-list--two){grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.hc-list{grid-template-columns:1fr;}}
.hc-item{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 18px;box-shadow:var(--elev-1);transition:.13s;}
.hc-item:hover{text-decoration:none;border-color:color-mix(in srgb,var(--brand-600) 45%,var(--border));box-shadow:var(--elev-2);}
.hc-item b{display:block;color:var(--ink-brand);font-size:15.5px;}
.hc-item span{display:block;color:var(--ink-2);font-size:14px;margin-top:3px;}
/* A help article and its "On this page" panel, across the same width as every other page. The article is held to a
   readable line length and starts under the logo; the panel sits at the right-hand edge. */
.hc-doc{display:grid;grid-template-columns:minmax(0,860px) 240px;gap:56px;justify-content:space-between;align-items:start;}
@media(max-width:1023px){.hc-doc{grid-template-columns:minmax(0,1fr);}.hc-toc{display:none;}}
.hc-toc{position:sticky;top:84px;font-size:14px;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:none;}
/* On a help page the panel sits below the help bar too. */
.hc-doc .hc-toc{top:calc(var(--nav-h) + var(--hc-top-h) + 20px);max-height:calc(100vh - var(--nav-h) - var(--hc-top-h) - 40px);}
.hc-toc::-webkit-scrollbar{display:none;}
/* The section's articles open from a button at the start of the breadcrumb row instead of standing beside the
   article: on hover where there is a mouse, and on a tap or a key press through site.js. A long section still
   scrolls inside the panel, without drawing a scroll bar. */
.hc-top-start{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;min-width:0;}
.hc-nav{position:relative;}
.hc-nav-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:650;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;cursor:pointer;}
.hc-nav-btn:hover,.hc-nav.open .hc-nav-btn{border-color:var(--brand-600);color:var(--brand-700);}
.hc-nav-btn:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;}
.hc-nav .hc-side{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:330px;max-width:calc(100vw - 32px);padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-3);font-size:14px;max-height:calc(100vh - var(--nav-h) - var(--hc-top-h) - 24px);overflow-y:auto;scrollbar-width:none;}
.hc-nav .hc-side::-webkit-scrollbar{display:none;}
/* Bridges the gap under the button, so moving the pointer down to the panel does not close it on the way. */
.hc-nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;}
@media(hover:hover){.hc-nav:hover .hc-side{display:block;}}
.hc-nav.open .hc-side{display:block;}
/* On a phone the help bar keeps to two rows: the menu button with the breadcrumbs on one line beside it, shortened at
   the end, then the search box. Written after the rules it narrows so that it wins. */
@media(max-width:640px){
  .hc-top-start{flex-wrap:nowrap;width:100%;}
  .hc-nav{flex-shrink:0;}
  .hc-crumbs{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;}
  .hc-crumbs [aria-current]{overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .hc-search--inline{max-width:none;flex-basis:100%;}
}
.hc-side-title{display:block;font-weight:700;color:var(--ink-brand);margin-bottom:8px;}
.hc-side details{margin:2px 0;}
.hc-side summary{cursor:pointer;font-weight:650;color:var(--ink);padding:6px 0;list-style:none;}
.hc-side summary::-webkit-details-marker{display:none;}
.hc-side summary::before{content:"\25B8";display:inline-block;width:14px;color:var(--ink-3);transition:transform .15s;}
.hc-side details[open] summary::before{transform:rotate(90deg);}
.hc-side a{display:block;padding:5px 10px 5px 14px;color:var(--ink-2);border-left:2px solid var(--border);}
.hc-side a:hover{color:var(--ink);text-decoration:none;border-left-color:var(--border-strong);}
.hc-side a.on{color:var(--brand-700);border-left-color:var(--brand-600);font-weight:650;}
.hc-toc b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin-bottom:8px;}
.hc-toc a{display:block;padding:4px 0;color:var(--ink-2);font-size:13.5px;}
.hc-toc a.on{color:var(--brand-600);}
.hc-article{min-width:0;}
.hc-article h1{font-size:36px;margin-top:8px;}
.hc-article>.lede{font-size:18px;color:var(--ink-2);margin-top:12px;}
.hc-meta{font-size:12.5px;color:var(--ink-3);margin-top:10px;}
.hc-body{margin-top:22px;}
.hc-body h2{font-size:23px;margin-top:34px;scroll-margin-top:calc(var(--nav-h) + var(--hc-top-h) + 16px);}
.hc-body h3{font-size:18px;margin-top:24px;scroll-margin-top:calc(var(--nav-h) + var(--hc-top-h) + 16px);}
.hc-body p,.hc-body li{color:var(--ink-2);font-size:16px;}
.hc-body p{margin:13px 0;}
.hc-body ul,.hc-body ol{padding-left:22px;margin:12px 0;}
.hc-body li{margin:6px 0;}
.hc-body li>p{margin:6px 0;}
.hc-body strong{color:var(--ink);}
.hc-body code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--ink);word-break:break-word;}
.hc-body pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;overflow-x:auto;}
.hc-body pre code{background:none;border:0;padding:0;font-size:13.5px;word-break:normal;}
.hc-body img{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-1);margin:18px 0 6px;}
/* Each portal screenshot comes in both themes and the reader sees the one matching theirs: the site's own choice
   once site.js has set it, the browser's until then. The hidden one is lazy-loaded, so it is never fetched. */
.hc-body .hc-shot-dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hc-body .hc-shot-light{display:none;}
  :root:not([data-theme="light"]) .hc-body .hc-shot-dark{display:block;}
}
[data-theme="dark"] .hc-body .hc-shot-light{display:none;}
[data-theme="dark"] .hc-body .hc-shot-dark{display:block;}
/* A screenshot opens full size in a flyout (site.js). */
.hc-body img.hc-shot{cursor:zoom-in;}
.hc-body img.hc-shot:focus-visible{outline:2px solid var(--brand-600);outline-offset:3px;}
.hc-zoom{padding:0;border:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;overflow:visible;}
.hc-zoom::backdrop{background:rgba(8,12,20,.78);}
/* The X sits outside the image's top-right corner so it never covers the screenshot, and the image is kept narrow
   enough that the centred dialog always leaves room for it beside it. A narrow screen has no room at the side, so
   there the X goes above the corner instead. */
.hc-zoom img{display:block;max-width:min(calc(96vw - 112px),1600px);max-height:94vh;width:auto;height:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--elev-3);background:var(--surface);}
.hc-zoom-close{position:absolute;top:0;right:-50px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);box-shadow:var(--elev-2);cursor:pointer;}
.hc-zoom-close:hover{background:var(--surface-2);}
.hc-zoom-close:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;}
@media (max-width:640px){
  .hc-zoom img{max-width:96vw;max-height:calc(90vh - 56px);}
  .hc-zoom-close{top:-50px;right:0;}
}
html.hc-zoom-open{overflow:hidden;}
.hc-body blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--brand-600);background:var(--surface-2);border-radius:0 9px 9px 0;}
.hc-body blockquote p{margin:6px 0;color:var(--ink);}
/* Diagrams (Services/ArticleDiagrams.cs, fragments in Diagrams/): drawn in HTML so their labels are real text, in
   the theme's own colours. A diagram is one column of boxes and arrows in DOM order, which is also the order a screen
   reader reads it; dg--loop lays the same boxes out as an out-and-back loop once its own width has room, keyed to the
   figure rather than the window because a help article's column is narrower than the page. Elements are divs and
   spans only, so the article's own p, li and strong rules never reach inside. */
.dg{margin:24px 0;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--elev-1);container-type:inline-size;color:var(--ink-2);font-size:14px;line-height:1.45;}
.dg-chart{display:flex;flex-direction:column;}
.dg--flow .dg-chart{max-width:560px;margin:0 auto;}
.dg-node{min-width:0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);}
.dg-node--end{background:var(--surface);text-align:center;}
/* The brand blue marks the part Footer365 itself plays, never a state; a state is a dg-tag. */
.dg-node--f365{background:var(--info-bg);border-color:var(--brand-600);}
.dg-node--skip{border-style:dashed;background:transparent;}
.dg-node--skip .dg-title{color:var(--ink-3);}
.dg-title{display:block;font-size:14.5px;font-weight:700;color:var(--ink);}
.dg-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-3);}
.dg-items{display:grid;gap:5px;margin-top:9px;}
.dg-item{position:relative;padding-left:14px;font-size:13.5px;color:var(--ink-2);}
.dg-item::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ink-3);}
.dg-node--f365 .dg-item::before{background:var(--brand-600);}
.dg-item--key{font-weight:650;color:var(--ink);}
/* A header name is never broken at its hyphens; a header and its value go in two code elements so the line can
   break between them. */
.dg code{font-family:var(--font-mono);font-size:.9em;white-space:nowrap;}
.dg-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:650;vertical-align:1px;}
.dg-tag--ok{color:var(--ok);background:var(--ok-bg);}
.dg-tag--mute{color:var(--ink-2);background:var(--surface);border:1px solid var(--border-strong);}
.dg-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:2px 0 2px 26px;}
.dg-arrow{position:relative;flex:none;align-self:stretch;width:2px;margin:3px 0 11px;background:var(--border-strong);}
.dg-arrow::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border-style:solid;border-width:8px 6px 0 6px;border-color:var(--border-strong) transparent transparent transparent;}
.dg-link--skip .dg-arrow{background:none;border-left:2px dashed var(--border-strong);}
.dg-label{font-size:12.5px;color:var(--ink-3);}
.dg-caption{margin-top:16px;font-size:13.5px;color:var(--ink-3);text-align:center;}
@container (min-width:700px){
  .dg--loop .dg-chart{display:grid;grid-template-columns:minmax(0,.65fr) 112px minmax(0,1fr) 112px minmax(0,1.2fr);grid-template-areas:"a l1 b l2 c" "e l4 d l3 c";gap:26px 0;align-items:center;}
  .dg--loop.dg--tail .dg-chart{grid-template-areas:"a l1 b l2 c" "e l4 d l3 c" "l5 . . . ." "f . . . .";}
  .dg--loop .dg-l5{margin:-18px 0;}
  .dg--loop .dg-link--down{justify-content:center;padding-left:0;}
  .dg-a{grid-area:a;} .dg-b{grid-area:b;} .dg-c{grid-area:c;align-self:stretch;} .dg-d{grid-area:d;} .dg-e{grid-area:e;} .dg-f{grid-area:f;}
  .dg-l1{grid-area:l1;} .dg-l2{grid-area:l2;} .dg-l3{grid-area:l3;} .dg-l4{grid-area:l4;} .dg-l5{grid-area:l5;}
  .dg--loop .dg-link:not(.dg-link--down){flex-direction:column;justify-content:center;align-items:stretch;gap:6px;min-height:0;padding:0 8px;text-align:center;}
  .dg--loop .dg-link:not(.dg-link--down) .dg-arrow{width:auto;height:2px;margin:0 10px 0 2px;}
  .dg--loop .dg-link:not(.dg-link--down) .dg-arrow::after{left:auto;right:-8px;top:50%;bottom:auto;transform:translateY(-50%);border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--border-strong);}
  .dg--loop .dg-link--back:not(.dg-link--down) .dg-arrow{margin:0 2px 0 10px;}
  .dg--loop .dg-link--back:not(.dg-link--down) .dg-arrow::after{right:auto;left:-8px;border-width:6px 8px 6px 0;border-color:transparent var(--border-strong) transparent transparent;}
}
@media (max-width:640px){.dg{padding:16px;}}
.hc-table{overflow-x:auto;margin:16px 0;border:1px solid var(--border);border-radius:var(--radius-sm);}
/* The developer documentation at /developers: the help centre's layout, with each API call set out as a block. */
.dev-groups{display:grid;gap:10px;margin-top:14px;}
.dev-op{border-top:1px solid var(--border);padding-top:22px;margin-top:30px;scroll-margin-top:calc(var(--nav-h) + var(--hc-top-h) + 16px);}
.dev-op h2{margin-top:10px;}
.dev-op-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.hc-body .dev-path{font-size:15px;word-break:break-all;}
.dev-method{display:inline-block;min-width:58px;text-align:center;font-family:var(--font-mono);font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:6px;border:1px solid;}
.dev-method--get{background:var(--info-bg);color:var(--brand-600);border-color:color-mix(in srgb,var(--brand-600) 30%,transparent);}
.dev-method--post{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent);}
.dev-method--patch,.dev-method--other{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);}
.dev-method--delete{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent);}
.hc-body .dev-io span{display:block;}
.hc-body table{width:100%;border-collapse:collapse;font-size:14.5px;}
.hc-body th,.hc-body td{padding:10px 13px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;}
.hc-body th{background:var(--surface-2);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);}
.hc-body tr:last-child td{border-bottom:0;}
.hc-body td{color:var(--ink-2);}
/* A header or command name in a table stays on one line; the table scrolls in its own box instead. */
.hc-body td code{white-space:nowrap;word-break:normal;}
/* Markdown ":::tip", ":::note" and ":::warning" blocks. */
.hc-body .tip,.hc-body .note,.hc-body .warning{border-radius:var(--radius-sm);padding:12px 16px;margin:18px 0;font-size:15px;border:1px solid;}
.hc-body .tip{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,transparent);}
.hc-body .note{background:var(--info-bg);border-color:color-mix(in srgb,var(--brand-600) 28%,transparent);}
.hc-body .warning{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 32%,transparent);}
.hc-body .tip p,.hc-body .note p,.hc-body .warning p{margin:4px 0;color:var(--ink);font-size:15px;}
.hc-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px;}
.hc-pager a{border:1px solid var(--border);border-radius:var(--radius);padding:13px 16px;background:var(--surface);}
.hc-pager a:hover{text-decoration:none;border-color:var(--brand-600);}
.hc-pager a span{display:block;font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;}
.hc-pager a b{display:block;color:var(--ink-brand);font-size:14.5px;}
.hc-pager .next{grid-column:2;text-align:right;}
.hc-stuck{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:22px 24px;margin-top:30px;}
.hc-stuck h3{font-size:18px;}
.hc-stuck p{color:var(--ink-2);font-size:14.5px;margin-top:4px;max-width:60ch;}
.hc-stuck-acts{display:flex;gap:10px;flex-wrap:wrap;}
.hc-count{margin-bottom:10px;}
.hc-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.hc-results li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--elev-1);}
.hc-results li>a{font-weight:700;font-size:17px;color:var(--ink-brand);}
.hc-results .where{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3);margin-top:3px;}
.hc-results p{color:var(--ink-2);font-size:14.5px;margin-top:6px;}
.kind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);}
.kind-help{background:var(--info-bg);color:var(--brand-700);}
.kind-blog{background:var(--ok-bg);color:var(--ok);}
.hc-none h2{font-size:20px;}
.hc-none p{color:var(--ink-2);margin-top:8px;}
@media(max-width:600px){.hc-hero h1{font-size:34px;}.hc-article h1,.hc-sechead h1{font-size:29px;}}
/* The search panel opened from the navigation's search button. */
.srch-ov{position:fixed;inset:0;z-index:60;background:rgba(8,12,20,.55);display:none;padding:12vh 16px 16px;}
.srch-ov.open{display:block;}
.srch-ov .hc-search{margin:0 auto;}

/* ============================================================================
   Free tools (CP-027): /tools, the email signature generator and the email
   disclaimer generator. Settled in dev/mockups/free-tools.html.
   ========================================================================== */
.tool-hero{padding-top:40px;padding-bottom:6px;}
.tool-hero h1{font-size:40px;margin:8px 0 0;}
.tool-hero .lede{max-width:70ch;margin-top:10px;font-size:17px;}
.tool-body{padding-top:18px;}
.tool-resting{max-width:760px;}
.tool-resting h2{font-size:20px;}
.tool-resting p{color:var(--ink-2);margin-top:8px;}
.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media(max-width:760px){.tools-grid{grid-template-columns:1fr;}}
.tool-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--elev-1);color:var(--ink);}
.tool-card:hover{text-decoration:none;border-color:var(--brand-600);}
.tool-card .ic{width:42px;height:42px;border-radius:11px;background:var(--info-bg);color:var(--brand-600);display:grid;place-items:center;}
.tool-card h2{font-size:21px;}
.tool-card p{color:var(--ink-2);font-size:15px;}
.tool-card .go{margin-top:auto;font-weight:650;color:var(--brand-700);}

/* The tool itself: the form first, the preview beside it, and under it at phone width. */
.gen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start;}
@media(max-width:900px){.gen{grid-template-columns:1fr;}}
.gen-form{display:flex;flex-direction:column;gap:16px;min-width:0;}
.gen-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.gen-fields:empty{display:none;}
.gen-side{display:flex;flex-direction:column;gap:14px;min-width:0;}
.gen .lab{display:block;font-size:12.5px;font-weight:650;color:var(--ink-2);margin-bottom:6px;}
.gen .hint{font-size:12.5px;color:var(--ink-3);line-height:1.45;}
.gen .small{font-size:12.5px;color:var(--ink-3);line-height:1.5;}
.gen .small:empty{display:none;}
.gen .acts{display:flex;gap:8px;flex-wrap:wrap;}
.gen .btn{font-size:14px;padding:9px 15px;}
.gen .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.input.is-invalid{border-color:var(--bad);}
.layouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.layout-btn{font:inherit;font-size:13px;min-height:46px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;text-align:center;line-height:1.25;}
.layout-btn:hover{border-color:var(--brand-600);color:var(--ink);}
.layout-btn.on{border:2px solid var(--brand-600);color:var(--brand-700);font-weight:650;padding:7px 9px;}
.swatches{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-strong);cursor:pointer;padding:0;}
.swatch.on{outline:3px solid var(--brand-600);outline-offset:2px;}
.layout-btn:focus-visible,.swatch:focus-visible,.ptabs button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-600) 40%,transparent);outline-offset:2px;}
.gen .card-h{padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius) var(--radius) 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;}
.gen .card-h .t{font-weight:650;font-size:15px;color:var(--ink-brand);}
.gen .card-b{padding:16px;display:flex;flex-direction:column;gap:12px;}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;}
.ptabs button{font:inherit;font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;}
.ptabs button.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff;}
/* The preview frame stands for a message, which is drawn on white in light mode as mail is; the dark preview draws its
   own dark surface inside the frame. */
.sg-stage{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-2);display:flex;justify-content:center;}
.sg-frame{display:block;width:100%;height:300px;border:0;background:#fff;}
.sg-frame--phone{width:320px;max-width:100%;}
.howto{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:6px;font-size:14px;}
.howto[hidden],.gen .field[hidden]{display:none;}
.howto details{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);}
.howto summary{cursor:pointer;padding:9px 12px;font-weight:600;color:var(--ink-brand);}
.howto details p{padding:0 12px 11px;color:var(--ink-2);}
.cta-card{background:var(--info-bg);border-radius:var(--radius);padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.cta-card b{color:var(--ink-brand);}
.cta-card .small{color:var(--ink-2);margin-top:2px;}
.notices{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0;}
.notices .chk{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--ink);cursor:pointer;}
.notices .chk input{margin-top:3px;accent-color:var(--brand-600);flex:0 0 auto;}
.notices .chk small{display:block;color:var(--ink-3);font-size:12.5px;}
/* The disclaimer as it reads in a sent message: on white, as mail is, in either theme. */
.discout{font-family:Arial,Helvetica,sans-serif;font-size:12.5px;line-height:1.55;color:#55617a;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;min-height:90px;overflow-wrap:anywhere;}
.discout p{margin:0 0 10px;}
.discout p:last-child{margin-bottom:0;}
.discout .dg-none{color:#8a93a6;font-style:italic;}
.tool-guide .grid{margin-bottom:22px;}
.tool-faq{max-width:900px;margin:0 auto;}
@media(max-width:600px){
  .tool-hero h1{font-size:31px;}
  .gen .card-b{padding:12px;}
  .cta-card .btn{width:100%;justify-content:center;}
}