/* A public introduction and a short trial. The learning workspace lives in the cabinet. */
.pocket-page {
  --pocket-ink: #2f1b0e;
  --pocket-muted: #573d2c;
  --pocket-paper: #fffaf5;
  --pocket-peach: #eed1c0;
  --pocket-gutter: max(36px, calc((100% - 1200px) / 2));
  color: var(--pocket-ink);
  background: var(--pocket-paper);
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1.7;
}
.pocket-page *, .pocket-page *::before, .pocket-page *::after { box-sizing: border-box; }
.pocket-page ::selection { background: #b87c54; color: #fffaf5; }
.pocket-page :is(h1,h2,h3,p,figure,ol,ul) { margin: 0; }
.pocket-page :is(h1,h2,h3) { text-wrap: balance; }
.pocket-page :is(h1,h2) { font: italic 800 clamp(42px, 4.5vw, 62px)/1.07 'Roboto Condensed', sans-serif; letter-spacing: -.025em; text-transform: uppercase; }
.pocket-page h3 { font: 700 22px/1.3 'Manrope', sans-serif; letter-spacing: -.02em; text-transform: none; }
.pocket-page .button { min-height: 54px; padding: 15px 26px; font-size: 16px; line-height: 1.4; gap: 15px; text-align: center; white-space: normal; }
.pocket-page .button.primary { background: var(--pocket-ink); color: var(--pocket-paper); }
.pocket-page :is(a,button,summary):focus-visible { outline: 3px solid #9b552a; outline-offset: 5px; }
.pocket-page .icon { flex: 0 0 22px; width: 22px; height: 22px; }
.pocket-page :is(#pocket-demo,#pocket-offer) { scroll-margin-top: 126px; }
.pocket-text-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 16px; font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pocket-text-link:hover { text-decoration-thickness: 2px; }

.pocket-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 30px; padding: 82px var(--pocket-gutter) 90px; background: #f3e5d4 url('assets/paper-backdrop.png') center/cover no-repeat; }
.pocket-hero-copy { position: relative; z-index: 1; min-width: 0; }
.pocket-page .pocket-hero h1 { display: inline-block; padding: 17px 28px 21px; max-width: 100%; color: var(--pocket-paper); background: var(--pocket-ink); font-size: clamp(52px, 5.7vw, 82px); line-height: .99; transform: rotate(-1.5deg); box-shadow: 3px 12px 24px rgb(56 31 15 / 18%); }
.pocket-signature { padding: 14px 0 0 25px; font: italic 29px/1.35 'PT Serif', serif; color: #603b25; }
.pocket-hero-reading { margin-top: 30px; padding: 28px 30px; background: var(--pocket-paper); border-radius: 12px; }
.pocket-page .pocket-hero-lead { max-width: 28ch; font-size: 25px; line-height: 1.45; font-weight: 700; }
.pocket-page .pocket-hero-description { margin-top: 15px; max-width: 51ch; color: var(--pocket-muted); }
.pocket-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; margin-top: 28px; }
.pocket-page .pocket-launch-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid #dbc8b5; max-width: 58ch; font-size: 15px; line-height: 1.65; color: #604936; }
.pocket-hero-object { position: relative; align-self: center; width: 110%; margin-left: -4%; padding-bottom: 28px; }
.pocket-hero-object img { display: block; width: 100%; height: auto; filter: drop-shadow(6px 18px 13px rgb(69 38 19 / 13%)); }
.pocket-hero-object figcaption { position: relative; width: fit-content; max-width: 82%; margin: -33px auto 0; padding: 16px 23px 20px; background: var(--pocket-paper); font: italic 700 27px/1.2 'Roboto Condensed', sans-serif; transform: rotate(4deg); box-shadow: 3px 12px 20px rgb(69 38 19 / 17%); }
.pocket-hero-object figcaption::before { content: ''; position: absolute; width: 68px; height: 20px; background: #bd8d6a; opacity: .65; top: -12px; left: 42%; transform: rotate(-5deg); }

.pocket-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 85px; padding: 76px var(--pocket-gutter); background: var(--pocket-ink); color: var(--pocket-paper); }
.pocket-page .pocket-method :is(h2,h3) { color: var(--pocket-paper); }
.pocket-method-intro p { margin-top: 25px; max-width: 44ch; color: #e6cdb9; }
.pocket-method-steps { list-style: none; display: grid; align-content: start; padding: 0; }
.pocket-method-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 15px; padding-block: 21px; border-bottom: 1px solid #785741; }
.pocket-method-steps li:first-child { padding-top: 0; }
.pocket-method-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.pocket-method-steps li>span { font: italic 800 28px/1.1 'Roboto Condensed', sans-serif; color: #dba985; }
.pocket-method-steps p { margin-top: 6px; color: #e6cdb9; font-size: 16px; line-height: 1.6; }

.pocket-demo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 70px; padding: 98px var(--pocket-gutter); }
.pocket-demo-intro > p { margin-top: 24px; color: var(--pocket-muted); max-width: 42ch; }
.pocket-demo-intro .pocket-demo-disclosure { margin-top: 27px; font-size: 17px; line-height: 1.65; }
.pocket-exercise { padding: 33px 35px 35px; background: #f3e3d4; border-radius: 12px; box-shadow: 4px 16px 28px rgb(62 36 18 / 9%); min-width: 0; }
.pocket-example-progress { margin-bottom: 17px; color: #573d2c; font-size: 17px; line-height: 1.5; }
.pocket-exercise-heading { color: var(--pocket-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 20px; line-height: 1.5; }
.pocket-exercise-heading > span { padding: 5px 12px; background: #fffaf5; font-weight: 700; font-size: 17px; border-radius: 5px; }
.pocket-page .pocket-exercise-sentence { margin-top: 25px; color: var(--pocket-ink); font: 28px/1.55 'PT Serif', serif; }
.pocket-exercise-sentence > span { white-space: nowrap; color: #704225; }
.pocket-hint-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; margin: 12px 0 20px; background: none; border: 0; color: #57351e; font: 600 18px/1.4 'Manrope', sans-serif; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.pocket-hint-button:hover { color: var(--pocket-ink); }
.pocket-answer-options { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.pocket-answer { min-height: 56px; padding: 14px; border: 1px solid #af8b6e; border-radius: 9px; background: #fffaf5; color: var(--pocket-ink); text-align: left; font: 700 20px/1.4 'Manrope', sans-serif; cursor: pointer; }
.pocket-answer:hover, .pocket-answer[aria-pressed='true'] { color: #fffaf5; background: #593923; border-color: #593923; }
.pocket-feedback { margin-top: 24px; padding-top: 24px; border-top: 1px solid #b49377; color: var(--pocket-ink); font-size: 16px; line-height: 1.7; }
.pocket-feedback > strong { display: block; font-size: 18px; line-height: 1.5; }
.pocket-feedback p { margin-top: 12px; }
.pocket-feedback > span { display: block; margin-top: 15px; color: #573d2c; font-size: 17px; }
.pocket-feedback .pocket-completed-sentence { padding: 13px 17px; background: #fffaf5; border-radius: 6px; font-family: 'PT Serif', serif; font-size: 23px; }
.pocket-next-example { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 52px; padding: 14px 0 0; margin-top: 23px; border: 0; border-top: 1px solid #b49377; background: transparent; color: var(--pocket-ink); font: 700 17px/1.5 Manrope, sans-serif; text-align: left; cursor: pointer; }
.pocket-next-example:hover { text-decoration: underline; text-underline-offset: 5px; }
.pocket-demo-error { margin-top: 20px; color: #7b3021; font-size: 16px; }

.pocket-offer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 75px; padding: 85px var(--pocket-gutter); background: var(--pocket-peach); }
.pocket-offer-copy > p { max-width: 50ch; margin-top: 25px; color: var(--pocket-muted); }
.pocket-offer-includes { list-style: none; display: grid; gap: 11px; padding: 0; margin-top: 26px !important; }
.pocket-offer-includes li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.pocket-offer-includes .icon { color: #7d4c2b; }
.pocket-offer-copy .pocket-offer-availability { font-size: 15px; line-height: 1.7; max-width: 58ch; }
.pocket-price-sheet { padding: 34px 34px 28px; background: #fffaf5; border-radius: 12px; box-shadow: 5px 17px 27px rgb(77 42 21 / 12%); }
.pocket-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 15px; margin-top: 17px !important; font-variant-numeric: tabular-nums; }
.pocket-price strong { font: italic 800 72px/1.15 'Roboto Condensed', sans-serif; letter-spacing: -.025em; white-space: nowrap; }
.pocket-price span { font-size: 17px; color: var(--pocket-muted); }
.pocket-price-sheet > p:not(.pocket-price) { color: var(--pocket-muted); font-size: 14px; margin-top: 8px; }
.pocket-price-sheet > .button { display: flex; width: 100%; margin-top: 25px; }
.pocket-student-gift { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 26px; padding-top: 25px; border-top: 1px solid #d8c0aa; }
.pocket-student-gift img { width: 84px; height: auto; margin-left: -8px; }
.pocket-student-gift strong { display: block; font-size: 16px; line-height: 1.5; }
.pocket-student-gift span { display: block; color: var(--pocket-muted); margin-top: 5px; font-size: 15px; line-height: 1.65; }
.pocket-cabinet-link { margin-top: 19px; font-size: 14px; }

.pocket-faq { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 65px; padding: 85px var(--pocket-gutter) 95px; }
.pocket-faq-items details { border-bottom: 1px solid #d8c0aa; padding-block: 22px; }
.pocket-faq-items details:first-child { padding-top: 0; }
.pocket-faq-items summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; font-size: 19px; font-weight: 700; line-height: 1.5; list-style: none; cursor: pointer; }
.pocket-faq-items summary::-webkit-details-marker { display: none; }
.pocket-faq-items summary .icon { transform: rotate(90deg); }
.pocket-faq-items details[open] summary .icon { transform: rotate(-90deg); }
.pocket-faq-items details > p { margin-top: 18px; color: var(--pocket-muted); font-size: 16px; }
.pocket-faq-items details > a { margin-top: 12px; }

@media (max-width: 1000px) {
  .pocket-page { --pocket-gutter: 30px; }
  .pocket-hero { gap: 12px; padding-block: 65px; }
  .pocket-page .pocket-hero h1 { font-size: clamp(47px, 6.4vw, 70px); padding-inline: 22px; }
  .pocket-signature { font-size: 25px; padding-left: 10px; }
  .pocket-page .pocket-hero-lead { font-size: 22px; }
  .pocket-hero-object { width: 110%; }
  .pocket-hero-object figcaption { font-size: 23px; }
  .pocket-method, .pocket-demo, .pocket-offer { gap: 40px; }
  .pocket-demo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .pocket-exercise, .pocket-price-sheet { padding: 27px; }
  .pocket-faq { grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); gap: 30px; }
}
@media (max-width: 760px) {
  .pocket-hero { grid-template-columns: 1fr; gap: 30px; padding-bottom: 50px; }
  .pocket-hero-copy { max-width: 580px; }
  .pocket-page .pocket-hero h1 { font-size: clamp(52px, 10vw, 76px); }
  .pocket-hero-object { width: min(100%, 420px); justify-self: center; margin-left: 0; }
  .pocket-method, .pocket-demo, .pocket-offer, .pocket-faq { grid-template-columns: 1fr; gap: 35px; padding-block: 60px; }
  .pocket-method-steps { max-width: 580px; }
  .pocket-demo-intro { max-width: 550px; }
  .pocket-demo-intro > p { max-width: none; }
  .pocket-demo-intro .pocket-demo-disclosure { margin-top: 16px; }
  .pocket-offer { align-items: start; }
  .pocket-price-sheet { width: 100%; max-width: 550px; }
}
@media (max-width: 480px) {
  .pocket-page { --pocket-gutter: 22px; font-size: 16px; }
  .pocket-page :is(h1,h2) { font-size: clamp(35px, 9.5vw, 44px); }
  .pocket-page h3 { font-size: 20px; }
  .pocket-hero { padding-top: 40px; gap: 28px; }
  .pocket-page .pocket-hero h1 { font-size: clamp(43px, 12vw, 58px); padding: 15px 20px 18px; }
  .pocket-signature { padding-top: 15px; padding-left: 4px; font-size: 23px; }
  .pocket-hero-reading { margin-top: 26px; padding: 22px 20px 24px; }
  .pocket-page .pocket-hero-lead { font-size: 22px; }
  .pocket-actions { display: grid; gap: 10px; margin-top: 24px; }
  .pocket-actions .button { width: 100%; }
  .pocket-actions .pocket-text-link { justify-content: center; }
  .pocket-page .pocket-launch-note { margin-top: 16px; font-size: 15px; }
  .pocket-hero-object { width: min(100%, 330px); padding-bottom: 14px; }
  .pocket-hero-object figcaption { font-size: 23px; margin-top: -20px; padding: 14px 20px 16px; }
  .pocket-method, .pocket-demo, .pocket-offer, .pocket-faq { padding-block: 49px; gap: 29px; }
  .pocket-method-intro p, .pocket-demo-intro > p, .pocket-offer-copy > p { margin-top: 20px; }
  .pocket-method-steps li { grid-template-columns: 25px minmax(0,1fr); gap: 12px; padding-block: 18px; }
  .pocket-exercise { padding: 24px 21px; }
  .pocket-exercise-heading { font-size: 18px; }
  .pocket-example-progress, .pocket-exercise-heading > span { font-size: 16px; }
  .pocket-page .pocket-exercise-sentence { font-size: 23px; margin-top: 22px; }
  .pocket-answer { font-size: 18px; padding-inline: 10px; }
  .pocket-feedback { font-size: 16px; }
  .pocket-feedback > span, .pocket-demo-intro .pocket-demo-disclosure { font-size: 16px; }
  .pocket-feedback .pocket-completed-sentence { font-size: 21px; padding-inline: 12px; }
  .pocket-price-sheet { padding: 27px 23px 23px; }
  .pocket-price strong { font-size: 65px; }
  .pocket-page .button { font-size: 15px; padding-inline: 20px; }
  .pocket-student-gift { grid-template-columns: 65px minmax(0,1fr); gap: 10px; }
  .pocket-student-gift img { width: 75px; }
  .pocket-faq-items summary { font-size: 17px; gap: 12px; }
  .pocket-faq-items details > p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .pocket-page *, .pocket-page *::before, .pocket-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

@media(min-width:900px){
 .pocket-page{font-size:20px}
 .pocket-page .pocket-launch-note,.pocket-demo-intro .pocket-demo-disclosure,.pocket-offer-copy .pocket-offer-availability,.pocket-price-sheet>p:not(.pocket-price),.pocket-student-gift span{font-size:17px}
 .pocket-method-steps p,.pocket-faq-items details>p,.pocket-feedback{font-size:19px}
}