.faq details summary { list-style:none; cursor:pointer; padding:21px 26px 21px 0; font:600 15px Arial,sans-serif; position:relative; }
.faq details summary::-webkit-details-marker { display:none; }
.faq details summary::after { content:"+"; position:absolute; right:0; top:16px; font-size:22px; font-weight:400; }
.faq details[open] summary::after { content:"−"; }

/* Photography replaces decorative geometry; the phone remains a replaceable product-screen frame. */
.hero-visual { background:url("images/hero-craft.png") center/cover no-repeat; border-radius:0 0 0 140px; }
.hero-visual .hero-yarn,.hero-visual .lace { display:none; }
.hero-visual .phone { left:31%; top:6%; transform:rotate(3deg); }
.desk-scene { background:url("images/feature-desk-real.png") center/cover no-repeat; }
.desk-scene .desk-yarn,.desk-scene .notebook { display:none; }
.feature-media { background-image:url("images/feature-desk.png"); background-size:cover; background-position:center; }
.feature-media .feature-texture { display:none; }
.feature:first-child .feature-media { background-image:url("images/feature-desk-real.png"); background-position:center; }
.feature:first-child .feature-media .phone { display:none; }
.feature-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fbfaf4 0%,transparent 42%); }
.feature-media .phone,.feature-media>span { z-index:1; }
.case-image { background-image:url("images/use-cases.png"); background-size:300% auto; background-repeat:no-repeat; }
.case-image::before { display:none; }
.case-image.first { background-position:left center; }.case-image.second { background-position:center center; }.case-image.third { background-position:right center; }
.cta { background:#102649 url("images/cta-craft.png") right center/auto 100% no-repeat; }
.cta-craft { display:none; }
@media (max-width:760px) { .hero-visual { margin-left:-24px;margin-right:-24px; border-radius:0; }.feature-media::after { background:linear-gradient(90deg,#fbfaf4aa 0%,transparent 80%); }.cta { background-size:auto 46%; background-position:right bottom; } }

/* Match the approved LP rhythm: smaller desktop type, tighter bands, and illustrated steps. */
@media (min-width:761px) { .section { padding-top:86px; padding-bottom:86px; }.section h2,.cta h2 { font-size:43px; }.features>h2 { margin-bottom:52px; }.feature { min-height:276px; gap:58px; }.feature h3 { font-size:29px; }.how { padding-top:76px; padding-bottom:72px; }.how h2 { font-size:42px; }.steps { margin-top:28px; gap:38px; }.use-cases { padding-top:88px; padding-bottom:84px; } }
.how .steps { max-width:1040px; min-height:540px; padding-top:0; background:url("images/steps-editorial.png") center bottom/100% auto no-repeat; }
.how .steps article { padding-top:166px; position:relative; }.how .steps article b { position:absolute; top:140px; left:calc(50% - 79px); }.how .step-icon { display:none; }.how .steps h3 { font-size:18px; }.how .steps p { display:none; }.thread { display:none; }
.feature-copy h3::before { content:""; display:inline-block; width:24px; height:24px; margin-right:13px; vertical-align:-3px; border:1.5px solid var(--coral); border-radius:50%; box-shadow:inset 0 0 0 6px #faf8f2; }
.app-store-badge { width:136px; height:auto; display:block; margin-top:18px; }
.app-store-link { display:inline-block; line-height:0; margin-top:18px; transition:transform .2s,opacity .2s; }
.app-store-link:hover { opacity:.86; transform:translateY(-2px); }
.brand { display:inline-flex; align-items:center; gap:9px; }
.brand img { width:28px; height:28px; border-radius:8px; object-fit:cover; box-shadow:0 2px 8px #19284518; }
footer .brand img { width:24px; height:24px; border-radius:7px; }

/* Make the language choice read as one intentional control instead of loose nav links. */
.language-switcher { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid #d9d3c9; border-radius:999px; background:#fffdf9; white-space:nowrap; }
.language-label { padding:0 7px 0 9px; color:#7c817f; font-size:11px; font-weight:700; letter-spacing:.02em; }
.language-switcher a { padding:6px 9px; border-radius:999px; color:#59636d; font-size:11px; font-weight:700; }
.language-switcher a:hover { background:#f0ece5; opacity:1; }
.language-switcher a.is-current { background:var(--ink); color:#fff; }

/* Evidence captured from the Yarncue app project. Keep the device chrome from the LP, but show the actual screens inside it. */
.phone-real-empty .phone-screen,
.phone-real-count .phone-screen,
.phone-projects-list .phone-screen { padding:0; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:cover; }
.phone-real-empty .phone-screen { background-image:url("images/real/projects-empty.png"); }
.phone-real-count .phone-screen { background-image:url("images/real/count-workspace.png"); }
.phone-projects-list .phone-screen { background-image:url("images/real/history.png"); }
.feature:nth-child(3) .phone-projects-list .phone-screen { background-image:url("images/real/history-crop.png"); background-size:cover; background-position:center top; }
.feature:nth-child(3) .phone { width:100%; height:360px; padding:0; border:0; border-radius:16px; background:transparent; box-shadow:none; }
.feature:nth-child(3) .phone-notch { display:none; }
.feature:nth-child(3) .phone-screen { border-radius:16px; background-size:contain; background-repeat:no-repeat; background-color:transparent; }
.feature:nth-child(4) .phone-real-count .phone-screen { background-image:url("images/real/projects-screen-crop.png"); }
.feature:first-child .feature-media { background-image:none; }
.feature:first-child .feature-media .phone { display:block; }
.feature-media .phone { transform:scale(.76); }
.phone-real-empty .phone-screen > *,
.phone-real-count .phone-screen > *,
.phone-projects-list .phone-screen > * { display:none; }
.feature-media .phone-real-empty .phone-screen,
.feature-media .phone-real-count .phone-screen,
.feature-media .phone-projects-list .phone-screen { background-size:100% auto; background-position:center top; }
@media (max-width:760px) { .how { padding-top:58px; padding-bottom:56px; }.how h2 { font-size:33px; }.how .steps { display:block; min-height:0; margin-top:18px; padding:286px 0 0; background-size:150% auto; background-position:center top; }.how .steps article { padding:0; margin:0 0 28px; text-align:center; }.how .steps article b { position:static; display:block; margin-bottom:6px; }.how .steps h3 { font-size:18px; line-height:1.55; }.how .steps article:last-child { margin-bottom:0; } .language-switcher { margin-left:auto; padding:2px; }.language-label { display:none; }.language-switcher a { padding:5px 7px; font-size:10px; } }

/* Japanese feature review: make all four product states legible at once. */
@media (min-width:761px) {
  .feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 30px; }
  .feature,.feature.reverse { display:flex; flex-direction:column; align-items:stretch; gap:22px; min-height:0; margin:0; direction:ltr; }
  .feature-media { height:360px; }
  .feature-media .phone { transform:scale(.82); transform-origin:bottom center; }
  .feature-copy { padding:0 12px 4px; }
  .feature-copy h3 { font-size:28px; }
  .feature-copy>p:last-child { max-width:34em; }
  .feature-media>span { display:none; }
}
@media (max-width:760px) {
  .feature-list { display:block; }
  .feature,.feature.reverse { min-height:0; margin-bottom:58px; }
  .feature-media { height:300px; }
  .feature-media .phone { transform:scale(.62); }
  .feature-copy { padding:0; }
  .feature-media>span { display:none; }
}