/* Fancy Digital: the company site. One stylesheet for every page. Dark by default, light when the phone asks for it. */
:root {
  --bg: #0e1116; --bg2: #0b0e13; --panel: #161a21; --panel2: #1c212a; --line: #262c36; --line2: #323a47;
  --fg: #e8ebf0; --fg2: #c4cad4; --muted: #8a93a3;
  --green: #22c55e; --green2: #16a34a; --green-ink: #0b1a12;
  --gold: #e8be5c; --gold2: #f2bd45; --gold3: #c98f22; --gold-ink: #15120a;
  --boxbg: rgba(0,0,0,.62); --boxline: rgba(232,190,92,.18);
  --r: 18px; --r2: 12px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef9f3; --bg2: #e3f3ea; --panel: #ffffff; --panel2: #f4faf6; --line: #c8e6d6; --line2: #a9d3bf;
    --fg: #0e231a; --fg2: #24402f; --muted: #4c6b5d; --green: #0c9a63; --green2: #0a7f52; --green-ink: #ffffff;
    --boxbg: rgba(255,255,255,.80); --boxline: rgba(150,110,30,.20); color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body { background: var(--bg); color: var(--fg); font: 16px/1.55 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body > header, body > main, body > footer { position: relative; z-index: 1; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }
h1, h2, h3 { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; letter-spacing: -0.02em; margin: 0; }
.eyebrow { font: 600 15px/1.2 'DM Sans', sans-serif; color: var(--gold); margin: 0 0 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the wordmark */
@font-face { font-family: 'Michroma'; src: url(fonts/michroma-latin-400-normal.woff2) format('woff2'); font-display: swap; }
.fdw { font-family: 'Michroma', sans-serif !important; font-weight: 400 !important; letter-spacing: .04em; line-height: 1.35 !important; padding: 2px 0; display: inline-block; background: linear-gradient(180deg, #ffe08a 0%, #f2bd45 55%, #c98f22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(60,40,0,.35)); }

/* top bar */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--boxline); }
.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.top .mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.top .mark img { width: 40px; height: 40px; display: block; }
.top .mark .fdw { font-size: 17px !important; white-space: nowrap; }
.top nav { display: flex; gap: 4px; }
.top nav a { text-decoration: none; color: var(--fg2); font-weight: 600; font-size: 15px; padding: 9px 13px; border-radius: 999px; }
.top nav a:hover, .top nav a[aria-current] { color: var(--fg); background: var(--panel2); }
.top nav a[aria-current] { color: var(--gold); }
.acct { font: 700 14px 'DM Sans', sans-serif; color: var(--gold); border: 1px solid rgba(232,190,92,.5); border-radius: 999px; padding: 9px 16px; text-decoration: none; white-space: nowrap; }
.acct:hover { background: rgba(232,190,92,.1); }
.menuBtn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); font-size: 20px; cursor: pointer; }
@media (max-width: 760px) {
  .top nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: 10px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--line); gap: 2px; }
  .top.open nav { display: flex; }
  .top nav a { padding: 12px 14px; font-size: 17px; }
  .menuBtn { display: block; }
  .acct { display: none; }
  .top.open .acct { display: block; position: absolute; left: 16px; right: 16px; top: calc(100% + 1px); margin-top: 0; z-index: -1; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 12px; font: 700 16px 'DM Sans', sans-serif; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .12s, background .12s; }
.btn:hover { transform: translateY(-1px); }
.btn.gold { background: linear-gradient(180deg, #ffe08a, #d79a2b); color: var(--gold-ink); }
.btn.green { background: var(--green); color: var(--green-ink); }
.btn.ghost { border-color: var(--line2); color: var(--fg); background: var(--panel); }
.btn.sm { padding: 9px 14px; font-size: 14px; border-radius: 10px; }

/* see-through panels over the falling numbers */
.box { background: var(--boxbg); border: 1px solid var(--boxline); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: var(--r); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }

/* hero */
.hero { padding: 84px 0 24px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -10%; top: -20%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(232,190,92,.22), rgba(232,190,92,.06) 45%, transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.0; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 20px; }
.hero h1 span { color: var(--green); }
.hero .lede { font-size: clamp(18px, 2vw, 22px); color: var(--fg2); max-width: 40ch; margin: 0 0 30px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14.5px; }
.hero .facts li::before { content: '✓'; color: var(--green); font-weight: 800; margin-right: 7px; }
.hero .copy { padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* three phones fanned out */
.fan { position: relative; display: flex; justify-content: center; }
.phone { position: relative; width: 300px; aspect-ratio: 390 / 844; border-radius: 44px; background: #0a0c10; padding: 11px; box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 120px rgba(232,190,92,.18); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; display: block; }
.phone::after { content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; border-radius: 0 0 16px 16px; background: #0a0c10; }
@media (max-width: 900px) { .hero { padding: 48px 0 16px; } .hero .wrap { grid-template-columns: 1fr; gap: 36px; } .phone { width: 250px; } }
@media (max-width: 480px) { .phone { width: 210px; } }

/* sections */
section.s { padding: 44px 0; }
.shead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 24px; margin: 0 0 22px; }
.shead h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; }
.shead p { margin: 0; color: var(--muted); max-width: 60ch; }
.shead .eyebrow { margin-bottom: 8px; }

/* facts row */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 28px 0 8px; border-top: 1px solid var(--line); }
.pillar h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.pillar p { margin: 0; color: var(--muted); font-size: 15px; max-width: 34ch; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 20px; } }

/* app cards */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.appcard { display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-decoration: none; transition: transform .15s, border-color .15s; }
.appcard:hover { transform: translateY(-2px); border-color: var(--green); }
.shot { position: relative; height: 190px; overflow: hidden; background: var(--panel2); border-bottom: 1px solid var(--line); }
.shot img { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 72%; max-width: 250px; border-radius: 16px 16px 0 0; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.shot .tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--gold2); color: var(--gold-ink); font: 700 12px/1.3 'DM Sans', sans-serif; }
.shot .tag.gold { background: var(--gold2); color: var(--gold-ink); }
.shot .tag.grey { background: var(--line2); color: var(--fg); }
.appcard .body { padding: 16px 18px 18px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; }
.appcard .body img { width: 48px; height: 48px; border-radius: 12px; display: block; }
.appcard b { display: block; font: 700 17px/1.25 'Bricolage Grotesque', sans-serif; }
.appcard b small { display: block; font: 500 13px/1.4 'DM Sans', sans-serif; color: var(--muted); }
.appcard p { margin: 6px 0 10px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.appcard .price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--fg2); }
.appcard .price .go { color: var(--green); font-weight: 700; white-space: nowrap; }
.family { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 16px; }
.passcard { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; justify-content: center; background: linear-gradient(135deg, rgba(232,190,92,.14), transparent 60%), var(--panel); border-color: rgba(232,190,92,.4); }
.passcard h3 { font-size: 22px; font-weight: 800; }
.passcard .big { font: 800 34px/1 'Bricolage Grotesque', sans-serif; color: var(--gold); }
.passcard .big small { font: 600 14px 'DM Sans', sans-serif; color: var(--muted); }
.passcard p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 760px) { .family { grid-template-columns: 1fr; } }

/* launch card (until the day) */
.launch { padding: 22px 26px 20px; margin: 0; border-color: rgba(232,190,92,.35) !important; display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lc-dot { width: 9px; height: 9px; border-radius: 50%; background: #f2bd45; box-shadow: 0 0 10px #f2bd45; animation: lcp 1.6s ease-in-out infinite; }
@keyframes lcp { 50% { opacity: .35; box-shadow: 0 0 2px #f2bd45; } }
.lc-tag { font: 700 15px 'DM Sans', sans-serif; color: var(--gold); }
.lc-when { font-size: 14px; color: var(--muted); }
.lc-clock { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-family: 'Share Tech Mono', ui-monospace, monospace; }
.lc-clock div { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.lc-clock b { font-weight: 400; font-size: clamp(32px, 5vw, 48px); line-height: 1; background: linear-gradient(180deg,#fff2bf,#f2bd45 60%,#b47a1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(242,189,69,.25)); }
.lc-clock span { font: 500 12px 'DM Sans', sans-serif; color: var(--muted); margin-top: 6px; }
.lc-clock i { font-style: normal; font-size: clamp(26px, 4vw, 40px); line-height: 1; color: rgba(242,189,69,.5); }
.lc-note { margin: 10px 0 0; color: var(--fg2); font-size: 15px; max-width: 60ch; }
.lc-side { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.lc-side small { color: var(--muted); font-size: 12.5px; text-align: center; }
@media (max-width: 760px) { .launch { grid-template-columns: 1fr; } .lc-side { min-width: 0; } }
.ea { margin-top: 14px; border: 1px solid rgba(232,190,92,.30); border-radius: 14px; background: rgba(242,189,69,.05); grid-column: 1 / -1; }
.ea summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 14px; color: var(--fg2); }
.ea summary::-webkit-details-marker { display: none; }
.ea summary b { font-weight: 700; color: var(--gold); }
.ea ul { margin: 0; padding: 4px 16px 10px 34px; border-top: 1px solid rgba(232,190,92,.18); color: var(--muted); font-size: 14px; }
.ea li { margin: 8px 0; } .ea li b { color: var(--fg); font-weight: 600; }

/* install */
.install { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 32px 36px; }
@media (max-width: 860px) { .install { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; } }
.install h3 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.install p { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; max-width: 46ch; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--fg2); }
.steps li b { color: var(--fg); font-weight: 700; }
.icgrid { display: flex; flex-wrap: wrap; gap: 10px; }
.icgrid button { padding: 0; border-radius: 16px; border: 2px solid transparent; background: none; cursor: pointer; }
.icgrid button img { width: 56px; height: 56px; border-radius: 13px; display: block; }
.icgrid button[aria-pressed="true"] { border-color: var(--gold); }
.icnote { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }
.icnote em { font-style: normal; color: var(--fg); font-weight: 600; }

/* page heads (pricing, support) */
.pagehead { padding: 56px 0 10px; }
.pagehead h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; }
.pagehead p { color: var(--fg2); font-size: 18px; max-width: 60ch; margin: 12px 0 0; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }
.plan { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.plan .nm { display: flex; align-items: center; gap: 10px; }
.plan .nm img { width: 40px; height: 40px; border-radius: 10px; }
.plan .nm b { font: 700 17px/1.2 'Bricolage Grotesque', sans-serif; }
.plan .nm small { display: block; font: 500 12.5px 'DM Sans', sans-serif; color: var(--muted); }
.plan .amt { font: 800 30px/1 'Bricolage Grotesque', sans-serif; margin-top: 6px; }
.plan .amt small { font: 600 14px 'DM Sans', sans-serif; color: var(--muted); }
.plan .alt { color: var(--muted); font-size: 14px; }
.plan ul { margin: 6px 0 0; padding: 0; list-style: none; color: var(--fg2); font-size: 14.5px; display: grid; gap: 5px; }
.plan li::before { content: '✓'; color: var(--green); font-weight: 800; margin-right: 7px; }
.plan li.no::before { content: '–'; color: var(--muted); }
.plan .btn { margin-top: auto; align-self: start; }
.plan.pass { border-color: rgba(232,190,92,.5); background: linear-gradient(135deg, rgba(232,190,92,.14), transparent 60%), var(--panel); }
.plan.pass .amt { color: var(--gold); }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rules { grid-template-columns: 1fr; } }
.rule { padding: 18px 20px; } .rule h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .rule p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* support */
.faq { display: grid; gap: 10px; }
.faq details { padding: 0 20px; }
.faq summary { cursor: pointer; padding: 16px 0; font: 700 17px/1.3 'Bricolage Grotesque', sans-serif; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq .a { padding: 0 0 18px; color: var(--fg2); font-size: 15.5px; } .faq .a p { margin: 0 0 8px; } .faq .a a { color: var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.contactcard { padding: 24px 26px; }
.contactcard h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.contactcard p { color: var(--muted); margin: 0 0 14px; }
.contactcard .mail { font-family: 'Michroma', sans-serif; font-size: 15px; letter-spacing: .03em; text-decoration: none; background: linear-gradient(180deg,#ffe08a,#e2a93a); -webkit-background-clip: text; background-clip: text; color: transparent; border-bottom: 1px solid rgba(232,190,92,.5); padding-bottom: 2px; }

/* footer */
footer { margin-top: 40px; padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--boxline); background: var(--bg2); color: var(--muted); }
.fcols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .fcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fcols { grid-template-columns: 1fr; } }
.fcols h4 { margin: 0 0 10px; font: 700 14px 'Bricolage Grotesque', sans-serif; color: var(--gold); }
.fcols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14.5px; }
.fcols a { text-decoration: none; color: var(--fg2); } .fcols a:hover { color: var(--gold); }
.fbrand .mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 10px; }
.fbrand .mark img { width: 44px; height: 44px; } .fbrand .mark .fdw { font-size: 18px !important; }
.fbrand p { margin: 0 0 12px; font-size: 14.5px; max-width: 34ch; }
.fbrand .mail { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--green); }
.fbot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--boxline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13px; }
.fbot span:last-child { display: flex; gap: 18px; } .fbot a { color: var(--muted); text-decoration: none; } .fbot a:hover { color: var(--gold); } .fbot i { display: none; }

/* legal pages in the frame */
.legal { max-width: 760px; padding-top: 0; }
.legal h1 { font-size: clamp(32px, 4.5vw, 48px); font-weight: 800; margin-bottom: 6px; }
.legal .when { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; }
.legal h2 { font-size: 20px; font-weight: 800; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--fg2); font-size: 16px; }
.legal ul { padding-left: 20px; } .legal li { margin: 5px 0; }
.legal .box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 14px 0 20px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.legal .box b { color: var(--green); }
.legal a { color: var(--gold); }
/* an app page */
.does { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 28px; max-width: 980px; }
.does li { position: relative; padding-left: 26px; color: var(--fg2); font-size: 16.5px; line-height: 1.5; }
.does li::before { content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }