/* Custom / Ground-up (/custom/). Ported from the approved MKT-07 mockup (custom.css).
   Page-only rules on top of base.css. */

/* ---------- Hero ---------- */
.gu-hero { text-align: left; padding: 104px 0 112px; }
.gu-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.gu-hero .eyebrow { justify-content: flex-start; }
.gu-hero h1 { margin: 16px 0 0; max-width: none; font-size: clamp(64px, 9vw, 128px); }
.gu-hero h1 .w { padding-bottom: .08em; }
.gu-hero .sub { margin: 22px 0 0; max-width: 540px; }
.gu-hero .ctas { justify-content: flex-start; }
.cut { margin: 18px 0 0; font: 800 clamp(22px, 2.2vw, 28px) Manrope, sans-serif; letter-spacing: -.02em; }
.cut s { color: var(--on-dark-muted); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 55% / 0 3px; transition: background-size .8s var(--ease) .8s; }
.cut.in s { background-size: 100% 3px; }
.cut b { color: var(--gold); }
.bp { margin: 0; position: relative; background: rgba(255,255,255,.04); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); padding: 10px; }
.bp svg { display: block; width: 100%; height: auto; }
.bp figcaption { position: absolute; left: 22px; bottom: 18px; font: 700 11px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.bp .ln path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.4s var(--ease); }
.bp.in .ln path { stroke-dashoffset: 0; transition-delay: .9s; }
.bp .nd rect { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 4 4; }
.bp .nd text { fill: #fff; font: 700 15px Manrope, sans-serif; text-anchor: middle; }
.bp .nd text.sm { font: 600 13px Manrope, sans-serif; fill: var(--on-dark-muted); }
.bp .nd g { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 120ms + 200ms); }
.bp.in .nd g { opacity: 1; transform: none; }
.bp .nd .hero-n rect { fill: rgba(234,197,27,.14); stroke: var(--gold); stroke-dasharray: none; stroke-width: 2; }
.bp .nd .hero-n text { fill: var(--gold); font-size: 17px; }
.bp .tb rect { fill: none; stroke: rgba(255,255,255,.4); }
.bp .tb text { fill: var(--on-dark-muted); font: 800 10.5px Manrope, sans-serif; letter-spacing: .1em; }
.bp .tb text.sm { font: 600 11px Manrope, sans-serif; letter-spacing: 0; }

/* ---------- 01 How it starts ---------- */
.four4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.spot.g4 { align-items: flex-start; text-align: left; gap: 10px; padding: 26px 22px 24px; border-radius: 24px; }
.spot.g4 .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--green); color: var(--gold); }
.spot.g4 .ic svg { width: 20px; height: 20px; }
.spot.g4 h3 { text-align: left; font-size: 20px; }
.spot.g4 p { margin: 0; text-align: left; font-size: 15px; }
.spot.g4 p b { color: var(--text); }

/* ---------- 02 The paperwork ---------- */
.paper { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; align-items: center; }
.three { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.three::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: var(--line-2); }
.three li { position: relative; padding: 0 0 26px 62px; }
.three li::before { content: ""; position: absolute; left: 12px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--surface); }
.three .k { font: 800 12px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--green-2); }
.three b { display: block; font-size: 21px; letter-spacing: -.02em; margin-top: 2px; }
.three p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }
.three p b { display: inline; font-size: inherit; color: var(--text); letter-spacing: 0; }
.doc .sum-v { font-size: 13px; font-weight: 700; text-align: right; }
.doc .terms { display: grid; gap: 4px; margin-top: 12px; padding-right: 180px; font-size: 13px; color: #4d6862; }
.doc .terms span::before { content: "✓ "; color: #1f7a45; font-weight: 700; }
.never-stamp { position: absolute; right: 26px; bottom: 26px; border: 3px solid #b48f00; color: #8a6d00; font: 800 13px Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: 10px; transform: rotate(-8deg) scale(1.4); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.5, .4, 1) 1.4s, opacity .25s 1.4s; background: rgba(255,255,255,.7); }
.doc.go .never-stamp { transform: rotate(-8deg) scale(1); opacity: .95; }

/* ---------- 03 Versus the dev agency (receipts) ---------- */
.receipts { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 900px; margin: 0 auto; align-items: start; }
.rc { position: relative; background: #fbfaf5; color: #16302b; font-family: Inter, "Segoe UI", sans-serif; padding: 24px 26px 30px; border-radius: 6px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.55); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(16,61,54,.05) 27px 28px); }
.rc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: radial-gradient(circle at 8px -2px, transparent 8px, #fbfaf5 9px) 0 0 / 16px 12px repeat-x; }
.rc .rh { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 2px dashed rgba(16,61,54,.25); margin-bottom: 6px; }
.rc .rh span { color: #5a6477; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc .rh b { font: 800 20px Manrope, sans-serif; }
.rc dl { margin: 0; }
.rc .rl { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dotted rgba(16,61,54,.25); font-size: 15px; line-height: 1.5; }
.rc .rl dt { color: #5a6477; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.rc .rl dd { margin: 0; font-weight: 600; }
.rc.them { transform: rotate(-1.5deg); filter: saturate(.3); }
.rc.them .rl dd { color: #5a6477; }
.rc.them s { text-decoration-color: rgba(180,35,24,.6); text-decoration-thickness: 2px; }
.rc.us { transform: rotate(1deg); box-shadow: 0 40px 70px -30px rgba(6,38,33,.6), inset 0 0 0 2px var(--gold); }
.rc.us .rl dd b { font-weight: 700; background: linear-gradient(transparent 60%, rgba(234,197,27,.5) 60%); }
.rc.them.reveal.in { opacity: .92; transform: rotate(-1.5deg); }
.rc.us.reveal.in { opacity: 1; transform: rotate(1deg); }

/* ---------- Final call to action ---------- */
.gu-final { padding: 96px 0; }
.gu-final h2 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.035em; margin: 12px auto 0; max-width: 16ch; }
.gu-final h2 span { color: var(--gold); }
.gu-final .sub b { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .four4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .gu-hero .wrap, .paper { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .receipts { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 520px; }
}
@media (max-width: 600px) {
  .gu-hero { padding: 80px 0 90px; }
  .four4 { grid-template-columns: minmax(0, 1fr); }
  .rc { padding: 20px 18px 26px; }
  .rc .rh, .rc .rl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .never-stamp { position: static; display: inline-block; margin-top: 14px; }
  .doc .terms { padding-right: 0; }
  .doc .sum { flex-direction: column; gap: 4px; }
  .doc .sum-v { text-align: left; }
  .doc table { font-size: 12.5px; }
  .doc th, .doc td { padding-left: 4px; padding-right: 4px; }
  .gu-final { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bp .ln path { stroke-dashoffset: 0; }
  .bp .nd g { opacity: 1; transform: none; }
  .cut s { background-size: 100% 3px; }
  .never-stamp { transform: rotate(-8deg); opacity: .95; }
  .rc.them.reveal { opacity: .92 !important; transform: rotate(-1.5deg) !important; }
  .rc.us.reveal { opacity: 1 !important; transform: rotate(1deg) !important; }
}