/* Structural Studio — shared styles
 *
 * Hero photograph: img/hero.jpg and img/hero-sm.jpg, cropped from
 * https://images.unsplash.com/photo-1549791084-5f78368b208b
 * Used under the Unsplash License, which permits commercial use and does not
 * require attribution. Photographer not identified from the CDN URL; if you
 * want to credit them, look the photo up on unsplash.com and add it here.
 */

:root{
  --bg:#FFFFFF;
  --bg-soft:#F7F7F5;
  --ink:#14171A;
  --ink-2:#3F464D;
  --ink-3:#767D85;
  --line:#E7E7E2;
  --line-2:#D8D8D2;
  --blue:#22405E;
  --blue-soft:#EDF2F7;
  --rust:#A05630;
  --rust-soft:#F7EDE6;
  --radius:3px;
  --wrap:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.015em;
  line-height:1.1;
  margin:0;
}
h1{font-size:clamp(2.5rem,5.4vw,4.15rem);}
h2{font-size:clamp(1.8rem,3.1vw,2.6rem);}
h3{font-size:1.45rem;}
p{margin:0;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}

.kicker{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.lead{font-size:1.15rem;color:var(--ink-2);}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,0.88);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;}
.wordmark{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.3rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
nav.links{display:flex;gap:28px;font-size:0.95rem;flex-wrap:wrap;}
nav.links a{
  text-decoration:none;color:var(--ink-3);
  padding:2px 0;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:13px 24px;
  font-family:'Inter',sans-serif;font-size:0.95rem;font-weight:500;
  text-decoration:none;border-radius:var(--radius);
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-solid:hover{background:#000;}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{background:var(--bg-soft);border-color:var(--ink-3);}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background-image:url('img/hero.jpg');
  background-size:cover;
  background-position:center 42%;
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.94) 32%,
    rgba(255,255,255,0.74) 52%,
    rgba(255,255,255,0.22) 78%,
    rgba(255,255,255,0.04) 100%);
}
.hero .wrap{position:relative;z-index:1;padding-top:104px;padding-bottom:112px;}
.hero-copy{max-width:34rem;}
.hero h1{margin-bottom:22px;}
.hero .lead{max-width:30rem;}

/* padding-top/bottom only — a shorthand here would cancel .wrap's side padding */
.page-head{padding-top:76px;padding-bottom:12px;}
.page-head h1{font-size:clamp(2.1rem,4vw,3.1rem);margin:10px 0 18px;}
.page-head .lead{max-width:40rem;}

/* ---------- Sections ---------- */
section{padding:80px 0;}
section.soft{background:var(--bg-soft);}
.section-head{max-width:44rem;margin-bottom:44px;}
.section-head h2{margin:10px 0 0;}
.section-head p{margin-top:14px;color:var(--ink-3);}

/* ---------- Feature / step grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.feature h3{font-size:1.2rem;margin-bottom:8px;}
.feature p{color:var(--ink-3);font-size:0.98rem;}
.step .num{
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--ink-3);
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line);
}

/* ---------- Pack cards ---------- */
.pack-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;background:var(--bg);
  transition:border-color .15s ease,transform .15s ease;
}
.pack-card:hover{border-color:var(--line-2);}
.pack-card h3{margin-bottom:10px;}
.pack-card p{color:var(--ink-3);font-size:0.98rem;flex-grow:1;}
.pack-card .price{
  font-family:'Instrument Serif',serif;font-size:2rem;color:var(--ink);
  margin-top:22px;line-height:1;
}
.pack-card .price span{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--ink-3);margin-left:8px;letter-spacing:0.06em;}

.tag{
  display:inline-block;align-self:flex-start;font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;letter-spacing:0.06em;padding:4px 9px;border-radius:var(--radius);
}
.tag-euro{background:var(--blue-soft);color:var(--blue);}
.tag-aci{background:var(--rust-soft);color:var(--rust);}

/* ---------- Product page bits ---------- */
.product{display:grid;grid-template-columns:1.35fr 0.85fr;gap:56px;align-items:start;}
ul.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;font-size:0.97rem;}
ul.checks li{padding-left:18px;position:relative;color:var(--ink-2);}
ul.checks li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--ink-3);}
.clause{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;color:var(--ink-3);}

.buy-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--bg-soft);position:sticky;top:96px;}
.buy-card .price{font-family:'Instrument Serif',serif;font-size:2.6rem;color:var(--ink);line-height:1;}
.buy-card .meta{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--ink-3);letter-spacing:0.06em;margin-top:10px;}
.buy-card .btn{display:block;text-align:center;margin-top:24px;}
.buy-card .note{font-size:0.82rem;color:var(--ink-3);margin-top:14px;line-height:1.55;}

.spec{border:1px solid var(--line);border-radius:var(--radius);font-family:'IBM Plex Mono',monospace;font-size:0.8rem;background:var(--bg);}
.spec .row{display:grid;grid-template-columns:38% 62%;border-top:1px solid var(--line);}
.spec .row:first-child{border-top:none;}
.spec .row>div{padding:11px 14px;}
.spec .row>div:first-child{color:var(--ink-3);border-right:1px solid var(--line);}

/* ---------- Screenshot gallery ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.shots figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);}
.shots a{display:block;line-height:0;}
.shots img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);}
.shots figcaption{font-size:0.85rem;color:var(--ink-3);padding:14px 16px;line-height:1.5;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:72px;align-items:start;}

.form{display:grid;gap:22px;}
.field label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:0.9rem;font-weight:500;color:var(--ink);margin-bottom:8px;
}
.field .opt{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--ink-3);
  letter-spacing:0.04em;font-weight:400;}
.field input,.field textarea{
  width:100%;padding:13px 15px;font:inherit;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  transition:background .15s ease,border-color .15s ease;
}
.field textarea{min-height:170px;resize:vertical;line-height:1.6;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75;}
.field input:hover,.field textarea:hover{border-color:var(--line-2);}
.field input:focus,.field textarea:focus{background:var(--bg);border-color:var(--ink-3);}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.form button{
  padding:14px 30px;font:inherit;font-weight:500;font-size:0.95rem;
  color:#fff;background:var(--ink);border:1px solid var(--ink);
  border-radius:var(--radius);cursor:pointer;transition:background .15s ease;
}
.form button:hover{background:#000;}
.form button[disabled]{opacity:.5;cursor:default;}
.form-foot .hint{font-size:0.85rem;color:var(--ink-3);}

.form-msg{
  font-size:0.94rem;padding:13px 16px;border-radius:var(--radius);
  border:1px solid var(--line-2);background:var(--bg-soft);color:var(--ink-2);
}
.form-msg.is-ok{background:#EDF5F0;border-color:#C6DED0;color:#2C6249;}
.form-msg.is-err{background:#FBF0EA;border-color:#EACFBE;color:#8A4522;}
.form-msg[hidden]{display:none;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.contact-aside{display:flex;flex-direction:column;gap:30px;padding-top:4px;}
.aside-block{border-top:1px solid var(--line);padding-top:22px;}
.aside-block h3{font-size:1.12rem;margin-bottom:9px;}
.aside-block p{color:var(--ink-3);font-size:0.95rem;}
.aside-links{display:flex;flex-direction:column;gap:9px;margin-top:14px;font-size:0.94rem;}
.aside-links a{color:var(--ink);text-underline-offset:3px;}
.aside-links a:hover{color:var(--blue);}

/* ---------- Sample download ---------- */
.sample-line{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-size:0.9rem;color:var(--ink-3);
}
.sample-line a{color:var(--ink);text-underline-offset:3px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:46rem;}
.faq-item{border-top:1px solid var(--line);padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:16px;color:var(--ink);font-weight:500;font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .plus{font-family:'IBM Plex Mono',monospace;color:var(--ink-3);flex-shrink:0;transition:transform .15s ease;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-item p{color:var(--ink-3);margin-top:12px;max-width:44rem;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 56px;}
.footer-row{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;}
.footer-links{display:flex;gap:24px;font-size:0.92rem;flex-wrap:wrap;}
.footer-links a{color:var(--ink-3);text-decoration:none;}
.footer-links a:hover{color:var(--ink);}
footer .fine{color:var(--ink-3);font-size:0.85rem;max-width:34rem;margin-top:18px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .product{grid-template-columns:1fr;gap:36px;}
  .buy-card{position:static;}
  .grid-3{grid-template-columns:1fr;gap:32px;}
  .contact-grid{grid-template-columns:1fr;gap:48px;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .wrap{padding:0 22px;}
  section{padding:56px 0;}
  .grid-2,.shots,ul.checks{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
  .hero{background-image:url('img/hero-sm.jpg');}
  .hero::after{
    background:linear-gradient(175deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.93) 46%,
      rgba(255,255,255,0.66) 74%,
      rgba(255,255,255,0.35) 100%);
  }
  .hero .wrap{padding-top:64px;padding-bottom:76px;}
  .page-head{padding-top:52px;padding-bottom:8px;}
  /* Let the links take their own full-width row: beside the wordmark they are
     squeezed to ~190px and wrap to four lines, which eats the small screen. */
  .nav{flex-wrap:wrap;gap:10px;padding:12px 0;}
  nav.links{width:100%;gap:14px 20px;font-size:0.9rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ---------- Notes: index listing ---------- */
.note-list{max-width:52rem;display:flex;flex-direction:column;}
.note-card{
  display:block;text-decoration:none;
  border-top:1px solid var(--line);
  padding:30px 0;
  transition:background .15s ease;
}
.note-list .note-card:last-child{border-bottom:1px solid var(--line);}
.note-card:hover h3{color:var(--blue);}
.note-card .note-meta{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.note-card h3{font-size:1.5rem;margin:12px 0 10px;transition:color .15s ease;}
.note-card p{color:var(--ink-3);font-size:0.99rem;max-width:44rem;}
.note-card .more{
  display:inline-block;margin-top:14px;font-size:0.9rem;color:var(--ink);
  border-bottom:1px solid var(--line-2);padding-bottom:1px;
}
.note-card:hover .more{border-bottom-color:var(--ink);}

/* ---------- Notes: article layout ---------- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:64px;align-items:start;}
.article-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px;}

.toc{border-top:1px solid var(--line);padding-top:18px;}
.toc .kicker{display:block;margin-bottom:12px;}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:toc;}
.toc li{counter-increment:toc;font-size:0.9rem;line-height:1.45;}
.toc a{
  color:var(--ink-3);text-decoration:none;display:flex;gap:10px;
  transition:color .15s ease;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.7rem;color:var(--line-2);flex-shrink:0;padding-top:2px;
}
.toc a:hover{color:var(--ink);}

.aside-buy{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);padding:22px;}
.aside-buy h4{font-family:'Instrument Serif',Georgia,serif;font-size:1.15rem;margin-bottom:8px;}
.aside-buy p{font-size:0.86rem;color:var(--ink-3);line-height:1.55;}
.aside-buy .btn{display:block;text-align:center;margin-top:16px;padding:11px 18px;font-size:0.9rem;}

/* ---------- Notes: prose ---------- */
.prose{max-width:38rem;}
.prose > p{margin-top:20px;color:var(--ink-2);}
.prose > p:first-child{margin-top:0;}
.prose h2{
  font-size:1.75rem;margin:52px 0 0;padding-top:22px;
  border-top:1px solid var(--line);scroll-margin-top:92px;
}
.prose h2 + p{margin-top:16px;}
.prose h3{font-size:1.22rem;margin:34px 0 0;scroll-margin-top:92px;}
.prose h3 + p{margin-top:12px;}
.prose a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line-2);}
.prose a:hover{color:var(--blue);text-decoration-color:var(--blue);}
.prose strong{color:var(--ink);font-weight:600;}
.prose ul,.prose ol{margin:20px 0 0;padding-left:22px;color:var(--ink-2);}
.prose li{margin-top:9px;padding-left:4px;}
.prose li::marker{color:var(--ink-3);}
.prose code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:0.86em;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:2px;
  padding:1px 5px;color:var(--ink);
}
.prose hr{border:none;border-top:1px solid var(--line);margin:44px 0;}

.article-head{padding-top:64px;padding-bottom:0;}
.article-head .article-meta{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.71rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px;
}
.article-head h1{font-size:clamp(2rem,3.8vw,3rem);margin:16px 0 18px;max-width:20em;}
.article-head .lead{max-width:38rem;}
.crumb{font-size:0.85rem;color:var(--ink-3);}
.crumb a{color:var(--ink-3);text-underline-offset:3px;}
.crumb a:hover{color:var(--ink);}

/* Equation block */
.eqn{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.9rem;line-height:1.75;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);
  border-left:2px solid var(--ink);border-radius:var(--radius);
  padding:18px 20px;margin:24px 0 0;overflow-x:auto;
}
.eqn .where{
  display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:0.78rem;color:var(--ink-3);line-height:1.65;white-space:normal;
}
.eqn .ref{float:right;font-size:0.72rem;color:var(--ink-3);margin-left:16px;}

/* Callout */
.callout{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-soft);padding:22px 24px;margin:28px 0 0;
}
.callout .kicker{display:block;margin-bottom:9px;}
.callout p{font-size:0.96rem;color:var(--ink-2);margin-top:0;}
.callout p + p{margin-top:12px;}
.callout-rust{background:var(--rust-soft);border-color:#EACFBE;}
.callout-rust .kicker{color:var(--rust);}

/* Data table */
.table-scroll{overflow-x:auto;margin:26px 0 0;border:1px solid var(--line);border-radius:var(--radius);}
table.data{border-collapse:collapse;width:100%;font-size:0.88rem;min-width:30rem;}
table.data th,table.data td{
  text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top;
}
table.data thead th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.7rem;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;background:var(--bg-soft);
}
table.data tbody tr:last-child td{border-bottom:none;}
table.data td:first-child{color:var(--ink);}
table.data .num{font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap;}
.table-note{font-size:0.82rem;color:var(--ink-3);margin-top:11px;}

/* End-of-article CTA */
.article-cta{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;margin-top:56px;background:var(--bg-soft);
}
.article-cta h3{font-size:1.4rem;margin-bottom:10px;}
.article-cta p{color:var(--ink-3);font-size:0.98rem;max-width:36rem;}
.article-cta .cta-row{margin-top:24px;}

.article-foot{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:0.85rem;color:var(--ink-3);line-height:1.7;
}

@media (max-width:980px){
  .article-grid{grid-template-columns:1fr;gap:44px;}
  .article-aside{position:static;}
  .toc{display:none;}
  .prose{max-width:none;}
}
@media (max-width:760px){
  .article-head{padding-top:44px;}
  .article-cta{padding:26px 22px;}
  .eqn{font-size:0.8rem;padding:15px 16px;}
}

/* ---------- Cookie consent banner ---------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--bg);border-top:1px solid var(--line-2);
  box-shadow:0 -8px 28px rgba(20,23,26,0.07);
  animation:consent-in .22s ease-out;
}
.consent-inner{
  max-width:var(--wrap);margin:0 auto;padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:36px;
}
.consent-copy{max-width:46rem;}
.consent-title{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.consent-copy p:last-child{font-size:0.92rem;color:var(--ink-2);line-height:1.6;}

.consent-actions{display:flex;gap:10px;flex-shrink:0;}
/* Both buttons carry the same size and weight: refusing has to be as easy
   as accepting, so neither is visually demoted. */
.consent-actions button{
  font:inherit;font-size:0.9rem;font-weight:500;
  padding:11px 22px;border-radius:var(--radius);cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  transition:background .15s ease,border-color .15s ease;
}
.consent-actions button:hover{background:var(--bg-soft);border-color:var(--ink-3);}
.consent-actions button[data-consent="accept"]{
  background:var(--ink);border-color:var(--ink);color:#fff;
}
.consent-actions button[data-consent="accept"]:hover{background:#000;}
.consent-actions button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* Deliberately a short fade and an 8px lift rather than a full slide: the
   resting state is the untransformed one, so if the animation never runs
   (throttled background tab, animations disabled) the banner still sits
   correctly instead of parked off the bottom of the viewport. */
@keyframes consent-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:760px){
  .consent-inner{
    flex-direction:column;align-items:stretch;gap:16px;padding:18px 22px;
  }
  .consent-actions button{flex:1;}
}
@media (prefers-reduced-motion:reduce){
  .consent{animation:none;}
}
.consent-copy a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line-2);}
.consent-copy a:hover{color:var(--blue);text-decoration-color:var(--blue);}