/* The first page of the board (index.html): what the system is, how its parts connect, and what each part needs.
   Colours and the font come from board.css. Nothing here comes from the internet. Weights stay at 700 or less.
   The two maps are SVG: every look of them is a class below (the CSP forbids style attributes). */

body.landing {
  --land-in: var(--accent);
  --land-out: #14804a;
  --land-side: #6a4fb3;
  --land-line: #9aa6c8;
  background: var(--paper);
}
.landing .wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, #ffffff 0%, var(--accent-wash) 100%); border-bottom: 1px solid var(--rule); padding-block: 44px 36px; }
.hero .kicker { font-family: var(--mono); direction: ltr; text-align: start; color: var(--accent-dark); font-weight: 600; font-size: 1.05rem; margin: 0 0 4px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.35; color: var(--ink); }
.hero .lede { max-width: 56ch; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 2; color: var(--ink-2); margin-block: 10px 24px; }
.landing .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }   /* RTL: flex-end is the left side */

/* ---------- the class is closed ---------- */
.closed { margin-block: 28px 0; padding: 18px 22px; background: var(--warn-wash); border: 2px solid #e3c47c; border-radius: var(--radius); color: #5b3600; }
.closed h2 { font-size: 1.4rem; font-weight: 700; margin-block-end: 4px; }
.closed p { margin-block: 4px 10px; }
.closed .button { background: #fff; }

/* ---------- blocks ---------- */
.landing .block { padding-block: 40px 8px; }
.landing .block h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.5; margin-block-end: 6px; }
.landing .intro { color: var(--ink-2); max-width: 70ch; margin-block-end: 18px; }

/* ---------- the map ---------- */
.figure { background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; padding: 14px; }
.diagram { display: block; width: 100%; height: auto; }
.diagram-narrow { display: none; max-width: 420px; margin-inline: auto; }

.diagram .box { fill: var(--sheet); stroke: #5d6a91; stroke-width: 2.5; }
.diagram .box.server { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 3.5; }
.diagram .box.side { stroke: var(--land-side); stroke-dasharray: 10 7; }
.diagram .box.optional, .diagram .chip.optional { stroke-dasharray: 10 7; }
.diagram .chip { fill: var(--sheet); stroke: var(--accent); stroke-width: 2.5; }
.diagram .t-title { font-family: var(--font); font-size: 29px; font-weight: 700; fill: var(--ink); }
.diagram .t-sub { font-family: var(--font); font-size: 22px; font-weight: 400; fill: var(--ink-2); }
.diagram .t-addr { font-family: var(--mono); direction: ltr; unicode-bidi: plaintext; font-size: 22px; font-weight: 600; fill: var(--accent-dark); }
.diagram .t-big { font-family: var(--font); font-size: 36px; font-weight: 700; fill: var(--ink); }
.diagram .t-addr-big { font-size: 28px; }
.diagram .t-chip { font-family: var(--font); font-size: 26px; font-weight: 700; fill: var(--ink); }
.diagram .t-chip-sub { font-family: var(--font); font-size: 22px; font-weight: 400; fill: var(--ink-2); }
.diagram .bd { fill: var(--accent); stroke: var(--sheet); stroke-width: 3; }
.diagram .bd-n { font-family: var(--font); font-size: 26px; font-weight: 700; fill: #fff; }
.diagram .bd-big { }
.diagram .bd-n-big { font-size: 30px; }
.diagram .lab { font-family: var(--font); font-size: 22px; font-weight: 600; }
.diagram .lab-in { fill: var(--accent-dark); }
.diagram .lab-out { fill: #0d6139; }
.diagram .lab-side { fill: #4f3a8f; }
.diagram .ar { fill: none; stroke-width: 4; stroke-linecap: round; }
.diagram .ar-in { stroke: var(--land-in); }
.diagram .ar-out { stroke: var(--land-out); }
.diagram .ar-side { stroke: var(--land-side); stroke-dasharray: 9 7; }
.diagram .ar-step { stroke: var(--accent); stroke-width: 3; }
.diagram .head-in { fill: var(--land-in); }
.diagram .head-out { fill: var(--land-out); }
.diagram .head-side { fill: var(--land-side); }

/* every box is a link; the server box goes to its card on this page */
.diagram .hit { cursor: pointer; outline: none; }
.diagram .hit .box { transition: fill .15s; }
.diagram .hit:hover .box { fill: var(--accent-wash); stroke: var(--accent); }
.diagram .hit:hover .box.server { fill: #dbe3fb; }
.diagram .hit:focus-visible .box { stroke: var(--accent-dark); stroke-width: 6; }
.diagram .hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 20px; }
.diagram .pill { fill: #fff; }

/* the arrows breathe a little; nothing moves for a person who asked for stillness */
@media (prefers-reduced-motion: no-preference) {
  .diagram .flow { stroke-dasharray: 12 9; animation: land-flow 1.6s linear infinite; }
  @keyframes land-flow { to { stroke-dashoffset: -21; } }
}

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 14px 4px 0; color: var(--ink-2); font-size: .95rem; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.key { display: inline-block; width: 34px; height: 0; border-top: 4px solid; border-radius: 2px; }
.key-in { border-color: var(--land-in); }
.key-out { border-color: var(--land-out); }
.key-side { border-color: var(--land-side); border-top-style: dashed; }
.key-opt { border-color: #5d6a91; border-top-style: dashed; }

/* ---------- one try: 3 columns x 2 rows (RTL: step 1 is top right). Connectors: an arrow in the gap between neighbours, and an
   elbow (down, across, down, with a head) from the end of one row to the start of the next. Tablet: 2 columns. Phone: 1 column. ---------- */
.steps { --gap: 44px; --row: 54px; --line: 3px; list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--row) var(--gap); }
.steps li { position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; text-align: center; }
.steps .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.2rem; }
.steps h3 { font-size: 1.12rem; font-weight: 700; margin: 0; }
.steps p { color: var(--ink-2); font-size: 1rem; line-height: 1.8; margin: 0; }
.steps li::before, .steps li::after { content: none; position: absolute; }

@media (min-width: 981px) {
  /* neighbour arrow: a line in the gap on the left of the card, and a head that points left */
  .steps li:not(:nth-child(3n)):not(:last-child)::after { content: ""; top: 50%; left: calc(-1 * var(--gap)); width: var(--gap); height: var(--line); background: var(--accent); transform: translateY(-50%); }
  .steps li:not(:nth-child(3n)):not(:last-child)::before { content: ""; top: 50%; left: calc(-1 * var(--gap) - 1px); width: 12px; height: 12px; border-left: var(--line) solid var(--accent); border-bottom: var(--line) solid var(--accent); transform: translateY(-50%) rotate(45deg); }
  /* elbow from step 3 (left end of row 1) to step 4 (right end of row 2) */
  .steps li:nth-child(3) { --span: calc(200% + 2 * var(--gap)); }
  .steps li:nth-child(3)::before {
    content: ""; top: calc(100% + 1px); left: 50%; width: var(--span); height: calc(var(--row) - 2px); border: 0; transform: none;
    background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--line) 50% no-repeat, linear-gradient(var(--accent), var(--accent)) 0 50% / 100% var(--line) no-repeat, linear-gradient(var(--accent), var(--accent)) 100% 50% / var(--line) 50% no-repeat; }
  .steps li:nth-child(3)::after {
    content: ""; top: calc(100% + var(--row) - 14px); left: calc(50% + var(--span)); width: 12px; height: 12px; background: none; border: 0; border-right: var(--line) solid var(--accent); border-bottom: var(--line) solid var(--accent); transform: translateX(-50%) rotate(45deg); }
}

@media (min-width: 601px) and (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li::before, .steps li::after { content: none; }
  .steps li:nth-child(odd)::after { content: ""; top: 50%; left: calc(-1 * var(--gap)); width: var(--gap); height: var(--line); background: var(--accent); transform: translateY(-50%); }
  .steps li:nth-child(odd)::before { content: ""; top: 50%; left: calc(-1 * var(--gap) - 1px); width: 12px; height: 12px; border-left: var(--line) solid var(--accent); border-bottom: var(--line) solid var(--accent); transform: translateY(-50%) rotate(45deg); }
  .steps li:nth-child(2n):not(:last-child) { --span: calc(100% + var(--gap)); }
  .steps li:nth-child(2n):not(:last-child)::before {
    content: ""; top: calc(100% + 1px); left: 50%; width: var(--span); height: calc(var(--row) - 2px); border: 0; transform: none;
    background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--line) 50% no-repeat, linear-gradient(var(--accent), var(--accent)) 0 50% / 100% var(--line) no-repeat, linear-gradient(var(--accent), var(--accent)) 100% 50% / var(--line) 50% no-repeat; }
  .steps li:nth-child(2n):not(:last-child)::after {
    content: ""; top: calc(100% + var(--row) - 14px); left: calc(50% + var(--span)); width: 12px; height: 12px; background: none; border: 0; border-right: var(--line) solid var(--accent); border-bottom: var(--line) solid var(--accent); transform: translateX(-50%) rotate(45deg); }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; --row: 38px; }
  .steps li::before, .steps li::after { content: none; }
  .steps li:not(:last-child)::after { content: ""; top: 100%; left: 50%; width: var(--line); height: var(--row); background: var(--accent); transform: translateX(-50%); }
  .steps li:not(:last-child)::before { content: ""; top: calc(100% + var(--row) - 10px); left: 50%; width: 12px; height: 12px; border-right: var(--line) solid var(--accent); border-bottom: var(--line) solid var(--accent); transform: translateX(-50%) rotate(45deg); z-index: 1; }
}

/* ---------- the four kinds of code ---------- */
.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 14px 0 0; }
.codes > div { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; text-align: center; }
.codes dt { margin-block-end: 6px; }
.codes dd { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.8; }
.tag { display: inline-block; padding: 0 12px; border-radius: 999px; font-weight: 700; font-size: .92rem; border: 1px solid currentColor; line-height: 1.7; }
.tag-class { color: var(--accent-dark); background: var(--accent-wash); }
.tag-me { color: #0d6139; background: var(--ok-wash); }
.tag-pin { color: #5b3600; background: var(--warn-wash); }
.tag-admin { color: #4f3a8f; background: #efe9fb; }

/* ---------- the cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-block-start: 14px; }
.part { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 18px 14px; break-inside: avoid; }
.part-server { grid-column: 1 / -1; border-color: var(--accent); background: linear-gradient(180deg, #fff 0%, #f6f8fe 100%); }
.part-optional, .part-side { border-style: dashed; }
.part header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block-end: 6px; }
.part > p { text-align: center; }
.part h3 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.part .n { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.1rem; }
.part p { color: var(--ink); line-height: 1.9; }
.inside { margin: 8px 0 0; padding-inline-start: 22px; color: var(--ink-2); line-height: 1.9; }
.inside b { color: var(--ink); font-weight: 700; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: .98rem; }
.facts dt { font-weight: 700; color: var(--ink-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts a { font-family: var(--mono); font-weight: 600; }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-block-start: 14px; }
.qa { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 18px 12px; break-inside: avoid; }
.qa h3 { font-size: 1.08rem; font-weight: 700; margin-block-end: 4px; }
.qa p { color: var(--ink-2); max-width: 75ch; }

/* ---------- the teacher's own computer ---------- */
.local-box { margin-block: 36px 40px; padding: 16px 20px; background: var(--warn-wash); border: 1px solid #e3c47c; border-radius: var(--radius); color: #5b3600; }
.local-box h2 { font-size: 1.15rem; font-weight: 700; }
.local-box p { margin-block: 4px 10px; }
.local-box .button { background: #fff; }

.open { display: flex; justify-content: flex-end; margin: 12px 0 0; }   /* buttons on the left */
.open .button { min-height: 44px; }
.landing main { padding-block-end: 44px; }

/* ---------- narrow screens: the vertical map, steps stacked ---------- */
@media (max-width: 820px) {
  .diagram-wide { display: none; }
  .diagram-narrow { display: block; }
  .diagram .t-title { font-size: 20px; }
  .diagram .t-sub { font-size: 16px; }
  .diagram .t-addr { font-size: 16px; }
  .diagram .t-big { font-size: 28px; }
  .diagram .t-addr-big { font-size: 20px; }
  .diagram .t-chip { font-size: 20px; }
  .diagram .t-chip-sub { font-size: 16px; }
  .diagram .bd-n { font-size: 20px; }
  .diagram .bd-n-big { font-size: 24px; }
  .diagram .lab { font-size: 17px; }
  .diagram .ar { stroke-width: 3.5; }
  .figure { padding: 8px; border-radius: 16px; }
  .cards, .faq { grid-template-columns: 1fr; }
  .hero { padding-block: 30px 26px; }
  .landing .wrap { padding-inline: 16px; }
}
@media (max-width: 420px) {
  .landing .actions .button { flex: 1 1 100%; }
}

@media print {
  body.landing { background: #fff; }
  .hero { background: #fff; }
  .diagram-wide { display: block; }
  .diagram-narrow { display: none; }
  .diagram .flow { animation: none; stroke-dasharray: none; }
  .landing .actions { display: none; }
  .part, .steps li, .codes > div { break-inside: avoid; }
}
.timed { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(255, 194, 51, .85); color: #3b2a00; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.button.primary .timed { background: rgba(255, 255, 255, .25); color: inherit; }


/* ---------- the hero, second look: dark, with the promise and a program that types itself ---------- */
.hero.hero-v2 { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(1200px 600px at 85% -10%, #5b5ff0 0%, transparent 60%), radial-gradient(900px 500px at 10% 110%, #3b2d9a 0%, transparent 60%), linear-gradient(160deg, #1b1f5e 0%, #2a2ca3 55%, #3a3fd1 100%); color: #fff; border-bottom: 0; padding-block: 56px 48px; }
.hero-v2 .kicker { color: #ffd45c; }
.hero-v2 h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.hero-v2 .promise { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.7; margin: 10px 0 8px; color: #fff; max-width: 24ch; }
.hero-v2 .lede { color: rgba(255, 255, 255, .86); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.95; margin-block: 8px 18px; max-width: 58ch; }
.hero-v2 .lede.small { font-size: .95rem; margin-top: 14px; opacity: .85; }
.hero-v2 .lede bdi { background: rgba(255, 255, 255, .14); padding: 1px 10px; border-radius: 99px; }
.hero-v2 .notice { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 36px; align-items: center; }
.hero-text { min-width: 0; }
@media (min-width: 901px) { .hero-text { order: 2; } .hero-demo { order: 1; } }      /* RTL: the text and its buttons on the left half, the code card on the right */
.hero-v2 .actions { margin: 4px 0 18px; align-items: center; }
.hero-v2 .actions .button { min-height: 46px; }
.hero-v2 .stats { margin: 0 0 6px; }
.stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0 0 22px; max-width: 460px; }
.stats li { display: grid; gap: 0; place-items: center; text-align: center; padding: 10px 8px; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 480px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
.stats b { font-size: 1.5rem; line-height: 1.3; font-weight: 700; }
.stats span { font-size: .85rem; opacity: .85; }
.hero-v2 .button { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); }
.hero-v2 .button:hover { background: rgba(255, 255, 255, .22); }
.hero-v2 .button.primary { background: #ffc233; color: #1b2140; border-color: #ffc233; box-shadow: 0 6px 0 #d99a00, 0 14px 30px rgba(0, 0, 0, .25); font-weight: 700; }
.hero-v2 .button.primary:hover { background: #ffd05c; }
.hero-v2 .button .timed { opacity: .8; }
/* the program that types itself */
.hero-demo { display: grid; gap: 10px; }
.demo-window { direction: ltr; text-align: left; background: #0f1730; border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; font-family: var(--mono); }
.demo-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #161f3d; color: #8f9bc8; font-size: .8rem; }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.demo-bar i:nth-child(2) { background: #febc2e; }
.demo-bar i:nth-child(3) { background: #28c840; }
.demo-bar span { margin-left: 8px; }
.demo-code { margin: 0; padding: 18px 20px 12px; font-size: .95rem; line-height: 1.8; color: #e8ecfb; white-space: pre; overflow-x: auto; }
.tk-kw { color: #c792ea; } .tk-str { color: #c3e88d; } .tk-num { color: #f78c6c; } .tk-id { color: #e8ecfb; } .tk-op { color: #89ddff; }

.demo-out { display: flex; gap: 10px; padding: 10px 20px 16px; border-top: 1px solid rgba(255, 255, 255, .08); color: #c3e88d; font-size: .95rem; min-height: 1.6em; }
.demo-prompt { color: #8f9bc8; }

.demo-caption { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .75); text-align: center; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero.hero-v2 { padding-block: 36px 32px; }
  .hero-v2 .promise { max-width: none; }
  .demo-code { font-size: .85rem; min-height: 11em; }
}
/* how you learn: four steps under the hero */
.how { padding-block: 40px 8px; }
.how h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin: 0 0 14px; }
.how-list { list-style: none; counter-reset: how; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.how-list li { counter-increment: how; position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 18px 16px 18px; display: grid; gap: 6px; line-height: 1.85; justify-items: center; text-align: center; }
.how-list li::before { content: counter(how, persian); display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-wash); color: var(--accent-dark); font-weight: 700; font-size: 1.1rem; }
.how-list b { font-size: 1.08rem; }
.how-list span { color: var(--ink-2); font-size: .96rem; }
@media (max-width: 980px) { .how-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .how-list { grid-template-columns: minmax(0, 1fr); } }
.for-teacher { margin: 44px 0 -24px; font-size: 1.05rem; color: var(--ink-2); font-weight: 600; border-top: 1px solid var(--rule); padding-top: 22px; }

/* the aurora: two soft blobs drifting behind the hero. Pure paint, nothing in the layout moves. */
.hero-v2::before, .hero-v2::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.hero-v2::before { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; inset-inline-end: -12vw; top: -18vw; background: radial-gradient(circle, #7c7cff 0%, rgba(124, 124, 255, 0) 70%); }
.hero-v2::after { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; inset-inline-start: -10vw; bottom: -16vw; background: radial-gradient(circle, #ffc233 0%, rgba(255, 194, 51, 0) 70%); opacity: .28; }
.hero-v2 > * { position: relative; }
.stats b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .hero-v2::before { animation: land-drift-a 18s ease-in-out infinite alternate; }
  .hero-v2::after { animation: land-drift-b 22s ease-in-out infinite alternate; }
  @keyframes land-drift-a { to { transform: translate(-9vw, 7vw) scale(1.15); } }
  @keyframes land-drift-b { to { transform: translate(8vw, -6vw) scale(1.1); } }
}