/*
 * Core patches p7/p8 — measuring guides (curtains, roller blinds) (the live site's guides, in the Style D look).
 * Loaded only on pages the p7 tool wrote (meta _mdb_cg7). Colours use Style D's tokens, with the same
 * values as fallbacks so the pages still look right without Style D.
 * CSS only: tabs are radio buttons, "Prior to getting started" uses <details>, tooltips show on
 * hover, tap or keyboard focus. No script changes the page.
 * Undo: Tools > My Direct Landing Pages > "Put the previous curtain guides back" (this file then stops loading).
 */
:root body.mdb-complete-site .mdb-cg{
  --cg-aqua:var(--sd-aqua,#49C3C9);--cg-aqua-d:var(--sd-aqua-d,#2F8E94);--cg-aqua-t:var(--sd-aqua-t,#E4F5F6);--cg-aqua-h:var(--sd-aqua-h,#EEF7F8);
  --cg-ink:var(--sd-ink,#2B3240);--cg-slate:var(--sd-slate,#444E60);--cg-muted:var(--sd-muted,#5B6776);--cg-line:var(--sd-line,#ECE9E2);
  --cg-card:var(--sd-card,#fff);--cg-shadow:var(--sd-shadow,0 6px 20px rgba(43,50,64,.06));
  --cg-font:var(--sd-font,"Figtree","Avenir Next",Avenir,"Segoe UI",Arial,sans-serif);
  box-sizing:border-box;width:100%;max-width:1220px;margin:28px auto 56px;padding:0 20px;
  font-family:var(--cg-font);color:var(--cg-slate);font-size:16px;line-height:1.65
}
:root body.mdb-complete-site .mdb-cg *,:root body.mdb-complete-site .mdb-cg *::before,:root body.mdb-complete-site .mdb-cg *::after{box-sizing:border-box}
:root body.mdb-complete-site .mdb-cg .elementor-widget-container{margin:0;padding:0}

/* 1. Cards */
:root body.mdb-complete-site .mdb-cg .mdb-cg-card{background:var(--cg-card);border-radius:24px;box-shadow:var(--cg-shadow);padding:40px 44px;margin:0 0 24px}
:root body.mdb-complete-site .mdb-cg :is(h1,h2,h3){font-family:var(--cg-font);color:var(--cg-ink);margin:0;text-transform:none}
:root body.mdb-complete-site .mdb-cg h1.mdb-cg-title{font-size:clamp(30px,3.4vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.028em;margin:0 0 18px}
:root body.mdb-complete-site .mdb-cg h2{font-size:clamp(23px,2.3vw,30px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
:root body.mdb-complete-site .mdb-cg h3{font-size:clamp(19px,1.7vw,22px);line-height:1.3;font-weight:800;letter-spacing:-.01em;margin:0 0 10px}
:root body.mdb-complete-site .mdb-cg p{margin:0 0 14px;max-width:78ch}
:root body.mdb-complete-site .mdb-cg p:last-child{margin-bottom:0}
:root body.mdb-complete-site .mdb-cg strong{color:var(--cg-ink);font-weight:700}
:root body.mdb-complete-site .mdb-cg a{color:var(--cg-aqua-d);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
:root body.mdb-complete-site .mdb-cg a:hover{color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg a strong{color:inherit}
:root body.mdb-complete-site .mdb-cg a:focus-visible,:root body.mdb-complete-site .mdb-cg summary:focus-visible,:root body.mdb-complete-site .mdb-cg .mdb-cg-tip:focus-visible{outline:2px solid var(--cg-aqua-d);outline-offset:3px;border-radius:6px}
:root body.mdb-complete-site .mdb-cg ul.mdb-cg-list{list-style:none;margin:6px 0 16px;padding:0;display:grid;gap:9px}
:root body.mdb-complete-site .mdb-cg ul.mdb-cg-list li{position:relative;padding-left:22px;margin:0}
:root body.mdb-complete-site .mdb-cg ul.mdb-cg-list li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--cg-aqua)}

/* 2. Intro: guide words and "Prior to getting started" on the left, requirements card on the right */
:root body.mdb-complete-site .mdb-cg .mdb-cg-intro{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
:root body.mdb-complete-site .mdb-cg .mdb-cg-intro__main > h2{margin-top:30px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq{border-top:1px solid var(--cg-line)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__item{border-bottom:1px solid var(--cg-line)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 2px;font-weight:700;font-size:16.5px;color:var(--cg-ink);line-height:1.4}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__item summary::-webkit-details-marker{display:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__item summary::after{content:"+";flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--cg-aqua-t);color:var(--cg-aqua-d);font-size:20px;font-weight:600;line-height:1;transition:transform .2s}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__item[open] summary::after{transform:rotate(45deg)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__item summary:hover{color:var(--cg-aqua-d)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__body{padding:0 44px 18px 2px;color:var(--cg-muted)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req{position:sticky;top:120px;background:var(--cg-aqua-h);border:2px dashed rgba(73,195,201,.55);border-radius:22px;padding:26px 26px 24px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__title{font-size:20px;margin:0 0 18px;text-align:center}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__facts{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__facts li{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:#fff;border-radius:16px;padding:16px 10px 14px;font-size:14.5px;line-height:1.3}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(73,195,201,.17);color:var(--cg-aqua-d)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__icon svg{width:24px;height:24px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__kit{background:#fff;border-radius:16px;padding:16px 18px;font-size:15px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__kit p{margin:0 0 8px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-req__kit ul.mdb-cg-list{margin:0;gap:6px}

/* 3. Mounting type (radio buttons, no script). p8: one choice drives both the "Plan your curtains" tabs and the
      measuring steps, because the radios sit before both sections inside .mdb-cg-mount. */
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-choose{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin:22px 0 26px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__list{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:#F1EFEA;max-width:100%}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab{display:inline-flex;align-items:center;gap:10px;padding:10px 22px 10px 16px;border-radius:999px;cursor:pointer;line-height:1.2;color:var(--cg-muted);transition:background .15s,color .15s,box-shadow .15s;user-select:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab span{display:flex;flex-direction:column}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab strong{font-weight:800;font-size:15px;color:inherit}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab small{font-size:12.5px;font-weight:600;opacity:.8}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab svg{width:22px;height:22px;flex:0 0 22px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab:hover{color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--1:checked ~ section .mdb-cg-tabs__tab--1,
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--2:checked ~ section .mdb-cg-tabs__tab--2{background:var(--cg-aqua);color:var(--cg-ink);box-shadow:0 6px 16px rgba(73,195,201,.35)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--1:focus-visible ~ section .mdb-cg-tabs__tab--1,
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--2:focus-visible ~ section .mdb-cg-tabs__tab--2{outline:2px solid var(--cg-aqua-d);outline-offset:3px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__panel{display:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--1:checked ~ section .mdb-cg-tabs__panel--1,
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--2:checked ~ section .mdb-cg-tabs__panel--2{display:block}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__print{display:none}
/* the pointer: a hand-drawn arrow aimed back at the toggle */
:root body.mdb-complete-site .mdb-cg .mdb-cg-cue{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--cg-aqua-d);font-weight:800;font-size:15px;max-width:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-cue__arrow{width:56px;height:26px;flex:0 0 56px;transform:scaleX(-1) rotate(8deg)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-choose--steps .mdb-cg-cue{color:var(--cg-muted);font-weight:700;font-size:14px}

/* 4. "Crafting your ideal curtains": the big statement and the option list */
:root body.mdb-complete-site .mdb-cg p.mdb-cg-lead{font-size:clamp(19px,1.9vw,24px);line-height:1.45;font-weight:600;color:var(--cg-ink);letter-spacing:-.01em;max-width:none;margin:0 0 20px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-craft ul.mdb-cg-list{gap:11px;margin-bottom:20px}

/* 5. Steps: each row is a soft card; pictures sit beside (or above) the words */
:root body.mdb-complete-site .mdb-cg .mdb-cg-steps > h2 + p{margin-top:4px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-step-title{margin:30px 0 14px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-step-title h3{margin:0}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row{display:grid;gap:28px;align-items:center;background:#FBFAF8;border:1px solid var(--cg-line);border-radius:20px;padding:26px 28px;margin:0 0 18px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row--1{grid-template-columns:minmax(0,1fr)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row--2{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row--2:has(> .mdb-cg-col--mixed:first-child){grid-template-columns:1fr 1fr;align-items:start}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row--3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px;padding:22px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row--3 .mdb-cg-col{background:#fff;border-radius:16px;padding:14px 14px 18px;height:100%;font-size:15px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-col--media{display:flex;justify-content:center}
:root body.mdb-complete-site .mdb-cg .mdb-cg-col > * + *{margin-top:14px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-fig{margin:0;background:#fff;border:1px solid var(--cg-line);border-radius:16px;overflow:hidden;width:100%;max-width:380px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-col--mixed .mdb-cg-fig,:root body.mdb-complete-site .mdb-cg .mdb-cg-row--3 .mdb-cg-fig{max-width:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-row--3 .mdb-cg-fig{border:0;border-radius:12px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-fig img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;margin:0;border-radius:0}
:root body.mdb-complete-site .mdb-cg .mdb-cg-figs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} /* several pictures in one column stack, as on the live site */
:root body.mdb-complete-site .mdb-cg .mdb-cg-figs .mdb-cg-fig{border:1px solid var(--cg-line);border-radius:12px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-text p{max-width:none}

/* 6. Tooltips (hover, tap or keyboard focus) */
:root body.mdb-complete-site .mdb-cg .mdb-cg-tip{position:relative;display:inline;color:var(--cg-aqua-d);font-weight:600;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:help;outline:0}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tip__box{display:none;position:absolute;z-index:40;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:max-content;max-width:280px;
  padding:14px 16px;border-radius:14px;background:#fff;color:var(--cg-slate);box-shadow:0 16px 40px rgba(20,25,35,.2);
  font:400 13.5px/1.55 var(--cg-font);letter-spacing:0;text-align:left;text-decoration:none;white-space:normal;cursor:auto}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tip__box::after{content:"";position:absolute;left:50%;top:100%;margin-left:-7px;border:7px solid transparent;border-top-color:#fff}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tip:is(:hover,:focus,:focus-within) > .mdb-cg-tip__box{display:block}
:root body.mdb-complete-site .mdb-cg p.mdb-cg-lead .mdb-cg-tip{font-weight:700}

/* 7. "Keep planning your window" links (kept from the previous page) */
:root body.mdb-complete-site .mdb-cg .mdb-cg-related footer{margin:0;padding:0;border:0}
:root body.mdb-complete-site .mdb-cg .mdb-cg-related h2{font-size:22px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-related ul{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-related li{margin:0;padding:0;border:0}
:root body.mdb-complete-site .mdb-cg .mdb-cg-related li a{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:var(--cg-aqua-h);color:var(--cg-ink);font-weight:700;font-size:14.5px;text-decoration:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-related li a:hover{background:var(--cg-aqua-t);color:var(--cg-ink)}

/* 8. Tablet and phone */
@media (max-width:1024px){
  /* one column; "What you need" moves up, straight after the introduction and guide pills */
  :root body.mdb-complete-site .mdb-cg .mdb-cg-intro{display:flex;flex-direction:column;gap:0}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-intro__main{display:contents}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-intro__main > *{order:1}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-req{order:2;position:static;max-width:560px;width:100%;margin:22px 0 4px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-intro__main > h2,:root body.mdb-complete-site .mdb-cg .mdb-cg-intro__main > .mdb-cg-faq{order:3}
}
/* Below 1367px wide a tooltip is a card at the bottom of the screen, so it never runs off the side */
@media (max-width:1366px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tip__box{position:fixed;left:50%;right:auto;bottom:16px;top:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 24px));max-width:none;z-index:1000;font-size:14.5px;padding:16px 18px;border:1px solid var(--cg-line)}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tip__box::after{display:none}
}
@media (max-width:900px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row--2,:root body.mdb-complete-site .mdb-cg .mdb-cg-row--2:has(> .mdb-cg-col--mixed:first-child),
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row--3{grid-template-columns:minmax(0,1fr)}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-fig{max-width:420px;margin-left:auto;margin-right:auto}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row--3 .mdb-cg-col > .mdb-cg-fig{max-width:340px}
}
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-cg{margin:14px auto 40px;padding:0 12px;font-size:15.5px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-card{padding:24px 18px;border-radius:18px;margin-bottom:16px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-faq__body{padding-right:6px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-req{padding:20px 16px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__list{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:18px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__tab{justify-content:center;gap:8px;padding:10px 8px;border-radius:14px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row{padding:18px 14px;gap:18px;border-radius:16px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row--3{padding:12px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-step-title{margin:24px 0 12px}
}

/* 9. Print: both tabs, no tab buttons, no tooltip cards */
@media print{
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__list{display:none}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__panel{display:block!important}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__print{display:block;font-weight:800;font-size:18px;color:#000;margin:18px 0 8px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-card{box-shadow:none;border:1px solid #ddd}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row{break-inside:avoid}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tip__box{display:none!important}
  :root body.mdb-complete-site .mdb-cg details:not([open]) > :not(summary){display:block}
}

/* 10. p8 additions: eyebrow, guide switcher pills, shared options, signpost, numbered steps */
:root body.mdb-complete-site .mdb-cg .mdb-cg-eyebrow{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cg-aqua-d)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-switch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 6px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-switch__label{font-size:13px;font-weight:800;color:var(--cg-muted);margin-right:4px}
:root body.mdb-complete-site .mdb-cg a.mdb-cg-pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;border:1.5px solid var(--cg-line);background:#fff;color:var(--cg-ink);font-weight:700;font-size:14px;text-decoration:none;transition:border-color .15s,background .15s}
:root body.mdb-complete-site .mdb-cg a.mdb-cg-pill:hover{border-color:var(--cg-aqua);background:var(--cg-aqua-h)}
:root body.mdb-complete-site .mdb-cg a.mdb-cg-pill.is-current{background:var(--cg-slate);border-color:var(--cg-slate);color:#fff}
:root body.mdb-complete-site .mdb-cg .mdb-cg-intro__main > h2{margin-top:28px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-shared{margin-top:28px;padding-top:24px;border-top:1px solid var(--cg-line)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-shared h3{margin-bottom:14px}
:root body.mdb-complete-site .mdb-cg ul.mdb-cg-list--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-closing{margin-top:18px;color:var(--cg-muted)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-signpost{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 18px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-signpost p{margin:0;padding:10px 16px;border-radius:14px;background:var(--cg-aqua-h);color:var(--cg-ink);font-weight:700;font-size:15px}
:root body.mdb-complete-site .mdb-cg ol.mdb-cg-steps-list{margin:6px 0 14px;padding-left:22px;display:grid;gap:8px}
:root body.mdb-complete-site .mdb-cg ol.mdb-cg-steps-list li{padding-left:4px}
:root body.mdb-complete-site .mdb-cg ol.mdb-cg-steps-list li::marker{font-weight:800;color:var(--cg-aqua-d)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-fig{padding:10px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-steps .mdb-cg-row:first-of-type{margin-top:4px}
@media (max-width:900px){
  :root body.mdb-complete-site .mdb-cg ul.mdb-cg-list--cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-choose{flex-direction:column-reverse;align-items:stretch;gap:4px;margin:16px 0 20px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-cue{justify-content:flex-start;font-size:14px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-cue__arrow{width:40px;flex-basis:40px;transform:rotate(58deg)}
  :root body.mdb-complete-site .mdb-cg a.mdb-cg-pill{padding:7px 12px;font-size:13.5px}
}
@media print{
  :root body.mdb-complete-site .mdb-cg .mdb-cg-choose{display:none}
}

/* 11. p8 additions (roller blind guide): a third mounting type, notes, worked examples, fit links, video links.
      Undo: delete this section; the roller page then shows its three fits without the third tab's highlight. */
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--3:checked ~ section .mdb-cg-tabs__tab--3{background:var(--cg-aqua);color:var(--cg-ink);box-shadow:0 6px 16px rgba(73,195,201,.35)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--3:focus-visible ~ section .mdb-cg-tabs__tab--3{outline:2px solid var(--cg-aqua-d);outline-offset:3px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--3:checked ~ section .mdb-cg-tabs__panel--3{display:block}
:root body.mdb-complete-site .mdb-cg p.mdb-cg-note{margin:14px 0;padding:12px 16px;border-left:4px solid var(--cg-slate);border-radius:0 12px 12px 0;background:#F4F5F6;color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg p.mdb-cg-calc{margin:14px 0;padding:12px 16px;border-radius:12px;background:var(--cg-aqua-h);border:1px dashed rgba(73,195,201,.6);color:var(--cg-ink);font-variant-numeric:tabular-nums}
:root body.mdb-complete-site .mdb-cg label.mdb-cg-fitlink{display:inline;color:var(--cg-aqua-d);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
:root body.mdb-complete-site .mdb-cg label.mdb-cg-fitlink:hover{color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-steps ul.mdb-cg-list li strong{display:inline}
:root body.mdb-complete-site .mdb-cg :is(.mdb-cg-gaps,.mdb-cg-hints) h3{margin-top:26px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-gaps .mdb-cg-row{margin-top:6px}
:root body.mdb-complete-site .mdb-cg p.mdb-cg-videos{margin-top:18px;padding-top:16px;border-top:1px solid var(--cg-line);max-width:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-faq__body .mdb-cg-fig{max-width:360px;margin:6px 0 4px}
@media (max-width:680px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__list--3{grid-template-columns:1fr}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__list--3 .mdb-cg-tabs__tab{justify-content:flex-start;padding:10px 14px}
}
@media (min-width:681px) and (max-width:900px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__list--3 .mdb-cg-tabs__tab{padding:10px 14px 10px 12px}
}
@media print{
  :root body.mdb-complete-site .mdb-cg label.mdb-cg-fitlink{text-decoration:none;color:inherit}
}
@media (min-width:901px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row--compact{grid-template-columns:minmax(0,1fr) 320px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-row--compact .mdb-cg-fig{max-width:320px}
}

/* 12. p7 page compatibility: pages written by the p7 button (radios inside each tab block) keep working with
      this stylesheet until they are updated. Undo: delete this section once every guide is on the new layout. */
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs{margin-top:18px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs > .mdb-cg-tabs__list{margin:0 0 26px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--1:checked ~ .mdb-cg-tabs__list .mdb-cg-tabs__tab--1,
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--2:checked ~ .mdb-cg-tabs__list .mdb-cg-tabs__tab--2{background:var(--cg-aqua);color:var(--cg-ink);box-shadow:0 6px 16px rgba(73,195,201,.35)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--1:focus-visible ~ .mdb-cg-tabs__list .mdb-cg-tabs__tab--1,
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--2:focus-visible ~ .mdb-cg-tabs__list .mdb-cg-tabs__tab--2{outline:2px solid var(--cg-aqua-d);outline-offset:3px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--1:checked ~ .mdb-cg-tabs__panel--1,
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs__radio--2:checked ~ .mdb-cg-tabs__panel--2{display:block}
:root body.mdb-complete-site .mdb-cg .mdb-cg-tabs > .mdb-cg-tabs__list .mdb-cg-tabs__tab{font-weight:700;font-size:15px}

/* 13. p14: THE MEASURING GUIDES HUB (/measure-guides/). Aaron: "this page needs more work. its a bit scuffed. check live
   images". It was a plain list of 22 text links, sections at three different widths (880 / 1080 / 1192px) and three
   photos at the bottom. Now, in the guides' own card look:
   - an intro card: words, worksheet and question buttons, jump pills, and the guides' "Before you measure" points;
   - one card per guide with a My Direct product photo, grouped as Roller blinds / Other blinds / Curtains /
     Plantation shutters (one wide card with the help centre links) / Doors, corners and bays (words only: no photo
     here shows a door, corner or bay blind yet);
   - SureFit and four next-step cards (worksheet, all measuring instructions, installation guides, contact).
   Every section shares the guides' 1220px width (the page box sets its own display, so it never depends on
   Elementor's per-page stylesheet). Photos keep one 6:5 crop. Phones: cards turn into rows, photo left.
   Undo: delete this block (the page itself goes back with "Put the previous measuring guides back"). */
:root body.mdb-complete-site .mdb-mh{display:block;--mh-radius:20px;--mh-shadow-lg:0 14px 34px rgba(43,50,64,.12)}
:root body.mdb-complete-site .mdb-mh a{text-decoration:none}
:root body.mdb-complete-site .mdb-mh .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:root body.mdb-complete-site .mdb-mh .mdb-cg-widget+.mdb-cg-widget{margin-top:0}
/* intro */
:root body.mdb-complete-site .mdb-mh .mdb-mh-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:40px;align-items:start}
:root body.mdb-complete-site .mdb-mh .mdb-mh-lead{font-size:17px;line-height:1.7;max-width:60ch;margin:0 0 24px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #D9D4CA;color:var(--cg-ink);font-size:15px;font-weight:800;line-height:1.2;text-decoration:none;transition:background .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-btn:is(:hover,:focus-visible){background:var(--cg-aqua-h);box-shadow:inset 0 0 0 1.5px var(--cg-aqua);color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-btn--primary{background:var(--cg-aqua);box-shadow:0 8px 20px rgba(73,195,201,.28);color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-btn--primary:is(:hover,:focus-visible){background:#5BCDD2;box-shadow:0 10px 24px rgba(73,195,201,.36)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-jumps{display:flex;flex-wrap:wrap;gap:8px}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-jump{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(43,50,64,.07);color:var(--cg-ink);font-size:14px;font-weight:700;text-decoration:none}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-jump b{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--cg-aqua-t);color:var(--cg-aqua-d);font-size:11.5px;font-weight:800}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-jump:is(:hover,:focus-visible){background:var(--cg-aqua-h);color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-before{padding:26px 28px;border-radius:var(--mh-radius);background:var(--cg-aqua-h)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-before h2{font-size:20px;margin:0 0 12px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-before ul.mdb-cg-list{margin:0;gap:10px;font-size:15px;line-height:1.55}
/* groups */
:root body.mdb-complete-site .mdb-mh .mdb-mh-group{margin:44px 0 0;scroll-margin-top:120px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-group__head{display:flex;align-items:center;gap:12px;margin:0 0 18px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-group__head h2{margin:0}
:root body.mdb-complete-site .mdb-mh .mdb-mh-num{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--cg-aqua-t);color:var(--cg-aqua-d);font-size:13px;font-weight:800;letter-spacing:.04em}
:root body.mdb-complete-site .mdb-mh .mdb-mh-group__intro{margin:-6px 0 18px;color:var(--cg-muted)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
:root body.mdb-complete-site .mdb-mh .mdb-mh-grid--one{grid-template-columns:minmax(0,1fr)}
/* cards: the title link covers the card; the pills sit above it */
:root body.mdb-complete-site .mdb-mh .mdb-mh-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--mh-radius);background:#fff;box-shadow:var(--cg-shadow);transition:transform .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card:has(a.mdb-mh-card__link):hover{transform:translateY(-2px);box-shadow:var(--mh-shadow-lg)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card__media{aspect-ratio:6/5;overflow:hidden;background:#F3F1EC}
:root body.mdb-complete-site .mdb-mh img.mdb-mh-card__img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;border-radius:0;transition:transform .35s}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card:has(a.mdb-mh-card__link):hover img.mdb-mh-card__img{transform:scale(1.03)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 20px 20px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card h3{font-size:18px;line-height:1.3;margin:0 0 6px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card p{flex:1 1 auto;margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--cg-muted)}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-card__link{color:var(--cg-ink);text-decoration:none}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-card__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-card__link:focus-visible{outline:0}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-card__link:focus-visible::after{outline:2px solid var(--cg-aqua-d);outline-offset:-2px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-go{display:inline-flex;align-items:center;gap:6px;color:var(--cg-aqua-d);font-size:14px;font-weight:800}
:root body.mdb-complete-site .mdb-mh .mdb-mh-arrow{display:inline-block;transition:transform .15s}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card:hover .mdb-mh-arrow{transform:translateX(3px)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-pills{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--pills .mdb-mh-pills{margin:0}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-pill{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--cg-line);color:var(--cg-ink);font-size:13.5px;font-weight:700;line-height:1.2;text-decoration:none}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-pill:is(:hover,:focus-visible){background:var(--cg-aqua-h);box-shadow:inset 0 0 0 1.5px var(--cg-aqua);color:var(--cg-ink)}
/* the one wide card (plantation shutters): photo left, words right */
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide .mdb-mh-card__media{position:relative;aspect-ratio:auto;min-height:280px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide img.mdb-mh-card__img{position:absolute;inset:0}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide .mdb-mh-card__body{justify-content:center;padding:32px 36px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide h3{font-size:22px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide p{flex:0 0 auto;max-width:62ch;font-size:15.5px}
/* words-only cards (doors, corners and bays) */
:root body.mdb-complete-site .mdb-mh .mdb-mh-card--text .mdb-mh-card__body{padding:22px 24px 22px;border-top:4px solid var(--cg-aqua)}
/* SureFit */
:root body.mdb-complete-site .mdb-mh .mdb-mh-surefit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;margin:48px 0 0;padding:28px 32px;border-radius:24px;background:linear-gradient(180deg,#E9F6F7,#F3FAFA)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-surefit__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff;box-shadow:var(--cg-shadow)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-surefit__icon svg{display:block;width:32px;height:32px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-surefit h2{font-size:21px;margin:0 0 4px}
:root body.mdb-complete-site .mdb-mh .mdb-mh-surefit p{margin:0;max-width:66ch}
:root body.mdb-complete-site .mdb-mh .mdb-mh-surefit__links{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* next steps */
:root body.mdb-complete-site .mdb-mh .mdb-mh-help{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:28px 0 0}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-help__card{display:flex;flex-direction:column;gap:8px;padding:22px 26px;border-radius:var(--mh-radius);background:#fff;box-shadow:var(--cg-shadow);color:var(--cg-ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-help__card:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:var(--mh-shadow-lg);background:#fff;color:var(--cg-ink);text-decoration:none}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-help__card .mdb-cg-eyebrow{margin:0}
/* keyboard focus keeps each shape (block 1's focus ring would round them to 6px) */
:root body.mdb-complete-site .mdb-mh :is(a.mdb-mh-btn,a.mdb-mh-jump,a.mdb-mh-pill):focus-visible{border-radius:999px}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-help__card:focus-visible{border-radius:var(--mh-radius)}
:root body.mdb-complete-site .mdb-mh .mdb-mh-help__label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:800}
:root body.mdb-complete-site .mdb-mh a.mdb-mh-help__card:hover .mdb-mh-arrow{transform:translateX(3px)}
@media (max-width:1100px){
  :root body.mdb-complete-site .mdb-mh .mdb-mh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-grid--one{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  :root body.mdb-complete-site .mdb-mh .mdb-mh-intro{grid-template-columns:minmax(0,1fr);gap:26px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-surefit{grid-template-columns:auto minmax(0,1fr)}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-surefit__links{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:14px 20px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-help{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root body.mdb-complete-site .mdb-mh .mdb-mh-grid--three,:root body.mdb-complete-site .mdb-mh .mdb-mh-help{grid-template-columns:minmax(0,1fr)}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide{grid-template-columns:minmax(0,1fr)}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide .mdb-mh-card__media{aspect-ratio:6/5;min-height:0}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide img.mdb-mh-card__img{position:static}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card--wide .mdb-mh-card__body{padding:20px 22px 22px}
}
@media (max-width:600px){
  /* phones: each guide is a row, photo on the left */
  :root body.mdb-complete-site .mdb-mh .mdb-mh-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card:not(.mdb-mh-card--wide):not(.mdb-mh-card--text){display:grid;grid-template-columns:112px minmax(0,1fr)}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card:not(.mdb-mh-card--wide):not(.mdb-mh-card--text) .mdb-mh-card__media{aspect-ratio:auto;height:100%;min-height:112px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card__body{padding:14px 16px 16px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card h3{font-size:16.5px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-card p{font-size:14px;margin-bottom:10px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-group{margin-top:34px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-before{padding:20px 20px}
  :root body.mdb-complete-site .mdb-mh .mdb-mh-surefit{grid-template-columns:minmax(0,1fr);padding:24px 22px}
  :root body.mdb-complete-site .mdb-mh a.mdb-mh-btn{width:100%;justify-content:center;text-align:center;padding:10px 20px}
}
@media (prefers-reduced-motion:reduce){
  :root body.mdb-complete-site .mdb-mh :is(.mdb-mh-card,img.mdb-mh-card__img,.mdb-mh-arrow,a.mdb-mh-help__card){transition:none}
}

/* 14. p18 (26 Sep 2026): VIDEO POPUPS and the mounting cue.
   Aaron: "the video links in the measure guides should be popups with the video embedded inside. popup styled like
   our new theme." The roller guide's "Prefer to watch?" line now has three buttons; each opens a native popover
   (top layer, Esc or a click outside closes it) holding the Vimeo player. assets/guide-video-p18.js only loads the
   player when a popup opens and empties it when it closes, so nothing plays in the background (click handling only).
   Browsers without popover support hide the buttons and show plain links instead.
   Also: "Check the mounting type before you measure." (steps cue) now matches "Choose your mounting type"
   (Aaron: "is the text ... the same colour?"): aqua, 800, 15px. Block 3's grey steps rule is overridden here.
   Undo: delete this block (the old .mdb-cg-videos paragraph rule in block 11 no longer matches anything). */
:root body.mdb-complete-site .mdb-cg .mdb-cg-choose--steps .mdb-cg-cue{color:var(--cg-aqua-d);font-weight:800;font-size:15px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-videos{margin-top:20px;padding-top:18px;border-top:1px solid var(--cg-line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-videos p.mdb-cg-videos__lead{margin:0;max-width:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-videos__btns{display:flex;flex-wrap:wrap;gap:8px}
:root body.mdb-complete-site .mdb-cg button.mdb-cg-video-btn{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 16px 7px 8px;border:0;border-radius:999px;background:var(--cg-aqua-h);box-shadow:inset 0 0 0 1.5px rgba(73,195,201,.45);color:var(--cg-ink);font:700 14.5px/1.3 var(--cg-font);text-transform:none;letter-spacing:0;cursor:pointer;transition:background .15s,box-shadow .15s}
:root body.mdb-complete-site .mdb-cg button.mdb-cg-video-btn:is(:hover,:focus-visible){background:#DFF3F4;box-shadow:inset 0 0 0 1.5px var(--cg-aqua);color:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg button.mdb-cg-video-btn:focus-visible{outline:2px solid var(--cg-aqua-d);outline-offset:3px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video-btn__play{width:24px;height:24px;flex:0 0 24px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video-btn__play circle{fill:var(--cg-aqua)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video-btn__play path{fill:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg a.mdb-cg-video-alt{display:none}
/* the popup */
:root body.mdb-complete-site .mdb-cg .mdb-cg-video{box-sizing:border-box;width:min(960px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:22px;background:var(--cg-card);color:var(--cg-slate);box-shadow:0 20px 50px rgba(43,50,64,.28);overflow:auto;font-family:var(--cg-font)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video:popover-open{display:block}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video::backdrop{background:rgba(43,50,64,.62)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 14px 24px}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video p.mdb-cg-video__title{margin:0;color:var(--cg-ink);font-weight:800;font-size:19px;line-height:1.25;max-width:none}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video__title span{display:block;color:var(--cg-aqua-d);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
:root body.mdb-complete-site .mdb-cg button.mdb-cg-video__close{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;margin:0;padding:0;border:0;border-radius:50%;background:var(--cg-aqua-h);color:var(--cg-ink);cursor:pointer}
:root body.mdb-complete-site .mdb-cg button.mdb-cg-video__close:is(:hover,:focus-visible){background:#DFF3F4;box-shadow:inset 0 0 0 1.5px var(--cg-aqua)}
:root body.mdb-complete-site .mdb-cg button.mdb-cg-video__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video__frame{position:relative;margin:0 16px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--cg-ink)}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
:root body.mdb-complete-site .mdb-cg .mdb-cg-video p.mdb-cg-video__foot{margin:0;padding:12px 24px 18px;font-size:14px;color:var(--cg-muted);max-width:none}
@supports not selector(:popover-open){
  :root body.mdb-complete-site .mdb-cg :is(button.mdb-cg-video-btn,.mdb-cg-video){display:none}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-videos__btns{gap:6px 14px}
  :root body.mdb-complete-site .mdb-cg a.mdb-cg-video-alt{display:inline}
}
@media (max-width:600px){
  :root body.mdb-complete-site .mdb-cg .mdb-cg-video{width:calc(100vw - 20px);border-radius:18px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-video__head{padding:12px 12px 12px 18px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-video__frame{margin:0 10px;border-radius:10px}
  :root body.mdb-complete-site .mdb-cg .mdb-cg-video p.mdb-cg-video__foot{padding:10px 18px 14px}
}
@media print{
  :root body.mdb-complete-site .mdb-cg :is(button.mdb-cg-video-btn,.mdb-cg-video){display:none!important}
  :root body.mdb-complete-site .mdb-cg a.mdb-cg-video-alt{display:inline;margin-right:12px}
}