/* The homepage in Ink & Paper, the app's own look (since 2026-10-21; it was Paper cut-out, kept at /lab/paper-home):
   flat paper, floor and tint bands, Comic Neue headings, the site's plain cards and sticky notes, the Pakas as big as
   the layout allows, standing on a floor line. The layout first, then the look over it. site.css has the tokens. */

.ink-page {
  --paper-ink2: var(--ink2); --paper-display: var(--voice); --paper-grain: none; --paper-sky: var(--paper);
  --tile-hills: none; --tile-green-top: none; --tile-bushes: none; --tile-pinking: none; --tile-meadow: none; --tile-waves: none;
  --tile-lilac-bed: none; --tile-notebook: none; --tile-notes-bed: none; --tile-butter: none; --tile-butter-deep: none; --tile-bunting: none;
  overflow-x: clip;
}
main.ink-page + .site-footer { margin-top: 0; }

/* ---- the layout: the hero's grid, how it works beside the demo, the real-life cards, Caraka's stage, the notes, the
   closing; --feet is the room under Caraka's feet at the hero's foot ---- */
.ink-page.home { --feet: 86px; }
.ink-page .home-hero { --hp-w: 520px; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--hp-w); gap: 24px clamp(28px, 4vw, 64px); align-items: end; min-height: 0; padding: 44px max(var(--gutter), calc(50% - 590px)) calc(var(--feet) - var(--hp-w) * 58 / 520); background: var(--paper-grain), var(--tile-hills), var(--paper-sky); }
.ink-page .home-hero > :is(.hero-text, .hero-media) { position: relative; z-index: 1; }
.ink-page .home-hero > .hero-text { z-index: 2; }
.ink-page .home-hero .hero-text { align-self: center; margin-bottom: 190px; }
.ink-page .home-hero h1 { margin: 0 0 22px; font-size: clamp(40px, 2.6vw + 26px, 62px); line-height: 1.36; }
.ink-page .home-hero .lead { max-width: 30em; color: var(--paper-ink2); }
.ink-page .home-hero .hero-media { display: block; width: var(--hp-w); }
.ink-page .hero-phone .hp-photo { isolation: isolate; }
.ink-page .hero-phone .hp-photo figcaption { font-family: "Gloria Hallelujah", var(--voice); color: var(--ink); }
.ink-page .home-part { position: relative; isolation: isolate; margin-top: -40px; padding: 108px var(--gutter) 132px; background: none; text-align: center; }
.ink-page .home-part::before, .ink-page .home-part::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.ink-page .home-part::before { z-index: -2; top: calc(var(--edge-h) - 10px); bottom: calc(-1 * var(--foot-y, 0px)); background: var(--paper-grain), var(--foot), var(--sheet); }
.ink-page .home-part::after { z-index: -1; top: 0; height: var(--edge-h); background: var(--paper-grain), var(--edge); }
.ink-page .home-steps { z-index: 2; --sheet: var(--green); --edge: var(--tile-green-top); --edge-h: 64px; --foot: var(--tile-bushes); }
.ink-page .home-life { z-index: 3; --sheet: var(--peach); --edge: var(--tile-pinking); --edge-h: 64px; --foot: var(--tile-meadow); }
.ink-page .home-companion { z-index: 4; --sheet: var(--lilac); --edge: var(--tile-waves); --edge-h: 52px; --foot: var(--tile-lilac-bed); }
.ink-page .home-notes { z-index: 5; --sheet: var(--pink); --edge: var(--tile-notebook); --edge-h: 50px; --foot: var(--tile-notes-bed); --foot-y: 27px; }
.ink-page .home-part .section-title { max-width: 900px; margin: 0 auto 14px; font-size: clamp(34px, 2vw + 24px, 52px); line-height: 1.38; }
.ink-page .home-part .section-sub { color: var(--paper-ink2); }
.ink-page .home-part .card { border-radius: 12px; }
.ink-page .home-part .card p { color: var(--paper-ink2); }
.ink-page .home-try { --dw: min(100vw - 2 * var(--gutter), 368px); display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-areas: "demo title" "demo steps"; column-gap: clamp(36px, 5vw, 84px); align-items: start; max-width: 1060px; margin: 0 auto; text-align: left; }
.ink-page .home-try .section-title { grid-area: title; align-self: end; margin: 30px 0 26px; }
.ink-page .home-try .demo-wrap { grid-area: demo; position: relative; width: var(--dw); justify-self: center; }
.ink-page .home-try .demo { position: relative; z-index: 1; display: block; width: 100%; height: calc(578px - (368px - var(--dw)) * 1.98); border: 0; }
.ink-page .home-try .steps { grid-area: steps; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 540px; margin: 0; }
.ink-page .home-try .steps > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "num h3" "num p"; align-items: center; column-gap: 16px; padding: 13px 18px 14px 16px; text-align: left; }
.ink-page .home-try .steps .num { position: static; grid-area: num; margin: 0; }
.ink-page .home-try .steps h3 { grid-area: h3; align-self: end; margin: 0; font: 400 25px/1.2 var(--paper-display); letter-spacing: 0.01em; }
.ink-page .home-try .steps .num { width: auto; height: auto; border: 0; background: none; box-shadow: none; font: 400 50px/1 var(--paper-display); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.ink-page .home-try .steps p { grid-area: p; align-self: start; margin: 2px 0 0; }
.ink-page .steps .num { z-index: 1; }
@media (min-width: 1001px) {
  .ink-page .home-try :is(.steps, .section-title) { justify-self: end; width: 100%; max-width: 480px; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .ink-page .home-try :is(.steps, .section-title) { max-width: 430px; }
}
.ink-page .shots { --k: 1px; --say: calc(70 * var(--k)); display: grid; grid-template-columns: repeat(4, calc(262 * var(--k))); justify-content: center; gap: calc(30 * var(--k)); margin: 64px auto 0; }
.ink-page .shot { position: relative; height: calc(535 * var(--k) + var(--say)); border-radius: 12px; text-align: center; }
.ink-page .shot .shot-line { position: relative; z-index: 3; margin: calc(6 * var(--k)) calc(18 * var(--k)) 0; font-size: calc(15.5 * var(--k)); line-height: 1.35; color: var(--paper-ink2); }
.ink-page .shot h3 { position: relative; z-index: 3; margin: 0; padding-top: calc(20 * var(--k)); font: 400 calc(28 * var(--k)) / 1.1 var(--paper-display); letter-spacing: 0.01em; white-space: nowrap; }
.ink-page .shot-phone { position: absolute; z-index: 1; left: 0; right: 0; top: calc(68 * var(--k) + var(--say)); bottom: calc(14 * var(--k)); overflow: hidden; }
.ink-page .shot-phone img { width: calc(206 * var(--k)); max-width: none; height: auto; margin: 0 auto; filter: drop-shadow(0 calc(8 * var(--k)) calc(10 * var(--k)) rgba(42, 34, 48, 0.2)); }
.ink-page .shot .lift { position: absolute; z-index: 4; max-width: none; height: auto; translate: 0 var(--say); filter: drop-shadow(0 calc(8 * var(--k)) calc(10 * var(--k)) rgba(42, 34, 48, 0.28)); }
.ink-page .shot .l1 { left: calc(-16 * var(--k)); top: calc(171 * var(--k)); width: calc(294 * var(--k)); rotate: -2deg; }
.ink-page .shot .l2 { left: calc(9.3 * var(--k)); top: calc(262 * var(--k)); width: calc(243 * var(--k)); rotate: 1.5deg; }
.ink-page .shot .l3 { left: calc(12 * var(--k)); top: calc(50 * var(--k)); width: calc(238 * var(--k)); rotate: -1.5deg; }
.ink-page .shot .l4 { left: calc(130 * var(--k)); top: calc(300 * var(--k)); width: calc(150 * var(--k)); rotate: 5deg; }
.ink-page .shot .l4k { left: calc(154 * var(--k)); top: calc(98 * var(--k)); width: calc(78 * var(--k)); rotate: -3deg; }
.ink-page .home-companion { --hill-h: 180px; --stand: 44px; --sink: 12px; padding-bottom: calc(var(--hill-h) - var(--stand) - var(--sink)); overflow: hidden; text-align: left; }
.ink-page .cm { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 40px; max-width: 1180px; margin: 0 auto; align-items: end; }
.ink-page .cm-words { align-self: start; padding-top: 10px; }
.ink-page .cm-words h2 { margin: 0 0 14px; font-size: clamp(36px, 2.2vw + 24px, 56px); line-height: 1.38; }
.ink-page .cm-sub { margin: 0 0 6px; max-width: 34em; font-size: 19px; line-height: 1.45; color: var(--paper-ink2); }
.ink-page .cm-lists h3 { margin: 22px 0 12px; font: 400 26px/1.15 var(--paper-display); letter-spacing: 0.01em; }
.ink-page .cm-lists ul { display: flex; flex-wrap: wrap; gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.ink-page .cm-lists li { position: relative; padding: 9px 16px 10px; border-radius: 12px; font: 700 17px/1.3 var(--voice); }
.ink-page .cm-lists li:nth-child(odd) { rotate: -1.2deg; }
.ink-page .cm-lists li:nth-child(even) { rotate: 1deg; }
.ink-page .cm-no li { color: var(--paper-ink2); text-decoration: line-through 2.5px rgba(223, 82, 82, 0.9); }
.ink-page .cm-yes li { padding-left: 46px; }
.ink-page .cm-yes .todo-box { position: absolute; left: 12px; top: 50%; display: block; width: 24px; height: 24px; margin-top: -12px; }
.ink-page .cm-stage { --box-h: 490px; display: flex; flex-direction: column; align-items: center; }
.ink-page .cm-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 100px; }
.ink-page .cm-tab { position: relative; overflow: hidden; padding: 6px 13px 9px; border: 1.5px solid rgba(42, 34, 48, 0.45); border-radius: 10px; background: var(--paper); color: var(--paper-ink2); font: 400 17px/1.15 var(--paper-display); letter-spacing: 0.01em; cursor: pointer; }
.ink-page .cm-tab .short { display: none; }
.ink-page .cm-tab[aria-pressed="true"] { padding: 5.5px 12.5px 8.5px; border: 2px solid var(--ink); color: var(--ink); box-shadow: 0 2px 0 var(--ink); rotate: -1.5deg; }
.ink-page .cm-tab[data-mood="happy"][aria-pressed="true"] { background: #e2f0dd; }
.ink-page .cm-tab[data-mood="celebratory"][aria-pressed="true"] { background: #fff1c2; }
.ink-page .cm-tab[data-mood="sleepy"][aria-pressed="true"] { background: var(--tint-pink); }
.ink-page .cm-tab[data-mood="sad"][aria-pressed="true"] { background: var(--tint-blue); }
.ink-page .cm-tab[data-mood="angry"][aria-pressed="true"] { background: #fbe0df; }
.ink-page .cm-tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(42, 34, 48, 0.12); }
.ink-page .cm-tab b { display: block; width: 0; height: 100%; background: var(--ink); }
.ink-page .cm-tab[aria-pressed="true"] b { width: 100%; }
.ink-page .cm-tab:focus-visible { outline: 3px solid var(--wall); outline-offset: 2px; }
.ink-page .cm-frame { position: relative; height: var(--box-h); aspect-ratio: 1004 / 1288; }
.ink-page .cm-clip { position: absolute; z-index: 1; left: 9.761%; top: -0.311%; width: 84.761%; height: 98.913%; overflow: hidden; background: no-repeat 0 0; }
.ink-page .cm-clip img { display: block; width: 400%; max-width: none; height: 100%; margin-left: -100%; }
.ink-page .cm-stage.playing .cm-clip img { visibility: hidden; }
.ink-page .cm-talk { position: absolute; z-index: 2; left: 50%; bottom: calc(83% + 11px); width: max-content; translate: -50% 0; transform-origin: 50% 100%; }
.ink-page .cm-stage.playing .cm-talk { opacity: 0; scale: 0; transition: scale 160ms ease-in, opacity 140ms ease-in; }
.ink-page .cm-stage.playing .cm-talk.on { opacity: 1; scale: 1; transition: scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease-out; }
.ink-page .cm-talk .say { position: relative; max-width: 360px; margin: 0; padding: 12px 16px 13px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); font: 700 17px/1.3 var(--voice); color: var(--ink); }
.ink-page .cm-talk .say::after, .ink-page .cm-talk .say::before { content: ""; position: absolute; left: 50%; top: 100%; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ink-page .cm-talk .say::after { width: 14.78px; height: 9.5px; margin: 1.5px 0 0 -7.39px; background: var(--ink); }
.ink-page .cm-talk .say::before { z-index: 1; width: 12.82px; height: 8.24px; margin: -0.5px 0 0 -6.41px; background: var(--paper); }
.ink-page .cm-talk .who { position: absolute; left: 12px; top: -13px; padding: 2px 9px 1px; border: 1.6px solid var(--ink); border-radius: 9px; background: var(--tint-pink); color: var(--ink); font: 400 13px/1.2 var(--paper-display); letter-spacing: 0.02em; }
.ink-page .cm-typing { position: absolute; z-index: 2; left: 63%; top: 0; overflow: visible; opacity: 0; scale: 0; transform-origin: 12% 96%; transition: scale 160ms ease-in, opacity 140ms ease-in; }
.ink-page .cm-typing.on { opacity: 1; scale: 1; transition: scale 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease-out; }
.ink-page .cm-typing path { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ink-page .cm-typing circle { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: cm-wave 1.25s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.ink-page .cm-typing circle:nth-of-type(2) { animation-delay: -1.04s; }
.ink-page .cm-typing circle:nth-of-type(3) { animation-delay: -0.83s; }
@keyframes cm-wave {
  0%, 100% { translate: 0 2px; opacity: 0.35; }
  50% { translate: 0 -3px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-page .cm-typing circle { animation: none; opacity: 0.6; }
}
.ink-page .fit { max-width: 1040px; margin: 0 auto; padding-bottom: 20px; }
.ink-page .fit .section-title { display: block; width: max-content; max-width: 100%; margin: 0 auto 30px; font-size: clamp(32px, 1.8vw + 22px, 46px); }
.ink-page .fit-notes { display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 34px 30px; margin: 0; padding: 14px 0 0; list-style: none; }
.ink-page .fit-notes > [data-pp="card"] { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 14px; height: 150px; padding: 30px 24px 18px 22px; }
.ink-page .fit-notes > :nth-child(1) { rotate: -1.6deg; }
.ink-page .fit-notes > :nth-child(2) { rotate: 1.2deg; translate: 0 8px; }
.ink-page .fit-notes > :nth-child(3) { rotate: -0.8deg; }
.ink-page .fit-notes > :nth-child(4) { rotate: 1.4deg; }
.ink-page .fit-notes > :nth-child(5) { rotate: -1.2deg; translate: 0 6px; }
.ink-page .fit-notes p { margin: 0; font: 400 23px/1.25 var(--paper-display); letter-spacing: 0.01em; color: var(--ink); text-align: left; text-wrap: pretty; }
.ink-page .fit-notes [data-pp="tick"] { display: block; width: 34px; height: 34px; }
.ink-page .fit-spot { --w: 420px; --drop: 84px; position: relative; z-index: 3; }
.ink-page .fit-paka { position: absolute; z-index: 1; left: 50%; bottom: calc(-10px - var(--drop)); width: auto; height: 250px; translate: -50% 0; }
@media (max-width: 1059px) {
  .ink-page .fit-notes { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
.ink-page .home-closing { z-index: 6; display: flex; flex-direction: column; align-items: center; padding: 212px var(--gutter) var(--feet); overflow: visible; clip-path: inset(-300px 0 0 0); }
.ink-page .home-closing::before { top: 24px; bottom: -40px; left: -6%; right: -6%; rotate: -1.5deg; background: var(--tile-butter-deep), linear-gradient(var(--butter-deep), var(--butter-deep)) 0 34px / 100% 100% no-repeat; }
.ink-page .home-closing::after { top: 44px; bottom: -40px; height: auto; left: -6%; right: -6%; rotate: 1.2deg; background: var(--paper-grain), var(--tile-butter), linear-gradient(var(--butter), var(--butter)) 0 34px / 100% 100% no-repeat; }
.ink-page .closing .section-title { order: 1; max-width: 860px; margin: 0 auto; }
.ink-page .closing .badges { order: 2; justify-content: center; margin-top: 30px; }
.ink-page .closing .trio { order: 3; align-items: flex-end; gap: 72px; margin: 34px 0 0; }
.ink-page .closing .trio img { width: auto; height: 250px; }
.ink-page .closing .trio .trio-mid { height: 290px; }
@media (min-width: 960px) and (max-width: 1239px) {
  .ink-page .shots { --k: min(1px, calc((100vw - 2 * var(--gutter) - 90px) / 1048)); }
}
@media (min-width: 640px) and (max-width: 959px) {
  .ink-page .shots { grid-template-columns: repeat(2, calc(262 * var(--k))); row-gap: 40px; }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  .ink-page .home-hero { --hp-w: 440px; }
}
@media (max-width: 1000px) {
  .ink-page .cm { grid-template-columns: minmax(0, 1fr); }
  .ink-page .home-try { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "demo" "steps"; justify-items: center; text-align: center; }
  .ink-page .home-try .section-title { margin: 0 auto 24px; }
  .ink-page .home-try .steps { width: 100%; margin-top: 34px; }
  .ink-page .home-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 36px; }
  .ink-page .home-hero .hero-text { justify-self: stretch; max-width: 640px; margin: 0 auto 6px; align-self: start; }
}
@media (max-width: 639px) {
  .ink-page.home .home-companion { padding-bottom: calc(var(--hill-h) - var(--stand) - var(--sink)); }
  .ink-page .cm { display: flex; flex-direction: column; align-items: stretch; gap: 44px; }
  .ink-page .cm-words h2, .ink-page .cm-sub { text-align: center; }
  .ink-page .cm-sub { margin-inline: auto; font-size: 17px; }
  .ink-page .cm-stage { --box-h: 380px; }
  .ink-page .cm-tabs { gap: 6px; margin-bottom: 98px; }
  .ink-page .cm-tab { padding: 6px 10px 9px; font-size: 16px; }
  .ink-page .cm-tab[aria-pressed="true"] { padding: 5.5px 9.5px 8.5px; }
  .ink-page .cm-tab .long { display: none; }
  .ink-page .cm-tab .short { display: inline; }
  .ink-page .cm-talk .say { max-width: min(330px, calc(100vw - 2 * var(--gutter))); font-size: 15px; }
  .ink-page.home { --feet: 82px; }
  .ink-page .home-hero { padding-top: 28px; }
  .ink-page .home-hero { --hp-w: min(100vw - 2 * var(--gutter), 400px); }
  .ink-page .home-hero { row-gap: 76px; }
  .ink-page .home-part { padding: 96px var(--gutter) 116px; }
  .ink-page .home-try .steps > li { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px 13px 12px; }
  .ink-page .home-try .steps h3 { font-size: 22px; }
  .ink-page .home-try .steps .num { font-size: 44px; }
  .ink-page .shots { --k: 1px; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 40px; }
  .ink-page .shots { --say: 0px; }
  .ink-page .shot { height: 350px; }
  .ink-page .shot .shot-line { position: absolute; left: 172px; right: 12px; bottom: 16px; margin: 0; font-size: 14.5px; text-align: left; }
  .ink-page .shot h3 { position: absolute; left: 172px; right: 10px; padding-top: 22px; font-size: 25px; line-height: 1.12; text-align: left; white-space: normal; }
  .ink-page .shot-phone { left: 16px; right: auto; width: 150px; top: 18px; bottom: 10px; }
  .ink-page .shot-phone img { width: 150px; margin: 0; filter: drop-shadow(0 5px 7px rgba(42, 34, 48, 0.2)); }
  .ink-page .shot .lift { filter: drop-shadow(0 5px 7px rgba(42, 34, 48, 0.28)); }
  .ink-page .shot .l1 { left: 56px; top: 87px; width: 222px; }
  .ink-page .shot .l2 { left: 133.8px; top: 128px; width: 200.5px; }
  .ink-page .shot .l3 { left: 109px; top: 87.9px; width: 240px; }
  .ink-page .shot .l4 { left: auto; right: 24px; top: 98px; width: 126px; }
  .ink-page .shot .l4k { left: 107.6px; top: 38px; width: 62.4px; }
  .ink-page .fit-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .ink-page .fit-notes > [data-pp="card"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px 1fr; align-items: start; row-gap: 8px; height: 168px; padding: 24px 14px 14px 16px; }
  .ink-page .fit-notes p { font-size: 19px; }
  .ink-page .fit-notes [data-pp="tick"] { width: 28px; height: 28px; }
  .ink-page .fit-spot { --w: 340px; --drop: 72px; }
  .ink-page .fit-paka { height: 230px; }
  .ink-page .home-closing { padding-top: 196px; }
  .ink-page .closing .trio { margin-top: 26px; gap: 0; }
  .ink-page .closing .trio img { height: 150px; }
  .ink-page .closing .trio .trio-mid { height: 174px; }
}
@media (max-width: 374px) {
  .ink-page .fit-notes p { font-size: 17px; }
  .ink-page .fit-paka { height: 214px; }
  .ink-page .cm-stage { --box-h: 360px; }
  .ink-page .cm-tab { padding-inline: 8px; font-size: 14.5px; }
  .ink-page .cm-tab[aria-pressed="true"] { padding-inline: 7.5px; }
}

/* ---- the look ---- */

/* flat bands: the hero on the floor under the white header (as the app: paper bars and cards on the floor), then
   paper, floor, paper, floor and the yellow closing; no cut edges, no overlap */
.ink-page .home-part { margin-top: 0; padding: 92px var(--gutter) 100px; }
.ink-page .home-part::after { display: none; }
.ink-page .home-part::before { top: 0; bottom: 0; background: var(--sheet); }
.ink-page .home-steps { --sheet: var(--paper); }
.ink-page .home-life { --sheet: var(--floor); }
.ink-page .home-companion { --sheet: var(--paper); }
.ink-page .home-notes { --sheet: var(--floor); }

/* headings: Comic Neue, the app's (the hero's "little things" gets site.css's yellow mark) */
.ink-page :is(.paper-strips, .section-title, .display) { font-family: var(--voice); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.ink-page .paper-strips > span { padding: 0; border: 0; }
.ink-page .home-hero h1 { font-size: clamp(40px, 2.6vw + 24px, 60px); line-height: 1.12; margin-bottom: 20px; }
.ink-page .home-part .section-title, .ink-page .fit .section-title { font-size: clamp(30px, 1.5vw + 22px, 44px); line-height: 1.15; }
.ink-page .cm-words h2 { font-size: clamp(32px, 1.8vw + 22px, 48px); line-height: 1.15; }
.ink-page :is(.home-try .steps h3, .shot h3, .cm-lists h3, .fit-notes p, .cm-tab) { font-family: var(--voice); font-weight: 700; letter-spacing: 0; }

/* the hero: the floor; every band ends with room under its content, no line at its foot */
.ink-page .home-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--floor); }
.ink-page .hero-phone :is(.hp-sticker, .hp-phone, .hp-caraka) { filter: none; }
.ink-page .hero-phone .hp-photo { padding: calc(8 * var(--hp-u)) calc(8 * var(--hp-u)) 0; border: 1.5px solid var(--ink2); border-radius: 6px; background: var(--paper); }
.ink-page .hero-phone .hp-photo figcaption { font-family: var(--voice); font-weight: 700; }

/* cards: the site's plain card (paper, the soft grey edge), in their tints (always one on a paper band); flat, not crooked */
.ink-page [data-pp="card"] { border: 1.5px solid var(--ink2); border-radius: 16px; background: var(--paper); }
.ink-page [data-tint="yellow"] { background: var(--tint-yellow); }
.ink-page [data-tint="blue"] { background: var(--tint-blue); }
.ink-page [data-tint="green"] { background: var(--tint-green); }
.ink-page [data-tint="pink"] { background: var(--tint-pink); }
.ink-page [data-tint="peach"] { background: #fcebd3; }
.ink-page :is(.steps > li, .cm-lists li) { rotate: none; }

/* how it works: the steps' numbers in round tags */
.ink-page .home-try .steps .num { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 700 22px/1 var(--voice); -webkit-text-stroke: 0; color: var(--ink); }
.ink-page .home-try .steps h3 { font-size: 21px; }

/* the tour (.touring, set by landing.js unless Reduce Motion is on): the phone plays How Paka works as one flow, and the
   step playing sits beside it, its tail at what's happening (--spot, from the phone), its bar running for the scene and
   holding when the phone does; under it on narrow screens. 1 2 3 4 under the title. The list stays for screen readers,
   and shows as before when there's no tour. */
.ink-page .home-try :is(.step-dots, .step-card) { display: none; }
.ink-page .home-try.touring { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "dots" "demo"; justify-items: center; text-align: center; }
.ink-page .home-try.touring .section-title { justify-self: center; width: auto; max-width: none; margin: 0 0 14px; }
.ink-page .home-try.touring .steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ink-page .home-try.touring .step-dots { grid-area: dots; display: flex; margin: 0 0 16px; }
/* the numbers are buttons: a click plays that step (each with a 44px tap, drawn at 36) */
.ink-page .home-try .step-dots { gap: 6px; }
.ink-page .home-try .step-dots button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin: 4px; padding: 0; border: 2px solid rgba(42, 34, 48, 0.35); border-radius: 50%; background: var(--paper); box-shadow: 0 2px 0 rgba(42, 34, 48, 0.35); font: 700 16px/1 var(--voice); color: var(--ink2); cursor: pointer; transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.08s; }
.ink-page .home-try .step-dots button::after { content: ""; position: absolute; inset: -6px; }
.ink-page .home-try .step-dots button:hover { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); color: var(--ink); }
.ink-page .home-try .step-dots button:active { transform: translateY(2px); box-shadow: none; }
.ink-page .home-try .step-dots button:focus-visible { outline: 3px solid var(--wall); outline-offset: 2px; }
.ink-page .home-try .step-dots button.past { border-color: var(--ink); color: var(--ink); }
.ink-page .home-try .step-dots button.on { border-color: var(--ink); background: var(--yellow); box-shadow: 0 2px 0 var(--ink); color: var(--ink); }
.ink-page .home-try.touring .step-card { position: relative; z-index: 3; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "num h3" "num p"; column-gap: 14px; align-items: center; overflow: visible; padding: 14px 18px 16px 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--tint-yellow); box-shadow: 0 3px 0 rgba(42, 34, 48, 0.18); text-align: left; transition: top 0.55s cubic-bezier(0.3, 0.9, 0.3, 1), background-color 0.3s; }
.ink-page .home-try .step-card[data-tint="blue"] { background: var(--tint-blue); }
.ink-page .home-try .step-card[data-tint="pink"] { background: var(--tint-pink); }
.ink-page .home-try .step-card[data-tint="peach"] { background: #fcebd3; }
.ink-page .home-try .step-card .num { grid-area: num; position: static; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 700 22px/1 var(--voice); }
.ink-page .home-try .step-card h3 { grid-area: h3; align-self: end; margin: 0; font: 700 22px/1.2 var(--voice); }
.ink-page .home-try .step-card p { grid-area: p; align-self: start; margin: 2px 0 0; font-size: 16px; color: var(--ink2); }
.ink-page .home-try .step-card.swap :is(.num, h3, p) { animation: step-in 0.35s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateX(6px); } }
.ink-page .home-try .step-card .run { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--ink); opacity: 0.25; transform: scaleX(0); transform-origin: left; }
.ink-page .home-try .step-card.swap .run { animation: step-run var(--ms, 0ms) linear both; }
.ink-page .home-try.held .step-card .run { animation-play-state: paused; }
@keyframes step-run { to { transform: scaleX(1); } }
/* its tail, an outlined triangle: pointing left at the phone beside it, or up at it on narrow screens */
.ink-page .home-try .step-card::before, .ink-page .home-try .step-card::after { content: ""; position: absolute; }
@media (min-width: 760px) {
  .ink-page .home-try.touring .demo-wrap { translate: -154px 0; } /* the phone and its card, centred together, */
  .ink-page .home-try.touring .step-card { position: absolute; left: calc(100% - 22px); top: var(--spot, 50%); width: 330px; transform: translateY(-50%); }
  .ink-page .home-try .step-card::before { left: -14px; top: 50%; width: 14px; height: 22px; margin-top: -11px; background: var(--ink); clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  .ink-page .home-try .step-card::after { left: -11px; top: 50%; width: 12px; height: 18px; margin-top: -9px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
}
@media (min-width: 760px) {
  /* the phone's frame keeps 54px under it for its shadow, so the band needs less of its own */
  .ink-page .home-steps:has(.home-try.touring) { padding-bottom: 46px; }
}
@media (min-width: 1100px) {
  .ink-page .home-try.touring .demo-wrap { translate: none; } /* till there's room for the phone centred, its card hanging off it */
}
@media (max-width: 759px) {
  .ink-page .home-try.touring .step-card { width: 100%; max-width: 420px; margin: -30px auto 0; }
  .ink-page .home-try .step-card::before { top: -14px; left: 50%; width: 22px; height: 14px; margin-left: -11px; background: var(--ink); clip-path: polygon(0 100%, 100% 100%, 50% 0); }
  .ink-page .home-try .step-card::after { top: -11px; left: 50%; width: 18px; height: 12px; margin-left: -9px; background: inherit; clip-path: polygon(0 100%, 100% 100%, 50% 0); }
  .ink-page .home-try .step-card h3 { font-size: 20px; }
  .ink-page .home-try .step-card p { font-size: 15px; }
}

/* the real-life cards keep their phones; their titles in Comic Neue */
.ink-page .shot h3 { font-size: calc(24 * var(--k)); }

.ink-page .cm-lists li { padding-block: 8px 9px; }
.ink-page .cm-lists li[data-pp="card"]:not([data-tint]) { background: var(--paper); }

/* ticks: the app's done check, a teal circle */
.ink-page [data-pp="tick"] { position: relative; border: 2px solid var(--ink); border-radius: 50%; background: #00b48e; }
.ink-page [data-pp="tick"]::after { content: ""; position: absolute; left: 50%; top: 44%; width: 40%; height: 20%; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; translate: -50% -50%; rotate: -45deg; }

/* might be for you: the site's sticky notes (pale yellow, the ink edge, a little tilt), Yunka in the sixth spot */
.ink-page .fit-notes > [data-pp="card"] { border: 2px solid var(--ink); border-radius: 4px; background: var(--tint-yellow); box-shadow: 0 3px 0 rgba(42, 34, 48, 0.18); }
.ink-page .fit-notes p { font-size: 21px; }
.ink-page .fit-spot { display: flex; align-items: flex-end; justify-content: center; }
.ink-page .fit-paka { position: static; translate: none; height: 220px; filter: none; }

/* the closing: the yellow tint, running into the footer */
.ink-page .home-closing { padding-top: 96px; background: var(--tint-yellow); }
.ink-page .home-closing::before, .ink-page .home-closing::after { display: none; }
.ink-page .closing .trio img { filter: none; }

@media (max-width: 639px) {
  .ink-page .home-part { padding: 64px var(--gutter) 72px; }
  .ink-page.home .home-companion { padding-bottom: 72px; }
  .ink-page .fit-notes p { font-size: 18px; }
  .ink-page .fit-paka { height: 200px; }
  .ink-page .home-closing { padding-top: 72px; }
}