/* =========================================================
   Don't Delay Our Jobs — landing styles
   Tokens, type, and components per the project design system.
   Scoped under .dontdelay-body / .dontdelay so a host theme
   can't bleed in.
   ========================================================= */

.dontdelay {
    /* ---------- Brand palette ---------- */
    --ddoj-red-700:    #9B1822;
    --ddoj-red-600:    #C8202C;
    --ddoj-red-500:    #E03340;
    --ddoj-red-100:    #FBE3E5;

    --ddoj-navy-900:   #0E1B33;
    --ddoj-navy-800:   #1A2A47;
    --ddoj-navy-700:   #2A3E63;
    --ddoj-navy-300:   #93A2BD;
    --ddoj-navy-100:   #DDE3EE;

    --ddoj-yellow-500: #F5C518;
    --ddoj-yellow-400: #FFD43B;
    --ddoj-yellow-100: #FFF4C9;

    --ddoj-green-700:  #1F5C3A;
    --ddoj-green-600:  #2E7D4F;
    --ddoj-green-100:  #DCEEDF;

    --ddoj-off-white:  #FAFAF7;
    --ddoj-cream:      #F6EFE3;
    --ddoj-sand:       #ECE3D1;
    --ddoj-line:       #D6CFC2;
    --ddoj-line-cool:  #DDE3EE;

    --fg-default:      var(--ddoj-navy-800);
    --fg-muted:        var(--ddoj-navy-700);
    --fg-subtle:       #5B6A85;
    --fg-on-dark:      var(--ddoj-off-white);
    --fg-on-dark-muted:#B7C1D6;

    --color-action:        var(--ddoj-red-600);
    --color-action-hover:  var(--ddoj-red-700);
    --color-highlight:     var(--ddoj-yellow-400);

    /* ---------- Type families ---------- */
    --font-display:       "Archivo Black", "Impact", "Helvetica Neue", sans-serif;
    --font-condensed:     "Oswald", "Impact", "Arial Narrow", sans-serif;
    --font-serif-display: "DM Serif Display", "Times New Roman", Georgia, serif;
    --font-serif:         "Newsreader", "Source Serif Pro", Georgia, serif;
    --font-body:          "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---------- Spacing (4px base) ---------- */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
    --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
    --s-9: 6rem;    --s-10: 8rem;

    --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;

    --shadow-stamp: 4px 4px 0 var(--ddoj-navy-900);
    --shadow-press: 2px 2px 0 var(--ddoj-navy-900);

    --ease-civic: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    font-family: var(--font-body);
    color: var(--fg-default);
    line-height: 1.55;
    background: var(--ddoj-off-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
}
.dontdelay *,
.dontdelay *::before,
.dontdelay *::after { box-sizing: border-box; }
.dontdelay img { max-width: 100%; height: auto; display: block; }

.dontdelay-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Section scaffolding ---------- */
.dontdelay-section { padding: var(--s-9) 0; }
.dontdelay-section--cream { background: var(--ddoj-cream); }
.dontdelay-section--sand  { background: var(--ddoj-sand); }
.dontdelay-section--navy  { background: var(--ddoj-navy-900); color: var(--fg-on-dark); }
.dontdelay-section--off   { background: var(--ddoj-off-white); }

.dontdelay-eyebrow {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ddoj-red-600);
    margin: 0 0 var(--s-3);
}
.dontdelay-section--navy .dontdelay-eyebrow { color: var(--ddoj-yellow-400); }

.dontdelay-h2 {
    font-family: var(--font-display);
    font-weight: 400; /* Archivo Black is single-weight */
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--ddoj-navy-900);
    margin: 0 0 var(--s-4);
    text-wrap: balance;
}
.dontdelay-section--navy .dontdelay-h2 { color: var(--ddoj-yellow-400); }

.dontdelay-lede {
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--fg-muted);
    max-width: 60ch;
    margin: 0 0 var(--s-5);
}
.dontdelay-section--navy .dontdelay-lede { color: var(--fg-on-dark-muted); }

/* ---------- Buttons ---------- */
.dontdelay-btn {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 16px 22px;
    border: 3px solid var(--ddoj-navy-900);
    border-radius: var(--r-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-civic),
                box-shadow var(--dur-fast) var(--ease-civic),
                background var(--dur-fast) var(--ease-civic);
}
.dontdelay-btn--primary   { background: var(--ddoj-red-600); color: #fff; box-shadow: var(--shadow-stamp); }
.dontdelay-btn--secondary { background: var(--ddoj-yellow-400); color: var(--ddoj-navy-900); box-shadow: var(--shadow-stamp); }
.dontdelay-btn--ghost     { background: transparent; color: var(--ddoj-navy-900); box-shadow: none; }
.dontdelay-btn--on-dark   { color: #fff; border-color: #fff; }
.dontdelay-btn:hover      { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ddoj-navy-900); }
.dontdelay-btn--primary:hover   { background: var(--ddoj-red-700); }
.dontdelay-btn--secondary:hover { background: var(--ddoj-yellow-500); }
.dontdelay-btn:active     { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.dontdelay-btn .arrow     { font-family: var(--font-body); font-weight: 900; font-size: 18px; line-height: 1; }

/* ---------- Nav ---------- */
.dontdelay-nav {
    position: sticky; top: 0; z-index: 50;
    height: 72px;
    background: var(--ddoj-navy-900);
    color: var(--ddoj-off-white);
    display: flex; align-items: center;
    border-bottom: 6px solid var(--ddoj-yellow-400);
}
.dontdelay-nav__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    width: 100%;
}
.dontdelay-nav__brand {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 22px;
    line-height: 0.95;
    letter-spacing: -0.005em;
    color: var(--ddoj-yellow-400);
    text-decoration: none;
}
.dontdelay-nav__brand .dot { color: var(--ddoj-red-500); margin: 0 4px; }
.dontdelay-nav__right { display: flex; gap: 28px; align-items: center; }
.dontdelay-nav__links { display: flex; gap: 32px; }
.dontdelay-nav__links a {
    font: 600 13px/1 var(--font-body);
    color: var(--ddoj-off-white);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding: 4px 0;
}
.dontdelay-nav__links a::after {
    content: "";
    position: absolute; left: 0; bottom: -4px;
    width: 0; height: 2px; background: var(--ddoj-yellow-400);
    transition: width var(--dur-base) var(--ease-civic);
}
.dontdelay-nav__links a:hover::after { width: 100%; }
.dontdelay-nav__cta {
    background: var(--ddoj-red-600); color: #fff; border: 2px solid #fff;
    font: 400 13px/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em;
    padding: 12px 14px;
    border-radius: var(--r-2);
    text-decoration: none;
}
@media (max-width: 880px) {
    .dontdelay-nav__links { display: none; }
}

/* ---------- Hero ---------- */
.dontdelay-hero {
    position: relative;
    background: var(--ddoj-navy-900);
    color: #fff;
    overflow: hidden;
}
.dontdelay-hero__image {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: saturate(0.92);
}
.dontdelay-hero__image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14, 27, 51, 0.35) 0%, rgba(14, 27, 51, 0.92) 92%);
}
.dontdelay-hero__inner {
    position: relative;
    padding: 96px 0 120px;
    min-height: 560px;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.dontdelay-hero__eyebrow {
    font-family: var(--font-condensed); font-weight: 700; font-size: 14px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ddoj-yellow-400);
    margin: 0 0 16px;
}
.dontdelay-hero__stamp {
    display: inline-block;
    background: var(--ddoj-yellow-400);
    color: var(--ddoj-navy-900);
    border: 5px solid var(--ddoj-navy-900);
    box-shadow: 6px 6px 0 var(--ddoj-navy-900);
    padding: 14px 20px 12px;
    transform: rotate(-1.6deg);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(48px, 8vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.015em;
    margin: 0 0 26px;
    max-width: max-content;
}
.dontdelay-hero__stamp .red { color: var(--ddoj-red-700); display: block; }
.dontdelay-hero__sub {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: #fff;
    max-width: 28ch;
    margin: 0 0 8px;
    text-wrap: balance;
}
.dontdelay-hero__sub .pop {
    background: var(--ddoj-red-600); color: #fff; padding: 0 6px;
}
.dontdelay-hero__sub .italic {
    font-family: var(--font-serif-display); font-style: italic;
    text-transform: none; color: var(--ddoj-yellow-400);
}
.dontdelay-hero__cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
.dontdelay-hero__credit {
    position: absolute; right: 24px; bottom: 12px;
    font: 500 11px/1 var(--font-body); color: rgba(255,255,255,0.55);
    letter-spacing: 0.05em;
}

/* ---------- Marquee ---------- */
.dontdelay-marquee {
    background: var(--ddoj-yellow-400);
    border-top: 6px solid var(--ddoj-navy-900);
    border-bottom: 6px solid var(--ddoj-navy-900);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}
.dontdelay-marquee__track {
    display: inline-flex; align-items: center; gap: 32px;
    font-family: var(--font-condensed); font-weight: 700;
    font-size: 32px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ddoj-navy-900);
    animation: dontdelay-scroll 40s linear infinite;
    padding-left: 32px;
}
.dontdelay-marquee__track .dot { color: var(--ddoj-red-600); }
.dontdelay-marquee:hover .dontdelay-marquee__track { animation-play-state: paused; }
@keyframes dontdelay-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Benefits ---------- */
.dontdelay-benefits__head {
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: end;
    margin-bottom: 56px;
}
@media (max-width: 880px) { .dontdelay-benefits__head { grid-template-columns: 1fr; gap: 12px; } }

.dontdelay-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 980px) { .dontdelay-benefits__grid { grid-template-columns: 1fr; } }

.dontdelay-poster {
    background: var(--ddoj-off-white);
    border: 3px solid var(--ddoj-navy-900);
    box-shadow: var(--shadow-stamp);
    padding: 26px;
    display: flex; flex-direction: column; gap: 16px;
    transition: transform var(--dur-base) var(--ease-civic),
                box-shadow var(--dur-base) var(--ease-civic);
}
.dontdelay-poster:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ddoj-navy-900); }
.dontdelay-poster__stat {
    font-family: var(--font-display); text-transform: uppercase;
    font-size: 48px; line-height: 0.92; letter-spacing: -0.015em;
    color: var(--ddoj-red-600); margin: 0;
}
.dontdelay-poster__title {
    font-family: var(--font-display); text-transform: uppercase;
    font-size: 24px; line-height: 1; letter-spacing: -0.005em;
    color: var(--ddoj-navy-900); margin: 0;
}
.dontdelay-poster__body {
    font: 400 15.5px/1.55 var(--font-body);
    color: var(--ddoj-navy-800); margin: 0;
}
.dontdelay-poster__body b {
    font-weight: 800;
    background: linear-gradient(transparent 60%, var(--ddoj-yellow-400) 60%);
    padding: 0 2px;
}

/* ---------- Renderings ---------- */
.dontdelay-renderings__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    margin-top: 48px;
}
.dontdelay-renderings__cell {
    position: relative; overflow: hidden; border-radius: var(--r-3);
    background: var(--ddoj-navy-100);
}
.dontdelay-renderings__cell.tall { grid-row: span 2; }
.dontdelay-renderings__cell img {
    width: 100%; height: 100%; object-fit: cover;
    aspect-ratio: 16/10;
    transition: transform var(--dur-slow) var(--ease-civic);
}
.dontdelay-renderings__cell.tall img { aspect-ratio: auto; height: 100%; }
.dontdelay-renderings__cell:hover img { transform: scale(1.03); }
.dontdelay-renderings__cap {
    position: absolute; left: 12px; bottom: 12px;
    background: var(--ddoj-navy-900); color: var(--ddoj-yellow-400);
    font: 700 10.5px/1 var(--font-condensed);
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 7px 9px;
}
@media (max-width: 880px) {
    .dontdelay-renderings__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .dontdelay-renderings__cell.tall { grid-row: auto; }
}

/* ---------- Timeline ---------- */
.dontdelay-timeline-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 48px;
}
@media (max-width: 980px) {
    .dontdelay-timeline-layout { grid-template-columns: 1fr; gap: 40px; }
}

.dontdelay-timeline__aside {
    position: relative;
    max-width: 340px;
    width: 100%;
    margin-left: auto;
}
@media (max-width: 980px) {
    .dontdelay-timeline__aside { margin-left: 0; max-width: 380px; }
}
.dontdelay-timeline__quote {
    font-family: var(--font-serif-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ddoj-yellow-400);
    margin: 22px 0 0;
    max-width: 28ch;
    text-wrap: balance;
}
.dontdelay-timeline__quote::before { content: "“"; opacity: 0.6; margin-right: 2px; }
.dontdelay-timeline__quote::after  { content: "”"; opacity: 0.6; margin-left: 2px; }

.dontdelay-timeline {
    border-left: 3px solid var(--ddoj-yellow-400);
    padding-left: 28px;
    max-width: 720px;
    margin-top: 0;
}
.dontdelay-timeline__row {
    position: relative;
    padding: 12px 0 22px;
}
.dontdelay-timeline__row::before {
    content: ""; position: absolute; left: -36px; top: 18px;
    width: 16px; height: 16px;
    background: var(--ddoj-yellow-400);
    border: 3px solid var(--ddoj-navy-900);
    border-radius: 50%;
}
.dontdelay-timeline__row.is-danger::before { background: var(--ddoj-red-600); }
.dontdelay-timeline__row.is-done::before   { background: var(--ddoj-green-600); }
.dontdelay-timeline__date {
    font: 700 12px/1 var(--font-mono);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg-on-dark-muted); margin: 0 0 6px;
}
.dontdelay-timeline__title {
    font-family: var(--font-display); text-transform: uppercase;
    font-size: 24px; line-height: 1.02; letter-spacing: -0.005em;
    color: var(--ddoj-yellow-400);
    margin: 0 0 8px;
}
.dontdelay-timeline__body {
    font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6;
    color: var(--fg-on-dark);
    margin: 0; max-width: 56ch;
}

/* ---------- Form section ---------- */
.dontdelay-form-section {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start;
}
@media (max-width: 980px) {
    .dontdelay-form-section { grid-template-columns: 1fr; gap: 32px; }
}

/* Curved arrow that points from the explainer column to the form
   card on the right at desktop widths. Hidden on mobile (the form
   stacks below the explainer so the arrow no longer makes sense). */
.dontdelay-arrow-wrap {
    margin: 22px 0 0;
    position: relative;
}
.dontdelay-arrow-label {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ddoj-navy-900);
    margin: 0 0 10px;
    transform: rotate(-3deg);
    display: inline-block;
    background: var(--ddoj-yellow-400);
    border: 2px solid var(--ddoj-navy-900);
    padding: 8px 12px 6px;
    box-shadow: var(--shadow-stamp);
}
.dontdelay-arrow-svg {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-left: 4px;
}
@media (max-width: 980px) {
    .dontdelay-arrow-wrap { display: none; }
}

.dontdelay-form-card {
    background: var(--ddoj-off-white);
    border: 3px solid var(--ddoj-navy-900);
    box-shadow: var(--shadow-stamp);
    padding: 30px;
}
.dontdelay-form-card__h {
    font-family: var(--font-display); text-transform: uppercase; font-size: 28px;
    line-height: 1; letter-spacing: -0.005em; color: var(--ddoj-navy-900);
    margin: 0 0 18px;
}
.dontdelay-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
}
.dontdelay-form-grid .full { grid-column: 1 / -1; }
.dontdelay-form-grid label {
    display: block;
    font: 700 11.5px/1 var(--font-body);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ddoj-navy-800);
    margin-bottom: 4px;
}
.dontdelay-form-grid input,
.dontdelay-form-grid textarea {
    width: 100%;
    font-family: var(--font-body); font-size: 15px; color: var(--ddoj-navy-900);
    padding: 11px 12px;
    border: 1.5px solid var(--ddoj-navy-800);
    border-radius: var(--r-1);
    background: #fff; outline: none;
}
.dontdelay-form-grid input:focus,
.dontdelay-form-grid textarea:focus { box-shadow: 0 0 0 3px var(--ddoj-yellow-400); }
.dontdelay-form-grid textarea {
    min-height: 130px; resize: vertical;
    font-family: var(--font-serif); font-size: 16px; line-height: 1.5;
}

.dontdelay-helper-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 4px; flex-wrap: wrap;
}
.dontdelay-helper {
    font: 500 12.5px/1.4 var(--font-body); color: var(--fg-subtle); margin: 0;
}
.dontdelay-write-for-me {
    background: var(--ddoj-yellow-400); color: var(--ddoj-navy-900);
    border: 2px solid var(--ddoj-navy-900);
    font: 700 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 9px 12px; border-radius: var(--r-2);
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    transition: background var(--dur-fast) var(--ease-civic);
}
.dontdelay-write-for-me:hover { background: var(--ddoj-yellow-500); }
.dontdelay-write-for-me[disabled] { opacity: 0.6; cursor: progress; }

.dontdelay-form-card .dontdelay-btn { width: 100%; justify-content: center; margin-top: 18px; }

.dontdelay-ai-status {
    display: block; min-height: 18px; margin-top: 8px;
    font: 500 12.5px/1.4 var(--font-body);
    color: var(--fg-subtle);
}
.dontdelay-ai-status.is-error { color: var(--ddoj-red-700); font-weight: 700; }

/* Success / sent state */
.dontdelay-form-success {
    background: var(--ddoj-green-100);
    border: 3px solid var(--ddoj-green-700);
    padding: 22px 24px;
    font: 600 16px/1.4 var(--font-body); color: var(--ddoj-green-700);
}
.dontdelay-form-success b {
    font-family: var(--font-display); text-transform: uppercase;
    font-size: 22px; display: block; margin-bottom: 6px; letter-spacing: -0.005em;
}

/* ---------- Footer ---------- */
.dontdelay-footer {
    background: var(--ddoj-navy-900);
    color: var(--fg-on-dark);
    padding: 56px 0 28px;
}
.dontdelay-footer__h {
    color: #fff; margin: 0 0 24px;
    font-family: var(--font-display); text-transform: uppercase;
    font-size: 28px; letter-spacing: -0.005em;
}
.dontdelay-footer__endorsements {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px;
}
.dontdelay-endorse-pill {
    display: inline-flex; align-items: center; gap: 8px;
    border: 2px solid var(--ddoj-yellow-400);
    color: var(--ddoj-yellow-400);
    font: 700 11.5px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
    padding: 9px 14px;
    border-radius: var(--r-pill);
}
.dontdelay-endorse-pill .pin {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ddoj-yellow-400);
}
.dontdelay-footer__bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font: 500 12.5px/1.4 var(--font-body); color: var(--fg-on-dark-muted);
    flex-wrap: wrap;
}
.dontdelay-footer__bottom a { color: var(--fg-on-dark); text-decoration: none; }
.dontdelay-footer__bottom a:hover { color: var(--ddoj-yellow-400); }
.dontdelay-footer__brand {
    font-family: var(--font-display); text-transform: uppercase;
    color: var(--ddoj-yellow-400); font-size: 16px; line-height: 1; letter-spacing: -0.005em;
}
.dontdelay-footer__fine {
    margin-top: 14px; font-size: 11.5px;
    color: rgba(255,255,255,0.4);
}

/* ---------- Preview password gate ---------- */
.dontdelay-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ddoj-cream);
    padding: 48px 20px;
}
.dontdelay-gate__panel {
    background: var(--ddoj-off-white);
    border: 3px solid var(--ddoj-navy-900);
    box-shadow: var(--shadow-stamp);
    padding: 48px 40px;
    max-width: 540px;
    width: 100%;
}
.dontdelay-gate__eyebrow {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ddoj-red-600);
    margin: 0 0 14px;
}
.dontdelay-gate__stamp {
    display: inline-block;
    background: var(--ddoj-yellow-400);
    color: var(--ddoj-navy-900);
    border: 4px solid var(--ddoj-navy-900);
    box-shadow: var(--shadow-stamp);
    padding: 12px 18px 10px;
    transform: rotate(-1.6deg);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    margin: 0 0 28px;
    max-width: max-content;
}
.dontdelay-gate__stamp .red { color: var(--ddoj-red-700); display: block; }
.dontdelay-gate__lede {
    margin: 0 0 24px;
    color: var(--ddoj-navy-700);
    font-size: 16px;
    line-height: 1.55;
}
.dontdelay-gate__field { display: block; margin: 0 0 14px; }
.dontdelay-gate__label {
    display: block;
    margin: 0 0 6px;
    font: 700 11.5px/1 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ddoj-navy-800);
}
.dontdelay-gate__field input {
    width: 100%;
    padding: 14px 14px;
    border: 1.5px solid var(--ddoj-navy-800);
    border-radius: var(--r-1);
    background: #fff;
    color: var(--ddoj-navy-900);
    font: 400 16px/1.4 var(--font-body);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.dontdelay-gate__field input:focus {
    box-shadow: 0 0 0 3px var(--ddoj-yellow-400);
}
.dontdelay-gate__error {
    margin: 4px 0 14px;
    color: var(--ddoj-red-700);
    font: 700 13px/1.4 var(--font-body);
}
.dontdelay-gate__submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

/* ---------- Mobile sticky CTA ---------- */
.dontdelay-mobile-cta { display: none; }
@media (max-width: 880px) {
    .dontdelay-mobile-cta {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--ddoj-red-600); color: #fff;
        font: 400 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em;
        padding: 16px 18px; border-top: 4px solid var(--ddoj-navy-900);
        text-decoration: none;
    }
}
body.dontdelay-body { padding-bottom: 0; }
@media (max-width: 880px) {
    body.dontdelay-body { padding-bottom: 60px; }
}

/* ---------- Mobile top-fold refinements ----------
   The default nav + hero spacing assumes desktop. On phones the
   wordmark wrapped onto three lines and the hero ate the entire
   first screen. This block tightens both. */
@media (max-width: 720px) {
    /* Nav: brand on a single line, compact CTA */
    .dontdelay-nav {
        height: 56px;
        border-bottom-width: 4px;
    }
    .dontdelay-nav__inner { gap: 12px; }
    .dontdelay-nav__brand {
        font-size: 15px;
        line-height: 1.05;
        white-space: nowrap;
    }
    .dontdelay-nav__brand .dot { margin: 0 3px; }
    .dontdelay-nav__right { gap: 0; }
    .dontdelay-nav__cta {
        padding: 9px 11px;
        font-size: 11px;
        border-width: 1.5px;
        white-space: nowrap;
    }

    /* Hero: tighter top + bottom, smaller eyebrow, stack CTAs */
    .dontdelay-hero { padding: 0; }
    .dontdelay-hero__inner {
        padding: 56px 0 72px;
        min-height: 0;
    }
    .dontdelay-hero__eyebrow {
        font-size: 11.5px;
        letter-spacing: 0.16em;
        margin-bottom: 14px;
    }
    .dontdelay-hero__stamp {
        font-size: clamp(40px, 13vw, 64px);
        padding: 12px 16px 10px;
        margin-bottom: 20px;
        border-width: 4px;
    }
    .dontdelay-hero__sub {
        font-size: 17px;
        line-height: 1.18;
        margin-bottom: 4px;
    }
    .dontdelay-hero__cta {
        margin-top: 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .dontdelay-hero__cta .dontdelay-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 18px;
        font-size: 14px;
    }
    .dontdelay-hero__credit {
        right: 16px;
        bottom: 8px;
        font-size: 10px;
    }
}