/* FreeTA design system v4. Shared by the landing page and the hub.
   Tokens, fonts, type, buttons, highlights, chips, art frames, the Wallet card. Light only. */

/* headlines: Bricolage Grotesque, pinned to its condensed display cut (wdth 75, opsz 96), weights 500 to 800. OFL. */
@font-face{font-family:"Bricolage Display";src:url("assets/fonts/v4/bricolage-display.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("assets/fonts/v4/hankengrotesk.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* surfaces */
  --paper:#FFF9F0; --paper-2:#FFF1DE; --white:#FFFFFF;
  /* text */
  --ink:#1D1233; --ink-2:#5B4F73; --line:rgba(29,18,51,.12);
  /* loud colors */
  --pink:#FF3D6E; --orange:#FF8A2B; --sun:#FFC93C; --teal:#0DB7A7; --violet:#6B4BFF; --sky:#58B8FF; --lime:#C6EE46;
  /* soft tints for section grounds */
  --t-pink:#FFE1E9; --t-peach:#FFE6CF; --t-butter:#FFF2BF; --t-mint:#D5F6EC; --t-lilac:#E8E2FF; --t-sky:#DDF0FF;
  /* type */
  --display:"Bricolage Display","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* buttons, pills, small labels */
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* shape */
  --r-s:12px; --r:22px; --r-l:34px;
  --shadow:0 18px 40px -18px rgba(60,20,90,.35), 0 2px 6px rgba(60,20,90,.08);
  --shadow-pop:0 30px 60px -24px rgba(60,20,90,.45), 0 4px 10px rgba(60,20,90,.1);
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1200px;
  --gut:clamp(18px,4.4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
.reduce{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
h1,h2,h3,p{margin:0}

/* ---------- type ---------- */
.display,.h1,.h2,.h3{font-family:var(--display);font-weight:800;letter-spacing:-.012em;line-height:.96;text-wrap:balance}
.h1{font-size:clamp(50px,8.2vw,126px)}
.h2{font-size:clamp(38px,5.8vw,86px)}
.h3{font-size:clamp(22px,2.2vw,29px);letter-spacing:-.005em;line-height:1.05}
.lede{font-size:clamp(17px,1.5vw,22px);line-height:1.42;color:var(--ink-2);max-width:30em;text-wrap:pretty}
.num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.005em}

/* color on key words. .hl = colored word, .mark = colored block behind the word */
.hl-pink{color:var(--pink)} .hl-orange{color:var(--orange)} .hl-teal{color:var(--teal)} .hl-violet{color:var(--violet)} .hl-sun{color:var(--sun)}
.mark{display:inline-block;padding:.02em .2em .08em;margin:0 -.04em;border-radius:.22em;background:var(--sun);color:var(--ink);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark-pink{background:var(--pink);color:#fff}
.mark-teal{background:var(--teal);color:#fff}
.mark-violet{background:var(--violet);color:#fff}
.mark-lime{background:var(--lime)}

/* ---------- wordmark ---------- */
.wordmark{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.015em;line-height:1;text-decoration:none;color:inherit;display:inline-flex;align-items:baseline}
.wordmark i{font-style:normal;color:var(--pink)}

/* ---------- buttons (two words each) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:0 28px;border-radius:999px;font-family:var(--ui);font-weight:700;font-size:17px;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.btn-primary{background:var(--pink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -10px rgba(255,61,110,.55)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px -10px rgba(255,61,110,.55)}
.btn-primary:active{transform:translateY(1px)}
.btn-soft{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-soft:hover{background:var(--sun)}
.btn-glass{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-glass:hover{background:#fff;color:var(--ink)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--white);color:var(--ink);font-weight:700;font-size:15px;box-shadow:inset 0 0 0 2px var(--line);transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
button.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"],.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.sample{font-size:13px;font-weight:600;color:var(--ink-2)}

/* ---------- layout ---------- */
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
.sheet{position:relative;z-index:2}

/* ---------- art frames ---------- */
.art{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--t-peach);box-shadow:var(--shadow-pop);aspect-ratio:4/3;will-change:transform}
.art img{width:100%;height:100%;object-fit:cover}
.art img[data-old-art]{object-position:50% 20%}

/* ---------- the Wallet card (driven by card.js) ---------- */
.fcard{--tc:#E5392B;--f:0;width:min(330px,82vw);background:var(--white);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-pop),0 0 0 1px var(--line);transform-origin:50% 0}
.fcard-top{display:flex;justify-content:space-between;align-items:center;padding:13px 16px}
.fcard-top .wordmark{font-size:19px}
.fcard-goal{background:var(--tc);color:#fff;padding:5px 12px;border-radius:999px;font-family:var(--ui);font-weight:700;font-size:13px;transition:background-color .3s}
.fcard.tc-light .fcard-goal{color:var(--ink)}
.tc-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#F6F0E5}
.tc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.tc-color{position:absolute;inset:0;background:var(--tc);clip-path:inset(calc((100 - var(--f)) * 1%) 0 0 0)}
.tc-line{position:absolute;left:0;right:0;bottom:calc(var(--f) * 1%);height:3px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9);pointer-events:none;transition:opacity .2s}
.tc-line span{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:4px 11px;border-radius:999px;font-family:var(--ui);font-weight:700;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fcard.high .tc-line span{bottom:auto;top:9px}
.fcard.zero .tc-line,.fcard.done .tc-line{opacity:0}
.tc-stamp{position:absolute;left:50%;top:74%;padding:.16em .5em .2em;border-radius:14px;background:var(--sun);color:var(--ink);font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.01em;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(1.5);transition:opacity .25s,transform .45s cubic-bezier(.3,1.5,.5,1);box-shadow:0 12px 24px -10px rgba(60,20,90,.6)}
.fcard.done .tc-stamp{opacity:1;transform:translate(-50%,-50%) scale(1)}
.reduce .tc-stamp{transition:none}
.fcard-main{padding:13px 16px 16px}
.fcard-amt{display:flex;align-items:baseline;gap:8px}
.fcard-amt b{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.fcard-amt span{font-size:14px;font-weight:600;color:var(--ink-2)}
.tc-bar{position:relative;height:10px;margin-top:11px;background:var(--paper-2);border-radius:999px;overflow:hidden}
.tc-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--f) * 1%);background:linear-gradient(90deg,var(--orange),var(--pink));border-radius:999px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}