/* BuildingHQ Motion, applied to long-form reading.
   The landing page opens in a navy theatre; an article does not want that. Same tokens, same
   two faces, but a light ground, a single measured column and a header that stays out of the
   way. Self-contained on purpose — homepage.css styles a fixed dark-glass header over a dark
   hero, which would sit wrongly over body copy. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --ink:#091a2f;--body:#0b1220;--muted:#5b6472;--faint:#8a93a1;
  --blue:#1e63e9;--blue-deep:#174fbf;--blue-soft:#eaf1ff;--blue-line:#dbe7ff;
  --paper:#ffffff;--page:#eef2f7;--mist:#f4f6f9;--line:#e4e8ee;--tile-line:#dfe5ee;
  --serif:'Instrument Serif',Georgia,serif;
  font-family:'Instrument Sans',system-ui,sans-serif;color:var(--body);background:var(--paper);
}
*{box-sizing:border-box}
body{min-width:320px;margin:0;text-wrap:pretty;-webkit-font-smoothing:antialiased;background:var(--paper)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.shell{width:min(1100px,calc(100% - 2.5rem));margin-inline:auto}
.skip{position:fixed;top:.5rem;inset-inline-start:.5rem;z-index:99;padding:.6rem;background:#fff;transform:translateY(-150%)}
.skip:focus{transform:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---- Header: light, static, deliberately quiet under a headline ---- */
.rs-head{border-bottom:1px solid var(--line);background:var(--paper)}
.rs-head>div{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:62px}
.rs-head .brand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.rs-head .brand:hover{text-decoration:none}
.rs-head .brand img{border-radius:8px}
.rs-nav{display:flex;align-items:center;gap:1.3rem;font-size:.9rem;font-weight:500}
.rs-nav a{color:var(--muted)}
.rs-nav a:hover{color:var(--ink);text-decoration:none}
.rs-cta{display:inline-flex;align-items:center;min-height:38px;padding:.45rem 1.05rem;border-radius:999px;background:var(--ink);color:#fff!important;font-size:.875rem;font-weight:500}
.rs-cta:hover{background:var(--blue);text-decoration:none}
@media (max-width:700px){.rs-nav .rs-hide{display:none}}
/* At 320px the brand, the nav and the call to action no longer fit on one line, and flex items
   do not shrink below their min-content — so the header pushes the whole document sideways.
   Tighten the gaps, then drop the Resources link, which the breadcrumb and the footer both
   still carry. Measured: without this, scrollWidth exceeds the viewport at 320px. */
@media (max-width:430px){
  .rs-head>div{gap:.75rem}
  .rs-nav{gap:.9rem}
  .rs-cta{padding:.45rem .85rem}
}
@media (max-width:380px){.rs-nav .rs-narrow-hide{display:none}}

/* ---- Hub ---- */
.rs-hero{padding:4.5rem 0 2.5rem}
.eyebrow{margin:0 0 .7rem;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.rs-hero h1{margin:0;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.06;font-weight:500;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.rs-hero h1 i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue)}
.rs-hero p{max-width:62ch;margin:1.1rem 0 0;font-size:1.12rem;line-height:1.62;color:var(--muted)}
.rs-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));padding-bottom:4.5rem}
.rs-card{display:flex;flex-direction:column;gap:.55rem;padding:1.6rem;border:1px solid var(--tile-line);border-radius:16px;background:var(--paper);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.rs-card:hover{border-color:var(--blue-line);box-shadow:0 12px 30px rgba(9,26,47,.07);transform:translateY(-2px);text-decoration:none}
.rs-card b{font-size:1.16rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rs-card span{font-size:.96rem;line-height:1.58;color:var(--muted)}
.rs-card em{margin-top:.35rem;font-size:.8rem;font-style:normal;font-weight:500;color:var(--faint)}

/* ---- Article ---- */
/* One measured column for the whole piece, so the heading, the body and the further-reading
   list share a left edge instead of each finding its own. */
.rs-col{max-width:72ch;margin-inline:auto}
.rs-article{padding:3.2rem 0 1rem}
.rs-crumbs{margin:0 0 1.4rem;font-size:.86rem;color:var(--faint)}
.rs-crumbs a{color:var(--muted)}
.rs-article h1{max-width:20ch;margin:0;font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;font-weight:500;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.rs-standfirst{max-width:62ch;margin:1.2rem 0 0;font-size:1.16rem;line-height:1.6;color:var(--muted)}
.rs-meta{margin:1.5rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--faint)}
.rs-body{padding-bottom:3.5rem;font-size:1.06rem;line-height:1.74}
.rs-body h2{margin:2.9rem 0 .9rem;font-size:1.55rem;line-height:1.22;font-weight:600;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.rs-body h3{margin:2rem 0 .6rem;font-size:1.13rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.rs-body p{margin:0 0 1.15rem}
.rs-body ul,.rs-body ol{margin:0 0 1.25rem;padding-inline-start:1.35rem}
.rs-body li{margin-bottom:.55rem}
.rs-body li::marker{color:var(--faint)}
.rs-body strong{font-weight:600;color:var(--ink)}
.rs-body hr{height:1px;margin:2.6rem 0;border:0;background:var(--line)}

/* A pull-out for the one thing in a section worth remembering after the tab is closed. */
.rs-note{margin:1.8rem 0;padding:1.25rem 1.45rem;border:1px solid var(--blue-line);border-radius:14px;background:var(--blue-soft);font-size:1rem;line-height:1.65}
.rs-note p{margin:0}
.rs-note p+p{margin-top:.7rem}
.rs-note b{color:var(--ink)}

/* Local rules differ by country and we will not pretend otherwise. */
.rs-caution{margin:1.8rem 0;padding:1.1rem 1.35rem;border:1px solid var(--line);border-inline-start:3px solid var(--faint);border-radius:0 12px 12px 0;background:var(--mist);font-size:.97rem;line-height:1.62;color:var(--muted)}
.rs-caution p{margin:0}

.rs-table-wrap{overflow-x:auto;margin:1.8rem 0}
.rs-body table{width:100%;min-width:460px;border-collapse:collapse;font-size:.97rem}
.rs-body th,.rs-body td{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.rs-body th{font-weight:600;color:var(--ink);white-space:nowrap}
.rs-body td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Closing product note. Honest and small: the article stands without it. */
.rs-product{margin:3rem 0 0;padding:1.7rem;border:1px solid var(--tile-line);border-radius:16px;background:var(--mist)}
.rs-product b{display:block;margin-bottom:.45rem;font-size:1.06rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.rs-product p{margin:0 0 1rem;font-size:1rem;line-height:1.62;color:var(--muted)}
.rs-product a{font-weight:500}

.rs-next{padding-bottom:4.5rem}
.rs-next h2{margin:0 0 1.1rem;font-size:1.2rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.rs-next ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rs-next a{display:block;padding:1rem 1.2rem;border:1px solid var(--tile-line);border-radius:12px;font-size:.98rem;font-weight:500;color:var(--ink)}
.rs-next a:hover{border-color:var(--blue-line);background:var(--mist);text-decoration:none}

/* ---- Footer ---- */
.rs-foot{border-top:1px solid var(--line);background:var(--mist)}
.rs-foot>div{display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center;justify-content:space-between;padding:2.2rem 0;font-size:.9rem;color:var(--muted)}
.rs-foot nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.rs-foot a{color:var(--muted)}
.rs-foot a:hover{color:var(--ink)}