/* The two button designs, for the landing page and the sign-in window. Chosen on 2026-10-04
   from design/brand/Redesign/buttons/. The planner's .btn (styles/components.css) draws the
   same two designs and takes its colours from the --btn-* and --glass-* tokens here.
   .rd-btn         the shape: 8px radius, Inter semibold, an optional arrow (.ico)
   .rd-btn-dots    main actions ("Start / Resume your budget", "Email me a code"): a glowing
                   gradient with specks of light floating up through it (.rd-points)
   .rd-btn-glass   everything else (the tour's Next, Back, Cancel): a clear pill with a light
                   on its rim and a shine (.rd-shine) that slides across on hover. No text
                   shadow: it made the label hard to read on white. */
.rd-btn .ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd-btn:disabled{opacity:.55;cursor:default}
@media(prefers-reduced-motion:no-preference){.rd-btn{transition:background .2s,translate .2s}}
.rd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.9rem;padding:.7rem 1.25rem;border-radius:.6rem;border:0;
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.rd-btn .ico{font-size:1.05rem;stroke-width:2}

/* ============================== THE TWO BUTTON STYLES ==============================
   Chosen on 2026-10-04 from the designs in design/brand/Redesign/buttons/, recoloured per
   theme:
     .rd-btn-dots   "Start / Resume your budget" (the hero and the finish panel): a glowing
                    gradient with specks of light floating up through it.
     .rd-btn-glass  the tour's Next: a clear pill with a light running round its rim and
                    a shine that slides across on hover; "edge-lit" since 2026-10-10 (the
                    --glass-* tokens below). No text shadow: it was hard to read on white. */
:root{--btn-base:#fd6703;--btn-glow:rgba(255,214,102,.85);--btn-ink:#111827}
:root[data-theme=dark]{--btn-base:#0369a1;--btn-glow:rgba(34,211,238,.8);--btn-ink:#ffffff}
/* Glass (chosen 2026-10-10, "edge-lit"): almost clear, with a light running round the rim in
   the theme's accent (brand orange on light, sky blue on dark) and a faint glow of it on
   hover. The planner's .btn (components.css) uses the same tokens. */
:root{--glass-ink:#111827;--glass-fill:rgba(255,255,255,.4);--glass-hover-fill:rgba(253,103,3,.06);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 .3em .7em -.35em rgba(194,65,12,.28);
  --glass-hover-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 1.1em -.2em rgba(253,103,3,.45);
  --glass-rim-peak:rgba(253,103,3,.9);--glass-rim-mid:rgba(253,103,3,.75);--glass-rim-low:rgba(253,103,3,.14);
  --glass-shine:rgba(255,255,255,.75);--glass-shine-blend:screen}
:root[data-theme=dark]{--glass-ink:#e0f2fe;--glass-fill:rgba(255,255,255,.035);--glass-hover-fill:rgba(125,211,252,.08);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 .3em .7em -.3em rgba(0,0,0,.7);
  --glass-hover-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 1.1em -.2em rgba(125,211,252,.45);
  --glass-rim-peak:rgba(125,211,252,.85);--glass-rim-mid:rgba(125,211,252,.7);--glass-rim-low:rgba(125,211,252,.12);
  --glass-shine:rgba(125,211,252,.16);--glass-shine-blend:normal}
.rd-btn-dots,.rd-btn-glass{position:relative;isolation:isolate}
.rd-btn-dots>span:not(.rd-points),.rd-btn-dots>.ico,.rd-btn-glass>span:not(.rd-shine),.rd-btn-glass>.ico{position:relative;z-index:2}

/* Floating dots */
.rd-btn-dots{overflow:hidden;border-radius:.75rem;color:var(--btn-ink);
  background:radial-gradient(65.28% 65.28% at 50% 100%,var(--btn-glow) 0%,transparent 100%),var(--btn-base);transition:transform .25s ease}
.rd-btn-dots::before{content:"";position:absolute;inset:1px;z-index:0;border-radius:calc(.75rem - 1px);
  background:linear-gradient(177.95deg,rgba(255,255,255,.19) 0%,rgba(255,255,255,0) 100%)}
.rd-btn-dots:active{transform:scale(.95)}
.rd-points{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.rd-points i{position:absolute;bottom:-10px;width:2px;height:2px;border-radius:9999px;background:#fff;animation:rd-float infinite ease-in-out}
.rd-points i:nth-child(1){left:10%;opacity:1;animation-duration:2.35s;animation-delay:.2s}
.rd-points i:nth-child(2){left:30%;opacity:.7;animation-duration:2.5s;animation-delay:.5s}
.rd-points i:nth-child(3){left:25%;opacity:.8;animation-duration:2.2s;animation-delay:.1s}
.rd-points i:nth-child(4){left:44%;opacity:.6;animation-duration:2.05s}
.rd-points i:nth-child(5){left:50%;opacity:1;animation-duration:1.9s}
.rd-points i:nth-child(6){left:75%;opacity:.5;animation-duration:1.5s;animation-delay:1.5s}
.rd-points i:nth-child(7){left:88%;opacity:.9;animation-duration:2.2s;animation-delay:.2s}
.rd-points i:nth-child(8){left:58%;opacity:.8;animation-duration:2.25s}
.rd-points i:nth-child(9){left:98%;opacity:.6;animation-duration:2.6s;animation-delay:.1s}
.rd-points i:nth-child(10){left:65%;opacity:1;animation-duration:2.5s;animation-delay:.2s}
@keyframes rd-float{0%{transform:translateY(0)}85%{opacity:0}100%{transform:translateY(-55px);opacity:0}}
.rd-btn-dots .ico{transition:transform .3s ease}
.rd-btn-dots:hover .ico{transform:translateX(2px);animation:rd-dash .8s linear forwards}
@keyframes rd-dash{0%{stroke-dasharray:0,20;stroke-dashoffset:0}50%{stroke-dasharray:10,10;stroke-dashoffset:-5}100%{stroke-dasharray:20,0;stroke-dashoffset:-10}}

/* Glass */
@property --rd-angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}
@property --rd-angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}
.rd-btn-glass{border-radius:999px;color:var(--glass-ink);font-weight:500;padding:.6rem 1.2rem;
  background:var(--glass-fill);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:all 400ms cubic-bezier(.25,1,.5,1)}
.rd-btn-glass:hover{transform:scale(.975);background:var(--glass-hover-fill);box-shadow:var(--glass-hover-shadow)}
.rd-btn-glass:active{transform:scale(.95)}
.rd-btn-glass::after{content:"";position:absolute;inset:-1px;z-index:1;border-radius:999px;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--rd-angle-1) at 50% 50%,var(--glass-rim-peak),var(--glass-rim-low) 8% 42%,var(--glass-rim-mid) 50%,var(--glass-rim-low) 58% 92%,var(--glass-rim-peak));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  transition:all 400ms cubic-bezier(.25,1,.5,1),--rd-angle-1 500ms ease}
.rd-btn-glass:hover::after{--rd-angle-1:-125deg}
.rd-shine{position:absolute;inset:.5px;z-index:1;border-radius:999px;pointer-events:none;mix-blend-mode:var(--glass-shine-blend);
  background:linear-gradient(var(--rd-angle-2),transparent 0%,var(--glass-shine) 40% 50%,transparent 55%);background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;
  transition:background-position 500ms cubic-bezier(.25,1,.5,1),--rd-angle-2 500ms cubic-bezier(.25,1,.5,1)}
.rd-btn-glass:hover .rd-shine{background-position:25% 50%}
.rd-btn-glass:active .rd-shine{background-position:50% 15%;--rd-angle-2:-15deg}
/* When a step is done, Next's rim light runs round it twice to say "this way". */
@keyframes rd-rim{from{--rd-angle-1:-75deg}to{--rd-angle-1:285deg}}
@media(prefers-reduced-motion:no-preference){.tour-next.is-ready::after{animation:rd-rim 1.4s cubic-bezier(.45,.05,.35,1) 2}}
@media(prefers-reduced-motion:reduce){.rd-points i{animation:none;opacity:0}}
/* Neither design lifts on hover (the page's general .rd-btn lift); glass shrinks instead. */
.rd-btn.rd-btn-dots:hover,.rd-btn.rd-btn-glass:hover{translate:none}