/* Papero homepage, 2026-10-08 redesign.
   Layout language from changeloop.dev (Inter, a serif-italic accent word, drafting-paper
   panels, bordered cell grids, column rules with seam diamonds, one ink band mid-page and an
   ink close); content architecture from jenni.ai (the editor in the hero, three steps,
   alternating feature mock-ups, the chatbot comparison, use-case chips). Papero keeps its own
   violet. Loaded only by frontend.pug, with a ?v= buster because app/public is served
   immutable. The shared header and footer carry their own styles.

   Contrast, WCAG 2.x, measured:
     --pp-cta         #6c5ce7  white label 4.86:1   (hover #5b4bd6, 6.14:1)
     --pp-accent-deep #5040c8  on --pp-bg 6.91:1     section kickers, citations
     --pp-accent      #b4abff  on --pp-ink 8.79:1    the serif word and kicker on ink
     --pp-muted       #66626e  on --pp-bg 5.66:1, on --pp-band 5.31:1
     rgba(255,255,255,.72) on --pp-ink composites to ~#bdbcc0, 9.6:1 */
:root{
  --pp-bg:#fafaf8;
  --pp-surface:#ffffff;
  --pp-band:#f3f2ef;
  --pp-panel:#efeee9;
  --pp-ink:#17151d;
  --pp-muted:#66626e;
  --pp-line:#e6e4df;
  --pp-line-soft:#efede9;
  --pp-cta:#6c5ce7;
  --pp-cta-hover:#5b4bd6;
  --pp-accent-deep:#5040c8;
  --pp-accent:#b4abff;
  --pp-tint:#f1effd;
  --pp-radius:8px;
  --pp-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --pp-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --pp-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317151d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ---- Primitives (ported from changeloop's changelogapp.css) ---------------------------- */

/* Column rules: two 1px gradients at the content column's edges. Sections that carry this
   must set background-COLOR, never the background shorthand, or the rules vanish. */
.pp-rules{
  --pp-col:1120px;
  background-image:linear-gradient(var(--pp-line),var(--pp-line)),linear-gradient(var(--pp-line),var(--pp-line));
  background-repeat:no-repeat,no-repeat;
  background-size:1px 100%,1px 100%;
  background-position:calc(50% - var(--pp-col) / 2) 0,calc(50% + var(--pp-col) / 2 - 1px) 0;
}
/* Section boundary: a hairline and a 9px diamond filled with the section's own colour. */
.pp-seam{position:relative;border-top:1px solid var(--pp-line);--pp-seam-fill:var(--pp-bg)}
.pp-seam::after{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-5px;background:var(--pp-seam-fill);border:1px solid var(--pp-line);transform:rotate(45deg)}
/* Drafting-paper panel. */
.pp-hatch{
  background-color:var(--pp-panel);
  background-image:repeating-linear-gradient(45deg,transparent 0 21px,rgba(23,21,29,.055) 21px 22px),repeating-linear-gradient(-45deg,transparent 0 21px,rgba(23,21,29,.055) 21px 22px);
  background-repeat:repeat,repeat;background-size:auto,auto;background-position:0 0,0 0;
}
/* Ink plate. Re-points the seam fill and the line colour, which disappear on ink otherwise. */
.pp-ink{
  background-color:var(--pp-ink);
  background-image:repeating-linear-gradient(45deg,transparent 0 31px,rgba(255,255,255,.05) 31px 32px),repeating-linear-gradient(-45deg,transparent 0 31px,rgba(255,255,255,.05) 31px 32px);
  background-repeat:repeat,repeat;background-size:auto,auto;background-position:0 0,0 0;
  color:var(--pp-surface);
  --pp-seam-fill:var(--pp-ink);
  --pp-line:rgba(255,255,255,.22);
}
/* Bordered cell grid: the 1px rules are the grid's own background through a 1px gap. */
.pp-cells{display:grid;gap:1px;background:var(--pp-line);border:1px solid var(--pp-line);border-radius:var(--pp-radius);overflow:hidden;list-style:none;margin:0;padding:0}
.pp-cell{background:var(--pp-surface);padding:26px 24px;position:relative;min-width:0;margin:0}
/* Clips the half-scrollbar overhang of anything full-bleed without becoming a scroll
   container, so the sticky header keeps working. */
.pp-home .inner-wrap{overflow-x:clip}
@media (max-width:900px){.pp-rules{background-image:none}}

/* ---- App window mock-ups ---------------------------------------------------------------- */
.pp-app{background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -26px rgba(23,21,29,.34),0 6px 16px -10px rgba(23,21,29,.14);font-family:var(--pp-font);text-align:left;color:var(--pp-ink)}
.pp-app .pp-app__bar{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--pp-line-soft);background:#fbfaf9}
.pp-app .pp-app__dot{width:11px;height:11px;border-radius:50%;background:#dcd9d3;margin-right:7px;flex:0 0 auto}
.pp-app .pp-app__title{margin-left:10px;font-size:13px;color:var(--pp-muted);font-weight:500;letter-spacing:-.01em}
/* A light window on the ink band needs its own line colour and text colour back. */
.pp-ink .pp-app{--pp-line:#e6e4df;color:var(--pp-ink);border-color:transparent;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}

/* ---- Page frame -------------------------------------------------------------------------- */
.pp-home{background:var(--pp-bg);color:var(--pp-ink)}
.pp-home main{font-family:var(--pp-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--pp-ink)}
/* app-critical.css sets faces, weights (p is 300) and margins on bare elements. */
.pp-home main h1,.pp-home main h2,.pp-home main h3,.pp-home main p,.pp-home main li,.pp-home main a,.pp-home main span,.pp-home main summary,.pp-home main figcaption,.pp-home main div{font-family:inherit}
.pp-home main p{font-weight:400;text-rendering:optimizeLegibility}
.pp-home main a::before,.pp-home main a:before{border-bottom-color:transparent!important;display:none!important}
.pp-home .pp-section{padding:88px 0;background-color:var(--pp-bg)}
.pp-home .pp-section.pp-band{background-color:var(--pp-band);--pp-seam-fill:var(--pp-band)}
.pp-home .pp-section.pp-ink{background-color:var(--pp-ink)}
.pp-home .pp-container{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- Type and buttons -------------------------------------------------------------------- */
.pp-home .pp-eyebrow{font-size:16px;line-height:1.4;color:var(--pp-muted);letter-spacing:-.01em;margin:0 0 22px}
.pp-home .pp-kicker{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--pp-accent-deep);letter-spacing:-.005em;margin:0 0 14px}
.pp-home .pp-title{font-size:clamp(30px,4vw,44px);line-height:1.08;font-weight:500;letter-spacing:-.03em;margin:0;color:var(--pp-ink)}
.pp-home .pp-title--center{text-align:center;margin:0 auto 56px;max-width:760px}
.pp-home .pp-head{max-width:720px;margin:0 0 48px}
.pp-home .pp-head--center{text-align:center;margin-left:auto;margin-right:auto}
.pp-home .pp-lede{font-size:18px;line-height:1.55;color:var(--pp-muted);margin:16px 0 0}
.pp-home .pp-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
.pp-home .pp-ctas--left{justify-content:flex-start;margin-top:36px}
.pp-home .pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--pp-radius);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.01em;text-decoration:none;border:1px solid transparent}
/* The buttons' look (fill, shadows, hover, pressed, focus ring, ink retune) is papero-buttons.css (2026-10-17). */
.pp-home .pp-faq-item summary:focus-visible{outline:2px solid var(--pp-ink);outline-offset:3px}
.pp-home .pp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.pp-home .pp-list li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.5;font-weight:500;color:var(--pp-ink);margin:0}
.pp-home .pp-list li::before{content:'';width:18px;height:18px;margin-top:1px;flex-shrink:0;background:var(--pp-check) center/contain no-repeat}

/* Balanced wrapping, so no heading ends on a one-word line ("bolted / on"). */
.pp-home main h1,.pp-home main h2{text-wrap:balance}
/* Korean breaks between any two syllables by default, which splits words ("달 / 린"). */
html:lang(ko) .pp-home main{word-break:keep-all;overflow-wrap:break-word}

/* ---- Hero -------------------------------------------------------------------------------- */
.pp-home .pp-hero{padding:80px 0 56px}
.pp-home .pp-hero-copy{max-width:780px;margin:0 auto;text-align:center}
.pp-home .pp-hero h1{font-size:clamp(40px,5.4vw,68px);line-height:1.04;font-weight:500;letter-spacing:-.035em;color:var(--pp-ink);margin:0 auto 24px;max-width:20ch}
/* Instrument Serif runs small against Inter at the same size, so it is scaled optically. */
.pp-home .pp-hero h1 em{display:block;font-family:var(--pp-serif);font-style:italic;font-weight:400;font-size:1.1em;line-height:1;letter-spacing:-.01em;color:var(--pp-cta)}
.pp-home .pp-hero .pp-sub{font-size:19px;line-height:1.55;color:var(--pp-muted);max-width:600px;margin:0 auto 32px}
.pp-home .pp-hero-note{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;font-size:14px;line-height:1.45;color:var(--pp-muted);text-align:left}
.pp-home .pp-hero-note::before{content:'';width:16px;height:16px;flex-shrink:0;background:var(--pp-check) center/contain no-repeat}
.pp-home .pp-hero-visual{margin:56px 0 0;padding:48px;border-radius:var(--pp-radius)}
.pp-home .pp-caption{margin:20px 0 0;text-align:center;font-size:13.5px;line-height:1.5;color:var(--pp-muted)}

/* The editor as v1 draws it: the prompts panel and the document (jenni's hero screenshot, built from real strings). */
.pp-editor .pp-editor__body{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:400px}
.pp-editor .pp-editor__lib{border-right:1px solid var(--pp-line-soft);background:#fcfbfa;padding:18px 14px}
.pp-editor .pp-editor__pane-h{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--pp-ink);letter-spacing:-.01em}
.pp-editor .pp-editor__secs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pp-editor .pp-editor__sec{margin:0;padding:8px 10px;border-radius:9px;border:1px solid transparent;font-size:12.5px;font-weight:500;line-height:1.35;color:#3a3644}
.pp-editor .pp-editor__sec.is-on{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--pp-surface);border-color:var(--pp-line);box-shadow:0 1px 2px rgba(23,21,29,.05)}
.pp-editor .pp-editor__sec-title{font-weight:600;color:var(--pp-ink)}
.pp-editor .pp-editor__sec-prompt{font-size:11.5px;font-weight:400;line-height:1.45;color:var(--pp-muted);border:1px solid var(--pp-line);border-radius:6px;padding:7px 8px}
.pp-editor .pp-editor__sec-btn{align-self:flex-start;font-size:11.5px;font-weight:600;line-height:1.2;color:var(--pp-ink);background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:6px;padding:5px 10px}
.pp-editor .pp-editor__doc{padding:28px 34px 24px}
.pp-editor .pp-editor__doc-title{margin:0 0 20px;font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--pp-ink)}
.pp-editor .pp-editor__h{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--pp-ink)}
.pp-editor .pp-editor__h--refs{margin-top:4px}
.pp-editor .pp-editor__p{margin:0 0 22px;font-size:14.5px;line-height:1.75;color:#2c2935}
.pp-home .pp-cite{color:var(--pp-accent-deep);background:var(--pp-tint);border-radius:4px;padding:1px 4px;font-weight:500}
.pp-home .pp-ghost{color:#8f8b99}
.pp-home .pp-kbd{display:inline-block;margin-left:8px;padding:3px 6px;font-size:11px;font-weight:600;line-height:1;color:var(--pp-muted);border:1px solid var(--pp-line);border-bottom-width:2px;border-radius:5px;white-space:nowrap;vertical-align:1px;background:var(--pp-surface)}
.pp-editor .pp-editor__refs{margin:0;padding:0 0 0 18px;font-size:12.5px;line-height:1.55;color:var(--pp-muted)}
.pp-editor .pp-editor__refs li{margin:0 0 6px;padding-left:2px}

/* ---- Trust strip ------------------------------------------------------------------------- */
.pp-home .pp-trust{padding:0 0 64px;background-color:var(--pp-bg)}
.pp-home .pp-trust-list{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.pp-home .pp-trust-list li{display:flex;align-items:flex-start;gap:10px;padding:22px 20px;font-size:14px;font-weight:500;line-height:1.45;color:var(--pp-ink)}
.pp-home .pp-trust-list li::before{content:'';width:16px;height:16px;margin-top:1px;flex-shrink:0;background:var(--pp-check) center/contain no-repeat}

/* ---- Steps ------------------------------------------------------------------------------- */
.pp-home .pp-steps-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-home .pp-steps-list .pp-cell{padding:30px 28px 32px}
.pp-home .pp-step-n{display:block;margin:0 0 26px;font-size:46px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#8f8b99;font-variant-numeric:tabular-nums}
.pp-home .pp-steps-list h3{margin:0 0 10px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--pp-ink)}
.pp-home .pp-steps-list p{margin:0;font-size:15px;line-height:1.6;color:var(--pp-muted)}

/* ---- Spotlights -------------------------------------------------------------------------- */
.pp-home .pp-spot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
/* Reversed rows put the visual first; source order stays text-then-visual for reading order. */
.pp-home .pp-spot-grid--rev .pp-spot-body{order:2}
.pp-home .pp-spot-grid--rev .pp-spot-visual{order:1}
.pp-home .pp-spot-body h2{margin:0 0 18px;font-size:clamp(28px,3.6vw,40px);line-height:1.1;font-weight:500;letter-spacing:-.028em;color:var(--pp-ink)}
.pp-home .pp-spot-body p{margin:0 0 26px;font-size:18px;line-height:1.55;color:var(--pp-muted);max-width:480px}
.pp-home .pp-spot-visual{position:relative;min-width:0}
.pp-home .pp-spot-visual.pp-hatch{padding:44px;border-radius:var(--pp-radius)}

/* Citation check */
.pp-check{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.pp-check .pp-check__claim{margin:0;padding:10px 12px;font-size:15px;font-weight:600;line-height:1.4;color:var(--pp-ink);background:#fff6d6;border:1px solid #f1df9a;border-radius:8px}
.pp-check .pp-check__box{display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px;font-size:13px;color:var(--pp-muted);border:1px solid var(--pp-line);border-radius:8px}
.pp-check .pp-check__box::before{content:'';width:14px;height:14px;flex-shrink:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366626e' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center/contain no-repeat}
.pp-check .pp-check__tools{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 0}
.pp-check .pp-check__tool{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--pp-ink);border:1px solid var(--pp-line);border-radius:6px;padding:3px 8px}
.pp-check .pp-check__label{margin:0 0 6px;font-size:12.5px;font-weight:600;color:var(--pp-muted)}
.pp-check .pp-check__src{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 12px;padding:9px 12px;margin:0 0 6px;border:1px solid var(--pp-line);border-radius:8px}
.pp-check .pp-check__who{display:block;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--pp-ink)}
.pp-check .pp-check__quote{display:block;grid-column:1;font-size:12.5px;line-height:1.45;color:var(--pp-muted)}
.pp-check .pp-check__cite{grid-column:2;grid-row:1/span 2;font-size:12px;font-weight:600;line-height:1.2;color:#fff;background:var(--pp-cta);border-radius:6px;padding:6px 12px}
.pp-check .pp-check__cite.is-cited{color:var(--pp-accent-deep);background:none;padding:6px 0}

/* Library search */
.pp-search{padding:20px}
.pp-search .pp-search__box{display:flex;align-items:center;gap:10px;margin:0;padding:6px 6px 6px 12px;border:1.5px solid var(--pp-cta);border-radius:10px;box-shadow:0 0 0 4px rgba(108,92,231,.12)}
.pp-search .pp-search__box::before{content:'';width:15px;height:15px;flex-shrink:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366626e' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center/contain no-repeat}
.pp-search .pp-search__q{font-size:14px;color:var(--pp-ink);min-width:0;overflow-wrap:anywhere}
.pp-search .pp-search__go{margin-left:auto;flex-shrink:0;font-size:12.5px;font-weight:600;line-height:1;color:#fff;background:var(--pp-cta);border-radius:7px;padding:8px 12px}
.pp-search .pp-search__count{margin:14px 0 10px;font-size:12.5px;color:var(--pp-muted)}
.pp-search .pp-search__hit{padding:12px 14px;margin:0 0 8px;border:1px solid var(--pp-line);border-radius:10px}
.pp-search .pp-search__hit:last-child{margin-bottom:0}
.pp-search .pp-search__title{margin:0;font-size:14px;font-weight:600;line-height:1.35;color:var(--pp-ink)}
.pp-search .pp-search__meta{margin:2px 0 0;font-size:12px;color:var(--pp-muted)}
.pp-search .pp-search__finding{margin:9px 0 0;padding:7px 9px;font-size:12.5px;line-height:1.45;color:var(--pp-ink);background:var(--pp-bg);border-radius:6px}
.pp-search .pp-search__tag{margin-right:7px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pp-accent-deep)}

/* Research assistant, on ink */
.pp-home .pp-section.pp-assist{padding:112px 0}
.pp-home .pp-assist .pp-kicker{color:var(--pp-accent)}
.pp-home .pp-assist .pp-spot-body h2,.pp-home .pp-assist .pp-list li{color:var(--pp-surface)}
.pp-home .pp-assist .pp-spot-body p{color:rgba(255,255,255,.72)}
.pp-home .pp-assist .pp-list li::before{filter:invert(1)}
/* The selection rewrite as v1 shows it: the selected sentence, and under it the preview with Accept, Discard, Try again. */
.pp-rw{padding:24px 22px 26px}
.pp-rw .pp-rw__p{margin:0;font-size:14.5px;line-height:1.75;color:#2c2935}
.pp-rw .pp-rw__sel{background:#dcd7fb;border-radius:3px;padding:2px 1px}
.pp-rw .pp-rw__panel{margin:10px 0 0;padding:12px;background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:10px;box-shadow:0 12px 28px -16px rgba(23,21,29,.4)}
.pp-rw .pp-rw__label{margin:0 0 8px;font-size:11.5px;font-weight:600;color:var(--pp-muted)}
.pp-rw .pp-rw__text{margin:0;font-size:13.5px;line-height:1.55;color:var(--pp-ink);background:#f6f5f3;border-radius:6px;padding:9px 10px}
.pp-rw .pp-rw__btns{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.pp-rw .pp-rw__btn{font-size:12px;font-weight:600;line-height:1.2;color:var(--pp-ink);background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:6px;padding:6px 12px}
.pp-rw .pp-rw__btn--yes{color:#fff;background:var(--pp-cta);border-color:var(--pp-cta)}
.pp-rw .pp-rw__btn--ghost{border-color:transparent}

/* Outline builder */
.pp-outline{list-style:none;margin:0;padding:14px}
.pp-outline .pp-outline__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;line-height:1.35;color:var(--pp-ink)}
.pp-outline .pp-outline__row.is-open{background:var(--pp-tint)}
.pp-outline .pp-outline__row--sub{padding-left:30px;font-weight:400;color:#3a3644}
.pp-outline .pp-outline__row.is-unwritten{color:var(--pp-muted)}
.pp-app .pp-outline__tpl{display:inline-block;margin:0 14px 18px 26px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--pp-accent-deep);background:var(--pp-tint);border-radius:6px}

/* ---- Comparison (jenni's "not another chatbot") ------------------------------------------ */
.pp-home .pp-compare-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:880px;margin:0 auto;background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:14px;overflow:hidden;padding:8px;gap:8px}
.pp-home .pp-compare-col{padding:26px 26px 14px;border-radius:9px}
.pp-home .pp-compare-col--us{background:var(--pp-cta);color:#fff}
.pp-home .pp-compare-h{display:flex;align-items:center;min-height:28px;margin:0 0 10px;font-size:15px;font-weight:600;color:var(--pp-ink)}
.pp-home .pp-compare-h img{display:block;height:24px;width:auto}
.pp-home .pp-compare-col ul{list-style:none;margin:0;padding:0}
.pp-home .pp-compare-col li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:15px 0;font-size:15px;line-height:1.5;border-top:1px solid var(--pp-line-soft);color:var(--pp-muted)}
.pp-home .pp-compare-col li::before{content:'';width:16px;height:16px;margin-top:2px;flex-shrink:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366626e' stroke-width='2.4' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center/contain no-repeat}
.pp-home .pp-compare-col--us li{color:#fff;border-top-color:rgba(255,255,255,.22);font-weight:500}
.pp-home .pp-compare-col--us li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}

/* ---- Feature tiles ----------------------------------------------------------------------- */
.pp-home .pp-feat-grid{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px}
.pp-home .pp-feat{padding:30px 28px}
.pp-home .pp-feat h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--pp-ink)}
.pp-home .pp-feat h3::before{content:'';width:18px;height:18px;flex-shrink:0;background:var(--pp-check) center/contain no-repeat}
.pp-home .pp-feat p{margin:0 0 0 28px;font-size:15px;line-height:1.55;color:var(--pp-muted)}

/* ---- Use cases --------------------------------------------------------------------------- */
.pp-home .pp-uses-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;max-width:880px}
.pp-home .pp-uses-list li{display:inline-flex;align-items:center;gap:9px;margin:0;padding:9px 16px 9px 13px;font-size:15px;font-weight:500;line-height:1.3;color:var(--pp-ink);background:var(--pp-surface);border:1px solid var(--pp-line);border-radius:999px}
.pp-home .pp-uses-list li::before{content:'';width:12px;height:14px;flex-shrink:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='%235040c8' stroke-width='2.2' stroke-linejoin='round'><path d='M3 2h9l5 5v15H3z'/><path d='M12 2v5h5M7 13h6M7 17h6'/></svg>") center/contain no-repeat}

/* ---- FAQ --------------------------------------------------------------------------------- */
.pp-home .pp-faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--pp-line)}
.pp-home .pp-faq-item{border-bottom:1px solid var(--pp-line)}
.pp-home .pp-faq-item summary{position:relative;cursor:pointer;list-style:none;padding:24px 48px 24px 0;font-size:18px;font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--pp-ink);transition:color .2s ease}
.pp-home .pp-faq-item summary::-webkit-details-marker{display:none}
.pp-home .pp-faq-item summary::after{content:'';position:absolute;right:4px;top:50%;width:16px;height:16px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317151d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/16px no-repeat;transform:translateY(-50%);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.pp-home .pp-faq-item[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.pp-home .pp-faq-item summary:hover{color:var(--pp-accent-deep)}
.pp-home .pp-faq-item p{margin:0;padding:0 0 24px;max-width:680px;font-size:16px;line-height:1.6;color:var(--pp-muted)}

/* ---- Closing band ------------------------------------------------------------------------ */
.pp-home .pp-section.pp-final{padding:0}
.pp-home .pp-final .pp-container{max-width:none;padding:0}
.pp-home .pp-final-card{padding:104px 24px;text-align:center}
.pp-home .pp-final-card h2{margin:0 auto 16px;max-width:18ch;font-size:clamp(30px,4vw,46px);line-height:1.08;font-weight:500;letter-spacing:-.03em;color:var(--pp-surface)}
.pp-home .pp-final-card h2 em{font-family:var(--pp-serif);font-style:italic;font-weight:400;font-size:1.12em;line-height:1;letter-spacing:-.01em;color:var(--pp-accent)}
.pp-home .pp-final-card p{margin:0 auto 30px;max-width:480px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.72)}

/* ---- Motion ------------------------------------------------------------------------------ */
/* Hidden state only when JS has run (the head script sets .pp-js), so no-JS shows everything. */
.pp-js .pp-home .pp-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.pp-js .pp-home .pp-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pp-js .pp-home .pp-reveal{opacity:1!important;transform:none!important;transition:none}}

/* ---- Narrow viewports (kept LAST: later rules win at equal specificity) ----------------- */
@media (max-width:900px){
  .pp-home .pp-section{padding:64px 0}
  .pp-home .pp-hero{padding:48px 0 40px}
  .pp-home .pp-section.pp-assist{padding:72px 0}
  .pp-home .pp-section.pp-final{padding:0}
  .pp-home .pp-final-card{padding:72px 24px}
  .pp-home .pp-container{padding:0 20px}
  .pp-home .pp-hero .pp-sub{font-size:17px}
  .pp-home .pp-hero-visual{margin-top:40px;padding:20px 14px}
  .pp-editor .pp-editor__body{grid-template-columns:minmax(0,1fr);min-height:0}
  .pp-editor .pp-editor__lib{display:none}
  .pp-editor .pp-editor__doc{padding:22px 20px 18px}
  .pp-home .pp-trust{padding:0 0 48px}
  .pp-home .pp-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-home .pp-steps-list,.pp-home .pp-feat-grid,.pp-home .pp-compare-grid{grid-template-columns:minmax(0,1fr)}
  .pp-home .pp-spot-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .pp-home .pp-spot-grid--rev .pp-spot-body{order:1}
  .pp-home .pp-spot-grid--rev .pp-spot-visual{order:2}
  .pp-home .pp-spot-visual.pp-hatch{padding:24px 14px}
  .pp-home .pp-title--center{margin-bottom:40px}
  .pp-home .pp-head{margin-bottom:36px}
}
@media (max-width:560px){
  .pp-home .pp-trust-list{grid-template-columns:minmax(0,1fr)}
  .pp-home .pp-hero-note{display:block;text-align:center}
  .pp-home .pp-hero-note::before{display:inline-block;vertical-align:-3px;margin-right:6px}
  .pp-home .pp-hero h1{font-size:clamp(36px,10vw,44px)}
  .pp-home .pp-ctas .pp-btn{flex:1 1 auto}
  .pp-home .pp-faq-item summary{font-size:16.5px}
}