/* ══════════════════════════════════════════════════════════════════
   APIARY landing (templates/apiary): the bee-farm theme for the owner's new
   website, built from the approved mockup (mockup/landing-yupis-honey, gitignored)
   after the owner's reference honey template. Members fund hives; every harvest
   is shared. All light: cream, honey and ink, no dark sections.

   Colour literals live in :root only. Loaded by layouts/landing alone (home,
   policy pages). The sign-in and member layouts build on css/landing.css, the
   yupis base this theme was copied from, which is kept as it was for them.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --bg: #FFFDF8;
    --cream: #FFF6E8;
    --foot: #FDEEDB;
    --surface: #FFFFFF;
    --hd-bg: rgba(255, 253, 248, .92);
    --ink: #1F1A14;
    --text: #55504A;
    --muted: #6B665F;
    --line: #F1E6D6;
    --line-2: #E9D6BA;
    --orange: #F7931E;
    --orange-head: #E06C00;
    --orange-ink: #A84F00;
    --green: #17803F;
    --red: #B42318;
    --white: #FFFFFF;
    --white-90: rgba(255, 255, 255, .92);
    --white-16: rgba(255, 255, 255, .16);
    --btn: linear-gradient(180deg, #DB6A0E, #A23F06);
    --btn-ink: #1F1A14;
    --btn-sh: 0 12px 22px -12px rgba(176, 72, 6, .75), inset 0 1px 0 rgba(255, 220, 160, .45);
    --panel: linear-gradient(140deg, #F49A2A 0%, #DB680C 48%, #B44B05 100%);
    --pc-hd: linear-gradient(180deg, #FFF2D9, #FFD98C);
    --pc-drip: #FFD98C;
    --pc-hd-top: linear-gradient(180deg, #C85A0A, #9E3F05);
    --pc-drip-top: #9E3F05;
    --cell-on: linear-gradient(160deg, #FFC94A, #E8830E);
    --cell-off: #F4E2C2;
    --coin-disc: #F4E2C2;
    --text-sh: 0 1px 1px rgba(110, 40, 0, .35);
    --glow: rgba(255, 176, 66, .3);
    --glow-2: rgba(255, 196, 110, .22);
    --trail: #D9954A;
    --scrim: rgba(31, 26, 20, .4);
    --shadow-sm: 0 8px 22px -16px rgba(120, 70, 10, .35);
    --shadow: 0 22px 46px -26px rgba(120, 70, 10, .4);
    --shadow-lg: 0 30px 60px -28px rgba(120, 60, 10, .5);
    --art-sh: drop-shadow(0 26px 30px rgba(160, 90, 10, .22));
    --coins-sh: drop-shadow(0 18px 18px rgba(90, 30, 0, .35));
    --hex-sh: drop-shadow(0 8px 10px rgba(224, 106, 6, .22));
    /* Fredoka has no Cyrillic and no Chinese: Nunito draws Russian, the system's CJK face draws Chinese */
    --font-h: Fredoka, Nunito, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font: Nunito, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font-brand: Righteous, Fredoka, Nunito, sans-serif;
    --hd-h: 84px;
    --side: max(24px, calc(50vw - 600px));

    /* the names telegram.css and toast.css read */
    --brand: var(--orange-ink);
    --on-brand: var(--white);
    --brand-wash: rgba(247, 147, 30, .14);
    --down: var(--red);
    --t3: var(--muted);
    --hairline: var(--line);
    --sans: var(--font);
    --sh-2: 0 20px 44px -14px rgba(31, 26, 20, .28);
    color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hd-h); }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 600 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--font-h); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; }
h1 em, h2 em { color: var(--orange-head); font-style: normal; }
/* Russian titles are drawn by Nunito, which reads lighter than Fredoka at the same weight */
:lang(ru) :is(h1, h2, h3, .pc-rate b, .hero-stats dd, .stats-grid dd, .cb-big, .farm-date, .farm-days b) { font-weight: 800; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--orange-head); outline-offset: 3px; border-radius: 8px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.sec { position: relative; padding: 96px 0; }
.up { color: var(--green); }
.small { font-size: 13.5px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.caps { font-size: clamp(32px, 3.4vw, 46px); line-height: 1; text-transform: uppercase; }
.caps em { color: var(--orange-head); font-style: normal; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--btn); color: var(--white); font: 800 15px/1 var(--font); text-decoration: none; text-shadow: var(--text-sh); white-space: nowrap; box-shadow: var(--btn-sh); cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.btn:hover { color: var(--white); transform: translateY(-2px); filter: brightness(1.06); }
.btn-line { background: var(--surface); color: var(--ink); text-shadow: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-line:hover { color: var(--ink); }
.btn-ink { background: var(--btn-ink); text-shadow: none; box-shadow: var(--shadow); }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 16px; }
.btn-block { width: 100%; }

/* the renders keep their shape while they load (their width is set below, their height follows) */
.art-bee, .trail-bee, .pc-bee, .farm-bee, .adv-bee, .col-bee, .cta-bee { aspect-ratio: 400 / 350; }
.col-hive, .faq-hive { aspect-ratio: 515 / 520; }
.farm-stacks { aspect-ratio: 560 / 361; }
.adv-dipper { aspect-ratio: 160 / 540; }
.ft-hills { aspect-ratio: 2000 / 667; }

/* the dashed flight of a bee */
.trail { position: absolute; fill: none; stroke: var(--trail); stroke-width: 2.2; stroke-dasharray: 1 9; stroke-linecap: round; pointer-events: none; }
.trail path { vector-effect: non-scaling-stroke; }

/* a comb tile with a line icon on it */
.hexi { position: relative; display: grid; flex: none; place-items: center; width: 58px; height: 66px; }
.hexi .hexic { position: absolute; inset: 0; width: 100%; height: 100%; filter: var(--hex-sh); }
.hexi .ic { position: relative; width: 24px; height: 24px; color: var(--orange-ink); stroke-width: 2; }
.hexi-lg { width: 84px; height: 96px; }
.hexi-lg .ic { width: 34px; height: 34px; }
.hexi i { position: absolute; top: -4px; right: -8px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--bg); border-radius: 50%; background: var(--ink); color: var(--white); font: 600 13px var(--font-h); font-style: normal; }

/* ───────────── header and menu */
.hd { position: sticky; top: 0; z-index: 40; transition: background-color .25s, box-shadow .25s; }
.hd.stuck, body:not(.has-hero) .hd { background: var(--hd-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
.hd-in { display: flex; align-items: center; gap: 48px; height: var(--hd-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font: 400 27px/1 var(--font-brand); letter-spacing: .04em; text-decoration: none; }
.brand-mark { flex: none; width: 40px; height: 40px; }
.nav-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 800 15px var(--font); cursor: pointer; }
.nav-btn:hover { background: var(--cream); }
.auth { display: flex; margin-left: auto; padding: 3px; border: 1.5px solid var(--orange); border-radius: 999px; background: var(--white-90); }
.auth a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.auth a.on { background: var(--btn); color: var(--white); text-shadow: var(--text-sh); }

.nav-pop { position: fixed; inset: calc(var(--hd-h) - 6px) auto auto calc(var(--side) + 150px); width: 300px; max-height: calc(100dvh - var(--hd-h) - 16px); margin: 0; padding: 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.nav-pop:popover-open { display: grid; align-content: start; gap: 2px; animation: popIn .2s ease; }
.nav-pop::backdrop { background: transparent; }
.nav-link { padding: 11px 14px; border-radius: 12px; font-size: 16px; font-weight: 800; text-decoration: none; }
.nav-link:hover { background: var(--cream); }
.nav-pop-hd { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 14px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-pop-hd button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--cream); color: var(--ink); cursor: pointer; }
.nav-langs { display: grid; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-langs p { margin: 0 0 4px 14px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lang-link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border-radius: 12px; color: var(--text); font-weight: 700; text-decoration: none; }
.lang-link:hover { background: var(--cream); }
.lang-link[aria-current] { color: var(--ink); font-weight: 800; }
.lang-link[aria-current]::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--orange); }
.lang-link .flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.nav-pop-auth { display: none; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.nav-pop-auth .btn:only-child { grid-column: 1 / -1; }
@keyframes popIn { from { opacity: 0; translate: 0 -8px; } }

.select, .money { position: relative; display: flex; align-items: center; }
.select select, .money input { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink); font: 800 16px var(--font); appearance: none; transition: border-color .2s, box-shadow .2s; }
.select select { padding-right: 42px; cursor: pointer; }
.select select:focus, .money input:focus { border-color: var(--orange-head); outline: none; box-shadow: 0 0 0 4px var(--glow); }
.select .ic { position: absolute; right: 14px; pointer-events: none; }
.money i { position: absolute; left: 16px; color: var(--muted); font-style: normal; font-weight: 800; }
.money input { padding-left: 32px; }

/* ───────────── hero */
.hero { position: relative; margin-top: calc(var(--hd-h) * -1); padding: calc(var(--hd-h) + 56px) 0 110px; overflow: clip;
    background: radial-gradient(900px 620px at 84% 26%, var(--glow), transparent 66%), radial-gradient(560px 420px at 0% 100%, var(--glow-2), transparent 70%); }
/* the comb render, half off the page's top-right corner as in the reference */
.hero-corner { position: absolute; top: -110px; right: -170px; width: min(600px, 46vw); rotate: -14deg; pointer-events: none; }
/* the social links (Admin > Social Icon) as round buttons down the right edge */
.social { position: absolute; top: calc(var(--hd-h) + 36px); right: 28px; z-index: 2; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); transition: color .2s, border-color .2s; }
.social a:hover { border-color: var(--orange); color: var(--orange-ink); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto auto 1fr; grid-template-areas: ". art" "pre art" "h1 art" "lede art" "cta art" "stats art" ". art"; column-gap: 32px; min-height: 600px; }
.hero-pre { grid-area: pre; margin: 0 0 18px; color: var(--text); font-size: 15px; font-weight: 700; }
.hero h1 { grid-area: h1; max-width: 11em; font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -.015em; }
.hero-lede { grid-area: lede; max-width: 500px; margin: 22px 0 0; font-size: 18px; }
.hero-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 800; text-decoration: none; }
.more .ic { color: var(--orange-ink); transition: translate .2s; }
.more:hover .ic { translate: 4px 0; }
.hero-stats { grid-area: stats; display: flex; margin: 44px 0 0; }
.hero-stats div { display: flex; flex-direction: column-reverse; padding: 0 30px; border-left: 1.5px solid var(--line-2); }
.hero-stats div:first-child { padding-left: 0; border: 0; }
.hero-stats dd { margin: 0; color: var(--orange-head); font: 600 36px/1.1 var(--font-h); }
.hero-stats dt { color: var(--ink); font-size: 14px; font-weight: 700; }
.hero-art { grid-area: art; position: relative; align-self: center; justify-self: end; width: 100%; max-width: 600px; aspect-ratio: 1000 / 969; }
.art-main { position: absolute; inset: 0; width: 100%; height: 100%; filter: var(--art-sh); }
.art-bee { position: absolute; top: 44%; left: -10%; width: 18%; animation: buzz 3.4s ease-in-out infinite; }
.trail-hero { top: 44%; left: -60px; width: 170px; }
.trail-bee { position: absolute; top: 40%; left: 1.5%; width: 56px; animation: buzz 3s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -14px; } }
@keyframes buzz { 0%, 100% { translate: 0 0; rotate: -5deg; } 50% { translate: 10px -14px; rotate: 3deg; } }

/* ───────────── hives (plans): a honey header with drips, the harvest schedule as comb
   cells, what $100 brings back, then the terms. Stacked on phones, never a sideways row. */
.hives-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.hives-head .note { max-width: 440px; margin: 16px 0 0; font-size: 15.5px; }
.arrows { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.arrows li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; }
.arrows .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--orange-head); stroke-width: 2.4; }
.hive-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; align-items: stretch; max-width: calc(var(--n, 3) * 400px); margin-inline: auto; }
.pc { --hd: var(--pc-hd); --drip: var(--pc-drip); --hd-ink: var(--ink); --hd-sub: var(--text); position: relative; display: flex; flex-direction: column; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.pc:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pc-hd { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 26px 24px 18px; border-radius: 26px 26px 0 0; background: var(--hd); color: var(--hd-ink); }
.pc-hd::after { content: ""; position: absolute; top: calc(100% - 1px); left: 0; right: 0; height: 30px; background: var(--drip); -webkit-mask: url(../images/apiary/drip-edge.svg) 0 0 / 220px 30px repeat-x; mask: url(../images/apiary/drip-edge.svg) 0 0 / 220px 30px repeat-x; }
.pc-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pc-ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--white-90); color: var(--orange-ink); box-shadow: var(--shadow-sm); }
.pc-id h3 { color: var(--hd-ink); font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
.pc-id p { margin: 3px 0 0; color: var(--hd-sub); font-size: 13px; font-weight: 800; line-height: 1.3; }
.pc-rate { display: grid; flex: none; justify-items: end; margin: 0; text-align: right; }
.pc-rate b { color: var(--hd-ink); font: 600 46px/1 var(--font-h); letter-spacing: -.02em; white-space: nowrap; }
.pc-rate i { margin-left: 1px; font-size: 24px; font-style: normal; }
.pc-rate span { margin-top: 3px; color: var(--hd-sub); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.pc-body { display: flex; flex: 1; flex-direction: column; gap: 18px; padding: 46px 24px 24px; }
.pc-k { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pc-k b { color: var(--orange-ink); font-size: 13.5px; letter-spacing: 0; text-transform: none; }
/* one comb cell per day of the term: all filled for a hive paid as it goes, only the last for one paid at the end */
/* one row whatever the count: the cells give up width before they wrap */
.pc-cells { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pc-cells li { flex: 0 1 22px; min-width: 8px; aspect-ratio: 200 / 230; background: var(--cell-off); -webkit-mask: url(../images/apiary/hex-mask.svg) center / contain no-repeat; mask: url(../images/apiary/hex-mask.svg) center / contain no-repeat; }
.pc-cells li.on { background: var(--cell-on); }
.pc-cells li.more { flex: none; aspect-ratio: auto; margin-left: 4px; background: none; color: var(--muted); font-size: 13px; font-weight: 800; -webkit-mask: none; mask: none; }
.js .pc .pc-cells li.on { opacity: 0; scale: .3; transition: scale .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s ease; transition-delay: calc(350ms + var(--i, 0) * 70ms); }
.js .pc.in .pc-cells li.on { opacity: 1; scale: 1; }
.pc-ret { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--cream); }
.pc-ret div { display: grid; }
.pc-ret div:last-child { text-align: right; }
.pc-ret span { color: var(--muted); font-size: 12px; font-weight: 800; }
.pc-ret b { color: var(--ink); font: 600 23px/1.2 var(--font-h); }
.pc-ret div:last-child b { color: var(--orange-ink); }
.pc-ret .ic { color: var(--orange-head); }
.pc-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.pc-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 14px; }
.pc-rows li:last-child { border-bottom: 0; }
.pc-rows span { color: var(--muted); }
.pc-rows b { color: var(--ink); font-weight: 800; text-align: right; }
.pc .btn { margin-top: auto; }
.pc .btn .ic { transition: translate .2s; }
.pc .btn:hover .ic { translate: 4px 0; }
.pc-top { --hd: var(--pc-hd-top); --drip: var(--pc-drip-top); --hd-ink: var(--white); --hd-sub: var(--white); box-shadow: 0 0 0 2px var(--orange), var(--shadow-lg); }
.pc-top .pc-id, .pc-top .pc-rate { text-shadow: var(--text-sh); }
.pc-flag { position: absolute; top: -13px; left: 24px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pc-bee { position: absolute; top: -38px; right: -16px; z-index: 2; width: 76px; animation: buzz 3.4s ease-in-out infinite; }
.hives-foot { display: flex; justify-content: center; margin-top: 30px; }
.trail-hives { bottom: -60px; left: 3%; width: 260px; }

/* ───────────── about the farm */
.farm-grid { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 64px; align-items: center; padding-right: var(--side); }
.farm-panel { position: relative; min-height: 460px; padding: 48px 48px 48px var(--side); border-radius: 0 32px 32px 0; background: var(--panel); color: var(--white); overflow: hidden; box-shadow: var(--shadow); }
.farm-panel::before { content: ""; position: absolute; inset: 0; background: url(../images/apiary/hex-tile.svg) 0 0 / 50px auto; opacity: .22; -webkit-mask-image: linear-gradient(to left, #000, transparent 80%); mask-image: linear-gradient(to left, #000, transparent 80%); }
.farm-panel > * { position: relative; }
.farm-cap { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.farm-date { margin: 4px 0 0; font: 600 32px/1.1 var(--font-h); text-shadow: var(--text-sh); }
.farm-days { display: flex; align-items: flex-end; gap: 14px; margin: 26px 0 28px; }
.farm-days b { font: 600 124px/.82 var(--font-h); text-shadow: var(--text-sh); }
.farm-days span { max-width: 6em; font-size: 18px; font-weight: 800; line-height: 1.2; text-shadow: var(--text-sh); }
.farm-facts { display: grid; gap: 10px; max-width: 260px; margin: 0; padding: 0; list-style: none; }
.farm-facts li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--white-90); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.farm-facts .ic { color: var(--orange-ink); }
.farm-stacks { position: absolute; right: 12px; bottom: 12px; width: 215px; filter: var(--coins-sh); }
.farm-bee { position: absolute; top: 30px; right: 40px; width: 104px; animation: buzz 3.6s ease-in-out infinite; }
.farm-copy .lead { max-width: 560px; margin: 18px 0 0; color: var(--ink); font-size: 17px; }
.farm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; margin: 30px 0 32px; }
.farm-cols h3 { margin: 0 0 6px; font-size: 17px; }
.farm-cols p, .farm-more { margin: 0; color: var(--muted); font-size: 14.5px; }
.farm-more { margin-bottom: 24px; }

/* ───────────── advantages */
.adv { overflow: clip; }
.adv-comb { position: absolute; top: 40px; bottom: 40px; left: 0; width: 380px; background: url(../images/apiary/hex-tile.svg) 0 0 / 66px auto; opacity: .6; -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent); mask-image: linear-gradient(90deg, #000 25%, transparent); }
.adv-dipper { position: absolute; top: 34%; left: 14px; width: 96px; rotate: 30deg; filter: var(--art-sh); }
.adv-bee { position: absolute; top: 18%; right: 9%; width: 76px; animation: buzz 3.2s ease-in-out infinite; }
.trail-adv { top: 4%; right: 3%; width: 190px; }
.adv-head { margin: 0 auto 56px; text-align: center; }
.adv-head p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.adv-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 48px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.adv-grid h3 { margin: 16px 0 8px; color: var(--orange-ink); font-size: 18px; }
.adv-grid p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ───────────── statistics */
.stats { padding: 10px 0 90px; }
.stats-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; padding: 44px 0; border-block: 1.5px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
.stats-grid div { display: flex; flex-direction: column-reverse; }
.stats-grid dd { display: inline-flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ink); font: 600 clamp(30px, 3vw, 44px)/1 var(--font-h); white-space: nowrap; }
.stats-grid .badge { flex: none; width: 26px; height: 26px; margin-top: -10px; padding: 5px; border-radius: 8px; background: var(--btn); fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stats-grid dt { margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }

/* ───────────── harvest calculator */
.calc-sec { position: relative; padding: 96px 0; overflow: clip; background: radial-gradient(500px 300px at 50% 100%, var(--glow), transparent 70%), var(--cream); }
.calc-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 270px minmax(0, 1fr); gap: 48px; align-items: start; }
.calc-copy .lead { margin: 18px 0 0; color: var(--ink); font-size: 16.5px; }
.calc-copy .note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.calc-box { position: relative; padding: 30px 24px 24px; border-radius: 20px; background: var(--panel); color: var(--white); text-align: center; box-shadow: var(--shadow); }
.cb-k { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cb-big { margin: 6px 0 20px; font: 600 42px/1 var(--font-h); text-shadow: var(--text-sh); overflow-wrap: anywhere; }
.calc-box dl { display: grid; gap: 10px; margin: 0; }
.calc-box dl div { padding: 10px 12px; border-radius: 12px; background: var(--white-16); }
.calc-box dt { font-size: 12.5px; font-weight: 800; }
.calc-box dd { margin: 2px 0 0; font: 600 21px var(--font-h); text-shadow: var(--text-sh); overflow-wrap: anywhere; }
.cb-note { margin: 14px 0 0; font-size: 13px; font-weight: 700; line-height: 1.45; }
.cb-note:empty { display: none; }
.calc-form { display: grid; gap: 16px; padding-top: 6px; }
.field { display: grid; gap: 8px; }
.field > span:first-child { color: var(--ink); font-size: 14px; font-weight: 800; }
.calc-hint { margin: -4px 0 0; color: var(--orange-ink); font-size: 14px; font-weight: 800; }
.calc-hint:empty { display: none; }
/* the gold coin rests on the result card's corner, as the reference's big coin does */
.calc-coin { position: absolute; top: -34px; right: -38px; width: 84px; animation: float 6s ease-in-out infinite; filter: var(--art-sh); }

/* ───────────── referral: grow the colony */
.colony-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, .85fr); gap: 44px; align-items: center; }
.colony-art { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; container-type: inline-size; }
.cells { margin: 0; padding: 0; list-style: none; }
.cell { position: absolute; display: grid; place-content: center; width: 32%; aspect-ratio: 200 / 230; padding: 0 6%; background: var(--panel); color: var(--white); text-align: center; -webkit-mask: url(../images/apiary/hex-mask.svg) center / contain no-repeat; mask: url(../images/apiary/hex-mask.svg) center / contain no-repeat; }
.cell b { font: 600 max(22px, 7.6cqw)/1 var(--font-h); text-shadow: var(--text-sh); }
.cell span { margin-top: 4px; font-size: max(10px, 2.5cqw); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cell small { font-size: max(9px, 2cqw); font-weight: 800; line-height: 1.2; }
.col-hive { position: absolute; bottom: 0; left: -4%; z-index: 1; width: 46%; filter: var(--art-sh); }
.col-bee { position: absolute; top: 4%; left: 14%; z-index: 1; width: 18%; animation: buzz 3.2s ease-in-out infinite; }
.colony-copy p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.colony-copy .ask-more { margin-top: 22px; color: var(--ink); font-size: 16px; font-weight: 800; font-style: italic; }
.colony-copy .btn { margin-top: 8px; }
.colony-head .caps-sub { margin: 4px 0 0; color: var(--ink); font-family: var(--font-h); font-weight: 600; }
.colony-head .small { margin: 18px 0 0; color: var(--muted); }

/* ───────────── steps */
.center-head { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.center-head p { margin: 12px 0 0; color: var(--muted); }
.steps-wrap { position: relative; }
.steps-line { position: absolute; top: 0; left: 0; width: 100%; height: 110px; fill: none; stroke: var(--trail); stroke-width: 2.2; stroke-dasharray: 1 9; stroke-linecap: round; }
.steps-line path { vector-effect: non-scaling-stroke; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; text-align: center; }
.steps li:nth-child(even) { margin-top: 40px; }
.steps .hexi { margin: 0 auto 18px; }
.steps h3 { margin: 0 0 8px; font-size: 19px; }
.steps p { max-width: 230px; margin: 0 auto; color: var(--muted); font-size: 14.5px; }

/* ───────────── latest activity */
.tx2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tx { padding: 24px 24px 10px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.tx h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 19px; }
.tx-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cream); color: var(--orange-ink); }
.tx ul { margin: 0; padding: 0; list-style: none; }
.tx li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); font-size: 15px; }
.tx li.none { display: block; color: var(--muted); }
.tx .who { color: var(--ink); font-weight: 800; white-space: nowrap; }
.tx .who i { color: var(--muted); font-style: normal; letter-spacing: -.1em; }
.tx .cn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tx .cn img { flex: none; width: 22px; height: 22px; }
.tx b { color: var(--ink); font: 600 16px var(--font-h); text-align: right; white-space: nowrap; }
.tx b.up { color: var(--green); }
.tx time { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
/* a coin with no gateway picture: its first letter on a disc */
.ci { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--coin-disc); color: var(--orange-ink); font: 800 11px var(--font); font-style: normal; }

/* ───────────── faq */
.faq-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-head { position: sticky; top: calc(var(--hd-h) + 20px); }
.faq-head p { margin: 14px 0 0; color: var(--muted); }
.faq-head .row-btns { margin-top: 22px; }
.faq-hive { width: 170px; margin-top: 30px; filter: var(--art-sh); }
.qa { display: grid; gap: 12px; }
.qa details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .25s; }
.qa details[open] { border-color: var(--orange); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 12px 16px 12px 22px; color: var(--ink); font: 600 17px/1.35 var(--font-h); list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa-x { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); color: var(--orange-ink); transition: background-color .25s, color .25s; }
.qa-x .ic { transition: rotate .25s ease; }
.qa details[open] .qa-x { background: var(--btn); color: var(--white); }
.qa details[open] .qa-x .ic { rotate: 45deg; }
.qa details p { margin: 0; padding: 0 22px 20px; color: var(--text); font-size: 15px; }

/* ───────────── closing banner (when the page builder places one) */
.cta-sec { padding: 24px 0 72px; }
.cta { position: relative; display: grid; justify-items: start; gap: 14px; padding: 56px; border-radius: 32px; background: var(--panel); color: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.cta h2 { max-width: 560px; color: var(--white); text-shadow: var(--text-sh); }
.cta p { max-width: 520px; margin: 0; font-size: 17px; text-shadow: var(--text-sh); }
.cta .cta-risk { font-size: 13px; }
.cta-bee { position: absolute; top: 30px; right: 8%; width: 110px; animation: buzz 3.4s ease-in-out infinite; }

/* ───────────── footer: the farm on the hills */
/* the hills render across the top; its empty foreground carries on as the footer's own colour */
.ft { position: relative; margin-top: 20px; padding: 25vw 0 24px; background: linear-gradient(var(--bg), var(--foot) 12vw); overflow: clip; }
.ft-hills { position: absolute; top: 0; left: 0; width: 100%; height: auto; -webkit-mask-image: linear-gradient(transparent, #000 24%); mask-image: linear-gradient(transparent, #000 24%); }
.ft-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.ft h2 { margin: 0 0 16px; font-size: 20px; }
.ft-pay ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ft-pay li { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--orange), var(--shadow-sm); }
.ft-pay img { width: 34px; height: 34px; }
.coin-txt { color: var(--orange-ink); font-size: 11px; font-weight: 800; }
.ft-ask-in { display: flex; align-items: center; gap: 16px; }
.ft-av { display: grid; flex: none; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--btn); color: var(--white); box-shadow: var(--btn-sh); }
.ft-av .ic { width: 28px; height: 28px; }
.ft-ask p { max-width: 260px; margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.ft-nav { position: relative; display: flex; flex-wrap: wrap; gap: 0 14px; margin: 34px 0 0 -6px; }
.ft-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 6px; color: var(--ink); font-size: 14px; font-weight: 800; text-decoration: none; }
.ft-nav a:hover { color: var(--orange-ink); }
.ft-bot { position: relative; display: grid; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.ft-bot p { margin: 0; }
.ft-risk b { color: var(--ink); }
.ft-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.ft-copy a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; color: var(--ink); font-weight: 800; text-decoration: none; }

/* ───────────── a transaction card (js/tx-pops.js): the markup the member dashboard shares */
.tp { position: fixed; bottom: 20px; left: 20px; z-index: 42; display: grid; grid-template-columns: 34px auto minmax(0, 1fr) 30px; grid-template-areas: "ic kind kind x" "ic amt tk x" "ic who who who"; align-items: center; column-gap: 10px; width: 280px; padding: 12px 12px 12px 14px; border-left: 4px solid var(--orange); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); animation: tpIn .45s cubic-bezier(.2, .9, .3, 1.2); }
.tp.out { animation: tpOut .3s ease forwards; }
.tp-ic { grid-area: ic; width: 34px; height: 34px; }
i.tp-ic { font-size: 14px; }
.tp-kind { grid-area: kind; color: var(--orange-ink); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tp-amt { grid-area: amt; color: var(--ink); font: 600 19px/1.2 var(--font-h); white-space: nowrap; }
.tp-tk { grid-area: tk; color: var(--muted); font-size: 12px; font-weight: 800; }
.tp-who { grid-area: who; color: var(--muted); font-size: 12.5px; }
.tp-who b { color: var(--ink); }
.tp-who i { font-style: normal; letter-spacing: -.1em; }
.tp-x { grid-area: x; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
@keyframes tpIn { from { opacity: 0; translate: 0 24px; } }
@keyframes tpOut { to { opacity: 0; translate: 0 16px; } }

/* ───────────── the cookie card */
.lp-cookie { position: fixed; left: 20px; bottom: 20px; z-index: 55; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; width: min(360px, calc(100vw - 40px)); padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.lp-cookie.on { opacity: 1; visibility: visible; transform: none; }
.lp-cookie-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--cream); color: var(--orange-ink); }
.lp-cookie p { margin: 0; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.lp-cookie .btn { grid-column: 1 / -1; }

/* ───────────── a policy page (policy.blade.php): the admin's HTML in this theme's type */
.doc-sec { padding-top: 64px; }
.doc-head { max-width: 760px; margin-inline: auto; text-align: center; }
.doc-head .tag-l { display: inline-block; margin-bottom: 14px; padding: 5px 16px; border-radius: 999px; background: var(--cream); color: var(--orange-ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.doc-head h2 { font-size: clamp(30px, 3.2vw, 42px); }
.doc-note { max-width: 760px; margin: 18px auto 0; padding: 10px 14px; border-left: 3px solid var(--orange); color: var(--muted); font-size: 13px; }
.doc { max-width: 760px; margin: 36px auto 0; padding: 40px 44px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--text); font-size: 15.5px; line-height: 1.75; box-shadow: var(--shadow-sm); }
.doc > * + * { margin-top: 16px; }
.doc h2, .doc h3 { margin-top: 36px; color: var(--ink); font: 600 22px/1.25 var(--font-h); }
.doc h3 { font-size: 18px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc strong, .doc b { color: var(--ink); }
.doc a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.doc th, .doc td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.doc td:first-child { color: var(--ink); font-weight: 800; }

/* reveal on scroll */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ───────────── responsive */
@media (max-width: 1280px) {
    .trail-hero, .trail-bee, .trail-hives, .adv-dipper { display: none; }
    .adv-comb { width: 240px; opacity: .4; }
}

@media (max-width: 1120px) {
    /* three cards side by side get narrow: the rate goes under the name */
    .pc-hd { flex-direction: column; }
    .pc-rate { justify-items: start; text-align: left; }
    .farm-grid { gap: 40px; }
    .colony-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .colony-art { grid-row: 1 / span 2; }
    .calc-grid { grid-template-columns: minmax(0, 1fr) 250px; }
    .calc-copy { grid-column: 1 / -1; }
    .calc-box { grid-column: 2; grid-row: 2; }
    /* the card now meets the right edge: the coin stays on it */
    .calc-coin { right: -10px; }
}

@media (max-width: 900px) {
    :root { --hd-h: 70px; }
    .sec { padding: 76px 0; }
    .hd-in { gap: 10px; }
    .brand { font-size: 23px; }
    .brand-mark { width: 34px; height: 34px; }
    .nav-word { display: none; }
    .nav-btn { order: 3; width: 44px; padding: 0; justify-content: center; border: 1.5px solid var(--line-2); background: var(--white-90); }
    .nav-pop { inset: calc(var(--hd-h) - 4px) 16px auto auto; width: min(320px, calc(100vw - 32px)); }
    .social { display: none; }
    .hero { padding: calc(var(--hd-h) + 28px) 0 72px; }
    .hero-corner { top: -50px; right: -90px; width: 64vw; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "pre" "h1" "art" "lede" "cta" "stats"; min-height: 0; }
    .hero-art { justify-self: center; max-width: 460px; margin-top: 18px; }
    .hives-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 44px; }
    /* one card under another, never a sideways row (the owner asked) */
    .hive-row { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 480px; }
    .pc-hd { flex-direction: row; }
    .pc-rate { justify-items: end; text-align: right; }
    .pc:hover { transform: none; }
    .farm-grid { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
    .farm-panel { min-height: 0; margin-right: 24px; padding: 40px 28px 150px 24px; }
    .farm-copy { padding: 0 24px; }
    .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
    .adv-bee, .trail-adv { display: none; }
    .stats-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .colony-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .colony-art { grid-row: auto; justify-self: center; max-width: 400px; }
    .colony-head { order: -1; }
    .steps-line { display: none; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .steps li:nth-child(even) { margin-top: 0; }
    .tx2, .faq-grid { grid-template-columns: minmax(0, 1fr); }
    .faq-head { position: static; }
    .faq-hive { display: none; }
    .ft-in { grid-template-columns: minmax(0, 1fr); }
    .cta { padding: 40px 28px 120px; }
    .cta-bee { top: auto; bottom: 24px; }
}

@media (max-width: 640px) {
    .wrap { width: calc(100% - 32px); }
    .auth a:not(.on) { display: none; }
    .nav-pop-auth { display: grid; }
    .hero h1 { font-size: clamp(38px, 11vw, 50px); }
    .hero-lede { font-size: 16.5px; }
    .hero-cta { gap: 8px 18px; }
    .hero-cta .btn { flex: 1 1 100%; }
    .hero-stats { justify-content: space-between; margin-top: 34px; }
    .hero-stats div { padding: 0 0 0 14px; }
    .hero-stats dd { font-size: 28px; }
    .hero-stats dt { font-size: 13px; }
    .pc-hd { padding: 22px 18px 16px; }
    .pc-body { padding: 44px 18px 20px; }
    .pc-id h3 { font-size: 19px; }
    .pc-rate b { font-size: 40px; }
    .pc-bee { right: -6px; width: 66px; }
    .farm-panel { margin-right: 16px; padding: 34px 22px 140px 16px; }
    .farm-days b { font-size: 100px; }
    .farm-copy { padding: 0 16px; }
    .farm-cols { grid-template-columns: minmax(0, 1fr); }
    .farm-stacks { width: 170px; }
    .adv-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .adv-grid li { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 18px; }
    .adv-grid .hexi { grid-row: 1 / span 2; }
    .adv-grid h3 { margin: 4px 0 4px; }
    .adv-comb { opacity: .22; }
    .calc-sec { padding: 72px 0; }
    .calc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .calc-box { grid-column: auto; grid-row: auto; }
    .calc-form .row-btns .btn { flex: 1 1 auto; }
    .calc-coin { top: -26px; right: -8px; width: 60px; }
    .steps { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .steps li { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; }
    .steps .hexi { grid-row: 1 / span 2; margin: 0; }
    .steps h3 { align-self: end; }
    .steps p { margin: 0; }
    .tx { padding: 20px 16px 8px; }
    .tx li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
    .tx .cn { display: none; }
    .qa summary { padding-left: 18px; font-size: 16px; }
    .qa details p { padding: 0 18px 18px; }
    .ft { padding-top: 196px; background: linear-gradient(var(--bg), var(--foot) 60px); }
    .ft-hills { height: 250px; object-fit: cover; object-position: 8% top; }
    .ft-pay ul { gap: 6px; }
    .ft-pay li { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--orange); }
    .ft-pay img { width: 22px; height: 22px; }
    .doc { padding: 26px 20px; }
    /* a two-line strip, so it covers as little of the page as it can */
    .tp { left: 12px; bottom: 12px; grid-template-columns: 28px auto auto minmax(0, 1fr) 28px; grid-template-areas: "ic kind amt tk x" "ic who who who x"; gap: 2px 8px; width: min(320px, calc(100vw - 24px)); padding: 8px 8px 8px 10px; }
    .tp-ic { width: 28px; height: 28px; }
    .tp-amt { font-size: 16px; }
    .tp-tk { align-self: center; }
    .tp-x { width: 28px; height: 28px; align-self: center; }
    .lp-cookie { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; translate: none; }
}