/* ============================================================
   8 Minutes Help — company site
   Design tokens inherited from the Well Engaged product site so
   the company and the product read as the same house. Usage here
   is deliberately quieter: less terracotta, more air, no product
   chrome.
   ============================================================ */

:root{
  --bg: #FAF6EE;
  --bg-warm: #F3ECDD;
  --card: #FFFDF7;
  --green: #2C4739;
  --green-dark: #1E332A;
  --green-soft: #E4EBE3;
  --terracotta: #C15F30;
  --terracotta-text: #A44D1F;
  --terracotta-soft: #F1D3B9;
  --text: #3B362E;
  --text-muted: #6D6759;
  --border: #E2D8C0;
  --white: #FFFFFF;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  --radius-lg: 26px;
  --radius-sm: 10px;
  --max: 1100px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img,svg{display:block;max-width:100%;}
a{color:var(--green);}
a:hover{color:var(--green-dark);}
h1,h2,h3{font-family:var(--font-serif);color:var(--green);margin:0;line-height:1.15;}
p{margin:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
section{padding:84px 0;}
em.accent{font-style:italic;font-weight:500;color:var(--terracotta);}
.eyebrow{
  font-family:var(--font-sans);font-weight:600;font-size:0.78rem;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--terracotta-text);
  margin-bottom:14px;display:block;
}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--terracotta);outline-offset:3px;border-radius:6px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--green);color:var(--white);
  padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;z-index:100;text-decoration:none;
}
.skip-link:focus{left:0;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,238,0.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);padding:14px 0;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo-mark{
  width:40px;height:40px;border-radius:50% 50% 50% 7px;
  background:linear-gradient(135deg,#3E6650,#2C4A3A);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:1.2rem;flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-name{font-family:var(--font-serif);font-weight:700;font-size:1.22rem;color:var(--green);}
.brand-tag{font-size:0.76rem;color:var(--text-muted);}
.nav-right{display:flex;align-items:center;gap:26px;}
.nav-links{display:flex;align-items:center;gap:24px;font-size:0.94rem;font-weight:500;}
.nav-links a{text-decoration:none;color:var(--text);}
.nav-links a:hover{color:var(--green);}
.btn-pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--green);
  color:var(--white) !important;padding:11px 22px;border-radius:999px;
  font-weight:600;font-size:0.92rem;text-decoration:none;white-space:nowrap;
  transition:background 0.18s ease, transform 0.18s ease;
}
.btn-pill:hover{background:var(--green-dark);transform:translateY(-1px);}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;background:transparent;
  color:var(--green) !important;padding:10px 22px;border-radius:999px;
  font-weight:600;font-size:0.92rem;text-decoration:none;
  border:1.5px solid var(--green);transition:background 0.18s ease;
}
.btn-outline:hover{background:var(--green-soft);}
@media (max-width:820px){
  .nav-links{display:none;}
}
/* keep the wordmark on one line once the nav links are gone */
@media (max-width:460px){
  .wrap{padding:0 22px;}
  .brand-name{font-size:1.06rem;white-space:nowrap;}
  .brand-tag{display:none;}
  .logo-mark{width:36px;height:36px;font-size:1.05rem;}
  .nav .btn-pill{padding:10px 16px;font-size:0.86rem;}
}

/* ---------- Hero ---------- */
.hero{padding:76px 0 84px;position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(44,71,57,0.09) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
  mask-image:linear-gradient(to bottom, black, transparent 85%);
  pointer-events:none;
}
.hero .wrap{position:relative;}
.hero-inner{max-width:740px;margin:0 auto;text-align:center;}
.hero h1{font-size:3.1rem;font-weight:700;letter-spacing:-0.01em;text-wrap:balance;}
.hero-sub{margin:24px auto 0;font-size:1.12rem;color:var(--text-muted);max-width:58ch;line-height:1.7;}
.hero-ctas{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;}

/* Eight dots, gaining weight left to right — small things accumulating. */
.dots{display:flex;justify-content:center;gap:9px;margin-bottom:30px;}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--terracotta);}
.dots span:nth-child(1){opacity:0.16;}
.dots span:nth-child(2){opacity:0.28;}
.dots span:nth-child(3){opacity:0.40;}
.dots span:nth-child(4){opacity:0.52;}
.dots span:nth-child(5){opacity:0.64;}
.dots span:nth-child(6){opacity:0.76;}
.dots span:nth-child(7){opacity:0.88;}
.dots span:nth-child(8){opacity:1;}

@media (max-width:760px){
  .hero{padding:60px 0 68px;}
  .hero h1{font-size:2.3rem;}
  .hero-inner{text-align:left;}
  .hero-sub{margin-left:0;margin-right:0;}
  .hero-ctas{justify-content:flex-start;}
  .dots{justify-content:flex-start;}
}

/* ---------- Section heads ---------- */
.section-head{max-width:680px;margin-bottom:52px;}
.section-head h2{font-size:2.15rem;font-weight:700;text-wrap:balance;}
.section-head p{margin-top:14px;color:var(--text-muted);font-size:1.04rem;line-height:1.65;}

/* ---------- What we do (holds the product card) ---------- */
.what{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
/* Muted rather than terracotta, so it doesn't compete with the section eyebrow above it. */
.card-label{
  font-size:0.78rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;
}
/* --bg, not --card: the section is already --card, so the card would vanish into it. */
.product-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:44px 44px 40px;
}
.product-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.product-head h3{font-size:1.9rem;font-weight:700;}
.status-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-warm);color:var(--text-muted);border:1px solid var(--border);
  font-size:0.74rem;font-weight:600;letter-spacing:0.02em;
  padding:6px 13px;border-radius:999px;
}
.status-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta);flex-shrink:0;}
.product-lede{margin-top:14px;color:var(--text-muted);font-size:1.04rem;line-height:1.7;max-width:66ch;}
/* Multi-column, not grid: a grid pairs items into rows and stretches each row to
   its tallest item, so a wrapping item leaves its neighbour with a gap beneath.
   Columns let items pack tightly however long they run. */
.product-list{
  margin:24px 0 0;padding:0;list-style:none;
  columns:2;column-gap:32px;
}
.product-list li{
  position:relative;padding-left:22px;color:var(--text-muted);
  font-size:0.97rem;line-height:1.6;
  margin-bottom:12px;break-inside:avoid;
}
.product-list li:last-child{margin-bottom:0;}
.product-list li::before{
  content:"";position:absolute;left:0;top:0.62em;
  width:7px;height:7px;border-radius:50%;background:var(--terracotta-soft);
}
.product-foot{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:0.93rem;color:var(--text-muted);
}
@media (max-width:760px){
  .product-card{padding:32px 26px 30px;}
  .product-head h3{font-size:1.55rem;}
  .product-list{columns:1;}
}

/* ---------- Contact ---------- */
/* Warm band closes the page: --bg / --card / --bg / --bg-warm across the sections. */
.contact{background:var(--bg-warm);}
.contact-block{max-width:620px;}
.contact-block p{color:var(--text-muted);font-size:1rem;line-height:1.7;margin-bottom:16px;}
.contact-block p.contact-lede{font-size:1.06rem;color:var(--text);}
.contact-block a.mail{
  font-family:var(--font-serif);font-size:1.16rem;font-weight:700;color:var(--green);
  text-decoration:underline;text-decoration-color:var(--terracotta-soft);
  text-underline-offset:4px;word-break:break-word;
}
.contact-block a.mail:hover{text-decoration-color:var(--terracotta);}

/* ---------- Document pages (privacy / terms) ---------- */
.doc-hero{padding:64px 0 8px;background:var(--bg);}
.doc-hero h1{font-size:2.5rem;font-weight:700;max-width:20ch;text-wrap:balance;}
.doc-hero .updated{margin-top:16px;font-size:0.9rem;color:var(--text-muted);}
.doc{padding:40px 0 88px;background:var(--bg);}
.doc .wrap{max-width:800px;}
.doc h2{
  font-size:1.42rem;font-weight:700;margin:44px 0 14px;
  padding-top:26px;border-top:1px solid var(--border);
}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.doc h3{font-size:1.08rem;font-weight:700;margin:26px 0 10px;}
.doc p{color:var(--text);font-size:1rem;line-height:1.75;margin-bottom:16px;}
.doc ul{margin:0 0 18px;padding-left:22px;color:var(--text);line-height:1.75;font-size:1rem;}
.doc li{margin-bottom:9px;}
.doc li::marker{color:var(--terracotta);}
.doc .note{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--terracotta-soft);
  border-radius:var(--radius-sm);padding:18px 22px;margin:0 0 28px;
  font-size:0.95rem;color:var(--text-muted);line-height:1.7;
}
.doc .note p{font-size:0.95rem;color:var(--text-muted);margin-bottom:0;}
.doc address{
  font-style:normal;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:20px 24px;line-height:1.8;font-size:0.97rem;
}

/* ---------- Footer ---------- */
footer{padding:30px 0 32px;border-top:1px solid var(--border);background:var(--bg);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:0.85rem;color:var(--text-muted);
}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;}
.footer-links a{text-decoration:none;color:var(--text-muted);}
.footer-links a:hover{color:var(--green);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}