/* ---------------------------------------------------------------------------
   Butopia's palette, exactly as named in the brand guide — Dorado 6 and
   Persimmon 4 — and carried over unchanged from the Track My Label site so the
   parent and the product look like one company. See track-my-parcel
   public/brand/palette.md for the contrast working, which is not repeated here.

   The one rule worth restating because it is easy to break: Persimmon is
   2.81:1 on white and CANNOT carry text or a meaningful graphic. It is for
   dots, rules and the logo. --accent-dp and --warm-deep exist for everything
   that has something on top of it.
   --------------------------------------------------------------------------- */
:root{
  --ink:#1c1614; --ink2:#5f524f; --ink3:#9c8d8a;
  --brand:#6b5755; --brand-dk:#4a3c3a; --brand-lt:#f6efed;
  --accent:#ff6b53; --accent-dp:#d4442b; --warm-deep:#c23a22;
  --sand:#faf7f6; --line:#ece5e3; --panel:#fff;
  --deep:#241c1a; --deep2:#332826;
  --r:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--panel);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.08;letter-spacing:-.022em;margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 18px}}
.lede{max-width:680px}
.lede h2{font-size:clamp(28px,3.4vw,40px)}
.lede p{margin-top:16px;color:var(--ink2);font-size:17.5px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(36,28,26,.86);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;gap:16px;height:64px}
/* The supplied white lockup, which is the sun mark above a BUTOPIA wordmark — so it is
   tall rather than wide, and setting it by height rather than width is what keeps it from
   swallowing a 64px bar. 40px of a 60px bar, wordmark included, is about right.
   The artwork is #fff throughout, so it needs no override on the dark bar. */
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{display:block;height:40px;width:auto}
@media(max-width:560px){.logo img{height:34px}}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.bar nav a{color:#e8dedb;text-decoration:none;font-size:14.5px;white-space:nowrap}
.bar nav a:hover{color:#fff}
@media(max-width:820px){.bar nav a.hideable{display:none}}
@media(max-width:560px){
  .bar{gap:10px;height:60px}
  .logo{font-size:16.5px}
  .bar nav{gap:14px}
  .btn{padding:9px 15px;font-size:14px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:999px;font-weight:600;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn.pri{background:var(--accent);color:#2a0f08;border-color:var(--accent)}
.btn.pri:hover{background:#ff8069}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn.ghost:hover{border-color:rgba(255,255,255,.55)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.dark:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.btn.lg{padding:14px 24px;font-size:16.5px}

/* ---------- hero ---------- */
.hero{background:
   radial-gradient(1100px 520px at 78% 12%,rgba(255,107,83,.16),transparent 62%),
   radial-gradient(700px 400px at 8% 92%,rgba(255,107,83,.07),transparent 60%),
   var(--deep);
  color:#fff;padding:88px 0 96px;overflow:hidden}
.hero h1{font-size:clamp(38px,5.6vw,64px);max-width:15ch}
.hero .sub{margin-top:22px;font-size:clamp(17px,1.9vw,20px);color:#e2d5d1;max-width:52ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:#f4cdc4;margin-bottom:20px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.heronote{margin-top:20px;font-size:14.5px;color:#b6a5a1}

/* ---------- generic bands ---------- */
.band{padding:84px 0}
.band.sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h2{font-size:clamp(28px,3.4vw,40px)}

/* ---------- the shift ---------- */
.shift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media(max-width:900px){.shift{grid-template-columns:minmax(0,1fr);gap:34px}}
.shift p{color:var(--ink2);font-size:16.5px}
.shift p + p{margin-top:16px}
/* A pulled-out anecdote rather than a testimonial, because there is no customer quote to
   use yet and inventing one would be worse than having none. This is the prescription
   story from the brand workshop, which does the same job honestly. */
.pull{border-left:3px solid var(--accent);padding:4px 0 4px 20px;margin-top:26px}
.pull p{color:var(--ink);font-size:17px}
.pull cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--ink3)}

/* ---------- capability cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:46px}
@media(max-width:820px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px 26px;display:flex;flex-direction:column}
.card .k{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--warm-deep)}
.card h3{font-size:21px;margin-top:10px}
.card p{margin-top:12px;color:var(--ink2);font-size:15.5px}
.card ul{margin:16px 0 0;padding:0;list-style:none}
.card li{position:relative;padding-left:18px;margin-top:8px;font-size:15px;color:var(--ink2)}
.card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.card .foot{margin-top:auto;padding-top:20px}
.card a.more{color:var(--warm-deep);text-decoration:underline;text-underline-offset:3px;
  font-weight:600;font-size:15px}
.card a.more:hover{color:var(--accent-dp)}
/* The new product gets a marked card. It is the only one with a border in brand colour,
   which is the whole point of it being on this page. */
.card.feature{border-color:var(--brand);border-width:1.5px;background:var(--brand-lt)}

/* ---------- Track My Label block ---------- */
.tml{background:var(--deep2);color:#fff;border-radius:var(--r);padding:44px 40px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center}
@media(max-width:900px){.tml{grid-template-columns:minmax(0,1fr);gap:30px;padding:34px 26px}}
.tml h3{font-size:clamp(24px,3vw,32px)}
.tml p{margin-top:16px;color:#ddd0cc;font-size:16.5px}
.tml .facts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.tml .fact{border-left:2px solid var(--accent);padding-left:16px}
.tml .fact strong{display:block;font-size:15px}
.tml .fact span{font-size:14.5px;color:#bcaba7}

/* ---------- audiences ---------- */
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
@media(max-width:820px){.aud{grid-template-columns:minmax(0,1fr)}}
.aud .card h3{font-size:20px}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:52px;align-items:center}
@media(max-width:900px){.founder{grid-template-columns:minmax(0,1fr);gap:30px}}
.quote{font-size:clamp(20px,2.5vw,26px);line-height:1.35;letter-spacing:-.02em}
.quote span{color:var(--warm-deep)}
.founder p{color:var(--ink2);font-size:16.5px}
.founder p + p{margin-top:14px}

/* ---------- Isatec note ---------- */
.isatec{background:var(--brand-lt);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 24px;margin-top:44px;max-width:760px}
.isatec h3{font-size:18px}
.isatec p{margin-top:12px;color:var(--ink2);font-size:15.5px}

/* ---------- contact ---------- */
.close{background:var(--deep);color:#fff;padding:84px 0;text-align:center}
.close h2{font-size:clamp(28px,3.6vw,42px)}
.close p{margin-top:16px;color:#ddd0cc;font-size:17.5px}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:44px;
  text-align:left;max-width:800px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.details{grid-template-columns:minmax(0,1fr);gap:18px}}
.details div{font-size:15px;color:#ddd0cc;line-height:1.5}
.details strong{display:block;color:#fff;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:7px}
.details a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- footer ---------- */
footer{background:var(--deep);color:#9c8d8a;border-top:1px solid rgba(255,255,255,.08);
  padding:26px 0;font-size:14px}
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.fbar .sp{flex:1 1 auto}
.fbar a{color:#c9b9b5;text-decoration:none}
.fbar a:hover{color:#fff}

/* ---------- legal and policy pages ----------
   A single readable column. These pages are read by somebody checking a fact — a VAT
   number, whether you keep their data — not browsed, so the job is to be findable and
   unambiguous rather than to look designed. */
.doc{padding:64px 0 88px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(30px,4vw,42px)}
.doc .updated{margin-top:14px;color:var(--ink3);font-size:14.5px}
.doc h2{font-size:21px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.doc h3{font-size:17px;margin-top:26px}
.doc p{margin-top:14px;color:var(--ink2)}
.doc ul{margin:14px 0 0;padding:0;list-style:none}
.doc li{position:relative;padding-left:18px;margin-top:9px;color:var(--ink2)}
.doc li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.doc a{color:var(--warm-deep);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--accent-dp)}
/* A definition list for the statutory facts. Two columns of unequal weight, collapsing
   to one on a phone — the same pattern the product page uses for specifications. */
.deflist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.deflist dt{color:var(--ink2);font-weight:600;white-space:nowrap}
.deflist dd{margin:0;color:var(--ink)}
@media(max-width:520px){
  .deflist{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .deflist dt{margin-top:14px}
}
.callout{background:var(--brand-lt);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin-top:30px}
.callout p{margin-top:0;color:var(--ink)}
.callout p + p{margin-top:12px}