/* Spis: white space, basil and mint. Warm peach is reserved for the product tour. */
:root {
  --paper: #fff; --ink: #193e25; --muted: #58655b; --green: #2a6438;
  --green-dark: #193e25; --mint: #e2efe3; --peach: #f1e4d9;
  --line: #dce3dc; --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light; font-family: var(--sans); color: var(--ink);
  background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-weight: 400; line-height: 1.08; }
h1,h2,.tour-panel h3 { font-family: var(--serif); letter-spacing: -.045em; }
h2 { font-size: clamp(38px, 4.2vw, 60px); }
em { color: var(--green); font-weight: 400; }
a { color: inherit; text-underline-offset: 4px; }
button,input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
a,button { touch-action: manipulation; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 3px solid #a96331; outline-offset: 5px; }
[hidden] { display: none !important; }
.wrap,.nav-wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.section-space { padding-block: 96px; }
.eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 550; margin-bottom: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 15px 23px; border: 1px solid transparent; border-radius: 6px; background: var(--green); color: white; font-size: 14px; font-weight: 550; line-height: 1.5; text-decoration: none; transition: background .15s; }
.button:hover { background: var(--green-dark); }
.button:disabled { opacity: .6; cursor: wait; }
.button-small { padding: 10px 18px; font-size: 12px; }
.text-link { display: inline-block; padding-block: 7px; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover { color: var(--green); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; background: white; padding: 10px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.nav-wrap { min-height: 80px; display: flex; align-items: center; gap: 32px; }
.brand { display: block; flex-shrink: 0; }
.brand img { width: 88px; height: auto; }
.desktop-nav { display: flex; gap: 32px; margin-left: auto; margin-right: 12px; }
.desktop-nav a { font-size: 12px; text-decoration: none; }
.desktop-nav a:hover { text-decoration: underline; }
.menu-toggle { display: none; }
.mobile-nav { padding: 12px 24px 20px; border-top: 1px solid var(--line); }
.mobile-nav a { display: block; padding: 10px 0; text-decoration: none; }
/* The real app and the complete signup are both in the opening composition. */
.hero { display: grid; grid-template-columns: 1.12fr 1fr; grid-template-rows: auto auto; column-gap: 72px; align-content: center; padding-block: 56px; }
.hero-copy { grid-column: 1; align-self: end; }
.hero h1 { font-size: clamp(50px, 5.35vw, 76px); margin-bottom: 24px; line-height: 1.06; }
.hero-description { color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 440px; }
.hero-visual { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
.hero-stage { display: grid; place-items: center; padding: 28px; background: var(--mint); border-radius: 140px 140px 8px 8px; }
.phone { position: relative; overflow: hidden; background: #f6f4ef; border: 5px solid var(--green-dark); border-radius: 37px; box-shadow: 0 18px 35px -18px #193e2559; }
.phone img { width: 100%; height: auto; }
.hero-phone { width: 244px; }
.hero-visual figcaption { text-align: center; font-family: var(--serif); font-style: italic; font-size: 17px; margin-top: 16px; color: var(--green); }
.hero-signup { grid-column: 1; padding-top: 28px; align-self: start; min-width: 0; }
.signup-intro { font-size: 14px; margin-bottom: 14px; }
.hero-signup label:not(.consent),.signup-card label:not(.consent) { display: block; font-size: 12px; margin-bottom: 6px; }
.signup-fields { display: flex; gap: 8px; }
input[type=email] { min-width: 0; width: 100%; background: white; color: var(--ink); border: 1px solid #97a89a; border-radius: 6px; padding: 13px 14px; font-size: 16px; line-height: 1.5; }
.signup-fields .button { flex-shrink: 0; padding-inline: 19px; }
.consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; font-size: 12px; line-height: 1.6; }
.consent input { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0; accent-color: var(--green); }
.fine-print { color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 9px; max-width: 440px; }
.form-status { font-size: 13px; line-height: 1.6; margin-top: 12px; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.form-status.error { color: #9b2f45; }
.form-status.success { color: var(--green); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hero-footnote { display: flex; flex-wrap: wrap; gap: 12px 25px; border-top: 1px solid var(--line); margin-top: 26px; padding-top: 17px; color: var(--muted); font-size: 11px; }
.hero-footnote a { color: var(--ink); }
/* A quiet, interactive explanation, with no decorative icons or floating badges. */
.product-section { background: var(--mint); }
.section-heading { margin-bottom: 48px; }
.section-heading .eyebrow { margin-bottom: 16px; }
.product-tour { display: grid; grid-template-columns: 1fr 1.12fr; gap: 80px; align-items: center; }
.tour-visual { position: relative; display: flex; flex-direction: column; align-items: center; padding: 32px 20px 24px; background: var(--peach); border-radius: 8px; }
.tour-phone { width: 220px; }
.tour-visual-note { font-size: 12px; margin-top: 20px; }
.tour-content { min-width: 0; }
.tour-tabs { display: flex; gap: 26px; border-bottom: 1px solid #a9c4ad; margin-bottom: 32px; }
.tour-tabs button { display: flex; gap: 8px; align-items: center; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 14px 0; color: var(--muted); font-size: 10px; }
.tour-tabs button span { font-size: 14px; }
.tour-tabs [aria-selected=true] { color: var(--green-dark); border-color: var(--green-dark); }
.tour-panel { min-height: 280px; }
.tour-panel h3 { font-size: 40px; margin-bottom: 24px; }
.tour-panel p { font-size: 15px; color: #405a47; margin-bottom: 16px; max-width: 430px; }
.source-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; color: #405a47; font-size: 11px; }
.tour-content>.text-link { margin-top: 20px; }
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.story-photo>img { width: 100%; aspect-ratio: 1.1; object-fit: cover; object-position: 60% center; border-radius: 8px; }
.story-copy>p:not(.eyebrow) { color: var(--muted); font-size: 15px; margin-top: 24px; max-width: 390px; }
.story-copy>p:last-child { font-size: 12px; }
.kitchen-story { display: grid; grid-template-columns: 1fr 1fr; background: var(--green-dark); color: white; align-items: center; }
.kitchen-story>img { grid-column: 2; grid-row: 1; width: 100%; height: 470px; object-fit: cover; object-position: 62% center; }
.kitchen-story>.wrap { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding: 55px max(48px, calc((100vw - 1200px) / 2)); padding-right: 40px; }
.kitchen-story h2 { font-size: clamp(35px, 3.4vw, 50px); }
.kitchen-story .eyebrow { color: var(--mint); }
.facts-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 70px; border-bottom: 1px solid var(--line); }
.facts-section h2 { font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 18px; }
.facts-section p { font-size: 14px; color: var(--muted); max-width: 490px; }
.facts-section .text-link { margin-top: 12px; }
.faq-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; }
.faq-section h2 { font-size: 44px; margin-bottom: 20px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; cursor: pointer; padding: 22px 0; font-size: 14px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: 'Les svar'; white-space: nowrap; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; color: var(--muted); }
.faq-list [open] summary:after { content: 'Lukk'; }
.faq-list details p { padding: 0 0 24px; color: var(--muted); font-size: 14px; }
.launch-section { background: var(--mint); padding-block: 70px; }
.launch-closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.launch-closing p:not(.eyebrow) { margin-top: 24px; color: var(--muted); font-size: 14px; }
.site-footer { background: var(--green-dark); color: white; padding-top: 45px; }
.site-footer .brand img { filter: brightness(0) invert(1); }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 40px; }
.footer-top p { color: var(--mint); font-size: 12px; margin-top: 12px; }
.footer-top nav { display: flex; flex-wrap: wrap; gap: 26px; font-size: 12px; }
.footer-top nav a { text-decoration: none; }
.footer-top nav a:hover { text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #53755b; padding-block: 22px; font-size: 10px; color: var(--mint); }
.signup-card { background: var(--mint); border-radius: 8px; padding: 32px; }
.signup-card h3 { font-family: var(--serif); font-size: 32px; }
.signup-card form { margin-top: 22px; }
.signup-card .button { margin-top: 16px; }
/* Secondary pages retain their existing content and reading layout. */

.page-hero{padding-block:80px 60px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(50px,6vw,84px);max-width:850px}.page-hero .lead{margin-top:28px;max-width:640px;color:#4e524d;font-size:19px}.page-hero .updated{font-size:11px;color:var(--muted);margin-top:24px}.document-layout{display:grid;grid-template-columns:240px minmax(0,720px);gap:85px;padding-block:60px 100px;justify-content:space-between}.document-nav{position:sticky;top:125px;align-self:start;font-size:13px}.document-nav p{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:15px}.document-nav a{display:block;text-decoration:none;border-left:1px solid var(--line);padding:8px 15px}.document-nav a:hover{color:var(--green);border-left-color:var(--green)}.prose{font-size:16px;line-height:1.85}.prose h2{font-size:34px;letter-spacing:-.035em;margin:55px 0 20px;scroll-margin-top:120px}.prose h2:first-child{margin-top:0}.prose h3{font-family:var(--serif);font-size:25px;margin:30px 0 16px}.prose p{margin-bottom:20px}.prose li{margin-bottom:10px}.prose ul,.prose ol{padding-left:22px;margin:0 0 24px}.prose a{color:var(--green);text-underline-offset:4px;overflow-wrap:anywhere}.prose strong{font-weight:600}.prose .callout{background:var(--mint);padding:28px;border-radius:12px;margin-block:35px}.prose .callout h2{margin-top:0}.prose .callout p:last-child{margin-bottom:0}.prose .button{color:white}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-block:70px 100px}.contact-main{background:var(--mint);padding:44px;border-radius:14px;align-self:start}.contact-main h2{font-size:40px;margin-bottom:25px}.contact-email{font-size:clamp(20px,2.2vw,32px);text-underline-offset:6px}.contact-main p{font-size:14px;color:#4e524d;margin:25px 0}.contact-topics article{padding:25px 0;border-bottom:1px solid var(--line)}.contact-topics article:first-child{padding-top:0}.contact-topics h2{font-family:var(--sans);font-size:21px;letter-spacing:-.02em;margin-bottom:12px}.contact-topics p{font-size:14px;color:var(--muted)}.contact-topics a{color:var(--green)}.creator-banner{margin-top:32px;padding:30px;background:var(--green-dark);color:var(--paper);border-radius:14px}.creator-banner h3{margin-top:0}.creator-banner a{color:#dbe9d7}.source-note{font-size:12px;color:var(--muted)}

.document-nav { max-height: calc(100vh - 150px); overflow: auto; }
@media(max-width: 1100px) {
  .wrap,.nav-wrap { width: calc(100% - 64px); }
  .hero { column-gap: 36px; }
  .hero h1 { font-size: clamp(43px, 5.4vw, 60px); }
  .hero-phone { width: 220px; }
  .hero-stage { padding: 28px 18px; }
  .hero-description { font-size: 16px; }
  .product-tour,.story-grid,.faq-section { gap: 45px; }
  .tour-panel h3 { font-size: 34px; }
  .kitchen-story>.wrap { padding-left: 32px; }
  .document-layout { gap: 40px; grid-template-columns: 180px minmax(0,1fr); }
}
@media(max-width: 760px) {
  body { font-size: 16px; }
  .wrap,.nav-wrap { width: calc(100% - 40px); }
  .nav-wrap { min-height: 64px; gap: 18px; }
  .brand img { width: 72px; }
  .desktop-nav { display: none; }
  .nav-wrap>.button { margin-left: auto; }
  .button-small { padding: 9px 12px; font-size: 11px; }
  .menu-toggle { display: block; padding: 10px 0 10px 5px; border: 0; background: none; color: var(--ink); font-size: 12px; min-height: 44px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(110px, .64fr); gap: 26px 18px; padding-block: 30px 32px; }
  .hero-copy { align-self: center; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .025em; margin-bottom: 16px; max-width: 170px; }
  .hero h1 { font-size: clamp(32px, 5.8vw, 44px); margin-bottom: 18px; line-height: 1.08; }
  .hero-description { font-size: 13px; line-height: 1.7; }
  .hero-visual { grid-row: 1; align-self: center; }
  .hero-stage { padding: 16px 9px; border-radius: 70px 70px 4px 4px; }
  .hero-phone { width: 100%; max-width: 180px; border-width: 3px; border-radius: 20px; box-shadow: 0 10px 20px -12px #193e2566; }
  .hero-visual figcaption { display: none; }
  .hero-signup { grid-column: 1 / -1; padding: 0; }
  .signup-intro { font-size: 14px; margin-bottom: 12px; }
  .signup-fields .button { font-size: 12px; padding-inline: 16px; }
  .consent { font-size: 11px; }
  .fine-print { font-size: 10px; }
  .hero-footnote { margin-top: 20px; padding-top: 14px; justify-content: space-between; font-size: 10px; }
  .section-space { padding-block: 60px; }
  .eyebrow { font-size: 10px; margin-bottom: 18px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2 { font-size: 39px; }
  .product-tour { display: flex; flex-direction: column-reverse; gap: 30px; align-items: stretch; }
  .tour-tabs { gap: 25px; margin-bottom: 25px; }
  .tour-tabs button { min-height: 44px; }
  .tour-tabs button span { font-size: 13px; }
  .tour-panel { min-height: 250px; }
  .tour-panel h3 { font-size: 32px; margin-bottom: 18px; }
  .tour-panel p { font-size: 14px; }
  .source-tags { margin-top: 20px; }
  .tour-content>.text-link { margin-top: 10px; }
  .tour-visual { padding-block: 28px 20px; }
  .tour-phone { width: 210px; }
  .story-grid { display: flex; flex-direction: column-reverse; gap: 30px; align-items: stretch; }
  .story-copy h2 { font-size: 42px; }
  .story-copy>p:not(.eyebrow) { margin-top: 20px; font-size: 14px; }
  .story-photo>img { aspect-ratio: 1.1; }
  .kitchen-story { display: flex; flex-direction: column-reverse; align-items: stretch; }
  .kitchen-story>.wrap { padding: 36px 20px; }
  .kitchen-story h2 { font-size: 37px; }
  .kitchen-story>img { height: 340px; }
  .facts-section { grid-template-columns: 1fr; gap: 36px; padding-block: 50px; }
  .faq-section { grid-template-columns: 1fr; gap: 24px; }
  .faq-section h2 { font-size: 38px; margin-bottom: 10px; }
  .faq-list summary { font-size: 13px; gap: 12px; }
  .launch-section { padding-block: 50px; }
  .launch-closing { flex-direction: column; align-items: flex-start; gap: 28px; }
  .launch-closing h2 { font-size: 43px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer-top nav { gap: 22px; font-size: 11px; }
  .footer-bottom { gap: 10px; font-size: 9px; }
  .page-hero { padding-block: 45px 35px; }
  .page-hero h1 { font-size: 48px; }
  .page-hero .lead { font-size: 16px; }
  .document-layout { display: block; padding-block: 25px 60px; }
  .document-nav { position: static; max-height: none; overflow: visible; margin-bottom: 35px; display: flex; flex-wrap: wrap; gap: 8px; }
  .document-nav p { width: 100%; }
  .document-nav a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; }
  .prose { font-size: 15px; }
  .prose h2 { font-size: 30px; margin-top: 40px; }
  .prose .callout { padding: 22px; }
  .contact-grid { display: block; padding-block: 35px 60px; }
  .contact-main { padding: 28px; }
  .contact-main h2 { font-size: 35px; }
  .contact-topics { margin-top: 40px; }
}
@media(max-width: 360px) {
  .hero { grid-template-columns: minmax(0,1fr) 105px; column-gap: 12px; }
  .hero h1 { font-size: 30px; }
  .hero-description { font-size: 12px; }
  .hero-stage { padding-inline: 5px; }
  .hero-phone { border-radius: 16px; }
  .signup-fields { flex-direction: column; }
  .hero-footnote { gap: 10px; }
  .footer-bottom { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*:before,*:after { transition: none !important; animation: none !important; }
}
