/* ============================================================
   /quiz/ — Breakthrough Archetype quiz. Shares the homepage
   design tokens; self-contained, no backend, no dependencies.
   ============================================================ */
@font-face{
  font-family:"Fraunces-fallback"; src:local("Georgia");
  size-adjust:98%; ascent-override:96%; descent-override:24%; line-gap-override:0%;
}
:root{
  --paper:#f1ece2; --paper-2:#e7e0d2; --paper-3:#ded5c3;
  --ink:#17130e; --ink-2:#3f392f; --ink-soft:#6b6355;
  --clay:#bf5236; --clay-deep:#8f3c25;
  --line:rgba(23,19,14,.16); --line-soft:rgba(23,19,14,.09);
  --ff-display:"Fraunces","Fraunces-fallback",Georgia,serif;
  --ff-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(1.25rem,5vw,6.5rem); --maxw:1500px; --e:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--ff-body);
  font-size:clamp(1rem,.55rem + .55vw,1.14rem); line-height:1.65; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--clay); color:var(--paper); }
.wrap{ max-width:880px; margin:0 auto; padding:0 var(--pad); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.kicker{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.06em; text-transform:lowercase;
  color:var(--clay-deep); display:inline-flex; align-items:center; gap:.6em; margin:0 0 1.2rem; }
.kicker::before{ content:""; width:2.2rem; height:1px; background:var(--clay); display:inline-block; }
h1,h2,h3{ font-family:var(--ff-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; margin:0; }
em{ font-style:italic; color:var(--clay-deep); }

.btn{ --bg:var(--ink); --fg:var(--paper); position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--ff-mono); font-size:.9rem; letter-spacing:.01em;
  padding:1.05em 1.7em; min-height:3rem; border-radius:100px; background:var(--bg); color:var(--fg);
  border:1px solid var(--ink); cursor:pointer; transition:color .5s var(--e), transform .35s var(--e); z-index:0; }
.btn span{ position:relative; z-index:2; }
.btn::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--clay);
  transform:translateY(101%); transition:transform .5s var(--e); }
.btn:hover{ color:var(--paper); transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn--clay{ --bg:var(--clay-deep); --fg:var(--paper); border-color:var(--clay-deep); }
.btn--clay::before{ background:var(--ink); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn--ghost-light{ --bg:transparent; --fg:var(--paper); border-color:rgba(241,236,226,.35); }
.btn--ghost-light::before{ background:var(--paper); }
.btn--ghost-light:hover{ color:var(--ink); }

.nav{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad); background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
.brand{ font-family:var(--ff-mono); font-size:1.02rem; }
.brand b{ font-weight:500; } .brand .dot{ color:var(--clay); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{ font-family:var(--ff-mono); font-size:.8rem; color:var(--ink-2); }
.nav-links a:hover{ color:var(--clay-deep); }
@media (max-width:640px){ .nav-links a:not(.home-link){ display:none; } }
.crumb{ font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-soft); padding-top:1.6rem; }
.crumb a{ color:var(--clay-deep); } .crumb a:hover{ text-decoration:underline; }

/* ---- intro ---- */
.quiz-hero{ padding:1.2rem 0 clamp(2rem,4vw,3rem); text-align:center; }
@media (min-width:761px){
  .quiz-hero{ max-width:760px; margin:0 auto; text-align:left; }
  #startBtn{ font-size:1.05rem; padding:1.15em 2.1em; min-height:3.4rem; }
}
/* picture on the left, the big AESTHETIC QUIZ lettering beside it */
.quiz-hero-top{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(1.6rem,3.5vw,3rem); align-items:stretch;
  margin-bottom:clamp(1.8rem,3.5vw,2.6rem);
}
.quiz-shot{ margin:0; }
.quiz-shot img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--line);
  box-shadow:0 26px 46px -26px rgba(23,19,14,.42); }
/* The three lines share the photo's height: lettering level with its top,
   the sub-line level with its bottom. */
.quiz-hero-say{
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:0; padding:.3rem 0 .5rem;
}
@media (min-width:761px){ .quiz-hero-say{ text-align:left; } }
.quiz-eyebrow{
  font-family:var(--ff-display); font-weight:600; line-height:.9;
  letter-spacing:-.02em; text-transform:uppercase; color:var(--clay);
  margin:0;
}
.quiz-eyebrow .qe-a,
.quiz-eyebrow .qe-q{ display:block; }
.quiz-eyebrow .qe-a{ font-size:clamp(1.05rem,.7rem + 1.1vw,1.6rem); letter-spacing:.12em; font-weight:500; }
.quiz-eyebrow .qe-q{ font-size:clamp(3rem,1.2rem + 5.6vw,6rem); margin-top:.02em; letter-spacing:-.03em; }
@supports (-webkit-text-stroke:1px currentColor){
  .quiz-eyebrow .qe-q{ color:transparent; -webkit-text-stroke:1.6px var(--clay); }
}
.quiz-h1{
  font-size:clamp(1.1rem,.92rem + .78vw,1.6rem); line-height:1.4;
  letter-spacing:.005em; max-width:34ch; color:var(--ink-2);
  margin:clamp(.55rem,1vw,.9rem) 0 0;   /* sits close under QUIZ */
}
.pcbr{ display:inline; }
/* "something" borrows the outline treatment from QUIZ above it */
.hs-word{ font-style:italic; font-weight:300; letter-spacing:-.01em; }
@supports (-webkit-text-stroke:1px currentColor){
  .hs-word{ color:transparent; -webkit-text-stroke:1.1px var(--clay); }
}
.quiz-hero-sub{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.6rem,1.05rem + 2.6vw,3.1rem); line-height:1.1;
  letter-spacing:-.02em; color:var(--ink); max-width:24ch;
  /* auto pushes it to the foot of the photo — the drop is the emphasis */
  margin:auto 0 0; padding-top:clamp(2.4rem,4.5vw,3.8rem);
}
@media (min-width:761px){
  .quiz-hero-sub{ font-size:2.15rem; max-width:none; }
}
@media (max-width:760px){
  /* stack: photo, then the three headers centered beneath it */
  .quiz-hero-top{ grid-template-columns:1fr; gap:.8rem; margin-bottom:.8rem; }
  .quiz-shot{ max-width:240px; margin:0 auto; }
  .quiz-hero-say{ gap:1.5rem; padding:0; text-align:center; }
  .quiz-start-row{ text-align:center; }
  #startBtn{ font-size:1rem; padding:1.1em 2em; min-height:3.3rem; }
  .pcbr{ display:none; }
  .hs-word{ font-style:normal; font-weight:inherit; }
  @supports (-webkit-text-stroke:1px currentColor){
    .hs-word{ color:inherit; -webkit-text-stroke-width:0; }
  }
  .quiz-h1{ margin-top:0; }
  .quiz-hero-sub{ margin-top:0; padding-top:0; }
  /* AESTHETIC over QUIZ, QUIZ scaled so the two lines end up about as wide */
  /* Sized (not vw-clamped) so each line's rendered width matches the
     240px photo below it — the photo is a fixed width once past a narrow
     viewport, so the text targets a fixed width too, not a scaling one. */
  .quiz-eyebrow .qe-a{ font-size:1.9rem; letter-spacing:.12em; }
  .quiz-eyebrow .qe-q{ font-size:5.6rem; margin-top:.06em; }
  @supports (-webkit-text-stroke:1px currentColor){
    .quiz-eyebrow .qe-q{ -webkit-text-stroke-width:1.4px; }
  }
  .quiz-h1{ max-width:none; white-space:nowrap; font-size:.98rem; }
  .quiz-hero-sub{ font-size:1.4rem; }
  .quiz-hero-sub .sl2{ font-size:1.62rem; }
  .quiz-hero-sub .sl3{ font-size:2.3rem; }
}
/* The wrap caps at 880px; a 380px photo would leave the three lines about
   300px to live in. On wide screens the hero row alone breaks out of it. */
.quiz-lede{ font-family:var(--ff-display); font-weight:300; font-size:clamp(1.05rem,.95rem + .6vw,1.3rem);
  line-height:1.45; color:var(--ink-2); margin:0; }
/* Desktop only: sized so this line renders the same measure as the paragraph
   below it (.quiz-about is 56ch = ~513px). Both boxes are centred on the same
   axis, so matching the text width lines their left and right edges up. */
@media (min-width:761px){
  .quiz-lede{ font-size:1.193rem; }
}
.quiz-about{ max-width:56ch; margin:clamp(1.8rem,3vw,2.4rem) 0 0; text-align:left; }
.quiz-about p{ color:var(--ink-2); font-size:1rem; line-height:1.65; margin:0 0 1rem; }
.quiz-about-meta{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--ink-soft); margin-top:1.2rem !important; }
.quiz-meta{ font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-soft); margin:1.4rem 0 0;
  display:flex; gap:1.1rem; flex-wrap:wrap; }
/* the quiz machine itself reads left-aligned, not centred like the intro */
.quiz, .quiz-result, #resultFooter{ text-align:left; }

/* ---- quiz machine ---- */
.quiz{ padding-bottom:clamp(3rem,6vw,5rem); }
.quiz-progress{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:2rem; }
.quiz-progress i{ display:block; height:100%; width:0; background:var(--clay); border-radius:2px;
  transition:width .45s var(--e); }
.q-count{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.9rem; }
.q-text{ font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem); line-height:1.25; margin-bottom:1.8rem; }
.q-options{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:820px){ .q-options{ grid-template-columns:repeat(2,1fr); gap:.8rem; } }
.q-opt{
  display:flex; flex-direction:column; width:100%; text-align:left; font-family:inherit;
  padding:0; overflow:hidden; border-radius:10px; cursor:pointer;
  background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line);
  transition:border-color .3s var(--e), box-shadow .35s var(--e), transform .35s var(--e);
}
.q-opt-img{ display:block; overflow:hidden; background:var(--paper-3); }
.q-opt-img img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  transition:transform .6s var(--e);
}
.q-opt-text{ display:block; padding:.9rem 1rem 1.05rem; font-size:.94rem; line-height:1.45; }
.q-opt:hover{ border-color:var(--clay); transform:translateY(-3px);
  box-shadow:0 18px 30px -18px rgba(23,19,14,.35); }
.q-opt:hover .q-opt-img img{ transform:scale(1.05); }
.q-opt:focus-visible{ outline:2px solid var(--clay-deep); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .q-opt, .q-opt-img img{ transition:none; }
  .q-opt:hover{ transform:none; }
  .q-opt:hover .q-opt-img img{ transform:none; }
}
.q-back{ margin-top:1.6rem; background:none; border:none; padding:.6rem .2rem; cursor:pointer;
  font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-soft); }
.q-back:hover{ color:var(--clay-deep); text-decoration:underline; }
.q-back[hidden]{ display:none; }

/* ---- results ---- */
.quiz-result[hidden]{ display:none; }
.result-head{ border-top:1px solid var(--line); padding-top:clamp(2rem,4vw,3rem); }
.result-kicker{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--clay-deep); }
.result-name{ font-size:clamp(2.2rem,1.6rem + 3vw,3.4rem); letter-spacing:-.03em; margin:.4rem 0 0; }
/* Artwork sits to the left of the name and opening line; stacks on narrow screens. */
.result-top{
  display:grid; grid-template-columns:minmax(0,320px) 1fr;
  gap:clamp(1.6rem,3vw,2.6rem); align-items:start; margin-top:1.6rem;
}
.result-intro{ padding-top:.2rem; }
.result-photo{ margin:0; }
.result-photo img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 24px 44px -24px rgba(23,19,14,.4); }
.result-intro .result-name{ margin-top:.35rem; }
.result-intro .result-lede{ margin-top:1.1rem; }
@media (max-width:760px){
  .result-top{ grid-template-columns:1fr; gap:1.4rem; }
  .result-photo{ max-width:360px; }
}

/* small workbook cover under the "start on your own" line */
.result-book{ display:flex; align-items:center; gap:1rem; margin-top:1.1rem;
  padding:.9rem 1.1rem; background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  max-width:24rem; transition:border-color .3s var(--e), transform .3s var(--e); }
.result-book:hover{ border-color:var(--clay); transform:translateY(-2px); }
.result-book img{ width:58px; height:auto; aspect-ratio:507/760; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 8px 12px rgba(23,19,14,.25)); }
.result-book .rb-t{ font-family:var(--ff-display); font-weight:600; font-size:1rem; line-height:1.2; color:var(--ink); }
.result-book .rb-s{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--clay-deep); margin-top:.25rem; display:block; }
.result-lede{ font-family:var(--ff-display); font-weight:300; font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  line-height:1.45; color:var(--ink-2); margin:1.5rem 0 0; max-width:46ch; }
.result-block{ margin-top:2rem; }
.result-block h3{ font-family:var(--ff-mono); font-weight:500; font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--clay-deep); margin-bottom:.5rem; }
.result-block p{ margin:0; color:var(--ink-2); max-width:60ch; }
.result-try{ margin-top:2rem; padding:1.2rem 1.4rem; border-left:3px solid var(--clay);
  background:var(--paper-2); border-radius:0 8px 8px 0; }
.result-try h3{ font-family:var(--ff-mono); font-weight:500; font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--clay-deep); margin-bottom:.5rem; }
.result-try p{ margin:0; color:var(--ink-2); font-size:.96rem; }

.result-next{ margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.result-next h3{ font-size:1.3rem; margin-bottom:.5rem; }
.result-next p{ color:var(--ink-2); margin:0 0 1.4rem; max-width:56ch; }
.result-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.result-alt{ margin-top:1.6rem; font-size:.92rem; color:var(--ink-soft); }
.result-alt a{ color:var(--clay-deep); text-decoration:underline; text-underline-offset:.2em; }
.result-restart{ margin-top:2.4rem; }
.result-restart button{ background:none; border:none; padding:.6rem .2rem; cursor:pointer;
  font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-soft); }
.result-restart button:hover{ color:var(--clay-deep); text-decoration:underline; }

.note-box{ margin:2.4rem 0 0; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:6px;
  background:var(--paper-2); font-size:.86rem; color:var(--ink-2); }
.note-box b{ color:var(--ink); }

/* ---- closing band + footer ---- */
.cta-band{ background:var(--ink); color:var(--paper); padding:clamp(2.8rem,5vw,4.5rem) 0; text-align:center; }
.cta-band .wrap{ max-width:640px; }
.cta-band h2{ color:var(--paper); font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem); font-weight:500; margin:0 auto 1.2rem; }
.cta-band p{ color:rgba(241,236,226,.75); margin:0 auto 1.8rem; }
.btn-row{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

.footer{ background:var(--ink); color:var(--paper); padding:clamp(2.2rem,5vw,3.2rem) 0; }
.footer .wrap{ max-width:var(--maxw); }
.foot-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.foot-brand{ font-family:var(--ff-display); font-weight:400; font-size:1.5rem; }
.foot-brand .dot{ color:var(--clay); }
.foot-links{ display:flex; gap:.2rem 1.1rem; flex-wrap:wrap; font-family:var(--ff-mono); font-size:.78rem; }
.foot-links a{ color:rgba(241,236,226,.7); display:inline-flex; align-items:center; min-height:3rem; padding:0 .2em; }
.foot-links a:hover{ color:var(--clay); }
.disclaimer{ margin-top:1.8rem; padding-top:1.1rem; border-top:1px solid rgba(241,236,226,.14);
  font-family:var(--ff-mono); font-size:.68rem; color:rgba(241,236,226,.5); line-height:1.7; }

.result-share{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.4rem;
  padding-top:1.8rem; border-top:1px solid var(--line); }
.share-note{ margin:.8rem 0 0; font-family:var(--ff-mono); font-size:.74rem; color:var(--clay-deep); min-height:1.1em; }

/* ---- always-visible archetype previews + FAQ (also what search engines read) ---- */
.quiz-extra{ padding-bottom:clamp(3rem,6vw,5rem); text-align:left; }
.quiz-extra[hidden]{ display:none; }
.qx-part{ margin-top:clamp(2.6rem,5vw,4rem); padding-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid var(--line); }
.qx-part h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); }
.qx-lede{ max-width:56ch; margin:.9rem 0 clamp(1.6rem,3vw,2.2rem); color:var(--ink-2); }
.qx-faq{ display:grid; gap:0; max-width:64ch; border-top:1px solid var(--line-soft); }
.qx-q{ border-bottom:1px solid var(--line-soft); }
.qx-q summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  cursor:pointer; list-style:none; padding:1.05rem 0;
  font-family:var(--ff-body); font-size:1rem; font-weight:500; line-height:1.4; color:var(--ink);
}
.qx-q summary::-webkit-details-marker{ display:none; }
.qx-q summary::after{ content:"+"; flex:none; font-family:var(--ff-mono); font-size:1.1rem; color:var(--clay-deep); }
.qx-q[open] summary::after{ content:"–"; }
.qx-q summary:hover{ color:var(--clay-deep); }
.qx-q summary:focus-visible{ outline:2px solid var(--clay-deep); outline-offset:3px; }
/* a closed <details> hides its content, but an explicit display on a child
   can escape that — collapse it outright so no gap is left behind */
.qx-q:not([open]) p{ display:none; }
.qx-q p{ margin:0 0 1.15rem; padding-right:2.2rem; color:var(--ink-2); font-size:.96rem; line-height:1.6; }

.qx-cta{ margin:2.4rem 0 0; text-align:center; }

/* "8 questions / about 2 minutes" — set apart from the sentence it opens */
.ql-stat{
  font-family:var(--ff-mono); font-weight:400; color:var(--clay-deep);
  font-size:clamp(.72rem,.66rem + .2vw,.82rem); letter-spacing:.09em;
  text-transform:lowercase; line-height:1.7;
  margin:0 0 clamp(1rem,2vw,1.4rem);
}
.ql-stat i{ font-style:normal; color:var(--clay); margin:0 .5em; }

/* ---- result: body signals + the three practices ---- */
.result-signals .rs-lede{ color:var(--ink-2); margin:0 0 1rem; }
.rs-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.rs-list li{ position:relative; padding:.55rem 0 .55rem 1.5rem;
  color:var(--ink); font-size:.98rem; line-height:1.5; border-top:1px solid var(--line); }
.rs-list li::before{ content:"·"; position:absolute; left:.35rem; top:.42rem;
  color:var(--clay); font-size:1.5rem; line-height:1; }
.rs-note{ margin:1.2rem 0 0; font-size:.83rem; line-height:1.55; color:var(--ink-soft); }

.try-steps{ list-style:none; margin:0; padding:0; counter-reset:ts; display:grid; gap:1.1rem; }
.try-steps li{ counter-increment:ts; display:grid; gap:.3rem; padding-left:2.4rem; position:relative; }
.try-steps li::before{ content:counter(ts); position:absolute; left:0; top:.05rem;
  width:1.65rem; height:1.65rem; border-radius:50%; background:var(--clay); color:#fff;
  font-family:var(--ff-mono); font-size:.78rem; display:grid; place-items:center; }
.ts-when{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--clay); }
.ts-do{ color:var(--ink-2); line-height:1.62; }
.ts-do em{ font-style:italic; color:var(--ink); }

/* ---- result: the three work areas ---- */
.rw-lede{ color:var(--ink-2); margin:0 0 1.3rem; }
.rw-list{ display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.rw-item{ padding:1.05rem 1.15rem; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.42); }
.rw-item h4{ font-family:var(--ff-display); font-weight:600; font-size:1.02rem;
  line-height:1.25; letter-spacing:-.01em; margin:0 0 .45rem; color:var(--clay-deep); }
.rw-item p{ margin:0; font-size:.94rem; line-height:1.6; color:var(--ink-2); }

/* "Start the quiz" moved directly under the hero headline so it's visible
   on load — it previously sat after two paragraphs of about-copy, well
   below the fold on both desktop and mobile. */
.quiz-start-row{ margin:0 0 clamp(1.6rem,3vw,2.2rem); }
@media (max-width:760px){ .quiz-start-row{ margin-bottom:1.1rem; } }
@media (min-width:761px){ .quiz-start-row{ text-align:left; } }