/* LWN Pro — checkout hero pattern
   Append to the theme's style.css (or assets/css/patterns.css if the theme splits CSS).
   Tokens referenced here must exist in theme.json: magenta-600, magenta-700, ink,
   ink-800, ink-500, line-300, white. See handoff/header-footer.md for the palette. */

.lwn-hero { overflow: hidden; padding: var(--space-70) 0; }

.lwn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 28px;
  padding: 6px 12px;
  border: 1px solid #BFD5F0;
  border-radius: 999px;
  background: #F2F7FD;
  color: #1E5EB8;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.lwn-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.lwn-hero__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  /* One step below --text-3xl on purpose. The full step is sized for a heading
     that spans the page; this one sits in a 44% column, narrow enough that the
     larger size breaks the headline into four lines of about ten characters.
     Topping out at 40px holds it to three. */
  font-size: clamp(1.875rem, 1.25rem + 1.9vw, 2.5rem);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #6B6E72;
}
.lwn-hero__title mark {
  /* Reset the browser's native <mark> yellow highlight — this is meant to
     be plain colored emphasis text, not a highlighter effect. */
  background: none;
  /* The site's accent. It used to be accent-400 (#5290E8), which base.css
     reserves for dark backgrounds and large shapes: on white it is 3.3:1,
     legal for a headline this size and visibly paler than every other blue
     on the page. The first words a reader sees should be the brand colour,
     not a tint of it. */
  color: var(--color-primary);
}

.lwn-hero__lede {
  margin: 0 0 36px;
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: #3C3F43;
}

.lwn-hero__actions { align-items: center; }

.lwn-hero__note {
  margin: 18px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: #6B6E72;
  /* Left on desktop, where it lines up with the eyebrow, headline and lede
     down the left edge of the column — centered there breaks that edge and
     reads as a stray line. It centres on the stacked layout instead, see the
     781px block below. */
  text-align: start;
}

/* The hero artwork is a browser window built in markup rather than baked into
   the image: an address bar, the stepper, and a row of capability stats. Built
   this way the stats stay selectable and searchable, they can be reworded
   without re-exporting artwork, and they reflow on a narrow screen instead of
   shrinking into illegibility.

   The image inside is cropped to the stepper alone. The uncropped artwork
   carries its own card and drop shadow, which would sit inside this frame as a
   second card. */
.lwn-hero__shot {
  margin: 0;
  background: var(--color-base);
  border: 1px solid var(--color-line-200);
  border-radius: 10px;
  box-shadow: 0 18px 40px -24px rgba(23, 24, 26, 0.28),
              0 2px 6px rgba(23, 24, 26, 0.04);
  overflow: hidden;
}

.lwn-frame__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line-200);
}
.lwn-frame__dots { display: flex; gap: 6px; flex: none; }
.lwn-frame__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #D8DBDF;
}
.lwn-frame__url {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-400);
  letter-spacing: 0.01em;
}

.lwn-frame__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* A quiet caption strip, not a stat block. These are reassurances a merchant
   scans on the way to the button, so they are set small and at normal weight —
   bold here competes with the headline and makes the frame look like a
   dashboard. */
.lwn-frame__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 14px 22px 15px;
  list-style: none;
  border-top: 1px solid var(--color-line-200);
}
.lwn-frame__points li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-normal);
  line-height: 1.4;
  color: var(--color-ink-500);
}
.lwn-frame__points li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-tint-border);
}

/* The arrow trails the label rather than sitting in the text flow, so a
   wrapped label does not strand it at the start of a line. It slides on hover
   to signal that the link leaves the site. */
.lwn-arrow {
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.16s ease;
}
.wp-block-button__link:hover .lwn-arrow,
.wp-block-button__link:focus .lwn-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link, .lwn-arrow { transition: none; }
  .wp-block-button__link:hover { transform: none; }
}

/* Button styles — register these as block styles, or keep as classes */
/* The primary button is the one thing on the page that has to be found, so it
   carries the deeper accent rather than the light one, a shadow tinted with
   the brand blue rather than gray, and it lifts on hover. */
.wp-block-button.is-style-lwn-primary .wp-block-button__link {
  background: var(--color-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-primary);
  border-radius: 7px;
  padding: 16px 30px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.3;
  box-shadow: 0 8px 18px -8px rgba(30, 94, 184, 0.55);
  transition: background 0.16s ease, border-color 0.16s ease,
              box-shadow 0.16s ease, transform 0.16s ease;
}
.wp-block-button.is-style-lwn-primary .wp-block-button__link:hover,
.wp-block-button.is-style-lwn-primary .wp-block-button__link:focus {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #FFFFFF;
  box-shadow: 0 12px 22px -8px rgba(30, 94, 184, 0.6);
  transform: translateY(-1px);
}
.wp-block-button.is-style-lwn-primary .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 5px 12px -8px rgba(30, 94, 184, 0.55);
}
.wp-block-button.is-style-lwn-secondary .wp-block-button__link {
  background: #FFFFFF;
  color: var(--color-contrast);
  border: 1px solid var(--color-line-300);
  border-radius: 7px;
  padding: 15px 30px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.3;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.wp-block-button.is-style-lwn-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-lwn-secondary .wp-block-button__link:focus {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-tint-border);
  color: var(--color-primary);
}
.wp-block-button .wp-block-button__link:focus-visible {
  outline: 2px solid #154C90;
  outline-offset: 2px;
}

/* Tablet — image drops under the copy. WP stacks columns at 781px by default;
   this keeps the rhythm sane on the way down. */
@media (max-width: 1100px) {
  .lwn-hero__lede { max-width: 52ch; }
}

@media (max-width: 781px) {
  .lwn-hero { padding-left: 24px; padding-right: 24px; }
  /* WordPress core's wp-block-columns CSS auto-stacks columns below 781px;
     that CSS isn't loaded on this static site, so it's replicated here. */
  .lwn-hero__cols { flex-wrap: wrap; gap: 40px; }
  .lwn-hero__cols > * { flex-basis: 100% !important; }
  /* The 40px side padding is inline on the element, so it survives into the
     phone layout and stacks with the 24px added above — 128px of gutter on a
     375px screen, leaving the headline about 240px to live in. The section
     already supplies the gutter here, so this one goes. !important is the only
     thing that beats an inline style. */
  .lwn-hero__cols { padding-left: 0 !important; padding-right: 0 !important; }
  .lwn-hero__lede { max-width: none; margin-bottom: 28px; }
  .lwn-hero__actions { gap: 10px; }
  /* The old rule dropped the artwork here, on the grounds that a screenshot
     adds little on a phone. The frame is not just a screenshot any more — it
     carries the block and HPOS compatibility stats, which are among the first
     things a merchant checks. It stays, and it is short enough not to push the
     buttons off the screen. */
  .lwn-hero__shot { margin-top: 4px; }
  /* Stacked, the column is the full width of the screen and the note sits
     under a centered-feeling button row, so the left edge it was aligning to is
     no longer there to align with. */
  .lwn-hero__note { text-align: center; }
}

/* Phone — both labels are long enough to wrap here, and side-by-side buttons
   of unequal width read as broken. Full width gives them a common edge and
   keeps the wrapped label centered inside its own box. */
@media (max-width: 560px) {
  .lwn-hero__actions .wp-block-button { width: 100%; }
  .lwn-hero__actions .wp-block-button__link { display: block; padding-left: 20px; padding-right: 20px; }
}

/* Phone — the frame keeps all three stats, but the chrome and padding tighten
   so they stay on one row rather than wrapping into a ragged block. */
@media (max-width: 480px) {
  .lwn-frame__bar { padding: 9px 12px; gap: 10px; }
  .lwn-frame__stats { padding: 14px 14px 16px; gap: 3px 10px; }
  .lwn-frame__stats dt { font-size: var(--text-base); }
}