/* Tamoora's account pages: sign-in, sign-up and the family's door. The product's own colours, type and shapes. */
@font-face { font-family: 'Tajawal'; src: url('/account/fonts/tajawal-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('/account/fonts/tajawal-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Tajawal'; src: url('/account/fonts/tajawal-extrabold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

/* The site's own palette (the front page's :root): paper, white, ink, muted, green, yellow, sage, line, lavender,
   peach, its shadow and its focus ring. The pages' older names point at it. The fields keep a 3:1 edge. */
:root {
  --paper: #faf8ef; --white: #fffef9; --green: #42664a; --sage: #e9eedc; --lavender: #eae2f4; --shadow: 0 18px 50px #284b3a0a;
  --yellow: #f9d45d; --cream: #fffaec; --ink: #284b3a; --muted: #687568; --line: #dce2d1;
  --mint: var(--sage); --purple: var(--lavender); --sky: #e5f1fa; --peach: #f8e3d6; --teal: #2f8f7c;
  --leaf: var(--green); --date: #f6cc54; --rose: #b42318; --rose-bg: #fdf0ee; --field: var(--white); --field-line: #8a8f86;
  --round: 24px; --focus: #284b3aa6;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-padding-bottom: 96px; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 16px/1.55 'Tajawal', system-ui, sans-serif;
}
:lang(en) body, body:lang(en) { letter-spacing: 0; }
img { max-width: 100%; }
a { color: var(--leaf); font-weight: 700; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.3; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* a heading or the page given the focus by the page itself (after a move) shows no ring: only what a key reaches does */
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }

/* ── the brand (identity 3.1): one picture, the face with the drawn name beside it; --logo-size is the face's height ── */
.tamoora-lockup { --logo-size: 52px; display: inline-flex; align-items: flex-end; line-height: 1; white-space: nowrap; }
.tamoora-lockup img.tamoora-art { height: var(--logo-size); width: auto; aspect-ratio: 417 / 156; max-width: none; object-fit: contain; flex: none; display: block; }
@media (max-width: 600px) { .tamoora-lockup { --logo-size: 47px; } }
/* the narrowest phones: the header's lockup at the site's smaller size (its dialog head), so the bar's buttons keep their room */
@media (max-width: 380px) { .top .tamoora-lockup { --logo-size: 36px; } }

/* ── buttons: the site's (.btn, .btn.dark, .btn.outline, .btn.small) ── */
.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 12px;
  min-height: 52px; padding: 15px 25px; border: 1px solid transparent; border-radius: 14px;
  background: var(--ink); color: var(--white); font: inherit; line-height: 1.4; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s, opacity .12s ease;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn.yellow { background: var(--yellow); color: var(--ink); }
.btn.light { background: #f2f2ea; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid #bdc9b6; }
.btn.danger { background: var(--rose-bg); color: var(--rose); border: 1px solid #f1c7c1; }
@media (hover: hover) {
  .btn:not([disabled]):not([aria-disabled="true"]):hover { transform: translateY(-3px); box-shadow: 0 7px 20px #284b3a16; }
  .btn:not(.yellow):not(.light):not(.ghost):not(.danger):not([disabled]):not([aria-disabled="true"]):hover { background: #3f624a; }
  .btn.yellow:not([disabled]):not([aria-disabled="true"]):hover { background: #ffdd72; }
}
.btn.small { min-height: 44px; padding: 11px 20px; font-size: 14px; }
.btn.wide { width: 100%; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: spin .8s linear infinite; }
.btn svg, .icon-btn svg { width: 20px; height: 20px; flex: none; }
svg.flip { transform: scaleX(-1); }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 6px 2px; font: inherit; color: var(--leaf); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}

/* ── fields ── */
.field { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: #4f5a44; font-weight: 700; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--field); color: var(--ink); font: inherit; font-weight: 400;
}
input::placeholder, textarea::placeholder { color: #9a9d98; }
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.chips.start { justify-content: flex-start; }
.chip.off { background: var(--rose-bg); color: #7a1a10; }
.chip.on { background: var(--mint); color: #1f5a46; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rose); background: #fffafa; }
/* a field in use: its own edge turns ink with a soft halo, no frame around it */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px #284b3a14; }
.pw { position: relative; }
.pw input { padding-inline-end: 64px; }
.pw .show { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 4px 10px; border: 0; background: none; color: var(--leaf); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 9px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--leaf); }
.err { color: var(--rose); font-size: 14px; font-weight: 700; }
.err:empty { display: none; }
.note { padding: 14px 16px; border-radius: 14px; background: var(--cream); border: 1px solid #f2e6bf; font-size: 14px; }
.note.ok { background: var(--mint); border-color: #c9e6d8; }
.note.warn { background: var(--peach); border-color: #f4d9c1; }
.note.bad { background: var(--rose-bg); border-color: #f1c7c1; color: #7a1a10; }

/* ── the sign-in pages ── */
.auth { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 24px 16px 40px; }
.auth-top { width: 100%; max-width: 460px; display: flex; justify-content: flex-end; }
.auth-card {
  width: 100%; max-width: 460px; margin-top: 12px; padding: 32px; background: var(--white); border: 1px solid var(--line);
  border-radius: 28px; box-shadow: var(--shadow);
}
.auth-home { display: block; width: fit-content; margin: 0 auto 22px; border-radius: 8px; }
.auth-card h1 { font-size: 26px; text-align: center; }
.auth-card .lede { margin-top: 8px; text-align: center; color: var(--muted); }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-foot { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 15px; color: var(--muted); text-align: center; }
.auth-foot p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
/* the tour (/visit), under the sign-in's own links: a door of its own, a line apart */
.auth-foot .visit-link { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); min-width: 60%; }
/* the language, as the site's header offers it (.language): the globe and the other language's name */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 700 13px Arial, sans-serif; cursor: pointer; }
.lang-btn svg { width: 17px; height: 17px; flex: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── the family's door ── */
/* the header, as the site's (.header): paper glass and a line under it */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(20px, env(safe-area-inset-left)); background: #faf8eff0; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid #dce2d180;
}
.top-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
.top-home { display: block; border-radius: 8px; }
.top .back { margin: 0; }
.top-end { display: flex; gap: 8px; align-items: center; }
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 20px 64px; }
.hello { text-align: center; padding: 18px 0 8px; }
.hello h1 { font-size: 34px; }
.hello .sub { margin-top: 6px; color: var(--muted); font-size: 17px; }
.banner { margin: 18px auto 0; max-width: 640px; }
.kids { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.kid {
  position: relative; width: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 26px 18px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--round);
  font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kid:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 16px 40px #284b3a14; border-color: #ccd7bd; }
.kid[disabled] { cursor: not-allowed; opacity: .6; }
.face {
  width: 64px; height: 64px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 26px; font-weight: 800; color: var(--leaf); background: var(--mint); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--line);
}
.kid .face { width: 84px; height: 84px; font-size: 34px; }
.face.c0 { background: var(--mint); } .face.c1 { background: var(--purple); color: #4b3f7a; }
.face.c2 { background: var(--sky); color: #24527a; } .face.c3 { background: var(--peach); color: #8a4a1c; }
.face.c4 { background: #fff3c4; color: #6d5410; }
.kid .name { font-size: 21px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.meta { font-size: 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--peach); color: #7a3e12; font-size: 13px; font-weight: 700; }
.chip.here { background: var(--mint); color: #1f5a46; }
.kid.add { border-style: dashed; border-width: 2px; border-color: #d9dccf; background: #fdfdf9; }
.kid.add .face { background: var(--cream); box-shadow: none; border: 2px dashed #d9c98f; color: #8a7320; }
.empty { margin-top: 20px; text-align: center; color: var(--muted); }
.hello .face { width: 88px; height: 88px; font-size: 36px; margin-bottom: 12px; }
.hello .sub.small { font-size: 15px; }
.here-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.here-note p { flex: 1 1 240px; }
.panel.nudge { background: var(--cream); border-color: #f2e6bf; }
.acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── a child: the device, today's time, the limits ── */
.child-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.child-head h1 { overflow-wrap: anywhere; }
.child-head .sub { color: var(--muted); margin-top: 2px; }
.device-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fdfdf9;
}
.device-row > svg { width: 26px; height: 26px; flex: none; color: var(--leaf); }
.device-row .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.device-row .who b { font-weight: 700; overflow-wrap: anywhere; }
.device-row .who span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
/* the child's library and favourites (family.js libraryBox) */
.lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lib-row { padding: 10px 14px; }
.lib-row .acts { flex: none; margin: 0; }
@media (max-width: 560px) { .lib-row { flex-wrap: wrap; } .lib-row .acts { width: 100%; } }
.meter { display: flex; flex-direction: column; gap: 8px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; font-size: 15px; }
.meter-top span { color: var(--muted); font-size: 14px; }
.bar { display: block; height: 12px; border-radius: 999px; background: #efefe6; overflow: hidden; }
.fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--leaf); }
.fill.full { background: var(--rose); }
.code {
  margin: 4px 0 14px; padding: 18px 12px; border-radius: 18px; background: var(--cream); border: 2px dashed #e6d38c; direction: ltr;
  text-align: center; font: 800 34px/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .12em; overflow-wrap: anywhere;
}
.code.spent { opacity: .5; text-decoration: line-through; }

/* ── the parents' area, locked ── */
.lock-face {
  display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 12px; border-radius: 50%;
  background: var(--cream); border: 2px solid #f2e6bf; color: #8a7320;
}
.lock-face svg { width: 32px; height: 32px; }
.panel.lock-card { max-width: 520px; margin: 18px auto; }

/* ── a child's own device ── */
.dev-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 24px auto 0; max-width: 640px; }
.btn.big { min-height: 64px; min-width: min(320px, 100%); padding: 16px 34px; border-radius: 18px; font-size: 20px; }
.dev-parents { max-width: 720px; margin: 26px auto 0; }

/* ── settings ── */
.set-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* ── the settings and a child's page as tiles (family.js tiles()): a picture in its colour, the name, a short line of
   where it stands, and a word when it needs the parents (never the colour alone); each opens its part as a page ── */
.tiles { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tile {
  position: relative; width: 100%; height: 100%; min-height: 128px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); color: var(--ink);
  font: inherit; text-align: start; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px #284b3a0f, 0 10px 28px #284b3a0d; transition: transform .12s ease, box-shadow .2s ease;
}
.tile:active { transform: scale(.97); }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); box-shadow: 0 16px 40px #284b3a17; } }
.tile-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--tone-bg); color: var(--tone-fg); }
.tile-ic svg { width: 24px; height: 24px; }
.tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; padding-inline-end: 18px; }
.tile-name { font-size: 17px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tile-line { font-size: 13.5px; line-height: 1.45; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tile-flag { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.6; }
.tile-go { position: absolute; top: 18px; inset-inline-end: 14px; color: #8d978a; }
.tile-go svg { width: 18px; height: 18px; }
.tone-sage { --tone-bg: #e3ecd6; --tone-fg: #2f5a3b; }
.tone-sun { --tone-bg: #fdf0c2; --tone-fg: #7a5a00; }
.tone-lav { --tone-bg: #ece3f7; --tone-fg: #5b3f86; }
.tone-sky { --tone-bg: #e1eff9; --tone-fg: #1f5c86; }
.tone-peach { --tone-bg: #fbe5d8; --tone-fg: #94441b; }
.tone-teal { --tone-bg: #dcf0ea; --tone-fg: #1d6b5b; }
.tone-stone { --tone-bg: #ecece4; --tone-fg: #4a5547; }
/* a part's own page: its picture and its name at the top */
.part-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 18px; }
.part-head .tile-ic { width: 56px; height: 56px; border-radius: 18px; }
.part-head .tile-ic svg { width: 28px; height: 28px; }
.part-words { min-width: 0; }
.part-head h1 { overflow-wrap: anywhere; }
.part-head .sub { color: var(--muted); margin-top: 2px; font-weight: 700; }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* an odd last tile takes the whole row */
  .tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tiles > li:last-child:nth-child(odd) .tile { min-height: 0; flex-direction: row; align-items: center; }
  .tile { min-height: 132px; padding: 14px 14px 12px; gap: 10px; border-radius: 20px; }
  .tile-name { font-size: 16px; }
  .part-head h1 { font-size: 26px; }
}
@media (max-width: 340px) { .tiles { grid-template-columns: minmax(0, 1fr); } .tiles > li .tile { min-height: 0; flex-direction: row; align-items: center; } }
@media (forced-colors: active) {
  .tile { border: 1px solid CanvasText; }
  .tile-flag { border: 1px solid CanvasText; }
  .tile-ic { forced-color-adjust: none; }
}
.panel { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--round); margin-bottom: 18px; }
.panel > h2 { margin-bottom: 4px; }
.panel > .lede { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline > .field { flex: 1 1 220px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list > li { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; padding-top: 4px; }
.list .who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.list .who b { font-weight: 700; overflow-wrap: anywhere; }
.list .who span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.list .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #f2f2ea; font-size: 12px; font-weight: 700; color: #4f5a44; margin-inline-start: 6px; vertical-align: middle; }
.tag.here { background: var(--mint); color: #1f5a46; }
.copyline { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.copyline input { flex: 1 1 260px; direction: ltr; font-size: 14px; }
.danger-zone { border-color: #f1c7c1; }
.plan-line { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }
.plan-line b { font-weight: 800; }

/* ── the plan: the cycle, the plans for sale, the banner that leads to them ── */
.plan-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-note p { flex: 1 1 240px; }
.cycle { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: #f6f6ef; }
.cycle label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 15px; border: 2px solid transparent; border-radius: 11px; font-weight: 700; cursor: pointer; }
.cycle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* the cycle chosen: an ink edge (far above 3:1 on the track), not the white alone */
.cycle label:has(input:checked) { background: var(--white); border-color: var(--ink); box-shadow: 0 2px 10px #284b3a14; }
.cycle label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cycle .save { padding: 1px 9px; border-radius: 999px; background: var(--mint); color: #1f5a46; font-size: 12px; font-weight: 800; }
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fdfdf9; }
.plan-card.featured { border: 2px solid #e6d38c; background: var(--cream); }
.plan-card h3 { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.plan-card .price { font-size: 26px; font-weight: 800; line-height: 1.25; }
.plan-card .price small { font-size: 14px; font-weight: 700; color: var(--muted); }
.plan-card .btn { margin-top: auto; }
.plan-card .badge { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; }

/* ── the plans page (/plans, plans.js): the face and the title, the children and the cycle, two large cards (the one the
   team features in ink with the yellow act), three lines of trust, and the email as the first of two steps ── */
.pl { max-width: 920px; }
.pl-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 0 6px; }
.pl-face { width: 76px; height: 76px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 6px #f9d45d40, 0 14px 34px #284b3a1a; }
.pl-eyebrow { margin-top: 8px; padding: 3px 14px; border-radius: 999px; background: var(--sage); color: #1f5a46; font-size: 13px; font-weight: 800; }
.pl-hero h1 { font-size: 40px; line-height: 1.2; }
.pl-lede { max-width: 560px; color: var(--muted); font-size: 17px; }
.pl-picks { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 26px 0 22px; }
.pl-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.pl-legend { font-size: 15px; font-weight: 800; }
.pl-seg { align-self: center; justify-content: center; }
/* the children: three equal tiles in one row on every screen, the dots over the words */
.pl-seg.kids { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: min(420px, 100%); }
/* in the app's look too: the family page's «.tm-app .kids» (its children's grid) is not this row */
.tm-app .pl-seg.kids { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; margin: 0; }
.pl-seg.kids label { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; line-height: 1.25; }
.pl-dots { display: inline-flex; gap: 3px; }
.pl-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); }
.pl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pl-cards.one { grid-template-columns: minmax(0, 460px); justify-content: center; }
.pl-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 24px; border-radius: 28px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pl-card h2 { font-size: 24px; font-weight: 800; overflow-wrap: anywhere; }
.pl-card .badge { position: absolute; top: -13px; inset-inline-start: 24px; padding: 4px 13px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px #284b3a1f; }
.pl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pl-amount { font-size: 36px; font-weight: 800; line-height: 1.15; }
.pl-price small { font-size: 14px; font-weight: 700; color: var(--muted); }
.pl-price-later, .pl-month { font-size: 14px; color: var(--muted); }
.pl-feats { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pl-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; }
.pl-tick { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--sage); color: var(--leaf); }
.pl-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.pl-card .btn { margin-top: auto; }
/* the plan the team features: ink, with the yellow act */
.pl-card.featured { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: 0 22px 56px #284b3a3d; }
.pl-card.featured .pl-price small, .pl-card.featured .pl-month, .pl-card.featured .pl-price-later { color: #d5e2d4; }
.pl-card.featured .pl-tick { background: var(--yellow); color: var(--ink); }
.pl-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.pl-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #3e5446; }
.pl-trust svg { width: 20px; height: 20px; flex: none; color: var(--leaf); }
.pl-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px auto 0; max-width: 640px; text-align: center; }
.pl-tour { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; border-radius: 999px; text-align: center; background: var(--cream); border: 1px solid #f2e6bf; color: var(--ink); text-decoration: none; }
.pl-tour svg { width: 18px; height: 18px; flex: none; color: var(--leaf); }
.pl-none { max-width: 560px; margin: 24px auto 0; }
/* step one of two: the email */
dialog.pl-mail { width: min(470px, calc(100vw - 24px)); padding: 26px 24px 22px; }
.pl-x { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #284b3a0f; color: var(--ink); cursor: pointer; }
.pl-x svg { width: 20px; height: 20px; }
.pl-step { width: fit-content; margin-bottom: 10px; padding: 2px 12px; border-radius: 999px; background: var(--sage); color: #1f5a46; font-size: 13px; font-weight: 800; }
.pl-mail h2 { font-size: 24px; padding-inline-end: 44px; }
.pl-mail .lede { margin: 6px 0 16px; }
.pl-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--cream); border: 1px solid #f2e6bf; }
.pl-sum-what { display: flex; flex-direction: column; min-width: 0; }
.pl-sum-k { font-size: 12px; font-weight: 800; color: var(--muted); }
.pl-sum b { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.pl-sum-p { flex: none; font-size: 18px; font-weight: 800; }
.pl-mail .auth-form { margin-top: 18px; }
.auth-card .pl-step { margin: -6px auto 12px; }
.pl-mail-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.pl-mail-note svg { width: 16px; height: 16px; flex: none; color: var(--leaf); }
.pl-have { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 760px) {
  .pl-cards { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pl-hero h1 { font-size: 32px; }
  .pl-lede { font-size: 16px; }
  .pl-card { padding: 26px 20px 20px; }
  .pl-amount { font-size: 32px; }
}
@media (max-width: 380px) {
  .pl-seg label { padding: 7px 10px; gap: 6px; }
}
@media (forced-colors: active) {
  .pl-card, .pl-sum, .pl-tour, .pl-x { border: 1px solid CanvasText; }
  .pl-dots i, .pl-tick { forced-color-adjust: none; }
}

/* ── dialog, toast, wait ── */
dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 28px; border: 0; border-radius: 28px;
  background: var(--white); color: var(--ink); box-shadow: 0 30px 100px #284b3a33; overflow: auto;
}
dialog::backdrop { background: #1d211d66; }
dialog h2 { margin-bottom: 6px; }
dialog .lede { color: var(--muted); margin-bottom: 18px; }
dialog .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
/* what a box keeps folded: its lesser choices, opened on a tap */
.more-opts { border-radius: 14px; background: #f6f6ef; }
.more-opts > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; list-style: none; cursor: pointer; font-weight: 700; color: var(--ink); border-radius: 14px; }
.more-opts > summary::-webkit-details-marker { display: none; }
.more-opts > summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s ease; }
.more-opts[open] > summary svg { transform: rotate(90deg); }
.more-opts[open] > summary svg.flip { transform: scaleX(-1) rotate(90deg); }
.more-opts > .field, .more-opts > .opt { padding: 0 14px 14px; }
.more-opts > .opt { display: grid; gap: 4px; }
.more-opts > .opt .hint { margin-inline-start: 34px; }
.more-opts > .hint.fold { padding: 0 14px 14px; line-height: 1.7; }
.more-opts > .fold-in { display: grid; gap: 14px; padding: 2px 14px 16px; }
.more-opts > .fold-in .field textarea, .more-opts > .fold-in .field input, .more-opts > .fold-in .field select { background: var(--white); }
.toast {
  position: fixed; inset-inline: 16px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60; margin: 0 auto; width: fit-content; max-width: calc(100vw - 32px);
  padding: 14px 22px; border-radius: 14px; background: var(--ink); color: var(--white); font-weight: 700; box-shadow: 0 16px 40px #284b3a33;
  transition: opacity .2s ease;
}
.toast:not(.show) { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.wait { display: grid; place-items: center; min-height: 50vh; color: var(--muted); }
.wait .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #d9dccf; border-inline-end-color: var(--leaf); animation: spin .9s linear infinite; }

@media (max-width: 560px) {
  .auth-card { padding: 24px 20px; border-radius: 24px; }
  .row2 { grid-template-columns: 1fr; }
  .hello h1 { font-size: 28px; }
  .kids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kid { min-height: 190px; padding: 20px 10px 16px; }
  .kid .face { width: 68px; height: 68px; font-size: 28px; }
  .kid .name { font-size: 18px; }
  .panel { padding: 20px 16px; }
  dialog { padding: 22px 18px; }
  .top .label { display: none; }
  .child-head .face { width: 56px; height: 56px; font-size: 22px; }
  .code { font-size: 28px; letter-spacing: .08em; }
  .btn.big { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .kid:hover:not([disabled]) { transform: none; }
  .btn:not([disabled]):not([aria-disabled="true"]):hover { transform: none; }
}
@media (forced-colors: active) {
  .btn, .icon-btn, .lang-btn, .kid, .panel, .auth-card, dialog, input, select, .device-row, .code, .chip, .tag, .plan-card, .cycle, .badge { border: 1px solid CanvasText; }
  /* a transparent edge shows in forced colours: the cycles not chosen keep none, so the chosen one is told by its edge, not by a colour */
  .cycle label { border-color: Canvas; }
  .cycle label:has(input:checked) { border: 2px solid Highlight; }
  .face { forced-color-adjust: none; }
  .bar { border: 1px solid CanvasText; }
  .fill { background: Highlight; forced-color-adjust: none; }
}

/* ── inside Tamoora's app (family.js and visit.js mark the page .tm-app; the website keeps everything above): the
   parents' area as an app's screen. A slim bar of round buttons on the paper (a hairline once the page moves under it),
   a large title at the start, the children as rows with today's time, cards without edges, the back as the system's. ── */
.tm-app body { -webkit-tap-highlight-color: transparent; }
.tm-app .top {
  min-height: 58px; padding: 7px 16px; gap: 10px; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid transparent; transition: background-color .2s ease, border-color .2s ease;
}
.tm-app .top.moved { background: #faf8efeb; -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px); border-bottom-color: #284b3a1f; }
.tm-app .top .tamoora-lockup { --logo-size: 34px; }
.tm-app .top-end { gap: 8px; }
.tm-app .top .icon-btn, .tm-app .top .lang-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; border: 0; border-radius: 50%;
  background: #284b3a0f; color: var(--ink); transition: background-color .15s ease, transform .15s ease;
}
.tm-app .top .icon-btn:active, .tm-app .top .lang-btn:active { background: #284b3a24; transform: scale(.94); }
.tm-app .top .icon-btn svg { width: 21px; height: 21px; }
.tm-app .top .label { display: none; }
.tm-app .lang-short { display: block; font: 800 15px/1 'Tajawal', system-ui, sans-serif; }
/* Tajawal sits an Arabic letter low on its line: lifted to the circle's middle */
.tm-app .lang-btn[lang="ar"] .lang-short { font-size: 20px; transform: translateY(-3px); }
.tm-app .wrap { max-width: 960px; padding: 6px 16px 40px; }
.tm-app .hello { text-align: start; padding: 10px 2px 2px; }
.tm-app .hello h1 { font-size: 34px; line-height: 1.2; }
.tm-app .hello .sub { margin-top: 4px; font-size: 17px; font-weight: 700; color: #3e5446; }
.tm-app .hello .sub.small { margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.tm-app .hello:has(.lock-face) { text-align: center; }
.tm-app .note { border: 0; border-radius: 16px; }
.tm-app .banner { max-width: none; margin: 14px 0 0; padding: 13px 16px; }
.tm-app .team-notes { margin-top: 22px; display: grid; gap: 10px; }
.tm-app .team-notes .banner { margin: 0; background: var(--white); box-shadow: 0 1px 2px #284b3a0f, 0 10px 28px #284b3a0d; }
.tm-app .team-note b { display: block; margin-bottom: 2px; }
/* the children: one row each (two side by side on an iPad), the add row last */
.tm-app .kids { margin: 18px 0 0; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tm-app .kid {
  min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px;
  text-align: start; border: 0; border-radius: 22px; background: var(--white);
  box-shadow: 0 1px 2px #284b3a0f, 0 10px 28px #284b3a0d; transition: transform .12s ease;
}
.tm-app .kid:hover:not([disabled]) { transform: none; border-color: transparent; box-shadow: 0 1px 2px #284b3a0f, 0 10px 28px #284b3a0d; }
.tm-app .kid:active:not([disabled]) { transform: scale(.985); }
.tm-app .kid .face { width: 56px; height: 56px; font-size: 24px; border: 0; box-shadow: none; }
.tm-app .kid-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-app .kid-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tm-app .kid .name { font-size: 19px; line-height: 1.3; }
.tm-app .kid .meta { font-size: 14px; line-height: 1.45; }
.tm-app .kid .chips { justify-content: flex-start; }
.tm-app .kid .chip { padding: 2px 9px; font-size: 12px; }
.tm-app .kid-time { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tm-app .kid-time .bar { height: 6px; background: #284b3a14; }
.tm-app .kid-go { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: #8d978a; }
.tm-app .kid-go svg { width: 20px; height: 20px; }
.tm-app .kid.add { min-height: 76px; padding: 12px 16px; background: transparent; border: 2px dashed #d3d9c6; box-shadow: none; }
.tm-app .kid.add .face { width: 48px; height: 48px; background: var(--cream); border: 2px dashed #d9c98f; }
.tm-app .kid.add .face svg { width: 22px; height: 22px; }
.tm-app .kid.add .name { font-size: 17px; }
.tm-app .empty { text-align: start; padding: 0 4px; }
/* a child's page, the settings: the way back is the bar's first round button; cards without edges */
.tm-app .top .icon-btn.back svg { width: 24px; height: 24px; }
.tm-app .child-head { gap: 14px; margin: 2px 0 18px; }
.tm-app .child-head .face { width: 60px; height: 60px; font-size: 26px; border: 0; box-shadow: none; }
.tm-app .child-head h1 { font-size: 30px; }
.tm-app .panel { border: 0; border-radius: 24px; padding: 20px 18px; box-shadow: 0 1px 2px #284b3a0f, 0 10px 28px #284b3a0d; }
.tm-app .panel.nudge { box-shadow: none; }
.tm-app .tile { border: 0; }
.tm-app .tile:hover { transform: none; box-shadow: 0 1px 2px #284b3a0f, 0 10px 28px #284b3a0d; }
.tm-app .tile:active { transform: scale(.97); }
.tm-app .part-head h1 { font-size: 30px; }
.tm-app .device-row { border: 0; background: #f3f4eb; }
.tm-app .btn { border-radius: 16px; }
.tm-app dialog { border-radius: 26px; padding: 24px 20px 20px; }
.tm-app dialog h2 { text-align: center; }
.tm-app dialog .lede { text-align: center; }
/* a box's two acts side by side, the same size, at its foot */
.tm-app dialog .acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.tm-app dialog .acts > .btn { width: 100%; padding-inline: 12px; }
@media (min-width: 700px) {
  /* the bar's ends line up with the page's content (960 wide at most, 28 inside) */
  .tm-app .top { padding: 8px max(28px, calc((100% - 960px) / 2 + 28px)); }
  .tm-app .wrap { padding: 10px 28px 48px; }
  .tm-app .hello h1 { font-size: 40px; }
  .tm-app .kids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tm-app .kid { padding: 20px; }
  .tm-app .kid .face { width: 64px; height: 64px; font-size: 27px; }
  .tm-app .kid .name { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .tm-app .kid:active:not([disabled]), .tm-app .top .icon-btn:active, .tm-app .top .lang-btn:active { transform: none; } }
@media (forced-colors: active) {
  .tm-app .kid, .tm-app .tile, .tm-app .panel, .tm-app .top .icon-btn, .tm-app .top .lang-btn, .tm-app .icon-btn.back { border: 1px solid CanvasText; }
  .tm-app .top.moved { border-bottom-color: CanvasText; }
}