/* Public pages (landing, login, sign up). Colors are at the top: change them here. */
:root { --bg:#121110; --bg2:#1a1917; --card:#201f1c; --line:#34322c; --text:#f1ede2; --muted:#9a968a;
        --gold1:#a97f35; --gold2:#e8cb8c; --gold3:#b08a3e; --blue:#7ea2ff; --blue-d:#2f64e0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.auth a, .doc a, .panel a, .fine a, .faq a, .foot-links a { text-decoration: none; }
.auth a:hover, .doc a:hover, .fine a:hover, .faq a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.gold { background: linear-gradient(100deg, var(--gold1), var(--gold2) 50%, var(--gold3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* wordmark: CANVAS | PRO */
.wm { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; letter-spacing: .3em; font-weight: 300; font-size: 19px; }
.wm i { width: 1px; height: 1.5em; background: linear-gradient(var(--gold2), var(--gold1)); display: inline-block; }
.wm b { font-weight: 500; }

/* top bar */
nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); background: rgba(18,17,16,.75); border-bottom: 1px solid rgba(255,255,255,.06); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
nav .links { display: flex; align-items: center; gap: 22px; font-size: 15px; }
nav .links a { text-decoration: none; color: var(--muted); } nav .links a:hover { color: var(--text); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 12px; font: inherit; font-weight: 600; font-size: 15px;
       text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--text); transition: transform .12s, background .15s, border-color .15s; }
.btn:hover { border-color: #5a574d; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(180deg, #4a7fe6 0%, #3562cf 100%); border-color: transparent; color: #fff;
  /* a refined glow instead of a wide haze: a thin light edge on top, a fine ring, and a soft shadow that stays under the button */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(92,140,255,.22), 0 4px 12px -6px rgba(40,80,180,.5), 0 2px 4px rgba(0,0,0,.2);
  transition: transform .15s, box-shadow .2s, background .2s; }
.btn.primary:hover { background: linear-gradient(180deg, #5a8cee 0%, #3e6dd8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 1px rgba(110,155,255,.35), 0 6px 16px -6px rgba(40,80,180,.55), 0 2px 4px rgba(0,0,0,.2); }
.btn.primary:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(92,140,255,.35); }
.btn.big { padding: 15px 30px; font-size: 17px; border-radius: 14px; }
.btn.block { width: 100%; }

/* hero */
.hero { text-align: center; padding: 84px 0 56px; background: radial-gradient(60% 70% at 50% 0%, rgba(201,164,90,.17), transparent 70%); }
.hero h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 20px; font-weight: 700; }
.hero p.lead { color: var(--muted); font-size: clamp(17px, 2.2vw, 21px); max-width: 640px; margin: 0 auto 34px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero small { display: block; margin-top: 16px; color: var(--muted); font-size: 13.5px; }
.video { margin: 56px auto 0; max-width: 960px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); background: #000; }
.video video { display: block; width: 100%; height: auto; }

/* sections */
section { padding: 84px 0; }
section h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; text-align: center; }
section .sub { color: var(--muted); text-align: center; max-width: 560px; margin: 0 auto 48px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.feat svg { width: 26px; height: 26px; stroke: var(--gold2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.feat h3 { margin: 0 0 6px; font-size: 18px; } .feat p { margin: 0; color: var(--muted); font-size: 15px; }

/* pricing */
.toggle { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 0 auto 36px; }
.toggle button { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: 0; padding: 8px 20px; border-radius: 999px; cursor: pointer; }
.toggle button.on { background: var(--text); color: #151412; }
.toggle-wrap { text-align: center; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; }
.plan.pro { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--gold1), var(--gold2), var(--gold3)) border-box; border: 1.5px solid transparent; position: relative; }
.plan .tag { position: absolute; top: -12px; right: 24px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1a1305; padding: 4px 12px; border-radius: 999px; background: linear-gradient(100deg, var(--gold2), var(--gold1)); }
.plan h3 { margin: 0; font-size: 20px; }
.plan .price { font-size: 40px; font-weight: 700; letter-spacing: -.03em; margin: 12px 0 2px; }
.plan .per { color: var(--muted); font-size: 14px; margin-bottom: 22px; min-height: 22px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; flex: 1; }
.plan li { padding-left: 28px; position: relative; font-size: 15px; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 6px; height: 11px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan li.off { color: var(--muted); } .plan li.off::before { border-color: #55524a; }

footer { border-top: 1px solid var(--line); padding: 36px 0; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* login / sign up */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(60% 50% at 50% 0%, rgba(201,164,90,.15), transparent 70%), var(--bg); }
.auth .box { width: 100%; max-width: 400px; }
.auth .top { text-align: center; margin-bottom: 30px; }
.auth form { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: grid; gap: 16px; }
.auth h1 { font-size: 24px; margin: 0 0 2px; letter-spacing: -.02em; }
.auth label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.auth input { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.auth input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(126,162,255,.2); }
.auth .err { color: #ff8a7a; font-size: 14px; min-height: 20px; margin: -4px 0; }
.auth .alt { text-align: center; margin-top: 18px; color: var(--muted); font-size: 15px; }
.auth .alt a { color: var(--blue); }

/* ===== Mobile / small screens (edit the breakpoints here) ===== */
@media (max-width: 820px) {
  .wrap { padding: 0 18px; }
  nav .wrap { height: 58px; }
  nav .links { gap: 14px; }
  nav .links a[href^="#"] { display: none; }          /* hide Features / Pricing anchors, keep Log in + Start */
  .hero { padding: 52px 0 36px; }
  .video { margin-top: 36px; border-radius: 12px; }
  section { padding: 56px 0; }
  section .sub { margin-bottom: 32px; }
  .plan { padding: 26px 22px; }
  .plan .price { font-size: 34px; }
}
@media (max-width: 480px) {
  .wm { font-size: 15px; letter-spacing: .22em; }
  nav .links .btn { padding: 8px 14px; font-size: 14px; }
  nav .links { gap: 10px; }
  .hero h1 br { display: none; }                      /* let the headline wrap naturally */
  .hero .cta { flex-direction: column; align-items: stretch; padding: 0 6px; }
  .btn.big { padding: 14px 20px; font-size: 16px; }
  .grid, .plans { grid-template-columns: 1fr; }       /* one column; minmax() would overflow very narrow phones */
  .feat { padding: 22px; }
  footer .wrap { flex-direction: column; text-align: center; align-items: center; }
  .auth form { padding: 24px 20px; }
}

/* login / sign up: bigger logo + show-password button */
.auth .top { margin-bottom: 32px; }
.auth .top .wm { font-size: 24px; }
.auth .top a.wm:hover { text-decoration: none; }                 /* no underline under the CANVAS | PRO title on hover */                              /* CANVAS | PRO title on the account pages */
@media (max-width: 480px) { .auth .top .wm { font-size: 20px; } }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 50px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center;
             background: none; border: 0; border-radius: 9px; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.pw button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.pw button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pw button.on { color: var(--blue); }                                /* password is visible */
.pw button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pw button .slash { display: block; } .pw button.on .slash { display: none; }   /* crossed eye = hidden, open eye = visible */

/* ---------- FEATURES: cards with a small animated demo (plays on hover, focus, or while on screen on a phone) ---------- */
.feat { position: relative; outline: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
.feat:is(:hover, :focus-visible, .play) { border-color: #5a4a2a; transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(232,203,140,.12); }
.feat h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.feat h3 svg { width: 20px; height: 20px; margin: 0; flex: none; }
.protag { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1a1405; background: linear-gradient(100deg, var(--gold1), var(--gold2)); padding: 2px 8px; border-radius: 999px; }
.demo { position: relative; height: 136px; margin: -8px -8px 20px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.3px) 0 0 / 16px 16px, #171614; }
.feat .demo svg { width: 100%; height: 100%; margin: 0; stroke: none; fill: none; }
/* a small note used by several demos */
.mn { position: absolute; width: 74px; background: #2a2823; border: 1px solid #403c33; border-radius: 8px; padding: 8px; box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.mn i { display: block; height: 4px; border-radius: 2px; background: #5a5548; margin-bottom: 5px; } .mn i:last-child { width: 60%; margin: 0; }
.mn.n1 { left: 9%; top: 18px; } .mn.n2 { left: 55%; top: 26px; } .mn.n3 { left: 26%; top: 80px; } .mn.n4 { left: 64%; top: 84px; opacity: 0; transform: scale(.6); }

/* 1 free-form canvas: the notes drift to new places and a new one pops in */
.d-notes .mn { animation: drift 3.2s ease-in-out infinite; }
.d-notes .n1 { --dx: 26px; --dy: 12px; --r: -3deg; } .d-notes .n2 { --dx: -22px; --dy: 22px; --r: 3deg; animation-delay: -.6s; } .d-notes .n3 { --dx: 46px; --dy: -14px; --r: 2deg; animation-delay: -1.2s; }
.d-notes .n4 { animation: popin 3.2s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: none; } 50% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes popin { 0%, 25% { opacity: 0; transform: scale(.6); } 45%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }

/* 2 draw: the pen draws a line, circles a shape, and a highlighter sweeps over some text */
.d-draw .ln { position: absolute; left: 9%; height: 6px; border-radius: 3px; background: #4a463c; } .d-draw .l1 { top: 20px; width: 46%; } .d-draw .l2 { top: 36px; width: 30%; }
.d-draw .hi { position: absolute; left: 9%; top: 31px; height: 16px; width: 30%; border-radius: 3px; background: rgba(255,214,10,.45); transform-origin: left; animation: sweep 3.2s ease-in-out infinite; }
.d-draw .pen, .d-draw .cir { fill: none; stroke: #ff4d7e; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; }
.d-draw .pen { animation: pen 3.2s ease-in-out infinite; } .d-draw .cir { stroke: #7ea2ff; stroke-width: 2.4; animation: pen 3.2s ease-in-out infinite .5s; }
@keyframes pen { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes sweep { 0%, 10% { transform: scaleX(0); } 45%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 3 deadlines: the ring fills and changes color while the text changes */
.feat .demo svg.ring { position: absolute; left: 22%; top: 50%; width: 64px; height: 64px; transform: translateY(-50%) rotate(-90deg); }
.d-dead .ring circle { fill: none; stroke-width: 6; } .d-dead .tr { stroke: #3a372f; }
.d-dead .bar { stroke: #22c55e; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 80; animation: ring 3.6s ease-in-out infinite; }
@keyframes ring { 0% { stroke-dashoffset: 85; stroke: #22c55e; } 35% { stroke-dashoffset: 50; stroke: #f59e0b; } 65% { stroke-dashoffset: 18; stroke: #f97316; } 85%, 100% { stroke-dashoffset: 4; stroke: #ef4444; } }
.d-dead .dtxt { position: absolute; left: 48%; top: 50%; transform: translateY(-50%); font-size: 14px; }
.d-dead .dtxt b { display: block; font-weight: 650; white-space: nowrap; } .d-dead .t1 { color: #22c55e; animation: t1 3.6s infinite; } .d-dead .t2 { position: absolute; left: 0; top: 0; color: #ef4444; opacity: 0; animation: t2 3.6s infinite; }
.d-dead .dtxt i { display: block; width: 70px; height: 4px; border-radius: 2px; background: #4a463c; margin-top: 8px; }
@keyframes t1 { 0%, 55% { opacity: 1; } 70%, 100% { opacity: 0; } } @keyframes t2 { 0%, 60% { opacity: 0; } 75%, 100% { opacity: 1; } }

/* 4 checklist: boxes tick one by one and the progress bar fills */
.d-check { padding: 20px 9% 0; }
.d-check .cr { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.d-check u { width: 14px; height: 14px; flex: none; border-radius: 4px; border: 1.6px solid #6b665a; position: relative; animation: tick 3.6s infinite; }
.d-check u::after { content: ""; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); animation: chk 3.6s infinite; }
.d-check i { flex: 1; height: 5px; border-radius: 3px; background: #4a463c; animation: strike 3.6s infinite; }
.d-check .cr:nth-child(1) * { animation-delay: -.6s; } .d-check .cr:nth-child(2) * { animation-delay: .1s; } .d-check .cr:nth-child(3) * { animation-delay: .8s; }
.d-check .cr:nth-child(3) i { width: 60%; flex: none; }
.d-check .prog { position: absolute; left: 9%; right: 9%; bottom: 14px; height: 5px; border-radius: 3px; background: #2e2b25; overflow: hidden; }
.d-check .prog span { display: block; height: 100%; width: 100%; transform-origin: left; background: var(--blue); animation: fill 3.6s infinite; }
@keyframes tick { 0%, 8% { background: transparent; border-color: #6b665a; } 16%, 88% { background: var(--blue-d); border-color: var(--blue-d); } 100% { background: transparent; border-color: #6b665a; } }
@keyframes chk { 0%, 8% { transform: rotate(45deg) scale(0); } 18%, 88% { transform: rotate(45deg) scale(1); } 100% { transform: rotate(45deg) scale(0); } }
@keyframes strike { 0%, 8% { opacity: 1; } 18%, 88% { opacity: .35; } 100% { opacity: 1; } }
@keyframes fill { 0% { transform: scaleX(0); } 12% { transform: scaleX(.34); } 46% { transform: scaleX(.67); } 76%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 5 video: the thumbnail zooms, the play button pulses and the progress runs */
.d-video .vid { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, #3b2a5e, #b0476b 60%, #e8a15d); box-shadow: 0 10px 24px rgba(0,0,0,.5); animation: zoom 3s ease-in-out infinite; }
.d-video .play { position: absolute; left: 50%; top: 50%; width: 38px; height: 27px; margin: -13px 0 0 -19px; border-radius: 8px; background: #ff0000; animation: pulse 1.5s ease-in-out infinite; }
.d-video .play::after { content: ""; position: absolute; left: 15px; top: 7px; border: solid transparent; border-width: 6.5px 0 6.5px 11px; border-left-color: #fff; }
.d-video .vbar { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); } .d-video .vbar i { display: block; height: 100%; width: 100%; border-radius: 2px; background: #ff3b3b; transform-origin: left; animation: fill 3s linear infinite; }
@keyframes zoom { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* 6 rich text: words become bold, a line is indented, lists appear */
.d-text { padding: 14px 9% 0; font-size: 13.5px; color: #d8d3c6; }
.d-text .tl { height: 25px; line-height: 25px; white-space: nowrap; }
.d-text .bold { animation: bld 3.4s infinite; } .d-text mark { color: inherit; border-radius: 3px; padding: 0 3px; background: transparent; animation: hl 3.4s infinite; }
.d-text .b { animation: ind 3.4s ease-in-out infinite; }
.d-text .mk { display: inline-block; width: 18px; color: var(--gold2); font-weight: 700; animation: mk 3.4s infinite; }
@keyframes bld { 0%, 12% { font-weight: 400; } 22%, 85% { font-weight: 800; color: #fff; } 100% { font-weight: 400; } }
@keyframes hl { 0%, 25% { background: transparent; } 38%, 85% { background: rgba(255,214,10,.45); } 100% { background: transparent; } }
@keyframes ind { 0%, 35% { transform: none; } 50%, 85% { transform: translateX(22px); } 100% { transform: none; } }
@keyframes mk { 0%, 50% { opacity: 0; transform: translateX(-6px); } 65%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 7 PDF: a selection is drawn, then a PDF page slides out */
.d-pdf .mn { width: 70px; } .d-pdf .n1 { left: 8%; top: 22px; } .d-pdf .n2 { left: 34%; top: 56px; } .d-pdf .n3 { left: 60%; top: 16px; opacity: .55; }
.d-pdf .selbox { position: absolute; left: 5%; top: 14px; width: 52%; height: 98px; border: 1.6px dashed var(--blue); border-radius: 8px; background: rgba(126,162,255,.08); opacity: 0; animation: sel 3.6s infinite; }
.d-pdf .sheet { position: absolute; right: 8%; bottom: -80px; width: 62px; height: 78px; border-radius: 6px; background: #f4f1e8; padding: 9px 8px; animation: sheet 3.6s ease-in-out infinite; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.d-pdf .sheet b { display: block; font-size: 11px; letter-spacing: .08em; color: #d23b3b; margin-bottom: 6px; } .d-pdf .sheet i { display: block; height: 3px; border-radius: 2px; background: #c9c4b4; margin-bottom: 5px; }
@keyframes sel { 0%, 8% { opacity: 0; transform: scale(.9); } 22%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes sheet { 0%, 40% { bottom: -80px; } 60%, 85% { bottom: 18px; } 100% { bottom: -80px; } }

/* 8 snap: a note drifts off the grid, then clicks into place with a pulse on the dot */
.d-snap { background: radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.7px) 8px 8px / 24px 24px, #171614; }
.d-snap .mn { left: 128px; top: 32px; animation: snapin 3.2s cubic-bezier(.3,1.5,.5,1) infinite; }
.d-snap .target { position: absolute; left: 128px; top: 32px; width: 74px; height: 38px; border-radius: 8px; border: 1.5px dashed var(--blue); opacity: 0; animation: tgt 3.2s infinite; }
@keyframes snapin { 0%, 30% { transform: translate(-70px, 40px) rotate(-5deg); } 55%, 100% { transform: none; } }
@keyframes tgt { 0%, 35% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* 9 canvases: stacked tiles fan out, the restore arrow turns */
.d-canv .tile { position: absolute; left: 50%; top: 50%; width: 96px; height: 62px; margin: -31px 0 0 -48px; border-radius: 9px; background: #2a2823; border: 1px solid #403c33; padding: 10px; box-shadow: 0 8px 18px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.d-canv .tile i { display: block; height: 4px; border-radius: 2px; background: #5a5548; margin-bottom: 6px; } .d-canv .tile i:nth-child(2) { width: 55%; }
.d-canv .t1 { transform: translateX(-14px) rotate(-5deg); } .d-canv .t2 { transform: translateX(14px) rotate(5deg); } .d-canv .t3 { transform: none; background: #34312a; }
.d-canv .t3 em { position: absolute; right: 8px; bottom: 5px; font-style: normal; font-size: 14px; color: var(--gold2); }
.feat:is(:hover, :focus-visible, .play) .d-canv .t1 { transform: translateX(-84px) rotate(-8deg); } .feat:is(:hover, :focus-visible, .play) .d-canv .t2 { transform: translateX(84px) rotate(8deg); }
.feat:is(:hover, :focus-visible, .play) .d-canv .t3 em { animation: spin 1.4s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(-360deg); } }

/* 10 smart select: Alt + click picks the note on top, then the next one below, then the next; the list on the right follows */
.d-smart .mn { width: 96px; }
.d-smart .s1 { left: 12%; top: 20px; z-index: 1; } .d-smart .s2 { left: 22%; top: 40px; z-index: 2; background: #302d27; } .d-smart .s3 { left: 32%; top: 60px; z-index: 3; background: #37342d; }
.d-smart .ring { position: absolute; z-index: 4; width: 102px; height: 38px; box-sizing: border-box; border: 2px solid var(--blue); border-radius: 10px; box-shadow: 0 0 0 3px rgba(126,162,255,.18), 0 0 16px rgba(126,162,255,.35);
  left: calc(32% - 3px); top: 57px; animation: smring 4.5s ease-in-out infinite; }
.d-smart .cur { position: absolute; z-index: 5; left: 44%; top: 74px; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: smclick 4.5s infinite; }
.d-smart .altkey { position: absolute; z-index: 5; right: 12px; top: 10px; font: 600 11px/1 inherit; font-family: inherit; color: var(--gold2); background: #2a2823; border: 1px solid #4a463c; border-bottom-width: 3px; border-radius: 6px; padding: 4px 8px; }
.d-smart .lst { position: absolute; z-index: 5; right: 12px; top: 42px; width: 66px; padding: 5px; border-radius: 8px; background: rgba(10,10,9,.78); border: 1px solid #3a372f; }
.d-smart .lst i { display: block; height: 9px; border-radius: 4px; background: #3a372f; margin-bottom: 5px; } .d-smart .lst i:last-child { margin: 0; }
.d-smart .lst i:nth-child(1) { animation: smr1 4.5s infinite; } .d-smart .lst i:nth-child(2) { animation: smr2 4.5s infinite; } .d-smart .lst i:nth-child(3) { animation: smr3 4.5s infinite; }
@keyframes smring { 0%, 28% { left: calc(32% - 3px); top: 57px; } 36%, 61% { left: calc(22% - 3px); top: 37px; } 69%, 94% { left: calc(12% - 3px); top: 17px; } 100% { left: calc(32% - 3px); top: 57px; } }
@keyframes smclick { 0%, 33.3%, 66.6% { box-shadow: 0 0 0 0 rgba(126,162,255,.85); } 14%, 47%, 80% { box-shadow: 0 0 0 16px rgba(126,162,255,0); } 100% { box-shadow: 0 0 0 0 rgba(126,162,255,0); } }
@keyframes smr1 { 0%, 30% { background: var(--blue); } 34%, 100% { background: #3a372f; } }
@keyframes smr2 { 0%, 30% { background: #3a372f; } 34%, 63% { background: var(--blue); } 67%, 100% { background: #3a372f; } }
@keyframes smr3 { 0%, 63% { background: #3a372f; } 67%, 96% { background: var(--blue); } 100% { background: #3a372f; } }

/* With 3 columns the 10th card would sit alone on the last row, so it takes the whole row (its demo is centred, so it still looks right) */
@media (min-width: 940px) { .grid > .feat:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }

/* The animations wait paused until you hover. A negative delay makes them wait on a nice-looking frame (not on an empty one). */
.d-draw .pen { animation-delay: -1.8s; } .d-draw .cir { animation-delay: -1.9s; } .d-draw .hi { animation-delay: -1.6s; }
.d-dead .bar, .d-dead .t1, .d-dead .t2 { animation-delay: -1.2s; }
.d-check .prog span { animation-delay: -.6s; }
.d-video .vbar i { animation-delay: -1.4s; }
.d-text .bold, .d-text mark, .d-text .b, .d-text .mk { animation-delay: -2.4s; }
.d-pdf .selbox, .d-pdf .sheet { animation-delay: -2.5s; }
.d-snap .mn, .d-snap .target { animation-delay: -2s; }
.d-smart .ring, .d-smart .cur, .d-smart .lst i { animation-delay: -.5s; }

/* 11 live collaboration: dark notes as before; the cursors are real arrows with a name label (like in the app) */
.d-collab .mn.c1 { left: 10%; top: 22px; width: 84px; } .d-collab .mn.c2 { left: 52%; top: 62px; width: 90px; }
.d-collab .c2 .typing { display: block; height: 4px; width: 0; margin-top: 5px; border-radius: 2px; background: #7ea2ff; animation: typeline 3.4s steps(8, end) infinite; }
.d-collab .c1 { animation: drift 3.4s ease-in-out infinite; --dx: 36px; --dy: 18px; --r: 2deg; }
.d-collab .rcur { position: absolute; z-index: 4; display: block; width: 14px; height: 18px; --c: #f2b84b; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.d-collab .rcur svg { display: block; width: 14px; height: 18px; fill: var(--c); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.d-collab .rcur b { position: absolute; left: 12px; top: 14px; font: 600 10px/1 "Inter", sans-serif; color: #121110; background: var(--c); padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.d-collab .ca { --c: #f2b84b; left: 20%; top: 40px; animation: curA 3.4s ease-in-out infinite; }
.d-collab .cb { --c: #6fd0a0; left: 70%; top: 96px; animation: curB 3.4s ease-in-out infinite; }
@keyframes curA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(52px, 22px); } }
@keyframes curB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, -26px); } }
@keyframes typeline { 0%, 10% { width: 0; } 60%, 90% { width: 70%; } 100% { width: 0; } }

/* 12 stacked items: notes overlap, the list shows them all and one jumps to the front */
.d-stack .mn { width: 70px; }
.d-stack .k1 { left: 12%; top: 26px; background: #2f2c25; } .d-stack .k2 { left: 19%; top: 38px; background: #34302a; } .d-stack .k3 { left: 26%; top: 50px; background: #3a362f; }
.d-stack .k1 { animation: tofront 3.6s ease-in-out infinite; }
.d-stack .pick { position: absolute; right: 9%; top: 18px; width: 40%; padding: 8px; border-radius: 10px; background: #26241f; border: 1px solid #403c33; box-shadow: 0 10px 22px rgba(0,0,0,.5); display: grid; gap: 6px; animation: pickin 3.6s ease-in-out infinite; }
.d-stack .pick .r { display: block; height: 14px; border-radius: 5px; background: #3a362f; position: relative; }
.d-stack .pick .r::after { content: ""; position: absolute; left: 7px; top: 5px; height: 4px; width: 50%; border-radius: 2px; background: #6d685a; }
.d-stack .pick .r3 { animation: rowup 3.6s ease-in-out infinite; background: #34508f; }
@keyframes pickin { 0%, 12% { opacity: 0; transform: translateY(8px) scale(.95); } 25%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(8px) scale(.95); } }
@keyframes rowup { 0%, 35% { transform: none; } 55%, 78% { transform: translateY(-40px); } 100% { transform: none; } }
@keyframes tofront { 0%, 45% { z-index: 1; transform: none; } 60%, 80% { z-index: 6; transform: translate(26px, 10px) rotate(-3deg); } 100% { z-index: 1; transform: none; } }
.d-collab .c1, .d-collab .typing, .d-stack .k1, .d-stack .pick, .d-stack .r3 { animation-delay: -1.6s; }
/* the cursors start (and wait) at their starting points, far from each other */
.d-collab .rcur, .d-collab .c1 { animation-delay: 0s; }

/* PLAY / PAUSE. Written last and with !important because the 'animation' shorthand above would otherwise reset it. */
.feat .demo, .feat .demo * { animation-play-state: paused !important; }
.feat:is(:hover, :focus-visible, .play) .demo, .feat:is(:hover, :focus-visible, .play) .demo * { animation-play-state: running !important; }

/* people who prefer less motion: show the cards still */
@media (prefers-reduced-motion: reduce) { .demo, .demo * { animation: none !important; transition: none !important; } .feat:is(:hover, :focus-visible, .play) { transform: none; } .d-notes .n4 { opacity: 1; transform: none; } .d-draw .hi { transform: none; } }
@media (max-width: 480px) { .demo { margin: -6px -6px 18px; } }

/* ===== Added for the professional pages: legal text, account, FAQ, comparison table, footer ===== */
.narrow { max-width: 760px; } .center { text-align: center; } .muted { color: var(--muted); }
.eyebrow { color: var(--muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 44px 0 0; }

/* legal / long text pages */
.doc { max-width: 760px; padding-bottom: 80px; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -.03em; margin: 8px 0 16px; line-height: 1.1; }
.doc h2 { font-size: 21px; margin: 38px 0 10px; letter-spacing: -.01em; text-align: left; }
.doc p, .doc li { color: #d6d2c6; font-size: 16px; }
.doc .lead { font-size: 18px; color: var(--text); }
.doc ul { padding-left: 22px; display: grid; gap: 8px; }
.doc a { color: var(--blue); }
.doc code { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 14px; }
.tbl { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.tbl.kv td:first-child { color: var(--muted); width: 38%; }
.contact-card { display: grid; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin: 18px 0; }
.contact-card .k { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.contact-card .big { font-size: 22px; font-weight: 600; }

/* footer (shared) */
.foot { align-items: center; }
.foot-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-main .wm { font-size: 14px; }
.foot-links { display: flex; gap: 6px 18px; flex-wrap: wrap; position: static; border: 0; background: none; backdrop-filter: none; }  /* the global nav rule (sticky bar with a bottom line) must not apply to the footer links */
.foot-links a { color: var(--muted); text-decoration: none; } .foot-links a:hover { color: var(--text); }

/* auth extras */
.auth .forgot { justify-self: end; font-size: 13.5px; color: var(--blue); margin-top: -6px; }
.auth .auth-legal { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 16px; }
.auth .auth-legal a { color: var(--muted); }
.auth .check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); }
.auth .check input { width: 18px; height: 18px; margin-top: 2px; flex: none; padding: 0; accent-color: var(--blue-d); }
.auth .check a { color: var(--blue); }
.auth .subline, .subline { color: var(--muted); font-size: 15px; margin: 0 0 4px; }
.auth .hint, .hint { color: var(--muted); font-size: 13px; }
.auth .sent { text-align: center; display: grid; gap: 10px; justify-items: center; }
.auth .tick { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(126,162,255,.15); color: var(--blue); font-size: 24px; }
.auth .bigcode { font-size: 28px; letter-spacing: .1em; }
.auth .okmsg, .okmsg { color: #7fd6a0; font-size: 14px; }

/* account page */
[hidden] { display: none !important; }
body.acctpage main { padding-top: 44px; padding-bottom: 80px; }
.err { color: #ff8a7a; font-size: 14px; min-height: 0; }
.pagetitle { font-size: 32px; letter-spacing: -.03em; margin: 0 0 24px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-bottom: 18px; display: grid; gap: 14px; }
.panel h2 { font-size: 18px; margin: 0; text-align: left; }
.panel p { margin: 0; color: var(--muted); font-size: 15px; }
.panel.danger { border-color: rgba(255,120,100,.35); }
.panel label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.panel input { font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.panel input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(126,162,255,.2); }
.rowline { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rowline:last-child { border-bottom: 0; } .rowline .k { color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.note { color: var(--muted); font-size: 13.5px; }
.stack { display: grid; gap: 12px; }
.btn.dangerbtn { background: #b3352a; border-color: transparent; color: #fff; } .btn.dangerbtn:hover { background: #c9402f; }

/* landing extras */
.toggle .save { font-size: 11.5px; font-weight: 700; color: #1a1305; background: linear-gradient(100deg, var(--gold2), var(--gold1)); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.fine { color: var(--muted); text-align: center; font-size: 13.5px; margin: 22px 0 0; } .fine a { color: var(--blue); }
.cmp-wrap { max-width: 800px; margin: 44px auto 0; overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: #d6d2c6; }
.cmp th { font-size: 14px; color: var(--muted); } .cmp th.pro { color: var(--gold2); }
.cmp td.y { color: var(--blue); font-weight: 700; } .cmp td.n { color: #55524a; }
.trust { padding: 44px 0; }
.trustrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.trustrow li { display: grid; gap: 2px; } .trustrow b { font-size: 16px; } .trustrow span { color: var(--muted); font-size: 14px; }
.faq { display: grid; gap: 10px; margin-top: 30px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 20px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--muted); } .faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.faq a { color: var(--blue); }
@media (max-width: 480px) { .foot-main { justify-content: center; } .foot-links { justify-content: center; } }

/* ===== Mobile polish (landing, pages, account, legal) ===== */
@media (max-width: 820px) {
  .doc h1 { font-size: 30px; } .doc h2 { font-size: 19px; margin-top: 30px; }
  .tbl { display: block; overflow-x: auto; }
  .plans { max-width: 480px; }
  .cmp th, .cmp td { padding: 10px 8px; font-size: 14px; }
  .panel { padding: 20px 18px; }
  .pagetitle { font-size: 26px; }
  .trust { padding: 28px 0; }
  .hero .cta .btn { width: 100%; }
}
@media (max-width: 480px) {
  nav .links a:not(.btn):not(#navLogin) { display: none; }   /* keep Log in + Start free, hide the rest */
  .acctpage nav .links a { display: inline !important; font-size: 13.5px; }
  .hero { padding: 40px 0 28px; }
  .hero h1 { font-size: 36px; }
  .auth { padding: 16px; align-items: start; padding-top: 6vh; }
  .auth .top .wm { font-size: 20px; }
  .contact-card { padding: 18px; } .contact-card .big { font-size: 18px; word-break: break-all; }
  .actions .btn { flex: 1 1 100%; }
  .faq details { padding: 2px 16px; }
  .cmp-wrap { margin-top: 32px; }
}

/* plenty more (REMOVED FOR NOW: remove the comment markers around this block to use it again with the block in pages/index.html)
.more { margin-top: 44px; text-align: center; }
.more h3 { font-size: 20px; margin: 0 0 16px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips li { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; color: #d6d2c6; }
*/

/* quiet header buttons (account page): same size, subtle border, light hover */
nav .links .btn.quiet { padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 10px; color: var(--muted); border-color: transparent; background: transparent; }
nav .links .btn.quiet:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.04); transform: none; }
nav .links .btn.quiet#logout { color: var(--text); border-color: var(--line); }
nav .links:has(.btn.quiet) { gap: 8px; }

/* contact form */
.cform { display: grid; gap: 16px; margin: 22px 0 8px; }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.cform input, .cform select, .cform textarea { font: inherit; font-size: 16px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; }
.cform textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(126,162,255,.2); }
.cform .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform .btn { justify-self: start; }
.sentbox { display: flex; align-items: center; gap: 16px; }
.sentbox .tick { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(126,162,255,.15); color: var(--blue); font-size: 22px; }
@media (max-width: 560px) { .cform .two { grid-template-columns: 1fr; } .cform .btn { justify-self: stretch; } }

/* ===== Footer on phones: simple and clean. Brand + copyright centered, links in two centered rows of three, no boxes ===== */
@media (max-width: 640px) {
  footer { padding: 32px 0 36px; }
  footer .wrap.foot { gap: 18px; }
  .foot-main { flex-direction: column; gap: 8px; text-align: center; justify-content: center; }
  .foot-main > span { font-size: 13px; }
  .foot-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 14px 28px; }
  .foot-links a { font-size: 14px; padding: 4px 0; white-space: nowrap; border: 0; }
}

/* ===== Account header buttons: a soft pill for the main link, a quiet text button for Log out.
   The default white browser outline is replaced by a thin gold ring that only shows for keyboard users. ===== */
nav .links .btn.soft, nav .links .btn.ghost { padding: 9px 18px; font-size: 14px; font-weight: 500; border-radius: 999px; transform: none; }
nav .links .btn.soft { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--text); }
nav .links .btn.soft svg { width: 16px; height: 16px; fill: none; stroke: #e8cb8c; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
nav .links .btn.soft:hover { background: rgba(232,203,140,.10); border-color: rgba(232,203,140,.45); }
/* "Back to canvases": a quiet, neutral return button (grey, no gold). The arrow slides a little to the left when you point at it. */
nav .links .btn.soft.back { gap: 8px; padding: 8px 16px 8px 12px; color: var(--muted); background: transparent; border: 1px solid var(--line); font-weight: 500;
  transition: color .15s, background .15s, border-color .15s; }
nav .links .btn.soft.back svg { stroke: currentColor; stroke-linecap: round; stroke-width: 1.9; transition: transform .18s ease; }
nav .links .btn.soft.back:hover { color: var(--text); background: rgba(255,255,255,.05); border-color: #5a574d; }
nav .links .btn.soft.back:hover svg { transform: translateX(-3px); }
nav .links .btn.soft.back:focus-visible { outline: 2px solid rgba(255,255,255,.35); outline-offset: 3px; }
nav .links .btn.ghost { background: transparent; border: 1px solid transparent; color: var(--muted); }
nav .links .btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
nav .links .btn.soft:focus, nav .links .btn.ghost:focus { outline: none; }
nav .links .btn.soft:focus-visible, nav .links .btn.ghost:focus-visible { outline: 2px solid rgba(232,203,140,.75); outline-offset: 3px; }
@media (max-width: 480px) { nav .links .btn.soft, nav .links .btn.ghost { padding: 8px 14px; font-size: 13.5px; } nav .links .btn.soft svg { display: none; } }

/* account page: a checkbox with its text on one line (deadline reminders) */
.panel label.switchrow { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; cursor: pointer; }
.panel label.switchrow input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.panel label.switchrow:has(input:disabled) { opacity: .5; cursor: not-allowed; }   /* locked (Free plan) switches */
.panel label.switchrow input:disabled { cursor: not-allowed; }

/* ---- Zones demo (feature card "Zones that keep track for you") ----
   A zone with a title and a counter; the notes inside get ticked one by one, the counter counts up and the bar fills. */
.d-zone .zn { position: absolute; left: 9%; right: 9%; top: 14px; bottom: 14px; border-radius: 10px; border: 1.5px solid #8a6a2c; background: rgba(201,164,90,.07); padding: 9px 10px; animation: zbord 4s infinite; }
.d-zone .zh { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.d-zone .zc { position: relative; width: 44px; height: 13px; font-style: normal; font-weight: 600; color: var(--muted); }
.d-zone .zc em { position: absolute; right: 0; top: 0; font-style: normal; opacity: 0; animation: zcnt 4s infinite; white-space: nowrap; }
.d-zone .zc .c1 { animation-delay: 0s; } .d-zone .zc .c2 { animation-name: zcnt2; } .d-zone .zc .c3 { animation-name: zcnt3; }
.d-zone .zp { height: 4px; border-radius: 2px; background: #2e2b25; overflow: hidden; margin-bottom: 9px; }
.d-zone .zp span { display: block; height: 100%; width: 100%; transform-origin: left; background: #3aa86a; animation: zfill 4s infinite; }
.d-zone .zr { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.d-zone .zr u { width: 12px; height: 12px; flex: none; border-radius: 4px; border: 1.5px solid #6b665a; position: relative; animation: ztick 4s infinite; }
.d-zone .zr i { flex: 1; height: 5px; border-radius: 3px; background: #4a463c; }
.d-zone .zr:nth-of-type(1) u { --d: 0s; } .d-zone .zr:nth-of-type(2) u { animation-name: ztick2; } .d-zone .zr:nth-of-type(3) u { animation-name: ztick3; }
.d-zone .zr:nth-of-type(3) i { width: 55%; flex: none; }
@keyframes zcnt  { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes zcnt2 { 0%, 30% { opacity: 0; } 36%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes zcnt3 { 0%, 64% { opacity: 0; } 70%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes zfill { 0%, 28% { transform: scaleX(.33); } 36%, 62% { transform: scaleX(.66); } 70%, 92% { transform: scaleX(1); } 98%, 100% { transform: scaleX(.33); } }
@keyframes ztick  { 0%, 8% { background: transparent; border-color: #6b665a; } 14%, 92% { background: #3aa86a; border-color: #3aa86a; } 98%, 100% { background: transparent; border-color: #6b665a; } }
@keyframes ztick2 { 0%, 34% { background: transparent; border-color: #6b665a; } 40%, 92% { background: #3aa86a; border-color: #3aa86a; } 98%, 100% { background: transparent; border-color: #6b665a; } }
@keyframes ztick3 { 0%, 66% { background: transparent; border-color: #6b665a; } 72%, 92% { background: #3aa86a; border-color: #3aa86a; } 98%, 100% { background: transparent; border-color: #6b665a; } }
@keyframes zbord  { 0%, 66% { border-color: #8a6a2c; } 72%, 92% { border-color: #3aa86a; } 98%, 100% { border-color: #8a6a2c; } }

/* ---------- LIGHT THEME (chosen on the account page, or the browser is set to light) ---------- */
  :root[data-theme="light"] { --bg:#f6f4ef; --bg2:#efece4; --card:#ffffff; --line:#e3dfd3; --text:#1f1d19; --muted:#6f6a5c;
  --gold1:#8a6420; --gold2:#c9a45a; --gold3:#8a6420; --blue:#2f64e0; --blue-d:#2f64e0; color-scheme: light; }
  :root[data-theme="light"] nav { background: rgba(246,244,239,.82); border-bottom-color: rgba(0,0,0,.08); }
  :root[data-theme="light"] .btn:hover { border-color: #b9b3a2; }
  :root[data-theme="light"] .toggle button.on { color: #fff; }
  :root[data-theme="light"] .doc p, :root[data-theme="light"] .doc li, :root[data-theme="light"] .cmp th:first-child, :root[data-theme="light"] .cmp td:first-child { color: #3a372f; }
  :root[data-theme="light"] .cmp td.n, :root[data-theme="light"] .plan li.off::before { color: #b9b3a2; border-color: #b9b3a2; }
  :root[data-theme="light"] .err, :root[data-theme="light"] .auth .err { color: #c92a2a; }
  :root[data-theme="light"] .okmsg, :root[data-theme="light"] .auth .okmsg { color: #1f8a4c; }
  :root[data-theme="light"] .pw button:hover { background: rgba(0,0,0,.06); }
  :root[data-theme="light"] .feat:is(:hover, :focus-visible, .play) { border-color: #c9b98e; box-shadow: 0 20px 44px -24px rgba(0,0,0,.25); }
  :root[data-theme="light"] .video { box-shadow: 0 40px 90px -40px rgba(0,0,0,.4); }
  :root[data-theme="light"] .auth input:focus, :root[data-theme="light"] .panel input:focus { box-shadow: 0 0 0 3px rgba(47,100,224,.18); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg:#f6f4ef; --bg2:#efece4; --card:#ffffff; --line:#e3dfd3; --text:#1f1d19; --muted:#6f6a5c;
  --gold1:#8a6420; --gold2:#c9a45a; --gold3:#8a6420; --blue:#2f64e0; --blue-d:#2f64e0; color-scheme: light; }
  :root:not([data-theme="dark"]) nav { background: rgba(246,244,239,.82); border-bottom-color: rgba(0,0,0,.08); }
  :root:not([data-theme="dark"]) .btn:hover { border-color: #b9b3a2; }
  :root:not([data-theme="dark"]) .toggle button.on { color: #fff; }
  :root:not([data-theme="dark"]) .doc p, :root:not([data-theme="dark"]) .doc li, :root:not([data-theme="dark"]) .cmp th:first-child, :root:not([data-theme="dark"]) .cmp td:first-child { color: #3a372f; }
  :root:not([data-theme="dark"]) .cmp td.n, :root:not([data-theme="dark"]) .plan li.off::before { color: #b9b3a2; border-color: #b9b3a2; }
  :root:not([data-theme="dark"]) .err, :root:not([data-theme="dark"]) .auth .err { color: #c92a2a; }
  :root:not([data-theme="dark"]) .okmsg, :root:not([data-theme="dark"]) .auth .okmsg { color: #1f8a4c; }
  :root:not([data-theme="dark"]) .pw button:hover { background: rgba(0,0,0,.06); }
  :root:not([data-theme="dark"]) .feat:is(:hover, :focus-visible, .play) { border-color: #c9b98e; box-shadow: 0 20px 44px -24px rgba(0,0,0,.25); }
  :root:not([data-theme="dark"]) .video { box-shadow: 0 40px 90px -40px rgba(0,0,0,.4); }
  :root:not([data-theme="dark"]) .auth input:focus, :root:not([data-theme="dark"]) .panel input:focus { box-shadow: 0 0 0 3px rgba(47,100,224,.18); }
}
/* theme choice on the account page: three buttons in a row */
.themeopts { display: flex; gap: 8px; flex-wrap: wrap; }
.themeopts button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.themeopts button:hover { color: var(--text); border-color: var(--muted); }
.themeopts button.on { color: var(--text); border-color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.themeopts svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* phone: a slightly taller "Start free" button in the top bar (everything else in the bar is as before) */
@media (max-width: 480px) { nav .links .btn { padding: 9px 16px; font-size: 15px; } }
@media (max-width: 480px) { nav .links .btn { white-space: nowrap; } }
@media (max-width: 340px) { nav .links .btn { padding: 9px 12px; font-size: 14px; } nav .links { gap: 8px; } }   /* very narrow phones: keeps the button on one line */

/* account page: the top bar is a black band with a gold line under it (same as the canvases screen).
   The colour variables are set again inside the bar, so the logo and the buttons turn light in the light theme too. */
html:root body.acctpage > nav:not(.foot-links) { background: #151413; /* the gold line under the bar: a full-width gold gradient, dark at the edges and light in the middle (change the colours here) */ border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #8a6420 0%, #c9a45a 25%, #f3dca0 50%, #c9a45a 75%, #8a6420 100%) 1; backdrop-filter: none;
  --text: #f1ede2; --muted: #9a968a; --line: #34322c; --card: #201f1c; --gold1: #a97f35; --gold2: #e8cb8c; --gold3: #b08a3e; color: var(--text); }

/* account page top bar: the buttons look exactly like the ones on the canvases screen (quiet pills, 13.5px) */
html:root body.acctpage > nav .links { gap: 10px; }
html:root body.acctpage > nav .links .btn { font: inherit; font-size: 13.5px; font-weight: 500; padding: 7px 15px; border-radius: 99px; border: 1px solid transparent; background: transparent; color: var(--muted); transform: none; white-space: nowrap; }
html:root body.acctpage > nav .links .btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; }
html:root body.acctpage > nav .links .btn.soft.back { gap: 8px; padding: 7px 15px 7px 11px; }
html:root body.acctpage > nav .links .btn.soft svg { width: 15px; height: 15px; }
/* both screens always keep room for the scroll bar, so the logo and buttons sit at exactly the same place whether or not the page is long enough to scroll */
html:has(body.acctpage) { scrollbar-gutter: stable; }