/*
  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);
}

/*
  Three buttons, not two: English, Tiếng Việt and Türkçe come to roughly 278px of the 288px a
  320px screen leaves after the body padding. That fits, but only just, and it stops fitting as
  soon as someone raises their text size. Wrapping costs nothing and removes the cliff.
*/
.langbar {
  display: flex;
  flex-wrap: wrap;
  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 every language stays 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 every language it carries rather than English
  only.

  Each non-English article needs its own rule here. A page that gains a language and not a rule
  loses that language entirely for anyone without scripting - the article keeps the `hidden`
  attribute from the markup and nothing ever takes it off.
*/
.no-js .langbar {
  display: none;
}

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

.no-js #content-vi,
.no-js #content-tr {
  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;
  }
}

/*
  First-visit beta invitation, homepage only.

  Every selector keeps the .home- prefix, so it is scoped the same way the rest of the homepage
  block is and cannot reach the privacy, support or deletion pages. The buttons are the existing
  .home-btn components, and the surface, border and text come from the same tokens as every other
  panel, so dark mode follows without a second definition.
*/
.home-beta {
  width: 100%;
  max-width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  margin: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--lift-strong);
}

.home-beta::backdrop {
  background: rgba(11, 30, 58, 0.55);
}

.home-beta-title {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 1.375rem;
  line-height: 1.3;
}

.home-beta-body {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

/*
  Stacked by default so three full-width targets always fit a narrow phone at any text size, and
  a row only where there is room for one.
*/
.home-beta-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.home-beta-more {
  margin: 16px 0 0;
  font-size: 0.9375rem;
}

.home-beta-more a {
  color: var(--navy);
}

@media (min-width: 40rem) {
  .home-beta-actions {
    flex-direction: row;
  }

  .home-beta-actions .home-btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home-beta[open] {
    animation: home-beta-appear 160ms ease-out;
  }
}

@keyframes home-beta-appear {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/*
  Beta page.

  The beta page is the one page Google Ads traffic lands on cold, so it carries a hero and a
  stepped layout the text-only pages do not need. Every selector keeps the .beta- prefix, and
  every colour is one of the existing tokens, so dark mode follows without a second definition
  and nothing here can reach the homepage, policy, support, FAQ or deletion pages.

  The page keeps the shared 44rem measure, so the hero is a single column on a phone and splits
  only where there is genuinely room for a screenshot beside the copy.
*/
.beta-hero {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 16px 0 8px;
}

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

.beta-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(1.875rem, 5.5vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

.beta-hero .lede {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  color: var(--text-secondary);
}

/* The one line a suspicious visitor is most likely to read, so it is given a surface of its
   own rather than being buried in a paragraph. */
.beta-trust {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--sunken);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight: 600;
  color: var(--text);
}

.beta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0 0;
}

.beta-textlink {
  color: var(--navy);
  font-weight: 600;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

/*
  The local-support note. Advertising can be aimed at Khánh Hòa, but the page is read from
  everywhere, so the hero asks for salons generally and the regional advantage sits here instead
  of in the headline. Quieter than the trust line above it, which is the one claim that has to be
  read.
*/
.beta-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: 0.925rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.beta-note strong {
  color: var(--text);
}

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

.beta-chips li {
  padding: 6px 12px;
  background: var(--sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

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

.beta-phone {
  background: var(--brand-navy);
  border-radius: 26px;
  padding: 8px;
  box-shadow: var(--lift-strong);
  max-width: 232px;
  width: 100%;
}

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

/* Android and iPhone side by side, because the point of the section is that they are equals
   that enrol differently. */
.beta-platforms {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}

.beta-platforms > section {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px;
}

.beta-platforms h3 {
  margin: 0 0 10px;
  color: var(--navy);
}

.beta-platforms p:last-child {
  margin-bottom: 0;
}

.beta-steps {
  margin: 20px 0;
  padding: 0 0 0 1.5em;
}

.beta-steps > li {
  margin-bottom: 16px;
}

.beta-steps strong {
  display: block;
  color: var(--text);
}

.beta-steps span {
  color: var(--text-secondary);
}

.beta-tasks {
  columns: 2 11rem;
  column-gap: 24px;
}

@media (min-width: 48rem) {
  .beta-hero {
    grid-template-columns: 1.25fr 0.75fr;
    gap: 32px;
  }

  /* Full width underneath both columns, where it reads as a summary of the whole hero. */
  .beta-chips {
    grid-column: 1 / -1;
  }

  .beta-platforms {
    grid-template-columns: 1fr 1fr;
  }
}