/* ==========================================================================
   Ready-made templates, on the marketing pages. Three shapes, one card:

   .tc   the carousel under the homepage hero: cover, name, what is set up,
         and the template's own button in its own voice.
   .tm   the strip under the header on the other marketing pages: a thumb,
         the name and the button, small, scrolling sideways.
   .tg-* /templates: every template, in groups, in the carousel's cards.

   Written by tools/templates-build.mjs. Colours are the marketing pages'
   coral on white, set here rather than borrowed, because the strip sits on
   grounds that do not share tokens (the blog's blue, pricing's coral).
   ========================================================================== */

/* -- The card -------------------------------------------------------------- */
.tc-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:#111827;}
.tc-card img{width:100%;height:auto;aspect-ratio:1;border-radius:18px;display:block;background:#f4ece8;
  box-shadow:0 14px 34px rgba(17,24,39,.10);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;}
.tc-name{font-size:16px;line-height:24px;font-weight:800;margin:16px 0 2px;letter-spacing:-.01em;}
.tc-fact{font-size:14px;line-height:20px;color:#5b6472;}
.tc-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:36px;padding:0 14px;
  border-radius:999px;border:1px solid #d4a99a;font-size:14px;font-weight:700;color:#a8442b;background:#fff;
  transition:background .2s,color .2s,border-color .2s;}
.tc-btn svg{width:15px;height:15px;flex:none;}
@media (hover:hover){
  .tc-card:hover img{transform:translateY(-4px) rotate(-1deg);box-shadow:0 22px 44px rgba(17,24,39,.16);}
  .tc-card:hover .tc-btn{background:#c25336;border-color:#c25336;color:#fff;}
}
.tc-card:focus-visible{outline:none;}
.tc-card:focus-visible img{outline:3px solid #c25336;outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .tc-card img{transition:none;} .tc-card:hover img{transform:none;} }

/* -- The homepage carousel -------------------------------------------------- */
.tc{padding-bottom:clamp(56px,7vw,88px);}
/* .tc .tc-head, not .tc-head: the head also carries the page's .in, whose
   margin:0 auto came later and took the space under it away. */
.tc .tc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;}
.tc-head .say{max-width:46ch;}
.tc-ctrl{display:flex;align-items:center;gap:10px;flex:none;}
.tc-all{font-size:15px;font-weight:700;color:#a8442b;text-decoration:none;margin-right:6px;white-space:nowrap;}
.tc-all:hover{text-decoration:underline;}
.tc-all.ot-shine,.tm-all.ot-shine{--shine-base:#a8442b;}
.tc-arrow{width:44px;height:44px;border-radius:999px;border:1px solid #d4a99a;background:#fff;color:#111827;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.tc-arrow svg{width:18px;height:18px;display:block;}
.tc-arrow:hover{border-color:#c25336;}
.tc-arrow:focus-visible{outline:2px solid #c25336;outline-offset:2px;}
/* The row runs to the window's edge on both sides but starts in line with the
   heading: padding that is the gutter plus whatever the 1080px column leaves. */
.tc-row{--edge:max(var(--gutter, 24px), calc((100vw - 1080px) / 2 + var(--gutter, 24px)));
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  padding:4px var(--edge) 24px;scroll-padding-left:var(--edge);}
.tc-row::-webkit-scrollbar{display:none;}
.tc-row .tc-card{flex:0 0 236px;scroll-snap-align:start;}
@media (max-width:640px){
  .tc .tc-head{display:block;margin-bottom:24px;}
  .tc-ctrl{margin-top:16px;}
  .tc-arrow{display:none;}
  .tc-row .tc-card{flex-basis:200px;}
}

/* -- The strip under the header --------------------------------------------- */
.tm{position:relative;z-index:1;padding:10px 0 12px;border-bottom:1px solid rgba(17,24,39,.08);max-width:none !important;}
.tm-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:18px;}
/* The design system's eyebrow: 12px, 600, .09em. */
.tm-k{flex:none;margin:0;font-family:'Figtree',system-ui,sans-serif;font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:#4b5563;max-width:116px;}
.tm-row{flex:1;min-width:0;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);padding:2px 40px 2px 2px;}
.tm-row::-webkit-scrollbar{display:none;}
.tm-card{flex:none;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1px solid rgba(17,24,39,.14);border-radius:14px;
  background:#fff;text-decoration:none;color:#111827;font-family:'Figtree',system-ui,sans-serif;}
.tm-card img{width:44px;height:44px;border-radius:10px;display:block;flex:none;}
.tm-card span{display:flex;flex-direction:column;line-height:1.25;}
.tm-card b{font-size:14px;font-weight:700;white-space:nowrap;}
.tm-card i{font-style:normal;font-size:12.5px;font-weight:600;color:#a8442b;white-space:nowrap;}
.tm-card:hover{border-color:#c25336;}
/* The blog underlines its links; the strip's are cards, not prose. */
.tm a,.tm a *{text-decoration:none !important;}
.tm-card:focus-visible,.tm-all:focus-visible{outline:2px solid #c25336;outline-offset:2px;}
.tm-all{flex:none;font-family:'Figtree',system-ui,sans-serif;font-size:14px;font-weight:700;color:#a8442b;text-decoration:none;white-space:nowrap;padding:0 6px;}
.tm-all:hover{text-decoration:underline;}
@media (max-width:640px){
  .tm-in{padding:0 16px;gap:12px;}
  /* Three lines of label beside a thumb: the cards say it on their own. */
  .tm-k{display:none;}
}

/* -- /templates --------------------------------------------------------------- */
.tg-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;}
.tg-jump a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #d4a99a;
  font-size:14px;font-weight:700;color:#111827;text-decoration:none;background:#fff;}
.tg-jump a:hover{border-color:#c25336;color:#a8442b;}
.tg-group{padding-top:48px;scroll-margin-top:24px;}
.tg-h{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,3.6vw,40px);
  letter-spacing:-.02em;line-height:1.1;margin:0 0 24px;color:#111827;}
.tg-h span{font-family:'Figtree',system-ui,sans-serif;font-size:14px;font-weight:700;color:#5b6472;letter-spacing:0;vertical-align:middle;margin-left:6px;}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:36px 24px;}
@media (max-width:520px){ .tg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;} .tc-btn{font-size:13px;padding:0 11px;} }