/* ---------------------------------------------------------------------------
   Daytasolutions Technologies — hero coding panel + video control.
   Separate file: style.css is never touched.
--------------------------------------------------------------------------- */

/* ------------------------------------------------------- code window ---- */
.dayta-code {
  position: relative;
  max-width: 560px;
  margin-left: auto;
  padding: 30px 0;
}

.dayta-code__window {
  border: 1px solid rgba(56, 182, 255, 0.3);
  border-radius: 14px;
  background: rgba(7, 11, 34, 0.94);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.dayta-code__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.dayta-code__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dayta-code__dot--r { background: #ff5f57; }
.dayta-code__dot--y { background: #febc2e; }
.dayta-code__dot--g { background: #28c840; }

.dayta-code__file {
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.58);
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
}

.dayta-code__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(40, 200, 64, 0.14);
  color: #6ee787;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.dayta-code__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #28c840;
  animation: dayta-pulse 1.4s ease-in-out infinite;
}
@keyframes dayta-pulse { 50% { opacity: 0.25; } }

.dayta-code__body {
  margin: 0;
  padding: 20px 22px 24px;
  min-height: 268px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  line-height: 1.8;
  color: #d6deff;
  white-space: pre;
  overflow-x: auto;
}
.dayta-code__body code {
  font: inherit; color: inherit; background: none; padding: 0; white-space: pre;
}

/* syntax colours */
.dc-key { color: #7aa2ff; }
.dc-type { color: #4ec9b0; }
.dc-str { color: #ce9178; }
.dc-num { color: #b5cea8; }
.dc-com { color: #6a7aa2; font-style: italic; }
.dc-fn  { color: #dcdcaa; }
.dc-pun { color: #9aa7d0; }

.dayta-code__caret {
  display: inline-block;
  width: 8px;
  border-bottom: 2px solid #38b6ff;
  animation: dayta-blink 1s steps(1) infinite;
}
@keyframes dayta-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------- play control ---- */
.dayta-code__play {
  position: absolute;
  left: -28px;
  bottom: 58px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 9px;
  border-radius: 999px;
  background: rgba(12, 18, 48, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
  text-decoration: none;
}
.dayta-code__play svg {
  position: relative;
  z-index: 2;
  width: 17px; height: 17px;
  padding: 11px;
  box-sizing: content-box;
  border-radius: 50%;
  background: #0554f2;
  flex-shrink: 0;
}
.dayta-code__play_label {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.dayta-code__play_ring {
  position: absolute;
  left: 9px; top: 9px;
  width: 39px; height: 39px;
  border-radius: 50%;
  border: 2px solid rgba(5, 84, 242, 0.65);
  animation: dayta-ring 2s ease-out infinite;
}
@keyframes dayta-ring {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.85); opacity: 0; }
}
.dayta-code__play:hover { background: rgba(5, 84, 242, 0.28); }
.dayta-code__play[hidden] { display: none !important; }

/* ------------------------------------------------------------- badges ---- */
.dayta-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(12, 18, 48, 0.95);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  animation: dayta-float 6s ease-in-out infinite;
}
.dayta-badge__icon {
  display: flex; align-items: center; justify-content: center;
  width: 31px; height: 31px;
  border-radius: 8px;
  flex-shrink: 0;
}
.dayta-badge__icon svg { width: 16px; height: 16px; }
.dayta-badge__icon--blue  { background: #0554f2; }
.dayta-badge__icon--amber { background: #e08b1a; }
.dayta-badge__title {
  display: block; color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.dayta-badge__sub {
  display: block; color: rgba(255, 255, 255, 0.55);
  font-size: 10.5px; line-height: 1.4;
}

/* sits below the tab strip and mostly outside the window, so it does not
   cover the filename in the title bar (that filename changes per service) */
.dayta-badge--one   { top: 66px; left: -132px; }
.dayta-badge--three { bottom: 0; right: 14px; animation-delay: 2.6s; }

@keyframes dayta-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* --------------------------------------------------------- responsive ---- */
@media (max-width: 1399px) {
  .dayta-code { max-width: 500px; }
  .dayta-badge--one { left: -96px; top: 64px; }
  .dayta-code__play { left: -14px; }
}
@media (max-width: 1199px) {
  .dayta-code { max-width: 430px; }
  .dayta-code__body { font-size: 12px; min-height: 240px; }
  .dayta-badge--one { left: -60px; top: 60px; }
  .dayta-code__play { left: 0; bottom: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .dayta-badge,
  .dayta-code__caret,
  .dayta-code__play_ring,
  .dayta-code__live::before { animation: none; }
}

/* ============================================================ Dayta Assistant
   Collapsed to a launcher button until someone asks for it - a panel that
   covers the corner of every page uninvited is a nuisance, not a feature.
   Follows the site theme rather than being permanently dark.
--------------------------------------------------------------------------- */
.dayta-chat-widget {
  /* Bottom-right: the conventional spot, and the one people look in. The
     other two floating controls were moved to the left corner to make room -
     see "floating controls" below. */
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* ---- the closed state: one button ---- */
.dayta-chat-widget__launcher {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: #0554f2; color: #fff;
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  box-shadow: 0 10px 30px rgba(5, 84, 242, .28);
  transition: transform .18s, box-shadow .18s;
}
[data-theme="dark"] .dayta-chat-widget__launcher {
  background: #D4AF37; color: #0A0A0A !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
/* dayta-dark.css carries a blanket `span { color: var(--plat-dim) !important }`
   and loads after this file, so the label inside the button ignores the colour
   set on the button and comes out pale grey on gold - unreadable. The colour
   has to be re-asserted on the span itself. Same for the header title. */
[data-theme="dark"] .dayta-chat-widget__launcher-text { color: #0A0A0A !important; }
[data-theme="dark"] .dayta-chat-widget__header-left span { color: #F2F2F2 !important; }
.dayta-chat-widget__launcher:hover { transform: translateY(-2px); }
.dayta-chat-widget__launcher svg { width: 20px; height: 20px; flex-shrink: 0; }
.dayta-chat-widget.is-open .dayta-chat-widget__launcher { display: none; }
@media (max-width: 480px) {
  .dayta-chat-widget__launcher-text { display: none; }
  .dayta-chat-widget__launcher { padding: 15px; }
}

/* ---- the open state: the panel ---- */
.dayta-chat-widget__panel {
  display: none; box-sizing: border-box;
  width: min(380px, calc(100vw - 32px));
  border: 1px solid #e6e9f2; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 24px 70px rgba(20, 19, 59, .18);
}
[data-theme="dark"] .dayta-chat-widget__panel {
  border-color: #262626; background: #121212;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.dayta-chat-widget.is-open .dayta-chat-widget__panel { display: block; }

.dayta-chat-widget__header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid #e6e9f2;
  background: #f4f6fc; color: #14133b; font-size: 14.5px; font-weight: 700;
}
[data-theme="dark"] .dayta-chat-widget__header {
  border-bottom-color: #262626; background: #161616; color: #F2F2F2;
}
.dayta-chat-widget__header-left { display: flex; align-items: center; gap: 10px; }
.dayta-chat-widget__status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22a06b; box-shadow: 0 0 0 4px rgba(34, 160, 107, .16);
}
.dayta-chat-widget__toggle {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #8a93a8; font-size: 22px; line-height: 1; cursor: pointer;
}
.dayta-chat-widget__toggle:hover { background: #e6e9f2; color: #14133b; }
[data-theme="dark"] .dayta-chat-widget__toggle:hover { background: #262626; color: #F2F2F2; }

.dayta-chat-widget__body {
  max-height: min(420px, 55vh); overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ---- messages ---- */
.dayta-chat-widget__message { display: flex; flex-direction: column; gap: 4px; }
.dayta-chat-widget__who {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #8a93a8;
}
[data-theme="dark"] .dayta-chat-widget__who { color: #7a7a7a !important; }
.dayta-chat-widget__text {
  font-size: 14.5px; line-height: 1.7; color: #14133b;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
[data-theme="dark"] .dayta-chat-widget__text { color: #E4E4E4 !important; }
.dayta-chat-widget__message--you .dayta-chat-widget__text {
  padding: 10px 13px; border-radius: 12px 12px 4px 12px;
  background: #eef2ff; align-self: flex-end; max-width: 90%;
}
[data-theme="dark"] .dayta-chat-widget__message--you .dayta-chat-widget__text {
  background: #1b1b1b;
}
.dayta-chat-widget__message--you { align-items: flex-end; }
.dayta-chat-widget__message--error .dayta-chat-widget__text { color: #b91c1c; }
[data-theme="dark"] .dayta-chat-widget__message--error .dayta-chat-widget__text {
  color: #ff8a8a !important;
}
.dayta-chat-widget__link { color: #0554f2; font-weight: 600; }
[data-theme="dark"] .dayta-chat-widget__link { color: #D4AF37 !important; }

/* ---- the three dots while it thinks ---- */
.dayta-chat-widget__dots { display: inline-flex; gap: 5px; padding: 6px 0; }
.dayta-chat-widget__dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #b7bfd4;
  animation: daytaChatDot 1.2s infinite ease-in-out;
}
[data-theme="dark"] .dayta-chat-widget__dots i { background: #555; }
.dayta-chat-widget__dots i:nth-child(2) { animation-delay: .18s; }
.dayta-chat-widget__dots i:nth-child(3) { animation-delay: .36s; }
@keyframes daytaChatDot {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .dayta-chat-widget__dots i { animation: none; opacity: .6; }
  .dayta-chat-widget__launcher { transition: none; }
}

/* ---- suggested questions ---- */
.dayta-chat-widget__buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.dayta-chat-widget__buttons[hidden] { display: none; }
.dayta-chat-widget__button {
  padding: 7px 13px; border: 1px solid #d9dded; border-radius: 999px;
  background: #fff; color: #14133b;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
[data-theme="dark"] .dayta-chat-widget__button {
  border-color: #333; background: #1a1a1a; color: #E4E4E4 !important;
}
.dayta-chat-widget__button:hover { border-color: #0554f2; color: #0554f2; }
[data-theme="dark"] .dayta-chat-widget__button:hover {
  border-color: #D4AF37; color: #D4AF37 !important;
}

/* ---- the composer ---- */
.dayta-chat-widget__input-wrap {
  display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-chat-widget__input-wrap { border-top-color: #262626; }
.dayta-chat-widget__input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 11px 14px;
  border: 1px solid #d9dded; border-radius: 10px; background: #fff;
  font-size: 14px; font-family: inherit; color: #14133b;
}
[data-theme="dark"] .dayta-chat-widget__input {
  border-color: #333; background: #0F0F0F; color: #E4E4E4;
}
.dayta-chat-widget__input:focus { outline: 2px solid #0554f2; outline-offset: -1px; }
[data-theme="dark"] .dayta-chat-widget__input:focus { outline-color: #D4AF37; }
.dayta-chat-widget__submit {
  flex-shrink: 0;   /* without this the input squeezes "Send" off the panel */
  padding: 11px 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: #0554f2; color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
}
[data-theme="dark"] .dayta-chat-widget__submit { background: #D4AF37; color: #0A0A0A !important; }
.dayta-chat-widget__submit:disabled { opacity: .5; cursor: not-allowed; }
.dayta-chat-widget__input:disabled { opacity: .6; }

.dayta-chat-widget__note {
  margin: 0; padding: 0 16px 14px; font-size: 11.5px; line-height: 1.6; color: #8a93a8;
}
[data-theme="dark"] .dayta-chat-widget__note { color: #7a7a7a !important; }

@media (max-width: 767px) {
  .dayta-chat-widget { right: 12px; bottom: 12px; }
  .dayta-chat-widget__panel { width: calc(100vw - 24px); }
  .dayta-chat-widget__body { max-height: 50vh; }
}

/* ------------------------------------------------- hero service showcase ---
   One hero slide, five services rotating in the panel. Tabs let a visitor
   jump straight to the service they came for.
--------------------------------------------------------------------------- */
.dayta-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.dayta-tab {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 18, 48, 0.72);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, color .2s, border-color .2s;
}
.dayta-tab:hover { color: #fff; border-color: rgba(56, 182, 255, .55); }
.dayta-tab.is-active {
  background: #0554f2;
  border-color: #0554f2;
  color: #fff;
}

/* status colours used by the IT / security / QA panels */
.dc-ok   { color: #4ade80; font-weight: 700; }
.dc-warn { color: #fbbf24; font-weight: 700; }
.dc-dim  { color: #6a7aa2; }

/* single hero slide now, so the slider dots have nothing to page through */
.slider--active .slick-dots { display: none; }

@media (max-width: 1199px) {
  .dayta-tab { font-size: 11px; padding: 5px 10px; }
  .dayta-tabs { gap: 5px; }
}

/* ------------------------------------------------------------- avatars ----
   Drawn inline as an SVG sprite, so the site loads no extra image files and
   they stay sharp at any size.
--------------------------------------------------------------------------- */
.dayta-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.dayta-who {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dayta-who.is-in { animation: dayta-who-in .45s ease-out both; }
@keyframes dayta-who-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.dayta-who__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(56, 182, 255, .45);
}

.dayta-who__text { display: flex; flex-direction: column; min-width: 0; }
.dayta-who__role {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.dayta-who__says {
  color: rgba(255, 255, 255, .6);
  font-size: 11.5px;
  line-height: 1.4;
}

/* the window already has a title bar, so trim the body's top padding */
.dayta-who + .dayta-code__body { padding-top: 16px; min-height: 214px; }

@media (max-width: 1199px) {
  .dayta-who { padding: 11px 16px 10px; }
  .dayta-who__av { width: 32px; height: 32px; }
  .dayta-who__says { font-size: 10.5px; }
  .dayta-who + .dayta-code__body { min-height: 196px; }
}

@media (prefers-reduced-motion: reduce) {
  .dayta-who.is-in { animation: none; }
}

/* badge tones — the hero badge changes colour with the service on screen */
.dayta-badge__icon--green  { background: #1aa06d; }
.dayta-badge__icon--violet { background: #7c3aed; }
.dayta-badge__icon--teal   { background: #0ea5b7; }
.dayta-badge--one { transition: none; }
.dayta-badge--one .dayta-badge__icon { transition: background .3s ease; }

/* --------------------------------------------------------- search results ---
   Light page (it sits on the normal white body), unlike the dark hero panel.
--------------------------------------------------------------------------- */
.dayta-results { padding: 150px 0 90px; }
.dayta-results__title { font-size: 34px; font-weight: 700; color: #14133b; margin-bottom: 22px; }

.dayta-results__form { display: flex; gap: 10px; margin-bottom: 18px; max-width: 620px; }
.dayta-results__input {
  flex: 1;
  padding: 13px 18px;
  border: 1px solid #d9dded;
  border-radius: 8px;
  font-size: 15px;
  color: #14133b;
}
.dayta-results__input:focus { outline: none; border-color: #0554f2; }
.dayta-results__btn {
  padding: 13px 26px;
  border: 0;
  border-radius: 8px;
  background: #0554f2;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.dayta-results__btn:hover { background: #0344c9; }

.dayta-results__count { color: #5b6674; font-size: 14px; margin-bottom: 16px; }

.dayta-results__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.dayta-chip {
  padding: 6px 14px;
  border: 1px solid #d9dded;
  border-radius: 999px;
  background: #fff;
  color: #5b6674;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.dayta-chip:hover { border-color: #0554f2; color: #14133b; }
.dayta-chip.is-active { background: #0554f2; border-color: #0554f2; color: #fff; }

.dayta-hit {
  display: block;
  padding: 18px 20px;
  margin-bottom: 12px;
  border: 1px solid #e6e9f2;
  border-left: 3px solid #0554f2;
  border-radius: 8px;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.dayta-hit:hover { box-shadow: 0 8px 24px rgba(5, 84, 242, .12); transform: translateY(-2px); }
.dayta-hit__type {
  display: inline-block;
  margin-bottom: 6px;
  color: #0554f2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dayta-hit__title { display: block; color: #14133b; font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.dayta-hit__sum { display: block; color: #5b6674; font-size: 14.5px; line-height: 1.6; }
.dayta-hit mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 2px; }

.dayta-results__empty { color: #5b6674; font-size: 16px; line-height: 1.8; }
.dayta-results__empty a { color: #0554f2; }

@media (max-width: 575px) {
  .dayta-results { padding: 120px 0 60px; }
  .dayta-results__title { font-size: 26px; }
  .dayta-results__form { flex-direction: column; }
}

/* ------------------------------------------------------- theme switch ----
   Unscoped on purpose: the button and the logo swap must work in both
   themes, so these rules live here rather than in dayta-dark.css.
------------------------------------------------------------------------- */
.dayta-logo--light { display: none !important; }
[data-theme="light"] .dayta-logo--dark { display: none !important; }
[data-theme="light"] .dayta-logo--light { display: inline-block !important; }

.dayta-theme-toggle {
  position: fixed;
  /* Bottom-left, side by side with the back-to-top button rather than above
     it. Two controls in one shallow band are easy for the footer to clear;
     a tall column is not. The right corner belongs to the assistant.
     Dragging overrides all of this with left/top. */
  left: 1.5rem;
  right: auto;
  bottom: 1.5rem;
  z-index: 100000;
  touch-action: none;          /* let a touch drag move it, not scroll the page */
  user-select: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, .45);
  background: #101010;
  color: #D4AF37;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.dayta-theme-toggle:hover { transform: translateY(-3px) scale(1.05); }
.dayta-theme-toggle.is-dragging {
  cursor: grabbing;
  transform: scale(1.08);
  transition: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.dayta-theme-toggle:active { cursor: grabbing; }
.dayta-theme-toggle:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.dayta-theme-toggle svg { width: 21px; height: 21px; }

/* The floating scroll-to-top control is intentionally disabled here: it
   overlaps the site’s floating action buttons and adds visual noise.
   Remove this rule if you want to restore it later. */
.progress-wrap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* dark theme shows the sun (click for light); light theme shows the moon */
.dayta-theme-toggle__moon { display: none; }
[data-theme="light"] .dayta-theme-toggle__sun { display: none; }
[data-theme="light"] .dayta-theme-toggle__moon { display: block; }

[data-theme="light"] .dayta-theme-toggle {
  background: #ffffff;
  color: #0554f2;
  border-color: #d9dded;
  box-shadow: 0 8px 24px rgba(5, 84, 242, .16);
}

@media (max-width: 575px) {
  .dayta-theme-toggle { right: 1rem; bottom: 4.4rem; width: 42px; height: 42px; }
  .dayta-theme-toggle svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .dayta-theme-toggle { transition: none; }
  .dayta-theme-toggle:hover { transform: none; }
}

/* ---- reduced motion ----------------------------------------------------
   animate.css fades content in from opacity:0. It does not honour the OS
   "reduce motion" setting on its own, so anyone with that enabled can be
   left staring at invisible text. Show it immediately instead.
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animated, .wow, [data-animation] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ---------------------------------------------------------- name callout ---
   The one deliberate use of "Da(y)ta". Kept to a couple of places on purpose:
   service names, headings and meta descriptions stay plain "data" so search
   engines and screen readers still get the real word.
--------------------------------------------------------------------------- */
.dayta-name {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 2px solid #0554f2;
  font-size: 15.5px;
  line-height: 1.75;
}
.dayta-name__mark {
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.dayta-name__mark span { color: #0554f2; }

[data-theme="dark"] .dayta-name { border-left-color: #D4AF37; }
[data-theme="dark"] .dayta-name__mark { color: #F2F2F2; }
[data-theme="dark"] .dayta-name__mark span { color: #D4AF37; }

/* ---------------------------------------------------- case studies offset ---
   .case--minus pulls this section up by -434px. That existed to overlap the
   tall "Solution Area" block the template had directly above it. That block
   was removed when the code panel moved into the hero, so the negative margin
   now drags the case studies up into the service cards. Neutralised here (not
   in the dark sheet) because it affects both themes.
--------------------------------------------------------------------------- */
.case--minus { margin-top: 0 !important; }

/* ------------------------------------------------------------- tab panes ---
   WOW.js hides every .wow element (visibility:hidden) until it scrolls into
   view. Content inside an inactive tab pane is display:none, so it never
   scrolls into view and never gets revealed - clicking the tab then shows an
   empty panel. Keep tab content visible; the tab click is the reveal.
--------------------------------------------------------------------------- */
.tab-pane .wow,
.tab-pane [data-wow-delay] {
  visibility: visible !important;
  animation-name: none !important;
}

/* --------------------------------------------------- single partner logo ---
   The tab was built for a 12-logo grid. With one real partner, centre it and
   give it room rather than leaving eleven empty cells.
--------------------------------------------------------------------------- */
/* the wrapper lays items out with float:left, which margin:auto cannot
   centre - switch the container to flex for the single-logo case */
.services-partners__wrapper { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.services-partners__client {
  float: none !important;
  display: flex !important;
  justify-content: center;
  width: 100% !important;
  max-width: 300px;
  margin: 0 !important;
  padding: 26px 30px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  background: #ffffff;
}
.services-partners__client img { width: 100%; height: auto; max-width: 300px; }
[data-theme="dark"] .services-partners__client {
  background: #ffffff;
  border-color: rgba(212, 175, 55, .35);
}

/* ------------------------------------------------------------- projects ----
   Dedicated projects page. Theme-aware via tokens, so it works in both.
--------------------------------------------------------------------------- */
.dayta-projects { padding: 90px 0 100px; }
.dayta-projects__intro {
  max-width: 640px; margin-bottom: 46px;
  font-size: 16.5px; line-height: 1.8; color: #5b6674;
}
[data-theme="dark"] .dayta-projects__intro { color: #B4B4B4; }

.dayta-projects__grid { display: grid; gap: 28px; }

.dayta-project {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  /* stretch, so the logo panel takes its height from the text beside it
     rather than from the image's own proportions */
  align-items: stretch;
  padding: 26px;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  background: #fff;
}
[data-theme="dark"] .dayta-project { background: #161616; border-color: #262626; }

.dayta-project__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-radius: 10px;
  border: 1px solid #e6e9f2;
  background: #f4f6fc;
  min-height: 132px;
}
.dayta-project__thumb img {
  width: 100%;
  height: 100%;
  max-height: 96px;
  object-fit: contain;
  display: block;
}
[data-theme="dark"] .dayta-project__thumb { border-color: #262626; background: #ffffff; }

.dayta-project__client {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #0554f2;
}
[data-theme="dark"] .dayta-project__client { color: #D4AF37; }

.dayta-project__title { font-size: 25px; font-weight: 700; margin-bottom: 12px; color: #14133b; }
[data-theme="dark"] .dayta-project__title { color: #F2F2F2; }

.dayta-project__summary { font-size: 15.5px; line-height: 1.8; color: #5b6674; margin-bottom: 18px; }
[data-theme="dark"] .dayta-project__summary { color: #B4B4B4; }

.dayta-project__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dayta-project__tags li {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid #d9dded; background: #f7f9ff;
  font-size: 12.5px; font-weight: 600; color: #5b6674;
}
[data-theme="dark"] .dayta-project__tags li {
  border-color: #262626; background: #1F1F1F; color: #B4B4B4;
}

/* the "add the next one" card */
.dayta-project--todo { grid-template-columns: 1fr; border-style: dashed; opacity: .85; }

@media (max-width: 767px) {
  .dayta-project { grid-template-columns: 1fr; gap: 20px; }
  .dayta-project__title { font-size: 21px; }
}

/* project card with no logo or screenshot yet */
.dayta-project--nologo { grid-template-columns: 1fr; }

/* ------------------------------------------------------ mobile menu bar ---
   The theme's mobile bar (.mean-bar with its .sidebar-button) renders at
   desktop widths too, because the menu script that normally hides it was not
   part of the download. The real header already carries the nav and search
   above 1200px, so the bar is duplicate furniture there - hide it. Below
   1200px it behaves as intended.
--------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* hide only the hamburger buttons - .mean-bar also wraps the search form on
     the inner pages, so hiding the whole bar removes search from those pages */
  .sidebar-button, .sidebarBtn { display: none !important; }
}

/* screenshot thumbs fill the panel; logo thumbs stay contained and small */
.dayta-project__thumb--shot { padding: 0; overflow: hidden; background: #0b0b0b; }
.dayta-project__thumb--shot img {
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 9px;
}

/* ------------------------------------------------------- services page ----- */
.dayta-svc { padding: 90px 0 100px; }
.dayta-svc__intro { max-width: 680px; margin-bottom: 50px; font-size: 16.5px; line-height: 1.8; color: #5b6674; }
[data-theme="dark"] .dayta-svc__intro { color: #B4B4B4; }
.dayta-svc__grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.dayta-svc__item {
  position: relative; padding: 34px 30px 30px;
  border: 1px solid #e6e9f2; border-radius: 14px; background: #fff; scroll-margin-top: 120px;
}
[data-theme="dark"] .dayta-svc__item { background: #161616; border-color: #262626; }
.dayta-svc__num { display: block; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #0554f2; margin-bottom: 10px; }
[data-theme="dark"] .dayta-svc__num { color: #D4AF37; }
.dayta-svc__title { font-size: 23px; font-weight: 700; margin-bottom: 12px; color: #14133b; }
[data-theme="dark"] .dayta-svc__title { color: #F2F2F2; }
.dayta-svc__lead { font-size: 16px; font-weight: 600; line-height: 1.65; margin-bottom: 12px; color: #14133b; }
[data-theme="dark"] .dayta-svc__lead { color: #E4E4E4; }
.dayta-svc__body { font-size: 15px; line-height: 1.8; color: #5b6674; margin-bottom: 16px; }
[data-theme="dark"] .dayta-svc__body { color: #B4B4B4; }
.dayta-svc__list { margin: 0; padding: 0; list-style: none; }
.dayta-svc__list li { position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 14.5px; color: #5b6674; }
[data-theme="dark"] .dayta-svc__list li { color: #B4B4B4; }
.dayta-svc__list li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: #0554f2;
}
[data-theme="dark"] .dayta-svc__list li::before { background: #D4AF37; }

/* ----------------------------------------------------------- blog page ----- */
.dayta-blog { padding: 90px 0 100px; }
.dayta-blog__intro { max-width: 640px; margin-bottom: 44px; font-size: 16.5px; line-height: 1.8; color: #5b6674; }
[data-theme="dark"] .dayta-blog__intro { color: #B4B4B4; }
.dayta-blog__grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dayta-blog__post {
  border: 1px solid #e6e9f2; border-radius: 14px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
[data-theme="dark"] .dayta-blog__post { background: #161616; border-color: #262626; }
.dayta-blog__post--todo { border-style: dashed; }
.dayta-blog__thumb img { width: 100%; height: 190px; object-fit: cover; display: block; }
.dayta-blog__body { padding: 22px 24px 26px; }
.dayta-blog__meta { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #0554f2; margin-bottom: 9px; }
[data-theme="dark"] .dayta-blog__meta { color: #D4AF37; }
.dayta-blog__title { font-size: 19px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; color: #14133b; }
[data-theme="dark"] .dayta-blog__title { color: #F2F2F2; }
.dayta-blog__excerpt { font-size: 14.5px; line-height: 1.75; color: #5b6674; margin-bottom: 14px; }
[data-theme="dark"] .dayta-blog__excerpt { color: #B4B4B4; }
.dayta-blog__author { font-size: 13px; color: #8A8A8A; }
.dayta-blog__note { margin-top: 34px; font-size: 14.5px; color: #8A8A8A; }

/* ------------------------------------------------------------ tech tags ----
   Each tag carries its own colour via --tc and an explanation via data-tip.
   The tint is mixed from that colour so one rule covers every tool, and the
   text is lightened in dark mode so contrast holds on obsidian.
--------------------------------------------------------------------------- */
.dayta-project__tags li {
  position: relative;
  cursor: help;
  border: 1px solid color-mix(in srgb, var(--tc, #5b6674) 42%, transparent);
  background: color-mix(in srgb, var(--tc, #5b6674) 12%, transparent);
  color: color-mix(in srgb, var(--tc, #5b6674) 82%, #000);
  transition: background .18s ease, border-color .18s ease;
}
[data-theme="dark"] .dayta-project__tags li {
  color: color-mix(in srgb, var(--tc, #B4B4B4) 62%, #fff);
  background: color-mix(in srgb, var(--tc, #B4B4B4) 16%, transparent);
  border-color: color-mix(in srgb, var(--tc, #B4B4B4) 48%, transparent);
}
.dayta-project__tags li:hover,
.dayta-project__tags li:focus-visible {
  background: color-mix(in srgb, var(--tc, #5b6674) 24%, transparent);
  border-color: color-mix(in srgb, var(--tc, #5b6674) 70%, transparent);
}

/* the explanation bubble */
.dayta-project__tags li[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 280px;
  padding: 10px 13px;
  border-radius: 9px;
  background: #14133b;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}
.dayta-project__tags li[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #14133b;
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 21;
}
[data-theme="dark"] .dayta-project__tags li[data-tip]::after { background: #1F1F1F; border: 1px solid #333; }
[data-theme="dark"] .dayta-project__tags li[data-tip]::before { border-top-color: #333; }

.dayta-project__tags li[data-tip]:hover::after,
.dayta-project__tags li[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dayta-project__tags li[data-tip]:hover::before,
.dayta-project__tags li[data-tip]:focus-visible::before { opacity: 1; }

/* tooltips would be clipped by the card on small screens - drop them there */
@media (max-width: 767px) {
  .dayta-project__tags li[data-tip]::after,
  .dayta-project__tags li[data-tip]::before { display: none; }
}

/* ------------------------------------------------- uncropped screenshot ----
   A wide screenshot cannot be shown whole inside a narrow column without
   shrinking to nothing. These cards get a wider image column, and the panel
   takes its height from the image instead of stretching to the text.
--------------------------------------------------------------------------- */
.dayta-project--wide { grid-template-columns: 470px 1fr; }

.dayta-project--wide .dayta-project__thumb {
  align-self: center;
  height: auto;
  min-height: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.dayta-project--wide .dayta-project__thumb img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 9px;
  display: block;
}

@media (max-width: 991px) {
  .dayta-project--wide { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ tools page ---
   Free tools (Merge PDFs etc.). Light values are the defaults below; each
   is immediately followed by its [data-theme="dark"] override, matching the
   pattern used for .dayta-project / .dayta-svc rather than dayta-dark.css.
--------------------------------------------------------------------------- */
.dayta-tools { padding: 80px 0 100px; }

.dayta-tools-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-bottom: 44px; flex-wrap: wrap; }
.dayta-tools-intro { max-width: 560px; font-size: 16.5px; line-height: 1.8; color: #5b6674; margin: 0; }
[data-theme="dark"] .dayta-tools-intro { color: #B4B4B4; }

.dayta-tools-balance { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid #e6e9f2; border-radius: 999px; background: #f4f6fc; }
[data-theme="dark"] .dayta-tools-balance { border-color: #262626; background: #161616; }
.dayta-tools-balance__coins { font-size: 22px; font-weight: 800; color: #0554f2; line-height: 1; }
[data-theme="dark"] .dayta-tools-balance__coins { color: #D4AF37; }
.dayta-tools-balance__label { font-size: 13px; color: #5b6674; }
[data-theme="dark"] .dayta-tools-balance__label { color: #8A8A8A; }
.dayta-tools-balance__buy { margin-left: 6px; padding: 6px 14px; border-radius: 999px; background: #0554f2; color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; }
[data-theme="dark"] .dayta-tools-balance__buy { background: #D4AF37; color: #0A0A0A; }

.dayta-tools-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 60px; }
.dayta-tools-card { padding: 28px 26px 22px; border: 1px solid #e6e9f2; border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .2s, transform .2s; }
[data-theme="dark"] .dayta-tools-card { border-color: #262626; background: #161616; }
.dayta-tools-card:hover { border-color: #0554f2; transform: translateY(-3px); }
[data-theme="dark"] .dayta-tools-card:hover { border-color: #D4AF37; }
.dayta-tools-card--open { border-color: #0554f2; box-shadow: 0 0 0 1px rgba(5,84,242,.18); }
[data-theme="dark"] .dayta-tools-card--open { border-color: #D4AF37; box-shadow: 0 0 0 1px rgba(212,175,55,.25); }
.dayta-tools-card__icon {
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 12px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  color: color-mix(in srgb, var(--tc) 70%, #14133b);
}
[data-theme="dark"] .dayta-tools-card__icon { color: color-mix(in srgb, var(--tc) 65%, #fff); }
.dayta-tools-card__icon svg { width: 24px; height: 24px; }
.dayta-tools-card__title { font-size: 20px; font-weight: 700; color: #14133b; margin-bottom: 8px; }
[data-theme="dark"] .dayta-tools-card__title { color: #F2F2F2; }
.dayta-tools-card__desc { font-size: 14.5px; line-height: 1.7; color: #5b6674; margin-bottom: 20px; }
[data-theme="dark"] .dayta-tools-card__desc { color: #B4B4B4; }
.dayta-tools-card__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e6e9f2; padding-top: 16px; }
[data-theme="dark"] .dayta-tools-card__foot { border-top-color: #262626; }
.dayta-tools-card__cost { font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #0554f2; }
[data-theme="dark"] .dayta-tools-card__cost { color: #D4AF37; }
.dayta-tools-card__cta { font-size: 13.5px; font-weight: 600; color: #14133b; }
[data-theme="dark"] .dayta-tools-card__cta { color: #F2F2F2; }

.dayta-tools-work { border: 1px solid #e6e9f2; border-radius: 18px; background: #f7f9ff; overflow: hidden; }
[data-theme="dark"] .dayta-tools-work { border-color: #262626; background: #121212; }
.dayta-tools-work__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-bottom: 1px solid #e6e9f2; background: #fff; flex-wrap: wrap; }
[data-theme="dark"] .dayta-tools-work__head { border-bottom-color: #262626; background: #161616; }
.dayta-tools-work__title { font-size: 19px; font-weight: 700; color: #14133b; margin: 0; }
[data-theme="dark"] .dayta-tools-work__title { color: #F2F2F2; }
.dayta-tools-work__note { font-size: 12.5px; color: #5b6674; }
[data-theme="dark"] .dayta-tools-work__note { color: #8A8A8A; }
.dayta-tools-work__body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; }
@media (max-width: 900px) { .dayta-tools-work__body { grid-template-columns: 1fr; } }

.dayta-tools-drop { margin: 28px; border: 2px dashed #cdd4e6; border-radius: 14px; padding: 52px 24px; text-align: center; }
[data-theme="dark"] .dayta-tools-drop { border-color: #333; }
.dayta-tools-drop__icon { display: inline-flex; color: #0554f2; margin-bottom: 14px; }
[data-theme="dark"] .dayta-tools-drop__icon { color: #D4AF37; }
.dayta-tools-drop__icon svg { width: 34px; height: 34px; }
.dayta-tools-drop__main { font-size: 17px; font-weight: 600; color: #14133b; margin: 0 0 6px; }
[data-theme="dark"] .dayta-tools-drop__main { color: #E4E4E4; }
.dayta-tools-drop__sub { font-size: 13.5px; color: #5b6674; margin: 0; }
[data-theme="dark"] .dayta-tools-drop__sub { color: #8A8A8A; }
.dayta-tools-drop__sub span { color: #0554f2; text-decoration: underline; }
[data-theme="dark"] .dayta-tools-drop__sub span { color: #D4AF37; }

.dayta-tools-side { padding: 28px 28px 28px 0; }
@media (max-width: 900px) { .dayta-tools-side { padding: 0 28px 28px; } }
.dayta-tools-side__label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5b6674; margin: 0 0 12px; }
[data-theme="dark"] .dayta-tools-side__label { color: #8A8A8A; }
.dayta-tools-files { list-style: none; margin: 0 0 8px; padding: 0; }
.dayta-tools-files li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 8px; border: 1px solid #e6e9f2; border-radius: 10px; background: #fff; font-size: 14px; color: #14133b; }
[data-theme="dark"] .dayta-tools-files li { border-color: #262626; background: #161616; color: #E4E4E4; }
.dayta-tools-files li em { margin-left: auto; font-style: normal; font-size: 12.5px; color: #5b6674; }
[data-theme="dark"] .dayta-tools-files li em { color: #8A8A8A; }
.dayta-tools-files__grip { color: #b7bfd4; cursor: grab; }
[data-theme="dark"] .dayta-tools-files__grip { color: #555; }
.dayta-tools-side__hint { font-size: 12.5px; color: #5b6674; margin: 0 0 22px; }
[data-theme="dark"] .dayta-tools-side__hint { color: #8A8A8A; }

.dayta-tools-cost { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid #e6e9f2; border-bottom: 1px solid #e6e9f2; margin-bottom: 18px; font-size: 14px; color: #5b6674; }
[data-theme="dark"] .dayta-tools-cost { border-color: #262626; color: #B4B4B4; }
.dayta-tools-cost strong { color: #0554f2; font-size: 16px; }
[data-theme="dark"] .dayta-tools-cost strong { color: #D4AF37; }
.dayta-tools-run { width: 100%; padding: 15px 20px; border: 0; border-radius: 10px; background: #0554f2; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
[data-theme="dark"] .dayta-tools-run { background: #D4AF37; color: #0A0A0A; }
.dayta-tools-run:hover { background: #0443c4; }
[data-theme="dark"] .dayta-tools-run:hover { background: #E9C767; }
.dayta-tools-side__free { font-size: 12.5px; color: #5b6674; text-align: center; margin: 12px 0 0; }
[data-theme="dark"] .dayta-tools-side__free { color: #8A8A8A; }

.dayta-tools-progress { padding: 22px 28px; border-top: 1px solid #e6e9f2; background: #fff; }
[data-theme="dark"] .dayta-tools-progress { border-top-color: #262626; background: #161616; }
.dayta-tools-progress__bar { height: 7px; border-radius: 99px; background: #e6e9f2; overflow: hidden; }
[data-theme="dark"] .dayta-tools-progress__bar { background: #262626; }
.dayta-tools-progress__bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0554f2, #4f8dff); }
[data-theme="dark"] .dayta-tools-progress__bar span { background: linear-gradient(90deg, #D4AF37, #E9C767); }
.dayta-tools-progress__text { font-size: 13px; color: #5b6674; margin: 10px 0 0; }
[data-theme="dark"] .dayta-tools-progress__text { color: #B4B4B4; }

.dayta-tools-result { display: flex; align-items: center; gap: 16px; padding: 22px 28px; border-top: 1px solid #e6e9f2; background: #f7f9ff; flex-wrap: wrap; }
[data-theme="dark"] .dayta-tools-result { border-top-color: #262626; background: #101010; }
.dayta-tools-result__tick { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(74,222,128,.14); color: #22a06b; flex-shrink: 0; }
[data-theme="dark"] .dayta-tools-result__tick { color: #4ade80; }
.dayta-tools-result__tick svg { width: 20px; height: 20px; }
.dayta-tools-result__text { display: flex; flex-direction: column; }
.dayta-tools-result__text strong { color: #14133b; font-size: 15px; }
[data-theme="dark"] .dayta-tools-result__text strong { color: #F2F2F2; }
.dayta-tools-result__text span { color: #5b6674; font-size: 12.5px; }
[data-theme="dark"] .dayta-tools-result__text span { color: #8A8A8A; }
.dayta-tools-result__dl { margin-left: auto; padding: 12px 26px; border-radius: 8px; background: #0554f2; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
[data-theme="dark"] .dayta-tools-result__dl { background: #D4AF37; color: #0A0A0A; }

@media (max-width: 767px) {
  .dayta-tools-card__title { font-size: 18px; }
}

/* --- signature faces. Google Fonts, OFL-1.1 - see assets/fonts/signature/ ---
   Declared but not fetched until the signature tool actually renders with one
   (dayta-tools.js awaits document.fonts.load before measuring). */
@font-face { font-family: "Sacramento"; src: url("/assets/fonts/signature/Sacramento.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("/assets/fonts/signature/GreatVibes.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Mr Dafoe"; src: url("/assets/fonts/signature/MrDafoe.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Marck Script"; src: url("/assets/fonts/signature/MarckScript.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Shadows Into Light"; src: url("/assets/fonts/signature/ShadowsIntoLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Architects Daughter"; src: url("/assets/fonts/signature/ArchitectsDaughter.ttf") format("truetype"); font-display: swap; }

/* panels and category groups are switched with the hidden attribute */
.dayta-tools-work[hidden],
.dayta-tools-cat[hidden] { display: none; }
.dayta-tools-card { outline-offset: 3px; }

/* ---- catalogue: category rail on the left, tool rows on the right ------- */
.dayta-tools-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px; margin-bottom: 46px;
}
@media (max-width: 900px) { .dayta-tools-layout { grid-template-columns: 1fr; gap: 24px; } }

.dayta-tools-nav { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) {
  .dayta-tools-nav { flex-direction: row; flex-wrap: wrap; }
}
.dayta-tools-nav__item {
  padding: 16px 22px; border: 0; border-radius: 14px; background: transparent;
  font-size: 15.5px; font-weight: 600; color: #5b6674; text-align: left; cursor: pointer;
  transition: background .18s, color .18s;
}
[data-theme="dark"] .dayta-tools-nav__item { color: #8A8A8A; }
.dayta-tools-nav__item:hover { color: #14133b; }
[data-theme="dark"] .dayta-tools-nav__item:hover { color: #E4E4E4; }
.dayta-tools-nav__item.is-active {
  background: #fff; color: #0554f2; font-weight: 700;
  box-shadow: 0 2px 14px rgba(20,19,59,.07);
}
[data-theme="dark"] .dayta-tools-nav__item.is-active {
  background: #161616; color: #D4AF37; box-shadow: none;
}

.dayta-tools-main__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-tools-main__head { border-bottom-color: #262626; }
.dayta-tools-main__title { font-size: 30px; font-weight: 700; color: #14133b; margin: 0; }
[data-theme="dark"] .dayta-tools-main__title { color: #F2F2F2; }
.dayta-tools-main__count {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; color: #8a93a8;
}
[data-theme="dark"] .dayta-tools-main__count { color: #8A8A8A !important; }

.dayta-tools-cat { display: flex; flex-direction: column; gap: 14px; }

/* Light mode puts white cards on a near-white page, so they need an edge to
   read as cards at all. Dark mode already separates on its own. */
.dayta-tools-row {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 22px;
  padding: 20px 24px; border: 1px solid #e6e9f2; border-radius: 16px;
  background: #fff; cursor: pointer; text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
[data-theme="dark"] .dayta-tools-row { background: #161616; border-color: transparent; }
.dayta-tools-row:hover {
  border-color: #0554f2; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20,19,59,.08);
}
[data-theme="dark"] .dayta-tools-row:hover { border-color: #D4AF37; box-shadow: none; }
.dayta-tools-row.is-open { border-color: #0554f2; }
[data-theme="dark"] .dayta-tools-row.is-open { border-color: #D4AF37; }
@media (max-width: 700px) {
  .dayta-tools-row { grid-template-columns: 52px 1fr; gap: 16px; }
  .dayta-tools-row__tags { grid-column: 1 / -1; }
}

.dayta-tools-row__badge {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 14px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .5px;
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: color-mix(in srgb, var(--tc) 78%, #14133b);
}
[data-theme="dark"] .dayta-tools-row__badge {
  background: color-mix(in srgb, var(--tc) 18%, transparent);
  color: color-mix(in srgb, var(--tc) 62%, #fff) !important;
}
@media (max-width: 700px) {
  .dayta-tools-row__badge { width: 52px; height: 52px; font-size: 11px; }
}

.dayta-tools-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dayta-tools-row__title {
  font-size: 18px; font-weight: 700; color: #14133b; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
[data-theme="dark"] .dayta-tools-row__title { color: #F2F2F2; }
.dayta-tools-row:hover .dayta-tools-row__title { color: #0554f2; }
[data-theme="dark"] .dayta-tools-row:hover .dayta-tools-row__title { color: #D4AF37; }
.dayta-tools-row__desc { font-size: 14px; line-height: 1.6; color: #5b6674; }
[data-theme="dark"] .dayta-tools-row__desc { color: #8A8A8A !important; }

.dayta-tools-row__tags { display: flex; gap: 8px; flex-shrink: 0; }
.dayta-tools-pill {
  padding: 7px 15px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px; white-space: nowrap;
}
.dayta-tools-pill::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: currentColor;
}
.dayta-tools-pill--free { background: #e9f9ef; color: #0f7a43 !important; }
.dayta-tools-pill--local { background: #eaf1ff; color: #1b4fd8 !important; }
[data-theme="dark"] .dayta-tools-pill--free { background: #12251a; color: #4ade80 !important; }
[data-theme="dark"] .dayta-tools-pill--local { background: #1a1f2e; color: #7aa5ff !important; }
.dayta-tools-pill--pro { background: #fdf3d8; color: #8a6a00 !important; }
[data-theme="dark"] .dayta-tools-pill--pro { background: #2a2312; color: #D4AF37 !important; }
/* "not ready yet" is a statement of fact, not a badge to show off - keep it
   quiet and dotless so it does not read as a feature */
.dayta-tools-pill--soon { background: transparent; color: #8a93a8 !important; border: 1px dashed #d9dded; }
[data-theme="dark"] .dayta-tools-pill--soon { border-color: #3a3a3a; color: #7a7a7a !important; }
.dayta-tools-pill--soon::before { display: none; }

/* a Pro row is a <button>, so it needs the row layout re-asserted */
.dayta-tools-row--pro {
  width: 100%; text-align: left; font: inherit;
}
.dayta-tools-row--pro .dayta-tools-row__title { text-decoration-style: dotted; }

/* ---- the waitlist that stands in for the Pro tools until they exist ---- */
.dayta-tools-waitlist {
  margin-top: 40px; padding: 34px 32px; border-radius: 18px;
  border: 1px solid #e6e9f2; background: #f7f9ff;
}
[data-theme="dark"] .dayta-tools-waitlist { border-color: #262626; background: #121212; }
.dayta-tools-waitlist[hidden] { display: none; }
.dayta-tools-waitlist__inner { max-width: 640px; }
.dayta-tools-waitlist__title { font-size: 22px; font-weight: 700; color: #14133b; margin: 0 0 10px; }
[data-theme="dark"] .dayta-tools-waitlist__title { color: #F2F2F2; }
.dayta-tools-waitlist__text { font-size: 15px; line-height: 1.75; color: #5b6674; margin: 0 0 20px; }
[data-theme="dark"] .dayta-tools-waitlist__text { color: #B4B4B4 !important; }
.dayta-tools-waitlist__tool { color: #0554f2; }
[data-theme="dark"] .dayta-tools-waitlist__tool { color: #D4AF37 !important; }
.dayta-tools-waitlist__form { display: flex; gap: 10px; flex-wrap: wrap; }
.dayta-tools-waitlist__email {
  flex: 1; min-width: 240px; padding: 14px 16px;
  border: 1px solid #d9dded; border-radius: 10px; background: #fff;
  font-size: 15px; font-family: inherit; color: #14133b;
}
[data-theme="dark"] .dayta-tools-waitlist__email {
  border-color: #333; background: #0F0F0F; color: #E4E4E4;
}
.dayta-tools-waitlist__email:focus { outline: 2px solid #0554f2; outline-offset: -1px; }
[data-theme="dark"] .dayta-tools-waitlist__email:focus { outline-color: #D4AF37; }
.dayta-tools-waitlist__form .dayta-tools-run { width: auto; }
.dayta-tools-waitlist__status { margin-top: 14px; }
.dayta-tools-waitlist__note {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e6e9f2;
  font-size: 13px; line-height: 1.7; color: #5b6674;
}
[data-theme="dark"] .dayta-tools-waitlist__note {
  border-top-color: #262626; color: #8A8A8A !important;
}

.dayta-tools-work__meta { display: flex; align-items: center; gap: 14px; }

/* ---- per-tool pages: back link and the other-tools grid at the foot ---- */
.dayta-tools-back {
  display: inline-block; margin-bottom: 26px;
  font-size: 14px; font-weight: 600; color: #0554f2; text-decoration: none;
}
[data-theme="dark"] .dayta-tools-back { color: #D4AF37 !important; }
.dayta-tools-back:hover { text-decoration: underline; }

.dayta-tools-more { margin-top: 56px; }
.dayta-tools-more__title {
  font-size: 19px; font-weight: 700; color: #14133b;
  padding-bottom: 16px; margin: 0 0 20px; border-bottom: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-tools-more__title { color: #F2F2F2; border-bottom-color: #262626; }
.dayta-tools-more__grid {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.dayta-tools-more__item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border: 1px solid #e6e9f2; border-radius: 12px;
  background: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: #14133b;
  transition: border-color .18s;
}
[data-theme="dark"] .dayta-tools-more__item {
  background: #161616; border-color: #262626; color: #E4E4E4 !important;
}
.dayta-tools-more__item:hover { border-color: #0554f2; }
[data-theme="dark"] .dayta-tools-more__item:hover { border-color: #D4AF37; }
.dayta-tools-more__badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: color-mix(in srgb, var(--tc) 78%, #14133b);
}
[data-theme="dark"] .dayta-tools-more__badge {
  background: color-mix(in srgb, var(--tc) 18%, transparent);
  color: color-mix(in srgb, var(--tc) 62%, #fff) !important;
}
.dayta-tools-more__item--all {
  justify-content: center; border-style: dashed; color: #0554f2 !important;
}
[data-theme="dark"] .dayta-tools-more__item--all {
  border-color: #333; color: #D4AF37 !important;
}

/* the one-file tools show the chosen file rather than a list */
.dayta-tools-fileinfo {
  padding: 11px 14px; margin: 0 0 18px; border-radius: 10px;
  border: 1px solid #e6e9f2; background: #fff;
  font-size: 14px; color: #14133b; overflow-wrap: anywhere;
}
[data-theme="dark"] .dayta-tools-fileinfo {
  border-color: #262626; background: #161616; color: #E4E4E4 !important;
}

/* ---- data tools: paste on the left, result on the right ---- */
.dayta-tools-work__body--data { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .dayta-tools-work__body--data { grid-template-columns: 1fr; } }
.dayta-tools-pane { padding: 24px 28px; }
.dayta-tools-pane + .dayta-tools-pane { border-left: 1px solid #e6e9f2; }
[data-theme="dark"] .dayta-tools-pane + .dayta-tools-pane { border-left-color: #262626; }
@media (max-width: 900px) {
  .dayta-tools-pane + .dayta-tools-pane { border-left: 0; border-top: 1px solid #e6e9f2; }
  [data-theme="dark"] .dayta-tools-pane + .dayta-tools-pane { border-top-color: #262626; }
}
.dayta-tools-pane .dayta-tools-side__label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dayta-tools-in, .dayta-tools-out {
  width: 100%; min-height: 300px; resize: vertical;
  padding: 14px 16px; border: 1px solid #e6e9f2; border-radius: 10px; background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.65; color: #14133b; white-space: pre;
}
[data-theme="dark"] .dayta-tools-in,
[data-theme="dark"] .dayta-tools-out {
  border-color: #262626; background: #0F0F0F; color: #E4E4E4;
}
.dayta-tools-in:focus, .dayta-tools-out:focus { outline: 2px solid #0554f2; outline-offset: -1px; }
[data-theme="dark"] .dayta-tools-in:focus,
[data-theme="dark"] .dayta-tools-out:focus { outline-color: #D4AF37; }

.dayta-tools-work__foot {
  padding: 0 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.dayta-tools-work__foot .dayta-tools-run { width: auto; min-width: 200px; }

/* On the data tools the textareas are the main event and dropping a file is
   the fallback, so the drop zone should not dominate the page. */
.dayta-tools-work[data-convert] .dayta-tools-drop {
  margin: 0 28px 26px; padding: 22px 20px;
}
.dayta-tools-work[data-convert] .dayta-tools-drop__main { font-size: 15px; }
.dayta-tools-work[data-convert] .dayta-tools-drop__icon { margin-bottom: 8px; }
.dayta-tools-work[data-convert] .dayta-tools-drop__icon svg { width: 24px; height: 24px; }

/* the file list a zip was opened into */
.dayta-tools-entries { padding: 0 28px 26px; margin: 0; }
.dayta-tools-entries:empty { display: none; }
.dayta-tools-entries li { cursor: default; }

/* what the OCR engine actually read, shown before you download anything -
   people need to see whether the scan was good enough before they trust it */
.dayta-tools-ocrtext {
  max-height: 340px; overflow: auto; margin: 0;
  padding: 22px 28px; border-top: 1px solid #e6e9f2; background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.7; color: #14133b;
  white-space: pre-wrap; word-break: break-word;
}
[data-theme="dark"] .dayta-tools-ocrtext {
  border-top-color: #262626; background: #101010; color: #B4B4B4 !important;
}

/* rendered page thumbnails from PDF to JPG */
.dayta-tools-thumbs {
  display: grid; gap: 16px; padding: 24px 28px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-tools-thumbs { border-top-color: #262626; }
.dayta-tools-thumbs:empty { display: none; }
.dayta-tools-thumb { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.dayta-tools-thumb img {
  width: 100%; height: auto; border-radius: 8px; border: 1px solid #e6e9f2; background: #fff;
}
[data-theme="dark"] .dayta-tools-thumb img { border-color: #2f2f2f; }

/* the privacy note that replaced the coin chip */
.dayta-tools-privacy {
  display: flex; align-items: flex-start; gap: 12px; max-width: 340px;
  padding: 14px 18px; border: 1px solid #e6e9f2; border-radius: 14px; background: #f4f6fc;
}
[data-theme="dark"] .dayta-tools-privacy { border-color: #262626; background: #161616; }
.dayta-tools-privacy__icon { flex-shrink: 0; color: #0554f2; }
[data-theme="dark"] .dayta-tools-privacy__icon { color: #D4AF37; }
.dayta-tools-privacy__icon svg { width: 22px; height: 22px; }
.dayta-tools-privacy__text { font-size: 12.5px; line-height: 1.6; color: #5b6674; }
[data-theme="dark"] .dayta-tools-privacy__text { color: #8A8A8A; }
.dayta-tools-privacy__text strong { display: block; font-size: 13.5px; color: #14133b; margin-bottom: 2px; }
[data-theme="dark"] .dayta-tools-privacy__text strong { color: #F2F2F2; }

/* file input is driven by the label in the drop zone */
.dayta-tools-hidden-input {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* the theme sets its own colour on every <label>, which would otherwise turn
   this into unreadable maroon - take the colour back from the parent span */
.dayta-tools-drop__sub label { cursor: pointer; margin: 0; color: inherit; font-weight: inherit; }
.dayta-tools-drop.is-over { border-color: #0554f2; background: rgba(5,84,242,.04); }
[data-theme="dark"] .dayta-tools-drop.is-over { border-color: #D4AF37; background: rgba(212,175,55,.06); }

/* file rows: name truncates, size and remove stay put */
.dayta-tools-files li { cursor: grab; }
.dayta-tools-files li.is-dragging { opacity: .45; }
.dayta-tools-files li.is-over { border-color: #0554f2; }
[data-theme="dark"] .dayta-tools-files li.is-over { border-color: #D4AF37; }
.dayta-tools-files__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dayta-tools-files li em { margin-left: auto; flex-shrink: 0; }
.dayta-tools-files__remove {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #8a93a8; font-size: 17px; line-height: 1; cursor: pointer;
}
.dayta-tools-files__remove:hover { background: #ffe8e8; color: #b91c1c; }
[data-theme="dark"] .dayta-tools-files__remove:hover { background: #2a1a1a; color: #ff8a8a; }

.dayta-tools-status { font-size: 12.5px; line-height: 1.6; margin: 12px 0 0; color: #5b6674; }
[data-theme="dark"] .dayta-tools-status { color: #8A8A8A; }
.dayta-tools-status--error { color: #b91c1c; }
[data-theme="dark"] .dayta-tools-status--error { color: #ff8a8a; }

/* A faded gold button reads as muddy olive rather than "not yet". Go neutral
   instead, so disabled looks deliberate. */
.dayta-tools-run:disabled,
.dayta-tools-run:disabled:hover {
  background: #eceef5; color: #97a0b5; cursor: not-allowed;
}
[data-theme="dark"] .dayta-tools-run:disabled,
[data-theme="dark"] .dayta-tools-run:disabled:hover {
  background: #1F1F1F; color: #6a6a6a;
}
.dayta-tools-run--ghost { background: transparent; border: 1px solid #d9dded; color: #14133b; }
[data-theme="dark"] .dayta-tools-run--ghost { background: transparent; border-color: #333; color: #E4E4E4; }
.dayta-tools-run--ghost:hover { background: #f4f6fc; }
[data-theme="dark"] .dayta-tools-run--ghost:hover { background: #1F1F1F; }

/* ---- studio layout: controls on the left, live canvas on the right ---- */
.dayta-tools-work__body--studio { grid-template-columns: 340px 1fr; }
@media (max-width: 900px) { .dayta-tools-work__body--studio { grid-template-columns: 1fr; } }

.dayta-tools-controls { padding: 26px 28px; border-right: 1px solid #e6e9f2; }
[data-theme="dark"] .dayta-tools-controls { border-right-color: #262626; }
@media (max-width: 900px) {
  .dayta-tools-controls { border-right: 0; border-bottom: 1px solid #e6e9f2; }
  [data-theme="dark"] .dayta-tools-controls { border-bottom-color: #262626; }
}
.dayta-tools-controls .dayta-tools-side__label { margin-top: 22px; }
.dayta-tools-controls .dayta-tools-side__label:first-child { margin-top: 0; }

.dayta-tools-field { margin-bottom: 14px; }
.dayta-tools-field label {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 600; color: #5b6674;
}
[data-theme="dark"] .dayta-tools-field label { color: #8A8A8A; }
.dayta-tools-field input[type="text"],
.dayta-tools-field select {
  width: 100%; padding: 9px 12px; border: 1px solid #e6e9f2; border-radius: 8px;
  background: #fff; color: #14133b; font-size: 14px; font-family: inherit;
}
[data-theme="dark"] .dayta-tools-field input[type="text"],
[data-theme="dark"] .dayta-tools-field select {
  border-color: #262626; background: #0F0F0F; color: #E4E4E4;
}
.dayta-tools-field input[type="text"]:focus,
.dayta-tools-field select:focus { outline: 2px solid #0554f2; outline-offset: -1px; }
[data-theme="dark"] .dayta-tools-field input[type="text"]:focus,
[data-theme="dark"] .dayta-tools-field select:focus { outline-color: #D4AF37; }

.dayta-tools-field input[type="range"] { width: 100%; accent-color: #0554f2; }
[data-theme="dark"] .dayta-tools-field input[type="range"] { accent-color: #D4AF37; }
.dayta-tools-field input[type="color"] {
  width: 46px; height: 32px; padding: 2px; border: 1px solid #e6e9f2;
  border-radius: 8px; background: #fff; cursor: pointer; vertical-align: middle;
}
[data-theme="dark"] .dayta-tools-field input[type="color"] { border-color: #262626; background: #0F0F0F; }

.dayta-tools-field--row { display: flex; align-items: flex-end; gap: 10px; }
.dayta-tools-field--row > div { flex: 1; }
.dayta-tools-mini {
  padding: 9px 14px; border: 1px solid #d9dded; border-radius: 8px;
  background: #f7f9ff; color: #14133b; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
[data-theme="dark"] .dayta-tools-mini { border-color: #333; background: #1F1F1F; color: #E4E4E4; }

.dayta-tools-swatches { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.dayta-tools-swatch {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--sw); border: 1px solid rgba(0,0,0,.18);
}
[data-theme="dark"] .dayta-tools-swatch { border-color: rgba(255,255,255,.22); }
.dayta-tools-swatch:hover { transform: scale(1.12); }

.dayta-tools-checks { margin: 4px 0 16px; }
.dayta-tools-checks label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 13.5px; color: #14133b; cursor: pointer;
}
[data-theme="dark"] .dayta-tools-checks label { color: #E4E4E4; }
.dayta-tools-checks input { accent-color: #0554f2; width: 15px; height: 15px; }
[data-theme="dark"] .dayta-tools-checks input { accent-color: #D4AF37; }

/* ---- preview: checkerboard so a transparent PNG reads as transparent ---- */
.dayta-tools-preview { padding: 26px 28px; display: flex; flex-direction: column; }
/* The preview surface stays light in BOTH themes, deliberately. These are
   black or navy inks destined for a white document - on a dark checkerboard a
   black signature is invisible, and the preview would be lying about how the
   result looks on paper. A border keeps it from reading as a hole in dark. */
.dayta-tools-preview__stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 330px; padding: 20px; border-radius: 12px; overflow: auto;
  border: 1px solid #e6e9f2;
  background-color: #fbfbfd;
  background-image:
    linear-gradient(45deg, #eceef5 25%, transparent 25%, transparent 75%, #eceef5 75%),
    linear-gradient(45deg, #eceef5 25%, transparent 25%, transparent 75%, #eceef5 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
[data-theme="dark"] .dayta-tools-preview__stage { border-color: #2f2f2f; }
.dayta-tools-preview__stage--wide { min-height: 220px; }
.dayta-tools-preview__stage canvas { max-width: 100%; height: auto; }
.dayta-tools-preview__meta {
  margin: 12px 0 0; text-align: center; font-size: 12px; color: #5b6674;
}
[data-theme="dark"] .dayta-tools-preview__meta { color: #8A8A8A; }
.dayta-tools-preview__actions { display: flex; gap: 10px; margin-top: 16px; }
.dayta-tools-preview__actions .dayta-tools-run { width: auto; flex: 1; }

/* --- beating the blanket rule in dayta-dark.css -----------------------------
   That file carries `p, li, span, td { color: var(--plat-dim) !important }`
   and loads after this one, so in dark mode every span and p in the panels
   above collapses to the same flat grey - the gold accents, the file names,
   and (worst) the red error text all disappear into it. !important is the
   only thing that beats !important, so re-assert the colours that carry
   meaning. Light mode never needs this: the dark sheet is disabled there.
--------------------------------------------------------------------------- */
[data-theme="dark"] .dayta-tools-card__cost,
[data-theme="dark"] .dayta-tools-drop__sub span { color: #D4AF37 !important; }
[data-theme="dark"] .dayta-tools-card__cta { color: #F2F2F2 !important; }
[data-theme="dark"] .dayta-tools-files li { color: #E4E4E4 !important; }
[data-theme="dark"] .dayta-tools-files li em,
[data-theme="dark"] .dayta-tools-work__note,
[data-theme="dark"] .dayta-tools-side__label,
[data-theme="dark"] .dayta-tools-side__free,
[data-theme="dark"] .dayta-tools-side__hint,
[data-theme="dark"] .dayta-tools-preview__meta,
[data-theme="dark"] .dayta-tools-privacy__text,
[data-theme="dark"] .dayta-tools-result__text span { color: #8A8A8A !important; }
[data-theme="dark"] .dayta-tools-files__grip { color: #555 !important; }
[data-theme="dark"] .dayta-tools-status { color: #8A8A8A !important; }
[data-theme="dark"] .dayta-tools-status--error { color: #ff8a8a !important; }
[data-theme="dark"] .dayta-tools-cost strong { color: #D4AF37 !important; }
[data-theme="dark"] .dayta-tools-privacy__text strong { color: #F2F2F2 !important; }
[data-theme="dark"] .dayta-tools-result__text strong { color: #F2F2F2 !important; }
/* the theme also strips the underline off labels */
.dayta-tools-drop__sub label { text-decoration: underline; }


/* --------------------------------------------- archived / retired projects --
   Harmony and Leondon are no longer running. The chip says so on the card so
   nobody has to read to the end of the summary to find out.
--------------------------------------------------------------------------- */
.dayta-project__archived {
  display: inline-block; margin: 0 0 12px;
  padding: 4px 12px; border-radius: 999px;
  border: 1px dashed #d9dded; background: transparent;
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #8a93a8;
}
[data-theme="dark"] .dayta-project__archived {
  border-color: #3a3a3a; color: #7a7a7a !important;
}

/* ------------------------------------------------------------- our story --- */
.dayta-story { padding: 80px 0 100px; }
.dayta-story__body p {
  font-size: 16.5px; line-height: 1.85; color: #5b6674; margin: 0 0 20px;
}
[data-theme="dark"] .dayta-story__body p { color: #B4B4B4 !important; }
.dayta-story__cta a {
  font-weight: 600; color: #0554f2; text-decoration: none;
}
[data-theme="dark"] .dayta-story__cta a { color: #D4AF37 !important; }
.dayta-story__cta a:hover { text-decoration: underline; }

/* ------------------------------------------------- blog with no posts yet --- */
.dayta-blog__empty {
  max-width: 640px; margin: 0 auto; padding: 70px 0 90px; text-align: center;
}
.dayta-blog__empty_title { font-size: 28px; font-weight: 700; color: #14133b; margin: 0 0 18px; }
[data-theme="dark"] .dayta-blog__empty_title { color: #F2F2F2; }
.dayta-blog__empty_text {
  font-size: 16px; line-height: 1.8; color: #5b6674; margin: 0 0 16px;
}
[data-theme="dark"] .dayta-blog__empty_text { color: #B4B4B4 !important; }
.dayta-blog__empty_links { display: flex; gap: 26px; justify-content: center; margin-top: 30px; }
.dayta-blog__empty_links a { font-weight: 600; color: #0554f2; text-decoration: none; }
[data-theme="dark"] .dayta-blog__empty_links a { color: #D4AF37 !important; }
.dayta-blog__empty_links a:hover { text-decoration: underline; }

/* ------------------------------------------------------- floating controls --
   Three things want the same corner: the assistant, the theme switch and the
   theme's own back-to-top button. The assistant keeps the bottom-right (it is
   the one people go looking for); the other two move to the bottom-left so
   nothing sits on top of anything else.

   .progress-wrap is the theme's control, fixed at right/bottom 1.5rem in
   style.css. style.css is never edited, so it is overridden here instead.
--------------------------------------------------------------------------- */
.progress-wrap {
  left: 5.5rem;      /* right of the theme switch, same line */
  right: auto;
  bottom: 1.9rem;    /* it is smaller, so nudge it onto the same optical line */
}

/* On a phone the assistant panel is full-width, so it sits over both corners.
   While it is open the other two floating controls step out of the way -
   nobody needs "back to top" mid-conversation. */
@media (max-width: 767px) {
  .dayta-chat-open .dayta-theme-toggle,
  .dayta-chat-open .progress-wrap { display: none !important; }
}

/* ------------------------------------------------------------ jump targets --
   The header is sticky, so a plain #anchor jump puts the section's heading
   underneath it. scroll-margin-top reserves that space, so /#contact lands on
   the form rather than behind the menu.
--------------------------------------------------------------------------- */
#contact,
#services,
#blog,
[id][class*="section"] { scroll-margin-top: 120px; }

@media (max-width: 991px) {
  #contact, #services, #blog { scroll-margin-top: 90px; }
}

/* ---------------------------------------------------------- legal pages ----
   Long-form reading: a narrow measure, generous line height, and headings
   that actually separate the sections.
--------------------------------------------------------------------------- */
.dayta-legal { padding: 80px 0 100px; }
.dayta-legal__inner { max-width: 720px; margin: 0 auto; }
.dayta-legal__updated {
  font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #8a93a8; margin: 0 0 24px;
}
[data-theme="dark"] .dayta-legal__updated { color: #7a7a7a !important; }
.dayta-legal__lead { font-size: 17.5px; line-height: 1.8; color: #14133b; margin: 0 0 36px; }
[data-theme="dark"] .dayta-legal__lead { color: #E4E4E4 !important; }
.dayta-legal h2 {
  font-size: 22px; font-weight: 700; color: #14133b;
  margin: 44px 0 14px; padding-top: 26px; border-top: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-legal h2 { color: #F2F2F2; border-top-color: #262626; }
.dayta-legal p, .dayta-legal li {
  font-size: 16px; line-height: 1.85; color: #5b6674;
}
[data-theme="dark"] .dayta-legal p,
[data-theme="dark"] .dayta-legal li { color: #B4B4B4 !important; }
.dayta-legal p { margin: 0 0 16px; }
.dayta-legal ul { margin: 0 0 20px; padding-left: 22px; }
.dayta-legal li { margin-bottom: 9px; }
.dayta-legal strong { color: #14133b; }
[data-theme="dark"] .dayta-legal strong { color: #F2F2F2 !important; }
.dayta-legal a { color: #0554f2; font-weight: 600; }
[data-theme="dark"] .dayta-legal a { color: #D4AF37 !important; }
.dayta-legal a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- testimonial ----
   One real quote, presented as a single featured card. Deliberately not a
   row of three: one genuine testimonial standing on its own reads as
   confident, whereas three slots with two of them padding reads as thin.
   When more real quotes arrive this becomes a grid.
--------------------------------------------------------------------------- */
.dayta-quote { padding: 20px 0 90px; }
.dayta-quote__card {
  position: relative; max-width: 760px; margin: 0 auto; padding: 46px 44px 38px;
  border: 1px solid #e6e9f2; border-radius: 18px; background: #fff;
}
[data-theme="dark"] .dayta-quote__card { border-color: #262626; background: #161616; }
.dayta-quote__mark {
  position: absolute; top: 6px; left: 30px;
  font-size: 84px; line-height: 1; color: #0554f2; opacity: .16;
  font-family: Georgia, "Times New Roman", serif;
}
[data-theme="dark"] .dayta-quote__mark { color: #D4AF37; opacity: .22; }
.dayta-quote__text {
  margin: 0 0 26px; padding: 0; border: 0;
  font-size: 19px; line-height: 1.75; color: #14133b;
}
[data-theme="dark"] .dayta-quote__text { color: #E4E4E4 !important; }
.dayta-quote__who {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 22px; border-top: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-quote__who { border-top-color: #262626; }
.dayta-quote__name { font-size: 15.5px; font-weight: 700; color: #14133b; }
[data-theme="dark"] .dayta-quote__name { color: #F2F2F2 !important; }
.dayta-quote__place { font-size: 13.5px; color: #5b6674; }
[data-theme="dark"] .dayta-quote__place { color: #8A8A8A !important; }
.footer__copyright_reg { margin: 6px 0 0; font-size: 12.5px; opacity: .75; }

@media (max-width: 767px) {
  .dayta-quote__card { padding: 38px 26px 30px; }
  .dayta-quote__text { font-size: 17px; }
}

/* ================================================================= footer ===
   Rebuilt. The old one had a centred copyright with a left-aligned legal line
   under it, four columns of very different heights leaving a dead area, and
   social icons parked in the bottom-left corner where the fixed theme switch
   sits - the sun icon landed on top of Facebook. Nothing lives in that corner
   any more, so the two stopped fighting.
--------------------------------------------------------------------------- */
.dayta-footer {
  border-top: 1px solid #e6e9f2;
  background: #f7f9ff;
  padding: 72px 0 0;
}
[data-theme="dark"] .dayta-footer { border-top-color: #262626; background: #0F0F0F; }

.dayta-footer__top {
  display: grid; gap: 44px;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  padding-bottom: 56px;
}
@media (max-width: 991px) {
  .dayta-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 575px) {
  .dayta-footer__top { grid-template-columns: 1fr; gap: 32px; }
}

.dayta-footer__logo { display: inline-block; margin-bottom: 20px; }
.dayta-footer__logo img { width: 200px; height: auto; }
.dayta-footer__pitch {
  font-size: 15px; line-height: 1.75; color: #5b6674; margin: 0; max-width: 34ch;
}
[data-theme="dark"] .dayta-footer__pitch { color: #8A8A8A !important; }

.dayta-footer__heading {
  font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: #14133b; margin: 0 0 18px;
}
[data-theme="dark"] .dayta-footer__heading { color: #F2F2F2; }

.dayta-footer__links, .dayta-footer__contact, .dayta-footer__meta {
  list-style: none; margin: 0; padding: 0;
}
.dayta-footer__links li { margin-bottom: 11px; }
.dayta-footer__links a, .dayta-footer__contact a {
  font-size: 14.5px; color: #5b6674; text-decoration: none;
}
[data-theme="dark"] .dayta-footer__links a,
[data-theme="dark"] .dayta-footer__contact a { color: #B4B4B4 !important; }
.dayta-footer__links a:hover, .dayta-footer__contact a:hover { color: #0554f2; }
[data-theme="dark"] .dayta-footer__links a:hover,
[data-theme="dark"] .dayta-footer__contact a:hover { color: #D4AF37 !important; }

/* contact details read as label + value, not as another link list */
.dayta-footer__contact li { margin-bottom: 14px; font-size: 14.5px; color: #5b6674; }
[data-theme="dark"] .dayta-footer__contact li { color: #B4B4B4 !important; }
.dayta-footer__label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: #8a93a8; margin-bottom: 3px;
}
[data-theme="dark"] .dayta-footer__label { color: #6f6f6f !important; }
.dayta-footer__cta {
  display: inline-block; margin-top: 6px;
  font-size: 14.5px; font-weight: 600; color: #0554f2; text-decoration: none;
}
[data-theme="dark"] .dayta-footer__cta { color: #D4AF37 !important; }
.dayta-footer__cta:hover { text-decoration: underline; }

/* one bottom bar: the legal line sits WITH the copyright, not under it */
.dayta-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 22px 0 26px; border-top: 1px solid #e6e9f2;
}
[data-theme="dark"] .dayta-footer__bottom { border-top-color: #262626; }
.dayta-footer__legal { margin: 0; font-size: 13px; color: #8a93a8; }
[data-theme="dark"] .dayta-footer__legal { color: #6f6f6f !important; }
.dayta-footer__meta { display: flex; gap: 22px; }
.dayta-footer__meta a { font-size: 13px; color: #8a93a8; text-decoration: none; }
[data-theme="dark"] .dayta-footer__meta a { color: #6f6f6f !important; }
.dayta-footer__meta a:hover { color: #0554f2; }
[data-theme="dark"] .dayta-footer__meta a:hover { color: #D4AF37 !important; }

/* Fixed controls sit over the very bottom of the page: the theme switch and
   back-to-top bottom-left, the assistant launcher bottom-right. Give the last
   line enough room that none of them lands on the copyright. */
.dayta-footer__bottom { padding-bottom: 92px; }
@media (max-width: 767px) {
  .dayta-footer__bottom { justify-content: flex-start; padding-bottom: 150px; }
}

/* WhatsApp links. The icon carries the recognition, so it needs to sit tight
   to the number rather than float away from it. */
.dayta-wa { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.dayta-wa i { color: #25D366; font-size: 1.05em; }
.dayta-wa:hover { text-decoration: underline; }
.dayta-wa--onDark, .dayta-wa--onDark:hover { color: #fff; }

/* --------------------------------------------------------- contact form ----
   The form used to be four unlabelled placeholders. Placeholders vanish the
   moment you type, so anyone checking their own answers has nothing to read.
--------------------------------------------------------------------------- */
/* Light base, dark override. This was #eef2ff - a near-white meant for the
   dark theme - which made every label invisible on the light background. */
.contact-form__label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 600; color: #1b2440;
}
.contact-form__label span { font-weight: 400; opacity: .6; }
[data-theme="dark"] .contact-form__label { color: #E4E4E4 !important; }

/* The honeypot must be reachable by a bot reading the HTML but invisible and
   unreachable for a person - display:none is skipped by some bots, so it is
   moved off-screen instead. */
.dayta-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-response { margin-top: 16px; font-size: 14.5px; line-height: 1.6; min-height: 1.2em; }
.form-response--ok { color: #4ade80; }
.form-response--error { color: #ff8a8a; }

/* "+" beside a counter: the figures are a floor, not a total - consultancy and
   smaller jobs never reached the projects page. Kept outside the animated
   span, because the count-up plugin needs plain digits to work with. */
.counter__plus {
  font-size: .62em; font-weight: 700; vertical-align: 0.45em; margin-left: 2px;
}
.counter__note {
  margin: 26px 0 0; text-align: center; font-size: 13.5px; color: rgba(255,255,255,.62);
}
.counter__note a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------- nice-select ------
   custom.js runs $("select").niceSelect() over the whole site, replacing every
   dropdown with its own markup. The widget's closed state inherits the dark
   theme fine, but its open list is hard-coded white, so choosing a subject on
   the contact form meant a white panel appearing over a dark page.

   The options are <li>, so dayta-dark.css's blanket
   `p, li, span, td { color: … !important }` beats any plain colour here -
   hence the !important on each one.
--------------------------------------------------------------------------- */
[data-theme="dark"] .nice-select .list {
  background: #161616;
  border: 1px solid #2f2f2f;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .nice-select .option { color: #E4E4E4 !important; }
[data-theme="dark"] .nice-select .option:hover,
[data-theme="dark"] .nice-select .option.focus,
[data-theme="dark"] .nice-select .option.selected.focus {
  background: #262626;
  color: #D4AF37 !important;
}
[data-theme="dark"] .nice-select .option.selected { font-weight: 700; }
/* the closed control showed the choice in the same dim grey as body text */
[data-theme="dark"] .nice-select .current { color: #F2F2F2 !important; }
[data-theme="dark"] .nice-select:after { border-color: #D4AF37; }