/* design/pages.html's own stylesheet, lines 6-266, unedited (BUILD_STATE 11.654): About, Security and the legal
pages. Loaded on those pages only, as home.css and prototype.css are on theirs. */
/* The supporting pages, 12 September 2026 (Gray: "rewrite all of the supporting pages in the footer ... using
vaile.com.au as template"; BUILD_STATE 11.471). One file, one route per page, the live site's page anatomy (a page
head, three-up cards with a 34px rule, a dark panel, a closing band) in the prototype's site tokens. Rewritten for
healthcare from the household pages: About, Work with us, FAQs, A month with Vaile, Ask Vaile (was Vaile
assistants), Security (from site/security, rewritten the same day), Vaile is free (was Plans & Pricing), and the
Privacy, Terms and Cookie drafts. Every claim traces to a recorded decision; the legal pages carry their TO CONFIRM
notes as comments. */
:root{
--ground:#F3F3F2; --surface:#FFFFFF; --sunk:#ECEEEF;
--ink:#131316; --ink-2:#45474C; --muted:#6A6C70; --graphite:#3A3D42;
--line:#E2E2E1; --line-2:#EBEBEA;
--pop:#00B4D8; --pop-hover:#0098B8; --pop-ink:#FFFFFF;
--panel:#16181B; --panel-fg:#F2F2F1; --panel-muted:#A6A9AF; --panel-line:#2C2F34;
--pos:#1E7A4F; --attn:#C2410C;
--c-cred:#A8B6FF; --c-study:#CDB5FF; --c-insurance:#FFB4A2; --c-money:#FFB1D0; --c-work:#8ED8E6; --c-move:#FFC08A;
--c-home:#F4DB7D; --c-vehicles:#A4E2B6; --c-tax:#A6CCFF; --c-health:#93DFCF; --c-practice:#EAB2F0; --c-wealth:#D3E98F; --c-pack:#93DFCF; --c-papers:#E6CFA6; --c-unions:#A8B6FF; --c-partners:#F4DB7D;
--tile-mix:100%; --glyph-mix:42%; --row-mix:34%;
--shadow:0 1px 1px rgba(16,18,20,.05);
--lift:0 1px 2px rgba(16,18,20,.06), 0 18px 40px -22px rgba(16,18,20,.28);
--f-serif:'Newsreader','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
--f-sans:'Hanken Grotesk','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
--maxw:1160px; --pad:clamp(1.1rem,4vw,3rem);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ground:#0F1113; --surface:#181B1F; --sunk:#0B0C0E;
--ink:#F2F2F1; --ink-2:#C4C6CA; --muted:#8E9197; --graphite:#C4C6CA;
--line:#2A2D31; --line-2:#212428;
--pop:#22C3E3; --pop-hover:#4FD2EC; --pop-ink:#04161B;
--panel:#0B0C0E; --panel-fg:#F2F2F1; --panel-muted:#8E9197; --panel-line:#26292E;
--pos:#5CC98E; --attn:#F08A5D; --tile-mix:26%; --glyph-mix:100%; --row-mix:13%;
--shadow:0 1px 1px rgba(0,0,0,.35);
--lift:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
}
}
:root[data-theme="dark"]{
--ground:#0F1113; --surface:#181B1F; --sunk:#0B0C0E;
--ink:#F2F2F1; --ink-2:#C4C6CA; --muted:#8E9197; --graphite:#C4C6CA;
--line:#2A2D31; --line-2:#212428;
--pop:#22C3E3; --pop-hover:#4FD2EC; --pop-ink:#04161B;
--panel:#0B0C0E; --panel-fg:#F2F2F1; --panel-muted:#8E9197; --panel-line:#26292E;
--pos:#5CC98E; --attn:#F08A5D; --tile-mix:26%; --glyph-mix:100%; --row-mix:13%;
--shadow:0 1px 1px rgba(0,0,0,.35);
--lift:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;}
h1,h2,h3,p{margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--pop); outline-offset:2px;}
.in{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.review{background:var(--sunk); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted);}
.review .in{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding-top:8px; padding-bottom:8px;}
.review b{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); font-weight:600;}
/* Site header and menu: the same markup and rules as the section pages. */
.site{border-bottom:1px solid var(--line); background:var(--ground); position:relative; z-index:20;}
.site .in{display:flex; align-items:center; gap:28px; height:64px;}
.wordmark{display:inline-flex; align-items:center; font-size:1.3rem; line-height:1; color:var(--ink); text-decoration:none; flex:none;}
.wordmark .wm{height:.831em; width:auto; display:block; stroke:currentColor; stroke-width:14; paint-order:stroke fill;}
.site .sign{margin-left:auto; font-size:14.5px; color:var(--ink-2); text-decoration:none; flex:none;}
.topnav{display:flex; align-items:center; gap:4px; font-size:14.5px; min-width:0;}
.topnav > a, .topnav > .tg{padding:8px 12px; color:var(--ink-2); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; background:none; border:0; font:inherit; cursor:pointer;}
.topnav > a:hover, .topnav > .tg:hover{color:var(--ink);}
.topnav .chev{width:13px; height:13px; transition:transform .15s;}
.topnav .tg[aria-expanded="true"] .chev{transform:rotate(180deg);}
.mega{position:absolute; left:0; right:0; top:100%; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--lift);}
.mega .in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; height:auto; align-items:start; padding-top:22px; padding-bottom:26px;}
.mega h3{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.mega ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:2px;}
.mega a{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:8px; text-decoration:none; color:var(--ink);}
.mega a:hover{background:var(--sunk);}
.mega a b{display:block; font-size:14.5px; font-weight:600; line-height:1.3;}
.mega a small{display:block; font-size:12.5px; color:var(--muted); line-height:1.35;}
/* The whole bar sticks: the header (logo and main navigation) on every page, and a page's sub-menu just under it
(Gray, 13 Sep 2026; BUILD_STATE 11.512). header.site outranks each page's own .site rule. --hh is the header's
height, measured by the script at the foot of the page. */
header.site{position:sticky; top:0; z-index:30; background:var(--ground);}
@media (min-width:761px){ body .subnav{top:calc(var(--hh, 64px) - 1px);} /* a pixel under the header, so no sliver shows (11.517) */ }
/* The heading menus (Career, Money, Insurance, Relocation): the old panel's look, each entry on its section's colour
tile (Gray, 14 Sep 2026: "the mega menu looked great, but the new drop downs are bland and monochrome"; 11.521). */
.relm .in{display:block;}
.relm ul{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 24px;}
/* The sections are the top headings (Gray, 14 Sep 2026: "Career / Finances / Cover / Family / Vehicle / Relocation",
then "yes, build it"; BUILD_STATE 11.519). Below 1001px the headings no longer fit beside Sign in, so the
all-sections button is the one menu there: labelled on small tablets, an icon on phones. */
@media (min-width:1001px){ .topnav > .tg:not(.tgr){display:none;} }
@media (min-width:561px) and (max-width:1000px){ .topnav > a, .topnav > .tgr{display:none;} }
@media (max-width:900px){ .relm ul{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .topnav > .tgr{display:none;} }
.mico{width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; flex:none;
background:color-mix(in srgb, var(--c) var(--tile-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
.mico svg{width:17px; height:17px;}
.topnav .tgm{display:none; width:22px; height:22px;}
@media (prefers-reduced-motion: reduce){ .topnav .chev{transition:none;} }
@media (max-width:900px){ .mega .in{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .topnav > a{display:none;} .mega .in{grid-template-columns:minmax(0,1fr);} .topnav .tgl, .topnav > .tg .chev{display:none;} .topnav .tgm{display:block;} .topnav > .tg{padding:8px;} .site .sign{display:none;} .wordmark{font-size:1.12rem;} .site .in{gap:14px;} }
/* Page anatomy, after vaile.com.au: a page head, sections with three-up cards, a dark panel, a closing band. */
.pg[hidden]{display:none;}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--graphite);}
.phead{padding:clamp(48px,7vw,84px) 0 clamp(30px,4vw,48px);}
.phead h1{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(38px,5.2vw,62px); line-height:1.03; letter-spacing:-.022em; margin-top:14px; max-width:17ch; text-wrap:balance;}
.phead .lead{font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--ink-2); margin-top:20px; max-width:58ch;}
.sec{padding:clamp(40px,5.5vw,64px) 0; border-top:1px solid var(--line);}
.sec h2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(28px,3.3vw,42px); line-height:1.07; letter-spacing:-.016em; margin-top:10px; max-width:20ch; text-wrap:balance;}
.sec .body{font-size:17px; line-height:1.62; color:var(--ink-2); margin-top:16px; max-width:62ch;}
.sec .body + .body{margin-top:12px;}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3.5vw,40px); margin-top:34px;}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{position:relative; border-top:1px solid var(--line); padding-top:18px;}
.card::before{content:""; position:absolute; top:-1px; left:0; width:34px; height:1px; background:var(--ink);}
.card .k{font-family:var(--f-serif); font-weight:500; font-size:20px; line-height:1.22; letter-spacing:-.005em;}
.card p{font-size:15px; line-height:1.58; color:var(--muted); margin-top:8px;}
.dark{background:var(--panel); color:var(--panel-fg); border-top:0;}
.dark .eyebrow{color:var(--panel-muted);}
/* Body copy on dark at 78% of the panel ink, as vaile.com.au sets it; the muted token was too dim to read at length. */
.dark .body, .dark .card p, .dark .prose p{color:color-mix(in srgb, var(--panel-fg) 78%, transparent);}
.dark .card{border-top-color:var(--panel-line);}
.dark .card::before{background:var(--panel-fg);}
.dark .prose b{color:var(--panel-fg);}
.prose{margin-top:24px; display:grid; gap:14px; max-width:70ch;}
.prose p{font-size:16.5px; line-height:1.65; color:var(--ink-2);}
.prose b{color:var(--ink); font-weight:600;}
.band{padding:clamp(44px,6vw,72px) 0; border-top:1px solid var(--line); background:var(--surface);}
.band .in{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px 32px;}
.band h2{font-family:var(--f-serif); font-weight:420; font-size:clamp(28px,3.3vw,42px); line-height:1.07; letter-spacing:-.016em; max-width:20ch;}
.band p{font-size:16px; color:var(--ink-2); margin-top:10px; max-width:52ch;}
.cta{display:inline-block; background:var(--pop); color:var(--pop-ink); font-weight:600; font-size:15.5px; padding:13px 20px; text-decoration:none; white-space:nowrap;}
.cta:hover{background:var(--pop-hover);}
.hico{width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; flex:none;
background:color-mix(in srgb, var(--c) var(--tile-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
.hico svg{width:16px; height:16px;}
/* FAQs: grouped, each question opens in place. */
.faq{display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(20px,4vw,56px); padding:clamp(34px,4.5vw,52px) 0; border-top:1px solid var(--line);}
.faq h2{font-family:var(--f-sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--graphite); margin:4px 0 0;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-size:17.5px; font-weight:600; line-height:1.35;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-weight:400; font-size:22px; line-height:1; color:var(--muted);}
.faq details[open] summary::after{content:"\2212";}
.faq details p{font-size:16px; line-height:1.62; color:var(--ink-2); padding:0 0 18px; max-width:66ch;}
.faq details p + p{padding-top:0; margin-top:-6px;}
/* A month with Vaile: one column per section, a status on every line. */
.month{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:34px;}
.mcol{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:16px 18px 6px;}
.mcol h3{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--line-2);}
.mcol li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:11px 0; border-bottom:1px solid var(--line-2);}
.mcol li:last-child{border-bottom:0;}
.mcol li b{font-size:14.5px; font-weight:600;}
/* :not(.st), or this rule (0,2,2) outranks .st and pulls the status into the text column. */
.mcol li > span:not(.st){grid-column:1; font-size:13.5px; color:var(--muted); line-height:1.45;}
.st{grid-column:2; grid-row:1 / span 2; align-self:start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap;}
.st.caught{color:var(--attn); border-color:currentColor;}
.st.open{color:var(--ink); border-color:var(--ink);}
.st.ok{color:var(--pos); border-color:currentColor;}
.note-ex{font-size:13px; color:var(--muted); margin-top:14px;}
/* Ask Vaile: questions and quoted answers, as on the homepage phone. */
.asks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px;}
.qa{display:flex; flex-direction:column; gap:10px;}
.qa .who{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted);}
.qa .q{align-self:flex-end; background:var(--ink); color:var(--ground); padding:10px 13px; font-size:15px; max-width:92%;}
.qa .a{background:var(--surface); border:1px solid var(--line); padding:13px 14px; font-size:15px; line-height:1.52;}
.qa .a q{quotes:"\201C" "\201D";}
.qa .src{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.qa .src span{font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--sunk); padding:4px 8px;}
/* Vaile is free: the included list. */
.incl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:28px;}
.incl li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; padding:16px 0; border-top:1px solid var(--line);}
/* Scoped to the text column: a bare ".incl li span" also caught the icon tile and pinned its glyph top left. */
.incl li > div b{display:block; font-size:16px; font-weight:600;}
.incl li > div span{display:block; font-size:14.5px; color:var(--muted); margin-top:3px; line-height:1.5;}
/* Security's panel, after vaile.com.au's: hairlines on a 28px module behind the points, snapped to whole
square cells by fitGrid() below (the live site's fitPanelGrid). The points sit two up with block lead-ins,
as the live panel sets them, instead of one long column with the lead-in run into the sentence. */
.gpanel{--pad-y:clamp(28px,5.5vw,64px); --pad-x:clamp(22px,5.5vw,64px); position:relative; overflow:hidden; isolation:isolate;
background:linear-gradient(115deg,#1D2024 0%,#16181B 58%,#0F1114 100%); border:1px solid rgba(242,242,241,.10); color:#F2F2F1;
padding:var(--pad-y) var(--pad-x) calc(var(--pad-y) + var(--grid-pad, 0px));}
.gpanel::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:linear-gradient(rgba(242,242,241,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(242,242,241,.13) 1px, transparent 1px);
background-size:var(--grid-cell,28px) var(--grid-cell,28px);}
.gpanel > *{position:relative; z-index:1;}
.pts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 56px; margin-top:38px;}
.pt b{display:block; font-size:18px; font-weight:600; line-height:1.3; color:#FFFFFF;}
.pt p{font-size:16px; line-height:1.62; color:rgba(242,242,241,.80); margin-top:8px; max-width:52ch;}
/* The legal drafts. */
.legalnav{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.legalnav a{font-size:13.5px; padding:6px 11px; border:1px solid var(--line); text-decoration:none; color:var(--ink-2); background:var(--surface);}
.legalnav a[aria-current="page"]{border-color:var(--ink); color:var(--ink); font-weight:600;}
.doc{max-width:74ch; padding-bottom:clamp(40px,6vw,72px);}
.doc .updated{font-size:13px; color:var(--muted); margin-bottom:8px;}
.doc h2{font-size:19px; font-weight:600; line-height:1.3; margin:32px 0 8px;}
.doc p, .doc li{font-size:15.5px; line-height:1.66; color:var(--ink-2);}
.doc p + p{margin-top:10px;}
.doc ul{list-style:disc; padding-left:22px; margin:8px 0; display:grid; gap:6px;}
.doc b{color:var(--ink);}
@media (max-width:900px){
.cards, .cards.four, .asks, .month{grid-template-columns:repeat(2,minmax(0,1fr));}
.faq{grid-template-columns:minmax(0,1fr); gap:14px;}
}
@media (max-width:600px){
.cards, .cards.four, .asks, .month, .incl, .pts{grid-template-columns:minmax(0,1fr);}
.pts{gap:28px;}
.phead h1{font-size:clamp(32px,9.6vw,40px);}
.sec .body{font-size:15.5px;}
.faq summary{font-size:16px;}
}
/* Examples look like the product (Gray, 13 Sep 2026: "make the 'illustrative' stuff like the itineraries and the mock
examples look different to the core information"; BUILD_STATE 11.485). The same frame as every page: a dark bar
marked EXAMPLE, the portal's Inter, a cool grey ground and rounded corners. Core information stays unboxed. */
/* Revised 13 Sep 2026 (Gray: "Why have you chosen dark bar and grey background? It doesn't seem to really fit with
the design language"; BUILD_STATE 11.486): an example is a figure, built only from the site's own materials: the
site's sunk grey, square corners, no border, a caption in the eyebrow style, the portal's Inter inside. This
supersedes the dark bar, cool grey and rounded corners described above. */
:root{ --ex-bg:var(--sunk, #ECEEEF); --ex-line:var(--line, #E2E2E1); --ex-ink:var(--ink, #131316); --ex-muted:var(--muted, #6A6C70); }
.ex{background:var(--ex-bg); border:0; border-radius:0; overflow:hidden; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ex-ink); margin-top:24px;}
.ex-bar{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:14px 18px 4px; background:transparent; color:var(--ex-muted); font-family:var(--f-sans, 'Hanken Grotesk', system-ui, sans-serif); font-size:13px; line-height:1.45;}
.ex-tag{font-family:var(--f-sans, 'Hanken Grotesk', system-ui, sans-serif); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--graphite, #3A3D42); background:none; padding:0; border-radius:0;}
.ex-body{padding:16px 18px;}
.ex-note{font-size:12.5px; color:var(--ex-muted); padding:0 18px 14px; line-height:1.5;}
.ex .month, .ex .asks{margin-top:0;}
.ex .mcol{border-color:var(--ex-line); box-shadow:none;}
.ex .qa .a{border-color:var(--ex-line);}
/* The free page's list: icons only on section headings, so the rows lose theirs. */
.incl .hico{display:none;}
.incl li{grid-template-columns:minmax(0,1fr);}
/* site footer:start (footer_sync.py; after vaile.com.au's footer) */
footer.sitefoot{background:var(--panel); color:var(--panel-fg); border-top:0; padding:0; font-size:14px;}
footer.sitefoot .in{display:block; padding-top:clamp(40px,6vw,64px); padding-bottom:28px;}
.sitefoot .foot-top{margin-bottom:clamp(28px,4vw,44px);}
.sitefoot .wordmark{display:inline-flex; color:var(--panel-fg); font-size:1.24rem; line-height:1; text-decoration:none;}
.sitefoot .wordmark .wm{height:.831em; width:auto; display:block; stroke:currentColor; stroke-width:14; paint-order:stroke fill;}
.sitefoot .foot-cols{display:grid; grid-template-columns:repeat(4,max-content); justify-content:space-between; gap:32px;}
.sitefoot .foot-h{margin:0 0 14px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--panel-muted);}
.sitefoot .foot-cols ul{margin:0; padding:0; list-style:none; display:grid; gap:10px;}
.sitefoot .foot-cols a{color:color-mix(in srgb, var(--panel-fg) 74%, transparent); text-decoration:none; font-size:14.5px;}
.sitefoot .foot-cols a:hover, .sitefoot .foot-cols a[aria-current]{color:var(--panel-fg);}
.sitefoot address{margin:0 0 10px; font-style:normal; font-size:14.5px; line-height:1.7; color:color-mix(in srgb, var(--panel-fg) 74%, transparent);}
.sitefoot .foot-mail{color:var(--panel-fg); font-size:14.5px; text-decoration:none; border-bottom:1px solid var(--panel-line);}
/* One rule under the columns, then the page's disclaimer as full-width fine print, then the copyright and ABN as
the last line of the page (Gray, 12 Sep: the ruled band around the disclaimer was "Weird", and "The copyright and
ABN should be at the bottom!"). */
.sitefoot .foot-note{margin-top:clamp(28px,4vw,40px); padding-top:20px; border-top:1px solid var(--panel-line); display:grid; gap:4px;}
.sitefoot .foot-base{margin-top:14px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 28px;}
.sitefoot .foot-note p{margin:0; font-size:12.5px; line-height:1.55; color:var(--panel-muted); max-width:none; text-wrap:pretty;}
.sitefoot .foot-base p{margin:0; font-size:12.5px; color:var(--panel-muted); max-width:none;}
.sitefoot .foot-claims{display:flex; flex-wrap:wrap; gap:6px 24px;}
@media (max-width:760px){ .sitefoot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px;} .sitefoot .foot-base{flex-direction:column;} }
/* site footer:end */