/* Fluid, edge-to-edge page surfaces. Reading measures remain bounded. */
.wrap { width: calc(100% - 2 * clamp(18px, 3.5vw, 104px)); max-width: none; }
body { min-height: 100svh; }
main { min-height: 75svh; }
.hero { padding-top: 60px; }
.hero-summary { max-width: 64ch; margin-top: 28px; font-size: clamp(16px, 1.25vw, 21px); }
.hero .hero-actions { margin-top: 30px; }
.trust-line { font-size: 12px; letter-spacing: .02em; margin-top: 24px; color: #c3c8ce; }
.catalog-hero { display: grid; grid-template-columns: 1.35fr .75fr; gap: clamp(40px, 6vw, 140px); align-items: center; min-height: calc(100svh - 140px); padding-block: 70px; }
.catalog-hero h1 { font-size: clamp(44px, 6vw, 118px); }
.start-panel { border: 1px solid var(--line); background: #101316; border-radius: 10px; padding: 30px; }
.start-panel .eyebrow { color: #ff8abb; }
.start-panel > a { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 32px 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.start-panel > a strong { font-size: clamp(22px, 2vw, 34px); font-weight: 500; letter-spacing: -.04em; }
.start-panel > a > span:not(.file-label) { font-size: 14px; line-height: 1.7; color: var(--muted); }
.start-panel > a b { position: absolute; right: 0; top: 40px; font-size: 24px; color: var(--pink); font-weight: 400; }
.start-panel > a:hover strong { color: #ff8abb; }
.start-panel > .small { margin-top: 24px; }
.file-label { font-size: 10px; letter-spacing: .14em; color: var(--accent); }
.small { font-size: 12px; line-height: 1.7; color: var(--muted); }
.product-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 4vw, 100px); min-height: calc(100svh - 250px); padding-bottom: 54px; }
.product-hero-grid h1 { font-size: clamp(40px, 4.5vw, 88px); }
.product-hero .hero-screen { margin: 0 !important; padding: 16px 16px 0; border-radius: 10px; background: #151c1d; }
.product-hero .back { margin-bottom: 20px; }
.product-hero-grid .screen img { max-height: 73svh; object-fit: contain; object-position: top; }
.product-card > p:not(.eyebrow) { min-height: 0; }
.product-card > .hero-actions { margin-top: 26px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.preview-card { padding: 36px; border: 1px solid var(--line); border-radius: 8px; background: #101416; display: flex; align-items: start; flex-direction: column; gap: 24px; }
.preview-card h3 { font-size: 32px; }
.preview-card p { flex: 1; font-size: 15px; }
.comparison { overflow-x: auto; margin: 40px 0 30px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 1.7; }
caption { text-align: left; color: var(--muted); font-size: 12px; margin-bottom: 16px; }
th, td { padding: 20px; border: 1px solid #384047; vertical-align: top; }
thead { background: #1a2025; }
th { font-weight: 600; color: #f6f4f3; }
td { color: #c3c7ce; }
tbody th { min-width: 120px; }
tbody td { min-width: 200px; }
.offer > div:last-child > .text-link { display: block; margin-top: 24px; width: fit-content; }
.availability-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px clamp(18px, 3.5vw, 104px); background: #111519f5; backdrop-filter: blur(16px); border-top: 1px solid #42464c; box-shadow: 0 -8px 32px #0004; }
.availability-bar > div { display: flex; gap: 8px; flex-direction: column; }
.availability-bar strong { font-size: 14px; }
.availability-bar span { font-size: 11px; color: #c3c7ce; }
.availability-bar .button { min-height: 42px; font-size: 12px; padding: 11px 18px; }
.availability-bar .text-link { font-size: 12px; }
.has-availability { padding-bottom: 94px; }
.tool-hero { padding-bottom: 40px; }
.tool-hero h1 { font-size: clamp(44px, 5.5vw, 104px); }
.tool-hero .notice { max-width: 95ch; margin-top: 24px; }
.tool-workspace { padding-top: 30px; }
.tool-toolbar { display: flex; gap: 24px; align-items: end; flex-wrap: wrap; padding-bottom: 28px; }
.tool-toolbar > div { display: flex; flex-direction: column; gap: 10px; }
label { display: block; color: #e2e4e7; font-size: 14px; font-weight: 500; }
select, textarea { font: inherit; color: #f6f4f3; background: #151a20; border: 1px solid #69717d; border-radius: 4px; padding: 14px; }
select { font-size: 14px; max-width: 100%; min-height: 48px; }
textarea { width: 100%; min-height: 210px; resize: vertical; line-height: 1.65; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }
textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
textarea::placeholder { color: #a5aab3; }
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.editor-grid label { margin-bottom: 12px; }
.tool-workspace > .small { margin: 20px 0 24px; }
.tool-result { padding: 32px; margin-top: 32px; border: 1px solid #57656e; border-radius: 8px; background: #11181c; }
.tool-result h3 { font-size: 26px; letter-spacing: -.03em; margin-bottom: 20px; }
.tool-result table { margin: 24px 0; }
.tool-result tbody th, .tool-result tbody td { min-width: 0; }
.tool-result table th:first-child { overflow-wrap: anywhere; max-width: 180px; font-family: ui-monospace, monospace; }
.tool-result[data-status=mismatch] { border-left: 4px solid #f5b95b; }
.tool-result[data-status=matching] { border-left: 4px solid #b9e2d0; }
.tool-result .small { margin-top: 20px; }
.notice { border-left: 3px solid #e6b571; padding-left: 18px; color: #e3c89f; font-size: 14px; line-height: 1.8; }
.explorer-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; margin-bottom: 36px; }
.finding-list { display: flex; flex-direction: column; gap: 12px; }
.finding-button { background: #151a20; border: 1px solid #555e67; color: #e2e4e7; font: inherit; font-size: 14px; text-align: left; line-height: 1.6; padding: 18px; cursor: pointer; border-radius: 5px; overflow-wrap: anywhere; min-width: 0; }
.finding-button:hover { border-color: #b9e2d0; }
.finding-button[aria-pressed=true] { border-color: #b9e2d0; background: #1d3029; }
.finding-detail { padding: 32px; background: #11181c; border: 1px solid #57656e; border-radius: 8px; position: sticky; top: 24px; min-height: 400px; }
.finding-detail h3 { font-size: 32px; margin-bottom: 24px; overflow-wrap: anywhere; }
.finding-detail h4 { font-size: 18px; font-weight: 500; line-height: 1.5; margin: 28px 0 14px; }
.finding-detail p { font-size: 14px; margin-bottom: 16px; }
.finding-detail code { display: block; padding: 16px; border: 1px solid #35424a; border-radius: 4px; color: #ead0a6; overflow-wrap: anywhere; margin: 24px 0; line-height: 1.6; }
.tool-upgrade > p:not(.eyebrow) { max-width: 78ch; margin: 28px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.section, section[id] { scroll-margin-top: 24px; }
@media (min-width: 2200px) {
  .section { padding-block: 110px; }
  .product-grid { gap: 64px; }
  .product-image { padding: 28px 28px 0; }
  .detail-pair .screen img { max-height: 80svh; object-fit: contain; object-position: top; }
  .hero-summary { font-size: 22px; }
  .workflow p:last-child, .columns p { font-size: 18px; }
  .preview-card { padding: 48px; }
  .product-card > p:not(.eyebrow) { font-size: 19px; }
  .start-panel { padding: 42px; }
}
@media (max-width: 1000px) {
  .catalog-hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .catalog-hero h1 { font-size: 52px; }
  .start-panel { padding: 22px; }
  .product-hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 40px; }
  .product-hero-grid > div { max-width: 900px; }
  .product-hero-grid h1 { font-size: clamp(42px, 7vw, 72px); }
  .product-hero .hero-screen { max-width: none; }
  .product-hero-grid .screen img { max-height: none; }
  .availability-bar { gap: 16px; }
  .availability-bar > .text-link { display: none; }
  .preview-card { padding: 26px; }
  .preview-card h3 { font-size: 27px; }
}
@media (max-width: 650px) {
  .hero { padding-top: 36px; }
  .nav nav { gap: 10px; font-size: 11px; }
  .catalog-hero { display: block; padding-block: 44px; min-height: auto; }
  .catalog-hero h1 { font-size: 44px; }
  .start-panel { margin-top: 40px; padding: 24px; }
  .start-panel > a strong { font-size: 25px; }
  .hero-summary { font-size: 16px; margin-top: 24px; }
  .hero .hero-actions { margin-top: 24px; }
  .preview-grid, .editor-grid, .explorer-grid { grid-template-columns: 1fr; gap: 24px; }
  .preview-grid { margin-top: 32px; }
  .preview-card h3 { font-size: 28px; }
  .product-hero-grid { padding-bottom: 24px; gap: 32px; }
  .product-hero-grid h1 { font-size: 42px; }
  .product-hero .hero-screen { padding: 8px 8px 0; }
  .product-hero .hero-screen figcaption { font-size: 10px; }
  .availability-bar { gap: 14px; padding-block: 12px; align-items: center; }
  .availability-bar > div { max-width: 48%; }
  .availability-bar strong { font-size: 12px; line-height: 1.4; }
  .availability-bar span { font-size: 10px; line-height: 1.5; }
  .availability-bar .button { max-width: 48%; font-size: 11px; padding: 10px 12px; }
  .has-availability { padding-bottom: 108px; }
  .tool-hero h1 { font-size: 43px; }
  .tool-result { padding: 20px; }
  .tool-result h3 { font-size: 23px; }
  .tool-result th, .tool-result td { padding: 9px; font-size: 11px; min-width: 0; }
  .tool-result table { table-layout: fixed; }
  .tool-result table th:first-child { max-width: none; width: 40%; word-break: break-word; }
  .tool-workspace .hero-actions { gap: 14px; }
  .tool-toolbar { gap: 16px; }
  .tool-toolbar > div { width: 100%; }
  .tool-toolbar select { width: 100%; }
  .finding-detail { position: static; min-height: 0; padding: 24px; }
  .finding-detail h3 { font-size: 28px; }
  .tool-hero { padding-bottom: 24px; }
  .tool-hero .back { margin-bottom: 30px; }
}