/*
 * DTF Zone — public site pages (policies, FAQ, instructions, and the pages
 * built from the client's design package). Loaded by the bridge only on the
 * slugs in dtfzone_bridge_site_pages(); the app pages never see it.
 *
 * Measurements come from the 1024px-wide mockups: body 21pt italic, section
 * headings 24pt bold, page title 53pt bold caps, content column ~800px.
 * Fonts are the site's own — the mockups' Calibri/Verdana are not web fonts.
 */

.dtf-site {
  /* One type scale, matched to the home page. Titles grow with the screen
     as the home page's do: they ride the page zoom (36px is the home page's
     hero size at 1024 wide). Reading text stays a fixed size, as it does on
     the home page, so it divides the zoom back out with --fx. */
  --fx: calc(1px / var(--dtf-zoom, 1));
  --t-title: clamp(28px, 7vw, 36px);
  --t-section: clamp(22px, 5.5vw, 26px);
  --dtf-green: #4a7c59;
  --dtf-green-dark: #3d6749;
  --dtf-ink: #1e1e1e;
  --dtf-muted: #444;
  --dtf-paper: #f2f2f2;
  background: var(--dtf-paper);
  color: var(--dtf-ink);
  /* The site's own font: the Elementor kit's body typography (Roboto). */
  font-family: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
  padding: 0 16px;
  /* The mockups are 1024px wide. Above that the whole page scales with the
     window (--dtf-zoom = width / 1024, set in the page head), so content
     fills the screen the way the home page's does instead of sitting in a
     fixed 900px column. Without the script it renders at mockup size. */
  zoom: var(--dtf-zoom, 1);
}

/* ── quick-links strip under the header ── */
.dtf-site-strip {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 0 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  font-style: italic;
  font-size: 1.05rem;
}
.dtf-site-strip a { color: var(--dtf-ink); text-decoration: none; }
.dtf-site-strip a:hover { text-decoration: underline; }
.dtf-site-strip .dtf-site-cta {
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dtf-green);
  padding: 16px 44px;
  border-radius: 6px;
}
.dtf-site-strip .dtf-site-cta:hover { background: var(--dtf-green-dark); text-decoration: none; }

/* ── the page ── */
.dtf-site-page {
  max-width: 900px;
  margin: 0 auto;
  font-size: calc(18 * var(--fx));
  line-height: 1.45;
  font-style: italic;
}
.dtf-site-page h1 {
  font-style: normal;
  font-weight: 800;
  font-size: var(--t-title);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  margin: 8px 0 28px;
}
.dtf-site-page .updated {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  font-size: calc(15 * var(--fx));
  margin: -16px 0 28px;
}
.dtf-site-page h2 {
  font-style: normal;
  font-weight: 700;
  font-size: calc(22 * var(--fx));
  line-height: 1.25;
  margin: 30px 0 6px;
}
.dtf-site-page h3 {
  font-style: normal;
  font-weight: 700;
  font-size: calc(19 * var(--fx));
  margin: 22px 0 4px;
}
.dtf-site-page p { margin: 0 0 14px; }
.dtf-site-page ul { margin: 0 0 16px; padding-left: 1.2em; }
.dtf-site-page li { margin: 0 0 4px; }
.dtf-site-page strong { font-weight: 700; }
.dtf-site-page .up { font-style: normal; }
.dtf-site-page a { color: var(--dtf-green-dark); }

@media (max-width: 640px) {
  .dtf-site-strip { justify-content: center; flex-wrap: wrap; gap: 16px 24px; }
  .dtf-site-strip .dtf-site-cta { padding: 12px 28px; }
  .dtf-site-page { font-size: 17px; }
}

/* ── shared header (site-header.html) ── */
.dtf-site-header {
  background: #fff;
  margin: 0 -16px;
  /* Matches the home page header: logo at ~11.5% of the width and scaling
     with the page, but a fixed 46px above and below it (139px at 1512px). */
  padding: calc(46px / var(--dtf-zoom, 1)) min(115px, 11.5%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Elementor resets img height to auto; be specific. */
.dtf-site .dtf-site-logo img { display: block; height: 32px !important; width: auto !important; max-width: 240px; }
.dtf-site-nav { display: flex; }
/* The home page centres its menu at 67% of the width; so the menu doesn't
   jump between pages, do the same wherever there's room for it. */
@media (min-width: 900px) {
  .dtf-site-header { position: relative; }
  .dtf-site-nav { position: absolute; left: 67%; top: 50%; transform: translate(-50%, -50%); }
}
/* The home page's menu stays at a fixed 16px while the page scales, so
   divide out the zoom. Current page: gold with a 3px underline, as there. */
.dtf-site-nav a {
  color: #333;
  text-decoration: none;
  font-weight: 800;
  font-size: calc(16px / var(--dtf-zoom, 1));
  line-height: calc(20px / var(--dtf-zoom, 1));
  padding: calc(13px / var(--dtf-zoom, 1)) calc(20px / var(--dtf-zoom, 1));
  border-bottom: calc(3px / var(--dtf-zoom, 1)) solid transparent;
  text-transform: uppercase;
}
.dtf-site-nav a:hover,
[data-page="overview"] .dtf-site-nav a[href="/overview/"],
[data-page="key-features"] .dtf-site-nav a[href="/key-features/"] { color: #d99e28; border-bottom-color: #d99e28; }

/* ── shared footer (site-footer.html), from the client's DTFZONE_Footer.pdf.
   Sizes are the PDF's own at its 1024px width; the page zoom scales them. ── */
.dtf-site-footer { margin: 48px -16px 0; color: #231f20; font-style: normal; }
.dtf-site-footer a { text-decoration: none; }
.dtf-foot-main {
  position: relative; background: #d2d2d2; padding: 18px 16px 30px;
  /* Wider than the PDF's columns: Roboto sets wider than its Calibri, and
     the lines should break where the PDF's do. */
  display: grid; grid-template-columns: 280px 300px 250px; justify-content: center;
}
.dtf-foot-col { padding: 0 24px; }
.dtf-foot-col + .dtf-foot-col { border-left: 2px solid #40826b; }
.dtf-foot-col h2 { font-size: 24px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; margin: 0 0 14px; }
.dtf-foot-print { color: #40826b; }
.dtf-foot-plugin { color: #dda53b; }
.dtf-foot-col p { font-size: 10.3px; font-weight: 700; line-height: 1.25; color: #030404; margin: 0 0 16px; }
.dtf-foot-col .dtf-foot-lead { font-size: 14.3px; line-height: 1.2; margin-bottom: 6px; }
.dtf-foot-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 29px; padding: 0 20px; border-radius: 4px;
  background: #40826b; border: 1px solid #2f6a55; color: #fff !important;
  font-size: 7px; font-weight: 700; letter-spacing: .04em;
}
.dtf-foot-btn:hover { background: #356e5a; }
.dtf-foot-install { padding: 0 14px; }
.dtf-foot-install svg { width: 18px; height: 18px; flex: none; }
.dtf-foot-install span { display: flex; flex-direction: column; line-height: 1.1; }
.dtf-foot-install small { font-size: 5.1px; letter-spacing: 0; }
.dtf-foot-news { display: flex; align-items: center; } /* full height, so its divider is too */
.dtf-foot-subscribe label { display: block; font-size: 8.7px; font-weight: 700; margin: 0 0 6px; }
.dtf-foot-field { display: flex; }
/* .dtf-site: the theme styles every input and button; the PDF has square, borderless ones. */
.dtf-site .dtf-foot-field input {
  width: 141px; height: 26px; border: 0; border-radius: 0; box-shadow: none; margin: 0; background: #bfbebe; padding: 0 8px;
  font: inherit; font-size: 8.9px; font-weight: 700; color: #231f20;
}
.dtf-site .dtf-foot-field input::placeholder { color: #8c8c8c; }
.dtf-site .dtf-foot-field button {
  height: 26px; padding: 0 12px; border: 0; border-radius: 0; box-shadow: none; margin: 0; line-height: 1; background: #40826b; color: #fff; cursor: pointer;
  font: inherit; font-size: 8.8px; font-weight: 700;
}
.dtf-site .dtf-foot-field button:disabled { opacity: .6; cursor: default; }
.dtf-foot-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dtf-foot-status { display: block; min-height: 1.2em; margin-top: 4px; font-size: 7.5px; font-weight: 700; }
.dtf-foot-status.is-ok { color: #2f6a55; }
.dtf-foot-status.is-error { color: #b42318; }
.dtf-foot-partner { position: absolute; right: 10px; bottom: 8px; margin: 0; font-size: 8.3px; font-style: italic; }
.dtf-foot-social {
  display: flex; justify-content: center; gap: 3px; margin: 0; padding: 13px 16px;
  background: #bfbebe; border-top: 1px solid #a9a8a8; border-bottom: 1px solid #a9a8a8;
}
.dtf-foot-social a { line-height: 0; }
.dtf-site .dtf-foot-social img { width: 29px !important; height: 29px !important; border-radius: 6px; }
.dtf-foot-social a:hover img { opacity: .8; }
.dtf-foot-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 60px; background: #c6c5c5; padding: 8px 16px; }
.dtf-foot-legal a { color: #231f20 !important; font-size: 10.7px; font-weight: 700; letter-spacing: .02em; }
.dtf-foot-legal a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  /* Phones: columns stack, and the PDF's small print is sized up to read. */
  .dtf-foot-main { grid-template-columns: 1fr; padding: 24px 16px 40px; text-align: center; }
  .dtf-foot-col { padding: 18px 0; }
  .dtf-foot-col + .dtf-foot-col { border-left: 0; border-top: 2px solid #40826b; }
  .dtf-foot-col p { font-size: 14px; }
  .dtf-foot-col .dtf-foot-lead { font-size: 17px; }
  .dtf-foot-btn { font-size: 12px; min-height: 40px; }
  .dtf-foot-install small { font-size: 10px; }
  .dtf-foot-subscribe label { font-size: 14px; }
  .dtf-foot-news { justify-content: center; }
  .dtf-foot-field { justify-content: center; }
  .dtf-site .dtf-foot-field input { width: auto; flex: 1; max-width: 240px; height: 40px; font-size: 14px; }
  .dtf-site .dtf-foot-field button { height: 40px; font-size: 14px; }
  .dtf-foot-status { font-size: 13px; }
  .dtf-foot-partner { position: static; margin-top: 8px; font-size: 12px; }
  .dtf-site .dtf-foot-social img { width: 40px !important; height: 40px !important; }
  .dtf-foot-legal { gap: 8px 20px; }
  .dtf-foot-legal a { font-size: 12px; }
}

@media (max-width: 640px) {
  .dtf-site-header { flex-direction: column; padding: 16px; }
  .dtf-site-nav { flex-wrap: wrap; justify-content: center; }
  .dtf-site-nav a { padding: 8px 10px; }
}

/* ── Artwork Considerations: card grid ── */
.dtf-site-page .dtf-title-case { text-transform: none; letter-spacing: 0; }
.dtf-site-page .dtf-lead { font-size: calc(21 * var(--fx)); line-height: 1.35; text-align: center; margin: 0 auto 30px; max-width: 760px; }
.dtf-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 0 16px; }
.dtf-card { background: #fff; padding: 22px 24px 26px; text-align: left; }
.dtf-card h2 { font-size: calc(20 * var(--fx)); text-align: center; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 16px; }
.dtf-site .dtf-card img { display: block; width: 100% !important; height: auto !important; margin: 0 auto 18px; }
.dtf-card p, .dtf-card li { font-size: calc(17 * var(--fx)); line-height: 1.4; }
.dtf-card ul { padding-left: 1.1em; }
/* One pair: same width, same type (the client asked for matching fonts). */
.dtf-ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.dtf-ctas .dtf-btn { min-width: 400px; }
.dtf-btn {
  display: inline-block; font-style: normal; font-weight: 700; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; line-height: 1.25; color: #fff !important; text-decoration: none;
  background: var(--dtf-green); padding: 12px 32px; border-radius: 4px; min-width: 300px;
}
.dtf-btn:hover { background: var(--dtf-green-dark); }
@media (max-width: 640px) {
  .dtf-cards { grid-template-columns: 1fr; }
  .dtf-btn, .dtf-ctas .dtf-btn { min-width: 0; width: 100%; }
}

/* ══ Plugin product pages (Demo, Knowledge Base, Changelog, Reviews) ══ */
.dtf-plugin-hero { max-width: 900px; margin: 0 auto; padding: 56px 0 24px; }
.dtf-plugin-hero h1 {
  font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: var(--t-title); line-height: 1.12; margin: 0 0 10px; color: #2b2b2b;
}
.dtf-plugin-sub { font-style: normal; font-weight: 700; font-size: 1.2rem; color: #2b2b2b; margin: 0 0 28px; }
.dtf-plugin-cards { display: flex; gap: 14px; align-items: flex-end; }
.dtf-site .dtf-plugin-cards img { flex: 1 1 0; width: 20% !important; height: auto !important; display: block; }
.dtf-site .dtf-plugin-cards .dtf-plugin-card-tools { flex: 0 0 9%; width: 9% !important; }
.dtf-plugin-tabs {
  background: var(--dtf-green); margin: 0 -16px; padding: 0 16px;
  display: flex; justify-content: center; gap: clamp(16px, 3vw, 44px); flex-wrap: wrap;
}
.dtf-plugin-tabs a {
  color: #fff; text-decoration: none; font-style: normal; font-weight: 700; text-transform: uppercase;
  font-size: calc(16 * var(--fx)); letter-spacing: .02em; padding: calc(14 * var(--fx)) 0 calc(10 * var(--fx)); border-bottom: 4px solid transparent;
}
.dtf-plugin-tabs a:hover { border-bottom-color: rgba(255,255,255,.6); }
/* the shared tab bar learns the current page from data-page on the wrapper */
[data-page="demo"] .dtf-plugin-tabs a[href="/demo/"],
[data-page="knowledge-base"] .dtf-plugin-tabs a[href="/knowledge-base/"],
[data-page="changelog"] .dtf-plugin-tabs a[href="/changelog/"],
[data-page="reviews"] .dtf-plugin-tabs a[href="/reviews/"] { border-bottom-color: #f0c33c; }
.dtf-plugin-body { max-width: 900px; margin: 0 auto; padding: 42px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: start; }
.dtf-plugin-main { font-style: normal; }
.dtf-panel { border: 2px solid var(--dtf-green); border-radius: 14px; background: var(--dtf-paper); padding: 22px 24px 26px; }
.dtf-panel-title { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 18px; }
.dtf-panel-title::after { content: ""; display: inline-block; width: 22px; height: 6px; background: var(--dtf-green); border-radius: 3px; margin-left: 12px; vertical-align: middle; }
.dtf-panel-title-bare { margin: 0 0 8px; }
.dtf-panel-more { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 22px 0 0; }
.dtf-panel-more::before { content: ""; width: 70px; height: 5px; background: var(--dtf-green); border-radius: 3px; }
.dtf-panel-btn { display: inline-block; background: var(--dtf-green); color: #fff !important; text-decoration: none; font-size: .8rem; font-weight: 700; padding: 10px 16px; border-radius: 4px; }
.dtf-panel-btn:hover { background: var(--dtf-green-dark); }
/* demo */
.dtf-demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dtf-demo-tile { display: block; aspect-ratio: 16/9; background: #111; border-radius: 3px; }
.dtf-demo-tile:hover { outline: 3px solid var(--dtf-green); }
/* knowledge base */
.dtf-kb-search { display: flex; border: 2px solid var(--dtf-green); border-radius: 8px; overflow: hidden; margin: 0 0 18px; max-width: 320px; background: #fff; }
.dtf-kb-search input { flex: 1; border: 0; padding: 10px 12px; font: inherit; font-size: .8rem; letter-spacing: .04em; min-width: 0; }
.dtf-kb-search button { border: 0; background: var(--dtf-green); color: #fff; font: inherit; font-weight: 700; font-size: .8rem; padding: 0 16px; cursor: pointer; }
.dtf-kb-list { list-style: none; margin: 0; padding: 0; }
.dtf-kb-list li { border-bottom: 2px solid var(--dtf-green); padding: 14px 0; }
.dtf-kb-list a { color: inherit; text-decoration: none; display: block; }
.dtf-kb-list h3 { font-size: 1.05rem; margin: 0 0 4px; }
.dtf-kb-list p { font-size: .85rem; line-height: 1.35; margin: 0; }
/* changelog */
.dtf-changelog-tabs { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; }
.dtf-changelog-tabs a { color: #b8860b; text-decoration: none; border-bottom: 2px solid #e2b93d; padding-bottom: 2px; }
.dtf-changelog h3 { font-size: .95rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #333; }
.dtf-changelog p, .dtf-changelog li { font-size: .82rem; line-height: 1.4; }
.dtf-changelog li { margin-bottom: 8px; }
/* reviews */
.dtf-reviews-pending p { font-size: .95rem; }
.dtf-reviews-score { font-size: 1rem; color: #e2b93d; margin: -4px 0 14px; }
.dtf-reviews-score strong { color: #222; }
.dtf-review { border: 2px solid var(--dtf-green); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; background: var(--dtf-paper); }
.dtf-review-stars { color: #e2b93d; margin: 0 0 4px; }
.dtf-review blockquote { margin: 0 0 8px; font-size: .9rem; font-weight: 700; }
.dtf-review-by { font-size: .85rem; font-weight: 700; margin: 0; }
.dtf-review-date { font-size: .6rem; margin: 4px 0 0; }
/* sidebar */
.dtf-plugin-side { font-style: normal; }
.dtf-plugin-start { background: #a6bfaa; border-radius: 10px; padding: 18px 20px 20px; }
.dtf-plugin-start h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin: 0 0 14px; color: #1f3a2a; }
.dtf-plugin-start ul { list-style: none; margin: 0; padding: 0; }
.dtf-plugin-start li { position: relative; padding-left: 22px; font-size: .72rem; font-weight: 700; margin: 0 0 12px; line-height: 1.35; }
.dtf-plugin-start li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--dtf-green); color: #fff; font-size: .6rem; text-align: center; line-height: 15px; }
.dtf-plugin-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 16px 0; position: relative; }
.dtf-plugin-actions::before { content: ""; position: absolute; left: 16px; top: 14px; width: 70px; height: 5px; background: var(--dtf-green); border-radius: 3px; }
.dtf-plugin-install, .dtf-plugin-demo { background: #f2f542; color: #222 !important; text-decoration: none; font-size: .7rem; font-weight: 700; padding: 9px 16px; border-radius: 4px; }
.dtf-plugin-demo { font-size: .62rem; padding: 4px 8px; }
.dtf-plugin-specs { border: 2px solid #555; border-radius: 10px; padding: 12px 14px; margin: 0; font-size: .72rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.dtf-plugin-specs dt { font-weight: 700; }
.dtf-plugin-specs dd { margin: 0; text-align: right; font-weight: 700; }
.dtf-plugin-specs dt:not(:first-child), .dtf-plugin-specs dd:not(:nth-child(2)) { border-top: 1px solid #999; padding-top: 10px; }
/* ══ Upload Design ══ */
.dtf-upload { max-width: 900px; margin: 0 auto; padding: 36px 0 60px; font-style: normal; }
.dtf-upload-btn { display: inline-block; background: #d8d8d8; color: #222 !important; text-decoration: none; font-weight: 700; font-size: 1.4rem; padding: 10px 22px; border-radius: 6px; }
.dtf-upload-btn:hover { background: #c8c8c8; }
/* Lines up with the sheet, which sits 60px in to leave room for its height label (as in the PDF). */
.dtf-upload-top { margin: 0 0 14px; padding-left: 60px; }
.dtf-upload-grid { display: grid; grid-template-columns: 400px 1fr; gap: 40px; align-items: start; }
/* Padding, not margin: Elementor zeroes figure margins. The padding is the
   room for the height label on the sheet's left. */
.dtf-upload-sheet { position: relative; margin: 0; padding-left: 60px; }
.dtf-site .dtf-upload-sheet img { width: 100% !important; height: auto !important; display: block; }
.dtf-upload-dim { position: absolute; font-style: italic; font-size: 1.15rem; }
.dtf-upload-h { left: 0; top: 50%; white-space: nowrap; transform: translateY(-50%); }
.dtf-upload-w { left: calc(50% + 30px); bottom: -34px; transform: translateX(-50%); }
.dtf-upload-info h1 { font-size: var(--t-section); text-transform: uppercase; text-align: center; letter-spacing: .02em; margin: 6px 0 12px; font-style: normal; }
.dtf-upload-info ul { font-style: italic; font-size: 1rem; line-height: 1.45; margin: 0 0 100px; padding-left: 1.1em; }
.dtf-upload-read { text-align: center; font-weight: 700; font-size: .85rem; text-transform: uppercase; margin: 0 0 10px; }
.dtf-upload-info p { text-align: center; margin: 0 0 14px; }
.dtf-upload-features { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; margin: 80px 0 0; text-align: center; }
.dtf-site .dtf-upload-features img { height: 56px !important; width: auto !important; display: block; margin: 0 auto 14px; }
.dtf-upload-features h2 { font-size: 1.25rem; text-transform: uppercase; margin: 0 0 8px; font-style: normal; }
.dtf-upload-features p { font-style: italic; font-size: 1.05rem; line-height: 1.4; margin: 0 auto; max-width: 300px; }

@media (max-width: 760px) {
  .dtf-plugin-body, .dtf-upload-grid, .dtf-upload-features { grid-template-columns: 1fr; }
  .dtf-plugin-cards { flex-wrap: wrap; }
  .dtf-site .dtf-plugin-cards img { width: 45% !important; flex: 0 0 45%; }
  .dtf-demo-grid { grid-template-columns: 1fr 1fr; }
}

/* ══ Key Features panel ══ */
.dtf-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; counter-reset: feat; }
.dtf-features li { counter-increment: feat; position: relative; padding-left: 30px; }
.dtf-features li::before { content: counter(feat) "."; position: absolute; left: 0; top: 0; font-weight: 800; font-size: 1rem; }
.dtf-features h3 { font-size: .9rem; font-weight: 800; margin: 0 0 6px; }
.dtf-features p { font-size: .72rem; font-weight: 700; line-height: 1.4; margin: 0; }

/* ══ Overview ══ */
.dtf-ov-hero { max-width: 900px; margin: 0 auto; padding: 40px 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; font-style: normal; }
.dtf-ov-hero h1 { font-style: normal; font-weight: 800; text-transform: uppercase; font-size: var(--t-title); line-height: 1.2; margin: 0 0 18px; color: #2b2b2b; letter-spacing: .01em; }
.dtf-ov-hero-text p { font-weight: 700; font-size: calc(21 * var(--fx)); line-height: 1.4; margin: 0 0 22px; }
.dtf-ov-btn { display: inline-block; background: var(--dtf-green); color: #fff !important; text-decoration: none; font-weight: 700; font-size: calc(18 * var(--fx)); padding: 12px 28px; border-radius: 6px; font-style: normal; }
.dtf-ov-btn:hover { background: var(--dtf-green-dark); }
.dtf-ov-btn-sm { font-size: calc(14 * var(--fx)); padding: 8px 22px; }
.dtf-ov-btn-grey { display: inline-block; background: #e6e6e6; color: #222 !important; border: 1px solid #b5b5b5; text-decoration: none; font-weight: 700; font-size: calc(15 * var(--fx)); letter-spacing: .06em; text-transform: uppercase; padding: 12px 24px; border-radius: 6px; }
.dtf-site .dtf-ov-hero-art img { width: 100% !important; height: auto !important; display: block; }
.dtf-ov-hero-links { display: flex; gap: 12px; margin: 16px 0 0; }
.dtf-ov { max-width: 900px; margin: 0 auto; padding: 30px 0 50px; font-style: normal; }
.dtf-ov section { margin: 0 0 44px; }
.dtf-ov h2 { font-style: normal; font-weight: 800; font-size: var(--t-section); line-height: 1.2; margin: 0 0 14px; }
.dtf-ov-about { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.dtf-ov-about-art { background: #9db9a1; padding: 16px; }
.dtf-site .dtf-ov-about-art img { width: 100% !important; height: auto !important; display: block; }
.dtf-ov-kicker { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 2px; font-size: calc(19 * var(--fx)); }
.dtf-ov-about p { font-size: calc(18 * var(--fx)); line-height: 1.5; margin: 0 0 14px; }
.dtf-ov-build { background: #fff; padding: 36px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.dtf-ov-build h2 { text-transform: uppercase; font-size: var(--t-section); letter-spacing: .02em; text-align: center; }
.dtf-ov-checks { list-style: none; margin: 0 0 24px; padding: 0 0 0 20px; }
.dtf-ov-checks li { position: relative; padding-left: 28px; margin: 0 0 12px; font-size: calc(18 * var(--fx)); }
.dtf-ov-checks li::before { content: "✔"; position: absolute; left: 0; font-weight: 900; }
.dtf-ov-build-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.dtf-ov-build-btns .dtf-ov-btn { min-width: 210px; text-align: center; }
.dtf-site .dtf-ov-build-art img { width: 100% !important; height: auto !important; display: block; }
.dtf-ov-here h2, .dtf-ov-support h2 { text-align: center; font-size: var(--t-section); }
.dtf-ov-here h2 span, .dtf-ov-support h2 span { color: var(--dtf-green-dark); }
.dtf-ov-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.dtf-site .dtf-ov-services img { height: 110px !important; width: auto !important; display: block; margin: 0 auto 14px; }
.dtf-ov-services h3 { font-size: calc(18 * var(--fx)); font-weight: 800; text-transform: uppercase; margin: 0 0 8px; padding-left: 30px; position: relative; }
.dtf-ov-services h3::before { content: "✔"; position: absolute; left: 0; top: -2px; color: var(--dtf-green); font-size: 1.1rem; }
.dtf-ov-services p { font-size: calc(14 * var(--fx)); font-weight: 700; line-height: 1.4; margin: 0 0 0 30px; }
.dtf-ov-kb { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.dtf-ov-kb h2 { color: var(--dtf-green-dark); font-size: var(--t-section); }
.dtf-ov-kb > div > p { font-weight: 700; font-size: calc(17 * var(--fx)); line-height: 1.4; margin: 0 0 22px; }
.dtf-ov-kb .dtf-ov-btn { min-width: 190px; text-align: center; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.dtf-ov-faq details { margin: 0 0 16px; }
.dtf-ov-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: calc(15 * var(--fx)); color: var(--dtf-green-dark); border: 1.5px solid #333; border-radius: 8px; padding: 10px 14px; }
.dtf-ov-faq summary::-webkit-details-marker { display: none; }
.dtf-ov-faq summary::before { content: "▲"; font-size: .65rem; margin-right: 10px; color: #222; }
.dtf-ov-faq details[open] summary::before { content: "▼"; }
.dtf-ov-faq p { font-size: calc(15 * var(--fx)); font-weight: 700; line-height: 1.4; margin: 10px 14px 0; }
.dtf-ov-faq a { color: #d33; font-style: italic; }
.dtf-ov-form { background: #fff; padding: 20px 24px 24px; max-width: calc(680 * var(--fx)); margin: 0 auto; }
.dtf-ov-form-tabs { border-bottom: 2px solid #333; padding: 0 0 8px; margin: 0 0 18px; font-size: calc(15 * var(--fx)); display: flex; gap: 24px; }
.dtf-ov-form-tabs strong { border-bottom: 3px solid #222; padding-bottom: 8px; margin-bottom: -10px; }
.dtf-ov-form-tabs a { color: #222; text-decoration: none; }
.dtf-ov-form label { display: block; font-weight: 700; font-size: calc(14 * var(--fx)); margin: 0 0 12px; }
.dtf-ov-form input, .dtf-ov-form select, .dtf-ov-form textarea { display: block; width: 100%; margin-top: 6px; border: 1.5px solid #333; border-radius: 6px; padding: 7px 10px; font: inherit; font-size: calc(15 * var(--fx)); background: #fff; }
.dtf-ov-form-submit { text-align: right; margin: 0; }
.dtf-ov-form button { background: #7a7a7a; color: #fff; border: 0; border-radius: 6px; font: inherit; font-weight: 700; font-size: calc(14 * var(--fx)); padding: 10px 20px; cursor: pointer; }
.dtf-ov-form button:hover { background: var(--dtf-green); }
@media (max-width: 760px) {
  .dtf-ov-hero, .dtf-ov-about, .dtf-ov-build, .dtf-ov-kb, .dtf-features { grid-template-columns: 1fr; }
  .dtf-ov-services { grid-template-columns: 1fr; }
}

/* ══ Knowledge Base ══ */
.dtf-kb { max-width: 900px; margin: 0 auto; padding: 24px 0 60px; display: grid; grid-template-columns: 200px 1fr; gap: 40px; font-style: normal; position: relative; }
.dtf-kb-cta { grid-column: 1 / -1; text-align: right; margin: 0 0 10px; }
.dtf-kb-cta a { display: inline-block; background: #f0c33c; color: #222 !important; text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem; padding: 10px 14px; border-radius: 4px; }
.dtf-kb-side { border-left: 2px solid var(--dtf-green); padding-left: 0; }
.dtf-kb-side .dtf-kb-search { margin: 0 0 14px 0; }
.dtf-kb-side .dtf-kb-search input { width: 100%; border: 2px solid var(--dtf-green); border-radius: 6px; padding: 8px 10px 8px 34px; font: inherit; font-size: .7rem; letter-spacing: .06em; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6d47' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 16px no-repeat; }
.dtf-kb-side-head { margin: 0 0 8px; font-size: .8rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dtf-kb-side-head a { color: #222; text-decoration: none; background: #d7e6da; padding: 3px 8px; border-radius: 3px; }
.dtf-kb-side-head a span { font-weight: 400; }
.dtf-kb-side-list { list-style: none; margin: 0; padding: 0; }
.dtf-kb-side-list li { margin: 0 0 12px; padding-left: 26px; position: relative; }
.dtf-kb-side-list li::before, .dtf-kb-doc::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 17px; border: 1.5px solid #2c4a37; border-radius: 2px; background: linear-gradient(#2c4a37 0 0) 3px 5px / 8px 1.5px no-repeat, linear-gradient(#2c4a37 0 0) 3px 9px / 8px 1.5px no-repeat, linear-gradient(#2c4a37 0 0) 3px 13px / 5px 1.5px no-repeat; }
.dtf-kb-side-list a { color: #222; text-decoration: none; font-size: .62rem; line-height: 1.3; display: block; }
.dtf-kb-side-list strong { display: block; font-weight: 800; }
.dtf-kb-folder { display: inline-block; width: 18px; height: 14px; border: 2px solid #2c4a37; border-radius: 2px; position: relative; vertical-align: middle; }
.dtf-kb-folder::before { content: ""; position: absolute; left: -2px; top: -6px; width: 8px; height: 4px; border: 2px solid #2c4a37; border-bottom: 0; border-radius: 2px 2px 0 0; }
.dtf-kb-main { min-width: 0; }
.dtf-kb-crumbs { font-size: .7rem; color: #555; margin: 0 0 14px; }
.dtf-kb-crumbs a { color: #555; text-decoration: none; }
.dtf-kb-meta { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 6px; }
.dtf-kb-main h1 { font-style: normal; font-weight: 800; font-size: var(--t-section); line-height: 1.2; margin: 0 0 18px; position: relative; padding-left: 0; }
.dtf-kb-main h1 .dtf-kb-doc { display: none; }
.dtf-kb-index-title { text-align: center; font-size: var(--t-title) !important; padding-bottom: 12px; border-bottom: 2px solid var(--dtf-green); }
.dtf-kb-index-title .dtf-kb-folder { display: block; margin: 0 auto 8px; width: 34px; height: 26px; }
.dtf-kb-kicker { font-size: .95rem; font-weight: 800; margin: 0 0 4px; }
.dtf-kb-main h2 { font-style: normal; font-weight: 800; font-size: 1.15rem; line-height: 1.3; margin: 26px 0 10px; }
.dtf-kb-main h3 { font-style: normal; font-weight: 800; font-size: .9rem; margin: 18px 0 4px; }
.dtf-kb-main p, .dtf-kb-main li { font-size: .85rem; font-weight: 700; line-height: 1.5; }
.dtf-kb-main p { margin: 0 0 12px; }
.dtf-kb-main ol, .dtf-kb-main ul { padding-left: 1.3em; margin: 0 0 14px; }
.dtf-kb-main li { margin: 0 0 8px; }
.dtf-kb-teasers .dtf-kb-teaser { border-bottom: 2px solid var(--dtf-green); padding: 14px 0 12px; }
.dtf-kb-teaser h2 { margin: 0 0 8px; position: relative; padding-left: 24px; font-size: 1rem; }
.dtf-kb-teaser h2 .dtf-kb-doc { display: inline-block; position: absolute; left: 0; top: 0; width: 14px; height: 17px; }
.dtf-kb-teaser h2 .dtf-kb-doc::before { left: 0; top: 0; }
.dtf-kb-teaser a { color: #222; text-decoration: none; }
.dtf-kb-teaser p:last-child { margin: 0; }
/* tab underline for the two rebuilt pages */
[data-page="overview"] .dtf-plugin-tabs a[href="/overview/"],
[data-page="key-features"] .dtf-plugin-tabs a[href="/key-features/"] { border-bottom-color: #f0c33c; }
@media (max-width: 760px) { .dtf-kb { grid-template-columns: 1fr; } .dtf-kb-side { border-left: 0; } }

/* contact form: honeypot (never shown) and status line */
.dtf-ov-form .dtf-ov-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.dtf-ov-form { position: relative; }
.dtf-ov-form-status { min-height: 1.2em; font-size: .85rem; font-weight: 700; margin: 0 0 10px; }
.dtf-ov-form-status.is-ok { color: var(--dtf-green-dark); }
.dtf-ov-form-status.is-error { color: #b42318; }

/* Belt and braces: whatever Elementor puts around the widget on a site page
   must not re-introduce side gutters. */
.elementor-widget-html:has(> .elementor-widget-container > .dtf-site),
.elementor-widget-html:has(> .dtf-site) { width: 100%; max-width: none; }