/* Pricing: the buy page's single license card (Individual | Studio) on the site's pricing section.
   Card rules below are verbatim from download.css; the price, feature rows, quiet link and gold button are the
   buy page's store.css rules scoped to .pricing-card. No new components. */
.pricing-card { --ink: #f0ebdf; --gold: #c9a468; --gold-soft: #dcc29a; --muted: #a69c8a; margin: 0 auto; text-align: left; color: var(--ink); }
.pricing-card [hidden] { display: none !important; }
.pricing-card .platform-toolbar { border-bottom: 0; }
.pricing-card .buy-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 25px 0 0; }
.pricing-card .buy-price strong { font-size: clamp(64px, 6vw, 88px); font-weight: 800; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pricing-card .buy-price s { flex: 0 0 100%; color: #b3a791; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.03em; text-decoration-thickness: 2px; text-decoration-color: var(--gold-soft); }
.pricing-card .buy-price > span { color: #b3a791; font-size: 14px; white-space: nowrap; }
.pricing-card .license-features { list-style: none; padding: 0; margin: 0 0 25px; color: #e4dac8; font-size: 15px; line-height: 1.55; }
.pricing-card .license-features li + li { margin-top: 12px; }
.pricing-card .license-features li { display: flex; align-items: flex-start; gap: 10px; }
.pricing-card .buy-line-icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; color: #c9a468; }
.pricing-card .edition-download { cursor: pointer; text-decoration: none; background: #c9a468; border-color: #c9a468; color: #0d0b08; }
.pricing-card .edition-download:hover { background: #dcc29a; border-color: #dcc29a; color: #0d0b08; }
.pricing-card .edition-download:focus-visible, .pricing-card .buy-quiet:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pricing-card .buy-quiet { display: inline-block; color: #bfb29a; font: inherit; font-size: 14px; line-height: 1.6; background: transparent; border: 0; padding: 0; text-decoration: none; cursor: pointer; }
.pricing-card .buy-quiet:hover { color: var(--ink); }
.pricing-card .studio-seats { width: max-content; max-width: 100%; }
.pricing-card .studio-seats button { flex: none; white-space: nowrap; min-height: 32px; padding: 5px 13px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { .pricing-card .platform-edition:not([hidden]) { animation: download-arrive .22s both; } }
/* The pricing section styles its old cards' lists and links (#pricing ul/li/a); keep the buy page look inside the card. */
#pricing .pricing-card .license-features { margin: 0 0 25px; color: #e4dac8; font-size: 15px; line-height: 1.55; }
#pricing .pricing-card .license-features li { padding: 0; border-bottom: 0; }
#pricing .pricing-card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* Owner 2026-10-17: the fine print fills the content width (justified) and centres its last line. */
#pricing .pricing-shell .pricing-fine-print { text-align: justify; text-align-last: center; }
/* Owner 2026-10-17: a bigger price, and the launch label as a tag for the dark card (the site's dark badge and
   pulsing status dot, in the card's gold). */
#pricing .pricing-card .buy-price strong { font-size: clamp(88px, 9vw, 128px); }
#pricing .pricing-card .buy-price s { font-size: 24px; }
#pricing .pricing-card .buy-price > span { font-size: 15px; }
#pricing .pricing-card .pricing-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#pricing .pricing-card .pricing-launch-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 11px; border: 1px solid #c9a46885; border-radius: 999px; background: linear-gradient(90deg, #c9a46838, #c9a46812); box-shadow: 0 0 22px #c9a4681f; color: #e7cf9f; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .06em; white-space: nowrap; }
#pricing .pricing-card .pricing-launch-tag i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #dcc29a; box-shadow: 0 0 0 3px #c9a4682e, 0 0 10px #c9a468; }
#pricing .pricing-card .pricing-launch-ends { color: #a69c8a; font-size: 13px; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) { #pricing .pricing-card .pricing-launch-tag i { animation: depth-pulse 3s infinite; } }
@keyframes depth-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* Shared card rules (verbatim from download.css). */
.platform-editions {max-width: 920px; margin-inline: auto; border: 1px solid #4a4030; border-radius: 24px; background: #19160f; overflow: hidden; box-shadow: 0 24px 80px #0002;}
.platform-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #3b3327; background: #1e1a13;}
.platform-toolbar[hidden], .platform-edition[hidden] {display: none !important;}
.download-product {display: inline-flex; align-items: center; gap: 11px; color: #c5bba9; font-size: 14px; line-height: 1.5;}
.download-product img {display: block; width: 28px; height: 28px; object-fit: contain;}
.platform-switch {display: flex; gap: 5px; padding: 4px; border-radius: 100px; background: #100e0a; border: 1px solid #3d3528;}
.platform-switch button {display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 8px 17px; border: 0; border-radius: 100px; background: transparent; color: #b4a994; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; transition: color .18s, background .18s, transform .18s;}
.platform-switch button svg {width: 18px; height: 18px; flex: 0 0 18px;}
.platform-switch button[aria-pressed="true"] {color: #262016; background: #eee8da;}
.platform-switch button:hover {color: var(--ink); transform: translateY(-1px);}
.platform-switch button[aria-pressed="true"]:hover {color: #262016;}
.platform-switch button:active {transform: translateY(1px);}
.platform-switch button:focus-visible {outline: 2px solid var(--gold); outline-offset: 3px;}
.platform-edition {min-width: 0; padding: 34px 36px 0;}
.platform-edition + .platform-edition {border-top: 1px solid #3b3327;}
.platform-editions.is-interactive .platform-edition {border-top: 0;}
.edition-bottom {display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); gap: 28px; padding: 25px 28px; border: 1px solid #393124; border-radius: 16px; background: #110f0b; text-align: left; align-items: start;}
.mac-build-picker legend, .edition-field-label {margin: 0 0 10px; padding: 0; color: #bcb09b; font-size: 14px; line-height: 1.5; font-weight: 400;}
.download-build {min-width: 0;}
.edition-download {display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 54px; padding: 13px 16px; border: 1px solid #e8dfcd; border-radius: 10px; background: #eee8da; color: #292217; font: inherit; font-size: 17px; font-weight: 650; line-height: 1.5;}
.edition-download:disabled {cursor: not-allowed;}
.edition-download svg {width: 22px; height: 22px; flex: 0 0 22px;}
.edition-availability {margin: 10px 0 0; color: #a79b85; font-size: 14px; line-height: 1.55;}
.windows-build-info .edition-field-label {display: block;}
.windows-build-info > p {margin: 0 0 4px; color: #e4dac8; font-size: 23px; font-weight: 500; line-height: 1.4;}
.windows-build-info > span:last-child {color: #b9ad96; font-size: 15px; line-height: 1.5;}
.edition-footer {display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 0; color: #bfb29a; font-size: 14px; line-height: 1.6;}
.edition-footer a {min-width: 0; max-width: 100%; overflow-wrap: anywhere;}
.edition-footer a span {margin-left: 5px;}
.edition-footer a:hover, .edition-requirements summary:hover {color: var(--ink);}
.edition-footer a:focus-visible, .edition-requirements summary:focus-visible {outline: 2px solid var(--gold); outline-offset: 4px;}
@media (max-width: 800px) {
  .platform-toolbar {padding: 15px 20px; gap: 12px;}
  .download-product {gap: 9px;}
  .download-product img {width: 25px; height: 25px;}
  .platform-switch button {padding-inline: 13px;}
  .platform-edition {padding: 28px 24px 0;}
  .edition-bottom {grid-template-columns: minmax(0,1fr); gap: 23px; padding: 24px;}
  .edition-footer {flex-wrap: wrap; gap: 12px 24px;}
}
@media (max-width: 480px) {
  .platform-toolbar {justify-content: center;}
  .download-product {display: none;}
  .platform-switch {width: 100%;}
  .platform-switch button {flex: 1;}
  .platform-edition {padding: 26px 18px 0;}
  .edition-bottom {padding: 20px 17px;}
  .edition-download {font-size: 16px;}
  .edition-footer {font-size: 14px; padding-block: 21px;}
}
@media (prefers-reduced-motion: reduce) {
  .platform-switch button, .mac-build-options span, .requirement-toggle, .download-help-links a {transition: none;}
  .platform-switch button:hover, .platform-switch button:active {transform: none;}
}
@keyframes download-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* Owner 2026-10-18: the Studio card carries the same launch tag, 20 px under the seat switch and above the struck price.
   Individual: "one‑time" stays whole beside the price (it fits at every width). Studio: "one‑time" always sits on its
   own line directly under the big price, left-aligned with it, about 7 px under the price's lowest stroke. */
#pricing .pricing-card .studio-seats + .pricing-launch { margin-top: 20px; }
#pricing .pricing-card #pricing-studio .buy-price > span,
#pricing .pricing-card #studio .buy-price > span { flex: 0 0 100%; margin-top: -6px; line-height: 1; }
/* The buy page (/buy/) reuses this card inside its own #pricing section; its store.css lays the price out as a grid,
   so the card's flex price layout is restated here with the section id (no change on the site). */
#pricing .pricing-card .buy-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
/* Phones narrower than 381 px: the launch tag row still fits on one line. */
@media (max-width: 380px) { #pricing .pricing-card .pricing-launch { column-gap: 8px; } #pricing .pricing-card .pricing-launch-tag { letter-spacing: .04em; } #pricing .pricing-card .pricing-launch-ends { font-size: 12px; } }
