/* ============================================================ MOMENTUM — StaffingSolutions.io design system (production) Chosen direction (turn 4c/5b). Warm sand, blue #1560F0, Bricolage Grotesque display, rounded panels. Same sg-* class API as before — re-skins all 238 generated pages with zero structural change. ============================================================ */ /* @import removed — fonts are ed in . See scripts/prepare-assets.mjs. */ :root{ --sand:#F3EEE3; --warm:#FBF8F2; --white:#FFFFFF; --ink:#14181F; --ink-2:#25292F; --muted:#6E685C; --faint:#9A8F78; --blue:#1560F0; --blue-h:#0F4FD0; --blue-tint:#F4F8FF; --blue-line:#DCE8FF; --blue-soft:#A9C6FF; --blue-lede:#DCE7FF; --tan:#F0D9A8; --tan-ink:#6B5E3E; --green:#1F9D63; --green-bright:#7DE0AE; --line:#EDE6D6; --line-strong:#DED6C6; --display:'Bricolage Grotesque',sans-serif; --body:'Instrument Sans',system-ui,sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --wrap:1316px; --pad:0px; --r-panel:24px; --r-card:20px; --r-btn:999px; --peach:#FBF8F2; --sage:#E2EDE6; --tile-blue:#E3ECFB; --tile-peach:#F9E4D4; --tile-lilac:#ECE3F6; --purple:#6E2D91; /* legacy aliases so any stray var refs still resolve */ --text:#14181F; --panel:#FBF8F2; --panel-2:#F3EEE3; --bright:#1560F0; --ink-deep:#070D18; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-padding-top:88px} body{background:var(--sand);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} p a,.sg-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} ::selection{background:var(--blue);color:#fff} a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} /* Outer frame — centres the page, guarantees a gutter, Momentum panel rhythm */ main{display:block;max-width:1380px;margin:0 auto;padding:0 32px} .sg-wrap{padding-left:0;padding-right:0} .sg-section{padding:76px 0} .sg-kicker{font:700 12.5px var(--body);letter-spacing:.14em;color:var(--blue);text-transform:uppercase} .sg-display{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.02} h1.sg-display{font-size:clamp(46px,5.4vw,72px)} h2.sg-display{font-size:clamp(32px,3.4vw,52px);line-height:1.04} .sg-sub{font-size:17.5px;line-height:1.6;color:var(--muted);max-width:560px} .sg-mono-label{font:700 11.5px var(--body);letter-spacing:.14em;color:var(--blue);text-transform:uppercase} .sg-muted{color:var(--muted)} .sg-faint{color:var(--faint)} /* Buttons — dark on light surfaces, inverted to white on blue/dark panels */ .sg-btn{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;font:700 15.5px/1 var(--body);padding:16px 32px;border-radius:var(--r-btn);border:1.5px solid transparent;box-shadow:0 10px 24px -10px rgba(21,96,240,.5);transition:transform .18s,background .18s,box-shadow .18s;cursor:pointer} .sg-btn:hover{background:var(--blue-h);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(21,96,240,.55)} .sg-btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink);box-shadow:none} .sg-btn--ghost:hover{border-color:var(--ink);background:var(--warm);box-shadow:none} .sg-btn--lg{font-size:17px;padding:19px 38px} .sg-btn--sm{font-size:14px;padding:12px 24px} .sg-cta-panel .sg-btn{background:#fff;color:var(--ink);box-shadow:0 16px 32px -14px rgba(0,0,0,.35)} .sg-cta-panel .sg-btn:hover{background:#fff;box-shadow:0 20px 38px -16px rgba(0,0,0,.4)} .sg-cta-panel .sg-btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;box-shadow:none} .sg-cta-panel .sg-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)} /* ===== Nav (injected by nav.js) — light sand bar ===== */ .sg-nav{position:sticky;top:0;z-index:50;background:rgba(243,238,227,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .sg-nav-inner{max-width:1380px;margin:0 auto;padding:0 32px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative} .sg-nav-logo{flex:0 0 auto;min-width:150px} .sg-nav-logo img{height:32px} .sg-nav-links{display:flex;align-items:center;gap:2px} .sg-nav-links>.sg-menu{position:relative} .sg-nav-links a.sg-top{display:inline-flex;align-items:center;gap:6px;font:700 14px/1 var(--body);color:var(--ink);padding:12px 13px;border-radius:8px;transition:color .15s} .sg-nav-links a.sg-top:hover,.sg-menu:hover a.sg-top{color:var(--blue)} .sg-nav-links a.sg-top.sg-accent{color:var(--blue)} /* ===== Mega menu (ported from approved Momentum homepage) ===== */ .mm-item{position:static} .mm-trigger,.mm-link{display:inline-flex;align-items:center;gap:6px;height:74px;padding:0 13px;cursor:pointer;color:var(--ink);text-decoration:none;font:700 14px var(--body);transition:color .15s} .mm-trigger:hover,.mm-link:hover,.mm-item:hover .mm-trigger{color:var(--blue)} .mm-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.45;transition:transform .2s,opacity .2s} .mm-item:hover .mm-caret{transform:rotate(-135deg);margin-top:2px;opacity:.9} .mm-panel{position:absolute;left:0;right:0;top:calc(100% + 4px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease;background:#FFFDF9;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -24px rgba(20,24,31,.4);padding:28px 32px;z-index:60} .mm-item:hover .mm-panel,.mm-item:focus-within .mm-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .mm-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} .mm-colh{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 10px} .mm-sys{display:flex;flex-direction:column;gap:1px;padding:9px 12px;margin:0 -12px;border-radius:11px;text-decoration:none;transition:background .15s} .mm-sys:hover{background:var(--peach)} .mm-sys b{font:700 14px var(--display);letter-spacing:-.01em;color:var(--ink)} .mm-sys span{font:400 12px var(--body);color:var(--muted)} .mm-colh a{color:inherit;text-decoration:none} .mm-colh a:hover{color:var(--blue)} .mm-ri{display:block;padding:7px 10px;margin:0 -10px;border-radius:9px;text-decoration:none;color:var(--ink);font:700 14px var(--display);letter-spacing:-.01em;transition:background .12s,color .12s} .mm-ri:hover{background:var(--peach);color:var(--blue)} .sg-nav-right{display:flex;align-items:center;gap:16px;flex:0 0 auto} .sg-nav-right .sg-btn--sm{white-space:nowrap;flex:0 0 auto} .sg-nav-contact{white-space:nowrap;flex:0 0 auto} .sg-nav-jobs{font:600 12px var(--body);color:var(--faint)} .sg-nav-jobs:hover{color:var(--muted)} .sg-nav-contact{font:700 14px var(--body);color:var(--ink);padding:0 4px} .sg-nav-contact:hover{color:var(--blue);opacity:1} /* ===== Utility bar (shared, above nav) ===== */ .sg-util{background:var(--ink);color:#B9BEC8;font:500 12.5px var(--body)} .sg-util-in{max-width:1380px;margin:0 auto;padding:9px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .sg-util-l,.sg-util-r{display:flex;align-items:center;gap:12px} .sg-util a{color:#D6DAE2} .sg-util a:hover{color:#fff} .sg-util span{color:#6C7484} .sg-util-r a{text-decoration:underline;text-underline-offset:3px} @media (max-width:820px){.sg-util-note{display:none}.sg-util-in{padding:8px 20px;font-size:12px}} /* ===== Mobile menu ===== */ .sg-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;cursor:pointer} .sg-burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s} .sg-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)} .sg-burger.on span:nth-child(2){opacity:0} .sg-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .sg-mob{display:none;border-top:1px solid var(--line);background:var(--warm);padding:20px 24px 28px;max-height:calc(100vh - 74px);overflow:auto} .sg-mob[hidden]{display:none !important} .sg-mob-grp{padding:12px 0;border-bottom:1px solid var(--line)} .sg-mob-grp h4{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px} .sg-mob-grp a{display:block;font:600 16px var(--body);color:var(--ink);padding:8px 0} .sg-mob-jobs{display:block;margin-top:16px;font:600 13px var(--body);color:var(--muted)} @media (max-width:1180px){ .sg-burger{display:flex} .sg-mob:not([hidden]){display:block} .sg-nav-jobs,.sg-nav-contact{display:none} .sg-nav-right .sg-btn--sm{font-size:13px;padding:11px 18px} } /* ===== Hero panel — blue, with Filipino-VA photo (matches homepage) ===== */ .sg-phero{position:relative;background:transparent;color:var(--ink);border-radius:0;margin:8px 0 28px;padding:44px 500px 44px 0;min-height:440px;display:flex;flex-direction:column;justify-content:center;overflow-x:clip} .sg-phero::before{content:"";position:absolute;top:0;right:0;bottom:0;width:460px;border-radius:24px;background:url('/brand/photos/hero-panel-1024.webp') center 20%/cover no-repeat;box-shadow:0 30px 60px -28px rgba(35,32,26,.35)} .sg-phero::after{content:"";position:absolute;top:-90px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(240,217,168,.5),rgba(240,217,168,0) 65%);pointer-events:none;z-index:-1} .sg-phero>*{position:relative;z-index:2;max-width:640px} .sg-phero .sg-kicker{color:var(--blue)} .sg-phero .sg-lede{color:var(--muted);max-width:520px} .sg-phero .sg-mono-label,.sg-phero .sg-mono-label a{color:var(--faint);font:400 12.5px var(--body);letter-spacing:0;text-transform:none} .sg-phero .sg-mono-label a{text-decoration:underline;text-underline-offset:3px} .sg-phero .sg-display span{color:var(--blue)!important;background:linear-gradient(var(--tan),var(--tan)) 0 86%/100% .17em no-repeat;padding:0 .05em .03em} .sg-phero.has-card::before{display:none} .sg-herocard{position:absolute;top:50%;right:0;transform:translateY(-50%);width:460px;max-width:100%;border-radius:24px;overflow:hidden;background:var(--warm);border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(35,32,26,.35);z-index:2} .sg-herocard .hc-img{position:relative;height:300px} .sg-herocard .hc-img img{width:100%;height:100%;object-fit:cover} .sg-herocard .hc-badge{position:absolute;left:16px;bottom:16px;background:rgba(20,24,31,.72);color:#fff;backdrop-filter:blur(6px);border-radius:99px;padding:7px 14px;font:600 12px var(--body)} .sg-herocard .hc-body{padding:20px 24px 24px} .sg-herocard .hc-top{display:flex;justify-content:space-between;align-items:center;gap:12px} .sg-herocard .hc-name{font:700 20px var(--display);letter-spacing:-.015em} .sg-herocard .hc-ver{font:700 12px var(--body);color:var(--green);background:var(--sage);border-radius:99px;padding:5px 12px;flex:none} .sg-herocard .hc-role{font:500 13.5px var(--body);color:var(--muted);margin-top:3px} .sg-herocard .hc-exp{font:400 13.5px/1.6 var(--body);color:var(--ink);margin-top:12px} .sg-herocard .hc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px} .sg-herocard .hc-chips span{font:600 12px var(--body);color:var(--muted);background:var(--sand);border:1px solid var(--line);border-radius:99px;padding:5px 11px} .sg-tlink{align-self:center;font:600 14px var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:4px} .sg-tlink:hover{color:var(--blue)} @media (max-width:1180px){ .sg-phero{padding-right:0;min-height:0} .sg-herocard{position:static;transform:none;width:100%;max-width:460px;margin-top:36px} /* card has stacked below — uncap the text column or a dead gutter opens on its right. Exclude the card itself: it is a direct child and would lose its 460px cap. */ .sg-phero>*:not(.sg-herocard){max-width:none} .sg-phero .sg-lede{max-width:760px} } .sg-phero h1.sg-display{font-size:clamp(40px,4.6vw,64px)} .sg-lede{font-size:20px;line-height:1.55;color:var(--muted);max-width:660px} /* ===== Crumb ===== */ .sg-crumb{font:600 11.5px var(--body);letter-spacing:.04em;color:var(--faint);padding-top:22px} .sg-crumb a{color:var(--muted)} .sg-crumb a:hover{color:var(--blue)} .sg-crumb span{margin:0 9px;color:var(--line-strong)} .sg-crumb b{color:var(--muted);font-weight:600} /* ===== Stat band — tan panel ===== */ .sg-statband{display:grid;grid-template-columns:repeat(4,1fr);background:var(--peach);border:1px solid var(--line);border-radius:var(--r-panel);padding:32px 40px;margin:0 0 16px} .sg-stat{position:relative;display:flex;flex-direction:column;justify-content:center;padding:8px 34px;min-height:76px} .sg-stat:first-child{padding-left:0} .sg-stat:last-child{padding-right:0} .sg-stat + .sg-stat::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)} .sg-stat b{display:block;font:800 clamp(30px,2.9vw,42px)/1.04 var(--display);letter-spacing:-.025em;color:var(--blue);text-wrap:balance} .sg-stat b.sg-blue{color:var(--blue)} .sg-stat b span{font-size:18px!important;font-weight:700;letter-spacing:0} .sg-stat span{display:block;font:600 12.5px var(--body);color:var(--muted);margin-top:8px;line-height:1.4} /* ===== Placeholder imagery — warm ===== */ .sg-ph{background:repeating-linear-gradient(45deg,var(--warm) 0 14px,#EFE7D7 14px 28px);border:1px solid var(--line-strong);border-radius:var(--r-card);display:flex;align-items:center;justify-content:center;min-height:220px} .sg-ph span{font:600 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} /* ===== Role / link cards ===== */ .sg-rolegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sg-rolecard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:box-shadow .15s,transform .12s} .sg-rolecard:hover{box-shadow:0 18px 40px -24px rgba(20,24,31,.35);transform:translateY(-2px)} .sg-rolecard .sg-tag{display:none} .sg-rolecard h3{font:800 27px/1.04 var(--display);margin:0 0 10px;letter-spacing:-.02em} .sg-rolecard p{font-size:14px;line-height:1.65;color:var(--muted)} .sg-rolecard .sg-more{display:inline-block;margin-top:14px;font:700 13px var(--body);color:var(--blue)} /* ===== Steps ===== */ .sg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .sg-step{background:transparent;border:0;border-top:2px dotted var(--line-strong);border-radius:0;padding:20px 0 0} .sg-step .n{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .sg-step h3{font:700 19px var(--display);margin:10px 0 8px;letter-spacing:-.015em} .sg-step p{font-size:14px;line-height:1.6;color:var(--muted)} /* ===== CTA panel — blue ===== */ .sg-cta-panel{border-radius:var(--r-panel);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:40px;background:var(--blue);color:#fff} .sg-cta-panel h2{font:800 clamp(32px,3.4vw,56px)/1.02 var(--display);letter-spacing:-.025em} .sg-cta-panel .sg-sub{margin-top:10px;max-width:none;color:var(--blue-lede)} .sg-cta-panel .sg-sub b{color:#fff} .sg-cta-panel .sg-sub a{color:#fff;text-decoration:underline} /* ===== Footer (injected) — sand ===== */ .sg-foot{background:var(--sand);border-top:2px solid var(--line-strong);margin-top:56px} .sg-foot .sg-wrap{max-width:1380px;margin:0 auto;padding:0 32px !important} .sg-foot-grid{display:grid;grid-template-columns:1.15fr repeat(6,1fr);gap:24px;padding:52px 0 40px} .sg-foot-brand img{height:30px} .sg-foot-brand p{margin-top:14px;font-size:13px;line-height:1.65;color:var(--muted);max-width:240px} .sg-foot-col h4{font:700 13px var(--body);letter-spacing:0;color:var(--ink);margin-bottom:14px} .sg-foot-col a{display:block;font-size:13.5px;color:var(--muted);padding:4.5px 0} .sg-foot-col a:hover{color:var(--blue)} [id]{scroll-margin-top:96px} .sg-foot-locs{border-top:1px solid var(--line-strong);padding:18px 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:600 13px var(--body)} .sg-foot-locs>span{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .sg-foot-locs a{color:var(--muted)} .sg-foot-locs a:hover{color:var(--blue)} .sg-foot-bar{border-top:1px solid var(--line-strong);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 12px var(--body);color:var(--faint)} .sg-foot-bar a:hover{color:var(--muted)} /* ===== Responsive squeeze (desktop-first) ===== */ @media (max-width:1180px){ .sg-nav-links{display:none} .sg-phero{padding:36px 0 36px;min-height:0} .sg-phero::before{position:relative;display:block;order:2;width:100%;height:280px;margin-top:28px;right:auto;top:auto;bottom:auto} .sg-statband,.sg-steps{grid-template-columns:repeat(2,1fr)} .sg-statband{row-gap:6px} .sg-statband .sg-stat:nth-child(odd){padding-left:0} .sg-statband .sg-stat:nth-child(even){padding-right:0} .sg-statband .sg-stat:nth-child(odd)::before{display:none} .sg-rolegrid{grid-template-columns:repeat(2,1fr)} .sg-bento{grid-template-columns:repeat(2,1fr)!important} .sg-foot-grid{grid-template-columns:repeat(2,1fr)} .sg-cta-panel{flex-direction:column;align-items:flex-start} } @media (max-width:680px){ .sg-statband,.sg-steps,.sg-rolegrid,.sg-foot-grid{grid-template-columns:1fr} .sg-statband .sg-stat{padding:10px 0} .sg-statband .sg-stat::before{display:none} h1.sg-display{font-size:44px} .sg-phero{min-height:0;padding:28px 0 32px} .sg-phero::before{display:none} .sg-phero>*{max-width:none} } /* ============================================================ PAGE TEMPLATE KIT — roles / NDIS / software / industries / compare ============================================================ */ .sg-prose-sec{padding:56px 0} .sg-body{max-width:760px} h2.sg-h2,.sg-body h2{font:800 clamp(30px,3vw,46px)/1.04 var(--display);letter-spacing:-.025em;color:var(--ink)} .sg-body h3{font:700 21px var(--display);margin:28px 0 8px;letter-spacing:-.015em} .sg-body p{color:var(--muted);margin:16px 0} .sg-body p:first-of-type{margin-top:18px} .sg-body strong{color:var(--ink);font-weight:700} .sg-check{list-style:none;display:grid;gap:12px;margin-top:12px} .sg-check li{position:relative;padding-left:30px;color:var(--muted);font-size:15.5px;line-height:1.55} .sg-check li::before{content:"✓";position:absolute;left:0;top:1px;color:var(--green);font-weight:800} .sg-check li strong{color:var(--ink);font-weight:700} .sg-featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sg-feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px} .sg-feat .l{font:700 11.5px var(--body);letter-spacing:.14em;color:var(--blue);text-transform:uppercase} .sg-feat h3{font:700 20px var(--display);margin:12px 0 8px;letter-spacing:-.015em} .sg-feat p{font-size:14px;line-height:1.6;color:var(--muted)} .sg-spokes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sg-spoke{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:box-shadow .15s,transform .12s} .sg-spoke:hover{box-shadow:0 18px 40px -24px rgba(20,24,31,.35);transform:translateY(-2px)} .sg-spoke .k{font:700 11.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .sg-spoke h3{font:700 20px var(--display);margin:10px 0 8px;letter-spacing:-.015em} .sg-spoke p{font-size:13.5px;line-height:1.6;color:var(--muted)} .sg-spoke .sg-more{display:inline-block;margin-top:12px;font:700 12.5px var(--body);color:var(--blue)} .sg-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .sg-chip{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font:600 14px var(--body);color:var(--ink);transition:border-color .12s,background .12s,transform .12s} .sg-chip:hover{transform:translateY(-1px)} .sg-chip:hover{border-color:var(--blue);background:var(--blue-tint)} .sg-chip b{color:var(--blue);font:700 11px var(--body);letter-spacing:.06em} .sg-faq{max-width:880px;display:grid;gap:10px} .sg-faq details{border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)} .sg-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font:700 17px var(--display);letter-spacing:-.01em;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px} .sg-faq summary::-webkit-details-marker{display:none} .sg-faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:99px;background:var(--peach);color:var(--blue);font-size:17px;font-weight:600;line-height:28px;text-align:center;transition:transform .25s,background .25s,color .25s} .sg-faq details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:#fff} .sg-faq details[open] summary{border-bottom:1px solid var(--line)} .sg-faq .a{padding:16px 24px 22px;color:var(--muted);font-size:15px;line-height:1.65} .sg-faq .a a{color:var(--blue);text-decoration:underline} .sg-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap} /* a standfirst note next to a heading reads as orphaned right-aligned text — sit it under the heading */ .sg-sec-head>p{flex:1 1 100%;max-width:760px !important;margin:14px 0 0 !important;font-size:16.5px !important;line-height:1.65;text-wrap:pretty} .sg-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start} .sg-aside{background:var(--warm);border:1px solid var(--line);border-radius:var(--r-panel);padding:32px} .sg-aside h3{font:700 18px var(--display);margin-bottom:16px;letter-spacing:-.015em} @media (max-width:1060px){ .sg-featgrid,.sg-spokes{grid-template-columns:repeat(2,1fr)} .sg-split{grid-template-columns:1fr;gap:32px} } @media (max-width:680px){ .sg-featgrid,.sg-spokes{grid-template-columns:1fr} } /* ============================================================ CONVERSION BLOCKS (blocks.js) — promise · offer · calc · profiles · compare · reviews · cta ============================================================ */ .sg-block{padding:0 0 96px} .sg-more{font:700 13.5px var(--body);color:var(--blue)} /* guarantee cards */ .sg-promise{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .sg-pcard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px 30px;box-shadow:0 18px 36px -22px rgba(20,24,31,.25)} .sg-pnum{width:46px;height:46px;border-radius:99px;display:grid;place-items:center;font:800 19px var(--display)} .sg-pnum--blue{background:var(--blue-tint);color:var(--blue);transform:rotate(-6deg)} .sg-pnum--green{background:var(--sage);color:var(--green);transform:rotate(5deg)} .sg-pnum--tan{background:var(--tan);color:#7A5E1E;transform:rotate(-4deg)} .sg-pcard h3{font:700 21px var(--display);letter-spacing:-.015em;margin:18px 0 8px} .sg-pcard p{font-size:14.5px;line-height:1.6;color:var(--muted)} /* offer stack */ .sg-offer{background:var(--ink);border-radius:28px;padding:72px 60px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;color:var(--sand)} .sg-orow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px;color:#E6E9EF} .sg-orow--last{border-bottom:0} .sg-orow b{color:var(--green-bright)} .sg-orow span:last-child{color:#8891A0;font-size:13px;text-align:right;flex:none} .sg-ototal{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:2px solid rgba(255,255,255,.35);margin-top:10px;padding-top:18px;font:700 16px var(--body);color:#fff} .sg-ototal s{color:#8891A0;font-size:20px;font-weight:600} .sg-ototal b{font:800 30px var(--display);letter-spacing:-.02em;color:var(--green-bright)} .sg-onote{font-size:12px;color:#8891A0;margin-top:10px} .sg-block .sg-onote,.sg-calc .sg-onote{color:var(--faint)} /* calculator */ .sg-calcwrap{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:96px} .sg-calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center;padding-top:96px;padding-bottom:96px} .sg-slabel{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;font:500 14px var(--body);color:var(--muted)} .sg-slabel b{font:800 30px var(--display);letter-spacing:-.02em;color:var(--ink)} .sg-calc input[type=range]{width:100%;accent-color:#1560F0} .sg-srange{display:flex;justify-content:space-between;font:500 12px var(--body);color:var(--faint);margin-top:8px} .sg-calccard{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:38px 42px;box-shadow:0 30px 60px -30px rgba(20,24,31,.35)} .sg-clabel{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px} .sg-rchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px} .sg-rchip{font:600 13px var(--body);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 15px;cursor:pointer;transition:all .15s} .sg-rchip:hover{border-color:var(--ink);color:var(--ink)} .sg-rchip.on{background:var(--blue);border-color:var(--blue);color:#fff} .sg-hours{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:999px;padding:3px;cursor:pointer;float:right;margin-bottom:14px} .sg-hours span{font:700 12.5px var(--body);color:var(--muted);padding:8px 15px;border-radius:999px} .sg-hours span.on{background:var(--ink);color:#fff} .sg-crow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);clear:both} .sg-crow span{font-size:15px;color:var(--muted)} .sg-crow i{font-style:normal;font-size:12px;color:var(--faint)} .sg-crow b{font:800 26px var(--display);letter-spacing:-.02em} .sg-crow b.sg-blue{color:var(--blue)} .sg-ckeep{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:20px} .sg-ckeep span{font:700 16px var(--body)} .sg-ckeep i{display:block;font-style:normal;font:700 12.5px var(--body);color:var(--green)} .sg-ckeep b{font:800 50px var(--display);letter-spacing:-.025em;color:var(--green)} /* profiles */ .sg-profwrap{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:96px} .sg-prof{display:grid;grid-template-columns:1fr 460px;gap:72px;align-items:center;padding-top:96px;padding-bottom:96px} .sg-profcard{background:var(--warm);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 30px 60px -30px rgba(20,24,31,.35);position:relative} .sg-proftag{position:absolute;top:-14px;right:26px;background:var(--tan);color:#7A5E1E;border-radius:99px;padding:7px 14px;font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;transform:rotate(2deg)} .sg-profhead{display:flex;align-items:center;gap:16px;margin-bottom:20px} .sg-profhead img{width:62px;height:62px;border-radius:16px;object-fit:cover;object-position:center 25%} .sg-profhead b{display:block;font:700 20px var(--display);letter-spacing:-.015em} .sg-profhead span{display:block;font:500 13.5px var(--body);color:var(--muted);margin-top:3px} .sg-profbox{background:var(--white);border-radius:14px;padding:16px 18px;margin-bottom:12px} .sg-profbox .l,.sg-profstats .l{font:700 11.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px} .sg-profbox p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0} .sg-profchips{display:flex;gap:6px;flex-wrap:wrap} .sg-profchips span{font:600 12px var(--body);background:var(--warm);border-radius:99px;padding:5px 11px} .sg-profstats{display:flex;gap:12px} .sg-profstats>div{flex:1;background:var(--white);border-radius:14px;padding:14px 18px} .sg-profstats b{font:700 19px var(--display);letter-spacing:-.015em} /* comparison table */ .sg-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--white)} .sg-table{width:100%;border-collapse:collapse;min-width:760px} .sg-table th,.sg-table td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted)} .sg-table thead th{font:700 14px var(--body);color:var(--ink);background:var(--warm)} .sg-table thead th.sg-ok,.sg-table td.sg-ok{background:var(--blue-tint);color:var(--blue);font-weight:700} .sg-table tbody th{font:600 14.5px var(--body);color:var(--ink)} .sg-table tbody tr:last-child th,.sg-table tbody tr:last-child td{border-bottom:0} /* reviews */ .sg-reviewcard{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px 26px 20px;box-shadow:0 18px 36px -22px rgba(20,24,31,.2);overflow:hidden} .sg-reviewcard iframe{display:block;width:100%;min-height:900px} @media (max-width:1060px){.sg-reviewcard iframe{min-height:1400px}} .sg-block .sg-sec-head{align-items:center;margin-bottom:22px} /* full-bleed rhythm for block sections */ .sg-profwrap,.sg-calcwrap,.sg-comparewrap{margin-left:calc(50% - 50vw + var(--sbw)/2);margin-right:calc(50% - 50vw + var(--sbw)/2);padding-left:calc(50vw - 50% - var(--sbw)/2);padding-right:calc(50vw - 50% - var(--sbw)/2)} .sg-profwrap .sg-wrap,.sg-calcwrap .sg-wrap,.sg-comparewrap .sg-wrap{max-width:var(--wrap);margin:0 auto} .sg-comparewrap{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:96px} .sg-comparewrap .sg-tablewrap{background:var(--warm)} /* centred CTA + call strip */ .sg-cta-panel--center{position:relative;overflow:hidden;flex-direction:column;align-items:center;text-align:center;padding:96px 56px} .sg-cta-panel--center::before{content:"";position:absolute;left:-120px;bottom:-160px;width:480px;height:480px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none} .sg-cta-panel--center>*{position:relative;z-index:1} .sg-cta-panel--center h2{font-size:clamp(40px,4.2vw,64px);line-height:1.02} .sg-cta-panel--center .sg-sub{max-width:520px;margin:16px auto 32px} .sg-callstrip{display:flex;justify-content:center;gap:14px 40px;flex-wrap:wrap;margin-top:38px;font:500 14px var(--body);color:var(--blue-lede)} .sg-callstrip span{display:flex;align-items:center;gap:10px} .sg-callstrip i{font-style:normal;width:26px;height:26px;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px} @media (max-width:1060px){ .sg-promise{grid-template-columns:1fr} .sg-offer,.sg-calc,.sg-prof{grid-template-columns:1fr;gap:36px} .sg-offer{padding:48px 30px} .sg-calc,.sg-prof{padding-top:56px;padding-bottom:56px} .sg-calccard{padding:28px 24px} .sg-cta-panel--center{padding:56px 28px} } .sg-guarline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:22px;font:500 13.5px var(--body);color:var(--muted)} .sg-guarline b{color:var(--green)} /* FAQ — centred, sits directly above the CTA */ .sg-faqsec{max-width:none;margin-left:calc(-50vw + 50% + var(--sbw)/2);margin-right:calc(-50vw + 50% + var(--sbw)/2);background:var(--white);border-top:1px solid var(--line);padding:88px max(32px,calc(50vw - 440px - var(--sbw)/2));text-align:center} @media (max-width:900px){.sg-faqsec{margin-left:0;margin-right:0;padding:64px 24px}} .sg-faqsec .sg-sec-head{display:block;text-align:center;margin-bottom:28px} .sg-faqsec .sg-sec-head>div{max-width:none} .sg-faqsec .sg-faq{text-align:left;max-width:880px;margin:0 auto;width:100%} /* Full-bleed panels — match homepage (viewport minus 24px gutters, content capped) */ html{--sbw:0px} body{overflow-x:clip} .sg-bleed{margin-left:calc(-50vw + 50% + 24px + var(--sbw)/2);margin-right:calc(-50vw + 50% + 24px + var(--sbw)/2);padding-left:0;padding-right:0} .sg-bleed .sg-offer,.sg-bleed .sg-cta-panel{border-radius:32px} .sg-bleed .sg-offer{padding-left:max(44px,calc((100% - 1192px)/2));padding-right:max(44px,calc((100% - 1192px)/2))} .sg-cta-panel--center{padding-left:max(44px,calc((100% - 1192px)/2));padding-right:max(44px,calc((100% - 1192px)/2))} @media (max-width:900px){ .sg-bleed{margin-left:0;margin-right:0} .sg-bleed .sg-offer,.sg-cta-panel--center{padding-left:28px;padding-right:28px} } /* Stat band — match approved homepage: full-bleed warm band, no card, no dividers */ .sg-statband{ margin-left:calc(-50vw + 50% + var(--sbw)/2);margin-right:calc(-50vw + 50% + var(--sbw)/2); margin-bottom:0;background:var(--peach);border:0;border-radius:0; padding:46px max(32px,calc(50vw - 658px - var(--sbw)/2)) 42px; gap:36px;column-gap:36px } .sg-stat{padding:0;min-height:0} .sg-stat + .sg-stat::before{display:none} .sg-stat b{font:800 clamp(38px,3.6vw,54px)/1.02 var(--display);letter-spacing:-.03em;color:var(--blue);text-wrap:balance} .sg-stat b span{display:inline!important;font-size:.52em!important;margin:0!important;color:inherit!important;font-weight:700} .sg-stat>span{display:block;font:600 13px var(--body);color:var(--muted);margin-top:9px} @media (max-width:900px){ .sg-statband{margin-left:0;margin-right:0;padding:36px 28px;grid-template-columns:1fr 1fr;row-gap:30px} .sg-stat b{font-size:42px} } @media (max-width:680px){.sg-statband{grid-template-columns:1fr}} /* ===== Testimonial — centred pull quote (matches homepage) ===== */ .sg-testi{max-width:1020px;margin:0 auto;padding:96px 0;text-align:center} .sg-testi q{display:block;quotes:none;font:600 clamp(28px,3.1vw,40px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty} .sg-testi .who{margin-top:26px;font:600 14px var(--body);color:var(--muted)} .sg-testi .who span{display:block;font-weight:500;color:var(--faint);margin-top:4px;font-size:13px} @media (max-width:900px){.sg-testi{padding:64px 0}} /* mega-menu software icons */ .mm-sys{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:center;row-gap:1px} .mm-ico{width:18px;height:18px;flex:none;border-radius:4px;object-fit:contain} .mm-sys-t{display:contents} .mm-sys-t b{grid-column:2} .mm-sys-t span{grid-column:2;display:block} /* prose section — heading left, body right (no half-empty rows). Only splits into two columns when there IS a heading to fill the left one; a headless intro (guide pages) stays a single measured column. */ .sg-prose-sec .sg-body{max-width:none} .sg-prose-sec .sg-body>h2:first-child{margin-bottom:18px} /* headless intro (guide pages): magazine lead + two-column body, so the full measure is used instead of leaving a dead column on the right */ .sg-prose-sec .sg-body:not(:has(>h2:first-child)){max-width:none} .sg-prose-sec .sg-body:not(:has(>h2:first-child))>p:first-child{font:400 22px/1.55 var(--body);color:var(--ink);margin:0 0 26px} @media (min-width:1000px){ .sg-prose-sec .sg-body:not(:has(>h2:first-child)){column-count:1} .sg-prose-sec .sg-body:not(:has(>h2:first-child))>p:first-child{font-size:24px;line-height:1.5;letter-spacing:-.011em} .sg-prose-sec .sg-body:not(:has(>h2:first-child))>p:first-child+p{margin-top:0} .sg-prose-sec .sg-body:not(:has(>h2:first-child)) .gl-lead-rest{column-count:2;column-gap:72px} .sg-prose-sec .sg-body:not(:has(>h2:first-child)) .gl-lead-rest>p:first-child{margin-top:0} } @media (min-width:1000px){ .sg-prose-sec .sg-body:has(>h2:first-child){display:grid;grid-template-columns:.8fr 1.2fr;gap:24px 72px;align-items:start} .sg-prose-sec .sg-body:has(>h2:first-child)>h2:first-child{grid-column:1;margin:0} .sg-prose-sec .sg-body:has(>h2:first-child)>*:not(h2:first-child){grid-column:2} } /* ===== Branded icon set (icons.js) ===== */ .sg-ico{display:inline-block;width:1em;height:1em;font-size:20px;flex:none;vertical-align:-.16em;color:inherit} .sg-ico .a{stroke:var(--blue)} [data-sg-icon]{display:inline-flex;line-height:0} .sg-icochip{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--peach);border:1px solid var(--line);color:var(--ink);flex:none} .sg-icochip .sg-ico{font-size:23px} .sg-icochip--blue{background:var(--blue);border-color:var(--blue);color:#fff} .sg-icochip--blue .sg-ico .a{stroke:var(--tan)} .sg-icochip--tan{background:var(--tan);border-color:#E7CD97;color:#5C4E2C} .sg-icochip--tan .sg-ico .a{stroke:var(--ink)} .sg-icochip--ink{background:var(--ink);border-color:var(--ink);color:#fff} .sg-icochip--ink .sg-ico .a{stroke:var(--green-bright)} .sg-icochip--sm{width:36px;height:36px;border-radius:11px} .sg-icochip--sm .sg-ico{font-size:19px} .mm-ri{display:flex;align-items:center;gap:9px} .mm-ri .sg-ico{font-size:17px;color:var(--faint);transition:color .12s} .mm-ri:hover .sg-ico{color:var(--blue)} .sg-spoke .sg-icochip{margin-bottom:12px} .sg-spoke .sg-icochip+.k{margin-top:0} /* ===== Team cards ===== */ .sg-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} .sg-tcard{min-width:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 36px -30px rgba(20,24,31,.28);transition:transform .18s ease,box-shadow .18s ease} .sg-tcard:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(20,24,31,.35)} .sg-tcard .tph{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 8%;background:var(--warm);border-bottom:1px solid var(--line)} .sg-tcard .tb{padding:20px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0} .sg-tcard .tr{font:700 10.5px var(--body);letter-spacing:.13em;text-transform:uppercase;color:var(--blue)} .sg-tcard .tn{font:800 19px/1.15 var(--display);letter-spacing:-.022em;color:var(--ink)} .sg-tcard p{font:400 13.5px/1.6 var(--body);color:var(--muted);margin:0} .sg-tcard .tl{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);margin-top:16px;font:700 13px var(--body);color:var(--ink);text-decoration:none} .sg-tcard .tl:hover{color:var(--blue)} @media (max-width:1060px){.sg-team{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.sg-team{grid-template-columns:1fr}} /* ===== Process flow diagram ===== */ .sg-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:44px;position:relative} .sg-fstep{position:relative;padding:0 26px;min-width:0} .sg-fstep:first-child{padding-left:0} .sg-fstep:last-child{padding-right:0} .sg-fstep::before{content:"";position:absolute;left:0;top:26px;bottom:8px;width:1px;background:var(--line)} .sg-fstep:first-child::before{display:none} .sg-fhead{display:flex;align-items:center;gap:12px;margin-bottom:18px} .sg-fnum{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .sg-fstep h3{font:800 19px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px} .sg-fstep p{font:400 14.5px/1.62 var(--body);color:var(--muted);margin:0;text-wrap:pretty} .sg-fwho{display:inline-block;margin-top:14px;font:700 12px var(--body);color:var(--blue)} .sg-fnote{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px;padding-top:34px;border-top:1px solid var(--line)} .sg-fnote>div{display:flex;gap:13px;align-items:flex-start} .sg-fnote .sg-ico{font-size:21px;color:var(--ink);margin-top:2px;flex:none} .sg-fnote strong{display:block;font:700 14.5px var(--body);color:var(--ink);margin-bottom:3px} .sg-fnote span{font:400 14px/1.55 var(--body);color:var(--muted)} @media (max-width:1060px){ .sg-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0} .sg-fstep:nth-child(odd){padding-left:0} .sg-fstep:nth-child(odd)::before{display:none} .sg-fnote{grid-template-columns:1fr;gap:18px} } @media (max-width:640px){ .sg-flow{grid-template-columns:1fr;gap:30px} .sg-fstep{padding:0} .sg-fstep::before{display:none} } .mm-person{display:flex;align-items:center;gap:11px;padding:6px 10px;margin:0 -10px;border-radius:10px;text-decoration:none;transition:background .12s} .mm-person:hover{background:var(--peach)} .mm-person img{width:40px;height:40px;border-radius:999px;object-fit:cover;object-position:50% 12%;background:var(--warm);flex:none} .mm-person span{display:flex;flex-direction:column;line-height:1.25;min-width:0} .mm-person b{font:700 13.5px var(--display);letter-spacing:-.01em;color:var(--ink)} .mm-person em{font:400 11.5px var(--body);font-style:normal;color:var(--muted)} /* ===== Edge-to-edge band — background spans the viewport, content stays on grid ===== */ .sg-band{margin-left:calc(-50vw + 50% + var(--sbw)/2);margin-right:calc(-50vw + 50% + var(--sbw)/2);padding-left:calc(50vw - 50% - var(--sbw)/2);padding-right:calc(50vw - 50% - var(--sbw)/2)} .sg-band>.sg-wrap{max-width:var(--wrap);margin:0 auto} /* ===== Role brief survey (shared block: rolebrief) ===== */ .sv-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr) 300px;gap:48px;align-items:start;margin-bottom:44px} .sv-why{display:grid;gap:16px;align-content:start;padding-top:6px} .sv-why>div{padding-left:16px;border-left:2px solid var(--peach)} .sv-why b{display:block;font:800 15px var(--display);letter-spacing:-.015em;color:var(--ink);margin-bottom:2px} .sv-why span{font:400 14px/1.55 var(--body);color:var(--muted)} .sv-prog{background:var(--sand);border:1px solid var(--line);border-radius:20px;padding:26px 24px} .sv-pnum{font:800 46px/1 var(--display);letter-spacing:-.04em;color:var(--ink)} .sv-pnum span{font-size:24px;color:var(--faint)} .sv-plab{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:8px 0 14px} .sv-bar{height:7px;border-radius:99px;background:#E6DFD1;overflow:hidden} .sv-bar i{display:block;height:100%;width:100%;background:var(--green);border-radius:99px} .sv-pdone{font:600 13.5px/1.75 var(--body);color:var(--green);margin-top:16px} .sv-pnext{font:400 13px/1.55 var(--body);color:var(--muted);margin-top:10px;padding-top:12px;border-top:1px solid var(--line)} .sv-form{background:var(--sand);border:1px solid var(--line);border-radius:24px;padding:38px 36px;display:grid;gap:30px} .sv-row{display:grid;gap:12px;min-width:0} .sv-lab{font:700 14.5px var(--body);color:var(--ink)} .sv-lab em{font-style:normal;font-weight:500;color:var(--faint);font-size:13px;margin-left:8px} .sv-in{width:100%;box-sizing:border-box;background:var(--white);border:1px solid var(--line-strong);border-radius:12px;padding:13px 15px;font:400 15px var(--body);color:var(--ink)} .sv-in:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,96,240,.12)} .sv-grp{margin-top:4px} .sv-glab{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px} .sv-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px;margin-bottom:18px} .sv-chk{display:flex;gap:9px;align-items:flex-start;font:400 14.5px/1.45 var(--body);color:var(--ink);cursor:pointer} .sv-chk input{margin:2px 0 0;accent-color:var(--blue);width:16px;height:16px;flex:none} .sv-chk:hover span{color:var(--blue)} .sv-chips,.sv-radios{display:flex;flex-wrap:wrap;gap:9px} .sv-chip{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line-strong);border-radius:99px;padding:9px 15px;font:600 14px var(--body);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s} .sv-chip:hover{border-color:var(--blue)} .sv-chip input{accent-color:var(--blue);width:15px;height:15px;margin:0} .sv-chip:has(input:checked){border-color:var(--blue);background:var(--blue-tint)} .sv-two{display:grid;grid-template-columns:1fr 1fr;gap:30px} .sv-foot{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:6px} @media (max-width:1060px){.sv-top{grid-template-columns:1fr;gap:32px}.sv-checks{grid-template-columns:1fr 1fr}.sv-two{grid-template-columns:1fr}} @media (max-width:620px){.sv-checks{grid-template-columns:1fr}.sv-form{padding:26px 20px}} .sg-btn--dark{background:var(--ink);color:#fff} .sg-btn--dark:hover{background:#000} @media(max-width:1080px){.sv-top{grid-template-columns:1fr}.sv-why{padding-top:0}} /* ===== Guides ===== */ .sg-byline{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .sg-byline img{width:46px;height:46px;border-radius:999px;object-fit:cover;object-position:50% 14%;background:var(--warm);flex:none} .sg-byline b{display:block;font:700 14.5px var(--body);color:var(--ink)} .sg-byline span{display:block;font:400 13px var(--body);color:var(--muted)} .sg-byline em{margin-left:auto;font:600 12px var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .sg-forwho{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .sg-forwho>div{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px 30px} .sg-forwho h3{display:flex;align-items:center;gap:10px;font:800 18px var(--display);letter-spacing:-.018em;color:var(--ink);margin:0 0 14px} .sg-forwho h3 i{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font:700 14px var(--body);font-style:normal;flex:none} .sg-forwho ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .sg-forwho li{font:400 15px/1.6 var(--body);color:var(--muted);padding-left:18px;position:relative} .sg-forwho li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:99px;background:var(--line-strong)} .sg-tasks{display:grid;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white)} .sg-taskrow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;padding:22px 28px;border-bottom:1px solid var(--line)} .sg-taskrow:last-child{border-bottom:0} .sg-taskrow b{font:800 16px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)} .sg-taskrow p{font:400 15px/1.65 var(--body);color:var(--muted);margin:0;text-wrap:pretty} .sg-bound{background:var(--ink);color:#fff;border-radius:22px;padding:38px 40px} .sg-bound h3{font:800 26px/1.22 var(--display);letter-spacing:-.025em;margin:0 0 12px;color:#fff} .sg-bound>p{font:400 16px/1.65 var(--body);color:#C4C9D2;margin:0 0 24px;max-width:820px} .sg-bound ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px} .sg-bound li{font:400 15px/1.6 var(--body);color:#DDE1E7;padding-left:26px;position:relative} .sg-bound li::before{content:"✕";position:absolute;left:0;top:0;color:#FF8B7A;font-weight:700} .sg-bound li b{display:block;color:#fff;font:700 15px var(--body)} .sg-seq{display:grid;gap:0;counter-reset:sq} .sg-seqitem{display:grid;grid-template-columns:64px minmax(0,1fr);gap:26px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start} .sg-seqitem:last-child{border-bottom:0} .sg-seqitem>b{width:44px;height:44px;border-radius:999px;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 17px var(--display)} .sg-seqitem h3{font:800 19px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 7px} .sg-seqitem p{font:400 15px/1.65 var(--body);color:var(--muted);margin:0;text-wrap:pretty} @media (min-width:1100px){ .sg-seq{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px} .sg-seqitem:nth-child(odd):last-child{grid-column:1/-1} } .sg-warn{background:#FFF4E2;border:1px solid #F0D9A8;border-radius:20px;padding:30px 32px} .sg-warn b{display:block;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8A6A18;margin-bottom:10px} .sg-warn h3{font:800 22px/1.25 var(--display);letter-spacing:-.02em;color:#4A3608;margin:0 0 10px} .sg-warn p{font:400 15.5px/1.68 var(--body);color:#6B4E14;margin:0;text-wrap:pretty} @media (min-width:1100px){ .sg-warn{display:grid;grid-template-columns:.7fr 1.3fr;grid-template-rows:min-content 1fr;gap:10px 56px;align-items:start;padding:36px 40px} .sg-warn b{grid-column:1;margin:0} .sg-warn h3{grid-column:1;grid-row:2;margin:0} .sg-warn p{grid-column:2;grid-row:1/3} } .sg-srcs{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .sg-srcs a{font:600 13px var(--body);color:var(--ink);background:var(--white);border:1px solid var(--line-strong);border-radius:11px;padding:9px 14px} .sg-srcs a:hover{border-color:var(--ink)} @media (max-width:900px){ .sg-forwho{grid-template-columns:1fr} .sg-taskrow{grid-template-columns:1fr;gap:8px} .sg-bound ul{grid-template-columns:1fr} .sg-seqitem{grid-template-columns:44px minmax(0,1fr);gap:18px} } /* ===== Mobile hardening ===== */ @media (max-width:640px){ .sg-nav-inner{padding:0 18px;height:64px} .sg-nav-right .sg-btn--sm{display:none} .sg-nav-right{gap:10px} .sg-util-in{padding:7px 18px} .sg-wrap{--pad:18px} .sg-foot-grid a,.sg-foot-grid .sg-foot-link{display:inline-block;padding:7px 0} .sg-2col{grid-template-columns:1fr !important;gap:28px !important;padding:28px !important} .sg-crumb{font-size:12px} } @media (max-width:900px){ .sg-2col{grid-template-columns:1fr;gap:32px} } .sg-2col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} img,svg,video,iframe{max-width:100%} .sg-ctarow{display:flex;gap:14px;flex-wrap:wrap;align-items:center} @media (max-width:640px){.sg-ctarow{gap:12px}.sg-ctarow .sg-btn{width:100%;text-align:center}} .sg-tablewrap{min-width:0;max-width:100%} .sg-body,.sg-prose-sec,.sg-wrap>*{min-width:0} @media (max-width:640px){ .sg-profstats{flex-wrap:wrap} .sg-profstats>div{flex:1 1 calc(50% - 6px);min-width:0} .sg-profcard,.sg-prof>*{min-width:0} .sg-prof{grid-template-columns:minmax(0,1fr)} } @media (max-width:640px){ .sg-foot a,.sg-mob a,.sg-util-in a{min-height:40px;display:inline-flex;align-items:center} .sg-crumb a,.sg-crumb b{min-height:36px;display:inline-flex;align-items:center} } @media (max-width:400px){ .sg-foot-grid{grid-template-columns:1fr} } .sg-foot-grid>*{min-width:0} .sg-foot a{overflow-wrap:anywhere} @media (max-width:400px){ .sg-ckeep{flex-wrap:wrap;gap:8px} .sg-ckeep b{font-size:38px} .sg-herocard .hc-top{flex-wrap:wrap} .sg-offer,.sg-calccard,.sg-offer>*{min-width:0} .sg-offer{grid-template-columns:minmax(0,1fr)} } @media (max-width:400px){ .sg-orow{flex-wrap:wrap;gap:4px} .sg-orow span:last-child{text-align:left;flex:1 1 100%} } @media (max-width:640px){ .sg-tlink,.sg-more{min-height:40px;display:inline-flex;align-items:center} .sg-ctarow .sg-tlink{width:100%;justify-content:center} } .sg-spoke-top{display:flex;align-items:center;gap:10px;margin-bottom:2px} .sg-spoke-ico{width:26px;height:26px;border-radius:6px;flex:none;object-fit:contain;background:var(--white);border:1px solid var(--line);padding:2px} .sg-spoke-top .k{margin:0} /* ===== Guides index (blog-style) ===== */ .gl-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:end;padding:34px var(--pad) 40px} .gl-h1{font:800 clamp(38px,4.6vw,60px)/0.98 var(--display);letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);margin:18px 0 0} .gl-intro{font:400 16.5px/1.7 var(--body);color:var(--muted);margin:0 0 6px;text-wrap:pretty} .gl-filterbar{position:sticky;top:74px;z-index:30;background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .gl-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px var(--pad)} .gl-f{appearance:none;background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;font:600 13.5px var(--body);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .15s ease} .gl-f b{font:700 11.5px var(--body);color:var(--faint)} .gl-f:hover{border-color:var(--ink);color:var(--ink)} .gl-f.on{background:var(--ink);border-color:var(--ink);color:#fff} .gl-f.on b{color:rgba(255,255,255,.6)} .gl-count{margin-left:auto;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .gl-body{padding:44px var(--pad) 76px} .gl-featrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:22px} .gl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .gl-feat,.gl-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease} .gl-feat{padding:30px 32px 26px} .gl-card{padding:24px 26px 22px} .gl-feat:hover,.gl-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(20,24,31,.35)} .gl-feat-top,.gl-card-top{display:flex;align-items:center;gap:10px;margin-bottom:14px} .gl-ico{width:24px;height:24px;border-radius:6px;flex:none;object-fit:contain;background:var(--white);border:1px solid var(--line);padding:2px} .gl-cat{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)} .gl-pin{margin-left:auto;font:700 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--tan-ink);background:var(--tan);border-radius:999px;padding:5px 10px} .gl-feat h3{font:800 26px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;text-wrap:balance} .gl-card h3{font:800 19px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0 0 10px;text-wrap:balance} .gl-feat p{font:400 15.5px/1.65 var(--body);color:var(--muted);margin:0 0 20px} .gl-card p{font:400 14.5px/1.6 var(--body);color:var(--muted);margin:0 0 18px} .gl-by{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .gl-by img{width:28px;height:28px;border-radius:999px;object-fit:cover;object-position:50% 14%;background:var(--warm);flex:none} .gl-by span{font:600 13px var(--body);color:var(--ink)} .gl-by i{margin-left:auto;font:600 11.5px var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .gl-empty{font:400 15.5px/1.7 var(--body);color:var(--muted);padding:36px 0} .gl-empty a{color:var(--blue);font-weight:600} .gl-more{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:40px;align-items:start} .gl-morelinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px} .gl-morelinks a{text-decoration:none;padding:14px 0;border-top:1px solid var(--line)} .gl-morelinks b{display:block;font:700 15px var(--body);color:var(--ink);margin-bottom:3px} .gl-morelinks span{display:block;font:400 13.5px/1.55 var(--body);color:var(--muted)} .gl-morelinks a:hover b{color:var(--blue)} @media (max-width:1000px){ .gl-head{grid-template-columns:1fr;gap:22px;align-items:start} .gl-featrow{grid-template-columns:1fr} .gl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .gl-more{grid-template-columns:1fr;gap:24px} } @media (max-width:640px){ .gl-grid{grid-template-columns:1fr} .gl-morelinks{grid-template-columns:1fr} .gl-feat{padding:24px 22px 20px} .gl-feat h3{font-size:22px} .gl-filterbar{top:64px} .gl-filters{padding:12px var(--pad);gap:7px} .gl-f{padding:7px 12px;font-size:13px} .gl-count{display:none} } /* [hidden] must outrank explicit display on library cards/grids */ .gl-card[hidden],.gl-feat[hidden],.gl-grid[hidden],.gl-featrow[hidden]{display:none !important}