/* Ondera support page, from the 8 October 2026 support page design.
   Standalone styles: landing.css sets global heading sizes that would override this layout. */
@font-face{font-family:'Roobert';src:url("/fonts/Roobert-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roobert';src:url("/fonts/Roobert-Medium.ttf") format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Roobert';src:url("/fonts/Roobert-SemiBold.ttf") format('truetype');font-weight:600;font-style:normal;font-display:swap}

/* Tokens: same values as the homepage and sign-up boards */
:root{--ink:#00171F;--ink-hover:#12313C;--canary:#F7FE72;--ash:#CAD2C5;--olive:#757761;--body:#454545;--grey:#5F5F5F;--line:#E0E0E0;--line-strong:#C6C6C6;--paper:#FAFAFA;--error:#B3261E;--ok:#1E6B3A;--gutter:24px}
@media (min-width:768px){:root{--gutter:48px}}
@media (min-width:1200px){:root{--gutter:120px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--ink)}a:hover{color:var(--body)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--canary);border-radius:6px}
.wrap{width:100%;max-width:calc(1200px + 2 * var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:12px 18px;border-radius:999px;background:var(--ink);color:#FFFFFF;text-decoration:none}
.skip:focus{top:12px;color:#FFFFFF}

/* Shared site classes */
.hl{position:relative;z-index:0;white-space:nowrap}
.hl::before{content:"";position:absolute;left:-.06em;right:-.06em;top:.18em;bottom:.02em;background:var(--canary);border-radius:.08em .18em .12em .2em;z-index:-1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--ink);color:#FFFFFF;font:500 16px/1 'Roobert','Space Grotesk',sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--ink-hover);color:#FFFFFF}
.btn[disabled]{opacity:.6;cursor:progress}
.btn-canary{background:linear-gradient(180deg,#FBFFA6 0%,#F7FE72 48%,#EBF25A 100%);color:var(--ink);box-shadow:inset 0 0 0 1.5px #C2C93A,inset 0 2px 1px rgba(255,255,255,.75),inset 0 -3px 2px rgba(110,116,0,.22),0 1px 1px rgba(0,23,31,.10),0 6px 14px -6px rgba(0,23,31,.30)}.btn-canary:hover{background:linear-gradient(180deg,#FDFFC2 0%,#F9FE8A 48%,#EEF466 100%);color:var(--ink)}.btn-canary:active{background:linear-gradient(180deg,#EBF25A 0%,#F7FE72 100%);box-shadow:inset 0 0 0 1.5px #C2C93A,inset 0 2px 3px rgba(110,116,0,.30)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq details:first-of-type{border-top:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:22px 0;font:500 20px/1.3 'Roobert','Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;font:400 24px/1 'Space Mono',monospace;color:var(--grey)}
.faq details[open] summary::after{content:"–"}
.faq .ans{margin:0 0 28px;max-width:720px;color:var(--body)}
.faq .ans p{margin:0 0 12px}.faq .ans p:last-child{margin-bottom:0}
.faq .ans ol,.faq .ans ul{margin:0 0 12px;padding-left:22px}.faq .ans li{margin-bottom:8px}
.foot a{color:var(--body);text-decoration:none}.foot a:hover{color:var(--ink);text-decoration:underline}
.todo{font:400 13px/1.4 'Space Mono',monospace;background:#FFF1C2;color:#5A4500;padding:1px 6px;border-radius:4px;white-space:normal}

/* Nav */
.nav{position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(0,23,31,.08);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.nav .wrap{height:72px;display:flex;align-items:center;gap:24px}
.nav img{display:block;height:24px;width:auto}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;font-size:16px;text-decoration:none}
.nav nav a:hover{background:#F2F3EE;color:var(--ink)}
.nav .opt{display:none}
@media (min-width:768px){.nav .wrap{height:88px}.nav img{height:28px}.nav .opt{display:inline-flex}}

/* Hero */
.hero{position:relative;overflow:hidden;padding:56px 0 64px;background:linear-gradient(180deg,#FFFFFF 40%,#CAD2C5 135%)}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 85% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 85% 30%,#000 20%,transparent 75%)}
.hero .wrap{position:relative;display:grid;gap:40px}
.app{display:flex;align-items:center;gap:20px}
.icon{flex-shrink:0;width:80px;height:80px;border-radius:18px;box-shadow:0 1px 0 var(--line),0 16px 32px -18px rgba(0,23,31,.45)}
h1{margin:20px 0 16px;font:500 48px/1.02 'Roobert','Space Grotesk',sans-serif;letter-spacing:-.035em}
.email-card{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:24px;background:#FFFFFF;box-shadow:0 1px 0 var(--line),0 24px 48px -28px rgba(0,23,31,.28);border:1px solid var(--line)}
.email-card h2{margin:0;font:500 22px/1.2 'Roobert','Space Grotesk',sans-serif;letter-spacing:-.01em}
.email-card p{margin:0;color:var(--body)}
.email-card .btn{align-self:stretch;font-size:17px}
/* Copy button: flat canary, no rim or shading (8 Oct, Felicitas) */.email-card .btn-canary{background:#F7FE72;box-shadow:none}.email-card .btn-canary:hover{background:#EEF566;box-shadow:none}.email-card .btn-canary:active{background:#E6ED5A;box-shadow:none}
.email-card .alt{font-size:15px}
.addr{margin:0;font:500 22px/1.2 'Roobert','Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--ink);-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.copy-inline{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:copy}
.copy-inline::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.3em;vertical-align:-.08em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='6' y='6' width='9' height='9' rx='2'/%3E%3Cpath d='M12 3.5H5A1.5 1.5 0 0 0 3.5 5v7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='6' y='6' width='9' height='9' rx='2'/%3E%3Cpath d='M12 3.5H5A1.5 1.5 0 0 0 3.5 5v7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.toast{position:fixed;left:50%;bottom:24px;z-index:30;transform:translate(-50%,16px);max-width:calc(100% - 32px);padding:14px 22px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:16px;box-shadow:0 12px 32px -12px rgba(0,23,31,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
@media (min-width:768px){h1{font-size:64px}.hero{padding:80px 0 88px}.icon{width:96px;height:96px;border-radius:22px}}
@media (min-width:1024px){.hero .wrap{grid-template-columns:minmax(0,1fr) 420px;align-items:center;gap:64px}h1{font-size:72px}}


/* Sections */
section.block{padding:72px 0}
section.block + section.block{border-top:1px solid var(--line)}
.block h2{margin:24px 0 16px;font:500 36px/1.08 'Roobert','Space Grotesk',sans-serif;letter-spacing:-.03em}
.block .intro{margin:0 0 32px;max-width:640px;color:var(--body)}
@media (min-width:768px){section.block{padding:96px 0}.block h2{font-size:44px}}

/* Contact form */
.contact{display:grid;gap:40px}
@media (min-width:1024px){.contact{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:56px;align-items:start}}
.tips{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.tips li{position:relative;padding-left:26px;color:var(--body)}
.tips li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--ink)}
.tips b{font-weight:500;color:var(--ink)}
/* Form box: two stops from the brand Ash gradient (Gradient 02, #FAFAFA to Ash #CAD2C5), 8 Oct */.support-form{display:grid;gap:22px;padding:28px;border-radius:24px;background:#EEF0ED;border:1px solid var(--ash)}
@media (min-width:768px){.support-form{padding:36px;grid-template-columns:1fr 1fr}.full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:8px}
.support-form label{font:500 16px/1.2 'Roobert','Space Grotesk',sans-serif}
.req{margin-left:2px;color:var(--body)}
.req-note{margin:0;font-size:14px;color:var(--grey)}
.support-form :is(input,select,textarea){width:100%;min-height:52px;padding:12px 16px;border:1.5px solid #8A8F87;border-radius:12px;background:#FFFFFF;color:var(--ink);font:400 17px/1.4 'Space Grotesk',system-ui,sans-serif}
.support-form textarea{min-height:168px;resize:vertical}
.support-form select{appearance:none;-webkit-appearance:none;padding-right:44px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2300171F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/14px 9px no-repeat}
.support-form :is(input,select,textarea):focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--canary);border-radius:12px}
[aria-invalid="true"]{border-color:var(--error)}
.err{margin:0;font-size:14px;font-weight:500;color:var(--error)}
.err:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.actions .btn{min-width:200px}
@media (max-width:767px){.actions .btn{width:100%}}
.status{display:none;padding:20px 22px;border-radius:16px;font-size:16px}
.status.show{display:block}
.status h3{margin:0 0 6px;font:500 18px/1.25 'Roobert','Space Grotesk',sans-serif}
.status p{margin:0}
.status.ok{background:#E8F3EC;border:1px solid #9CCBAD;color:var(--ok)}
.status.ok h3{color:var(--ok)}
.status.fail{background:#FBEAE9;border:1px solid #E3A5A1;color:#7A1A14}
.status.fail h3{color:var(--error)}
.status.fail a{color:#7A1A14;font-weight:500}

/* Legal */
.legal{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:768px){.legal{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.legal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.legal a{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:20px 22px;border-radius:16px;border:1px solid var(--line-strong);text-decoration:none}
.legal a:hover{border-color:var(--ink);color:var(--ink)}
.legal b{font:500 18px/1.2 'Roobert','Space Grotesk',sans-serif}
.legal span{font-size:14px;color:var(--grey)}

/* Footer */
footer.foot{padding:64px 0 40px;border-top:1px solid var(--line)}
.foot .cols{display:grid;gap:36px}
@media (min-width:768px){.foot .cols{grid-template-columns:1.6fr repeat(2,minmax(0,1fr));gap:40px}}
.foot .col{display:flex;flex-direction:column;gap:4px;font-size:14px}
.foot .col a{display:inline-flex;align-items:center;min-height:36px}
.foot .head{font-weight:500;color:var(--ink);margin-bottom:4px}
.foot .bottom{display:flex;align-items:center;gap:24px;margin-top:48px;padding-top:20px;border-top:1px solid rgba(17,17,17,.4);font:400 12px/1.1 'Space Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:rgba(17,17,17,.8)}
.foot .bottom a{margin-left:auto;color:rgba(17,17,17,.8)}

/* Footer analytics settings sits with the footer links. */
.foot .col [data-analytics-settings]:not([hidden]){display:inline-flex;align-items:center;min-height:36px;color:var(--body)}

/* Optional analytics controls: same as landing.css, which this page doesn't load. */
.analytics-banner[hidden], [data-analytics-settings][hidden] { display: none; }
.analytics-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.analytics-actions button {
  flex: 1; padding: 14px 20px; min-height: 48px; border: 1px solid #00171f;
  border-radius: 999px; background: #fff; color: #00171f;
  font: 500 16px/1.3 'Roobert','Space Grotesk',sans-serif; cursor: pointer;
}
.analytics-actions button:hover { background: #fbfec0; }
.analytics-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  max-height: 100dvh; padding: 14px 20px calc(20px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #00171f24; box-shadow: 0 -8px 24px #00171f1f;
  color: #00171f; font-size: 13px; line-height: 1.45;
}
.analytics-banner > p { margin: 0; min-height: 0; overflow-y: auto; color: #2b3a40; }
.analytics-banner > p a { color: #00171f; }
.analytics-banner > .analytics-actions { flex-shrink: 0; flex-wrap: nowrap; align-items: center; gap: 8px; }
.analytics-banner [data-consent-decline] {
  flex: none; min-height: 44px; padding: 0 12px 0 0; border: 0; background: none;
  font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.analytics-banner [data-consent-decline]:hover { background: none; color: #454545; }
.analytics-banner [data-consent-accept] { border-color: #00171f; background: #00171f; color: #fff; }
.analytics-banner [data-consent-accept]:hover { background: #12313c; }
/* Wider screens keep the notice and choices on one row. */
@media (min-width: 768px) {
  .analytics-banner { flex-direction: row; align-items: center; gap: 24px; padding: 14px max(32px, calc((100% - 1200px) / 2)) calc(14px + env(safe-area-inset-bottom)); font-size: 14px; }
  .analytics-banner > p { flex: 1; max-height: calc(100dvh - 28px); }
  .analytics-banner [data-consent-decline] { padding: 0 12px; }
  .analytics-banner [data-consent-accept] { flex: none; padding: 14px 24px; }
}
[data-analytics-settings] {
  padding: 0; border: 0; background: none; color: inherit; text-align: left;
  font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
[data-analytics-settings]:hover { text-decoration: underline; }
.analytics-dialog {
  box-sizing: border-box; max-width: 560px; width: calc(100% - 40px);
  max-height: calc(100% - 40px); padding: 28px; border: 1px solid #00171f;
  border-radius: 16px; color: #00171f; background: #fff; line-height: 1.5;
}
.analytics-dialog::backdrop { background: #00171f80; }
.analytics-dialog h2 { margin-top: 0; font-size: 24px; }
.analytics-toggle { display: flex; align-items: center; gap: 10px; }
.analytics-toggle input { width: 20px; height: 20px; accent-color: #00171f; }