/* ============================================================================
   Shared styling for terms / privacy / refund / disclaimer / license.
   index.html is deliberately self-contained and does NOT use this file, so the
   palette is duplicated here. If you change a colour, change it in both places.
   ========================================================================== */
:root{
  --bg:#07111F;
  --bg-2:#0B1728;
  --navy:#0F1E33;
  --white:#F8FAFC;
  --soft:#E8EEF7;
  --muted:#93A6C0;
  --dim:#6F819B;
  --gold:#F5B84B;
  --orange:#FF8A4C;
  --gold-muted:#C99A3D;
  --border:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--soft);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:min(100% - 2.5rem, 780px); margin-inline:auto}

header.top{border-bottom:1px solid var(--border); background:var(--bg-2)}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:1rem;
        padding:1rem 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none}
.brand svg{width:30px; height:30px; flex:0 0 auto}
.brand b{font-weight:800; font-size:.9375rem; letter-spacing:-.02em; color:var(--white);
         line-height:1.15}
.brand i{display:block; font-style:normal; font-size:.5625rem; letter-spacing:.2em;
         text-transform:uppercase; color:var(--gold-muted)}
.back{font-size:.8125rem; color:var(--muted); text-decoration:none; white-space:nowrap}
.back:hover{color:var(--gold)}

main{padding:clamp(2.5rem,6vw,4.5rem) 0 4rem}

h1{font-size:clamp(1.85rem,4.5vw,2.6rem); font-weight:800; letter-spacing:-.03em;
   line-height:1.1; color:var(--white); margin:0 0 .6rem}
.updated{font-size:.8125rem; color:var(--dim); margin:0 0 2.5rem;
         padding-bottom:1.5rem; border-bottom:1px solid var(--border)}

h2{font-size:1.1875rem; font-weight:700; letter-spacing:-.015em; color:var(--white);
   margin:2.5rem 0 .75rem; line-height:1.3}
h3{font-size:1rem; font-weight:600; color:var(--white); margin:1.75rem 0 .5rem}
p{margin:0 0 1rem}
a{color:var(--gold-muted)}
a:hover{color:var(--gold)}
strong{color:var(--white); font-weight:600}

ul,ol{margin:0 0 1.25rem; padding-left:1.35rem}
li{margin-bottom:.5rem}
li::marker{color:var(--gold-muted)}

.callout{background:var(--glass); border:1px solid var(--border); border-left:3px solid var(--gold);
         border-radius:12px; padding:1.15rem 1.35rem; margin:1.75rem 0}
.callout p:last-child{margin-bottom:0}
.callout.warn{border-left-color:var(--orange)}

.fill{background:rgba(245,184,75,.11); border:1px dashed rgba(245,184,75,.4);
      border-radius:5px; padding:.1rem .4rem; font-family:ui-monospace,Menlo,monospace;
      font-size:.8125rem; color:var(--gold)}

table{width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9375rem}
th,td{text-align:left; padding:.7rem .85rem; border:1px solid var(--border);
      vertical-align:top}
th{background:var(--glass); color:var(--white); font-weight:600; font-size:.8125rem;
   letter-spacing:.04em; text-transform:uppercase}
td{color:var(--muted)}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

footer{border-top:1px solid var(--border); background:var(--bg-2); padding:2rem 0;
       margin-top:3rem}
.f-links{display:flex; flex-wrap:wrap; gap:.6rem 1.35rem; padding:0; margin:0 0 1.25rem;
         list-style:none}
.f-links a{font-size:.8125rem; text-decoration:none; color:var(--muted)}
.f-links a:hover{color:var(--gold)}
.f-note{font-size:.75rem; color:var(--dim); line-height:1.7; margin:0}

/* ------------------------------------------------------------ sign-off --- */
/* Mirrors the .signoff block in index.html. Anton is the closest Google Font
   to the logo lettering. The symbol is ™, not ® — the mark is not registered,
   and s.107 of India's Trade Marks Act makes falsely claiming registration an
   offence. Switch to &reg; only once a registration actually exists. */
.signoff{border-top:1px solid var(--border); margin-top:1.75rem; padding-top:1.5rem;
         display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
         gap:.85rem 1.5rem}
.signoff p{margin:0}
.so-name{font-family:'Anton',Impact,'Arial Narrow',sans-serif; font-weight:400;
         font-size:clamp(1.05rem,3.2vw,1.4rem); letter-spacing:.03em; line-height:1.05;
         text-transform:uppercase; color:var(--soft); white-space:nowrap}
.so-name sup{font-family:'Inter',sans-serif; font-weight:600; font-size:.44em;
             letter-spacing:0; vertical-align:super; margin-left:.22em; color:var(--gold)}
.so-by{font-family:'Inter',sans-serif; font-size:.6875rem; font-weight:500;
       letter-spacing:.18em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.so-by b{font-family:'Anton',Impact,'Arial Narrow',sans-serif; font-weight:400;
         font-size:clamp(.9rem,2.6vw,1.15rem); letter-spacing:.03em; color:var(--soft);
         margin-left:.55rem}
@media (max-width:560px){
  .signoff{flex-direction:column; align-items:center; text-align:center; gap:.7rem}
}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
.skip{position:fixed; left:0; top:0; z-index:100; padding:1rem 1.5rem; background:var(--gold);
      color:#231402; font-weight:600; text-decoration:none; transform:translateY(-140%)}
.skip:focus{transform:none}
