/* css/client.css — one question per screen, set like a poster.
   The structure is unchanged: single question, help line, thumbable answers.
   The presentation moves to condensed uppercase display type at crushed
   leading with a character-by-character rise (the Buzzworthy treatment),
   directional screen slides (the Codrops treatment), sharp corners, and one
   hot accent. Tokens are defined here, so the file stands on its own. */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --ink:#101013;                      /* the room                          */
  --ink2:#17171c;                     /* raised slabs: answers, tiles      */
  --ink3:#1f1f25;                     /* picked slabs                      */
  --ink4:#26262d;
  --paper:#efeee8;                    /* text                              */
  --dim:#8f8f88;
  --faint:rgba(239,238,232,.12);
  --line:rgba(239,238,232,.22);
  --red:#fd5457;                      /* the one hot thing                 */
  --acid:#d8f21c;                     /* selection + the live estimate     */
  --amber:#e0a52e;                    /* contested calendar days           */
  --dsp:'Anton',Impact,sans-serif;
  --mn:'Space Mono',ui-monospace,monospace;
  --ask:var(--dsp);
}
/* the second look, for studios that pick "warm" in the console */
/* Looks: the page renders on whatever tokens.css provides (link.tattoo
   paper by default). "dark" — the original black/red/chartreuse suite —
   and "warm" survive as the artist's client-form choices. */
html[data-look="dark"]{
  --ink:#050505;--ink2:#0d0d0d;--ink3:#151515;--ink4:#1b1b1b;
  --paper:#eae7e0;--dim:rgba(234,231,224,.5);--faint:rgba(234,231,224,.13);
  --line:rgba(234,231,224,.16);--red:#fd5457;--acid:#ccff00;--amber:#ffb020;
}
html[data-look="warm"]{
  --ink:#e9cfbd; --ink2:#e2c4af; --ink3:#dcbca6; --ink4:#d6b39c;
  --paper:#1c1613; --dim:rgba(28,22,19,.62); --faint:rgba(28,22,19,.13);
  --line:rgba(28,22,19,.22);
  --red:#8a3b2e; --acid:#1c1613; --amber:#9a6b28;
  --ask:'Cormorant Garamond',Georgia,serif;
}
html[data-look="warm"] .h{text-transform:none;letter-spacing:0;line-height:1.12}

*{box-sizing:border-box}
/* min-height, NOT height: with height:100% the body was pinned to one
   viewport tall, so any long screen (a full calendar, a wall of flash)
   scrolled past the painted background onto the bare canvas — the black
   void under long pages. html paints the same ink explicitly so the
   canvas is always the theme's colour, whatever wins the cascade above. */
html,body{min-height:100%}
html{background:var(--ink)}
body{margin:0;overflow-x:hidden;background:var(--ink);color:var(--paper);
  font:15px/1.5 var(--mn);-webkit-font-smoothing:antialiased}
.hidden{display:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ── frame ──────────────────────────────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--faint);z-index:70}
.prog i{display:block;height:100%;background:var(--red);transition:width .3s cubic-bezier(.2,.65,.2,1)}
.mark{position:fixed;top:1rem;right:1.1rem;left:auto;z-index:60;
  display:flex;align-items:center;gap:.6rem;flex-direction:row-reverse;
  padding:.35rem .8rem .35rem .5rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 72%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* the logo lives in a circle: line-art logos, white-backed logos and square
   exports all read the same way instead of a stray block on the photo */
.mark .logoring{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--ink2)}
.mark .logoring.white{background:#fff}
.mark .logoring img{width:82%;height:82%;object-fit:contain;display:block}
/* the ask column is left-aligned, so the mark's default home is the quiet
   right corner. On a split screen the TEXT is on the right (photo left),
   so the mark crosses over to the photo's corner — a wordmark on a photo
   corner reads fine; a wordmark through a question does not. On a phone
   the split collapses (the photo hides) and text is left again, so the
   mark goes back right. */
body.haspic .mark{right:auto;left:1.1rem;flex-direction:row;padding:.35rem .5rem .35rem .8rem}
@media(max-width:820px){body.haspic .mark{left:auto;right:1.1rem;flex-direction:row-reverse}}
.mark b{font-family:var(--dsp);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.mark b i{font-style:normal;color:var(--red)}

.nav{position:fixed;bottom:1rem;right:1rem;z-index:60;display:flex;gap:.35rem}
.nav button{width:42px;height:38px;background:var(--ink2);border:1px solid var(--line);
  color:var(--paper);cursor:pointer;font-size:.75rem;line-height:1;transition:border-color .15s,color .15s}
.nav button:disabled{color:var(--faint);cursor:not-allowed;border-color:var(--faint)}
.nav button:hover:not(:disabled){border-color:var(--red);color:var(--red)}

/* ── the screen: directional slide, Codrops-style ───────────────────────── */
.screen{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr;
  animation:sIn .5s cubic-bezier(.2,.65,.2,1) both}
#root[data-dir="fwd"] .screen{animation-name:sUp}
#root[data-dir="back"] .screen{animation-name:sDown}
#root[data-settled] .screen,#root[data-settled] .screen *{animation:none!important}
@keyframes sIn{from{opacity:0}}
@keyframes sUp{from{opacity:0;transform:translateY(42px)}}
@keyframes sDown{from{opacity:0;transform:translateY(-42px)}}

.screen.split{grid-template-columns:minmax(0,45%) 1fr}
@media(max-width:820px){.screen.split{grid-template-columns:1fr}.screen.split .pic{display:none}}
.pic{background:var(--ink2);background-size:cover;background-position:center;position:relative;overflow:hidden}
.pic.blank:after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 26px,rgba(253,84,87,.09) 26px 27px)}
.pic .cap{position:absolute;bottom:1.2rem;left:1.2rem;right:1.2rem;
  font:400 .6rem var(--mn);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.ask{display:flex;align-items:center;padding:5rem 1.4rem 5.5rem}
.inner{width:100%;max-width:36rem}

/* the question, set like a poster */
.h{font-family:var(--ask);font-weight:400;
  font-size:clamp(2rem,6.4vw,3.4rem);line-height:.94;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 .8rem}
.h .req{color:var(--red)}
.h .m{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.h .c{display:inline-block;transform:translateY(115%);
  animation:riseC .55s cubic-bezier(.2,.65,.2,1) forwards;
  animation-delay:calc(var(--i)*16ms)}
@keyframes riseC{to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .screen{animation:none!important}
  .h .c{animation:none;transform:none}
}

.sub{font-size:.8rem;color:var(--dim);line-height:1.65;margin:0 0 1.6rem;max-width:31rem}
.sub b{color:var(--paper);font-weight:400}

/* ── answers as a stack ─────────────────────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.4rem}
.pick{display:flex;align-items:center;gap:.75rem;text-align:left;background:var(--ink2);
  border:1px solid transparent;padding:.75rem .85rem;cursor:pointer;color:var(--paper);
  font:400 .92rem var(--mn);transition:border-color .14s,transform .14s}
.pick:hover{border-color:var(--red);transform:translateX(4px)}
.pick[aria-pressed="true"]{border-color:var(--acid);background:var(--ink3)}
.pick kbd{flex:none;width:24px;height:24px;border:1px solid var(--line);display:grid;
  place-items:center;font:400 .6rem var(--mn);color:var(--dim)}
.pick[aria-pressed="true"] kbd{border-color:var(--acid);color:var(--acid)}
.pick s{text-decoration:none;display:block}
.pick small{display:block;font-size:.67rem;color:var(--dim);margin-top:.18rem}

/* ── tiles, for anything with a picture ─────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:1.8rem}
/* The card is mixed from the TEXT colour, not picked from the ink steps —
   on a near-black theme --ink2 IS the page, so a tile built from it was a
   black slab on a black page: images floating over a void, captions
   invisible, and the go button drowning under it. Mixing from --paper
   lifts the card on every theme, dark or cream, by the same amount. */
.tile{background:color-mix(in srgb,var(--paper) 7%,var(--ink));
  border:1px solid color-mix(in srgb,var(--paper) 15%,transparent);
  border-radius:12px;padding:0;cursor:pointer;
  color:var(--paper);text-align:left;overflow:hidden;transition:border-color .14s}
.tile:hover{border-color:var(--red)}
.tile[aria-pressed="true"]{border-color:var(--acid);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acid) 22%,transparent)}
.tile .art{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  background:color-mix(in srgb,var(--paper) 12%,var(--ink));color:var(--dim)}
.tile[aria-pressed="true"] .art{color:var(--acid)}
.tile span{display:block;padding:.55rem .65rem .7rem;font:400 .74rem var(--mn);line-height:1.45}
.tiles.people .art{aspect-ratio:1/1}
/* A wall of eight pieces is a gallery, not a paragraph: when a screen's
   body is a tile grid, the column widens past the 36rem text measure, so
   the pieces land as clean rows of four instead of 3-3-2 with a hole and
   a long scroll. The heading and the go button widen with it, which is
   what keeps the button clear of the grid instead of lost against it. */
.inner:has(.tiles){max-width:52rem}
@media(max-width:940px){.inner:has(.tiles){max-width:36rem}}

/* ── typed answers ──────────────────────────────────────────────────────── */
.text,.area,select.drop{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.6rem 0;font:400 1.05rem var(--mn);color:var(--paper);margin-bottom:1.2rem;
  transition:border-color .2s}
.text:focus,.area:focus,select.drop:focus{outline:0;border-bottom-color:var(--red)}
.area{min-height:6.5rem;resize:vertical;font-size:.95rem;line-height:1.6}
.text::placeholder,.area::placeholder{color:var(--faint)}
select.drop{background:var(--ink2);border:1px solid var(--line);padding:.65rem}

/* ── go ─────────────────────────────────────────────────────────────────── */
.ok{background:var(--red);color:var(--ink);border:1px solid var(--red);padding:.68rem 1.6rem;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  font-family:var(--dsp);font-weight:400;font-size:1.02rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:transform .14s}
.ok:hover:not(:disabled){transform:translateX(4px)}
/* disabled is an OUTLINE waiting to be filled in — visibly inert but
   readable, so it says "one thing left to do" rather than "broken" */
.ok:disabled{background:transparent;border:1px dashed var(--line);
  color:var(--dim);cursor:not-allowed}
.ok.wide{width:100%;padding:1rem;text-align:center}
html[data-look="warm"] .ok{color:#e9cfbd}
.enter{font:400 .6rem var(--mn);color:var(--dim);letter-spacing:.14em;margin-left:.8rem;text-transform:uppercase}
.skip{background:none;border:0;color:var(--dim);font:400 .72rem var(--mn);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;margin-left:1rem}
.skip:hover{color:var(--paper)}
.err{color:var(--red);font-size:.78rem;margin-top:.8rem;animation:nudge .3s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ── size ───────────────────────────────────────────────────────────────── */
.szread{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.3rem}
.szn{font-family:var(--dsp);font-size:3.2rem;line-height:1}
.szu{font:400 .62rem var(--mn);letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.szx{font-size:.8rem;color:var(--red)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--faint);margin:.8rem 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:0;background:var(--red);border:3px solid var(--ink);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:0;
  background:var(--red);border:3px solid var(--ink);cursor:pointer}

/* ── the guess ──────────────────────────────────────────────────────────── */
.guess{border-left:3px solid var(--acid);padding:.65rem 0 .65rem .9rem;margin-bottom:1.2rem}
.guess b{display:block;font-family:var(--dsp);font-weight:400;font-size:1.9rem;
  color:var(--acid);line-height:1.05;letter-spacing:.01em}
.guess span{font-size:.72rem;color:var(--dim);line-height:1.6;display:block;margin-top:.3rem}
.guess span b{display:inline;font:inherit;color:var(--paper)}

/* ── pictures they send us ──────────────────────────────────────────────── */
.drop{border:1px dashed var(--line);padding:1.7rem 1rem;text-align:center;cursor:pointer;margin-bottom:.8rem;
  transition:border-color .15s}
.drop:hover,.drop.over{border-color:var(--red)}
.drop b{display:block;font-size:.92rem}
.drop span{font-size:.68rem;color:var(--dim)}
.shots{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.shots img{width:68px;height:68px;object-fit:cover;border:1px solid var(--line);cursor:pointer}
.shots .lk{border:1px solid var(--line);padding:.35rem .5rem;font:400 .62rem var(--mn);color:var(--dim);
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}

/* ── calendar ───────────────────────────────────────────────────────────── */
.calbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.calbar b{font-family:var(--dsp);font-weight:400;font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;flex:1;text-align:center}
.calbar button{width:34px;height:34px;background:var(--ink2);border:1px solid var(--line);
  color:var(--paper);cursor:pointer}
.calbar button:hover:not(:disabled){border-color:var(--red)}
.calbar button:disabled{color:var(--faint);cursor:not-allowed}
.dows{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.dows span{font:400 .54rem var(--mn);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:.6rem}
.day{aspect-ratio:1;border:1px solid var(--line);background:var(--ink2);color:var(--paper);
  font:400 .85rem var(--mn);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:0;transition:border-color .12s}
.day.blank{border:0;background:none;cursor:default}
.day.off{color:var(--faint);border-color:transparent;background:none;cursor:not-allowed}
.day.gone{color:var(--dim);border-style:dashed;text-decoration:line-through;cursor:not-allowed}
.day.busy{border-color:var(--amber)}
.day.free:hover{border-color:var(--red)}
.day.on{border-color:var(--red);background:var(--red);color:var(--ink)}
.day i{font-style:normal;font-size:.46rem;color:var(--amber)}
.day.on i{color:var(--ink)}
.key{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem;font:400 .6rem var(--mn);color:var(--dim)}
.key span:before{content:"";display:inline-block;width:9px;height:9px;border:1px solid var(--line);
  margin-right:.3rem;vertical-align:-1px}
.key .k2:before{border-color:var(--amber)}
.key .k3:before{border-style:dashed;border-color:var(--dim)}
.slot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;
  background:var(--ink2);border:1px solid transparent;padding:.65rem .8rem;margin-bottom:.35rem;
  color:var(--paper);cursor:pointer;text-align:left;font:400 .9rem var(--mn);transition:border-color .12s}
.slot:hover:not(:disabled){border-color:var(--red)}
.slot[aria-pressed="true"]{border-color:var(--acid);background:var(--ink3)}
.slot:disabled{color:var(--dim);border-style:dashed;cursor:not-allowed}
.slot b{font-family:var(--dsp);font-weight:400;font-size:1.1rem;letter-spacing:.04em}
.slot span{font-size:.64rem;color:var(--dim);text-align:right}
.slot.warm{border-color:var(--amber)}
.slot.warm span{color:var(--amber)}

/* ── review + done ──────────────────────────────────────────────────────── */
/* a fixed label column and a left-aligned value column: the old
   flex-with-right-aligned-values made every wrapped line land somewhere
   different, which read as jagged. Grid pins the geometry. */
.rows{border-top:1px solid var(--faint);margin-bottom:1.2rem}
.row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--faint);font-size:.8rem}
.row span:first-child{color:var(--dim);flex:none;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding-top:.15rem}
.row span:last-child{text-align:right}
/* the consent row is the key that unlocks the send button, so it gets a
   frame that says "this is the last control", and the accent moves onto it
   while it is still unticked */
.tick{display:flex;gap:.7rem;align-items:flex-start;font-size:.8rem;line-height:1.55;
  margin-bottom:1.2rem;padding:.8rem .9rem;cursor:pointer;
  border:1px solid var(--line);border-radius:10px;
  background:color-mix(in srgb,var(--paper) 4%,transparent);
  transition:border-color .18s ease}
.tick:has(input:not(:checked)){border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.tick:has(input:checked){border-color:var(--acid)}
.tick input{width:18px;height:18px;accent-color:var(--red);flex:none;margin-top:.15rem;cursor:pointer}
.bignum{font-family:var(--dsp);font-size:4.2rem;line-height:1;margin:.3rem 0 .2rem;letter-spacing:.01em}
.bignum small{display:block;font:400 .58rem var(--mn);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.steps{list-style:none;font-size:.85rem;margin:1.2rem 0 0;padding:0}
.steps li{padding:.55rem 0 .55rem 1.4rem;position:relative;border-bottom:1px solid var(--faint);line-height:1.6}
.steps li:before{content:"—";position:absolute;left:0;color:var(--red)}
.steps li:last-child{border:0}
.note{font-size:.75rem;color:var(--dim);border-left:3px solid var(--red);padding-left:.8rem;
  margin:1rem 0;line-height:1.65}
.offline{border:1px solid var(--red);color:var(--red);padding:.65rem .75rem;font-size:.74rem;margin-bottom:1rem}
.msg{border-left:3px solid var(--acid);background:var(--ink2);padding:.85rem;margin-bottom:.6rem}
.msg em{font-style:normal;font:400 .58rem var(--mn);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);display:block;margin-bottom:.4rem}
.msg p{font-size:.85rem;white-space:pre-wrap;line-height:1.6;margin:0}

/* any line on the review can be gone back to on its own */
.row.edit{cursor:pointer;display:grid;grid-template-columns:96px minmax(0,1fr) auto;
  gap:4px 14px;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--faint);
  border-radius:6px}
.row.edit:hover{background:color-mix(in srgb,var(--paper) 4%,transparent)}
.row.edit span:first-child{padding-top:2px}
.row.edit .val{text-align:left;font-size:.82rem;line-height:1.55;overflow-wrap:anywhere}
.row.edit .chg{flex:none;font:400 .6rem var(--mn);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acid);opacity:0;white-space:nowrap;transition:opacity .12s}
.row.edit:hover .chg{opacity:1}
@media(hover:none){.row.edit .chg{opacity:.7}}



/* ── the demo's reveal (client.html?demo=1, framed on the home page) ─────
   The request seen from the artist's side, then the pitch. Token-driven,
   so it wears whatever look the demo runs in. */
.demo-inbox{background:var(--ink2);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;margin:12px 0;text-align:left;
  box-shadow:0 10px 24px -14px rgb(0 0 0/.25)}
.demo-inbox b{display:block;font-size:.86rem;color:var(--paper)}
.demo-inbox b i{font-style:normal;color:var(--red);border:1px solid var(--red);
  border-radius:999px;font-size:.5rem;font-weight:700;letter-spacing:.1em;
  padding:2px 6px;margin-left:8px;vertical-align:2px}
.demo-inbox small{display:block;color:var(--dim);font-size:.68rem;margin-top:3px}
.demo-claim{display:block;text-align:center;background:var(--red);color:var(--ink);
  text-decoration:none;border-radius:999px;padding:13px 20px;font-size:.7rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}
.demo-again{display:block;background:none;border:0;font:inherit;font-size:.66rem;
  cursor:pointer;color:var(--dim);padding:12px 2px 0;text-decoration:underline;
  margin:0 auto}

/* ── demo dressing (client.html?demo=1 in the home page's frame) ─────────── */
html.demo .mark{top:10px;right:10px;padding:.3rem .7rem}
html.demo .demo-wordmark{font:400 13px var(--dsp);letter-spacing:.02em;text-transform:none}
html.demo .demo-wordmark i{font-style:normal;color:var(--red)}
/* the frame is short, so the first heading gets clearance from the mark */
html.demo .inner{padding-top:1rem}
html.demo h1.q,html.demo .chapter h1{padding-right:80px}

/* word-break:normal throughout: this block lives inside .reach, whose
   break-all (built for long emails) was shattering "through" mid-word */
.demo-done{display:grid;justify-items:start;gap:8px;text-align:left;
  word-break:normal;overflow-wrap:normal}
.demo-tick{width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
  background:var(--acid);color:var(--ink)}
.demo-tick svg{display:block}
.demo-done b{font-size:1rem;line-height:1.3;word-break:normal}
.demo-done small{word-break:normal}
.demo-done small{font-size:.72rem;line-height:1.6;color:var(--dim)}
.demo-done .demo-claim{border:0;cursor:pointer;font:inherit;font-size:.7rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;width:auto;
  padding:12px 26px;margin-top:6px}

/* the consent tick, tidied: centred box, roomier frame, calm at rest */
.tick{align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:12px}
.tick input{margin-top:0}
.tick span{font-size:.78rem}

/* ── the deposit ending (Artist plan) ────────────────────────────────────
   The last screen's offer: the slot is asked for, the deposit holds it.
   Accent frame because it is the one action left on the page. */
.dep-cta{border:1px solid var(--red);border-radius:12px;padding:16px;margin-top:16px}
.dep-cta b{display:block;font-size:.95rem;margin-bottom:6px}
.dep-cta small{display:block;font-size:.72rem;line-height:1.6;color:var(--dim);
  margin-bottom:12px}
.dep-go{display:block;text-align:center;background:var(--red);color:var(--ink);
  text-decoration:none;border-radius:999px;padding:13px 20px;font-size:.72rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.dep-go i{font-style:normal;opacity:.7;text-transform:none;letter-spacing:0}

/* the artist's own way-out link (Artist plan) */
.end-link{display:block;text-align:center;margin-top:12px;padding:12px 20px;
  border:1px solid var(--line);border-radius:999px;color:var(--paper);
  text-decoration:none;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.end-link:hover{border-color:var(--red)}