/* ------------------------------------------------------------------
   ads.adamguerin.com landing page
   Tokens below are lifted from the adamguerin.com Ghost theme
   (theme/assets/css/screen.css) so this page reads as the same brand:
   Inter, the same ink/secondary/border greys, the 62.5% rem scale,
   pill buttons at weight 600, 12px card radius, 3px accent top rule.
   ------------------------------------------------------------------ */

/* 1. Font
   Self-hosted variable Inter, byte-identical to the file the main site
   serves. font-display: optional matches the main theme and means the
   page never reflows once text has painted (zero CLS from webfont swap). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("/fonts/inter-roman.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens */
:root {
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;

    /* Greys: same values as the main theme's :root block. */
    --color-ink: #15171a;
    --color-secondary-text: rgb(0 0 0 / 0.58);
    --color-border: rgb(0 0 0 / 0.08);
    --color-white: #fff;

    /* Confirmed from Ghost admin (Settings > Branding > Accent colour), so this
       is the real adamguerin.com accent rather than an approximation.

       Two tokens, because #4285F4 sits at 3.56:1 against white. That clears the
       3:1 WCAG AA bar for non-text things (the card rule, the focus ring) but
       not the 4.5:1 bar for small text on white. So:
         --accent      brand blue, used for fills and non-text marks
         --accent-dark 5.26:1 on white, used anywhere accent colour becomes text
       See the .btn rule for how the button keeps the brand blue and still passes. */
    --accent: #4285F4;
    --accent-dark: #1967D2;
    --accent-tint: #f2f6fd;

    --wrap: 720px;
    --gutter: clamp(20px, 5vw, 32px);
}

/* 3. Resets */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    font-size: 62.5%; /* 1rem = 10px, same scale as the main theme */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--color-ink);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2 {
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance; /* progressive enhancement, ignored where unsupported */
}

p { overflow-wrap: break-word; }

a { color: var(--accent-dark); }

/* Visible keyboard focus everywhere, never removed. */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* 4. Header / wordmark
   Mirrors .gh-navigation-logo from the main theme: weight 725, -0.015em
   tracking, with the consultant subline stacked underneath in a light weight. */
.site-header {
    padding-block: 20px;
    border-bottom: 1px solid var(--color-border);
}

.wordmark {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}

.wordmark-name {
    font-size: 2.2rem;
    font-weight: 725;
    letter-spacing: -0.015em;
}

.wordmark-sub {
    font-size: 1.1rem;
    font-weight: 450;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

/* 5. Hero */
.hero {
    padding-block: clamp(40px, 8vw, 72px) clamp(32px, 6vw, 56px);
}

.hero h1 {
    font-size: clamp(3.2rem, 2.4rem + 2.6vw, 4.8rem);
    font-weight: 700;
}

.hero-sub {
    max-width: 34em;
    margin-top: 18px;
    font-size: 1.9rem;
    color: var(--color-secondary-text);
}

/* White on #4285F4 is 3.56:1. WCAG AA wants 4.5:1 for normal text but only 3:1
   for large text, where large means 18.66px and bold. Setting the label to 19px
   at weight 700 clears that bar, so the button keeps the exact brand blue and
   still passes AA. The main theme's .gh-button is 15px/600, so this is a
   deliberate step up rather than a mismatch. A bigger tap target suits a
   mobile-first CTA anyway. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 0.9em 1.6em;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.004em;
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--accent);
    border: 0;
    border-radius: 100px; /* pill, same as .gh-button */
    transition: background-color 0.2s ease;
}

.btn:hover { background-color: var(--accent-dark); }

/* 6. Value props */
.props {
    padding-block: clamp(32px, 6vw, 56px);
    border-top: 1px solid var(--color-border);
    background-color: var(--accent-tint);
}

.props h2,
.form-card h2 {
    font-size: 2.6rem;
    font-weight: 700;
}

.prop-list {
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

.prop-list li {
    padding-block: 18px;
    border-top: 1px solid var(--color-border);
    font-size: 1.6rem;
    color: var(--color-secondary-text);
}

.prop-list li:first-child { border-top: 0; padding-top: 4px; }

.prop-list strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

/* 7. Form
   The 3px accent top rule is the page's one signature element, borrowed
   from .gh-home-service-card on the main site. It sits on the form card
   only, so the single strongest visual cue points at the one thing this
   page needs the visitor to do. */
.form-section {
    padding-block: clamp(36px, 7vw, 64px);
    border-top: 1px solid var(--color-border);
}

.form-card {
    padding: clamp(24px, 5vw, 36px);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--accent);
    border-radius: 12px;
}

.form-intro {
    margin-top: 14px;
    font-size: 1.7rem;
    color: var(--color-secondary-text);
}

.form-note {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--accent-dark);
}

.form-embed {
    margin-top: 24px;
}

/* The old min-height is gone. It existed to reserve layout back when no embed
   was present and the iframe had no height of its own. The real embed carries
   height="1235", which reserves the space at parse time and does the job
   properly, so a min-height here would only be dead weight, or worse, a floor
   that fights Tally if it ever resizes the frame shorter. No height set in CSS
   at all: the attribute holds the initial box, Tally's script owns it after. */
.form-embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

.form-fallback {
    padding: 20px;
    font-size: 1.5rem;
    color: var(--color-secondary-text);
    background-color: var(--accent-tint);
    border-radius: 8px;
}

/* 8. Footer */
.site-footer {
    padding-block: 32px 40px;
    border-top: 1px solid var(--color-border);
    font-size: 1.4rem;
    color: var(--color-secondary-text);
}

.site-footer p + p { margin-top: 6px; }
.footer-biz strong { color: var(--color-ink); font-weight: 650; }
.footer-legal a { color: var(--accent-dark); }
.footer-copy { margin-top: 12px; font-size: 1.3rem; }

/* 9. Motion preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 10. Wider screens: the measure stays narrow on purpose, a single column
   keeps the form the only destination. Only the type steps up. */
@media (min-width: 768px) {
    .props h2,
    .form-card h2 { font-size: 3rem; }
    .wordmark-name { font-size: 2.4rem; }
}