/* ============================================================ MCF SERVICE PAGES (2026-10-25, approved by Alicia from the mock-ups "MCF Service Page Design"): drawn by templates/service-.php through the shared parts in templates/service-parts.php, behind the `mcf_service` switch. The forensic look of the front page and Insights: light, hairlines, navy and gold, IBM Plex Mono for the eyebrows and numbers, 8px corners. Its own tokens (--sv-*), read by this sheet alone: nothing here reaches another page, and no other page's token reaches this one (tokens/main/ custom.css are not loaded here). Every rule is scoped to #edWrap.mcfsv, which only the service templates print. The masthead follows the house service masthead (CLAUDE.md, Settled 7): one unit, centred; on desktop the title (as wide as its longest line, broken by its own br.tbr) beside the tagline, which keeps its own left alignment; from 1024 down the two stack and centre, 30px apart. Title 48 / 32 / 30, tagline 20 / 300 / 1.2 at every width. Only the title fades in (1.4s). Narrow screens SCALE a Global number with a named multiplier, never replace it, and no panel-controlled size uses clamp(). The layout follows #edWrap's width (container "sv"), so the panel's iPad and Phone buttons show the real iPad and phone layouts. ============================================================ */ /* IBM Plex Mono 400 and 500, latin, served from the theme (the files the front page and Insights use). Open Font License. */ @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Roboto Flex, served from the theme (the same file chrome.css declares), so the page draws in it even with the theme header off. */ @font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* text sizes */ --sv-h1:48px; /* the page title (desktop; 32 iPad, 30 phone by --sv-h1-mul) */ --sv-tag:20px; /* the tagline beside it, at every width */ --sv-eye:12px; /* the mono eyebrows and the trust point numbers */ --sv-h2:36px; /* section headings */ --sv-h2-read:30px; /* "Further reading on ..." */ --sv-lead:20px; /* the intro's lead line */ --sv-body:17px; /* section paragraphs */ --sv-btn-fs:15px; /* buttons */ --sv-when-h:20px; /* "When to call us" */ --sv-report-h:21px; /* the report card's heading */ --sv-box-h:19px; /* the tag groups', tests box's and Next step box's headings */ --sv-list:16px; /* the box lists and the Next step box's line */ --sv-pt-h:17px; /* a trust point's title */ --sv-small:15px; /* trust point lines, tags, notes, test descriptions, card text */ --sv-step:19px; /* a step's title */ --sv-num:13px; /* step and report numbers */ --sv-fold:16px; /* the text inside a step and an answer */ --sv-card-h:18px; /* card titles (Why Choose MCF, further reading) */ --sv-q:17px; /* a question */ --sv-label:11px; /* mono labels (Reference Guide, Read the entry, Related services) */ --sv-rel:16px; /* the related service links */ /* colours */ --sv-title:#0C5ABD; /* the page title and tagline */ --sv-ink:#1C244B; /* headings, titles, tags, list lines */ --sv-text:#324A6D; /* paragraphs */ --sv-gold:#815C00; /* eyebrows, numbers, the open/close signs, gold button words */ --sv-edge:#D9A63C; /* the trust points' rule, the gold button outline, the Next step band's edge */ --sv-link:#2F63D6; /* links */ --sv-mute:#5B6478; /* mono labels */ --sv-bg:#FFFFFF; /* the page */ --sv-surface:#FFFFFF; /* steps, questions and cards on a band */ --sv-band:#F3F5F8; /* the grey bands and boxes */ --sv-band-line:#E3E6EB;/* the bands' top and bottom edges */ --sv-line:#D8DBE1; /* outlines */ --sv-dash:#C9CDD5; /* dashed dividers and tag outlines */ --sv-open:#1C244B; /* an open step's or question's outline */ --sv-tile:#F7F8FA; /* the test tiles inside a step */ --sv-btn:#5186F7; /* buttons (house blue: buttons are blue, white or gold, never navy) */ --sv-btn-txt:#FFFFFF; /* layout */ --sv-wrap:1100px; /* the content width */ --sv-pad:20px; /* side padding */ --sv-sec:56px; /* above and below a section */ --sv-hero-h:400px; /* the photo's height (desktop; scaled on iPad and phone) */ --sv-title-gap:20px; /* title to tagline, side by side (desktop) */ --sv-col-gap:40px; /* between a text column and its box */ --sv-card-gap:20px; /* between cards */ --sv-radius:8px /* card corners */ } /* base: Elementor's kit and Hello's reset style bare tags site-wide, so every part sets what it draws */ #edWrap.mcfsv{container:sv / inline-size;background:var(--sv-bg);color:var(--sv-text);font-family:var(--font,"Roboto Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding:0;overflow-x:clip} #edWrap.mcfsv *,#edWrap.mcfsv *::before,#edWrap.mcfsv *::after{box-sizing:border-box} #edWrap.mcfsv :is(h1,h2,h3,p,ul,ol,li,dl,dt,dd,section,aside,nav,details,summary){margin:0;padding:0;font-family:inherit;letter-spacing:normal;text-transform:none} #edWrap.mcfsv a{color:inherit;text-decoration:none;background:none} /* narrow-screen multipliers (not panel controls); set on the sections, which a container query can style */ #edWrap.mcfsv > *{--sv-h1-mul:1;--sv-h2-mul:1;--sv-h2r-mul:1;--sv-hero-mul:1} @container sv (max-width:1024px){#edWrap.mcfsv > *{--sv-h1-mul:calc(32 / 48);--sv-h2-mul:calc(30 / 36);--sv-h2r-mul:calc(27 / 30);--sv-hero-mul:.7}} @container sv (max-width:767px){#edWrap.mcfsv > *{--sv-h2-mul:calc(26 / 36);--sv-h2r-mul:calc(24 / 30);--sv-hero-mul:.55}} @container sv (max-width:560px){#edWrap.mcfsv > *{--sv-h1-mul:calc(30 / 48)}} /* shared pieces */ #edWrap.mcfsv .sv-in{width:100%;max-width:calc(var(--sv-wrap) + 2 * var(--sv-pad));margin-left:auto;margin-right:auto;padding-left:var(--sv-pad);padding-right:var(--sv-pad)} #edWrap.mcfsv .sv-band{background:var(--sv-band);border-top:1px solid var(--sv-band-line);border-bottom:1px solid var(--sv-band-line)} #edWrap.mcfsv :is(.sv-method,.sv-scope,.sv-prevent,.sv-why,.sv-faq,.sv-read,.sv-next){padding-top:var(--sv-sec);padding-bottom:var(--sv-sec)} #edWrap.mcfsv .sv-stack{display:flex;flex-direction:column;gap:26px} #edWrap.mcfsv .sv-method .sv-stack{gap:28px} #edWrap.mcfsv .sv-stack-24{gap:24px} #edWrap.mcfsv .sv-head{display:flex;flex-direction:column;gap:12px;max-width:760px} #edWrap.mcfsv .sv-head-wide{max-width:none} #edWrap.mcfsv .sv-split{display:flex;flex-wrap:wrap;gap:var(--sv-col-gap);align-items:flex-start} #edWrap.mcfsv .sv-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px} #edWrap.mcfsv .sv-main-14{gap:14px} #edWrap.mcfsv .sv-main-12{gap:12px} #edWrap.mcfsv .sv-eye{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sv-eye);font-weight:400;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-gold)} #edWrap.mcfsv .sv-h2{font-size:calc(var(--sv-h2) * var(--sv-h2-mul));font-weight:600;line-height:1.18;color:var(--sv-ink);text-wrap:balance} #edWrap.mcfsv .sv-h2-read{font-size:calc(var(--sv-h2-read) * var(--sv-h2r-mul));line-height:1.2} #edWrap.mcfsv .sv-text{font-size:var(--sv-body);line-height:1.62;color:var(--sv-text)} #edWrap.mcfsv .sv-lead{font-size:var(--sv-lead);font-weight:500;line-height:1.35;color:var(--sv-ink)} #edWrap.mcfsv .sv-note{font-size:var(--sv-small);line-height:1.5;color:var(--sv-text)} #edWrap.mcfsv .sv-card{min-width:0;background:var(--sv-surface);border:1px solid var(--sv-line);border-radius:var(--sv-radius)} #edWrap.mcfsv .sv-box{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px;padding:24px 26px;background:var(--sv-band);border:1px solid var(--sv-line);border-radius:var(--sv-radius)} #edWrap.mcfsv .sv-box-h{font-size:var(--sv-box-h);font-weight:600;line-height:1.3;color:var(--sv-ink)} /* buttons: blue, or a gold outline; 8px corners; hover = transparent with a 1px outline in the button's own colour */ #edWrap.mcfsv .sv-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px} #edWrap.mcfsv .sv-btn{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:46px;padding:10px 22px;border:1px solid var(--sv-btn);border-radius:8px;background:var(--sv-btn);font-size:var(--sv-btn-fs);font-weight:400;line-height:1.3;color:var(--sv-btn-txt);text-align:center;transition:background-color .2s,color .2s,border-color .2s} #edWrap.mcfsv .sv-btn:hover,#edWrap.mcfsv .sv-btn:focus-visible{background:transparent;color:var(--sv-btn)} #edWrap.mcfsv .sv-btn-o{background:transparent;border-color:var(--sv-edge);color:var(--sv-gold)} #edWrap.mcfsv .sv-btn-o:hover,#edWrap.mcfsv .sv-btn-o:focus-visible{background:transparent;border-color:var(--sv-gold);color:var(--sv-gold)} /* ---------- the masthead ---------- */ @keyframes svFadeIn{from{opacity:0}to{opacity:1}} #edWrap.mcfsv .sv-mast{padding:64px 0 40px} #edWrap.mcfsv .sv-mast-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:var(--sv-title-gap)} #edWrap.mcfsv .sv-h1{flex:0 1 auto;min-width:0;width:max-content;max-width:100%;font-size:calc(var(--sv-h1) * var(--sv-h1-mul));font-weight:600;line-height:1.12;color:var(--sv-title);text-align:center;text-wrap:balance;animation:svFadeIn 1.4s ease-out both} #edWrap.mcfsv .sv-tag{flex:none;max-width:420px;font-size:var(--sv-tag);font-weight:300;line-height:1.2;color:var(--sv-title);text-align:left} @container sv (max-width:1024px){ #edWrap.mcfsv .sv-mast-row{flex-direction:column;gap:30px} #edWrap.mcfsv .sv-h1 br.tbr{display:none} #edWrap.mcfsv .sv-h1{max-width:78%} #edWrap.mcfsv .sv-tag{text-align:center} } @container sv (max-width:560px){ #edWrap.mcfsv .sv-h1{max-width:88%} } /* ---------- the photo ---------- */ #edWrap.mcfsv .sv-hero .sv-img{display:block;width:100%;max-width:none;height:calc(var(--sv-hero-h) * var(--sv-hero-mul));object-fit:cover;object-position:center 42%;border-radius:0} #edWrap.mcfsv .sv-noimg{background:var(--sv-band)} /* ---------- intro and the When to call us box ---------- */ #edWrap.mcfsv .sv-intro{padding-top:var(--sv-sec);padding-bottom:calc(var(--sv-sec) / 2)} #edWrap.mcfsv .sv-when-h{font-size:var(--sv-when-h);font-weight:600;line-height:1.25;color:var(--sv-ink)} #edWrap.mcfsv .sv-ticks{display:flex;flex-direction:column;gap:10px;list-style:none} #edWrap.mcfsv .sv-ticks > li{padding-top:10px;border-top:1px dashed var(--sv-dash);font-size:var(--sv-list);line-height:1.5;color:var(--sv-text)} /* ---------- the trust points ---------- */ #edWrap.mcfsv .sv-points-sec{padding-top:calc(var(--sv-sec) / 2);padding-bottom:var(--sv-sec)} #edWrap.mcfsv .sv-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 28px;list-style:none} #edWrap.mcfsv .sv-points.sv-points-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 22px} @container sv (max-width:1024px){#edWrap.mcfsv .sv-points.sv-points-5{grid-template-columns:repeat(3,minmax(0,1fr))}} @container sv (max-width:767px){#edWrap.mcfsv .sv-points.sv-points-5{grid-template-columns:minmax(0,1fr)}} #edWrap.mcfsv .sv-point{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--sv-edge)} #edWrap.mcfsv .sv-pnum{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sv-eye);line-height:1.4;color:var(--sv-gold)} #edWrap.mcfsv .sv-pt-h{font-size:var(--sv-pt-h);font-weight:600;line-height:1.35;color:var(--sv-ink)} #edWrap.mcfsv .sv-pt-t{font-size:var(--sv-small);line-height:1.5;color:var(--sv-text)} /* ---------- fold-outs: the steps and the questions (details; they open on hover, a finger taps) ---------- */ #edWrap.mcfsv .sv-fold{display:flex;flex-direction:column;background:var(--sv-surface);border:1px solid var(--sv-line);border-radius:var(--sv-radius)} #edWrap.mcfsv .sv-fold[open]{border-color:var(--sv-open)} #edWrap.mcfsv .sv-fold > summary{display:flex;align-items:center;gap:18px;min-height:64px;padding:20px 24px;list-style:none;cursor:pointer} #edWrap.mcfsv .sv-fold > summary::-webkit-details-marker{display:none} #edWrap.mcfsv .sv-fold > summary::after{content:"+";flex:none;margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px;line-height:1;color:var(--sv-gold)} #edWrap.mcfsv .sv-fold[open] > summary::after{content:"\2212"} #edWrap.mcfsv .sv-num{flex:none;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sv-num);line-height:1.4;color:var(--sv-gold)} #edWrap.mcfsv .sv-step-h{flex:1;min-width:0;font-size:var(--sv-step);font-weight:600;line-height:1.3;color:var(--sv-ink)} #edWrap.mcfsv .sv-fold-in{display:flex;flex-direction:column;gap:12px;padding:16px 24px 22px 63px;border-top:1px dashed var(--sv-dash)} #edWrap.mcfsv .sv-fold-p{font-size:var(--sv-fold);line-height:1.62;color:var(--sv-text)} #edWrap.mcfsv .sv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} #edWrap.mcfsv .sv-tile{padding:14px 16px;background:var(--sv-tile);border-radius:6px} #edWrap.mcfsv .sv-tile dt{font-size:var(--sv-fold);font-weight:600;line-height:1.62;color:var(--sv-ink)} #edWrap.mcfsv .sv-tile dd{margin:4px 0 0;font-size:var(--sv-small);line-height:1.5;color:var(--sv-text)} #edWrap.mcfsv .sv-bullets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 24px;padding-left:20px;list-style:disc} #edWrap.mcfsv .sv-bullets > li{font-size:var(--sv-fold);line-height:1.62;color:var(--sv-text)} /* ---------- the method: steps beside the report card ---------- */ #edWrap.mcfsv .sv-method-row{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start} #edWrap.mcfsv .sv-steps{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:10px} #edWrap.mcfsv .sv-report{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:26px 26px 24px;background:var(--sv-surface);border:1px solid var(--sv-line);border-radius:var(--sv-radius)} #edWrap.mcfsv .sv-report-h{font-size:var(--sv-report-h);font-weight:600;line-height:1.25;color:var(--sv-ink)} #edWrap.mcfsv .sv-rows{display:flex;flex-direction:column;list-style:none} #edWrap.mcfsv .sv-rows > li{padding:10px 0;border-top:1px dashed var(--sv-dash);font-size:var(--sv-list);line-height:1.45;color:var(--sv-ink)} #edWrap.mcfsv .sv-rows > li:last-child{border-bottom:1px dashed var(--sv-dash)} #edWrap.mcfsv .sv-ol{counter-reset:svr} #edWrap.mcfsv .sv-ol > li{display:flex;gap:14px;counter-increment:svr} #edWrap.mcfsv .sv-ol > li::before{content:counter(svr) ".";flex:none;padding-top:2px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sv-num);line-height:1.45;color:var(--sv-gold)} /* ---------- scope: groups of tags ---------- */ #edWrap.mcfsv .sv-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sv-card-gap)} #edWrap.mcfsv .sv-note-a{color:var(--sv-link);text-decoration:underline;text-underline-offset:2px} #edWrap.mcfsv :is(.sv-groups.sv-groups-4,.sv-groups.sv-groups-8){grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))} #edWrap.mcfsv .sv-group{display:flex;flex-direction:column;gap:14px;padding:24px 26px} #edWrap.mcfsv .sv-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none} #edWrap.mcfsv .sv-chip{padding:6px 14px;border:1px solid var(--sv-dash);border-radius:999px;font-size:var(--sv-small);line-height:1.4;color:var(--sv-ink)} /* ---------- before it fails: text beside the tests box ---------- */ #edWrap.mcfsv .sv-tests{flex:1 1 300px;display:flex;flex-direction:column;gap:10px;padding:24px 26px} /* ---------- why choose MCF ---------- */ #edWrap.mcfsv .sv-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sv-card-gap)} /* five reasons: the lead (first) one spans two columns, 3 across on desktop, 2 on iPad, 1 on phones */ #edWrap.mcfsv .sv-why-grid.sv-why-5{grid-template-columns:repeat(3,minmax(0,1fr))} #edWrap.mcfsv .sv-why-5>.sv-why-lead{grid-column:span 2;border-top:3px solid var(--sv-edge)} #edWrap.mcfsv .sv-why-grid.sv-why-6{grid-template-columns:repeat(3,minmax(0,1fr))} #edWrap.mcfsv .sv-why-6>.sv-why-lead{border-top:3px solid var(--sv-edge)} @container sv (max-width:1024px){#edWrap.mcfsv :is(.sv-why-grid.sv-why-5,.sv-why-grid.sv-why-6){grid-template-columns:repeat(2,minmax(0,1fr))}} @container sv (max-width:767px){#edWrap.mcfsv :is(.sv-why-grid.sv-why-5,.sv-why-grid.sv-why-6){grid-template-columns:minmax(0,1fr)}#edWrap.mcfsv .sv-why-5>.sv-why-lead{grid-column:auto}} #edWrap.mcfsv .sv-why-card{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;box-shadow:0 1px 2px rgba(28,36,75,.05),0 8px 24px rgba(28,36,75,.06)} #edWrap.mcfsv .sv-card-h{font-size:var(--sv-card-h);font-weight:600;line-height:1.3;color:var(--sv-ink)} #edWrap.mcfsv .sv-card-t{font-size:var(--sv-small);line-height:1.55;color:var(--sv-text)} /* ---------- questions ---------- */ #edWrap.mcfsv .sv-faq-split{gap:28px var(--sv-col-gap)} #edWrap.mcfsv .sv-faq-head{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px} #edWrap.mcfsv .sv-qs{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:10px} #edWrap.mcfsv .sv-q > summary{gap:16px;min-height:60px;padding:18px 22px} #edWrap.mcfsv .sv-q-h{flex:1;min-width:0;font-size:var(--sv-q);font-weight:600;line-height:1.35;color:var(--sv-ink)} #edWrap.mcfsv .sv-ans{padding:14px 22px 20px;border-top:1px dashed var(--sv-dash);font-size:var(--sv-fold);line-height:1.62;color:var(--sv-text)} /* ---------- further reading and related services ---------- */ #edWrap.mcfsv .sv-read-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sv-card-gap)} #edWrap.mcfsv .sv-read-card{display:flex;flex-direction:column;min-height:150px;overflow:hidden;color:var(--sv-ink)} #edWrap.mcfsv .sv-read-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px} /* the post's own featured image, in one 16:9 frame on every card; grows a little on hover like the front page cards */ #edWrap.mcfsv .sv-read-pic{display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--sv-line)} #edWrap.mcfsv .sv-read-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .5s ease} #edWrap.mcfsv .sv-read-card:hover .sv-read-img,#edWrap.mcfsv .sv-read-card:focus-visible .sv-read-img{transform:scale(1.06)} @media (prefers-reduced-motion:reduce){#edWrap.mcfsv .sv-read-img{transition:none}} #edWrap.mcfsv .sv-lbl{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sv-label);line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-mute)} #edWrap.mcfsv .sv-go{margin-top:auto;padding-top:10px;border-top:1px dashed var(--sv-dash);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--sv-label);line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-link)} #edWrap.mcfsv .sv-rel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:18px;border-top:1px solid var(--sv-band-line)} #edWrap.mcfsv .sv-rel-list{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;list-style:none} #edWrap.mcfsv .sv-rel-a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--sv-rel);line-height:1.4;color:var(--sv-link);text-decoration:underline;text-underline-offset:3px} #edWrap.mcfsv .sv-rel-a:hover{color:var(--sv-gold)} /* ---------- the Next step band ---------- */ #edWrap.mcfsv .sv-next{background:var(--sv-surface);border-top:3px solid var(--sv-edge)} #edWrap.mcfsv .sv-next-split{gap:28px 48px;align-items:center} #edWrap.mcfsv .sv-main-12{flex-basis:520px} #edWrap.mcfsv .sv-next-box{gap:10px} #edWrap.mcfsv .sv-box-p{font-size:var(--sv-list);line-height:1.5;color:var(--sv-text)} #edWrap.mcfsv .sv-next-box .sv-btn{align-self:flex-start} @media (prefers-reduced-motion:reduce){ #edWrap.mcfsv .sv-h1{animation:none} #edWrap.mcfsv .sv-btn{transition:none} }