/* Product page (/product/ and /product/de/) — builds on assets/styles/jos.css.
   The page shell (header, hero, content sections, footer) mirrors intelligence.css so the two
   landing pages read as one site; kept self-contained rather than importing intelligence.css,
   so changes made for one landing page do not leak into the other.
   Monochrome only. No price is ever rendered from this stylesheet or its pages. */

body {
    display: flex;
    justify-content: center;
    background-color: var(--jos-paper);
}
.container {
    width: 100%;
    max-width: 1200px;
    background-color: var(--jos-white);
    border: 1px solid var(--jos-border);
}

/* ---- Header ---- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background-color: var(--jos-charcoal);
    color: var(--jos-white);
}
.header .logo { display: inline-flex; align-items: center; }
.header .logo img { height: 44px; }
.navbar_made-in-germany { display: flex; margin-left: 12px; }
.navbar_germany-image { width: 4px; margin-right: 8px; }
.navbar_germany-text {
    margin-top: 12px; font-weight: 500; font-size: 10px;
    line-height: 1; letter-spacing: 0.08em; color: var(--jos-white);
}
.header .links { display: flex; align-items: center; gap: 24px; }
.header .links a {
    color: var(--jos-white); text-decoration: none; font-weight: 500;
    font-size: 14px; display: inline-flex; align-items: center;
    transition: opacity var(--jos-transition);
}
.header .links a.nav-link {
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600;
}
.header .links a:hover { opacity: 0.65; }
.header .links a i { font-size: 20px; }

/* ---- Buttons as links ----
   .jos-button is styled for <button>; the calls to action here are links to the platform. */
a.jos-button {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
    text-align: center;
}
a.jos-button:hover { opacity: 0.8; }
/* White on a dark section. */
.jos-button--inverse,
a.jos-button--inverse,
.content-section--dark a.jos-button--inverse {
    background-color: var(--jos-white);
    color: var(--jos-black);
}
/* Outline: the second button of a pair. On light sections black, on dark sections white. */
.jos-button--outline,
a.jos-button--outline {
    background-color: transparent;
    color: var(--jos-black);
    border: 1px solid var(--jos-black);
    padding: 13px 27px;
}
.hero a.jos-button--outline,
.content-section--dark a.jos-button--outline {
    color: var(--jos-white);
    border-color: rgba(255, 255, 255, 0.7);
}
.pr-actions {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin-top: 32px;
}
.pr-fine {
    margin: 16px 0 0; font-size: 13px; line-height: 1.55;
    color: var(--jos-text-muted); max-width: 720px;
}

/* ---- Hero ---- */
.hero {
    background-color: var(--jos-charcoal);
    color: var(--jos-white);
    padding: 96px 64px 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero h1 {
    color: var(--jos-white); font-size: 60px; font-weight: 300;
    line-height: 1.05; letter-spacing: -0.015em; margin: 16px 0 24px; max-width: 900px;
}
.hero-sub { font-size: 20px; color: rgba(255, 255, 255, 0.78); max-width: 760px; margin: 0; }
.hero .pr-actions { margin-top: 44px; }
.hero .pr-fine { color: rgba(255, 255, 255, 0.6); font-family: var(--jos-font-mono); font-size: 12px; }
/* Language switch + existing-customer sign-in, side by side above the headline. */
.pr-toplinks {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline;
    margin: 0 0 4px; font-family: var(--jos-font-mono); font-size: 13px;
}
.pr-toplinks a { color: rgba(255, 255, 255, 0.75); }
.pr-toplinks a:hover { color: var(--jos-white); }

/* ---- Content sections ---- */
.content-section { padding: 80px 64px; background-color: var(--jos-white); }
.content-section--paper {
    background-color: var(--jos-paper);
    border-top: 1px solid var(--jos-border);
    border-bottom: 1px solid var(--jos-border);
}
.content-section--dark { background-color: var(--jos-charcoal); color: var(--jos-white); }
.content-section--dark h2, .content-section--dark h3 { color: var(--jos-white); }
:where(.content-section--dark) p { color: rgba(255, 255, 255, 0.8); }
.content-section.content-section--dark .lede { color: rgba(255, 255, 255, 0.7); }
.content-section--dark a { color: rgba(255, 255, 255, 0.9); }
.content-section--dark .pr-fine { color: rgba(255, 255, 255, 0.55); }
/* Paragraph defaults at zero specificity, so every component class below sets its own size. */
.content-section h2 { margin: 0 0 24px; max-width: 900px; }
:where(.content-section) p { max-width: 780px; font-size: 17px; line-height: 1.65; }
.content-section .lede { color: var(--jos-text-muted); font-size: 17px; margin-bottom: 32px; }

.pr-tag {
    display: block; font-family: var(--jos-font-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--jos-slate);
    margin-bottom: 10px;
}

/* ---- The core: Intelligence (one wide card) ---- */
.pr-core {
    border: 1px solid var(--jos-black);
    border-radius: var(--jos-radius-md);
    padding: 48px;
}
.pr-core h2 { font-weight: 300; font-size: 40px; margin-bottom: 16px; }
.pr-core .lede { max-width: 820px; }
.pr-grid {
    display: grid; gap: 28px 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
}
.pr-item { border-top: 2px solid var(--jos-black); padding-top: 16px; }
.pr-item h3 {
    font-family: var(--jos-font-display); font-size: 19px; font-weight: 500;
    margin: 0 0 8px; color: var(--jos-black);
}
.pr-item p { font-size: 15px; line-height: 1.6; color: var(--jos-text-muted); margin: 0; max-width: none; }
.pr-item .pr-tag { margin-bottom: 6px; }
.pr-core-foot {
    display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center;
    justify-content: space-between;
    margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--jos-border);
}
.pr-core-foot .pr-actions { margin-top: 0; }
.pr-more {
    font-family: var(--jos-font-mono); font-size: 14px; color: var(--jos-black);
}

/* ---- Module cards ---- */
.pr-modules {
    display: grid; gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pr-module {
    display: flex; flex-direction: column;
    background-color: var(--jos-white);
    border: 1px solid var(--jos-border);
    border-radius: var(--jos-radius-md);
    padding: 36px;
}
.pr-module h3 { font-size: 28px; font-weight: 400; margin: 0 0 8px; }
.pr-module-sub { font-size: 16px; line-height: 1.55; color: var(--jos-text-muted); margin: 0 0 24px; }
.pr-facts { margin: 0; }
.pr-facts dt {
    font-family: var(--jos-font-body); font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--jos-graphite);
    padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--jos-border);
}
.pr-facts dt:first-child { margin-top: 0; }
.pr-facts dd { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--jos-text); }
.pr-facts dd p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; max-width: none; }
.pr-facts dd p:last-child { margin-bottom: 0; }
.pr-facts dd strong { font-weight: 600; }
.pr-demo-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--jos-font-mono); font-size: 14px; }
.pr-caveat {
    margin: 22px 0 0; padding: 14px 16px;
    font-size: 14px; line-height: 1.55; color: var(--jos-text-muted);
    background-color: var(--jos-paper); border-left: 2px solid var(--jos-black);
    border-radius: var(--jos-radius-sm); max-width: none;
}
.pr-caveat strong { color: var(--jos-black); font-weight: 600; }
.pr-module-foot {
    margin-top: auto; padding-top: 28px;
    font-family: var(--jos-font-mono); font-size: 12px; letter-spacing: 0.04em;
    color: var(--jos-graphite);
}
.pr-module-foot span {
    display: inline-block; padding-top: 14px; border-top: 2px solid var(--jos-black);
}

/* ---- How it fits (dark) ---- */
.pr-fit {
    display: grid; gap: 28px 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pr-fit-item { border-top: 2px solid var(--jos-white); padding-top: 16px; }
.pr-fit-item h3 { font-size: 20px; font-weight: 500; margin: 0 0 8px; }
.pr-fit-item p { font-size: 15px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.72); max-width: none; }
.pr-tiers {
    display: grid; gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 56px;
}
.pr-tier {
    display: flex; flex-direction: column;
    padding: 28px 30px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--jos-radius-md);
}
.pr-tier--paid { border-color: rgba(255, 255, 255, 0.6); }
.pr-tier h3 { font-size: 22px; font-weight: 400; margin: 0 0 4px; }
.pr-tier-note { font-family: var(--jos-font-mono); font-size: 12px; color: var(--jos-slate); margin: 0 0 16px; }
.pr-tier ul { list-style: none; padding: 0; margin: 0; }
.pr-tier li {
    position: relative; padding: 9px 0 9px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.8);
}
.pr-tier li::before {
    content: ""; position: absolute; left: 2px; top: 17px;
    width: 7px; height: 7px; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 50%;
}
.pr-tier .pr-actions { margin-top: auto; padding-top: 24px; }

/* ---- FAQ ---- */
.pr-faq { max-width: 860px; border-bottom: 1px solid var(--jos-border); }
.pr-faq details { border-top: 1px solid var(--jos-border); }
.pr-faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 20px 44px 20px 0;
    font-family: var(--jos-font-display); font-size: 20px; font-weight: 400; line-height: 1.3;
}
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 18px;
    font-family: var(--jos-font-mono); font-size: 20px; color: var(--jos-graphite);
}
.pr-faq details[open] summary::after { content: "\2212"; }
.pr-faq summary:focus-visible { outline: 1px solid var(--jos-black); outline-offset: 4px; }
.pr-faq-body { padding: 0 44px 22px 0; }
.pr-faq-body p { font-size: 15px; line-height: 1.65; color: var(--jos-text-muted); margin: 0 0 10px; }
.pr-faq-body p:last-child { margin-bottom: 0; }
.pr-faq-body strong { color: var(--jos-black); font-weight: 600; }

/* ---- Footer ---- */
.footer {
    background-color: var(--jos-charcoal); color: var(--jos-white);
    padding: 32px; text-align: center; font-size: 13px;
}
.footer a { color: var(--jos-white); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { opacity: 0.65; }
.footer .footer-meta { color: var(--jos-slate); margin-top: 8px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 870px) {
    .navbar_germany-text { font-size: 9px; }
    .header .logo img { height: 32px; }
    .header .links { gap: 14px; }
    .header .links a.nav-link { font-size: 11px; }
    .header { padding: 16px 20px; }
    .pr-modules, .pr-fit, .pr-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hero { padding: 64px 24px 56px; }
    .hero h1 { font-size: 40px; }
    .hero-sub { font-size: 17px; }
    .content-section { padding: 56px 24px; }
    .pr-grid { grid-template-columns: 1fr; }
    .pr-core { padding: 28px 22px; }
    .pr-core h2 { font-size: 30px; }
    .pr-module { padding: 28px 22px; }
    .pr-module h3 { font-size: 24px; }
    .pr-tier { padding: 24px 20px; }
    .pr-faq summary { font-size: 18px; }
    .pr-faq-body { padding-right: 0; }
}
@media (max-width: 480px) {
    .header .links a:not(.nav-link) i { font-size: 18px; }
    .navbar_made-in-germany { display: none; }
    .hero h1 { font-size: 32px; }
    .pr-actions a.jos-button { flex: 1 1 100%; }
}