/* register.css - CAQA RTO 45459 register theme
   Design language taken from caqa-executive-register: parchment ground, navy
   ink, brass rule, Cormorant Garamond display against Inter text.
   Scoped under .rg so the existing cqft / cqf3 footer keeps its own styling. */
.rg{
  --paper:#fffefb; --parch:#f7f4ed; --parch-2:#f1ece1;
  --ink:#14171f; --ink-2:#3d434f;
  --mute:#5c6170;         /* 5.6:1 on parchment */
  --navy:#132a5e; --navy-2:#1b3a7d;
  --brass:#a8874a;        /* rules, borders, decoration only */
  --brass-ink:#806738;    /* text: 4.88:1 on parchment, 5.32:1 on paper */
  --brass-l:#c9ae74;      /* text on the dark navy ground */
  --red:#b3202a; --line:#e0dacd; --line-2:#ece7db;
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --shell:1280px; --ease:cubic-bezier(.22,.61,.36,1);
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.rg *,.rg *::before,.rg *::after{box-sizing:border-box}
.rg h1,.rg h2,.rg h3,.rg h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;color:var(--navy)}
.rg p{margin:0}
.rg a{color:inherit}
.rg img{max-width:100%;display:block}
.rg .shell{max-width:var(--shell);margin:0 auto;padding:0 40px}
@media(max-width:760px){.rg .shell{padding:0 22px}}

/* ---- top rule + masthead ---- */
.rg .rule-top{background:var(--ink);color:#cfd3dc;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.rg .rule-in{max-width:var(--shell);margin:0 auto;padding:9px 40px;
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.rg .rule-in a{color:var(--brass-l);text-decoration:none;border-bottom:1px solid rgba(201,174,116,.4)}
.rg .mast{position:sticky;top:0;z-index:100;background:rgba(255,254,251,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.rg .mast-in{max-width:var(--shell);margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;gap:30px}
.rg .mast-logo img{height:42px;width:auto}
.rg .nav{display:flex;gap:26px;flex:1;justify-content:center;flex-wrap:wrap}
.rg .nav a{font-size:13px;letter-spacing:.02em;color:var(--ink-2);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;transition:.25s var(--ease)}
.rg .nav a:hover{color:var(--navy);border-bottom-color:var(--brass)}
/* Below the desktop breakpoint the masthead stacks and the nav becomes a
   single swipeable row. It is never hidden: there is no drawer on this page,
   so hiding it would leave small screens with no navigation at all. */
@media(max-width:1040px){
  .rg .mast-in{flex-wrap:wrap;gap:14px 18px;padding:14px 22px}
  .rg .mast-logo{flex:1}
  .rg .mast-in>.btn{order:2}
  .rg .nav{order:3;flex:1 0 100%;justify-content:flex-start;gap:20px;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-top:1px solid var(--line);padding-top:10px}
  .rg .nav::-webkit-scrollbar{display:none}
  .rg .nav a{white-space:nowrap;font-size:12.5px}
}
@media(max-width:560px){
  .rg .mast-logo img{height:34px}
  .rg .mast-in>.btn{padding:11px 16px;font-size:12px}
}
.rg .btn{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;
  letter-spacing:.03em;padding:13px 24px;text-decoration:none;border:1px solid var(--navy);
  background:var(--navy);color:#fff;transition:.25s var(--ease);cursor:pointer}
.rg .btn:hover{background:var(--navy-2);border-color:var(--navy-2)}
.rg .btn-ghost{background:transparent;color:var(--navy)}
.rg .btn-ghost:hover{background:var(--navy);color:#fff}

/* ---- hero ---- */
.rg .hero-plate{position:relative;height:clamp(340px,40vw,520px);overflow:hidden;background:var(--navy)}
.rg .hero-plate img{width:100%;height:100%;object-fit:cover;opacity:.82}
.rg .hero-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,45,.42) 0%,rgba(10,20,45,.20) 42%,rgba(255,254,251,.96) 100%)}
.rg .hero-card{position:relative;max-width:var(--shell);margin:-150px auto 0;padding:0 40px;z-index:2}
@media(max-width:760px){.rg .hero-card{margin-top:-90px;padding:0 22px}}
.rg .hero-inner{background:var(--paper);border:1px solid var(--line);padding:clamp(30px,4vw,60px);
  box-shadow:0 30px 70px -50px rgba(19,42,94,.5)}
.rg .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass-ink);margin-bottom:20px}
.rg .hero-inner h1{font-size:clamp(38px,5.6vw,74px);letter-spacing:-.022em;max-width:14em}
.rg .hero-lede{font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);max-width:31em;margin-top:24px}
.rg .hero-acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.rg .hero-index{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin-top:44px;border:1px solid var(--line)}
@media(max-width:760px){.rg .hero-index{grid-template-columns:repeat(2,1fr)}}
.rg .hero-index div{background:var(--paper);padding:22px 20px}
.rg .hero-index b{display:block;font-family:var(--serif);font-size:38px;color:var(--navy);line-height:1}
.rg .hero-index span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-top:9px}

/* ---- sections ---- */
.rg .sec{padding:clamp(64px,8vw,108px) 0}
.rg .sec-parch{background:var(--parch)}
.rg .sec-ink{background:var(--navy);color:#e8ecf5}
.rg .sec-ink h2,.rg .sec-ink h3{color:#fff}
.rg .sec-ink .lede,.rg .sec-ink p{color:#c3cde2}
.rg .sec-ink .eyebrow,.rg .sec-ink .folio i{color:var(--brass-l)}
.rg .folio{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.rg .folio i{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--brass-ink);font-style:normal}
.rg .folio-line{flex:1;height:1px;background:var(--line)}
.rg .sec-ink .folio-line{background:rgba(255,255,255,.18)}
.rg .head{max-width:820px;margin-bottom:52px}
.rg .head h2{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.02em}
.rg .lede{font-size:17px;color:var(--ink-2);margin-top:20px;max-width:31em}

/* ---- statement ---- */
.rg .statement{position:relative;padding:clamp(70px,9vw,120px) 0;background:var(--parch);
  text-align:center;overflow:hidden}
.rg .statement-alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rg .statement .shell{position:relative;z-index:2}
.rg .statement q{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5.4vw,68px);line-height:1.05;letter-spacing:-.022em;
  color:var(--navy);max-width:13em;margin:0 auto;quotes:none}
.rg .statement p{margin:30px auto 0;max-width:30em;font-size:17px;color:var(--ink-2)}
.rg .statement .rule{width:56px;height:2px;background:var(--brass);margin:0 auto 30px}

/* The engraved plate. A credential's own visual language: a guilloche rosette
   under ruled lines, a warm parchment wash and a vignette that pulls the eye to
   the centre. All of it decorative, so it is aria-hidden and pointer-inert. */
.rg .statement-plate{position:relative;
  background:radial-gradient(120% 90% at 50% 42%,#fffdf7 0%,var(--parch) 46%,var(--parch-2) 100%)}
.rg .plate-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rg .plate-fx::before{content:"";position:absolute;left:50%;top:50%;
  width:min(148vw,1180px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:url("../img/guilloche.svg") center/contain no-repeat;
  opacity:.20;animation:rg-rotate 240s linear infinite}
/* fine ruled lines, the way a certificate blank is printed */
.rg .plate-fx::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(19,42,94,.05) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 50%,#000 20%,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 50%,#000 20%,transparent 78%)}
.rg .plate-edge{position:absolute;inset:clamp(14px,2.4vw,30px);pointer-events:none;
  border:1px solid rgba(168,135,74,.34);
  box-shadow:inset 0 0 0 4px rgba(255,254,251,.5),inset 0 0 0 5px rgba(168,135,74,.16)}
.rg .plate-edge span{position:absolute;width:11px;height:11px;border:1px solid var(--brass);opacity:.6}
.rg .plate-edge span:nth-child(1){top:-6px;left:-6px;border-right:0;border-bottom:0}
.rg .plate-edge span:nth-child(2){top:-6px;right:-6px;border-left:0;border-bottom:0}
.rg .plate-edge span:nth-child(3){bottom:-6px;left:-6px;border-right:0;border-top:0}
.rg .plate-edge span:nth-child(4){bottom:-6px;right:-6px;border-left:0;border-top:0}
.rg .plate-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 68% at 50% 50%,transparent 42%,rgba(19,42,94,.09) 100%)}
@keyframes rg-rotate{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rg .plate-fx::before{animation:none}}

/* the red lift in the hero headline */
.rg .hl{color:var(--red);font-style:italic}

/* ---- first aid ---- */
.rg .fa-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:start}
@media(max-width:900px){.rg .fa-grid{grid-template-columns:1fr}}
.rg .fa-units{border-top:1px solid var(--line);margin-top:6px}
.rg .sec-ink .fa-units,.rg .sec-ink .fa-unit{border-color:rgba(255,255,255,.16)}
.rg .fa-unit{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:16px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.rg .fa-unit code{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--brass-ink)}
.rg .fa-unit span{font-size:15px}
.rg .fa-media{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rg .fa-media figure{margin:0;overflow:hidden;border:1px solid var(--line)}
.rg .fa-media figure:first-child{grid-column:1/-1}
.rg .fa-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;
  transition:transform .7s var(--ease)}
.rg .fa-media figure:hover img{transform:scale(1.04)}

/* ---- decision environment / register ---- */
.rg .tools{display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  justify-content:space-between;margin-bottom:26px}
.rg .search{position:relative;flex:1;min-width:260px}
.rg .search input{width:100%;font-family:var(--sans);font-size:15px;padding:14px 16px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.rg .search input:focus{outline:none;border-color:var(--brass)}
.rg .chips{display:flex;flex-wrap:wrap;gap:8px}
.rg .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  cursor:pointer;transition:.2s var(--ease)}
.rg .chip:hover{border-color:var(--brass)}
.rg .chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.rg .reg-wrap{border:1px solid var(--line);background:var(--paper);overflow-x:auto}
.rg table.reg{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
/* The schedule runs to 35 rows. A sticky header keeps the column meanings on
   screen once the reader is past the first few, which is the whole point of a
   register you are meant to compare across. */
.rg table.reg th{position:sticky;top:0;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#5c6170;text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);
  background:var(--parch);white-space:nowrap}   /* 5.6:1 at 10px */
/* AQF band subheads, so 35 rows read as five groups rather than one list */
.rg table.reg tr.grp th{position:sticky;top:41px;z-index:2;
  background:var(--paper);color:var(--navy);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);
  padding:12px 18px}
.rg table.reg tr.grp th b{color:var(--brass-ink);font-weight:400;margin-left:8px}
/* a persistent summary of what is filtered, so context is never lost */
.rg .reg-active{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;
  min-height:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.rg .reg-active .tag{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border:1px solid var(--brass);color:var(--navy);background:rgba(168,135,74,.09)}
.rg .reg-active .tag button{border:0;background:none;cursor:pointer;color:var(--brass-ink);
  font:inherit;line-height:1;padding:0}
.rg .reg-active .clear{margin-left:auto;border:0;background:none;cursor:pointer;
  color:var(--brass-ink);font:inherit;text-transform:uppercase;letter-spacing:.1em;
  border-bottom:1px solid var(--brass)}
.rg table.reg td{padding:16px 18px;border-bottom:1px solid var(--line-2);font-size:14.5px;vertical-align:top}
.rg table.reg tr:last-child td{border-bottom:0}
.rg table.reg tbody tr:hover{background:var(--parch-2)}
.rg table.reg td.c{font-family:var(--mono);font-size:12.5px;color:var(--brass-ink);white-space:nowrap}
.rg table.reg td.t a{color:var(--navy);text-decoration:none;font-weight:500}
.rg table.reg td.t a:hover{text-decoration:underline;text-underline-offset:3px}
.rg .reg-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin-top:16px}
.rg .empty{padding:44px 18px;text-align:center;color:var(--mute);font-size:15px}

/* ---- cards / audience / method ---- */
.rg .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.rg .cards>div{background:var(--paper);padding:32px 28px}
.rg .sec-parch .cards>div{background:var(--parch)}
.rg .cards h3{font-size:23px;margin-bottom:12px}
.rg .cards p{font-size:15px;color:var(--ink-2)}
.rg .cards .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--brass-ink);display:block;margin-bottom:16px}
.rg .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:900px){.rg .split{grid-template-columns:1fr}}
.rg .steps{border-top:1px solid rgba(255,255,255,.18)}
.rg .steps div{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:44px 1fr;gap:14px}
.rg .steps b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--brass-l);font-weight:400}
.rg .steps p{font-size:15px}
.rg .steps strong{display:block;font-family:var(--serif);font-size:20px;color:#fff;margin-bottom:5px;font-weight:500}

/* ---- seal / verify ---- */
.rg .seal{width:88px;height:88px;color:var(--brass);flex:none}
.rg .verify{display:flex;gap:clamp(26px,4vw,56px);align-items:center;flex-wrap:wrap}
.rg .verify-copy{flex:1;min-width:280px}
.rg .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:34px}
.rg .facts>div{background:var(--paper);padding:22px}
.rg .facts b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute);margin-bottom:8px;font-weight:400}
.rg .facts span{font-size:15px;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rg *{transition:none!important;animation:none!important}}

/* ============================================================================
   cq-rtofix-02sep: owner feedback pass, 2 September 2026.
   Adds the skill set category tiles and their pages, turns the recognition
   steps into a two by two grid, and gives the flat card grids a shaded,
   lifting treatment. Appended as one block so it can be reverted cleanly.
   ========================================================================= */

/* ---- skill set category tiles (homepage) --------------------------------
   Three across so the nine categories fill three complete rows. The previous
   auto-fit grid left one empty cell in the last row, which read as a broken
   tile beside Service Industries. */
.rg .ss-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:8px}
@media(max-width:980px){.rg .ss-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.rg .ss-tiles{grid-template-columns:1fr}}

.rg .ss-tile{display:flex;flex-direction:column;gap:12px;
  background:var(--paper);padding:30px 28px 26px;text-decoration:none;
  position:relative;isolation:isolate;
  transition:background .28s var(--ease),transform .28s var(--ease),
             box-shadow .28s var(--ease)}
.rg .sec-parch .ss-tiles{background:var(--line)}
.rg .sec-parch .ss-tile{background:var(--parch)}

/* The shade is a pseudo-element rather than a background change, so the tile
   can fade it in without the text colour transitioning with it. */
.rg .ss-tile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(160deg,var(--parch-2) 0%,var(--paper) 62%);
  transition:opacity .28s var(--ease)}
.rg .ss-tile::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease)}
.rg .ss-tile h3{font-size:23px;letter-spacing:-.01em}
.rg .ss-tile p{font-size:14.5px;color:var(--ink-2);flex:1}
.rg .ss-go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-ink)}
.rg .ss-go svg{width:15px;height:15px;transition:transform .28s var(--ease)}

.rg .ss-tile:hover,.rg .ss-tile:focus-visible{transform:translateY(-3px);
  box-shadow:0 26px 44px -34px rgba(19,42,94,.55)}
.rg .ss-tile:hover::before,.rg .ss-tile:focus-visible::before{opacity:1}
.rg .ss-tile:hover::after,.rg .ss-tile:focus-visible::after{transform:scaleX(1)}
.rg .ss-tile:hover .ss-go svg,.rg .ss-tile:focus-visible .ss-go svg{transform:translateX(5px)}
.rg .ss-tile:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

/* ---- recognition steps, two across and two below ------------------------
   Was a single stacked column of four rules, which ran long and read as a
   list of small print. */
.rg .steps-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:680px){.rg .steps-quad{grid-template-columns:1fr}}
.rg .steps-quad>div{position:relative;padding:26px 26px 28px;border-bottom:0;
  background:rgba(255,255,255,.045);
  transition:background .3s var(--ease)}
.rg .steps-quad>div::after{content:"";position:absolute;left:26px;bottom:0;
  width:34px;height:2px;background:var(--brass-l);opacity:0;
  transition:opacity .3s var(--ease),width .3s var(--ease)}
.rg .steps-quad>div:hover{background:rgba(255,255,255,.085)}
.rg .steps-quad>div:hover::after{opacity:.85;width:56px}
.rg .steps-quad b{display:block;margin-bottom:10px}
.rg .steps-quad p{font-size:15px}

/* ---- the same lift on the plain card grids ------------------------------
   Owner asked whether the shading could be used in other areas: this applies
   it to the "who this is for" cards, which use the same .cards grid. */
.rg .cards>div{position:relative;transition:background .28s var(--ease),
  transform .28s var(--ease),box-shadow .28s var(--ease)}
.rg .cards>div::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease)}
.rg .cards>div:hover{transform:translateY(-3px);
  background:linear-gradient(160deg,var(--parch-2) 0%,var(--paper) 62%);
  box-shadow:0 26px 44px -34px rgba(19,42,94,.5)}
.rg .sec-parch .cards>div:hover{background:linear-gradient(160deg,var(--parch-2) 0%,var(--parch) 62%)}
.rg .cards>div:hover::after{transform:scaleX(1)}

/* ---- certificate verification, given its own weight --------------------- */
.rg .sec-verify{background:var(--parch);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.rg .sec-verify .verify-panel{background:var(--paper);border:1px solid var(--line);
  padding:clamp(28px,3.4vw,48px);box-shadow:0 30px 70px -56px rgba(19,42,94,.55)}
.rg .verify-lead{display:flex;gap:clamp(20px,3vw,42px);align-items:flex-start;flex-wrap:wrap}
.rg .verify-lead .seal{flex:0 0 auto;width:clamp(64px,7vw,92px);height:auto;color:var(--brass)}
.rg .verify-lead>div{flex:1 1 320px;min-width:0}
.rg .verify-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:32px}
@media(max-width:760px){.rg .verify-steps{grid-template-columns:1fr}}
.rg .verify-steps>div{background:var(--parch);padding:22px 22px 24px;
  transition:background .28s var(--ease)}
.rg .verify-steps>div:hover{background:var(--parch-2)}
.rg .verify-steps b{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);margin-bottom:9px}
.rg .verify-steps p{font-size:14.5px;color:var(--ink-2)}

/* ---- skill set category pages ------------------------------------------- */
.rg .ss-head{padding:clamp(38px,5vw,72px) 0 clamp(24px,3vw,38px);background:var(--parch);
  border-bottom:1px solid var(--line)}
.rg .ss-head h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.02em;margin-bottom:18px}
.rg .ss-head .lede{font-size:clamp(16px,1.3vw,19px);color:var(--ink-2);max-width:46em}
.rg .ss-note{margin-top:18px;font-size:14.5px;color:var(--mute);max-width:52em;
  padding-left:16px;border-left:2px solid var(--brass)}
.rg .ss-crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:22px}
.rg .ss-crumb a{color:var(--brass-ink);text-decoration:none;border-bottom:1px solid var(--line)}
.rg .ss-crumb a:hover{border-bottom-color:var(--brass)}
.rg .ss-crumb span{margin:0 8px;opacity:.55}
.rg .ss-crumb b{color:var(--ink-2);font-weight:400}
.rg table.ss-table{min-width:520px}
.rg table.ss-table td.ss-code{font-family:var(--mono);font-size:12.5px;
  color:var(--brass-ink);white-space:nowrap;width:1%}
.rg .ss-nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.rg .ss-nav a{color:var(--brass-ink);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:3px}
.rg .ss-nav a:hover{border-bottom-color:var(--brass)}

@media(prefers-reduced-motion:reduce){
  .rg .ss-tile,.rg .ss-tile::before,.rg .ss-tile::after,.rg .ss-go svg,
  .rg .cards>div,.rg .cards>div::after,.rg .steps-quad>div,
  .rg .steps-quad>div::after,.rg .verify-steps>div{transition:none}
  .rg .ss-tile:hover,.rg .cards>div:hover{transform:none}
}