/* ==========================================================================
   Cleverotter — static site hosting
   Monochrome editorial. One accent: scale.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0C;
  --dim:#6E6E73;
  --rule:rgba(11,11,12,.14);
  --rule-mid:rgba(11,11,12,.3);
  --slab:#0B0B0C;
  --slab-ink:#FFFFFF;
  --wash:rgba(11,11,12,.035);
  --field:#0B0B0C;

  --measure:1140px;
  --gut:clamp(20px,4.4vw,40px);

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --grot:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;

  --t-label:clamp(9.5px,.66vw,11px);
  --t-body:clamp(15px,1.08vw,16.5px);
  --t-lead:clamp(17px,1.5vw,22px);
  --t-h3:clamp(19px,1.5vw,23px);
  --t-h2:clamp(32px,4.6vw,56px);
  --t-h1:clamp(40px,6.8vw,96px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B0B0C;--ink:#F2F2F3;--dim:#8B8B92;
    --rule:rgba(242,242,243,.16);--rule-mid:rgba(242,242,243,.34);
    --slab:#F2F2F3;--slab-ink:#0B0B0C;--wash:rgba(242,242,243,.05);--field:#F2F2F3;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0B0C;--ink:#F2F2F3;--dim:#8B8B92;
  --rule:rgba(242,242,243,.16);--rule-mid:rgba(242,242,243,.34);
  --slab:#F2F2F3;--slab-ink:#0B0B0C;--wash:rgba(242,242,243,.05);--field:#F2F2F3;
}
:root[data-theme="light"]{
  --paper:#FFFFFF;--ink:#0B0B0C;--dim:#6E6E73;
  --rule:rgba(11,11,12,.14);--rule-mid:rgba(11,11,12,.3);
  --slab:#0B0B0C;--slab-ink:#FFFFFF;--wash:rgba(11,11,12,.035);--field:#0B0B0C;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--grot);font-size:var(--t-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,canvas{max-width:100%;display:block}
p{margin:0}

.mono{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums;
}
.mono--ink{color:var(--ink)}
.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------------ nav */
.nav{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav__in{display:flex;align-items:center;gap:20px;height:56px;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut)}
.brand{font-weight:900;letter-spacing:.01em;font-size:14px;text-transform:uppercase;white-space:nowrap}
.nav__links{display:none;gap:26px;margin-left:14px}
@media (min-width:840px){.nav__links{display:flex}}
.nav__a{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);padding-block:6px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav__a:hover{color:var(--ink)}
.nav__a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__clock{display:none}
@media (min-width:1040px){.nav__clock{display:block}}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  padding:13px 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:background .18s,color .18s;white-space:nowrap;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:9px 14px}
.btn--wide{width:100%}
.btn--onslab{border-color:var(--slab-ink);background:var(--slab-ink);color:var(--slab)}
.btn--onslab:hover{background:transparent;color:var(--slab-ink)}
.btn--outslab{border-color:var(--slab-ink);background:transparent;color:var(--slab-ink)}
.btn--outslab:hover{background:var(--slab-ink);color:var(--slab)}

/* ------------------------------------------------------------------ sections */
.sec{border-top:1px solid var(--rule);padding-block:clamp(56px,7vw,110px)}
.sec--open{border-top:0}
.sec--tight{padding-block:clamp(38px,4.4vw,62px)}
.sec__head{max-width:44ch;margin-bottom:clamp(34px,4.4vw,60px)}
.sec__t{font-size:var(--t-h2);font-weight:900;letter-spacing:-.035em;line-height:.96;margin:14px 0 0;text-wrap:balance}
.sec__p{margin:18px 0 0;color:var(--dim);font-size:var(--t-lead);line-height:1.45;max-width:38ch}

/* ------------------------------------------------------------------ hero */
.hero{padding-top:clamp(44px,6vw,92px);padding-bottom:clamp(34px,4vw,56px)}

/* No max-width: the headline is meant to run the full measure. Constraining it
   to a character count pushed every line into the left half and left the right
   side of the page empty. */
.h1{font-size:var(--t-h1);font-weight:900;letter-spacing:-.045em;line-height:.9;margin:clamp(18px,2.4vw,30px) 0 0}
.h1__line{display:block}

/* The highlight is an inline-block, not an inline background.
   Padding on an *inline* element paints outside its line box without adding to
   it, so at this leading the black slab lands on top of the line above. As an
   inline-block it occupies real space and the lines stack cleanly. */
.h1__slab{
  display:inline-block;background:var(--slab);color:var(--slab-ink);
  line-height:1;padding:.08em .17em .14em;margin-top:.06em;
}

.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.2vw,42px);margin-top:clamp(28px,3.4vw,46px)}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,86px);align-items:start}
}
.hero__sub{font-size:var(--t-lead);margin:0;max-width:40ch;color:var(--dim)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.6vw,32px)}
.hero__note{margin-top:16px}
.hero__spec .row{padding:9px 0}

/* page hero for subpages — title and standfirst sit side by side on desktop so
   the headline can run wide without stranding the right half of the page */
.phero{padding-top:clamp(40px,5.4vw,76px);padding-bottom:clamp(30px,3.6vw,48px)}
.phero__t{font-size:clamp(36px,5.6vw,76px);font-weight:900;letter-spacing:-.045em;line-height:.92;margin:16px 0 0;text-wrap:balance}
.phero__p{font-size:var(--t-lead);color:var(--dim);margin:22px 0 0;max-width:44ch}
@media (min-width:900px){
  .phero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,86px);align-items:end;margin-top:16px}
  .phero__grid .phero__t{margin-top:0}
  .phero__grid .phero__p{margin-top:0;padding-bottom:.4em}
}

/* ------------------------------------------------------------------ stats */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:20px 0;border-bottom:1px solid var(--rule)}
@media (min-width:820px){
  .stat{padding:22px clamp(16px,2vw,26px);border-bottom:0;border-left:1px solid var(--rule)}
  .stat:first-child{border-left:0;padding-left:0}
}
@media (max-width:819px){.stat:nth-child(even){padding-left:clamp(16px,4vw,22px);border-left:1px solid var(--rule)}}
.stat__n{font-size:clamp(28px,3.4vw,42px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat__l{margin-top:8px}

/* ------------------------------------------------------------------ terminal */
.term{border:1px solid var(--ink);background:var(--paper)}
.term__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px solid var(--ink)}
.term__dot{display:inline-block;width:7px;height:7px;background:var(--ink);margin-right:.7em;vertical-align:.05em;animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.term__body{
  margin:0;padding:clamp(16px,2vw,24px) clamp(14px,1.8vw,20px) 8px;
  font-family:var(--mono);font-size:clamp(11.5px,1vw,13.5px);line-height:1.78;
  min-height:clamp(250px,26vw,318px);max-height:60vh;overflow:auto;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.tl{white-space:pre-wrap;word-break:break-word;display:block}
.tl--dim{color:var(--dim)}
.tl--slab{display:inline-block;background:var(--slab);color:var(--slab-ink);padding:.1em .55em}
.tl--err{text-decoration:underline;text-underline-offset:3px}
.term__form{display:flex;align-items:center;gap:0;border-top:1px solid var(--ink)}
.term__prompt{padding:0 4px 0 14px;color:var(--ink);font-size:13px;letter-spacing:0}
.term__field{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:clamp(11.5px,1vw,13.5px);padding:14px 10px;outline:none;
}
.term__field::placeholder{color:var(--dim);opacity:1}
.term__run{
  border:0;border-left:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;padding:0 18px;align-self:stretch;
  transition:background .18s,color .18s;
}
.term__run:hover{background:var(--ink);color:var(--paper)}
.term__hint{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-mid);background:transparent;color:var(--dim);
  padding:6px 11px;cursor:pointer;transition:border-color .18s,color .18s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}

/* ------------------------------------------------------------------ copy line */
.copy{display:flex;border:1px solid var(--ink);margin-top:clamp(20px,2.4vw,30px)}
.copy__c{flex:1;min-width:0;overflow-x:auto;padding:14px 16px;font-family:var(--mono);font-size:clamp(11.5px,1vw,13.5px);white-space:nowrap}
.copy__b{
  border:0;border-left:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;padding:0 18px;
  transition:background .18s,color .18s;
}
.copy__b:hover{background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------------------ steps */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:780px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3.4vw,52px)}}
.step{border-top:1px solid var(--ink);padding-top:14px}
.step__t{font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em;margin:14px 0 8px;line-height:1.15}
.step__p{color:var(--dim);max-width:34ch}

/* ------------------------------------------------------------------ cards */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--ink)}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{padding:22px 0;border-bottom:1px solid var(--rule)}
@media (min-width:700px){
  .card{padding:24px clamp(18px,2.2vw,28px) 26px;border-left:1px solid var(--rule)}
  .cards>.card:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (min-width:1000px){
  .cards--4>.card{border-left:1px solid var(--rule);padding-left:clamp(18px,2.2vw,28px)}
  .cards--4>.card:nth-child(2n+1){border-left:1px solid var(--rule);padding-left:clamp(18px,2.2vw,28px)}
  .cards--4>.card:nth-child(4n+1){border-left:0;padding-left:0}
}
.card__t{font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em;margin:12px 0 8px;line-height:1.2}
.card__p{color:var(--dim);max-width:36ch}

/* ------------------------------------------------------------------ split */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,48px);align-items:start}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px)}}

/* ------------------------------------------------------------------ figure */
.fig{border:1px solid var(--ink)}
.fig__bar,.fig__cap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 13px}
.fig__bar{border-bottom:1px solid var(--ink)}
.fig__cap{border-top:1px solid var(--ink)}

/* ------------------------------------------------------------------ tiers */
.tiers{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ink)}
@media (min-width:900px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tier{padding:26px 0;display:flex;flex-direction:column}
@media (min-width:900px){
  .tier{padding:28px clamp(20px,2.2vw,30px) 30px;border-left:1px solid var(--rule)}
  .tier:first-child{border-left:0;padding-left:0}
}
@media (max-width:899px){.tier+.tier{border-top:1px solid var(--rule)}}
.tier--mark{background:var(--slab);color:var(--slab-ink)}
.tier--mark .mono{color:var(--slab-ink);opacity:.6}
.tier--mark .tier__f li{border-bottom-color:rgba(128,128,128,.32)}
.tier--mark .tier__f li::before{background:var(--slab-ink)}
@media (max-width:899px){.tier--mark{padding-inline:clamp(18px,4.4vw,26px)}}
.tier__n{font-size:var(--t-h3);font-weight:900;letter-spacing:-.025em;margin:12px 0 0}
.tier__price{display:flex;align-items:baseline;gap:.35em;margin:16px 0 6px}
.tier__amt{font-size:clamp(40px,4.6vw,58px);font-weight:900;letter-spacing:-.05em;line-height:1}
.tier__per{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.tier__for{margin:0 0 20px;font-size:14px;opacity:.78;min-height:2.8em}
.tier__f{list-style:none;margin:0 0 24px;padding:0;flex:1}
.tier__f li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--rule);font-size:14px}
.tier__f li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:1px;background:var(--ink)}
.tier__f li:last-child{border-bottom:0}
.tier__f em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-left:.45em}

/* ------------------------------------------------------------------ data rows */
.rows{border-top:1px solid var(--ink)}
.row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--rule)}
.row__v{text-align:right;color:var(--ink)}

/* comparison / roadmap list */
.list{border-top:1px solid var(--ink)}
.item{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0;border-bottom:1px solid var(--rule)}
@media (min-width:860px){
  .item{grid-template-columns:minmax(0,200px) minmax(0,1fr) 130px;gap:28px;align-items:baseline}
}
.item__t{font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.item__p{color:var(--dim);margin:0}
.item__s{justify-self:start}
@media (min-width:860px){.item__s{justify-self:end}}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--rule-mid);padding:4px 9px;color:var(--dim);white-space:nowrap}
.tag--live{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ------------------------------------------------------------------ faq */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;
  cursor:pointer;list-style:none;font-weight:700;letter-spacing:-.015em;font-size:var(--t-h3);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--dim);font-size:18px;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__a{padding:0 0 20px;color:var(--dim);max-width:62ch}
code,.icode{font-family:var(--mono);font-size:.9em;background:var(--wash);padding:.14em .4em;color:var(--ink);border:1px solid var(--rule)}

/* ------------------------------------------------------------------ cta */
.cta{background:var(--slab);color:var(--slab-ink);padding:clamp(40px,5.4vw,80px) clamp(24px,4vw,64px)}
.cta__t{font-size:clamp(28px,4vw,52px);font-weight:900;letter-spacing:-.04em;line-height:.98;margin:16px 0 0;max-width:18ch;text-wrap:balance}
.cta__p{margin:18px 0 0;max-width:48ch;opacity:.72}
.cta__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cta .mono{color:var(--slab-ink);opacity:.6}

/* ------------------------------------------------------------------ footer */
.foot{background:var(--slab);color:var(--slab-ink);padding-top:clamp(40px,5vw,64px);overflow:hidden}
.foot .mono{color:var(--slab-ink);opacity:.55}
.foot__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px clamp(20px,3vw,44px)}
@media (min-width:880px){.foot__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot__col{border-top:1px solid rgba(128,128,128,.38);padding-top:12px}
.foot__nav{display:grid;gap:7px;margin-top:10px}
.foot__nav a{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;opacity:.85}
.foot__nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.foot__mail{font-size:clamp(18px,1.9vw,25px);font-weight:800;letter-spacing:-.025em;border-bottom:1px solid currentColor;display:inline-block;margin-top:8px}
.foot__word{font-weight:900;letter-spacing:-.05em;line-height:.78;margin:clamp(34px,4.2vw,56px) 0 0;font-size:clamp(48px,15.2vw,228px);white-space:nowrap;text-align:center}
.foot__fine{border-top:1px solid rgba(128,128,128,.38);margin-top:14px;padding:13px 0;display:flex;flex-wrap:wrap;gap:8px 26px}

/* Policy links, on every page. Consumers are entitled to find the terms they
   are agreeing to without hunting, and a link that only appears on the pages
   that already discuss the terms is no use to the person who needs it. */
.foot__policies{
  border-top:1px solid rgba(128,128,128,.38);margin-top:14px;padding:14px 0;
  display:flex;flex-wrap:wrap;gap:10px 24px;
}
.foot__policies a{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;
  text-transform:uppercase;color:var(--slab-ink);opacity:.72;
  border-bottom:1px solid transparent;
}
.foot__policies a:hover{opacity:1;border-bottom-color:currentColor}
.foot__policies+.foot__fine{border-top:0;margin-top:0}

/* Statutory identification. Spanish e-commerce law wants the registered name,
   NIF, registry entry and address reachable from every page, so it sits in the
   footer rather than on the About page alone. Quieter than the line above it
   because it is a legal requirement, not a selling point. */
.foot__legal{border-top:1px solid rgba(128,128,128,.22);padding:13px 0 26px;display:grid;gap:5px}
.foot__legal .mono{opacity:.42;line-height:1.7;letter-spacing:.09em}

/* ------------------------------------------------------------------ legal documents */
.doc{max-width:74ch}
.doc__meta{display:flex;flex-wrap:wrap;gap:6px 26px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:12px 0;margin-bottom:clamp(30px,3.4vw,44px)}
.doc__s{margin-top:clamp(34px,3.8vw,52px)}
.doc__s:first-of-type{margin-top:0}
.doc h2{font-size:clamp(21px,1.9vw,27px);font-weight:900;letter-spacing:-.025em;line-height:1.15;margin:0 0 14px;display:flex;gap:.6em}
.doc h2 span{font-family:var(--mono);font-size:.55em;letter-spacing:.1em;color:var(--dim);padding-top:.34em;flex:none}
.doc h3{font-size:var(--t-body);font-weight:800;letter-spacing:-.01em;margin:24px 0 8px}
.doc p{margin:0 0 14px;color:var(--dim)}
.doc p strong,.doc li strong{color:var(--ink);font-weight:700}
.doc ol,.doc ul{margin:0 0 14px;padding-left:22px;color:var(--dim)}
.doc li{margin-bottom:8px}
.doc a{color:var(--ink);border-bottom:1px solid var(--rule-mid)}
.doc a:hover{border-bottom-color:var(--ink)}
.doc .rows{margin:18px 0 22px}
.doc__note{border-left:2px solid var(--ink);padding:2px 0 2px 16px;margin:18px 0 22px}
.doc__note p{color:var(--ink);margin-bottom:0}

/* Anything still needing a decision before this is published. Loud on purpose:
   an unresolved placeholder must not survive a copy-paste into production. */
.todo{background:var(--ink);color:var(--paper);padding:.1em .45em;font-family:var(--mono);font-size:.82em;letter-spacing:.06em}

.legal-idx{border-top:1px solid var(--ink)}
.legal-idx a{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0;border-bottom:1px solid var(--rule);transition:padding-left .2s}
@media (min-width:820px){.legal-idx a{grid-template-columns:minmax(0,260px) minmax(0,1fr) 22px;gap:26px;align-items:baseline}}
.legal-idx a:hover{padding-left:9px}
.legal-idx__t{font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em}
.legal-idx__d{color:var(--dim)}
.legal-idx__x{justify-self:end;color:var(--dim);display:none}
@media (min-width:820px){.legal-idx__x{display:block}}

/* ------------------------------------------------------------------ reveal */
.rv{opacity:0;transform:translateY(12px)}
.rv--in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}