/* FreightSizer — 2026 rebuild.
   Their palette, kept: red #eb0313, warm dark #3c3632, sand #e2dad6. The old styles.css is left
   in place untouched, so reverting is a one-line change in index.html. */

:root {
  --red: #eb0313;
  --red-soft: rgba(235, 3, 19, .12);
  --ink: #241f1d;
  --ink-2: #2f2926;
  --surface: #3c3632;
  --sand: #e2dad6;
  --sand-dim: #b6aca6;
  --white: #fff;
  --r: 18px;
  --r-lg: 26px;
  --maxw: 1180px;
}

@font-face { font-family: SFPro; src: url("./fonts/SFProDisplay-Light.woff2") format("woff2"); font-weight: 300; font-display: swap }
@font-face { font-family: SFPro; src: url("./fonts/SFProDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: SFPro; src: url("./fonts/SFProDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap }
@font-face { font-family: SFPro; src: url("./fonts/SFProDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap }
@font-face { font-family: SFPro; src: url("./fonts/SFProDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap }

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }

body {
  font-family: SFPro, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--ink);
  color: var(--sand);
  line-height: 1.55;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px }

/* ── header ─────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(36, 31, 29, .82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(226, 218, 214, .09);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em }
.brand img { height: 26px; width: auto }
.nav { display: flex; align-items: center; gap: 28px }
.nav a { font-size: 14.5px; color: var(--sand-dim); font-weight: 500; transition: color .15s }
.nav a:hover { color: var(--sand) }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s, background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) }
.btn-red { background: var(--red); color: var(--white) }
.btn-red:hover { background: #ff1626 }
.btn-ghost { border-color: rgba(226, 218, 214, .28); color: var(--sand) }
.btn-ghost:hover { border-color: var(--sand); background: rgba(226, 218, 214, .06) }
.btn-sm { padding: 9px 18px; font-size: 14px }
.burger { display: none; background: none; border: 0; color: var(--sand); font-size: 24px; cursor: pointer; line-height: 1 }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 86px 0 74px; overflow: hidden }
.hero::before {
  /* A single warm bloom behind the copy — depth without a stock gradient look. */
  content: ""; position: absolute; top: -240px; left: -160px; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(235, 3, 19, .16), transparent 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: #ff5560;
  background: var(--red-soft); border: 1px solid rgba(235, 3, 19, .3);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -.032em; font-weight: 700; color: var(--white) }
.hero p.lede { font-size: clamp(16px, 1.7vw, 19px); color: var(--sand-dim); margin-top: 20px; max-width: 33em }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--sand-dim) }
.hero-note b { color: var(--sand); font-weight: 600 }

/* phone */
.phone {
  position: relative; width: 292px; margin: 0 auto; border-radius: 42px; padding: 11px;
  background: linear-gradient(160deg, #55504c, #211d1b 62%);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(226, 218, 214, .1);
}
.phone video { border-radius: 32px; width: 100%; background: #000; aspect-ratio: 9/16; object-fit: cover }
.phone::after {
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; background: #16130f; border-radius: 999px;
}

/* ── stats band ─────────────────────────────────────────────────────── */
.stats { border-top: 1px solid rgba(226, 218, 214, .09); border-bottom: 1px solid rgba(226, 218, 214, .09); background: var(--ink-2) }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 34px; padding-bottom: 34px }
.stat .n { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; color: var(--white); letter-spacing: -.03em; line-height: 1 }
.stat .n span { color: var(--red) }
.stat .l { font-size: 13.5px; color: var(--sand-dim); margin-top: 8px; line-height: 1.4 }

/* ── generic section ────────────────────────────────────────────────── */
section { padding: 92px 0 }
.section-head { max-width: 720px; margin-bottom: 48px }
.kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-bottom: 14px }
h2 { font-size: clamp(28px, 3.6vw, 43px); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; color: var(--white) }
.section-head p { color: var(--sand-dim); margin-top: 16px; font-size: 17px }
.light { background: var(--sand); color: var(--surface) }
.light h2, .light h3 { color: var(--surface) }
.light .section-head p, .light .muted { color: #6d635d }
.light .kicker { color: var(--red) }

/* ── steps ──────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.step { background: rgba(226, 218, 214, .05); border: 1px solid rgba(226, 218, 214, .1); border-radius: var(--r-lg); overflow: hidden; transition: border-color .2s }
.step:hover { border-color: rgba(235, 3, 19, .45) }
.step img { width: 100%; height: 210px; object-fit: cover }
.step .body { padding: 22px 24px 26px }
.step .num { font-size: 12.5px; font-weight: 700; color: var(--red); letter-spacing: .08em }
.step h3 { font-size: 19px; color: var(--white); margin: 8px 0 8px; font-weight: 600; letter-spacing: -.01em }
.step p { font-size: 14.5px; color: var(--sand-dim) }

/* ── two-up feature ─────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 26px }
.feature { border-radius: var(--r-lg); padding: 34px; background: rgba(226, 218, 214, .05); border: 1px solid rgba(226, 218, 214, .1) }
.feature img.icon { width: 40px; height: 40px; margin-bottom: 20px }
.feature h3 { font-size: 22px; color: var(--white); font-weight: 600; letter-spacing: -.015em }
.feature ul { list-style: none; margin-top: 18px; display: grid; gap: 11px }
.feature li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--sand-dim); line-height: 1.5 }
.feature li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; line-height: 19px;
  text-align: center; border-radius: 50%; background: rgba(52, 199, 89, .16); color: #34c759;
  font-size: 11.5px; font-weight: 700;
}

/* ── audience ───────────────────────────────────────────────────────── */
.audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.aud { background: var(--white); border-radius: var(--r-lg); padding: 30px; border: 1px solid rgba(60, 54, 50, .09) }
.aud img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 18px }
.aud h3 { font-size: 19px; font-weight: 600; color: var(--surface) }
.aud p { font-size: 15px; color: #6d635d; margin-top: 9px }

/* ── quotes ─────────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px }
.quote { background: rgba(226, 218, 214, .05); border: 1px solid rgba(226, 218, 214, .1); border-radius: var(--r-lg); padding: 30px }
.quote p { font-size: 16.5px; color: var(--sand); line-height: 1.6 }
.quote .mark { color: var(--red); font-size: 34px; line-height: 1; font-weight: 700; margin-bottom: 10px; display: block }

/* ── integration ────────────────────────────────────────────────────── */
.integration { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }
.chip { border: 1px solid rgba(60, 54, 50, .2); border-radius: 999px; padding: 9px 17px; font-size: 14px; font-weight: 600; color: var(--surface); background: var(--white) }

/* ── pricing ────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch }
.plan { background: rgba(226, 218, 214, .05); border: 1px solid rgba(226, 218, 214, .12); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column }
.plan.featured { border-color: var(--red); background: rgba(235, 3, 19, .07); position: relative }
.plan.featured::before {
  content: "For companies"; position: absolute; top: -12px; left: 32px; background: var(--red); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.plan img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 18px }
.plan h3 { font-size: 22px; color: var(--white); font-weight: 600 }
.plan .desc { font-size: 15px; color: var(--sand-dim); margin-top: 10px; flex: 1 }
.plan .desc b { color: var(--sand) }
.plan .btn { margin-top: 24px; width: 100% }

/* ── blog ───────────────────────────────────────────────────────────── */
.blog-cta {
  border-radius: var(--r-lg); padding: 46px; background: linear-gradient(135deg, #3c3632, #241f1d);
  border: 1px solid rgba(226, 218, 214, .12); display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; align-items: center;
}
.blog-cta h2 { font-size: clamp(24px, 2.8vw, 34px) }
.blog-cta p { color: var(--sand-dim); margin-top: 14px; font-size: 16px }
.blog-list { display: grid; gap: 10px }
.blog-list a { display: block; background: rgba(226, 218, 214, .06); border: 1px solid rgba(226, 218, 214, .1); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; color: var(--sand); transition: border-color .18s, transform .18s }
.blog-list a:hover { border-color: var(--red); transform: translateX(3px) }

/* ── faq (markup contract kept for faq.js: .faq-question + .arrow-icon) ─ */
.faq { max-width: 820px }
.faq-item { border-bottom: 1px solid rgba(60, 54, 50, .16) }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%;
  padding: 24px 0; cursor: pointer; font-size: 18.5px; font-weight: 600; color: var(--surface);
}
.faq-question .arrow-icon { flex: 0 0 auto; width: 15px; transition: transform .22s; opacity: .55 }
.faq-answer { display: none; padding-bottom: 24px; color: #6d635d; font-size: 16px; max-width: 62ch }

/* ── contact (markup contract kept for submit.js) ───────────────────── */
.contact-form { max-width: 760px; margin: 0 auto }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 22px }
.form-fields textarea { grid-column: 1 / -1; min-height: 132px; resize: vertical }
.form-fields input, .form-fields textarea {
  width: 100%; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(60, 54, 50, .2);
  background: var(--white); color: var(--surface); font-family: inherit; font-size: 15.5px;
}
.form-fields input::placeholder, .form-fields textarea::placeholder { color: #9c918b }
.form-fields input:focus, .form-fields textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft) }
.recaptcha-holder { display: flex; justify-content: center; margin-bottom: 18px }
#recaptcha { display: inline-block }
.submit-button { display: block; margin: 0 auto; padding: 15px 40px; border-radius: 999px; border: 0; background: var(--red); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer }
.submit-button:hover { background: #ff1626 }

/* ── footer ─────────────────────────────────────────────────────────── */
.footer { background: var(--ink-2); border-top: 1px solid rgba(226, 218, 214, .09); padding: 42px 0 }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap }
.footer a, .copyright { font-size: 14px; color: var(--sand-dim) }
.footer a:hover { color: var(--sand) }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero .wrap, .integration, .blog-cta { grid-template-columns: 1fr }
  .hero { padding: 60px 0 56px }
  .phone { width: 250px; order: -1 }
  .steps, .audience, .plans, .quotes, .features { grid-template-columns: 1fr }
  .stats .wrap { grid-template-columns: 1fr 1fr; gap: 26px }
  section { padding: 66px 0 }
  .nav { display: none }
  .nav.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 68px; left: 0; right: 0; background: var(--ink);
    border-bottom: 1px solid rgba(226, 218, 214, .1); padding: 14px 24px 20px;
  }
  .nav.open a { padding: 10px 0; font-size: 16px; width: 100% }
  .burger { display: block }
  .form-fields { grid-template-columns: 1fr }
  .blog-cta { padding: 32px }
}
@media (max-width: 520px) {
  .stats .wrap { grid-template-columns: 1fr }
  .hero-cta .btn { width: 100% }
}

/* ── second pass ────────────────────────────────────────────────────── */

/* The logo SVG carries the wordmark itself, so it needs room rather than a label. */
.brand img { height: 34px }

/* Product frames are portrait; a 210px-tall crop threw most of the shot away. */
.step img { height: auto; aspect-ratio: 4 / 5; object-fit: cover }

/* Audience cards lost their photo strips — a short rule carries the eye instead. */
.aud-rule { display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--red); margin-bottom: 20px }

/* Pricing, two cards */
.plans.two { grid-template-columns: 1fr 1fr; max-width: 840px; margin: 0 auto }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--white); margin: 6px 0 20px; line-height: 1 }
.plan-list { list-style: none; display: grid; gap: 11px; align-content: start; margin-bottom: 26px; flex: 1 }
.plan-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--sand-dim); line-height: 1.5 }
.plan-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; line-height: 19px;
  text-align: center; border-radius: 50%; background: rgba(52, 199, 89, .16); color: #34c759;
  font-size: 11.5px; font-weight: 700;
}
.plan-note { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--sand); margin: 0 0 16px }
.plan-note span { color: var(--sand-dim); font-weight: 400 }
.plan.featured .price { color: #ff5560 }

/* Keyboard focus should be visible and ours — the browser default drew a blue box around the
   FAQ anchors, which read as a rendering fault. */
:focus { outline: none }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px }
.faq-question { -webkit-tap-highlight-color: transparent }
.faq-question .arrow-icon { opacity: .8 }
.light .faq-question .arrow-icon { filter: brightness(.35) }

@media (max-width: 980px) {
  .plans.two { grid-template-columns: 1fr }
}

.success-note {
  max-width: 620px; margin: 0 auto; text-align: center; font-size: 22px; line-height: 1.45;
  font-weight: 600; color: var(--white, #fff); padding: 34px 28px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
}
.success-note::before {
  content: "\2713"; display: block; width: 46px; height: 46px; line-height: 46px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--red); color: #fff; font-size: 24px; font-weight: 700;
}

/* hover */
/* Dark cards lift into the red; the light audience cards lift into their own shadow. */
.step, .feature, .plan, .aud, .chip, .stat, .quote, .blog-list a, .faq-question, .aud-rule, .step img {
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease,
              box-shadow .2s ease, color .2s ease, width .2s ease;
}
.step:hover, .feature:hover, .plan:hover {
  transform: translateY(-3px);
  border-color: rgba(235, 3, 19, .5);
  background: rgba(226, 218, 214, .08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.plan.featured:hover {
  border-color: var(--red);
  background: rgba(235, 3, 19, .12);
  box-shadow: 0 14px 40px rgba(235, 3, 19, .22);
}
.step img { transition: transform .35s ease }
.step:hover img { transform: scale(1.035) }
.aud:hover {
  transform: translateY(-3px);
  border-color: rgba(235, 3, 19, .3);
  box-shadow: 0 14px 32px rgba(60, 54, 50, .16);
}
.aud:hover .aud-rule { width: 54px }
.chip:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px) }
.stat:hover { transform: translateY(-2px) }
.stat:hover .n { color: var(--red) }
.stat .n { transition: color .2s ease }
.quote:hover { transform: translateY(-3px); border-color: rgba(235, 3, 19, .3) }
.blog-list a:hover { background: rgba(226, 218, 214, .1); color: var(--white) }
.faq-question:hover { color: var(--red) }

@media (prefers-reduced-motion: reduce) {
  .step, .feature, .plan, .aud, .chip, .stat, .quote, .blog-list a, .step img, .aud-rule { transition: none }
  .step:hover, .feature:hover, .plan:hover, .aud:hover, .chip:hover, .stat:hover, .quote:hover,
  .blog-list a:hover, .step:hover img { transform: none }
}

/* The Enterprise card is the one that has to be noticed: a red outline that breathes roughly
   once every three seconds. It stops under the cursor so it does not fight the hover state. */
@keyframes plan-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(235, 3, 19, .5), 0 0 0 0 rgba(235, 3, 19, .3) }
  50%      { box-shadow: 0 0 0 1px rgba(235, 3, 19, .95), 0 0 38px 7px rgba(235, 3, 19, .2) }
}
.plan.featured { animation: plan-pulse 3.2s ease-in-out infinite }
.plan.featured:hover { animation: none }

@media (prefers-reduced-motion: reduce) {
  .plan.featured { animation: none; box-shadow: 0 0 0 1px rgba(235, 3, 19, .7) }
}