/* Hazmoneh — the public site stylesheet. Loaded by every public page: /, /pricing, /designs, the per-simcha pages,
   /legal/*, the 404. Tokens first, then base type, then the components the page blueprints name
   (scratchpad/redesign/DESIGN-SYSTEM.md is the spec; keep the two in step).

   Old-Safari rules (public pages are read on old iPads and filtered phones):
   - no clamp()/min()/max(), no aspect-ratio (padding-top ratio boxes instead), no :is/:where/:has, no CSS nesting,
     no `inset`, no logical properties, no dvh. flex `gap` is never relied on: rows space their children with margins.
   - :focus-visible and backdrop-filter live in their own rules, so a browser that does not know them drops only that rule.
   - mobile first; breakpoints 600 / 760 / 960 / 1100. No dark mode: the parchment ground is the brand.
*/

/* ------------------------------------------------------------------ tokens */
:root{
  /* colour */
  --bg:#f6f3ee;            /* page ground: parchment, flat */
  --bg-2:#efeae1;          /* band / alt ground */
  --paper:#fffdf9;         /* cards, panels, inputs' neighbours */
  --ink:#1f1d1a;           /* text */
  --ink-2:#5f5a52;         /* secondary text */
  --ink-3:#8d867b;         /* captions, placeholders */
  --accent:#2f4a3b;        /* deep green: primary buttons, links */
  --accent-2:#3f6350;      /* hover */
  --accent-soft:rgba(47,74,59,.08);
  --gold:#b4934f;          /* eyebrows, step numerals, the script word */
  --gold-2:#d8c08a;
  --gold-soft:#f3ead6;     /* premium pill ground */
  --line:#e4ddd0;          /* hairlines */
  --line-2:#d3cabb;        /* input borders, stronger rules */
  --danger:#9b2f2f;
  --ok:#2f6b4a;
  --ok-soft:#e7efe9;
  /* one soft tint band per catalogue category, never more than one on a page */
  --tint-ivory:#f7f3ec; --tint-sage:#eef1ea; --tint-blush:#f5ecea; --tint-sky:#e9eef0; --tint-sand:#f1e7d3; --tint-navy:#e8eaef;
  /* type */
  --fd:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --fb:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --fh:'Frank Ruhl Libre','David Libre',Georgia,serif;
  --fs:'Pinyon Script',cursive;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* radii */
  --r-sm:8px; --r:12px; --r-lg:20px; --r-pill:999px;
  /* shadows */
  --sh-1:0 1px 2px rgba(31,29,26,.06);
  --sh-2:0 1px 2px rgba(31,29,26,.06),0 14px 36px -20px rgba(31,29,26,.28);
  --sh-3:0 24px 60px -24px rgba(31,29,26,.45);
  --sh-card:0 1px 2px rgba(0,0,0,.08),0 18px 36px -18px rgba(31,29,26,.45);
  --sh-card-hover:0 1px 2px rgba(0,0,0,.08),0 26px 44px -18px rgba(31,29,26,.5);
  /* layout */
  --w-page:1200px; --w-prose:720px; --w-narrow:560px; --gutter:16px;
  /* motion */
  --t-fast:150ms; --t:220ms; --t-slow:300ms; --ease:cubic-bezier(.2,.7,.2,1);
  /* aliases older pages still use */
  --bg2:#efeae1; --ink2:#5f5a52; --ink3:#8d867b; --line2:#d3cabb; --accent2:#3f6350; --gold2:#d8c08a;
}
@media (min-width:600px){:root{--gutter:24px}}
@media (min-width:1100px){:root{--gutter:32px}}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:500;margin:0;letter-spacing:.01em;line-height:1.1}
h1,.t-1{font-size:40px;line-height:1.08}
h2,.t-2{font-size:32px;line-height:1.12}
h3,.t-3{font-size:24px;line-height:1.2}
h4,.t-4{font-size:20px;line-height:1.25}
.t-display{font-size:42px;line-height:1.06}
p{margin:0}
.lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.small{font-size:14px;line-height:1.5}
.tiny,.caption{font-size:12px;line-height:1.45;color:var(--ink-3)}
.eyebrow{font-family:var(--fb);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Hebrew and Yiddish: the serif face, never tracked */
.he,[lang=he],[lang=yi]{font-family:var(--fh);letter-spacing:0}
[dir=rtl]{letter-spacing:0}
.script{font-family:var(--fs);font-style:normal;color:var(--gold)}
@media (min-width:760px){
  h1,.t-1{font-size:48px;line-height:1.06}
  h2,.t-2{font-size:40px;line-height:1.1}
  h3,.t-3{font-size:28px}
  h4,.t-4{font-size:22px}
  .t-display{font-size:56px}
  .lead{font-size:19px}
}
@media (min-width:1100px){
  .t-display{font-size:64px;line-height:1.04}
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.wrap-prose{max-width:var(--w-prose)}
.wrap-narrow{max-width:var(--w-narrow)}
.section{padding:var(--s8) 0}
.section-tight{padding:var(--s6) 0}
.section-hero{padding:var(--s6) 0 var(--s5)}
@media (min-width:760px){.section{padding:var(--s9) 0}.section-tight{padding:var(--s7) 0}.section-hero{padding:var(--s8) 0 var(--s7)}}
.band{background:var(--bg-2)}
.band-ivory{background:var(--tint-ivory)}.band-sage{background:var(--tint-sage)}.band-blush{background:var(--tint-blush)}.band-sky{background:var(--tint-sky)}.band-sand{background:var(--tint-sand)}.band-navy{background:var(--tint-navy)}
.band-paper{background:var(--paper)}
/* section header: eyebrow, one headline, one lead */
.sec-head{margin-bottom:var(--s6)}
.sec-head .eyebrow{display:block;margin-bottom:var(--s3)}
.sec-head h1,.sec-head h2{margin-bottom:var(--s3)}
.sec-head .lead{margin:0}
.sec-head.center{text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.sec-head.split{display:block}
@media (min-width:760px){
  .sec-head{margin-bottom:var(--s7)}
  .sec-head.split{display:flex;align-items:flex-end;justify-content:space-between}
  .sec-head.split .lead{margin:0}
  .sec-head.split .btn{margin-left:24px;flex:none}
}
.grid{display:grid;grid-gap:var(--s4);gap:var(--s4)}
@media (min-width:600px){.grid-2,.grid-4{grid-template-columns:1fr 1fr}}
@media (min-width:760px){.grid-3{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:1000px){.grid-4{grid-template-columns:1fr 1fr 1fr 1fr}}
/* rows space children with margins (flex gap is not safe on old Safari) */
.row{display:flex;flex-wrap:wrap;align-items:center;margin:-6px}
.row>*{margin:6px}
.row-between{justify-content:space-between}
.stack>*+*{margin-top:var(--s4)}
.mt-1{margin-top:var(--s2)}.mt-2{margin-top:var(--s4)}.mt-3{margin-top:var(--s5)}.mt-4{margin-top:var(--s6)}.mt-5{margin-top:var(--s7)}
.hide-sm{display:none}
@media (min-width:760px){.hide-sm{display:inherit}.only-sm{display:none}}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:0 22px;height:46px;font-size:15px;font-weight:500;letter-spacing:.02em;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.btn:hover{background:#fff;border-color:var(--ink-3);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-pri:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-gold:hover{background:#a5853f;border-color:#a5853f;color:#fff}
.btn-quiet{background:transparent;border-color:transparent;color:var(--accent)}
.btn-quiet:hover{background:var(--accent-soft);border-color:transparent;box-shadow:none}
.btn-danger{color:var(--danger)}
.btn-lg{height:54px;padding:0 30px;font-size:17px}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-block{display:flex;width:100%}
.btn-icon{width:44px;height:44px;padding:0;border-radius:50%}
.btn svg{width:18px;height:18px;flex:none;margin-right:8px}
.btn-icon svg{margin:0}
.btn svg:only-child{margin:0}
[dir=rtl] .btn svg{margin-right:0;margin-left:8px}
.btn[disabled],.btn.disabled{opacity:.55;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;margin:-6px}
.btn-row>*{margin:6px}
.btn-row.center{justify-content:center}

/* ------------------------------------------------------------------ pills, chips, badges */
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--bg-2);color:var(--ink-2);white-space:nowrap;line-height:1}
.pill-free{background:var(--ok-soft);color:var(--ok)}
.pill-premium{background:var(--gold-soft);color:#7a5e23}
.pill-accent{background:var(--accent);color:#fff}
.pill-paper{background:rgba(255,253,249,.92);color:var(--ink-2);box-shadow:var(--sh-1)}
.pill-he{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:13px}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-pill);font-size:14px;color:var(--ink-2);text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1;transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip .n{margin-left:6px;font-size:12px;color:var(--ink-3)}
.chip.on .n{color:rgba(255,255,255,.75)}
.chips{display:flex;flex-wrap:wrap;margin:-4px}
.chips>*{margin:4px}
/* one horizontal line of chips on a phone, scrolls sideways, no scrollbar */
.chips-scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter);scrollbar-width:none}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll>*{margin:0 8px 0 0;flex:none}
@media (min-width:760px){.chips-scroll{flex-wrap:wrap;overflow:visible;margin:-4px;padding:0}.chips-scroll>*{margin:4px}}

/* ------------------------------------------------------------------ design tile (the product) */
/* The thumbnail IS the card (public/thumbs/<id>.webp, 480x672): it floats on the ground with a paper shadow,
   no box around it. Name under, meta under that. The ratio box keeps the grid still before the image lands. */
.tiles{display:grid;grid-template-columns:1fr 1fr;grid-gap:22px 12px;gap:22px 12px}
@media (min-width:600px){.tiles{grid-template-columns:1fr 1fr 1fr;grid-gap:28px 20px;gap:28px 20px}}
@media (min-width:960px){.tiles{grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:36px 24px;gap:36px 24px}}
.tiles-3{grid-template-columns:1fr 1fr}
@media (min-width:600px){.tiles-3{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:960px){.tiles-3{grid-template-columns:1fr 1fr 1fr}}
.tile{display:block;position:relative;text-decoration:none;color:inherit}
.tile .pic{display:block;position:relative;padding-top:140%;background:var(--bg-2);border-radius:6px;overflow:hidden;box-shadow:var(--sh-card);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tile .pic img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.tile .pic::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(31,29,26,.07);pointer-events:none}
.tile:hover .pic{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
.tile .name{display:block;margin-top:12px;font-family:var(--fd);font-weight:500;font-size:20px;line-height:1.2;color:var(--ink)}
.tile .name.he{font-family:var(--fh);font-size:19px}
.tile .meta{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}
.tile .badges{position:absolute;top:10px;left:10px;display:flex;z-index:1}
.tile .badges>*+*{margin-left:6px}
[dir=rtl] .tile .badges{left:auto;right:10px}
[dir=rtl] .tile .badges>*+*{margin-left:0;margin-right:6px}
.tile .heart{position:absolute;top:8px;right:8px;z-index:1;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,253,249,.9);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-1)}
.tile .heart svg{width:18px;height:18px}
.tile .heart.on{color:var(--danger)}
@media (min-width:960px){.tile .name{font-size:22px}.tile .meta{font-size:14px}}
/* a wide tile (per-design page hero, "like this one" rows) */
.tile-lg .pic{border-radius:8px}

/* ------------------------------------------------------------------ simcha chooser */
.simchas{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}
@media (min-width:760px){.simchas{grid-template-columns:1fr 1fr 1fr;grid-gap:16px;gap:16px}}
.simcha{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px 16px;transition:border-color var(--t-fast),box-shadow var(--t) var(--ease),transform var(--t-fast)}
.simcha:hover{border-color:var(--ink-3);box-shadow:var(--sh-2);transform:translateY(-1px)}
.simcha b{display:block;font-family:var(--fd);font-weight:500;font-size:21px;line-height:1.15}
.simcha .he{display:block;margin-top:8px;font-size:17px;line-height:1.4;color:var(--accent);direction:rtl;text-align:left}
[dir=rtl] .simcha .he{text-align:right}
.simcha small{display:block;margin-top:8px;font-size:13px;color:var(--ink-3)}
@media (min-width:760px){.simcha{padding:22px 22px 20px}.simcha b{font-size:24px}.simcha .he{font-size:19px}}

/* ------------------------------------------------------------------ features and steps */
/* features are a list with a small line icon and one headline each — not boxes */
.features{display:grid;grid-gap:32px 40px;gap:32px 40px}
@media (min-width:760px){.features{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.features{grid-template-columns:1fr 1fr 1fr;grid-gap:44px 48px;gap:44px 48px}}
.feature .ic{width:40px;height:40px;color:var(--accent);margin-bottom:14px}
.feature .ic svg{width:30px;height:30px}
.feature h3{font-size:24px;margin-bottom:8px}
.feature p{color:var(--ink-2);font-size:16px;line-height:1.55}
.feature .shot{margin-top:14px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-1)}
.steps{counter-reset:s;display:grid;grid-gap:28px;gap:28px}
@media (min-width:600px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.steps{grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:32px;gap:32px}}
.step{border-top:1px solid var(--line-2);padding-top:18px}
.step::before{counter-increment:s;content:counter(s);display:block;font-family:var(--fd);font-size:44px;line-height:1;color:var(--gold);margin-bottom:12px}
.step h3{font-size:22px;margin-bottom:6px}
.step p{color:var(--ink-2);font-size:15px;line-height:1.55}

/* ------------------------------------------------------------------ proof band */
.proof{display:grid;grid-gap:20px;gap:20px}
@media (min-width:760px){.proof{grid-template-columns:1fr 1fr 1fr;grid-gap:32px;gap:32px}}
.quote{font-family:var(--fd);font-size:22px;line-height:1.3}
.quote cite{display:block;font-family:var(--fb);font-style:normal;font-size:13px;color:var(--ink-3);margin-top:8px}
.counters{display:flex;flex-wrap:wrap}
.counters>*{margin:0 32px 8px 0}
.counters b{display:block;font-family:var(--fd);font-size:34px;font-weight:500;line-height:1}
.counters span{font-size:13px;color:var(--ink-3)}
[dir=rtl] .counters>*{margin:0 0 8px 32px}

/* ------------------------------------------------------------------ pricing */
.plans{display:grid;grid-gap:16px;gap:16px}
@media (min-width:600px){.plans{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.plans{grid-template-columns:1fr 1fr 1fr 1fr;grid-gap:20px;gap:20px}}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px 24px;display:flex;flex-direction:column}
.plan.hi{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh-2)}
.plan .rec{position:absolute;top:-12px;left:24px}
.plan .tier{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.plan .price{font-family:var(--fd);font-size:44px;line-height:1;font-weight:500;margin:12px 0 4px}
.plan .per{font-size:13px;color:var(--ink-3)}
.plan .blurb{margin:14px 0 0;color:var(--ink-2)}
.plan ul{margin:16px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:15px;line-height:1.5;flex:1}
.plan li{position:relative;padding:7px 0 7px 22px;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li::before{content:"";position:absolute;left:1px;top:13px;width:11px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.plan .btn{margin-top:22px;width:100%}
.plan-notes{margin-top:24px;color:var(--ink-2);font-size:14px;line-height:1.55;max-width:80ch}
.plan-notes p{margin:6px 0}

/* ------------------------------------------------------------------ FAQ */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-family:var(--fd);font-size:22px;line-height:1.25;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:24px;margin-left:16px;text-align:center;font-family:var(--fb);font-size:22px;color:var(--gold)}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 20px;color:var(--ink-2);max-width:68ch;line-height:1.55}
[dir=rtl] .faq summary::after{margin-left:0;margin-right:16px}

/* ------------------------------------------------------------------ prose (legal, guides, per-simcha text) */
.prose{max-width:var(--w-prose);font-size:17px;line-height:1.65}
.prose p{margin:0 0 1em}
.prose h2{font-size:28px;margin:40px 0 12px}
.prose h3{font-size:22px;margin:28px 0 8px}
.prose ul,.prose ol{margin:0 0 1em;padding-left:22px}
.prose li{margin:4px 0}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1em}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.prose .meta{color:var(--ink-3);font-size:14px}
.prose dfn{font-style:normal;color:var(--ink-2)}
.prose blockquote{margin:0 0 1em;padding:0 0 0 18px;border-left:2px solid var(--gold);color:var(--ink-2)}
.callout{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px}
.callout .eyebrow{display:block;margin-bottom:8px}
.callout ul{margin:0;padding-left:20px}
.callout li{margin:4px 0}
.toc{columns:2;column-gap:28px;margin:0 0 34px;padding:0;list-style:none;font-size:15px}
.toc li{break-inside:avoid;padding:3px 0;border-bottom:1px solid var(--line)}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--accent)}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:16px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin:0 6px}

/* ------------------------------------------------------------------ forms */
.inp,.sel,.ta{width:100%;border:1px solid var(--line-2);border-radius:var(--r);padding:0 14px;height:48px;background:#fff;font-size:16px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.ta{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inp::placeholder,.ta::placeholder{color:var(--ink-3)}
.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f5a52' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
[dir=rtl] .sel{background-position:left 14px center;padding-right:14px;padding-left:38px}
.inp.he,.ta.he{font-family:var(--fh);font-size:17px;direction:rtl}
.field{display:block;margin-bottom:16px}
.field>label,.lbl{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.field .help{font-size:13px;color:var(--ink-3);margin-top:6px}
.field.error .inp,.field.error .sel,.field.error .ta{border-color:var(--danger)}
.field .err{font-size:13px;color:var(--danger);margin-top:6px}
.check{display:flex;align-items:flex-start;cursor:pointer;font-size:15px}
.check input{width:20px;height:20px;margin:1px 10px 0 0;accent-color:var(--accent);flex:none}
[dir=rtl] .check input{margin:1px 0 0 10px}
.inline-form{display:flex}
.inline-form .inp{flex:1;min-width:0;border-radius:var(--r-pill);padding-left:18px}
.inline-form .btn{margin-left:8px;flex:none}
.notice{border-radius:var(--r);padding:12px 14px;font-size:14px;line-height:1.5;background:var(--gold-soft);border:1px solid #ecdfc3;color:#6b5a2e}
.notice-ok{background:var(--ok-soft);border-color:#cfe0d5;color:var(--ok)}
.notice-warn{background:#fbeaea;border-color:#efc9c9;color:var(--danger)}

/* ------------------------------------------------------------------ segmented control, tabs */
.seg{display:inline-flex;background:var(--bg-2);border-radius:var(--r-pill);padding:3px}
.seg>*{display:inline-flex;align-items:center;border:0;background:transparent;border-radius:var(--r-pill);padding:0 16px;height:36px;font-size:14px;color:var(--ink-2);cursor:pointer;text-decoration:none;white-space:nowrap}
.seg>.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.seg-block{display:flex}
.seg-block>*{flex:1;justify-content:center}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>*{padding:12px 14px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-size:14px;color:var(--ink-2);white-space:nowrap;cursor:pointer;text-decoration:none}
.tabs>.on{color:var(--ink);border-bottom-color:var(--accent)}

/* ------------------------------------------------------------------ cards and panels */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-pad{padding:20px}
@media (min-width:760px){.card-pad{padding:24px 28px}}
.empty{text-align:center;padding:48px 20px;color:var(--ink-2)}
.empty h2{margin-bottom:6px}

/* ------------------------------------------------------------------ sheet / modal */
.veil{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(31,29,26,.45);z-index:60}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--paper);color:var(--ink);border-radius:22px 22px 0 0;padding:14px 20px 24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--sh-3)}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:rgba(0,0,0,.15);margin:0 auto 12px}
.sheet h2{font-size:24px;margin:4px 0 12px}
.sheet .x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
[dir=rtl] .sheet .x{right:auto;left:12px}
@media (min-width:720px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:100%;max-width:560px;border-radius:var(--r-lg);padding:24px 28px 28px;max-height:92vh}
  .sheet .grip{display:none}
}
.sheet-wide{max-width:820px}

/* ------------------------------------------------------------------ site header */
.site-head{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:rgba(246,243,238,.94);border-bottom:1px solid var(--line)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-head{background:rgba(246,243,238,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.site-head .wrap{display:flex;align-items:center;height:60px}
@media (min-width:760px){.site-head .wrap{height:68px}}
.wordmark{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);font-family:var(--fd);font-size:24px;line-height:1;letter-spacing:.01em;white-space:nowrap}
.wordmark svg{width:24px;height:24px;flex:none;color:var(--accent);margin-right:9px}
.wordmark .he{font-size:18px;color:var(--ink-3);margin-left:10px;padding-left:10px;border-left:1px solid var(--line-2);line-height:1;padding-top:2px}
@media (max-width:419px){.wordmark .he{display:none}}
@media (min-width:760px){.wordmark{font-size:27px}.wordmark svg{width:26px;height:26px}.wordmark .he{font-size:20px}}
.site-nav{margin-left:auto;display:flex;align-items:center}
.site-nav .link{display:none;align-items:center;min-height:44px;padding:0 13px;border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;font-size:15px;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.site-nav .link:hover{background:var(--bg-2);color:var(--ink)}
.site-nav .link.on{color:var(--ink)}
.site-nav .signin{display:inline-flex}
.site-nav .btn{margin-left:8px}
@media (max-width:599px){.site-nav .signin{display:none}.site-nav .btn{height:40px;padding:0 14px;font-size:13.5px;margin-left:4px}.wordmark{font-size:22px}.wordmark svg{width:22px;height:22px;margin-right:7px}.wordmark .he{font-size:16px;margin-left:8px;padding-left:8px}.menu{margin-left:0}}
@media (min-width:860px){.site-nav .link{display:inline-flex}.site-nav .btn{margin-left:12px}}
/* phone menu: a <details>, no script needed */
.menu{position:relative;margin-left:4px}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-2)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px;height:22px}
.menu[open] summary{background:var(--bg-2);color:var(--ink)}
.menu .drop{position:absolute;right:0;top:50px;min-width:230px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:8px;z-index:30}
.menu .drop a{display:block;padding:12px 14px;border-radius:var(--r);text-decoration:none;color:var(--ink);font-size:16px}
.menu .drop a:hover{background:var(--bg-2)}
.menu .drop .sep{height:1px;background:var(--line);margin:6px 4px}
@media (min-width:860px){.menu{display:none}}
[dir=rtl] .site-nav{margin-left:0;margin-right:auto}
[dir=rtl] .wordmark svg{margin-right:0;margin-left:9px}
[dir=rtl] .wordmark .he{margin-left:0;margin-right:10px;padding-left:0;padding-right:10px;border-left:0;border-right:1px solid var(--line-2)}
[dir=rtl] .menu .drop{right:auto;left:0}

/* ------------------------------------------------------------------ hero (homepage) */
.hero{padding-top:36px;padding-bottom:28px}
.hero .eyebrow{display:block;margin-bottom:14px}
.hero h1{margin:0 0 18px}
.hero h1 em{font-family:var(--fs);font-style:normal;color:var(--gold);font-size:1.22em;line-height:.9}
.hero .lead{margin-bottom:24px}
.hero .trust{font-size:13px;color:var(--ink-3);margin-top:18px;line-height:1.6}
.hero .quiet{font-size:14px;color:var(--ink-2);margin-top:28px;text-align:center}
.hero .quiet a{color:var(--accent)}
@media (min-width:960px){
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-gap:48px;gap:48px;align-items:center;padding-top:64px;padding-bottom:48px}
  .hero .quiet{text-align:left;grid-column:1 / -1;margin-top:8px}
}
/* the phone mockup; the screen is a ratio box so nothing jumps before the iframe paints */
.phone{position:relative;width:272px;max-width:100%;margin:36px auto 0}
.phone .frame{border-radius:38px;background:#1b1b1b;padding:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.55),inset 0 0 0 2px #3a3a3a}
.phone .screen{position:relative;padding-top:206%;border-radius:28px;overflow:hidden;background:#ede5d6}
.phone .screen iframe,.phone .screen img{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.phone .tap{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:#fff;border-radius:var(--r-pill);padding:9px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 30px -12px rgba(0,0,0,.4);color:var(--ink-2);white-space:nowrap}
@media (max-height:720px) and (max-width:959px){.phone{width:236px}}
@media (min-width:960px){.phone{width:320px;margin:0;justify-self:center}}

/* ------------------------------------------------------------------ gallery page */
.gallery{display:block}
.gallery .side{display:none}
.gallery .side.open{display:block}
.gallery .count{font-size:14px;color:var(--ink-3)}
.gallery .applied{margin:12px 0 20px}
.facet{border-top:1px solid var(--line);padding:12px 0}
.facet summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;padding:4px 0}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"+";color:var(--ink-3)}
.facet[open] summary::after{content:"\2013"}
.facet ul{list-style:none;margin:8px 0 0;padding:0}
.facet li a{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 8px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);font-size:14px}
.facet li a:hover{background:var(--bg-2);color:var(--ink)}
.facet li a.on{background:var(--accent-soft);color:var(--accent);font-weight:500}
.facet li a .n{font-size:12px;color:var(--ink-3)}
.facet li a.he{font-family:var(--fh)}
.filter-bar{position:-webkit-sticky;position:sticky;bottom:16px;z-index:15;display:flex;justify-content:center;margin-top:20px;pointer-events:none}
.filter-bar .btn{pointer-events:auto;box-shadow:var(--sh-3)}
@media (min-width:960px){
  .gallery{display:grid;grid-template-columns:250px minmax(0,1fr);grid-gap:40px;gap:40px;align-items:start}
  .gallery .side{display:block;position:-webkit-sticky;position:sticky;top:88px;max-height:calc(100vh - 100px);overflow:auto}
  .filter-bar{display:none}
}

/* ------------------------------------------------------------------ 404 */
.p404{text-align:center;padding:48px 0}
.p404 p{color:var(--ink-2);max-width:46ch;margin:12px auto 24px}

/* ------------------------------------------------------------------ footer */
.site-foot{border-top:1px solid var(--line);padding:48px 0 56px;color:var(--ink-3);font-size:14px;background:var(--bg)}
.site-foot .cols{display:grid;grid-gap:28px;gap:28px}
@media (min-width:760px){.site-foot .cols{grid-template-columns:1.5fr 1fr 1fr 1fr;grid-gap:32px;gap:32px}}
.site-foot h4{font-family:var(--fb);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px;line-height:1.4}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.site-foot li a:hover{color:var(--accent)}
.site-foot .brand p{margin:12px 0 0;max-width:34ch;color:var(--ink-2);line-height:1.55}
.site-foot .brand .wordmark{font-size:22px}
.site-foot .contact a{color:var(--ink-2);text-decoration:none}
.site-foot .bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;line-height:1.6}
.site-foot .bottom>*{margin:4px 16px 4px 0}
.site-foot .bottom a{color:var(--ink-2);text-decoration:none}
.site-foot .bottom .he{color:var(--ink-3)}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .tile:hover .pic,.simcha:hover,.btn:active{transform:none}
}
@media print{.site-head,.site-foot,.filter-bar,.menu{display:none}body{background:#fff}}