/* LayerMaker page: its layout and its own look (below). */
:root { --cm-line: #E2E8F0; --cm-muted: #4A5568; --cm-bg: #F7FAFC; --cm-card: #FFFFFF; --cm-accent: #1F6FB2; }
body { margin: 0; }
[hidden] { display: none !important; }
.cm-main { max-width: 1100px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.cm-lead { margin: 0 0 16px; }
.cm-drop { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--cm-line); border-radius: 10px; padding: 28px 16px; cursor: pointer; }
.cm-drop.over { border-color: var(--cm-accent); background: rgba(31, 111, 178, 0.06); }
.cm-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cm-drop-big { font-weight: 600; font-size: 1.1em; }
.cm-field { display: block; margin: 10px 0; }
.cm-field input[type=number] { width: 6em; }
.cm-progress { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.cm-progress progress { flex: 1 1 200px; height: 14px; }
.cm-views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-views figure { margin: 0; min-width: 0; }
.cm-views canvas { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 8px; border: 1px solid var(--cm-line); cursor: grab; }
.cm-views figcaption { font-size: 0.9em; color: var(--cm-muted); margin-top: 4px; }
@media (max-width: 640px) { .cm-views { grid-template-columns: 1fr; } }
.cm-table-wrap { overflow-x: auto; }
.cm-mixes { border-collapse: collapse; width: 100%; font-size: 0.95em; }
.cm-mixes th, .cm-mixes td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--cm-line); white-space: nowrap; }
.cm-sw { display: inline-block; width: 22px; height: 22px; border-radius: 4px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.2); }
.cm-estimate { font-size: 1.05em; margin: 0 0 6px; }
.cm-ver { font-size: 0.8rem; font-weight: 400; }
.cm-badge { font-size: 0.55em; vertical-align: middle; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }

/* LayerMaker's own look: A, "Layers" (the Captain's pick, 2026-11-12; drafts in docs/brand/). Paper white, ink type, the filament colors
   only in the mark, magenta for the few accents. Applied with the kit up or down, so the page looks the same either way; the kit's
   stylesheet (when it loads) brings the fonts and the cards' base, and this file, loaded after it, sets the look. */
:root { --lm-bg: #FAFAF7; --lm-card: #FFFFFF; --lm-ink: #121417; --lm-muted: #4A5160; --lm-line: #E4E4DE; --lm-accent: #C2006A;
  --lm-display: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lm-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cm-line: var(--lm-line); --cm-muted: var(--lm-muted); --cm-accent: var(--lm-accent); }
html, body { background: var(--lm-bg); }
/* the kit's own tokens, set to the look: its cards, titles and Save card follow without a fight */
.kit-page { --kit-bg: var(--lm-bg); --kit-orange: var(--lm-accent); --kit-accent: var(--lm-ink); --kit-body: var(--lm-ink); --kit-ink: var(--lm-ink);
  --kit-accent-hover: #000000; --kit-hover: #F1F1EC; --kit-panel: var(--lm-card); --kit-line: var(--lm-line); }
body { color: var(--lm-ink); font: 16px/1.5 var(--lm-text); }
.lm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--lm-line); }
.lm-logo img { display: block; height: 64px; width: auto; max-width: 62vw; }
.lm-nav { display: flex; gap: 18px; align-items: center; font-size: .95rem; }
.lm-nav a { color: var(--lm-ink); text-decoration: none; }
.lm-nav a:hover { color: var(--lm-accent); }
.lm-nav .cm-badge { font-size: .7rem; color: var(--lm-accent); text-transform: uppercase; letter-spacing: .06em; }
.lm-nav .cm-ver { color: var(--lm-muted); }
/* a light footer: the Agentic Apples badge has no card (transparent), so it sits on paper as badges expect */
.lm-foot { background: #fff; color: var(--lm-ink); border-top: 1px solid var(--lm-line); padding: 22px 16px; text-align: center; font-size: .9rem; margin-top: 24px; }
.lm-foot p { margin: 0; }
.lm-badge { display: flex; justify-content: center; }   /* holds the badge script, so never :empty: the spacing sits on what the badge draws */
.lm-badge > :not(script) { margin-top: 12px; }
/* the badge is one row (inline styles); on a phone it stacks so its tagline and links don't squeeze */
.lm-badge .aa-badge-embed { max-width: 100%; }
@media (max-width: 640px) {
  .lm-badge .aa-badge { flex-direction: column !important; text-align: center; }
  .lm-badge .aa-badge > * { margin-left: 0 !important; margin-right: 0 !important; }
  .lm-badge .aa-badge > * + * { margin-top: 6px !important; }
}
.lm-range { margin: -4px 0 14px; max-width: 34em; font-size: .95rem; color: var(--lm-muted); }
.lm-by { margin-top: 6px !important; font-weight: 600; }
.lm-stamp { margin-top: 10px !important; font-size: .8rem; color: #5F636D; }
.kit-card { background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.kit-card-title, .lm-hero-title, .lm-h2 { font-family: var(--lm-display); font-weight: 600; color: var(--lm-ink); }
.kit-card-title { font-size: 1.15em; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 3px solid var(--lm-accent); width: fit-content; }
.cm-steps li::marker { color: var(--lm-accent); font-weight: 700; }
.kit-note, .cm-views figcaption { color: var(--lm-muted); font-size: .92em; }
.kit-btn { font: inherit; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--lm-ink); background: #fff; color: var(--lm-ink); cursor: pointer; }
.kit-btn.primary { background: var(--lm-ink); border-color: var(--lm-ink); color: #fff; }
.kit-btn:disabled { opacity: .5; cursor: default; }
.kit-download-head { margin: 4px 0; font-size: 1.05em; }
.kit-msg:not(:empty) { padding: 8px 10px; border-radius: 6px; background: #FFF5F5; color: #9B2C2C; }
.kit-msg.ok:not(:empty) { background: #F0FFF4; color: #22543D; }

/* Embed mode (?embed=1): no top or footer, tighter spacing, fits a narrow frame */
html.cm-embed .lm-top, html.cm-embed .lm-foot, html.cm-embed #saveCard { display: none; }
html.cm-embed .cm-main { padding: 8px; }
html.cm-embed .cm-views { grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 360px) { html.cm-embed .cm-views { grid-template-columns: 1fr; } }


.cm-reach { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid #C05621; background: rgba(192, 86, 33, 0.07); border-radius: 4px; }
.cm-top { font-size: 0.9em; color: var(--kit-muted, #555); }
.cm-owned { margin: 0.25rem 0 0.5rem 1.2rem; padding: 0; }
.cm-faq-title { font-size: 1.25rem; margin: 0 0 0.75rem; }
.cm-faq { margin: 1.5rem auto; }
.cm-faq details { border-top: 1px solid var(--kit-line, #ddd); padding: 0.6rem 0; }
.cm-faq summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary::after { content: "+"; font-weight: 400; font-size: 1.3rem; color: var(--kit-muted, #555); }
.cm-faq details[open] > summary::after { content: "\2212"; }
.cm-faq details p { margin: 0.4rem 0 0.2rem; }
.cm-sample { margin: 0.6rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* phone pass (2026-11-13): every control at least 44 px tall to tap */
.cm-main select, .cm-main input[type="number"] { min-height: 44px; padding: 0 0.5rem; font-size: 1rem; }
.cm-main details > summary { padding-block: 0.6rem; }
/* phone pass: the mix list stacks on a narrow screen (no sideways scroll; the filament number stays in view) */
@media (max-width: 560px) {
  .cm-mixes thead { display: none; }
  .cm-mixes, .cm-mixes tbody, .cm-mixes tr { display: block; width: 100%; }
  .cm-mixes tr { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; row-gap: 0.15rem; padding: 0.6rem 0; border-bottom: 1px solid var(--kit-line, #ddd); }
  .cm-mixes td { display: block; padding: 0; border: 0; white-space: normal; }
  .cm-mixes td:nth-child(1) { grid-row: 1 / span 4; }
  .cm-mixes td:nth-child(3)::before { content: "Of the model: "; color: var(--kit-muted, #555); }
  .cm-mixes td:nth-child(4)::before { content: "Match: "; color: var(--kit-muted, #555); }
  .cm-mixes td:nth-child(5)::before { content: "Filament: "; color: var(--kit-muted, #555); }
  .cm-mixes td:nth-child(5) br { display: none; }
  .cm-mixes td:nth-child(5) .cm-top::before { content: ", tops "; }
}

/* ---- the beta launch look (2026-11-13): clean and technical with color. Light paper, ink type, restrained cards; the five kit colors
   used on purpose as LayerMaker's identity, in thin layered bands (the print's own layers and mixes). Our own drawing only. ---- */
:root { --c-cyan: #0090DA; --c-magenta: #E24585; --c-yellow: #FCE300; --c-ink: #121417; --c-white: #FFFFFF; }
.lm-top { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.lm-nav { flex-wrap: wrap; justify-content: flex-end; }
.lm-nav a { padding: 10px 2px; font-weight: 600; }
.lm-nav .lm-signin { border: 1px solid var(--lm-ink); border-radius: 999px; padding: 8px 16px; }
.lm-nav .lm-signin:hover { background: var(--lm-ink); color: #fff; }
@media (max-width: 760px) {
  .lm-top { padding: 6px 12px 0; }
  .lm-logo img { height: 46px; }
  .lm-nav { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding-bottom: 4px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lm-nav a { white-space: nowrap; font-size: .95rem; }
  .lm-nav .lm-signin { order: -1; padding: 6px 14px; }
  .lm-nav .cm-badge, .lm-nav .cm-ver { display: none; }
}
/* the layered bands: five thin stripes, top to bottom the way a mix stacks (black first, then the colors, white on top) */
.lm-bands { display: grid; grid-template-rows: repeat(5, 3px); margin: 8px 0 28px; border-radius: 2px; overflow: hidden; }
.lm-bands i:nth-child(1) { background: var(--c-cyan); } .lm-bands i:nth-child(2) { background: var(--c-magenta); }
.lm-bands i:nth-child(3) { background: var(--c-yellow); } .lm-bands i:nth-child(4) { background: var(--c-ink); }
.lm-bands i:nth-child(5) { background: #E4E4DE; }
.lm-foot .lm-bands { max-width: 1100px; margin: -22px auto 18px; }
/* the first screen */
.lm-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px 0 8px; }
.lm-kicker { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--lm-line); font-size: .9rem; font-weight: 600; color: var(--lm-muted); }
.lm-hero-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.01em; max-width: 18ch; }
.lm-hero-sub { font-size: 1.15rem; margin: 0 0 22px; max-width: 46ch; color: #2A2F38; }
.lm-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.lm-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; text-decoration: none; font-weight: 600; }
.lm-hero-price { margin: 0; color: var(--lm-muted); }
.lm-hero-art svg { width: min(320px, 34vw); height: auto; display: block; }
.lm-offer-line, .lm-offer { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; background: #FFF8CC; border: 1px solid #E6CF3A; color: #3D3500; }
.lm-price s { color: var(--lm-muted); font-weight: 400; }
.lm-first { font-size: .8em; font-weight: 400; color: var(--lm-muted); }
@media (max-width: 760px) { .lm-hero { grid-template-columns: 1fr; padding-top: 16px; } .lm-hero-art { display: none; } }
/* section headings */
.lm-h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 16px; }
.lm-h2::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 8px; background: linear-gradient(var(--c-cyan) 0 33%, var(--c-magenta) 33% 66%, var(--c-yellow) 66%); border-radius: 1px; }
.lm-h3 { font-family: var(--lm-display); font-size: 1.05rem; margin: 14px 0 6px; }
.lm-small { color: var(--lm-muted); font-size: .92rem; margin: 10px 0 0; }
.lm-sales { margin: 0 0 44px; }
/* proof: original, preview, real print, large */
.lm-proof-row, .lm-ex-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lm-ex-fig { margin: 0; }
.lm-ex-fig img, .lm-ph { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; border-radius: 12px; border: 1px solid var(--lm-line); background: #fff; }
.lm-ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; box-sizing: border-box; color: var(--lm-muted); font-weight: 600;
  background: repeating-linear-gradient(180deg, #F4F4F0 0 10px, #FAFAF7 10px 20px); }
.lm-ex-fig figcaption { margin-top: 6px; font-size: .9rem; font-weight: 600; }
.lm-big figcaption { font-size: 1rem; }
@media (max-width: 640px) { .lm-proof-row { grid-template-columns: 1fr; } .lm-ex-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .lm-ex-fig figcaption { font-size: .75rem; } }
/* how it works */
.lm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.lm-steps li { background: #fff; border: 1px solid var(--lm-line); border-radius: 14px; padding: 18px; }
.lm-steps b { display: block; font-family: var(--lm-display); font-size: 1.1rem; margin: 10px 0 4px; }
.lm-icon { width: 44px; height: 44px; display: block; }
@media (max-width: 760px) { .lm-steps { grid-template-columns: 1fr; } }
/* pricing */
.lm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lm-card { background: #fff; border: 1px solid var(--lm-line); border-radius: 14px; padding: 18px; position: relative; overflow: hidden; }
.lm-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: #E4E4DE; }
.lm-card:nth-child(2)::before { background: var(--c-cyan); } .lm-card:nth-child(3)::before { background: var(--c-magenta); } .lm-card:nth-child(4)::before { background: var(--c-ink); }
.lm-card h3 { font-family: var(--lm-display); margin: 4px 0 8px; font-size: 1.1rem; }
.lm-amount { font-family: var(--lm-display); font-size: 1.7rem; font-weight: 600; margin: 0 0 8px; }
.lm-per { font-size: .9rem; font-weight: 400; color: var(--lm-muted); }
.lm-amount s { font-size: .7em; }
.lm-per-first { display: block; margin-top: 2px; }
.lm-card p:last-child { margin: 0; color: #2A2F38; }
.lm-card-mark { border-color: var(--lm-ink); }
@media (max-width: 900px) { .lm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .lm-cards { grid-template-columns: 1fr; } }
/* the tool */
.lm-tool { scroll-margin-top: 90px; margin-bottom: 44px; }
#pricing, #how, #examples, #faq, #proof, #account { scroll-margin-top: 90px; }
.lm-private { margin: 10px 0 0; font-weight: 600; color: var(--lm-ink); }
.lm-private::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; background: linear-gradient(var(--c-cyan) 0 33%, var(--c-magenta) 33% 66%, var(--c-yellow) 66%); }
.lm-estimate-short { margin: 6px 0; color: var(--lm-muted); }
.cm-info { margin: 8px 0 0; }
.cm-info > summary { cursor: pointer; color: var(--lm-muted); font-size: .92rem; width: fit-content; list-style: none; }
.cm-info > summary::-webkit-details-marker { display: none; }
.cm-info > summary::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
  border: 1.5px solid currentColor; font: 700 12px/1 var(--lm-display); font-style: italic; }
#advancedCard > summary { cursor: pointer; }
/* the progress bar: the bands, moving */
.cm-progress progress { appearance: none; -webkit-appearance: none; border: 0; border-radius: 4px; background: #ECECE6; overflow: hidden; }
.cm-progress progress::-webkit-progress-bar { background: #ECECE6; }
.cm-progress progress::-webkit-progress-value { background: repeating-linear-gradient(90deg, var(--c-cyan) 0 18px, var(--c-magenta) 18px 36px, var(--c-yellow) 36px 54px, var(--c-ink) 54px 72px); background-size: 72px 100%; animation: lm-run 1s linear infinite; }
.cm-progress progress::-moz-progress-bar { background: repeating-linear-gradient(90deg, var(--c-cyan) 0 18px, var(--c-magenta) 18px 36px, var(--c-yellow) 36px 54px, var(--c-ink) 54px 72px); }
@keyframes lm-run { to { background-position: 72px 0; } }
@media (prefers-reduced-motion: reduce) { .cm-progress progress::-webkit-progress-value { animation: none; } }
.cm-drop { border-color: #CFCFC7; background: repeating-linear-gradient(180deg, #fff 0 14px, #FBFBF8 14px 28px); }
/* the account area, out of the sales flow */
#accountCard { margin-top: 8px; }
/* embed mode: the tool only */
html.cm-embed .lm-sales, html.cm-embed .lm-bands, html.cm-embed #accountCard, html.cm-embed .lm-compare { display: none; }
.kit-btn:focus-visible, .lm-nav a:focus-visible, .cm-faq summary:focus-visible, .cm-info > summary:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }


/* Compare models (v2.15): a sheet of tiles, the original and the predicted print side by side, best colors first */
.lm-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.lm-tile { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--lm-line); border-radius: 10px; padding: 10px; cursor: pointer; min-width: 0; }
.lm-tile:hover, .lm-tile:focus-visible { border-color: var(--c-ink); }
.lm-tile[disabled] { cursor: default; }
.lm-tile-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-tile-pics figure { margin: 0; min-width: 0; }
.lm-tile-pics img, .lm-tile-pics .lm-tile-wait { width: 100%; height: auto; aspect-ratio: 4 / 3; display: block; border-radius: 6px; background: #EEF2F6; object-fit: cover; }
.lm-tile-pics figcaption { font-size: .8rem; color: var(--lm-muted); margin-top: 2px; }
.lm-tile-name { font-weight: 600; overflow-wrap: anywhere; }
.lm-tile-score { font-size: .95rem; }
.lm-tile-score strong { font-size: 1.1rem; }
.lm-tile-facts, .lm-tile-open { font-size: .85rem; color: var(--lm-muted); }
.lm-tile-open { text-decoration: underline; }
.lm-tile-bad { color: #A3262A; font-size: .95rem; }
.lm-shot-canvas { position: fixed; left: -10000px; top: 0; width: 320px; height: 240px; pointer-events: none; }