/* Console-style refresh for the landing and onboarding pages.
   ---------------------------------------------------------------------------
   The same design layer already applied to the dashboard (design-refresh.css),
   ported to the two public pages so someone arriving from the site into the app
   doesn't cross a visual seam. Loaded after styles.css / landing-responsive.css
   / onboarding-subscriptions.css on both pages, so it wins ties without
   !important.

   Kept deliberately: the hero photograph on both pages, the Theruka logo, and
   the navy/cream brand palette (--theruka-navy, --theruka-paper) - those are the
   brand, and this is a layout and typography pass, not a rebrand.

   What changes: one page canvas with white rounded cards on it instead of
   alternating full-bleed color bands; a shared centered container so text and
   cards stop stretching to the viewport edge; Inter at console sizes and
   weights instead of the serif display face; pill buttons; and, on onboarding,
   the pricing grid moved out of the 440px sign-in panel it was crammed into
   (see onboarding.html). */

.landing-body,
.onboarding-body {
  --surface: #ffffff;
  --pill: rgba(6, 33, 63, 0.07);
  --pill-hover: rgba(6, 33, 63, 0.12);
  --radius-surface: 20px;
  --radius-row: 12px;
  /* One shared measure for every band on the page. Sections used to run
     edge-to-edge with only side padding, so on a wide screen a paragraph could
     stretch past 1400px. */
  --page-max: 1180px;
}

/* ---------------------------------------------------------------------------
   1. Typography
   ------------------------------------------------------------------------ */

/* Inter at display sizes instead of Georgia: the app the visitor is about to
   land in is set in Inter, and the serif was the single biggest thing making
   the two feel like different products. */
.landing-hero h1,
.landing-section h2,
.onboarding-brand h1,
.onboarding-panel h2,
.onboarding-subscriptions-header h3 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.landing-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  max-width: 20ch;
}

.landing-section h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.onboarding-brand h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
}

/* Eyebrows were uppercase 800-weight labels shouting above every heading. */
.landing-body .eyebrow,
.onboarding-body .eyebrow {
  color: var(--theruka-muted);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 6px;
  opacity: 1;
  text-transform: none;
}

.landing-hero p,
.landing-section p,
.onboarding-brand p,
.onboarding-panel p {
  font-size: 1.02rem;
  line-height: 1.62;
}

.landing-body strong,
.onboarding-body strong {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   2. Buttons and nav
   ------------------------------------------------------------------------ */

.landing-signin,
.landing-primary,
.landing-secondary,
.google-fallback-button,
.onboarding-plan-button {
  border-radius: 999px;
  font-weight: 500;
  min-height: 46px;
  padding: 0 22px;
}

.landing-secondary {
  background: var(--surface);
  border-color: var(--theruka-line);
}

.landing-secondary:hover {
  background: var(--pill);
}

.landing-nav {
  background: color-mix(in srgb, var(--theruka-paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 0;
  gap: 14px;
  min-height: 68px;
  padding: 10px clamp(16px, 4vw, 40px);
}

.landing-nav nav {
  gap: 2px;
}

.landing-nav nav a {
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 9px 14px;
}

.landing-nav nav a:hover {
  background: var(--pill);
}

/* Segmented pill, the way the app's own toggles read - it used to be three
   loose links with a filled box around the active one. */
.language-switcher {
  background: var(--pill);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.language-switcher a {
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 11px;
}

/* Both properties, not just the fill: landing-responsive.css pairs its navy
   active background with white text, so overriding only the background left
   white-on-white. */
.language-switcher a[aria-current="true"],
.language-switcher a.active {
  background: var(--surface);
  color: var(--theruka-ink);
}

/* ---------------------------------------------------------------------------
   3. Landing: one canvas, cards on it
   ------------------------------------------------------------------------ */

/* The hero photo stays; it just becomes a rounded card inset from the page
   edges rather than a full-bleed band, so it sits on the same canvas as
   everything below it. */
.landing-hero {
  border-radius: var(--radius-surface);
  margin: 10px auto 0;
  max-width: var(--page-max);
  min-height: min(72vh, 620px);
  padding: clamp(32px, 5vw, 64px);
  width: calc(100% - clamp(20px, 4vw, 40px));
}

.landing-hero-content {
  max-width: 600px;
}

.landing-hero-actions {
  gap: 10px;
  margin-top: 24px;
}

/* Sits under the buttons, not inside them: what the demo costs (nothing) and
   how long it takes belongs next to the click, not in the label. */
.landing-hero-reassurance {
  color: var(--theruka-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 12px 0 0;
  max-width: 44ch;
}

/* The concept the product is named after, stated before any feature: copy on
   the left, the three ideas it produces on the right. */
.landing-memory {
  align-items: start;
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.landing-memory-copy p {
  margin: 14px 0 0;
  max-width: 56ch;
}

.landing-memory-points {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.landing-memory-points li {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-row);
  /* Two columns now: the icon holds its own lane so the title and the copy
     under it stay aligned with each other rather than stepping around it. */
  align-items: start;
  column-gap: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  row-gap: 4px;
  padding: 16px 18px;
}

/* The icon, reusing .landing-feature-icon's treatment rather than inventing a
   second one - the feature grid three sections down already puts an SVG in a
   soft tinted square, and two different ways of doing that on one page is how a
   design language stops being one.
   ------------------------------------------------------------------------
   A COLOUR PER CARD, and a note on which colours. The mockup used purple,
   green and orange. Those are two hues this site does not otherwise have, and
   the request itself argued for staying consistent with what the page already
   does - so the distinction is kept and the palette is the product's own: the
   slate it uses for information, the green it uses for settled, the amber it
   uses for something that needs looking at. Each one already means roughly that
   inside the app, which is a better reason to pick a colour than variety. */
.landing-memory-icon {
  align-items: center;
  background: rgba(6, 33, 63, 0.06);
  border-radius: 10px;
  color: #06213f;
  display: flex;
  grid-row: span 2;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.landing-memory-icon svg {
  height: 20px;
  width: 20px;
}

.landing-memory-points li:nth-child(1) .landing-memory-icon {
  background: rgba(82, 104, 127, 0.12);
  color: #3d566f;
}

.landing-memory-points li:nth-child(2) .landing-memory-icon {
  background: rgba(31, 122, 70, 0.12);
  color: #1f7a46;
}

.landing-memory-points li:nth-child(3) .landing-memory-icon {
  background: rgba(154, 107, 5, 0.12);
  color: #8a6205;
}

.landing-memory-points strong {
  font-size: 1rem;
  font-weight: 600;
}

.landing-memory-points span {
  color: var(--theruka-muted);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* The price of the status quo, stated in the reader's own week rather than in
   product terms. Same card vocabulary as the feature grid so it reads as part
   of the argument, not as a new component. */
.landing-cost {
  display: grid;
  gap: 22px;
}

.landing-cost-head {
  max-width: 34rem;
}

.landing-cost-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.landing-cost-grid article {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  display: grid;
  gap: 8px;
  padding: 24px 26px;
}

.landing-cost-grid strong {
  font-size: 1.02rem;
  font-weight: 600;
}

.landing-cost-grid p {
  color: var(--theruka-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* The turn: three cost cards, then one line saying what changes. Left rule
   rather than another card, so it reads as a conclusion drawn from them. */
.landing-cost-payoff {
  border-left: 3px solid var(--theruka-green);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
  padding-left: 18px;
}

/* Heading over the cards rather than beside them: the side-by-side split left
   the three feature cards about 250px wide, which is where their copy started
   wrapping every two or three words. */
.landing-product {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

/* rem, not ch: this wrapper is set at body size, so a ch cap here would be
   measured against 16px text and squeeze a 2.6rem heading into a column about
   200px wide. */
.landing-product > div:first-child {
  max-width: 30rem;
}

.landing-section {
  margin: 0 auto;
  max-width: var(--page-max);
  padding: clamp(36px, 5vw, 64px) var(--landing-gutter);
}

/* One gutter for the whole page. Every section is centred at the same max-width,
   so this is what decides where text starts - and a section that sets its own
   horizontal padding starts its text somewhere else, which is visible as a
   stagger down the left edge even when the section boxes themselves line up. */
:root {
  --landing-gutter: clamp(20px, 4vw, 40px);
}

/* Cards: flat, hairline, generous - and no hover-lift, which was the last
   piece of the old "everything floats" treatment. */
.landing-feature-grid {
  gap: 16px;
}

.landing-feature-grid article {
  background: var(--surface);
  border-radius: var(--radius-surface);
  box-shadow: none;
  padding: 26px;
  transition: none;
}

.landing-feature-grid article:hover {
  box-shadow: none;
  transform: none;
}

.landing-feature-grid strong {
  font-size: 1.05rem;
  font-weight: 600;
}

.landing-feature-grid p {
  font-size: 0.95rem;
  line-height: 1.55;
}

.landing-feature-icon {
  background: var(--pill);
  border-radius: 10px;
}

/* The demo and company sections were full-bleed tinted bands (mint, cream).
   One canvas, one card each. */
/* Vertical padding is the card's own; horizontal is the page gutter, less the
   border, so the text inside a card starts on the same line as the text in a
   plain section rather than 9px further in. */
.landing-demo,
.landing-company {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  padding: clamp(28px, 4vw, 48px) calc(var(--landing-gutter) - 1px);
}

.landing-demo-board {
  border-radius: var(--radius-surface);
  box-shadow: none;
}

/* A real capture instead of the illustrated board. It carries its own white
   background, so it gets a hairline frame rather than a card, and it keeps its
   aspect ratio at every width (height:auto against the width/height attributes
   on the <img>, which are there to reserve space before it loads). */
.landing-demo-shot {
  display: grid;
  gap: 12px;
  margin: 0;
}

.landing-demo-shot img {
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.landing-demo-shot figcaption {
  color: var(--theruka-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* The navy band keeps its contrast - as an inset card, not a stripe across the
   viewport. */
/* No border on this one, so the gutter is used as-is. */
.landing-resource-band {
  border-radius: var(--radius-surface);
  padding: clamp(28px, 4vw, 48px) var(--landing-gutter);
  /* .landing-section carries no vertical margin - every gap on this page comes
     from a section's own padding - so the white demo card and this navy band
     met edge to edge and the join read as an accident rather than a beat.

     Space rather than a gradient, of the two options the report offered: the
     band is a solid colour with rounded corners, and a gradient into it would
     fight both. Scaled with the viewport like the padding above it, so the
     seam does not reappear at the widths where the sections grow. */
  margin-top: clamp(16px, 3vw, 36px);
}

.landing-resource-roadmap li {
  border-radius: 999px;
}

/* Objections, answered in full sentences rather than as bullets - a one-line
   answer to "where does my data live" reads as evasion. Two columns so the
   question stays readable at the left while the answer takes the width it
   needs. */
.landing-questions {
  display: grid;
  gap: 22px;
}

.landing-questions-head {
  max-width: 34rem;
}

.landing-questions-list {
  display: grid;
  gap: 14px;
  margin: 0;
}

.landing-questions-list > div {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  padding: 24px 26px;
}

.landing-questions-list dt {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  padding-right: 24px;
}

.landing-questions-list dd {
  color: var(--theruka-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Same pills as the onboarding page's trust strip, surfaced here because this
   is where the data question actually gets asked. */
.landing-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.landing-trust-strip li {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: 999px;
  display: flex;
  font-size: 0.88rem;
  gap: 8px;
  padding: 9px 14px;
}

.landing-trust-strip svg {
  flex: none;
  height: 16px;
  width: 16px;
}

.landing-company-logo {
  border-radius: var(--radius-row);
}

.landing-footer {
  border-top: 1px solid var(--theruka-line);
  font-weight: 400;
  margin: 24px auto 0;
  max-width: var(--page-max);
  padding: 22px clamp(20px, 4vw, 40px);
  width: calc(100% - clamp(20px, 4vw, 40px));
}

/* ---------------------------------------------------------------------------
   4. Onboarding: hero, then a full-width pricing band
   ------------------------------------------------------------------------ */

/* The shell keeps its own height and the photo behind it, which is what the
   invisible nav hotspots (.onboarding-background-*) are positioned against -
   moving the pricing section out (onboarding.html) deliberately did not change
   this box, so those percentages still land where they did. */
/* Now that a real header sits above it (onboarding.html), the shell is the
   hero itself rather than the whole page: it stops claiming a full viewport
   height and just sizes to its two columns, with the photo behind them. */
.onboarding-shell {
  gap: clamp(20px, 4vw, 48px);
  margin: 10px auto 0;
  max-width: var(--page-max);
  min-height: min(64vh, 560px);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 44px);
  width: calc(100% - clamp(20px, 4vw, 40px));
}

.onboarding-shell,
.onboarding-shell::before,
.onboarding-hero-image {
  border-radius: var(--radius-surface);
}

/* The photo was washed out to ~0.9 opacity cream across its whole width, which
   left it barely visible. Keep a strong wash behind the copy column on the left
   and let the photograph come through on the right, where only the sign-in card
   sits on top of it. */
.onboarding-shell::before {
  background:
    linear-gradient(90deg, rgba(251, 247, 240, 0.95) 0%, rgba(251, 247, 240, 0.86) 38%, rgba(251, 247, 240, 0.42) 72%, rgba(251, 247, 240, 0.34) 100%);
}

/* Framed below the photo's own drawn wordmark, which would otherwise sit right
   under the real logo in the header above. */
.onboarding-hero-image {
  object-position: center 42%;
}

.onboarding-brand {
  max-width: 34ch;
}

.onboarding-panel {
  background: var(--surface);
  border-radius: var(--radius-surface);
  box-shadow: 0 24px 60px rgba(6, 33, 63, 0.14);
  gap: 12px;
  padding: 30px;
  width: min(100%, 420px);
}

.onboarding-panel h2 {
  font-size: 1.5rem;
}

.onboarding-next-step-index {
  background: var(--pill);
  color: var(--theruka-navy);
  font-weight: 600;
}

.onboarding-action-grid {
  gap: 8px;
}

/* The band the pricing section now lives in, below the hero. */
.onboarding-pricing-band {
  margin: 0 auto;
  max-width: var(--page-max);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 72px);
}

/* Both classes sit on one element now (onboarding.html), so this reset of the
   old panel-era chrome has to leave the band's own padding alone - hence the
   longhand rather than `padding: 0`. */
.onboarding-subscriptions {
  border: 0;
  margin: 0 auto;
}

.onboarding-subscriptions-header {
  margin-bottom: 20px;
  max-width: 62ch;
}

.onboarding-subscriptions-header h3 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.onboarding-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}

.onboarding-trust-strip li {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: 999px;
  font-size: 0.88rem;
  gap: 8px;
  padding: 9px 14px;
}

/* Four cards across the page instead of two squeezed into a 370px column, and
   auto-fit rather than a fixed count so they reflow instead of shrinking. */
.onboarding-plan-grid {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
}

/* display:flex so the CTA can be pushed to the bottom of every card - the
   grid's equal-height rows plus differing bullet counts is what left the
   buttons at four different heights before. */
.onboarding-plan-card {
  background: var(--surface);
  border-radius: var(--radius-surface);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
}

.onboarding-plan-card h4 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
}

.onboarding-plan-price {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
}

.onboarding-plan-card > small {
  color: var(--theruka-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* "Who this is for", above the price. Four tiers of feature bullets ask the
   reader to do the comparison themselves; one line each lets them find their
   own row first and read the rest only if it matches. */
.onboarding-plan-fit {
  color: var(--theruka-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 4px 0 2px;
}

.onboarding-plan-badge {
  align-self: start;
  background: var(--pill);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 10px;
}

/* One tier carries a recommendation so the grid reads as a suggestion with
   alternatives, not four equal options. Ring + tinted badge only - no scale or
   shadow, which would fight the flat treatment everything else just got. */
.onboarding-plan-card[data-recommended] {
  box-shadow: inset 0 0 0 2px var(--theruka-green);
}

.onboarding-plan-card[data-recommended] .onboarding-plan-badge {
  background: var(--theruka-green);
  color: #ffffff;
}

.onboarding-plan-card ul {
  display: grid;
  gap: 7px;
  margin: 14px 0 18px;
  padding-left: 18px;
}

.onboarding-plan-card li {
  font-size: 0.9rem;
  line-height: 1.45;
}

.onboarding-plan-card .onboarding-plan-button {
  margin-top: auto;
  width: 100%;
}

.onboarding-body .site-footer {
  border-top: 1px solid var(--theruka-line);
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   5. Mobile
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .landing-hero {
    border-radius: 16px;
    min-height: 0;
  }

  .landing-demo,
  .landing-company,
  .landing-resource-band {
    border-radius: 16px;
  }

  .landing-memory {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Question above answer once the two-column split would leave the question
     wrapping every second word. */
  .landing-questions-list > div {
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-questions-list dt {
    padding-right: 0;
  }

  .onboarding-panel {
    width: 100%;
  }

  .onboarding-plan-card {
    border-radius: 16px;
  }
}

/* Blockers: why work actually stops.
   ---------------------------------------------------------------------------
   Same card vocabulary as the cost and feature grids, deliberately - this is a
   third movement of one argument, not a new component. Four cards rather than
   three, so the grid wraps 2x2 on a laptop and reads as a set rather than as a
   row that ran out of room. */
.landing-blockers {
  display: grid;
  gap: 22px;
  /* An `auto` column sizes to its item's MAX-content, and the card grid inside
     reports ~575px of it - so on a phone this section laid out a 575px column
     inside a 390px viewport and took the whole page sideways with it. Naming
     the column minmax(0, 1fr) caps it at the container, which is the idiom this
     file already uses wherever a single column has to stay put. */
  grid-template-columns: minmax(0, 1fr);
}

.landing-blockers-head {
  display: grid;
  gap: 12px;
  max-width: 46rem;
}

.landing-blockers-head p {
  color: var(--theruka-muted);
  line-height: 1.6;
  margin: 0;
}

/* Four cards, so two columns rather than the three used elsewhere on the page -
   auto-fit would put three on one row and leave the fourth stranded alone. */
.landing-blockers-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  max-width: 900px;
}

.landing-blockers-grid article {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  display: grid;
  gap: 8px;
  padding: 24px 26px;
}

.landing-blockers-grid strong {
  font-size: 1.02rem;
  font-weight: 600;
}

.landing-blockers-grid p {
  color: var(--theruka-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* The arithmetic. Set apart from the three cost cards above it because it asks
   the reader to do something - add up their own numbers - rather than to read
   another claim. The list is unbulleted and generously spaced so each line
   lands as its own thought. */
.landing-cost-maths {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  display: grid;
  gap: 14px;
  padding: 28px 30px;
}

.landing-cost-maths h3 {
  font-size: 1.12rem;
  font-weight: 600;
  margin: 0;
}

.landing-cost-maths-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-cost-maths-list li {
  border-left: 2px solid var(--theruka-line);
  color: var(--theruka-muted);
  font-size: 0.96rem;
  line-height: 1.6;
  padding-left: 16px;
}

/* The close carries the prices, so it gets the ink the list does not. */
.landing-cost-maths-close {
  font-size: 1.02rem;
  line-height: 1.62;
  margin: 0;
  max-width: 64ch;
}

/* Plans, reporting and executive questions - argued as one idea in three
   steps. Numbered visually by the step label rather than by a counter: these
   are three views of one artefact, not a sequence to work through. */
.landing-alignment {
  display: grid;
  gap: 24px;
}

.landing-alignment-head {
  display: grid;
  gap: 12px;
  max-width: 48rem;
}

.landing-alignment-head p {
  color: var(--theruka-muted);
  line-height: 1.6;
  margin: 0;
}

.landing-alignment-flow {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.landing-alignment-flow article {
  background: var(--surface);
  border: 1px solid var(--theruka-line);
  border-radius: var(--radius-surface);
  display: grid;
  gap: 8px;
  padding: 24px 26px;
}

.landing-alignment-step {
  color: var(--theruka-green);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.landing-alignment-flow strong {
  font-size: 1.02rem;
  font-weight: 600;
}

.landing-alignment-flow p:last-child {
  color: var(--theruka-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Same treatment as the cost payoff: a conclusion drawn from what precedes it,
   not another card. */
.landing-alignment-close {
  border-left: 3px solid var(--theruka-green);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  max-width: 64ch;
  padding-left: 18px;
}