/* Courtin drop in components. Load after site.css.
   Every class here is prefixed so nothing collides with site.css:
   cs-  store badges, the lock screen phone and the plea memo phone
   mp-  the music player
   sp-  the small print sheet
   Phone screens are drawn for a 390 x 844 screen and scale with the phone through --u (1 point of that screen). */

/* Inter ships as one variable file (weights 100 to 900); this face reaches the thin and heavy ends. Same file, no extra download. */
@font-face{font-family:'CS Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter_400.woff2) format('woff2')}

/* =========================== 1. STORE BADGES =========================== */
.cs-stores{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 16px;max-width:980px;margin:34px auto 0;padding:10px 0 4px}
.cs-badge{position:relative;isolation:isolate;flex:0 0 auto;display:flex;align-items:center;gap:.62em;width:15.2em;height:3.5em;padding:0 .9em 0 .85em;border-radius:.78em;background:linear-gradient(180deg,#17140F 0%,#080706 100%);border:1px solid rgba(233,211,155,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.5);color:#F3EEE4;text-decoration:none;text-align:left;font-size:16px;line-height:1;-webkit-tap-highlight-color:transparent;transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,box-shadow .22s ease}
.cs-badge:focus-visible{outline:2px solid #E9D39B;outline-offset:4px}
.cs-badge:active{transform:scale(.985)}
@media (hover:hover){
  .cs-badge:hover{transform:translateY(-2px);border-color:rgba(233,211,155,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 34px rgba(0,0,0,.55),0 0 0 3px rgba(233,211,155,.08),0 0 28px rgba(233,211,155,.12)}
  .cs-badge:hover .cs-void{background-position:100% 0}
}
.cs-glyph{flex:none;display:block;width:1.95em;height:1.95em;color:#E9D39B;overflow:visible}
.cs-txt{display:flex;flex-direction:column;gap:.24em;min-width:0}
.cs-top{font:500 .625em/1.1 var(--sans);letter-spacing:.015em;color:rgba(243,238,228,.74);white-space:nowrap}
.cs-big{font:600 1em/1.08 var(--sans);letter-spacing:-.016em;white-space:nowrap;color:#F3EEE4}
/* the wrongness */
.cs-deco{position:absolute;z-index:2;pointer-events:none}
.cs-tape{left:-1.05em;top:-.2em;width:3.3em;height:1.08em;transform:rotate(-34deg);background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 38%,rgba(110,90,50,.1) 100%),radial-gradient(ellipse 60% 80% at 30% 60%,rgba(255,255,255,.12),rgba(255,255,255,0)),rgba(229,218,186,.8);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);clip-path:polygon(3% 0,97% 0,100% 16%,96% 33%,100% 50%,96% 67%,100% 84%,97% 100%,3% 100%,0 84%,4% 67%,0 50%,4% 33%,0 16%)}
.cs-ribbon{right:.85em;top:-.66em;padding:.38em 1em .36em;font:700 max(.45em,6.5px)/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;color:#1A140A;background:linear-gradient(100deg,#B8924A,#F1E2B8 45%,#D9BC7C 70%,#B8924A);clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%);transform:rotate(3deg)}
.cs-droid{right:-.75em;top:-1.2em;width:3.5em;height:3.5em;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.16em;transform:rotate(13deg);background:radial-gradient(circle at 32% 26%,#FFFEF9 0%,#F2ECDD 52%,#DED3BB 100%);box-shadow:0 .14em .4em rgba(0,0,0,.55),inset 0 0 0 .2em #F2ECDD,inset 0 0 0 .27em #1F1B16;color:#1F1B16;text-align:center}
.cs-droid b{font:800 .6em/1 var(--sans);letter-spacing:-.01em}
.cs-droid span{font:600 max(.5em,6.5px)/1 var(--sans);letter-spacing:.02em}
.cs-price{right:-.6em;top:-1em;padding:.5em .62em .46em;border-radius:.32em;transform:rotate(8deg);background:linear-gradient(180deg,#FF8A2E,#F26C10);box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;text-align:center;font:800 max(.44em,6.5px)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.cs-price b{display:block;margin-top:.28em;font:800 1.75em/1 var(--sans);letter-spacing:-.02em}
.cs-void{right:-.55em;bottom:-.6em;width:3.5em;height:1.7em;border-radius:.26em;overflow:hidden;transform:rotate(-7deg);display:grid;place-items:center;background:linear-gradient(115deg,#C9D0DA 0%,#F7F8FA 16%,#BFC8D8 30%,#E8DAF2 44%,#D0ECE6 58%,#F4EFD3 72%,#C6CDD8 86%,#EEF0F3 100%);background-size:240% 100%;background-position:0 0;box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.6);color:rgba(58,68,92,.7);font:800 max(.56em,7px)/1 var(--sans);letter-spacing:.16em;padding-left:.16em;transition:background-position .7s ease}
.cs-void::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.4) 3px 4px)}
.cs-crack{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.cs-crack path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.cs-crack .cs-k1{stroke:rgba(0,0,0,.7);stroke-width:1.8}
.cs-crack .cs-k2{stroke:rgba(243,238,228,.62);stroke-width:.75}
/* footer size */
.cs-stores.cs-sm{gap:16px 12px;margin-top:26px}
.cs-stores.cs-sm .cs-badge{font-size:12.5px}
@media (prefers-reduced-motion:reduce){.cs-badge,.cs-void{transition:none}.cs-badge:hover,.cs-badge:active{transform:none}}

/* the availability line, as fine print */
.cs-store-line{max-width:34em;margin:22px auto 0;text-align:center;font:italic 400 15.5px/1.55 'Cormorant Garamond',var(--serif);letter-spacing:.01em;color:#A39B8E;text-wrap:balance}
.cs-store-line::before{content:'';display:block;width:44px;height:1px;margin:0 auto 14px;background:linear-gradient(90deg,rgba(233,211,155,0),rgba(233,211,155,.8),rgba(233,211,155,0))}
.cs-nb{white-space:nowrap}
.cs-stores.cs-sm + .cs-store-line{font-size:14.5px;margin-top:18px}

/* =========================== 2 and 3. LIVE PHONE SCREENS =========================== */
.phone.live.cs-lock .scr,.phone.live.cs-doc .scr{padding:0;--u:.672px}
@supports (width:1cqw){.phone.live.cs-lock .scr,.phone.live.cs-doc .scr{container-type:inline-size;--u:calc(100cqw / 390)}}
.cs-sbar{display:flex;justify-content:space-between;align-items:center;font:600 calc(14.5*var(--u))/1 var(--sans);letter-spacing:.01em;color:#F3EEE4;white-space:nowrap}
.cs-sicons{display:flex;align-items:center;gap:calc(6*var(--u))}
.cs-sicons svg{display:block;fill:currentColor}
.cs-bars{width:calc(18*var(--u));height:calc(12*var(--u))}
.cs-batt{width:calc(26*var(--u));height:calc(12.5*var(--u))}
.cs-home{position:absolute;z-index:4;left:50%;bottom:calc(8*var(--u));width:calc(136*var(--u));height:calc(5*var(--u));margin-left:calc(-68*var(--u));border-radius:99px;background:rgba(243,238,228,.86)}

/* ---- 2. lock screen ---- */
.phone.live.cs-lock .scr{display:block;background:#0B0A09;color:#F3EEE4;text-align:center}
.cs-lock-wall{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 38%;filter:blur(calc(7*var(--u))) brightness(.74) saturate(1.1);transform:scale(1.12)}
.cs-lock-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.42) 0%,rgba(10,9,8,.04) 26%,rgba(10,9,8,.1) 58%,rgba(10,9,8,.5) 100%)}
.cs-lock-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.cs-lock .cs-sbar{position:absolute;z-index:3;left:calc(30*var(--u));right:calc(26*var(--u));top:calc(18*var(--u))}
.cs-lock-pad{position:absolute;z-index:3;left:50%;top:calc(60*var(--u));width:calc(13*var(--u));height:calc(17*var(--u));margin-left:calc(-6.5*var(--u));color:#F3EEE4;opacity:.92}
.cs-lock-date{margin:0;position:absolute;z-index:3;left:0;right:0;top:calc(88*var(--u));font:600 calc(20*var(--u))/1.2 var(--sans);letter-spacing:.005em;color:rgba(243,238,228,.94)}
.cs-lock-time{margin:0;position:absolute;z-index:3;left:0;right:0;top:calc(106*var(--u));font:200 calc(98*var(--u))/1 'CS Inter',var(--sans);letter-spacing:-.028em;color:#F5F0E6;text-shadow:0 calc(2*var(--u)) calc(20*var(--u)) rgba(0,0,0,.28)}
.cs-notifs{position:absolute;z-index:3;left:calc(10*var(--u));right:calc(10*var(--u));top:calc(372*var(--u));display:flex;flex-direction:column;gap:calc(9*var(--u))}
.cs-notif{display:flex;align-items:flex-start;gap:calc(11*var(--u));padding:calc(13*var(--u)) calc(15*var(--u)) calc(14*var(--u)) calc(12*var(--u));border-radius:calc(24*var(--u));background:rgba(36,31,24,.7);box-shadow:inset 0 0 0 1px rgba(255,240,210,.08),0 calc(10*var(--u)) calc(28*var(--u)) rgba(0,0,0,.32);text-align:left;will-change:transform,opacity}
.cs-notif-ic{flex:none;display:grid;place-items:center;width:calc(42*var(--u));height:calc(42*var(--u));margin-top:calc(1*var(--u));border-radius:calc(10*var(--u));background:linear-gradient(160deg,#211C16,#0A0908);box-shadow:inset 0 0 0 1px rgba(233,211,155,.34)}
.cs-notif-ic img{display:block;width:78%;height:auto}
.cs-notif-tx{flex:1;min-width:0}
.cs-notif-hd{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 calc(4*var(--u));font:600 calc(11.5*var(--u))/1.2 var(--sans);letter-spacing:.16em;color:rgba(243,238,228,.62)}
.cs-notif-hd span+span{font-weight:500;font-size:calc(12.5*var(--u));letter-spacing:0;color:rgba(243,238,228,.55)}
.cs-notif-t{margin:0;font:600 calc(16.5*var(--u))/1.25 var(--sans);color:#F5F0E6}
.cs-notif-b{margin:calc(1.5*var(--u)) 0 0;font:400 calc(15.5*var(--u))/1.32 var(--sans);color:rgba(243,238,228,.88)}
.cs-lock-qa{position:absolute;z-index:3;left:calc(46*var(--u));right:calc(46*var(--u));bottom:calc(46*var(--u));display:flex;justify-content:space-between}
.cs-lock-qa span{display:grid;place-items:center;width:calc(50*var(--u));height:calc(50*var(--u));border-radius:50%;background:rgba(18,16,13,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cs-lock-qa svg{display:block;width:calc(21*var(--u));height:calc(21*var(--u));fill:none;stroke:#F3EEE4;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the loop: the screen wakes, 2 alerts arrive, it sleeps again (7 s) */
.cs-lock .cs-n1{animation:cs-n1 7s cubic-bezier(.2,.8,.25,1) infinite}
.cs-lock .cs-n2{animation:cs-n2 7s cubic-bezier(.2,.8,.25,1) infinite}
.cs-lock .cs-lock-dim{animation:cs-wake 7s ease-in-out infinite}
@keyframes cs-n1{0%,6%{opacity:0;transform:translateY(-26%) scale(.94)}12%,85%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8%) scale(.97)}}
@keyframes cs-n2{0%,21%{opacity:0;transform:translateY(-26%) scale(.94)}27%,85%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8%) scale(.97)}}
@keyframes cs-wake{0%,3%{opacity:.5}9%,87%{opacity:0}96%,100%{opacity:.5}}
.cs-lock.cs-idle .cs-notif{animation:none;opacity:0}
.cs-lock.cs-idle .cs-lock-dim{animation:none;opacity:.5}

/* ---- 3. the plea memo, open in the document viewer ---- */
.phone.live.cs-doc .scr{display:flex;flex-direction:column;background:#12100D;color:#F3EEE4}
.cs-doc .cs-sbar{position:relative;z-index:3;flex:none;padding:calc(18*var(--u)) calc(26*var(--u)) 0 calc(30*var(--u))}
.cs-doc-top{flex:none;display:grid;grid-template-columns:calc(40*var(--u)) minmax(0,1fr) calc(40*var(--u));align-items:center;padding:calc(16*var(--u)) calc(10*var(--u)) calc(12*var(--u));border-bottom:1px solid rgba(233,211,155,.13)}
.cs-doc-ic{display:block;justify-self:center;width:calc(23*var(--u));height:calc(23*var(--u));fill:none;stroke:#E9D39B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-doc-name{margin:0;text-align:center;min-width:0}
.cs-doc-name b{display:block;font:600 calc(15.5*var(--u))/1.25 var(--sans);color:#F5F0E6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-doc-name span{display:inline-flex;align-items:center;gap:calc(4*var(--u));margin-top:calc(2*var(--u));font:500 calc(12.5*var(--u))/1.2 var(--sans);color:#9A9286}
.cs-doc-name svg{width:calc(11*var(--u));height:calc(11*var(--u));fill:none;stroke:#9BE3B5;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cs-doc-canvas{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(10*var(--u)) calc(17*var(--u));background:radial-gradient(ellipse 90% 55% at 50% 34%,#24201A 0%,#14120F 70%)}
.cs-page{position:relative;flex:none;width:100%;aspect-ratio:1/1.414;display:flex;flex-direction:column;padding:calc(36*var(--u)) calc(28*var(--u)) calc(26*var(--u));border-radius:calc(3*var(--u));background:linear-gradient(172deg,#F8F4EB 0%,#F1EADC 100%);color:#1E1A15;text-align:left;box-shadow:0 calc(16*var(--u)) calc(38*var(--u)) rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.25)}
.cs-page-t{margin:0;text-align:center;font:700 calc(20.5*var(--u))/1.2 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:#1C1814}
.cs-page-s{margin:calc(10*var(--u)) 0 0;text-align:center;font:600 calc(10*var(--u))/1.3 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:#7C7366}
.cs-page-r{display:block;height:1px;margin:calc(18*var(--u)) 0 calc(18*var(--u));background:linear-gradient(90deg,rgba(201,165,94,0),#C9A55E 16%,#C9A55E 84%,rgba(201,165,94,0))}
.cs-page-cl{margin:0;padding:0;list-style:none;font:400 calc(16.5*var(--u))/1.72 var(--serif);font-variant-numeric:lining-nums;color:#221E19}
.cs-page-cl li{display:flex;gap:calc(6*var(--u))}
.cs-page-cl li span{flex:none;min-width:calc(16*var(--u))}
.cs-seal{position:absolute;right:calc(24*var(--u));bottom:calc(112*var(--u));width:calc(66*var(--u));height:calc(66*var(--u));transform:rotate(-8deg);filter:drop-shadow(0 calc(1.5*var(--u)) calc(1.5*var(--u)) rgba(80,55,15,.35))}
.cs-page-foot{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:calc(24*var(--u))}
.cs-sig svg{display:block;width:100%;height:auto;aspect-ratio:200/72;overflow:visible;margin-bottom:calc(-5*var(--u))}
.cs-sig path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.cs-sig-c path{stroke:#8E2A4F}
.cs-sig-d path{stroke:#1F3A86}
.cs-sig b{display:block;padding-top:calc(7*var(--u));border-top:1px solid #9A9286;font:600 calc(9.5*var(--u))/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7C7366}
.cs-doc-pg{margin:calc(16*var(--u)) 0 0;padding:calc(6*var(--u)) calc(12*var(--u));border-radius:99px;background:rgba(243,238,228,.07);font:500 calc(11.5*var(--u))/1 var(--sans);color:#9A9286}
.cs-doc-bar{flex:none;display:flex;align-items:center;gap:calc(10*var(--u));padding:calc(12*var(--u)) calc(18*var(--u)) calc(34*var(--u));border-top:1px solid rgba(233,211,155,.12);background:#12100D}
.cs-doc-bar .cs-doc-ic{flex:none;width:calc(22*var(--u));height:calc(22*var(--u));margin:0 calc(6*var(--u))}
.cs-doc-btn{flex:1;display:flex;align-items:center;justify-content:center;height:calc(46*var(--u));border-radius:99px;background:linear-gradient(100deg,#B8924A,#E9D39B 50%,#C9A55E);color:#1A140A;font:600 calc(15*var(--u))/1 var(--sans);letter-spacing:.01em}
/* the loop: Chloe signs, Daniel signs, the seal lands (8 s) */
/* one path per pen stroke: browsers restart a dash pattern at every subpath, so each stroke gets its own turn */
.cs-doc .cs-c1{animation:cs-c1 8s infinite}
.cs-doc .cs-c2{animation:cs-c2 8s infinite}
.cs-doc .cs-d1{animation:cs-d1 8s infinite}
.cs-doc .cs-d2{animation:cs-d2 8s infinite}
.cs-doc .cs-d3{animation:cs-d3 8s infinite}
.cs-doc .cs-seal{animation:cs-seal 8s infinite}
@keyframes cs-c1{0%,5%{stroke-dashoffset:1.05;opacity:1;animation-timing-function:cubic-bezier(.4,.12,.6,.95)}23%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cs-c2{0%,24%{stroke-dashoffset:1.05;opacity:1;animation-timing-function:ease-out}27%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cs-d1{0%,31%{stroke-dashoffset:1.05;opacity:1;animation-timing-function:cubic-bezier(.4,.12,.6,.95)}37.5%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cs-d2{0%,38%{stroke-dashoffset:1.05;opacity:1;animation-timing-function:cubic-bezier(.4,.12,.6,.95)}47.5%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cs-d3{0%,48.2%{stroke-dashoffset:1.05;opacity:1;animation-timing-function:ease-out}49.5%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes cs-seal{0%,53%{opacity:0;transform:scale(1.7) rotate(-26deg);animation-timing-function:cubic-bezier(.3,1.35,.5,1)}59%,88%{opacity:1;transform:scale(1) rotate(-8deg)}95%,100%{opacity:0;transform:scale(1) rotate(-8deg)}}
.cs-doc.cs-idle .cs-sig path{animation:none;stroke-dashoffset:1.05}
.cs-doc.cs-idle .cs-seal{animation:none;opacity:0}

@media (prefers-reduced-motion:reduce){
  .cs-lock .cs-notif,.cs-lock .cs-lock-dim,.cs-doc .cs-sig path,.cs-doc .cs-seal{animation:none!important}
  .cs-lock .cs-notif{opacity:1!important;transform:none!important}
  .cs-lock .cs-lock-dim{opacity:0!important}
  .cs-doc .cs-sig path{stroke-dashoffset:0!important;opacity:1!important}
  .cs-doc .cs-seal{opacity:1!important;transform:rotate(-8deg)!important}
}

/* =========================== 4. MUSIC PLAYER =========================== */
.mp{position:relative;container-type:inline-size;max-width:720px;margin:0 auto;border-radius:22px;overflow:hidden;background:linear-gradient(165deg,#1E1A15 0%,#151310 52%,#0F0E0C 100%);border:1px solid rgba(233,211,155,.17);box-shadow:0 30px 80px rgba(0,0,0,.55);color:#F3EEE4;text-align:left;font-family:var(--sans);--mp-p:0}
.mp button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.mp button:focus-visible,.mp-seek:focus-visible{outline:2px solid #E9D39B;outline-offset:3px}
.mp svg{display:block}
.mp-head{display:flex;align-items:center;gap:16px;padding:20px 20px 18px}
.mp-cover{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:12px;background:radial-gradient(circle at 30% 24%,#2B251C 0%,#0A0908 78%);box-shadow:inset 0 0 0 1px rgba(233,211,155,.36),0 10px 22px rgba(0,0,0,.45)}
.mp-cover img{width:74%;height:auto}
.mp-head-tx{flex:1;min-width:0}
.mp-head-t{margin:0;font:500 22px/1.15 var(--serif);color:#F3EEE4}
.mp-head-s{margin:5px 0 0;font:500 13px/1.3 var(--sans);color:#8C857A}
.mp-big{flex:none;display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#1A140A;background:linear-gradient(100deg,#B8924A,#E9D39B 50%,#C9A55E);box-shadow:0 10px 24px rgba(0,0,0,.45);transition:transform .15s ease}
.mp-big svg{width:24px;height:24px;fill:currentColor}
@media (hover:hover){.mp-big:hover{transform:scale(1.05)}}
.mp-big:active{transform:scale(.95)}
.mp-big .mp-i-pause,.mp-pp .mp-i-pause,.mp-is-on .mp-i-play{display:none}
.mp-is-on .mp-i-pause{display:block}
.mp-list{list-style:none;margin:0;padding:6px 8px 8px;border-top:1px solid rgba(233,211,155,.1)}
.mp-tr{border-radius:14px;transition:background .2s ease}
.mp-tr + .mp-tr{margin-top:2px}
.mp-started .mp-tr.mp-sel{background:rgba(233,211,155,.055)}
@media (hover:hover){.mp-tr:hover{background:rgba(233,211,155,.07)}}
.mp-row{display:grid;grid-template-columns:22px 48px minmax(0,1fr) auto auto;align-items:center;gap:0 14px;padding:11px 12px}
.mp-n{position:relative;display:grid;place-items:center;height:22px;font:500 14px/1 var(--sans);color:#8C857A;font-variant-numeric:tabular-nums}
.mp-eq{position:absolute;inset:2px 0;display:flex;align-items:flex-end;justify-content:center;gap:2px;opacity:0}
.mp-eq i{display:block;width:3px;height:35%;border-radius:1px;background:#E9D39B;animation:mp-eq .9s ease-in-out infinite;animation-play-state:paused}
.mp-eq i:nth-child(2){animation-delay:-.32s}
.mp-eq i:nth-child(3){animation-delay:-.6s}
@keyframes mp-eq{0%,100%{height:28%}50%{height:100%}}
.mp-on .mp-num{opacity:0}
.mp-on .mp-eq{opacity:1}
.mp-on .mp-eq i{animation-play-state:running}
.mp-art{width:48px;height:48px;border-radius:8px;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.mp-meta{min-width:0}
.mp-t{margin:0;font:600 15.5px/1.3 var(--sans);color:#F3EEE4;text-wrap:pretty;transition:color .2s ease}
.mp-started .mp-sel .mp-t{color:#E9D39B}
.mp-sub{display:block;margin-top:2px;font:italic 400 14px/1.35 var(--serif);color:#A39B8E}
.mp-a{margin:3px 0 0;font:400 13px/1.4 var(--sans);color:#8C857A;text-wrap:pretty}
.mp-lyb{display:inline-flex;align-items:center;gap:7px;margin:7px 0 0;padding:4px 0;border:0;background:none;cursor:pointer;color:#C9A55E;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.mp-lyb::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.mp-lyb[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
@media (hover:hover){.mp-lyb:hover{color:#E9D39B}}
.mp-dur{font:500 13px/1 var(--sans);color:#8C857A;font-variant-numeric:tabular-nums;text-align:right;min-width:34px}
.mp-pp{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1.5px solid rgba(233,211,155,.55);background:transparent;color:#E9D39B;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.mp-pp svg{width:16px;height:16px;fill:currentColor}
@media (hover:hover){.mp-pp:hover{background:rgba(233,211,155,.1);border-color:#E9D39B}}
.mp-pp.mp-is-on{border-color:transparent;color:#1A140A;background:linear-gradient(100deg,#B8924A,#E9D39B 50%,#C9A55E)}
.mp-err .mp-pp{opacity:.4}
.mp-ly{margin:0 12px 14px 110px;padding:14px 18px;border-left:2px solid rgba(233,211,155,.5);border-radius:0 12px 12px 0;background:rgba(233,211,155,.045);font:italic 400 16.5px/1.6 var(--serif);color:#D9D2C5;quotes:none}
.mp-ly:not([hidden]){animation:mp-in .28s ease both}
@keyframes mp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mp-now{padding:16px 20px 20px;border-top:1px solid rgba(233,211,155,.1);background:linear-gradient(180deg,rgba(10,9,8,0),rgba(10,9,8,.38))}
.mp-now-l{display:flex;align-items:baseline;gap:10px;min-width:0;margin:0 0 10px}
.mp-state{flex:none;font:600 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#C9A55E}
.mp-now-t{flex:1;min-width:0;font:500 14px/1.25 var(--sans);color:#F3EEE4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-prog{display:flex;align-items:center;gap:12px}
.mp-el,.mp-tot{flex:none;min-width:34px;font:500 12px/1 var(--sans);color:#8C857A;font-variant-numeric:tabular-nums}
.mp-tot{text-align:right}
.mp-seek{position:relative;flex:1;height:24px;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.mp-seek::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(233,211,155,.17)}
.mp-fill{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;width:calc(var(--mp-p) * 100%);border-radius:2px;background:linear-gradient(90deg,#B8924A,#F1E2B8)}
.mp-knob{position:absolute;top:50%;left:calc(var(--mp-p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#F4E6BE;box-shadow:0 2px 6px rgba(0,0,0,.55);transform:scale(0);transition:transform .15s ease}
.mp-playing .mp-knob,.mp-drag .mp-knob,.mp-seek:focus-visible .mp-knob{transform:scale(1)}
@media (hover:hover){.mp-seek:hover .mp-knob{transform:scale(1)}}
.mp-drag .mp-seek{cursor:grabbing}
@container (max-width:470px){
  .mp-head{gap:13px;padding:16px 14px 15px}
  .mp-cover{width:56px;height:56px;border-radius:10px}
  .mp-head-t{font-size:19px}
  .mp-big{width:48px;height:48px}
  .mp-big svg{width:21px;height:21px}
  .mp-list{padding:4px 4px 6px}
  .mp-row{grid-template-columns:44px minmax(0,1fr) auto auto;gap:0 11px;padding:10px 8px}
  .mp-n{display:none}
  .mp-art{width:44px;height:44px}
  .mp-t{font-size:14.5px}
  .mp-sub{font-size:13px}
  .mp-a{font-size:12.5px}
  .mp-dur{min-width:0;font-size:12px}
  .mp-pp{width:38px;height:38px}
  .mp-ly{margin:0 8px 12px 8px;padding:12px 14px;font-size:15.5px}
  .mp-now{padding:14px 14px 16px}
}
@media (prefers-reduced-motion:reduce){
  .mp-eq i{animation:none!important;height:60%}
  .mp-eq i:nth-child(2){height:100%}
  .mp-eq i:nth-child(3){height:40%}
  .mp-ly:not([hidden]){animation:none}
  .mp-big,.mp-knob,.mp-tr,.mp-t{transition:none}
}

/* =========================== 5. THE SMALL PRINT =========================== */
.sp{max-width:640px;margin:0 auto}
.sp-desk{margin:0 -5%;transform:rotate(-.6deg);filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) drop-shadow(0 3px 5px rgba(0,0,0,.45))}
/* the photo has a margin of desk around the paper: clip-path keeps the paper only, the shadow above follows its edge */
.sp-sheet{position:relative;width:min(100%,640px);margin:0 auto;aspect-ratio:880/1168;background:#E3DACA url(../img/bail-sheet.jpg) 0 0/100% 100% no-repeat;clip-path:inset(2.66% 4.72% 3.25% 4.43% round 2px);container-type:inline-size;color:#29241D}
.sp-in{position:absolute;top:6.5%;right:9.1%;bottom:6.7%;left:9%;display:flex;flex-direction:column;overflow:hidden;font:400 8px/1.26 var(--sans);font-size:calc(clamp(6.5px,2.25cqi,10.5px) * var(--sp-k,1));letter-spacing:-.008em;color:#29241D}
.sp-form{flex:none;margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1em 1.2em;padding-bottom:.4em;border-bottom:.6px solid rgba(41,36,29,.6);font:600 .7em/1.3 var(--sans);letter-spacing:.075em;text-transform:uppercase;color:#4B4337}
.sp-title{flex:none;margin:.62em 0 .5em;text-align:center;font:600 1.5em/1.1 var(--serif);font-variant-caps:small-caps;letter-spacing:.07em;color:#1F1B16}
.sp-clauses{flex:none;margin:0;padding:0;list-style:none;counter-reset:sp;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.sp-clauses li{counter-increment:sp;margin:0 0 .16em;break-inside:avoid}
.sp-clauses li::before{content:counter(sp) '.';margin-right:.32em;font-weight:700;color:#1F1B16}
@container (min-width:480px){.sp-in{line-height:1.36}.sp-clauses{column-count:2;column-gap:1.7em;column-rule:.6px solid rgba(41,36,29,.22)}.sp-clauses li{margin-bottom:.42em}.sp-title{margin:.9em 0 .8em}}
.sp-sign{flex:none;display:flex;align-items:flex-end;gap:.55em;margin:auto 0 0;padding:2.7em 0 .7em;font:600 .95em/1 var(--sans);color:#29241D}
.sp-blank{position:relative;flex:0 1 14em;height:1em;border-bottom:.7px solid #29241D}
.sp-scrawl{position:absolute;left:4%;bottom:-.55em;width:9.6em;height:auto;aspect-ratio:140/64;overflow:visible}
.sp-scrawl path{fill:none;stroke:#1E3A8A;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.1;stroke-dashoffset:0}
.sp-stamp{position:absolute;right:12.5%;bottom:13%;z-index:2;padding:.3em .52em .46em .64em;border:.13em solid currentColor;border-radius:.24em;outline:.05em solid currentColor;outline-offset:-.3em;color:#B5162D;font:800 22px/1 'CS Inter',var(--sans);font-size:5.4cqi;letter-spacing:.17em;text-transform:uppercase;text-align:center;transform:rotate(-13deg);mix-blend-mode:multiply;opacity:.84;pointer-events:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:180px 180px;mask-size:180px 180px}
.sp-stamp small{display:block;margin-top:.3em;font:700 .26em/1 var(--sans);letter-spacing:.24em}
.sp-plain{max-width:600px;margin:34px auto 0;text-align:center;font-size:14px;line-height:1.6;color:#8C857A}
/* first sight: the applicant signs, then the registry stamps it */
.sp-sheet.sp-wait .sp-scrawl path{stroke-dashoffset:1.05}
.sp-sheet.sp-wait .sp-stamp{opacity:0}
.sp-sheet.sp-seen .sp-a1{animation:sp-draw 1.25s .25s cubic-bezier(.45,.1,.5,1) both}
.sp-sheet.sp-seen .sp-a2{animation:sp-draw .5s 1.55s cubic-bezier(.3,.1,.4,1) both}
.sp-sheet.sp-seen .sp-stamp{animation:sp-stamp .5s 2.05s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sp-draw{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes sp-stamp{from{opacity:0;transform:rotate(-13deg) scale(1.7)}to{opacity:.84;transform:rotate(-13deg) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .sp-sheet .sp-scrawl path{animation:none!important;stroke-dashoffset:0!important}
  .sp-sheet .sp-stamp{animation:none!important;opacity:.84!important}
}