:root{
    --bg:#FFFFFF; --ink:#101012; --muted:#6B6B72; --line:#E7E7E4;
    --gray:#F5F5F3; --gray2:#EFEFEC; --dark:#0E0E10; --dark2:#1A1A1D; --dark-line:#2A2A2E;
    --clay:#C2613C; --clay-dark:#A44C2C; --clay-soft:#F5E7DE; --gold:#E0B25E; --green:#3FA66A;
    --serif:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
    --r:20px; --rs:14px; --shadow:0 8px 30px rgba(16,16,18,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 26px;
    font-size:15px;font-weight:600;cursor:pointer;border:0;transition:transform .12s,opacity .2s,background .2s}
  .btn:hover{transform:translateY(-1px)}
  /* squircle (iOS/Figma continuous) corners — progressive enhancement, falls back to plain radius */
  .hcard,.vs-card,.vs-tab,.step3,.step-mock,.lw-card,.lw-bigcard,.pcard,.mcard,.qitem,.btn{corner-shape:squircle}
  .btn-dark{background:var(--ink);color:#fff}
  .btn-dark:hover{opacity:.88}
  .btn-light{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
  .btn-light:hover{border-color:var(--ink)}
  .btn-ondark{background:#fff;color:var(--ink)}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:none}
  h1{font-family:var(--serif);font-size:60px;line-height:1.04;letter-spacing:-.6px;font-weight:500}
  h2{font-family:var(--serif);font-size:42px;line-height:1.1;letter-spacing:-.4px;font-weight:500}
  h3{font-size:20px;letter-spacing:-.2px;font-weight:600}
  @media(max-width:820px){h1{font-size:40px;letter-spacing:-.4px}h2{font-size:30px}}
  .muted{color:var(--muted)}
  section{padding:84px 0}
  .center{text-align:center}
  .sec-top{max-width:40em;margin:0 auto 44px}
  .sec-top h2{margin:10px 0 12px}
  .sec-top p{font-size:18px;color:var(--muted)}

  /* placeholder image block */
  .ph{background:repeating-linear-gradient(45deg,#F0F0ED,#F0F0ED 14px,#ECECE8 14px,#ECECE8 28px);
    border:1px solid var(--line);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;
    color:#A6A69E;font-size:13px;font-weight:600;letter-spacing:.04em;min-height:160px;text-align:center}
  .ph.dark{background:repeating-linear-gradient(45deg,#202024,#202024 14px,#1B1B1F 14px,#1B1B1F 28px);
    border-color:var(--dark-line);color:#56565E}

  /* nav */
  nav{position:sticky;top:0;z-index:60;background:transparent;padding:16px 0}
  /* at top: bare elements, no container box */
  .nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;background:transparent;border:1px solid transparent;border-radius:16px;box-shadow:none;padding:7px 12px 7px 22px;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease}
  /* on scroll: floating liquid-glass card */
  nav.scrolled .nav-in{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.08);backdrop-filter:blur(18px) saturate(180%) brightness(1.08);border-color:rgba(255,255,255,.55);box-shadow:0 10px 30px rgba(16,16,18,.12), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.18)}
  @keyframes navDrop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
  /* first load: bring the nav elements in (not the box) */
  .nav-in .logo,.nav-in .nav-mid,.nav-in .nav-r{animation:navDrop .6s cubic-bezier(.2,.7,.3,1) both}
  .nav-in .nav-mid{animation-delay:.1s}
  .nav-in .nav-r{animation-delay:.2s}
  .nav-in .logo{justify-self:start}
  .nav-mid{justify-self:center}
  .nav-r{display:flex;align-items:center;gap:10px;justify-self:end}
  .nav-r .btn-light{background:transparent;border-color:transparent}
  .nav-r .btn-light:hover{background:var(--gray)}
  /* very small phones: tighten the two nav buttons so logo + buttons stay on one row */
  @media(max-width:400px){.nav-r{gap:6px}.nav-r .btn{padding:8px 12px !important;font-size:13px}}
  @font-face{font-family:'Reclame';src:url('/assets/fonts/Reclame.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
  .logo{font-family:'Reclame',Georgia,serif;font-weight:400;font-size:18px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
  .logo img{height:28px;width:auto;display:block}
  footer .logo img{height:42px;filter:brightness(0) invert(1)} /* dark logo shown white on the dark footer */
  .nav-mid{display:flex;align-items:center;gap:28px}
  .catpill{display:flex;align-items:center;gap:2px;background:#F3E2CD;border:1px solid var(--line);border-radius:999px;padding:4px}
  .catpill a{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);padding:8px 14px;border-radius:999px;transition:background .15s,box-shadow .15s;white-space:nowrap}
  .catpill a:hover{background:#fff;box-shadow:0 1px 5px rgba(16,16,18,.09)}
  .catpill .dot{width:8px;height:8px;border-radius:50%;flex:none}
  .navlink{font-size:15px;color:var(--ink);font-weight:500;opacity:.78}
  .navlink:hover{opacity:1}
  /* once the center links hide, switch to flex so the buttons hug the right edge (not the middle grid cell) */
  @media(max-width:1060px){.nav-mid{display:none}.nav-in{display:flex;justify-content:space-between}}

  /* hero */
  .hero{padding:78px 0 30px;text-align:center}
  .hero h1{font-size:88px;line-height:1.02;letter-spacing:-1.5px;margin:0 auto}
  @media(max-width:760px){.hero h1{font-size:46px;letter-spacing:-1px}}
  /* narrow phones: scale the headline down so both lines fit (keep the line break intact) */
  @media(max-width:480px){.hero h1{font-size:33px;letter-spacing:-.5px}}
  .hero p.lede{font-size:16px;color:var(--muted);max-width:32em;margin:20px auto 28px}
  .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .trust{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:22px;font-size:14px;color:var(--muted);flex-wrap:wrap}
  .stars{color:#E0A33E;letter-spacing:1px}
  /* hero gallery — graduated, full-bleed, hover reveals title */
  .hband{margin-top:52px;overflow:hidden}
  .hrow{display:flex;gap:18px;justify-content:center;align-items:center;padding:22px 0 48px}
  .hcard{position:relative;display:block;flex:none;border-radius:16px;background-size:cover;background-position:center;
    background-repeat:no-repeat;transition:transform .22s ease;cursor:pointer}
  .hcard:hover{transform:translateY(-8px)}
  .sz-sm{width:152px;height:300px}
  .sz-md{width:200px;height:418px}
  .sz-lg{width:300px;height:540px}
  .hcap{position:absolute;left:-20px;right:-20px;top:calc(100% + 14px);text-align:center;
    font-size:15px;font-weight:600;color:var(--ink);opacity:0;transform:translateY(-6px);
    transition:opacity .24s ease,transform .24s ease;pointer-events:none}
  .hcard:hover .hcap{opacity:1;transform:translateY(0)}
  /* mobile: Swiper coverflow carousel (smooth momentum + easing + loop). Base slide sizing
     here; Swiper applies the coverflow transforms at runtime. (desktop fan unchanged) */
  @media(max-width:760px){
    .hcap{display:none}
    /* break out of the hero .wrap's 24px padding so the carousel is full-bleed to the screen edges (like the marquee).
       !important overrides Swiper's own .swiper{margin:auto}. */
    .hband{margin-top:40px;width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
    /* neutralize the desktop fan's flex styles once .hrow becomes the Swiper wrapper */
    .hband .swiper-wrapper{justify-content:flex-start;gap:0;padding:0;align-items:center;width:auto}
    .hband .swiper-slide{width:70vw;height:min(64vh,540px);max-width:none}
    .sz-sm,.sz-md,.sz-lg{width:70vw;height:min(64vh,540px)}
    .hrow.intro .hcard{animation:none!important;opacity:1!important}
  }
  /* if Swiper loop clones exist, never show them in the desktop fan */
  @media(min-width:761px){ .hband .swiper-slide-duplicate{display:none} }

  /* hero intro animation */
  .hero.intro h1{animation:copyIn .7s ease both}
  .hero.intro .lede{animation:copyIn .7s ease .12s both}
  .hero.intro .hero-cta{animation:copyIn .7s ease .24s both}
  .hero.intro .trust{animation:copyIn .7s ease .34s both}
  .hrow.intro .hcard{opacity:0}
  .hrow.intro .hcard:nth-child(3){animation:cardPop .75s cubic-bezier(.2,.7,.25,1) .55s both}
  .hrow.intro .hcard:nth-child(2){animation:fanInL .85s cubic-bezier(.2,.8,.25,1) .92s both}
  .hrow.intro .hcard:nth-child(4){animation:fanInR .85s cubic-bezier(.2,.8,.25,1) .92s both}
  .hrow.intro .hcard:nth-child(1){animation:fanInLfar .9s cubic-bezier(.2,.8,.25,1) 1.06s both}
  .hrow.intro .hcard:nth-child(5){animation:fanInRfar .9s cubic-bezier(.2,.8,.25,1) 1.06s both}
  @keyframes copyIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes cardPop{from{opacity:0;transform:translateY(38px) scale(.86)}60%{opacity:1}to{opacity:1;transform:none}}
  @keyframes fanInL{from{opacity:0;transform:translate(165px,-34px) rotate(-7deg) scale(.92)}to{opacity:1;transform:none}}
  @keyframes fanInR{from{opacity:0;transform:translate(-165px,-34px) rotate(7deg) scale(.92)}to{opacity:1;transform:none}}
  @keyframes fanInLfar{from{opacity:0;transform:translate(360px,-46px) rotate(-12deg) scale(.9)}to{opacity:1;transform:none}}
  @keyframes fanInRfar{from{opacity:0;transform:translate(-360px,-46px) rotate(12deg) scale(.9)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){
    .hero.intro h1,.hero.intro .lede,.hero.intro .hero-cta,.hero.intro .trust,.hrow.intro .hcard{animation:none!important;opacity:1!important;transform:none!important}
  }
  @media(max-width:760px){
    .hcap{font-size:12px}
  }

  /* category grid */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:820px){.cats{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.cats{grid-template-columns:1fr}}
  .cat{background:var(--gray);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .12s}
  .cat:hover{transform:translateY(-3px)}
  .cat .ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--ink)}
  .cat h3{margin-bottom:6px}
  .cat p{font-size:14.5px;color:var(--muted)}

  /* personal vs generic (animated) */
  .vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;max-width:920px;margin:0 auto}
  @media(max-width:760px){.vs-grid{grid-template-columns:1fr;gap:14px}}
  .vs-card{border-radius:18px;padding:24px;display:flex;flex-direction:column;min-height:280px}
  .vs-card.generic{background:var(--gray);border:1px solid var(--line)}
  .vs-card.shpiel{background:#231D16;border:1px solid #231D16}
  .vs-tag{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;align-self:flex-start;margin-bottom:16px}
  .vs-tag.clay{color:var(--clay-dark);background:var(--clay-soft);border-color:transparent}
  .vs-text{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--ink);flex:1;margin:0}
  .vs-card.generic .vs-text{color:#928a7d}
  .vs-foot{font-size:12.5px;margin-top:18px}
  .vs-foot.muted2{color:#a89f91}
  .vs-foot.clay{color:var(--clay-dark);font-weight:600}
  .vs-text mark{background:linear-gradient(transparent 58%, var(--gold) 0);color:inherit;font-weight:600;padding:0 1px;border-radius:2px}
  .vs-card.shpiel .vs-text{color:#F3EADB}
  .vs-card.shpiel .vs-tag{background:var(--clay);color:#fff}
  .vs-card.shpiel .vs-foot{color:var(--gold)}
  .vs-card.shpiel .vs-text mark{background:none;color:#EAC079;font-weight:600;text-decoration:underline;text-decoration-color:rgba(224,178,94,.55);text-underline-offset:3px}
  .vs-caret{display:inline-block;width:2px;height:1.05em;background:var(--gold);margin-left:1px;vertical-align:-2px;animation:vsblink .8s steps(2,end) infinite}
  @keyframes vsblink{50%{opacity:0}}
  .vs-badge{align-self:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--muted);box-shadow:var(--shadow)}
  @media(max-width:760px){.vs-badge{width:38px;height:38px;justify-self:center}}
  .swap{animation:vsFade .4s ease}
  @keyframes vsFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  .vs-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:920px;margin:26px auto 0}
  @media(max-width:560px){.vs-tabs{grid-template-columns:1fr}}
  .vs-tab{position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px 17px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;overflow:hidden;transition:border-color .2s}
  .vs-tab:hover{border-color:var(--clay)}
  .vs-tab .n{color:var(--muted);font-size:12px;margin-right:7px}
  .vs-tab.active{background:#231D16;color:#fff;border-color:#231D16}
  .vs-prog{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--clay);z-index:1}
  .vs-tab.active .vs-prog{background:var(--gold)}

  /* divider image */
  .divider{width:100%;margin:18px 0}
  .divider img{width:100%;height:auto;display:block}
  /* how it works: 3 steps */
  .steps3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:8px;margin-top:8px}
  @media(max-width:880px){.steps3{grid-template-columns:1fr;gap:10px}.step-arrow{transform:rotate(90deg)}}
  .step3{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .step-num{width:38px;height:38px;border-radius:11px;background:var(--clay-soft);color:var(--clay-dark);font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-family:var(--serif)}
  .step-ico{width:52px;height:52px;object-fit:contain;display:block;margin-bottom:16px;margin-left:-10px}
  .step-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .step3 h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:8px;line-height:1.16}
  .step3 p{font-size:14.5px;color:var(--muted);line-height:1.55;flex:1}
  .step-arrow{display:flex;align-items:center;justify-content:center;color:var(--clay);font-size:22px;padding:0 4px}
  .step-mock{margin-top:18px;background:var(--gray);border:1px solid var(--line);border-radius:14px;padding:14px}
  .mk-head{font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;margin-bottom:10px}
  .mk-dot{width:14px;height:14px;border-radius:5px;background:var(--ink);display:inline-block}
  .mk-q{font-size:13px;color:var(--muted);margin-bottom:8px}
  .mk-chip{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px;font-weight:600;margin-bottom:7px}
  .mk-chip.sel{background:var(--clay-soft);border-color:var(--clay);color:var(--clay-dark)}
  .mk-tag{font-size:11px;font-weight:600;color:var(--clay-dark);background:var(--clay-soft);border-radius:999px;padding:3px 9px}
  .mk-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding:5px 0}
  .mk-ck{flex:none;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:1px solid var(--line);color:var(--muted)}
  .mk-ck.on{background:var(--green);border-color:var(--green);color:#fff}
  .mk-paper{background:#FCF9F0;border:1px solid #ECE2CE;border-radius:10px;padding:12px 13px;font-family:var(--serif);font-size:13.5px;line-height:1.6;color:#2A241B}
  .mk-hl{background:linear-gradient(transparent 58%, var(--gold) 0);font-weight:600}
  .mk-refine{margin-top:9px;display:inline-block;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px}

  /* every tradition */
  .trad-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 26px;max-width:680px}
  .trad-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:all .18s}
  .trad-pill:hover{border-color:var(--ink)}
  .trad-pill .dot{width:9px;height:9px;border-radius:50%;flex:none}
  .trad-pill.active{background:var(--dark);color:#fff;border-color:var(--dark)}
  .trad-card{max-width:760px;margin:0 auto;background:#FCF9F0;border:1px solid #ECE2CE;border-radius:20px;
    box-shadow:0 18px 50px rgba(60,45,20,.12);padding:34px 38px}
  @media(max-width:600px){.trad-card{padding:26px 22px}}
  .trad-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid #ECE2CE;padding-bottom:14px}
  .trad-name{font-family:var(--serif);font-weight:500;font-size:22px;color:#2A241B}
  .trad-desc{font-size:13.5px;color:#8d7f68}
  .trad-text{font-family:var(--serif);font-size:20px;line-height:1.7;color:#2A241B;min-height:230px}
  @media(max-width:600px){.trad-text{min-height:300px}}
  .trad-text em{font-style:italic;color:var(--clay-dark)}
  .trad-text.swap{animation:vsFade .4s ease}
  .trad-foot{font-size:13px;color:#a89472;margin-top:16px}

  /* testimonials — love wall */
  .lovewall{background:transparent;margin:0 24px;padding:30px 0 54px;overflow:hidden;position:relative}
  .lw-head{position:relative;text-align:center;padding:30px 24px 0;margin-bottom:44px}
  .lw-head h2{position:relative;font-family:var(--serif);color:var(--ink);font-size:48px;line-height:1.02;font-weight:500}
  @media(max-width:600px){.lw-head h2{font-size:34px}}
  .lw-scroller{overflow-x:auto;padding:10px 24px 16px;-ms-overflow-style:none;scrollbar-width:none}
  .lw-scroller::-webkit-scrollbar{display:none}
  .lw-track{display:flex;align-items:flex-start;gap:18px;width:max-content}
  .lw-card{flex:0 0 290px;background:#FBF6E9;color:#26221A;border:1px solid #ECE3CF;border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow)}
  .lw-card:nth-child(odd){margin-top:30px}
  .lw-av{width:62px;height:62px;border-radius:50%;object-fit:cover;margin-bottom:16px;background:#E7DCC5;display:flex;align-items:center;justify-content:center;font-weight:700;color:#8A7350;font-size:21px;flex:none}
  .lw-quote{font-size:15.5px;line-height:1.52;flex:1}
  .lw-by{margin-top:18px;font-size:12.5px;color:#7A6F5C}
  .lw-big{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1040px;margin:34px auto 0;padding:0 24px}
  @media(max-width:760px){.lw-big{grid-template-columns:1fr}}
  .lw-bigcard{background:#21392E;color:#F4EFE2;border-radius:24px;padding:30px 32px 26px;position:relative;display:flex;flex-direction:column;min-height:228px}
  .lw-bigcard h3{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.08;margin:0 0 10px;max-width:13em}
  @media(max-width:600px){.lw-bigcard h3{font-size:25px}}
  .lw-bigcard .sub{font-size:15.5px;line-height:1.5;color:rgba(244,239,226,.84);flex:1}
  .lw-arrow{position:absolute;top:28px;right:30px;color:#CBB46A;font-size:22px;line-height:1}
  .lw-bigby{display:flex;align-items:center;gap:11px;margin-top:22px}
  .lw-bigby .av{width:62px;height:62px;border-radius:50%;background:#33503F;color:#CFE3D3;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:21px;flex:none;object-fit:cover}
  .lw-bigby .nm{font-size:13.5px;font-weight:600;color:#F4EFE2}
  .lw-bigby .role{font-size:12.5px;color:rgba(244,239,226,.62)}
  .lw-note{text-align:center;font-size:11px;color:#B7AF9F;margin-top:28px;padding:0 24px}

  /* dark feature bento */
  .dark-sec{position:relative;overflow:hidden;color:#F3F3F1;border-radius:34px;margin:0 24px;padding:70px 0;
    background-color:#101012;
    background-image:linear-gradient(rgba(11,11,17,.46),rgba(11,11,17,.34)), url('/assets/img/chuppah.png');
    background-size:cover;background-position:center;background-repeat:no-repeat}
  .dark-sec h2,.dark-sec .eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.65)}
  .dark-sec .wrap{max-width:1100px}
  .dark-sec .eyebrow{color:#fff;opacity:.92}
  .dark-sec h2{color:#fff}
  .bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:16px;margin-top:42px}
  @media(max-width:820px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}}
  /* liquid glass cards */
  .bcard{position:relative;background:rgba(255,255,255,.16);
    backdrop-filter:blur(14px) saturate(180%) brightness(1.08);-webkit-backdrop-filter:blur(14px) saturate(180%) brightness(1.08);
    border:none;border-radius:20px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
    box-shadow:0 8px 32px rgba(18,14,30,.22), inset 0 1px 1px rgba(255,255,255,.5), inset 0 4px 22px rgba(255,255,255,.14)}
  .bcard::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
    box-shadow:inset -10px -8px 0 -11px rgba(255,255,255,.85), inset 0 -9px 0 -8px rgba(255,255,255,.85);opacity:.5;filter:blur(1px) brightness(1.1)}
  .bcard>*{position:relative;z-index:1}
  .bcard h3{color:#1d1810;font-size:17px;margin-bottom:4px;text-shadow:none}
  .bcard p{color:#352f25;font-size:13.5px}
  .b-wide{grid-column:span 4}.b-tall{grid-column:span 2;grid-row:span 2}.b-sm{grid-column:span 2}
  @media(max-width:820px){.b-wide,.b-tall,.b-sm{grid-column:span 2;grid-row:auto}}
  .bicon{flex:1;min-height:90px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.12);border:none;border-radius:13px;padding:14px}
  .bicon svg{width:100%;height:auto;max-height:150px}
  .bicon-sm{display:flex;align-items:center;margin-bottom:12px;height:48px}
  .bicon-sm svg{height:48px;width:auto}

  /* agents: chat + cards */
  .agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
  @media(max-width:860px){.agent-grid{grid-template-columns:1fr}}
  .chat{background:var(--gray);border:1px solid var(--line);border-radius:var(--r);padding:22px}
  .bubble{max-width:80%;padding:12px 16px;border-radius:16px;font-size:14.5px;margin:8px 0;line-height:1.5}
  .bubble.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
  .bubble.me{background:var(--ink);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
  .agent-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:480px){.agent-cards{grid-template-columns:1fr}}
  .acard{background:#fff;border:1px solid var(--line);border-radius:var(--rs);padding:18px}
  .acard .ic{width:34px;height:34px;border-radius:9px;background:var(--gray);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
  .acard h3{font-size:15.5px;margin-bottom:4px}
  .acard p{font-size:13px;color:var(--muted)}

  /* stats + testimonials */
  .stats{display:flex;gap:50px;justify-content:center;flex-wrap:wrap;margin-bottom:46px}
  .stat .n{font-family:var(--serif);font-size:48px;font-weight:500;letter-spacing:-1px}
  .stat .l{font-size:14px;color:var(--muted)}
  .quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media(max-width:900px){.quotes{grid-template-columns:1fr 1fr}}
  @media(max-width:540px){.quotes{grid-template-columns:1fr}}
  .quote{background:var(--gray);border:1px solid var(--line);border-radius:var(--rs);padding:20px}
  .quote p{font-size:14.5px;margin-bottom:16px}
  .qwho{display:flex;align-items:center;gap:10px}
  .qav{width:34px;height:34px;border-radius:50%;background:var(--gray2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--muted)}
  .qwho .nm{font-size:13px;font-weight:600}.qwho .rl{font-size:12px;color:var(--muted)}

  /* pricing */
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:38px auto 0;align-items:stretch}
  @media(max-width:680px){.price-grid{grid-template-columns:1fr}}
  .pcard{background:#fff;border:1px solid var(--line);border-radius:28px;padding:12px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
  .pcard-head{position:relative;border-radius:20px;padding:26px 24px 22px;background:linear-gradient(140deg,#F7E9DE 0%,#F1D7C6 44%,#E9C8DF 100%);corner-shape:squircle}
  .pcard.feat .pcard-head{background:linear-gradient(140deg,#FBEBD3 0%,#F1C69C 46%,#E5B2CB 100%)}
  .pname{font-size:15px;font-weight:600;color:var(--ink)}
  .pbadge{position:absolute;top:24px;right:22px;background:rgba(255,255,255,.72);color:#8A5A2B;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;letter-spacing:.03em}
  .pprice{font-family:var(--serif);font-size:54px;font-weight:600;letter-spacing:-1.5px;color:var(--ink);margin:16px 0 0;display:flex;align-items:baseline;gap:6px;line-height:1}
  .pprice .per{font-size:14px;color:#7a6c5d;font-weight:500;font-family:system-ui,sans-serif;letter-spacing:0}
  .pdesc{font-size:15px;color:#5f5344;margin:12px 0 20px;line-height:1.42;max-width:22em}
  .pcard-head .btn{width:100%;justify-content:center}
  .pfeat{list-style:none;margin:0;padding:16px 12px 10px;flex:1}
  .pfeat li{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:14.5px;color:var(--ink);line-height:1.4}
  .pfeat li::before{content:"✓";flex:none;width:22px;height:22px;background:var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff}

  /* faq */
  .faq{max-width:780px;margin:0 auto}
  .qitem{border-top:1px solid var(--line)}
  .qitem:last-child{border-bottom:1px solid var(--line)}
  .qq{width:100%;text-align:left;background:none;border:0;padding:22px 4px;font-size:17px;font-weight:600;
    cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
  .qq .pm{font-size:22px;color:var(--muted);transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .qa{max-height:0;overflow:hidden;opacity:0;color:var(--muted);font-size:15px;padding:0 4px;
    transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s ease,padding .4s cubic-bezier(.22,1,.36,1)}
  .qa>div{transform:translateY(-6px);transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .qitem.open .qa{max-height:320px;opacity:1;padding:0 4px 22px}
  .qitem.open .qa>div{transform:translateY(0)}
  .qitem.open .pm{transform:rotate(45deg)}

  /* included */
  /* auto-scrolling occasion marquee (full bleed, 4:5 image cards) */
  .marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .mtrack{display:flex;gap:18px;width:max-content;animation:scrollx 48s linear infinite}
  .marquee:hover .mtrack{animation-play-state:paused}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
  .mcard{position:relative;display:block;flex:none;width:264px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;cursor:pointer;
    background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .18s ease,box-shadow .18s ease}
  .mcard:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(16,16,18,.22)}
  .mcard .mscrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,12,.8) 2%,rgba(8,8,12,.25) 40%,rgba(8,8,12,0) 70%)}
  .mcard .mlbl{position:absolute;left:16px;right:16px;bottom:15px;z-index:1;color:#fff;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.15}
  @media(max-width:560px){.mcard{width:190px}}

  /* final */
  .final{position:relative;padding:78px 24px;text-align:center;color:var(--ink)}
  .final h2{color:var(--ink);margin-bottom:14px}
  .final p{color:var(--muted);font-size:18px;max-width:30em;margin:0 auto 26px}
  .final .trust{color:var(--muted)}

  /* footer */
  footer{padding:60px 0 36px;background-image:url('/assets/img/footer.png');background-size:cover;background-position:center;color:#fff}
  footer .logo{color:#fff}
  footer .muted{color:rgba(255,255,255,.7)}
  .foot-grid{display:flex;align-items:flex-start;gap:64px;flex-wrap:wrap}
  .foot-cols{display:flex;gap:40px}
  @media(max-width:820px){.foot-grid{gap:36px}}
  .foot-grid h5{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-bottom:14px}
  .foot-grid a{display:block;font-size:14px;color:#fff;opacity:.78;padding:2px 0}
  .foot-grid a:hover{opacity:1}
  .foot-legal{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:22px}
  .foot-legal a{font-size:13px;color:rgba(255,255,255,.7)}
  .foot-legal a:hover{color:#fff}
  .foot-bottom{display:flex;justify-content:space-between;margin-top:14px;font-size:13px;color:rgba(255,255,255,.6);flex-wrap:wrap;gap:10px}
  .ph-note{display:inline-block;background:#FFF4E5;color:#9A6A1B;border:1px solid #F0D9B0;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:middle}

  /* ============ occasion landing pages ============ */
  .lp-hero{padding:70px 0 34px;text-align:center}
  .lp-hero h1{font-size:56px;line-height:1.05;letter-spacing:-1px;max-width:15em;margin:0 auto}
  @media(max-width:760px){.lp-hero h1{font-size:37px;letter-spacing:-.5px}}
  .lp-hero .lede{font-size:17px;color:var(--muted);max-width:34em;margin:22px auto 26px;line-height:1.6}
  .lp-eyebrow{display:block;margin-bottom:10px}
  .lp-roles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:780px;margin:0 auto}
  .lp-role{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .16s,transform .12s;corner-shape:squircle}
  .lp-role:hover{border-color:var(--ink);transform:translateY(-1px)}
  .lp-excerpt{max-width:720px;margin:0 auto;background:#FCF9F0;border:1px solid #ECE2CE;border-radius:20px;padding:34px 40px;font-family:var(--serif);font-size:22px;line-height:1.62;color:#2A241B;box-shadow:0 18px 50px rgba(60,45,20,.10);corner-shape:squircle}
  @media(max-width:600px){.lp-excerpt{padding:26px 24px;font-size:19px}}
  .lp-guide{max-width:780px;margin:0 auto;text-align:center;font-size:16px;color:var(--muted)}
  .lp-guide a{color:var(--clay-dark);text-decoration:underline;font-weight:600}
  .lp-textlink{display:inline-block;color:var(--ink);font-weight:600;font-size:16px;border-bottom:1.5px solid var(--muted);padding-bottom:2px;transition:border-color .16s}
  .lp-textlink:hover{border-color:var(--ink)}
  /* quiet eulogy variant — muted, no urgency */
  .lp-quiet .lp-hero h1{font-weight:500}
  .lp-quiet .lp-guide a,.lp-quiet .lp-excerpt{color:#2A241B}

  /* landing hero with a full-bleed background image + legibility overlay */
  .lp-hero.has-bg{position:relative;color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat;padding:120px 0 96px}
  .lp-hero.has-bg::before{content:"";position:absolute;inset:0;background:rgba(18,14,12,.52);pointer-events:none}
  .lp-hero.has-bg > .wrap{position:relative;z-index:1}
  .lp-hero.has-bg .eyebrow,.lp-hero.has-bg h1,.lp-hero.has-bg .trust{color:#fff}
  .lp-hero.has-bg .lede{color:rgba(255,255,255,.92)}
  .lp-hero.has-bg .btn-dark{background:#fff;color:var(--ink)}
  .lp-hero.has-bg .btn-dark:hover{opacity:.9}
  .lp-hero.has-bg .btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
  @media(max-width:760px){.lp-hero.has-bg{padding:84px 0 68px}}

  /* hero background extends up behind the (transparent) nav; nav text goes light over it */
  .lp-hero-cover .lp-hero.has-bg{margin-top:calc(-1 * var(--navh, 76px));padding-top:calc(var(--navh, 76px) + 58px)}
  .lp-hero-cover nav:not(.scrolled) .navlink{color:#fff;opacity:.92}
  .lp-hero-cover nav:not(.scrolled) .navlink:hover{opacity:1}
  .lp-hero-cover nav:not(.scrolled) .logo img{filter:brightness(0) invert(1)}
  .lp-hero-cover nav:not(.scrolled) .nav-r .btn-light{color:#fff}
  .lp-hero-cover nav:not(.scrolled) .nav-r .btn-dark{background:#fff;color:var(--ink)}

  /* app showcase with floating review cards (parallax) */
  .lp-showcase{padding:72px 0 0;overflow:hidden}
  .showcase-stage{position:relative;max-width:1000px;margin:0 auto}
  .showcase-shot{display:block;width:100%;border-radius:16px 16px 0 0}   /* no drop shadow; capped by divider */
  .float-card{position:absolute;width:250px;background:#FBF6E9;color:#26221A;border:1px solid #ECE3CF;border-radius:18px;padding:16px 18px;box-shadow:0 16px 42px rgba(16,16,18,.18);z-index:2;will-change:transform;transition:transform .08s linear;corner-shape:squircle}
  .float-card .fc-quote{font-size:13.5px;line-height:1.5;margin:0 0 12px}
  .float-card .fc-by{display:flex;align-items:center;gap:9px;font-size:12px;color:#7A6F5C}
  .float-card .fc-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:#E7DCC5;display:flex;align-items:center;justify-content:center;font-weight:700;color:#8A7350;font-size:12px}
  .float-card.fpo{border-style:dashed;opacity:.92}
  .fc-1{top:-26px;right:-34px}
  .fc-2{top:96px;left:-42px}
  .fc-3{bottom:154px;left:-18px}
  .fc-4{bottom:14px;right:-40px}
  @media(max-width:1080px){.fc-1{right:-6px}.fc-2{left:-10px}.fc-3{left:0}.fc-4{right:-8px}}
  @media(max-width:880px){
    .lp-showcase{padding:48px 0 40px}
    .showcase-shot{display:none}                       /* hide the app screenshot on mobile */
    /* turn the review cards into a swipeable carousel in that spot */
    .showcase-stage{max-width:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 16px 14px;scrollbar-width:none}
    .showcase-stage::-webkit-scrollbar{display:none}
    .float-card{position:static;flex:0 0 84%;width:auto;max-width:none;margin:0;scroll-snap-align:center;transform:none!important;box-shadow:var(--shadow)}
  }

  /* sample line: generic-vs-Shpiel, the Shpiel card overlaps + pops forward */
  .sample-vs{display:flex;align-items:center;justify-content:center;max-width:900px;margin:0 auto}
  .sv-card{flex:1 1 0;min-width:0}
  .sample-vs .vs-card{min-height:0}
  .sv-shpiel{margin-left:-46px;z-index:2;box-shadow:0 26px 64px rgba(16,16,18,.26);transform:scale(1.05)}
  @media(max-width:760px){.sample-vs{flex-direction:column;align-items:stretch;max-width:520px;gap:14px}.sv-card{flex:none;width:100%}.sample-vs .vs-card{min-height:0}.sv-shpiel{margin-left:0;transform:none;box-shadow:var(--shadow)}}