/* MIAlink public website ("Ocean Dhow"). Builds on /web/shared/mialink.css tokens. A product of MIA Global Technologies. */
:root{
  --sea:#062A30; --reef:#0D3D45; --chart:#15505A; --foam:#8FBFC2; --spray:#F2F8F8; --coral:#FF7A59; --coral-deep:#E85F3D;
  --ink:#062A30; --ink-2:#3E6468; --rule:#D3E6E7;
  --gutter:clamp(16px,4vw,40px); --max:1200px;
}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body.site{font-size:17px;line-height:1.6;background:var(--spray);color:var(--ink)}
.site h1,.site h2,.site h3{letter-spacing:-.025em}
.site h2{font-size:clamp(30px,3.8vw,46px);line-height:1.08;font-weight:800;max-width:20ch}
.site h3{font-size:19px;line-height:1.3;font-weight:700}
.site p{max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--coral);color:var(--sea);padding:8px 12px;border-radius:6px;z-index:100;font-weight:700}
.skip:focus{left:8px}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);margin-top:16px}

/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--body);padding:15px 22px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}
.cta.coral{background:var(--coral);color:var(--sea)}
.cta.coral:hover{background:var(--coral-deep)}
.cta.ghost{border-color:#3C7178;color:#E6F3F3}
.cta.ghost:hover{border-color:var(--foam)}
.cta.line{border-color:var(--rule);color:var(--ink);background:#fff}
.cta.line:hover{border-color:var(--ink-2)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(6,42,48,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #12464E}
.top .wrap{display:flex;align-items:center;gap:24px;height:68px}
.site .brand{padding:0;color:#fff}
.site .brand b{font-size:22px}
.links{display:flex;gap:4px;margin-left:auto}
.links a{color:#CDE7E8;text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:8px}
.links a:hover{color:#fff;background:var(--reef)}
.top .cta{padding:11px 18px;font-size:15px}
.menu{display:none;margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;color:#fff;font-weight:600;font-size:15px;padding:9px 14px;border:1px solid #2B6670;border-radius:999px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--reef)}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);background:var(--sea);border:1px solid #1D5961;border-radius:14px;padding:8px;min-width:220px;box-shadow:0 20px 40px #0009}
.menu nav a{display:block;color:#E6F3F3;text-decoration:none;padding:11px 12px;border-radius:8px;font-weight:500}
.menu nav a:hover{background:var(--reef)}

/* ---------- hero: the chart ---------- */
.hero{background:var(--sea);color:#E6F3F3;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;padding-top:72px;padding-bottom:88px}
.hero h1{color:#fff;font-size:clamp(42px,6.2vw,80px);line-height:1;letter-spacing:-.04em;font-weight:800;max-width:11ch}
.hero .lede{color:#A9CDD0;max-width:46ch}
.hero .actions{margin-top:32px;gap:12px}
.hero .honest{margin-top:28px;font-size:14px;color:#8FB3B6;max-width:48ch;padding-left:14px;border-left:2px solid var(--coral)}
.chartbox{position:relative}
.chartbox svg{width:100%;height:auto;display:block}
.chartbox .grid-l{stroke:#11434B;stroke-width:1}
.chartbox .contour{fill:none;stroke:#1B5760;stroke-width:1.2}
.chartbox .contour.deep{stroke:#236670}
.chartbox .lane{fill:none;stroke:var(--foam);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;opacity:.75}
.chartbox .lane.hot{stroke:var(--coral);stroke-dasharray:none;stroke-width:2.2;opacity:1}
.chartbox .port{fill:var(--sea);stroke:var(--coral);stroke-width:2.5}
.chartbox .origin{fill:var(--coral)}
.chartbox .lbl{fill:#E6F3F3;font:700 15px var(--body);letter-spacing:-.01em}
.chartbox .sub{fill:#8FBFC2;font:500 12px var(--body)}
.chartbox .tick{fill:#4C8088;font:500 10.5px var(--body)}
.chartbox .dhow{fill:var(--coral)}
.ticket{position:absolute;right:2%;bottom:-9%;background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px 12px;width:min(270px,62%);box-shadow:0 24px 48px #00151A66;font-size:13px}
.ticket .t-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ticket .paid{background:var(--paid-wash);color:var(--paid);font-weight:700;font-size:12px;border-radius:999px;padding:2px 9px}
.ticket .amt{font:800 24px/1.1 var(--display);letter-spacing:-.02em;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.ticket .meta{color:var(--ink-2)}
.ticket .demo{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed var(--rule);color:var(--faint);font-size:11.5px}

@media (prefers-reduced-motion:no-preference){
  .chartbox .lane{animation:lane 1.4s ease-out both}
  .chartbox .lane:nth-of-type(2){animation-delay:.15s}
  .chartbox .lane:nth-of-type(3){animation-delay:.3s}
  .chartbox .lane.hot{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s .9s cubic-bezier(.6,0,.2,1) forwards}
  .ticket{animation:land .5s 2.4s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes lane{from{opacity:0}to{opacity:.75}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes land{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- sections ---------- */
.band{padding:clamp(72px,9vw,128px) 0}
.band.white{background:#fff}
.band.dark{background:var(--sea);color:#D9ECEC}
.band.dark h2{color:#fff}
.band.dark .lede{color:#A9CDD0}
.head{margin-bottom:clamp(36px,5vw,64px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}

/* how it works: one payout's journey, a real sequence */
.voyage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative;counter-reset:leg}
.voyage::before{content:"";position:absolute;left:22px;right:22px;top:22px;border-top:2px dashed #9CC4C6}
.voyage li{position:relative;counter-increment:leg}
.voyage li::before{content:counter(leg);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--spray);border:2px solid var(--sea);font:800 17px var(--display);color:var(--sea);position:relative;margin-bottom:22px}
.voyage li:last-child::before{background:var(--coral);border-color:var(--coral)}
.voyage h3{margin-bottom:8px}
.voyage p{color:var(--ink-2);font-size:16px}
.voyage code{font-size:13.5px;background:#E3EFEF;padding:1px 6px;border-radius:5px}

/* coverage */
.cov{width:100%;border-collapse:collapse;font-size:16px}
.cov th{font-size:14px;color:var(--ink-2);font-weight:600;padding:0 16px 14px 0;border-bottom:2px solid var(--sea);text-align:left}
.cov td{padding:22px 16px 22px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cov .ctry{font:800 24px/1.1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.cov .ccy{display:block;font:600 14px var(--body);color:var(--ink-2);margin-top:4px;letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;border:1.5px solid #B9D6D8;border-radius:999px;padding:4px 12px;font-size:14.5px;font-weight:600;background:#fff;white-space:nowrap}
.chip.fund{border-color:var(--sea);background:var(--sea);color:#fff;font-variant-numeric:tabular-nums}
.fine{font-size:14px;color:var(--ink-2);margin-top:20px}

/* who it's for */
.who{list-style:none;margin:0;padding:0;border-top:2px solid var(--sea)}
.who li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--rule)}
.who h3{font-size:21px}
.who p{color:var(--ink-2)}

/* developers */
.dev{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.dev ul{list-style:none;padding:0;margin:28px 0 32px}
.dev li{padding:12px 0 12px 22px;border-top:1px solid #1A4E56;position:relative}
.dev li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:2px;background:var(--coral);transform:rotate(45deg)}
.dev li b{color:#fff}
.code{background:#03191D;border:1px solid #1A4E56;border-radius:16px;overflow:hidden}
.code .bar{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid #12393F;font-size:13px;color:#8FB3B6}
.code .bar i{width:10px;height:10px;border-radius:50%;background:#1F4C53}
.code .bar span{margin-left:8px}
.code pre{margin:0;padding:18px 20px;overflow:auto;font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#D5EAEA}
.code .k{color:var(--coral)} .code .s{color:#9FE0C8} .code .c{color:#5E8C92}

/* security */
.safe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.safe div{padding:22px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:36px 1fr;gap:14px}
.safe svg{width:28px;height:28px;color:var(--sea)}
.safe h3{margin-bottom:4px}
.safe p{color:var(--ink-2);font-size:16px}
.claimnote{margin-top:32px;font-size:14.5px;color:var(--ink-2);background:#fff;border-left:3px solid var(--coral);padding:14px 18px;border-radius:0 10px 10px 0;max-width:72ch}

/* app band */
.appband{background:var(--coral);color:var(--sea)}
.appband .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:36px;padding-bottom:36px}
.appband h2{font-size:clamp(24px,2.6vw,32px);max-width:none}
.appband p{margin-top:6px}
.appband .cta{background:var(--sea);color:#fff}
.appband .cta:hover{background:var(--reef)}

/* faq */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:2px solid var(--sea)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font:700 18px/1.4 var(--display);letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2.5px solid var(--sea);border-bottom:2.5px solid var(--sea);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2)}

/* request access */
.access{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.access .steps{margin:28px 0 0;padding:0;list-style:none}
.access .steps li{padding:12px 0;border-top:1px solid #1A4E56;color:#A9CDD0}
.access .steps b{color:#fff;display:block}
.form{background:#fff;color:var(--ink);border-radius:20px;padding:clamp(20px,3vw,36px);box-shadow:0 30px 60px #00151A55}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.site .form label.field{font-size:14px;color:var(--ink);font-weight:600;margin-bottom:16px}
.site .form label.field span{margin-bottom:6px}
.site .form label.field span em{font-style:normal;font-weight:400;color:var(--faint)}
.site .form input,.site .form select,.site .form textarea{font-size:16px;padding:12px 12px;border-radius:10px;border-color:#BFD9DB;font-family:var(--body)}
.site .form textarea{min-height:110px}
.site .form [aria-invalid=true]{border-color:var(--failed);box-shadow:0 0 0 3px var(--failed-wash)}
.form .err{display:block;color:var(--failed);font-weight:500;font-size:13px;margin-top:5px}
.form .consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--ink-2);margin:4px 0 20px}
.form .consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--sea)}
.form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .cta{width:100%}
.form .status{margin-top:14px}
.form .done{text-align:left}
.form .done h3{font-size:26px;margin-bottom:8px}

/* footer */
.foot{background:#03191D;color:#8FB3B6;font-size:14px;padding:56px 0 40px}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.foot a{color:#CDE7E8;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot ul{list-style:none;padding:0;margin:10px 0 0}
.foot li{padding:4px 0}
.foot h3{color:#fff;font-size:14px;letter-spacing:0}
.foot .legal{margin-top:40px;padding-top:24px;border-top:1px solid #12393F;max-width:none;font-size:13px;line-height:1.6}
.foot .legal p{max-width:100ch}
.foot .legal p+p{margin-top:8px}

/* legal pages */
.doc-page{padding:56px 0 96px;background:#fff}
.doc-page article{max-width:72ch}
.doc-page h1{font-size:clamp(32px,4vw,44px);margin-bottom:12px}
.doc-page h2{font-size:22px;margin:36px 0 10px;max-width:none}
.doc-page p,.doc-page li{color:#24474B}
.doc-page p+p{margin-top:12px}
.doc-page ul{padding-left:22px}
.draft{display:inline-block;background:var(--pending-wash);color:var(--pending);font-weight:700;font-size:14px;padding:6px 12px;border-radius:8px;margin-bottom:20px}

/* ---------- small screens ---------- */
@media (max-width:1000px){
  .links,.top .cta{display:none}
  .menu{display:block}
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:56px;gap:24px}
  .chartbox{max-width:560px}
  .split,.dev,.access{grid-template-columns:1fr}
  .voyage{grid-template-columns:1fr 1fr;row-gap:40px}
  .voyage::before{display:none}
}
@media (max-width:640px){
  body.site{font-size:16px}
  .voyage{grid-template-columns:1fr;gap:0}
  .voyage li{display:grid;grid-template-columns:46px 1fr;column-gap:18px;padding-bottom:28px;position:relative}
  .voyage li::before{grid-row:span 2;margin:0}
  .voyage li:not(:last-child)::after{content:"";position:absolute;left:22px;top:50px;bottom:4px;border-left:2px dashed #9CC4C6}
  .who li{grid-template-columns:1fr;gap:6px}
  .safe{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .cov thead{display:none}
  .cov,.cov tbody,.cov tr,.cov td{display:block}
  .cov tr{padding:20px 0;border-bottom:1px solid var(--rule)}
  .cov td{border:0;padding:6px 0}
  .cov td[data-k]::before{content:attr(data-k);display:block;font-size:13px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .cols>div:first-child{grid-column:1/-1}
  .ticket{position:relative;right:auto;bottom:auto;width:auto;margin:-28px 12px 0}
}

/* refinements after screenshot review */
.voyage::before{right:calc((100% - 84px) / 4 - 22px)}
.cov td:last-child .chips{flex-wrap:nowrap}
.cov th:last-child{width:1%;white-space:nowrap}
.site .form ::placeholder{color:#8AA9AC;opacity:1}