/* 3pattipearl.store — water / pearl / light.
   Flat and light. Component set deliberately disjoint from every sibling site. */
:root{
  --abyss:#0b3d4d; --tide:#1a8fa8; --shoal:#2fb6c9; --deep:#083039;
  --foam:#e8f4f7; --foam-2:#f3fafb; --nacre:#f4eef2; --nacre-2:#faf6f8;
  --pearl:#ffffff; --line:#d5e6ea; --line-2:#e9f1f3;
  --ink:#0d2a33; --ink-2:#42606a; --ink-3:#7c979f;
  --go:#127a52; --stop:#a92f2f;
  --hold:1140px;
  --face:'Trebuchet MS','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--face);color:var(--ink-2);background:var(--pearl);
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--tide)}

/* ---- brine: thin top strip ---- */
.brine{background:var(--abyss);color:#bfdde4;font-size:.75rem}
.brine-in{max-width:var(--hold);margin:0 auto;padding:7px 20px;display:flex;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.brine b{color:var(--shoal);font-weight:700}

/* ---- tideline: compact sticky header + reading progress ---- */
.tideline{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.tideline-in{max-width:var(--hold);margin:0 auto;padding:10px 20px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.helm{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.helm img{width:38px;height:38px;border-radius:9px;border:1px solid var(--line)}
.helm span{font-size:1.08rem;font-weight:700;color:var(--abyss);letter-spacing:-.3px}
.helm span i{font-style:normal;color:var(--tide)}
.compass{display:none;list-style:none;margin:0;padding:0;gap:2px}
.compass a{display:block;padding:8px 12px;font-size:.85rem;font-weight:600;
  color:var(--ink-2);text-decoration:none;border-radius:20px}
.compass a:hover,.compass a[aria-current]{background:var(--foam);color:var(--abyss)}
.lantern{background:var(--foam);border:1px solid var(--line);color:var(--abyss);
  font-weight:700;font-size:.8rem;padding:8px 13px;border-radius:20px;cursor:pointer}
.compass.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
  background:var(--pearl);border-bottom:1px solid var(--line);padding:8px 14px}
.surfbar{height:2px;background:var(--shoal);width:0}

/* ---- crest: centred hero, facets in a row below ---- */
.crest{background:var(--foam-2);border-bottom:1px solid var(--line-2)}
.crest-in{max-width:900px;margin:0 auto;padding:34px 20px 26px;text-align:center}
.crest-in img.mark{width:104px;height:104px;border-radius:22px;margin:0 auto 16px;border:3px solid var(--pearl)}
.lede-sea{font-size:.7rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--tide);font-weight:700;margin:0 0 9px}
.crest h1{font-size:1.68rem;line-height:1.28;color:var(--abyss);margin:0 0 12px;font-weight:700;letter-spacing:-.4px}
.crest h1 em{font-style:normal;color:var(--tide)}
.crest p.crestsub{font-size:1.02rem;color:var(--ink-2);margin:0 auto 20px;max-width:640px}

.facets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 20px}
.facet{border:1px solid var(--line);background:var(--pearl);padding:9px 14px;min-width:96px}
.facet-k{display:block;font-size:.63rem;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3)}
.facet-v{display:block;font-weight:700;color:var(--abyss);font-size:.95rem;margin-top:2px}

/* ---- dive: buttons, flat pill ---- */
.dive{display:inline-block;font-weight:700;font-size:.95rem;padding:13px 26px;
  text-decoration:none;border-radius:26px;border:1px solid transparent;text-align:center}
.dive-go{background:var(--tide);color:#fff;border-color:var(--deep)}
.dive-go:hover{background:var(--abyss)}
.dive-calm{background:var(--pearl);color:var(--abyss);border-color:var(--line)}
.dive-calm:hover{border-color:var(--tide);color:var(--tide)}
.diverow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 10px}
.divesub{font-size:.78rem;color:var(--ink-3);margin:0}

/* ---- pearlbox: horizontal pill contents ---- */
.pearlbox{max-width:var(--hold);margin:0 auto;padding:20px}
.pearlbox-in{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:14px 0}
.pearlbox h2{font-size:.68rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.pills a{display:block;padding:7px 14px;border:1px solid var(--line);border-radius:20px;
  font-size:.83rem;color:var(--ink-2);text-decoration:none;background:var(--pearl)}
.pills a:hover{border-color:var(--tide);color:var(--tide);background:var(--foam-2)}

/* ---- band: alternating full-width tinted sections ---- */
.band{padding:36px 0;scroll-margin-top:64px}
.band-tint{background:var(--foam-2)}
.band-in{max-width:var(--hold);margin:0 auto;padding:0 20px}
.swell{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.swell-no{font-size:.7rem;font-weight:700;letter-spacing:1.4px;color:var(--tide);
  border:1px solid var(--line);border-radius:16px;padding:3px 10px;flex:none;background:var(--pearl)}
.band h2{font-size:1.4rem;color:var(--abyss);margin:0;font-weight:700;letter-spacing:-.3px}
.band h3{font-size:1rem;color:var(--tide);margin:1.5em 0 .4em;font-weight:700}
.band p,.band li{font-size:.99rem;color:var(--ink-2)}
.band ul,.band ol{padding-left:19px}
.band li{margin:6px 0}

/* ---- wake: horizontal numbered steps ---- */
.wake{display:flex;flex-direction:column;gap:9px;margin:18px 0;counter-reset:wk;padding:0;list-style:none}
.wake-step{position:relative;border:1px solid var(--line);background:var(--pearl);padding:14px 15px 14px 46px}
.wake-step::before{counter-increment:wk;content:counter(wk);position:absolute;left:14px;top:13px;
  width:22px;height:22px;border-radius:50%;background:var(--tide);color:#fff;
  font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.wake-step b{display:block;color:var(--abyss);margin-bottom:2px;font-size:.94rem}
.wake-step p{margin:0;font-size:.9rem}

/* ---- nacres: screenshots, caption ABOVE ---- */
.nacres{display:flex;flex-direction:column;gap:16px;margin:18px 0}
.nacre{margin:0;border:1px solid var(--line);background:var(--pearl)}
.nacre-cap{background:var(--nacre);border-bottom:1px solid var(--line);
  padding:8px 12px;font-size:.79rem;color:var(--ink-2);font-weight:600}
.nacre img{width:100%}

/* ---- depth/tally: left-accent table ---- */
.depth{overflow-x:auto;margin:18px 0}
table.tally{width:100%;border-collapse:collapse;min-width:400px;font-size:.92rem;background:var(--pearl)}
table.tally caption{caption-side:top;text-align:left;font-size:.7rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:7px}
table.tally th{background:var(--foam);color:var(--abyss);text-align:left;padding:10px 13px;
  font-weight:700;border-bottom:2px solid var(--tide)}
table.tally td{padding:10px 13px;border-bottom:1px solid var(--line-2)}
table.tally tbody tr td:first-child{border-left:3px solid var(--shoal)}
table.tally tbody tr:nth-child(even){background:var(--foam-2)}

/* ---- buoy / reef: notes ---- */
.buoy{border:1px solid var(--line);border-left:4px solid var(--tide);background:var(--foam-2);
  padding:14px 16px;margin:18px 0;font-size:.91rem}
.buoy b{color:var(--abyss)}
.reef{border:1px solid #e8bcbc;border-left:4px solid var(--stop);background:#fdf6f6;
  padding:14px 16px;margin:18px 0;font-size:.91rem;color:#6d2020}

/* ---- askgrid: two-column Q/A cards (not <details>, not <dl>) ---- */
.askgrid{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.ask{border:1px solid var(--line);background:var(--pearl);padding:15px 16px;flex:1 1 100%}
.ask-q{font-weight:700;color:var(--abyss);margin:0 0 6px;font-size:.95rem}
.ask-a{margin:0;font-size:.91rem;color:var(--ink-2)}

/* ---- weigh: pros/cons ---- */
.weigh{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.plus-pan,.minus-pan{border:1px solid var(--line);padding:15px 16px;flex:1 1 100%;background:var(--pearl)}
.plus-pan h3,.minus-pan h3{margin:0 0 8px;font-size:.97rem}
.plus-pan h3{color:var(--go)} .minus-pan h3{color:var(--stop)}
.plus-pan ul,.minus-pan ul{list-style:none;padding:0;margin:0}
.plus-pan li,.minus-pan li{padding:4px 0 4px 19px;position:relative;font-size:.9rem}
.plus-pan li::before{content:"+";position:absolute;left:0;color:var(--go);font-weight:700}
.minus-pan li::before{content:"\2212";position:absolute;left:0;color:var(--stop);font-weight:700}

/* ---- gate: download countdown ---- */
.gatewell{border:2px solid var(--tide);background:var(--foam-2);padding:26px 20px;margin:20px 0;text-align:center}
.gatewell h2{margin:0 0 4px;font-size:1.22rem;color:var(--abyss)}
.ticker{font-size:2.7rem;font-weight:700;color:var(--tide);line-height:1;margin:14px 0 6px}
.ticker.through{color:var(--go)}
.tickmsg{font-size:.9rem;margin:0;color:var(--ink-2)}
.trough{height:5px;background:var(--line);margin:14px auto 0;max-width:320px;overflow:hidden}
.trough i{display:block;height:100%;width:0;background:var(--tide);transition:width .1s linear}
.gateout{display:none;margin-top:15px}
.gateout.through{display:block}

/* ---- urdu ---- */
.urdu-tide{direction:rtl;text-align:right;line-height:2.45;border:1px solid var(--line);
  background:var(--nacre-2);padding:20px;margin:20px 0;
  font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Segoe UI',Tahoma,sans-serif}
.urdu-tide h2,.urdu-tide h3{text-align:right;color:var(--abyss)}
.urdu-tide h2{font-size:1.18rem;margin:0 0 8px}
.urdu-tide ul,.urdu-tide ol{padding-right:19px;padding-left:0}

/* ---- anchorbar: single centred footer ---- */
.anchorbar{background:var(--abyss);color:#a9cbd4;margin-top:32px}
.anchor-in{max-width:760px;margin:0 auto;padding:30px 20px;text-align:center}
.anchor-in h4{color:var(--shoal);font-size:.72rem;letter-spacing:1.7px;text-transform:uppercase;margin:0 0 10px}
.anchor-in p{font-size:.86rem;color:#8fb4bf;margin:0 0 14px}
.driftlinks{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
.driftlinks a{color:#c6e0e7;font-size:.86rem;text-decoration:none}
.driftlinks a:hover{color:var(--shoal)}
.undertow{border-top:1px solid #14505f;padding-top:14px;font-size:.75rem;color:#6d919c}

@media(min-width:720px){
  .crest h1{font-size:2.1rem}
  .compass{display:flex}
  .lantern{display:none}
  .wake{flex-direction:row;flex-wrap:wrap}
  .wake-step{flex:1 1 calc(50% - 5px)}
  .nacres{flex-direction:row;flex-wrap:wrap}
  .nacre{flex:1 1 calc(50% - 8px)}
  .ask{flex:1 1 calc(50% - 6px)}
  .plus-pan,.minus-pan{flex:1 1 calc(50% - 6px)}
}
@media(min-width:1000px){
  .wake-step{flex:1 1 calc(25% - 7px)}
}