/* Shopify analytics landing page (2026-11-05). Direction "the printed
   annual": a report on the store's own paid orders. Uses the site tokens
   from styles.css and home.css only; the layout is this page's own. */

.sa { --axis: 34%; --cols: repeat(12, minmax(0, 1fr)); --cg: 24px; }
.sa main { overflow-x: clip; }
.sa .sa-h2 { font-size: clamp(48px, 6.4vw, 104px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 700; margin: 0; text-wrap: balance; }
.sa .sa-h3 { text-wrap: balance; font-size: clamp(32px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; margin: 0; }

/* ---------- Hero: narrow talk, wide headline ---------- */
.sa-hero { display: grid; grid-template-columns: var(--axis) 1fr; min-height: 100svh; padding-top: 112px !important; overflow: hidden; }
.sa-talk { padding-top: 26svh; padding-right: 40px; }
.sa-lede { font-size: var(--t-m); line-height: 1.35; max-width: 24ch; margin: 0 0 32px; color: var(--ink); }
.sa-go { border-radius: var(--radius-ctl); }
.sa-small { font-size: var(--t-xs); color: var(--ink-2); margin: 16px 0 0; max-width: 30ch; }
.sa-wide { min-width: 0; display: flex; flex-direction: column; }
.sa-mast { text-wrap: balance; font-size: clamp(88px, 9.8vw, 150px); line-height: 0.86; letter-spacing: -0.045em; font-weight: 800; margin: 4svh 0 0; }
.sa-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.sa-line > span { display: block; }
.motion .sa-line > span { animation: sa-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.motion .sa-line + .sa-line > span { animation-delay: 110ms; }
.motion .sa-talk > * { animation: sa-fade 600ms var(--out) 520ms both; }
@keyframes sa-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sa-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sa-shot { margin: auto 0 0; position: relative; padding-top: 70px; }
.sa-shot img { display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0; max-height: 46svh; object-fit: cover; object-position: top left; }
.sa-figure { position: absolute; top: 0; left: 0; z-index: 1; width: 260px; padding: 20px 22px; background: var(--acc); color: var(--acc-ink); border-radius: 14px; }
.sa-figure strong { display: block; font-size: 40px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sa-figure span { display: block; font-size: var(--t-xs); line-height: 1.35; margin-top: 8px; }

/* ---------- How it works: the stages as one bar ---------- */
.sa-how .sa-h2 { margin-bottom: 64px; }
.sa-bar { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.sa-seg { min-width: 12%; }
.sa-seg-1 { flex: 12 1 0; } .sa-seg-2 { flex: 30 1 0; } .sa-seg-3 { flex: 58 1 0; }
.sa-dur { display: flex; align-items: flex-start; height: 22vh; min-height: 150px; padding: 20px; border-radius: 14px; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
.sa-seg-1 .sa-dur { background: var(--s2); }
.sa-seg-2 .sa-dur { background: #2a2a31; }
.sa-seg-3 .sa-dur { background: var(--acc); color: var(--acc-ink); }
.sa-seg p { margin: 16px 0 0; font-size: var(--t-s); line-height: 1.45; max-width: 26ch; color: var(--ink); }

/* ---------- Reports: output index, live sheet ---------- */
.sa-out { display: grid; grid-template-columns: var(--cols); column-gap: var(--cg); align-items: start; }
.sa-names { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 72px; }
.sa-names button { touch-action: manipulation; font: inherit; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; color: var(--ink-3); background: none; border: 0; padding: 4px 0; text-align: left; cursor: pointer; transition: color 200ms var(--out); }
.sa-names button:hover { color: var(--ink-2); }
.sa-names button[aria-pressed="true"] { color: var(--ink); }
.sa-names button[aria-pressed="true"]::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.3em; border-radius: 50%; background: var(--acc); vertical-align: 0.18em; }
.sa-names button:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.sa-stage { grid-column: 7 / 13; position: relative; height: 88svh; min-height: 640px; max-height: 860px; background: var(--s1); border-radius: 14px; overflow: hidden; }
.sa-sheet { position: absolute; top: 72px; left: 64px; width: min(560px, calc(100% - 96px)); padding: 36px 40px 40px; background: var(--ink); color: var(--bg); border-radius: 6px; font-size: 16px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 120ms var(--out), transform 120ms var(--out), visibility 0s 120ms; }
.sa-sheet.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms var(--out) 120ms, transform 350ms var(--out) 120ms, visibility 0s; }
.sa-sheet.sa-mail { width: min(440px, calc(100% - 96px)); }
.sa-sheet header { margin-bottom: 24px; }
.sa-from { margin: 0; font-size: 15px; font-weight: 600; }
.sa-from em { font-style: normal; font-weight: 400; color: #55555e; margin-left: 6px; }
.sa-sheet h3 { margin: 18px 0 4px; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 650; }
.sa-when { margin: 0; color: #55555e; font-size: 15px; }
.sa-sheet table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sa-sheet th, .sa-sheet td { padding: 10px 0; text-align: right; font-weight: 400; border-bottom: 1px solid #d9d9de; }
.sa-sheet th:first-child { text-align: left; }
.sa-sheet thead th { font-size: 15px; color: #55555e; }
.sa-sheet tfoot th, .sa-sheet tfoot td { font-weight: 650; border-bottom: 0; }
.sa-foot { margin: 20px 0 0; font-size: 15px; color: #55555e; }
.sa-path { list-style: none; margin: 0; padding: 0; }
.sa-path li { display: grid; grid-template-columns: 9.5em 1fr; column-gap: 16px; padding: 12px 0; border-bottom: 1px solid #d9d9de; } /* taste-skill-ignore: rows inside a data-ui sheet */
.sa-path time { color: #55555e; font-size: 15px; grid-row: span 2; }
.sa-path b { font-weight: 650; }
.sa-path span { color: #33333a; }
.sa-week { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.sa-week dt { font-size: 15px; color: #55555e; }
.sa-week dd { margin: 4px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sa-week small { display: block; font-size: 15px; font-weight: 400; color: #55555e; letter-spacing: 0; }
.sa-gap { margin: 24px 0 0; padding: 16px 18px; background: #e4e4e8; border-radius: 6px; }
.no-js .sa-sheet, html:not(.js) .sa-sheet { position: relative; top: auto; left: auto; opacity: 1; visibility: visible; transform: none; margin: 24px; }
html:not(.js) .sa-stage { height: auto; max-height: none; }

/* ---------- Claims: recognition as a table ---------- */
.sa-claims { display: grid; grid-template-columns: var(--cols); column-gap: var(--cg); }
.sa-step { grid-column: 1 / 9; }
.sa-step span { display: block; }
.sa-step span + span { padding-left: calc(200% / 12); }
.sa-note { grid-column: 9 / 13; align-self: end; margin: 0; font-size: var(--t-s); line-height: 1.5; max-width: 40ch; }
.sa-table-wrap { grid-column: 1 / 13; margin-top: 72px; overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.sa-table th, .sa-table td { padding: 14px 16px; text-align: right; font-weight: 400; }
.sa-table th:first-child { text-align: left; }
.sa-table thead th { color: var(--ink-2); font-size: var(--t-xs); }
.sa-table tbody tr:nth-child(odd) { background: var(--s1); }
.sa-table td:nth-child(3), .sa-table td:nth-child(5) { color: var(--acc); }
.sa-table tfoot th, .sa-table tfoot td { font-weight: 650; padding-top: 22px; }
.sa-after { grid-column: 1 / 7; align-self: start; margin: 40px 0 0; font-size: var(--t-m); line-height: 1.4; max-width: 44ch; }

/* ---------- AI assistant: panel with margin notes ---------- */
.sa-ai { display: grid; grid-template-columns: var(--cols); column-gap: var(--cg); align-items: start; }
.sa-ai .sa-h3 { grid-column: 1 / 5; grid-row: 1; text-align: right; }
.sa-notes { grid-row: 1; display: flex; flex-direction: column; gap: 96px; }
.sa-notes-l { grid-column: 1 / 5; text-align: right; align-items: flex-end; padding-top: 120px; }
.sa-notes-r { grid-column: 9 / 13; padding-top: 150px; }
.sa-notes p { margin: 0; max-width: 26ch; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); cursor: default; transition: color 200ms var(--out); }
.sa-notes b { display: block; font-size: 18px; font-weight: 550; color: var(--ink); margin-bottom: 4px; }
.sa-notes p.is-lit { color: var(--ink); }
.sa-chat { grid-column: 5 / 9; grid-row: 1; justify-self: center; width: 100%; max-width: 400px; min-height: 0; padding: 22px; background: var(--s1); border-radius: 14px; display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.5; }
.sa-chat [data-part] { border-radius: 10px; outline: 2px solid transparent; outline-offset: 4px; transition: outline-color 200ms var(--out); }
.sa-chat [data-part].is-lit { outline-color: var(--acc); }
.sa-chat-top { margin: 0 0 8px; font-size: var(--t-xs); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.sa-q { align-self: flex-end; margin: 0; max-width: 85%; padding: 12px 16px; background: var(--s2); border-radius: 14px 14px 4px 14px; }
.sa-a p { margin: 0 0 10px; }
.sa-a p:last-child { margin: 0; }
.sa-chat-note { margin: 12px 0 0; font-size: 15px; color: var(--ink-3); }

/* ---------- Pricing: set like a menu ---------- */
.sa-menu { display: grid; grid-template-columns: var(--cols); column-gap: var(--cg); }
.sa-menu-head { grid-column: 1 / 5; }
.sa-menu-head p { margin: 20px 0 0; max-width: 30ch; font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
.sa-menu-cols { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.sa-group h3 { margin: 0 0 28px; font-size: 24px; line-height: 1.2; font-weight: 550; letter-spacing: -0.01em; max-width: 18ch; }
.sa-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.sa-group li { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 19px; font-variant-numeric: tabular-nums; }
.sa-group li small { flex-basis: 100%; font-size: 16px; color: var(--ink-2); margin-top: 2px; max-width: 36ch; }

/* ---------- FAQ: large questions, answers beside ---------- */
.sa-faq { display: grid; row-gap: 80px; }
.sa-q-row { display: grid; grid-template-columns: var(--cols); column-gap: var(--cg); margin: 0; }
.sa-q-row h3, .sa-faq-head > span { grid-column: 1 / 7; margin: 0; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; font-weight: 550; letter-spacing: -0.02em; }
.sa-faq-head { color: var(--ink-2); font-size: inherit; letter-spacing: inherit; }
.sa-q-row p { grid-column: 8 / 13; margin: 0; font-size: var(--t-s); line-height: 1.55; max-width: 42ch; padding-top: 0.35em; }
.sa-q-row a { color: var(--acc); text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Close: the page inverted ---------- */
.sa-end { margin-left: 0 !important; margin-right: 0; padding: 12svh var(--m) 40px !important; min-height: 90svh; background: var(--ink); color: var(--bg); display: flex; flex-direction: column; justify-content: space-between; }
.sa .sa-end-h { font-size: clamp(64px, 10vw, 168px); line-height: 0.9; letter-spacing: -0.045em; font-weight: 800; margin: 0; max-width: 11ch; color: var(--bg); }
.sa-end-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 64px; }
.sa-end-row p { margin: 0; font-size: 20px; max-width: 34ch; }
.sa-end-btn { background: var(--bg); color: var(--ink); height: 56px; display: inline-flex; align-items: center; padding: 0 28px; border-radius: var(--radius-ctl); font-size: 1.05rem; }
.sa-end-btn { transition: transform 160ms var(--out), background 150ms var(--out); }
.sa-end-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sa-end-btn:hover { background: #222226; } }
.sa-end-btn:focus-visible { outline: 2px solid var(--bg); outline-offset: 3px; }
.sa .footer.h-foot { margin-top: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .sa-out { grid-template-columns: 1fr; }
  .sa-names, .sa-stage { grid-column: 1 / -1; }
  .sa-names { flex-direction: row; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; padding: 0 0 20px; }
  .sa-names button { font-size: 22px; min-height: 44px; }
  .sa-bar { flex-direction: column; }
  .sa-seg { min-width: 0; }
  .sa-dur { height: auto; min-height: 72px; }
  .sa-seg-2 .sa-dur { min-height: 120px; } .sa-seg-3 .sa-dur { min-height: 200px; }
  .sa-ai { grid-template-columns: 1fr; }
  .sa-ai .sa-h3, .sa-notes, .sa-chat { grid-column: 1 / -1; grid-row: auto; text-align: left; }
  .sa-notes { padding-top: 24px !important; gap: 16px; flex-direction: row; align-items: flex-start !important; }
  .sa-notes p { flex: 1; }
  .sa-chat { justify-self: start; margin-top: 32px; }
  .sa-notes-l { order: 1; } .sa-chat { order: 2; } .sa-notes-r { order: 3; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .sa-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 96px !important; }
  .sa-wide { order: -1; }
  .sa-mast { text-wrap: balance; font-size: 15vw; line-height: 0.88; margin: 0; }
  .sa-talk { padding: 24px 0 0; }
  .sa-lede { font-size: 18px; max-width: none; }
  .sa-go { display: block; text-align: center; }
  .sa-shot { order: 2; margin: 40px calc(var(--m) * -1) 0; padding-top: 0; }
  .sa-hero { display: flex; flex-direction: column; }
  .sa-wide { display: contents; }
  .sa-mast { order: 0; } .sa-talk { order: 1; }
  .sa-figure { position: relative; width: 60%; margin: 0 0 -48px var(--m); }
  .sa-shot img { max-height: none; aspect-ratio: 4 / 3; border-radius: 0; }
  .sa .sa-h2 { font-size: 11vw; }
  .sa-bar { flex-direction: column; }
  .sa-seg { min-width: 0; display: grid; }
  .sa-dur { height: auto; min-height: 72px; }
  .sa-seg-1 .sa-dur { min-height: 72px; } .sa-seg-2 .sa-dur { min-height: 120px; } .sa-seg-3 .sa-dur { min-height: 220px; }
  .sa-seg p { font-size: 16px; margin-top: 10px; margin-bottom: 14px; }
  .sa-stage { height: 70svh; min-height: 520px; }
  .sa-sheet, .sa-sheet.sa-mail { top: 16px; left: 16px; width: calc(100% - 32px); padding: 24px 20px; }
  .sa-sheet h3 { font-size: 24px; }
  .sa-path li { grid-template-columns: 1fr; }
  .sa-path time { grid-row: auto; }
  .sa-claims, .sa-menu { grid-template-columns: 1fr; }
  .sa-step, .sa-note, .sa-table-wrap, .sa-after, .sa-menu-head, .sa-menu-cols { grid-column: 1 / -1; }
  .sa-note { margin-top: 24px; }
  .sa-table-wrap { margin-top: 40px; }
  .sa-table thead { display: none; }
  .sa-table, .sa-table tbody, .sa-table tfoot, .sa-table tr { display: block; }
  .sa-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 12px; gap: 4px 12px; }
  .sa-table th, .sa-table td { padding: 0; text-align: left; }
  .sa-table th { grid-column: 1 / -1; font-weight: 600; }
  .sa-table td::before { display: block; font-size: 13px; color: var(--ink-2); }
  .sa-table td:nth-child(2)::before { content: "Meta claimed"; }
  .sa-table td:nth-child(3)::before { content: "Shopify recorded"; }
  .sa-table td:nth-child(4)::before { content: "Claimed revenue"; }
  .sa-table td:nth-child(5)::before { content: "Recorded revenue"; }
  .sa-notes { flex-direction: column; }
  .sa-menu-cols { grid-template-columns: 1fr; margin-top: 40px; row-gap: 40px; }
  .sa-group h3 { font-size: 20px; }
  .sa-group li { font-size: 17px; }
  .sa-faq { row-gap: 56px; }
  .sa-q-row { grid-template-columns: 1fr; }
  .sa-q-row h3, .sa-faq-head > span, .sa-q-row p { grid-column: 1 / -1; }
  .sa-q-row h3, .sa-faq-head > span { font-size: 24px; }
  .sa-q-row p { padding-top: 12px; }
  .sa-end { min-height: 80svh; }
  .sa .sa-end-h { font-size: 15vw; }
  .sa-end-row { flex-direction: column; align-items: stretch; }
  .sa-end-row p { font-size: 17px; }
  .sa-end-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-sheet, .sa-sheet.is-on { transform: none; transition: opacity 120ms linear, visibility 0s 120ms; }
  .sa-sheet.is-on { transition: opacity 120ms linear, visibility 0s; }
  .sa-end-btn:active { transform: none; }
  .sa-dur { transform: none !important; transition: none !important; }
}

/* The close sits on a light ground, so its words drop the night fill. */
.sa-end .n-split .w { background: none; color: var(--bg); -webkit-background-clip: border-box; background-clip: border-box; }
@media (max-width: 760px) {
  .sa .sa-end-h { font-size: 12.5vw; }
}

.sa-mer { grid-column: 7 / 13; margin: 40px 0 0; }
.sa-mer img { display: block; width: 100%; height: auto; border-radius: 14px; }
.sa-mer figcaption { margin-top: 12px; font-size: var(--t-xs); color: var(--ink-2); max-width: 52ch; }
.sa main .sa-end { margin-top: var(--gap); }
@media (max-width: 760px) { .sa-mer { grid-column: 1 / -1; } }

/* Skip link, anchor offsets under the fixed nav, the no-script list. */
.sa-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--acc); color: var(--acc-ink); border-radius: 8px; font-weight: 600; }
.sa-skip:focus { top: 12px; }
.sa main [id] { scroll-margin-top: 96px; }
html:not(.js) .sa-names { display: none; }
html:not(.js) .sa-stage { grid-column: 1 / -1; }

/* Hero: the figure card and screenshot arrive after the headline. */
.motion .sa-figure { animation: sa-fade 600ms var(--out) 700ms both; }
.motion .sa-shot img { animation: sa-fade 700ms var(--out) 820ms both; }

/* The bar's blocks grow to their length as the section arrives. */
.motion .sa-seg .sa-dur { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--out); transition-delay: calc(var(--i, 0) * 120ms); }
.motion .sa-seg.in .sa-dur { transform: none; }
@media (max-width: 1100px) { .motion .sa-seg .sa-dur { transform: scaleY(0); transform-origin: top; } .motion .sa-seg.in .sa-dur { transform: none; } }