/* ═══════════════════════════════════════════════════════════════
   WISHERLY DESIGN SYSTEM  v1
   One stylesheet, loaded by every page. Pages keep only their own
   layout; everything shared lives here.

   <link rel="stylesheet" href="components/theme.css">
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ── */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --surface-3:#FAFBFC;  /* ── brand: pink family, hue 334° ──
     --brand        buttons, links, heading accents (5.03:1 on white)
     --brand-surface  the sampled #F2AECB — panels, tints, decoration.
     It measures 1.8:1 as text, so it is never used for type. */
  --brand:#D4225F;
  --brand-deep:#C41D56;
  --brand-press:#A8184B;
  --brand-surface:#F2AECB;
  --brand-surface-2:#F8D3E2;
  --brand-tint:#FBE9F1;
  --brand-tint-2:#FEF5F9;

  /* legacy names kept so existing rules keep working */
  --violet:var(--brand);
  --violet-deep:var(--brand-deep);
  --violet-press:var(--brand-press);
  --violet-tint:var(--brand-tint);
  --violet-tint-2:var(--brand-tint-2);
  --violet-glow:var(--brand-surface);
  --pink:var(--brand-surface);
  --cyan:#00C4CC;
  --violet-glow:#F2AECB;   /* logo ribbon core, decorative only */
  --pink:#F878D8;          /* logo ribbon tip */

  /* ── ink ── */
  --ink:#0D1216;
  --ink-2:#2C3038;
  --text:#3F434B;
  --muted:#5E636B;   /* 4.5:1+ on white and the pale tints */
  --muted-2:#6B7079;

  /* ── lines ── */
  --line:#E9EBEF;
  --line-2:#E2E5EA;
  --line-3:#D5D9E0;

  /* ── states ── */
  --danger:#E5484D;
  --danger-tint:#FDECEC;
  --ok:#16A06A;
  --ok-tint:#E8F7F0;
  --warn:#D98324;
  --warn-tint:#FDF3E7;

  /* ── radii ── */
  --r-lg:8px;
  --r-md:6px;
  --r-sm:4px;
  --r-xs:3px;

  /* ── elevation ── */
  --shadow-card:0 1px 2px rgba(13,18,22,.04), 0 14px 36px -20px rgba(13,18,22,.22);
  --shadow-pop:0 2px 6px rgba(139,61,255,.28);
  --shadow-lift:0 1px 2px rgba(13,18,22,.05), 0 22px 50px -26px rgba(13,18,22,.3);

  /* ── type ── */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:var(--font); --fl:var(--font); --fs:var(--font); --fc:var(--font);

  /* ── layout ── */
  --page-w:1180px;
  --page-pad:32px;
}

@media(max-width:1000px){ :root{ --page-pad:22px; } }
@media(max-width:640px){  :root{ --page-pad:16px; } }

/* ═══ Base ═══ */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);
  letter-spacing:-.022em;margin:0 0 10px;}
h1{font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.15;}
h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;line-height:1.2;}
h3{font-size:19px;font-weight:700;}
p{margin:0 0 12px;}
a{color:var(--violet);text-decoration:none;}
a:hover{color:var(--violet-press);}
em{font-style:normal;color:var(--violet);}

/* ═══ Layout ═══ */
.wly-page{max-width:var(--page-w);margin:0 auto;padding:0 var(--page-pad);}
.wly-stack{display:flex;flex-direction:column;gap:20px;}

/* ═══ Nav ═══ */
.wly-nav{position:sticky;top:0;z-index:80;height:78px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;}
.wly-nav-inner{width:100%;max-width:var(--page-w);margin:0 auto;
  padding:0 var(--page-pad);display:flex;align-items:center;
  justify-content:space-between;gap:12px;}
.wly-nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto;}
@media(max-width:860px){ .wly-nav{height:64px;} }

/* ═══ Card ═══ */
.wly-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:clamp(22px,3.4vw,34px);transition:box-shadow .25s;}
.wly-card:hover{box-shadow:var(--shadow-lift);}
.wly-card-flat{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:none;padding:clamp(20px,3vw,28px);}

/* ═══ Buttons ═══════════════════════════════════════════════
   One canonical control size across the whole product.
   Height and line-height are pinned so buttons never inherit
   body line-height and grow. Change --btn-h / --r-btn to
   resize every button everywhere.                            */
:root{ --btn-h:36px; --btn-h-sm:30px; --r-btn:4px; }

.wly-btn,.wly-btn-primary,.wly-btn-ghost,.wly-btn-quiet,.wly-btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--btn-h);padding:0 18px;
  font-family:var(--font);font-size:14px;font-weight:600;line-height:1;
  letter-spacing:-.01em;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  white-space:nowrap;box-sizing:border-box;
  transition:background .15s,border-color .15s,color .15s;}

.wly-btn,.wly-btn-primary{background:var(--violet);color:#fff;}
.wly-btn:hover,.wly-btn-primary:hover{background:var(--violet-deep);}
.wly-btn:active,.wly-btn-primary:active{background:var(--violet-press);}

.wly-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);}
.wly-btn-ghost:hover{border-color:var(--violet);color:var(--violet-press);
  background:var(--violet-tint-2);}

.wly-btn-quiet{background:transparent;color:var(--muted);}
.wly-btn-quiet:hover{color:var(--ink);background:var(--surface-2);}

.wly-btn-danger{background:var(--danger-tint);color:var(--danger);}
.wly-btn-danger:hover{background:var(--danger);color:#fff;}

.wly-btn-sm{height:var(--btn-h-sm);padding:0 14px;font-size:13px;}
.wly-btn-lg{height:44px;padding:0 26px;font-size:15px;}
.wly-btn:disabled,.wly-btn-primary:disabled{opacity:.55;cursor:not-allowed;}


/* ═══ Inputs ═══ */
.wly-label{display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.wly-label::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--violet);flex-shrink:0;}
.wly-label-hint{margin-left:auto;font-weight:500;font-size:12.5px;
  color:var(--muted-2);}
.wly-input,.wly-select,.wly-textarea,
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],select,textarea{
  width:100%;padding:13px 15px;font-family:var(--font);font-size:15px;
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .15s,background .15s,box-shadow .15s;}
.wly-input:focus,.wly-select:focus,.wly-textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--violet);background:var(--surface);
  box-shadow:0 0 0 3px var(--violet-tint);}
::placeholder{color:var(--muted-2);}
textarea{min-height:110px;resize:vertical;}

/* ═══ Upload zone ═══ */
.wly-upload{border:1.5px dashed var(--line-3);border-radius:var(--r-md);
  background:var(--surface-3);padding:28px 20px;text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;}
.wly-upload:hover{border-color:var(--violet);background:var(--violet-tint-2);}

/* ═══ Badges & pills ═══ */
.wly-badge{display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-xs);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.wly-badge-brand{background:var(--violet-tint);color:var(--violet-press);}
.wly-badge-ok{background:var(--ok-tint);color:var(--ok);}
.wly-badge-warn{background:var(--warn-tint);color:var(--warn);}
.wly-badge-quiet{background:var(--surface-2);color:var(--muted);}

/* ═══ Segmented control ═══ */
.wly-seg-group{display:inline-flex;gap:8px;}
.wly-seg{display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:transparent;color:var(--muted-2);
  font-family:var(--font);font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;}
.wly-seg[aria-pressed="true"],.wly-seg.is-active{
  background:var(--violet-tint);border-color:var(--violet);
  color:var(--violet-press);}
.wly-seg:hover{border-color:var(--muted-2);color:var(--text);}

/* ═══ Progress steps ═══ */
.wly-steps{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;padding:26px 0;}
.wly-step{display:flex;align-items:center;gap:8px;}
.wly-step-dot{width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;border:1px solid var(--line-2);
  background:var(--surface);color:var(--muted-2);}
.wly-step-dot.is-active{background:var(--violet);border-color:var(--violet);
  color:#fff;box-shadow:var(--shadow-pop);}
.wly-step-dot.is-done{background:var(--violet-tint);border-color:var(--violet);
  color:var(--violet-press);}
.wly-step-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);}
.wly-step-label.is-active{color:var(--ink);}
.wly-step-line{width:44px;height:1px;background:var(--line-2);}

/* ═══ Table ═══ */
.wly-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.wly-table th{text-align:left;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  padding:12px 14px;border-bottom:1px solid var(--line);}
.wly-table td{padding:14px;border-bottom:1px solid var(--line);color:var(--text);}
.wly-table tr:last-child td{border-bottom:0;}

/* ═══ Empty state ═══ */
.wly-empty{text-align:center;padding:56px 24px;color:var(--muted);}
.wly-empty h3{color:var(--ink);margin-bottom:6px;}

/* ═══ Toast ═══ */
.wly-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;box-shadow:var(--shadow-lift);}
.wly-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ═══ Utilities ═══ */
.wly-muted{color:var(--muted);}
.wly-center{text-align:center;}
.wly-divider{height:1px;background:var(--line);border:0;margin:24px 0;}
.wly-row{display:flex;align-items:center;gap:12px;}
.wly-spacer{flex:1;}
/* ── FAQ: centred heading, questions grouped into three cards ── */
.fq{padding:72px 0 80px;}
.fq-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.fq-h{text-align:center;max-width:720px;margin:0 auto 40px;}
.fq-h h2{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0;color:var(--ink);}
.fq-h h2 em{font-style:normal;color:var(--brand);}
.fq-h p{margin:14px 0 0;font-size:clamp(15px,1.4vw,17px);color:var(--muted);line-height:1.55;}
.fq-h p a{color:var(--brand);font-weight:600;text-decoration:none;}
.fq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start;}
.fq-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px 10px;box-shadow:var(--shadow-card);}
.fq-label{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);padding-bottom:16px;border-bottom:1px solid var(--line);}
.fq-q{border-bottom:1px solid var(--line);}
.fq-q:last-child{border-bottom:0;}
.fq-q summary{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:700;line-height:1.4;color:var(--ink);letter-spacing:-.01em;}
.fq-q summary::-webkit-details-marker{display:none;}
.fq-q summary:hover{color:var(--brand);}
.fq-q summary i{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;color:var(--muted);transition:transform .25s,color .2s;}
.fq-q[open] summary i{transform:rotate(45deg);color:var(--brand);}
.fq-q p{margin:-4px 0 18px;font-size:14.5px;line-height:1.65;color:var(--text);}
@media(max-width:980px){.fq-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto;gap:16px;}}
@media(max-width:640px){.fq{padding:52px 0 56px;}.fq-wrap{padding:0 16px;}.fq-card{padding:22px 20px 6px;}.fq-q summary{font-size:15px;}}

/* links inside running legal text: underlined so they stand apart from the words around them */
.lp-art p a,.lp-art li a,.lp-art td a{text-decoration:underline;text-underline-offset:2px;}