/* ==========================================================================
   SUMN — Page Components
   ========================================================================== */

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

.hero {
  position: relative;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  overflow: hidden;
}

.hero__row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--sp-5);
}

@media (max-width: 880px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}

.hero__copy h1 {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.hero__copy .lede {
  max-width: 42ch;
  margin-bottom: var(--sp-4);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.hero__microcopy {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--slate-grey);
}

/* The signature element: the product's "always there, never in the way"
   quality made visible — a quiet, breathing presence rather than a
   decorative animation. This is the one place motion is used deliberately,
   directly mirroring how the real desktop overlay behaves on screen. */

.hero__visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 420px;
  margin: 0 auto;
}

.presence {
  width: 100%;
  height: 100%;
}

.presence__ring {
  fill: none;
  stroke-width: 1.4;
}

.presence__ring--1 { stroke: var(--hairline); }
.presence__ring--2 { stroke: var(--signal-blue-soft-strong); }
.presence__ring--3 { stroke: var(--primary-blue); opacity: 0.5; }

.presence__core {
  fill: var(--primary-blue);
}

.presence__pulse {
  fill: none;
  stroke: var(--signal-blue);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: center;
  animation: presence-pulse 3.6s ease-out infinite;
}

.presence__pulse--delay { animation-delay: 1.8s; }

@keyframes presence-pulse {
  0%   { opacity: 0.55; transform: scale(0.55); }
  70%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .presence__pulse { animation: none; opacity: 0.15; transform: scale(1); }
}

.hero__visual-label {
  position: absolute;
  bottom: -2.5rem;
  left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--slate-grey);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Problem / statement section
   -------------------------------------------------------------------------- */

.statement {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-5);
  align-items: start;
}

@media (max-width: 800px) {
  .statement { grid-template-columns: 1fr; }
}

.statement h2 { margin-top: var(--sp-2); }

.statement__body p + p { margin-top: var(--sp-3); }
.statement__body .lede { max-width: none; }

/* --------------------------------------------------------------------------
   Flow (how it works snapshot) — sequential, so numbering is justified
   -------------------------------------------------------------------------- */

.flow {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}

.flow__step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

@media (max-width: 640px) {
  .flow__step { grid-template-columns: 50px 1fr; }
}

.flow__num {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--signal-blue);
  font-variant-numeric: tabular-nums;
}

.flow__step p {
  color: var(--slate-grey);
  max-width: 56ch;
}

.flow__step strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Who it's for — editorial tag list, not a card grid
   -------------------------------------------------------------------------- */

.audience {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--sp-4);
}

.audience__tag {
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Pricing band
   -------------------------------------------------------------------------- */

.price-band {
  background: var(--primary-blue);
  color: var(--chalk-white);
  border-radius: 6px;
  padding: var(--sp-6) var(--sp-5);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-5);
}

@media (max-width: 720px) {
  .price-band { grid-template-columns: 1fr; text-align: left; }
}

.price-band h2 { color: var(--chalk-white); }

.price-band .lede { color: rgba(244, 246, 247, 0.78); max-width: 44ch; }

.price-figure {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.price-figure span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(244, 246, 247, 0.65);
  margin-top: 0.4rem;
}

/* --------------------------------------------------------------------------
   Pricing page — full card
   -------------------------------------------------------------------------- */

.pricing-card {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: var(--sp-6);
  background: #fff;
}

.pricing-card__figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.pricing-card__figure .amount {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pricing-card__figure .unit {
  font-size: var(--fs-md);
  color: var(--slate-grey);
  font-weight: 400;
}

.pricing-card__sub {
  color: var(--slate-grey);
  margin-bottom: var(--sp-4);
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: var(--sp-4);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-sm);
}

.check-list svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 18px; height: 18px;
}

/* --------------------------------------------------------------------------
   Feature table
   -------------------------------------------------------------------------- */

.feature-table {
  width: 100%;
  border-collapse: collapse;
}

.feature-table tr { border-bottom: 1px solid var(--hairline); }
.feature-table tr:first-child { border-top: 1px solid var(--hairline); }

.feature-table td {
  padding: 1.15rem 0;
  vertical-align: top;
}

.feature-table td:first-child {
  width: 220px;
  font-weight: 600;
  color: var(--ink);
  padding-right: var(--sp-4);
}

.feature-table td:last-child {
  color: var(--slate-grey);
}

@media (max-width: 640px) {
  .feature-table, .feature-table tr, .feature-table td {
    display: block;
    width: auto !important;
  }
  .feature-table tr { padding: 1rem 0; }
  .feature-table td:first-child { padding-bottom: 0.3rem; }
}

/* --------------------------------------------------------------------------
   FAQ (accordion-free, just clean Q/A pairs — matches understated tone)
   -------------------------------------------------------------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.faq-item:first-child { border-top: 1px solid var(--hairline); }

.faq-item h4 { margin-bottom: 0.5rem; }
.faq-item p { color: var(--slate-grey); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Values (about page)
   -------------------------------------------------------------------------- */

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 800px) {
  .values { grid-template-columns: 1fr; }
}

.value-item {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
}

.value-item h4 { margin-bottom: 0.6rem; }
.value-item p { color: var(--slate-grey); }

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */

.closing-band {
  text-align: center;
  padding: var(--sp-7) 0;
}

.closing-band .italic-statement {
  font-size: var(--fs-lg);
  display: block;
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Forms (contact page)
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--sp-3); }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-grey);
}

.field input, .field select {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 400;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.18s ease;
}

.field input:focus, .field select:focus {
  border-color: var(--signal-blue);
  outline: none;
}

.field input::placeholder { color: rgba(90, 103, 112, 0.55); }

.form-note {
  font-size: var(--fs-xs);
  color: var(--slate-grey);
  margin-top: var(--sp-2);
}

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--chalk-white);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}

.contact-direct a {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--primary-blue);
}
.contact-direct a:hover { color: var(--signal-blue); }

/* --------------------------------------------------------------------------
   Page hero (secondary pages — smaller than home)
   -------------------------------------------------------------------------- */

.page-hero {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-5);
}

.page-hero .lede { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll (subtle, restrained)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}