/* Maître Deck · v4 prototype — shared system (NOT deployed) */
@import url('fonts/fonts.css');
:root{
  --bone:#F0EDE6; --paper:#F6F4EE; --ink:#111111; --cap:#6F6A62; --unit:#9A968E;
  --line:#DDD8CC; --hair:#E6E2D8; --red:#C41A05;
  --btn-bg:#111111; --btn-tx:#F0EDE6;
  --card:#F6F4EE; --card-line:#DDD8CC;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(17,17,17,.03),0 18px 40px rgba(17,17,17,.07);
  --shadow-lift:0 2px 4px rgba(17,17,17,.05),0 28px 60px rgba(17,17,17,.12);
}
[data-theme="dark"]{
  --bone:#0C0C0C; --paper:#1B1B1B; --ink:#EDEAE3; --cap:#948F87; --unit:#807B74;
  --line:#2B2B2B; --hair:#212121;
  --btn-bg:#EDEAE3; --btn-tx:#111111;
  --card:#1B1B1B; --card-line:#2B2B2B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 30px 70px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip} /* transformed elements can't pan the page sideways */
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s ease,color .3s ease}
.wrap{max-width:1180px;margin:0 auto;padding-left:40px;padding-right:40px}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#F0EDE6}
.eb{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cap)}

.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .fan,.fcard{transition:none!important}
}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:30;background:var(--bone);border-bottom:1px solid var(--line);transition:background .3s ease}
.nav .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wm{display:inline-flex;align-items:baseline;font-size:23px}
.wm-s{font-weight:600;letter-spacing:-.04em}
.wm-i{font-family:var(--serif);font-style:italic;font-size:1.07em;margin-left:-.068em}
.wm-d{width:.19em;height:.19em;border-radius:99px;background:var(--red);display:inline-block;margin-left:.09em}
.nav-l{display:flex;gap:28px}
.nav-l a{font-size:14px;font-weight:500;color:var(--ink);transition:color .2s}
.nav-l a.on{color:var(--red)}
.nav-r{display:flex;align-items:center;gap:20px}
.tog{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cap);background:none;border:none;cursor:pointer;padding:6px 0}
.langs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--unit);display:flex;gap:1px}
.langs span{cursor:pointer;padding:4px 4px;transition:color .2s}
.langs span.on{color:var(--ink);font-weight:600}
.langs b{color:var(--ink);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;font-size:13.5px;font-family:var(--sans);
     background:var(--btn-bg);color:var(--btn-tx);border-radius:99px;padding:12px 24px;border:none;cursor:pointer;
     transition:transform .25s cubic-bezier(.22,.61,.36,1),opacity .2s}
.btn-lg{font-size:15px;padding:16px 32px}
.ghost{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:15px 30px;border-radius:99px;
       border:1px solid var(--line);transition:border-color .2s,transform .25s cubic-bezier(.22,.61,.36,1)}

/* ── MOBILE MENU ── */
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:10px 4px;flex:none}
.menu-btn i{display:block;width:20px;height:1.6px;background:var(--ink);transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s}
.menu-btn i+i{margin-top:5.5px}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7.1px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.1px) rotate(-45deg)}
.mnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bone);border-bottom:1px solid var(--line);
      box-shadow:var(--shadow);transition:background .3s ease}
.mnav.open{display:block}
.mnav a.pg{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;padding:18px 40px;border-bottom:1px solid var(--hair)}
.mnav a.pg.on{color:var(--red)}
.mnav-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 40px}
.mnav-row .langs{display:flex!important;gap:2px}
.mnav-row .langs span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--unit);padding:6px 6px}
.mnav-row .langs span.on{color:var(--ink);font-weight:600}
@media (max-width:640px){.mnav a.pg{padding-left:22px;padding-right:22px}.mnav-row{padding-left:22px;padding-right:22px}}

/* ── TYPE / SECTIONS ── */
h1{font-weight:600;font-size:clamp(42px,5vw,68px);letter-spacing:-.045em;line-height:1.02;margin:28px 0 0}
h1 .i,h2 .i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
h1 .d,h2 .d{color:var(--red)}
.lead{font-size:17.5px;color:var(--cap);max-width:420px;margin:26px 0 0}
.cta{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;align-items:center}
.sec{padding-top:104px;padding-bottom:104px}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
h2{font-weight:600;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.04em;line-height:1.06;margin:16px 0 0;max-width:19ch}
.more{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
      border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color .25s,color .25s;white-space:nowrap}
.sub{color:var(--cap);max-width:46ch;margin:18px 0 0;font-size:16px}

/* ── PAGE HERO (inner pages) ── */
.phero{padding-top:80px;padding-bottom:24px}
.phero .lead{max-width:520px}

/* ── THE FAN (landing hero) ──
   All cards move through the SAME custom properties, so hover never fights the base state. */
.fan-stage{position:relative;height:420px;perspective:1500px}
.fan{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.fcard{position:absolute;left:50%;top:50%;width:196px;height:274px;margin:-137px 0 0 -98px;
  background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:20px 18px;
  display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:var(--ink);
  transform:translateX(var(--tx)) rotate(var(--rot)) translateY(var(--ty));
  transform-origin:50% 118%;box-shadow:var(--shadow);
  transition:transform .8s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.fcard:nth-child(1){--tx:-104px;--rot:-13deg; --ty:14px; z-index:1}
.fcard:nth-child(2){--tx:-52px; --rot:-6.5deg;--ty:0px;  z-index:2}
.fcard:nth-child(3){--tx:0px;   --rot:0deg;   --ty:-9px; z-index:3}
.fcard:nth-child(4){--tx:52px;  --rot:6.5deg; --ty:0px;  z-index:2}
.fcard:nth-child(5){--tx:104px; --rot:13deg;  --ty:14px; z-index:1}
/* spread choreography exists only where hover exists — on touch the showcase runs instead */
@media (any-hover:hover) and (any-pointer:fine){
  html.fine .fan-stage:hover .fcard:nth-child(1){--tx:-136px;--rot:-17deg;--ty:22px}
  html.fine .fan-stage:hover .fcard:nth-child(2){--tx:-68px; --rot:-9deg; --ty:2px}
  html.fine .fan-stage:hover .fcard:nth-child(3){--ty:-16px}
  html.fine .fan-stage:hover .fcard:nth-child(4){--tx:68px;  --rot:9deg;  --ty:2px}
  html.fine .fan-stage:hover .fcard:nth-child(5){--tx:136px; --rot:17deg; --ty:22px}
}
/* the presented card — set by JS on pointerenter (desktop) or by the showcase loop (touch).
   JS keeps it locked until another card takes over, so nothing blinks at the overlaps. */
.fcard.hot{--ty:-26px;box-shadow:var(--shadow-lift)}
.fcard .code{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--cap)}
.fcard .rule{height:1px;background:var(--hair);margin:14px 0 0}
.fcard .dot{position:absolute;top:20px;right:18px;width:6px;height:6px;border-radius:99px;background:var(--red)}
.fcard .dot.soon{background:none;border:1px solid var(--unit)}
/* each card carries its tool's glyph — line-drawn, one weight, no decoration without meaning */
.fcard .glyph{flex:1;display:flex;align-items:center;justify-content:center;margin:12px 0 8px}
.fcard .glyph svg{width:62%;max-height:84px;color:var(--cap);opacity:.45;transition:opacity .35s ease,color .35s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.fcard.hot .glyph svg{opacity:.9;color:var(--ink);transform:translateY(-2px)}
.fcard .idx{font-family:var(--mono);font-weight:500;font-size:52px;letter-spacing:-.05em;color:var(--unit);opacity:.5;line-height:1;transition:color .3s,opacity .3s}
.fcard.hot .idx{color:var(--ink);opacity:.85}
/* the outer cards show their RIGHT edge — mirror their type so no card looks blank;
   the front card is the axis of the fan, so its type sits centred */
.fcard:nth-child(4) .code,.fcard:nth-child(5) .code{text-align:right;display:block}
.fcard:nth-child(4) .idx,.fcard:nth-child(5) .idx{align-self:flex-end}
.fcard:nth-child(4) .dot,.fcard:nth-child(5) .dot{right:auto;left:18px}
.fcard:nth-child(3) .code{text-align:center;display:block}
.fcard:nth-child(3) .idx{align-self:center}
/* each card whispers its signature number when you arrive */
/* the presented card's engraving DRAWS ITSELF — strokes trace in, dots land one by one.
   (replaces the red text stat: the glyph is the statement now) */
.fcard.hot .glyph path{stroke-dasharray:1;animation:glyphdraw .9s cubic-bezier(.4,0,.2,1) both}
@keyframes glyphdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.fcard.hot .glyph circle{transform-box:fill-box;transform-origin:center;animation:dotland .5s cubic-bezier(.34,1.56,.64,1) backwards}
.fcard.hot .glyph circle:nth-of-type(1){animation-delay:.28s}
.fcard.hot .glyph circle:nth-of-type(2){animation-delay:.34s}
.fcard.hot .glyph circle:nth-of-type(3){animation-delay:.40s}
.fcard.hot .glyph circle:nth-of-type(4){animation-delay:.46s}
.fcard.hot .glyph circle:nth-of-type(5){animation-delay:.52s}
.fcard.hot .glyph circle:nth-of-type(6){animation-delay:.57s}
.fcard.hot .glyph circle:nth-of-type(7){animation-delay:.62s}
.fcard.hot .glyph circle:nth-of-type(8){animation-delay:.67s}
.fcard.hot .glyph circle:nth-of-type(9){animation-delay:.72s}
.fcard.hot .glyph circle:nth-of-type(10){animation-delay:.76s}
.fcard.hot .glyph circle:nth-of-type(11){animation-delay:.80s}
.fcard.hot .glyph circle:nth-of-type(12){animation-delay:.84s}
@keyframes dotland{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fcard.hot .glyph path,.fcard.hot .glyph circle{animation:none}}
/* pointer geometry decides the presented card (JS) — the cards themselves stay
   silent to the mouse, so overlaps can never lie. Keyboard focus still works. */
@media (any-hover:hover) and (any-pointer:fine){html.fine .fan .fcard{pointer-events:none}}
/* the deal — cards arrive stacked and fan out, staggered */
.fcard:nth-child(1){--i:1}.fcard:nth-child(2){--i:2}.fcard:nth-child(3){--i:3}.fcard:nth-child(4){--i:4}.fcard:nth-child(5){--i:5}
.fan.stack .fcard{--tx:0px;--rot:0deg;--ty:0px}
.fan.dealing .fcard{transition-delay:calc(var(--i)*80ms)}
/* on touch the deck BREATHES — the fan slowly opens and closes like a hand of cards
   held at the table, while a soft swell passes through it. Two slow rhythms, out of
   phase: motion you feel more than you notice. */
@property --wave{syntax:'<length>';inherits:false;initial-value:0px}
@property --breath{syntax:'<angle>';inherits:false;initial-value:0deg}
@media (hover:none){
  html:not(.fine) .fcard:nth-child(1){--k:-1}
  html:not(.fine) .fcard:nth-child(2){--k:-.5}
  html:not(.fine) .fcard:nth-child(3){--k:0}
  html:not(.fine) .fcard:nth-child(4){--k:.5}
  html:not(.fine) .fcard:nth-child(5){--k:1}
  /* the pivot sits below the cards, so rotation alone swings them outward like a real fan */
  html:not(.fine) .fcard{transform:translateX(var(--tx))
                   rotate(calc(var(--rot) + var(--breath)*var(--k)))
                   translateY(calc(var(--ty) + var(--wave)))}
  /* breathing starts only once the deal has finished (JS adds .ready), otherwise the
     animation would seize the transform mid-deal and the cards would snap.
     Delays are POSITIVE so every card begins at rest — no jump when it engages. */
  html:not(.fine) .fan.ready .fcard{animation:cardbreath 9s ease-in-out infinite,cardwave 6.4s ease-in-out infinite;
                    animation-delay:.2s,calc(.2s + var(--i)*.45s)}
  /* both cycles start AND end at the resting pose, so engaging or dropping them is invisible */
  @keyframes cardbreath{0%,100%{--breath:0deg}50%{--breath:2.4deg}}
  @keyframes cardwave{0%,100%{--wave:0px}50%{--wave:-8px}}
}
@media (prefers-reduced-motion:reduce){
  .fan{animation:none!important}
  .fcard{animation:none!important}
  .fan.dealing .fcard{transition-delay:0s}
}
.fan-cap{position:absolute;left:0;right:0;bottom:-4px;text-align:center;font-family:var(--mono);font-size:9.5px;
         letter-spacing:.24em;text-transform:uppercase;color:var(--unit);transition:color .25s ease,opacity .18s ease;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fan-cap.named{color:var(--ink)}
.fan-cap.swap{opacity:0}

/* ── SLIDING STRIP ──
   padding-top gives the hover lift + ring room inside the scroll clip */
.strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:42px;padding-top:10px;padding-bottom:22px;
       scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.strip::-webkit-scrollbar{height:2px}
.strip::-webkit-scrollbar-thumb{background:var(--line)}
.tcard{flex:0 0 clamp(250px,23vw,290px);scroll-snap-align:start;background:var(--card);border:1px solid var(--card-line);
       border-radius:10px;padding:24px;display:flex;flex-direction:column;min-height:220px;color:var(--ink);
       transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .25s}
.tcard .code{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--cap);display:flex;justify-content:space-between;align-items:center}
.tcard .dot{width:6px;height:6px;border-radius:99px;background:var(--red)}
.tcard .dot.soon{background:none;border:1px solid var(--unit)}
.tcard .nm{font-weight:600;font-size:19px;letter-spacing:-.025em;margin-top:22px;line-height:1.2}
.tcard .ln{font-size:14px;color:var(--cap);margin-top:10px}
.tcard .st{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--unit)}
.strip-hint{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
            text-transform:uppercase;color:var(--unit);margin-top:6px}

/* ── SERVICE ROWS (hover bar contained in the row) ── */
.svcs{margin-top:52px;border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line)}
.svc-h{width:100%;background:none;border:none;cursor:pointer;color:inherit;font-family:var(--sans);text-align:left;
       display:flex;align-items:center;gap:22px;padding:26px 22px;position:relative;transition:color .3s ease;z-index:1}
.svc-h::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;
               transition:transform .38s cubic-bezier(.22,.61,.36,1);z-index:-1}
.svc.open .svc-h::before{transform:scaleY(1)}
.svc.open .svc-h{color:var(--bone)}
[data-theme="dark"] .svc.open .svc-h{color:#111}
.svc-h .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red);flex:none;transition:color .3s ease}
/* on the inverted bar EVERYTHING inverts — red on black was unreadable */
.svc.open .svc-h .n{color:inherit}
.svc-h .t{font-weight:600;font-size:clamp(19px,2.1vw,25px);letter-spacing:-.025em;flex:1}
/* the service tag is a pill (generic .tag also styles it) — on the inverted bar it must invert COMPLETELY */
.svc-h .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;transition:color .3s ease,border-color .3s ease}
.svc.open .svc-h .tag{color:inherit;border-color:color-mix(in srgb,currentColor 35%,transparent)}
.plus{position:relative;width:13px;height:13px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.plus::before{left:0;top:6px;width:13px;height:1.5px}
.plus::after{left:6px;top:0;width:1.5px;height:13px}
.svc.open .plus::after{transform:scaleY(0)}
.svc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1)}
.svc.open .svc-b{grid-template-rows:1fr}
.svc-bi{overflow:hidden}
.svc-in{padding:22px 22px 34px 55px;color:var(--cap);font-size:15px}
.svc-in .d{max-width:60ch;margin:0;line-height:1.68}
.svc-in .d + .d{margin-top:15px}
.svc-in ul + .d{margin-top:20px}
.svc-in ul{list-style:none;margin:18px 0 0;padding:0;max-width:520px}
.svc-in li{font-size:14px;color:var(--ink);padding:9px 0 9px 18px;border-bottom:1px solid var(--hair);position:relative}
.svc-in li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--red)}
.svc-in .proof{margin-top:24px}
.svc-in .proof-link{color:var(--ink);font-weight:500;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--ink) 38%,transparent);
  transition:text-decoration-color .2s,color .2s}
.svc-in .proof-link .ar{font-size:.82em;opacity:.5;margin-left:3px;display:inline-block}
.svc-in .svc-mail{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
                  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:4px}
@media (max-width:700px){.svc-in{padding-left:22px}}

/* ── THE SERVICE RAIL ──
   The one moving thing outside the hero: the numbers these tools produce, running
   past like the pass during service. Kept honest — real dishes, real figures, and
   exactly ONE red value (the line that hurts), per the red budget.
   Three details keep it expensive rather than gimmicky:
   1. it is SLOW (72s a lap) — a luxury pace, not a stock ticker;
   2. the edges FADE via a mask, so nothing hard-cuts at the viewport edge;
   3. it pauses when you hover, so a number can actually be read. */
.rail{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      background:var(--paper);padding:15px 0;transition:background .3s ease;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.rail-track{display:inline-flex;width:max-content;animation:railmove 72s linear infinite}
.rail-item{display:inline-flex;gap:11px;align-items:baseline;white-space:nowrap;padding:0 22px;
           font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cap)}
.rail-item b{color:var(--ink);font-weight:500}
.rail-item .hot{color:var(--red);font-weight:600}
/* the brand statements between the tools read in ink, so the stream has a cadence */
.rail-item.say{color:var(--ink)}
.rail-sep{align-self:center;color:var(--unit);opacity:.45}
/* the rail floats in the middle of the air between the hero and the next heading:
   the section that follows it matches the hero's bottom padding exactly */
.rail + .sec{padding-top:84px}
@keyframes railmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rail{-webkit-mask-image:none;mask-image:none}
  .rail-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;row-gap:8px}
}

/* ── BRIDGE / OPERATOR / CLOSE / FOOTER ── */
/* the software line: still a seed, not a promise — but now the eye stops once */
.bridge{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0;text-align:center}
.bridge p{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cap);
          display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.bridge b{color:var(--ink);font-weight:600}
.bridge .mk{width:6px;height:6px;border-radius:99px;background:var(--red);flex:none}
/* the operator band — the landing page's inverted moment, the same device the
   bundle uses on the templates page (the callout always inverts from the page) */
/* operator — the SAME contained inverted card the bundle uses, deliberately not a
   full-bleed band: at full width the dark-mode version threw a wall of light across
   the screen, and one inverted device used twice reads as a system, not a flourish. */
.op-card{background:var(--ink);color:var(--bone);border-radius:12px;padding:66px 40px 56px;
         box-shadow:var(--shadow-lift);transition:background .3s ease,color .3s ease}
[data-theme="dark"] .op-card{background:#F0EDE6;color:#111}
.op-card .eb{color:inherit;opacity:.5}
.op-card .opq{color:inherit}
.op-card .opa{color:inherit;opacity:.62}
.op-card .opa b{color:inherit;opacity:1}
.op-card .more{color:inherit;border-color:color-mix(in srgb,currentColor 32%,transparent)}
/* the signature belongs TO the quote, so it hugs it; the link is a separate act and
   keeps its distance. Equal gaps would read as a list of three unrelated things. */
.op-card .opa{margin-top:22px}
.op-card .cta{margin-top:40px}
.op{text-align:center;max-width:820px;margin:0 auto}
.opq{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,3.1vw,38px);line-height:1.3;
     letter-spacing:-.008em;margin:32px 0 0}
.opa{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cap);margin-top:30px;line-height:2.1}
.opa b{color:var(--ink);font-weight:500}
/* the operator card is an OBJECT, and an object wants equal air above and below it:
   the section pads the top, .close pads the bottom, both 104. Lopsided padding around
   something that floats reads as a mistake, never as hierarchy. */
#operator{padding-bottom:0}
.close{padding-top:104px;padding-bottom:104px;text-align:center}
.close h2{margin:20px auto 0;max-width:17ch}
.close .cta{justify-content:center;margin-top:38px}
.foot{border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.foot .n,.foot a{font-size:13px;color:var(--cap)}

/* ── TOOL SECTIONS (templates page) ── */
.tool-sec{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--line)}
.tool-sec:first-of-type{border-top:none}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tool-grid.flip>.txt{order:2}
.tool-grid.flip>.fig{order:1}
.tool-code{display:flex;align-items:center;gap:14px}
.tool-code .c{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--cap)}
.status{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;
        border:1px solid var(--line);border-radius:99px;color:var(--cap);display:inline-flex;align-items:center;gap:7px}
.status.live::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--red)}
.status.soon{border-style:dashed}
h3{font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1;margin:18px 0 0}
.tool-sub{color:var(--cap);font-size:15.5px;max-width:44ch;margin:16px 0 0}
.inside{list-style:none;margin:24px 0 0;padding:0;max-width:440px}
.inside li{font-size:14px;padding:9px 0 9px 18px;border-bottom:1px solid var(--hair);position:relative}
.inside li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--red)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap);
     border:1px solid var(--line);border-radius:99px;padding:5px 11px}
.tool-cta{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
.fig-panel{background:var(--card);border:1px solid var(--card-line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.fig-head{display:flex;justify-content:space-between;align-items:baseline;padding:18px 22px;border-bottom:1px solid var(--hair)}
.fig-head .t{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cap)}
.fig-head .c{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--red)}
.fig-rows{padding:4px 22px}
.fr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:14px}
.fr:last-child{border-bottom:none}
.fr .k{color:var(--ink)}
.fr .q{font-family:var(--mono);font-size:10.5px;color:var(--unit);margin-left:auto}
.fr .v{font-family:var(--mono);font-size:12.5px;min-width:60px;text-align:right}
.fr .v.bad{color:var(--red);font-weight:600}
.fig-foot{padding:13px 22px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;
          font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--unit)}
.fig-foot .r{color:var(--red)}
/* the lab (templates page) */
.lab{padding:22px;border-top:1px solid var(--hair)}
.lab-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.lab-h .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cap)}
.lab-h .v{font-family:var(--mono);font-size:16px;font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:ew-resize;display:block}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--unit)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:99px;background:var(--ink);
  border:3px solid var(--card);box-shadow:0 0 0 1px var(--line);margin-top:-7px;transition:background .2s}
input[type=range].hot::-webkit-slider-thumb{background:var(--red)}
input[type=range].hot::-moz-range-thumb{background:var(--red)}
input[type=range]::-moz-range-track{height:1px;background:var(--unit)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:99px;background:var(--ink);border:3px solid var(--card);box-shadow:0 0 0 1px var(--line)}
input[type=range]:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.lab-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--unit);margin-top:4px}
.lab-out{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:18px;flex-wrap:wrap}
.lab-pct{font-family:var(--mono);font-weight:600;font-size:44px;line-height:.9;letter-spacing:-.04em;transition:color .3s}
.lab-pct small{font-size:.4em;color:var(--unit)}
.lab-pct.hot{color:var(--red)}
.lab-msg{font-size:12.5px;color:var(--cap);max-width:220px;transition:color .3s}
.lab-msg.hot{color:var(--red)}
.pour-chan{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.pour-chan button{flex:1;background:none;border:none;cursor:pointer;padding:10px 6px;font-family:var(--mono);font-size:10px;
                  letter-spacing:.14em;text-transform:uppercase;color:var(--cap);transition:background .25s,color .25s}
.pour-chan button+button{border-left:1px solid var(--line)}
.pour-chan button.on{background:var(--ink);color:var(--bone)}

/* the pour — a glass that actually fills */
.pour-row{display:flex;gap:26px;align-items:center}
.glass{width:52px;height:72px;flex:none;border:1.5px solid var(--cap);border-top:none;border-radius:2px 2px 14px 14px;
       position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;left:-6px;right:-6px;top:0;height:1.5px;background:var(--cap)}
.glass .wine{position:absolute;left:0;right:0;bottom:0;height:52%;background:var(--red);opacity:.8;
             transition:height .55s cubic-bezier(.22,.61,.36,1)}
.pour-out{flex:1}

/* the matrix — a real quadrant with a moving dish */
.mplot{position:relative;height:132px;border:1px solid var(--hair);border-radius:8px;background:var(--paper);
       margin-bottom:16px;transition:background .3s ease}
.mplot::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair)}
.mplot::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--hair)}
.mplot .q{position:absolute;font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--unit)}
.mplot .q.tl{top:7px;left:9px}.mplot .q.tr{top:7px;right:9px}.mplot .q.bl{bottom:7px;left:9px}.mplot .q.br{bottom:7px;right:9px}
.mplot .dsh{position:absolute;width:12px;height:12px;border-radius:99px;background:var(--ink);border:2.5px solid var(--paper);
            box-shadow:0 0 0 1px var(--line);transform:translate(-50%,50%);
            transition:left .4s cubic-bezier(.22,.61,.36,1),bottom .4s cubic-bezier(.22,.61,.36,1),background .3s}
.mplot .dsh.hot{background:var(--red)}

/* the day — a stepper, counted by hand like a till */
.step-row{display:flex;align-items:center;gap:18px}
.stepb{width:44px;height:44px;flex:none;border-radius:99px;border:1px solid var(--line);background:none;cursor:pointer;
       font-family:var(--mono);font-size:18px;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.stepb:active{background:var(--ink);color:var(--bone)}
.step-val{font-family:var(--mono);font-weight:600;font-size:38px;letter-spacing:-.03em;min-width:88px;text-align:center;
          font-variant-numeric:tabular-nums}
@keyframes valtick{0%{opacity:.25}100%{opacity:1}}
.step-val.tick{animation:valtick .35s ease}

/* nav Etsy stays present but stops shouting — solid black belongs to in-page CTAs */
.btn-quiet{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;font-size:13.5px;
           font-family:var(--sans);color:var(--ink);background:none;border:1px solid var(--line);border-radius:99px;
           padding:11px 22px;cursor:pointer;transition:border-color .2s,transform .25s cubic-bezier(.22,.61,.36,1)}

/* bundle — the page's one inverted moment (the callout always inverts from the page) */
.bundle-box{margin-top:0;background:var(--ink);color:var(--bone);border:none;border-radius:12px;
            padding:56px 40px 48px;text-align:center;display:block;box-shadow:var(--shadow-lift);
            transition:background .3s ease,color .3s ease}
[data-theme="dark"] .bundle-box{background:#F0EDE6;color:#111}
.bundle-box .eb{color:inherit;opacity:.55}
.bundle-box .t{font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;margin-top:12px}
.bundle-box .t .d{color:var(--red)}
.bundle-box .s{opacity:.72;font-size:15px;margin:12px auto 0;max-width:46ch}
.bundle-box .ghost{border-color:color-mix(in srgb,currentColor 30%,transparent);color:inherit;margin-top:28px}
/* the deck again, in miniature — dealt when the box arrives, spread further on hover */
.mini-fan{position:relative;width:150px;height:96px;margin:0 auto 26px}
/* a soft table shadow grows under the hand as it is dealt */
.mini-fan::after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:8px;border-radius:99px;
                 background:radial-gradient(closest-side,color-mix(in srgb,currentColor 22%,transparent),transparent);
                 transform:translateX(-50%);transition:width 1s cubic-bezier(.22,.61,.36,1) .5s}
.bundle-box.dealt .mini-fan::after{width:120px}
/* NO transition here: while the deal keyframes run, a declared transition fires the
   instant the animation hands the property back, which reads as a hiccup at the end.
   The transition is granted later, by .settled, purely so hover stays smooth. */
.mini-fan i{position:absolute;left:50%;bottom:2px;width:48px;height:70px;margin-left:-24px;
            background:color-mix(in srgb,currentColor 8%,transparent);
            border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:6px;
            transform-origin:50% 120%;opacity:0;transform:translateY(26px) scale(.82)}
.bundle-box.settled .mini-fan i{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.mini-fan i:nth-child(1){--i:0;--r:-26deg;--yv:4px}
.mini-fan i:nth-child(2){--i:1;--r:-13deg;--yv:1px}
.mini-fan i:nth-child(3){--i:2;--r:0deg;--yv:-6px}
.mini-fan i:nth-child(4){--i:3;--r:13deg;--yv:1px}
.mini-fan i:nth-child(5){--i:4;--r:26deg;--yv:4px}
/* the deal: each card rises from the stack, overshoots its angle a breath, and settles.
   Keyframes drive the entrance; the class state below is where they land, so the
   hover transition takes over seamlessly once the deal is done. */
@keyframes dealone{
  0%{opacity:0;transform:translateY(26px) rotate(0deg) scale(.82)}
  55%{opacity:1;transform:translateY(calc(var(--yv) - 7px)) rotate(calc(var(--r)*1.14)) scale(1.03)}
  100%{opacity:1;transform:translateY(var(--yv)) rotate(var(--r)) scale(1)}
}
/* the deal replays EVERY time the bundle scrolls into view (JS toggles .dealt) */
.bundle-box.dealt .mini-fan i{opacity:1;transform:translateY(var(--yv)) rotate(var(--r)) scale(1);
                   animation:dealone .95s cubic-bezier(.3,.9,.35,1) backwards;
                   animation-delay:calc(.15s + var(--i)*.11s)}
/* on touch, once settled, the little hand keeps breathing — same life as the hero deck.
   It starts only after .settled so it can never collide with the deal keyframes. */
@media (hover:none){
  @keyframes minibreathe{
    0%,100%{transform:translateY(var(--yv)) rotate(var(--r)) scale(1)}
    50%{transform:translateY(calc(var(--yv) - 2px)) rotate(calc(var(--r)*1.14)) scale(1)}
  }
  html:not(.fine) .bundle-box.settled .mini-fan i{
    animation:minibreathe 8s ease-in-out infinite;
    animation-delay:calc(var(--i)*.5s)}
}
@media (prefers-reduced-motion:reduce){.bundle-box.dealt .mini-fan i{animation:none}}
.mini-fan i:nth-child(3)::after{content:"";position:absolute;top:7px;right:6px;width:5px;height:5px;border-radius:99px;background:var(--red)}
@media (any-hover:hover){
  html.fine .bundle-box.settled:hover .mini-fan i:nth-child(1){transform:translateY(6px) rotate(-33deg) scale(1)}
  html.fine .bundle-box.settled:hover .mini-fan i:nth-child(2){transform:translateY(2px) rotate(-16deg) scale(1)}
  html.fine .bundle-box.settled:hover .mini-fan i:nth-child(3){transform:translateY(-11px) rotate(0deg) scale(1)}
  html.fine .bundle-box.settled:hover .mini-fan i:nth-child(4){transform:translateY(2px) rotate(16deg) scale(1)}
  html.fine .bundle-box.settled:hover .mini-fan i:nth-child(5){transform:translateY(6px) rotate(33deg) scale(1)}
}

/* about page */
.story{max-width:660px;margin:0 auto}
.story p{font-size:16.5px;color:var(--ink);line-height:1.75;margin:26px 0 0}
/* an inline link must LOOK clickable. It had no underline and the body colour,
   which makes it invisible as a link. Quiet rule, red on hover. */
p a:not([class]),.story a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
         text-decoration-color:color-mix(in srgb,currentColor 42%,transparent);transition:text-decoration-color .2s}
.close p a{color:var(--ink)}
.story p.mut{color:var(--cap)}
.spec{border-top:1px solid var(--line);max-width:520px;margin:44px auto 0}
.spec-r{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair)}
.spec-r .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cap);flex:none}
.spec-r .dots{flex:1;border-bottom:1px dotted var(--unit);opacity:.5;transform:translateY(-3px);min-width:20px}
.spec-r .v{font-family:var(--mono);font-size:12.5px;flex:none}
.spec-r .v.none{color:var(--red)}

/* ── RESPONSIVE ── */
@media (max-width:960px){
  .hero{grid-template-columns:1fr!important;gap:56px;padding-top:64px!important;padding-bottom:72px!important}
  .nav-l{display:none}
  .nav-r .tog{display:none}        /* theme + languages live in the menu on small screens */
  .nav-r .langs{display:none}
  .menu-btn{display:block}
  .nav{position:sticky}
  .nav .wrap{position:relative}
  .sec{padding-top:76px;padding-bottom:76px}
  .rail + .sec{padding-top:72px}
  .tool-grid{grid-template-columns:1fr;gap:36px}
  .tool-grid.flip>.txt{order:1}
  .tool-grid.flip>.fig{order:2}
  /* the fan resizes properly — no scale() hacks, real dimensions */
  .fan-stage{height:350px;max-width:460px;margin:0 auto;width:100%}
  .fcard{width:164px;height:230px;margin:-115px 0 0 -82px;padding:16px 15px}
  .fcard .idx{font-size:42px}
  .fcard:nth-child(1){--tx:-84px;--rot:-12deg;--ty:12px}
  .fcard:nth-child(2){--tx:-42px;--rot:-6deg;--ty:0px}
  .fcard:nth-child(4){--tx:42px;--rot:6deg;--ty:0px}
  .fcard:nth-child(5){--tx:84px;--rot:12deg;--ty:12px}
}
@media (max-width:640px){
  .wrap{padding-left:22px;padding-right:22px}
  .langs{display:none}
  .fan-stage{height:300px}
  .fcard{width:138px;height:196px;margin:-98px 0 0 -69px}
  .fcard .idx{font-size:34px}
  .fcard:nth-child(1){--tx:-66px;--rot:-11deg;--ty:10px}
  .fcard:nth-child(2){--tx:-33px;--rot:-5.5deg;--ty:0px}
  .fcard:nth-child(4){--tx:33px;--rot:5.5deg;--ty:0px}
  .fcard:nth-child(5){--tx:66px;--rot:11deg;--ty:10px}
  .svc-h{padding:22px 14px;gap:14px}
  .svc-h .tag{display:none}
  .op-card{padding:48px 24px 42px;border-radius:10px}
  /* the strip hint was two flex items on one row; the second wrapped and orphaned words */
  .strip-hint{flex-direction:column;gap:6px;align-items:flex-start}
  /* the footer reads better centred on a phone, the way the live site has it */
  .foot .wrap{flex-direction:column;align-items:center;text-align:center;gap:10px}
  /* "when a template is not enough / see the services" stacks and centres instead of
     leaving the arrow alone on the second line */
  .svc-door{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
  .svc-door .sep{display:none}
  /* small print sits as a centred block on a phone, matching the footer */
  .sec.wrap > p.rv[style*="var(--mono)"]{text-align:center}
}

/* iOS selects text when a finger drags across a control. Prose stays selectable. */
button,.svc-h,.fcard,.eb,.tag,.rail,.strip-hint,.nav,.spec-r .k,.tab{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ── HOVER STATES — quarantined ──
   On a touch screen :hover STICKS after a tap: the row stays inverted, a card
   stays lifted, the rail stays paused. Every hover-only rule therefore lives
   here, where devices without a real pointer never see it. State-driven rules
   (.svc.open, .nav-l a.on) stay outside — those are real state, not hover. */
@media (any-hover:hover) and (any-pointer:fine){
  html.fine .nav-l a:hover{color:var(--red)}
  html.fine .langs span:hover{color:var(--red)}
  html.fine .tog:hover{color:var(--red)}
  html.fine .btn:hover{transform:translateY(-1px);opacity:.9}
  html.fine .ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
  html.fine .more:hover{color:var(--red);border-color:var(--red)}
  html.fine .op-card .more:hover{color:inherit;border-color:currentColor}
  html.fine p a:not([class]):hover, html.fine .story a:hover{text-decoration-color:var(--red)}
  html.fine .tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--unit)}
  html.fine .svc-h:hover::before{transform:scaleY(1)}
  html.fine .svc-h:hover{color:var(--bone)}
  html.fine[data-theme="dark"] .svc-h:hover{color:#111}
  html.fine .svc-h:hover .n{color:inherit}
  html.fine .svc-h:hover .tag{color:inherit;border-color:color-mix(in srgb,currentColor 35%,transparent)}
  html.fine .svc-in .svc-mail:hover{color:var(--red)}
  html.fine .svc-in .proof-link:hover{color:var(--red);text-decoration-color:var(--red)}
  html.fine .rail:hover .rail-track{animation-play-state:paused}
  html.fine .foot a:hover{color:var(--red)}
  html.fine .stepb:hover{border-color:var(--ink)}
  html.fine .btn-quiet:hover{border-color:var(--ink);transform:translateY(-1px)}
  html.fine .bundle-box .ghost:hover{border-color:currentColor}
}

/* ── first-visit language hint ─────────────────────────────── */
.lang-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  background:var(--inv-bg);color:var(--inv-tx);border-radius:99px;
  padding:10px 6px 10px 20px;display:flex;align-items:center;gap:14px;
  font-size:14px;line-height:1.4;box-shadow:0 8px 30px rgba(0,0,0,.25);
  max-width:calc(100% - 32px);white-space:nowrap}
.lang-hint a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.lang-hint button{background:none;border:0;color:inherit;opacity:.55;cursor:pointer;
  font-size:14px;padding:4px 12px;line-height:1}
.lang-hint button:hover{opacity:1}
@media (max-width:560px){.lang-hint{white-space:normal;border-radius:16px;
  bottom:12px;padding:12px 6px 12px 16px}}