/* The one header of every glass page (Dasha, 19 Oct): the same bar on every page, the logo on the left, then the pages.
   Features and Help open a panel as wide as the bar and never leave the page; a second click, a click outside or Escape
   closes it. tools/header.py writes the markup into each page; assets/header.js opens and closes the panels. */
.ijh { --ijh-ink: #191826; --ijh-ink2: #5e5c70; --ijh-line: rgba(25, 24, 38, .08); --ijh-blue: #6E72F2;
  position: sticky; top: 14px; z-index: 60; width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1344px; margin: 14px auto 0;
  font-family: 'Sora', system-ui, sans-serif; color: var(--ijh-ink); text-align: left; }
.ijh *, .ijh *::before, .ijh *::after { box-sizing: border-box; }
html { overflow-x: clip; }  /* no sideways scroll on a phone from a stray pseudo-element (every page; the landing had this on its own): clip keeps the sticky header working, overflow hidden would not */
.ijh-bar { position: relative; isolation: isolate; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 10px 0 20px; border-radius: 18px; }  /* its glass is ::before, below */
.ijh-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.ijh-logo img { display: block; height: 26px; width: auto; }  /* the serif logo ijewel 3d again, a little smaller (Dasha, 6 Nov: we stay on the old logo for now) */
.ijh-nav { display: flex; align-items: center; gap: 2px; }
.ijh-nav > a, .ijh-nav > button { -webkit-appearance: none; appearance: none; margin: 0; border: 0; background: none; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px; border-radius: 10px; font: 400 14px/1 'Sora', system-ui, sans-serif; color: var(--ijh-ink2); text-decoration: none; cursor: pointer;
  transition: color .2s, background .2s; }
.ijh-nav > a:hover, .ijh-nav > button:hover, .ijh-nav > button[aria-expanded="true"] { color: var(--ijh-ink); background: rgba(25, 24, 38, .05); }
.ijh-nav > a[aria-current="page"], .ijh-nav > button.is-here { color: var(--ijh-ink); font-weight: 500; }
.ijh-nav .chev { width: 10px; height: 10px; transition: transform .25s; }
.ijh-nav > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ijh a:focus-visible, .ijh button:focus-visible { outline: 2px solid var(--ijh-blue); outline-offset: 2px; }
.ijh-acts { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ijh-acts > a:not(.ijh-btn) { font: 400 14px/1 'Sora', system-ui, sans-serif; color: var(--ijh-ink2); text-decoration: none; }
.ijh-acts > a:not(.ijh-btn):hover { color: var(--ijh-ink); }
.ijh-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 11px; background: var(--ijh-ink); color: #fff !important;
  font: 500 14px/1 'Sora', system-ui, sans-serif; text-decoration: none; transition: background .2s, transform .2s; }
.ijh-btn:hover { background: #2b2940; transform: translateY(-1px); }
/* the bar's glass. It stays as it is at the top of every page (Dasha, 22 Oct: the header no longer folds on a scroll) */
.ijh-bar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 18px;
  background: rgba(255, 255, 255, .78);  /* a little more see-through (Dasha, 27 Oct) */ -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  /* a fine edge and a shadow, as on the login page, so the bar stands out on a white page; the edge a little lighter than the
     login's; the same on every page as on the landing (Dasha, 26 Oct). The landing's footer has the same white and edge. */
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04), 0 14px 36px -18px rgba(25, 24, 38, .2); }
.ijh-menu { display: none; margin-left: auto; height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--ijh-line); background: #fff;
  font: 500 13px/1 'Sora', system-ui, sans-serif; color: var(--ijh-ink); cursor: pointer; }

/* the panels: as wide as the bar, under it */
.ijh-panel { position: absolute; left: 0; right: 0; top: 68px; padding: 14px; border-radius: 20px;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(25, 24, 38, .08); box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 30px 70px -28px rgba(25, 24, 38, .3);  /* a thin ink edge: the panel no longer melts into a white page (Dasha, 2 Nov) */
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s, transform .22s, visibility 0s .22s; }
.ijh-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ijh-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }  /* from the buttons' foot to the panel: the pointer goes from a button straight onto its panel, with no gap between */
.ijh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ijh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ijh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; gap: 8px; }  /* the Pricing menu (29 Oct): Personal, Organization */
.ijh-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; color: var(--ijh-ink); text-decoration: none; transition: background .2s; }
.ijh-card:hover, .ijh-card[aria-current="page"] { background: rgba(25, 24, 38, .045); }
.ijh-card .ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(110, 114, 242, .1); color: var(--ijh-blue); }
.ijh-card { min-width: 0; } .ijh-card .tx { flex: 1; min-width: 0; }
.ijh-card b { display: block; font: 500 14.5px/1.25 'Sora', system-ui, sans-serif; }
.ijh-card small { display: block; margin-top: 3px; font: 400 12.5px/1.35 'Sora', system-ui, sans-serif; color: var(--ijh-ink2); }
.ijh-card .go { flex: none; align-self: center; color: var(--ijh-ink2); transition: transform .2s, color .2s; }  /* the arrow, centred on the row */
.ijh-card:hover .go { transform: translateX(3px); color: var(--ijh-ink); }
/* the Solutions menu (Dasha, 2 Nov): picture cards in one row, like CapCut's menu; narrow cards on a strip that scrolls
   sideways (a trackpad, the wheel or a drag) and fades at the edge it can still go to */
.ijh-grid--pic { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 2px;
  padding: 4px 4px 12px; margin: -4px -4px -8px; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none;
  --fl: 0px; --fr: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.ijh-grid--pic::-webkit-scrollbar { display: none; }
/* the arrows at the two ends of the strip (Dasha, 2 Nov: scrolling alone was awkward): a round white button on the middle of the panel (Dasha, 2 Nov),
   shown only where there is more to see */
.ijh-strip { position: relative; }
.ijh-arr { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--ijh-ink); border: 0; box-shadow: 0 0 0 1px rgba(25, 24, 38, .1), 0 8px 22px -8px rgba(25, 24, 38, .35);
  opacity: 0; visibility: hidden; transform: translateY(-50%) scale(.9); transition: opacity .2s, transform .2s, visibility 0s .2s, background .2s, color .2s; }
.ijh-arr.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: 0s; }
.ijh-arr:hover { background: var(--ijh-ink); color: #fff; }
.ijh-arr:focus-visible { outline: 2px solid var(--ijh-blue); outline-offset: 2px; }
.ijh-arr--prev { left: 8px; } .ijh-arr--prev svg { transform: rotate(180deg); }
.ijh-arr--next { right: 8px; }
.ijh-grid--pic.is-drag { cursor: grabbing; scroll-snap-type: none; }
.ijh-grid--pic.is-drag .ijh-card--pic { pointer-events: none; }
.ijh-grid--pic img { -webkit-user-drag: none; }
/* the card in our style (Dasha, 2 Nov: CapCut's layout, our look): the white card of the landing's "What you get", a thin ink edge,
   the picture on a rounded plate inside it, the title in Sora and a grey line; a hover lifts it and grows the picture */
.ijh-card--pic { flex: 0 0 236px; scroll-snap-align: start; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 6px 14px; overflow: hidden; border-radius: 18px;
  background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(25, 24, 38, .08), 0 1px 2px rgba(25, 24, 38, .04);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s; }
.ijh-card--pic:hover, .ijh-card--pic[aria-current="page"] { background: #fff; }
.ijh-card--pic:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(25, 24, 38, .1), 0 2px 4px rgba(25, 24, 38, .05), 0 22px 44px -24px rgba(40, 44, 120, .4); }
.ijh-card--pic[aria-current="page"] { box-shadow: 0 0 0 1.5px #6E72F2, 0 1px 2px rgba(25, 24, 38, .04); }
.ijh-card--pic .pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: #f1f2f6; }
.ijh-card--pic .pic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(25, 24, 38, .07); pointer-events: none; }  /* a picture on white keeps its plate (Dasha, 2 Nov) */
.ijh-card--pic .pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.ijh-card--pic:hover .pic img { transform: scale(1.05); }
.ijh-card--pic .ic, .ijh-card--pic .go { display: none; }
.ijh-card--pic .tx { padding: 12px 8px 0; }  /* bigger words, the line in full on two lines (Dasha, 2 Nov: the small cards were hard to read) */
.ijh-card--pic b { font: 500 15.5px/1.25 'Sora', system-ui, sans-serif; letter-spacing: -.01em; color: var(--ijh-ink); }
.ijh-card--pic small { margin-top: 5px; font: 400 13.5px/1.4 'Sora', system-ui, sans-serif; color: #4f4d60; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* a phone: the menu button opens one panel with every page */
.ijh-all { display: none; }
@media (max-width: 960px) {
  .ijh-nav, .ijh-acts, #ijh-product, #ijh-resources { display: none; }  /* the wide panels too: hidden, they still widened a phone's page */
  .ijh-menu { display: inline-block; }
  .ijh-all { display: block; max-height: calc(100svh - 110px); overflow: auto; }
  /* the sections fold (Dasha, 29 Oct): a full-width heading row with a chevron at the right; a tap opens the list */
  .ijh-sec { border-top: 1px solid var(--ijh-line); } .ijh-acts-m + .ijh-sec { border-top: 0; }  /* no line between the two buttons and Features */
  .ijh-all h4 { margin: 0; }
  .ijh-tg { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin: 0; padding: 0 8px; border: 0; background: none; font: 500 15px/1.2 'Sora', system-ui, sans-serif; color: var(--ijh-ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ijh-tg .chev { width: 18px; height: 18px; color: var(--ijh-ink2); transition: transform .3s; } .ijh-sec.is-open .ijh-tg .chev { transform: rotate(180deg); }
  .ijh-all .ijh-grid { display: none; grid-template-columns: 1fr; gap: 2px; margin-bottom: 10px; } .ijh-sec.is-open .ijh-grid { display: grid; }
  .ijh-all .ijh-card { padding: 8px; } .ijh-all .ijh-card small { display: none; } .ijh-all .ijh-card .ic { width: 34px; height: 34px; }
  .ijh-all .ijh-card--pic, .ijh-all .ijh-card--pic[aria-current="page"] { flex-direction: row; align-items: center; gap: 12px; border: 0; background: transparent; border-radius: 10px; box-shadow: none; } .ijh-all .ijh-card--pic:hover { transform: none; box-shadow: none; background: rgba(25, 24, 38, .045); }
  .ijh-all .ijh-grid--pic { overflow: visible; margin: 0 0 10px; padding: 0; cursor: auto; -webkit-mask-image: none; mask-image: none; user-select: auto; -webkit-user-select: auto; }
  .ijh-all .ijh-card--pic .pic { display: none; } .ijh-all .ijh-card--pic .ic { display: grid; } .ijh-all .ijh-card--pic .go { display: block; } .ijh-all .ijh-card--pic .tx { padding: 0; }
  .ijh-links { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--ijh-line); }
  .ijh-links a { padding: 12px 8px; border-radius: 10px; font: 400 15px/1 'Sora', system-ui, sans-serif; color: var(--ijh-ink); text-decoration: none; }
  .ijh-links a:hover { background: rgba(25, 24, 38, .045); }
  .ijh-links .ijh-btn { justify-content: center; margin-top: 8px; height: 46px; }
}
@media (max-width: 640px) {
  .ijh { top: 8px; margin-top: 8px; } .ijh-bar { height: 56px; padding: 0 8px 0 14px; } .ijh-logo img { height: 24px; } .ijh-panel { top: 64px; }
  .ijh .ijh-news { margin-top: 6px; } .ijh .ijh-news-a { height: 36px; padding: 0 12px; font-size: 12.5px; } .ijh .ijh-news-t, .ijh .ijh-news-go { display: none; } }
/* the news bar (Dasha, 29 Oct): one glass pill under the bar, centred, a calendar tile, the event in bold, its date, the way to its
   page; a cross hides it, and the browser remembers that until the event changes (assets/header.js, the data-news id) */
.ijh-news { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; }
.ijh-news[hidden] { display: none; }
.ijh-news { transition: opacity .25s, transform .25s; } .ijh.is-down .ijh-news { opacity: 0; transform: translateY(-6px); pointer-events: none; }  /* the bar goes while the page is scrolled down, so the sticky header stays slim; it is back at the top */
.ijh-news-a { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 14px; border-radius: 999px; white-space: nowrap; text-decoration: none; color: var(--ijh-ink);
  font: 400 13.5px/1 'Sora', system-ui, sans-serif; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(25, 24, 38, .07), 0 10px 30px -18px rgba(25, 24, 38, .3); transition: box-shadow .2s, background .2s; max-width: calc(100% - 44px); overflow: hidden; }
.ijh-news-a:hover { background: #fff; box-shadow: 0 0 0 1px rgba(110, 114, 242, .45), 0 14px 32px -16px rgba(110, 114, 242, .3); }
.ijh-news-a b { font-weight: 500; }
.ijh-news-t { padding-left: 10px; border-left: 1px solid var(--ijh-line); color: var(--ijh-ink2); overflow: hidden; text-overflow: ellipsis; }
.ijh-news-go { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid var(--ijh-line); color: var(--ijh-blue); font-weight: 500; }
.ijh-news-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: -4px; border-radius: 8px; background: linear-gradient(135deg, #6E72F2, #8e6cff); color: #fff; box-shadow: 0 6px 14px -8px rgba(110, 114, 242, .8); }
.ijh-news-ic svg { width: 14px; height: 14px; }
.ijh-news-x { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ijh-ink2); font: 300 20px/1 'Sora', system-ui, sans-serif; cursor: pointer; }
.ijh-news-x:hover { background: rgba(25, 24, 38, .06); color: var(--ijh-ink); }

@media (prefers-reduced-motion: reduce) { .ijh-panel, .ijh-nav .chev, .ijh-card .go, .ijh-btn, .ijh-card--pic, .ijh-card--pic .pic img, .ijh-arr { transition: none; } }

/* the one footer: a slim row (tools/header.py), so a page that fits the screen keeps it in view */
.ijf { width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1344px; margin: 0 auto 14px; font-family: 'Sora', system-ui, sans-serif; }
.ijf-in { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; min-height: 52px; padding: 8px 14px 8px 20px; border-radius: 16px;
  background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .8); }
.ijf-co { font: 400 12.5px/1.3 'Sora', system-ui, sans-serif; color: #5e5c70; }
.ijf nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.ijf nav a { font: 400 13px/1.3 'Sora', system-ui, sans-serif; color: #5e5c70; text-decoration: none; }
.ijf nav a:hover, .ijf nav a[aria-current="page"] { color: #191826; }
.ijf-soc { display: flex; gap: 2px; }
.ijf-soc a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #5e5c70; transition: color .2s, background .2s; }
.ijf-soc a:hover { color: #191826; background: rgba(25, 24, 38, .05); }
.ijf a:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
@media (max-width: 760px) { .ijf { margin-bottom: 8px; } .ijf-in { justify-content: center; gap: 6px 10px; padding: 10px 12px; min-height: 0; }
  .ijf nav { margin: 0; width: 100%; justify-content: center; gap: 0 16px; } .ijf nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; }  /* a finger-sized row (Dasha, 22 Oct: a phone) */
  .ijf-co { order: 3; font-size: 12px; } .ijf-soc { order: 2; } .ijf-soc a { width: 40px; height: 40px; } }

/* iJewel Design (tools/header.py): a link out, in a new tab. A small arrow says so; on hover the words take iJewel Design's own
   gradient (ijewel.design's Explore button: #B052FF to #81C3FF) (Dasha, 22 Oct) */
.ijh .ijh-ijd { display: inline-flex; align-items: center; gap: 4px; }
.ijh .ijh-ijd .ijd-ar { font-size: .82em; line-height: 1; opacity: .55; transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.ijh .ijh-ijd .ijd-t { display: inline-block; padding-bottom: .16em; margin-bottom: -.16em; }  /* the gradient fills the descenders too (Dasha, 4 Nov: the g of Design was cut on hover) */
/* the gradient on the words' own box only: on the whole link it took the arrow too, and Safari drew the arrow twice (Dasha, 22 Oct) */
.ijh .ijh-ijd:hover .ijd-t, .ijh .ijh-ijd:focus-visible .ijd-t { color: #9b6cff; background-image: linear-gradient(92deg, #B052FF -22%, #81C3FF 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ijh .ijh-ijd:hover .ijd-ar, .ijh .ijh-ijd:focus-visible .ijd-ar { opacity: 1; color: #8aa9ff; }
.ijh .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* one line at every laptop width (Dasha, 22 Oct, after iJewel Design moved last): the tabs and the actions never wrap; between
   961 and 1180 px the tabs and the gaps get tighter so they all fit */
.ijh-nav > a, .ijh-nav > button, .ijh-acts a, .ijh-btn { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .ijh-bar { gap: 14px; }
  .ijh-nav > a, .ijh-nav > button { padding: 0 8px; font-size: 13.5px; }
  .ijh-acts { gap: 12px; }
  .ijh-btn { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .ijh-bar { gap: 10px; padding-left: 14px; }
  .ijh-nav > a, .ijh-nav > button { padding: 0 6px; font-size: 13px; }
  .ijh-logo img { height: 24px; }
}

/* the phone menu: Log in and Create free account at its top, side by side, staying in view while the menu scrolls (Dasha, 22 Oct:
   they sat at the end and needed a scroll) */
.ijh-acts-m { display: none; }
@media (max-width: 960px) {
  .ijh-acts-m { position: sticky; top: -1px; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; margin: -2px -2px 12px; padding: 2px 2px 12px; background: #fff; border-bottom: 1px solid var(--ijh-line); }
  .ijh-acts-m .ijh-btn { justify-content: center; height: 46px; font-size: 15px; }
  .ijh-btn--line { background: #fff; color: var(--ijh-ink) !important; box-shadow: inset 0 0 0 1px rgba(25, 24, 38, .16); }
  .ijh-btn--line:hover { background: #f6f6f9; }
}