/* ===========================================================
   page-sota-technologies.css
   -----------------------------------------------------------
   Page wrapper: .page-sota-technologies
   Loaded by the CMS via getVersionedFile('css/page-sota-technologies.css').

   FRAME WIDTHS (per the Figma handoff, Oct 2026)
     Desktop: 1440w frame "Four Units -- Comparison" (12455:2463),
              artboard 1640, content 1200 at x=220.
     Mobile:  no mobile frame supplied for this page -- the phone
              tier derives its sizes from the donor conventions
              (page-relaxation-kit), 400px frame basis
              (content 380 + 10px gutter each side).

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-sota-technologies. Every em value below
     is calibrated against this base, so Figma px values translate
     directly: 40px Figma -> 40/18 = 2.222em.

     Why em (not rem): rem anchors to <html>, which the CMS leaves at
     the browser default (16px). The Figma was designed against an
     18px base, so all spacing/typography math is in 18ths. Using em
     anchors the math to the .page-sota-technologies font-size scope
     instead, so it stays correct without touching <html> and risking
     the CMS chrome (header/footer) on this page. Watch for em
     compounding in any element that declares its own font-size --
     children of that element will resolve em against the new size,
     not 18px.

   CLAMP FORMULA (already inlined below; documented for reference)
     slope_vw     = (desktop_px - mobile_px) / (1200 - 400) * 100
                  = (desktop_px - mobile_px) / 8
     intercept_px = mobile_px - slope_vw/100 * 400
     result       = clamp(mobile_px, slope_vw vw + intercept_px, desktop_px)

   Clamps use PX endpoints, not em (em inside clamp() depends on the
   parent's font-size and is fragile in this CMS-embedded page).
   No fallback declaration. Single clamp() per rule.

   INHERITED FROM CMS-LOADED CSS (do not re-declare unless overriding):
     - font-family: 'Roboto', sans-serif
     - color-scheme: light only
     - .page-wave / .page-wave__img / .section--wave (site-footer.css)

   ASCII rule: this file MUST stay ASCII-clean. Use HTML entities in
   markup (&mdash; &rsquo;) and -- in comments.

   SECTION INDEX (search the block prefix to jump to a section)
     hero       1. Hero (eyebrow + two-tone title + lede, gradient)
     tech       2. The five technologies (five tech-card columns)
     spine      3. The secret is consistency (tinted panel)
     day        4. How they fit into a day (rail + moment cards)
     swpg       5. Not sure how to fit them together? (guide + photo)
     page-wave  Page-bottom wave into the footer

   Built Oct 2026 against Figma 12455:2463. The tech-card and day
   blocks were seeded from page-relaxation-kit (same designer pattern)
   and then reconciled to this page's own Figma nodes.
=========================================================== */

/* -- TOKENS ---------------------------------------------- */
.page-sota-technologies {
  /* Root font-size: dominant Figma paragraph size. */
  font-size: 18px;

  /* Font family: declared here (not just inherited from CMS chrome)
     so the page renders correctly in standalone preview contexts and
     is robust if the CMS-loaded family ever fails to load. Matches
     the CMS body family -- no override, just an explicit assertion. */
  font-family: 'Roboto', sans-serif;

  /* Typography scale -- values per Figma section frames. */
  --text-heading:    clamp(30px, 2.5vw + 20px, 50px);    /* 50 / 30px -- SWPG title (13594:23862) */
  --text-heading-md: clamp(28px, 1.5vw + 22px, 40px);    /* 40 / 28px -- spine + day headings */
  --text-subheading: clamp(18px, 0.5vw + 16px, 22px);    /* 22 / 18px -- SWPG paragraph */
  --text-body:       clamp(16px, 0.25vw + 15px, 18px);   /* 18 / 16px */
  --text-hero-title: clamp(32px, 2.75vw + 21px, 54px);   /* 54 / 32px -- hero title (12455:2499) */
  --text-hero-kicker: clamp(16px, 0.75vw + 13px, 22px);  /* 22 / 16px -- hero "How it works" line */
  --text-hero-lede:  clamp(17px, 0.375vw + 15.5px, 20px);/* 20 / 17px -- hero lede (12455:2500) */
  --text-small:      0.778em; /* 14px fixed */

  /* Spacing -- per Figma: section_y 80 (hero, tech, swpg; day is
     78/84 in the frame, normalised to the shared 80), gutter 30/10. */
  --space-section-y: clamp(40px, 5vw + 20px, 80px);   /* 80 / 40px */
  --space-container: clamp(10px, 2.5vw, 30px);        /* 30 / 10px gutter */
  --space-gap-md:    clamp(10px, 1.25vw + 5px, 20px); /* 20 / 10px */
  --space-gap-lg:    clamp(20px, 2.5vw + 10px, 40px); /* 40 / 20px */
  --space-panel:     clamp(24px, 3.25vw + 11px, 50px);/* 50 / 24px -- spine panel padding */

  /* Radius -- PX not em: feeds corner-matching arcs (inner arc =
     outer - border) that em would mismatch per element. */
  --radius-pill:   999px;  /* pill buttons + session pills (Figma --sota-radius-pill) */
  --radius-panel:  20px;   /* tech cards (Figma --sota-radius-md) */
  --radius-moment: 22px;   /* day moment cards (Figma rounded-[22px]) */
  --radius-spine:  32px;   /* spine panel (Figma --sota-radius-lg) */

  /* ============================================================
     BRAND ACCENT CONFIG  --  the only colour lines a new page edits.
     THIS PAGE (SOTA Technologies) -> site blue: the page covers all
     five technologies, so it has no product colour of its own; the
     Figma uses the Water O3zonator / site-primary blue throughout.
     ============================================================ */
  --color-accent:      var(--color-water-ozonator);      /* working accent -- text, links, buttons */
  --color-accent-dark: var(--color-water-ozonator-dark); /* darker shade -- focus ring */
  --color-accent-tint: var(--color-water-ozonator-tint); /* pale fill */
  /* Derived alpha tints of the accent (color-mix locks them to
     --color-accent so re-theming stays a token swap). */
  --color-accent-a60: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --color-accent-a40: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --color-accent-a30: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --color-accent-a20: color-mix(in srgb, var(--color-accent) 20%, transparent); /* spine panel fill (Figma rgba(71,146,188,0.2)) */
  --color-accent-a12: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-a10: color-mix(in srgb, var(--color-accent) 10%, transparent);

  /* Full product palette -- the tech cards and the day rail reference
     a SPECIFIC product regardless of this page's accent. */
  --color-silver-pulser:   #92ca6a;  /* green */
  --color-magnetic-pulser: #59afb2;  /* teal */
  --color-water-ozonator:  #4792bc;  /* blue -- also the site primary */
  --color-bio-tuner:       #a194c7;  /* purple */

  /* Product pastel backgrounds (lighter tints for themed sections) */
  --color-silver-pulser-tint:   #d9e8d8;
  --color-magnetic-pulser-tint: #cae4e6;
  --color-water-ozonator-tint:  #bbddf0;
  --color-bio-tuner-tint:       #d5d1e6;

  /* Accent text variants (darker shades of brand colours) */
  --color-water-ozonator-dark:  #3f799a; /* darker blue -- accent-dark on this page */
  --color-bio-tuner-dark:       #8b7bb8; /* deeper purple -- the Bio Tuner card's colour bar (Figma --sota-violet, 12464:6037) */

  /* Neutrals */
  --color-dark:            #3b3b3b; /* body text -- confirmed from every section pull */
  --color-white:           #ffffff;
  --color-cream-bg:        #f8f4f2; /* day moment cards + SWPG section */
  --color-card-stroke:     #e2dbd7; /* tech-card / outline button / session-pill hairline (Figma) */
  --color-axis:            #7b8f9c; /* day-rail MORNING / EVENING axis labels */

  /* Button hover dark -- lighter than --color-dark (#3b3b3b). Flat
     background swap on hover, per the shared "Link" pill component. */
  --color-btn-hover: #555555;

  /* Hero gradient stops (Figma 12455:2495 "Gradient", 178deg). */
  --color-hero-grad-1: #f9fbf6; /* grey/97 */
  --color-hero-grad-2: #f5faf0; /* grey/96 */
  --color-hero-grad-3: #e6f4f8; /* grey/94 */

  /* Wrapper layout */
  color: var(--color-dark);
  width: 100%;
}

/* -- RESET (scoped to this page) ------------------------- */
.page-sota-technologies *,
.page-sota-technologies *::before,
.page-sota-technologies *::after {
  box-sizing: border-box;
  margin: 0;
}
.page-sota-technologies a      { text-decoration: none; color: inherit; }
.page-sota-technologies ul     { list-style: none; padding: 0; }
.page-sota-technologies img    { display: block; max-width: 100%; height: auto; }
.page-sota-technologies button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
/* Section wrappers use <header>; the CMS site-wide stylesheet sets a
   font-size on the masthead <header>, which matches our section headers by
   tag and inflates every em inside them. Re-anchor to the page base. */
.page-sota-technologies header { font: inherit; }

/* Shared section-title base (site standard): every top-level section
   <h2> carries .sec-title plus its block class. Each block rule keeps
   only its own line-height and local overrides, which win on source
   order. */
.page-sota-technologies .sec-title {
  font-size: var(--text-heading); /* 50 / 30px */
  font-weight: 900;
}

/* Keyboard focus (site standard): a visible ring on interactive
   elements, only for keyboard/AT focus (:focus-visible). */
.page-sota-technologies a:focus-visible,
.page-sota-technologies button:focus-visible,
.page-sota-technologies input:focus-visible,
.page-sota-technologies [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* -- LAYOUT UTILITIES ------------------------------------ */
/* Sections span 100% viewport width (background extends edge-to-edge).
   Content is centred and constrained inside .container, which also
   holds the horizontal gutter padding. */
.page-sota-technologies .section {
  padding: var(--space-section-y) 0;
  width: 100%;
}
.page-sota-technologies .container {
  box-sizing: border-box;
  width: 100%;
  /* Gutters sit OUTSIDE the content column: a true 1200px column at
     desktop, padding only bites once the viewport is narrower than
     1200 + gutters. */
  max-width: calc(1200px + 2 * var(--space-container));
  margin-inline: auto;
  padding-inline: var(--space-container);
}

/* Section background variants (role-named) */
.page-sota-technologies .section--white { background: var(--color-white); }
.page-sota-technologies .section--cream { background: var(--color-cream-bg); }

/* -- COLOUR UTILITIES ------------------------------------
   Two-tone headings use the role pair .text-ink (site blue, fixed on
   every page) + .text-accent (this page's accent). .text-dark for the
   dark tone where a heading genuinely needs it. */
.page-sota-technologies .text-accent { color: var(--color-accent); }
.page-sota-technologies .text-ink    { color: var(--color-water-ozonator); }
.page-sota-technologies .text-dark   { color: var(--color-dark); }

/* Brand subscript -- the "3" in "Water O3zonator" is a brand
   identifier rendered as a subscript. Authored as semantic
   <sub class="brand-sub">3</sub> (ASCII-clean). Tuned here rather
   than relying on the browser <sub> default, which over-shrinks and
   over-drops the character. */
.page-sota-technologies .brand-sub {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: -0.15em;
}

/* -- BUTTONS --------------------------------------------- */
.page-sota-technologies .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
/* Filled blue pill. Flat background swap to the hover dark on hover
   (no transform, no shadow -- the verified shared "Link" pill). */
.page-sota-technologies .btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.page-sota-technologies .btn--primary:hover {
  background: var(--color-btn-hover);
}
/* White pill with the card hairline (Figma "Button primary" in the
   tech cards -- the layer name is inverted; it is the quiet, outlined
   "Shop" action). Hover darkens the hairline only: the Figma shows no
   hover state for this variant, so the change is kept minimal. */
.page-sota-technologies .btn--outline {
  background: var(--color-white);
  border: 1.5px solid var(--color-card-stroke);
  color: var(--color-dark);
}
.page-sota-technologies .btn--outline:hover {
  border-color: var(--color-btn-hover);
}

/* ===========================================================
   PAGE-SPECIFIC SECTIONS
   -----------------------------------------------------------
   Order follows the page so a top-down read of this file mirrors a
   top-down read of the page.
=========================================================== */

/* -----------------------------------------------------------
   SECTION 1: HERO  (Figma 12455:2494)
   Full-bleed three-stop gradient (12455:2495), 80px vertical padding,
   1200 column. Kicker "HOW IT WORKS" (22px bold, 6.6px tracking),
   two-line 54px title with the last word of each line in blue black
   weight, 20px/30.6 lede. No image.
----------------------------------------------------------- */
.page-sota-technologies .section-hero {
  background: linear-gradient(178deg,
    var(--color-hero-grad-1) 0%,
    var(--color-hero-grad-2) 40%,
    var(--color-hero-grad-3) 100%);
}
.page-sota-technologies .hero__container {
  display: flex;
  flex-direction: column;
  gap: 1.222em; /* 22px (Figma container gap) */
}
.page-sota-technologies .hero__kicker {
  font-size: var(--text-hero-kicker); /* 22 / 16px */
  font-weight: 700;
  line-height: 1.364; /* 30px at 22 */
  letter-spacing: 0.3em; /* 6.6px at 22 */
  text-transform: uppercase;
  color: var(--color-dark);
}
.page-sota-technologies .hero__title {
  font-size: var(--text-hero-title); /* 54 / 32px */
  font-weight: 400;
  line-height: 1.08; /* 58.32px at 54 */
  color: var(--color-dark);
}
.page-sota-technologies .hero__title-line {
  display: block;
}
.page-sota-technologies .hero__title strong {
  font-weight: 900;
  color: var(--color-water-ozonator);
}
.page-sota-technologies .hero__lede {
  font-size: var(--text-hero-lede); /* 20 / 17px */
  font-weight: 400;
  line-height: 1.53; /* 30.6px at 20 */
  color: var(--color-dark);
}

/* -----------------------------------------------------------
   SECTION 2: THE FIVE TECHNOLOGIES  (Figma 12466:948, grid 12466:954)
   White section, 80px vertical padding. Five equal cards (14px gap):
   172px photo, 4px product colour bar, body (20px top / 10px sides /
   10px bottom) with eyebrow in the product colour, technology name,
   description, then two full-width pills pinned to the bottom --
   filled "How it works" and outlined "Shop" (5px apart).
----------------------------------------------------------- */
.page-sota-technologies .tech__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.778em; /* 14px */
  align-items: stretch;
}
.page-sota-technologies .tech-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-card-stroke);
  border-radius: var(--radius-panel); /* 20px */
  overflow: hidden;
  --tech-color: var(--color-accent);     /* eyebrow text */
  --tech-bar:   var(--tech-color);       /* colour bar (defaults to the text colour) */
}
.page-sota-technologies .tech-card--sp  { --tech-color: var(--color-silver-pulser); }
.page-sota-technologies .tech-card--mp  { --tech-color: var(--color-magnetic-pulser); }
.page-sota-technologies .tech-card--woz { --tech-color: var(--color-water-ozonator); }
/* Bio Tuner: the Figma paints the bar in the deeper violet (12464:6037,
   --sota-violet #8b7bb8) but the eyebrow in the product purple
   (12464:6039, #a194c7) -- hence the separate bar token. */
.page-sota-technologies .tech-card--bt  { --tech-color: var(--color-bio-tuner); --tech-bar: var(--color-bio-tuner-dark); }
.page-sota-technologies .tech-card__media {
  height: 9.556em; /* 172px */
}
.page-sota-technologies .tech-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Round the img itself (inner arc: outer 20 - 1px border) -- iOS Safari
     does not clip an img to an ancestor's overflow radius. */
  border-radius: 19px 19px 0 0;
}
.page-sota-technologies .tech-card__bar {
  height: 4px;
  background: var(--tech-bar);
}
.page-sota-technologies .tech-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.111em; /* 20px minimum text -> buttons; the grid stretch
                   plus space-between pins every card's buttons to a
                   common baseline (Figma: text block 180-210px tall,
                   buttons start at 250 in all five). */
  padding: 1.111em 0.556em 0.556em; /* 20px 10px 10px */
}
.page-sota-technologies .tech-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-sota-technologies .tech-card__eyebrow {
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  line-height: 1.333; /* 20px */
  letter-spacing: 0.1em; /* 1.5px */
  text-transform: uppercase;
  color: var(--tech-color);
}
.page-sota-technologies .tech-card__name {
  font-size: 1em; /* 18px */
  font-weight: 700;
  line-height: 1.111; /* 20px */
  color: var(--color-dark);
}
.page-sota-technologies .tech-card__desc {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
.page-sota-technologies .tech-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.278em; /* 5px */
}
.page-sota-technologies .tech-card__cta {
  width: 100%;
  /* Fixed 41px box (Figma: 12px padding + 17px line) rather than
     padding-derived: the outlined pill's 1.5px border rounds to 1px or
     2px per side depending on DPR, which would leave the two pills
     1-2px different in height. Equal height by construction. */
  height: 2.733em; /* 41px at 15px */
  padding: 0 1.2em; /* 18px sides at 15px */
  font-size: 0.833em; /* 15px */
  line-height: 1.133; /* 17px */
}
@media (max-width: 1024px) {
  /* 5 -> 1 straight to the phone count (no intermediate step). */
  .page-sota-technologies .tech__grid {
    grid-template-columns: 1fr;
    gap: 1.111em; /* 20px */
  }
  .page-sota-technologies .tech-card__media {
    height: auto;
    aspect-ratio: 1920 / 1442; /* the photos' natural ratio */
  }
  /* Stacked cards: the two pills sit side by side, hugging their labels. */
  .page-sota-technologies .tech-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.556em; /* 10px */
  }
  .page-sota-technologies .tech-card__cta {
    width: auto;
  }
}

/* -----------------------------------------------------------
   SECTION 3: THE SECRET IS CONSISTENCY  (Figma 12467:947, panel 12467:948)
   No section padding of its own (the sections above and below supply
   the 80px air). One 1200px panel: 20% accent tint, 32px corners,
   50px padding, 10px gaps. Eyebrow 18px bold 1.8px tracking in blue,
   40px black heading, 18px/30 copy with 20px between paragraphs.
----------------------------------------------------------- */
.page-sota-technologies .section-spine {
  padding: 0;
}
.page-sota-technologies .spine__panel {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  padding: var(--space-panel); /* 50 / 24px */
  background: var(--color-accent-a20);
  border-radius: var(--radius-spine); /* 32px */
}
.page-sota-technologies .spine__eyebrow {
  font-size: 1em; /* 18px */
  font-weight: 700;
  line-height: 1.389; /* 25px */
  letter-spacing: 0.1em; /* 1.8px */
  text-transform: uppercase;
  color: var(--color-accent);
}
.page-sota-technologies .spine__title {
  font-size: var(--text-heading-md); /* 40 / 28px */
  font-weight: 900;
  line-height: 1.25; /* 50px at 40 */
  color: var(--color-dark);
}
.page-sota-technologies .spine__copy {
  display: flex;
  flex-direction: column;
  gap: 1.111em; /* 20px between paragraphs */
}
.page-sota-technologies .spine__copy p {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}

/* -----------------------------------------------------------
   SECTION 4: HOW THEY FIT INTO A DAY  (Figma 12455:3791)
   White section. Left-aligned 40px bold heading + 18px/30 intro,
   50px to the rail. Four-colour gradient rail line, MORNING / EVENING
   axis labels (16px gaps), five cream moment cards (20px gap): eyebrow
   time, technology, copy, bordered session pill pinned to the bottom.
   Static, no JS.
----------------------------------------------------------- */
.page-sota-technologies .day__container {
  display: flex;
  flex-direction: column;
  gap: 2.778em; /* 50px */
}
.page-sota-technologies .day__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-sota-technologies .day__title {
  font-size: var(--text-heading-md); /* 40 / 28px -- this Figma sets the
                                        day heading smaller and bolder-not-
                                        black than the 50px section base */
  font-weight: 700;
  line-height: 1.25; /* 50px at 40 */
  color: var(--color-dark);
}
.page-sota-technologies .day__subhead {
  font-size: 1em; /* 18px */
  font-weight: 400;
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
.page-sota-technologies .day__rail {
  display: flex;
  flex-direction: column;
  gap: 0.889em; /* 16px */
}
.page-sota-technologies .day__line {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--color-water-ozonator) 0%,
    var(--color-silver-pulser) 34%,
    var(--color-magnetic-pulser) 67%,
    var(--color-bio-tuner) 100%);
}
.page-sota-technologies .day__axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.639em; /* 11.5px */
  font-weight: 700;
  line-height: 1.304; /* 15px */
  letter-spacing: 0.13em; /* 1.5px */
  text-transform: uppercase;
  color: var(--color-axis);
}
.page-sota-technologies .day__moments {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.111em; /* 20px */
  align-items: stretch;
}
.page-sota-technologies .day-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.556em; /* 10px */
  padding: 1.111em; /* 20px */
  background: var(--color-cream-bg);
  border-radius: var(--radius-moment); /* 22px */
}
.page-sota-technologies .day-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-sota-technologies .day-card__when {
  font-size: 0.833em; /* 15px */
  font-weight: 700;
  line-height: 1.333; /* 20px */
  letter-spacing: 0.1em; /* 1.5px */
  text-transform: uppercase;
  color: var(--color-accent);
}
.page-sota-technologies .day-card__name {
  font-size: 1em; /* 18px */
  font-weight: 700;
  line-height: 1.111; /* 20px */
  color: var(--color-dark);
}
.page-sota-technologies .day-card__copy {
  font-size: 1em; /* 18px */
  line-height: 1.667; /* 30px */
  color: var(--color-dark);
}
.page-sota-technologies .day-card__pill {
  align-self: flex-start;
  padding: 0.5em 1em; /* 6px 12px at 12px */
  font-size: 0.667em; /* 12px */
  font-weight: 700;
  line-height: 1.333; /* 16px */
  color: var(--color-dark);
  background: var(--color-white);
  border: 1px solid var(--color-card-stroke);
  border-radius: var(--radius-pill);
}
@media (max-width: 1024px) {
  /* 5 -> 1 straight to the phone count. The rail line + axis stay as a
     "morning to evening" legend above the stacked cards. */
  .page-sota-technologies .day__moments {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------
   SECTION 5: NOT SURE HOW TO FIT THEM TOGETHER?  (Figma 13594:23857)
   Cream section, 80px vertical padding. Two columns, vertically
   centred, 30px apart: text (fluid) + 489x630 photo. Text column:
   50px black two-tone title, 22px/35 paragraph with a bold lead-in,
   30px to the uppercase pill CTA. The page-bottom wave closes the
   section (so no bottom padding -- site-footer.css .section--wave).
----------------------------------------------------------- */
.page-sota-technologies .swpg__body {
  display: flex;
  align-items: center;
  gap: 1.667em; /* 30px */
}
.page-sota-technologies .swpg__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.667em; /* 30px text block -> CTA */
}
.page-sota-technologies .swpg__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-sota-technologies .swpg__title {
  line-height: 1.2; /* 60px at 50 */
  color: var(--color-dark);
}
.page-sota-technologies .swpg__copy {
  font-size: var(--text-subheading); /* 22 / 18px */
  font-weight: 400;
  line-height: 1.591; /* 35px at 22 */
  color: var(--color-dark);
}
.page-sota-technologies .swpg__copy strong {
  font-weight: 700;
}
/* Uppercase pill CTA (shared "Link" component, 13594:23870): 15px
   black, 1.5px tracking, 27px line, 5px 20px padding. Optical centring
   of cap-only text: 60/40 split of the 10px vertical padding. */
.page-sota-technologies .swpg__cta {
  font-size: 0.833em; /* 15px */
  font-weight: 900;
  line-height: 1.8; /* 27px */
  letter-spacing: 0.1em; /* 1.5px */
  text-transform: uppercase;
  padding: 0.4em 1.333em 0.267em; /* 6px 20px 4px at 15px */
}
.page-sota-technologies .swpg__media {
  flex: 0 0 489px; /* Figma 13594:23867 */
  width: 489px;
}
.page-sota-technologies .swpg__media img {
  width: 100%;
  height: auto; /* the width/height attributes reserve the box at the
                   photo's natural ratio -- not cropped to the Figma
                   489:630 placeholder (the shot is 645:804) */
  /* Round the img itself: iOS Safari will not clip a photo to a
     wrapper's overflow radius. */
  border-radius: var(--radius-panel); /* 20px */
}
@media (max-width: 1024px) {
  /* Stack: text first, photo below, photo capped at its Figma width
     and centred. */
  .page-sota-technologies .swpg__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-gap-lg); /* 40 / 20px */
  }
  .page-sota-technologies .swpg__media {
    flex: none;
    width: 100%;
    max-width: 489px;
    margin-inline: auto;
  }
}

/* ===========================================================
   MEDIA QUERIES  --  STRUCTURAL ONLY
   -----------------------------------------------------------
   Most responsiveness lives in clamp() above. Column-count changes
   live at 1024 inside each section block. 767 = phone-only spacing.
=========================================================== */
@media (max-width: 767px) {
  .page-sota-technologies .btn {
    white-space: normal;
    text-align: center;
  }
  /* Hero kicker tracking eases on the narrow column so "HOW IT WORKS"
     stays on one line at 320. */
  .page-sota-technologies .hero__kicker {
    letter-spacing: 0.2em;
  }
  /* Spine panel corners ease with the smaller padding. */
  .page-sota-technologies .spine__panel {
    border-radius: 24px;
  }
}

/* ===========================================================
   PAGE-BOTTOM WAVE.
   The wrapper (.page-wave), the image rule (.page-wave__img) and the
   .section--wave padding kill are owned by the shared css/site-footer.css.
   This page only adds a little air above the wave, page-specific.
=========================================================== */
.page-sota-technologies .page-wave { margin-top: var(--space-section-y); }