/* The home page (#447, D-309): the style block of
   design/explorations/marketing/home.html, as it is, for the same
   markup (page/marketing/home.templ). What differs is the drawing: the
   design draws the ninety days on a canvas with its callouts as HTML
   placed by script; the server draws the whole sheet into SVG in two
   framings (blueprint_scenes.go), so its callouts, leader lines and axis
   names are SVG, styled below in the design's colours, and the framing
   for the window's width shows. The inline styles the prototype writes
   are rules at the foot. */

.hero { min-height: 100vh; display: grid; align-content: center; padding-top: 6.5rem; padding-bottom: var(--s-7); }
.hero .mk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-7); align-items: center; width: 100%; }
.hero .mk-display-xl { font-size: min(clamp(2.6rem, 4.9vw, 5.1rem), 13.8cqi); max-width: 13ch; }
.hero .sheet { grid-column: 2; grid-row: 1; }
.hero__copy { container-type: inline-size; display: grid; gap: var(--s-5); justify-items: start; }
.hero__copy .mk-lead { max-width: 40ch; }

/* The drawing: a blueprint sheet. Cobalt hairlines on cream, a faint
   grid, the object in the middle, two callouts, and a title block along
   the bottom like an engineering drawing. */
.sheet { margin: 0; position: relative; border: 1px solid rgba(31, 63, 229, .35); border-radius: var(--r-card-l); background-color: var(--cream); background-image: linear-gradient(rgba(31, 63, 229, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 63, 229, .07) 1px, transparent 1px); background-size: 1.5rem 1.5rem; background-position: -1px -1px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: 1 / 0.92; }
.sheet__stage { position: relative; min-height: 0; }
.sheet__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.sheet__stage[data-framing="narrow"] { display: none; }
.sheet__marks { opacity: 0; transition: opacity var(--d-base) var(--ease); }
.sheet.is-drawn .sheet__marks { opacity: 1; }
.sheet__marks line { stroke: var(--cobalt); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sheet__marks circle { fill: var(--cream); stroke: var(--cobalt); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sheet__marks .is-down line, .sheet__marks .is-down circle { stroke: var(--down-text); }
.callout rect { fill: var(--cream); stroke: rgba(31, 63, 229, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.callout text { font-family: var(--font-mono); font-size: 11px; fill: var(--cobalt-2); }
.callout .callout__head { font-weight: 500; fill: var(--text); }
.callout--down rect { stroke: var(--down-text); }
.callout--down text:not(.callout__head) { fill: var(--down-text); }
.sheet__axis { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: rgba(21, 44, 168, .75); }
.sheet__title { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-top: 1px solid rgba(31, 63, 229, .35); font-family: var(--font-mono); font-size: var(--t-mono-s); background: rgba(244, 241, 232, .92); }
.sheet__title > div { padding: 0.625rem 0.875rem; border-left: 1px solid rgba(31, 63, 229, .35); display: grid; gap: 0.125rem; min-width: 0; }
.sheet__title > div:first-child { border-left: 0; }
.sheet__title span { font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(21, 44, 168, .8); }
.sheet__title b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sheet__marks { transition: none; } }
.hero__note { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); display: flex; gap: var(--s-4); flex-wrap: wrap; }
/* The first screen's reach (#1119): where checks run from and where
   alerts go, two labelled rows under the buttons. */
.hero__reach { margin: var(--s-5) 0 var(--s-4); display: grid; grid-template-columns: auto auto; justify-content: start; gap: 14px 20px; align-items: center; max-width: 52rem; }
.hero__row { display: contents; }
.hero__row:last-child .hero__label { align-self: start; padding-top: 8px; }
.hero__label { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); }
.hero__places, .hero__channels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.hero__places { gap: 0.5rem 1.375rem; font-weight: 500; font-size: 1.0625rem; }
.hero__places .mk-place { align-items: center; gap: 0.5rem; }
.hero__places .mk-flag { width: 20px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(18, 19, 21, .14); }
.hero__channels { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero__channels .hero__channel { justify-content: center; }
.hero__channel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 1px solid rgba(18, 19, 21, .13); border-radius: 999px; background: rgba(255, 255, 255, .65); font-size: 0.875rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.hero__channel .mk-channel-logo { width: 16px; height: 16px; }
.mk-act:not(.hero) { padding-top: 6rem; }
.mk-field--violet .act-kicker, .mk-field--cobalt .act-kicker { opacity: 1; }
.act-kicker { margin: 0 0 var(--s-5); font-family: var(--font-mono); font-size: var(--t-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; opacity: .7; }
.act-rows { margin-top: var(--s-6); max-width: 34rem; }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.product { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: 1.75rem; }
.product > .mk-icon { width: 3rem; height: 3rem; padding: 0.75rem; box-sizing: border-box; border-radius: var(--r-code); background: var(--violet-ground); color: var(--violet); stroke-width: 1.75; }
.product h3 { margin: 0 0 var(--s-2); font-family: var(--font-display); font-size: var(--t-title); letter-spacing: var(--ls-tight); font-weight: 500; }
.product p { margin: 0 0 var(--s-3); color: var(--text-2); max-width: 34ch; }
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: none; }
.plans-foot { margin-top: var(--s-5); display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; color: var(--text-2); }
.close .mk-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-8); align-items: center; }
@media (max-width: 56.25em) {
  .hero { padding-top: 6rem; min-height: 0; }
  .hero .mk-wrap { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero .sheet { grid-column: 1; grid-row: 2; }
  .sheet { aspect-ratio: 1 / 1.3; }
  .sheet__stage[data-framing="wide"] { display: none; }
  .sheet__stage[data-framing="narrow"] { display: block; }
  .sheet__title { grid-template-columns: 1fr 1fr; }
  .sheet__title > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid rgba(31, 63, 229, .35); }
  .sheet__title > div:nth-child(2) { border-left: 0; }
  .products, .close .mk-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 56.25em) {
  .hero__reach { margin: 1.75rem 0 1.25rem; grid-template-columns: 1fr; gap: 8px; }
  .hero__row:last-child .hero__label { margin-top: 8px; padding-top: 0; }
  .hero__places { gap: 6px 18px; font-size: 1rem; }
  .hero__channels { display: flex; gap: 6px; }
  .hero__channel { justify-content: center; width: 42px; height: 42px; padding: 0; }
  .hero__channel .mk-channel-logo { width: 20px; height: 20px; }
  .hero__name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* The prototype's style attributes, as rules. */
.mk-rule + .section-head { margin-top: var(--s-6); }

/* The Free caveat under the first act's rows (D-67), in their mono. */
.act-note { margin: var(--s-4) 0 0; max-width: 34rem; font-family: var(--font-mono); font-size: var(--t-mono-s); line-height: var(--lh-text); color: var(--text-3); }

/* #1158: the developer tools section, five cards in three columns. The
   MCP card spans two; one column under 56.25em. */
.mk-tools .mk-wrap { display: block; }
.mk-tools__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.mk-tool { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); background: var(--white); border-radius: var(--r-card-l); color: var(--text); text-decoration: none; box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.mk-tool b { font-family: var(--font-display); font-weight: 500; font-size: var(--t-title); letter-spacing: var(--ls-tight); }
.mk-tool > span:not(.mk-tool__ic) { color: var(--text-2); line-height: var(--lh-text); }
.mk-tool__ic .mk-icon { width: 2.5rem; height: 2.5rem; padding: 0.625rem; box-sizing: border-box; border-radius: var(--r-code); background: var(--violet-ground); color: var(--violet); }
.mk-tool pre { margin: var(--s-2) 0 0; font-size: var(--t-mono-s); white-space: pre; overflow-x: auto; font-variant-ligatures: none; }
.mk-tool--wide { grid-column: span 2; }
.mk-chat { line-height: 1.7; }
.mk-plats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: var(--s-2); }
.mk-plats a { font-size: var(--t-mono-s); color: var(--text); text-decoration: none; padding: 0.25rem 0.625rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); }
@media (max-width: 56.25em) {
  .mk-tools__grid { grid-template-columns: minmax(0, 1fr); }
  .mk-tool--wide { grid-column: auto; }
}