/* Motiyol — the wall chart.
 *
 * The product does not teach; it makes starting inevitable and finishing
 * visible. So the site is the object that habit already lives on in every
 * Turkish home: the ders programı taped above a desk. A ruled week you fill
 * in, drawn in chalk on a classroom board.
 *
 * Two inks carry everything. Board green is the ground and chalk is the line;
 * every other value comes from the density of rule and mark, never from
 * adding a third colour. Highlighter yellow and the Görev Kodu's coral are
 * not palette — they are objects, and they appear only where that object is.
 */

:root {
  --board: #153b32;
  --board-deep: #0e2b24;
  --board-lift: #1b4a3f;

  --chalk: #efede4;
  --chalk-dim: #a9bdb4;
  --chalk-faint: rgba(239, 237, 228, 0.14);
  --chalk-rule: rgba(239, 237, 228, 0.1);

  /* Objects, not palette. */
  --hilite: #f5e63d;
  --coral: #ff7a45;
  --ink: #0e2b24;

  --display: "Baloo 2", "Segoe UI Rounded", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  /* Only for what is written ON the chart by hand: day heads and entries. */
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --gutter: clamp(20px, 4vw, 64px);
  --measure: 68ch;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mark: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  /* The chart is one continuous surface; overscroll must not reveal white. */
  background: var(--board-deep);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--board);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The parts we did not draw still belong to the chart. */
::selection {
  background: var(--hilite);
  color: var(--ink);
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: var(--board-deep);
}
::-webkit-scrollbar-thumb {
  background: rgba(239, 237, 228, 0.22);
  border-radius: 99px;
  border: 3px solid var(--board-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(239, 237, 228, 0.38);
}
* {
  scrollbar-color: rgba(239, 237, 228, 0.22) var(--board-deep);
  scrollbar-width: thin;
}
:focus-visible {
  outline: 2px solid var(--hilite);
  outline-offset: 3px;
  border-radius: 2px;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── The lattice ──────────────────────────────────────────────────────────
   The week is structure, not a background: every section places its content
   on the same seven columns the hero draws, and the only vertical rules are
   the edges of real cells. */
.chart {
  position: relative;
}

.wrap {
  width: min(1180px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

section {
  padding: clamp(64px, 9vw, 128px) 0;
  border-top: 1px solid var(--chalk-rule);
}

/* ── Type ─────────────────────────────────────────────────────────────────
   Baloo 2 and IBM Plex Sans carry over from the app. They are a brand
   commitment — the two surfaces must not diverge — not a default. */
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02;
}
h2 {
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.1;
}
h3 {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
}
p {
  margin: 0;
  max-width: var(--measure);
  color: var(--chalk-dim);
}
strong {
  color: var(--chalk);
  font-weight: 600;
}

/* ── The highlighter ──────────────────────────────────────────────────────
   The one authored moment on the page. A fosforlu stroke sweeps across
   exactly one phrase per viewport — the live thing. The text is fully
   readable before and without it: the mark animates from an already-visible
   default, so nothing depends on the stroke arriving. */
.mark {
  position: relative;
  /* Without its own stacking context, z-index:-1 below sends the stroke
     behind the section's ground, and the text turns ink on green. */
  isolation: isolate;
  color: var(--chalk);
  white-space: nowrap;
}
.mark::before {
  content: "";
  position: absolute;
  /* Just past the span's edges and no further: a closing full stop is kept
     inside the span, and a word space is wider than the overshoot. The mask's
     ragged ends stay within that overshoot, so it never cuts a letter. */
  inset: 0.1em -0.1em 0.02em;
  background: var(--hilite);
  z-index: -1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 6 L60 4 L130 6 L198 3 L200 12 L198.5 20 L200 28 L198 36 L140 37 L70 35 L2 38 L0 29 L1.5 21 L0 13 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 6 L60 4 L130 6 L198 3 L200 12 L198.5 20 L200 28 L198 36 L140 37 L70 35 L2 38 L0 29 L1.5 21 L0 13 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-0.6deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 620ms var(--ease-mark);
}
.mark[data-drawn]::before {
  clip-path: inset(0 0 0 0);
}
/* Marked text sits on the highlighter, so it takes the ink colour. */
.mark[data-drawn] {
  color: var(--ink);
  transition: color 300ms var(--ease-out) 160ms;
}
@media (prefers-reduced-motion: reduce) {
  .mark::before {
    clip-path: inset(0 0 0 0);
    transition: none;
  }
  .mark {
    color: var(--ink);
  }
}

.top {
  padding-top: clamp(14px, 2vw, 24px);
}
/* ── Header — the chart's title row ─────────────────────────────────────
   Not a bar floating over the page: it is the first ruled row of the chart,
   and the week's own border continues straight down from it. */
.top__row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 12px clamp(14px, 2vw, 24px);
  border: 1px solid var(--chalk-rule);
  border-bottom: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-inline-end: auto;
}
.top__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.top__links a {
  font-size: 14px;
  color: var(--chalk-dim);
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .top__links a:hover {
    color: var(--chalk);
  }
}
.top__links a[aria-current] {
  color: var(--chalk);
}
/* The header carries the same action, but never the highlighter: only one
   element on screen is allowed to be the live one, and in the first viewport
   that is the day itself. So this is chalk outline, deliberately quieter. */
.top__links .top__cta {
  padding: 8px 15px;
  border-radius: 3px;
  color: var(--chalk);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(239, 237, 228, 0.32);
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.top__links .top__cta:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .top__links .top__cta:hover {
    background: rgba(239, 237, 228, 0.1);
  }
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   The primary action is a chalk block: the one solid thing on a ruled
   surface. Coral is never borrowed for it — coral belongs to the card. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.btn:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: #fff;
  }
}
.btn--ghost {
  background: transparent;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px rgba(239, 237, 228, 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    background: rgba(239, 237, 228, 0.08);
  }
}

/* ── Hero — the headline lives inside the week, not above it ───────────────
   A real seven-column week, not a two-column layout with rules drawn behind
   it. The headline occupies the first four days, the live day is filled in
   highlighter and holds the only primary action, and the card is pinned in
   the weekend. Nothing here is centred: a wall chart is read from its edges. */
.hero {
  padding: 0 0 clamp(56px, 7vw, 96px);
  border-top: 0;
}
.lattice {
  border: 1px solid var(--chalk-rule);
  border-radius: 3px;
}
.lattice__head,
.lattice__body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.lattice__head {
  border-bottom: 1px solid var(--chalk-rule);
}
.lattice__head span {
  padding: 4px 12px 5px;
  font-family: var(--hand);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--chalk-dim);
  border-left: 1px solid var(--chalk-rule);
}
.lattice__head span:first-child {
  border-left: 0;
}
.lattice__head .is-today {
  background: var(--hilite);
  color: var(--ink);
}

/* The three occupants of the week. Their spans are the layout. */
.lattice__say {
  grid-column: 1 / 5;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 44px) clamp(32px, 4vw, 56px) clamp(18px, 2.4vw, 34px);
}
.lattice__say p {
  margin-top: 26px;
  font-size: clamp(16.5px, 1.5vw, 19px);
}
.lattice__today {
  grid-column: 5 / 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: clamp(16px, 2vw, 26px) clamp(12px, 1.4vw, 20px);
  background: var(--hilite);
  color: var(--ink);
}
/* The day's entry, written into the cell the way a student fills a chart. */
.lattice__entry {
  font-family: var(--hand);
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1.5px solid rgba(14, 43, 36, 0.3);
}
.lattice__today-line {
  margin: auto 0 0;
  max-width: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/* On the highlighter, the button inverts: board green is now the solid.
   It fills the day's width rather than sizing to its label, so it can never
   hang out of the column. */
.lattice__today .btn {
  width: 100%;
  padding: 13px 8px;
  font-size: 14.5px;
  white-space: nowrap;
  background: var(--board-deep);
  color: var(--chalk);
}
@media (hover: hover) and (pointer: fine) {
  .lattice__today .btn:hover {
    background: var(--board);
  }
}
.lattice__object {
  grid-column: 6 / 8;
  position: relative;
  margin: 0;
  min-height: 260px;
  border-left: 1px solid var(--chalk-rule);
  overflow: hidden;
}
/* Every picture is cropped by the cell it sits in: the rule is its edge. */
.lattice__object img,
.object img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lattice__object figcaption,
.object figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 10px 6px;
  background: var(--board-deep);
  font-size: 12px;
  color: var(--chalk-dim);
}
.object {
  position: relative;
  margin: 0;
  min-height: clamp(260px, 30vw, 380px);
  overflow: hidden;
}
.fineprint {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--chalk-dim);
}

/* ── The week row: accumulation as the subject ───────────────────────────
   A streak is not a number in a tile. It is the chart's own row being filled
   in: done days hatched in chalk, today ringed, the rest still empty. The
   section's single bright thing stays the marked phrase above it. */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--chalk-rule);
}
.week__day {
  position: relative;
  min-height: clamp(84px, 10vw, 132px);
  padding: 6px 10px;
  border-left: 1px solid var(--chalk-rule);
  font-family: var(--hand);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--chalk-dim);
}
.week__day:first-child {
  border-left: 0;
}
.week__day[data-done] {
  color: var(--chalk);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(239, 237, 228, 0.3) 0 1.5px,
    transparent 1.5px 9px
  );
}
/* A chalk tick, drawn as a stroke rather than assembled from borders. */
.week__day[data-done]::after {
  content: "";
  position: absolute;
  right: clamp(10px, 1.4vw, 18px);
  bottom: clamp(10px, 1.4vw, 18px);
  width: clamp(24px, 2.8vw, 36px);
  height: clamp(24px, 2.8vw, 36px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13.5l5 5L20 5.5' fill='none' stroke='%23efede4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.week__day[data-today] {
  color: var(--chalk);
  box-shadow: inset 0 0 0 2px var(--chalk);
}

/* ── Steps — the ritual, drawn as a ruled sequence not as cards ─────────── */
.steps {
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
/* Each step is a row of the week: the numeral owns Monday, the name the
   next two days, the explanation the rest, with real cell edges between. */
.step {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--chalk-rule);
}
.step > .step__n {
  grid-column: 1 / 2;
  padding: clamp(22px, 3vw, 32px) 0;
}
.step > div {
  grid-column: 2 / 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: 1px solid var(--chalk-rule);
}
.step > div > h2,
.step > div > h3 {
  grid-column: 1 / 3;
  padding: clamp(22px, 3vw, 32px) clamp(16px, 2vw, 28px);
}
.step > div > p {
  grid-column: 3 / 7;
  margin: 0;
  padding: clamp(22px, 3vw, 32px) 0 clamp(22px, 3vw, 32px) clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--chalk-rule);
}
.step:last-child {
  border-bottom: 1px solid var(--chalk-rule);
}
.step__n {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--chalk-dim);
}
.step p {
  font-size: 15.5px;
}

/* ── Rows — placed on the week's seven columns ───────────────────────────
   Words take the first four days, the picture or form the last three, and
   the rule between them is a real cell edge. A flipped row mirrors it. */
.row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
}
.row > :first-child {
  grid-column: 1 / 5;
  align-self: center;
  padding-right: clamp(20px, 3.4vw, 48px);
}
.row > :last-child {
  grid-column: 5 / 8;
  padding-left: clamp(20px, 3.4vw, 48px);
  border-left: 1px solid var(--chalk-rule);
}
.row > .object:last-child {
  padding-left: 0;
}
.row--flip > :first-child {
  grid-column: 4 / 8;
  order: 2;
  padding-right: 0;
  padding-left: clamp(20px, 3.4vw, 48px);
  border-left: 1px solid var(--chalk-rule);
}
.row--flip > :last-child {
  grid-column: 1 / 4;
  order: 1;
  border-left: 0;
}
.row + .row {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--chalk-rule);
}
section h2 + .row,
section h2 + p + .row {
  margin-top: clamp(36px, 5vw, 60px);
}
.row p {
  margin-top: 16px;
}
/* A row with no picture: heading on one side, the argument on the other. */
.row--text > :first-child {
  align-self: start;
}
.row--text > :last-child > p:first-child,
.row--text > :last-child > .ledger:first-child {
  margin-top: 0;
}
/* The student's row speaks to a child: larger, closer, fewer words. */
.row--student h3 {
  font-size: clamp(24px, 2.6vw, 32px);
}
.row--student p {
  font-size: clamp(17px, 1.7vw, 20px);
}
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--chalk);
  box-shadow: inset 0 -1px 0 rgba(239, 237, 228, 0.34);
  padding-bottom: 3px;
  transition: box-shadow 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .arrow:hover {
    box-shadow: inset 0 -1px 0 var(--chalk);
  }
}

/* ── Promises — ruled lines, never a grid of icon cards ─────────────────── */
.vows {
  margin: clamp(30px, 4vw, 44px) 0 clamp(26px, 3vw, 36px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.vow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  border-top: 1px solid var(--chalk-rule);
}
.vow > svg {
  grid-column: 1 / 2;
  margin: 20px 0;
}
.vow > div {
  grid-column: 2 / 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: 1px solid var(--chalk-rule);
}
.vow > div > strong {
  grid-column: 1 / 3;
  padding: 20px clamp(16px, 2vw, 28px);
}
.vow > div > span {
  grid-column: 3 / 7;
  padding: 20px 0 20px clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--chalk-rule);
}
.vow:last-child {
  border-bottom: 1px solid var(--chalk-rule);
}
.vow svg {
  color: var(--chalk-dim);
}
.vow strong {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
}
.vow span {
  display: block;
  font-size: 14.5px;
  color: var(--chalk-dim);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.qa {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--chalk-rule);
}
.qa details {
  border-bottom: 1px solid var(--chalk-rule);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 34px 20px 0;
  position: relative;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--chalk);
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 1.5px solid var(--chalk-dim);
  border-bottom: 1.5px solid var(--chalk-dim);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.qa details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}
.qa p {
  padding: 0 0 24px;
  font-size: 15.5px;
}

/* ── Shared rhythm ────────────────────────────────────────────────────── */
section h2 + p {
  margin-top: 18px;
}

/* ── Close ────────────────────────────────────────────────────────────── */
.close h2 {
  max-width: 20ch;
}
.close__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot {
  padding: clamp(44px, 6vw, 72px) 0;
  border-top: 1px solid var(--chalk-faint);
  background: var(--board-deep);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
}
.foot a {
  font-size: 14px;
  color: var(--chalk-dim);
  transition: color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .foot a:hover {
    color: var(--chalk);
  }
}
.foot__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--chalk-dim);
}
.foot p {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--chalk-dim);
}

/* ── Inner pages ─────────────────────────────────────────────────────────
   Every page opens on the same week. An audience page pins its picture in
   the last three days; a document page gives the whole week to its title.
   Neither fills a day in highlighter — on these pages the live thing is the
   one marked phrase in the title. */
.lattice__object--wide {
  grid-column: 5 / 8;
}
.lattice__say--full {
  grid-column: 1 / -1;
}
.lattice__say--full h1 {
  max-width: 20ch;
}
.lattice__say--full p {
  max-width: 62ch;
}
.page-meta {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--chalk-dim);
}

/* A ledger: what the thing does, one ruled line each. The name sits in the
   left columns of the week, the explanation in the right — never a row of
   identical tiles. */
.ledger {
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chalk-rule);
}
.ledger li {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--chalk-rule);
}
.ledger li > h3 {
  grid-column: 1 / 4;
  padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2vw, 28px) clamp(20px, 2.6vw, 30px) 0;
}
.ledger li > p {
  grid-column: 4 / 8;
  padding: clamp(20px, 2.6vw, 30px) 0 clamp(20px, 2.6vw, 30px) clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--chalk-rule);
}
/* Inside a row's right-hand days the ledger has only three days to use. */
.row .ledger li > h3 {
  grid-column: 1 / 3;
}
.row .ledger li > p {
  grid-column: 3 / 8;
}
.ledger p {
  font-size: 16px;
}
/* On the student page the lines are read by a child: larger, fewer. */
.ledger--near h3 {
  font-size: clamp(22px, 2.2vw, 28px);
}
.ledger--near p {
  font-size: clamp(16.5px, 1.6vw, 19px);
}

/* A plain aside: one ruled cell of the chart, for a rule a reader must not miss. */
.aside {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding: 20px 22px;
  border: 1px solid var(--chalk-faint);
}
.aside p {
  font-size: 15.5px;
}
.aside p + p {
  margin-top: 10px;
}

/* ── Forms, drawn as ruled fill-in lines ────────────────────────────────── */
:root {
  color-scheme: dark;
}
.form {
  display: grid;
  gap: 18px;
  align-content: start;
}
.form__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--chalk);
}
.field label span {
  font-weight: 400;
  color: var(--chalk-dim);
}
.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--chalk);
  background: var(--board-deep);
  border: 1px solid rgba(239, 237, 228, 0.24);
  border-radius: 3px;
  padding: 12px 14px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field input::placeholder {
  color: rgba(169, 189, 180, 0.75);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--hilite);
  box-shadow: 0 0 0 1px var(--hilite);
}
.form .btn {
  justify-self: start;
  margin-top: 6px;
}
.form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.lead-form__status {
  min-height: 1.6em;
  font-size: 14.5px;
  color: var(--chalk-dim);
}
.lead-form__status--ok {
  color: var(--chalk);
}
/* A failed send is the one live thing on screen at that moment. */
.lead-form__status--err {
  color: var(--hilite);
}

/* ── Documents: etik and gizlilik ─────────────────────────────────────── */
.doc {
  max-width: 780px;
}
.doc section {
  padding: clamp(34px, 4vw, 48px) 0;
  border-top: 1px solid var(--chalk-rule);
}
.doc section:first-child {
  border-top: 0;
  padding-top: 0;
}
.doc h2 {
  font-size: clamp(24px, 2.6vw, 32px);
}
.doc h3 {
  margin-top: 26px;
}
.doc p,
.doc ul {
  margin-top: 14px;
}
.doc ul {
  padding-left: 1.15em;
  color: var(--chalk-dim);
}
.doc li + li {
  margin-top: 8px;
}
.doc a {
  color: var(--chalk);
  box-shadow: inset 0 -1px 0 rgba(239, 237, 228, 0.4);
}
.doc-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
}
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.55;
}
.doc-table th {
  text-align: left;
  padding: 0 18px 10px 0;
  border-bottom: 1px solid var(--chalk-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}
.doc-table td {
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--chalk-rule);
  vertical-align: top;
  color: var(--chalk-dim);
}
.doc-table td:first-child {
  width: 32%;
  color: var(--chalk);
  font-weight: 600;
}
.callout {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--chalk-faint);
}
.callout p:first-child {
  margin-top: 0;
}

/* Etik: numbered commitments reuse the ritual's ruled steps. */
.steps--vows {
  margin-top: 0;
}
.row--text > :last-child > .refuse:first-child {
  margin-top: 0;
}
.after-list {
  margin-top: 24px;
}
.inline-link {
  color: var(--chalk);
  box-shadow: inset 0 -1px 0 rgba(239, 237, 228, 0.4);
}
.steps--vows h2 {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.2;
}
.refuse {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chalk-rule);
}
.refuse li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--chalk-rule);
  color: var(--chalk-dim);
}
.refuse li::before {
  content: "";
  width: 14px;
  height: 1.5px;
  margin-top: 0.8em;
  background: var(--chalk-dim);
}

/* ── Fiyat ────────────────────────────────────────────────────────────────
   The price is the live day's entry: the only thing written in the
   highlighter cell, at the size a price has on a chart taped to a wall. */
.lattice__today--price {
  justify-content: flex-start;
}
.price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid rgba(14, 43, 36, 0.3);
}
.price__amount {
  font-family: var(--display);
  font-size: clamp(46px, 5vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.price__terms {
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
/* Written into the cell by hand, like the rest of what the chart holds. */
.price__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--hand);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.price__list li::before {
  content: "✓ ";
}
.lattice__today--price .btn {
  margin-top: auto;
  white-space: normal;
  line-height: 1.25;
}
.price__unit {
  font-family: var(--hand);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  color: var(--ink);
}
/* Two cells of the same row: what the money buys elsewhere, and here. */
.compare {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--chalk-rule);
}
.compare__cell {
  grid-column: span 3;
  padding: clamp(20px, 2.6vw, 32px);
}
.compare__cell--ours {
  grid-column: span 4;
  border-left: 1px solid var(--chalk-rule);
  background-image: repeating-linear-gradient(-45deg, rgba(239, 237, 228, 0.07) 0 1.5px, transparent 1.5px 9px);
}
.compare__hand {
  display: block;
  font-family: var(--hand);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  color: var(--chalk);
}
.compare__cell p {
  margin-top: 10px;
}
@media (max-width: 900px) {
  .compare__cell,
  .compare__cell--ours {
    grid-column: 1 / -1;
    border-left: 0;
  }
  .compare__cell--ours {
    border-top: 1px solid var(--chalk-rule);
  }
}

/* The two ways to pay, in the comparison row: monthly in the plain cell,
   yearly in the hatched one because it carries the extra (the printed set). */
.plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.plan__amount {
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--chalk);
}
.plan__unit {
  font-family: var(--hand);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--chalk-dim);
}
.compare__cell p.plan__terms {
  margin-top: 0;
  font-size: 14px;
  color: var(--chalk-dim);
}
.plan__list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--chalk-rule);
}
.plan__list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--chalk-rule);
  font-size: 16px;
  line-height: 1.5;
}
.plan__list li:last-child {
  border-bottom: 0;
}
/* A quiet pointer from the hero's monthly price to the yearly one. */
.price__more {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Adaptation ───────────────────────────────────────────────────────────
   The week never reflows. Its seven columns stay seven at every width; what
   changes is how many of them each piece of content spans. */
@media (max-width: 900px) {
  .top__links a:not([data-keep]) {
    display: none;
  }
  .ledger li > h3,
  .ledger li > p,
  .row .ledger li > h3,
  .row .ledger li > p {
    grid-column: 1 / -1;
    padding: 0;
    border-left: 0;
  }
  .ledger li {
    padding: 20px 0;
    row-gap: 8px;
  }
  .step > div > h2,
  .step > div > h3,
  .step > div > p,
  .vow > div > strong,
  .vow > div > span {
    grid-column: 1 / -1;
    border-left: 0;
    padding: 0 0 0 16px;
  }
  .step > div,
  .vow > div {
    align-content: start;
    row-gap: 8px;
    padding: clamp(18px, 3vw, 26px) 0;
  }
  /* Rows stack, but as rows of the same chart: a ruled line between the
     words and the picture, not two floating cards. */
  .row > :first-child,
  .row > :last-child,
  .row--flip > :first-child,
  .row--flip > :last-child {
    grid-column: 1 / -1;
    order: 0;
    padding: 0;
    border-left: 0;
  }
  .row > :last-child {
    margin-top: 24px;
  }
  .row--text > :last-child {
    margin-top: 18px;
  }
}
@media (max-width: 1080px) {
  .lattice__head span {
    padding: 4px 0 5px;
    text-align: center;
  }
  /* The headline takes the whole week; below it the card is pinned to the
     first four days and today's fill runs down from Cum to the week's end. */
  .lattice__say {
    grid-column: 1 / -1;
  }
  .lattice__object {
    grid-column: 1 / 5;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--chalk-rule);
  }
  .lattice__today {
    grid-column: 5 / 8;
    grid-row: 2;
  }
  .lattice__object--wide {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 300px;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .lattice__head span {
    font-size: 16px;
  }
  .lattice__say {
    padding-left: 16px;
    padding-right: 16px;
  }
  .lattice__today .btn {
    white-space: normal;
    padding: 11px 6px;
    font-size: 14px;
  }
  .week__day {
    padding: 4px 3px;
    font-size: 15px;
    min-height: 74px;
  }
  .week__day[data-done]::after {
    right: 6px;
    bottom: 8px;
    width: 20px;
    height: 20px;
  }
  .form__pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .form .btn {
    justify-self: stretch;
  }
  /* The data table reads as a list on a phone: name above reason. */
  .doc-table thead {
    display: none;
  }
  .doc-table tr,
  .doc-table td {
    display: block;
    width: auto;
  }
  .doc-table td:first-child {
    width: auto;
    padding-bottom: 4px;
    border-bottom: 0;
  }
  .doc-table td:last-child {
    padding-top: 0;
  }
}