/* The language section. Every rule starts at .par-lang; host tokens with fallbacks. */
.par-lang {
  --pl-bg: var(--bg, #f7f0e1);
  --pl-deep: var(--bg-deep, #ede1ca);
  --pl-surface: var(--surface, #fffdf8);
  --pl-text: var(--text, #211a10);
  --pl-muted: var(--text-muted, #6e6350);
  --pl-faint: var(--text-faint, #8a7f68);
  --pl-border: var(--border, #e9dec7);
  --pl-strong: var(--border-strong, #d8cbaa);
  --pl-ink: var(--accent, #2b231b);
  --pl-act: var(--act-ink, #496c99);
  /* the illustration kit's tokens (par-site-illustration-kit), with its values as fallbacks */
  --pl-panel: var(--pil-panel, #d8e5f5);
  --pl-panel-r: var(--pil-panel-r, clamp(20px, 3vw, 40px));
  --pl-cobalt: var(--pil-cobalt, #2747b0);
  --pl-serif: var(--font-display, "Newsreader", Georgia, serif);
  --pl-sans: var(--font-body, "Geist", system-ui, sans-serif);
  --pl-mono: var(--font-mono, "JetBrains Mono", Menlo, monospace);
  --pl-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --pl-top: var(--par-lang-top, 0px);
  --par-lang-p: 0;
  --p: var(--par-lang-p);
  color: var(--pl-text);
  font-family: var(--pl-sans);
}

/* as on every page: a small cobalt line above the title, one keyword bold italic */
.par-lang .par-lang-kicker { margin: 0; font: italic 400 clamp(19px, 1.7vw, 23px)/1.3 var(--pl-serif); color: var(--pl-cobalt); }
.par-lang .par-lang-title { margin: 18px 0 0; font: 400 clamp(38px, 4.8vw, 60px)/1.03 var(--pl-serif); letter-spacing: -0.015em; text-wrap: balance; }
.par-lang .par-lang-yours { display: block; }
.par-lang .par-lang-key { font-style: italic; font-weight: 700; letter-spacing: -0.025em; }
.par-lang .par-lang-title:focus:not(:focus-visible) { outline: none; }

/* what Par already knows, inside step 1: a soft yellow pill with the crayon brain */
.par-lang .par-lang-knows { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 6px 16px 6px 6px; border-radius: 99px; background: #fff3c9; font: 500 15px/1.35 var(--pl-sans); color: var(--pl-text); max-width: 34em; }
.par-lang .par-lang-knows img { flex: none; width: 36px; height: auto; }

/* the two steps: one sentence each, the details one click down */
.par-lang .par-lang-steps { list-style: none; margin: 28px 0 0; padding: 0; }
.par-lang .par-lang-step { padding: 22px 0; border-top: 1px solid var(--pl-border); }
.par-lang .par-lang-step h3 { margin: 0; max-width: 22em; font: 400 clamp(23px, 2.3vw, 30px)/1.22 var(--pl-serif); text-wrap: pretty; }
.par-lang .par-lang-n { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 8px; border-radius: 50%; background: var(--pl-ink); color: var(--pl-surface); font: 600 .5em/1 var(--pl-sans); vertical-align: .3em; }
.par-lang .par-lang-live { margin: 10px 0 0; max-width: 26em; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--pl-cobalt) 45%, transparent); font: italic 400 clamp(17px, 1.5vw, 20px)/1.35 var(--pl-serif); color: var(--pl-cobalt); }
.par-lang .par-lang-shot:not([hidden]) { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: center; margin-top: 16px; }
.par-lang .par-lang-shot:has(> .par-lang-desk) { grid-template-columns: 1fr 1fr; }
.par-lang .par-lang-shot img, .par-lang .par-lang-also { display: block; width: 100%; height: auto; border-radius: 14px; }
.par-lang .par-lang-shot .par-lang-draw { border-radius: 0; }
/* The pale blue panel sits behind the middle band of every drawing; heads and feet break out of it. */
.par-lang :is(.par-lang-art, .pl-draw) { position: relative; isolation: isolate; display: block; }
.par-lang :is(.par-lang-art, .pl-draw)::before { content: ""; position: absolute; inset: 15% 0 9%; z-index: -1; background: var(--pl-panel); border-radius: var(--pl-panel-r); }
.par-lang .par-lang-also { margin-top: 14px; max-width: 34em; box-shadow: 0 0 0 1px rgba(60, 40, 10, .14); }

.par-lang details > summary { cursor: pointer; list-style: none; }
.par-lang details > summary::-webkit-details-marker { display: none; }
.par-lang details > summary::after { content: "+"; display: inline-block; margin-left: 8px; transition: transform 200ms var(--pl-ease); }
.par-lang details[open] > summary::after { transform: rotate(45deg); }
/* a finger needs 44 px: on a touch screen a clear layer makes the open links that tall, and they look the same */
@media (pointer: coarse) {
  .par-lang details > summary { position: relative; }
  .par-lang details > summary::before { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); }
}
.par-lang .par-lang-open { margin-top: 14px; }
.par-lang .par-lang-open > summary { display: inline-block; font: 500 14px/1.3 var(--pl-sans); color: var(--pl-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.par-lang .par-lang-open > p, .par-lang .par-lang-started > p:not(.par-lang-started-k) { margin: 12px 0 0; max-width: 32em; font-size: 15.5px; line-height: 1.55; color: #3d3325; }
.par-lang .par-lang-open > p:first-of-type { color: var(--pl-text); }
.par-lang .par-lang-started { margin-top: 14px; padding: 14px 16px 16px; border-radius: 14px; background: var(--pl-deep); }
.par-lang .par-lang-started > p:first-of-type { margin-top: 0; }
.par-lang .par-lang-started-k { margin: 0; font: 12px var(--pl-mono); color: var(--pl-muted); }
.par-lang .par-lang-started-shots { display: grid; grid-template-columns: 1fr 1fr .62fr; gap: 10px; align-items: start; margin-top: 12px; }
.par-lang .par-lang-started-shots img { display: block; width: 100%; height: auto; border-radius: 10px; }
.par-lang .par-lang-call { position: relative; display: block; }
.par-lang .par-lang-call svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.par-lang .par-lang-loop { fill: none; stroke: var(--pl-ink); stroke-width: 7; stroke-linecap: round; }


/* after the steps: the one thing to do next, why Par (the site's comparison table), the
   questions and the way on */
.par-lang .par-lang-why { margin-top: 36px; }
.par-lang .par-lang-why-t { margin: 0; font: 400 clamp(28px, 3vw, 40px)/1.08 var(--pl-serif); letter-spacing: -0.01em; }
.par-lang .par-lang-why-t em { font-style: italic; color: var(--pl-ink); }
.par-lang .par-lang-why-lead { margin: 12px 0 0; max-width: 36em; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #3d3325; }
/* the site's comparison table (the pattern of "How Par works", section 08): thin lines, Par set apart */
.par-lang .par-lang-cmp { width: 100%; margin-top: clamp(24px, 3vw, 36px); border-collapse: collapse; font-size: 14.5px; line-height: 1.42; }
.par-lang .par-lang-cmp th, .par-lang .par-lang-cmp td { text-align: left; vertical-align: top; padding: 13px 14px; border-top: 1px solid var(--pl-strong); }
.par-lang .par-lang-cmp thead th { font: 400 19px var(--pl-serif); border-top: 0; padding-bottom: 10px; }
.par-lang .par-lang-cmp thead td { border-top: 0; }
.par-lang .par-lang-cmp thead th.is-par { background: var(--pl-ink); color: #fff8ee; border-radius: 10px 10px 0 0; }
.par-lang .par-lang-cmp tbody th { font: 12px/1.45 var(--pl-mono); color: var(--pl-muted); font-weight: 400; width: 17%; }
.par-lang .par-lang-cmp td { color: var(--pl-muted); }
.par-lang .par-lang-cmp td.is-par { color: var(--pl-text); background: rgba(43, 35, 27, .05); width: 24%; }
.par-lang .par-lang-why-others { margin: 18px 0 0; max-width: 46em; font: 13.5px/1.55 var(--pl-sans); color: var(--pl-muted); }
.par-lang .par-lang-why-note { margin: 8px 0 0; font: 11.5px/1.6 var(--pl-mono); color: var(--pl-faint); }
@media (max-width: 859px) {
  .par-lang .par-lang-cmp, .par-lang .par-lang-cmp tbody, .par-lang .par-lang-cmp tr, .par-lang .par-lang-cmp th, .par-lang .par-lang-cmp td { display: block; width: auto !important; }
  .par-lang .par-lang-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .par-lang .par-lang-cmp tr { padding: 4px 0 10px; border-top: 1px solid var(--pl-strong); }
  .par-lang .par-lang-cmp tbody th { border-top: 0; padding: 12px 0 4px; font-size: 12px; color: var(--pl-text); }
  .par-lang .par-lang-cmp td { border-top: 0; padding: 6px 0 6px 132px; position: relative; min-height: 28px; }
  .par-lang .par-lang-cmp td::before { content: attr(data-col); position: absolute; left: 0; top: 7px; width: 120px; font: 11px/1.4 var(--pl-mono); color: var(--pl-muted); }
  .par-lang .par-lang-cmp td.is-par { padding: 9px 12px 9px 132px; border-radius: 8px; }
  .par-lang .par-lang-cmp td.is-par::before { left: 12px; top: 10px; color: var(--pl-ink); }
}
@media (max-width: 419px) {
  .par-lang .par-lang-cmp td, .par-lang .par-lang-cmp td.is-par { padding: 22px 0 6px; }
  .par-lang .par-lang-cmp td.is-par { padding: 24px 12px 9px; }
  .par-lang .par-lang-cmp td::before { top: 4px; width: auto; }
  .par-lang .par-lang-cmp td.is-par::before { top: 7px; }
}
.par-lang .par-lang-after { margin-top: 26px; }
.par-lang .par-lang-faq { margin-top: 0; }
.par-lang .par-lang-faq > summary { font: 500 14px/1.3 var(--pl-sans); color: var(--pl-muted); }
.par-lang .par-lang-faq dl { margin: 10px 0 0; max-width: 34em; }
.par-lang .par-lang-faq dt { margin-top: 12px; font-weight: 500; }
.par-lang .par-lang-faq dd { margin: 3px 0 0; color: #3d3325; }
.par-lang .par-lang-more { margin: 22px 0 0; font: italic 400 21px var(--pl-serif); }
.par-lang .par-lang-more a { color: var(--pl-ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }

.par-lang .par-lang-switch { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 28px; }
.par-lang .par-lang-choice { appearance: none; margin: 0; padding: 9px 14px; min-height: 40px; border: 1px solid var(--pl-strong); border-radius: 11px; background: transparent; font: 14px/1.2 var(--pl-sans); color: var(--pl-text); cursor: pointer; }
.par-lang .par-lang-choice[aria-pressed=true] { background: var(--pl-surface); color: var(--pl-text); border-color: var(--pl-surface); box-shadow: 0 1px 3px rgba(60, 40, 10, .22); }
.par-lang :is(.par-lang-choice, .par-lang-more a, summary):focus-visible { outline: 2px solid var(--pl-act); outline-offset: 2px; }
/* a finger needs 44 px: on a touch screen or a narrow window the story buttons grow to 44, like the EN/PT switch on the legal pages */
@media (max-width: 899px), (pointer: coarse) {
  .par-lang .par-lang-choice { min-height: 44px; }
}
.par-lang .pl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* live: the stage follows the open panel's steps */
.par-lang.is-live .par-lang-step { transition: opacity 240ms var(--pl-ease); }
.par-lang.is-live[data-step] .par-lang-step:not([aria-current]) { opacity: .35; }
.par-lang.is-live .par-lang-figure { display: flex; flex-direction: column; gap: 8px; background: var(--pl-bg); }
.par-lang.is-live .par-lang-switch { margin-top: 0; }
.par-lang .pl-stage { flex: 1; min-height: 0; display: flex; overflow-x: clip; }
.par-lang .pl-view { position: relative; flex: 1; min-height: 220px; cursor: pointer; }
.par-lang .pl-canvas {
  --k: 1; --cw: 760px; --ch: 640px;
  position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch);
  transform: translate(-50%, -50%) scale(var(--k));
  font-size: 15px; line-height: 1.4;
}
.par-lang .pl-canvas.is-entering { animation: par-lang-in 360ms var(--pl-ease); }
.par-lang .pl-canvas.is-leaving { animation: par-lang-out 360ms var(--pl-ease) forwards; }
@keyframes par-lang-in { from { opacity: 0; } }
@keyframes par-lang-out { to { opacity: 0; visibility: hidden; } }

/* Wide: the stage holds 60% of the width. */
@media (min-width: 900px) {
  /* The story (stage, steps) is the grid; the stage stays pinned only while the story scrolls,
     so the title before it, and the comparison and the questions
     after it, are never under it. */
  .par-lang.is-live .par-lang-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.35fr); column-gap: clamp(28px, 3.5vw, 56px); align-items: start; }
  .par-lang.is-live .par-lang-story > * { grid-column: 1; }
  .par-lang.is-live .par-lang-head { padding-top: 6vh; }
  .par-lang.is-live .par-lang-title { font-size: clamp(32px, 3.2vw, 46px); }
  /* The stage is pinned only inside the steps' row, which ends with step 2: the room under it keeps
     the stage still while step 2 is read, and only then lets it go. */
  .par-lang.is-live .par-lang-panel { grid-row: 1; margin-top: 6vh; margin-bottom: 22vh; }
  .par-lang.is-live .par-lang-after { margin-bottom: 16vh; }
  .par-lang.is-live .par-lang-figure { grid-column: 2; grid-row: 1; position: sticky; top: var(--pl-top); height: calc(100vh - var(--pl-top)); max-height: 960px; padding: 12px 0; }
  .par-lang.is-live .par-lang-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: 0; }
  .par-lang.is-live .par-lang-step h3 { font-size: clamp(22px, 1.9vw, 27px); }
  .par-lang.is-live .par-lang-started-shots { grid-template-columns: 1fr 1fr; }
  .par-lang.is-live .par-lang-started-shots > img:last-child { grid-column: 1 / -1; width: 46%; justify-self: center; }
}

/* Phones: each step fills the strip under the stage. */
@media (max-width: 899px) {
  .par-lang.is-live { --pl-stage-h: clamp(320px, 66svh, 680px); }
  .par-lang.is-live .par-lang-figure { position: sticky; top: var(--pl-top); z-index: 1; height: var(--pl-stage-h); margin-top: 22px; padding: 8px 0 10px; box-shadow: 0 14px 18px -16px rgba(70, 45, 10, .35); }
  .par-lang.is-live .par-lang-steps { margin-top: 0; }
  .par-lang.is-live .par-lang-step { min-height: max(160px, calc(100svh - var(--pl-top) - var(--pl-stage-h))); padding-top: 16px; border-top: 0; }
  /* With a step's details open, reading wins: the stage stops following and the details get the screen. */
  .par-lang.is-live:has(.par-lang-open[open]) .par-lang-figure { position: relative; }
}
@media (max-width: 480px) {
  .par-lang .par-lang-choice { flex: 1; padding: 8px 10px; font-size: 13px; }
  .par-lang .par-lang-step h3, .par-lang.is-live .par-lang-step h3 { font-size: 19px; }
  .par-lang .par-lang-live { font-size: 15.5px; }
  .par-lang .par-lang-started { padding: 12px; }
  .par-lang .par-lang-started-shots { grid-template-columns: 1fr 1fr; }
  .par-lang .par-lang-started-shots > img:last-child { grid-column: 1 / -1; width: 60%; justify-self: center; }
}

/* the stage: one layer per step, the crayon drawing of the person and the app beside it */
.par-lang .pl-canvas > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.par-lang .pl-shot { display: block; width: 100%; height: auto; }
.par-lang .pl-step { opacity: var(--o); }
/* each step holds half the progress; the last one stays to the end */
.par-lang .pl-step-1 { --o: calc(1 - clamp(0, (var(--p) - .47) / .05, 1)); --z: clamp(0, (var(--p) - .03) / .05, 1); }
.par-lang .pl-step-2 { --o: clamp(0, (var(--p) - .48) / .05, 1); --z: clamp(0, (var(--p) - .52) / .05, 1); }
/* the drawing first; then the screen it is using comes up beside it */
.par-lang .pl-draw { position: absolute; left: 0; top: 50%; width: 480px; transform: translateY(-50%); }
.par-lang .pl-zoom {
  position: absolute; container-type: inline-size; border-radius: 22px; z-index: 1;
  box-shadow: 0 24px 50px -30px rgba(40, 25, 10, .65), 0 0 0 1px rgba(60, 40, 10, .18);
  opacity: var(--z); transform: translateY(calc((1 - var(--z)) * 18px)) scale(calc(.92 + .08 * var(--z)));
}
.par-lang .pl-zoom > .pl-shot { border-radius: 22px; }
.par-lang .is-phone > .pl-zoom { left: 512px; top: 40px; width: 240px; }
.par-lang .is-desk > .pl-draw { top: auto; bottom: 16px; width: 400px; transform: none; }
.par-lang .is-desk > .pl-zoom { left: 330px; top: 26px; width: 430px; border-radius: 14px; }
.par-lang .is-desk > .pl-zoom > .pl-shot { border-radius: 14px; }
.par-lang .pl-zoom > :not(.pl-shot) { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.par-lang .pl-zoom .pl-on { --on: min(clamp(0, (var(--p) - var(--a0)) / .012, 1), clamp(0, (var(--a1) - var(--p)) / .012, 1)); opacity: var(--on); }
.par-lang .pl-ring { border-radius: 1.6cqw; box-shadow: 0 0 0 3px rgba(255, 238, 205, .95), 0 0 22px 7px rgba(255, 186, 100, .55); }
.par-lang .pl-ripple > i { position: absolute; inset: 0; border-radius: 1.6cqw; border: 2px solid rgba(255, 238, 205, .9);
  animation: par-lang-ripple 1.8s ease-out infinite paused; }
.par-lang :is(.pl-ring, .pl-ripple).is-round, .par-lang .pl-ripple.is-round > i { border-radius: 50%; }
.par-lang .pl-ring.is-pill { border-radius: 999px; }
.par-lang .pl-ripple > i + i { animation-delay: .9s; }
@keyframes par-lang-ripple { to { transform: scale(1.12, 1.45); opacity: 0; } }
.par-lang .pl-ripple.is-round > i { animation-name: par-lang-ripple-round; }
@keyframes par-lang-ripple-round { to { transform: scale(1.5); opacity: 0; } }
.par-lang.is-seen .pl-ripple > i { animation-play-state: running; }
.par-lang .pl-zoom > .pl-cursor {
  --m: clamp(0, (var(--p) - var(--m0)) / (var(--m1) - var(--m0)), 1);
  left: calc(var(--x0) + (var(--x1) - var(--x0)) * var(--m)); top: calc(var(--y0) + (var(--y1) - var(--y0)) * var(--m));
  width: max(2.6cqw, 16px); height: auto; z-index: 2;
}
.par-lang .pl-arrow { display: block; width: 100%; fill: #1d1813; stroke: #fffaf0; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }

/* Narrow: the drawing on top, the screen under it. */
.par-lang[data-fit=narrow] .pl-draw { top: 0; width: 360px; transform: none; }
.par-lang[data-fit=narrow] .is-phone > .pl-zoom { left: 95px; top: 262px; width: 170px; border-radius: 16px; }
.par-lang[data-fit=narrow] .is-phone > .pl-zoom > .pl-shot { border-radius: 16px; }
.par-lang[data-fit=narrow] .is-desk > .pl-draw { bottom: auto; }
.par-lang[data-fit=narrow] .is-desk > .pl-zoom { left: 0; top: 250px; width: 360px; }

/* Reduced motion: rest states (JS), nothing moves. */
.par-lang.is-reduced, .par-lang.is-reduced * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .par-lang, .par-lang * { transition: none !important; animation: none !important; }
}
.par-lang.is-reduced .pl-canvas.is-leaving { display: none; }