/* ==========================================================================
   Teal on white. Squared corners, a fine rule grid, and one loud button per
   screen. Deliberately different in palette, shape and rhythm from anything
   else we have built.
   ========================================================================== */

:root {
  --brand:      #0F766E;
  --brand-dark: #0B5A54;
  --brand-wash: #ECFDF8;
  --brand-line: #B6E5DA;

  --ink:   #0B1220;
  --ink-2: #40506A;
  --ink-3: #71809A;
  --line:  #E4E8EF;
  --page:  #FFFFFF;
  --sunk:  #F7F9FC;

  --r: 8px;
  --r-lg: 12px;

  --e1: 0 1px 2px rgba(11,18,32,.06);
  --e2: 0 2px 8px rgba(11,18,32,.07), 0 1px 2px rgba(11,18,32,.05);
  --e3: 0 20px 48px -22px rgba(11,60,55,.35), 0 2px 8px rgba(11,18,32,.06);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.shell { width: min(1140px, 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) { .shell { width: calc(100% - 30px); } }

a { color: inherit; }
img, svg, video { max-width: 100%; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip:focus {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 200;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--r);
}

:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------------- bar */

.bar {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.7) blur(10px);
  border-block-end: 1px solid var(--line);
}

.bar__in { display: flex; align-items: center; gap: 10px; height: 60px; }

.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 750; font-size: 1rem; letter-spacing: -.02em;
  text-decoration: none; min-width: 0;
}

.mark__icon {
  width: 29px; height: 29px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--brand); color: #fff;
}

.mark__icon svg { width: 16px; height: 16px; }
.mark__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The auto margin sits on the nav rather than the language pill, so the
   links, the pill and the hamburger all group against the right edge and
   the logo keeps the left on its own. */
.menu { display: flex; gap: 1px; margin-inline-start: auto; overflow: hidden; }

.menu a {
  padding: 8px 12px; border-radius: var(--r);
  font-size: .9rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
}

.menu a:hover { background: var(--sunk); color: var(--ink); }
.menu a[aria-current="page"] { background: var(--brand-wash); color: var(--brand-dark); }

/* -------------------------------------------------------------- language */

.pick { position: relative; margin-inline-start: 14px; flex: none; }

.pick summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: .87rem; font-weight: 600; background: var(--page);
  white-space: nowrap;
}

.pick summary::-webkit-details-marker { display: none; }

/* The flag, label and caret are decoration. Letting them take the pointer
   means a tap can land on a child and the menu never opens. */
.pick summary > * { pointer-events: none; }

/* Real images rather than flag emoji: Windows ships no flag glyphs, so
   Chrome and Edge there render them as plain letter pairs. */
.flag {
  width: 21px; height: 14px; flex: none;
  border-radius: 2.5px; display: block;
  box-shadow: 0 0 0 1px rgba(11,18,32,.1);
  object-fit: cover;
}

.pick__caret { width: 14px; height: 14px; color: var(--ink-3); transition: transform .16s ease; }
.pick[open] .pick__caret { transform: rotate(180deg); }

.pick__menu {
  position: absolute; inset-block-start: calc(100% + 7px); inset-inline-end: 0;
  min-width: 186px; padding: 5px;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e3); display: grid; gap: 1px;
}

.pick__menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r);
  font-size: .89rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
}

.pick__menu a:hover { background: var(--sunk); color: var(--ink); }
.pick__menu a[aria-current="true"] { background: var(--brand-wash); color: var(--brand-dark); }


/* ------------------------------------------------------------ phone menu */

/* Hidden on desktop entirely. The bar keeps its normal links there. */
.sheet { display: none; }

.sheet summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--page);
}

.sheet summary::-webkit-details-marker { display: none; }
.sheet summary > * { pointer-events: none; }

.sheet__bars { display: grid; gap: 4px; width: 18px; }

.sheet__bars i {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .18s ease, opacity .18s ease;
}

/* The three bars fold into a cross while the panel is open. */
.sheet[open] summary { background: var(--brand-wash); border-color: var(--brand-line); }
.sheet[open] .sheet__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sheet[open] .sheet__bars i:nth-child(2) { opacity: 0; }
.sheet[open] .sheet__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full width sheet under the bar rather than a floating dropdown, so the
   rows are wide enough to hit with a thumb without aiming. */
.sheet__panel {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 56px;
  z-index: 70;
  background: var(--page);
  border-block: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px rgba(11,18,32,.4);
  padding: 6px;
  display: grid; gap: 2px;
  animation: sheet-in .18s ease-out;
}

@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }

.sheet__panel a {
  display: flex; align-items: center; gap: 13px;
  min-height: 54px; padding: 0 14px;
  border-radius: var(--r);
  border-inline-start: 3px solid transparent;
  font-size: .97rem; font-weight: 650; color: var(--ink);
  text-decoration: none;
}

.sheet__panel a:active { background: var(--sunk); }

.sheet__panel a[aria-current="page"] {
  background: var(--brand-wash);
  border-inline-start-color: var(--brand);
  color: var(--brand-dark);
}

.sheet__icon { width: 21px; height: 21px; flex: none; color: var(--brand); }
.sheet__go { width: 17px; height: 17px; flex: none; margin-inline-start: auto; color: var(--ink-3); }

/* --------------------------------------------------------------- crumbs */

.crumbs {
  border-block-end: 1px solid var(--line); background: var(--sunk);
  font-size: .83rem; color: var(--ink-3);
}

.crumbs .shell { display: flex; gap: 8px; align-items: center; padding-block: 10px; }
.crumbs a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ head */

.head { padding-block: clamp(30px, 5vw, 58px) clamp(26px, 4vw, 46px); }

/* One centred column on every screen: headline, then the line under it,
   then the box. The tool is the thing people came for, so nothing sits
   beside it competing for the eye. */
.head__in { display: grid; gap: clamp(22px, 3.5vw, 34px); justify-items: center; text-align: center; }

/* Wide enough that the headline stays on one line on a desktop. A 40ch cap
   here was breaking "Instagram Video Downloader" across three lines. */
.head__text { max-width: min(920px, 100%); }

/* Guides read as an article, so their heading stays left aligned. */
.head--guide .head__in { justify-items: start; text-align: start; }
.head--guide { padding-block: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 30px); }
.head--guide .head__text { max-width: 62ch; }

h1 {
  font-size: clamp(1.95rem, 5vw, 3.1rem);
  line-height: 1.1; letter-spacing: -.035em; font-weight: 800;
  margin: 0 0 14px;
  /* On a narrow screen it has to wrap. Balance splits it evenly instead of
     leaving one word stranded on the last line. */
  text-wrap: balance;
}

.head--guide h1 { font-size: clamp(1.8rem, 4.2vw, 2.5rem); }

.head__lede {
  font-size: 1.02rem; color: var(--ink-2);
  margin: 0 auto; max-width: 62ch;
  text-wrap: pretty;
}
.head--guide .head__lede { margin-inline: 0; }

.stamp { margin: 16px 0 0; font-size: .82rem; color: var(--ink-3); }

/* ------------------------------------------------------------------ tool */

.tool {
  width: min(660px, 100%); text-align: start;
  background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e3); padding: 18px;
}

.tool__row { display: grid; gap: 9px; }
@media (min-width: 560px) { .tool__row { grid-template-columns: 1fr auto; } }

.tool input {
  width: 100%; min-height: 48px; padding: 0 15px;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--sunk); font: inherit; font-size: 1rem; color: var(--ink);
}

.tool input::placeholder { color: var(--ink-3); }
.tool input:focus { outline: none; border-color: var(--brand); background: var(--page); }

/* Solid slab with a darker edge underneath, so it reads as a raised key
   that presses down when clicked. */
.tool button[data-go] {
  position: relative;
  min-height: 48px; padding: 0 26px;
  border: 0; border-radius: var(--r);
  background: var(--brand); color: #fff;
  font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--brand-dark), 0 6px 14px -8px rgba(15,118,110,.65);
  transition: transform .09s ease, box-shadow .09s ease, background .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}

.tool button[data-go]:hover:not([disabled]) { background: #10837A; }

.tool button[data-go]:active:not([disabled]) {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--brand-dark), 0 2px 6px -4px rgba(15,118,110,.6);
}

.tool button[data-go][disabled] {
  background: #A9BDBA; color: #F2F6F5;
  box-shadow: 0 3px 0 #93A9A6;
  cursor: not-allowed;
}

.btn__spin { display: none; }

.tool button[data-go].is-loading .btn__label { opacity: .45; }

.tool button[data-go].is-loading .btn__spin {
  display: block; width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}

.tool__hint { margin: 10px 2px 0; font-size: .81rem; color: var(--ink-3); }
.tool__error { margin: 14px 0 0; font-size: .91rem; }

.tool__error {
  color: #9F1239; background: #FFF1F4; border: 1px solid #FBCFDA;
  border-radius: var(--r); padding: 11px 14px;
}

.spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- result */

.result { margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--line); }
.result__media { border-radius: var(--r); overflow: hidden; background: #0B1220; }
.result video { width: 100%; max-height: 320px; display: block; }
.result__title {
  margin: 14px 2px 4px;
  font-size: 1rem; font-weight: 700; line-height: 1.4;
  color: var(--ink); letter-spacing: -.01em;
}

.result__title:empty { display: none; }

.files { display: grid; gap: 7px; }

.file {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 16px;
  border: 0; border-radius: var(--r);
  background: var(--brand); color: #fff;
  font-size: .95rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 3px 0 var(--brand-dark), 0 6px 14px -10px rgba(15,118,110,.55);
  transition: transform .09s ease, box-shadow .09s ease, background .15s ease;
}

.file:hover { background: #10837A; }

.file:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--brand-dark);
}

.file__arrow { width: 17px; height: 17px; flex: none; color: #fff; }

.file__tag {
  margin-inline-start: auto; font-size: .69rem; font-weight: 700; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,.22); color: #fff;
}

.file.is-busy { pointer-events: none; }
.file.is-busy .file__arrow { display: none; }
.file__spin { display: none; }
.file.is-busy .file__spin {
  display: block; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}

.plain {
  background: none; border: 0; padding: 0; margin-block-start: 13px;
  font: inherit; font-size: .87rem; font-weight: 650; color: var(--brand-dark);
  cursor: pointer; text-decoration: none;
}

.plain:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- steps */

.steps { padding-block: clamp(32px, 5vw, 62px); background: var(--sunk); border-block: 1px solid var(--line); }
/* A 24ch cap here was snapping this heading after the second word. It is
   centred over a three column grid, so it gets the grid's width. */
.steps > .shell > h2 { margin: 0 0 clamp(22px, 3.5vw, 36px); max-width: 100%; }

.steps__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 780px) { .steps__grid { grid-template-columns: repeat(3, 1fr); } }

.step {
  background: var(--page); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e1);
  padding: 15px 17px 20px;
}

.step img { width: 100%; height: auto; display: block; border-radius: var(--r); margin-block-end: 15px; }

.step__n {
  display: grid; place-items: center; width: 25px; height: 25px; margin-block-end: 8px;
  border-radius: 6px; background: var(--brand); color: #fff;
  font-size: .78rem; font-weight: 750;
}

.step h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.step p { margin: 0; font-size: .9rem; color: var(--ink-2); }


/* ----------------------------------------------------- compare (Facebook) */

.compare { padding-block: clamp(30px, 5vw, 56px); }
.compare h2 { margin-block-end: 18px; }

.compare table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  font-size: .93rem;
}

.compare th, .compare td { padding: 13px 16px; text-align: start; border-block-end: 1px solid var(--line); }
.compare thead th { background: var(--brand-wash); color: var(--brand-dark); font-weight: 700; }
.compare tbody th { font-weight: 650; color: var(--ink); width: 34%; }
.compare td { color: var(--ink-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-block-end: 0; }

/* The Facebook page lays its steps out as full width rows rather than the
   three column grid the Instagram page uses, so the two do not read as the
   same template with the words swapped. */
[data-page="facebook"] .steps__grid { grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 780px) {
  [data-page="facebook"] .steps__grid { grid-template-columns: 1fr; }

  /* The card's four children are laid out explicitly. Left to the grid's
     own flow they fill cells in order, which puts the number beside the
     picture and the text under it. */
  [data-page="facebook"] .step {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 26px;
    align-content: center;
    padding: 20px 24px;
  }

  [data-page="facebook"] .step img {
    grid-column: 1; grid-row: 1 / -1;
    align-self: center; margin-block-end: 0;
  }

  [data-page="facebook"] .step__n { grid-column: 2; grid-row: 1; margin-block-end: 8px; }
  [data-page="facebook"] .step h3 { grid-column: 2; grid-row: 2; font-size: 1.08rem; }
  [data-page="facebook"] .step p  { grid-column: 2; grid-row: 3; }
}

@media (max-width: 600px) {
  .compare table { font-size: .86rem; }
  .compare th, .compare td { padding: 10px 11px; }
  .compare tbody th { width: 40%; }
}

/* ------------------------------------------------------------------ text */

h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.66rem);
  line-height: 1.26; letter-spacing: -.025em; font-weight: 750; margin: 0 0 11px;
}

/* Where a heading has to run onto a second line, split it evenly rather
   than leaving one stranded word underneath. */
h2, h3 { text-wrap: balance; }

/* 72ch here left the body copy floating in the middle of a wide screen.
   It now uses the same width as the rest of the page and lines up with the
   section above it. */
.text { padding-block: clamp(36px, 5.5vw, 64px); }

/* Body copy runs the full width of the page container, matching the width
   of the step cards and the table above it. */
.text section { max-width: none; }
.text p { max-width: none; }
.text section + section { margin-block-start: 36px; }
.text p { margin: 0 0 14px; color: var(--ink-2); }

/* ------------------------------------------------------------------- FAQ */

.faq { margin-block-start: 50px; }
.faq > h2 { margin-block-end: 6px; }
.faq details { border-block-end: 1px solid var(--line); }

.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding-block: 15px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: ""; flex: none; margin-inline-start: auto;
  width: 10px; height: 10px;
  border-inline-end: 2.3px solid var(--brand);
  border-block-end: 2.3px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq h3 { margin: 0; font-size: .97rem; font-weight: 650; letter-spacing: -.01em; }
.faq details p { margin: 0 0 17px; font-size: .92rem; color: var(--ink-2); max-width: none; }

/* ------------------------------------------------------------------ next */

.next { margin-block-start: 50px; }
.next__grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .next__grid { grid-template-columns: 1fr 1fr; } }

.next__card {
  display: block; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--page); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.next__card:hover { border-color: var(--brand-line); box-shadow: var(--e2); }
.next__card h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.next__card p { margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); }
.next__go { font-size: .85rem; font-weight: 650; color: var(--brand-dark); }

/* ------------------------------------------------------------------ foot */

.foot { border-block-start: 1px solid var(--line); background: var(--sunk); padding-block: 22px; }

/* Copyright on one side, legal links on the other. */
.foot__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 24px;
}

.foot__c { margin: 0; font-size: .86rem; color: var(--ink-3); }

.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }

.foot__legal a {
  font-size: .86rem; color: var(--ink-3); text-decoration: none;
}

.foot__legal a:hover { color: var(--brand-dark); text-decoration: underline; }

@media (max-width: 640px) {
  .foot__in { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .foot__legal { gap: 10px 18px; }
}

/* ---------------------------------------------------------------- toasts */

.toasts {
  position: fixed; inset-block-start: 72px; inset-inline-end: 16px; z-index: 150;
  display: grid; gap: 8px; justify-items: end; pointer-events: none;
}

.toast {
  max-width: min(88vw, 320px); padding: 12px 18px; border-radius: var(--r);
  background: var(--ink); color: #fff;
  font-size: .87rem; font-weight: 650; box-shadow: var(--e3);
}

.toast.is-out { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 860px) {
  .bar__in { height: 56px; gap: 8px; }

  /* The inline links give way to the sheet; the language pill stays put. */
  .menu { display: none; }
  .sheet { display: block; }

  .pick { margin-inline-start: auto; }
  .pick summary { padding: 10px 11px; }
  .pick__now { display: none; }
}

@media (max-width: 620px) {
  .mark { font-size: .92rem; }
  .tool { padding: 14px; }
  .toasts { inset-block-start: 66px; inset-inline: 15px auto; justify-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .spin, .file__spin { animation-duration: 2.4s; }
  .pick__caret, .faq summary::after, .file, .next__card, .tool button[data-go] { transition: none; }
  .sheet__bars i { transition: none; }
  .sheet__panel { animation: none; }
}