/* RiyalPlus — shared product-page template styles (Declare skeleton) */
/* ---------- PRODUCT HERO ---------- */
  .phero { padding-block: clamp(48px, 6vw, 88px) clamp(36px, 4vw, 56px); }
  .phero-top { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
  .phero h1 {
    font-family: var(--display); font-weight: 500; font-size: clamp(52px, 8vw, 104px);
    line-height: 0.94; letter-spacing: var(--display-tracking); margin: 0; color: var(--ink);
  }
  html[lang="ar"] .phero h1 { font-family: var(--arabic); font-weight: 600; line-height: 1.1; letter-spacing: 0; }
  .phero .ar-title {
    font-family: var(--arabic); font-weight: 500; font-size: clamp(36px, 5vw, 60px);
    color: var(--indigo); line-height: 1.1;
  }
  html[lang="ar"] .phero .ar-title { display: none; }
  .phero .tagline {
    font-size: clamp(19px, 2vw, 26px); line-height: 1.4; color: var(--ink-2);
    margin: 28px 0 0; max-width: 42ch; font-weight: 400;
  }
  html[lang="ar"] .phero .tagline { line-height: 1.7; }
  .phero .tagline em { font-style: normal; color: var(--indigo); }
  .phero-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

  /* Product tabs */
  .ptabs {
    display: flex; gap: 6px; border-bottom: 1px solid var(--rule);
    overflow-x: auto; scrollbar-width: none; margin-top: 8px;
  }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 16px 18px; font-size: 15px; font-weight: 450; color: var(--ink-3);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-base), border-color var(--t-base);
  }
  .ptab .pk { font-family: var(--mono); font-size: 11px; color: var(--rule-2); }
  .ptab:hover { color: var(--ink); }
  .ptab.on { color: var(--ink); border-bottom-color: var(--indigo); font-weight: 500; }
  .ptab.on .pk { color: var(--gold); }
  .ptab.dis { color: var(--ink-3); opacity: 0.55; }

  /* ---------- WHAT / WHO band ---------- */
  .ww { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
  @media (max-width: 800px){ .ww { grid-template-columns: 1fr; } }
  .ww .c { background: var(--paper); padding: 40px; }
  .ww .c h3 { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin: 18px 0 14px; color: var(--ink); }
  html[lang="ar"] .ww .c h3 { font-family: var(--arabic); font-weight: 600; letter-spacing: 0; }
  .ww .c p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
  .who-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
  .who-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .who-list li .wd { font-family: var(--mono); font-size: 11px; color: var(--gold); margin-top: 4px; }

  /* ---------- STEPS ---------- */
  .steps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
  .step { background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); padding: clamp(32px, 4vw, 56px); align-items: center; }
  @media (max-width: 860px){ .step { grid-template-columns: 1fr; gap: 28px; } }
  .step-body .sn { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .step-body .sn .num {
    font-family: var(--mono); font-size: 13px; color: var(--indigo); font-weight: 500;
    width: 38px; height: 38px; border: 1px solid var(--rule-2); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .step-body .sn .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
  .step-body h3 { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; color: var(--ink); text-wrap: balance; }
  html[lang="ar"] .step-body h3 { font-family: var(--arabic); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
  .step-body p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 44ch; }
  html[lang="ar"] .step-body p { line-height: 1.85; }
  .step-body .youline {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
    font-size: 13.5px; color: var(--indigo); background: var(--indigo-soft); padding: 7px 13px; border-radius: 100px;
  }
  .step-body .youline .yd { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

  /* step mini-figures */
  .mini { background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
  .mini-h { padding: 11px 16px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
  .mini-b { padding: 16px; }

  .drop {
    border: 1.5px dashed var(--rule-2); border-radius: var(--r); background: var(--paper);
    padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  }
  .drop .file { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); padding: 9px 14px; border-radius: var(--r-sm); }
  .drop .file .x { width: 8px; height: 8px; border-radius: 2px; background: var(--positive); }
  .drop .hint { font-size: 12px; color: var(--ink-3); }

  .mrow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 9px 0; font-size: 13px; }
  .mrow + .mrow { border-top: 1px solid var(--rule); }
  .mrow .acct { color: var(--ink-2); }
  .mrow .arr { color: var(--gold); font-family: var(--mono); }
  .mrow .ln { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

  .chk-list { display: grid; gap: 0; }
  .chk-list .ci { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13.5px; color: var(--ink-2); }
  .chk-list .ci + .ci { border-top: 1px solid var(--rule); }
  .chk-list .ci .cc { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }
  .chk-list .ci .cc.ok { background: color-mix(in oklab, var(--positive) 14%, #fff); color: var(--positive); }
  .chk-list .ci .cc.fl { background: color-mix(in oklab, var(--gold) 16%, #fff); color: #876514; }
  .chk-list .ci .cn { margin-inline-start: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

  .f10row { display: grid; grid-template-columns: 42px 1fr auto 22px; gap: 12px; align-items: center; padding: 9px 0; font-size: 13px; }
  .f10row + .f10row { border-top: 1px solid var(--rule); }
  .f10row .ln { font-family: var(--mono); font-size: 10px; color: var(--gold); }
  .f10row .ds { color: var(--ink-2); }
  .f10row .am { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: end; }
  .f10row .ck { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--positive); color: var(--positive); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }

  .pdf-card { display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); }
  .pdf-ico { width: 44px; height: 56px; flex: none; border: 1px solid var(--rule-2); border-radius: 3px; background: repeating-linear-gradient(0deg, var(--canvas) 0 7px, transparent 7px 9px); position: relative; }
  .pdf-ico::after { content: 'PDF'; position: absolute; bottom: 6px; inset-inline-start: 5px; font-family: var(--mono); font-size: 8px; color: var(--negative); letter-spacing: 0.05em; }
  .pdf-card .pt { font-family: var(--display); font-weight: 500; font-size: 14.5px; color: var(--ink); }
  html[lang="ar"] .pdf-card .pt { font-family: var(--arabic); }
  .pdf-card .ps { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }

  /* ---------- PRICING INTEGRATION ---------- */
  .pricestrip { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
  @media (max-width: 800px){ .pricestrip { grid-template-columns: 1fr; gap: 28px; } }
  .price-bands { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-lg); overflow: hidden; }
  .pb { background: var(--indigo-deep); padding: 24px 20px; }
  .pb .bk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }
  .pb .bv { font-family: var(--mono); font-size: 32px; font-weight: 500; color: #fff; letter-spacing: -0.01em; margin-top: 12px; }
  .pb .bu { font-family: var(--mono); font-size: 11px; color: var(--gold-bright); letter-spacing: 0.06em; }
  .final { padding-block: clamp(72px, 9vw, 124px); }
  .final h2 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: var(--display-tracking); margin: 22px 0 0; text-wrap: balance; max-width: 22ch; }
  html[lang="ar"] .final h2 { font-family: var(--arabic); font-weight: 600; line-height: 1.2; letter-spacing: 0; }
  .final p { color: rgba(255,255,255,0.72); font-size: 18px; line-height: 1.6; margin: 22px 0 0; max-width: 54ch; }