/* nikah design system: calm lilac, one gold thread, cursive only where it is large */
:root{
  --mist:#f7f3fb;--veil:#fdfbff;--petal:#ebe1f7;--wisteria:#c9b3e6;--orchid:#7b5cb8;--orchid-dark:#5f4396;
  --ink:#2f2744;--ink-soft:#655b7e;--line:#ddd0ee;--thread:#b8975a;--ok:#2f7a4f;--bad:#a23b3b;
  --lilac-50:var(--mist);--lilac-100:var(--petal);--lilac-300:var(--wisteria);--lilac-600:var(--orchid);
  --r-card:1.5rem;--r-field:.75rem;--r-badge:.5rem;--gap:1rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--mist);color:var(--ink);font-family:'Nunito Sans',system-ui,sans-serif;font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto}
a{color:var(--orchid-dark)}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:600}
h2{font-size:1.65rem}h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:65ch}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:50}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--wisteria);outline-offset:3px}

/* layout */
.shell{flex:1;display:grid;place-items:center;padding:2rem 1.25rem}
.wrap{width:100%;max-width:64rem;margin:0 auto;padding:2rem 1.25rem}
.narrow{max-width:34rem}
.stack>*+*{margin-top:var(--gap)}
.cluster{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.hero{max-width:34rem;text-align:center}
.script{font-family:'Pinyon Script',cursive;font-weight:400;font-size:clamp(3.5rem,16vw,7rem);margin:0;color:var(--orchid);line-height:1.1}
.script-sm{font-family:'Pinyon Script',cursive;font-weight:400;font-size:2.25rem;color:var(--orchid);line-height:1.2}
.lead{font-size:1.2rem;margin:1rem auto .5rem}
.soft{color:var(--ink-soft);margin:0}

/* buttons */
.btn{display:inline-block;padding:.7rem 1.5rem;border:1px solid var(--orchid);border-radius:999px;background:var(--orchid);color:#fff;text-decoration:none;font:inherit;font-weight:600;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--orchid-dark)}
.btn-ghost{background:transparent;color:var(--orchid-dark)}
.btn-ghost:hover{background:var(--petal)}
.btn-small{padding:.4rem 1rem;font-size:.95rem}
.hero .btn{margin-top:1.5rem}

/* forms */
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.3rem}
.field .help{font-size:.9rem;color:var(--ink-soft);margin:.25rem 0 0}
.field .error{font-size:.9rem;color:var(--bad);margin:.25rem 0 0}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],select,textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--wisteria);border-radius:var(--r-field);background:#fff;color:var(--ink);font:inherit}
textarea{min-height:7rem;resize:vertical}

/* surfaces */
.card{background:var(--veil);border:1px solid var(--line);border-radius:var(--r-card);padding:1.5rem}
.card-quiet{background:var(--petal);border-radius:var(--r-card);padding:1.5rem}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:var(--r-badge);font-size:.85rem;font-weight:600;border:1px solid var(--line);background:var(--veil)}
.badge-required{background:var(--orchid);border-color:var(--orchid);color:#fff}
.badge-practiced{background:var(--petal);border-color:var(--wisteria);color:var(--orchid-dark)}
.badge-fading{background:transparent;border-style:dashed;border-color:var(--ink-soft);color:var(--ink-soft)}
.flash,.note{padding:.8rem 1rem;text-align:center;background:var(--petal)}
.flash-error{background:#fbeaea;color:#8a2f2f}
.flash-success{background:#e6f3ea;color:#25613f}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line)}
.checks{list-style:none;padding:0;margin:1.5rem 0;text-align:left}
.checks li{padding:.4rem 0;border-bottom:1px solid var(--line)}
.ok{color:var(--ok);font-weight:600}.bad{color:var(--bad);font-weight:600}

/* the journey thread: the one memorable element */
.thread{position:relative;padding-left:2.25rem}
.thread::before{content:"";position:absolute;left:.7rem;top:.5rem;bottom:0;border-left:2px dotted var(--thread)}
.stop{position:relative;padding-bottom:2.25rem}
.stop::before{content:"";position:absolute;left:-2rem;top:.55rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--veil);border:2px solid var(--thread)}

/* floating menu bubble (no top menu) */
.bubble{position:fixed;right:1rem;bottom:1rem;z-index:20}
.bubble summary{list-style:none;cursor:pointer;width:3rem;height:3rem;border-radius:50%;background:var(--orchid);display:grid;place-items:center;box-shadow:0 6px 20px rgba(95,67,150,.25)}
.bubble summary::-webkit-details-marker{display:none}
.bubble summary span{font-family:'Pinyon Script',cursive;font-size:2rem;line-height:1;color:#fff;margin-top:-.25rem}
.sheet{position:absolute;right:0;bottom:3.75rem;min-width:13rem;background:var(--veil);border:1px solid var(--line);border-radius:1.25rem;padding:1rem;box-shadow:0 10px 30px rgba(95,67,150,.18)}
.sheet h3{font-size:.95rem;color:var(--ink-soft);margin:0 0 .4rem}
.sheet a{display:block;padding:.3rem 0}

.foot{padding:1rem 4.5rem 1rem 1.25rem;font-size:.85rem;color:var(--ink-soft)}
.foot a{color:inherit}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.linkish{background:none;border:0;padding:.3rem 0;font:inherit;color:var(--orchid-dark);cursor:pointer;text-decoration:underline}
.sheet hr{border:0;border-top:1px solid var(--line);margin:.6rem 0}
.auth-links{margin-top:1.25rem;font-size:.95rem}