:root {
  --teal: #1F5C4E;
  --teal-dark: #163F35;
  --teal-light: #2C7562;
  --ice: #E8F1EE;
  --gold: #C99A3B;
  --gold-light: #E3BE6E;
  --dark: #1E1E1E;
  --grey: #6B6B6B;
  --grey-light: #F4F6F5;
  --white: #FFFFFF;
  /* Vivid decorative accents — for background energy (hero mesh,
     gradient text, glows), never for buttons/nav/text that already use
     --teal/--gold everywhere else on the site. Kept separate on purpose:
     boosting saturation here can't quietly shift contrast anywhere an
     existing element already depends on those tokens. */
  --vivid-emerald: #00C896;
  --vivid-violet: #7B5CFF;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(22, 63, 53, 0.10);
  --shadow-lg: 0 24px 60px rgba(22, 63, 53, 0.18);
  --max: 1120px;

  /* Category accents — used to give the catalog visual variety instead of
     every product looking the same teal/gold regardless of type. */
  --cat-general: #1F5C4E; --cat-general-bg: #E8F1EE;
  --cat-dev:     #2B6CB0; --cat-dev-bg:     #E4EEF7;
  --cat-design:  #C2622D; --cat-design-bg:  #F7E8DE;
  --cat-accounting: #6B46C1; --cat-accounting-bg: #EDE7F9;
  --cat-deck:    #B83280; --cat-deck-bg:    #F7E1EE;
  --cat-xlsx:    #2F855A; --cat-xlsx-bg:    #E3F1E9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; overflow-y: scroll; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: 'Heebo', Arial, sans-serif;
  color: var(--dark);
  background: var(--white);
  direction: rtl;
  line-height: 1.6;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.03); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3334%); }
}

/* ---------- Scroll-reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Marquee strip ---------- */
/* direction:ltr here is load-bearing, not cosmetic: .marquee-track is
   wider than its container (width:max-content) and animates via
   translateX. In the page's normal RTL flow an over-wide block like this
   sits flush against the RIGHT edge at rest with nothing buffered beyond
   it — so as it slides left there's no queued content to reveal, and the
   strip runs empty well before the loop point. Forcing ltr makes it sit
   flush-left with the extra copies buffered off-screen to the right,
   which is what the left-scrolling animation actually needs. */
.marquee { overflow: hidden; background: var(--teal-dark); padding: 12px 0; direction: ltr; }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-item {
  display: flex; align-items: center; gap: 10px; color: #DCEBE5; font-size: 13.5px; font-weight: 600;
  padding: 0 28px; white-space: nowrap;
}
.marquee-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #ECECEC;
}
/* When the "my content" rail is mounted, body gets a margin-inline-start
   to make room for it (see body.has-sites-rail below) — but header.site
   is a normal body child too, so without this it would get pushed along
   with everything else, landing the pinned .brand 220px short of the true
   browser edge instead of flush against it. Counteract exactly that much
   margin + width so the header (and the brand pinned inside it) always
   spans the full viewport, with the rail sitting visually below it. */
body.has-sites-rail header.site {
  margin-inline-start: calc(-1 * var(--rail-w, 220px));
  width: calc(100% + var(--rail-w, 220px));
}
/* .nav-links is the only thing that actually lives in .nav's own centered
   flex flow now — both .brand and .nav-end-group (login + catalog CTA)
   are pinned straight to the true edges of header.site instead, the same
   reasoning as the brand: "first/last inside the centered, max-width-capped
   bar" still leaves visible empty margin past it on any screen wider than
   --max. That leaves justify-content:center free to actually center the
   links on the real viewport instead of just within the bar. The
   padding-inline-* reserve room on both sides so links never run under
   either pinned group. */
.nav {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 24px; padding-inline-start: 190px; padding-inline-end: 210px; max-width: var(--max); margin: 0 auto;
}
.brand {
  position: absolute; top: 50%; inset-inline-start: 24px; transform: translateY(-50%);
  font-size: 23px; font-weight: 800; color: var(--teal-dark); display: flex; align-items: center; gap: 11px; letter-spacing: -.01em;
}
.nav-end-group {
  position: absolute; top: 50%; inset-inline-end: 24px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 14px;
}
@media (max-width: 860px) {
  .nav { justify-content: space-between; padding-inline-end: 24px; }
  .nav-end-group { position: static; transform: none; }
}
.brand-badge {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(145deg, var(--teal), var(--gold));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px rgba(31, 92, 78, .3);
}
.brand .brand-mark { width: 20px; height: 20px; flex: none; }
.brand .brand-mark .bm-face, .brand .brand-mark .bm-fold { fill: #fff; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--dark); opacity: .85; padding: 6px 0; border-bottom: 2px solid transparent; transition: opacity .15s ease, border-color .15s ease; }
.nav-links a:hover, .nav-links a.active { opacity: 1; border-color: var(--gold); }
.nav-cta {
  background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); padding: 10px 22px;
  border-radius: 30px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(22,63,53,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22,63,53,.3); }
.nav-login { color: var(--grey); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 92px; transition: color .15s ease; }
.nav-login.nav-login-pending { visibility: hidden; }
.nav-login:hover { color: var(--teal-dark); }
.nav-login-email { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }

/* Shared "switchable list" widget. .my-sites-rail itself is the global
   "my content" panel (js/my-panel.js) mounted on every logged-in page —
   a real fixed sidebar flush to the browser edge, not a card floating
   inside the centered .container (that read as "a card with buttons,"
   not as page chrome, and could never actually reach the edge). The
   plain .my-sites-list/.my-site-row styling below is reused as-is by
   account-settings.html's own content dashboard, which isn't a fixed
   panel — just a list inside its own card there. */
.my-sites-rail {
  position: fixed; top: var(--header-h, 70px); bottom: 0; inset-inline-start: 0;
  width: var(--rail-w, 220px); overflow: hidden; background: var(--grey-light);
  border-inline-end: 1px solid #E2E7E4; z-index: 30;
  display: flex; flex-direction: column;
}
/* padding, not margin: body itself must stay full viewport width (its
   own overflow-x:clip above clips at ITS OWN border box) so header.site's
   counter-negative-margin trick below actually has room to reach the true
   edge instead of getting clipped at a shrunk body box. */
body.has-sites-rail { padding-inline-start: var(--rail-w, 220px); }
@media (max-width: 900px) {
  .my-sites-rail { position: static; width: 100%; height: auto; border-inline-end: none; border-bottom: 1px solid #E2E7E4; margin-bottom: 16px; }
  body.has-sites-rail { padding-inline-start: 0; }
  body.has-sites-rail header.site { margin-inline-start: 0; width: 100%; }
}

/* Collapsed: --rail-w drops to 0 (see js/my-panel.js), which alone already
   frees up the margin/header math above — this just hides the now-empty
   strip's border/shadow and swaps in the little pinned tab to reopen it. */
body.rail-collapsed .my-sites-rail { border-inline-end: none; box-shadow: none; }
.my-panel-reopen {
  display: none; position: fixed; top: calc(var(--header-h, 70px) + 14px); inset-inline-start: 14px; z-index: 30;
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid #E2E7E4; background: var(--white);
  align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
  color: var(--teal-dark); transition: transform .15s ease, background .15s ease;
}
.my-panel-reopen:hover { background: var(--ice); transform: translateY(-1px); }
.my-panel-reopen svg { transform: rotate(180deg); }
body.rail-collapsed .my-panel-reopen { display: flex; }
@media (max-width: 900px) { .my-panel-reopen { display: none !important; } }

/* Drag handle on the rail's content-facing edge to resize --rail-w.
   A plain 6px hit target would be too thin to grab reliably, so it's
   widened with a transparent halo and only the 2px center line paints. */
.my-panel-resize-handle {
  position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 9px;
  cursor: ew-resize; z-index: 31; background: transparent;
}
.my-panel-resize-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 4px; width: 2px;
  background: transparent; transition: background .15s ease;
}
.my-panel-resize-handle:hover::after, .my-panel-resize-handle.dragging::after { background: var(--teal-light); }
@media (max-width: 900px) { .my-panel-resize-handle { display: none; } }

/* The rail is fixed to the same physical edge as the cookie notice and the
   feedback/chat FABs, on a lower z-index — without this, any of them
   painting on top silently hides the rail's account/logout footer (the
   cookie notice, shown by default to new visitors, did exactly that).
   Push them clear of the rail's width whenever it's actually fixed
   (i.e. above the same 900px breakpoint the rail itself uses). */
body.has-sites-rail .cookie-notice { inset-inline-start: var(--rail-w, 220px); }
@media (min-width: 901px) {
  body.has-sites-rail .fab-chat,
  body.has-sites-rail .chat-panel { right: calc(var(--rail-w, 220px) + 24px); }
}
@media (max-width: 900px) {
  body.has-sites-rail .cookie-notice { inset-inline-start: 0; }
}

/* The rail carries its own account control (bottom) — once it's
   mounted, the header's copy is a redundant second account menu. The
   header's own brand (icon + "DeskKit" wordmark) stays exactly as on
   every other page — it's the one and only logo; the rail doesn't
   repeat it. */
body.has-sites-rail .nav-account-wrap { display: none; }

.my-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding-inline-end: 8px; }
.my-panel-subtitle { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--teal-dark); padding: 18px 16px 6px; }
.my-panel-collapse {
  width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
  color: var(--grey); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.my-panel-collapse:hover { background: var(--white); color: var(--teal-dark); }
.my-panel-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; }
.my-panel-account { flex-shrink: 0; position: relative; border-top: 1px solid #E2E7E4; background: var(--grey-light); }
.my-panel-account-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 14px 16px;
  font-family: inherit; color: var(--dark); transition: background .15s ease;
}
.my-panel-account-toggle:hover { background: var(--white); }
.my-panel-account-email { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--grey); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Same dropdown as the header's account menu (js/nav-auth.js) — the
   rail just opens it upward since its trigger sits at the very bottom. */
.nav-account-dropdown.dropup { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline: 8px; min-width: 0; }

.my-panel-section { margin-bottom: 4px; }
.my-panel-section-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 12px 6px 8px; font-family: inherit;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--teal-dark);
}
.my-panel-section-head svg { transition: transform .15s ease; }
.my-panel-section.collapsed .my-panel-section-head svg { transform: rotate(180deg); }
.my-panel-section.collapsed .my-panel-section-list { display: none; }
.my-sites-list, .my-panel-section-list { display: flex; flex-direction: column; gap: 2px; }
.my-site-row { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--dark); transition: background .15s ease; }
.my-site-row:hover { background: var(--white); }
.my-site-row.active { background: var(--ice); box-shadow: inset 2px 0 0 var(--teal); }
.my-site-row-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.my-site-row-tpl { display: block; font-size: 11px; color: var(--grey); line-height: 1.4; }

/* The rail's own row treatment — a small thumbnail + text, closer to a
   card than a plain link, so "my content" reads as things you made
   rather than a menu. Kept separate from .my-site-row above (still
   used as-is by account-settings.html's own dashboard) since this one
   needs the extra thumbnail element the simpler list doesn't have. */
.my-panel-card {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--dark);
  transition: background .15s ease;
}
.my-panel-card:hover { background: var(--white); }
.my-panel-card.active { background: var(--ice); box-shadow: inset 2px 0 0 var(--teal); }
.my-panel-card-thumb {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--ice); color: var(--teal); display: flex; align-items: center; justify-content: center;
}
.my-panel-card-thumb-cv { background: #FBF2E0; color: var(--gold); }
.my-panel-card-thumb-quote { background: #EDE7F9; color: #6B46C1; }
.my-panel-card-thumb-schedule { background: #E3F0FB; color: #1D6FA5; }
.my-panel-card-info { min-width: 0; }
.my-panel-card-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-panel-card-tpl { display: block; font-size: 11px; color: var(--grey); line-height: 1.4; }

/* Not-built-yet placeholder: reads as a plain line of text with one
   inline link at the end, not a whole row that lights up like a button. */
.my-panel-empty-row { padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.4; }
.my-panel-empty-link { color: var(--cat-dev); text-decoration: none; }
.my-panel-empty-link:hover { text-decoration: underline; }

/* A delete button sits beside the link (never inside it, so its click
   never also fires the link's navigation) — used both by the global
   panel and account-settings.html's own content dashboard. */
.my-content-row { display: flex; align-items: center; gap: 4px; }
.my-content-row .my-site-row { flex: 1; min-width: 0; }
.my-content-delete-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--grey);
  padding: 8px; border-radius: 8px; opacity: .6; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.my-content-delete-btn:hover { opacity: 1; background: #FBEAEA; color: #B23333; }
.my-content-delete-btn:disabled { opacity: .3; cursor: default; }
.nav-account-wrap { position: relative; display: inline-flex; }
.nav-account-dropdown {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  background: var(--white); border: 1px solid #EAEDEC; border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 14px; min-width: 220px; z-index: 500;
}
.nav-account-email { font-size: 12.5px; color: var(--grey); direction: ltr; text-align: end; margin-bottom: 10px; word-break: break-all; }
.nav-account-dropdown button, .nav-account-dropdown a.nav-account-settings {
  display: block; box-sizing: border-box; width: 100%; background: none; border: 1px solid #DADFDD; border-radius: 8px; padding: 8px 12px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--dark); text-align: center; text-decoration: none;
}
/* The block display above outranks the browser's own [hidden]{display:none}
   (one more class in specificity), so the logout button stayed visibly
   showing through its own confirm step without this. */
.nav-account-dropdown [hidden] { display: none; }
.nav-account-settings { margin-bottom: 8px; }
.nav-account-settings:hover { background: var(--grey-light); }
.nav-account-dropdown .nav-account-logout { color: #B23333; border-color: #F0D9D9; }
.nav-account-dropdown .nav-account-logout:hover { background: #FBEEEE; }
.nav-account-confirm p { font-size: 13px; margin: 0 0 10px; text-align: center; color: var(--dark); }
.nav-account-confirm-row { display: flex; gap: 8px; }
.nav-confirm-yes { background: #B23333 !important; color: #fff !important; border-color: #B23333 !important; }
.nav-confirm-no { background: var(--grey-light) !important; }

/* ---------- Auth gate overlay ---------- */
.auth-gate-overlay {
  position: fixed; inset: 0; background: var(--white); z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
}
.auth-gate-spinner {
  width: 32px; height: 32px; border: 3px solid var(--ice); border-top-color: var(--teal);
  border-radius: 50%; animation: auth-gate-spin .8s linear infinite;
}
@keyframes auth-gate-spin { to { transform: rotate(360deg); } }
.burger { display: none; font-size: 26px; background: none; border: none; cursor: pointer; color: var(--teal-dark); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--teal-dark), var(--teal) 65%, var(--teal-light) 130%);
  color: var(--white);
  padding: 100px 24px 120px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(480px 480px at 12% 15%, rgba(201,154,59,.32), transparent 65%),
    radial-gradient(420px 420px at 88% 85%, rgba(0,200,150,.3), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(123,92,255,.2), transparent 55%);
}
.hero::after {
  content: "";
  position: absolute; z-index: -1; inset-inline-end: -80px; top: -90px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201,154,59,.35), rgba(201,154,59,0) 70%);
  animation: floatSlow 9s ease-in-out infinite;
}
.hero h1 {
  font-size: 46px; font-weight: 700; margin: 0 0 18px; max-width: 780px; margin-inline: auto;
  letter-spacing: -.01em; animation: fadeUp .6s ease both;
}
.hero p.lead { font-size: 18px; color: #DCEBE5; max-width: 620px; margin: 0 auto 34px; animation: fadeUp .6s .08s ease both; }
.hero .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; animation: fadeUp .6s .16s ease both; }

/* ---------- Homepage hero (asymmetric, own layout — not the shared
   centered .hero used by inner pages) ---------- */
.home-hero {
  position: relative; overflow: hidden; padding: 96px 24px 80px;
  background:
    radial-gradient(ellipse 820px 560px at 90% -12%, rgba(0,200,150,.28), transparent 58%),
    radial-gradient(ellipse 640px 480px at -8% 100%, rgba(201,154,59,.28), transparent 58%),
    radial-gradient(ellipse 500px 400px at 40% 40%, rgba(123,92,255,.10), transparent 60%),
    var(--ice);
}
.home-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.home-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid #DCE9E4;
  padding: 7px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 700; color: var(--teal-dark); margin-bottom: 22px;
}
.home-hero h1 { font-size: 54px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 20px; color: var(--dark); }
.home-hero h1 .accent {
  background: linear-gradient(90deg, var(--vivid-emerald), var(--teal-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero p.lead { font-size: 17px; color: var(--grey); max-width: 460px; margin: 0 0 30px; }
.home-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-outline-dark { background: transparent; color: var(--teal-dark); border: 1.5px solid var(--teal-dark); }
.btn-outline-dark:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-2px); }

/* A big circle that cycles through real template previews — reads as
   "here's what you'll get" across all the tools at a glance, instead of
   one static generic mockup. The glow sits behind and larger than the
   circle (a soft halo, not the fill), the circle itself clips the actual
   preview images edge to edge. */
.home-hero-visual { position: relative; height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.hhv-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 420px; height: 420px; border-radius: 50%; filter: blur(8px);
  background: radial-gradient(circle at 32% 32%, rgba(0,200,150,.45), rgba(201,154,59,.4) 65%, rgba(123,92,255,.25) 100%);
}
.hhv-circle {
  position: relative; width: 340px; height: 340px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 26px 60px rgba(15, 51, 43, .22); border: 6px solid var(--white); flex-shrink: 0;
}
.hhv-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.hhv-slide.active { opacity: 1; animation: hhvKenBurns 6.5s ease-in-out infinite alternate; }
@keyframes hhvKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hhv-dots { display: flex; gap: 7px; }
.hhv-dots span { width: 7px; height: 7px; border-radius: 50%; background: #D7DEDB; transition: background .3s ease, width .3s ease; }
.hhv-dots span.active { background: var(--teal); width: 20px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .hhv-slide.active { animation: none; }
}
@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 36px; }
  .home-hero-visual { height: 320px; margin-top: 10px; }
  .hhv-glow { width: 320px; height: 320px; }
  .hhv-circle { width: 250px; height: 250px; }
}
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 30px;
  font-weight: 600; font-size: 15px; cursor: pointer; border: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark);
  box-shadow: 0 10px 26px rgba(201,154,59,.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(201,154,59,.45); }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.6); }
.btn-outline:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-teal { background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); box-shadow: 0 8px 20px rgba(22,63,53,.2); }
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22,63,53,.3); }
.btn-disabled, .btn-disabled:hover {
  pointer-events: none; opacity: .55; box-shadow: none; transform: none; cursor: default;
}

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head .kicker {
  display: inline-block; color: var(--white);
  background: linear-gradient(120deg, var(--vivid-emerald), var(--teal-dark));
  box-shadow: 0 6px 16px rgba(0,200,150,.28);
  font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 6px;
}
.section-head h2 { font-size: 34px; margin: 12px 0 12px; color: var(--teal-dark); letter-spacing: -.01em; }
.section-head p { color: var(--grey); font-size: 16px; }
.bg-ice { background: linear-gradient(180deg, var(--ice), #F7FBF9); }

/* ---------- Category tabs ---------- */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
.tab {
  background: var(--white); border: 1.5px solid #DDE4E1; color: var(--dark);
  padding: 9px 20px; border-radius: 30px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.tab:hover { border-color: var(--teal); transform: translateY(-1px); }
.tab.active { background: linear-gradient(135deg, var(--teal), var(--teal-light)); border-color: var(--teal); color: var(--white); }

.tabs-sub { margin-bottom: 34px; }
.tabs-sub .tab { font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-color: #E7EBE9; color: var(--grey); }
.tabs-sub .tab.active { background: var(--ice); color: var(--teal-dark); border-color: var(--teal-light); }

/* ---------- Catalog search (products/sites/quote-app template pickers) ---------- */
.tpl-search-row { display: flex; justify-content: center; margin-bottom: 24px; }
.tpl-search-wrap { position: relative; width: 100%; max-width: 380px; }
.tpl-search-wrap svg {
  position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--grey); pointer-events: none;
}
.tpl-search {
  width: 100%; box-sizing: border-box; padding: 11px 16px 11px 40px; padding-inline-start: 40px; padding-inline-end: 16px;
  border: 1.5px solid #DDE4E1; border-radius: 30px; font-family: inherit; font-size: 14px;
  background: var(--white); transition: border-color .15s ease, box-shadow .15s ease;
}
.tpl-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,92,78,.1); }
.tpl-search::placeholder { color: var(--grey); }
.tpl-search-empty { grid-column: 1/-1; text-align: center; color: var(--grey); font-size: 14px; padding: 30px 0; }

/* ---------- Product grid / cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.grid-4 { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid #EEF2F0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 4px;
  background: linear-gradient(90deg, var(--cat-c, var(--gold)), var(--vivid-emerald));
  opacity: 0; transition: opacity .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { opacity: 1; }
.card .thumb { background: var(--cat-bg, var(--ice)); padding: 14px; height: 170px; display: flex; align-items: center; justify-content: center; }
.card .thumb img { border-radius: 6px; height: 100%; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; transition: transform .3s ease; }
.card:hover .thumb img { transform: scale(1.03); }
.card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .tag { align-self: flex-start; background: var(--cat-bg, var(--ice)); color: var(--cat-c, var(--teal-dark)); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.card .tag-free { background: transparent; color: var(--teal); padding: 3px 0; }
.card[data-cat="general"] { --cat-c: var(--cat-general); --cat-bg: var(--cat-general-bg); }
.card[data-cat="dev"] { --cat-c: var(--cat-dev); --cat-bg: var(--cat-dev-bg); }
.card[data-cat="design"] { --cat-c: var(--cat-design); --cat-bg: var(--cat-design-bg); }
.card[data-cat="accounting"] { --cat-c: var(--cat-accounting); --cat-bg: var(--cat-accounting-bg); }
.card[data-cat="deck"] { --cat-c: var(--cat-deck); --cat-bg: var(--cat-deck-bg); }
.card[data-cat="xlsx"] { --cat-c: var(--cat-xlsx); --cat-bg: var(--cat-xlsx-bg); }
.card h3 { margin: 0; font-size: 16.5px; color: var(--dark); line-height: 1.35; }
.card .card-cta { margin-top: auto; text-align: center; padding: 9px 20px; font-size: 13.5px; }
/* Small "new" indicator as a corner dot over the thumbnail, instead of a
   full pill taking up its own line in the card body — keeps every card's
   body starting at the same point regardless of whether it happens to be
   new, which is what actually keeps a row of cards' CTA buttons aligned. */
.card-new-badge {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-light), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; box-shadow: 0 4px 10px rgba(22,63,53,.25);
}
.price { font-size: 16px; font-weight: 700; color: var(--teal-dark); }
.price small { font-size: 13px; color: var(--grey); font-weight: 400; }

/* ---------- Feature list (icon rows) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.feature { text-align: center; padding: 26px 18px; border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,200,150,.18), rgba(31,92,78,.14));
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  font-size: 24px; color: var(--teal-dark);
  box-shadow: inset 0 0 0 1px rgba(31,92,78,.1);
}
.feature:nth-child(2) .icon { background: linear-gradient(135deg, var(--cat-dev-bg), #D2E3F2); color: var(--cat-dev); box-shadow: inset 0 0 0 1px rgba(43,108,176,.1); }
.feature:nth-child(3) .icon { background: linear-gradient(135deg, var(--cat-design-bg), #F2DACB); color: var(--cat-design); box-shadow: inset 0 0 0 1px rgba(194,98,45,.1); }
.feature h4 { margin: 0 0 8px; font-size: 17px; }
.feature p { margin: 0; color: var(--grey); font-size: 14px; }

/* ---------- Coming soon banner ---------- */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--teal-dark), var(--teal) 80%);
  color: var(--white); border-radius: var(--radius);
  padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.banner::before {
  content: ""; position: absolute; z-index: -1; inset-inline-start: -40px; bottom: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,154,59,.35), transparent 70%);
}
.banner::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -50px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,150,.3), transparent 70%);
}
.banner h3 { margin: 0 0 6px; font-size: 22px; }
.banner p { margin: 0; color: #CFE3DC; font-size: 14px; max-width: 480px; }
.badge-free { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-inline-start: 10px; }
.badge-new { background: linear-gradient(135deg, var(--teal-light), var(--teal)); color: var(--white); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-inline-start: 10px; }

/* ---------- Paid-product spotlight (site-builder promo) ---------- */
.spotlight {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(circle at 15% 15%, rgba(201,154,59,.3), transparent 50%),
    radial-gradient(circle at 92% 90%, rgba(255,255,255,.1), transparent 45%),
    linear-gradient(135deg, var(--teal-dark), var(--teal) 85%);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 48px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center;
}
.spotlight-kicker { color: var(--gold-light); font-weight: 700; font-size: 13px; letter-spacing: .04em; margin-bottom: 10px; }
.spotlight h2 { color: var(--white); font-size: 30px; margin: 0 0 14px; }
.spotlight p { color: #CFE3DC; font-size: 15px; margin: 0 0 20px; max-width: 460px; }
.spotlight-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.spotlight-list li { color: var(--white); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.spotlight-list li::before { content: "✓"; color: var(--gold-light); font-weight: 700; }
.spotlight-visual {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
  padding: 26px; color: var(--white);
}
.spotlight-visual .tpl-chip { display: inline-block; background: rgba(255,255,255,.1); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; margin: 0 6px 10px 0; }
.spotlight-visual .price-tag { font-size: 30px; font-weight: 800; color: var(--gold-light); margin: 10px 0 4px; }
.spotlight-visual .price-note { font-size: 13px; color: #CFE3DC; }
@media (max-width: 760px) {
  .spotlight { grid-template-columns: 1fr; padding: 32px 22px; }
}

/* ---------- Product detail page ---------- */
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 60px 0; }
.product-hero .thumb { background: linear-gradient(160deg, var(--ice), #F7FBF9); border-radius: var(--radius); padding: 28px; display:flex; align-items:center; justify-content:center; }
.product-hero .thumb img { border-radius: 8px; box-shadow: var(--shadow-lg); }
.breadcrumb { font-size: 13px; color: var(--grey); margin-bottom: 18px; }
.breadcrumb a { color: var(--teal); }
.product-hero h1 { font-size: 34px; margin: 0 0 14px; color: var(--dark); letter-spacing: -.01em; }
.product-hero .desc { color: var(--grey); font-size: 16px; margin-bottom: 22px; }
.product-hero .price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; }
.product-hero .price-block .price { font-size: 34px; }
.format-badges { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.format-badge { background: var(--ice); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px; }
.checklist { list-style: none; padding: 0; margin: 0 0 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15px; color: var(--dark); }
.checklist li::before {
  content: "✓"; color: var(--white); font-weight: 700; flex: none;
  width: 19px; height: 19px; border-radius: 50%; background: var(--teal);
  display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 2px;
}
.note-box { background: var(--grey-light); border-inline-start: 3px solid var(--gold); border-radius: 8px; padding: 14px 16px; font-size: 13px; color: var(--grey); margin-top: 18px; }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 26px 26px; transition: transform .2s ease, box-shadow .2s ease; }
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.quote::before {
  content: "”"; position: absolute; top: 6px; inset-inline-end: 20px; font-size: 56px; font-weight: 700;
  color: var(--ice); line-height: 1; font-family: Georgia, serif; z-index: 0;
}
.quote p.text { position: relative; z-index: 1; color: var(--dark); font-size: 15px; margin: 0 0 16px; }
.quote .who { position: relative; z-index: 1; font-size: 13px; color: var(--teal-dark); font-weight: 700; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.step { text-align: center; position: relative; }
.step .num {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 14px;
  box-shadow: 0 8px 18px rgba(22,63,53,.28);
}
.step h4 { margin: 0 0 6px; font-size: 16px; }
.step p { margin: 0; color: var(--grey); font-size: 14px; }

/* ---------- Forms ---------- */
form.contact-form { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea {
  padding: 12px 14px; border-radius: 8px; border: 1px solid #DADFDD; font-family: inherit; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,92,78,.12);
}
.field textarea { resize: vertical; min-height: 120px; }

/* ---------- Footer ---------- */
footer.site { background: linear-gradient(180deg, var(--teal-dark), #102921); color: #CFE3DC; padding: 50px 0 26px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 30px; }
.footer-grid h5 { color: var(--white); font-size: 15px; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.footer-grid ul a { transition: color .15s ease; }
.footer-grid ul a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: 13px; text-align: center; color: #9FC4B8; }

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-40 { margin-top: 40px; }

/* ---------- Floating widgets: feedback + chat ---------- */
.fab {
  position: fixed; bottom: 24px; z-index: 200;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 22px; color: var(--white); box-shadow: 0 10px 26px rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.fab-feedback { left: 24px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); }
.fab-chat { right: 24px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); }
.fab-chat svg { width: 24px; height: 24px; }
.fab-a11y {
  left: 24px; bottom: 88px; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  background: var(--white); border: 1.5px solid #DDE4E1; color: var(--teal-dark); text-decoration: none;
}
.fab-a11y svg { width: 24px; height: 24px; }
.fab-a11y:hover { border-color: var(--teal); }

.widget-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(16,30,25,.5);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.widget-overlay.open { display: flex; }
.widget-modal {
  position: relative; background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 30px 26px 24px; max-width: 380px; width: 100%;
}
.widget-modal h3 { margin: 0 0 6px; font-size: 19px; color: var(--teal-dark); }
.widget-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--grey); }
.widget-close {
  position: absolute; top: 14px; inset-inline-end: 14px; background: var(--grey-light);
  border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 13px; color: var(--grey);
}
.star-row { display: flex; gap: 6px; margin-bottom: 16px; }
.star { background: none; border: none; font-size: 30px; color: #DDE4E1; cursor: pointer; padding: 0; line-height: 1; transition: color .1s ease; }
.star.filled { color: var(--gold); }
.widget-modal textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid #DADFDD;
  font-family: inherit; font-size: 13.5px; resize: vertical; margin-bottom: 14px;
}
.widget-note { font-size: 13px; color: var(--grey); margin-top: 10px; line-height: 1.5; }
.widget-note.ok { color: var(--teal); font-weight: 600; }
.widget-note.warn { color: #B23; }
.widget-note a { color: var(--teal); font-weight: 600; }

.chat-panel {
  position: fixed; bottom: 90px; right: 24px; z-index: 250;
  width: 320px; max-width: calc(100vw - 32px); height: 420px; max-height: calc(100vh - 130px);
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; overflow: hidden; border: 1px solid #EAEDEC;
}
.chat-panel.open { display: flex; }
.chat-head {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal)); color: var(--white);
  padding: 14px 16px; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between;
}
.chat-head .widget-close { position: static; background: rgba(255,255,255,.18); color: var(--white); }
.chat-body { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--grey-light); }
.chat-msg { display: flex; }
.chat-msg-bot { justify-content: flex-start; }
.chat-msg-user { justify-content: flex-end; }
.chat-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.55; }
.chat-msg-bot .chat-bubble { background: var(--white); color: var(--dark); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.chat-msg-user .chat-bubble { background: var(--teal); color: var(--white); }
.chat-link { display: block; margin-top: 6px; font-weight: 700; color: var(--teal); font-size: 12.5px; }
.chat-msg-user .chat-link { color: #DCEBE5; }
.chat-quick { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; }
.chat-chip { background: var(--ice); color: var(--teal-dark); border: none; padding: 6px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #EDEFEE; }
.chat-input-row input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 20px; border: 1px solid #DADFDD; font-family: inherit; font-size: 13px;
}
.chat-input-row button { padding: 9px 18px; font-size: 13px; }

.cookie-notice {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 250;
  background: var(--white); color: var(--teal-dark); border-top: 1px solid #DDE4E1;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 24px; box-shadow: 0 -6px 20px rgba(0,0,0,.1);
}
.cookie-notice p { margin: 0; font-size: 13px; max-width: 560px; color: var(--grey); }
.cookie-notice p a { color: var(--teal); font-weight: 600; text-decoration: underline; }
.cookie-notice button { padding: 8px 20px; font-size: 13px; flex: none; }
body.cookie-notice-active .fab { display: none; }

@media (max-width: 480px) {
  .chat-panel { right: 12px; bottom: 84px; width: calc(100vw - 24px); }
  .fab-chat { right: 14px; }
  .fab-feedback { left: 14px; }
  .fab-a11y { left: 14px; }
}

@media print {
  .no-print { display: none !important; }
}

@media (max-width: 860px) {
  .grid, .features, .quote-grid, .steps, .footer-grid { grid-template-columns: 1fr; }
  .product-hero { grid-template-columns: 1fr; padding: 30px 0; }
  .nav-links { position: fixed; inset-inline-end: 0; top: 68px; background: var(--white); flex-direction: column;
    width: 220px; padding: 20px; box-shadow: 6px 0 20px rgba(0,0,0,.08); transform: translateX(-100%);
    transition: transform .2s ease; height: calc(100vh - 68px); }
  .nav-links.open { transform: translateX(0); }
  .burger { display: block; }
  .hero h1 { font-size: 32px; }
  .banner { flex-direction: column; text-align: center; }
}

/* ---------- Toolbox overview (catalog.html) — every product type as its
   own horizontally-scrolling row, instead of merging them into one
   filtered grid (that's what products.html?type=X is for). ---------- */
.toolbox-row { margin-bottom: 44px; }
.toolbox-row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.toolbox-row-head h2 { font-size: 20px; color: var(--teal-dark); margin: 0; }
.toolbox-row-all { font-size: 15px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.toolbox-row-all:hover { text-decoration: underline; }
.toolbox-scroll-wrap { position: relative; }
.toolbox-scroll {
  display: flex; gap: 20px; overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.toolbox-scroll::-webkit-scrollbar { display: none; }
.toolbox-card-wrap { flex: 0 0 auto; width: 250px; scroll-snap-align: start; }
.toolbox-card-wrap .card { height: 100%; }
.toolbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #E2E7E5;
  background: var(--white); box-shadow: 0 4px 14px rgba(0,0,0,.12);
  font-size: 17px; color: var(--teal-dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.toolbox-arrow:hover { background: var(--ice); border-color: var(--teal-light); }
.toolbox-arrow-start { inset-inline-start: -4px; }
.toolbox-arrow-end { inset-inline-end: -4px; }
@media (max-width: 640px) { .toolbox-arrow { display: none; } }