/* /websites page. Shared components come from site.css. */

.ws-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:6%; align-items:center; padding-top:calc(var(--nav-h) + 48px); }
.ws-hero h1 { font-size:clamp(40px,5.2vw,68px); line-height:1.04; letter-spacing:-.03em; margin-bottom:22px; }
.ws-hero h1 em { font-style:italic; color:var(--green); }
.ws-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.ws-hero-check { margin-top:16px; font-size:15px; color:var(--cream-2); }
.ws-hero-check a { color:var(--text); text-underline-offset:3px; }
.ws-hero-note { margin-top:22px; font-size:14px; line-height:1.6; color:var(--cream-2); max-width:46ch; }

/* Hero: a search following the site map to the page that answers it */
.ws-route { background:var(--text); color:var(--paper); border-radius:8px; padding:22px; display:grid; gap:16px; }
.ws-query { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 14px; background:var(--paper); color:var(--text); border-radius:6px; font-size:15px; }
.ws-query-source { flex:none; font:600 11px 'DM Sans',sans-serif; letter-spacing:1.2px; text-transform:uppercase; color:var(--green); min-width:64px; }
.ws-query-text, .ws-result span:last-child { transition:opacity 200ms ease, transform 200ms var(--ease); }
.ws-route.is-swapping .ws-query-text, .ws-route.is-swapping .ws-query-source, .ws-route.is-swapping #ws-result { opacity:0; transform:translateY(4px); }
.ws-query-source { transition:opacity 200ms ease, transform 200ms var(--ease); }
.ws-route svg { display:block; width:100%; height:auto; }
.ws-edges { stroke:#4f6a5f; stroke-width:1.5; }
.ws-lit path { stroke:var(--lime); stroke-width:2; stroke-linejoin:round; opacity:0; transition:opacity 240ms ease; }
.ws-lit path.on { opacity:1; }
.ws-col-label { fill:#a9bcae; font:600 12px 'DM Sans',sans-serif; letter-spacing:1px; text-transform:uppercase; }
.ws-nodes rect { fill:#23423a; stroke:#3f5c52; transition:fill 240ms ease, stroke 240ms ease; }
.ws-nodes text { fill:#c8d7c4; font:500 15px 'DM Sans',sans-serif; text-anchor:middle; transition:fill 240ms ease; }
.ws-nodes g.on rect { fill:var(--lime); stroke:var(--lime); }
.ws-nodes g.on text { fill:var(--text); font-weight:600; }
.ws-result { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--paper); }
.ws-result-dot { width:9px; height:9px; border-radius:50%; background:var(--lime); flex:none; }
.ws-route figcaption { font-size:12px; color:#a9bcae; }

/* Proof */
.ws-proof { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:6%; align-items:center; padding-top:24px; }
.ws-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.ws-stats div { border-top:1px solid var(--line); padding-top:16px; }
.ws-stats strong { display:block; font:500 clamp(40px,4.4vw,60px)/1 'Manrope',sans-serif; letter-spacing:-.03em; margin-bottom:10px; }
.ws-stats span { font-size:14px; line-height:1.5; color:var(--cream-2); display:block; }
.ws-proof blockquote p { font:500 21px/1.35 'Manrope',sans-serif; letter-spacing:-.01em; margin-bottom:12px; }
.ws-proof cite { font-style:normal; font-size:14px; color:var(--cream-2); }
.ws-proof cite a { color:var(--text); }

/* Site size selector */
.ws-lede { max-width:68ch; margin-top:14px; }
.ws-sizes { margin-top:32px; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:20px; }
.ws-size-tabs { display:grid; gap:8px; align-content:start; }
.ws-size-tabs button { text-align:left; background:transparent; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:16px 18px; cursor:pointer; font-family:inherit; transition:background 160ms ease, border-color 160ms ease, transform 160ms var(--ease); }
.ws-size-tabs button:active { transform:scale(.98); }
.ws-size-tabs button span { display:block; font:500 17px/1.3 'Manrope',sans-serif; }
.ws-size-tabs button small { display:block; margin-top:4px; font-size:13px; line-height:1.4; color:var(--cream-2); }
.ws-size-tabs button[aria-pressed="true"] { background:var(--lime); border-color:var(--lime); }
.ws-size-tabs button[aria-pressed="true"] small { color:var(--text); }
@media (hover:hover) and (pointer:fine) { .ws-size-tabs button[aria-pressed="false"]:hover { background:var(--surface); } }
.ws-size-panel { background:var(--surface); border-radius:8px; padding:28px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; min-height:340px; align-items:center; }
.ws-tiles { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; align-content:center; }
.ws-tiles i { display:block; aspect-ratio:3/4; border-radius:3px; background:var(--paper); border:1px solid var(--line); animation:ws-tile 260ms var(--ease) both; animation-delay:calc(var(--i) * 14ms); }
.ws-tiles i.t-service, .ws-legend i.t-service { background:var(--text); border-color:var(--text); }
.ws-tiles i.t-area, .ws-legend i.t-area { background:var(--lime); border-color:#c6dd5f; }
.ws-tiles i.t-custom { background:transparent; border:1.5px dashed #8fa18e; }
.ws-tiles i.t-other, .ws-legend i.t-other { background:var(--paper); border-color:#a8b6a5; }
@keyframes ws-tile { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:scale(1); } }
.ws-size-count { margin-bottom:12px; }
.ws-size-count strong { font:500 52px/1 'Manrope',sans-serif; letter-spacing:-.03em; }
.ws-size-count span { font-size:15px; color:var(--cream-2); }
.ws-size-copy p { font-size:16px; line-height:1.65; }
.ws-legend { list-style:none; margin-top:14px; font-size:14px; display:grid; gap:6px; }
.ws-legend[hidden] { display:none; }
.ws-legend li { display:flex; align-items:center; gap:8px; }
.ws-legend i { width:12px; height:16px; border-radius:2px; border:1px solid; flex:none; }
.ws-size-foot { margin-top:16px; font-size:15px; color:var(--cream-2); }

/* Dark band */
.ws-dark-wrap { padding-top:16px; padding-bottom:16px; }
.ws-dark { background:var(--text); color:var(--paper); border-radius:8px; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:6%; align-items:center; }
.ws-dark .section-tag { color:var(--lime); }
.ws-dark .section-tag::before { background:var(--lime); }
.ws-dark h2 { color:var(--paper); }
.ws-dark .prose { color:#d5dfd3; }
.ws-robots-wrap { min-width:0; margin:0; }
.ws-robots-wrap figcaption { margin-top:12px; font-size:14px; line-height:1.6; color:#c8d7c4; }
.ws-robots-wrap figcaption strong { color:var(--paper); font-weight:600; }
.ws-robots { background:#102420; border:1px solid #33514a; border-radius:8px; overflow:hidden; min-width:0; }
.ws-robots-bar { padding:10px 14px; font-size:12px; color:#a9bcae; border-bottom:1px solid #33514a; }
.ws-robots pre { margin:0; padding:16px 14px; overflow-x:auto; font:400 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:#e8efe2; }
.ws-robots .c { color:var(--lime); }

/* Checks and ownership */
.ws-checks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin-top:28px; }
.ws-checks div { border-top:1px solid var(--line); padding:18px 0 26px; }
.ws-checks h3 { font-size:18px; margin-bottom:8px; }
.ws-checks p { font-size:15px; line-height:1.6; color:var(--cream-2); }
.ws-own { align-items:start; }
.ws-steps { list-style:none; counter-reset:step; }
.ws-steps li { counter-increment:step; display:grid; grid-template-columns:44px 1fr; padding:16px 0; border-top:1px solid var(--line); }
.ws-steps li::before { content:'0' counter(step); grid-row:span 2; font:600 12px 'DM Sans',sans-serif; letter-spacing:1.2px; color:var(--green); padding-top:5px; }
.ws-steps h3 { font-size:18px; margin-bottom:4px; }
.ws-steps p { font-size:15px; line-height:1.6; color:var(--cream-2); }

@media(max-width:1000px) {
  .ws-hero, .ws-proof, .ws-dark { grid-template-columns:minmax(0,1fr); gap:36px; }
  .ws-sizes { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:768px) {
  .ws-size-panel { grid-template-columns:minmax(0,1fr); min-height:0; padding:20px; }
  .ws-checks { grid-template-columns:minmax(0,1fr); }
  .ws-tiles { grid-template-columns:repeat(8,1fr); }
}
@media(max-width:480px) {
  .ws-hero h1 { font-size:38px; }
  .ws-hero-actions .btn { width:100%; }
  .ws-route { padding:14px; }
  .ws-nodes text { font-size:17px; }
  .ws-col-label { font-size:14px; }
  .ws-stats { gap:14px; }
  .ws-stats strong { font-size:36px; }
  .ws-stats span { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .ws-tiles i { animation:none; }
  .ws-query-text, .ws-query-source, .ws-result span:last-child { transition:none; }
}