/* Premium Card — inner pages on the card system (Home 1).
   Product, checkout, account, journal, about, contact, terms and sign-in. Tokens and parts from pc-site.css. */

/* ---------- shared two-column frame ---------- */
.split { display: grid; gap: 2.5rem var(--gutter); }
@media (min-width: 64em) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .split > .split__main { grid-column: 1 / span 7; }
  .split > .split__side { grid-column: 9 / span 4; position: sticky; top: 1.5rem; }
  .split--wide > .split__main { grid-column: 1 / span 8; }
}
.sec-sub { font-size: var(--step-lead); line-height: 1.5; margin-bottom: 1.5rem; }
.chamfer { clip-path: polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%, 0 28px); }
.photo { overflow: hidden; background: var(--surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.list-plain { list-style: none; padding: 0; margin: 0; }

/* ---------- product ---------- */
.pdp { display: grid; gap: 2.5rem var(--gutter); margin-top: 2rem; }
.pdp__media { display: grid; gap: 8px; align-content: start; }
.gallery__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.gallery__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--ease-out); }
.gallery__stage > img.is-on { opacity: 1; }
.gallery__mark { position: absolute; top: 1rem; inset-inline-start: 1rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--bg); }
.gallery__mark img { width: 28px; height: 28px; }
:root[data-theme="dark"] .gallery__mark img { filter: invert(0.92); }
.gallery__nav { position: absolute; bottom: 1rem; inset-inline-end: 1rem; display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem; background: var(--bg); font-size: var(--step-small); font-weight: 600; }
.gallery__nav span { min-width: 3.5rem; text-align: center; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gallery__thumb { aspect-ratio: 16 / 10; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; opacity: 0.6; transition: opacity var(--t-hover) ease, outline-color var(--t-hover) ease; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-selected="true"] { opacity: 1; outline-color: var(--ink); }
.pdp__buy { display: grid; gap: 1.5rem; align-content: start; }
.pdp__buy h1 { font-size: var(--step-head); line-height: 1.3; }
.pdp__cat { font-size: var(--step-small); }
.pdp__price { font-size: var(--step-lead); font-weight: 700; }
.pdp__price s { font-weight: 400; color: var(--muted); font-size: var(--step-body); margin-inline-start: 0.6rem; }
.plans { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.plans legend { font-size: var(--step-small); font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.plan { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.6rem 1.1rem; background: var(--surface); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:checked) { background: var(--ink); color: var(--bg); --text: currentColor; --heading: currentColor; }
.plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pdp__row .btn { flex: 1 1 12rem; }
.pdp__clock { padding: 1rem 1.2rem; background: var(--surface); }
.pdp__clock time { font-weight: 700; font-size: 1.2em; }
@media (min-width: 64em) {
  .pdp { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .pdp__media { grid-column: 1 / span 7; }
  .pdp__buy { grid-column: 9 / span 4; position: sticky; top: 1.5rem; }
}

.facts { display: grid; gap: 0; }
.facts div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; padding-block: 1rem; }
.facts div:nth-child(odd) { background: var(--surface); padding-inline: 1rem; }
.facts div:nth-child(even) { padding-inline: 1rem; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.ticks { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.ticks li { display: flex; gap: 0.6rem; align-items: baseline; }
.ticks .ph { color: var(--ink); transform: translateY(0.15em); }

.reviews { display: grid; gap: 6px; }
.review { padding: 1.25rem; background: var(--surface); display: grid; gap: 0.4rem; }
.review__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: var(--step-small); }
.review__head b { font-size: var(--step-body); }
.stars { display: inline-flex; gap: 0.1rem; }

/* ---------- checkout ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.5rem; font-size: var(--step-small); list-style: none; padding: 0; }
.steps li { color: var(--muted); font-weight: 600; }
.steps li.is-done { color: var(--ink); }
.steps li.is-current { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.steps a { text-decoration: none; }
.lines { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.line { display: grid; grid-template-columns: 56px 1fr auto; gap: 0.5rem 1.25rem; align-items: center; padding: 1rem; background: var(--surface); }
.line .mark { width: 56px; background: var(--bg); }
.line__name { font-weight: 600; text-decoration: none; }
.line__name:hover { text-decoration: underline; }
.line__plan { display: block; font-size: var(--step-small); color: var(--muted); font-weight: 400; }
.line__end { display: flex; align-items: center; gap: 1rem; }
.line__price { font-weight: 700; min-width: 7.5rem; text-align: end; }
.line__remove { width: 44px; height: 44px; display: grid; place-items: center; }
.line__remove:hover { background: var(--ink); color: var(--bg); --text: currentColor; --heading: currentColor; }
@media (max-width: 48em) {
  .line { grid-template-columns: 48px 1fr; }
  .line .mark { width: 48px; }
  .line__end { grid-column: 1 / -1; justify-content: space-between; }
}
.summary { display: grid; gap: 1.25rem; }
.summary dl { display: grid; gap: 0.6rem; margin: 0; }
.summary dl div { display: flex; justify-content: space-between; gap: 1rem; }
.summary dd { margin: 0; }
.summary .total { padding-top: 0.9rem; font-weight: 800; font-size: var(--step-lead); }
.code { display: flex; gap: 6px; }
.code .input { flex: 1; min-width: 0; }
.code .btn { flex: none; }
.methods { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.method { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: center; padding: 1.1rem 1.25rem; background: var(--surface); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.method input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); grid-row: span 2; }
.method b { font-size: var(--step-body); }
.method span { font-size: var(--step-small); }
.method:has(input:checked) { background: var(--ink); color: var(--bg); --text: currentColor; --heading: currentColor; }
.form-grid { display: grid; gap: 1.25rem var(--gutter); }
@media (min-width: 48em) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }

.done { background: var(--field-1); color: var(--field-1-ink); --text: currentColor; --heading: currentColor; }
.done__body { display: grid; gap: 1.5rem; padding-block: clamp(4rem, 10vw, 8rem); }
.done h1 { font-size: var(--step-display); line-height: 1.2; max-width: 12ch; }
.done p { font-size: var(--step-lead); max-width: 40ch; }
.done__code { font-weight: 800; }
.done .btn { background: var(--field-1-ink); color: var(--field-1); justify-self: start; }
.done .textlink { justify-self: start; }

/* ---------- sign in ---------- */
.auth { display: grid; min-height: calc(100svh - var(--bar)); }
.auth__form { display: grid; align-content: center; gap: 1.5rem; padding: clamp(2rem, 6vw, 5rem) var(--margin); max-width: 34rem; width: 100%; margin-inline: auto; }
.auth__form h1 { font-size: var(--step-head); line-height: 1.3; }
.auth__photo { min-height: 40svh; }
@media (min-width: 64em) {
  .auth { grid-template-columns: 1fr 1fr; }
  .auth__photo { min-height: 0; }
}

/* ---------- about and contact ---------- */
.story { display: grid; gap: 2.5rem var(--gutter); align-items: center; }
.story .photo { aspect-ratio: 4 / 5; }
.story p + p { margin-top: 1rem; }
@media (min-width: 64em) {
  .story { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .story__text { grid-column: 1 / span 5; }
  .story .photo { grid-column: 7 / span 6; aspect-ratio: 16 / 11; }
  .story--flip .story__text { grid-column: 8 / span 5; grid-row: 1; }
  .story--flip .photo { grid-column: 1 / span 6; grid-row: 1; }
}
.promises { display: grid; gap: 12px; }
.promises h3 { font-family: var(--font-text); font-size: var(--step-lead); font-weight: 700; margin-bottom: 0.5rem; }
.promise { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem; background: var(--bg); }
.promise__icon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; background: var(--ink); color: var(--bg); --text: currentColor; --heading: currentColor; }
.promise__icon .ph { font-size: 1.6rem; }
.promise p { color: var(--muted); }
@media (min-width: 64em) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.channels { display: grid; gap: 6px; }
.channels a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 0.75rem 1rem 0.75rem 1.25rem; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease; }
.channels a b { font-family: var(--font-display); font-size: var(--step-lead); font-weight: 600; color: var(--ink); }
.channels a span { font-size: var(--step-small); color: var(--muted); }
.channel__logo { width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--ink); color: var(--bg); }
.channel__logo .ph { font-size: 1.5rem; }
.channels a:hover { background: var(--surface-2); }
.hours { display: grid; gap: 0.4rem; margin-top: 1.5rem; }

/* ---------- journal ---------- */
.feature { display: grid; gap: 2rem var(--gutter); text-decoration: none; }
.feature .photo { aspect-ratio: 16 / 10; }
.feature h2 { font-size: var(--step-head); line-height: 1.3; }
.feature p { margin-top: 1rem; }
.feature:hover h2 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.15em; }
@media (min-width: 64em) {
  .feature { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .feature .photo { grid-column: 1 / span 7; }
  .feature > div:last-child { grid-column: 9 / span 4; }
}
.meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: var(--step-small); color: var(--muted); margin-top: 1rem; }
.posts { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.post-row { display: grid; grid-template-columns: 160px 1fr; gap: 1.25rem; align-items: center; padding: 1rem; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease; }
.post-row .photo { aspect-ratio: 4 / 3; }
.post-row h3 { font-family: var(--font-text); font-size: var(--step-lead); line-height: 1.6; font-weight: 700; }
.post-row p { margin-top: 0.4rem; font-size: var(--step-small); }
.post-row:hover { background: var(--surface-2); }
@media (max-width: 48em) { .post-row { grid-template-columns: 96px 1fr; } .post-row p { display: none; } }
.blog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem var(--gutter); margin-bottom: 2rem; }
.blog-tools .input { max-width: 22rem; }

.article { max-width: 44rem; margin-inline: auto; }
.article h1 { font-size: var(--step-head); line-height: 1.35; }
.article__cover { aspect-ratio: 16 / 9; margin-block: 2.5rem; }
.article__body p { font-size: var(--step-body); line-height: 1.85; max-width: none; }
.article__body p + p { margin-top: 1.25rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2rem; list-style: none; padding: 0; }
.tags li { padding: 0.3rem 0.8rem; background: var(--surface); font-size: var(--step-small); }

/* ---------- terms ---------- */
.terms { display: grid; gap: 2.5rem var(--gutter); }
.terms__toc { display: grid; gap: 0.2rem; align-content: start; }
.terms__toc a { padding: 0.4rem 0; text-decoration: none; font-size: var(--step-small); font-weight: 600; }
.terms__toc a:hover { text-decoration: underline; }
.terms__body section + section { margin-top: 3rem; }
.terms__body h2 { font-size: var(--step-lead); margin-bottom: 0.75rem; }
@media (min-width: 64em) {
  .terms { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .terms__toc { grid-column: 1 / span 3; position: sticky; top: 1.5rem; }
  .terms__body { grid-column: 5 / span 7; }
}

/* ---------- account ---------- */
.account { display: grid; gap: 2rem var(--gutter); }
.account__nav { display: grid; gap: 4px; align-content: start; }
.account__who { padding: 1.25rem; background: var(--field-1); color: var(--field-1-ink); --text: currentColor; --heading: currentColor; display: grid; gap: 0.2rem; margin-bottom: 4px; }
.account__who b { font-size: var(--step-lead); font-family: var(--font-display); }
.account__who span { font-size: var(--step-small); }
.account__nav a, .account__nav button { display: flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0 1.1rem; background: var(--surface); text-decoration: none; font-weight: 600; text-align: start; width: 100%; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.account__nav a:hover, .account__nav button:hover { background: var(--surface-2); }
.account__nav a[aria-current="page"] { background: var(--ink); color: var(--bg); --text: currentColor; --heading: currentColor; }
.account__main { display: grid; gap: 2.5rem; align-content: start; min-width: 0; }
.account__main h1 { font-size: var(--step-head); line-height: 1.3; }
.account__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; background: var(--surface-2); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 6px; }
.figures div { padding: 1.25rem; background: var(--surface); }
.figures b { display: block; font-size: var(--step-lead); }
.figures span { font-size: var(--step-small); }
.table-wrap { overflow-x: auto; }
.entries { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.entry-row { display: grid; gap: 0.5rem 1.5rem; padding: 1.25rem; background: var(--surface); }
.entry-row__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.entry-row__head b { font-size: var(--step-body); }
.entry-row__actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--step-small); }
.entry-row__actions button { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; min-height: 44px; }
.gift { display: grid; gap: 0.75rem; padding: 1.5rem; background: var(--field-1); color: var(--field-1-ink); --text: currentColor; --heading: currentColor; aspect-ratio: 1.586; max-width: 26rem; align-content: space-between; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 20px); }
.gift b { font-size: var(--step-lead); }
.gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 8px; }
@media (min-width: 64em) {
  .account { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .account__nav { grid-column: 1 / span 3; position: sticky; top: 1.5rem; }
  .account__main { grid-column: 5 / span 8; }
}

.line .mark__mono, .band__mark b { font-size: 1.125rem; }
.mark { overflow: hidden; }
.reviews { gap: 12px; }
.review { margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--surface); display: grid; gap: 1rem; }
.review p { font-size: var(--step-lead); line-height: 1.75; color: var(--text); }
.review__stars { display: flex; gap: 2px; color: #c58a12; font-size: 1.1rem; }
.review__stars .is-off { color: var(--surface-2); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; }
.review__head > span:nth-child(2) { display: grid; line-height: 1.5; }
.review__head small { color: var(--muted); font-size: var(--step-small); }
.review__avatar { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--ink); color: var(--bg); --text: currentColor; --heading: currentColor; font-weight: 700; }
.review__badge { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; background: var(--bg); color: var(--ink); font-size: var(--step-small); font-weight: 600; }
@media (max-width: 63.99em) { .pdp__buy { order: -1; } }

/* app screens (checkout, account, sign-in): a working title, not a display line */
body[data-app] .page-title h1, body[data-app] .auth__form h1, body[data-app] .account__main h1 { font-size: clamp(1.625rem, 1.4rem + 0.6vw, 2rem); }
body[data-app] .page-title { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.contact-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact-strip .photo { aspect-ratio: 4 / 5; }
.contact-strip .photo:nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
@media (min-width: 64em) {
  .story--lead .story__text { grid-column: 1 / span 5; }
  .story--lead .photo { grid-column: 6 / span 7; aspect-ratio: 4 / 3; }
  .feature .photo { aspect-ratio: 4 / 3; }
  .feature > div:last-child { grid-column: 8 / span 5; }
}
.feature .feature__title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.5; }
.post-row p { font-size: var(--step-body); }
.post-row .meta { font-size: var(--step-small); }
.page-title--tight { padding-bottom: 1.5rem; }
.article__band { aspect-ratio: 2.4; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@media (max-width: 48em) { .article__band { aspect-ratio: 4 / 3; } }