/* Cellivoo · Mediterranean light system
Ground is warm paper, ink is a deep olive black, the accent is the brand's
own Deep Botanical Green. Gold appears as a graphic mark only: it measures
2.08:1 on paper and can never carry text. Cinematic here means scale,
full bleed light, and held frames, not darkness. */
:root{
--paper:#FAF7F0; --paper2:#F2E8D5; --white:#FFFFFF; --sand:#EFE7DA;
--ink:#14231C; --ink-soft:#4F5F55; --ink-faint:#8A9890;
--green:#0F4A32; --green-lt:#3E7355; --olive:#687A3E;
--gold:#D8A63A; --gold-dk:#8F6A1C; --sea:#A9D8E8; --sea-dk:#2E6E8E;
--line:rgba(20,35,28,.14); --line-soft:rgba(20,35,28,.08);
--d:Fraunces,Georgia,serif; --t:Geist,system-ui,sans-serif; --m:"Geist Mono",ui-monospace,monospace;
--g:clamp(1.25rem,5vw,5rem); --sec:clamp(4.5rem,10vw,10rem); --maxw:80rem;
--ease:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
font:300 clamp(1.02rem,.97rem+.26vw,1.18rem)/1.72 var(--t);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:var(--green)}
h1,h2,h3,h4{font-family:var(--d);font-weight:300;line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
::selection{background:var(--green);color:var(--paper)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--g)}
.narrow{max-width:58rem}
.sec{padding-block:var(--sec);position:relative}
.eyebrow{font:400 .66rem/1 var(--t);letter-spacing:.28em;text-transform:uppercase;color:var(--green);margin:0 0 1.5rem}
.lede{color:var(--ink-soft);font-size:clamp(1.1rem,1.75vw,1.36rem);max-width:54ch;line-height:1.66}
.small{font-size:.88rem;color:var(--ink-soft)}
.paper2{background:var(--paper2)} .sandbg{background:var(--sand)} .whitebg{background:var(--white)}
.rule{height:1px;border:0;background:var(--line);margin:0}
/* ---------- chrome ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:80;display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:.85rem var(--g);background:rgba(250,247,240,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)}
.bar a{text-decoration:none;color:var(--ink)}
/* The mark is an image rather than set type, so the typographic properties that
used to shape it are gone with it. Height is fixed and width follows, because
the lockup is 4.54:1 and constraining the wrong axis would squash it.
width/height on the , because choosing a region leaves the site entirely:
a dropdown that navigates the moment its value changes is a trap for anyone
arrowing through the options to read them.
The store you are already in is a , not a link. Linking it would offer
a journey to where the reader is standing, and on a page like /science it
would quietly throw away their place in the document.
No script and no geolocation. Sending an Australian IP to the AU store takes
the decision away from the only person who knows the answer - somebody in
Perth buying a gift for a daughter in Ohio wants this store, and no address
lookup can tell you that. */
.bar__geo{display:flex;align-items:center;gap:.15rem;flex:none}
.bar .bar__geo-o{display:flex;align-items:center;padding:.4rem .45rem;
border-bottom:1px solid transparent;transition:opacity .16s}
/* The flags are drawn in CSS rather than written into every page, because the
same two pictures appear in the header of ten files and an inline in
each would be the same drawing pasted ten times.
Not emoji. Windows ships no flag glyphs in its emoji font, so an emoji flag
renders there as the letters "US" and "AU" - which is the thing this was
asked to replace. */
.flag{display:block;width:1.35rem;height:.95rem;background-size:cover;
background-position:50%;border:1px solid rgba(34,32,29,.14)}
.flag--us{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath fill='%23fff' d='M0 0h24v16H0z'/%3E%3Cg fill='%23b22234'%3E%3Cpath d='M0 0h24v1.23H0zM0 2.46h24v1.23H0zM0 4.92h24v1.23H0zM0 7.38h24v1.23H0zM0 9.85h24v1.23H0zM0 12.31h24v1.23H0zM0 14.77h24v1.23H0z'/%3E%3C/g%3E%3Cpath fill='%233c3b6e' d='M0 0h10.4v8.61H0z'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.7' cy='1.5' r='.5'/%3E%3Ccircle cx='4.2' cy='1.5' r='.5'/%3E%3Ccircle cx='6.7' cy='1.5' r='.5'/%3E%3Ccircle cx='9.2' cy='1.5' r='.5'/%3E%3Ccircle cx='2.95' cy='3.1' r='.5'/%3E%3Ccircle cx='5.45' cy='3.1' r='.5'/%3E%3Ccircle cx='7.95' cy='3.1' r='.5'/%3E%3Ccircle cx='1.7' cy='4.7' r='.5'/%3E%3Ccircle cx='4.2' cy='4.7' r='.5'/%3E%3Ccircle cx='6.7' cy='4.7' r='.5'/%3E%3Ccircle cx='9.2' cy='4.7' r='.5'/%3E%3Ccircle cx='2.95' cy='6.3' r='.5'/%3E%3Ccircle cx='5.45' cy='6.3' r='.5'/%3E%3Ccircle cx='7.95' cy='6.3' r='.5'/%3E%3C/g%3E%3C/svg%3E")}
.flag--au{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath fill='%2300008b' d='M0 0h24v12H0z'/%3E%3Cpath fill='%23fff' d='M0 0v.67l10.67 5.33H12v-.67L1.33 0zM12 0v.67L1.33 6H0v-.67L10.67 0z'/%3E%3Cpath fill='%23fff' d='M5 0h2v6H5zM0 2h12v2H0z'/%3E%3Cpath fill='%23f00' d='M0 2.4h12v1.2H0zM5.4 0h1.2v6H5.4z'/%3E%3Cpath fill='%23f00' d='M0 0h.8L12 5.6V6h-.8L0 .4zM12 0v.4L.8 6H0v-.4L11.2 0z'/%3E%3Cg fill='%23fff'%3E%3Cpath d='m6 7 .42 1.3h1.36l-1.1.8.42 1.3L6 9.6l-1.1.8.42-1.3-1.1-.8h1.36z'/%3E%3Cpath d='m18 2.2.3.92h.97l-.78.57.3.92-.79-.57-.78.57.3-.92-.79-.57h.97zM15.6 5.5l.3.92h.96l-.78.57.3.92-.78-.57-.79.57.3-.92-.78-.57h.97zM20.4 5.5l.3.92h.96l-.78.57.3.92-.78-.57-.79.57.3-.92-.78-.57h.97zM18 8.9l.3.92h.97l-.78.57.3.92-.79-.57-.78.57.3-.92-.79-.57h.97zM19.2 6.9l.2.6h.63l-.51.37.2.6-.52-.37-.51.37.2-.6-.51-.37h.63z'/%3E%3C/g%3E%3C/svg%3E")}
/* Only what a screen reader needs: the flag is a picture, and a picture of a
flag is not the name of a store. */
.bar__geo .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The store you are not in is dimmed rather than greyed, because a flag has
its own colours and desaturating one reads as "unavailable". */
.bar .bar__geo-o{opacity:.42}
.bar a.bar__geo-o:hover{opacity:.75}
/* The current store is underlined as well as full-strength. Opacity alone is
not a label: it says nothing to a reader who cannot compare the two. */
.bar .bar__geo-o[aria-current]{opacity:1;border-bottom-color:var(--green)}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--green);z-index:81;width:0}
/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:center;gap:.8rem;background:var(--green);color:var(--paper);text-decoration:none;
padding:1.1rem 2.3rem;font:400 .95rem/1 var(--t);border:0;cursor:pointer;
transition:background .16s,transform .16s var(--ease)}
.cta:hover{background:#14603F;transform:translateY(-2px)}
.cta:active{transform:translateY(0)}
.cta--o{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cta--o:hover{background:rgba(15,74,50,.06);border-color:var(--green);color:var(--green)}
.ctas{display:flex;gap:.9rem;flex-wrap:wrap}
/* ---------- cinematic: the film plate ---------- */
.plate{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--sand)}
.plate--mid{align-items:center}
.plate__img{position:absolute;inset:0;overflow:hidden}
.plate__img img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.plate__in{position:relative;padding:0 var(--g) clamp(3rem,8vw,7rem);max-width:var(--maxw);margin-inline:auto;width:100%}
.plate__in--c{text-align:center;padding-bottom:0}
.plate h2,.plate h1{font-size:clamp(2.6rem,8vw,7rem)}
.plate h2 em,.plate h1 em{font-style:italic;color:var(--green)}
/* a soft paper wash where type sits, never a full frame overlay */
.wash{position:absolute;inset:auto 0 0 0;height:70%;
background:linear-gradient(0deg,var(--paper) 4%,rgba(250,247,240,.86) 34%,rgba(250,247,240,0) 100%)}
.wash--c{inset:0;height:100%;background:radial-gradient(60% 50% at 50% 50%,rgba(250,247,240,.93),rgba(250,247,240,.5) 70%,transparent)}
.wash--l{inset:0;height:100%;background:linear-gradient(90deg,var(--paper) 2%,rgba(250,247,240,.9) 34%,rgba(250,247,240,0) 66%)}
/* Ken Burns, driven by page scroll so it reads as a slow camera push */
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
.plate__img img{animation:kb linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.rise{animation:rz linear both;animation-timeline:view();animation-range:entry 3% cover 27%}
@keyframes rz{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.wipe{animation:wp linear both;animation-timeline:view();animation-range:entry 5% cover 34%}
@keyframes wp{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}}
/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:88% 50%}
/* The story hero is shot 16:9 with the subject held in the right third and
the ocean left open for the copy, so it needs its own crop: favour the
right when a narrow viewport has to cut horizontally, and keep her head
in frame when a wide one cuts vertically. */
.hero--life .hero__img img{object-position:62% 38%}
/* The hero frame is now a person rather than a bottle, so the wash has to
hold the copy legible without washing her out: heavier on the left third,
gone by the time it reaches her. */
.hero__wash{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(250,247,240,.95) 0%,rgba(250,247,240,.88) 30%,rgba(250,247,240,.52) 46%,rgba(250,247,240,.12) 60%,transparent 72%),
linear-gradient(0deg,rgba(250,247,240,.5),transparent 38%)}
.hero__in{position:relative;padding:clamp(6rem,10vw,8rem) var(--g) clamp(3rem,6vw,5rem);max-width:var(--maxw);
margin-inline:auto;width:100%}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);max-width:13ch}
.hero .lede{max-width:38ch}
.hero h1 em{font-style:italic;color:var(--green)}
.hero .lede{margin:1.8rem 0 2.5rem}
/* Two tidy columns of proof points rather than four stacked lines. */
.hero .trust{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.6rem 2.2rem;max-width:30rem}
.trust{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;margin-top:1.7rem;max-width:46ch;
font:400 .68rem/1 var(--t);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
/* ---------- statements ---------- */
.state{font-size:clamp(1.9rem,5vw,4.2rem);max-width:20ch}
.state--w{max-width:27ch}
/* ---------- sticky cinematic sequence ---------- */
.seq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.seq__sticky{position:sticky;top:14vh}
.seq__sticky img{width:100%;aspect-ratio:4/5;object-fit:cover}
.seq__flow>*+*{margin-top:clamp(4rem,12vw,12rem)}
@media(max-width:900px){.seq{grid-template-columns:1fr}.seq__sticky{position:static}
.seq__sticky img{aspect-ratio:16/10}.seq__flow>*+*{margin-top:3rem}}
/* ---------- the number ---------- */
.bignum{font-family:var(--d);font-weight:300;font-size:clamp(5rem,16vw,12rem);line-height:.82;color:var(--green);
letter-spacing:-.045em;font-variant-numeric:lining-nums}
.bignum sup{font-size:.28em;vertical-align:super;letter-spacing:0}
.bignum small{display:block;font-family:var(--t);font-size:clamp(.7rem,1vw,.82rem);letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-soft);margin-top:1.4rem;line-height:1.6}
/* ---------- comparison ---------- */
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;border:1px solid var(--line);
background:var(--white)}
.vs__col{padding:clamp(1.5rem,3.5vw,2.8rem)}
.vs__col--us{background:var(--green);color:var(--paper)}
.vs__col--us .vs__h,.vs__col--us .vs__v{color:var(--paper)}
.vs__col--us .vs__r{border-color:rgba(250,247,240,.22)}
.vs__col--us .vs__l{color:rgba(250,247,240,.72)}
.vs__mid{width:1px;background:var(--line)}
.vs__h{font-family:var(--d);font-size:clamp(1.3rem,2.6vw,1.9rem);margin:0 0 .3rem}
.vs__sub{font:400 .66rem/1.4 var(--t);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.8rem}
.vs__col--us .vs__sub{color:rgba(250,247,240,.6)}
.vs__r{border-top:1px solid var(--line);padding:1rem 0}
.vs__l{font:400 .64rem/1 var(--t);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.4rem}
.vs__v{font-family:var(--m);font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums}
.vs__v b{font-weight:500}
@media(max-width:820px){.vs{grid-template-columns:1fr}.vs__mid{width:auto;height:1px}}
/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl caption{text-align:left;font:400 .66rem/1 var(--t);letter-spacing:.2em;text-transform:uppercase;
color:var(--green);padding-bottom:1.1rem}
.tbl th{text-align:left;font:400 .64rem/1 var(--t);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
padding:0 1rem .9rem 0;border-bottom:1px solid var(--ink);font-weight:400}
.tbl td{padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl td:last-child,.tbl th:last-child{text-align:right;padding-right:0;font-family:var(--m);
font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--green);font-size:.86rem}
.tbl tr:hover td{background:rgba(15,74,50,.035)}
.tbl b{font-weight:500}
.tbl span{display:block;color:var(--ink-faint);font-size:.84rem;margin-top:.2rem}
@media(max-width:640px){.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
.tbl thead{display:none}.tbl tr{border-bottom:1px solid var(--line);padding:.9rem 0}
.tbl td{border:0;padding:.15rem 0}.tbl td:last-child{text-align:left}}
/* ---------- the mineral analysis grid ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.mcard{background:var(--white);border:1px solid var(--line-soft);display:flex;flex-direction:column;
transition:border-color .18s,transform .18s var(--ease)}
.mcard:hover{border-color:var(--green);transform:translateY(-3px)}
.mcard__img{aspect-ratio:1;overflow:hidden;background:var(--sand)}
.mcard__img img{width:100%;height:100%;object-fit:cover}
.mcard__b{padding:.75rem .8rem .85rem}
.mcard__s{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.mcard__sym{font-family:var(--d);font-size:1.35rem;line-height:1;color:var(--green)}
.mcard__no{font:400 .6rem/1 var(--m);color:var(--ink-faint)}
.mcard__n{font:400 .82rem/1.3 var(--t);margin:.35rem 0 .2rem}
.mcard__v{font:400 .7rem/1 var(--m);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mcard__c{display:inline-block;margin-top:.5rem;font:400 .55rem/1 var(--t);letter-spacing:.12em;
text-transform:uppercase;padding:.25rem .4rem;border:1px solid var(--line);color:var(--ink-faint)}
.mcard__c[data-c="essential"]{color:var(--green);border-color:rgba(15,74,50,.4)}
/* ---------- honest box ---------- */
.honest{border:1px solid var(--green);border-left-width:3px;padding:clamp(1.5rem,3.5vw,2.8rem);background:var(--white)}
.honest h4{font-size:clamp(1.2rem,2.3vw,1.7rem);margin-bottom:.9rem;color:var(--green)}
.honest p{margin:0 0 .9rem;color:var(--ink-soft);font-size:.98rem}
.honest p:last-child{margin-bottom:0}
.honest b{color:var(--ink);font-weight:500}
/* ---------- ledger ---------- */
.ledger{border-top:1px solid var(--line)}
.led{display:grid;grid-template-columns:5rem minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1rem,3vw,3rem);
padding:clamp(1.5rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.led__n{font:400 .72rem/1 var(--m);letter-spacing:.14em;color:var(--green)}
.led h3{font-size:clamp(1.3rem,2.4vw,2rem)}
.led p{margin:0;color:var(--ink-soft);font-size:.95rem}
@media(max-width:820px){.led{grid-template-columns:1fr;gap:.5rem}}
/* ---------- evidence ---------- */
.ev{border-top:1px solid var(--ink)}
.ev__r{display:grid;grid-template-columns:minmax(0,1fr) 11rem;gap:1.5rem;padding:1.3rem 0;
border-bottom:1px solid var(--line-soft);align-items:baseline}
.ev__r p{margin:0;font-size:.97rem}
.grade{font:400 .62rem/1.4 var(--t);letter-spacing:.15em;text-transform:uppercase;text-align:right;
border:1px solid var(--line);padding:.4rem .6rem;justify-self:end;white-space:nowrap;color:var(--ink-faint)}
.grade--h{color:var(--green);border-color:rgba(15,74,50,.4)}
.grade--p{color:var(--gold-dk);border-color:rgba(143,106,28,.4)}
@media(max-width:700px){.ev__r{grid-template-columns:1fr}.grade{justify-self:start;text-align:left}}
/* ---------- downloadable resources ---------- */
.resource-list{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem}
.resource-card{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.35rem 0;border-bottom:1px solid var(--line-soft);
color:var(--ink);text-decoration:none;transition:color .16s,transform .16s var(--ease)}
.resource-card:hover{color:var(--green);transform:translateX(4px)}
.resource-card__name{font-family:var(--d);font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.15}
.resource-card__meta{font:400 .62rem/1.3 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.resource-empty{grid-column:1/-1;margin:0;padding:1.35rem 0;color:var(--ink-soft);font-size:.95rem}
@media(max-width:700px){.resource-list{grid-template-columns:1fr}.resource-card{gap:.8rem}.resource-card__meta{font-size:.58rem}}
/* ---------- misc ---------- */
figure{margin:0}
figure img{width:100%;height:auto}
figcaption{font:400 .66rem/1.5 var(--t);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
padding-top:.9rem;border-top:1px solid var(--line-soft);margin-top:.9rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2rem}}
.nots{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.not{border:1px solid var(--line);padding:.6rem 1rem;font:400 .8rem/1 var(--t);color:var(--ink-soft)}
.not::before{content:"\00d7";color:var(--green);margin-right:.6rem}
.offer{background:var(--paper2);text-align:center}
.offer h2{font-size:clamp(2.2rem,6vw,4.6rem)}
/* ---------- the waitlist form ---------- */
/* The only input on the site, so it is built from the same three rules as
everything else: paper ground, one green, a hairline. On a phone the button
drops under the field rather than fighting it for room. */
.join{margin:0 auto;max-width:34rem;text-align:left;scroll-margin-top:6rem}
.join__l{font:400 .62rem/1 var(--t);letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 .55rem}
.join__l label{cursor:pointer}
.join__row{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap}
.join__in{flex:1 1 14rem;min-width:0;appearance:none;border:1px solid var(--line);
background:var(--white);color:var(--ink);font:300 1rem/1 var(--t);
padding:1.25rem 1.1rem;border-radius:0;transition:border-color .18s}
.join__in::placeholder{color:var(--ink-faint)}
.join__in:focus{outline:0;border-color:var(--green)}
.join__in:user-invalid{border-color:#9a3b2c}
.join__b{flex:0 0 auto;padding-block:1.25rem;font-size:.95rem;letter-spacing:.02em;
border:0;cursor:pointer;font-family:inherit;background:var(--green);color:var(--paper);
display:inline-flex;align-items:center;justify-content:center;transition:background .18s,transform .18s}
.join__b:hover{background:#14603F;transform:translateY(-2px)}
.join__note{font:400 .8rem/1.6 var(--t);color:var(--ink-soft);margin:.85rem 0 0}
.join__note.is-bad{color:#9a3b2c}
.join.is-done .join__row{opacity:.55}
.join.is-done .join__in,.join.is-done .join__b{pointer-events:none}
.cta[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.cta[aria-disabled="true"]:hover{background:var(--green);transform:none}
/* stacked, the flex basis would become a height, so hand the row back its
natural sizing and let both children run the full width */
@media(max-width:560px){.join__row{flex-direction:column}
.join__in{flex:0 0 auto;width:100%}
.join__b{width:100%;justify-content:center}}
.price{font-family:var(--d);font-size:clamp(3.2rem,9vw,5.6rem);color:var(--green);line-height:1;margin:2rem 0 .3rem}
.price s{font-size:.32em;color:var(--ink-faint);margin-left:1rem;vertical-align:middle}
details{border-bottom:1px solid var(--line-soft);padding:1.25rem 0}
summary{cursor:pointer;font-family:var(--d);font-size:clamp(1.1rem,2vw,1.45rem);list-style:none;
display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green);font-family:var(--t);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--ink-soft);font-size:.96rem;margin:1rem 0 0;max-width:66ch}
footer{padding:2.4rem var(--g);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem 2rem;
justify-content:space-between;font:400 .68rem/1 var(--t);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
/* Labelled detail rows — contact details, and anywhere else a short list of
label/value pairs needs to read as part of this site rather than as a
browser's default , which indents the value and loses the label. */
/* Long-form policy pages. These run to a hundred-odd elements, so the rhythm
between a section heading and its body is doing most of the readability work
— without it the whole document reads as one undifferentiated wall. */
.legal h2{font-family:var(--d);font-weight:300;font-size:clamp(1.15rem,2vw,1.4rem);
line-height:1.25;letter-spacing:-.01em;margin:2.8rem 0 .9rem;color:var(--ink)}
.legal p{color:var(--ink-soft);font-size:.95rem;line-height:1.75;margin:0 0 1rem;max-width:68ch}
.legal ul{margin:0 0 1.4rem}
/* Legal lists must NOT use .assure. That style draws a green tick, and half
these lists are exclusions — "they are NOT intended to:" followed by ticked
items reads as affirming precisely what the sentence denies. A neutral rule
carries no opinion about its own contents. */
.legal__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem}
.legal__list li{position:relative;padding-left:1.5rem;font-size:.95rem;
color:var(--ink-soft);line-height:1.7;max-width:66ch}
.legal__list li::before{content:"";position:absolute;left:0;top:.78em;
width:.7rem;height:1px;background:var(--ink-faint)}
.legal p.legal__meta{font:400 .68rem/1.7 var(--t);letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-faint);margin:0 0 2.6rem !important;padding-bottom:1.4rem;
border-bottom:1px solid var(--line-soft)}
/* A short standalone bold in the source — "ACL", "NOTE". A label, not a heading. */
.legal .lbl{font:400 .6rem/1.4 var(--t);letter-spacing:.16em;text-transform:uppercase;
color:var(--green);margin:1.8rem 0 .5rem}
/* A long standalone bold: the source used it for the passage it wants read first. */
.legal .callout{background:var(--white);border:1px solid var(--line);
border-left:2px solid var(--green);padding:1.1rem 1.3rem;color:var(--ink);
font-size:.92rem;margin:0 0 1.6rem}
.deets{margin:2.4rem 0 0;display:grid;gap:0}
.deets>div{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;align-items:baseline;
padding:1.05rem 0;border-bottom:1px solid var(--line-soft)}
.deets>div:first-child{padding-top:0}
.deets>div:last-child{border-bottom:0}
.deets dt{flex:0 0 7rem;font:400 .62rem/1.4 var(--t);letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-faint)}
.deets dd{margin:0;font:300 1rem/1.5 var(--t);color:var(--ink)}
footer a{color:inherit}
/* The footer used to be four spans on one line, one of which was the site's own
URL — a link to the page you are already on. It is now three stacked blocks:
who made it, the legal line, and where to go next. */
.foot__b{display:flex;flex-direction:column;gap:.55rem}
.foot__n{color:var(--green)}
/* The footer sets everything in uppercase, which is fine for labels and wrong
for a registered company name: Pty Ltd is an abbreviation of "proprietary
limited", and PTY LTD reads as an acronym for something else. The legal name
keeps its own capitals. */
.foot__co{text-transform:none;letter-spacing:.04em;font-size:.74rem}
.foot__l{max-width:44ch;line-height:2.1}
@media(max-width:640px){footer{gap:1.4rem}}
/* A mineral plate that has not been shot yet falls back to its symbol on sand,
so a partial set reads as designed rather than broken. */
.mcard__img{position:relative;display:grid;place-items:center}
.mcard__img::after{content:attr(data-sym);position:absolute;font-family:var(--d);font-size:2.4rem;
color:var(--ink-faint);opacity:0;transition:opacity .2s}
.mcard--noimg .mcard__img::after{opacity:.55}
.mcard--noimg .mcard__img img{display:none}
.mcard__img--fallback::after{opacity:.55}
@media(max-width:900px){
.hero__img img{object-position:76% 40%}
.hero--life .hero__img img{object-position:74% 26%}
.hero h1{max-width:none;font-size:clamp(2.2rem,9vw,3rem)}
.hero__wash{background:linear-gradient(0deg,var(--paper) 6%,rgba(250,247,240,.92) 46%,rgba(250,247,240,.55) 72%,rgba(250,247,240,.2))}
.plate{min-height:80svh}
}
/* ---------- who it is for ----------
The reference for this block is a two column "is this you" section: copy and
a checklist on the left, a mosaic of lifestyle frames on the right. The
checks are drawn with two borders rather than an inline SVG, because
tag_editable.py re-parses this file's HTML with lxml and lowercases
attributes, which would turn viewBox into viewbox and break the glyph. */
.fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.fit__copy{max-width:38rem}
.fit__q{margin:clamp(1.8rem,3.5vw,2.4rem) 0 0;color:var(--ink);font-weight:400}
.fit__list{list-style:none;margin:1.1rem 0 0;padding:0;border-top:1px solid var(--line-soft)}
.fit__list li{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;
border-bottom:1px solid var(--line-soft);color:var(--ink-soft);font-size:1rem;line-height:1.62}
.fit__list li::before{content:"";flex:none;width:.74rem;height:.42rem;margin-top:.55rem;
border-left:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(-45deg)}
.fit .ctas{margin-top:clamp(2rem,4vw,2.6rem)}
.fit .trust{margin-top:1.4rem}
.cta--arw::after{content:"\2192";font-size:1.05em;line-height:1;
transition:transform .16s var(--ease)}
.cta--arw:hover::after{transform:translateX(4px)}
/* Hairline gaps in the page's own line colour, so the mosaic reads as one
plate divided rather than four cards floated next to each other. */
.fit__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.fit__grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 32%}
/* Let the mosaic run out through the page gutter on wide screens. */
@media(min-width:1040px){.fit__grid{margin-right:calc(var(--g) * -1)}}
@media(max-width:900px){
.fit{grid-template-columns:1fr;gap:2.5rem}
.fit__copy{max-width:none}
.fit__grid{margin-right:0;order:-1}
}
/* ---------- the outcome row ----------
Three lifestyle frames stated as outcomes, sitting above any chemistry.
Image first, then the promise, then one sentence of plain English — the
order a reader who has never heard of beta glucan needs them in. */
.pill3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.pill{margin:0}
.pill img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%}
.pill h3{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:1.4rem 0 .7rem}
.pill p{color:var(--ink-soft);margin:0;font-size:1rem;line-height:1.62}
@media(max-width:860px){.pill3{grid-template-columns:1fr;gap:2.6rem}}
/* ---------- the parent brand ----------
Arabella gets a dark plate rather than another paper section, so the
handover from product to company reads as a change of voice. */
.arab{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
display:grid;align-items:center;min-height:min(46rem,88svh)}
.arab__img{position:absolute;inset:0}
.arab__img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.52}
/* A left scrim so the paragraph holds at AA without dimming her out of frame. */
.arab__img::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(20,35,28,.66) 0%,rgba(20,35,28,.42) 38%,transparent 62%)}
.arab__in{position:relative;max-width:var(--maxw);margin-inline:auto;width:100%;
padding:clamp(4.5rem,10vw,8rem) var(--g)}
.arab__in>*{max-width:44rem}
.arab .eyebrow{color:var(--gold)}
.arab .state{color:var(--paper);font-size:clamp(2rem,5vw,4rem)}
.arab .state em{font-style:italic;color:var(--gold)}
.arab .lede{color:rgba(250,247,240,.82)}
.arab__line{font-family:var(--d);font-weight:300;font-size:clamp(1.3rem,2.6vw,1.9rem);
line-height:1.24;margin:clamp(2.2rem,4vw,3rem) 0 0;color:var(--paper)}
.arab__by{font:400 .68rem/1.6 var(--t);letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);margin:1.1rem 0 0}
@media(max-width:900px){
.arab__img img{object-position:64% 50%;opacity:.34}
.arab__img::after{background:linear-gradient(90deg,rgba(20,35,28,.74),rgba(20,35,28,.58))}
.arab{background:#101B16}
}
/* ---------- the close ---------- */
.close{background:var(--paper2);text-align:center}
.close .state{margin-inline:auto}
.close .lede{margin-inline:auto}
.close .small{max-width:52ch;margin-inline:auto}
/* ---------- the three ingredient cards ----------
The story page states each ingredient once, in a sentence, and hands the
testing off to science.html. The deep dives live there now. */
.ing3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.ing{margin:0;display:flex;flex-direction:column}
.ing img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ing__n{font:400 .64rem/1 var(--t);letter-spacing:.2em;text-transform:uppercase;
color:var(--green);margin:1.3rem 0 .8rem}
.ing h3{font-size:clamp(1.3rem,2.3vw,1.75rem);margin:0 0 .8rem}
.ing p:not(.ing__n){color:var(--ink-soft);margin:0;font-size:1rem;line-height:1.62}
.ing__go{margin-top:1.1rem;align-self:flex-start;text-decoration:none;
font:400 .68rem/1 var(--t);letter-spacing:.16em;text-transform:uppercase;
border-bottom:1px solid var(--line);padding-bottom:.45rem;transition:border-color .16s var(--ease)}
.ing__go::after{content:" \2192"}
.ing__go:hover{border-color:var(--green)}
@media(max-width:860px){.ing3{grid-template-columns:1fr;gap:2.6rem}}
/* ---------- science.html furniture ----------
A landing strip for anyone who arrives on the evidence page from a search
result rather than from the story. */
.whence{padding-block:clamp(2rem,4vw,3rem);background:var(--paper2)}
.whence p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.66}
.bar__back{color:var(--green)!important}
/* ---------- the store offer ---------- */
/* Shown when somebody has arrived at the store that is not meant for them. It
counts down and then moves them, so "Stay here" is the only control that
needs to exist - and it is a real button, focused on open, because a dialog
nobody can dismiss from the keyboard is a trap. */
.swx{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
background:rgba(34,32,29,.34);backdrop-filter:blur(2px);padding:1.5rem}
.swx__in{background:var(--paper);border:1px solid var(--line-soft);
padding:2.2rem 2rem;max-width:26rem;text-align:center}
.swx__t{font:400 1.15rem/1.4 var(--t);color:var(--ink);margin:0 0 .6rem}
.swx__s{font:300 .9rem/1.55 var(--t);color:var(--ink-soft);margin:0 0 1.5rem}
.swx .swx__b{padding:.85rem 1.8rem;font-size:.9rem}