@import url('https://fonts.googleapis.com/css2?family=Dangrek&family=Caveat:wght@500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

/* =========================================================
   OPTIONAL · Stage 5 Testing Showcase
   Living-room aesthetic — mirrors the app's design system.
   ========================================================= */
:root{
  --paper:#F7F2E9; --oat:#ECE4D5; --walnut:#8A6A4F; --amber:#E0A24E;
  --sienna:#C06B3A; --green:#66734F; --blue:#5E7C89; --pink:#A85E67;
  --ink:#34302A; --cork:#C7A26B; --red:#A02020; --navy:#2C3E4A;
  --card:#FFFDF8;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Nunito', system-ui, sans-serif;
  color:var(--ink); line-height:1.6;
  background-color:var(--oat);
  background-image:
    radial-gradient(circle at 12% 6%, rgba(224,162,78,0.16) 0%, rgba(224,162,78,0) 40%),
    radial-gradient(circle at 88% 3%, rgba(168,94,103,0.13) 0%, rgba(168,94,103,0) 38%),
    radial-gradient(circle at 50% 96%, rgba(102,115,79,0.12) 0%, rgba(102,115,79,0) 44%);
  background-attachment:fixed;
}
.wrap{ max-width:62.5rem; margin:0 auto; padding:clamp(1.25rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 5.5rem; }

/* ---------- MASTHEAD ---------- */
.masthead{ text-align:center; margin-bottom:clamp(1.875rem,5vw,3.25rem); }
.eyebrow{ font-family:'Caveat', cursive; font-size:clamp(3.0rem,3vw,3.0rem); color:var(--navy); font-weight:600; }
.couch-logo{ width:100%; max-width:22.5rem; height:auto; margin:0.375rem auto 0;
  filter:drop-shadow(0 0.5rem 1rem rgba(52,48,42,0.22)); display:block; }
.tagline-hero{ font-family:'Caveat', cursive; font-size:clamp(1.5rem,4vw,2.1rem); color:var(--navy); font-weight:700; margin-top:-0.3rem; }
.stage-word{ font-family:'Dangrek', system-ui, sans-serif; font-size:clamp(1.4rem,4vw,1.9rem); color:var(--red); margin-top:0.3rem; letter-spacing:0.03em; }
.lede{ max-width:60ch; margin:1rem auto 0; color:var(--walnut); font-size:clamp(1rem,2vw,1.1rem); }

/* ---------- SECTION SCAFFOLD ---------- */
.section{ margin-top:clamp(2.125rem,5vw,3.625rem); }
.sec-head{ display:flex; align-items:center; gap:0.875rem; margin-bottom:0.375rem; }
.sec-kicker{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.95rem; color:var(--paper);
  background:var(--sienna); border-radius:0.55rem; padding:0.312rem 0.75rem; line-height:1; flex-shrink:0; }
.sec-title{ font-family:'Dangrek', system-ui, sans-serif; font-weight:500; font-size:clamp(1.5rem,3.5vw,2rem); color:var(--ink); }
.sec-sub{ font-family:'Caveat', cursive; font-size:1.7rem; color:var(--green); margin:0.125rem 0 0.25rem; }
.sec-note{ color:var(--walnut); font-size:1.0rem; max-width:68ch; margin-bottom:1.25rem; }

/* ---------- CORKBOARD CARD (pushpin motif) ---------- */
.card{ position:relative; background:var(--card); border:0.13rem solid var(--cork);
  border-radius:1rem; padding:clamp(1.25rem,3vw,1.875rem); box-shadow:0 0.4rem 1rem rgba(52,48,42,0.12); }
.card::before{ content:""; position:absolute; top:-0.625rem; left:50%; transform:translateX(-50%);
  width:1rem; height:1rem; border-radius:50%; background:var(--sienna);
  box-shadow:0 0.125rem 0.25rem rgba(52,48,42,0.35), inset 0 -0.125rem 0.188rem rgba(0,0,0,0.2); }
.card.pin-green::before{ background:var(--green); }
.card.pin-blue::before{ background:var(--blue); }
.card.pin-amber::before{ background:var(--amber); }
.card.pin-pink::before{ background:var(--pink); }
.card + .card{ margin-top:1.625rem; }

/* ---------- PERSONA / PANELIST GRID ---------- */
.panel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.panelist{ position:relative; background:var(--card); border:0.13rem solid #e0d5c0;
  border-top:0.32rem solid var(--sienna); border-radius:0.85rem; padding:1.25rem 1.125rem 1.125rem; text-align:center; }
.panelist.p-green{ border-top-color:var(--green); }
.panelist.p-blue{ border-top-color:var(--blue); }
.panelist.p-pink{ border-top-color:var(--pink); }
.panelist img{ width:6rem; height:6rem; border-radius:50%; object-fit:cover;
  border:0.22rem solid var(--sienna); box-shadow:0 0.3rem 0.7rem rgba(52,48,42,0.24); background:var(--paper); }
.panelist.p-green img{ border-color:var(--green); }
.panelist.p-blue img{ border-color:var(--blue); }
.panelist.p-pink img{ border-color:var(--pink); }
.panelist h3{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:1.3rem; color:var(--ink); margin-top:0.75rem; }
.panelist .role{ font-family:'Caveat', cursive; font-size:1.5rem; color:var(--walnut); font-weight:600; margin-bottom:0.5rem; }
.panelist .bio{ font-size:1.0rem; color:var(--ink); text-align:left; }
.panelist .flag{ display:block; margin-top:0.75rem; font-size:0.88rem; color:var(--sienna); font-weight:700;
  border-top:0.06rem dashed var(--cork); padding-top:0.625rem; text-align:left; }
.panelist.p-green .flag{ color:var(--green); }
.panelist.p-blue .flag{ color:var(--blue); }

/* ---------- SETUP PROMPT BLOCK ---------- */
.prompt-box{ background:var(--oat); border-left:0.3rem solid var(--walnut); border-radius:0.5rem;
  padding:1rem 1.125rem; font-size:0.92rem; color:var(--ink); font-style:italic; margin-top:0.375rem; }
.prompt-box .lbl{ display:block; font-family:'Nunito'; font-size:0.7rem; font-weight:800; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--walnut); font-style:normal; margin-bottom:0.375rem; }

/* ---------- TESTER CARDS ---------- */
.tester-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; }
.tester{ background:var(--card); border:0.13rem solid #e0d5c0; border-left:0.3rem solid var(--blue);
  border-radius:0.75rem; padding:1rem 1.125rem; }
.tester:nth-child(2){ border-left-color:var(--amber); }
.tester:nth-child(3){ border-left-color:var(--pink); }
.tester .who{ display:inline-block; font-family:'Dangrek', system-ui, sans-serif; font-size:0.99rem;
  color:var(--paper); background:var(--blue); padding:0.188rem 0.688rem; border-radius:0.5rem; margin-bottom:0.625rem; }
.tester:nth-child(2) .who{ background:var(--amber); }
.tester:nth-child(3) .who{ background:var(--pink); }
.tester .task{ font-size:0.89rem; color:var(--walnut); margin-bottom:0.625rem; }
.tester .task b{ color:var(--ink); }
.tester .quote{ font-family:'Caveat', cursive; font-size:1.25rem; color:var(--navy); line-height:1.4;
  border-left:0.18rem solid var(--cork); padding-left:0.75rem; margin:0.625rem 0; }
.tester .obs{ font-size:0.9rem; color:var(--ink); }

/* ---------- SYNTHESIS: patterns + priorities ---------- */
.pattern-lead{ font-size:1rem; color:var(--ink); margin-bottom:1.125rem; }
.prio-list{ list-style:none; counter-reset:prio; display:grid; gap:0.75rem; }
.prio-list li{ counter-increment:prio; position:relative; padding:0.75rem 0.875rem 0.75rem 3.25rem;
  background:var(--card); border:0.11rem solid #e0d5c0; border-radius:0.6rem; font-size:0.94rem; }
.prio-list li::before{ content:counter(prio); position:absolute; left:0.75rem; top:50%; transform:translateY(-50%);
  width:1.75rem; height:1.75rem; border-radius:50%; background:var(--sienna); color:var(--paper);
  font-family:'Dangrek', system-ui, sans-serif; display:flex; align-items:center; justify-content:center; font-size:0.95rem; }
.prio-list li b{ color:var(--ink); }

/* ---------- CHANGES: before -> after fix rows ---------- */
.fix{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.fix + .fix{ margin-top:1.125rem; padding-top:1.125rem; border-top:0.06rem dashed var(--cork); }
.fix-badge{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.82rem; color:var(--paper);
  background:var(--green); padding:0.312rem 0.688rem; border-radius:0.5rem; white-space:nowrap; margin-top:0.125rem; }
.fix:nth-child(2) .fix-badge{ background:var(--sienna); }
.fix:nth-child(3) .fix-badge{ background:var(--amber); }
.fix:nth-child(4) .fix-badge{ background:var(--blue); }
.fix h4{ font-size:1rem; color:var(--ink); margin-bottom:0.188rem; }
.fix .drove{ font-size:0.84rem; color:var(--walnut); font-style:italic; margin-bottom:0.375rem; }
.fix p{ font-size:0.93rem; color:var(--ink); }

/* ---------- EVOLUTION TIMELINE ---------- */
.evo{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem; }
.evo-step{ position:relative; background:var(--card); border:0.13rem solid var(--cork);
  border-radius:0.85rem; padding:1.125rem 1.125rem 1.25rem; text-align:center; }
.evo-num{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.85rem; color:var(--paper);
  background:var(--walnut); border-radius:0.5rem; padding:0.188rem 0.75rem; display:inline-block; margin-bottom:0.625rem; }
.evo-step:nth-child(2) .evo-num{ background:var(--sienna); }
.evo-step:nth-child(3) .evo-num{ background:var(--green); }
.evo-step h4{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:1.2rem; color:var(--ink); margin-bottom:0.375rem; }
.evo-step p{ font-size:0.88rem; color:var(--ink); margin-bottom:0.875rem; min-height:4.125rem; }
.evo-link{ display:inline-block; font-weight:700; font-size:0.9rem; color:var(--paper);
  background:var(--sienna); padding:0.562rem 1.125rem; border-radius:62.438rem; text-decoration:none;
  box-shadow:0 0.25rem 0.75rem rgba(192,107,58,0.3); transition:transform .1s ease, box-shadow .1s ease; }
.evo-link:hover{ transform:translateY(-0.125rem); box-shadow:0 0.375rem 1rem rgba(192,107,58,0.4); }
.evo-step:nth-child(3) .evo-link{ background:var(--green); box-shadow:0 0.25rem 0.75rem rgba(102,115,79,0.3); }
.evo-step:nth-child(3) .evo-link:hover{ box-shadow:0 0.375rem 1rem rgba(102,115,79,0.4); }
.evo-arrow{ text-align:center; color:var(--cork); font-size:1.6rem; font-weight:800; }

/* ---------- PHONE FRAME (screenshot hero) ---------- */
.phone-hero{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(1.25rem,4vw,2.75rem); flex-wrap:wrap; }
.phone{ width:18.75rem; flex-shrink:0; background:#34302A; border:0.562rem solid #34302A; border-radius:2.625rem;
  overflow:hidden; box-shadow:0 1rem 2rem rgba(52,48,42,0.3); }
.phone img{ width:100%; height:auto; display:block; border-radius:2.062rem; }
.phone-caption{ flex:1; min-width:15rem; align-self:center; }
.phone-caption h3{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400; font-size:1.6rem; color:var(--ink); margin-bottom:0.625rem; }
.phone-caption p{ color:var(--ink); font-size:0.98rem; margin-bottom:0.625rem; }
.phone-caption .tag{ font-family:'Caveat', cursive; font-size:1.3rem; color:var(--navy); }

/* ---------- FOOTER ---------- */
.foot{ margin-top:3.5rem; text-align:center; color:var(--walnut); font-size:0.9rem; }
.foot .mark{ font-family:'Dangrek', system-ui, sans-serif; color:var(--red); font-size:1.2rem; }


/* ---------- Utility: replaces former inline styles ---------- */
.mt-block{ margin-top:1.625rem; }             /* was inline top margin */
.card-title{ font-family:'Dangrek', system-ui, sans-serif; font-weight:400;
  font-size:1.3rem; margin-bottom:0.625rem; }  /* was inline heading style */
.card-body{ font-size:0.95rem; }               /* was inline paragraph style */

/* ---------- RESPONSIVE ---------- */
@media (max-width:47.5rem){
  .panel-grid, .tester-grid, .evo{ grid-template-columns:1fr; }
  .fix{ grid-template-columns:1fr; }
  .evo-arrow{ transform:rotate(90deg); }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .evo-link{ transition:none; }
}

codecraft-web-project-footer {
    display: none !important;
}