/* ==========================================================================
   Product themes — each Marshal product page dresses in its own world.
     Schools          an exercise book: ruled paper, red margin, red-pen marks
     CRM              a sales whiteboard: marker grid, yellow sticky notes
     Business Suite   a till receipt: thermal paper, mono type, torn edges
     Fields           a survey map: contours, coordinate ticks on the edge
   Loaded after marshal.css + marshal-motifs.css on product pages only.
   ========================================================================== */

/* ---- Shared: light pages, quiet chrome --------------------------------- */
body.themed { background-color: var(--ink); }
.themed .hero, .themed .story, .themed .phones, .themed .features,
.themed .closing, .themed .index, .themed .gallery { background: transparent; }
.themed .mono { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: 13px; }
.themed .hero__glow, .themed .hero__grid { display: none; }
.themed .hero__title, .themed .h2, .themed .chapter__title, .themed .closing__title,
.themed .pricing__title, .themed .intro__statement, .themed .stat__value, .themed .index__name,
.themed .story__line, .themed .menu__link, .themed .step__num { font-variation-settings: normal; }
.themed .hero { padding-top: clamp(120px, 14vw, 170px); }
.themed .hero__title { margin-top: 0; }
.themed .nav__inner { background: color-mix(in srgb, var(--ink) 82%, transparent); }
.themed .nav__link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.themed .nav__link.is-current { background: color-mix(in srgb, var(--text) 9%, transparent); }
.themed .brand__tile { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.themed .frame, .themed .stage {
    box-shadow: 0 0 0 1px var(--line), 0 34px 70px -34px color-mix(in srgb, var(--text) 40%, transparent);
}
.themed .phone__device { box-shadow: 0 0 0 7px #23262b, 0 0 0 8px #3a3d42, 0 34px 60px -30px color-mix(in srgb, var(--text) 55%, transparent); }
.themed .stage__progress { background: var(--line); }
.themed .story__eyebrow { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.themed .story__when { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text-dim); }
.themed .story__rail b { background: var(--text); }
.themed .chapter__meta { font-family: var(--sans); font-size: 15px; color: var(--text-ink-dim); }
.themed .chapter.is-active .chapter__meta { color: var(--text-ink); }
.themed .chapter__bullets li::before { content: none; }
.themed .phone figcaption { font-size: 15px; }
.themed .phone figcaption strong { display: block; color: var(--text); font-weight: 600; }
.themed .gallery__item figcaption { background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--text); }
.themed .index__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--text-dim); margin-bottom: 18px; }
.themed .index__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 8px; }
@media (max-width: 820px) { .themed .index__row { grid-template-columns: 1fr; gap: 6px; } .themed .index__desc { grid-column: 1; } }
.themed .feature::after { content: none; }
.themed .faq__inner .h2 { margin-top: 0; }
.themed .curtain__label { text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: 18px; }
.themed .curtain__caption { font-family: var(--sans); font-size: 15px; color: var(--text-dim); }

.js .themed .curtain { background: var(--ink); color: var(--text); }
.themed .curtain__count { display: none; }

/* Footer: the back cover — dark, in each product's own ink */
.themed .foot {
    --ink-2: var(--back); --text: #f3f2ee; --text-dim: rgba(243, 242, 238, .62); --line: rgba(243, 242, 238, .16);
    color: var(--text); border-top: 0;
}
.themed .foot .mono { font-size: 13px; }
.themed .lightbox { --text-dim: #c9c8c2; --line: rgba(255, 255, 255, .22); color: #fff; }

/* ======================================================================
   SCHOOLS — an exercise book
   ====================================================================== */
.product-schools {
    --ink: #eef2f8; --ink-2: #e3e9f3; --ink-3: #d8e0ed;
    --paper: #e3e9f3; --paper-2: #d8e0ed;
    --text: #1b2a4a; --text-dim: #55627e; --line: rgba(27, 42, 74, .15);
    --text-ink: #1b2a4a; --text-ink-dim: #55627e; --line-ink: rgba(27, 42, 74, .15);
    --accent: #2f5bd3; --accent-ink: #ffffff;
    --pen: #c8323c; --rule: rgba(47, 91, 211, .17);
    --display: "Literata", Georgia, serif;
    --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
    --mono: "Atkinson Hyperlegible", system-ui, sans-serif;
    --hand: "Caveat", "Segoe Print", cursive;
    --back: #1b2a4a; --mo-card: #ffffff;
}
body.product-schools {
    background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px);
    background-attachment: local;
}
/* the red margin line runs down the whole book */
body.product-schools::before {
    content: ""; position: fixed; z-index: 1; pointer-events: none;
    top: 0; bottom: 0; left: max(8px, calc(var(--gutter) - 20px)); width: 2px;
    background: var(--pen); opacity: .5;
}
.product-schools .hero__title { font-weight: 640; font-size: clamp(2.8rem, 7.4vw, 7.6rem); line-height: 1; letter-spacing: -.025em; }
.product-schools .h2, .product-schools .closing__title, .product-schools .chapter__title,
.product-schools .story__line, .product-schools .intro__statement { font-weight: 600; letter-spacing: -.02em; }
.product-schools .story__line { line-height: 1.08; }
/* red pen: the teacher's marks */
.product-schools .proof svg { color: var(--pen); }
.product-schools .stat__value { font-family: var(--hand); font-weight: 700; color: var(--pen); font-size: clamp(4.4rem, 9vw, 8rem); line-height: .8; letter-spacing: 0; display: inline-block; transform: rotate(-4deg); transform-origin: left bottom; }
.product-schools .step__num { font-family: var(--hand); color: var(--pen); letter-spacing: 0; }
.product-schools .story__when { font-family: var(--hand); font-size: 28px; color: var(--pen); line-height: 1; }
.product-schools .chapter__bullets li::before { content: "✓"; font-family: var(--hand); font-size: 20px; line-height: 1; color: var(--pen); }
.product-schools .chapter__meta { font-family: var(--hand); font-size: 24px; color: var(--pen); line-height: 1; }
.product-schools .chapter.is-active .chapter__meta { color: var(--pen); }

/* ======================================================================
   CRM — a sales whiteboard
   ====================================================================== */
.product-crm {
    --ink: #f2f4f6; --ink-2: #e7eaef; --ink-3: #dde1e7;
    --paper: #e8ebf0; --paper-2: #dde1e7;
    --text: #15171c; --text-dim: #5a606c; --line: rgba(21, 23, 28, .13);
    --text-ink: #15171c; --text-ink-dim: #5a606c; --line-ink: rgba(21, 23, 28, .13);
    --accent: #ffd43b; --accent-ink: #15171c;
    --marker: #2348e0; --sticky: #ffe36e;
    --display: "Archivo", system-ui, sans-serif;
    --sans: "Archivo", system-ui, sans-serif;
    --mono: "Archivo", system-ui, sans-serif;
    --back: #15171c; --mo-card: #ffffff;
}
body.product-crm { background-image: radial-gradient(rgba(21, 23, 28, .16) 1px, transparent 1.3px); background-size: 28px 28px; }
.product-crm .hero__title, .product-crm .h2, .product-crm .closing__title, .product-crm .pricing__title,
.product-crm .index__name, .product-crm .menu__link {
    font-weight: 800; font-variation-settings: "wdth" 116; letter-spacing: -.035em;
}
.product-crm .hero__title { font-size: clamp(2.6rem, 7.2vw, 7.4rem); line-height: .94; }
.product-crm .chapter__title, .product-crm .story__line, .product-crm .intro__statement { font-weight: 700; font-variation-settings: "wdth" 108; letter-spacing: -.025em; }
.product-crm .foot__word { font-variation-settings: "wdth" 70; font-weight: 800; font-size: clamp(5rem, 21vw, 22rem); }
.product-crm .stat__value { font-weight: 800; font-variation-settings: "wdth" 66; color: var(--marker); letter-spacing: -.03em; }
.product-crm .step__num { font-variation-settings: "wdth" 66; color: var(--marker); }
/* the next step, on a sticky note */
.product-crm .proof { gap: 14px; margin-top: 44px; }
.product-crm .proof li {
    max-width: 210px; padding: 14px 16px 18px; background: var(--sticky); color: var(--text);
    font-size: 15px; font-weight: 600; line-height: 1.3;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 14px 22px -14px rgba(0, 0, 0, .45);
    transform: rotate(-1.6deg);
}
.product-crm .proof li:nth-child(2n) { transform: rotate(1.3deg); }
.product-crm .proof li:nth-child(3n) { transform: rotate(-.6deg); }
.product-crm .proof svg { display: none; }
.product-crm .chapter__bullets li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; border: 2px solid var(--marker); border-radius: 3px; flex: none; }
.product-crm .story__when { color: var(--marker); font-weight: 600; }

/* ======================================================================
   BUSINESS SUITE — a till receipt
   ====================================================================== */
.product-business-suite {
    --ink: #fafaf7; --ink-2: #f0f0eb; --ink-3: #e6e6e0;
    --paper: #efefe9; --paper-2: #e6e6e0;
    --text: #161616; --text-dim: #5c5c57; --line: rgba(22, 22, 22, .2);
    --text-ink: #161616; --text-ink-dim: #5c5c57; --line-ink: rgba(22, 22, 22, .2);
    --accent: #0e7c46; --accent-ink: #ffffff;
    --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --sans: "IBM Plex Mono", ui-monospace, monospace;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --back: #161616; --mo-card: #ffffff;
}
body.product-business-suite { font-size: 15px; line-height: 1.6; }
.product-business-suite .mono { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.product-business-suite .hero__title, .product-business-suite .h2, .product-business-suite .closing__title,
.product-business-suite .pricing__title, .product-business-suite .index__name, .product-business-suite .chapter__title,
.product-business-suite .menu__link, .product-business-suite .foot__title {
    font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .88;
}
.product-business-suite .hero__title { font-size: clamp(3.2rem, 9.4vw, 10rem); }
.product-business-suite .story__line, .product-business-suite .intro__statement { font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: .95; }
.product-business-suite .stat__value { font-weight: 900; letter-spacing: 0; }
.product-business-suite .hero__lede, .product-business-suite .chapter__body, .product-business-suite .feature p { font-size: 14.5px; }
.product-business-suite .btn { border-radius: 4px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
/* dashed perforation instead of hairlines (only the sides that already have a rule) */
.product-business-suite .stats, .product-business-suite .features__grid, .product-business-suite .faq__list,
.product-business-suite .index__list, .product-business-suite .step, .product-business-suite .chapter { border-top-style: dashed; }
.product-business-suite .stat + .stat, .product-business-suite .feature:not(:nth-child(3n+1)) { border-left-style: dashed; }
@media (max-width: 960px) { .product-business-suite .feature:nth-child(n) { border-left-style: none; } .product-business-suite .feature:nth-child(2n) { border-left-style: dashed; } }
@media (max-width: 600px) { .product-business-suite .feature:nth-child(n) { border-left-style: none; } }
.product-business-suite .chapter__bullets li, .product-business-suite .feature, .product-business-suite .qa,
.product-business-suite .index__row { border-bottom-style: dashed; }
.product-business-suite .chapter__bullets li::before { content: "–"; }
/* paper sections are torn off the roll: zigzag top and bottom */
.product-business-suite .intro, .product-business-suite .chapters, .product-business-suite .steps,
.product-business-suite .faq, .product-business-suite .pricing {
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 18px 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px 51% repeat-x;
    margin-block: -1px;
}

/* ======================================================================
   FIELDS — a survey map
   ====================================================================== */
.product-fields {
    --ink: #e7ecdd; --ink-2: #dce3ce; --ink-3: #d1d9c1;
    --paper: #dde4cf; --paper-2: #d1d9c1;
    --text: #1f2b17; --text-dim: #55634a; --line: rgba(31, 43, 23, .17);
    --text-ink: #1f2b17; --text-ink-dim: #55634a; --line-ink: rgba(31, 43, 23, .17);
    --accent: #3f6e21; --accent-ink: #ffffff;
    --contour: #93633a;
    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --sans: "Barlow", system-ui, sans-serif;
    --mono: "Barlow", system-ui, sans-serif;
    --back: #1f2b17; --mo-card: #ffffff;
}
body.product-fields { background-image: url("../img/marshal/fields/contours.svg"); background-size: 1000px 1000px; }
/* map collar: a tick scale down the left edge with the sheet's coordinates */
body.product-fields::before {
    content: ""; position: fixed; z-index: 1; pointer-events: none; left: 0; top: 0; bottom: 0; width: 16px;
    background:
        repeating-linear-gradient(to bottom, var(--text) 0 1px, transparent 1px 120px) left / 16px 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--text) 0 1px, transparent 1px 24px) left / 7px 100% no-repeat;
    opacity: .45;
}
body.product-fields::after {
    content: "29°18′ S   27°29′ E"; position: fixed; z-index: 1; pointer-events: none;
    left: 22px; bottom: 28px; writing-mode: vertical-rl; transform: rotate(180deg);
    font: 500 12px/1 var(--sans); letter-spacing: .04em; color: var(--text-dim);
}
@media (max-width: 700px) { body.product-fields::after { display: none; } }
.product-fields .hero__title, .product-fields .h2, .product-fields .closing__title, .product-fields .pricing__title,
.product-fields .index__name, .product-fields .chapter__title, .product-fields .menu__link, .product-fields .story__line,
.product-fields .intro__statement { font-weight: 700; letter-spacing: -.01em; }
.product-fields .hero__title { font-size: clamp(3.2rem, 9vw, 9.6rem); line-height: .9; }
.product-fields .stat__value { font-weight: 700; color: var(--accent); letter-spacing: -.01em; }
.product-fields .chapter__bullets li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; border: 1.5px solid var(--contour); flex: none; }
.product-fields .story__when { color: var(--contour); font-weight: 600; }
.product-fields .mo-ct__line { stroke: color-mix(in srgb, var(--contour) 55%, transparent); }

@media (max-width: 860px) { .themed .hero--receipt .hero__fx { opacity: .13; } }