/* =============================================================================
   barakahgames.com — the product pages

   ONE STYLESHEET FOR BOTH. /one-step-closer and /one-step-closer-gift are the
   same skeleton filled differently, and two product pages in one store should
   not be two designs. Anything that is true of only one of them is a setting,
   not a rule.

   Chrome, the waitlist and the shared components come from site.css, which
   loads first. Only these pages' sections are here, so the generic names —
   .col, .rows, .decks, .faq — are the product pages' and cannot reach another
   page.
   ============================================================================= */

/* A step below the homepage's display scale: a product page is a document with
   one headline and a lot of specifics under it, not a sequence of statements. */
h1{font-size:clamp(2rem,3.8vw,2.875rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.375rem)}

img{display:block}
.narrow{max-width:44rem}

/* The jump link in the buy column goes to a section a long way down. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.crumb{padding-block:1.25rem .25rem;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--s-ink-3)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--s-head)}

/* ---------- 1 · buy ---------- */
.buy{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(3rem,7vw,5rem)}
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){
  .buy-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
}

/* the gallery */
.gal{display:flex;flex-direction:column;gap:var(--bg-space-sm)}
/* WHITE, not the warm paper tint. Every product photograph is shot on pure
   white, so a tinted stage draws a visible grey box around the object. The
   thumbnails too. Do not "fix" this to --s-ground-2. */
.stage{position:relative;aspect-ratio:4/5;background:var(--s-ground);
  border:var(--bg-hairline) solid var(--s-hair);border-radius:var(--bg-radius);overflow:hidden}
.stage figure{margin:0;position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.875rem;text-align:center;padding:1.5rem}
.stage figure[hidden]{display:none}
/* contain, never cover: cover crops the cast shadow and the object stops
   reading as something resting on the page. */
.stage img,.stage video{width:100%;height:100%;object-fit:contain}
.stage picture{display:block;width:100%;height:100%}
.stage img{transform:translateX(var(--shot-nudge,0))}
.slotmark{display:flex;flex-direction:column;align-items:center;gap:.875rem}
.stage p{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-2);line-height:2;max-width:none}
.stage code{font-family:var(--bg-font-body);font-size:.5625rem;letter-spacing:.1em;
  color:var(--s-ink-2);border:var(--bg-hairline) solid var(--s-hair);
  border-radius:3px;padding:.1875rem .375rem;text-transform:none}

.thumbs{display:flex;gap:.625rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.125rem}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:0 0 auto;width:4.5rem;aspect-ratio:4/5;background:var(--s-ground);
  border:var(--bg-hairline) solid var(--s-hair);border-radius:3px;cursor:pointer;
  padding:0;overflow:hidden;position:relative;
  transition:border-color var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.thumbs button[aria-selected="true"]{border-color:var(--s-head)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.thumbs .tn{position:absolute;inset:0;display:grid;place-items:center;
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--s-ink-2)}
.thumbs .play{position:absolute;inset:0;display:grid;place-items:center;color:var(--s-ink-2)}

/* the buy column — scoped, because .col is also the name of a list column in
   "What arrives" on the gift page, and an unscoped sticky rule made those go
   sticky too at 900px. */
.buy .col{display:flex;flex-direction:column;gap:1.25rem}
@media(min-width:900px){.buy .col{position:sticky;top:2rem;align-self:start}}
.buy .col .lede{font-size:1.0625rem;color:var(--s-ink-2);max-width:30rem}

.priceline{display:flex;align-items:baseline;gap:.875rem;flex-wrap:wrap;
  padding-top:1.125rem;border-top:var(--bg-hairline) solid var(--s-hair);max-width:none}
.priceline b{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  font-size:1.5rem;color:var(--s-head);font-variant-numeric:tabular-nums}
.priceline .when{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--s-accent)}

.buy .btn{padding:1.0625rem 2rem;min-height:54px}
.buy .pill .btn{min-height:48px;padding:.9375rem 1.625rem}

.assure{display:flex;flex-direction:column;gap:var(--bg-space-xs);
  padding-top:1.125rem;border-top:var(--bg-hairline) solid var(--s-hair)}
.assure div{display:flex;gap:.625rem;align-items:baseline;font-size:.875rem;color:var(--s-ink-2)}
.assure b{color:var(--s-ink);font-weight:400}
.jump{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--s-ink-2);
  text-decoration:none;border-bottom:var(--bg-hairline) solid var(--s-hair);
  padding-bottom:.3125rem;align-self:flex-start}
.jump:hover{color:var(--s-head)}

/* ---------- shared section furniture ---------- */
.sec{padding-block:clamp(3rem,7vw,5.5rem);border-top:var(--bg-hairline) solid var(--s-hair)}
.sec-head{display:flex;flex-direction:column;gap:var(--bg-space-md);max-width:44rem;
  margin-bottom:clamp(2rem,4vw,3rem)}

/* ---------- 2 · what they say ---------- */
.says{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem)}
@media(min-width:820px){.says{grid-template-columns:repeat(3,minmax(0,1fr))}}
.says blockquote{margin:0;padding-top:1.125rem;border-top:var(--bg-hairline) solid var(--s-hair);
  display:flex;flex-direction:column;gap:.875rem}
.says q{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  quotes:none;color:var(--s-ink);font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.5}
.says footer{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--s-ink-3)}

/* ---------- 3 · how it works — the one forest band ---------- */
.year{padding-block:clamp(4rem,9vw,7rem)}
.year-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:900px){.year-grid{grid-template-columns:minmax(0,1fr) auto}}
.year-copy{display:flex;flex-direction:column;gap:1.125rem;max-width:36rem}
.year-copy .lede{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-ink);font-size:clamp(1.125rem,2vw,1.4375rem);line-height:1.45;
  max-width:31rem;text-wrap:balance}
.sealed-note{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;margin-top:.25rem;
  padding-top:1.125rem;border-top:var(--bg-hairline) solid var(--s-hair);
  font-size:.875rem;color:var(--s-ink-3);max-width:none}

.moves{display:flex;flex-direction:column;max-width:46rem}
.year-copy .moves{margin-block:.375rem var(--bg-space-xs)}
.move{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--bg-space-md);
  align-items:baseline;padding-block:var(--bg-space-md);
  border-bottom:var(--bg-hairline) solid var(--s-hair)}
.move:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
.move .n{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-accent);font-size:.9375rem;font-variant-numeric:tabular-nums;line-height:1.7}
/* Accent is 3.6:1 on forest and fails AA below 18.66px. These numerals are
   15px. Do not switch them back to --s-accent. */
.on-forest .move .n{color:var(--s-ink-2)}
.move h3{font-family:var(--bg-font-body);font-weight:500;font-size:.875rem;letter-spacing:.04em;
  color:var(--s-ink);margin:0 0 var(--bg-space-2xs);line-height:1.5}
.move p{font-size:.9375rem;line-height:1.6;color:var(--s-ink-2)}

/* the app screenshot — on the band rather than on white, because the app is
   dark and here it needs no device frame to read as a screen. */
.appshot{margin:0;display:flex;flex-direction:column;gap:var(--bg-space-md);
  align-items:center;width:clamp(13rem,26vw,16.5rem);justify-self:center}
.appshot .screen{width:100%;aspect-ratio:9/19.5;border-radius:20px;
  background:var(--s-ground-2);border:var(--bg-hairline) solid var(--s-hair);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.875rem;text-align:center;padding:1.5rem;overflow:hidden}
.appshot .screen > img,.appshot .screen picture img{width:100%;height:100%;
  object-fit:cover;border-radius:19px}
.appshot p{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-ink-2);line-height:2;max-width:none}
.appshot code{font-family:var(--bg-font-body);font-size:.5625rem;letter-spacing:.1em;
  color:var(--s-ink-2);border:var(--bg-hairline) solid var(--s-hair);
  border-radius:3px;padding:.1875rem .375rem}
.appshot figcaption{font-size:.8125rem;color:var(--s-ink-3);text-align:center;max-width:15rem}

/* ---------- 4 · what is in it ----------
   Two layouts, one section: numbered rows on the standard page, two named
   lists on the gift page. */
.rows{display:grid;gap:0 3rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.row{display:flex;gap:var(--bg-space-md);align-items:baseline;padding-block:var(--bg-space-md);
  border-bottom:var(--bg-hairline) solid var(--s-hair);background:none;border-radius:0}
.row b{font-family:var(--bg-font-display);font-weight:var(--bg-weight-display);
  color:var(--s-head);font-size:1rem;min-width:3rem;font-variant-numeric:tabular-nums}
.row p{font-size:.9375rem;max-width:28rem}

.cols{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);margin-top:var(--bg-space-xs)}
@media(min-width:760px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cols .col h3{font-family:var(--bg-font-body);font-weight:500;font-size:.5625rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--s-accent);margin:0 0 var(--bg-space-xs)}
.cols .col ul{list-style:none;margin:0;padding:0}
.cols .col li{padding-block:.875rem;border-bottom:var(--bg-hairline) solid var(--s-hair);
  font-size:.9375rem;color:var(--s-ink-2);line-height:1.55}
.cols .col li:first-child{border-top:var(--bg-hairline) solid var(--s-hair)}
.cols .col li b{color:var(--s-ink);font-weight:500}

/* the message card — the one thing genuinely only on the gift page */
.note{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.75rem;
  border-top:var(--bg-hairline) solid var(--s-hair);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media(min-width:760px){.note{grid-template-columns:auto minmax(0,1fr)}}
.card-mock{width:clamp(9rem,18vw,11rem);aspect-ratio:57/89;
  border:var(--bg-hairline) solid var(--s-hair);border-radius:var(--bg-radius);
  background:var(--s-ground-2);display:flex;flex-direction:column;
  justify-content:flex-end;gap:var(--bg-space-sm);padding:1.25rem;text-align:left}
.card-mock span{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--s-ink-2)}
.card-mock em{font-style:normal;font-family:var(--bg-font-display);
  font-weight:var(--bg-weight-display);color:var(--s-ink);
  font-size:.9375rem;border-bottom:var(--bg-hairline) solid var(--s-hair);
  padding-bottom:.375rem;display:block}
.note-copy{display:flex;flex-direction:column;gap:var(--bg-space-sm);max-width:34rem}

/* the decks, folded in beside the contents rather than standing alone */
.decksline{display:flex;flex-direction:column;gap:var(--bg-space-xs);max-width:40rem;
  margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.5rem;
  border-top:var(--bg-hairline) solid var(--s-hair)}
.decksline p{font-size:.9375rem;color:var(--s-ink-2)}
.decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.4vw,2rem);margin-top:1.75rem}
@media(min-width:900px){.decks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.deck{display:flex;flex-direction:column;gap:var(--bg-space-md);max-width:15rem}
.deck img{width:100%;height:auto;aspect-ratio:57/89;object-fit:contain}
.deck-body{display:flex;flex-direction:column;gap:.4375rem;padding-top:.875rem;
  border-top:var(--bg-hairline) solid var(--s-hair)}
.deck h3{font-family:var(--bg-font-body);font-weight:500;font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--s-ink);margin:0;line-height:1.5}
.deck p{font-size:.875rem;line-height:1.55;color:var(--s-ink-2)}
.only{font-size:.5rem;letter-spacing:.28em;text-transform:uppercase;color:var(--s-accent);
  display:block;margin-top:.125rem}

/* ---------- 5 · the gift cross-sell — standard page only ----------
   White, not the warm paper band: the gift photograph is shot on pure white
   and on cream it reads as a pasted rectangle. The section is distinguished by
   its layout instead of a tint. */
.gift{padding-block:clamp(3rem,7vw,5rem);border-top:var(--bg-hairline) solid var(--s-hair)}
.gift-grid{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:760px){.gift-grid{grid-template-columns:minmax(0,18rem) minmax(0,1fr)}}
.gift .shot{aspect-ratio:4/5;overflow:hidden}
.gift .shot img{width:100%;height:100%;object-fit:contain;transform:translateX(var(--shot-nudge,0))}
.gift .shot picture{display:block;width:100%;height:100%}
.gift-copy{display:flex;flex-direction:column;gap:var(--bg-space-md);max-width:34rem}
.quiet-link{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--s-head);
  text-decoration:none;border-bottom:var(--bg-hairline) solid var(--s-hair);
  padding-bottom:.375rem;align-self:flex-start;margin-top:.375rem;
  transition:border-color var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.quiet-link:hover{border-bottom-color:var(--s-ink-3)}

/* ---------- 6 · faq ---------- */
.faq{max-width:46rem}
.faq details{border-bottom:var(--bg-hairline) solid var(--s-hair)}
.faq details:first-of-type{border-top:var(--bg-hairline) solid var(--s-hair)}
.faq summary{list-style:none;cursor:pointer;padding-block:1.0625rem;
  font-size:.9375rem;color:var(--s-ink);display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:var(--bg-hairline) solid var(--s-ink-3);
  border-bottom:var(--bg-hairline) solid var(--s-ink-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--bg-motion-duration-fast) var(--bg-motion-ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq p{padding-bottom:1.125rem;font-size:.9375rem;color:var(--s-ink-2);max-width:40rem}