/* garden look, on top of base.css: warm paper, leaf greens, petal orange (from the mascot), hills, flower beds */
:root{
  --bg:#f5f2e6; --paper:#fffdf7; --ink:#1d2b20; --ink-2:#4f5c4f; --ink-3:#8a9180; --line:#e6e0cc; --forest:#20402b;
  --green:#3a8f55; --green-ink:#2b6b3f; --green-soft:#e3efd8; --orange:#ee8657; --orange-soft:#fde7d9;
  --gold:#f0bf47; --gold-soft:#fbf1cf; --sky:#d9eef0; --soil:#7a5a40;
  --shadow:0 1px 0 rgba(60,70,40,.05),0 14px 34px -18px rgba(45,60,35,.28);
  --shadow-lg:0 2px 0 rgba(60,70,40,.05),0 30px 60px -24px rgba(45,60,35,.34);
}
/* a faint scatter of leaves across the whole page */
body{background:var(--bg) url("/assets/leaf-tile.svg") repeat;background-size:240px}
.card{border:1px solid var(--line)}
.in{background:#f3f0e3}
.in::placeholder{color:#a4a893}
.drop{border-color:#d4cfb5}
.drop:hover,.drop.drag{background:#f6f8ee}
.cmp th:last-child,.cmp td:last-child{background:#f4f8ec}
.btn.pri{box-shadow:0 8px 20px -8px rgba(58,143,85,.6)}
.chip.on,.steps span.on{background:var(--forest)}
details{border:1px solid var(--line)}
.qrtoggle{border:0}

/* nav, with a little vine along its bottom edge */
nav{background:rgba(245,242,230,.9);border-bottom:0}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;background:url("/assets/vine.svg") repeat-x;background-size:160px 14px;pointer-events:none}
.links a.on{background:var(--green-soft);color:var(--green-ink)}
.links a{color:var(--ink-2)}

/* leaf bullets, sprout before section headings */
.facts span::before{width:10px;height:10px;border-radius:0 85% 0 85%;background:var(--green);transform:rotate(-8deg);vertical-align:0}
.sh h2::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.25em;vertical-align:-.08em;background:url("/assets/sprout.svg") no-repeat center/contain}

/* sky: sun, clouds, butterfly */
.sky{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky .sun{position:absolute;right:9%;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0 32%,rgba(255,233,160,.55) 33% 48%,rgba(255,233,160,0) 70%)}
.sky .cloud{position:absolute;width:150px;height:58px;background:url("/assets/cloud.svg") no-repeat center/contain;opacity:.9;animation:drift 60s linear infinite}
.sky .c1{top:22px;left:-160px}
.sky .c2{top:70px;left:-160px;width:110px;height:42px;opacity:.75;animation-duration:85s;animation-delay:-40s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 340px))}}
.sky .bfly{position:absolute;left:34%;top:9%;width:36px;animation:flutter 14s ease-in-out infinite}
.sky .bfly img{width:100%;display:block;animation:flap .35s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes flap{to{transform:scaleX(.72)}}
@keyframes flutter{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(80px,-30px) rotate(8deg)}50%{transform:translate(150px,10px) rotate(-4deg)}75%{transform:translate(60px,34px) rotate(6deg)}100%{transform:translate(0,0) rotate(-6deg)}}
.hero,.phead .wrap{position:relative;z-index:2}

/* home hero: sky into rolling hills and a flower bed */
.herobg{position:relative;overflow:hidden;background:linear-gradient(180deg,#d6ecef 0%,#e6f1e4 50%,#f2efd9 100%);box-shadow:none;border:1px solid var(--line);padding-bottom:104px}
.herobg .hills,.phead .hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:120px;display:block;z-index:1}
.herobg .flowers,.phead .flowers{position:absolute;left:0;right:0;bottom:30px;height:0;z-index:2}

/* flowers: orange (default), y = yellow, t = tulip, d = daisy, g = grass; s / l = small / large */
.flowers i{position:absolute;bottom:0;width:34px;height:58px;margin-left:-17px;background:url("/assets/flower-orange.svg") no-repeat bottom/contain;transform-origin:50% 100%;animation:sway 5s var(--ease) infinite}
.flowers i.y{background-image:url("/assets/flower-gold.svg")}
.flowers i.t{background-image:url("/assets/tulip.svg");height:64px}
.flowers i.d{background-image:url("/assets/daisy.svg")}
.flowers i.g{background-image:url("/assets/tuft.svg");width:52px;height:28px;margin-left:-26px;animation-duration:7s}
.flowers i.s{width:24px;height:40px;margin-left:-12px}
.flowers i.l{width:44px;height:76px;margin-left:-22px}
.flowers i:nth-child(2n){animation-delay:-1.6s;animation-duration:6s}
.flowers i:nth-child(3n){animation-delay:-3.1s}
@keyframes sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}

/* page header on the inner pages */
.phead{position:relative;overflow:hidden;margin:22px auto 0;max-width:1160px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,#d6ecef 0%,#e6f1e4 55%,#f2efd9 100%);padding:42px 0 128px}
@media(max-width:1180px){.phead{margin:16px 16px 0}}
.phead .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.phead h1{font-size:clamp(34px,4.6vw,52px)}
.phead p{color:var(--ink-2);font-size:17px;margin-top:10px;max-width:560px}
.phead .mascot{width:120px;flex:none;margin-bottom:-74px;transform-origin:50% 100%;animation:peek 6s var(--ease) infinite}
@media(max-width:640px){.phead .mascot{width:76px;margin-bottom:-56px}.phead{padding:28px 0 112px}}

/* leafy sprigs on the corners of the main cards */
.launch,.mine,.recent,.faq{position:relative}
.launch::before,.mine::before,.recent::before{content:"";position:absolute;left:-26px;top:-30px;width:92px;height:70px;background:url("/assets/sprig.svg") no-repeat center/contain;z-index:3;pointer-events:none;transform:rotate(-8deg)}
.faq::after,.recent::after{content:"";position:absolute;right:-22px;bottom:-26px;width:80px;height:60px;background:url("/assets/sprig.svg") no-repeat center/contain;z-index:3;pointer-events:none;transform:scaleX(-1) rotate(-10deg)}
@media(max-width:640px){.launch::before,.mine::before,.recent::before{left:-8px;top:-24px;width:64px;height:48px}.faq::after,.recent::after{display:none}}

/* how it works: seed, sprout, bloom */
.how .card{padding:26px 24px;background:linear-gradient(180deg,var(--paper) 70%,#f6f3e4 100%)}
.how .art{width:84px;height:84px;display:block}
.how .n{display:inline-grid;width:auto;height:auto;padding:3px 10px;border-radius:999px;font-size:12.5px;margin-top:10px}
.how h3{margin-top:8px}

/* where you can pay from */
.from{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.from span{padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:700;font-size:13.5px;color:var(--ink-2)}
.from span.any{background:var(--green-soft);border-color:transparent;color:var(--green-ink)}

/* closing call to action: a little garden bed of its own */
.ctaband{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 32px 46px;border-radius:26px;background:var(--forest);color:#f3efe0}
.ctaband h2{font-size:clamp(26px,3.4vw,36px)}
.ctaband h2::before{display:none}
.ctaband p{color:#c9d3bf;margin-top:6px}
.ctaband .btn.pri{background:var(--gold);color:var(--forest);box-shadow:none}
.ctaband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:url("/assets/tuft.svg") repeat-x bottom;background-size:52px 28px;opacity:.55}

/* footer: the garden bed */
footer{position:relative;margin-top:120px;padding:0;background:var(--forest);color:#bfcab5}
footer .hills{position:absolute;left:0;right:0;top:-88px;width:100%;height:90px;display:block}
footer .flowers{position:absolute;left:0;right:0;top:-46px;height:0}
footer .wrap{border-top:0;padding:46px 20px 46px}
footer a{color:#f3efe0}
footer .logo span{color:#f3efe0}
footer .flinks{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
footer .flinks a{font-weight:700;font-size:14px}

/* sections a little tighter on inner pages */
.inner section{padding-top:34px}
.lead-note{color:var(--ink-2);margin:6px 0 0}

/* phones: the page links sit on their own row under the logo instead of disappearing */
@media(max-width:860px){
  nav .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;row-gap:6px}
  nav .links{display:flex;order:3;width:100%;margin:0 -4px;overflow-x:auto;scrollbar-width:none}
  nav .links a{padding:7px 12px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.sky .cloud,.sky .bfly{display:none}}
@media(max-width:640px){.sky .sun{width:140px;height:140px;right:-30px;top:-50px}.sky .c2{display:none}}
.liveca{margin:16px auto 0;max-width:560px;text-align:left}
.costbox{margin:6px 0 4px;padding:14px 16px;border-radius:16px;background:var(--gold-soft);border:1px solid #f3e2a8}
.costline{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2);padding:2px 0}
.costline b{color:var(--ink);white-space:nowrap}
.costline.total{border-top:1px solid #ecd994;margin-top:6px;padding-top:8px;font-weight:700;color:var(--ink);font-size:15.5px}
.costline.total b{font-family:var(--f-display);font-size:20px}
.costbox .note{margin-top:8px}
.costbox .unpair{margin-top:10px}
.sellsteps{list-style:none;counter-reset:st;display:grid;gap:10px;margin:0}
.sellsteps li{counter-increment:st;display:flex;align-items:center;gap:14px;background:var(--bg);border-radius:16px;padding:14px 16px}
.sellsteps li::before{content:counter(st);flex:none;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--f-display);font-weight:700;display:grid;place-items:center}
.sellsteps li b{display:block;font-size:15px}
.sellsteps li small{display:block;color:var(--ink-2);font-size:13.5px;margin-top:3px}
.sellsteps .addr{margin:6px 0 0;padding:0;background:none;font-size:13.5px;color:var(--ink)}
.sellsteps .linkbtn{font-size:13px}
#sPayBox .phoneonly{margin-top:12px}
#sPayBox .qrtoggle{margin-top:10px}
.sellinfo p b{display:inline;font-size:inherit;margin:0}
.sellhow{margin:18px auto 0;max-width:560px;text-align:left;background:var(--green-soft);border-radius:18px;padding:16px 18px}
.sellhow>b{font-size:15.5px;color:var(--green-ink)}
.sellhow p{color:var(--ink-2);font-size:14px;margin:4px 0 8px}
.howsell{margin:0 0 0 20px;display:grid;gap:6px;color:var(--ink-2);font-size:14px}
.howsell b{color:var(--ink)}
.where{margin-top:10px;background:var(--bg);border-radius:14px;padding:12px 14px;display:grid;gap:8px;font-size:13.5px;color:var(--ink-2)}
.where>b{color:var(--ink);font-size:14px}
.where .tag{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--green-soft);color:var(--green-ink);font-weight:800;font-size:12px;margin-right:6px}
/* coin page */
.coinhead{display:flex;align-items:center;gap:18px}
.coinhead .cimg{width:84px;height:84px;border-radius:22px;overflow:hidden;flex:none;background:var(--green-soft);border:3px solid #fff;box-shadow:var(--shadow)}
.coinhead .cimg img{width:100%;height:100%;object-fit:cover}
.coinhead p{margin-top:6px}
.coingrid{display:grid;grid-template-columns:1.4fr .9fr;gap:18px;align-items:start;position:relative}
.coingrid::before{content:"";position:absolute;left:-26px;top:-30px;width:92px;height:70px;background:url("/assets/sprig.svg") no-repeat center/contain;z-index:3;pointer-events:none;transform:rotate(-8deg)}
@media(max-width:920px){.coingrid{grid-template-columns:1fr}}
.coinmain,.coinsell{padding:22px}
.calinks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chartbox{margin-top:14px}
.chartbox iframe{width:100%;height:420px;border:0;border-radius:16px;background:#fff}
.chartbox small{display:block;color:var(--ink-3);font-size:12px;margin-top:6px}
.nochart{padding:40px 16px;text-align:center;color:var(--ink-3);background:var(--bg);border-radius:16px}
.cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.cstats>div{background:var(--bg);border-radius:14px;padding:10px 12px}
.cstats small{display:block;color:var(--ink-3);font-weight:700;font-size:12px}
.cstats b{font-size:15px}
.coinsell h2{font-size:26px;margin-bottom:8px}
.coinsell h2::before{display:none}
.sellbtns{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 8px}
.sellstatus{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;padding:12px 14px;border-radius:14px;background:var(--green-soft);color:var(--green-ink);margin-top:10px}
.selltip{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}