/* Panopie. The fonts are served from this site, so the page makes no request to another service.
   DM Sans and Gloock: SIL Open Font License 1.1 (fonts/OFL.txt). */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/dm-sans-latin.woff2) format('woff2'); }
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/gloock-latin.woff2) format('woff2'); }

:root {
  --surface: #f7f6f1;
  --rail: #e8e6de;
  --panel: #efede6;
  --ink: #172018;
  --body: #2c332d;
  --muted: #5a5d56;
  --line: #d3d0c7;
  --accent: #a35237;
  --heading: #96472e;
  --gutter: clamp(1.25rem, 4vw, 4.75rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--surface); color: var(--body); font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.0625rem; line-height: 1.65; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: .5rem; background: var(--ink); color: var(--surface); padding: .5rem .8rem; }
.skip:hover { color: var(--surface); }
.skip:focus { left: .5rem; }

.top, main, .foot { width: min(100%, 1560px); margin-inline: auto; }
.top, .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-inline: var(--gutter); }
.top { padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.brand { margin: 0; color: var(--ink); font-family: 'Gloock', Georgia, serif; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.top .brand { font-size: clamp(2rem, 2.8vw, 3rem); }
.brand a { color: inherit; text-decoration: none; }
.status { margin: 0; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

main { padding: 0 var(--gutter); }

/* Headings in the marketplace's accent (a shade deeper for contrast); body text stays dark. */
h1, h2 { color: var(--heading); font-family: 'Gloock', Georgia, serif; font-weight: 400; }
h3 { margin: 0 0 .4rem; color: var(--ink); font-size: 1.08rem; font-weight: 700; line-height: 1.35; }

/* One content measure for single-column text, one for text in columns. */
.hero { max-width: 54rem; padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.eyebrow { margin: 0 0 1rem; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 0 0 1.5rem; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.lead { margin: 0 0 1.1rem; max-width: 38rem; color: var(--ink); font-size: clamp(1.12rem, 2.2vw, 1.32rem); line-height: 1.55; }
.why { margin: 0 0 1.5rem; max-width: 38rem; }
.now { margin: 0 0 2rem; max-width: 38rem; border-top: 1px solid var(--line); padding: 1rem 0 0; color: var(--body); font-size: .98rem; }
.now strong { color: var(--ink); }
.jump { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.jump a { display: inline-flex; align-items: center; min-height: 2.75rem; border: 1px solid var(--ink); padding: 0 1rem; color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease; }
.jump a:hover { background: var(--ink); color: var(--surface); }
@media (prefers-reduced-motion: reduce) { .jump a { transition: none; } }

/* Section rules run the full width; the content inside keeps its measure. */
.block { border-top: 1px solid var(--line); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.block > h2, .block > p, .points, .feature-list { max-width: 60rem; }
.block > p { margin: 0 0 1rem; max-width: 38rem; }
h2 { margin: 0 0 1.75rem; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; }

/* What makes Panopie different: numbered, on a quiet panel, so it reads as the heart of the page. */
.features { border-top: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--panel); }
.features + .block { border-top: 0; }
.feature-list { counter-reset: item; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2rem 3rem; }
.feature-list > li { counter-increment: item; display: grid; grid-template-columns: 3rem 1fr; align-items: first baseline; align-content: start; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.feature-list > li::before { content: counter(item, decimal-leading-zero); content: counter(item, decimal-leading-zero) / ""; grid-row: 1; color: var(--muted); font-family: 'Gloock', Georgia, serif; font-size: 1.35rem; line-height: 1; }
.feature-list > li > * { grid-column: 2; }
.feature-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.feature-list > li p { margin: 0 0 .6rem; max-width: 34rem; }
.feature-list > li:last-child:nth-child(odd) p, .feature-list > li:last-child:nth-child(odd) .facts { max-width: 44rem; }
.feature-list > li p:last-child { margin-bottom: 0; }
.facts { margin: 0 0 .6rem; padding-left: 1.1rem; }
.facts li { margin-bottom: .3rem; }

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; margin: 0; }
.points div { border-top: 1px solid var(--line); padding-top: 1rem; }
.points dt { margin-bottom: .35rem; color: var(--ink); font-weight: 700; }
.points dd { margin: 0; max-width: 34rem; }

.intro { color: var(--ink); }
.block > .note { margin-bottom: 2rem; }
.block .small { margin-top: 2rem; max-width: 38rem; color: var(--muted); font-size: .88rem; }
.small strong { color: var(--ink); }

.foot { border-top: 1px solid var(--line); padding-block: 1.75rem 2.5rem; color: var(--muted); }
.foot .brand { font-size: 1.2rem; }
.foot p { margin: 0; }
.foot a { display: inline-block; padding-block: .6rem; }

.glance { border: 1px solid var(--line); background: var(--panel); padding: 1.5rem 1.6rem; }
.glance h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.glance li { border-top: 1px solid var(--line); padding-top: .8rem; font-size: .95rem; line-height: 1.5; }
.glance li:first-child { border-top: 0; padding-top: 0; }
.glance strong { color: var(--ink); }
.hero > .glance { margin-top: 2.5rem; max-width: 30rem; }

/* Wide screens: the summary sits beside the opening, and each section puts its title on the left and its content
   on the right, so the page uses the width instead of leaving the right side empty. */
@media (min-width: 1000px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem); gap: clamp(3rem, 6vw, 6rem); align-items: start; max-width: none; }
  .hero > .glance { margin-top: 2.6rem; max-width: none; }
  .hero-main .lead, .hero-main .why, .hero-main .now { max-width: 44rem; }
  .glance { padding: 1.8rem 2rem; }
  .glance li { font-size: 1rem; }
  .block { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .block > h2 { grid-column: 1; grid-row: 1 / span 10; margin: 0; }
  .block > :not(h2) { grid-column: 2; max-width: 62rem; }
  .block > p { max-width: 40rem; }
  .features > .feature-list { max-width: 62rem; }
}

@media (max-width: 720px) {
  .top .brand { font-size: clamp(1.6rem, 8.6vw, 2rem); }
  .points { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-list > li { grid-template-columns: 2.6rem 1fr; }
}