/* ==========================================================================
   bewiseapps.com home page: Design.md look (v144, 7 November 2026)
   Loaded last in the home page head (after /bw-polish.css). Self-contained:
   it carries its own Design.md tokens so the home page does not depend on
   the apps' /bw-design.css.
   APPEARANCE ONLY: no wording, links, data, SEO or behaviour are changed.

   Design.md: canvas #090D16, panels #111827, hover/active #1F2937, one amber
   #F59E0B accent, text #F9FAFB / #9CA3AF / #6B7280, hairline borders
   rgba(255,255,255,.08) 1px max, Newsreader headings, Space Grotesk text and
   buttons, JetBrains Mono figures, 8px grid, radii 8px (containers) / 6px
   (buttons), no shadows, gradients, glows or decorative backdrops.
   The Waypoint compass logo keeps its own colours (brand mark).
   ========================================================================== */

:root{
  color-scheme:dark;
  --h-canvas:#090D16; --h-panel:#111827; --h-hover:#1F2937;
  --h-accent:#F59E0B; --h-on-accent:#090D16;
  --h-accent-hover:color-mix(in srgb, #F59E0B 86%, #F9FAFB);
  --h-accent-tint:rgba(245,158,11,0.13);
  --h-line:rgba(255,255,255,0.08); --h-line-input:rgba(255,255,255,0.16);
  --h-text:#F9FAFB; --h-text-2:#9CA3AF; --h-text-3:#6B7280;
  --h-display:"Newsreader", Georgia, "Times New Roman", serif;
  --h-body:"Space Grotesk", "Instrument Sans", ui-sans-serif, sans-serif;
  --h-mono:"JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* the page's own tokens, re-pointed so its existing rules follow */
  --ink:var(--h-text); --harbour:var(--h-hover); --coral:var(--h-accent); --coral-text:var(--h-accent);
  --mist:var(--h-canvas); --rule:var(--h-line); --steel:var(--h-text-2); --white:var(--h-panel);
  --on-ink:var(--h-text-2);
  --font-display:var(--h-display); --font:var(--h-body);
}

html{ background:var(--h-canvas); }
html body{ background:var(--h-canvas); color:var(--h-text); font-family:var(--h-body); }
html body :is(h1, h2, h3){ font-family:var(--h-display); color:var(--h-text); }
html body ::selection{ background:var(--h-accent-tint); color:var(--h-text); }
html body :focus-visible{ outline:2px solid var(--h-accent); outline-offset:2px; border-radius:2px; }
html body .skip{ background:var(--h-panel); color:var(--h-text); border:1px solid var(--h-line-input); }

/* ---- header ---- */
html body header.site{ background:var(--h-panel); border-bottom:1px solid var(--h-line); }
html body header.site .wrap{ padding-top:16px; padding-bottom:16px; }
html body .wordmark{ color:var(--h-text); }
html body .site-nav a{ color:var(--h-text-2); }
html body .site-nav a:hover{ color:var(--h-text); }
html body .site-nav .nav-contact{ color:var(--h-on-accent); background:var(--h-accent); border:1px solid var(--h-accent); border-radius:6px; padding:8px 16px; font-weight:600; }
html body .site-nav .nav-contact:hover{ background:var(--h-accent-hover); border-color:var(--h-accent-hover); color:var(--h-on-accent); }

/* ---- hero (left-aligned text, two photos; no decorative rings or shadows) ---- */
html body .hero{ background:var(--h-canvas); color:var(--h-text); border-bottom:1px solid var(--h-line); }
html body .hero-label{ font-family:var(--h-mono); font-size:0.78rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--h-accent); }
html body .hero-label svg polygon{ fill:var(--h-accent); }
html body .hero h1{ font-weight:500; color:var(--h-text); }
html body .hero-intro{ color:var(--h-text-2); }
html body .btn{ min-height:40px; padding:8px 16px; border-radius:6px; font-family:var(--h-body); font-weight:600; font-size:0.95rem; }
html body .btn-primary{ background:var(--h-accent); color:var(--h-on-accent); border:1px solid var(--h-accent); }
html body .btn-primary:hover{ background:var(--h-accent-hover); border-color:var(--h-accent-hover); color:var(--h-on-accent); }
html body .btn-primary:active{ background:color-mix(in srgb, #F59E0B 82%, #090D16); }
html body .btn-ghost{ background:transparent; color:var(--h-text); border:1px solid var(--h-line-input); }
html body .btn-ghost:hover{ background:var(--h-hover); border-color:var(--h-line-input); }
html body .hero-rings, html body .bwp-compass{ display:none !important; }
html body :is(.hero-people, .hero-code){ border-radius:8px; box-shadow:none; }
html body .hero-people{ border:1px solid var(--h-line); }
html body .hero-code{ border:6px solid var(--h-canvas); outline:1px solid var(--h-line); outline-offset:-1px; }
html body .hero-point circle{ fill:var(--h-canvas); stroke:var(--h-line-input); stroke-width:1; }
html body .facts{ border-top:1px solid var(--h-line); }
html body .facts div{ color:var(--h-text-2); }
html body .facts div + div{ border-left:1px solid var(--h-line); }
html body .facts strong{ color:var(--h-text); font-family:var(--h-body); font-weight:500; }
@media (max-width:860px){ html body .facts div:nth-child(n+3){ border-top:1px solid var(--h-line); } }
@media (max-width:460px){ html body .facts div + div{ border-top:1px solid var(--h-line); border-left:0; } }

/* ---- section numbers: monospaced amber labels ---- */
html body .sec-num, html body .on-ink .sec-num{ font-family:var(--h-mono); font-size:0.8rem; font-weight:500; letter-spacing:0.06em; color:var(--h-accent); }
html body .sec-num::after{ background:var(--h-line-input); opacity:1; height:1px; }

/* ---- the apps ---- */
html body .section-head p, html body .band-count{ color:var(--h-text-2); }
html body .band-count{ font-family:var(--h-mono); font-size:0.8rem; }
html body .band-head{ border-bottom:1px solid var(--h-line); }
html body .band-name{ color:var(--h-text); }
html body .filters button{ background:transparent; color:var(--h-text-2); border:1px solid var(--h-line-input); border-radius:6px; padding:6px 12px; font-family:var(--h-body); font-weight:500; }
html body .filters button:hover{ background:var(--h-hover); color:var(--h-text); border-color:var(--h-line-input); }
html body .filters button[aria-pressed="true"]{ background:var(--h-accent-tint); border-color:var(--h-accent); color:var(--h-text); }
html body .filters .count{ font-family:var(--h-mono); font-size:0.8em; opacity:1; color:var(--h-text-3); }
html body .filters button[aria-pressed="true"] .count{ color:var(--h-accent); }

/* panels sit on the canvas with hairline borders: no shadows, no lift */
html body .app{ background:var(--h-panel); background-image:none; border:1px solid var(--h-line); border-radius:8px; box-shadow:none; transform:none; transition:background-color .15s ease, border-color .15s ease; }
html body .app:hover{ background:var(--h-hover); border-color:var(--h-line-input); box-shadow:none; transform:none; }
html body .app-feature{ background-color:var(--h-panel); }
html body .app-feature:hover{ background-color:var(--h-hover); }
html body .app-icon{ background:var(--h-hover); color:var(--h-accent); border:1px solid var(--h-line); border-radius:6px; }
html body .app-wide .app-icon{ border:1px solid var(--h-line-input); background:var(--h-hover); }
html body .app-where{ color:var(--h-text-2); }
html body .app h3{ font-family:var(--h-display); font-weight:600; font-size:1.22rem; color:var(--h-text); }
html body .app p{ color:var(--h-text-2); }
html body .app-links{ border-top:1px solid var(--h-line); }
html body .app-open{ color:var(--h-text); border-bottom:1px solid var(--h-accent); font-weight:600; }
html body .app-open:hover{ color:var(--h-accent); }
html body .app-more{ color:var(--h-text-2); text-decoration-color:var(--h-line-input); }
html body .app-more:hover{ color:var(--h-text); }
html body .phone{ background:var(--h-canvas); border:1px solid var(--h-line-input); box-shadow:none; }
html body .phone::before{ background:var(--h-line-input); }
html body .app-photo-credit{ text-shadow:none; color:var(--h-text); background:rgba(9,13,22,0.72); padding:2px 6px; border-radius:4px; }
/* v158 Business abroad cards: whole photo shown (3:2, uncropped, same size on both cards); the icon sits fully below the photo, not tucked under it */
html body .app-wide .app-photo img{ display:block; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:50% 50%; }
html body .app-wide .app-top{ margin-top:24px; align-items:center; }
html body .app-wide .app-where{ padding-top:0; }
html body .app-wide .app-icon{ width:40px; height:40px; border:1px solid var(--h-line-input); }
/* v159 Be Vietnam Wise card: the "tiger economy" line sits directly under the photo (order -1 keeps it with the photo) */
html body .app-wide .app-photo-caption{ order:-1; margin:0; padding:10px 24px; border-bottom:1px solid var(--h-line); font-size:0.88rem; line-height:1.45; color:var(--h-text-2); flex-grow:0; }

/* ---- Courses band (v173): the course card with the moving globe beside it ----
   The globe is the same picture as at the top of the Be Software Architecture Wise home page, drawn by
   /software-architecture-wise/saw-hero-globe.js. It is the one approved exception to the amber-only look
   (its "Electric" colours and glow, chosen by Jason); nothing else on this page takes that exception.
   Desktop: card and globe side by side, the same height. Phones: the globe below the card. */
html body .learn-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; }
html body .learn-row .app-grid-learn{ grid-template-columns:minmax(0,1fr); }
html body .learn-art{ --d-panel:#111827; position:relative; background:var(--h-panel); border:1px solid var(--h-line); border-radius:8px; overflow:hidden; min-height:360px; }
html body .learn-art canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; }
@media (max-width:620px){
  html body .learn-row{ grid-template-columns:minmax(0,1fr); }
  html body .learn-art{ min-height:0; }
  html body .learn-art canvas{ position:static; height:auto; aspect-ratio:4 / 3; }
}
html body .band[hidden] .learn-art{ display:none; }

/* ---- language buttons (v173): English, Français, Español, Deutsch, above the header ---- */
html body .lang-bar{ background:var(--h-canvas); border-bottom:1px solid var(--h-line); }
html body .lang-bar .wrap{ display:flex; justify-content:flex-end; }
html body .lang-list{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; }
html body .lang-list a{ display:inline-flex; align-items:center; min-height:32px; padding:4px 12px; border:1px solid var(--h-line-input); border-radius:6px;
  font-family:var(--h-body); font-size:0.875rem; font-weight:500; color:var(--h-text-2); text-decoration:none; }
html body .lang-list a:hover{ color:var(--h-text); background:var(--h-hover); }
html body .lang-list a:active{ background:var(--h-panel); }
html body .lang-list a[aria-current="page"]{ color:var(--h-on-accent); background:var(--h-accent); border-color:var(--h-accent); font-weight:600; }
@media (max-width:400px){
  html body .lang-bar .wrap{ justify-content:center; }
  html body .lang-list{ gap:6px; }
  html body .lang-list a{ padding:4px 10px; }
}

/* ---- note on the translated home pages that the apps themselves are in English (v173) ---- */
html body .lang-note{ margin-top:16px; padding:10px 16px; border:1px solid var(--h-line); border-left:2px solid var(--h-accent); border-radius:0 6px 6px 0;
  background:var(--h-panel); color:var(--h-text-2); font-size:0.94rem; max-width:72ch; }
html body .lang-note a{ color:var(--h-text); text-decoration-color:var(--h-accent); text-underline-offset:3px; }
html body .lang-note a:hover{ color:var(--h-accent); }
html body .cs-n{ font-family:var(--h-mono); font-size:1.15rem; font-weight:600; color:var(--h-accent); }
html body .cs-l{ color:var(--h-text-2); }

/* ---- where we work: map, credential, figures ---- */
html body .where{ background:var(--h-canvas); color:var(--h-text); border-bottom:1px solid var(--h-line); }
html body .where-lead{ color:var(--h-text-2); }
html body .map img{ opacity:.22; }
html body .map .route{ stroke:var(--h-accent); }
html body .map .route-ghost{ stroke:var(--h-line-input); }
html body .map .city circle.dot{ fill:var(--h-accent); }
html body .map .city circle.ring{ stroke:var(--h-accent); }
html body .map .city text{ fill:var(--h-text); font-family:var(--h-body); }
html body .map .city text.sub{ fill:var(--h-text-2); }
html body .credential{ border-left:1px solid var(--h-accent); color:var(--h-text); }
html body .figures{ border-top:1px solid var(--h-line); }
html body .figures div{ border-bottom:1px solid var(--h-line); }
html body .figures div:nth-child(2n){ border-left:1px solid var(--h-line); }
html body .figures b{ font-family:var(--h-mono); font-weight:600; font-size:2rem; color:var(--h-text); }
html body .figures span{ color:var(--h-text-2); }

/* ---- latest updates ticker ---- */
html body .updates{ border-bottom:1px solid var(--h-line); }
html body .updates-head p{ color:var(--h-text-2); }
html body .tk-pause{ background:transparent; color:var(--h-text); border:1px solid var(--h-line-input); border-radius:6px; padding:6px 12px; font-family:var(--h-body); font-weight:500; }
html body .tk-pause:hover{ background:var(--h-hover); border-color:var(--h-line-input); }
html body .ticker{ background:var(--h-panel); border-top:1px solid var(--h-line); border-bottom:1px solid var(--h-line); -webkit-mask-image:none; mask-image:none; }
html body .tk-list li{ border-right:1px solid var(--h-line); }
html body .tk-meta{ color:var(--h-text-2); }
html body .tk-meta time{ font-family:var(--h-mono); font-weight:500; color:var(--h-accent); }
html body .tk-list a{ color:var(--h-text); }
html body .tk-list a:hover{ text-decoration-color:var(--h-accent); }

/* ---- our work: device frames ---- */
html body .showcase{ background:var(--h-panel); border-top:1px solid var(--h-line); }
html body .laptop-screen{ background:var(--h-canvas); border:1px solid var(--h-line-input); box-shadow:none; border-radius:8px 8px 0 0; }
html body .laptop-base{ background:var(--h-hover); border:1px solid var(--h-line-input); border-top:0; border-radius:0 0 8px 8px; }
html body .laptop-base::before{ background:var(--h-line-input); }
html body .showcase figcaption{ color:var(--h-text-2); }

/* ---- web and app design services ---- */
html body .services{ background:var(--h-panel); border-top:1px solid var(--h-line); border-bottom:1px solid var(--h-line); }
html body .services-photo{ background:var(--h-canvas); border-right:1px solid var(--h-line); }
html body .services-photo img{ box-shadow:none; border-radius:8px; border:1px solid var(--h-line); }
html body .services-body > p, html body .service-list span{ color:var(--h-text-2); }
html body .service-list{ border-top:1px solid var(--h-line); }
html body .service-list li{ border-bottom:1px solid var(--h-line); }
html body .service-list strong{ color:var(--h-text); font-weight:500; }
html body .services .btn-primary{ background:var(--h-accent); color:var(--h-on-accent); border-color:var(--h-accent); }
html body .services .btn-primary:hover{ background:var(--h-accent-hover); }
@media (max-width:860px){ html body .services-photo{ border-right:0; border-bottom:1px solid var(--h-line); } }

/* ---- our approach ---- */
html body .approach-lead, html body .approach-points span{ color:var(--h-text-2); }
html body .disclaimer{ background:var(--h-panel); border:1px solid var(--h-line); border-left:1px solid var(--h-accent); border-radius:8px; color:var(--h-text-2); }
html body .disclaimer strong{ color:var(--h-text); }
html body .approach-points li{ border-bottom:1px solid var(--h-line); }
html body .approach-points strong{ color:var(--h-text); font-weight:500; }
html body .approach-points svg polygon:first-child{ fill:var(--h-text-3); }
html body .approach-points svg polygon + polygon{ fill:var(--h-accent); }

/* ---- approach photo (v154): photo on the left, heading and points stacked on the right ---- */
html body .approach-grid{ grid-template-columns:minmax(0,360px) minmax(0,1fr); column-gap:64px; row-gap:32px; align-items:start; }
html body .approach-photo{ grid-row:1 / span 2; margin:0; }
html body .approach-photo img{ display:block; width:100%; height:auto; border:1px solid var(--h-line); border-radius:8px; background:var(--h-panel); }
html body .approach-photo figcaption{ margin-top:8px; font-family:var(--h-body); font-size:13px; line-height:1.45; color:var(--h-text-2); }
html body .approach-photo .copy-symbol{ font-size:1.15em; }
html body .approach-photo .nowrap{ white-space:nowrap; }
@media (max-width:860px){
  html body .approach-grid{ grid-template-columns:minmax(0,240px) minmax(0,1fr); column-gap:32px; }
  html body .approach-photo{ grid-row:1; }
  html body .approach-points{ grid-column:1 / -1; }
}
@media (max-width:640px){
  html body .approach-grid{ grid-template-columns:minmax(0,1fr); row-gap:32px; }
  html body .approach-photo{ grid-row:auto; }
  html body .approach-points{ grid-column:auto; }
  html body .approach-photo img{ aspect-ratio:4 / 5; object-fit:cover; object-position:50% 30%; }
}

/* ---- footer ---- */
html body footer{ background:var(--h-panel); color:var(--h-text-2); border-top:1px solid var(--h-line); }
html body .footer-brand{ color:var(--h-text); }
html body .footer-contact-label{ color:var(--h-text-2); }
html body .footer-email{ color:var(--h-text); text-decoration-color:var(--h-accent); text-decoration-thickness:1px; }
html body .footer-meta{ border-top:1px solid var(--h-line); color:var(--h-text-2); }

/* ---- cookie banner (drawn by consent.js) ---- */
html body .bwc{ background:var(--h-panel) !important; border-top:1px solid var(--h-line-input) !important; box-shadow:none !important; font-family:var(--h-body) !important; }
html body .bwc .bwc-box, html body .bwc .bwc-box p{ color:var(--h-text-2) !important; }
html body .bwc .bwc-box strong, html body .bwc .bwc-box a{ color:var(--h-text) !important; }
html body .bwc .bwc-box a{ text-decoration-color:var(--h-accent) !important; }
html body .bwc .bwc-row button{ background:transparent !important; color:var(--h-text) !important; border:1px solid var(--h-line-input) !important; border-radius:6px !important; font-family:var(--h-body) !important; font-weight:500 !important; }
html body .bwc .bwc-row button:hover{ background:var(--h-hover) !important; }
html body .bwc .bwc-row button:focus-visible{ outline:2px solid var(--h-accent) !important; }

/* ---- no hover lifts or drop shadows anywhere on the page ---- */
@media (hover:hover){ html body .app:hover{ transform:none; box-shadow:none; } }

/* ---- print stays black on white ---- */
@media print{
  html, html body{ background:#fff !important; color:#000 !important; }
  html body :is(header.site, .hero, .where, .services, .services-photo, .showcase, .lang-bar, footer, .app, .ticker){ background:#fff !important; color:#000 !important; }
  html body :is(h1, h2, h3, strong, .app-open, .tk-list a){ color:#000 !important; }
}

/* ---- German home page (v173): the headline's first line is longer in German, so it is set a little smaller
   to keep "Gut informiert." on one line beside the photos on a computer ---- */
@media (min-width:861px){ html[lang="de"] body .hero h1{ font-size:clamp(2.6rem,5.2vw,4.25rem); } }

/* v175 (11 November 2026): Pause / Play button in the corner of the Courses-band globe (added by saw-hero-globe.js,
   the same button as on the Be Software Architecture Wise home page). */
html body .learn-art .saw-globe-btn{ position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; margin:0; background:var(--h-canvas); color:var(--h-text); border:1px solid var(--h-line-input); border-radius:6px; cursor:pointer; opacity:.85; }
html body .learn-art .saw-globe-btn:hover{ background:var(--h-hover); opacity:1; }
html body .learn-art .saw-globe-btn:active{ background:var(--h-hover); color:var(--h-accent); }
html body .learn-art .saw-globe-btn:focus-visible{ outline:2px solid var(--h-accent); outline-offset:-4px; opacity:1; }