/* ritcha.ai round 2 — shared by A (Mint Field) and B (Year Deck).
   Colour FIELDS built only from Ledger tokens + the icon's two colours (--ink #0B3B2C, --mint #4FE0A0).
   Contrast measured: ink on mint 7.46:1 · mint on ink 7.46 · mint on #080F0C 11.5 · #FF6F64 on ink 4.60. */

/* ---------- F2: the display face ----------
   default = Ledger's system faces (ui-rounded, heavy). html.face-cond = ONE self-hosted OFL face, Anton
   (fonts/anton-2.0/, 14.4 KB WOFF2, OFL 1.1). The browser only downloads it when a rule uses it. */
@font-face{font-family:"Anton";src:url("../fonts/anton-2.0/anton-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--disp:var(--fig);--dispw:900;--displs:-.045em;--dispcase:uppercase;--displh:.86;--dscale:1}
html.face-cond{--disp:"Anton",var(--fig);--dispw:400;--displs:-.01em;--displh:.9;--dscale:1.32}
.disp{font-family:var(--disp);font-weight:var(--dispw);letter-spacing:var(--displs);text-transform:var(--dispcase);line-height:var(--displh)}

/* ---------- fields ---------- */
:root{--mf:#4FE0A0;--mfg:#0B3B2C;--mfs:#0B3B2C;--if:#0B3B2C;--ifg:#4FE0A0;--ifs:#C9DDD3;--pf:#ECEFED;--pfg:#0B3B2C;--pfs:#46564F;--lowf:#FF6F64}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mf:#0B3B2C;--mfg:#4FE0A0;--mfs:#C9DDD3;--if:#080F0C;--ifg:#4FE0A0;--ifs:#B5C7BE;--pf:#0D1612;--pfg:#EDF4F0;--pfs:#A3B3AB}}
:root[data-theme="dark"]{--mf:#0B3B2C;--mfg:#4FE0A0;--mfs:#C9DDD3;--if:#080F0C;--ifg:#4FE0A0;--ifs:#B5C7BE;--pf:#0D1612;--pfg:#EDF4F0;--pfs:#A3B3AB}
.fld{position:relative;overflow:clip}
.f-mint{background:var(--mf);color:var(--mfg);--fbg:var(--mf);--ffg:var(--mfg);--fsub:var(--mfs)}
.f-ink{background:var(--if);color:var(--ifg);--fbg:var(--if);--ffg:var(--ifg);--fsub:var(--ifs)}
.f-paper{background:var(--pf);color:var(--pfg);--fbg:var(--pf);--ffg:var(--pfg);--fsub:var(--pfs)}
body.r2{background:var(--pf)}
.tag{font:700 12.5px/1.2 var(--txt);letter-spacing:.12em;text-transform:uppercase;color:var(--ffg)}

/* header + footer ride the first field */
body.r2-a .top{background:var(--mf);border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
body.r2-a .top .brand,body.r2-a .top nav a{color:var(--mfg)}
body.r2-a .top nav a:hover{background:color-mix(in srgb,var(--mfg) 10%,transparent)}
body.r2-a .top nav a.cta{background:var(--mfg);color:var(--mf)}
body.r2 .foot{background:var(--if);color:var(--ifs);border-top:0}
body.r2 .foot a{color:var(--ifg)}

/* ---------- mega type: each word a masked line ---------- */
.mega{margin:0;font-family:var(--disp);font-weight:var(--dispw);letter-spacing:var(--displs);text-transform:var(--dispcase);
  line-height:var(--displh);display:grid}
.mega .ln{display:block;overflow:clip;overflow-clip-margin:.08em;padding-bottom:.02em}
.mega .w{display:block}
@keyframes rise{from{transform:translate3d(0,105%,0)}}
html.motion .mega .w{animation:rise 1s cubic-bezier(.16,.8,.2,1) both}
html.motion .mega .l2 .w{animation-delay:.09s} html.motion .mega .l3 .w{animation-delay:.18s}

/* ---------- stickers (round, tilted, flat colour; the sweet-tape idea drawn as SVG/CSS) ---------- */
.stk{position:absolute;z-index:3;display:block;pointer-events:none}
.stk-i{display:grid;place-items:center;width:var(--s,120px);height:var(--s,120px);border-radius:50%;
  font:900 calc(var(--s,120px) * .46)/1 var(--fig);background:#FFFFFF;color:#0B3B2C;
  box-shadow:0 18px 40px -18px rgba(4,19,12,.5),inset 0 0 0 calc(var(--s,120px) * .06) var(--mint)}
.stk.k-icon .stk-i{background:none;box-shadow:none;border-radius:22%}
.stk.k-icon img{width:100%;height:100%;border-radius:22%;box-shadow:0 0 0 3px var(--fbg,var(--mf)),0 0 0 6px var(--ffg,var(--mfg)),0 30px 60px -24px rgba(4,19,12,.55)}
@keyframes bob{50%{transform:translate3d(0,-10px,0) rotate(4deg)}}
html.motion .stk-i{animation:bob 6s ease-in-out infinite}

/* ---------- marquee ---------- */
.mq{overflow:hidden;white-space:nowrap}
.mq-t{display:inline-flex;align-items:center;gap:.6em;padding-right:.6em}
.mq-t i{font-style:normal}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
html.motion .mq-t{animation:mq 36s linear infinite}
html.motion .mq.m2 .mq-t{animation-direction:reverse}

/* ---------- forms and pills on fields ---------- */
.fld .wl .row{background:color-mix(in srgb,var(--card) 92%,transparent);border-color:transparent}
.fld .wl .row:focus-within{border-color:var(--ffg)}
.fld .wl input{color:var(--fg)}
.fld .wl .btn{background:var(--ffg);color:var(--fbg)}
.f-paper .wl .btn{background:var(--tint);color:var(--tintfg)}
.fld .wl .consent{color:var(--ffg)} .fld .wl .consent a{color:var(--ffg);font-weight:700}
.fld .wl .msg{background:var(--card);color:var(--fg);padding:12px 16px}
.fld .wl .msg.invalid{color:var(--neg);background:var(--card);padding:10px 14px}
.fld .wl[data-state="done"] .done{background:var(--card);color:var(--fg)}
.fld .wl .done p,.fld .wl .done b{color:var(--fg)}
.fld .store{background:transparent;border-color:color-mix(in srgb,var(--ffg) 40%,transparent);color:var(--ffg)}
.fld .store span,.fld .store svg{color:var(--ffg)}
.lede-f{font-size:clamp(18px,1.5vw,21px);line-height:1.45;max-width:30em;color:var(--ffg);font-weight:500}


.more2{margin-top:40px;font-weight:700;display:flex;flex-wrap:wrap;gap:14px 28px}
a.tag-l{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;padding:6px 0;margin:-6px 0}
.more2 a{color:var(--ffg);display:inline-flex;gap:8px;align-items:center;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}
.more2 svg{width:18px;height:18px}
.promise2{margin:20px 0 0;font-size:calc(clamp(38px,6.2vw,96px) * var(--dscale));color:var(--ffg)}
@media (min-width:900px){.promise2{max-width:13em}}
html.motion .promise2 .ph1,html.motion .promise2 .ph2{display:inline;animation:rv-in linear both;animation-timeline:view();animation-range:entry 10% cover 32%}
html.motion .promise2 .ph2{animation-range:entry 28% cover 46%}