:root{
    --bg:#eae6dc;
    --surface:#f6f3ea;
    --surface-raised:#fbf9f3;
    --ink:#2a2822;
    --ink-soft:#655f52;
    --ink-faint:#8b8474;
    --accent:#8b6a46;
    --accent-ink:#fbf9f3;
    --accent-2:#4c6358;
    --accent-2-ink:#fbf9f3;
    --notsure-bg:#6d2c3a;
    --notsure-ink:#f7ece8;
    --line:#d8cfbc;
    --line-soft:#e3dccb;
    --shadow: 0 1px 2px rgba(42,40,34,0.06), 0 8px 24px -12px rgba(42,40,34,0.18);
    --shadow-lift: 0 4px 10px rgba(42,40,34,0.10), 0 18px 36px -14px rgba(42,40,34,0.28);
    color-scheme: light;
  }
  /* Темна тема вмикається лише вручну (кнопкою-перемикачем у шапці),
     а не автоматично за системною темою пристрою — за замовчуванням
     сайт завжди світлий. */
  :root[data-theme="dark"]{
    --bg:#1c1d19;
    --surface:#242621;
    --surface-raised:#2b2d27;
    --ink:#eee8da;
    --ink-soft:#b6af9c;
    --ink-faint:#847e6d;
    --accent:#cfa06c;
    --accent-ink:#20180e;
    --accent-2:#84a392;
    --accent-2-ink:#122019;
    --notsure-bg:#b3556c;
    --notsure-ink:#241014;
    --line:#3b3d34;
    --line-soft:#31332b;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.5);
    --shadow-lift: 0 4px 10px rgba(0,0,0,0.4), 0 20px 40px -16px rgba(0,0,0,0.65);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  #top{ display:block; height:0; }
  /* Вимикаємо "scroll anchoring" — стандартну браузерну поведінку, коли
     скрол автоматично трохи підправляється сам, якщо контент вище по
     сторінці ледь змінив висоту (наприклад, довантажився шрифт чи
     картинка). Через це точне відновлення позиції скролу після
     оновлення сторінки (js/scroll-memory.js) могло "зʼїжджати" на
     кілька пікселів — з цим правилом більше не має. */
  html{ overflow-anchor:none; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Golos Text", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--accent); color:var(--accent-ink); }

  h1,h2,h3{
    font-family:"Alegreya", Georgia, "Times New Roman", serif;
    font-weight:470;
    letter-spacing:-0.01em;
    margin:0;
    text-wrap:balance;
    color:var(--ink);
  }
  .mono{
    font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }
  a{ color:inherit; }
  button{ font-family:inherit; }

  .wrap{
    max-width:1040px;
    margin:0 auto;
    padding-inline:24px;
  }
  .prose{ max-width:640px; }

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:20;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .topbar-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-block:14px;
    flex-wrap:wrap;
  }
  .topnav{
    display:flex;
    gap:22px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .topnav a{
    font-size:0.86rem;
    font-weight:500;
    color:var(--ink-soft);
    text-decoration:none;
    white-space:nowrap;
  }
  .topnav a:hover{ color:var(--ink); }
  @media (max-width:640px){
    .topnav{ order:3; width:100%; gap:16px; overflow-x:auto; padding-bottom:2px; }
  }
  .brand{
    font-family:"Alegreya", serif;
    font-weight:470;
    font-size:1.05rem;
    letter-spacing:-0.01em;
    display:flex;
    align-items:baseline;
    gap:8px;
    white-space:nowrap;
  }
  .brand small{
    font-family:"Golos Text", sans-serif;
    font-weight:500;
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .langswitch{
    display:flex;
    gap:2px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    padding:3px;
  }
  .langswitch button{
    border:none;
    background:transparent;
    color:var(--ink-soft);
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:6px 11px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .langswitch button:hover{ color:var(--ink); }
  .langswitch button[aria-pressed="true"]{
    background:var(--ink);
    color:var(--bg);
  }
  .langswitch button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:34px;
    height:34px;
    padding:0;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink-soft);
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .theme-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); }
  .theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .theme-toggle svg{ width:17px; height:17px; display:block; }
  .theme-toggle .icon-moon{ display:none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

  /* ---------- back to top ---------- */
  .back-to-top{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--line);
    background:var(--surface-raised);
    color:var(--ink-soft);
    border-radius:999px;
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s, box-shadow .18s ease, color .15s ease, border-color .15s ease;
  }
  .back-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .back-to-top:hover{
    color:var(--ink);
    border-color:var(--ink-faint);
    box-shadow:var(--shadow-lift);
    transform:translateY(-2px);
  }
  .back-to-top:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .back-to-top svg{ width:18px; height:18px; display:block; }
  @media (max-width:640px){
    .back-to-top{ right:14px; bottom:14px; width:40px; height:40px; }
  }

  /* ---------- hero ---------- */
  .hero{
    padding-block:64px 56px;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    align-items:center;
  }
  @media (min-width:800px){
    .hero-grid{ grid-template-columns:1.15fr 0.85fr; gap:48px; }
  }
  .hero-photo-wrap{
    position:relative;
    max-width:340px;
    margin:0 auto;
  }
  @media (min-width:800px){
    .hero-photo-wrap{ max-width:100%; margin:0 0 0 auto; }
  }
  .hero-photo-wrap::before{
    content:"";
    position:absolute;
    inset:16px -16px -16px 16px;
    border-radius:18px;
    background:var(--accent);
    opacity:0.22;
    z-index:0;
  }
  .hero-photo{
    position:relative;
    z-index:1;
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .hero-photo:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .hero-photo img{
    display:block;
    width:100%;
    height:auto;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.74rem;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--accent-2);
  }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;border-radius:50%;
    background:var(--accent-2);
    flex:none;
  }
  .hero h1{
    font-size:clamp(2.1rem, 5.2vw, 3.4rem);
    line-height:1.06;
    margin-top:14px;
  }
  .hero-thread{
    display:block;
    width:min(360px, 70vw);
    height:auto;
    margin-top:18px;
  }
  .hero-thread path{
    fill:none;
    stroke:var(--accent);
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 1.4s 0.2s cubic-bezier(.4,0,.2,1) forwards;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-thread path{ animation:none; stroke-dashoffset:0; }
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .tagline-list{
    list-style:none;
    margin:22px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .tagline-list li{
    color:var(--ink-soft);
    font-size:1.05rem;
    padding-left:20px;
    position:relative;
  }
  .tagline-list li::before{
    content:"";
    position:absolute;
    left:0; top:0.62em;
    width:9px; height:1.5px;
    background:var(--accent);
  }

  .hero-meta{
    margin-top:26px;
    color:var(--ink-faint);
    font-size:0.86rem;
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
  }
  .hero-meta span{ white-space:nowrap; }

  .cta-row{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 22px;
    border-radius:9px;
    font-size:0.95rem;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .btn-primary{
    background:var(--ink);
    color:var(--bg);
  }
  .btn-primary:hover{ box-shadow:var(--shadow); }
  .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
  .btn-block{ width:100%; justify-content:center; }
  .btn-sm{ padding:9px 14px; font-size:0.82rem; border-radius:7px; }
  .cta-row .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }

  /* ---------- sections ---------- */
  section{ padding-block:56px; border-top:2px solid var(--line); }
  .section-head{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:32px;
  }
  .section-head h2, .section-head h1{ font-size:clamp(1.5rem,3.4vw,2rem); }
  .news-back-link{ margin-bottom:24px; }
  .section-num{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    color:var(--ink-faint);
    letter-spacing:0.06em;
  }

  /* about */
  .about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
  }
  @media (min-width:800px){
    .about-grid{ grid-template-columns:1.3fr 0.7fr; align-items:start; }
  }
  .about-gallery{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px 14px;
    justify-content:center;
    max-width:320px;
    margin:0 auto;
  }
  @media (min-width:800px){
    .about-gallery{ padding-top:28px; max-width:none; margin:0; }
  }
  .about-gallery img{
    width:100%;
    height:auto;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:12px;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    display:block;
  }
  .about-gallery .ph1{ transform:rotate(-2deg); }
  .about-gallery .ph2{ transform:rotate(2deg); margin-top:14px; }
  .about-gallery .ph3{ transform:rotate(1.5deg); }
  .about-gallery .ph4{ transform:rotate(-1.5deg); margin-top:14px; }
  .about-gallery .ph5{ transform:rotate(-1deg); }
  .about-gallery .ph6{ transform:rotate(1.75deg); margin-top:14px; }
  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
  }
  .chip{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.74rem;
    letter-spacing:0.02em;
    padding:6px 11px;
    border-radius:6px;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink-soft);
  }
  .about-subtag{
    margin:10px 0 22px;
    font-family:"Alegreya", serif;
    font-style:italic;
    font-weight:420;
    font-size:1.1rem;
    color:var(--accent-2);
  }
  .topic-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
  }
  .topic-pill{
    font-size:0.78rem;
    font-weight:600;
    padding:6px 13px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 14%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    color:var(--accent);
  }
  .signature-line{
    margin-top:26px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }

  /* how it works */
  .steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .step{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px 20px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .step:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
    border-color:var(--line-soft);
  }
  .step-num{
    font-family:"IBM Plex Mono", monospace;
    color:var(--accent);
    font-size:0.85rem;
    font-weight:600;
  }
  .step h3{
    font-size:1.05rem;
    margin-top:10px;
    font-weight:600;
    font-family:"Golos Text", sans-serif;
  }
  .step p{
    margin:8px 0 0;
    color:var(--ink-soft);
    font-size:0.92rem;
  }

  /* concerns — "запити, з якими можна звернутися" */
  .concern-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .concern{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:22px 20px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .concern:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
    border-color:var(--line-soft);
  }
  .concern h3{
    font-size:1.05rem;
    font-weight:600;
    font-family:"Golos Text", sans-serif;
  }
  .concern p{
    margin:8px 0 0;
    color:var(--ink-soft);
    font-size:0.92rem;
  }

  /* services / tickets */
  .ticket-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  .ticket{
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .ticket:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .ticket-top{
    padding:22px 22px 18px;
  }
  .ticket-free{
    border-color:var(--accent-2);
  }
  .ticket-free .price-amount{
    color:var(--accent-2);
  }
  .ticket-kind{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--accent-2);
  }
  .ticket-kind-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  /* "Вступна консультація" картка навмисно виділена як окрема, контрастна
     плитка серед інших (за мотивами тарифних планів на кшталт Cal.com,
     де один план — темний серед світлих). Використовуємо --ink як фон:
     у світлій темі --ink темний → темна картка на світлій сторінці, у
     темній темі --ink світлий → світла картка на темній сторінці. Тобто
     контраст із рештою сторінки зберігається автоматично в обох темах,
     без окремих правил під :root[data-theme="dark"]. Текст усередині —
     var(--bg) (протилежний до --ink), приглушені варіанти — той самий
     колір, змішаний із --ink через color-mix, за аналогією з тим, як
     --ink-soft/--ink-faint приглушують --ink на звичайних картках. */
  .ticket-promo{
    background:var(--ink);
    border-color:var(--ink);
  }
  .ticket-promo .ticket-kind,
  .ticket-promo .ticket-dur,
  .ticket-promo .price-was{
    color:color-mix(in srgb, var(--bg) 55%, var(--ink));
  }
  .ticket-promo h3,
  .ticket-promo .price-now{
    color:var(--bg);
  }
  .ticket-promo p.desc{
    color:color-mix(in srgb, var(--bg) 80%, var(--ink));
  }
  .ticket-promo .ticket-stub{
    border-top-color:color-mix(in srgb, var(--bg) 30%, var(--ink));
  }
  .ticket-promo .promo-badge{
    background:var(--bg);
    color:var(--ink);
  }
  .ticket-promo .btn-primary{
    background:var(--bg);
    color:var(--ink);
  }
  .ticket-promo .btn-primary:hover{
    box-shadow:none;
    opacity:0.9;
  }
  .promo-badge{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.66rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:3px 10px;
    border-radius:999px;
    background:var(--accent);
    color:var(--accent-ink);
    white-space:nowrap;
  }

  /* ---------- "не впевнені, який формат" cta ----------
     Окремий бордовий акцент (--notsure-bg / --notsure-ink, визначені
     в :root і :root[data-theme="dark"] поруч із --accent), який не
     повторює ні інвертовану картку .ticket-promo, ні фірмовий
     --accent — цей блок навмисно виділяється власним кольором.
     Прибираємо стандартну верхню лінію-роздільник між секціями
     (border-top:2px solid var(--line) із загального правила `section`)
     — сама кольорова картка вже достатньо відділяє блок від цін.
     Також зменшуємо верхній відступ секції (за замовчуванням
     padding-block:56px), щоб картка була ближче до цін над нею —
     нижній відступ лишаємо як є, для дихання перед FAQ. */
  #notsure{ border-top:none; padding-top:20px; }
  .notsure-card{
    background:var(--notsure-bg);
    border-radius:18px;
    padding:36px 32px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:22px 32px;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  /* Той самий ефект підняття при наведенні, що й у карток цін
     (.ticket:hover нижче) — щоб картка відчувалась частиною тієї ж
     системи, а не окремим статичним банером. */
  .notsure-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lift);
  }
  .notsure-text{ max-width:560px; }
  .notsure-eyebrow{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    font-weight:700;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:color-mix(in srgb, var(--notsure-ink) 55%, var(--notsure-bg));
    margin-bottom:10px;
  }
  .notsure-text h2{
    font-size:clamp(1.35rem,2.8vw,1.85rem);
    color:var(--notsure-ink);
    margin:0 0 10px;
  }
  .notsure-text p{
    margin:0;
    color:color-mix(in srgb, var(--notsure-ink) 82%, var(--notsure-bg));
  }
  .notsure-btn{
    background:var(--notsure-ink);
    color:var(--notsure-bg);
    flex-shrink:0;
  }
  .notsure-btn:hover{
    box-shadow:none;
    opacity:0.9;
  }
  @media (max-width:640px){
    .notsure-card{ padding:28px 22px; flex-direction:column; align-items:flex-start; }
    .notsure-btn{ width:100%; justify-content:center; }
  }
  .ticket h3{
    font-size:1.28rem;
    margin-top:8px;
    font-family:"Alegreya", serif;
    font-weight:470;
  }
  .ticket-dur{
    margin-top:6px;
    color:var(--ink-faint);
    font-size:0.82rem;
  }
  .ticket p.desc{
    margin:12px 0 0;
    color:var(--ink-soft);
    font-size:0.9rem;
  }
  .ticket-stub{
    border-top:1.5px dashed var(--line);
    padding:16px 22px 22px;
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
  }
  .ticket-stub::before,.ticket-stub::after{
    content:"";
    position:absolute;
    top:-8px;
    width:16px;height:16px;
    border-radius:50%;
    background:var(--bg);
    border:1px solid var(--line);
  }
  .ticket-stub::before{ left:-9px; }
  .ticket-stub::after{ right:-9px; }
  .price-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
  }
  .price{
    font-family:"IBM Plex Mono", monospace;
    font-size:1.15rem;
    font-weight:600;
    color:var(--ink);
  }
  .price-label{
    font-size:0.72rem;
    color:var(--ink-faint);
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .price-custom{
    font-size:0.95rem;
    font-weight:600;
    color:var(--ink-soft);
    text-transform:none;
    letter-spacing:normal;
  }
  .price-group{
    display:inline-flex;
    align-items:baseline;
    gap:8px;
  }
  .price-was,
  .discount-was{
    text-decoration:line-through;
    color:var(--ink-faint);
    font-weight:500;
    font-size:0.95rem;
  }
  .discount-badge{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.04em;
    padding:3px 9px;
    border-radius:999px;
    background:var(--accent-2);
    color:var(--accent-2-ink);
    white-space:nowrap;
  }
  .price-now{
    color:var(--accent-2);
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
  }
  .pay-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .pay-row .btn{ flex:1; }

  .savings{
    display:inline-block;
    margin-top:4px;
    font-size:0.76rem;
    color:var(--accent-2);
  }

  /* faq */
  details{
    border-top:1px solid var(--line-soft);
    padding-block:16px;
  }
  details:first-of-type{ border-top:1px solid var(--line-soft); }
  summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-weight:600;
    font-size:1rem;
  }
  summary::-webkit-details-marker{ display:none; }
  summary::after{
    content:"+";
    font-family:"IBM Plex Mono", monospace;
    font-size:1.2rem;
    color:var(--accent);
    flex:none;
    transition:transform .15s ease;
  }
  details[open] summary::after{ content:"–"; }
  details p{
    margin:12px 0 0;
    color:var(--ink-soft);
    max-width:640px;
  }

  /* contact */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:32px;
    align-items:start;
  }
  @media (min-width:800px){
    .contact-grid{ grid-template-columns:1fr 1fr; }
  }
  .contact-list{
    max-width:480px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .contact-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    text-decoration:none;
    color:var(--ink);
    transition:border-color .15s ease;
  }
  .contact-item:not(.is-pending):hover{ border-color:var(--accent); }
  .contact-item.is-pending{
    color:var(--ink-faint);
    cursor:default;
  }
  .contact-name{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:0.95rem; }
  .contact-icon{
    width:17px;
    height:17px;
    flex:none;
    display:inline-flex;
    color:var(--accent-2);
  }
  .contact-icon svg{ width:100%; height:100%; }
  .is-pending .contact-icon{ color:var(--ink-faint); }
  .pending-tag{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }

  .contact-form-card{
    max-width:480px;
    padding:22px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
  }
  .contact-form-card h3{
    margin:0 0 16px;
    font-size:1rem;
    font-weight:700;
  }
  .contact-form{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  /* .contact-form сам задає display:flex, тому звичайний [hidden]
     без цього правила не спрацює на формі запису, коли app.js ховає
     її на користь вбудованого календаря Cal.com. */
  .contact-form[hidden]{
    display:none;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.85rem;
    color:var(--ink-soft);
  }
  .form-field input,
  .form-field textarea,
  .form-field select{
    font-family:inherit;
    /* Рівно 16px, не 0.92rem (~14.7px) — на iOS Safari та деяких
       мобільних браузерах фокус на полі з меншим розміром шрифту
       автоматично збільшує масштаб усієї сторінки (щоб текст був
       читабельним), і після закриття модалки цей зум інколи не
       повертається назад самостійно — сторінка лишається трохи
       "наближеною" й перестає вміщатись по ширині. 16px — поріг,
       нижче якого браузери це роблять. */
    font-size:16px;
    color:var(--ink);
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px 13px;
    resize:vertical;
    transition:border-color .15s ease;
  }
  .form-field select{
    cursor:pointer;
  }
  /* Поки в <select required> ще не обрано жодного значення (стоїть
     порожній disabled option-заглушка), він :invalid за специфікацією
     — цим і скористаємось, щоб підпис-заглушка був приглушеного
     кольору, як і в полі "Дата" поруч, а не звичайного тексту. Щойно
     обрано час — стає :valid і колір сам повертається до --ink. */
  .form-field select:invalid{
    color:var(--ink-faint);
  }
  /* Червона рамка для порожніх/некоректних обов'язкових полів — але
     лише після невдалої спроби відправити форму (клас is-validated
     додає app.js в момент цієї спроби), інакше поля були б червоними
     ще до того, як людина взагалі почала їх заповнювати. Як тільки
     поле стає коректним — :invalid перестає збігатись і рамка сама
     повертається до звичайного кольору, без додаткового JS. */
  .contact-form.is-validated input:invalid,
  .contact-form.is-validated textarea:invalid,
  .contact-form.is-validated select:invalid{
    border-color:#c0392b;
  }
  .form-field input:focus,
  .form-field textarea:focus,
  .form-field select:focus{
    outline:none;
    border-color:var(--accent);
  }
  /* Перемикач "Телефон / Email / Telegram" над полем "Контактні дані" —
     той самий візуальний стиль пігулки, що й .langswitch у шапці, щоб
     виглядало як частина однієї системи. Залежно від вибору app.js сам
     міняє type/pattern/placeholder інпута нижче — тут лише вигляд кнопок. */
  .contact-type-switch{
    display:flex;
    gap:2px;
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:999px;
    padding:3px;
    width:fit-content;
  }
  .contact-type-switch button{
    border:none;
    background:transparent;
    color:var(--ink-soft);
    font-family:inherit;
    font-size:0.74rem;
    font-weight:600;
    letter-spacing:0.02em;
    padding:6px 12px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .contact-type-switch button:hover{ color:var(--ink); }
  .contact-type-switch button.is-active{
    background:var(--ink);
    color:var(--bg);
  }
  .contact-type-switch button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  @media (max-width:360px){
    .contact-type-switch{ width:100%; }
    .contact-type-switch button{ flex:1; }
  }
  /* Рядок "Дата" + "Час" в модалці запису — обидва поля власні (не
     нативні): і <select> часу, і календар дати нижче — саме тому, що
     нативні браузерні пікери малюються мовою інтерфейсу браузера, а
     не мовою сайту, і це неможливо перевизначити ні з CSS, ні з JS. */
  .form-field-row{
    display:flex;
    gap:10px;
  }
  .form-field-row .form-field{
    flex:1;
    min-width:0;
  }
  /* 420px не вистачало — на iPhone з логічною шириною екрана 428-430px
     (Plus/Pro Max) поля "Дата" і "Час" все одно тислись одне до одного
     в рядок замість того, щоб стати одне під одним. */
  @media (max-width:480px){
    .form-field-row{ flex-direction:column; }
  }
  /* Власний календар для поля "Дата" (замість <input type="date">). */
  .date-field{
    position:relative;
  }
  .date-display{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-family:inherit;
    font-size:16px; /* узгоджено з .form-field input/select поруч, див. коментар там */
    color:var(--ink);
    background:var(--surface-raised);
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px 13px;
    cursor:pointer;
    text-align:left;
    transition:border-color .15s ease;
  }
  .date-display:hover{ border-color:var(--ink-faint); }
  .date-display:focus-visible,
  .date-display[aria-expanded="true"]{
    outline:none;
    border-color:var(--accent);
  }
  .date-display-text.is-placeholder{ color:var(--ink-faint); }
  .date-display-icon{ flex:none; color:var(--ink-soft); }
  /* Підсвічування поля "Дата", коли форму спробували відправити без
     обраної дати — саме поле приховане (input[type=hidden]), тому
     звичайна браузерна валідація його не бачить і не підказує; цей
     клас додає app.js власноруч (див. submit-обробник форми запису). */
  .date-field.is-invalid .date-display{
    border-color:#c0392b;
  }
  /* Спливаюча підказка "Ви пропустили це поле" для дати — навмисно в
     тому ж візуальному стилі, що й нативні браузерні підказки валідації
     на інших полях форми (біла картка зі стрілкою й помаранчевою
     позначкою), щоб виглядало як одна система, а не два різних попапи. */
  .date-field-bubble{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    z-index:21;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:260px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:var(--shadow);
    padding:9px 12px;
    font-size:0.78rem;
    line-height:1.35;
    color:var(--ink);
  }
  .date-field-bubble[hidden]{ display:none; }
  .date-field-bubble::before{
    content:"";
    position:absolute;
    top:-6px;
    left:20px;
    width:11px;
    height:11px;
    background:var(--surface);
    border-left:1px solid var(--line);
    border-top:1px solid var(--line);
    transform:rotate(45deg);
  }
  .date-field-bubble-icon{
    flex:none;
    width:16px;
    height:16px;
    border-radius:3px;
    background:#e08e3e;
    color:#fff;
    font-size:0.72rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .date-popup{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:20;
    width:266px;
    max-width:calc(100vw - 40px);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:12px;
  }
  .date-popup[hidden]{ display:none; }
  .date-popup.is-above{
    top:auto;
    bottom:calc(100% + 6px);
  }
  .date-popup-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
  }
  .date-popup-title{
    font-size:0.86rem;
    font-weight:700;
    text-transform:capitalize;
  }
  .date-nav{
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    line-height:1;
    color:var(--ink-soft);
    background:transparent;
    border:1px solid var(--line);
    border-radius:6px;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .date-nav:hover{ border-color:var(--accent); color:var(--accent); }
  .date-popup-weekdays,
  .date-popup-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:2px;
  }
  .date-popup-weekdays span{
    font-size:0.68rem;
    text-align:center;
    color:var(--ink-faint);
    padding:4px 0;
    text-transform:capitalize;
  }
  .date-popup-grid button{
    font-family:inherit;
    font-size:0.8rem;
    color:var(--ink);
    background:transparent;
    border:1px solid transparent;
    border-radius:6px;
    aspect-ratio:1;
    cursor:pointer;
    transition:background .12s ease, color .12s ease, border-color .12s ease;
  }
  .date-popup-grid button:not(.is-disabled):not(.is-empty):hover{
    border-color:var(--accent);
  }
  .date-popup-grid button.is-empty{
    cursor:default;
    visibility:hidden;
  }
  .date-popup-grid button.is-disabled{
    color:var(--ink-faint);
    cursor:default;
  }
  .date-popup-grid button.is-today{
    border-color:var(--ink-faint);
    font-weight:700;
  }
  .date-popup-grid button.is-selected{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
    font-weight:700;
  }
  .date-popup-foot{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    padding-top:8px;
    border-top:1px solid var(--line);
  }
  .date-popup-link{
    font-family:inherit;
    font-size:0.76rem;
    font-weight:600;
    color:var(--accent);
    background:transparent;
    border:none;
    cursor:pointer;
    padding:2px 4px;
  }
  .date-popup-link:hover{ text-decoration:underline; }
  .contact-form .btn[disabled]{
    opacity:0.6;
    cursor:default;
    transform:none;
  }
  .form-note{
    margin:2px 0 0;
    font-size:0.75rem;
    color:var(--ink-faint);
    line-height:1.5;
  }

  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:100;
  }
  .modal-overlay.is-open{
    display:flex;
  }
  .modal-box{
    position:relative;
    width:100%;
    max-width:480px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:20px 20px 18px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
  .modal-box::-webkit-scrollbar{ width:8px; }
  .modal-box::-webkit-scrollbar-track{ background:transparent; }
  .modal-box::-webkit-scrollbar-thumb{
    background:var(--line);
    border-radius:999px;
    border:2px solid var(--surface);
    background-clip:padding-box;
  }
  .modal-box::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }
  .modal-box h3{
    margin:0 0 12px;
    font-size:1.05rem;
    font-weight:700;
    padding-right:28px;
  }
  /* Обгортка кнопки "Надіслати заявку" й примітки під нею — раніше тут
     була спроба "приліпити" футер до низу модалки під час скролу, але
     візуально це виглядало як зайва смуга з порожнім місцем знизу, тож
     від цього відмовились. Замість цього просто ущільнили відступи по
     всій формі (див. .contact-form, .form-field, інпути й .date-display
     нижче), щоб форма частіше вміщалась без скролу взагалі. */
  .booking-form-footer{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  /* Ущільнені відступи саме для форми в модалці запису (#booking-form),
     а не для .contact-form/.form-field загалом — інакше та сама зміна
     зачепила б і форму в розділі "Контакти" на сторінці, де такого
     запиту не було. Мета — щоб уся форма частіше вміщалась у видиму
     область модалки без скролу, без зменшення читабельності. */
  #booking-form{ gap:10px; }
  #booking-form .form-field{ gap:4px; }
  #booking-form input,
  #booking-form textarea,
  #booking-form select,
  #booking-form .date-display{
    padding:9px 12px;
  }
  #booking-form textarea{ min-height:0; }
  .modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    line-height:1;
    color:var(--ink-soft);
    background:transparent;
    border:1px solid var(--line);
    border-radius:50%;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .modal-close:hover{
    border-color:var(--accent);
    color:var(--accent);
  }
  body.modal-open{
    overflow:hidden;
  }
  /* Ширший і вищий бокс модалки, коли замість форми показується
     вбудований календар Cal.com (див. app.js/openBooking) — активується
     тільки коли в config.js заповнено CONFIG.booking.calComLink. */
  .modal-box.is-calcom{
    max-width:680px;
    height:min(720px, calc(100vh - 40px));
  }
  #cal-booking-embed{
    width:100%;
    height:100%;
    min-height:500px;
  }
  /* Спрощений варіант форми (бордова картка "Первий крок") — без
     вибору дати й часу, див. app.js/openBooking. */
  .modal-box.is-simple [data-datetime-field]{
    display:none;
  }

  .toast{
    position:fixed;
    left:50%;
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
    transform:translate(-50%, 12px);
    background:var(--ink);
    color:var(--bg);
    padding:13px 18px;
    border-radius:9px;
    font-size:0.88rem;
    max-width:min(420px, calc(100vw - 32px));
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:50;
  }
  .toast.is-visible{
    opacity:1;
    transform:translate(-50%, 0);
    pointer-events:auto;
  }

  footer{
    padding-block:36px;
    border-top:2px solid var(--line);
  }
  /* news */
  .news-updated{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.74rem;
    color:var(--ink-faint);
  }
  .news-carousel{
    margin-top:28px;
  }
  .news-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 0 -4px;
    padding-bottom:4px;
  }
  .news-grid::-webkit-scrollbar{ display:none; }
  .news-grid{ cursor:grab; }
  .news-grid .news-card,
  .news-grid .news-card *{
    -webkit-user-drag:none;
    user-drag:none;
  }
  .news-grid.is-dragging{
    cursor:grabbing;
    scroll-snap-type:none;
    user-select:none;
  }
  .news-grid .news-card{
    flex:0 0 calc((100% - 32px)/3);
    min-width:240px;
    scroll-snap-align:start;
  }
  @media (max-width:760px){
    .news-grid .news-card{ flex-basis:82%; }
  }
  .news-carousel-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-top:18px;
  }
  .carousel-arrow{
    flex:none;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, opacity .15s ease;
  }
  .carousel-arrow svg{ width:18px; height:18px; }
  .carousel-arrow:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
  .carousel-arrow:disabled{ opacity:.35; cursor:default; }
  .carousel-track{
    flex:1 1 80px;
    min-width:60px;
    height:2px;
    background:var(--line);
    border-radius:2px;
    position:relative;
  }
  .carousel-progress{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background:var(--accent);
    border-radius:2px;
    width:30%;
    transition:left .12s ease, width .12s ease;
  }
  .carousel-see-all{ flex:none; }
  .news-card{
    display:flex;
    flex-direction:column;
    padding:0;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    text-decoration:none;
    color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease, transform .18s ease;
  }
  .news-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-lift); transform:translateY(-4px); }
  .news-card-icon{
    flex:none;
    height:132px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb, var(--accent) 15%, var(--surface));
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .news-card-icon svg{
    width:100%;
    height:100%;
    stroke:var(--accent);
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .news-card-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .news-card-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
    flex:1;
  }
  .news-source{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--accent-2);
  }
  .news-source-name{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
  }
  .news-favicon{
    flex:none;
    width:14px;
    height:14px;
    border-radius:3px;
    display:block;
  }
  .news-card h3{
    font-family:"Golos Text", sans-serif;
    font-weight:600;
    font-size:1rem;
    line-height:1.35;
  }
  .news-card p{
    margin:0;
    font-size:0.86rem;
    color:var(--ink-soft);
    flex:1;
  }
  .news-readmore{
    font-size:0.78rem;
    font-weight:600;
    color:var(--accent);
  }
  .news-empty{
    color:var(--ink-faint);
    font-size:0.9rem;
  }

  /* ---------- news loading skeleton ----------
     Новини вантажяться асинхронно (RSS + переклад на бекенді можуть
     зайняти кілька секунд) — поки триває запит, тут показуються
     "скелетні" картки/рядки з м'яким переливом (shimmer), щоб розділ
     не виглядав порожнім чи зламаним. Реальний renderNews/renderAllNews
     сам очищає контейнер (innerHTML = "") перед вставкою справжніх
     карток, тому скелетон просто зникає, коли дані готові. */
  .skeleton-line, .skeleton-block{
    background:linear-gradient(90deg, var(--line-soft) 25%, var(--surface-raised) 50%, var(--line-soft) 75%);
    background-size:400% 100%;
    animation:newsSkeletonShimmer 2.8s ease-in-out infinite;
    border-radius:5px;
  }
  @keyframes newsSkeletonShimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }
  @media (prefers-reduced-motion:reduce){
    .skeleton-line, .skeleton-block{ animation:none; }
  }
  .news-card-skeleton .news-card-icon{ background:none; }
  .news-card-skeleton .news-card-body{ gap:12px; }
  .skeleton-line{ height:10px; display:block; }
  .skeleton-line-meta{ width:45%; height:8px; }
  .skeleton-line-title{ height:14px; width:88%; }
  .skeleton-line-title.is-short{ width:62%; }
  .skeleton-line-text.is-short{ width:75%; }
  .skeleton-line-date{ width:64px; height:12px; }
  .skeleton-line-count{ width:52px; height:10px; }
  .skeleton-line-row{ width:60%; height:12px; }
  .skeleton-line-tag{ width:96px; height:10px; flex:none; }
  .archive-row-skeleton{ align-items:center; }
  .archive-row-title-skeleton{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1;
  }
  .skeleton-favicon{
    width:12px;
    height:12px;
    flex:none;
    border-radius:3px;
  }

  .news-archive-wrap{
    margin-top:40px;
    padding-top:28px;
    border-top:1px solid var(--line-soft);
  }
  .news-archive-heading{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-faint);
    font-weight:500;
    margin:0 0 14px;
  }
  .archive-day{
    padding-top:16px;
  }
  .archive-day + .archive-day{
    margin-top:14px;
    border-top:1px solid var(--line-soft);
  }
  .archive-day-title{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    font-size:0.92rem;
    font-weight:600;
  }
  .archive-count{
    font-family:"IBM Plex Mono", monospace;
    font-weight:400;
    font-size:0.76rem;
    color:var(--ink-faint);
  }
  .archive-list{
    padding:6px 0 4px;
  }
  .archive-sentinel{
    height:1px;
  }
  .archive-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:10px 0;
  }
  .archive-row + .archive-row{
    border-top:1px solid var(--line-soft);
  }
  .archive-row-title{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1;
    color:var(--ink);
    text-decoration:none;
    font-size:0.9rem;
  }
  .archive-row-title:hover{ color:var(--accent); }
  .archive-row-title .news-favicon{
    width:12px;
    height:12px;
    flex:none;
  }
  .archive-row-source{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--ink-faint);
    text-decoration:none;
    white-space:nowrap;
    flex:none;
  }
  .archive-row-source:hover{ color:var(--accent); }

  .footer-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px;
    color:var(--ink-faint);
    font-size:0.8rem;
  }
  .disclaimer{
    max-width:640px;
    margin-top:14px;
    color:var(--ink-faint);
    font-size:0.78rem;
    line-height:1.55;
  }

  @media (max-width:760px){
    .ticket-grid{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr; }
    .concern-grid{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; }
    .brand small{ display:none; }
  }