/* ==========================================================================
   COPPERPOT — Sales pages
   Long-form offer pages built on the same tokens as the library app.
   ========================================================================== */

/* ---------- header ---------- */
.head { border-bottom: 1px solid var(--hair); }
.head__in { display: flex; align-items: center; gap: 1.2rem; height: 64px; }
.head__end { margin-left: auto; display: flex; align-items: center; gap: .7rem; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.6rem, 6vw, 4.5rem); }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 140%;
  background:
    radial-gradient(44% 46% at 10% 4%, rgba(224,144,77,.14), transparent 66%),
    radial-gradient(38% 40% at 88% 74%, rgba(224,144,77,.06), transparent 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__title { margin-top: 1.1rem; }
.hero__lead { margin-top: 1.3rem; font-size: clamp(1.02rem, 1.7vw, 1.18rem); line-height: 1.55; color: var(--fg-2); max-width: 36rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }

/* ---------- cover object ---------- */
.cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--hair-2); border-radius: 10px;
  background: linear-gradient(158deg, var(--pot-2), var(--pot-1) 58%, var(--pot));
  padding: 1.7rem 1.6rem 1.8rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--copper), transparent); }
.cover__ghost { position: absolute; right: -.1em; bottom: -.28em; font-size: 11rem; font-weight: 600; line-height: .7; letter-spacing: -.06em; color: rgba(246,242,236,.045); }
.cover__k { position: relative; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
.cover__t { position: relative; margin-top: auto; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; color: var(--fg); }
.cover__r { position: relative; width: 40px; height: 2px; background: var(--copper); margin: 1rem 0 .9rem; }
.cover__s { position: relative; font-size: .85rem; line-height: 1.45; color: var(--fg-3); }
.cover__f { position: relative; margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--hair); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-4); }

/* ---------- sections ---------- */
.sec { padding: clamp(2.8rem, 6vw, 5rem) 0; }
.sec--line { border-top: 1px solid var(--hair); }
.sec--tint { background: var(--pot-1); border-block: 1px solid var(--hair); }
.sec__head { max-width: 44rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.sec__head h2 { margin-top: .8rem; }
.sec__head p { margin-top: 1rem; font-size: 1rem; color: var(--fg-3); }

/* ---------- grid of cards ---------- */
.g { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g > * { background: var(--pot); padding: 1.5rem 1.4rem 1.6rem; }
.g h3 { font-size: 1rem; font-weight: 500; letter-spacing: -.02em; color: var(--fg); margin-bottom: .5rem; }
.g p { font-size: .88rem; color: var(--fg-3); }
.g .k { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); margin-bottom: .9rem; }

/* ---------- numbered list ---------- */
.steps { counter-reset: n; display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }
.steps > li { list-style: none; counter-increment: n; background: var(--pot); padding: 1.3rem 0 1.4rem; display: flex; gap: 1.4rem; }
.steps > li::before {
  content: counter(n, decimal-leading-zero);
  flex: none; width: 2.2rem;
  font-size: .78rem; font-weight: 600; color: var(--copper); font-variant-numeric: tabular-nums; padding-top: .18rem;
}
.steps h3 { font-size: 1rem; font-weight: 500; color: var(--fg); letter-spacing: -.02em; margin-bottom: .35rem; }
.steps p { font-size: .9rem; color: var(--fg-3); max-width: 44rem; }

/* ---------- contents list ---------- */
.toclist { border-top: 1px solid var(--hair); }
.toclist__row { display: flex; gap: 1.2rem; padding: .95rem .2rem; border-bottom: 1px solid var(--hair); }
.toclist__n { flex: none; width: 2.2rem; font-size: .76rem; color: var(--fg-4); font-variant-numeric: tabular-nums; padding-top: .16rem; }
.toclist__t { font-size: .95rem; color: var(--fg); font-weight: 500; letter-spacing: -.015em; }
.toclist__d { display: block; margin-top: .2rem; font-size: .84rem; color: var(--fg-3); font-weight: 400; letter-spacing: 0; }
.toclist__part { margin-top: 1.8rem; padding-bottom: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-4); }

/* ---------- volume strip — each one is a little book cover ---------- */
.vols { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 1rem; }
.volcard { display: flex; flex-direction: column; }
.volcard__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--pot-2), var(--pot-1) 58%, var(--pot));
  padding: 1.05rem 1.05rem 1.2rem;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.volcard:hover .volcard__cover { border-color: var(--hair-2); transform: translateY(-3px); }
.volcard__cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--copper), transparent); opacity: .6;
  transition: opacity var(--t);
}
.volcard:hover .volcard__cover::after { opacity: 1; }
.volcard b { position: relative; display: block; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
.volcard h3 { position: relative; margin-top: auto; font-size: 1.02rem; font-weight: 500; letter-spacing: -.028em; color: var(--fg); line-height: 1.13; text-wrap: balance; }
.volcard__rule { position: relative; width: 28px; height: 2px; background: var(--copper); margin-top: .75rem; opacity: .85; }
.volcard p { margin-top: .8rem; font-size: .8rem; line-height: 1.45; color: var(--fg-3); }
.volcard span { display: block; margin-top: .45rem; font-size: .73rem; color: var(--fg-4); font-variant-numeric: tabular-nums; }

/* ---------- the plates grid ---------- */
.plates {
  width: min(1320px, 100%); margin-inline: auto;
  padding: 0 var(--gutter);
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 230px);
  gap: .7rem;
}
.plate {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--pot-1);
  border: 1px solid var(--hair);
}
.plate--tall { grid-row: span 2; }
.plate img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.88) contrast(1.04) brightness(.9);
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s;
}
.plate:hover img { transform: scale(1.05); filter: saturate(.98) contrast(1.05) brightness(1); }
.plate figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem .9rem .8rem;
  font-size: .78rem; font-weight: 500; letter-spacing: -.012em; color: var(--fg);
  background: linear-gradient(180deg, transparent, rgba(12,10,9,.88) 62%);
}

@media (max-width: 900px) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plates { grid-template-columns: 1fr; } .plate--tall { grid-row: span 1; } }

/* ---------- price block ---------- */
.price {
  border: 1px solid var(--hair-2); border-radius: 12px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--pot-1);
  text-align: center;
}
.price__fig { display: flex; align-items: baseline; justify-content: center; gap: .7rem; margin: 1rem 0 .5rem; }
.price__now { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 500; letter-spacing: -.045em; color: var(--fg); line-height: 1; font-variant-numeric: tabular-nums; }
.price__was { font-size: 1.1rem; color: var(--fg-4); text-decoration: line-through; }
.price__note { font-size: .86rem; color: var(--fg-3); }
.price .btn { margin-top: 1.5rem; }
.price__fine { margin-top: 1.1rem; font-size: .76rem; color: var(--fg-4); }

/* ---------- guarantee ---------- */
.guar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding: 1.5rem 0; border-block: 1px solid var(--hair); }
.guar__m { flex: none; width: 46px; height: 46px; border: 1px solid var(--copper); border-radius: var(--r); display: grid; place-items: center; color: var(--copper); font-size: .78rem; font-weight: 600; letter-spacing: -.02em; }
.guar p { font-size: .9rem; color: var(--fg-3); max-width: 42rem; }
.guar strong { color: var(--fg); font-weight: 500; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem .2rem; padding-right: 2rem;
  position: relative;
  font-size: .98rem; font-weight: 500; color: var(--fg); letter-spacing: -.018em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .4rem; top: 1.45rem;
  width: 9px; height: 9px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3);
  transform: rotate(45deg); transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding: 0 2rem 1.2rem .2rem; }
.faq__a p { font-size: .92rem; color: var(--fg-3); }
.faq__a p + p { margin-top: .6rem; }

/* ---------- closing band ---------- */
.band { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--hair); text-align: center; position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 0%, rgba(224,144,77,.10), transparent 70%); pointer-events: none; }
.band > * { position: relative; }
.band p { margin: 1rem auto 0; max-width: 36rem; color: var(--fg-3); }
.band .btn { margin-top: 1.8rem; }

/* ---------- decline link ---------- */
.decline { display: block; margin-top: 1.6rem; text-align: center; font-size: .82rem; color: var(--fg-4); text-decoration: underline; text-underline-offset: 3px; }
.decline:hover { color: var(--fg-3); }

/* ---------- thanks page ---------- */
.thanks { min-height: 72vh; display: grid; place-items: center; padding: 4rem 0; text-align: center; }
.thanks__in { max-width: 40rem; }
.thanks__tick { width: 54px; height: 54px; margin: 0 auto 1.6rem; border: 1px solid var(--copper); border-radius: var(--r); display: grid; place-items: center; color: var(--copper); }
.thanks__tick svg { width: 24px; height: 24px; }

/* ==========================================================================
   Chapters accordion
   Four closed drawers beat one wall of text: the click is the point.
   ========================================================================== */
.acc__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.acc__bar p { font-size: .84rem; color: var(--fg-4); }
.acc__bar .btn { margin-left: auto; }

.acc { border-top: 1px solid var(--hair); }
.acc details { border-bottom: 1px solid var(--hair); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem .2rem;
  transition: background var(--t);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: rgba(246,242,236,.02); }
.acc__glyph {
  flex: none; width: 42px; height: 42px;
  color: var(--copper); opacity: .8;
  transition: opacity var(--t), transform var(--t);
}
.acc details[open] .acc__glyph { opacity: 1; transform: scale(1.06); }
.acc__t { min-width: 0; }
.acc__t b { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-4); }
.acc__t strong { display: block; margin-top: .25rem; font-size: 1rem; font-weight: 500; letter-spacing: -.022em; color: var(--fg); }
.acc__see {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--copper);
  border: 1px solid rgba(224,144,77,.32); border-radius: var(--r);
  padding: .35rem .7rem;
  transition: background var(--t), border-color var(--t);
}
.acc summary:hover .acc__see { background: var(--copper-wash); border-color: rgba(224,144,77,.55); }
.acc__see i {
  width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--t);
}
.acc details[open] .acc__see i { transform: rotate(-135deg) translate(-1px, -1px); }
.acc details[open] .acc__see span::after { content: ' — close'; color: var(--fg-4); }
.acc__panel { padding: 0 .2rem 1.3rem; }
.acc__panel .toclist { border-top: 0; }
.acc__panel .toclist__row:last-child { border-bottom: 0; }

@keyframes cp-rowin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.acc details[open] .toclist__row { animation: cp-rowin .38s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 32ms); }

/* ==========================================================================
   The flip — a pancake tossed as you scroll
   ========================================================================== */
.flip { position: relative; border-block: 1px solid var(--hair); background: var(--pot-1); }
.flip__track { position: relative; height: 300vh; }
.flip__stage {
  position: sticky; top: 0;
  height: 100vh; min-height: 540px;
  display: grid; align-content: center;
  overflow: hidden;
}
.flip__stage::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(52% 42% at 26% 62%, rgba(224,144,77,.13), transparent 70%);
  pointer-events: none;
}
.flip__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}

/* --- the skillet ---
   .flip__stack is the fixed frame both objects live in, sized to the pan
   drawing's own 520 × 200 viewBox so everything can be placed in percentages.
   The pan tilts inside it; the pancake is a sibling, so it rises straight up. */
.flip__pan { position: relative; padding-top: clamp(190px, 32vh, 330px); }
.flip__stack {
  position: relative;
  width: min(560px, 100%); margin-inline: auto;
  aspect-ratio: 520 / 200;
}
.flip__skillet {
  position: absolute; inset: 0;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 72% 28%;              /* the point where the handle meets the rim */
}
.flip__panart { width: 100%; height: 100%; display: block; overflow: visible; }

/* the pancake's shadow in the pan — shrinks as it climbs, which sells height */
.flip__shadow {
  position: absolute; left: 37.7%; top: 21%;
  width: 52%; aspect-ratio: 1 / .28;
  border-radius: 50%;
  transform: translateX(-50%) scale(calc(1 - var(--arc, 0) * .55));
  background: radial-gradient(50% 62% at 50% 50%, rgba(0,0,0,.85), transparent 74%);
  opacity: calc(.9 - var(--arc, 0) * .6);
}
.flip__heat {
  position: absolute; left: 8%; width: 60%; bottom: -6%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(50% 58% at 50% 50%, rgba(224,144,77,.5), transparent 72%);
  filter: blur(9px);
  animation: cp-heat 2.6s ease-in-out infinite;
}
@keyframes cp-heat { 0%, 100% { opacity: .4; transform: scaleX(1); } 50% { opacity: .8; transform: scaleX(1.07); } }

/* --- the pancake --- */
.flip__cakewrap {
  position: absolute; left: 37.7%; top: 6.5%;
  width: 55.5%;
  transform: translate(-50%, calc(var(--y, 0) * 1px));
  perspective: 1100px;
  will-change: transform;
}
/* a disc with two faces and a crust edge, so it never vanishes edge-on */
.flip__cake {
  position: relative;
  display: block; width: 100%; aspect-ratio: 1 / .30;
  transform: rotateX(calc(var(--rot, 0) * 1deg)) scale(var(--sc, 1));
  transform-style: preserve-3d;
  will-change: transform;
}
.flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.flip__face svg { width: 100%; height: 100%; display: block; }
.flip__face--a { transform: translateZ(7px); }                    /* pale side */
.flip__face--b { transform: translateZ(-7px) rotateX(180deg); }   /* browned side */
/* the crust: what you see while it is edge-on, mid-flip */
.flip__side {
  position: absolute; left: 4%; right: 4%; top: 50%;
  height: 14px; margin-top: -7px;
  border-radius: 9px / 7px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 14%, transparent 86%, rgba(0,0,0,.45)),
    linear-gradient(180deg, #D89552 0%, #B06E2E 42%, #7A400F 100%);
  transform: rotateX(90deg);
}

/* --- drop-in photography ---
   Vector shading has a ceiling. To go photoreal, save three cut-out PNGs with
   transparent backgrounds into assets/flip/ and add the --photo modifier to
   .flip__stack in the page; the drawings hide themselves and nothing else in
   the section changes.

     assets/flip/pan.png          skillet, empty, seen from slightly above,
                                  handle to the right, ~1560 × 600
     assets/flip/cake-top.png     one pancake, straight down, ~1080 × 1080
     assets/flip/cake-under.png   the same pancake, browned side  --- */
.flip__stack--photo .flip__panart,
.flip__stack--photo .flip__face svg,
.flip__stack--photo .flip__side { display: none; }
.flip__stack--photo .flip__skillet { background: url('flip/pan.png') center bottom / contain no-repeat; }
.flip__stack--photo .flip__face--a { background: url('flip/cake-top.png') center / 100% 100% no-repeat; }
.flip__stack--photo .flip__face--b { background: url('flip/cake-under.png') center / 100% 100% no-repeat; }

/* --- the words --- */
.flip__words { position: relative; min-height: 17rem; }
.flip__step {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  pointer-events: none;
}
.flip__step.is-on { opacity: 1; transform: none; }
.flip__step .k { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }
.flip__step h3 { margin-top: .9rem; font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; color: var(--fg); text-wrap: balance; }
.flip__step p { margin-top: 1rem; font-size: clamp(.95rem, 1.5vw, 1.06rem); line-height: 1.55; color: var(--fg-3); max-width: 32rem; }
.flip__step .tag { margin-top: 1.3rem; }

/* --- progress --- */
.flip__prog {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.4rem;
  display: flex; align-items: center; gap: 1rem;
}
.flip__bar { flex: 1; height: 2px; background: var(--hair); overflow: hidden; }
.flip__bar i { display: block; height: 100%; background: var(--copper); width: calc(var(--p, 0) * 100%); }
.flip__hint { flex: none; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-4); }

/* --- no-JS / reduced motion: everything visible, no sticky --- */
.flip--static .flip__track { height: auto; }
.flip--static .flip__stage { position: static; height: auto; min-height: 0; padding: clamp(2.8rem, 6vw, 5rem) 0; }
.flip--static .flip__grid { grid-template-columns: 1fr; }
.flip--static .flip__words { min-height: 0; display: grid; gap: 2.2rem; }
.flip--static .flip__step { position: static; opacity: 1; transform: none; }
.flip--static .flip__prog { display: none; }
.flip--static .flip__cakewrap { transform: translate(-50%, 0); }

/* Reduce motion: the ambient loops stop and the copy stops sliding. The toss
   itself stays — it is scroll-linked, so the reader is always in control of it,
   and sales.js halves its amplitude. */
@media (prefers-reduced-motion: reduce) {
  .flip__heat { animation: none; opacity: .55; }
  .acc details[open] .toclist__row { animation: none; }
  .flip__step { transform: none; transition: opacity .25s linear; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .cover { max-width: 320px; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .flip__track { height: 360vh; }
  .flip__grid { grid-template-columns: 1fr; gap: 2rem; }
  .flip__skillet { width: min(300px, 70%); }
  .flip__words { min-height: 15rem; }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .steps > li { gap: .9rem; }
  .acc summary { flex-wrap: wrap; gap: .8rem; }
  .acc__see { margin-left: 0; width: 100%; justify-content: space-between; }
  .acc__bar .btn { margin-left: 0; width: 100%; justify-content: center; }
  .flip__stage { min-height: 0; }
}