/* The site stylesheet. One file, every page.

   It was the dark stylesheet of the two pages that are shop windows rather than documents,
   the home page and /pricing/, while Support, account deletion and the four legal texts
   used /_style.css. On 2026-09-14 those moved onto this file and /_style.css was deleted:
   two stylesheets naming the same palette is one that goes stale, and the site changed
   shape every time a reader followed a link out of the pricing page.

   It was inline in index.html until 2026-09-11, with a note saying the page carried its
   own stylesheet because it was the only dark page on the site. That stopped being true
   the moment the pricing page was split out of it, and two copies of a palette is one copy
   that goes stale. The legal, support and account pages still use /_style.css: they are
   documents and read better on a light ground.

   No external requests, here or anywhere on the site. A third-party font or script is a
   tracking question we would then have to answer in the privacy policy.
*/
/* ## The palette is the wordmark (2026-09-15)

   Two colours, taken from the Handoro wordmark rather than chosen near it: the navy the
   letters are cut in, #121840, and the blue they sit on, #6D98F5, sampled at the middle of
   its gradient. Everything below is derived from those two.

   The site was deep turquoise at hue 186 until today, and the app was the same. The reason
   given at the time was that the icon's blue was too light to carry text, which is true of
   the blue as a text colour and not true of it as a brand. The cost was a product whose
   pages did not look like its own name: the wordmark at the top of this page was one colour
   and everything under it was another.

   The blue appears twice at two weights, and the difference is load bearing. `--brand` is
   the sampled blue and is a FILL: the call to action, the step numbers, the email button.
   Text on it is `--on-accent` at 6.60:1; white on it is 2.87:1 and fails. `--accent` is the
   same blue lifted until it can be read on the navy, and is the link and focus colour.

   Contrast was computed, not eyeballed. Against the ground: body text 10.8:1, muted 7.3:1,
   the accent 9.1:1, the footer's quiet blue 5.5:1. Against the alternate band, which is the
   tighter of the two, the lowest pair is the footer blue at 4.7:1. All clear AA. */
:root {
  --bg: #121840;
  --bg-alt: #1b2358;
  --brand: #6d98f5;
  --accent: #9ebdff;
  --on-accent: #0b1030;
  --text: #eef2ff;
  --body: #c3cdf2;
  --muted: #9aa7dc;
  --quiet: #8290c8;
  --card: rgba(109,152,245,0.10);
  --card-border: rgba(109,152,245,0.30);
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); margin: 0; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }

nav { padding: 20px 0; }
nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { font-size: 18px; font-weight: 700; color: var(--text); }
/* The wordmark is a link on every page except the home page itself, and it has to look the
   same on both: a turquoise "Handoro" in the corner reads as a menu item rather than as the
   name of the product. */
.brand a { color: inherit; }
.brand a:hover { text-decoration: none; color: var(--accent); }
.tm { font-size: 0.5em; vertical-align: super; color: var(--muted); letter-spacing: 0.04em; }
.navlinks a { color: var(--muted); font-size: 13px; margin-left: 20px; }
.navlinks a:first-child { margin-left: 0; }
.navlinks a:hover { color: var(--accent); }

/* The store banner already carries the wordmark and the promise, so it sits between the nav
   and the headline rather than replacing either. */
.banner { padding: 4px 0 0; }
.banner img { display: block; width: 100%; height: auto; border-radius: 16px; }

header.hero { text-align: center; padding: 56px 0 48px; }
header.hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }
header.hero p.tagline { color: var(--body); font-size: 17px; max-width: 560px; margin: 0 auto 28px; }
@media (max-width: 560px) { header.hero h1 { font-size: 30px; } header.hero { padding: 36px 0 34px; } }
.cta {
  display: inline-block; background: var(--brand); color: var(--on-accent); font-weight: 700;
  padding: 13px 28px; border-radius: 999px; font-size: 15px;
}
.cta:hover { text-decoration: none; opacity: 0.9; }

section { padding: 44px 0; }
section.alt { background: var(--bg-alt); }
h2.section-title { text-align: center; font-size: 24px; margin: 0 0 32px; letter-spacing: -0.01em; }
h3 { font-size: 16px; margin: 26px 0 8px; }
p { margin: 0 0 14px; color: var(--body); }
.lede { color: var(--body); }
.hint { font-size: 13px; color: var(--muted); }
ul { padding-left: 1.15rem; }
li { margin: 0 0 10px; color: var(--body); }

/* Three numbered steps, the shape Guardme uses for the same job. */
.steps { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.step {
  flex: 1 1 220px; max-width: 260px; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 22px 18px; text-align: center;
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--brand); color: var(--on-accent); font-weight: 700;
  font-size: 14px; margin-bottom: 12px;
}
.step h3 { font-size: 15px; margin: 0 0 6px; color: var(--text); }
.step p { font-size: 13px; color: var(--muted); margin: 0; }

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 22px; }
.card h3 { margin: 0 0 8px; font-size: 17px; color: var(--text); }
.card p { margin: 0; font-size: 15px; }

/* ---------------------------------------------------------------------------
   PLACEHOLDERS. Everything below styles a slot that has no artwork in it yet.

   Each `.slot` is a dashed box the size the real thing will be, so the page can be
   reviewed at full height today and the file dropped in later without the layout moving.
   Delete the `.slot` element and uncomment the `<img>` beside it; the paths are written
   into the markup.
   --------------------------------------------------------------------------- */
.screens-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x proximity;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.screens-scroll::-webkit-scrollbar { height: 6px; }
.screens-scroll::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }
.screen-card { flex: 0 0 auto; scroll-snap-align: center; text-align: center; }
.screen-card img { width: clamp(150px, 17vw, 190px); height: auto; aspect-ratio: 1080 / 2340; object-fit: cover;
  border-radius: 20px; border: 1px solid var(--card-border); display: block; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.screen-card span { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--card-border); border-radius: 22px; color: var(--muted);
  font-size: 12px; line-height: 1.45; padding: 12px; background: rgba(109,152,245,0.05);
}
.slot.screen { width: clamp(150px, 17vw, 190px); aspect-ratio: 9 / 19.5; }
.slot.banner-slot { width: 100%; aspect-ratio: 1024 / 500; border-radius: 16px; }

.download-section { text-align: center; }
.badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 22px;
  color: var(--text); font-size: 14px; min-height: 56px;
}
.badge .lines { text-align: left; line-height: 1.25; }
.badge .small { font-size: 10px; color: var(--muted); display: block; letter-spacing: 0.04em; text-transform: uppercase; }
.badge .big { font-size: 14px; font-weight: 600; }
/* Not a link, because there is nothing to link to yet. A badge that looks tappable and goes
   nowhere is worse than one that says it is not ready. */
.badge.soon { opacity: 0.6; cursor: default; }

/* THE TWO OFFICIAL STORE BADGES (2026-09-30).

   Neither gets the card treatment above. Both stores supply finished artwork with its own
   background and padding, and putting a bordered box around it is the one thing their
   guidelines are explicit about not doing.

   The height is the thing to keep: 46px on both. Google asks for clear space around its
   badge of a quarter of its height, which the 6px margin plus the row's own gap covers,
   and both stores require the two badges to look the same size next to each other. Change
   one number here and change the other. */
.store-badge { display: inline-flex; padding: 4px; margin: 0 6px; }
.store-badge img, .store-badge svg { display: block; height: 46px; width: auto; }
/* Only the Play badge lifts on hover. The Apple one is not a link yet, and something
   that reacts to the pointer without going anywhere reads as broken. */
a.store-badge:hover { opacity: 0.82; }


.social-label { text-align: center; color: var(--muted); font-size: 12px; margin: 26px 0 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.social-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.social-row a, .social-row .slot-social {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--muted);
  border: 1px dashed var(--card-border);
}

.contact-block { text-align: center; }
.contact-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.contact-links a { display: inline-block; border-radius: 999px; padding: 11px 24px; font-size: 14px; }
.contact-links a.email-btn { background: var(--brand); color: var(--on-accent); font-weight: 700; }
.contact-links a.support-btn { border: 1px solid var(--card-border); color: var(--text); }
.contact-links a:hover { text-decoration: none; }

footer { text-align: center; color: var(--quiet); font-size: 12px; padding: 30px 0 40px; }
footer .links { margin-bottom: 10px; }
footer .links a { color: var(--quiet); margin: 0 8px; display: inline-block; }
/* The copyright notice, between the links and the statutory block. Not a legal
   requirement in itself, and not decoration either: it says who the pages belong to in the
   one line a reader actually looks for at the foot of a site. */
footer .copyright { margin-bottom: 4px; }
/* Statutory company details, Companies Act 2006 s.82. Set apart by a hairline rule and
   aligned left, so it reads as a legal footnote rather than as page copy. */
footer .legal-entity {
  margin: 20px auto 0; max-width: 860px; padding: 14px 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08); text-align: left; line-height: 1.6;
  font-size: 11px; opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   DOCUMENT PAGES (2026-09-14). Support, account deletion and the four legal texts.

   They used to load /_style.css, which drew a narrow 640px column with a small header
   above it and a rule underneath. The home and pricing pages load this file and are built
   out of a nav bar, a centred hero and full-width alternating bands, so the site changed
   shape the moment a reader followed a link out of it: same colours, different website.
   Those pages now use this stylesheet and the same three pieces of furniture, and what is
   below is the only thing they needed that a shop window does not, which is how to set a
   document.

   Scoped to `.doc` so nothing here can reach the home or pricing pages. `.wrap` already
   gives the measure; a legal text is narrowed a little further because a line of statutory
   prose at 860px is tiring to read.
   --------------------------------------------------------------------------- */
.doc { max-width: 760px; }
.doc h2.section-title { text-align: left; margin: 0 0 18px; }
.doc h3 { font-size: 16px; margin: 28px 0 8px; color: var(--text); }
.doc h4 { font-size: 14px; margin: 22px 0 6px; color: var(--text); letter-spacing: 0.01em; }
.doc p, .doc li { line-height: 1.7; }
.doc strong { color: var(--text); }
.doc a { text-underline-offset: 2px; }
.doc ul, .doc ol { padding-left: 1.2rem; margin: 0 0 16px; }
.doc li { margin: 0 0 9px; }
.doc blockquote {
  margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--accent);
  background: rgba(0,0,0,0.16); border-radius: 0 10px 10px 0;
}
.doc blockquote p { margin: 0; }
.doc hr { border: 0; border-top: 1px solid var(--card-border); margin: 30px 0; }
.doc code {
  background: rgba(0,0,0,0.22); border: 1px solid var(--card-border); border-radius: 5px;
  padding: 1px 5px; font-size: 0.9em;
}
/* A wide table scrolls inside its own box. The page itself must never scroll sideways. */
.doc .table-scroll { overflow-x: auto; margin: 18px 0; }
.doc table { border-collapse: collapse; min-width: 34rem; font-size: 14px; }
.doc th, .doc td {
  text-align: left; vertical-align: top; padding: 9px 12px;
  border-bottom: 1px solid var(--card-border); color: var(--body);
}
.doc th { background: rgba(0,0,0,0.22); color: var(--text); font-weight: 650; }
.doc .linkrow a { white-space: nowrap; }
/* The lede under a document's title is longer than a shop window's tagline, so it is given
   the full measure rather than the hero's 560px and left-aligned with the text below it. */
header.hero.doc-hero { text-align: left; padding: 40px 0 8px; }
header.hero.doc-hero h1 { font-size: 34px; }
header.hero.doc-hero p.tagline { margin: 0; max-width: none; }
@media (max-width: 560px) { header.hero.doc-hero h1 { font-size: 26px; } }
/* Five nav links plus the wordmark is tight on a phone. They wrap rather than shrink, and
   the row becomes a real flex row so a link that lands on the second line starts at the
   left edge instead of hanging under the middle of the one above it. */
@media (max-width: 560px) {
  nav { padding: 16px 0 8px; }
  nav .wrap { gap: 10px; }
  .navlinks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .navlinks a { margin-left: 0; }
}