/* LWN Pro — product page (LWN Multi-Step Checkout) */

.pp { background: #FFFFFF; container-type: inline-size; font-family: var(--font-sans); color: #17181A; }
.pp__wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ---- breadcrumbs ---- */
.pp__crumbs { max-width: 1180px; margin: 0 auto; padding: 22px 40px 0; font-size: var(--text-xs); color: #737579; display: flex; align-items: center; gap: 8px; }
.pp__crumbs a { color: #6B6E72; }
.pp__crumbs a:hover { color: #1E5EB8; }

/* ---- hero ---- */
/* Centred, one column. The hero used to run copy beside a picture of the step
   indicator; the indicator is drawn below instead, so there is no second column
   to balance and the copy reads better down the middle. */
.pp__hero { max-width: 720px; margin: 0 auto; text-align: center; padding: 52px 0 64px; }
.pp__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #1E5EB8; background: #F2F8FD; border: 1px solid #D8E6EE; border-radius: 100px; padding: 6px 13px; margin: 0 0 24px; }
.pp__h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1.03; letter-spacing: -0.034em; margin: 0 0 20px; text-wrap: balance; }
.pp__lead { font-size: var(--text-lg); line-height: 1.6; color: #3C3F43; margin: 0 auto 18px; max-width: 46ch; text-wrap: pretty; }
/* The compatibility fact a buyer checks before reading anything else. Two
   pills rather than one sentence: the question is "does it work on mine",
   and two named answers are quicker to scan than a clause joining them. */
.pp__works { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; }
.pp__work {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #D8E6EE; background: #F2F8FD; border-radius: 100px;
  padding: 7px 15px 7px 12px;
  font-size: var(--text-sm); font-weight: 500; color: #3C3F43;
}
.pp__work svg { flex: none; color: var(--color-primary); }
.pp__cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---- the step indicator, drawn ----
   Circle, label, sub-label; the connector is an ::after on each step reaching
   to the next, so it stays put whatever the labels below do. */
.pp__flow { text-align: center; display: flex; max-width: 620px; margin: 0 auto 40px; padding: 0; list-style: none; }
.pp__f { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pp__f::after {
  content: ""; position: absolute; top: 21px;
  left: calc(50% + 30px); right: calc(-50% + 30px);
  height: 3px; border-radius: 3px; background: #E7ECF3;
}
.pp__f:last-child::after { display: none; }
.pp__f.is-done::after { background: var(--color-primary); }
.pp__fd {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  background: #F1F5FA; border: 2px solid transparent; color: #686E75;
}
.pp__fd svg { width: 19px; height: 19px; }
.pp__f.is-done .pp__fd { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }
.pp__f.is-current .pp__fd {
  background: #FFFFFF; border-color: var(--color-primary); color: var(--color-primary);
  box-shadow: 0 0 0 5px var(--color-accent-tint);
}
.pp__fl { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.25; color: var(--color-contrast); }
.pp__fs { font-size: var(--text-2xs); line-height: 1.35; color: #737579; margin-top: -6px; }
.pp__f:not(.is-done):not(.is-current) .pp__fl { color: #6F737A; }
.pp__f:not(.is-done):not(.is-current) .pp__fs { color: #6C6F73; }
.pp__btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); border-radius: 3px; padding: 15px 28px; text-decoration: none; }
.pp__btn--p { background: #1E5EB8; color: #FFFFFF; }
.pp__btn--p:hover { background: #17498F; color: #FFFFFF; }
.pp__btn--s { color: #17181A; border: 1px solid #D7D9DC; }
.pp__btn--s:hover { border-color: #5290E8; color: #1E5EB8; }
.pp__sold { font-size: var(--text-xs); color: #737579; margin: 18px 0 0; }


/* ---- trust strip ---- */
.pp__trust { background: #F4F5F6; border-top: 1px solid #E4E6E8; border-bottom: 1px solid #E4E6E8; padding: 18px 40px; container-type: inline-size; }
.pp__trustl { max-width: 1180px; margin: 0 auto; list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 44px; }
.pp__trusti { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); font-weight: 500; color: #53565B; white-space: nowrap; }
.pp__trusti svg { flex: none; color: #1E5EB8; }

/* ---- section furniture ---- */
.pp__sec { padding: 68px 0; }
.pp__sec--tint { background: #F2F8FD; }
.pp__sec--grey { background: #FAFAFB; }
.pp__shead { display: flex; align-items: baseline; gap: 18px; margin: 0 0 12px; }
.pp__slabel { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #1E5EB8; flex: none; }
.pp__sline { height: 1px; background: #CBDDE9; flex: 1; }
.pp__h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1.12; letter-spacing: -0.028em; margin: 0 0 14px; text-wrap: balance; }
/* Centred section head, label only. The rule either side turned the eyebrow
   into a divider; centred, the word can hold the space on its own. */
.pp__sec--center .pp__shead { justify-content: center; }
.pp__sec--center .pp__sline { display: none; }
.pp__sec--center .pp__h2 { text-align: center; max-width: 24ch; margin-left: auto; margin-right: auto; }

/* A heading that labels a table rather than opening an argument. The table is
   the thing being read; the line above it only has to say what it is. */
.pp__h2--quiet {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #6B6E72;
}

.pp__sub { font-size: var(--text-base); line-height: 1.6; color: #53565B; margin: 0 0 48px; max-width: 56ch; }
/* Sections that lost their sub-heading lose the space it was carrying with it,
   which leaves the title sitting on whatever follows. */
.pp__h2 + .pp__group,
.pp__h2 + .pp__cmpwrap,
.pp__h2 + .pp__prose { margin-top: 34px; }

/* ---- problem / fix ---- */
.pp__pf { display: grid; grid-template-columns: 1fr 96px 1fr; align-items: stretch; }
.pp__mid { position: relative; display: flex; align-items: center; justify-content: center; }
.pp__rule { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #CBDDE9; }
.pp__badge { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 1px solid #CBDDE9; color: #1E5EB8; display: flex; align-items: center; justify-content: center; flex: none; }
.pp__kick { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 22px; }
.pp__q { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xl); line-height: 1.34; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; }
.pp__fixhead { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pp__fixhead .pp__kick { margin-bottom: 0; }
.pp__badge--inline { display: none; width: 34px; height: 34px; }
.pp__run { display: flex; align-items: center; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.pp__pill { display: flex; align-items: center; gap: 7px; border: 1px solid #D8E6EE; background: #FFFFFF; border-radius: 100px; padding: 6px 13px 6px 8px; font-size: var(--text-xs); color: #1E5EB8; white-space: nowrap; }
.pp__pnum { width: 17px; height: 17px; border-radius: 50%; background: #5290E8; color: #FFFFFF; font-family: var(--font-mono); font-size: var(--text-2xs); display: flex; align-items: center; justify-content: center; flex: none; }
.pp__jam { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 30px; max-width: 320px; }
.pp__chip { border: 1px solid #D3DEE4; background: #FFFFFF; border-radius: 2px; padding: 5px 9px; font-size: var(--text-2xs); color: #727477; }


/* ---- features ---- */
.pp__group { margin-bottom: 56px; }
.pp__group:last-child { margin-bottom: 0; }
.pp__gh { display: flex; align-items: baseline; gap: 16px; margin: 0 0 28px; }
.pp__ght { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6B6E72; flex: none; }
.pp__fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.pp__feat { display: flex; gap: 15px; }
.pp__fico { flex: none; width: 34px; height: 34px; border-radius: 3px; background: #F0F7FD; color: #1E5EB8; display: flex; align-items: center; justify-content: center; }
.pp__fh { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.3; letter-spacing: -0.01em; margin: 5px 0 6px; }
.pp__fp { font-size: var(--text-sm); line-height: 1.6; color: #53565B; margin: 0; text-wrap: pretty; }

/* ---- closing cta ---- */

@container (max-width: 1000px) {
  .pp__hero { padding: 36px 0 52px; }
  .pp__h1 { font-size: var(--text-3xl); }
  .pp__sec { padding: 64px 0; }
  .pp__h2 { font-size: var(--text-2xl); }
  .pp__sub { margin-bottom: 36px; }
  .pp__pf { grid-template-columns: 1fr; row-gap: 44px; }
  .pp__mid { display: none; }
  .pp__badge--inline { display: flex; }
  .pp__jam { max-width: none; }
  .pp__fgrid { grid-template-columns: repeat(2, 1fr); gap: 30px 32px; }
}
@container (max-width: 640px) {
  .pp__wrap, .pp__crumbs { padding-left: 20px; padding-right: 20px; }
  .pp__trust { padding: 16px 20px; }
  /* Two real columns rather than a wrapped row: flex leaves the second pair
     starting wherever the first pair happened to end. */
  .pp__trustl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .pp__trusti { white-space: normal; }
  .pp__h1 { font-size: var(--text-2xl); }
  .pp__lead { font-size: var(--text-base); }
  .pp__btn { width: 100%; justify-content: center; }
  /* Four labels across a phone is the whole argument for the plugin, so the
     step keeps its label and loses the sub-label instead. */
  .pp__flow { margin-bottom: 32px; }
  .pp__fd { width: 34px; height: 34px; font-size: var(--text-xs); box-shadow: none !important; }
  .pp__fd svg { width: 15px; height: 15px; }
  .pp__f { gap: 9px; }
  .pp__f::after { top: 16px; left: calc(50% + 23px); right: calc(-50% + 23px); height: 2px; }
  .pp__fl { font-size: 11px; }
  .pp__fs { display: none; }
  .pp__sec { padding: 48px 0; }
  .pp__h2 { font-size: var(--text-xl); }
  .pp__q { font-size: var(--text-lg); }
  .pp__fgrid { grid-template-columns: 1fr; }
}

/* ---- answer prose (each section opens by answering its own heading) ---- */
.pp__prose { max-width: 68ch; }
.pp__prose p { font-size: var(--text-base); line-height: 1.72; color: #3C3F43; margin: 0 0 18px; text-wrap: pretty; }
.pp__prose p:last-child { margin-bottom: 0; }
.pp__prose strong { font-weight: 600; color: #17181A; }
.pp__prose a { color: #1E5EB8; text-decoration: underline; text-underline-offset: 2px; }
.pp__prose a:hover { color: #17498F; }
.pp__lede { font-size: var(--text-lg) !important; line-height: 1.62 !important; color: #17181A !important; font-weight: 500; }
.pp__prose ul { margin: 0 0 18px; padding-left: 20px; }
.pp__prose li { font-size: var(--text-base); line-height: 1.7; color: #3C3F43; margin-bottom: 7px; }

/* ---- callout ---- */

/* ---- spec / price panel ---- */
.pp__incl { list-style: none; margin: 0; padding: 0; }
.pp__incl li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--text-sm); line-height: 1.5; color: #53565B; margin-bottom: 9px; }
.pp__incl svg { flex: none; margin-top: 3px; color: #1E5EB8; }

/* ---- comparison table ---- */
/* contain: paint is doing real work here. The table is 760px wide inside a
   320px scroller on a phone, and overflow-x alone let it paint past the box —
   the page itself scrolled sideways by 350px, table and all. Paint
   containment clips it to its own border box, which is what the scroller
   looked like it was already doing. overflow-y is pinned because a computed
   auto on one axis turns the other one auto too, and that shows a phantom
   vertical scrollbar inside the table. */
.pp__cmpwrap {
  overflow-x: auto;
  overflow-y: hidden;
  contain: paint;
  border: 1px solid #E4E6E8;
  border-radius: 6px;
  background: #FFFFFF;
}
.pp__cmp { border-collapse: collapse; width: 100%; min-width: 760px; font-size: var(--text-sm); }
.pp__cmp caption { text-align: left; font-size: var(--text-xs); color: #737579; padding: 14px 18px; border-bottom: 1px solid #E4E6E8; }
.pp__cmp th, .pp__cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid #EFF0F1; vertical-align: top; line-height: 1.5; }
.pp__cmp thead th { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); color: #17181A; background: #FAFAFB; border-bottom: 1px solid #E4E6E8; white-space: nowrap; }
.pp__cmp tbody th { font-weight: 500; color: #53565B; white-space: nowrap; }
.pp__cmp td { color: #3C3F43; }
.pp__cmp tr:last-child th, .pp__cmp tr:last-child td { border-bottom: none; }
.pp__cmp .pp__mine { background: #F2F8FD; }

/* Ticks rather than sentences. The rows are written so that a tick is always
   the good answer and an em dash always the absence of one, which is the only
   way a column of marks can be read at a glance instead of decoded. */
.pp__cmp thead th:not(:first-child) { text-align: center; }
.pp__cmp .pp__y, .pp__cmp .pp__n { text-align: center; width: 21%; white-space: nowrap; }
/* inline-block, because the base sheet sets svg to display:block and a block
   box ignores the text-align that is centring everything else in the cell. */
.pp__cmp .pp__y svg { display: inline-block; width: 17px; height: 17px; color: var(--color-primary); vertical-align: middle; }
.pp__cmp .pp__n { color: #6C6F73; font-size: var(--text-base); }

/* The specs used to be a separate list under a separate heading. They answer
   the same question the table does — will this work here — so they are a
   second block of rows in it, under their own line, spanning both columns
   because a requirement does not differ by checkout. */
.pp__cmpsub th {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737579;
  background: #FAFAFB;
  border-top: 1px solid #E4E6E8;
  white-space: nowrap;
}
.pp__cmp .pp__both { background: #F7FAFD; }
.pp__cmp thead .pp__mine { background: #E4EFF9; color: #1E5EB8; }

/* ---- faq ---- */
.pp__faq { border-top: 1px solid #E4E6E8; max-width: 78ch; }
.pp__fitem { border-bottom: 1px solid #E4E6E8; }
.pp__fq { display: flex; align-items: flex-start; gap: 15px; padding: 21px 4px 21px 0; cursor: pointer; list-style: none; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); line-height: 1.4; letter-spacing: -0.012em; color: #17181A; }
.pp__fq::-webkit-details-marker { display: none; }
.pp__fq:hover { color: #1E5EB8; }
.pp__fsign { flex: none; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #D8E6EE; background: #F2F8FD; color: #1E5EB8; display: flex; align-items: center; justify-content: center; }
.pp__fitem[open] .pp__fsign { background: #5290E8; border-color: #5290E8; color: #FFFFFF; }
.pp__fitem[open] .pp__fsign svg path:first-child { opacity: 0; }
.pp__fitem[open] .pp__fq { color: #1E5EB8; padding-bottom: 10px; }
.pp__fa { font-size: var(--text-sm); line-height: 1.68; color: #53565B; margin: 0; padding: 0 0 24px 40px; max-width: 68ch; text-wrap: pretty; }
.pp__fa a { color: #1E5EB8; text-decoration: underline; text-underline-offset: 2px; }

/* ---- related links ---- */

@container (max-width: 1000px) {
}
@container (max-width: 640px) {
  .pp__prose p, .pp__prose li { font-size: var(--text-base); }
  .pp__lede { font-size: var(--text-base) !important; }
  .pp__fq { font-size: var(--text-sm); gap: 12px; }
  .pp__fa { padding-left: 0; font-size: var(--text-sm); }
}


/* ---- mid-page buy band ----
   The price lives near the bottom, which is a long way from the point where
   someone has just read eighteen features and is convinced. This is the same
   offer said briefly, not a second price section: the number, what the number
   buys, and the button. Centred, in one column, so the eye runs straight down
   it rather than across. */
.pp__band { background: #F2F8FD; border-top: 1px solid #D8E6EE; border-bottom: 1px solid #D8E6EE; padding: 40px; container-type: inline-size; }
.pp__bandin { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.pp__bandl, .pp__bandr { display: flex; flex-direction: column; align-items: center; gap: 10px; }


.pp__bandu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.pp__bandu li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: #3C3F43; }
.pp__bandu svg { flex: none; color: var(--color-primary); }
/* Price and guarantee on one line, the same small grey. At this point in the
   page the number is a fact noted in passing, not the pitch — the real price
   section is two below and can shout. */
.pp__bandn { margin: 0; font-size: var(--text-xs); color: #5F6266; text-align: center; }
.pp__bandn span { margin: 0 6px; color: #6C6F73; }

/* Wider and rounder than the buttons in the body copy. This one is the whole
   reason the band exists, so it is allowed to be the biggest thing in it. */
.pp__band .pp__btn {
  min-width: 260px;
  justify-content: center;
  padding: 17px 44px;
  border-radius: 10px;
  font-size: var(--text-lg);
  box-shadow: 0 12px 26px -14px rgba(30, 94, 184, 0.85);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.pp__band .pp__btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(30, 94, 184, 0.95); }

@container (max-width: 760px) {
  .pp__band { padding: 30px 20px; }
  /* The ticks stay in a row and wrap. Stacked they became a list to read
     rather than three quick reassurances beside the price. */
  .pp__bandu { gap: 8px 16px; }
  .pp__bandu li { font-size: var(--text-xs); }
  .pp__bandr { align-self: stretch; }
  .pp__band .pp__btn { width: 100%; min-width: 0; padding: 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp__band .pp__btn { transition: none; }
  .pp__band .pp__btn:hover { transform: none; }
}

/* One line under the FAQ. The documentation section that used to carry these
   links is gone, and a reader whose last question was just answered is the
   likeliest person to want the next page. */
.pp__more { margin: 28px 0 0; font-size: var(--text-sm); line-height: 1.6; color: #53565B; }
.pp__more a { color: var(--color-primary); font-weight: 500; }
.pp__more a:hover { color: #17498F; text-decoration: underline; }