/* La lettre de la petite souris. Mix: the structure of Yoto (a full-bleed first screen, big
   rounded panels, a curved band), the matter of L'école des loisirs (a deep night blue, flat
   framed illustrations, an editorial serif), the motion of Raycast (a soft glow behind the
   product, quick eased reveals, buttons that press), in the colours of our letters: the night
   of the drawn mouse, the gold of her lantern, the pink of her ears, the ivory paper.
   Everything lives under .ps, or under body:has(.ps-home). Radii: 12 small, 28 panels, 999 pills. */
@font-face { font-family: "Young Serif PS"; src: url("fonts/youngserif-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument PS"; src: url("fonts/instrument-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Kalam PS"; src: url("fonts/kalam-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ps-paper: #fbf7ef;
  --ps-cream: #f3ece0;
  --ps-card: #fffdf8;
  --ps-ink: #1d2b33;
  --ps-muted: #5f5750;
  --ps-line: #e4dccd;
  --ps-teal: #1f6f78;
  --ps-teal-deep: #16535b;
  --ps-night: #0d2e3c;
  --ps-night-2: #123a4a;
  --ps-moon: #f4ecdc;
  --ps-moon-muted: #c9d6d8;
  --ps-lantern: #eab65c;
  --ps-rose: #b4503f;
  --ps-rose-soft: #f6e2dc;
  --ps-gold: #b8862b;
  --ps-display: "Young Serif PS", Georgia, serif;
  --ps-text: "Instrument PS", system-ui, sans-serif;
  --ps-hand: "Kalam PS", "Comic Sans MS", cursive;
  --ps-ease: cubic-bezier(.23, 1, .32, 1);
  --ps-shadow: 0 1px 2px rgba(29, 43, 51, .06), 0 6px 14px -6px rgba(29, 43, 51, .12), 0 26px 48px -24px rgba(29, 43, 51, .32);
}

/* The whole site: paper, ink, fonts; shared pages (offers, guides, legal) too. */
body { background: var(--ps-paper); color: var(--ps-ink); font-family: var(--ps-text); }
h1, h2, h3, .brand { font-family: var(--ps-display); font-weight: 400; letter-spacing: -.01em; }
.brand-emoji { font-size: 0; display: inline-block; flex: 0 0 auto; width: 30px; height: 30px; background: url("logo.svg") center / contain no-repeat; vertical-align: middle; transition: transform .5s var(--ps-ease); }
.brand:hover .brand-emoji { transform: rotate(-8deg) translateY(-2px); }
.btn, button.btn { background: var(--ps-teal); border-radius: 999px; font-family: var(--ps-text); font-weight: 650; transition: transform .45s var(--ps-ease), background-color .2s, box-shadow .45s var(--ps-ease); }
.btn:hover { background: var(--ps-teal-deep); transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(22, 83, 91, .55); }
a { color: var(--ps-teal-deep); }
:focus-visible { outline: 3px solid var(--ps-gold); outline-offset: 2px; }

.ps { font-size: 1.0625rem; line-height: 1.6; }
.ps-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.ps h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.04; margin: 6px 0 18px; text-wrap: balance; }
.ps h1 em { font-style: normal; color: var(--ps-teal); }
.ps h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.ps h3 { font-size: 1.55rem; line-height: 1.15; margin: 0; }
.ps-kicker { font: 650 .78rem/1.3 var(--ps-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ps-rose); margin: 0 0 6px; }
.ps-lead { font-size: 1.15rem; color: var(--ps-muted); max-width: 34em; margin: 0 0 24px; text-wrap: balance; }
.ps-lead-short { display: none; text-wrap: balance; }
.ps-hero-thumb { display: none; }
.ps-hand { font-family: var(--ps-hand); }
.ps-small { font-size: .88rem; color: var(--ps-muted); margin: 12px 0 0; }

/* Buttons: pills that rise a little on hover (C), press down on tap. */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; font: 650 1.05rem/1.1 var(--ps-text); text-decoration: none; cursor: pointer; transition: transform .2s var(--ps-ease), box-shadow .4s var(--ps-ease), background-color .2s; }
.ps-btn:hover { transform: translateY(-1px); }
.ps-btn:active { transform: translateY(1px); transition-duration: .08s; }
.ps-btn-main { background: var(--ps-teal); color: #fff; box-shadow: 0 1px 2px rgba(13, 46, 60, .22), 0 6px 14px -8px rgba(13, 46, 60, .45); }
.ps-btn-main:hover { background: var(--ps-teal-deep); color: #fff; box-shadow: 0 1px 2px rgba(13, 46, 60, .22), 0 10px 20px -10px rgba(13, 46, 60, .5); }
.ps-btn-main:active { box-shadow: 0 1px 1px rgba(13, 46, 60, .3); }
.ps-btn-ghost { background: transparent; color: var(--ps-teal-deep); box-shadow: inset 0 0 0 2px var(--ps-teal); }
.ps-btn-ghost:hover { background: #eef5f4; }
.ps-btn-soft { background: var(--ps-cream); color: var(--ps-ink); min-height: 46px; font-size: .96rem; box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-link { font-weight: 650; color: var(--ps-teal-deep); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* Hero (A: the title and the form on the left, the real product on the right). */
.ps-hero { position: relative; padding: 40px 0 96px; overflow: hidden; color: var(--ps-moon); background:
  radial-gradient(1.5px 1.5px at 12% 22%, rgba(244, 236, 220, .9) 50%, transparent 51%),
  radial-gradient(1px 1px at 28% 68%, rgba(244, 236, 220, .7) 50%, transparent 51%),
  radial-gradient(2px 2px at 47% 12%, rgba(244, 236, 220, .8) 50%, transparent 51%),
  radial-gradient(1px 1px at 58% 84%, rgba(244, 236, 220, .6) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 66% 30%, rgba(244, 236, 220, .8) 50%, transparent 51%),
  radial-gradient(1px 1px at 88% 58%, rgba(244, 236, 220, .7) 50%, transparent 51%),
  radial-gradient(2px 2px at 94% 14%, rgba(244, 236, 220, .9) 50%, transparent 51%),
  radial-gradient(1px 1px at 6% 90%, rgba(244, 236, 220, .6) 50%, transparent 51%),
  radial-gradient(760px 520px at 76% 46%, rgba(234, 182, 92, .2), transparent 64%),
  linear-gradient(180deg, var(--ps-night), var(--ps-night-2)); }
.ps-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: var(--ps-paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ps-hero h1 { color: var(--ps-moon); }
.ps-hero h1 em { color: var(--ps-lantern); }
.ps-hero .ps-kicker { color: var(--ps-lantern); letter-spacing: .16em; }
.ps-hero .ps-lead, .ps-hero .ps-lead-short { color: var(--ps-moon-muted); }
.ps-moon { position: absolute; top: 34px; right: 7%; width: 46px; height: 46px; border-radius: 50%; box-shadow: -10px 6px 0 0 var(--ps-moon); transform: rotate(-18deg); opacity: .92; pointer-events: none; }
.ps-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; align-items: center; }
.ps-card { background: var(--ps-card); color: var(--ps-ink); border: 1px solid var(--ps-line); border-radius: 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 60px -24px rgba(0, 0, 0, .55); padding: 24px; }
.ps-hero .ps-small { color: var(--ps-muted); }
.ps-form label { font-weight: 650; font-size: .95rem; display: block; margin: 0 0 6px; }
.ps-form input[type="text"], .ps-form select { width: 100%; min-height: 54px; border: 1.5px solid var(--ps-line); border-radius: 12px; padding: 0 16px; font: 500 1.12rem var(--ps-text); background: #fff; color: var(--ps-ink); transition: border-color .2s, box-shadow .3s var(--ps-ease); }
.ps-form select { appearance: none; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231d2b33' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 14px no-repeat; padding-right: 44px; }
.ps-form input[type="text"]:focus, .ps-form select:focus { border-color: var(--ps-teal); outline: none; box-shadow: 0 0 0 4px rgba(31, 111, 120, .14); }
.ps-field { margin: 0 0 14px; }
.ps-form .ps-btn-main { width: 100%; margin-top: 2px; }
.ps-pills { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ps-pills legend { font-weight: 650; font-size: .95rem; margin: 0 0 8px; padding: 0; width: 100%; }
.ps-pills label { margin: 0; cursor: pointer; }
.ps-pills input { position: absolute; opacity: 0; pointer-events: none; }
.ps-pills span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border-radius: 999px; background: var(--ps-paper); border: 1.5px solid var(--ps-line); font-weight: 550; font-size: .93rem; transition: background-color .25s var(--ps-ease), border-color .25s var(--ps-ease), color .25s var(--ps-ease), transform .45s var(--ps-ease); }
.ps-pills span:hover { border-color: #c9bfae; transform: translateY(-1px); }
.ps-pills input:checked + span { background: var(--ps-teal); border-color: var(--ps-teal); color: #fff; }
.ps-pills input:focus-visible + span { outline: 3px solid var(--ps-gold); outline-offset: 2px; }
.ps-more { margin: 14px 0 0; border-top: 1px dashed var(--ps-line); padding-top: 12px; }
.ps-more summary { cursor: pointer; font-weight: 650; color: var(--ps-teal-deep); list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ps-more summary::-webkit-details-marker { display: none; }
.ps-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ps-teal); font-weight: 700; line-height: 1; transition: transform .35s var(--ps-ease); }
.ps-more[open] summary::before { transform: rotate(45deg); }
.ps-more summary span { font-weight: 450; color: var(--ps-muted); font-size: .88rem; }
.ps-more[open] > *:not(summary) { margin-top: 14px; }

/* The product on stage (B: paper laid on paper, layered soft shadows; C: a slow tilt). */
.ps-stage { position: relative; margin: 0; z-index: 1; }
.ps-stage::before { content: ""; position: absolute; inset: 8% 4% 10% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(234, 182, 92, .38), rgba(234, 182, 92, 0)); filter: blur(8px); z-index: -1; animation: ps-glow 7s ease-in-out infinite alternate; }
@keyframes ps-glow { from { opacity: .75; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
.ps-stage-letter { position: relative; display: block; width: min(92%, 500px); margin: 0 auto; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 30px 60px -24px rgba(0, 0, 0, .6); transform: rotate(-1.5deg); }
.ps-stage img, .ps-shot img { display: block; width: 100%; height: auto; }
.ps-stage-caption { margin: 22px auto 0; text-align: center; font-size: .95rem; color: var(--ps-moon-muted); }
.ps-stage-caption .ps-sticker { position: static; margin-right: 8px; vertical-align: 1px; }
.ps-sticker { position: absolute; z-index: 3; top: -10px; right: 10px; background: var(--ps-moon); color: var(--ps-night); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); font: 600 .78rem var(--ps-text); letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; }
.ps-tilt { transition: transform .7s var(--ps-ease), box-shadow .7s var(--ps-ease); will-change: transform; }
.ps-tilt:hover { box-shadow: 0 2px 4px rgba(29, 43, 51, .08), 0 18px 30px -12px rgba(29, 43, 51, .22), 0 44px 70px -30px rgba(29, 43, 51, .45); }
.ps-stage-letter:hover { transform: perspective(1000px) rotate(-.5deg) rotateY(-4deg) translateY(-6px); }
.ps-result-zone { padding: 24px 24px 56px; }

/* Band of four true facts (A: a full-width band). */
.ps-band { padding: 8px 0 8px; }
.ps-band ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 auto; }
.ps-band li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; line-height: 1.4; padding: 18px 18px; border-radius: 20px; background: var(--ps-card); border: 1px solid var(--ps-line); color: var(--ps-muted); }
.ps-band svg { flex: none; color: var(--ps-teal); }
.ps-band strong { color: var(--ps-ink); font-weight: 650; }

/* « Voici exactement ce que vous recevez ». */
.ps-intro { padding: 88px 24px 16px; text-align: center; max-width: 820px; }
.ps-intro p:last-child { color: var(--ps-muted); font-size: 1.1rem; }

/* One section per product, picture and text in turn (A), each picture on a big rounded panel. */
.ps-product { padding: 64px 0; }
.ps-alt { background: var(--ps-cream); }
.ps-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ps-alt .ps-product-grid > .ps-shot { order: 2; }
.ps-shot { position: relative; padding: 48px 40px; border-radius: 28px; background: var(--ps-cream); display: grid; place-items: center; }
.ps-alt .ps-shot { background: var(--ps-paper); }
.ps-shot-night { background: radial-gradient(420px 340px at 50% 45%, rgba(234, 182, 92, .28), transparent 70%), linear-gradient(180deg, var(--ps-night), var(--ps-night-2)); }
.ps-shot-night .ps-sticker { background: var(--ps-moon); }
.ps-shot > .ps-sticker { top: auto; right: auto; bottom: 14px; left: 24px; background: var(--ps-card); color: var(--ps-ink); box-shadow: inset 0 0 0 1px var(--ps-line); }
.ps-shot { padding-bottom: 64px; }
.ps-shot-rose { background: var(--ps-rose-soft); }
.ps-shot-page { position: relative; display: block; width: min(78%, 360px); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: var(--ps-shadow); transform: rotate(-1.5deg); }
.ps-shot-page:hover { transform: perspective(1000px) rotate(0) rotateY(-6deg) translateY(-8px); }
.ps-shot-note { position: relative; display: block; width: 100%; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: var(--ps-shadow); transform: rotate(1.5deg); }
.ps-shot-note:hover { transform: perspective(1000px) rotate(0) rotateY(5deg) translateY(-8px); }
.ps-shot-disc { position: absolute; right: 14px; top: 18px; width: 112px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: var(--ps-shadow); transition: transform .7s var(--ps-ease); }
.ps-shot-disc:hover { transform: scale(1.06) rotate(-4deg); }
.ps-shot-disc img { width: 100%; height: 100%; object-fit: cover; }
.ps-typed { align-self: start; justify-self: start; max-width: 320px; margin: 0 0 18px; padding: 12px 16px; background: #fff; border: 1px dashed #cdbfa9; border-radius: 12px; font: italic 500 1rem/1.45 var(--ps-text); color: var(--ps-ink); }
.ps-typed small { display: block; font: 650 .72rem var(--ps-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ps-muted); margin-bottom: 4px; }
.ps-shot .teaser-zoom-label { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }
.ps-copy p { color: var(--ps-muted); }
.ps-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 12px 0 14px; }
.ps-copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.15rem); line-height: 1.1; }
.ps-price { font: 400 1.7rem var(--ps-display); color: var(--ps-teal-deep); white-space: nowrap; }
.ps-tag { display: inline-block; font: 650 .74rem/1 var(--ps-text); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--ps-rose); padding: 7px 12px; border-radius: 999px; }
.ps-tag-soft { background: var(--ps-rose-soft); color: #7d3426; }
.ps-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.ps-list li { position: relative; padding-left: 30px; }
.ps-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ps-teal); background: radial-gradient(circle, var(--ps-teal) 0 3px, transparent 3.5px); }

/* Small products in tiles. */
.ps-tiles { padding: 24px 0 72px; }
.ps-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ps-tile { background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: 12px; padding: 28px; transition: transform .6s var(--ps-ease), box-shadow .6s var(--ps-ease); }
.ps-tile:hover { transform: translateY(-4px); box-shadow: var(--ps-shadow); }
.ps-tile-head { display: flex; justify-content: space-between; gap: 12px; font: 400 1.4rem var(--ps-display); margin-bottom: 8px; }
.ps-tile-head strong { font-weight: 400; }
.ps-tile p { color: var(--ps-muted); }
.ps-tile-warm { background: var(--ps-rose-soft); border-color: #eccdc3; }
.ps-tile-warm > strong { font: 400 1.4rem var(--ps-display); display: block; margin-bottom: 8px; }

/* How it works (B: ringed round badges). */
.ps-how { padding: 112px 0 96px; background: linear-gradient(180deg, var(--ps-night), var(--ps-night-2)); color: var(--ps-moon); border-radius: 50% 50% 0 0 / 72px 72px 0 0; margin-top: 24px; }
.ps-how h2 { text-align: center; margin-bottom: 48px; color: var(--ps-moon); }
.ps-how .ps-steps p { color: var(--ps-moon-muted); }
.ps-how .ps-step-n { border-color: var(--ps-lantern); background: transparent; color: var(--ps-lantern); box-shadow: 0 0 0 8px rgba(234, 182, 92, .1); }
.ps-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ps-steps li { position: relative; text-align: center; }
.ps-step-n { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ps-ink); background: var(--ps-paper); font: 400 1.6rem var(--ps-display); margin-bottom: 16px; }
.ps-steps h3 { font-size: 1.35rem; margin-bottom: 8px; }
.ps-steps p { color: var(--ps-muted); margin: 0 auto; max-width: 22em; }
.ps-postit { display: inline-block; margin-top: 14px; padding: 8px 14px; background: #fff; border-radius: 6px; box-shadow: 0 6px 16px -10px rgba(29, 43, 51, .4); font-size: 1rem; font-style: italic; color: var(--ps-teal-deep); }

/* Trust, public pages, FAQ, footer. */
.ps-trust { padding: 80px 0; }
.ps-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.ps-trust h2 { font-size: 1.75rem; }
.ps-trust p { color: var(--ps-muted); }
.ps-guides { padding: 0 0 56px; }
.ps-guides h2 { font-size: 1.6rem; }
.ps-guides ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ps-guides a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ps-line); background: var(--ps-card); text-decoration: none; font-weight: 550; color: var(--ps-ink); transition: border-color .2s, transform .45s var(--ps-ease); }
.ps-guides a:hover { border-color: var(--ps-teal); transform: translateY(-2px); }
.ps-faq { padding: 24px 0 88px; }
.ps-faq .ps-wrap { max-width: 820px; }
.ps-faq details { border-bottom: 1px solid var(--ps-line); padding: 18px 0; }
.ps-faq summary { cursor: pointer; font: 400 1.25rem var(--ps-display); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ps-ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231d2b33' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .45s var(--ps-ease); }
.ps-faq details[open] summary::after { transform: rotate(180deg); }
.ps-faq details p { color: var(--ps-muted); margin: 10px 0 0; }
.ps-foot { background: var(--ps-night); color: var(--ps-moon-muted); padding: 56px 0 40px; }
.ps-foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.ps-foot-brand { display: flex; align-items: center; gap: 10px; font: 400 1.25rem var(--ps-display); color: #fff; margin: 0 0 10px; }
.ps-foot-brand img { width: 34px; height: 34px; background: var(--ps-paper); border-radius: 50%; padding: 3px; }
.ps-foot h2 { font: 650 .78rem var(--ps-text) !important; letter-spacing: .14em; text-transform: uppercase; color: #e9c27a; margin: 0 0 12px; }
.ps-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ps-foot a { color: #fff; text-decoration: none; }
.ps-foot a:hover { text-decoration: underline; }
.ps-foot p { margin: 0 0 8px; }

/* The free result: the note on paper, the diploma, and the full version beside it. */
.ps-res { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: start; text-align: left; }
.ps-res-title { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.ps-res-lead { color: var(--ps-muted); }
.ps-paper { position: relative; background: #fffdf7; border-radius: 6px; padding: 36px 36px 28px; box-shadow: var(--ps-shadow); margin: 18px 0 24px; border: 1px solid #efe6d4; }
.ps-paper::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(31, 111, 120, .35); border-radius: 4px; pointer-events: none; }
.ps-paper-label { font: 650 .74rem var(--ps-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ps-rose); margin: 0 0 12px; }
.ps-paper .ps-hand { font-size: 1.3rem; line-height: 1.45; margin: 0 0 10px; }
.ps-hand-big { font-size: 1.55rem !important; color: var(--ps-teal-deep); }
.ps-sign { text-align: right; color: var(--ps-teal-deep); font-size: 1.55rem !important; }
.ps-sign small { display: block; font: 500 .82rem var(--ps-text); color: var(--ps-muted); }
.ps-diploma { position: relative; text-align: center; background: #fffdf7; border: 2px solid var(--ps-gold); outline: 1px solid var(--ps-gold); outline-offset: -10px; border-radius: 6px; padding: 34px 28px 26px; box-shadow: var(--ps-shadow); }
.ps-diploma-kicker { font: 650 .74rem var(--ps-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ps-muted); margin: 0; }
.ps-diploma-title { font-size: 1.9rem !important; color: var(--ps-teal-deep); margin: 6px 0 4px !important; }
.ps-diploma-to { margin: 0; color: var(--ps-muted); }
.ps-diploma-name { font: 700 2.4rem/1.1 var(--ps-hand); color: var(--ps-ink); margin: 0 0 6px; }
.ps-diploma-why { margin: 0 0 6px; }
.ps-diploma-mention { font-weight: 650; color: var(--ps-rose); margin: 0 0 18px; }
.ps-diploma-foot { display: flex; justify-content: space-between; color: var(--ps-muted); font-size: .9rem; }
.ps-diploma-foot .ps-hand { font-size: 1.3rem; color: var(--ps-teal-deep); }
.ps-print { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.ps-res-offer { position: sticky; top: 20px; background: var(--ps-card); border: 1px solid var(--ps-line); border-radius: 12px; padding: 26px; box-shadow: var(--ps-shadow); }
.ps-res-offer h2 { font-size: 1.7rem; }
.ps-res-pic { position: relative; display: block; width: 62%; margin: 6px auto 18px; border-radius: 6px; overflow: hidden; box-shadow: var(--ps-shadow); }
.ps-res-pic img { display: block; width: 100%; height: auto; }
.ps-compare { display: grid; grid-template-columns: 1fr 1fr; font-size: .9rem; border: 1px solid var(--ps-line); border-radius: 12px; overflow: hidden; margin: 0 0 18px; }
.ps-compare > div { padding: 9px 12px; border-top: 1px solid var(--ps-line); }
.ps-compare > div:nth-child(-n+2) { border-top: 0; font-weight: 650; background: var(--ps-cream); }
.ps-compare > div:nth-child(even) { background: #f2f8f7; }
.ps-compare > div:nth-child(2) { background: var(--ps-teal); color: #fff; }
.ps-compare .no { color: var(--ps-muted); }
.ps-res-offer .ps-btn-main { width: 100%; }
.ps-facts { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; gap: 4px; font-size: .88rem; color: var(--ps-muted); }
.ps-facts li::before { content: "· "; color: var(--ps-teal); font-weight: 700; }
.ps-res-small { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 16px; border: 1.5px solid var(--ps-line); border-radius: 12px; text-decoration: none; color: var(--ps-ink); transition: border-color .2s, transform .45s var(--ps-ease); }
.ps-res-small:hover { border-color: var(--ps-teal); transform: translateY(-2px); }
.ps-res-small small { color: var(--ps-muted); }
.ps-res-small b { font: 400 1.2rem var(--ps-display); color: var(--ps-teal-deep); }

/* Offer forms and hints. */
.ps-offer-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-hint { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--ps-rose-soft); font-size: .95rem; }

/* Public pages: the illustrated letter in a band. */
.ps-guide { margin: 8px 0 24px; }
.ps-guide-band { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 16px; border-radius: 12px; background: var(--ps-cream); text-decoration: none; color: var(--ps-ink); transition: transform .6s var(--ps-ease), box-shadow .6s var(--ps-ease); }
.ps-guide-band:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow); }
.ps-guide-band img { width: 110px; height: auto; border-radius: 4px; box-shadow: var(--ps-shadow); }
.ps-guide-band small { display: block; color: var(--ps-rose); font-weight: 650; }
.ps-guide-band strong { display: block; font: 400 1.2rem/1.25 var(--ps-display); margin: 2px 0 6px; }
.ps-guide-band em { font-style: normal; font-weight: 650; color: var(--ps-teal-deep); text-decoration: underline; text-underline-offset: 4px; }

/* The shared bar and footer of the home page. */
body:has(.ps-home) .topbar { max-width: 1160px; padding: 14px 24px; background: var(--ps-night); border-bottom: 0; box-shadow: 0 0 0 100vmax var(--ps-night); clip-path: inset(0 -100vmax); }
body:has(.ps-home) .topbar, body:has(.ps-home) .topbar a, body:has(.ps-home) .topbar .brand { color: var(--ps-moon); }

/* Appear on scroll (C: a slow rise), only when the script runs. */
.ps-js .ps-reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ps-ease), transform .4s var(--ps-ease); transition-delay: var(--ps-delay, 0ms); }
.ps-js .ps-reveal.ps-in { opacity: 1; transform: none; }

/* Printing one block only. */
@media print {
  body.printing * { visibility: hidden; }
  body.printing .print-target, body.printing .print-target * { visibility: visible; }
  body.printing .print-target { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
}

@media (max-width: 900px) {
  .ps-hero { padding: 20px 0 48px; }
  .ps-hero-grid, .ps-product-grid, .ps-res, .ps-trust-grid, .ps-foot-grid, .ps-tiles-grid { grid-template-columns: 1fr; gap: 32px; }
  .ps-alt .ps-product-grid > .ps-shot { order: 0; }
  .ps-band ul { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ps-steps { grid-template-columns: 1fr; gap: 32px; }
  .ps-stage-letter { width: min(82%, 420px); }
  .ps-hero-thumb { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px 14px 8px 8px; border-radius: 12px; background: rgba(244, 236, 220, .08); border: 1px solid rgba(244, 236, 220, .18); color: var(--ps-moon); text-decoration: none; }
  .ps-hero-thumb img { width: 54px; height: auto; border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
  .ps-hero-thumb strong { display: block; font-weight: 650; font-size: .95rem; }
  .ps-hero-thumb small { display: block; color: var(--ps-moon-muted); font-size: .82rem; }
  .ps-res-offer { position: static; }
  .ps-intro { padding-top: 64px; }
  .ps-product { padding: 48px 0; }
}
@media (max-width: 560px) {
  .ps-wrap { padding: 0 16px; }
  .ps h1 { font-size: 2.35rem; margin-bottom: 10px; }
  .ps-lead { display: none; }
  .ps-lead-short { display: block; color: var(--ps-muted); margin: 0 0 14px; font-size: 1.02rem; }
  .ps-card { padding: 18px; }
  .ps-pills span { min-height: 40px; padding: 0 12px; font-size: .88rem; }
  .ps-more summary span { display: none; }
  .ps-shot { padding: 28px 18px; }
  .ps-shot-disc { width: 76px; right: 6px; top: 10px; border-width: 4px; }
  .ps-band ul { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ps-band li { padding: 14px 12px; font-size: .9rem; flex-direction: column; gap: 6px; }
  .ps-moon { display: none; }
  .ps-how { border-radius: 50% 50% 0 0 / 36px 36px 0 0; padding-top: 80px; }
  body:has(.ps-home) .topbar { padding: 10px 16px; }
  .ps-hero { padding-top: 12px; }
  .ps-hero .ps-hero-grid { gap: 18px; }
  .ps-hero .ps-small { font-size: .82rem; margin-top: 8px; }
  .ps-field { margin-bottom: 10px; }
  .ps-pills { margin-bottom: 10px; gap: 6px; }
  .ps-more { margin-top: 10px; padding-top: 10px; }
  .ps-paper { padding: 28px 22px 20px; }
  .ps-offer-form .row { grid-template-columns: 1fr; gap: 0; }
  .ps-guide-band { grid-template-columns: 80px 1fr; }
  .ps-guide-band img { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-stage::before { animation: none; }
  .ps-tilt, .ps-btn, .btn, .ps-pills span, .ps-tile, .ps-guides a, .ps-res-small, .ps-shot-disc, .ps-guide-band, .ps-faq summary::after { transition: none !important; transform: none !important; }
  .ps-js .ps-reveal { opacity: 1; transform: none; transition: none; }
}