/* ==========================================================================
   Shotina design system - "Atelier"
   Warm bone paper, deep ink, editorial typography, image-led layout.
   Instrument Sans (workhorse) + Instrument Serif italic (editorial accent).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&display=swap");

:root{
  /* surfaces */
  --paper:#F5F2EC;
  --paper-2:#EDE8DF;
  --paper-3:#E3DDD1;
  --white:#FFFFFF;
  --noir:#111015;
  --noir-2:#1B1922;

  /* text on paper */
  --ink:#16141A;
  --ink-2:#413E48;
  --muted:#7E7986;

  /* text on noir */
  --on-noir:#F3F0EA;
  --on-noir-2:#C9C4CE;
  --muted-noir:#948FA0;

  /* lines */
  --line:#DDD6C9;
  --line-2:#C9C1B1;
  --line-noir:rgba(243,240,234,.16);

  /* accent */
  --clay:#A85433;
  --clay-2:#8B4327;
  --clay-soft:#EFE1D6;

  /* metrics */
  --wrap:1280px;
  --wrap-mid:1080px;
  --wrap-tight:820px;
  --gut:22px;
  --r:3px;               /* images and panels stay near-sharp */
  --r-lg:5px;
  --pill:999px;          /* buttons are fully round, by contrast */
  --pad-sec:clamp(76px,9vw,148px);
  --ease:cubic-bezier(.22,.65,.28,1);
  --shadow:0 40px 90px -50px rgba(22,20,26,.55);
  --shadow-sm:0 20px 50px -34px rgba(22,20,26,.5);
  color-scheme:light;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
/* A class that sets display beats the browser's own [hidden] rule, and the
   support bot's panel does exactly that: .bot-panel{display:flex} kept it on
   screen on every page even though the markup ships it hidden. Anything the
   scripts hide by setting el.hidden relies on this. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}          /* overflow guard */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
::selection{background:var(--ink);color:var(--paper)}

/* ---------------------------------------------------------- typography -- */
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(43px,6.6vw,98px);line-height:.95;letter-spacing:-.045em}
h2{font-size:clamp(31px,4.3vw,60px);line-height:1}
h3{font-size:clamp(20px,1.5vw,24px);font-weight:600;letter-spacing:-.022em;line-height:1.24}
h4{font-size:15px;font-weight:600;letter-spacing:-.01em}

/* the editorial signature: one italic serif word inside a sans headline */
.ser{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.012em}
.hl{color:var(--clay)}

.eyebrow{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.noir .eyebrow{color:var(--muted-noir)}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.58;color:var(--ink-2);max-width:56ch}
.small{font-size:14px;color:var(--muted);line-height:1.55}
.noir .small{color:var(--muted-noir)}

/* ------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap.mid{max-width:var(--wrap-mid)}
.wrap.tight{max-width:var(--wrap-tight)}
.sec{padding-block:var(--pad-sec)}          /* padding-block, never the shorthand */
.sec.sm{padding-block:clamp(52px,6vw,88px)}
.sec.top0{padding-block-start:0}
.noir{background:var(--noir);color:var(--on-noir)}
.noir :where(h1,h2,h3,h4,strong,b){color:var(--on-noir)}
.noir :where(p,li,td,th,span,div){color:var(--on-noir-2)}
.paper-2{background:var(--paper-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.noir .rule{background:var(--line-noir)}

.sec-head{max-width:34ch}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head h2 + .lead{margin-top:20px}
.sec-head.center{margin-inline:auto;text-align:center;max-width:38ch}
.sec-head.center .lead{margin-inline:auto}
.sec-head.wide{max-width:46ch}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.head-row .sec-head{max-width:34ch}

/* ------------------------------------------------------------ buttons -- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-size:15px;font-weight:600;letter-spacing:-.01em;text-align:center;
  padding:14px 27px;border-radius:var(--pill);border:1px solid transparent;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
/* the sliding fill sits BEHIND the label so text never disappears on hover */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .42s var(--ease);
}
.btn:hover::after{transform:translateY(0)}

.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink::after{background:var(--clay)}
.btn-ink:hover{color:#FFF9F4}

.btn-clay{background:var(--clay);color:#FFF6F0}
.btn-clay::after{background:var(--ink)}
.btn-clay:hover{color:var(--paper)}

.btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-line::after{background:var(--ink)}
.btn-line:hover{color:var(--paper);border-color:var(--ink)}

.btn-noir{background:var(--paper);color:var(--ink)}
.btn-noir::after{background:var(--clay)}
.btn-noir:hover{color:#FFF9F4}

.btn-line-noir{background:transparent;color:var(--on-noir);border-color:var(--line-noir)}
.btn-line-noir::after{background:var(--paper)}
.btn-line-noir:hover{color:var(--ink);border-color:var(--paper)}

.btn-lg{padding:16px 32px;font-size:16px}
.btn-sm{padding:10px 19px;font-size:14px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* text link with an underline that wipes in */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:.45em;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  padding-block:9px 8px;
}
.tlink::after{content:"";position:absolute;left:0;bottom:5px;height:1px;width:100%;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform .4s var(--ease)}
.tlink:hover::after{transform-origin:left;transform:scaleX(1)}
.tlink .ar{transition:transform .35s var(--ease)}
.tlink:hover .ar{transform:translateX(4px)}
.noir .tlink{color:var(--on-noir)}

/* --------------------------------------------------------------- nav --- */
.nav{position:fixed;inset:0 0 auto;z-index:80}
.nav::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;
  border-bottom:1px solid transparent;transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.nav.solid::before{opacity:.94;border-bottom-color:var(--line);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.nav-in{position:relative;display:flex;align-items:center;gap:28px;height:74px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:inline-flex;align-items:center;gap:11px;padding-block:6px;font-size:20px;font-weight:600;letter-spacing:-.045em;white-space:nowrap}
.brand .mk{width:27px;height:27px;flex:none}
.brand .mk svg{width:100%;height:100%;display:block}
.nav-links{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav-links a{position:relative;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 14px;
  border-radius:var(--pill);transition:color .3s var(--ease),background .3s var(--ease)}
.nav-links a:hover{color:var(--ink);background:rgba(22,20,26,.055)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::before{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--clay)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .login{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .3s var(--ease)}
.nav-cta .login:hover{color:var(--ink)}

/* burger */
.burger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative;z-index:2}
.burger i{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);transition:transform .38s var(--ease)}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:25px}
body.menu-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* full-screen mobile menu, opacity/visibility only (never parked offscreen) */
.mmenu{
  position:fixed;inset:0;z-index:75;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--gut) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease),visibility .38s var(--ease);
}
body.menu-open .mmenu{opacity:1;visibility:visible;pointer-events:auto}
body.menu-open{overflow:hidden}
.mmenu a.ml{
  display:block;font-size:clamp(27px,7.4vw,40px);font-weight:500;letter-spacing:-.04em;
  padding-block:12px;border-bottom:1px solid var(--line);color:var(--ink);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
body.menu-open .mmenu a.ml{opacity:1;transform:none}
.mmenu a.ml:nth-child(1){transition-delay:.06s}
.mmenu a.ml:nth-child(2){transition-delay:.1s}
.mmenu a.ml:nth-child(3){transition-delay:.14s}
.mmenu a.ml:nth-child(4){transition-delay:.18s}
.mmenu a.ml:nth-child(5){transition-delay:.22s}
.mmenu a.ml:nth-child(6){transition-delay:.26s}
.mmenu a.ml:nth-child(7){transition-delay:.3s}
.mmenu .mfoot{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1040px){
  .nav-links{display:none}
  .nav-cta .login{display:none}
  .nav-in{gap:12px}
  .nav-cta{margin-left:auto}
  .burger{display:block}
}
@media (max-width:520px){
  .nav-cta .btn{display:none}
}

/* mobile sticky bottom bar */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:9px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,242,236,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.sticky-bar .btn{flex:1;padding-block:13px}
@media (max-width:700px){
  .sticky-bar{display:flex}
  body{padding-bottom:72px}
  body.menu-open .sticky-bar{display:none}
}

/* --------------------------------------------------------------- hero -- */
.hero{position:relative;padding-block:clamp(124px,15vw,178px) clamp(38px,5vw,64px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,5vw,72px);align-items:center}
.hero-copy{max-width:660px}
.hero h1{margin-top:22px}
.hero .lead{margin-top:26px;max-width:46ch}
.hero .btn-row{margin-top:34px}
.hero-note{margin-top:22px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.hero-note .dot{width:5px;height:5px;border-radius:50%;background:var(--clay);flex:none}

/* the fan of outputs beside the headline */
.fan{position:relative;aspect-ratio:1/1.02;width:100%}
.fan figure{position:absolute;margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  box-shadow:var(--shadow)}
.fan figure img{width:100%;height:100%;object-fit:cover}
.fan .f1{left:0;top:6%;width:56%;aspect-ratio:4/5;z-index:3;transform:rotate(-3deg)}
.fan .f2{right:2%;top:0;width:44%;aspect-ratio:4/5;z-index:2;transform:rotate(2.5deg)}
.fan .f3{right:0;bottom:2%;width:52%;aspect-ratio:3/2;z-index:4;transform:rotate(-1.5deg)}
.fan .f4{left:8%;bottom:0;width:34%;aspect-ratio:1/1;z-index:5;transform:rotate(3deg)}
.fan .tag{position:absolute;z-index:6;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--pill);padding:6px 13px;font-size:11.5px;font-weight:600;
  box-shadow:var(--shadow-sm);white-space:nowrap}
.fan .tag.t1{left:-2%;top:1%}
.fan .tag.t2{right:5%;bottom:-2%;background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .hero-copy{max-width:none}
  .fan{max-width:500px;margin-inline:auto;aspect-ratio:1/.95}
}
@media (max-width:520px){
  .fan .tag{font-size:10.5px;padding:5px 10px}
  .fan .tag.t1{left:0}
}

/* ------------------------------------------------------------ marquee -- */
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-row{display:flex;width:max-content;gap:var(--mg,14px);animation:marq var(--ms,74s) linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-row > *{flex:none}
.mq-card{position:relative;margin:0;width:clamp(176px,20vw,244px);aspect-ratio:4/5;
  border-radius:var(--r);overflow:hidden;background:var(--paper-3)}
.mq-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mq-card:hover img{transform:scale(1.045)}
.mq-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,11,15,.62),transparent 45%)}
.mq-card figcaption{position:absolute;left:12px;bottom:11px;z-index:2;color:#fff;font-size:12px;font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ------------------------------------------------------------- stats --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats > div{padding:clamp(26px,3.2vw,42px) clamp(16px,2vw,30px);border-left:1px solid var(--line-noir)}
.stats > div:first-child{border-left:0;padding-left:0}
.stats .n{font-size:clamp(34px,4.4vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--on-noir)}
.stats .n .u{font-size:.52em;letter-spacing:-.02em}
.stats .l{margin-top:11px;font-size:13.5px;color:var(--muted-noir);line-height:1.45;max-width:22ch}
@media (max-width:820px){
  .stats{grid-template-columns:1fr 1fr}
  .stats > div{border-left:0;border-top:1px solid var(--line-noir);padding-inline:0}
  .stats > div:nth-child(-n+2){border-top:0}
  .stats > div:nth-child(even){padding-left:22px;border-left:1px solid var(--line-noir)}
}

/* --------------------------------------------- signature: one to many --- */
.o2m{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4.4vw,68px);align-items:start}
.o2m-src{position:sticky;top:104px}
.o2m-src .shot{border-radius:var(--r);overflow:hidden;background:var(--paper-3);aspect-ratio:4/5;border:1px solid var(--line)}
.o2m-src .shot img{width:100%;height:100%;object-fit:cover}
.o2m-src .cap{margin-top:16px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.o2m-src .cap b{color:var(--ink);font-weight:600}
.o2m-out{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.o2m-out figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-3);position:relative;aspect-ratio:4/5}
.o2m-out figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.o2m-out figure:hover img{transform:scale(1.04)}
.o2m-out figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;z-index:2;
  color:#fff;font-size:12.5px;font-weight:600;
  background:linear-gradient(to top,rgba(12,11,15,.66),transparent)}
@media (max-width:900px){
  .o2m{grid-template-columns:1fr;gap:34px}
  .o2m-src{position:static}
  .o2m-src .shot{max-width:320px}
}
@media (max-width:480px){.o2m-out{gap:12px}}

/* ---------------------------------------------------- numbered index --- */
.idx{border-top:1px solid var(--line);margin-top:clamp(34px,4.6vw,58px)}
.noir .idx{border-color:var(--line-noir)}
.idx-row{
  display:grid;grid-template-columns:74px minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(12px,3vw,44px);align-items:start;
  padding-block:clamp(24px,3.2vw,38px);border-bottom:1px solid var(--line);
}
.noir .idx-row{border-color:var(--line-noir)}
.idx-row .num{font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(27px,3vw,40px);line-height:1;color:var(--clay);letter-spacing:-.02em}
.idx-row h3{padding-top:4px}
.idx-row .bd{padding-top:5px;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.noir .idx-row .bd{color:var(--on-noir-2)}
@media (max-width:820px){
  .idx-row{grid-template-columns:50px minmax(0,1fr);row-gap:9px}
  .idx-row .bd{grid-column:2}
}

/* the product panel that pairs with the steps */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden;box-shadow:var(--shadow-sm)}
.panel-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.panel-bar .d{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.panel-bar .t{margin-left:8px;font-size:12px;color:var(--muted)}
.panel-bd{padding:clamp(16px,2vw,24px)}
.panel-stepline{display:flex;gap:6px;margin-bottom:18px}
.panel-stepline span{flex:1;height:2px;background:var(--line);border-radius:2px}
.panel-stepline span.on{background:var(--ink)}
.panel h4{margin-bottom:12px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;font-weight:500;padding:7px 13px;border:1px solid var(--line-2);
  border-radius:var(--pill);color:var(--ink-2);background:var(--white)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.panel-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.panel-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:var(--paper-3)}
.panel-drop{border:1px dashed var(--line-2);border-radius:var(--r);padding:20px;text-align:center;
  color:var(--muted);font-size:13.5px;background:var(--paper)}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:11px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.panel-row b{font-weight:600;color:var(--ink)}

/* ------------------------------------------------------- before/after -- */
.ba{position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-3);
  aspect-ratio:16/10;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .tag{position:absolute;top:16px;z-index:3;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 13px;border-radius:var(--pill)}
.ba .tag.l{left:16px;background:rgba(17,16,21,.72);color:#fff}
.ba .tag.r{right:16px;background:var(--clay);color:#FFF6F0}
.ba .bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper);
  transform:translateX(-50%);z-index:4;pointer-events:none}
.ba .knob{position:absolute;top:50%;left:50%;z-index:5;width:52px;height:52px;border-radius:50%;
  background:var(--paper);transform:translate(-50%,-50%);display:grid;place-items:center;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);pointer-events:none;color:var(--ink);font-size:15px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:6}
@media (max-width:640px){.ba{aspect-ratio:4/3}.ba .knob{width:44px;height:44px}}

/* ------------------------------------------------------------ spreads -- */
.spread{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:center}
.spread + .spread{margin-top:clamp(48px,7vw,104px)}
.spread .ph{grid-column:1;grid-row:1;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--paper-3);aspect-ratio:16/11}
.spread .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.spread:hover .ph img{transform:scale(1.03)}
.spread .bd{grid-column:2;grid-row:1;z-index:2;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(24px,3vw,42px);margin-left:-72px;box-shadow:var(--shadow-sm)}
.spread.rev .ph{grid-column:2}
.spread.rev .bd{grid-column:1;margin-left:0;margin-right:-72px}
.spread .bd .eyebrow{margin-bottom:13px}
.spread .bd p{margin-top:15px;color:var(--ink-2);font-size:15.5px}
.spread .bd .flist{margin-top:20px}
.spread .bd .tlink{margin-top:22px}
.flist li{position:relative;padding-left:22px;padding-block:7px;font-size:14.5px;color:var(--ink-2);
  border-top:1px solid var(--line)}
.flist li:first-child{border-top:0;padding-top:0}
.flist li::before{content:"";position:absolute;left:2px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--clay)}
.flist li:first-child::before{top:9px}
@media (max-width:920px){
  .spread{grid-template-columns:1fr}
  .spread .ph,.spread.rev .ph{grid-column:1;grid-row:1}
  .spread .bd,.spread.rev .bd{grid-column:1;grid-row:2;margin:-40px var(--gut) 0}
}
@media (max-width:520px){
  .spread .bd,.spread.rev .bd{margin-inline:0;margin-top:-24px}
}

/* ------------------------------------------------------- gallery grid -- */
/* Six-column mosaic. Spans always add up to 6, so no row is ever left short. */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gut)}
.mosaic figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--paper-3);grid-column:span 2;aspect-ratio:4/5}
.mosaic figure.wide{grid-column:span 4;aspect-ratio:8/5}
.mosaic figure.half{grid-column:span 3;aspect-ratio:3/2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mosaic figure:hover img{transform:scale(1.045)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:38px 15px 13px;color:#fff;
  font-size:12.5px;font-weight:600;background:linear-gradient(to top,rgba(12,11,15,.68),transparent)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mosaic figure{grid-column:span 2}
  .mosaic figure.wide{grid-column:span 4}
  .mosaic figure.half{grid-column:span 2;aspect-ratio:4/5}
}
@media (max-width:560px){
  .mosaic{grid-template-columns:repeat(2,1fr);gap:12px}
  .mosaic figure,.mosaic figure.wide,.mosaic figure.half{grid-column:span 1;aspect-ratio:4/5}
  .mosaic figure.wide{grid-column:span 2;aspect-ratio:8/5}
}

/* ---------------------------------------------------------- feat rows -- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,72px);border-top:1px solid var(--line)}
.noir .feat{border-color:var(--line-noir)}
.feat > div{padding-block:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--line)}
.noir .feat > div{border-color:var(--line-noir)}
.feat .k{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:15px;color:var(--clay)}
.feat h3{margin-top:8px}
.feat p{margin-top:9px;font-size:14.5px;color:var(--ink-2);max-width:44ch}
.noir .feat p{color:var(--on-noir-2)}
@media (max-width:760px){.feat{grid-template-columns:1fr}}

/* ---------------------------------------------------------- compare ---- */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:17px 18px;text-align:left;border-bottom:1px solid var(--line-noir);vertical-align:top}
.cmp thead th{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-noir);padding-bottom:13px}
.cmp tbody th{font-weight:500;color:var(--on-noir-2);width:26%}
.cmp .old{color:var(--muted-noir)}
.cmp .new{color:var(--on-noir);font-weight:600}
.cmp .colnew{background:rgba(168,84,51,.14)}
.cmp thead .colnew{color:var(--clay-soft)}
@media (max-width:640px){.cmp{min-width:540px}}

/* ------------------------------------------------------------ pricing -- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);align-items:stretch}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);display:flex;flex-direction:column}
.plan.hot{background:var(--noir);border-color:var(--noir);color:var(--on-noir)}
.plan.hot :where(h3,.amt){color:var(--on-noir)}
.plan .tagbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
.plan .badge{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-soft);background:var(--clay);padding:5px 11px;border-radius:var(--pill)}
.plan .amt{margin-top:16px;font-size:clamp(38px,4vw,52px);font-weight:500;letter-spacing:-.045em;line-height:1}
.plan .amt small{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--muted)}
.plan.hot .amt small{color:var(--muted-noir)}
.plan .cr{margin-top:12px;font-size:14.5px;color:var(--ink-2)}
.plan.hot .cr{color:var(--on-noir-2)}
.plan .cr b{font-weight:600;color:var(--ink)}
.plan.hot .cr b{color:var(--on-noir)}
.plan ul{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);flex:1}
.plan.hot ul{border-color:var(--line-noir)}
.plan li{position:relative;padding-left:22px;padding-block:7px;font-size:14.5px;color:var(--ink-2)}
.plan.hot li{color:var(--on-noir-2)}
.plan li::before{content:"";position:absolute;left:3px;top:15px;width:9px;height:5px;
  border-left:1.6px solid var(--clay);border-bottom:1.6px solid var(--clay);transform:rotate(-45deg)}
.plan .btn{margin-top:24px;width:100%}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}

/* Billing period. Two prices for the same plan, so the page carries both and
   swaps between them rather than sending anyone to a second page. Without
   JavaScript the monthly one stays rendered, which is the one the offers in
   the page's structured data quote. */
.billrow{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-bottom:clamp(22px,2.8vw,36px)}
.billtog{display:inline-flex;gap:4px;padding:4px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--pill)}
.billtog button{appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);
  padding:8px 22px;border-radius:var(--pill);
  transition:background .18s ease,color .18s ease}
.billtog button.on{background:var(--noir);color:var(--on-noir)}
.billtog button:focus-visible{outline:2px solid var(--noir);outline-offset:3px}
.billsave{margin:0;font-size:13.5px;color:var(--muted)}

.plan .billed{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.plan.hot .billed{color:var(--muted-noir)}
.plan .amt .was{margin-right:.3em;font-size:.5em;letter-spacing:-.02em;
  color:var(--muted);text-decoration:line-through}
.plan.hot .amt .was{color:var(--muted-noir)}
.plan .amt-word{letter-spacing:-.035em;font-size:clamp(32px,3.2vw,44px)}
.plan .amt .chip{display:inline-block;margin-left:.34em;padding:4px 9px;
  font-size:11px;font-weight:600;letter-spacing:.06em;vertical-align:.45em;
  color:var(--clay-soft);background:var(--clay);border-radius:var(--pill)}
.plan .total{margin-top:9px;font-size:13px;color:var(--muted)}
.plan.hot .total{color:var(--muted-noir)}

.vol{display:block;margin-top:18px}
.vol select{width:100%;appearance:none;-webkit-appearance:none;font:inherit;
  font-size:14.5px;color:var(--ink);background-color:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:11px 38px 11px 14px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231A1720' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.plan.hot .vol select{color:var(--on-noir);background-color:transparent;
  border-color:var(--line-noir);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23F3F0EA' stroke-width='1.6'/%3E%3C/svg%3E")}
.vol select option{color:var(--ink);background:var(--white)}
.vol select:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.plan .vol + .btn{margin-top:14px}
.plan .cr{margin-top:14px}

/* The two things a yearly term buys that a monthly one does not. Botika keeps
   this visible in both views, which is the honest way round: it reads as an
   argument for the yearly plan rather than as something the monthly plan is
   quietly missing. */
.yonly{margin-top:20px;padding:14px 15px;border:1px solid var(--line);
  border-radius:var(--r-lg)}
.plan.hot .yonly{border-color:var(--line-noir)}
.ychip{display:inline-block;padding:3px 9px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--pill)}
.plan.hot .ychip{color:var(--muted-noir);border-color:var(--line-noir)}
.yonly p{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.plan.hot .yonly p{color:var(--on-noir-2)}
.plan.ent .billed{min-height:3.1em}

[dir="rtl"] .vol select{padding:11px 14px 11px 38px;
  background-position:left 14px center}
[dir="rtl"] .plan .amt .was{margin-right:0;margin-left:.3em}
[dir="rtl"] .plan .amt .chip{margin-left:0;margin-right:.34em}

/* --------------------------------------------------------------- faq --- */
.faq{border-top:1px solid var(--line)}
.noir .faq{border-color:var(--line-noir)}
.qa{border-bottom:1px solid var(--line)}
.noir .qa{border-color:var(--line-noir)}
.qa summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;cursor:pointer;
  list-style:none;padding-block:22px;font-size:clamp(17px,1.5vw,20px);font-weight:500;
  letter-spacing:-.02em;line-height:1.35;transition:color .3s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--clay)}
.qa .pm{flex:none;position:relative;width:19px;height:19px;margin-top:5px}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;background:currentColor;
  transition:transform .35s var(--ease),opacity .35s var(--ease)}
.qa .pm::before{left:0;right:0;top:9px;height:1.4px}
.qa .pm::after{top:0;bottom:0;left:9px;width:1.4px}
.qa[open] .pm::after{transform:rotate(90deg);opacity:0}
.qa .a{padding-bottom:24px;max-width:70ch;color:var(--ink-2);font-size:15.5px}
.qa .a p + p{margin-top:12px}

/* --------------------------------------------------------------- misc -- */
.quote{max-width:24ch;font-size:clamp(26px,3.4vw,46px);font-weight:400;letter-spacing:-.035em;line-height:1.12}
.quote .ser{color:var(--clay)}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.kv > div{border-top:1px solid var(--line);padding-top:20px}
.noir .kv > div{border-color:var(--line-noir)}
.kv .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.noir .kv .k{color:var(--muted-noir)}
.kv .v{margin-top:10px;font-size:15.5px;color:var(--ink-2)}
.noir .kv .v{color:var(--on-noir-2)}
@media (max-width:700px){.kv{grid-template-columns:1fr}}

.cta-band{padding-block:clamp(64px,7vw,104px)}
.cta-band .band-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(24px,4vw,60px);align-items:end}
.cta-band h2{max-width:14ch}
.cta-band .btn-row{justify-content:flex-end}
@media (max-width:820px){
  .cta-band .band-in{grid-template-columns:1fr}
  .cta-band .btn-row{justify-content:flex-start}
}

/* page hero for subpages */
.phero{padding-block:clamp(120px,14vw,164px) clamp(28px,4vw,52px)}
.phero .phero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(20px,4vw,56px);align-items:end}
.phero h1{margin-top:18px;max-width:16ch}
@media (max-width:860px){.phero .phero-in{grid-template-columns:1fr;gap:20px}}

.crumbs{font-size:12.5px;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{padding-inline:7px;opacity:.6}

/* prose for legal and article pages */
.prose{max-width:72ch}
.prose h2{font-size:clamp(24px,2.4vw,32px);margin-top:52px}
.prose h3{margin-top:34px}
.prose p,.prose li{color:var(--ink-2);font-size:16px;line-height:1.7}
.prose p{margin-top:16px}
.prose ul{margin-top:16px}
.prose li{position:relative;padding-left:20px;padding-block:5px}
.prose li::before{content:"";position:absolute;left:2px;top:15px;width:5px;height:5px;border-radius:50%;background:var(--clay)}
.prose a{color:var(--clay);text-decoration:underline;text-underline-offset:3px}

/* form */
.form{display:grid;gap:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--white);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .3s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);outline:none}
.field textarea{min-height:150px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.two{grid-template-columns:1fr}}

/* ------------------------------------------------------------- footer -- */
footer.ft{background:var(--noir);color:var(--on-noir);padding-block:clamp(50px,5.5vw,78px) 0}
.ft-top{display:grid;grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,44px)}
.ft-top .brand{color:var(--on-noir)}
.ft-note{margin-top:14px;font-size:14px;color:var(--muted-noir);max-width:32ch;line-height:1.6}
.ft-cta{margin-top:20px}
.ft-top h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-noir);margin-bottom:14px}
.ft-top li a{display:inline-block;padding-block:7px;font-size:14.5px;color:var(--on-noir-2);
  transition:color .3s var(--ease)}
.ft-top li a:hover{color:var(--clay-soft)}

/* language switcher */
.lang{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-noir);
  border-radius:var(--pill);padding:3px}
.lang a{padding:10px 16px;border-radius:var(--pill);font-size:13px;font-weight:600;
  color:var(--muted-noir);transition:background .3s var(--ease),color .3s var(--ease)}
.lang a:hover{color:var(--on-noir)}
.lang a[aria-current]{background:var(--paper);color:var(--ink)}

/* the closing wordmark, sized to fill the full width on purpose */
/* Decorative wordmark. pointer-events:none is load bearing: it sits under the
   footer content and its huge line box would otherwise swallow clicks meant for
   the language picker. */
.ft-word{margin-top:clamp(40px,5vw,66px);border-top:1px solid var(--line-noir);
  padding-top:clamp(22px,2.6vw,34px);overflow-x:clip;pointer-events:none}
/* The cap matters: .wrap stops growing at 1280px, so past a ~1440px viewport a
   vw-only size keeps growing past its container and the word gets sliced to
   "SHOT". 294px is 20.4vw at 1440, where the two line up. */
/* Pinned to the Latin face on purpose. It is the brand name in Latin letters,
   so it must look the same in every language, and inheriting a script face
   (Vazirmatn was 30px taller here) bleeds past the footer and adds a pale strip
   under it. */
.ft-word .big{font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:min(20.4vw,294px);line-height:.78;font-weight:500;letter-spacing:-.055em;
  color:var(--on-noir);opacity:.11;user-select:none;white-space:nowrap;text-align:center}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:16px 26px;flex-wrap:wrap;
  padding-block:20px 24px;font-size:13px;color:var(--muted-noir)}
.ft-bot a:hover{color:var(--clay-soft)}
.ft-bot .lgl{display:flex;gap:20px;flex-wrap:wrap}
.ft-bot .lgl a{display:inline-block;padding-block:8px}
@media (max-width:860px){.ft-top{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media (max-width:520px){
  .ft-top{grid-template-columns:1fr}
  .ft-word .big{font-size:23vw}
}

/* ------------------------------------------------------------ reveal --- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.07s}
.js .rv.d2{transition-delay:.14s}
.js .rv.d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .marquee-row{animation:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ------------------------------------------- steps paired with a panel -- */
.how-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(26px,4vw,46px)}
@media (max-width:900px){
  .how-grid{grid-template-columns:1fr;gap:34px}
  .how-grid .panel{max-width:460px}
}

/* -------------------------------- comparison table, stacked on mobile --- */
@media (max-width:700px){
  .cmp{min-width:0;display:block}
  .cmp caption{display:block}
  .cmp thead{display:none}
  .cmp tbody{display:block}
  .cmp tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;
    padding-block:18px;border-bottom:1px solid var(--line-noir)}
  .cmp tbody th{grid-column:1 / -1;width:auto;padding:0 0 10px;border:0;
    font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-noir)}
  .cmp td{padding:0;border:0;font-size:14.5px;line-height:1.45}
  .cmp td::before{content:attr(data-l);display:block;margin-bottom:6px;
    font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-noir)}
  .cmp .colnew{background:none}
  .cmp .new{color:var(--clay-soft)}
  .cmp .new::before{color:var(--clay)}
}

/* ------------------------------------------------ pricing period note --- */
.price-note{margin-top:22px;text-align:center}

/* ------------------------------------------------------- contact grid -- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:38px}}

/* --------------------------------------------------------- shot recipes */
.recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.recipe{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-3);position:relative;aspect-ratio:4/5}
.recipe img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.recipe:hover img{transform:scale(1.045)}
.recipe figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:44px 16px 15px;color:#fff;
  background:linear-gradient(to top,rgba(12,11,15,.72),transparent)}
.recipe figcaption b{display:block;font-size:14.5px;font-weight:600;color:#fff}
.recipe figcaption span{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.8)}
@media (max-width:860px){.recipes{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.recipes{gap:12px}}

/* rows that are links (404 index) */
a.idx-row{transition:background .35s var(--ease),padding-left .35s var(--ease)}
a.idx-row:hover{background:var(--paper-2);padding-left:10px}
a.idx-row:hover h3{color:var(--clay)}

/* larger touch areas for the small utility links */
.ft-bot .lgl a{display:inline-block;padding-block:8px}
.crumbs a{display:inline-block;padding-block:7px}
.crumbs{margin-block:-7px}

/* ------------------------------- multi-product before / after switcher -- */
.ba-wrap{margin-top:clamp(26px,3.4vw,44px)}
.ba-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(18px,2.2vw,26px)}
.ba-tab{position:relative;display:flex;align-items:center;gap:9px;padding:6px 15px 6px 6px;
  border:1px solid var(--line-2);border-radius:var(--pill);background:transparent;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.ba-tab img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--paper-3);flex:none}
.ba-tab:hover{border-color:var(--ink);color:var(--ink)}
.ba-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ba-panel{display:none}
.ba-panel.on{display:block}
@media (max-width:560px){
  .ba-tabs{gap:7px}
  .ba-tab{padding:5px 12px 5px 5px;font-size:12.5px;gap:7px}
  .ba-tab img{width:26px;height:26px}
}

/* skip link: hidden without leaving the page, in either direction */
.skip{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;z-index:200}
.skip:focus{width:auto;height:auto;clip-path:none;inset-block-start:12px;inset-inline-start:12px;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:var(--r);
  font-size:14px;font-weight:600}

/* ==========================================================================
   RTL / Persian
   The layout is built with physical properties, so the direction flip is
   handled here in one place rather than rewriting every rule.
   ========================================================================== */
:root{--fa:"Instrument Sans",system-ui,sans-serif}

/* per-script typefaces, chosen by the html lang attribute */
html[lang="fa"]{--fa:"Vazirmatn","Instrument Sans",system-ui,sans-serif}
html[lang="ar"]{--fa:"Noto Sans Arabic","Instrument Sans",system-ui,sans-serif}
html[lang="ru"]{--fa:"Noto Sans","Instrument Sans",system-ui,sans-serif}
html[lang="zh"]{--fa:"Noto Sans SC","Instrument Sans",system-ui,sans-serif}
html[lang="hi"]{--fa:"Noto Sans Devanagari","Instrument Sans",system-ui,sans-serif}
html:where([lang="fa"],[lang="ar"],[lang="ru"],[lang="zh"],[lang="hi"]) :where(body,h1,h2,h3,h4,.btn,.eyebrow){font-family:var(--fa)}
html:where([lang="zh"],[lang="hi"]) :where(h1,h2,h3,h4){letter-spacing:0;line-height:1.3}

[dir="rtl"] body{font-size:16px;line-height:1.85}
[dir="rtl"] :where(h1,h2,h3,h4){letter-spacing:0;line-height:1.35}
[dir="rtl"] h1{font-size:clamp(32px,5.2vw,66px);line-height:1.25}
[dir="rtl"] h2{font-size:clamp(25px,3.4vw,44px);line-height:1.3}
[dir="rtl"] h3{font-size:clamp(18px,1.4vw,21px)}
[dir="rtl"] .lead{font-size:clamp(16px,1.25vw,18px);line-height:1.9}
[dir="rtl"] .eyebrow{letter-spacing:0;font-size:12px}
[dir="rtl"] .btn{font-size:14.5px;letter-spacing:0}
/* the italic serif accent has no Persian equivalent, so it becomes a colour accent */
html:where([lang="fa"],[lang="ar"],[lang="ru"],[lang="zh"],[lang="hi"]) .ser{
  font-family:var(--fa);font-style:normal;font-weight:600;color:var(--clay)}
html:where([lang="fa"],[lang="ar"],[lang="ru"],[lang="zh"],[lang="hi"]) .noir .ser{color:var(--clay-soft)}

/* numerals and latin fragments stay left to right inside Persian text */
[dir="rtl"] .num,[dir="rtl"] .feat .k,[dir="rtl"] .stats .n,[dir="rtl"] .plan .amt{direction:ltr;unicode-bidi:isolate}

/* mirrored spacing */
[dir="rtl"] .flist li,[dir="rtl"] .plan li,[dir="rtl"] .prose li{padding-left:0;padding-right:22px}
[dir="rtl"] .flist li::before{left:auto;right:2px}
[dir="rtl"] .plan li::before{left:auto;right:3px;transform:rotate(45deg) scaleX(-1)}
[dir="rtl"] .prose li::before{left:auto;right:2px}
[dir="rtl"] .stats > div{border-left:0;border-right:1px solid var(--line-noir)}
[dir="rtl"] .stats > div:first-child{border-right:0;padding-left:clamp(16px,2vw,30px);padding-right:0}
[dir="rtl"] .cmp th,[dir="rtl"] .cmp td{text-align:right}
[dir="rtl"] .nav-links a[aria-current="page"]::before{left:14px;right:14px}
[dir="rtl"] .burger{margin-right:0;margin-left:-10px}
[dir="rtl"] .tlink:hover .ar{transform:translateX(-4px)}
[dir="rtl"] .tlink .ar{transform:scaleX(-1)}
[dir="rtl"] .tlink:hover .ar{transform:scaleX(-1) translateX(4px)}

/* spreads: the copy card overlaps from the other side */
[dir="rtl"] .spread .bd{margin-left:0;margin-right:-72px}
[dir="rtl"] .spread.rev .bd{margin-right:0;margin-left:-72px}
@media (max-width:920px){
  [dir="rtl"] .spread .bd,[dir="rtl"] .spread.rev .bd{margin-inline:var(--gut)}
}
@media (max-width:520px){
  [dir="rtl"] .spread .bd,[dir="rtl"] .spread.rev .bd{margin-inline:0}
}

/* hero collage mirrors */
[dir="rtl"] .fan .f1{left:auto;right:0}
[dir="rtl"] .fan .f2{right:auto;left:2%}
[dir="rtl"] .fan .f3{right:auto;left:0}
[dir="rtl"] .fan .f4{left:auto;right:8%}
[dir="rtl"] .fan .tag.t1{left:auto;right:-2%}
[dir="rtl"] .fan .tag.t2{right:auto;left:5%}

/* captions and overlays */
[dir="rtl"] .mq-card figcaption{left:auto;right:12px}
[dir="rtl"] .o2m-src{direction:rtl}
[dir="rtl"] .ba{direction:ltr}
[dir="rtl"] .ft-word .big{direction:ltr}

/* the marquee keeps travelling the same way, it is decoration not reading */
[dir="rtl"] .marquee-row{direction:ltr}

/* ------------------------------------------------------ language picker -- */
.langpick{position:relative;display:inline-block}
.langpick summary{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  border:1px solid var(--line-noir);border-radius:var(--pill);
  padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--on-noir-2);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease)}
.langpick[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.langpick summary:hover{border-color:var(--on-noir-2);color:var(--on-noir)}
.langlist{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:60;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
  /* max-content sizes the box to three equal columns of the widest label;
     without it the 1fr tracks collapse, since the box is position:absolute */
  width:max-content;max-width:calc(100vw - 40px);
  background:var(--noir-2);border:1px solid var(--line-noir);border-radius:var(--r-lg);
  padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
/* flipped by JS when the panel would run past the bottom of the viewport */
.langpick[data-drop="up"] .langlist{top:auto;bottom:calc(100% + 8px)}
.langlist a{
  padding:9px 12px;border-radius:var(--r);font-size:13.5px;color:var(--on-noir-2);
  white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease)}
.langlist a:hover{background:rgba(243,240,234,.09);color:var(--on-noir)}
.langlist a[aria-current]{background:var(--paper);color:var(--ink);font-weight:600}
@media (max-width:640px){.langlist{grid-template-columns:1fr 1fr}}
@media (max-width:380px){.langlist{grid-template-columns:1fr}}

/* ===== Free trial page =============================================== */
/* The visitor is here to see their own product, so the upload area is the
   biggest thing on the page and the results replace it in the same column. */
.try-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(22px,3.4vw,46px);align-items:start}
.drop{border:1px dashed var(--line-2,#ccc);border-radius:14px;min-height:230px;
  display:grid;place-items:center;text-align:center;padding:22px;cursor:pointer;
  background:var(--soft,#f7f6f3);transition:border-color .16s,background .16s}
.drop:hover,.drop.over,.drop:focus-visible{border-color:var(--clay,#A85433);
  background:#fff}
.drop:focus-visible{outline:2px solid var(--clay,#A85433);outline-offset:3px}
.drop #ty-preview{display:none;max-height:330px;border-radius:8px}
.drop strong{display:block;font-size:16px;margin-bottom:5px}
#ty-size{margin-top:9px}
#ty-size.ok{color:#2C6E4F}
#ty-size.warn{color:#A85433}

.try-out{margin-top:clamp(34px,4.6vw,62px);border-top:1px solid var(--line,#e6e3dc);
  padding-top:clamp(24px,3vw,38px)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;margin-top:18px}
.shots .shot{margin:0;border:1px solid var(--line,#e6e3dc);border-radius:10px;
  overflow:hidden;background:#fff}
.shots .shot img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.shots .shot .ph{width:100%;aspect-ratio:1/1;background:
  linear-gradient(100deg,#eee 30%,#f6f6f6 50%,#eee 70%);background-size:220% 100%;
  animation:shim 1.5s linear infinite}
@keyframes shim{to{background-position:-220% 0}}
.shots .shot figcaption{padding:9px 11px;font-size:12.5px;
  color:var(--muted,#7a766e);border-top:1px solid var(--line,#e6e3dc)}

.try-cta{margin-top:clamp(22px,3vw,36px);border:1px solid var(--line,#e6e3dc);
  border-radius:16px;padding:clamp(20px,2.6vw,30px);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--soft,#f7f6f3)}
.try-cta h3{margin:0 0 7px;font-size:clamp(19px,2.1vw,25px)}
.try-cta p{margin:0;max-width:56ch;color:var(--muted,#7a766e)}

@media (max-width:860px){
  .try-grid{grid-template-columns:1fr}
  .try-cta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.shots .shot .ph{animation:none}}
/* An error under the button has to stop looking like the helper text that was
   already there, or nobody notices the form refused them. */
.note-bad{margin-top:10px;padding:11px 14px;border-radius:10px;
  background:#FBE7E5;color:#8C2F27;border:1px solid #E7B5AE;font-size:13.5px;
  line-height:1.55}

/* ===== Free trial: the worked example ================================ */
/* One photo in, five out, then those five sitting in a product page the way
   they will on the visitor's own shop. Shown before the form asks for an
   email, because that is a lot of trust to ask with nothing in return. */
.ex-head{max-width:62ch;margin-bottom:clamp(22px,3vw,36px)}
.ex-head h2{margin:10px 0 12px}
.ex-flow{display:grid;grid-template-columns:minmax(0,.9fr) 48px minmax(0,2.4fr);
  gap:clamp(14px,2vw,26px);align-items:center;
  margin-bottom:clamp(30px,4vw,54px)}
.ex-in{margin:0}
.ex-in img{width:100%;border-radius:12px;display:block}
.ex-in figcaption{margin-top:10px;font-size:13px;color:var(--muted,#7a766e);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{background:var(--ink,#141317);color:#fff;border-radius:999px;
  padding:3px 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ex-arrow{color:var(--line-2,#c9c5bc);display:grid;place-items:center}
.ex-arrow svg{width:44px;height:16px}
/* Three columns for the three shots a trial returns, so the row fills. */
.ex-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ex-out figure{margin:0}
.ex-out img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  display:block}

/* One block per category. A visitor selling rings should not have to take a
   rug's word for it, so all three are on the page rather than behind a tab. */
.ex-cats{display:grid;gap:clamp(26px,3.4vw,44px)}
.ex-cat{padding-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--line,#e6e3dc)}
.ex-cat:first-child{padding-top:0;border-top:0}
.ex-cat-head{max-width:64ch;margin-bottom:clamp(14px,2vw,22px)}
.ex-cat-head h3{margin:0 0 6px;font-size:clamp(17px,1.7vw,21px)}
.ex-cat-head p{margin:0;color:var(--muted,#7a766e);font-size:15px;line-height:1.7}
.ex-cat .ex-flow{margin-bottom:0}
/* The grid reverses itself in Arabic and Persian, so the arrow has to as
   well or it points back at the photograph it came from. */
[dir="rtl"] .ex-arrow svg{transform:scaleX(-1)}

.shopcard{border:1px solid var(--line,#e6e3dc);border-radius:16px;overflow:hidden;
  background:#fff;box-shadow:0 22px 50px -34px rgba(20,19,23,.42)}
.shopcard-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;
  background:var(--soft,#f2f0eb);border-bottom:1px solid var(--line,#e6e3dc)}
.shopcard-bar i{width:9px;height:9px;border-radius:50%;background:#d9d5cd}
.shopcard-bar span{margin-inline-start:12px;font-size:12px;
  color:var(--muted,#7a766e);background:#fff;border-radius:6px;padding:3px 12px;
  border:1px solid var(--line,#e6e3dc)}
.shopcard-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);padding:clamp(20px,3vw,36px)}
.shopcard-gal img{width:100%;border-radius:10px;display:block}
.shopcard-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  margin-top:10px}
.shopcard-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:7px;border:1px solid var(--line,#e6e3dc)}
.sc-brand{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted,#7a766e);margin:0 0 8px}
.shopcard-txt h3{margin:0 0 10px;font-size:clamp(20px,2.3vw,27px)}
.sc-price{font-size:20px;margin:0 0 14px}
.sc-desc{color:var(--muted,#7a766e);margin:0 0 20px;max-width:44ch}
.sc-btn{display:inline-block;background:var(--ink,#141317);color:#fff;
  border-radius:999px;padding:11px 26px;font-size:14px;font-weight:600}
.sc-note{margin:16px 0 0;font-size:12.5px;color:var(--muted,#7a766e)}

@media (max-width:900px){
  .ex-flow{grid-template-columns:1fr;gap:16px}
  .ex-arrow{transform:rotate(90deg);height:34px}
  .shopcard-in{grid-template-columns:1fr}
}
/* What the checker noticed about the uploaded photo. Advice, not an error, so
   it is warm rather than red: the photos still arrived. */
.photo-tips{margin:16px 0 4px;border:1px solid #E3D3B8;background:#FBF4E7;
  border-radius:12px;padding:15px 18px}
.photo-tips b{display:block;font-size:13.5px;margin-bottom:8px}
.photo-tips ul{margin:0;padding-inline-start:18px}
.photo-tips li{font-size:13.5px;line-height:1.6;color:var(--ink-2,#4a4740);
  margin-bottom:6px}
.photo-tips li:last-child{margin-bottom:0}

/* ---- help centre ------------------------------------------------------- */
.hc-search{max-width:560px;margin:0 auto 34px}
.hc-search input{width:100%;padding:14px 18px;font:inherit;font-size:16px;
  border:1px solid var(--line-2,#E2E2E6);border-radius:12px;background:#fff}
.hc-search input:focus{outline:2px solid var(--ink,#141317);outline-offset:1px}
.hc-count{margin:8px 2px 0;font-size:13px;color:var(--muted,#7a766e)}
.hc{max-width:780px;margin:0 auto}
.hc-group{margin-bottom:38px}
.hc-group h2{font-size:clamp(19px,2.2vw,24px);margin:0 0 14px}
.hc details{border-bottom:1px solid var(--line,#e6e3dc)}
.hc summary{padding:16px 34px 16px 0;cursor:pointer;font-weight:600;
  font-size:16px;position:relative;list-style:none}
.hc summary::-webkit-details-marker{display:none}
.hc summary::after{content:"+";position:absolute;inset-inline-end:4px;top:15px;
  font-weight:400;font-size:20px;color:var(--muted,#7a766e)}
.hc details[open] summary::after{content:"\2212"}
.hc details>div{padding:0 0 18px;max-width:64ch;color:var(--ink-2,#5A5862)}
.hc-none{max-width:780px;margin:0 auto;text-align:center;
  color:var(--muted,#7a766e)}
.hc-ask{max-width:780px;margin:52px auto 0;padding:30px;text-align:center;
  border:1px solid var(--line,#e6e3dc);border-radius:18px}
.hc-ask h2{margin:0 0 8px;font-size:clamp(19px,2.2vw,24px)}
.hc-ask p{margin:0 0 20px;color:var(--ink-2,#5A5862)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- help bot ---------------------------------------------------------- */
.bot{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:90}
.bot-fab{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);font-size:22px;font-weight:600;
  box-shadow:var(--shadow-sm);display:grid;place-items:center}
.bot-fab:hover{background:var(--clay)}
.bot-panel{position:absolute;inset-block-end:64px;inset-inline-end:0;
  width:min(360px,calc(100vw - 40px));max-height:min(520px,70vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow)}
.bot-head{display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.bot-x{border:0;background:none;cursor:pointer;font-size:22px;line-height:1;
  color:var(--muted)}
.bot-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;
  flex-direction:column;gap:11px}
.bot-msg{font-size:14.5px;line-height:1.55;padding:11px 13px;border-radius:12px;
  max-width:92%}
.bot-msg.bot{background:var(--paper-2);color:var(--ink);align-self:flex-start}
.bot-msg.you{background:var(--ink);color:var(--paper);align-self:flex-end}
.bot-more{margin-top:9px;font-size:13px;color:var(--muted)}
.bot-more ul{margin:5px 0 0;display:grid;gap:3px}
.bot-more button{border:0;background:none;cursor:pointer;padding:0;
  text-align:start;font-size:13px;color:var(--clay);text-decoration:underline}
.bot-more a{color:var(--clay);text-decoration:underline}
.bot-form{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line)}
.bot-form input{flex:1;min-width:0;padding:10px 12px;font:inherit;font-size:14px;
  border:1px solid var(--line-2);border-radius:9px}
.bot-form button{padding:10px 15px;border:0;border-radius:9px;cursor:pointer;
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:600}
@media (max-width:420px){
  .bot{inset-block-end:14px;inset-inline-end:14px}
}