/*
 * home.css: the ruled.me homepage (Warm Table).
 * Ported from docs/superpowers/specs/2026-08-20-homepage-redesign/candidates-r2/generate-v3.py
 * (BASE_CSS + SKIN_V3), which is the design the operator approved.
 *
 * NOTE: sections/header/navs.css ships a global `a{text-decoration:none!important}`, so every
 * underline the design calls for has to carry !important of its own.
 *
 * Asset-freshness marker: the e2e spec fetches whatever stylesheet URL the served page names
 * (WP Rocket rewrites it to cache/min/...) and asserts this custom property carries the current
 * theme asset version. Rocket's minify cache is keyed by file path, NOT by ?ver=, so a stale
 * minified copy is invisible to a version bump alone (session 40 root cause). Keep the value in
 * lockstep with the enqueue version in functions.php.
 *
 * Two things worth knowing before editing:
 *
 * 1. NO DARK MODE. The design of record carried a full dark palette; nothing else on this site
 *    does (keto-hub.css, navs.css, footer.css and style.css contain zero prefers-color-scheme
 *    rules). Shipping it would put a dark page body inside a light header and footer, and give
 *    the homepage a different skin from the recipe portal it links into. Sitewide dark mode is
 *    its own chunk. The tokens below are therefore light-only, and they live on `.rrh` rather
 *    than `:root` so they cannot reach the Genesis chrome.
 *
 * 2. The blocks marked SHARED WITH keto-hub.css are copied from it verbatim, because the
 *    homepage and the recipe portal are meant to be one card system (ruling D5) and the two
 *    pages never load each other's stylesheet. homepage.spec.ts screenshots one card on each
 *    surface and asserts they match, so a change to one that is not made to the other fails a
 *    test rather than drifting quietly. Consolidating the two files into a shared base sheet is
 *    tracked as follow-up work.
 */

.rrh {
  --rrh-home-asset-v: "1.0.7";
  --ink:#343434; --body:#4a4a4a; --mute:#676767; --line:#e6e6e6;
  --wash:#f7f7f7; --orange:#e67e22; --orange-hover:#d47b05; --orange-lt:#eb974e;
  --tint:#fdf2e6; --tint-2:#fbe6d0; --green:#66cc8f; --green-ink:#1f3a2b;
  --surface:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 10px 24px rgba(0,0,0,.10);
  /* The photographs are trimmed to the edge of their content, so each needs a soft left edge of
     its own or it reads as a pasted rectangle. --fit-wash then carries the blend from the band's
     own ground into the picture. Both are declared as whole gradients rather than fading a
     var() colour to transparent, which goes grey in the middle in Safari. */
  --fit-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.42) 12%,#000 34%);
  --fit-wash:linear-gradient(90deg,#fff 0%,#fff 14%,rgba(255,255,255,.94) 28%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 64%);
  /* Stacked (<=960px) the same two photographs are cropped to a wide box and the copy is lifted
     up over their washed-out foot, so each one reads as a header the headline sits on rather
     than a near-square block eating half the first screen. The two bands share the lift and the
     fade; the crop differs because the app photograph's subject is an upright handset, and both
     crops WIDEN as the viewport does, because a full-bleed box that is short relative to a
     near-square source stops being a crop and becomes a letterbox slice through the subject.
     The vh ceiling is for a phone held sideways, where 3/2 of the width is taller than the
     screen. Values set by eye against the render at 320, 390, 760 and 960. */
  --m-photo-ar:3/2; --m-photo-ar-app:5/4; --m-photo-cap:64vh;
  --m-photo-pos:center 54%; --m-photo-pos-app:center 40%;
  --m-photo-lift:clamp(64px,18vw,108px);
  --m-photo-fade:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 80%,rgba(0,0,0,0) 96%);
}

/* ---------- SHARED WITH keto-hub.css: base ---------- */
.rrh,.rrh *,.rrh *::before,.rrh *::after{box-sizing:border-box}
.rrh{margin:0;background:#fff;color:var(--body);font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
.rrh p,.rrh ul,.rrh ol,.rrh li,.rrh form,.rrh figure,.rrh blockquote,.rrh fieldset{margin:0;padding:0}
.rrh ul,.rrh ol{list-style:none}
.rrh input,.rrh select,.rrh textarea{font-family:inherit}
.rrh img{display:block;max-width:100%}
.rrh h1,.rrh h2,.rrh h3,.rrh h4{color:var(--ink);font-weight:700;letter-spacing:-.01em;margin:0;text-wrap:balance}
.rrh a{color:var(--orange)}
.rrh button{font:inherit}
.rrh :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
.rrh .shell{max-width:1200px;margin:0 auto;padding:0 20px}
.rrh .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rrh [hidden]{display:none!important}
.rrh .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- SHARED WITH keto-hub.css: section heads + carousel arrows ---------- */
.rrh .sec{max-width:1200px;margin:0 auto;padding:44px 20px 8px}
.rrh .sechead{display:flex;align-items:center;gap:14px}
.rrh .sechead .shic{width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.rrh .sechead .shic .ic{width:26px;height:26px;color:var(--orange);stroke-width:1.7}
.rrh .sechead h2{font-size:23px;line-height:1.2}
.rrh .sechead .rule{flex:1;height:1px;background:var(--line);position:relative;min-width:24px}
.rrh .sechead .rule::before{content:"";position:absolute;left:0;top:-1px;width:64px;height:3px;background:var(--orange)}
.rrh .sechead .more{font-size:13.5px;font-weight:700;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.rrh .sechead .more .ic{width:15px;height:15px;stroke-width:2.4}
.rrh .arws{display:flex;gap:6px}
.rrh .arw{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;color:var(--mute);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rrh .arw:hover{border-color:var(--orange);color:var(--orange)}
.rrh .arw[disabled]{opacity:.35;cursor:default}
.rrh .arw[disabled]:hover{border-color:var(--line);color:var(--mute)}
.rrh .arw .ic{width:17px;height:17px;stroke-width:2.4}
.rrh .sec-blurb{margin:10px 0 0;color:var(--mute);font-size:14.5px;max-width:70ch}

/* ---------- SHARED WITH keto-hub.css: the recipe card and its rail ---------- */
.rrh .row{display:grid;grid-auto-flow:column;grid-auto-columns:224px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 2px 20px;scrollbar-width:thin}
.rrh .row>*{scroll-snap-align:start}
.rrh .card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .18s ease,transform .18s ease}
.rrh .card:hover{box-shadow:0 10px 24px rgba(0,0,0,.10);transform:translateY(-2px)}
.rrh .card-media{position:relative;display:block;aspect-ratio:3/2;background:#f0f0f0}
.rrh .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rrh .badge{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.82);backdrop-filter:blur(2px);color:var(--ink);border-radius:5px;padding:4px 8px;font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.01em;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.rrh .card-b{padding:12px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.rrh .card-t{font-size:14.5px;line-height:1.34;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rrh .card-t a{color:var(--ink);text-decoration:none}
.rrh .card:hover .card-t a{color:var(--orange)}
.rrh .card-m{margin:0;font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rrh .card-m .ic{width:14px;height:14px;stroke-width:2.2;color:var(--mute)}
.rrh .card-m i{font-style:normal;color:#c2c2c2;padding:0 6px}
.rrh .card-m .mtag{white-space:nowrap}

/* ---------- buttons ---------- */
.rrh .btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;border-radius:999px;padding:13px 26px;font-size:14.5px;font-weight:700;border:0;cursor:pointer;text-decoration:none}
.rrh .btn:hover{background:var(--orange-hover);color:#fff}
.rrh .btn .ic{width:15px;height:15px;stroke-width:2.6}
.rrh .linkbtn{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:14.5px;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px;background:#fff}
.rrh .linkbtn:hover{border-color:var(--orange);color:var(--orange)}
.rrh .linkbtn .ic{width:14px;height:14px;stroke-width:2.6;color:var(--orange)}
.rrh .rowend{display:flex;justify-content:center;padding:10px 0 4px}

/* ---------- row labels ---------- */
/* A 12px letterspaced label with a hairline, not a second heading: at 17px/800 these argued with
   the 23px section heading above them. Same treatment as "quick answers" and "as featured on",
   so the page has one label system instead of three. */
.rrh .subhead{display:flex;align-items:center;gap:16px;margin:32px 0 2px}
.rrh .subhead h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.rrh .subhead .sline{flex:1;height:1px;background:var(--line);min-width:20px}
.rrh .subhead .more{margin-left:0;font-size:12.5px;font-weight:700;color:var(--orange);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:underline!important;text-underline-offset:3px}
.rrh .subhead .more .ic{width:13px;height:13px;stroke-width:2.4}
.rrh .subhead .more:hover{gap:8px}

/* ---------- bands ---------- */
.rrh .band{background:#fff;border:0}
.rrh .band--keto{background:var(--tint);border-top:1px solid var(--tint-2);border-bottom:1px solid var(--tint-2)}
/* .sec's 8px bottom is right where a white band runs into the next one; inside a tinted band it
   leaves the press row sitting on the edge. */
.rrh .band--keto .sec{padding-bottom:40px}
.rrh .band--keto .subhead .sline{background:var(--tint-2)}
.rrh .band--video .sec{padding-bottom:56px}

/* ---------- 1. hero ---------- */
/* The photograph is scaled to FIT the band rather than cropped by it, flush right, with a masked
   soft left edge. width is fixed rather than auto so the mask lands on the picture instead of on
   empty box, and the picture element is the positioned box (the <img> inside just fills it). */
.rrh .bnr{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.rrh .bnr-bg{position:absolute;display:block;top:-9%;right:0;z-index:0;width:60%;height:118%;
  -webkit-mask-image:var(--fit-mask);mask-image:var(--fit-mask)}
.rrh .bnr-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;max-width:none}
.rrh .bnr-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--fit-wash)}
.rrh .bnr-in{position:relative;z-index:2;min-height:498px;padding:44px 20px;display:flex;flex-direction:column;justify-content:center}
.rrh .bnr-in>*{max-width:560px}
.rrh .bnr h1{font-size:44px;line-height:1.08;letter-spacing:-.02em;margin:0 0 14px}
.rrh .bnr .lede{margin:0 0 24px;font-size:17px;line-height:1.55;color:var(--body)}
.rrh .capnote{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--mute)}

/* ---------- SHARED WITH keto-hub.css: the site's real Mailchimp form (28436) as one pill ----
   Markup is fixed by mc4wp: <form class="mc4wp-form"><div class="mc4wp-form-fields">
   <input type=email class=splash__email><input type=submit class=splash__button></div>
   <label style="display:none"> honeypot ...</label> ... </form>. The two controls are conjoined
   into a single rounded pill: the wrapper draws the border and the focus ring, the controls draw
   nothing. `display:contents` on any <p> keeps this working if mc4wp ever wpautop's the form. */
.rrh .nlform{display:block}
.rrh .nlform .mc4wp-form{width:100%}
.rrh .nlform .mc4wp-form-fields{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;background:#fff;
  border:1.5px solid var(--line);border-radius:999px;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease}
.rrh .nlform .mc4wp-form-fields:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(230,126,34,.20)}
.rrh .nlform .mc4wp-form-fields p{margin:0;display:contents}
.rrh .nlform input[type=email],.rrh .nlform input[type=text]{flex:1 1 auto;width:auto;min-width:0;
  border:0;background:transparent;border-radius:999px 0 0 999px;padding:13px 8px 13px 20px;
  font:inherit;font-size:14.5px;line-height:1.2;color:var(--ink)}
.rrh .nlform input[type=email]::placeholder,.rrh .nlform input[type=text]::placeholder{color:#8b8b8b}
.rrh .nlform input[type=email]:focus,.rrh .nlform input[type=text]:focus,
.rrh .nlform input[type=email]:focus-visible,.rrh .nlform input[type=text]:focus-visible{outline:none;box-shadow:none}
/* The submit is ORANGE here, where the recipe portal's copy of this block is green. The design
   of record draws the hero's newsletter CTA as an orange pill, and on this page it is the primary
   action, not a footer widget. The label ("Start Your Journey") is the real mc4wp form's and is
   shared with the old splash, so it is not ours to change from here. */
.rrh .nlform input[type=submit],.rrh .nlform button[type=submit]{flex:0 0 auto;border:0;
  border-radius:0 999px 999px 0;background:var(--orange);color:#fff;padding:13px 22px;font:inherit;
  font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;white-space:nowrap;
  -webkit-appearance:none;appearance:none}
.rrh .nlform input[type=submit]:hover,.rrh .nlform button[type=submit]:hover{background:var(--orange-hover)}
.rrh .nlform input[type=submit]:focus-visible,.rrh .nlform button[type=submit]:focus-visible{
  outline:2px solid var(--orange);outline-offset:-3px;border-radius:0 999px 999px 0}
.rrh .nlform label[style]{display:none!important}
.rrh .nlform .mc4wp-response{font-size:13px;color:var(--body)}
.rrh .nlform .mc4wp-response p{margin:8px 0 0}
/* The submitted-form message. mc4wp renders it as
   <div class="mc4wp-alert mc4wp-{error|success|notice}" role="alert"><p>...</p></div>, and
   sections/splash/splash.css (enqueued on every page) ships an UNSCOPED `.mc4wp-alert{color:#fff}`
   written for the 2021 dark splash hero. That rule sets the colour on the alert element ITSELF,
   so the var(--body) above never reaches it by inheritance, and every message this form produced
   rendered white on a white ground: invisible. The footer newsletter still sits on a dark ground
   and still wants the global rule, so it stays; these override it only inside .rrh .nlform.
   Error and success are coloured apart because an invisible-then-grey message still reads as
   "nothing happened" on a form whose only feedback is this line. */
.rrh .nlform .mc4wp-alert{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--body)}
.rrh .nlform .mc4wp-alert p{margin:0;color:inherit}
.rrh .nlform .mc4wp-alert a{color:inherit;text-decoration:underline!important}
.rrh .nlform .mc4wp-error{color:#a4291b}
.rrh .nlform .mc4wp-success{color:#1c6b41}

/* ---------- 2. what is keto ---------- */
.rrh .kintro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;align-items:start}
.rrh .sechead--plain{gap:14px}
.rrh .kintro-p{margin:16px 0 22px;font-size:15.5px;line-height:1.66;color:var(--body);max-width:62ch}
.rrh .kfacts{display:flex;flex-direction:column;gap:16px;border-left:3px solid var(--orange-lt);padding-left:18px;margin-top:10px}
.rrh .kfacts li b{display:block;font-size:21px;line-height:1.15;color:var(--ink);letter-spacing:-.01em}
.rrh .kfacts li span{display:block;font-size:13px;color:var(--mute);line-height:1.45}

/* guide cards: each one is the guide's real branded banner, title already baked in, so there is
   no overlay and no content-type label. */
.rrh .gband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:18px 0 4px}
.rrh .gcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}
.rrh .gcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.rrh .gcard-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--wash)}
.rrh .gcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rrh .gcard-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.rrh .gcard-s{font-size:13.5px;line-height:1.5;color:var(--body)}
.rrh .gcard-go{margin-top:auto;font-size:13px;font-weight:800;color:var(--orange);display:inline-flex;align-items:center;gap:6px}
.rrh .gcard-go .ic{width:13px;height:13px;stroke-width:2.6}
.rrh .gcard:hover .gcard-go{gap:9px}

/* press row: each mark is exported on a shared canvas with its optical core centred, so one
   height rule puts all seven on the same visual centreline. Sizing by pixel height does not
   work across brands: foodgawker spans ascender to descender, BuzzFeed is cap height only. */
.rrh .feat{margin-top:34px;padding-top:22px;border-top:1px solid var(--tint-2)}
.rrh .feat-lbl{text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.rrh .feat-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 30px}
.rrh .feat-row li{display:flex;align-items:center}
.rrh .feat-row img{height:46px;width:auto;display:block;filter:grayscale(1) opacity(.7)}

/* ---------- 4. read up: article carousel + quick answers ---------- */
.rrh .acarousel-wrap{position:relative;margin:14px 0 4px}
.rrh .acarousel{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.rrh .acarousel::-webkit-scrollbar{height:8px}
.rrh .acarousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.rrh .acard{flex:0 0 clamp(258px,30%,320px);scroll-snap-align:start;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface);
  box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}
.rrh .acard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.rrh .acard-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--wash)}
.rrh .acard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rrh .acard-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.rrh .acard-s{font-size:13.5px;line-height:1.5;color:var(--body)}
.rrh .acard-go{margin-top:auto;font-size:13px;font-weight:800;color:var(--orange);display:inline-flex;align-items:center;gap:6px}
.rrh .acard-go .ic{width:13px;height:13px;stroke-width:2.6}
.rrh .acard:hover .acard-go{gap:9px}
.rrh .acarousel-fade{position:absolute;top:0;right:0;bottom:16px;width:46px;pointer-events:none;background:linear-gradient(90deg,transparent,#fff)}
/* The bottom margin is doing real work: .sec only carries 8px of bottom padding, which is right
   where one white band runs into the next, but the app band below is a hard edge with a photograph
   in it, so the one-line quick-answer cards ended up sitting flush against it. */
.rrh .alinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:12px 0 34px}
.rrh .alink{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);box-shadow:var(--shadow-sm);font-size:14.5px;font-weight:700;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
.rrh .alink:hover{border-color:var(--orange);box-shadow:var(--shadow-md)}
.rrh .alink .ic{width:14px;height:14px;stroke-width:2.4;color:var(--orange);flex:none;margin-left:auto}
.rrh .alink:hover span{color:var(--orange)}

/* ---------- 5. the app ---------- */
.rrh .band--app3{position:relative;isolation:isolate;overflow:hidden;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rrh .app3-bg{position:absolute;display:block;top:0;right:0;z-index:0;height:100%;width:48%;
  -webkit-mask-image:var(--fit-mask);mask-image:var(--fit-mask)}
/* The vertical anchor is NOT `bottom`. The source is nearly square and the band is a wide box,
   so cover crops ~200 source rows off whichever end is not anchored; anchoring the bottom threw
   all of that at the top and sheared the handset's top edge off, which is the composition's
   subject. 41% keeps the whole handset in frame with headroom and lets the forearm run out of
   the bottom of the band, which is where a photograph is supposed to leave the frame. */
.rrh .app3-bg img{width:100%;height:100%;object-fit:cover;object-position:right 41%;max-width:none}
.rrh .app3-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--fit-wash)}
.rrh .app3-in{position:relative;z-index:2;padding:56px 20px 58px}
.rrh .app3-copy{max-width:600px}
.rrh .app-eyebrow{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.rrh .app3-copy h2{font-size:31px;line-height:1.16;letter-spacing:-.01em;margin:0 0 12px}
.rrh .app-lede{margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--body);max-width:52ch}
.rrh .applist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;margin:0 0 26px;max-width:600px}
.rrh .applist li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.42;color:var(--ink)}
.rrh .applist .ic{width:20px;height:20px;color:var(--orange);stroke-width:1.8;margin-top:1px}
.rrh .app3-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:24px}
.rrh .app3-second{font-size:14px;font-weight:700;color:var(--ink);text-decoration:underline!important;
  text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line)}
.rrh .app3-second:hover{color:var(--orange);text-decoration-color:var(--orange)}
.rrh .app3-proof{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line);max-width:600px}
.rrh .app3-rate{margin:0;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mute)}
.rrh .app3-stars{display:inline-flex;gap:2px;color:#00b67a}
.rrh .app3-stars .ic{width:15px;height:15px}
.rrh .app3-rate b{color:var(--ink);font-size:15px}
.rrh .app3-members{margin:0;font-size:13.5px;color:var(--mute)}

/* ---------- 6. trust ---------- */
.rrh .tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:20px 0 4px}
.rrh .tgrid li{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.rrh .tico{width:38px;height:38px;border-radius:10px;background:var(--tint);display:flex;align-items:center;justify-content:center}
.rrh .tico .ic{width:20px;height:20px;color:var(--orange);stroke-width:1.9}
.rrh .tgrid b{font-size:15px;line-height:1.3;color:var(--ink)}
.rrh .tgrid li>span:last-child{font-size:13.5px;line-height:1.55;color:var(--body)}

/* ---------- 7. video ---------- */
.rrh .vrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;padding:22px 0 4px}
.rrh .vsimple{display:flex;flex-direction:column;gap:11px}
.rrh .vsimple .vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:13px;overflow:hidden;background:var(--wash);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}
.rrh .vsimple:hover .vthumb{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.rrh .vsimple .vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rrh .vsimple .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:38px;border-radius:10px;
  background:rgba(24,20,17,.72);display:flex;align-items:center;justify-content:center;transition:background .16s ease}
/* The glyph is a right-pointing triangle in a 0 0 20 22 box: its centroid sits at x=7.33 while
   the box centre is x=10, so centring the box puts the visual mass left of centre. Nudge it
   right by about half that offset. */
.rrh .vsimple .vplay svg{width:17px;height:19px;fill:#fff;transform:translateX(8%)}
.rrh .vsimple:hover .vplay{background:var(--orange)}
.rrh .vsimple-t{font-size:14.5px;line-height:1.34;font-weight:700;color:var(--ink)}
.rrh .vsimple:hover .vsimple-t{color:var(--orange)}

/* ---------- Genesis integration ----------
   front-page.php removes the loop, so the empty content column would open a gap between the
   last band and the footer. Same three rules the recipe hub needs, under this page's body
   class. */
body.rrh-home #wrap>#inner{margin:0;padding:0;width:auto;max-width:none}
body.rrh-home #content-sidebar-wrap>#content:empty{display:none}
body.rrh-home .siteFooter{margin-top:0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .rrh .bnr-bg{width:54%}
  .rrh .app3-bg{width:44%}
  .rrh .bnr h1{font-size:38px}
}
@media (max-width:1100px){
  .rrh .gband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rrh .vrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rrh .alinks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rrh .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  /* Stacked. The picture goes full width above the copy, but it is CROPPED to a wide box
     instead of being shown whole, and it carries a bottom fade that the copy is then lifted up
     into by a negative margin. The horizontal wash is off here: it would sit over the copy as
     well as the picture. */
  .rrh .bnr-bg,.rrh .app3-bg{position:relative;top:0;right:auto;width:100%;height:auto;
    aspect-ratio:var(--m-photo-ar);max-height:var(--m-photo-cap);
    margin-bottom:calc(var(--m-photo-lift) * -1);
    -webkit-mask-image:var(--m-photo-fade);mask-image:var(--m-photo-fade)}
  .rrh .app3-bg{aspect-ratio:var(--m-photo-ar-app)}
  .rrh .bnr-bg img,.rrh .app3-bg img{width:100%;height:100%;object-fit:cover}
  /* Crop anchors: the hero keeps the garlic at the top down to the chicken plate, the app photo
     keeps the whole handset and lets the wrist go into the fade. */
  .rrh .bnr-bg img{object-position:var(--m-photo-pos)}
  .rrh .app3-bg img{object-position:var(--m-photo-pos-app)}
  /* Tablet width: a 3/2 hero would be 640px tall here and a 5/4 app photo 768px, so both crops
     widen. The app anchor rises with them to keep the handset's top edge in frame. */
  .rrh{--m-photo-ar:16/9;--m-photo-ar-app:3/2;--m-photo-pos-app:center 30%}
  .rrh .bnr-wash,.rrh .app3-wash{display:none}
  .rrh .bnr-in{min-height:0;padding-top:26px}
  .rrh .bnr-in>*{max-width:none}
  .rrh .bnr h1{font-size:32px}
  .rrh .kintro{grid-template-columns:minmax(0,1fr);gap:26px}
  .rrh .kfacts{margin-top:0}
  .rrh .app3-in{padding:26px 20px 40px}
  .rrh .app3-copy{max-width:none}
  .rrh .app3-copy h2{font-size:25px}
  .rrh .applist{grid-template-columns:minmax(0,1fr);max-width:none}
}
@media (max-width:760px){
  /* Phone width: the photographs go back to the taller crops, which is what makes the app band's
     handset fit whole above the fade. */
  .rrh{--m-photo-ar:3/2;--m-photo-ar-app:5/4;--m-photo-pos-app:center 40%}
  .rrh .sec{padding:32px 20px 8px}
  .rrh .sechead h2{font-size:19px}
  .rrh .sechead .shic{width:36px;height:36px;border-radius:9px}
  .rrh .sechead .shic .ic{width:22px;height:22px}
  /* Two columns, not a wrapping flex row: the icon owns column one and the title and the
     "more" link share column two, so a link that cannot fit beside the title drops to a second
     line starting under the TITLE TEXT. Under flex-wrap its auto margin threw it against the
     right edge instead, aligned with nothing.

     The negative block margin on the icon is what makes row-gap MEAN something. The icon is 36px
     and the h2's line box is 22.8px (19px x 1.2), so centring both in a 36px row left 6.6px of
     dead space under a ONE-LINE title and none under a wrapped one: the same row-gap read as a
     13.4px gap at 390 and a 6.8px gap at 320. Pulling 6.6px off each end makes the icon's outer
     height exactly one line, so the row is the title's own height at every width, the icon still
     sits optically centred on the first line by overflowing equally above and below, and the gap
     is the row-gap in both cases. Re-derive the 6.6 if the h2's font-size or line-height moves. */
  .rrh .sechead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;
    column-gap:10px;row-gap:7px}
  .rrh .sechead .shic{grid-area:1/1;margin-block:-6.6px}
  .rrh .sechead h2{grid-area:1/2}
  .rrh .sechead .rule{display:none}
  .rrh .sechead .more{grid-area:2/2;justify-self:start;margin-left:0}
  /* Arrows go away on touch: the rail already swipes, and a 34px control next to a 12px label
     reads as clutter. Same call the recipe portal makes. */
  .rrh .arws{display:none}
  .rrh .row{grid-auto-columns:72vw;gap:14px;padding:16px 0 18px}
  .rrh .gband{grid-template-columns:minmax(0,1fr)}
  .rrh .vrow{grid-template-columns:minmax(0,1fr)}
  .rrh .alinks{grid-template-columns:minmax(0,1fr)}
  .rrh .tgrid{grid-template-columns:minmax(0,1fr)}
  .rrh .acard{flex-basis:78%}
  .rrh .feat-row{gap:0 24px}
  .rrh .feat-row img{height:40px}
  /* space-between, not an auto left margin: on one line it still throws the link to the right
     edge, but a link that has to WRAP is then alone on its line and lands at the line's start,
     under the label, instead of hard right against nothing. */
  .rrh .subhead{flex-wrap:wrap;gap:10px;margin-top:26px;justify-content:space-between}
  .rrh .subhead .sline{display:none}
  .rrh .bnr h1{font-size:29px}
  .rrh .bnr .lede{font-size:16px}
}
/* sections/splash/splash.css ships `#mc4wp-form-1 > div.mc4wp-form-fields > input.splash__email`
   (and .splash__button) inside a <=480px block. That is an ID selector, so it outranks
   everything above and would round every corner of the email input and blow the submit label up
   to 4.2vmin. These are the only declarations in this file that need !important. */
@media (max-width:480px){
  .rrh .nlform .mc4wp-form-fields>input[type=email]{border-radius:999px 0 0 999px!important;
    font-size:14px!important;padding:13px 4px 13px 16px!important}
  .rrh .nlform .mc4wp-form-fields>input[type=submit]{font-size:12.5px!important;padding:13px 13px}
}
@media (prefers-reduced-motion:reduce){
  .rrh *{transition:none!important;scroll-behavior:auto!important}
}