/* MONOLITH · the glass films (Servicii and the domain pages).
   The same shot as the home page: a sticky stage, the words in their column on the left, the matter in its zone on the right.
   Only the matter has changed state: the chrome has cooled into liquid glass. */

/* the film runs whether or not motion is reduced: reduced motion only removes the animations, never the layout */
.film.lfilm{position:relative;z-index:2;height:var(--film-h,900svh)}
.lfilm .stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}
html:not(.motion) .lfilm .beat{position:absolute;inset:0;min-height:0;padding:0;opacity:0;visibility:hidden}
html:not(.motion) .lfilm .beat.is-on{opacity:1;visibility:visible}
html:not(.motion) .lfilm .copy{position:absolute;left:var(--m);top:calc(var(--hdr) + var(--toc-h));bottom:0;width:var(--col);max-width:none}
html:not(.motion) .lfilm .gl{position:absolute}
html:not(.motion) .page-glass .toc{display:block}
.toc--n .toc__list{grid-template-columns:repeat(var(--toc-n),1fr)}

/* the layers, named top to bottom like the monolith; each is a door to its domain.
   Pointing at one lights its layer in the glass. */
.legend{list-style:none;padding:0;margin-top:30px;max-width:480px;border-top:1px solid var(--line)}
.legend a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:baseline;column-gap:16px;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.legend b{font-size:13px;font-weight:400;color:var(--soft);transition:color .25s var(--ease)}
.legend span{font-size:17px;font-weight:500;letter-spacing:-0.01em}
.legend a::after{content:"";width:14px;height:1px;align-self:center;background:currentColor;opacity:.4;transform-origin:100% 50%;transform:scaleX(.5);transition:transform .35s var(--ease),opacity .25s var(--ease)}
.legend a:hover b,.legend a:focus-visible b,.legend a.is-hot b{color:var(--ink)}
.legend a:hover::after,.legend a:focus-visible::after,.legend a.is-hot::after{transform:scaleX(1);opacity:1}

/* a service with what it is: the name, then one sentence */
.svc{list-style:none;padding:0;margin-top:28px;max-width:540px;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);column-gap:24px;padding:12px 0;border-bottom:1px solid var(--line)}
.svc b{font-size:16px;font-weight:500;line-height:1.35;color:var(--ink)}
.svc span{font-size:14px;line-height:1.5;color:var(--soft)}

/* the steps here are all done at once: the page tells the process, it does not count it */
.lfilm .copy .steps li{color:var(--ink)}
.lfilm .copy .steps li::before{color:var(--soft)}

/* short screens: the column keeps its order, it only loses air */
@media (min-width:861px) and (max-height:760px){
  .lfilm .copy{padding:22px 0 26px}
  .lfilm .copy__ch{margin-bottom:16px}
  .lfilm .copy__lead{margin-top:16px}
  .lfilm .copy__extra{margin-top:18px}
  .lfilm .copy__act{margin-top:22px}
  .svc li{padding:8px 0}
  .svc span{font-size:13px;line-height:1.4}
  .legend a{padding:9px 0}
  .lfilm .copy .steps li{padding:8px 0}
}

/* phone: the words first, the glass in what is left of the screen */
@media (max-width:860px){
  .legend{margin-top:14px}
  .legend a{grid-template-columns:96px minmax(0,1fr) auto;padding:8px 0}
  .legend span{font-size:15px}
  .svc{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;margin-top:14px;border-top:0}
  .svc li{display:block;padding:5px 0;border-bottom:0}
  .svc b{font-size:14px;font-weight:400}
  .svc span{display:none}
  .page-glass .hdr,.page-glass .toc{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* no live glass on this machine: the words stay, alone in their column */
.low .lfilm .gl{display:none}

/* situations: when a domain makes sense, one per line */
.sit{list-style:none;padding:0;margin-top:22px;max-width:520px;border-top:1px solid var(--line)}
.sit li{padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--s-lead2);line-height:1.3;letter-spacing:-0.016em;color:var(--ink)}
/* facts: a term, then what it means */
.facts{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);column-gap:24px;margin-top:26px;max-width:560px;border-top:1px solid var(--line)}
.facts dt,.facts dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;font-weight:500;color:var(--ink)}
.facts dd{font-size:14px;line-height:1.5;color:var(--soft)}
.copy__desc{margin:14px 0 0;font-size:16px;line-height:1.45;color:var(--soft);max-width:44ch}
.lfilm .copy .band__list{grid-template-columns:1fr 1fr}
.lfilm .copy__note a{color:var(--ink)}
@media (min-width:861px) and (max-height:760px){ .sit li{padding:9px 0;font-size:18px} .facts dt,.facts dd{padding:8px 0;font-size:13px} }
@media (max-width:860px){
  .sit li{padding:8px 0;font-size:16px}
  .facts{grid-template-columns:1fr;margin-top:14px}
  .facts dt{padding:8px 0 0;border-bottom:0}
  .facts dd{padding:2px 0 8px;font-size:13px}
  .copy__desc{display:none}
}

/* every moment can be read and reached without the film: they stay in the page for screen readers and the keyboard,
   only the one on screen is seen; tabbing into another one takes the film there */
.lfilm .beat{visibility:visible}
.lfilm .beat:not(.is-on){opacity:0}
.lfilm .beat:not(.is-on) .copy{pointer-events:none}

/* ── the document (Confidențialitate): the title in the column, the text beside it, the signature under ── */
.doc{position:relative;z-index:2;display:grid;grid-template-columns:var(--col) minmax(0,1fr);column-gap:max(56px,5vw);padding:calc(var(--hdr) + 8vh) var(--m) 0}
.doc__head{position:sticky;top:calc(var(--hdr) + 6vh);align-self:start}
.doc__head .copy__title{font-size:var(--s-h)}
.doc__body{max-width:68ch}
.doc__sec{padding:26px 0;border-top:1px solid var(--line)}
.doc__sec h2{margin:0 0 10px;font-size:19px;font-weight:500;letter-spacing:-0.01em;color:var(--ink)}
.doc__sec p{margin:0;font-size:16px;line-height:1.65;color:var(--soft)}
.doc__end{padding:26px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--soft)}
.doc__end a{color:var(--ink)}
.doc__sign{grid-column:1/-1;margin-top:14vh;padding:56px 0 48px;border-top:1px solid var(--line)}
.page-doc .toc{display:none}
@media (max-width:860px){
  .doc{grid-template-columns:1fr;padding-top:calc(var(--hdr) + 32px)}
  .doc__head{position:static;margin-bottom:24px}
}

/* ───── the three compositions (20 oct): each page holds its words in its own place ───── */
/* Pachete: the words on the right, the vessels on the left */
@media (min-width:861px){
  .lfilm--right .copy{left:auto;right:var(--m)}
  .lfilm--right .copy__title .ln{white-space:nowrap}
  /* Studio: the words centred above, the piece of the atelier below */
  .lfilm--center .copy{left:50%;right:auto;width:min(760px,calc(100vw - 2 * var(--m)));transform:translateX(-50%);bottom:auto;justify-content:flex-start;padding-top:max(28px,5vh);text-align:center;align-items:center}
  .lfilm--center .copy__ch{justify-content:center}
  .lfilm--center .copy__lead,.lfilm--center .copy__note{margin-left:auto;margin-right:auto;max-width:46ch}
  .lfilm--center .copy__act{justify-content:center}
  .lfilm--center .copy .steps{text-align:left;width:min(100%,640px);grid-template-columns:repeat(5,1fr);column-gap:16px}
  .lfilm--center .copy .steps li{grid-template-columns:1fr;border-top:1px solid var(--line);border-bottom:0;padding:12px 0 0}
  .lfilm--center .copy .steps li::before{margin-bottom:6px}
  .lfilm--center .copy .steps span{font-size:13px}
  .lfilm--center .copy--sign{left:var(--m);transform:none;text-align:left;align-items:stretch;width:var(--col);bottom:0;justify-content:center;padding-top:0}
  .lfilm--center .copy--sign .copy__lead{margin-left:0}
}

/* Servicii: a domain's services. Pick one; the paragraph under the title becomes what it is, when it helps, what you get */
.svcs{margin-top:22px;max-width:560px}
.svcd{min-height:200px}
.svcd .copy__lead{margin-top:0}
.svcd__hint{margin:12px 0 0;font-size:13px;color:var(--soft)}
.svcd__what{margin:0;font-size:var(--s-lead2);line-height:1.3;letter-spacing:-0.016em;color:var(--ink)}
.svcd__dl{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:16px;margin:14px 0 0}
.svcd__dl dt,.svcd__dl dd{margin:0;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45}
.svcd__dl dt{color:var(--soft)}
.svcd__dl dd{color:var(--ink)}
.svcx{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;border-top:1px solid var(--line)}
.svcx button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--soft);font:400 15px/1.3 Geist,sans-serif;text-align:left;cursor:pointer;transition:color .2s var(--ease)}
.svcx button::before{content:"";width:8px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.svcx button:hover,.svcx button:focus-visible,.svcx button[aria-pressed=true]{color:var(--ink)}
.svcx button[aria-pressed=true]::before{width:18px}

/* Pachete: what it includes, or its conditions */
.tabs [role=tablist]{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs [role=tab]{padding:8px 0;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;background:none;color:var(--soft);font:500 14px Geist,sans-serif;cursor:pointer}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs .band__list{grid-template-columns:1fr 1fr;font-size:14px;gap:6px 22px}
.facts--tight{margin-top:0;grid-template-columns:minmax(0,130px) minmax(0,1fr)}
.facts--tight dt,.facts--tight dd{padding:8px 0;font-size:13px}
/* what you already have */
.have fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.have label{position:relative;cursor:pointer}
.have input{position:absolute;opacity:0;pointer-events:none}
.have label>span{display:block;padding:10px 14px;border:1px solid var(--line);font-size:14px;color:var(--soft);transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease)}
.have input:checked+span{border-color:var(--ink);color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.have input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.have__out{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:6px;max-width:44ch}
.have__out b{font-size:17px;font-weight:500;color:var(--ink)}
.have__out span{font-size:14px;line-height:1.5;color:var(--soft)}
.have__out .link{justify-self:start;margin-top:6px}
/* the comparison */
.cmp{width:100%;max-width:600px;border-collapse:collapse;font-size:13.5px;line-height:1.4}
.cmp th,.cmp td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.03em}
.cmp tbody th{font-weight:400;color:var(--soft);width:80px}
.cmp td{color:var(--ink)}

.toc.is-past{opacity:0;pointer-events:none}
@media (max-width:860px){
  .svcd{min-height:0}.svcd__hint{display:none}
  .svcx{grid-template-columns:1fr 1fr;column-gap:12px}.svcx button{font-size:13.5px;padding:7px 0}
  .svcd__dl{grid-template-columns:1fr}.svcd__dl dt{padding-bottom:0;border-top:0}.svcd__dl dd{padding-top:2px}
  .tabs .band__list{grid-template-columns:1fr}
  .have label>span{padding:8px 10px;font-size:13px}
  .cmp{font-size:12px}
}
/* page to page: the header and the tape stay; the rest crossfades (Chrome, Safari 18) */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
/* Studio, the process: one step per line, the name and what happens, left-aligned inside the centred column */
@media (min-width:861px){
  .lfilm--center .copy .steps{display:block;width:min(100%,620px);margin-left:auto;margin-right:auto}
  .lfilm--center .copy .steps li{display:grid;grid-template-columns:28px 150px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
  .lfilm--center .copy .steps li::before{grid-row:auto;margin:0}
  .lfilm--center .copy .steps b{grid-column:2;font-size:15px}
  .lfilm--center .copy .steps span{grid-column:3;margin:0;font-size:13px;line-height:1.45}
}