/* VariaBox: anthracite and turquoise, retaining the original illustrated planner. */
:root {
  --ink: #252a2e;
  --teal: #006f80;
  --teal-dark: #005b69;
  --accent: #00bdd6;
  --accent-ink: #142c33;
  --mint: #e7f8fb;
  --paper: #f8f8f5;
  --muted: #667279;
  --line: #dce2e4;
}
.header { background: #232527; color: #f7fafb; border-bottom: 1px solid #ffffff12; }
.private { color: #c5d1d5; }
.language-picker { color: #f7fafb; border-color: #89969c66; }
.intro-band { background: #232527; color: #f7fafb; margin-bottom: 36px; }
.intro h1 { color: #f7fafb; }
.intro h1 span, .intro .eyebrow, .intro-aside a { color: var(--accent); }
.intro .eyebrow > span { background: var(--accent); }
.intro .lead, .intro-aside p { color: #c7d0d4; }
.intro-aside { border-left-color: #ffffff30; }
.intro-aside strong { color: #f7fafb; }
.intro-aside a:hover { color: #7fe8f4; }
.intro-symbol { opacity: .35; }
.intro-symbol svg { stroke: var(--accent); }
.button:not(.outline) { background: var(--accent); color: var(--accent-ink); }
.button:not(.outline):hover { background: #35ccdf; }
.button.outline { border-color: #bad5dc; color: var(--teal); }
.button.outline:hover, .button.outline[aria-pressed=true] { background: #e6f7fa; border-color: #84c9d5; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: #008fa3; }
.visual-panel { background: #f2f2ed; }
.artboard { background-image: radial-gradient(#87969b30 .7px, transparent .7px); }
.view-tabs { background: #e5e9e9; }
.view-tabs button[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.mode-tabs button[aria-pressed=true] { color: var(--teal); border-bottom-color: var(--accent); }
.preset:hover { border-color: #8dcbd6; background: #f5fcfd; }
.preset[aria-pressed=true] { border-color: #00a8bf; background: #eafafd; box-shadow: inset 0 0 0 .4px #00a8bf; }
.preset[aria-pressed=true] .radio { border-color: #00a8bf; background: var(--accent); }
.preset[aria-pressed=true] .radio:after { color: var(--accent-ink); }
.module-option.last-added, .module-option[aria-pressed=true] { border-color: #00a8bf; background: #eafafd; }
.module-option:disabled { background: #f3f5f4; color: #808e93; }
.module-option:disabled .module-add > span { color: #97a5aa; }
.switch-track { background: #b8c3c6; }
.switch input:checked + .switch-track { background: #00889b; }
.switch input:focus-visible + .switch-track { outline-color: #008fa3; }
.canvas-controls, .canvas-caption { border-top-color: #dce1df; }
.canvas-caption { background: #e9edea; }
.canvas-caption p { color: #647477; }
.dot { background: #78979e; }
.selection-note > span { color: #91bfc9; }
.selection-tools { background: #f9fcfc; border-color: #b9d6dc; border-left-color: var(--accent); }
.placed-move { border-top-color: #dce9eb; }
.placed-move button { background: #edf9fb; border-color: #c1dce2; }
.placed-move button:hover { background: #d9f2f7; }
.placed-module.is-selected:focus-visible > rect, .divider-module:focus-visible .divider-wall { stroke: #008fa3; }
.selected-mark circle { fill: var(--accent); }
.selected-mark path { stroke: var(--accent-ink); }
.capacity > div { background: #e5eef0; }
.capacity > div > span { background: #00a8bf; }
.photo-picker button { border-color: #d0dce0; background: #f8fbfb; }
.photo-picker button[aria-pressed=true] { background: #e5f8fb; border-color: #00a8bf; }
.next-cta { border-bottom-color: #b7d8df; }
.footer { background: #232527; color: #c7d0d4; }
.footer strong { color: #f7fafb; }
.footer a { color: #a4e8f1; }
.footer-private { color: #a2b3bb; }
dialog { background: #fafbf9; }
dialog::backdrop { background: #14191cdb; }
.close-dialog:hover { background: #e7eff1; }
.dialog-summary { background: #eaf9fc; border-color: #b9dfe7; }
.privacy-note { border-top-color: var(--line); }
@media (max-width:740px) { .intro-band { margin-bottom: 24px; } }

/* Compact introduction and a larger, carefully illustrated planning canvas. */
.header-inner { height: 80px; }
.brand .brand-logo { width: 118px; height: 68px; }
.intro-band { margin-bottom: 22px; }
.intro { display: grid; grid-template-columns: auto minmax(0,1.65fr) minmax(210px,1fr); align-items: center; gap: 24px; padding-block: 20px; }
.intro .eyebrow { max-width: 155px; font-size: 9px; letter-spacing: 1.5px; line-height: 1.65; }
.intro h1 { font-size: clamp(25px,2.45vw,37px); line-height: 1.16; margin: 0; letter-spacing: -1.3px; font-weight: 600; }
.intro .lead { font-size: 12px; line-height: 1.5; }
.intro-detail { min-width: 0; border-left: 1px solid #ffffff28; padding-left: 24px; }
.intro-start { display: inline-flex; align-items: center; gap: 18px; font-size: 11px; color: var(--accent); margin-top: 6px; min-height: 28px; }
.intro-start:hover { color: #8cecf6; }
.workspace { grid-template-columns: minmax(0,1.55fr) minmax(350px,1fr); border-radius: 12px; box-shadow: 0 9px 32px #24282b07; }
.section-heading h2 { font-size: 22px; letter-spacing: -.6px; }
.canvas-top { padding: 21px 24px 0; }
.canvas-top h3 { font-size: 29px; }
.artboard { min-height: 0; margin: 4px 12px 0; background-image: none; }
.artboard > svg { width: 100%; max-width: 730px; height: auto; max-height: min(650px,calc(100svh - 350px)); min-height: 345px; }
.visual-sticky { top: 8px; }
.visual-panel { background: #f4f3ed; }
.view-tabs button { min-height: 42px; font-size: 12px; }
.config-panel { padding: 23px 22px 21px; }
.preset { min-height: 69px; padding: 7px 12px; gap: 12px; }
.preset-icon { width: 53px; height: 56px; fill: none; stroke: none; flex: none; }
.preset strong { font-size: 14px; }
.preset small { font-size: 11px; }
.radio { width: 18px; height: 18px; }
.illustration-note { text-align: center; padding: 7px 15px 10px; color: #6a777a; font-size: 10px; font-style: italic; line-height: 1.5; }
.canvas-controls { padding: 8px 24px; }
.canvas-controls .switch { min-height: 40px; font-size: 11px; }
.canvas-controls .text-button { font-size: 11px; }
.tray-surface { transition: stroke .15s,stroke-width .15s; }
.placed-module.is-selected > .tray-surface { fill: #e8d1a9; }
.placed-module:hover > .tray-surface, .placed-module:focus-visible > .tray-surface { stroke-width: 2.5; }
.placed-module.is-selected > .tray-surface { stroke: #008a9c; stroke-width: 3; }
.divider-module.is-selected .divider-wall { stroke-width: 8; }
.divider-module:hover .divider-wall { stroke-width: 8; }
@media (min-width:1600px) { .wrap { width: min(1400px,calc(100% - 100px)); } .intro h1 { font-size: 39px; } }
@media (max-width:1100px) {
 .intro { grid-template-columns: minmax(0,1.6fr) minmax(180px,1fr); gap: 8px 24px; padding-block: 16px; }
 .intro .eyebrow { grid-column: 1; max-width: none; }
 .intro h1 { grid-column: 1; font-size: 29px; }
 .intro-detail { grid-column: 2; grid-row: 1 / 3; }
 .workspace { grid-template-columns: minmax(0,1.4fr) minmax(310px,1fr); }
 .canvas-top { padding-inline: 18px; }
 .canvas-top h3 { font-size: 26px; }
 .artboard > svg { min-height: 310px; }
 .config-panel { padding: 20px 18px; }
 .preset { gap: 9px; padding-inline: 10px; }
 .preset-icon { width: 47px; height: 51px; }
 .preset strong { font-size: 13px; }
 .preset small { font-size: 10px; }
 .canvas-controls { flex-wrap: wrap; gap: 5px 12px; padding-inline: 18px; }
}
@media (max-width:740px) {
 .header-inner { height: 72px; }
 .brand .brand-logo { width: 90px; height: 58px; }
 .intro { display: block; padding-block: 15px 17px; }
 .intro .eyebrow { font-size: 8px; letter-spacing: 1.4px; margin-bottom: 8px; }
 .intro h1 { font-size: 26px; line-height: 1.18; letter-spacing: -.9px; }
 .intro-detail { border: 0; padding: 0; margin-top: 8px; }
 .intro .lead { font-size: 11px; line-height: 1.5; }
 .intro-start { display: none; }
 .intro-band { margin-bottom: 18px; }
 .section-heading h2 { font-size: 16px; }
 .workspace { grid-template-columns: 1fr; }
 .canvas-top { padding: 17px 15px 0; }
 .canvas-top h3 { font-size: 25px; }
 .view-tabs { width: 100%; }
 .view-tabs button { font-size: 12px; }
 .artboard { margin: 2px 3px 0; }
 .artboard > svg { width: 100%; min-height: 0; max-height: none; }
 .canvas-controls { padding: 7px 14px; gap: 3px 9px; }
 .canvas-controls .switch, .canvas-controls .text-button { font-size: 10px; min-height: 40px; }
 .illustration-note { padding: 5px 14px 9px; font-size: 9px; }
 .config-panel { padding: 20px 16px; }
 .preset-icon { width: 50px; height: 54px; }
 .preset { min-height: 69px; }
 .preset strong { font-size: 14px; }
 .preset small { font-size: 11px; }
}
@media (max-width:360px) { .brand .brand-logo { width: 82px; height: 54px; } .intro h1 { font-size: 24px; } }

/* Approved VariaBox Studio identity and registered-design notice. */
.studio-mark {line-height:1.25;letter-spacing:-.5px}
.studio-mark strong {display:block;font-size:23px;font-weight:650}
.studio-mark em {font-style:normal;color:var(--accent);font-weight:450}
.product-mark.studio-mark > span {display:block;margin:5px 0 0;font-size:10px;font-weight:400;letter-spacing:.6px;opacity:.72}
.product-signature {min-width:148px;line-height:1.2}
.product-signature strong {font-size:22px;font-weight:650;letter-spacing:-.6px;color:#f8fafb;white-space:nowrap}
.product-signature sup {font-size:12px;vertical-align:super;color:var(--accent);margin-left:2px}
.product-signature small {display:block;font-size:10px;letter-spacing:1.1px;margin-top:6px;color:#b6c7ce}
.design-badge {display:inline-flex;align-items:center;gap:7px;margin-top:8px;border:1px solid #b8dde4;border-radius:5px;background:#edf9fb;color:#006d7d;padding:5px 9px;font-size:10px;font-weight:500;line-height:1.2}
.design-badge > span {font-size:16px;line-height:1}
.design-badge i {font-style:normal;font-size:12px;color:#4b919e;margin-left:5px}
.design-badge:hover {background:#dbf3f7}
.section-heading {align-items:center;margin-bottom:16px}
.footer .design-protection {border-top:1px solid #ffffff24;margin-top:22px;padding-top:22px;display:flex;justify-content:flex-start;align-items:flex-start;gap:15px}
.design-symbol {font-size:29px;font-weight:300;color:#00bdd6;line-height:1.25}
.design-protection strong {font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:0;color:#e9f2f4}
.design-protection p {font-size:11px;color:#becbd1;margin:6px 0 5px;line-height:1.55}
.design-protection div > span {color:#99b0ba;font-size:10px;letter-spacing:.2px}
.design-protection b {font-weight:500;color:#d2e3e8}
.legal-brand {margin-left:auto;color:#e1edf0;font-size:20px;letter-spacing:-.4px;white-space:nowrap;line-height:1.25}
.legal-brand sup {color:#00bdd6;font-size:11px}
.legal-brand small {display:block;font-size:9px;letter-spacing:1px;margin-top:5px;color:#9bb6c0;text-align:right}
@media(max-width:740px){
 .studio-mark strong{font-size:17px;letter-spacing:-.7px}
 .product-mark.studio-mark > span{font-size:8px;letter-spacing:0;margin-top:4px}
 .product-signature strong{font-size:17px}
 .product-signature small{font-size:8px;margin-top:4px}
 .product-signature {margin-bottom:10px}
 .intro{padding-block:16px 19px}
 .header-inner{gap:10px;width:calc(100% - 28px)}
 .brand .brand-logo{width:78px}
 .language-picker select{min-width:75px;font-size:11px}
 .language-picker{padding-left:5px}
 .design-badge{font-size:9px;padding:4px 7px;gap:5px}
 .design-badge > span{font-size:14px}
 .footer .design-protection{gap:10px;flex-wrap:wrap}
 .design-protection > div{flex:1;min-width:0}
 .design-protection p{font-size:10px}
 .design-protection strong{font-size:11px}
 .legal-brand{display:none}
 .design-symbol{font-size:24px}
}

.intro h1 span { display:block; }

/* Compact view for the existing VariaBox page. Keep an independent viewport
   so the editor, native enquiry dialog and keyboard focus work inside a frame. */
.embedded .intro-band, .embedded .next-section,
.embedded .header .private, .embedded .header-cta,
.embedded .footer > .wrap:first-child { display:none; }
.embedded .wrap { width:calc(100% - 32px); }
.embedded .header-inner { width:calc(100% - 32px); height:72px; }
.embedded .planner { padding-top:18px; }
.embedded .footer { padding-block:18px; margin-top:24px; }
.embedded .footer .design-protection { margin-top:0; padding-top:0; border-top:0; }
@media(max-width:740px) {
 .embedded .wrap, .embedded .header-inner { width:calc(100% - 24px); }
 .embedded .section-heading > span { display:none; }
}
@media(max-width:360px) {
 .header-inner { width:calc(100% - 24px); gap:8px; }
 .brand .brand-logo { width:60px; height:48px; }
 .studio-mark strong { font-size:15px; letter-spacing:-.6px; }
 .product-mark.studio-mark > span { font-size:7px; }
 .language-picker { padding-left:5px; gap:2px; }
 .language-picker select { min-width:72px; padding-right:13px; font-size:11px; }
}

/* Fixed meal illustrations and a dedicated cutlery-and-napkin insert. */
.module-icon { width:46px; height:54px; }
.module-icon .module-preview { width:100%; height:100%; overflow:hidden; }
.module-content-hint { display:block; font-size:10px; font-style:normal; color:var(--teal); line-height:1.5; margin-top:2px; }
.module-option:disabled .module-content-hint { color:#74858b; }
.placed-content { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; width:100%; border-top:1px solid #dce9eb; padding-top:10px; margin-top:3px; }
.placed-content > span { font-size:10px; color:var(--muted); }
.placed-content > strong { font-size:12px; font-weight:600; }
.placed-content .button { min-height:42px; padding:8px 12px; font-size:11px; margin-left:auto; }
.placed-content > small { width:100%; font-size:10px; color:var(--muted); }
@media(max-width:740px){
 .module-icon { width:43px; height:52px; }
 .module-content-hint { font-size:10px; }
 .placed-content { gap:7px 10px; }
 .placed-content .button { font-size:10px; min-height:44px; padding:7px 10px; }
}