/*
Theme Name: OrderDS MultiGlass
Theme URI: https://orderds.com
Author: OrderDS
Author URI: https://orderds.com
Description: The MultiGlass website theme for OrderDS — dropshipping automation for eBay and Shopify. One subscription, every channel. Glass design ported from the approved site preview.
Version: 1.2.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orderds
*/

  * { margin:0; padding:0; box-sizing:border-box; }
  :root{
    --ink:#14332F; --ink2:#47635E; --ink3:#7A918C;
    --teal:#0E7C86; --aqua:#14B8C4; --mint:#2FBF9B; --lime:#9BC53D;
    --coral:#FF7A59; --peach:#FF9E7A; --amber:#F2A93B; --sun:#F6C453;
    --glass:rgba(255,255,255,.52); --glass2:rgba(255,255,255,.68);
    --stroke:rgba(255,255,255,.75);
    --shadow:0 10px 34px rgba(20,80,70,.12), inset 0 1px 0 rgba(255,255,255,.85);
  }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink);
    background:linear-gradient(155deg,#FDFBF2 0%,#F0FBF4 42%,#FDF4E9 100%);
    min-height:100vh; overflow-x:hidden;
  }/* ---- light colors UNDER the glass, so the frost looks real ---- */
  
  .bgwash{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(640px 430px at 12% 6%,  rgba(167,243,208,.85), transparent 62%),
      radial-gradient(720px 500px at 88% 10%, rgba(255,206,182,.80), transparent 62%),
      radial-gradient(560px 460px at 92% 82%, rgba(205,240,150,.55), transparent 62%),
      radial-gradient(620px 460px at 6% 88%,  rgba(165,243,252,.70), transparent 62%),
      radial-gradient(520px 520px at 52% 52%, rgba(255,240,190,.55), transparent 65%),
      radial-gradient(420px 300px at 68% 34%, rgba(255,178,160,.45), transparent 60%);
  }
  .blob{ position:fixed; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none; opacity:.75; }
  .b-teal { width:420px;height:420px; background:#7FE3D2; top:-120px; left:22%; }
  .b-coral{ width:380px;height:380px; background:#FFC4AC; top:32%; right:-140px; }
  .b-lime { width:300px;height:300px; background:#DFF5A8; bottom:-100px; left:38%; }
  .b-aqua { width:340px;height:340px; background:#B4ECFA; bottom:6%; left:-120px; }
  .b-sun  { width:260px;height:260px; background:#FFE9A8; top:56%; left:56%; }/* ---- glass primitives ---- */

  
  .glass{ background:var(--glass); backdrop-filter:blur(18px) saturate(165%); -webkit-backdrop-filter:blur(18px) saturate(165%);
    border:1px solid var(--stroke); border-radius:24px; box-shadow:var(--shadow); }
  .glass2{ background:var(--glass2); backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
    border:1px solid rgba(255,255,255,.85); border-radius:24px; box-shadow:var(--shadow); }
  .glass-soft{ background:rgba(255,255,255,.38); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
    border:1px solid rgba(255,255,255,.6); border-radius:20px; box-shadow:0 6px 22px rgba(20,80,70,.08), inset 0 1px 0 rgba(255,255,255,.7); }/* ---- buttons: every color from your palette ---- */

  
  .btn{ display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; text-decoration:none;
    font:600 14.5px 'Plus Jakarta Sans',sans-serif; padding:12px 24px; border-radius:999px; color:#fff;
    transition:transform .15s ease, box-shadow .15s ease; white-space:nowrap; }
  .btn:hover{ transform:translateY(-2px); }
  .btn-teal { background:linear-gradient(135deg,#0E7C86,#17BEBB); box-shadow:0 10px 24px rgba(14,124,134,.35), inset 0 1px 0 rgba(255,255,255,.45); }
  .btn-coral{ background:linear-gradient(135deg,#FF7A59,#FFA07E); box-shadow:0 10px 24px rgba(255,122,89,.38), inset 0 1px 0 rgba(255,255,255,.5); }
  .btn-lime { background:linear-gradient(135deg,#8FBE2E,#C6E265); box-shadow:0 10px 24px rgba(155,197,61,.35), inset 0 1px 0 rgba(255,255,255,.5); color:#2C4413; }
  .btn-amber{ background:linear-gradient(135deg,#EE9B2E,#F8C254); box-shadow:0 10px 24px rgba(242,169,59,.38), inset 0 1px 0 rgba(255,255,255,.5); color:#5A3A07; }
  .btn-aqua { background:linear-gradient(135deg,#0FA3B8,#3ED6E0); box-shadow:0 10px 24px rgba(20,184,196,.35), inset 0 1px 0 rgba(255,255,255,.45); }
  .btn-glass{ background:rgba(255,255,255,.6); backdrop-filter:blur(12px); color:var(--ink); border:1px solid rgba(255,255,255,.85);
    box-shadow:0 8px 20px rgba(20,80,70,.10), inset 0 1px 0 #fff; }
  .btn-sm{ padding:8px 16px; font-size:13px; }
  .btn-lg{ padding:15px 32px; font-size:16px; }/* ---- capsules / chips in all colors ---- */

  
  .cap{ display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px;
    font:600 12.5px 'Plus Jakarta Sans',sans-serif; border:1px solid rgba(255,255,255,.7);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(20,80,70,.08); }
  .cap i{ width:8px;height:8px;border-radius:50%; display:inline-block; }
  .cap-teal { background:rgba(178,240,232,.65); color:#0B5A62; } .cap-teal i{ background:#0E7C86; }
  .cap-aqua { background:rgba(190,242,250,.65); color:#0B6070; } .cap-aqua i{ background:#14B8C4; }
  .cap-mint { background:rgba(187,247,220,.65); color:#0C5C42; } .cap-mint i{ background:#2FBF9B; }
  .cap-lime { background:rgba(233,248,190,.70); color:#4A6410; } .cap-lime i{ background:#9BC53D; }
  .cap-coral{ background:rgba(255,219,205,.70); color:#9A3B1E; } .cap-coral i{ background:#FF7A59; }
  .cap-amber{ background:rgba(255,238,196,.70); color:#7A5205; } .cap-amber i{ background:#F2A93B; }
  .cap-peach{ background:rgba(255,228,214,.70); color:#8A4A24; } .cap-peach i{ background:#FF9E7A; }
  .cap-cream{ background:rgba(255,250,230,.75); color:#6B5A1E; } .cap-cream i{ background:#E8C84A; }/* ---- 3D jelly decorations (like your reference images) ---- */

  
  .jelly{ position:absolute; pointer-events:none; }
  .ring{ border-radius:50%;
    background:conic-gradient(from 210deg,#BFF3E4,#7FE3D2,#FFD9C4,#BFF3E4);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 29px));
            mask:radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 29px));
    filter:drop-shadow(0 18px 22px rgba(20,90,80,.18)); opacity:.9; }
  .ring-coral{ background:conic-gradient(from 40deg,#FFE3D3,#FFB38F,#FF9E7A,#FFE3D3); }
  .capsule3d{ border-radius:999px; box-shadow:0 16px 28px rgba(20,80,70,.16), inset 0 2px 6px rgba(255,255,255,.85), inset 0 -8px 14px rgba(0,0,0,.06); }
  .cap3d-teal { background:linear-gradient(120deg,#CFF7EE,#5ED3C0 55%,#17BEBB); }
  .cap3d-coral{ background:linear-gradient(120deg,#FFE9DC,#FFB38F 55%,#FF8A66); }
  .cap3d-sun  { background:linear-gradient(120deg,#FFF6D8,#FBD97B 55%,#F2B84B); }
  .cap3d-cream{ background:linear-gradient(120deg,#FFFFFF,#FFF3DC 60%,#FFE7C4); }
  .cap3d-lime { background:linear-gradient(120deg,#F2FBC8,#CDF08A 55%,#A8D84E); }

  /* ── V1.2: jelly decorations — behind the words, sized per device ──
     Geometry lives here (not inline) so each screen size gets its own
     placement: decorations hug the corners, the words always sit on a
     layer above them, and the hero clips anything that spills out. */
  .jelly{ z-index:0; }
  .hero > *:not(.jelly), .finalcta > *:not(.jelly){ position:relative; z-index:1; }
  .j1{ width:190px; height:190px; top:8px; left:-30px; }
  .j2{ width:130px; height:130px; top:120px; right:6px; }
  .j3{ width:170px; height:52px; top:230px; left:26px; transform:rotate(-24deg); }
  .j4{ width:130px; height:44px; top:36px; right:120px; transform:rotate(18deg); }
  .j5{ width:150px; height:48px; top:300px; right:60px; transform:rotate(-14deg); }
  .j6{ width:140px; height:44px; top:26px; left:34px; transform:rotate(-18deg); }
  .j7{ width:120px; height:40px; bottom:30px; right:40px; transform:rotate(14deg); }
  @media (max-width:1020px){
    .hero{ overflow:hidden; }
    .j3{ left:-14px; } .j5{ right:4px; } .j4{ right:44px; }
  }
  @media (max-width:640px){
    .j1{ width:104px; height:104px; top:-36px; left:-40px; opacity:.5; }
    .j2{ width:78px; height:78px; top:auto; bottom:-26px; right:-28px; opacity:.45; }
    .j3{ width:104px; height:34px; top:auto; bottom:12px; left:-36px; opacity:.45; }
    .j4{ width:86px; height:30px; top:12px; right:-26px; opacity:.45; }
    .j5{ display:none; }
    .j6{ width:92px; height:30px; top:12px; left:-28px; opacity:.45; }
    .j7{ width:84px; height:28px; bottom:12px; right:-24px; opacity:.45; }
  }

  main{ position:relative; z-index:2; }
  @keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

  .logo{ font:800 26px 'Plus Jakarta Sans'; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
  .logo b{ background:linear-gradient(120deg,#0E7C86,#14B8C4 60%,#2FBF9B); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .logo-sm{ font-size:21px; }/* ---- landing ---- */

  
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
  .lnav{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; margin-top:78px; }
  .lnav .links{ display:flex; gap:26px; font:600 14px 'Plus Jakarta Sans'; color:var(--ink2); }
  .lnav .links a{ color:var(--ink2); text-decoration:none; }
  .lnav .links a:hover{ color:var(--ink); }
  .hero{ position:relative; text-align:center; padding:74px 24px 30px; }
  .hero h1{ font-size:56px; font-weight:800; letter-spacing:-.025em; line-height:1.06; max-width:820px; margin:22px auto 18px; }
  .hero h1 .g1{ background:linear-gradient(95deg,#0E7C86,#14B8C4 55%,#2FBF9B); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero h1 .g2{ background:linear-gradient(95deg,#FF7A59,#F2A93B); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p{ font-size:18.5px; color:var(--ink2); max-width:620px; margin:0 auto 30px; line-height:1.55; }
  .hero .cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .hero .micro{ margin-top:16px; font-size:13.5px; color:var(--ink3); font-weight:600; }
  .mock{ max-width:920px; margin:52px auto 0; padding:18px; position:relative; }
  .mock .bar{ display:flex; gap:7px; margin-bottom:14px; }
  .mock .bar i{ width:11px;height:11px;border-radius:50%; }
  .mockgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .ministat{ padding:16px; border-radius:18px; text-align:left; }
  .ministat .k{ font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--ink3); text-transform:uppercase; }
  .ministat .v{ font-size:24px; font-weight:800; margin-top:4px; }
  .mockchart{ margin-top:12px; padding:18px; border-radius:18px; display:flex; align-items:flex-end; gap:10px; height:150px; }
  .mockchart i{ flex:1; border-radius:10px 10px 4px 4px; display:block; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
  .sec{ padding:76px 0 8px; }
  .sec h2{ font-size:34px; font-weight:800; letter-spacing:-.02em; text-align:center; }
  .sec .sub{ text-align:center; color:var(--ink2); margin:10px auto 36px; max-width:560px; font-size:16px; line-height:1.55; }
  .fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .fcard{ padding:26px; }
  .fcard h3{ font-size:17.5px; font-weight:800; margin:16px 0 8px; }
  .fcard p{ color:var(--ink2); font-size:14.5px; line-height:1.6; }
  .iconbub{ width:52px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 8px 16px rgba(20,80,70,.12); }
  .iconbub svg{ width:20px; height:20px; }
  .ib-teal { background:linear-gradient(120deg,#CFF7EE,#5ED3C0); color:#0B5A62; }
  .ib-coral{ background:linear-gradient(120deg,#FFE9DC,#FFB38F); color:#9A3B1E; }
  .ib-lime { background:linear-gradient(120deg,#F2FBC8,#CDF08A); color:#4A6410; }
  .ib-amber{ background:linear-gradient(120deg,#FFF3D0,#FBD97B); color:#7A5205; }
  .ib-aqua { background:linear-gradient(120deg,#D8F7FB,#7FE0EA); color:#0B6070; }
  .ib-mint { background:linear-gradient(120deg,#D9F8E8,#8FE8C3); color:#0C5C42; }
  .band{ margin:70px auto 0; max-width:1180px; padding:40px 24px; }
  .band-in{ padding:38px; border-radius:28px; text-align:center; position:relative; overflow:hidden;
    background:linear-gradient(120deg,rgba(14,124,134,.88),rgba(20,184,196,.82) 55%,rgba(47,191,155,.88));
    box-shadow:0 24px 48px rgba(14,124,134,.30); color:#fff; }
  .band-in h3{ font-size:27px; font-weight:800; letter-spacing:-.01em; }
  .band-in p{ opacity:.92; margin:10px auto 22px; max-width:520px; line-height:1.55; font-size:15.5px; }
  .chanrow{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .chan{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(8px);
    color:#fff; font:700 14px 'Plus Jakarta Sans'; padding:10px 22px; border-radius:999px; }
  .chan small{ display:block; font:600 11px 'Plus Jakarta Sans'; opacity:.85; letter-spacing:.05em; }
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .step{ padding:26px; text-align:left; }
  .step .n{ width:44px;height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 17px 'Plus Jakarta Sans'; color:#fff; }
  .step h3{ font-size:17px; font-weight:800; margin:14px 0 7px; }
  .step p{ color:var(--ink2); font-size:14.5px; line-height:1.6; }
  .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
  .plan{ padding:30px; display:flex; flex-direction:column; position:relative; }
  .plan.hot{ background:rgba(255,255,255,.72); border:1.5px solid rgba(255,158,122,.8);
    box-shadow:0 22px 44px rgba(255,122,89,.20), inset 0 1px 0 #fff; }
  .plan .pname{ font:800 13px 'Plus Jakarta Sans'; letter-spacing:.09em; text-transform:uppercase; }
  .plan .price{ font-size:42px; font-weight:800; margin:12px 0 2px; letter-spacing:-.02em; }
  .plan .price small{ font-size:15px; color:var(--ink3); font-weight:600; }
  .plan ul{ list-style:none; margin:20px 0 26px; display:grid; gap:11px; font-size:14.5px; color:var(--ink2); }
  .plan ul li{ display:flex; gap:9px; align-items:flex-start; }
  .plan ul li::before{ content:""; width:8px;height:8px;border-radius:50%; margin-top:6px; flex:none; }
  .plan .hotflag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); }
  .dot-t li::before{ background:#0E7C86; } .dot-c li::before{ background:#FF7A59; } .dot-a li::before{ background:#14B8C4; }
  .faq{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
  .faq .q{ padding:20px 24px; }
  .faq .q h4{ font-size:15.5px; font-weight:800; }
  .faq .q p{ color:var(--ink2); font-size:14.5px; line-height:1.6; margin-top:6px; }
  .finalcta{ max-width:920px; margin:76px auto 0; padding:52px 30px; text-align:center; position:relative; overflow:hidden; }
  .finalcta h2{ font-size:34px; font-weight:800; letter-spacing:-.02em; }
  .finalcta p{ color:var(--ink2); margin:12px auto 26px; max-width:480px; line-height:1.55; }
  footer{ text-align:center; padding:52px 20px 40px; color:var(--ink3); font-size:13.5px; font-weight:600; }/* ---- auth ---- */

  
  .authwrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:110px 20px 50px; position:relative; }
  .authcard{ width:100%; max-width:430px; padding:38px 36px; position:relative; }
  .authcard h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:14px 0 6px; }
  .authcard .sub{ color:var(--ink2); font-size:14.5px; margin-bottom:24px; }
  .fld{ margin-bottom:15px; }
  .fld label{ display:block; font:700 12.5px 'Plus Jakarta Sans'; letter-spacing:.04em; color:var(--ink2); margin-bottom:7px; text-transform:uppercase; }
  .fld input, .fld select{ width:100%; padding:13px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.9);
    background:rgba(255,255,255,.65); font:500 14.5px 'Plus Jakarta Sans'; color:var(--ink); outline:none;
    box-shadow:inset 0 2px 6px rgba(20,80,70,.06); }
  .fld input:focus, .fld select:focus{ border-color:#5ED3C0; background:rgba(255,255,255,.9); }
  .gbtn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:999px;
    background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.95); font:700 14.5px 'Plus Jakarta Sans'; color:var(--ink);
    cursor:pointer; box-shadow:0 8px 18px rgba(20,80,70,.10); }
  .divider{ display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--ink3); font:600 12px 'Plus Jakarta Sans'; letter-spacing:.08em; }
  .divider::before,.divider::after{ content:""; flex:1; height:1px; background:rgba(20,51,47,.14); }
  .authfoot{ text-align:center; margin-top:20px; font-size:14px; color:var(--ink2); }
  .authfoot a{ color:var(--teal); font-weight:800; text-decoration:none; }
  .w100{ width:100%; justify-content:center; }/* ---- app shell ---- */

  
  .shell{ display:flex; gap:20px; max-width:1360px; margin:0 auto; padding:86px 22px 40px; align-items:flex-start; }
  .side{ width:238px; flex:none; padding:20px 16px; position:sticky; top:86px; }
  .side .logo{ display:block; padding:2px 8px 16px; }
  .snav{ display:grid; gap:4px; }
  .snav a{ display:block; padding:10px 14px; border-radius:999px; font:600 14px 'Plus Jakarta Sans'; color:var(--ink2); text-decoration:none; }
  .snav a:hover{ background:rgba(255,255,255,.55); color:var(--ink); }
  .snav a.on{ color:#fff; background:linear-gradient(120deg,#0E7C86,#17BEBB); box-shadow:0 8px 18px rgba(14,124,134,.30), inset 0 1px 0 rgba(255,255,255,.4); }
  .snav a.on.c{ background:linear-gradient(120deg,#FF7A59,#FFA07E); box-shadow:0 8px 18px rgba(255,122,89,.32), inset 0 1px 0 rgba(255,255,255,.45); }
  .snav a.on.a{ background:linear-gradient(120deg,#EE9B2E,#F8C254); color:#5A3A07; box-shadow:0 8px 18px rgba(242,169,59,.32), inset 0 1px 0 rgba(255,255,255,.5); }
  .side .logout{ width:100%; justify-content:center; margin:18px 0 12px; }
  .userbox{ padding:14px 16px; border-radius:18px; }
  .userbox .em{ font:700 13px 'Plus Jakarta Sans'; word-break:break-all; }
  .userbox .pl{ margin-top:8px; }
  .content{ flex:1; min-width:0; }
  .phead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  .phead h1{ font-size:29px; font-weight:800; letter-spacing:-.02em; }
  .phead p{ color:var(--ink2); font-size:14.5px; margin-top:4px; }
  .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
  .stat{ padding:20px; position:relative; overflow:hidden; }
  .stat::after{ content:""; position:absolute; top:0; left:0; right:0; height:5px; }
  .st-teal::after{ background:linear-gradient(90deg,#0E7C86,#17BEBB); }
  .st-coral::after{ background:linear-gradient(90deg,#FF7A59,#FFA07E); }
  .st-lime::after{ background:linear-gradient(90deg,#8FBE2E,#C6E265); }
  .st-amber::after{ background:linear-gradient(90deg,#EE9B2E,#F8C254); }
  .stat .k{ font:700 11.5px 'Plus Jakarta Sans'; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); }
  .stat .v{ font-size:29px; font-weight:800; margin:6px 0 4px; letter-spacing:-.02em; }
  .stat .d{ font-size:13px; font-weight:700; }
  .up{ color:#0C7A54; } .dn{ color:#C2431F; }
  .panel{ padding:22px; margin-bottom:18px; }
  .panel h3{ font-size:16.5px; font-weight:800; }
  .panel .psub{ color:var(--ink3); font-size:13px; font-weight:600; margin-top:3px; }
  .phead2{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  table{ width:100%; border-collapse:collapse; font-size:14px; }
  th{ text-align:left; font:700 11.5px 'Plus Jakarta Sans'; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); padding:10px 12px; border-bottom:1px solid rgba(20,51,47,.10); }
  td{ padding:13px 12px; border-bottom:1px solid rgba(20,51,47,.06); vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  .prod{ display:flex; align-items:center; gap:12px; font-weight:700; }
  .thumb{ width:42px;height:42px; border-radius:14px; flex:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 5px 12px rgba(20,80,70,.10); }
  .th-1{ background:linear-gradient(130deg,#CFF7EE,#5ED3C0); } .th-2{ background:linear-gradient(130deg,#FFE9DC,#FFB38F); }
  .th-3{ background:linear-gradient(130deg,#FFF3D0,#FBD97B); } .th-4{ background:linear-gradient(130deg,#D8F7FB,#7FE0EA); }
  .th-5{ background:linear-gradient(130deg,#F2FBC8,#CDF08A); } .th-6{ background:linear-gradient(130deg,#FFE0E6,#FFB3C2); }
  .chart{ display:flex; align-items:flex-end; gap:12px; height:170px; padding-top:10px; }
  .chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
  .chart .col i{ width:100%; max-width:44px; border-radius:12px 12px 5px 5px; display:block; box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 6px 14px rgba(20,80,70,.10); }
  .chart .col span{ font:700 11.5px 'Plus Jakarta Sans'; color:var(--ink3); }
  .cb-1{ background:linear-gradient(180deg,#5ED3C0,#0E7C86); } .cb-2{ background:linear-gradient(180deg,#FFB38F,#FF7A59); }
  .cb-3{ background:linear-gradient(180deg,#CDF08A,#8FBE2E); } .cb-4{ background:linear-gradient(180deg,#7FE0EA,#0FA3B8); }
  .cb-5{ background:linear-gradient(180deg,#FBD97B,#EE9B2E); } .cb-6{ background:linear-gradient(180deg,#8FE8C3,#2FBF9B); }
  .cb-7{ background:linear-gradient(180deg,#FFC9A3,#F2703A); }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .supcard{ padding:24px; }
  .supcard .slogo{ font:800 21px 'Plus Jakarta Sans'; letter-spacing:-.01em; }
  .supcard p{ color:var(--ink2); font-size:14px; line-height:1.6; margin:10px 0 18px; }
  .suprow{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
  .searchbar{ display:flex; gap:12px; padding:14px; align-items:center; }
  .searchbar input{ flex:1; border:none; background:rgba(255,255,255,.65); border-radius:999px; padding:13px 20px;
    font:500 14.5px 'Plus Jakarta Sans'; color:var(--ink); outline:none; box-shadow:inset 0 2px 6px rgba(20,80,70,.06); }
  .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
  .tab{ padding:9px 18px; border-radius:999px; font:700 13.5px 'Plus Jakarta Sans'; cursor:pointer; border:1px solid rgba(255,255,255,.7);
    background:rgba(255,255,255,.45); color:var(--ink2); }
  .tab.on{ color:#fff; background:linear-gradient(120deg,#0E7C86,#17BEBB); border-color:transparent; box-shadow:0 8px 16px rgba(14,124,134,.28); }
  .note{ font-size:13px; color:var(--ink3); font-weight:600; }
  .switchrow{ display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid rgba(20,51,47,.07); }
  .switchrow:last-child{ border-bottom:none; }
  .switchrow .t{ font-weight:700; font-size:14.5px; }
  .switchrow .s{ color:var(--ink3); font-size:13px; font-weight:600; margin-top:2px; }
  .tog{ width:50px; height:28px; border-radius:999px; position:relative; flex:none; box-shadow:inset 0 1px 3px rgba(0,0,0,.12); }
  .tog::after{ content:""; position:absolute; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }
  .tog.on{ background:linear-gradient(120deg,#2FBF9B,#17BEBB); } .tog.on::after{ right:3px; }
  .tog.off{ background:rgba(20,51,47,.18); } .tog.off::after{ left:3px; }
  .tog.coral.on{ background:linear-gradient(120deg,#FF7A59,#FFA07E); }
  .tog.amber.on{ background:linear-gradient(120deg,#EE9B2E,#F8C254); }/* ---- palette additions: violet + blue (from the glow-card refs) ---- */

  
  .btn-violet{ background:linear-gradient(135deg,#8B7CF6,#B3A8FF); box-shadow:0 10px 24px rgba(139,124,246,.38), inset 0 1px 0 rgba(255,255,255,.5); }
  .btn-blue{ background:linear-gradient(135deg,#2F7CF6,#5EA8FF); box-shadow:0 10px 24px rgba(62,139,253,.35), inset 0 1px 0 rgba(255,255,255,.45); }
  .cap-violet{ background:rgba(226,222,255,.70); color:#4B3FA0; } .cap-violet i{ background:#8B7CF6; }
  .cap-blue{ background:rgba(207,231,255,.70); color:#1756A9; } .cap-blue i{ background:#3E8BFD; }/* ---- thick-rim glass capsule buttons (Explore + purple search refs) ---- */

  
  .rimbtn{ display:inline-flex; padding:5px; border-radius:999px; background:rgba(255,255,255,.38);
    border:1.5px solid rgba(255,255,255,.85); text-decoration:none; cursor:pointer; backdrop-filter:blur(10px);
    box-shadow:0 16px 34px rgba(20,80,70,.18), inset 0 1px 0 #fff, inset 0 -6px 12px rgba(255,255,255,.25); transition:transform .15s ease; }
  .rimbtn:hover{ transform:translateY(-2px); }
  .rimbtn .core{ display:inline-flex; align-items:center; gap:8px; padding:13px 30px; border-radius:999px; color:#fff;
    font:700 15.5px 'Plus Jakarta Sans',sans-serif; box-shadow:inset 0 2px 5px rgba(255,255,255,.55), inset 0 -8px 14px rgba(0,0,0,.10); }
  .core-coral{ background:linear-gradient(135deg,#FF8A66,#FFB38F); }
  .core-teal{ background:linear-gradient(135deg,#0E7C86,#17BEBB); }
  .core-violet{ background:linear-gradient(135deg,#8B7CF6,#B3A8FF); }
  .rimbtn.block{ display:flex; width:100%; }
  .rimbtn.block .core{ flex:1; justify-content:center; }/* ---- glowing gradient cards (fintech ref) ---- */

  
  .glowcard{ border-radius:26px; padding:22px; color:#fff; position:relative; overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
  .glowcard .k{ font:700 11.5px 'Plus Jakarta Sans'; letter-spacing:.08em; text-transform:uppercase; opacity:.88; }
  .glowcard .v{ font-size:30px; font-weight:800; margin:8px 0 4px; letter-spacing:-.02em; }
  .glowcard .d{ font-size:13px; font-weight:700; opacity:.95; }
  .glowcard .gic{ width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.28);
    border:1px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); margin-bottom:14px; }
  .glowcard .gic svg{ width:21px; height:21px; }
  .gc-teal{ background:linear-gradient(140deg,#17BEBB,#0E7C86); box-shadow:0 18px 38px rgba(14,124,134,.38), inset 0 1px 0 rgba(255,255,255,.5); }
  .gc-coral{ background:linear-gradient(140deg,#FFA07E,#FF7A59); box-shadow:0 18px 38px rgba(255,122,89,.40), inset 0 1px 0 rgba(255,255,255,.5); }
  .gc-green{ background:linear-gradient(140deg,#4ADE80,#22B07E); box-shadow:0 18px 38px rgba(47,191,155,.40), inset 0 1px 0 rgba(255,255,255,.5); }
  .gc-violet{ background:linear-gradient(140deg,#B3A8FF,#8B7CF6); box-shadow:0 18px 38px rgba(139,124,246,.40), inset 0 1px 0 rgba(255,255,255,.5); }
  .gc-blue{ background:linear-gradient(140deg,#5EA8FF,#2F7CF6); box-shadow:0 18px 38px rgba(62,139,253,.38), inset 0 1px 0 rgba(255,255,255,.5); }/* ---- violet rim search (purple glass search ref) ---- */

  
  .rimsearch{ display:flex; align-items:center; padding:6px; border-radius:999px; background:rgba(255,255,255,.40);
    border:1.5px solid rgba(255,255,255,.85); backdrop-filter:blur(12px);
    box-shadow:0 24px 44px rgba(139,124,246,.30), inset 0 1px 0 #fff; }
  .rimsearch .core{ flex:1; display:flex; align-items:center; gap:12px; border-radius:999px; padding:12px 12px 12px 22px;
    background:linear-gradient(120deg,rgba(139,124,246,.94),rgba(179,168,255,.94));
    box-shadow:inset 0 2px 6px rgba(255,255,255,.5), inset 0 -10px 18px rgba(80,60,200,.25); }
  .rimsearch input{ flex:1; background:none; border:none; outline:none; color:#fff; font:600 15.5px 'Plus Jakarta Sans',sans-serif; min-width:0; }
  .rimsearch input::placeholder{ color:rgba(255,255,255,.85); }
  .rimsearch .sbtn{ width:44px; height:44px; flex:none; border-radius:50%; border:1px solid rgba(255,255,255,.7);
    background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; }
  .rimsearch .sbtn svg{ width:19px; height:19px; }/* ---- V2 sidebar: same icons, structure and order as V2 ---- */

  
  .side{ display:flex; flex-direction:column; }
  .side .sp{ flex:1; min-height:14px; }
  .slogo{ display:flex; align-items:center; gap:11px; padding:2px 8px 16px; }
  .slogo .mark{ width:39px; height:39px; border-radius:13px; flex:none; display:grid; place-items:center;
    background:linear-gradient(135deg,#0E7C86,#17BEBB); box-shadow:0 8px 18px rgba(14,124,134,.35); }
  .slogo .mark svg{ width:22px; height:22px; }
  .slogo b{ font-size:20px; font-weight:800; letter-spacing:.2px; color:var(--ink); }
  .slogo b span{ background:linear-gradient(120deg,#0E7C86,#14B8C4); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .slogo small{ display:block; font-size:9.5px; color:var(--ink3); letter-spacing:2.4px; font-weight:700; }
  .navlbl{ font-size:10px; letter-spacing:2px; color:var(--ink3); font-weight:800; padding:13px 11px 6px; }
  .v2nav{ display:grid; gap:3px; }
  .v2nav a{ display:flex; align-items:center; gap:11px; padding:9.5px 11px; border-radius:13px; color:var(--ink2);
    font-weight:600; font-size:13.5px; text-decoration:none; cursor:pointer; }
  .v2nav a svg{ width:18px; height:18px; flex:none; opacity:.85; }
  .v2nav a:hover{ background:rgba(255,255,255,.6); color:var(--ink); }
  .v2nav a .pill{ margin-left:auto; background:rgba(255,255,255,.65); color:#0B5A62; font-size:10.5px; font-weight:800;
    padding:2.5px 8px; border-radius:99px; border:1px solid rgba(255,255,255,.8); }
  .v2nav a.on{ color:#fff; font-weight:700; background:linear-gradient(120deg,#0E7C86,#17BEBB);
    box-shadow:0 8px 18px rgba(14,124,134,.30), inset 0 1px 0 rgba(255,255,255,.4); }
  .v2nav a.on.c{ background:linear-gradient(120deg,#FF7A59,#FFA07E); box-shadow:0 8px 18px rgba(255,122,89,.32), inset 0 1px 0 rgba(255,255,255,.45); }
  .v2nav a.on.a{ background:linear-gradient(120deg,#EE9B2E,#F8C254); color:#5A3A07; box-shadow:0 8px 18px rgba(242,169,59,.32), inset 0 1px 0 rgba(255,255,255,.5); }
  .v2nav a.on.l{ background:linear-gradient(120deg,#8FBE2E,#C6E265); color:#2C4413; box-shadow:0 8px 18px rgba(155,197,61,.32), inset 0 1px 0 rgba(255,255,255,.5); }
  .v2nav a.on.m{ background:linear-gradient(120deg,#2FBF9B,#5ED3C0); box-shadow:0 8px 18px rgba(47,191,155,.32), inset 0 1px 0 rgba(255,255,255,.45); }
  .v2nav a.on.v{ background:linear-gradient(120deg,#8B7CF6,#B3A8FF); box-shadow:0 8px 18px rgba(139,124,246,.32), inset 0 1px 0 rgba(255,255,255,.45); }
  .v2nav a.on .pill{ background:rgba(255,255,255,.25); color:#fff; border-color:transparent; }
  .tbox{ margin-top:16px; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.85);
    background:linear-gradient(160deg,rgba(207,247,238,.78),rgba(190,242,250,.65)); box-shadow:inset 0 1px 0 #fff; }
  .tbox b{ font-size:13px; }
  .tbox p{ color:var(--ink2); font-size:12px; margin:4px 0 9px; line-height:1.45; }
  .trialbar2{ height:7px; border-radius:99px; background:rgba(20,51,47,.10); overflow:hidden; }
  .trialbar2 i{ display:block; height:100%; width:78%; background:linear-gradient(90deg,#0E7C86,#2FBF9B); border-radius:99px; }
  .lout{ display:flex; align-items:center; gap:11px; width:100%; margin-top:12px; padding:9.5px 11px; border-radius:13px;
    background:rgba(255,240,238,.78); border:1px solid rgba(255,205,198,.9); color:#D64545;
    font:700 13.5px 'Plus Jakarta Sans',sans-serif; cursor:pointer; }
  .lout svg{ width:18px; height:18px; }
  .ubox{ display:flex; gap:10px; align-items:center; padding:12px 8px 2px; }
  .ubox .av{ width:35px; height:35px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
    font-weight:800; font-size:13px; background:linear-gradient(135deg,#FF7A59,#F2A93B); }
  .ubox b{ font-size:13px; display:block; }
  .ubox small{ color:var(--ink3); font-size:11px; font-weight:600; }/* ---- app topbar ---- */

  
  .tbar{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
  .tbar h1{ font-size:27px; font-weight:800; letter-spacing:-.02em; }
  .tbar .sub{ color:var(--ink2); font-size:13px; margin-top:2px; font-weight:600; }
  .gsearch{ margin-left:auto; display:flex; align-items:center; gap:9px; width:280px; padding:10px 16px; border-radius:999px;
    background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); color:var(--ink3);
    box-shadow:0 6px 16px rgba(20,80,70,.08); backdrop-filter:blur(10px); }
  .gsearch input{ background:none; border:none; outline:none; width:100%; color:var(--ink); font:500 13px 'Plus Jakarta Sans',sans-serif; }
  .icobtn{ width:41px; height:41px; border-radius:50%; display:grid; place-items:center; position:relative; cursor:pointer;
    background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85); color:var(--ink2); box-shadow:0 6px 16px rgba(20,80,70,.08); }
  .icobtn .dot{ position:absolute; top:9px; right:11px; width:8px; height:8px; border-radius:50%; background:#FF7A59; border:2px solid #fff; }/* ---- sliding glass indicator for the side panel (moves to the clicked item) ---- */

  
  .navwrap{ position:relative; }
  .navind{ position:absolute; left:0; right:0; top:0; height:38px; border-radius:14px; z-index:0; opacity:0;
    border:1.5px solid rgba(255,255,255,.6); backdrop-filter:blur(8px) saturate(160%); -webkit-backdrop-filter:blur(8px) saturate(160%);
    background:linear-gradient(120deg,rgba(14,124,134,.94),rgba(23,190,187,.94));
    box-shadow:0 12px 24px rgba(14,124,134,.30), inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -10px 16px rgba(255,255,255,.14);
    transition:top .55s cubic-bezier(.7,.02,.2,1), height .55s cubic-bezier(.7,.02,.2,1), background .45s ease, box-shadow .45s ease; }
  .navind.c{ background:linear-gradient(120deg,rgba(255,122,89,.95),rgba(255,160,126,.95)); box-shadow:0 12px 24px rgba(255,122,89,.34), inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -10px 16px rgba(255,255,255,.16); }
  .navind.a{ background:linear-gradient(120deg,rgba(238,155,46,.95),rgba(248,194,84,.95)); box-shadow:0 12px 24px rgba(242,169,59,.34), inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -10px 16px rgba(255,255,255,.18); }
  .navind.l{ background:linear-gradient(120deg,rgba(143,190,46,.95),rgba(198,226,101,.95)); box-shadow:0 12px 24px rgba(155,197,61,.34), inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -10px 16px rgba(255,255,255,.18); }
  .navind.m{ background:linear-gradient(120deg,rgba(47,191,155,.95),rgba(94,211,192,.95)); box-shadow:0 12px 24px rgba(47,191,155,.34), inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -10px 16px rgba(255,255,255,.15); }
  .navind.v{ background:linear-gradient(120deg,rgba(139,124,246,.95),rgba(179,168,255,.95)); box-shadow:0 12px 24px rgba(139,124,246,.34), inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -10px 16px rgba(255,255,255,.15); }
  .v2nav a{ position:relative; z-index:1; transition:color .25s ease; }
  .v2nav a.on, .v2nav a.on.c, .v2nav a.on.m, .v2nav a.on.v{ background:transparent; box-shadow:none; color:#fff; }
  .v2nav a.on.a{ background:transparent; box-shadow:none; color:#5A3A07; }
  .v2nav a.on.l{ background:transparent; box-shadow:none; color:#2C4413; }

  @media (max-width:1020px){
    .fgrid,.steps,.plans,.grid3{ grid-template-columns:1fr 1fr; }
    .stats{ grid-template-columns:1fr 1fr; } .mockgrid{ grid-template-columns:1fr 1fr; }
    .side{ display:none; } .hero h1{ font-size:42px; }
  }
  @media (max-width:640px){
    .fgrid,.steps,.plans,.grid2,.grid3{ grid-template-columns:1fr; }
    .lnav .links{ display:none; } .hero h1{ font-size:34px; }
  }/* ================= SITE PREVIEW EXTENSIONS ================= *//* inner-page title block (below each view's nav) */

  
  .pagetitle{ text-align:center; padding:56px 24px 6px; position:relative; }
  .pagetitle h1{ font-size:42px; font-weight:800; letter-spacing:-.025em; line-height:1.1; max-width:760px; margin:18px auto 14px; }
  .pagetitle h1 .g1{ background:linear-gradient(95deg,#0E7C86,#14B8C4 55%,#2FBF9B); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pagetitle h1 .g2{ background:linear-gradient(95deg,#FF7A59,#F2A93B); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pagetitle p{ font-size:17px; color:var(--ink2); max-width:600px; margin:0 auto; line-height:1.55; }/* testimonials */

  
  .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .tcard{ padding:26px; display:flex; flex-direction:column; gap:14px; }
  .tcard .stars{ color:#F2A93B; font-size:15px; letter-spacing:3px; }
  .tcard p{ color:var(--ink2); font-size:14.5px; line-height:1.65; }
  .tcard .who{ display:flex; align-items:center; gap:11px; margin-top:auto; }
  .tcard .av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13.5px; flex:none; }
  .tcard .who b{ font-size:14px; display:block; }
  .tcard .who small{ color:var(--ink3); font-size:12px; font-weight:600; }/* comparison table */

  
  .cmp{ padding:10px 26px 18px; overflow-x:auto; }
  .cmp table th:first-child{ font-size:12.5px; }
  .cmp td.y{ color:#0C7A54; font-weight:700; }
  .cmp td.dim{ color:var(--ink3); }/* how-it-works: numbered rows on wide screens */

  
  .steps5{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .bigstat{ padding:26px; text-align:center; }
  .bigstat .v{ font-size:32px; font-weight:800; letter-spacing:-.02em; }
  .bigstat .k{ font:700 12px 'Plus Jakarta Sans'; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3); margin-top:5px; }/* blog */

  
  .bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .bcard{ padding:22px; display:flex; flex-direction:column; gap:12px; }
  .bthumb{ height:128px; border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(20,80,70,.10); }
  .bt-1{ background:linear-gradient(130deg,#CFF7EE,#5ED3C0); } .bt-2{ background:linear-gradient(130deg,#FFE9DC,#FFB38F); }
  .bt-3{ background:linear-gradient(130deg,#FFF3D0,#FBD97B); } .bt-4{ background:linear-gradient(130deg,#D8F7FB,#7FE0EA); }
  .bt-5{ background:linear-gradient(130deg,#F2FBC8,#CDF08A); } .bt-6{ background:linear-gradient(130deg,#E6E1FF,#B3A8FF); }
  .bcard h3{ font-size:17px; font-weight:800; line-height:1.35; }
  .bcard p{ color:var(--ink2); font-size:14px; line-height:1.6; }
  .bmeta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:6px; }
  .bmeta .rt{ font-size:12.5px; color:var(--ink3); font-weight:700; }
  .readlink{ font:700 13.5px 'Plus Jakarta Sans'; color:var(--teal); text-decoration:none; cursor:pointer; }/* article + policy typography */

  
  .doc{ max-width:780px; margin:0 auto; padding:38px 40px; }
  .doc h1{ font-size:36px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-bottom:12px; }
  .doc .meta{ color:var(--ink3); font-size:13.5px; font-weight:600; margin-bottom:26px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .doc h2{ font-size:24px; font-weight:800; letter-spacing:-.015em; margin:34px 0 12px; }
  .doc h2:first-of-type{ margin-top:6px; }
  .doc h3{ font-size:18px; font-weight:800; margin:24px 0 9px; }
  .doc p{ color:var(--ink2); font-size:15.5px; line-height:1.75; margin-bottom:14px; }
  .doc ul, .doc ol{ color:var(--ink2); font-size:15.5px; line-height:1.75; margin:0 0 16px 22px; }
  .doc li{ margin-bottom:7px; }
  .doc ul.check{ list-style:none; margin-left:0; }
  .doc ul.check li{ display:flex; gap:10px; align-items:flex-start; }
  .doc ul.check li::before{ content:""; width:9px; height:9px; border-radius:50%; background:#2FBF9B; margin-top:9px; flex:none; }
  .doc .tip{ padding:20px 22px; margin:22px 0; }
  .doc .tip h4{ font-size:15px; font-weight:800; margin-bottom:6px; }
  .doc .tip p{ margin-bottom:0; font-size:14.5px; }
  .doc a{ color:var(--teal); font-weight:700; }/* contact form */

  
  .fld textarea{ width:100%; padding:13px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.9);
    background:rgba(255,255,255,.65); font:500 14.5px 'Plus Jakarta Sans'; color:var(--ink); outline:none;
    box-shadow:inset 0 2px 6px rgba(20,80,70,.06); resize:vertical; min-height:130px; }
  .fld textarea:focus{ border-color:#5ED3C0; background:rgba(255,255,255,.9); }/* footer with link columns */

  
  .foot{ text-align:center; padding:54px 20px 42px; color:var(--ink3); font-size:13.5px; font-weight:600; }
  .foot .flogo{ font-size:22px; margin-bottom:14px; }
  .foot-links{ display:flex; gap:8px 22px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
  .foot-links a{ color:var(--ink2); text-decoration:none; font-weight:700; font-size:13.5px; cursor:pointer; }
  .foot-links a:hover{ color:var(--ink); }
  .foot .fine{ max-width:640px; margin:0 auto; line-height:1.6; font-size:12.5px; }

  @media (max-width:1020px){
    .tgrid,.bgrid,.steps5{ grid-template-columns:1fr 1fr; }
    .pagetitle h1{ font-size:34px; }
  }
  @media (max-width:640px){
    .tgrid,.bgrid,.steps5{ grid-template-columns:1fr; }
    .doc{ padding:28px 22px; }
    .pagetitle h1{ font-size:29px; }
  }

  /* ---- WordPress integration additions (pagination, post nav) ---- */
  .od-pagination{ margin-top:36px; text-align:center; }
  .od-pagination .nav-links{ display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; }
  .od-pagination .page-numbers{ display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px;
    font:600 13.5px 'Plus Jakarta Sans',sans-serif; color:var(--ink); text-decoration:none;
    background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85);
    box-shadow:0 6px 22px rgba(20,80,70,.08), inset 0 1px 0 rgba(255,255,255,.7); }
  .od-pagination .page-numbers.current{ background:linear-gradient(135deg,#0E7C86,#17BEBB); color:#fff; border-color:transparent; }
  .od-postnav{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:780px; margin:22px auto 0; }
  .od-postnav a{ display:inline-flex; padding:9px 18px; border-radius:999px; font:600 13.5px 'Plus Jakarta Sans',sans-serif;
    color:var(--ink); text-decoration:none; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.85);
    box-shadow:0 6px 22px rgba(20,80,70,.08), inset 0 1px 0 rgba(255,255,255,.7); }
  .doc img{ max-width:100%; height:auto; border-radius:14px; }

  /* ── V1.2.2: mobile menu — page links live behind a ☰ button ──
     On desktop nothing changes. On phones the inline links hide, the
     ☰ button appears, and tapping it opens a glass panel with every
     page (the checkbox keeps it working with no scripts). */
  .lnav{ flex-wrap:wrap; }
  .mmchk{ position:absolute; opacity:0; pointer-events:none; }
  .mmbtn{ display:none; }
  .mmenu{ display:none; }
  @media (max-width:640px){
    .mmbtn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:38px;
      border-radius:999px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.85);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9); font-size:19px; line-height:1; color:var(--ink); cursor:pointer; }
    .mmchk:checked ~ .mmbtn{ background:linear-gradient(135deg,#0E7C86,#14B8C4); color:#fff; }
    .mmchk:checked ~ .mmenu{ display:flex; }
    .mmenu{ flex-direction:column; flex-basis:100%; gap:2px; margin-top:12px; padding:10px;
      border-radius:18px; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.75); }
    .mmenu a{ padding:11px 14px; border-radius:12px; font:700 15px 'Plus Jakarta Sans'; color:var(--ink); text-decoration:none; }
    .mmenu a:active{ background:rgba(255,255,255,.75); }
    .lnav{ padding:12px 14px; gap:8px; }
    .lnav .logo{ font-size:21px; }
    .lnav a.btn{ padding:8px 13px; font-size:13px; }
  }