/* Polish: the same look, sharper and richer. Loaded last on every public page, so it only adds to what
   web.css and the page stylesheets set. To see the site without it, remove its <link> in views/layouts/main.php.
   What it adds: depth (layered shadows), texture (a faint hexagon lattice, the shape of a benzene ring),
   a stronger type scale for numbers, gradient buttons, richer dark bands, hover and focus polish, and a gentle
   scroll-in where the browser supports it (nothing is hidden where it does not). */

:root {
  --shadow-sm: 0 1px 2px rgba(11, 27, 63, .05), 0 3px 10px rgba(11, 27, 63, .05);
  --shadow-md: 0 2px 4px rgba(11, 27, 63, .04), 0 14px 34px rgba(11, 27, 63, .09);
  --shadow-lg: 0 4px 10px rgba(11, 27, 63, .05), 0 30px 76px rgba(11, 27, 63, .15);
  --grad-brand: linear-gradient(135deg, #2f63f2 0%, #1a4dd8 48%, #123aa8 100%);
  --grad-text: linear-gradient(100deg, #1a4dd8 0%, #0e9fa2 100%);
  --hex-brand: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%231a4dd8'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --hex-white: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: #cfe0ff; color: var(--ink); }

/* ---- type: tighter, better balanced ---- */
body.web h1, body.web h2 { text-wrap: balance; }
body.web h1 { letter-spacing: -0.035em; }
body.web h2 { letter-spacing: -0.028em; }
body.web p, body.web li { text-wrap: pretty; }
.hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.web .w-kicker::before { width: 22px; background: linear-gradient(90deg, var(--teal), var(--brand)); }
body.web .w-night .w-kicker::before { background: linear-gradient(90deg, #5fe3e5, #8fb0ff); }

/* ---- header ---- */
body.web .wh { border-bottom-color: rgba(11, 27, 63, .07); }
body.web .wh-nav a, body.web .wh nav a { position: relative; }
body.web .wh-nav a::after, body.web .wh nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--grad-text); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
body.web .wh-nav a:hover::after, body.web .wh nav a:hover::after, body.web .wh-nav a[aria-current]::after, body.web .wh nav a[aria-current]::after, body.web .wh-nav a.active::after { transform: scaleX(1); }

/* ---- buttons ---- */
body.web .w-btn { transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease; }
body.web .w-btn-primary { background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(18, 58, 168, .3), 0 10px 24px rgba(26, 77, 216, .26); }
body.web .w-btn-primary:hover { background: linear-gradient(135deg, #3a6cf7 0%, #1f55e6 48%, #153fb8 100%); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 2px 4px rgba(18, 58, 168, .3), 0 14px 30px rgba(26, 77, 216, .34); }
body.web .w-btn-ghost { background: #fff; border-color: var(--line-2); box-shadow: var(--shadow-sm); }
body.web .w-btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-tint); transform: translateY(-1px); }
body.web .w-btn-quiet { background: transparent; border-color: transparent; color: var(--brand-ink); padding-inline: 14px; box-shadow: none; }
body.web .w-btn-quiet:hover { background: var(--brand-tint); }
body.web .w-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand); }

/* ---- hero: texture, a halo behind the molecule, bigger numbers ---- */
body.web .w-hero > .w-container { position: relative; z-index: 1; }
body.web .w-hero::before { content: ""; position: absolute; right: -6%; top: -8%; width: 64%; height: 130%; z-index: 0; pointer-events: none;
  background: var(--hex-brand) 0 0 / 56px 98px; opacity: .075;
  -webkit-mask-image: radial-gradient(closest-side at 62% 42%, #000 15%, transparent 78%); mask-image: radial-gradient(closest-side at 62% 42%, #000 15%, transparent 78%); }
body.web .w-hero-grid { position: relative; }
body.web .w-hero-grid::after { content: ""; position: absolute; right: 1%; top: 50%; width: 52%; aspect-ratio: 1; transform: translateY(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(26, 77, 216, .17), rgba(14, 159, 162, .09) 52%, transparent 74%); }
body.web .w-hero-grid > * { position: relative; z-index: 1; }
@media (max-width: 980px) { body.web .w-hero-grid::after { width: 80%; right: 10%; top: 62%; } body.web .w-hero::before { width: 100%; right: -30%; } }

body.web .w-hero-proof { border-top: 0; padding-top: 0; position: relative; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; margin-top: 52px; }
body.web .w-hero-proof::before { content: ""; position: absolute; left: 0; top: -26px; width: 64px; height: 3px; border-radius: 3px; background: var(--grad-brand); }
body.web .w-hero-proof strong { font-size: clamp(2.3rem, 4.2vw, 3.2rem); line-height: 1; font-weight: 780; letter-spacing: -0.04em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.web .w-hero-proof span { margin-top: 6px; max-width: 22ch; }
body.web .w-hero-badge { box-shadow: var(--shadow-sm); }

/* ---- cards: depth, hover, softer icon chips ---- */
body.web .door, body.web .aud-card, body.web .hm-free-tile, body.web .tr-track, body.web .mo-teaser, body.web .tr-rs-grid > div,
body.web .st-next-links a, body.web .dn-ways > div { box-shadow: var(--shadow-sm); }
body.web .door, body.web .aud-card { background: linear-gradient(180deg, #fff, #fbfcff); }
body.web .door:hover, body.web .aud-card:hover, body.web .hm-free-tile:hover { box-shadow: var(--shadow-md); }
body.web .door .ico, body.web .aud-card .ico, body.web .hm-free-tile > span, body.web .tr-rs-grid span {
  background: linear-gradient(145deg, #eef3ff, #e1f4f4); box-shadow: inset 0 0 0 1px rgba(26, 77, 216, .08); }
body.web .tr-track { background: linear-gradient(180deg, #fff, #fbfcff); }
body.web .mo-teaser { border-radius: 24px; background: linear-gradient(120deg, #fff 0%, #f5f9ff 100%); box-shadow: var(--shadow-md); }
body.web .w-faq details { box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; }
body.web .w-faq details:hover { border-color: var(--line-2); }

/* ---- the dark bands: depth instead of a flat navy ---- */
body.web .w-night { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 90% at 92% -10%, rgba(14, 159, 162, .26), transparent 62%), radial-gradient(55% 80% at -5% 110%, rgba(47, 99, 242, .34), transparent 62%), var(--night); }
body.web .w-night::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--hex-white) 0 0 / 56px 98px; opacity: .045;
  -webkit-mask-image: linear-gradient(115deg, transparent 10%, #000 55%, transparent 95%); mask-image: linear-gradient(115deg, transparent 10%, #000 55%, transparent 95%); }
body.web .w-goal { background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .14); transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; }
body.web .w-goal:hover { transform: translateY(-4px); background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06)); border-color: rgba(95, 227, 229, .45); box-shadow: 0 20px 44px rgba(0, 0, 0, .28); }
body.web .w-goal .ico { background: linear-gradient(145deg, rgba(95, 227, 229, .22), rgba(255, 255, 255, .08)); }

body.web .w-cta { box-shadow: 0 30px 70px rgba(26, 77, 216, .28); }
body.web .w-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hex-white) 0 0 / 56px 98px; opacity: .07;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%); mask-image: linear-gradient(100deg, transparent 30%, #000 100%); }

/* ---- footer ---- */
body.web .wf { position: relative; background: radial-gradient(50% 70% at 100% 0%, rgba(14, 159, 162, .16), transparent 60%), var(--night); }
body.web .wf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #2f63f2, #0e9fa2 55%, #f2a73b); }

/* ---- scroll-in: where the browser can do it without scripts, sections rise gently into view ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
    body.web .w-head, body.web .doors, body.web .hm-free-grid, body.web .tr-tracks, body.web .w-goals, body.web .mo-teaser, body.web .w-faq,
    body.web .w-cta, body.web .ct-grid, body.web .tr-rs-grid, body.web .st-steps, body.web .pt-strip, body.web .w-hero-proof {
      animation: rise-in linear both; animation-timeline: view(); animation-range: entry 4% entry 38%;
    }
  }
}

/* Never hide content from print, or from anyone who has asked the browser for no animation. */
@media print { body.web * { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* the free-tools strip gets its own soft band, so the page alternates instead of running white into white */
body.web .hm-free { background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
body.web .w-section.aud-doors-wrap { background: #fff; }

/* The molecule viewers can be turned from the keyboard, so they can take focus. A mouse click or a tap must not draw a frame
   around them, only tabbing to them with the keyboard does. */
canvas[data-molcanvas-view] { outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
canvas[data-molcanvas-view]:focus { outline: none; }
canvas[data-molcanvas-view]:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; border-radius: 14px; }


/* =====================================================================================================
   Resources: switching between the tabs, and a smoother feel everywhere
   ===================================================================================================== */

/* The tab bar stays under the header while you scroll, so any tool is one tap away. On a phone it swipes sideways, with a soft fade
   at the edge that still has more tabs behind it, and the current tab is brought to the middle (smooth.js). */
.sub-nav { position: sticky; top: var(--header-h); z-index: 90; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .2s ease; }
.sub-nav.is-stuck { box-shadow: 0 8px 22px rgba(11, 27, 63, .08); }
.sub-nav ul { padding: 11px 0; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.sub-nav li { scroll-snap-align: center; }
.sub-nav::before, .sub-nav::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 38px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.sub-nav::before { left: 0; background: linear-gradient(90deg, #fff 18%, rgba(255, 255, 255, 0)); }
.sub-nav::after { right: 0; background: linear-gradient(270deg, #fff 18%, rgba(255, 255, 255, 0)); }
.sub-nav.can-left::before, .sub-nav.can-right::after { opacity: 1; }
.sub-nav a { transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .2s ease, transform .12s ease; }
.sub-nav a:active { transform: scale(.96); }
@media (max-width: 520px) { .sub-nav ul { gap: 6px; } }

/* Pages change with a soft cross-fade instead of a white flash. The header and the tab bar stay put while the page under them changes.
   Browsers that cannot do this simply load the next page as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .wh { view-transition-name: site-header; }
  .sub-nav { view-transition-name: sub-nav; }
  ::view-transition-old(root) { animation: 140ms ease-out both vt-fade-out; }
  ::view-transition-new(root) { animation: 220ms ease-out both vt-fade-in; }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }
}

/* Touch: no grey flash, no double-tap delay, and a small press so a tap always feels received. */
a, button, summary, [role="button"], label[for], select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.w-btn, .sh-btn, .res-links a, .mq-btn, .mq-set, .mq-opt, .door, .aud-card { transition-property: transform, box-shadow, background-color, border-color, color; transition-duration: .14s; transition-timing-function: ease; }
.w-btn:active, .sh-btn:active, .mq-btn:active:not(:disabled), .mq-set:active { transform: scale(.97); }
.res-links a:active, .door:active, .aud-card:active { transform: scale(.985); }

/* Resources board: panels rise in as they arrive, lift on hover, and the search box shows when it is in use. */
.res-panel { transition: transform .22s ease, box-shadow .22s ease; }
.res-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.res-links a { transition-property: transform, background-color, border-color; }
.res-search { transition: box-shadow .2s ease, border-color .2s ease; }
.res-search:focus-within { box-shadow: 0 0 0 4px rgba(26, 77, 216, .14), var(--shadow-md); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body.web .res-panel, body.web .res-empty, body.web .pz-top, body.web .mq-card { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 2% entry 30%; }
  }
}
@media (prefers-reduced-motion: reduce) { .sub-nav, .sub-nav a, .res-panel { transition: none; } }

/* anchors must not hide under the header and the tab bar */
html:has(.sub-nav) { scroll-padding-top: calc(var(--header-h) + 74px); }

/* =====================================================================================================
   Sharing: Facebook and Messenger come first and are the biggest buttons, everywhere
   ===================================================================================================== */
.sh-big { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 52px; font-size: 1rem; font-weight: 750; box-shadow: 0 8px 20px rgba(11, 27, 63, .16); }
.sh-big svg { width: 22px; height: 22px; }
.sh-messenger { background: linear-gradient(135deg, #00b2ff 0%, #006aff 52%, #a033ff 86%, #ff5280 100%); }
.sh-mini a[data-messenger] { color: #0a7cff; }
.ch-chip.ch-fb { color: #fff; background: #1877f2; border-color: #1877f2; }
.ch-chip.ch-ms { color: #fff; background: linear-gradient(135deg, #00b2ff, #006aff 55%, #a033ff); border-color: transparent; }
.ch-share .ch-chip.ch-fb:hover, .ch-share .ch-chip.ch-ms:hover { filter: brightness(1.08); border-color: transparent; }
.pz-share .pz-fb, .pz-share .pz-ms { color: #fff; border-color: transparent; }
.pz-share .pz-fb { background: #1877f2; }
.pz-share .pz-ms { background: linear-gradient(135deg, #00b2ff, #006aff 55%, #a033ff); }
.pz-share .pz-fb svg, .pz-share .pz-ms svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* The message bar for share actions (copied, Messenger did not open ...). */
.c2c-toast { position: fixed; left: 50%; bottom: 22px; z-index: 9800; max-width: min(92vw, 520px); transform: translate(-50%, 16px); padding: 12px 18px; border-radius: 14px; background: #0b1b3f; color: #fff; font-weight: 650; line-height: 1.5; text-align: center; box-shadow: 0 16px 40px rgba(11, 27, 63, .35); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.c2c-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .c2c-toast { transition: none; } }

/* Follow us on Facebook / Message us on Messenger */
.connect-wrap { padding: 8px 0 56px; }
.connect { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: 26px; color: #fff; background: radial-gradient(60% 140% at 100% 0, rgba(14, 159, 162, .42), transparent 62%), linear-gradient(135deg, #0b1b3f, #173b9a); box-shadow: 0 20px 50px rgba(11, 27, 63, .25); }
.connect-copy h2 { margin: 0 0 6px; color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.connect-copy p { margin: 0; max-width: 52ch; color: #cdd8f2; line-height: 1.55; }
.connect-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.connect-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 16px; color: #fff; font-weight: 780; font-size: 1.02rem; text-decoration: none; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transition: transform .14s ease, filter .14s ease; }
.connect-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.connect-btn:active { transform: scale(.97); }
.connect-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.connect-btn svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.cb-fb { background: #1877f2; }
.cb-ms { background: linear-gradient(135deg, #00b2ff 0%, #006aff 52%, #a033ff 86%, #ff5280 100%); }
@media (max-width: 640px) { .connect { padding: 22px 20px; } .connect-actions { width: 100%; } .connect-btn { flex: 1 1 100%; } }
.mq .connect-wrap { padding-top: 34px; }

/* ---------- smoother on phones and touch screens ----------
   The sticky header and the tab bar blurred whatever scrolled behind them. On a phone that is one of the most expensive things a page can do
   (the whole strip behind them is re-blurred on every scroll frame), and the bars are already 94% white, so the blur is barely visible. Here they are
   simply solid. The decorative blurred glow in the hero is dropped for the same reason. */
@media (max-width: 900px), (pointer: coarse) {
  .wh, .wh.is-scrolled, .site-header, .sub-nav, body.web .sub-nav, .clock-state, .menubar, .widget, .dock {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .wh { background: rgb(250, 251, 253); }
  .wh.is-scrolled { background: #fff; }
  .sub-nav { background: rgba(255, 255, 255, .985); }
  .hero-aurora { display: none; }
}
/* the two scrolling strips (partners, marquee) stop while off screen: see web.js */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }