/* MatStone — site styles. INVERTED theme: white ground, near-black ink. Nav/footer stay fixed-dark (banner). One accent: burnt amber, signal only. */
:root{--brand-black:#0a0a0a;--brand-white:#ffffff;--brand-offwhite:#f4f3ef;--brand-graphite:#55534e;--white-72:rgba(255,255,255,0.72);--white-22:rgba(255,255,255,0.22);--black-72:rgba(10,10,10,0.72);--black-16:rgba(10,10,10,0.16);
/* DEFAULT THEME — ink is near-black on white paper (inverted from the old dark default) */
--ink:var(--brand-black);--paper:var(--brand-white);--stone:var(--brand-offwhite);--graphite:var(--brand-graphite);--muted-inverse:var(--white-72);--rule:var(--black-16);--rule-inverse:var(--white-22);
/* Accent palette — signal only, never a large surface. Amber = tentative/pending/action required. Live = genuinely live/confirmed/winning. Blue = informational/in-progress, used where live-teal would clash. */
--accent:var(--brand-black);--accent-hover:#2b2a26;--accent-amber:#B5541F;--accent-teal:#B5541F;--accent-green:#B5541F;--accent-warm:var(--brand-offwhite);--accent-live:#1E7F6B;--accent-blue:#2563A6;
--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--space-8:96px;--space-9:176px;--radius-0:0;--hairline:1px;--control:1px;--focus:3px;--font-display:Archivo, "Helvetica Neue", Arial, sans-serif;--font-text:Archivo, "Helvetica Neue", Arial, sans-serif;--font-mark:"Arial Black", Arial, sans-serif;color-scheme:light}

/* MatStone — shared component styles. One family: Archivo. Expanded (125) caps for display and labels; normal width (100) for reading. */
.ms, .ms * { box-sizing: border-box; }
.ms { --mk-bg: var(--ink); --mk-fg: var(--paper); font-family: var(--font-text); font-size: 18px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
:where(.ms) :where(h1, h2, h3, p) { margin: 0; }
.ms a:not(.ms-btn) { color: inherit; }

/* Display type */
/* Display: Archivo Expanded — wide, heavy, all caps, neutral tracking */
.ms-d, .ms-wide { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 1; }
.ms-d.xl { font-size: 80px; line-height: .98; }
.ms-d.l { font-size: 52px; }
.ms-d.m { font-size: 36px; }
.ms-d.s { font-size: 18px; line-height: 1.15; letter-spacing: .01em; }
.ms-num { font-family: var(--font-display); font-stretch: 125%; font-weight: 300; font-size: 104px; line-height: .9; letter-spacing: -0.02em; }
.ms-lead { font-size: 22px; line-height: 1.45; }
.ms-small { font-size: 15px; line-height: 1.5; }
.ms-label { font-family: var(--font-display); font-stretch: 125%; font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ms-muted { color: var(--graphite); }
.ms-inv { background: var(--ink); color: var(--paper); --mk-bg: var(--paper); --mk-fg: var(--ink); }
/* Fixed grounds regardless of theme: night (nav, footer, card front) and day (card back, email) */
.ms-night, .ms-nav { --ink: var(--brand-white); --paper: var(--brand-black); --stone: var(--brand-black); --graphite: var(--white-72); --muted-inverse: var(--black-72); --rule: var(--white-22); --rule-inverse: var(--black-16); --mk-bg: var(--ink); --mk-fg: var(--paper); background: var(--paper); color: var(--ink); }
.ms-day { --ink: var(--brand-black); --paper: var(--brand-white); --stone: var(--brand-offwhite); --graphite: var(--brand-graphite); --muted-inverse: var(--white-72); --rule: var(--black-16); --rule-inverse: var(--white-22); --mk-bg: var(--ink); --mk-fg: var(--paper); background: var(--paper); color: var(--ink); }
/* The mark, drawn from tokens so it inverts with its ground (same geometry as assets/Logos) */
.ms-mark .bg { fill: var(--mk-bg); } .ms-mark .fg { fill: var(--mk-fg); }
.ms-inv .ms-muted { color: var(--muted-inverse); }
.ms-stone { background: var(--stone); }

/* Logo lockup: the mark is the supplied SVG, never redrawn */
.ms-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ms-logo svg, .ms-logo img { display: block; flex: none; }
.ms-logo .wm { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; font-size: 26px; }

/* Buttons: square, solid, arrow icon */
.ms-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; border: 1px solid var(--mk-bg); border-radius: var(--radius-0); background: var(--mk-bg); color: var(--mk-fg); font-family: var(--font-text); font-weight: 500; font-size: 15px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.ms-btn:hover { background: var(--graphite); border-color: var(--graphite); }
.ms-btn svg { width: 16px; height: 16px; flex: none; }
.ms-btn.inverse { background: var(--mk-fg); color: var(--mk-bg); border-color: var(--mk-fg); }
.ms-btn.outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.ms-inv .ms-btn.outline { color: var(--paper); border-color: var(--paper); }
.ms-btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.ms-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ms-inv .ms-btn:focus-visible { outline-color: var(--paper); }
.ms-link { font-weight: 500; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Rules and tags */
.ms-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.ms-inv .ms-rule { border-top-color: var(--rule-inverse); }
.ms-tag { display: inline-block; font-family: var(--font-display); font-stretch: 125%; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 6px 9px; border: 1px solid var(--ink); white-space: nowrap; }
.ms-tag.solid { background: var(--ink); color: var(--paper); }
.ms-inv .ms-tag { border-color: var(--paper); }

/* Photo placeholder: graphite field, paper label. Replace with real B&W trade photography. */
.ms-photo { position: relative; background: var(--brand-graphite); color: var(--brand-white); overflow: hidden; }
.ms-photo::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ms-photo .cap { position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 1; font-size: 12px; line-height: 1.45; font-weight: 400; letter-spacing: .01em; max-width: 360px; }
.ms-photo .cap b { display: block; font-weight: 500; opacity: .72; margin-bottom: 4px; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; }
/* Real-photo hero variant: a genuine site photo as the background, with a bottom gradient for legibility and the SMS-demo card floating on top of it rather than filling the frame. */
.hero-shot::before { background: linear-gradient(to top, rgba(10,10,10,.82) 0%, rgba(10,10,10,.1) 55%, rgba(10,10,10,0) 100%); }
.hero-shot .hero-fig-float { position: absolute; left: 20px; bottom: 20px; width: min(300px, calc(100% - 40px)); height: auto; min-height: 0; background: rgba(10,10,10,.92); backdrop-filter: blur(2px); box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 2; }
@media (max-width: 960px) { .hero-shot .hero-fig-float { width: calc(100% - 40px); } }

/* Micro-interactions: a count-up on a real static figure as it scrolls into view, and a
   small pulse when a genuine filtered-result count changes. Never used on fabricated data. */
@keyframes count-pulse-kf { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.count-pulse { display: inline-block; animation: count-pulse-kf .32s ease-out; }

/* Success micro-state: a drawn-on checkmark for confirmation pages. */
.ms-check-circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: ms-check-circle-kf .5s ease-out forwards; }
.ms-check-tick { stroke-dasharray: 36; stroke-dashoffset: 36; animation: ms-check-tick-kf .35s ease-out .45s forwards; }
@keyframes ms-check-circle-kf { to { stroke-dashoffset: 0; } }
@keyframes ms-check-tick-kf { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-check-circle, .ms-check-tick { animation: none; stroke-dashoffset: 0; } }

/* Nav */
.ms-nav { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); }
.ms-nav .links { display: flex; gap: 40px; font-size: 16px; font-weight: 500; }
.ms-nav .links a { text-decoration: none; }

/* Form */
.ms-field { display: flex; flex-direction: column; gap: 8px; }
.ms-field label { font-family: var(--font-display); font-stretch: 125%; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); }
.ms-field input, .ms-field select { height: 56px; border: 1px solid var(--ink); border-radius: var(--radius-0); background: var(--paper); padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); appearance: none; -webkit-appearance: none; width: 100%; }
.ms-field input::placeholder { color: var(--graphite); }
.ms-select { position: relative; }
.ms-select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

/* Artboard frame used in previews */
.ms-board-title { font-family: var(--font-text); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--graphite); margin: 0 0 12px; }

/* Underline fields (refined form variant) */
.ms-field.line input, .ms-field.line select { height: 52px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 0; }
.ms-select.line::after { right: 4px; }
.ms-field input:focus-visible, .ms-field select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }


.pg{max-width:1440px;margin:0 auto}
.ms-nav{height:80px;padding:0 64px}
.ms-nav .links{gap:44px;font-size:15px;font-weight:400}
.w{padding-left:64px;padding-right:64px}
.sec{padding-top:40px;padding-bottom:96px}
.sec>.inner{border-top:1px solid var(--rule);padding-top:40px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px}
.ms-inv .sec>.inner,.sec.ms-inv>.inner{border-top-color:var(--rule-inverse)}
.idx{grid-column:1/4;display:flex;gap:16px;align-items:baseline}
.main{grid-column:4/13}
.hero{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;padding:96px 64px 0}
.hero .txt{grid-column:1/8;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:8px}
.hero .ms-photo{grid-column:8/13;height:680px}
.hero .ms-lead{max-width:470px;color:var(--graphite);font-size:20px;margin-top:40px}
.cta{display:flex;gap:28px;align-items:center;margin-top:48px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin:96px 64px 0;border-top:1px solid var(--ink)}
.facts div{padding:24px 0 0}
.facts p{font-size:15px;color:var(--graphite);margin-top:8px}
.facts strong{font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:17px}
.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin-top:64px;max-width:860px}
.cols2 p{font-size:17px;color:var(--graphite)}
.close{margin-top:64px;font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin-top:96px}
.step{border-top:1px solid var(--ink);padding-top:32px}
.step .ms-num{margin-bottom:56px}
.step p{font-size:17px;color:var(--graphite);margin-top:12px;max-width:340px}
.who{display:grid;grid-template-columns:repeat(9,1fr);column-gap:32px;margin-top:80px}
.who .ms-photo{grid-column:1/5;height:560px}
.who .lst{grid-column:5/10;display:flex;flex-direction:column;justify-content:space-between}
.tr{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.tr:first-child{border-top:1px solid var(--ink)}
.tr span:first-child{font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:34px;line-height:1}
.who .note{font-size:17px;color:var(--graphite);max-width:520px}
.incl{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:80px}
.incl .hd{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.it{padding:24px 0;border-bottom:1px solid var(--rule)}
.it h3{font-family:var(--font-text);font-weight:600;font-size:20px;letter-spacing:-.02em}
.it p{font-size:16px;color:var(--graphite);margin-top:4px}
.it.soon{display:flex;justify-content:space-between;align-items:center}
.it.soon h3{color:var(--graphite);font-weight:500}
.it.soon .ms-tag{border-color:var(--graphite);color:var(--graphite)}
.human{display:grid;grid-template-columns:1fr 1fr}
.human .ms-photo{height:860px}
.human .t{padding:120px 64px 96px 96px;display:flex;flex-direction:column;justify-content:space-between}
.human .q{font-family:var(--font-text);font-weight:500;font-size:28px;letter-spacing:-.015em;line-height:1.3;margin-top:56px;max-width:520px}
.human .b{font-size:17px;margin-top:28px;max-width:500px}
.sig{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule-inverse);padding-top:20px}
.prices{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin-top:80px}
.pr{border-top:1px solid var(--ink);padding-top:24px}
.pr .fig{font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:60px;letter-spacing:0;line-height:1;margin:40px 0 16px;white-space:nowrap}
.pr .fig small{font-size:22px;letter-spacing:-.01em;color:var(--graphite);font-weight:400}
.pr p{font-size:17px;color:var(--graphite)}
.guar{display:grid;grid-template-columns:repeat(9,1fr);column-gap:32px;margin-top:96px;padding-top:32px;border-top:1px solid var(--rule)}
.guar .ms-label{grid-column:1/3}
.guar p{grid-column:3/10;font-family:var(--font-text);font-weight:500;font-size:28px;letter-spacing:-.015em;line-height:1.3}
.contact{display:grid;grid-template-columns:repeat(9,1fr);column-gap:32px}
.contact .l{grid-column:1/5}
.contact form{grid-column:6/10;display:flex;flex-direction:column;gap:32px;padding-top:8px}
.dir{margin-top:56px;font-size:17px}
.dir a{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule)}
.dir a:first-child{border-top:1px solid var(--rule)}
footer{padding:96px 64px 40px}
.f1{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;padding-bottom:72px}
.f1>div:first-child{grid-column:1/7}
.f1 .c{grid-column:span 2;display:flex;flex-direction:column;gap:10px;font-size:15px}
.f1 .c a{text-decoration:none}
.f1 .c .ms-label{margin-bottom:10px}
.big{white-space:nowrap;font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:84px;letter-spacing:0;line-height:1;margin:0 0 48px -4px}
.f2{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--rule-inverse);font-size:13px}


html{scroll-behavior:smooth}
body{margin:0;background:var(--paper)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ms-nav .links a[aria-current]{border-bottom:1px solid currentColor;padding-bottom:2px}
.mnav{display:none}
.phero{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;padding:96px 64px 0}
.phero .txt{grid-column:1/8;display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-width:0}
.phero .ms-photo{grid-column:8/13;height:620px}
.phero.np .txt{grid-column:1/12}
.phero .ms-lead{max-width:540px;color:var(--graphite);font-size:20px;margin-top:36px}
.crumb{display:flex;gap:16px}
.crumb a{text-decoration:none}
.prose{max-width:640px;font-size:17px;color:var(--graphite);line-height:1.65}
.prose p+p{margin-top:18px}
.prose strong{color:var(--ink);font-weight:600}
.h2s{margin-bottom:32px}
.tlink{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.tlist .tlink:first-child{border-top:1px solid var(--ink)}
.tlink .nm{font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.2vw,44px);line-height:1}
.tlink .rt{display:flex;gap:24px;align-items:center;color:var(--graphite);font-size:15px}
.tlink svg{width:22px;height:22px;flex:none}
.tlink:hover .nm{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:32px 64px}
.band .ms-wide{font-size:clamp(15px,1.6vw,20px)}
.faq{border-top:1px solid var(--ink);margin-top:64px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:.7}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 24px;max-width:640px;font-size:17px;color:var(--graphite)}
.facts2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px;margin-top:56px;max-width:860px}
.facts2 div{padding:18px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;font-size:16px}
.facts2 div span:first-child{color:var(--graphite)}
.legal{border:1px solid var(--rule);padding:32px;max-width:760px;margin-top:48px}
.legal h3{margin-top:0}
.ph-row{display:flex;flex-direction:column;gap:12px;margin-top:32px;max-width:760px}
.ph-row div{height:14px;background:var(--rule)}
.social{display:flex;gap:20px;flex-wrap:wrap}
.formnote{font-size:14px;color:var(--graphite);min-height:1.4em}
.hp{position:absolute;left:-9999px}
.f1 .c{grid-column:span 2}
.f1>div:first-child{grid-column:1/5}


@media (max-width: 1200px) and (min-width: 961px){ .ms-nav .links{gap:24px} .w,.hero,.phero,footer,.ms-nav,.band{padding-left:40px;padding-right:40px} .facts{margin-left:40px;margin-right:40px} .human .t{padding:96px 40px} }
@media (max-width: 960px){
 .ms-nav{height:64px;padding:0 24px}
 .ms-nav .links,.ms-nav>.ms-btn{display:none}
 .mnav{display:block;position:relative}
 .mnav summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px}
 .mnav summary::-webkit-details-marker{display:none}
 .mnav summary i{display:block;width:22px;height:1.5px;background:var(--ink)}
 .mnav nav{position:absolute;right:-24px;top:54px;width:100vw;max-width:390px;background:var(--paper);border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);display:flex;flex-direction:column;padding:8px 24px 24px;z-index:20}
 .mnav nav a{padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-size:17px}
 .mnav nav .ms-btn{margin-top:20px;justify-content:space-between}
 .w,.phero,.band{padding-left:24px;padding-right:24px}
 .sec{padding-bottom:64px;padding-top:56px!important}
 .sec.ms-stone{padding-bottom:48px!important}
 .sec>.inner{display:block}
 .idx{margin-bottom:28px}
 .hero,.phero{display:block;padding:56px 24px 0}
 .hero .txt>div:first-child{margin-bottom:32px}
 .hero .ms-photo,.phero .ms-photo{height:440px;margin:48px -24px 0}
 .ms-d.xl{font-size:clamp(34px,10vw,64px)}
 .ms-d.l{font-size:clamp(26px,7vw,44px)}
 .hero .ms-lead,.phero .ms-lead{font-size:18px;margin-top:24px}
 .cta{flex-wrap:wrap;gap:20px}
 .facts{grid-template-columns:1fr;margin:40px 24px 0}
 .facts div{padding:16px 0;border-bottom:1px solid var(--rule)}
 .cols2,.facts2{grid-template-columns:1fr;row-gap:0;margin-top:28px}
 .close{margin-top:36px;font-size:17px}
 .steps{grid-template-columns:1fr;margin-top:48px}
 .step{padding-bottom:36px}
 .step .ms-num{font-size:72px;margin-bottom:24px}
 .who{display:block;margin-top:40px}
 .who .ms-photo{height:380px;margin-bottom:32px}
 .tr span:first-child{font-size:22px}
 .incl{grid-template-columns:1fr;row-gap:48px;margin-top:40px}
 .human{grid-template-columns:1fr}
 .human .ms-photo{height:440px}
 .human .t{padding:56px 24px 72px}
 .human .q{font-size:20px}
 .human .sig{margin-top:40px}
 .prices{grid-template-columns:1fr;row-gap:32px;margin-top:40px}
 .guar{display:block;margin-top:48px}
 .guar p{font-size:21px;margin-top:16px}
 .contact{display:block}
 .contact form{margin-top:48px}
 footer{padding:56px 24px 32px}
 .f1{display:flex;flex-direction:column;gap:32px;padding-bottom:56px}
 .f2{flex-direction:column;gap:8px}
 .band{padding-top:24px;padding-bottom:24px}
 .big{white-space:normal}
 .tlink .rt span{display:none}
 .tlink .nm{font-size:22px}
}
.big{font-size:clamp(26px,4.3vw,64px)}
.pr .fig{font-size:clamp(32px,4.1vw,60px)}
.ms-d.xl{font-size:clamp(34px,5.6vw,80px)}
.tr span:first-child{font-size:clamp(22px,2.4vw,34px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ── Product switcher bar ── */
/* Trade chip grid — compact, holds many trades without eating vertical space */
.trade-chips{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0}
.trade-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border:1px solid var(--rule);font-size:13px;font-family:var(--font-text);color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}
.trade-chip:hover,.trade-chip:focus-visible{border-color:var(--ink);background:var(--ink);color:var(--paper);outline:none}
.trade-chip.more{color:var(--graphite);border-style:dashed}

/* Pokie-style rolling number — rapid digit spin that lands on the real value.
   Used only on genuine live figures (e.g. QuoteWin's pipeline counts); never fabricates a number,
   it just makes arriving at the true value (even zero) feel alive instead of a flat "0" appearing. */
.pokie-num{font-variant-numeric:tabular-nums;display:inline-block}

/* ── Colour-coded sections (light theme accents) ── */
/* Step numbers: accent blue */
.ms-num{color:var(--accent-amber)}
/* Section index labels: accent teal */
.idx .ms-label:first-child{color:var(--accent-teal)}
/* Fact bar: warm off-white ground */
.facts{background:var(--brand-offwhite);margin-top:0;padding:0 64px;border-top:none;border-bottom:1px solid var(--rule)}
.facts div{border-bottom:none;border-right:1px solid var(--rule);padding:28px 24px}
.facts div:last-child{border-right:none}
/* How-it-works ms-stone: slightly warm */
.sec.ms-stone{background:var(--accent-warm)}
/* Trade list links: hover accent */
.tr:hover span:first-child{color:var(--accent-amber)}
.tr:hover{border-bottom-color:var(--accent-amber)}
/* Included items heading accent */
.incl .hd .ms-label:first-child{color:var(--accent-teal)}
/* HireBid band accent (amber) */
.hb-callout{background:var(--brand-black);color:#fff}
.hb-callout .ms-btn{background:var(--accent-amber);border-color:var(--accent-amber);color:#fff}
.hb-callout .ms-btn:hover{background:#b45309;border-color:#b45309}
/* CTA bands (bottom of each page): amber button for consistent accent across site */
.ms-inv.band .ms-btn.inverse{background:var(--accent-amber);border-color:var(--accent-amber);color:#fff}
.ms-inv.band .ms-btn.inverse:hover{background:#b45309;border-color:#b45309}
/* Pricing figures: accent blue on setup, accent green on ongoing */
.pr:first-child .fig{color:var(--accent-amber)}
.pr:last-child .fig{color:var(--accent-green)}
/* Teal label accent on "what's included" section headers */
.incl .hd{border-bottom-color:var(--accent-teal)}
/* facts2 rows: accent on label */
.facts2 div span:first-child{color:var(--accent-teal);font-weight:600}
/* Feature page tlink cards (grid layout override) */
.tlink[style*="display:block"]{color:var(--ink)}
.tlink[style*="display:block"]:hover{text-decoration:none}
.tlink[style*="display:block"]:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Local services map */
.localmap-section{padding:96px 64px;background:var(--brand-offwhite);border-top:1px solid var(--rule)}
.localmap-inner{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:start}
.localmap-map{height:480px;border:1px solid var(--rule);background:#e8e8e8}
.localmap-desc{display:flex;flex-direction:column;gap:24px}
.localmap-desc p{font-size:17px;color:var(--graphite);max-width:440px}
@media(max-width:960px){
  .facts{padding:0 24px;margin:0}
  .facts div{border-right:none;border-bottom:1px solid var(--rule)}
  .localmap-section{padding:56px 24px}
  .localmap-inner{grid-template-columns:1fr}
  .localmap-map{height:340px}
}

/* Live status pulse — the one place motion signals "this is actually running".
   Respects prefers-reduced-motion. */
@keyframes ms-pulse{0%{box-shadow:0 0 0 0 rgba(181,84,31,.45)}70%{box-shadow:0 0 0 7px rgba(181,84,31,0)}100%{box-shadow:0 0 0 0 rgba(181,84,31,0)}}
.pulse-dot{animation:ms-pulse 2.2s ease-out infinite}
@media (prefers-reduced-motion: reduce){.pulse-dot{animation:none}}