/* =========================================================================
   5StarsTap · design tokens
   Single source of truth for the visual world, shared by index.html and every
   secondary page. The tap page in _worker.js stays self-contained on purpose
   (one request, no subresources) but mirrors these values by hand.

   Font: Manrope, self-hosted from /manrope.woff2 (SIL Open Font License 1.1).
   Variable file: one 25 KB request covers weight 200 to 800.
   ========================================================================= */

@font-face{
  font-family:'Manrope';
  src:url('manrope.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- ground --------------------------------------------------------- */
  --ink:#0C1014;          /* page */
  --ink2:#12171C;         /* raised card */
  --ink3:#181D23;         /* control / hover */
  --line:#232B33;         /* hairline */
  --line2:#2C343D;        /* stronger edge */

  /* --- text ----------------------------------------------------------- */
  --txt:#EEF1F4;          /* primary */
  --txt2:#CDD5DD;         /* body copy on dark, roomier than --mut */
  --mut:#96A1AD;          /* secondary, 7.3:1 on --ink */
  --white:#FFFFFF;

  /* --- brand ---------------------------------------------------------- */
  /* Gold is the name: five gold stars. Kept from the incumbent site.      */
  --gold:#F0B220;
  --gold2:#F8C43C;        /* hover */
  --gold-d:#A5760E;       /* button ledge */
  --gold-ink:#20180A;     /* text on gold, 9.3:1 */
  /* Teal replaces Google's blue. Owned, and outside Google's four.        */
  --teal:#3FC9C4;
  --teal-d:#0E6E6B;
  /* Semantic, deliberately not Google's #34A853 / #EA4335.                */
  --good:#57C98A;
  --warn:#E8B44C;
  --bad:#E8797B;

  /* --- type ----------------------------------------------------------- */
  /* One variable family for everything. Swap this line to change the site. */
  --font: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* --- geometry ------------------------------------------------------- */
  /* A real scale, not 31 ad-hoc values. */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:22px; --r-2xl:26px; --r-pill:999px;

  /* --- depth ---------------------------------------------------------- */
  --sh-1:0 3px 0 #0A0D10, 0 10px 24px -12px rgba(0,0,0,.8);
  --sh-2:0 6px 0 #0A0D10, 0 20px 36px -14px rgba(0,0,0,.85);
  --sh-3:0 1px 0 #0A0D10, 0 5px 12px -8px rgba(0,0,0,.8);
  --sh-card:0 34px 70px -28px rgba(0,0,0,.9);

  /* --- motion --------------------------------------------------------- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.17s;
}

/* =========================== base ======================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt2);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; display:block; }

/* One focus treatment everywhere. The old site had this only on index.html. */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

::selection{ background:rgba(240,178,32,.28); color:var(--white); }

a{ color:var(--gold2); text-underline-offset:3px; }
a:hover{ color:var(--gold); }

strong,b{ color:var(--txt); font-weight:700; }

/* Skip link, for keyboard and screen reader users. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--gold-ink);
  padding:12px 18px; border-radius:0 0 var(--r-md) 0; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

/* ======================= document pages ================================= */
/* Read mode: privacy, cookie, terms, recesso. Comprehension first.         */

.wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }

.sitebar{
  position:sticky; top:0; z-index:30;
  background:rgba(12,16,20,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.sitebar .in{
  max-width:1080px; margin:0 auto; padding:0 22px;
  min-height:64px; display:flex; align-items:center; gap:16px;
}
.brand{
  font-size:1.22rem; font-weight:800; letter-spacing:-.02em;
  color:var(--white); text-decoration:none; display:inline-flex; align-items:center; gap:9px;
}
.brand span{ color:var(--gold); }
.brand img{ width:28px; height:28px; border-radius:var(--r-xs); }
.sitebar .back{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 15px; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:var(--ink3);
  color:var(--txt); text-decoration:none; font-size:14px; font-weight:700;
}
.sitebar .back:hover{ background:#1E242B; color:var(--white); }

.doc{ display:grid; gap:40px; grid-template-columns:1fr; padding:40px 0 90px; }
@media(min-width:1000px){
  .doc{ grid-template-columns:250px minmax(0,1fr); gap:52px; align-items:start; }
}
/* Grid items default to min-width:auto, so a single long unbreakable string
   (the legal text quotes URLs like dashboard.5starstap.com/start?ref={CODICE},
   one of them inside an h2) forces the whole column wider than the phone and
   pushes the page sideways. The wording is not ours to reflow, so the columns
   are allowed to shrink and long tokens are allowed to wrap. */
.doc > *{ min-width:0; }
.doc article,
.doc h1,.doc h2,.doc h3,
.doc p,.doc li,
.toc a{ overflow-wrap:break-word; }

/* --- table of contents --- */
.toc{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--ink2); padding:18px 20px;
}
@media(min-width:1000px){ .toc{ position:sticky; top:88px; max-height:calc(100vh - 112px); overflow:auto; } }
.toc h2{
  margin:0 0 12px; font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut); border:0; padding:0;
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ margin:0; counter-increment:toc; }
.toc a{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 0; font-size:13.5px; line-height:1.45;
  color:var(--mut); text-decoration:none; font-weight:500;
}
.toc a::before{
  content:counter(toc); font-variant-numeric:tabular-nums;
  font-size:11px; font-weight:700; color:var(--line2); min-width:16px;
}
.toc a:hover{ color:var(--txt); }
.toc a:hover::before{ color:var(--gold); }

/* --- article --- */
/* 56ch, not 70ch: Manrope's "0" is narrow relative to its average character,
   so the ch unit under-counts here. Measured, 56ch lands at ~71 characters per
   line, which is the readable range. 70ch measured at 89. */
.doc article{ max-width:56ch; }
.doc h1{
  font-size:clamp(30px,4.4vw,42px); line-height:1.08; letter-spacing:-.03em;
  font-weight:800; color:var(--white); margin:0 0 10px; text-wrap:balance;
}
.doc .meta{
  color:var(--mut); font-size:14.5px; line-height:1.6; margin:0 0 34px;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
/* Numbered, because these sections genuinely are a numbered sequence.
   No coloured side rail: the number and the weight carry the hierarchy. */
.doc h2{
  font-size:clamp(19px,2.4vw,23px); line-height:1.25; letter-spacing:-.02em;
  font-weight:800; color:var(--white); margin:44px 0 14px; scroll-margin-top:88px;
}
.doc h3{
  font-size:17px; font-weight:700; color:var(--txt); margin:26px 0 8px; letter-spacing:-.01em;
}
.doc p{ margin:0 0 15px; }
.doc ul,.doc ol{ padding-left:22px; margin:0 0 15px; }
.doc li{ margin-bottom:8px; }
.doc li::marker{ color:var(--mut); }

.note{
  border:1px solid var(--line2); border-radius:var(--r-md);
  background:var(--ink2); padding:16px 18px; margin:24px 0;
  font-size:15px; color:var(--txt2);
}

/* --- tables (cookie list, terms) ---
   Wrapped in .tablewrap so a wide table scrolls inside its own box instead of
   pushing the whole page sideways on a phone. */
.tablewrap{
  overflow-x:auto; margin:20px 0 24px;
  border:1px solid var(--line); border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch;
}
.doc table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:0; min-width:520px; }
.doc th{
  background:var(--ink3); color:var(--mut); font-weight:700; text-align:left;
  padding:11px 14px; border-bottom:1px solid var(--line2); white-space:nowrap;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.doc td{ padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--txt2); }
.doc tbody tr:last-child td{ border-bottom:0; }
.doc tbody tr:hover td{ background:rgba(255,255,255,.025); }

/* --- inline code --- */
.doc code{
  font-family:var(--font-mono); font-size:.88em;
  background:var(--ink3); border:1px solid var(--line);
  padding:2px 6px; border-radius:var(--r-xs); color:var(--txt);
  overflow-wrap:break-word;
}

/* --- badges (cookie type) --- */
.badge{
  display:inline-block; padding:3px 9px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; white-space:nowrap;
}
.badge-tech{ background:rgba(63,201,196,.14); color:var(--teal); border:1px solid rgba(63,201,196,.32); }
.badge-none{ background:rgba(255,255,255,.05); color:var(--mut); border:1px solid var(--line2); }

/* --- highlight callout --- */
.highlight{
  background:var(--ink2); border:1px solid rgba(240,178,32,.28);
  border-radius:var(--r-md); padding:18px 20px; margin:24px 0;
}
.highlight strong{ color:var(--gold2); }

/* --- printable withdrawal form (recesso) --- */
.form-box{
  background:var(--ink2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 26px 20px; margin:28px 0;
}
.form-box p{ margin-bottom:11px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; color:var(--mut); margin-bottom:7px; }
.field .line{ border-bottom:1px dashed var(--line2); min-height:28px; }
.docfoot{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.back{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 20px;
  border-radius:var(--r-md); background:var(--ink3); border:1px solid var(--line2);
  color:var(--txt); text-decoration:none; font-weight:700; font-size:15px;
  box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur);
}
.back:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); background:#1E242B; color:var(--white); }
.back:active{ transform:translateY(1px); box-shadow:var(--sh-3); transition-duration:.06s; }

/* --- sibling document nav --- */
.legal-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; }
.legal-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 15px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--mut); text-decoration:none; font-size:14px; font-weight:700;
}
.legal-nav a:hover{ color:var(--txt); border-color:var(--line2); }
.legal-nav a.active{
  background:rgba(240,178,32,.11); border-color:rgba(240,178,32,.32); color:var(--gold2);
}

/* ========================== buttons ===================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 30px; border:0; border-radius:var(--r-md);
  font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur);
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(1px); transition-duration:.06s; }
.btn--primary{ background:var(--gold); color:var(--gold-ink); box-shadow:0 3px 0 var(--gold-d), 0 10px 24px -10px rgba(0,0,0,.85); }
.btn--primary:hover{ background:var(--gold2); color:var(--gold-ink); box-shadow:0 6px 0 var(--gold-d), 0 22px 40px -14px rgba(0,0,0,.9); }
.btn--primary:active{ box-shadow:0 1px 0 var(--gold-d), 0 6px 14px -8px rgba(0,0,0,.85); }
.btn--ghost{ background:var(--ink3); color:var(--txt); border:1px solid var(--line2); box-shadow:var(--sh-1); }
.btn--ghost:hover{ background:#1E242B; color:var(--white); box-shadow:var(--sh-2); }
.btn--ghost:active{ box-shadow:var(--sh-3); }

/* ========================== motion ====================================== */

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .btn:hover,.btn:active,.back:hover,.back:active{ transform:none; }
}

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }