/*
 * DevHuddle — site styles.
 * Reads the palette and type stack from tokens.css, which also carries the
 * contrast rules. Load tokens.css first.
 *
 * No CSS framework here. The page is one scroll of seven sections and
 * Bootstrap would weigh more than the whole document.
 */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--on-ink);
    background: var(--ink-900);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--green-lift); }

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

/* Keyboard users land here first; visible only when focused. */
.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 16px;
    top: 16px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--green);
    color: var(--on-green);
    border-radius: 6px;
}

/* Labels that screen readers need and the layout doesn't. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ *
 * Type roles
 * Three roles: display (Plex Sans, tight), eyebrow (Plex Mono, tracked,
 * uppercase) and body.
 * ------------------------------------------------------------------ */

h1, h2, h3 {
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.16rem; letter-spacing: -.01em; }

.eyebrow {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green-lift);
    margin: 0 0 14px;
}

.lede {
    font-size: clamp(1.06rem, 1.5vw, 1.22rem);
    color: var(--on-ink-quiet);
    max-width: var(--read);
}

.section {
    padding: clamp(64px, 9vw, 112px) 0;
    border-top: 1px solid var(--ink-line);
}

.section-head { margin-bottom: 44px; }
.section-head p { margin: 14px 0 0; }

/* ------------------------------------------------------------------ *
 * Buttons
 * Rule 2: a green fill takes --on-green, never white.
 * ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: var(--sans);
    font-size: .97rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--green);
    color: var(--on-green);
}

.btn-primary:hover { background: var(--green-lift); }

.btn-secondary {
    background: transparent;
    color: var(--on-ink);
    border-color: var(--ink-line);
}

.btn-secondary:hover { border-color: var(--green-lift); }

:focus-visible {
    outline: 2px solid var(--green-lift);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(11, 20, 16, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ink-line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--on-ink);
    font-weight: 600;
    font-size: 1.12rem;
    letter-spacing: -.01em;
}

.brand img { width: 28px; height: auto; display: block; }

.header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.header-nav a {
    color: var(--on-ink-quiet);
    text-decoration: none;
    font-size: .95rem;
}

/*
 * :not(.btn) matters. This selector outweighs both `.header-nav .btn` and
 * `.btn-primary:hover`, so without it the header's green CTA took --on-ink
 * on hover: light text on the light --green-lift fill, measuring 1.66.
 * That is rule 2 in tokens.css broken by the one selector sitting above it.
 */
.header-nav a:not(.btn):hover { color: var(--on-ink); }
.header-nav .btn { color: var(--on-green); }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

.hero {
    padding: clamp(72px, 11vw, 132px) 0 clamp(56px, 8vw, 96px);
}

/*
 * The tagline is three sentences and reads as three beats, so each one
 * gets its own line rather than wrapping wherever the viewport decides.
 */
.hero h1 span { display: block; }
.hero h1 .accent { color: var(--green-lift); }

.hero .lede { margin: 26px 0 0; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 30px;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--on-ink-quiet);
}

/* ------------------------------------------------------------------ *
 * Products
 *
 * This panel is the one light surface on the page. That is deliberate:
 * PinSheet Pro's wordmark is near-black and its screenshots are light, so
 * a dark card would swallow the logo and ring every shot with a halo.
 *
 * Consequence, from rule 1 in tokens.css: green on paper must be
 * --green-deep (6.31). Brand green here is 3.63 and fails.
 * ------------------------------------------------------------------ */

/*
 * One column, not two. Splitting the panel 50/50 between copy and images
 * left the shots about 266px wide, at which the pin sheet's grid and
 * yardages stop resolving — and an illegible screenshot of the product is
 * worse than no screenshot, since showing the work is the whole point of
 * this section. The copy sits on top at a readable measure and the shots
 * take the panel's full width beneath it.
 */
.product {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(26px, 3vw, 38px);
    padding: clamp(26px, 4vw, 46px);
    background: var(--paper);
    color: var(--on-paper);
    border-radius: 14px;
}

.product-body { max-width: var(--read); }

.product-logo {
    display: block;
    height: 46px;
    width: auto;
    margin-bottom: 20px;
}

.product-tagline {
    margin: 0 0 16px;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--on-paper);
}

/*
 * Excludes the tagline, which is also a <p> inside .product-body and would
 * otherwise lose its size and colour to this rule — later in the file and
 * more specific, so it won on both counts.
 */
.product-body p:not(.product-tagline) {
    color: var(--on-paper-quiet);
    font-size: .99rem;
}

.product-links {
    margin: 22px 0 0;
}

.product-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--green-deep);
    font-weight: 600;
    text-decoration: none;
}

.product-links a:hover { text-decoration: underline; }

.product-shots {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 16px;
    align-items: start;
}

.product-figure { margin: 0; }

.product-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(16, 32, 26, .14);
    border-radius: 9px;
}

.product-figure figcaption {
    margin-top: 9px;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-paper-quiet);
}

.product-note {
    margin: 24px 0 0;
    font-family: var(--mono);
    font-size: .8rem;
    color: var(--on-ink-quiet);
}

/*
 * Below this the two shots share a ~290px panel, which puts each at about
 * 160px — small enough that the pin sheet's grid and yardages stop being
 * readable, and an unreadable screenshot of a product is worse than none.
 * Stack them and let each take the full width.
 */
@media (max-width: 600px) {
    .product-shots { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Steps — the tagline as a process
 * ------------------------------------------------------------------ */

.band { background: var(--ink-850); }

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 30px 28px;
    border: 1px solid var(--ink-line);
    border-radius: 11px;
}

.step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: .14em;
    color: var(--green-lift);
}

.step h3 { margin-bottom: 10px; }

.step p {
    margin: 0;
    color: var(--on-ink-quiet);
    font-size: .99rem;
}

/* ------------------------------------------------------------------ *
 * Newsletter
 * ------------------------------------------------------------------ */

.newsletter-panel {
    padding: clamp(32px, 5vw, 52px);
    background: var(--ink-800);
    border: 1px solid var(--ink-line);
    border-radius: 14px;
}

.newsletter-form { margin-top: 26px; }

.newsletter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 520px;
}

.newsletter-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 13px 15px;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--on-ink);
    background: var(--ink-900);
    border: 1px solid var(--ink-line);
    border-radius: 7px;
}

.newsletter-input::placeholder { color: var(--on-ink-quiet); }
.newsletter-input:focus { border-color: var(--green-lift); }

/* Sits below the form rather than replacing it, so a rejected address can
   be corrected in place. Empty until the API answers. */
#newsletter-result:not(:empty) { margin-top: 16px; }

.newsletter-hint {
    margin: 14px 0 0;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--on-ink-quiet);
}

/* The swap targets from newsletter/api/_success.html and _error.html. */
.newsletter-success,
.newsletter-error {
    padding: 15px 17px;
    border-radius: 8px;
    border: 1px solid var(--ink-line);
}

.newsletter-success {
    background: rgba(61, 220, 127, .1);
    border-color: var(--green-lift);
}

.newsletter-error { background: rgba(255, 138, 128, .1); }
.newsletter-success p,
.newsletter-error p { margin: 0; }

/* ------------------------------------------------------------------ *
 * Contact form
 * ------------------------------------------------------------------ */

.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: start;
}

.field { margin-bottom: 18px; }

.field label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-quiet);
}

.field input,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--on-ink);
    background: var(--ink-800);
    border: 1px solid var(--ink-line);
    border-radius: 7px;
}

.field textarea { min-height: 148px; resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--green-lift); }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: .88rem;
    color: #FF9E93;
}

.form-errors {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #FF9E93;
    border-radius: 8px;
}

.form-errors p { margin: 0; }

.form-success {
    padding: 26px 28px;
    background: rgba(61, 220, 127, .1);
    border: 1px solid var(--green-lift);
    border-radius: 11px;
}

.form-success p:last-child { margin-bottom: 0; }

.contact-aside p { color: var(--on-ink-quiet); }

.contact-aside a { color: var(--green-lift); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.site-footer {
    padding: 52px 0 40px;
    border-top: 1px solid var(--ink-line);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.footer-inner .brand { margin-right: auto; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-links a {
    color: var(--on-ink-quiet);
    text-decoration: none;
    font-size: .93rem;
}

.footer-links a:hover { color: var(--on-ink); }

.footer-legal {
    margin: 26px 0 0;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--on-ink-quiet);
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 680px) {
    .header-nav a:not(.btn) { display: none; }
    .field-row { grid-template-columns: 1fr; }
    .hero-meta { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}