/* Doors · landing page. Generated from landing-options/d2-paper-coral.html: every name is scoped under .dl. */
.dl {
  --dl-ink:#0D0D0D; --dl-navy:#17335E; --dl-paper:#F2F2EF; --dl-white:#FFFFFF; --dl-door:#5FB0FF; --dl-door-deep:#2F6FED; --dl-door-ink:#06192E;
  --dl-in:#FFC93C; --dl-in-deep:#E0A800; --dl-soft:#DCEBFA; --dl-dust:#6B6B66; --dl-text:#1B2433;
  --dl-display:'Comfortaa',ui-rounded,system-ui,sans-serif; --dl-body:'Work Sans',-apple-system,system-ui,sans-serif; --dl-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
.dl * {box-sizing:border-box;margin:0;padding:0}
.dl {background:var(--dl-door);color:var(--dl-white);font-family:var(--dl-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.dl a {color:inherit;text-decoration:none}
.dl .dl-wrap {width:min(1120px,100% - 40px);margin-inline:auto}
.dl .dl-mono {font-family:var(--dl-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.dl .dl-btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .2s ease,background .2s,box-shadow .2s;border:0;cursor:pointer}
.dl .dl-btn:hover {transform:translateY(-1px)}
.dl .dl-btn.dl-in {background:var(--dl-in);color:var(--dl-ink);box-shadow:0 8px 24px -8px rgba(255,201,60,.6)}
.dl .dl-btn.dl-in:hover {background:#FFD35C}
.dl .dl-btn.dl-glass {background:rgba(255,255,255,.14);color:var(--dl-white);border:1px solid rgba(255,255,255,.35)}
.dl .dl-btn.dl-glass:hover {background:rgba(255,255,255,.22)}
.dl .dl-btn.dl-lg {min-height:58px;padding:0 32px;font-size:17px}
.dl /* top */
.dl-nav {display:flex;align-items:center;gap:16px;height:72px}
.dl .dl-logo {display:flex;align-items:center;gap:10px;font-family:var(--dl-display);font-weight:700;font-size:24px;letter-spacing:-.01em}
.dl .dl-nav nav {margin-left:auto;display:flex;gap:6px}
.dl .dl-nav nav a {padding:10px 14px;border-radius:12px;font-weight:600;font-size:15px;opacity:.92}
.dl .dl-nav nav a:hover {background:rgba(255,255,255,.14);opacity:1}
.dl .dl-nav .dl-btn {min-height:42px;padding:0 20px;font-size:15px}
@media(max-width:760px) {
  .dl .dl-nav nav {display:none}
}
.dl /* hero */
.dl-hero {padding:clamp(28px,5vw,60px) 0 clamp(70px,9vw,110px);position:relative;overflow:hidden}
.dl .dl-hero-grid {display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.dl .dl-hero h1 {font-family:var(--dl-display);font-weight:700;font-size:clamp(44px,6.6vw,84px);line-height:1;letter-spacing:-.03em}
.dl .dl-hero h1 span {color:var(--dl-in)}
.dl .dl-lede {margin-top:22px;font-size:clamp(18px,1.9vw,21px);max-width:30em;color:#3A4658}
.dl .dl-ctas {display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.dl .dl-fine {margin-top:18px;font-size:15px;color:#3A4658}
.dl .dl-pill-tag {display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:600;margin-bottom:26px}
.dl .dl-pill-tag i {width:8px;height:8px;border-radius:50%;background:var(--dl-in);box-shadow:0 0 0 4px rgba(255,201,60,.25)}
.dl /* doorway art: a door standing open, .dl light spilling out */
.dl-doorway {position:relative;justify-self:center;width:min(360px,80vw);aspect-ratio:3/4}
.dl .dl-doorway svg {width:100%;height:100%;overflow:visible}
.dl .dl-light {animation:dl-glow 5s ease-in-out infinite}
@keyframes dl-glow {50%{opacity:.78}}
.dl .dl-leaf {transform-origin:100px 0;animation:dl-open 6s ease-in-out infinite alternate}
@keyframes dl-open {from{transform:scaleX(.9)}to{transform:scaleX(1)}}
.dl .dl-tag {position:absolute;right:-6px;bottom:14%;background:var(--dl-white);color:var(--dl-text);border-radius:18px;padding:14px 18px;box-shadow:0 18px 40px -16px rgba(6,25,46,.55);font-size:15px;min-width:200px}
.dl .dl-tag .dl-mono {color:#5A6676;font-size:11px}
.dl .dl-tag strong {display:block;font-family:var(--dl-display);font-size:20px;color:var(--dl-door-ink);margin-top:4px}
.dl .dl-tag b {color:#1F9D55;font-weight:700}
.dl /* sections */
section.dl-s {padding:clamp(64px,9vw,110px) 0}
.dl .kick {font-family:var(--dl-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#3A4658}
.dl h2 {font-family:var(--dl-display);font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:1.06;letter-spacing:-.025em;margin-top:14px}
.dl .dl-sub {margin-top:14px;color:#3A4658;font-size:18px;max-width:34em}
.dl .dl-steps {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.dl .dl-step {background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:24px;backdrop-filter:blur(6px)}
.dl .dl-step .dl-n {display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--dl-white);color:var(--dl-door-deep);font-family:var(--dl-display);font-weight:700;font-size:18px;margin-bottom:18px}
.dl .dl-step h3 {font-family:var(--dl-display);font-weight:700;font-size:20px;margin-bottom:8px}
.dl .dl-step p {font-size:15px;color:#3A4658}
@media(max-width:900px) {
  .dl .dl-steps {grid-template-columns:1fr 1fr}
}
@media(max-width:560px) {
  .dl .dl-steps {grid-template-columns:1fr}
}
.dl /* live door */
.dl-panel {background:var(--dl-white);color:var(--dl-text);border-radius:32px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;box-shadow:0 30px 80px -30px rgba(6,25,46,.5)}
.dl .dl-panel h2 {color:var(--dl-door-ink)}
.dl .dl-panel .dl-sub {color:#4A5566}
.dl .dl-panel .kick {color:var(--dl-door-deep)}
.dl .dl-door-card {background:#F4F8FD;border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:10px;border:1px solid #E1EAF5}
.dl .dl-door-top {display:flex;justify-content:space-between;align-items:center;font-family:var(--dl-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5A6676;padding:2px 4px 8px}
.dl .dl-count {font-family:var(--dl-display);font-weight:700;color:var(--dl-door-deep)}
.dl .dl-person {display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--dl-white);border-radius:16px;padding:12px 12px 12px 16px;border:1px solid #E1EAF5;transition:background .3s,border-color .3s}
.dl .dl-person strong {display:block;font-size:16px;color:var(--dl-door-ink)}
.dl .dl-person small {color:#5A6676;font-size:13px}
.dl .dl-person button {min-width:112px;min-height:42px;border-radius:999px;border:0;font-weight:700;font-size:15px;background:var(--dl-door-deep);color:var(--dl-white);cursor:pointer;transition:background .3s,color .3s}
.dl .dl-person button:hover {background:#2560DB}
.dl .dl-person.dl-done {background:#EFFAE0;border-color:#CFEFA2}
.dl .dl-person.dl-done button {background:var(--dl-in);color:var(--dl-ink)}
.dl .dl-hint {margin-top:10px;font-size:14px;color:#4A5566;min-height:20px}
@media(max-width:860px) {
  .dl .dl-panel {grid-template-columns:1fr}
}
.dl /* cards */
.dl-feats {display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.dl .dl-feat {background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:26px}
.dl .dl-feat .dl-ic {width:44px;height:44px;border-radius:14px;background:var(--dl-white);display:grid;place-items:center;color:var(--dl-door-deep);margin-bottom:20px}
.dl .dl-feat .dl-ic svg {width:22px;height:22px}
.dl .dl-feat h3 {font-family:var(--dl-display);font-weight:700;font-size:20px;margin-bottom:8px}
.dl .dl-feat p {font-size:15px;color:#3A4658}
@media(max-width:900px) {
  .dl .dl-feats {grid-template-columns:1fr 1fr}
}
@media(max-width:560px) {
  .dl .dl-feats {grid-template-columns:1fr}
}
.dl /* price */
.dl-price {background:var(--dl-door-ink);border-radius:32px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.dl .dl-amount {font-family:var(--dl-display);font-weight:700;font-size:clamp(70px,10vw,116px);letter-spacing:-.05em;line-height:.9;color:var(--dl-in)}
.dl .dl-amount small {font-size:.26em;color:#3A4658;letter-spacing:0;margin-left:8px}
.dl .dl-checks {list-style:none;display:grid;gap:14px}
.dl .dl-checks li {display:flex;gap:12px;align-items:flex-start;font-size:17px}
.dl .dl-checks li::before {content:"";flex:0 0 22px;height:22px;margin-top:3px;border-radius:50%;background:var(--dl-in) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23172000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:860px) {
  .dl .dl-price {grid-template-columns:1fr}
}
.dl .dl-close {text-align:center;padding:clamp(70px,10vw,120px) 0}
.dl .dl-close h2 {font-size:clamp(44px,7vw,88px);letter-spacing:-.035em}
.dl .dl-close .dl-ctas {justify-content:center}
.dl footer {padding:28px 0 40px;font-size:14px;color:#3A4658}
.dl footer .dl-wrap {display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dl footer nav {display:flex;gap:20px}
@media(max-width:860px) {
  .dl .dl-hero-grid {grid-template-columns:1fr}
  .dl .dl-doorway {order:-1;width:min(260px,70vw)}
}
@media(prefers-reduced-motion:reduce) {
  .dl * {animation:none!important;transition:none!important}
}
.dl {background:#F4F6FA;color:#0D0D0D}
.dl .dl-hero {background:#2F6FED;color:#fff;border-radius:0 0 44px 44px}
.dl .dl-hero h1 span {color:#FFD35C}
.dl .dl-hero .dl-lede {color:rgba(255,255,255,.94)}
.dl .dl-hero .dl-fine {color:rgba(255,255,255,.88)}
.dl .dl-hero .dl-pill-tag {background:rgba(255,255,255,.16)}
.dl .dl-hero .dl-btn.dl-glass {color:#fff}
.dl .kick {color:#2F6FED}
.dl .dl-step {background:#fff;border:1px solid #E1E8F2}
.dl .dl-step .dl-n {background:#2F6FED;color:#fff}
.dl .dl-step p {color:#4A5566}
.dl .dl-feat {background:#2F6FED;border:1px solid #2F6FED;color:#fff}
.dl .dl-feat .dl-ic {background:#fff;color:#2F6FED}
.dl .dl-feat p {color:rgba(255,255,255,.92)}
.dl .dl-btn.dl-in {color:#0D0D0D}
.dl .dl-close .dl-btn.dl-glass {background:#fff;color:#0D0D0D;border:1px solid #D5DEEA}
.dl .dl-price {background:#0D1B2E;color:#fff}
.dl .dl-price .dl-sub {color:rgba(255,255,255,.85)}
.dl .dl-price .kick {color:#8FC2FF}
.dl footer {color:#5A6676;border-top:1px solid #E1E8F2}
.dl /* scroll reveal + small motion, .dl the page is readable without it */
.dl-rv {opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.dl .dl-rv.dl-on {opacity:1;transform:none}
.dl .dl-hero h1 {animation:dl-fadeup .9s cubic-bezier(.2,.7,.2,1) both}
.dl .dl-hero .dl-lede, .dl .dl-hero .dl-ctas, .dl .dl-hero .dl-fine {animation:dl-fadeup .9s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes dl-fadeup {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dl .dl-btn {transition:transform .2s ease,background .2s,box-shadow .2s}
.dl .dl-step, .dl .dl-feat {transition:transform .3s ease,box-shadow .3s ease}
.dl .dl-step:hover, .dl .dl-feat:hover {transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(6,25,46,.35)}
.dl .dl-faq {margin-top:44px;display:grid;gap:12px;max-width:860px}
.dl .dl-faq details {background:#fff;border:1px solid #E1E8F2;border-radius:20px;padding:0 22px}
.dl .dl-faq summary {cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--dl-display);font-weight:700;font-size:18px;position:relative;color:#0D0D0D}
.dl .dl-faq summary::-webkit-details-marker {display:none}
.dl .dl-faq summary::after {content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:26px;color:#2F6FED;transition:transform .2s}
.dl .dl-faq details[open] summary::after {transform:translateY(-50%) rotate(45deg)}
.dl .dl-faq details p {color:#4A5566;padding:0 0 22px;font-size:16px;max-width:60ch}
@media(prefers-reduced-motion:reduce) {
  .dl .dl-rv, .dl .dl-hero h1, .dl .dl-hero .dl-lede, .dl .dl-hero .dl-ctas, .dl .dl-hero .dl-fine {animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}
.dl{min-height:100vh}

/* the app lowercases headings; the landing keeps the sentence case of the approved design */
.dl h1, .dl h2, .dl h3 { text-transform: none; }

/* ------------------------------------------------ public site pages (2026-10-15) */
/* logo: blue door and dark word on the light header */
.dl .dl-logo { color: #0D0D0D; }
.dl .dl-nav nav a:hover { background: rgba(13, 13, 13, .05); }
.dl .dl-nav nav a[aria-current="page"] { color: #2F6FED; background: #E7EEFC; opacity: 1; }

/* phone menu */
.dl .dl-menu-btn { display: none; width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid #D5DEEA; background: #fff; color: #0D0D0D; align-items: center; justify-content: center; cursor: pointer; }
.dl .dl-menu-btn svg { width: 22px; height: 22px; }
.dl .dl-menu { display: none; }
@media (max-width: 760px) {
  .dl .dl-menu-btn { display: inline-flex; }
  .dl .dl-nav .dl-btn { margin-left: auto; }
  .dl .dl-menu:not([hidden]) { display: grid; gap: 6px; padding: 4px 0 16px; }
  .dl .dl-menu a { padding: 14px 16px; border-radius: 14px; font-weight: 600; font-size: 17px; background: #fff; border: 1px solid #E1E8F2; }
  .dl .dl-menu a[aria-current="page"] { color: #2F6FED; border-color: #BBD0F5; }
}
@media (max-width: 380px) { .dl .dl-nav .dl-btn { padding: 0 14px; font-size: 14px; } .dl .dl-logo { font-size: 21px; } }

/* hero card on the doorway */
.dl .dl-tag-of { font-size: 14px; color: #5A6676; font-family: var(--dl-body); font-weight: 500; }
.dl .dl-tag-row { font-size: 14px; color: #5A6676; }

/* page header of the inner pages */
.dl .dl-page-hero { padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 7vw, 92px); }
.dl .dl-page-hero h1 { font-size: clamp(40px, 6vw, 76px); }
.dl .dl-page-hero .dl-lede { max-width: 36em; }

/* "see more" links from the home page */
.dl .dl-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; font-size: 16px; color: #2F6FED; }
.dl .dl-more::after { content: "→"; transition: transform .2s ease; }
.dl .dl-more:hover::after { transform: translateX(4px); }
.dl .dl-price .dl-more { color: #FFD35C; display: flex; width: max-content; }

/* how it works: the four steps in detail, and who sees what */
.dl .dl-details { display: grid; gap: 16px; }
.dl .dl-detail { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; background: #fff; border: 1px solid #E1E8F2; border-radius: 28px; padding: clamp(22px, 3vw, 36px); }
.dl .dl-num { width: 56px; height: 56px; border-radius: 18px; background: #2F6FED; color: #fff; display: grid; place-items: center; font-family: var(--dl-display); font-weight: 700; font-size: 22px; }
.dl .dl-detail h3 { font-family: var(--dl-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); color: #0D0D0D; }
.dl .dl-detail p { color: #3A4658; font-size: 17px; margin-top: 8px; max-width: 60ch; }
.dl .dl-detail ul { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.dl .dl-detail li { display: flex; gap: 12px; color: #3A4658; font-size: 16px; }
.dl .dl-detail li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: #FFC93C; }
.dl .dl-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.dl .dl-role { background: #fff; border: 1px solid #E1E8F2; border-radius: 24px; padding: 24px; }
.dl .dl-role h3 { font-family: var(--dl-display); font-weight: 700; font-size: 20px; color: #0D0D0D; margin-bottom: 8px; }
.dl .dl-role p { color: #4A5566; font-size: 15px; }
@media (max-width: 900px) { .dl .dl-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dl .dl-detail { grid-template-columns: 1fr; gap: 14px; } .dl .dl-roles { grid-template-columns: 1fr; } }

/* features: grouped */
.dl .dl-group + .dl-group { margin-top: clamp(64px, 8vw, 100px); }
.dl .dl-group .dl-feats { margin-top: 28px; }

/* pricing: what you never pay for */
.dl .dl-zero { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dl .dl-zero span { padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid #E1E8F2; font-weight: 600; color: #0D0D0D; }
.dl .dl-zero span::before { content: "€0 "; color: #2F6FED; font-weight: 700; }

/* faq: grouped */
.dl .dl-faq-group + .dl-faq-group { margin-top: clamp(48px, 6vw, 72px); }
.dl .dl-faq-group h2 { font-size: clamp(26px, 3vw, 36px); }
.dl .dl-faq-group .dl-faq { margin-top: 20px; }

/* footer links wrap on a phone */
.dl footer nav { flex-wrap: wrap; gap: 10px 20px; }

/* "a month" next to the price sits on the navy card: keep it light */
.dl .dl-price .dl-amount small { color: rgba(255, 255, 255, .78); }