/* The Royal Club: the seal and the register pages.
 *
 * The seal is the Royal Moral's own dial: a thin steel bezel, a lacquered field (green for
 * a Founding Member, white for a Member), a fine inner line, the number where the hands
 * meet and the calligraphy band from the dial across its lower third. Its back is the
 * caseback, with the logo. Copper never touches the green; a reserved seal is drawn on
 * cream. The band and the logo are masks, so they take the seal's own ink colour -- and
 * the calligraphy is never mirrored for Arabic.
 */
:root{--oct:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}

.sl{--s:22rem;display:block;width:var(--s);height:var(--s);position:relative;flex:none;margin-inline:auto;perspective:140rem;-webkit-tap-highlight-color:transparent}
label.sl{cursor:pointer}
.sl>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sl>input:focus-visible~.sl__in{outline:.2rem solid var(--palm);outline-offset:.6rem}
.sl__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.75,.2,1)}
.sl>input:checked~.sl__in{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.sl__in{transition:none}}
.sl__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sl__back{transform:rotateY(180deg)}
.sl__sh{position:absolute;inset:7% 7% 3%;filter:blur(calc(var(--s)*.045));transform:translateY(calc(var(--s)*.045));opacity:.42}
.sl__sh i{position:absolute;inset:0;clip-path:var(--oct);background:#1E1C19}
.sl__bz,.sl__ch,.sl__fd{position:absolute;clip-path:var(--oct)}
.sl__bz{inset:0;background:linear-gradient(145deg,#F7F7F4 0%,#D3D2CD 26%,#8F8E89 52%,#E3E2DE 70%,#A7A6A1 100%)}
.sl__ch{inset:2.3%;background:linear-gradient(325deg,#FCFCFA 0%,#C4C3BE 38%,#EEEDE9 60%,#8B8A85 100%)}
.sl__fd{inset:4.6%;overflow:hidden;background:var(--field);color:var(--ink2)}
.sl.fm{--ink2:#EAE2CF;--field:radial-gradient(120% 90% at 50% 20%,#23513F 0%,#173A30 55%,#0F281F 100%)}
.sl.mb{--ink2:#141414;--field:radial-gradient(120% 90% at 50% 20%,#FFFFFF 0%,#F7F5F0 55%,#E6E2D9 100%)}
.sl__fd::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.035) 0 .6deg,rgba(0,0,0,.035) .6deg 1.2deg)}
.sl.mb .sl__fd:not(.sl__fd--b)::before{background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,0,0,.012) 0 .6deg,rgba(255,255,255,0) .6deg 1.2deg)}
.sl__fd--b::before{background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 .05rem,transparent .05rem .28rem)}
.sl.mb .sl__fd--b::before{background:repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.045) 0 .05rem,transparent .05rem .28rem)}
.sl__rh{position:absolute;inset:0;width:100%;height:100%}
.sl__rh polygon{fill:none;stroke:var(--ink2);stroke-opacity:.34;stroke-width:.6}
.sl__top{position:absolute;left:0;right:0;top:16%;text-align:center;font-size:calc(var(--s)*.034);font-weight:500;letter-spacing:.34em;text-transform:uppercase;opacity:.85;line-height:1}
.sl__num{position:absolute;left:0;right:0;top:26%;text-align:center;font-weight:200;font-size:calc(var(--s)*.2);line-height:1;letter-spacing:.03em;white-space:nowrap}
.sl.mb .sl__num{font-size:calc(var(--s)*.168);top:28.5%}
.sl__kind{position:absolute;left:0;right:0;top:50.5%;text-align:center;font-size:calc(var(--s)*.029);font-weight:500;letter-spacing:.36em;text-transform:uppercase;opacity:.8;line-height:1}
[dir=rtl] .sl__top{letter-spacing:0;font-size:calc(var(--s)*.047)}
[dir=rtl] .sl__num{font-weight:300;letter-spacing:0}
[dir=rtl] .sl__kind{letter-spacing:0;font-size:calc(var(--s)*.044)}
.sl__cal{position:absolute;left:-2%;right:-2%;top:62.5%;height:calc(var(--s)*.1195);background:var(--ink2);
  -webkit-mask:url(/static/club/band.png) center/100% 100% no-repeat;mask:url(/static/club/band.png) center/100% 100% no-repeat}
.sl__logo{position:absolute;left:50%;top:50%;width:calc(var(--s)*.24);aspect-ratio:132/180;transform:translate(-50%,-50%);background:var(--ink2);opacity:.94;
  -webkit-mask:url(/static/logo-mark@2x.png) center/contain no-repeat;mask:url(/static/logo-mark@2x.png) center/contain no-repeat}

/* ---- the register pages ---- */
.reg{min-height:100vh;min-height:100dvh}
.reg__top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.6rem;max-width:56rem;margin:0 auto;padding:1.6rem 2rem;border-bottom:.1rem solid var(--hair)}
.reg__logo{height:3.2rem;width:auto}
.reg__club{text-align:center;font-size:1.3rem;color:var(--muted)}
.reg__lang{font-size:1.3rem;color:var(--ink);text-decoration:none;border-bottom:.1rem solid var(--copper)}
.reg__main{max-width:48rem;margin:0 auto;padding:3.2rem 2rem 6.4rem}
.reg__card{display:flex;flex-direction:column}
.reg__card .sl{margin-bottom:2.4rem}
.reg__h{font-weight:300;font-size:clamp(2.6rem,6vw,3.2rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 .8rem;text-align:center}
[dir=rtl] .reg__h{letter-spacing:0;line-height:1.45}
.reg__h2{font-weight:300;font-size:2.2rem;margin:3.2rem 0 1.2rem}
.reg__lede{text-align:center;color:var(--prose);margin:0 0 2.4rem}
.reg__c{text-align:center}
/* the kind and number, under a greeting that uses the name */
.reg__sub,.club__sub{margin:-.2rem 0 1.6rem;font-size:1.4rem;color:var(--muted);font-variant-numeric:tabular-nums}
.reg__number{font-size:2.8rem !important;letter-spacing:.2em;text-align:center;font-weight:300;min-height:6.4rem}
.reg__code{font-size:2.6rem !important;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;min-height:6.4rem}
.reg__note{text-align:center;font-size:1.3rem;color:var(--muted);margin:1.4rem 0 0}
.reg__alt{text-align:center;margin:2.4rem 0 0}
.reg__links{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;justify-content:center;margin-top:2.4rem}
.reg__links--end{border-top:.1rem solid var(--hair);padding-top:2rem;margin-top:3.2rem}
.reg__links form{margin:0}
.reg__quiet{display:inline-flex;align-items:center;min-height:4.4rem;padding:0;background:none;border:0;cursor:pointer;font:inherit;font-size:1.4rem;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:.4rem}
.reg__facts{margin:0;border-top:.1rem solid var(--hair)}
.reg__facts>div{display:flex;justify-content:space-between;gap:1.6rem;padding:1.2rem 0;border-bottom:.1rem solid var(--hair);font-size:1.4rem}
.reg__facts dt{color:var(--muted)}
.reg__facts dd{margin:0}
.reg__orders{list-style:none;margin:0;padding:0;border-top:.1rem solid var(--hair)}
.reg__orders li{display:flex;justify-content:space-between;align-items:center;gap:1.6rem;padding:1.4rem 0;border-bottom:.1rem solid var(--hair)}
.reg__orders b{display:block;font-weight:500;font-size:1.5rem}
.reg__orders small{display:block;font-size:1.25rem;color:var(--muted);text-align:start}

/* ---- the seal's other states ---- */
.sl__ring{position:absolute;inset:0;width:100%;height:100%}
.sl__ring text{fill:var(--ink2);fill-opacity:.86;font-family:var(--sans);font-size:7.2px;font-weight:500;letter-spacing:1.9px}
[dir=rtl] .sl__ring text{font-family:var(--arabic);font-size:9px;letter-spacing:0}
.sl__ring circle{fill:none;stroke:var(--ink2);stroke-opacity:.3;stroke-width:.5}
/* small (under 8rem): the number and the band only */
.sl.xs .sl__num{font-size:calc(var(--s)*.25);top:21%;font-weight:300}
.sl.xs.mb .sl__num{font-size:calc(var(--s)*.21);top:23%}
.sl.xs .sl__cal{top:60%}
.sl.xs .sl__sh{opacity:.3}
.sl.xs .sl__logo{width:calc(var(--s)*.34)}
/* A seal turns once, all the way round -- dial, caseback, dial -- the first time it comes
   into view (static/seal.js). Slow at both ends, like a coin set spinning by hand. */
@keyframes slSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
/* the shadow turns with it -- same length, same easing -- so it narrows as the seal goes edge-on */
@keyframes slSpinShadow{from{transform:translateY(calc(var(--s)*.045)) rotateY(0)}to{transform:translateY(calc(var(--s)*.045)) rotateY(360deg)}}
.sl.is-spin .sl__in{animation:slSpin 1.8s cubic-bezier(.65,0,.35,1)}
.sl.is-spin .sl__sh{animation:slSpinShadow 1.8s cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){.sl.is-spin .sl__in,.sl.is-spin .sl__sh{animation:none}}
/* Most seals rest on the caseback -- the logo -- and turn from it, all the way round, back
   to it; only the viewer's own number, or one being chosen, rests on the dial. A seal that
   can be turned by hand starts turned (its checkbox checked), so a tap shows the number. */
.sl--logo .sl__in{transform:rotateY(180deg)}
.sl--logo>input:not(:checked)~.sl__in{transform:none}
@keyframes slSpinLogo{from{transform:rotateY(180deg)}to{transform:rotateY(540deg)}}
.sl--logo.is-spin .sl__in{animation-name:slSpinLogo}
/* reserved (cash on delivery, before it is paid): cream hatching, the number unprinted */
.sl.rv,.sl.fm.rv,.sl.mb.rv{--ink2:#9C5640;--stampbg:#FBF6F0;--field:repeating-linear-gradient(135deg,#FBF6F0 0 .7rem,#F4E8DC .7rem 1.4rem)}
.sl.rv .sl__num{color:rgba(156,86,64,.2);-webkit-text-stroke:.08rem #9C5640}
.sl.rv .sl__fd::before{display:none}
.sl.rv .sl__cal{opacity:.5}
/* not available, or an old issue: grey, never red */
.sl.old{filter:grayscale(1);opacity:.5}
.sl.fm{--stampbg:#173A30}.sl.mb{--stampbg:#FBFAF6}
.sl__stamp{position:absolute;left:50%;bottom:6%;transform:translateX(-50%) rotate(-6deg);border:.1rem solid var(--ink2);color:var(--ink2);background:var(--stampbg);padding:.4rem 1rem;font-size:calc(var(--s)*.036);font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;z-index:4}
[dir=rtl] .sl__stamp{letter-spacing:0;font-size:calc(var(--s)*.048)}
.turn{display:flex;justify-content:center;align-items:center;gap:.6rem;font-size:1.2rem;color:var(--muted);margin:1.4rem 0 0}
.turn svg{width:1.6rem;height:1.6rem;stroke:var(--muted);fill:none;stroke-width:1.4}

/* ---- the stamp: every state, cut from the case's octagon, with a double hairline ---- */
.vstamp{display:inline-grid;grid-template-columns:auto auto;gap:1rem;align-items:center;padding:.8rem 1.6rem .8rem .9rem;text-align:start;
  background:#EAF0EC;color:var(--palm);box-shadow:inset 0 0 0 .1rem rgba(22,56,46,.4),inset 0 0 0 .4rem #EAF0EC,inset 0 0 0 .5rem rgba(22,56,46,.16)}
.vstamp__oct{width:2.6rem;height:2.6rem}
.vstamp__oct polygon{fill:var(--palm)}
.vstamp__oct path{fill:none;stroke:#EAE2CF;stroke-width:1.9;stroke-linecap:square}
.vstamp b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;line-height:1.3}
[dir=rtl] .vstamp b{letter-spacing:0;font-size:1.45rem;text-transform:none}
.vstamp small{display:block;font-size:1.2rem;line-height:1.4;opacity:.88}
.vstamp.rv{background:#F8EFE7;color:#9C5640;box-shadow:inset 0 0 0 .1rem rgba(156,86,64,.45),inset 0 0 0 .4rem #F8EFE7,inset 0 0 0 .5rem rgba(156,86,64,.18)}
.vstamp.rv polygon{fill:#9C5640}
.vstamp.old{background:#EFECE6;color:#4F4A43;box-shadow:inset 0 0 0 .1rem rgba(102,97,90,.45),inset 0 0 0 .4rem #EFECE6,inset 0 0 0 .5rem rgba(102,97,90,.18)}
.vstamp.old polygon{fill:#7E786F}
.vstamp.bad{background:#F6E7E5;color:#8C2F2B;box-shadow:inset 0 0 0 .1rem rgba(140,47,43,.45),inset 0 0 0 .4rem #F6E7E5,inset 0 0 0 .5rem rgba(140,47,43,.18)}
.vstamp.bad polygon{fill:#8C2F2B}
.vstamp--lg{display:grid;width:100%;gap:1.4rem;padding:1.4rem 1.8rem 1.4rem 1.4rem}
.vstamp--lg .vstamp__oct{width:3.6rem;height:3.6rem}
.vstamp--lg b{font-size:1.25rem}
.vstamp--lg small{font-size:1.35rem}

/* ---- the certificate of registration ---- */
.cert{background:#FFFDF8;position:relative;padding:2.8rem 2.2rem 2.4rem;box-shadow:0 1.2rem 2.8rem rgba(30,28,25,.14);text-align:start}
.cert::after{content:"";position:absolute;inset:.8rem;border:.1rem solid #CFC6B5;pointer-events:none}
.cert>*{position:relative}
.cert__head{text-align:center}
.cert__logo{height:4.8rem;width:auto;margin:0 auto 1.2rem}
.cert__eyeb{display:block;font-size:1.1rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .cert__eyeb{letter-spacing:0;font-size:1.3rem;text-transform:none}
.cert h2{font-weight:300;font-size:2.6rem;margin:.4rem 0 .8rem;letter-spacing:-.01em}
[dir=rtl] .cert h2{letter-spacing:0;font-size:2.4rem}
.cert .vstamp{margin:0 0 .4rem}
dl.ledger{margin:1.6rem 0 2rem;border-top:.1rem solid var(--hair)}
dl.ledger>div{display:grid;grid-template-columns:11rem 1fr;gap:1.2rem;padding:1.2rem 0;border-bottom:.1rem solid var(--hair)}
dl.ledger dt{font-size:1.05rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:.3rem;line-height:1.5}
[dir=rtl] dl.ledger dt{letter-spacing:0;text-transform:none;font-size:1.3rem;padding-top:.1rem}
dl.ledger dd{margin:0;font-size:1.45rem;line-height:1.5;overflow-wrap:anywhere}
.qrrow{display:grid;grid-template-columns:10.4rem 1fr;gap:1.4rem;align-items:center;margin-top:.4rem}
.qr{width:10.4rem;height:10.4rem;padding:.8rem;background:#fff;border:.1rem solid var(--hair)}
.qr svg{width:100%;height:100%;display:block}
.qrrow b{display:block;font-weight:500}
.qrrow small{display:block;font-size:1.25rem;color:var(--muted);line-height:1.55}
.certs{display:grid;gap:2.4rem}

/* ---- the order page: welcome, what to do now, cash on delivery ---- */
.club{margin:3.2rem 0 0;text-align:center}
.club__eyeb{display:block;font-size:1.1rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .club__eyeb{letter-spacing:0;font-size:1.3rem;text-transform:none}
.club__h{font-weight:300;font-size:clamp(2.4rem,5vw,3.2rem);line-height:1.2;margin:.8rem 0 2.4rem}
[dir=rtl] .club__h{line-height:1.45}
.club__p{color:var(--prose);max-width:44rem;margin:1.6rem auto 0}
.club__split{display:grid;gap:3.2rem;margin-top:3.2rem;text-align:start}
@media (min-width:900px){.club__split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.now{display:grid;gap:.8rem;margin-top:1.2rem}
.now>a,.now>div{display:grid;grid-template-columns:5.6rem 1fr auto;gap:1.2rem;align-items:center;padding:1.2rem 1.4rem;background:#fff;border:.1rem solid var(--hair);color:inherit;text-decoration:none;text-align:start}
.now .ico{display:grid;place-items:center;height:5.2rem}
.now .ico>svg{width:2.6rem;height:2.6rem;stroke:var(--palm);fill:none;stroke-width:1.4}
.now b{display:block;font-weight:500;font-size:1.45rem}
.now small{display:block;font-size:1.25rem;color:var(--muted);line-height:1.45;margin-top:.2rem}
.now .chev{width:1.8rem;height:1.8rem;stroke:var(--muted);fill:none;stroke-width:1.5}
[dir=rtl] .now .chev{transform:scaleX(-1)}
.club__h2{font-weight:300;font-size:2.1rem;margin:0 0 .4rem;text-align:start}
.rail{list-style:none;margin:2.4rem 0 0;padding:0;text-align:start}
.rail li{display:grid;grid-template-columns:2.6rem 1fr;gap:1.2rem;padding-bottom:1.8rem;position:relative;font-size:1.3rem;color:var(--prose);line-height:1.5}
.rail li::before{content:"";width:1.4rem;height:1.4rem;border-radius:50%;border:.15rem solid #CFC8BB;background:var(--paper);margin:.25rem 0 0 .6rem;position:relative;z-index:1}
.rail li::after{content:"";position:absolute;left:1.25rem;top:1.8rem;bottom:0;width:.15rem;background:#E2DBCF}
[dir=rtl] .rail li::before{margin:.25rem .6rem 0 0}
[dir=rtl] .rail li::after{left:auto;right:1.25rem}
.rail li:last-child{padding-bottom:0}
.rail li:last-child::after{display:none}
.rail li.done::before{background:#9C5640;border-color:#9C5640}
.rail li.done::after{background:#C27760}
.rail li.now::before{border-color:#9C5640;box-shadow:0 0 0 .4rem #F3E4D8}
.rail li.end::before{border-color:#16382E}
.rail b{display:block;color:var(--ink);font-weight:500;font-size:1.45rem}

/* ---- the papers icon ---- */
.pap{--w:7.6rem;width:var(--w);height:calc(var(--w)*1.26);background:#FFFDF8;border:.1rem solid var(--hair);outline:.1rem solid var(--hair);outline-offset:calc(var(--w)*-.055);
  padding:calc(var(--w)*.13) calc(var(--w)*.105);display:flex;flex-direction:column;gap:calc(var(--w)*.06);box-shadow:0 .3rem .6rem rgba(30,28,25,.1);flex:none}
.pap img{height:calc(var(--w)*.19);width:auto;margin:0 auto calc(var(--w)*.03)}
.pap i{display:block;height:.2rem;background:#D9D2C4}
.pap i.s{width:60%}
.pap b{font-size:calc(var(--w)*.098);font-weight:500;letter-spacing:.04em;text-align:center;color:var(--ink);direction:ltr;margin-top:auto;white-space:nowrap}

/* ---- the register: a scan, a certificate, the record ---- */
.reg__card--wide{max-width:none}
.vcallout{border-top:.1rem solid var(--ink);padding-top:1.4rem;margin-top:.8rem}
.vcallout b{display:block;font-weight:500;margin-bottom:.3rem}
.vform{display:grid;gap:1.2rem;margin-top:2rem}
.watch{display:grid;grid-template-columns:7.2rem 1fr;gap:1.4rem;padding:1.6rem 0;border-top:.1rem solid var(--hair)}
.watch img{width:7.2rem;height:7.2rem;object-fit:cover}
.watch b{display:block;font-weight:500;font-size:1.5rem}
.watch .sn{font-size:1.35rem;letter-spacing:.04em;direction:ltr;display:inline-block;color:var(--prose)}
.watch small{display:block;font-size:1.25rem;color:var(--muted);line-height:1.5}
.watch .vstamp{margin:.8rem 0}
.acts{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:.4rem}
.acts a{font-size:1.3rem;color:var(--ink);text-decoration:none;border-bottom:.1rem solid var(--copper);padding:.8rem 0 .2rem}
.privs{display:grid;gap:.8rem}
.priv{display:grid;grid-template-columns:3.6rem 1fr;gap:1.2rem;align-items:start;padding:1.4rem;background:#fff;border:.1rem solid var(--hair)}
.priv>svg{width:2.4rem;height:2.4rem;stroke:var(--palm);fill:none;stroke-width:1.5;margin:.2rem auto 0}
.priv b{display:block;font-weight:500;font-size:1.45rem}
.priv small{display:block;font-size:1.25rem;color:var(--prose);line-height:1.5;margin-top:.2rem}
@media print{
  .reg__top,.reg__links,.acts,.noprint,.header,.footer,.bar{display:none !important}
  body,.reg{background:#fff}
  .cert{box-shadow:none}
}

.club-page{max-width:112rem}
.club-page .arrive{margin:1.6rem 0 0}
.arrive{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.4rem;background:#FBF9F4;border:.1rem solid var(--palm);font-size:1.35rem;line-height:1.5;margin:0 0 1.4rem;text-align:start}
.arrive .ic{width:1.8rem;height:1.8rem;stroke:var(--palm);fill:none;stroke-width:1.5;flex:none;margin-top:.1rem}
.arrive b{font-weight:500;color:var(--palm)}
.arrive small{display:block;font-size:1.25rem;color:var(--muted);margin-top:.2rem}
.arrive>span{display:block}

/* ================= the checkout ================= */
.ic{width:1.8rem;height:1.8rem;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}
[dir=rtl] .ic--dir{transform:scaleX(-1)}
.steps{display:flex;gap:.8rem;align-items:center;font-size:1.25rem;color:var(--muted);margin:2.4rem 0 1.8rem}
.steps i{flex:1;height:.2rem;background:var(--hair)}
.steps i.on{background:var(--ink)}
.steps span.on{color:var(--ink);font-weight:500}
.steps a{color:inherit;text-decoration:none}
.lead{font-weight:300;font-size:clamp(2.1rem,4.4vw,2.6rem);line-height:1.25;letter-spacing:-.01em;margin:0 0 2rem}
[dir=rtl] .lead{letter-spacing:0;line-height:1.5}
.set3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.2rem;margin:0 0 1.8rem}
.set3 .it{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.set3 .box{height:9.6rem;display:grid;place-items:center}
.set3 .w{width:8.6rem;height:8.6rem;object-fit:cover}
.set3 .w.is-cutout{object-fit:contain;background:#fff}
.set3 .plus{font-size:1.8rem;color:var(--muted);font-weight:200;padding-bottom:3.4rem}
.set3 .lbl{font-size:1.25rem;color:var(--ink);font-weight:500;margin-top:.8rem;line-height:1.3}
.set3 .lbl small{display:block;font-weight:400;color:var(--muted);font-size:1.15rem}
.co-digital{font-size:1.3rem;color:var(--muted);text-align:center;margin:-.6rem 0 2.4rem;line-height:1.55}
.co-under{text-align:center;font-size:1.3rem;color:var(--muted);margin:1rem 0 0;line-height:1.5}
.co-you{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:1.2rem 1.4rem;background:#fff;border:.1rem solid var(--hair);font-size:1.4rem;margin:0 0 1.6rem}
.co-you a{font-size:1.3rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:.3rem}
.co-h{font-weight:300;font-size:2.2rem;line-height:1.2;margin:2.8rem 0 1.4rem}
[dir=rtl] .co-h{line-height:1.45}
.btn .ic{margin:0 .2rem}
.btn--ink{background:var(--ink);color:var(--paper)}

/* the Founding box: above the form while numbers remain; the whole card opens the
   explanation, and the picker from there */
.fb--box{color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.fb--box:hover,.fb--box:focus-visible{border-color:var(--palm);box-shadow:0 .4rem 1.4rem rgba(22,56,46,.08)}
.fb--box .chev{width:1.8rem;height:1.8rem;stroke:var(--ink);fill:none;stroke-width:1.5}
[dir=rtl] .fb--box .chev{transform:scaleX(-1)}

/* what the club already knows of the mobile typed: said under the field, by kind only */
.known{margin:.8rem 0 0;padding:1rem 1.2rem;background:#EAF0EC;border-inline-start:.3rem solid var(--palm);font-size:1.3rem;line-height:1.55;color:var(--ink)}
.co-you + .known{margin:-.8rem 0 1.6rem}

/* the number, held: a draining hairline is the timer */
.fb{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.4rem 1.6rem;background:#fff;border:.1rem solid var(--hair);min-height:7.6rem;margin:0 0 1.6rem}
.fb.on{border-color:var(--palm)}
.fb b{display:block;font-size:1.5rem;font-weight:500;line-height:1.3}
.fb small{display:block;font-size:1.25rem;color:var(--prose);line-height:1.45;margin-top:.2rem}
.fb .fb__act{font-size:1.3rem;color:var(--ink);background:none;border:0;padding:.8rem 0;cursor:pointer;font-family:inherit;text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:.3rem;white-space:nowrap}
.fb .clock{font-variant-numeric:tabular-nums;font-weight:500;color:var(--palm)}
.fb .track{position:absolute;inset-inline:0;bottom:0;height:.3rem;background:#E6EDE9}
.fb .track i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--palm);transition:width 1s linear}
.fb.end{border-color:var(--copper)}
.fb.end b{color:var(--copper-ink)}

/* the sheets: the picker and the comparison */
.info{display:inline-flex;gap:.8rem;align-items:center;font-size:1.35rem;color:var(--prose);padding:1rem 0;min-height:4.4rem;background:none;border:0;cursor:pointer;font-family:inherit;text-decoration:none}
.info svg{width:1.8rem;height:1.8rem;stroke:var(--ink);fill:none;stroke-width:1.5;flex:none}
.info u{text-decoration-color:var(--copper);text-underline-offset:.3rem}
.sheet{position:fixed;inset:0;z-index:60;display:grid;align-items:end}
.sheet[hidden]{display:none}
.sheet__scrim{position:absolute;inset:0;background:rgba(30,28,25,.5)}
.sheet__panel{position:relative;max-height:92vh;max-height:92dvh;overflow:auto;background:var(--paper);padding:1.2rem 2rem 2.8rem;
  box-shadow:0 -1rem 3rem rgba(30,28,25,.18);animation:sheetUp .35s cubic-bezier(.2,.75,.2,1)}
@keyframes sheetUp{from{transform:translateY(12%);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet__panel{animation:none}}
@media (min-width:760px){.sheet{align-items:center;justify-items:center}.sheet__panel{width:min(52rem,92vw);padding:2rem 3.2rem 3.2rem}}
.sheet__grab{width:4rem;height:.4rem;border-radius:.2rem;background:#CFC8BB;margin:0 auto 1.4rem}
.sheet__close{position:absolute;top:1rem;inset-inline-end:1rem;width:4.4rem;height:4.4rem;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--muted)}
.sheet__close svg{width:2rem;height:2rem;stroke:currentColor;fill:none;stroke-width:1.5}
.sheet h2{font-weight:300;font-size:2.3rem;line-height:1.2;margin:0 0 .4rem;letter-spacing:-.01em;text-align:center}
[dir=rtl] .sheet h2{letter-spacing:0;line-height:1.45;font-size:2.1rem}
.sheet__sub{font-size:1.35rem;color:var(--prose);margin:0 0 2rem;line-height:1.55;text-align:center}
.sheet .sl{margin-bottom:.4rem}
html.sheet-lock,html.sheet-lock body{overflow:hidden}

/* one to four digits: the number fills from the right, unused places are shaded */
.digits{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;direction:ltr;margin:2rem 0 1rem}
.digits>span{height:6.4rem;display:grid;place-items:center;border:.1rem solid var(--palm);background:#fff;font-size:3.2rem;font-weight:200;color:var(--ink)}
.digits>span.off{border-style:dashed;border-color:#D4CDBF;background:#F1EEE7}
.digits.na>span{border-color:#CFC8BB;color:#7E786F;background:#F7F5F1}
.digits.na>span.off{background:#F4F2EE}
.digits.is-empty>span{border-color:#BDB5A8}
.digits.is-focus>span:last-child{border-color:var(--ink);box-shadow:inset 0 0 0 .1rem var(--ink)}
.digits input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:1.6rem;border:0;padding:0;cursor:text}
.digits-plain{font-size:2.8rem !important;letter-spacing:.2em;text-align:center;font-weight:300;min-height:6.4rem}
.lens{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 1.8rem;margin:-.2rem 0 1.4rem;font-size:1.2rem;color:var(--muted)}
.lens>span{display:inline-flex;align-items:center;gap:.4rem;min-height:2.4rem}
.lens>span.on{color:var(--palm);font-weight:500}
.lens svg{width:1.3rem;height:1.3rem;stroke:currentColor;fill:none;stroke-width:2.2}
.digits.na+.lens>span.on{color:#66615A}
.status{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.4rem;margin-bottom:1rem;font-size:1.35rem;line-height:1.5;text-align:start}
.status svg{flex:none;width:2rem;height:2rem;fill:none;stroke-width:1.6;margin-top:.1rem}
.status.ok{background:#EAF0EC;color:var(--palm)} .status.ok svg{stroke:var(--palm)}
.status.na{background:#EFECE6;color:#3F3B36} .status.na svg{stroke:#66615A}
.status b{font-weight:500;display:block}
.chips{display:flex;gap:.8rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.chips button,.chips a{border:.1rem solid var(--ink);background:transparent;padding:.9rem 1.6rem;font-size:1.5rem;font-weight:300;min-height:4.4rem;min-width:6.4rem;display:inline-flex;align-items:center;justify-content:center;direction:ltr;cursor:pointer;font-family:inherit;color:var(--ink);text-decoration:none}
.tip{font-size:1.3rem;color:var(--prose);line-height:1.55;margin:0 0 .6rem;text-align:start}
.tip b{font-weight:500;color:var(--ink)}

/* the comparison */
.cmpt{border-top:.1rem solid var(--hair);text-align:start}
.cmpt>div{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.8rem;align-items:center;padding:1rem 0;border-bottom:.1rem solid var(--hair);font-size:1.3rem;color:var(--prose);line-height:1.4}
.cmpt>div>span:not(:first-child){text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cmpt>div .ic{color:var(--palm)}
.cmpt>.hd{border-bottom:.1rem solid var(--ink);padding:.4rem 0 1.2rem}
.cmpt>.hd b{display:block;font-weight:500;font-size:1.3rem;color:var(--ink);margin-top:.6rem}
.cmpt>.grp{display:block;padding:1.4rem 0 .4rem;border-bottom:0;font-size:1.05rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--palm)}
[dir=rtl] .cmpt>.grp{letter-spacing:0;font-size:1.3rem}
.cmpt>.hl{background:#EAF0EC;margin:0 -1rem;padding-inline:1rem;color:var(--palm);font-weight:500;border-bottom-color:#D5E0DA}
.cmpt>.hl>span:first-child{display:flex;gap:.7rem;align-items:flex-start}
.cmpt>.hl .ic{width:1.6rem;height:1.6rem;margin-top:.15rem}

/* step 2 */
.arrive.in-form{margin:-.4rem 0 1.4rem;background:#EEF3F0;border-color:var(--palm)}
.incl{margin-top:2rem;padding:1.4rem 1.6rem;background:#FBF9F4;border:.1rem solid var(--hair);text-align:start}
.incl__t{font-size:1.1rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
[dir=rtl] .incl__t{letter-spacing:0;font-size:1.3rem;text-transform:none}
.incl ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.incl li{display:grid;grid-template-columns:1.8rem 1fr;gap:1rem;font-size:1.35rem;line-height:1.45;color:var(--prose)}
.incl li svg{width:1.6rem;height:1.6rem;stroke:var(--palm);fill:none;stroke-width:1.6;margin-top:.2rem}
.incl li b{color:var(--ink);font-weight:500}
.co-total{display:flex;justify-content:space-between;font-size:1.45rem;padding:1.2rem 0;border-bottom:.1rem solid var(--hair);margin-top:1.6rem}
.co-total b{font-weight:500}

/* the product page */
.rate{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:1.35rem;color:var(--prose);margin:0 0 1.4rem}
.stars{color:var(--palm);letter-spacing:.1em}
.stars__off{color:#D9D2C5}
.sep{color:#CFC8BB}
.rc{display:grid;grid-template-columns:auto auto 1fr;gap:1.2rem;align-items:center;padding:1.4rem 0;border-top:.1rem solid var(--hair);border-bottom:.1rem solid var(--hair);margin:0 0 1.8rem}
.rc__t>b{display:block;font-weight:500;font-size:1.5rem}
.rc__t>small{display:block;font-size:1.3rem;color:var(--prose);line-height:1.5;margin-top:.2rem}
.rc .pap{margin-inline-start:-2rem;transform:rotate(4deg);box-shadow:0 .4rem .8rem rgba(30,28,25,.16)}
[dir=rtl] .rc .pap{transform:rotate(-4deg)}
.rc .info{padding:.4rem 0 0;min-height:3.6rem;font-size:1.3rem}
.assure{list-style:none;margin:1.8rem 0 0;padding:1.4rem 0 0;border-top:.1rem solid var(--hair);display:grid;gap:.7rem}
.assure li{display:flex;gap:.8rem;align-items:center;font-size:1.35rem;color:var(--prose)}
.assure .ic{color:var(--palm);width:1.6rem;height:1.6rem}
/* the shop's `.co h1` is more specific than a class alone */
.co h1.lead{font-size:clamp(2.1rem,4.4vw,2.6rem);font-weight:300;line-height:1.25;margin:0 0 2rem}
.co h1.co-h{font-size:2.2rem;font-weight:300;line-height:1.2;margin:2.8rem 0 1.4rem}
[dir=rtl] .co h1.lead,[dir=rtl] .co h1.co-h{line-height:1.5}

/* an identifier never breaks at its dashes */
.nw{white-space:nowrap}

/* a checkbox that is a sentence: "Leave my name off the certificate" */
.tick{display:flex;gap:1rem;align-items:flex-start;margin:-.6rem 0 1.8rem;font-size:1.35rem;line-height:1.5;color:var(--prose);cursor:pointer}
.tick input{width:1.8rem;height:1.8rem;margin:.1rem 0 0;flex:none;accent-color:var(--palm)}
.reg__toggle{margin-top:1.6rem;display:flex;justify-content:center}
.reg__toggle .tick{margin:0}
.cert__note{display:block;font-size:1.2rem;color:var(--muted);margin-top:.3rem}
.reg__chips{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.reg__chip{display:inline-flex;align-items:center;justify-content:center;min-width:6.4rem;min-height:4.4rem;padding:0 1.2rem;border:.1rem solid var(--hair);background:#fff;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}