/* Bredo's website. One stylesheet for every page: the home page, the guides, the legal pages.
   Light and dark both, following the system unless the ◐ in the bar says otherwise. */
:root{--bg:#FAFAFB;--card:#fff;--soft:#F1F2F5;--line:#E4E6EB;--ink:#0F1115;--ink-dim:#4A5160;--mute:#8A91A0;--btn:#0F1115;--btnink:#fff;
  --blue:#3D6FE3;--green:#1F9A63;--orange:#B9651A;--violet:#6E58D6;--greenwash:#EEF8F2;--shadow:0 30px 80px -40px #1b254066;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace}
:root[data-theme="dark"]{--bg:#0C0D10;--card:#15171B;--soft:#1B1E24;--line:#252930;--ink:#F2F3F5;--ink-dim:#B3B9C4;--mute:#7A8290;--btn:#fff;--btnink:#0C0D10;
  --blue:#7AA2FF;--green:#4CC38A;--orange:#F0A35E;--violet:#A996FF;--greenwash:#14261D;--shadow:0 40px 100px -40px #000}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0C0D10;--card:#15171B;--soft:#1B1E24;--line:#252930;--ink:#F2F3F5;--ink-dim:#B3B9C4;--mute:#7A8290;--btn:#fff;--btnink:#0C0D10;
  --blue:#7AA2FF;--green:#4CC38A;--orange:#F0A35E;--violet:#A996FF;--greenwash:#14261D;--shadow:0 40px 100px -40px #000}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08}
p{margin:0}
code{font-family:var(--mono);font-size:.9em;background:var(--soft);padding:.1em .35em;border-radius:6px}
pre{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px;overflow-x:auto;margin:20px 0}
pre code{background:none;padding:0;font-size:14px}
mark{background:color-mix(in srgb,var(--blue) 18%,transparent);color:inherit;padding:0 .2em;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:760px}
/* the picture that belongs to the appearance in use */
.only-dark{display:none}
:root[data-theme="dark"] .only-light{display:none}:root[data-theme="dark"] .only-dark{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .only-light{display:none}:root:not([data-theme="light"]) .only-dark{display:block}}

/* bar */
header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:60px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px}
.logo{width:26px;height:26px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:14px}
header.site nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:14.5px}
header.site nav a{color:var(--ink-dim);text-decoration:none}
header.site nav a:hover{color:var(--ink)}
header.site nav a.btn,header.site nav a.btn:hover{color:var(--btnink)}
.tog{width:36px;height:36px;border-radius:10px;border:0;background:var(--soft);color:var(--ink);cursor:pointer;font-size:16px;line-height:1}
.btn,button.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--sans);padding:11px 18px;border-radius:12px;border:0;cursor:pointer;background:var(--btn);color:var(--btnink);text-decoration:none;white-space:nowrap}
.btn:hover{opacity:.88}
.btn.ghost,.btn.q{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost:hover,.btn.q:hover{background:var(--soft);opacity:1}
.btn.small{padding:8px 14px;font-size:14px;border-radius:10px}

/* home: words on the left, the year on the right */
.hero{padding:76px 0 0}
.hero .wrap.top{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.kicker,.eyebrow{font-size:14px;font-weight:600;color:var(--ink-dim);display:flex;align-items:center;gap:9px}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.hero h1{font-size:clamp(46px,7.4vw,92px);line-height:.96;letter-spacing:-.05em;margin-top:22px}
.hero h1 span{color:var(--mute)}
.hero .lede{font-size:20px;line-height:1.5;color:var(--ink-dim);max-width:560px;margin-top:26px}
.cta{display:flex;gap:10px;margin-top:32px;align-items:center;flex-wrap:wrap}
.cta small,.hero .cta .req{font-size:13.5px;color:var(--mute);margin-left:8px}
.yearbox{border-top:1px solid var(--line);padding-top:16px}
.yearbox p{font-size:13.5px;color:var(--mute);display:flex;justify-content:space-between}.yearbox p b{color:var(--ink);font-weight:600}
.year{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:150px;margin-top:14px}
.year .m{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%}
.year .m i{display:block;border-radius:4px;background:var(--c,var(--blue));height:0;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:8px;font-size:11px;font-weight:600;color:var(--mute);text-align:center}
.stage{margin:64px auto 0;max-width:1180px;width:calc(100% - 64px);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.stage img{width:100%}
section{padding:130px 0 0}
section h2{font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.045em;max-width:760px}
section .sub{font-size:18px;color:var(--ink-dim);max-width:560px;margin-top:16px;line-height:1.5}

/* one stage, three acts */
.acts{margin-top:52px;border:1px solid var(--line);border-radius:28px;background:var(--card);overflow:hidden}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.tab{appearance:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer;padding:20px 26px 22px;position:relative;border-right:1px solid var(--line);color:var(--mute)}
.tab:last-child{border-right:0}
.tab b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em}.tab small{font-size:13.5px}
.tab.on{color:var(--ink)}.tab.on small{color:var(--ink-dim)}
.tab::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink)}.tab.on::after{width:100%;transition:width 7s linear}
.act{display:none;grid-template-columns:.9fr 1.1fr;gap:48px;padding:44px;align-items:center;min-height:430px}.act.on{display:grid}
.act h3{font-size:36px;letter-spacing:-.035em;line-height:1.06}
.act p{font-size:16.5px;color:var(--ink-dim);margin-top:14px}
.act ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.act li{font-size:15px;color:var(--ink-dim);padding-left:20px;position:relative}
.act li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--c)}
.panel{background:var(--soft);border-radius:20px;padding:20px;min-height:320px;display:flex;flex-direction:column;gap:14px}
.rowc{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:0 0 0 1px var(--line)}
.ico{width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:13px}
.rowc b{display:block;font-size:15px}.rowc small{font-size:12.5px;color:var(--mute)}
.pb{height:8px;border-radius:4px;background:var(--line);overflow:hidden}.pb i{display:block;height:100%;width:0;background:var(--blue);border-radius:4px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.thumbs div{aspect-ratio:1;border-radius:9px;background-size:cover;background-position:center;opacity:0;transform:scale(.9);transition:.35s}.thumbs div.in{opacity:1;transform:none}
.verdict{margin-top:auto;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;padding:11px 13px;border-radius:12px;background:var(--greenwash);color:var(--green);opacity:0;transition:.4s}.verdict.in{opacity:1}
.verdict::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--bg);font-size:12px}
.sbox{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:13px 15px;font-size:16px;font-weight:600;box-shadow:0 0 0 1px var(--line)}
.sbox span::after{content:"";display:inline-block;width:2px;height:18px;background:var(--blue);margin-left:2px;vertical-align:-3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.reason{align-self:flex-start;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ink-dim);display:flex;gap:7px;align-items:center}
.reason i{width:8px;height:8px;border-radius:50%;background:var(--rc,var(--violet))}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.res div{aspect-ratio:16/10;border-radius:12px;background-size:cover;background-position:center;transition:opacity .3s}
.big{font-size:60px;font-weight:700;letter-spacing:-.045em;line-height:1}
.big small{display:block;font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--mute);margin-top:8px}
.drv{background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:0 0 0 1px var(--line)}
.drv p{display:flex;justify-content:space-between;font-size:14px;font-weight:600}.drv p span{color:var(--mute);font-weight:500}
.drv .pb{margin-top:9px}.drv .pb i{background:var(--green)}
kbd{font:600 12px var(--sans);background:var(--soft);border:1px solid var(--line);border-radius:7px;padding:3px 7px;color:var(--ink-dim)}

/* the rules, set as a list */
.rules{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.rule{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:26px 0;border-top:1px solid var(--line)}
.rule span{font-size:15px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums;padding-top:4px}
.rule h3{font-size:22px;font-weight:600;letter-spacing:-.025em}
.rule p{font-size:15.5px;color:var(--ink-dim);margin-top:8px;max-width:420px}
.rest{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}
.rest div{padding:24px;border-right:1px solid var(--line)}.rest div:last-child{border-right:0}
.rest h3{font-size:16px;font-weight:600;letter-spacing:-.01em}.rest p{font-size:14px;line-height:1.45;color:var(--ink-dim);margin-top:6px}
.rest .k{display:flex;gap:5px;margin-top:14px}

/* the price, beside its terms */
.price{margin-top:52px;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;border-top:1px solid var(--line);padding-top:36px}
.amount{font-size:clamp(84px,10vw,120px);font-weight:700;letter-spacing:-.06em;line-height:.9}
.amount s,.amount span{font-size:28px;font-weight:500;color:var(--mute);letter-spacing:-.02em;margin-left:12px}
.price .left p{color:var(--ink-dim);margin:14px 0 26px;font-size:16px}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.terms div{padding:18px 0;border-bottom:1px solid var(--line)}
.terms h3{font-size:16px;font-weight:600;letter-spacing:-.01em}.terms p{font-size:14.5px;color:var(--ink-dim);margin-top:5px;line-height:1.45}
.launch{margin-top:52px;border:1px solid var(--line);border-radius:28px;background:var(--card);padding:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.launch h2{font-size:clamp(30px,3.6vw,44px)}
.launch p{color:var(--ink-dim);margin-top:14px;max-width:520px}
.launch .cta{margin-top:0;justify-content:flex-end}

/* guides */
.guide-cards,.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.guide-card,.g{border-radius:20px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line);text-decoration:none;display:block;transition:transform .15s}
.guide-card:hover,.g:hover{transform:translateY(-2px)}
.g .pic{aspect-ratio:16/8;background-size:cover;background-position:center}
.guide-card .body{padding:20px}
.guide-card h3,.g h3{font-size:17px;font-weight:600;letter-spacing:-.015em}.g h3{padding:18px 20px 4px}
.guide-card p,.g p{font-size:14.5px;color:var(--ink-dim);margin-top:6px}.g p{padding:0 20px 20px;margin:0}
.crumbs{font-size:14px;color:var(--mute);margin-bottom:26px}.crumbs a{color:var(--ink-dim);text-decoration:none}
article.guide{padding:64px 0 0}
article.guide h1{font-size:clamp(34px,5vw,54px);letter-spacing:-.04em;margin-bottom:22px}
article.guide h2{font-size:27px;letter-spacing:-.03em;margin:52px 0 14px;max-width:none}
article.guide h3{font-size:20px;letter-spacing:-.02em;margin:30px 0 10px}
article.guide p,article.guide ul,article.guide ol{color:var(--ink-dim);margin:14px 0}
article.guide li{margin:8px 0}article.guide li b,article.guide p b{color:var(--ink)}
article.guide a{color:var(--blue);text-decoration:none}article.guide a:hover{text-decoration:underline}
article.guide a.btn{color:var(--btnink)}
.callout{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:36px 0}
.callout h3{font-size:19px;margin:0 0 8px}.callout p{margin:8px 0}.callout p:last-child{margin-top:16px}
figure{margin:36px 0}
figure.window,.window{border-radius:16px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--line),var(--shadow)}
.window img,.window video{width:100%}
figcaption{font-size:14px;color:var(--mute);padding:12px 16px;border-top:1px solid var(--line)}
details.faq{border-top:1px solid var(--line);padding:18px 0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:600;font-size:18px;letter-spacing:-.015em;list-style:none;display:flex;gap:12px;align-items:baseline}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--mute);font-weight:500;width:14px;flex:none}
details.faq[open] summary::before{content:"–"}
details.faq p{color:var(--ink-dim);margin:12px 0 4px 26px;max-width:680px}
details.faq a{color:var(--blue)}
.faqs{margin-top:44px;max-width:860px}
.tablewrap{overflow-x:auto;margin:28px 0}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.compare th{font-size:13px;color:var(--mute);font-weight:600}.compare td:first-child{font-weight:600}
.compare .yes{color:var(--green);font-weight:600}.compare .no{color:var(--mute)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:28px 0}
.facts div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.facts b{display:block;font-size:17px}.facts span{font-size:13.5px;color:var(--mute)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:28px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.card h3{font-size:17px}.card p{font-size:14.5px;color:var(--ink-dim);margin-top:6px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.query{display:inline-block;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line) inset;margin:0 6px 8px 0}
ul.marks{list-style:none;padding:0}ul.marks li{padding-left:22px;position:relative;margin:10px 0;color:var(--ink-dim)}
ul.marks li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--green)}ul.marks li b{color:var(--ink)}
.end{padding:150px 0 100px}.end h2{font-size:clamp(44px,6.6vw,84px);max-width:900px}

/* foot */
footer.site{border-top:1px solid var(--line);margin-top:110px;padding:26px 0 40px;font-size:13.5px;color:var(--mute)}
.end + footer.site{margin-top:0}
footer.site .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--mute);text-decoration:none}footer.site a:hover{color:var(--ink)}
footer.site button.linky{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--mute);cursor:pointer}
footer.site button.linky:hover{color:var(--ink)}

/* the one question the site asks */
.consent{position:fixed;left:16px;bottom:16px;z-index:60;max-width:420px;background:var(--card);color:var(--ink);border-radius:18px;padding:20px;box-shadow:0 0 0 1px var(--line),0 30px 70px -30px #000a;font-size:14.5px}
.consent h2{font-size:17px;margin-bottom:8px;letter-spacing:-.015em}.consent h2:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.consent p{color:var(--ink-dim);margin:0 0 12px}
.consent-buttons{display:flex;gap:8px;flex-wrap:wrap}.consent-buttons .btn{padding:8px 14px;font-size:14px;border-radius:10px}
.consent-more{font-size:13px;color:var(--mute)}

@media (max-width:980px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  header.site nav a:not(.btn){display:none}
  .hero .wrap.top,.act,.rules,.price,.terms,.launch,.split{grid-template-columns:1fr}
  .rest,.guide-cards,.guides,.tabs{grid-template-columns:1fr}
  .tab,.rest div{border-right:0;border-bottom:1px solid var(--line)}
  .act{padding:26px;gap:26px}.act h3{font-size:28px}.year{height:110px}.launch{padding:28px}.launch .cta{justify-content:flex-start}
  .stage{width:calc(100% - 40px)}
  section{padding-top:90px}
}

/* Before the first release the download page is a placeholder and says so. Its button is the one
   the release script fills in, so it stays in the page and simply cannot be pressed until the
   version in it is a real one. */
a[data-download][data-version="0.0.0"]{pointer-events:none;opacity:.4}