/* syllabi.ca, "Stage" design (owner's brief and mockup, Nov 2, 2026). Plain CSS, no build step.
   Warm paper, charcoal ink, one apricot accent (the marker under the key words and the last call to action). White is
   only for cards and screenshots, so the app's own theme colours are the only other colour on the page. One font,
   Instrument Sans, self-hosted (fonts/, SIL Open Font License in fonts/OFL.txt). No grid lines, no boxes around
   everything: the product sits on the paper with a hairline edge and a soft, wide shadow. The "planner desk" design
   it replaced is in archive/website-home-oct26. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #F6F5F2;      /* the page */
  --paper-2: #FBFAF8;    /* every other section, a shade lighter, so the stage has a floor */
  --ink: #22262A;        /* text, dark buttons, the closing band; never pure black, never navy */
  --ink-2: #50555B;      /* sentences under headlines (6.9:1 on the paper) */
  --ink-3: #5E6369;      /* small print (5.6:1) */
  --line: rgba(34, 38, 42, .12);
  --apricot: #FFC08C;    /* the one accent */
  --card: #FFFFFF;
  --on-dark: #F6F5F2;
  --on-dark-2: rgba(246, 245, 242, .74);
  --shadow: 0 0 0 1px rgba(34, 38, 42, .07), 0 2px 4px rgba(34, 38, 42, .03), 0 24px 48px -18px rgba(34, 38, 42, .16), 0 64px 120px -40px rgba(34, 38, 42, .22);
  --lift: drop-shadow(0 28px 36px rgba(34, 38, 42, .2));
  --font: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gutter: 40px;
  --wide: max(var(--gutter), calc((100% - 1200px) / 2));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
main { flex: 1; width: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 30; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Header: wordmark, the four pages, EN / FR, Log in, Get the app. */
.top { position: relative; z-index: 20; }
.bar { max-width: 1280px; height: 84px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.brand { display: flex; align-items: center; margin-right: auto; }
/* The wordmark file keeps a clear margin around the letters: 46 px tall draws letters about 26 px high. */
.brand img { height: 46px; width: auto; max-width: none; margin: -6px 0 -6px -6px; }
.links { display: flex; gap: 30px; }
.links a, .login, .lang a { text-decoration: none; }
.links a:hover, .login:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.lang { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); }
.lang a { color: var(--ink-3); }
.lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.login { white-space: nowrap; }
.menu { display: none; }

/* Pill buttons. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background-color .15s, box-shadow .15s; }
.pill svg { flex: none; margin-top: -2px; }
.pill.small { min-height: 42px; padding: 0 20px; font-size: 14.5px; }
.pill.dark { background: var(--ink); color: var(--on-dark); }
.pill.dark:hover { background: #363B40; }
.pill.line { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(34, 38, 42, .3); }
.pill.line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill.apricot { background: var(--apricot); color: var(--ink); }
.pill.apricot:hover { background: #FFCB9F; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Type: big, bold, tight headlines; short plain sentences. */
h1 { font-size: clamp(46px, 7.8vw, 112px); line-height: .95; letter-spacing: -.055em; }
:lang(fr) h1 { font-size: clamp(42px, 6.7vw, 98px); }
h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.045em; }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--ink-2); }
/* The marker: an apricot stroke under the key words, drawn behind the letters. */
.mark { background: linear-gradient(var(--apricot), var(--apricot)) no-repeat 0 94% / 100% .19em; padding: 0 .03em; }
.kicker { margin-bottom: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.fine { font-size: 14px; color: var(--ink-3); }
.more { display: inline-flex; gap: 8px; margin-top: 24px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* Hero: centred words, then the product rising from the bottom like a stage. */
.hero { position: relative; overflow: hidden; padding: 40px var(--gutter) 0; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; }
.badge img { height: 26px; width: auto; }
.hero h1 { max-width: 1130px; margin: 28px auto 0; }
/* As in the mockup: "Your syllabus, turned" on the first line, not balanced. */
.home .hero h1 { text-wrap: wrap; }
.hero .lead { max-width: 590px; margin: 28px auto 0; }
.hero .actions { margin-top: 34px; }
.hero .fine { margin-top: 18px; }

.stage { position: relative; width: min(1180px, 100%); aspect-ratio: 1180 / 540; margin: 64px auto 0; }
.stage .browser { position: absolute; left: 6%; top: 11%; width: 70%; }
.stage .phone { position: absolute; right: 7%; top: 0; width: 22%; filter: var(--lift); }
.float { position: absolute; z-index: 3; padding: 12px 16px 13px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); text-align: left; font-size: 15px; line-height: 1.3; }
.float small { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--ink-2); }
.float b { font-weight: 600; }
.float.quiz { left: 0; top: 5%; }
.float.due { right: 0; top: 54%; background: var(--ink); color: var(--on-dark); }
.float.due small { color: var(--on-dark-2); }
.notes-stage { aspect-ratio: 1180 / 560; }

/* The real product rises into place once; never for people who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .stage > * { animation: rise 1s cubic-bezier(.16, .84, .3, 1) both; }
  .stage > .phone { animation-delay: .1s; }
  .stage > .float { animation-delay: .45s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(56px); } }

/* A web app picture in a quiet browser window. */
.browser { margin: 0; overflow: hidden; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(34, 38, 42, .06); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E4E2DE; }
.browser-bar span { min-width: 34%; margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: #F3F2EF; color: var(--ink-3); font-size: 11.5px; text-align: center; transform: translateX(-20px); }
.browser img { width: 100%; }

/* Sections: one idea each, a lot of room, all on the same paper (a shade lighter only under the home page's stage,
   as its floor; a change of shade elsewhere would cut the screenshots' soft shadows). */
.home .course { background: var(--paper-2); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: clamp(72px, 10vw, 140px) var(--wide); }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip .copy { order: 2; }
.copy h2 + p, .copy h2 + .lead { margin-top: 22px; }
.copy p + p { margin-top: 14px; }
.feature .copy p:not(.kicker) { max-width: 34em; font-size: 18px; color: var(--ink-2); }
.course .lead { max-width: 25em; }

/* Home: twelve colours. */
.themes { padding: clamp(72px, 10vw, 130px) var(--gutter) 0; overflow: hidden; text-align: center; }
.themes .lead { max-width: 470px; margin: 22px auto 0; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; margin: 36px auto 0; padding: 0; list-style: none; }
.dot { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 38, 42, .12); }
.trio { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 3vw, 40px); height: clamp(270px, 36vw, 520px); margin-top: 8px; padding-top: 48px; overflow: hidden; }
.trio img { width: clamp(108px, 19vw, 270px); margin-top: clamp(18px, 3vw, 44px); filter: var(--lift); }
.trio img:nth-child(2) { margin-top: 0; }

/* The dark ending: "Know what's due." */
.band { position: relative; overflow: hidden; padding: clamp(84px, 11vw, 150px) var(--gutter) clamp(150px, 15vw, 210px); background: var(--ink); color: var(--on-dark); text-align: center; }
.band h2 { font-size: clamp(54px, 9.6vw, 140px); line-height: .95; letter-spacing: -.06em; }
:lang(fr) .band h2 { font-size: clamp(46px, 8vw, 116px); }
.band .actions { margin-top: 42px; }
.band .pill.line { color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(246, 245, 242, .4); }
.band .pill.line:hover { box-shadow: inset 0 0 0 1.5px var(--on-dark); }
.band :focus-visible, .foot :focus-visible { outline-color: var(--apricot); }
.band-mascot { position: absolute; bottom: 0; width: auto; height: clamp(104px, 13vw, 190px); }
.band-mascot.left { left: max(16px, 7%); }
.band-mascot.right { right: max(16px, 7%); }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 26px max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))) 36px; background: var(--ink); color: var(--on-dark-2); font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot a { color: var(--on-dark-2); text-decoration: none; }
.foot a:hover { color: var(--on-dark); text-decoration: underline; }

/* Features, Notes and Pro pages. */
.hero.short { padding-bottom: clamp(64px, 8vw, 110px); }
.hero.short h1 { font-size: clamp(42px, 6.4vw, 92px); }
:lang(fr) .hero.short h1 { font-size: clamp(38px, 5.6vw, 82px); }
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; max-width: 920px; margin: 36px auto 0; font-size: 15px; font-weight: 500; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.edge-mascot { position: absolute; right: max(16px, 4%); bottom: 32px; width: auto; height: clamp(100px, 10vw, 150px); }
.notes-page .edge-mascot { bottom: auto; top: 120px; }
.feature { scroll-margin-top: 16px; }
.media { position: relative; }
.media.duo { padding: 0 13% 12% 0; }
.media.duo .phone { position: absolute; right: 0; top: 14%; width: 28%; filter: var(--lift); }
.media.window { padding-bottom: 26%; }
.media.window .sheet { position: absolute; right: 0; top: 18%; width: 34%; overflow: hidden; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.media.solo .phone { width: min(300px, 70%); margin: 0 auto; }
.media.tablet img { width: min(100%, 560px); margin: 0 auto; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.media.widgets { display: flex; align-items: flex-start; gap: 4%; filter: var(--lift); }
.media.widgets .w-large { width: 50%; }
.media.widgets .w-col { width: 46%; display: flex; flex-direction: column; gap: 18px; }
.media.widgets .w-small { width: 48%; }
.feature.center { padding: clamp(72px, 10vw, 140px) var(--gutter); text-align: center; }
.feature.center .copy { max-width: 760px; margin: 0 auto; }
.feature.center .copy p:not(.kicker) { margin-left: auto; margin-right: auto; }
.feature.center .actions { margin-top: 34px; }
.feature.center.themes { padding-bottom: 0; overflow: hidden; }

.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); padding: clamp(56px, 7vw, 100px) max(var(--gutter), calc((100% - 1100px) / 2)); }
.pairs h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; }
.pairs p:not(.kicker) { font-size: 18px; color: var(--ink-2); }

.prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0 var(--gutter) clamp(64px, 8vw, 110px); }
.price { width: min(100%, 300px); padding: 28px 32px 30px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.price .kicker { margin-bottom: 8px; }
.price .amount { font-size: 46px; font-weight: 700; line-height: 1.05; letter-spacing: -.045em; }
.price .note { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.compare { padding: clamp(64px, 8vw, 120px) var(--gutter); text-align: center; }
.table-card { max-width: 820px; margin: 40px auto 0; padding: 8px 28px; overflow-x: auto; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); text-align: left; }
.compare table { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 14px 0; border-bottom: 1px solid rgba(34, 38, 42, .08); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.compare td, .compare thead th + th { width: 130px; text-align: center; }
.compare tbody th { padding-right: 16px; font-weight: 500; text-align: left; }
.compare td:last-child { font-weight: 600; }
.compare .no { color: var(--ink-3); }

/* Support and the 404 page. */
.hero.left { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; max-width: 1120px; margin: 0 auto; padding: 72px var(--gutter) 64px; overflow: visible; text-align: left; }
.hero.left h1 { font-size: clamp(42px, 6vw, 84px); }
.hero.left .lead { max-width: 560px; margin: 24px 0 0; }
.hero.left .actions { justify-content: flex-start; margin-top: 30px; }
.side-mascot { width: auto; height: clamp(130px, 16vw, 220px); }
.links-line { margin-top: 26px; color: var(--ink-2); }
.faq { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 120px; background: transparent !important; }
.faq h2 { margin-bottom: 20px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; }
.qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 48px; padding: 26px 0; border-top: 1px solid rgba(34, 38, 42, .09); }
.qa h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.qa p { color: var(--ink-2); }
.qa a { font-weight: 600; color: var(--ink); }

/* The privacy policy (its text is docs/privacy-policy.html, the same as in the app). */
.legal { display: flex; flex-direction: column; gap: 28px; max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 120px; }
.legal header { display: flex; flex-direction: column; gap: 12px; }
.legal h1 { font-size: clamp(42px, 6vw, 76px); }
.legal .dates { font-size: 15px; color: var(--ink-2); }
.legal .summary { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.legal .summary h2 { font-size: 15px; letter-spacing: 0; color: var(--ink-2); }
.legal section { display: flex; flex-direction: column; gap: 12px; }
.legal section h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; }
.legal section h3 { margin-top: 6px; font-size: 18px; letter-spacing: -.01em; }
.legal ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 22px; }
.legal p, .legal li, .legal td { color: #3D4247; }
.legal a { text-decoration-color: var(--apricot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal .table-wrap { overflow-x: auto; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { padding: 10px 14px; border-bottom: 1px solid rgba(34, 38, 42, .08); text-align: left; vertical-align: top; }
.legal tr:last-child td { border-bottom: 0; }
.legal th { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.legal footer { padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.legal .contact { font-weight: 600; }

/* Smaller windows. */
@media (max-width: 1100px) {
  .edge-mascot { display: none; }
}
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .links, .login, .bar > .lang { display: none; }
  .bar { gap: 12px; height: 72px; }
  .menu { display: block; position: relative; }
  .menu summary { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(34, 38, 42, .3); font-size: 14.5px; font-weight: 600; list-style: none; cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .menu-panel { position: absolute; right: 0; top: calc(100% + 10px); display: flex; flex-direction: column; width: min(280px, calc(100vw - 32px)); padding: 8px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
  .menu-panel > a { padding: 12px 14px; border-radius: 10px; font-size: 16px; text-decoration: none; }
  .menu-panel > a:hover { background: var(--paper); }
  .menu-panel > a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
  .menu-panel .lang { gap: 10px; padding: 12px 14px 8px; font-size: 15px; }
  .split, .split.flip { grid-template-columns: minmax(0, 1fr); }
  .split.flip .copy { order: 0; }
  .pairs { grid-template-columns: minmax(0, 1fr); }
  .qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .brand img { height: 42px; }
  .hero { padding-top: 24px; }
  .hero h1 { margin-top: 22px; }
  .hero .lead { margin-top: 20px; }
  .actions { flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto; }
  .hero.left .actions { margin-left: 0; }
  .pill { white-space: normal; text-align: center; }
  .stage { aspect-ratio: 358 / 300; margin-top: 44px; }
  .stage .browser { left: 0; top: 16%; width: 86%; }
  .stage .phone { right: 0; top: 0; width: 34%; }
  .notes-stage { aspect-ratio: 358 / 290; }
  .browser { border-radius: 10px; }
  .browser-bar { height: 22px; gap: 4px; padding: 0 9px; }
  .browser-bar i { width: 6px; height: 6px; }
  .browser-bar span { padding: 1px 8px; font-size: 8.5px; transform: none; }
  .float { padding: 8px 11px 9px; border-radius: 12px; font-size: 12.5px; }
  .float small { font-size: 10.5px; }
  .float.quiz { left: 0; top: 2%; }
  .float.due { right: 6%; top: auto; bottom: 4%; }
  .feature .copy p:not(.kicker), .pairs p:not(.kicker) { font-size: 16.5px; }
  .media.widgets .w-col { gap: 10px; }
  .media.solo .phone { width: min(240px, 70%); }
  .dots { gap: 8px; }
  .dot { width: 22px; height: 22px; }
  .band { padding-bottom: 128px; }
  .band-mascot { height: 92px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .hero.left { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .hero.left { gap: 16px; padding-bottom: 40px; }
  .side-mascot { height: 100px; justify-self: end; margin-top: -8px; }
  .table-card { padding: 4px 16px; }
  .compare table { font-size: 14.5px; }
  .compare td, .compare thead th + th { width: 84px; }
  .price { width: 100%; }
}