/* AyeDu widget styles + the few native-widget refinements Elementor controls cannot express. Values from the v5 mockup. */
.ay-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ay-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ay-wine);margin-right:9px;vertical-align:middle}
.ay-dot--sage{background:var(--ay-sage)}
.ay-badge{display:inline-block;border-radius:999px;padding:7px 14px;font:800 13px/1 var(--ay-sans);letter-spacing:.12em}
.ay-badge--magenta{background:var(--ay-sage);color:#fff}
.ay-btn{display:inline-block;border:0;border-radius:999px;text-decoration:none;font:700 16.5px/1.2 var(--ay-sans);cursor:pointer}
.ay-btn--primary{background:var(--ay-btn-bg);color:#fff;padding:15px 30px;box-shadow:0 10px 26px rgba(64,0,32,.22);transition:transform .25s var(--ay-ease-ui),box-shadow .25s ease}
.ay-btn--primary:hover{transform:translateY(-2px);color:#fff}
.ay-bar{height:5px;border-radius:999px;background:var(--ay-line);overflow:hidden;margin-top:8px}
.ay-bar--lg{height:7px;background:var(--ay-line);margin-top:10px}
.ay-bar--card{height:6px;width:180px;margin-top:9px;background:var(--ay-line)}
.ay-bar--calc{height:8px;margin-top:0}
.ay-bar__fill{display:block;height:100%;border-radius:999px}
.ay-bar--magenta,.ay-bar--g1{background:var(--ay-chart-1)}.ay-bar--g2{background:var(--ay-chart-2)}.ay-bar--g3{background:var(--ay-chart-3)}.ay-bar--g4{background:var(--ay-chart-4)}
.ay-bar--sage{background:var(--ay-chart-2)}
.ay-status{display:inline-block;border-radius:999px;padding:5px 10px;font:800 9.5px/1 var(--ay-sans);letter-spacing:.08em;white-space:nowrap}
.ay-status--confirmed{background:var(--ay-sage-soft);color:var(--ay-ink)}
.ay-status--awaiting{background:var(--ay-stone);color:var(--ay-ink-caption);border:1px solid var(--ay-line)}
.ay-avatar{width:32px;height:32px;border-radius:50%;background:var(--ay-blush-pill);color:var(--ay-link);display:grid;place-items:center;font:800 11px/1 var(--ay-sans);flex:none}
.ay-avatar--sage{background:var(--ay-sage-soft);color:var(--ay-sage-text)}
.ay-avatar--lg{width:34px;height:34px;font-size:11.5px}

/* ---------- Phone demo ---------- */
.ay-phone-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:680px}
.ay-phone-glow{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(240,220,215,.95) 0%,rgba(240,220,215,0) 65%);pointer-events:none}
.ay-phone{position:relative;width:330px;background:var(--ay-device);border-radius:50px;padding:12px;box-shadow:inset 0 0 0 1.5px var(--ay-device-edge),0 2px 8px rgba(28,31,34,.14),0 50px 100px rgba(28,31,34,.2)}
.ay-phone__screen{background:var(--ay-page);border-radius:39px;overflow:hidden;position:relative;aspect-ratio:652/1270;display:flex;flex-direction:column}
.ay-phone__notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:94px;height:25px;background:var(--ay-device);border-radius:999px;z-index:2}
.ay-phone__body{flex:1;min-height:0;overflow:hidden;padding:52px 16px 8px;display:flex;flex-direction:column}
.ay-screen{display:grid;gap:11px;align-content:start;animation:lux-screen .3s ease both}
.ay-screen[hidden]{display:none}
.ay-screen__kicker{font:800 10px/1 var(--ay-sans);letter-spacing:.16em}
.ay-screen__kicker--magenta{color:var(--ay-link)}.ay-screen__kicker--sage{color:var(--ay-sage-text)}
.ay-screen__big{margin-top:6px;font:600 25px/1 var(--ay-serif);color:var(--ay-ink-deep)}
.ay-screen__big span{font:400 12.5px/1 var(--ay-sans);color:var(--ay-ink-caption)}
.ay-mini-card{background:#fff;border:1px solid var(--ay-line);border-radius:14px;padding:11px 13px}
.ay-mini-card__row{display:flex;justify-content:space-between;font-size:12px}
.ay-mini-card__label{font-weight:700;color:var(--ay-ink)}
.ay-mini-card__amt{font-weight:700;color:var(--ay-ink)}.ay-mini-card__amt.is-sage{color:var(--ay-sage-text)}.ay-mini-card__amt.is-muted{color:var(--ay-ink-quiet)}
.ay-mini-card__amt span{color:var(--ay-ink-body);font-weight:500}
.ay-mini-card--guest{display:flex;align-items:center;gap:10px}
.ay-mini-card__who{min-width:0;display:grid}.ay-mini-card__who span:first-child{font-size:12.5px;font-weight:700;color:var(--ay-ink)}.ay-mini-card__who span:last-child{font-size:10.5px;color:var(--ay-ink-caption)}
.ay-mini-card--guest .ay-status{margin-left:auto}
.ay-phone__pill{justify-self:start;background:var(--ay-blush-pill);color:var(--ay-link);border-radius:999px;padding:9px 16px;font:800 11.5px/1 var(--ay-sans);letter-spacing:.06em}
.ay-phone__chips{display:flex;gap:6px;flex-wrap:wrap}
.ay-phone__chips span{background:#fff;border:1px solid var(--ay-line);border-radius:999px;padding:7px 12px;font:700 10.5px/1 var(--ay-sans);color:var(--ay-ink-body)}
.ay-phone__tabs{border-top:1px solid var(--ay-line);background:#fff;display:flex;padding:2px 8px 10px}
.ay-phone button.ay-phone__tab{flex:1;background:none;border:0;border-radius:0;box-shadow:none;padding:9px 0 4px;min-height:0;display:grid;justify-items:center;gap:5px;cursor:pointer;font:800 10.5px/1 var(--ay-sans);letter-spacing:.06em;color:var(--ay-ink-caption);transition:color .2s ease}
.ay-phone button.ay-phone__tab:hover{background:none;color:var(--ay-ink)}
.ay-phone__tab i{width:5px;height:5px;border-radius:50%;background:transparent;display:block}
.ay-phone button.ay-phone__tab.is-active{color:var(--ay-wine)}.ay-phone__tab.is-active i{background:var(--ay-wine)}
.ay-phone__hint{position:absolute;left:50%;transform:translateX(-50%);bottom:-46px;white-space:nowrap;background:#fff;border:1px solid var(--ay-line);border-radius:999px;padding:9px 16px;font:800 13px/1 var(--ay-sans);letter-spacing:.1em;color:var(--ay-ink-caption);box-shadow:0 2px 6px rgba(28,31,34,.06),0 14px 30px rgba(28,31,34,.1)}
.ay-float-card{position:absolute;background:#fff;border:1px solid var(--ay-line);color:var(--ay-ink);border-radius:16px;padding:16px 20px;box-shadow:0 2px 6px rgba(28,31,34,.06),0 24px 60px rgba(28,31,34,.14)}
.ay-float-card--l{bottom:96px;left:-2px}.ay-float-card--r{top:150px;right:-4px}
.ay-float-card__row{display:flex;align-items:center;gap:10px}.ay-float-card__row .ay-status{padding:6px 13px;font-size:10.5px;letter-spacing:.12em}
.ay-float-card__kicker{font:700 11px/1 var(--ay-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ay-ink-caption)}
.ay-float-card__kicker--magenta{font-weight:800;color:var(--ay-link)}
.ay-float-card__text{margin-top:9px;font-size:14.5px;font-weight:600}
@media (max-width:767px){.ay-phone-wrap{min-height:0;margin-top:40px;padding-bottom:60px}.ay-phone-glow{width:420px;height:420px}.ay-float-card--l{bottom:40px;left:-6px}.ay-float-card--r{top:120px;right:-8px;max-width:230px}.ay-phone{width:300px}}

/* ---------- Budget calculator ---------- */
.ay-calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.ay-calc__eyebrow{display:inline-flex;align-items:center;margin:0;font:600 13px/1.2 var(--ay-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ay-maroon,#400020)}
.ay-calc__h2{margin:20px 0 0;font:700 clamp(34px,3.9vw,53px)/1.08 var(--ay-sans);letter-spacing:-.03em;color:var(--ay-ink-deep)}
.ay-calc__intro{margin:16px 0 0;font-size:18px;line-height:1.75;color:var(--ay-ink-body);max-width:46ch}
.ay-calc__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
/* Raw <button>s inside widgets must not inherit the kit's global button style (Theme Style > Buttons). */
.ay-calc button.ay-calc__chip{border:1px solid var(--ay-field);background:#fff;color:var(--ay-ink);border-radius:999px;padding:9px 16px;font:700 14px/1.2 var(--ay-sans);cursor:pointer;box-shadow:none;min-height:0;line-height:1.2;transition:border-color .2s ease,background .2s ease}
.ay-calc button.ay-calc__chip:hover{border-color:var(--ay-sage);background:#fff;color:var(--ay-ink)}
.ay-calc button.ay-calc__chip.is-active{background:var(--ay-sage-soft);border-color:var(--ay-sage);color:var(--ay-ink)}
.ay-calc__inputs{display:grid;gap:26px;margin-top:34px;max-width:440px}
.ay-calc__field{display:grid;gap:12px}
.ay-calc__field-head{display:flex;justify-content:space-between;font:600 15.5px/1.3 var(--ay-sans);color:var(--ay-ink-body)}
.ay-calc__field-head output{color:var(--ay-ink-deep);font-weight:800;font-variant-numeric:tabular-nums}
input[type=range].lux-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--ay-chart-4);margin:0}
input[type=range].lux-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ay-sage);border:2px solid #fff;box-shadow:0 1px 5px rgba(28,31,34,.35);cursor:pointer}
input[type=range].lux-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ay-sage);border:2px solid #fff;cursor:pointer}
.ay-calc__perguest{margin:22px 0 0;font:italic 400 18px/1.5 var(--ay-serif);color:var(--ay-ink-body)}
.ay-calc .ay-btn--primary{margin-top:24px}
.ay-calc__card{background:#fff;border:1px solid var(--ay-line);border-radius:20px;padding:38px 38px 32px;box-shadow:0 2px 6px rgba(28,31,34,.04),0 26px 60px rgba(28,31,34,.08)}
.ay-calc__card-head{display:flex;align-items:center;justify-content:space-between}
.ay-calc__card-title{font:700 13px/1 var(--ay-sans);letter-spacing:.2em;color:var(--ay-ink-caption)}
.ay-calc__note{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ay-ink-caption)}
.ay-calc__rows{display:grid;gap:18px;margin-top:20px}
.ay-calc__row-head{display:flex;justify-content:space-between;font-size:16px;margin-bottom:8px}
.ay-calc__row-head span:first-child{font-weight:600;color:var(--ay-ink)}.ay-calc__row-head span:last-child{font-weight:800;color:var(--ay-ink-deep);font-variant-numeric:tabular-nums}
.ay-calc__foot{margin:22px 0 0;font-size:13.5px;color:var(--ay-ink-caption)}
@media (max-width:1024px){.ay-calc{gap:40px}}
@media (max-width:767px){.ay-calc{grid-template-columns:1fr;gap:36px}.ay-calc__card{padding:28px 22px 24px}}

/* ---------- Comparison table ---------- */
.ay-cmp-wrap{background:#fff;border:1px solid var(--ay-line);border-radius:20px;overflow:hidden;box-shadow:0 2px 6px rgba(28,31,34,.04),0 26px 60px rgba(28,31,34,.07)}
.ay-cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.ay-cmp tr,.ay-cmp thead,.ay-cmp tbody{background:transparent}
.ay-cmp th,.ay-cmp td{border:0;border-bottom:1px solid var(--ay-line);text-align:center;vertical-align:middle;background:transparent}
.ay-cmp thead th{border-bottom:1px solid var(--ay-line);padding:16px 20px;font:700 13px/1.5 var(--ay-sans);letter-spacing:.12em;color:var(--ay-ink-caption)}
.ay-cmp thead th.ay-cmp__blank{width:37.5%}
.ay-cmp thead th.ay-cmp__a{background:var(--ay-sage-soft);color:var(--ay-ink);letter-spacing:.14em}
.ay-cmp thead th.ay-cmp__a img{display:block;margin:0 auto 6px;height:20px;width:auto}
.ay-cmp tbody th{text-align:left;padding:19px 26px;font:600 15.5px/1.4 var(--ay-sans);color:var(--ay-ink)}
.ay-cmp tbody td{padding:19px 20px;font:400 14.5px/1.4 var(--ay-sans);color:var(--ay-ink-quiet)}
.ay-cmp tbody td.ay-cmp__a{background:var(--ay-sage-soft);font-weight:800;font-size:16px;color:var(--ay-ink-deep)}
.ay-cmp th.ay-cmp__a,.ay-cmp td.ay-cmp__a{border-bottom-color:rgba(93,106,74,.16)} /* row lines stay inside the band's own family instead of cutting white through it (Reva, 2026-10-19) */
.ay-cmp tbody tr:last-child th,.ay-cmp tbody tr:last-child td{border-bottom:0}
@media (max-width:767px){.ay-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.ay-cmp{min-width:560px}.ay-cmp thead th.ay-cmp__blank{width:150px}.ay-cmp tbody th{padding:16px 14px}.ay-cmp tbody td{padding:16px 12px}}

/* ---------- Native widget refinements ---------- */
/* Nested Tabs as pills (Inside the app) */
.ay-tabs .e-n-tabs-heading{gap:10px;flex-wrap:wrap;justify-content:center}
.ay-tabs .e-n-tab-title{background:#fff;color:var(--ay-ink);border:1.5px solid var(--ay-field);border-radius:999px;padding:13px 26px;font:700 16px/1.2 var(--ay-sans);transition:background .25s ease,color .25s ease,border-color .25s ease;cursor:pointer}
.ay-tabs .e-n-tab-title:hover{border-color:var(--ay-wine)}
.ay-tabs .e-n-tab-title[aria-selected="true"]{background:var(--ay-wine);color:#fff;border-color:var(--ay-wine)}
.ay-tabs .e-n-tab-title .e-n-tab-title-text{font:inherit}
.ay-tabs .e-n-tabs-content{margin-top:0}
.ay-shot img{display:block;width:100%;max-height:520px;object-fit:cover;object-position:top}
/* Portrait tablet shells (home "Inside the app", 2026-10-19): the whole screen at 3:4, never wider than 560px, so the
   1536px capture renders at 2.7x and stays crisp; the frame sits centred in its column. */
.e-con.ay-shell--tablet{--width:100%;width:100%;max-width:560px;margin-left:auto;margin-right:auto}
.ay-tablet img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top}
/* Nested Accordion as the FAQ list */
.ay-faq .e-n-accordion{counter-reset:ayfaq}
.ay-faq .e-n-accordion-item{border-bottom:1px solid var(--ay-line);counter-increment:ayfaq}
.ay-faq .e-n-accordion-item-title{padding:26px 0;gap:24px;cursor:pointer;background:none;border:0}
.ay-faq .e-n-accordion-item-title-header{display:flex;align-items:baseline;gap:20px;min-width:0}
.ay-faq .e-n-accordion-item-title-header::before{content:counter(ayfaq,decimal-leading-zero);font:700 12px/1 var(--ay-sans);letter-spacing:.14em;color:var(--ay-ink-caption)}
.ay-faq .e-n-accordion-item-title-text{font:600 19px/1.35 var(--ay-sans);color:var(--ay-ink-deep)}
.ay-faq .e-n-accordion-item-title-icon{position:relative;width:20px;height:20px;flex:none;color:var(--ay-link)}
.ay-faq .e-n-accordion-item-title-icon span,.ay-faq .e-n-accordion-item-title-icon svg{display:none!important}
.ay-faq .e-n-accordion-item-title-icon::before,.ay-faq .e-n-accordion-item-title-icon::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--ay-wine);transform:translate(-50%,-50%);transition:transform .3s ease}
.ay-faq .e-n-accordion-item-title-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.ay-faq details[open]>summary .e-n-accordion-item-title-icon::before{transform:translate(-50%,-50%) rotate(45deg)}
.ay-faq details[open]>summary .e-n-accordion-item-title-icon::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ay-faq .e-n-accordion-item>.e-con{padding:0 40px 26px 42px;animation:lux-in .35s ease both}
@media (max-width:767px){.ay-faq .e-n-accordion-item>.e-con{padding:0 0 22px 0}.ay-faq .e-n-accordion-item-title{padding:20px 0}}
/* App badges text */
.ay-badge-text p{margin:0;line-height:1.2}.ay-badge-small{font-size:9.5px;letter-spacing:.04em;color:var(--ay-ink-caption)}.ay-badge-big{font-size:15px;font-weight:700}
/* Photo with the sage offset block behind it (Our story) */
.ay-photo-offset{position:relative}
.ay-photo-offset::after{content:"";position:absolute;inset:22px 0 0 22px;border-radius:20px;background:var(--ay-sage-soft);z-index:0}
.ay-ratio-4-5 img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;display:block}
/* Closing CTA glow */
.ay-glow{position:relative}
.ay-glow::before{content:"";position:absolute;bottom:-120px;left:12%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(240,220,215,.9),rgba(240,220,215,0) 70%);pointer-events:none}
/* Elementor Pro form fields to the mockup */
.ay-form .elementor-field-group{margin-bottom:0}
.ay-form .elementor-field-label{font:600 14px/1.4 var(--ay-sans);color:var(--ay-ink-body);margin-bottom:6px}
.ay-form .elementor-field-textual{padding:14px 15px;border:1.5px solid var(--ay-field);border-radius:10px;font:400 16.5px/1.4 var(--ay-sans);background:#fff;min-height:48px}
.ay-form .elementor-field-textual:focus{border-color:var(--ay-wine);box-shadow:none;outline:0}
.ay-form .elementor-button{border-radius:999px;font:700 17px/1.2 var(--ay-sans)}
.ay-form .elementor-message{font:400 15px/1.5 var(--ay-sans)}
/* Popup */
.ay-popup .dialog-widget-content{border-radius:20px}
.ay-popup .dialog-close-button{top:16px;right:16px}
.elementor-popup-modal.ay-popup{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* FAQ titles: beat the kit's h2/h3 rules whatever heading tag the accordion uses */
.ay-faq .e-n-accordion-item-title-header :is(h2,h3,h4,div,span).e-n-accordion-item-title-text,.ay-faq .e-n-accordion-item-title-text{font:600 19px/1.35 var(--ay-sans)!important;letter-spacing:0!important;color:var(--ay-ink-deep)!important;margin:0}

/* ---------- Specificity fixes over Elementor defaults ----------
   Elementor ships `.elementor-widget-n-tabs .e-n-tab-title` and
   `.elementor-widget-n-accordion .e-n-accordion-item-title` at specificity
   (0,2,0) - identical to our `.ay-tabs …` / `.ay-faq …` rules above - and its
   stylesheets are enqueued after this file, so on the tie Elementor won and the
   pills rendered square and every FAQ row grew a full 1px box ("grid lines").
   The kit (`post-<kit>.css`) likewise styles bare `button:focus` maroon and all
   `a` magenta. Everything below simply outranks those; values are unchanged
   from the mockup (reference/unpack/markup/isHome.html, seo_show.html). */

/* Inside the app: pills, not squares (mockup: radius 999px, 13px 26px, 15/700,
   1.5px border, transparent until selected) */
.ay-tabs.ay-tabs .e-n-tab-title{background:transparent;color:var(--ay-ink);border:1.5px solid var(--ay-field);border-radius:999px;padding:13px 26px;font:700 16px/1.2 var(--ay-sans);transition:background .25s ease,color .25s ease,border-color .25s ease;cursor:pointer}
.ay-tabs.ay-tabs .e-n-tab-title:hover{border-color:var(--ay-wine)}
.ay-tabs.ay-tabs .e-n-tab-title[aria-selected="true"]{background:var(--ay-wine);color:#fff;border-color:var(--ay-wine)}
/* mockup puts 48px between the pill row and the screenshot panel */
.ay-tabs.ay-tabs .e-n-tabs-content{margin-top:38px}
@media (max-width:767px){.ay-tabs.ay-tabs .e-n-tabs-content{margin-top:22px}}

/* FAQ / "Common questions" bands: hairline rows, no cell borders, no frame.
   Covers every accordion class in the build (home, seo band, marketplace, tools). */
.ay-faq.ay-faq,.ay-faq-seo.ay-faq-seo,.ay-seo-faq.ay-seo-faq{--n-accordion-border-width:0;--n-accordion-border-style:none}
.ay-faq.ay-faq .e-n-accordion-item-title,
.ay-faq-seo.ay-faq-seo .e-n-accordion-item-title,
.ay-seo-faq.ay-seo-faq .e-n-accordion-item-title{border:0;background:none}
.ay-faq.ay-faq .e-n-accordion,.ay-faq-seo.ay-faq-seo .e-n-accordion,
.ay-seo-faq.ay-seo-faq .e-n-accordion{border:0}
.ay-faq-seo.ay-faq-seo .e-n-accordion-item,
.ay-seo-faq.ay-seo-faq .e-n-accordion-item{border:0;border-top:1px solid var(--ay-line)}

/* Phone demo tabs: the kit paints bare `button:focus` maroon, which stuck after a
   click and read as a maroon hover. Keep the tab flat, keep a visible focus ring. */
.ay-phone button.ay-phone__tab:focus,
.ay-phone button.ay-phone__tab:focus-visible,
.ay-phone button.ay-phone__tab:active{background:none;color:var(--ay-ink)}
.ay-phone button.ay-phone__tab:focus{outline:none}
.ay-phone button.ay-phone__tab:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:-3px;border-radius:8px}
.ay-phone button.ay-phone__tab.is-active:focus,
.ay-phone button.ay-phone__tab.is-active:focus-visible{color:var(--ay-wine)}

/* Primary button label: the kit's `a{color:var(--ay-link)}` beat `.ay-btn--primary`,
   so "Save this budget free" rendered magenta-on-maroon. */
a.ay-btn.ay-btn--primary,a.ay-btn.ay-btn--primary:hover,a.ay-btn.ay-btn--primary:focus{color:#fff}

/* ayedu-checklist: tradition chips + ordered timeline (isResources.html, lower block). */
.ay-cl__chips{display:flex;gap:8px;flex-wrap:wrap}
.ay-cl button.ay-cl__chip{position:relative;min-height:0;margin:0;text-transform:none;letter-spacing:0;border:1px solid var(--ay-field);background:#fff;color:var(--ay-ink);border-radius:999px;padding:9px 16px;font:700 14px/1.2 var(--ay-sans);cursor:pointer;transition:border-color .2s ease,background .2s ease;box-shadow:none;line-height:1.2}
.ay-cl button.ay-cl__chip::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)} /* 44px tap target, mockup-sized chip */
.ay-cl button.ay-cl__chip:hover,.ay-cl button.ay-cl__chip:focus,.ay-cl button.ay-cl__chip:active{border-color:var(--ay-wine);background:#fff;color:var(--ay-ink)}
.ay-cl button.ay-cl__chip:not(.is-active):focus:not(:focus-visible){border-color:var(--ay-field)}
.ay-cl button.ay-cl__chip.is-active,.ay-cl button.ay-cl__chip.is-active:hover,.ay-cl button.ay-cl__chip.is-active:focus{background:var(--ay-blush-pill);border-color:var(--ay-wine);color:var(--ay-ink)}
.ay-cl button.ay-cl__chip:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px;box-shadow:none} /* beats Hello reset [tabindex]:focus-visible (0,3,0) */
.ay-cl__list{position:relative;margin:26px 0 0;max-width:760px}
.ay-cl .ay-cl__rows{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ay-cl__list[hidden]{display:none}
.ay-cl__line{position:absolute;left:205px;top:24px;bottom:24px;width:2px;border-radius:2px;background:linear-gradient(to bottom,var(--ay-sage-soft),var(--ay-sage))}
.ay-cl__row{display:grid;grid-template-columns:180px auto 1fr;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid var(--ay-line)}
.ay-cl__when{font:700 13px/1.5 var(--ay-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ay-link)}
.ay-cl__dot{width:11px;height:11px;border-radius:50%;background:var(--ay-sage);border:2px solid #fff;box-shadow:0 0 0 1px rgba(93,106,74,.3);align-self:center;position:relative;z-index:1}
.ay-cl__what{font:400 20px/1.3 var(--ay-serif);color:var(--ay-ink-deep)}
/* Phones: the mockup's 820px rule, verbatim (14px dot column, 2px/14px gaps, line at 6px). */
@media (max-width:820px){.ay-cl__line{left:6px}.ay-cl__row{grid-template-columns:14px 1fr;gap:2px 14px}.ay-cl__when{grid-column:2;grid-row:1}.ay-cl__dot{grid-column:1;grid-row:1/3;align-self:start;margin-top:4px}.ay-cl__what{grid-column:2;grid-row:2}}

/* CTA menu (blog sidebar "Get started"): cream pill on the maroon card, list opens below it. */
.ay-ctam{position:relative;width:100%}
.ay-ctam button.ay-ctam__btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:0;padding:13px 22px;border:0;border-radius:999px;background:var(--ay-cream,var(--ay-cream));color:var(--ay-maroon);font:700 16.5px/1.2 var(--ay-sans);letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:none;transition:background-color .2s var(--ay-ease-ui),transform .12s var(--ay-ease-ui)}
.ay-ctam button.ay-ctam__btn:hover,.ay-ctam button.ay-ctam__btn:focus{background:var(--ay-blush);color:var(--ay-maroon);border:0}
.ay-ctam button.ay-ctam__btn:active{transform:scale(.985)}
.ay-ctam button.ay-ctam__btn:focus-visible{outline:2px solid var(--ay-blush);outline-offset:3px}
.ay-ctam__caret{flex:none;transition:transform .2s var(--ay-ease-ui)}
.ay-ctam__btn[aria-expanded="true"] .ay-ctam__caret{transform:rotate(180deg)}
.ay-ctam__menu{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);display:grid;gap:2px;padding:6px;background:#fff;border:1px solid var(--ay-line);border-radius:16px;box-shadow:0 18px 44px rgba(28,31,34,.16)}
.ay-ctam__menu[hidden]{display:none}
.ay-ctam a.ay-ctam__item{display:grid;gap:2px;padding:12px 14px;border-radius:11px;color:var(--ay-ink);text-decoration:none;min-height:44px}
.ay-ctam a.ay-ctam__item:hover,.ay-ctam a.ay-ctam__item:focus{background:var(--ay-highlight);color:var(--ay-ink);outline:0}
.ay-ctam a.ay-ctam__item:focus-visible{box-shadow:inset 0 0 0 2px var(--ay-maroon)}
.ay-ctam__title{font:600 16px/1.3 var(--ay-sans);color:var(--ay-ink-deep,#141619)}
.ay-ctam__sub{font:400 14.5px/1.4 var(--ay-sans);color:var(--ay-ink-body)}
@media (prefers-reduced-motion:reduce){.ay-ctam__caret,.ay-ctam button.ay-ctam__btn{transition:none}}
/* Blog post sidebar: sticky beside the article on desktop, after it on tablets and phones (as on ayedu.ai). */
@media (min-width:1025px){.ay-post-layout>.ay-post-aside{position:sticky;top:calc(var(--ay-nav-offset,88px) + 24px);align-self:start;height:auto}}
/* Articles without a note keep only the CTA card (the note's heading widget renders nothing when its field is empty). */
.ay-side-note:not(:has(.elementor-heading-title)){display:none}

/* ayedu-downloads: gate line + six cards (isResources.html). */
.ay-dl__gate{margin:16px 0 0;font:400 18px/1.75 var(--ay-sans);color:var(--ay-ink-body)}
.ay-dl__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:50px}
.ay-dl__card{display:flex;flex-direction:column;padding:28px 26px;border:1px solid var(--ay-line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(28,31,34,.03),0 12px 32px rgba(28,31,34,.05);transition:background .25s ease,border-color .25s ease}
.ay-dl__card.is-done{background:var(--ay-stone)}
.ay-dl__tag{margin:0;font:700 13px/1 var(--ay-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ay-link)}
.ay-dl__card[data-ay-gate="free"] .ay-dl__tag,.ay-dl__card.is-done .ay-dl__tag,.ay-dl__card.is-unlocked .ay-dl__tag{color:var(--ay-sage-text)}
.ay-dl__card.is-unlocked:not(.is-done) .ay-dl__tag{color:var(--ay-link)}
.ay-dl .ay-dl__card.is-soon .ay-dl__tag{color:var(--ay-ink-quiet)}
.ay-dl .ay-dl__title,.elementor .ay-dl .ay-dl__title{margin:12px 0 0;font:400 22px/1.2 var(--ay-serif);color:var(--ay-ink-deep);letter-spacing:0}
.ay-dl__desc{margin:8px 0 0;font:400 15.5px/1.65 var(--ay-sans);color:var(--ay-ink-body)}
.ay-dl__form{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;position:relative}
.ay-dl__form[hidden]{display:none}
/* Raised specificity: the kit styles every input[type=email] (10px radius, 1px #666 border, 15.5px text, 14px 15px padding) at 0,3,1 and loads after this file, so these selectors carry 0,4,1. */
.ay-dl .ay-dl__card .ay-dl__form input.ay-dl__email{flex:1;min-width:140px;height:46px;min-height:46px;margin:0;padding:0 14px;border:1.5px solid var(--ay-field);border-radius:999px;font:400 15.5px/1.3 var(--ay-sans);color:var(--ay-ink);background:#fff;box-shadow:none;transition:border-color .2s ease}
.ay-dl .ay-dl__card .ay-dl__form input.ay-dl__email::placeholder{color:var(--ay-ink-quiet);opacity:1}
.ay-dl .ay-dl__card .ay-dl__form input.ay-dl__email:hover{border-color:var(--ay-ink-quiet)}
.ay-dl .ay-dl__card .ay-dl__form input.ay-dl__email:focus{outline:0;border-color:var(--ay-wine);box-shadow:0 0 0 3px rgba(64,0,32,.12)}
.ay-dl__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* "User type" for HubSpot (client 2026-10-24): hidden by class, never type="hidden" or an inline style, which HubSpot's collected-forms script skips. */
.ay-dl .ay-dl__ut{display:none}
.ay-dl button.ay-dl__send{display:inline-flex;align-items:center;justify-content:center;border:0;height:46px;min-height:46px;margin:0;font:700 15.5px/1.2 var(--ay-sans);padding:0 18px;border-radius:999px;background:var(--ay-btn-bg);color:#fff;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:0}
.ay-dl button.ay-dl__send:hover,.ay-dl button.ay-dl__send:focus{background:var(--ay-wine-hover);color:#fff;border:0}
.ay-dl button.ay-dl__send:active{background:var(--ay-wine-pressed);color:#fff;border:0}
.ay-dl button.ay-dl__send:focus-visible,.ay-dl .ay-dl__btn:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-dl__send[disabled]{opacity:.6;cursor:wait}
.ay-dl__err{flex-basis:100%;margin:0;font:400 14px/1.5 var(--ay-sans);color:var(--ay-link)}
.ay-dl .ay-dl__btn{margin-top:16px;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:46px;min-height:46px;box-sizing:border-box;border:0;font:700 15.5px/1.2 var(--ay-sans);padding:0 16px;border-radius:999px;background:var(--ay-btn-bg);color:#fff;text-decoration:none;cursor:pointer;transition:background .25s ease,color .25s ease}
.ay-dl .ay-dl__btn:hover,.ay-dl .ay-dl__btn:focus{background:var(--ay-wine-hover);color:#fff;text-decoration:none}
.ay-dl .ay-dl__btn:active{background:var(--ay-wine-pressed);color:#fff;text-decoration:none}
.ay-dl .ay-dl__btn[hidden],.ay-dl .ay-dl__form[hidden]{display:none}
.ay-dl .ay-dl__card.is-done .ay-dl__btn,.ay-dl .ay-dl__card.is-done .ay-dl__btn:hover{background:rgba(28,31,34,.08);color:var(--ay-ink-quiet);box-shadow:none;transform:none}
/* A card with no file yet (the day-of timeline): the button reads as unavailable, never as a dead link. */
.ay-dl .ay-dl__btn[aria-disabled="true"],.ay-dl .ay-dl__btn[aria-disabled="true"]:hover{background:rgba(28,31,34,.08);color:var(--ay-ink-quiet);cursor:default;box-shadow:none;transform:none}
/* Control placement, straight from the mockup (reference/unpack/markup/isResources.html): the form and the Download
   button each sit 16px under the blurb. This used to be `margin-top:auto`, which pinned the control to the bottom of
   the card instead, and because the button (46px) is shorter than the email row (50px) the auto margin resolved to
   4.14px on the free card and 0 everywhere else: the one Download button in the row rendered 4px below its
   neighbors, with no gap under the blurb at all. (The `.ay-dl__desc{margin-bottom:16px}` that used to compensate
   computed to 0px: Elementor's own `p` reset wins on specificity.) One fixed offset, so every control lines up. */
.ay-dl .ay-dl__form{margin-top:16px}
/* (An earlier `padding-top:0` here zeroed only the top padding of the Download button, which left its label 6px from
   the top of a 46px pill: the off-center button the client reported. Controls are now fixed-height flex boxes.) */
@media (max-width:1024px){.ay-dl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.ay-dl__grid{grid-template-columns:1fr}}
.ay-dl-leadform{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Grouped library (V5 pass): category headings, "what's included" list and the matching-tool link. */
.ay-dl h3.ay-dl__cat,.elementor .ay-dl h3.ay-dl__cat{margin:56px 0 0;font:700 13px/1 var(--ay-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ay-sage-text)}
.ay-dl .ay-dl__gate+h3.ay-dl__cat{margin-top:44px}
.ay-dl__grid--group{margin-top:18px}
.ay-dl ul.ay-dl__inc{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.ay-dl ul.ay-dl__inc li{position:relative;padding-left:20px;font:400 15px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
.ay-dl ul.ay-dl__inc li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;border-left:2px solid var(--ay-sage);border-bottom:2px solid var(--ay-sage);transform:rotate(-45deg)}
.ay-dl .ay-dl__tool{margin-top:14px;align-self:flex-start;font:700 15.5px/1.3 var(--ay-sans);color:var(--ay-sage-text);text-decoration:none}
.ay-dl .ay-dl__tool:hover{color:var(--ay-link-hover)}
.ay-dl p.ay-dl__catlabel{margin:0 0 10px;font:700 13px/1 var(--ay-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ay-ink-caption)}

/* Pro Forms, shared: the "User type" row (Couple / Vendor / Planner) every form carries for HubSpot (client, 2026-10-24).
   HubSpot's collected-forms script skips type="hidden" inputs and inputs hidden with an inline style, and nothing else, so
   the field is a plain text input with a default value (build/lib/el.mjs userType) and its row is hidden here, by class:
   Elementor names each field's row elementor-field-group-<field id>. Forms with an "I am…" choice copy the choice into the
   field (assets/js/widgets-forms.js). */
.ay-form .elementor-field-group-user_type{display:none}

/* The glossary hub (/glossary/, the client's [ayedu_glossary_hub] shortcode) in the site's own design: light hero like
   the traditions hubs, the site's field and pill controls in a sticky bar, the A to Z list on hairlines, the site's
   accordion and CTA panel. The glossary's own stylesheet is removed (class-legacy-glossary.php). */
html body .ayedu-glossary-wrapper { --gl-wrap: 1288px; --gl-gutter: clamp(16px, 5.3vw, 76px); }
html body .ayedu-glossary-wrapper :is(.ayedu-hero-container, .ayedu-nav-container, .ayedu-atoz-container, .ayedu-faq-container, .ayedu-bottom-cta-inner) {
  max-width: calc(var(--gl-wrap) + 2 * var(--gl-gutter)); margin-inline: auto; padding-inline: var(--gl-gutter);
}

/* Hero: breadcrumb, serif title with the sage italic accent the traditions hubs use, lead, two buttons, photo. */
html body .ayedu-glossary-wrapper .ayedu-hero-section { background: var(--ay-page); padding: 26px 0 clamp(40px, 6vw, 72px); }
html body .ayedu-glossary-wrapper .ayedu-hero-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
html body .ayedu-glossary-wrapper .ayedu-hero-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ay-ink-quiet); margin: 0 0 clamp(28px, 4vw, 48px); }
html body .ayedu-glossary-wrapper .ayedu-hero-breadcrumb a { color: var(--ay-wine); font-weight: 600; text-decoration: none; }
html body .ayedu-glossary-wrapper .ayedu-hero-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body .ayedu-glossary-wrapper .ayedu-hero-breadcrumb .sep { font-size: 0; color: var(--ay-ink-caption); }
html body .ayedu-glossary-wrapper .ayedu-hero-breadcrumb .sep::before { content: "·"; font-size: 14px; }
html body .ayedu-glossary-wrapper .ayedu-hero-breadcrumb .current { color: var(--ay-ink-body); }
html body .ayedu-glossary-wrapper .ayedu-hero-h1 { font-family: var(--ay-serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ay-ink); margin: 0 0 22px; text-wrap: balance; }
html body .ayedu-glossary-wrapper .ayedu-hero-h1 span { font-family: inherit; color: var(--ay-ink) !important; }
html body .ayedu-glossary-wrapper .ayedu-hero-h1 span + span { font-style: italic; font-weight: 600; color: var(--ay-sage) !important; }
html body .ayedu-glossary-wrapper .ayedu-hero-p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ay-ink-quiet); max-width: 56ch; margin: 0 0 30px; }
html body .ayedu-glossary-wrapper .ayedu-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
html body .ayedu-glossary-wrapper :is(.ayedu-btn-orange, .ayedu-btn-secondary, .ayedu-cta-white-btn) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-family: var(--ay-sans); font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ay-ease-ui), border-color .2s var(--ay-ease-ui), color .2s var(--ay-ease-ui), transform .12s var(--ay-ease-ui);
}
html body .ayedu-glossary-wrapper :is(.ayedu-btn-orange, .ayedu-cta-white-btn) { background: var(--ay-wine); color: var(--ay-white); border: 1px solid var(--ay-wine); }
html body .ayedu-glossary-wrapper :is(.ayedu-btn-orange, .ayedu-cta-white-btn):hover { background: var(--ay-wine-hover); border-color: var(--ay-wine-hover); color: var(--ay-white); }
html body .ayedu-glossary-wrapper .ayedu-btn-secondary { background: var(--ay-white); color: var(--ay-ink); border: 1px solid var(--ay-ink); }
html body .ayedu-glossary-wrapper .ayedu-btn-secondary:hover { border-color: var(--ay-wine); color: var(--ay-wine); }
html body .ayedu-glossary-wrapper :is(.ayedu-btn-orange, .ayedu-btn-secondary, .ayedu-cta-white-btn):active { transform: scale(.98); }
html body .ayedu-glossary-wrapper .ayedu-hero-card { border-radius: var(--ay-radius-card); overflow: hidden; box-shadow: var(--ay-shadow-card); aspect-ratio: 4 / 3; background: var(--ay-grey); }
html body .ayedu-glossary-wrapper .ayedu-hero-card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Sticky bar: the site's search field, tradition pills, and the A to Z jump row. */
html body .ayedu-glossary-wrapper .ayedu-nav-section { position: sticky; top: 0 !important; z-index: 20; background: var(--ay-page) !important; border-block: 1px solid var(--ay-line); padding: 18px 0; }
html body.admin-bar .ayedu-glossary-wrapper .ayedu-nav-section { top: 32px !important; }
@media (max-width: 782px) { html body.admin-bar .ayedu-glossary-wrapper .ayedu-nav-section { top: 46px !important; } }
html body .ayedu-glossary-wrapper .ayedu-nav-container { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; grid-template-areas: "search filters" "letters letters"; gap: 14px 24px; align-items: center; }
html body .ayedu-glossary-wrapper .ayedu-search-box { grid-area: search; position: relative; }
html body .ayedu-glossary-wrapper .ayedu-search-box svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ay-ink-quiet); pointer-events: none; }
/* !important on the box: the Elementor kit styles every text input (padding, radius, border) with a longer selector. */
html body .ayedu-glossary-wrapper .ayedu-search-input { width: 100%; height: 48px !important; padding: 0 18px 0 46px !important; border: 1px solid var(--ay-field) !important; border-radius: 999px !important; background: var(--ay-white) !important; color: var(--ay-ink); font: 400 16px/1 var(--ay-sans); box-shadow: none !important; transition: border-color .2s var(--ay-ease-ui); }
html body .ayedu-glossary-wrapper .ayedu-search-input::placeholder { color: var(--ay-ink-caption); opacity: 1; }
html body .ayedu-glossary-wrapper .ayedu-search-input:hover { border-color: var(--ay-ink) !important; }
html body .ayedu-glossary-wrapper .ayedu-search-input:focus { outline: 2px solid var(--ay-magenta); outline-offset: 2px; border-color: var(--ay-ink) !important; }
html body .ayedu-glossary-wrapper .ayedu-tradition-filters { grid-area: filters; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
html body .ayedu-glossary-wrapper .ayedu-filter-pill { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #DADADA; background: var(--ay-white); color: var(--ay-ink); font: 600 14.5px/1 var(--ay-sans); cursor: pointer; transition: background-color .2s var(--ay-ease-ui), border-color .2s var(--ay-ease-ui), color .2s var(--ay-ease-ui); }
html body .ayedu-glossary-wrapper .ayedu-filter-pill:hover { border-color: var(--ay-wine); }
html body .ayedu-glossary-wrapper .ayedu-filter-pill.active { background: var(--ay-blush); border-color: var(--ay-wine); color: var(--ay-wine); }
html body .ayedu-glossary-wrapper .ayedu-alphabet-bar { grid-area: letters; display: flex; gap: 4px; justify-content: space-between; }
html body .ayedu-glossary-wrapper .ayedu-letter-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 999px; color: var(--ay-ink); font: 600 14px/1 var(--ay-sans); text-decoration: none; transition: background-color .2s var(--ay-ease-ui), color .2s var(--ay-ease-ui); }
html body .ayedu-glossary-wrapper .ayedu-letter-pill:hover { background: var(--ay-blush); color: var(--ay-wine); }
html body .ayedu-glossary-wrapper .ayedu-letter-pill.active { background: var(--ay-wine); color: var(--ay-white); }
html body .ayedu-glossary-wrapper .ayedu-letter-pill.disabled { color: #B9BCBE; pointer-events: none; }

/* A to Z: three columns of letter blocks on hairlines, serif letters, the term as an ink link with a tradition chip. */
html body .ayedu-glossary-wrapper .ayedu-atoz-section { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
html body .ayedu-glossary-wrapper .ayedu-atoz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 64px); align-items: start; }
html body .ayedu-glossary-wrapper .ayedu-letter-heading { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--ay-line); font-family: var(--ay-serif); font-size: 40px; line-height: 1; color: var(--ay-wine); }
html body .ayedu-glossary-wrapper .ayedu-letter-count { font: 600 12px/1 var(--ay-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ay-ink-caption); }
html body .ayedu-glossary-wrapper .ayedu-terms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html body .ayedu-glossary-wrapper .ayedu-term-item { display: flex; align-items: center; gap: 10px; min-height: 44px; }
html body .ayedu-glossary-wrapper .ayedu-term-link { color: var(--ay-ink); font-size: 18px; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s var(--ay-ease-ui), background-size .25s var(--ay-ease-ui); }
html body .ayedu-glossary-wrapper .ayedu-term-link:hover { color: var(--ay-wine); background-size: 100% 1px; }
html body .ayedu-glossary-wrapper .ayedu-term-tag { padding: 4px 9px; border-radius: 999px; background: var(--ay-blush-pill); color: var(--ay-wine); font: 600 11.5px/1.2 var(--ay-sans); letter-spacing: .02em; }
html body .ayedu-glossary-wrapper .ayedu-term-item[data-cat*="muslim"] .ayedu-term-tag { background: var(--ay-sage-soft); color: var(--ay-sage-text); }
html body .ayedu-glossary-wrapper .no-results-message { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--ay-ink-quiet); font-size: 18px; }

/* FAQ: the site's accordion rows. */
html body .ayedu-glossary-wrapper .ayedu-faq-section { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--ay-line); }
html body .ayedu-glossary-wrapper .ayedu-faq-container { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
html body .ayedu-glossary-wrapper .ayedu-section-title h2 { font-family: var(--ay-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ay-ink); margin: 0 0 14px; }
html body .ayedu-glossary-wrapper .ayedu-section-title p { font-size: 17px; line-height: 1.6; color: var(--ay-ink-quiet); margin: 0; max-width: 40ch; }
html body .ayedu-glossary-wrapper .ayedu-faq-list { border-top: 1px solid var(--ay-line); }
html body .ayedu-glossary-wrapper .ayedu-faq-item { border-bottom: 1px solid var(--ay-line); }
html body .ayedu-glossary-wrapper .ayedu-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ay-ink); }
html body .ayedu-glossary-wrapper .ayedu-faq-question:hover { color: var(--ay-wine); }
html body .ayedu-glossary-wrapper .ayedu-faq-icon { flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid #DADADA; font-size: 20px; font-weight: 400; line-height: 1; color: var(--ay-ink); transition: transform .25s var(--ay-ease-ui), background-color .2s var(--ay-ease-ui); }
html body .ayedu-glossary-wrapper .ayedu-faq-item.active .ayedu-faq-icon { transform: rotate(45deg); background: var(--ay-blush); border-color: var(--ay-blush); color: var(--ay-wine); }
html body .ayedu-glossary-wrapper .ayedu-faq-answer { padding: 0 52px 22px 0; font-size: 17px; line-height: 1.65; color: var(--ay-ink-quiet); }

/* Closing panel: the blush CTA panel the blog ends with. */
html body .ayedu-glossary-wrapper .ayedu-bottom-cta { padding: 0 0 clamp(56px, 7vw, 96px); }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner { position: relative; }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner::before { content: ""; position: absolute; inset: 0 var(--gl-gutter); z-index: 0; background: var(--ay-blush); border-radius: var(--ay-radius-card); }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner > * { position: relative; z-index: 1; }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title btn" "text btn"; column-gap: 32px; align-items: center; padding-block: clamp(28px, 4vw, 44px); }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner h2 { grid-area: title; margin: 0 0 8px; padding-left: clamp(24px, 3vw, 44px); font-family: var(--ay-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ay-ink); }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner p { grid-area: text; margin: 0; padding-left: clamp(24px, 3vw, 44px); font-size: 16.5px; line-height: 1.55; color: var(--ay-ink-tint); max-width: 62ch; }
html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner .ayedu-cta-white-btn { grid-area: btn; margin-right: clamp(24px, 3vw, 44px); }

@media (max-width: 1024px) {
  html body .ayedu-glossary-wrapper .ayedu-atoz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .ayedu-glossary-wrapper .ayedu-faq-container { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  html body .ayedu-glossary-wrapper .ayedu-hero-container { grid-template-columns: 1fr; }
  html body .ayedu-glossary-wrapper .ayedu-hero-section { padding-top: 20px; }
  html body .ayedu-glossary-wrapper .ayedu-hero-card { aspect-ratio: 16 / 10; }
  /* On a phone the three rows would cover a quarter of the screen, so the bar scrolls with the page. */
  html body .ayedu-glossary-wrapper .ayedu-nav-section { position: static; }
  html body .ayedu-glossary-wrapper .ayedu-nav-container { grid-template-columns: 1fr; grid-template-areas: "search" "filters" "letters"; gap: 12px; }
  html body .ayedu-glossary-wrapper .ayedu-tradition-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gl-gutter)); padding-inline: var(--gl-gutter); }
  html body .ayedu-glossary-wrapper .ayedu-tradition-filters .ayedu-filter-pill { flex: 0 0 auto; }
  html body .ayedu-glossary-wrapper .ayedu-alphabet-bar { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gl-gutter)); padding-inline: var(--gl-gutter); }
  html body .ayedu-glossary-wrapper :is(.ayedu-tradition-filters, .ayedu-alphabet-bar)::-webkit-scrollbar { display: none; }
  html body .ayedu-glossary-wrapper .ayedu-letter-pill { min-width: 40px; height: 40px; }
  html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner { grid-template-columns: 1fr; grid-template-areas: "title" "text" "btn"; row-gap: 6px; }
  html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner :is(h2, p) { padding-inline: 24px; }
  html body .ayedu-glossary-wrapper .ayedu-bottom-cta-inner .ayedu-cta-white-btn { justify-self: start; margin: 14px 0 0 24px; }
}
@media (max-width: 600px) {
  html body .ayedu-glossary-wrapper .ayedu-atoz-grid { grid-template-columns: 1fr; }
  html body .ayedu-glossary-wrapper .ayedu-nav-section { padding: 12px 0; }
  html body .ayedu-glossary-wrapper .ayedu-hero-actions > a { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html body .ayedu-glossary-wrapper * { transition: none !important; }
}

/* The client's glossary (shortcodes in production's must-use files) without its own stylesheet, which
   class-legacy-glossary.php removes. This file holds what the hub and the term pages share: the page frame and the
   states the glossary's scripts rely on. Hub layout: widgets-glossary-hub.css. Term pages: widgets-glossary-term.css. */
html body .ayedu-glossary-wrapper,
html body .ayedu-term-wrapper { font-family: var(--ay-sans); color: var(--ay-ink-body); background: var(--ay-page); }
html body .ayedu-glossary-wrapper *, html body .ayedu-term-wrapper * { box-sizing: border-box; }
/* The Elementor container around the shortcode carried 10px of padding. */
html body .elementor-element:has(> .elementor-widget-shortcode .ayedu-glossary-wrapper),
html body .elementor-element:has(> .elementor-widget-shortcode .ayedu-term-wrapper),
html body .elementor-element:has(> .e-con-inner > .elementor-widget-shortcode .ayedu-term-wrapper) { padding: 0 !important; }
/* States the glossary's scripts toggle. */
html body .ayedu-glossary-wrapper .no-results-message { display: none; }
html body :is(.ayedu-glossary-wrapper, .ayedu-term-wrapper) :is(.ayedu-faq-answer, .ayedu-faq-a) { display: none; }
html body :is(.ayedu-glossary-wrapper, .ayedu-term-wrapper) .ayedu-faq-item.active :is(.ayedu-faq-answer, .ayedu-faq-a) { display: block; }

/* Glossary term pages (/glossary/<term>/, shortcode [ayedu_glossary_term] in production's must-use files). The
   glossary's own stylesheet is removed by class-legacy-glossary.php; this file restyles the same markup as a blog
   article (what-is-a-nikah is the reference): light page, blog breadcrumb, a dotted eyebrow from the category tag,
   a Playfair H1 with a quiet lead, an article column at the blog's measure with Host Grotesk H2s, flat sections
   (no cards), hairline FAQ rows, Keep-reading style blog cards, and the CTA as the blog's sticky wine side card on
   desktop and its blush "Plan it with AyeDu" panel below 1100px. Shared frame + FAQ open state:
   widgets-glossary-legacy.css. Every selector starts with `html body .ayedu-term-wrapper` to outrank the kit. */

html body .ayedu-term-wrapper {
  --gt-measure: 708px;
  --gt-aside: 320px;
  --gt-gutter: 24px;
  line-height: 1.6;
  padding-bottom: 88px;
  overflow-wrap: break-word;
}

/* ---------- Hero: breadcrumb, eyebrow, H1, lead (no dark band) ---------- */
html body .ayedu-term-wrapper .ayedu-term-hero { background: none; color: var(--ay-ink-body); padding: 36px var(--gt-gutter) 0; }
html body .ayedu-term-wrapper .ayedu-term-hero-container { max-width: 1128px; margin: 0 auto; }
html body .ayedu-term-wrapper .ayedu-term-hero-container > :not(.ayedu-term-breadcrumbs) { max-width: var(--gt-measure); }

html body .ayedu-term-wrapper .ayedu-term-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 56px;
  font: 400 15.5px/1.4 var(--ay-sans); color: var(--ay-ink-quiet);
}
html body .ayedu-term-wrapper .ayedu-term-breadcrumbs a {
  color: var(--ay-ink-quiet); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px;
  transition: color .2s var(--ay-ease-ui);
}
html body .ayedu-term-wrapper .ayedu-term-breadcrumbs a:first-child { color: var(--ay-wine); font-weight: 700; }
html body .ayedu-term-wrapper .ayedu-term-breadcrumbs a:hover { color: var(--ay-wine-hover); text-decoration: underline; text-underline-offset: 3px; }
/* The separators are literal ">" spans; show the blog's quiet middle dot instead. */
html body .ayedu-term-wrapper .ayedu-term-breadcrumbs > span:not(:last-child) { font-size: 0; line-height: 0; color: var(--ay-ink-caption); }
html body .ayedu-term-wrapper .ayedu-term-breadcrumbs > span:not(:last-child)::before { content: "\00B7"; font-size: 15.5px; line-height: 1.4; }
html body .ayedu-term-wrapper .ayedu-term-breadcrumbs > span:last-child { color: var(--ay-ink-body); }

/* Category tag as the blog's eyebrow: small tracked caps with a wine dot. */
html body .ayedu-term-wrapper .ayedu-term-badge {
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 0; background: none; border: 0; border-radius: 0;
  font: 600 13px/1.2 var(--ay-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ay-ink);
}
html body .ayedu-term-wrapper .ayedu-term-badge::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ay-wine);
}

html body .ayedu-term-wrapper .ayedu-term-h1 {
  margin: 0 0 22px; font-family: var(--ay-serif); font-weight: 400; font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.08; letter-spacing: -.018em; color: var(--ay-ink-deep); text-wrap: balance;
}
html body .ayedu-term-wrapper .ayedu-term-desc {
  margin: 0; font: 400 20px/1.6 var(--ay-sans); color: var(--ay-ink-quiet); text-wrap: pretty;
}

/* ---------- Article body ---------- */
html body .ayedu-term-wrapper .ayedu-term-main { max-width: calc(1128px + 2 * var(--gt-gutter)); margin: 0 auto; padding: 8px var(--gt-gutter) 0; }
html body .ayedu-term-wrapper .ayedu-term-main > * { max-width: var(--gt-measure); }

/* Flat sections: no card, no shadow, spacing does the separating. */
html body .ayedu-term-wrapper .ayedu-card-section {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 44px 0 0;
}
html body .ayedu-term-wrapper .ayedu-sec-h2 {
  display: block; margin: 0 0 14px; font: 700 30px/1.15 var(--ay-sans); letter-spacing: -.02em; color: var(--ay-ink-deep);
  text-wrap: balance;
}
html body .ayedu-term-wrapper .ayedu-sec-p {
  margin: 0 0 22px; font: 400 18.5px/1.85 var(--ay-sans); color: var(--ay-ink-body); text-wrap: pretty;
}
html body .ayedu-term-wrapper .ayedu-sec-p:last-child { margin-bottom: 0; }
html body .ayedu-term-wrapper .ayedu-sec-p a {
  color: var(--ay-link) !important; font-weight: 400 !important; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; word-break: break-word;
}
html body .ayedu-term-wrapper .ayedu-sec-p a:hover { color: var(--ay-link-hover) !important; }

/* The fallback layout (terms without an outline) has a quick-definition box: a quiet blush note, not a card. */
html body .ayedu-term-wrapper .ayedu-snippet-box {
  margin: 36px 0 0; padding: 22px 24px; background: var(--ay-blush); border: 0; border-radius: 16px; box-shadow: none;
}
html body .ayedu-term-wrapper .ayedu-snippet-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 600 13px/1.2 var(--ay-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ay-wine);
}
html body .ayedu-term-wrapper .ayedu-snippet-title svg { display: none; }
html body .ayedu-term-wrapper .ayedu-snippet-text { margin: 0; font: 400 18.5px/1.75 var(--ay-sans); color: var(--ay-ink-body); }

/* The link sections close the article with a hairline, like the blog's "Keep reading". */
html body .ayedu-term-wrapper .ayedu-card-section:has(.ayedu-blog-grid),
html body .ayedu-term-wrapper .ayedu-card-section:has(.ayedu-chips-grid) { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--ay-line); }
html body .ayedu-term-wrapper .ayedu-card-section:has(.ayedu-blog-grid:not(:empty)) + .ayedu-card-section:has(.ayedu-chips-grid) { margin-top: 40px; padding-top: 0; border-top: 0; }
html body .ayedu-term-wrapper .ayedu-card-section:has(.ayedu-blog-grid) .ayedu-sec-h2,
html body .ayedu-term-wrapper .ayedu-card-section:has(.ayedu-chips-grid) .ayedu-sec-h2 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin-bottom: 18px; }
/* An outline with a "Related Blogs" heading and no links renders an empty grid: hide the whole section. */
html body .ayedu-term-wrapper .ayedu-card-section:has(.ayedu-blog-grid:empty) { display: none; }

/* Related blogs: the blog's Keep-reading cards (white, hairline, 16px radius, serif title). */
html body .ayedu-term-wrapper .ayedu-blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr)); gap: 12px; margin: 0;
}
html body .ayedu-term-wrapper .ayedu-blog-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 112px; padding: 20px;
  background: var(--ay-white); border: 1px solid var(--ay-line); border-radius: 16px; box-shadow: none;
  color: var(--ay-wine); text-decoration: none; transition: border-color .2s var(--ay-ease-ui);
}
html body .ayedu-term-wrapper .ayedu-blog-card::after {
  content: ""; width: 18px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--ay-ease-ui);
}
html body .ayedu-term-wrapper .ayedu-blog-card:hover { border-color: var(--ay-wine); background: var(--ay-white); }
html body .ayedu-term-wrapper .ayedu-blog-card:hover::after { transform: translateX(3px); }
html body .ayedu-term-wrapper .ayedu-blog-title {
  margin: 0; font: 400 18px/1.3 var(--ay-serif); letter-spacing: 0; color: var(--ay-ink-deep); text-wrap: balance;
}
html body .ayedu-term-wrapper .ayedu-blog-card:hover .ayedu-blog-title { color: var(--ay-ink-deep); }

/* Related glossary terms: the site's pills. */
html body .ayedu-term-wrapper .ayedu-chips-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
html body .ayedu-term-wrapper .ayedu-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  background: var(--ay-white); border: 1px solid var(--ay-line);
  font: 600 15.5px/1.2 var(--ay-sans); color: var(--ay-ink); text-decoration: none;
  transition: border-color .2s var(--ay-ease-ui), color .2s var(--ay-ease-ui);
}
html body .ayedu-term-wrapper .ayedu-chip:hover { border-color: var(--ay-wine); color: var(--ay-wine); background: var(--ay-white); }

/* ---------- FAQ: hairline rows, wine chevron that turns when open ---------- */
html body .ayedu-term-wrapper #sec-faqs { margin-top: 56px; }
html body .ayedu-term-wrapper .ayedu-faq-list { margin: 8px 0 0; border-bottom: 1px solid var(--ay-line); }
html body .ayedu-term-wrapper .ayedu-faq-item { margin: 0; border: 0; border-top: 1px solid var(--ay-line); border-radius: 0; overflow: visible; background: none; }
html body .ayedu-term-wrapper .ayedu-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 18px 0;
  background: none; cursor: pointer; font: 600 18px/1.45 var(--ay-sans); color: var(--ay-ink);
  transition: color .2s var(--ay-ease-ui); -webkit-tap-highlight-color: transparent;
}
html body .ayedu-term-wrapper .ayedu-faq-q:hover { color: var(--ay-wine-hover); }
html body .ayedu-term-wrapper .ayedu-faq-q:focus-visible { outline: 2px solid var(--ay-magenta); outline-offset: 2px; border-radius: 4px; }
html body .ayedu-term-wrapper .ayedu-faq-q > span {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--ay-line); background: var(--ay-white); color: var(--ay-wine) !important;
  transition: background-color .2s var(--ay-ease-ui), border-color .2s var(--ay-ease-ui);
}
html body .ayedu-term-wrapper .ayedu-faq-q > span svg { width: 16px; height: 16px; transition: transform .25s var(--ay-ease-ui); }
html body .ayedu-term-wrapper .ayedu-faq-q:hover > span { border-color: var(--ay-wine); }
html body .ayedu-term-wrapper .ayedu-faq-item.active .ayedu-faq-q > span { background: var(--ay-blush); border-color: var(--ay-blush); }
html body .ayedu-term-wrapper .ayedu-faq-item.active .ayedu-faq-q > span svg { transform: rotate(180deg); }
html body .ayedu-term-wrapper .ayedu-faq-a {
  padding: 0 52px 22px 0; margin: 0; border: 0; background: none;
  font: 400 17.5px/1.75 var(--ay-sans); color: var(--ay-ink-quiet);
}

/* ---------- CTA: blush panel in the column (the blog's "Plan it with AyeDu") ---------- */
html body .ayedu-term-wrapper .ayedu-cta-box {
  margin: 56px 0 0; padding: 28px; text-align: left; color: var(--ay-ink-body);
  background: var(--ay-blush); border: 1px solid color-mix(in srgb, var(--ay-wine) 8%, transparent);
  border-radius: var(--ay-radius-card); box-shadow: none;
}
html body .ayedu-term-wrapper .ayedu-cta-box h3 {
  margin: 0 0 8px; font: 400 26px/1.18 var(--ay-serif); letter-spacing: 0; color: var(--ay-ink-deep); text-wrap: balance;
}
html body .ayedu-term-wrapper .ayedu-cta-box p { margin: 0 0 22px; font: 400 17px/1.7 var(--ay-sans); color: var(--ay-ink-body); max-width: 60ch; }
html body .ayedu-term-wrapper .ayedu-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
html body .ayedu-term-wrapper :is(.ayedu-btn-white, .ayedu-btn-trans) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px;
  border-radius: 999px; font: 700 16px/1.2 var(--ay-sans); text-decoration: none; box-shadow: none; transform: none;
  transition: background-color .2s var(--ay-ease-ui), color .2s var(--ay-ease-ui), border-color .2s var(--ay-ease-ui);
}
html body .ayedu-term-wrapper .ayedu-btn-white { background: var(--ay-wine); color: var(--ay-white); border: 1px solid var(--ay-wine); }
html body .ayedu-term-wrapper .ayedu-btn-white:hover { background: var(--ay-wine-hover); border-color: var(--ay-wine-hover); color: var(--ay-white); transform: none; }
html body .ayedu-term-wrapper .ayedu-btn-white:active { background: var(--ay-wine-pressed); }
html body .ayedu-term-wrapper .ayedu-btn-trans { background: transparent; color: var(--ay-wine); border: 1px solid var(--ay-wine); }
html body .ayedu-term-wrapper .ayedu-btn-trans:hover { background: var(--ay-white); color: var(--ay-wine-hover); border-color: var(--ay-wine-hover); }

/* ---------- Desktop: article + sticky wine side card (the blog's "Plan your wedding on AyeDu") ---------- */
@media (min-width: 1100px) {
  html body .ayedu-term-wrapper .ayedu-term-main {
    display: grid; grid-template-columns: minmax(0, var(--gt-measure)) var(--gt-aside); justify-content: space-between;
    column-gap: 56px; align-items: start;
  }
  html body .ayedu-term-wrapper .ayedu-term-main > * { grid-column: 1; }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box {
    grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: calc(var(--ay-nav-offset) + 40px);
    margin: 44px 0 0; padding: 28px; background: var(--ay-wine); border: 0; color: var(--ay-white);
    box-shadow: var(--ay-shadow-card);
  }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box h3 { color: var(--ay-white); margin-bottom: 12px; }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box p { color: color-mix(in srgb, var(--ay-white) 84%, transparent); font-size: 16.5px; line-height: 1.6; margin-bottom: 22px; }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box .ayedu-cta-actions { flex-direction: column; gap: 10px; }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box :is(.ayedu-btn-white, .ayedu-btn-trans) { width: 100%; }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box .ayedu-btn-white { background: var(--ay-page); border-color: var(--ay-page); color: var(--ay-wine); }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box .ayedu-btn-white:hover { background: var(--ay-blush); border-color: var(--ay-blush); color: var(--ay-wine); }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box .ayedu-btn-trans { color: var(--ay-white); border-color: color-mix(in srgb, var(--ay-white) 45%, transparent); }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box .ayedu-btn-trans:hover { background: var(--ay-wine-hover); border-color: var(--ay-white); color: var(--ay-white); }
  html body .ayedu-term-wrapper .ayedu-term-main > .ayedu-cta-box :is(a):focus-visible { outline-color: var(--ay-white); }
}

/* ---------- Tablets and phones: one centred column at the article measure ---------- */
@media (max-width: 1099px) {
  html body .ayedu-term-wrapper .ayedu-term-hero-container { max-width: var(--gt-measure); }
  html body .ayedu-term-wrapper .ayedu-term-main { max-width: calc(var(--gt-measure) + 2 * var(--gt-gutter)); }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  html body .ayedu-term-wrapper { --gt-gutter: 22px; padding-bottom: 64px; }
  html body .ayedu-term-wrapper .ayedu-term-hero { padding-top: 24px; }
  html body .ayedu-term-wrapper .ayedu-term-breadcrumbs { margin-bottom: 36px; font-size: 15px; }
  html body .ayedu-term-wrapper .ayedu-term-breadcrumbs a { min-height: 44px; }
  html body .ayedu-term-wrapper .ayedu-term-h1 { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.1; margin-bottom: 18px; }
  html body .ayedu-term-wrapper .ayedu-term-desc { font-size: 18.5px; line-height: 1.6; }
  html body .ayedu-term-wrapper .ayedu-card-section { margin-top: 40px; }
  html body .ayedu-term-wrapper .ayedu-sec-h2 { font-size: 25px; line-height: 1.2; }
  html body .ayedu-term-wrapper .ayedu-sec-p { font-size: 18px; line-height: 1.75; }
  html body .ayedu-term-wrapper .ayedu-blog-grid { gap: 10px; }
  html body .ayedu-term-wrapper .ayedu-blog-card { flex-direction: row; align-items: center; min-height: 64px; padding: 16px 18px; }
  html body .ayedu-term-wrapper .ayedu-faq-q { font-size: 17px; padding: 16px 0; }
  html body .ayedu-term-wrapper .ayedu-faq-a { padding-right: 0; font-size: 17px; }
  html body .ayedu-term-wrapper .ayedu-cta-box { padding: 24px 22px; }
  html body .ayedu-term-wrapper .ayedu-cta-box h3 { font-size: 24px; }
  html body .ayedu-term-wrapper .ayedu-cta-actions { flex-direction: column; }
  html body .ayedu-term-wrapper :is(.ayedu-btn-white, .ayedu-btn-trans) { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ayedu-term-wrapper *, html body .ayedu-term-wrapper *::after { transition: none !important; }
}

/* Secondary pages (audiences, demo, contact, trust, legal, about, downloads, search, 404): page-level classes used by build/site/page-*.mjs. */
.e-con.ay-ratio-4-3{aspect-ratio:4/3}
.e-con.ay-ratio-1-1{aspect-ratio:1/1}
.e-con.ay-ratio-4-3 .elementor-widget-image,.e-con.ay-ratio-1-1 .elementor-widget-image,.ay-cover .elementor-widget-container{height:100%}
.e-con.ay-ratio-4-3 .ay-cover img,.e-con.ay-ratio-1-1 .ay-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.e-con.ay-ratio-4-3,.e-con.ay-ratio-1-1{position:relative}
.ay-shot--top img{object-position:top center}
.ay-rule{align-self:flex-start}
/* Placeholder photo slot (mockup image-slot): stone box with caption until the client drops the photo in. */
.ay-slot .ay-slot__caption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}
.ay-slot .ay-cover img[src=""],.ay-slot .ay-cover img:not([src]){display:none}
.ay-slot:has(.ay-cover img[src]:not([src=""])) .ay-slot__caption{display:none}
.ay-quote blockquote{margin:0;padding:0;border:0}
/* Common questions band accordion (seo_show.html): 15.5/700 titles, chevron, hairline rows, no counters. */
.ay-faq-seo .e-n-accordion-item{border-top:1px solid var(--ay-line)}
.ay-faq-seo .e-n-accordion-item-title{padding:17px 0;min-height:44px;gap:16px;cursor:pointer;background:none;border:0}
.ay-faq-seo .e-n-accordion-item-title-text{font:700 16.5px/1.5 var(--ay-sans);color:var(--ay-ink);transition:color .2s ease}
.ay-faq-seo .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:var(--ay-link-hover)}
.ay-faq-seo .e-n-accordion-item-title-icon{color:var(--ay-link);flex:none}
.ay-faq-seo .e-n-accordion-item-title-icon svg{width:14px;height:14px;fill:currentColor;transition:transform .2s ease}
.ay-faq-seo .e-n-accordion-item-title-icon .e-opened{display:none}.ay-faq-seo .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened{display:inline-flex}.ay-faq-seo .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-closed{display:none}
.ay-faq-seo .e-n-accordion-item>.e-con{padding:0 0 20px}
/* Legal: nested tabs as the mockup's sticky left switcher + document. */
.ay-legal .e-n-tabs-heading{gap:4px;flex:none}
@media (min-width:1025px){.ay-legal .e-n-tabs-heading{position:sticky;top:110px;align-self:flex-start;width:240px}}
.ay-legal .e-n-tab-title{text-align:left!important;justify-content:flex-start!important;--n-tabs-title-justify-content:flex-start;min-height:44px;padding:12px 13px;border-radius:10px;border:0;background:transparent;font:400 15.5px/1.4 var(--ay-sans);color:var(--ay-ink-body);transition:background .2s ease,color .2s ease;cursor:pointer}
.ay-legal .e-n-tab-title:hover{background:var(--ay-highlight);color:var(--ay-ink)}
.ay-legal .e-n-tab-title[aria-selected="true"]{background:var(--ay-blush)!important;color:var(--ay-wine)!important;font-weight:700}
.ay-legal .e-n-tab-title .e-n-tab-title-text{font:inherit;color:inherit!important}
.ay-legal .e-n-tabs{gap:56px}
@media (max-width:1024px){.ay-legal .e-n-tabs{gap:24px}}
.ay-legal .e-n-tabs-content{background:none;border:0;padding:0}
.ay-legal .e-n-tabs-content>.e-con{padding:0}
@media (max-width:1024px){.ay-legal .e-n-tabs-heading{flex-wrap:wrap;width:100%;margin-bottom:20px}}
/* Routed forms (demo, contact): radio group styled as pills, note under the button, sent state. */
.ay-form--chips .elementor-field-type-radio>.elementor-field-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ay-form--chips .elementor-field-group.elementor-field-type-radio .elementor-field-subgroup,.ay-form--chips .elementor-field-type-radio .elementor-subgroup-inline{display:flex!important;flex-wrap:wrap;gap:8px;margin:-10px 0 8px;padding:0}
.ay-form--chips .elementor-field-type-radio .elementor-field-option{position:relative;margin:0;display:inline-flex;width:auto;padding:0}
.ay-form--chips .elementor-field-type-radio .elementor-field-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ay-form--chips .elementor-field-type-radio .elementor-field-option label{display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--ay-field);background:#fff;color:var(--ay-ink);font:700 14px/1.2 var(--ay-sans);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;margin:0}
.ay-form--chips .elementor-field-type-radio .elementor-field-option:hover label{border-color:var(--ay-wine)}
.ay-form--chips .elementor-field-type-radio .elementor-field-option input:checked+label{background:var(--ay-blush-pill);border-color:var(--ay-wine);color:var(--ay-wine)}
.ay-form--chips .elementor-field-type-radio .elementor-field-option input:focus-visible+label{outline:2px solid var(--ay-magenta);outline-offset:2px}
.ay-form--chips .elementor-field-group.elementor-field-type-radio{margin-bottom:0}
.ay-form--chips .elementor-field-textual{padding:13px 15px;font-size:16px;min-height:48px}
.ay-form--chips textarea.elementor-field-textual{resize:vertical;min-height:96px}
.ay-form--chips .elementor-button{width:100%;min-height:52px;box-shadow:0 10px 26px rgba(64,0,32,.22)}
.ay-form--chips .elementor-message{margin-top:14px;font:400 15px/1.65 var(--ay-sans)}
.ay-form--chips .elementor-message-success{color:var(--ay-sage-text)}
.ay-form-note.is-sent{display:none}
.ay-form-kicker+.elementor-widget-form{margin-top:12px}

/* QA pass (company group): audiences, book a demo, contact, trust, legal, about, blog. Loads after widgets-pages.css. */

/* About: the founders' 1995 portrait in the 4:3 frame, anchored high so both faces stay in view. No warm filter. */
.ay-story-photo .ay-cover img{object-position:50% 24%;filter:none}

/* Book a demo: form spans both rows on desktop so the phone video sits under the header column. */
@media (min-width:768px){.ay-demo-grid>.ay-demo-form{grid-row:span 2}}
@media (min-width:1025px){.ay-demo-grid>.ay-demo-form{position:sticky;top:110px}}
.e-con.ay-demo-video{scroll-margin-top:110px;align-self:start}
@media (max-width:767px){.ay-demo-video{justify-self:center}}
.ay-demo-video .elementor-wrapper{background:var(--ay-device)}
.ay-demo-video video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ay-device)}
.ay-demo-video .elementor-custom-embed-play{width:68px;height:68px;border-radius:50%;background:var(--ay-wine);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(64,0,32,.3);transition:transform .2s ease}
.ay-demo-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play{transform:translate(-50%,-50%) scale(1.06)}
.ay-demo-video .elementor-custom-embed-play i,.ay-demo-video .elementor-custom-embed-play svg{font-size:24px;width:24px;height:24px;margin-left:4px;color:#fff;fill:#fff;text-shadow:none;filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.ay-demo-video .elementor-custom-embed-play{transition:none}}

/* Routed forms (demo + contact). Elementor's generated field/label typography out-ranks widgets-pages.css, so these carry the
   widget class too. Mockup: labels 13/600 with a 6px gap, fields 13px/15px padding (48px tall), chips 14/700 ink. */
.elementor-widget-form.ay-form--chips .elementor-field-group>label.elementor-field-label{margin:0;padding:0 0 6px;line-height:1.3}
.elementor-widget-form.ay-form--chips .elementor-field-group .elementor-field-textual{padding:13px 15px;line-height:1.25;min-height:48px}
.elementor-widget-form.ay-form--chips .elementor-field-group textarea.elementor-field-textual{min-height:0}
.elementor-widget-form.ay-form--chips .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label{font:700 14px/1.2 var(--ay-sans);color:var(--ay-ink);letter-spacing:0}
.elementor-widget-form.ay-form--chips .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input:checked+label{color:var(--ay-wine);background:var(--ay-blush);border-color:var(--ay-wine)}
.elementor-widget-form.ay-form--chips .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option:hover label{border-color:var(--ay-wine)}
.elementor-widget-form.ay-form--chips .elementor-field-group textarea.elementor-field-textual{min-height:88px}

/* Text-arrow links (Button widget): the inline-block anchor sat on a 28px body line box, adding ~6px above it. */
.sec-demo .elementor-widget-button.lux-link,.sec-blog-featured .elementor-widget-button.lux-link{display:flex}
.sec-contact .elementor-widget-form.ay-form--chips .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label{padding:11px 16px}
/* Elementor's inline radio options carry padding-inline-end:10px on top of our 8px gap; the mockup chips sit 8px apart. */
.elementor-widget-form.ay-form--chips .elementor-field-type-radio .elementor-subgroup-inline .elementor-field-option{padding:0;margin:0}
/* Contact detail rows: value links are Button widgets; the inline-block anchor sat on the 28px body line box. */
.sec-contact .elementor-widget-button.lux-link{display:flex}
.sec-contact .ay-detail .elementor-widget-heading{line-height:1}
.sec-contact .elementor-widget-form.ay-form--chips .elementor-field-group textarea.elementor-field-textual{min-height:124px}

/* Audience "app" frame: mockup img is width:100%; max-height:480px (natural height below that), not a fixed 480px box. */
.sec-aud-app .e-con .elementor-widget-image.ay-shot img{height:auto;max-height:480px;width:100%;object-fit:cover;object-position:top center}

/* Legal: the mockup's "Legal" label heads the left switcher column, level with the document title. Desktop: the document column rises 25px
   to the label's row. Phones: tabs stay tabs
   (no accordion), the four switches stack full width above the document, 4px apart, 56px above the title. */
@media (min-width:1025px){
  .ay-legal .e-n-tabs-content{margin-top:-25px}
}
@media (max-width:1024px){
  .elementor .elementor-widget-n-tabs.ay-legal.lux-rv2{--n-tabs-direction:column;--n-tabs-heading-width:100%;--n-tabs-gap:56px}
  .ay-legal>.e-n-tabs{gap:56px}
  .ay-legal .e-n-tabs-heading{flex-direction:column;flex-wrap:nowrap;width:100%;margin:0;gap:4px}
  .ay-legal .e-n-tabs-heading .e-n-tab-title{width:100%}
}

/* Blog featured image: mockup frame is aspect-ratio 16/10 with the photo covering it (fixed px heights drifted per width). */
.e-con.ay-ratio-16-10{aspect-ratio:16/10;position:relative}
.e-con.ay-ratio-16-10 .elementor-widget-image{position:absolute;inset:0}
.e-con.ay-ratio-16-10 .elementor-widget-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Single post hero: mockup frame is aspect-ratio 16/9, radius 18, photo covering (Pro featured-image widget otherwise kept
   the image's natural width). */
.e-con.ay-ratio-16-9{aspect-ratio:16/9;position:relative;background:var(--ay-stone)}
.e-con.ay-ratio-16-9 .elementor-widget-theme-post-featured-image{position:absolute;inset:0}
.e-con.ay-ratio-16-9 .elementor-widget-theme-post-featured-image img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* Posts without a featured image (most client articles carry their hero inside the body): no empty stone frame. */
.e-con.ay-post-hero:not(:has(img)){display:none}
/* Post breadcrumb: one line, the post title truncates with an ellipsis (mockup crumb "How to Choose a Wedding Venue for a…"). */
.e-con.ay-post-crumb{flex-wrap:nowrap;width:100%;max-width:100%;min-width:0}
.e-con.ay-post-crumb>.elementor-widget:last-child{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden}
.e-con.ay-post-crumb>.elementor-widget:last-child .elementor-heading-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-con.ay-post-crumb>.elementor-widget:not(:last-child){flex:none}

/* Category archive chips: current category shows the blog filter's active state (blush + magenta hairline). */
body.category-traditions-ceremonies .elementor .ay-arch-chip--traditions-ceremonies.elementor-widget-button .elementor-button,body.category-planning-timelines .elementor .ay-arch-chip--planning-timelines.elementor-widget-button .elementor-button,body.category-budget-venue .elementor .ay-arch-chip--budget-venue.elementor-widget-button .elementor-button,body.category-guests-decor .elementor .ay-arch-chip--guests-decor.elementor-widget-button .elementor-button,body.category-for-pros .elementor .ay-arch-chip--for-pros.elementor-widget-button .elementor-button{background-color:var(--ay-blush);border-color:var(--ay-wine)}
.ay-arch-chip .elementor-button:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px}

/* November 2026 articles: the short answer at the top, and the in-article signup button. The article link rules set color and underline with high specificity, so the button states its own with !important. */
.answer-block{margin:0 0 1.5em;padding:20px 22px;border-radius:14px;background:var(--ay-blush,#F5D9D8);color:var(--ay-ink-deep,#2a0b1a);font-size:1.0625rem;line-height:1.65}
.ay-article-cta{margin:1.75em 0}
a.ay-article-cta__btn,a.ay-article-cta__btn:visited{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 28px;border-radius:999px;background:#400020;color:#fff!important;font-weight:600;line-height:1.2;text-decoration:none!important;transition:background-color .15s ease}
a.ay-article-cta__btn:hover,a.ay-article-cta__btn:focus-visible{background:#5a0830;color:#fff!important}
a.ay-article-cta__btn:focus-visible{outline:2px solid #400020;outline-offset:2px}

/* QA pass, group "explore": traditions hub + guides, marketplace + vendor profiles, real weddings + wedding pages.
   Only fixes the Elementor settings cannot express. Values are the mockup's (reference/unpack/markup/*.html). */

/* ---- Heading widgets rendered as <span>: an inline span inside the widget div sits on the body's 1.72 line box,
   so a 11.5px chip grew to 40px and card rows gained ~10px. The mockup's spans use their own line height. ---- */
:is(.ay-vendor-card,.ay-wedding-card,.ay-trad-card,.sec-vp,.sec-vp-crumbs,.sec-trad-crumb,.sec-wed-crumb,.sec-wed-hero,.sec-wed-body,.sec-trad-body,.sec-trad-hero) .elementor-widget-heading>span.elementor-heading-title{display:block}

/* ---- Common questions band (seo_show.html): one 1px hairline on top of each row, the question fills the row and the
   magenta chevron sits at the far right; no frame, no fill, no grid lines, no focus fill. ---- */
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item{border:0;border-top:1px solid var(--ay-line);border-radius:0;background:none;margin:0}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item>.e-con{border:0;background:none;border-radius:0}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:44px;padding:17px 0;border:0;border-radius:0;background:none;box-shadow:none;outline:0}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px;border-radius:4px}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-header{flex:1 1 auto;min-width:0}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-text{font:700 16.5px/1.5 var(--ay-sans);color:var(--ay-ink);text-wrap:wrap;margin:0;transition:color .2s ease}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:var(--ay-link-hover)}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-icon{flex:none;margin-left:auto;color:var(--ay-link)}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-icon :is(i,span){color:var(--ay-link);font-size:14px}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-icon svg{width:13px;height:13px;fill:var(--ay-link)}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item>.e-con{padding:0 0 20px}

/* ---- Hub card: blurb 8px under the title, "Read the guide" pinned to the card foot so every card lines up. ---- */
.ay-trad-grid .e-loop-item,.ay-trad-grid .e-loop-item>.ay-trad-card{height:100%}
.ay-trad-card .ay-trad-card-body{flex:1 1 auto}
.ay-trad-card .ay-trad-card-more{margin-top:auto}

/* ---- Blush "Browsing is the easy part." band and the maroon app band: copy left, action right (mockup rows). ---- */
.ay-promo.e-con,.ay-app-prompt.e-con{flex-wrap:nowrap}
.ay-promo .ay-promo__text{--width:auto;flex:1 1 auto;min-width:0}
.ay-app-prompt.e-con>.ay-app-prompt__text.e-con{--width:auto;width:auto;flex:0 1 526px;max-width:526px;min-width:0}
.ay-app-prompt .ay-app-prompt__badges{--width:auto;flex:none}
@media (max-width:767px){
  .ay-promo.e-con,.ay-app-prompt.e-con{flex-wrap:wrap}
  .ay-promo .ay-promo__text,.ay-app-prompt.e-con>.ay-app-prompt__text.e-con{flex:1 1 100%;max-width:none}
}

/* ---- Real wedding detail page ---- */
.ay-wed-hero-frame.e-con{aspect-ratio:4/3}
.ay-wed-hero-img,.ay-wed-hero-img .elementor-widget-container{height:100%}
.ay-wed-hero-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ay-wed-stats .ay-wed-stat{height:100%}
.ay-wed-quote blockquote{margin:0;padding:0;border:0;quotes:none}
.ay-wed-quote blockquote p{margin:0}
.ay-wed-budget-table>.e-con:last-child{border-bottom:0}
@media (max-width:1024px){.ay-wed-split__head .elementor-widget-heading h2{max-width:none}}

/* ---- Sticky answer column: Elementor's `.e-con{position:relative}` out-ranks `.ay-seo-sticky`, so the column was
   relative with top:110px, i.e. pushed 110px down the band instead of sticking. Desktop sticky, stacked below. ---- */
@media (min-width:1025px){.e-con.ay-seo-sticky,.sec-seo .e-con.ay-sticky{position:sticky;top:110px}}
@media (max-width:1024px){.e-con.ay-seo-sticky,.sec-seo .e-con.ay-sticky{position:relative;top:auto}}

/* ---- Hero intro (Post Excerpt has no colour control in this Pro version; the kit's ink showed instead of ink68). ---- */
:is(.ay-trad-intro,.ay-wed-intro),:is(.ay-trad-intro,.ay-wed-intro) :is(p,.elementor-widget-container){color:var(--ay-ink-body)}

/* ---- Vendor inquiry: the mockup's "Request a quote" carries the magenta-tinted lift shadow. ---- */
.ay-form--inquiry .elementor-button{box-shadow:0 10px 26px rgba(64,0,32,.22)}
/* Chevron colour: Elementor paints the icon from its own variables, which out-rank a plain colour rule. */
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion{--n-accordion-icon-normal-color:var(--ay-link);--n-accordion-icon-hover-color:var(--ay-link);--n-accordion-icon-active-color:var(--ay-link);--n-accordion-icon-size:13px}
:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-icon svg,:is(.ay-faq-seo,.ay-seo-faq).elementor-widget-n-accordion .e-n-accordion-item-title-icon span>svg{fill:var(--ay-link)!important;color:var(--ay-link)}

/* ---- Marketplace filter chips + empty-state button: the kit styles bare `button` (1px magenta border, maroon fill on
   hover and focus), which filled chips on hover/keyboard focus. Mockup: 1.5px outline chip, magenta when pressed. ---- */
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip,
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip:is(:hover,:focus,:focus-visible,:active){background:transparent;color:var(--ay-ink);border:1.5px solid var(--ay-field);box-shadow:none;text-decoration:none}
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip:hover{border-color:var(--ay-wine)}
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip[aria-pressed="true"],
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip[aria-pressed="true"]:is(:hover,:focus,:focus-visible,:active){background:var(--ay-wine);color:#fff;border-color:var(--ay-wine)}
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip:focus{outline:0}
.ay-vfilter .ay-vfilter__chips button.ay-vfilter__chip:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-vfilter .ay-vfilter__empty button.ay-btn,
.ay-vfilter .ay-vfilter__empty button.ay-btn:is(:hover,:focus,:focus-visible){background:var(--ay-wine-hover);color:#fff;border:0;box-shadow:0 10px 26px rgba(64,0,32,.22)}
.ay-vfilter .ay-vfilter__empty button.ay-btn:focus{outline:0}
.ay-vfilter .ay-vfilter__empty button.ay-btn:active{background:var(--ay-wine-pressed);color:#fff;border:0}
.ay-vfilter .ay-vfilter__empty button.ay-btn:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}

/* App band heading: the kit balances h2 lines; the mockup wraps naturally inside its 52ch column. */
.ay-app-prompt .elementor-heading-title{text-wrap:wrap}

/* ---- Vendor inquiry result. Elementor's message icon uses the eicons font (not loaded here) and rendered a tofu box.
   Success follows the mockup's sent state: the fields give way to a sage check, "Inquiry sent" line and reply note. ---- */
.ay-form--inquiry .elementor-message::before{content:none;display:none}
.ay-form--inquiry .elementor-message{margin-top:14px;font:400 15.5px/1.6 var(--ay-sans)}
.ay-form--inquiry .elementor-message-danger{color:#B3261E}
.ay-form--inquiry form:has(.elementor-message-success) .elementor-form-fields-wrapper{display:none}
.ay-form--inquiry .elementor-message-success{margin:0;padding:26px 0 10px;text-align:center;color:var(--ay-ink-body);font:400 15.5px/1.7 var(--ay-sans)}
.ay-form--inquiry .elementor-message.elementor-message-success::before{content:"✓";display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--ay-sage-soft,var(--ay-sage-bg));color:var(--ay-sage-text);font:400 22px/1 var(--ay-sans)}

/* ---- Vendor profile portfolio tiles (ayedu-vendor-meta-list, "Gallery photo" layout): fill the square like the hero. ---- */
.e-con.ay-ratio-1-1>.elementor-widget-ayedu-vendor-meta-list{width:100%;height:100%}
.e-con.ay-ratio-1-1>.elementor-widget-ayedu-vendor-meta-list .ay-metalist-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Hero photo fills the 4:3 frame whatever its own ratio (3:2 and 16:9 photos left a stone strip under them). */
.ay-wed-hero-frame.e-con{position:relative}
.ay-wed-hero-frame>.ay-wed-hero-img{position:absolute;inset:0}
/* Budget rows: the label wraps, the share + amount never do. */
.sec-wed-budget .ay-wed-budget-table .elementor-widget-heading:first-child{min-width:0;flex:1 1 auto}
.sec-wed-budget .ay-wed-budget-fig.e-con{--width:auto;width:auto;flex:none}
.sec-wed-budget .ay-wed-budget-fig.e-con>.elementor-widget{flex:none;min-width:0}
.e-con.ay-wed-hero-frame>.ay-wed-hero-img.elementor-widget img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 45%}
.sec-wed-budget .ay-wed-budget-fig .elementor-heading-title{font-variant-numeric:tabular-nums}
/* Vendor gallery on phones: the mockup's 820px rule collapses the grid to one column (hero, then each portfolio tile). */
@media (max-width:767px){.ay-vp-gallery.e-con>.e-con:first-child{grid-column:auto;grid-row:auto}}

/* QA pass, group "home": homepage + global header, footer, phone menu and signup popup.
   :is(body.home,.ay-homekit): the same fixes on bands that moved off the homepage (2026-10-30: /pricing/, the video block
   on /traditions/), which carry the ay-homekit class. :is() keeps body.home's specificity.
   Values are the v5 mockup's inline styles (reference/unpack/markup/isHome.html, menuOpen.html, showSignup.html). */

/* Our story: the founders' 1995 film scan; faces sit in the upper third, keep both headpieces in the 4:5 frame. */
.ay-story-photo img{object-position:50% 30%}

/* Inside the app tabs. Elementor's `.elementor-widget-n-tabs .e-n-tab-title[aria-selected=false]` paints
   --n-tabs-title-background-color (grey) and loads after us at the same specificity; the kit paints bare
   button:hover/:focus maroon. Mockup: transparent pill, 1.5px rgba(28,31,34,.22) border, magenta when selected. */
.ay-tabs.ay-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected]{background:transparent;color:var(--ay-ink);border:1.5px solid var(--ay-field);border-radius:999px;padding:13px 26px;box-shadow:none;outline:0}
.ay-tabs.ay-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="false"]:hover{background:transparent;color:var(--ay-ink);border-color:var(--ay-wine)}
.ay-tabs.ay-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"],
.ay-tabs.ay-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]:hover{background:var(--ay-wine);color:#fff;border-color:var(--ay-wine)}
.ay-tabs.ay-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected]:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-tabs.ay-tabs .e-n-tab-title .e-n-tab-title-text{color:inherit}
/* The panel grid carries the mockup's 48px (margin-top:48px); no extra offset on the content wrapper. */
.ay-tabs.ay-tabs.ay-tabs .e-n-tabs-content{margin-top:0}

/* Budget calculator sliders: the kit styles every <input> (white field, border, padding), which turned the
   6px track into a white box. Mockup .lux-range: 6px track rgba(28,31,34,.12), 20px magenta thumb. */
.ay-calc .ay-calc__field input[type=range].lux-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;min-height:0;padding:0;margin:2px 0;border:0;border-radius:999px;background:var(--ay-chart-4);box-shadow:none;outline:0;cursor:pointer}
.ay-calc .ay-calc__field input[type=range].lux-range:focus{border:0;box-shadow:none;background:var(--ay-chart-4)}
.ay-calc .ay-calc__field input[type=range].lux-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ay-magenta)}
.ay-calc .ay-calc__field input[type=range].lux-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ay-magenta)}

/* Comparison table: Hello's reset zebra-stripes odd rows (`table tbody>tr:nth-child(odd)>td`), and its
   :hover tint; the mockup rows are plain white with a 1px rgba(28,31,34,.06) hairline. */
.ay-cmp-wrap table.ay-cmp tbody>tr:nth-child(odd)>td,.ay-cmp-wrap table.ay-cmp tbody>tr:nth-child(odd)>th,
.ay-cmp-wrap table.ay-cmp tbody>tr>td,.ay-cmp-wrap table.ay-cmp tbody>tr>th,
.ay-cmp-wrap table.ay-cmp tbody>tr:hover>td,.ay-cmp-wrap table.ay-cmp tbody>tr:hover>th{background:transparent}
.ay-cmp-wrap table.ay-cmp tbody>tr>td.ay-cmp__a,.ay-cmp-wrap table.ay-cmp tbody>tr:nth-child(odd)>td.ay-cmp__a,.ay-cmp-wrap table.ay-cmp tbody>tr:hover>td.ay-cmp__a{background:var(--ay-sage-soft)}
.ay-cmp-wrap table.ay-cmp{margin:0}

/* Inline heading titles (tag span/p rendered inline or inline-flex) sat on the parent's 28px body line box,
   adding 8-16px under every eyebrow, city name and label. Make them block-level boxes. */
:is(body.home,.ay-homekit) .elementor-widget-heading>.elementor-heading-title,
.elementor-location-header .elementor-widget-heading>.elementor-heading-title,
.elementor-location-footer .elementor-widget-heading>.elementor-heading-title,
.ay-popup .elementor-widget-heading>.elementor-heading-title{display:block}
:is(body.home,.ay-homekit) .ay-eyebrow>.elementor-heading-title,
.ay-popup .ay-eyebrow>.elementor-heading-title{display:flex;width:fit-content}

/* Budget calculator card: the mockup's rows and footnote use line-height normal, not the body 1.72. */
.ay-calc .ay-calc__row-head,.ay-calc .ay-calc__foot{line-height:normal}
.ay-calc .ay-calc__row-head span{line-height:normal}

/* Comparison table: mockup columns are 1.5fr + 3 x 1fr (the label column is a third of the table). */
.ay-cmp-wrap .ay-cmp thead th.ay-cmp__blank{width:33.333%}

/* Pricing: the MOST POPULAR badge straddles the card's top border (top:-14px; left:34px). */
:is(body.home,.ay-homekit) .ay-most-popular{top:-14px;left:34px}

/* Testimonials: role line uses line-height normal in the mockup. */
body.home .sec-testimonials .elementor-widget-text-editor p{margin:0}
/* The mockup's eyebrow is an inline-flex span on a 21px line box (text 7px from the top): keep that rhythm. */
:is(body.home,.ay-homekit) .ay-eyebrow:not(.ay-eyebrow--line)>.elementor-heading-title{padding:7px 0 2px}

/* Calculator: labels and chips use line-height normal in the mockup (20px / 37px boxes). */
.ay-calc .ay-calc__field-head,.ay-calc button.ay-calc__chip{line-height:normal}
/* Comparison header: AyeDu cell is 16 + 20 logo + 6 + 11 + 16 = 69px tall. */
.ay-cmp-wrap .ay-cmp thead th.ay-cmp__a{line-height:1}
/* Check lists (audience cards): 14.5px on line-height normal, 8px apart. */
:is(body.home,.ay-homekit) .ay-checks .elementor-icon-list-text{line-height:normal}
/* One-off paragraphs the mockup sets on line-height normal. */
.ay-lh-normal p,.ay-lh-normal .elementor-heading-title{line-height:normal}
/* FAQ rows: the mockup's + glyph is 26px tall, so each closed row is 26 + 26 + 26 + 1 = 79px. */
:is(body.home,.ay-homekit) .ay-faq .e-n-accordion-item-title-icon{height:26px}
/* Our story: the photo fills its column; the sage block sits 22px right/below it (inset:22px -22px -22px 22px). */
.e-con.ay-photo-offset--out::after{inset:22px -22px -22px 22px}
@media (max-width:767px){.e-con.ay-photo-offset--out{margin-right:18px}.e-con.ay-photo-offset--out::after{inset:18px -18px -18px 18px}}
/* Closing CTA glow: Elementor reserves .e-con::before for background overlays (content from a variable),
   which blanked the mockup's magenta bloom. Re-assert it with higher specificity. */
.e-con.ay-glow.ay-glow::before{content:"";display:block;position:absolute;bottom:-120px;left:12%;top:auto;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(240,220,215,.9),rgba(240,220,215,0) 70%);opacity:1;pointer-events:none;z-index:0}
.e-con.ay-glow>.elementor-element{position:relative;z-index:1}
/* Audience card titles are plain wrapped text in the mockup (the theme balances h3). */
:is(body.home,.ay-homekit) .sec-audiences h3.elementor-heading-title{text-wrap:wrap}
/* Elementor's own hover rule (:has()/data-touch-mode chain) paints --n-tabs-title-background-color-hover
   (the kit accent, magenta) on an unselected pill; the mockup only turns the border magenta on hover. */
.elementor .ay-tabs.ay-tabs.ay-tabs{--n-tabs-title-background-color:transparent;--n-tabs-title-background-color-hover:transparent;--n-tabs-title-color-hover:var(--ay-ink);--n-tabs-title-background-color-active:var(--ay-wine);--n-tabs-title-color-active:#fff}
/* "Save this budget free": the mockup's magenta-tinted lift shadow (0 10px 26px rgba(64,0,32,.22)). */
.ay-calc a.ay-btn.ay-btn--primary{box-shadow:0 10px 26px rgba(64,0,32,.22)}
.ay-calc a.ay-btn.ay-btn--primary:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
/* Tradition chips: unselected border rgba(28,31,34,.16), per the mockup. */
.ay-calc button.ay-calc__chip:not(.is-active){border-color:var(--ay-field)}
.ay-calc button.ay-calc__chip:not(.is-active):hover{border-color:var(--ay-sage)}
.ay-calc button.ay-calc__chip:focus{outline:0}
.ay-calc button.ay-calc__chip:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px}

/* Header: Explore dropdown as the mockup's card (white, 1px hairline, radius 14, padding 10, 200px min,
   two-layer shadow, 16px below the label, 20px left of it). The <ul> itself was transparent, so the
   header's maroon rule showed through it. */
.ay-nav-desktop .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu{background:#fff;border:1px solid var(--ay-line);border-radius:14px;padding:10px;min-width:200px;width:auto;margin-left:-20px!important;box-shadow:0 2px 6px rgba(28,31,34,.06),0 22px 50px rgba(28,31,34,.16);z-index:200}
.ay-nav-desktop .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li+li{margin-top:2px}
.ay-nav-desktop .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item{padding:11px 14px;border-radius:9px;background:none;color:var(--ay-ink-body);border:0;transition:background .2s ease}
.ay-nav-desktop .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:hover,
.ay-nav-desktop .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-sub-item:focus-visible{background:var(--ay-highlight);color:var(--ay-ink-body)}
.ay-nav-desktop .elementor-nav-menu--main a.has-submenu .sub-arrow{transition:transform .25s ease}
.ay-nav-desktop .elementor-nav-menu--main a.has-submenu.highlighted .sub-arrow{transform:rotate(180deg)}

/* Signup popup on phones: the mockup keeps a 24px gutter around the 20px-radius card. */
@media (max-width:767px){.elementor-popup-modal.ay-popup .dialog-widget-content{max-width:calc(100vw - 48px)}.elementor-popup-modal.ay-popup .dialog-message{max-width:100%}}
.elementor-popup-modal.ay-popup .dialog-close-button{color:var(--ay-ink-quiet)}
.elementor-popup-modal.ay-popup .dialog-close-button:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px;border-radius:6px}

/* Phone menu: a full-width sheet under the header bar. The right-hand cluster container was the
   positioning context, so the sheet was only as wide as the CTA + burger (212px). */
@media (max-width:1024px){.lux-nav .e-con:has(> .elementor-widget-nav-menu.ay-nav-mobile):not(.lux-nav),.lux-nav .e-con:has(.ay-nav-mobile):not(.lux-nav){position:static}}
.ay-nav .ay-nav-mobile .elementor-nav-menu--dropdown.elementor-nav-menu__container{border-left:0;border-right:0}

/* Phone header (chosen: CTA stays on one line, mockup's 20/22 padding and 30px mark, 44px tap targets):
   the mockup's bar is ~110px only because its CTA wraps to two lines; here it is 86px. */
@media (max-width:767px){.ay-nav-cta .elementor-button{min-height:44px;display:inline-flex;align-items:center}.ay-nav-mobile .elementor-menu-toggle{min-width:44px;min-height:44px;box-sizing:border-box}}
/* Header search (copy deck: search icon in the header): same ink .75 as the nav items, 44px target. */
.ay-nav-search .elementor-icon{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* QA phone: the mockup's phone rules (<=820px) only narrow side padding, collapse grids and override a few
   specific paddings; every other vertical margin/padding/gap stays at its desktop value. These rules undo
   the shared stylesheet's phone-only shrinking so the 390px rhythm matches the mockup. Phone only. */
@media (max-width:767px){
  /* Hero phone demo: mockup keeps the 354px device, desktop float-card offsets and glow; the 680px min-height becomes auto */
  /* 32px under the "Your wedding, organized in one place" heading: the phone floats up to 12px, and at 0 it covered the heading (2026-09-24) */
  .elementor-widget-ayedu-phone-demo .ay-phone-wrap{min-height:0;margin-top:32px;padding-bottom:0}
  .elementor-widget-ayedu-phone-demo .ay-phone{width:354px;flex:none}
  .elementor-widget-ayedu-phone-demo .ay-phone-glow{width:620px;height:620px}
  .elementor-widget-ayedu-phone-demo .ay-float-card--l{bottom:96px;left:-2px}
  .elementor-widget-ayedu-phone-demo .ay-float-card--r{top:150px;right:-4px;max-width:none}
  /* Budget calculator: grid gap 64 and card padding 38/38/32 stay on phones */
  .elementor-widget-ayedu-budget-calculator .ay-calc{gap:64px}
  .elementor-widget-ayedu-budget-calculator .ay-calc__card{padding:38px 38px 32px}
  /* Homepage FAQ: rows keep 26px padding and the answer keeps 0 40 26 42 */
  .elementor-widget-n-accordion.ay-faq .e-n-accordion-item-title{padding:26px 0;gap:24px}
  .elementor-widget-n-accordion.ay-faq .e-n-accordion-item>.e-con{padding:0 40px 26px 42px}
  .elementor-widget-n-accordion.ay-faq .e-n-accordion-item-title-header{flex:0 1 calc(100% - 39px);max-width:calc(100% - 39px)}
  /* Inside-the-app tabs: panel keeps its desktop 38px offset under the tab row */
  .ay-tabs.ay-tabs.ay-tabs .e-n-tabs-content{margin-top:38px}
  /* Comparison table: rows keep 19px 26px / 19px 20px (the table scrolls sideways at min-width 560, as in the mockup) */
  .ay-cmp-wrap .ay-cmp tbody th{padding:19px 26px}
  .ay-cmp-wrap .ay-cmp tbody td{padding:19px 20px}
  /* Search: result cards keep 22px 24px padding and the 22px serif title */
  .ay-search .ay-search__hit{padding:22px 24px}
  .ay-search .ay-search__title{font-size:22px}
  .ay-search .ay-search__empty{padding:40px}
  /* Vendor profile gallery: in the mockup the one-column phone grid leaves the 2x2 hero tile plus one square
     (the second portfolio square collapses to zero width), so phones show two tiles */
  /* (only when the second square has a photo: a vendor with one photo of their own keeps it) */
  .e-con.ay-vp-gallery>.e-con:nth-child(2):has(~.e-con img),.e-con.ay-vp-gallery>.e-con-inner>.e-con:nth-child(2):has(~.e-con img){display:none}
  /* Tool detail hero: in the mockup a tool without its own screenshot shows a 4:3 slot under the browser bar and a
     tool with one shows it at its natural height (max 520). So wide screenshots get at least a 4:3 box (frame is
     the full column: viewport minus 2x22 side padding and the 1px borders); tall ones keep their own height. */
  .ay-tool-shot img{min-height:calc((100vw - 46px) * .75);object-fit:cover;object-position:top center}
}

/* QA sign-in: "Log in" entry points for returning users (header, phone menu, footer, signup popup). */

/* Header "Log in": Elementor gives nav items the hover color on :focus too, so after a mouse click the link
   stayed magenta once the pointer left. Mouse focus returns to the resting ink; keyboard focus keeps the
   magenta text plus the kit's visible focus ring. */
.ay-nav .elementor-element.ay-nav-login .elementor-nav-menu--main .elementor-item:focus:not(:focus-visible):not(:hover){color:var(--ay-ink-body);fill:rgba(28,31,34,.75)}

/* Signup popup: "Already have an account? Log in". The link carries the action, so it gets weight. */
.ay-popup-login a{font-weight:600}

/* Signup popup, the line under the button: "Next: create your password. Free to start for couples. No credit card
   required." On a phone the three sentences run on and wrap evenly over two lines. From 420px the window is wide
   enough for the last two to share a line, so the first takes its own: two lines, each ending where a sentence does. */
.ay-popup-next p{text-wrap:balance}
@media (min-width:420px){.ay-popup-next__step{display:block}}
/* The confirmation ("One more step. Opening AyeDu…") sits between a full-width button and that centred line: centred too.
   Refusals stay left-aligned, they can run to several lines. */
.ay-form--signup .elementor-message-success{text-align:center}

/* QA pass, tools group (tools, tool detail, seating chart, free downloads, search, 404, search results).
   Only what a widget setting cannot express. Every rule is scoped to a class these pages own. */

/* Tool card: the mockup pins the link label to the bottom of the card (`margin-top:auto`), so every label in a row
   shares one baseline even when a one-line blurb sits next to a two-line one. Elementor drops `auto` from the widget's
   margin control, which left "See it live →" 25px above its neighbors. */
.ay-tool-card>.ay-tool-card__state{margin-top:auto!important}
.ay-tool-card .ay-tool-card__desc{flex:0 0 auto}
/* The whole card is the link: no underline or color shift from the kit's `a` rules, and a visible keyboard ring. */
a.ay-tool-card,a.ay-tool-card:hover,a.ay-tool-card:focus{text-decoration:none;color:inherit}
a.ay-tool-card:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}

/* Tool detail status pill ("In the app today"): the title is an inline span on the body's 28px line box, which made the
   pill 44px tall. The mockup's pill is 11.5px caps on a ~16px line + 8px padding = 32px. */
.ay-tool-status .elementor-heading-title{display:block;line-height:16px}

/* Common questions accordion: keyboard focus is the brand's magenta ring (the browser default was a black outline). */
/* 0,4,0: Hello's reset.css (`[tabindex]:not([tabindex="-1"]):focus-visible`, 0,3,0) loads after this file and drew a black ring. */
.ay-questions .e-n-accordion-item .e-n-accordion-item-title:focus{outline:0}
.ay-questions .e-n-accordion-item .e-n-accordion-item-title:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px;border-radius:4px;box-shadow:none}

/* 404 tiles are whole-card links: no underline or color shift from the kit's `a` rules, magenta focus ring. */
a.ay-404-tile,a.ay-404-tile:hover,a.ay-404-tile:focus{text-decoration:none;color:inherit}
a.ay-404-tile:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}

/* Client redline review, 2026-09-22 (Tools + Resources). Auto-enqueued by class-widgets.php (assets/css/widgets-*.css).
   Only layout the native widgets cannot express: the tool card's stretched link, the two tool tiers on /tools/, and the
   resource library's category groups. Colors and type come from the site's own custom properties. */

/* ---- Tool card (loop-tool): the title link covers the card, so the whole card stays one click target while the
   contextual guide link inside it remains a separate, real link. */
.e-loop-item .ay-tool-card--v2.e-con{position:relative}
.ay-tool-card--v2 .ay-tool-card__name,.ay-tool-card--v2 .ay-tool-card__name .elementor-widget-container{position:static}
.ay-tool-card--v2 .ay-tool-card__name a{color:inherit;text-decoration:none}
.ay-tool-card--v2 .ay-tool-card__name a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.ay-tool-card--v2 .ay-tool-card__name a:focus-visible{outline:0}
.ay-tool-card--v2:has(.ay-tool-card__name a:focus-visible){outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-tool-card--v2 .ay-tool-card__guide{position:relative;z-index:2;align-self:flex-start}
.ay-tool-card--v2 .ay-tool-card__guide a{color:inherit;text-decoration:none;transition:color .2s ease}
.ay-tool-card--v2 .ay-tool-card__guide a:hover{color:var(--ay-link-hover)}
.ay-tool-card--v2 .ay-tool-card__guide a:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px;border-radius:2px}

/* ---- /tools/ two tiers. "All" selected: the six acquisition cards show once, under "Start here"; the filter's grid
   hides its badged copies. A category chip selected: the "Start here" group and the second heading step aside, and
   the filtered grid shows every tool in that category, badges included. */
.sec-tools-all:not(:has(.e-filter-item[data-filter="__all"][aria-pressed="false"])) .ay-tool-grid--all .e-loop-item:has(.ay-tool-card__tier){display:none}
.sec-tools-all:has(.e-filter-item[data-filter="__all"][aria-pressed="false"]) .ay-tools-tier--start,
.sec-tools-all:has(.e-filter-item[data-filter="__all"][aria-pressed="false"]) .ay-tools-tier--app .ay-tools-tier__rule{display:none}
.sec-tools-all:has(.e-filter-item[data-filter="__all"][aria-pressed="false"]) .ay-tools-tier--app{margin-top:32px}
.ay-tool-grid--start .ay-tool-card__tier{display:none} /* the group heading already says it */

/* ---- /resources/ library grouped by category. Groups tile on a three-column grid and each spans as many columns as
   it holds cards, so a category with one file sits beside the next instead of stranding a lone card on its own row.
   A new file in an empty category (Design & vision) gets its heading and slots in without any layout change. */
.ay-dl .ay-dl__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 18px;margin-top:40px}
.ay-dl .ay-dl__group{min-width:0;display:flex;flex-direction:column}
.ay-dl .ay-dl__group--n1{grid-column:span 1}
.ay-dl .ay-dl__group--n2{grid-column:span 2}
.ay-dl .ay-dl__group--n3{grid-column:1/-1}
.ay-dl .ay-dl__group h3.ay-dl__cat,.elementor .ay-dl .ay-dl__group h3.ay-dl__cat{margin:0;padding-bottom:14px;border-bottom:1px solid var(--ay-line)}
.ay-dl .ay-dl__group .ay-dl__grid--group{margin-top:18px;flex:1}
.ay-dl .ay-dl__group--n1 .ay-dl__grid{grid-template-columns:minmax(0,1fr)}
.ay-dl .ay-dl__group--n2 .ay-dl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ay-dl .ay-dl__group--n3 .ay-dl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){
  .ay-dl .ay-dl__groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ay-dl .ay-dl__group--n2,.ay-dl .ay-dl__group--n3{grid-column:1/-1}
  .ay-dl .ay-dl__group--n3 .ay-dl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .ay-dl .ay-dl__groups{grid-template-columns:minmax(0,1fr);gap:40px}
  .ay-dl .ay-dl__group--n1,.ay-dl .ay-dl__group--n2,.ay-dl .ay-dl__group--n3{grid-column:auto}
  .ay-dl .ay-dl__group .ay-dl__grid{grid-template-columns:minmax(0,1fr)}
}

/* Client review, 2026-09-29 (UI/UX punch list + "check the opacity of the greys and the video").
   Auto-enqueued by class-widgets.php (assets/css/widgets-*.css). Colors and type come from the theme's custom properties. */

/* ---- Home video block. The overlay is set on the container in Elementor (a scrim behind the copy that clears by 78%,
   so the footage keeps its own colors). On phones the copy runs the full width of the card, so the scrim is even. */
@media (max-width:767px){
  .elementor .ay-mc-video.e-con.e-con::before,.elementor .ay-mc-video.e-con.e-con>.elementor-background-video-container::before{background-image:linear-gradient(180deg,rgba(24,6,14,.74),rgba(24,6,14,.62))}
}

/* ---- Phone demo. It is a picture of the app at the app's own scale, so it keeps the type size it was drawn at
   while the page's reading text grows around it. */
.ay-phone-wrap,.ay-phone,.ay-float-card{font-size:16.5px;line-height:1.72em}

/* ---- App store badges (punch list item 3; Reva 2026-09-30: one look everywhere). The stores' own convention: a black
   tile, white text, the store's mark, 56px tall and the same width for both. The lead-in line is 12px inside the tile
   (the stores draw it at that proportion); the store name is 17px. On the black tile the Google Play mark keeps its
   own colors, as on Google's badge. */
a.ay-appbadge{text-decoration:none;box-sizing:border-box}
a.ay-appbadge:hover{color:inherit}
.ay-appbadge .ay-badge-text p{line-height:1.15;white-space:nowrap}
.ay-appbadge .ay-badge-small{font-size:12px;letter-spacing:.02em;color:rgba(255,255,255,.84)}
.ay-appbadge .ay-badge-big{font-size:17px;font-weight:700;letter-spacing:-.005em;color:#fff}
.ay-appbadge .elementor-icon{display:flex}
.ay-appbadge--google .elementor-icon svg{display:none}
.ay-appbadge--google .elementor-icon::before{content:"";display:block;width:24px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cpath fill='%2300D7FE' d='M1 1.2v23.6c0 .5.3.9.7 1.1L14 13 1.7.1C1.3.3 1 .7 1 1.2z'/%3E%3Cpath fill='%2300F076' d='M17.8 9.2 4 1.1 1.7.1 14 13z'/%3E%3Cpath fill='%23FF3A44' d='M14 13 1.7 25.9 4 24.9l13.8-8.1z'/%3E%3Cpath fill='%23FFD500' d='m17.8 9.2-3.8 3.8 3.8 3.8 4.4-2.6c1.1-.6 1.1-1.7 0-2.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.lux-badge-lift.ay-appbadge:hover{border-color:rgba(255,255,255,.6)!important;box-shadow:0 12px 28px rgba(0,0,0,.25)}
a.ay-appbadge:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-footer a.ay-appbadge:focus-visible{outline-color:#fff}
@media (max-width:767px){.ay-footer-badges{flex-wrap:wrap}}
@media (max-width:767px){.ay-footer-grid>.ay-footer-brand{margin-bottom:24px}}

/* ---- Balanced Bridge palette (client brand page, 2026-09-29). Primary buttons are the wine to wine-light gradient;
   Pro form submit buttons take it here because the kit's button style only holds a flat color. Links are wine at rest
   and step to the deep-magenta hover shade (palette 2026-10-16: bright magenta is no longer a text colour). */
.elementor-widget-form .elementor-button[type="submit"],.elementor-widget-form .elementor-button[type="submit"]:hover,.elementor-widget-form .elementor-button[type="submit"]:focus{background-image:none;background-color:var(--ay-wine)}
.elementor-widget-form .elementor-button[type="submit"]:hover,.elementor-widget-form .elementor-button[type="submit"]:focus{background-color:var(--ay-wine-hover)}
.elementor-widget-form .elementor-button[type="submit"]:active{background-color:var(--ay-wine-pressed)}
.ay-btn--primary:hover,.ay-btn--primary:focus{background:var(--ay-wine-hover);color:#fff}
.ay-btn--primary:active{background:var(--ay-wine-pressed);color:#fff}
a.ay-appbadge:hover{color:inherit}
.ay-appbadge--dark.lux-badge-lift:hover{border-color:var(--ay-ink-deep)!important}

/* ---- Larger type, narrow columns (review pass 2026-09-29). */
/* Mock list rows (planner "Your vendors", tools "One guest list"): the label column must be able to shrink so a long
   label wraps instead of pushing the value off the card. inlineChildren() sets --flex-size none on the column. */
.e-con.ay-grow{flex:1 1 0!important;min-width:0}
/* Budget calculator card head at 390px: the caps title and the "On track" badge share one line only when they fit. */
.ay-calc__card-head{flex-wrap:wrap;gap:10px 14px}
.ay-badge{white-space:nowrap}
.ay-calc__row-head{gap:14px}
/* Loop grids (tools, vendors, articles) stretch every row to the tallest card (grid-auto-rows: 1fr). In one column on
   a phone that leaves a blank band inside shorter cards, so rows size to their own card there. */
@media (max-width:767px){.elementor-loop-container.elementor-grid{grid-auto-rows:auto!important}}
.e-con.ay-appbadge{--width:178px;width:178px;min-width:178px;justify-content:flex-start}

/* ayedu-search (isSearch.html). */
.ay-search__form{margin:0}
/* Raised specificity: the kit's input[type=search] rule (10px radius, 1px #666 border, 14px 15px padding) outranks a bare class. */
.ay-search form.ay-search__form input.ay-search__input[type="search"]{width:100%;height:auto;min-height:0;margin:0;padding:18px 22px;border:1.5px solid var(--ay-field);border-radius:999px;font:400 18px/1.3 var(--ay-sans);color:var(--ay-ink);background:#fff;box-shadow:0 2px 6px rgba(28,31,34,.04),0 18px 44px rgba(28,31,34,.07);-webkit-appearance:none;appearance:none;transition:border-color .2s ease}
.ay-search form.ay-search__form input.ay-search__input[type="search"]::placeholder{color:var(--ay-ink-quiet);opacity:1}
.ay-search form.ay-search__form input.ay-search__input[type="search"]:focus{outline:0;border-color:var(--ay-wine)}
.ay-search form.ay-search__form input.ay-search__input[type="search"]:focus-visible{box-shadow:0 0 0 3px rgba(64,0,32,.14),0 18px 44px rgba(28,31,34,.07)}
.ay-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
.ay-search__count{margin:14px 0 0;font:400 15px/1.5 var(--ay-sans);color:var(--ay-ink-quiet)}
.ay-search__try{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ay-search__try[hidden]{display:none}
.ay-search__try-label{font:700 13px/1 var(--ay-sans);letter-spacing:.1em;color:var(--ay-ink-caption)}
/* Chip at the mockup's size (9px 16px, 13.5px); a transparent ::after extends the tap target to 44px without changing the look. */
.ay-search button.ay-search__chip{position:relative;background:var(--ay-stone);border:1px solid rgba(64,0,32,.18);color:var(--ay-ink);border-radius:999px;padding:9px 16px;min-height:0;margin:0;font:600 14.5px/1.2 var(--ay-sans);text-transform:none;letter-spacing:0;cursor:pointer;transition:border-color .2s ease;box-shadow:none}
.ay-search button.ay-search__chip::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
.ay-search button.ay-search__chip:hover,.ay-search button.ay-search__chip:focus,.ay-search button.ay-search__chip:active{border-color:var(--ay-wine);background:var(--ay-stone);color:var(--ay-ink)}
.ay-search button.ay-search__chip:focus:not(:focus-visible){border-color:rgba(64,0,32,.18)}
.ay-search button.ay-search__chip:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px}
.ay-search__results{margin-top:18px;display:grid;gap:12px}
.ay-search__hit{display:block;text-align:left;padding:22px 24px;border:1px solid var(--ay-line);border-radius:16px;background:#fff;text-decoration:none;transition:border-color .25s ease,transform .25s ease}
.ay-search__hit:hover{border-color:rgba(64,0,32,.35);transform:translateY(-2px)}
.ay-search__hit:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px}
.ay-search__kind{display:block;font:700 13px/1 var(--ay-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ay-link)}
.ay-search__title{display:block;margin-top:8px;font:400 22px/1.2 var(--ay-serif);color:var(--ay-ink-deep)}
.ay-search__desc{display:block;margin-top:6px;font:400 15.5px/1.65 var(--ay-sans);color:var(--ay-ink-body)}
.ay-search__empty{margin-top:18px;padding:40px;border:1px dashed var(--ay-field);border-radius:16px;text-align:center}
.ay-search__empty[hidden]{display:none}
.ay-search__empty-title{margin:0;font:400 22px/1.3 var(--ay-serif);color:var(--ay-ink-deep)}
.ay-search__empty-body{margin:10px 0 0;font:400 16px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
.ay-search.is-loading .ay-search__results{opacity:.55;transition:opacity .2s ease}
@media (max-width:767px){.ay-search__input{padding:15px 18px;font-size:17px}.ay-search__hit{padding:18px 18px}.ay-search__title{font-size:20px}.ay-search__empty{padding:28px 20px}}

/* Seating chart maker (isSeating.html). Grid 300px + 1fr on desktop, stacked on phones; tables are round buttons. */
.ay-seat{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start;min-width:0}
.ay-seat>*{min-width:0}
.ay-seat .ay-seat__guests{padding:24px;border:1px solid rgba(64,0,32,.08);border-radius:18px;background:var(--ay-blush)}
.ay-seat__kicker{margin:0;font:700 13px/1 var(--ay-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ay-link)}
.ay-seat__list{margin-top:14px;display:grid;gap:8px}
.ay-seat .ay-seat__guest{text-align:left;padding:12px 14px;min-height:44px;border-radius:10px;border:1.5px solid var(--ay-field);background:#fff;color:var(--ay-ink);font:600 16px/1.3 var(--ay-sans);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s var(--ay-ease-ui)}
.ay-seat .ay-seat__guest:hover{border-color:var(--ay-ink-quiet);transform:translateY(-1px)}
.ay-seat .ay-seat__guest[aria-pressed="true"]{background:var(--ay-ink);color:#fff;border-color:var(--ay-ink)}
.ay-seat .ay-seat__guest:focus-visible,.ay-seat__table:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-seat__list:empty::after{content:"Everyone is seated.";display:block;font:400 14.5px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
/* content-box on purpose: the mockup's board is a plain div (content-box), so its min-height:340px renders 394px tall. */
.ay-seat .ay-seat__board{box-sizing:content-box;padding:26px;border:1px solid var(--ay-line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(28,31,34,.03),0 18px 44px rgba(28,31,34,.07);min-height:340px}
.ay-seat .ay-seat__board .ay-seat__hint{margin:0 0 18px;font:400 15.5px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
.ay-seat .ay-seat__tables{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:720px}
.ay-seat .ay-seat__table{aspect-ratio:1;border-radius:50%;border:2px solid var(--ay-field);background:#fff;color:var(--ay-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .25s var(--ay-ease-pop)}
.ay-seat .ay-seat__table:hover{transform:scale(1.06)}
.ay-seat .ay-seat__table:active{transform:scale(.95)}
.ay-seat.is-picking .ay-seat__table{background:var(--ay-blush);border-color:var(--ay-wine)}
.ay-seat .ay-seat__table-label{font:400 24px/1 var(--ay-serif)}
.ay-seat .ay-seat__table-count{font:400 13px/1 var(--ay-sans);opacity:.7}
.ay-seat__toast{margin-top:14px;padding:18px 20px;border-radius:14px;background:var(--ay-blush);border:1px solid rgba(64,0,32,.15);animation:lux-in .35s var(--ay-ease-reveal) both}
.ay-seat__toast[hidden],.ay-seat__cta[hidden]{display:none}
.ay-seat__toast-text{margin:8px 0 0;font:400 17px/1.65 var(--ay-sans);color:var(--ay-ink)}
.ay-seat__cta{margin-top:14px;padding:22px 24px;border-radius:16px;background:var(--ay-sage-soft);border:1px solid rgba(93,106,74,.12);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;animation:lux-in .35s var(--ay-ease-reveal) both}
.ay-seat__cta-title{margin:0;font:400 20px/1.3 var(--ay-serif);color:var(--ay-ink-deep)}
/* "Save this chart free" (mockup: 15px 26px, 15.5/700, deep magenta, white label). The kit's `a{color:var(--ay-link)}` outranked a bare
   .ay-btn--magenta, which rendered a magenta label on a magenta pill with no padding; every state is pinned here. */
.ay-seat .ay-seat__cta a.ay-btn--magenta,.ay-seat .ay-seat__cta a.ay-btn--magenta:visited{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:15px 26px;border:0;border-radius:999px;background:var(--ay-btn-bg);color:#fff;font:700 16.5px/1.2 var(--ay-sans);text-decoration:none;box-shadow:0 10px 26px rgba(64,0,32,.22)}
.ay-seat .ay-seat__cta a.ay-btn--magenta:hover,.ay-seat .ay-seat__cta a.ay-btn--magenta:focus{background:var(--ay-wine-hover);color:#fff}
.ay-seat .ay-seat__cta a.ay-btn--magenta:active{background:var(--ay-wine-pressed);color:#fff}
.ay-seat .ay-seat__cta a.ay-btn--magenta:focus-visible{outline:2px solid var(--ay-maroon);outline-offset:3px}
@media (max-width:1024px){.ay-seat{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.ay-seat .ay-seat__tables{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.ay-seat .ay-seat__table:hover,.ay-seat .ay-seat__table:active,.ay-seat .ay-seat__guest:hover{transform:none}.ay-seat__toast,.ay-seat__cta{animation:none}}

/* AyeDu Log in widget (ayedu-sign-in). Field, label, button and note values match the contact / book-a-demo forms
   (formStyle in page-book-a-demo.mjs) so the card reads as the same system. Every raw <button> is reset at
   .ay-si button specificity because the kit's Theme Style > Buttons otherwise paints them maroon pills. */

.ay-si{--si-line:var(--ay-field);--si-err:#B3261E;font-family:var(--ay-sans);color:var(--ay-ink)}
.ay-si [hidden]{display:none!important}
.ay-si__form{display:flex;flex-direction:column;gap:16px;margin:0}
.ay-si__field{display:flex;flex-direction:column;gap:6px;margin:0}
.ay-si__label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ay-si .ay-si__label{margin:0;padding:0;font:600 14px/1.3 var(--ay-sans);color:var(--ay-ink-body);letter-spacing:0}

.ay-si .ay-si__input{box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:13px 15px;border:1.5px solid var(--si-line);border-radius:10px;background:#fff;
  font:400 17px/1.25 var(--ay-sans);color:var(--ay-ink);box-shadow:none;transition:border-color .2s var(--ay-ease-ui),box-shadow .2s var(--ay-ease-ui)}
.ay-si .ay-si__input::placeholder{color:var(--ay-ink-quiet);opacity:1}
.ay-si .ay-si__input:hover{border-color:var(--ay-ink-quiet)}
.ay-si .ay-si__input:focus,.ay-si .ay-si__input:focus-visible{outline:none;border-color:var(--ay-wine);box-shadow:0 0 0 3px rgba(64,0,32,.14)}
.ay-si .is-invalid .ay-si__input,.ay-si .ay-si__input[aria-invalid="true"]{border-color:var(--si-err)}
.ay-si .is-invalid .ay-si__input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.ay-si .ay-si__input--code{font:600 20px/1.2 var(--ay-sans);letter-spacing:.32em;font-variant-numeric:tabular-nums}
.ay-si .ay-si__err{display:flex;align-items:center;gap:6px;margin:0;font:500 14px/1.45 var(--ay-sans);color:var(--si-err)}
.ay-si__err::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--si-err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.5v4.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.1' r='.95' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat}
.ay-si .ay-si__hint{margin:0;font:400 14px/1.45 var(--ay-sans);color:var(--ay-ink-caption)}

/* Couples / vendors switch: a two-segment control above the form. Selected segment is white with deep-magenta type
   (magenta is the site's selected-state colour; maroon stays on the primary button). 44px tap targets. */
.ay-si .ay-si__aud{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-width:0;margin:0 0 22px;padding:4px;border:0;border-radius:999px;background:rgba(28,31,34,.06)}
.ay-si .ay-si__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ay-si .ay-si__aud-opt{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:8px 12px;border-radius:999px;
  font:600 15px/1.2 var(--ay-sans);color:var(--ay-ink-body);text-align:center;cursor:pointer;transition:color .2s var(--ay-ease-ui),background-color .2s var(--ay-ease-ui),box-shadow .2s var(--ay-ease-ui)}
.ay-si .ay-si__aud-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ay-si .ay-si__aud-opt span{position:relative;pointer-events:none}
.ay-si .ay-si__aud-opt:hover{color:var(--ay-ink)}
.ay-si .ay-si__aud-opt.is-on{background:#fff;color:var(--ay-wine);box-shadow:0 1px 3px rgba(28,31,34,.12),0 0 0 1px rgba(64,0,32,.18)}
.ay-si .ay-si__aud-opt.is-focus{outline:2px solid var(--ay-magenta);outline-offset:2px}
.ay-si .ay-si__aud-opt:has(input:focus-visible){outline:2px solid var(--ay-magenta);outline-offset:2px}
/* Narrow phones: the couples segment takes its own width so "Vendor or planner" never wraps. */
@media (max-width:480px){
  .ay-si .ay-si__aud{grid-template-columns:max-content 1fr}
  .ay-si .ay-si__aud-opt{padding:8px 14px}
}

/* Password field with the show / hide toggle inside it (44px tap target). */
.ay-si__pw{position:relative}
.ay-si__pw .ay-si__input{padding-right:52px}
.ay-si button.ay-si__reveal{position:absolute;top:50%;right:2px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--ay-ink-quiet);box-shadow:none;cursor:pointer;transition:color .2s var(--ay-ease-ui)}
.ay-si button.ay-si__reveal:hover,.ay-si button.ay-si__reveal:focus{background:transparent;color:var(--ay-ink)}
.ay-si button.ay-si__reveal:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:-4px}
.ay-si__reveal .ay-si__eye-off,.ay-si__reveal.is-on .ay-si__eye-on{display:none}
.ay-si__reveal.is-on .ay-si__eye-off{display:block}

/* Inline text actions ("Forgot password?", "Log out", "Send a new code"). */
.ay-si button.ay-si__textlink{display:inline;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;
  font:600 14px/1.3 var(--ay-sans);color:var(--ay-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;letter-spacing:0;text-transform:none;transition:color .2s var(--ay-ease-ui)}
.ay-si button.ay-si__textlink:hover,.ay-si button.ay-si__textlink:focus{background:none;color:var(--ay-link-hover)}
.ay-si button.ay-si__textlink:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px;border-radius:2px}
/* Keeps the label row's tap target generous without shifting the text. */
.ay-si__label-row .ay-si__textlink{position:relative}
.ay-si__label-row .ay-si__textlink::after{content:"";position:absolute;inset:-12px -8px}

/* Primary action: the site's maroon primary button (magenta is reserved for links and selected states). */
.ay-si .ay-si__submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:4px 0 0;padding:16px 28px;border:0;border-radius:999px;
  background:var(--ay-btn-bg);color:#fff;font:700 17px/1.3 var(--ay-sans);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;
  box-shadow:0 10px 26px rgba(64,0,32,.22);transition:background-color .2s var(--ay-ease-ui),box-shadow .2s var(--ay-ease-ui),transform .12s var(--ay-ease-ui)}
.ay-si .ay-si__submit:hover,.ay-si .ay-si__submit:focus{background:var(--ay-wine-hover);color:#fff;box-shadow:0 12px 30px rgba(64,0,32,.3)}
.ay-si .ay-si__submit:active{background:var(--ay-wine-pressed);color:#fff}
.ay-si .ay-si__submit:active{transform:scale(.985)}
.ay-si .ay-si__submit:focus:not(:focus-visible){background:var(--ay-btn-bg)}
.ay-si .ay-si__submit:focus:not(:focus-visible):hover{background:var(--ay-wine-hover)}
.ay-si .ay-si__submit:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-si .ay-si__submit[disabled]{cursor:progress;background:var(--ay-wine);opacity:.55;box-shadow:none;transform:none}

.ay-si .ay-si__alert{margin:0;padding:12px 14px;border-radius:10px;background:#FCEEEE;border:1px solid rgba(179,38,30,.18);font:500 15px/1.5 var(--ay-sans);color:#8C1D18}

/* "or continue with" + Google / Apple. */
.ay-si .ay-si__divider{display:flex;align-items:center;gap:14px;margin:26px 0 16px;font:500 14px/1.3 var(--ay-sans);color:var(--ay-ink-caption)}
.ay-si__divider::before,.ay-si__divider::after{content:"";flex:1;height:1px;background:rgba(28,31,34,.1)}
.ay-si__social{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ay-si button.ay-si__oauth{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:0;padding:12px 16px;
  border:1.5px solid var(--ay-field);border-radius:999px;background:#fff;color:var(--ay-ink);box-shadow:none;cursor:pointer;
  font:600 16px/1.2 var(--ay-sans);letter-spacing:0;text-transform:none;transition:border-color .2s var(--ay-ease-ui),background-color .2s var(--ay-ease-ui)}
.ay-si button.ay-si__oauth:hover{border-color:var(--ay-ink);background:#fff;color:var(--ay-ink)}
.ay-si button.ay-si__oauth:focus{background:#fff;color:var(--ay-ink)}
.ay-si button.ay-si__oauth:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-si button.ay-si__oauth:active{transform:scale(.985)}
.ay-si button.ay-si__oauth[disabled]{cursor:progress;opacity:.55}
.ay-si button.ay-si__oauth.is-busy{opacity:1;border-color:var(--ay-ink)}
.ay-si__oauth svg{flex:none}

.ay-si .ay-si__new{margin:22px 0 0;text-align:center;font:400 15.5px/1.6 var(--ay-sans);color:var(--ay-ink-body)}
.ay-si .ay-si__new a{font-weight:600;color:var(--ay-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ay-si .ay-si__new a:hover{color:var(--ay-link-hover)}
.ay-si__new .ay-si__textlink{font-size:15.5px}

.ay-si .ay-si__fine{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--ay-line);font:400 14px/1.6 var(--ay-sans);color:var(--ay-ink-caption)}
.ay-si .ay-si__fine a{color:var(--ay-ink-body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ay-si .ay-si__fine a:hover{color:var(--ay-link-hover)}

/* Preview mode (staging / local): Clerk only serves ayedu.ai, so say so plainly instead of failing silently. */
.ay-si .ay-si__preview{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:var(--ay-sage-bg);border:1px solid rgba(93,106,74,.2);font:400 15px/1.6 var(--ay-sans);color:var(--ay-ink-tint)}
.ay-si .ay-si__preview a{font-weight:600;color:var(--ay-sage-text);text-decoration:underline;text-underline-offset:3px}
.ay-si__captcha:empty{display:none}
.ay-si__captcha{margin-top:14px}

/* Secondary views (code, reset, new password, already signed in). */
.ay-si button.ay-si__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px 0 6px -2px;padding:0 2px;border:0;background:none;box-shadow:none;cursor:pointer;
  font:600 15px/1.2 var(--ay-sans);color:var(--ay-ink-body);letter-spacing:0;text-transform:none}
.ay-si button.ay-si__back:hover,.ay-si button.ay-si__back:focus{background:none;color:var(--ay-ink)}
.ay-si button.ay-si__back:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:2px;border-radius:4px}
.ay-si .ay-si__title{margin:0;font:400 28px/1.15 var(--ay-serif);color:var(--ay-ink-deep);letter-spacing:-.01em}
.ay-si .ay-si__title:focus{outline:none}
.ay-si .ay-si__lede{margin:10px 0 22px;font:400 16px/1.6 var(--ay-sans);color:var(--ay-ink-body);overflow-wrap:anywhere}
.ay-si [data-view="signedin"] .ay-si__submit{margin-top:0}

@media (max-width:340px){
  .ay-si__social{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ay-si *{transition:none!important}
  .ay-si .ay-si__submit:active,.ay-si button.ay-si__oauth:active{transform:none}
}

/* Log in page layout: copy + help rows left, card right. On phones the card comes straight after the headline and
   the help rows follow it, so the form is on the first screen. */
.e-con.ay-login-grid{grid-template-areas:"head card" "help card";--e-con-grid-template-rows:auto 1fr;grid-template-rows:auto 1fr!important}
.ay-login-grid>.ay-login-head{grid-area:head}
.ay-login-grid>.ay-login-help{grid-area:help}
.ay-login-grid>.ay-login-card{grid-area:card}
@media (max-width:767px){
  .e-con.ay-login-grid{grid-template-areas:"head" "card" "help";--e-con-grid-template-rows:auto auto auto;grid-template-rows:auto auto auto!important}
}

/* Signup gate: the "Who are you?" step inside the "Create free account" window (widgets/class-signup-gate.php).
   Two views. Until the script runs, both the question and the form show, so nothing depends on JavaScript. */
.ay-gate{display:block}
.ay-gate .ay-gate__eyebrow{margin:0;font:700 11px/1.6 var(--ay-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ay-link)}
.ay-gate .ay-gate__title{margin:14px 0 0;font:400 30px/1.15 var(--ay-serif);color:var(--ay-ink-deep)}
.ay-gate .ay-gate__title:focus{outline:0}
.ay-gate .ay-gate__intro{margin:12px 0 0;font:400 15.5px/1.6 var(--ay-sans);color:var(--ay-ink-body)}
.ay-gate .ay-gate__list{display:grid;gap:10px;margin:22px 0 0}
/* One row per choice. The couple's row is a <button>, the others are links: same look, the kit's button styles reset. */
.ay-gate .ay-gate__opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:64px;margin:0;padding:14px 16px 14px 18px;box-sizing:border-box;
  border:1.5px solid var(--ay-field);border-radius:14px;background:#fff;color:var(--ay-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:none;letter-spacing:0;text-transform:none;
  transition:border-color .2s var(--ay-ease-ui),background-color .2s var(--ay-ease-ui),transform .12s var(--ay-ease-ui)}
.ay-gate .ay-gate__opt:hover,.ay-gate .ay-gate__opt:focus{border-color:var(--ay-wine);background:var(--ay-highlight);color:var(--ay-ink)}
.ay-gate .ay-gate__opt:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-gate .ay-gate__opt:active{transform:scale(.99)}
.ay-gate .ay-gate__opt-text{display:grid;gap:3px;min-width:0}
.ay-gate .ay-gate__opt-title{font:600 16.5px/1.25 var(--ay-sans);color:var(--ay-ink-deep)}
.ay-gate .ay-gate__opt-sub{font:400 14.5px/1.4 var(--ay-sans);color:var(--ay-ink-quiet)}
.ay-gate .ay-gate__arrow{flex:none;color:var(--ay-ink-quiet);transition:transform .2s var(--ay-ease-ui),color .2s var(--ay-ease-ui)}
.ay-gate .ay-gate__opt:hover .ay-gate__arrow,.ay-gate .ay-gate__opt:focus-visible .ay-gate__arrow{color:var(--ay-link-hover);transform:translateX(2px)}
.ay-gate .ay-gate__login{margin:18px 0 0;text-align:center;font:400 13.5px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
.ay-gate .ay-gate__login a,.ay-gate .ay-gate__vendor a{font-weight:600;color:var(--ay-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ay-gate .ay-gate__login a:hover,.ay-gate .ay-gate__vendor a:hover{color:var(--ay-link-hover)}
/* After "I'm a couple": the label row with a "Change" button, then the line for vendors and planners. */
.ay-gate .ay-gate__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ay-gate .ay-gate__eyebrow--couple:focus{outline:0}
.ay-gate button.ay-gate__change{margin:0;padding:0 0 1px;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;box-shadow:none;color:var(--ay-link);font:600 13px/1.4 var(--ay-sans);letter-spacing:0;text-transform:none;cursor:pointer;flex:none}
.ay-gate button.ay-gate__change:hover,.ay-gate button.ay-gate__change:focus{color:var(--ay-link-hover);background:none;border-color:currentColor}
.ay-gate button.ay-gate__change:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-gate .ay-gate__vendor{margin:10px 0 0;font:400 14px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
/* The script adds is-asking / is-couple to the popup's card; the form container that follows the widget has class ay-gate-body. */
.ay-gate.is-asking .ay-gate__couple,.is-asking .ay-gate-body{display:none}
.ay-gate.is-couple .ay-gate__ask{display:none}
.elementor-element.ay-gate-body{--margin-top:22px;margin-top:22px}
/* Separate the two views when both show (no script, or the editor). */
.ay-gate:not(.is-asking):not(.is-couple) .ay-gate__couple{margin-top:28px;padding-top:24px;border-top:1px solid var(--ay-line)}
@media (prefers-reduced-motion:reduce){.ay-gate .ay-gate__opt,.ay-gate .ay-gate__arrow{transition:none}}

/* AyeDu Check List (from field): the tool detail's feature points (isToolDetail.html tdPoints). */
.ay-points{list-style:none;margin:0;padding:0;display:grid;gap:10px;font:400 16px/normal var(--ay-sans,'Host Grotesk',sans-serif);color:var(--ay-ink-body)} /* mockup rows are line-height:normal spans, 10px apart */
.ay-points__item{display:flex;align-items:baseline;gap:9px;margin:0}
.ay-points__mark{color:var(--ay-sage,#5D6A4A);font-weight:700;flex:none}
/* Tool detail screenshot: fill the browser frame, crop tall shots at 520px from the top (mockup: max-height:520px; object-fit:cover; object-position:top). */
.ay-tool-shot img{display:block;width:100%;max-height:520px;object-fit:cover;object-position:top center}
/* (no phone cap: the mockup keeps max-height:520px at 390 too) */
/* Loop card: fill the grid cell so the link label sits on one baseline across a row. */
.e-loop-item>.ay-tool-card{height:100%}

/* Traditions hub + guide: the accent-title widget and the class hooks the templates use.
   Values are the mockup's (reference/unpack/markup/isTradition.html, isMulti.html, seo_show.html). */

/* AyeDu Accent Title widget: H1 with the accent phrase as sage italic serif */
.elementor-widget-ayedu-accent-title .ay-accent-title{margin:0;font:400 clamp(39px,4.6vw,62px)/1.06 var(--ay-serif);color:var(--ay-ink-deep);letter-spacing:0}
.elementor-widget-ayedu-accent-title .ay-accent-title em{font-family:var(--ay-serif);font-style:italic;font-weight:600;color:var(--ay-sage)}

/* Guide hero image: 4/3 frame, image covers */
.ay-trad-hero-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

/* Hub card (loop item): 16/10 image, card fills the grid cell so every "Read the guide" aligns */
.e-loop-item.ay-trad-card{height:100%}
.ay-trad-card-img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--ay-stone)}
.ay-trad-grid .elementor-loop-container{align-items:stretch}

/* Read next card: border darkens on hover (mockup) */
.ay-readnext{transition:border-color .3s ease}
.ay-readnext:hover{border-color:rgba(64,0,32,.3)}

/* Common questions band: sticky answer column on desktop, chevron accordion */
.ay-seo-sticky{position:sticky;top:110px}
@media (max-width:1024px){.ay-seo-sticky{position:relative;top:auto}}
.ay-faq-seo .e-n-accordion-item{border-top:1px solid var(--ay-line)}
.ay-faq-seo .e-n-accordion-item-title{padding:17px 0;gap:16px;min-height:44px;background:none;border:0;cursor:pointer;transition:color .2s ease}
.ay-faq-seo .e-n-accordion-item-title-text{font:700 16.5px/1.5 var(--ay-sans);color:var(--ay-ink)}
.ay-faq-seo .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:var(--ay-link-hover)}
.ay-faq-seo .e-n-accordion-item-title-icon{color:var(--ay-link);flex:none}
.ay-faq-seo .e-n-accordion-item-title-icon svg,.ay-faq-seo .e-n-accordion-item-title-icon i{color:var(--ay-link);fill:var(--ay-link);width:14px;height:14px;font-size:15px}
.ay-faq-seo .e-n-accordion-item>.e-con{padding:0 0 20px 0;animation:lux-in .35s ease both}

/* V5 SEO and copy pass (2026-09-21). Only what Elementor controls cannot express; colours and type come from the
   same tokens as everything else. */

/* Hero phone demo: Timeline screen (replaces Chat) */
.ay-phone__chips--days span.is-on{background:var(--ay-wine);border-color:var(--ay-wine);color:#fff}
.ay-tl-item{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start;position:relative}
.ay-tl-item__time{font:800 10.5px/1.35 var(--ay-sans);letter-spacing:.04em;color:var(--ay-link);padding-top:1px}
.ay-tl-item__what{display:grid;min-width:0}
.ay-tl-item__what span:first-child{font:700 12.5px/1.35 var(--ay-sans);color:var(--ay-ink)}
.ay-tl-item__what span:last-child{font-size:10.5px;line-height:1.4;color:var(--ay-ink-caption)}
.ay-tl-item.is-done .ay-tl-item__time{color:var(--ay-sage-text)}
.ay-tl-item.is-done .ay-tl-item__what span:first-child{color:var(--ay-ink-quiet)}

/* Product mock panels (planner portfolio, client view, run sheet views): one hairline per row, no extra gaps */
.ay-mock .elementor-heading-title{overflow-wrap:anywhere}

/* Homepage hero: the demo's heading sits above the phone, centred on the phone column */
.ay-demo-head{text-align:center}
@media (max-width:1024px){.ay-demo-head{margin-top:8px}}

/* Comparison table in two-column mode ("AyeDu · The old way"): the old-way cell reads as muted text */
.ay-cmp--two td:last-child{color:var(--ay-ink-body)}
.ay-cmp--two td.ay-cmp__a{font-weight:700}
.ay-cmp-wrap .ay-cmp--two thead th.ay-cmp__blank{width:24%}
.ay-cmp-wrap .ay-cmp--two tbody td{font-size:16px;line-height:1.45}
/* Row helpers: a flex child that takes the remaining width (and may shrink), and a block pinned to the card bottom */
.e-con.ay-grow{--width:auto;width:auto;flex:1 1 0;min-width:0}
.e-con.ay-push-end{margin-top:auto!important}

/* Phones */
@media (max-width:767px){
  /* Two-column comparison fits the screen: no sideways scroll, tighter cells, the row label stacks above */
  .ay-cmp-wrap table.ay-cmp.ay-cmp--two{min-width:0;table-layout:fixed}
  .ay-cmp-wrap .ay-cmp--two thead th.ay-cmp__blank{width:27%}
  .ay-cmp-wrap .ay-cmp--two tbody th{padding:16px 10px 16px 14px;font-size:13.5px;line-height:1.35}
  .ay-cmp-wrap .ay-cmp--two tbody td{padding:16px 10px;font-size:14px;line-height:1.4}
  .ay-cmp-wrap .ay-cmp--two thead th{padding:14px 8px}
  /* Split sections: the words come first on a phone, whichever side the visual sits on at desktop */
  .e-con.ay-split-text{order:-1}
}
/* "See AyeDu in action": the eyebrow's dot + label stay centered on every screen */
.ay-demo-head.ay-eyebrow .elementor-heading-title{display:flex;justify-content:center;margin-inline:auto}

/* Marketplace tradition filter (isMarket.html): chips, "8 vendors shown" line, empty state. */
.ay-vfilter__chips{display:flex;gap:10px;flex-wrap:wrap}
.ay-vfilter .ay-vfilter__chip{background:transparent;color:var(--ay-ink);border:1.5px solid var(--ay-field);border-radius:999px;padding:12px 22px;min-height:44px;font:700 15.5px/1.2 var(--ay-sans);cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.ay-vfilter .ay-vfilter__chip:hover{border-color:var(--ay-wine)}
.ay-vfilter .ay-vfilter__chip[aria-pressed="true"]{background:var(--ay-wine);color:#fff;border-color:var(--ay-wine)}
.ay-vfilter .ay-vfilter__chip:focus-visible{outline:2px solid var(--ay-magenta);outline-offset:3px}
.ay-vfilter__count{margin:26px 0 0;font:400 15.5px/1.5 var(--ay-sans);color:var(--ay-ink-quiet)}
.ay-vfilter__count:empty{display:none}
.ay-vfilter__empty{margin-top:18px;padding:44px 36px;border:1px dashed var(--ay-field);border-radius:16px;text-align:center;background:#fff}
.ay-vfilter__empty[hidden]{display:none}
.ay-vfilter__empty-title{margin:0;font:400 24px/1.2 var(--ay-serif);color:var(--ay-ink-deep)}
.ay-vfilter .ay-vfilter__empty .ay-btn{margin-top:16px;padding:13px 26px;font-size:16px}
.e-loop-item[hidden]{display:none!important}

/* Vendor links (AyeDu Vendor Meta List, layout "Vendor links"), 2026-10-14: a vendor's own website and Instagram on the
   profile page, under the category · city · specialty line. Auto-enqueued by class-widgets.php (assets/css/widgets-*.css).
   Quiet text links in the site's link color, a 16px line icon each, magenta on hover and keyboard focus like every other
   link on the site; no underline at rest (the icon and color already say "link"), underline on hover. Every rule carries two
   classes: the theme's reset stylesheet and Royal Elementor Addons (production) outrank a lone class (see widgets-vendor-video.css). */
.elementor .ay-vlinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.elementor .ay-vlinks .ay-vlinks__item{margin:0;padding:0}
.elementor .ay-vlinks .ay-vlinks__a{display:inline-flex;align-items:center;gap:7px;min-height:28px;color:var(--ay-link,#400020);font:600 15px/1.4 var(--ay-sans,system-ui,sans-serif);text-decoration:none;border-radius:6px;transition:color .18s var(--ay-ease-ui,ease)}
.elementor .ay-vlinks .ay-vlinks__a:hover,.elementor .ay-vlinks .ay-vlinks__a:focus-visible{color:var(--ay-link-hover,#5A002E)}
.elementor .ay-vlinks .ay-vlinks__a:hover .ay-vlinks__txt{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.elementor .ay-vlinks .ay-vlinks__a:focus-visible{outline:2px solid var(--ay-magenta,#C80078);outline-offset:3px}
.ay-vlinks .ay-vlinks__ico{width:16px;height:16px;flex:0 0 16px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ay-vlinks .ay-vlinks__ico .ay-vlinks__dot{fill:currentColor;stroke:none}
.ay-vlinks .ay-vlinks__txt{overflow-wrap:anywhere}

/* Vendor meta list widget (chips / check list) plus the marketplace + vendor-profile card utilities that pair with it. */
.ay-metalist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.ay-metalist--chips .ay-metalist__item{background:var(--ay-blush-pill);color:var(--ay-link);border-radius:999px;padding:8px 15px;font:700 13.5px/1 var(--ay-sans)}
.ay-metalist--checks{display:grid;gap:9px}
.ay-metalist--checks .ay-metalist__item{font:400 16px/1.5 var(--ay-sans);color:var(--ay-ink-body)}
.ay-metalist__check{color:var(--ay-sage-text);font-weight:700;margin-right:.55em}

/* Fixed-ratio image frames used by the vendor / real-wedding loop cards and the profile gallery. */
.ay-ratio-4-3,.ay-ratio-1-1{position:relative;width:100%;overflow:hidden}
.ay-ratio-4-3{aspect-ratio:4/3}
.ay-ratio-1-1{aspect-ratio:1/1}
.ay-ratio-4-3>.elementor-widget-image,.ay-ratio-1-1>.elementor-widget-image,.ay-ratio-4-3 .elementor-widget-container,.ay-ratio-1-1 .elementor-widget-container{position:absolute;inset:0;width:100%;height:100%}
.ay-ratio-4-3 img,.ay-ratio-1-1 img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ay-cover--top img{object-position:center 32%}
/* Featured-image tag with no image prints nothing; the stone frame stays as the mockup's blank slot. */

/* Loop cards: the whole card is the link (container link), text never underlines. */
.ay-vendor-card,.ay-wedding-card{text-decoration:none;color:inherit}
.ay-vendor-card .elementor-heading-title,.ay-wedding-card .elementor-heading-title{text-decoration:none}
.ay-vendor-card .elementor-widget-heading:first-child .elementor-heading-title{min-width:0}
.ay-vendor-grid .e-loop-item,.ay-wedding-grid .e-loop-item{height:100%}
.ay-vendor-grid .e-loop-item>.e-con,.ay-wedding-grid .e-loop-item>.e-con{height:100%}
.ay-vendor-grid .e-loop-nothing-found-message,.ay-wedding-grid .e-loop-nothing-found-message{padding:44px 36px;border:1px dashed var(--ay-field);border-radius:16px;text-align:center;background:#fff;font:400 24px/1.2 var(--ay-serif);color:var(--ay-ink-deep)}

/* Optional morph (motion spec §6): the hovered card image and the profile hero share one view-transition name. */
@media (hover:hover){.ay-vendor-card:hover .ay-vt-vendor img{view-transition-name:vendor-hero}}
.ay-vt-vendor--hero img{view-transition-name:vendor-hero}

/* Vendor profile */
.ay-vp-gallery>.e-con:first-child{grid-column:span 2;grid-row:span 2}
/* A vendor with one photo of their own beside the hero (Desi Junction since 2026-10-19): the empty tile goes and the hero
   and that photo sit side by side as two equal squares. */
.e-con.ay-vp-gallery>.e-con:not(:first-child):not(:has(img)),.e-con.ay-vp-gallery>.e-con-inner>.e-con:not(:first-child):not(:has(img)){display:none}
@media (min-width:768px){
  /* :has() cannot nest, so "the third square has no photo" is :has(third square) plus :not(:has(third square's img)). */
  .e-con.ay-vp-gallery:has(>.e-con:nth-child(3)):not(:has(>.e-con:nth-child(3) img)),.e-con.ay-vp-gallery>.e-con-inner:has(>.e-con:nth-child(3)):not(:has(>.e-con:nth-child(3) img)){--e-con-grid-template-columns:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}
  .e-con.ay-vp-gallery:has(>.e-con:nth-child(3)):not(:has(>.e-con:nth-child(3) img))>.e-con:first-child,.e-con.ay-vp-gallery>.e-con-inner:has(>.e-con:nth-child(3)):not(:has(>.e-con:nth-child(3) img))>.e-con:first-child{grid-column:auto;grid-row:auto}
}
/* A vendor with no rating on file (real vendors until they supply one) shows no rating pill: the headings inside it print nothing, so the pill hides itself. */
.ay-vp-rating:not(:has(.elementor-widget-heading)){display:none}
.ay-vp-about p{margin:0 0 1em}.ay-vp-about p:last-child{margin-bottom:0}
.ay-h--sage-soft em{color:var(--ay-sage-soft)!important;font-weight:600}
.ay-crumbs .elementor-button{min-height:0}

/* Common questions accordion (seo_show.html): hairline per row, 15.5/700 question, magenta chevron, 15.5/1.78 answer. */
.ay-seo-faq .e-n-accordion-item{border:0;border-top:1px solid var(--ay-line);border-radius:0;background:none}
.ay-seo-faq .e-n-accordion-item>.e-con{border:0!important;background:none!important;border-radius:0!important}
.ay-seo-faq .e-n-accordion-item-title{padding:17px 0;min-height:44px;gap:16px;cursor:pointer;background:none!important;border:0!important;border-radius:0!important;justify-content:space-between;transition:color .2s ease}
.ay-seo-faq .e-n-accordion-item-title-header{flex:1 1 auto;min-width:0}
.ay-seo-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:var(--ay-link-hover)}
.ay-seo-faq .e-n-accordion-item-title-text{font:700 16.5px/1.5 var(--ay-sans);color:var(--ay-ink);transition:color .2s ease}
.ay-seo-faq .e-n-accordion-item-title-icon{color:var(--ay-link);flex:none;transition:transform .2s ease}
.ay-seo-faq .e-n-accordion-item-title-icon span{color:var(--ay-link);font-size:15px}

/* Vendor video (AyeDu Vendor Meta List, layout "Vendor video"), 2026-10-13: a vendor's own reel on the profile page.
   Auto-enqueued by class-widgets.php (assets/css/widgets-*.css). Colors and type come from the theme's custom properties.
   16:9 frame with the gallery's radius, poster behind the video until it plays, a quiet pause/play control in the corner
   (shown by widgets-vendor-video.js once the video can play; hover/focus, or always on touch), caption in the meta type.
   Specificity note (seen on production 2026-10-13): Hello Elementor's reset.css loads after this file and gives every
   <button> width:auto and display:inline-block at the same specificity as a lone class, and Royal Elementor Addons sets
   svg:not(:root){display:inline}, which beats a lone class. Every rule below carries two or more classes for that reason. */
.elementor-widget.ay-vp-video{width:100%;max-width:100%}
.elementor .ay-vvideo{margin:0;display:block}
.elementor .ay-vvideo__frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:var(--ay-device);isolation:isolate}
.elementor .ay-vvideo__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--ay-device)}
.elementor .ay-vvideo__toggle,.elementor .ay-vvideo__toggle:hover,.elementor .ay-vvideo__toggle:focus{position:absolute;right:14px;bottom:14px;z-index:2;box-sizing:border-box;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;margin:0;border:0;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(250,250,250,.92);color:var(--ay-device);font-size:0;line-height:0;cursor:pointer;box-shadow:0 6px 20px rgba(28,31,34,.22);opacity:0;transition:opacity .2s ease,transform .2s ease}
.elementor .ay-vvideo__toggle:hover{background:#fff}
.elementor .ay-vvideo__toggle[hidden]{display:none}
.elementor .ay-vvideo__frame:hover .ay-vvideo__toggle,.elementor .ay-vvideo__toggle:focus-visible,.elementor .ay-vvideo__toggle[aria-pressed="true"]{opacity:1}
.elementor .ay-vvideo__toggle:focus-visible{outline:2px solid var(--ay-magenta,#c80078);outline-offset:3px}
.elementor .ay-vvideo__toggle:active{transform:scale(.94)}
.ay-vvideo__toggle .ay-vvideo__ico{width:16px;height:16px;flex:0 0 16px;fill:currentColor;display:block}
.ay-vvideo__toggle .ay-vvideo__ico--play,.ay-vvideo__toggle[aria-pressed="true"] .ay-vvideo__ico--pause{display:none}
.ay-vvideo__toggle[aria-pressed="true"] .ay-vvideo__ico--play{display:block}
@media (hover:none){.elementor .ay-vvideo__toggle{opacity:1}}
.elementor .ay-vvideo__cap{margin:10px 0 0;font:400 13.5px/1.45 var(--ay-sans);color:var(--ay-ink-55,rgba(28,31,34,.55))}

/* Last-loaded layout guards (widgets-*.css load alphabetically; "zz" loads last).
   Decorative elements and scroll areas must never widen the page on phones. */
/* No sideways panning of the page, at any width. `clip` (not `hidden`) keeps the sticky header working: when one
   axis is `clip` the other stays `visible`, so the page still scrolls vertically and nothing becomes a scroll box.
   Nothing on the site overflows on its own (verified 768-2560px), so this changes no layout; it stops a stray
   element - including one injected by a browser extension - from turning the page into a canvas you can drag around. */
html, body { overflow-x: clip; }
.elementor-location-footer, .ay-footer { overflow: hidden; }
.ay-watermark { overflow: hidden; max-width: 100%; }
@media (max-width: 767px) {
  .ay-phone-glow { width: min(620px, 100vw) !important; height: min(620px, 100vw) !important; }
  .ay-cmp-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* Post byline on phones: the avatar keeps its place beside the text, and the "· Updated" date takes its own line without its leading dot. */
@media (max-width: 767px) {
  .elementor .e-con.ay-byline.ay-fit { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
  .elementor .ay-byline > .elementor-widget:nth-child(4) { flex-basis: 100%; width: 100%; overflow: hidden; }
  .elementor .ay-byline > .elementor-widget:nth-child(4) .elementor-heading-title { display: block; margin-left: -.531em; clip-path: inset(0 0 0 .45em); }
}