/* guide-template.css - Guide Template v1.1 (Executive Brochure)
   The AI Minute buying-guide / deep-guide layout system.
   Palette is locked: pure black, white, orange (#E8601C) only. All tints are
   alpha derivations of those three, no new hues. Fonts are site fonts only
   (Syne display, Space Grotesk UI, DM Sans long body). Link this AFTER
   shared.css. Future guides inherit the look by adding one class-driven
   markup pass. Do not add fonts or off-palette colors here.

   Single orange knob: pages set --orange in :root; everything below reads it. */

:root {
    --gt-orange: var(--orange, #E8601C);
    --gt-black: #000000;
    --gt-white: #ffffff;
    --gt-ink-2: rgba(255, 255, 255, 0.66);
    --gt-ink-3: rgba(255, 255, 255, 0.42);
    --gt-hair: rgba(255, 255, 255, 0.12);
    --gt-hair-2: rgba(255, 255, 255, 0.07);
    --gt-orange-soft: rgba(232, 96, 28, 0.10);
    --gt-orange-line: rgba(232, 96, 28, 0.32);
    --gt-card: #0a0a0a;
    --gt-inset: rgba(255, 255, 255, 0.03);
    --gt-shell: min(1120px, 100% - 3rem);
    --gt-read: 760px;
}

/* ===== Shared kicker / accent rule ===== */
.gt-kicker {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gt-orange);
    margin: 0;
}
.gt-rule {
    width: 54px;
    height: 3px;
    background: var(--gt-orange);
    border: 0;
    border-radius: 2px;
    margin: 1.15rem 0;
}

/* ===== 1. Header band (full-width, pure black) ===== */
.gt-header {
    background: var(--gt-black);
    border-bottom: 1px solid var(--gt-hair);
    padding: 7.5rem 0 3.25rem;
}
.gt-header__inner {
    width: var(--gt-shell);
    margin: 0 auto;
}
.gt-header .back-link {
    display: inline-block;
    color: var(--gt-orange);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.75rem;
}
.gt-header .back-link:hover { text-decoration: underline; }
.gt-header h1 {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(2.15rem, 5.6vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--gt-white);
    max-width: 16ch;
    margin: 0.65rem 0 0;
}
.gt-header .gt-sub {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    max-width: 60ch;
    margin: 1.4rem 0 0;
}
.gt-header .gt-date {
    color: var(--gt-ink-3);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 1.5rem 0 0;
}

/* Reserved hero image slot. Renders nothing until a real <img class="gt-hero-media">
   is dropped in. No placeholder box, no sourced imagery. */
.gt-hero-media {
    display: block;
    width: 100%;
    aspect-ratio: 40 / 13;
    object-fit: cover;
    border-radius: 14px;
    margin: 2.5rem auto 0;
    border: 1px solid var(--gt-hair);
}

/* ===== Body shell ===== */
.gt-body {
    width: var(--gt-shell);
    max-width: var(--gt-read);
    margin: 0 auto;
    padding: 3rem 0 1rem;
}
.gt-prose h2 {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--gt-white);
    margin: 3rem 0 1.1rem;
}
.gt-prose > h2:first-child { margin-top: 0; }
.gt-prose h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gt-white);
    margin: 1.75rem 0 0.75rem;
}
.gt-prose > p {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0 0 1.1rem;
}
.gt-prose > ol,
.gt-prose > ul {
    color: var(--gt-ink-2);
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    padding-left: 1.4rem;
    margin: 0 0 1.2rem;
}
.gt-prose > ol > li,
.gt-prose > ul > li { margin-bottom: 0.6rem; line-height: 1.65; }
.gt-prose li { margin-bottom: 0.6rem; line-height: 1.65; }
.gt-prose ol li::marker { color: var(--gt-orange); font-weight: 700; }
.gt-prose strong { color: var(--gt-white); font-weight: 600; }
.gt-prose a { color: var(--gt-orange); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Disclosure / note ===== */
.gt-note {
    background: var(--gt-inset);
    border-left: 3px solid var(--gt-orange);
    border-radius: 0 8px 8px 0;
    padding: 0.9rem 1.2rem;
    margin: 1.6rem 0;
}
.gt-note p {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== 2. Fast Answer decision block ===== */
.gt-decision {
    background: var(--gt-card);
    border: 1px solid var(--gt-orange-line);
    border-radius: 16px;
    padding: 1.9rem 1.9rem 1.75rem;
    margin: 2rem 0 2.5rem;
}
.gt-decision__head { margin-bottom: 1.4rem; }
.gt-decision__head h2 {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--gt-white);
    margin: 0.5rem 0 0.3rem;
}
.gt-decision__sub {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-3);
    font-size: 0.92rem;
    margin: 0.4rem 0 0;
}
.gt-decision ol {
    counter-reset: gtfa;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.9rem;
}
.gt-decision li {
    counter-increment: gtfa;
    position: relative;
    padding: 0.1rem 0 0 3.4rem;
    min-height: 2.4rem;
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    line-height: 1.6;
    font-size: 0.98rem;
}
.gt-decision li::before {
    content: counter(gtfa);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--gt-orange);
    color: var(--gt-black);
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gt-decision li strong { color: var(--gt-white); }

/* ===== 3. Vendor profile cards ===== */
.gt-vendor {
    background: var(--gt-card);
    border: 1px solid var(--gt-hair);
    border-radius: 16px;
    padding: 1.75rem 1.75rem 0;
    margin: 1.75rem 0;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.2s ease;
}
.gt-vendor:hover {
    border-color: var(--gt-orange-line);
    transform: translateY(-2px);
}
.gt-vendor__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--gt-hair-2);
}
.gt-vendor__name {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    color: var(--gt-white);
    margin: 0;
}
.gt-vendor__role {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    color: var(--gt-ink-3);
    margin: 0.25rem 0 0;
}
.gt-vendor__tag {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gt-orange);
    background: var(--gt-orange-soft);
    border: 1px solid var(--gt-orange-line);
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.gt-vendor__lead {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 1.1rem 0 0.4rem;
}
/* Structured spec list */
.gt-spec { margin: 0.6rem 0 1.5rem; }
.gt-spec > div {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.4rem 1.2rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--gt-hair-2);
}
.gt-spec > div:first-child { border-top: 0; }
.gt-spec dt {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--gt-orange);
    padding-top: 0.15rem;
}
.gt-spec dd {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
.gt-spec dd strong { color: var(--gt-white); font-weight: 600; }
.gt-spec dd a { color: var(--gt-orange); text-decoration: underline; text-underline-offset: 2px; }

/* Verdict footer (inside card, full-bleed to card edges, pure black) */
.gt-verdict {
    background: var(--gt-black);
    border-top: 1px solid var(--gt-orange-line);
    margin: 0 -1.75rem;
    padding: 1.2rem 1.75rem 1.4rem;
}
.gt-verdict p {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}
.gt-verdict p + p { margin-top: 0.5rem; }
.gt-verdict .gt-vlabel {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--gt-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    margin-right: 0.15rem;
}

/* Setup guardrail block (Granola 60-second setup) */
.gt-setup {
    background: var(--gt-inset);
    border: 1px solid var(--gt-hair);
    border-top: 2px solid var(--gt-orange);
    border-radius: 10px;
    padding: 1.15rem 1.35rem;
    margin: 1.5rem 0;
}
.gt-setup p {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    color: var(--gt-ink-2);
    line-height: 1.65;
    margin: 0;
}
.gt-setup strong { color: var(--gt-white); }
.gt-setup a { color: var(--gt-orange); text-decoration: underline; text-underline-offset: 2px; }

/* ===== 4. Comparison table (premium) ===== */
.gt-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.75rem 0;
    border: 1px solid var(--gt-hair);
    border-radius: 12px;
}
.gt-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    font-size: 0.88rem;
}
.gt-table thead th {
    background: var(--gt-black);
    color: var(--gt-orange);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 1rem 1.1rem;
    border-bottom: 2px solid var(--gt-orange);
    white-space: nowrap;
}
.gt-table tbody td,
.gt-table tbody th {
    padding: 1rem 1.1rem;
    text-align: left;
    vertical-align: top;
    color: var(--gt-ink-2);
    border-bottom: 1px solid var(--gt-hair-2);
    font-weight: 400;
}
/* Zebra rows */
.gt-table tbody tr:nth-child(even) td,
.gt-table tbody tr:nth-child(even) th { background: var(--gt-inset); }
.gt-table tbody tr:last-child td,
.gt-table tbody tr:last-child th { border-bottom: 0; }
/* Sticky criteria column with orange accent divider */
.gt-table th[scope="row"],
.gt-table thead th:first-child {
    position: sticky;
    left: 0;
    color: var(--gt-white);
    font-weight: 600;
    background: var(--gt-black);
    border-right: 1px solid var(--gt-orange-line);
}
.gt-table tbody tr:nth-child(even) th[scope="row"] { background: #050505; }
.gt-table tbody tr:hover td,
.gt-table tbody tr:hover th { background: var(--gt-orange-soft); }
@media (max-width: 640px) {
    .gt-table { min-width: 680px; font-size: 0.82rem; }
}

/* ===== 5. Universal-rule quote band (full-bleed, pure black) ===== */
.gt-quote {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gt-black);
    border-top: 1px solid var(--gt-hair);
    border-bottom: 1px solid var(--gt-hair);
    padding: clamp(3rem, 7vw, 5rem) 0;
    margin: 3rem 0;
}
.gt-quote__inner {
    width: var(--gt-shell);
    max-width: 820px;
    margin: 0 auto;
}
.gt-quote__line {
    font-family: 'Syne', 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.35rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--gt-white);
    margin: 0.4rem 0 0;
}
.gt-quote .gt-mark {
    color: var(--gt-orange);
    background: linear-gradient(transparent 62%, var(--gt-orange-soft) 62%);
    padding: 0 0.05em;
}
.gt-quote .gt-quote__foot {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gt-ink-2);
    margin-top: 1.1rem;
}

/* ===== Sources / fine print ===== */
.gt-sources h3 {
    color: var(--gt-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
    margin: 2.5rem 0 0.75rem;
}
.gt-sources ul {
    font-family: 'DM Sans', 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    color: var(--gt-ink-3);
    line-height: 1.55;
    padding-left: 1.2rem;
}
.gt-sources li { margin-bottom: 0.4rem; }

/* ===== Motion (respectful) ===== */
@media (prefers-reduced-motion: no-preference) {
    .gt-header .back-link,
    .gt-header h1,
    .gt-header .gt-sub,
    .gt-header .gt-date {
        animation: gt-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .gt-header h1 { animation-delay: 0.05s; }
    .gt-header .gt-sub { animation-delay: 0.1s; }
    .gt-header .gt-date { animation-delay: 0.15s; }
}
@keyframes gt-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .gt-header { padding: 6.5rem 0 2.5rem; }
    .gt-decision,
    .gt-vendor { padding-left: 1.25rem; padding-right: 1.25rem; }
    .gt-verdict { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
    .gt-spec > div { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.7rem 0; }
    .gt-spec dt { padding-top: 0; }
}