/* ============================================================
   Showcase pages (free-crochet-app, pattern-scanner).

   Wider than the doc template: a hero with phone frames, card grids,
   alternating screenshot rows and a closing band. Built on page.css for
   the body and back pill; every colour is an app.css token, so both
   themes come for free. Screenshots come in light/dark pairs.
   ============================================================ */
  /* ------------------------------------------------------------------
     A showcase page rather than a doc page: it borrows page.css for the
     body and the back pill, and lays out its own wider column. Every
     colour is a token from app.css, so both themes come for free.
     ------------------------------------------------------------------ */
  body { padding: 0 20px; }
  .lp { max-width: 1080px; margin: 0 auto; }
  .lp a { color: var(--lil-deep); text-underline-offset: 3px; }
  .lp p { margin: 0 0 14px; line-height: 1.65; }
  .lp h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 12px; }
  .lp h3 { font-size: 18px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.01em; }
  .lp section { padding: 64px 0; }
  .eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lil-deep); margin-bottom: 10px; }
  .intro { max-width: 640px; margin: 0 auto 34px; text-align: center; }
  .intro p { color: var(--muted); font-size: 16px; }

  /* The screenshots come in a light and a dark pair; the theme picks one. */
  [data-theme="dark"] .shot-l, :root:not([data-theme="dark"]) .shot-d { display: none; }

  .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .ic-disc { width: 46px; height: 46px; border-radius: 50%; background: var(--lils); color: var(--lil-deep); display: inline-flex; align-items: center; justify-content: center; flex: none; }

  /* Buttons */
  /* The two ways in, as a matched pair of choice cards. The whole card is
     the link; "How it works" is a second, smaller link inside the scanner
     card, lifted above the card's own hit area. */
  .paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 470px; margin: 30px 0 24px; }
  .path { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; column-gap: 14px; row-gap: 3px; align-items: center; padding: 18px 18px 18px 16px; border-radius: var(--r-lg); background: var(--surf); box-shadow: inset 0 0 0 1.5px var(--line), var(--sh); transition: transform .15s ease, box-shadow .15s ease; }
  .path:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--lil), var(--sh2); }
  .path .ic-disc { width: 44px; height: 44px; grid-row: 1 / span 2; }
  .path .ic-disc .ic { width: 21px; height: 21px; }
  .lp a.path-go { color: var(--text); font-weight: 700; font-size: 15.5px; line-height: 1.3; text-decoration: none; }
  .lp a.path-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .path .sub { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--muted); }
  .path > .go-ic { grid-column: 3; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--lil-deep); stroke-width: 2; }
  .lp .path a.how { position: relative; z-index: 1; font-weight: 700; white-space: nowrap; }
  .path.primary { background: var(--lil); box-shadow: var(--sh); }
  .path.primary:hover { box-shadow: var(--sh2); }
  .path.primary .ic-disc { background: var(--surf); }
  .lp .path.primary a.path-go, .path.primary .sub, .path.primary > .go-ic { color: var(--on-lil); }
  .path:focus-within { outline: 2px solid var(--lil-deep); outline-offset: 3px; }
  .lp a.path-go:focus-visible { outline: none; }
  @media (prefers-reduced-motion: reduce) { .path { transition: none; } .path:hover { transform: none; } }

  /* Top bar */
  .lp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; }
  .lp-top .doc-back { margin: 0; }
  .lp-top .end { display: flex; align-items: center; gap: 10px; }
  .theme-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surf); color: var(--lil-deep); box-shadow: var(--sh); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease; }
  .theme-btn:hover { transform: rotate(-12deg); box-shadow: var(--sh2); }
  .theme-btn .ic { width: 20px; height: 20px; }
  [data-theme="dark"] .theme-btn .moon, :root:not([data-theme="dark"]) .theme-btn .sun { display: none; }
  .lp-top .open { font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

  /* Hero */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding: 44px 0 56px; }
  .hero h1 { font-size: clamp(34px, 5.6vw, 54px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; }
  .hero .lead { font-size: 17px; line-height: 1.65; color: var(--text); max-width: 540px; }
  .hero .lead strong { font-weight: 700; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
  .chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
  .chips .ic { width: 17px; height: 17px; color: var(--sage-deep); stroke-width: 2.2; }
  .stamp-lp { display: block; margin-top: 18px; font-size: 12.5px; color: var(--muted); }

  .hero-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
  .hero-art .halo { position: absolute; width: min(460px, 92%); aspect-ratio: 1; border-radius: 50%; background: var(--lils); }
  .hero-art .stitch-ring { position: absolute; width: min(520px, 104%); aspect-ratio: 1; fill: none; stroke: var(--lil); stroke-width: 1.4; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .7; }

  .phone { position: relative; width: 260px; padding: 8px; border-radius: 40px; background: var(--surf); box-shadow: var(--sh2), 0 0 0 1px var(--line); }
  .phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 32px; }
  .hero-art .phone.front { z-index: 2; transform: translateX(46px) rotate(3deg); }
  .hero-art .phone.back { position: absolute; z-index: 1; width: 230px; transform: translateX(-92px) translateY(18px) rotate(-6deg); }

  /* Feature cards */
  .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .features li { background: var(--surf); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 24px; }
  .features h3 { margin: 16px 0 6px; font-size: 17px; }
  .features p { margin: 0; font-size: 14.5px; color: var(--muted); }

  /* How-to steps: a screenshot beside each one, sides alternating */
  .steps { display: flex; flex-direction: column; gap: 36px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: step; }
  .step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; counter-increment: step; }
  .step .art { display: flex; justify-content: center; position: relative; }
  .step .art::before { content: ""; position: absolute; top: 50%; left: 50%; width: 340px; max-width: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lils); }
  .step .phone { width: 236px; }
  .step .num { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lil-deep); }
  .step .num::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lil); color: var(--on-lil); font-size: 14px; letter-spacing: 0; }
  .step p { font-size: 15.5px; max-width: 460px; }
  .step code { font-family: var(--mono); font-size: 13px; background: var(--surf2); border-radius: 6px; padding: 1px 6px; }
  .step .more { font-weight: 600; font-size: 14.5px; }

  /* Starter patterns */
  .pat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
  .pat-card { background: var(--surf); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
  .pat-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
  .pat-card .bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
  .pat-card .nm { font-weight: 700; font-size: 16px; }
  .pat-card .tg { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
  .pat-card .acts { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .lp .pat-card a.go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 99px; background: var(--lils); color: var(--lil-deep); font-weight: 700; font-size: 13.5px; text-decoration: none; }
  .pat-card a.rd { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; min-height: 40px; }
  .lp .after-grid { text-align: center; margin: 28px 0 0; color: var(--muted); }

  /* The free / honesty part, kept as reading text */
  .free { border-top: 1px solid var(--line); }
  .read { max-width: 680px; margin: 0 auto; }
  .read p { font-size: 15.5px; }
  .read h2 { margin-top: 8px; }
  .avoid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; }
  .avoid li { background: var(--surf); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 22px 24px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
  .avoid li strong { display: block; margin: 14px 0 4px; color: var(--text); font-size: 16px; }
  .pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pair > div { background: var(--surf); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 28px; }
  .pair h2 { font-size: 22px; display: flex; align-items: center; gap: 14px; }
  .pair p { font-size: 15px; margin: 0; }

  /* Closing band */
  .closing { text-align: center; background: var(--lils); border-radius: 30px; padding: 52px 24px; margin: 8px 0 0; }
  .closing p { color: var(--muted); max-width: 480px; margin: 0 auto; }
  .closing .paths { margin: 26px auto 0; text-align: left; }
  @media (min-width: 860px) { .closing .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }

  .lp-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 34px 0 60px; font-size: 13px; color: var(--muted); }
  .lp-foot a { display: inline-flex; align-items: center; min-height: 32px; }

  @media (min-width: 860px) {
    .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding-top: 56px; }
    .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
    .step:nth-child(even) .art { order: 2; }
    .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .avoid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .step { gap: 72px; }
    .step > div:last-child { max-width: 440px; }
    .step:nth-child(odd) > div:last-child { justify-self: start; }
    .step:nth-child(even) > div:last-child { justify-self: end; }
  }
  @media (max-width: 859px) {
    .hero-art { min-height: 470px; }
  }
  @media (max-width: 520px) {
    .lp section { padding: 48px 0; }
    .hero { padding-top: 30px; }
    .hero .lead { font-size: 16px; }
    .hero-art { min-height: 420px; }
    .phone { width: 220px; border-radius: 36px; }
    .phone img { border-radius: 29px; }
    .hero-art .phone.front { width: 210px; transform: translateX(30px) rotate(3deg); }
    .hero-art .phone.back { width: 170px; transform: translateX(-62px) translateY(16px) rotate(-6deg); }
    .features li, .avoid li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 20px; }
    .features h3 { margin: 0; }
    .features p { grid-column: 1 / -1; margin-top: 10px; }
    .avoid li { display: block; }
    .step .phone { width: 210px; }
    .pat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pat-card .bd { padding: 12px; }
    .pat-card .tg { margin-bottom: 8px; }
    .lp .pat-card a.go { padding: 0 12px; font-size: 13px; width: 100%; justify-content: center; }
    .pat-card .acts { justify-content: center; }
    .lp-top .open { display: none; }
  }
  @media (hover: none) and (pointer: coarse) {
    .lp .path a.how { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
    .lp .pat-card a.go, .pat-card a.rd { min-height: 44px; }
    .lp-foot a { min-height: 44px; }
  }

  /* ---------------------------------------------------------- motion
     Hover: cards lift. Scroll: blocks rise into view as they arrive. The
     reveal uses the separate `translate` property so it never fights a
     card's hover `transform`; it only hides anything once the script below
     has run, and none of it happens under reduced motion. */
  .features li, .avoid li, .pat-card, .pair > div, .step .phone { transition: transform .22s ease, box-shadow .22s ease; }
  .features li:hover, .avoid li:hover, .pat-card:hover, .pair > div:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
  .features .ic-disc, .avoid .ic-disc, .pair .ic-disc { transition: background-color .22s ease, color .22s ease, transform .22s ease; }
  .features li:hover .ic-disc, .avoid li:hover .ic-disc, .pair > div:hover .ic-disc { background: var(--lil); color: var(--on-lil); transform: scale(1.06); }
  .pat-card img { transition: transform .5s ease; }
  .pat-card:hover img { transform: scale(1.05); }
  .step .art:hover .phone { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(59, 53, 64, .16), 0 0 0 1px var(--line); }

  @keyframes rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
  .hero-art .phone.front { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .hero-art .phone.back { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .hero-art .halo, .hero-art .stitch-ring { animation: fade 1.1s ease both; }

  .reveal-on .rv { opacity: 0; translate: 0 26px;
    transition: opacity .7s ease var(--d, 0s), translate .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .22s ease, box-shadow .22s ease; }
  .reveal-on .rv.in { opacity: 1; translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .features li, .avoid li, .pat-card, .pair > div, .step .phone, .pat-card img, .ic-disc, .theme-btn { transition: none; }
    .theme-btn:hover { transform: none; }
    .features li:hover, .avoid li:hover, .pat-card:hover, .pair > div:hover, .pat-card:hover img, .step .art:hover .phone { transform: none; }
    .hero-art .phone, .hero-art .halo, .hero-art .stitch-ring { animation: none; }
  }

/* ---------------------------------------------------- pattern scanner */
.code-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.code-chips li { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--surf2); border-radius: 8px; padding: 3px 8px; }
.features li .code-chips li { padding: 3px 8px; box-shadow: none; }

.example { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.ex-card { background: var(--surf); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 20px 22px; overflow-x: auto; }
.ex-card .cap { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lil-deep); margin-bottom: 14px; }
.ex-card .cap .ic { width: 17px; height: 17px; }
.ex-card pre { margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.85; white-space: pre; color: var(--text); }
.ex-card pre mark { background: var(--ambers); color: var(--amber-deep); border-radius: 4px; padding: 0 3px; }
.ex-rows { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin: -8px 0; font-size: 14px; }
.ex-rows td { padding: 11px 10px; background: var(--surf2); vertical-align: middle; }
.ex-rows td:first-child { border-radius: 14px 0 0 14px; padding-left: 14px; }
.ex-rows td:last-child { border-radius: 0 14px 14px 0; padding-right: 14px; }
.ex-rows .n { color: var(--muted); font-weight: 700; width: 40px; white-space: nowrap; }
.ex-rows .c { font-family: var(--mono); font-size: 12.5px; background: var(--surf); border-radius: 99px; padding: 2px 9px; }
.ex-rows .flag { color: var(--amber-deep); font-size: 12.5px; font-weight: 600; }
.ex-rows tr.bad td { background: var(--ambers); box-shadow: inset 0 1.5px 0 var(--amber), inset 0 -1.5px 0 var(--amber); }
.ex-rows tr.bad td:first-child { box-shadow: inset 1.5px 1.5px 0 var(--amber), inset 0 -1.5px 0 var(--amber); }
.ex-rows tr.bad td:last-child { box-shadow: inset -1.5px 1.5px 0 var(--amber), inset 0 -1.5px 0 var(--amber); }
.ex-rows tr.bad .c { background: var(--surf); }
.example-note { max-width: 680px; margin: 26px auto 0; }
.example-note p { font-size: 15.5px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
.split p { font-size: 15.5px; }
.try { display: flex; gap: 14px; align-items: flex-start; background: var(--lils); border-radius: var(--r-md); padding: 16px 18px; margin-top: 18px; font-size: 14.5px; line-height: 1.55; }
.try .ic-disc { background: var(--surf); width: 40px; height: 40px; }
.try p { margin: 0; font-size: 14.5px; }
.ocr-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 500px; }
.ocr-art .paper { position: absolute; left: 0; top: 8%; width: 74%; height: auto; border-radius: 8px; box-shadow: var(--sh2), 0 0 0 1px var(--line); transform: rotate(-3deg); }
.ocr-art .phone { position: relative; z-index: 2; margin-left: 46%; margin-top: 70px; transform: rotate(2deg); width: 230px; }
.ocr-art .arrow { position: absolute; left: 41%; top: 44%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: var(--lil); color: var(--on-lil); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh2); }
.ocr-art .arrow .ic { width: 20px; height: 20px; stroke-width: 2; }
.caption { font-size: 13px; color: var(--muted); text-align: center; margin: 14px auto 0; max-width: 460px; line-height: 1.55; }

@media (min-width: 860px) {
  .example { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; }
}
@media (max-width: 520px) {
  .ocr-art { min-height: 400px; }
  .ocr-art .phone { width: 180px; margin-left: 42%; margin-top: 60px; }
  .ocr-art .paper { width: 80%; left: 0; top: 4%; }
  .ocr-art .arrow { left: 34%; top: 40%; }
  .ex-card { padding: 16px; }
  .ex-rows { font-size: 13px; }
}