/* renuzy free resources: shared styles for /resources and every resource page.
   The header, footer and tokens are copied from index.html, so a brand change
   there has to be copied here too. Resource styles follow at the end. */
:root{
  --surface:#ffffff; --surface-cloud:#f5f5f8;
  --ink:#0b0b14; --ink-muted:#4a4a5a; --on-ink:#ffffff;
  --coral:#ff4d3d; --on-coral:#0b0b14; --coral-text:#cc2b1c; --coral-soft:rgba(255,77,61,.10); --card-edge:#dcdce6; --coral-on-ink:#ff7a6b;
  --sunflower:#ffc21a; --on-sunflower:#0b0b14;
  --lagoon:#00b3a4; --lagoon-text:#00796f;
  --cobalt:#2b5bff; --border:#e4e4ec; --border-strong:#8a8a9c;
  /* The renuzy name is one colour everywhere it is not the logo. Coral is the
     identity marker; it is deliberately NOT the button colour. */
  --rz-name:#ff6a58;
  --focus-ring:var(--cobalt);
  --band:#0b0b14; --band-fg:#fafafa; --band-muted:#cfcfdd; --band-line:#2a2a38; --band-card:#16161f;
  --font-display:"Bricolage Grotesque","Arial Black","Helvetica Neue",Arial,sans-serif;
  --font-sans:Manrope,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:36px; --radius-pill:999px;
  --gutter:16px; --maxw:1120px; --header-h:102px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#0b0b14; --surface-cloud:#16161f;
    --ink:#f5f5f8; --ink-muted:#c6c6d8; --on-ink:#0b0b14;
    --coral-text:#ff7a6b; --lagoon-text:#33d1c1; --cobalt:#7c9cff; --coral-soft:rgba(255,122,107,.15);
    --border:#2a2a38; --border-strong:#6e6e82; --card-edge:#3a3a4c;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface:#0b0b14; --surface-cloud:#16161f;
  --ink:#f5f5f8; --ink-muted:#c6c6d8; --on-ink:#0b0b14;
  --coral-text:#ff7a6b; --lagoon-text:#33d1c1; --cobalt:#7c9cff; --coral-soft:rgba(255,122,107,.15);
  --border:#2a2a38; --border-strong:#6e6e82; --card-edge:#3a3a4c;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font:400 17.5px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:clamp(46px,8.5vw,76px);line-height:.98;letter-spacing:-.04em}
h2{font-size:clamp(32px,5vw,52px);line-height:1.06;letter-spacing:-.04em}
h3{font-size:22px;line-height:1.25;letter-spacing:-.02em;font-weight:600}
p{margin:0}
a{color:var(--coral-text)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
/* Brand kit: "Labels and kickers: Manrope 800 at 14px, sentence case, never
   letter-spaced capitals." A short rule carries the eye instead of tracking. */
.kicker{display:flex;align-items:center;gap:10px;font:700 14.5px/1.3 var(--font-sans);letter-spacing:0;color:var(--coral-text)}
.kicker::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:currentColor}
.lede{font-size:20px;line-height:1.6;color:var(--ink-muted);max-width:60ch;font-weight:400}
.tnum{font-variant-numeric:tabular-nums}
/* Brand kit: Bricolage Grotesque is for "wordmark, headlines, big numbers".
   Every figure on this page is an argument, so every figure is set in it. */
.fig{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:var(--radius-pill);border:0;font:700 16px/1 var(--font-sans);letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:transform .15s ease-out,background .15s ease-out}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:#12121c;color:#fafafa;font-weight:700}
.btn--primary:hover{background:#000000}
.top .btn--primary,.hero .btn--primary,.calc .btn--primary,.lock .btn--primary,.foot .btn--primary{background:#fafafa;color:#0b0b14}
.top .btn--primary:hover,.hero .btn--primary:hover,.calc .btn--primary:hover,.lock .btn--primary:hover,.foot .btn--primary:hover{background:#ffffff}
.btn--ink{background:var(--ink);color:var(--on-ink)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}*{animation:none!important;transition:none!important}}
.top{position:sticky;top:0;z-index:40;background:var(--band);border-bottom:1px solid transparent;transition:border-color .2s ease-out,background .2s ease-out}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--coral) 0%,var(--sunflower) 46%,var(--lagoon) 100%)}
.top[data-scrolled]{background:rgba(11,11,20,.88);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom-color:rgba(255,255,255,.08)}
@supports not (backdrop-filter:blur(2px)){.top[data-scrolled]{background:var(--band)}}
.top .bar{display:flex;align-items:center;gap:18px;min-height:var(--header-h)}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;text-decoration:none;border-radius:8px}
.brand svg{height:56px;width:auto;display:block;flex:none}
.brand-tag{display:block;font:700 15.5px/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--rz-name);white-space:nowrap;padding-left:2px}
@media(max-width:900px){.brand{gap:3px}.brand-tag{font-size:13.5px}}
@media(max-width:620px){.brand svg{height:40px}.brand-tag{font-size:12.5px}}
.top .spacer{flex:1}
.top .btn{min-height:44px;padding:0 20px;font-size:15px;white-space:nowrap;gap:0}
@media(max-width:620px){.top .hide-s{display:none}.top .bar{gap:10px}}
@media(max-width:700px){:root{--header-h:76px}}
.foot{background:var(--band);color:var(--band-muted);padding-block:48px;font:600 14px/1.6 var(--font-sans)}
.foot svg{height:34px;width:auto;display:block}
.foot-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:24px}
.foot-tag{font:700 15px/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--rz-name);padding-left:2px}
@media(max-width:620px){.foot-tag{font-size:14px}}
.foot a{color:var(--band-muted)}
.foot .colsf{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between}
.foot{position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--lagoon) 0%,var(--sunflower) 50%,var(--coral) 100%)}
.disclaimer{margin-top:28px;padding-top:20px;border-top:1px solid var(--band-line);font-size:13px;max-width:72ch}
/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--sunflower);color:var(--on-sunflower);padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;font:700 15px/1 var(--font-sans);text-decoration:none}
.skip:focus{left:0}

/* ---------- header nav ---------- */
.toplink{color:var(--band-muted);text-decoration:none;font:600 15px/1 var(--font-sans);letter-spacing:-.01em;padding:10px 4px;border-radius:6px;transition:color .15s ease-out}
.toplink:hover{color:var(--band-fg)}
@media(max-width:1000px){.hide-m{display:none}}

/* ---------- phone menu ----------
   Below 1001px the five menu links (Features, Pricing, Free resources, FAQ,
   About) drop out of the bar into this panel; the call to action stays in the
   bar at every width. The menu is the same on every page, in selling order,
   and the page you are on is marked. Between 1001px and 1100px the language
   switch sits above the header; from 1101px it joins the bar, and the bar
   gap tightens so the Spanish labels still fit. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.menub{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;border:1px solid var(--band-line);background:rgba(255,255,255,.04);color:var(--band-fg);border-radius:12px;cursor:pointer;transition:background .15s ease-out}
.menub:hover{background:rgba(255,255,255,.10)}
.menub svg{width:22px;height:22px;display:block}
.mnav{display:none;border-top:1px solid var(--band-line);background:var(--band);padding:6px var(--gutter) 18px;max-height:calc(100dvh - var(--header-h));overflow-y:auto;-webkit-overflow-scrolling:touch}
.mnav a{display:block;padding:13px 2px;color:var(--band-fg);text-decoration:none;font:700 17px/1.2 var(--font-sans);border-bottom:1px solid var(--band-line)}
.mnav a:hover{color:var(--coral-on-ink)}
.mnav .rz-nav{text-transform:lowercase}
.mnav .btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding:0 20px;border-bottom:0;color:var(--on-coral);font-size:16px}
.mnav .btn:hover{color:var(--on-coral)}
@media(max-width:1000px){.menub{display:inline-flex}.mnav{display:block}.mnav[hidden]{display:none}}
.toplink[aria-current]{color:var(--band-fg)}
.mnav a[aria-current]{color:var(--coral-on-ink)}
.mnav .lang--menu{justify-content:flex-start;gap:10px;padding:6px 2px;border-bottom:1px solid var(--band-line);font-size:16px}
.mnav .lang--menu a{display:inline-block;padding:12px 4px;border:0;font:600 16px/1 var(--font-sans);color:var(--band-muted);text-decoration:underline;text-underline-offset:3px}
.mnav .lang--menu a:hover{color:var(--band-fg)}
@media(min-width:1001px){.top .bar{gap:14px}}
@media(min-width:1160px){.lang--bar{margin-left:12px}}
@media(max-width:620px){.top .btn{min-height:38px;padding:0 14px;font-size:13px}.top .cta-verb{display:none}}
@media(max-width:380px){.top .btn{min-height:36px;padding:0 11px;font-size:12.5px}}
.foot .colsf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:start}
@media(max-width:760px){.foot .colsf{grid-template-columns:1fr 1fr}.foot .fcol--wide{grid-column:1 / -1}}
@media(max-width:460px){.foot .colsf{gap:24px 20px}.fcol--wide{max-width:none}}
.fcol{display:flex;flex-direction:column;gap:9px;min-width:0}
.fcol--wide{gap:10px;max-width:40ch}
.vet-line{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px}
.vdot{color:var(--band-muted);opacity:.5}
.vet{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.vet svg{flex:none;color:var(--coral-on-ink)}
.foot h3{margin:0 0 6px;font:700 13.5px/1.2 var(--font-sans);letter-spacing:0;color:var(--band-fg)}
.fcol a{color:var(--band-muted);text-decoration:none;transition:color .15s ease-out}
.fcol a:hover{color:var(--band-fg);text-decoration:underline;text-underline-offset:3px}
.fmuted{color:#8b8b9f}
.social{margin-top:34px;padding-top:24px;border-top:1px solid var(--band-line)}
.social ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:560px){
  .social{margin-top:26px;padding-top:20px}
  .social ul{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .social a{width:100%;padding:0 16px}
  .foot{padding-block:36px}
  .foot .colsf{gap:26px}
  .disclaimer{margin-top:24px}
}
.social a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 18px;border-radius:var(--radius-pill);border:1px solid var(--band-line);background:rgba(255,255,255,.04);color:var(--band-fg);text-decoration:none;font:700 14px/1 var(--font-sans);transition:background .15s ease-out,border-color .15s ease-out,transform .15s ease-out}
.social a:hover{background:var(--coral);border-color:var(--coral);color:var(--on-coral);transform:translateY(-1px)}
/* the six monochrome marks follow the link colour, so they invert with the pill */
.social .si{width:18px;height:18px;flex:none;display:block}
/* LinkedIn ships a filled tile rather than a plain glyph, and their terms do not
   allow recolouring it. Both official variants are stacked and cross faded, so
   there is no load flash on first hover, and it sits slightly smaller than the
   others because a solid tile reads heavier than an outline mark at the same size. */
.li-mark{position:relative;width:16px;height:15px;flex:none;display:block}
.li-mark img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .15s ease-out}
.li-mark .li-b{opacity:0}
.social a:hover .li-mark .li-w{opacity:0}
.social a:hover .li-mark .li-b{opacity:1}
@media(prefers-reduced-motion:reduce){.li-mark img{transition:none}}
.rz{font-weight:700;color:var(--rz-name);letter-spacing:-.005em}
/* these sections are dark in both themes, so the name takes its light-surface
   value there. Same hue, legible on either background. */
.hero .rz,.calc .rz,.prev .rz,.lock .rz,.foot .rz,.dash .rz{color:var(--rz-name)}
/* the two places it must not be coloured: inside a display headline, where a
   single tinted word reads as a mistake, and on the member card, which wears
   the club's colours rather than ours. */
h1 .rz,h2 .rz{color:var(--rz-name)}
.wcard .rz{color:inherit}
.lang{display:flex;align-items:center;gap:8px;font:600 14.5px/1 var(--font-sans);color:var(--band-muted);white-space:nowrap;flex:none}
.lang a{color:var(--band-muted);text-decoration:none;padding:10px 2px;border-radius:6px;transition:color .15s ease-out}
.lang a:hover{color:var(--band-fg);text-decoration:underline;text-underline-offset:3px}
.lang [aria-current]{color:var(--band-fg)}
.lang-sep{opacity:.45}
.langbar{background:var(--band);border-bottom:1px solid var(--band-line)}
.lang--bar{display:none}
.toplink{white-space:nowrap}
.langbar .lang{justify-content:flex-end;min-height:38px;font-size:14px}
@media(min-width:1101px){.langbar{display:none}.lang--bar{display:flex}}

/* ===================== resources ===================== */
.top .cta-alt{display:none}
@media(max-width:620px){.top .cta-alt{display:inline}}
.btn .fmt{white-space:nowrap}
@media(max-width:560px){.dls .btn[download]{width:100%;justify-content:flex-start;height:auto;padding:12px 18px;line-height:1.25;text-align:left}.dls .btn[download] .fmt{margin-left:auto}}
.toplink[aria-current]{color:var(--band-fg)}
.rhero{background:var(--band);color:var(--band-fg);position:relative;overflow:hidden;padding-block:clamp(28px,5vw,56px) clamp(30px,4.5vw,52px)}
.rhero::after{content:"";position:absolute;inset:auto -20% -70% 35%;height:520px;pointer-events:none;
  background:radial-gradient(closest-side at 30% 40%,rgba(255,77,61,.22),transparent 72%),
             radial-gradient(closest-side at 72% 30%,rgba(255,194,26,.14),transparent 70%),
             radial-gradient(closest-side at 54% 78%,rgba(0,179,164,.14),transparent 70%)}
.rhero .wrap{position:relative;z-index:1}
.rhero .kicker{color:var(--coral-on-ink)}
.crumb{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;font:600 14px/1.3 var(--font-sans);color:var(--band-muted)}
.crumb a{color:var(--band-muted);text-decoration:none}.crumb a:hover{color:var(--band-fg);text-decoration:underline;text-underline-offset:3px}
.rhero h1{margin-top:14px;font-size:clamp(36px,6.4vw,62px);line-height:1.02;max-width:20ch;overflow-wrap:break-word}
.rhero .lede{margin-top:16px;color:var(--band-muted);font-size:clamp(17px,2.2vw,20px)}
.dls{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.dls .btn{min-height:48px;padding:0 20px;font-size:15px}
.btn--light{background:#fafafa;color:#0b0b14}.btn--light:hover{background:#fff}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--band-fg);border:1px solid var(--band-line)}.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn svg{width:18px;height:18px;flex:none}
.btn .fmt{font:700 12px/1 var(--font-sans);padding:4px 7px;border-radius:6px;background:rgba(11,11,20,.08)}
.btn--ghost .fmt{background:rgba(255,255,255,.1)}
.free{margin-top:14px;font:600 13.5px/1.45 var(--font-sans);color:var(--band-muted)}

.rbody{padding-block:44px 64px}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
@media(max-width:960px){.rgrid{grid-template-columns:minmax(0,1fr);gap:28px}}
.rart{min-width:0;max-width:72ch}
.rart>*+*{margin-top:16px}
.rart h2{margin-top:40px;font-size:clamp(25px,3.4vw,32px);line-height:1.12;letter-spacing:-.03em}
.rart h3{margin-top:26px;font-size:20px}
.rart h2+*,.rart h3+*{margin-top:12px}
.rart p,.rart li{color:var(--ink-muted)}
.rart b,.rart strong{color:var(--ink);font-weight:700}
.rart ul,.rart ol{padding-left:22px}
.rart li+li{margin-top:8px}
.rart a{color:var(--coral-text);text-underline-offset:3px}
.rart>:first-child{margin-top:0}
.side{position:sticky;top:calc(var(--header-h) + 18px);display:grid;gap:14px;min-width:0}
@media(max-width:960px){.side{position:static;order:-1}}
.glance{border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;background:var(--surface-cloud)}
.glance h2{font:700 13.5px/1.2 var(--font-sans);letter-spacing:0;color:var(--ink);margin:0 0 6px}
.glance p{font-size:15px;line-height:1.55;color:var(--ink-muted)}
.glance p+h2{margin-top:16px}
.glance ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.glance a.dl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--ink);text-decoration:none;font:700 14.5px/1.25 var(--font-sans)}
.glance a.dl:hover{border-color:var(--border-strong)}
.glance a.dl small{display:block;font-weight:500;color:var(--ink-muted);font-size:12.5px;margin-top:2px}
.glance a.dl svg{width:18px;height:18px;flex:none;color:var(--lagoon-text)}

.note{border:1px solid var(--border);border-left:4px solid var(--lagoon);border-radius:var(--radius-md);padding:14px 18px;background:var(--surface-cloud);font-size:15.5px}
.note p{color:var(--ink)}
.check{list-style:none;padding:0!important}
.check li{position:relative;padding-left:34px}
.check li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border:2px solid var(--border-strong);border-radius:6px}
.tpl{border:1px solid var(--card-edge);border-radius:var(--radius-lg);padding:22px 24px;background:var(--surface)}
.tpl .tpl__h{font:700 13px/1.3 var(--font-sans);color:var(--ink-muted);margin:0 0 4px}
.tpl .tpl__s{font:700 16px/1.4 var(--font-sans);color:var(--ink);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.tpl p{color:var(--ink);margin:0}.tpl p+p{margin-top:12px}
.ph{background:var(--coral-soft);color:var(--coral-text);border-radius:5px;padding:0 4px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tblw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md)}
.rtab{width:100%;border-collapse:collapse;font-size:15px}
.rtab th,.rtab td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.rtab th{font:700 13.5px/1.3 var(--font-sans);color:var(--ink);background:var(--surface-cloud)}
.rtab td{color:var(--ink-muted)}
.rtab tr:last-child td{border-bottom:0}
.form-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 18px;border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px}
.form-f span{display:block;border-bottom:1px solid var(--border-strong);padding:18px 0 4px;font:600 13px/1.2 var(--font-sans);color:var(--ink-muted)}
.srcs{font-size:14.5px}
.printb{margin-top:22px}

/* the updates box */
.upd{margin-top:48px;border-radius:var(--radius-lg);padding:26px;background:var(--surface-cloud);border:1px solid var(--border)}
.upd h2{margin:0;font-size:clamp(22px,3vw,28px);letter-spacing:-.03em}
.upd p{margin-top:8px;color:var(--ink-muted)}
.upd form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:16px;max-width:620px}
.upd input[type=email]{width:100%;min-width:0;height:52px;padding:0 18px;border-radius:var(--radius-pill);border:2px solid var(--card-edge);background:var(--surface);color:var(--ink);font:500 17px/1 var(--font-sans)}
.upd input[type=email]:focus-visible{outline:none;border-color:var(--cobalt)}
.upd .btn{background:var(--ink);color:var(--on-ink)}
.upd label.agree{grid-column:1 / -1;display:flex;gap:10px;align-items:flex-start;font:500 14.5px/1.45 var(--font-sans);color:var(--ink)}
.upd label.agree input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--coral)}
.upd .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.upd__msg{grid-column:1 / -1;margin:0;font:600 14px/1.4 var(--font-sans);color:var(--coral-text)}
.upd__msg:empty{display:none}
.upd__done{margin-top:14px;font:700 16px/1.4 var(--font-sans);color:var(--lagoon-text)}
.upd__fine{grid-column:1 / -1;margin:0!important;font-size:13px}
@media(max-width:560px){.upd{padding:20px}.upd form{grid-template-columns:1fr}.upd .btn{width:100%}}
.upd[hidden],.upd__done[hidden],.upd form[hidden]{display:none}

/* made by renuzy */
.made{border:1px solid var(--band-line);margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:22px 24px;border-radius:var(--radius-lg);background:var(--band);color:var(--band-fg)}
.made svg{height:30px;width:auto;flex:none}
.made p{flex:1 1 260px;min-width:0;margin:0;color:var(--band-muted);font-size:15.5px}
.made p b{color:var(--band-fg)}
.made .btn{background:#fafafa;color:#0b0b14;min-height:46px;font-size:15px}

/* the resources index */
.rgroup+.rgroup{margin-top:48px}
.rgroup>h2{font-size:clamp(26px,3.6vw,34px);letter-spacing:-.03em}
.rgroup>p{margin-top:8px;color:var(--ink-muted);max-width:62ch}
.rcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:20px}
@media(max-width:400px){.rcards{grid-template-columns:minmax(0,1fr)}}
.rcard{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px;border:1px solid var(--card-edge);border-radius:var(--radius-lg);background:var(--surface);position:relative}
.rcard::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:var(--coral);opacity:.55}
.rcard h3{font-size:21px}
.rcard h3 a{color:var(--ink);text-decoration:none}
.rcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.rcard p{color:var(--ink-muted);font-size:15.5px;line-height:1.55}
.rcard .helps{font-size:14px}
.rcard .helps b{color:var(--ink)}
.rcard .tags{display:flex;flex-wrap:wrap;gap:6px}
.rcard .tag{padding:4px 9px;border-radius:var(--radius-pill);background:var(--coral-soft);color:var(--coral-text);font:700 12px/1 var(--font-sans)}
.rcard .tag--en{background:transparent;border:1px solid var(--border-strong);color:var(--ink-muted)}
.rcard .acts{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px}
.rcard .acts a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--card-edge);color:var(--ink);text-decoration:none;font:700 14px/1 var(--font-sans)}
.rcard .acts a:hover{border-color:var(--border-strong)}
.rcard .acts a.read{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.rcard .acts svg{width:16px;height:16px}

/* the FAQ page, /faq and /es/faq: one card of questions per group, each
   question opens in place and has its own id, so /faq#export lands open */
.fgroup{max-width:820px;scroll-margin-top:calc(var(--header-h) + 20px)}
.fgroup+.fgroup{margin-top:52px}
.fgroup>h2{font-size:clamp(26px,3.6vw,34px);letter-spacing:-.03em}
.fgroup>p{margin-top:8px;color:var(--ink-muted);max-width:62ch}
.fgroup .qa{margin-top:18px;border:1px solid var(--card-edge);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.fq{scroll-margin-top:calc(var(--header-h) + 20px)}
.fq+.fq{border-top:1px solid var(--border)}
.fq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 22px;font:700 17px/1.4 var(--font-sans);color:var(--ink);transition:color .15s ease-out}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--coral-soft);color:var(--coral-text);font:600 20px/1 var(--font-sans)}
.fq[open] summary::after{content:"\2212"}
.fq summary:hover{color:var(--coral-text)}
.fq:target{box-shadow:inset 3px 0 0 var(--coral)}
.fa{padding:0 22px 20px}
.fa p{max-width:66ch;color:var(--ink-muted);font-size:16.5px;line-height:1.65}
.fq-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 0;font:700 13.5px/1 var(--font-sans);color:var(--ink-muted);text-decoration:none}
.fq-link svg{width:15px;height:15px;flex:none}
.fq-link:hover{color:var(--coral-text);text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.fq summary{padding:17px 18px;font-size:16.5px}.fa{padding:0 18px 18px}}
.fmore{max-width:820px;margin-top:56px;justify-content:space-between}
.fmore>div:first-child{flex:1 1 300px;min-width:0}
.fmore h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.03em;color:var(--band-fg)}
.fmore p{margin-top:6px}
.fmore p a{color:var(--band-fg)}
.fmore-b{display:flex;flex-wrap:wrap;gap:10px}
.made .btn--ghost{background:rgba(255,255,255,.06);color:var(--band-fg);border:1px solid var(--band-line)}
.made .btn--ghost:hover{background:rgba(255,255,255,.12)}
@media(max-width:560px){.fmore-b{width:100%}.fmore-b .btn{flex:1 1 100%}}

/* guides and comparisons (/guides): built by tools/resources/build.py from content_guides.py */
.gside .gl{gap:9px}
.gside .gl li{position:relative;padding-left:22px;font:600 14.5px/1.4 var(--font-sans);color:var(--ink)}
.gside .gl li::before{content:"";position:absolute;left:1px;top:.32em;width:12px;height:12px;border-radius:50%;background:var(--lagoon);box-shadow:inset 0 0 0 3px var(--surface-cloud)}
.gside ul+h2,.gside table+h2{margin-top:18px}
.gprice{width:100%;border-collapse:collapse;margin-top:6px;font-size:14.5px}
.gprice th,.gprice td{padding:6px 0;border-bottom:1px solid var(--border)}
.gprice tr:last-child th,.gprice tr:last-child td{border-bottom:0}
.gprice th{text-align:left;font-weight:500;color:var(--ink-muted)}
.gprice td{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gside a.dl svg{color:var(--coral-text)}
.rart .tblw{margin-top:14px}
.gcmp .rtab td:first-child{font-weight:700;color:var(--ink);min-width:9em}
.gcmp .rtab th:first-child{width:22%}
@media(max-width:620px){.gcmp .rtab{font-size:14px}.gcmp .rtab th,.gcmp .rtab td{padding:9px 10px}.gcmp .rtab td:first-child{min-width:7em}}
.rart .srcline{font-size:14px;line-height:1.55;margin-top:10px}
.gfaq{margin-top:44px}
.gfaq .fq summary{font-size:16.5px}
.grel{margin-top:56px}
@media(max-width:960px){.side--guide{order:0}}
.grel>h2{font-size:clamp(24px,3vw,30px)}
.gcta{max-width:none}

/* printing a resource page gives just the content, with the renuzy line */
@media print{
  .langbar,.top,.foot,.upd,.side,.dls,.free,.printb,.skip,.crumb,.made .btn{display:none!important}
  :root{--surface:#fff;--surface-cloud:#fff;--ink:#0b0b14;--ink-muted:#333;--border:#ccc;--card-edge:#ccc;color-scheme:light}
  body{font-size:12pt}
  .rhero{background:#fff;color:#0b0b14;padding:0 0 12pt}.rhero::after{display:none}
  .rhero h1{color:#0b0b14;font-size:26pt}.rhero .lede{color:#333}.rhero .kicker{color:#cc2b1c}
  .rbody{padding:0}.rgrid{display:block}
  .check li{break-inside:avoid}.rart h2{break-after:avoid}
  .made{background:#fff;color:#0b0b14;border:1px solid #ccc}.made p{color:#333}.made p b{color:#0b0b14}
  .made svg path[style*="FFFFFF"]{fill:#0b0b14!important}
}