/*
  Pankiman external account deletion resource.
  Navy Elegant, kept deliberately plain: this is a security page, not a marketing page.
*/

:root {
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --sunken: #ebeff4;
  --navy: #0b1e3a;
  --text: #151d28;
  --text-secondary: #434e60;
  --text-muted: #616d81;
  --border: #c8cfdb;
  --border-subtle: #dce2ea;
  --danger: #a43b34;
  --danger-surface: #f8eae8;
  --radius: 14px;
}

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

body {
  margin: 0;
  padding: 0 16px 48px;
  background: var(--canvas);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Keyboard users reach the content without tabbing the language bar every time. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}
.skip:focus {
  left: 0;
}

/* A visible focus ring everywhere, never removed. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.masthead,
main,
footer {
  max-width: 44rem;
  margin: 0 auto;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 8px;
}

.brand {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
  The brand is the way back to the homepage from every page. Before this it was a
  plain <p>, so the privacy, support and deletion pages were dead ends: a visitor
  arriving from search had no route to the product at all.
*/
a.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

a.brand img {
  width: 26px;
  height: 26px;
  display: block;
}

a.brand:hover {
  color: var(--navy);
}

.langbar {
  display: flex;
  gap: 8px;
}

.lang {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.lang.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 16px 0 8px;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 32px 0 8px;
}

h3 {
  font-size: 1rem;
  margin: 20px 0 6px;
}

p,
li {
  color: var(--text-secondary);
}

.lede {
  font-size: 1.05rem;
  color: var(--text);
}

.muted {
  color: var(--text-muted);
  font-size: 0.925rem;
}

ul,
ol {
  padding-left: 1.3rem;
}

li + li {
  margin-top: 4px;
}

/* The external request path: the reason this page exists. */
.callout {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 32px;
}

.callout h2 {
  margin-top: 0;
}

.action {
  margin: 16px 0 8px;
}

.button {
  display: inline-block;
  min-height: 48px;
  padding: 13px 22px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.button:hover {
  background: #07162b;
}

/*
  The secrets warning carries an icon-free, text-first meaning: the heading and the list say what
  matters, so the colour is reinforcement rather than the message.
*/
.warning {
  background: var(--danger-surface);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 32px;
}

.warning h2 {
  margin-top: 0;
  color: var(--danger);
}

.warning li,
.warning p {
  color: var(--text);
}

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.925rem;
}

footer p {
  margin: 4px 0;
  color: var(--text-muted);
}

footer a {
  color: var(--navy);
}

/*
  Without scripting the toggle is meaningless, so both languages stay visible: the inline head
  script swaps `no-js` for `js`, and only then does the `hidden` attribute take effect. A reader
  with scripting disabled gets the whole page in both languages rather than English only.
*/
.no-js .langbar {
  display: none;
}

.no-js #content-vi[hidden] {
  display: block;
}

.no-js #content-vi {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--border);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0e1420;
    --surface: #161e2c;
    --sunken: #1d2736;
    --navy: #c8d8f2;
    --text: #eef2f8;
    --text-secondary: #c2cbd9;
    --text-muted: #96a2b4;
    --border: #354154;
    --border-subtle: #27313f;
    --danger: #f0a6a0;
    --danger-surface: #3a2220;
  }

  .button {
    color: #0b1e3a;
  }

  .button:hover {
    background: #e2ecff;
  }

  .lang.is-active {
    color: #0b1e3a;
  }
}

/* ===========================================================================
   Homepage only.

   Everything below is scoped to `body.home` or a `.home-` prefix, so the
   privacy, support and account-deletion pages keep the deliberately plain
   treatment above and are not restyled by anything here.

   One token does not follow the dark-mode flip: --brand-navy. The brand band
   shows artwork whose own background is baked on #0b1e3a, so a flipped
   surround would leave it sitting in a visible box of the wrong colour.
   =========================================================================== */

:root {
  --brand-navy: #0b1e3a;
  --on-navy: #eef2f8;
  --on-navy-muted: #a7b6cd;
  --accent: #d6468b;
  --lift: 0 1px 2px rgba(11, 30, 58, 0.06), 0 12px 32px rgba(11, 30, 58, 0.08);
  --lift-strong: 0 24px 64px rgba(11, 30, 58, 0.22);
}

body.home {
  padding-bottom: 0;
}

body.home main,
body.home .home-header,
body.home .home-footer-inner {
  max-width: 68rem;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- header -- */

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 16px 0;
}

.home-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.home-brand img {
  width: 32px;
  height: 32px;
  display: block;
}

.home-header-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.home-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  padding: 0;
  margin: 0;
}

.home-nav li {
  margin: 0;
}

.home-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 6px 0;
  display: inline-block;
}

.home-nav a:hover {
  color: var(--navy);
}

/* ------------------------------------------------------------------ hero -- */

.home-hero {
  display: grid;
  gap: 36px;
  align-items: center;
  padding: 24px 0 8px;
}

.home-eyebrow {
  margin: 0 0 14px;
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2.125rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

.home-hero-body {
  margin: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 34rem;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}

/* Real buttons, never a default underlined link. */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease;
}

.home-btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--lift);
}

.home-btn-primary:hover {
  background: #07162b;
}

.home-btn-secondary {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--border);
}

.home-btn-secondary:hover {
  border-color: var(--navy);
}

@media (prefers-reduced-motion: no-preference) {
  .home-btn:hover {
    transform: translateY(-1px);
  }
}

.home-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.home-chips li {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 7px 15px;
}

/* --------------------------------------------------------- phone preview -- */

.home-hero-visual {
  display: flex;
  justify-content: center;
}

.home-phone {
  background: var(--brand-navy);
  border-radius: 30px;
  padding: 9px;
  box-shadow: var(--lift-strong);
  max-width: 290px;
  width: 100%;
}

.home-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

/* --------------------------------------------------------------- sections -- */

.home-section {
  margin-top: 72px;
}

.home-section-head {
  max-width: 40rem;
  margin-bottom: 28px;
}

.home-section-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text);
}

.home-section-head p {
  margin: 0;
  font-size: 1.0312rem;
  line-height: 1.65;
}

/* ------------------------------------------------------------ screen strip -- */

.home-screens {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

.home-screens li {
  margin: 0;
}

.home-screens figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-screens .home-phone {
  max-width: 250px;
}

.home-screens figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 22rem;
}

.home-screens figcaption strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------- features -- */

.home-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.home-grid li {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 22px;
}

.home-grid h3 {
  margin: 0 0 7px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

.home-grid p {
  margin: 0;
  font-size: 0.96875rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- workflow -- */

.home-flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.home-flow li {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

/* Decorative: the ordered list already carries the sequence. */
.home-flow li + li::before {
  content: '→';
  color: var(--text-muted);
  font-weight: 400;
  margin-right: 12px;
}

/* ------------------------------------------------------------- brand band -- */

/*
  The horizontal artwork keeps its own baked #0b1e3a background, so the band
  matches it exactly and the image has no visible edge. The tagline inside the
  artwork is dark script on navy and reads poorly at small sizes, so it is
  repeated underneath as real text at full contrast rather than relied upon.
*/
.home-brandband {
  background: var(--brand-navy);
  border-radius: 20px;
  padding: 26px 24px;
  text-align: center;
}

.home-brandmark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  text-align: center;
}

/*
  The approved Navy Elegant icon. Its own canvas is #0b1e3a, the same as the band,
  so the square sits on the band with no visible edge. The product name beside it is
  real text rather than part of the bitmap, so it scales, translates and is readable
  by assistive technology.
*/
.home-brandmark img {
  width: 84px;
  height: 84px;
  flex: none;
  display: block;
}

.home-brandmark-name {
  margin: 0 0 2px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.home-brandband p {
  margin: 0;
  color: var(--on-navy);
  font-size: 1.0312rem;
  line-height: 1.55;
}

.home-brandband .home-brandband-note {
  color: var(--on-navy-muted);
  font-size: 0.9375rem;
  margin-top: 18px;
}

/* ------------------------------------------------------------------ panel -- */

.home-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 26px;
}

.home-panel h2 {
  margin: 0 0 12px;
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}

.home-panel ul {
  margin: 0 0 16px;
}

.home-panel li {
  line-height: 1.6;
}

.home-panel p {
  line-height: 1.65;
}

.home-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-panel-links li {
  margin: 0;
}

/* ----------------------------------------------------------------- footer -- */

body.home footer {
  margin-top: 72px;
  padding: 28px 16px 40px;
  border-top: 1px solid var(--border-subtle);
}

body.home .home-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
}

body.home footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

body.home footer nav li {
  margin: 0;
}

/* --------------------------------------------------------------- responsive -- */

@media (min-width: 40rem) {
  .home-screens {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  /* Copy first, product second: the same order the markup already has, so the
     mobile stack needs no reordering. */
  .home-hero {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 56px;
    padding: 40px 0 16px;
  }

  .home-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-brandband {
    padding: 32px 40px;
  }

  .home-brandmark {
    text-align: left;
  }
}

@media (prefers-color-scheme: dark) {
  .home-btn-primary {
    color: #0b1e3a;
  }

  .home-btn-primary:hover {
    background: #e2ecff;
  }
}