/* The home page: the app's welcome step as the hero, then the model with a link to its card, the app's day on a table
   and its downloads, the API and the plans. The model card (model/) shares this file.
   site.css gives the tokens, the buttons and the plans; this file lays the page out and moves it. */
:root {
  --sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --code:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --faint:#aca397; --line-soft:#f1ede6; --acc-ink:#3b6478;
  --t-in:180ms; --t-out:120ms; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
  --rise:cubic-bezier(.2,.8,.2,1);
  --sy:0;
}
@media (prefers-color-scheme: dark) {
  :root { --faint:#5f5850; --line-soft:#211e1a; --acc-ink:#9dbfd2; }
}
html { scroll-behavior: smooth; }
body.home-page { overflow-x: hidden; font-family: var(--sans); font-size: 16px; }
.home-page h1, .home-page h2, .home-page h3, .home-page .wordmark, .home-page .plan .amount, .home-page .rate .amount, .home-page .words { font-family: var(--sans); }
.home-page h2, .home-page h3 { font-weight: 500; }
.home-page .home { display: block; min-height: 0; padding: 0; text-align: left; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section-h { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 44px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.lead { max-width: 620px; margin: 0 0 40px; font-size: 18px; color: var(--body); text-wrap: pretty; }
.button.small { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; }

/* the bar on top: the name, three links, the button; paper shows through once the page moves */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 60px;
  display: flex; align-items: center; gap: 28px; padding: 0 24px;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.top.scrolled { background: color-mix(in srgb, var(--paper) 78%, transparent); border-color: var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.wordmark { font-size: 19px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.top .menu { display: flex; gap: 22px; margin-left: 8px; }
.top .menu a { color: var(--muted); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color .15s; }
.top .menu a:hover { color: var(--ink); opacity: 1; }
.top .button { margin-left: auto; background: var(--ink); border-color: var(--ink); color: var(--paper); font-family: var(--sans); }

/* the hero: the welcome step, at page size. --sy is the scroll; the block drifts up and thins as you leave it */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 84px 24px 72px; }
.hello { width: fit-content; max-width: 1000px; transform: translate3d(0, calc(var(--sy) * -0.16px), 0); opacity: calc(1 - var(--sy) / 620); will-change: transform, opacity; }
.mark-slot { width: 132px; height: 132px; margin: 0 0 20px -10px; color: var(--ink); }
.mark-slot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark-slot.small { width: 72px; height: 72px; margin: 0 auto 10px; }
.hello h1.display { display: block; margin: 0 0 30px; font-family: var(--sans); font-weight: 500; font-size: clamp(42px, 7.4vw, 86px); line-height: .98; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.hello h1.display span:last-child { color: var(--muted); }
.hello h1.display span { display: block; }
.hello.intro h1 span:last-child { animation: fadeUp .45s var(--ease-out) var(--land, 0ms) backwards; }
.hello.intro .ob-acts { animation: obLate .45s var(--ease-out) var(--land, 0ms) backwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes obLate { from { opacity: 0; transform: translateY(6px); visibility: hidden; } }
.ob-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* the way in: the app's composer at the hero's size, as wide as the line above it. What is typed starts a chat. */
.hero .ob-acts { display: block; }
.askbox { display: flex; align-items: flex-end; gap: 10px; width: 100%; max-width: 720px; padding: 10px 10px 10px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); cursor: text; transition: border-color .15s, box-shadow .2s; }
.askbox:hover { border-color: var(--faint); }
.askbox:focus-within { border-color: var(--faint); box-shadow: 0 0 0 4px var(--acc-soft); }
.askbox textarea { flex: 1; min-width: 0; max-height: 196px; margin: 0; padding: 9px 0; border: 0; outline: 0; resize: none; background: none; color: var(--ink); font: 400 18px/1.45 var(--sans); letter-spacing: -0.01em; }
.askbox textarea::placeholder { color: var(--muted); opacity: 1; }
.askbox textarea.seeded { color: var(--muted); }   /* the question it comes with is quieter than one you typed */
.ask-go { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; display: grid; place-items: center; background: var(--ink); color: var(--paper); cursor: pointer; transition: opacity .12s, transform .1s; }
.ask-go:hover { opacity: .88; }
.ask-go:active { transform: scale(.96); }
.ask-go:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ask-go svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the downloads under it: small, this computer's first and in ink, the others quiet */
/* under the box: the one clear way in for whoever would rather not type here, and beside it the download for the computer
   or phone in front of them, alone (the rest are at "Get Hemmingway" and in the bar). The box's own arrow stays quiet
   while the box holds the question it came with, so the page has one dark button, not two. */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 18px 0 0; }
.button.cta { min-height: 50px; padding: 0 24px; border-radius: 14px; background: var(--ink); border-color: var(--ink); color: var(--paper); font: 500 16.5px/1 var(--sans); letter-spacing: -0.01em; }
.hero-get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.hero-get:not(:has(a.own:not([hidden]))) { display: none; }
.hero-get .get-chip:not(.own) { display: none; }
.hero-get .lab { margin-right: 0; }
.askbox:has(textarea.seeded):not(:focus-within) .ask-go { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.askbox:has(textarea.seeded):not(:focus-within) .ask-go:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--faint); opacity: 1; }
.get-chip { height: 34px; padding: 0 13px 0 11px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 500 14px/1 var(--sans); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: color .12s, box-shadow .2s, transform .1s; }
.get-chip:hover { color: var(--ink); opacity: 1; box-shadow: inset 0 0 0 1px var(--faint); }
.get-chip:active { transform: scale(.98); }
.get-chip.own { color: var(--ink); }
.get-chip .os { width: 15px; height: 15px; margin: -1px 0 0; }
.ob-btn { height: 44px; padding: 0 20px; border: 0; border-radius: 11px; font: 500 15px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: opacity .12s, transform .1s, background .12s, box-shadow .2s; }
.ob-btn:active { transform: scale(.98); }
.os { width: 18px; height: 18px; flex: none; margin: -1px 2px 0 -2px; }
.button .os { width: 16px; height: 16px; margin-left: -2px; }
.ob-btn.primary { background: var(--ink); color: var(--paper); }
.ob-btn.primary:hover { opacity: .88; }
.ob-btn.text { color: var(--muted); padding: 0 12px; }
.ob-btn.text:hover { color: var(--ink); opacity: 1; }
.ob-btn.acc { color: var(--acc-ink); }

/* what it does: one paragraph, pinned; its words come up out of the paper as you scroll through the section */
.story { height: 210vh; }
.story .pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 0 24px; }
.words { max-width: 920px; margin: 0; font-family: var(--serif); font-size: clamp(30px, 4.6vw, 56px); line-height: 1.18; letter-spacing: -0.014em; color: var(--ink); text-wrap: balance; }
.words span { opacity: clamp(0.12, calc(var(--p, 0) * var(--n, 1) - var(--i, 0) + 0.4), 1); transition: opacity .12s linear; }

/* the link under the model's words, on their left edge (they are 860 wide, centred in the pin): dim like them at first,
   it lights up as the word after the last */
.story .card-link { justify-self: start; margin: 34px 0 0 max(0px, calc((100% - 860px) / 2)); opacity: clamp(0.14, calc((var(--p, 0) - 1) * var(--n, 1) + 1), 1); }
.card-link .arr { width: 18px; height: 18px; margin: 0 -4px 0 2px; transition: transform .2s var(--ease-out); }
.card-link:hover .arr { transform: translateX(3px); }

/* the model card: its name and paragraph, the benchmarks, the plain facts under them, then where to use it */
.card-head { padding: 150px 0 0; }
.card-head .kicker { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--muted); }
.card-head h1 { margin: 0 0 26px; font-size: clamp(46px, 7vw, 84px); font-weight: 500; line-height: .98; letter-spacing: -0.04em; color: var(--ink); }
.card-head .intro { max-width: 780px; margin: 0; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--body); text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); }
.facts div { padding: 18px 24px 20px 0; border-bottom: 1px solid var(--line); }
.facts dt { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.facts dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.facts code { font: 15px var(--code); }
.card-page .bench { padding: 110px 0 72px; }
.card-facts { padding: 0 0 120px; }
.use-acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* read what it writes: three real asks and the model's own answers, word for word (data/generated/home-examples). The
   asks are the way to switch; the ask is set in the page's type and the answer as writing. All three lie in one cell, so
   the page below does not jump when you switch; without the script they simply follow each other. */
.proof { padding: 0 0 150px; scroll-margin-top: 110px; }
.proof .section-h { margin-bottom: 34px; }
.proof-grid { display: grid; grid-template-columns: 250px minmax(0, 700px); gap: 0 70px; align-items: start; }
.asks { display: flex; flex-direction: column; align-items: flex-start; border-left: 1px solid var(--line); }
.asks button { margin: 0 0 0 -1px; padding: 9px 0 9px 20px; border: 0; border-left: 2px solid transparent; background: none; color: var(--muted); font: 500 17px/1.3 var(--sans); letter-spacing: -0.01em; text-align: left; cursor: pointer; transition: color .15s, border-color .15s; }
.asks button:hover { color: var(--ink); }
.asks button[aria-selected="true"] { color: var(--ink); border-left-color: var(--ink); }
.asks button:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; border-radius: 4px; }
.answers { display: grid; grid-column: 2; }
.ex + .ex { margin-top: 70px; }
.proof.on .ex { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity var(--t-out) var(--ease-in), visibility 0s var(--t-out); }
.proof.on .ex.cur { visibility: visible; opacity: 1; transition: opacity var(--t-in) var(--ease-out); }
.asked { margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: var(--muted); white-space: pre-line; }
.said { font-family: var(--serif); font-size: 19.5px; line-height: 1.62; color: var(--ink); text-wrap: pretty; }
.said p { margin: 0 0 .85em; }
.said .t { font-weight: 600; }
.ex .try { margin-top: 14px; height: 46px; padding: 0 18px; font-size: 15px; }
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: minmax(0, 700px); }
  .asks { flex-direction: row; flex-wrap: wrap; gap: 0 22px; margin: 0 0 30px; border-left: 0; border-bottom: 1px solid var(--line); }
  .asks button { margin: 0 0 -1px; padding: 0 0 11px; border-left: 0; border-bottom: 2px solid transparent; font-size: 16px; }
  .asks button[aria-selected="true"] { border-bottom-color: var(--ink); }
  .answers { grid-column: 1; }
}
@media (max-width: 560px) {
  .proof { padding-bottom: 96px; }
  .said { font-size: 18px; }
  .asks { gap: 0 18px; }
  .asks button { font-size: 15.5px; }
  /* a phone shows one answer at its own height: a short one leaves no empty screen under it */
  .proof.on .ex { display: none; }
  .proof.on .ex.cur { display: block; }
}

/* the app: its line, then one day on an empty table */
.day { padding: 0 0 140px; }
.day .section-h { margin-bottom: 24px; }
.day-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--raise); object-fit: cover; }

/* the benchmarks, in the release-chart style: rounded bars fading into the paper, the score on top, a mark in each */
.bench { padding: 0 0 140px; }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* The scores before home.js turns them into charts, and for good whenever it cannot run. */
.bench-table { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); border-collapse: collapse; width: 100%; overflow: hidden; }
.bench-table caption { padding: 16px 18px 10px; text-align: left; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.bench-table caption span { display: block; font-size: 14.5px; font-weight: 400; color: var(--muted); }
.bench-table th, .bench-table td { padding: 8px 18px; text-align: left; font-size: 15px; font-weight: 400; color: var(--body); border-top: 1px solid var(--line); }
.bench-table thead th { font-size: 13px; color: var(--faint); }
.bench-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.bench-table tbody tr:first-child th, .bench-table tbody tr:first-child td { font-weight: 600; color: var(--ink); }
.chart { padding: 8px 8px 0; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; }
.chart svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.chart .t { font-size: 24px; font-weight: 600; fill: var(--ink); letter-spacing: -0.01em; }
.chart .s { font-size: 15.5px; fill: var(--muted); }
.chart .tick, .chart .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart .tick { font-size: 13.5px; fill: var(--faint); }
.chart .num { font-size: 18px; fill: var(--body); }
.chart .num.me { font-size: 20px; font-weight: 700; fill: var(--ink); }
.chart .lab { font-size: 13.5px; fill: var(--muted); }
.chart .lab.me { font-weight: 700; fill: var(--acc-ink); }
.chart .pill rect { fill: var(--raise); stroke: var(--line); }
.chart .pill text { font-size: 11.5px; letter-spacing: .12em; fill: var(--muted); }
.chart .badge { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .18)); }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .9s var(--rise) calc(var(--i) * 70ms); }
.chart .top { opacity: 0; transition: opacity .5s ease calc(.45s + var(--i) * 70ms); }
.chart.in .bar { transform: none; }
.chart.in .top { opacity: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 22px 0 0; font-size: 15px; color: var(--body); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.legend b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.sw { width: 30px; height: 16px; border-radius: 4px; }
.sw.hemmingway { background: linear-gradient(var(--acc), var(--paper)); border: 1px solid var(--line); }
.sw.other { background: linear-gradient(color-mix(in srgb, var(--muted) 60%, var(--paper)), var(--paper)); border: 1px solid var(--line); }
.foot { margin: 14px 0 0; color: var(--muted); font-size: 14px; }

/* the plans: site.css draws them; here they come in on scroll, not on load */
.plans-area { padding: 0 0 140px; }
.plans-area .period { margin-top: 8px; }
.plans-area .plan { animation: none; }
.plans-area .api { margin-top: 40px; }

/* get it */
.get { padding: 0 0 140px; text-align: center; }
.get .section-h { margin-bottom: 26px; }
.get .downloads { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 12px; }
.get .first-open { max-width: 520px; margin: 40px auto 0; text-align: left; font-size: 14px; color: var(--body); }
.get .first-open h3 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.get .first-open p { margin: 0 0 10px; }
.get .first-open strong { color: var(--ink); font-weight: 600; }

.foot-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px; border-top: 1px solid var(--line); font-size: 14px; }
.foot-bar .foot-links { margin-left: auto; display: grid; gap: 10px; }
.foot-bar .links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-bar .links a { color: var(--muted); text-decoration: none; }
.foot-bar .links a:hover { color: var(--ink); }
.foot-bar .badges { margin: 0; }
.foot-bar .badges img { display: block; }
.foot-bar .social .n { color: var(--faint); }   /* where else Hemmingway is, under the pages: the label, then the places (app/ui/socials.js) */

/* things arrive as they come into view */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s var(--rise); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .charts { grid-template-columns: 1fr; }
  .top .menu { display: none; }
  .story { height: 180vh; }
}
@media (max-width: 560px) {
  .mark-slot { width: 96px; height: 96px; margin: 0 0 16px -7px; }
  .askbox { padding: 8px 8px 8px 16px; border-radius: 18px; }
  .askbox textarea { font-size: 17px; }
  .ask-go { width: 42px; height: 42px; }
  .button.cta { min-height: 48px; padding: 0 22px; font-size: 16px; }
  .hello h1.display { margin-bottom: 26px; }
  .ob-acts { flex-wrap: wrap; }
  .day, .bench, .plans-area { padding-bottom: 96px; }
}
.hello { position: relative; }
.ob-btn.big { height: 52px; padding: 0 26px; font-size: 16px; font-weight: 500; border-radius: 12px; }
.ob-btn.line { height: 52px; padding: 0 22px; border-radius: 12px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ob-btn.line:hover { box-shadow: inset 0 0 0 1px var(--faint); }

/* the slogan, then two lines that come up as you scroll */
.story { height: 170vh; }
.story .pin { place-items: center; align-content: center; grid-template-columns: minmax(0, 920px); justify-content: center; }
.slogan { margin: 0 0 22px; font-size: clamp(40px, 7vw, 84px); font-weight: 500; line-height: .98; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.words { max-width: 860px; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.35; letter-spacing: -0.015em; color: var(--body); font-weight: 400; }
.words span { opacity: clamp(0.14, calc(var(--p, 0) * var(--n, 1) - var(--i, 0) + 0.4), 1); }

/* the model, through the API: the call on the left, the price and the key on the right */
/* Talk to us: where we are, as buttons a person can see (the footer's line was the only place, and nobody reads a footer) */
.community { padding: 0 0 140px; text-align: center; scroll-margin-top: 110px; }   /* the top bar's Community lands with the heading showing, not under the bar */
.community .section-h { margin-bottom: 30px; }
.community .places { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 0; }
.community .place { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--ink); transition: background .15s, transform .15s; }
.community .place svg { width: 30px; height: 30px; display: block; }
.community .place:hover { background: var(--line-soft, rgba(0,0,0,.05)); opacity: 1; }
.community .place:active { transform: scale(.96); }
.community .place:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }
@media (max-width: 560px) { .community .places { gap: 6px 16px; } }
.model { padding: 0 0 140px; }
.api-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: var(--raise); }
.api-row .section-h { margin-bottom: 8px; font-size: clamp(26px, 3.4vw, 32px); }
.api-row .lead { margin: 0; font-size: 16px; }
.model-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 20px; align-items: stretch; }
.code { margin: 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--raise); color: var(--ink); font: 13.5px/1.65 var(--code); overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; }
.model-side { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.model-side .rates { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0; }
.model-side .rate { display: inline-flex; flex-direction: column; gap: 4px; }
.model-side .rate .amount { font-family: var(--sans); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.model-side .rate .unit { color: var(--muted); font-size: 14px; }
.model-side p { margin: 0; color: var(--body); }
.model-side .button { align-self: flex-start; margin-top: 6px; }
@media (max-width: 900px) { .model-grid { grid-template-columns: 1fr; } .api-row { grid-template-columns: 1fr; } .api-row .button { justify-self: start; } }
@media (max-width: 560px) { .ob-btn.big, .ob-btn.line { width: 100%; } }

/* with reduced motion everything is simply there and nothing pins; last in the file so the rules above don't win */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hello { transform: none; opacity: 1; }
  .hello.intro h1 span:last-child, .hello.intro .ob-acts { animation: none; }
  [data-reveal], .chart .bar, .chart .top { opacity: 1; transform: none; transition: none; }
  .words span, .story .card-link { opacity: 1; transition: none; }
  .proof.on .ex, .proof.on .ex.cur { transition: none; }
  .story { height: auto; padding: 120px 0; }
  .story .pin { position: static; height: auto; }
}