/* PupLink shared styles. Colour carries meaning: red / amber / green appear only as flags. */
:root{
  --paper:#f5f6f3; --surface:#ffffff; --ink:#13202b; --slate:#56646f; --line:#d8dddb; --line-strong:#aeb7b4;
  --red:#b3372b; --red-bg:#faeae7; --amber:#8a5d00; --amber-bg:#fbf1d6; --green:#256b4a; --green-bg:#e6f2ec;
  --display:"Newsreader","Noto Serif Malayalam",Georgia,serif;
  --body:"Public Sans","Noto Sans Malayalam",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:4px; --gutter:clamp(1rem,4vw,2.5rem);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.7}
a{color:inherit}
:focus-visible{outline:3px solid #1b5fb3;outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}
.wrap{max-width:72rem;margin:0 auto;padding:0 var(--gutter)}
[data-lang="ml"] .en,[data-lang="en"] .ml{display:none!important}

/* header */
.bar{border-bottom:1px solid var(--line);background:var(--paper)}
.bar .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}
.mark{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;text-decoration:none}
nav.main{display:flex;gap:1.5rem;margin-left:1.5rem;font-size:.95rem}
nav.main a{text-decoration:none;color:var(--slate)}
nav.main a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.tools{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.lang{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.lang button{font:inherit;font-size:.875rem;background:transparent;color:var(--slate);border:0;padding:.4rem .75rem;cursor:pointer;min-height:2.25rem}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;font-size:1rem;text-decoration:none;border-radius:var(--r);padding:.8rem 1.4rem;min-height:3rem;border:1px solid var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:#22364a}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}


h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance}
.mark{display:inline-flex;align-items:center;gap:.55rem}
.mark svg{width:1.9rem;height:1.9rem;flex:none}
.btn.block{display:flex;width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* mobile: header becomes two rows so every link stays reachable */
@media (max-width:60rem){
  .bar .wrap{flex-wrap:wrap;gap:.25rem 1rem;padding-top:.6rem;padding-bottom:.2rem}
  .tools{order:2}
  nav.main{order:3;flex:0 0 100%;margin:0;gap:.2rem 1.1rem;flex-wrap:wrap;padding:.2rem 0 .6rem;font-size:.92rem}
  footer .wrap{grid-template-columns:1fr}
}

/* long-form pages (policies, guides) */
.prose{max-width:44rem;margin:0 auto;padding:clamp(1.75rem,5vw,3.5rem) var(--gutter) 4rem}
.prose h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.3;margin-bottom:1.25rem}
.prose h2{font-size:1.3rem;line-height:1.4;margin:2rem 0 .5rem}
.prose p,.prose li{max-width:40rem}
.prose a{color:var(--ink);text-underline-offset:3px}
.prose .d{background:var(--amber-bg);border-left:4px solid #c58a00;border-radius:var(--r);padding:.7rem 1rem;font-size:.92rem;margin:1rem 0}
.prose nav{display:none}

/* forms, shared by the review and follow-up pages */
.field{margin:1.1rem 0}
.field label{display:block;font-weight:600;margin-bottom:.35rem}
.field .hint{font-size:.9rem;color:var(--slate);margin:0 0 .4rem}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;padding:.8rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);min-height:3rem}
input[type=file]{width:100%;font:inherit;padding:.5rem 0}
.check{display:flex;gap:.75rem;align-items:flex-start;margin:1rem 0;font-size:.98rem}
.check input{width:1.3rem;height:1.3rem;margin-top:.3rem;flex:none}
.err{color:var(--red);font-weight:500;margin-top:.8rem}
.mut{color:var(--slate);font-size:.92rem}
@media print{.bar,footer,.noprint{display:none!important}body{background:#fff}}

footer{border-top:1px solid var(--line-strong);background:var(--ink);color:#dfe5e9;padding:2.5rem 0}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 3rem}
footer a{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
footer p{margin:0;font-size:.88rem;color:#aab6be;max-width:38rem}
footer .mark{color:#fff}

@media (max-width:60rem){footer .wrap{grid-template-columns:1fr}}

/* logo mark + footer contact (v9) */
.mark img{height:1.9rem;width:auto;flex:none;display:block}
footer .mark img{filter:invert(1) brightness(1.15)}
footer .reach{margin-top:.9rem;font-size:.92rem;color:#dfe5e9}
footer .reach a{font-weight:600;white-space:nowrap}

/* v9.1: larger touch targets */
nav.main a{display:inline-flex;align-items:center;min-height:2.75rem}
.lang button{min-height:2.75rem;padding:.4rem .9rem}
@media (max-width:60rem){nav.main{gap:0 1.1rem}.bar .wrap{padding-top:.4rem}}