/* ==========================================================================
   legal.css - the shared skin for the four legal pages.

   WHY THIS IS A FILE AND NOT INLINE, when index.html puts everything inline.

   index.html is one file on purpose: it is the page a prospect loads first on
   Philippine mobile data, and a second round trip before first paint is the
   exact cost we tell clients we design around. Nobody reads a privacy policy
   before they have already loaded the site, so the tradeoff is different here -
   four pages sharing one cached stylesheet beats four copies of the same rules
   drifting apart, which is the failure this repo has lost four bets on.

   It deliberately carries only what a document page needs. It is NOT a second
   copy of index.html's stylesheet, and it must not become one: no hero, no
   carousel, no cursor trail, no scroll animation. If a rule here is only used
   by one page, it belongs on that page.

   ---------------------------------------------------------------------------
   THE COLOUR RULE IS THE SAME ONE AS EVERYWHERE ELSE.

   Brand Orange #FF6A00 carries DARK ink only. Any orange text on a light
   ground uses --orange-ink #B54700, which passes AA. White on Brand Orange is
   2.87:1 and appears nowhere. `contrast.mjs` measures the pairs.

   Body text on these pages is --slate #1F1F1F on white, not --slate-soft: a
   legal document is read end to end by somebody who needs to understand it,
   often on a phone in daylight, and the softer grey is a heading-and-caption
   colour rather than a 4,000-word colour.
   ========================================================================== */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-latin-800-normal.woff2) format("woff2")}

:root{
  --navy:#0D1B3D; --navy-deep:#081229;
  --orange:#FF6A00; --orange-ink:#B54700;
  --slate:#1F1F1F; --slate-soft:#555555; --gray:#F2F2F2; --white:#FFFFFF;
  --line:rgba(13,27,61,.16); --line-dark:rgba(255,255,255,.14);
  --wrap:820px; --r:18px;
  --ease:cubic-bezier(.22,.68,0,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--slate);
  font:400 17px/1.7 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
h1,h2,h3,h4{font-family:Poppins,Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
p,ul,ol,table{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--white);color:var(--navy);
  padding:12px 18px;border-radius:12px;font-weight:700;transition:top .2s var(--ease);text-decoration:none}
.skip:focus{top:16px}

/* ---------- header. Static, not fixed: a fixed bar eats a phone screen that
     is already full of small print, and there is nothing here to scroll past. */
.legal-head{background:var(--navy-deep);color:var(--white)}
.legal-head .wrap{max-width:1180px;display:flex;align-items:center;gap:20px;min-height:74px}
.lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.lockup .word{font-family:Poppins,sans-serif;font-weight:800;font-size:25px;letter-spacing:.09em;color:var(--white);line-height:1}
.legal-head nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.legal-head nav a{text-decoration:none;color:rgba(255,255,255,.82);font-weight:500;font-size:15px;
  padding:10px 14px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;transition:background .25s,color .25s}
.legal-head nav a:hover{color:var(--white);background:rgba(255,255,255,.1)}

/* ---------- title block ---------- */
.legal-title{padding:56px 0 34px;border-bottom:1px solid var(--line)}
.legal-title h1{font-size:clamp(30px,5.4vw,44px)}
.eyebrow{font:700 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-ink);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);border-radius:2px}
.legal-meta{margin-top:18px;font-size:15px;color:var(--slate-soft)}
.legal-meta strong{color:var(--slate)}

/* ---------- the plain-language summary box. Not a substitute for the document
     and it says so; RA 10173 wants a policy a person can actually understand,
     and a wall of clauses with no summary is compliant and useless. ---------- */
.summary{margin:32px 0 0;padding:22px 24px;background:var(--gray);border-radius:var(--r);
  border-left:4px solid var(--orange)}
.summary h2{font-size:18px;margin-bottom:10px}
.summary ul{margin:0;padding-left:20px}
.summary li{margin:7px 0}
.summary .caveat{margin-top:14px;font-size:15px;color:var(--slate-soft)}

/* ---------- contents ---------- */
.toc{margin:34px 0 0;padding:0;list-style:none;columns:2;column-gap:28px}
.toc li{margin:0 0 4px;break-inside:avoid}
.toc a{color:var(--orange-ink);text-decoration:none;font-weight:600;font-size:15px;
  display:inline-block;padding:9px 0;min-height:44px;line-height:26px}
.toc a:hover{text-decoration:underline}

/* ---------- the document body ---------- */
.doc{padding:40px 0 72px}
.doc h2{font-size:24px;margin:44px 0 14px;scroll-margin-top:24px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:19px;margin:26px 0 10px}
.doc p{margin:0 0 16px}
.doc ul,.doc ol{margin:0 0 18px;padding-left:22px}
.doc li{margin:8px 0}
.doc a{color:var(--orange-ink);font-weight:600}
.doc strong{font-weight:700}
.doc hr{border:0;border-top:1px solid var(--line);margin:44px 0}

.doc table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.doc th{font-weight:700;background:var(--gray)}
.tablewrap{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.tablewrap table{margin:0;min-width:520px}
/* A link that is the WHOLE of a cell is a control, not a word in a sentence -
   the contact address in the "who we are" table is there to be tapped. It gets
   a real 44px target. Links inside a sentence do not and must not: you cannot
   give a mailto in the middle of a paragraph a 44px box without wrecking the
   line spacing around it, and WCAG exempts them for that reason. */
.doc td > a:only-child,.doc th > a:only-child{display:inline-flex;align-items:center;min-height:44px}

.callout{padding:18px 22px;background:var(--gray);border-radius:var(--r);border-left:4px solid var(--navy);margin:0 0 22px}
.callout p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.legal-foot{background:var(--navy-deep);color:rgba(255,255,255,.72);padding:44px 0;font-size:15px}
.legal-foot .wrap{max-width:1180px}
.legal-foot a{color:var(--white);text-decoration:none;font-weight:600}
.legal-foot a:hover{text-decoration:underline}
.legal-foot .foot-nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:20px}
.legal-foot .foot-nav a{min-height:44px;display:inline-flex;align-items:center}
.legal-foot .reg{display:block;margin-top:6px}

@media (max-width:700px){
  .toc{columns:1}
  .legal-head .wrap{min-height:66px;gap:12px}
  .legal-head nav a{padding:10px 10px;font-size:14px}
  .legal-title{padding:40px 0 28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}