/* ==========================================================================
   SHOTINA design system - "Open Frame"
   Gallery Ivory canvas, Studio Forest identity, Frame Ink depth, Spotlight
   citron accents. Manrope throughout; the wordmark is artwork, not type.
   Brand system 3.2 EN. See docs/design/shotina-design-system.md.
   ========================================================================== */

:root{
  /* ===================================================================
     SHOTINA / Open Frame, brand system 3.2 EN.
     Reference: D:\Claude\Shotina-Brandbook-OpenFrame-EN-2026-09-25
     Assets:    site/assets/brand/shotina-openframe-v3-2/

     Roles first, raw brand colours underneath. Nothing outside this block
     should name a hex value.
     =================================================================== */

  /* the six brand colours, exactly as published */
  --brand-forest:#214D3E;
  --brand-ink:#171F1C;
  --brand-ivory:#F6F3EC;
  --brand-sage:#DCE5D8;
  --brand-citron:#D8E99B;
  --brand-white:#FFFFFF;

  /* ---- surface ----
     Ivory is the canvas, forest is the identity, ink is the deepest step,
     sage supports. White is reserved for looking at a product: a cutout on
     white has to read as a photograph, not as a hole in the page. */
  --surface-canvas:var(--brand-ivory);
  --surface-raised:var(--brand-white);
  --surface-sunken:var(--brand-sage);
  --surface-inset:#CBD6C6;
  --surface-forest:var(--brand-forest);
  --surface-ink:var(--brand-ink);
  --surface-invert:var(--brand-forest);
  --surface-invert-2:#1A4233;
  --surface-frame:var(--brand-white);
  --surface-spotlight:var(--brand-citron);

  /* ---- text ----
     Measured on ivory / white / sage. --text-muted is the lightest value
     that still clears 4.5:1 on all three, which is what stops a hint from
     failing the moment it moves onto a sage panel. */
  --text-primary:var(--brand-ink);          /* 15.17:1 on ivory */
  --text-secondary:#3C4A45;                 /*  8.39 ivory, 7.19 sage */
  --text-muted:#55625C;                     /*  5.76 ivory, 4.94 sage */
  --text-eyebrow:var(--brand-forest);       /*  8.63 on ivory */
  --text-on-invert:var(--brand-ivory);      /*  8.63 on forest, 15.17 on ink */
  --text-on-invert-2:#C3D2C9;
  --text-muted-invert:#A8BAB0;              /*  4.70 on forest */
  --text-spotlight:var(--brand-citron);     /*  7.31 on forest, 12.85 on ink */

  /* ---- line ----
     --line-field is the border that identifies a control. White on ivory is
     a 1.05:1 fill difference, so the border is doing that work alone and
     WCAG 1.4.11 wants 3:1 for it. */
  --line:#E0E5DA;
  --line-strong:#C2CCBD;
  --line-field:#7C8A82;                     /*  3.26 ivory, 3.61 white */
  --line-invert:rgba(246,243,236,.18);

  /* ---- action and status ----
     Citron is never text on a light surface: it measures 1.18:1 on ivory.
     It is a fill that carries ink, or a highlight on forest and ink. */
  --action-primary:var(--brand-forest);
  --action-primary-text:var(--brand-ivory);
  --action-primary-hover:#17392D;
  --accent:var(--brand-forest);
  --accent-strong:#17392D;
  --accent-soft:var(--brand-sage);
  --spotlight:var(--brand-citron);
  --spotlight-ink:var(--brand-ink);
  --status-ok:#1F6B4A;
  --status-warn:#8A5A12;
  --status-bad:#A32B22;

  /* ---- the 45 degree cut ----
     The identity's one graphic move. Used on image frames and section
     transitions, never on every button, and never across a product detail. */
  --cut:34px;
  --cut-sm:20px;
  --cut-lg:clamp(40px,6vw,96px);

  /* ---- legacy names, now aliases -------------------------------------
     Every rule in this file still says --paper, --ink or --clay. They are
     kept and re-pointed so the palette turns over in one place. New rules
     use the role names above. */
  --paper:var(--surface-canvas);
  --paper-2:var(--surface-sunken);
  --paper-3:var(--surface-inset);
  --white:var(--surface-raised);
  --noir:var(--surface-forest);      /* dark sections are forest now, not near-black */
  --noir-2:var(--surface-invert-2);
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --muted:var(--text-muted);
  --on-noir:var(--text-on-invert);
  --on-noir-2:var(--text-on-invert-2);
  --muted-noir:var(--text-muted-invert);
  --line-2:var(--line-strong);
  --line-noir:var(--line-invert);
  --clay:var(--accent);              /* the accent is Studio Forest */
  --clay-2:var(--accent-strong);
  --clay-soft:var(--accent-soft);

  /* metrics. Radii stay near-sharp: the brand's shape language is the cut,
     not the corner. The brand tokens file offers 10px and 16px for a
     generic product; this interface is built on the cut instead. */
  --wrap:1280px;
  --wrap-mid:1080px;
  --wrap-tight:820px;
  --gut:22px;
  --r:3px;
  --r-lg:5px;
  --pill:999px;
  --r-sm:2px; --r-pill:999px;
  --pad-sec:clamp(76px,9vw,148px);
  /* type. A brand that speaks with a display face overrides the
     second one; Shotina sets both to the same family on purpose. */
  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--font-ui);
  /* the display voice. A serif brand sets a lighter weight and less tracking */
  --display-weight:800;
  --display-weight-h2:800;
  --display-tracking:-.035em;
  --ft-word-max:100%;
  --ease:cubic-bezier(.22,.65,.28,1);
  --ease-out:cubic-bezier(.2,0,0,1);
  --dur-1:140ms; --dur-2:200ms; --dur-3:260ms; --dur-4:420ms;
  --shadow:0 40px 90px -50px rgba(23,31,28,.5);
  --shadow-sm:0 20px 50px -34px rgba(23,31,28,.42);
  --elev-1:var(--shadow-sm);
  --elev-2:var(--shadow);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --z-sticky:40; --z-overlay:60; --z-modal:80; --z-toast:100;
  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:var(--font-ui);
  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:800;letter-spacing:-.028em;line-height:1.04;text-wrap:balance}
/* Display headlines are set in uppercase in the markup, not by
   text-transform, so a translator can decide what uppercase means in
   their script. Turkish dotted i and Greek final sigma both break under a
   blind text-transform, and Persian and Arabic have no uppercase at all. */
h1{font-size:clamp(40px,6.4vw,92px);line-height:.94;letter-spacing:var(--display-tracking);font-weight:var(--display-weight)}
h2{font-size:clamp(29px,4.1vw,56px);line-height:1;letter-spacing:var(--display-tracking);font-weight:var(--display-weight-h2)}
h1,h2,h3{font-optical-sizing:auto}
h3{font-size:clamp(19px,1.5vw,23px);font-weight:700;letter-spacing:-.018em;line-height:1.26}
h4{font-size:15px;font-weight:600;letter-spacing:-.01em}

/* the editorial signature: one italic serif word inside a sans headline */
/* Was an italic serif. In Open Frame the second half of a headline is set
   apart by colour, the way the campaign panels do it. On a dark section it
   becomes citron; citron is never used as text on a light surface, where
   it measures 1.18:1. */
.ser{font-weight:inherit;color:var(--accent);letter-spacing:inherit}
.noir .ser,.ink-sec .ser{color:var(--spotlight)}
.hl{color:var(--clay)}

.eyebrow{
  display:inline-block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-eyebrow);
}
.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(--action-primary);color:var(--action-primary-text)}
.btn-ink:hover{background:var(--action-primary-hover)}
.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;
  min-height:45px;                 /* was 40px: a list of these is a nav */
  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)}
/* ---- the signature ------------------------------------------------------
   The wordmark is artwork. It is never typed, never has the standalone O set
   beside it, and never has its ratio changed: width is set, height follows.
   Padding carries the clear space the viewBox does not. */
.brand{display:inline-flex;align-items:center;padding:9px 9px 9px 0;line-height:0}
.brand .wm{width:clamp(126px,12vw,150px);height:auto;display:block}
.ft-top .brand .wm{width:clamp(132px,13vw,164px)}
@media (max-width:640px){
  /* Never below the book's 120px minimum, even to make a header fit. */
  .brand .wm{width:126px}
}
.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:800;letter-spacing:-.035em;
  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}
@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}
.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:13px;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-family:var(--font-display);font-size:clamp(34px,4.4vw,58px);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);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-weight:800;
  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(--text-eyebrow)}
.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)}
/* ---- the numbered index on the home page -------------------------------
   `idx` only, because six other pages share `.feat` with a small eyebrow
   numeral and no crop to put inside it.

   The photograph lives INSIDE the numeral instead of above it. Eight more
   5:4 pictures on a page that already carries a hero stage, a marquee, a
   before/after slider and a mosaic read as a gallery rather than a list,
   and the rug turned up in two of the eight cells. A numeral cut out of a
   photograph uses a tenth of the area, repeats nothing, and makes the
   photography the material the list is built from, which is the product.

   Each cell names its own crop in --shot. The accent sits behind as a
   background COLOUR, also clipped to the glyph, so any part of a letter
   the crop fails to reach is accent rather than a hole. */
.feat.idx > div{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(13px,1.5vw,20px);align-items:start}
.paper-2 .feat.idx,.paper-2 .feat.idx > div{border-color:var(--line-strong)}
.feat.idx .k{font-family:var(--font-display);font-weight:800;
  font-size:clamp(60px,7vw,94px);line-height:1;letter-spacing:-.045em;
  text-transform:none;
  /* Padding, not decoration: the background box is the padding box, and
     background-clip:text can only paint the glyph where that box reaches.
     Without room above and below, the numeral came out with its top and
     bottom sliced off. */
  padding:.07em .03em .1em;width:1.32em;
  -webkit-user-select:none;user-select:none}
.feat.idx .ft-t{padding-top:clamp(2px,.5vw,7px)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .feat.idx .k{color:transparent;background-color:var(--accent);
    background-image:var(--shot,none);background-repeat:no-repeat;
    background-size:auto 168%;background-position:54% 60%;
    -webkit-background-clip:text;background-clip:text;
    transition:background-size 1.7s var(--ease-out),
               background-position 1.7s var(--ease-out)}
  /* One slow pan as the row arrives, driven by the reveal class the whole
     page already uses. No hover: the pointer passing over a list should
     not make eight pictures move. */
  .js .feat.idx .rv.in .k{background-size:auto 122%;background-position:46% 44%}
}
@media(prefers-reduced-motion:reduce){
  .feat.idx .k{transition:none}
  .js .feat.idx .rv .k{background-size:auto 130%;background-position:50% 50%}
}
@media (max-width:760px){
  .feat.idx > div{gap:clamp(11px,3vw,16px)}
  .feat.idx .k{font-size:clamp(50px,13.5vw,64px)}
}
.noir .feat > div{border-color:var(--line-noir)}
.feat .k{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.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:#fff;background:var(--clay);padding:5px 11px;border-radius:var(--pill)}
.plan .amt{margin-top:16px;font-size:clamp(38px,4vw,52px);font-weight:800;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-field);border-radius:var(--r);
  background:var(--white);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color var(--dur-2) var(--ease)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  border-color:var(--ink);outline:2px solid var(--accent);outline-offset:2px}
.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{display:block;width:100%;max-width:var(--ft-word-max);margin-inline:auto;height:auto;opacity:.92}
.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{width:100%}
}

/* ------------------------------------------------------------ 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:var(--font-ui)}

/* per-script typefaces, chosen by the html lang attribute */
html[lang="fa"]{--fa:"Vazirmatn",var(--font-ui)}
html[lang="ar"]{--fa:"Noto Sans Arabic",var(--font-ui)}
html[lang="ru"]{--fa:"Noto Sans",var(--font-ui)}
html[lang="zh"]{--fa:"Noto Sans SC",var(--font-ui)}
html[lang="hi"]{--fa:"Noto Sans Devanagari",var(--font-ui)}
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}
/* The wordmark is artwork and is never mirrored in RTL. */

/* 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-field);border-radius:var(--r);background:#fff}
.hc-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.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-field);border-radius:var(--r)}
.bot-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.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-inline-end:14px}
}
/* the sticky bar shows up to 700px; the help button sits above it there */
@media (max-width:700px){
  .bot{inset-block-end:calc(86px + env(safe-area-inset-bottom))}
}


/* ---- touch targets ------------------------------------------------------
   Measured at 360px: the comparison tabs came out 38px tall and the footer
   and utility links 43px, one pixel under the 44px the design system asks
   for. The fix is padding and a minimum, not a bigger font, so nothing in
   the layout moves on a desktop. Inline links inside a paragraph are left
   alone: WCAG 2.5.8 exempts them and making them 44px tall would break the
   line rhythm of the prose they sit in. */
/* The comparison tabs and the billing toggle are controls at every width. */
.ba-tab,.billtog button{min-height:45px}
.billtog button{padding-inline:18px}

@media (max-width:640px){
  .ba-tab{padding-block:8px}
  .ft-bot .lgl a{min-height:45px;min-width:44px;display:inline-flex;align-items:center;
    justify-content:center;padding-block:0}
  .v a{min-height:45px;min-width:44px;display:inline-flex;align-items:center}
  .ft-links a,.ft-col a,.mmenu a,.langlist a,.langlist button,
  .hero-note a,.foot a{min-height:44px;display:inline-flex;align-items:center}
  .langpick summary{min-height:44px;display:flex;align-items:center}
}


/* ==========================================================================
   OPEN FRAME
   The identity's graphic move is a 45 degree cut that opens a frame to the
   space around it. It appears on image frames and section transitions and
   nowhere else: putting it on every button would turn a signature into a
   texture, and the book is explicit that the logo itself stays whole.
   ========================================================================== */

.of-hero{padding-block:clamp(122px,14vw,172px) clamp(52px,6vw,88px)}  /* .nav is position:fixed; this is the room it needs */
.of-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,76px);align-items:center}

.of-copy .eyebrow{color:var(--text-eyebrow)}

/* The brand line. Set in the markup as two spans so the break is deliberate
   and never lands mid sentence, and so the second half can take the accent
   the way the campaign panels do. */
.of-line{display:grid;gap:.02em;text-transform:none}
/* The headline is Latin in all twelve languages, and on an RTL page the
   bidi algorithm moved its full stop to the front: .RUG EXPERTS. `plaintext`
   takes each line's direction from its own first strong character, so the
   Latin reads left to right while the block stays aligned with the rest of
   the Persian or Arabic column. */
.of-line span{display:block;unicode-bidi:plaintext}
.of-line .ser{color:var(--accent)}

.of-copy .lead{margin-top:clamp(18px,2vw,26px)}
.of-copy .btn-row{margin-top:clamp(24px,3vw,34px)}

/* Three equal doors into the product. Equal weight on purpose: the book asks
   for jewelry, rugs and objects to stand level so the site does not read as
   a rug tool. */
.of-cats{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0}
.of-cats a{display:inline-flex;align-items:center;min-height:45px;padding:0 17px;
  border:1px solid var(--line-strong);border-radius:var(--pill);
  font-size:14px;font-weight:600;color:var(--text-secondary);text-decoration:none;
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),
             background var(--dur-1) var(--ease-out)}
.of-cats a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.of-cats a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- the stage --------------------------------------------------------- */
.of-stage{position:relative;display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr) minmax(0,.34fr)}

.of-frame{position:relative;margin:0;grid-column:1;background:var(--surface-raised);
  border:1px solid var(--line);overflow:hidden;
  /* The cut. A clip-path rather than a rotated overlay, so nothing sits on
     top of the photograph and the corner stays crisp at any size. */
  clip-path:polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%)}
.of-frame img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.of-frame::after{content:"";position:absolute;top:0;right:0;pointer-events:none;
  width:var(--cut-lg);height:var(--cut-lg);
  background:linear-gradient(to top right,
    transparent calc(50% - 1.5px), var(--accent) calc(50% - 1.5px),
    var(--accent) calc(50% + 1.5px), transparent calc(50% + 1.5px))}
.of-set figure::after{content:"";position:absolute;top:0;right:0;pointer-events:none;
  width:var(--cut-sm);height:var(--cut-sm);
  background:linear-gradient(to top right,
    transparent calc(50% - 1px), var(--accent) calc(50% - 1px),
    var(--accent) calc(50% + 1px), transparent calc(50% + 1px))}

/* The standalone O, as a tile on the frame. This is the one place the mark
   appears near the name's own O, and they are far enough apart to read as an
   application rather than as the doubling the book warns against. */
.of-tile{position:absolute;left:0;bottom:0;width:clamp(56px,5.4vw,74px);
  aspect-ratio:1/1;background:var(--surface-forest);display:grid;place-items:center}
/* How much of the tile the mark fills. A simple geometric mark can be
   small; a drawn one with detail in it disappears at 38%. */
.of-tile img{width:var(--mark-fill,38%);height:auto;aspect-ratio:auto;object-fit:contain}

.of-cap{position:absolute;right:14px;bottom:14px;z-index:2;
  background:var(--surface-forest);color:var(--text-on-invert);
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 12px}

/* The set. One column of three beside the frame on a wide screen, a row
   underneath on a narrow one. */
.of-set{grid-column:2;display:grid;gap:14px;align-content:center}
.of-set figure{position:relative;margin:0;background:var(--surface-raised);
  border:1px solid var(--line);overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%)}
.of-set img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.of-set figcaption{position:absolute;left:0;bottom:0;right:0;
  background:color-mix(in srgb,var(--surface-ink) 82%,transparent);
  color:var(--text-on-invert);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;text-align:center}
.of-seed figcaption{background:var(--spotlight);color:var(--spotlight-ink)}
.of-seed::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border:2px solid var(--spotlight)}

/* ---- the reveal --------------------------------------------------------
   Everything above is already laid out, painted and clickable. This only
   moves opacity and a few pixels, so a visitor who arrives mid animation, or
   whose JavaScript never runs, sees the finished hero. */
.js .of-stage[data-of-stage] .of-frame{opacity:0;transform:translateY(14px) scale(.985)}
.js .of-stage[data-of-stage] .of-set figure{opacity:0;transform:translateX(-14px)}
.js .of-stage.of-in .of-frame{opacity:1;transform:none;
  transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.js .of-stage.of-in .of-set figure{opacity:1;transform:none;
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.js .of-stage.of-in .of-set figure:nth-child(1){transition-delay:260ms}
.js .of-stage.of-in .of-set figure:nth-child(2){transition-delay:400ms}
.js .of-stage.of-in .of-set figure:nth-child(3){transition-delay:540ms}

@media (prefers-reduced-motion:reduce){
  .js .of-stage[data-of-stage] .of-frame,
  .js .of-stage[data-of-stage] .of-set figure{opacity:1;transform:none;transition:none}
}

@media (max-width:900px){
  .of-grid{grid-template-columns:1fr;gap:34px}
  .of-stage{grid-template-columns:1fr;gap:12px}
  .of-frame{grid-column:1;--cut-lg:clamp(34px,11vw,64px)}
  /* The set becomes a row under the frame rather than a squeezed column. */
  .of-set{grid-column:1;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
  .js .of-stage[data-of-stage] .of-set figure{transform:translateY(12px)}
}

/* ---- sections that carry the cut ---------------------------------------
   A deep forest or ink chapter opens with the same angle, so the page turns
   the way the frames do. Used sparingly: two on the home page, not eight. */
.sec-cut{position:relative;
  clip-path:polygon(0 var(--cut), var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%)}
@media (max-width:640px){.sec-cut{--cut:16px}}

/* ---- the display voice ---------------------------------------------------
   Headings, the wordmark fallback and the price figures. A brand with a
   serif display face gets it here; one without sets --font-display to
   --font-ui and this rule is a no-op. */
:where(h1,h2,h3,.display,.plan .price,.hero h1){font-family:var(--font-display)}

/* ---------------------------------------------------- two products ------
   The first thing under the hero: which of the two tools the visitor came
   for. Two tiles, each with the product's own output. One layout family,
   used once on the page. */
.doors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);
  margin-top:clamp(30px,4vw,48px)}
.door{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface-raised);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.door:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.door .ph{position:relative;aspect-ratio:16/10;background:var(--paper-3);overflow:hidden}
.door .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.door:hover .ph img{transform:scale(1.03)}
.door .bd{padding:clamp(20px,2.4vw,30px)}
.door .k{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-eyebrow)}
.door h3{margin-top:10px;font-size:clamp(21px,2vw,27px)}
.door p{margin-top:10px;font-size:15px;color:var(--ink-2);max-width:40ch}
.door .tlink{margin-top:16px}
.door > a.cover{position:absolute;inset:0;z-index:1}
.doors-note{margin-top:16px;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.doors{grid-template-columns:1fr}}

/* ------------------------------------------------- visualizer, home ----
   Image-led, like the rest of the page: the Visualizer's own output in two
   rooms, a runner beside a room-sized rug so both shapes are seen at once,
   and the copy to the side. */
.vzh{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center}
.vzh-pics{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--gut);align-items:stretch}
.vzh-pics figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper-3)}
.vzh-pics figure.main{aspect-ratio:3/2}
.vzh-pics figure.tall{aspect-ratio:2/3}
.vzh-pics figure{display:flex;flex-direction:column}
.vzh-pics figure .im{flex:1;min-height:0;overflow:hidden;border-radius:var(--r);background:var(--paper-3)}
.vzh-pics figure.main .im{aspect-ratio:3/2}
.vzh-pics figure.tall .im{aspect-ratio:2/3}
.vzh-pics figure.main,.vzh-pics figure.tall{aspect-ratio:auto;background:none;overflow:visible}
.vzh-pics img{width:100%;height:100%;object-fit:cover}
/* captions sit under the picture, never on it */
.vzh-pics figcaption{padding:10px 2px 0;font-size:13px;color:var(--ink-2);line-height:1.45}
.vzh-copy h2{margin-top:14px}
.vzh-copy .lead{margin-top:18px}
.vzh-copy .flist{margin-top:22px}
.vzh-copy .btn-row{margin-top:26px}
@media (max-width:900px){
  .vzh{grid-template-columns:1fr;gap:30px}
  .vzh-pics{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}
@media (max-width:520px){.vzh-pics{gap:10px}}

/* ------------------------------------------------- visualizer page ----- */
.vz-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:center}
.vz-hero h1{margin-top:16px;font-size:clamp(36px,5vw,72px)}
.vz-hero .lead{margin-top:18px}
.vz-hero .btn-row{margin-top:26px}
.vz-hero .sep{margin-top:18px;font-size:14px;color:var(--muted);max-width:48ch}
.vz-hero .sep a{display:flex;width:max-content;max-width:100%;align-items:center;min-height:44px;color:var(--ink);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.vz-hero .ph{border-radius:var(--r);overflow:hidden;background:var(--paper-3);aspect-ratio:3/2;box-shadow:var(--shadow)}
.vz-hero .ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.vz-hero{grid-template-columns:1fr;gap:26px}}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.trio figure{margin:0;position:relative}
.trio figure .im{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--paper-3)}
.trio figure img{width:100%;height:100%;object-fit:cover}
.trio figcaption{padding:12px 2px 0;font-size:14px;color:var(--ink-2);line-height:1.5}
@media (max-width:760px){.trio{grid-template-columns:1fr 1fr}.trio figure:last-child{grid-column:span 2}}
@media (max-width:480px){.trio{grid-template-columns:1fr}.trio figure:last-child{grid-column:auto}}

/* the demo: a poster of the real viewer, and the viewer itself only when
   asked for, so the page never loads the showroom or its model on its own */
.demo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-ink);
  aspect-ratio:16/10;box-shadow:var(--shadow);border:1px solid var(--line)}
.demo img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.demo .veil{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(12,11,15,.55),rgba(12,11,15,.08) 60%)}
.demo .veil .btn{box-shadow:0 14px 40px -12px rgba(0,0,0,.6)}
.demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--surface-canvas)}
.demo.on .poster,.demo.on .veil{display:none}
.demo-foot{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;margin-top:14px;font-size:13.5px;color:var(--muted)}
.demo-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.demo{aspect-ratio:3/4}}

.vz-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,72px);border-top:1px solid var(--line)}
.vz-feats > div{padding-block:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--line)}
.vz-feats h3{font-size:clamp(18px,1.5vw,22px)}
.vz-feats p{margin-top:8px;font-size:15px;color:var(--ink-2);max-width:46ch}
.vz-feats .beta{display:inline-block;margin-left:8px;padding:3px 9px;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:var(--pill);vertical-align:middle}
[dir="rtl"] .vz-feats .beta{margin-left:0;margin-right:8px}
@media (max-width:760px){.vz-feats{grid-template-columns:1fr}}

.vz-connect{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,64px);align-items:start}
.vz-connect .idx{margin-top:0}
.vz-connect .idx-row{grid-template-columns:52px minmax(0,1fr)}
.vz-connect .idx-row .bd{grid-column:2}
.vz-connect .aside{position:sticky;top:104px}
@media (max-width:900px){.vz-connect{grid-template-columns:1fr}.vz-connect .aside{position:static}}

.vz-plan{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow-sm)}
.vz-plan h3{font-size:22px}
.vz-price{font-family:var(--font-display);font-size:clamp(38px,4vw,52px);font-weight:var(--display-weight);letter-spacing:-.03em;line-height:1;margin:14px 0 4px}
/* the plan card while the server is answering: quiet bars where the price and the list will be */
.vz-plan[data-state="loading"] .vz-price{position:relative;color:transparent}
.vz-plan[data-state="loading"] .vz-price::before{content:"";position:absolute;inset:8% 0;width:46%;border-radius:8px;
  background:linear-gradient(90deg,var(--paper-2),var(--paper-3),var(--paper-2));background-size:200% 100%;animation:vzsk 1.4s linear infinite}
.vz-plan[data-state="loading"] #vz-feat:empty{min-height:120px;border-radius:8px;
  background:repeating-linear-gradient(to bottom,var(--paper-2) 0 14px,transparent 14px 27px);opacity:.8}
@keyframes vzsk{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.vz-plan[data-state="loading"] .vz-price::before{animation:none}}
.vz-price small{font-family:var(--font-ui);font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);margin-inline-start:8px}
.vz-plan ul{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.vz-plan li{position:relative;padding-inline-start:22px;padding-block:6px;font-size:14.5px;color:var(--ink-2)}
.vz-plan li::before{content:"";position:absolute;inset-inline-start:3px;top:14px;width:9px;height:5px;
  border-left:1.6px solid var(--clay);border-bottom:1.6px solid var(--clay);transform:rotate(-45deg)}
[dir="rtl"] .vz-plan li::before{transform:rotate(45deg) scaleX(-1)}
.vz-plan .btn{width:100%;margin-top:18px}
.vz-note{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.55}
.vz-note a,.vz-policy a,.vz-honest a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.vz-test{margin:0 0 14px;padding:10px 14px;border-radius:var(--r);font-size:13.5px;line-height:1.5;
  background:var(--surface-sunken);color:var(--ink-2)}

.vz-honest{background:var(--surface-sunken);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)}
.vz-honest h2{font-size:clamp(24px,2.4vw,34px)}
.vz-honest ul{margin-top:14px;display:grid;gap:8px}
.vz-honest li{position:relative;padding-inline-start:20px;font-size:15px;color:var(--ink-2);line-height:1.55}
.vz-honest li::before{content:"";position:absolute;inset-inline-start:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--clay)}

.vz-policy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.vz-policy > div{border-top:1px solid var(--line);padding-top:18px}
.vz-policy h3{font-size:17px}
.vz-policy p,.vz-policy li{margin-top:8px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
@media (max-width:700px){.vz-policy{grid-template-columns:1fr}}

/* the Visualizer plan on the pricing page: same card, set apart */
.vz-on-pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:860px){.vz-on-pricing{grid-template-columns:1fr}}

/* ============================================================ motion ====
   Three pieces, driven by assets/js/motion.js. Adapted from the Thinking
   Gods component library, which is published free for client work, and
   rebuilt on this site's role tokens so one rule set serves both brands.
   Nothing here is load-bearing: with the script blocked the marquee still
   scrolls, the dark band is still dark and every heading is sharp.
   ======================================================================= */

/* ---- 1. the marquee, which now does nothing on hover ------------------
   There was a spotlight here: the strip stopped under the pointer, the card
   you were on grew by 96px, every other card gave up a share of that, and
   the photograph re-cropped as it widened. The idea was sound and the
   result was not. Three things animating at once on a flex row whose width
   is content-driven gave a jolt and a lurch on the way in and a worse one
   on the way out, and it happened every time somebody's pointer merely
   crossed the strip on its way somewhere else.
   A marquee that reacts to being passed over is a marquee that interrupts
   people. It scrolls, and that is all it does. */

/* ---- 2. the mesh under the dark band ---------------------------------- */
.sec.has-mesh{position:relative;isolation:isolate}
.sec .mesh{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  display:block;pointer-events:none}
.sec.has-mesh > *:not(.mesh){position:relative}

/* ---- 3. a heading arriving into focus ---------------------------------
   The blur lives on .fx, which JavaScript adds. A page without JavaScript
   never gets the class and never gets a blurred headline. */
[data-focus].fx .fw{display:inline-block;filter:blur(5px);opacity:.35;
  transform:translateY(.12em);
  transition:filter .5s var(--ease-out),opacity .5s var(--ease-out),
             transform .5s var(--ease-out)}
[data-focus].fx-in .fw{filter:blur(0);opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-focus].fx .fw{filter:none;opacity:1;transform:none;transition:none}
  .sec .mesh{display:none}
}