/* ================================================================
   S3XY CARDS: cards-v2.css
   Styles for /business-cards/ (the NFC business card page) and nothing else.
   Loaded after site-v2.css and built only from its tokens: no new
   colors or fonts, and no important flags. The page is assembled from the
   shared blocks (.buybox, .gallery, .trust-band, .how-grid, .price-lines,
   .price-examples, .faq-*, .cta-banner, .field, .check, .btn, .kcard); this
   file holds what is the page's own: .bc-* around the page, .cd-* in the designer.
   ------------------------------------------------------------
   ORDER
   1. Page: buy box, trust band, pictures inside shared tiles
   2. "What should a tap open?": chips and the phone
   3. Designer: grid and the preview stage
   4. Designer: the card canvas (same look as .kcard img)
   5. Designer: form groups, layout cards, fields, logo, messages
   6. Designer: continue, other ways to order, the small card on phones
   7. Designer: fallback (no JavaScript, or the designer did not start)
   8. Examples and pricing
   9. Motion and forced colors
   ================================================================ */

/* ============================================================
   1. PAGE
   ============================================================ */
/* the picture starts close under the header, so the price is on a phone's first screen */
.bc-buy{ padding-top:clamp(16px,3vw,56px); }
/* While the buy box is one column (under 960px) the two buttons come straight after the price and
   what it includes, so the way into the order flow is on a phone's first screen; the unit note, the
   facts and the colors follow them. The page's source order is the wide layout's: buttons last. */
@media (max-width:959.98px){
  .bc-buy-body{ display:flex; flex-direction:column; }
  .bc-buy-body > .eyebrow{ align-self:flex-start; }
  .bc-buy-body > .buybox-actions{ order:1; }
  .bc-buy-body > .buybox-note,.bc-buy-body > .buybox-facts,.bc-buy-body > .buybox-colors{ order:2; }
  .bc-buy-body > .buybox-note{ margin-top:22px; }
}
/* on a phone the dots sit close under the caption and the copy close under the dots: their 44px
   tap zone already holds the space around them */
@media (max-width:599.98px){
  .bc-buy-pager{ margin-top:0; }
  .bc-buy-body{ margin-top:-10px; }
}
/* A phone's first screen holds the price and the main button. The picture is only as tall as the
   screen leaves once everything else down to that button is counted: --bc-shot-room is the screen
   with the browser's bars showing, less the announce bar, the header, the caption, the dots and
   the copy with a three-line H1. A tall phone leaves more than the picture's 4:3 needs and nothing
   changes; where svh is unknown the picture keeps its 4:3.
   In a tile shorter than 4:3 a photograph is cropped. A studio render first loses the white above
   and below its card, then gets narrower (--bc-shot-w) in the white tile so the card stays whole:
   the card is about three quarters of the render's height. The render's ground is not quite white
   at its sides, so they fade into the tile over --bc-shot-fade, which is as long as the tile shows
   beside the render and nothing while the render fills the tile. */
@media (max-width:599.98px){
  .bc-buy{
    --bc-shot-room:max(120px, calc(100svh - 549px));
    --bc-shot-w:min(100%, calc(var(--bc-shot-room) * 1.6));
    --bc-shot-fade:clamp(0px, calc(100vw - 2 * var(--gutter) - var(--bc-shot-room) * 1.6), 12px);
  }
  .bc-buy-media .photo-card{ width:100%; max-height:var(--bc-shot-room); }
  .bc-buy-media .photo-card:not(.photo-card--dark) img{ width:var(--bc-shot-w); margin-inline:auto; }
  .bc-buy-media .photo-card:not(.photo-card--dark)::after{
    content:""; position:absolute; top:0; bottom:0; left:0; right:0; width:var(--bc-shot-w); margin-inline:auto; pointer-events:none;
    background:
      linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0)) left / var(--bc-shot-fade) 100% no-repeat,
      linear-gradient(270deg, #FFFFFF, rgba(255,255,255,0)) right / var(--bc-shot-fade) 100% no-repeat;
  }
}
/* a short screen (a phone browser with its bars showing): the line about what is included moves
   under the buttons and the copy closes up on the dots, which leaves the picture more room */
@media (max-width:599.98px) and (max-height:740px){
  .bc-buy{ --bc-shot-room:max(120px, calc(100svh - 503px)); }
  .bc-buy-body{ margin-top:-20px; }
  .bc-buy-body > .buybox-incl{ order:2; margin-top:22px; }
  .bc-buy-body > .buybox-note{ margin-top:6px; }
}
/* on a tablet the buy box is still one column: the picture keeps to a size that leaves the price
   on the first screen, in the middle of the column so its dots are in the middle of the page */
@media (min-width:600px) and (max-width:959.98px){ .bc-buy-media{ width:100%; max-width:540px; margin-inline:auto; } }

/* the band's lower hairline would sit on the edge of the next section's own background */
.bc-trust-band{ border-bottom:0; }

/* a <picture> inside a tile that sizes its <img> by height (.kcard, .how-media) */
.bc-pic{ display:block; width:100%; height:100%; }

/* ============================================================
   2. "WHAT SHOULD A TAP OPEN?"
   The chips on the left switch the phone on the right (under them on a phone). A chosen
   chip takes the shared selected look: the white ring and a faint fill, never the accent.
   ============================================================ */
.bc-tap{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,6vw,56px); align-items:center; }
.bc-tap-pick{ min-width:0; }
.bc-tap .section-head{ margin-bottom:24px; }
@media (min-width:860px){
  .bc-tap{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}

.bc-chips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:560px; }
@media (min-width:520px){ .bc-chips{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.bc-chip{
  display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h); padding:0 14px;
  border-radius:var(--radius-sm); border:1px solid var(--line-control); background:transparent;
  font-size:.9375rem; font-weight:500; line-height:1.25; text-align:left; color:var(--text-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s var(--ease-out), background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
.bc-chip svg{ flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){ .bc-chip:hover{ border-color:rgba(255,255,255,.55); color:var(--text); } }
.bc-chip:active{ transform:scale(.985); }
.bc-chip:focus-visible{ border-radius:var(--radius-sm); }
.bc-chip[aria-pressed="true"]{ background:var(--surface-2); border-color:var(--ring); box-shadow:inset 0 0 0 1px var(--ring); color:var(--text); }
/* until the script has started the chips are a plain list of examples: nothing to press */
.bc-tap:not(.is-live) .bc-chip{ pointer-events:none; }

/* the same thing in words: what a tap opens */
.bc-tap-line{ display:flex; align-items:flex-start; gap:10px; margin-top:22px; font-size:1.0625rem; line-height:1.5; color:var(--text-2); }
.bc-tap-line svg{ flex:none; width:22px; height:22px; margin-top:2px; fill:none; stroke:var(--accent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.bc-tap-line b{ font-weight:600; color:var(--text); }
.bc-tap-url{ color:var(--text); overflow-wrap:anywhere; }
.bc-tap-fine{ margin-top:10px; max-width:52ch; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }

/* ---- the phone: its top half, drawn in CSS, fading out at the bottom ---- */
.bc-phone{
  justify-self:center; width:min(100%,304px); padding:10px 10px 0; border-radius:46px 46px 0 0;
  background:linear-gradient(145deg,#3A3A41,#111114 40%,#2A2A30);
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 80px var(--halo);
  -webkit-mask-image:linear-gradient(#000 72%, transparent 100%);
  mask-image:linear-gradient(#000 72%, transparent 100%);
}
.bc-screen{
  position:relative; display:grid; align-content:start; gap:12px; height:400px; padding:48px 12px 0;
  overflow:hidden; border-radius:36px 36px 0 0; background:#0B0B0D;
}
.bc-island{
  position:absolute; top:12px; left:50%; width:86px; height:24px; margin-left:-43px;
  border-radius:var(--radius-pill); background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
/* the banner a phone shows when a card is held to it */
.bc-banner{ display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border-radius:20px; background:#2C2C31; }
.bc-banner-ico{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--text); color:#141416; }
.bc-banner-ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bc-banner-text{ display:grid; gap:1px; min-width:0; font-size:.8125rem; font-weight:600; line-height:1.3; color:var(--text); }
.bc-banner-text small{ font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); }
.bc-banner-text > span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bc-banner-text b{ font-weight:600; }

/* the page that opens: one sketch per example, only the chosen one shown */
.bc-page{ min-height:300px; padding:18px 14px 0; border-radius:18px 18px 0 0; background:var(--surface); border:1px solid var(--line); border-bottom:0; }
.bc-view{ display:none; gap:12px; align-content:start; }
.bc-phone[data-tap="website"] .bc-view--website,
.bc-phone[data-tap="social"] .bc-view--social,
.bc-phone[data-tap="review"] .bc-view--review,
.bc-phone[data-tap="booking"] .bc-view--booking,
.bc-phone[data-tap="menu"] .bc-view--menu,
.bc-phone[data-tap="contact"] .bc-view--contact{ display:grid; }
.bc-view-title{ font-family:var(--font-display); font-size:.9375rem; font-weight:600; line-height:1.3; color:var(--text); }
.bc-view-title--center{ text-align:center; }
.bc-view-row{ display:flex; align-items:center; gap:10px; }
/* a gray bar standing in for a line of text, a picture or a button */
.bc-sk{ display:block; height:10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); }
.bc-sk--90{ width:90%; } .bc-sk--70{ width:70%; } .bc-sk--60{ width:60%; } .bc-sk--50{ width:50%; } .bc-sk--45{ width:45%; }
.bc-sk--block{ height:92px; border-radius:var(--radius-sm); }
.bc-sk--pill{ width:58%; height:34px; background:var(--silver); }
.bc-sk--avatar{ flex:none; width:44px; height:44px; border-radius:50%; }
.bc-sk--center{ justify-self:center; }
.bc-sk--box{ height:70px; border-radius:var(--radius-sm); background:transparent; border:1px solid var(--line-strong); }
.bc-sk--slot{ height:30px; border-radius:10px; }
.bc-sk--row{ height:38px; border-radius:var(--radius-sm); }
.bc-sk--price{ flex:none; width:30px; }
.bc-view-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.bc-view-grid .bc-sk{ height:auto; aspect-ratio:1; border-radius:8px; }
.bc-view-stars{ display:flex; gap:6px; }
.bc-view-stars span{
  width:24px; height:24px; background:var(--silver);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bc-view-days{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.bc-view-days span{ height:42px; border-radius:10px; border:1px solid var(--line-strong); }
.bc-view-days .is-on{ background:var(--text); border-color:var(--text); }
.bc-view-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:11px; border-bottom:1px dashed var(--line-strong); }
.bc-view-line .bc-sk:first-child{ flex:none; }

/* a new choice: the banner drops in and the page fades up */
.bc-phone.is-tapped .bc-banner{ animation:bc-drop .45s var(--ease-out); }
.bc-phone.is-tapped .bc-view{ animation:bc-rise .4s var(--ease-out); }
@keyframes bc-drop{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@keyframes bc-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ============================================================
   3. DESIGNER: GRID AND THE PREVIEW STAGE
   One column on phones and tablets (preview first); from 960px the preview is on the
   left, sticky under the header, and the form is on the right.
   ============================================================ */
.cd-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,4vw,36px); }
.cd-stage,.cd-form{ min-width:0; }

/* [hidden] elements below carry their own display (grid, flex): the attribute has to win */
#designer [hidden]{ display:none; }

/* the stage: a panel with the faint dot grid, the card in the middle of it */
.cd-stage-panel{
  position:relative; isolation:isolate; overflow:hidden; padding:clamp(18px,5.5vw,52px);
  border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line);
}
.cd-stage-panel::before{
  content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1.5px);
  background-size:22px 22px; background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 100%);
}

.cd-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:16px; }
.cd-note{ flex:1 1 240px; margin:0; max-width:46ch; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }

/* Flat / 3D: a two-button switch, 44px targets, the pressed one filled */
.cd-view{
  flex:none; display:inline-flex; gap:4px; padding:3px;
  border:1px solid var(--line-strong); border-radius:var(--radius-pill);
}
.cd-view button{
  min-width:72px; min-height:44px; padding:0 20px; border-radius:var(--radius-pill);
  font-size:.9375rem; font-weight:600; line-height:1; color:var(--text-2); cursor:pointer;
  transition:background-color .15s, color .15s;
}
.cd-view button:focus-visible{ border-radius:var(--radius-pill); }
.cd-view button[aria-pressed="true"]{ background:var(--surface-2); color:var(--text); }
@media (hover:hover){ .cd-view button[aria-pressed="false"]:hover{ color:var(--text); } }
.cd-view button:active{ background:rgba(255,255,255,.14); }

/* text that did not fit, or a logo that is missing: a warning, marked with the warning color */
.cd-warn{ display:grid; gap:8px; margin-top:14px; max-width:56ch; }
.cd-warn:empty{ margin:0; }
.cd-warn p{
  margin:0; padding-left:12px; border-left:2px solid var(--warn);
  font-size:var(--fs-small); line-height:1.5; text-align:left; color:var(--text-2);
}

@media (min-width:960px){
  .cd-grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); column-gap:clamp(32px,4vw,56px); align-items:start; }
}
/* sticky only where the stage fits under the header with room to spare */
@media (min-width:960px) and (min-height:640px){
  .cd-stage{ position:sticky; top:calc(var(--header-h) + 24px); }
}

/* ============================================================
   4. DESIGNER: THE CARD CANVAS
   The art is black on white; the same CSS filter as .kcard img turns it into light
   engraving on a black card. The 3D host is the one in site-v2.css (.card3d-host).
   ============================================================ */
.kcard canvas{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:invert(1) brightness(.86) contrast(1.05);
}
.cd-card{ width:100%; }
/* the 3D host takes the flat card's shape (site-v2.css makes it 4:3), so switching between
   the two views moves nothing below them; card3d.js fits the card to whatever box it gets (R6A-6) */
.cd .card3d-host{ aspect-ratio:1013/638; }

/* ============================================================
   5. DESIGNER: FORM
   Each group is a tile: layout, details, logo, continue.
   ============================================================ */
.cd-fs{
  min-width:0; padding:clamp(16px,3vw,26px);
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--line);
}
.cd-fs + .cd-fs{ margin-top:14px; }
/* a floated legend is laid out like any other block (the browser's own legend sits on the
   fieldset's top edge and ignores its padding); the element after it clears the float */
.cd-fs legend{
  float:left; width:100%; display:flex; align-items:baseline;
  margin:0 0 8px; padding:0;
  font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600; letter-spacing:-.018em; line-height:1.25; color:var(--text);
}
/* a margin, not a flex gap: where a browser does not lay the legend out as a flex box (or has
   no gap for flex), the number and the word must still not run together (R6A-8) */
.cd-fs .step-index{ margin-right:12px; }
.cd-fs legend + *{ clear:left; }

.cd-hint{ margin:0 0 16px; max-width:62ch; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }

/* ---- a message beside the control it is about, and the status line under the Continue
   button. An error carries an icon as well as the error color. ---- */
.cd-msg,.cd-status{ margin:12px 0 0; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }
.cd-msg:empty{ display:none; }
.cd-msg--above{ margin:0 0 14px; } /* placed over its control instead of under it */
.cd-status:empty{ margin:0; } /* a live region: it stays in the page, with no height, while it has nothing to say */
.cd-msg.is-err,.cd-status.is-err{ display:flex; align-items:flex-start; gap:6px; font-weight:500; color:var(--err); }
.cd-msg.is-ok,.cd-status.is-ok{ display:flex; align-items:flex-start; gap:6px; font-weight:500; color:var(--ok); }
.cd-msg.is-err::before,.cd-status.is-err::before,.cd-msg.is-ok::before,.cd-status.is-ok::before{
  content:""; flex:none; width:16px; height:16px; margin-top:2.5px; background:currentColor;
}
.cd-msg.is-err::before,.cd-status.is-err::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cd-msg.is-ok::before,.cd-status.is-ok::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- layout picker: five large cards and the way to a blank card. The radio is invisible
   but focusable and the whole card is its label. A chosen card takes the shared selected
   look: 2px white ring, faint fill, the tick badge on its corner. ---- */
.cd-layouts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:600px) and (max-width:959.98px){ .cd-layouts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.cd-layout{ position:relative; display:block; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cd-layout input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.cd-layout-face{
  position:relative; display:grid; align-content:start; gap:3px; height:100%; padding:10px 10px 14px;
  border-radius:var(--radius); background-color:transparent; border:1px solid var(--line-control);
  transition:background-color .18s, border-color .18s, box-shadow .18s;
}
.cd-layout-face::after{
  content:""; position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
  background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141416' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 3px var(--surface); transform:scale(0); transition:transform .18s var(--ease-out);
}
.cd-thumb{
  display:block; width:100%; margin-bottom:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.07); /* .kcard's edge, without its big drop shadow */
}
.cd-layout-name{ display:block; font-family:var(--font-display); font-size:1rem; font-weight:600; line-height:1.3; letter-spacing:-.012em; color:var(--text); }
.cd-layout-sub{ display:block; font-size:.8125rem; line-height:1.4; color:var(--text-2); }
@media (hover:hover){
  .cd-layout:hover input:not(:checked) + .cd-layout-face,.cd-layout--blank:hover .cd-layout-face{ border-color:rgba(255,255,255,.55); }
}
.cd-layout input:checked + .cd-layout-face{ background-color:var(--surface-2); border-color:var(--ring); box-shadow:inset 0 0 0 1px var(--ring); }
.cd-layout input:checked + .cd-layout-face::after{ transform:scale(1); }
.cd-layout input:focus-visible + .cd-layout-face{ outline:2px solid var(--focus); outline-offset:3px; }

/* the sixth tile is a link, not a layout: a dashed card with a plus where the thumbnail would be */
.cd-layout--blank .cd-layout-face{ border-style:dashed; }
.cd-layout--blank .cd-layout-face::after{ content:none; }
.cd-layout--blank:focus-visible{ outline:none; }
.cd-layout--blank:focus-visible .cd-layout-face{ outline:2px solid var(--focus); outline-offset:3px; }
.cd-thumb--blank{
  display:grid; place-items:center; aspect-ratio:1013/638; border-radius:4.2%/6.6%;
  background:rgba(255,255,255,.04); box-shadow:none; color:var(--text-2);
}
.cd-thumb--blank svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

.cd-tapmark{ margin-top:12px; }

/* ---- details: one column on a small phone, two from 480px ---- */
.cd-fields{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
@media (min-width:480px){ .cd-fields{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; } }
.cd-form textarea{ min-height:96px; }
.cd-finish .field{ margin-top:10px; }

/* ---- logo: the native file input stays focusable but invisible; its label is the button ---- */
.cd-file{ position:relative; display:inline-block; }
.cd-file-input{ position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; overflow:hidden; }
.cd-file-btn{ cursor:pointer; }
.cd-file-ico{ flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cd-file-input:focus-visible + .cd-file-btn{ outline:2px solid var(--focus); outline-offset:3px; }
/* the logo that is on the card: its file name, Invert, Remove */
.cd-logo-loaded{
  display:grid; justify-items:start; margin-top:16px; padding:12px 16px 6px;
  border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line);
}
/* word-break is the fallback where overflow-wrap:anywhere is not known: a long file name must wrap, not widen the page (R6A-9) */
.cd-logo-file{
  display:flex; align-items:flex-start; gap:8px; margin:0; min-width:0; max-width:100%;
  font-size:.9375rem; font-weight:500; line-height:1.5; color:var(--text); word-break:break-word; overflow-wrap:anywhere;
}
.cd-logo-file svg{ flex:none; width:18px; height:18px; margin-top:2.5px; fill:none; stroke:var(--ok); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cd-invert-note{ margin:0 0 4px 34px; }

/* a quiet text button (Remove logo) */
.cd-link-btn{
  min-height:44px; padding:0; cursor:pointer;
  font-size:.9375rem; font-weight:500; color:var(--text-2);
  text-decoration:underline; text-decoration-color:var(--line-control); text-underline-offset:3px;
}
@media (hover:hover){ .cd-link-btn:hover{ color:var(--text); text-decoration-color:currentColor; } }
.cd-link-btn:active{ color:var(--text); }

/* ============================================================
   6. DESIGNER: CONTINUE, OTHER WAYS TO ORDER, THE SMALL CARD
   ============================================================ */
.cd-checkout{ display:grid; margin-top:20px; }
.cd-checkout .btn{ width:100%; }
.cd-fine{ margin:14px 0 0; max-width:60ch; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); }

/* ordering by email sits in a closed disclosure under the button */
.cd-other{ margin-top:20px; border-top:1px solid var(--line); }
.cd-other summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px;
  font-size:.9375rem; font-weight:500; color:var(--text-2); cursor:pointer; list-style:none;
}
.cd-other summary::-webkit-details-marker{ display:none; }
.cd-other summary::after{
  content:""; flex:none; width:8px; height:8px; margin-right:4px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .2s var(--ease-out);
}
.cd-other[open] summary::after{ transform:rotate(-135deg); }
@media (hover:hover){ .cd-other summary:hover{ color:var(--text); } }
.cd-other summary:active{ color:var(--text); }

.cd-steps{ display:grid; gap:20px; margin:8px 0 0; counter-reset:cd-step; }
.cd-steps li{ display:grid; justify-items:start; gap:10px; counter-increment:cd-step; }
.cd-step-text{ margin:0; font-weight:500; line-height:1.5; color:var(--text); }
.cd-step-text::before{ content:counter(cd-step) "."; margin-right:8px; color:var(--text-3); }
@media (max-width:479.98px){
  .cd-steps li{ justify-items:stretch; }
  .cd-copy-btn{ width:100%; }
}
.cd-copy-note{ margin:24px 0 10px; font-size:var(--fs-small); line-height:1.5; color:var(--text-2); overflow-wrap:anywhere; }
/* the order text, shown only when the browser will not copy it (16px: no iOS zoom on focus) */
.cd-form textarea.cd-copy-text{ display:block; margin-top:12px; line-height:1.5; color:var(--text-2); }

/* ---- the small card: below 960px, in the corner of the screen while the large preview is
   scrolled away and the form is on screen (card-designer.js sets .is-on). It sits under the
   header and lets taps through. ---- */
.cd-pip{ display:none; }
@media (max-width:959.98px){
  .cd-pip{
    display:block; position:fixed; z-index:80; top:calc(var(--header-h) + 10px); right:12px; width:min(42vw,168px);
    pointer-events:none; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.96); transform-origin:top right;
    transition:opacity .22s, transform .22s var(--ease-out), visibility 0s linear .22s;
  }
  .cd-pip.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .22s, transform .22s var(--ease-out); }
  .cd-pip .kcard{ box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 18px 40px -10px rgba(0,0,0,.95); }
}

/* ============================================================
   7. DESIGNER: FALLBACK
   Shown instead of the designer when JavaScript is off (no has-js class on <html>,
   set in <head>) or the designer did not start (#designer.is-failed, set by the script at
   the end of <body> after 6 seconds). While it shows, the designer is hidden.
   ============================================================ */
.cd-fallback{
  display:none; max-width:560px; padding:clamp(24px,4vw,36px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.cd-fallback p{ margin:0 0 22px; color:var(--text-2); }
html:not(.has-js) .cd-fallback,#designer.is-failed .cd-fallback{ display:block; }
html:not(.has-js) .cd-ui,#designer.is-failed .cd-ui{ display:none; }
@media (max-width:479.98px){ .cd-fallback .btn{ width:100%; } }

/* ============================================================
   8. EXAMPLES AND PRICING
   ============================================================ */
/* a layout sample in the examples row: the card's edge without .kcard's long drop shadow,
   which the scrolling row would cut off */
.bc-sample{ box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.07); }
/* "Try this layout" takes its own line under the badge and the name at every width, so the five
   captions are the same height whatever the name's length */
.bc-sample-try{ flex-basis:100%; margin-top:-6px; }

/* pricing: the rates and what is included on the left, worked orders on the right */
.bc-pricing{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,5vw,56px); }
@media (min-width:960px){
  .bc-pricing{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
}
.bc-pricing-main,.bc-pricing-side{ min-width:0; }
.bc-pricing .price-box{ max-width:none; }
/* "per card" under an amount */
.bc-unit{ display:block; margin-top:2px; font-size:.8125rem; font-weight:500; text-align:right; color:var(--text-2); }
.bc-more{ margin-top:16px; font-size:.9375rem; line-height:1.5; color:var(--text-2); }
.bc-sub{ margin:clamp(28px,4vw,36px) 0 14px; }
.bc-pricing-side .bc-sub{ margin-top:0; }

/* what every order includes: a ticked list, two across where there is room */
.bc-incl{ display:grid; gap:10px 24px; }
@media (min-width:560px){ .bc-incl{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bc-incl li{ position:relative; padding-left:28px; line-height:1.5; color:var(--text-2); }
.bc-incl li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; background:var(--silver);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* seven worked orders, two across at every width; the last one takes the whole row */
.bc-examples{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.bc-examples .price-example:last-child{ grid-column:1 / -1; }

/* ============================================================
   9. MOTION AND FORCED COLORS
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bc-chip,.cd-view button,.cd-layout-face,.cd-layout-face::after,.cd-other summary::after,.cd-pip,.cd-pip.is-on{ transition:none; }
  .bc-chip:active{ transform:none; }
  .cd-pip{ transform:none; }
  .bc-phone.is-tapped .bc-banner,.bc-phone.is-tapped .bc-view{ animation:none; }
}
@media (forced-colors:active){
  .bc-chip[aria-pressed="true"]{ border:2px solid Highlight; }
  .cd-view button[aria-pressed="true"]{ border:2px solid Highlight; }
  .cd-layout input:checked + .cd-layout-face{ outline:2px solid Highlight; }
}

/* the pricing block, pared down: one small tile of three lines, in the middle of the page */
.bc-price-min{ max-width:520px; margin-inline:auto; }

/* the buy box has one picture now, so no dots under it: the copy keeps its own distance */
.bc-buy-body{ margin-top:0 !important; }

/* the S3XY Profile block: a photograph of the profile on a phone in place of the drawn phone,
   and its list as plain tiles (they are not buttons) */
.bc-profile-shot{ justify-self:center; width:min(100%, 420px); height:auto; }
.bc-chip--plain{ cursor:default; color:var(--text); }
.bc-tap .bc-chip--plain{ pointer-events:auto; }

/* the photograph ends where the wrist was cut: its lower part fades out into the page instead of stopping on a line */
.bc-profile-shot{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 98%);
  mask-image:linear-gradient(180deg, #000 0%, #000 72%, transparent 98%);
}