/* ==========================================================================
   Corbett product page components
   Added for /backup-emails/ and reusable across the backup + converter family.
   Nothing here overrides an existing class in style.css.
   ========================================================================== */

/* --- 0. Tokens ----------------------------------------------------------- */
/* One place for the colours, radii and shadows the page uses.

   The body colour matters most. style.css leans on Bootstrap's var(--cb-body) for
   every paragraph, which measures 4.68:1 on white. That scrapes AA and reads
   washed out over the long paragraphs on this page. #3f4a66 measures about
   9:1 at the same weight, so the copy holds together without going pure black. */

:root{
  --cb-head:#1c2547;            /* headings */
  --cb-body:#3f4a66;            /* reading copy */
  --cb-muted:#626c86;           /* captions, labels, fine print */
  --cb-line:#d9e1ee;            /* card and divider borders */
  --cb-line-soft:#e8edf6;       /* inner rules */
  --cb-surface:#fbfcfe;         /* tinted panels */
  --cb-link:#1669c4;
  --cb-gold:#a68534;
  --cb-gold-soft:#8a6a12;
  --cb-green:#008a4a;
  --cb-navy:#0b1b3d;
  --cb-gold-line:#ecd9a8;       /* eyebrow pill border on light */
  --cb-on-navy-line:rgba(255,255,255,.26);  /* borders on the navy hero */
  --cb-hero-gold:#ffd66b;
  /* House rule: never a thicker border on one side only. A 4px left bar and a
     14px radius cannot meet cleanly, and the join leaves a notch at the top
     left corner. Emphasis comes from fill, icon colour or shadow instead. */
  --cb-radius:14px;
  --cb-radius-sm:8px;
  --cb-radius-pill:35px;
  --cb-radius-lg:16px;
  --cb-shadow:0 1px 2px rgba(20,20,60,.05), 0 10px 30px -14px rgba(20,20,60,.22);
}

/* Theme classes used on this page, pinned to the tokens above so the page
   does not mix two navies and two greys. */
.text_blue{color:var(--cb-head)!important}
.text_orange{color:#c63!important}   /* used on this page, never defined in style.css */
.text-white-50{color:rgba(255,255,255,.72)!important}

/* style.css gives .bg-header a 5rem top pad on desktop and 10rem under
   991px, so the hero clears the fixed navbar. The two CTA bands reuse
   .bg-header only for its colour and background image; they sit mid page and
   must not inherit that clearance. Two classes, so it beats the theme rule
   whatever the load order. */
.bg-header.cta-band{
  padding-top:0!important;
  padding-bottom:0!important;
}

/* --- 1. Hero ------------------------------------------------------------ */

.hero-brand-pill{
  display:inline-block;
  font-family:"Manrope",sans-serif;
  font-size:12px;
  font-weight:500;
  color:#ffd66b;
  text-transform:uppercase;
  letter-spacing:2.5px;
  padding:8px 26px;
  border:2px solid var(--cb-hero-gold);
  border-radius:var(--cb-radius-pill);
}

.hero-lede{
  max-width:47rem;
  margin:0 auto 1.4rem;
  font-size:1.05rem;
  line-height:1.65;
  color:#dbe4f2;
}

.btn-hero-primary{
  padding:17px 42px;
  font-size:19px;
  border-radius:12px;
}

.btn-hero-secondary{
  padding:13px 32px;
  font-size:16px;
  border-radius:12px;
  background:transparent;
  border:2px solid var(--cb-gold);
  color:#e8c86a;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

/* style.css sets .bg-header a:hover{color:#ebaf01}, which is 0,2,1 and beats
   a plain .btn-hero-secondary:hover at 0,2,0. On hover the label was turning
   gold on a gold fill. Qualifying with the parent lifts this to 0,3,1. */
.bg-header a.btn-hero-secondary:hover,
.bg-header a.btn-hero-secondary:focus-visible{
  background:var(--cb-gold);
  border-color:#c19d40;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(166,133,52,.75);
}
.bg-header a.btn-hero-secondary:active{
  transform:translateY(0);
  box-shadow:none;
}

/* style.css gives .btn-green and .btn-brown an ::after sheet that sweeps across
   on hover at skewX(45deg), flipping the label to the brand colour on white.
   That wipe reads as a glitch, and on a white card the button appears to lose
   its fill entirely. It is switched off on every brand button these pages use,
   on the navy bands and inside the spec cards alike, so one button never
   behaves differently from the next. Buttons elsewhere on the site keep the
   sweep, since only these selectors are touched. */

.bg-header .btn-green::after,
.bg-header .btn-brown::after,
.spec-card .btn-green::after,
.spec-card .btn-brown::after{
  display:none;
}

.bg-header .btn-green,
.spec-card .btn-green,
.bg-header .btn-brown,
.spec-card .btn-brown{
  transition:background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.bg-header .btn-green:hover,
.bg-header .btn-green:focus-visible,
.spec-card .btn-green:hover,
.spec-card .btn-green:focus-visible{
  background-color:#00713d;
  border-color:#00713d;
  color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(0,138,74,.75);
}
.bg-header .btn-green:hover .svg,
.spec-card .btn-green:hover .svg{fill:#fff}
.bg-header .btn-green:active,
.spec-card .btn-green:active{transform:translateY(0);box-shadow:none}

.bg-header .btn-brown:hover,
.bg-header .btn-brown:focus-visible,
.spec-card .btn-brown:hover,
.spec-card .btn-brown:focus-visible{
  background-color:#8d6f26;
  border-color:#8d6f26;
  color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(166,133,52,.75);
}
.bg-header .btn-brown:hover .svg,
.spec-card .btn-brown:hover .svg{fill:#fff}
.bg-header .btn-brown:active,
.spec-card .btn-brown:active{transform:translateY(0);box-shadow:none}

.hero-rating{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 9px;
  font-size:15px;
  color:#fff;
}
/* Gold reads better than amber on the navy band. */
.hero-rating .star{fill:var(--cb-hero-gold)}
.hero-rating .count{color:#8fa6c8}

.hero-offline{font-size:15px;color:#a8ecc8}

.hero-trust{font-size:14px;color:#c3cfe3}
.hero-trust a{color:#fbbc05}

.hero-price{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1rem;
  justify-content:center;
  align-items:center;
  font-family:"Manrope",sans-serif;
  font-size:14px;
  color:#fff;
}
.hero-price-tag{
  background:rgba(255,255,255,.12);
  border:1px solid var(--cb-on-navy-line);
  border-radius:var(--cb-radius-sm);
  padding:6px 14px;
}


/* --- 1b. Hero: fold-fit adjustments ------------------------------------- */
/* The navbar is fixed-top and about 118px tall, so the hero has to start
   below it or the breadcrumb slides underneath. That clearance is held in a
   variable; short viewports trim the copy spacing instead of the clearance. */

:root{--corbett-header-h:132px}

.hero-tight{
  padding-top:calc(var(--corbett-header-h) + 14px);
}

.hero-crumb{
  padding-top:0;
  padding-bottom:.35rem;
}

.hero-tight .hero-lede{
  margin-bottom:1rem;
  line-height:1.6;
}

/* Three jump links, sat on one line instead of stacked boxes with captions.
   Saves roughly 36px of height over the old .product-vs tiles. */
.hero-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content:center;
}
.hero-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--cb-on-navy-line);
  border-radius:var(--cb-radius-sm);
  padding:7px 16px;
  font-size:13px;
  color:#dbe4f2;
  text-decoration:none;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.hero-links a:hover,
.hero-links a:focus-visible{
  border-color:var(--cb-hero-gold);
  background:rgba(255,255,255,.07);
  color:#fff;
}
.hero-links i{font-size:16px;color:#7fb2f0}
.hero-links .text-danger-emphasis{color:#ff5b5b!important}

/* Short desktop viewports: shrink the headline and the gaps, never the
   header clearance, so the breadcrumb always stays visible. */
@media (min-width:992px) and (max-height:900px){
  .hero-tight .display-4{font-size:3rem}
  .hero-tight .hero-lede{margin-bottom:.8rem}
  .hero-tight .hero-brand-pill{padding:6px 22px}
}
@media (min-width:992px) and (max-height:820px){
  .hero-tight{padding-top:calc(var(--corbett-header-h) + 6px)}
  .hero-tight .display-4{font-size:2.7rem}
  .hero-tight .hero-lede{margin-bottom:.7rem;line-height:1.55}
  .hero-tight .container.pb-4{padding-bottom:1rem!important}
}

/* The navbar collapses on mobile, so the desktop clearance is wrong there. */
@media (max-width:991.98px){
  .hero-tight{padding-top:5.5rem}
}

/* --- 2. Provider marquee ------------------------------------------------ */
/* Moved out of the page's inline <style> so the whole family can share it.  */

.marquee-wrapper{
  overflow:hidden;
  user-select:none;
  display:flex;
  white-space:nowrap;
  position:relative;
  padding:20px 0;
}

.marquee-content-solutions{
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:space-around;
  min-width:100%;
  animation:scroll-left 30s linear infinite;
}

@keyframes scroll-left{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* the tiles are links now, so the strip has to stop when it is pointed at */
.marquee-wrapper:hover .marquee-content-solutions,
.marquee-wrapper:focus-within .marquee-content-solutions{
  animation-play-state:paused;
}

.provider-tile{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius-lg);
  width:160px;
  padding:25px;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  text-decoration:none!important;
  display:block;
  height:100%;
  text-align:center;
}
.provider-tile:hover{
  transform:translateY(-10px) rotateX(5deg);
  background:#fff;
  border-color:#f7a400;
  box-shadow:0 15px 35px rgba(20,23,108,.1);
}
.provider-tile:focus-visible{
  outline:3px solid #f7a400;
  outline-offset:3px;
}

.provider-logo{
  transition:transform .3s ease;
  max-height:45px;
  width:auto;
}
.provider-tile:hover .provider-logo{
  transform:scale(1.1);
}

/* The tiles are anchors now, so the theme link colour was bleeding into the
   provider name and only on the first marquee copy. Pin it. */
.provider-tile p,
.provider-tile:hover p,
.provider-tile:focus p{
  color:var(--cb-head)!important;
}


/* --- 2b. Also covered, and the IMAP note -------------------------------- */
/* Same shapes as before. Only colour and borders are doing the work here. */

.also-covered{
  max-width:52rem;
  color:var(--cb-body);
  font-size:14px;
  line-height:2.1;
}
.also-covered > span{
  font-weight:600;
  color:var(--cb-head);
}
.also-covered a{
  color:var(--cb-link);
  text-decoration:none;
  border-bottom:1px solid var(--cb-line);
  padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.also-covered a:hover,
.also-covered a:focus-visible{
  color:#0d4d94;
  border-bottom-color:#f7a400;
}

.imap-note{
  background:var(--cb-surface);
  border:1px solid var(--cb-line);
}
.imap-note i{color:#f7a400}
.imap-note p{
  color:var(--cb-body);
  font-size:.9rem;
}

/* --- 3. Type scale ------------------------------------------------------ */
/* One ladder for the whole page. Before this there were fourteen inline
   font-size overrides and two competing eyebrow treatments. */

/* 3.1  Section eyebrow, above every h2 and above each feature h3.
        Set in a pill so it carries weight next to a display-5 heading,
        and so it echoes the Corbett pill in the hero. */
.sec-eyebrow{
  display:block;
  margin-bottom:.85rem;
  line-height:1;
}
.sec-eyebrow-pill{
  display:inline-block;
  font-size:.9375rem;      /* 15px, up from 12px */
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:1.8px;
  color:var(--cb-gold-soft);
  background:#fdf6e6;
  border:1px solid var(--cb-gold-line);
  border-radius:var(--cb-radius-pill);
  padding:7px 22px;
}

/* On the navy CTA bands the warm pill has no contrast, so it inverts. */
.sec-eyebrow-light .sec-eyebrow-pill{
  color:var(--cb-hero-gold);
  background:transparent;
  border:2px solid var(--cb-hero-gold);
}

@media (max-width:575.98px){
  .sec-eyebrow-pill{
    font-size:.8125rem;
    letter-spacing:1.4px;
    padding:6px 16px;
  }
}

/* 3.2  Section intro, the line under an h2 */
.sec-lede{
  font-size:1.0625rem;   /* 17px */
  line-height:1.7;
  color:var(--cb-body);
  max-width:44rem;
  margin:1rem auto 0;
}

/* 3.3  Feature heading, between the section h2 and the body copy */
.feat-title{
  font-size:1.95rem;     /* 31px */
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.4px;
  color:var(--cb-head);
  margin-bottom:.9rem;
}

/* 3.4  Feature body copy */
.body-copy{
  font-size:1.0625rem;   /* 17px */
  line-height:1.8;
  color:var(--cb-body);
}

/* 3.5  Card heading */
.card-title-sm{
  font-size:1.05rem;     /* 16.8px */
  font-weight:700;
  line-height:1.4;
  color:var(--cb-head);
  margin-bottom:.65rem;
}


/* 3.6  Card body copy */
.card-copy{
  font-size:.9688rem;
  line-height:1.75;
  color:var(--cb-body);
}

/* 3.7  Supporting notes under a block */
.fine-print{
  font-size:.875rem;     /* 14px */
  line-height:1.7;
  color:var(--cb-body);
}
.fine-print-light{
  font-size:.875rem;
  line-height:1.7;
  color:rgba(255,255,255,.65);
}

/* 3.8  Call to action heading, sized between h2 and .feat-title */
.cta-title{
  font-size:1.75rem;     /* 28px */
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.3px;
}

/* 3.9  Bullet lists inside feature blocks */
.list-check li{
  font-size:1rem;
  line-height:1.75;
  color:var(--cb-body);
  margin-bottom:.5rem;
}

/* Filled green disc with a white tick, replacing the bare blue tick that
   style.css ships.

   The list item stays a block, not a flex container. Several of these bullets
   contain inline links, and flex would promote every one of them to its own
   flex item and space them out across the row.

   Indentation comes from padding-left on the li, so text that wraps lines up
   under itself rather than under the disc. The disc is centred on the first
   line with top:calc, which tracks the font size instead of a fixed offset.

   The SVG is fully percent-encoded; unencoded angle brackets and quotes
   inside a data URI are rejected by some browsers. */

.list-check.list-check-green{
  list-style:none;
  padding-left:0;
  margin-left:0;
}

.list-check.list-check-green li{
  display:block;
  position:relative;
  padding-left:32px;
  margin:0 0 .7rem;
}
.list-check.list-check-green li:last-child{margin-bottom:0}

.list-check.list-check-green li:before{
  content:"";
  position:absolute;
  left:0;
  /* centre the 20px disc on the first line of a 1.7 line-height row */
  top:calc((1.7em - 20px) / 2);
  width:20px;
  height:20px;
  margin:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22%23008a4a%22%2F%3E%3Cpath%20d%3D%22M5.6%2010.2l2.9%202.9%206-6.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-size:20px 20px;
}

/* 3.10 FAQ */
.faq-q{
  font-size:1.05rem;
  font-weight:700;
  color:var(--cb-head);
  line-height:1.5;
}
.faq-a{
  font-size:1rem;
  line-height:1.8;
  color:var(--cb-body);
}


/* Step the scale down once on tablet and once more on phones, rather than
   letting each block shrink on its own. */
@media (max-width:991.98px){
  .feat-title{font-size:1.7rem}
  .cta-title{font-size:1.55rem}
  .sec-lede{font-size:1rem}
}
@media (max-width:575.98px){
  .feat-title{font-size:1.5rem}
  .cta-title{font-size:1.4rem}
  .body-copy,.faq-a,.list-check li{font-size:.9375rem}
  .faq-q{font-size:1rem}
}

/* --- 3b. Feature block imagery ------------------------------------------ */

.feat-shot{
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius);
  box-shadow:0 8px 24px rgba(15,30,60,.08);
}

/* --- 4. Specification cards --------------------------------------------- */

.spec-card{
  background:#fff;
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius-lg);
  box-shadow:var(--cb-shadow);
  padding:26px 28px;
  height:100%;
  /* The three requirement cards hold different amounts of content. Stacking
     them lets the last child take the slack, so the row bottoms out level
     instead of leaving a gap under the shortest card. */
  display:flex;
  flex-direction:column;
}
.spec-card > dl{flex:1 1 auto}
.spec-card > .btn{margin-top:auto}
.spec-card > .doc-links{margin-top:auto;padding-top:.5rem}

.spec-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:11px 0;
  border-bottom:1px solid var(--cb-line-soft);
  font-size:14.5px;
}
.spec-row:last-child{border-bottom:0}
.spec-row dt{
  color:var(--cb-body);
  font-weight:400;
  margin:0;
  flex:0 0 38%;
}
.spec-row dd{
  color:var(--cb-head);
  font-weight:600;
  margin:0;
  text-align:right;
}


/* --- 5. Responsive ------------------------------------------------------ */

@media (max-width:767.98px){
  .btn-hero-primary,
  .btn-hero-secondary{
    width:100%;
    margin-bottom:.6rem;
  }
  .spec-row{flex-direction:column;gap:.15rem}
  .spec-row dd{text-align:left}
  .provider-tile{width:140px;padding:18px}
}


/* --- 6. Motion preferences ---------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .marquee-content-solutions{animation:none}
  .marquee-wrapper{overflow-x:auto}
  .provider-tile,
  .provider-logo{transition:none}
  .provider-tile:hover{transform:none}
}

/* --- 6. Recognition panel ----------------------------------------------- */
/* Six directory cards plus a separate award row used to run to about 640px
   of height. Same logos and the same claims, one panel, roughly 260px. */

.recognition-panel{
  max-width:58rem;
  border:1px solid var(--cb-line);
  border-radius:16px;
  padding:24px 22px;
  background:var(--cb-surface);
}

.platform-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  align-items:end;
}
.platform-strip li{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* Every logo gets an identical 120x46 box and is scaled to fit inside it
   with object-fit. Without the fixed box, height:auto lets a wide wordmark
   sprawl while a circular mark shrinks, so the six read as different sizes
   even though they share a height. */
.platform-strip img{
  display:block;
  width:100%;
  max-width:120px;
  height:46px;
  object-fit:contain;
  object-position:center;
  margin:0 auto 10px;
}
.platform-strip span{
  display:block;
  font-size:.78rem;
  font-weight:600;
  line-height:1.35;
  color:var(--cb-head);
}

.recognition-rule{
  height:1px;
  background:var(--cb-line);
  margin:22px 0 20px;
}

.award-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:26px;
}
.award-strip img{
  height:66px;
  width:auto;
}

@media (max-width:991.98px){
  .platform-strip{grid-template-columns:repeat(3,1fr);gap:20px}
  .platform-strip img{height:42px;max-width:104px}
  .award-strip{gap:18px}
  .award-strip img{height:56px}
}
@media (max-width:575.98px){
  .platform-strip{grid-template-columns:repeat(2,1fr)}
  .platform-strip img{height:40px;max-width:96px}
  .recognition-panel{padding:18px 14px}
  .award-strip img{height:48px}
}

/* --- 7. Document links --------------------------------------------------- */
/* Four support links in the requirements card. Bare gold text links read as
   an afterthought; an icon and a divided row make each one scannable, and
   the PDF tag warns before the click that a file downloads. */

.doc-links li + li{
  border-top:1px solid var(--cb-line-soft);
}
.doc-links a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 2px;
  font-size:.9375rem;
  color:var(--cb-head);
  text-decoration:none;
  transition:color .2s ease;
}
.doc-links a:hover,
.doc-links a:focus-visible{
  color:var(--cb-link);
}
.doc-links i{
  font-size:1rem;
  color:var(--cb-gold);
  flex:0 0 auto;
  transition:color .2s ease;
}
.doc-links a:hover i{color:var(--cb-link)}
.doc-links span{flex:1 1 auto}
.doc-links em{
  flex:0 0 auto;
  font-style:normal;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--cb-muted);
  border:1px solid var(--cb-line);
  border-radius:4px;
  padding:1px 6px;
}

/* --- 8. FAQ ------------------------------------------------------------- */
/* Every answer is open. These are ten short answers about what the software
   does, so hiding them behind a click only adds a step and keeps the text
   out of the first paint. Each pair sits in its own bordered card, with a
   Q and an A marker so the two roles are readable at a glance. */

.faq-list{
  display:grid;
  gap:14px;
}

.faq-item{
  border:1px solid var(--cb-line);
  box-shadow:var(--cb-shadow);
  border-radius:var(--cb-radius);
  padding:20px 22px;
  background:#fff;
}

/* Ten identical white cards read as one grey slab. The whole 1px frame takes
   a rotating brand colour, so each card is separable at a glance. Every hue
   below is already used elsewhere on this page, nothing new is introduced. */
.faq-item:nth-child(5n+1){border-color:#9dbde4}   /* link blue   */
.faq-item:nth-child(5n+2){border-color:#8ecbac}   /* brand green */
.faq-item:nth-child(5n+3){border-color:#d8c48a}   /* brand gold  */
.faq-item:nth-child(5n+4){border-color:#a9b1c9}   /* head navy   */
.faq-item:nth-child(5n+5){border-color:#e3b295}   /* accent      */

/* The Q and A markers are drawn by CSS, not written into the markup. When
   they were spans inside the h3, the heading text read "QWhat does the free
   demo include?" to a crawler and to a screen reader. */
.faq-q,
.faq-a{
  position:relative;
  padding-left:38px;
  margin:0;
}
.faq-q{margin-bottom:12px}

.faq-q:before,
.faq-a:before{
  position:absolute;
  left:0;
  top:.15rem;
  width:26px;
  height:26px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Manrope",sans-serif;
  font-size:.8125rem;
  font-weight:700;
  line-height:1;
  color:#fff;
}
.faq-q:before{
  content:"Q";
  background:var(--cb-head);
}
.faq-a:before{
  content:"A";
  background:var(--cb-green);
}

.faq-item a{color:var(--cb-link)}

@media (max-width:575.98px){
  .faq-item{padding:16px 15px;border-radius:12px}
  .faq-q,.faq-a{padding-left:32px}
  .faq-q:before,.faq-a:before{width:23px;height:23px;font-size:.75rem}
}

/* --- 9. Reviews --------------------------------------------------------- */
/* The old cards led with a stock avatar and a name, so every card opened the
   same way and the reader had to get through four lines before learning what
   the review was about. These lead with the rating and a one line summary of
   the reviewer's own point, and put the name at the bottom where attribution
   belongs. */

.review-summary{
  max-width:44rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius);
  background:var(--cb-surface);
  padding:22px 26px;
  margin-bottom:26px;
  box-shadow:var(--cb-shadow);
}
.review-score{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding-right:24px;
  border-right:1px solid var(--cb-line);
}
.review-score-num{
  font-size:2.6rem;
  font-weight:700;
  color:var(--cb-head);
  line-height:1;
  letter-spacing:-1px;
}
.review-score-of{
  font-size:.75rem;
  color:var(--cb-muted);
}
.review-summary-note{
  flex:1 1 20rem;
  font-size:.9375rem;
  line-height:1.7;
  color:var(--cb-body);
}
.review-summary-note strong{color:var(--cb-head)}

/* Drawn stars rather than the U+2605 character. The glyph renders at a
   different weight and baseline in every font, which is why the row looked
   thin and misaligned. An SVG path is identical everywhere and can be sized
   properly, which matters on the one block of the page that is pure trust. */
.review-stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1;
}
.review-stars .star{
  fill:#f5a623;
  flex:0 0 auto;
}
.review-stars .star-off{fill:#dfe5ee}
.review-stars-sm{gap:3px}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.review-card{
  border:1px solid var(--cb-line);
  box-shadow:var(--cb-shadow);
  border-radius:var(--cb-radius-lg);
  padding:24px 22px;
  background:#fff;
  display:flex;
  flex-direction:column;
}

.review-headline{
  font-size:1.05rem;
  font-weight:700;
  line-height:1.45;
  color:var(--cb-head);
  margin-bottom:12px;
}

.review-body{
  font-size:.9688rem;
  line-height:1.8;
  color:var(--cb-body);
  flex:1 1 auto;
  margin-bottom:0;
}

.review-author{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--cb-line-soft);
}
.review-avatar{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--cb-line-soft);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Manrope",sans-serif;
  font-weight:700;
  font-size:.875rem;
  color:var(--cb-head);
}
.review-name{
  font-weight:700;
  color:var(--cb-head);
  font-size:.9375rem;
  line-height:1.35;
}
.review-name em{
  display:block;
  font-style:normal;
  font-weight:400;
  font-size:.78rem;
  color:var(--cb-muted);
}

@media (max-width:991.98px){
  .review-grid{grid-template-columns:1fr;gap:14px}
}
@media (max-width:575.98px){
  .review-summary{padding:16px;gap:14px}
  .review-score{
    border-right:0;
    border-bottom:1px solid var(--cb-line);
    padding:0 0 14px;
    width:100%;
  }
  .review-card{padding:20px 17px}
}

/* --- 10. Comparison table ------------------------------------------------ */
/* Eight rows of prose with no visual verdict meant the reader had to parse
   every cell to see who won it. An icon per cell gives the answer first and
   the sentence second, and the two rows where the free route actually wins
   are tinted so they are not mistaken for filler. */

.cmp-wrap{
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius-lg);
  box-shadow:var(--cb-shadow);
  overflow:hidden;
  background:#fff;
}

.cmp-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9375rem;
  margin:0;
}

.cmp-table thead tr{background:var(--cb-head)}
.cmp-table thead th{
  text-align:left;
  padding:14px 16px;
  color:#fff;
  font-weight:600;
  font-size:.875rem;
  white-space:nowrap;
}
.cmp-table thead th i{
  margin-right:8px;
  color:#ffd66b;
}
.cmp-table thead th:last-child i{color:#7ee0a8}

.cmp-table tbody th{
  text-align:left;
  font-weight:600;
  color:var(--cb-head);
  padding:13px 16px;
  border-top:1px solid var(--cb-line);
  width:26%;
}
.cmp-table tbody td{
  padding:13px 16px;
  border-top:1px solid var(--cb-line);
  color:var(--cb-body);
  line-height:1.6;
}

.cmp-table tbody td span{display:inline}

.cmp-i{
  margin-right:9px;
  font-size:1rem;
  vertical-align:-2px;
}
.cmp-i-win{color:var(--cb-green)}
.cmp-i-ok{color:var(--cb-muted)}
.cmp-i-no{color:#c0392b}
.cmp-i-dash{color:#a8b1c4}

/* The two rows the free route wins outright. */
.cmp-free-wins{background:#f4fbf7}
.cmp-free-wins td strong{color:#0f6e56}

.cmp-key{
  font-size:.875rem;
  color:var(--cb-muted);
  margin:14px 0 0;
}
.cmp-key i{margin-right:7px}

/* Below the fold of a phone the three columns cannot hold prose, so the table
   becomes stacked blocks with the column name in front of each value. */
@media (max-width:767.98px){
  .cmp-table thead{display:none}
  .cmp-table,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td{display:block;width:auto}
  .cmp-table tr{
    border-top:1px solid var(--cb-line);
    padding:6px 0 12px;
  }
  .cmp-table tbody th{
    border-top:0;
    padding:10px 16px 4px;
    font-size:1rem;
  }
  .cmp-table tbody td{
    border-top:0;
    padding:5px 16px;
    display:flex;
    align-items:flex-start;
  }
  .cmp-table tbody td:before{
    content:"Free";
    flex:0 0 4.6rem;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--cb-muted);
    padding-top:.15rem;
  }
  .cmp-table tbody td:last-child:before{content:"Corbett"}
  .cmp-i{flex:0 0 auto}
}

/* --- 11. Video facade ---------------------------------------------------- */
/* A YouTube iframe pulls well over a megabyte of script on page load whether
   or not anyone presses play. This is a still and a button; the iframe is
   injected on the first click. */

.video-facade{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--cb-radius-lg);
  overflow:hidden;
  background:var(--cb-navy);
  cursor:pointer;
  border:1px solid var(--cb-line);
  box-shadow:var(--cb-shadow);
}
.video-facade img,
.video-facade iframe{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
}
.video-play{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(11,27,61,.28);
  cursor:pointer;
  transition:background .25s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-facade:hover .video-play{background:rgba(11,27,61,.42)}
.video-play-icon{
  width:74px;
  height:52px;
  border-radius:12px;
  background:#c00;
  position:relative;
  transition:transform .25s ease;
}
.video-facade:hover .video-play-icon{transform:scale(1.08)}
.video-play-icon:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-42%,-50%);
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.video-play:focus-visible{outline:3px solid var(--cb-hero-gold);outline-offset:-3px}


/* --- 12. Related guides -------------------------------------------------- */

.guide-col{
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius-lg);
  box-shadow:var(--cb-shadow);
  padding:22px 24px;
  height:100%;
  background:#fff;
}
.guide-links li + li{border-top:1px solid var(--cb-line-soft)}
.guide-links a{
  display:block;
  padding:10px 0;
  font-size:.9375rem;
  line-height:1.5;
  color:var(--cb-head);
  text-decoration:none;
  transition:color .2s ease;
}
.guide-links a:hover,
.guide-links a:focus-visible{color:var(--cb-link)}
.guide-links li:first-child a{padding-top:2px}
.guide-links li:last-child a{padding-bottom:0}

/* --- 13. Larger header nav ----------------------------------------------- */
/* Scoped to .nav-lg, which only header-v2.php carries, so the site's other
   pages keep the current header untouched. style.css sets .navbar-nav
   .nav-link at 0,2,0; every rule here adds .nav-lg to clear it. */

.nav-lg{
  padding-top:.55rem;
  padding-bottom:.55rem;
}

.nav-lg .navbar-nav .nav-link{
  font-size:1.3125rem;      /* 21px, up from Bootstrap's 16px */
  font-weight:700;
  letter-spacing:.1px;
  padding-left:1.15rem;
  padding-right:1.15rem;
  padding-top:.7rem;
  padding-bottom:.7rem;
}

.nav-lg .navbar-nav .nav-link svg{
  width:21px;
  height:21px;
  margin-right:.3rem;
  vertical-align:-3px;
}

/* The chat button is a nav-link too, so it needs its own sizing back. */
.nav-lg .navbar-nav .nav-link.btn-brown{
  font-size:1.3125rem;
  padding:.7rem 1.4rem!important;
  border-radius:10px;
}
.nav-lg .navbar-nav .nav-link.btn-brown svg{
  width:24px;
  height:24px;
  margin-right:.5rem;
}

.nav-lg .navbar-brand img{
  width:112px;
  height:112px;
}
.nav-lg .logo-badgep{margin-left:-56px}

/* Below the breakpoint the nav stacks, so the wide padding is wasted. */
/* Seven items plus a button at 21px will not fit a 1200px viewport, so the
   scale steps down before the navbar collapses. */
@media (max-width:1399.98px){
  .nav-lg .navbar-nav .nav-link,
  .nav-lg .navbar-nav .nav-link.btn-brown{font-size:1.1875rem}
  .nav-lg .navbar-nav .nav-link{
    padding-left:.9rem;
    padding-right:.9rem;
  }
}
@media (max-width:1199.98px){
  .nav-lg .navbar-nav .nav-link,
  .nav-lg .navbar-nav .nav-link.btn-brown{font-size:1.0625rem}
  .nav-lg .navbar-nav .nav-link{
    padding-left:.65rem;
    padding-right:.65rem;
  }
}
@media (max-width:991.98px){
  .nav-lg .navbar-brand img{width:88px;height:88px}
  .nav-lg .logo-badgep{position:static;margin-left:0}
  .nav-lg .navbar-nav .nav-link,
  .nav-lg .navbar-nav .nav-link.btn-brown{font-size:1.125rem}
  .nav-lg .navbar-nav .nav-link{
    padding-left:.25rem;
    padding-right:.25rem;
  }
}

/* --- 14. Larger footer --------------------------------------------------- */
/* Scoped to .footer-lg, which only footer-v2.php carries. The footer runs at
   Bootstrap's 16px default with 18px column titles, which reads small now
   that the page body sits at 17px. Everything below is spacing and size;
   no colours or structure are touched. */

.footer-lg{
  font-size:1.0625rem;      /* 17px, matching the page body */
  line-height:1.75;
}

/* Column headings: INFORMATION, TOP LINKS, HELPS. style.css sets .title at
   18px, so this needs the parent to win. */
.footer-lg .title{
  font-size:1.375rem;       /* 22px, up from 18px */
  letter-spacing:.6px;
  padding-bottom:20px;
  margin-bottom:22px;
}
.footer-lg .title:before{
  width:38px;
  height:5px;
}

/* Link lists */
.footer-lg .list-wrap a{
  font-size:1.0625rem;
  line-height:1.9;
}
.footer-lg .list-wrap li{margin-bottom:.35rem}

/* Intro line, phone, email and address rows */
.footer-lg p{font-size:1.0625rem}
.footer-lg .flex-shrink-0 svg{
  width:27px;
  height:27px;
}

/* Top strip above the divider */
.footer-lg .h3{font-size:1.85rem!important}
.footer-lg .h3 + p{font-size:1.125rem}

/* Social row */
.footer-lg .social-media a{
  padding:.7rem!important;
  border-radius:7px;
}
.footer-lg .social-media a svg{
  width:22px;
  height:22px;
}
.footer-lg .social-media > p{
  font-size:1.0625rem;
  margin-bottom:.65rem!important;
}

@media (max-width:991.98px){
  .footer-lg,
  .footer-lg p,
  .footer-lg .list-wrap a{font-size:1rem}
  .footer-lg .title{font-size:1.2rem}
  .footer-lg .h3{font-size:1.5rem!important}
  .footer-lg .flex-shrink-0 svg{width:24px;height:24px}
}

/* --- 15. Chip panel ------------------------------------------------------ */
/* A bordered panel of short linked labels. Used on /recover-emails/ for the
   thirteen backup formats it reads. Separate from .also-covered, which is a
   plain sentence on /backup-emails/ and must stay one. */

.chip-panel{
  max-width:52rem;
  border:1px solid var(--cb-line);
  box-shadow:var(--cb-shadow);
  border-radius:var(--cb-radius-lg);
  padding:20px 22px;
  background:var(--cb-surface);
}
.chip-panel-label{
  font-family:"Manrope",sans-serif;
  font-size:.72rem;
  font-weight:700;
  color:var(--cb-muted);
  text-transform:uppercase;
  letter-spacing:1.4px;
  text-align:center;
  margin-bottom:14px;
}
.chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.chip-list li{
  display:inline-block;
  border:1px solid var(--cb-line);
  background:#fff;
  border-radius:7px;
  padding:7px 15px;
  font-size:.9375rem;
  font-weight:600;
  color:var(--cb-head);
  line-height:1.3;
}
.chip-list li a{
  color:var(--cb-head);
  text-decoration:none;
  transition:color .2s ease;
}
.chip-list li:has(a){transition:border-color .2s ease,transform .2s ease}
.chip-list li:hover a{color:var(--cb-link)}
.chip-list li:has(a):hover{border-color:#f7a400;transform:translateY(-2px)}

@media (max-width:575.98px){
  .chip-panel{padding:16px 14px}
  .chip-list li{font-size:.875rem;padding:6px 12px}
}

/* --- 16. Format grid ----------------------------------------------------- */
/* Thirteen formats in one flat row read as a wall of acronyms. Grouped by the
   program that wrote the file, a reader finds their own case in one glance
   instead of scanning all thirteen. */

.format-grid{
  max-width:56rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:20px;
}

.format-card{
  border:1px solid var(--cb-line);
  border-radius:var(--cb-radius-lg);
  box-shadow:var(--cb-shadow);
  background:#fff;
  padding:18px 18px 16px;
}

.format-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Manrope",sans-serif;
  font-size:.78rem;
  font-weight:700;
  color:var(--cb-muted);
  text-transform:uppercase;
  letter-spacing:1.1px;
  margin-bottom:12px;
}
.format-card-head i{font-size:1rem;color:var(--cb-link)}
.format-card:nth-child(2) .format-card-head i{color:var(--cb-green)}
.format-card:nth-child(3) .format-card-head i{color:var(--cb-gold)}
.format-card:nth-child(4) .format-card-head i{color:#5F01D1}

.format-card .chip-list{justify-content:flex-start;gap:7px}

@media (max-width:991.98px){
  .format-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:575.98px){
  .format-grid{grid-template-columns:1fr;gap:10px}
  .format-card{padding:15px 15px 13px}
}


/* --- 17. File check note ------------------------------------------------- */
/* The two viewer links were buried in a sentence. Pulled out as buttons they
   read as the next action rather than as decoration.

   No left accent bar anywhere on this page. A thicker border on one side
   fights the border radius, which is what leaves the corner notch you can
   see when the two meet. The tinted fill and the icon carry the emphasis
   instead, and the frame stays an even 1px on all four sides. */

.check-note{
  max-width:56rem;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #ecd9a8;
  border-radius:var(--cb-radius);
  box-shadow:var(--cb-shadow);
  background:#fffdf8;
  padding:18px 22px;
}
.check-note > i{
  color:#f7a400;
  font-size:1.5rem;
  flex:0 0 auto;
}
.check-note-body{flex:1 1 auto}
.check-note-title{
  font-weight:700;
  color:var(--cb-head);
  font-size:1rem;
  line-height:1.4;
}
.check-note-body p:last-child{
  color:var(--cb-body);
  font-size:.9375rem;
  line-height:1.6;
}
.check-note-links{
  display:flex;
  gap:9px;
  flex:0 0 auto;
  flex-wrap:wrap;
}
.check-note-links a{
  border:1px solid var(--cb-line);
  background:#fff;
  border-radius:var(--cb-radius-sm);
  padding:8px 15px;
  font-size:.9375rem;
  font-weight:600;
  color:var(--cb-link);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s ease,transform .2s ease;
}
.check-note-links a:hover,
.check-note-links a:focus-visible{
  border-color:#f7a400;
  transform:translateY(-2px);
}

@media (max-width:767.98px){
  .check-note{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}