/* Hotelinsider. Eigen tokens en klassen bovenop hv.css (het design-systeem van hotelvideos.com,
   letterlijk overgenomen en hier niet bewerkt). Licht en rustig zoals hotelvideos; het accent is
   diepgroen #12372F, de kleur die hotelvideos reserveerde voor "Member deal on Hotelinsiders".
   Donker register (matzwart, wit, een hairline, één dunne groene lijn) alleen voor het
   lidmaatschap zelf: de ledenkaart, de founding-sectie en het welkomstscherm. */
:root{
  /* Accent: alleen als tekst op wit (12,9:1), als lijn, als zegel en als knopkleur.
     Op --soft haalt klein groen geen AA, dus daar geen groene tekst. */
  --hi-green:#12372F;
  /* Lichter groen voor tekst en lijn op matzwart (8,1:1 op #141416). */
  --hi-green-light:#7FB89E;
  /* Donker register */
  --hi-black-1:#141416;
  --hi-black-2:#0B0B0C;
  --hi-kaart-vlak:#1C1C1F;       /* de kaart, iets lichter dan het paneel */
  --hi-d-text:#F5F5F7;
  --hi-d-muted:#A1A1A6;          /* 7,6:1 op #0B0B0C */
  --hi-d-hair:rgba(255,255,255,.12);
  --hi-hdr-h:68px;
}

/* Focus: groen op licht, wit op beeld en op donker. */
.hi :focus-visible{outline-color:var(--hi-green)}
:is(.hi-hero,.hi-hdr-over,.hi-donker) :focus-visible{outline-color:var(--white)}
.hi .input::placeholder{color:var(--muted);opacity:1}

/* Proefstukbalk (fase 1, verdwijnt in fase 2) */
.hi-proef{margin:0;padding:var(--s-3) var(--gutter);background:var(--soft);color:var(--muted);font-size:var(--t-meta);line-height:1.4;text-align:center;text-wrap:balance}

/* Header: wit buiten de hero, transparant over de hero. */
.hi-stage{position:relative}
.hi-hdr .hdr-in{min-height:var(--hi-hdr-h)}
.hi-hdr-over{position:absolute;left:0;right:0;top:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;color:var(--white)}
.hi-logo{display:inline-flex;align-items:center;gap:7px;min-height:var(--ctl-s);font-size:21px;font-weight:600;letter-spacing:-.022em;line-height:1}
.hi-hdr-link{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--ctl-s);padding:0 var(--s-1);font-size:var(--t-small);font-weight:500}
.hi-hdr:not(.hi-hdr-over) .hi-hdr-link:hover{color:var(--hi-green)}
.hi-hdr-over .hi-hdr-link:hover{opacity:.8}
@media (max-width:600px){.hi-hdr-link{display:none}}

/* Zegel: groene cirkel met een witte stip. Op beeld omgekeerd (wit met een groene stip),
   op matzwart groen met een lichtgroene rand. */
.hi-zegel{display:block;flex:none;width:11px;height:11px}
.hi-zegel-vlak{fill:var(--hi-green)}
.hi-zegel-stip{fill:var(--white)}
.hi-hdr-over .hi-zegel-vlak{fill:var(--white)}
.hi-hdr-over .hi-zegel-stip{fill:var(--hi-green)}
.hi-donker .hi-zegel-vlak{stroke:var(--hi-green-light);stroke-width:1.5}
.hi-donker .hi-zegel-stip{fill:var(--hi-d-text)}

/* Hero: full-bleed poster, witte typografie op een zachte donkere gradient. */
.hi-hero{position:relative;display:flex;align-items:flex-end;min-height:100svh;overflow:hidden;background:var(--ink);color:var(--white)}
.hi .hi-hero-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%}
/* Zachte gradient: boven voor de header, onderaan voor de tekst, en links iets dieper waar de tekst
   staat, zodat het hotel rechts helder blijft. */
.hi-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.2) 42%,rgba(0,0,0,0) 62%),linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 32%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.7) 100%)}
.hi-hero-in{position:relative;z-index:1;flex:1 1 auto;padding-top:calc(var(--hi-hdr-h) + var(--s-7));padding-bottom:clamp(40px,5vw,72px)}
.hi-hero-tekst{max-width:760px}
.hi-hero-kop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.hi-status{display:inline-flex;align-items:center;padding:var(--s-2) var(--s-4);background:var(--glass-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hi-hero .h1{max-width:14em;margin-top:var(--s-4);text-shadow:0 1px 24px rgba(0,0,0,.18)}
.hi-hero .h1 em{color:inherit;opacity:.8}
.hi-hero .lead{max-width:34em;color:var(--soft)}
.hi-micro{margin-top:var(--s-3);max-width:34em;font-size:var(--t-small);line-height:1.45;color:var(--white)}

/* Wachtlijstformulier: één witte pil met het veld erin en de groene knop 4 px ingezet rechts, zodat
   het groen op wit staat (zoals hv "Member deal" bedoelt) en niet op de foto. Op een telefoon een wit
   vlak met het veld boven en de knop eronder, beide 50 px. De focusring ligt om de hele pil. */
.hi-form{display:flex;align-items:center;gap:var(--s-1);max-width:580px;margin-top:var(--s-6);padding:var(--s-1);background:var(--white);border-radius:var(--r-pill);box-shadow:var(--shadow-ctl)}
.hi-form .input{flex:1 1 auto;min-width:0;min-height:var(--ctl);padding:0 var(--s-4) 0 20px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);caret-color:var(--ink)}
.hi-form .input:focus{border-color:transparent;box-shadow:none}
.hi-form:has(.input:focus-visible){outline:2px solid var(--white);outline-offset:3px}
.hi-form .btn{flex:none}
.hi .hi-form .btn:focus-visible{outline-color:var(--hi-green);outline-offset:2px}
@media (max-width:560px){
  .hi-form{flex-direction:column;align-items:stretch;border-radius:var(--r-card)}
  .hi-form .input{flex:none;padding-left:var(--s-4)}
  .hi-form .btn{width:100%}
}
@media (max-width:700px){
  /* Op een telefoon de gevel van het paleis boven de tekst; de scrim loopt pas op in de tekstzone.
     De hero vult het scherm (100svh), anders is er boven de tekst geen ruimte voor de gevel. */
  .hi-hero{min-height:100svh}
  /* Het beeld steekt 56 px boven de hero uit (afgeknipt): minder lucht, de gevel komt hoger. */
  .hi .hi-hero-img{inset:auto 0 0 0;height:calc(100% + 56px);object-position:62% 50%}
  .hi-hero-scrim{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 28%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.74) 70%,rgba(0,0,0,.82) 100%)}
  .hi-hero-in{padding-top:calc(var(--hi-hdr-h) + var(--s-6))}
}

/* Hoe het werkt: de stappen links als lijst met hairlines (de ol draagt de volgorde), rechts één
   echte hotelkaart zoals op hotelvideos.com; op een telefoon de kaart onder de stappen. */
.hi-werkt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--s-7) clamp(40px,7vw,120px);align-items:start}
.hi-stappen{margin:var(--gap-block) 0 0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.hi-stap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-2) var(--s-5);padding-block:var(--s-5);border-top:1px solid var(--line)}
.hi-stap p{max-width:30em;color:var(--muted);text-wrap:pretty}
.hi .hi-stap .h3+p{margin-top:0}
.hi-werkt-kaart{margin:0}
.hi-werkt-noot{margin-top:var(--s-4);font-size:var(--t-meta);color:var(--muted)}
/* De kaart is één link: de naam spant over de hele kaart, ook over de afspeelknop (zoals
   card-video.css op hotelvideos.com). Hover en focus in het groen van Hotelinsider. */
.hi .card{position:relative}
.hi .card-link{display:block}
.hi .card-link::after{content:"";position:absolute;inset:0;z-index:1}
.hi .card-media>img{object-position:40% 50%}
.hi .card-play>svg{margin-left:2px}
.hi .card-link:focus-visible{outline:0}
.hi .card-link:focus-visible::after{outline:2px solid var(--hi-green);outline-offset:4px;border-radius:var(--r-card)}
.hi .card.is-hover .card-name{color:var(--hi-green)}
@media (hover:hover){.hi .card:hover .card-name{color:var(--hi-green)}}
@media (max-width:1100px){.hi-stap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .hi-werkt{grid-template-columns:minmax(0,1fr)}
  .hi-werkt-kaart{max-width:420px}
}

/* Donker register */
.hi-donker{overflow:hidden;background:linear-gradient(160deg,var(--hi-black-1) 0%,var(--hi-black-2) 100%);color:var(--hi-d-text);border:1px solid var(--hi-d-hair);border-radius:var(--r-panel)}
.hi-donker .lead{color:var(--hi-d-muted)}
.hi-donker em{color:var(--hi-d-muted)}
.hi-donker .ph{border-color:rgba(255,255,255,.28);color:var(--hi-d-muted)}

/* Het lidmaatschap: tekst links, de ledenkaart rechts; op een telefoon de kaart boven. */
.hi-lid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:center;gap:clamp(32px,5vw,96px);padding:clamp(28px,6vw,96px)}
.hi-lid .h2{max-width:12em}
.hi-lid .lead{max-width:30em}
.hi-noot{margin-top:var(--s-4);font-size:var(--t-small);color:var(--muted)}
@media (max-width:860px){
  .hi-lid{grid-template-columns:minmax(0,1fr)}
  .hi-lid-kaart{order:-1;max-width:460px}
}

/* Ledenkaart: verhouding van een betaalkaart, een effen matzwart vlak dat zichtbaar boven het paneel
   ligt (iets lichter dan het paneel, randlicht bovenaan, hairline rondom, schaduw eronder) en één
   effen groene lijn van 1 px boven voorbeeld en jaartal. Het nummer is het grootste element. */
.hi-kaart{position:relative;container-type:inline-size;width:100%;aspect-ratio:1.586;border-radius:var(--r-media);overflow:hidden;color:var(--hi-d-text);background:var(--hi-kaart-vlak);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px var(--hi-d-hair),0 24px 48px rgba(0,0,0,.5)}
.hi-kaart-in{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(var(--s-4),7cqi,30px)}
.hi-kaart-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.hi-kaart-merk{font-size:clamp(13px,3.6cqi,16px);font-weight:600;letter-spacing:-.02em}
.hi-kaart .hi-zegel{width:clamp(14px,4.4cqi,20px);height:clamp(14px,4.4cqi,20px)}
.hi-kaart-lid{align-self:end;display:grid;gap:var(--s-1);margin:0;padding-bottom:clamp(12px,4cqi,16px)}
.hi-kaart-soort{font-size:var(--t-small);font-weight:500;color:var(--hi-d-muted)}
.hi-kaart-nr{font-size:var(--t-h3);font-weight:600;line-height:1.1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.hi-kaart-voet{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding-top:clamp(12px,4cqi,16px);border-top:1px solid var(--hi-green-light)}
.hi-kaart-vb,.hi-kaart-sinds{font-size:var(--t-meta);font-weight:500;letter-spacing:0;color:var(--hi-d-muted)}

/* Veelgestelde vragen: native details, hairlines ertussen, chevron via CSS. */
.hi-faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap-block) clamp(32px,5vw,96px);align-items:start}
.hi-faq{border-top:1px solid var(--line)}
.hi-faq details{border-bottom:1px solid var(--line)}
.hi-faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:var(--ctl-s);padding:var(--s-5) 0;list-style:none;cursor:pointer;font-size:var(--t-h4);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.hi-faq summary::-webkit-details-marker{display:none}
.hi-faq summary::after{content:"";flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.hi-faq details[open]>summary::after{transform:rotate(180deg)}
@media (hover:hover){.hi-faq summary:hover{color:var(--hi-green)}}
.hi .hi-faq summary:focus-visible{outline-offset:4px;border-radius:6px}
.hi-faq details p{max-width:40em;padding:0 0 var(--s-5);color:var(--muted);text-wrap:pretty}
@media (max-width:860px){.hi-faq-wrap{grid-template-columns:minmax(0,1fr)}}

/* Pagina: de voet staat altijd onderaan, ook op een korte pagina als privacy.
   Drie rijen: proefbalk, het werkvlak (.hi-stage: header en inhoud) dat de ruimte vult, en de voet. */
body.hi{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100svh}
body.hi>.hi-proef{grid-row:1}
body.hi>.hi-stage{grid-row:2}
body.hi>.hi-ftr{grid-row:3}

/* Footer: op --soft zoals .ftr van hotelvideos. Geen groene tekst op --soft (haalt geen AA). */
.hi-ftr{padding:var(--s-8) 0 var(--s-5);background:var(--soft)}
.hi-ftr-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--s-4) var(--s-6)}
.hi-ftr-intro{display:grid;gap:var(--s-2);max-width:30em}
.hi-ftr-intro .hi-logo{justify-self:start}
.hi-ftr-intro p{font-size:var(--t-small);color:var(--muted)}
.hi-ftr-links{display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
.hi-ftr-links a{display:inline-flex;align-items:center;min-height:var(--ctl-s);font-size:var(--t-small)}
.hi-ftr-links a:hover{text-decoration:underline;text-underline-offset:3px}
.hi-ftr-base{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--t-meta);color:var(--muted)}

/* Welkomstscherm (maquette): bovenste helft donker, daaronder licht. */
.hi-welkom-sec{padding-top:var(--section-s)}
.hi-welkom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:clamp(32px,5vw,96px);padding:clamp(28px,6vw,96px)}
.hi-welkom .h1{max-width:11em}
/* Eén meta-regel direct onder de kop: het nummer is een voorbeeld. */
.hi-vb-regel{margin-top:var(--s-3);font-size:var(--t-meta);font-weight:500;color:var(--hi-d-muted)}
.hi-welkom .hi-vb-regel+.lead{margin-top:var(--s-5)}
.hi-welkom .lead{max-width:28em}
@media (max-width:860px){.hi-welkom{grid-template-columns:minmax(0,1fr)}.hi-welkom-kaart{max-width:440px}}

.hi-delen{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s-5)}
.hi-blok{display:flex;flex-direction:column;gap:var(--s-4)}
.hi-blok-kop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.hi-link-rij{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
.hi-link-rij .input{flex:1 1 240px;min-width:0;font-variant-numeric:tabular-nums}
.hi-kopieer{min-width:10em}
.hi-deel{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3)}
/* Jouw stand: kop en uitleg boven, telling en balk tegen de onderrand, op één lijn met de deelknoppen
   in het paneel ernaast. */
.hi-blok-stand{justify-content:space-between}
.hi-blok-groep{display:flex;flex-direction:column;gap:var(--s-3)}
.hi-blok-groep .muted{max-width:26em;text-wrap:pretty}
.hi-stand-tekst{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);font-weight:500}
.hi-voortgang{display:block;width:100%;height:4px;border:0;border-radius:2px;background:var(--line);overflow:hidden;-webkit-appearance:none;appearance:none}
.hi-voortgang::-webkit-progress-bar{background:var(--line);border-radius:2px}
.hi-voortgang::-webkit-progress-value{background:var(--hi-green);border-radius:2px}
.hi-voortgang::-moz-progress-bar{background:var(--hi-green);border-radius:2px}
@media (max-width:860px){.hi-delen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .hi-link-rij,.hi-deel{flex-direction:column}
  .hi-link-rij .input{flex:none}
  .hi-link-rij .btn,.hi-deel .btn{width:100%}
}

/* Tekstlink in lopende tekst: groen op wit, onderstreept, met een tikvlak van 44 px zonder de
   regel hoger te maken (zoals .ext-link in hv.css). */
.hi-tekstlink{display:inline-block;padding-block:calc((var(--ctl-s) - 1lh) / 2);margin-block:calc((1lh - var(--ctl-s)) / 2);color:var(--hi-green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Voorbeeldlabel (.ph uit hv.css): iets meer lucht rond de meta-tekst binnen de stippelrand. */
.hi .ph{padding:var(--s-2) var(--s-3);line-height:1.2}
/* Minder beweging: hv.css zet transities op elementen uit, dit pseudo-element dekt hij niet. */
@media (prefers-reduced-motion:reduce){.hi-faq summary::after{transition:none}}