/*
================================================================================
SQUASHSPACE — styles.css
================================================================================
Purpose: shared styles for the whole site (index.html + every landing page
         under /squashspace/html/).
Last Updated: 2026-05-29

STRUCTURE:
1. CSS variables  — colours, spacing, typography
2. Reset / base
3. Layout primitives — header, footer, hero, footer
4. Components — feature grid, tier grid, reason grid, quote, FAQ
5. Forms — contact form, apply form
6. Landing-page styles (.landing-page)
7. Mobile breakpoints

MAINTENANCE NOTES:
- Keep this file flat; do NOT add a build step / preprocessor.
- Adding a third utility class for the same purpose is the signal to refactor.
- All hex values go in the :root variable block — no inline colours below.
- Body font is a serif stack; UI inputs override to a sans-serif stack.
================================================================================
*/

/* ----------------------------------------------------------------
   1. CSS variables
   ---------------------------------------------------------------- */
:root {

    --colour-bg:        #f7f6f1;
    --colour-bg-dark:   #1a1d23;
    --colour-fg:        #1d1f24;
    --colour-fg-dark:   #f0eee6;
    --colour-fg-soft:   #2d3038;
    --colour-accent:    #0d7a55;
    --colour-accent-d:  #074735;
    --colour-accent-l:  #7df0c8;
    --colour-muted:     #6b6f78;
    --colour-muted-d:   #b5b8c0;
    --colour-border:    #d8d5cb;
    --colour-highlight: #e0ede4;
    --colour-quote-bg:  rgba(255, 255, 255, 0.02);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 5rem;

    --font-body: ui-serif, "Iowan Old Style", "Apple Garamond",
                 "Palatino Linotype", serif;
    --font-ui:   ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, sans-serif;

    --radius-card:   12px;
    --radius-pill:   999px;
    --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.05),
                     0 4px 14px rgba(0, 0, 0, 0.06);

}

/* ----------------------------------------------------------------
   2. Reset / base
   ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {

    margin:                  0;
    padding:                 0;
    font-family:             var(--font-body);
    font-size:               17px;
    line-height:             1.55;
    color:                   var(--colour-fg);
    background:              var(--colour-bg);
    -webkit-font-smoothing:  antialiased;

}

a {
    color: var(--colour-accent);
    text-decoration: none;
}
a:hover { color: var(--colour-accent-d); }

h1, h2, h3 {
    font-weight:     700;
    letter-spacing:  -0.01em;
    line-height:     1.15;
}

/* ----------------------------------------------------------------
   3. Layout primitives — header, hero, footer
   ---------------------------------------------------------------- */
header {

    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-2) var(--space-4);
    border-bottom:   1px solid var(--colour-border);
    background:      var(--colour-bg);
    position:        sticky;
    top:             0;
    z-index:         50;

}

header .logo {
    font-weight: 700;
    font-size:   1.4rem;
    color:       var(--colour-fg);
}

header nav {
    display: flex;
    gap:     var(--space-3);
}

header nav a {
    color:        var(--colour-fg);
    font-size:    0.95rem;
}
header nav a:hover { color: var(--colour-accent); }

header .login-link {

    color:           var(--colour-fg);
    border:          1px solid var(--colour-border);
    padding:         var(--space-1) var(--space-2);
    border-radius:   var(--radius-pill);
    font-size:       0.9rem;

}
header .login-link:hover {
    background: var(--colour-highlight);
    color:      var(--colour-accent-d);
}

.hero {
    padding:    var(--space-6) var(--space-4) var(--space-5);
    max-width:  1100px;
    margin:     0 auto;
}

.hero h1 {
    font-size:  3.6rem;
    margin:     0 0 var(--space-3);
}

.hero .lede {
    font-size:  1.25rem;
    max-width:  720px;
    color:      var(--colour-fg-soft);
    margin:     0 0 var(--space-4);
}

.hero-note {
    margin-top:  var(--space-3);
    color:       var(--colour-muted);
    font-size:   0.9rem;
}

.cta {

    display:         inline-block;
    background:      var(--colour-accent);
    color:           #fff;
    padding:         var(--space-1) var(--space-3);
    border-radius:   var(--radius-pill);
    font-weight:     600;
    font-size:       1rem;
    font-family:     var(--font-ui);

}
.cta:hover { background: var(--colour-accent-d); color: #fff; }

.cta-secondary {
    background:    transparent;
    color:         var(--colour-fg);
    border:        1px solid var(--colour-border);
    margin-left:   var(--space-1);
}
.cta-secondary:hover {
    background:    var(--colour-highlight);
    color:         var(--colour-accent-d);
}

footer {

    border-top:   1px solid var(--colour-border);
    padding:      var(--space-4) var(--space-4);
    text-align:   center;
    color:        var(--colour-muted);
    font-size:    0.9rem;

}
footer nav {
    display:          inline-flex;
    gap:              var(--space-3);
    margin-top:       var(--space-1);
    justify-content:  center;
}

/* ----------------------------------------------------------------
   4. Components — sections, grids, tiers, reasons, quotes, FAQ
   ---------------------------------------------------------------- */
.section,
.features {
    padding:    var(--space-6) var(--space-4);
    max-width:  1180px;
    margin:     0 auto;
}
.section h2,
.features h2 {
    font-size:  2.2rem;
    margin:     0 0 var(--space-1);
}

.section-sub {
    font-size:  1.05rem;
    color:      var(--colour-muted);
    max-width:  720px;
    margin:     0 0 var(--space-4);
}

.section-foot {
    margin:      var(--space-4) auto 0;
    max-width:   720px;
    color:       var(--colour-muted);
    font-style:  italic;
    text-align:  center;
}

.section-dark {
    background:      var(--colour-bg-dark);
    color:           var(--colour-fg-dark);
    max-width:       none;
    padding-left:    0;
    padding-right:   0;
}
.section-dark > * {
    padding-left:   var(--space-4);
    padding-right:  var(--space-4);
    max-width:      1180px;
    margin-left:    auto;
    margin-right:   auto;
}
.section-dark h2,
.section-dark h3 { color: var(--colour-fg-dark); }
.section-dark .section-sub { color: var(--colour-muted-d); }
.section-dark a            { color: var(--colour-accent-l); }

/* Feature grid (How it works) */
.feature-grid {

    display:                grid;
    grid-template-columns:  repeat(auto-fit, minmax(260px, 1fr));
    gap:                    var(--space-3);
    margin-top:             var(--space-4);

}
.feature-grid article {

    padding:         var(--space-3);
    border:          1px solid var(--colour-border);
    border-radius:   var(--radius-card);
    background:      #fff;

}
.feature-grid h3 {
    font-size:   1.15rem;
    margin:      0 0 var(--space-1);
}
.feature-grid p {
    font-size:  0.95rem;
    margin:     0 0 var(--space-1);
    color:      var(--colour-fg-soft);
}
.feature-grid .micro {
    font-size:  0.85rem;
    color:      var(--colour-muted);
}

.step-n {

    width:            36px;
    height:           36px;
    border-radius:    50%;
    background:       var(--colour-accent);
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-weight:      700;
    margin-bottom:    var(--space-2);
    font-family:      var(--font-ui);

}

.optional {
    color:       var(--colour-muted);
    font-weight: 400;
    font-size:   0.95rem;
}

/* Tier grid (Pricing) */
.tier-grid {

    display:                grid;
    grid-template-columns:  repeat(2, minmax(0, 1fr));
    gap:                    var(--space-3);
    max-width:              820px;
    margin:                 var(--space-4) auto 0;

}
.tier-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width:             none;
}
.tier {

    padding:         var(--space-4) var(--space-3);
    border:          1px solid var(--colour-border);
    border-radius:   var(--radius-card);
    background:      #fff;
    position:        relative;
    color:           var(--colour-fg);

}
.tier h3 {
    font-size:  1.25rem;
    margin:     0 0 var(--space-1);
}
.tier-price {
    font-size:   1.3rem;
    font-weight: 600;
    color:       var(--colour-accent-d);
    margin:      0 0 var(--space-1);
}
.tier-sub {
    color:      var(--colour-muted);
    font-size:  0.9rem;
    margin:     0 0 var(--space-3);
}
.tier ul { padding-left: var(--space-3); margin: 0; }
.tier li { margin: var(--space-1) 0; font-size: 0.95rem; }
.tier-popular {
    border:     2px solid var(--colour-accent);
    transform:  translateY(-8px);
}
.tier-badge {

    position:        absolute;
    top:             -14px;
    right:           var(--space-3);
    background:      var(--colour-accent);
    color:           #fff;
    padding:         2px var(--space-2);
    border-radius:   var(--radius-pill);
    font-size:       0.75rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    font-family:     var(--font-ui);

}

/* Reason grid (Why this works) */
.reason-grid {

    display:                grid;
    grid-template-columns:  repeat(2, minmax(0, 1fr));
    gap:                    var(--space-4);
    margin-top:             var(--space-4);

}
.reason-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.reason-grid article {
    border-left:   3px solid var(--colour-accent);
    padding:       var(--space-1) 0 var(--space-1) var(--space-3);
}
.section-dark .reason-grid article { border-left-color: var(--colour-accent-l); }
.reason-grid h3 { font-size: 1.15rem; margin: 0 0 var(--space-1); }
.reason-grid p  { margin: 0 0 var(--space-1); }
.reason-grid .micro {
    color:      var(--colour-muted);
    font-size:  0.85rem;
}
.section-dark .reason-grid .micro { color: var(--colour-muted-d); }

/* Stats row (designers page) */
.stats {

    display:                grid;
    grid-template-columns:  repeat(4, 1fr);
    gap:                    0;
    border-top:             1px solid var(--colour-border);
    border-bottom:          1px solid var(--colour-border);

}
.stats > div {
    padding:       var(--space-4) var(--space-3);
    border-right:  1px solid var(--colour-border);
}
.stats > div:last-child { border-right: none; }
.stats strong {
    display:        block;
    font-size:      1.7rem;
    color:          var(--colour-accent-d);
    margin-bottom:  var(--space-1);
}
.stats span {
    color:      var(--colour-muted);
    font-size:  0.85rem;
}

/* Quote grid (Customers) */
.quote-grid {

    display:                grid;
    grid-template-columns:  repeat(3, minmax(0, 1fr));
    gap:                    var(--space-3);
    margin-top:             var(--space-4);

}
.quote {

    border:          1px solid rgba(255, 255, 255, 0.08);
    background:      var(--colour-quote-bg);
    padding:         var(--space-3);
    border-radius:   var(--radius-card);

}
.quote p          { font-size: 1rem; color: var(--colour-fg-dark); }
.quote .quote-by  { color: var(--colour-muted-d); font-size: 0.85rem; margin-top: var(--space-2); }

/* FAQ list */
.faq {

    margin-top:             var(--space-4);
    display:                grid;
    gap:                    var(--space-2);
    max-width:              880px;

}
.faq article {

    padding:         var(--space-3);
    border:          1px solid var(--colour-border);
    border-radius:   10px;
    background:      #fff;

}
.faq h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.faq p  { margin: 0; color: var(--colour-fg-soft); font-size: 0.95rem; }
.faq code {

    background:      #f1efe9;
    padding:         1px var(--space-1);
    border-radius:   3px;
    font-size:       90%;

}

/* ----------------------------------------------------------------
   5. Forms — contact form (homepage) + apply form (designers)
   ---------------------------------------------------------------- */
.contact-form {

    background:      #fff;
    border:          1px solid var(--colour-border);
    border-radius:   var(--radius-card);
    padding:         var(--space-4) var(--space-4) var(--space-3);
    max-width:       620px;
    box-shadow:      var(--shadow-card);
    margin-top:      var(--space-2);
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-1);

}
.contact-heading { margin: 0; font-size: 1.35rem; }
.contact-sub     { margin: 0 0 var(--space-2); color: var(--colour-muted); font-size: 0.9rem; }

.contact-form label,
.apply-form label {

    font-family:     var(--font-ui);
    font-size:       0.8rem;
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    color:           var(--colour-muted);
    margin-top:      var(--space-1);

}

.contact-form input,
.contact-form textarea,
.apply-form input,
.apply-form textarea {

    font-family:     var(--font-ui);
    font-size:       1rem;
    padding:         var(--space-1) var(--space-2);
    border:          1px solid var(--colour-border);
    border-radius:   6px;
    background:      #fff;
    color:           var(--colour-fg);

}
.contact-form input:focus,
.contact-form textarea:focus,
.apply-form input:focus,
.apply-form textarea:focus {
    outline:        2px solid var(--colour-accent);
    outline-offset: 1px;
    border-color:   transparent;
}
.contact-form textarea,
.apply-form textarea {
    resize:      vertical;
    min-height:  80px;
}

.contact-button,
.apply-form button {

    align-self:      flex-start;
    background:      var(--colour-accent);
    color:           #fff;
    border:          1px solid var(--colour-accent);
    font-family:     var(--font-ui);
    font-weight:     600;
    font-size:       1rem;
    padding:         var(--space-1) var(--space-3);
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    margin-top:      var(--space-2);

}
.contact-button:hover,
.apply-form button:hover {
    background:    var(--colour-accent-d);
    border-color:  var(--colour-accent-d);
}

.contact-status {
    margin-top:   var(--space-2);
    padding:      var(--space-1) var(--space-2);
    border-radius: 6px;
    font-size:    0.95rem;
}
.contact-status.success {
    background:   #e0ede4;
    color:        var(--colour-accent-d);
    border-left:  3px solid var(--colour-accent);
}
.contact-status.error {
    background:   #fdecec;
    color:        #802222;
    border-left:  3px solid #c54242;
}

.apply-form {

    max-width:       620px;
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-2);

}
.apply-foot {
    color:      var(--colour-muted);
    font-size:  0.9rem;
    margin:     var(--space-1) 0 0;
}

/* ----------------------------------------------------------------
   6. Landing-page styles (.landing-page) — for narrow text pages
   like privacy / terms.  Kept compatible with the scaffold so future
   policy pages can drop into squashspace/html/ without new CSS.
   ---------------------------------------------------------------- */
.landing-page {

    max-width:   720px;
    margin:      var(--space-4) auto;
    padding:     0 var(--space-4);

}

.landing-page .lede {

    font-size:    1.15rem;
    color:        var(--colour-muted);
    margin:       var(--space-2) 0 var(--space-4) 0;

}

.landing-page section {
    margin: var(--space-4) 0;
}

/* ----------------------------------------------------------------
   7. Mobile breakpoints
   ---------------------------------------------------------------- */
.mobile-menu-toggle {

    display:      none;
    background:   transparent;
    border:       0;
    font-size:    1.4rem;
    cursor:       pointer;
    color:        var(--colour-fg);
    font-family:  var(--font-ui);

}

@media (max-width: 900px) {

    .reason-grid,
    .reason-grid-3,
    .tier-grid,
    .tier-grid-3,
    .quote-grid,
    .stats               { grid-template-columns: 1fr 1fr; }
    .stats > div         { border-right: none; border-bottom: 1px solid var(--colour-border); }
    .hero h1             { font-size: 2.5rem; }

}

@media (max-width: 600px) {

    .reason-grid,
    .reason-grid-3,
    .tier-grid,
    .tier-grid-3,
    .quote-grid,
    .stats               { grid-template-columns: 1fr; }

    header               { flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) var(--space-3); }
    header nav           { display: none; }
    header.menu-open nav { display: flex; flex-direction: column; position: absolute; top: 100%; right: 0; background: var(--colour-bg); padding: var(--space-2); border: 1px solid var(--colour-border); }
    .mobile-menu-toggle  { display: block; }

    .hero                { padding: var(--space-5) var(--space-3) var(--space-4); }
    .hero h1             { font-size: 2rem; }
    .hero .lede          { font-size: 1.05rem; }
    .section,
    .features            { padding: var(--space-5) var(--space-3); }

}