/*
  tutorey.app — one stylesheet, no framework.

  Deliberately single-theme. This is a marketing site with a dark hero and a
  light page beneath it; the app itself honours the reader's theme, but a
  landing page that inverts is a different design, not a recoloured one.
  Everything is therefore painted explicitly, so it holds on any host ground.
*/

:root {
  --ink: #232b52;
  --ink-2: #2b3465;
  --accent: #4f5bab;
  --accent-dark: #3d4894;
  --accent-soft: #a9b3ee;
  --accent-wash: #e9ebfa;
  --page: #f5f6fc;
  --card: #ffffff;
  --line: rgba(43, 52, 101, 0.09);
  --line-2: rgba(43, 52, 101, 0.14);
  --body: #4c5163;
  --muted: #6b7185;
  --faint: #8b91a3;
  --green: #2f6a54;
  --green-wash: #e8f5f0;
  --amber: #96601f;
  --amber-wash: #fdf1e3;
  --rust: #a3452c;
  --rust-wash: #fbe9e4;

  --display: 'Outfit', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --bangla: 'Hind Siliguri', 'Plus Jakarta Sans', system-ui, sans-serif;
  --wrap: 1180px;
}

/* Bengali needs its own face — neither Latin family covers the script, and the
   fallback that would otherwise be used has no matching weights. */
.lang-bn {
  --display: 'Hind Siliguri', system-ui, sans-serif;
  --sans: 'Hind Siliguri', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor links land below the sticky header instead of under it. Matches the
     header's height, and grows with it when the nav wraps to a second row. */
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`. Both stop sideways scrolling, but `hidden` turns the
     body into a scroll container, which breaks `position: sticky` on the
     header in several browsers. `clip` does not. */
  overflow-x: clip;
  /* Bengali compounds and email addresses are long enough to push a narrow
     phone sideways on their own. */
  overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: #fff; color: var(--ink); font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-sm { height: 38px; padding: 0 15px; font-size: 12.5px; border-radius: 10px; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(79, 91, 171, 0.28); }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent-wash); color: var(--ink); }
.btn-ink { background: var(--ink-2); color: #fff; }
.btn-ink:hover { background: var(--accent-dark); color: #fff; }
.btn-out { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-out:hover { background: var(--page); color: var(--ink); }
.btn-ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(35, 43, 82, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.head-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; min-height: 68px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.brand:hover { color: #fff; }
.mark {
  width: var(--mark); height: var(--mark); flex: none;
  /* Proportional, so the corner stays the same shape at every size the mark is
     used at rather than looking sharper as it grows. */
  border-radius: calc(var(--mark) * 0.28);
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.head-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; }
.head-nav a { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.head-nav a:hover { color: #fff; }
.head-end { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.head-login { font-size: 13.5px; font-weight: 700; color: #fff; }
.head-login:hover { color: var(--accent-soft); }
/* Two segments in one track, the current one lifted out in white. */
.langs {
  display: flex; align-items: center; gap: 2px; flex: none;
  padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12);
}
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 11px 0 6px;
  border: 1.5px solid transparent; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.lang.on { background: #fff; color: var(--ink); border-color: var(--accent); }
.lang.on:hover { background: #fff; color: var(--ink); }

.flag { width: 17px; height: 17px; border-radius: 50%; flex: none; display: block; }
.flag-bd { background: #006a4e; position: relative; }
.flag-bd::after {
  content: ''; position: absolute; top: 50%; left: 48%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: #f42a41;
}

/* ---------- hamburger + slide-in menu ---------- */
/* Hidden until the header runs out of room; the rule that shows it lives with
   the other breakpoints at the foot of this file. */
.burger {
  display: none;
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  margin-inline-end: -4px;
  padding: 0;
  border: 0; border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.burger:hover { background: rgba(255, 255, 255, 0.2); }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  border-radius: 2px; background: #fff;
  /* Transformed about the bar's own centre so the two outer bars meet exactly
     when they rotate — the usual cause of a lopsided X is a default origin. */
  transition: transform 0.26s ease, opacity 0.16s ease;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 25px; }
/*
  The button steps aside once the panel is open.

  It used to morph into an X, which left two crosses on screen at once: this
  one showing dimly through the scrim, and the panel's own. One close control
  is enough, and the one inside the panel is the one under the reader's eye.
  Hidden by opacity rather than display, so it is still focusable the instant
  the panel closes and focus returns to it.
*/
.burger[aria-expanded='true'] { opacity: 0; pointer-events: none; }
.burger { transition: opacity 0.18s ease, background-color 0.15s ease; }

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(16, 18, 26, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}
.menu {
  position: fixed; top: 0; left: 0; z-index: 51;
  display: flex; flex-direction: column;
  width: min(84vw, 320px);
  /* dvh, not vh: on a phone browser vh is the tallest the viewport ever gets,
     so the panel's foot would sit under the address bar until it retracts. */
  height: 100dvh;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--ink);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(-100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s;
}
body.menu-open .scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
body.menu-open .menu { transform: translateX(0); visibility: visible; transition-delay: 0s; }
/* Holds the page still behind the panel instead of letting it scroll away. */
body.menu-open { overflow: hidden; }

.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu .brand-dark { color: #fff; }
.menu .brand-dark:hover { color: #fff; }
.menu .brand-dark .mark { border: 0; }
.menu-x {
  position: relative; flex: none; width: 38px; height: 38px;
  border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.menu-x span {
  position: absolute; top: 50%; left: 11px; right: 11px; height: 2px;
  border-radius: 2px; background: #fff;
}
.menu-x span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.menu-x span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }

.menu-nav { display: flex; flex-direction: column; margin-top: 24px; }
.menu-link {
  padding: 15px 2px;
  font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.menu-link:hover { color: #fff; }

/*
  The footer follows the links rather than being pinned to the bottom of the
  panel. Pinned, four short links left a few hundred pixels of empty navy
  between the last one and the buttons, which reads as something failing to
  load. Space below the content reads as space; space inside it reads as a hole.
*/
/*
  Pinned to the foot of the panel: the language switch at its natural width on
  the left, Log in taking whatever is left on the right.

  `align-items: stretch` rather than a matching height in pixels — the row then
  takes its height from the language pill, and the button follows. The pill
  grows on touch devices, and hard-coding 34px here would have left the two
  mismatched on exactly the screens this panel exists for.
*/
.menu-foot {
  display: flex; align-items: stretch; gap: 12px;
  margin-top: auto; padding-top: 24px;
}
.menu-foot .langs { flex: none; }
.menu-foot .btn {
  flex: 1; min-width: 0;
  height: auto; padding-inline: 14px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .menu, .scrim, .burger span { transition-duration: 0.001ms; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); padding: 64px 0 104px; }
.hero .wrap { position: relative; z-index: 2; }

/*
  The moving background.

  Every layer animates `transform` and `opacity` only — the two properties a
  browser can hand to the compositor without repainting. The prototype animated
  elements carrying `filter: blur(18px)`, which forces a blur to be recomputed
  every frame; on the mid-range Android most of these tutors are holding, that
  is the difference between smooth and a slideshow. The softness here comes from
  the gradients themselves, so nothing needs blurring at all.
*/
.hero-fx {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  /* Its own layer, so the aurora repainting never touches the text above it. */
  contain: strict;
}

.aurora {
  position: absolute; border-radius: 50%;
  will-change: transform, opacity;
}
.aurora-a {
  top: -300px; left: 50%; width: 1080px; height: 660px; margin-left: -540px;
  background: radial-gradient(ellipse at center, rgba(169, 179, 238, 0.3), rgba(35, 43, 82, 0) 70%);
  animation: drift-a 26s ease-in-out infinite;
}
.aurora-b {
  bottom: -280px; left: -200px; width: 680px; height: 680px;
  background: radial-gradient(circle at center, rgba(79, 91, 171, 0.55), rgba(35, 43, 82, 0) 68%);
  animation: drift-b 32s ease-in-out infinite;
}
/* The one green note, so the palette is not entirely indigo. */
.aurora-c {
  top: 60px; right: -220px; width: 560px; height: 560px;
  background: radial-gradient(circle at center, rgba(127, 216, 180, 0.2), rgba(35, 43, 82, 0) 66%);
  animation: drift-c 23s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.75; }
  45% { transform: translate3d(70px, -46px, 0) scale(1.22); opacity: 1; }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.18); opacity: 1; }
  50% { transform: translate3d(-88px, 44px, 0) scale(0.86); opacity: 0.7; }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }
  40% { transform: translate3d(46px, 58px, 0) scale(1.3); opacity: 1; }
}

/* A slow sweep of light. The mask fades it out well before the edges, so what
   reads is a suggestion of movement rather than a spinning wheel. */
.beam-mask {
  position: absolute; top: 50%; left: 50%;
  width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  -webkit-mask-image: radial-gradient(circle at center, #000 12%, transparent 62%);
  mask-image: radial-gradient(circle at center, #000 12%, transparent 62%);
}
.beam {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(169, 179, 238, 0.17) 26deg,
    rgba(255, 255, 255, 0) 62deg,
    rgba(255, 255, 255, 0) 180deg,
    rgba(127, 216, 180, 0.13) 214deg,
    rgba(255, 255, 255, 0) 250deg
  );
  will-change: transform;
  animation: spin 52s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chalk dust, drifting up off a board. The one flourish that is about this
   subject rather than about gradients. */
.motes { position: absolute; inset: 0; }
.mote {
  position: absolute; bottom: -20px;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(214, 220, 255, 0.95);
  box-shadow: 0 0 10px rgba(169, 179, 238, 0.6);
  opacity: 0;
  will-change: transform, opacity;
  animation: rise var(--t) linear infinite;
  animation-delay: var(--d);
}
.mote-mint {
  background: rgba(127, 216, 180, 0.9);
  box-shadow: 0 0 10px rgba(127, 216, 180, 0.55);
}
@keyframes rise {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  18% { opacity: 0.9; }
  70% { opacity: 0.5; }
  100% { transform: translate3d(26px, -320px, 0) scale(1.25); opacity: 0; }
}

.sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.07) 52%, rgba(255, 255, 255, 0) 62%);
  animation: sheen 13s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.38; } }

/*
  Motion off.

  The global reduce rule collapses durations, which would freeze the motes
  mid-flight as specks scattered over the hero. They are removed outright
  instead, and the aurora is left at a composed resting position — the hero
  should look finished when still, not paused.
*/
@media (prefers-reduced-motion: reduce) {
  .motes, .beam-mask { display: none; }
  .aurora-a { transform: scale(1.05); opacity: 0.9; }
  .aurora-b { transform: scale(1); opacity: 0.85; }
  .aurora-c { transform: scale(1.1); opacity: 0.85; }
  .sheen { opacity: 0.2; }
}
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 48px 56px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 13px 0 6px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 600; color: var(--body);
}
.pill b {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-dark);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
}
.hero h1 { margin-top: 20px; font-size: clamp(38px, 6.4vw, 66px); line-height: 1.02; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.hero-body { margin: 20px 0 0; max-width: 490px; font-size: 18px; line-height: 1.62; color: rgba(255, 255, 255, 0.72); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
/*
  Three columns at every width.

  It was a wrapping flex row, which meant two facts on the first line and the
  third stranded below — the block read as a list that had run out of room
  rather than as three equal figures. A grid holds the three abreast and lets
  the labels wrap inside their own column instead.
*/
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.fact-v {
  font-family: var(--display);
  /* Scales with the column rather than stepping at a breakpoint, so "2 yrs"
     never collides with the label beside it. */
  font-size: clamp(18px, 5.4vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.02em;
}
.fact-l {
  font-size: clamp(10.5px, 2.9vw, 11.5px);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  /* Two short lines of roughly equal length, rather than a full line and one
     orphaned word. */
  text-wrap: balance;
}

/*
  The screenshot already carries its own device bezel and rounded corners, so
  there is no frame around it here — a frame would put a phone inside a phone.

  `drop-shadow` rather than `box-shadow`: the PNG's corners are transparent, and
  box-shadow would trace the element's rectangle, leaving four bright wedges
  where the shadow should follow the rounded edge.
*/
.hero-shot { display: flex; justify-content: center; }
.hero-shot img {
  width: 100%;
  max-width: 310px;
  height: auto;
  filter: drop-shadow(0 34px 60px rgba(10, 14, 34, 0.45));
}

/* Once the hero is two columns, the screenshot sits against the right edge of
   the content rather than floating in the middle of its column — otherwise the
   gap between headline and phone reads as a hole in the layout.
   Below this the columns stack and it goes back to centred. */
@media (min-width: 760px) {
  .hero-shot { justify-content: flex-end; }
  .hero-shot img { max-width: 330px; }
}

/* ---------- generic sections ---------- */
.section { margin-top: 84px; }
.band { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 92px; padding: 84px 0; }
.band .section { margin-top: 0; }
.eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.eyebrow-amber { color: var(--amber); }
.h2 { margin-top: 12px; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.08; font-weight: 800; color: var(--ink-2); }
.lead { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 56px; align-items: start; }

.pain { display: flex; gap: 15px; padding: 19px 20px; border-radius: 15px; background: #fff; border: 1px solid var(--line); }
.pain + .pain { margin-top: 12px; }
.dot { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.dot-amber { background: var(--amber-wash); color: var(--amber); }
.dot-rust { background: var(--rust-wash); color: var(--rust); }
.dot-indigo { background: var(--accent-wash); color: var(--accent-dark); }
.dot-green { background: var(--green-wash); color: var(--green); }
.pain h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--ink-2); letter-spacing: 0; }
.pain p { margin: 5px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- features ---------- */
.feature-lead { display: flex; flex-wrap: wrap; gap: 26px; padding: 26px 28px; border-radius: 20px; background: var(--ink-2); color: #fff; margin-top: 34px; }
.feature-lead .copy { flex: 1 1 240px; min-width: 0; }
.feature-lead h3 { margin-top: 16px; font-family: var(--sans); font-size: 21.5px; font-weight: 700; letter-spacing: -0.015em; }
.feature-lead p { margin: 9px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chips span { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.ledger { flex: 1 1 196px; min-width: 180px; max-width: 260px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.ledger-m { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.ledger-a { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 7px; }
.ledger-o { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); }
.bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); margin-top: 13px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 89%; background: var(--accent-soft); }
.ledger-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 11.5px; }
.ledger-row span:first-child { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--accent-soft); }
.ledger-row .n { flex: 1; min-width: 0; color: rgba(255, 255, 255, 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row .a { font-weight: 700; }
.ledger-note { font-size: 10.5px; color: rgba(255, 255, 255, 0.38); margin-top: 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin-top: 14px; }
.card { padding: 24px 25px; border-radius: 20px; background: var(--page); border: 1px solid var(--line); }
.card h3 { margin-top: 15px; font-family: var(--sans); font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2); }
.card p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- how ---------- */
.panel { padding: 40px clamp(22px, 3.5vw, 46px); border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.steps { display: grid; gap: 3px; }
.step { display: flex; gap: 16px; }
.step-n { display: flex; flex-direction: column; align-items: center; flex: none; width: 30px; }
.step-n b { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; }
.step-n i { flex: 1; width: 1.5px; background: var(--line-2); margin: 5px 0; }
.step:last-child .step-n i { background: transparent; }
.step-b { flex: 1; min-width: 0; padding-bottom: 20px; }
.step-b b { display: block; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.step-b span { display: block; font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 4px; }

/* ---------- why ---------- */
.why { padding: 40px clamp(22px, 3.5vw, 46px); border-radius: 24px; background: #fff; border: 1px solid var(--line); max-width: 760px; margin-inline: auto; }
.why p { font-size: 16.5px; line-height: 1.7; color: var(--body); margin: 14px 0 0; }

/* ---------- pricing ---------- */
.center { text-align: center; }
.toggle { display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 4px; margin-top: 24px; border-radius: 11px; background: #f1efeb; border: 1px solid var(--line); }
.toggle button { height: 34px; padding: 0 18px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.toggle button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(43, 52, 101, 0.14); }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); gap: 14px; margin: 32px auto 0; align-items: start; }
.tier { position: relative; padding: 28px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line); }
.tier-pro { border-color: var(--accent); box-shadow: 0 16px 40px rgba(74, 93, 168, 0.16); }
.tier-dark { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
.badge { padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.price b { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; }
.price span { font-size: 13.5px; opacity: 0.6; }
/* The ceiling that actually decides which plan a tutor needs, so it sits
   directly under the price rather than being buried in the feature list. */
.tier-limits { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-top: 6px; }
.tier-dark .tier-limits { color: var(--accent-soft); }
.tier-note { font-size: 12.5px; opacity: 0.62; margin-top: 6px; min-height: 18px; }
.tier .btn { display: flex; width: 100%; height: 42px; margin-top: 20px; font-size: 13.5px; }
.tier ul { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.tier-dark ul { border-color: rgba(255, 255, 255, 0.14); }
.tier li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.5; }
.tier li svg { flex: none; margin-top: 3px; }
.referral { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 14px; color: var(--muted); }

/* ---------- faq ---------- */
.faq { max-width: 860px; margin-inline: auto; }
.faq details { border-radius: 15px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.faq details + details { margin-top: 9px; }
.faq details[open] { border-color: rgba(74, 93, 168, 0.3); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 17px 20px; cursor: pointer; font-size: 15.5px; font-weight: 700; color: var(--ink-2); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { flex: 1; min-width: 0; }

/*
  The plus is drawn as two bars, not typed as a "+".

  A text glyph sits on the baseline rather than in the middle of its box, so
  rotating it 45° pivots around a point that is not the centre of the cross —
  the result reads as a tilted plus rather than a clean ×. Two absolutely
  centred bars rotate true.
*/
.faq-icon {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: #f1efeb; color: var(--muted);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 6px; right: 6px;
  height: 2px; border-radius: 1px; background: currentColor;
  transform: translateY(-50%);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] .faq-icon { background: var(--accent); color: #fff; transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 20px 18px; font-size: 15.5px; line-height: 1.65; color: var(--body); }

/* ---------- closing ---------- */
.closing { position: relative; overflow: hidden; padding: 52px clamp(22px, 4vw, 48px); border-radius: 26px; background: var(--ink-2); color: #fff; text-align: center; }
.closing h2 { margin-top: 12px; font-size: clamp(32px, 5vw, 46px); line-height: 1.05; font-weight: 800; }
.closing p { margin: 14px auto 0; max-width: 440px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
.kicker { font-family: var(--bangla); font-size: 14px; font-weight: 600; color: var(--accent-soft); }
.closing-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 28px; }

/* ---------- footer ---------- */
.site-foot { margin-top: 60px; padding-bottom: 46px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px 36px; padding-bottom: 32px; border-bottom: 1px solid var(--line-2); }
.brand-dark { color: var(--ink); font-size: 16px; }
.brand-dark:hover { color: var(--ink); }
.brand-dark .mark { border: 1px solid var(--line); }
.foot-blurb { margin: 13px 0 0; max-width: 260px; font-size: 14px; line-height: 1.6; color: var(--faint); }
.foot-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.soon { font-size: 12px; color: var(--faint); }
.foot-h { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.foot-links { display: grid; gap: 9px; margin-top: 14px; }
.foot-links a { font-size: 14px; color: var(--body); }
.foot-links a:hover { color: var(--ink); }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 20px; font-size: 12.5px; color: var(--faint); }
.foot-base .spacer { flex: 1; }
.foot-base a { color: var(--faint); }

/* ---------- legal pages ---------- */
.legal-head { background: var(--ink); color: #fff; padding: 52px 0 40px; }
.legal-head h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.06; font-weight: 800; color: #fff; }
.legal-head .updated { margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.legal-body { max-width: 760px; margin: 0 auto; padding: 44px 20px 8px; }
.legal-body h2 { font-family: var(--sans); font-size: 20px; font-weight: 700; color: var(--ink-2); margin-top: 40px; letter-spacing: -0.01em; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.72; color: var(--body); }
.legal-body p { margin: 14px 0 0; }
.legal-body ul { margin: 14px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.legal-body strong { color: var(--ink); }
.callout { margin: 24px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--accent-wash); border: 1px solid rgba(79, 91, 171, 0.18); }
.callout p { margin: 0; color: var(--ink); }
.callout p + p { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Responsive.

   Most of the layout is already fluid — every grid is `auto-fit` with a
   minimum, so columns collapse on their own. What follows handles the parts
   that cannot: the header, which has five things competing for one row, and
   the type and padding, which want to be smaller before the columns give way.
--------------------------------------------------------------------------- */

/* Below this the header's five items stop fitting on one line, so the nav
   drops to its own row and scrolls sideways rather than being hidden. The
   sections it links to are the reason someone is on this page. */
/* The header's five items stop fitting on one line here. The nav moves into the
   slide-in panel rather than wrapping to a second row — a row of links that
   scrolls sideways is reachable, but nobody discovers it. */
@media (max-width: 1000px) {
  .head-inner { gap: 8px 14px; }
  .head-nav { display: none; }
  .burger { display: block; }
  /* The header stays one row, so the anchor offset goes back to its base. */
  html { scroll-padding-top: 84px; }
}

@media (max-width: 620px) {
  /* "Log in" and "Start free" both point at my.tutorey.app, which opens on the
     login screen — so on a narrow phone the text link is a duplicate, and the
     button is the one worth keeping. It lives in the panel either way. */
  .head-login { display: none; }
  /* The language pill goes with it, into the panel. Brand, call to action and
     the menu button fit one row at this width; all four do not, and the header
     was wrapping to a second row to hold them. */
  .head-end .langs { display: none; }
  .head-end { gap: 10px; }
  .head-cta { height: 40px; padding: 0 16px; font-size: 13.5px; }

  .hero { padding: 40px 0 76px; }
  .hero h1 { font-size: clamp(31px, 8.4vw, 44px); }
  .hero-body { font-size: 16.5px; }
  /* Full width so they are easy to hit, and stacked so neither is cramped. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .facts { column-gap: 12px; margin-top: 28px; padding-top: 20px; }

  .section { margin-top: 56px; }
  .band { margin-top: 60px; padding: 56px 0; }
  .h2 { font-size: clamp(26px, 7vw, 34px); }
  .lead { font-size: 15.5px; }

  .panel, .why { padding: 26px 20px; border-radius: 20px; }
  .feature-lead { padding: 22px 20px; gap: 20px; }
  .ledger { max-width: none; }
  .card { padding: 20px; }
  .tier { padding: 22px 20px; }
  .closing { padding: 40px 22px; }
  .closing-cta { flex-direction: column; align-items: stretch; }
  .closing-cta .btn { width: 100%; }

  .legal-head { padding: 40px 0 32px; }
  .legal-body { padding: 32px 20px 8px; }
  .legal-body h2 { margin-top: 32px; font-size: 18.5px; }
  .legal-body p, .legal-body li { font-size: 15.5px; }

  .site-foot { margin-top: 48px; }
  .foot-grid { gap: 26px; }
}

/* The pricing toggle's two labels are long — "Yearly · save 2 months" — and
   side by side they overflow a small phone before the buttons themselves do. */
@media (max-width: 420px) {
  .toggle { display: flex; width: 100%; }
  .toggle button { flex: 1; padding: 0 10px; font-size: 12px; }
  /* The mark comes back down on a narrow phone — at 42px it and the wordmark
     together crowd the language pill off the first row. */
  .site-head .mark { --mark: 34px; }
  .brand { font-size: 16.5px; gap: 8px; }
  .wrap { padding-inline: 16px; }
}

/* Fingers, not cursors. The language pill is 28px tall by design, which is
   under any sensible touch target, so it grows where there is no mouse. */
@media (pointer: coarse) {
  .lang { height: 34px; padding: 0 13px 0 7px; font-size: 12.5px; }
  .foot-links a { padding-block: 4px; }
  .faq summary { padding-block: 15px; }
}

/* Reading a landing page on a laptop in landscape is the common case; on a
   phone held sideways the hero should not take the whole screen twice over. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 32px 0 48px; }
}

@media print {
  .site-head, .site-foot, .hero-cta, .closing, .langs { display: none; }
  body { background: #fff; }
  .legal-head { background: #fff; color: var(--ink); padding-bottom: 0; }
  .legal-head h1 { color: var(--ink); }
  .legal-body { max-width: none; }
}

/* ---------- contact ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px 40px;
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 20px 8px;
}
.contact-form { display: grid; gap: 18px; }

/* Off-screen rather than display:none — a bot reading the DOM fills what it can
   see in the markup, and hidden fields are the first thing they look for. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: grid; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.field-hint { margin: 0; font-size: 12px; color: var(--muted); }
/* Shown only once the field has been touched and left, so the form does not
   scold somebody halfway through typing their address. */
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--rust); }

.contact-send { justify-self: start; min-width: 180px; }
.contact-send[disabled] { opacity: 0.6; cursor: default; }

.contact-status { margin: 0; font-size: 14.5px; line-height: 1.55; }
.contact-status:empty { display: none; }
.contact-status[data-state='ok'] { color: var(--green); }
.contact-status[data-state='error'] { color: var(--rust); }

.contact-aside {
  display: grid; gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.contact-direct { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

@media (max-width: 620px) {
  .contact-wrap { padding: 32px 20px 8px; gap: 18px; }
  .contact-send { justify-self: stretch; }
}