/* Page-scoped: other pages retain their existing typography and layout. */
.canteen-page { font-weight: 400; }
.canteen-page *, .canteen-page *::before, .canteen-page *::after { box-sizing: border-box; }
.cp-wrap { width: min(1280px, 100%); margin-inline: auto; padding-inline: 42px; }
.cp-section { padding-block: 104px; }
.canteen-page h1, .canteen-page h2, .canteen-page h3 { overflow-wrap: normal; }
.cp-label { font: 800 10px/1.5 'Open Sans',sans-serif; letter-spacing: .13em; margin: 0 0 24px; }
.cp-hero { padding-block: 82px 90px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 70px; }
.cp-hero-copy h1 { font: 400 clamp(62px,7.9vw,104px)/.95 'Lilita One',sans-serif; letter-spacing: -.025em; margin: 0 0 28px; }
.cp-hero-copy h1 span { background: var(--lime); box-shadow: 9px 0 0 var(--lime), -3px 0 0 var(--lime); }
.cp-hero .cp-label { display: flex; align-items: center; gap: 9px; }
.cp-hero .cp-label > span { width: 8px; height: 8px; border: 2px solid var(--ink); background: var(--mint); border-radius: 50%; }
.cp-deck { font-size: 18px; line-height: 1.6; max-width: 530px; margin: 0 0 30px; }
.cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; }
.cp-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; background: var(--lime); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); font: 800 13px/1.4 'Open Sans',sans-serif; transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.cp-button span { font-size: 23px; line-height: 1; }
.cp-button:hover, .cp-audience-card:hover, .cp-faq-list details:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--ink); }
.cp-button:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.cp-text-link { font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; }
.cp-fine { font-size: 11px; line-height: 1.7; margin: 22px 0 0; max-width: 470px; }
.canteen-page :focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.cp-hero-visual { background: var(--mint); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink); padding: 23px; }
.cp-visual-top { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; line-height: 1.6; font-weight: 800; letter-spacing: .05em; padding-bottom: 24px; }
.cp-meal { display: flex; gap: 16px; align-items: flex-start; background: white; border: 3px solid var(--ink); border-radius: 13px; padding: 19px 17px; margin-bottom: 14px; }
.cp-meal-last { background: var(--lime); margin-bottom: 20px; }
.cp-meal-number { font: 400 22px 'Lilita One',sans-serif; border-bottom: 2px solid var(--ink); }
.cp-meal small { font-size: 9px; letter-spacing: .1em; font-weight: 800; display: block; margin-bottom: 8px; }
.cp-meal strong { display: block; font: 400 clamp(23px,2.5vw,31px)/1.05 'Lilita One',sans-serif; text-transform: uppercase; }
.cp-meal-icon { margin-left: auto; font-size: 25px; line-height: 1; }
.cp-visual-bottom { font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.cp-principles { border-block: 3px solid var(--ink); }
.cp-principles .cp-wrap { display: grid; grid-template-columns: repeat(3,1fr); padding-block: 23px; gap: 20px; }
.cp-principles p { font-size: 12px; font-weight: 800; margin: 0; display: flex; gap: 9px; align-items: center; }
.cp-principles p span { color: var(--ink); background: var(--mint); padding: 1px 6px; border-radius: 4px; }
.cp-problem, .cp-responsibility { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.canteen-page h2 { font: 400 clamp(37px,4.8vw,62px)/1 'Lilita One',sans-serif; letter-spacing: -.02em; margin: 0 0 24px; }
.cp-large { font-size: 20px; line-height: 1.55; margin: 0 0 23px; }
.cp-problem-copy > p:not(.cp-large), .cp-responsibility > div > p:not(.cp-label) { font-size: 15px; line-height: 1.75; margin: 0 0 23px; }
.cp-product { background: var(--mint); border-block: 3px solid var(--ink); padding-block: 76px; }
.cp-product-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 90px; align-items: center; }
.cp-phone-stage { margin: 0; background: white; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); overflow: hidden; }
.cp-stage-label { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px; font-size: 9px; font-weight: 800; letter-spacing: .08em; border-bottom: 2px solid var(--ink); }
.cp-phone-viewport { position: relative; height: 420px; width: 100%; display: grid; place-items: center; background: white; }
.cp-phone-viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cp-poster { height: 87%; max-width: 74%; aspect-ratio: .49; padding: 8px; background: var(--ink); border: 2px solid #171717; border-radius: 27px; box-shadow: 5px 7px 0 #171717; overflow: hidden; }
.cp-poster img { display: block; width: 100%; height: 100%; border-radius: 18px; object-fit: fill; transform: scaleY(-1); }
.cp-phone-stage figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 15px 22px; font-size: 10px; line-height: 1.5; }
.cp-angle { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.cp-progress { height: 5px; background: white; }
.cp-progress > span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.cp-feature-list { padding: 0; margin: 28px 0 0; list-style: none; }
.cp-feature-list li { display: flex; gap: 20px; border-top: 2px solid var(--ink); padding: 18px 0; }
.cp-feature-list li > span { font: 400 23px 'Lilita One',sans-serif; }
.cp-feature-list h3 { font: 800 15px/1.4 'Open Sans',sans-serif; margin: 0 0 5px; text-transform: none; }
.cp-feature-list p { font-size: 13px; line-height: 1.6; margin: 0; }
.cp-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 44px; }
.cp-section-heading h2 { margin-bottom: 0; }
.cp-section-heading > p { max-width: 320px; margin: 0 0 3px; font-size: 14px; line-height: 1.7; }
.cp-steps { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.cp-steps li { padding: 26px 23px 0 0; }
.cp-steps li + li { padding-left: 23px; border-left: 2px solid var(--ink); }
.cp-step-number { display: block; font: 400 40px 'Lilita One',sans-serif; color: var(--ink); margin-bottom: 25px; }
.cp-steps h3 { font: 400 25px/1.05 'Lilita One',sans-serif; text-transform: uppercase; margin: 0 0 18px; }
.cp-steps p { font-size: 13px; line-height: 1.75; margin: 0; }
.cp-audiences { background: var(--ink); color: white; }
.cp-audiences .cp-label { color: var(--lime); }
.cp-audience-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 44px; }
.cp-audience-card { padding: 32px; border: 3px solid white; border-radius: 20px; background: white; color: var(--ink); box-shadow: 5px 5px 0 var(--lime); transition: transform 160ms ease-out, box-shadow 160ms ease-out; display: flex; flex-direction: column; }
.cp-audience-card:nth-child(2) { background: var(--lime); border-color: var(--lime); box-shadow: 5px 5px 0 white; }
.cp-audience-card .cp-label { color: var(--ink); font-size: 9px; margin-bottom: 24px; }
.cp-audience-card h3 { font: 400 clamp(33px,4vw,52px)/1 'Lilita One',sans-serif; text-transform: uppercase; margin: 0 0 24px; }
.cp-audience-card p { font-size: 14px; line-height: 1.75; margin: 0 0 32px; }
.cp-audience-card a { margin-top: auto; align-self: start; }
.cp-audiences :focus-visible { outline-color: var(--mint); }
.cp-role-table { border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; }
.cp-role-table > div { padding: 22px 26px; }
.cp-role-table > div:nth-child(2) { background: var(--lime); border-block: 2px solid var(--ink); }
.cp-role-table h3 { font: 400 26px 'Lilita One',sans-serif; text-transform: uppercase; margin: 0 0 12px; }
.cp-role-table ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; }
.cp-role-table > p { margin: 0; padding: 22px 26px; font-size: 12px; line-height: 1.75; }
.cp-faq { padding-top: 0; }
.cp-faq-list { display: grid; gap: 16px; }
.cp-faq-list details { background: white; border: 3px solid var(--ink); border-radius: 15px; box-shadow: 5px 5px 0 var(--ink); transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
.cp-faq-list details[open] { background: var(--mint); }
.cp-faq-list summary { cursor: pointer; position: relative; padding: 24px 64px 24px 24px; list-style: none; font: 400 23px/1.18 'Lilita One',sans-serif; text-transform: uppercase; }
.cp-faq-list summary::-webkit-details-marker { display: none; }
.cp-faq-list summary::after { content: '+'; position: absolute; top: 19px; right: 24px; font: 400 34px/1 'Open Sans',sans-serif; }
.cp-faq-list details[open] summary::after { content: '−'; }
.cp-faq-list details > div { padding: 0 64px 26px 24px; max-width: 930px; }
.cp-faq-list p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; }
.cp-faq-list a { font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.cp-contact { background: var(--lime); border-block: 3px solid var(--ink); }
.cp-contact-inner { padding-block: 70px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: center; }
.cp-contact h2 { margin-bottom: 23px; }
.cp-contact p:not(.cp-label) { font-size: 14px; line-height: 1.8; max-width: 610px; margin-bottom: 0; }
.cp-contact-action { justify-self: end; }
.cp-contact-action .cp-button { background: white; min-width: 245px; }
.cp-contact-action p { font-size: 11px !important; }
.cp-contact-form { min-width: 0; border: 3px solid var(--ink); border-radius: 20px; background: white; padding: 26px; box-shadow: 6px 6px 0 var(--ink); }
.cp-contact-form label { display: grid; gap: 7px; margin-bottom: 16px; font-size: 11px; font-weight: 800; }
.cp-contact-form input, .cp-contact-form select, .cp-contact-form textarea { font: 400 14px/1.5 'Open Sans',sans-serif; padding: 11px; border: 2px solid var(--ink); border-radius: 7px; width: 100%; min-width: 0; color: var(--ink); background: white; }
.cp-contact-form textarea { resize: vertical; }
.cp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cp-contact-form .cp-privacy { display: flex; align-items: flex-start; font-weight: 400; font-size: 11px; }
.cp-privacy input { width: 18px; height: 18px; flex: 0 0 18px; margin: 1px 3px 0 0; accent-color: var(--ink); }
.cp-privacy a { text-decoration: underline; }
.cp-contact-form .cp-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cp-contact-form #contact-status { font-size: 11px; line-height: 1.6; margin-top: 17px; }
.cp-contact-form button:disabled { cursor: not-allowed; box-shadow: none; transform: none; background: white; opacity: .6; }
.cp-contact-inner:has(.cp-contact-form) { grid-template-columns: 1fr 1fr; gap: 55px; }
.cp-poster[hidden] { display: none; }
.cp-reveal-ready { animation: cp-enter 550ms ease-out both; }
@keyframes cp-enter { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1050px) {
  .cp-hero { gap: 35px; }
  .cp-product-grid, .cp-problem, .cp-responsibility { gap: 42px; }
  .cp-hero-copy h1 { font-size: clamp(62px,8vw,90px); }
  .cp-deck { font-size: 16px; }
  .cp-steps { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 32px; }
  .cp-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .cp-contact-inner:has(.cp-contact-form) { grid-template-columns: 1fr; gap: 30px; }
  .cp-wrap { padding-inline: 24px; }
  .cp-section { padding-block: 64px; }
  .cp-hero { grid-template-columns: 1fr; gap: 40px; padding-block: 50px 60px; }
  .cp-hero-copy h1 { font-size: clamp(62px,13vw,90px); }
  .cp-hero-visual { max-width: 530px; width: 100%; }
  .cp-meal strong { font-size: 29px; }
  .cp-principles .cp-wrap { grid-template-columns: 1fr; gap: 12px; }
  .cp-problem, .cp-responsibility, .cp-product-grid, .cp-contact-inner { grid-template-columns: 1fr; gap: 30px; }
  .cp-product { padding-block: 54px; }
  .cp-product-copy { grid-row: 1; }
  .cp-phone-stage { max-width: 440px; width: 100%; margin-inline: auto; }
  .cp-phone-viewport { height: 380px; }
  .cp-section-heading { display: block; margin-bottom: 32px; }
  .cp-section-heading > p { margin-top: 20px; }
  .cp-audience-grid { grid-template-columns: 1fr; }
  .cp-audience-card h3 { font-size: 44px; }
  .cp-contact-inner { padding-block: 54px; }
  .cp-contact-action { justify-self: start; }
  .cp-faq { padding-top: 0; }
  .cp-faq-list summary { font-size: 20px; padding: 20px 52px 20px 19px; }
  .cp-faq-list summary::after { top: 16px; right: 18px; }
  .cp-faq-list details > div { padding: 0 20px 24px; }
  .cp-faq-list p { font-size: 14px; }
}
@media (max-width: 400px) {
  .cp-form-row { grid-template-columns: 1fr; gap: 0; }
  .cp-wrap { padding-inline: 19px; }
  .cp-hero-copy h1 { font-size: 59px; }
  .cp-steps { grid-template-columns: 1fr; }
  .cp-steps li + li { border-left: 0; padding-left: 0; border-top: 2px solid var(--ink); }
  .cp-audience-card { padding: 24px; }
  .cp-audience-card h3 { font-size: 37px; }
  .cp-phone-viewport { height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .canteen-page { scroll-behavior: auto; }
  .canteen-page *, .canteen-page *::before, .canteen-page *::after { animation: none !important; transition: none !important; }
}