/* =====================================================================
   Nail Refresh — independent review (nailrefresh.co.uk)
   Theme: "Botanic Lab" — warm linen + copper/oil + sage on graphite.
   Fonts: Space Grotesk (display) + Albert Sans (body).
   Own class vocabulary (.shell/.masthead/.block/.oil/.tier/.qa...).
   ===================================================================== */

:root{
  --linen:#f4f0e9;       /* warm paper canvas        */
  --paper:#fffdf9;       /* card surface             */
  --tint:#ece5d8;        /* soft tint sections       */
  --ink:#232a26;         /* warm graphite text/dark  */
  --ink-2:#39433c;       /* lighter dark             */
  --copy:#48504a;        /* body copy                */
  --mute:#827b6f;        /* muted / captions         */
  --line:#e0d7c7;        /* hairline borders         */
  --copper:#c06a32;      /* primary (the oil)        */
  --copper-d:#9c5223;    /* deep copper              */
  --copper-soft:#f3e0d0; /* copper wash              */
  --sage:#6f8f74;        /* botanical accent         */
  --sage-d:#4f6f57;
  --sage-soft:#e4ecde;
  --gold:#caa45c;        /* stars / small accents    */
  --fd:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --fb:"Albert Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  --r:10px;              /* base radius (squarer, clinical) */
  --r-s:6px;
  --rl:18px;
  --sh:0 8px 24px rgba(35,42,38,.08);
  --sh-2:0 18px 44px rgba(35,42,38,.14);
  --mw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--linen);color:var(--copy);
  font-family:var(--fb);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);line-height:1.12;margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.65rem,3.2vw,2.45rem)}
h3{font-size:1.18rem}
p{margin:0 0 1rem}
a{color:var(--copper-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
em{font-style:italic;color:var(--copper-d)}
.shell{max-width:var(--mw);margin:0 auto;padding:0 22px}
.center{text-align:center}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}

/* ---------- Buttons (squared, clinical) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--fd);font-weight:600;font-size:.96rem;letter-spacing:.005em;
  padding:13px 22px;border-radius:var(--r-s);border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-fill{background:var(--copper);color:#fff;box-shadow:0 6px 16px rgba(192,106,50,.32)}
.btn-fill:hover{background:var(--copper-d);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-sage{background:var(--sage);color:#fff}
.btn-sage:hover{background:var(--sage-d);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper-d)}
.btn-lg{padding:16px 30px;font-size:1.04rem}
.btn-block{display:flex;width:100%}

/* ---------- Disclosure bar (affiliate) ---------- */
.disclose{background:var(--ink);color:#e9e2d4;font-size:.8rem;text-align:center;
  padding:8px 16px;line-height:1.45}
.disclose b{color:#fff}

/* ---------- Masthead / nav ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(244,240,233,.92);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;
  font-size:1.18rem;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo svg{width:38px;height:38px;flex:none}
.logo .rev{font-weight:500;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sage-d);background:var(--sage-soft);padding:3px 8px;border-radius:var(--r-s)}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.menu a{color:var(--ink-2);font-weight:500;font-size:.96rem}
.menu a:hover{color:var(--copper-d);text-decoration:none}
.menu-cta{display:flex;align-items:center;gap:10px}
.toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.toggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.toggle.on span:nth-child(2){opacity:0}
.toggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Kicker / section head ---------- */
.kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:600;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sage-d);
  background:var(--sage-soft);padding:6px 13px;border-radius:var(--r-s);margin-bottom:16px}
.kick.kick--copper{color:var(--copper-d);background:var(--copper-soft)}
.kick .sq{width:8px;height:8px;border-radius:2px;background:currentColor}
.bhead{max-width:660px;margin:0 0 38px}
.bhead.is-center{margin-left:auto;margin-right:auto;text-align:center}
.bhead p{color:var(--copy);font-size:1.05rem;margin-top:12px}

/* ---------- Blocks / sections ---------- */
.block{padding:74px 0}
.block--tight{padding:48px 0}
.block--tint{background:var(--tint)}
.block--ink{background:var(--ink);color:#d9d3c6}
.block--ink h1,.block--ink h2,.block--ink h3{color:#fff}
.block--ink .bhead p{color:#bcb6a8}
.block--ink .kick{background:rgba(255,255,255,.08);color:#cfd8c9}

/* ---------- Hero / intro ---------- */
.intro{padding:64px 0 56px;background:
  radial-gradient(70% 90% at 88% 6%,var(--copper-soft),transparent 60%),
  radial-gradient(60% 80% at 4% 96%,var(--sage-soft),transparent 60%)}
.intro-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.intro h1 .hl{color:var(--copper-d)}
.lead{font-size:1.16rem;color:var(--ink-2);max-width:34em;margin:18px 0 22px}
.ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:500;color:var(--ink-2)}
.ticks .ck{width:24px;height:24px;flex:none;border-radius:var(--r-s);background:var(--copper-soft);
  color:var(--copper-d);display:grid;place-items:center;margin-top:1px}
.ticks .ck svg{width:14px;height:14px}
.intro-cta{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
.from{font-size:.9rem;color:var(--mute);font-family:var(--fd);font-weight:500}

.shot{position:relative;display:grid;place-items:center;min-height:420px}
.shot-glow{position:absolute;inset:auto;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,106,50,.22),transparent 68%);filter:blur(8px)}
.shot img{position:relative;z-index:2;height:430px;width:auto;
  filter:drop-shadow(0 26px 40px rgba(35,42,38,.28))}
.shot .ring{position:absolute;width:360px;height:360px;border:1.5px dashed rgba(111,143,116,.5);border-radius:50%;z-index:1}
.note{position:absolute;z-index:3;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:9px 13px;font-size:.82rem;font-weight:600;color:var(--ink);
  box-shadow:var(--sh);display:flex;align-items:center;gap:8px}
.note svg{width:17px;height:17px;color:var(--copper)}
.note--a{top:18px;left:-6px}
.note--b{bottom:26px;right:-6px}

/* ---------- Belt / trust strip ---------- */
.belt{background:var(--ink);color:#cfc9bb}
.belt-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding:18px 0}
.belt-row span{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:500;font-size:.9rem}
.belt-row svg{width:19px;height:19px;color:var(--copper)}

/* ---------- Troubles ---------- */
.troubles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trouble{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);
  padding:28px 26px;box-shadow:var(--sh)}
.trouble .tn{font-family:var(--fd);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  color:var(--copper);margin-bottom:10px}
.trouble h3{margin-bottom:8px}
.trouble p{margin:0;font-size:.96rem}

/* ---------- Method / mechanism ---------- */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stage{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rl);padding:30px 26px 28px}
.stage .sn{width:40px;height:40px;border-radius:var(--r-s);background:var(--copper);color:#fff;
  font-family:var(--fd);font-weight:700;display:grid;place-items:center;margin-bottom:16px}
.stage h3{margin-bottom:8px}
.stage p{margin:0;font-size:.96rem;color:#bcb6a8}

/* ---------- Oils (ingredients) ---------- */
.oils{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.oil{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);
  padding:26px 24px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.oil:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.oil .drop{width:46px;height:46px;border-radius:var(--r);background:var(--sage-soft);color:var(--sage-d);
  display:grid;place-items:center;margin-bottom:14px}
.oil .drop svg{width:24px;height:24px}
.oil .role{font-family:var(--fd);font-weight:600;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--copper-d);margin-bottom:5px}
.oil h3{margin-bottom:8px}
.oil p{margin:0;font-size:.95rem}

/* ---------- Gains (benefits) ---------- */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gain{display:flex;gap:14px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px}
.gain .gi{width:34px;height:34px;flex:none;border-radius:var(--r-s);background:var(--copper-soft);
  color:var(--copper-d);display:grid;place-items:center}
.gain .gi svg{width:18px;height:18px}
.gain h3{font-size:1.04rem;margin-bottom:4px}
.gain p{margin:0;font-size:.92rem}

/* ---------- How to use ---------- */
.howto{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.howto-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);
  padding:30px 30px 12px;box-shadow:var(--sh)}
.howto-card h3{margin-bottom:18px}
.steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:16px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps .n{width:30px;height:30px;flex:none;border-radius:50%;background:var(--sage);color:#fff;
  font-family:var(--fd);font-weight:700;font-size:.92rem;display:grid;place-items:center}
.steps strong{display:block;color:var(--ink);font-family:var(--fd)}
.steps span{font-size:.93rem;color:var(--copy)}

/* ---------- Figures (stats) ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.figure .big{font-family:var(--fd);font-weight:700;font-size:2.7rem;color:#fff;line-height:1}
.figure .lab{font-size:.9rem;color:#bcb6a8;margin-top:6px}

/* ---------- Voices (reviews) ---------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.voice{background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);
  padding:26px 24px;box-shadow:var(--sh)}
.voice .stars{color:var(--gold);letter-spacing:2px;margin-bottom:10px}
.voice p{font-size:.97rem;color:var(--ink-2)}
.voice .who{display:flex;align-items:center;gap:11px;margin-top:14px}
.voice .ava{width:38px;height:38px;border-radius:50%;background:var(--copper);color:#fff;
  font-family:var(--fd);font-weight:700;display:grid;place-items:center}
.voice .who b{display:block;color:var(--ink);font-size:.95rem}
.voice .who span{font-size:.82rem;color:var(--mute)}

/* ---------- Tiers (pricing) ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--rl);
  padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--sh);transition:.18s}
.tier:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.tier--top{border-color:var(--copper);box-shadow:var(--sh-2)}
.tier--top:hover{transform:translateY(-5px)}
.tag-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--copper);
  color:#fff;font-family:var(--fd);font-weight:600;font-size:.76rem;letter-spacing:.04em;
  padding:6px 16px;border-radius:var(--r-s);white-space:nowrap}
.tier .tname{font-family:var(--fd);font-weight:700;font-size:1.3rem;color:var(--ink)}
.tier .tsub{color:var(--mute);font-size:.9rem;margin-bottom:12px}
.tier .was{color:var(--mute);text-decoration:line-through;font-size:.92rem;margin:2px 0}
.tier .cost{display:flex;align-items:baseline;justify-content:center;gap:5px}
.tier .cost .c{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--ink)}
.tier .cost .v{font-family:var(--fd);font-weight:700;font-size:3rem;color:var(--ink);line-height:1}
.tier .cost .u{color:var(--mute);font-size:.85rem}
.tier .saved{display:inline-block;background:var(--sage-soft);color:var(--sage-d);font-weight:700;
  font-size:.82rem;font-family:var(--fd);padding:4px 12px;border-radius:var(--r-s);margin:10px 0 16px}
.tier ul{list-style:none;margin:0 0 22px;padding:0;text-align:left;display:grid;gap:9px}
.tier ul li{display:flex;gap:9px;font-size:.92rem;color:var(--copy)}
.tier ul li svg{width:17px;height:17px;color:var(--sage-d);flex:none;margin-top:3px}
.tier .btn{margin-top:auto}

/* ---------- Bottle packs composed from one image ---------- */
.solo{margin:4px auto 14px;max-width:118px}
.pack{position:relative;height:210px;width:100%;margin:4px auto 14px}
.pack img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:auto;display:block;
  filter:drop-shadow(0 12px 16px rgba(35,42,38,.26))}
/* 2-bottle pair */
.pack2 img{height:150px}
.pack2 img:nth-child(1){left:39%;z-index:2}
.pack2 img:nth-child(2){left:61%;z-index:1}
/* 3-bottle fan */
.pack3 img{height:132px;z-index:1}
.pack3 img:nth-child(1){left:31%}
.pack3 img:nth-child(3){left:69%}
.pack3 img:nth-child(2){height:164px;left:50%;z-index:3}
/* 6-bottle cluster */
.pack6 img:nth-child(1){height:108px;left:28%;bottom:48px;z-index:1;opacity:.97}
.pack6 img:nth-child(2){height:108px;left:50%;bottom:54px;z-index:1;opacity:.97}
.pack6 img:nth-child(3){height:108px;left:72%;bottom:48px;z-index:1;opacity:.97}
.pack6 img:nth-child(4){height:142px;left:33%;bottom:0;z-index:3}
.pack6 img:nth-child(5){height:152px;left:50%;bottom:0;z-index:4}
.pack6 img:nth-child(6){height:142px;left:67%;bottom:0;z-index:3}

/* ---------- Disclosure / note box ---------- */
.callbox{background:var(--copper-soft);border:1px solid #e7cdb6;border-radius:var(--r);
  padding:18px 20px;font-size:.93rem;color:var(--ink-2)}
.callbox b{color:var(--copper-d)}

/* ---------- Promise (guarantee) ---------- */
.promise{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rl);padding:34px 36px;box-shadow:var(--sh)}
.badge{width:122px;height:122px;border-radius:50%;background:var(--sage);color:#fff;
  display:grid;place-items:center;text-align:center;box-shadow:0 10px 24px rgba(79,111,87,.32)}
.badge .d{font-family:var(--fd);font-weight:700;font-size:2.2rem;line-height:1}
.badge .t{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.promise h2{margin-bottom:8px}
.promise p{margin:0}

/* ---------- FAQ accordion ---------- */
.qa{max-width:820px;margin:0 auto;display:grid;gap:12px}
.qa-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qa-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--fd);font-weight:600;font-size:1.02rem;color:var(--ink);
  padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa-q .pm{font-size:1.5rem;color:var(--copper);transition:transform .2s;flex:none;line-height:1}
.qa-item.open .qa-q .pm{transform:rotate(45deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.qa-a p{margin:0;padding:0 22px 20px;font-size:.96rem}

/* ---------- Callout band ---------- */
.callout{background:linear-gradient(120deg,var(--copper),var(--copper-d));color:#fff;
  border-radius:var(--rl);padding:52px 44px;text-align:center}
.callout h2{color:#fff;margin-bottom:10px}
.callout p{color:#ffe9da;max-width:48em;margin:0 auto 22px}
.callout .btn-fill{background:#fff;color:var(--copper-d)}
.callout .btn-fill:hover{background:#231f1c;color:#fff}

/* ---------- Subhead (inner page header) ---------- */
.subhead{background:var(--tint);border-bottom:1px solid var(--line);padding:46px 0 40px}
.crumbs{font-size:.86rem;color:var(--mute);margin-bottom:12px;font-family:var(--fd)}
.crumbs a{color:var(--mute)}
.subhead h1{margin-bottom:12px}
.subhead p{max-width:60em;color:var(--copy);margin:0}

/* ---------- Prose (guides + legal) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin:34px 0 12px}
.prose h3{margin:24px 0 8px;font-size:1.12rem}
.prose p,.prose li{color:var(--copy)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1rem}
.prose li{margin-bottom:7px}
.prose .stamp{font-family:var(--fd);font-weight:600;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sage-d);margin-bottom:18px}
.toc{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--copper);
  border-radius:var(--r);padding:20px 24px;margin:0 0 30px}
.toc strong{font-family:var(--fd);color:var(--ink);display:block;margin-bottom:8px}
.toc ol{columns:2;margin:0;padding-left:20px}
.toc a{color:var(--copper-d)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.94rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--tint);font-family:var(--fd);color:var(--ink)}
.cardbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:0 0 1rem}

/* ---------- Fine print ---------- */
.fineprint{font-size:.84rem;color:var(--mute);max-width:760px;margin:26px auto 0;text-align:center}

/* ---------- Footer ---------- */
.ender{background:var(--ink);color:#bcb6a8;padding:54px 0 28px}
.ender-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.ender-logo{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;
  font-size:1.12rem;color:#fff;margin-bottom:12px}
.ender-logo svg{width:34px;height:34px}
.ender p{font-size:.92rem;color:#9c958a;max-width:30em}
.ender h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
.ender ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ender a{color:#bcb6a8;font-size:.93rem}
.ender a:hover{color:var(--copper);text-decoration:none}
.ender-fine{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:22px}
.ender-fine p{font-size:.8rem;color:#8a8378;max-width:none}
.ender-end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:14px;
  font-size:.82rem;color:#8a8378;font-family:var(--fd)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .menu,.menu-cta .btn{display:none}
  .toggle{display:flex}
  .masthead .menu.show{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .masthead .menu.show li{padding:11px 0;border-bottom:1px solid var(--line)}
  .intro-grid,.howto{grid-template-columns:1fr;gap:34px}
  .shot{min-height:340px;order:-1}
  .troubles,.method,.oils,.gains,.voices,.tiers{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr 1fr}
  .promise{grid-template-columns:1fr;text-align:center;justify-items:center;padding:28px}
  .toc ol{columns:1}
  .ender-grid{grid-template-columns:1fr 1fr}
  .callout{padding:40px 24px}
}
@media(max-width:540px){
  .ender-grid{grid-template-columns:1fr}
  .belt-row{justify-content:flex-start;gap:14px}
}