/* ============================================================
   UNTANGLE CO. — shared brand foundation
   ============================================================ */
:root{
  --cream:#FBF6EF;
  --sand:#F2E9DB;
  --backdrop:#E8DCCB;
  --peach:#ECCFB8;
  --rose:#DCA493;
  --clay:#C2825E;
  --clay-deep:#A6683E;
  --ink:#39342E;
  --taupe:#7C7066;
  --line:#E3D7C6;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--backdrop);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- knot mark (JS-injected via knot.js) ---------- */
.knot-mark{ display:inline-block; line-height:0; }
.knot-mark svg{ max-width:100%; height:auto; }

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink);
  line-height:1;
  display:inline-flex;
  align-items:flex-start;
}
.wordmark .co{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  align-self:flex-start;
  margin-left:.34em;
}

/* ---------- logo lockup (knot mark + wordmark together) ---------- */
.lockup{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:9px; }
.lockup .knot-mark{ display:block; margin-left:1px; }
.lockup .wordmark{ line-height:1; }

/* ---------- shared type helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0;
}
.eyebrow.muted{ color:var(--taupe); }
.serif-italic{ font-family:var(--serif); font-style:italic; }

/* ---------- the page sheet (screen) ---------- */
.stage{
  min-height:100vh;
  padding:48px 24px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}
.page{
  background:var(--cream);
  width:816px;
  max-width:100%;
  border-radius:3px;
  box-shadow:0 28px 70px -30px rgba(57,52,46,.45), 0 2px 8px -4px rgba(57,52,46,.18);
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:.02em;
  border:none;
  border-radius:999px;
  padding:14px 28px;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--clay); color:var(--cream); }
.btn-primary:hover{ background:var(--clay-deep); }
.btn-ghost{ background:transparent; color:var(--taupe); }
.btn-ghost:hover{ color:var(--ink); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---------- print ---------- */
@media print{
  @page{ size:8.5in 11in; margin:0; }
  html,body{ background:#fff; width:8.5in; }
  .stage{ padding:0; gap:0; display:block; }
  .page{ box-shadow:none; border-radius:0; width:8.5in; height:11in; margin:0; overflow:hidden; }
  .no-print{ display:none !important; }
  .page-break{ break-after:page; }
  .page:last-child{ break-after:auto; }
}