/* DSC Labs Trade-Up — brand guide styling.
   White ground, Contrast Black #141213 (the logo ink), Calibration Orange
   #e7662d, spectral gradient washes, numbered sections over hairline rules.
   DM Sans headlines / Inter body, self-hosted: no external requests. */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --black: #141213;
  --orange: #e7662d;
  --orange-dark: #cf5522;
  --blue: #3171f9;
  --amber: #eeb947;
  --bg: #ffffff;
  --sunk: #faf9f8;
  --edge: #e6e4e2;
  --edge-strong: #c9c6c3;
  --text: var(--black);
  --muted: #6d6a67;
  --danger: #c0392b;
  --ok: #4c8c2b;
  --r: 8px;
  --head: "DM Sans", -apple-system, system-ui, sans-serif;
  --body: "Inter", -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--body);
  padding: 0 18px 60px; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 780px; margin: 0 auto; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 16px; border-bottom: 1px solid var(--edge);
}
.logo { height: 34px; width: auto; display: block; }
.since {
  font-family: var(--head); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--edge-strong); border-radius: 99px; padding: 4px 12px;
}

/* ------------------------------- hero ------------------------------- */
.hero { position: relative; padding: 56px 0 46px; overflow: hidden; }
.hero-wash {
  position: absolute; top: -60px; right: -160px; bottom: auto; left: auto;
  width: 480px; height: 440px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 65% 40%, rgba(231,102,45,.55), transparent 70%),
    radial-gradient(closest-side at 40% 70%, rgba(238,185,71,.35), transparent 70%),
    radial-gradient(closest-side at 80% 75%, rgba(49,113,249,.18), transparent 70%);
  filter: blur(34px);
}
.hero > :not(.hero-wash) { position: relative; z-index: 1; }
.kicker {
  font-family: var(--head); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange); font-weight: 700;
  margin-bottom: 14px;
}
h1 {
  font-family: var(--head); font-size: clamp(40px, 7vw, 62px);
  line-height: .98; letter-spacing: -.025em; font-weight: 700;
}
.lede { margin-top: 16px; font-size: 17px; color: var(--muted); max-width: 46ch; }
.lede strong { color: var(--text); }
.cta {
  display: inline-block; margin-top: 26px;
  background: var(--black); color: #fff; text-decoration: none;
  font-family: var(--head); font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: 6px; letter-spacing: .02em;
}
.cta:hover { background: var(--orange); }

/* ------------------------------- steps ------------------------------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 30px 0 8px; border-top: 1px solid var(--edge);
}
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step .n {
  font-family: var(--head); font-weight: 700; font-size: 13px;
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--orange); color: #fff; margin-bottom: 10px;
}
.step h3 { font-family: var(--head); font-size: 16px; margin-bottom: 5px; }
.step p { color: var(--muted); font-size: 13.5px; }

/* ----------------------------- sections ----------------------------- */
.section-no {
  font-family: var(--head); font-size: 20px; font-weight: 700;
  letter-spacing: -.01em; padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 2px solid var(--black);
}
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }
.hint.centred { text-align: center; }
.hidden { display: none !important; }  /* must beat .field's display:block regardless of order */

/* ---------------------------- calculator ---------------------------- */
.calc { margin-top: 44px; scroll-margin-top: 20px; }
.calc-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px;
  align-items: start; margin-top: 20px;
}
@media (max-width: 620px) { .calc-grid { grid-template-columns: 1fr; } .calc-arrow { display: none; } }
.calc-col h4 {
  font-family: var(--head); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.calc-arrow {
  align-self: center; font-size: 26px; color: var(--orange);
  font-family: var(--head); padding-top: 20px;
}
.calc-result {
  margin-top: 24px; border: 2px solid var(--black); border-radius: var(--r);
  padding: 22px 24px; position: relative; overflow: hidden; background: #fff;
}
.calc-result::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(var(--orange), var(--amber));
}
.calc-amount {
  font-family: var(--head); font-size: clamp(28px, 5vw, 40px);
  font-weight: 700; letter-spacing: -.02em;
}
.calc-amount b { color: var(--orange); }
.calc-note { color: var(--muted); font-size: 13px; margin-top: 6px; max-width: 58ch; }
.calc-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.btn {
  font-family: var(--head); font-weight: 700; font-size: 14.5px;
  border-radius: 6px; padding: 12px 20px; cursor: pointer; text-decoration: none;
  display: inline-block; border: 0; letter-spacing: .01em;
}
.btn.solid { background: var(--orange); color: #fff; }
.btn.solid:hover { background: var(--orange-dark); }
.btn.ghost { background: #fff; color: var(--black); border: 1.5px solid var(--black); }
.btn.ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn.big { width: 100%; padding: 16px; font-size: 16px; }
.btn:disabled { opacity: .55; cursor: progress; }

/* ------------------------------- form ------------------------------- */
.claim { margin-top: 50px; }
.claim-head { margin-bottom: 18px; }
fieldset {
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--sunk); padding: 22px; margin-bottom: 18px;
}
legend {
  font-family: var(--head); padding: 0 10px; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
  font-weight: 700; background: #fff; border: 1px solid var(--edge);
  border-radius: 4px; padding: 4px 12px;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.field { display: block; margin-top: 15px; }
.grid .field { margin-top: 0; }
.grid { margin-top: 15px; }
.grid:first-of-type { margin-top: 4px; }
.field > span {
  display: block; font-size: 12.5px; color: var(--muted);
  margin-bottom: 6px; font-weight: 500;
}
.field em { color: var(--orange); font-style: normal; font-weight: 700; }
.field small { font-weight: 400; }

input, select, textarea {
  width: 100%; background: #fff; color: var(--text);
  border: 1px solid var(--edge-strong); border-radius: 6px;
  padding: 11px 12px; font: inherit; font-size: 15px;
}
input:focus, select:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange);
}
input[type="file"] { padding: 9px; cursor: pointer; }
input[type="file"]::file-selector-button {
  background: var(--black); color: #fff; border: 0; border-radius: 5px;
  padding: 7px 14px; margin-right: 12px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--orange); }
.field.invalid input, .field.invalid select { border-color: var(--danger); background: #fdf5f4; }

.estimate-box {
  margin-top: 20px; border: 2px solid var(--black); border-radius: var(--r);
  background: #fff; padding: 18px 20px; position: relative; overflow: hidden;
}
.estimate-box::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(var(--orange), var(--amber));
}
.est-label {
  font-family: var(--head); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.est-amount { font-family: var(--head); font-size: 32px; font-weight: 700; color: var(--orange); margin-top: 4px; }
.est-fine { color: var(--muted); font-size: 12px; margin-top: 6px; }

.check {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 8px 2px 14px; font-size: 13.5px; color: var(--muted);
}
.check input { width: auto; margin-top: 3px; flex: none; accent-color: var(--orange); }
.check.optional { margin-bottom: 22px; }

.errors {
  border: 1px solid var(--danger); border-left: 4px solid var(--danger);
  border-radius: 6px; background: #fdf5f4; color: #7d2820;
  padding: 14px 16px; margin-bottom: 18px; font-size: 13.5px;
}
.errors ul { margin: 6px 0 0; padding-left: 18px; }

.done { text-align: center; padding: 52px 20px; }
.tick {
  font-size: 30px; color: #fff; background: var(--ok); line-height: 54px;
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto;
}
.done h2 { font-family: var(--head); font-size: 26px; margin: 18px 0 12px; font-weight: 700; }
.done p { color: var(--muted); max-width: 50ch; margin: 0 auto 10px; font-size: 15px; }
.done strong { color: var(--text); }
.done-est { font-family: var(--head); font-size: 19px; color: var(--text) !important; font-weight: 700; }
.done-est b { color: var(--orange); }
.ticket-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; color: var(--black) !important; letter-spacing: .05em;
  margin-bottom: 14px !important; padding: 8px 14px; display: inline-block;
  background: var(--sunk); border: 1px solid var(--edge); border-radius: 6px;
}

.fine {
  margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--edge);
  color: var(--muted); font-size: 12px; line-height: 1.6;
}
.fine .mark {
  display: block; margin-top: 10px; font-family: var(--head);
  letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


.eligible {
  margin-top: 10px; font-size: 13px; color: var(--text);
  background: var(--sunk); border: 1px solid var(--edge); border-radius: 6px;
  padding: 10px 12px;
}
.ship-card {
  text-align: left; max-width: 430px; margin: 22px auto;
  border: 2px solid var(--black); border-radius: var(--r);
  padding: 18px 22px; position: relative; overflow: hidden;
}
.ship-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(var(--orange), var(--amber));
}
.ship-card h3 { font-family: var(--head); font-size: 17px; margin: 0 0 10px 8px; }
.ship-card ol { margin: 0; padding-left: 26px; color: var(--text); font-size: 14px; }
.ship-card li { margin: 8px 0; }
.ship-card address {
  font-style: normal; font-family: var(--head); font-weight: 700;
  margin-top: 4px; line-height: 1.45;
}
.ship-card a { color: var(--orange); }

.turnstile { margin: 0 0 16px; }
.notice { color: var(--text) !important; background: var(--sunk);
  border: 1px solid var(--edge); border-radius: 6px; padding: 12px 14px;
  max-width: 46ch; margin: 0 auto 12px !important; font-size: 14px; }

.older-note {
  margin-top: 18px; font-size: 13.5px; color: var(--muted);
  border-left: 3px solid var(--amber); padding: 10px 0 10px 14px;
}
.older-note strong { color: var(--text); }
.older-note a { color: var(--orange); font-weight: 600; }
.keep-note { color: var(--text) !important; max-width: 46ch; margin: 0 auto 12px !important; }
#redownload { max-width: 340px; margin: 4px auto 6px; }
#dl-note { max-width: 44ch; margin: 0 auto 6px; }

/* ------------------------- embedded in Shopify -------------------------
   The storefront supplies the logo, navigation and page padding. Inside the
   iframe we drop our own chrome and let the content use the width the theme
   gives us, instead of centring a narrow column inside a full-width section. */
html.embedded body { padding: 0 0 40px; }
html.embedded .topbar { display: none; }
html.embedded .wrap { max-width: 1040px; }
html.embedded .hero { padding: 8px 0 34px; }
html.embedded h1 { font-size: clamp(34px, 5.2vw, 50px); }
html.embedded .hero-wash { top: -80px; right: -120px; width: 420px; height: 380px; }
html.embedded .fine .mark { display: none; }   /* "DSC LABS · SINCE 1962" again */
html.embedded .steps { padding-top: 26px; }