/* pure css custom design built and managed by sitethreesixty.com */

/* ================================
   WHY NOT SHARED HOSTING — Page Styles
   Apple-style: typography-led, generous whitespace, minimal decoration
   All colors via tokens, no hardcoded values
   ================================ */

/* Hide US content by default (prevents flash before region-switch script) */
[data-region="us"] { display: none; }

/* ================================
   PAGE BODY OVERRIDE
   White background for Apple-style clean canvas
   ================================ */
body.why-not-shared-hosting {
    background-color: var(--bg-white);
}

body.why-not-shared-hosting .section-alt {
    background-color: var(--color-gray-50);
}

/* ================================
   SCROLL PROGRESS BAR
   CSS-only using scroll-driven animations
   Progressive enhancement — no bar shown in unsupported browsers
   ================================ */
@supports (animation-timeline: scroll()) {
    body.why-not-shared-hosting::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: var(--color-teal-500);
        transform-origin: left;
        transform: scaleX(0);
        z-index: 100;
        animation: scroll-progress linear;
        animation-timeline: scroll();
    }

    @keyframes scroll-progress {
        to {
            transform: scaleX(1);
        }
    }
}

/* ================================
   HERO + HOOK (Section 1)
   Text-only hero, centred, generous top padding
   ================================ */
.hero-position {
    text-align: center;
    padding: 4rem 0 2rem;
}

@media (min-width: 768px) {
    .hero-position {
        padding: 6rem 0 3rem;
    }
}

.position-title {
    font-size: var(--text-3xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .position-title {
        font-size: var(--text-5xl);
    }
}

.position-hook {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .position-hook {
        font-size: var(--text-2xl);
    }
}

.hook-accent {
    color: var(--color-teal-700);
}

.position-subtext {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 42.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* ================================
   INTERSTITIAL (Section 2)
   Pull-quote treatment, pause point
   ================================ */
.interstitial {
    text-align: center;
    padding: 2rem 0 3rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
    .interstitial {
        padding: 4rem 0;
    }
}

.interstitial-line {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-snug);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .interstitial-line {
        font-size: var(--text-3xl);
    }
}

.interstitial-line:last-child {
    margin-bottom: 0;
}

/* Mobile: merge hero + interstitial into one visual beat */
@media (max-width: 767px) {
    .hero-position {
        padding-bottom: 1rem;
    }

    .interstitial {
        border-top: none;
        padding-top: 1rem;
    }
}

/* ================================
   CONTENT SECTION TYPOGRAPHY
   Page-scoped overrides for h2 and body text
   Base .section padding from critical.css (3rem / 5rem) — not duplicated
   ================================ */
body.why-not-shared-hosting .section h2 {
    margin-bottom: 1.5rem;
}

body.why-not-shared-hosting .section p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Payoff text — the landing point of each section */
.payoff-text {
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-top: 1.5rem;
}

/* ================================
   SERVICE LISTS (Sections 4, 6, 9)
   Teal dot markers, clean vertical rhythm
   ================================ */
.service-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-teal-500);
}

/* ================================
   NUMBER CALLOUT (Section 5)
   Large teal "9" — visual anchor mid-page for scanners
   ================================ */
.number-callout {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
}

.number-callout-value {
    font-size: var(--text-5xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--color-teal-500);
    line-height: 1;
}

@media (min-width: 768px) {
    .number-callout-value {
        font-size: 4.5rem;
    }
}

.number-callout-text {
    font-size: var(--text-lg);
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .number-callout-text {
        font-size: var(--text-xl);
    }
}

/* ================================
   PRESSURE LIST (Section 5)
   Quick-fire questions — mounting pressure
   ================================ */
.pressure-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pressure-list li {
    font-size: var(--text-base);
    color: var(--text-secondary);
    padding-left: 1.25rem;
    position: relative;
}

@media (min-width: 768px) {
    .pressure-list li {
        font-size: var(--text-lg);
    }
}

.pressure-list li::before {
    content: '\2014';
    position: absolute;
    left: 0;
    color: var(--color-gray-400);
}

/* ================================
   HONEST Q&A (Section 6)
   Conversational voice shift — mini pull-quote
   ================================ */
.honest-qa {
    margin-top: 2rem;
    padding: 1.5rem;
    border-left: 3px solid var(--border-light);
    background: var(--color-gray-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.honest-qa p {
    margin-bottom: 0.5rem;
}

.honest-qa p:last-child {
    margin-bottom: 0;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

/* ================================
   AUDIENCE CARDS (Section 7)
   Two-column desktop, stacked mobile
   ================================ */
.audience-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .audience-cards {
        grid-template-columns: 1fr 1fr;
    }
}

.audience-card {
    padding: 2rem;
    border-radius: var(--radius-xl);
    border-left: 4px solid transparent;
    display: flex;
    flex-direction: column;
}

.audience-card h2 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .audience-card h2 {
        font-size: var(--text-2xl);
    }
}

/* Card 1: "For" — light teal bg, teal left border, checkmark icon */
.audience-card-for {
    background: rgba(2, 115, 115, 0.04);
    border-left-color: var(--color-teal-500);
}

.audience-card-for h2::before {
    content: '\2713';
    color: var(--color-teal-500);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

/* Card 2: "Not for" — light grey bg, grey left border, cross icon */
.audience-card-not {
    background: var(--color-gray-50);
    border-left-color: var(--color-gray-400);
}

.audience-card-not h2::before {
    content: '\2717';
    color: var(--color-gray-400);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.audience-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.audience-list li {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    padding-left: 1rem;
    position: relative;
}

.audience-card-for .audience-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-teal-500);
}

.audience-card-not .audience-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-gray-400);
}

.audience-closing {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--text-tertiary);
    line-height: var(--line-height-relaxed);
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

/* ================================
   CONTRAST SECTION (Section 8)
   Full-width dark background, large centred typography
   Emotional centrepiece of the page
   ================================ */
.contrast-section {
    background: var(--color-gray-900);
    color: var(--text-white);
    text-align: center;
    padding: 4rem 1rem;
}

@media (min-width: 768px) {
    .contrast-section {
        padding: 6rem 1rem;
    }
}

.contrast-section h2 {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--text-white);
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .contrast-section h2 {
        font-size: var(--text-3xl);
    }
}

.contrast-comparison {
    margin-bottom: 2.5rem;
}

.contrast-term {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--text-white);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .contrast-term {
        font-size: var(--text-4xl);
    }
}

.contrast-vs {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    font-weight: var(--weight-normal);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: lowercase;
    margin-bottom: 0.5rem;
}

.contrast-statement {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-white);
    line-height: var(--line-height-snug);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .contrast-statement {
        font-size: var(--text-xl);
    }
}

.contrast-closing {
    font-size: var(--text-base);
    color: var(--color-gray-400);
    line-height: var(--line-height-normal);
}

@media (min-width: 768px) {
    .contrast-closing {
        font-size: var(--text-lg);
    }
}

/* ================================
   CLOSING QUOTES (Section 10)
   Two stacked quote blocks — grey vs teal
   ================================ */
.closing-quotes-section h3 {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .closing-quotes-section h3 {
        font-size: var(--text-2xl);
    }
}

.closing-quotes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quote-block {
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid transparent;
}

.quote-block-traditional {
    background: var(--color-gray-100);
    border-left-color: var(--color-gray-400);
}

.quote-block-ours {
    background: rgba(2, 115, 115, 0.04);
    border-left-color: var(--color-teal-500);
}

.quote-label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    font-weight: var(--weight-medium);
    margin-bottom: 0.5rem;
}

.quote-text {
    font-size: var(--text-xl);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-snug);
    margin: 0;
    padding: 0;
    border: none;
}

.quote-block-traditional .quote-text {
    color: var(--color-gray-500);
}

.quote-block-ours .quote-text {
    color: var(--text-primary);
}

/* ================================
   CTA (Section 11)
   Clean, centred, generous padding
   ================================ */
.cta-position {
    text-align: center;
    padding: 3rem 0 4rem;
}

@media (min-width: 768px) {
    .cta-position {
        padding: 4rem 0 5rem;
    }
}

.cta-supporting {
    font-size: var(--text-lg);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .cta-supporting {
        font-size: var(--text-xl);
    }
}

.cta-buttons-position {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .cta-buttons-position {
        flex-direction: row;
    }
}

.cta-tertiary-link {
    margin-top: 0;
}

.cta-tertiary-link a {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: var(--transition-colors);
}

.cta-tertiary-link a:hover {
    color: var(--color-teal-700);
}

/* ================================
   RESPONSIVE — Small screens (320px)
   Ensure title + hook + interstitial fits first viewport
   ================================ */
@media (max-width: 374px) {
    .position-title {
        font-size: var(--text-2xl);
    }

    .position-hook {
        font-size: var(--text-lg);
    }

    .interstitial-line {
        font-size: var(--text-xl);
    }

    .number-callout-value {
        font-size: var(--text-4xl);
    }
}

/* pure css custom design built and managed by sitethreesixty.com */