.page-home { --section-space: clamp(70px, 8.75vw, 120px); }
.home-hero, .filter-band { background: #17233B; color: #F7F5F0; --primary: #F7F5F0; --text: #F7F5F0; --muted: #C3CAD8; --surface: #1E2C47; --raised: #273953; --secondary: #93B4EE; --on-primary: #17233B; --border: #3C4D6A; --control-border: #8E9BB2; --edge: #8A96B0; --wash: #33291A; --grid: rgb(247 245 240 / 5%); }
.home-hero { padding-block: clamp(50px, 7.5vw, 105px) clamp(56px, 6vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy h1 { font-size: var(--hero-size); line-height: 1; letter-spacing: -.024em; margin-bottom: var(--space-3); }
.hero-copy .lead { color: var(--muted); margin-bottom: var(--space-4); }
.hero-copy .install-status { margin-top: var(--space-3); }
.hero-query { position: relative; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border); border-radius: 20px; background-color: var(--surface); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; background-position: -1px -1px; box-shadow: var(--shadow); transform: rotate(.8deg); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.hero-query:hover, .hero-query:focus-within { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lift); }
.hero-sentence { margin-bottom: var(--space-4); font: 600 clamp(20px, 1vw + 15px, 27px)/2 var(--heading); color: var(--primary); letter-spacing: -.005em; }
.blank { white-space: nowrap; }
@media (max-width: 480px) { .blank { white-space: normal; } }
.blank input { width: auto; min-width: 3ch; margin-inline: .08em; padding: .14em .38em .08em; border: 0; border-bottom: 3px solid var(--control-border); border-radius: 6px 6px 2px 2px; background: var(--wash); color: var(--text); font: 600 .8em/1.3 var(--mono); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.blank input:hover { border-bottom-color: var(--primary); }
.blank input:focus-visible { outline: none; border-bottom-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.hero-result .searchbox-line code { font-size: clamp(15px, .4vw + 13px, 18px); }
.hero-query figcaption { margin-top: var(--space-2); }
.hero-glyph { flex-shrink: 0; margin-top: .3em; }
.hero-glyph img { width: 20px; height: 20px; }
.hero-output-stack { display: grid; min-width: 0; flex: 1; }
.hero-output-stack > * { grid-area: 1 / 1; min-width: 0; }
.hero-ghost { visibility: hidden; display: block; font-family: var(--mono); font-size: clamp(15px, .4vw + 13px, 18px); line-height: 1.75; color: var(--text); }
.hero-query mark.is-new { animation: mark-in .45s cubic-bezier(.2,.8,.2,1) both; transform-origin: left center; }
.hero-query.is-typing [data-hero-output]::after { content: ""; display: inline-block; width: .55em; height: 1.15em; margin-left: 2px; vertical-align: -.22em; background: var(--primary); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.compare-band { border-top: 1px solid var(--border); background: #E5EAF0; color: #17233B; --primary: #17233B; --secondary: #2A4C86; --text: #17233B; --muted: #4D586E; --surface: #FFFFFF; --raised: #F1F3F6; --page: #F7F5F0; --border: #CBD2DD; --control-border: #7A8297; --edge: #17233B; --pattern-ink: rgb(23 35 59 / 16%); --edge-shade: rgb(23 35 59 / 9%); }
.compare-sheet { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--small-shadow); overflow: hidden; }
.compare-controls { display: grid; grid-template-columns: 1.4fr 1.3fr 1fr .8fr; gap: 14px; padding: 20px 24px; background: var(--raised); border-bottom: 1px solid var(--border); }
.compare-controls .field input { font-size: 15px; padding: 8px 11px; }
.compare-controls p { grid-column: 1 / -1; margin: 0; }
.compare-line { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); }
.compare-line + .compare-line { border-top: 1px dashed var(--border); }
.compare-line h3 { margin: 14px 0 0; font-size: 17px; }
.compare-plain h3 { color: var(--muted); }
.compare-plain code { display: block; padding: 13px 20px; border: 2px dashed var(--control-border); border-radius: 14px; color: var(--muted); font-size: clamp(16px, .6vw + 13px, 20px); line-height: 1.75; }
.compare-plain code { transition: border-color .2s, color .2s; }
.compare-line:hover .compare-plain code, .compare-plain:hover code { border-color: var(--primary); color: var(--text); }
.compare-built .searchbox-line code { font-size: clamp(16px, .6vw + 13px, 20px); }
.compare-query p { margin-top: 10px; font-size: 15px; color: var(--muted); }

.filter-band { border-block: 1px solid var(--border); }
.filter-rows { list-style: none; margin: 0 0 var(--space-3); padding: 0; border-top: 2px solid var(--primary); }
.filter-rows li { display: grid; grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-4); align-items: center; padding: 24px 12px; border-bottom: 1px solid var(--border); transition: background-color .2s; }
.filter-rows li:hover { background: var(--page); }
.row-lead { display: flex; align-items: center; gap: 14px; }
.row-index { min-width: 1.2ch; font: 700 38px/1 var(--heading); color: var(--primary); transition: opacity .2s; }
.row-copy h3 { font-size: 21px; margin-bottom: 6px; }
.row-copy p { font-size: 16px; color: var(--muted); }
.filter-rows li.is-off .row-copy, .filter-rows li.is-off .row-index { opacity: .45; }
.filter-rows li.is-off .operator-art > span { opacity: .4; background: none; color: var(--muted); text-decoration: line-through; transform: none; }
.operator-art { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.operator-art > span { display: block; max-width: 100%; padding: 5px 13px; font: 15px/1.6 var(--mono); color: var(--on-accent); background: linear-gradient(100deg, transparent .3em, var(--accent) .3em, var(--accent) calc(100% - .3em), transparent calc(100% - .3em)); transform: rotate(-1.5deg); transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s; overflow-wrap: anywhere; }
.filter-rows li:hover .operator-art > span { transform: rotate(0) translateX(-4px); }
.exclusion-art { flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.exclusion-art > span:first-child { background: none; color: var(--muted); text-decoration: line-through; transform: none; }
.swap-glyph { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
.filter-rows li:hover .swap-glyph { transform: translateX(3px); }
.rows-preview { margin-top: var(--space-2); padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--page); box-shadow: var(--shadow); }
.rows-preview .searchbox-line code { font-size: 15px; }
.rows-preview p { margin-top: 10px; }

.sample-layout { align-items: start; }
.live-popup { max-width: var(--popup-width); }
.live-popup:hover { transform: none; border-color: var(--control-border); box-shadow: var(--shadow-lift); }
.sample-keyword { background: var(--wash); padding: 11px 12px; border-radius: 9px; }
.sample-keyword input { font-size: 18px; font-weight: 600; }
.query-preview { margin-block: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); }
.query-preview > span { color: var(--muted); font-size: 15px; }
.query-preview code { display: block; font-size: 15px; line-height: 1.65; margin-top: 4px; }
.query-preview .query-change { color: var(--on-accent); background: var(--accent); border-radius: 3px; padding-inline: 2px; }
.sample-filter-pair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.sample-filter-pair input { font-size: 15px; padding: 8px; }
.sample-time { display: flex; gap: 6px; margin-block: 14px; }
.sample-region { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.sample-region label { margin: 0; } .sample-region select { font-size: 15px; padding: 6px; }
.sample-region .select-wrap select { padding: 6px 30px 6px 10px; }
.sample-region .select-wrap::after { right: 12px; width: 6px; height: 6px; margin-top: -5px; border-width: 0 1.5px 1.5px 0; }
.sample-sites { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px 12px; }
.sample-sites .chip { font-size: 15px; padding: 4px 10px; min-height: 28px; }
.sample-actions { display: flex; gap: 8px; margin-top: 14px; }
.sample-actions .button { padding: 8px 12px; min-height: var(--sample-button-height); font-size: 15px; }
.sample-actions .button-strong { flex: 1; }
.sample-url { background: var(--raised); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 10px; }
.sample-url > span { display: block; color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.sample-url code { font-size: 15px; }
.sample-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.sample-bottom > span { color: var(--muted); font-size: 15px; text-align: right; }
.sample-note { margin-top: var(--space-2); max-width: var(--popup-width); margin-inline: auto; }
.try-list { list-style: none; margin: var(--space-3) 0; padding: 0; border-top: 2px solid var(--primary); }
.try-list li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
.try-list b { font-family: var(--heading); font-size: 17px; color: var(--primary); }
.try-list span { color: var(--muted); }

.preset-band { background: var(--pattern-ground); }
.preset-illustration { position: relative; padding: 20px; }
.preset-illustration::before { content: ""; position: absolute; inset: 4px 14px 4px 34px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transform: rotate(-4deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.preset-illustration .popup-drawing { position: relative; transform: rotate(1.2deg); }
.preset-illustration:hover .popup-drawing { transform: rotate(0) translateY(-6px); }
.preset-illustration:hover::before { transform: rotate(-6deg) translateX(-8px); }
.hero-popup .popup-body { min-height: 400px; }

.wider-band .section-heading p + p { margin-top: 8px; }
.shortcut-band { background: var(--pattern-ground); }
.shortcut-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.shortcut-columns article { min-width: 0; }
.shortcut-columns h3 { margin-top: var(--space-3); }
.shortcut-columns p { color: var(--muted); font-size: 16px; }
.selection-art, .address-scene { min-height: 176px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--page); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.shortcut-columns article:hover .selection-art, .shortcut-columns article:hover .address-scene { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--control-border); }
.selection-art p { font-family: var(--mono); font-size: 15px; }
.context-drawing { width: 82%; margin-left: auto; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--small-shadow); padding: 8px; border-radius: 8px; font-size: 15px; transform: rotate(2deg); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.context-drawing > span { display: block; padding: 6px 8px; color: var(--muted); }
.context-drawing strong { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: var(--wash); }
.shortcut-columns article:hover .context-drawing { transform: rotate(0) translateY(-3px); }
.address-scene { display: flex; flex-direction: column; justify-content: center; }
.address-art { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 2px solid var(--edge); border-radius: 999px; background: var(--surface); font: 16px var(--mono); box-shadow: 0 3px 0 var(--edge); }
.address-key { background: var(--primary); color: var(--on-primary); padding: 5px 12px; border-radius: 999px; font-weight: 700; }
.address-enter { margin-left: auto; color: var(--muted); }
.enter-glyph { width: 20px; height: 20px; }
.address-input { flex: 1; min-width: 0; border: 0; background: none; padding: 4px 0; font: inherit; color: var(--text); }
.address-input:focus-visible { outline: none; }
.address-art:focus-within { box-shadow: 0 3px 0 var(--edge), 0 0 0 5px var(--ring); }
.address-art.is-typing .address-input { caret-color: transparent; }
.address-note { margin: var(--space-2) 0 0; }
.address-note code { display: block; font-size: 15px; margin-top: 4px; }

.privacy-band { border-top: 1px solid var(--border); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.privacy-grid > div > p { color: var(--muted); margin-block: var(--space-3); }
.privacy-path { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--small-shadow); transition: box-shadow .25s, border-color .25s; }
.privacy-path:hover { box-shadow: var(--shadow); border-color: var(--control-border); }
.local-boundary { border: 2px dashed var(--secondary); border-radius: 14px; padding: 18px 20px; background: var(--raised); }
.local-boundary > span { display: block; margin-bottom: 6px; color: var(--secondary); font-size: 15px; font-weight: 700; }
.local-boundary strong, .local-boundary small, .provider-boundary strong, .provider-boundary small { display: block; }
.local-boundary strong, .provider-boundary strong { font: 700 19px/1.3 var(--heading); color: var(--primary); }
.local-boundary small, .provider-boundary small { color: var(--muted); font-size: 15px; }
.search-path { display: grid; justify-items: center; gap: 2px; padding-block: 10px; font-size: 15px; color: var(--muted); }
.down-glyph { width: 28px; height: 28px; color: var(--secondary); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.privacy-path:hover .down-glyph { transform: translateY(5px); }
.provider-boundary { margin-bottom: var(--space-2); padding: 16px 20px; border: 2px solid var(--primary); border-radius: 14px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hero-query { transform: none; }
  .filter-rows li { grid-template-columns: 72px minmax(0, 1fr) minmax(0, .8fr); gap: 20px; }
  .privacy-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .compare-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .compare-line { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 16px; }
  .compare-line h3 { margin: 0; }
  .filter-rows li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-inline: 4px; }
  .row-index { font-size: 28px; }
  .operator-art { align-items: flex-start; } .exclusion-art { justify-content: flex-start; }
  .shortcut-columns { grid-template-columns: minmax(0, 1fr); }
  .preset-illustration { order: 2; } .section-copy { order: 1; }
  .hero-popup .popup-body { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-query, .hero-query:hover, .hero-query:focus-within, .preset-illustration .popup-drawing, .preset-illustration:hover .popup-drawing, .preset-illustration:hover::before, .shortcut-columns article:hover .selection-art, .shortcut-columns article:hover .address-scene, .shortcut-columns article:hover .context-drawing, .filter-rows li:hover .operator-art > span, .privacy-path:hover .down-glyph, .filter-rows li:hover .swap-glyph { transform: none; }
}