/* PlayArea OS sub-pages in the home page's look (Ahmad, 2026-10-08, TASK-111):
   "all pages must follow the colour code of the home page; same header, same footer,
   same menu". Load order on every sub-page:
     1 /assets/home/home.css   the home page's header, menu, footer, buttons and fonts
     2 /style.css              the sub-pages' own layouts (unchanged structure)
     3 this file               re-skins those layouts in the home page's palette and type
   Nothing here changes a page's content or structure; deleting this file and the two
   extra <link> lines brings the old colours back. */

:root {
  /* palette: the home page's teal family on a white canvas */
  --teal-deep: #0a5f63;
  --teal: #09b1b8;
  --teal-tint: #e3f9f7;
  --slate: #078f97;
  --slate-tint: #eaf9fc;
  --blue-ink: #078f97;
  --blue-tint: #eaf9fc;
  --pink-ink: #078f97;
  --pink-tint: #eaf9fc;
  --green-ink: #078f97;
  --green-tint: #eef8f6;
  --exec-icon: #0a5f63;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #30494c;
  --muted: #5f7275;
  --line: #e5eeee;
  --brand-blue: #078f97;
  --brand-blue-2: #078f97;
  --brand-cyan: #04ccdd;
  --brand-turquoise: #08c2bb;
  --brand-teal-lt: #04ccdd;
  --brand-teal-dp: #09b1b8;
  --surf-primary: #f1faf9;
  --surf-secondary: #f4f9f9;
  --surf-accent: #eefafa;
  --brand-border: #bfe2dc;
  --brand-hair: #e1eeed;
  --art-ink: #0a5f63;
  --art-wash: #e3f9f7;
  --art-blue: #078f97;
  --art-frame: #09b1b8;
  --art-paper: #ffffff;
  --act: #08c2bb;
  --act-ink: #ffffff;
  --band: #0a5f63;
  --shadow-clay: 0 14px 34px #0a5f630d;
  --shadow-soft: 0 14px 34px #0a5f630d;

  /* type: the home page's faces, at calmer sizes (no more huge headings) */
  --font-display: 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  --font-ui: 'Inter', Arial, sans-serif;
  --font-body: var(--font-ui);
  --text-hero: 46px;    --lh-hero: 52px;
  --text-h2: 32px;      --lh-h2: 40px;
  --text-h3: 22px;      --lh-h3: 30px;
  --text-h4: 18px;      --lh-h4: 26px;
  --text-body-lg: 18px; --lh-body-lg: 30px;
  --text-body: 17px;    --lh-body: 28px;
  --weight-display: 900;
  --weight-hero: 900;
}
@media (max-width: 820px) {
  :root {
    --text-hero: 34px; --lh-hero: 40px;
    --text-h2: 26px;   --lh-h2: 33px;
    --text-h3: 20px;   --lh-h3: 28px;
    --text-body-lg: 17px; --lh-body-lg: 28px;
  }
}

html { scroll-padding-top: 110px; }
body { background: #fff; color: var(--ink); }

/* headings: ink for page and section titles, deep teal for the smaller ones */
h1, h2 { color: var(--ink); letter-spacing: -0.03em; }
h3, h4 { color: var(--teal-deep); font-weight: 800; letter-spacing: -0.01em; }
.lead { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); color: var(--muted); max-width: 62ch; margin-top: 18px; }

/* links inside the content read as links */
main a:not([class]) {
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: #9fe2dd;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main a:not([class]):hover { text-decoration-color: var(--teal-deep); }

/* the small label above a heading: plain words, as on the home page */
.eyebrow,
.eyebrow--yellow, .eyebrow--pink, .eyebrow--green, .eyebrow--slate, .eyebrow--teal, .eyebrow--blue {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--teal-deep);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.115em;
  margin-bottom: 14px;
}

/* buttons: the home page's shape; the main action is cyan with white words */
.btn {
  border-radius: 14px;
  border-width: 2px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  padding: 15px 26px;
}
a.btn--primary, .btn--primary,
.price-card a.btn--primary, .price-card .btn--primary,
a.btn--sun, .btn--sun {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
  box-shadow: 0 4px 0 var(--cta-shadow);
}
.btn--primary:hover, .price-card .btn--primary:hover, .btn--sun:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: #fff;
}
a.btn--ghost, .btn--ghost {
  background: #fff;
  color: var(--teal-deep);
  border-color: #dce8e8;
  box-shadow: 0 3px 0 #e5eeee;
}
.btn--ghost:hover { background: #f5fdfc; border-color: #b9dedd; }
a.btn--light, .btn--light { color: #fff; border-color: #7cc9c5; background: transparent; }

/* cards and tiles: white, a soft teal edge, the home page's radius */
.trust { background: var(--band); }
.trust-card h3 { color: #fff; }
.faq-item { border-color: #d8eeea; }

/* the home page's footer and buttons, protected from the sub-pages' generic heading rules */
.footer-cta h2 { line-height: 1.08; color: #fff; }
.btn, .button { text-decoration: none; }

/* ---- pricing comparison: the home page's cyan ticks (Ahmad, 2026-10-08) ----
   A solid cyan disc with a white tick, the same cyan as the main buttons; the
   three plan columns take quiet tints of the teal family instead of yellow and blue. */
.price-matrix td.yes::after,
.pm-full td.yes .pm-ic {
  background: var(--cta, #08c2bb)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 13px 13px;
  box-shadow: 0 2px 0 var(--cta-shadow, #069b9b);
}
.price-matrix td.yes { color: var(--teal-deep); }
.pm-head--a { background: #f6fbfb; border-top-color: #9fe2dd; }
.pm-head--b { background: #e6f8f6; border-top-color: var(--cta, #08c2bb); }
.pm-head--c { background: #eef6f6; border-top-color: var(--teal-deep); }
.price-matrix tbody td:nth-child(2) { background: #fbfdfd; }
.price-matrix tbody td:nth-child(3) { background: #f2fbfa; }
.price-matrix tbody td:nth-child(4) { background: #f6fafa; }
.pm-flag { background: var(--teal-deep); }

/* ---- aesthetic pass (2026-10-08) ----
   One sign-up band per page: the footer's "Start your free trial" already closes every
   page, so the older in-page band (with its pale decorative circles) stands down. */
.cta-band { display: none; }
/* notes and chips in the teal family, not yellow */
.note { background: #eef9f8; border: 1px solid #cdebe7; border-left-width: 1px; color: var(--ink); border-radius: 14px; }
.price-card { --glow: var(--cta, #08c2bb); }
.price-caps { background: #eefaf9; border-color: #bfe2dc; color: var(--teal-deep); font-weight: 600; }
/* breathing room between a page's sections */
.section { padding-block: 72px; }
.section + .section { padding-top: 24px; }
@media (max-width: 700px) { .section { padding-block: 48px; } .section + .section { padding-top: 12px; } }

/* ---- pricing page (Ahmad, 2026-10-08) ---- */
/* plan bullets: the same cyan tick as the comparison */
.price-card li::before {
  background: var(--cta, #08c2bb)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 11px 11px;
}
/* under the plans: one button to the full comparison, one line of fine print */
.price-after { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; text-align: center; }
.price-after p { color: var(--muted); font-size: 0.92rem; max-width: 52ch; }
/* the billing pill sat on the hero card's MOST POPULAR badge (badge top:-14px, card scaled 1.03): clear space above the cards on desktop */
@media (min-width: 641px) { .price-billing { margin-bottom: 44px; } }
/* add-on cards: a picture of what it is, the name with its (i) beside it */
.addon-art { display: grid; place-items: center; height: 132px; margin: 0 0 18px; border-radius: 16px; background: #eef9f8; overflow: hidden; }
.addon-art img { width: auto; height: auto; max-height: 116px; }
.addon-art--uae-pack img { width: 112px; max-height: none; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
.addon-art--backup-plus img, .addon-art--email-packs img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.addon-title { display: flex; align-items: center; gap: 8px; position: relative; }
.addon-title h3 { margin: 0; }
.addon-title .price-info { margin: 0; flex: none; }
.addon-title .price-info p {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 3;
  margin-top: 8px; padding: 12px 14px; max-width: none;
  background: #fff; border: 1px solid #d8eeea; border-radius: 12px; box-shadow: 0 14px 30px #0a5f631a;
}
/* four add-ons sit two by two; button words are never underlined */
#add-ons + p + .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { #add-ons + p + .price-grid { grid-template-columns: 1fr; } }
a.btn, .price-card a.btn, .price-after a.btn, main a.btn { text-decoration: none; }
/* the PAi artwork carries its own white ground; the drawings are shown whole, not cropped */
.addon-art--pai { background: #fff; border: 1px solid #e1eeed; }
.addon-art--backup-plus, .addon-art--email-packs { background: #f6fbff; }
.addon-art--backup-plus img, .addon-art--email-packs img { object-fit: contain; }
/* the full comparison stays on the page, folded away until "Compare every feature" */
.pm-open-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pm-open-btn { cursor: pointer; }
.pm-open-toggle:focus-visible + .price-after .pm-open-btn { outline: 3px solid #087f92; outline-offset: 3px; }
.pm-open-toggle:checked + .price-after .pm-open-btn { background: #eef9f8; border-color: #9fe2dd; }
.pm-panel { display: none; margin-top: 40px; }
.pm-open-toggle:checked ~ .pm-panel { display: block; }
/* the waving flag replaces the flat one (2026-10-08) */
.addon-art--uae-pack img { width: auto; height: 116px; border-radius: 0; box-shadow: none; }
.addon-art--backup-plus img, .addon-art--email-packs img { width: 92%; height: 92%; }
/* the drawings get a definite height (a % height inside the grid box was ignored, so they overflowed and were cut) */
.addon-art--backup-plus img, .addon-art--email-packs img { width: 100%; height: 120px; max-height: 120px; object-fit: contain; }

/* plan allowances as three plain bullets; "Available on" as a plain line, no capsules (Ahmad, 2026-10-08) */
.price-caps-list { list-style: none; margin: 12px 0 2px; padding: 0; display: grid; gap: 5px; }
.price-card .price-caps-list li { padding-left: 16px; font-size: 0.93rem; font-weight: 600; color: var(--teal-deep); }
.price-card .price-caps-list li::before { width: 7px; height: 7px; top: 0.62em; left: 2px; background: var(--cta, #08c2bb); box-shadow: none; border-radius: 50%; }
.price-caps { background: none; border: 0; padding: 0; border-radius: 0; font-weight: 600; color: var(--teal-deep); font-size: 0.9rem; }
.price-card .price-caps-list { gap: 2px; margin: 10px 0 4px; padding: 0; }
.price-card .price-caps-list li { padding-left: 14px; line-height: 1.5; }
.price-card .price-caps-list li::before { left: 0; }