/* ============================================================
   LegalNexus — premium light gradient design system
   ============================================================ */

:root{
  --bg:#EDF0F6;
  --bg-soft:#F6F8FC;
  --card:#FFFFFF;
  --ink:#0A0C10;
  --ink-2:#5B6472;
  --ink-3:#8B94A3;
  --line:rgba(16,24,40,.08);
  --line-2:rgba(16,24,40,.14);
  --blue:#A9DCF5;
  --blue-2:#8CCDEE;
  --blue-ink:#0B3C57;
  --violet:#B7A8F7;
  --mint:#8FE3C4;
  --amber:#FFD79B;
  --rose:#FFB4C2;
  --ok:#0F9D6E;
  --warn:#C97A12;
  --bad:#D64560;
  --r-xl:30px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --sh-1:0 2px 10px rgba(20,30,60,.05);
  --sh-2:0 12px 34px rgba(20,30,60,.09);
  --sh-3:0 24px 60px rgba(20,30,60,.14);
  --dock-h:78px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(900px 520px at 8% -6%,rgba(183,168,247,.30),transparent 62%),
    radial-gradient(760px 480px at 96% 2%,rgba(140,205,238,.34),transparent 60%),
    radial-gradient(700px 520px at 50% 108%,rgba(143,227,196,.26),transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  font-size:15px;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;font-weight:750}
h1{font-size:clamp(30px,5vw,46px);line-height:1.05}
h2{font-size:clamp(20px,2.6vw,26px);line-height:1.15}
h3{font-size:17px}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.muted{color:var(--ink-2)}
.tiny{font-size:12px}
.small{font-size:13px}
.strong{font-weight:700}
.center{text-align:center}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------------- shell */
.shell{max-width:1200px;margin:0 auto;padding-inline:18px}
.app-main{padding-bottom:calc(var(--dock-h) + 26px);min-height:70vh}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:12px}
.row.wrap{flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grow{flex:1;min-width:0}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-16{gap:16px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hide-mobile{display:block}
.only-mobile{display:none}

/* ---------------------------------------------------------------- header */
.topbar{position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.4) blur(14px);
  background:linear-gradient(180deg,rgba(246,248,252,.92),rgba(246,248,252,.66));
  border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:14px;padding-block:clamp(9px,1.1vw,13px);min-height:58px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em;font-size:19px}
.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#171A21,#3A3F4C);box-shadow:var(--sh-1);font-size:16px}
.nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.nav a{padding:9px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2)}
.nav a:hover{background:rgba(255,255,255,.85);color:var(--ink)}
.nav a.on{background:var(--ink);color:#fff}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  padding:13px 22px;border-radius:999px;font-weight:680;font-size:14.5px;background:var(--ink);color:#fff;
  box-shadow:var(--sh-2);transition:transform .16s ease,box-shadow .16s ease,opacity .16s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-3)}
.btn:active{transform:translateY(0)}
.btn.block{width:100%}
.btn.lg{padding:17px 26px;font-size:16px}
.btn.sm{padding:9px 15px;font-size:13px}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:var(--sh-1);border:1px solid var(--line)}
.btn.soft{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn.blue{background:linear-gradient(135deg,#7CC6ED,#5AA9DC);color:#04293C}
.btn.danger{background:linear-gradient(135deg,#F0607E,#D64560)}
.btn.ok{background:linear-gradient(135deg,#2BB98A,#0F9D6E)}
.btn[disabled]{opacity:.5;pointer-events:none}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);box-shadow:var(--sh-1);cursor:pointer;flex:0 0 auto;transition:transform .16s}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn.dark{background:var(--ink);color:#fff;border-color:transparent}
.icon-btn.sm{width:36px;height:36px;font-size:13px}
.swipe{position:relative;padding-left:64px}
.swipe .knob{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--violet));display:grid;place-items:center;font-size:20px}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:20px;border:1px solid rgba(255,255,255,.7)}
.card.flat{box-shadow:var(--sh-1)}
.card.pad-0{padding:0;overflow:hidden}
.glass{background:rgba(255,255,255,.66);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 14px}
.section-head a{font-size:13.5px;font-weight:650;color:var(--ink-2)}

.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.86);border:1px solid var(--line);font-size:13px;font-weight:600;white-space:nowrap}
.chip.solid{background:var(--ink);color:#fff;border-color:transparent}
.chip.tint{background:linear-gradient(135deg,rgba(169,220,245,.5),rgba(183,168,247,.35));border-color:transparent;color:var(--blue-ink)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px}
.badge.ok{background:rgba(15,157,110,.12);color:var(--ok)}
.badge.warn{background:rgba(201,122,18,.14);color:var(--warn)}
.badge.bad{background:rgba(214,69,96,.12);color:var(--bad)}
.badge.info{background:rgba(90,169,220,.16);color:#15618C}
.badge.grey{background:rgba(16,24,40,.07);color:var(--ink-2)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;box-shadow:var(--sh-3);
  background:#05070C;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.hero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(620px 420px at 24% 34%,rgba(124,198,237,.55),transparent 62%),
    radial-gradient(520px 420px at 74% 22%,rgba(167,139,250,.45),transparent 60%),
    radial-gradient(520px 380px at 60% 92%,rgba(45,212,191,.35),transparent 62%)}
.hero>*{position:relative}
.hero h1{color:#fff}
.hero-art{position:absolute;right:-2%;top:4%;width:min(48%,420px);opacity:.98;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.hero-copy{max-width:560px}
.hero .eyebrow{color:rgba(255,255,255,.72)}

.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:8px 8px 8px 20px;
  box-shadow:var(--sh-2);border:1px solid var(--line)}
.searchbar input{border:0;outline:0;flex:1;min-width:0;font-size:15px;background:transparent;padding:10px 0}
.searchbar select{border:0;outline:0;background:transparent;font-size:14px;font-weight:600;max-width:150px}

/* ------------------------------------------------------------ blue promo */
.promo{position:relative;border-radius:var(--r-lg);padding:22px;color:var(--blue-ink);overflow:hidden;
  background:linear-gradient(135deg,#B6E1F7,#8FCDEC 62%,#7FC0E8);box-shadow:var(--sh-2)}
.promo h2{color:#062B3F}
.promo .dots{display:flex;gap:5px;align-items:center;margin-bottom:14px}
.promo .dots i{width:7px;height:7px;border-radius:50%;background:rgba(6,43,63,.35);display:block}
.promo .dots i:first-child{width:9px;height:9px;background:#062B3F}
.promo .go{position:absolute;right:18px;top:18px;width:46px;height:46px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:var(--sh-1);color:var(--blue-ink);transition:transform .25s ease}
.stack-faces{display:flex}
.stack-faces img,.stack-faces span{width:42px;height:42px;border-radius:50%;border:3px solid #fff;margin-left:-12px;
  object-fit:cover;background:#dfe7f1;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.stack-faces>*:first-child{margin-left:0}

/* ------------------------------------------------------------ lawyer card */
.lawyer{position:relative;border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-2);overflow:hidden;
  display:flex;min-height:230px;transition:transform .18s ease,box-shadow .18s}
.lawyer:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.lawyer .info{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.lawyer .photo{width:44%;flex:0 0 44%;position:relative;background:linear-gradient(160deg,#EEF3F9,#DCE6F1)}
.lawyer .photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.lawyer .name{font-size:20px;font-weight:760;letter-spacing:-.03em;line-height:1.1}
.lawyer .loc{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:5px}
.lawyer .actions{display:flex;gap:8px;margin-top:auto}
.won-chip{position:absolute;left:18px;top:18px;z-index:2}

.mini{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-1)}
.mini img{width:52px;height:52px;border-radius:16px;object-fit:cover;object-position:top center;flex:0 0 auto;background:#e8eef6}

/* ------------------------------------------------------------ profile */
.profile-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(160deg,#F2F5FA,#E3EAF3);
  padding:24px;min-height:300px;display:flex;box-shadow:var(--sh-2)}
.profile-hero .ph-copy{position:relative;z-index:2;max-width:58%}
.profile-hero .ph-img{position:absolute;right:0;bottom:0;top:0;height:100%;width:auto;max-width:52%;
  object-fit:cover;object-position:center top;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%);mask-image:linear-gradient(90deg,transparent,#000 14%)}
@media (max-width:640px){
  .profile-hero{min-height:260px;padding:18px}
  .profile-hero .ph-copy{max-width:62%}
  .profile-hero .ph-img{max-width:46%}
}
.price{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}

.statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.statbar .s{background:#fff;border-radius:var(--r-md);padding:14px;box-shadow:var(--sh-1)}
.statbar .s b{display:block;font-size:17px;letter-spacing:-.02em}
.statbar .s span{font-size:12px;color:var(--ink-2)}

.datestrip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.datestrip::-webkit-scrollbar{display:none}
.datestrip .d{flex:0 0 auto;width:66px;padding:12px 0;border-radius:18px;text-align:center;background:#fff;
  box-shadow:var(--sh-1);cursor:pointer;border:2px solid transparent;transition:.15s}
.datestrip .d b{display:block;font-size:19px;letter-spacing:-.02em}
.datestrip .d span{font-size:11.5px;color:var(--ink-2)}
.datestrip .d.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.datestrip .d.on span{color:rgba(255,255,255,.7)}
.datestrip .d.off{opacity:.42;pointer-events:none}

.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.slotgrid label{position:relative}
.slotgrid input{position:absolute;opacity:0;pointer-events:none}
.slotgrid span{display:block;text-align:center;padding:11px 6px;border-radius:14px;background:#fff;
  box-shadow:var(--sh-1);font-size:13.5px;font-weight:650;cursor:pointer;border:2px solid transparent}
.slotgrid input:checked + span{background:var(--ink);color:#fff}
.slotgrid input:disabled + span{opacity:.35;cursor:not-allowed;text-decoration:line-through}

/* ------------------------------------------------------------ forms */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12.5px;font-weight:680;color:var(--ink-2);margin-bottom:7px}
.input,select.input,textarea.input{width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--line-2);
  background:#fff;outline:0;font-size:15px;box-shadow:var(--sh-1);transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:#7CC6ED;box-shadow:0 0 0 4px rgba(124,198,237,.22)}
textarea.input{min-height:110px;resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6472' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.pickers{display:flex;flex-wrap:wrap;gap:8px}
.pickers label{position:relative}
.pickers input{position:absolute;opacity:0;pointer-events:none}
.pickers span{display:inline-block;padding:9px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:13px;font-weight:620;cursor:pointer;box-shadow:var(--sh-1);transition:.14s}
.pickers input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.rangewrap{display:flex;align-items:center;gap:14px}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;flex:1;
  background:linear-gradient(90deg,var(--violet),var(--blue-2));outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:var(--sh-2);border:2px solid var(--ink);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:pointer}
.help{font-size:12px;color:var(--ink-3);margin-top:6px}

/* ------------------------------------------------------------ steps */
.steps{display:flex;gap:8px;margin-bottom:22px}
.steps .st{flex:1;height:6px;border-radius:99px;background:rgba(16,24,40,.1)}
.steps .st.on{background:linear-gradient(90deg,var(--violet),var(--blue-2))}

/* ------------------------------------------------------------ portal */
.portal{display:grid;grid-template-columns:246px minmax(0,1fr);gap:24px;padding-top:24px}
.side{position:sticky;top:82px;align-self:start}
.side .menu{display:flex;flex-direction:column;gap:4px}
.side .menu a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:15px;font-weight:620;font-size:14px;color:var(--ink-2)}
.side .menu a:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.side .menu a.on{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.side .menu a .ic{width:22px;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.side .menu a .cnt{margin-left:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:2px 7px;font-weight:700}

.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi .k{background:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1)}
.kpi .k b{display:block;font-size:28px;letter-spacing:-.04em;line-height:1.1}
.kpi .k span{font-size:12.5px;color:var(--ink-2)}
.kpi .k .dot{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;margin-bottom:10px}

.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:14px;align-items:center;background:#fff;border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-1)}
.item .when{flex:0 0 58px;text-align:center;border-radius:14px;padding:8px 0;background:linear-gradient(135deg,#F1F5FA,#E6EDF6)}
.item .when b{display:block;font-size:18px;letter-spacing:-.02em}
.item .when span{font-size:11px;color:var(--ink-2)}

table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:10px 12px}
table.tbl td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:middle}
table.tbl tr:hover td{background:rgba(246,248,252,.8)}

/* ------------------------------------------------------------ calendar */
.cal{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:18px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-grid .h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);text-align:center;padding:6px 0;font-weight:700}
.cal-grid .c{min-height:86px;min-width:0;overflow:hidden;border-radius:14px;background:var(--bg-soft);padding:7px;border:1px solid transparent;position:relative}
.cal-grid .c.dim{opacity:.38}
.cal-grid .c.today{border-color:var(--ink);background:#fff}
.cal-grid .c .n{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.cal-grid .c .ev{display:block;font-size:10.5px;font-weight:650;padding:3px 6px;border-radius:8px;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.hearing{background:rgba(214,69,96,.14);color:#A32A44}
.ev.filing{background:rgba(201,122,18,.16);color:#8A530A}
.ev.meeting{background:rgba(90,169,220,.18);color:#15618C}
.ev.reminder{background:rgba(15,157,110,.14);color:#0B6B4C}
.ev.appt{background:rgba(167,139,250,.2);color:#5B3FC0}

/* ------------------------------------------------------------ chat */
.chat{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;height:calc(100vh - 220px);min-height:460px}
.chat .threads{overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.chat .pane{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);display:flex;flex-direction:column;overflow:hidden}
.chat .msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.bub{max-width:72%;padding:11px 15px;border-radius:18px;font-size:14.3px;line-height:1.45;box-shadow:var(--sh-1)}
.bub.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.bub.you{align-self:flex-start;background:#F1F4F9;border-bottom-left-radius:6px}
.bub .t{display:block;font-size:10.5px;opacity:.6;margin-top:5px}
.chat form{display:flex;gap:9px;padding:12px;border-top:1px solid var(--line)}

/* ------------------------------------------------------------ dock */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;display:none;
  align-items:center;gap:6px;padding:8px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.9)}
.dock a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--ink-2);position:relative}
.dock a.on{background:var(--ink);color:#fff}
.dock a .cnt{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--bad)}

/* ------------------------------------------------------------ misc */
.flashes{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;width:min(520px,92vw)}
.flash{padding:13px 18px;border-radius:16px;background:#fff;box-shadow:var(--sh-3);font-size:14px;font-weight:620;
  border-left:4px solid var(--ok);animation:drop .35s ease}
.flash.err{border-left-color:var(--bad)}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

.empty{text-align:center;padding:44px 20px;color:var(--ink-2)}
.empty .em{width:66px;height:66px;border-radius:22px;margin:0 auto 14px;display:grid;place-items:center;color:#3C4658;background:linear-gradient(135deg,rgba(183,168,247,.26),rgba(140,205,238,.30))}

.install-banner{display:none;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--r-md);padding:14px 16px;margin-top:16px}
.install-banner .btn{background:#fff;color:var(--ink);box-shadow:none}

.footer{margin-top:46px;padding:30px 0 40px;border-top:1px solid var(--line);color:var(--ink-2);font-size:13.5px}
.footer a{color:var(--ink-2)}
.footer a:hover{color:var(--ink)}

.area-tile{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-md);background:#fff;
  box-shadow:var(--sh-1);transition:transform .16s,box-shadow .16s}
.area-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.area-tile .em{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#28334C;background:linear-gradient(135deg,rgba(183,168,247,.30),rgba(140,205,238,.34))}
.area-tile b{font-size:14px;letter-spacing:-.02em}
.area-tile span{font-size:12px;color:var(--ink-2);line-height:1.35}

.home-split{display:grid;gap:16px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
@media (max-width:900px){.home-split{grid-template-columns:1fr}}
.search-split{display:grid;gap:20px;grid-template-columns:268px minmax(0,1fr);align-items:start}
@media (max-width:900px){.search-split{grid-template-columns:1fr}}
.two-col{display:grid;gap:16px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

.ratio-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top center;border-radius:var(--r-md);background:#e9eff6}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .portal{grid-template-columns:1fr}
  .side{display:none}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .chat{grid-template-columns:1fr;height:auto}
  .chat .threads{max-height:230px}
  .chat .pane{height:66vh}
}
@media (max-width:820px){
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{min-height:500px}
  .hero-art{width:46%;right:2%;top:6%;bottom:auto;opacity:.9}
  .profile-hero .ph-copy{max-width:54%}
}
@media (max-width:640px){
  body{font-size:14.6px}
  .shell{padding-inline:14px}
  .nav,.hide-mobile{display:none}
  .only-mobile{display:block}
  .dock{display:flex}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .kpi .k b{font-size:23px}
  .lawyer{min-height:210px}
  .lawyer .photo{width:40%;flex:0 0 40%}
  .lawyer .name{font-size:17px}
  .cal-grid .c{min-height:58px;padding:4px}
  .cal-grid .c .ev{font-size:9px;padding:2px 4px}
  .card{padding:16px;border-radius:var(--r-md)}
  .price{font-size:36px}
  table.tbl{font-size:13px}
  table.tbl td,table.tbl th{padding:10px 8px}
}
@media (max-width:440px){
  .statbar{gap:8px}
  .statbar .s{padding:11px 9px}
  .statbar .s b{font-size:15px}
  .statbar .s span{font-size:11px}
}

@media (display-mode:standalone){
  .topbar{padding-top:env(safe-area-inset-top)}
  .dock{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media print{.topbar,.dock,.footer,.btn{display:none!important}}


/* ============================================================
   Icons, SVG chrome and jQuery-driven motion
   ============================================================ */
.ic{display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.ic.gold{color:#E9A13B}
.btn .ic,.chip .ic,.badge .ic,.item .ic{vertical-align:-.2em}
.icon-btn .ic,.dock a .ic,.kpi .k .dot .ic,.tile-ic .ic,.empty .em .ic,.area-tile .em .ic,.choose-ic .ic{vertical-align:0}
.stars{display:inline-flex;gap:2px;align-items:center;line-height:1}
.stars .on{color:#E9A13B;display:inline-flex}
.stars .off{color:rgba(16,24,40,.20);display:inline-flex}
.tile-ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#28334C;
  background:linear-gradient(135deg,rgba(183,168,247,.30),rgba(140,205,238,.34))}
.choose-ic{width:72px;height:72px;border-radius:24px;margin:0 auto;display:grid;place-items:center;color:#28334C;
  background:linear-gradient(135deg,rgba(183,168,247,.30),rgba(140,205,238,.34));box-shadow:var(--sh-1)}
.more{display:inline-flex;align-items:center;gap:5px}
.more .ic{transition:transform .22s ease}
.more:hover .ic{transform:translateX(3px)}
.promo:hover .go{transform:translate(2px,-2px)}
.ev .ic{vertical-align:-.15em;margin-right:2px}
.lawyer .loc .ic{color:var(--bad)}

/* hero decoration */
.hero-glow{position:absolute;inset:0;pointer-events:none;opacity:.55}
.card-sheen{position:relative;overflow:hidden}

/* ---- motion ---------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none}
.btn,.icon-btn,.area-tile,.mini,.item,.chip{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);animation:rip .62s ease-out forwards}
.btn.ghost .ripple,.btn.soft .ripple,.icon-btn .ripple,.area-tile .ripple,.mini .ripple,.item .ripple,.chip .ripple{
  background:radial-gradient(circle,rgba(20,30,60,.20),rgba(20,30,60,0) 70%)}
@keyframes rip{to{transform:scale(2.8);opacity:0}}

.wave{display:inline-flex;transform-origin:70% 70%;animation:wave 3s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-9deg)}45%{transform:rotate(9deg)}}

.swipe-arrows{display:inline-flex;animation:nudge 1.7s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.pulse-dot{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.skel{background:linear-gradient(90deg,rgba(16,24,40,.06),rgba(16,24,40,.12),rgba(16,24,40,.06));
  background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:10px}
@keyframes shimmer{to{background-position:-200% 0}}

.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .wave,.swipe-arrows,.spin,.pulse-dot,.skel,.ripple{animation:none}
  *{scroll-behavior:auto!important}
}

.topbar{transition:box-shadow .25s ease,background .25s ease}
.topbar.shrunk{box-shadow:0 8px 26px rgba(20,30,60,.08);background:linear-gradient(180deg,rgba(246,248,252,.97),rgba(246,248,252,.86))}
.slotgrid span,.pickers span{transition:transform .14s ease,background .16s ease,color .16s ease}

/* hero SVG chrome */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../img/rings.svg") center/cover no-repeat;opacity:.85;mix-blend-mode:screen}
.hero-art{animation:float 7.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-1.2deg)}}
@media (prefers-reduced-motion:reduce){.hero-art{animation:none}}

/* ============================================================
   Density pass — fluid spacing so installed (standalone) windows
   and small laptops don't read as "zoomed in".
   ============================================================ */
:root{
  --gutter:clamp(14px,2.4vw,26px);
  --card-pad:clamp(15px,1.5vw,20px);
  --r-xl:clamp(20px,2.1vw,28px);
  --r-lg:clamp(16px,1.7vw,22px);
  --r-md:clamp(13px,1.3vw,17px);
  --dock-h:68px;
  --rail:72px;
  --side-w:clamp(190px,17vw,240px);
}

body{font-size:clamp(13.6px,.26vw + 13.1px,15.2px)}
h1{font-size:clamp(25px,3.3vw,42px)}
h2{font-size:clamp(18px,1.9vw,25px)}
h3{font-size:clamp(15px,1.1vw,17px)}

.shell{
  max-width:1320px;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.card{padding:var(--card-pad)}
.app-main{padding-bottom:30px}

.hero{min-height:clamp(340px,38vw,430px);padding:clamp(18px,2vw,26px)}
.profile-hero{min-height:clamp(230px,24vw,300px);padding:clamp(16px,1.8vw,24px)}
.price{font-size:clamp(30px,3.4vw,44px)}

.kpi{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.kpi .k{padding:clamp(13px,1.3vw,18px)}
.kpi .k b{font-size:clamp(21px,2.2vw,28px)}
.statbar .s{padding:clamp(11px,1.2vw,14px)}
.section-head{margin:clamp(20px,2.4vw,30px) 0 12px}
.portal{grid-template-columns:var(--side-w) minmax(0,1fr);gap:clamp(14px,1.6vw,24px);padding-top:clamp(16px,1.8vw,24px)}
.btn{padding:clamp(11px,1.1vw,13px) clamp(17px,1.8vw,22px)}
.btn.lg{padding:clamp(14px,1.5vw,17px) clamp(20px,2.2vw,26px);font-size:clamp(15px,1.1vw,16px)}
.icon-btn{width:clamp(38px,3.4vw,44px);height:clamp(38px,3.4vw,44px)}
.chip{padding:clamp(6px,.7vw,8px) clamp(11px,1.2vw,14px)}
.datestrip .d{width:clamp(56px,5.4vw,66px);padding:clamp(9px,1vw,12px) 0}
.cal-grid .c{min-height:clamp(58px,6.4vw,86px)}

/* ---- 760–1150px: sidebar becomes a compact icon rail ---------------- */
@media (min-width:760px) and (max-width:1150px){
  .portal{grid-template-columns:var(--rail) minmax(0,1fr)}
  .side{display:block}
  .side > .card.flat{padding:8px;display:grid;place-items:center}
  .side > .card.flat .grow{display:none}
  .side > .card.flat img{width:40px;height:40px}
  .side .menu a{font-size:0;justify-content:center;padding:12px 0;position:relative;gap:0}
  .side .menu a .ic{width:auto}
  .side .menu a .cnt{position:absolute;top:5px;right:12px;font-size:9px;padding:1px 5px;margin:0}
  .side .install-banner{display:none!important}
  .two-col{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .search-split{grid-template-columns:230px minmax(0,1fr)}
}

/* ---- below 760: no sidebar, floating dock takes over ---------------- */
@media (max-width:760px){
  .side{display:none}
  .portal{grid-template-columns:1fr}
  .nav,.hide-mobile{display:none}
  .only-mobile{display:block}
  .dock{display:flex}
  .app-main{padding-bottom:calc(var(--dock-h) + 18px + env(safe-area-inset-bottom))}
  .two-col,.search-split,.home-split{grid-template-columns:1fr}
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat{grid-template-columns:1fr;height:auto}
  .chat .threads{max-height:210px}
  .chat .pane{height:62vh}
}
@media (max-width:720px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero{min-height:clamp(330px,74vw,420px)}
  .hero-art{width:44%;right:1%;top:5%;bottom:auto}
  .hero h1{font-size:clamp(27px,8.2vw,38px)}
  .hero p{font-size:13.6px;margin:10px 0 18px!important}
}

/* ---- dock ------------------------------------------------------------ */
.dock{gap:4px;padding:7px;bottom:14px}
.dock a{width:clamp(44px,11.5vw,50px);height:clamp(44px,11.5vw,50px)}
.dock a .ic{width:20px;height:20px}

/* ---- installed / standalone ------------------------------------------ */
@media all and (display-mode:standalone){
  body{font-size:clamp(13.4px,.24vw + 13px,14.8px)}
  .topbar{padding-top:env(safe-area-inset-top)}
  .topbar-in{padding-block:clamp(8px,1vw,11px);min-height:54px}
  .hero{min-height:clamp(320px,36vw,400px)}
  .section-head{margin-top:clamp(18px,2vw,26px)}
  .dock{bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media all and (display-mode:window-controls-overlay){
  .topbar{padding-top:env(titlebar-area-height,0px)}
}

@media (max-width:720px){
  .hero-art{width:38%;right:0;top:2%;opacity:.9}
  .hero-copy{position:relative;z-index:2}
}

.hero-art{max-width:320px}
@media (min-width:721px) and (max-width:900px){
  .hero-art{width:min(38%,280px);right:3%;top:8%;bottom:auto}
  .hero{min-height:clamp(320px,34vw,390px)}
}

/* grid/flex children must be allowed to shrink, or wide content
   (tables, date strips, the month grid) blows the page out sideways */
.portal,.stack,.two-col,.home-split,.search-split,.grid,.kpi,.list,.chat{min-width:0}
.portal > *,.stack > *,.two-col > *,.home-split > *,.search-split > *,
.grid > *,.kpi > *,.list > *,.chat > *,.row > *{min-width:0}
.row > .icon-btn,.row > .btn,.row > img,.row > .badge,.row > .chip{min-width:auto}
.cal,.card.pad-0{max-width:100%}

.cal-month{min-width:132px;text-align:center;white-space:nowrap}
@media (max-width:560px){
  .cal-nav{width:100%;justify-content:space-between}
  .cal-month{min-width:0;flex:1;font-size:14px}
  .cal-nav .btn.sm{padding:8px 12px}
}

/* the header must never be squeezed by a .shell padding shorthand */
.topbar-in > *{flex-shrink:0}
.topbar-in .brand{min-width:0;overflow:hidden}
.topbar-in .brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .avatar-link img{width:clamp(34px,8vw,40px);height:clamp(34px,8vw,40px)}
@media (max-width:760px){
  .topbar-in{gap:10px}
  .brand{font-size:17px}
  .brand-mark{width:32px;height:32px;border-radius:10px}
}

@media all and (display-mode:standalone){
  .topbar-in{padding-block:clamp(8px,1vw,11px);min-height:52px}
}

/* below 900 the inline nav no longer fits beside the brand + actions,
   so it hands over to the floating dock */
@media (max-width:900px){
  .nav{display:none}
  .dock{display:flex}
  .app-main{padding-bottom:calc(var(--dock-h) + 18px + env(safe-area-inset-bottom))}
}
@media (min-width:761px) and (max-width:900px){
  .dock{bottom:18px}
}
.topbar-in .nav{flex-shrink:1;min-width:0;overflow:hidden}

/* `.wrap` was only wired up for `.row` — `.between wrap` never wrapped */
.wrap{flex-wrap:wrap}
@media (max-width:560px){
  .cal-nav{flex:1 1 100%}
}

/* ---- advocate portrait: a contained thumbnail, not a full-bleed photo ---- */
.profile-hero{display:flex;align-items:center;gap:clamp(14px,2vw,26px);min-height:0;
  padding:clamp(16px,1.8vw,24px)}
.profile-hero .ph-copy{max-width:none;flex:1 1 auto;min-width:0}
.profile-hero .ph-img{
  position:static;flex:0 0 auto;
  width:clamp(112px,13vw,168px);height:clamp(112px,13vw,168px);max-width:none;
  border-radius:clamp(18px,2vw,26px);
  object-fit:cover;object-position:center top;
  box-shadow:var(--sh-2);border:3px solid rgba(255,255,255,.85);
  -webkit-mask-image:none;mask-image:none}
@media (max-width:640px){
  .profile-hero{gap:14px}
  .profile-hero .ph-copy{max-width:none}
  .profile-hero .ph-img{width:clamp(96px,26vw,124px);height:clamp(96px,26vw,124px);border-width:2px}
}

/* ---- listing card: give the text more room than the photo ---- */
.lawyer .photo{width:34%;flex:0 0 34%;max-width:168px}
@media (max-width:640px){.lawyer .photo{width:36%;flex:0 0 36%;max-width:140px}}
.ph-headline{margin:0 0 12px;max-width:56ch;font-size:clamp(13px,1vw,14.5px);color:var(--ink-2);line-height:1.45}
@media (max-width:640px){.ph-headline{display:none}}

/* =====================================================================
   Reference pass — appointment-style home, category circles,
   compact advocate cards, availability rows, swipe-to-book
   ===================================================================== */

body{
  background:#E9EEF8;
  background-image:
    radial-gradient(820px 460px at 6% -8%,rgba(168,186,247,.34),transparent 62%),
    radial-gradient(700px 440px at 98% 0%,rgba(150,198,238,.32),transparent 60%),
    radial-gradient(640px 480px at 50% 110%,rgba(186,208,244,.30),transparent 62%);
}

/* ---- featured / next-up card ---------------------------------------- */
.feature{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--r-lg);
  padding:clamp(12px,1.2vw,16px);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.feature img{width:clamp(54px,6vw,68px);height:clamp(54px,6vw,68px);border-radius:18px;
  object-fit:cover;object-position:center top;flex:0 0 auto;background:#e8eef6}
.feature .f-body{flex:1;min-width:0}
.feature .f-name{font-weight:750;letter-spacing:-.02em;font-size:clamp(14.5px,1.1vw,16px);display:block}
.feature .f-sub{font-size:12.5px;color:var(--ink-2)}
.feature .f-meta{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}

.rate{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:999px;background:rgba(233,161,59,.14);color:#96610F}
.rate .ic{color:#E9A13B}

/* ---- category circles ------------------------------------------------ */
.catrow{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.catrow::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;width:clamp(62px,7vw,78px);text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:7px;font-size:11.5px;font-weight:620;color:var(--ink-2)}
.cat-ic{width:clamp(48px,5.2vw,58px);height:clamp(48px,5.2vw,58px);border-radius:50%;display:grid;
  place-items:center;background:#fff;box-shadow:var(--sh-1);color:#26324A;
  transition:transform .18s ease,background .18s ease,color .18s ease}
.cat:hover .cat-ic,.cat.on .cat-ic{background:var(--ink);color:#fff;transform:translateY(-2px)}
.cat span:last-child{display:block;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}

/* ---- compact advocate card (grid) ------------------------------------ */
.lx{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.lx:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.lx-photo{display:block;position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,#EEF3F9,#DCE6F1)}
.lx-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lx-photo .rate{position:absolute;left:9px;top:9px;background:rgba(255,255,255,.92);color:#4A3A1A;
  box-shadow:var(--sh-1);backdrop-filter:blur(6px)}
.lx-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.lx-name{font-size:14px;font-weight:750;letter-spacing:-.02em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-spec{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.lx-fee{font-size:12px;font-weight:700}
.btn.xs{padding:6px 13px;font-size:12px;box-shadow:var(--sh-1);gap:5px}

/* ---- availability row (search results) ------------------------------- */
.lr{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(12px,1.2vw,16px);
  display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease}
.lr:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.lr-top{display:flex;align-items:flex-start;gap:12px}
.lr-id{flex:1;min-width:0}
.lr-name{font-size:clamp(15px,1.2vw,17.5px);font-weight:760;letter-spacing:-.025em;line-height:1.2;display:block}
.lr-sub{font-size:12.5px;color:var(--ink-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-chips{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.lr-photo{width:clamp(62px,6.6vw,84px);height:clamp(62px,6.6vw,84px);border-radius:18px;overflow:hidden;
  flex:0 0 auto;background:#e8eef6}
.lr-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.lr-avail{border-top:1px solid var(--line);padding-top:11px;display:flex;align-items:center;gap:10px}
.lr-avail .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  writing-mode:horizontal-tb;flex:0 0 auto}
.daystrip{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;padding-bottom:2px}
.daystrip::-webkit-scrollbar{display:none}
.daystrip a{flex:0 0 auto;min-width:42px;padding:6px 8px;border-radius:12px;text-align:center;
  background:var(--bg-soft);font-size:11px;font-weight:650;color:var(--ink-2);line-height:1.25;
  transition:background .16s ease,color .16s ease}
.daystrip a b{display:block;font-size:13.5px;color:var(--ink);letter-spacing:-.02em}
.daystrip a:hover{background:var(--ink);color:#fff}
.daystrip a:hover b{color:#fff}
.lr-go{flex:0 0 auto}

/* ---- swipe to book --------------------------------------------------- */
.swipe-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:15px 22px 15px 68px;border-radius:999px;background:var(--ink);color:#fff;
  font-weight:700;font-size:15px;box-shadow:var(--sh-2);overflow:hidden;border:0;cursor:pointer}
.swipe-cta .knob{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;display:grid;place-items:center;color:#06283B;
  background:linear-gradient(135deg,#9FD7F3,#B9A5FF);transition:transform .25s ease}
.swipe-cta:hover .knob{transform:translateY(-50%) translateX(4px)}
.swipe-cta .sc-arrows{display:inline-flex;opacity:.6;animation:nudge 1.7s ease-in-out infinite}

/* ---- month / day scheduler chips ------------------------------------- */
.sched-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sched-month{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--bg-soft);font-size:12.5px;font-weight:650}

@media (max-width:640px){
  .lr-avail{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"lbl lbl" "days go";gap:8px 10px;align-items:center}
  .lr-avail .lbl{grid-area:lbl;font-size:10px}
  .lr-avail .daystrip{grid-area:days}
  .lr-avail .lr-go{grid-area:go}
}

/* search bar leading icon + mobile filter sheet */
.searchbar .ic{flex:0 0 auto;color:var(--ink-3)}
.icon-btn.only-mobile{display:none}
@media (max-width:900px){
  .icon-btn.only-mobile{display:grid}
  #filters{display:none}
  #filters.open{display:block;animation:drop .3s ease}
}

/* compact-advocate grid keeps two columns on a phone, like the reference */
.grid-lx{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.grid-lx{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.grid-lx{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.grid-lx{grid-template-columns:repeat(6,minmax(0,1fr))}}

.daystrip a.slot{background:rgba(140,205,238,.22);color:#15618C}
.daystrip a.slot b{color:#0B3C57}
.daystrip a.slot:hover{background:var(--ink)}
.daystrip a.slot:hover b{color:#fff}

/* on a phone the fee card + book CTA come before the long detail column */
@media (max-width:900px){
  .adv-cols{display:flex;flex-direction:column;align-items:stretch}
  .adv-cols > :last-child{order:-1}
}

/* ============================================================
   Plans & pricing
   ============================================================ */
.planswitch{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.7);
  border:1px solid var(--line);box-shadow:var(--sh-1);margin:0 auto;justify-self:center}
.planswitch{display:flex;width:fit-content;margin-inline:auto}
.planswitch a{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:999px;
  font-size:13.5px;font-weight:650;color:var(--ink-2)}
.planswitch a.on{background:var(--ink);color:#fff;box-shadow:var(--sh-1)}

.plangrid{display:grid;gap:clamp(12px,1.5vw,18px);grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
@media (max-width:900px){.plangrid{grid-template-columns:1fr}}
.plan{position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;border:2px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease}
.plan:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.plan.featured{border-color:var(--ink);box-shadow:var(--sh-2)}
.plan.mine{border-color:var(--ok)}
.plan-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 13px;border-radius:999px;white-space:nowrap}
.plan-price{display:flex;align-items:baseline;gap:8px;padding:12px 0 6px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:14px}
.plan-price b{font-size:clamp(26px,3vw,34px);letter-spacing:-.04em;line-height:1}
.plan-price span{font-size:12.5px;color:var(--ink-2)}
.plan-perks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan-perks li{display:flex;gap:9px;align-items:flex-start;font-size:13.2px;line-height:1.4}
.plan-perks li .ic{flex:0 0 auto;margin-top:1px;color:var(--ok)}
.plan-perks li.lim{color:var(--ink-2)}
.plan-perks li.lim .ic{color:var(--ink-3)}

.plan-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;
  font-weight:700;background:linear-gradient(135deg,rgba(183,168,247,.35),rgba(140,205,238,.38));color:#28334C}

/* verified tick sitting on a portrait */
.vtick{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;background:#fff;box-shadow:var(--sh-1);color:#1D7FD1}
.vtick .ic{color:#1D7FD1}
.lx-photo .vtick{right:7px;bottom:7px;width:24px;height:24px}
.name-verified{display:inline-flex;align-items:center;gap:6px}
.name-verified .ic{color:#1D7FD1}
.plangrid{margin-top:16px}