/* ==========================================================================
   SmartWebMakers - Design System
   Tokens sourced from 02-brand-guidelines.md. Change values ONLY here -
   every page inherits from this file, nothing should be hardcoded per-page.

   Sprint D1: the genuinely shared tokens (colors, typography, spacing,
   radius/shadow) moved to tokens.css, loaded before this file on every
   page - admin.css and portal.css depend on tokens.css directly rather
   than loading this entire marketing stylesheet just for the tokens they
   use. What remains here is marketing-specific layout - confirmed neither
   admin.css nor portal.css reference either variable below.
   ========================================================================== */

:root {
  /* Layout */
  --container-width: 1140px;
  --header-height: 76px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
button {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  font-weight: 700;
}
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
}
h2 {
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.25rem);
}
h3 {
  font-size: 1.25rem;
  font-weight: 600;
}
p {
  margin: 0 0 var(--space-3);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* Visible keyboard focus everywhere - non-negotiable for a form-heavy site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.section {
  padding: var(--space-6) 0;
}
.section-tint {
  background: var(--color-sky-tint);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  min-height: 48px;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-cta);
  color: var(--color-navy);
}
.btn-primary:hover {
  background: var(--color-cta-dark);
  color: var(--color-navy);
}

.btn-outline {
  background: transparent;
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.btn-outline:hover {
  background: var(--color-sky-tint);
}

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

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.logo-mark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-navy);
}
.logo-accent {
  color: var(--color-primary-dark);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-list {
  display: flex;
  gap: var(--space-3);
}
.nav-link {
  font-weight: 500;
  color: var(--color-ink);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--color-navy);
  border-bottom-color: var(--color-cta);
}
.nav-cta {
  padding: 10px 18px;
  min-height: 44px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-navy);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) var(--space-4);
}
.hero-sub {
  font-size: 1.1rem;
  max-width: 46ch;
}
/* For intro/lead paragraphs in regular content sections (About, etc.) -
   same visual weight as hero-sub, but without the 46ch cap that's meant
   for short hero taglines, not multi-sentence body prose. Let the
   container's own max-width control line length instead. */
.lead-text {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--color-ink);
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.accent {
  color: var(--color-cta);
}

/* Signature element: a device frame with a WhatsApp-to-website chat mockup -
   ties directly to the brand story (an inquiry on WhatsApp becomes a live
   site), built in pure CSS, no image assets required. */
.device-frame {
  background: var(--color-navy);
  border-radius: 32px;
  padding: 14px;
  max-width: 320px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.device-notch {
  width: 60px;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  margin: 0 auto var(--space-3);
}
.device-screen {
  background: var(--color-sky-tint);
  border-radius: 20px;
  padding: var(--space-4);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.chat-bubble {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  max-width: 85%;
}
.chat-bubble-reply {
  align-self: flex-end;
  background: var(--color-whatsapp);
  color: var(--color-white);
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar {
  background: var(--color-navy);
}
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 160px;
  text-align: center;
}
.trust-item strong {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: 1.15rem;
}
.trust-item span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
}
.trust-item-link {
  cursor: pointer;
}
.trust-item-link:hover strong {
  color: var(--color-cta);
}
.trust-item-link:hover span {
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Services grid
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.services-grid-4 {
  grid-template-columns: repeat(2, 1fr);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-card h3 {
  margin-bottom: 0;
}
.service-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
}
.service-price span {
  font-size: 0.85rem;
  color: var(--color-ink);
  font-weight: 500;
}
.service-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Portfolio teaser
   ========================================================================== */
.portfolio-teaser {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
   FAQ (native details/summary - zero JS)
   ========================================================================== */
.faq-list {
  max-width: 760px;
  margin-top: var(--space-5);
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-left: var(--space-3);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin-top: var(--space-2);
  padding-right: var(--space-5);
}

/* ==========================================================================
   Final CTA banner
   ========================================================================== */
.cta-banner {
  background: var(--color-sky-tint);
}
.cta-banner-inner {
  text-align: center;
  padding: var(--space-7) var(--space-4);
}
.cta-banner p {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.cta-phone {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-navy);
}
.cta-phone:hover {
  color: var(--color-primary-dark);
}

/* ==========================================================================
   Pricing page
   ========================================================================== */
.pricing-hero {
  text-align: center;
  padding-bottom: var(--space-4);
}
.pricing-hero .hero-sub {
  max-width: 50ch;
}

.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
  margin-top: var(--space-2);
}
.tier-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.tier-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.tier-card.is-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.tier-card .badge {
  position: absolute;
  top: -14px;
  left: var(--space-5);
}
.tier-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 2.4rem;
  line-height: 1;
  margin: var(--space-2) 0 var(--space-3);
}
.tier-price span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-ink);
  margin-top: 4px;
}
.tier-renewal {
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  font-weight: 600;
  margin: -8px 0 var(--space-3);
}
.tier-card .btn {
  margin-top: auto;
  width: 100%;
}

.price-list-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}
.check-list,
.cross-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.check-list li,
.cross-list li {
  padding-left: 26px;
  position: relative;
  font-size: 0.95rem;
}
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-whatsapp);
  font-weight: 700;
}
.cross-list li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--color-ink);
  opacity: 0.5;
}

.addons-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.addons-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.addons-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.addons-table tr:last-child td {
  border-bottom: none;
}
.addons-table tr:nth-child(even) {
  background: var(--color-sky-tint);
}

.policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 700px;
}
.policy-list li {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  list-style: none;
}
.policy-list strong {
  color: var(--color-navy);
}

/* ==========================================================================
   Services page - "who this is for" tags, add-on grid
   ========================================================================== */
.who-for {
  font-size: 0.85rem;
  color: var(--color-ink);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-2);
  margin: var(--space-2) 0;
}
.who-for strong {
  color: var(--color-navy);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.addon-card {
  padding: var(--space-4);
}
.addon-card h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}
.addon-card p:not(.who-for) {
  font-size: 0.9rem;
}

/* ==========================================================================
   Badges (Highlight Gold - reserved for badges/tags per brand guidelines)
   ========================================================================== */
.badge {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--space-2);
  align-self: flex-start;
}

/* ==========================================================================
   Timeline (How It Works - genuinely sequential content, numbered markers earn it)
   ========================================================================== */
.timeline {
  max-width: 640px;
  margin-top: var(--space-5);
}
.timeline-step {
  display: flex;
  gap: var(--space-4);
}
.timeline-marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  flex-shrink: 0;
}
.timeline-connector {
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin: 4px 0;
  min-height: 16px;
}
.timeline-content {
  padding-bottom: var(--space-5);
}
.timeline-content h3 {
  margin-bottom: 4px;
}
.timeline-reassurance {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-6);
  align-items: start;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-info .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.contact-form-wrap {
  background: var(--color-sky-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.contact-form .btn {
  width: 100%;
  margin-top: var(--space-2);
}

.form-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: 0.95rem;
}
.form-message-success {
  background: var(--color-success-tint);
  color: var(--color-success);
  border: 1px solid #b7ebc9;
}
.form-message-error {
  background: var(--color-danger-tint);
  color: var(--color-danger);
  border: 1px solid #f5c4b5;
}
/* Sprint FF3. A warning variant (amber) for "this works but something isn't
   configured yet" notices - distinct from a hard error. On the EE1 warning
   tokens. */
.form-message-warning {
  background: var(--color-warning-tint);
  color: var(--color-warning);
  border: 1px solid #e6d9a8;
}

/* Honeypot - invisible to real visitors, present in the DOM for basic bots */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Legal pages (Terms, Privacy) - default h2 is sized for section
   headers, too large for 10 sequential sub-headings in a document ---- */
.legal-content h2 {
  font-size: 1.2rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.legal-content > p:first-of-type,
.legal-content h2:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.legal-content p {
  color: var(--color-ink);
}
.legal-content a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ---- 404 page (only remaining consumer of stub-section/stub-copy) ---- */
.stub-section {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.stub-copy {
  max-width: 50ch;
  margin: 0 auto var(--space-4);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.85);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-4) var(--space-5);
}
.footer-logo {
  color: var(--color-white);
}
.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-2);
}
.footer-col h3 {
  color: var(--color-white);
  font-size: 0.95rem;
  margin-bottom: var(--space-3);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col a {
  color: rgba(255, 255, 255, 0.75);
}
.footer-col a:hover {
  color: var(--color-white);
}
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.footer-legal p {
  margin: 0;
}
.footer-legal-parent {
  /* Deliberately the same muted weight as the copyright line beside it,
     not a louder or more prominent treatment - a legal disclosure line,
     not a promotional one. */
  text-align: right;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal a:hover {
  color: var(--color-white);
}

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 600;
  animation: fab-pulse 1.8s ease-out 1;
}
.whatsapp-fab:hover {
  background: var(--color-whatsapp-dark);
}

@keyframes fab-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Forms (base styles - used fully from Phase 8 onward)
   ========================================================================== */
.form-group {
  margin-bottom: var(--space-4);
}
.form-group label {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-group textarea {
  min-height: 120px;
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* ==========================================================================
   Cards (reused across Services / Pricing / Portfolio in later phases)
   ========================================================================== */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Responsive - mobile-first breakpoints
   Non-negotiable test widths: 375px / 390px / 430px (see 03-tech-stack.md)
   ========================================================================== */
@media (max-width: 1100px) {
  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5) var(--space-4);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .site-nav.is-open {
    transform: translateX(0);
  }
  .nav-list {
    flex-direction: column;
    gap: var(--space-2);
  }
  .nav-link {
    padding: var(--space-3) 0;
    font-size: 1.1rem;
  }
  .nav-cta {
    margin-top: var(--space-4);
    width: 100%;
  }
  .nav-toggle {
    display: flex;
  }
  .client-login-link {
    display: none;
  }
  .mobile-only-nav-item {
    display: block;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .mobile-only-nav-item .nav-link {
    font-weight: 600;
    color: var(--color-primary-dark);
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-6) var(--space-3);
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    padding: var(--space-6) var(--space-3);
  }

  .whatsapp-fab {
    right: var(--space-3);
    bottom: var(--space-3);
    width: 52px;
    height: 52px;
  }

  .trust-bar-inner {
    justify-content: center;
    text-align: center;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card .btn {
    align-self: stretch;
    text-align: center;
  }

  .tier-grid {
    grid-template-columns: 1fr;
  }
  .tier-card {
    padding: var(--space-4);
  }
  .tier-card .badge {
    top: -12px;
    left: var(--space-4);
  }
  .addons-table td {
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .section {
    padding: var(--space-6) 0;
  }
  .btn {
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Cookie consent banner
   Bottom-right, stacked above the WhatsApp button (56px + 24px offset)
   so the two never overlap. Neutral navy, not the CTA orange - this is a
   utility banner, not a marketing CTA competing with the page's real one.
   ========================================================================== */
.cookie-consent {
  position: fixed;
  right: var(--space-4);
  bottom: 100px;
  max-width: 300px;
  background: var(--color-white);
  border: 1px solid rgba(11, 37, 69, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  z-index: 590;
}
.cookie-consent-text {
  margin: 0 0 var(--space-3);
  font-size: 0.85rem;
  color: var(--color-ink);
  line-height: 1.5;
}
.cookie-consent-text a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.cookie-consent-actions {
  display: flex;
  gap: var(--space-2);
}
.btn-cookie {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1.5px solid var(--color-navy);
  cursor: pointer;
  font-family: inherit;
}
.btn-cookie-accept {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-cookie-accept:hover {
  background: #0a1e3a;
}
.btn-cookie-outline {
  background: transparent;
  color: var(--color-navy);
}
.btn-cookie-outline:hover {
  background: rgba(11, 37, 69, 0.06);
}
.btn-cookie:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 430px) {
  .cookie-consent {
    right: var(--space-3);
    left: var(--space-3);
    max-width: none;
    bottom: 90px;
  }
}

/* ==========================================================================
   Comparison table (SmartWebMakers vs DIY vs Free/Favor)
   Mobile: horizontal scroll rather than cramming 4 columns into 375px -
   each column would be ~90px wide and unreadable otherwise.
   ========================================================================== */
.compare-wrap {
  overflow-x: auto;
  margin-top: var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--color-white);
}
.compare-table th,
.compare-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.compare-table th {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-navy);
  background: var(--color-sky-tint);
}
.compare-table tr:last-child td {
  border-bottom: none;
}
.compare-table .compare-row-label {
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}
.compare-table .compare-us {
  background: rgba(0, 156, 218, 0.06);
  border-left: 3px solid var(--color-primary);
  border-right: 3px solid var(--color-primary);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.compare-table th.compare-us {
  border-top: 3px solid var(--color-primary);
}
.compare-scroll-hint {
  display: none;
  font-size: 0.8rem;
  color: var(--color-ink);
  margin-top: var(--space-2);
}

@media (max-width: 700px) {
  .compare-scroll-hint {
    display: block;
  }
}

/* ==========================================================================
   Founder section - photo placeholder until a real one is provided
   ========================================================================== */
.founder-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  max-width: 640px;
}
.founder-photo-placeholder {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.2rem;
  flex-shrink: 0;
}
.founder-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-sky-tint);
}
.founder-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.15rem;
  margin: 0 0 2px;
}
.founder-title {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 var(--space-2);
}
.founder-quote {
  color: var(--color-ink);
  font-style: italic;
  margin: 0;
}

@media (max-width: 520px) {
  .founder-card {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
}

/* ==========================================================================
   Blog - listing and article pages
   ========================================================================== */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
  max-width: 780px;
}
.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.blog-card-date {
  font-size: 0.8rem;
  color: var(--color-ink);
  opacity: 0.75;
  margin-bottom: 4px;
}
.blog-card h3 {
  margin-bottom: var(--space-2);
}
.blog-card h3 a {
  color: var(--color-navy);
}
.blog-card h3 a:hover {
  color: var(--color-primary-dark);
}
.blog-card p {
  margin-bottom: var(--space-2);
}
.blog-card .btn {
  margin-top: var(--space-2);
}

.blog-article {
  max-width: 720px;
}
.blog-article-date {
  font-size: 0.85rem;
  color: var(--color-ink);
  opacity: 0.75;
  margin-bottom: var(--space-2);
}
.blog-article h2 {
  margin-top: var(--space-5);
}
.blog-article p {
  line-height: 1.7;
}
.blog-article ul,
.blog-article ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}
.blog-article li {
  margin-bottom: var(--space-2);
  line-height: 1.6;
}
.blog-back-link {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ==========================================================================
   Video placeholder - honest pending state until a real video is embedded
   ========================================================================== */
.video-placeholder {
  max-width: 640px;
  margin-top: var(--space-4);
  aspect-ratio: 16 / 9;
  background: var(--color-navy);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-white);
}
.video-placeholder-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder-play svg {
  margin-left: 4px;
}
.video-placeholder-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 0 var(--space-4);
}

/* ==========================================================================
   Language switcher - top of header, always visible (desktop nav and
   mobile hamburger both), grouped with nav-toggle so header-inner keeps
   its clean 3-slot flex layout.
   ========================================================================== */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.client-login-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1.5px solid var(--color-primary-dark);
  border-radius: 999px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.client-login-link:hover,
.client-login-link.is-active {
  background: var(--color-primary-dark);
  color: var(--color-white);
}
.client-login-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.mobile-only-nav-item {
  display: none;
}
.lang-switch-top {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid var(--color-primary-dark);
  border-radius: 999px;
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.lang-switch-top:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}
.lang-switch-top:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .lang-switch-top {
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  .client-login-link {
    padding: 5px 12px;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Hero capacity note and referral section
   ========================================================================== */
.hero-capacity-note {
  margin-top: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-ink);
}
.referral-block {
  text-align: center;
}
.referral-block h2 {
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   Uptime dashboard
   ========================================================================== */
.uptime-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.uptime-stat-card {
  text-align: center;
}
.uptime-stat-value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px;
}
.uptime-stat-label {
  font-size: 0.85rem;
  color: var(--color-ink);
}

/* ==========================================================================
   Sprint S2 - the self-serve journey's own page header, replacing two
   different borrowed patterns at once: .pricing-hero (a landing-page
   hero, wrong weight entirely for "step 2 of a form you're already
   filling out") on signup.ejs/signup-verify.ejs, and .stub-section on
   payments/success.ejs/failed.ejs - despite that class's own comment
   claiming the 404 page is its only remaining consumer, confirmed
   directly this was never true (nine real files still use it). Not this
   sprint's job to migrate all nine - only the ones genuinely part of
   this journey - but worth fixing here rather than adding a tenth
   dependency on a class already documented as meant to be retired.
   Deliberately its own, third component (after admin-page-header,
   portal-page-header) - a brand-new prospect mid-signup, about to pay
   real money, isn't an internal admin or an existing client checking
   their account; reassuring and clear fits that moment specifically.
   ========================================================================== */
.journey-page-header {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.journey-page-header-subtitle {
  margin: var(--space-2) auto 0;
  max-width: 480px;
  color: var(--color-ink);
}

/* Progress indicator - four steps, connected by a line, the current one
   filled and labeled boldest, completed ones checked, upcoming ones
   dim. This is the actual, real fix for what this sprint's own text
   names directly: "four independently-built pages that happen to chain
   together," not a decorative addition alongside the fix. */
.journey-progress {
  display: flex;
  justify-content: center;
  max-width: 480px;
  margin: var(--space-4) auto 0;
}
.journey-progress-step {
  flex: 1;
  text-align: center;
  position: relative;
}
.journey-progress-step-marker {
  width: 28px;
  height: 28px;
  margin: 0 auto 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  border: 2px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
}
.journey-progress-step-label {
  font-size: 0.75rem;
  color: var(--color-ink);
}
/* The connecting line - one continuous element per step, positioned to
   run from the center of one marker to the center of the next, not
   drawn between every pair individually. The first step has nothing to
   its left, so it alone skips this rule. */
.journey-progress-step:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.journey-progress-step-marker {
  position: relative;
  z-index: 1;
}
.journey-progress-step.is-complete .journey-progress-step-marker {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.journey-progress-step.is-complete::before {
  background: var(--color-primary);
}
.journey-progress-step.is-current .journey-progress-step-marker {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}
.journey-progress-step.is-current .journey-progress-step-label {
  color: var(--color-navy);
  font-weight: 600;
}

/* At this project's own 375px minimum test width, four 28px markers plus
   labels wrapping to two lines each would crowd - shrinking the marker
   and hiding labels for non-current steps keeps the shape of "where am
   I in four steps" legible without needing horizontal scrolling on the
   one page in this whole flow most likely to be opened on a phone
   screen. */
@media (max-width: 400px) {
  .journey-progress-step-marker {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
  }
  .journey-progress-step:not(.is-current) .journey-progress-step-label {
    display: none;
  }
  .journey-progress-step:not(:first-child)::before {
    top: 11px;
  }
}

/* ==========================================================================
   Sprint S2 - utility classes for this same journey's own inline-style
   extraction, under their own je- prefix (not portal-, not admin-) -
   the third, deliberately separate namespace for the third surface this
   whole roadmap has now given its own visual-cleanup pass.
   ========================================================================== */
.je-container-w560 {
  max-width: 560px;
}
.je-container-w420 {
  max-width: 420px;
}
.je-section-flush {
  padding-top: 0;
}
.je-mt-3 {
  margin-top: var(--space-3);
}
.je-mt-4 {
  margin-top: var(--space-4);
}
.je-text-center {
  text-align: center;
}
.je-actions-center {
  justify-content: center;
}
.je-tier-options {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.je-tier-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  cursor: pointer;
}
.je-tier-option input {
  width: auto;
}
.je-redirect-wrap {
  text-align: center;
  padding-top: var(--space-8);
}

/* ==========================================================================
   Sprint X1 - portfolio thumbnails. Two classes, not one, because
   .service-card (--space-5 padding) and .tier-card (--space-6 padding)
   genuinely differ - a single shared negative-margin value would bleed
   correctly on one card type and leave a visible gap or overhang on the
   other. aspect-ratio + object-fit: cover keeps every thumbnail the
   same shape regardless of each real page's own actual height, so the
   grid stays visually even even though the underlying screenshots are
   real, unstaged captures of genuinely different pages.
   ========================================================================== */
.portfolio-thumb {
  display: block;
  width: calc(100% + 2 * var(--space-5));
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
.portfolio-thumb-lg {
  display: block;
  width: calc(100% + 2 * var(--space-6));
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-3);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* Sprint JJ3 - knowledge base / help center. */
.kb-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}
.kb-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.kb-list li:last-child {
  border-bottom: none;
}
.kb-article p {
  margin-bottom: 1rem;
  line-height: 1.7;
}
.kb-help-cta {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
}