:root{
  --ink:#0A1317;
  --ink-2:#0F1D23;
  --ink-3:#152831;
  --petrol:#1B3744;
  --gold:#D4A85B;
  --gold-hi:#F0CF8E;
  --gold-lo:#8A6420;
  --paper:#F4F1EA;
  --paper-2:#EBE6DC;
  --charcoal:#2A2B27;
  --sage:#9DAB9A;
  --line-gold:rgba(212,168,91,.38);
  --danger:#E8907F;
  --ok:#A9C3A4;

  /* semantic, swapped by theme */
  --bg:#0A1317; --bg-2:#0F1D23; --bg-rgb:10,19,23; --bg2-rgb:15,29,35;
  --fg:#EDE8DD; --fg-2:#B7BFBB; --fg-3:#8C9894; --line:rgba(237,232,221,.12);
  --accent:#D4A85B; --sky:rgba(27,55,68,.85); --glowbed:rgba(212,168,91,.20); --shadow:rgba(0,0,0,.75);

  --display:'Neue Machina','Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --script:'Sloop Script','Snell Roundhand',cursive;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --cw:min(62vw,300px,calc((100vh - 400px)/1.4));
  --cw:min(62vw,300px,calc((100dvh - 400px)/1.4));
  --ch:calc(var(--cw)*1.4);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
:root[data-theme="light"]{
  --bg:#F4F1EA; --bg-2:#EBE6DC; --bg-rgb:244,241,234; --bg2-rgb:235,230,220;
  --fg:#2A2B27; --fg-2:#55574F; --fg-3:#6E695D; --line:rgba(42,43,39,.16); --line-gold:rgba(138,100,32,.38);
  --accent:#8A6420; --sky:rgba(212,168,91,.22); --glowbed:rgba(27,55,68,.10); --shadow:rgba(42,43,39,.35);
  --danger:#9B3B2E; color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ type */
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:400}
.h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(1.65rem,7.4vw,2.6rem)}
.h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:1.08;font-size:clamp(1.25rem,5.2vw,1.7rem)}
.sl{font-family:var(--script);text-transform:none;font-weight:400;color:var(--accent);letter-spacing:0;
  font-size:1.38em;line-height:.8;padding:0 .08em .12em .04em;display:inline-block}
.muted{color:var(--fg-2)}
.fine{font-size:11.5px;color:var(--fg-3);line-height:1.55}

/* reveal: words rise out of a mask */
.rise{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.rise>span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*70ms + 120ms)}
@keyframes rise{to{transform:none}}
.fade-in{opacity:0;animation:fadein .8s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ shell */
.view{position:fixed;inset:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + var(--safe-t)) 18px 10px;position:relative;z-index:5}
.wordmark{height:20px;width:auto;filter:invert(1) brightness(1.04);opacity:.95}
[data-theme="light"] .wordmark{filter:none}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;color:var(--fg-2);transition:color .2s,transform .2s var(--ease-out)}
.iconbtn:active{transform:scale(.9)}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.steps{display:flex;gap:5px}
.steps i{width:18px;height:2px;background:var(--line);transition:background .5s var(--ease-out),width .5s var(--ease-out)}
.steps i.on{background:var(--gold);width:28px}

.atmos{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 70% at 50% 108%,var(--glowbed),transparent 60%),
    radial-gradient(90% 60% at 50% -10%,var(--sky),transparent 70%),
    var(--bg);transition:background .5s}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:1;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

.stage-wrap{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;min-height:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.screen.enter{animation:screenIn .7s var(--ease-out) both}
.screen.leave{animation:screenOut .45s var(--ease-io) both;pointer-events:none}
.screen.enter.back{animation-name:screenInBack}
.screen.leave.back{animation-name:screenOutBack}
@keyframes screenIn{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes screenOut{to{opacity:0;transform:translateX(-36px)}}
@keyframes screenInBack{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes screenOutBack{to{opacity:0;transform:translateX(36px)}}

/* ------------------------------------------------------------ buttons */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;
  background:var(--gold);color:var(--ink);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--gold);position:relative;overflow:hidden;
  transition:transform .25s var(--ease-out),box-shadow .35s var(--ease-out),background .25s;user-select:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{box-shadow:0 14px 34px -12px rgba(212,168,91,.7)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-gold)}
.btn.ghost:hover{box-shadow:none;border-color:var(--gold)}
.btn.block{width:100%}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn.busy{color:transparent}
.btn.busy::before{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-size:12.5px}

/* ------------------------------------------------------------ segmented */
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative;border:1px solid var(--line);padding:3px}
.seg button{position:relative;z-index:1;padding:9px 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);transition:color .35s}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .pill{position:absolute;top:3px;bottom:3px;left:3px;background:var(--gold);transition:transform .55s var(--ease-out),width .55s var(--ease-out)}

/* ------------------------------------------------------------ the card */
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;width:var(--cw);height:calc(var(--cw)*1.4);position:relative;transform-style:preserve-3d;
  transition:transform .9s var(--ease-out)}
.card.flipped{transform:rotateY(180deg)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:var(--ink-2);box-shadow:0 30px 60px -20px var(--shadow),0 0 0 1px rgba(255,255,255,.04)}
.card-back{transform:rotateY(180deg)}
.card-photo{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;transform:translate3d(var(--px,0),0,0) scale(1.02);
  transition:transform .6s var(--ease-out),filter .6s}
.card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,15,.55) 0%,rgba(6,12,15,0) 26%,rgba(6,12,15,.05) 46%,rgba(6,12,15,.88) 100%)}
.card-frame{position:absolute;inset:10px;border:1px solid rgba(240,207,142,.55);pointer-events:none}
.card-frame::before,.card-frame::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--gold-hi);border-style:solid}
.card-frame::before{top:-4px;left:-4px;border-width:1px 0 0 1px}
.card-frame::after{bottom:-4px;right:-4px;border-width:0 1px 1px 0}
.card-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:radial-gradient(60% 45% at var(--mx) var(--my),rgba(255,236,190,.55),transparent 70%)}
.card-sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.card-sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,230,180,.28),transparent);transform:skewX(-14deg)}
.card.live .card-sweep::before{animation:sweep 4.8s var(--ease-io) infinite 1.2s}
@keyframes sweep{0%{left:-60%}38%,100%{left:130%}}
.card-top{position:absolute;left:20px;right:20px;top:20px;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;
  font-size:clamp(6.5px,calc(var(--cw)*.03),9px);letter-spacing:.28em;text-transform:uppercase;color:rgba(237,232,221,.85)}
.card-top .eye{width:calc(var(--cw)*.075);height:auto;opacity:.95}
.card-body{position:absolute;left:20px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:6px}
.card-eyebrow{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi)}
.card-title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:calc(var(--cw)*.072);line-height:1.08;
  letter-spacing:-.005em;color:#F7F2E8;text-wrap:balance}
.card-value{font-size:calc(var(--cw)*.046);letter-spacing:.08em;color:rgba(247,242,232,.82);font-variant-numeric:tabular-nums}
.card-to{font-family:var(--script);font-size:calc(var(--cw)*.105);line-height:1;color:var(--gold-hi);min-height:1em;
  text-shadow:0 2px 14px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-badge{position:absolute;right:18px;top:46px;width:calc(var(--cw)*.2);opacity:.95;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}

.card[data-tone="sage"] .card-face{background:#3E4B40}
.card[data-tone="sage"] .card-shade{background:linear-gradient(180deg,rgba(40,52,42,.35),rgba(40,52,42,0) 30%,rgba(29,38,31,.92) 100%)}
.card[data-tone="sage"] .card-photo{filter:saturate(.6) sepia(.18) hue-rotate(40deg)}
.card[data-tone="obsidian"] .card-face{background:
  radial-gradient(120% 80% at 80% 0%,rgba(212,168,91,.14),transparent 55%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px),#0B0D0C}
.card[data-tone="obsidian"] .card-shade{background:none}
.card[data-tone="obsidian"] .card-title{color:var(--gold-hi)}
.card.custom .card-title{font-size:calc(var(--cw)*.1)}

.card-back{display:flex;flex-direction:column;padding:22px 20px 18px;gap:12px;
  background:linear-gradient(180deg,#F6F2EA,#EDE6D8);color:var(--charcoal)}
.card-back .eye{width:20px;opacity:.85}
.back-head{display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--cw)*.03);letter-spacing:.3em;text-transform:uppercase;color:#6B6458}
.back-msg{flex:1;font-size:calc(var(--cw)*.046);line-height:1.55;color:#3A3A35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;word-break:break-word}
.back-msg.empty{color:#A39C8E;font-style:italic}
.back-from{font-family:var(--script);font-size:calc(var(--cw)*.09);color:var(--gold-lo);line-height:1}
.back-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid #D9D0BF;padding-top:12px}
.back-foot .meta{font-size:calc(var(--cw)*.028);letter-spacing:.14em;text-transform:uppercase;color:#6B6458;line-height:1.7}
.back-foot .meta b{display:block;font-weight:400;color:#2A2B27;letter-spacing:.06em;font-size:calc(var(--cw)*.036)}
.qr{width:calc(var(--cw)*.27);aspect-ratio:1;background:#fff;padding:5px;display:grid;place-items:center;flex:none}
.qr svg{width:100%;height:100%}
.qr.pending{background:repeating-linear-gradient(45deg,#E6DFD1 0 4px,#F2ECE1 4px 8px);font-size:calc(var(--cw)*.024);letter-spacing:.12em;text-transform:uppercase;color:#8A8274;text-align:center;line-height:1.4;padding:6px}

/* ------------------------------------------------------------ step 1: carousel */
.choose-head{padding:4px 22px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.carousel{position:relative;flex:1;min-height:calc(var(--ch) + 30px);perspective:1100px;perspective-origin:50% 40%;
  touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.carousel .slot-card{position:absolute;left:50%;top:50%;margin-left:calc(var(--cw)/-2);margin-top:calc(var(--ch)/-2);
  will-change:transform,opacity;transform-style:preserve-3d}
.carousel .slot-card .card{transition:none}
.slot-card .glow{position:absolute;inset:-14px;background:radial-gradient(closest-side,rgba(212,168,91,.55),transparent);
  filter:blur(18px);opacity:0;transition:opacity .6s var(--ease-out);z-index:-1}
.slot-card.active .glow{opacity:var(--glow,1);animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05);filter:blur(24px)}}
.slot-card .ring{position:absolute;inset:-1px;border:1px solid var(--gold);opacity:0;transition:opacity .5s;pointer-events:none;
  box-shadow:0 0 22px rgba(212,168,91,.45),inset 0 0 18px rgba(212,168,91,.2)}
.slot-card.active .ring{opacity:1}
.slot-card.active{cursor:pointer}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:46px;height:46px;display:none;place-items:center;
  border:1px solid var(--line-gold);color:var(--accent);background:rgba(var(--bg-rgb),.5);backdrop-filter:blur(6px);transition:background .2s}
.car-nav:hover{background:rgba(212,168,91,.15)}
.car-nav.prev{left:max(16px,calc(50% - var(--cw)*1.35))}
.car-nav.next{right:max(16px,calc(50% - var(--cw)*1.35))}
.car-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
@media (hover:hover) and (min-width:700px){.car-nav{display:grid}}

.caption{text-align:center;min-height:44px;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:2px}
.caption .c1{font-size:12.5px;color:var(--fg)}
.caption .c2{font-size:11px;color:var(--fg-3);letter-spacing:.04em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caption.swap{animation:capswap .5s var(--ease-out)}
@keyframes capswap{from{opacity:0;transform:translateY(6px)}}
.dots{display:flex;gap:6px;justify-content:center;margin-top:6px}
.dots i{width:5px;height:5px;background:var(--line);transition:all .45s var(--ease-out)}
.dots i.on{background:var(--gold);width:16px}

.dock{position:relative;padding:4px 22px calc(18px + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3}
.chev{display:flex;flex-direction:column;align-items:center;height:22px;color:var(--accent)}
.chev svg{width:22px;height:11px;stroke:currentColor;fill:none;stroke-width:1.5;margin-top:-3px;animation:chev 1.8s var(--ease-io) infinite}
.chev svg:nth-child(2){animation-delay:.18s}
@keyframes chev{0%,100%{opacity:.15;transform:translateY(-3px)}50%{opacity:1;transform:translateY(2px)}}
.slot{--p:0;position:relative;width:min(78vw,340px);height:54px;
  background:linear-gradient(180deg,#05090B,#0C171C);box-shadow:inset 0 10px 18px rgba(0,0,0,.8),inset 0 -1px 0 rgba(212,168,91,calc(.25 + var(--p)*.75));
  border:1px solid rgba(212,168,91,calc(.18 + var(--p)*.6));transition:border-color .2s}
.slot::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);opacity:calc(.25 + var(--p)*.75);
  box-shadow:0 0 calc(8px + var(--p)*30px) rgba(240,207,142,calc(.3 + var(--p)*.7));transform:scaleX(calc(.5 + var(--p)*.5))}
.slot::after{content:"";position:absolute;inset:-40px -20px;background:radial-gradient(closest-side,rgba(212,168,91,.45),transparent);
  opacity:calc(var(--p)*.9);pointer-events:none;filter:blur(6px)}
.slot.flash{animation:slotflash .9s var(--ease-out)}
@keyframes slotflash{0%{box-shadow:inset 0 0 0 rgba(0,0,0,0),0 0 0 rgba(212,168,91,0)}30%{box-shadow:inset 0 0 40px rgba(240,207,142,.9),0 0 60px rgba(212,168,91,.8)}}
.dock .hint{font-size:11px;letter-spacing:.06em;color:var(--fg-3);text-align:center}
.dock .hint b{color:var(--fg-2);font-weight:400}

/* ------------------------------------------------------------ studio / forms */
.split{flex:1;display:flex;flex-direction:column;min-height:0}
.preview{flex:none;display:grid;place-items:center;padding:6px 0 14px;perspective:1100px;position:relative}
.preview .card{--cw:min(46vw,230px);transform:rotateX(var(--rx)) rotateY(var(--ry));touch-action:pan-y}
.preview .card.flipped{transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + 180deg))}
.preview .card.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 -6px}}
.preview .turn{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border:1px solid var(--line-gold);display:grid;place-items:center;color:var(--accent);background:rgba(var(--bg-rgb),.55);backdrop-filter:blur(6px)}
.preview .turn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.sheet{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,rgba(var(--bg2-rgb),.92),var(--bg-2));
  border-top:1px solid var(--line-gold);padding:22px 22px calc(110px + var(--safe-b));display:flex;flex-direction:column;gap:22px;
  overscroll-behavior:contain}
.sheet>*{opacity:0;animation:fadein .6s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*60ms + 150ms)}
.group{display:flex;flex-direction:column;gap:10px}
.group>label,.lbl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.field{position:relative}
.field input,.field textarea,.field select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0 10px;font-size:16px;color:var(--fg);border-radius:0;outline:none;transition:border-color .3s}
.field textarea{resize:none;min-height:84px;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field .count{position:absolute;right:0;bottom:-18px;font-size:10px;color:var(--fg-3)}
.field select option{background:var(--bg-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 13px;border:1px solid var(--line);font-size:12px;color:var(--fg-2);transition:all .3s var(--ease-out)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:var(--gold)}
.chip:active{transform:scale(.95)}
.skins{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.skins::-webkit-scrollbar{display:none}
.skin{flex:none;width:62px;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:9.5px;letter-spacing:.06em;color:var(--fg-3);text-align:center;line-height:1.25}
.skin .sw{width:62px;height:86px;position:relative;overflow:hidden;border:1px solid var(--line);transition:transform .35s var(--ease-out),border-color .3s,box-shadow .3s}
.skin .sw img{width:100%;height:100%;object-fit:cover}
.skin .sw.obsidian{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px),#0B0D0C}
.skin .sw.obsidian::after{content:"";position:absolute;inset:6px;border:1px solid rgba(212,168,91,.6)}
.skin .sw.sage img{filter:saturate(.6) sepia(.18) hue-rotate(40deg)}
.skin[aria-pressed="true"] .sw{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 10px 22px -10px rgba(212,168,91,.8)}
.skin[aria-pressed="true"]{color:var(--accent)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toggle .t1{font-size:13px}
.toggle .t2{font-size:11px;color:var(--fg-3)}
.switch{width:46px;height:26px;border:1px solid var(--line-gold);position:relative;flex:none;transition:background .35s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--fg-2);transition:transform .45s var(--ease-out),background .35s}
.switch[aria-checked="true"]{background:rgba(212,168,91,.18)}
.switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--gold)}
.amount-in{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line-gold);padding-bottom:6px}
.amount-in span{font-size:13px;color:var(--fg-3)}
.amount-in input{flex:1;background:none;border:0;outline:none;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.01em;width:100%;font-variant-numeric:tabular-nums}
.err{color:var(--danger);font-size:12px;min-height:1em}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border:1px solid var(--line);padding:16px 14px;text-align:left;display:flex;flex-direction:column;gap:8px;transition:all .35s var(--ease-out);position:relative;overflow:hidden}
.tile svg{width:22px;height:22px;stroke:var(--fg-2);fill:none;stroke-width:1.4;transition:stroke .3s}
.tile .t1{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tile .t2{font-size:11px;color:var(--fg-3);line-height:1.45}
.tile[aria-pressed="true"]{border-color:var(--accent);background:rgba(212,168,91,.1)}
.tile[aria-pressed="true"] svg{stroke:var(--accent)}
.footbar{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:14px 22px calc(14px + var(--safe-b));
  background:linear-gradient(180deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.92) 30%);display:flex;gap:10px}
.footbar .btn{flex:1}

/* review */
.summary{display:flex;gap:16px;align-items:center}
.summary .card{--cw:96px;flex:none;box-shadow:0 18px 30px -16px rgba(0,0,0,.9)}
.summary .card .card-title{font-size:9px}
.summary .card .card-value,.summary .card .card-to,.summary .card .card-eyebrow,.summary .card .card-top span{display:none}
.summary .s1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;line-height:1.15}
.summary .s2{font-size:12px;color:var(--fg-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:12.5px}
.kv dt{color:var(--fg-3)}
.kv dd{text-align:right;color:var(--fg)}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-gold);padding-top:14px}
.total .v{font-family:var(--display);font-weight:700;font-size:24px;font-variant-numeric:tabular-nums}
.fx{display:flex;gap:6px;flex-wrap:wrap}
.fx button{padding:6px 10px;border:1px solid var(--line);font-size:11px;letter-spacing:.12em;color:var(--fg-2);transition:all .3s}
.fx button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.fx-out{font-size:12px;color:var(--fg-2);min-height:1.3em;transition:opacity .3s}
.check{display:flex;gap:12px;align-items:flex-start;font-size:12px;color:var(--fg-2);line-height:1.5;cursor:pointer}
.check input{appearance:none;width:20px;height:20px;border:1px solid var(--line-gold);flex:none;margin-top:1px;display:grid;place-items:center;transition:background .25s}
.check input:checked{background:var(--gold)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #0A1317;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* ------------------------------------------------------------ done + envelope */
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:22px;padding:10px 26px calc(24px + var(--safe-b));text-align:center;overflow-y:auto}
.envelope{--ew:min(74vw,320px);width:var(--ew);height:calc(var(--ew)*.66);position:relative;perspective:900px;flex:none;margin-top:30px}
.env-back{position:absolute;inset:0;background:linear-gradient(180deg,#E9E2D3,#DDD4C2);box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.env-front{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,#F1EBDF,#E6DECD);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.env-front::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#DCD3C0,#E9E2D3);
  clip-path:polygon(0 100%,50% 48%,100% 100%)}
.env-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(120,100,70,.18) 50%,transparent calc(50% + .5px)) left/50% 100% no-repeat,
             linear-gradient(to top left,transparent calc(50% - .5px),rgba(120,100,70,.18) 50%,transparent calc(50% + .5px)) right/50% 100% no-repeat}
.env-flap{position:absolute;left:0;right:0;top:0;height:62%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;
  transition:transform .9s var(--ease-io),z-index 0s .45s}
.env-flap::before,.env-flap::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden}
.env-flap::before{background:linear-gradient(180deg,#F3EEE3,#E2DACA)}
.env-flap::after{background:#D8CFBD;transform:rotateX(180deg)}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1}
.env-card{position:absolute;left:8%;right:8%;top:8%;bottom:6%;z-index:2;transition:transform 1.1s var(--ease-out) .55s}
.env-card .card{--cw:calc(var(--ew)*.84);height:calc(var(--cw)*.62)}
.seal{position:absolute;left:50%;top:62%;z-index:6;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3D79C,#C89A47 45%,#8A6420 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 -4px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.35);
  display:grid;place-items:center;cursor:pointer;transition:transform .5s var(--ease-out),opacity .5s;touch-action:none}
.seal::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(90,60,15,.45)}
.seal img{width:30px;opacity:.85;filter:sepia(1) saturate(2) brightness(.55)}
.seal.pulse{animation:sealpulse 2.4s ease-in-out infinite}
@keyframes sealpulse{50%{transform:scale(1.07);box-shadow:0 6px 14px rgba(0,0,0,.45),0 0 0 10px rgba(212,168,91,.12),inset 0 -4px 8px rgba(0,0,0,.25)}}
.seal.broken{transform:scale(1.4) rotate(-18deg);opacity:0;pointer-events:none}
.seal.stamp{animation:stamp .7s var(--ease-out) both}
@keyframes stamp{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
/* centre when it fits, scroll from the top when it does not */
.done>:first-child{margin-top:auto}.done>:last-child{margin-bottom:auto}
.done .ref{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em}
.done .stack{display:flex;flex-direction:column;gap:10px;width:min(100%,380px)}

/* recipient */
.gift-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 24px;position:relative;z-index:2}
.gift-stage .intro{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;transition:opacity .6s,transform .8s var(--ease-out)}
.gift-stage .intro.gone{opacity:0;transform:translateY(-20px)}
.gift-stage .name{font-family:var(--script);color:var(--gold-hi);font-size:clamp(2.6rem,13vw,4rem);line-height:.9}
.reveal{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(120% 60% at 50% 0%,var(--sky),transparent 70%),var(--bg);animation:fadein .6s var(--ease-out) both}
.reveal .hero{display:grid;place-items:center;padding:calc(70px + var(--safe-t)) 0 26px;perspective:1100px;flex:none}
.reveal .hero .card{--cw:min(68vw,300px)}
.reveal .hero .card.rise-in{animation:cardRise 1.3s var(--ease-out) both}
@keyframes cardRise{from{transform:translateY(46vh) scale(.6) rotateX(28deg);opacity:0}60%{opacity:1}}
.reveal .panel{background:var(--paper);color:var(--charcoal);padding:26px 22px calc(30px + var(--safe-b));display:flex;flex-direction:column;gap:18px;
  flex:1;animation:panelUp .9s var(--ease-out) .6s both}
@keyframes panelUp{from{transform:translateY(40px);opacity:0}}
.reveal .panel .eyebrow{color:var(--gold-lo)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 10px;align-self:flex-start}
.status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px transparent}}
.status.ACTIVE{color:#3F6B47;background:rgba(157,171,154,.28)}
.status.REDEEMED,.status.EXPIRED,.status.CANCELLED{color:#8A5A40;background:rgba(212,168,91,.18)}
.status.PENDING_PAYMENT{color:#6B6458;background:rgba(0,0,0,.06)}
.reveal .panel .kv dt{color:#7A7466}.reveal .panel .kv dd{color:var(--charcoal)}
.reveal .panel .btn.ghost{color:var(--charcoal);border-color:#CBBF9F}
.reveal .panel .fine{color:#7A7466}
.reveal .panel .bigval{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.01em;line-height:1.1}
.reveal .codebox{display:flex;align-items:center;gap:14px;border:1px solid #D9D0BF;padding:12px}
.reveal .codebox .qr{--cw:300px;width:96px}
.reveal .codebox .c{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.06em}

canvas.dust{position:fixed;inset:0;pointer-events:none;z-index:4}

/* ------------------------------------------------------------ staff (light, operational) */
.staff{background:var(--paper);color:var(--charcoal)}
.staff .topbar{border-bottom:1px solid #DDD5C5;background:var(--paper)}
.staff .wordmark{filter:none}
.staff .iconbtn{color:#6B6458}
.staff-body{flex:1;overflow-y:auto;padding:20px 18px calc(30px + var(--safe-b));display:flex;flex-direction:column;gap:18px}
.staff .eyebrow{color:var(--gold-lo)}
.staff .h2{color:var(--charcoal)}
.staff .field input,.staff .field select,.staff .field textarea{color:var(--charcoal);border-bottom-color:#CFC6B4}
.staff .field input:focus{border-color:var(--petrol)}
.staff .field select option{background:#fff}
.staff .btn{background:var(--petrol);border-color:var(--petrol);color:var(--gold)}
.staff .btn.ghost{background:transparent;color:var(--charcoal);border-color:#BFB49C}
.staff .btn.danger{background:transparent;color:#9B3B2E;border-color:#D8A79C}
.staff .btn.busy::before{border-color:var(--gold);border-right-color:transparent}
.staff .muted,.staff .fine{color:#6B6458}
.staff .err{color:#9B3B2E}
.pin{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:12px}
.pin-dots{display:flex;gap:12px;height:14px}
.pin-dots i{width:12px;height:12px;border:1px solid var(--petrol);transition:background .2s,transform .3s var(--ease-out)}
.pin-dots i.on{background:var(--petrol);transform:scale(1.15)}
.pin-dots.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:12px}
.pad button{height:64px;border:1px solid #D2C8B4;font-family:var(--display);font-weight:500;font-size:22px;background:#FBF9F4;transition:background .15s,transform .15s}
.pad button:active{background:var(--petrol);color:var(--gold);transform:scale(.95)}
.pad .wide{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono)}
.tabs{display:flex;border-bottom:1px solid #DDD5C5;overflow-x:auto;scrollbar-width:none;background:var(--paper)}
.tabs button{flex:1;padding:13px 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7A7466;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--petrol);border-color:var(--gold)}
.scanner{position:relative;aspect-ratio:1;max-width:420px;width:100%;align-self:center;background:#111;overflow:hidden}
.scanner video{width:100%;height:100%;object-fit:cover}
.scanner .reticle{position:absolute;inset:18%;border:2px solid rgba(212,168,91,.9);box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.scanner .reticle::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--gold-hi);box-shadow:0 0 12px var(--gold);animation:scan 2s var(--ease-io) infinite}
@keyframes scan{0%,100%{top:4%}50%{top:94%}}
.scanner .placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#9A927F;font-size:12px;text-align:center;padding:30px}
.vcard{border:1px solid #DDD5C5;background:#FBF9F4;padding:18px;display:flex;flex-direction:column;gap:14px;animation:fadein .5s var(--ease-out)}
.vcard .bal{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.vcard .kv dt{color:#7A7466}.vcard .kv dd{color:var(--charcoal)}
.hist{display:flex;flex-direction:column;border-top:1px solid #E3DCCD}
.hist div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #E3DCCD;font-size:12px}
.list{display:flex;flex-direction:column;border-top:1px solid #DDD5C5}
.list button{display:flex;justify-content:space-between;gap:12px;text-align:left;padding:14px 4px;border-bottom:1px solid #DDD5C5;transition:background .2s}
.list button:active{background:#EFE9DC}
.list .l1{font-weight:600;font-size:13px}
.list .l2{font-size:11.5px;color:#7A7466}
.staff .chip{border-color:#CFC6B4;color:#5B5E57}
.staff .chip[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--gold)}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,30px);opacity:0;z-index:50;
  background:var(--charcoal);color:var(--paper);padding:12px 18px;font-size:12.5px;max-width:calc(100vw - 32px);
  transition:transform .45s var(--ease-out),opacity .35s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.confirm-hint{font-size:11.5px;color:#9B3B2E;text-align:center}


/* ------------------------------------------------------------ language + theme */
.tools{display:flex;align-items:center;gap:2px}
.tools .iconbtn{width:36px;height:36px}
.langbtn{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding:8px 6px;min-height:36px}
.theme-ico{position:relative;width:18px;height:18px}
.theme-ico svg{position:absolute;inset:0;width:18px;height:18px;transition:transform .6s var(--ease-out),opacity .4s}
[data-theme="dark"] .theme-ico .sun,[data-theme="light"] .theme-ico .moon{transform:rotate(-90deg) scale(.4);opacity:0}
.langmenu{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.45);
  animation:fadein .3s var(--ease-out)}
.langmenu .lm{width:min(100%,420px);background:var(--bg-2);border-top:1px solid var(--line-gold);padding:18px 18px calc(18px + var(--safe-b));
  display:flex;flex-direction:column;animation:sheetUp .5s var(--ease-out)}
@keyframes sheetUp{from{transform:translateY(100%)}}
.langmenu button{display:flex;justify-content:space-between;align-items:center;padding:15px 6px;border-bottom:1px solid var(--line);font-size:15px;text-align:left}
.langmenu button[aria-current="true"]{color:var(--accent)}
.langmenu button[aria-current="true"]::after{content:"";width:8px;height:8px;background:var(--accent)}
@media (min-width:700px){.langmenu{align-items:center}.langmenu .lm{border:1px solid var(--line-gold)}}
.theme-fade{transition:background-color .5s,color .5s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s}

/* ------------------------------------------------------------ payment choice */
.pays{display:flex;flex-direction:column;gap:8px}
.pay{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;text-align:left;padding:13px 14px;border:1px solid var(--line);
  transition:border-color .3s,background .3s,transform .2s var(--ease-out)}
.pay:active{transform:scale(.985)}
.pay .r{grid-row:span 2;width:18px;height:18px;border:1px solid var(--line-gold);border-radius:50%;display:grid;place-items:center}
.pay .r::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .35s var(--ease-out)}
.pay .p1{font-size:13px;color:var(--fg)}
.pay .p2{font-size:11px;color:var(--fg-3);line-height:1.4}
.pay[aria-checked="true"]{border-color:var(--accent);background:rgba(212,168,91,.08)}
.pay[aria-checked="true"] .r::after{transform:scale(1)}

/* ------------------------------------------------------------ order page / bank transfer */
.order{flex:1;overflow-y:auto;padding:8px 22px calc(30px + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;z-index:2}
.order .wrap{width:min(100%,440px);display:flex;flex-direction:column;gap:18px}
.order .status{align-self:flex-start}
.status.dk.ACTIVE{color:var(--ok);background:rgba(169,195,164,.14)}
.status.dk.PENDING_PAYMENT{color:var(--fg-2);background:var(--line)}
[data-theme="light"] .status.dk.ACTIVE{color:#3F6B47;background:rgba(157,171,154,.28)}
.bank{border:1px solid var(--line-gold);display:flex;flex-direction:column}
.bank .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.bank .row:last-child{border-bottom:0}
.bank .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.bank .v{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.03em;word-break:break-all}
.bank .n{font-size:11.5px;color:var(--fg-2)}
.cp{flex:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-gold);padding:8px 10px;min-width:72px;transition:all .3s}
.cp.ok{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.drop{position:relative;border:1px dashed var(--line-gold);padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;transition:background .3s,border-color .3s}
.drop:hover,.drop.over{background:rgba(212,168,91,.08);border-color:var(--accent)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.4}
.drop .d1{font-size:13px}
.drop.done{border-style:solid;border-color:var(--ok)}
.bar{height:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.pulse-line{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:pl 1.4s var(--ease-io) infinite}
@keyframes pl{from{background-position:-50% 0}to{background-position:150% 0}}
.tick{width:64px;height:64px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;align-self:center}
.tick svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .8s var(--ease-out) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ------------------------------------------------------------ short phones (iPhone SE, landscape-ish) */
@media (max-height:720px){
  :root{--cw:min(62vw,300px,calc((100dvh - 330px)/1.4))}
  .choose-head{gap:8px}
  .choose-head .eyebrow{display:none}
  .h1{font-size:clamp(1.35rem,6.4vw,2rem)}
  .seg button{padding:7px 14px}
  .caption{min-height:22px}
  .caption .c2,.dots{display:none}
  .dock{gap:6px;padding-bottom:calc(10px + var(--safe-b))}
  .chev{height:14px}
  .slot{height:40px}
  .carousel{min-height:calc(var(--cw)*1.4 + 12px)}
}

/* ------------------------------------------------------------ desktop */
@media (min-width:900px){
  :root{--cw:min(300px,calc((100dvh - 480px)/1.4))}
  .choose-head{align-items:center;text-align:center;padding-top:10px}
  .split{flex-direction:row}
  .preview{flex:1;padding:0}
  .preview .card{--cw:330px}
  .sheet{flex:0 0 440px;border-top:0;border-left:1px solid var(--line-gold);padding-bottom:120px}
  .footbar{left:auto;width:440px;background:linear-gradient(180deg,rgba(var(--bg2-rgb),0),var(--bg-2) 30%)}
  .reveal{flex-direction:row}
  .reveal .hero{flex:1;padding:0}
  .reveal .panel{flex:0 0 460px;justify-content:center;overflow-y:auto}
}

/* ------------------------------------------------------------ print: the certificate */
#cert{display:none}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  body>*:not(#cert){display:none!important}
  #cert{display:flex!important;flex-direction:column;width:210mm;height:297mm;background:#F4F1EA;color:#2A2B27;font-family:var(--mono);
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #cert .band{height:118mm;position:relative;overflow:hidden}
  #cert .band .ph{width:100%;height:100%;object-fit:cover}
  #cert .band .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,15,.35),rgba(6,12,15,.75))}
  #cert .band .logo{position:absolute;left:16mm;top:14mm;height:7mm;filter:invert(1)}
  #cert .band .t{position:absolute;left:16mm;right:16mm;bottom:14mm;color:#F7F2E8}
  #cert .band .t .k{font-size:8pt;letter-spacing:.3em;text-transform:uppercase;color:#F0CF8E}
  #cert .band .t h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:24pt;line-height:1.05;margin-top:3mm}
  #cert .band .frame{position:absolute;inset:6mm;border:.3mm solid rgba(240,207,142,.7)}
  #cert .main{flex:1;padding:14mm 16mm;display:flex;flex-direction:column;gap:7mm}
  #cert .for{font-family:var(--script);font-size:36pt;color:#8A6420;line-height:1.1;padding-left:4mm}
  #cert .msg{font-size:11pt;line-height:1.6;max-width:150mm}
  #cert .from{font-family:var(--script);font-size:20pt;color:#8A6420}
  #cert .foot{margin-top:auto;display:flex;gap:10mm;align-items:flex-end;border-top:.3mm solid #CBBF9F;padding-top:7mm}
  #cert .foot .qr{width:34mm;height:34mm;padding:2mm}
  #cert .foot .info{flex:1;font-size:9pt;line-height:1.7}
  #cert .foot .info b{font-family:var(--display);font-size:13pt;letter-spacing:.05em;display:block;margin-bottom:2mm}
  #cert .foot .eye{width:12mm;opacity:.8}
}

/* ------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise>span,.fade-in,.sheet>*{transform:none;opacity:1}
  .grain{display:none}
}