/* ============================================================
   CloudMess public site — shared stylesheet
   Serves privacy.html, terms.html, delete-account.html, index.html.

   Tokens and @font-face are ported VERBATIM from
   docs/download-page/index.html (lines 22-27 and 29-65), which is
   itself ported from docs/marketing/brand/cloudmess-brand.css, which
   is ported 1:1 from packages/ui_kit/lib/app_theme.dart.
   app_theme.dart is the authoritative palette.

   The visual language is the download page's, adapted to a long legal
   document: an orange band, then a stack of cards, each opened by a
   3px orange rule and an uppercase eyebrow. Energy comes from
   colour-as-structure - there are NO shadows, NO gradients and NO
   animation here, exactly as on the download page.

   ORANGE LEADS. Blue is used in exactly two places, both deliberate:
   the numbered step circles in section 2, and the deletion call to
   action in section 6. Nothing else is blue except the focus ring.

   These are CloudMess product pages, so they carry the CloudMess
   palette and faces (Poppins + Inter). InfiWorks cobalt and Outfit are
   the PARENT COMPANY's system and are deliberately absent: InfiWorks
   appears only as the operator in the statutory footer.
   ============================================================ */

/* ---------- 1. FONTS - self-hosted, subset from brand/fonts (OFL) ----------
   Devanagari tries the phone's own Noto Sans Devanagari first: on Android
   that IS the brand face, so Hindi/Marathi cost zero extra bytes. The
   bundled subset is the fallback for desktops that lack it.
   The Latin subset covers U+0020-007E, U+00A0-00FF (so § and ₹ render),
   the dashes, curly quotes, bullet and U+2192 arrow. Every character in
   the policy documents is inside that range - verified before shipping. */
@font-face{font-family:'Poppins';src:url('fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/poppins-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'CMDeva';src:local('Noto Sans Devanagari'),url('fonts/deva-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+25CC}
@font-face{font-family:'CMDeva';src:local('Noto Sans Devanagari Bold'),url('fonts/deva-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0900-097F,U+200C-200D,U+25CC}

/* ---------- 2. TOKENS ---------- */
:root{
  --orange:#FF6B35; --orange-dark:#B84A1C;
  --blue:#1A73E8;   --blue-dark:#0F4FB3;
  --warning:#FBBC04;

  --bg:#F8F9FA; --surface:#FFFFFF;
  --ink:#212529; --ink-mid:#495057; --ink-soft:#6C757D;
  --rule:#E2E8F0; --hair:#EDF0F3;
  --lit-ink:#B84A1C;

  --orange-wash:#FFF1EB; --blue-wash:#EAF2FD; --warning-wash:#FEF7E0;

  --display:'Poppins','CMDeva',system-ui,sans-serif;
  --body:'Inter','CMDeva',system-ui,sans-serif;
}
/* Dark values are app_theme.dart's own dark tokens - not invented here. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1E1E2E; --surface:#2A2A3C;
    --ink:#EDEEF0; --ink-mid:#B6BAC4; --ink-soft:#9AA0AC;
    --rule:#3A3A4C; --hair:#33334A;
    --lit-ink:#FFA477;
    --orange-wash:rgba(255,107,53,.13);
    --blue-wash:rgba(26,115,232,.16);
    --warning-wash:rgba(251,188,4,.12);
  }
}
:root[data-theme="dark"]{
  --bg:#1E1E2E; --surface:#2A2A3C;
  --ink:#EDEEF0; --ink-mid:#B6BAC4; --ink-soft:#9AA0AC;
  --rule:#3A3A4C; --hair:#33334A;
  --lit-ink:#FFA477;
  --orange-wash:rgba(255,107,53,.13);
  --blue-wash:rgba(26,115,232,.16);
  --warning-wash:rgba(251,188,4,.12);
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:var(--body);font-size:1rem;line-height:1.6}
img{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance;margin:0}
a{color:var(--lit-ink);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}

/* Keyboard users land past the band. */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
      padding:12px 16px;border-radius:8px;z-index:10}
.skip:focus{left:16px;top:16px}

/* ---------- 4. BRAND FURNITURE ----------
   The three devices the download page repeats at every structural
   joint: the uppercase eyebrow, the lockup, and the 3px colour bar. */
.eyebrow{font-family:var(--display);font-weight:600;font-size:0.6875rem;
         letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.eyebrow.blue{color:var(--blue)}
.eyebrow.on-dark{color:#fff}

/* Lockup: mark on the LEFT, wordmark beside it, tagline under the
   wordmark. Sized to the 250-350 x 60-100px band that is the web
   standard for a horizontal header logo - at 44px the mark read as
   smaller than the headline it sat above. 64px mark + 28px wordmark
   gives a ~250 x 64px lockup. Corner radius is 20% of the side, the
   ratio the download page uses (9px on 44px). */
.lockup{display:flex;align-items:center;gap:14px;text-decoration:none}
.lockup img{width:64px;height:64px;border-radius:13px;flex:0 0 auto}
.lockup .wm{display:block;font-family:var(--display);font-weight:700;font-size:1.75rem;
            letter-spacing:-.015em;line-height:1.05;color:#fff}
.lockup .tag{display:block;font-size:0.8125rem;line-height:1.3;margin-top:4px;
             color:#fff;opacity:.9}

.rule-strong{height:3px;width:56px;background:var(--orange);border:0;border-radius:2px;margin:0}
.rule-strong.blue{background:var(--blue)}

/* ---------- 5. THE ORANGE BAND ----------
   The system's signature opening, straight off the download page:
   solid owner-orange, lockup top-left, eyebrow, then the display
   headline. On a policy page the dates ride under it as white chips -
   white-on-orange is weak at small sizes, so the chips invert instead
   (white ground, orange-dark text) exactly like the download page's
   selected language pill. */
.band{background:var(--orange);color:#fff;padding:26px 22px 34px}
.band-in{max-width:680px;margin:0 auto}
.band h1{font-family:var(--display);font-weight:700;
         font-size:clamp(1.875rem,8.2vw,2.625rem);line-height:1.06;
         letter-spacing:-.02em;margin:16px 0 0;color:#fff}
.band .eyebrow{margin-top:26px;display:block}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--display);font-weight:600;font-size:0.75rem;
          padding:7px 14px;border-radius:999px;
          background:#fff;color:var(--orange-dark);
          font-variant-numeric:tabular-nums}

/* ---------- 6. BODY ---------- */
main{max-width:680px;margin:0 auto;padding:26px 22px 8px}

/* The two opening paragraphs, before the first numbered card. */
.intro{font-size:1.03125rem;line-height:1.66;color:var(--ink-mid);margin:0 0 18px}
.intro:last-of-type{margin-bottom:26px}

/* ---------- 7. CARDS - one per numbered section ---------- */
.card{background:var(--surface);border:1px solid var(--rule);
      border-radius:14px;padding:22px 20px}
.card+.card{margin-top:14px}
.card .rule-strong{margin-bottom:13px}
.card .eyebrow{display:block}
.card h2{font-family:var(--display);font-weight:600;font-size:1.3125rem;line-height:1.28;
         margin:8px 0 12px;color:var(--ink);scroll-margin-top:16px}
.card h3{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.35;
         margin:26px 0 10px;color:var(--ink);scroll-margin-top:16px}
.card p{margin:0 0 15px;color:var(--ink-mid);font-size:0.96875rem;line-height:1.62}
.card ul{margin:0 0 15px;padding-left:20px}
.card li{margin:0 0 11px;color:var(--ink-mid);font-size:0.96875rem;line-height:1.62}
.card li:last-child{margin-bottom:0}
.card li::marker{color:var(--orange)}
.card strong{color:var(--ink);font-weight:600}
.card p:last-child,.card ul:last-child{margin-bottom:0}

/* ---------- 8. NUMBERED STEPS - the one blue accent (section 2) ----------
   Kept blue on purpose, matching the download page's install steps. */
.steps{list-style:none;margin:0 0 15px;padding:0;counter-reset:step}
.step{display:flex;gap:14px;align-items:flex-start}
.step+.step{margin-top:16px}
.step .n{width:32px;height:32px;border-radius:999px;background:var(--blue);
         color:#fff;display:flex;align-items:center;justify-content:center;
         font-family:var(--display);font-weight:700;font-size:0.9375rem;flex:0 0 auto;
         font-variant-numeric:tabular-nums}
.step .t{font-size:0.96875rem;line-height:1.6;color:var(--ink-mid);padding-top:4px}
.step .t strong{color:var(--ink);font-weight:600}

/* ---------- 9. INLINE UI-STRING CHIP ---------- */
.lit{display:inline-block;background:var(--bg);border:1px solid var(--rule);
     border-radius:5px;padding:1px 6px;font-size:0.875rem;color:var(--lit-ink);
     overflow-wrap:anywhere}

/* ---------- 10. LEFT-ACCENT CALLOUT ----------
   Flat on the accent edge, rounded on the other three - the download
   page's own asymmetry. Orange edge for the "what changed" note. */
.note{border-left:4px solid var(--orange);background:var(--orange-wash);
      padding:16px 18px;border-radius:0 8px 8px 0;font-size:0.9375rem;
      line-height:1.6;color:var(--ink-mid);margin:0 0 24px}
.note .eyebrow{display:block;margin-bottom:8px}
.note p{margin:0}
.note strong{color:var(--ink);font-weight:600}

/* Closing line under the last card. */
.colofon{color:var(--ink-soft);font-size:0.875rem;line-height:1.6;
         margin:22px 0 0;text-align:center}

/* ---------- 11. BUTTONS ----------
   Phone-first: :active darkens, there is no hover-only state. */
.btn{display:block;text-align:center;text-decoration:none;color:#fff;
     font-family:var(--display);font-weight:600;font-size:1.0625rem;
     padding:15px;border-radius:11px;min-height:54px;margin:16px 0 4px}
.btn.blue{background:var(--blue)}
.btn.blue:active{background:var(--blue-dark)}
.btn.orange{background:var(--orange)}
.btn.orange:active{background:var(--orange-dark)}
/* The small line under a call to action explaining what it does. */
.btn-note{font-size:0.875rem;line-height:1.55;color:var(--ink-soft);margin:10px 0 18px}

/* ---------- 11b. HOLDING PAGE (index.html) ----------
   The apex landing page is short, so it carries its own centred block
   rather than the card stack the policy pages use. */
.holding{max-width:34rem;margin:0 auto;padding:8px 0 4px;text-align:center}
.holding .eyebrow{display:block;margin-bottom:10px}
.holding h2{font-family:var(--display);font-weight:600;font-size:1.3125rem;
            line-height:1.3;margin:0 0 12px;color:var(--ink)}
.holding p{color:var(--ink-mid);font-size:1.03125rem;line-height:1.66;margin:0 0 15px}
.holding .rule-strong{margin:0 auto 14px}
.holding .links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
                margin:22px 0 0;padding:0;list-style:none}
.holding .links a{font-family:var(--display);font-weight:600;font-size:0.8125rem;
                  padding:9px 16px;border-radius:999px;text-decoration:none;
                  color:var(--ink-mid);border:1px solid var(--rule)}
.holding .links a:hover{color:var(--lit-ink);border-color:var(--lit-ink)}

/* ---------- 12. TABLES ----------
   Real tables, never <pre>. Orange head, hairline rows, and a wrapper
   that scrolls on narrow screens so a three-column table never drags
   the whole page sideways. */
.scroll{overflow-x:auto;margin:0 0 16px;
        border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.card table{border-collapse:collapse;width:100%;font-size:0.90625rem;line-height:1.5}
.card th,.card td{text-align:left;vertical-align:top;padding:11px 14px;
                  border-bottom:1px solid var(--hair)}
.card thead th{font-family:var(--display);font-weight:600;font-size:0.6875rem;
               letter-spacing:.1em;text-transform:uppercase;
               color:var(--lit-ink);background:var(--orange-wash);
               white-space:nowrap;border-bottom:2px solid var(--orange)}
.card tbody tr:last-child td{border-bottom:0}
.card td{color:var(--ink-mid)}
.card td:first-child{color:var(--ink)}

/* ---------- 13. CONTACT BLOCK (section 9) ---------- */
.contact{background:var(--bg);border:1px solid var(--rule);border-radius:12px;
         padding:16px 18px;margin:0 0 15px;font-size:0.9375rem;line-height:1.85}
.contact dl{margin:0}
.contact dt{display:inline;font-family:var(--display);font-weight:600;
            font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;
            color:var(--lit-ink)}
.contact dd{display:inline;margin:0 0 0 6px;color:var(--ink)}
.contact dd::after{content:"";display:block}

/* ---------- 14. FOOTER (identical on all four pages) ---------- */
.sitefoot{border-top:1px solid var(--rule);background:var(--surface);
          padding:28px 0 40px;margin-top:32px}
.sitefoot .wrap{max-width:680px;margin:0 auto;padding:0 22px}
.sitefoot .by{font-family:var(--display);font-weight:600;font-size:0.6875rem;
              letter-spacing:.18em;text-transform:uppercase;
              color:var(--ink-soft);margin:0 0 12px}
/* InfiWorks brand rule: the wordmark is never narrower than 120px. The
   SVG is 481.42 x 158.03 (ratio 3.05), so 40px tall = ~122px wide. At
   the previous 26px it was ~79px - below the mark's own minimum. */
.sitefoot .iw{height:40px;width:auto;margin:0 0 16px}
.sitefoot .iw-light{display:block}
.sitefoot .iw-dark{display:none}
.statutory{color:var(--ink-soft);font-size:0.78125rem;line-height:1.75;margin:0 0 14px}
.statutory a{color:var(--ink-soft)}
.copyright{color:var(--ink-soft);font-size:0.78125rem;line-height:1.6;margin:0 0 18px;
           padding-top:14px;border-top:1px solid var(--hair)}
.footlinks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;
           font-size:0.8125rem}
.footlinks a{color:var(--ink-mid);text-decoration:none;border-bottom:1px solid var(--rule)}
.footlinks a:hover{color:var(--lit-ink);border-bottom-color:var(--lit-ink)}
.footlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--orange)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sitefoot .iw-light{display:none}
  :root:not([data-theme="light"]) .sitefoot .iw-dark{display:block}
}
:root[data-theme="dark"] .sitefoot .iw-light{display:none}
:root[data-theme="dark"] .sitefoot .iw-dark{display:block}

/* ---------- 15. NARROW SCREENS ---------- */
@media (max-width:600px){
  body{font-size:0.9375rem}
  .band{padding:22px 18px 30px}
  main{padding:22px 18px 8px}
  .sitefoot .wrap{padding:0 18px}
  .card{padding:20px 16px}
  .card h2{font-size:1.1875rem}
  .card th,.card td{padding:10px 12px}
  .lockup img{width:54px;height:54px;border-radius:11px}
  .lockup .wm{font-size:1.5rem}
  .lockup .tag{font-size:0.78125rem}
  .sitefoot .iw{height:36px}
}

/* ---------- 16. PRINT ---------- */
@media print{
  .skip,.footlinks,.chips{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .band{background:#fff;color:#000;padding:0 0 12pt;border-bottom:2pt solid #000}
  .band h1,.lockup .wm,.lockup .tag{color:#000}
  .eyebrow.on-dark{color:#000}
  .card{border:0;padding:0;background:#fff}
  .card+.card{margin-top:18pt}
  .scroll{overflow:visible;border:0}
  .btn{display:none}
  a{color:#000;text-decoration:underline}
}

/* ---------- 17. DEVANAGARI CORRECTIONS - MUST STAY LAST ----------
   Brand rule (docs/download-page/README.md lines 30-34): Latin
   letter-spacing and uppercase are actively harmful in Devanagari -
   tracking detaches matras from their base glyph, and there is no
   uppercase to transform to. These pages are English today; the block
   is carried over so a Hindi or Marathi translation drops in correctly,
   and so this file stays a faithful sibling of the download page. It
   must remain the last thing in the stylesheet. */
html[lang="hi"] .eyebrow, html[lang="mr"] .eyebrow,
html[lang="hi"] .band h1, html[lang="mr"] .band h1,
html[lang="hi"] .chips li, html[lang="mr"] .chips li,
html[lang="hi"] .card thead th, html[lang="mr"] .card thead th,
html[lang="hi"] .contact dt, html[lang="mr"] .contact dt{
  letter-spacing:normal;text-transform:none;
}
html[lang="hi"] .band h1, html[lang="mr"] .band h1{
  line-height:1.24;font-size:clamp(1.6875rem,7.2vw,2.3125rem);
}
html[lang="hi"] .intro,   html[lang="mr"] .intro,
html[lang="hi"] .card p,  html[lang="mr"] .card p,
html[lang="hi"] .card li, html[lang="mr"] .card li,
html[lang="hi"] .card td, html[lang="mr"] .card td,
html[lang="hi"] .step .t, html[lang="mr"] .step .t,
html[lang="hi"] .note,    html[lang="mr"] .note,
html[lang="hi"] .statutory, html[lang="mr"] .statutory{line-height:1.78}
html[lang="hi"] b, html[lang="mr"] b,
html[lang="hi"] strong, html[lang="mr"] strong{font-weight:700}