/* YT Doctor Finance design system — tokens.css (v1, 18 Oct 2026)
   Paste ABOVE components.css. Everything lives on the .ydf wrapper: nothing here touches the theme. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap");
.ydf{
  /* brand greens */
  --ydf-green:#0F6E56;        /* buttons, links, ticks, numbers */
  --ydf-green-2:#0F5943;      /* green hover, gradients */
  --ydf-forest:#0A2E24;       /* headings, dark panels */
  --ydf-night:#061A13;        /* deepest bg, video frame */
  /* mint */
  --ydf-mint-wash:#E1F5EE;    /* pale tint: chips, info callout, icon tiles */
  --ydf-mint-line:#BFE3D6;    /* borders on mint */
  --ydf-mint:#9FE1CB;         /* text + accents on dark green */
  --ydf-mint-bright:#4FD1A5;  /* "live" dot only */
  /* gold */
  --ydf-gold:#BA7517;         /* the main call to action, offer flags */
  --ydf-gold-2:#9C6213;       /* gold hover */
  --ydf-gold-bright:#E3A23B;  /* gold on dark green (italics in headings) */
  --ydf-gold-wash:#FDF3E3;    /* update / warning note bg, savings badge */
  --ydf-gold-line:#E9C88F;    /* border on gold wash */
  --ydf-gold-ink:#7A4D0F;     /* text on gold wash */
  /* neutrals */
  --ydf-ink:#1D2B27;          /* main text */
  --ydf-text-2:#4A5A55;       /* lead text, list text */
  --ydf-muted:#5F6F6A;        /* sub text */
  --ydf-faint:#8A9893;        /* disclaimers, stamps, old prices */
  --ydf-line:#E3EBE8;         /* card + input borders */
  --ydf-line-soft:#EEF3F1;    /* row dividers */
  --ydf-soft:#F7FBF9;         /* soft section bg */
  --ydf-white:#FFFFFF;
  /* status + outside brands */
  --ydf-red:#A8322A;  --ydf-red-wash:#FDE8E6;
  --ydf-whatsapp:#1FA855; --ydf-whatsapp-2:#178A45;
  --ydf-youtube:#FF0000;
  /* gradients */
  --ydf-grad-dark:linear-gradient(135deg,#0A2E24 0%,#0F5943 60%,#0F6E56 100%);
  --ydf-grad-hero:linear-gradient(180deg,#F3F8F6,#FFFFFF);
  /* fonts */
  --ydf-f-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --ydf-f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ydf-f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  /* type scale (phone → desktop) */
  --ydf-t-display:clamp(40px,6vw,76px);  /* landing hero only */
  --ydf-t-h1:clamp(32px,4.4vw,52px);
  --ydf-t-h2:clamp(27px,3.2vw,40px);
  --ydf-t-h2-big:clamp(32px,4.6vw,56px); /* landing section titles */
  --ydf-t-h3:21px;
  --ydf-t-lead:clamp(16.5px,1.5vw,18px);
  --ydf-t-body:16px;
  --ydf-t-read:17px;                      /* articles + modules */
  --ydf-t-small:14px;
  --ydf-t-tiny:12.5px;
  --ydf-t-label:12px;                     /* mono eyebrow */
  /* spacing: 4-based */
  --ydf-s1:4px; --ydf-s2:8px; --ydf-s3:12px; --ydf-s4:16px; --ydf-s5:20px; --ydf-s6:24px;
  --ydf-s7:32px; --ydf-s8:48px; --ydf-s9:64px; --ydf-s10:96px;
  /* radius */
  --ydf-r-xs:6px;    /* tags */
  --ydf-r-sm:10px;   /* inputs, copy buttons */
  --ydf-r-md:12px;   /* buttons, notes */
  --ydf-r-lg:16px;   /* cards, video */
  --ydf-r-xl:22px;   /* offer + feature cards, end banner */
  --ydf-r-pill:999px;
  /* shadows (all green-tinted) */
  --ydf-sh-sm:0 4px 16px rgba(10,46,36,.06);
  --ydf-sh-md:0 14px 40px -12px rgba(10,46,36,.18);
  --ydf-sh-lg:0 24px 54px -20px rgba(10,46,36,.42);
  /* layout */
  --ydf-max:1120px; --ydf-max-read:740px; --ydf-gutter:20px;
  --ydf-ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:600px){.ydf{--ydf-gutter:16px;--ydf-t-read:16.5px}}
/* YT Doctor Finance design system — components.css (v1, 18 Oct 2026)
   Needs tokens.css above it. Every rule starts with .ydf, so the theme and old pages are untouched.
   Phone first: base rules are for phones, @media (min-width:601px / 901px) adds the desktop layout. */

/* ---------- 1. wrapper + base ---------- */
.ydf{font-family:var(--ydf-f-body);font-size:var(--ydf-t-body);line-height:1.6;color:var(--ydf-ink);background:var(--ydf-white);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;text-align:left}
.ydf *,.ydf *::before,.ydf *::after{box-sizing:border-box}
.ydf :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,table){margin:0;padding:0}
.ydf :where(h1,h2,h3,h4){font-family:var(--ydf-f-head);color:var(--ydf-forest);font-weight:700;line-height:1.15;letter-spacing:0;text-transform:none;text-wrap:balance}
.ydf :where(img,svg,video,iframe){max-width:100%}
.ydf a{color:var(--ydf-green);text-decoration:none;font-weight:700}
.ydf a:hover{text-decoration:underline}
.ydf [hidden]{display:none!important}
.ydf :focus-visible{outline:3px solid var(--ydf-gold-bright);outline-offset:3px;border-radius:6px}
.ydf-wrap{max-width:var(--ydf-max);margin:0 auto;padding-left:var(--ydf-gutter);padding-right:var(--ydf-gutter)}
.ydf-read{max-width:var(--ydf-max-read);margin:0 auto;padding-left:var(--ydf-gutter);padding-right:var(--ydf-gutter)}
.ydf-sec{padding:var(--ydf-s9) 0}
.ydf-sec--soft{background:var(--ydf-soft)}
.ydf-sec--dark{background:var(--ydf-grad-dark);color:#fff}
.ydf-sec.ydf-sec--tight{padding:var(--ydf-s7) 0}
@media (min-width:901px){.ydf-sec{padding:var(--ydf-s10) 0}}

/* ---------- 2. type ---------- */
.ydf .ydf-display{font-family:var(--ydf-f-head);font-size:var(--ydf-t-display);line-height:1.02;letter-spacing:-.015em;font-weight:700;color:var(--ydf-forest)}
.ydf .ydf-h1{font-family:var(--ydf-f-head);font-size:var(--ydf-t-h1);line-height:1.12;font-weight:700;color:var(--ydf-forest)}
.ydf .ydf-h2{font-family:var(--ydf-f-head);font-size:var(--ydf-t-h2);line-height:1.15;font-weight:700;color:var(--ydf-forest)}
.ydf .ydf-h2--big{font-size:var(--ydf-t-h2-big);line-height:1.05;letter-spacing:-.01em}
.ydf .ydf-h3{font-family:var(--ydf-f-head);font-size:var(--ydf-t-h3);line-height:1.25;font-weight:700;color:var(--ydf-forest)}
.ydf :where(.ydf-display,.ydf-h1,.ydf-h2,.ydf-h3) em{font-style:italic;font-weight:600;color:var(--ydf-green)}
.ydf .ydf-lead{font-size:var(--ydf-t-lead);color:var(--ydf-text-2);line-height:1.6;max-width:36em}
.ydf :is(.ydf-display,.ydf-h1,.ydf-h2,.ydf-h3,h1,h2,h3)+.ydf-lead{margin-top:var(--ydf-s3)}
.ydf .ydf-banner :is(.ydf-h2,h2)+p{margin-top:6px}
.ydf .ydf-sub{font-size:var(--ydf-t-small);color:var(--ydf-muted)}
.ydf .ydf-disc{font-size:var(--ydf-t-tiny);color:var(--ydf-faint);line-height:1.6;border-top:1px solid var(--ydf-line);padding-top:var(--ydf-s4);margin-top:var(--ydf-s7)}
.ydf .ydf-eyebrow{display:block;font:500 var(--ydf-t-label)/1.3 var(--ydf-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ydf-green);margin-bottom:var(--ydf-s3)}
.ydf .ydf-eyebrow--gold{color:var(--ydf-gold)}
.ydf .ydf-shead{margin-bottom:var(--ydf-s7)}
.ydf .ydf-shead .ydf-lead{margin-top:var(--ydf-s3)}
/* dark sections flip colours */
.ydf :is(.ydf-sec--dark,.ydf-card--dark,.ydf-offer--dark,.ydf-banner) :is(.ydf-display,.ydf-h1,.ydf-h2,.ydf-h3,h1,h2,h3){color:#fff}
.ydf :is(.ydf-sec--dark,.ydf-card--dark,.ydf-offer--dark,.ydf-banner) :is(.ydf-display,.ydf-h1,.ydf-h2,.ydf-h3) em{color:var(--ydf-gold-bright)}
.ydf :is(.ydf-sec--dark,.ydf-card--dark,.ydf-offer--dark,.ydf-banner) .ydf-eyebrow{color:var(--ydf-mint)}
.ydf :is(.ydf-sec--dark,.ydf-card--dark,.ydf-offer--dark,.ydf-banner) :is(.ydf-lead,.ydf-sub,p){color:rgba(255,255,255,.8)}

/* reading text (articles, modules): plain h2/p/ul written by hand get spacing */
.ydf .ydf-prose{font-size:var(--ydf-t-read);line-height:1.75;color:var(--ydf-ink)}
.ydf .ydf-prose>*+*{margin-top:1em}
.ydf .ydf-prose>h2{font-size:clamp(24px,2.6vw,30px);margin-top:1.8em}
.ydf .ydf-prose>h3{font-size:clamp(19px,2vw,22px);margin-top:1.5em}
.ydf .ydf-prose>:where(ul,ol){padding-left:1.3em}
.ydf .ydf-prose>:where(ul,ol)>li+li{margin-top:.35em}
.ydf .ydf-prose>:where(ul,ol)>li::marker{color:var(--ydf-green)}
.ydf .ydf-prose>:where(p,ul,ol) a:not(.ydf-btn){text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ydf .ydf-prose strong{color:var(--ydf-forest)}

/* ---------- 3. buttons ---------- */
.ydf .ydf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 22px;border-radius:var(--ydf-r-md);border:1.5px solid var(--ydf-green);background:var(--ydf-green);color:#fff;font:700 15.5px/1.2 var(--ydf-f-body);text-align:center;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,border-color .15s;box-shadow:none;-webkit-appearance:none}
.ydf .ydf-btn:hover{background:var(--ydf-green-2);border-color:var(--ydf-green-2);color:#fff;text-decoration:none;transform:translateY(-1px)}
.ydf .ydf-btn--gold{background:var(--ydf-gold);border-color:var(--ydf-gold)}
.ydf .ydf-btn--gold:hover{background:var(--ydf-gold-2);border-color:var(--ydf-gold-2)}
.ydf .ydf-btn--outline{background:transparent;color:var(--ydf-green)}
.ydf .ydf-btn--outline:hover{background:var(--ydf-mint-wash);color:var(--ydf-green);border-color:var(--ydf-green)}
.ydf .ydf-btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.ydf .ydf-btn--light:hover{background:rgba(255,255,255,.1);border-color:#fff}
.ydf .ydf-btn--whatsapp{background:var(--ydf-whatsapp);border-color:var(--ydf-whatsapp)}
.ydf .ydf-btn--whatsapp:hover{background:var(--ydf-whatsapp-2);border-color:var(--ydf-whatsapp-2)}
.ydf .ydf-btn--sm{min-height:40px;padding:10px 16px;font-size:14px;border-radius:var(--ydf-r-sm)}
.ydf .ydf-btn--block{display:flex;width:100%}
.ydf .ydf-btns{display:flex;flex-wrap:wrap;gap:var(--ydf-s3)}
@media (max-width:600px){.ydf .ydf-btns>.ydf-btn{flex:1 1 100%}}
.ydf .ydf-link{font-weight:700;color:var(--ydf-green)}
.ydf .ydf-link::after{content:" \2192"}

/* ---------- 4. cards + grids ---------- */
.ydf .ydf-grid{display:grid;gap:var(--ydf-s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:601px){.ydf .ydf-grid--2,.ydf .ydf-grid--3,.ydf .ydf-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.ydf .ydf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.ydf .ydf-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.ydf .ydf-grid{gap:var(--ydf-s5)}}
.ydf .ydf-card{background:#fff;border:1px solid var(--ydf-line);border-radius:var(--ydf-r-lg);padding:var(--ydf-s5);min-width:0}
@media (min-width:601px){.ydf .ydf-card{padding:var(--ydf-s6)}}
.ydf .ydf-card--soft{background:var(--ydf-soft)}
.ydf .ydf-card--mint{background:var(--ydf-mint-wash);border-color:var(--ydf-mint-line)}
.ydf .ydf-card--raised{border-color:transparent;box-shadow:var(--ydf-sh-md)}
.ydf .ydf-card--dark{background:var(--ydf-grad-dark);border:0;color:#fff}
.ydf a.ydf-card{display:block;color:inherit;font-weight:400;transition:transform .15s,box-shadow .15s}
.ydf a.ydf-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--ydf-sh-md)}
.ydf .ydf-card .ydf-h3{margin:var(--ydf-s2) 0}
.ydf .ydf-card p{font-size:15px;color:var(--ydf-text-2)}
.ydf .ydf-card--dark p{color:rgba(255,255,255,.8)}
.ydf .ydf-icon{width:44px;height:44px;border-radius:var(--ydf-r-md);background:var(--ydf-mint-wash);color:var(--ydf-green);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;margin-bottom:var(--ydf-s3)}
.ydf .ydf-card--dark .ydf-icon{background:rgba(255,255,255,.1);color:var(--ydf-mint)}
.ydf .ydf-stat b{display:block;font:700 clamp(40px,5vw,60px)/1 var(--ydf-f-head);color:var(--ydf-forest)}
.ydf .ydf-stat span{display:block;font-weight:700;margin-top:var(--ydf-s2)}
.ydf .ydf-stat small{display:block;color:var(--ydf-muted);font-size:14px}
.ydf .ydf-card--dark.ydf-stat b{color:#fff}

/* ---------- 5. offer card ---------- */
.ydf .ydf-offer{position:relative;overflow:hidden;background:#fff;border-radius:var(--ydf-r-xl);border-top:6px solid var(--ydf-gold);box-shadow:var(--ydf-sh-md);padding:var(--ydf-s6) var(--ydf-s5);display:flex;flex-direction:column;min-width:0}
@media (min-width:601px){.ydf .ydf-offer{padding:28px 30px}}
.ydf .ydf-offer--dark{background:var(--ydf-grad-dark);color:#fff;border-top:0;box-shadow:var(--ydf-sh-lg)}
.ydf .ydf-offer .ydf-h3{font-size:clamp(23px,2.4vw,28px)}
.ydf .ydf-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:var(--ydf-s4) 0 var(--ydf-s1)}
.ydf .ydf-price b{font:700 clamp(40px,4.4vw,52px)/1 var(--ydf-f-head);color:var(--ydf-forest);white-space:nowrap}
.ydf .ydf-offer--dark .ydf-price b{color:#fff}
.ydf .ydf-price s{font:500 18px var(--ydf-f-mono);color:var(--ydf-faint)}
.ydf .ydf-offer--dark .ydf-price s{color:rgba(255,255,255,.5)}
.ydf .ydf-offer .ydf-sub{margin-bottom:var(--ydf-s4)}
.ydf .ydf-offer--dark .ydf-sub{color:var(--ydf-mint)}
.ydf .ydf-offer .ydf-ticks{margin-bottom:var(--ydf-s5)}
.ydf .ydf-offer .ydf-btn{margin-top:auto}
.ydf .ydf-offer-note{display:block;text-align:center;font:500 11.5px var(--ydf-f-mono);letter-spacing:.08em;color:var(--ydf-faint);margin-top:var(--ydf-s3)}
.ydf .ydf-offer--dark .ydf-offer-note{color:rgba(255,255,255,.55)}
.ydf .ydf-ribbon{position:absolute;top:22px;right:-48px;transform:rotate(35deg);background:var(--ydf-gold);color:#fff;font:500 11px var(--ydf-f-mono);letter-spacing:.14em;padding:6px 56px;text-transform:uppercase}

/* ---------- 6. lists ---------- */
.ydf .ydf-ticks,.ydf .ydf-crosses{list-style:none;padding:0;display:grid;gap:8px;font-size:15px;color:var(--ydf-text-2)}
.ydf .ydf-ticks li,.ydf .ydf-crosses li{display:grid;grid-template-columns:24px minmax(0,1fr)}
.ydf .ydf-ticks li::before{content:"\2713";color:var(--ydf-green);font-weight:700}
.ydf .ydf-crosses li::before{content:"\2715";color:var(--ydf-red);font-weight:700}
.ydf :is(.ydf-sec--dark,.ydf-card--dark,.ydf-offer--dark) .ydf-ticks{color:rgba(255,255,255,.88)}
.ydf :is(.ydf-sec--dark,.ydf-card--dark,.ydf-offer--dark) .ydf-ticks li::before{color:var(--ydf-mint)}

/* ---------- 7. notes + callouts ---------- */
.ydf .ydf-note{background:var(--ydf-gold-wash);border:1px solid var(--ydf-gold-line);border-left:4px solid var(--ydf-gold);border-radius:var(--ydf-r-md);padding:14px 16px;color:var(--ydf-gold-ink);font-size:15px;line-height:1.6}
.ydf .ydf-note strong,.ydf .ydf-note b{color:var(--ydf-gold-ink)}
.ydf .ydf-note a{color:var(--ydf-green)}
.ydf .ydf-note-label{display:inline-block;font:500 11px var(--ydf-f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--ydf-gold);color:#fff;border-radius:var(--ydf-r-xs);padding:3px 7px;margin-right:8px;vertical-align:1px}
.ydf .ydf-callout{background:var(--ydf-mint-wash);border-left:4px solid var(--ydf-green);border-radius:0 var(--ydf-r-md) var(--ydf-r-md) 0;padding:16px 20px;color:var(--ydf-ink);font-size:15.5px;line-height:1.65}
.ydf .ydf-callout strong{color:var(--ydf-green)}
.ydf .ydf-callout-title{display:block;font:500 11.5px var(--ydf-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ydf-green);margin-bottom:6px}
.ydf .ydf-quote{background:var(--ydf-forest);color:#fff;border-radius:var(--ydf-r-lg);padding:28px 24px;text-align:center}
.ydf .ydf-quote p{font:italic 600 clamp(19px,2vw,23px)/1.5 var(--ydf-f-head);color:#fff}
.ydf .ydf-quote cite{display:block;margin-top:12px;font:500 11.5px var(--ydf-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ydf-mint);font-style:normal}
.ydf .ydf-takeaways{background:var(--ydf-forest);color:#fff;border-radius:var(--ydf-r-lg);padding:22px 22px 18px}
.ydf .ydf-takeaways .ydf-h3{color:#fff;margin-bottom:12px}
.ydf .ydf-takeaways .ydf-ticks{color:rgba(255,255,255,.9)}
.ydf .ydf-takeaways .ydf-ticks li::before{color:var(--ydf-mint)}

/* ---------- 8. badges, chips, tags ---------- */
.ydf .ydf-chips{display:flex;flex-wrap:wrap;gap:8px}
.ydf .ydf-chip{display:inline-flex;align-items:center;gap:6px;font:700 12.5px/1.2 var(--ydf-f-body);padding:6px 12px;border-radius:var(--ydf-r-pill);background:var(--ydf-mint-wash);color:var(--ydf-green);white-space:nowrap;text-decoration:none}
.ydf .ydf-chip--line{background:#fff;border:1px solid var(--ydf-line);color:var(--ydf-forest)}
.ydf .ydf-chip--gold{background:var(--ydf-gold-wash);color:var(--ydf-gold-ink)}
.ydf .ydf-chip--red{background:var(--ydf-red-wash);color:var(--ydf-red)}
.ydf .ydf-chip--solid{background:var(--ydf-green);color:#fff}
.ydf .ydf-tag{display:inline-block;font:500 10.5px/1.3 var(--ydf-f-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:var(--ydf-r-xs);background:var(--ydf-mint-wash);color:var(--ydf-green);white-space:nowrap}
.ydf .ydf-tag--gold{background:var(--ydf-gold);color:#fff}
.ydf .ydf-tag--soon{background:var(--ydf-line-soft);color:var(--ydf-muted)}
.ydf .ydf-live{display:inline-flex;align-items:center;gap:7px;font:500 11px var(--ydf-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ydf-green)}
.ydf .ydf-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ydf-mint-bright);animation:ydf-ping 2s infinite}
@keyframes ydf-ping{0%{box-shadow:0 0 0 0 rgba(79,209,165,.6)}70%{box-shadow:0 0 0 8px rgba(79,209,165,0)}100%{box-shadow:0 0 0 0 rgba(79,209,165,0)}}

/* ---------- 9. table ---------- */
.ydf .ydf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ydf-line);border-radius:var(--ydf-r-md)}
.ydf .ydf-table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px;background:#fff}
.ydf .ydf-table th{background:var(--ydf-forest);color:#fff;font-weight:700;text-align:left;padding:11px 14px;font-size:14px}
.ydf .ydf-table td{padding:11px 14px;border-top:1px solid var(--ydf-line-soft);vertical-align:top}
.ydf .ydf-table tbody tr:nth-child(even) td{background:var(--ydf-soft)}
.ydf .ydf-table .ydf-num{text-align:right;font-family:var(--ydf-f-mono);font-size:14px;white-space:nowrap}
.ydf .ydf-table tr.ydf-hl td{background:var(--ydf-mint-wash);font-weight:700}
.ydf .ydf-up{color:var(--ydf-green)} .ydf .ydf-down{color:var(--ydf-red)}
.ydf .ydf-caption{font-size:13px;color:var(--ydf-faint);margin-top:8px}

/* ---------- 10. video block (payment-page poster) ---------- */
.ydf .ydf-video{position:relative;display:block;width:100%;aspect-ratio:16/9;min-height:200px;border:0;padding:0;border-radius:var(--ydf-r-lg);overflow:hidden;cursor:pointer;color:#fff;text-align:left;background:radial-gradient(circle at 78% 30%,rgba(159,225,203,.28),transparent 45%),var(--ydf-grad-dark);box-shadow:var(--ydf-sh-lg);font-family:var(--ydf-f-body)}
.ydf .ydf-video-badge{position:absolute;left:14px;top:14px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);border-radius:var(--ydf-r-pill);padding:4px 11px;font:500 10.5px var(--ydf-f-mono);letter-spacing:.12em;text-transform:uppercase}
.ydf .ydf-video-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:#fff;color:var(--ydf-forest);display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;box-shadow:0 0 0 8px rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.35);transition:transform .2s}
.ydf .ydf-video:hover .ydf-video-play{transform:translate(-50%,-50%) scale(1.07)}
.ydf .ydf-video-title{position:absolute;left:16px;right:16px;bottom:32px;text-align:center;font:700 17px/1.25 var(--ydf-f-head)}
.ydf .ydf-video-title small{display:block;font:500 12.5px var(--ydf-f-body);color:#BFE3D6;margin-top:3px}
.ydf .ydf-video-bar{position:absolute;left:0;right:0;bottom:0;height:22px;background:rgba(0,0,0,.35);display:flex;align-items:center;gap:10px;padding:0 12px;font:500 10.5px var(--ydf-f-mono);color:#CFE9DF}
.ydf .ydf-video-bar i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.25)}
.ydf .ydf-video-candles{display:none;position:absolute;right:22px;bottom:50px;align-items:flex-end;gap:7px;opacity:.35}
.ydf .ydf-video-candles i{display:block;width:9px;border-radius:2px;background:var(--ydf-mint)}
@media (min-width:601px){.ydf .ydf-video-play{width:70px;height:70px;font-size:24px;box-shadow:0 0 0 10px rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.35)}.ydf .ydf-video-title{font-size:20px}.ydf .ydf-video-candles{display:flex}}
.ydf .ydf-video-frame{position:relative;aspect-ratio:16/9;background:var(--ydf-night);border-radius:var(--ydf-r-lg);overflow:hidden}
.ydf .ydf-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 11. FAQ accordion (plain <details>, no script) ---------- */
.ydf .ydf-faq{border:1px solid var(--ydf-line);border-radius:var(--ydf-r-lg);background:#fff;overflow:hidden}
.ydf .ydf-faq details+details{border-top:1px solid var(--ydf-line-soft)}
.ydf .ydf-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;font-weight:700;font-size:16px;color:var(--ydf-forest)}
.ydf .ydf-faq summary::-webkit-details-marker{display:none}
.ydf .ydf-faq summary::after{content:"+";margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ydf-mint-wash);color:var(--ydf-green);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:500;transition:transform .2s}
.ydf .ydf-faq details[open] summary::after{transform:rotate(45deg);background:var(--ydf-green);color:#fff}
.ydf .ydf-faq summary:hover{background:var(--ydf-soft)}
.ydf .ydf-faq .ydf-faq-a{padding:0 18px 18px;color:var(--ydf-text-2);font-size:15.5px;line-height:1.65}

/* ---------- 12. numbered steps ---------- */
.ydf .ydf-steps{list-style:none;padding:0;display:grid;gap:var(--ydf-s3);grid-template-columns:minmax(0,1fr);counter-reset:ydf-step}
@media (min-width:601px){.ydf .ydf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.ydf .ydf-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ydf-s4)}}
.ydf .ydf-steps>li{counter-increment:ydf-step;background:#fff;border:1px solid var(--ydf-line);border-radius:var(--ydf-r-lg);padding:var(--ydf-s5);min-width:0}
.ydf .ydf-steps>li::before{content:counter(ydf-step);display:flex;width:34px;height:34px;border-radius:50%;background:var(--ydf-green);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:10px}
.ydf .ydf-steps b{display:block;color:var(--ydf-forest);font-size:16px}
.ydf .ydf-steps p{font-size:14px;color:var(--ydf-muted);margin-top:4px}
.ydf .ydf-steps--list{grid-template-columns:minmax(0,1fr)!important}
.ydf .ydf-steps--list>li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;border:0;padding:0;background:none}
.ydf .ydf-steps--list>li::before{grid-row:span 2;margin:0}

/* ---------- 13. forms ---------- */
.ydf .ydf-field{display:block;margin-bottom:var(--ydf-s4)}
.ydf .ydf-label{display:block;font-size:13px;font-weight:700;color:var(--ydf-forest);margin-bottom:6px}
.ydf .ydf-input{display:block;width:100%;min-height:46px;margin:0;border:1.5px solid var(--ydf-line);border-radius:var(--ydf-r-sm);padding:11px 13px;background:#fff;color:var(--ydf-ink);font:16px/1.4 var(--ydf-f-body);box-shadow:none;-webkit-appearance:none;appearance:none}
.ydf textarea.ydf-input{min-height:110px;resize:vertical}
.ydf select.ydf-input{padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,#5F6F6A 50%),linear-gradient(135deg,#5F6F6A 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.ydf .ydf-input:focus{outline:none;border-color:var(--ydf-green);box-shadow:0 0 0 3px var(--ydf-mint-wash)}
.ydf .ydf-input::placeholder{color:var(--ydf-faint)}
.ydf .ydf-help{display:block;font-size:13px;color:var(--ydf-muted);margin-top:6px}
.ydf .ydf-field--error .ydf-input{border-color:var(--ydf-red)}
.ydf .ydf-field--error .ydf-help{color:var(--ydf-red)}
.ydf .ydf-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.ydf .ydf-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ydf-green);flex:none}
.ydf .ydf-copyrow{display:flex;align-items:center;gap:10px;border:1px solid var(--ydf-line);border-radius:var(--ydf-r-md);padding:11px 12px}
.ydf .ydf-copyrow small{display:block;font:500 10.5px var(--ydf-f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ydf-faint)}
.ydf .ydf-copyrow span{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.ydf .ydf-copy{flex:none;border:1px solid var(--ydf-line);background:var(--ydf-soft);border-radius:8px;padding:7px 11px;font:700 12px var(--ydf-f-body);color:var(--ydf-green);cursor:pointer}
.ydf .ydf-copy:hover{background:var(--ydf-mint-wash);border-color:var(--ydf-green)}

/* ---------- 14. page bits: hero, banner, module head ---------- */
.ydf .ydf-hero{background:var(--ydf-grad-hero);padding:var(--ydf-s8) 0}
.ydf .ydf-hero--dark{background:radial-gradient(circle at 85% 10%,rgba(159,225,203,.12),transparent 40%),linear-gradient(160deg,var(--ydf-night),var(--ydf-forest) 55%,var(--ydf-green-2));color:#fff}
.ydf .ydf-hero--dark :is(.ydf-display,.ydf-h1){color:#fff}
.ydf .ydf-hero--dark :is(.ydf-display,.ydf-h1) em{color:var(--ydf-gold-bright)}
.ydf .ydf-hero--dark .ydf-eyebrow{color:var(--ydf-mint)}
.ydf .ydf-hero--dark .ydf-lead{color:rgba(255,255,255,.8)}
.ydf .ydf-hero .ydf-lead{margin-top:var(--ydf-s4)}
.ydf .ydf-hero .ydf-btns{margin-top:var(--ydf-s6)}
@media (min-width:901px){.ydf .ydf-hero{padding:80px 0}}
.ydf .ydf-split{display:grid;gap:var(--ydf-s7);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:901px){.ydf .ydf-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.ydf .ydf-banner{background:var(--ydf-grad-dark);color:#fff;border-radius:var(--ydf-r-xl);padding:30px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.ydf .ydf-banner>div{flex:1 1 300px;min-width:0}
.ydf .ydf-banner .ydf-btns{flex:0 1 auto}
@media (min-width:601px){.ydf .ydf-banner{padding:40px 46px}}
.ydf .ydf-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--ydf-muted);margin-top:var(--ydf-s4)}
.ydf .ydf-progress{display:flex;gap:5px;margin-bottom:var(--ydf-s3)}
.ydf .ydf-progress i{flex:1;height:6px;border-radius:3px;background:var(--ydf-line)}
.ydf .ydf-progress i.ydf-on{background:var(--ydf-green)}
.ydf .ydf-toc{background:var(--ydf-soft);border-radius:var(--ydf-r-lg);padding:20px 22px}
.ydf .ydf-toc ol{list-style:none;padding:0;display:grid;gap:10px;counter-reset:ydf-toc}
.ydf .ydf-toc li{counter-increment:ydf-toc;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;font-size:15px}
.ydf .ydf-toc li::before{content:counter(ydf-toc);width:26px;height:26px;border-radius:50%;background:var(--ydf-green);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ydf .ydf-toc a{color:var(--ydf-ink);font-weight:500}
.ydf .ydf-secnum{display:flex;align-items:center;gap:12px}
.ydf .ydf-secnum-n{width:36px;height:36px;flex:none;border-radius:50%;background:var(--ydf-green);color:#fff;font:700 15px var(--ydf-f-body);display:flex;align-items:center;justify-content:center}
.ydf .ydf-hr{border:0;border-top:1px solid var(--ydf-line);margin:var(--ydf-s7) 0}
.ydf .ydf-stack>*+*{margin-top:var(--ydf-s4)}
.ydf .ydf-center{text-align:center}

/* ---------- 15. reduce-motion "middle way" ----------
   Gentle loops (the live ping) keep running. Only movement on hover and big transitions stop. */
@media (prefers-reduced-motion:reduce){
.ydf .ydf-btn,.ydf a.ydf-card,.ydf .ydf-video-play,.ydf .ydf-faq summary::after{transition:none}
.ydf .ydf-btn:hover,.ydf a.ydf-card:hover{transform:none}
.ydf .ydf-video:hover .ydf-video-play{transform:translate(-50%,-50%)}
}