/* v212 Garden Pavilion: primary buttons are forest green (were champagne gold). */
/* Occasi site theme, part 2 (v204): the bridge from the 2026 forest-green page CSS to the home page's theme.
   Loaded after css/occasi-site-theme.css on every page in scripts/site-theme-pages.json. Every rule is scoped to
   body.ot-site, so the apps and the invitations, which share some of the older stylesheets, never see it.
   Order: 1 fonts, 2 tokens, 3 type, 4 buttons and links, 5 forms, 6 cards and panels, then one block per page family.
   When porting to the v200 chain: keep sections 1-5, then rewrite the page blocks for that chain's page CSS.
   v205 (the v200-v202 packaging chain): sections 1-20 are v204's, unchanged, for the older pages (they carry the same
   markup as on v204). Section 1b adds the self-hosted Cormorant Garamond, because v200 removed the Google Fonts link from
   those pages. Section 21 is new: it maps the v200 redesign's own stylesheet (css/occasi-site.css, the sx- parts) onto the
   theme, for the pages v200 redesigned (templates, pricing, how-it-works, features, about, occasi-pro, help). */

/* ---------- 1. fonts: the older families now draw the theme's fonts (declared after theirs, so these win) ---------- */
@font-face{font-family:'Occasi Sans';src:url('../assets/fonts/montserrat-latin.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Occasi Serif';src:url('../assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
/* 1b (v205): the older CSS asks for Cormorant Garamond by name; v200 removed the Google Fonts link, so it is self-hosted here */
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/eb-garamond-italic-latin.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/montserrat-latin.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}

/* ---------- 2. tokens: the older variables take the theme's colours ---------- */
body.ot-site{
  --oc-deep:var(--ot-ink); --oc-ink:var(--ot-ink); --oc-paper:var(--ot-ivory); --oc-white:var(--ot-card); --oc-gold:var(--ot-gold-ink);
  --oc-line:var(--ot-line-soft); --oc-muted:var(--ot-muted); --oc-sage:var(--ot-ivory-2);
  --oc-serif:var(--ot-serif); --oc-sans:var(--ot-sans); --oc-nav:var(--ot-top);
  --ink:var(--ot-ink); --paper:var(--ot-ivory); --muted:var(--ot-muted); --line:var(--ot-line-soft);
  background:var(--ot-ivory);color:var(--ot-text);font-family:var(--ot-sans)
}
body.ot-site .skip{background:var(--ot-ink);color:var(--ot-ivory);border-radius:999px}

/* ---------- 3. type ---------- */
body.ot-site main :is(h1,h2,h3){font-family:var(--ot-serif);font-weight:500;color:var(--ot-ink);letter-spacing:-.005em}
body.ot-site main :is(h1,h2,h3) em,body.ot-site main :is(h1,h2) i{font-family:var(--ot-italic);font-style:italic;font-weight:400;color:var(--ot-rose-ink)}
body.ot-site main :is(p,li,dd,dt,td,th,label,summary,figcaption,small){font-family:var(--ot-sans)}
body.ot-site main p{color:var(--ot-text)}
body.ot-site main h1{line-height:1.04}
body.ot-site .public-eyebrow,body.ot-site .oc-kicker,body.ot-site .index{font-family:var(--ot-sans);font-weight:500;letter-spacing:.2em;color:var(--ot-gold-ink)}

/* ---------- 4. buttons and links ---------- */
body.ot-site main :is(.public-button,.oc-button,.cw-button,.button.primary,.seo82-button){display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border-radius:999px;background:var(--ot-forest);color:var(--ot-on-forest);border:1px solid var(--ot-forest);
  box-shadow:inset 0 1px 0 rgba(255,246,222,.55);font:500 13px/1 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
body.ot-site main :is(.public-button,.oc-button,.cw-button,.button.primary,.seo82-button):hover{background:var(--ot-forest-hi);color:#fff}
body.ot-site main :is(.public-button.outline,.public-button.secondary,.button.secondary,.button:not(.primary)){background:transparent;color:var(--ot-ink);border-color:var(--ot-line);box-shadow:none}
body.ot-site main :is(.public-button.outline,.public-button.secondary,.button.secondary,.button:not(.primary)):hover{border-color:var(--ot-gold-ink);background:rgba(255,255,255,.5)}
body.ot-site main :is(.public-button,.oc-button,.button)[disabled]{opacity:.6;cursor:default}
body.ot-site main :is(.public-link,.oc-textlink,.cw-link,.text-link){display:inline-flex;align-items:center;min-height:44px;color:var(--ot-ink);
  font:500 13px/1.2 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(var(--ot-champagne),var(--ot-champagne)) 0 calc(50% + 12px)/100% 1px no-repeat;border:0}
body.ot-site main :is(.public-link,.oc-textlink,.cw-link,.text-link):hover{color:var(--ot-rose-ink)}
body.ot-site main a{text-decoration-color:var(--ot-champagne);text-underline-offset:3px}
body.ot-site main a:not([class]):hover{color:var(--ot-rose-ink)}

/* ---------- 5. forms ---------- */
body.ot-site main :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:var(--ot-card);color:var(--ot-ink);border:1px solid var(--ot-line);border-radius:10px;font-family:var(--ot-sans)}
body.ot-site main :is(input,select,textarea):focus{border-color:var(--ot-gold-ink);outline:2px solid rgba(201,164,95,.35);outline-offset:1px}
body.ot-site main :is(input,select,textarea){accent-color:var(--ot-gold-ink)}
body.ot-site main label{color:var(--ot-ink)}

/* ---------- 6. the portal switch (Pro and affiliate sign-in): moved from the old portal header ---------- */
body.ot-site .ot-portal-switch{margin:0;padding:14px var(--ot-gutter) 0;text-align:right;font-size:14px}
body.ot-site .ot-portal-switch a{display:inline-flex;align-items:center;min-height:44px;color:var(--ot-ink);text-decoration:underline;text-decoration-color:var(--ot-champagne);text-underline-offset:4px}

/* ---------- 7. cards and quiet panels (the home page's package cards) ---------- */
body.ot-site :is(.offer82-card,.existing-plan,.help-option,.public-policy,.tier-card,.community-feature.ot-card){background:var(--ot-card);border:0;border-radius:var(--ot-radius);
  box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px}
body.ot-site .offer82-signature{background:var(--ot-card)}
body.ot-site .offer82-card>.offer82-amount{font-family:var(--ot-serif);color:var(--ot-ink);border-top-color:var(--ot-line)}
body.ot-site .offer82-card>.offer82-amount span,body.ot-site .offer82-small{font-family:var(--ot-sans);color:var(--ot-gold-ink)}
body.ot-site .offer82-card h2{font-family:var(--ot-serif)}
body.ot-site :is(.community-quote,.seo82-quote){background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);border-color:var(--ot-line)}
body.ot-site .community-quote p{font-family:var(--ot-italic);font-style:italic;color:var(--ot-rose-ink)}
body.ot-site :is(.community-strip,.seo82-included,.public-faq details,.public-faq summary){border-color:var(--ot-line)}
body.ot-site main hr{border-color:var(--ot-line)}
body.ot-site main li::marker{color:var(--ot-gold-ink)}

/* ---------- 8. the legal pages (privacy, terms, affiliate terms): type and colour only, the words are untouched ---------- */
body.ot-site .public-policy{background:var(--ot-card)}
body.ot-site .public-policy :is(p,li,strong){color:var(--ot-text)}
body.ot-site .public-policy li a,body.ot-site .public-policy p a{color:var(--ot-rose-ink)}
body.ot-site .public-policy h2{font-size:clamp(24px,3vw,30px);line-height:1.15}
body.ot-site .public-policy :is(.updated,.muted){color:var(--ot-muted)}

/* ---------- 9. sign-in, sign-up, reset and the Pro and affiliate entry pages ---------- */
body.ot-site .auth-layout{border:0!important;border-radius:var(--ot-radius);box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px;overflow:hidden;background:var(--ot-card)}
body.ot-site .auth-art,body.ot-site.pro-auth .pro-auth-art{background:linear-gradient(165deg,var(--ot-blush) 0%,var(--ot-ivory-2) 70%)!important;color:var(--ot-text)}
body.ot-site .auth-art h2,body.ot-site.pro-auth .pro-auth-art h2{color:var(--ot-ink)!important;font-family:var(--ot-serif);font-weight:500}
body.ot-site .auth-art :is(p,strong,small),body.ot-site.pro-auth .pro-auth-intro,body.ot-site.pro-auth .pro-auth-footnote{color:var(--ot-text)!important}
body.ot-site .auth-art .public-eyebrow,body.ot-site .pro-auth-art .public-eyebrow{color:var(--ot-gold-ink)!important}
body.ot-site .auth-art>img{box-shadow:var(--ot-shadow)}
body.ot-site.pro-auth .pro-auth-workflow{color:var(--ot-gold-ink);font-family:var(--ot-sans)}
body.ot-site.pro-auth .pro-auth-workflow>span{border-top-color:var(--ot-line)}
body.ot-site.pro-auth .pro-auth-workflow strong{color:var(--ot-ink);font-family:var(--ot-serif);font-size:20px;font-weight:500}
body.ot-site.pro-auth .pro-auth-workflow small{color:var(--ot-muted)}
body.ot-site .auth-panel,body.ot-site.pro-auth .auth-panel{background:var(--ot-card)}
body.ot-site.pro-auth .auth-panel h1,body.ot-site .auth-panel h1{font-family:var(--ot-serif);font-weight:500}
body.ot-site.pro-auth .auth-panel .public-button{background:var(--ot-forest);color:var(--ot-on-forest);border-color:var(--ot-forest)}
body.ot-site .auth-panel .public-button{width:100%}
body.ot-site .auth-switch,body.ot-site .auth-forgot{color:var(--ot-text)}
body.ot-site :is(.auth-switch,.auth-forgot) a{display:inline-flex;align-items:center;min-height:44px;color:var(--ot-ink)}
body.ot-site .password-field button{min-height:44px;min-width:44px;color:var(--ot-gold-ink);font-family:var(--ot-sans)}
body.ot-site .auth-divider{color:var(--ot-muted)}
body.ot-site .auth-divider:before,body.ot-site .auth-divider:after{background:var(--ot-line)}
body.ot-site :is(.auth-provider-note,.auth-social-message.preview-note){color:var(--ot-muted)}
body.ot-site .auth-message{color:var(--ot-rose-ink)}
body.ot-site.pro-auth{background:var(--ot-ivory)}

/* ---------- 10. the help centre ---------- */
body.ot-site.help-page .help-intro h1,body.ot-site .help-contact h2{color:var(--ot-ink);font-family:var(--ot-serif)}
body.ot-site .help-topics a{min-height:44px;border-color:var(--ot-line);background:transparent;color:var(--ot-ink);font-family:var(--ot-sans);font-size:13px;letter-spacing:.06em}
body.ot-site .help-topics a:hover{border-color:var(--ot-gold-ink);color:var(--ot-rose-ink)}
body.ot-site .help-option{color:var(--ot-ink)}
body.ot-site .help-option span{color:var(--ot-text)}
body.ot-site .help-contact{border-top-color:var(--ot-line)}

/* ---------- 11. the design landing pages (Château, Aegean Vow) ---------- */
body.ot-site .seo82-product-cover{background:var(--ot-ivory-2)}
body.ot-site .seo82-product-cover>span{background:rgba(251,247,242,.94);color:var(--ot-ink);box-shadow:0 0 0 1px var(--ot-line-soft);font-family:var(--ot-sans)}

/* ---------- 12. affiliates ---------- */
body.ot-site .tier-card,body.ot-site .tier-card:first-child{color:var(--ot-text)}
body.ot-site .tier-card:first-child{background:linear-gradient(165deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%)}
body.ot-site .tier-card :is(h3,.rate){color:var(--ot-ink)}
body.ot-site .tier-card :is(p,small){color:var(--ot-text)}
body.ot-site .earnings-slip{background:var(--ot-card);color:var(--ot-ink);border-radius:12px;box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px}
body.ot-site .earnings-slip :is(strong){color:var(--ot-ink)}
body.ot-site .earnings-slip :is(small,span,p){color:var(--ot-text)}
body.ot-site .calculator{background:var(--ot-card);color:var(--ot-text);border:0;border-radius:var(--ot-radius);box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px}
body.ot-site .calculator :is(h3,label){color:var(--ot-ink)}
body.ot-site .calculator p{color:var(--ot-text)}
body.ot-site .calculator .result{background:linear-gradient(165deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);border-radius:12px;color:var(--ot-ink)}
body.ot-site .calculator output{color:var(--ot-ink)}

/* ---------- 13. the designs page (templates.html): the collection's own variables take the theme ----------
   The invitation renders, films and phone captures are the products and keep their own colours. */
body.ot-site.collection-page{--cw-forest:var(--ot-ink);--cw-deep:var(--ot-ivory-2);--cw-ivory:var(--ot-ivory);--cw-white:var(--ot-card);--cw-gold:var(--ot-gold);
  --cw-gold-ink:var(--ot-gold-ink);--cw-ink:var(--ot-ink);--cw-muted:var(--ot-muted);--cw-line:var(--ot-line-soft);--cw-serif:var(--ot-serif);--cw-sans:var(--ot-sans)}
body.ot-site.collection-page :is(.cw-hero h1,.cw-head h2){font-family:var(--ot-serif);font-weight:500;color:var(--ot-ink)}
body.ot-site.collection-page :is(.cw-hero h1 em,.cw-head h2 em){font-family:var(--ot-italic);font-weight:400;color:var(--ot-rose-ink)}
body.ot-site.collection-page :is(.cw-hero,.cw-head) p{color:var(--ot-text)}
body.ot-site.collection-page .cw-button{border-radius:999px;background:var(--ot-forest);color:var(--ot-on-forest);border:1px solid var(--ot-forest);font:500 13px/1 var(--ot-sans);
  letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,246,222,.55)}
body.ot-site.collection-page .cw-button:hover{background:var(--ot-forest-hi);color:#fff}
/* Signature: the dark green room becomes a blush one; the films and phones sit on it like the home page's Pass section */
body.ot-site.collection-page .cw-signature{background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 38%,var(--ot-ivory) 100%);color:var(--ot-text)}
body.ot-site.collection-page .cw-signature .cw-head h2,body.ot-site.collection-page .cw-sig-copy h3{color:var(--ot-ink);font-family:var(--ot-serif);font-weight:500}
body.ot-site.collection-page .cw-signature .cw-head h2 em{color:var(--ot-rose-ink)}
body.ot-site.collection-page .cw-signature :is(.cw-head p,.cw-sig-copy p){color:var(--ot-text)}
body.ot-site.collection-page .cw-signature .cw-button{background:var(--ot-forest);color:var(--ot-on-forest)}
body.ot-site.collection-page .cw-signature .cw-link{color:var(--ot-ink)}
body.ot-site.collection-page .cw-signature .cw-link:hover{color:var(--ot-rose-ink)}
body.ot-site.collection-page .cw-sig-media{background:var(--ot-ivory-2);box-shadow:var(--ot-shadow);border-radius:var(--ot-radius)}
body.ot-site.collection-page :is(.cw-phone-label,.cw-sig-screens .cw-phone:hover .cw-phone-label,.cw-sig-swipe .cw-phone-label){color:var(--ot-ink);text-shadow:none}
body.ot-site.collection-page .cw-phone-label strong{color:var(--ot-ink);background:transparent}
body.ot-site.collection-page .cw-sig-swipe::before{background:linear-gradient(180deg,var(--ot-ivory-2) 0%,rgba(244,225,220,.6) 50%,var(--ot-ivory-2) 100%)}
body.ot-site.collection-page .cw-dots span{background:rgba(134,102,47,.35);box-shadow:none}
body.ot-site.collection-page .cw-dots span.is-current,body.ot-site.collection-page .cw-sig-swipe .cw-dots span.is-current{background:var(--ot-gold-ink)}
body.ot-site.collection-page .cw-swatch span{background:var(--ot-ink);color:var(--ot-ivory);border-radius:999px;font-family:var(--ot-sans)}
body.ot-site.collection-page .cw-step{border-color:var(--ot-line);background:var(--ot-card);color:var(--ot-ink)}
body.ot-site.collection-page .cw-opening-list a{border:0;border-radius:var(--ot-radius);box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px;background:var(--ot-card)}
body.ot-site.collection-page .cw-opening-list strong{color:var(--ot-ink);font-family:var(--ot-serif);font-weight:500}
body.ot-site.collection-page .cw-opening-list :is(em,span){color:var(--ot-text)}
body.ot-site.collection-page .cw-opening-list small{color:var(--ot-gold-ink)}

/* ---------- 14. how it works and what is included (oc-journey26): sage bands become blush and ivory ---------- */
body.ot-site :is(.product-tour-section,.fx-chapter.alt,.oc-final,.home-end,.home-studio,.home-pricing-intro,.oc-price-strip,.oc-affiliate-note){
  background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);border-color:var(--ot-line)}
body.ot-site .oc-kicker{color:var(--ot-gold-ink)}
body.ot-site main :is(.oc-textlink){color:var(--ot-ink)}
/* the walkthrough film (how-it-works): a light screen in the theme's colours; the captures inside are real screens */
body.ot-site .occasi-film{--film-bg:var(--ot-card);--film-light:var(--ot-ink);--film-accent:var(--ot-rose-ink);border-color:rgba(205,176,122,.55);border-radius:var(--ot-radius);box-shadow:var(--ot-shadow)}
body.ot-site .occasi-film :is(.film-controls,.film-chapters){border-color:var(--ot-line)}
body.ot-site .film-wordmark{color:var(--ot-ink)}
body.ot-site .film-wordmark span,body.ot-site .film-bottom p{color:var(--ot-muted)}
body.ot-site .occasi-film button{color:var(--ot-ink);border-color:var(--ot-line);border-radius:999px;font-family:var(--ot-sans)}
body.ot-site .occasi-film button:hover{background:rgba(201,164,95,.12)}
body.ot-site .occasi-film button:focus-visible{outline-color:var(--ot-gold-ink)}
body.ot-site .film-chapters button{border-radius:0;color:var(--ot-muted)}
body.ot-site .film-chapters button[aria-selected=true]{color:var(--ot-rose-ink);border-bottom-color:var(--ot-rose-ink)}
body.ot-site .film-stage{background:linear-gradient(160deg,var(--ot-blush) 0%,var(--ot-ivory-2) 55%,var(--ot-ivory) 100%)}
body.ot-site .film-eyebrow{color:var(--ot-gold-ink)}
body.ot-site .film-copy h3{color:var(--ot-ink);font-family:var(--ot-serif);font-weight:500}
body.ot-site .film-copy>p:not(.film-eyebrow){color:var(--ot-text)}
body.ot-site .film-detail{color:var(--ot-rose-ink);border-top-color:var(--ot-line)}
body.ot-site .film-frame{border-color:#e7dccd;box-shadow:0 28px 50px -18px rgba(92,64,38,.38)}
body.ot-site .film-focus{border-color:var(--ot-gold-ink);box-shadow:0 0 0 1000px rgba(47,38,32,.12)}
body.ot-site .film-timeline{background:rgba(160,128,74,.18)}
body.ot-site .film-timeline span{background:var(--ot-gold)}
/* the older interactive tour (still on some pages) */
body.ot-site .product-tour{border-color:rgba(205,176,122,.55);border-radius:var(--ot-radius);color:var(--ot-ink)}
body.ot-site .tour-top{background:var(--ot-ivory-2);color:var(--ot-ink)}
body.ot-site .tour-top :is(span:last-child,span:nth-child(2)){color:var(--ot-muted)}
body.ot-site .tour-top button{color:var(--ot-ink);border-color:var(--ot-line);border-radius:999px}
body.ot-site .tour-tabs{background:var(--ot-ivory);border-color:var(--ot-line)}
body.ot-site .tour-tabs button[aria-selected=true]{border-color:var(--ot-rose-ink);color:var(--ot-rose-ink)}
/* what is included: the deep chapter becomes a blush one */
body.ot-site .fx-chapter.deep{background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);color:var(--ot-text)}
body.ot-site .fx-chapter.deep :is(h2,h3){color:var(--ot-ink)}
body.ot-site .fx-chapter.deep :is(.fx-head>p,.fx-copy p,.fx-facts li,.fx-note,.fx-grid span){color:var(--ot-text)}
body.ot-site .fx-chapter.deep :is(.fx-facts li,.fx-more,.fx-grid li){border-color:var(--ot-line)}
body.ot-site .fx-chapter.deep .fx-facts li::before,body.ot-site .fx-facts li::before,body.ot-site .fx-included-list li::before{background:var(--ot-gold)}
body.ot-site .fx-chapter.deep .oc-textlink{color:var(--ot-ink)}
body.ot-site .fx-jump a:hover{background:var(--ot-ivory-2)}
body.ot-site :is(.fx-shot,.fx-teaser-grid img){border-color:rgba(205,176,122,.5);border-radius:12px}
body.ot-site .fx-plan{border:0;border-radius:var(--ot-radius);box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px}
body.ot-site .home-tools li::before{color:var(--ot-gold-ink)}

/* ---------- 15. Occasi Pro (occasi-pro.html): its own variables take the theme ---------- */
body.ot-site.oc-pro-public{--ink:var(--ot-ink);--muted:var(--ot-muted);--paper:var(--ot-ivory);--line:var(--ot-line-soft);--green:var(--ot-ink);--serif:var(--ot-serif);--sans:var(--ot-sans)}
body.ot-site.oc-pro-public main em{color:var(--ot-rose-ink);font-family:var(--ot-italic);font-weight:400}
body.ot-site.oc-pro-public main :is(h1,h2,h3){font-weight:500;letter-spacing:-.01em}
body.ot-site.oc-pro-public .eyebrow,body.ot-site.oc-pro-public :is(.section-number,.feature-mark){color:var(--ot-gold-ink);font-family:var(--ot-sans);font-weight:500;letter-spacing:.2em}
body.ot-site.oc-pro-public .pilot-dot{background:var(--ot-rose-ink)}
body.ot-site.oc-pro-public main a.button.secondary{color:var(--ot-ink)}
body.ot-site.oc-pro-public :is(.audiences article,.audiences article:last-child,.plans article,.plans article.external-plan){background:var(--ot-card);border:0;border-radius:var(--ot-radius);
  box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px}
body.ot-site.oc-pro-public .audiences article:last-child,body.ot-site.oc-pro-public .plans article.external-plan{background:linear-gradient(170deg,var(--ot-blush) 0%,var(--ot-card) 60%)}
body.ot-site.oc-pro-public :is(.audiences li,.plans li)::before{color:var(--ot-gold-ink)}
body.ot-site.oc-pro-public .capability-strip{background:var(--ot-ivory-2);border-color:var(--ot-line)}
body.ot-site.oc-pro-public .capability-strip span::before{color:var(--ot-gold)}
body.ot-site.oc-pro-public .workspace-section{background:var(--ot-card);border-color:var(--ot-line)}
body.ot-site.oc-pro-public .steps li{border-color:var(--ot-line)}
body.ot-site.oc-pro-public .steps li>span{color:var(--ot-gold-ink);font-family:var(--ot-italic)}
body.ot-site.oc-pro-public .sharing-section{background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);color:var(--ot-text)}
body.ot-site.oc-pro-public .sharing-section :is(h2,h3){color:var(--ot-ink)}
body.ot-site.oc-pro-public .sharing-section em{color:var(--ot-rose-ink)}
body.ot-site.oc-pro-public .sharing-section .eyebrow{color:var(--ot-gold-ink)}
body.ot-site.oc-pro-public .sharing-section p:not(.eyebrow){color:var(--ot-text)}
body.ot-site.oc-pro-public .sharing-section a{color:var(--ot-ink)}
body.ot-site.oc-pro-public .sharing-card{background:var(--ot-card);color:var(--ot-ink);border-radius:var(--ot-radius);box-shadow:var(--ot-shadow)}
body.ot-site.oc-pro-public .sharing-card>div{border-color:var(--ot-line)}
body.ot-site.oc-pro-public .sharing-card b{background:var(--ot-ivory-2);color:var(--ot-ink)}
body.ot-site.oc-pro-public .sharing-card b.private{background:var(--ot-blush);color:var(--ot-rose-ink)}
body.ot-site.oc-pro-public .sharing-card :is(.eyebrow,p:last-child){color:var(--ot-muted)}
body.ot-site.oc-pro-public .final-cta{background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);border-radius:var(--ot-radius)}
body.ot-site.oc-pro-public .final-cta>p:last-child{color:var(--ot-text)}
body.ot-site.oc-pro-public .faqs summary::after{color:var(--ot-gold-ink)}
body.ot-site.oc-pro-public .faqs summary{min-height:44px}
/* the drawn workspace preview: an illustration of the Pro desk, in the theme's colours */
body.ot-site.oc-pro-public .preview{border-color:rgba(205,176,122,.5);background:var(--ot-card)}
body.ot-site.oc-pro-public .preview-sidebar{background:var(--ot-ivory-2);color:var(--ot-ink)}
body.ot-site.oc-pro-public .side-selected{background:var(--ot-card);color:var(--ot-ink)}
body.ot-site.oc-pro-public :is(.preview-stats>div,.preview-note){background:var(--ot-ivory);border-color:#eadfce}
body.ot-site.oc-pro-public .progress{background:#efe6da}
body.ot-site.oc-pro-public .progress i{background:var(--ot-gold)}
body.ot-site.oc-pro-public :is(.badge,.avatar){background:var(--ot-ivory-2);color:var(--ot-gold-ink)}
body.ot-site.oc-pro-public .sage{background:#eee3d6}
body.ot-site.oc-pro-public .preview-controls button{min-height:44px;border-color:var(--ot-line);color:var(--ot-ink);font-family:var(--ot-sans)}
body.ot-site.oc-pro-public .preview-controls button[aria-pressed=true]{background:var(--ot-ink);color:var(--ot-ivory)}
body.ot-site.oc-pro-public :is(.preview-top,.list-heading,.preview-list article){border-color:#eee4d6}

/* ---------- 16. the currency picker (only with ?currency=, while local prices are switched off) ---------- */
body.ot-site .ot-foot .oc-currency{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--ot-muted)}
body.ot-site .ot-foot .oc-currency select{min-height:36px;border:1px solid var(--ot-line);border-radius:999px;background:var(--ot-card);color:var(--ot-ink);padding:0 10px;font:inherit}

/* ---------- 17. remaining greens found by the colour audit ---------- */
body.ot-site .journey-note{background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%);border-color:var(--ot-line)}
body.ot-site .journey-note strong,body.ot-site .journey-delivery button{color:var(--ot-ink)}
body.ot-site .journey-delivery button{border-color:var(--ot-line);border-radius:999px;min-height:44px;font-family:var(--ot-sans);background:var(--ot-card)}
body.ot-site :is(.journey-steps>article,.journey-delivery,.fx-facts li,.fx-grid li){border-color:var(--ot-line)}
body.ot-site.oc-pro-public :is(.preview-top span,.list-heading>span,.preview-list small,.preview-note small,.preview-intro){color:var(--ot-muted)}
body.ot-site.oc-pro-public .sharing-card b.private{color:#7d4446}
body.ot-site .public-cover-action{color:var(--ot-ink)}
body.ot-site .stage-code{border-color:var(--ot-line)}
/* phone bezels on the designs page: warm near-black instead of green-black */
body.ot-site.collection-page :is(.cw-fan-card,.cw-screen,.cw-sig-swipe .cw-screen){background:linear-gradient(160deg,#2b241f 0%,#17120f 60%,#201a16 100%);box-shadow:0 0 0 1px rgba(205,176,122,.5),0 24px 46px -12px rgba(60,40,24,.42),0 8px 18px rgba(60,40,24,.18)}

/* ---------- 18. long button labels may wrap on narrow phones instead of running out of their card ---------- */
@media (max-width:560px){
  body.ot-site main :is(.public-button,.oc-button,.cw-button,.button){white-space:normal;text-align:center;line-height:1.3;padding-block:12px;max-width:100%}
}
body.ot-site .auth-panel :is(input,.public-button){max-width:100%;box-sizing:border-box}

/* ---------- 19. headline accents win over the older page rules; touch targets ---------- */
body.ot-site.ot-site main :is(h1,h2) em{font-family:var(--ot-italic);font-style:italic;font-weight:400;color:var(--ot-rose-ink)}
body.ot-site.ot-site main :is(h1,h2,h3):not(.cw-sig-copy h3){color:var(--ot-ink)}
body.ot-site .art-note{font-family:var(--ot-italic);color:var(--ot-rose-ink)}
body.ot-site .community-feature>a,body.ot-site.oc-pro-public .sharing-section a,body.ot-site .seo82-breadcrumbs a,body.ot-site nav[aria-label="Breadcrumb"] a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
body.ot-site main details>summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px}
body.ot-site main details>summary::-webkit-details-marker{display:none}
body.ot-site main input[type=checkbox]{width:22px;height:22px;flex:none}
body.ot-site .auth-switch a,body.ot-site main .auth-confirmation a{min-width:44px;justify-content:center}

/* ---------- 20. anchors and focus land below the fixed header ---------- */
body.ot-site :is(section[id],h2[id],h3[id],details[id],article[id]){scroll-margin-top:calc(var(--ot-top) + 20px)}
body.ot-site main :is(a,button,input,select,textarea,summary){touch-action:manipulation}

/* ---------- 21. (v205) the v200 redesign's pages (body.sx): its tokens and parts take the theme ----------
   css/occasi-site.css still lays these pages out (grids, the timeline map, the lookbook); this block changes only type,
   colour, lines, buttons and cards so they read as the home page. The invitation renders and real screens keep theirs. */
body.ot-site.sx{
  --sx-bg:var(--ot-ivory); --sx-paper:var(--ot-card); --sx-ivory:var(--ot-ivory); --sx-ink:var(--ot-ink); --sx-ink2:var(--ot-text); --sx-muted:var(--ot-muted);
  --sx-line:var(--ot-line-soft); --sx-line2:rgba(205,176,122,.3);
  --sx-sage:var(--ot-rose-ink); --sx-sage-deep:#7d4446; --sx-sage-soft:var(--ot-blush); --sx-sage-wash:var(--ot-ivory-2);
  --sx-gold:var(--ot-gold-ink); --sx-gold-soft:#f6ecd9;
  --sx-mehndi:#8a5a1c; --sx-wedding:#922b34; --sx-reception:#86662f; --sx-brunch:#9c5164;
  --sx-serif:var(--ot-serif); --sx-sans:var(--ot-sans); --sx-nav:var(--ot-top); --sx-r:var(--ot-radius); --sx-shadow:var(--ot-shadow);
  background:var(--ot-ivory);color:var(--ot-text);font-family:var(--ot-sans)
}
body.ot-site.sx :is(h1,h2,h3,h4){font-family:var(--ot-serif);font-weight:500;letter-spacing:-.005em}
body.ot-site.sx .sx-page-hero h1{font-size:clamp(40px,10vw,52px);line-height:1.04}
body.ot-site.sx .sx-kicker{font:500 12px/1.5 var(--ot-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ot-gold-ink)}
body.ot-site.sx :is(.sx-lead,.sx-head p){color:var(--ot-text)}
body.ot-site.sx :is(.sx-small,.sx-cap,.sx-key){color:var(--ot-muted)}
/* buttons: the home page's gold pill and its outline twin */
body.ot-site.sx .sx-btn{min-height:48px;padding:0 26px;border-radius:999px;background:var(--ot-forest);color:var(--ot-on-forest)!important;border:1px solid var(--ot-forest);
  box-shadow:inset 0 1px 0 rgba(255,246,222,.55);font:500 13px/1.2 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase}
body.ot-site.sx .sx-btn:hover,body.ot-site.sx .sx-btn.sage:hover{background:var(--ot-forest-hi);border-color:var(--ot-forest-hi);color:#fff!important}
body.ot-site.sx .sx-btn.sage{background:var(--ot-forest);border-color:var(--ot-forest)}
body.ot-site.sx .sx-btn.ghost{background:transparent;color:var(--ot-ink)!important;border-color:var(--ot-line);box-shadow:none}
body.ot-site.sx .sx-btn.ghost:hover{background:rgba(255,255,255,.5);border-color:var(--ot-gold-ink);color:var(--ot-ink)!important}
body.ot-site.sx .sx-btn.small{min-height:44px;padding:0 20px;font-size:12px}
body.ot-site.sx :is(.sx-link,.sx-prose a){color:var(--ot-ink);text-decoration-color:var(--ot-champagne);text-underline-offset:4px}
body.ot-site.sx :is(.sx-link,.sx-prose a):hover{color:var(--ot-rose-ink)}
body.ot-site.sx .sx-textlink{font:500 13px/1.2 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ot-ink);text-decoration:none;
  background:linear-gradient(var(--ot-champagne),var(--ot-champagne)) 0 calc(50% + 12px)/100% 1px no-repeat}
body.ot-site.sx .sx-openings a.sx-textlink{background:none;text-transform:none;letter-spacing:0;font:400 16px/1.5 var(--ot-sans)}
body.ot-site.sx .sx-textlink:hover{color:var(--ot-rose-ink)}
/* bands: white "paper" bands become the soft ivory; sage bands and the closing become the home page's blush */
body.ot-site.sx .sx-sec.paper{background:var(--ot-ivory-2);border-color:var(--ot-line-soft)}
body.ot-site.sx :is(.sx-sec.sage,.sx-close){background:linear-gradient(180deg,var(--ot-blush) 0%,var(--ot-ivory-2) 100%)}
body.ot-site.sx .sx-look-sec+.sx-look-sec{border-top-color:var(--ot-line-soft)}
/* cards and panels: the home page's package card */
body.ot-site.sx :is(.sx-card,.sx-route,.sx-map,.sx-price,.sx-table-wrap){background:var(--ot-card);border:0;border-radius:var(--ot-radius);
  box-shadow:var(--ot-shadow);outline:1px solid rgba(205,176,122,.5);outline-offset:-1px}
body.ot-site.sx .sx-price.p{background:linear-gradient(170deg,var(--ot-blush) 0%,var(--ot-card) 62%)}
body.ot-site.sx .sx-price .amt{font-family:var(--ot-serif);color:var(--ot-ink)}
body.ot-site.sx .sx-price .line{font-family:var(--ot-italic);color:var(--ot-rose-ink)}
body.ot-site.sx .sx-callout{background:#f6ecd9;color:#4a3a1c;box-shadow:inset 0 0 0 1px rgba(205,176,122,.45)}
body.ot-site.sx .sx-both{border-top-color:var(--ot-line-soft)}
/* the timeline map on pricing: The Invitation in ivory, The Occasi Pass in gold */
body.ot-site.sx .sx-bar.inv{background:var(--ot-ivory-2);color:var(--ot-ink);box-shadow:inset 0 0 0 1px rgba(205,176,122,.45)}
body.ot-site.sx .sx-bar.pass{background:var(--ot-forest);color:var(--ot-on-forest);box-shadow:inset 0 1px 0 rgba(255,246,222,.55)}
body.ot-site.sx .sx-map-row .nm{font-family:var(--ot-serif)}
/* numbered and ticked lists, rules */
body.ot-site.sx .sx-route .n{background:var(--ot-forest);color:var(--ot-on-forest);font-family:var(--ot-sans)}
body.ot-site.sx .sx-check li::before{border-color:var(--ot-gold-ink)}
body.ot-site.sx :is(.sx-steps li,.sx-plain div,.sx-trust div,.sx-feats div){border-top:1px solid var(--ot-champagne)}
body.ot-site.sx .sx-steps li::before{color:var(--ot-gold-ink);font-family:var(--ot-sans);letter-spacing:.2em}
body.ot-site.sx :is(.sx-days,.sx-story-cols){border-color:var(--ot-champagne)}
body.ot-site.sx .sx-tag-pill{background:var(--ot-forest);color:var(--ot-on-forest)}
body.ot-site.sx .sx-tag-pill.inv{background:var(--ot-card);color:var(--ot-ink);border-color:var(--ot-line)}
body.ot-site.sx .sx-quote{font-family:var(--ot-italic);color:var(--ot-rose-ink)}
/* phones and screens: warm frames */
body.ot-site.sx .sx-phone{border-color:var(--ot-card);background:var(--ot-ivory-2)}
body.ot-site.sx .sx-phone.dark{border-color:#2b241f}
body.ot-site.sx .sx-shot{border-color:rgba(205,176,122,.5);background:var(--ot-card)}
/* the how-it-works ribbon (one guest's link, moment by moment) */
body.ot-site.sx .sx-ribbon ol::before{background:var(--ot-champagne)}
body.ot-site.sx .sx-ribbon li::before{background:var(--ot-ivory);border-color:var(--ot-gold-ink)}
body.ot-site.sx :is(.sx-ribbon li.pass::before,.sx-key i.p){background:var(--ot-gold);border-color:var(--ot-gold-edge)}
body.ot-site.sx .sx-key i{border-color:var(--ot-gold-ink)}
body.ot-site.sx .sx-ribbon .what{font-family:var(--ot-serif)}
/* questions */
body.ot-site.sx :is(.sx-faq,.sx-faq details){border-color:var(--ot-line-soft)}
body.ot-site.sx .sx-faq summary{font-family:var(--ot-serif);color:var(--ot-ink)}
body.ot-site.sx .sx-faq summary::after{border-color:var(--ot-gold-ink)}
body.ot-site.sx .sx-faq .a{color:var(--ot-text)}
/* the designs page lookbook */
body.ot-site.sx .sx-filter a{background:transparent;border-color:var(--ot-line);color:var(--ot-ink);font:500 12px/1 var(--ot-sans);letter-spacing:.16em;text-transform:uppercase}
body.ot-site.sx .sx-filter a:hover{border-color:var(--ot-gold-ink);color:var(--ot-rose-ink)}
body.ot-site.sx .sx-look .pic{background:var(--ot-ivory-2)}
body.ot-site.sx .sx-look .pic .mini{border-color:var(--ot-card)}
body.ot-site.sx .sx-look .prod{background:var(--ot-ivory-2);color:var(--ot-ink);font-family:var(--ot-sans);letter-spacing:.06em}
body.ot-site.sx .sx-look .prod.p{background:var(--ot-forest);color:var(--ot-on-forest)}
body.ot-site.sx .sx-look .acts a{color:var(--ot-ink);text-decoration-color:var(--ot-champagne)}
body.ot-site.sx .sx-look .acts a.go{color:var(--ot-rose-ink)}
body.ot-site.sx .sx-look-head .sx-look-price{font-family:var(--ot-serif);color:var(--ot-ink)}
body.ot-site.sx .sx-openings li{border-color:var(--ot-line-soft)}
/* the help centre: search and topics */
body.ot-site.sx .sx-search input{background:var(--ot-card);border-color:var(--ot-line)}
body.ot-site.sx .sx-search input:focus{outline:2px solid rgba(201,164,95,.45);border-color:var(--ot-gold-ink)}
body.ot-site.sx .sx-faq-nav a{color:var(--ot-ink)}
body.ot-site.sx .sx-faq-nav a:hover{background:var(--ot-ivory-2);color:var(--ot-rose-ink)}
@media (max-width:1180px){body.ot-site.sx .sx-faq-nav a{background:var(--ot-card);border-color:var(--ot-line);font-size:14px}}
/* tables (what's included, Occasi Pro) */
body.ot-site.sx .sx-table :is(th,td){border-color:var(--ot-line-soft)}
body.ot-site.sx .sx-table thead th{background:var(--ot-ivory-2);font-family:var(--ot-serif);color:var(--ot-ink)}
body.ot-site.sx .sx-table.compact td{color:var(--ot-rose-ink)}
body.ot-site.sx .sx-chips li{background:var(--ot-card);border-color:var(--ot-line)}
@media (min-width:900px){body.ot-site.sx .sx-page-hero h1{font-size:clamp(52px,4.9vw,72px);line-height:1.02}}
/* a link that is a whole line on its own (the help centre's email card) is a 44 px target */
body.ot-site.sx :is(.sx-card,.sx-callout) p>a.sx-link:only-child{display:inline-flex;align-items:center;min-height:44px}

/* v205 go-live (23 Oct 2026): the company details under Help's contact cards. */
body.ot-site .sx-company{margin:28px auto 0;max-width:720px;text-align:center;font-size:14px;line-height:1.6;color:var(--ot-muted)}
body.ot-site .sx-follow{margin:28px auto 0;max-width:720px;text-align:center;font-size:15px;line-height:1.7}