/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Crimson Pro Fallback";src:local("Georgia");font-weight:400;size-adjust:90.69%;ascent-override:98.85%;descent-override:23.69%;line-gap-override:0.00%}
@font-face{font-family:"Crimson Pro Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:82.72%;ascent-override:108.37%;descent-override:25.97%;line-gap-override:0.00%}
@font-face{font-family:"Work Sans Fallback";src:local("Arial");font-weight:400;size-adjust:113.13%;ascent-override:82.20%;descent-override:21.48%;line-gap-override:0.00%}
@font-face{font-family:"Work Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:104.78%;ascent-override:88.76%;descent-override:23.19%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* horsewoodcare.com - Horsewood, male vitality capsule, retail desk.
------------------------------------------------------------------
Design slot, batch 12 row 87. Six levers, all six held against
govapofil.com, which is the same category built in the same batch:
Type Crimson Pro (display serif) over Work Sans (humanist UI sans)
Layout a WIDE HORIZONTAL hero - the jar laid on its side inside a
landscape frame, with a short wide measure of copy beneath it -
on an 1180px container that never narrows
Cards fill-on-hover, radius 10, hairline border at rest; the featured
price tier keeps the hover fill permanently
Ground pale birch, with ONE deep-green rule running the full page and a
birch-to-white wash under the footer
Depth hairline at rest. No shadow sits on anything until it is hovered,
focused or pressed, and then only a soft one
Motion the flow/warm-branch hero motif, plus a downward unveil on section
blocks and a rule that draws down rather than across
COLOUR comes from the jar, not from a reference site. The Horsewood label is
a black bottle carrying a copper-brown lightning field behind a dark horse,
so --accent is that copper. The birch ground and the green rule are the
slot's, and the green is used ONLY as a rule: one hairline, repeated, never
as a fill. That is what "a single deep-green rule running the full page"
means and it is the thing a reader will remember about this site.
Token names matter to two shared tools. hero_motifs.py and brand_marks.py
both read :root and pick the most saturated token inside a lightness band as
the accent, and hero_motifs picks the first token named paper/card/ground/bg
/surface above 0.9 lightness as the ground. --accent (#a8632a, sat .49) wins
the first; --paper (#f6f1e7, light .935) wins the second. --rule sits at sat
.16 and cannot outrank the copper. Checked by hand before this file shipped,
because a mis-picked token is invisible to every gate on this estate. */
:root {
/* ground */
--paper: #f6f1e7; /* pale birch. the page */
--birch: #ece2d0; /* deeper birch. slabs and the footer */
--birch-2: #e3d7c1; /* deepest birch. table headers, quiet fills */
--white: #ffffff;
/* ink */
--ink: #231f1a;
--ink-2: #5a5044;
--ink-3: #6b6152; /* was #7d7264: 3.66:1 on the footer wash */
--on-dark: #f6f1e7;
/* the jar */
--accent: #a8632a; /* copper, off the label field */
--accent-deep: #7d4519;
--accent-wash: #f3e6d8;
/* the one green rule */
--rule: #1d4634;
--rule-2: #2f5c47;
/* hairlines */
--line: #ded2bb;
--line-2: #cbbda2;
/* geometry */
--r: 10px; /* the card radius, per the slot */
--r-s: 6px;
--wrap: 1180px;
--gut: 22px;
/* depth. Nothing carries a shadow at rest; these are the lifted states. */
--lift: 0 6px 18px rgba(35, 31, 26, .10);
--lift-2: 0 10px 28px rgba(35, 31, 26, .14);
--ff-d:"Crimson Pro","Crimson Pro Fallback", Georgia, "Times New Roman", serif;
--ff-b:"Work Sans","Work Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
overflow-x: clip;
scroll-behavior: smooth;
scroll-padding-top: 96px;
}
body {
margin: 0;
overflow-x: clip;
background: var(--paper);
color: var(--ink);
font-family: var(--ff-b);
font-size: 1.0625rem; /* 17px */
line-height: 1.72;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--ff-d);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.005em;
color: var(--ink);
margin: 0 0 .5em;
}
h1 { font-size: clamp(2.05rem, 1.35rem + 2.3vw, 3.35rem); }
h2 { font-size: clamp(1.62rem, 1.24rem + 1.25vw, 2.3rem); }
h3 { font-size: clamp(1.22rem, 1.07rem + .5vw, 1.44rem); }
h4 { font-size: 1.125rem; }
p { margin: 0 0 1.05em; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rule); }
strong, b { font-weight: 600; }
.wrap {
width: min(100% - (var(--gut) * 2), var(--wrap));
margin-inline: auto;
}
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--rule);
color: var(--on-dark);
padding: 12px 18px;
z-index: 200;
border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }
.eyebrow {
display: inline-block;
font-family: var(--ff-b);
font-size: .9375rem; /* 15px */
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--rule);
margin: 0 0 .55em;
}
/* ---- buttons -------------------------------------------------------------
The ordering button in the masthead is OUTLINED, not filled: the slot puts
the filled button further down the page so the header reads as a product
header rather than as a billboard. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
font-family: var(--ff-b);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
padding: 13px 22px;
border-radius: var(--r-s);
border: 1.5px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background-color .18s ease, color .18s ease,
border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn--cta {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
}
.btn--cta:hover, .btn--cta:focus-visible {
background: var(--accent-deep);
border-color: var(--accent-deep);
color: var(--white);
box-shadow: var(--lift);
transform: translateY(-1px);
}
.btn--ghost {
background: transparent;
color: var(--rule);
border-color: var(--rule);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
background: var(--rule);
color: var(--on-dark);
box-shadow: var(--lift);
}
.btn--gold { background: var(--rule); color: var(--on-dark); border-color: var(--rule); }
.btn--gold:hover { background: var(--rule-2); border-color: var(--rule-2); color: var(--on-dark); }
.btn--lg { font-size: 1.0625rem; padding: 16px 30px; }
.btn--block { display: flex; width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* ---- masthead ------------------------------------------------------------
One wide birch row: wordmark left, destinations right, ordering button
outlined. The deep-green rule sits DIRECTLY beneath it and is the same rule
that reappears at every section head and above the footer. */
.nav {
position: sticky;
top: 0;
z-index: 90;
background: var(--paper);
border-bottom: 2px solid var(--rule);
transition: transform .26s ease, box-shadow .26s ease, padding .26s ease;
}
.nav__prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; }
.nav__prog__f { display: block; height: 100%; width: 0; background: var(--accent); }
.nav__row {
display: flex;
align-items: center;
gap: 20px;
padding: 16px 0;
transition: padding .26s ease;
}
.nav.slim .nav__row { padding: 9px 0; }
.nav.slim { box-shadow: 0 2px 10px rgba(35, 31, 26, .07); }
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ink);
margin-right: auto;
flex: 0 0 auto;
}
.brand svg { width: 26px; height: 26px; flex: 0 0 auto; }
.brand__firm {
display: block;
font-family: var(--ff-b);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--rule);
line-height: 1.1;
}
.brand__prod {
display: block;
font-family: var(--ff-d);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.05;
color: var(--ink);
}
.brand__prod span { color: var(--accent); }
.navmenus { display: flex; }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a {
display: block;
padding: 9px 11px;
font-size: .96875rem; /* 15.5px */
font-weight: 500;
/* Measured at 1440 before this line existed: "How It Works" wrapped to three
lines and took the masthead from 78px to 134px, which also pushed the hero
frame and the H1 down by the same amount. A nav item that wraps is a nav
item that has resized the header. */
white-space: nowrap;
color: var(--ink-2);
text-decoration: none;
border-radius: var(--r-s);
border: 1px solid transparent;
transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.menu a:hover, .menu a:focus-visible { color: var(--rule); background: var(--birch); }
.menu a[aria-current="page"] { color: var(--rule); border-color: var(--line-2); }
.nav__cta { flex: 0 0 auto; }
.nav__cta .btn { padding: 10px 18px; font-size: .96875rem; }
.burger {
display: none;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--line-2);
border-radius: var(--r-s);
padding: 0;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--rule); }
/* ---- the hero ------------------------------------------------------------
WIDE AND HORIZONTAL. One column at every width: the landscape frame on top,
a short wide measure beneath it. The frame is deliberately shallow so the
H1 still lands well above the fold at 1440x900 - a stacked hero that buries
its headline is pitfall 86 and the fold is measured here, not eyeballed.
.hero__media is positioned because the warm-branch motif sizes its two
layers in PERCENT against it, at 32% and 68% of its width. That is the space
either side of the landscape frame, and it is why the frame is centred and
narrower than the column. This hero is single-column, so hero_sticky.py
correctly reports "stacked hero - skipped" and never adds its own
positioning; the rule below is the only thing holding the motif's containing
block, and removing it would re-parent both layers to the viewport. */
.hero {
position: relative;
background: var(--paper);
padding: 40px 0 46px;
border-bottom: 2px solid var(--rule);
overflow: visible;
}
.hero .wrap { position: relative; z-index: 1; }
.hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: 26px;
}
/* .hero__media IS THE MOTIF LAYER, and it is empty on purpose.
------------------------------------------------------------
warm-branch draws its two layers as pseudo-elements of .hero__media, sizes
them at 86% of that element's WIDTH with aspect-ratio 1.1, and anchors them
at `bottom: 4%` of its HEIGHT. On a conventional two-column hero the media
column is as tall as the hero, so that lands the glow inside the band.
This slot's hero is stacked: the landscape frame sits above the copy, so
when .hero__media wrapped the frame it was 232px tall. Measured at 1440:
the layers were still 922px tall (that comes from the width), `bottom: 4%`
resolved to 9px, and the bright centre of each radial ended up at roughly
y = -117 -- above the top of the document. A full-hero pixel diff between
the motif's trough and its peak found a maximum channel delta of 8, in a
165px strip at the very top of the band. It animated, it validated, and it
was invisible. That is the failure house rule 7 names by name.
So the frame moved out of the media box and the media box became what the
recipe assumes: a full-height layer behind the hero. Nothing in the recipe
changed. All three of its constraints are better satisfied than before --
no percentage-sized children (it has no children at all), no hard edge, and
the layers now clear .hero__card completely instead of hiding behind it.
`:where(.hero__media){position:relative}` in the motif block is written with
zero specificity precisely so a site can do this; the rule below wins. */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
}
/* The landscape frame.
---------------------
TWO measurements decide its width and both were taken in a browser.
1. The motif. warm-branch puts its two layers at 32% and 68% of
`.hero__media`, each 86% of the media's width and blurred. At 980px the
frame covered 8% to 92% of the column, so the only glow a reader could
see was a 100px strip at each edge, where the radial gradient is already
at its weakest. It animated, it validated, and it was invisible in a
screenshot -- which is the exact failure rule 7 names. At 720px the frame
clears roughly 230px either side at 1440, and the two layers read as what
they are: warmth spreading outward from the base of the column.
2. The void. A 980px white box holding a 220px bottle is not a frame, it is
an empty room with a bottle in it. The frame is now a two-part
composition: the bottle lying down on the left, the label's own three
numbers on the right, with the lot tag above them. */
.hero__card {
position: relative;
z-index: 1;
/* 782px and margin-inline:0, both taken from .hero__copy below. Centred at
720 the frame started at x=360 while the headline, the answer, the pills
and the figures all started at x=130, so the one image in the hero was
ranged differently from every word beneath it and from every section head
on the page. Widening it also gives the bottle somewhere to be: a 196px
jar in a 720px white box is an empty room with a bottle in it, which is
the fault the original comment named and did not quite close. */
width: min(100%, 782px);
margin-inline: 0;
min-height: 230px;
background: var(--white);
border: 1px solid var(--line);
border-left: 3px solid var(--rule);
border-radius: var(--r);
display: flex;
align-items: center;
gap: 26px;
padding: 22px 28px;
overflow: hidden;
}
/* The bottle stands up. It used to be laid on its side with a static
rotate(-90deg), which turned the one image on this site a buyer actually
reads -- HORSEWOOD, the horse, MALE ENHANCEMENT, 60 CAPSULES -- through a
right angle: at 1440 the label ran vertically inside a 782px frame at 150px
wide, and on a phone, where the frame is upright anyway, a bottle lying
across it had nothing left to justify it. The file is an upright bottle
(520x494 with its own margin), so unrotating it costs nothing and lets the
shot fill the frame it is given. Still a static size and no animation: this
is the LCP element and it is preloaded, so nothing here may move it. */
.hero__shot {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: clamp(170px, 19vw, 240px);
}
.hero__shot img {
width: 100%;
height: auto;
}
/* The right-hand half of the frame: what the panel says, in the panel's own
numbers. It fills the space the bottle does not and it is the only place on
the first screen where 118 mg appears beside the row count. */
.hero__spec {
flex: 1 1 auto;
list-style: none;
margin: 0;
padding: 0 0 0 26px;
border-left: 1px solid var(--line);
}
.hero__spec li {
display: flex;
align-items: baseline;
gap: 10px;
padding: 7px 0;
}
.hero__spec li + li { border-top: 1px solid var(--line); }
.hero__spec b {
font-family: var(--ff-d);
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
color: var(--rule);
min-width: 82px;
}
.hero__spec span { font-size: .9375rem; color: var(--ink-2); }
.hero__tag {
position: absolute;
right: 22px;
bottom: 10px;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-3);
}
/* The short wide measure. Short in LINE LENGTH, wide in the page it sits on. */
.hero__copy { max-width: 74ch; }
.hero__copy h1 { margin-bottom: .4em; }
.answer {
border-left: 3px solid var(--rule);
background: var(--white);
border-radius: 0 var(--r) var(--r) 0;
padding: 18px 22px;
margin: 0 0 18px;
}
.answer p { margin: 0; font-size: 1.09375rem; line-height: 1.66; }
.qtag {
display: block;
font-size: .875rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--rule);
margin-bottom: .45em;
}
.hero__sub {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 16px;
font-size: .96875rem;
font-weight: 500;
color: var(--ink-2);
}
.hero__sub span { display: inline-block; }
.factpills {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0 0 18px;
padding: 0;
}
.factpills li {
font-size: .9375rem;
padding: 7px 13px;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--white);
color: var(--ink-2);
}
.factpills b { color: var(--rule); font-weight: 600; }
.figures {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0 0 20px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.figures > div {
flex: 1 1 130px;
padding: 14px 18px 14px 0;
margin-right: 18px;
border-right: 1px solid var(--line);
}
.figures > div:last-child { border-right: 0; margin-right: 0; }
.figures b {
display: block;
font-family: var(--ff-d);
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: var(--accent);
}
.figures span { font-size: .9375rem; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.hero__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); }
/* --accent is 3.34:1 on the hero gradient's deepest stop; the deep copper is
5.47:1 on the same pixels. */
.hero__rating .ck { color: var(--accent-deep); font-weight: 600; letter-spacing: .08em; }
@media (max-width: 980px) {
.hero { padding: 26px 0 32px; }
.hero__grid { grid-template-columns: 1fr; gap: 20px; }
.hero__copy { max-width: none; }
.hero__card { min-height: 200px; padding: 18px 20px; gap: 18px; }
.hero__shot { width: clamp(170px, 26vw, 210px); }
.hero__shot img { width: 100%; }
.hero__spec { padding-left: 18px; }
.hero__spec b { font-size: 1.3rem; min-width: 74px; }
.figures > div { flex: 1 1 108px; padding-right: 12px; margin-right: 12px; }
.figures b { font-size: 1.7rem; }
}
@media (max-width: 620px) {
.hero { padding: 20px 0 26px; }
/* The frame turns upright below 620: a 150px bottle beside a three-row list
does not fit in 354px of gutter-to-gutter width, and the first thing to go
would be the numbers. Stacking keeps both.
And below 620 the copy leads. The grid is one column at every width, so on
a phone the 371px frame was sitting on top of the eyebrow and pushing the
H1 to y=573 and the first Order button to y=1545 -- against 189-303 and
1060-1353 on the five sister sites measured the same way. `order` moves
the frame under the copy without touching the source, which keeps the
bottle first in the markup where the preload expects it.
CORRECTED 20 Sep 2026. `order:2` alone sent the frame past the WHOLE copy
column, which is 1246px tall here, so the product landed at y=1377 -- off
the second screen. That trades one rule-12 failure for another: the H1 and
CTA came up, and the thing the page is selling went out of the hero.
.hero__grid has only two children, so `order` on the card can only put it
before or after all of the copy; it cannot interleave. `display:contents`
on .hero__copy dissolves that box so its children become grid items in
their own right, and the card can then take its proper place.
THE ORDER BELOW IS NOT hero.md's LITERAL ONE, AND THAT IS DELIBERATE.
hero.md prescribes eyebrow, H1, shot, Quick Answer, CTA. Measured here,
that puts the shot at 534 but the first Order button at 1764, because this
card is 467px tall (shot 215 + spec 142 + tag 21 + gaps and padding) and
the copy column is another 1246. The five sister sites land their first
Order button at 1060-1353, so 1764 is simply the same failure moved from
the product to the button.
Quick Answer THIRD and the shot FOURTH fixes both. Rule 12's first screen
has to carry form, dose, count and the guarantee window, and on this site
that content IS the Quick Answer; the shot then sits directly under the
block it illustrates instead of above it. Where hero.md's ordering and
rule 12's first-screen duty disagree on this page, rule 12 wins. */
.hero__copy { display: contents; }
.hero__copy > .eyebrow { order: 1; }
.hero__copy > h1 { order: 2; }
.hero__copy > .answer { order: 3; }
.hero__copy > .hero__cta{ order: 5; }
.hero__copy > .hero__sub{ order: 6; }
.hero__copy > .factpills{ order: 7; }
.hero__copy > .figures { order: 8; }
.hero__card {
order: 4;
flex-direction: column;
align-items: stretch;
gap: 14px;
min-height: 0;
padding: 16px 18px 26px;
}
.hero__shot { width: 100%; }
/* Upright card, so the jar has the whole 318px of inner width to itself.
It was using 170px of it, lying on its side; upright at 58vw it reads as
the product shot the first screen is supposed to lead with. */
.hero__shot img { width: clamp(240px, 64vw, 286px); /* rule 12 floor: 240-400px at 390 */ }
.hero__spec { padding: 0; border-left: 0; border-top: 1px solid var(--line); }
.hero__spec li { padding: 6px 0; }
.hero__spec b { font-size: 1.2rem; min-width: 66px; }
.hero__tag { right: 18px; bottom: 8px; font-size: .75rem; }
.answer { padding: 15px 16px; }
.answer p { font-size: 1.03125rem; }
.hero__cta .btn { width: 100%; }
.figures > div { flex: 1 1 96px; }
/* The masthead at 390. Measured before this block existed: the brand line,
the ordering button and the burger came to 389px inside 354px of usable
width, so the button was cut in half by the viewport edge and the burger
was off-screen entirely. The desk name moves out -- it is in the footer
NAP block on every page -- and the remaining three fit in 324px. */
.brand__firm { display: none; }
.brand__prod { font-size: 1.2rem; }
.brand { gap: 8px; padding-inline: 10px; }
.brand svg { width: 22px; height: 22px; }
.nav__row { gap: 12px; }
.nav__cta .btn { padding: 9px 12px; font-size: .875rem; }
.burger { width: 40px; height: 40px; }
}
/*!SITE-HOME-CRIT-START*/
/* ---- home hero: desktop reading order, and the fold ----------------------
Measured in a browser at 1440x900 before this block existed: the ordering
button sat at y=1156, which is 256px BELOW the 900px fold. The money page's
first screen carried a product frame, a headline and a quick answer, and
nothing at all to click.
The copy column becomes a flex column ABOVE 980 only. At 980 and below the
phone keeps DOM order, which is composed separately and is not touched
here. Above it the reading order is eyebrow, headline, the quick answer,
THE BUTTONS, the payment line, then the evidence.
The reorder alone left the button at y=892, still half-cut by the fold, so
the rest of this block is the 80px that bought: a shallower hero pad, a
tighter grid gap, a shorter frame (the jar and the spec list both fit 200px
comfortably -- checked, not assumed) and a tighter display line. The jar is
still the LCP element and is still preloaded; nothing here animates it.
Geometry, so it lives ABOVE the critical marker and is inlined into every
page. class="hero" is on index.html alone, so none of it paints anywhere
else. Re-measure at 1440x900 if any of it changes. */
@media (min-width: 981px) {
.hero { padding: 26px 0 40px; }
.hero .hero__grid { gap: 20px; }
.hero .hero__card { min-height: 200px; padding: 18px 26px; }
.hero .hero__shot { width: clamp(150px, 15vw, 200px); }
.hero .hero__shot img { width: clamp(156px, 15.5vw, 206px); }
.hero .hero__copy { display: flex; flex-direction: column; }
.hero .hero__copy h1 { line-height: 1.05; margin-bottom: .3em; }
.hero .hero__copy > .eyebrow { order: 1; margin-bottom: .4em; }
.hero .hero__copy > h1 { order: 2; }
.hero .hero__copy > .answer { order: 3; margin-bottom: 15px; padding: 16px 22px; }
.hero .hero__copy > .hero__cta { order: 4; margin-bottom: 13px; }
.hero .hero__copy > .hero__sub { order: 5; }
.hero .hero__copy > .factpills { order: 6; }
.hero .hero__copy > .figures { order: 7; }
.hero .hero__copy > .hero__rating { order: 8; }
/* The recommended tier rides 18px above the row. MARGIN, not transform:
the hover pass writes transform on .tier and would cancel it. The grid is
align-items:stretch, so a negative top margin lifts the card's TOP edge
and leaves its BOTTOM edge on the row line -- which is what keeps the
three Add To Cart buttons on the one baseline they are engineered to
share. Measured after the change, not assumed. */
.hero ~ #pricing .tier--feature { margin-top: -18px; }
}
/*!SITE-HOME-CRIT-END*/
/* ---- hero motif -- warm-branch ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(174deg,#f6f1e7,#e8d7c5 58%,#f6f1e7)}.hero__media::before{content:'';position:absolute;left:32%;bottom:4%;width:86%;aspect-ratio:1.1;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50%;filter:blur(14px);background:radial-gradient(closest-side,rgba(168,99,42,0.34),transparent 68%);animation:hwcBranch 15s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:68%;bottom:4%;width:86%;aspect-ratio:1.1;translate:-50% 0;z-index:0;pointer-events:none;border-radius:50%;filter:blur(14px);background:radial-gradient(closest-side,rgba(168,99,42,0.28),transparent 68%);animation:hwcBranch 15s ease-in-out infinite;animation-delay:1.6s}@keyframes hwcBranch{0%,100%{transform:translateY(18%) scale(.68);opacity:.14}52%{transform:translateY(-26%) scale(1.04);opacity:.56}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}
/*!CRITICAL-END*/
/* ---- sections ------------------------------------------------------------
The green rule is the site's whole structural language: it opens every
section head as a short vertical stroke, it underlines the masthead, it
edges the featured card and it caps the footer. One colour, one weight,
used repeatedly - which is why it reads as a rule running the full page
rather than as decoration. */
.sec { padding: 58px 0; }
.sec--tight { padding: 34px 0 26px; }
.sec--tint { background: var(--birch); }
.sec--white { background: var(--white); }
.sec--slab { background: var(--birch-2); }
.sec--center { text-align: center; }
.sec--center .sec__head { margin-inline: auto; }
.sec--center .lead { margin-inline: auto; }
.sec__head { max-width: 78ch; margin-bottom: 26px; }
.sec__head .rule {
display: block;
width: 3px;
height: 30px;
background: var(--rule);
margin-bottom: 14px;
transform-origin: top center;
}
.sec--center .sec__head .rule { margin-inline: auto; }
.lead {
font-size: 1.15625rem;
line-height: 1.66;
color: var(--ink-2);
max-width: 76ch;
margin-bottom: 0;
}
.crumbs { font-size: .9375rem; color: var(--ink-3); padding: 16px 0 0; margin: 0; }
.crumbs a { color: var(--rule); }
/* ---- the card system -----------------------------------------------------
FILL ON HOVER. At rest a card is a hairline on the page ground with no
shadow at all; on hover it fills with the warm wash and lifts softly. That
pairing is the slot's Cards and Depth levers in one rule, and it is why
nothing on this site carries a resting shadow. */
.card, .whycard, .tcard, .ingcard, .step, .formcard, .qa, .facts,
.guarantee, .promo, .forlist, .stats, .tier {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 22px 24px;
transition: background-color .2s ease, border-color .2s ease,
box-shadow .2s ease, transform .2s ease;
}
.sec--tint .card, .sec--tint .whycard, .sec--tint .tcard, .sec--tint .ingcard,
.sec--tint .step, .sec--tint .qa, .sec--tint .facts, .sec--tint .promo,
.sec--tint .forlist, .sec--tint .stats, .sec--tint .guarantee, .sec--tint .tier {
background: var(--white);
}
.card:hover, .whycard:hover, .tcard:hover, .ingcard:hover, .step:hover,
.qa:hover, .facts:hover, .promo:hover, .forlist:hover, .stats:hover, .tier:hover {
background: var(--accent-wash);
border-color: var(--line-2);
box-shadow: var(--lift);
transform: translateY(-2px);
}
.card h3, .whycard h3, .tcard h3, .ingcard h3, .step h3 { margin-bottom: .4em; }
.card p:last-child, .whycard p:last-child, .tcard p:last-child,
.ingcard p:last-child, .step p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.whygrid, .tgrid, .ing { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: st; }
.step { position: relative; padding-top: 26px; }
.step__n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 2px solid var(--rule);
border-radius: 50%;
font-family: var(--ff-d);
font-size: 1.125rem;
font-weight: 700;
color: var(--rule);
margin-bottom: 12px;
}
.pill {
display: inline-block;
font-size: .875rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--rule);
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 4px 12px;
margin-bottom: 10px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 1em; padding: 0; }
.chips li { font-size: .9375rem; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; }
.ticks, .keypoints { list-style: none; margin: 0 0 1em; padding: 0; }
.ticks li, .keypoints li { position: relative; padding-left: 26px; margin-bottom: .6em; }
.ticks li::before, .keypoints li::before {
content: "";
position: absolute;
left: 4px;
top: .62em;
width: 10px;
height: 2px;
background: var(--rule);
}
.note, .callout, .alert {
border: 1px solid var(--line-2);
border-left: 3px solid var(--rule);
border-radius: 0 var(--r) var(--r) 0;
background: var(--white);
padding: 18px 22px;
margin: 0 0 1.2em;
}
.alert { border-left-color: var(--accent); background: var(--accent-wash); }
.note p:last-child, .callout p:last-child, .alert p:last-child { margin-bottom: 0; }
.pullquote {
font-family: var(--ff-d);
font-size: 1.4rem;
line-height: 1.42;
color: var(--rule);
border-left: 3px solid var(--accent);
padding: 4px 0 4px 22px;
margin: 0 0 1.2em;
}
.dropcap::first-letter {
float: left;
font-family: var(--ff-d);
font-size: 3.1rem;
line-height: .86;
font-weight: 700;
color: var(--accent);
padding: 6px 10px 0 0;
}
/* A .split is a pair: the picture and the paragraph that belongs to it start
on the same line. Centring them left the first line of copy away from the top of
its own image (measured on this site at 1440), so the copy floated in the
middle of the column with dead air above and below it and stopped reading as
part of the picture beside it. Nothing overlaps and nothing overflows, which
is why no checker has ever seen it. */
.split { display: grid; gap: 30px; grid-template-columns: 1.05fr .95fr; align-items: start; }
.split--rev .split__media { order: 2; }
.split__media img { border: 1px solid var(--line); border-radius: var(--r); }
/* The artwork is sized by the artwork, not by half the wrap. Filled to its
own column these square and portrait shots stand two to five times the
height of the two or three paragraphs beside them, and no alignment rescues
a pair that far out of proportion. The cap is on the HEIGHT and the width
follows it, so a wide panel shot -- whose height is set by the column width
and not by this rule -- is untouched, and the picture keeps its aspect-ratio
box so the cap costs no CLS. Desktop only: below the stacking breakpoint the
split is one column and the picture should fill the phone. */
@media (min-width:1041px){
.split__media img{max-height:420px;width:auto;margin-inline:auto}
}
.split__media figcaption, .shots figcaption, figure figcaption {
font-size: .9375rem;
color: var(--ink-3);
margin-top: 8px;
line-height: 1.5;
}
figure { margin: 0 0 1.2em; }
/* A standalone figure inside a section, rather than one in a .split or a
.shots grid. Left-aligned in an 1180px column it sat with 600px of dead
space beside it on five home-page sections. `fit-content` centres the figure
WITHOUT touching the image's own width: setting width:100% here would
upscale the 640px lifestyle crop past its real size and pick a fight with
fix_upscaled.py, which caps exactly that. */
.sec > .wrap > figure { width: fit-content; max-width: 100%; margin-inline: auto; }
.sec > .wrap > figure figcaption { max-width: 76ch; }
.shots { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.shots--wide { grid-template-columns: 1fr; }
.shots img { border: 1px solid var(--line); border-radius: var(--r); width: 100%; }
.shots figure { margin: 0; }
/* One media box for a row whose pictures are different shapes, so the captions
in it start level. blocks.py stamps .shots--even from the width and height
attributes; only a row that needs it gets the class, and an already even row
keeps its pictures at full height. object-fit:contain scales the picture
whole on the figure's own ground -- nothing is cropped. Desktop only: below
761px the grid is one column and each picture has the phone to itself. */
@media (min-width: 761px) {
.shots--even img { height: 300px; object-fit: contain; }
}
figure.portrait img { width: var(--figw, 280px); margin-inline: auto; }
.badgewall { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center; }
.badgewall figure { margin: 0; }
.badgewall img { margin-inline: auto; width: 68px; height: auto; }
.faces { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.faces figure { margin: 0; text-align: center; }
.faces img { border-radius: var(--r); border: 1px solid var(--line); }
.tlife { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tlife figure { margin: 0; }
/* ---- the trust row -------------------------------------------------------
Sits directly under the hero, on the green rule the masthead started. */
.trust { background: var(--birch); border-bottom: 1px solid var(--line); }
.trust__row {
display: flex;
flex-wrap: wrap;
gap: 14px 30px;
align-items: center;
justify-content: space-between;
padding: 16px 0;
}
.trust__row figure { margin: 0; display: flex; align-items: center; gap: 10px; }
.trust__row figcaption { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
/* ---- tables --------------------------------------------------------------
Every wide table is wrapped by wrap_tables.py into a .tablewrap scroller. */
.tablewrap { overflow-x: auto; margin: 0 0 1.2em; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
table, .dtable { width: 100%; border-collapse: collapse; font-size: 1rem; }
.dtable th, .dtable td, table th, table td {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.dtable thead th, table thead th {
background: var(--birch-2);
font-family: var(--ff-b);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--rule);
border-bottom: 2px solid var(--rule);
}
.dtable tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0; }
.facts { padding: 0; overflow: hidden; }
.facts__h {
background: var(--rule);
color: var(--on-dark);
font-family: var(--ff-d);
font-size: 1.5rem;
font-weight: 700;
margin: 0;
padding: 12px 20px;
}
.facttab { width: 100%; border-collapse: collapse; }
.facttab th, .facttab td { padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.facttab th { text-align: left; font-weight: 500; }
.facttab td { text-align: right; white-space: nowrap; font-weight: 600; }
.facttab .sub td, .facttab .sub th { font-size: .9375rem; color: var(--ink-3); font-weight: 400; text-align: left; white-space: normal; }
/* ---- pricing -------------------------------------------------------------
The featured tier is the one card on the site that keeps the hover fill at
rest. That is the whole flag: no scaling, no shadow, no second border
colour - a tier that is already filled while its neighbours are hairlines. */
.pricing { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }
.tier { display: flex; flex-direction: column; position: relative; padding-top: 26px; }
.tier--feature {
background: var(--accent-wash);
border-color: var(--accent);
border-top: 3px solid var(--accent);
}
.sec--tint .tier--feature { background: var(--accent-wash); }
.tier--feature:hover { background: var(--accent-wash); }
.tier__flag {
position: absolute;
right: 16px;
top: -1px;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--white);
background: var(--rule);
padding: 4px 11px;
border-radius: 0 0 var(--r-s) var(--r-s);
}
.tier h3 { margin-bottom: .2em; }
.tier__supply { font-size: .9375rem; color: var(--ink-3); margin-bottom: .8em; }
.tier__price { font-family: var(--ff-d); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--rule); margin-bottom: .1em; }
.tier__price span { font-family: var(--ff-b); font-size: .9375rem; font-weight: 500; color: var(--ink-3); }
.tier__rows { list-style: none; margin: 0 0 1em; padding: 0; font-size: .96875rem; }
.tier__rows li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tier__rows li:last-child { border-bottom: 0; }
.tier .btn { margin-top: auto; }
.flag { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--accent-deep); }
.bars { margin: 0 0 1em; }
.bar { display: grid; grid-template-columns: 46px 1fr 56px; gap: 12px; align-items: center; margin-bottom: 8px; font-size: .9375rem; }
.bar__t { height: 10px; background: var(--birch-2); border-radius: 999px; overflow: hidden; }
.bar__f { display: block; height: 100%; background: var(--accent); }
.stats { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); text-align: center; }
.stats > div b { display: block; font-family: var(--ff-d); font-size: 2rem; color: var(--accent); line-height: 1; }
.stats > div span { font-size: .9375rem; color: var(--ink-2); }
.rev__stars { color: var(--accent); letter-spacing: .1em; font-size: 1.0625rem; }
.meta, .postmeta { font-size: .9375rem; color: var(--ink-3); }
.faq { border-top: 1px solid var(--line); }
.faq > div, .faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq h3 { margin-bottom: .35em; }
.faq__b p:last-child { margin-bottom: 0; }
.qa { margin-bottom: 18px; }
.qa__h { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 700; margin: 0 0 .4em; }
.whofor { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.forlist ul { margin: 0; padding-left: 20px; }
.forlist li { margin-bottom: .55em; }
.ingthumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ingcard .pill { margin-bottom: 8px; }
.ingsub { font-size: .9375rem; color: var(--ink-3); margin-bottom: .7em; font-style: italic; }
.guarantee { border-left: 3px solid var(--rule); }
.promo { background: var(--accent-wash); border-color: var(--line-2); }
.dist { font-size: .9375rem; color: var(--ink-2); }
.legal p { margin-bottom: 1em; }
.legal h2 { margin-top: 1.4em; }
.form { display: grid; gap: 16px; }
.form label { display: block; font-size: .96875rem; font-weight: 600; margin-bottom: 6px; }
.form input, .form textarea, .form select {
width: 100%;
font-family: var(--ff-b);
font-size: 1.0625rem; /* never under 16px: iOS zooms a smaller input */
padding: 12px 14px;
border: 1px solid var(--line-2);
border-radius: var(--r-s);
background: var(--white);
color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }
.formcard { background: var(--white); }
.floaty { display: none; }
.floaty--tl, .floaty--br { display: none; }
/* ---- the closing CTA ----------------------------------------------------- */
.final {
border: 1px solid var(--line-2);
border-top: 3px solid var(--rule);
border-radius: var(--r);
background: var(--white);
padding: 30px;
}
.final--media { display: grid; gap: 28px; grid-template-columns: 300px 1fr; align-items: center; }
.final__img img { border-radius: var(--r-s); }
.final h2 { margin-bottom: .35em; }
.final__price { font-weight: 600; color: var(--rule); margin-bottom: 1em; }
.rel { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rel a {
display: block;
text-align: left;
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--paper);
text-decoration: none;
color: var(--ink);
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rel a:hover { background: var(--accent-wash); box-shadow: var(--lift); transform: translateY(-2px); }
.rel b { display: block; font-family: var(--ff-d); font-size: 1.14rem; margin-bottom: .25em; }
.rel span { font-size: .9375rem; color: var(--ink-2); }
.byline {
display: grid;
gap: 18px;
grid-template-columns: 78px 1fr;
align-items: start;
border-top: 2px solid var(--rule);
padding-top: 20px;
margin: 30px 0 0;
font-size: 1rem;
}
.byline img { border-radius: 50%; }
.byline b { display: block; margin-bottom: .35em; font-size: 1.0625rem; }
.byline p { margin: 0; color: var(--ink-2); }
.refs { margin: 26px 0 0; }
.refs h3 { font-size: 1.14rem; }
.refs ol { padding-left: 20px; margin: 0; }
.refs li { font-size: .96875rem; color: var(--ink-2); margin-bottom: .6em; line-height: 1.55; overflow-wrap: anywhere; }
/* ---- blog ---------------------------------------------------------------- */
.article { max-width: 78ch; }
.article h2 { margin-top: 1.5em; }
.article h3 { margin-top: 1.2em; }
.toc {
border: 1px solid var(--line);
border-left: 3px solid var(--rule);
border-radius: 0 var(--r) var(--r) 0;
background: var(--white);
padding: 18px 22px;
margin: 0 0 1.6em;
}
.toc b { display: block; margin-bottom: .5em; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: .35em; }
.posts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.posts article {
border: 1px solid var(--line);
border-radius: var(--r);
padding: 22px 24px;
background: var(--paper);
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.posts article:hover { background: var(--accent-wash); box-shadow: var(--lift); transform: translateY(-2px); }
.posts h3 { margin-bottom: .3em; }
.article .final--media { grid-template-columns: 200px 1fr; padding: 22px; }
.article .final h2 { font-size: 1.45rem; }
/* ---- footer --------------------------------------------------------------
A birch slab with the green rule above it and a birch-to-white wash beneath
the whole thing, which is the slot's Ground lever finishing where it began.
House rule 10: nothing in here is under 15px, and the guarantee paragraph is
set at 17px in running text because this slot asks for it explicitly. */
footer {
background: linear-gradient(180deg, var(--birch), var(--white));
border-top: 3px solid var(--rule);
padding: 46px 0 34px;
font-size: 1rem;
line-height: 1.68;
}
footer .wrap { display: grid; gap: 30px; grid-template-columns: repeat(4, 1fr); }
.fintro { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.fbrand { font-family: var(--ff-d); font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.fbrand span { color: var(--accent); }
.fintro p { margin: 6px 0 0; max-width: 62ch; font-size: 1rem; color: var(--ink-2); }
.fcontact {
grid-column: 1 / -1;
display: grid;
gap: 20px;
grid-template-columns: 78px 1fr auto;
align-items: center;
border: 1px solid var(--line-2);
border-radius: var(--r);
background: var(--white);
padding: 20px 24px;
}
.fcontact__t b { display: block; font-size: 1.0625rem; margin-bottom: .3em; }
.fcontact__t p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.frow h4 {
font-family: var(--ff-b);
font-size: .9375rem; /* 15px, the rule 10 floor for headings */
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--rule);
margin: 0 0 .8em;
}
.frow ul { list-style: none; margin: 0; padding: 0; }
.frow li { margin-bottom: .1em; }
.frow a {
display: block;
padding: 5px 0;
font-size: 1rem; /* 16px, the rule 10 floor for running text */
color: var(--ink-2);
text-decoration: none;
}
.frow a:hover { color: var(--rule); text-decoration: underline; }
.fbadges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line-2); }
.fnap { grid-column: 1 / -1; }
.fnap p { margin: 0; font-size: 1rem; color: var(--ink-2); }
.fnap strong { color: var(--ink); }
.fpay { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fpay span { font-size: 1rem; color: var(--ink-2); }
.pay img { border-radius: var(--r-s); }
.disc {
grid-column: 1 / -1;
border-top: 1px solid var(--line-2);
padding-top: 20px;
}
/* The guarantee and the rest of the legal strip run at 17px, a point above the
rule 10 floor. This slot names that number, so it is set here rather than
left for footer_type.py to raise to 16. */
.disc p { font-size: 1.0625rem; line-height: 1.66; color: var(--ink-2); margin-bottom: 1em; }
.disc b { color: var(--ink); }
.disc .copy { font-size: 1rem; color: var(--ink-3); margin-bottom: 0; }
/* ---- the buy bar ---------------------------------------------------------
Present at EVERY width, including desktop. House rule 8 hands the page
between the masthead and this bar by direction of travel, and a bar that is
display:none above 760px cannot take over from anything. */
.buybar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 95;
display: flex;
align-items: center;
background: var(--rule);
color: var(--on-dark);
border-top: 2px solid var(--accent);
transform: translateY(105%);
transition: transform .26s ease;
}
.buybar.show { transform: translateY(0); }
.buybar__in {
width: min(100% - (var(--gut) * 2), var(--wrap));
margin-inline: auto;
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.buybar__t { font-size: 1rem; color: var(--on-dark); }
.buybar__t b { color: var(--white); }
.buybar__t .from { color: var(--white); font-weight: 600; }
.buybar .btn--cta { background: var(--accent); border-color: var(--accent); }
.buybar .btn--cta:hover { background: var(--white); border-color: var(--white); color: var(--rule); }
/* ---- reveal --------------------------------------------------------------
A DOWNWARD unveil, and a section rule that draws DOWN rather than across.
Both match the motif, which spreads outward from the base of the column.
Nothing here touches the hero, which holds the LCP element. */
[data-reveal] { clip-path: inset(0 0 100% 0); opacity: .001; transition: clip-path .5s ease, opacity .5s ease; }
[data-reveal].in { clip-path: inset(0 0 0 0); opacity: 1; }
[data-rule] { transform: scaleY(0); transition: transform .45s ease; }
[data-rule].in { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
[data-reveal], [data-reveal].in { clip-path: none; opacity: 1; transition: none; }
[data-rule], [data-rule].in { transform: none; transition: none; }
.btn, .card, .whycard, .tcard, .ingcard, .step, .rel a, .posts article { transition: none; }
}
/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
.navmenus {
position: fixed;
inset: 0 0 0 auto;
width: min(88vw, 340px);
background: var(--paper);
border-left: 2px solid var(--rule);
padding: 84px 22px 22px;
transform: translateX(102%);
transition: transform .26s ease;
z-index: 95;
overflow-y: auto;
}
.navmenus.open, .menu.open { transform: translateX(0); }
#menu.open { transform: translateX(0); }
.menu { flex-direction: column; gap: 2px; }
.menu a { padding: 13px 12px; font-size: 1.0625rem; }
.burger { display: flex; order: 3; }
.nav__cta { order: 2; }
.split { grid-template-columns: 1fr; }
.split--rev .split__media { order: 0; }
.final--media { grid-template-columns: 1fr; }
footer .wrap { grid-template-columns: repeat(2, 1fr); }
.fcontact { grid-template-columns: 60px 1fr; }
.fcontact .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
.sec { padding: 40px 0; }
.nav__cta .btn { padding: 9px 13px; font-size: .9375rem; }
.brand__prod { font-size: 1.35rem; }
.final { padding: 22px; }
.article .final--media { grid-template-columns: 1fr; }
.buybar__in { padding: 10px 0; }
.buybar__t { font-size: .96875rem; }
.buybar .btn { padding: 11px 18px; }
}
@media (max-width: 560px) {
:root { --gut: 18px; }
footer .wrap { grid-template-columns: 1fr; gap: 24px; }
.trust__row { justify-content: flex-start; gap: 12px 20px; }
.bar { grid-template-columns: 40px 1fr 48px; }
.buybar__in { flex-wrap: nowrap; }
.buybar__t { font-size: .9375rem; line-height: 1.4; }
}
/* --- pack cards read as one repeated object ----------------------------
A pricing row is three cards that have to share their edges, their image
slot and their button baseline. The vendor product shots are different
shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
blurbs are different lengths, so without these three rules the images
render at three sizes and the three CTAs sit at three heights.
The height lives here and not on the ![]()
attributes on purpose: those
must keep stating each file's true ratio, or fix_img_dims.py rewrites them
and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}
/* The footer column link is the thing you tap, and it was 17px tall in
35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
hit area to ~33px and the negative margin gives the space straight back,
so the footer renders identically. inline-block (not block) keeps the
hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}
/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #a8632a}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}
/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
purpose. Fading it in leaves it illegible for half a second at exactly
that moment, which reads as broken text rather than as motion. The
reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ---- home page: modern surface, and the hero trace -----------------------
PAINT ONLY. Radius, shadow, gradient, border colour, transform, animation
and transition. Nothing in this block moves a box, so it sits below the
critical marker and a restamp is enough for it.
Everything is scoped to body:has(.hero). class="hero" is on index.html
alone, so none of this reaches the other thirty pages, the legal set or the
blog -- including the header, the footer and the buy bar, which are shared.
It is also written to OUTRANK modern_surface.py and footer_type.py, which
strip and re-append their own blocks after this one on every build:
body:has(.hero) .card is (0,2,1) against their (0,1,0), so the cascade
settles it rather than the source order.
Depth is the slot's three stops -- contact, mid, wide -- tinted with this
site's own ink, rgb(35,31,26), never neutral black. */
body:has(.hero) {
--hw-rc: 28px; /* slot radius: cards and panels */
--hw-rk: 18px; /* slot radius: buttons and inputs */
--hw-o: clamp(10px, 1.4vw, 16px); /* the trace, outside the product frame.
Viewport-scaled rather than fixed: at 390 a 16px offset put the ring
2px from the viewport edge, because the frame is full-bleed there. */
--hw-d: 0 1px 2px rgba(35,31,26,.07), 0 6px 14px rgba(35,31,26,.07), 0 20px 44px rgba(35,31,26,.09);
--hw-d-lift: 0 1px 2px rgba(35,31,26,.08), 0 10px 22px rgba(35,31,26,.11), 0 28px 56px rgba(35,31,26,.15);
--hw-d-s: 0 1px 2px rgba(35,31,26,.06), 0 4px 10px rgba(35,31,26,.07);
}
/* -- panels ----------------------------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .tier,
body:has(.hero) .whycard,
body:has(.hero) .ingcard,
body:has(.hero) .step,
body:has(.hero) .qa,
body:has(.hero) .facts,
body:has(.hero) .promo,
body:has(.hero) .forlist,
body:has(.hero) .stats,
body:has(.hero) .final,
body:has(.hero) .fcontact,
body:has(.hero) .tablewrap,
body:has(.hero) .faq,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .rel a,
body:has(.hero) .posts article {
border-radius: var(--hw-rc);
box-shadow: var(--hw-d);
}
/* The two panels carrying the site's green spine keep a tight left edge, so
the 3px rule reads as a straight stroke rather than as a bent one. */
body:has(.hero) .hero__card,
body:has(.hero) .answer,
body:has(.hero) .guarantee {
border-radius: 8px var(--hw-rc) var(--hw-rc) 8px;
box-shadow: var(--hw-d);
}
body:has(.hero) .card:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .ingcard:hover,
body:has(.hero) .step:hover,
body:has(.hero) .qa:hover,
body:has(.hero) .promo:hover,
body:has(.hero) .forlist:hover,
body:has(.hero) .stats:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .posts article:hover {
box-shadow: var(--hw-d-lift);
transform: translateY(-2px);
}
/* -- controls --------------------------------------------------------- */
body:has(.hero) .btn { border-radius: var(--hw-rk); }
body:has(.hero) .menu a { border-radius: 12px; }
body:has(.hero) .burger { border-radius: 14px; }
body:has(.hero) .form input,
body:has(.hero) .form textarea,
body:has(.hero) .form select { border-radius: var(--hw-rk); }
/* The buying button is the only gradient on the page. Both stops are at or
below the flat copper this button already shipped (#a8632a -> #7d4519), so
white text can only gain contrast, never lose it. The secondary stays a
single flat fill, which is what makes the pair read as two weights. */
body:has(.hero) .btn--cta {
background-image: linear-gradient(135deg, var(--accent) 0%, #96581f 58%, var(--accent-deep) 100%);
border-color: var(--accent-deep);
box-shadow: 0 1px 2px rgba(35,31,26,.10), 0 6px 14px rgba(125,69,25,.20), 0 18px 34px rgba(125,69,25,.13);
}
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--cta:focus-visible {
background-image: linear-gradient(135deg, #96581f 0%, var(--accent-deep) 58%, #6a3a13 100%);
border-color: #6a3a13;
box-shadow: 0 2px 4px rgba(35,31,26,.12), 0 10px 22px rgba(125,69,25,.26), 0 26px 52px rgba(125,69,25,.18);
transform: translateY(-2px);
}
body:has(.hero) .hero__cta .btn--ghost {
background-color: var(--white);
border-color: var(--line-2);
color: var(--rule);
box-shadow: var(--hw-d-s);
}
body:has(.hero) .hero__cta .btn--ghost:hover,
body:has(.hero) .hero__cta .btn--ghost:focus-visible {
background-color: var(--rule);
border-color: var(--rule);
color: var(--on-dark);
box-shadow: var(--hw-d-lift);
transform: translateY(-2px);
}
body:has(.hero) .btn {
transition: background-color .18s ease, background-image .18s ease, color .18s ease,
border-color .18s ease, box-shadow .22s ease, transform .22s ease;
}
/* The global focus ring is the copper, which lands on a copper button. On the
home page the ring is the green rule instead, and white on the dark bar. */
body:has(.hero) .btn:focus-visible,
body:has(.hero) .menu a:focus-visible { outline: 3px solid var(--rule); outline-offset: 3px; }
body:has(.hero) .buybar .btn:focus-visible { outline-color: var(--white); }
body:has(.hero) .buybar .btn--cta {
background-image: linear-gradient(135deg, var(--accent) 0%, #96581f 100%);
border-color: var(--accent-deep);
}
body:has(.hero) .buybar .btn--cta:hover {
background-image: none;
background-color: var(--white);
border-color: var(--white);
color: var(--rule);
}
/* -- the hero, in passing --------------------------------------------- */
body:has(.hero) .factpills li {
border-color: rgba(168,99,42,.24);
box-shadow: 0 1px 2px rgba(35,31,26,.05);
}
body:has(.hero) .hero__tag { color: var(--accent-deep); }
/* -- the pricing ladder ------------------------------------------------
The flag becomes the slot's ribbon: an inset pill sitting ON the card's top
rule rather than a tab hanging off the corner. transform, so it cannot move
anything else -- and it is absolutely positioned, so it never had a say in
the button baseline. */
body:has(.hero) .tier__flag {
border-radius: 999px;
background: var(--white);
color: var(--rule);
border: 1px solid var(--line-2);
box-shadow: var(--hw-d-s);
transform: translateY(-50%);
}
body:has(.hero) .tier--feature .tier__flag {
background: var(--rule);
color: var(--white);
border-color: var(--rule);
}
body:has(.hero) .tier:hover {
box-shadow: var(--hw-d-lift);
transform: translateY(-2px);
}
/* The recommended tier is the differently-coloured one: a warm wash falling
to white, the copper border, and the deepest of the three shadows.
It sits AFTER the plain .tier:hover rule on purpose. Both selectors are
(0,3,1), so source order settles them -- with this block first, the
measured hover shadow on the featured card was the plain lift and the
deeper one never rendered. */
body:has(.hero) .tier--feature {
background-image: linear-gradient(180deg, #f7ecdf 0%, #ffffff 58%);
border-color: var(--accent);
box-shadow: var(--hw-d-lift);
}
body:has(.hero) .tier--feature:hover {
background-image: linear-gradient(180deg, #f4e4d2 0%, #ffffff 58%);
box-shadow: 0 2px 6px rgba(35,31,26,.10), 0 14px 30px rgba(35,31,26,.13), 0 34px 64px rgba(35,31,26,.18);
}
body:has(.hero) .tier__rows li {
border-bottom-style: dashed;
border-bottom-color: var(--line-2);
}
/* -- the hero trace ----------------------------------------------------
Slot motif: TRACE -- a single line tracing the silhouette and releasing.
It lives on the two pseudo-elements of .hero__grid, absolutely positioned
into the GRID AREA 1/1/2/2: the row that holds the product frame. That is
what makes the shape track the frame's real height at every width instead
of hard-coding one. Both sit 16px OUTSIDE the frame on all four sides, so
the shape is 32px larger than the card in each dimension and reads outside
it; a shape sized inside an opaque card renders nothing at all.
BOTH END LINES ARE WRITTEN OUT on purpose. `grid-area:1/1` measured 1153px
tall in the browser -- the whole column, copy and all -- because an `auto`
end line on an absolutely positioned grid child resolves to the grid
container's PADDING EDGE, not to the end of row 1. It looked right in the
stylesheet and was wrong on the page.
.hero__media's own two pseudo-elements are already spent on the warm-branch
glow that hero_motifs.py re-emits above the marker on every build, so this
takes the grid's pair and leaves that block untouched.
transform and opacity only. 26s and 22s -- this is a capsule taken twice a
day for weeks, not an energy drink -- and both are switched off under
prefers-reduced-motion. Nothing here touches the ![]()
: it is the LCP
element and it is preloaded. The keyframe names are new; hwcBranch, the one
name already in this stylesheet, is left alone. */
body:has(.hero) .hero__grid { position: relative; }
body:has(.hero) .hero__grid::before,
body:has(.hero) .hero__grid::after {
content: '';
position: absolute;
grid-area: 1 / 1 / 2 / 2;
left: calc(var(--hw-o) * -1);
top: calc(var(--hw-o) * -1);
bottom: calc(var(--hw-o) * -1);
width: calc(min(100%, 782px) + var(--hw-o) * 2);
pointer-events: none;
z-index: 0;
}
/* the silhouette */
body:has(.hero) .hero__grid::before {
border: 1px solid rgba(168,99,42,.42);
border-radius: calc(8px + var(--hw-o)) calc(var(--hw-rc) + var(--hw-o))
calc(var(--hw-rc) + var(--hw-o)) calc(8px + var(--hw-o));
animation: hwTraceHold 26s ease-in-out infinite;
}
/* the line that travels it, and releases */
body:has(.hero) .hero__grid::after {
background-image:
linear-gradient(90deg, rgba(168,99,42,0) 38%, rgba(125,69,25,.85) 50%, rgba(168,99,42,0) 62%),
linear-gradient(90deg, rgba(29,70,52,0) 34%, rgba(29,70,52,.45) 50%, rgba(29,70,52,0) 66%);
background-size: 100% 2px, 100% 2px;
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
animation: hwTraceRun 22s ease-in-out infinite;
}
@keyframes hwTraceHold {
0%, 100% { opacity: .50; }
50% { opacity: 1; }
}
@keyframes hwTraceRun {
0% { transform: translateX(-50%); opacity: 0; }
8% { opacity: 0; }
18% { opacity: 1; }
46% { opacity: 1; }
58% { transform: translateX(50%); opacity: 0; }
100% { transform: translateX(50%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
body:has(.hero) .hero__grid::before { animation: none; opacity: .5; }
body:has(.hero) .hero__grid::after { animation: none; opacity: 0; }
body:has(.hero) .btn:hover,
body:has(.hero) .btn--cta:hover,
body:has(.hero) .hero__cta .btn--ghost:hover,
body:has(.hero) .card:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .ingcard:hover,
body:has(.hero) .step:hover,
body:has(.hero) .qa:hover,
body:has(.hero) .promo:hover,
body:has(.hero) .forlist:hover,
body:has(.hero) .stats:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .posts article:hover,
body:has(.hero) .tier:hover { transform: none; }
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
the guarantee and the contact routes, set as fine print. Running text
and links sit at 16px, column headings at 15px (uppercase and
letter-spaced, so they read larger than the number). Last in the file
on purpose: it outranks the phone breakpoints that shrank them. */
footer .nav__cta .btn{font-size:16px}
/* ==== end footer type floor ==== */
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 18 box-shadow declaration(s)
and 3 of them layered, so every panel read flat however generous
the radius was. Two stops -- a tight contact shadow and a wide
ambient one -- is what makes a surface look raised. The tint is
this site's own ink (35,31,26), not neutral black.
Paint only: border-radius, box-shadow and transform change no
geometry, so this is safe below the critical marker and needs a
restamp rather than a rebuild. */
:root{
--r:16px;
--shadow:0 1px 2px rgba(35,31,26,.06), 0 6px 18px rgba(35,31,26,.07);
--lift:0 2px 6px rgba(35,31,26,.09), 0 16px 34px rgba(35,31,26,.14);
}
/* These panels declared no radius of their own, so raising
the token alone left them square. House rule 11 is a
floor: it outranks a slot that chose square corners. */
.keypoints,
.callout,
.alert,
.toc,
.byline,
.shots figure,
.badgewall figure,
.faq,
.answer{border-radius:var(--r)}
/* A surface a reader can click answers the pointer. 2px
registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.tier{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}