/* tradesitepros.com homepage.
   The credibility site: the page a roofer checks after getting a cold email.
   Section order follows Section 8 of the blueprint. Tokens match the funnel
   pages so the two do not look like different companies. */

:root {
  --brand: #0B2D5B;
  --brand-light: #0EA5FF;
  --brand-dark: #071f3f;
  --accent: #F97316;
  --green: #10B981;
  --green-dark: #0d9668;
  --dark: #0B2D5B;
  --text: #334155;
  --text-light: #64748b;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-alt: #f1f5f9;
  --border: #E5E7EB;
  --radius: 12px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text); background: var(--bg);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--dark); line-height: 1.15; margin: 0; letter-spacing: -.025em; text-wrap: balance; }
a { color: var(--brand); }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border: none; border-radius: 10px;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background .18s, transform .18s;
}
.btn--go { color: #fff; background: var(--green); box-shadow: 0 4px 14px rgb(16 185 129 / .3); }
.btn--go:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn--lg { padding: 19px 40px; font-size: 17px; }
.btn--sm { padding: 11px 20px; font-size: 14px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 14px; padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--dark); text-decoration: none; letter-spacing: -.02em; }
.logo__text b, .foot strong span { color: var(--brand-light); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; font-size: 15px; font-weight: 600; }
.nav__links a:not(.btn) { color: var(--text-light); text-decoration: none; }
.nav__links a:not(.btn):hover { color: var(--dark); }

/* hero */
.hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); background: linear-gradient(180deg, var(--bg-soft), #fff); text-align: center; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow--light { color: var(--brand-light); }
.hero h1 { font-size: clamp(32px, 5.6vw, 58px); font-weight: 900; }
.hero__sub { max-width: 56ch; margin: 20px auto 0; font-size: clamp(17px, 2vw, 20px); color: var(--text-light); }
.hero__price { margin: 22px 0 0; font-size: 19px; font-weight: 800; color: var(--dark); }
.hero__cta { margin-top: 28px; }
.hero__note { margin: 12px 0 0; font-size: 13px; color: var(--text-light); }

/* sections */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section--alt { background: var(--bg-soft); }
.section--dark { background: var(--dark); color: #cbd5e1; }
.section--dark h2 { color: #fff; }
.section h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; }
.lede { max-width: 62ch; margin: 16px 0 0; font-size: 17px; color: var(--text-light); }
.section--dark .lede { color: #94a3b8; }

/* feature block */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.feature__num { display: inline-block; margin-bottom: 10px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.feature__copy h3 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; }
.feature__copy p { margin: 14px 0 0; }
.feature__demo a { display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); text-decoration: none; box-shadow: 0 8px 28px rgb(0 0 0 / .08); }
.feature__demo img { width: 100%; height: auto; }
.feature__demo a span { display: block; padding: 13px 18px; border-top: 1px solid var(--border); background: #fff; font-size: 14px; font-weight: 700; color: var(--brand); }
.feature__caption { margin: 12px 0 0; font-size: 13px; color: var(--text-light); }

/* cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(2rem, 4vw, 3rem); }
.card { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.section--alt .card { background: #fff; }
.card h3 { font-size: 19px; font-weight: 800; }
.card .feature__num { display: block; }
.card p { margin: 12px 0 0; font-size: 15px; }

/* package table */
.pkg { margin-top: clamp(2rem, 4vw, 2.5rem); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.pkg th, .pkg td { padding: 15px 20px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 15px; }
.pkg tr:last-child th, .pkg tr:last-child td { border-bottom: 0; }
.pkg th { width: 34%; color: var(--dark); font-weight: 700; }
.pkg td { color: var(--text-light); }

.pkg-note { margin-top: 22px; padding: 22px 24px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: #fffbeb; }
.pkg-note--plain { border-left-color: var(--border); background: var(--bg-alt); }
.pkg-note h3 { font-size: 17px; font-weight: 800; }
.pkg-note p { margin: 10px 0 0; font-size: 15px; }

.honesty { max-width: 70ch; margin: 26px 0 0; padding: 16px 20px; border: 1px dashed var(--border); border-radius: var(--radius); font-size: 15px; color: var(--text-light); }

/* launch steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.steps li { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.steps li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; }
.steps strong { display: block; font-size: 16px; color: var(--dark); }
.steps p { margin: 8px 0 0; font-size: 14px; color: var(--text-light); }

/* faq */
.faq { max-width: 820px; margin-top: clamp(1.5rem, 3vw, 2rem); }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: 2rem; padding: 18px 0; font-size: 17px; font-weight: 700; color: var(--dark); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--brand); font-size: 22px; transition: transform .18s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 0 20px; max-width: 68ch; font-size: 15px; }

/* founder + final */
.founder { max-width: 760px; }
.founder p { margin: 14px 0 0; }
.final { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgb(255 255 255 / .12); text-align: center; }
.final p { max-width: 54ch; margin: 14px auto 26px; color: #94a3b8; }
.section--dark .hero__note { color: #7c8ba1; }

/* footer */
.foot { padding: 34px 0 44px; background: var(--dark); color: #7c8ba1; font-size: 14px; }
.foot p { margin: 0 0 8px; }
.foot strong { color: #fff; font-weight: 800; }
.foot a { color: #cbd5e1; }
.foot__legal { margin-top: 14px; font-size: 13px; }

@media (max-width: 900px) {
  .nav__links a:not(.btn) { display: none; }
  .feature { grid-template-columns: 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .pkg th { width: 42%; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .pkg th, .pkg td { display: block; width: auto; padding-bottom: 4px; }
  .pkg td { padding-top: 0; padding-bottom: 15px; }
  .btn--lg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* brand mark */
.logo__mark { width: 40px; height: 40px; }
.foot__mark { width: 30px; height: 30px; vertical-align: -8px; margin-right: 8px; }

.logo__text b { font-weight: 800; }

/* full lockup: mark, wordmark, tagline under it */


.logo--foot { margin-bottom: 12px; color: #fff; }
.logo--foot .logo__tag { color: #7c8ba1; }
.foot__what { margin-bottom: 8px; }

/* Full lockup. The tagline justifies across the exact width of the wordmark
   above it, which is what makes it read as one mark rather than two bits of
   text stacked up. */
.logo__stack { display: flex; flex-direction: column; align-items: stretch; line-height: 1; }
.logo__text { white-space: nowrap; }
.logo__tag {
  display: block; margin-top: 5px;
  font-size: 10px; font-weight: 600; color: var(--text-light);
  text-transform: uppercase; white-space: nowrap;
  text-align: justify; text-align-last: justify;
}
.logo__tag::after { content: ""; display: inline-block; width: 100%; }

/* ---- phone mockup ---- */
/* Built in CSS rather than shipped as an image so it stays crisp and can be
   edited when the offer changes. Shows only what the £297 package includes:
   no AI call, no quote sent, no accepted quote. Those are paid add-ons. */
.feature--flip { direction: rtl; }
.feature--flip > * { direction: ltr; }
.is-hidden { display: none; }
.cards-3--two { grid-template-columns: repeat(2, 1fr); }

.phone { display: flex; justify-content: center; }
.phone__body {
  position: relative; width: 268px; padding: 12px;
  border-radius: 40px; background: #0b1220;
  box-shadow: 0 18px 50px rgb(11 45 91 / .28), inset 0 0 0 2px #1f2a3a;
}
.phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 0 0 14px 14px; background: #0b1220; z-index: 2;
}
.phone__screen { border-radius: 30px; background: #fff; overflow: hidden; }
.phone__bar { display: flex; justify-content: space-between; padding: 9px 18px 4px; font-size: 11px; font-weight: 700; color: var(--dark); }
.phone__head { padding: 6px 18px 12px; font-size: 19px; font-weight: 800; color: var(--dark); border-bottom: 1px solid var(--border); }
.phone__feed { margin: 0; padding: 6px 0; list-style: none; }
.phone__feed li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 16px; border-bottom: 1px solid #f1f5f9; }
.phone__feed li:last-child { border-bottom: 0; }
.phone__feed strong { display: block; font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.phone__feed em { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--text-light); }
.dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; }
.dot--new { background: var(--brand-light); }
.dot--sent { background: var(--green); }
.dot--call { background: var(--accent); }
.dot--move { background: var(--brand); }
.dot--star { background: #f5b731; }
.phone__tabs { display: grid; grid-template-columns: repeat(4,1fr); padding: 9px 0 12px; border-top: 1px solid var(--border); font-size: 10px; font-weight: 600; color: var(--text-light); text-align: center; }
.phone__tabs .is-on { color: var(--brand-light); }

@media (max-width: 900px) {
  .feature--flip { direction: ltr; }
  .cards-3--two { grid-template-columns: 1fr; }
}