/* SoftSpot Software - shared styles for the product pages (rules copied from the home page so the look matches). */
:root{
  --wood:#6b4a30; --wood-dark:#4a3221; --wood-light:#8a6242;
  --cream:#f2e8cc; --cream-dark:#e4d5ac;
  --ink:#2b1c12; --ink-soft:#3f2c1d;
  --red:#a8433c; --plum:#8b5a73; --slate:#546a8a; --gold:#b8863f;
  --line:rgba(43,28,18,0.14);
}
*{box-sizing:border-box}
html{scroll-padding-top:64px}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif; font-weight:450; line-height:1.65;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;font-variant-numeric:lining-nums}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}
a{color:inherit}

nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:10;
  background:var(--wood-dark); border-bottom:3px solid var(--gold);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;flex-wrap:wrap;gap:10px}
nav .brand{display:flex;align-items:center;gap:10px;color:var(--cream);font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;text-decoration:none}
nav .links{display:flex;gap:14px;flex-wrap:wrap}
nav .links a{color:#d9c9a8;text-decoration:none;font-size:0.88rem}
nav .links a:hover{color:var(--cream)}
nav .brand img{width:34px;height:34px;border-radius:4px}

@media(max-width:700px){
  html{scroll-padding-top:110px} /* nav wraps to two rows on phones */
  nav .links{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:flex-start;width:100%;padding-bottom:2px;
    scrollbar-width:none;
  }
  nav .links::-webkit-scrollbar{display:none}
  nav .links a{flex:0 0 auto;white-space:nowrap}

  /* Edge fades: hint that the row scrolls. Each side fades only while more content lies that way. */
  nav .links{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 40px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 40px),transparent 100%);
  }
  nav .links.at-start{
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
            mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
  }
  nav .links.at-end{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 100%);
  }
  nav .links.at-start.at-end{-webkit-mask-image:none;mask-image:none}
}


.cta-row{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}

.tile-btn{
  display:inline-block;padding:13px 26px;font-weight:600;text-decoration:none;
  border-radius:3px;font-size:0.98rem;border-bottom:3px solid;
  white-space:nowrap;
}
.tile-btn.primary{background:var(--cream);color:var(--ink);border-color:#a8934f}
.tile-btn.ghost{background:transparent;color:var(--cream);border:1px solid #cbb989;border-bottom:1px solid #cbb989}
@media(max-width:420px){
  .tile-btn{font-size:0.78rem;padding:11px 14px}
  .tile-btn-sm{font-size:0.7rem!important;padding:9px 12px!important}
}
.tile-btn-sm{font-size:0.9rem;padding:10px 20px}

section{padding:54px 0;border-bottom:1px solid var(--line)}
h2{font-size:1.7rem;font-weight:600;margin:0 0 8px}
.section-note{color:var(--ink-soft);margin-bottom:28px;max-width:60ch}

.feat-list{display:flex;flex-direction:column;gap:0}
.feat{
  display:grid;grid-template-columns:170px 1fr;gap:20px;
  padding:20px 0;border-top:1px solid var(--line);
}
.feat:first-child{border-top:none}
@media(max-width:600px){.feat{grid-template-columns:1fr;gap:6px}}
.feat .tag{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem}
.feat:nth-child(1) .tag{color:var(--red)}
.feat:nth-child(2) .tag{color:var(--slate)}
.feat:nth-child(3) .tag{color:var(--plum)}
.feat:nth-child(4) .tag{color:#876019} /* darker gold for text legibility (4.6:1 on cream) */
.feat:nth-child(5) .tag{color:var(--wood)}
.feat:nth-child(6) .tag{color:var(--red)}
.feat:nth-child(7) .tag{color:var(--slate)}
.feat:nth-child(8) .tag{color:var(--plum)}
.feat p{margin:0;color:var(--ink-soft)}

.catalog{border-top:1px solid var(--line)}
.cat-item{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:600px){.cat-item{grid-template-columns:1fr;gap:4px}}
.cat-item h3{margin:0;font-size:1.05rem;font-weight:600}
.cat-item p{margin:0;color:var(--ink-soft);font-size:0.93rem}
.catalog-note{margin-top:18px;color:var(--ink-soft);font-size:0.9rem;font-style:italic}

.contact-box{max-width:62ch}
.mail-link{
  display:inline-block;margin-top:14px;font-family:'Fraunces',serif;font-weight:600;
  font-size:1.1rem;color:var(--red);text-decoration:none;border-bottom:2px solid var(--red);
}

footer{padding:30px 0;text-align:center;color:var(--ink-soft);font-size:0.85rem}

/* ================= Product pages ================= */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phero{
  background:
    linear-gradient(180deg, rgba(74,50,33,.93), rgba(74,50,33,.97)),
    repeating-linear-gradient(90deg, var(--wood) 0 3px, var(--wood-light) 3px 6px);
  color:var(--cream); padding:64px 0 58px; border-bottom:3px solid var(--gold);
}
.phero .wrap{display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:44px; align-items:center}
.phero .eyebrow{margin:0 0 10px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#cbb989}
.phero h1{margin:0 0 12px; font-size:2.9rem; font-weight:700; letter-spacing:-.5px; line-height:1.12}
.phero .sub{margin:0 0 16px; font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:1.2rem; color:#e9dcb8}
.phero .lede{margin:0 0 26px; max-width:46ch; color:#eadfc3}
.phero .priceline{margin:18px 0 0; font-size:.92rem; color:#cbb989}
.phero .priceline strong{color:var(--cream); font-weight:600}
.pshot{margin:0}
.pshot img{display:block; width:100%; max-width:420px; height:auto; margin:0;
  border:4px solid var(--cream-dark); box-shadow:0 6px 22px rgba(0,0,0,.4); background:var(--wood-dark)}
@media(max-width:860px){
  .phero{padding:44px 0 44px}
  .phero .wrap{grid-template-columns:1fr; gap:28px}
  .phero h1{font-size:2.3rem}
}
.prose a, .link{color:var(--red); text-decoration:underline; text-underline-offset:2px}
.dict{width:100%; max-width:660px; border-collapse:collapse}
.dict th{padding:8px 10px; text-align:left; font-family:'Fraunces',serif; font-size:.85rem; font-weight:600; color:var(--ink-soft); border-bottom:2px solid var(--wood)}
.dict td{padding:10px; border-bottom:1px solid var(--line)}
.dict td.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.dict th.n{text-align:right}
.dict td.bar{width:44%}
.dict td.bar span{display:block; height:10px; border-radius:2px; background:var(--wood-light)}
@media(max-width:560px){ .dict th.bar, .dict td.bar{display:none} }
.family{max-width:660px; padding:22px 26px; background:var(--cream-dark); border-left:4px solid var(--wood)}
.family h3{margin:0 0 8px; font-size:1.1rem}
.family p{margin:0 0 10px; color:var(--ink-soft)}
.family a{color:#8f332d} /* darker red: 5.4:1 on the tan box (the page red is 4.1:1) */

/* ---- Order card (same look as the Letter Rack 3D card on the home page) ---- */
.purchase{max-width:480px; margin:0 auto; padding:44px 36px; text-align:center; background:var(--wood-dark); color:var(--cream); border-top:4px solid var(--gold)}
.purchase h3{margin:0 0 6px; font-size:1.2rem}
.price{margin:10px 0; font-family:'Fraunces',serif; font-size:2.6rem; font-weight:700; color:#f0dfae}
.pp-trust{display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 12px; padding:7px 14px; border-radius:999px; background:var(--cream); color:var(--ink-soft); font-size:.75rem}
.pp-trust img{display:block; max-width:100%; height:auto}
.pp-trust span{display:inline-flex; align-items:center; gap:6px}
@media(max-width:420px){ .purchase{padding:36px 20px} }
.purchase p{color:#cbb989}
.pp-form{display:inline-grid;justify-items:center;align-content:start;gap:.9rem}
.pp-btn{text-align:center;border:none;border-radius:1.5rem;min-width:11.625rem;padding:0 2rem;height:3.125rem;font-weight:bold;background-color:#FFD140;color:#000;font-family:"Helvetica Neue",Arial,sans-serif;font-size:1.125rem;line-height:1.5rem;cursor:pointer}
.pp-trust .pp-logo{display:block;height:1.2rem;width:auto}
.fine-print{text-align:center;color:var(--ink-soft);font-size:.82rem;max-width:50ch;margin:18px auto 0}
.after-buy{text-align:center;color:var(--ink-soft);margin:12px 0 0}
.no-rule{border-bottom:none}
.center{text-align:center}
.link-inline{color:inherit;text-decoration:underline}

/* ================= Home page (index.html) ================= */
header.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:min(84vh,780px);
  background:var(--wood-dark);
  color:var(--cream); text-align:left;
}
.hero-img{
  position:absolute; inset:0; z-index:-3; opacity:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 36%;
  transition:opacity 1.8s ease-in-out;
}
.hero-img.is-active{opacity:1; z-index:-2}
.hero-img.is-prev{opacity:1; z-index:-3; transition:none} /* outgoing slide stays solid until the next has faded in: no dip to dark */
@media (prefers-reduced-motion:reduce){ .hero-img{transition:none} }
header.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(43,28,18,.52) 0%, rgba(43,28,18,.31) 42%, rgba(43,28,18,0) 68%),
    linear-gradient(0deg, rgba(43,28,18,.94) 0%, rgba(43,28,18,.74) 32%, rgba(43,28,18,.26) 62%, rgba(43,28,18,0) 100%);
}
header.hero .wrap{width:100%; padding-top:140px; padding-bottom:56px}
.hero h1{font-size:3.4rem;font-weight:700;margin:0 0 10px;letter-spacing:-0.5px;text-shadow:0 2px 14px rgba(0,0,0,0.5)}
.hero .sub{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#e9dcb8;font-size:1.25rem;margin-bottom:18px;text-shadow:0 1px 8px rgba(0,0,0,0.5)}
.hero .lede{max-width:52ch;margin:0 0 30px;color:#eadfc3;font-size:1.05rem;text-shadow:0 1px 8px rgba(0,0,0,0.5)}

@media(max-width:700px){
  header.hero{min-height:620px}
  header.hero::after{background:linear-gradient(0deg, rgba(43,28,18,.94) 0%, rgba(43,28,18,.82) 46%, rgba(43,28,18,.52) 74%, rgba(43,28,18,.08) 100%)}
  .hero-img{object-position:50% 30%}
  .hero h1{font-size:2.4rem}
  .hero .sub{font-size:1.05rem}
  header.hero .wrap{padding-top:90px;padding-bottom:40px}
}

.shot{
  width:100%;
  background:var(--wood-light);border:6px solid var(--cream-dark);
  height:170px;object-fit:cover;
  box-shadow:0 3px 8px rgba(0,0,0,0.18);
  display:block;
}

.platforms{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.platforms{grid-template-columns:1fr}}
.plat{background:var(--cream-dark);border-left:4px solid var(--wood);padding:20px 22px}
.plat h3{margin:0 0 8px;font-size:1.15rem}
.plat p{margin:0;color:var(--ink-soft);font-size:0.95rem}
.plat .tag{display:inline-block;margin-top:10px;font-size:0.75rem;background:var(--wood-dark);color:var(--cream);padding:3px 10px;border-radius:2px}

.qa{margin-bottom:22px;max-width:62ch}
.qa h3{margin:0 0 6px;font-size:1.05rem}
.qa p{margin:0;color:var(--ink-soft)}
.qa summary{cursor:pointer;font-weight:600;font-size:1.05rem;padding:2px 0}
.qa summary+p,.qa p+p{margin-top:8px}
.feat.pic{grid-template-columns:300px 1fr;align-items:start}
@media(max-width:600px){.feat.pic{grid-template-columns:1fr}}
.feat.pic .tag{margin-bottom:6px}
.tile-btn.solid{background:var(--wood-dark);color:var(--cream);border-color:var(--gold)}
.cta-strip{text-align:center;padding:30px 16px;border-bottom:1px solid var(--line)}

.video-player{max-width:600px;margin:0 auto}
.video-frame{
  position:relative;border:4px solid var(--cream-dark);
  box-shadow:0 3px 8px rgba(0,0,0,0.18);overflow:hidden;cursor:pointer;
  background:var(--wood-dark);aspect-ratio:16/9;
}
.video-frame video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block}
.video-frame .v-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}

/* Keep the containing frame fullscreen across mobile orientation changes. */
.video-frame:fullscreen,
.video-frame:-webkit-full-screen{
  width:100vw;height:100vh;max-width:none;aspect-ratio:auto;
  border:0;margin:0;background:#000;
}
.video-frame:fullscreen video,
.video-frame:-webkit-full-screen video,
.video-frame:fullscreen .v-poster,
.video-frame:-webkit-full-screen .v-poster{
  width:100%;height:100%;object-fit:contain;
}
.video-frame .v-playicon{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(74,50,33,0.72);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  border:2px solid var(--gold);
}
.video-frame .v-playicon::after{
  content:"";width:0;height:0;margin-left:6px;
  border-top:13px solid transparent;border-bottom:13px solid transparent;
  border-left:20px solid var(--cream);
}
.video-buttons{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.video-btn{
  background:var(--wood-dark);color:var(--cream);border:1px solid var(--gold);
  padding:9px 18px;border-radius:3px;font-size:0.85rem;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.video-btn.active{background:var(--gold);color:var(--ink);font-weight:600}


.zoom{display:block;cursor:zoom-in}
.zoom:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#lr3dLightbox{border:0;padding:0;margin:auto;background:transparent;max-width:98vw;max-height:98vh;overflow:visible}
#lr3dLightbox::backdrop{background:rgba(24,15,9,.92)}
/* Width = whichever is smaller: nearly the whole screen width, or 80% of the screen height at the picture's own shape (--r).
   The browser recalculates this by itself when a phone is turned. dvh = the visible height on phones (ignores the address bar). */
#lr3dLightbox img{display:block;height:auto;width:min(96vw,calc(80vh * var(--r,1.7)));border:4px solid var(--cream-dark);box-shadow:0 10px 40px rgba(0,0,0,.6);background:var(--wood-dark);cursor:zoom-out}
@supports (height:1dvh){#lr3dLightbox img{width:min(96vw,calc(80dvh * var(--r,1.7)))}}
/* Phone on its side: very little height, so drop the caption and give the picture nearly all of it */
@media (max-height:520px){
  #lr3dLightbox .lb-cap{display:none}
  #lr3dLightbox img{width:min(96vw,calc(90vh * var(--r,1.7)))}
  @supports (height:1dvh){#lr3dLightbox img{width:min(96vw,calc(90dvh * var(--r,1.7)))}}
}
#lr3dLightbox .lb-cap{margin:10px auto 0;max-width:70ch;color:#e9dcb8;font-size:.85rem;text-align:center;line-height:1.4}
#lr3dLightbox .lb-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);background:rgba(74,50,33,.88);color:var(--cream);font-size:22px;line-height:1;cursor:pointer}

.video-frame:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn-row{text-align:center;margin-bottom:28px}
.plat-btn{margin-top:14px}
.plat-link{display:inline-block;margin-top:8px;font-size:.85rem;text-decoration:underline}
.plat-link.tight{margin-top:6px}
.fig-android{max-width:600px;margin:32px auto 0}
.fig-android img{display:block;width:100%;height:auto;border:4px solid var(--cream-dark);box-shadow:0 3px 8px rgba(0,0,0,.18)}
.fig-android figcaption{margin-top:10px;text-align:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1rem;color:var(--ink-soft)}
.fig-android p{margin:10px 0 0;text-align:center;font-size:1rem;color:var(--ink-soft)}
.h2-gap{margin-top:44px}
.section-note.after{margin-top:12px}
.before-buy{max-width:560px;margin:0 auto 32px;padding:22px 26px;background:var(--cream-dark);border-left:4px solid var(--wood)}
.before-buy h3{margin:0 0 10px;font-size:1.1rem}
.before-buy p,.before-buy ul{margin:0 0 10px;color:var(--ink-soft)}
.before-buy p:last-child{margin:0}
.before-buy ul{padding-left:20px}
.before-buy li:not(:last-child){margin-bottom:6px}