/* Occasi home, R5 (24 Oct 2026). The layout and feel the owner pointed to (a big italic serif headline beside a phone
   playing a real invitation among drifting wedding objects, a sideways row of tall design cards, a sticky step list beside
   real product pictures, and a bar that follows you), in Occasi's own words, colours and pictures.
   Warm ivory, one deep accent (our forest green), soft gold hairlines. Light only, no blur. Sits on css/occasi-site-theme.css
   (tokens, header, footer, buttons). Every class is g4-. Text never moves; under reduced motion nothing does. */

:root{--g4-ivory:#fbf7f1;--g4-paper:#f6efe5;--g4-ink:#2a2521;--g4-text:#4a423b;--g4-muted:#6f6359;--g4-accent:#1f3a2c;--g4-gold:#b8955a;--g4-line:rgba(160,128,74,.28);
  --g4-ease:cubic-bezier(.23,1,.32,1);--g4-shadow:0 2px 6px rgba(74,54,30,.06),0 40px 70px -40px rgba(74,54,30,.45)}
body.g4{background:var(--g4-ivory)}
body.g4 .ot-top:not(.is-over){background:var(--g4-ivory)}
.g4-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--ot-gutter)}
.g4-center{text-align:center}
.g4-h1,.g4-h2,.g4-h3{margin:0;color:var(--g4-ink);font-weight:400;text-wrap:balance}
.g4-h2{font:500 clamp(38px,9vw,48px)/1.04 var(--ot-serif);letter-spacing:-.012em}
.g4-h3{font:500 clamp(30px,7vw,40px)/1.06 var(--ot-serif)}
.g4-it{font-family:var(--ot-italic);font-style:italic;font-weight:400}
.g4-h2 .g4-it,.g4-h3 .g4-it{display:block;padding-bottom:.05em}
.g4-lede{margin:22px 0 0;max-width:40ch;font-size:17px;line-height:1.65;color:var(--g4-text)}
.g4-sub{margin:18px 0 0;max-width:52ch;font-size:16.5px;line-height:1.65;color:var(--g4-text)}
.g4-center .g4-sub{margin-left:auto;margin-right:auto}
.g4-small{margin-top:14px;font-size:13px;color:var(--g4-muted)}
.g4-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.g4-center.g4-actions{justify-content:center}
body.ot-site .g4-btn{min-height:54px;padding:0 30px;border-radius:999px;font-size:14px;letter-spacing:.03em}
body.ot-site .ot-btn-primary.g4-btn{background:var(--g4-accent);border-color:var(--g4-accent)}
.g4-link{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--ot-sans);color:var(--g4-ink);text-decoration:underline;text-decoration-color:var(--g4-gold);text-underline-offset:7px}
.g4-sec{padding:96px 0}
.g4-head{margin-bottom:44px}
.g4-more{margin-top:28px}
@media (min-width:1000px){
  .g4-h2{font-size:clamp(50px,4.2vw,64px)}
  .g4-lede{font-size:19px}
  .g4-sec{padding:140px 0}
}

/* ---------- hero (usability brief, 24 Oct 2026) ----------
   Words and actions first; one large phone playing the real White Pavilion invitation (sample names) as the focus. No
   floating props, no quote cards; the only ornament is the pavilion's own arch behind the phone. On a 1366 x 768 laptop
   the headline, the actions, the facts and the whole phone are visible together; on a phone the words come first and the
   phone stays large. */
.g4-hero{position:relative;padding:20px 0 56px;overflow:hidden}
.g4-hero-in{display:grid;gap:40px;align-items:center}
.g4-h1{font:500 clamp(40px,10.6vw,52px)/1.02 var(--ot-serif);letter-spacing:-.012em}
.g4-h1 .g4-it{display:block;padding-bottom:.04em;letter-spacing:-.01em}
.g4-hero .g4-lede{max-width:36ch;margin-top:18px;font-size:17px;line-height:1.6;color:var(--g4-text)}
.g4-hero .g4-actions{margin-top:26px;gap:12px}
body.ot-site .ot-btn-ghost.g4-btn{background:#fffdf9;border-color:var(--ot-line-strong);color:var(--g4-ink)}
body.ot-site .ot-btn-ghost.g4-btn:hover{border-color:var(--g4-accent);color:var(--g4-accent)}
.g4-facts{margin:20px 0 0;font:500 14.5px/1.5 var(--ot-sans);color:var(--ot-muted);letter-spacing:.01em}
.g4-facts{display:flex;flex-wrap:wrap;gap:4px 0}
.g4-facts span{white-space:nowrap}
.g4-facts span+span::before{content:"·";margin:0 .55em;color:var(--g4-gold-ink,#7f6230)}
.g4-stage{position:relative;margin:0;justify-self:center;display:grid;justify-items:center;gap:16px;isolation:isolate}
/* the pavilion's arch behind the phone (cream, one gold hairline) */
.g4-stage::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--g4-pw) * 2.131 * .1);width:calc(var(--g4-pw) * 1.62);height:calc(var(--g4-pw) * 2.131 * .9 + 18px);transform:translateX(-50%);border-radius:999px 999px 18px 18px;
  background:linear-gradient(180deg,#f4ece0 0%,#efe4d4 100%);box-shadow:inset 0 0 0 1px rgba(184,149,90,.38),inset 0 0 0 9px #f6efe5,inset 0 0 0 10px rgba(184,149,90,.22)}
.g4-hero{--g4-pw:min(calc(100vw - 2 * var(--ot-gutter) - 40px),340px)}
.g4-phone{position:relative;width:var(--g4-pw);aspect-ratio:642/1368;padding:9px;border-radius:46px;background:#1c1a18;box-shadow:var(--g4-shadow),inset 0 0 0 1px #3a3631}
.g4-film{display:block;width:100%;height:100%;object-fit:cover;border-radius:37px;background:#efe9df}
.g4-cap{max-width:calc(var(--g4-pw) * 1.62);text-align:center;font:400 13.5px/1.5 var(--ot-sans);color:var(--ot-muted)}
.g4-cap b{display:block;margin-bottom:2px;font:600 12px/1.4 var(--ot-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--g4-accent)}
@media (max-width:519px){
  .g4-hero .g4-actions{flex-direction:column;align-items:stretch}
  .g4-hero .g4-actions .g4-btn{width:100%}
  .g4-facts span:first-child{flex-basis:100%;font-size:16px;font-weight:600;color:var(--g4-ink)}
  .g4-facts span:nth-child(2)::before{content:none}
}
@media (min-width:1000px){
  .g4-hero{--g4-ph:clamp(470px,calc(100svh - var(--ot-top) - 136px),700px);--g4-pw:calc(var(--g4-ph) * 642 / 1368);padding:12px 0 40px}
  .g4-hero .g4-wrap{max-width:1320px}
  .g4-hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;min-height:calc(100svh - var(--ot-top) - 52px)}
  .g4-h1{font-size:clamp(58px,5vw,76px);line-height:.98}
  .g4-hero .g4-lede{font-size:19px;max-width:34ch;margin-top:22px}
  .g4-hero .g4-actions{margin-top:32px;gap:14px}
  .g4-facts{margin-top:24px;font-size:15px}
}

/* ---------- shared bits for the sections below (usability brief, 24 Oct 2026) ---------- */
.g4-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.g4-paper{background:var(--g4-paper)}
.g4-two-sec,.g4-pass-sec,.g4-how-sec{background:var(--g4-paper)}
.g4-small a{color:var(--g4-accent);text-underline-offset:3px}
.g4-mini,.g4-phone--sm{display:block;overflow:hidden;background:#1c1a18;box-shadow:var(--g4-shadow),inset 0 0 0 1px #3a3631}
.g4-mini img,.g4-phone--sm img{display:block;width:100%;height:auto}

/* ---------- C. the two packages ---------- */
.g4-prods{display:grid;gap:56px;max-width:1120px;margin:0 auto}
.g4-prod{display:grid;gap:28px;align-content:start}
.g4-prod-art{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:0}
.g4-mini{width:min(46vw,190px);padding:6px;border-radius:28px}
.g4-mini img{border-radius:22px}
.g4-prod--pass .g4-prod-art{justify-content:center;gap:0}
.g4-prod--pass .g4-mini{margin-right:-28px}
.g4-mini--over{position:relative;z-index:2;margin:0 0 -18px;margin-right:0!important;transform:translateY(18px)}
.g4-pname{margin:0;font:500 clamp(32px,7vw,40px)/1.05 var(--ot-serif);color:var(--g4-ink)}
.g4-pline{margin:8px 0 0;font:italic 400 21px/1.35 var(--ot-italic);color:var(--ot-rose-ink)}
.g4-price{display:flex;align-items:baseline;gap:10px;margin:20px 0 0}
.g4-price b{font:500 52px/1 var(--ot-serif);color:var(--g4-ink);font-variant-numeric:lining-nums tabular-nums}
.g4-price span{font-size:15px;color:var(--ot-muted)}
.g4-pdesc{margin:16px 0 0;font-size:16.5px;line-height:1.65;color:var(--g4-text);max-width:46ch}
.g4-pdesc b{color:var(--g4-ink)}
.g4-pmeta{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ot-muted);max-width:46ch}
.g4-plus{max-width:62ch;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--g4-line);text-align:center;font-size:16.5px;line-height:1.65;color:var(--g4-text)}
.g4-plus b{color:var(--g4-ink)}
.g4-prod-art{min-height:calc(min(46vw,190px) * 2.17 + 24px)}
@media (min-width:900px){
  .g4-prods{grid-template-columns:1fr 1fr;gap:0}
  .g4-prod{padding:0 48px;gap:36px}
  .g4-prod+.g4-prod{border-left:1px solid var(--g4-line)}
  .g4-mini{width:200px}
  .g4-prod-art{min-height:470px}
}

/* ---------- D. the collection ---------- */
.g4-cols{display:grid;grid-auto-flow:column;grid-auto-columns:min(74vw,290px);gap:24px;margin:0 calc(var(--ot-gutter) * -1);padding:4px var(--ot-gutter) 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--ot-gutter);scrollbar-width:thin;scrollbar-color:var(--g4-line) transparent}
.g4-d{scroll-snap-align:start;display:flex;flex-direction:column}
.g4-d-pic{position:relative;display:block;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#efe7db;box-shadow:var(--g4-shadow);outline:1px solid var(--g4-line);outline-offset:-1px}
.g4-d-pic img,.g4-d-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.g4-d-pic video{opacity:0;transition:opacity .4s var(--g4-ease)}
.g4-d-pic video.is-on{opacity:1}
.g4-d h3{margin:18px 0 0;font:500 25px/1.15 var(--ot-serif);color:var(--g4-ink)}
.g4-d-pkg{margin:6px 0 0;font:600 14px/1.4 var(--ot-sans);color:var(--g4-accent)}
.g4-d-line{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--g4-text)}
.g4-d-acts{display:flex;flex-direction:column;align-items:flex-start;margin:10px 0 0;padding-top:4px}
.g4-d-acts a{display:inline-flex;align-items:center;min-height:44px;font:500 15px/1.2 var(--ot-sans);color:var(--g4-accent);text-decoration:underline;text-decoration-color:var(--g4-gold);text-underline-offset:6px}
.g4-d-acts a:first-child{font-weight:600}
.g4-d-acts a:hover{color:var(--ot-rose-ink)}
@media (min-width:760px){
  .g4-cols{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px;margin:0;padding:0;overflow:visible}
}
@media (min-width:1180px){.g4-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (hover:hover) and (pointer:fine){.g4-d-pic{transition:transform .5s var(--g4-ease)}.g4-d:hover .g4-d-pic{transform:translateY(-4px)}}

/* ---------- E. the guest Pass ---------- */
/* v263: a row of real Pass tabs (css/occasi-pass-strip.css); the section keeps its paper */

/* ---------- F. the couple's side ---------- */
.g4-dash-sec .g4-head{max-width:760px}
.g4-rows{display:grid;gap:72px}
.g4-row2{display:grid;gap:28px;align-items:center}
.g4-screen{position:relative;margin:0}
.g4-screen picture{display:block}
.g4-screen>img:first-child,.g4-screen>picture>img{display:block;width:100%;height:auto;border-radius:16px;background:#fff;box-shadow:var(--g4-shadow);outline:1px solid var(--g4-line);outline-offset:-1px}
.g4-screen--pair{padding:0 0 12% 0}
.g4-screen-over{position:absolute;right:-4%;bottom:0;width:58%;height:auto;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(74,54,30,.08),0 30px 50px -24px rgba(74,54,30,.5);outline:1px solid var(--g4-line);outline-offset:-1px}
.g4-phone--sm{position:absolute;right:-3%;bottom:-6%;width:23%;padding:5px;border-radius:24px}
.g4-phone--sm img{border-radius:19px}
.g4-row2-copy p{margin:14px 0 0;max-width:40ch;font-size:16.5px;line-height:1.65;color:var(--g4-text)}
.g4-dash-sec .g4-small{margin-top:56px;font-size:14.5px}
@media (max-width:699px){
  .g4-screen picture img{max-height:500px;object-fit:cover;object-position:top}
  .g4-screen--pair{padding-bottom:0}
  .g4-screen-over{display:none}
  .g4-phone--sm{width:36%;right:-6px;bottom:-24px}
}
@media (min-width:900px){
  .g4-row2{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:64px}
  .g4-row2:nth-child(even){grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
  .g4-row2:nth-child(even) .g4-screen{order:2}
  .g4-rows{gap:96px}
}

/* ---------- G. how it works ---------- */
.g4-steps3{display:grid;gap:36px;max-width:1080px;margin:48px auto 0;padding:0;list-style:none;counter-reset:none}
.g4-steps3 li{padding-top:22px;border-top:1px solid var(--g4-line)}
.g4-steps3 .g4-num{display:block;margin:0 0 10px;font:400 52px/1 var(--ot-serif);color:var(--ot-gold-ink)}
.g4-steps3 h3{margin:0;font:500 27px/1.2 var(--ot-serif);color:var(--g4-ink)}
.g4-steps3 p{margin:12px 0 0;font-size:16px;line-height:1.65;color:var(--g4-text)}
@media (min-width:900px){.g4-steps3{grid-template-columns:repeat(3,1fr);gap:48px}}

/* ---------- H. pricing in brief ---------- */
.g4-cmp{max-width:880px;margin:0 auto}
.g4-cmp table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.g4-cmp th,.g4-cmp td{padding:14px 10px;border-bottom:1px solid var(--g4-line);vertical-align:middle}
.g4-cmp thead th{padding-bottom:16px;border-bottom:1.5px solid var(--g4-ink);font:500 14px/1.3 var(--ot-sans);color:var(--g4-text);text-align:center;vertical-align:bottom}
.g4-cmp thead th b{display:block;margin-top:4px;font:500 30px/1 var(--ot-serif);color:var(--g4-ink)}
.g4-cmp tbody th{padding-left:0;text-align:left;font-weight:500;color:var(--g4-ink)}
.g4-cmp td{text-align:center;color:var(--g4-text);width:27%}
.g4-cmp td:last-child{background:rgba(223,229,214,.35)}
.g4-cmp thead th:last-child{background:rgba(223,229,214,.35);border-radius:12px 12px 0 0}
.g4-price-sec .g4-note{max-width:70ch;font-size:14.5px}
.g4-price-sec .g4-note a{color:inherit;text-underline-offset:2px}
@media (min-width:700px){.g4-cmp table{font-size:16px}.g4-cmp th,.g4-cmp td{padding:16px 18px}.g4-cmp tbody th{padding-left:0}}

/* ---------- the close and the following bar ---------- */
.g4-end{padding:110px 0 150px;background:var(--g4-paper)}
.g4-note{max-width:64ch;margin:24px auto 0;text-align:center;font-size:14px;line-height:1.6;color:var(--g4-muted)}
.g4-bar{position:fixed;z-index:900;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 24px);padding:7px 7px 7px 22px;border-radius:999px;background:var(--g4-accent);color:#f6f1e7;box-shadow:0 18px 40px -16px rgba(20,32,24,.6);font-size:14px;transform:translate(-50%,140%);opacity:0;visibility:hidden;transition:transform .45s var(--g4-ease),opacity .3s var(--g4-ease),visibility 0s .45s}
.g4-bar.is-on{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .45s var(--g4-ease),opacity .3s var(--g4-ease)}
.g4-bar-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fbf7f1;color:var(--g4-accent);font:600 14px/1 var(--ot-sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap}
body.ot-site .g4-bar .g4-bar-btn{color:var(--g4-accent)}
@media (max-width:520px){
  .g4-bar span{display:none}
  .g4-bar{left:0;right:0;bottom:0;width:auto;max-width:none;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-radius:0;background:var(--g4-ivory);box-shadow:0 -1px 0 var(--g4-line);transform:translateY(110%)}
  .g4-bar.is-on{transform:none}
  html:has(body.g4){scroll-padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  body.g4 .ot-foot{padding-bottom:calc(60px + env(safe-area-inset-bottom) + 24px)}
  body.ot-site.g4 .g4-bar .g4-bar-btn{flex:1;justify-content:center;background:var(--g4-accent);color:#fbf7f1}
}
@media (prefers-reduced-motion:reduce){.g4-bar,.g4-bar.is-on{transition:opacity .2s linear}.g4-d-pic,.g4-d-pic video{transition:none}}
.g4-prod .pkg-rights{margin:10px 0 0;max-width:46ch;font-size:14px;line-height:1.55;color:var(--ot-muted)}
/* v284 (sense-check #7): each plan card starts its own plan */
.g4-pcta{margin:16px 0 0}.g4-pcta .ot-btn{box-sizing:border-box;width:100%;max-width:340px;min-width:0;white-space:normal;text-align:center;line-height:1.25;padding-inline:14px}
.g4-prod .pkg-rights a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:899px){.g4-mini--over{transform:none;margin-bottom:0}.g4-prod-art{min-height:0}.g4-prod--pass .g4-prod-art{padding-bottom:4px}}
@media (max-width:699px){.g4-phone--sm{bottom:-12px}.g4-row2:last-child .g4-row2-copy{padding-top:18px}}
.g4-cap{font-size:14px}
.g4-cap b{font-size:13px}

/* ---------- phones: the computer layout, kept (owner, 24 Oct 2026, test "mobile-like-pc") ----------
   Everything below applies under 700 px only, so the computer layout is untouched. The hero keeps its two columns (words
   left, the phone in its arch on the right, whole inside the column: v260, study #3 #23); the two packages sit side by side with "See more";
   the collection is two across; the guest Pass keeps its list beside the phone; the couple's rows alternate as on the
   computer. Body text stays at 15 px or more, controls at 44 px or more. */
.g4-pmore{display:none}
@media (max-width:699px){
  /* hero */
  .g4-hero{--g4-pw:clamp(136px,37vw,176px);padding:10px 0 40px}
  .g4-hero-in{grid-template-columns:minmax(0,1fr) var(--g4-pw);gap:10px;align-items:start}
  .g4-h1{font-size:clamp(31px,8.9vw,40px);line-height:1.02}
  .g4-hero .g4-lede{margin-top:14px;font-size:15px;line-height:1.55}
  .g4-hero .g4-actions{flex-direction:column;align-items:stretch;margin-top:20px;gap:10px}
  body.ot-site .g4-hero .g4-btn{width:100%;min-height:48px;padding:6px 8px;font-size:14px;letter-spacing:0;line-height:1.2;white-space:normal;text-align:center}
  .g4-hero .g4-facts{margin-top:16px;font-size:14px}
  .g4-hero .g4-facts span:first-child{flex-basis:100%;font-size:16px;font-weight:600;color:var(--g4-ink)}
  .g4-hero .g4-facts span:nth-child(2)::before{content:none}
  .g4-hero .g4-facts span:nth-child(3){flex-basis:100%}
  .g4-hero .g4-facts span:nth-child(3)::before{content:none}
  .g4-hero .g4-facts span:nth-child(4){flex-basis:100%;white-space:normal}   /* v285: "Independent, no vendor marketplace" on its own line */
  .g4-hero .g4-facts span:nth-child(4)::before{content:none}
  .g4-hero-in{grid-template-areas:"copy phone" "cap cap";isolation:isolate}
  .g4-hero-copy{grid-area:copy}
  .g4-stage{display:contents}
  .g4-stage::before{content:none}
  .g4-hero .g4-phone{grid-area:phone;justify-self:start;width:var(--g4-pw);margin-top:6px;padding:6px;border-radius:30px}
  .g4-hero .g4-phone::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--g4-pw) * 2.131 * .1);width:calc(var(--g4-pw) * 1.2);height:calc(var(--g4-pw) * 2.131 * .9 + 14px);transform:translateX(-50%);border-radius:999px 999px 16px 16px;
    background:linear-gradient(180deg,#f4ece0 0%,#efe4d4 100%);box-shadow:inset 0 0 0 1px rgba(184,149,90,.38),inset 0 0 0 7px #f6efe5,inset 0 0 0 8px rgba(184,149,90,.22)}
  .g4-film{border-radius:25px}
  .g4-hero .g4-cap{grid-area:cap;justify-self:center;max-width:none;text-wrap:balance;margin-top:18px;font-size:14px;line-height:1.45}
  .g4-hero .g4-cap b{font-size:12px;letter-spacing:.12em}

  /* the two packages, side by side */
  .g4-prods{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
  .g4-prod{gap:16px;padding:0 10px 0 0}
  .g4-prod+.g4-prod{padding:0 0 0 10px;border-left:1px solid var(--g4-line)}
  .g4-prod-art{min-height:calc(clamp(100px,27vw,140px) * 2.17 + 8px);align-items:flex-end}
  .g4-mini{width:clamp(100px,27vw,140px);padding:4px;border-radius:19px}
  .g4-mini img{border-radius:15px}
  .g4-prod--pass .g4-mini{width:clamp(92px,25vw,128px);margin-right:-44px}
  .g4-prod--pass .g4-mini--over{width:clamp(84px,22vw,116px);transform:translateY(8px);margin-bottom:0}
  .g4-pname{font-size:clamp(23px,6.4vw,30px)}
  .g4-pline{margin-top:6px;font-size:16px;line-height:1.35}
  .g4-price{flex-wrap:wrap;gap:2px 8px;margin-top:12px}
  .g4-price b{font-size:34px}
  .g4-price span{font-size:14px}
  .g4-prod .pkg-rights{font-size:13px;line-height:1.5}
  .g4-pdesc,.g4-pmeta{font-size:15px;line-height:1.55}
  .g4-prod.is-folded .g4-pextra{display:none}
  .g4-pmore:not([hidden]){display:inline-flex;align-items:center;min-height:44px;margin:4px 0 0;padding:0;border:0;background:none;cursor:pointer;font:600 15px/1.2 var(--ot-sans);color:var(--g4-accent);text-decoration:underline;text-decoration-color:var(--g4-gold);text-underline-offset:6px}
  .g4-pmore:focus-visible{outline:2px solid var(--g4-accent);outline-offset:3px;border-radius:4px}
  .g4-plus{margin-top:36px}

  /* the collection, two across */
  .g4-cols{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px;margin:0;padding:0;overflow:visible}
  .g4-d-pic{border-radius:16px}
  .g4-d h3{margin-top:12px;font-size:21px;line-height:1.15}
  .g4-d-pkg{margin-top:5px;font-size:13px}
  .g4-d-line{margin-top:6px;font-size:15px;line-height:1.5}
  .g4-d-acts{margin-top:4px}
  .g4-d-acts a{font-size:15px;line-height:1.25}

  /* the couple's side: screen and words side by side, alternating as on the computer */
  .g4-rows{gap:56px}
  .g4-row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
  .g4-row2:nth-child(even) .g4-screen{order:2}
  .g4-screen picture img{max-height:360px}
  .g4-row2 .g4-h3{font-size:clamp(24px,6.6vw,30px)}
  .g4-row2-copy p{margin-top:10px;font-size:15px;line-height:1.55}
  .g4-phone--sm{width:40%;right:-4px;bottom:-14px;padding:4px;border-radius:16px}
  .g4-phone--sm img{border-radius:12px}
  .g4-row2:last-child .g4-row2-copy{padding-top:0}
}

/* v244 (usability study #2, #20): every design takes a multi-day schedule */
.g4-d-multi{margin:6px 0 0;font-size:13.5px;line-height:1.4;font-weight:600;letter-spacing:.01em;color:var(--g4-text)}
.g4-prod-copy .pkg-rights{margin-top:12px}
/* v285 (owner, 1 Nov 2026): the Pass badge is a recommendation, never a sales claim ("Our pick for weekends"). */
.g4-badge{display:inline-block;width:fit-content;align-self:flex-start;justify-self:start;margin:0 0 10px;padding:5px 14px;border:1px solid var(--ot-gold-soft,#d9c39a);border-radius:999px;font:500 14px/1.3 var(--ot-sans,inherit);letter-spacing:.02em;color:var(--ot-gold-ink,#7f6230)}
/* Sits just above the Pass pictures, so both products' names and prices stay level (v285, checked at 390, 360 and desktop) */
.g4-prod--pass{position:relative}
.g4-prod--pass .g4-badge{position:absolute;top:-14px;z-index:2;margin:0;background:var(--g4-paper)}
@media (max-width:559px){.g4-prod--pass .g4-badge{padding:4px 9px;font-size:13px;letter-spacing:0}}