/* Palette aligned to WB core's live "sand" theme (2026-08-10), see BRAND_GUIDE.md.
   --blue/--blue2 keep their names for now (large existing usage surface) but hold
   the sand accent, not blue — a token rename is future cleanup, not this pass. */
:root{
  --bg:#f8f1e7;
  --panel:#fbf6ee;
  --ink:#3a2c1a;
  --muted:#8a7355;
  --line:#ddc7a3;
  --blue:#c08a4e;
  --blue2:#f3e3c9;
  --blue-strong:#9c6b34;
  --green:#16a34a;
  --orange:#f97316;
  --shadow:0 18px 60px rgba(58,44,26,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:radial-gradient(circle at top,#fff8e9 0,#f8f1e7 48%,#f7ebd2 100%);
  color:var(--ink);
}
.top{
  --top-height:72px;
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:var(--top-height);
  padding:0 26px;
  border-bottom:1px solid rgba(217,205,184,.7);
  background:rgba(251,243,223,.92);
  backdrop-filter:blur(16px);
}
.brand{align-self:stretch;display:flex;align-items:center;flex:0 0 auto}
.brand img{height:100%;max-height:var(--top-height);width:auto;display:block;border-radius:12px;object-fit:contain}
nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:850;
  font-size:14px;
  padding:9px 11px;
  border-radius:999px;
}
nav a:hover,nav a.active{background:var(--blue2);color:var(--blue-strong)}
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid rgba(192,138,78,.22);
  border-radius:999px;
  background:rgba(255,250,240,.9);
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}
nav a.lang-option{
  padding:6px 9px;
  min-width:30px;
  text-align:center;
  font-size:12px;
  line-height:1;
  border-radius:999px;
  color:var(--blue-strong);
}
nav a.lang-option:hover{background:var(--blue2);color:var(--blue-strong)}
nav a.lang-option.active{background:var(--blue);color:white}
main{max-width:1120px;margin:0 auto;padding:38px 24px 80px}
.hero,.panel,.doc-section,.pagehead{
  background:rgba(255,250,240,.9);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.hero{text-align:center;padding:66px 48px;margin-bottom:32px}
.eyebrow{color:var(--blue);text-transform:uppercase;letter-spacing:.22em;font-weight:900;font-size:13px}
h1{font-size:clamp(48px,7vw,82px);line-height:.95;margin:12px 0 20px}
h2{font-size:36px;margin:0 0 18px}
h3{margin-top:0}
.lead{color:var(--muted);font-size:20px;max-width:780px;line-height:1.55;margin:0 auto 26px}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.actions.left{justify-content:flex-start}
.actions a{background:var(--blue);color:white;text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:900}
.actions a.secondary{background:#0f172a}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 40px}
.card{
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.clickable{cursor:pointer}
.card.clickable:hover,.card.clickable:focus{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(192,138,78,.15);
  border-color:rgba(192,138,78,.45);
  outline:none;
}
.card p,.panel p,.doc-section p,.doc-section li{color:var(--muted);line-height:1.6}
.usp-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.usp{
  background:linear-gradient(180deg,#fffaf0,#fff7e8);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
}
.usp .icon{font-size:42px;margin-bottom:14px}
.panel{padding:30px;margin:24px 0}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:center}
.split img,.tour-card img,.hero-shot{
  width:100%;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(15,23,42,.12);
}
.screenshot{cursor:zoom-in}
.pagehead{padding:44px 40px;margin-bottom:30px}
.pagehead h1{font-size:clamp(42px,6vw,72px)}
.tour-timeline{position:relative;margin:28px 0}
.tour-timeline:before{
  content:"";
  position:absolute;
  left:34px;
  top:20px;
  bottom:20px;
  width:3px;
  background:linear-gradient(var(--blue),rgba(192,138,78,.12));
  border-radius:999px;
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:20px;
  margin:0 0 24px;
}
.timeline-dot{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--blue);
  color:white;
  font-weight:900;
  box-shadow:0 10px 28px rgba(192,138,78,.25);
}
.tour-card{
  display:grid;
  grid-template-columns:1.05fr .85fr;
  gap:30px;
  align-items:center;
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
}
.stepno{color:var(--blue);font-weight:900;letter-spacing:.14em}
.doc-section{padding:34px;margin:24px 0;scroll-margin-top:120px}
.attribution-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.reflection-quote{margin:0;padding:0 0 0 18px;border-left:4px solid var(--blue);color:var(--ink);font-size:clamp(18px,2.2vw,22px);font-weight:700;font-style:italic;line-height:1.5}
.chip-chatgpt{background:#e1f5ef!important;color:#0e8a6c!important}
.chip-gemini{background:#eaeefc!important;color:#4b4fe0!important}
.chip-codex{background:#ececee!important;color:#3a3d46!important}
.chip-antigravity{background:#e5eefd!important;color:#3a6fe0!important}
.chip-claude{background:#f5e6de!important;color:#b85c3a!important}
.chip-python{background:#e1ebf7!important;color:#2b5a8c!important}
.chip-javascript{background:#fdf6d3!important;color:#8a7511!important}
.chip-vscode{background:#e1eefb!important;color:#0b6fae!important}
.chip-gcloud{background:#e5eefd!important;color:#3367c8!important}
.chip-render{background:#eae9fb!important;color:#5b4fd1!important}
.chip-supabase{background:#e1f7ee!important;color:#0e8c5a!important}
.chip-cloudflare{background:#fcebda!important;color:#c2650e!important}
.chip-azure{background:#e1eefb!important;color:#0b5fa5!important}
.chip-osm{background:#eaf4e4!important;color:#4f7a3a!important}
.chip-trafikverket{background:#e3eaf2!important;color:#2a4a70!important}
.chip-ors{background:#e7f1e4!important;color:#3e6e3a!important}
.chip-wikivoyage{background:#e9f6e7!important;color:#3f8a3f!important}
.chip-wikipedia{background:#ececec!important;color:#3a3a3a!important}
.chip-wikimedia{background:#e4f0f0!important;color:#1f6f6f!important}
.doc-section h1{font-size:44px;margin-bottom:16px}
.doc-section h2{font-size:28px;margin-top:30px}
.doc-section.highlight{animation:highlight 2.8s ease}
@keyframes highlight{
  0%{box-shadow:0 0 0 0 rgba(192,138,78,.0)}
  20%{box-shadow:0 0 0 8px rgba(192,138,78,.25)}
  100%{box-shadow:var(--shadow)}
}
.toc ol{columns:2}
.comparison-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:28px 0;
}
.compare-card{
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
}
.compare-card.featured{
  border-color:rgba(192,138,78,.65);
  box-shadow:0 20px 50px rgba(192,138,78,.12);
}
.compare-card ul{padding-left:20px;color:var(--muted);line-height:1.65}
.comparison-table table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{border:1px solid var(--line);padding:16px;text-align:left;vertical-align:top}
.comparison-table th{background:var(--blue2)}
details{border-top:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:900}
footer{text-align:center;color:var(--muted);padding:36px 20px}
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  place-items:center;
  padding:28px;
  background:rgba(15,23,42,.76);
}
.lightbox.open{display:grid;opacity:1;visibility:visible;pointer-events:auto}
.lightbox img{
  max-width:min(96vw,1500px);
  max-height:88vh;
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.lightbox button{
  position:absolute;
  top:24px;
  right:24px;
  border:0;
  background:white;
  color:#0f172a;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
@media(max-width:850px){
  .top{align-items:flex-start;flex-direction:column}
  nav{justify-content:flex-start}
  .grid,.split,.tour-card,.usp-grid,.comparison-columns{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .tour-timeline:before{display:none}
  .timeline-dot{width:48px;height:48px}
  main{padding:28px 14px 60px}
  .hero{padding:42px 24px}
}

.use-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.use-card{
  background:rgba(255,255,255,.45);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
}
.flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.flow-step{
  background:linear-gradient(180deg,#fffaf0,#fff7e8);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px;
}
.flow-number{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:white;
  font-weight:900;
  margin-bottom:16px;
}
@media(max-width:850px){
  .use-grid,.flow{grid-template-columns:1fr}
}

.doc-section p:empty{display:none}
.doc-section ul,
.doc-section ol{
  margin-top:10px;
  margin-bottom:22px;
}
.doc-section li{
  margin:6px 0;
}

.feature-controls{
  background:rgba(255,250,240,.9);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  margin:24px 0;
}
.filter-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.filter-chip{
  border:1px solid var(--line);
  background:#fffaf0;
  color:var(--ink);
  border-radius:999px;
  padding:9px 13px;
  font-weight:900;
  cursor:pointer;
}
.filter-chip.active{
  background:var(--blue);
  color:white;
  border-color:var(--blue);
}
#featureSearch{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  font:inherit;
  background:white;
}
.empty-state{
  display:none;
  margin:14px 0 0;
  font-weight:800;
  color:var(--muted);
}

.feature-meta{
  font-size:13px;
  font-weight:800;
  color:var(--muted)!important;
  margin-top:16px;
}
.chip{
  display:inline-block;
  background:var(--blue2);
  color:var(--blue-strong)!important;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  margin:0 0 12px;
}
.feature-detail{
  display:none;
  border-top:1px solid var(--line);
  margin-top:16px;
  padding-top:14px;
}
.card.expanded .feature-detail,
.card:hover .feature-detail,
.card:focus-within .feature-detail{
  display:block;
}

.guided-tour{
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  box-shadow:var(--shadow);
}
.guided-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:22px;
}
.guided-head h2{margin-bottom:8px}
.tour-progress{
  background:var(--blue);
  color:white;
  font-weight:900;
  border-radius:999px;
  padding:12px 16px;
  white-space:nowrap;
}
.guided-layout{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:22px;
}
.tour-rail{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tour-rail-step{
  text-align:left;
  border:1px solid var(--line);
  background:#fffaf0;
  color:var(--ink);
  border-radius:16px;
  padding:12px;
  font-weight:850;
  cursor:pointer;
}
.tour-rail-step span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  background:var(--blue2);
  color:var(--blue-strong);
  border-radius:999px;
  margin-right:8px;
  font-weight:900;
}
.tour-rail-step.active{
  border-color:var(--blue);
  box-shadow:0 12px 28px rgba(192,138,78,.14);
}
.tour-rail-step.active span{
  background:var(--blue);
  color:white;
}
.guided-step{
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}
.guided-step.active{display:grid}
.guided-step img{
  width:100%;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 18px 45px rgba(15,23,42,.14);
}
.guided-copy{padding:10px 4px}
.lead.small{font-size:18px;margin:0 0 14px}
.open-shot{
  border:1px solid var(--line);
  background:white;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  margin-top:10px;
}
.guided-controls{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:22px;
}
.guided-controls button{
  background:var(--blue);
  color:white;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
}
.guided-controls button:first-child{background:#0f172a}
@media(max-width:950px){
  .guided-layout,.guided-step{grid-template-columns:1fr}
  .tour-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .guided-head{flex-direction:column}
  .tour-rail{grid-template-columns:1fr}
}

/* M1.13 Feature Explorer */
.feature-control-block{margin-bottom:14px}
.feature-control-block strong{display:block;margin-bottom:8px;color:var(--ink)}
.feature-explorer{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:22px;
  align-items:start;
  margin:28px 0 36px;
}
.feature-explorer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.feature-explorer-card{
  background:rgba(255,250,240,.94);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.feature-explorer-card:hover,
.feature-explorer-card:focus,
.feature-explorer-card.selected{
  transform:translateY(-3px);
  border-color:rgba(192,138,78,.58);
  box-shadow:0 18px 45px rgba(192,138,78,.15);
  outline:none;
  background:white;
}
.feature-card-top,
.feature-card-meta,
.feature-card-footer,
.feature-preview-badges{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.feature-card-meta{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  margin-top:16px;
}
.feature-card-footer{
  border-top:1px solid var(--line);
  margin-top:16px;
  padding-top:14px;
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}
.feature-card-footer a{color:var(--blue);font-weight:900;text-decoration:none}
.feature-preview{
  position:sticky;
  top:108px;
  background:linear-gradient(180deg,#fffaf0,#fff7e8);
  border:1px solid var(--line);
  border-radius:26px;
  padding:22px;
  box-shadow:var(--shadow);
}
.feature-preview img{
  width:100%;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(15,23,42,.14);
  margin-bottom:16px;
}
.feature-preview h2{font-size:30px;margin:16px 0 10px}
.dependency-box{
  margin-top:18px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.52);
}
.dependency-box strong{display:block;margin-bottom:6px}
.dependency-box span{color:var(--muted);font-weight:800}
.feature-mini .feature-card-top,
.feature-mini .feature-card-meta,
.feature-mini .feature-card-footer{gap:8px}
@media(max-width:950px){
  .feature-explorer{grid-template-columns:1fr}
  .feature-preview{position:relative;top:auto;order:-1}
}
@media(max-width:700px){
  .feature-explorer-grid{grid-template-columns:1fr}
}

/* M1.14 Interactive Comparison */
.scenario-picker{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:24px;
  align-items:stretch;
  background:linear-gradient(135deg,#fffaf0,#f7ebd2);
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px;
  box-shadow:var(--shadow);
  margin:28px 0;
}
.scenario-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.scenario-button{
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  border-radius:16px;
  padding:14px 16px;
  font-weight:950;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.scenario-button:hover,.scenario-button.active{
  transform:translateY(-2px);
  border-color:rgba(192,138,78,.6);
  box-shadow:0 14px 35px rgba(192,138,78,.14);
}
.scenario-results{
  display:grid;
}
.scenario-result{
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:white;
  border:1px solid rgba(192,138,78,.24);
  border-radius:24px;
  padding:28px;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
}
.scenario-result.active{display:block;opacity:1;visibility:visible;pointer-events:auto}
.scenario-result h3{font-size:30px;margin:10px 0 12px}
.comparison-tools{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:28px 0;
}
.compare-tool{
  background:rgba(255,250,240,.94);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
}
.compare-tool:hover{transform:translateY(-4px);border-color:rgba(192,138,78,.48)}
.compare-tool.featured{border-color:rgba(192,138,78,.72)}
.compare-tool img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-bottom:1px solid var(--line);
}
.compare-tool div{padding:22px}
.compare-tool p{color:var(--muted);line-height:1.6}
.table-scroll{overflow:auto;border-radius:18px;border:1px solid var(--line)}
.comparison-table table{min-width:760px;border:0}
.comparison-table th,.comparison-table td{background:rgba(255,255,255,.58)}
.comparison-table thead th{background:var(--blue2);color:var(--blue-strong);font-weight:950}
.comparison-table tbody th{font-weight:950;color:var(--ink);background:#fff7e8}
.comparison-table .route-col{background:var(--blue2);font-weight:850;color:var(--blue-strong)}
.comparison-detail summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.comparison-detail summary:after{content:'+';font-size:22px;color:var(--blue)}
.comparison-detail[open] summary:after{content:'–'}
@media(max-width:950px){
  .scenario-picker,.comparison-tools{grid-template-columns:1fr}
}

/* M1.15 Landing polish */
.landing-hero{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:34px;
  align-items:center;
  background:linear-gradient(135deg,rgba(255,250,240,.98),rgba(239,246,255,.92));
  border:1px solid var(--line);
  border-radius:34px;
  padding:54px;
  box-shadow:0 28px 90px rgba(15,23,42,.13);
  overflow:hidden;
  position:relative;
  margin-bottom:30px;
}
.landing-hero:before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-160px;
  top:-160px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(192,138,78,.18),rgba(192,138,78,0));
}
.landing-copy{position:relative;z-index:2}
.landing-copy h1{text-align:left;margin-bottom:22px}
.landing-copy .lead{text-align:left;margin-left:0;margin-right:0}
.actions a.ghost{background:white;color:var(--ink);border:1px solid var(--line)}
.landing-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}
.landing-proof article{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,205,184,.9);
  border-radius:18px;
  padding:16px;
}
.landing-proof strong{display:block;font-size:20px;margin-bottom:6px}
.landing-proof span{display:block;color:var(--muted);font-size:13px;line-height:1.45;font-weight:750}
.landing-visual{
  position:relative;
  z-index:2;
}
.visual-card{
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  padding:10px;
  box-shadow:0 24px 70px rgba(15,23,42,.18);
}
.visual-card img{width:100%;display:block;border-radius:18px;border:1px solid rgba(217,205,184,.8)}
.visual-card video{width:100%;display:block;border-radius:18px;border:1px solid rgba(217,205,184,.8);background:#fdf8ee}
.visual-card.hero-video-card{position:relative;width:100%;padding:0;overflow:hidden}
.visual-card.hero-video-card video{aspect-ratio:16/9;height:auto;object-fit:contain;border:0;border-radius:24px;transition:opacity .22s ease}
.hero-video-replay{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:24px;padding:0;background:transparent;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .22s ease}
.hero-video-replay img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:24px}
.hero-video-card.video-ended video{opacity:0}
.hero-video-card.video-ended .hero-video-replay{opacity:1;pointer-events:auto}
.section-head{max-width:760px;margin-bottom:22px}
.section-head p{margin-top:0}
.story-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.story-step{
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
}
.story-step span{
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  background:var(--blue);
  color:white;
  border-radius:999px;
  font-weight:950;
  margin-bottom:18px;
}
@media(max-width:950px){
  .landing-hero{grid-template-columns:1fr;padding:34px}
  .landing-proof,.story-grid{grid-template-columns:1fr}
  }


/* M1.17 Portal Search */
.search-head{position:relative;overflow:hidden}
.portal-search-box{
  max-width:820px;
  margin:28px auto 0;
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:0 18px 50px rgba(15,23,42,.10);
}
.portal-search-box input{
  width:100%;
  border:1px solid var(--line);
  border-radius:18px;
  padding:17px 18px;
  font-size:18px;
  font-weight:750;
  background:white;
  color:var(--ink);
}
.search-presets{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.search-presets button{
  border:1px solid rgba(192,138,78,.25);
  background:var(--blue2);
  color:var(--blue-strong);
  padding:9px 13px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.search-results-panel{padding:0;margin-top:24px}
.search-results{display:grid;grid-template-columns:1fr;gap:14px}
.search-result-card{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,250,240,.94);
  box-shadow:0 12px 34px rgba(15,23,42,.08);
}
.search-result-card h3{margin:8px 0}
.search-result-card a{color:var(--ink);text-decoration:none}
.search-result-card h3 a:hover{color:var(--blue)}
.result-open{
  white-space:nowrap;
  background:var(--blue);
  color:white!important;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
}
@media(max-width:720px){.search-result-card{display:block}.result-open{display:inline-block;margin-top:12px}}


/* M1.18/M1.20 Gallery and Showcase */
.gallery-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:24px;
}
.gallery-controls input{
  min-width:min(420px,100%);
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 16px;
  background:#fffaf0;
  font-weight:800;
}
.gallery-chip{
  border:1px solid var(--line);
  background:#fffaf0;
  color:var(--ink);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.gallery-chip.active,.gallery-chip:hover{background:var(--blue);color:white;border-color:var(--blue)}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:28px 0 44px;
}
.gallery-card{
  overflow:hidden;
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gallery-card:hover{transform:translateY(-4px);border-color:rgba(192,138,78,.45);box-shadow:0 18px 45px rgba(192,138,78,.14)}
.gallery-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.gallery-card div{padding:18px}
@media(max-width:900px){.gallery-grid{grid-template-columns:1fr}}

/* Modules overview (Waybound Studio suite) */
.module-phase+.module-phase{margin-top:22px}
.module-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0 0}
.module-card{display:flex;flex-direction:column;gap:10px}
.module-card-top{display:flex;align-items:center;justify-content:space-between}
.module-emoji{font-size:26px;line-height:1}
.module-card h3{margin:0}
.module-tagline{color:var(--ink);font-weight:700;margin:0}
.module-highlights{margin:0;padding-left:18px;color:var(--muted);line-height:1.55}
.module-highlights li{margin:2px 0}
.module-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.module-status{color:var(--muted);font-size:13px}
.module-link{white-space:nowrap;font-weight:800}
@media(max-width:900px){.module-grid{grid-template-columns:1fr}}

.legal-toc{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px}
.legal-toc a{font-weight:800}

.screenshot-placeholder{width:100%;aspect-ratio:16/10;display:block;border-radius:18px}
.module-shot{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:18px;margin-bottom:14px;border:1px solid var(--line)}


/* M1.20 Product Showcase */
.showcase-head{overflow:hidden;position:relative}
.showcase-stage{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:24px;
  align-items:stretch;
  margin:28px 0;
}
.showcase-copy{
  background:rgba(255,250,240,.94);
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px;
  box-shadow:var(--shadow);
}
.showcase-copy h2{font-size:34px;margin:12px 0 12px}
.showcase-copy p{color:var(--muted);line-height:1.6}
.showcase-explain{
  margin-top:24px;
  border:1px solid rgba(192,138,78,.20);
  background:linear-gradient(180deg,#fff,#f7ebd2);
  border-radius:22px;
  padding:20px;
  min-height:190px;
}
.showcase-explain h3{margin:0 0 10px;font-size:22px}
.showcase-explain .button{display:inline-block;margin-top:10px;text-decoration:none}
.showcase-screen{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  min-height:520px;
  background:#0f172a;
  box-shadow:0 28px 70px rgba(15,23,42,.22);
}
.showcase-screen img{width:100%;height:100%;min-height:520px;object-fit:cover;display:block;filter:saturate(1.03)}
.showcase-screen:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 55% 38%, rgba(192,138,78,.05), rgba(15,23,42,.10));
  pointer-events:none;
}
.showcase-hotspot{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,250,240,.92);
  color:var(--ink);
  border-radius:999px;
  padding:8px 11px 8px 8px;
  box-shadow:0 12px 34px rgba(15,23,42,.22);
  cursor:pointer;
  font-weight:900;
  backdrop-filter:blur(10px);
}
.showcase-hotspot span{width:14px;height:14px;border-radius:999px;background:var(--blue);box-shadow:0 0 0 6px rgba(192,138,78,.18)}
.showcase-hotspot.active,.showcase-hotspot:hover{background:var(--blue);color:white;border-color:var(--blue)}
.showcase-hotspot.active span,.showcase-hotspot:hover span{background:white;box-shadow:0 0 0 6px rgba(255,255,255,.22)}
.showcase-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 46px}
.showcase-card{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:rgba(255,250,240,.94);box-shadow:var(--shadow)}
.showcase-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);display:block}
.showcase-card div{padding:20px}.showcase-card h3{margin:0 0 8px}.showcase-card p{margin:0;color:var(--muted);line-height:1.55}
@media(max-width:1000px){.showcase-stage{grid-template-columns:1fr}.showcase-card-grid{grid-template-columns:1fr}.showcase-screen{min-height:380px}.showcase-screen img{min-height:380px}.showcase-hotspot strong{display:none}}


/* M1.21 Launch Experience */
.launch-hero{align-items:start}
.launch-hero .lead{margin-left:0;text-align:left}
.actions a.primary-cta,.primary-cta{background:linear-gradient(135deg,#c08a4e,#9c6b34);box-shadow:0 16px 34px rgba(192,138,78,.28)}
.actions a.ghost{background:rgba(192,138,78,.10);color:var(--blue-strong);border:1px solid rgba(192,138,78,.24)}
.launch-banner{display:flex;align-items:center;justify-content:space-between;gap:22px}
.launch-banner a{background:var(--blue);color:#fff;text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:900;white-space:nowrap}
.launch-help .section-head{max-width:740px}
.help-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:22px}
.help-card{display:grid;gap:8px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fffaf0;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.help-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(192,138,78,.14);border-color:rgba(192,138,78,.35)}
.help-card span{color:var(--muted);font-size:13px;line-height:1.35}
.help-card strong{font-size:18px}
.quick-launch-head{text-align:center}
.quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:26px 0 32px}
.quick-card{background:rgba(255,250,240,.92);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.quick-card-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.quick-card span{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--blue);color:white;font-weight:900;margin-bottom:16px}
.quick-card p{color:var(--muted);line-height:1.55}
@media (max-width:960px){.help-grid,.quick-grid{grid-template-columns:1fr 1fr}.launch-banner{align-items:flex-start;flex-direction:column}.launch-hero .lead{text-align:center;margin-left:auto}}
@media (max-width:640px){.help-grid,.quick-grid{grid-template-columns:1fr}}

/* M1.25A · User journey navigation */
.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-group:after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:18px}
.nav-group .nav-parent{display:inline-flex;align-items:center;gap:6px}
.nav-group .nav-parent:after{content:"⌄";font-size:12px;opacity:.7}
.nav-group .nav-parent.no-caret:after{content:none}
.nav-group.active .nav-parent{background:var(--blue2);color:var(--blue-strong)}
.nav-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:230px;
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border:1px solid rgba(217,205,184,.85);
  border-radius:18px;
  background:rgba(255,250,240,.98);
  box-shadow:0 18px 48px rgba(15,23,42,.16);
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index:20;
}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu,.nav-group.open .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-menu a{
  display:block;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  white-space:nowrap;
}
.journey-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:28px 0 40px;
}
.journey-card{
  display:block;
  min-height:190px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,250,240,.92);
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.journey-card:hover,.journey-card:focus{
  transform:translateY(-4px);
  border-color:rgba(192,138,78,.45);
  box-shadow:0 18px 45px rgba(192,138,78,.15);
  outline:none;
}
.journey-card span{
  display:inline-block;
  margin-bottom:16px;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:12px;
}
.journey-card strong{display:block;font-size:24px;margin-bottom:10px}
.journey-card p{color:var(--muted);line-height:1.6;margin:0}
@media(max-width:760px){
  .nav-group{width:100%;display:block}
  .nav-group .nav-parent{width:100%;justify-content:space-between}
  .nav-group:after{display:none}
  .nav-menu{position:static;display:flex;opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;margin:4px 0 8px;background:rgba(255,250,240,.7)}
  .journey-grid{grid-template-columns:1fr}
}


.launch-hero .landing-copy .lead{margin-left:0;margin-right:0}

/* M1.26A QR + mobile access */
.qr-card,.qr-banner{
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,250,240,.94);
  box-shadow:var(--shadow);
}
.qr-card{margin-top:20px;padding:16px}
.qr-banner{margin:24px 0 30px;padding:20px 24px;justify-content:center}
.qr-card img,.qr-banner img{
  width:132px;
  height:132px;
  border-radius:18px;
  background:white;
  padding:10px;
  border:1px solid rgba(15,23,42,.08);
  flex:0 0 auto;
}
.qr-card h2,.qr-card h3,.qr-banner h2{margin:0 0 8px}
.qr-card p,.qr-banner p{margin:0 0 10px;color:var(--muted);line-height:1.5}
.qr-card a,.qr-banner a{font-weight:900;color:var(--blue);text-decoration:none}
.qr-card a:hover,.qr-banner a:hover{text-decoration:underline}
@media(max-width:640px){
  .qr-card,.qr-banner{align-items:flex-start;flex-direction:column;text-align:left}
  .qr-card img,.qr-banner img{width:116px;height:116px}
}


/* M1.26B Mobile/tablet polish */
img,video,svg{max-width:100%;height:auto}
a,button,input,summary,[role=button],.filter-chip,.gallery-chip,.scenario-button,.tour-rail-step,.open-shot{touch-action:manipulation}
a,button,.filter-chip,.gallery-chip,.scenario-button,.tour-rail-step,.result-open,.open-shot{min-height:44px}
button,.filter-chip,.gallery-chip,.scenario-button,.tour-rail-step,.open-shot{font:inherit}
input,select,textarea{font-size:16px}

@media(max-width:1024px){
  main{max-width:100%;padding-left:20px;padding-right:20px}
  .top{gap:16px;padding:12px 18px}
  nav{gap:8px}
  nav a{padding:10px 12px}
  .hero,.landing-hero,.pagehead{padding:38px 30px}
  .doc-section,.panel,.guided-tour,.scenario-picker{padding:26px}
  h1{font-size:clamp(38px,8vw,68px)}
  h2{font-size:clamp(28px,5vw,36px)}
  .lead{font-size:18px}
  .showcase-screen{min-height:360px}
  .showcase-screen img{min-height:360px}
}

@media(max-width:820px){
  body{background:var(--bg)}
  .top{position:relative;align-items:stretch}
  .brand img{width:78px}
  nav{width:100%;display:grid;grid-template-columns:1fr;align-items:stretch}
  nav a,.nav-group .nav-parent{width:100%}
  .lang-switch{justify-self:flex-start}
  .actions{align-items:stretch;flex-direction:column}
  .actions a,.launch-banner a{display:flex;align-items:center;justify-content:center;width:100%;text-align:center}
  .hero,.landing-hero,.pagehead{border-radius:24px;padding:32px 22px}
  .hero{text-align:left}
  .hero .lead,.pagehead .lead{text-align:left;margin-left:0;margin-right:0}
  .doc-section,.panel,.guided-tour,.feature-controls,.portal-search-box,.showcase-copy,.showcase-explain{border-radius:22px;padding:22px}
  .card,.usp,.quick-card,.help-card,.story-step,.gallery-card,.showcase-card,.compare-tool,.search-result-card{border-radius:20px}
  .toc ol{columns:1;padding-left:22px}
  .comparison-table th,.comparison-table td{padding:12px}
  .guided-controls{justify-content:stretch;flex-direction:column}
  .guided-controls button{width:100%}
  .search-presets{justify-content:flex-start}
  .search-presets button,.gallery-chip,.filter-chip{flex:1 1 auto}
  .portal-search-box input,#featureSearch,.gallery-controls input{width:100%;min-width:0}
}

@media(max-width:640px){
  main{padding:20px 12px 52px}
  .top{padding:10px 12px}
  nav{gap:6px}
  nav a{font-size:14px;padding:11px 12px}
  .nav-menu a{white-space:normal;line-height:1.35}
  .lang-switch{width:100%;justify-content:space-between}
  nav a.lang-option{width:50%;padding:10px 12px}
  .hero,.landing-hero,.pagehead{padding:26px 18px;margin-bottom:20px}
  .doc-section,.panel,.guided-tour,.feature-controls,.portal-search-box,.scenario-picker{padding:18px;margin:18px 0}
  h1{font-size:clamp(34px,13vw,48px);line-height:1}
  .pagehead h1,.doc-section h1{font-size:clamp(32px,11vw,44px)}
  h2,.showcase-copy h2,.feature-preview h2{font-size:26px}
  .lead{font-size:17px;line-height:1.5}
  .eyebrow{font-size:11px;letter-spacing:.16em}
  .landing-proof article,.quick-card,.help-card,.card,.usp,.story-step{padding:18px}
  .guided-head{gap:12px}
  .tour-progress{width:100%;text-align:center}
  .guided-step{gap:16px}
  .tour-rail-step{display:flex;align-items:center}
  .showcase-stage{gap:16px}
  .showcase-screen{border-radius:20px;min-height:260px}
  .showcase-screen img{min-height:260px}
  .showcase-hotspot{padding:12px;min-width:44px;min-height:44px;justify-content:center}
  .showcase-hotspot span{width:16px;height:16px}
  .gallery-controls,.filter-row{align-items:stretch;flex-direction:column}
  .search-result-card{padding:18px}
  .result-open{display:flex!important;align-items:center;justify-content:center;width:100%}
  .table-scroll{margin-left:-4px;margin-right:-4px}
  .lightbox{padding:12px}
  .lightbox button{top:12px;right:12px;min-width:44px;min-height:44px}
}

@media(max-width:420px){
  main{padding-left:10px;padding-right:10px}
  .hero,.landing-hero,.pagehead,.doc-section,.panel,.guided-tour{padding-left:16px;padding-right:16px}
  .brand img{width:68px}
  .qr-card img,.qr-banner img{width:108px;height:108px}
  .quick-card span,.story-step span{width:40px;height:40px}
}


/* M1.26E Final release polish */
.nav-parent:focus-visible,.nav-menu a:focus-visible,.actions a:focus-visible,.help-card:focus-visible,.result-open:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid rgba(192,138,78,.45);
  outline-offset:3px;
}
.nav-menu{max-width:min(320px,calc(100vw - 24px))}
@media(max-width:640px){
  .launch-banner a,.actions a,.result-open{white-space:normal}
  .comparison-table{font-size:14px}
}


/* M1.26F Mobile flat navigation */
@media(max-width:820px){
  .top{
    position:sticky;
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }
  .brand{flex:0 0 auto}
  .brand img{width:64px}
  nav{
    flex:1 1 auto;
    width:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 0 4px;
  }
  nav::-webkit-scrollbar{display:none}
  .nav-group{
    width:auto;
    display:inline-flex;
    flex:0 0 auto;
  }
  .nav-group .nav-parent,
  nav a{
    width:auto;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:10px 12px;
  }
  .nav-group:after{display:none!important}
  .lang-switch{
    flex:0 0 auto;
    width:auto;
    justify-self:auto;
  }
  nav a.lang-option{width:auto;min-width:34px;min-height:34px;padding:7px 10px}
}

@media(max-width:420px){
  .brand img{width:58px}
  nav a,.nav-group .nav-parent{font-size:13px;padding-left:10px;padding-right:10px}
}

/* M1.26G Mobile locked logo + horizontal nav rail */
@media(max-width:820px){
  .top{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    width:100%;
    max-width:100vw;
    overflow:hidden;
  }
  .brand{
    flex:0 0 auto;
    position:relative;
    z-index:2;
  }
  nav{
    min-width:0;
    max-width:100%;
    flex:1 1 min(0,100%);
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:4px 2px 6px;
    scroll-padding-inline:8px;
  }
  .nav-group,
  nav > a,
  nav > .lang-switch{
    flex:0 0 auto;
    align-self:center;
  }
  .nav-group .nav-parent,
  nav a{
    flex:0 0 auto;
  }
}

@media(max-width:640px){
  .top{padding:8px 10px}
  nav{gap:6px}
}


/* M1.26H Compact language switch */
.lang-switch{padding:3px;min-height:0}
nav a.lang-option{min-height:34px;padding:7px 10px;line-height:1}
@media(max-width:820px){
  .lang-switch{height:38px;align-items:center}
  nav a.lang-option{min-height:32px;min-width:34px;padding:6px 10px}
}

/* M1.26I Full-height header logo */
.brand{align-self:stretch;display:flex;align-items:center;flex:0 0 auto}
.brand img{height:100%;max-height:var(--top-height);width:auto;object-fit:contain}
@media(max-width:820px){
  .top{--top-height:60px;padding:0 10px}
  .brand img{height:100%;max-height:var(--top-height);width:auto}
}
@media(max-width:640px){
  .top{--top-height:56px;padding:0 8px}
}

/* M1.26J: Route Planner wake-up explanation modal */
.wake-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(7,13,29,.58);backdrop-filter:blur(10px)}
.wake-modal.open{display:flex}
.wake-dialog{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:28px;width:min(880px,calc(100vw - 36px));padding:28px;border:1px solid rgba(255,255,255,.26);border-radius:30px;background:linear-gradient(135deg,#fff8eb 0%,#fffdf7 55%,#f7ebd2 100%);box-shadow:0 30px 90px rgba(7,13,29,.34);color:var(--ink)}
.wake-close{position:absolute;right:18px;top:16px;width:36px;height:36px;border:1px solid rgba(15,23,42,.16);border-radius:999px;background:rgba(255,255,255,.78);font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.wake-close:hover{color:var(--ink);background:#fff}
.wake-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 0}
.wake-kicker{margin:0 0 10px;color:var(--blue)}
.wake-copy h2{margin:0 0 14px;font-size:clamp(32px,4vw,52px);line-height:.98;letter-spacing:-.045em}
.wake-copy p:not(.eyebrow){margin:0;color:var(--muted);font-size:17px;line-height:1.65}
.wake-start{align-self:flex-start;margin-top:22px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 22px;border-radius:999px;color:#fff;text-decoration:none;font-weight:900;line-height:1.1;border:0;box-shadow:0 16px 34px rgba(192,138,78,.28);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.wake-start:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 20px 42px rgba(192,138,78,.34)}.wake-start:focus-visible{outline:3px solid rgba(192,138,78,.34);outline-offset:3px}
.wake-visual{min-height:250px;border-radius:24px;overflow:hidden;border:1px solid rgba(15,23,42,.12);background:#111827;box-shadow:0 18px 44px rgba(192,138,78,.18)}
.wake-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
@media (max-width:760px){.wake-modal{padding:14px}.wake-dialog{grid-template-columns:1fr;gap:18px;padding:22px;border-radius:24px}.wake-copy{padding-right:30px}.wake-copy h2{font-size:34px}.wake-copy p:not(.eyebrow){font-size:15px}.wake-start{width:100%;text-align:center;justify-content:center}.wake-visual{min-height:170px;max-height:220px}.wake-visual img{object-position:left center}}

/* M1.26L Center language switch vertically */
.lang-switch{
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:3px;
}
nav a.lang-option{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-height:36px;
  padding:0 10px;
  line-height:1;
}
@media(max-width:820px){
  .lang-switch{height:38px}
  nav a.lang-option{height:32px;min-height:32px;padding:0 10px}
}

/* M1.26O2 English landing hero alignment */
@media(min-width:951px){
  html[lang="en"] .launch-hero .landing-copy h1{
    font-size:clamp(56px,5.25vw,70px);
    letter-spacing:-.06em;
    white-space:nowrap;
  }
}


/* About */
.about-head blockquote{
  margin:18px 0 22px;
  padding:0 0 0 18px;
  border-left:4px solid var(--blue);
  color:var(--ink);
  font-size:clamp(24px,3vw,38px);
  font-weight:900;
  line-height:1.15;
}


/* Google API setup guide (hybrid-static google-api-{sv,en}.html).
   These rules went missing when the guide's markup was rewritten in M1.25A: the
   original M1.24B styles were hand-added to public/style.css, which the build
   overwrites, so they were gone by the next run and never made it into this file.
   The page has rendered unstyled since — including the browser's own list markers
   doubling the numbers the step strip already prints. See PUBLIC_MANIFEST.md; when
   the guide migrates into content/, this block moves with it. */
.api-pagehead{text-align:center}

.api-progress{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  list-style:none;
  padding:0;
  margin:0 0 30px;
}
.api-progress li{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-height:96px;
  padding:16px 10px;
  text-align:center;
  font-size:13px;
  font-weight:900;
  line-height:1.3;
  color:var(--muted);
  background:rgba(255,250,240,.92);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(58,44,26,.06);
}
.api-progress li span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:13px;
}

.api-intro p{max-width:820px}

.api-source-note{
  margin:26px 0;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.api-source-note h2{margin-top:0}
.api-source-note>div{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.api-direct-link{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fffaf0;
  color:var(--ink);
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.api-direct-link:hover,.api-direct-link:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(192,138,78,.38);
  box-shadow:0 14px 32px rgba(192,138,78,.14);
}
.api-direct-link span{
  color:var(--muted);
  font-size:12.5px;
  font-weight:600;
  word-break:break-all;
}

.api-walkthrough{margin:34px 0}
.api-walkthrough>h2{margin-bottom:18px}
.api-step-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.api-step-list>article,.api-repeat-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,250,240,.92);
  box-shadow:var(--shadow);
}
.api-step-list>article h3,.api-repeat-card h3{margin:0;font-size:20px}
.api-step-list>article p,.api-repeat-card p{margin:0;color:var(--muted);line-height:1.55}
.api-step-list>article ul,.api-repeat-card ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.55}
.api-step-list>article code{
  align-self:flex-start;
  max-width:100%;
  padding:8px 12px;
  border-radius:10px;
  background:var(--blue2);
  color:var(--blue-strong);
  font-size:13px;
  word-break:break-all;
}
.api-step-list .api-direct-link{margin-top:4px}

.api-shot{margin:6px 0 0}
.api-shot img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:14px;
}
.api-shot figcaption{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.api-complete-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin:34px 0;
  padding:30px 32px;
  border:1px solid var(--line);
  border-radius:26px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.api-complete-cta h2{margin:6px 0 8px}
.api-complete-cta p:last-child{margin-bottom:0;color:var(--muted)}
.api-complete-cta>a{
  flex:0 0 auto;
  padding:12px 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#c08a4e,#9c6b34);
  box-shadow:0 16px 34px rgba(192,138,78,.28);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

.api-bottom-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.api-bottom-nav a{
  padding:12px 18px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

@media(max-width:1050px){
  .api-progress{grid-template-columns:repeat(3,minmax(0,1fr))}
  .api-step-list{grid-template-columns:1fr}
  .api-source-note>div{grid-template-columns:1fr}
}
@media(max-width:640px){
  .api-progress{grid-template-columns:repeat(2,minmax(0,1fr))}
  .api-complete-cta{flex-direction:column;align-items:flex-start}
  .api-bottom-nav{flex-direction:column;align-items:stretch}
  .api-bottom-nav a{text-align:center}
}


/* ---- 2026-08-15 information-architecture rebuild ----
   New components introduced when the menu system went from 23 entries to 14:
   an in-page section bar (links inside a page belong on the page, not in the menu),
   a search magnifier in the top bar, the module detail pages that hang off Sviten,
   the troubleshooting page, and Showcase's absorbed brochure role. */

/* In-page section bar. Sticks under the header so it stays usable on long pages —
   this is the pattern Joakim liked on Teknisk dokumentation and Legal, generalised. */
.section-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.section-nav a{
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fffaf0;
  color:var(--ink);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.section-nav a:hover,.section-nav a:focus-visible{
  border-color:rgba(192,138,78,.45);
  background:var(--blue2);
  color:var(--blue-strong);
}

/* Search as a magnifier in the top bar of every page. */
.nav-search{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--ink);
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.nav-search svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.nav-search:hover,.nav-search:focus-visible,.nav-search.active{
  background:var(--blue2);
  border-color:rgba(192,138,78,.35);
  color:var(--blue-strong);
}

/* Module detail pages */
.module-head h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.module-code{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
}
.module-highlights{margin:10px 0 0;padding-left:20px;color:var(--muted);line-height:1.6}
.module-highlights li{margin-bottom:6px}
.module-hero-shot{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:18px;
}
.module-shot-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}
.module-shot-card{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fffaf0;
}
.module-shot-card img,.module-shot-card svg{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
}
.module-shot-card figcaption{display:grid;gap:4px}
.module-shot-card figcaption strong{font-size:15px}
.module-shot-card figcaption span{color:var(--muted);font-size:13.5px;line-height:1.45}
.next-module h2{display:flex;align-items:center;gap:10px;margin:6px 0 4px}

/* Showcase: the module grid it gained when Broschyr merged into it */
.showcase-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.showcase-module{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fffaf0;
  color:var(--ink);
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.showcase-module:hover,.showcase-module:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(192,138,78,.38);
  box-shadow:0 16px 38px rgba(192,138,78,.16);
}
.showcase-module img,.showcase-module svg{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
}
.showcase-module strong{display:block;font-size:17px;margin-top:4px}
.showcase-module p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.45}

/* Troubleshooting */
.trouble-item{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffaf0;
  padding:14px 18px;
  margin-bottom:10px;
}
.trouble-item summary{cursor:pointer;font-weight:800;font-size:16px}
.trouble-item p{margin:10px 0 0;color:var(--muted);line-height:1.6}
.trouble-more{margin-top:10px !important}

@media(max-width:1050px){
  .module-shot-grid,.showcase-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .module-shot-grid,.showcase-module-grid{grid-template-columns:1fr}
  .section-nav{gap:6px}
  .section-nav a{font-size:13px;padding:7px 12px}
}

/* Showcase inherited the brochure's printable job, so it has to survive a print
   dialog: drop the chrome, keep the substance, never break a card across pages. */
@media print{
  .top,.section-nav,.showcase-hotspot,.qr-card,.showcase-print,footer{display:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  .showcase-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-module,.showcase-card,.panel{break-inside:avoid;box-shadow:none}
  a[href]:after{content:""}
}

/* Sviten's cards are now entry points to the module pages, so the image and title
   have to read as links without turning the card into a wall of blue. */
.module-card-visual{display:block;text-decoration:none}
.module-card h3 a{color:inherit;text-decoration:none}
.module-card h3 a:hover,.module-card h3 a:focus-visible{color:var(--blue-strong);text-decoration:underline}
.module-card-footer .module-link{white-space:nowrap}

/* .module-emoji is sized for the Sviten cards (26px); inside a 72px page title it
   reads as a stray icon rather than part of the heading. */
.module-head h1 .module-emoji,.next-module h2 .module-emoji{font-size:.72em;line-height:1}

/* The practical facts strip on a module page: where it runs, sign-in, which UI. */
.module-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin:18px 0 0;
}
.module-facts div{display:grid;gap:2px}
.module-facts dt{
  color:var(--muted);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.module-facts dd{margin:0;font-size:15px;font-weight:800}

/* Blockquote, used to quote the app's own strings verbatim in documentation copy. */
.doc-section blockquote{
  margin:16px 0;
  padding:14px 20px;
  border-left:3px solid var(--blue);
  background:var(--blue2);
  border-radius:0 12px 12px 0;
}
.doc-section blockquote p{margin:0;color:var(--ink);font-size:15px;line-height:1.55}
.doc-section blockquote p + p{margin-top:8px}

/* Kom igång, rebuilt 2026-08-15: a walkthrough you read before the launch button,
   not a launch button with notes underneath it. */
.quick-promise,.quick-checklist{margin:12px 0 0;padding-left:20px;color:var(--muted);line-height:1.65}
.quick-promise li,.quick-checklist li{margin-bottom:8px}
.quick-steps{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.quick-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fffaf0;
}
.quick-step:nth-child(even) .quick-step-copy{order:2}
.quick-step-copy h3{margin:10px 0 8px;font-size:22px}
.quick-step-copy p{margin:0;color:var(--muted);line-height:1.6}
.quick-step-no{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-weight:900;
  font-size:14px;
}
.quick-step-shot img,.quick-step-shot svg{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:14px;
}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){
  .quick-step{grid-template-columns:1fr}
  .quick-step:nth-child(even) .quick-step-copy{order:0}
  .grid.two{grid-template-columns:1fr}
}

/* Architecture schematics on the technical documentation page. Inline SVG so it stays
   sharp, follows the sand palette through these rules rather than baked-in colours,
   and scrolls sideways in its own container instead of stretching the page. */
.dg-figure{margin:26px 0 0}
.dg-figure h3{margin:0 0 6px;font-size:19px}
.dg-figure figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}
.dg-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fffaf0;padding:14px}
.dg{display:block;width:100%;min-width:680px;height:auto}
.dg-box{fill:#fff;stroke:var(--line);stroke-width:1.5}
.dg-core{fill:var(--blue2);stroke:rgba(192,138,78,.5)}
.dg-edge-box{fill:#fff;stroke:rgba(192,138,78,.5);stroke-dasharray:0}
.dg-dim{fill:rgba(255,250,240,.7);stroke-dasharray:5 4}
.dg-chip{fill:var(--blue);stroke:none}
.dg-chip-text{fill:#fff;font-size:12px;font-weight:800}
.dg-title{fill:var(--ink);font-size:16px;font-weight:900}
.dg-sub{fill:var(--muted);font-size:12px;font-weight:700}
.dg-mono{fill:var(--muted);font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dg-label{fill:var(--ink);font-size:13px}
.dg-edge{fill:var(--muted);font-size:11px;font-weight:700}
.dg-arrow{fill:none;stroke:var(--blue-strong);stroke-width:1.6}
.dg-arrow.dg-dashed{stroke-dasharray:5 4}
.dg-arrowhead{fill:var(--blue-strong)}

/* Showcase stage, corrected 2026-08-15.
   The stage used object-fit:cover in a tall box, which cropped roughly 60 % of a
   1600x802 planner screenshot away — so the hotspots (Projekt, Destinationer, Karta,
   Dagar, Resplan) pointed at regions that were no longer on screen. They are positioned
   as percentages of this container, so the container has to carry the image's own
   aspect ratio for those percentages to mean anything. */
.showcase-stage{align-items:start}
.showcase-screen{
  min-height:0;
  aspect-ratio:1600 / 802;
  background:var(--panel);
}
.showcase-screen img{
  min-height:0;
  height:100%;
  object-fit:contain;
}
@media(max-width:1000px){
  .showcase-screen{min-height:0}
  .showcase-screen img{min-height:0}
}

/* Sitemap tables. Wide by nature, so they scroll inside their own container rather
   than pushing the page sideways. */
.sitemap-table-scroll{overflow-x:auto;margin-top:20px;border:1px solid var(--line);border-radius:14px}
.sitemap-table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.sitemap-table th,.sitemap-table td{
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
}
.sitemap-table thead th{
  background:var(--blue2);
  color:var(--blue-strong);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  position:sticky;
  top:0;
}
.sitemap-table tbody tr:last-child td{border-bottom:none}
.sitemap-table tbody tr:nth-child(even){background:rgba(192,138,78,.04)}
.sitemap-table td:first-child{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.sitemap-table code{font-size:12px;color:var(--muted);word-break:break-all}
.sitemap-table a{font-weight:800}
.sitemap-table em{color:var(--muted);font-style:normal;font-size:13px}

/* ---- Mobile menu, fixed 2026-08-15 ----
   The 820px breakpoint hid `.nav-menu` outright with !important, leaving a rail of
   the four parent links. That was survivable when the parents were most of the menu;
   after the restructure it meant 12 of 16 destinations could not be reached on a
   phone at all — tapping "Bakgrund" just opened Teknisk dokumentation every time,
   which is exactly what Joakim hit.
   On a touch device the parent now opens its panel instead of navigating, and the
   panel carries the parent's own page as its first entry so nothing is stranded. */
.nav-menu a.nav-menu-self{display:none}

@media(max-width:820px){
  nav{position:relative}
  .nav-group .nav-parent:after{content:"⌄";font-size:12px;opacity:.7;margin-left:2px;transition:transform .18s ease}
  .nav-group.open .nav-parent{background:var(--blue2);color:var(--blue-strong)}
  .nav-group.open .nav-parent:after{transform:rotate(180deg)}

  /* The panel drops out of the scrolling rail and spans the header instead, so it
     isn't trapped inside a horizontally scrolling strip. */
  .nav-menu{
    display:none;
    position:fixed;
    left:12px;
    right:12px;
    top:var(--nav-panel-top,64px);
    z-index:60;
    flex-direction:column;
    gap:2px;
    max-height:min(60vh,420px);
    overflow-y:auto;
    padding:8px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fffaf0;
    box-shadow:0 18px 48px rgba(58,44,26,.22);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav-group.open .nav-menu{display:flex}
  .nav-menu a.nav-menu-self{display:flex;font-weight:900}
  .nav-menu a.nav-menu-self + a{border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
  .nav-menu a{
    width:auto;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    white-space:normal;
    padding:10px 14px;
    border-radius:10px;
  }
}

/* The mobile panel is position:fixed, but header.top (overflow:hidden) and nav
   (overflow-x:auto) clip it regardless. Lift both clips while a panel is open. */
@media(max-width:820px){
  header.top.menu-open{overflow:visible}
  header.top.menu-open nav{overflow:visible}
}