/*
 * start-here.css — /start-here/ (page 21514).
 *
 * Loaded AFTER sections/home/home.css, which is where the design tokens (--ink, --orange,
 * --tint, --line, --wash, --shadow-*) and the shared components (.gcard, .gband, .btn,
 * .sechead, .sr) come from. The page wraps itself in `.rrh .rsh`, so `.rrh`'s tokens
 * resolve and this file only has to add what is specific to this page.
 *
 * Three things worth knowing before editing:
 *
 * 1. NO DARK MODE, deliberately, and for the same reason home.css gives: nothing else on
 *    this site has one, and a dark page body inside a light Genesis header and footer is
 *    worse than no dark mode at all. Sitewide dark mode is its own chunk.
 *
 * 2. Some rules reach into markup this chunk does not own — mc4wp form 29663
 *    (.form_section, .usps, .nls--formContainer) and FormCraft 3 (.formcraft-css .fc-form).
 *    Those are restyled from the outside because both are vendor or DB content that must
 *    not be edited. Each such block says whose markup it is touching and why.
 *
 * 3. sections/header/navs.css ships a global `a{text-decoration:none!important}`, so any
 *    underline this page wants has to carry !important of its own.
 *
 * Asset-freshness marker: keep --rsh-asset-v in lockstep with RULED_SH_ASSET_V in hooks.php.
 * WP Rocket's minify cache is keyed by file path, not by ?ver=, so a stale minified copy is
 * invisible to a version bump alone; the purge is deploy.sh's job.
 */

.rsh {
  --rsh-asset-v: "1.3.0";
  /* The app CTA speaks the app's blue, not the site orange. #1D7DB6 is app.ruled.me's
     brand blue #3CA2E0 darkened on the same hue (203deg, 73%) to clear WCAG AA: 4.51:1
     for white text, where #3CA2E0 is only 2.82:1. Same value the keto archives ship. */
  --sh-blue:#1D7DB6;
  --sh-blue-hover:#1A6EA1;
  --sh-measure:68ch;
}

/* The entry column is ~954px, not the homepage's 1200, so the shared .sec padding would
   push content off the readable measure. Sections space themselves instead. */
.rsh{padding-bottom:8px}

/* Full-bleed plumbing for the grey band below. Two ancestors were clipping its 100vw
   background to the 954px column: this element's own overflow-x:clip (round 4) and the
   theme's `.entry-content{overflow:hidden}` (style.css). Any overflow value other than
   visible on an ancestor clips a descendant's pseudo-element, so the clip has to live on
   an ancestor that is ALREADY viewport-wide. #wrap is (1280px at 1280, full width on
   phones), so it takes the clip, and .entry-content is released on this page only.
   clip rather than hidden: it does not create a scroll container, and pairing it with
   overflow-y:visible is legal where hidden would force overflow-y to auto.
   .entry-content's hidden was a float-clearing BFC; this page has no floats. */
body.page-id-21514 #wrap{overflow-x:clip}
body.page-id-21514 .entry-content{overflow:visible}

/* Operator, 2026-09-02: the cookbooks copy and the Keto Academy ad are one commercial
   block and need a visual break from the editorial sections either side. A full-bleed
   light grey band does it. The background is a pseudo-element rather than a margin trick
   so the content keeps the entry column's own width and alignment. */
.rsh .rsh-band{position:relative;padding:42px 0 46px;margin:0 0 46px}
.rsh .rsh-band::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  transform:translateX(-50%);width:100vw;max-width:100vw;background:var(--wash);z-index:0}
.rsh .rsh-band>*{position:relative;z-index:1}
.rsh .rsh-band .rsh-sec:last-child{margin-bottom:0}
.rsh .rsh-sec{padding:0;margin:0 0 46px}
.rsh .rsh-sec:last-child{margin-bottom:8px}

/* ---------------------------------------------------------------- section heads */
/* These replace the twelve decorative <hr> rules the page used as its only structure. */
/* The rule was sitting on the heading's BASELINE, about 10px below its centre: something
   in the cascade resolves .sechead's align-items to baseline here, and an empty 1px span
   baselines on its own bottom edge. Both axes are pinned explicitly rather than relying on
   the inherited value (operator, 2026-09-02). */
.rsh .rsh-head{margin:0 0 18px;align-items:center}
.rsh .rsh-head>*{align-self:center}
.rsh .rsh-head .rule{align-self:center}
.rsh .rsh-head h2{font-size:23px;line-height:1.2}
.rsh .rsh-head h3{font-size:19px;line-height:1.25;color:var(--ink);font-weight:700;margin:0}
/* The ruled.me wordmark sits inside the "What is ruled.me?" heading. Baseline-align it to
   the heading text rather than letting it sit on the line box's bottom. */
.rsh .rsh-logo{display:inline-block;vertical-align:-2px;width:auto;height:22px;margin:0 2px}

/* The theme gives every .entry-content list a square OUTSIDE marker on the li (Genesis
   plus style.css). list-style:none on the ul does not reach it, and an outside marker is
   painted to the LEFT of its li, so on the social row each icon's square appeared beside
   the PREVIOUS bubble: the "small dark square" of rounds 4 and 5. The three lists this
   page draws its own bullets for (or none) reset the marker on the li itself. */
.rsh .rsh-socs li,.rsh .rsh-list li,.rsh .rsh-nl .usps li{list-style:none}

/* ---------------------------------------------------------------------- prose */
/* Operator, 2026-09-02: text sections WITHOUT a photo run the full column width. Only the
   two split sections (which have an image column beside them) keep a narrower measure, and
   they get it from the grid track rather than from a max-width. */
.rsh .rsh-prose{max-width:none}
.rsh .rsh-prose p{margin:0 0 15px;font-size:15.5px;line-height:1.68;color:var(--body)}
.rsh .rsh-prose p:last-child{margin-bottom:0}
.rsh .rsh-prose a{color:var(--orange);font-weight:600;text-decoration:underline!important;text-underline-offset:3px}
.rsh .rsh-prose a:hover{color:var(--orange-hover)}
.rsh .rsh-list{max-width:none;margin:0 0 15px;padding:0;list-style:none}
.rsh .rsh-list li{position:relative;padding:0 0 0 22px;margin:0 0 11px;font-size:15.5px;line-height:1.66;color:var(--body)}
.rsh .rsh-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange-lt)}
.rsh .rsh-list a{color:var(--orange);font-weight:600;text-decoration:underline!important;text-underline-offset:3px}

/* ------------------------------------------------------- ITEM 1: newsletter CTA */
/*
 * Shape borrowed from the keto archives' .rka-guide: one soft card, warm 1px border, 16px
 * radius (the operator asked for "a bit more radius"), light grey inner.
 *
 * .form_section, .usps and .nls--formContainer are mc4wp form 29663's OWN markup, stored in
 * the database and shared with a second page, so it is restyled here rather than edited.
 * The badge that used to be a 271x271 PNG background on .form_section is switched off and
 * redrawn as text by render.php, which is what makes the number editable.
 */
.rsh .rsh-nl{position:relative;background:var(--wash);border:1px solid var(--tint-2);border-radius:16px;padding:36px 34px}
/* The double container: mc4wp form 29663's .form_section carries its own 2px border,
   #fcfcfc fill and 6px radius, which sat as a second box inside this card. Flattened
   completely (operator, 2026-09-02) so .rsh-nl is the only frame. */
.rsh .rsh-nl .form_section{background:none!important;background-image:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;padding:0;margin:0;min-height:0}
/* 24ch resolved to 336px in a 636px column: three short lines over a 520px form, two
   islands with a hole between them. The heading shares the form's width instead. */
.rsh .rsh-nl .form_section h2{margin:0 0 16px;font-size:24px;line-height:1.25;font-weight:700;color:var(--ink);max-width:520px}
.rsh .rsh-nl .usps{margin:0 0 20px}
.rsh .rsh-nl .usps ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
/* The tick bullets were <li> background images hotlinked from www.ruled.me. Drawn in CSS
   instead: no request and no cross-environment dependency.
   Round 1 stacked two absolutely positioned pseudo-elements with em offsets and the tick
   sat high in its circle (operator, 2026-09-02). The circle is now a flex ITEM carrying
   the tick as a centred background image, so the tick cannot drift: one box, one
   background-position:center. The margin-top optically centres the circle on the first
   line of text rather than on the whole li, which may wrap. */
.rsh .rsh-nl .usps li{background:none!important;display:flex;align-items:flex-start;gap:10px;
  padding:0;margin:0;font-size:15px;line-height:1.5;color:var(--body);min-height:0}
.rsh .rsh-nl .usps li::before{content:"";flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  margin-top:calc((1.5em - 20px) / 2)}

.rsh .rsh-nl .nls_main{padding:0;text-align:left}
.rsh .rsh-nl .nls--formContainer{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:520px;position:static}
/* mc4wp's own stylesheet sets a dark translucent field on a light card; both inputs are
   rebuilt as pills here. */
.rsh .rsh-nl .nls--formContainer>input[type=email]{
  flex:1 1 230px;background:#fff!important;border:1px solid var(--line)!important;border-radius:999px!important;
  padding:13px 20px!important;font-size:14.5px;color:var(--ink);min-width:0;height:auto;box-shadow:none;margin:0!important}
/* No placeholder colour here on purpose: mc4wp's own sheet wins that one and paints
   #676767 (5.68:1), which is better than anything this file would pick. */
.rsh .rsh-nl .nls--formContainer>input[type=email]:focus{outline:2px solid var(--orange);outline-offset:2px;border-color:var(--orange)!important}
/* Transparent 1px border so the button's box matches the field's once the two stop
   sharing a flex row (below 721px they wrapped to 45px against 47px); margin:0 on both
   because something upstream adds 5px and turned the 10px gap into 15px. */
.rsh .rsh-nl .nls--formContainer>input[type=submit]{
  flex:0 0 auto;background:var(--orange)!important;color:#fff!important;border:1px solid transparent!important;border-radius:999px!important;
  padding:13px 28px!important;font-size:14px;font-weight:700;letter-spacing:.02em;cursor:pointer;width:auto;height:auto;margin:0!important}
.rsh .rsh-nl .nls--formContainer>input[type=submit]:hover{background:var(--orange-hover)!important}

/* The badge. Text, not artwork: "650,000+" is a string in render.php.
   Operator, 2026-09-02: keep the ORIGINAL badge's look. #3CA2E0 is the exact blue sampled
   from the 2018 artwork it replaces (and, independently, app.ruled.me's brand blue), and
   the ::before is the artwork's inner dotted ring. White on #3CA2E0 is 2.82:1, so this is
   below AA — acceptable here because it is a decorative restatement of a claim already
   made in the heading beside it, and the element is aria-hidden. */
/* Everything in the badge is a fraction of ONE diameter token, --bd. Round 4 set three
   diameters (212/176/154) but left the number at 39px, so "650,000+" (162px wide)
   overflowed the 128px content box of the 176px badge by 17px a side and sat on the
   ring. The ratios are measured off the 2018 artwork, whose blue disc is 193px inside
   its 271px canvas (the rest is drop shadow): ring 6px in (3.1%), label cap heights
   15px KETOERS / 12px WORLDWIDE, label strokes semibold not bold, and a soft shadow
   under the disc (alpha .086 at 1px, gone by 34px). The 39px number on a 212px disc is
   the operator's round-4 size, kept as 18.4%. */
.rsh .rsh-badge{
  --bd:212px;
  position:absolute;right:34px;top:50%;transform:translateY(-50%);
  width:var(--bd);height:var(--bd);border-radius:50%;background:#3CA2E0;border:0;
  box-shadow:0 4px 16px rgba(0,0,0,.10);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--bd) * .045);text-align:center;padding:calc(var(--bd) * .08)}
.rsh .rsh-badge::before{content:"";position:absolute;inset:calc(var(--bd) * .036);border-radius:50%;
  border:2px dotted rgba(255,255,255,.9);pointer-events:none}
.rsh .rsh-badge-k{font-size:calc(var(--bd) * .065);line-height:1.2;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.rsh .rsh-badge-n{font-size:calc(var(--bd) * .184);font-weight:700;letter-spacing:-.01em;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
/* Two spans because the artwork sets KETOERS 25% larger than WORLDWIDE. */
.rsh .rsh-badge-l{font-size:calc(var(--bd) * .113);margin-bottom:calc(var(--bd) * -.008);font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:#fff;line-height:1.2}
.rsh .rsh-badge-w{font-size:calc(var(--bd) * .0825);font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:#fff;line-height:1.2}
/* Room for the badge, so the heading and USPs never run under it. The h2 is pinned
   left too: a theme breakpoint centres it under 768px, which left a 721-767px window
   with a centred heading over a flush-left form and a right-hand badge. */
@media (min-width:721px){ .rsh .rsh-nl{padding-right:282px} .rsh .rsh-nl .form_section h2{text-align:left} }

/* ------------------------------------------------------------- text + image split */
/* Used by "Who is Craig Clarke?" and "Connect with Me". The image column is a fixed track
   rather than a percentage so the text keeps a readable measure at every width. */
.rsh .rsh-split,.rsh .rsh-connect{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.rsh .rsh-split-t p,.rsh .rsh-connect-t p{margin:0 0 15px;font-size:15.5px;line-height:1.68;color:var(--body)}
.rsh .rsh-split-t p:last-child,.rsh .rsh-connect-t p:last-child{margin-bottom:0}
.rsh .rsh-split-i{margin:0}
.rsh .rsh-split-i img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.rsh .rsh-connect-i{margin:0}
.rsh .rsh-connect-i img{width:100%;height:auto}

/* --------------------------------------------------------- ITEM 2: journey cards */
/*
 * .gcard and .gband are home.css's, unchanged — that is the point of loading home.css.
 * Only two adjustments, both because the column here is 954px rather than 1200px.
 */
/* Operator, 2026-09-02: show the blurbs in full, as the original did, and drop to two
   cards per row so there is width to do it in. The clamp is gone; equal heights now come
   from the grid stretching each card, and .gcard is already a column flex with the "go"
   affordance pushed to the bottom by margin-top:auto, so uneven blurbs still line their
   Read links up per row. */
.rsh .rsh-gband{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px;gap:22px}
.rsh .rsh-gband .gcard-s{font-size:14.5px;line-height:1.6}
.rsh .rsh-gband .gcard-b{padding:16px 18px 18px;gap:12px}
.rsh .rsh-gband .gcard-go{text-transform:none}

/* --------------------------------------------------------------- ITEM 3: app CTA */
/*
 * Operator, 2026-09-02: back to the original's composition — copy left, the illustrated
 * meal-planner phone right. Round 1 borrowed the keto archives' filter screenshot plus a
 * food photograph masked in from the right; in a 954px column (the archives run full
 * bleed) the photograph ran under the copy and the block read as a recipe card, not an ad.
 *
 * The SHELL still belongs to the .rka-cta family: white card, warm 1px border, 12px
 * radius, blue eyebrow, blue pill button. Only the imagery changed.
 */
.rsh .rsh-ctaband{margin:4px 0 0}
.rsh .rsh-cta{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:36px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 32px;
  box-shadow:var(--shadow-sm);text-decoration:none}
.rsh .rsh-cta:hover{box-shadow:var(--shadow-md)}
.rsh .rsh-cta-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.rsh .rsh-kicker{display:block;color:var(--sh-blue);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.rsh .rsh-cta-p{display:block;color:var(--body);margin:0 0 12px;font-size:14.5px;line-height:1.62}
.rsh .rsh-cta-p strong{color:var(--ink)}
.rsh .rsh-btn{display:inline-block;background:var(--sh-blue);color:#fff;font-weight:700;font-size:13.5px;padding:12px 26px;border-radius:999px;line-height:1.4;margin-top:6px}
.rsh .rsh-cta:hover .rsh-btn{background:var(--sh-blue-hover)}
/* The illustration is a 1000px square with generous transparent margins of its own, so it
   needs no padding here and is allowed to overflow its track slightly at the top and
   bottom rather than being boxed. */
.rsh .rsh-cta-art{display:block;min-width:0}
.rsh .rsh-cta-art img{width:100%;height:auto;display:block}

/* ------------------------------------------------------- recommendation blocks */
/*
 * Five near-identical half-and-half blocks became one repeated component. Still five
 * blocks in the same order with the same copy — collapsing them into a single card row is
 * decision D4 and is a change to render.php alone when it is ruled.
 */
.rsh .rsh-recs{display:flex;flex-direction:column;gap:14px}
/* Operator, 2026-09-02 (round 7): the illustrations fill more of the card. 260px column
   (was 190) and the 700px originals rather than the 350px thumbnails so they stay sharp. */
.rsh .rsh-rec{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 26px;box-shadow:var(--shadow-sm)}
.rsh .rsh-rec h3{margin:0 0 10px;font-size:18px;font-weight:700;color:var(--ink)}
.rsh .rsh-rec p{margin:0 0 11px;font-size:14.5px;line-height:1.62;color:var(--body);max-width:62ch}
.rsh .rsh-rec-btn{margin-top:5px;padding:11px 22px;font-size:13.5px}
.rsh .rsh-rec-i{display:block}
.rsh .rsh-rec-i img{width:100%;height:auto;display:block}

/* ------------------------------------------------------------ ITEM 4: social row */
/* Facebook, Instagram and Pinterest only. Google+ (dead since 2019) and Twitter are gone,
   and with them the retired connect.facebook.net SDK the old shortcode injected. */
.rsh .rsh-socs{display:flex;gap:10px;margin:4px 0 16px;padding:0;list-style:none}
/* Each link carries its own --brand inline (render.php). The glyph wears it at rest and
   the bubble takes it on hover, so the row reads as the real networks without three
   saturated discs shouting on a quiet page. */
.rsh .rsh-soc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--wash);border:1px solid var(--line);color:var(--brand,var(--mute));
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.rsh .rsh-soc svg{width:19px;height:19px;fill:currentColor;display:block}
.rsh .rsh-soc:hover{background:var(--brand,var(--orange));border-color:var(--brand,var(--orange));color:#fff}

/* --------------------------------------------------------- ITEM 5: contact form */
/*
 * FormCraft 3 is vendor code and is not edited. It also prints its own <style scoped>
 * block that sets the submit button to #4488ee through a five-class selector
 * (.formcraft-css .fc-form.fc-form-3 .form-element .submit-cover .submit-button), so every
 * override here has to out-specify that AND carry !important, because that inline block
 * comes later in the cascade than this stylesheet.
 */
/* Operator, 2026-09-02: full width, like the rest of the page. */
.rsh .rsh-fc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 30px;box-shadow:var(--shadow-sm);max-width:none}
/* The double container: FormCraft's form carries `frame-visible`, which paints a white
   fill, a 3px radius and a hairline box-shadow ring — a second box inside .rsh-fc.
   Flattened (operator, 2026-09-02) so .rsh-fc is the only frame. */
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3{margin:0!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important}
/* FormCraft's field icons render from an icon font that is not loading here: the "user"
   glyph on the Name field came out as a stray hyphen beside the field. The envelope on the
   Email field carries no information either, so both go. */
.rsh .rsh-fc .formcraft-icon{display:none!important}
/* The single-page pagination pip is meaningless on a one-page form. */
.rsh .rsh-fc .fc-pagination-cover{display:none!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover>span{color:var(--mute)!important;font-size:13.5px!important}
/* FormCraft's label-inline layout reserves a 184px inline-block label column and then a
   <p> forces a line break, so the label ended up on its own line and the field kept only
   430px of a 614px row: a third of the card was empty. Everything is pushed to full width
   and the labels left-aligned, so the form fills the card it sits in. */
/* Round 3 widened the ROWS but the <form> itself carries FormCraft's configured width as an
   inline style (width:670px) inside an 892px card, and .form-page-content pads 24px on the
   top and left only, so the fields still stopped 250px short of the card's right edge with
   the submit button hanging off their right end. The form takes the card's full width, the
   card's own 30px padding is the only inset, and the submit sits left like every other
   button on this page (FormCraft's .submit-cover is text-align:right). */
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3{width:100%!important;max-width:none!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-page-content{padding:0!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .submit-cover{text-align:left!important}
/* The submit row keeps the 24px row gap below it, which the card's own padding then adds
   to. :has() so it does not depend on the submit being the last child. */
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element-html:has(.submit-cover){padding-bottom:0!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element{width:100%!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element-html{padding-right:0!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .field-cover{width:100%!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .field-cover>span{width:100%!important;text-align:left!important;padding:0 0 7px!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .field-cover>div{width:100%!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover input[type=text],
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover input[type=email],
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover textarea{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;
  padding:11px 14px!important;font-size:14.5px!important;color:var(--ink)!important;box-shadow:none!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover input[type=text]:focus,
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover input[type=email]:focus,
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .field-cover textarea:focus{
  border-color:var(--orange)!important;outline:2px solid var(--orange);outline-offset:1px}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .submit-cover .submit-button{
  background:var(--orange)!important;color:#fff!important;border:0!important;border-radius:999px!important;
  padding:12px 30px!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important;text-shadow:none!important}
.rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .submit-cover .submit-button:hover{background:var(--orange-hover)!important}
.rsh .rsh-outro{margin-top:22px}

/* ------------------------------------------------------------------ responsive */

/* Tablet: the badge stops being an absolute overlay and the splits go single column
   before the text measure gets squeezed. */
@media (max-width:900px){
  /* The page had no horizontal gutter of its own: Genesis's #inner gives the entry column
     1% of the viewport, 3.6px at 360 and 3.9px at 390, so prose, section heads and lists
     sat 4px from the glass while card text sat 23 to 45px in (mobile pass, 2026-09-02).
     16px plus that 1% lands the page edge on 20px, the gutter home.css gives the homepage. */
  .rsh{padding-left:16px;padding-right:16px}
  .rsh .rsh-cta{grid-template-columns:minmax(0,1fr) 230px;gap:26px}
  .rsh .rsh-rec{grid-template-columns:minmax(0,1fr) 200px;gap:20px}
}

@media (max-width:760px){
  /* home.css turns .sechead into a two-column grid here and pins the icon chip to the
     heading's FIRST line (margin-block:-6.6px on .shic), so a wrapping heading does not
     leave the chip floating between its lines. The round-5 centring above exists for the
     rule element, which home.css hides at this width, so the alignment goes back. */
  .rsh .rsh-head{align-items:start}
  .rsh .rsh-head>*{align-self:auto}
}

@media (max-width:720px){
  .rsh .rsh-sec{margin-bottom:38px}
  .rsh .rsh-head h2{font-size:20px}
  .rsh .rsh-head h3{font-size:17.5px}

  /* Newsletter: badge above the copy, centred and smaller, in normal flow. */
  /* One 18px inner gutter for every card, so with the page gutter above all card text
     shares one left edge (38.9px at 390) instead of four different ones. .gcard-b is
     already 18px. */
  .rsh .rsh-nl{padding:24px 18px}
  /* mc4wp's sheet centres the heading; everything else in the card is left-aligned. The
     badge stays centred: it is a stamp. */
  .rsh .rsh-nl .form_section h2{text-align:left}
  /* position:RELATIVE, not static. The dotted ring is an absolutely positioned ::before;
     with the badge static its containing block became .rsh-nl and the ring painted as a
     358x512px ellipse across the whole card at 390 (through the tick bullets and the
     button) while the badge itself had none. top/right are reset so the desktop offsets
     cannot shift the relatively positioned box. */
  .rsh .rsh-badge{--bd:176px;position:relative;top:auto;right:auto;transform:none;margin:0 auto 20px}
  .rsh .rsh-band{padding:30px 0 32px;margin-bottom:38px}
  .rsh .rsh-nl .form_section h2{font-size:21px;max-width:none}
  .rsh .rsh-nl .nls--formContainer{max-width:none}
  .rsh .rsh-nl .nls--formContainer>input[type=email],
  .rsh .rsh-nl .nls--formContainer>input[type=submit]{flex:1 1 100%}
  /* Only the button centres; the field keeps its placeholder and typed text at the left. */
  .rsh .rsh-nl .nls--formContainer>input[type=submit]{text-align:center}
  .rsh .rsh-nl .nls--formContainer>input[type=email]{text-align:left}
  /* The badge is drawn after the form in source order so it can be absolutely positioned
     on desktop; on mobile it belongs above. Order has to be set on .rsh-nl's DIRECT
     children, and .form_section is a grandchild: mc4wp wraps it in
     .mc4wp-form > .mc4wp-form-fields. Targeting the wrapper by class would break the day
     mc4wp changes it, so everything that is not the badge is ordered after it. */
  .rsh .rsh-nl{display:flex;flex-direction:column}
  .rsh .rsh-nl>*{order:2}
  .rsh .rsh-nl>.rsh-badge{order:1}

  .rsh .rsh-gband{grid-template-columns:minmax(0,1fr)}
  .rsh .rsh-split,.rsh .rsh-connect{grid-template-columns:minmax(0,1fr);gap:22px}
  /* Illustration placement (operator, 2026-09-02: "like in the recommendation section").
     Every image that introduces a block goes ABOVE its copy, on the copy's left rail,
     capped small, the way the recommendation icons already were. The connect illustration
     is the same 350x350 asset family as those icons, so it takes their size. The portrait
     is a photograph so it keeps a cap of its own: 224px is its 449px source at exactly 2x,
     the largest it can be drawn sharp on a phone (at 280px it rendered at 1.6x and soft). */
  /* Operator, 2026-09-02 (round 7): the portrait runs edge to edge on a phone (its 449px
     source is the largest file that exists). Round 7b: the connect illustration, the app
     phone and the recommendation icons are larger than round 6 but NOT edge to edge, and
     centred. */
  .rsh .rsh-split-i{order:-1;margin:0;max-width:none}
  .rsh .rsh-connect-i{order:-1;margin:0 auto;max-width:220px}
  /* With the illustration moved above the copy the section's last row is text whose last
     paragraph zeroes its own margin, so the prose block after it needs the page rhythm. */
  .rsh .rsh-connect{margin-bottom:15px}

  /* App CTA: single column, the phone above the copy on the same rail, which also puts the
     blue button at the bottom of the card where the call to action belongs. Full-width
     button to match the recommendation cards beside it. */
  .rsh .rsh-cta{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 18px}
  .rsh .rsh-cta-art{order:-1;margin:0 auto;max-width:280px}
  .rsh .rsh-btn{width:100%;text-align:center}

  /* Recommendation blocks: icon above the copy, small. */
  .rsh .rsh-rec{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px 18px}
  .rsh .rsh-rec-i{order:-1;margin:0 auto;max-width:220px}
  /* Horizontal padding on a full-width button is invisible but sets the wrap threshold:
     12px keeps "View Supplement Recommendations" on one line down to 390 (at 26px three of
     the five labels wrapped once the cards got their gutter). */
  .rsh .rsh-rec-btn{width:100%;justify-content:center;padding:11px 12px}

  .rsh .rsh-fc{padding:20px 18px}
  /* FormCraft's submit goes full width like every other card button at this size. */
  .rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .submit-cover{text-align:center!important}
  .rsh .rsh-fc .formcraft-css .fc-form.fc-form-3 .form-element .submit-cover .submit-button{width:100%!important}
}

@media (max-width:420px){
  .rsh .rsh-badge{--bd:154px}
}

@media (prefers-reduced-motion:reduce){
  .rsh .gcard,.rsh .rsh-soc{transition:none!important}
  .rsh .gcard:hover{transform:none}
}